feat(web): app share

web/src/views/ApplicationConfig/components/AppSharingModal.tsx

@@ -0,0 +1,183 @@
+/*
+ * @Author: ZhaoYing 
+ * @Date: 2026-03-13 17:19:13 
+ * @Last Modified by: ZhaoYing
+ * @Last Modified time: 2026-03-13 17:26:57
+ */
+import { forwardRef, useImperativeHandle, useState } from 'react';
+import { Checkbox, App, Form } from 'antd';
+import { useTranslation } from 'react-i18next';
+
+import RbModal from '@/components/RbModal';
+import { appSharing, getAppShares } from '@/api/application';
+import { formatDateTime } from '@/utils/format';
+import type { AppSharingModalRef, Release } from '../types';
+import type { SpaceItem } from '@/views/KnowledgeBase/types';
+import { getWorkspaces } from '@/api/workspaces';
+import RadioGroupCard from '@/components/RadioGroupCard';
+
+/** Props for the AppSharingModal component */
+interface AppSharingModalProps {
+  /** ID of the application being shared */
+  appId: string;
+  /** The release version to share */
+  version: Release | null;
+}
+
+const AppSharingModal = forwardRef<AppSharingModalRef, AppSharingModalProps>(({ appId, version }, ref) => {
+  const { t } = useTranslation();
+  const { message } = App.useApp();
+
+  const [visible, setVisible] = useState(false);
+  const [loading, setLoading] = useState(false);
+  // All workspaces available to share with (excluding the current one)
+  const [spaceList, setSpaceList] = useState<SpaceItem[]>([]);
+  // IDs of workspaces that already have access to this app
+  const [sharedIds, setSharedIds] = useState<string[]>([]);
+
+  const [form] = Form.useForm<{ target_workspace_ids: string[]; permission: 'readonly' | 'editable' }>();
+  // Reactively track the currently selected workspace IDs in the form
+  const selectedIds: string[] = Form.useWatch('target_workspace_ids', form) ?? [];
+
+  /**
+   * Fetch workspaces and existing share records in parallel,
+   * sort already-shared spaces to the top, then open the modal.
+   * Shows a warning if the user has no shareable workspaces.
+   */
+  const handleOpen = () => {
+    Promise.all([getWorkspaces({ include_current: false }), getAppShares(appId)]).then(([spaces, shared]) => {
+      // Normalise the shared workspace ID field across different API response shapes
+      const ids = ((shared as any[]) || []).map((s: any) => s.workspace_id || s.target_workspace_id || s.id);
+      // Sort: already-shared workspaces appear first
+      const sorted = (spaces as SpaceItem[]).sort((a, b) =>
+        ids.includes(b.id) ? 1 : ids.includes(a.id) ? -1 : 0
+      );
+      setSpaceList(sorted);
+      setSharedIds(ids);
+
+      if (sorted.length > 0) {
+        setVisible(true);
+      } else {
+        message.warning(t('application.noShareAuth'));
+      }
+    });
+  };
+
+  /** Close the modal and reset form fields */
+  const handleClose = () => {
+    setVisible(false);
+    form.resetFields();
+  };
+
+  // Expose open/close handlers to the parent via ref
+  useImperativeHandle(ref, () => ({ handleOpen, handleClose }));
+
+  /**
+   * Toggle a workspace in the selected list.
+   * Already-shared workspaces are read-only and cannot be toggled.
+   */
+  const handleToggle = (id: string, isShared: boolean) => {
+    if (isShared) return;
+    const prev = form.getFieldValue('target_workspace_ids') as string[] ?? [];
+    form.setFieldValue(
+      'target_workspace_ids',
+      prev.includes(id) ? prev.filter(i => i !== id) : [...prev, id]
+    );
+  };
+
+  /** Validate the form then submit the sharing request */
+  const handleConfirm = () => {
+    form.validateFields().then(values => {
+      setLoading(true);
+      appSharing(appId, values)
+        .then(() => {
+          message.success(t('common.operateSuccess'));
+          handleClose();
+        })
+        .finally(() => setLoading(false));
+    });
+  };
+
+  // Normalise the version label to always start with "v"
+  const versionLabel = version?.version_name
+    ? (version.version_name[0].toLowerCase() === 'v' ? version.version_name : `v${version.version_name}`)
+    : `v${version?.version}`;
+
+  return (
+    <RbModal
+      title={t('application.sharingApp')}
+      open={visible}
+      onCancel={handleClose}
+      okText={<>{t('application.confirmSharing')}({selectedIds.length})</>}
+      onOk={handleConfirm}
+      confirmLoading={loading}
+      width={600}
+    >
+      <Form form={form} layout="vertical" initialValues={{ target_workspace_ids: [], permission: 'readonly' }}>
+        {/* Version info: displays version number, release time and publisher */}
+        <div className="rb:rounded-lg rb:border rb:border-[#EBEBEB] rb:bg-[#FBFDFF] rb:p-4 rb:mb-4">
+          <div className="rb:text-sm rb:font-medium rb:mb-3">{t('application.VersionInformation')}</div>
+          <div className="rb:grid rb:grid-cols-3 rb:gap-4 rb:text-sm">
+            <div>
+              <div className="rb:text-[#5B6167] rb:mb-1">{t('application.versionList').replace('列表', '号')}</div>
+              <div className="rb:font-medium">{versionLabel}</div>
+            </div>
+            <div>
+              <div className="rb:text-[#5B6167] rb:mb-1">{t('application.releaseTime')}</div>
+              <div className="rb:font-medium">{formatDateTime(version?.published_at || 0, 'YYYY-MM-DD HH:mm:ss')}</div>
+            </div>
+            <div>
+              <div className="rb:text-[#5B6167] rb:mb-1">{t('application.publisher')}</div>
+              <div className="rb:font-medium">{version?.publisher_name}</div>
+            </div>
+          </div>
+        </div>
+
+        {/* Target space: scrollable list of workspaces with checkbox selection */}
+        <Form.Item
+          name="target_workspace_ids"
+          label={t('application.selectTargetSpace')}
+          rules={[{ required: true, message: t('common.pleaseSelect') }]}
+        >
+          <div className="rb:rounded-lg rb:border rb:border-[#EBEBEB] rb:divide-y rb:divide-[#EBEBEB] rb:max-h-50 rb:overflow-y-auto">
+            {spaceList.map(space => {
+              const isShared = sharedIds.includes(space.id);
+              return (
+                <div key={space.id} className="rb:flex rb:items-center rb:gap-2 rb:px-4 rb:py-3 rb:cursor-pointer" onClick={() => handleToggle(space.id, isShared)}>
+                  <Checkbox
+                    checked={isShared || selectedIds.includes(space.id)}
+                    disabled={isShared} // already-shared workspaces cannot be unselected
+                    onChange={() => handleToggle(space.id, isShared)}
+                  />
+                  <span className="rb:flex-1 rb:text-sm">{space.name}</span>
+                  {/* Badge shown when the app is already shared with this workspace */}
+                  {isShared && (
+                    <span className="rb:text-xs rb:text-[#5B6167]">{t('application.alreadyShared')}</span>
+                  )}
+                </div>
+              );
+            })}
+          </div>
+        </Form.Item>
+
+        {/* Permission mode: readonly (use only) or editable (full copy) */}
+        <Form.Item
+          name="permission"
+          label={t('application.permissionMode')}
+          rules={[{ required: true, message: t('common.pleaseSelect') }]}
+          className="rb:mb-0!"
+        >
+          <RadioGroupCard
+            options={['readonly', 'editable'].map((type) => ({
+              value: type,
+              label: t(`application.${type}Mode`),
+              labelDesc: t(`application.${type}ModeDesc`),
+            }))}
+          />
+        </Form.Item>
+      </Form>
+    </RbModal>
+  );
+});
+
+export default AppSharingModal;

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-05 17:03:46
+ * @Last Modified time: 2026-03-13 15:20:32
  */
 /**
  * Chat debugging component for application testing
@@ -13,7 +13,8 @@
 import { type FC, useEffect, useState, useRef } from 'react';
 import { useTranslation } from 'react-i18next';
 import clsx from 'clsx'
-import { Flex, Dropdown, type MenuProps, App, Divider } from 'antd'
+import { Flex, Dropdown, type MenuProps, App, Divider } from 'antd';
+import { SettingOutlined } from '@ant-design/icons'
 
 import ChatIcon from '@/assets/images/application/chat.png'
 import DebuggingEmpty from '@/assets/images/application/debuggingEmpty.png'
@@ -45,13 +46,17 @@ interface ChatProps {
   /** Source type: multi-agent cluster or single agent */
   source?: 'multi_agent' | 'agent';
   chatVariables?: Variable[]; // Add chatVariables prop
