feat: add OperateDropdown and send debug message #918 (#1095)

### What problem does this PR solve?
feat: add OperateDropdown
feat: send debug message #918 

### Type of change


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

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

@@ -2,43 +2,34 @@ import MessageItem from '@/components/message-item';
 import DocumentPreviewer from '@/components/pdf-previewer';
 import { MessageType } from '@/constants/chat';
 import { useTranslate } from '@/hooks/commonHooks';
-import {
-  useClickDrawer,
-  useFetchConversationOnMount,
-  useGetFileIcon,
-  useGetSendButtonDisabled,
-  useSelectConversationLoading,
-  useSendMessage,
-} from '@/pages/chat/hooks';
+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 styles from './index.less';
 
 const FlowChatBox = () => {
   const {
     ref,
-    currentConversation: conversation,
-    addNewestConversation,
-    removeLatestMessage,
+    currentMessages,
+    reference,
     addNewestAnswer,
-  } = useFetchConversationOnMount();
+    addNewestQuestion,
+    removeLatestMessage,
+    loading,
+  } = useSelectCurrentMessages();
+
   const {
     handleInputChange,
     handlePressEnter,
     value,
     loading: sendLoading,
-  } = useSendMessage(
-    conversation,
-    addNewestConversation,
-    removeLatestMessage,
-    addNewestAnswer,
-  );
+  } = useSendMessage(addNewestQuestion, removeLatestMessage, addNewestAnswer);
   const { visible, hideModal, documentId, selectedChunk, clickDocumentButton } =
     useClickDrawer();
-  const disabled = useGetSendButtonDisabled();
   useGetFileIcon();
