fix(web): show completed label for think block after streaming ends (#17149)

web/src/components/markdown-content/index.tsx

@@ -75,12 +75,15 @@ const MarkdownContent = ({
       text = t('chat.searching');
     }
     const nextText = replaceTextByOldReg(text);
+    const thinkSummary = loading
+      ? `${t('chat.thinking')}...`
+      : t('chat.thought');
     return pipe(
-      replaceThinkToSection,
+      (value: string) => replaceThinkToSection(value, thinkSummary),
       replaceRetrievingToSection,
       preprocessLaTeX,
     )(nextText);
-  }, [content, t]);
+  }, [content, loading, t]);
 
   useEffect(() => {
     const docAggs = reference?.doc_aggs;

web/src/components/next-markdown-content/index.tsx

@@ -181,12 +181,15 @@ function MarkdownContent({
       text = t('chat.searching');
     }
     const nextText = replaceTextByOldReg(text);
+    const thinkSummary = loading
+      ? `${t('chat.thinking')}...`
+      : t('chat.thought');
     return pipe(
-      replaceThinkToSection,
+      (value: string) => replaceThinkToSection(value, thinkSummary),
       replaceRetrievingToSection,
       preprocessLaTeX,
     )(nextText);
-  }, [content, t]);
+  }, [content, loading, t]);
 
   useEffect(() => {
     const docAggs = reference?.doc_aggs;

web/src/locales/en.ts

@@ -1120,6 +1120,7 @@ This auto-tagging feature enhances retrieval by adding another layer of domain-s
       maxTokensInvalidMessage: 'Please enter a valid number for Max tokens.',
       maxTokensMinMessage: 'Max tokens cannot be less than 0.',
       thinking: 'Thinking',
+      thought: 'Thought',
       thinkingDefault: 'System default',
       thinkingEnabled: 'Enabled',
       thinkingDisabled: 'Disabled',

web/src/utils/chat.ts

@@ -78,10 +78,16 @@ export const preprocessLaTeX = (content: string) => {
   return inlineProcessedContent;
 };
 
-export function replaceThinkToSection(text: string = '') {
+export function replaceThinkToSection(
+  text: string = '',
+  summary: string = 'Thinking...',
+) {
   const pattern = /<think>([\s\S]*?)<\/think>/g;
 
-  const result = text.replace(pattern, '<details class="think"><summary>Thinking...</summary>$1</details>');
+  const result = text.replace(
+    pattern,
+    `<details class="think"><summary>${summary}</summary>$1</details>`,
+  );
 
   return result;
 }
@@ -89,7 +95,10 @@ export function replaceThinkToSection(text: string = '') {
 export function replaceRetrievingToSection(text: string = '') {
   const pattern = /<retrieving>([\s\S]*?)<\/retrieving>/g;
 
-  const result = text.replace(pattern, '<details class="retrieving"><summary>Retrieving...</summary>$1</details>');
+  const result = text.replace(
+    pattern,
+    '<details class="retrieving"><summary>Retrieving...</summary>$1</details>',
+  );
 
   return result;
 }