feat(message-box): close think box after thinking process ends

src/components/MessageBox.tsx

@@ -21,8 +21,16 @@ import SearchVideos from './SearchVideos';
 import { useSpeech } from 'react-text-to-speech';
 import ThinkBox from './ThinkBox';
 
-const ThinkTagProcessor = ({ children }: { children: React.ReactNode }) => {
-  return <ThinkBox content={children as string} />;
+const ThinkTagProcessor = ({
+  children,
+  thinkingEnded,
+}: {
+  children: React.ReactNode;
+  thinkingEnded: boolean;
+}) => {
+  return (
+    <ThinkBox content={children as string} thinkingEnded={thinkingEnded} />
+  );
 };
 
 const MessageBox = ({
@@ -46,6 +54,7 @@ const MessageBox = ({
 }) => {
   const [parsedMessage, setParsedMessage] = useState(message.content);
   const [speechMessage, setSpeechMessage] = useState(message.content);
+  const [thinkingEnded, setThinkingEnded] = useState(false);
 
   useEffect(() => {
     const citationRegex = /\[([^\]]+)\]/g;
@@ -61,6 +70,10 @@ const MessageBox = ({
       }
     }
 
+    if (message.role === 'assistant' && message.content.includes('</think>')) {
+      setThinkingEnded(true);
+    }
+
     if (
       message.role === 'assistant' &&
       message?.sources &&
@@ -88,7 +101,7 @@ const MessageBox = ({
                 if (url) {
                   return `<a href="${url}" target="_blank" className="bg-light-secondary dark:bg-dark-secondary px-1 rounded ml-1 no-underline text-xs text-black/70 dark:text-white/70 relative">${numStr}</a>`;
                 } else {
-                  return `[${numStr}]`;
+                  return ``;
                 }
               })
               .join('');
@@ -99,6 +112,14 @@ const MessageBox = ({
       );
       setSpeechMessage(message.content.replace(regex, ''));
       return;
+    } else if (
+      message.role === 'assistant' &&
+      message?.sources &&
+      message.sources.length === 0
+    ) {
+      setParsedMessage(processedMessage.replace(regex, ''));
+      setSpeechMessage(message.content.replace(regex, ''));
+      return;
     }
 
     setSpeechMessage(message.content.replace(regex, ''));
@@ -111,6 +132,9 @@ const MessageBox = ({
     overrides: {
       think: {
         component: ThinkTagProcessor,
+        props: {
+          thinkingEnded: thinkingEnded,
+        },
       },
     },
   };