-  const loading = useSelectConversationLoading();
   const { t } = useTranslate('chat');
 
   return (
@@ -47,17 +38,20 @@ const FlowChatBox = () => {
         <Flex flex={1} vertical className={styles.messageContainer}>
           <div>
             <Spin spinning={loading}>
-              {conversation?.message?.map((message, i) => {
+              {currentMessages?.map((message, i) => {
                 return (
                   <MessageItem
                     loading={
                       message.role === MessageType.Assistant &&
                       sendLoading &&
-                      conversation?.message.length - 1 === i
+                      currentMessages.length - 1 === i
                     }
                     key={message.id}
                     item={message}
-                    reference={buildMessageItemReference(conversation, message)}
+                    reference={buildMessageItemReference(
+                      { message: currentMessages, reference },
+                      message,
+                    )}
                     clickDocumentButton={clickDocumentButton}
                   ></MessageItem>
                 );
@@ -70,13 +64,11 @@ const FlowChatBox = () => {
           size="large"
           placeholder={t('sendPlaceholder')}
           value={value}
-          disabled={disabled}
           suffix={
             <Button
               type="primary"
               onClick={handlePressEnter}
               loading={sendLoading}
-              disabled={disabled}
             >
               {t('send')}
             </Button>

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

@@ -0,0 +1,21 @@
+import { IModalProps } from '@/interfaces/common';
+import { Drawer } from 'antd';
+import FlowChatBox from './box';
+
+const ChatDrawer = ({ visible, hideModal }: IModalProps<any>) => {
+  return (
+    <Drawer
+      title="Debug"
+      placement="right"
+      onClose={hideModal}
+      open={visible}
+      getContainer={false}
+      width={470}
+      zIndex={10000}
+    >
+      <FlowChatBox></FlowChatBox>
+    </Drawer>
+  );
+};
+
+export default ChatDrawer;

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

@@ -2,27 +2,25 @@ import { MessageType } from '@/constants/chat';
 import { useFetchFlow } from '@/hooks/flow-hooks';
 import {
   useHandleMessageInputChange,
-  //   useScrollToBottom,
+  useScrollToBottom,
   useSendMessageWithSse,
 } from '@/hooks/logicHooks';
 import { IAnswer } from '@/interfaces/database/chat';
 import { IMessage } from '@/pages/chat/interface';
-import omit from 'lodash/omit';
+import api from '@/utils/api';
 import { useCallback, useEffect, useState } from 'react';
 import { useParams } from 'umi';
 import { v4 as uuid } from 'uuid';
-import { Operator } from '../constant';
-import useGraphStore from '../store';
 
-export const useSelectCurrentConversation = () => {
+export const useSelectCurrentMessages = () => {
   const { id: id } = useParams();
-  const findNodeByName = useGraphStore((state) => state.findNodeByName);
   const [currentMessages, setCurrentMessages] = useState<IMessage[]>([]);
 
-  const { data: flowDetail } = useFetchFlow();
-  const messages = flowDetail.dsl.history;
+  const { data: flowDetail, loading } = useFetchFlow();
+  const messages = flowDetail.dsl.messages;
+  const reference = flowDetail.dsl.reference;
 
-  const prologue = findNodeByName(Operator.Begin)?.data?.form?.prologue;
+  const ref = useScrollToBottom(currentMessages);
 
   const addNewestQuestion = useCallback(
     (message: string, answer: string = '') => {
@@ -45,121 +43,71 @@ export const useSelectCurrentConversation = () => {
     [],
   );
 
-  const addNewestAnswer = useCallback(
-    (answer: IAnswer) => {
-      setCurrentMessages((pre) => {
-        const latestMessage = currentMessages?.at(-1);
+  const addNewestAnswer = useCallback((answer: IAnswer) => {
+    setCurrentMessages((pre) => {
+      const latestMessage = pre?.at(-1);
 
-        if (latestMessage) {
-          return [
-            ...pre.slice(0, -1),
-            {
-              ...latestMessage,
-              content: answer.answer,
-              reference: answer.reference,
-            },
-          ];
-        }
-        return pre;
-      });
-    },
-    [currentMessages],
-  );
+      if (latestMessage) {
+        return [
+          ...pre.slice(0, -1),
+          {
+            ...latestMessage,
+            content: answer.answer,
+            reference: answer.reference,
+          },
+        ];
+      }
+      return pre;
+    });
+  }, []);
 
   const removeLatestMessage = useCallback(() => {
     setCurrentMessages((pre) => {
       const nextMessages = pre?.slice(0, -2) ?? [];
+      return nextMessages;
       return [...pre, ...nextMessages];
     });
   }, []);
 
-  const addPrologue = useCallback(() => {
-    if (id === '') {
-      const nextMessage = {
-        role: MessageType.Assistant,
-        content: prologue,
-        id: uuid(),
-      } as IMessage;
-
-      setCurrentMessages({
-        id: '',
-        reference: [],
-        message: [nextMessage],
-      } as any);
-    }
-  }, [id, prologue]);
-
-  useEffect(() => {
-    addPrologue();
-  }, [addPrologue]);
-
   useEffect(() => {
     if (id) {
-      setCurrentMessages(messages);
+      const nextMessages = messages.map((x) => ({ ...x, id: uuid() }));
+      setCurrentMessages(nextMessages);
     }
   }, [messages, id]);
 
   return {
-    currentConversation: currentMessages,
+    currentMessages,
+    reference,
     addNewestQuestion,
     removeLatestMessage,
     addNewestAnswer,
+    ref,
+    loading,
   };
 };
 
-// export const useFetchConversationOnMount = () => {
-//   const { conversationId } = useGetChatSearchParams();
-//   const fetchConversation = useFetchConversation();
-//   const {
-//     currentConversation,
-//     addNewestQuestion,
-//     removeLatestMessage,
-//     addNewestAnswer,
-//   } = useSelectCurrentConversation();
-//   const ref = useScrollToBottom(currentConversation);
-
-//   const fetchConversationOnMount = useCallback(() => {
-//     if (isConversationIdExist(conversationId)) {
-//       fetchConversation(conversationId);
-//     }
-//   }, [fetchConversation, conversationId]);
-
-//   useEffect(() => {
-//     fetchConversationOnMount();
-//   }, [fetchConversationOnMount]);
-
-//   return {
-//     currentConversation,
-//     addNewestQuestion,
-//     ref,
-//     removeLatestMessage,
-//     addNewestAnswer,
-//   };
-// };
-
 export const useSendMessage = (
-  conversation: any,
   addNewestQuestion: (message: string, answer?: string) => void,
   removeLatestMessage: () => void,
   addNewestAnswer: (answer: IAnswer) => void,
 ) => {
-  const { id: conversationId } = useParams();
+  const { id: flowId } = useParams();
   const { handleInputChange, value, setValue } = useHandleMessageInputChange();
+  const { data: flowDetail } = useFetchFlow();
+  const messages = flowDetail.dsl.messages;
 
-  const { send, answer, done } = useSendMessageWithSse();
+  const { send, answer, done } = useSendMessageWithSse(api.runCanvas);
 
   const sendMessage = useCallback(
     async (message: string, id?: string) => {
-      const res: Response | undefined = await send({
-        conversation_id: id ?? conversationId,
-        messages: [
-          ...(conversation?.message ?? []).map((x: IMessage) => omit(x, 'id')),
-          {
-            role: MessageType.User,
-            content: message,
-          },
-        ],
-      });
+      const params: Record<string, unknown> = {
+        id: flowId,
+      };
+      if (message) {
+        params.message = message;
+      }
+      const res: Response | undefined = await send(params);
 
       if (res?.status !== 200) {
         // cancel loading
@@ -167,13 +115,7 @@ export const useSendMessage = (
         removeLatestMessage();
       }
     },
-    [
-      conversation?.message,
-      conversationId,
-      removeLatestMessage,
-      setValue,
-      send,
-    ],
+    [flowId, removeLatestMessage, setValue, send],
   );
 
   const handleSendMessage = useCallback(
@@ -189,6 +131,13 @@ export const useSendMessage = (
     }
   }, [answer, addNewestAnswer]);
 
+  useEffect(() => {
+    // fetch prologue
+    if (messages.length === 0) {
+      sendMessage('');
+    }
+  }, [sendMessage, messages]);
+
   const handlePressEnter = useCallback(() => {
     if (done) {
       setValue('');

web/src/pages/flow/chat/index.less

@@ -1,5 +1,6 @@
 .chatContainer {
-  padding: 0 0 24px 24px;
+  padding: 0;
+  height: 100%;
   .messageContainer {
     overflow-y: auto;
     padding-right: 24px;