feat: 回复消息时聚焦消息输入框并自动在前面追加被艾特的人

shared/event/index.ts

@@ -1,5 +1,7 @@
 import { EventEmitter } from 'events';
-import type { SendMessagePayload } from '../model/message';
+import { useEffect } from 'react';
+import { useUpdateRef } from '../hooks/useUpdateRef';
+import type { ChatMessage, SendMessagePayload } from '../model/message';
 
 /**
  * 共享事件类型
@@ -21,6 +23,13 @@ export interface SharedEventMap {
    * 发送消息
    */
   sendMessage: (payload: SendMessagePayload) => void;
+
+  /**
+   * 回复消息事件
+   *
+   * 如果为null则是清空
+   */
+  replyMessage: (payload: ChatMessage | null) => void;
 }
 export type SharedEventType = keyof SharedEventMap;
 
@@ -43,3 +52,22 @@ export const sharedEvent = {
     bus.emit(eventName, ...args);
   },
 };
+
+export function useSharedEventHandler<
+  T extends SharedEventType,
+  H extends SharedEventMap[T]
+>(eventName: T, handler: H) {
+  const handlerRef = useUpdateRef(handler);
+
+  useEffect(() => {
+    const _handler: SharedEventMap[T] = (...args: any[]) => {
+      (handlerRef.current as any)(...args);
+    };
+
+    sharedEvent.on(eventName, _handler);
+
+    return () => {
+      sharedEvent.off(eventName, _handler);
+    };
+  }, []);
+}

shared/index.tsx

@@ -30,7 +30,7 @@ export {
 } from './contexts/GroupInfoContext';
 
 // event
-export { sharedEvent } from './event/index';
+export { sharedEvent, useSharedEventHandler } from './event/index';
 
 // helper
 export { getDMConverseName } from './helper/converse-helper';

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

@@ -6,7 +6,12 @@ import { ClipboardHelper } from './clipboard-helper';
 import { ChatInputActionContext } from './context';
 import { uploadMessageImage } from './utils';
 import { ChatInputBoxInput } from './input';
-import type { SendMessagePayloadMeta } from 'tailchat-shared';
+import {
+  getCachedUserInfo,
+  isValidStr,
+  SendMessagePayloadMeta,
+  useSharedEventHandler,
+} from 'tailchat-shared';
 
 interface ChatInputBoxProps {
   onSendMsg: (msg: string, meta?: SendMessagePayloadMeta) => void;
@@ -50,6 +55,22 @@ export const ChatInputBox: React.FC<ChatInputBoxProps> = React.memo((props) => {
     [props.onSendMsg]
   );
 
+  useSharedEventHandler('replyMessage', async (payload) => {
+    if (inputRef.current) {
+      inputRef.current.focus();
+      console.log(payload);
+      if (payload && isValidStr(payload?.author)) {
+        const userInfo = await getCachedUserInfo(payload.author);
+        setMessage(
+          `${getMessageTextDecorators().mention(
+            payload.author,
+            userInfo.nickname
+          )} ${message}`
+        );
+      }
+    }
+  });
+
   return (
     <ChatInputActionContext.Provider value={{ sendMsg: props.onSendMsg }}>
       <div className="px-4 py-2">

web/src/components/ChatBox/ChatMessageList/useChatMessageItemAction.tsx

@@ -5,6 +5,7 @@ import {
   ChatMessage,
   deleteMessage,
   recallMessage,
+  sharedEvent,
   t,
   useAsyncRequest,
   useChatBoxContext,
@@ -45,7 +46,7 @@ export function useChatMessageItemAction(
         <Menu.Item
           key="reply"
           icon={<Icon icon="mdi:reply" />}
-          onClick={() => context.setReplyMsg(payload)}
+          onClick={() => sharedEvent.emit('replyMessage', payload)}
         >
           {t('回复')}
         </Menu.Item>

web/src/components/ChatBox/ChatReply.tsx

@@ -1,12 +1,20 @@
 import React from 'react';
-import { t, useChatBoxContext } from 'tailchat-shared';
+import { t, useChatBoxContext, useSharedEventHandler } from 'tailchat-shared';
 import _isNil from 'lodash/isNil';
 import { getMessageRender } from '@/plugin/common';
 import { UserName } from '../UserName';
 import { Icon } from '@/components/Icon';
 
 export const ChatReply: React.FC = React.memo(() => {
-  const { replyMsg, clearReplyMsg } = useChatBoxContext();
+  const { replyMsg, setReplyMsg, clearReplyMsg } = useChatBoxContext();
+
+  useSharedEventHandler('replyMessage', (payload) => {
+    /**
+     * 这里故意在本组件设置回复消息体而不是在事件发起方设置是为了确保当本组件不存在时
+     * 不会出现回复消息的值呗设置的情况
+     */
+    setReplyMsg(payload);
+  });
 
   if (_isNil(replyMsg)) {
     return null;