Feat: Replace antd in the chat message with shadcn. #10427 (#11590)

### What problem does this PR solve?

Feat: Replace antd in the chat message with shadcn. #10427

### Type of change


- [x] New Feature (non-breaking change which adds functionality)

web/src/components/floating-chat-widget.tsx

@@ -1,4 +1,4 @@
-import PdfDrawer from '@/components/pdf-drawer';
+import PdfSheet from '@/components/pdf-drawer';
 import { useClickDrawer } from '@/components/pdf-drawer/hooks';
 import { MessageType } from '@/constants/chat';
 import { useFetchExternalChatInfo } from '@/hooks/use-chat-request';
@@ -494,7 +494,7 @@ const FloatingChatWidget = () => {
             </div>
           </div>
         </div>
-        <PdfDrawer
+        <PdfSheet
           visible={visible}
           hideModal={hideModal}
           documentId={documentId}
@@ -695,7 +695,7 @@ const FloatingChatWidget = () => {
           </div>
         )}
       </div>
-      <PdfDrawer
+      <PdfSheet
         visible={visible}
         hideModal={hideModal}
         documentId={documentId}

web/src/components/markdown-content/index.tsx

@@ -2,8 +2,6 @@ import Image from '@/components/image';
 import SvgIcon from '@/components/svg-icon';
 import { IReference, IReferenceChunk } from '@/interfaces/database/chat';
 import { getExtension } from '@/utils/document-util';
-import { InfoCircleOutlined } from '@ant-design/icons';
-import { Button, Flex, Popover } from 'antd';
 import DOMPurify from 'dompurify';
 import { useCallback, useEffect, useMemo } from 'react';
 import Markdown from 'react-markdown';
@@ -27,10 +25,16 @@ import {
   replaceThinkToSection,
   showImage,
 } from '@/utils/chat';
-
 import classNames from 'classnames';
 import { omit } from 'lodash';
 import { pipe } from 'lodash/fp';
+import { CircleAlert } from 'lucide-react';
+import { Button } from '../ui/button';
+import {
+  HoverCard,
+  HoverCardContent,
+  HoverCardTrigger,
+} from '../ui/hover-card';
 import styles from './index.less';
 
 const getChunkIndex = (match: string) => Number(match);
