From 276273c5ed5c748736c1ceeb48611609b24e6fac Mon Sep 17 00:00:00 2001
From: bran18 <andreyfdez18@gmail.com>
Date: Mon, 24 Feb 2025 13:34:22 -0600
Subject: [PATCH 1/3] feat: improve clickable text with sentence content

---
 .../routes/chat/chat-clickable-text.tsx       | 38 ++++++++++++-------
 apps/masterbots.ai/lib/clickable-results.ts   | 25 ++++++------
 apps/masterbots.ai/lib/utils.ts               |  5 ---
 apps/masterbots.ai/types/types.ts             |  6 +++
 4 files changed, 44 insertions(+), 30 deletions(-)

diff --git a/apps/masterbots.ai/components/routes/chat/chat-clickable-text.tsx b/apps/masterbots.ai/components/routes/chat/chat-clickable-text.tsx
index fe990e02..395c2d97 100644
--- a/apps/masterbots.ai/components/routes/chat/chat-clickable-text.tsx
+++ b/apps/masterbots.ai/components/routes/chat/chat-clickable-text.tsx
@@ -23,11 +23,12 @@ export function ClickableText({
     ? extractTextFromReactNodeWeb(children)
     : extractTextFromReactNodeNormal(children)
 
-  const createClickHandler = (text: string) => () => {
+  const createClickHandler = (text: string, fullContext: string) => () => {
     if (sendMessageFromResponse && text.trim()) {
       const cleanedText = cleanClickableText(text)
+      const contextToUse = fullContext || cleanedText
       sendMessageFromResponse(
-        `Explain more in-depth and in detail about ${cleanedText}`
+        `Explain more in-depth and in detail about ${contextToUse}`
       )
     }
   }
@@ -85,14 +86,18 @@ export function ClickableText({
     return linkElement
   }
 
-  const renderClickableContent = (clickableText: string, restText: string) => (
+  const renderClickableContent = (
+    clickableText: string,
+    restText: string,
+    fullContext: string
+  ) => (
     <span className="inline">
       <button
         className={cn(
           'inline-block cursor-pointer hover:underline bg-transparent border-none p-0 m-0 text-left',
           isListItem ? 'text-blue-500' : 'text-link'
         )}
-        onClick={createClickHandler(clickableText)}
+        onClick={createClickHandler(clickableText, fullContext)}
         type="button"
       >
         {clickableText}
@@ -116,7 +121,7 @@ export function ClickableText({
           const strongContent = extractTextFromReactNodeNormal(
             (content.props as { children: React.ReactNode }).children
           )
-          const { clickableText, restText } = parseClickableText(
+          const { clickableText, restText, fullContext } = parseClickableText(
             strongContent + ':'
           )
 
@@ -126,12 +131,15 @@ export function ClickableText({
                 key={`clickable-${
                   // biome-ignore lint/suspicious/noArrayIndexKey: <explanation>
                   index
-                  }`}
+                }`}
                 className={cn(
                   'cursor-pointer hover:underline',
                   isListItem ? 'text-blue-500' : 'text-link'
                 )}
-                onClick={createClickHandler(clickableText)}
+                onClick={createClickHandler(
+                  clickableText,
+                  fullContext || strongContent
+                )}
                 type="button"
                 tabIndex={0}
               >
@@ -153,8 +161,8 @@ export function ClickableText({
               typeof item === 'string'
                 ? item
                 : extractTextFromReactNodeNormal(
-                  (item.props as { children: React.ReactNode }).children
-                )
+                    (item.props as { children: React.ReactNode }).children
+                  )
             )
             .join(' ')
           return transformLink(content, parentContext)
@@ -163,7 +171,9 @@ export function ClickableText({
         return content
       }
 
-      const { clickableText, restText } = parseClickableText(String(content))
+      const { clickableText, restText, fullContext } = parseClickableText(
+        String(content)
+      )
 
       if (!clickableText.trim()) {
         return content
@@ -174,9 +184,9 @@ export function ClickableText({
           key={`clickable-${
             // biome-ignore lint/suspicious/noArrayIndexKey: <explanation>
             index
-            }`}
+          }`}
         >
-          {renderClickableContent(clickableText, restText)}
+          {renderClickableContent(clickableText, restText, fullContext)}
         </React.Fragment>
       )
     })
@@ -186,7 +196,7 @@ export function ClickableText({
     return extractedContent
   }
 
-  const { clickableText, restText } = parseClickableText(
+  const { clickableText, restText, fullContext } = parseClickableText(
     String(extractedContent)
   )
 
@@ -194,5 +204,5 @@ export function ClickableText({
     return <>{extractedContent}</>
   }
 
-  return renderClickableContent(clickableText, restText)
+  return renderClickableContent(clickableText, restText, fullContext)
 }
diff --git a/apps/masterbots.ai/lib/clickable-results.ts b/apps/masterbots.ai/lib/clickable-results.ts
index 012a655e..7b046f3e 100644
--- a/apps/masterbots.ai/lib/clickable-results.ts
+++ b/apps/masterbots.ai/lib/clickable-results.ts
@@ -1,3 +1,4 @@
+import type { ParsedText } from '@/types/types'
 import type { ReactNode } from 'react'
 import React from 'react'
 
@@ -25,11 +26,6 @@ export function createUniquePattern(): RegExp {
   return new RegExp(`(?:${UNIQUE_PHRASES.join('|')}):\\s*([^.:]+[.])`, 'i')
 }
 
-export interface ParsedText {
-  clickableText: string
-  restText: string
-}
-
 export function extractTextFromReactNodeWeb(node: ReactNode): ReactNode {
   if (React.isValidElement(node)) {
     if (node.type === 'strong') {
@@ -137,22 +133,24 @@ export function extractTextFromReactNodeNormal(node: ReactNode): string {
 }
 
 export function parseClickableText(fullText: string): ParsedText {
-  // Skip URLs
   if (typeof fullText === 'string' && fullText.match(/https?:\/\/[^\s]+/)) {
     return {
       clickableText: '',
       restText: fullText,
+      fullContext: fullText,
     }
   }
 
-  // First check for unique phrases
+  //* checks unique phrases
   for (const phrase of UNIQUE_PHRASES) {
     if (fullText.includes(phrase)) {
-      // Split content after the phrase
+      //* Split content after the phrase
       const [_, ...rest] = fullText.split(phrase)
+      const restContent = rest.join(phrase);
       return {
         clickableText: phrase,
-        restText: rest.join(phrase), // Rejoin in case phrase appears multiple times
+        restText: restContent,
+        fullContext: phrase + restContent, //* Store the full context
       }
     }
   }
@@ -162,27 +160,32 @@ export function parseClickableText(fullText: string): ParsedText {
 
   if (titleMatch) {
     const title = titleMatch[1].trim()
+    const content = titleMatch[2]
+    
     if (!title || title.match(/^[.\s]+$/)) {
       return {
         clickableText: '',
         restText: fullText,
+        fullContext: fullText,
       }
     }
 
     return {
       clickableText: title,
-      restText: ': ' + titleMatch[2],
+      restText: ': ' + content,
+      fullContext: fullText, //? Stores the full context
     }
   }
 
   return {
     clickableText: '',
     restText: fullText,
+    fullContext: fullText,
   }
 }
 
+
 export function cleanClickableText(text: string): string {
-  // Remove trailing punctuation and whitespace
   return text.replace(/[,.()[\]]$/, '').trim()
 }
 
diff --git a/apps/masterbots.ai/lib/utils.ts b/apps/masterbots.ai/lib/utils.ts
index 4a1a1a64..56e8362f 100644
--- a/apps/masterbots.ai/lib/utils.ts
+++ b/apps/masterbots.ai/lib/utils.ts
@@ -229,11 +229,6 @@ export function removeSurroundingQuotes(str: string) {
   return str
 }
 
-export interface ParsedText {
-  clickableText: string
-  restText: string
-}
-
 // * Converts ReactNode content to string for processing
 export function extractTextFromReactNode(node: ReactNode): string {
   if (typeof node === 'string') return node
diff --git a/apps/masterbots.ai/types/types.ts b/apps/masterbots.ai/types/types.ts
index 6fa6991f..f5ae802b 100644
--- a/apps/masterbots.ai/types/types.ts
+++ b/apps/masterbots.ai/types/types.ts
@@ -355,3 +355,9 @@ export interface ClassifyQuestionParams {
   retryCount?: number
   domain?: string
 }
+
+export interface ParsedText {
+  clickableText: string;  // The text that appears clickable
+  restText: string;       // The text that follows (for visual rendering)
+  fullContext: string;    // The full sentence context for the follow-up question
+}
\ No newline at end of file

From 5e34e0d408de2da030fa6511ed978044a307dda8 Mon Sep 17 00:00:00 2001
From: bran18 <andreyfdez18@gmail.com>
Date: Mon, 24 Feb 2025 14:33:57 -0600
Subject: [PATCH 2/3] feat: clickable usage

---
 apps/masterbots.ai/lib/clickable-results.ts | 17 ++++++++++++++---
 1 file changed, 14 insertions(+), 3 deletions(-)

diff --git a/apps/masterbots.ai/lib/clickable-results.ts b/apps/masterbots.ai/lib/clickable-results.ts
index 7b046f3e..6b1d49da 100644
--- a/apps/masterbots.ai/lib/clickable-results.ts
+++ b/apps/masterbots.ai/lib/clickable-results.ts
@@ -141,16 +141,21 @@ export function parseClickableText(fullText: string): ParsedText {
     }
   }
 
-  //* checks unique phrases
+  //* First check for unique phrases
   for (const phrase of UNIQUE_PHRASES) {
     if (fullText.includes(phrase)) {
       //* Split content after the phrase
       const [_, ...rest] = fullText.split(phrase)
       const restContent = rest.join(phrase);
+      
+      //* Extract first sentence (up to the first period after the phrase)
+      const firstSentenceMatch = (phrase + restContent).match(/^(.+?\.)\s/);
+      const firstSentence = firstSentenceMatch ? firstSentenceMatch[1] : (phrase + restContent);
+      
       return {
         clickableText: phrase,
         restText: restContent,
-        fullContext: phrase + restContent, //* Store the full context
+        fullContext: firstSentence, //* Use first sentence instead as context
       }
     }
   }
@@ -170,10 +175,16 @@ export function parseClickableText(fullText: string): ParsedText {
       }
     }
 
+    // * Extract the first sentence of the content (up to the first period)
+    const firstSentenceMatch = content.match(/^(.+?\.)\s/);
+    const firstSentence = firstSentenceMatch 
+      ? title + ': ' + firstSentenceMatch[1] 
+      : title + ': ' + content;
+    
     return {
       clickableText: title,
       restText: ': ' + content,
-      fullContext: fullText, //? Stores the full context
+      fullContext: firstSentence, // * Use title + first sentence instead of full context
     }
   }
 

From 33725b3b5f5104703f2ad80799b299e0cc4152c8 Mon Sep 17 00:00:00 2001
From: bran18 <andreyfdez18@gmail.com>
Date: Mon, 24 Feb 2025 14:49:06 -0600
Subject: [PATCH 3/3] chore: add coderabbit suggestion

---
 apps/masterbots.ai/lib/clickable-results.ts | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/apps/masterbots.ai/lib/clickable-results.ts b/apps/masterbots.ai/lib/clickable-results.ts
index 6b1d49da..1dfc0952 100644
--- a/apps/masterbots.ai/lib/clickable-results.ts
+++ b/apps/masterbots.ai/lib/clickable-results.ts
@@ -145,13 +145,13 @@ export function parseClickableText(fullText: string): ParsedText {
   for (const phrase of UNIQUE_PHRASES) {
     if (fullText.includes(phrase)) {
       //* Split content after the phrase
-      const [_, ...rest] = fullText.split(phrase)
-      const restContent = rest.join(phrase);
-      
+      const parts = fullText.split(phrase)
+      const restContent = parts.slice(1).join(phrase).trim()
+
       //* Extract first sentence (up to the first period after the phrase)
-      const firstSentenceMatch = (phrase + restContent).match(/^(.+?\.)\s/);
-      const firstSentence = firstSentenceMatch ? firstSentenceMatch[1] : (phrase + restContent);
-      
+      const firstSentenceMatch = (phrase + restContent).match(/^(.+?\.)(?:\s|$)/)
+      const firstSentence = firstSentenceMatch ? firstSentenceMatch[1] : phrase + restContent
+
       return {
         clickableText: phrase,
         restText: restContent,
@@ -176,7 +176,7 @@ export function parseClickableText(fullText: string): ParsedText {
     }
 
     // * Extract the first sentence of the content (up to the first period)
-    const firstSentenceMatch = content.match(/^(.+?\.)\s/);
+    const firstSentenceMatch = content.match(/^(.+?\.)(?:\s|$)/);
     const firstSentence = firstSentenceMatch 
       ? title + ': ' + firstSentenceMatch[1] 
       : title + ': ' + content;