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/components/operate-dropdown/index.less

@@ -0,0 +1,3 @@
+.delete {
+  height: 24px;
+}

web/src/components/operate-dropdown/index.tsx

@@ -0,0 +1,61 @@
+import { ReactComponent as MoreIcon } from '@/assets/svg/more.svg';
+import { useShowDeleteConfirm } from '@/hooks/commonHooks';
+import { DeleteOutlined } from '@ant-design/icons';
+import { Dropdown, MenuProps, Space } from 'antd';
+import { useTranslation } from 'react-i18next';
+
+import React from 'react';
+import styles from './index.less';
+
+interface IProps {
+  deleteItem: () => Promise<any>;
+}
+
+const OperateDropdown = ({
+  deleteItem,
+  children,
+}: React.PropsWithChildren<IProps>) => {
+  const { t } = useTranslation();
+  const showDeleteConfirm = useShowDeleteConfirm();
+
+  const handleDelete = () => {
+    showDeleteConfirm({ onOk: deleteItem });
+  };
+
+  const handleDropdownMenuClick: MenuProps['onClick'] = ({ domEvent, key }) => {
+    domEvent.preventDefault();
+    domEvent.stopPropagation();
+    if (key === '1') {
+      handleDelete();
+    }
+  };
+
+  const items: MenuProps['items'] = [
+    {
+      key: '1',
+      label: (
+        <Space>
+          {t('common.delete')}
+          <DeleteOutlined />
+        </Space>
+      ),
+    },
+  ];
+
+  return (
+    <Dropdown
+      menu={{
+        items,
+        onClick: handleDropdownMenuClick,
+      }}
+    >
+      {children || (
+        <span className={styles.delete}>
+          <MoreIcon />
+        </span>
+      )}
+    </Dropdown>
+  );
+};
+
+export default OperateDropdown;

web/src/hooks/flow-hooks.ts

@@ -64,7 +64,7 @@ export const useSetFlow = () => {
         );
         queryClient.invalidateQueries({ queryKey: ['fetchFlowList'] });
       }
-      return data?.retcode;
+      return data;
     },
   });
 

web/src/hooks/logicHooks.ts

@@ -206,14 +206,14 @@ export const useSendMessageWithSse = (
 
 //#region chat hooks
 
-export const useScrollToBottom = (id?: string) => {
+export const useScrollToBottom = (messages?: unknown) => {
   const ref = useRef<HTMLDivElement>(null);
 
   const scrollToBottom = useCallback(() => {
-    if (id) {
+    if (messages) {
       ref.current?.scrollIntoView({ behavior: 'instant' });
     }
-  }, [id]);
+  }, [messages]); // If the message changes, scroll to the bottom
 
   useEffect(() => {
     scrollToBottom();

web/src/interfaces/database/flow.ts

@@ -1,4 +1,5 @@
 import { Edge, Node } from 'reactflow';
+import { IReference, Message } from './chat';
 
 export type DSLComponents = Record<string, IOperator>;
 
@@ -8,6 +9,8 @@ export interface DSL {
   path?: string[];
   answer?: any[];
   graph?: IGraph;
+  messages: Message[];
+  reference: IReference[];
 }
 
 export interface IOperator {
@@ -32,13 +35,7 @@ export interface IFlow {
   create_date: string;
   create_time: number;
   description: null;
-  dsl: {
-    answer: any[];
-    components: DSLComponents;
-    graph: IGraph;
-    history: any[];
-    path: string[];
-  };
+  dsl: DSL;
   id: string;
   title: string;
   update_date: string;

web/src/pages/chat/utils.ts

@@ -1,7 +1,7 @@
 import { MessageType } from '@/constants/chat';
 import { IConversation, IReference } from '@/interfaces/database/chat';
 import { EmptyConversationId } from './constants';
-import { IClientConversation, IMessage } from './interface';
+import { IMessage } from './interface';
 
 export const isConversationIdExist = (conversationId: string) => {
   return conversationId !== EmptyConversationId && conversationId !== '';
@@ -25,7 +25,7 @@ export const getDocumentIdsFromConversionReference = (data: IConversation) => {
 };
 
 export const buildMessageItemReference = (
-  conversation: IClientConversation,
+  conversation: { message: IMessage[]; reference: IReference[] },
   message: IMessage,
 ) => {
   const assistantMessages = conversation.message

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;