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

@@ -5,82 +5,3 @@
     padding-right: 24px;
   }
 }
-
-.messageItem {
-  padding: 24px 0;
-  .messageItemSection {
-    display: inline-block;
-  }
-  .messageItemSectionLeft {
-    width: 70%;
-  }
-  .messageItemSectionRight {
-    width: 40%;
-  }
-  .messageItemContent {
-    display: inline-flex;
-    gap: 20px;
-  }
-  .messageItemContentReverse {
-    flex-direction: row-reverse;
-  }
-  .messageTextBase() {
-    padding: 6px 10px;
-    border-radius: 8px;
-    & > p {
-      margin: 0;
-    }
-  }
-  .messageText {
-    .chunkText();
-    .messageTextBase();
-    background-color: #e6f4ff;
-    word-break: break-all;
-  }
-  .messageUserText {
-    .chunkText();
-    .messageTextBase();
-    background-color: rgb(248, 247, 247);
-    word-break: break-all;
-    text-align: justify;
-  }
-  .messageEmpty {
-    width: 300px;
-  }
-  // .referenceIcon {
-  //   padding: 0 6px;
-  // }
-  .thumbnailImg {
-    max-width: 20px;
-  }
-}
-
-.messageItemLeft {
-  text-align: left;
-}
-
-.messageItemRight {
-  text-align: right;
-}
-
-// .referencePopoverWrapper {
-//   max-width: 50vw;
-// }
-
-// .referenceChunkImage {
-//   width: 10vw;
-//   object-fit: contain;
-// }
-
-// .referenceImagePreview {
-//   max-width: 45vw;
-//   max-height: 45vh;
-// }
-// .chunkContentText {
-//   .chunkText;
-//   max-height: 45vh;
-//   overflow-y: auto;
-// }
-// .documentLink {
-//   padding: 0;
-// }

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>