feat: Select derived messages from backend #2088 (#2176)

### What problem does this PR solve?

feat: Select derived messages from backend #2088

### Type of change

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

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

@@ -6,28 +6,23 @@ import { useClickDrawer, useGetFileIcon } from '@/pages/chat/hooks';
 import { buildMessageItemReference } from '@/pages/chat/utils';
 import { Button, Drawer, Flex, Input, Spin } from 'antd';
 
-import { useSelectCurrentMessages, useSendMessage } from './hooks';
+import { useSendNextMessage } from './hooks';
 
 import { useFetchUserInfo } from '@/hooks/user-setting-hooks';
 import styles from './index.less';
 
 const FlowChatBox = () => {
   const {
-    ref,
-    currentMessages,
-    reference,
-    addNewestAnswer,
-    addNewestQuestion,
-    removeLatestMessage,
-    loading,
-  } = useSelectCurrentMessages();
-
-  const {
+    sendLoading,
     handleInputChange,
     handlePressEnter,
     value,
-    loading: sendLoading,
-  } = useSendMessage(addNewestQuestion, removeLatestMessage, addNewestAnswer);
+    loading,
+    ref,
+    derivedMessages,
+    reference,
+  } = useSendNextMessage();
+
   const { visible, hideModal, documentId, selectedChunk, clickDocumentButton } =
     useClickDrawer();
   useGetFileIcon();
@@ -40,26 +35,26 @@ const FlowChatBox = () => {
         <Flex flex={1} vertical className={styles.messageContainer}>
           <div>
             <Spin spinning={loading}>
-              {currentMessages?.map((message, i) => {
+              {derivedMessages?.map((message, i) => {
                 return (
                   <MessageItem
                     loading={
                       message.role === MessageType.Assistant &&
                       sendLoading &&
-                      currentMessages.length - 1 === i
+                      derivedMessages.length - 1 === i
                     }
                     key={message.id}
                     nickname={userInfo.nickname}
                     avatar={userInfo.avatar}
                     item={message}
                     reference={buildMessageItemReference(
-                      { message: currentMessages, reference },
+                      { message: derivedMessages, reference },
                       message,
                     )}
                     clickDocumentButton={clickDocumentButton}
                     index={i}
-                    regenerateMessage={() => {}}
                     showLikeButton={false}
+                    sendLoading={sendLoading}
                   ></MessageItem>
                 );
               })}

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

@@ -3,6 +3,7 @@ import { useFetchFlow } from '@/hooks/flow-hooks';
 import {
   useHandleMessageInputChange,
   useScrollToBottom,
+  useSelectDerivedMessages,
   useSendMessageWithSse,
 } from '@/hooks/logic-hooks';
 import { IAnswer, Message } from '@/interfaces/database/chat';
@@ -91,6 +92,42 @@ export const useSelectCurrentMessages = () => {
   };
 };
 
+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,
+    removeLatestMessage,
+    removeMessageById,
+    removeMessagesAfterCurrentMessage,
+  } = useSelectDerivedMessages();
+
+  useEffect(() => {
+    if (id) {
+      const nextMessages = messages.map((x) => ({ ...x, id: uuid() }));
+      setDerivedMessages(nextMessages);
+    }
+  }, [messages, id, setDerivedMessages]);
+
+  return {
+    reference,
+    loading,
+    derivedMessages,
+    ref,
+    addNewestQuestion,
+    addNewestAnswer,
+    removeLatestMessage,
+    removeMessageById,
+    removeMessagesAfterCurrentMessage,
+  };
+};
+
 export const useSendMessage = (
   addNewestQuestion: (message: Message, answer?: string) => void,
   removeLatestMessage: () => void,
@@ -160,3 +197,84 @@ export const useSendMessage = (
     loading: !done,
   };
 };
+
+export const useSendNextMessage = () => {
+  const {
+    reference,
+    loading,
+    derivedMessages,
+    ref,
+    addNewestQuestion,
+    addNewestAnswer,
+    removeLatestMessage,
+    removeMessageById,
+  } = useSelectNextMessages();
+  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: Message; messages?: 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?.retmsg);
+
+        // 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,
+    sendLoading: !done,
+    reference,
+    loading,
+    derivedMessages,
+    ref,
+    removeMessageById,
+  };
+};