@@ -145,20 +149,20 @@ const MarkdownContent = ({
       return (
         <div key={chunkItem?.id} className="flex gap-2">
           {imageId && (
-            <Popover
+            <HoverCard>
-              placement="left"
+              <HoverCardTrigger>
-              content={
+                <Image
+                  id={imageId}
+                  className={styles.referenceChunkImage}
+                ></Image>
+              </HoverCardTrigger>
+              <HoverCardContent>
                 <Image
                   id={imageId}
                   className={styles.referenceImagePreview}
                 ></Image>
-              }
+              </HoverCardContent>
-            >
+            </HoverCard>
-              <Image
-                id={imageId}
-                className={styles.referenceChunkImage}
-              ></Image>
-            </Popover>
           )}
           <div className={'space-y-2 max-w-[40vw]'}>
             <div
@@ -168,7 +172,7 @@ const MarkdownContent = ({
               className={classNames(styles.chunkContentText)}
             ></div>
             {documentId && (
-              <Flex gap={'small'}>
+              <section className="flex gap-1">
                 {fileThumbnail ? (
                   <img
                     src={fileThumbnail}
@@ -182,8 +186,8 @@ const MarkdownContent = ({
                   ></SvgIcon>
                 )}
                 <Button
-                  type="link"
+                  variant="link"
-                  className={classNames(styles.documentLink, 'text-wrap')}
+                  className={'text-wrap p-0'}
                   onClick={handleDocumentButtonClick(
                     documentId,
                     chunkItem,
@@ -193,7 +197,7 @@ const MarkdownContent = ({
                 >
                   {document?.doc_name}
                 </Button>
-              </Flex>
+              </section>
             )}
           </div>
         </div>
@@ -228,9 +232,14 @@ const MarkdownContent = ({
             }
           ></Image>
         ) : (
-          <Popover content={getPopoverContent(chunkIndex)} key={i}>
+          <HoverCard key={i}>
-            <InfoCircleOutlined className={styles.referenceIcon} />
+            <HoverCardTrigger>
-          </Popover>
+              <CircleAlert className="size-4 inline-block" />
+            </HoverCardTrigger>
+            <HoverCardContent className="max-w-3xl">
+              {getPopoverContent(chunkIndex)}
+            </HoverCardContent>
+          </HoverCard>
         );
       });
 

web/src/components/message-item/index.tsx

@@ -14,10 +14,10 @@ import {
 } from '@/hooks/document-hooks';
 import { IRegenerateMessage, IRemoveMessageById } from '@/hooks/logic-hooks';
 import { cn } from '@/lib/utils';
-import { Avatar, Flex, Space } from 'antd';
 import MarkdownContent from '../markdown-content';
 import { ReferenceDocumentList } from '../next-message-item/reference-document-list';
 import { InnerUploadedMessageFiles } from '../next-message-item/uploaded-message-files';
+import { RAGFlowAvatar } from '../ragflow-avatar';
 import { useTheme } from '../theme-provider';
 import { AssistantGroupButton, UserGroupButton } from './group-button';
 import styles from './index.less';
@@ -98,40 +98,43 @@ const MessageItem = ({
         >
           {visibleAvatar &&
             (item.role === MessageType.User ? (
-              <Avatar size={40} src={avatar ?? '/logo.svg'} />
+              <RAGFlowAvatar
+                className="size-10"
+                avatar={avatar ?? '/logo.svg'}
+                isPerson
+              />
             ) : avatarDialog ? (
-              <Avatar size={40} src={avatarDialog} />
+              <RAGFlowAvatar
+                className="size-10"
+                avatar={avatarDialog}
+                isPerson
+              />
             ) : (
               <AssistantIcon />
             ))}
 
-          <Flex vertical gap={8} flex={1}>
+          <section className="flex gap-2 flex-1 flex-col">
-            <Space>
+            {isAssistant ? (
-              {isAssistant ? (
+              index !== 0 && (
-                index !== 0 && (
+                <AssistantGroupButton
-                  <AssistantGroupButton
-                    messageId={item.id}
-                    content={item.content}
-                    prompt={item.prompt}
-                    showLikeButton={showLikeButton}
-                    audioBinary={item.audio_binary}
-                    showLoudspeaker={showLoudspeaker}
-                  ></AssistantGroupButton>
-                )
-              ) : (
-                <UserGroupButton
-                  content={item.content}
                   messageId={item.id}
-                  removeMessageById={removeMessageById}
+                  content={item.content}
-                  regenerateMessage={
+                  prompt={item.prompt}
-                    regenerateMessage && handleRegenerateMessage
+                  showLikeButton={showLikeButton}
-                  }
+                  audioBinary={item.audio_binary}
-                  sendLoading={sendLoading}
+                  showLoudspeaker={showLoudspeaker}
-                ></UserGroupButton>
+                ></AssistantGroupButton>
-              )}
+              )
+            ) : (
+              <UserGroupButton
+                content={item.content}
+                messageId={item.id}
+                removeMessageById={removeMessageById}
+                regenerateMessage={regenerateMessage && handleRegenerateMessage}
+                sendLoading={sendLoading}
+              ></UserGroupButton>
+            )}
 
-              {/* <b>{isAssistant ? '' : nickname}</b> */}
-            </Space>
             <div
               className={cn(
                 isAssistant
@@ -159,7 +162,7 @@ const MessageItem = ({
                 files={documentList}
               ></InnerUploadedMessageFiles>
             )}
-          </Flex>
+          </section>
         </div>
       </section>
     </div>

web/src/components/pdf-drawer/index.tsx

@@ -1,8 +1,9 @@
 import { IModalProps } from '@/interfaces/common';
 import { IReferenceChunk } from '@/interfaces/database/chat';
 import { IChunk } from '@/interfaces/database/knowledge';
-import { Drawer } from 'antd';
+import { cn } from '@/lib/utils';
 import DocumentPreviewer from '../pdf-previewer';
+import { Sheet, SheetContent, SheetHeader, SheetTitle } from '../ui/sheet';
 
 interface IProps extends IModalProps<any> {
   documentId: string;
@@ -11,7 +12,7 @@ interface IProps extends IModalProps<any> {
   height?: string | number;
 }
 
-export const PdfDrawer = ({
+export const PdfSheet = ({
   visible = false,
   hideModal,
   documentId,
@@ -20,20 +21,25 @@ export const PdfDrawer = ({
   height,
 }: IProps) => {
   return (
-    <Drawer
+    <Sheet open onOpenChange={hideModal}>
-      title="Document Previewer"
+      <SheetContent
-      onClose={hideModal}
+        className={cn(`max-w-full`)}
-      open={visible}
+        style={{
-      width={width}
+          width: width,
-      height={height}
+          height: height ? height : undefined,
-    >
+        }}
-      <DocumentPreviewer
+      >
-        documentId={documentId}
+        <SheetHeader>
-        chunk={chunk}
+          <SheetTitle>Document Previewer</SheetTitle>
-        visible={visible}
+        </SheetHeader>
-      ></DocumentPreviewer>
+        <DocumentPreviewer
-    </Drawer>
+          documentId={documentId}
+          chunk={chunk}
+          visible={visible}
+        ></DocumentPreviewer>
+      </SheetContent>
+    </Sheet>
   );
 };
 
-export default PdfDrawer;
+export default PdfSheet;

web/src/pages/agent/chat/box.tsx

@@ -5,7 +5,7 @@ import { useSendAgentMessage } from './use-send-agent-message';
 import { FileUploadProps } from '@/components/file-upload';
 import { NextMessageInput } from '@/components/message-input/next';
 import MessageItem from '@/components/next-message-item';
-import PdfDrawer from '@/components/pdf-drawer';
+import PdfSheet from '@/components/pdf-drawer';
 import { useClickDrawer } from '@/components/pdf-drawer/hooks';
 import {
   useFetchAgent,
@@ -127,12 +127,12 @@ function AgentChatBox() {
           />
         )}
       </section>
-      <PdfDrawer
+      <PdfSheet
         visible={visible}
         hideModal={hideModal}
         documentId={documentId}
         chunk={selectedChunk}
-      ></PdfDrawer>
+      ></PdfSheet>
     </>
   );
 }

web/src/pages/agent/share/index.tsx

@@ -2,7 +2,7 @@ import { EmbedContainer } from '@/components/embed-container';
 import { FileUploadProps } from '@/components/file-upload';
 import { NextMessageInput } from '@/components/message-input/next';
 import MessageItem from '@/components/next-message-item';
-import PdfDrawer from '@/components/pdf-drawer';
+import PdfSheet from '@/components/pdf-drawer';
 import { useClickDrawer } from '@/components/pdf-drawer/hooks';
 import { MessageType } from '@/constants/chat';
 import { useUploadCanvasFileWithProgress } from '@/hooks/use-agent-request';
@@ -204,12 +204,12 @@ const ChatContainer = () => {
         </div>
       </EmbedContainer>
       {visible && (
-        <PdfDrawer
+        <PdfSheet
           visible={visible}
           hideModal={hideModal}
           documentId={documentId}
           chunk={selectedChunk}
-        ></PdfDrawer>
+        ></PdfSheet>
       )}
       {parameterDialogVisible && (
         <ParameterDialog

web/src/pages/next-chats/chat/chat-box/multiple-chat-box.tsx

@@ -2,7 +2,7 @@ import { LargeModelFormFieldWithoutFilter } from '@/components/large-model-form-
 import { LlmSettingSchema } from '@/components/llm-setting-items/next';
 import { NextMessageInput } from '@/components/message-input/next';
 import MessageItem from '@/components/message-item';
-import PdfDrawer from '@/components/pdf-drawer';
+import PdfSheet from '@/components/pdf-drawer';
 import { useClickDrawer } from '@/components/pdf-drawer/hooks';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
@@ -257,12 +257,12 @@ export function MultipleChatBox({
         />
       </div>
       {visible && (
-        <PdfDrawer
+        <PdfSheet
           visible={visible}
           hideModal={hideModal}
           documentId={documentId}
           chunk={selectedChunk}
-        ></PdfDrawer>
+        ></PdfSheet>
       )}
     </section>
   );

web/src/pages/next-chats/chat/chat-box/single-chat-box.tsx

@@ -1,6 +1,6 @@
 import { NextMessageInput } from '@/components/message-input/next';
 import MessageItem from '@/components/message-item';
-import PdfDrawer from '@/components/pdf-drawer';
+import PdfSheet from '@/components/pdf-drawer';
 import { useClickDrawer } from '@/components/pdf-drawer/hooks';
 import { MessageType } from '@/constants/chat';
 import {
@@ -101,12 +101,12 @@ export function SingleChatBox({ controller, stopOutputMessage }: IProps) {
         removeFile={removeFile}
       />
       {visible && (
-        <PdfDrawer
+        <PdfSheet
           visible={visible}
           hideModal={hideModal}
           documentId={documentId}
           chunk={selectedChunk}
-        ></PdfDrawer>
+        ></PdfSheet>
       )}
     </section>
   );

web/src/pages/next-chats/share/index.tsx

@@ -1,7 +1,7 @@
 import { EmbedContainer } from '@/components/embed-container';
 import { NextMessageInput } from '@/components/message-input/next';
 import MessageItem from '@/components/message-item';
-import PdfDrawer from '@/components/pdf-drawer';
+import PdfSheet from '@/components/pdf-drawer';
 import { useClickDrawer } from '@/components/pdf-drawer/hooks';
 import { MessageType, SharedFrom } from '@/constants/chat';
 import { useFetchNextConversationSSE } from '@/hooks/chat-hooks';
@@ -123,12 +123,12 @@ const ChatContainer = () => {
         </div>
       </EmbedContainer>
       {visible && (
-        <PdfDrawer
+        <PdfSheet
           visible={visible}
           hideModal={hideModal}
           documentId={documentId}
           chunk={selectedChunk}
-        ></PdfDrawer>
+        ></PdfSheet>
       )}
     </>
   );