feat(web): add association between models and conversation features

2026-03-24 11:06:27 +08:00
parent cbec2c1356
commit 3369b702e4
8 changed files with 125 additions and 75 deletions
--- a/web/src/views/ApplicationConfig/components/FeaturesConfig/FeaturesConfigModal.tsx
+++ b/web/src/views/ApplicationConfig/components/FeaturesConfig/FeaturesConfigModal.tsx
@@ -2,7 +2,7 @@
 * @Author: ZhaoYing 
 * @Date: 2026-02-03 16:27:56 
 * @Last Modified by: ZhaoYing
- * @Last Modified time: 2026-03-18 15:38:14
+ * @Last Modified time: 2026-03-24 10:59:37
 */
 /**
 * Copy Application Modal
@@ -19,10 +19,12 @@ import RbModal from '@/components/RbModal'
 import SwitchFormItem from '@/components/FormItem/SwitchFormItem'
 import FileUploadSettingModal from './FileUploadSettingModal'
 import type { Application } from '@/views/ApplicationManagement/types';
+import type { Capability } from '@/views/ModelManagement/types'

 interface FeaturesConfigModalProps {
  refresh: (value: FeaturesConfigForm) => void;
  source?: Application['type'];
+  capability?: Capability[];
 }
 const max_file_count = 1;
 /**
@@ -31,6 +33,7 @@ const max_file_count = 1;
 const FeaturesConfigModal = forwardRef<FeaturesConfigModalRef, FeaturesConfigModalProps>(({
  refresh,
  source,
+  capability,
 }, ref) => {
  const { t } = useTranslation();
  const [visible, setVisible] = useState(false);
@@ -47,7 +50,6 @@ const FeaturesConfigModal = forwardRef<FeaturesConfigModalRef, FeaturesConfigMod
  /** Open modal */
  const handleOpen = (initValue: FeaturesConfigForm) => {
    setVisible(true);
-    console.log('initValue', initValue)
    form.setFieldsValue(initValue)
  };
  /** Copy application with new name */
@@ -64,6 +66,22 @@ const FeaturesConfigModal = forwardRef<FeaturesConfigModalRef, FeaturesConfigMod
    form.setFieldValue('file_upload', { ...settings, enabled: values?.file_upload?.enabled ?? false })
  }

