feat: add file icon and add message popover content (#77)

* feat: add message popover content

* feat: add file icon

web/src/components/new-document-link.tsx

@@ -0,0 +1,20 @@
+import { api_host } from '@/utils/api';
+import React from 'react';
+
+interface IProps extends React.PropsWithChildren {
+  documentId: string;
+}
+
+const NewDocumentLink = ({ children, documentId }: IProps) => {
+  return (
+    <a
+      target="_blank"
+      href={`${api_host}/document/get/${documentId}`}
+      rel="noreferrer"
+    >
+      {children}
+    </a>
+  );
+};
+
+export default NewDocumentLink;

web/src/components/svg-icon.tsx

@@ -0,0 +1,34 @@
+import {
+  UseDynamicSVGImportOptions,
+  useDynamicSVGImport,
+} from '@/hooks/commonHooks';
+
+interface IconProps extends React.SVGProps<SVGSVGElement> {
+  name: string;
+  onCompleted?: UseDynamicSVGImportOptions['onCompleted'];
+  onError?: UseDynamicSVGImportOptions['onError'];
+}
+
+const SvgIcon: React.FC<IconProps> = ({
+  name,
+  onCompleted,
+  onError,
+  ...rest
+}): React.ReactNode | null => {
+  const { error, loading, SvgIcon } = useDynamicSVGImport(name, {
+    onCompleted,
+    onError,
+  });
+  if (error) {
+    return error.message;
+  }
+  if (loading) {
+    return 'Loading...';
+  }
+  if (SvgIcon) {
+    return <SvgIcon {...rest} />;
+  }
+  return null;
+};
+
+export default SvgIcon;

web/src/constants/common.ts

@@ -0,0 +1,40 @@
+export const fileIconMap = {
+  aep: 'aep.svg',
+  ai: 'ai.svg',
+  avi: 'avi.svg',
+  css: 'css.svg',
+  csv: 'csv.svg',
+  dmg: 'dmg.svg',
+  doc: 'doc.svg',
+  docx: 'docx.svg',
+  eps: 'eps.svg',
+  exe: 'exe.svg',
+  fig: 'fig.svg',
+  gif: 'gif.svg',
+  html: 'html.svg',
+  indd: 'indd.svg',
+  java: 'java.svg',
+  jpeg: 'jpeg.svg',
+  jpg: 'jpg.svg',
+  js: 'js.svg',
+  json: 'json.svg',
+  mkv: 'mkv.svg',
+  mp3: 'mp3.svg',
+  mp4: 'mp4.svg',
+  mpeg: 'mpeg.svg',
+  pdf: 'pdf.svg',
+  png: 'png.svg',
+  ppt: 'ppt.svg',
+  pptx: 'pptx.svg',
+  psd: 'psd.svg',
+  rss: 'rss.svg',
+  sql: 'sql.svg',
+  svg: 'svg.svg',
+  tiff: 'tiff.svg',
+  txt: 'txt.svg',
+  wav: 'wav.svg',
+  webp: 'webp.svg',
+  xls: 'xls.svg',
+  xlsx: 'xlsx.svg',
+  xml: 'xml.svg',
+};

web/src/hooks/commonHooks.ts

@@ -32,3 +32,39 @@ export const useDeepCompareEffect = (
     };
   }, []);
 };
+
+export interface UseDynamicSVGImportOptions {
+  onCompleted?: (
+    name: string,
+    SvgIcon: React.FC<React.SVGProps<SVGSVGElement>> | undefined,
+  ) => void;
+  onError?: (err: Error) => void;
+}
+
+export function useDynamicSVGImport(
+  name: string,
+  options: UseDynamicSVGImportOptions = {},
+) {
+  const ImportedIconRef = useRef<React.FC<React.SVGProps<SVGSVGElement>>>();
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<Error>();
+
+  const { onCompleted, onError } = options;
+  useEffect(() => {
+    setLoading(true);
+    const importIcon = async (): Promise<void> => {
+      try {
+        ImportedIconRef.current = (await import(name)).ReactComponent;
+        onCompleted?.(name, ImportedIconRef.current);
+      } catch (err: any) {
+        onError?.(err);
+        setError(err);
+      } finally {
+        setLoading(false);
+      }
+    };
+    importIcon();
+  }, [name, onCompleted, onError]);
+
+  return { error, loading, SvgIcon: ImportedIconRef.current };
+}

