feat: 回复消息的发送消息时带上meta信息

shared/contexts/ChatBoxContext.tsx

@@ -1,6 +1,6 @@
 import React, { useCallback, useContext, useState } from 'react';
 import _noop from 'lodash/noop';
-import type { ReplyMsgType } from '../utils/msg-helper';
+import type { ReplyMsgType } from '../utils/message-helper';
 
 /**
  * 一个消息盒的上下文

shared/model/message.ts

@@ -13,17 +13,23 @@ export interface ChatMessage {
 
   reactions?: any[];
 
+  meta?: Record<string, unknown>;
+
   createdAt?: string;
 
   updatedAt?: string;
 }
 
-export interface SendMessagePayload {
+export interface SimpleMessagePayload {
   groupId?: string;
   converseId: string;
   content: string;
 }
 
+export interface SendMessagePayload extends SimpleMessagePayload {
+  meta?: Record<string, unknown>;
+}
+
 /**
  * 获取会话消息
  * @param converseId 会话ID

shared/redux/hooks/useConverseMessage.ts

@@ -10,6 +10,49 @@ import {
 import { chatActions } from '../slices';
 import { useAppDispatch, useAppSelector } from './useAppSelector';
 import _isNil from 'lodash/isNil';
+import { useChatBoxContext } from '../..';
+import { MessageHelper } from '../../utils/message-helper';
+
+function useHandleSendMessage(context: ConverseContext) {
+  const { converseId } = context;
+  const dispatch = useAppDispatch();
+  const { hasContext, replyMsg, clearReplyMsg } = useChatBoxContext();
+
+  /**
+   * 发送消息
+   */
+  const handleSendMessage = useCallback(
+    async (payload: SendMessagePayload) => {
+      try {
+        if (hasContext === true) {
+          // 如果有上下文, 则组装payload
+          const msgHelper = new MessageHelper(payload);
+          if (!_isNil(replyMsg)) {
+            msgHelper.setReplyMsg(replyMsg);
+            clearReplyMsg();
+          }
+
+          payload = msgHelper.generatePayload();
+        }
+
+        // TODO: 增加临时消息, 对网络环境不佳的状态进行优化
+
+        const message = await sendMessage(payload);
+        dispatch(
+          chatActions.appendConverseMessage({
+            converseId,
+            messages: [message],
+          })
+        );
+      } catch (err) {
+        showErrorToasts(err);
+      }
+    },
+    [converseId, hasContext, replyMsg, clearReplyMsg]
+  );
+
+  return handleSendMessage;
+}
 
 /**
  * 会话消息管理
@@ -81,21 +124,7 @@ export function useConverseMessage(context: ConverseContext) {
     }
   }, [converseId]);
 
-  const handleSendMessage = useCallback(async (payload: SendMessagePayload) => {
-    // TODO: 增加临时消息, 对网络环境不佳的状态进行优化
-
-    try {
-      const message = await sendMessage(payload);
-      dispatch(
-        chatActions.appendConverseMessage({
-          converseId,
-          messages: [message],
-        })
-      );
-    } catch (err) {
-      showErrorToasts(err);
-    }
-  }, []);
+  const handleSendMessage = useHandleSendMessage(context);
 
   return { messages, loading, error, handleSendMessage };
 }

shared/utils/message-helper.ts

@@ -0,0 +1,34 @@
+import type {
+  ChatMessage,
+  SendMessagePayload,
+  SimpleMessagePayload,
+} from '../model/message';
+import _isNil from 'lodash/isNil';
+import _set from 'lodash/set';
+import _pick from 'lodash/pick';
+
+const replyMsgFields = ['_id', 'content', 'author'] as const;
+export type ReplyMsgType = Pick<ChatMessage, typeof replyMsgFields[number]>;
+
+export class MessageHelper {
+  private payload: SendMessagePayload;
+
+  constructor(origin: SimpleMessagePayload) {
+    this.payload = { ...origin };
+  }
+
+  setReplyMsg(replyMsg: ReplyMsgType) {
+    if (_isNil(replyMsg)) {
+      return;
+    }
+
+    _set(this.payload, ['meta', 'reply'], _pick(replyMsg, replyMsgFields));
+  }
+
+  /**
+   * 生成待发送的消息体
+   */
+  generatePayload(): SendMessagePayload {
+    return { ...this.payload };
+  }
+}

shared/utils/msg-helper.ts

@@ -1,4 +0,0 @@
-import type { ChatMessage } from '../model/message';
-
-const replyMsgFields = ['_id', 'content', 'author'] as const;
-export type ReplyMsgType = Pick<ChatMessage, typeof replyMsgFields[number]>;

web/src/components/ChatBox/ChatInputBox/index.tsx

@@ -46,7 +46,7 @@ export const ChatInputBox: React.FC<ChatInputBoxProps> = React.memo((props) => {
                 const fileInfo = await uploadFile(image);
                 const imageRemoteUrl = fileInfo.url;
 
-                // TODO: not good
+                // TODO: not good, should bind with plugin bbcode
                 props.onSendMsg(`[img]${imageRemoteUrl}[/img]`);
                 closeModal(key);
               }}

web/src/components/ChatBox/index.tsx

@@ -18,7 +18,7 @@ type ChatBoxProps =
       isGroup: true;
       groupId: string;
     };
-export const ChatBox: React.FC<ChatBoxProps> = React.memo((props) => {
+const ChatBoxInner: React.FC<ChatBoxProps> = React.memo((props) => {
   const { converseId, isGroup } = props;
   const { messages, loading, error, handleSendMessage } = useConverseMessage({
     converseId,
@@ -36,29 +36,36 @@ export const ChatBox: React.FC<ChatBoxProps> = React.memo((props) => {
   }
 
   return (
-    <ChatBoxContextProvider>
-      <div className="w-full h-full flex flex-col select-text">
-        <ChatMessageList
-          ref={chatMessageListRef}
-          messages={messages}
-          onUpdateReadedMessage={updateConverseAck}
-        />
+    <div className="w-full h-full flex flex-col select-text">
+      <ChatMessageList
+        ref={chatMessageListRef}
+        messages={messages}
+        onUpdateReadedMessage={updateConverseAck}
+      />
 
-        <ChatReply />
+      <ChatReply />
+
+      <ChatInputBox
+        onSendMsg={(msg) => {
+          // 发送消息后滚动到底部
+          handleSendMessage({
+            converseId: props.converseId,
+            groupId: props.groupId,
+            content: msg,
+          }).then(() => {
+            chatMessageListRef.current?.scrollToBottom();
+          });
+        }}
+      />
+    </div>
+  );
+});
+ChatBoxInner.displayName = 'ChatBoxInner';
 
-        <ChatInputBox
-          onSendMsg={(msg) => {
-            // 发送消息后滚动到底部
-            handleSendMessage({
-              converseId: props.converseId,
-              groupId: props.groupId,
-              content: msg,
-            }).then(() => {
-              chatMessageListRef.current?.scrollToBottom();
-            });
-          }}
-        />
-      </div>
+export const ChatBox: React.FC<ChatBoxProps> = React.memo((props) => {
+  return (
+    <ChatBoxContextProvider>
+      <ChatBoxInner {...props} />
     </ChatBoxContextProvider>
   );
 });