+  const formatFileTypeOptions = (fu: FeaturesConfigForm['file_upload']) => {
+    let options = [{ type: 'document', enabled: fu.document_enabled, maxSize: fu.document_max_size_mb }]
+    if (!capability) return options
+    
+    if (capability.includes('vision')) {
+      options.push({ type: 'image', enabled: fu.image_enabled, maxSize: fu.image_max_size_mb })
+    }
+    if (capability.includes('audio')) {
+      options.push({ type: 'audio', enabled: fu.audio_enabled, maxSize: fu.audio_max_size_mb })
+    }
+    if (capability.includes('video')) {
+      options.push({ type: 'video', enabled: fu.video_enabled, maxSize: fu.video_max_size_mb })
+    }
+    return options.filter(item => item.enabled)
+  }
+
  /** Expose methods to parent component */
  useImperativeHandle(ref, () => ({
    handleOpen,
@@ -109,22 +127,19 @@ const FeaturesConfigModal = forwardRef<FeaturesConfigModalRef, FeaturesConfigMod
              />
              {values?.file_upload?.enabled && (() => {
                const fu = values.file_upload
-                const types = [
-                  { type: 'image', enabled: fu.image_enabled, maxSize: fu.image_max_size_mb },
-                  { type: 'audio', enabled: fu.audio_enabled, maxSize: fu.audio_max_size_mb },
-                  { type: 'document', enabled: fu.document_enabled, maxSize: fu.document_max_size_mb },
-                  { type: 'video', enabled: fu.video_enabled, maxSize: fu.video_max_size_mb },
-                ].filter(item => item.enabled)
-                return types.length > 0 ? <>
+                // 'vision' | 'audio' | 'video'
+                const filterTypes = formatFileTypeOptions(fu)
+                console.log('filterTypes', filterTypes)
+                return filterTypes.length > 0 ? <>
                  <Flex gap={12} className="rb:py-2!">
                    <div className="rb:flex-1 rb:border rb:border-[#DFE4ED] rb:rounded-lg rb:bg-white rb:text-[12px]">
                      <div className="rb:grid rb:grid-cols-2 rb:gap-2 rb:text-[12px] rb:text-[#5B6167] rb:border-b rb:border-b-[#DFE4ED]">
                        <div className="rb:px-3 rb:py-1">{t(`application.supportedTypes`)}</div>
                        <div className="rb:px-3 rb:py-1">{t('application.singleMaxSize')}</div>
                      </div>
-                      {types.map((item, index) => (
+                      {filterTypes.map((item, index) => (
                        <div key={item.type} className={clsx('rb:grid rb:grid-cols-2 rb:gap-2', {
-                          'rb:border-b rb:border-b-[#DFE4ED]': index !== types.length - 1
+                          'rb:border-b rb:border-b-[#DFE4ED]': index !== filterTypes.length - 1
                        })}>
                          <div className="rb:px-3 rb:py-1">{t(`application.${item.type}`)}</div>
                          <div className="rb:px-3 rb:py-1">{item.maxSize} MB</div>
@@ -148,6 +163,7 @@ const FeaturesConfigModal = forwardRef<FeaturesConfigModalRef, FeaturesConfigMod
      <FileUploadSettingModal
        ref={fileUploadSettingModalRef}
        onSave={handleSaveSettings}
+        capability={capability}
      />
    </>
  );
--- a/web/src/views/ApplicationConfig/components/FeaturesConfig/FileUploadSettingModal.tsx
+++ b/web/src/views/ApplicationConfig/components/FeaturesConfig/FileUploadSettingModal.tsx
@@ -2,15 +2,16 @@
 * @Author: ZhaoYing 
 * @Date: 2026-03-05 
 * @Last Modified by: ZhaoYing
- * @Last Modified time: 2026-03-19 20:19:14
+ * @Last Modified time: 2026-03-24 11:00:14
 */
-import { forwardRef, useImperativeHandle, useState } from 'react';
+import { forwardRef, useImperativeHandle, useState, useMemo } from 'react';
 import { Form, InputNumber, Flex, Switch, Row, Col, Radio } from 'antd';
 import { useTranslation } from 'react-i18next';
 import clsx from 'clsx';

 import RbModal from '@/components/RbModal';
 import type { FeaturesConfigForm } from '../../types'
+import type { Capability } from '@/views/ModelManagement/types'

 type FileUpload = Omit<FeaturesConfigForm['file_upload'], 'settings'>

@@ -21,51 +22,49 @@ interface FileUploadSettingModalRef {

 interface FileUploadSettingModalProps {
  onSave: (values: FileUpload) => void;
+  capability?: Capability[];
+}
+const documentType = {
+  type: 'document',
+  icon: <div className="rb:size-9 rb:bg-cover rb:bg-[url('@/assets/images/file/txt.svg')]"></div>,
+  formats: [
+    "pdf",
+    "docx",
+    "doc",
+    "xlsx",
+    "xls",
+    "txt",
+    "csv",
+    "json",
+    "md",
+  ],
+}
+const imageType = {
+  type: 'image',
+  icon: <div className="rb:size-9 rb:bg-cover rb:bg-[url('@/assets/images/file/image.svg')]"></div>,
+  formats: [
+    "png",
+    "jpg",
+    "jpeg"
+  ],
+}
+const audioType = {
+  type: 'audio',
+  icon: <div className="rb:size-9 rb:bg-cover rb:bg-[url('@/assets/images/file/audio.svg')]"></div>,
+  formats: [
+    "mp3",
+    "wav",
+    "m4a",
+  ],
+}
+const videoType = {
+  type: 'video',
+  icon: <div className="rb:size-9 rb:bg-cover rb:bg-[url('@/assets/images/file/video.svg')]"></div>,
+  formats: [
+    "mp4",
+    "mov",
+  ],
 }
-
-const fileTypeOptions = [
-  {
-    type: 'document',
-    icon: <div className="rb:size-9 rb:bg-cover rb:bg-[url('@/assets/images/file/txt.svg')]"></div>,
-    formats: [
-      "pdf",
-      "docx",
-      "doc",
-      "xlsx",
-      "xls",
-      "txt",
-      "csv",
-      "json",
-      "md",
-    ],
-  },
-  {
-    type: 'image',
-    icon: <div className="rb:size-9 rb:bg-cover rb:bg-[url('@/assets/images/file/image.svg')]"></div>,
-    formats: [
-      "png",
-      "jpg",
-      "jpeg"
-    ],
-  },
-  {
-    type: 'audio',
-    icon: <div className="rb:size-9 rb:bg-cover rb:bg-[url('@/assets/images/file/audio.svg')]"></div>,
-    formats: [
-      "mp3",
-      "wav",
-      "m4a",
-    ],
-  },
-  {
-    type: 'video',
-    icon: <div className="rb:size-9 rb:bg-cover rb:bg-[url('@/assets/images/file/video.svg')]"></div>,
-    formats: [
-      "mp4",
-      "mov",
-    ],
-  },
-];

 const defaultValues: FileUpload = {
  enabled: false,
@@ -108,6 +107,7 @@ const defaultValues: FileUpload = {

 const FileUploadSettingModal = forwardRef<FileUploadSettingModalRef, FileUploadSettingModalProps>(({
  onSave,
+  capability,
 }, ref) => {
  const { t } = useTranslation();
  const [visible, setVisible] = useState(false);
@@ -148,6 +148,15 @@ const FileUploadSettingModal = forwardRef<FileUploadSettingModalRef, FileUploadS
    handleClose
  }));

+  const fileTypeOptions = useMemo(() => {
+    let options = [documentType]
+    if (!capability) return options
+    if (capability.includes('vision')) options = [...options, imageType]
+    if (capability.includes('audio')) options = [...options, audioType]
+    if (capability.includes('video')) options = [...options, videoType]
+    return options
+  }, [capability])
+
  return (
    <RbModal
      title={t('application.settings')}
@@ -167,7 +176,6 @@ const FileUploadSettingModal = forwardRef<FileUploadSettingModalRef, FileUploadS
          </Radio.Group>
        </Form.Item>

-        {/* <div className="rb:text-[12px] rb:text-[#5B6167] rb:mb-1">{t('application.maxCount')}</div> */}
        <Form.Item label={t('application.maxCount')} name="max_file_count" hidden>
          <InputNumber min={1} max={20} precision={0} className="rb:w-full!" placeholder={t('common.pleaseEnter')} />
        </Form.Item>
--- a/web/src/views/ApplicationConfig/components/FeaturesConfig/index.tsx
+++ b/web/src/views/ApplicationConfig/components/FeaturesConfig/index.tsx
@@ -2,7 +2,7 @@
 * @Author: ZhaoYing 
 * @Date: 2026-03-13 17:20:21 
 * @Last Modified by: ZhaoYing
- * @Last Modified time: 2026-03-18 15:38:59
+ * @Last Modified time: 2026-03-24 11:00:25
 */
 import { type FC, useRef } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -11,6 +11,7 @@ import { Button } from 'antd';
 import FeaturesConfigModal from './FeaturesConfigModal'
 import type { FeaturesConfigModalRef, FeaturesConfigForm } from '../../types'
 import type { Application } from '@/views/ApplicationManagement/types';
+import type { Capability } from '@/views/ModelManagement/types'

 /** Props for the FeaturesConfig component */
 interface FeaturesConfigProps {
@@ -19,12 +20,14 @@ interface FeaturesConfigProps {
  /** Callback to propagate updated config back to the parent */
  refresh: (value: FeaturesConfigForm) => void;
  source?: Application['type'];
+  capability?: Capability[];
 }

 const FeaturesConfig: FC<FeaturesConfigProps> = ({
  value,
  refresh,
-  source
+  source,
+  capability
 }) => {
  const { t } = useTranslation();
  // Ref used to imperatively open the config modal
@@ -46,6 +49,7 @@ const FeaturesConfig: FC<FeaturesConfigProps> = ({
        ref={funConfigModalRef}
        refresh={refresh}
        source={source}
+        capability={capability}
      />
    </>
  )
--- a/web/src/views/ApplicationConfig/components/ModelConfigModal.tsx
+++ b/web/src/views/ApplicationConfig/components/ModelConfigModal.tsx
@@ -1,8 +1,8 @@
 /*
 * @Author: ZhaoYing 
 * @Date: 2026-02-03 16:28:07 
- * @Last Modified by:   ZhaoYing 
- * @Last Modified time: 2026-02-03 16:28:07 
+ * @Last Modified by: ZhaoYing
+ * @Last Modified time: 2026-03-24 10:59:20
 */
 /**
 * Model Configuration Modal
@@ -105,6 +105,8 @@ const ModelConfigModal = forwardRef<ModelConfigModalRef, ModelConfigModalProps>(
  const handleChange = (_value: string, option: ModelListItem | ModelListItem[] | undefined) => {
    if (source === 'chat') {
      form.setFieldValue('label', (option as ModelListItem).name)
+    } else {
+      form.setFieldValue('capability', (option as ModelListItem).capability)
    }
  }

@@ -137,16 +139,19 @@ const ModelConfigModal = forwardRef<ModelConfigModalRef, ModelConfigModalProps>(
          rules={[{ required: source !== 'multi_agent', message: t('common.pleaseSelect') }]}
          hidden={source === 'multi_agent'}
        >
-          {source !== 'multi_agent' && <Select
-            placeholder={t('common.pleaseSelect')}
-            fieldNames={{
-              label: 'name',
-              value: 'id',
-            }}
-            options={modelList}
-            onChange={handleChange}
-          />}
+          {source !== 'multi_agent' &&
+            <Select
+              placeholder={t('common.pleaseSelect')}
+              fieldNames={{
+                label: 'name',
+                value: 'id',
+              }}
+              options={modelList}
+              onChange={handleChange}
+            />
+          }
        </FormItem>
+        {source === 'model' && <FormItem name="capability" hidden />}
        {source === 'chat' && <FormItem name="label" hidden />}

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