Feat: Receive reply messages of different event types from the agent #3221 (#8100)

### What problem does this PR solve? Feat: Receive reply messages of different event types from the agent #3221 ### Type of change - [x] New Feature (non-breaking change which adds functionality)
2025-12-08 20:42:30 +08:00 · 2025-06-06 16:30:18 +08:00
parent 0e03542db5
commit 1885a4a4b8
5 changed files with 404 additions and 11 deletions
--- a/web/src/pages/agent/chat/box.tsx
+++ b/web/src/pages/agent/chat/box.tsx
@ -0,0 +1,91 @@
+import MessageItem from '@/components/message-item';
+import { MessageType } from '@/constants/chat';
+import { useGetFileIcon } from '@/pages/chat/hooks';
+import { buildMessageItemReference } from '@/pages/chat/utils';
+import { Spin } from 'antd';
+
+import { useSendNextMessage } from './hooks';
+
+import MessageInput from '@/components/message-input';
+import PdfDrawer from '@/components/pdf-drawer';
+import { useClickDrawer } from '@/components/pdf-drawer/hooks';
+import { useFetchFlow } from '@/hooks/flow-hooks';
+import { useFetchUserInfo } from '@/hooks/user-setting-hooks';
+import { buildMessageUuidWithRole } from '@/utils/chat';
+
+const AgentChatBox = () => {
+  const {
+    sendLoading,
+    handleInputChange,
+    handlePressEnter,
+    value,
+    loading,
+    ref,
+    derivedMessages,
+    reference,
+    stopOutputMessage,
+  } = useSendNextMessage();
+
+  const { visible, hideModal, documentId, selectedChunk, clickDocumentButton } =
+    useClickDrawer();
+  useGetFileIcon();
+  const { data: userInfo } = useFetchUserInfo();
+  const { data: canvasInfo } = useFetchFlow();
+
+  return (
+    <>
+      <section className="flex flex-1 flex-col pl-5 h-[90vh]">
+        <div className="flex-1 ">
+          <div>
+            <Spin spinning={loading}>
+              {derivedMessages?.map((message, i) => {
+                return (
+                  <MessageItem
+                    loading={
+                      message.role === MessageType.Assistant &&
+                      sendLoading &&
+                      derivedMessages.length - 1 === i
+                    }
+                    key={buildMessageUuidWithRole(message)}
+                    nickname={userInfo.nickname}
+                    avatar={userInfo.avatar}
+                    avatarDialog={canvasInfo.avatar}
+                    item={message}
+                    reference={buildMessageItemReference(
+                      { message: derivedMessages, reference },
+                      message,
+                    )}
+                    clickDocumentButton={clickDocumentButton}
+                    index={i}
+                    showLikeButton={false}
+                    sendLoading={sendLoading}
+                  ></MessageItem>
+                );
+              })}
+            </Spin>
+          </div>
+          <div ref={ref} />
+        </div>
+        <MessageInput
+          showUploadIcon={false}
+          value={value}
+          sendLoading={sendLoading}
+          disabled={false}
+          sendDisabled={sendLoading}
+          conversationId=""
+          onPressEnter={handlePressEnter}
+          onInputChange={handleInputChange}
+          stopOutputMessage={stopOutputMessage}
+        />
+      </section>
+      <PdfDrawer
+        visible={visible}
+        hideModal={hideModal}
+        documentId={documentId}
+        chunk={selectedChunk}
+      ></PdfDrawer>
+    </>
+  );
+};
+
+export default AgentChatBox;