feat(web): agent feature add config

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-24 10:59:37
+ * @Last Modified time: 2026-03-26 14:03:01
  */
 /**
  * Copy Application Modal
@@ -20,11 +20,14 @@ import SwitchFormItem from '@/components/FormItem/SwitchFormItem'
 import FileUploadSettingModal from './FileUploadSettingModal'
 import type { Application } from '@/views/ApplicationManagement/types';
 import type { Capability } from '@/views/ModelManagement/types'
+import OpenStatementSettingModal, { type OpenStatementSettingModalRef } from './OpenStatementSettingModal'
+import type { Variable } from '../VariableList/types'
 
 interface FeaturesConfigModalProps {
   refresh: (value: FeaturesConfigForm) => void;
   source?: Application['type'];
   capability?: Capability[];
+  chatVariables: Variable[];
 }
 const max_file_count = 1;
 /**
@@ -34,12 +37,14 @@ const FeaturesConfigModal = forwardRef<FeaturesConfigModalRef, FeaturesConfigMod
   refresh,
   source,
   capability,
+  chatVariables
 }, ref) => {
   const { t } = useTranslation();
   const [visible, setVisible] = useState(false);
   const [form] = Form.useForm<FeaturesConfigForm>();
   const values = Form.useWatch([], form)
   const fileUploadSettingModalRef = useRef<any>(null)
+  const openStatementSettingModalRef = useRef<OpenStatementSettingModalRef>(null)
 
   /** Close modal and reset form */
   const handleClose = () => {
@@ -54,8 +59,10 @@ const FeaturesConfigModal = forwardRef<FeaturesConfigModalRef, FeaturesConfigMod
   };
   /** Copy application with new name */
   const handleSave = () => {
-    setVisible(false);
-    refresh(form.getFieldsValue())
+    form.validateFields().then((values) => {
+      setVisible(false);
+      refresh(values)
+    })
   }
 
   const handleOpenSettings = () => {
@@ -82,6 +89,13 @@ const FeaturesConfigModal = forwardRef<FeaturesConfigModalRef, FeaturesConfigMod
     return options.filter(item => item.enabled)
   }
 
+  const handleOpenStatementSettings = () => {
+    openStatementSettingModalRef.current?.handleOpen(values?.opening_statement)
+  }
+  const handleSaveStatement = (settings: FeaturesConfigForm['opening_statement']) => {
+    form.setFieldValue('opening_statement', settings)
+  }
+
   /** Expose methods to parent component */
   useImperativeHandle(ref, () => ({
     handleOpen,
@@ -103,6 +117,23 @@ const FeaturesConfigModal = forwardRef<FeaturesConfigModalRef, FeaturesConfigMod
         >
           <Flex vertical gap={12}>
             {source !== 'workflow' && <>
+              <div className="rb:relative rb:border rb:border-[#DFE4ED] rb:p-3 rb:rounded-lg rb:bg-[#f5f7fc]">
+                <SwitchFormItem
+                  title={t('application.opening_statement')}
+                  name={['opening_statement', "enabled"]}
+                  desc={values?.opening_statement?.enabled ? undefined : t('application.opening_statement_desc')}
+                />
+                {values?.opening_statement?.enabled && (() => {
+                  const statement = values.opening_statement?.statement
+                  return statement && statement.trim() !== '' ? <>
+                    <div className="rb:bg-white rb:rounded-lg rb:py-1 rb:px-3 rb:mb-1">
+                      {statement}
+                    </div>
+                    <Button block onClick={handleOpenStatementSettings}>{t('application.editOpeningStatement')}</Button>
+                  </> : <Button block onClick={handleOpenStatementSettings}>{t('application.editOpeningStatement')}</Button>
+                })()}
+                <Form.Item name="opening_statement" hidden />
+              </div>
               <div className="rb:relative rb:border rb:border-[#DFE4ED] rb:p-3 rb:rounded-lg rb:bg-[#f5f7fc]">
                 <SwitchFormItem
                   title={t(`memoryConversation.web_search`)}
@@ -117,6 +148,13 @@ const FeaturesConfigModal = forwardRef<FeaturesConfigModalRef, FeaturesConfigMod
                   desc={t('application.text_to_speech_desc')}
                 />
               </div>
+              <div className="rb:relative rb:border rb:border-[#DFE4ED] rb:p-3 rb:rounded-lg rb:bg-[#f5f7fc]">
+                <SwitchFormItem
+                  title={t(`application.citation`)}
+                  name={['citation', "enabled"]}
+                  desc={t('application.citation_desc')}
+                />
+              </div>
             </>}
 
             <div className="rb:relative rb:border rb:border-[#DFE4ED] rb:p-3 rb:rounded-lg rb:bg-[#f5f7fc]">
@@ -129,7 +167,6 @@ const FeaturesConfigModal = forwardRef<FeaturesConfigModalRef, FeaturesConfigMod
                 const fu = values.file_upload
                 // '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]">
@@ -165,6 +202,11 @@ const FeaturesConfigModal = forwardRef<FeaturesConfigModalRef, FeaturesConfigMod
         onSave={handleSaveSettings}
         capability={capability}
       />
+      <OpenStatementSettingModal
+        ref={openStatementSettingModalRef}
+        chatVariables={chatVariables}
+        onSave={handleSaveStatement}
+      />
     </>
   );
 });