feat: Stream the greetings of the agent dialogue #3355 (#3490)

### What problem does this PR solve?

feat: Stream the greetings of the agent dialogue #3355

### Type of change


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

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

@@ -2,104 +2,25 @@ import { MessageType } from '@/constants/chat';
 import { useFetchFlow } from '@/hooks/flow-hooks';
 import {
   useHandleMessageInputChange,
-  useScrollToBottom,
   useSelectDerivedMessages,
   useSendMessageWithSse,
 } from '@/hooks/logic-hooks';
-import { IAnswer, Message } from '@/interfaces/database/chat';
-import { IMessage } from '@/pages/chat/interface';
+import { Message } from '@/interfaces/database/chat';
 import api from '@/utils/api';
-import { buildMessageUuid } from '@/utils/chat';
 import { message } from 'antd';
 import trim from 'lodash/trim';
-import { useCallback, useEffect, useState } from 'react';
+import { useCallback, useEffect } from 'react';
 import { useParams } from 'umi';
 import { v4 as uuid } from 'uuid';
 import { receiveMessageError } from '../utils';
 
 const antMessage = message;
 
-export const useSelectCurrentMessages = () => {
-  const { id: id } = useParams();
-  const [currentMessages, setCurrentMessages] = useState<IMessage[]>([]);
-
-  const { data: flowDetail, loading } = useFetchFlow();
-  const messages = flowDetail.dsl.messages;
-  const reference = flowDetail.dsl.reference;
-
-  const ref = useScrollToBottom(currentMessages);
-
-  const addNewestQuestion = useCallback(
-    (message: Message, answer: string = '') => {
-      setCurrentMessages((pre) => {
-        return [
-          ...pre,
-          {
-            ...message,
-            id: buildMessageUuid(message),
-          },
-          {
-            role: MessageType.Assistant,
-            content: answer,
-            id: buildMessageUuid({ ...message, role: MessageType.Assistant }),
-          },
-        ];
-      });
-    },
-    [],
-  );
-
-  const addNewestAnswer = useCallback((answer: IAnswer) => {
-    setCurrentMessages((pre) => {
-      return [
-        ...pre.slice(0, -1),
-        {
-          role: MessageType.Assistant,
-          content: answer.answer,
-          reference: answer.reference,
-          id: buildMessageUuid({
-            id: answer.id,
-            role: MessageType.Assistant,
-          }),
-        },
-      ];
-    });
-  }, []);
-
-  const removeLatestMessage = useCallback(() => {
-    setCurrentMessages((pre) => {
-      const nextMessages = pre?.slice(0, -2) ?? [];
-      return nextMessages;
-      return [...pre, ...nextMessages];
-    });
-  }, []);
-
-  useEffect(() => {
-    if (id) {
-      const nextMessages = messages.map((x) => ({ ...x, id: uuid() }));
-      setCurrentMessages(nextMessages);
-    }
-  }, [messages, id]);
-
-  return {
-    currentMessages,
-    reference,
-    addNewestQuestion,
-    removeLatestMessage,
-    addNewestAnswer,
-    ref,
-    loading,
-  };
-};
-
 export const useSelectNextMessages = () => {
-  const { id: id } = useParams();
   const { data: flowDetail, loading } = useFetchFlow();
-  const messages = flowDetail.dsl.messages;
   const reference = flowDetail.dsl.reference;
   const {
     derivedMessages,
-    setDerivedMessages,
     ref,
     addNewestQuestion,
     addNewestAnswer,
@@ -108,13 +29,6 @@ export const useSelectNextMessages = () => {
     removeMessagesAfterCurrentMessage,
   } = useSelectDerivedMessages();
 
-  useEffect(() => {
-    if (id) {
-      const nextMessages = messages.map((x) => ({ ...x, id: uuid() }));
-      setDerivedMessages(nextMessages);
-    }
-  }, [messages, id, setDerivedMessages]);
-
   return {
     reference,
     loading,
@@ -128,76 +42,6 @@ export const useSelectNextMessages = () => {
   };
 };
 
-export const useSendMessage = (
-  addNewestQuestion: (message: Message, answer?: string) => void,
-  removeLatestMessage: () => void,
-  addNewestAnswer: (answer: IAnswer) => void,
-) => {
-  const { id: flowId } = useParams();
-  const { handleInputChange, value, setValue } = useHandleMessageInputChange();
-  const { refetch } = useFetchFlow();
-
-  const { send, answer, done } = useSendMessageWithSse(api.runCanvas);
-
-  const sendMessage = useCallback(
-    async (message: Message) => {
-      const params: Record<string, unknown> = {
-        id: flowId,
-      };
-      if (message.content) {
-        params.message = message.content;
-        params.message_id = message.id;
-      }
-      const res = await send(params);
-
-      if (receiveMessageError(res)) {
-        antMessage.error(res?.data?.message);
-
-        // cancel loading
-        setValue(message.content);
-        removeLatestMessage();
-      } else {
-        refetch(); // pull the message list after sending the message successfully
-      }
-    },
-    [flowId, removeLatestMessage, setValue, send, refetch],
-  );
-
-  const handleSendMessage = useCallback(
-    async (message: Message) => {
-      sendMessage(message);
-    },
-    [sendMessage],
-  );
-
-  useEffect(() => {
-    if (answer.answer) {
-      addNewestAnswer(answer);
-    }
-  }, [answer, addNewestAnswer]);
-
-  const handlePressEnter = useCallback(() => {
-    if (trim(value) === '') return;
-    const id = uuid();
-    if (done) {
-      setValue('');
-      handleSendMessage({ id, content: value.trim(), role: MessageType.User });
-    }
-    addNewestQuestion({
-      content: value,
-      id,
-      role: MessageType.User,
-    });
-  }, [addNewestQuestion, handleSendMessage, done, setValue, value]);
-
-  return {
-    handlePressEnter,
-    handleInputChange,
-    value,
-    loading: !done,
-  };
-};
-
 export const useSendNextMessage = () => {
   const {
     reference,
@@ -211,7 +55,6 @@ export const useSendNextMessage = () => {
   } = useSelectNextMessages();
   const { id: flowId } = useParams();
   const { handleInputChange, value, setValue } = useHandleMessageInputChange();
-  const { refetch } = useFetchFlow();
 
   const { send, answer, done } = useSendMessageWithSse(api.runCanvas);
 
@@ -232,11 +75,9 @@ export const useSendNextMessage = () => {
         // cancel loading
         setValue(message.content);
         removeLatestMessage();
-      } else {
-        refetch(); // pull the message list after sending the message successfully
       }
     },
-    [flowId, removeLatestMessage, setValue, send, refetch],
+    [flowId, removeLatestMessage, setValue, send],
   );
 
   const handleSendMessage = useCallback(
@@ -266,6 +107,18 @@ export const useSendNextMessage = () => {
     });
   }, [addNewestQuestion, handleSendMessage, done, setValue, value]);
 
