Feat: Use the message_id returned by the interface as the id of the reply message #3221 (#8434)

### What problem does this PR solve?
Feat: Use the message_id returned by the interface as the id of the
reply message #3221

### Type of change


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

web/src/hooks/logic-hooks.ts

@@ -334,6 +334,20 @@ export const useSelectDerivedMessages = () => {
     [],
   );
 
+  const addNewestOneQuestion = useCallback((message: Message) => {
+    setDerivedMessages((pre) => {
+      return [
+        ...pre,
+        {
+          ...message,
+          id: buildMessageUuid(message), // The message id is generated on the front end,
+          // and the message id returned by the back end is the same as the question id,
+          //  so that the pair of messages can be deleted together when deleting the message
+        },
+      ];
+    });
+  }, []);
+
   // Add the streaming message to the last item in the message list
   const addNewestAnswer = useCallback((answer: IAnswer) => {
     setDerivedMessages((pre) => {
@@ -355,6 +369,38 @@ export const useSelectDerivedMessages = () => {
     });
   }, []);
 
+  // Add the streaming message to the last item in the message list
+  const addNewestOneAnswer = useCallback((answer: IAnswer) => {
+    setDerivedMessages((pre) => {
+      const idx = pre.findIndex((x) => x.id === answer.id);
+
+      if (idx !== -1) {
+        return pre.map((x) => {
+          if (x.id === answer.id) {
+            return { ...x, content: answer.answer };
+          }
+          return x;
+        });
+      }
+
+      return [
+        ...(pre ?? []),
+        {
+          role: MessageType.Assistant,
+          content: answer.answer,
+          reference: answer.reference,
+          id: buildMessageUuid({
+            id: answer.id,
+            role: MessageType.Assistant,
+          }),
+          prompt: answer.prompt,
+          audio_binary: answer.audio_binary,
+          ...omit(answer, 'reference'),
+        },
+      ];
+    });
+  }, []);
+
   const removeLatestMessage = useCallback(() => {
     setDerivedMessages((pre) => {
       const nextMessages = pre?.slice(0, -2) ?? [];
@@ -406,6 +452,8 @@ export const useSelectDerivedMessages = () => {
     addNewestAnswer,
     removeLatestMessage,
     removeMessageById,
+    addNewestOneQuestion,
+    addNewestOneAnswer,
     removeMessagesAfterCurrentMessage,
   };
 };