feat: Send message with uuid #2088 (#2149)

### What problem does this PR solve?

feat: Send message with uuid #2088

### Type of change


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

web/src/components/message-item/group-button.tsx

   );
 };
 
-export const UserGroupButton = () => {
+interface UserGroupButtonProps {
+  messageId: string;
+  content: string;
+}
+
+export const UserGroupButton = ({ content }: UserGroupButtonProps) => {
   return (
     <Radio.Group size="small">
       <Radio.Button value="a">
-        <CopyToClipboard text="xxx"></CopyToClipboard>
+        <CopyToClipboard text={content}></CopyToClipboard>
       </Radio.Button>
       <Radio.Button value="b">
         <SyncOutlined />

web/src/components/message-item/index.tsx

   nickname?: string;
   avatar?: string;
   clickDocumentButton?: (documentId: string, chunk: IChunk) => void;
+  index: number;
 }
 
 const MessageItem = ({
   loading = false,
   avatar = '',
   clickDocumentButton,
+  index,
 }: IProps) => {
   const isAssistant = item.role === MessageType.Assistant;
   const isUser = item.role === MessageType.User;
           <Flex vertical gap={8} flex={1}>
             <Space>
               {isAssistant ? (
-                <AssistantGroupButton
-                  messageId={item.id}
-                  content={item.content}
-                  prompt={item.prompt}
-                ></AssistantGroupButton>
+                index !== 0 && (
+                  <AssistantGroupButton
+                    messageId={item.id}
+                    content={item.content}
+                    prompt={item.prompt}
+                  ></AssistantGroupButton>
+                )
               ) : (
-                <UserGroupButton></UserGroupButton>
+                <UserGroupButton
+                  content={item.content}
+                  messageId={item.id}
+                ></UserGroupButton>
               )}
 
               {/* <b>{isAssistant ? '' : nickname}</b> */}

web/src/hooks/chat-hooks.ts

 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
 import { message } from 'antd';
 import dayjs, { Dayjs } from 'dayjs';
+import { set } from 'lodash';
 import { useCallback, useMemo, useState } from 'react';
 import { useSearchParams } from 'umi';
 
+const buildMessageListWithUuid = (messages?: Message[]) => {
+  return (
+    messages?.map((x: Message | IMessage) => ({
+      ...x,
+      id: buildMessageUuid(x),
+    })) ?? []
+  );
+};
+
 //#region logic
 
 export const useClickDialogCard = () => {
         // }
         const conversation = data?.data ?? {};
 
-        const messageList =
-          conversation?.message?.map((x: Message | IMessage) => ({
-            ...x,
-            id: buildMessageUuid(x),
-          })) ?? [];
+        const messageList = buildMessageListWithUuid(conversation?.message);
 
         return { ...conversation, message: messageList };
       }
 };
 
 export const useDeleteMessage = () => {
-  // const queryClient = useQueryClient();
   const { conversationId } = useGetChatSearchParams();
 
   const {
         messageId,
         conversationId,
       });
-      if (data.retcode === 0) {
-        // queryClient.invalidateQueries({ queryKey: ['fetchConversationList'] });
-      }
+
       return data.retcode;
     },
   });
         conversationId,
       );
 
+      const messageList = buildMessageListWithUuid(data?.data?.message);
+
+      set(data, 'data.message', messageList);
+
       return data;
     },
   });

web/src/pages/chat/chat-container/index.tsx

                     avatar={userInfo.avatar}
                     reference={buildMessageItemReference(conversation, message)}
                     clickDocumentButton={clickDocumentButton}
+                    index={i}
                   ></MessageItem>
                 );
               })}

web/src/pages/chat/hooks.ts

 } from '@/interfaces/database/chat';
 import { IChunk } from '@/interfaces/database/knowledge';
 import { getFileExtension } from '@/utils';
+import { buildMessageUuid } from '@/utils/chat';
 import { useMutationState } from '@tanstack/react-query';
 import { get } from 'lodash';
