feat: improve think content display (#13431)

web/app/components/base/markdown-blocks/think-block.tsx

@@ -0,0 +1,98 @@
+import React, { useEffect, useRef, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+
+const hasEndThink = (children: any): boolean => {
+  if (typeof children === 'string')
+    return children.includes('[ENDTHINKFLAG]')
+
+  if (Array.isArray(children))
+    return children.some(child => hasEndThink(child))
+
+  if (children?.props?.children)
+    return hasEndThink(children.props.children)
+
+  return false
+}
+
+const removeEndThink = (children: any): any => {
+  if (typeof children === 'string')
+    return children.replace('[ENDTHINKFLAG]', '')
+
+  if (Array.isArray(children))
+    return children.map(child => removeEndThink(child))
+
+  if (children?.props?.children) {
+    return React.cloneElement(
+      children,
+      {
+        ...children.props,
+        children: removeEndThink(children.props.children),
+      },
+    )
+  }
+
+  return children
+}
+
+const useThinkTimer = (children: any) => {
+  const [startTime] = useState(Date.now())
+  const [elapsedTime, setElapsedTime] = useState(0)
+  const [isComplete, setIsComplete] = useState(false)
+  const timerRef = useRef<NodeJS.Timeout>()
+
+  useEffect(() => {
+    timerRef.current = setInterval(() => {
+      if (!isComplete)
+        setElapsedTime(Math.floor((Date.now() - startTime) / 100) / 10)
+    }, 100)
+
+    return () => {
+      if (timerRef.current)
+        clearInterval(timerRef.current)
+    }
+  }, [startTime, isComplete])
+
+  useEffect(() => {
+    if (hasEndThink(children)) {
+      setIsComplete(true)
+      if (timerRef.current)
+        clearInterval(timerRef.current)
+    }
+  }, [children])
+
+  return { elapsedTime, isComplete }
+}
+
+export const ThinkBlock = ({ children, ...props }: any) => {
+  const { elapsedTime, isComplete } = useThinkTimer(children)
+  const displayContent = removeEndThink(children)
+  const { t } = useTranslation()
+
+  return (
+    <details {...(!isComplete && { open: true })} className="group">
+      <summary className="text-gray-500 font-bold list-none pl-2 flex items-center cursor-pointer select-none whitespace-nowrap">
+        <div className="flex-shrink-0 flex items-center">
+          <svg
+            className="w-3 h-3 mr-2 transform transition-transform duration-500 group-open:rotate-90"
+            fill="none"
+            stroke="currentColor"
+            viewBox="0 0 24 24"
+          >
+            <path
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeWidth={2}
+              d="M9 5l7 7-7 7"
+            />
+          </svg>
+          {isComplete ? `${t('common.chat.thought')}(${elapsedTime.toFixed(1)}s)` : `${t('common.chat.thinking')}(${elapsedTime.toFixed(1)}s)`}
+        </div>
+      </summary>
+      <div className="text-gray-500 p-3 ml-2 bg-gray-50 border-l border-gray-300">
+        {displayContent}
+      </div>
+    </details>
+  )
+}
+
+export default ThinkBlock

web/app/components/base/markdown.tsx

@@ -22,6 +22,7 @@ import AudioGallery from '@/app/components/base/audio-gallery'
 import SVGRenderer from '@/app/components/base/svg-gallery'
 import MarkdownButton from '@/app/components/base/markdown-blocks/button'
 import MarkdownForm from '@/app/components/base/markdown-blocks/form'
+import ThinkBlock from '@/app/components/base/markdown-blocks/think-block'
 
 // Available language https://github.com/react-syntax-highlighter/react-syntax-highlighter/blob/master/AVAILABLE_LANGUAGES_HLJS.MD
 const capitalizationLanguageNameMap: Record<string, string> = {
@@ -72,10 +73,8 @@ const preprocessThinkTag = (content: string) => {
     return content
 
   return flow([
-    (str: string) => str.replace('<think>\n', '<details open><summary class="text-gray-500 font-bold">Thinking</summary><div class="text-gray-500 p-3 ml-2 bg-gray-50 border-l border-gray-300">\n'),
-    (str: string) => str.includes('\n</think>')
-      ? str.replace('\n</think>', '\n</div></details>')
-      : `${str}\n</div></details>`,
+    (str: string) => str.replace('<think>\n', '<details>\n'),
+    (str: string) => str.replace('\n</think>', '\n[ENDTHINKFLAG]</details>'),
   ])(content)
 }
 
@@ -281,6 +280,7 @@ export function Markdown(props: { content: string; className?: string }) {
           button: MarkdownButton,
           form: MarkdownForm,
           script: ScriptBlock,
+          details: ThinkBlock,
         }}
         linkTarget='_blank'
       >

web/i18n/en-US/common.ts

@@ -531,6 +531,8 @@ const translation = {
       hitScore: 'Retrieval Score:',
     },
     inputPlaceholder: 'Talk to Bot',
+    thinking: 'Thinking...',
+    thought: 'Thought',
   },
   promptEditor: {
     placeholder: 'Write your prompt word here, enter \'{\' to insert a variable, enter \'/\' to insert a prompt content block',

web/i18n/zh-Hans/common.ts

@@ -531,6 +531,8 @@ const translation = {
       hitScore: '召回得分：',
     },
     inputPlaceholder: '和机器人聊天',
+    thinking: '深度思考中...',
+    thought: '已深度思考',
   },
   promptEditor: {
     placeholder: '在这里写你的提示词，输入\'{\' 插入变量、输入\'/\' 插入提示内容块',