@linktr.ee/messaging-react 3.9.0-rc-1783580190 → 3.9.1-rc-1783576271

package/src/components/CustomMessage/SentMessageDeliveryStatus.test.tsx

@@ -1,7 +1,6 @@
 import React from 'react'
 import {
   useChannelStateContext,
-  useChatContext,
   useMessageContext,
 } from 'stream-chat-react'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
@@ -13,14 +12,13 @@ import { SentMessageDeliveryStatus } from './SentMessageDeliveryStatus'
 // stream-chat-react's `MessageStatus` owns the outer gating (own message, not
 // error, not in a thread) and only exposes a terminal state once a message is
 // stored — Stream's tested code. What this component owns is the "Delivered"
-// label wired into the terminal slots (sent/delivered/read), its "last own
-// message" gate derived from live channel state, and suppressing the sending
-// spinner. Mock `MessageStatus` to render the slots it was handed, and the
-// context hooks the label reads.
+// label wired into the terminal slots (sent/delivered/read), its "latest
+// message in the thread" gate derived from live channel state, and suppressing
+// the sending spinner. Mock `MessageStatus` to render the slots it was handed,
+// and the context hooks the label reads.
 vi.mock('stream-chat-react', () => ({
   useMessageContext: vi.fn(),
   useChannelStateContext: vi.fn(),
-  useChatContext: vi.fn(),
   MessageStatus: ({
     MessageSentStatus,
     MessageDeliveredStatus,
@@ -46,10 +44,10 @@ vi.mock('stream-chat-react', () => ({
 
 const mockedUseMessageContext = vi.mocked(useMessageContext)
 const mockedUseChannelStateContext = vi.mocked(useChannelStateContext)
-const mockedUseChatContext = vi.mocked(useChatContext)
 
 // A run where the viewer ('me') sent the first and last messages, with an
-// incoming message in between — the case that broke the memo-based approach.
+// incoming message in between — the label must sit on the last message ('own-2')
+// and clear from the earlier one.
 const CHANNEL_MESSAGES = [
   { id: 'own-1', user: { id: 'me' } },
   { id: 'their-1', user: { id: 'them' } },
@@ -60,13 +58,12 @@ const TERMINAL_SLOTS = ['sent-slot', 'delivered-slot', 'read-slot'] as const
 
 describe('SentMessageDeliveryStatus', () => {
   beforeEach(() => {
-    mockedUseChatContext.mockReturnValue({ client: { user: { id: 'me' } } } as never)
     mockedUseChannelStateContext.mockReturnValue({
       messages: CHANNEL_MESSAGES,
     } as never)
   })
 
-  it('renders "Delivered" in every terminal slot for the last own message', () => {
+  it('renders "Delivered" in every terminal slot for the last message in the thread', () => {
     // delivered/read fire ahead of sent in receipt channels, so all three
     // must show the label — never Stream's default delivered icon / read
     // avatars.
@@ -83,7 +80,7 @@ describe('SentMessageDeliveryStatus', () => {
     }
   })
 
-  it('renders nothing for an earlier own message even though one is the last own message', () => {
+  it('renders nothing for an earlier own message once a later message exists', () => {
     mockedUseMessageContext.mockReturnValue({
       message: { id: 'own-1' },
     } as never)
@@ -95,6 +92,27 @@ describe('SentMessageDeliveryStatus', () => {
     }
   })
 
+  it('renders nothing for an own message once a reply arrives after it', () => {
+    // 'own-2' was the viewer's last sent message, but 'their-1' is now the
+    // latest message in the thread — the label must clear from the bubble.
+    mockedUseChannelStateContext.mockReturnValue({
+      messages: [
+        { id: 'own-1', user: { id: 'me' } },
+        { id: 'own-2', user: { id: 'me' } },
+        { id: 'their-1', user: { id: 'them' } },
+      ],
+    } as never)
+    mockedUseMessageContext.mockReturnValue({
+      message: { id: 'own-2' },
+    } as never)
+
+    renderWithProviders(<SentMessageDeliveryStatus />)
+
+    for (const slot of TERMINAL_SLOTS) {
+      expect(screen.getByTestId(slot)).toBeEmptyDOMElement()
+    }
+  })
+
   it('always suppresses the sending spinner', () => {
     mockedUseMessageContext.mockReturnValue({
       message: { id: 'own-2' },

package/src/components/CustomMessage/SentMessageDeliveryStatus.tsx

@@ -3,7 +3,6 @@ import { useMemo } from 'react'
 import {
   MessageStatus,
   useChannelStateContext,
-  useChatContext,
   useMessageContext,
 } from 'stream-chat-react'
 
@@ -15,21 +14,23 @@ import {
  *
  * 1. `MessageStatus` picks its `delivered`/`read` branches ahead of `sent`
  *    whenever Stream has `deliveredTo`/`readBy`, and — unlike `sent` — those
- *    branches aren't gated to the last own message. So we override all three
+ *    branches aren't gated to the last message. So we override all three
  *    terminal slots with this same label (never Stream's default delivered
- *    icon / read avatars — Read is out of scope) and re-apply the "last own
- *    message" gate ourselves.
+ *    icon / read avatars — Read is out of scope) and re-apply the "latest
+ *    message in the thread" gate ourselves: the label only shows beneath the
+ *    viewer's sent message while it is still the last message in the channel,
+ *    and disappears as soon as a reply arrives after it.
  *
- * 2. We derive "last own message" from **live channel state**, not the
- *    message context's `lastOwnMessage`. Stream's `Message` is memoised by
- *    `areMessagePropsEqual`, which does not compare `lastOwnMessage`; a
- *    previous own row whose message/grouping props are unchanged (e.g. after
- *    an intervening incoming message) never re-renders, so its context
- *    `lastOwnMessage` goes stale and the old bubble would keep showing
- *    "Delivered" beside the new one. `useChannelStateContext` gets a fresh
- *    `messages` array on every new message and, being a context, re-renders
- *    this leaf straight through the stale `Message`/`MessageStatus` memos —
- *    so the label reliably hops to the newest own message.
+ * 2. We derive "latest message" from **live channel state**, not the message
+ *    context's `lastOwnMessage`/`lastReceivedId`. Stream's `Message` is
+ *    memoised by `areMessagePropsEqual`, which does not compare those props;
+ *    a previous own row whose message/grouping props are unchanged (e.g.
+ *    after an intervening incoming message) never re-renders, so the old
+ *    bubble would keep showing "Delivered" beside the new one.
+ *    `useChannelStateContext` gets a fresh `messages` array on every new
+ *    message and, being a context, re-renders this leaf straight through the
+ *    stale `Message`/`MessageStatus` memos — so the label reliably clears
+ *    once a reply lands.
  *
  * Rendered inside stream's `.str-chat__message-status` span, which supplies
  * the flex layout; icon and copy are styled via that span in `styles.css`.
@@ -37,18 +38,13 @@ import {
 const DeliveredStatus = () => {
   const { message } = useMessageContext('SentMessageDeliveryStatus')
   const { messages } = useChannelStateContext('SentMessageDeliveryStatus')
-  const { client } = useChatContext('SentMessageDeliveryStatus')
 
-  const ownUserId = client.user?.id
-  const lastOwnMessageId = useMemo(() => {
-    if (!ownUserId || !messages) return undefined
-    for (let i = messages.length - 1; i >= 0; i -= 1) {
-      if (messages[i].user?.id === ownUserId) return messages[i].id
-    }
-    return undefined
-  }, [messages, ownUserId])
+  const lastMessageId = useMemo(
+    () => messages?.[messages.length - 1]?.id,
+    [messages]
+  )
 
-  if (message.id !== lastOwnMessageId) {
+  if (message.id !== lastMessageId) {
     return null
   }
 
@@ -73,8 +69,8 @@ const NoStatus = () => null
  * terminal (sending/sent/delivered/read) state once the message is stored.
  * Scope is "Delivered" only: the sending spinner is suppressed and all
  * terminal states render {@link DeliveredStatus}, which supplies the label
- * and the last-own-message gate (see there for why the gate is computed from
- * live channel state rather than the context's `lastOwnMessage`).
+ * and the latest-message-in-thread gate (see there for why the gate is
+ * computed from live channel state rather than the context's props).
  */
 export const SentMessageDeliveryStatus = () => (
   <MessageStatus

package/src/components/CustomMessage/context.tsx

@@ -1,6 +1,6 @@
 import { createContext, useContext } from 'react'
 
-import { defaultLockedAttachmentContextValue, type LockedAttachmentContextValue } from './LockedAttachment/types'
+import { defaultLockedAttachmentContextValue, type LockedAttachmentContextValue } from '../LockedAttachment/types'
 
 export interface CustomMessageRegistry {
   LockedAttachment: LockedAttachmentContextValue

package/src/components/CustomMessage/index.tsx

@@ -32,17 +32,17 @@ import {
 import { useMessageVote } from '../../hooks/useMessageVote'
 import { getMessageDisplayText } from '../../utils/getMessageDisplayText'
 import { Avatar } from '../Avatar'
+import LockedAttachment from '../LockedAttachment'
 import { isLinkAttachment } from '../MediaMessage'
-import { bubbleGroupPositionFromStream as messageAttachmentGroupPositionFromStream } from '../MessageAttachment'
+import {
+  bubbleGroupPositionFromStream as messageAttachmentGroupPositionFromStream,
+} from '../MessageAttachment'
 
 import { useCustomMessage } from './context'
-import LockedAttachment from './LockedAttachment'
 import {
   MessageTag,
   isAttachmentMessage,
   isChatbotMessage,
-  isMediaAttachmentMessage,
-  isTextAttachmentMessage,
   isTipOnlyMessage,
 } from './MessageTag'
 import { MessageVoteButtons } from './MessageVoteButtons'
@@ -145,12 +145,13 @@ const CustomMessageWithContext = (props: CustomMessageWithContextProps) => {
       (total, segment) => total + segment.attachments.length,
       0
     ) === (finalAttachments?.length ?? 0)
-  const streamAttachmentGroupPosition =
-    messageAttachmentGroupPositionFromStream({
+  const streamAttachmentGroupPosition = messageAttachmentGroupPositionFromStream(
+    {
       endOfGroup,
       firstOfGroup,
       groupedByUser,
-    })
+    }
+  )
 
   if (isDateSeparatorMessage(message)) {
     return null
@@ -225,26 +226,6 @@ const CustomMessageWithContext = (props: CustomMessageWithContextProps) => {
     !isAIGenerated &&
     !isChatbot
 
-  const sharedLockedTextProps = {
-    contentType: 'text' as const,
-    amountText: message.metadata?.amount_text,
-    paymentStatus: message.metadata?.payment_status,
-    renderedText: message.text && (
-      <MessageText message={displayMessage} renderText={renderText} />
-    ),
-  }
-  const sharedLockedMediaProps = {
-    contentType: 'media' as const,
-    title: message.metadata?.attachment_title,
-    mimeType: message.metadata?.attachment_mime_type,
-    thumbnailUrl: message.metadata?.attachment_thumbnail,
-    amountText: message.metadata?.amount_text,
-    detail: message.metadata?.attachment_detail,
-    paymentStatus: message.metadata?.payment_status,
-    onFetchSource: onFetchSource
-      ? () => onFetchSource(message, channel)
-      : undefined,
-  }
   return (
     <>
       {editing && (
@@ -295,61 +276,43 @@ const CustomMessageWithContext = (props: CustomMessageWithContextProps) => {
             marginInlineStart: 0,
           }}
         >
-          {isTipOnly ? (
-            <MessageTag message={message} standalone />
-          ) : isTextAttachmentMessage(message) ? (
+          {isAttachment ? (
             <div className="str-chat__message-bubble-wrapper">
-              <div className="flex items-center gap-2">
-                {isMine && MessageActions && <MessageActions />}
-                {isMine ? (
-                  <LockedAttachment
-                    {...sharedLockedTextProps}
-                    isMine={true}
-                  />
-                ) : (
-                  <LockedAttachment
-                    {...sharedLockedTextProps}
-                    isMine={false}
-                    isUnlocking={isUnlocking(message.id)}
-                    onUnlockClick={() => onUnlockClick?.(message, channel)}
-                  />
-                )}
-                {!isMine && MessageActions && <MessageActions />}
-              </div>
-            </div>
-          ) : isMediaAttachmentMessage(message) ? (
-            <div className="str-chat__message-bubble-wrapper">
-              <div className="flex items-center gap-2">
-                {isMine && MessageActions && <MessageActions />}
-                {isMine ? (
-                  <LockedAttachment
-                    {...sharedLockedMediaProps}
-                    isMine={true}
-                    onPreviewClick={() =>
-                      onUnlockClick
-                        ? onUnlockClick(message, channel)
-                        : undefined
+              {isMine ? (
+                <div className="flex items-center gap-2">
+                  {MessageActions && <MessageActions />}
+                  <LockedAttachment.Sent
+                    title={message.metadata?.attachment_title}
+                    mimeType={message.metadata?.attachment_mime_type}
+                    thumbnailUrl={message.metadata?.attachment_thumbnail}
+                    amountText={message.metadata?.amount_text}
+                    detail={message.metadata?.attachment_detail}
+                    paymentStatus={message.metadata?.payment_status}
+                    onPreviewClick={() => onUnlockClick?.(message, channel)}
+                    onFetchSource={async () =>
+                      await onFetchSource?.(message, channel)
                     }
                   />
-                ) : (
-                  <LockedAttachment
-                    {...sharedLockedMediaProps}
-                    isMine={false}
+                </div>
+              ) : (
+                <div className="flex items-center gap-2">
+                  <LockedAttachment.Received
+                    title={message.metadata?.attachment_title}
+                    mimeType={message.metadata?.attachment_mime_type}
+                    thumbnailUrl={message.metadata?.attachment_thumbnail}
+                    amountText={message.metadata?.amount_text}
+                    detail={message.metadata?.attachment_detail}
+                    paymentStatus={message.metadata?.payment_status}
                     isUnlocking={isUnlocking(message.id)}
-                    onUnlockClick={() =>
-                      onUnlockClick
-                        ? onUnlockClick(message, channel)
-                        : undefined
-                    }
-                    onDownloadClick={() =>
-                      onDownloadClick
-                        ? onDownloadClick(message, channel)
-                        : undefined
+                    onUnlockClick={() => onUnlockClick?.(message, channel)}
+                    onFetchSource={async () =>
+                      await onFetchSource?.(message, channel)
                     }
+                    onDownloadClick={() => onDownloadClick?.(message, channel)}
                   />
-                )}
-                {!isMine && MessageActions && <MessageActions />}
-              </div>
+                  {MessageActions && <MessageActions />}
+                </div>
+              )}
               {message.text && (
                 <div className="str-chat__message-bubble">
                   <MessageText
@@ -359,6 +322,9 @@ const CustomMessageWithContext = (props: CustomMessageWithContextProps) => {
                 </div>
               )}
             </div>
+          ) : isTipOnly ? (
+            /* Tip-only messages render as a standalone bubble */
+            <MessageTag message={message} standalone />
           ) : canRenderAttachmentsInToolkit ? (
             <div className="str-chat__message-bubble-wrapper">
               <div

package/src/components/CustomMessageInput/CustomMessageInput.stories.tsx

@@ -5,7 +5,7 @@ import { QueryChannelAPIResponse, StreamChat } from 'stream-chat'
 import { Channel, Chat, type SendButtonProps } from 'stream-chat-react'
 
 import { createMockStreamChatClient } from '../../testing/createMockStreamChatClient'
-import LockedAttachment from '../CustomMessage/LockedAttachment'
+import LockedAttachment from '../LockedAttachment'
 
 import { CustomMessageInput } from '.'
 
@@ -229,9 +229,7 @@ WithAttachments.parameters = {
 export const WithPaidAttachment: StoryFn<WrapperProps> = (args) => <Wrapper {...args} />
 WithPaidAttachment.args = {
   attachmentPreviewList: () => (
-    <LockedAttachment
-      isPreview
-      contentType="media"
+    <LockedAttachment.Composer
       title="Exclusive Content"
       mimeType="image/jpeg"
       thumbnailUrl="https://picsum.photos/seed/paid/320/180"
@@ -268,7 +266,7 @@ WithPaidAttachment.parameters = {
   docs: {
     description: {
       story:
-        "Message input with a paid attachment staged inside the input bubble. Uses `Channel`'s `AttachmentPreviewList` override to render a `LockedAttachment isPreview` card at the top of the input. `onDismiss` removes it; `onEditClick` reopens the paid content wizard.",
+        "Message input with a paid attachment staged inside the input bubble. Uses `Channel`'s `AttachmentPreviewList` override to render a `LockedAttachment.Composer` card at the top of the input. `onDismiss` removes it; `onEditClick` reopens the paid content wizard.",
     },
   },
 }