feat: rename conversation and delete conversation and preview reference image and fetch file thumbnails

web/src/components/rename-modal/index.tsx

@@ -0,0 +1,78 @@
+import { Form, Input, Modal } from 'antd';
+import { useEffect } from 'react';
+import { IModalManagerChildrenProps } from '../modal-manager';
+
+interface IProps extends Omit<IModalManagerChildrenProps, 'showModal'> {
+  loading: boolean;
+  initialName: string;
+  onOk: (name: string) => void;
+  showModal?(): void;
+}
+
+const RenameModal = ({
+  visible,
+  hideModal,
+  loading,
+  initialName,
+  onOk,
+}: IProps) => {
+  const [form] = Form.useForm();
+
+  type FieldType = {
+    name?: string;
+  };
+
+  const handleOk = async () => {
+    const ret = await form.validateFields();
+
+    return onOk(ret.name);
+  };
+
+  const handleCancel = () => {
+    hideModal();
+  };
+
+  const onFinish = (values: any) => {
+    console.log('Success:', values);
+  };
+
+  const onFinishFailed = (errorInfo: any) => {
+    console.log('Failed:', errorInfo);
+  };
+
+  useEffect(() => {
+    form.setFieldValue('name', initialName);
+  }, [initialName, form]);
+
+  return (
+    <Modal
+      title="Rename"
+      open={visible}
+      onOk={handleOk}
+      onCancel={handleCancel}
+      okButtonProps={{ loading }}
+      confirmLoading={loading}
+    >
+      <Form
+        name="basic"
+        labelCol={{ span: 4 }}
+        wrapperCol={{ span: 20 }}
+        style={{ maxWidth: 600 }}
+        onFinish={onFinish}
+        onFinishFailed={onFinishFailed}
+        autoComplete="off"
+        form={form}
+      >
+        <Form.Item<FieldType>
+          label="Name"
+          name="name"
+          rules={[{ required: true, message: 'Please input name!' }]}
+        >
+          <Input />
+        </Form.Item>
+      </Form>
+    </Modal>
+  );
+};
+
+export default RenameModal;

web/src/hooks/knowledgeHook.ts

@@ -150,3 +150,34 @@ export const useFetchKnowledgeList = (
 
   return list;
 };
+
+export const useSelectFileThumbnails = () => {
+  const fileThumbnails: Record<string, string> = useSelector(
+    (state: any) => state.kFModel.fileThumbnails,
+  );
+
+  return fileThumbnails;
+};
+
+export const useFetchFileThumbnails = (docIds?: Array<string>) => {
+  const dispatch = useDispatch();
+  const fileThumbnails = useSelectFileThumbnails();
+
+  const fetchFileThumbnails = useCallback(
+    (docIds: Array<string>) => {
+      dispatch({
+        type: 'kFModel/fetch_document_thumbnails',
+        payload: { doc_ids: docIds.join(',') },
+      });
+    },
+    [dispatch],
+  );
+
+  useEffect(() => {
+    if (docIds) {
+      fetchFileThumbnails(docIds);
+    }
+  }, [docIds, fetchFileThumbnails]);
+
+  return { fileThumbnails, fetchFileThumbnails };
+};

web/src/pages/add-knowledge/components/knowledge-file/index.less

