feat: render message reference and add avatar to MessageItem

web/package.json

@@ -25,8 +25,11 @@
     "react-chat-elements": "^12.0.13",
     "react-i18next": "^14.0.0",
     "react-infinite-scroll-component": "^6.1.0",
+    "react-markdown": "^9.0.1",
+    "react-string-replace": "^1.1.1",
     "umi": "^4.0.90",
     "umi-request": "^1.4.0",
+    "unist-util-visit-parents": "^6.0.1",
     "uuid": "^9.0.1"
   },
   "devDependencies": {

web/src/hooks/userSettingHook.ts

@@ -0,0 +1,22 @@
+import { IUserInfo } from '@/interfaces/database/userSetting';
+import { useCallback, useEffect } from 'react';
+import { useDispatch, useSelector } from 'umi';
+
+export const useFetchUserInfo = () => {
+  const dispatch = useDispatch();
+  const fetchUserInfo = useCallback(() => {
+    dispatch({ type: 'settingModel/getUserInfo' });
+  }, [dispatch]);
+
+  useEffect(() => {
+    fetchUserInfo();
+  }, [fetchUserInfo]);
+};
+
+export const useSelectUserInfo = () => {
+  const userInfo: IUserInfo = useSelector(
+    (state: any) => state.settingModel.userInfo,
+  );
+
+  return userInfo;
+};

web/src/interfaces/database/chat.ts

@@ -54,7 +54,7 @@ export interface IConversation {
   dialog_id: string;
   id: string;
   message: Message[];
-  reference: any[];
+  reference: IReference[];
   name: string;
   update_date: string;
   update_time: number;
@@ -64,3 +64,29 @@ export interface Message {
   content: string;
   role: MessageType;
 }
+
+export interface IReference {
+  chunks: Chunk[];
+  doc_aggs: Docagg[];
+  total: number;
+}
+
+interface Docagg {
+  count: number;
+  doc_id: string;
+  doc_name: string;
+}
+
+interface Chunk {
+  chunk_id: string;
+  content_ltks: string;
+  content_with_weight: string;
+  doc_id: string;
+  docnm_kwd: string;
+  img_id: string;
+  important_kwd: any[];
+  kb_id: string;
+  similarity: number;
+  term_similarity: number;
+  vector_similarity: number;
+}

web/src/interfaces/database/userSetting.ts

@@ -0,0 +1,21 @@
+export interface IUserInfo {
+  access_token: string;
+  avatar?: any;
+  color_schema: string;
+  create_date: string;
+  create_time: number;
+  email: string;
+  id: string;
+  is_active: string;
+  is_anonymous: string;
+  is_authenticated: string;
+  is_superuser: boolean;
+  language: string;
+  last_login_time: string;
+  login_channel: string;
+  nickname: string;
+  password: string;
+  status: string;
+  update_date: string;
+  update_time: number;
+}

web/src/layouts/components/header/index.tsx

@@ -19,17 +19,20 @@ const RagHeader = () => {
   const navigate = useNavigate();
   const { pathname } = useLocation();
 
-  const tagsData = [
-    { path: '/knowledge', name: 'Knowledge Base', icon: KnowledgeBaseIcon },
-    { path: '/chat', name: 'Chat', icon: StarIon },
-    { path: '/file', name: 'File Management', icon: FileIcon },
-  ];
+  const tagsData = useMemo(
+    () => [
+      { path: '/knowledge', name: 'Knowledge Base', icon: KnowledgeBaseIcon },
+      { path: '/chat', name: 'Chat', icon: StarIon },
+      { path: '/file', name: 'File Management', icon: FileIcon },
+    ],
+    [],
+  );
 
   const currentPath = useMemo(() => {
     return (
       tagsData.find((x) => pathname.startsWith(x.path))?.name || 'knowledge'
     );
-  }, [pathname]);
+  }, [pathname, tagsData]);
 
   const handleChange = (path: string) => {
     navigate(path);
@@ -48,7 +51,7 @@ const RagHeader = () => {
     >
       <Space size={12}>
         <Logo className={styles.appIcon}></Logo>
-        <label className={styles.appName}>Infinity flow</label>
+        <label className={styles.appName}>RagFlow</label>
       </Space>
       <Space size={[0, 8]} wrap>
         <Radio.Group

web/src/layouts/components/user/index.tsx

@@ -1,3 +1,4 @@
+import { useFetchUserInfo, useSelectUserInfo } from '@/hooks/userSettingHook';
 import authorizationUtil from '@/utils/authorizationUtil';
 import type { MenuProps } from 'antd';
 import { Avatar, Button, Dropdown } from 'antd';
@@ -7,6 +8,7 @@ import { history } from 'umi';
 
 const App: React.FC = () => {
   const { t } = useTranslation();
+  const userInfo = useSelectUserInfo();
 
   const logout = () => {
     authorizationUtil.removeAll();
@@ -36,13 +38,18 @@ const App: React.FC = () => {
         ),
       },
     ];
-  }, []);
+  }, [t]);
+
+  useFetchUserInfo();
 
   return (
     <Dropdown menu={{ items }} placement="bottomLeft" arrow>
       <Avatar
         size={32}
-        src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
+        src={
+          userInfo.avatar ??
+          'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png'
+        }
       />
     </Dropdown>
   );

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