web/src/interfaces/database/chat.ts

@@ -71,7 +71,7 @@ export interface IReference {
   total: number;
 }
 
-interface Docagg {
+export interface Docagg {
   count: number;
   doc_id: string;
   doc_name: string;

web/src/pages/add-knowledge/components/knowledge-chunk/components/chunk-card/index.tsx

@@ -1,6 +1,5 @@
 import Image from '@/components/image';
 import { IChunk } from '@/interfaces/database/knowledge';
-import { api_host } from '@/utils/api';
 import { Card, Checkbox, CheckboxProps, Flex, Popover, Switch } from 'antd';
 import { useState } from 'react';
 import styles from './index.less';
@@ -48,11 +47,6 @@ const ChunkCard = ({
                 <Image id={item.img_id} className={styles.imagePreview}></Image>
               }
             >
-              <img
-                src={`${api_host}/document/image/${item.img_id}`}
-                alt=""
-                className={styles.image}
-              />
               <Image id={item.img_id} className={styles.image}></Image>
             </Popover>
           )}

web/src/pages/add-knowledge/components/knowledge-testing/testing-result/select-files.tsx

@@ -1,6 +1,6 @@
 import { ReactComponent as NavigationPointerIcon } from '@/assets/svg/navigation-pointer.svg';
+import NewDocumentLink from '@/components/new-document-link';
 import { ITestingDocument } from '@/interfaces/database/knowledge';
-import { api_host } from '@/utils/api';
 import { Table, TableProps } from 'antd';
 import { useDispatch, useSelector } from 'umi';
 
@@ -34,13 +34,9 @@ const SelectFiles = ({ handleTesting }: IProps) => {
       key: 'view',
       width: 50,
       render: (_, { doc_id }) => (
-        <a
-          href={`${api_host}/document/get/${doc_id}`}
-          target="_blank"
-          rel="noreferrer"
-        >
+        <NewDocumentLink documentId={doc_id}>
           <NavigationPointerIcon />
-        </a>
+        </NewDocumentLink>
       ),
     },
   ];

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

@@ -2,7 +2,7 @@ import { useKnowledgeBaseId } from '@/hooks/knowledgeHook';
 import { useSecondPathName, useThirdPathName } from '@/hooks/routeHook';
 import { Breadcrumb } from 'antd';
 import { ItemType } from 'antd/es/breadcrumb/Breadcrumb';
-import { useEffect, useMemo } from 'react';
+import { useCallback, useEffect, useMemo } from 'react';
 import { Link, Outlet, useDispatch, useLocation, useNavigate } from 'umi';
 import Siderbar from './components/knowledge-sidebar';
 import {
@@ -25,9 +25,9 @@ const KnowledgeAdding = () => {
   const datasetActiveKey: KnowledgeDatasetRouteKey =
     useThirdPathName() as KnowledgeDatasetRouteKey;
 
-  const gotoList = () => {
+  const gotoList = useCallback(() => {
     navigate('/knowledge');
-  };
+  }, [navigate]);
 
   const breadcrumbItems: ItemType[] = useMemo(() => {
     const items: ItemType[] = [
@@ -54,7 +54,7 @@ const KnowledgeAdding = () => {
     }
 
     return items;
-  }, [activeKey, datasetActiveKey]);
+  }, [activeKey, datasetActiveKey, gotoList, knowledgeBaseId]);
 
   useEffect(() => {
     const search: string = location.search.slice(1);
@@ -71,7 +71,7 @@ const KnowledgeAdding = () => {
         ...map,
       },
     });
-  }, [location]);
+  }, [location, dispatch]);
 
   return (
     <>

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

@@ -39,3 +39,11 @@
 .messageItemRight {
   text-align: right;
 }
+
+.referencePopoverWrapper {
+  width: 50vw;
+}
+
+.referenceChunkImage {
+  width: 10vw;
+}

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

@@ -3,18 +3,38 @@ 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, Popover } from 'antd';
+import {
+  Avatar,
+  Button,
+  Flex,
+  Input,
+  List,
+  Popover,
+  Space,
+  Typography,
+} from 'antd';
 import classNames from 'classnames';
 import { ChangeEventHandler, useCallback, useMemo, useState } from 'react';
 import reactStringReplace from 'react-string-replace';
