feat(web): agent feature add config

2026-03-26 14:18:40 +08:00
parent 4cab6317de
commit 9ae1d2f0d9
13 changed files with 428 additions and 61 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-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}
+      />
    </>
  );
 });
--- a/web/src/views/ApplicationConfig/components/FeaturesConfig/OpenStatementSettingModal.tsx
+++ b/web/src/views/ApplicationConfig/components/FeaturesConfig/OpenStatementSettingModal.tsx
@@ -0,0 +1,125 @@
+/*
+ * @Author: ZhaoYing 
+ * @Date: 2026-03-05 
+ * @Last Modified by: ZhaoYing
+ * @Last Modified time: 2026-03-26 14:12:11
+ */
+import { forwardRef, useImperativeHandle, useState } from 'react';
+import { Button, Form, Input, Flex, App } from 'antd';
+import { useTranslation } from 'react-i18next';
+
+import RbModal from '@/components/RbModal';
+import type { FeaturesConfigForm } from '../../types'
+import type { Variable } from '../VariableList/types'
+import Tag from '@/components/Tag'
+
+export interface OpenStatementSettingModalRef {
+  handleOpen: (values?: FeaturesConfigForm['opening_statement']) => void;
+  handleClose: () => void;
+}
+
+interface OpenStatementSettingModalProps {
+  onSave: (values: FeaturesConfigForm['opening_statement']) => void;
+  chatVariables?: Variable[];
+}
+
+const OpenStatementSettingModal = forwardRef<OpenStatementSettingModalRef, OpenStatementSettingModalProps>(({
+  onSave,
+  chatVariables = []
+}, ref) => {
+  const { t } = useTranslation();
+  const { modal } = App.useApp()
+  const [visible, setVisible] = useState(false);
+  const [form] = Form.useForm<FeaturesConfigForm['opening_statement']>();
+
+  const handleClose = () => {
+    setVisible(false);
+    form.resetFields();
+  };
+
+  const handleOpen = (values?: FeaturesConfigForm['opening_statement']) => {
+    setVisible(true);
+    form.setFieldsValue(values || {});
+  };
+
+  const handleSave = async () => {
+    form.validateFields().then(values => {
+      if (values?.enabled && values?.statement && values?.statement?.trim() !== '') {
+        const usedVars = [...new Set([...values.statement?.matchAll(/\{\{(\w+)\}\}/g)].map(m => m[1]))]
+
+        const validNames = new Set(chatVariables.map(v => v.name))
+        const invalid = usedVars.filter(v => !validNames.has(v))
+        console.log('invalid', invalid)
+        if (invalid.length > 0) {
+          modal.confirm({
+            title: t('application.invalidVariablesTitle'),
+            content: invalid.map((vo, index) => <Tag key={index}>{'{{'}{vo}{'}}'}</Tag>),
+            okText: t('common.confirm'),
+            cancelText: t('common.cancel'),
+            onOk: () => {
+              onSave(values);
+              handleClose();
+            },
+          })
+        } else {
+          onSave(values);
+          handleClose();
+        }
+      }
+    });
+  };
+
+  useImperativeHandle(ref, () => ({
+    handleOpen,
+    handleClose
+  }));
+
+  return (
+    <RbModal
+      title={t('application.settings')}
+      open={visible}
+      onCancel={handleClose}
+      onOk={handleSave}
+    >
+      <Form form={form} layout="vertical">
+        <Form.Item name="enabled" hidden />
+        <Form.Item
+          label={t('application.opening_statement')}
+          name="statement"
+        >
+          <Input.TextArea
+            placeholder={t('common.pleaseEnter')}
+          />  
+        </Form.Item>
+
+        <Form.List name="suggested_questions">
+          {(fields, { add, remove }) => (
+            <Form.Item label={t('application.suggested_questions')}>
+              <Flex vertical gap={4}>
+              {fields.map((field, index) => (
+                <Flex key={field.key} align="center" justify="space-between" gap={4}>
+                  <Form.Item name={field.name} noStyle>
+                    <Input
+                      placeholder={t('common.pleaseEnter')}
+                    />
+                  </Form.Item>
+                  <div
+                    className="rb:size-4 rb:cursor-pointer rb:bg-cover rb:bg-[url('@/assets/images/workflow/deleteBg.svg')] rb:hover:bg-[url('@/assets/images/workflow/deleteBg_hover.svg')]"
+                    onClick={() => remove(index)}
+                  ></div>
+                </Flex>
+              ))}
+              <Button type="dashed" block onClick={() => add()}>
+                + {t('common.addOption')}
+              </Button>
+              </Flex>
+            </Form.Item>
+          )}
+        </Form.List>
+
+      </Form>
+    </RbModal>
+  );
+});
+
+export default OpenStatementSettingModal;
--- a/web/src/views/ApplicationConfig/components/FeaturesConfig/index.tsx
+++ b/web/src/views/ApplicationConfig/components/FeaturesConfig/index.tsx
@@ -12,6 +12,7 @@ import FeaturesConfigModal from './FeaturesConfigModal'
 import type { FeaturesConfigModalRef, FeaturesConfigForm } from '../../types'
 import type { Application } from '@/views/ApplicationManagement/types';
 import type { Capability } from '@/views/ModelManagement/types'
+import type { Variable } from '../VariableList/types'

 /** Props for the FeaturesConfig component */
 interface FeaturesConfigProps {
@@ -21,13 +22,15 @@ interface FeaturesConfigProps {
  refresh: (value: FeaturesConfigForm) => void;
  source?: Application['type'];
  capability?: Capability[];
+  chatVariables: Variable[];
 }

 const FeaturesConfig: FC<FeaturesConfigProps> = ({
  value,
  refresh,
  source,
-  capability
+  capability,
+  chatVariables
 }) => {
  const { t } = useTranslation();
  // Ref used to imperatively open the config modal
@@ -50,6 +53,7 @@ const FeaturesConfig: FC<FeaturesConfigProps> = ({
        refresh={refresh}
        source={source}
        capability={capability}
+        chatVariables={chatVariables}
      />
    </>
  )