-import omit from 'lodash/omit';
 import trim from 'lodash/trim';
 import {
   ChangeEventHandler,
   const { data: dialog } = useFetchNextDialog();
   const { conversationId, dialogId } = useGetChatSearchParams();
 
+  // Show the entered message in the conversation immediately after sending the message
   const addNewestConversation = useCallback(
-    (message: Partial<Message>, answer: string = '') => {
+    (message: Message, answer: string = '') => {
       setCurrentConversation((pre) => {
         return {
           ...pre,
           message: [
             ...pre.message,
             {
-              role: MessageType.User,
-              content: message.content,
-              doc_ids: message.doc_ids,
-              id: uuid(),
+              ...message,
+              id: buildMessageUuid(message),
             } as IMessage,
             {
               role: MessageType.Assistant,
               content: answer,
-              id: uuid(),
+              id: buildMessageUuid({ ...message, role: MessageType.Assistant }),
               reference: {},
             } as IMessage,
           ],
     [],
   );
 
+  // Add the streaming message to the last item in the message list
   const addNewestAnswer = useCallback((answer: IAnswer) => {
     setCurrentConversation((pre) => {
       const latestMessage = pre.message?.at(-1);
               ...latestMessage,
               content: answer.answer,
               reference: answer.reference,
+              id: buildMessageUuid({
+                id: answer.id,
+                role: MessageType.Assistant,
+              }),
+              prompt: answer.prompt,
             } as IMessage,
           ],
         };
   const { send, answer, done, setDone } = useSendMessageWithSse();
 
   const sendMessage = useCallback(
-    async (message: string, documentIds: string[], id?: string) => {
+    async (message: Message, documentIds: string[], id?: string) => {
       const res = await send({
         conversation_id: id ?? conversationId,
         messages: [
-          ...(conversation?.message ?? []).map((x: IMessage) => omit(x, 'id')),
+          ...(conversation?.message ?? []),
           {
-            id: uuid(),
-            role: MessageType.User,
-            content: message,
+            ...message,
             doc_ids: documentIds,
           },
         ],
 
       if (res && (res?.response.status !== 200 || res?.data?.retcode !== 0)) {
         // cancel loading
-        setValue(message);
+        setValue(message.content);
         console.info('removeLatestMessage111');
         removeLatestMessage();
       } else {
   );
 
   const handleSendMessage = useCallback(
-    async (message: string, documentIds: string[]) => {
+    async (message: Message, documentIds: string[]) => {
       if (conversationId !== '') {
         sendMessage(message, documentIds);
       } else {
-        const data = await setConversation(message);
+        const data = await setConversation(message.content);
         if (data.retcode === 0) {
           const id = data.data.id;
           sendMessage(message, documentIds, id);
   const handlePressEnter = useCallback(
     (documentIds: string[]) => {
       if (trim(value) === '') return;
+      const id = uuid();
 
-      addNewestConversation({ content: value, doc_ids: documentIds });
+      addNewestConversation({
+        content: value,
+        doc_ids: documentIds,
+        id,
+        role: MessageType.User,
+      });
       if (done) {
         setValue('');
-        handleSendMessage(value.trim(), documentIds);
+        handleSendMessage(
+          { id, content: value.trim(), role: MessageType.User },
+          documentIds,
+        );
       }
     },
     [addNewestConversation, handleSendMessage, done, setValue, value],

web/src/pages/chat/markdown-content/index.tsx

       let replacedText = reactStringReplace(text, reg, (match, i) => {
         const chunkIndex = getChunkIndex(match);
         return (
-          <Popover content={getPopoverContent(chunkIndex)}>
-            <InfoCircleOutlined key={i} className={styles.referenceIcon} />
+          <Popover content={getPopoverContent(chunkIndex)} key={i}>
+            <InfoCircleOutlined className={styles.referenceIcon} />
           </Popover>
         );
       });

web/src/pages/chat/share/large.tsx

                       sendLoading &&
                       conversation?.message.length - 1 === i
                     }
+                    index={i}
                   ></MessageItem>
                 );
               })}

web/src/pages/chat/shared-hooks.ts

 import { useSendMessageWithSse } from '@/hooks/logic-hooks';
 import { IAnswer, Message } from '@/interfaces/database/chat';
 import api from '@/utils/api';
-import omit from 'lodash/omit';
+import { buildMessageUuid } from '@/utils/chat';
 import trim from 'lodash/trim';
 import {
   Dispatch,
         message: [
           ...(pre.message ?? []),
           {
-            role: MessageType.User,
-            content: message.content,
-            doc_ids: message.doc_ids,
-            id: uuid(),
+            ...message,
+            id: buildMessageUuid(message),
           } as IMessage,
           {
             role: MessageType.Assistant,
             content: '',
-            id: uuid(),
+            id: buildMessageUuid({ ...message, role: MessageType.Assistant }),
             reference: {},
           } as IMessage,
         ],
               ...latestMessage,
               content: answer.answer,
               reference: answer.reference,
+              id: buildMessageUuid({
+                id: answer.id,
+                role: MessageType.Assistant,
+              }),
+              prompt: answer.prompt,
             } as IMessage,
           ],
         };
   );
 
   const sendMessage = useCallback(
-    async (message: string, id?: string) => {
+    async (message: Message, id?: string) => {
       const res = await send({
         conversation_id: id ?? conversationId,
         quote: false,
-        messages: [
-          ...(conversation?.message ?? []).map((x: IMessage) => omit(x, 'id')),
-          {
-            role: MessageType.User,
-            content: message,
-          },
-        ],
+        messages: [...(conversation?.message ?? []), message],
       });
 
       if (res && (res?.response.status !== 200 || res?.data?.retcode !== 0)) {
         // cancel loading
-        setValue(message);
+        setValue(message.content);
         removeLatestMessage();
       }
     },
   );
 
   const handleSendMessage = useCallback(
-    async (message: string) => {
+    async (message: Message) => {
       if (conversationId !== '') {
         sendMessage(message);
       } else {
   const handlePressEnter = useCallback(
     (documentIds: string[]) => {
       if (trim(value) === '') return;
+      const id = uuid();
       if (done) {
         setValue('');
-        addNewestConversation({ content: value, doc_ids: documentIds });
-        handleSendMessage(value.trim());
+        addNewestConversation({
+          content: value,
+          doc_ids: documentIds,
+          id,
+          role: MessageType.User,
+        });
+        handleSendMessage({
+          content: value.trim(),
+          id,
+          role: MessageType.User,
+        });
       }
     },
     [addNewestConversation, done, handleSendMessage, setValue, value],

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

                       message,
                     )}
                     clickDocumentButton={clickDocumentButton}
+                    index={i}
                   ></MessageItem>
                 );
               })}

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

   useScrollToBottom,
   useSendMessageWithSse,
 } from '@/hooks/logic-hooks';
-import { IAnswer } from '@/interfaces/database/chat';
+import { IAnswer, Message } from '@/interfaces/database/chat';
 import { IMessage } from '@/pages/chat/interface';
 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 { useParams } from 'umi';
 import { v4 as uuid } from 'uuid';
   const ref = useScrollToBottom(currentMessages);
 
   const addNewestQuestion = useCallback(
-    (message: string, answer: string = '') => {
+    (message: Message, answer: string = '') => {
       setCurrentMessages((pre) => {
         return [
           ...pre,
           {
-            role: MessageType.User,
-            content: message,
-            id: uuid(),
+            ...message,
+            id: buildMessageUuid(message),
           },
           {
             role: MessageType.Assistant,
             content: answer,
-            id: uuid(),
+            id: buildMessageUuid({ ...message, role: MessageType.Assistant }),
           },
         ];
       });
       return [
         ...pre.slice(0, -1),
         {
-          id: uuid(),
           role: MessageType.Assistant,
           content: answer.answer,
           reference: answer.reference,
+          id: buildMessageUuid({
+            id: answer.id,
+            role: MessageType.Assistant,
+          }),
         },
       ];
     });
 };
 
 export const useSendMessage = (
-  addNewestQuestion: (message: string, answer?: string) => void,
+  addNewestQuestion: (message: Message, answer?: string) => void,
   removeLatestMessage: () => void,
   addNewestAnswer: (answer: IAnswer) => void,
 ) => {
   const { send, answer, done } = useSendMessageWithSse(api.runCanvas);
 
   const sendMessage = useCallback(
-    async (message: string) => {
+    async (message: Message) => {
       const params: Record<string, unknown> = {
         id: flowId,
       };
-      if (message) {
-        params.message = message;
+      if (message.content) {
+        params.message = message.content;
+        params.message_id = message.id;
       }
       const res = await send(params);
 
         antMessage.error(res?.data?.retmsg);
 
         // cancel loading
-        setValue(message);
+        setValue(message.content);
         removeLatestMessage();
       } else {
         refetch(); // pull the message list after sending the message successfully
   );
 
   const handleSendMessage = useCallback(
-    async (message: string) => {
+    async (message: Message) => {
       sendMessage(message);
     },
     [sendMessage],
   }, [answer, addNewestAnswer]);
 
   const handlePressEnter = useCallback(() => {
+    if (trim(value) === '') return;
+    const id = uuid();
     if (done) {
       setValue('');
-      handleSendMessage(value.trim());
+      handleSendMessage({ id, content: value.trim(), role: MessageType.User });
     }
-    addNewestQuestion(value);
+    addNewestQuestion({
+      content: value,
+      id,
+      role: MessageType.User,
+    });
   }, [addNewestQuestion, handleSendMessage, done, setValue, value]);
 
   return {

web/src/utils/chat.ts

   return conversationId !== EmptyConversationId && conversationId !== '';
 };
 
-export const buildMessageUuid = (message: Message | IMessage) => {
+export const buildMessageUuid = (message: Partial<Message | IMessage>) => {
   if ('id' in message && message.id) {
     return message.role === MessageType.User
       ? `${MessageType.User}_${message.id}`