Merge pull request #759 from SuanmoSuanyangTechnology/feature/ui_upgrade_zy

Feature/UI upgrade zy
2026-04-01 11:29:43 +08:00
parent b482822629 c9ca5df05c
commit b95a627424
21 changed files with 357 additions and 82 deletions
--- a/web/src/assets/images/conversation/ai.png
+++ b/web/src/assets/images/conversation/ai.png
--- a/web/src/assets/images/conversation/user.png
+++ b/web/src/assets/images/conversation/user.png
--- a/web/src/components/Chat/ChatContent.tsx
+++ b/web/src/components/Chat/ChatContent.tsx
@@ -2,7 +2,7 @@
 * @Author: ZhaoYing 
 * @Date: 2025-12-10 16:46:17 
 * @Last Modified by: ZhaoYing
- * @Last Modified time: 2026-03-27 14:17:38
+ * @Last Modified time: 2026-03-31 15:01:53
 */
 import { type FC, useRef, useEffect, useState } from 'react'
 import clsx from 'clsx'
@@ -37,6 +37,22 @@ const ChatContent: FC<ChatContentProps> = ({
  const prevDataLengthRef = useRef(data.length);
  const isScrolledToBottomRef = useRef(true);
  const audioRef = useRef<HTMLAudioElement | null>(null)
+  const [expandedReasoning, setExpandedReasoning] = useState<Set<number>>(new Set())
+  const [manualToggledReasoning, setManualToggledReasoning] = useState<Set<number>>(new Set())
+
+  const toggleReasoning = (index: number) => {
+    setManualToggledReasoning(prev => new Set(prev).add(index))
+    setExpandedReasoning(prev => {
+      const next = new Set(prev)
+      next.has(index) ? next.delete(index) : next.add(index)
+      return next
+    })
+  }
+
+  const isReasoningExpanded = (index: number) => {
+    if (manualToggledReasoning.has(index)) return expandedReasoning.has(index)
+    return !data[index]?.content
+  }
  const [playingIndex, setPlayingIndex] = useState<string | null>(null)

  const handlePlay = (audio_url: string, audio_status?: string) => {
@@ -124,7 +140,7 @@ const ChatContent: FC<ChatContentProps> = ({
                    {labelFormat(item)}
                  </div>
                }
-                {item.meta_data?.files && item.meta_data?.files.length > 0 && <Flex gap={8} vertical align="end">
+                {item.meta_data?.files && item.meta_data?.files.length > 0 && <Flex gap={8} vertical align="end" className="rb:mb-2!">
                  {item.meta_data?.files?.map((file) => {
                    if (file.type.includes('image')) {
                      return (
@@ -178,6 +194,22 @@ const ChatContent: FC<ChatContentProps> = ({
                  'rb:mt-1.5': labelPosition === 'top',
                  'rb:mb-1.5': labelPosition === 'bottom',
                })}>
+                  {item.meta_data?.reasoning_content && <div className="rb:mb-2 rb:border rb:rounded-md rb:px-3 rb:pt-2 rb:bg-white rb:text-[12px]">
+                    <Flex
+                      align="center"
+                      justify="space-between"
+                      className="rb:text-[#5B6167] rb:font-medium rb:cursor-pointer rb:pb-2!"
+                      onClick={() => toggleReasoning(index)}
+                    >
+                      <span>{t('memoryConversation.reasoning_content')}</span>
+                      <div
+                        className={clsx("rb:size-4 rb:bg-cover rb:bg-[url('@/assets/images/common/arrow_up.svg')]", {
+                          'rb:rotate-180': !isReasoningExpanded(index),
+                        })}
+                      ></div>
+                    </Flex>
+                    {isReasoningExpanded(index) && <Markdown content={item.meta_data.reasoning_content} />}
+                  </div>}
                  {item.status && <div className="rb:size-5 rb:bg-cover rb:bg-[url('@/assets/images/conversation/exclamation_circle.svg')] rb:absolute rb:-left-7"></div>}
                  {item.subContent && renderRuntime && renderRuntime(item, index)}
                  {/* Render message content using Markdown component */}
--- a/web/src/components/Chat/index.tsx
+++ b/web/src/components/Chat/index.tsx
@@ -27,12 +27,14 @@ const Chat: FC<ChatProps> = ({
  fileList,
  fileChange,
  className,
-  renderRuntime
+  renderRuntime,
+  conversationId
 }) => {
  return (
    <div className={`rb:h-full rb:relative rb:pt-2 ${className}`}>
      {/* Chat content display area */}
      <ChatContent
+        key={conversationId ?? 'new'}
        classNames={contentClassName}
        data={data}
        streamLoading={streamLoading}
--- a/web/src/components/Chat/types.ts
+++ b/web/src/components/Chat/types.ts
@@ -2,7 +2,7 @@
 * @Author: ZhaoYing 
 * @Date: 2025-12-10 16:45:54 
 * @Last Modified by: ZhaoYing
- * @Last Modified time: 2026-03-26 12:30:51
+ * @Last Modified time: 2026-03-31 15:01:46
 */
 import { type ReactNode } from 'react'

@@ -33,7 +33,8 @@ export interface ChatItem {
      file_name: string;
      knowledge_id: string;
      score: string;
-    }[]
+    }[];
+    reasoning_content?: string;
  },
 }

@@ -66,6 +67,7 @@ export interface ChatProps {
  fileChange?: (fileList: any[]) => void;
  className?: string;
  renderRuntime?: (item: ChatItem, index: number) => ReactNode;
+  conversationId?: string | null;
 }

 /**
--- a/web/src/components/PageScrollList/index.tsx
+++ b/web/src/components/PageScrollList/index.tsx
@@ -2,7 +2,7 @@
 * @Author: ZhaoYing 
 * @Date: 2026-02-02 15:18:19 
 * @Last Modified by: ZhaoYing
- * @Last Modified time: 2026-03-27 15:52:37
+ * @Last Modified time: 2026-03-31 15:31:18
 */
 /**
 * PageScrollList Component
@@ -48,7 +48,7 @@ interface PageScrollListProps<T, Q = Record<string, unknown>> {
  /** API endpoint URL */
  url: string;
  /** Function to render each list item */
-  renderItem: (item: T) => React.ReactNode;
+  renderItem: (item: T, index: number) => React.ReactNode;
  /** Query parameters for API request */
  query?: Q;
  /** Number of columns in grid layout */
@@ -57,6 +57,8 @@ interface PageScrollListProps<T, Q = Record<string, unknown>> {
  className?: string;
  needLoading?: boolean;
  heightClass?: string;
+  gutter?: [number, number] | number;
+  onTotalChange?: (total: number) => void;
 }

 const defaultHeightClass = 'rb:h-[calc(100vh-116px)]!';
@@ -70,6 +72,8 @@ const PageScrollList = forwardRef(<T, Q = Record<string, unknown>>({
  className = '',
  needLoading = true,
  heightClass,
+  gutter = [12, 12],
+  onTotalChange,
 }: PageScrollListProps<T, Q>, ref: React.Ref<PageScrollListRef>) => {
  /** Expose refresh method to parent component */
  useImperativeHandle(ref, () => ({
@@ -88,6 +92,7 @@ const PageScrollList = forwardRef(<T, Q = Record<string, unknown>>({
  const pageRef = useRef(1);
  const loadingRef = useRef(false);
  const hasMoreRef = useRef(true);
+  const [total, setTotal] = useState(0);

  /** Load more data from API with pagination */
  const loadMoreData = (reset?: boolean) => {
@@ -107,6 +112,9 @@ const PageScrollList = forwardRef(<T, Q = Record<string, unknown>>({
        setData(prev => reset ? results : [...prev, ...results]);
        hasMoreRef.current = response.page?.hasnext;
        setHasMore(response.page?.hasnext);
+        const newTotal = response.page?.total || 0;
+        setTotal(newTotal);
+        onTotalChange?.(newTotal);
      })
      .catch(() => {
        hasMoreRef.current = false;
@@ -156,11 +164,11 @@ const PageScrollList = forwardRef(<T, Q = Record<string, unknown>>({
          {/* Render grid list or empty state */}
          {data.length > 0 ? (
            <Row
-              gutter={[12, 12]}
+              gutter={gutter}
            >
              {data.map((item, index) => (
                <Col key={(item as any).id || index} span={24/column}>
-                  {renderItem(item)}
+                  {renderItem(item, index)}
                </Col>
              ))}
            </Row>
--- a/web/src/components/RbModal/index.css
+++ b/web/src/components/RbModal/index.css
@@ -1,3 +1,6 @@
+.rb-modal {
+  top: 40px;
+}
 .rb-modal .ant-modal-footer .ant-btn {
  height: 32px !important;
  padding: 0 15px !important;
--- a/web/src/i18n/en.ts
+++ b/web/src/i18n/en.ts
@@ -627,6 +627,8 @@ export const en = {
      vision: 'Vision',
      audio: 'Audio',
      video: 'Video',
+      thinking: 'Deep Thinking',
+      is_thinking: 'Deep Thinking Support',
    },
    knowledgeBase: {
      home: 'Home',
@@ -1421,6 +1423,7 @@ export const en = {
      citation: 'Citation and Attribution',
      citation_desc: 'Display the attribution of source documents and generated content',
      invalidVariablesTitle: "The following undefined variables are referenced in the conversation opening. Do you want to save the opening configuration?",
+      deep_thinking: 'Enable Deep Thinking',

      apps: 'My Apps',
      sharing: 'Sharing',
@@ -1594,6 +1597,8 @@ export const en = {
      core_entities: 'Core Entities',
      communityDetailEmptyDesc: 'Click on a community in the chart on the left to view details',
      communityLoadingTip: 'Generating community graph',
+      assistant: 'AI Assistant',
+      totalRagMemory: 'Total number of memories',
    },
    space: {
      createSpace: 'Create Space',
@@ -1782,6 +1787,11 @@ Memory Bear: After the rebellion, regional warlordism intensified for several re
      vision_id: 'Vision model',
      audio_id: 'Audio model',
      video_id: 'Video model',
+      onlyDelete: 'Only Delete Fill',
+      semanticFiltering: 'Semantic Filtering',
+      sceneFocus: 'Scene Focus',
+      loose: 'Loose',
+      strict: 'Strict',
    },
    memoryConversation: {
      searchPlaceholder: 'Enter user ID...',
@@ -1829,6 +1839,7 @@ Memory Bear: After the rebellion, regional warlordism intensified for several re
      stopAudioRecorder: 'Stop Recording',
      startAudioRecorder: 'Start Recording',
      citations: 'Citations',
+      reasoning_content: 'Deep reasoning Content',
    },
    login: {
      title: 'Red Bear Memory Science',
--- a/web/src/i18n/zh.ts
+++ b/web/src/i18n/zh.ts
@@ -795,6 +795,7 @@ export const zh = {
      citation: '引用和归属',
      citation_desc: '显示源文档和生成内容的归属部分',
      invalidVariablesTitle: "对话开场白中引用了以下未定义的变量，是否保存开场白配置？",
+      deep_thinking: '开启深度思考',

      apps: '我的应用',
      sharing: '共享',
@@ -1274,6 +1275,8 @@ export const zh = {
      vision: '视觉',
      audio: '音频',
      video: '视频',
+      thinking: '深度思考',
+      is_thinking: '支持深度思考',
    },
    timezones: {
      'Asia/Shanghai': '中国标准时间 (UTC+8)',
@@ -1592,6 +1595,8 @@ export const zh = {
      core_entities: '核心实体',
      communityDetailEmptyDesc: '点击左侧图表中的社区查看详情',
      communityLoadingTip: '社区图谱生成中',
+      assistant: 'AI 助手',
+      totalRagMemory: '记忆总数',
    },
    space: {
      createSpace: '创建空间',
@@ -1778,6 +1783,11 @@ export const zh = {
      vision_id: '视觉模型',
      audio_id: '音频模型',
      video_id: '视频模型',
+      onlyDelete: '仅删填充',
+      semanticFiltering: '语义过滤',
+      sceneFocus: '场景聚焦',
+      loose: '宽松',
+      strict: '严格',
    },
    memoryConversation: {
      chatEmpty:'有什么我可以帮您的吗？',
@@ -1825,6 +1835,7 @@ export const zh = {
      stopAudioRecorder: '停止录音',
      startAudioRecorder: '开始录音',
      citations: '引用',
+      reasoning_content: '深度思考内容',
    },
    login: {
      title: '红熊记忆科学',
--- a/web/src/views/ApplicationConfig/Agent.tsx
+++ b/web/src/views/ApplicationConfig/Agent.tsx
@@ -2,7 +2,7 @@
 * @Author: ZhaoYing 
 * @Date: 2026-02-03 16:29:21 
 * @Last Modified by: ZhaoYing
- * @Last Modified time: 2026-03-27 18:13:51
+ * @Last Modified time: 2026-03-31 16:50:10
 */
 import { useEffect, useRef, useState, forwardRef, useImperativeHandle, useMemo } from 'react';
 import { useTranslation } from 'react-i18next'
@@ -194,7 +194,7 @@ const Agent = forwardRef<AgentRef, { onFeaturesLoad?: (features: FeaturesConfigF
   * Open model configuration modal
   */
  const handleModelConfig = () => {
-    modelConfigModalRef.current?.handleOpen('model')
+    modelConfigModalRef.current?.handleOpen('model', { ...defaultModel, model_parameters : values?.model_parameters })
  }
  /**
   * Clear all debugging chat sessions
@@ -287,7 +287,7 @@ const Agent = forwardRef<AgentRef, { onFeaturesLoad?: (features: FeaturesConfigF
      setChatList([{
        label: filterValue?.name || '',
        model_config_id: filterValue?.id || '',
-        model_parameters: {...(filterValue?.config || {})} as unknown as ModelConfig,
+        model_parameters: {...(values?.model_parameters || {})} as unknown as ModelConfig,
        list: []
      }])
      form.setFieldValue('capability', filterValue?.capability)
@@ -361,7 +361,6 @@ const Agent = forwardRef<AgentRef, { onFeaturesLoad?: (features: FeaturesConfigF

  useEffect(() => {
    const opening_statement = form.getFieldValue(['features', 'opening_statement'])
-    console.log('opening_statement', opening_statement, defaultModel, chatList)

    if (opening_statement?.enabled && opening_statement?.statement && opening_statement?.statement.trim() !== '') {
      const assistantMsg: ChatItem = {
--- a/web/src/views/ApplicationConfig/TestChat/index.tsx
+++ b/web/src/views/ApplicationConfig/TestChat/index.tsx
@@ -2,7 +2,7 @@
 * @Author: ZhaoYing 
 * @Date: 2026-03-13 17:27:52 
 * @Last Modified by: ZhaoYing
- * @Last Modified time: 2026-03-26 15:35:13
+ * @Last Modified time: 2026-03-31 16:04:15
 */
 import { type FC, useState, useRef, useEffect } from 'react'
 import { useTranslation } from 'react-i18next'
@@ -171,6 +171,7 @@ const TestChat: FC<TestChatProps> = ({
          ...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
@@ -180,6 +181,24 @@ const TestChat: FC<TestChatProps> = ({
      return newList
    })
  }
+  const updateAssistantReasoningMessage = (content: string) => {
+    if (!content) return
+    if (streamLoading) setStreamLoading(false)
+    setChatList(prev => {
+      const newList = [...prev]
+      const lastMsg = newList[newList.length - 1]
+      if (lastMsg?.role === 'assistant') {
+        newList[newList.length - 1] = {
+          ...lastMsg,
+          meta_data: {
+            ...(lastMsg.meta_data || {}),
+            reasoning_content: (lastMsg.meta_data?.reasoning_content || '') + content
+          }
+        }
+      }
+      return newList
+    })
+  }

  const updateErrorAssistantMessage = (message_length: number) => {
    if (message_length > 0) return
@@ -273,6 +292,10 @@ const TestChat: FC<TestChatProps> = ({
        case 'start':
          if (conversation_id && conversationId !== conversation_id) setConversationId(conversation_id)
          break
+        case 'reasoning':
+          updateAssistantReasoningMessage(content)
+          if (conversation_id && conversationId !== conversation_id) setConversationId(conversation_id)
+          break
        case 'message':
          updateAssistantMessage(content)
          if (conversation_id && conversationId !== conversation_id) setConversationId(conversation_id)
--- a/web/src/views/ApplicationConfig/components/Chat.tsx
+++ b/web/src/views/ApplicationConfig/components/Chat.tsx
@@ -2,7 +2,7 @@
 * @Author: ZhaoYing 
 * @Date: 2026-02-03 16:27:39 
 * @Last Modified by: ZhaoYing
- * @Last Modified time: 2026-03-27 17:59:07
+ * @Last Modified time: 2026-03-31 15:02:07
 */
 /**
 * Chat debugging component for application testing
@@ -141,6 +141,36 @@ const Chat: FC<ChatProps> = ({
    }
  }
  /** Update assistant message with streaming content */
+  const updateAssistantReasoningMessage = (content?: string, model_config_id?: string, conversation_id?: string) => {
+    if (!content || !model_config_id) return
+    updateChatList(prev => {
+      const targetIndex = prev.findIndex(item => item.model_config_id === model_config_id);
+      if (targetIndex !== -1) {
+        const modelChatList = [...prev]
+        const curModelChat = modelChatList[targetIndex]
+        const curChatMsgList = curModelChat.list || []
+        const lastMsg = curChatMsgList[curChatMsgList.length - 1]
+        if (lastMsg && lastMsg.role === 'assistant') {
+          modelChatList[targetIndex] = {
+            ...modelChatList[targetIndex],
+            conversation_id,
+            list: [
+              ...curChatMsgList.slice(0, curChatMsgList.length - 1),
+              {
+                ...lastMsg,
+                meta_data: {
+                  reasoning_content: (lastMsg.meta_data?.reasoning_content || '') + (content || ''),
+                }
+              }
+            ]
+          }
+        }
+        return [...modelChatList]
+      }
+      return prev;
+    })
+  }
+  /** Update assistant message with streaming content */
  const updateAssistantMessage = (content?: string, model_config_id?: string, conversation_id?: string, audio_url?: string, citations?: any[]) => {
    if ((!content && !audio_url && (!citations || citations?.length < 1)) || !model_config_id) return
    updateChatList(prev => {
@@ -160,6 +190,7 @@ const Chat: FC<ChatProps> = ({
                ...lastMsg,
                content: lastMsg.content + (content || ''),
                meta_data: {
+                  ...(lastMsg.meta_data || {}),
                  ...(audio_url !== undefined ? { audio_url, audio_status: 'pending' } : {}),
                  citations: citations || lastMsg.meta_data?.citations
                }
@@ -274,6 +305,9 @@ const Chat: FC<ChatProps> = ({
            };
            
            switch (item.event) {
+              case 'model_reasoning':
+                updateAssistantReasoningMessage(content, model_config_id, conversation_id)
+                break;
              case 'model_message':
                updateAssistantMessage(content, model_config_id, conversation_id, audio_url)
                break;
--- a/web/src/views/ApplicationConfig/components/ModelConfigModal.tsx
+++ b/web/src/views/ApplicationConfig/components/ModelConfigModal.tsx
@@ -2,7 +2,7 @@
 * @Author: ZhaoYing 
 * @Date: 2026-02-03 16:28:07 
 * @Last Modified by: ZhaoYing
- * @Last Modified time: 2026-03-25 11:28:02
+ * @Last Modified time: 2026-03-31 16:56:57
 */
 /**
 * Model Configuration Modal
@@ -11,7 +11,7 @@
 */

 import { forwardRef, useImperativeHandle, useState, useEffect } from 'react';
-import { Form, type SelectProps } from 'antd';
+import { Form, type SelectProps, Checkbox } from 'antd';
 import { useTranslation } from 'react-i18next';

 import type { ModelConfig, ModelConfigModalRef, Config, Source } from '../types'
@@ -70,7 +70,8 @@ const ModelConfigModal = forwardRef<ModelConfigModalRef, ModelConfigModalProps>(
    if (source === 'model') {
      form.setFieldsValue({
        ...(data?.model_parameters || {}),
-        default_model_config_id: data.default_model_config_id || ''
+        default_model_config_id: data.default_model_config_id || '',
+        capability: model?.capability || []
      })
    } else if (source === 'chat' || source === 'multi_agent') {
      if (model) {
@@ -103,9 +104,12 @@ const ModelConfigModal = forwardRef<ModelConfigModalRef, ModelConfigModalProps>(
  const handleChange: SelectProps['onChange'] = (_value, option) => {
    if (source === 'chat') {
      form.setFieldValue('label', (option as Model).name)
-    } else {
-      form.setFieldValue('capability', (option as Model).capability)
    }
+
+    form.setFieldsValue({
+      capability: (option as Model).capability,
+      deep_thinking: false,
+    })
  }

  /** Expose methods to parent component */
@@ -115,8 +119,12 @@ const ModelConfigModal = forwardRef<ModelConfigModalRef, ModelConfigModalProps>(
  }));

  useEffect(() => {
-    form.setFieldsValue({...(data?.model_parameters || {})})
+    const { deep_thinking: _, ...rest } = data?.model_parameters || {}
+    form.setFieldsValue(rest)
  }, [values?.default_model_config_id])
+
+
+  console.log('handleChange values', values)
  return (
    <RbModal
      title={t('application.modelConfig')}
@@ -145,9 +153,17 @@ const ModelConfigModal = forwardRef<ModelConfigModalRef, ModelConfigModalProps>(
            />
          }
        </FormItem>
-        {source === 'model' && <FormItem name="capability" hidden />}
+        {['model', 'chat'].includes(source) && <>
+          <FormItem name="capability" hidden />
+          {(values?.deep_thinking || values?.capability?.includes('thinking')) && (
+            <FormItem name="deep_thinking" valuePropName="checked">
+              <Checkbox>{t('application.deep_thinking')}</Checkbox>
+            </FormItem>
+          )}
+        </>}
        {source === 'chat' && <FormItem name="label" hidden />}

+
        <div className="rb:text-[14px] rb:font-medium rb:text-[#5B6167] rb:mb-4">{t('application.parameterConfig')}</div>

        {configFields.map(item => (
--- a/web/src/views/ApplicationConfig/types.ts
+++ b/web/src/views/ApplicationConfig/types.ts
@@ -2,7 +2,7 @@
 * @Author: ZhaoYing 
 * @Date: 2026-02-03 16:29:49 
 * @Last Modified by: ZhaoYing
- * @Last Modified time: 2026-03-24 15:44:33
+ * @Last Modified time: 2026-03-31 15:45:17
 */
 import type { KnowledgeConfig } from './components/Knowledge/types'
 import type { Variable } from './components/VariableList/types'
@@ -36,6 +36,7 @@ export interface ModelConfig {
  n: number;
  /** Stop sequences */
  stop?: string;
+  deep_thinking?: boolean;
 }

 /**
--- 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(() => {
    return () => {
@@ -93,11 +94,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([])
@@ -213,7 +215,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
@@ -225,6 +227,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
@@ -235,6 +238,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 => {
@@ -297,7 +322,7 @@ const Conversation: FC = () => {
    if (!isCanSend) return

    setLoading(true)
-    setStreamLoading(true)
+    streamLoadingRef.current = true
    addUserMessage(msg || message, files)
    addAssistantMessage()
    toolbarRef.current?.setFiles([])
@@ -321,6 +346,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;
@@ -371,15 +400,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
      })
  }

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

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

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

  return (
    <Flex className="rb:w-full rb:p-[-16px]!">
@@ -472,11 +505,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 || [])
@@ -495,8 +529,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 {
--- a/web/src/views/MemoryExtractionEngine/index.tsx
+++ b/web/src/views/MemoryExtractionEngine/index.tsx
@@ -13,7 +13,7 @@
 import { type FC, useState, useEffect } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useParams } from 'react-router-dom'
-import { Row, Col, Space, Select, InputNumber, App, Form, Input, Flex, Tooltip } from 'antd'
+import { Row, Col, Space, Select, InputNumber, App, Form, Input, Flex, Tooltip, Divider } from 'antd'
 import clsx from 'clsx'

 import Card from './components/Card'
@@ -212,7 +212,43 @@ const MemoryExtractionEngine: FC = () => {
                                  {config.meaning
                                    ? <Space size={4} className="rb:text-[#212332] rb:font-medium rb:leading-5">
                                      {t(`memoryExtractionEngine.${config.label}`)}
-                                      <Tooltip title={<>{t('memoryExtractionEngine.Meaning')}: {t(`memoryExtractionEngine.${config.meaning}`)}</>}>
+                                      <Tooltip
+                                        classNames={{
+                                          body: 'rb:min-w-[500px]!'
+                                        }}
+                                        title={<>
+                                          {t('memoryExtractionEngine.Meaning')}: {t(`memoryExtractionEngine.${config.meaning}`)}
+
+                                          {config.label === 'intelligentSemanticPruningThreshold' && <>
+                                            <Flex justify="space-between" align="center" className="rb:text-[12px] rb:mb-1! rb:flex-nowrap!">
+                                              <span className="rb:whitespace-nowrap">{t('memoryExtractionEngine.loose')} ←</span>
+                                              <Divider className="rb:flex-1! rb:min-w-0!" />
+                                              <span className="rb:whitespace-nowrap">→ {t('memoryExtractionEngine.strict')}</span>
+                                            </Flex>
+
+                                            <Row>
+                                              <Col span={6} className="rb:text-center">
+                                                0.0 <br/>
+                                                | <br/>
+                                                {t('memoryExtractionEngine.onlyDelete')}
+                                              </Col>
+                                              <Col span={6} className="rb:text-center">
+                                                0.3 <br />
+                                                | <br />
+                                                {t('memoryExtractionEngine.semanticFiltering')}
+                                              </Col>
+                                              <Col span={6} className="rb:text-center">
+                                                0.6 <br />
+                                                | <br />
+                                                {t('memoryExtractionEngine.sceneFocus')}
+                                              </Col>
+                                              <Col span={6} className="rb:text-center">
+                                                0.9 <br />
+                                              </Col>
+                                            </Row>
+                                          </>}
+                                        </>}
+                                      >
                                        <div className="rb:size-4 rb:bg-cover rb:bg-[url('@/assets/images/common/question.svg')]"></div>
                                      </Tooltip>
                                    </Space>
@@ -231,14 +267,16 @@ const MemoryExtractionEngine: FC = () => {
                                        options={config.options ? config.options.map(item => ({ ...item, label: t(`memoryExtractionEngine.${item.label}`) })) : []}
                                      />
                                      : config.control === 'slider'
-                                      ? <RbSlider
-                                        min={config.min || 0}
-                                        max={config.max || 1}
-                                        step={config.step || 0.01}
-                                        isInput={true}
-                                        prefix={<span className="rb:text-[#5B6167]">{t('emotionEngine.currentValue')}:</span>}
-                                        inputClassName="rb:w-[155px]!"
-                                      />
+                                      ? <>
+                                        <RbSlider
+                                          min={config.min || 0}
+                                          max={config.max || 1}
+                                          step={config.step || 0.01}
+                                          isInput={true}
+                                          prefix={<span className="rb:text-[#5B6167]">{t('emotionEngine.currentValue')}:</span>}
+                                          inputClassName="rb:w-[155px]!"
+                                        />
+                                      </>
                                      : config.control === 'inputNumber'
                                      ? <InputNumber min={config.min || 0} style={{ width: '100%' }} placeholder={t('common.pleaseEnter')} />
                                      : config.control === 'text'
--- a/web/src/views/ModelManagement/components/CustomModelModal.tsx
+++ b/web/src/views/ModelManagement/components/CustomModelModal.tsx
@@ -2,7 +2,7 @@
 * @Author: ZhaoYing 
 * @Date: 2026-02-03 16:49:28 
 * @Last Modified by: ZhaoYing
- * @Last Modified time: 2026-03-25 14:07:10
+ * @Last Modified time: 2026-03-31 13:56:18
 */
 /**
 * Custom Model Modal
@@ -11,7 +11,7 @@
 */

 import { forwardRef, useEffect, useImperativeHandle, useState } from 'react';
-import { Form, Input, App, Checkbox, Button } from 'antd';
+import { Form, Input, App, Checkbox, Button, Row, Col } from 'antd';
 import { useTranslation } from 'react-i18next';

 import type { CustomModelForm, ModelListItem, CustomModelModalRef, CustomModelModalProps } from '../types';
@@ -72,6 +72,7 @@ const CustomModelModal = forwardRef<CustomModelModalRef, CustomModelModalProps>(
        is_vision: capability?.includes('vision') || false,
        is_video: capability?.includes('video') || false,
        is_audio: capability?.includes('audio') || false,
+        is_thinking: capability?.includes('thinking') || false,
      });
    } else {
      setIsEdit(false);
@@ -101,7 +102,7 @@ const CustomModelModal = forwardRef<CustomModelModalRef, CustomModelModalProps>(
    form
      .validateFields()
      .then((values) => {
-        const { logo, type, is_vision, is_video, is_audio, is_omni, ...rest } = values;
+        const { logo, type, is_vision, is_video, is_audio, is_omni, is_thinking, ...rest } = values;
        const formData: CustomModelForm = {
          ...rest,
          type,
@@ -120,6 +121,9 @@ const CustomModelModal = forwardRef<CustomModelModalRef, CustomModelModalProps>(
              capability.push('video')
            }
          }
+          if (is_thinking) {
+            capability.push('thinking')
+          }

          formData.capability = capability
          formData.is_omni = is_omni
@@ -238,21 +242,34 @@ const CustomModelModal = forwardRef<CustomModelModalRef, CustomModelModalProps>(
          <Input placeholder="https://api.example.com/v1" />
        </Form.Item>

-        {!['embedding', 'rerank'].includes(modelType as string) &&
-          <>
-            <Form.Item name="is_omni" valuePropName="checked" className="rb:mb-2!">
-              <Checkbox>{t('modelNew.is_omni')}</Checkbox>
-            </Form.Item>
-            <Form.Item name="is_vision" valuePropName="checked" className="rb:mb-2!">
-              <Checkbox disabled={isOmni}>{t('modelNew.is_vision')}</Checkbox>
-            </Form.Item>
-            <Form.Item name="is_video" valuePropName="checked" className="rb:mb-2!">
-              <Checkbox disabled={isOmni}>{t('modelNew.is_video')}</Checkbox>
-            </Form.Item>
-            <Form.Item name="is_audio" valuePropName="checked" className="rb:mb-0!">
-              <Checkbox disabled={isOmni}>{t('modelNew.is_audio')}</Checkbox>
-            </Form.Item>
-          </>
+        {['llm', 'chat'].includes(modelType as string) &&
+          <Row gutter={16}>
+            <Col span={24}>
+              <Form.Item name="is_omni" valuePropName="checked" className="rb:mb-2!">
+                <Checkbox>{t('modelNew.is_omni')}</Checkbox>
+              </Form.Item>
+            </Col>
+            <Col span={8}>
+              <Form.Item name="is_vision" valuePropName="checked" className="rb:mb-2!">
+                <Checkbox disabled={isOmni}>{t('modelNew.is_vision')}</Checkbox>
+              </Form.Item>
+            </Col>
+            <Col span={8}>
+              <Form.Item name="is_video" valuePropName="checked" className="rb:mb-2!">
+                <Checkbox disabled={isOmni}>{t('modelNew.is_video')}</Checkbox>
+              </Form.Item>
+            </Col>
+            <Col span={8}>
+              <Form.Item name="is_audio" valuePropName="checked" className="rb:mb-2!">
+                <Checkbox disabled={isOmni}>{t('modelNew.is_audio')}</Checkbox>
+              </Form.Item>
+            </Col>
+            <Col span={24}>
+              <Form.Item name="is_thinking" valuePropName="checked" className="rb:mb-0!">
+                <Checkbox>{t('modelNew.is_thinking')}</Checkbox>
+              </Form.Item>
+            </Col>
+          </Row>
        }
      </Form>
    </RbModal>
--- a/web/src/views/ModelManagement/types.ts
+++ b/web/src/views/ModelManagement/types.ts
@@ -2,7 +2,7 @@
 * @Author: ZhaoYing 
 * @Date: 2026-02-03 16:50:18 
 * @Last Modified by: ZhaoYing
- * @Last Modified time: 2026-03-25 12:28:10
+ * @Last Modified time: 2026-03-31 15:48:02
 */
 /**
 * Type definitions for Model Management
@@ -295,7 +295,8 @@ export interface CustomModelForm {
  is_video?: boolean;
  is_audio?: boolean;
  is_omni?: boolean;
-  capability?: string[];
+  is_thinking?: boolean;
+  capability?: Capability[];
 }

 /**
@@ -324,7 +325,7 @@ export interface BaseRef {
  modelListDetailRefresh?: () => void;
 }

-export type Capability = 'vision' | 'audio' | 'video';
+export type Capability = 'vision' | 'audio' | 'video' | 'thinking';
 export interface Model {
  name: string;
  type: string;
--- a/web/src/views/UserMemoryDetail/Rag.tsx
+++ b/web/src/views/UserMemoryDetail/Rag.tsx
@@ -2,7 +2,7 @@
 * @Author: ZhaoYing 
 * @Date: 2026-02-03 17:57:11 
 * @Last Modified by: ZhaoYing
- * @Last Modified time: 2026-03-27 10:26:31
+ * @Last Modified time: 2026-03-31 15:29:45
 */
 /**
 * RAG User Memory Detail View
@@ -114,7 +114,7 @@ const Rag: FC = () => {
  }
  return (
    <Row gutter={[16, 16]} className="rb:h-full!">
-      <Col span={8}>
+      <Col span={8} className="rb:h-full!">
        <RbCard
          bodyClassName="rb:p-3! rb:pt-4!"
          className="rb:h-full!"
@@ -175,7 +175,7 @@ const Rag: FC = () => {
          </>
        </RbCard>
      </Col>
-      <Col span={16}>
+      <Col span={16} className="rb:h-full!">
        <ConversationMemory />
      </Col>
    </Row>
--- a/web/src/views/UserMemoryDetail/components/ConversationMemory.tsx
+++ b/web/src/views/UserMemoryDetail/components/ConversationMemory.tsx
@@ -2,38 +2,64 @@
 * @Author: ZhaoYing 
 * @Date: 2026-02-03 18:34:04 
 * @Last Modified by: ZhaoYing
- * @Last Modified time: 2026-03-27 10:28:53
+ * @Last Modified time: 2026-03-31 15:35:13
 */
-import { type FC } from 'react'
+import { type FC, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useParams } from 'react-router-dom'
+import { Divider, Flex } from 'antd'
+import clsx from 'clsx'

 import RbCard from '@/components/RbCard/Card'
 import PageScrollList from '@/components/PageScrollList'
 import Markdown from '@/components/Markdown'
 import { getRagContentUrl } from '@/api/memory'

+interface DataItem {
+  role: 'user' | 'assistant';
+  content: string;
+}
+
 const ConversationMemory: FC = () => {
  const { t } = useTranslation()
  const { id } = useParams()
+  const [total, setTotal] = useState(0)

  return (
    <RbCard
-      title={t('userMemory.conversationMemory')}
+      title={<span className="rb:font-[MiSans-Bold] rb:font-bold">{t('userMemory.conversationMemory')}</span>}
      headerType="borderless"
-      headerClassName="rb:min-h-[54px]! rb:pt-0! rb:mb-0! rb:font-[MiSans-Bold] rb:font-bold"
-      bodyClassName="rb:p-4! rb:pt-0! rb:h-[calc(100%-54px)]!"
+      headerClassName="rb:min-h-[54px]! rb:pt-0! rb:mb-0!"
+      bodyClassName="rb:p-4! rb:pt-0! rb:pb-1! rb:h-[calc(100%-54px)]!"
      className="rb:h-full!"
+      extra={<div className="rb:text-[#5B6167] rb:leading-5">{t('userMemory.totalRagMemory')}: <span className="rb:font-medium rb:text-[#171719]">{total}</span></div>}
    >
-      <PageScrollList<string>
+      <PageScrollList<DataItem>
        url={getRagContentUrl}
        query={{ end_user_id: id }}
        column={1}
-        renderItem={(item: string) => (
-          <div
-            className="rb:rounded-lg rb-border rb:px-4 rb:py-3 rb:bg-[#F0F3F8] rb:mt-2 rb:text-[#212332] rb:text-sm"
-          >
-            <Markdown content={item} />
+        gutter={0}
+        onTotalChange={setTotal}
+        renderItem={(item, index) => (
+          <div>
+            {index !== 0 && <Divider className="rb:mt-1! rb:mb-3! rb:ml-11!" />}
+            <Flex
+              align="start"
+              gap={12}
+            >
+              <div className={clsx("rb:size-8 rb:bg-cover", {
+                'rb:bg-[url(src/assets/images/conversation/user.png)]': item.role === 'user',
+                'rb:bg-[url(src/assets/images/conversation/ai.png)]': item.role === 'assistant',
+              })}></div>
+              <div
+                className="rb:flex-1"
+              >
+                <div className="rb:text-[12px] rb:text-[#5B6167] rb:leading-4.5 rb:mb-0.5">
+                  {item.role === 'assistant' ? t('userMemory.assistant') : t('userMemory.user')}
+                </div>
+                <Markdown content={item.content} />
+              </div>
+            </Flex>
          </div>
        )}
        className="rb:h-full!"