feat: fetch conversation and delete chat dialog (#69)

* feat: set chat configuration to backend

* feat: exclude unEnabled variables

* feat: delete chat dialog

* feat: fetch conversation

web/src/pages/chat/chat-configuration-modal/assistant-setting.tsx

@@ -1,15 +1,13 @@
 import { Form, Input, Select } from 'antd';
 
 import classNames from 'classnames';
-import { ISegmentedContentProps } from './interface';
+import { ISegmentedContentProps } from '../interface';
 
 import { useFetchKnowledgeList } from '@/hooks/knowledgeHook';
 import styles from './index.less';
 
-const { Option } = Select;
-
 const AssistantSetting = ({ show }: ISegmentedContentProps) => {
-  const knowledgeList = useFetchKnowledgeList();
+  const knowledgeList = useFetchKnowledgeList(true);
   const knowledgeOptions = knowledgeList.map((x) => ({
     label: x.name,
     value: x.id,

web/src/pages/chat/chat-configuration-modal/constants.ts

@@ -1,7 +0,0 @@
-export const variableEnabledFieldMap = {
-  temperatureEnabled: 'temperature',
-  topPEnabled: 'top_p',
-  presencePenaltyEnabled: 'presence_penalty',
-  frequencyPenaltyEnabled: 'frequency_penalty',
-  maxTokensEnabled: 'max_tokens',
-};

web/src/pages/chat/chat-configuration-modal/index.tsx

@@ -3,13 +3,16 @@ import { IModalManagerChildrenProps } from '@/components/modal-manager';
 import { Divider, Flex, Form, Modal, Segmented } from 'antd';
 import { SegmentedValue } from 'antd/es/segmented';
 import omit from 'lodash/omit';
-import { useRef, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import AssistantSetting from './assistant-setting';
 import ModelSetting from './model-setting';
 import PromptEngine from './prompt-engine';
 
-import { useSetDialog } from '../hooks';
-import { variableEnabledFieldMap } from './constants';
+import { useOneNamespaceEffectsLoading } from '@/hooks/storeHooks';
+import { variableEnabledFieldMap } from '../constants';
+import { useFetchDialog, useResetCurrentDialog, useSetDialog } from '../hooks';
+import { IPromptConfigParameters } from '../interface';
+import { excludeUnEnabledVariables } from '../utils';
 import styles from './index.less';
 
 enum ConfigurationSegmented {
@@ -40,32 +43,46 @@ const validateMessages = {
   },
 };
 
-const ChatConfigurationModal = ({
-  visible,
-  hideModal,
-}: IModalManagerChildrenProps) => {
+interface IProps extends IModalManagerChildrenProps {
+  id: string;
+}
+
+const ChatConfigurationModal = ({ visible, hideModal, id }: IProps) => {
   const [form] = Form.useForm();
   const [value, setValue] = useState<ConfigurationSegmented>(
     ConfigurationSegmented.AssistantSetting,
   );
-  const promptEngineRef = useRef(null);
+  const promptEngineRef = useRef<Array<IPromptConfigParameters>>([]);
+  const loading = useOneNamespaceEffectsLoading('chatModel', ['setDialog']);
 
   const setDialog = useSetDialog();
+  const currentDialog = useFetchDialog(id, visible);
+  const { resetCurrentDialog } = useResetCurrentDialog();
 
   const handleOk = async () => {
     const values = await form.validateFields();
-    const nextValues: any = omit(values, Object.keys(variableEnabledFieldMap));
+    const nextValues: any = omit(values, [
+      ...Object.keys(variableEnabledFieldMap),
+      'parameters',
+      ...excludeUnEnabledVariables(values),
+    ]);
+    const emptyResponse = nextValues.prompt_config?.empty_response ?? '';
     const finalValues = {
+      dialog_id: id,
       ...nextValues,
       prompt_config: {
         ...nextValues.prompt_config,
         parameters: promptEngineRef.current,
+        empty_response: emptyResponse,
       },
     };
     console.info(promptEngineRef.current);
     console.info(nextValues);
     console.info(finalValues);
-    setDialog(finalValues);
+    const retcode: number = await setDialog(finalValues);
+    if (retcode === 0) {
+      hideModal();
+    }
   };
 
   const handleCancel = () => {
@@ -76,6 +93,11 @@ const ChatConfigurationModal = ({
     setValue(val as ConfigurationSegmented);
   };
 
+  const handleModalAfterClose = () => {
+    resetCurrentDialog();
+    form.resetFields();
+  };
+
   const title = (
     <Flex gap={16}>
       <ChatConfigurationAtom></ChatConfigurationAtom>
@@ -89,6 +111,10 @@ const ChatConfigurationModal = ({
     </Flex>
   );
 
+  useEffect(() => {
+    form.setFieldsValue(currentDialog);
+  }, [currentDialog, form]);
+
   return (
     <Modal
       title={title}
@@ -96,6 +122,9 @@ const ChatConfigurationModal = ({
       open={visible}
       onOk={handleOk}
       onCancel={handleCancel}
+      confirmLoading={loading}
+      destroyOnClose
+      afterClose={handleModalAfterClose}
     >
       <Segmented
         size={'large'}

web/src/pages/chat/chat-configuration-modal/interface.ts

@@ -1,14 +0,0 @@
-import { FormInstance } from 'antd';
-
-export interface ISegmentedContentProps {
-  show: boolean;
-  form: FormInstance;
-}
-
-export interface IVariable {
-  temperature: number;
-  top_p: number;
-  frequency_penalty: number;
-  presence_penalty: number;
-  max_tokens: number;
-}

web/src/pages/chat/chat-configuration-modal/model-setting.tsx

@@ -6,10 +6,10 @@ import {
 import { Divider, Flex, Form, InputNumber, Select, Slider, Switch } from 'antd';
 import classNames from 'classnames';
 import { useEffect } from 'react';
-import { ISegmentedContentProps } from './interface';
+import { ISegmentedContentProps } from '../interface';
 
 import { useFetchLlmList, useSelectLlmOptions } from '@/hooks/llmHooks';
-import { variableEnabledFieldMap } from './constants';
+import { variableEnabledFieldMap } from '../constants';
 import styles from './index.less';
 
 const ModelSetting = ({ show, form }: ISegmentedContentProps) => {

web/src/pages/chat/chat-configuration-modal/prompt-engine.tsx

@@ -21,17 +21,16 @@ import {
   useState,
 } from 'react';
 import { v4 as uuid } from 'uuid';
+import {
+  VariableTableDataType as DataType,
+  IPromptConfigParameters,
+  ISegmentedContentProps,
+} from '../interface';
 import { EditableCell, EditableRow } from './editable-cell';
-import { ISegmentedContentProps } from './interface';
 
+import { useSelectPromptConfigParameters } from '../hooks';
 import styles from './index.less';
 
-interface DataType {
-  key: string;
-  variable: string;
-  optional: boolean;
-}
-
 type FieldType = {
   similarity_threshold?: number;
   vector_similarity_weight?: number;
@@ -39,10 +38,11 @@ type FieldType = {
 };
 
 const PromptEngine = (
-  { show, form }: ISegmentedContentProps,
-  ref: ForwardedRef<Array<Omit<DataType, 'variable'>>>,
+  { show }: ISegmentedContentProps,
+  ref: ForwardedRef<Array<IPromptConfigParameters>>,
 ) => {
   const [dataSource, setDataSource] = useState<DataType[]>([]);
+  const parameters = useSelectPromptConfigParameters();
 
   const components = {
     body: {
@@ -99,12 +99,6 @@ const PromptEngine = (
     [dataSource],
   );
 
-  useEffect(() => {
-    form.setFieldValue(['prompt_config', 'parameters'], dataSource);
-    const x = form.getFieldValue(['prompt_config', 'parameters']);
-    console.info(x);
-  }, [dataSource, form]);
-
   const columns: TableProps<DataType>['columns'] = [
     {
       title: 'key',
@@ -146,6 +140,10 @@ const PromptEngine = (
     },
   ];
 
+  useEffect(() => {
+    setDataSource(parameters);
+  }, [parameters]);
+
   return (
     <section
       className={classNames({
@@ -153,7 +151,7 @@ const PromptEngine = (
       })}
     >
       <Form.Item
-        label="Orchestrate"
+        label="System"
         rules={[{ required: true, message: 'Please input!' }]}
         name={['prompt_config', 'system']}
         initialValue={`你是一个智能助手，请总结知识库的内容来回答问题，请列举知识库中的数据详细回答。当所有知识库内容都与问题无关时，你的回答必须包括“知识库中未找到您要的答案！”这句话。回答需要考虑聊天历史。
@@ -161,7 +159,7 @@ const PromptEngine = (
         {knowledge}
         以上是知识库。`}
       >
-        <Input.TextArea autoSize={{ maxRows: 5, minRows: 5 }} />
+        <Input.TextArea autoSize={{ maxRows: 8, minRows: 5 }} />
       </Form.Item>
       <Divider></Divider>
       <SimilaritySlider></SimilaritySlider>