feat: 发送消息时带上mentions信息

shared/index.tsx

@@ -129,7 +129,11 @@ export {
   addReaction,
   removeReaction,
 } from './model/message';
-export type { ChatMessageReaction, ChatMessage } from './model/message';
+export type {
+  ChatMessageReaction,
+  ChatMessage,
+  SendMessagePayloadMeta,
+} from './model/message';
 export type { PluginManifest } from './model/plugin';
 export type { UserBaseInfo, UserLoginInfo } from './model/user';
 export {

shared/model/message.ts

@@ -33,8 +33,12 @@ export interface SimpleMessagePayload {
   content: string;
 }
 
+export interface SendMessagePayloadMeta {
+  mentions?: string[];
+}
+
 export interface SendMessagePayload extends SimpleMessagePayload {
-  meta?: Record<string, unknown>;
+  meta?: SendMessagePayloadMeta;
 }
 
 /**

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

@@ -6,18 +6,22 @@ import { ClipboardHelper } from './clipboard-helper';
 import { ChatInputActionContext } from './context';
 import { uploadMessageImage } from './utils';
 import { ChatInputBoxInput } from './input';
+import type { SendMessagePayloadMeta } from 'tailchat-shared';
 
 interface ChatInputBoxProps {
-  onSendMsg: (msg: string) => void;
+  onSendMsg: (msg: string, meta?: SendMessagePayloadMeta) => void;
 }
 export const ChatInputBox: React.FC<ChatInputBoxProps> = React.memo((props) => {
   const inputRef = useRef<HTMLInputElement>(null);
   const [message, setMessage] = useState('');
+  const [mentions, setMentions] = useState<string[]>([]);
   const handleSendMsg = useCallback(() => {
-    props.onSendMsg(message);
+    props.onSendMsg(message, {
+      mentions,
+    });
     setMessage('');
     inputRef.current?.focus();
-  }, [message]);
+  }, [message, mentions]);
 
   const handleKeyDown = useCallback(
     (e: React.KeyboardEvent<HTMLInputElement | HTMLTextAreaElement>) => {
@@ -53,7 +57,10 @@ export const ChatInputBox: React.FC<ChatInputBoxProps> = React.memo((props) => {
           <ChatInputBoxInput
             inputRef={inputRef}
             value={message}
-            onChange={setMessage}
+            onChange={(message, mentions) => {
+              setMessage(message);
+              setMentions(mentions);
+            }}
             onKeyDown={handleKeyDown}
             onPaste={handlePaste}
           />

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

@@ -14,11 +14,11 @@ interface ChatInputBoxInputProps
   > {
   inputRef?: React.Ref<HTMLInputElement>;
   value: string;
-  onChange: (message: string) => void;
+  onChange: (message: string, mentions: string[]) => void;
 }
 export const ChatInputBoxInput: React.FC<ChatInputBoxInputProps> = React.memo(
   (props) => {
-    const mentions = useChatInputMentionsContext();
+    const allMentions = useChatInputMentionsContext();
 
     return (
       <MentionsInput
@@ -27,7 +27,12 @@ export const ChatInputBoxInput: React.FC<ChatInputBoxInputProps> = React.memo(
         placeholder={t('输入一些什么')}
         singleLine={true}
         value={props.value}
-        onChange={(e) => props.onChange(e.target.value)}
+        onChange={(e, newValue, _, mentions) =>
+          props.onChange(
+            newValue,
+            mentions.map((m) => m.id)
+          )
+        }
         onKeyDown={props.onKeyDown}
         onPaste={props.onPaste}
         allowSuggestionsAboveCursor={true}
@@ -35,7 +40,7 @@ export const ChatInputBoxInput: React.FC<ChatInputBoxInputProps> = React.memo(
       >
         <Mention
           trigger="@"
-          data={mentions.users}
+          data={allMentions.users}
           displayTransform={(id, display) => `@${display}`}
           appendSpaceOnAdd={true}
           renderSuggestion={(suggestion) => (

web/src/components/ChatBox/index.tsx

@@ -55,11 +55,12 @@ const ChatBoxInner: React.FC<ChatBoxProps> = React.memo((props) => {
       <ChatReply />
 
       <ChatInputBox
-        onSendMsg={(msg) => {
+        onSendMsg={(msg, meta) => {
           handleSendMessage({
             converseId: props.converseId,
             groupId: props.groupId,
             content: msg,
+            meta,
           });
         }}
       />