fix: remove duplicate MessageItem #1289 (#1566)

### What problem does this PR solve?

fix: remove duplicate MessageItem #1289

### Type of change

- [x] Bug Fix (non-breaking change which fixes an issue)

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

@@ -1,140 +1,22 @@
-import { ReactComponent as AssistantIcon } from '@/assets/svg/assistant.svg';
-import NewDocumentLink from '@/components/new-document-link';
+import MessageItem from '@/components/message-item';
 import DocumentPreviewer from '@/components/pdf-previewer';
 import { MessageType } from '@/constants/chat';
-import { useSelectFileThumbnails } from '@/hooks/knowledgeHook';
-import { useSelectUserInfo } from '@/hooks/userSettingHook';
-import { IReference, Message } from '@/interfaces/database/chat';
-import { IChunk } from '@/interfaces/database/knowledge';
-import { Avatar, Button, Drawer, Flex, Input, List, Spin } from 'antd';
-import classNames from 'classnames';
-import { useMemo } from 'react';
+import { useTranslate } from '@/hooks/commonHooks';
+import { Button, Drawer, Flex, Input, Spin } from 'antd';
 import {
   useClickDrawer,
   useFetchConversationOnMount,
   useGetFileIcon,
   useGetSendButtonDisabled,
-  useSelectConversationLoading, useSendButtonDisabled,
+  useSelectConversationLoading,
+  useSendButtonDisabled,
   useSendMessage,
 } from '../hooks';
-import MarkdownContent from '../markdown-content';
-
-import SvgIcon from '@/components/svg-icon';
-import { useTranslate } from '@/hooks/commonHooks';
-import { useGetDocumentUrl } from '@/hooks/documentHooks';
-import { getExtension, isPdf } from '@/utils/documentUtils';
 import { buildMessageItemReference } from '../utils';
+
+import { useSelectUserInfo } from '@/hooks/userSettingHook';
 import styles from './index.less';
 
-const MessageItem = ({
-  item,
-  reference,
-  loading = false,
-  clickDocumentButton,
-}: {
-  item: Message;
-  reference: IReference;
-  loading?: boolean;
-  clickDocumentButton: (documentId: string, chunk: IChunk) => void;
-}) => {
-  const userInfo = useSelectUserInfo();
-  const fileThumbnails = useSelectFileThumbnails();
-  const getDocumentUrl = useGetDocumentUrl();
-  const { t } = useTranslate('chat');
-
-  const isAssistant = item.role === MessageType.Assistant;
-
-  const referenceDocumentList = useMemo(() => {
-    return reference?.doc_aggs ?? [];
-  }, [reference?.doc_aggs]);
-
-  const content = useMemo(() => {
-    let text = item.content;
-    if (text === '') {
-      text = t('searching');
-    }
-    return loading ? text?.concat('~~2$$') : text;
-  }, [item.content, loading, t]);
-
-  return (
-    <div
-      className={classNames(styles.messageItem, {
-        [styles.messageItemLeft]: item.role === MessageType.Assistant,
-        [styles.messageItemRight]: item.role === MessageType.User,
-      })}
-    >
-      <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 ? (
-            <Avatar
-              size={40}
-              src={
-                userInfo.avatar ??
-                'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png'
-              }
-            />
-          ) : (
-            <AssistantIcon></AssistantIcon>
-          )}
-          <Flex vertical gap={8} flex={1}>
-            <b>{isAssistant ? '' : userInfo.nickname}</b>
-            <div className={isAssistant ? styles.messageText : styles.messageUserText}>
-              <MarkdownContent
-                content={content}
-                reference={reference}
-                clickDocumentButton={clickDocumentButton}
-              ></MarkdownContent>
-            </div>
-            {isAssistant && referenceDocumentList.length > 0 && (
-              <List
-                bordered
-                dataSource={referenceDocumentList}
-                renderItem={(item) => {
-                  const fileThumbnail = fileThumbnails[item.doc_id];
-                  const fileExtension = getExtension(item.doc_name);
-                  return (
-                    <List.Item>
-                      <Flex gap={'small'} align="center">
-                        {fileThumbnail ? (
-                          <img
-                            src={fileThumbnail}
-                            className={styles.thumbnailImg}
-                          ></img>
-                        ) : (
-                          <SvgIcon
-                            name={`file-icon/${fileExtension}`}
-                            width={24}
-                          ></SvgIcon>
-                        )}
-
-                        <NewDocumentLink
-                          link={getDocumentUrl(item.doc_id)}
-                          preventDefault={!isPdf(item.doc_name)}
-                        >
-                          {item.doc_name}
-                        </NewDocumentLink>
-                      </Flex>
-                    </List.Item>
-                  );
-                }}
-              />
-            )}
-          </Flex>
-        </div>
-      </section>
-    </div>
-  );
-};
-
 const ChatContainer = () => {
   const {
     ref,
@@ -161,6 +43,7 @@ const ChatContainer = () => {
   useGetFileIcon();
   const loading = useSelectConversationLoading();
   const { t } = useTranslate('chat');
+  const userInfo = useSelectUserInfo();
 
   return (
     <>
@@ -178,6 +61,8 @@ const ChatContainer = () => {
                     }
                     key={message.id}
                     item={message}
+                    nickname={userInfo.nickname}
+                    avatar={userInfo.avatar}
                     reference={buildMessageItemReference(conversation, message)}
                     clickDocumentButton={clickDocumentButton}
                   ></MessageItem>