@@ -1,11 +1,34 @@
 .chatContainer {
   padding: 0 24px 24px;
+  .messageContainer {
+    overflow-y: auto;
+  }
 }
 
 .messageItem {
-  .messageItemContent {
+  padding: 24px 0;
+  .messageItemSection {
     display: inline-block;
-    width: 300px;
+  }
+  .messageItemSectionLeft {
+    width: 70%;
+  }
+  .messageItemSectionRight {
+    width: 30%;
+  }
+  .messageItemContent {
+    display: inline-flex;
+    gap: 20px;
+  }
+  .messageItemContentReverse {
+    flex-direction: row-reverse;
+  }
+  .messageText {
+    padding: 0 14px;
+    background-color: rgba(249, 250, 251, 1);
+  }
+  .referenceIcon {
+    padding: 0 6px;
   }
 }
 

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

@@ -1,29 +1,110 @@
-import { Button, Flex, Input, Typography } from 'antd';
-import { ChangeEventHandler, useState } from 'react';
-
-import { Message } from '@/interfaces/database/chat';
+import { ReactComponent as AssistantIcon } from '@/assets/svg/assistant.svg';
+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 classNames from 'classnames';
+import { ChangeEventHandler, useCallback, useMemo, useState } from 'react';
+import reactStringReplace from 'react-string-replace';
 import { useFetchConversation, useSendMessage } from '../hooks';
-
-import { MessageType } from '@/constants/chat';
 import { IClientConversation } from '../interface';
+
+import { InfoCircleOutlined } from '@ant-design/icons';
+import Markdown from 'react-markdown';
+import { visitParents } from 'unist-util-visit-parents';
 import styles from './index.less';
 
-const { Paragraph } = Typography;
+const rehypeWrapReference = () => {
+  return function wrapTextTransform(tree: any) {
+    visitParents(tree, 'text', (node, ancestors) => {
+      if (ancestors.at(-1).tagName !== 'custom-typography') {
+        node.type = 'element';
+        node.tagName = 'custom-typography';
+        node.properties = {};
+        node.children = [{ type: 'text', value: node.value }];
+      }
+    });
+  };
+};
+
+const MessageItem = ({ item }: { item: Message; references: IReference[] }) => {
+  const userInfo = useSelectUserInfo();
+
+  const popoverContent = useMemo(
+    () => (
+      <div>
+        <p>Content</p>
+        <p>Content</p>
+      </div>
+    ),
+    [],
+  );
+
+  const renderReference = useCallback(
+    (text: string) => {
+      return reactStringReplace(text, /#{2}\d{1,}\${2}/g, (match, i) => {
+        return (
+          <Popover content={popoverContent}>
+            <InfoCircleOutlined key={i} className={styles.referenceIcon} />
+          </Popover>
+        );
+      });
+    },
+    [popoverContent],
+  );
 
-const MessageItem = ({ item }: { item: Message }) => {
   return (
     <div
       className={classNames(styles.messageItem, {
         [styles.messageItemLeft]: item.role === MessageType.Assistant,
         [styles.messageItemRight]: item.role === MessageType.User,
       })}
     >
-      <span className={styles.messageItemContent}>
-        <Paragraph ellipsis={{ tooltip: item.content, rows: 3 }}>
-          {item.content}
-        </Paragraph>
-      </span>
+      <section
+        className={classNames(styles.messageItemSection, {
+          [styles.messageItemSectionLeft]: item.role === MessageType.Assistant,
+          [styles.messageItemSectionRight]: item.role === MessageType.User,
+        })}
+      >
+        <div
+          className={classNames(styles.messageItemContent, {
+            [styles.messageItemContentReverse]: item.role === MessageType.User,
+          })}
+        >
+          {item.role === MessageType.User ? (
+            userInfo.avatar ?? (
+              <Avatar
+                size={40}
+                src={
+                  userInfo.avatar ??
+                  'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png'
+                }
+              />
+            )
+          ) : (
+            <AssistantIcon></AssistantIcon>
+          )}
+          <Flex vertical gap={8} flex={1}>
+            <b>
+              {item.role === MessageType.Assistant ? 'Resume Assistant' : 'You'}
+            </b>
+            <div className={styles.messageText}>
+              <Markdown
+                rehypePlugins={[rehypeWrapReference]}
+                components={
+                  {
+                    'custom-typography': ({ children }: { children: string }) =>
+                      renderReference(children),
+                  } as any
+                }
+              >
+                {item.content}
+              </Markdown>
+            </div>
+          </Flex>
+        </div>
+      </section>
     </div>
   );
 };
@@ -32,9 +113,13 @@ const ChatContainer = () => {
   const [value, setValue] = useState('');
   const conversation: IClientConversation = useFetchConversation();
   const { sendMessage } = useSendMessage();
+  const loading = useOneNamespaceEffectsLoading('chatModel', [
+    'completeConversation',
+    'getConversation',
+  ]);
 
   const handlePressEnter = () => {
-    console.info(value);
+    setValue('');
     sendMessage(value);
   };
 
@@ -44,17 +129,23 @@ const ChatContainer = () => {
 
   return (
     <Flex flex={1} className={styles.chatContainer} vertical>
-      <Flex flex={1} vertical>
-        {conversation?.message?.map((message) => (
-          <MessageItem key={message.id} item={message}></MessageItem>
-        ))}
+      <Flex flex={1} vertical className={styles.messageContainer}>
+        <div>
+          {conversation?.message?.map((message) => (
+            <MessageItem
+              key={message.id}
+              item={message}
+              references={conversation.reference}
+            ></MessageItem>
+          ))}
+        </div>
       </Flex>
       <Input
         size="large"
         placeholder="Message Resume Assistant..."
         value={value}
         suffix={
-          <Button type="primary" onClick={handlePressEnter}>
+          <Button type="primary" onClick={handlePressEnter} loading={loading}>
             Send
           </Button>
         }