+  const fetchPrologue = useCallback(async () => {
+    // fetch prologue
+    const sendRet = await send({ id: flowId });
+    if (receiveMessageError(sendRet)) {
+      message.error(sendRet?.data?.message);
+    }
+  }, [flowId, send]);
+
+  useEffect(() => {
+    fetchPrologue();
+  }, [fetchPrologue]);
+
   return {
     handlePressEnter,
     handleInputChange,

web/src/pages/flow/hooks.tsx

@@ -16,9 +16,8 @@ import {
   ModelVariableType,
   settledModelVariableMap,
 } from '@/constants/knowledge';
-import { useFetchModelId, useSendMessageWithSse } from '@/hooks/logic-hooks';
+import { useFetchModelId } from '@/hooks/logic-hooks';
 import { Variable } from '@/interfaces/database/chat';
-import api from '@/utils/api';
 import { useDebounceEffect } from 'ahooks';
 import { FormInstance, message } from 'antd';
 import { DefaultOptionType } from 'antd/es/select';
@@ -78,7 +77,6 @@ import {
   generateNodeNamesWithIncreasingIndex,
   generateSwitchHandleText,
   getNodeDragHandle,
-  receiveMessageError,
   replaceIdWithText,
 } from './utils';
 
@@ -448,11 +446,8 @@ export const useGetBeginNodeDataQuery = () => {
 };
 
 export const useSaveGraphBeforeOpeningDebugDrawer = (show: () => void) => {
-  const { id } = useParams();
   const { saveGraph, loading } = useSaveGraph();
   const { resetFlow } = useResetFlow();
-  const { refetch } = useFetchFlow();
-  const { send } = useSendMessageWithSse(api.runCanvas);
 
   const handleRun = useCallback(
     async (nextNodes?: Node[]) => {
@@ -463,17 +458,10 @@ export const useSaveGraphBeforeOpeningDebugDrawer = (show: () => void) => {
         // After resetting, all previous messages will be cleared.
         if (resetRet?.code === 0) {
           show();
-          // fetch prologue
-          const sendRet = await send({ id });
-          if (receiveMessageError(sendRet)) {
-            message.error(sendRet?.data?.message);
-          } else {
-            refetch();
-          }
         }
       }
     },
-    [saveGraph, resetFlow, send, id, refetch, show],
+    [saveGraph, resetFlow, show],
   );
 
   return { handleRun, loading };