+  handleEditVariables?: () => void;
 }
 
 /**
  * Chat debugging component
  * Allows testing application with different model configurations side-by-side
  */
-const Chat: FC<ChatProps> = ({ chatList, data, updateChatList, handleSave, source = 'agent', chatVariables }) => {
+const Chat: FC<ChatProps> = ({
+  chatList, data, updateChatList, handleSave, source = 'agent', chatVariables,
+  handleEditVariables
+}) => {
   const { t } = useTranslation();
   const { message: messageApi } = App.useApp()
   const [loading, setLoading] = useState(false)
@@ -434,6 +439,7 @@ const Chat: FC<ChatProps> = ({ chatList, data, updateChatList, handleSave, sourc
   const updateFileList = (list?: any[]) => {
     setFileList([...list || []])
   }
+  const isNeedVariableConfig = chatVariables?.some(vo => vo.required && (vo.value === null || vo.value === undefined || vo.value === ''))
 
   return (
     <div className="rb:relative rb:h-full rb:flex rb:flex-col">
@@ -521,6 +527,18 @@ const Chat: FC<ChatProps> = ({ chatList, data, updateChatList, handleSave, sourc
                       className="rb:size-6 rb:cursor-pointer rb:bg-cover rb:bg-[url('@/assets/images/conversation/link.svg')] rb:hover:bg-[url('@/assets/images/conversation/link_hover.svg')]"
                     ></div>
                   </Dropdown>
+                  {chatVariables && chatVariables.length > 0 && (
+                    <div
+                      className={clsx("rb:flex rb:items-center rb:border rb:rounded-lg rb:px-2 rb:text-[12px] rb:h-6 rb:cursor-pointer rb:hover:bg-[#F0F3F8] rb:text-[#212332]", {
+                        'rb:border-[#FF5D34] rb:text-[#FF5D34]': isNeedVariableConfig,
+                        'rb:border-[#DFE4ED]': !isNeedVariableConfig,
+                      })}
+                      onClick={handleEditVariables}
+                    >
+                      <SettingOutlined className="rb:mr-1" />
+                      {t(`memoryConversation.variableConfig`)}
+                    </div>
+                  )}
                 </Flex>
                 <Flex align="center">
                   <AudioRecorder onRecordingComplete={handleRecordingComplete} />

web/src/views/ApplicationConfig/components/ConfigHeader.tsx

@@ -2,9 +2,9 @@
  * @Author: ZhaoYing 
  * @Date: 2026-02-03 16:27:52 
  * @Last Modified by: ZhaoYing
- * @Last Modified time: 2026-02-28 16:48:52
+ * @Last Modified time: 2026-03-13 17:12:59
  */
-import { type FC, useRef, useMemo } from 'react';
+import { type FC, useRef, useMemo, useCallback } from 'react';
 import { useNavigate, useParams } from 'react-router-dom';
 import { Layout, Tabs, Dropdown, Button, Flex } from 'antd';
 import type { MenuProps } from 'antd';
@@ -18,9 +18,10 @@ import exportIcon from '@/assets/images/export_hover.svg'
 import deleteIcon from '@/assets/images/delete_hover.svg'
 import type { Application, ApplicationModalRef } from '@/views/ApplicationManagement/types';
 import ApplicationModal from '@/views/ApplicationManagement/components/ApplicationModal'
-import type { CopyModalRef, AgentRef, ClusterRef, WorkflowRef } from '../types'
+import type { CopyModalRef, AgentRef, ClusterRef, WorkflowRef, FunConfigForm } from '../types'
 import { deleteApplication, appExport } from '@/api/application'
 import CopyModal from './CopyModal'
+import FunConfig from './FunConfig'
 
 const { Header } = Layout;
 
@@ -28,6 +29,11 @@ const { Header } = Layout;
  * Tab keys for application configuration
  */
 const tabKeys = ['arrangement', 'api', 'release', 'statistics']
+const sharingTabKeys = [
+  'test',
+  // 'log',
+  'api'
+]
 
 /**
  * Menu icon mapping
@@ -64,22 +70,23 @@ interface ConfigHeaderProps {
 const ConfigHeader: FC<ConfigHeaderProps> = ({ 
   application, activeTab, handleChangeTab, refresh,
   workflowRef,
+  appRef,
 }) => {
   const { t } = useTranslation();
   const navigate = useNavigate();
-  const { id } = useParams();
+  const { id, source } = useParams();
   const applicationModalRef = useRef<ApplicationModalRef>(null);
   const copyModalRef = useRef<CopyModalRef>(null);
 
   /**
    * Format tab items for display
    */
-  const formatTabItems = () => {
-    return tabKeys.map(key => ({
+  const formatTabItems = useMemo(() => {
+    return (source === 'sharing' ? sharingTabKeys : tabKeys).map(key => ({
       key,
       label: t(`application.${key}`),
     }))
-  }
+  }, [source, sharingTabKeys, tabKeys])
   /**
    * Handle menu item click
    */
@@ -160,6 +167,13 @@ const ConfigHeader: FC<ConfigHeaderProps> = ({
     return items
   }, [t, handleClick, application])
 
+  const funConfig = useMemo(() => {
+    return (appRef?.current?.funConfig || { file_type: [] }) as FunConfigForm
+  }, [appRef])
+  const handleSaveFunConfig = useCallback((value: FunConfigForm) => {
+    appRef?.current?.handleSaveFunConfig?.(value)
+  }, [appRef])
+
   console.log('formatMenuItems', formatMenuItems)
   return (
     <>
@@ -170,7 +184,7 @@ const ConfigHeader: FC<ConfigHeaderProps> = ({
           </div>
           
           <div className="rb:max-w-[100%-80px] rb:text-ellipsis rb:overflow-hidden rb:whitespace-nowrap">{application?.name}</div>
-          <Dropdown 
+          {source !== 'sharing' && <Dropdown 
             menu={{ items: formatMenuItems, onClick: handleClick }} 
             trigger={['click']}
             placement="bottomRight"
@@ -178,19 +192,20 @@ const ConfigHeader: FC<ConfigHeaderProps> = ({
             <div 
               className="rb:w-5 rb:h-5 rb:cursor-pointer rb:bg-cover rb:bg-[url('@/assets/images/edit.svg')] rb:hover:bg-[url('@/assets/images/edit_hover.svg')]" 
             ></div>
-          </Dropdown>
+          </Dropdown>}
         </div>
         
         <div className="rb:flex rb:justify-center">
           <Tabs 
             activeKey={activeTab} 
-            items={formatTabItems()} 
+            items={formatTabItems} 
             onChange={handleChangeTab} 
             className={styles.tabs}
           />
         </div>
         {application?.type === 'workflow'
-        ? <div className="rb:h-8 rb:flex rb:items-center rb:justify-end rb:gap-2.5">
+          ? <div className="rb:h-8 rb:flex rb:items-center rb:justify-end rb:gap-2.5">
+            {/* <FunConfig value={funConfig} refresh={handleSaveFunConfig} /> */}
             <Button onClick={clear}>{t('workflow.clear')}</Button>
             <Button onClick={addvariable}>{t('workflow.addvariable')}</Button>
             <Button onClick={run}>{t('workflow.run')}</Button>

web/src/views/ApplicationConfig/components/FunConfig/FileUploadSettingModal.tsx

@@ -0,0 +1,182 @@
+/*
+ * @Author: ZhaoYing 
+ * @Date: 2026-03-05 
+ * @Last Modified by: ZhaoYing
+ * @Last Modified time: 2026-03-11 15:42:13
+ */
+import { forwardRef, useImperativeHandle, useState } from 'react';
+import { Form, Radio, InputNumber, Flex, Switch, Row, Col } from 'antd';
+import { useTranslation } from 'react-i18next';
+import clsx from 'clsx';
+
+import RbModal from '@/components/RbModal';
+import type { FunConfigForm } from '../../types'
+
+interface FileUploadSettingModalRef {
+  handleOpen: (values?: FileUploadSettings) => void;
+  handleClose: () => void;
+}
+
+interface FileUploadSettings extends Omit<FunConfigForm, 'enabled'> {} 
+
+interface FileUploadSettingModalProps {
+  onSave: (values: FileUploadSettings) => void;
+}
+
+const fileTypeOptions = [
+  {
+    type: 'document',
+    icon: <div className="rb:size-9 rb:bg-cover rb:bg-[url('@/assets/images/file/txt.svg')]"></div>,
+    formats: 'TXT, MD, MDX, MARKDOWN, PDF, DOC, DOCX',
+    defaultMaxCount: 1,
+    defaultMaxSize: 2
+  },
+  {
+    type: 'image',
+    icon: <div className="rb:size-9 rb:bg-cover rb:bg-[url('@/assets/images/file/image.svg')]"></div>,
+    formats: 'JPG, JPEG, PNG, GIF, WEBP, SVG',
+    defaultMaxCount: 1,
+    defaultMaxSize: 2
+  },
+  {
+    type: 'audio',
+    icon: <div className="rb:size-9 rb:bg-cover rb:bg-[url('@/assets/images/file/audio.svg')]"></div>,
+    formats: 'MP3, M4A, WAV, AMR, MPGA',
+    defaultMaxCount: 1,
+    defaultMaxSize: 2
+  },
+  {
+    type: 'video',
+    icon: <div className="rb:size-9 rb:bg-cover rb:bg-[url('@/assets/images/file/video.svg')]"></div>,
+    formats: 'MP4, MOV, MPEG, WEBM',
+    defaultMaxCount: 1,
+    defaultMaxSize: 2
+  },
+];
+
+const FileUploadSettingModal = forwardRef<FileUploadSettingModalRef, FileUploadSettingModalProps>(({
+  onSave,
+}, ref) => {
+  const { t } = useTranslation();
+  const [visible, setVisible] = useState(false);
+  const [form] = Form.useForm();
+  const values = Form.useWatch([], form)
+
+  const handleClose = () => {
+    setVisible(false);
+    form.resetFields();
+  };
+
+  const handleOpen = (values?: FileUploadSettings) => {
+    setVisible(true);
+    // if (values) {
+    //   form.setFieldsValue(values);
+    // }
+  };
+
+  const handleSave = async () => {
+    const values = await form.validateFields();
+    onSave(values);
+    handleClose();
+  };
+
+  useImperativeHandle(ref, () => ({
+    handleOpen,
+    handleClose
+  }));
+
+
+  return (
+    <RbModal
+      title={t('application.settings')}
+      open={visible}
+      onCancel={handleClose}
+      onOk={handleSave}
+      width={600}
+    >
+      <Form
+        form={form}
+        layout="vertical"
+        initialValues={{
+          uploadType: 'both',
+          fileTypes: fileTypeOptions.map(opt => ({
+            type: opt.type,
+            enabled: false,
+            maxCount: opt.defaultMaxCount,
+            maxSize: opt.defaultMaxSize
+          }))
+        }}
+      >
+        <Form.Item
+          label={t('application.uploadType')}
+          name="uploadType"
+        >
+          <Radio.Group block buttonStyle="solid">
+            <Radio.Button value="local">{t('application.local')}</Radio.Button>
+            <Radio.Button value="url">URL</Radio.Button>
+            <Radio.Button value="both">{t('application.both')}</Radio.Button>
+          </Radio.Group>
+        </Form.Item>
+        <div className="rb:text-[12px] rb:text-[#5B6167] rb:mb-1">{t('application.maxCount')}</div>
+        <Form.Item
+          name="maxCount"
+          label={t('application.maxCount')}
+        >
+          <InputNumber min={1} max={100} className="rb:w-full!" placeholder={t('common.pleaseEnter')} />
+        </Form.Item>
+
+        <Form.Item label={t('application.supportedTypes')}>
+          <Form.List name="fileTypes">
+            {(fields) => (
+              <Flex vertical gap={12}>
+                {fields.map((field, index) => {
+                  const option = fileTypeOptions[index];
+                  const isEnabled = values?.fileTypes?.[index]?.enabled;
+                  
+                  return (
+                    <div
+                      key={field.key}
+                      className={clsx("rb:border rb:border-[#DFE4ED] rb:rounded-lg rb:p-3", {
+                        'rb:bg-[#f5f7fc]': isEnabled
+                      })}
+                    >
+                      <Row gutter={12}>
+                        <Col flex="36px" className="rb:self-center">
+                          {option.icon}
+                        </Col>
+                        <Col flex="1">
+                          <Flex align="center" justify="space-between">
+                            <Flex vertical>
+                              <div className="rb:font-medium">{t(`application.${option.type}`)}</div>
+                              <div className="rb:text-[12px] rb:text-[#5B6167]">{option.formats}</div>
+                            </Flex>
+                            <Form.Item name={[field.name, 'enabled']} valuePropName="checked" noStyle>
+                              <Switch />
+                            </Form.Item>
+                          </Flex>
+                        </Col>
+                      </Row>
+                      {isEnabled && (
+                        <Flex align="center" gap={12} className="rb:mt-3! rb:pt-3! rb:border-t rb:border-[#DFE4ED]">
+                          <div>{t('application.singleMaxSize')}: </div>
+                          <Form.Item name={[field.name, 'maxSize']} noStyle>
+                            <InputNumber min={1} max={500} suffix="MB" className="rb:flex-1" />
+                          </Form.Item>
+                        </Flex>
+                      )}
+                      <Form.Item name={[field.name, 'type']} hidden>
+                        <input type="hidden" />
+                      </Form.Item>
+                    </div>
+                  );
+                })}
+              </Flex>
+            )}
+          </Form.List>
+        </Form.Item>
+      </Form>
+    </RbModal>
+  );
+});
+
+export default FileUploadSettingModal;

web/src/views/ApplicationConfig/components/FunConfig/FunConfigModal.tsx

@@ -0,0 +1,140 @@
+/*
+ * @Author: ZhaoYing 
+ * @Date: 2026-02-03 16:27:56 
+ * @Last Modified by: ZhaoYing
+ * @Last Modified time: 2026-03-13 17:20:30
+ */
+/**
+ * Copy Application Modal
+ * Allows users to duplicate an existing application with a new name
+ */
+
+import { forwardRef, useImperativeHandle, useState, useRef } from 'react';
+import { Form, Button, Flex } from 'antd';
+import { useTranslation } from 'react-i18next';
+
+import type { FunConfigModalRef } from '../../types'
+import RbModal from '@/components/RbModal'
+import type { FunConfigForm } from '../../types'
+import SwitchFormItem from '@/components/FormItem/SwitchFormItem'
+import FileUploadSettingModal from './FileUploadSettingModal'
+
+const FormItem = Form.Item;
+
+interface FunConfigModalProps {
+  refresh: (value: FunConfigForm) => void;
+}
+
+/**
+ * Modal for copying applications
+ */
+const FunConfigModal = forwardRef<FunConfigModalRef, FunConfigModalProps>(({
+  refresh,
+}, ref) => {
+  const { t } = useTranslation();
+  const [visible, setVisible] = useState(false);
+  const [form] = Form.useForm<FunConfigForm>();
+  const [loading, setLoading] = useState(false)
+  const values = Form.useWatch([], form)
+  const fileUploadSettingModalRef = useRef<any>(null)
+
+  /** Close modal and reset form */
+  const handleClose = () => {
+    setVisible(false);
+    form.resetFields();
+    setLoading(false)
+  };
+
+  /** Open modal */
+  const handleOpen = (initValue: FunConfigForm) => {
+    setVisible(true);
+    form.setFieldsValue(initValue)
+  };
+  /** Copy application with new name */
+  const handleSave = () => {
+    setVisible(false);
+    setLoading(true)
+    const values = form.getFieldsValue()
+    refresh(values)
+  }
+
+  const handleOpenSettings = () => {
+    fileUploadSettingModalRef.current?.handleOpen(values)
+  }
+
+  const handleSaveSettings = (settings: any) => {
+    form.setFieldsValue(settings)
+  }
+
+  /** Expose methods to parent component */
+  useImperativeHandle(ref, () => ({
+    handleOpen,
+    handleClose
+  }));
+  return (
+    <>
+      <RbModal
+        title={t('application.funConfig')}
+        open={visible}
+        onCancel={handleClose}
+        okText={t('common.copy')}
+        onOk={handleSave}
+        confirmLoading={loading}
+      >
+        <Form
+          form={form}
+          layout="vertical"
+        >
+          <Flex vertical gap={12}>
+            <div className="rb:relative rb:border rb:border-[#DFE4ED] rb:p-3 rb:rounded-lg rb:bg-[#f5f7fc]">
+              <SwitchFormItem
+                title={t(`memoryConversation.web_search`)}
+                name={['web_search', "enabled"]}
+              />
+            </div>
+
+            <div className="rb:relative rb:border rb:border-[#DFE4ED] rb:p-3 rb:rounded-lg rb:bg-[#f5f7fc]">
+              <SwitchFormItem
+                title={t('application.textTranfer')}
+                name={['textTranfer', "enabled"]}
+                desc={t('application.textTranferDesc')}
+              />
+            </div>
+
+            <div className="rb:relative rb:border rb:border-[#DFE4ED] rb:p-3 rb:rounded-lg rb:bg-[#f5f7fc]">
+              <SwitchFormItem
+                title={t('application.fileUpload')}
+                name={['fileUpload', "enabled"]}
+                desc={values?.fileUpload?.enabled ? undefined : t('application.fileUploadDesc')}
+              />
+              {values?.fileUpload?.enabled && values?.fileTypes?.length > 0 ? <>
+                <div className="rb:grid rb:grid-cols-3 rb:gap-2 rb:text-[12px] rb:text-[#5B6167]">
+                  <div>{t(`application.supportedTypes`)}</div>
+                  <div>{t('application.maxCount')}</div>
+                  <div>{t('application.singleMaxSize')}</div>
+                </div>
+                {values?.fileTypes?.filter(item => item.enabled).map(item => (
+                  <div key={item.type} className="rb:grid rb:grid-cols-3 rb:gap-2">
+                    <div>{t(`application.${item.type}`)}</div>
+                    <div>{item.maxCount} {t('application.unix')}</div>
+                    <div>{item.maxSize} MB</div>
+                  </div>
+                ))}
+                <Button block onClick={handleOpenSettings}>{t('application.setting')}</Button>
+              </> : null}
+              <FormItem name="fileTypes" noStyle hidden></FormItem>
+              <FormItem name="uploadType" noStyle hidden></FormItem>
+            </div>
+          </Flex>
+        </Form>
+      </RbModal>
+
+      <FileUploadSettingModal
+        ref={fileUploadSettingModalRef}
+        onSave={handleSaveSettings}
+      />
+    </>
+  );
+});
+
+export default FunConfigModal;

web/src/views/ApplicationConfig/components/FunConfig/index.tsx

@@ -0,0 +1,50 @@
+/*
+ * @Author: ZhaoYing 
+ * @Date: 2026-03-13 17:20:21 
+ * @Last Modified by:   ZhaoYing 
+ * @Last Modified time: 2026-03-13 17:20:21 
+ */
+import { type FC, useRef } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Button } from 'antd';
+
+import FunConfigModal from './FunConfigModal'
+import type { FunConfigModalRef, FunConfigForm } from '../../types'
+
+/** Props for the FunConfig component */
+interface FunConfigProps {
+  /** Current feature configuration values */
+  value: FunConfigForm;
+  /** Callback to propagate updated config back to the parent */
+  refresh: (value: FunConfigForm) => void;
+}
+
+const FunConfig: FC<FunConfigProps> = ({
+  value,
+  refresh
+}) => {
+  const { t } = useTranslation();
+  // Ref used to imperatively open the config modal
+  const funConfigModalRef = useRef<FunConfigModalRef>(null)
+
+  /** Open the feature config modal pre-populated with the current values */
+  const handleFunConfig = () => {
+    console.log('funConfig', value)
+    funConfigModalRef.current?.handleOpen(value)
+  }
+
+  return (
+    <>
+      {/* Button that triggers the feature configuration modal */}
+      <Button onClick={handleFunConfig}>{t('application.funConfig')}</Button>
+
+      {/* Modal for editing feature settings; calls refresh on save */}
+      <FunConfigModal
+        ref={funConfigModalRef}
+        refresh={refresh}
+      />
+    </>
+  )
+}
+
+export default FunConfig