feat(web): agent support deep thinking

2026-03-31 18:07:32 +08:00
parent b40f4829cb
commit ca255304d9
12 changed files with 203 additions and 33 deletions
--- a/web/src/views/Conversation/index.tsx
+++ b/web/src/views/Conversation/index.tsx
@@ -2,7 +2,7 @@
 * @Author: ZhaoYing 
 * @Date: 2026-02-03 16:58:03 
 * @Last Modified by: ZhaoYing
- * @Last Modified time: 2026-03-27 14:28:19
+ * @Last Modified time: 2026-03-31 16:24:47
 */
 /**
 * Conversation Page
@@ -27,12 +27,11 @@ import ChatEmpty from '@/assets/images/empty/chatEmpty.png'
 import Chat from '@/components/Chat'
 import type { ChatItem } from '@/components/Chat/types'
 import { type SSEMessage } from '@/utils/stream'
-import { shareFileUploadUrlWithoutApiPrefix } from '@/api/fileStorage'
+import { shareFileUploadUrlWithoutApiPrefix, getFileStatusById } from '@/api/fileStorage'
 import ChatToolbar, { type ChatToolbarRef } from '@/components/Chat/ChatToolbar'
 import type { Variable } from '@/views/Workflow/components/Properties/VariableList/types'
 import type { Variable as AppVariable } from '@/views/ApplicationConfig/components/VariableList/types'
 import type { FeaturesConfigForm } from '@/views/ApplicationConfig/types';
-import { getFileStatusById } from '@/api/fileStorage';
 import { replaceVariables } from '@/views/ApplicationConfig/Agent'

 const Conversation: FC = () => {
@@ -43,7 +42,6 @@ const Conversation: FC = () => {
  const searchParams = new URLSearchParams(location.search)
  const userId = searchParams.get('user_id')
  const [loading, setLoading] = useState(false)
-  const [streamLoading, setStreamLoading] = useState(false)
  const [message, setMessage] = useState<string>('')
  const [conversation_id, setConversationId] = useState<string | null>(null)
  const [historyList, setHistoryList] = useState<HistoryItem[]>([])
@@ -63,6 +61,9 @@ const Conversation: FC = () => {
  const [features, setFeatures] = useState<FeaturesConfigForm>({} as FeaturesConfigForm)
  const [config, setConfig] = useState<Record<string, any>>({})
  const [audioStatusMap, setAudioStatusMap] = useState<Record<string, string>>({})
+  const streamLoadingRef = useRef(false)
+  const [isDeepThinking, setIsDeepThinking] = useState<Record<string, any>>({})
+  const [thinking, setThinking] = useState(false)

  useEffect(() => {
    const shareToken = localStorage.getItem(`shareToken_${token}`)
@@ -86,11 +87,12 @@ const Conversation: FC = () => {
    if (shareToken && token) {
      getExperienceConfig(token)
        .then(res => {
-          const response = res as { variables: Variable[]; features: FeaturesConfigForm; app_type: string; memory: boolean; }
+          const response = res as { variables: Variable[]; features: FeaturesConfigForm; model_parameters?: Record<string, any>; app_type: string; memory: boolean; }
          toolbarRef.current?.setVariables(response.variables || [])
          setConfig(response)
          setFeatures(response.features)
          setIsHasMemory((response.app_type === 'workflow' && response.memory) || response.memory)
+          setIsDeepThinking(response.model_parameters?.deep_thinking || false)
        })
    } else {
      setChatList([])
@@ -190,7 +192,7 @@ const Conversation: FC = () => {

  const updateAssistantMessage = (content: string = '', audio_url?: string, audio_status?: string, citations?: any[]) => {
    if (!content && !audio_url && (!citations || citations?.length < 1)) return
-    if (streamLoading) setStreamLoading(false)
+    if (streamLoadingRef.current) streamLoadingRef.current = false
    setChatList(prev => {
      const lastList = [...prev]
      const lastIndex = lastList.length - 1
@@ -202,6 +204,7 @@ const Conversation: FC = () => {
            ...lastMsg,
            content: lastMsg.content + content,
            meta_data: {
+              ...(lastMsg.meta_data || {}),
              audio_url: audio_url || lastMsg.meta_data?.audio_url,
              audio_status: audio_status || lastMsg.meta_data?.audio_status,
              citations: citations || lastMsg.meta_data?.citations
@@ -212,6 +215,28 @@ const Conversation: FC = () => {
      return prev
    })
  }
+  const updateAssistantReasoningMessage = (content: string = '') => {
+    if (!content) return
+    if (streamLoadingRef.current) streamLoadingRef.current = false
+    setChatList(prev => {
+      const lastList = [...prev]
+      const lastIndex = lastList.length - 1
+      const lastMsg = lastList[lastIndex]
+      if (lastMsg?.role === 'assistant') {
+        return [
+          ...lastList.slice(0, lastIndex),
+          {
+            ...lastMsg,
+            meta_data: {
+              ...(lastMsg.meta_data || {}),
+              reasoning_content: (lastMsg.meta_data?.reasoning_content || '') + content
+            }
+          }
+        ]
+      }
+      return prev
+    })
+  }
  useEffect(() => {
    if (!Object.keys(audioStatusMap).length) return
    setChatList(prev => prev.map(msg => {
@@ -252,7 +277,7 @@ const Conversation: FC = () => {
    if (!isCanSend) return

    setLoading(true)
-    setStreamLoading(true)
+    streamLoadingRef.current = true
    addUserMessage(msg || message, files)
    addAssistantMessage()
    toolbarRef.current?.setFiles([])
@@ -276,6 +301,10 @@ const Conversation: FC = () => {
            const { conversation_id: newId } = item.data as { conversation_id: string }
            currentConversationId = newId
            break
+          case 'reasoning':
+            updateAssistantReasoningMessage(content)
+            if (curId) currentConversationId = curId;
+            break
          case 'message':
            updateAssistantMessage(content, audio_url, audio_url ? 'pending' : undefined)
            if (curId) currentConversationId = curId;
@@ -349,15 +378,16 @@ const Conversation: FC = () => {
          }
        }
      }),
-      variables: params
+      variables: params,
+      thinking,
    }, handleStreamMessage, shareToken)
      .catch(() => {
        setLoading(false)
-        setStreamLoading(false)
+        streamLoadingRef.current = false
      })
      .finally(() => {
        setLoading(false)
-        setStreamLoading(false)
+        streamLoadingRef.current = false
      })
  }

@@ -376,6 +406,9 @@ const Conversation: FC = () => {
      }
    })
  }
+  const handleChangeDeepThinking = () => {
+    setThinking(prev => !prev)
+  }

  const handleChangeVariables = (variables: Variable[]) => {
    setChatList(prev => {
@@ -388,7 +421,7 @@ const Conversation: FC = () => {
    })
  }

-  console.log('chatList', chatList)
+  console.log('chatList', chatList, streamLoadingRef.current)

  return (
    <Flex className="rb:w-full rb:p-[-16px]!">
@@ -450,11 +483,12 @@ const Conversation: FC = () => {
            empty={<Empty url={ChatEmpty} className="rb:h-full" size={[320,180]} title={t('memoryConversation.chatEmpty')} subTitle={t('memoryConversation.emptyDesc')} />}
            contentClassName={!fileList.length ? "rb:h-[calc(100%-144px)] rb:w-full" : "rb:h-[calc(100%-208px)] rb:w-full"}
            data={chatList}
-            streamLoading={streamLoading}
+            streamLoading={streamLoadingRef.current}
            loading={loading}
            onChange={setMessage}
            onSend={handleSend}
            labelFormat={(item) => dayjs(item.created_at).locale('en').format('MMMM D, YYYY [at] h:mm A')}
+            conversationId={conversation_id}
            fileList={fileList}
            fileChange={(list) => {
              setFileList(list || [])
@@ -473,8 +507,24 @@ const Conversation: FC = () => {
              }
            }}
            rightExtra={
-              (features?.web_search?.enabled || isHasMemory)
+              (features?.web_search?.enabled || isHasMemory || isDeepThinking)
              ? <Flex align="center" justify="end" gap={8}>
+                {isDeepThinking &&
+                  <Tooltip title={t('memoryConversation.deepThinking')}>
+                    <Flex justify="center" align="center"
+                      className={clsx("rb:size-7 rb:cursor-pointer rb:border rb:hover:bg-[#F6F6F6] rb:rounded-full rb:shadow-[0px_2px_12px_0px_rgba(23,23,25,0.12)]", {
+                        'rb:bg-[rgba(21,94,239,0.06)] rb:border-[rgba(21,94,239,0.25)]': thinking,
+                        'rb:border-[#EBEBEB]': !thinking,
+                      })}
+                      onClick={handleChangeDeepThinking}
+                    >
+                      <div className={clsx("rb:size-4 rb:bg-cover", {
+                        "rb:bg-[url('@/assets/images/conversation/deepThinking.svg')]": !thinking,
+                        "rb:bg-[url('@/assets/images/conversation/deepThinkingChecked.svg')]": thinking
+                      })} />
+                    </Flex>
+                  </Tooltip>
+                }
                {features?.web_search?.enabled &&
                  <Tooltip title={t('memoryConversation.web_search')}>
                    <Flex justify="center" align="center"
--- a/web/src/views/Conversation/types.ts
+++ b/web/src/views/Conversation/types.ts
@@ -2,7 +2,7 @@
 * @Author: ZhaoYing 
 * @Date: 2026-02-03 16:57:46 
 * @Last Modified by: ZhaoYing
- * @Last Modified time: 2026-03-03 13:46:55
+ * @Last Modified time: 2026-03-31 16:23:44
 */
 /**
 * Type definitions for Conversation
@@ -52,6 +52,7 @@ export interface QueryParams {
  conversation_id?: string | null;
  files?: any[];
  variables?: Record<string, any>;
+  thinking?: boolean;
 }

 export interface UploadFileListModalRef {