feat: rename conversation and delete conversation and preview reference image and fetch file thumbnails (#79)

* feat: fetch file thumbnails

* feat: preview reference image

* feat: delete conversation

* feat: rename conversation

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

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

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

@@ -3,21 +3,12 @@ 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';
 import {
-  useFetchConversation,
+  useFetchConversationOnMount,
   useGetFileIcon,
   useScrollToBottom,
   useSendMessage,
@@ -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 ?? [];
@@ -75,22 +66,35 @@ const MessageItem = ({
           gap={10}
           className={styles.referencePopoverWrapper}
         >
-          <Image
-            id={chunkItem?.img_id}
-            className={styles.referenceChunkImage}
-          ></Image>
+          <Popover
+            placement="topRight"
+            content={
+              <Image
+                id={chunkItem?.img_id}
+                className={styles.referenceImagePreview}
+              ></Image>
+            }
+          >
+            <Image
+              id={chunkItem?.img_id}
+              className={styles.referenceChunkImage}
+            ></Image>
+          </Popover>
           <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 +167,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>
                 )}
               />
@@ -182,11 +187,10 @@ const MessageItem = ({
 
 const ChatContainer = () => {
   const [value, setValue] = useState('');
-  const conversation: IClientConversation = useFetchConversation();
+  const conversation: IClientConversation = useFetchConversationOnMount();
   const { sendMessage } = useSendMessage();
   const loading = useOneNamespaceEffectsLoading('chatModel', [
     'completeConversation',
-    'getConversation',
   ]);
   const ref = useScrollToBottom();
   useGetFileIcon();