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/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],