feat: fetch file thumbnails

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.tsx

@@ -3,16 +3,7 @@ import { MessageType } from '@/constants/chat';
 import { useOneNamespaceEffectsLoading } from '@/hooks/storeHooks';
 import { useSelectUserInfo } from '@/hooks/userSettingHook';
 import { IReference, Message } from '@/interfaces/database/chat';
-import {
-  Avatar,
-  Button,
-  Flex,
-  Input,
-  List,
-  Popover,
-  Space,
-  Typography,
-} from 'antd';
+import { Avatar, Button, Flex, Input, List, Popover, Space } from 'antd';
 import classNames from 'classnames';
 import { ChangeEventHandler, useCallback, useMemo, useState } from 'react';
 import reactStringReplace from 'react-string-replace';
@@ -26,6 +17,7 @@ import { IClientConversation } from '../interface';
 
 import Image from '@/components/image';
 import NewDocumentLink from '@/components/new-document-link';
+import { useSelectFileThumbnails } from '@/hooks/knowledgeHook';
 import { InfoCircleOutlined } from '@ant-design/icons';
 import Markdown from 'react-markdown';
 import { visitParents } from 'unist-util-visit-parents';
@@ -56,11 +48,10 @@ const MessageItem = ({
   reference: IReference;
 }) => {
   const userInfo = useSelectUserInfo();
+  const fileThumbnails = useSelectFileThumbnails();
 
   const isAssistant = item.role === MessageType.Assistant;
 
-  const getFileIcon = useGetFileIcon();
-
   const getPopoverContent = useCallback(
     (chunkIndex: number) => {
       const chunks = reference?.chunks ?? [];
@@ -82,15 +73,18 @@ const MessageItem = ({
           <Space direction={'vertical'}>
             <div>{chunkItem?.content_with_weight}</div>
             {documentId && (
-              <NewDocumentLink documentId={documentId}>
-                {document?.doc_name}
-              </NewDocumentLink>
+              <Flex gap={'middle'}>
+                <img src={fileThumbnails[documentId]} alt="" />
+                <NewDocumentLink documentId={documentId}>
+                  {document?.doc_name}
+                </NewDocumentLink>
+              </Flex>
             )}
           </Space>
         </Flex>
       );
     },
-    [reference],
+    [reference, fileThumbnails],
   );
 
   const renderReference = useCallback(
@@ -163,12 +157,13 @@ const MessageItem = ({
                 dataSource={referenceDocumentList}
                 renderItem={(item) => (
                   <List.Item>
-                    <Typography.Text mark>
-                      {/* <SvgIcon name={getFileIcon(item.doc_name)}></SvgIcon> */}
-                    </Typography.Text>
-                    <NewDocumentLink documentId={item.doc_id}>
-                      {item.doc_name}
-                    </NewDocumentLink>
+                    {/* <SvgIcon name={getFileIcon(item.doc_name)}></SvgIcon> */}
+                    <Flex gap={'middle'}>
+                      <img src={fileThumbnails[item.doc_id]}></img>
+                      <NewDocumentLink documentId={item.doc_id}>
+                        {item.doc_name}
+                      </NewDocumentLink>
+                    </Flex>
                   </List.Item>
                 )}
               />

web/src/pages/chat/hooks.ts

@@ -384,7 +384,7 @@ export const useFetchConversation = () => {
 
   const fetchConversation = useCallback(() => {
     if (isConversationIdNotExist(conversationId)) {
-      dispatch<any>({
+      dispatch({
         type: 'chatModel/getConversation',
         payload: {
           conversation_id: conversationId,

web/src/pages/chat/model.ts

@@ -4,6 +4,7 @@ import { message } from 'antd';
 import { DvaModel } from 'umi';
 import { v4 as uuid } from 'uuid';
 import { IClientConversation, IMessage } from './interface';
+import { getDocumentIdsFromConversionReference } from './utils';
 
 export interface ChatModelState {
   name: string;
@@ -111,6 +112,12 @@ const model: DvaModel<ChatModelState> = {
     *getConversation({ payload }, { call, put }) {
       const { data } = yield call(chatService.getConversation, payload);
       if (data.retcode === 0) {
+        yield put({
+          type: 'kFModel/fetch_document_thumbnails',
+          payload: {
+            doc_ids: getDocumentIdsFromConversionReference(data.data),
+          },
+        });
         yield put({ type: 'setCurrentConversation', payload: data.data });
       }
       return data.retcode;

web/src/pages/chat/utils.ts

@@ -1,3 +1,4 @@
+import { IConversation, IReference } from '@/interfaces/database/chat';
 import { EmptyConversationId, variableEnabledFieldMap } from './constants';
 
 export const excludeUnEnabledVariables = (values: any) => {
@@ -14,3 +15,20 @@ export const excludeUnEnabledVariables = (values: any) => {
 export const isConversationIdNotExist = (conversationId: string) => {
   return conversationId !== EmptyConversationId && conversationId !== '';
 };
+
+export const getDocumentIdsFromConversionReference = (data: IConversation) => {
+  const documentIds = data.reference.reduce(
+    (pre: Array<string>, cur: IReference) => {
+      cur.doc_aggs
+        .map((x) => x.doc_id)
+        .forEach((x) => {
+          if (pre.every((y) => y !== x)) {
+            pre.push(x);
+          }
+        });
+      return pre;
+    },
+    [],
+  );
+  return documentIds.join(',');
+};

web/src/services/kbService.ts

@@ -13,6 +13,7 @@ const {
   document_rm,
   document_create,
   document_change_parser,
+  document_thumbnails,
   chunk_list,
   create_chunk,
   set_chunk,
@@ -75,6 +76,10 @@ const methods = {
     url: document_change_parser,
     method: 'post',
   },
+  document_thumbnails: {
+    url: document_thumbnails,
+    method: 'get',
+  },
   // chunk管理
   chunk_list: {
     url: chunk_list,

web/src/utils/api.ts

@@ -42,6 +42,7 @@ export default {
   document_create: `${api_host}/document/create`,
   document_run: `${api_host}/document/run`,
   document_change_parser: `${api_host}/document/change_parser`,
+  document_thumbnails: `${api_host}/document/thumbnails`,
 
   setDialog: `${api_host}/dialog/set`,
   getDialog: `${api_host}/dialog/get`,