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/pages/chat/chat-container/index.tsx

@@ -68,6 +68,7 @@ const ChatContainer = () => {
                     avatar={userInfo.avatar}
                     reference={buildMessageItemReference(conversation, message)}
                     clickDocumentButton={clickDocumentButton}
+                    index={i}
                   ></MessageItem>
                 );
               })}

web/src/pages/chat/hooks.ts

@@ -26,9 +26,9 @@ import {
 } 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,
@@ -252,23 +252,22 @@ export const useSelectCurrentConversation = () => {
   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,
           ],
@@ -278,6 +277,7 @@ export const useSelectCurrentConversation = () => {
     [],
   );
 
+  // 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);
@@ -291,6 +291,11 @@ export const useSelectCurrentConversation = () => {
               ...latestMessage,
               content: answer.answer,
               reference: answer.reference,
+              id: buildMessageUuid({
+                id: answer.id,
+                role: MessageType.Assistant,
+              }),
+              prompt: answer.prompt,
             } as IMessage,
           ],
         };
@@ -415,15 +420,13 @@ export const useSendMessage = (
   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,
           },
         ],
@@ -431,7 +434,7 @@ export const useSendMessage = (
 
       if (res && (res?.response.status !== 200 || res?.data?.retcode !== 0)) {
         // cancel loading
-        setValue(message);
+        setValue(message.content);
         console.info('removeLatestMessage111');
         removeLatestMessage();
       } else {
@@ -456,11 +459,11 @@ export const useSendMessage = (
   );
 
   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);
@@ -487,11 +490,20 @@ export const useSendMessage = (
   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

@@ -134,8 +134,8 @@ const MarkdownContent = ({
       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

@@ -58,6 +58,7 @@ const ChatContainer = () => {
                       sendLoading &&
                       conversation?.message.length - 1 === i
                     }
+                    index={i}
                   ></MessageItem>
                 );
               })}

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

@@ -6,7 +6,7 @@ import {
 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,
@@ -60,15 +60,13 @@ export const useSelectCurrentSharedConversation = (conversationId: string) => {
         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,
         ],
@@ -89,6 +87,11 @@ export const useSelectCurrentSharedConversation = (conversationId: string) => {
               ...latestMessage,
               content: answer.answer,
               reference: answer.reference,
+              id: buildMessageUuid({
+                id: answer.id,
+                role: MessageType.Assistant,
+              }),
+              prompt: answer.prompt,
             } as IMessage,
           ],
         };
@@ -152,22 +155,16 @@ export const useSendSharedMessage = (
   );
 
   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();
       }
     },
@@ -183,7 +180,7 @@ export const useSendSharedMessage = (
   );
 
   const handleSendMessage = useCallback(
-    async (message: string) => {
+    async (message: Message) => {
       if (conversationId !== '') {
         sendMessage(message);
       } else {
@@ -206,10 +203,20 @@ export const useSendSharedMessage = (
   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],