-import { useFetchConversation, useSendMessage } from '../hooks';
+import {
+  useFetchConversation,
+  useGetFileIcon,
+  useScrollToBottom,
+  useSendMessage,
+} from '../hooks';
 import { IClientConversation } from '../interface';
 
+import Image from '@/components/image';
+import NewDocumentLink from '@/components/new-document-link';
 import { InfoCircleOutlined } from '@ant-design/icons';
 import Markdown from 'react-markdown';
 import { visitParents } from 'unist-util-visit-parents';
 import styles from './index.less';
 
+const reg = /(#{2}\d+\${2})/g;
+
+const getChunkIndex = (match: string) => Number(match.slice(2, 3));
+
 const rehypeWrapReference = () => {
   return function wrapTextTransform(tree: any) {
     visitParents(tree, 'text', (node, ancestors) => {
@@ -28,32 +48,69 @@ const rehypeWrapReference = () => {
   };
 };
 
-const MessageItem = ({ item }: { item: Message; references: IReference[] }) => {
+const MessageItem = ({
+  item,
+  reference,
+}: {
+  item: Message;
+  reference: IReference;
+}) => {
   const userInfo = useSelectUserInfo();
 
-  const popoverContent = useMemo(
-    () => (
-      <div>
-        <p>Content</p>
-        <p>Content</p>
-      </div>
-    ),
-    [],
+  const isAssistant = item.role === MessageType.Assistant;
+
+  const getFileIcon = useGetFileIcon();
+
+  const getPopoverContent = useCallback(
+    (chunkIndex: number) => {
+      const chunks = reference?.chunks ?? [];
+      const chunkItem = chunks[chunkIndex];
+      const document = reference?.doc_aggs.find(
+        (x) => x?.doc_id === chunkItem?.doc_id,
+      );
+      const documentId = document?.doc_id;
+      return (
+        <Flex
+          key={chunkItem?.chunk_id}
+          gap={10}
+          className={styles.referencePopoverWrapper}
+        >
+          <Image
+            id={chunkItem?.img_id}
+            className={styles.referenceChunkImage}
+          ></Image>
+          <Space direction={'vertical'}>
+            <div>{chunkItem?.content_with_weight}</div>
+            {documentId && (
+              <NewDocumentLink documentId={documentId}>
+                {document?.doc_name}
+              </NewDocumentLink>
+            )}
+          </Space>
+        </Flex>
+      );
+    },
+    [reference],
   );
 
   const renderReference = useCallback(
     (text: string) => {
-      return reactStringReplace(text, /#{2}\d{1,}\${2}/g, (match, i) => {
+      return reactStringReplace(text, reg, (match, i) => {
+        const chunkIndex = getChunkIndex(match);
         return (
-          <Popover content={popoverContent}>
+          <Popover content={getPopoverContent(chunkIndex)}>
             <InfoCircleOutlined key={i} className={styles.referenceIcon} />
           </Popover>
         );
       });
     },
-    [popoverContent],
+    [getPopoverContent],
   );
 
+  const referenceDocumentList = useMemo(() => {
+    return reference?.doc_aggs ?? [];
+  }, [reference?.doc_aggs]);
+
   return (
     <div
       className={classNames(styles.messageItem, {
@@ -86,9 +143,7 @@ const MessageItem = ({ item }: { item: Message; references: IReference[] }) => {
             <AssistantIcon></AssistantIcon>
           )}
           <Flex vertical gap={8} flex={1}>
-            <b>
-              {item.role === MessageType.Assistant ? 'Resume Assistant' : 'You'}
-            </b>
+            <b>{isAssistant ? 'Resume Assistant' : 'You'}</b>
             <div className={styles.messageText}>
               <Markdown
                 rehypePlugins={[rehypeWrapReference]}
@@ -102,6 +157,22 @@ const MessageItem = ({ item }: { item: Message; references: IReference[] }) => {
                 {item.content}
               </Markdown>
             </div>
+            {isAssistant && referenceDocumentList.length > 0 && (
+              <List
+                bordered
+                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>
+                  </List.Item>
+                )}
+              />
+            )}
           </Flex>
         </div>
       </section>
@@ -117,6 +188,8 @@ const ChatContainer = () => {
     'completeConversation',
     'getConversation',
   ]);
+  const ref = useScrollToBottom();
+  useGetFileIcon();
 
   const handlePressEnter = () => {
     setValue('');
@@ -131,14 +204,24 @@ const ChatContainer = () => {
     <Flex flex={1} className={styles.chatContainer} vertical>
       <Flex flex={1} vertical className={styles.messageContainer}>
         <div>
-          {conversation?.message?.map((message) => (
-            <MessageItem
-              key={message.id}
-              item={message}
-              references={conversation.reference}
-            ></MessageItem>
-          ))}
+          {conversation?.message?.map((message) => {
+            const assistantMessages = conversation?.message
+              ?.filter((x) => x.role === MessageType.Assistant)
+              .slice(1);
+            const referenceIndex = assistantMessages.findIndex(
+              (x) => x.id === message.id,
+            );
+            const reference = conversation.reference[referenceIndex];
+            return (
+              <MessageItem
+                key={message.id}
+                item={message}
+                reference={reference}
+              ></MessageItem>
+            );
+          })}
         </div>
+        <div ref={ref} />
       </Flex>
       <Input
         size="large"

web/src/pages/chat/hooks.ts

@@ -1,8 +1,10 @@
 import showDeleteConfirm from '@/components/deleting-confirm';
 import { MessageType } from '@/constants/chat';
+import { fileIconMap } from '@/constants/common';
 import { IConversation, IDialog } from '@/interfaces/database/chat';
+import { getFileExtension } from '@/utils';
 import omit from 'lodash/omit';
-import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useDispatch, useSearchParams, useSelector } from 'umi';
 import { v4 as uuid } from 'uuid';
 import { ChatSearchParams, EmptyConversationId } from './constants';
@@ -441,4 +443,38 @@ export const useSendMessage = () => {
   return { sendMessage: handleSendMessage };
 };
 
+export const useScrollToBottom = () => {
+  const ref = useRef<HTMLDivElement>(null);
+  let chatModel: ChatModelState = useSelector((state: any) => state.chatModel);
+  const { currentConversation } = chatModel;
+
+  const scrollToBottom = useCallback(() => {
+    if (currentConversation.id) {
+      ref.current?.scrollIntoView({ behavior: 'instant' });
+    }
+  }, [currentConversation]);
+
+  useEffect(() => {
+    scrollToBottom();
+  }, [scrollToBottom]);
+
+  return ref;
+};
+
+export const useGetFileIcon = () => {
+  // const req = require.context('@/assets/svg/file-icon');
+  // const ret = req.keys().map(req);
+  // console.info(ret);
+  // useEffect(() => {}, []);
+
+  const getFileIcon = (filename: string) => {
+    const ext: string = getFileExtension(filename);
+    const iconPath = fileIconMap[ext as keyof typeof fileIconMap];
+    // const x = require(`@/assets/svg/file-icon/${iconPath}`);
+    return `@/assets/svg/file-icon/${iconPath}`;
+  };
+
+  return getFileIcon;
+};
+
 //#endregion

web/src/utils/domUtils.ts

@@ -0,0 +1,3 @@
+export const scrollToBottom = (element: HTMLElement) => {
+  element.scrollTo(0, element.scrollHeight);
+};