refactor!: remove deprecated message APIs before v15 GA

examples/cookbook/src/recipes/message-actions/action-bar/CustomMessageUi.tsx

@@ -6,8 +6,8 @@ import {
   MessageText,
   useChatContext,
   useMessageContext,
+  useMessagePermissions,
   useThreadContext,
-  useUserRole,
 } from 'stream-chat-react';
 import './CustomMessageUi.css';
 
@@ -63,6 +63,9 @@ const CustomMessageUiMetadata = () => {
     readBy = [],
   } = useMessageContext();
   const { client } = useChatContext();
+  // Read and delivery cursors sit on channel messages, so a thread list's `readBy` / `deliveredTo`
+  // say nothing about its replies, and the parent gets none. As in the SDK's `MessageStatus`, a
+  // message shown in a thread is never read, delivered or sent here.
   const isInThread = !!useThreadContext();
 
   const createdAt = convertTimestampToDate(message.created_at);
@@ -107,8 +110,10 @@ const CustomMessageUiMetadata = () => {
 const CustomMessageUiActions = () => {
   const { handleDelete, handleFlag, handleOpenThread, handlePin, message } =
     useMessageContext();
+  // Pinning and replying work on the channel list, so the thread's messages, the parent
+  // included, offer neither, as in the SDK's default message actions.
   const isInThread = !!useThreadContext();
-  const { canDelete, canFlag, canPin, canReply } = useUserRole(message);
+  const { canDelete, canFlag, canPin, canReply } = useMessagePermissions(message);
 
   return (
     <div className='cookbook-message-ui__actions'>

examples/cookbook/src/recipes/message-actions/reactions/CustomMessageUi.tsx

@@ -8,8 +8,8 @@ import {
   useChatContext,
   useComponentContext,
   useMessageContext,
+  useMessagePermissions,
   useThreadContext,
-  useUserRole,
 } from 'stream-chat-react';
 import './CustomMessageUi.css';
 
@@ -65,6 +65,9 @@ const CustomMessageUiMetadata = () => {
     readBy = [],
   } = useMessageContext();
   const { client } = useChatContext();
+  // Read and delivery cursors sit on channel messages, so a thread list's `readBy` / `deliveredTo`
+  // say nothing about its replies, and the parent gets none. As in the SDK's `MessageStatus`, a
+  // message shown in a thread is never read, delivered or sent here.
   const isInThread = !!useThreadContext();
 
   const createdAt = convertTimestampToDate(message.created_at);
@@ -115,8 +118,11 @@ const CustomMessageUiActions = () => {
     handleReaction,
     message,
   } = useMessageContext();
+  // Pinning and replying work on the channel list, so the thread's messages, the parent
+  // included, offer neither, as in the SDK's default message actions.
   const isInThread = !!useThreadContext();
-  const { canDelete, canFlag, canPin, canReact, canReply } = useUserRole(message);
+  const { canDelete, canFlag, canPin, canReact, canReply } =
+    useMessagePermissions(message);
   const { reactionOptions } = useComponentContext();
   const quickReactions =
     reactionOptions && 'quick' in reactionOptions ? reactionOptions.quick : {};

examples/cookbook/src/recipes/message-list/custom-message/CustomMessageUi.tsx

@@ -56,6 +56,9 @@ const getMessageStatus = ({
 const CustomMessageUiMetadata = () => {
   const { deliveredTo = [], isMyMessage, message, readBy = [] } = useMessageContext();
   const { client } = useChatContext();
+  // Read and delivery cursors sit on channel messages, so a thread list's `readBy` / `deliveredTo`
+  // say nothing about its replies, and the parent gets none. As in the SDK's `MessageStatus`, a
+  // message shown in a thread is never read, delivered or sent here.
   const isInThread = !!useThreadContext();
 
   const createdAt = convertTimestampToDate(message.created_at);

examples/cookbook/src/recipes/message-list/custom-message/steps/metadata/CustomMessageUi.tsx

@@ -55,6 +55,9 @@ const getMessageStatus = ({
 const CustomMessageUiMetadata = () => {
   const { deliveredTo = [], isMyMessage, message, readBy = [] } = useMessageContext();
   const { client } = useChatContext();
+  // Read and delivery cursors sit on channel messages, so a thread list's `readBy` / `deliveredTo`
+  // say nothing about its replies, and the parent gets none. As in the SDK's `MessageStatus`, a
+  // message shown in a thread is never read, delivered or sent here.
   const isInThread = !!useThreadContext();
 
   const createdAt = convertTimestampToDate(message.created_at);

examples/cookbook/src/recipes/message-list/pin-indicator/PinnedByIndicator.tsx

@@ -3,15 +3,15 @@ import { convertTimestampToDate } from 'stream-chat';
 import {
   useChatContext,
   useMessageContext,
-  useUserRole,
+  useMessagePermissions,
   WithComponents,
 } from 'stream-chat-react';
 import './PinnedByIndicator.css';
 
 const PinnedByIndicator = () => {
   const { client } = useChatContext();
   const { handlePin, message } = useMessageContext();
-  const { canPin } = useUserRole(message);
+  const { canPin } = useMessagePermissions(message);
 
   if (!message.pinned) return null;
 

examples/cookbook/src/recipes/message-list/read-receipt-avatars/ReadReceiptAvatars.tsx

@@ -21,15 +21,16 @@ const readersSelector = ({ readersByMessageId }: MessageReceiptsSnapshot) => ({
 const ReadReceiptAvatars = () => {
   const channel = useChannel();
   const { client } = useChatContext();
-  const { message } = useMessageContext();
-  const isInThread = !!useThreadContext();
+  const { initialMessage, message } = useMessageContext();
+  const isThreadReply = !!useThreadContext() && !initialMessage;
   const { readersByMessageId } = useStateStore(
     channel.messageReceiptsTracker.snapshotStore,
     readersSelector,
   );
 
-  // Read positions belong to the channel's main list, so a thread shows none.
-  if (isInThread) return null;
+  // Read positions belong to the channel's main list, so thread replies show none. The thread
+  // parent is a channel message and keeps its readers.
+  if (isThreadReply) return null;
 
   const readers = (readersByMessageId[message.id] ?? []).filter(
     (user) => user.id !== client.userId,

examples/cookbook/src/recipes/search/mentions-inbox/MentionsInbox.tsx

@@ -113,7 +113,7 @@ const Mention = ({ autoFocus, message }: MentionProps) => {
           />
         </span>
         <span className='cookbook-mention__text'>
-          {renderText(localMessage.text, undefined, {
+          {renderText(localMessage.text, {
             allowedTagNames,
             messageMentionEntities: getRenderTextMentionEntities(localMessage),
           })}

examples/vite/src/AppSettings/tabs/Reactions/ReactionsTab.tsx

@@ -24,8 +24,8 @@ export const ReactionsTab = ({ close }: ReactionsTabProps) => {
   const componentContext = useComponentContext();
   const { client } = useChatContext();
   // A real Channel, never queried or watched: `Message` reaches `channel.state` through
-  // `useUserRole` -> `useChannelCapabilities`, which subscribes to it as a StateStore. A plain
-  // object shaped like channel state crashes there, which is what this preview used to pass.
+  // `useMessagePermissions` -> `useChannelCapabilities`, which subscribes to it as a
+  // StateStore. A plain object shaped like channel state crashes there.
   const previewChannel = useMemo(
     () => client.channel('messaging', 'reactions-preview'),
     [client],

examples/vite/src/ChatLayout/Panels.tsx

@@ -1,10 +1,12 @@
 import clsx from 'clsx';
 import type {
   ChannelMemberResponse,
+  LocalMessage,
   Channel as StreamChannel,
   Thread as ThreadType,
 } from 'stream-chat';
 import {
+  type BaseSyntheticEvent,
   type MouseEvent,
   type PropsWithChildren,
   useCallback,
@@ -19,6 +21,7 @@ import {
   ChannelHeader,
   ChannelListItem,
   MessageComposerUI as DefaultMessageComposerUI,
+  getRenderTextMentionEntities,
   MessageComposer,
   MessageList,
   type MessageListProps,
@@ -80,6 +83,20 @@ export const THREAD_LIST_TARGET_ID = 'app-thread-list';
 export const CHANNELS_SELECTOR_BUTTON_TARGET_QUERY =
   '[id^="str-chat__chat-view-"][id$="-tab-channels"]';
 
+/**
+ * The user behind the clicked mention. Enter or Space targets the message text, not a mention, so
+ * it identifies a user only when the message's one mention is a user.
+ */
+const getMentionedUserId = (event: BaseSyntheticEvent, message: LocalMessage) => {
+  if (event.type === 'keydown') {
+    const [mention, ...otherMentions] = getRenderTextMentionEntities(message);
+    if (otherMentions.length || mention?.mentionType !== 'user') return undefined;
+    return mention.id;
+  }
+  return (event.target as HTMLElement).closest<HTMLElement>('[data-user-id]')?.dataset
+    .userId;
+};
+
 // Whether the app-settings "message list" toggle is set to the virtualized list. Read the same
 // way everywhere so every channel and thread honors the setting (not just the primary channel).
 const useVirtualizedMessageList = () =>
@@ -192,8 +209,8 @@ const ChannelThreadPanel = ({
           <ReturnToSkipNavigation />
           <ThreadHeader />
           <ThreadMessageList
-            onMentionsClick={(_event, mentionedUsers) =>
-              onOpenMemberDetail(mentionedUsers[0]?.id)
+            onMentionsClick={(event, message) =>
+              onOpenMemberDetail(getMentionedUserId(event, message))
             }
             onUserClick={(_event, user) => onOpenMemberDetail(user.id)}
           />
@@ -459,8 +476,8 @@ const ResponsiveChannelPanels = ({ mainChannel }: { mainChannel?: StreamChannel
                     <VirtualizedMessageList groupByUser returnAllReadData />
                   ) : (
                     <MessageList
-                      onMentionsClick={(_event, mentionedUsers) =>
-                        openMemberDetail(mentionedUsers[0]?.id)
+                      onMentionsClick={(event, message) =>
+                        openMemberDetail(getMentionedUserId(event, message))
                       }
                       onUserClick={(_event, user) => openMemberDetail(user.id)}
                       returnAllReadData

examples/vite/src/CustomMessageUi/variants.tsx

@@ -154,6 +154,9 @@ const CustomMessageUiMetadata = ({
     message,
     readBy = [],
   } = useMessageContext();
+  // Read and delivery cursors sit on channel messages, so a thread list's `readBy` / `deliveredTo`
+  // say nothing about its replies, and the parent gets none. As in the SDK's `MessageStatus`, a
+  // message shown in a thread is never read, delivered or sent here.
   const isInThread = !!useThreadContext();
   const { client } = useChatContext();
   const {

src/components/Message/Message.tsx

@@ -6,16 +6,18 @@ import {
   useFlagHandler,
   useMarkUnreadHandler,
   useMentionsHandler,
+  useMessagePermissions,
   useMuteHandler,
   useOpenThreadHandler,
   usePinHandler,
   useReactionHandler,
   useReactionsFetcher,
   useRetryHandler,
   useUserHandler,
-  useUserRole,
 } from './hooks';
+import type { UserEventHandler } from './hooks';
 import { areMessagePropsEqual } from './utils';
+import { useStableCallback } from '../../utils';
 
 import type { LocalMessage } from 'stream-chat';
 import type { MessageContextValue } from '../../context';
@@ -50,15 +52,15 @@ type MessageContextPropsToPick =
 
 type MessageWithContextProps = Omit<MessageProps, MessagePropsToOmit> &
   Pick<MessageContextValue, MessageContextPropsToPick> & {
-    userRoles: ReturnType<typeof useUserRole>;
+    permissions: ReturnType<typeof useMessagePermissions>;
   };
 
 const MessageWithContext = (props: MessageWithContextProps) => {
   const {
     message,
     onUserClick: propOnUserClick,
     onUserHover: propOnUserHover,
-    userRoles,
+    permissions,
   } = props;
 
   const { isMessageAIGenerated } = useChatContext();
@@ -77,12 +79,12 @@ const MessageWithContext = (props: MessageWithContextProps) => {
     onUserHoverHandler: propOnUserHover,
   });
 
-  const { isMyMessage } = userRoles;
+  const { isMyMessage } = permissions;
 
   const {
     onUserClick: onUserClickPropToNotPass, // eslint-disable-line @typescript-eslint/no-unused-vars
     onUserHover: onUserHoverPropToNotPass, // eslint-disable-line @typescript-eslint/no-unused-vars
-    userRoles: userRolesPropToNotPass, // eslint-disable-line @typescript-eslint/no-unused-vars
+    permissions: permissionsPropToNotPass, // eslint-disable-line @typescript-eslint/no-unused-vars
     ...rest
   } = props;
 
@@ -115,18 +117,19 @@ const MemoizedMessage = React.memo(
 export const Message = (props: MessageProps) => {
   const {
     closeReactionSelectorOnClick,
-    disableQuotedMessages,
     message,
     onMentionsClick: propOnMentionsClick,
     onMentionsHover: propOnMentionsHover,
+    onUserClick: propOnUserClick,
+    onUserHover: propOnUserHover,
     openThread: propOpenThread,
     reactionDetailsSort,
     sortReactions,
   } = props;
 
   const handleAction = useActionHandler(message);
   const handleReaction = useReactionHandler(message);
-  const userRoles = useUserRole(message, disableQuotedMessages);
+  const permissions = useMessagePermissions(message);
 
   const handleFetchReactions = useReactionsFetcher(message);
 
@@ -142,6 +145,14 @@ export const Message = (props: MessageProps) => {
     onMentionsClick: propOnMentionsClick,
     onMentionsHover: propOnMentionsHover,
   });
+  // The memoized message ignores handler identity, so a swapped `onUserClick` / `onUserHover`
+  // reaches it through these stable wrappers, which always call the latest prop.
+  const onUserClick: UserEventHandler = useStableCallback((event, user) =>
+    propOnUserClick?.(event, user),
+  );
+  const onUserHover: UserEventHandler = useStableCallback((event, user) =>
+    propOnUserHover?.(event, user),
+  );
 
   const { handlePin } = usePinHandler(message);
   const handleOpenThread = useOpenThreadHandler(message, propOpenThread);
@@ -157,7 +168,6 @@ export const Message = (props: MessageProps) => {
       autoscrollToBottom={props.autoscrollToBottom}
       closeReactionSelectorOnClick={closeReactionSelectorOnClick}
       deliveredTo={props.deliveredTo}
-      disableQuotedMessages={props.disableQuotedMessages}
       formatDate={props.formatDate}
       groupStyles={props.groupStyles}
       handleAction={handleAction}
@@ -178,15 +188,16 @@ export const Message = (props: MessageProps) => {
       messageListRect={props.messageListRect}
       onMentionsClickMessage={onMentionsClick}
       onMentionsHoverMessage={onMentionsHover}
-      onUserClick={props.onUserClick}
-      onUserHover={props.onUserHover}
+      onUserClick={onUserClick}
+      onUserHover={onUserHover}
+      permissions={permissions}
       reactionDetailsSort={reactionDetailsSort}
       readBy={props.readBy}
       renderText={props.renderText}
       returnAllReadData={props.returnAllReadData}
+      showAvatar={props.showAvatar}
       sortReactions={sortReactions}
       unsafeHTML={props.unsafeHTML}
-      userRoles={userRoles}
     />
   );
 };

src/components/Message/MessageBlocked.tsx

@@ -1,15 +1,15 @@
 import React from 'react';
 import clsx from 'clsx';
 
-import { useUserRole } from './hooks/useUserRole';
+import { useMessagePermissions } from './hooks/useMessagePermissions';
 import { useTranslationContext } from '../../context/TranslationContext';
 import { useMessageContext } from '../../context';
 
 export const MessageBlocked = () => {
   const { message } = useMessageContext();
   const { t } = useTranslationContext();
 
-  const { isMyMessage } = useUserRole(message);
+  const { isMyMessage } = useMessagePermissions(message);
 
   const messageClasses = clsx(
     'str-chat__message str-chat__message--blocked',

src/components/Message/MessageText.tsx

@@ -70,10 +70,10 @@ const UnMemoizedMessageTextComponent = (props: MessageTextProps) => {
 
   const messageText = useMemo(
     () =>
-      renderText(messageTextToRender, message.mentioned_users, {
+      renderText(messageTextToRender, {
         messageMentionEntities: renderTextMentionEntities,
       }),
-    [message.mentioned_users, messageTextToRender, renderText, renderTextMentionEntities],
+    [messageTextToRender, renderText, renderTextMentionEntities],
   );
 
   const wrapperClass = customWrapperClass || 'str-chat__message-text';
@@ -97,7 +97,7 @@ const UnMemoizedMessageTextComponent = (props: MessageTextProps) => {
     }
 
     event.preventDefault();
-    onMentionsClickMessage(event);
+    onMentionsClickMessage?.(event);
   };
 
   if (!messageTextToRender) return null;
@@ -115,12 +115,14 @@ const UnMemoizedMessageTextComponent = (props: MessageTextProps) => {
       <div
         aria-labelledby={isMentionsInteractionEnabled ? messageLabelledBy : undefined}
         className={clsx(innerClass, {
-          [` str-chat__message-text-inner--is-emoji`]:
+          'str-chat__message-text-inner--has-attachment': hasAttachment,
+          'str-chat__message-text-inner--is-emoji':
             messageTextHasEmojisOnly(message) && !message.quoted_message,
-          [`str-chat__message-text-inner--has-attachment`]: hasAttachment,
+          'str-chat__message-text-inner--mentions-clickable':
+            isMentionsInteractionEnabled,
         })}
         data-testid='message-text-inner-wrapper'
-        onClick={onMentionsClickMessage}
+        onClick={isMentionsInteractionEnabled ? onMentionsClickMessage : undefined}
         onKeyDown={isMentionsInteractionEnabled ? handleMentionsKeyDown : undefined}
         onMouseOver={onMentionsHoverMessage}
         tabIndex={isMentionsInteractionEnabled ? 0 : undefined}