From ccce8beeeb6d2b99db280977b9cef07d44a38447 Mon Sep 17 00:00:00 2001 From: balibabu Date: Fri, 28 Nov 2025 17:15:01 +0800 Subject: [PATCH] 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 | 6 +- web/src/components/markdown-content/index.tsx | 49 +++++++++------ web/src/components/message-item/index.tsx | 61 ++++++++++--------- web/src/components/pdf-drawer/index.tsx | 38 +++++++----- web/src/pages/agent/chat/box.tsx | 6 +- web/src/pages/agent/share/index.tsx | 6 +- .../chat/chat-box/multiple-chat-box.tsx | 6 +- .../chat/chat-box/single-chat-box.tsx | 6 +- web/src/pages/next-chats/share/index.tsx | 6 +- 9 files changed, 101 insertions(+), 83 deletions(-) diff --git a/web/src/components/floating-chat-widget.tsx b/web/src/components/floating-chat-widget.tsx index 51aab028a..c31cb41bd 100644 --- a/web/src/components/floating-chat-widget.tsx +++ b/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 = () => { - { )} - Number(match); @@ -145,20 +149,20 @@ const MarkdownContent = ({ return (
{imageId && ( - + + + + - } - > - - + + )}
{documentId && ( - +
{fileThumbnail ? ( )} - +
)}
@@ -228,9 +232,14 @@ const MarkdownContent = ({ } > ) : ( - - - + + + + + + {getPopoverContent(chunkIndex)} + + ); }); diff --git a/web/src/components/message-item/index.tsx b/web/src/components/message-item/index.tsx index ff5b08b7d..dbd38aef4 100644 --- a/web/src/components/message-item/index.tsx +++ b/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 ? ( - + ) : avatarDialog ? ( - + ) : ( ))} - - - {isAssistant ? ( - index !== 0 && ( - - ) - ) : ( - + {isAssistant ? ( + index !== 0 && ( + - )} + content={item.content} + prompt={item.prompt} + showLikeButton={showLikeButton} + audioBinary={item.audio_binary} + showLoudspeaker={showLoudspeaker} + > + ) + ) : ( + + )} - {/* {isAssistant ? '' : nickname} */} -
)} - +
diff --git a/web/src/components/pdf-drawer/index.tsx b/web/src/components/pdf-drawer/index.tsx index 680aacc32..4b6caeca9 100644 --- a/web/src/components/pdf-drawer/index.tsx +++ b/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 { documentId: string; @@ -11,7 +12,7 @@ interface IProps extends IModalProps { height?: string | number; } -export const PdfDrawer = ({ +export const PdfSheet = ({ visible = false, hideModal, documentId, @@ -20,20 +21,25 @@ export const PdfDrawer = ({ height, }: IProps) => { return ( - - - + + + + Document Previewer + + + + ); }; -export default PdfDrawer; \ No newline at end of file +export default PdfSheet; diff --git a/web/src/pages/agent/chat/box.tsx b/web/src/pages/agent/chat/box.tsx index f44e219fc..85abf6827 100644 --- a/web/src/pages/agent/chat/box.tsx +++ b/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() { /> )} - + > ); } diff --git a/web/src/pages/agent/share/index.tsx b/web/src/pages/agent/share/index.tsx index 24308ea66..af3393ad2 100644 --- a/web/src/pages/agent/share/index.tsx +++ b/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 = () => { {visible && ( - + > )} {parameterDialogVisible && ( {visible && ( - + > )} ); diff --git a/web/src/pages/next-chats/chat/chat-box/single-chat-box.tsx b/web/src/pages/next-chats/chat/chat-box/single-chat-box.tsx index a63348e0a..8d14eb82f 100644 --- a/web/src/pages/next-chats/chat/chat-box/single-chat-box.tsx +++ b/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 && ( - + > )} ); diff --git a/web/src/pages/next-chats/share/index.tsx b/web/src/pages/next-chats/share/index.tsx index 648b22f72..e01671eed 100644 --- a/web/src/pages/next-chats/share/index.tsx +++ b/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 = () => { {visible && ( - + > )} );