@@ -20,9 +20,11 @@
 }
 
 .img {
-  height: 16px;
-  width: 16px;
-  margin-right: 6px;
+  height: 24px;
+  width: 24px;
+  margin-right: 10px;
+  display: inline-block;
+  vertical-align: middle;
 }
 
 .column {

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

@@ -22,7 +22,7 @@ import {
 } from 'antd';
 import type { ColumnsType } from 'antd/es/table';
 import { PaginationProps } from 'antd/lib';
-import React, { useEffect, useMemo, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { Link, useDispatch, useNavigate, useSelector } from 'umi';
 import CreateEPModal from './createEFileModal';
 import styles from './index.less';
@@ -46,7 +46,7 @@ const KnowledgeFile = () => {
   const [parser_id, setParserId] = useState('0');
   let navigate = useNavigate();
 
-  const getKfList = () => {
+  const getKfList = useCallback(() => {
     const payload = {
       kb_id: knowledgeBaseId,
     };
@@ -55,7 +55,7 @@ const KnowledgeFile = () => {
       type: 'kFModel/getKfList',
       payload,
     });
-  };
+  }, [dispatch, knowledgeBaseId]);
 
   const throttledGetDocumentList = () => {
     dispatch({
@@ -64,23 +64,29 @@ const KnowledgeFile = () => {
     });
   };
 
-  const setPagination = (pageNumber = 1, pageSize?: number) => {
-    const pagination: Pagination = {
-      current: pageNumber,
-    } as Pagination;
-    if (pageSize) {
-      pagination.pageSize = pageSize;
-    }
-    dispatch({
-      type: 'kFModel/setPagination',
-      payload: pagination,
-    });
-  };
+  const setPagination = useCallback(
+    (pageNumber = 1, pageSize?: number) => {
+      const pagination: Pagination = {
+        current: pageNumber,
+      } as Pagination;
+      if (pageSize) {
+        pagination.pageSize = pageSize;
+      }
+      dispatch({
+        type: 'kFModel/setPagination',
+        payload: pagination,
+      });
+    },
+    [dispatch],
+  );
 
-  const onPageChange: PaginationProps['onChange'] = (pageNumber, pageSize) => {
-    setPagination(pageNumber, pageSize);
-    getKfList();
-  };
+  const onPageChange: PaginationProps['onChange'] = useCallback(
+    (pageNumber: number, pageSize: number) => {
+      setPagination(pageNumber, pageSize);
+      getKfList();
+    },
+    [getKfList, setPagination],
+  );
 
   const pagination: PaginationProps = useMemo(() => {
     return {
@@ -92,7 +98,7 @@ const KnowledgeFile = () => {
       pageSizeOptions: [1, 2, 10, 20, 50, 100],
       onChange: onPageChange,
     };
-  }, [total, kFModel.pagination]);
+  }, [total, kFModel.pagination, onPageChange]);
 
   useEffect(() => {
     if (knowledgeBaseId) {
@@ -107,7 +113,7 @@ const KnowledgeFile = () => {
         type: 'kFModel/pollGetDocumentList-stop',
       });
     };
-  }, [knowledgeBaseId]);
+  }, [knowledgeBaseId, dispatch, getKfList]);
 
   const handleInputChange = (
     e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>,
@@ -129,14 +135,14 @@ const KnowledgeFile = () => {
     });
   };
 
-  const showCEFModal = () => {
+  const showCEFModal = useCallback(() => {
     dispatch({
       type: 'kFModel/updateState',
       payload: {
         isShowCEFwModal: true,
       },
     });
-  };
+  }, [dispatch]);
 
   const actionItems: MenuProps['items'] = useMemo(() => {
     return [
@@ -169,7 +175,7 @@ const KnowledgeFile = () => {
         // disabled: true,
       },
     ];
-  }, []);
+  }, [knowledgeBaseId, showCEFModal]);
 
   const toChunk = (id: string) => {
     navigate(
@@ -187,13 +193,9 @@ const KnowledgeFile = () => {
       title: 'Name',
       dataIndex: 'name',
       key: 'name',
-      render: (text: any, { id }) => (
+      render: (text: any, { id, thumbnail }) => (
         <div className={styles.tochunks} onClick={() => toChunk(id)}>
-          <img
-            className={styles.img}
-            src="https://gw.alipayobjects.com/zos/antfincdn/efFD%24IOql2/weixintupian_20170331104822.jpg"
-            alt=""
-          />
+          <img className={styles.img} src={thumbnail} alt="" />
           {text}
         </div>
       ),

web/src/pages/add-knowledge/components/knowledge-file/model.ts

@@ -16,6 +16,7 @@ export interface KFModelState extends BaseState {
   data: IKnowledgeFile[];
   total: number;
   currentRecord: Nullable<IKnowledgeFile>;
+  fileThumbnails: Record<string, string>;
 }
 
 const model: DvaModel<KFModelState> = {
@@ -34,6 +35,7 @@ const model: DvaModel<KFModelState> = {
       current: 1,
       pageSize: 10,
     },
+    fileThumbnails: {} as Record<string, string>,
   },
   reducers: {
     updateState(state, { payload }) {
@@ -54,6 +56,9 @@ const model: DvaModel<KFModelState> = {
     setPagination(state, { payload }) {
       return { ...state, pagination: { ...state.pagination, ...payload } };
     },
+    setFileThumbnails(state, { payload }) {
+      return { ...state, fileThumbnails: payload };
+    },
   },
   effects: {
     *createKf({ payload = {} }, { call }) {
@@ -201,6 +206,12 @@ const model: DvaModel<KFModelState> = {
       }
       return retcode;
     },
+    *fetch_document_thumbnails({ payload = {} }, { call, put }) {
+      const { data } = yield call(kbService.document_thumbnails, payload);
+      if (data.retcode === 0) {
+        yield put({ type: 'setFileThumbnails', payload: data.data });
+      }
+    },
   },
 };
 export default model;

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

@@ -47,3 +47,7 @@
 .referenceChunkImage {
   width: 10vw;
 }
+
+.referenceImagePreview {
+  width: 600px;
+}