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/constants/chat.ts

@@ -0,0 +1,4 @@
+export enum MessageType {
+  Assistant = 'assistant',
+  User = 'user',
+}

web/src/hooks/commonHooks.ts

@@ -0,0 +1,34 @@
+import isEqual from 'lodash/isEqual';
+import { useEffect, useRef, useState } from 'react';
+
+export const useSetModalState = () => {
+  const [visible, setVisible] = useState(false);
+
+  const showModal = () => {
+    setVisible(true);
+  };
+  const hideModal = () => {
+    setVisible(false);
+  };
+
+  return { visible, showModal, hideModal };
+};
+
+export const useDeepCompareEffect = (
+  effect: React.EffectCallback,
+  deps: React.DependencyList,
+) => {
+  const ref = useRef<React.DependencyList>();
+  let callback: ReturnType<React.EffectCallback> = () => {};
+  if (!isEqual(deps, ref.current)) {
+    callback = effect();
+    ref.current = deps;
+  }
+  useEffect(() => {
+    return () => {
+      if (callback) {
+        callback();
+      }
+    };
+  }, []);
+};

web/src/hooks/knowledgeHook.ts

@@ -125,11 +125,18 @@ export const useFetchKnowledgeBaseConfiguration = () => {
   }, [fetchKnowledgeBaseConfiguration]);
 };
 
-export const useFetchKnowledgeList = (): IKnowledge[] => {
+export const useFetchKnowledgeList = (
+  shouldFilterListWithoutDocument: boolean = false,
+): IKnowledge[] => {
   const dispatch = useDispatch();
 
   const knowledgeModel = useSelector((state: any) => state.knowledgeModel);
   const { data = [] } = knowledgeModel;
+  const list = useMemo(() => {
+    return shouldFilterListWithoutDocument
+      ? data.filter((x: IKnowledge) => x.doc_num > 0)
+      : data;
+  }, [data, shouldFilterListWithoutDocument]);
 
   const fetchList = useCallback(() => {
     dispatch({
@@ -141,5 +148,5 @@ export const useFetchKnowledgeList = (): IKnowledge[] => {
     fetchList();
   }, [fetchList]);
 
-  return data;
+  return list;
 };

web/src/interfaces/database/chat.ts

@@ -1,3 +1,5 @@
+import { MessageType } from '@/constants/chat';
+
 export interface PromptConfig {
   empty_response: string;
   parameters: Parameter[];
@@ -45,3 +47,20 @@ export interface IDialog {
   update_date: string;
   update_time: number;
 }
+
+export interface IConversation {
+  create_date: string;
+  create_time: number;
+  dialog_id: string;
+  id: string;
+  message: Message[];
+  reference: any[];
+  name: string;
+  update_date: string;
+  update_time: number;
+}
+
+export interface Message {
+  content: string;
+  role: MessageType;
+}

web/src/pages/add-knowledge/components/knowledge-file/parsing-status-cell/index.tsx

@@ -75,9 +75,7 @@ export const ParsingStatusCell = ({ record }: IProps) => {
 
   return (
     <Flex justify={'space-between'}>
-      <Popover
-        content={isRunning && <PopoverContent record={record}></PopoverContent>}
-      >
+      <Popover content={<PopoverContent record={record}></PopoverContent>}>
         <Tag color={runningStatus.color}>
           {isRunning ? (
             <Space>

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/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,13 +111,20 @@ const ChatConfigurationModal = ({
     </Flex>
   );
 
+  useEffect(() => {
+    form.setFieldsValue(currentDialog);
+  }, [currentDialog, form]);
+
   return (
     <Modal
       title={title}
       width={688}
       open={visible}
       onOk={handleOk}
       onCancel={handleCancel}
+      confirmLoading={loading}
+      destroyOnClose
+      afterClose={handleModalAfterClose}
     >
       <Segmented
         size={'large'}

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,28 +21,28 @@ 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;
   top_n?: number;
 };
 
 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,22 +140,26 @@ const PromptEngine = (
     },
   ];
 
+  useEffect(() => {
+    setDataSource(parameters);
+  }, [parameters]);
+
   return (
     <section
       className={classNames({
         [styles.segmentedHidden]: !show,
       })}
     >
       <Form.Item
-        label="Orchestrate"
+        label="System"
         rules={[{ required: true, message: 'Please input!' }]}
         name={['prompt_config', 'system']}
         initialValue={`你是一个智能助手，请总结知识库的内容来回答问题，请列举知识库中的数据详细回答。当所有知识库内容都与问题无关时，你的回答必须包括“知识库中未找到您要的答案！”这句话。回答需要考虑聊天历史。
         以下是知识库：
         {knowledge}
         以上是知识库。`}
       >
-        <Input.TextArea autoSize={{ maxRows: 5, minRows: 5 }} />
+        <Input.TextArea autoSize={{ maxRows: 8, minRows: 5 }} />
       </Form.Item>
       <Divider></Divider>
       <SimilaritySlider></SimilaritySlider>

web/src/pages/chat/chat-container/index.less

@@ -1,3 +1,18 @@
 .chatContainer {
   padding: 0 24px 24px;
 }
+
+.messageItem {
+  .messageItemContent {
+    display: inline-block;
+    width: 300px;
+  }
+}
+
+.messageItemLeft {
+  text-align: left;
+}
+
+.messageItemRight {
+  text-align: right;
+}