@gientech/modual 1.2.8 → 1.2.9-fix

package/src/modules/assistantConfig/index.tsx

@@ -0,0 +1,700 @@
+import React, { useState, useMemo, useEffect, useRef } from 'react';
+import { Form, Input, Select, Checkbox, Switch, Row, Col, message, Button } from 'antd';
+import { ArrowLeft } from 'lucide-react';
+import Paragraph from './components/Paragraph';
+import NotFoundContent from './components/NotFoundContent';
+import { Styles } from '@mxmweb/zui';
+import { CustomComponents } from '@mxmweb/xviewer';
+import {
+  EXPLANATION_PROMPT,
+  EXPLANATION_DEPENDON_KB,
+  DEFAULT_PROMPT,
+  SearchPolicyOptions,
+  ASSISTANT_MIN_MAX,
+  ASSISTANT_DEFAULT,
+  TraceabilityStrategy,
+} from './constants';
+import AxiosInstance from './server';
+import SensitiveSection from './components/Sensitive';
+import KnowledgeSection from './components/Knowledge';
+import DatabaseSection from './components/Database';
+import GraphSection from './components/Graph';
+import ParamsItem from './components/ParamsItem';
+
+import '@mxmweb/zui/style.css';
+
+const { Item } = Form;
+
+interface ConversationAssistantProps {
+  url?: string;
+  token?: string;
+  role?: string;
+  id?: string;
+  showDatabase: boolean;
+  showGraph: boolean;
+  isShare?: boolean;
+  styles?: Styles;
+  disabled?: boolean;
+  CustomComponents?: CustomComponents;
+  eventsEmit?: (name: string, data?: any) => void;
+}
+
+const ConversationAssistant: React.FC<ConversationAssistantProps> = ({
+  url,
+  token,
+  role,
+  id,
+  showDatabase = true,
+  showGraph,
+  isShare,
+  disabled, //查看时，不可修改
+  eventsEmit,
+  CustomComponents,
+}) => {
+  const { ContentLoading } = CustomComponents;
+  const [form] = Form.useForm();
+  const [configData, setConfigData]: any = useState();
+  const [modelList, setModelList]: any = useState();
+  const [rerankOptions, setRerankOptions]: any = useState();
+  const [multiModelOptions, setMultiModalOptions]: any = useState();
+  const [loading, setLoading] = useState(true);
+  const [btnLoading, seBtntLoading] = useState(false);
+  const [configScale, setConfigScale] = useState(ASSISTANT_MIN_MAX);
+
+  const resourceBindData = useRef<{
+    knowledge_base_name?: string;
+    knowledge_base_name_source?: string;
+    selectedKnowledgeBase?: any[];
+    sensitiveWordIds?: string;
+    database_name?: any[];
+    graph_nb_name?: any[];
+  }>({});
+
+  const {
+    getConfigById,
+    fetchModels,
+    fetchConfigItemLimit,
+    checkName,
+    addConversationAssistant,
+    updateConversationAssistant,
+    fetchSensitiveLibrary,
+  } = AxiosInstance({
+    url,
+    token,
+    role,
+    eventsEmit,
+  });
+
+  useEffect(() => {
+    init();
+  }, [id]);
+
+  useEffect(() => {
+    if (id) {
+      //编辑的话，只有模型列表返回为空才需要校验
+      if (Array.isArray(modelList) && Array.isArray(rerankOptions)) {
+        form.validateFields([
+          'model_name',
+          'plan_model_name',
+          'recommend_model_name',
+          'rerank_model_name',
+          'multi_model_name',
+        ]);
+      }
+      if (Array.isArray(multiModelOptions)) {
+        form.validateFields(['multi_model_name']);
+      }
+    } else {
+      //新增的话，只有模型列表返回为空才需要校验
+      if (Array.isArray(modelList) && modelList?.length == 0) {
+        form.validateFields(['model_name', 'plan_model_name', 'recommend_model_name']);
+      }
+
+      if (Array.isArray(rerankOptions) && rerankOptions?.length == 0) {
+        form.validateFields(['rerank_model_name']);
+      }
+      if (Array.isArray(multiModelOptions) && multiModelOptions?.length == 0) {
+        form.validateFields(['multi_model_name']);
+      }
+    }
+  }, [rerankOptions, modelList, multiModelOptions, id]);
+
+  // 初始化数据
+  const init = async () => {
+    let _configData;
+    if (id) {
+      if (!loading) setLoading(true);
+      try {
+        const res = await getConfigById(id);
+        if (res) {
+          const { configJson, ...rest } = res;
+          const config = configJson && JSON.parse(configJson);
+          const {
+            knowledge_base_name,
+            knowledge_base_name_source,
+            selectedKnowledgeBase,
+            sensitiveWordIds,
+            database_name,
+            graph_nb_name,
+          } = config;
+          _configData = {
+            ...rest,
+            ...config,
+          };
+
+          resourceBindData.current = {
+            knowledge_base_name,
+            knowledge_base_name_source,
+            selectedKnowledgeBase,
+            sensitiveWordIds,
+            database_name,
+            graph_nb_name,
+          };
+
+          setConfigData(_configData);
+          form.setFieldsValue(_configData);
+          setLoading(false);
+        }
+      } catch (e) {}
+    } else {
+      setLoading(false);
+    }
+
+    await fetchList(_configData);
+  };
+
+  const fetchList = async (configData?: any) => {
+    try {
+      const [modelRes, recallModelRes, multiModelRes, configItemLimitRes] =
+        await Promise.allSettled([
+          fetchModels({
+            pageNum: 1,
+            pageSize: 9999,
+            status: 1,
+            type: 1,
+          }),
+          fetchModels({
+            pageNum: 1,
+            pageSize: 9999,
+            status: 1,
+            type: 3,
+          }),
+          fetchModels({
+            pageNum: 1,
+            pageSize: 9999,
+            status: 1,
+            type: 4,
+          }),
+          fetchConfigItemLimit(),
+        ]);
+      if (modelRes.status === 'fulfilled' && modelRes.value) {
+        const list = modelRes.value?.records || [];
+        const options = list.map((item: any) => ({
+          ...item,
+          label: item.modelName,
+          value: item.modelName,
+        }));
+        setModelList(options);
+      }
+
+      if (recallModelRes.status === 'fulfilled' && recallModelRes.value) {
+        const options = (recallModelRes.value?.records || []).map((item: any) => ({
+          label: item.modelName || item.name,
+          value: item.modelName || item.name,
+        }));
+        setRerankOptions(options);
+        if (options.length > 0) {
+          !configData?.rerank_model_name &&
+            form.setFieldsValue({ rerank_model_name: options[0].value });
+        }
+      }
+      if (multiModelRes.status === 'fulfilled' && multiModelRes.value) {
+        const options = (multiModelRes.value?.records || []).map((item: any) => ({
+          label: item.modelName || item.name,
+          value: item.modelName || item.name,
+        }));
+        setMultiModalOptions(options);
+        if (options.length > 0) {
+          !configData?.multi_model_name &&
+            form.setFieldsValue({ multi_model_name: options[0].value });
+        }
+      }
+      if (configItemLimitRes.status === 'fulfilled' && configItemLimitRes.value) {
+        if (configItemLimitRes.value) {
+          const config = configItemLimitRes.value;
+
+          Object.keys(ASSISTANT_MIN_MAX).forEach(key => {
+            if (config.hasOwnProperty(key)) {
+              const { max, min } = config[key];
+              ASSISTANT_MIN_MAX[key] = {
+                ...ASSISTANT_MIN_MAX[key],
+                min,
+                max,
+              };
+            }
+          });
+          setConfigScale(ASSISTANT_MIN_MAX);
+        }
+      }
+    } catch (e) {
+      console.error('获取列表失败:', e);
+    }
+  };
+
+  const checkConfigName = async (_, value: any) => {
+    const res = await checkName(value, id);
+    if (res) {
+      message.warning('名称重复！', 2);
+      return Promise.reject('名称重复');
+    }
+    return Promise.resolve();
+  };
+
+  const validateModel = (options: any[], msg: string) => ({
+    validator(_: any, value: any) {
+      if (!value) {
+        if (Array.isArray(options) && options.length === 0) {
+          return Promise.reject('暂无可用模型，请联系管理员');
+        } else {
+          return Promise.reject(msg);
+        }
+      }
+      if (
+        (Array.isArray(options) && options.length === 0) ||
+        !options.find((m: any) => m.value == value)
+      ) {
+        return Promise.reject('模型无法使用，请联系管理员');
+      }
+      return Promise.resolve();
+    },
+  });
+
+  const handleEventsEmit = (name: string, data?: any) => {
+    console.log('++++助手配置', name, data);
+    switch (name) {
+      case 'knowledge_selected':
+        resourceBindData.current = {
+          ...resourceBindData.current,
+          ...data,
+        };
+        break;
+      case 'sensitive_selected':
+        resourceBindData.current = {
+          ...resourceBindData.current,
+          sensitiveWordIds: data,
+        };
+        break;
+      case 'database_selected':
+        resourceBindData.current = {
+          ...resourceBindData.current,
+          database_name: data,
+        };
+        break;
+      case 'graph_selected':
+        resourceBindData.current = {
+          ...resourceBindData.current,
+          graph_nb_name: data,
+        };
+        break;
+    }
+  };
+
+  const handleSubmit = async () => {
+    let params = {};
+    try {
+      seBtntLoading(true);
+      const data = await form.validateFields();
+      const {
+        knowledge_base_name,
+        knowledge_base_name_source,
+        selectedKnowledgeBase,
+        sensitiveWordIds,
+        database_name,
+        graph_nb_name,
+      } = resourceBindData.current;
+      data.thinking =
+        (modelList.find((item: any) => item.modelName == data.config_name) as any)?.thinking ||
+        false;
+
+      const configJson = JSON.stringify({
+        ...data,
+        knowledge_base_name,
+        knowledge_base_name_source,
+        selectedKnowledgeBase,
+        sensitiveWordIds,
+        ...(showDatabase ? { database_name } : {}),
+        ...(showGraph ? { graph_nb_name } : {}),
+      });
+
+      params = {
+        configJson,
+        name: data.config_name,
+        isDefault: data.isDefault,
+        defaultAnswer: data.defaultAnswer,
+        dependOnKb: data.dependOnKb,
+      };
+      if (id) {
+        const res = await updateConversationAssistant(id, params);
+        if (res) {
+          message.success('更新助手配置成功');
+          eventsEmit && eventsEmit('go_back');
+        }
+      } else {
+        const res = await addConversationAssistant(params);
+        if (res) {
+          message.success('新增助手配置成功');
+          eventsEmit && eventsEmit('go_back');
+        }
+      }
+    } catch (e) {
+      console.error('submit error', e);
+    } finally {
+      seBtntLoading(false);
+    }
+  };
+
+  const formInitialValue = useMemo(() => {
+    // 获取 检索与生成参数(ASSISTANT_MIN_MAX) 和 功能开关的初始值(ASSISTANT_DEFAULT)
+    const _default: any = {};
+    Object.keys(ASSISTANT_MIN_MAX).forEach(key => {
+      _default[key] = ASSISTANT_MIN_MAX[key]?.default;
+    });
+    return {
+      ...ASSISTANT_DEFAULT,
+      ..._default,
+    };
+  }, []);
+
+  return (
+    <div
+      style={{
+        height: '100%',
+        width: '100%',
+      }}
+    >
+      <div
+        className="flex items-center justify-between"
+        style={{
+          width: '100%',
+          padding: '4px 10px 16px 10px',
+        }}
+      >
+        <div className="flex items-center">
+          <ArrowLeft color="#2468F2" onClick={() => eventsEmit && eventsEmit('go_back')} />
+          <div
+            className="text-[16px] text-[#1D2129] bold"
+            style={{
+              marginLeft: 20,
+            }}
+          >
+            {id ? '编辑会话助手' : '新建会话助手'}
+          </div>
+        </div>
+        {!loading && (
+          <Button
+            type="primary"
+            onClick={() => handleSubmit()}
+            loading={btnLoading}
+            disabled={disabled}
+            style={{
+              backgroundColor: '#055aff',
+            }}
+          >
+            确定
+          </Button>
+        )}
+      </div>
+
+      {loading || false ? (
+        ContentLoading && <ContentLoading />
+      ) : (
+        <Form
+          style={{
+            padding: 20,
+            height: 'calc(100vh - 150px)',
+            backgroundColor: '#fff',
+          }}
+          form={form}
+          layout="vertical"
+          initialValues={formInitialValue}
+          disabled={disabled}
+        >
+          <Row
+            gutter={24}
+            style={{
+              height: '100%',
+            }}
+          >
+            <Col
+              span={12}
+              style={{
+                borderRight: '1px solid #E5E6EB',
+                padding: '10px 32px',
+                height: '100%',
+                overflowY: 'auto',
+              }}
+            >
+              <Item
+                label="助手名称"
+                name="config_name"
+                validateTrigger="onBlur"
+                rules={[
+                  { required: true, message: '请输入助手名称' },
+                  {
+                    validator: checkConfigName,
+                  },
+                ]}
+              >
+                <Input placeholder="请输入" />
+              </Item>
+
+              <Row gutter={16}>
+                <Col span={12}>
+                  <Item
+                    label="问答模型"
+                    name="model_name"
+                    rules={[
+                      { required: true, message: '' },
+                      validateModel(modelList, '请选择问答模型'),
+                    ]}
+                  >
+                    <Select
+                      placeholder="请选择"
+                      options={modelList}
+                      notFoundContent={<NotFoundContent />}
+                    />
+                  </Item>
+                </Col>
+                <Col span={12}>
+                  <Item
+                    label="规划模型"
+                    name="plan_model_name"
+                    rules={[
+                      { required: true, message: '' },
+                      validateModel(modelList, '请选择规划模型'),
+                    ]}
+                  >
+                    <Select
+                      placeholder="请选择"
+                      options={modelList}
+                      notFoundContent={<NotFoundContent />}
+                    />
+                  </Item>
+                </Col>
+              </Row>
+              <Row gutter={16}>
+                <Col span={12}>
+                  <Item
+                    label="上传文档问答多模态模型"
+                    name="multi_model_name"
+                    rules={[
+                      { required: true, message: '' },
+                      validateModel(multiModelOptions, '请选择上传文档问答多模态模型模型'),
+                    ]}
+                  >
+                    <Select
+                      placeholder="请选择"
+                      options={multiModelOptions}
+                      notFoundContent={<NotFoundContent />}
+                    />
+                  </Item>
+                </Col>
+                <Col span={12}>
+                  <Item
+                    label="Rerank模型"
+                    name="rerank_model_name"
+                    rules={[
+                      { required: true, message: '' },
+                      validateModel(rerankOptions, '请选择Rerank模型'),
+                    ]}
+                  >
+                    <Select
+                      placeholder="请选择"
+                      options={rerankOptions}
+                      notFoundContent={<NotFoundContent />}
+                    />
+                  </Item>
+                </Col>
+              </Row>
+
+              <Item label="开场白" name="prologue">
+                <Input.TextArea
+                  maxLength={50}
+                  showCount
+                  placeholder="请输入开场白"
+                  autoSize={{ minRows: 2 }}
+                />
+              </Item>
+
+              <Item label="提示词" name="system_prompt" tooltip={EXPLANATION_PROMPT}>
+                <Input.TextArea
+                  showCount
+                  rows={8}
+                  maxLength={3000}
+                  autoSize={{ minRows: 10 }}
+                  placeholder={`例如：${DEFAULT_PROMPT}`}
+                />
+              </Item>
+
+              <Item
+                name="isDefault"
+                valuePropName="checked"
+                normalize={value => (value === true ? 1 : value)}
+              >
+                <Checkbox>选择为默认助手</Checkbox>
+              </Item>
+            </Col>
+            <Col
+              span={12}
+              style={{
+                height: '100%',
+                padding: '10px 32px',
+                overflowY: 'auto',
+              }}
+            >
+              <Paragraph title="检索与生成参数">
+                <Item
+                  label="问题推荐模型"
+                  name="recommend_model_name"
+                  rules={[
+                    { required: true, message: '' },
+                    validateModel(modelList, '请选择问题推荐模型'),
+                  ]}
+                >
+                  <Select
+                    placeholder="请选择"
+                    options={modelList}
+                    notFoundContent={<NotFoundContent />}
+                  />
+                </Item>
+
+                <Item label="检索策略" name="search_policy">
+                  <Select options={SearchPolicyOptions} placeholder="请选择" />
+                </Item>
+
+                <Row gutter={16}>
+                  <ParamsItem label="温度" name="temperature" configScale={configScale} />
+                  <ParamsItem label="多样性" name="top_p" configScale={configScale} />
+                </Row>
+
+                <Row gutter={16}>
+                  <ParamsItem label="召回数" name="top_k" configScale={configScale} />
+                  <ParamsItem label="相似度阈值" name="score_threshold" configScale={configScale} />
+                </Row>
+                <Row gutter={16}>
+                  <ParamsItem label="最大令牌数" name="max_tokens" configScale={configScale} />
+                  <ParamsItem label="上下文最大轮数" name="max_round" configScale={configScale} />
+                </Row>
+              </Paragraph>
+              <Paragraph title="功能开关">
+                <Item
+                  label="开启FAQ优先"
+                  name="enabled_faq"
+                  valuePropName="checked"
+                  layout="horizontal"
+                >
+                  <Switch />
+                </Item>
+                <Item
+                  label="启用图谱增强"
+                  name="enabled_graph"
+                  valuePropName="checked"
+                  layout="horizontal"
+                >
+                  <Switch />
+                </Item>
+                <Item
+                  label="开启强企业知识依赖"
+                  name="dependOnKb"
+                  valuePropName="checked"
+                  layout="horizontal"
+                  tooltip={EXPLANATION_DEPENDON_KB}
+                  normalize={value => (value === true ? 1 : value)}
+                >
+                  <Switch />
+                </Item>
+                <Item
+                  label="开启问题改写"
+                  name="enabled_question_rewrite"
+                  valuePropName="checked"
+                  layout="horizontal"
+                >
+                  <Switch />
+                </Item>
+                <Item
+                  label="开启溯源"
+                  name="need_trace_source"
+                  valuePropName="checked"
+                  layout="horizontal"
+                >
+                  <Switch />
+                </Item>
+                <Item
+                  noStyle
+                  shouldUpdate={(prev, cur) => prev.need_trace_source !== cur.need_trace_source}
+                >
+                  {({ getFieldValue }) =>
+                    getFieldValue('need_trace_source') ? (
+                      <>
+                        <Item label="溯源策略" name="trace_by_llm" layout="horizontal">
+                          <Select placeholder="请选择" options={TraceabilityStrategy} />
+                        </Item>
+                        <Item name="is_download" valuePropName="checked" layout="horizontal">
+                          <Checkbox>允许下载溯源文件</Checkbox>
+                        </Item>
+                      </>
+                    ) : null
+                  }
+                </Item>
+              </Paragraph>
+              <Paragraph title="资源绑定">
+                <SensitiveSection
+                  url={url}
+                  token={token}
+                  role={role}
+                  sectionData={configData?.sensitiveWordIds}
+                  eventsEmit={handleEventsEmit}
+                  // getList={fetchSensitiveLibrary}
+                />
+                <KnowledgeSection
+                  url={url}
+                  token={token}
+                  role={role}
+                  sectionData={{
+                    knowledge_base_name: configData?.knowledge_base_name,
+                    knowledge_base_name_source: configData?.knowledge_base_name_source,
+                    selectedKnowledgeBase: configData?.selectedKnowledgeBase,
+                  }}
+                  createBy={isShare ? configData?.createBy : undefined}
+                  eventsEmit={handleEventsEmit}
+                />
+
+                {showDatabase && (
+                  <DatabaseSection
+                    url={url}
+                    token={token}
+                    role={role}
+                    disabled={disabled}
+                    sectionData={configData?.database_name}
+                    eventsEmit={handleEventsEmit}
+                  />
+                )}
+                {showGraph && (
+                  <GraphSection
+                    url={url}
+                    token={token}
+                    role={role}
+                    sectionData={configData?.graph_nb_name}
+                    eventsEmit={handleEventsEmit}
+                  />
+                )}
+              </Paragraph>
+            </Col>
+          </Row>
+        </Form>
+      )}
+    </div>
+  );
+};
+
+export default ConversationAssistant;