Feat: Display file references for agent dialogues #3221 (#8854)

### What problem does this PR solve?

Feat: Display file references for agent dialogues #3221
### Type of change


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

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

@@ -18,7 +18,6 @@ import { useParams } from 'umi';
 import DebugContent from '../debug-content';
 import { BeginQuery } from '../interface';
 import { buildBeginQueryWithObject } from '../utils';
-import { buildAgentMessageItemReference } from '../utils/chat';
 
 const AgentChatBox = () => {
   const {
@@ -29,9 +28,9 @@ const AgentChatBox = () => {
     loading,
     ref,
     derivedMessages,
-    reference,
     stopOutputMessage,
     sendFormMessage,
+    findReferenceByMessageId,
   } = useSendNextMessage();
 
   const { visible, hideModal, documentId, selectedChunk, clickDocumentButton } =
@@ -71,7 +70,7 @@ const AgentChatBox = () => {
 
   return (
     <>
-      <section className="flex flex-1 flex-col pl-5 h-[90vh]">
+      <section className="flex flex-1 flex-col px-5 h-[90vh]">
         <div className="flex-1 overflow-auto">
           <div>
             <Spin spinning={loading}>
@@ -88,10 +87,7 @@ const AgentChatBox = () => {
                     avatar={userInfo.avatar}
                     avatarDialog={canvasInfo.avatar}
                     item={message}
-                    reference={buildAgentMessageItemReference(
-                      { message: derivedMessages, reference },
-                      message,
-                    )}
+                    reference={findReferenceByMessageId(message.id)}
                     clickDocumentButton={clickDocumentButton}
                     index={i}
                     showLikeButton={false}

web/src/pages/agent/chat/chat-sheet.tsx

@@ -1,24 +1,18 @@
-import {
-  Sheet,
-  SheetContent,
-  SheetHeader,
-  SheetTitle,
-} from '@/components/ui/sheet';
+import { Sheet, SheetContent } from '@/components/ui/sheet';
 import { IModalProps } from '@/interfaces/common';
 import { cn } from '@/lib/utils';
+import { useTranslation } from 'react-i18next';
 import AgentChatBox from './box';
 
 export function ChatSheet({ hideModal }: IModalProps<any>) {
+  const { t } = useTranslation();
   return (
     <Sheet open modal={false} onOpenChange={hideModal}>
-      <SheetTitle className="hidden"></SheetTitle>
       <SheetContent
         className={cn('top-20 p-0')}
         onInteractOutside={(e) => e.preventDefault()}
       >
-        <SheetHeader>
-          <SheetTitle>Are you absolutely sure?</SheetTitle>
-        </SheetHeader>
+        <div className="pl-5 pt-2">{t('chat.chat')}</div>
         <AgentChatBox></AgentChatBox>
       </SheetContent>
     </Sheet>

web/src/pages/agent/chat/hooks.ts

@@ -8,6 +8,8 @@ import { useFetchAgent } from '@/hooks/use-agent-request';
 import {
   IEventList,
   IInputEvent,
+  IMessageEndData,
+  IMessageEndEvent,
   IMessageEvent,
   MessageEventType,
   useSendMessageBySSE,
@@ -17,7 +19,7 @@ import i18n from '@/locales/config';
 import api from '@/utils/api';
 import { get } from 'lodash';
 import trim from 'lodash/trim';
-import { useCallback, useContext, useEffect, useMemo } from 'react';
+import { useCallback, useContext, useEffect, useMemo, useState } from 'react';
 import { useParams } from 'umi';
 import { v4 as uuid } from 'uuid';
 import { BeginId } from '../constant';
@@ -114,6 +116,9 @@ export const useSendNextMessage = () => {
   const { refetch } = useFetchAgent();
   const { addEventList } = useContext(AgentChatLogContext);
   const getBeginNodeDataQuery = useGetBeginNodeDataQuery();
+  const [messageEndEventList, setMessageEndEventList] = useState<
+    IMessageEndEvent[]
+  >([]);
 
   const { send, answerList, done, stopOutputMessage } = useSendMessageBySSE(
     api.runCanvas,
@@ -126,13 +131,16 @@ export const useSendNextMessage = () => {
       const params: Record<string, unknown> = {
         id: agentId,
       };
+
       params.running_hint_text = i18n.t('flow.runningHintText', {
         defaultValue: 'is running...🕞',
       });
       if (message.content) {
+        const query = getBeginNodeDataQuery();
+
         params.query = message.content;
         // params.message_id = message.id;
-        params.inputs = {}; // begin operator inputs
+        params.inputs = transferInputsArrayToObject(query); // begin operator inputs
       }
       const res = await send(params);
 
@@ -146,7 +154,14 @@ export const useSendNextMessage = () => {
         refetch(); // pull the message list after sending the message successfully
       }
     },
-    [agentId, send, setValue, removeLatestMessage, refetch],
+    [
+      agentId,
+      send,
+      getBeginNodeDataQuery,
+      setValue,
+      removeLatestMessage,
+      refetch,
+    ],
   );
 
   const handleSendMessage = useCallback(
@@ -156,6 +171,23 @@ export const useSendNextMessage = () => {
     [sendMessage],
   );
 
+  useEffect(() => {
+    const messageEndEvent = answerList.find(
+      (x) => x.event === MessageEventType.MessageEnd,
+    );
+    if (messageEndEvent) {
+      setMessageEndEventList((list) => {
+        const nextList = [...list];
+        if (
+          nextList.every((x) => x.message_id !== messageEndEvent.message_id)
+        ) {
+          nextList.push(messageEndEvent as IMessageEndEvent);
+        }
+        return nextList;
+      });
+    }
+  }, [addEventList.length, answerList]);
+
   useEffect(() => {
     const { content, id } = findMessageFromList(answerList);
     const inputAnswer = findInputFromList(answerList);
@@ -195,11 +227,20 @@ export const useSendNextMessage = () => {
     [addNewestOneQuestion, send],
   );
 
+  const findReferenceByMessageId = useCallback(
+    (messageId: string) => {
+      const event = messageEndEventList.find(
+        (item) => item.message_id === messageId,
+      );
+      if (event) {
+        return (event?.data as IMessageEndData)?.reference;
+      }
+    },
+    [messageEndEventList],
+  );
+
   useEffect(() => {
-    const query = getBeginNodeDataQuery();
-    if (query.length > 0) {
-      send({ id: agentId, inputs: transferInputsArrayToObject(query) });
-    } else if (prologue) {
+    if (prologue) {
       addNewestOneAnswer({
         answer: prologue,
       });
@@ -230,5 +271,6 @@ export const useSendNextMessage = () => {
     stopOutputMessage,
     send,
     sendFormMessage,
+    findReferenceByMessageId,
   };
 };