From 391c60c812cd8120f82dc907db4a0699c9610231 Mon Sep 17 00:00:00 2001
From: zhaoying <zhaoyingyz@126.com>
Date: Tue, 24 Mar 2026 15:20:32 +0800
Subject: [PATCH] feat(web): memory extraction engine add model config

---
 web/src/i18n/en.ts                            |   5 +
 web/src/i18n/zh.ts                            |   7 +-
 .../views/MemoryExtractionEngine/constant.ts  |  24 +++-
 .../views/MemoryExtractionEngine/index.tsx    | 103 +++++++++---------
 4 files changed, 88 insertions(+), 51 deletions(-)

diff --git a/web/src/i18n/en.ts b/web/src/i18n/en.ts
index abb0be97..1dad256e 100644
--- a/web/src/i18n/en.ts
+++ b/web/src/i18n/en.ts
@@ -1764,6 +1764,11 @@ Memory Bear: After the rebellion, regional warlordism intensified for several re
       finalResult: 'Final Result',
       chunking: 'Chunking',
       dataStatistics: 'Data Statistics',
+      modelConfig: 'Model Configuration',
+      llm_id: 'LLM model',
+      vision_id: 'Vision model',
+      audio_id: 'Audio model',
+      video_id: 'Video model',
     },
     memoryConversation: {
       searchPlaceholder: 'Enter user ID...',
diff --git a/web/src/i18n/zh.ts b/web/src/i18n/zh.ts
index b5bbbfcd..0a0efb67 100644
--- a/web/src/i18n/zh.ts
+++ b/web/src/i18n/zh.ts
@@ -1760,6 +1760,11 @@ export const zh = {
       finalResult: '最终结果',
       chunking: '分块',
       dataStatistics: '数据统计',
+      modelConfig: '模型配置',
+      llm_id: 'LLM 模型',
+      vision_id: '视觉模型',
+      audio_id: '音频模型',
+      video_id: '视频模型',
     },
     memoryConversation: {
       chatEmpty:'有什么我可以帮您的吗？',
@@ -1919,7 +1924,7 @@ export const zh = {
       refreshFailed: '刷新失败',
       
       // Market 相关
-      mcpMarket: 'MCP Market',
+      mcpMarket: 'MCP 市场',
       availableMcp: '可用的 MCP 服务',
       descEmpty: '暂无介绍…',
       marketSelectTitle: '选择一个 MCP 市场',
diff --git a/web/src/views/MemoryExtractionEngine/constant.ts b/web/src/views/MemoryExtractionEngine/constant.ts
index 68f9e8c6..5c27ba48 100644
--- a/web/src/views/MemoryExtractionEngine/constant.ts
+++ b/web/src/views/MemoryExtractionEngine/constant.ts
@@ -2,7 +2,7 @@
  * @Author: ZhaoYing 
  * @Date: 2026-02-03 17:30:06 
  * @Last Modified by: ZhaoYing
- * @Last Modified time: 2026-03-06 13:49:00
+ * @Last Modified time: 2026-03-24 15:11:30
  */
 /**
  * Memory Extraction Engine Configuration Constants
@@ -212,6 +212,28 @@ export const configList: ConfigVo[] = [
     ]
   }
 ]
+export const modelConfigList = [
+  {
+    key: 'llm_id',
+    type: 'modelSelect',
+    params: { type: 'chat,llm' },
+  },
+  {
+    key: 'vision_id',
+    type: 'modelSelect',
+    params: { type: 'chat,llm', capability: 'vision' },
+  },
+  {
+    key: 'audio_id',
+    type: 'modelSelect',
+    params: { type: 'chat,llm', capability: 'audio' },
+  },
+  {
+    key: 'video_id',
+    type: 'modelSelect',
+    params: { type: 'chat,llm', capability: 'video' },
+  },
+]
 
 /**
  * Group data by specified key
diff --git a/web/src/views/MemoryExtractionEngine/index.tsx b/web/src/views/MemoryExtractionEngine/index.tsx
index e5e80577..34596711 100644
--- a/web/src/views/MemoryExtractionEngine/index.tsx
+++ b/web/src/views/MemoryExtractionEngine/index.tsx
@@ -2,7 +2,7 @@
  * @Author: ZhaoYing 
  * @Date: 2026-02-03 17:30:02 
  * @Last Modified by: ZhaoYing
- * @Last Modified time: 2026-03-18 17:55:32
+ * @Last Modified time: 2026-03-24 14:07:35
  */
 /**
  * Memory Extraction Engine Configuration Page
@@ -20,15 +20,17 @@ import Card from './components/Card'
 import type { ConfigForm, Variable } from './types'
 import { getMemoryExtractionConfig, updateMemoryExtractionConfig } from '@/api/memory'
 import Markdown from '@/components/Markdown'
-import { configList } from './constant'
+import { configList, modelConfigList } from './constant'
 import Result from './components/Result'
 import SwitchFormItem from '@/components/FormItem/SwitchFormItem'
 import ModelSelect from '@/components/ModelSelect'
 import RbSlider from '@/components/RbSlider';
 import DescWrapper from '@/components/FormItem/DescWrapper'
+import LabelWrapper from '@/components/FormItem/LabelWrapper'
 
 /** Available configuration section keys */
 const keys = [
+  'modelConfig',
   'storageLayerModule', 
   'arrangementLayerModule'
 ]
@@ -54,8 +56,6 @@ const MemoryExtractionEngine: FC = () => {
   const { id } = useParams()
   const [expandedKeys, setExpandedKeys] = useState<string[]>(keys)
   const [form] = Form.useForm<ConfigForm>()
-  const [modelForm] = Form.useForm()
-  const modelValues = Form.useWatch([], modelForm)
   const values = Form.useWatch<ConfigForm>([], form)
   const [loading, setLoading] = useState(false)
   const [iterationPeriodDisabled, setIterationPeriodDisabled] = useState(false)
@@ -82,11 +82,7 @@ const MemoryExtractionEngine: FC = () => {
         t_type_strict: Number(response.t_type_strict || 0),
         t_overall: Number(response.t_overall || 0),
       }
-      // setData(initialValues)
       form.setFieldsValue(initialValues)
-      modelForm.setFieldsValue({
-        llm_id: response.llm_id,
-      })
     })
   }
   useEffect(() => {
@@ -106,11 +102,9 @@ const MemoryExtractionEngine: FC = () => {
     if (!id) {
       return
     }
-    console.log('values', values)
     setLoading(true)
     updateMemoryExtractionConfig({
       ...values,
-      ...modelValues,
       config_id: id,
     }).then(() => {
       message.success(t('common.saveSuccess'))
@@ -131,45 +125,56 @@ const MemoryExtractionEngine: FC = () => {
 
       <Row gutter={12}>
         <Col span={12}>
-          <Flex vertical gap={12} className="rb:h-[calc(100vh-114px)]! rb:overflow-y-auto">
-            <Form form={modelForm}>
-              <Form.Item
-                name="llm_id"
-                noStyle
+          <Form form={form}>
+            <Flex vertical gap={12} className="rb:h-[calc(100vh-114px)]! rb:overflow-y-auto">
+              <div className="rb:bg-white rb:rounded-xl rb:py-2.5 rb:px-4">
+                <Flex
+                  align="center"
+                  justify="space-between"
+                  className="rb:font-[MiSans-Bold] rb:font-bold rb:cursor-pointer"
+                  onClick={() => handleExpand('example')}
+                >
+                  {t('memoryExtractionEngine.example')}
+                  <div className={clsx("rb:size-4 rb:bg-cover rb:bg-[url('@/assets/images/common/arrow_up.svg')]", {
+                    'rb:rotate-180': !expandedKeys.includes('example'),
+                    'rb:rotate-0': expandedKeys.includes('example'),
+                  })}></div>
+                </Flex>
+
+                {expandedKeys.includes('example') &&
+                  <div className="rb:text-[14px] rb:text-[#5B6167] rb:font-regular rb:leading-5 rb:mt-2.5 rb:mb-1.5">
+                    <Markdown content={t('memoryExtractionEngine.exampleText')} />
+                  </div>
+                }
+              </div>
+
+              <Card
+                title={t('memoryExtractionEngine.modelConfig')}
+                type="modelConfig"
+                expanded={expandedKeys.includes('modelConfig')}
+                handleExpand={handleExpand}
               >
-                <ModelSelect
-                  params={{ type: 'llm,chat' }}
-                  className="rb:w-full! rb:h-10! rb:bg-white rb:rounded-xl"
-                  variant="borderless"
-                  placeholder={t('memoryExtractionEngine.model')}
-                  allowClear={false}
-                  fontClassName="rb:font-medium!"
-                />
-              </Form.Item>
-            </Form>
+                {/* <Form form={modelForm}> */}
+                  <Flex vertical gap={12}>
+                    <Flex gap={12} vertical>
+                      {modelConfigList.map(config => (
+                        <div key={config.key} className="rb:bg-[#F6F6F6] rb:rounded-xl rb:p-3">
+                          <LabelWrapper title={t(`memoryExtractionEngine.${config.key}`)} className="rb:mb-3" />
+                          <Form.Item
+                            name={config.key}
+                            className="rb:mb-0!"
+                          >
+                            <ModelSelect
+                              params={config.params}
+                            />
+                          </Form.Item>
+                        </div>
+                      ))}
+                    </Flex>
+                  </Flex>
+                {/* </Form> */}
+              </Card>
 
-            <div className="rb:bg-white rb:rounded-xl rb:py-2.5 rb:px-4">
-              <Flex
-                align="center"
-                justify="space-between"
-                className="rb:font-[MiSans-Bold] rb:font-bold rb:cursor-pointer"
-                onClick={() => handleExpand('example')}
-              >
-                {t('memoryExtractionEngine.example')}
-                <div className={clsx("rb:size-4 rb:bg-cover rb:bg-[url('@/assets/images/common/arrow_up.svg')]", {
-                  'rb:rotate-180': !expandedKeys.includes('example'),
-                  'rb:rotate-0': expandedKeys.includes('example'),
-                })}></div>
-              </Flex>
-
-              {expandedKeys.includes('example') &&
-                <div className="rb:text-[14px] rb:text-[#5B6167] rb:font-regular rb:leading-5 rb:mt-2.5 rb:mb-1.5">
-                  <Markdown content={t('memoryExtractionEngine.exampleText')} />
-                </div>
-              }
-            </div>
-
-            <Form form={form}>
               <Flex vertical gap={16}>
                 {configList.map((item, index) => (
                   <Card
@@ -251,8 +256,8 @@ const MemoryExtractionEngine: FC = () => {
                   </Card>
                 ))}
               </Flex>
-            </Form>
-          </Flex>
+            </Flex>
+          </Form>
         </Col>
         <Col span={12}>
           <Result