include support for name mentions

Author: DanC5

src/components/Channel/Channel.tsx

@@ -495,6 +495,7 @@ const ChannelInner = <
         text,
       } = message;
 
+      // channel.sendMessage expects an array of user id strings
       const mentions = isUserResponseArray(mentioned_users)
         ? mentioned_users.map(({ id }) => id)
         : mentioned_users;
@@ -549,23 +550,18 @@ const ChannelInner = <
       text: string,
       attachments: MessageAttachments<At>,
       parent: MessageResponse<At, Ch, Co, Me, Re, Us> | undefined,
-      mentioned_users: string[],
+      mentioned_users: UserResponse<Us>[],
     ) => {
       // create a preview of the message
       const clientSideID = `${client.userID}-${uuidv4()}`;
 
-      // channel.state.addMessageSorted expects an array of user responses
-      const mappedMentions = mentioned_users.map((mention) => ({
-        id: mention,
-      }));
-
       return ({
         __html: text,
         attachments,
         created_at: new Date(),
         html: text,
         id: clientSideID,
-        mentioned_users: mappedMentions,
+        mentioned_users,
         reactions: [],
         status: 'sending',
         text,

src/components/MessageInput/MessageInput.tsx

@@ -2,7 +2,12 @@ import React from 'react';
 
 import { MessageInputLarge } from './MessageInputLarge';
 
-import type { Attachment, Channel, SendFileAPIResponse } from 'stream-chat';
+import type {
+  Attachment,
+  Channel,
+  SendFileAPIResponse,
+  UserResponse,
+} from 'stream-chat';
 
 import type { FileUpload, ImageUpload } from './hooks/messageInput';
 import type { SendButtonProps } from './icons';
@@ -101,7 +106,7 @@ export type MessageInputProps<
   overrideSubmitHandler?: (
     message: {
       attachments: Attachment<At>[];
-      mentioned_users: string[];
+      mentioned_users: UserResponse<Us>[];
       text: string;
       parent?: StreamMessage<At, Ch, Co, Ev, Me, Re, Us>;
     },

src/components/MessageInput/__tests__/MessageInput.test.js

@@ -700,7 +700,7 @@ const ActiveChannelSetter = ({ activeChannel }) => {
             expect.objectContaining(image),
             expect.objectContaining(file),
           ]),
-          mentioned_users: [userId],
+          mentioned_users: [{ id: userId, name: username }],
           text: message.text,
         }),
       );

src/components/MessageInput/hooks/messageInput.ts

@@ -679,12 +679,10 @@ export const useMessageInput = <
     // and allows users to easily undo any accidental deletion
     const actualMentionedUsers = Array.from(
       new Set(
-        mentioned_users
-          .filter(
-            ({ id, name }) =>
-              text.includes(`@${id}`) || text.includes(`@${name}`),
-          )
-          .map(({ id }) => id),
+        mentioned_users.filter(
+          ({ id, name }) =>
+            text.includes(`@${id}`) || text.includes(`@${name}`),
+        ),
       ),
     );
 

src/context/ChannelContext.tsx

@@ -80,7 +80,7 @@ export type MessageToSend<
 > = {
   attachments?: MessageAttachments<At>;
   id?: string;
-  mentioned_users?: string[];
+  mentioned_users?: UserResponse<Us>[];
   parent?: MessageResponse<At, Ch, Co, Me, Re, Us>;
   parent_id?: string;
   status?: string;