@linktr.ee/messaging-react 3.6.2-rc-1783314663 → 3.6.2-rc-1783332217

package/dist/index.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./index-Q0FmgUJF.cjs");exports.ActionButton=e.ActionButton;exports.Avatar=e.Avatar;exports.ChannelEmptyState=e.ChannelEmptyState;exports.ChannelList=e.ChannelList;exports.ChannelView=e.ChannelView;exports.CustomMessageProvider=e.CustomMessageProvider;exports.FaqList=e.FaqList;exports.FaqListItem=e.FaqListItem;exports.LinkAttachment=e.LinkAttachment;exports.LockedAttachment=e.LockedAttachment;exports.MediaMessage=e.MediaMessage;exports.MessageAttachment=e.MessageAttachment;exports.MessageVoteButtons=e.MessageVoteButtons;exports.MessagingProvider=e.MessagingProvider;exports.MessagingShell=e.MessagingShell;exports.buildCompactMetaLabel=e.buildCompactMetaLabel;exports.formatFileSize=e.formatFileSize;exports.formatRelativeTime=e.formatRelativeTime;exports.getFileExtensionLabel=e.getFileExtensionLabel;exports.getMessageDisplayText=e.getMessageDisplayText;exports.isLinkAttachment=e.isLinkAttachment;exports.isUuidLike=e.isUuidLike;exports.messageAttachmentGroupPositionFromStream=e.bubbleGroupPositionFromStream;exports.normalizeLanguageCode=e.normalizeLanguageCode;exports.resolveConversationParticipant=e.resolveConversationParticipant;exports.resolveLinkAttachment=e.resolveLinkAttachment;exports.resolveMediaFromMessage=e.resolveMediaFromMessage;exports.resolveParticipantDisplayName=e.resolveParticipantDisplayName;exports.useComposerLocked=e.useComposerLocked;exports.useCustomMessage=e.useCustomMessage;exports.useMessageVote=e.useMessageVote;exports.useMessaging=e.useMessaging;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./index-B3ZJaqJY.cjs");exports.ActionButton=e.ActionButton;exports.Avatar=e.Avatar;exports.ChannelEmptyState=e.ChannelEmptyState;exports.ChannelList=e.ChannelList;exports.ChannelView=e.ChannelView;exports.CustomMessageProvider=e.CustomMessageProvider;exports.FaqList=e.FaqList;exports.FaqListItem=e.FaqListItem;exports.LinkAttachment=e.LinkAttachment;exports.LockedAttachment=e.LockedAttachment;exports.MediaMessage=e.MediaMessage;exports.MessageAttachment=e.MessageAttachment;exports.MessageVoteButtons=e.MessageVoteButtons;exports.MessagingProvider=e.MessagingProvider;exports.MessagingShell=e.MessagingShell;exports.buildCompactMetaLabel=e.buildCompactMetaLabel;exports.formatFileSize=e.formatFileSize;exports.formatRelativeTime=e.formatRelativeTime;exports.getFileExtensionLabel=e.getFileExtensionLabel;exports.getMessageDisplayText=e.getMessageDisplayText;exports.isLinkAttachment=e.isLinkAttachment;exports.isUuidLike=e.isUuidLike;exports.messageAttachmentGroupPositionFromStream=e.bubbleGroupPositionFromStream;exports.normalizeLanguageCode=e.normalizeLanguageCode;exports.resolveConversationParticipant=e.resolveConversationParticipant;exports.resolveLinkAttachment=e.resolveLinkAttachment;exports.resolveMediaFromMessage=e.resolveMediaFromMessage;exports.resolveParticipantDisplayName=e.resolveParticipantDisplayName;exports.useComposerLocked=e.useComposerLocked;exports.useCustomMessage=e.useCustomMessage;exports.useMessageVote=e.useMessageVote;exports.useMessaging=e.useMessaging;
 //# sourceMappingURL=index.cjs.map

package/dist/index.js

@@ -1,4 +1,4 @@
-import { a as e, b as t, C as i, c as o, d as n, e as m, F as r, f as g, L as l, h as M, M as c, i as u, j as L, k as h, l as d, m as p, n as v, o as C, p as A, q as k, s as F, t as P, u as b, v as f, w as x, x as y, y as S, z as q, B as z, D as B, E as D, G as E } from "./index-DPwo1avm.js";
+import { a as e, b as t, C as i, c as o, d as n, e as m, F as r, f as g, L as l, h as M, M as c, i as u, j as L, k as h, l as d, m as p, n as v, o as C, p as A, q as k, s as F, t as P, u as b, v as f, w as x, x as y, y as S, z as q, B as z, D as B, E as D, G as E } from "./index-wFe1UO9t.js";
 export {
   e as ActionButton,
   t as Avatar,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@linktr.ee/messaging-react",
-  "version": "3.6.2-rc-1783314663",
+  "version": "3.6.2-rc-1783332217",
   "description": "React messaging components built on messaging-core for web applications",
   "type": "module",
   "main": "dist/index.cjs",
@@ -38,7 +38,7 @@
   },
   "dependencies": {
     "@linktr.ee/component-library": "11.8.6",
-    "@linktr.ee/messaging-core": "2.3.0-rc-1783314663",
+    "@linktr.ee/messaging-core": "2.3.0-rc-1783332217",
     "@phosphor-icons/react": "^2.1.10"
   },
   "devDependencies": {

package/src/components/CustomMessage/CustomMessage.stories.tsx

@@ -225,43 +225,36 @@ Default.args = {
   ],
 }
 
-// MES-1036: "✓✓ Delivered" appears below the last bubble of *every* message
-// group, on both the received (left) and sent (right) sides. Every mock
-// message carries status: 'received'; the indicator is gated on stream's
-// `endOfGroup`, so it shows once per consecutive same-author run — here below
-// "Hey there!" (received), "Talk soon!" (sent), and "See you then." (sent
-// run of two).
+// MES-1036: "✓✓ Delivered" appears below only the most recent *sent*
+// message. Every mock message carries status: 'received', and stream's
+// MessageList derives `lastOwnMessage`, so the indicator lands on the last
+// creator message ("Talk soon!") and not on the earlier sent bubble.
 export const DeliveredStatus: StoryFn<TemplateProps> = Template.bind({})
 DeliveredStatus.args = {
   messages: [
     {
       id: 'msg-1',
-      text: 'Hey there!',
+      text: 'Hey, did you get my last message?',
       user: storyUsers.visitor,
     },
     {
       id: 'msg-2',
-      text: 'Hi! Great to hear from you.',
+      text: 'Yes! Just replying now.',
       user: storyUsers.creator,
     },
     {
       id: 'msg-3',
-      text: 'Talk soon!',
-      user: storyUsers.creator,
-    },
-    {
-      id: 'msg-4',
-      text: 'Sounds good — catch up tomorrow?',
+      text: 'Sounds good.',
       user: storyUsers.visitor,
     },
     {
-      id: 'msg-5',
-      text: 'Absolutely.',
+      id: 'msg-4',
+      text: 'Let me know if you need anything else.',
       user: storyUsers.creator,
     },
     {
-      id: 'msg-6',
-      text: 'See you then.',
+      id: 'msg-5',
+      text: 'Talk soon!',
       user: storyUsers.creator,
     },
   ],

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

@@ -0,0 +1,107 @@
+import React from 'react'
+import {
+  useChannelStateContext,
+  useChatContext,
+  useMessageContext,
+} from 'stream-chat-react'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
+import { renderWithProviders, screen, within } from '../../test/utils'
+
+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.
+vi.mock('stream-chat-react', () => ({
+  useMessageContext: vi.fn(),
+  useChannelStateContext: vi.fn(),
+  useChatContext: vi.fn(),
+  MessageStatus: ({
+    MessageSentStatus,
+    MessageDeliveredStatus,
+    MessageReadStatus,
+    MessageSendingStatus,
+  }: Record<string, React.ComponentType>) => (
+    <div>
+      <div data-testid="sent-slot">
+        <MessageSentStatus />
+      </div>
+      <div data-testid="delivered-slot">
+        <MessageDeliveredStatus />
+      </div>
+      <div data-testid="read-slot">
+        <MessageReadStatus />
+      </div>
+      <div data-testid="sending-slot">
+        <MessageSendingStatus />
+      </div>
+    </div>
+  ),
+}))
+
+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.
+const CHANNEL_MESSAGES = [
+  { id: 'own-1', user: { id: 'me' } },
+  { id: 'their-1', user: { id: 'them' } },
+  { id: 'own-2', user: { id: 'me' } },
+]
+
+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', () => {
+    // delivered/read fire ahead of sent in receipt channels, so all three
+    // must show the label — never Stream's default delivered icon / read
+    // avatars.
+    mockedUseMessageContext.mockReturnValue({
+      message: { id: 'own-2' },
+    } as never)
+
+    renderWithProviders(<SentMessageDeliveryStatus />)
+
+    for (const slot of TERMINAL_SLOTS) {
+      expect(
+        within(screen.getByTestId(slot)).getByText('Delivered')
+      ).toBeInTheDocument()
+    }
+  })
+
+  it('renders nothing for an earlier own message even though one is the last own message', () => {
+    mockedUseMessageContext.mockReturnValue({
+      message: { id: 'own-1' },
+    } 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' },
+    } as never)
+
+    renderWithProviders(<SentMessageDeliveryStatus />)
+
+    expect(screen.getByTestId('sending-slot')).toBeEmptyDOMElement()
+  })
+})

package/src/components/CustomMessage/SentMessageDeliveryStatus.tsx

@@ -0,0 +1,86 @@
+import { ChecksIcon } from '@phosphor-icons/react'
+import { useMemo } from 'react'
+import {
+  MessageStatus,
+  useChannelStateContext,
+  useChatContext,
+  useMessageContext,
+} from 'stream-chat-react'
+
+/**
+ * "✓✓ Delivered" label, wired into *every* terminal `MessageStatus` state
+ * (sent / delivered / read).
+ *
+ * Two reasons this is more than a static label:
+ *
+ * 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
+ *    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.
+ *
+ * 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.
+ *
+ * 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`.
+ */
+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])
+
+  if (message.id !== lastOwnMessageId) {
+    return null
+  }
+
+  return (
+    <>
+      <ChecksIcon weight="bold" aria-hidden="true" />
+      <span data-testid="sent-message-delivery-status">Delivered</span>
+    </>
+  )
+}
+
+/** Suppresses a MessageStatus slot we don't want to render. */
+const NoStatus = () => null
+
+/**
+ * Delivery status beneath the viewer's most recent sent message (MES-1036):
+ * a right-aligned "✓✓ Delivered" that appears once Stream confirms the
+ * message is stored and updates live.
+ *
+ * Built on stream-chat-react's `MessageStatus`, which owns the gating we keep
+ * — own message, not an error, not inside a thread — and only surfaces a
+ * 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`).
+ */
+export const SentMessageDeliveryStatus = () => (
+  <MessageStatus
+    MessageSentStatus={DeliveredStatus}
+    MessageDeliveredStatus={DeliveredStatus}
+    MessageReadStatus={DeliveredStatus}
+    MessageSendingStatus={NoStatus}
+  />
+)

package/src/components/CustomMessage/index.tsx

@@ -39,7 +39,6 @@ import {
 } from '../MessageAttachment'
 
 import { useCustomMessage } from './context'
-import { MessageDeliveryStatus } from './MessageDeliveryStatus'
 import {
   MessageTag,
   isAttachmentMessage,
@@ -47,6 +46,7 @@ import {
   isTipOnlyMessage,
 } from './MessageTag'
 import { MessageVoteButtons } from './MessageVoteButtons'
+import { SentMessageDeliveryStatus } from './SentMessageDeliveryStatus'
 import StreamAttachmentMessage, {
   buildOrderedAttachmentSegments,
 } from './StreamAttachmentMessage'
@@ -398,7 +398,7 @@ const CustomMessageWithContext = (props: CustomMessageWithContextProps) => {
             )}
           </div>
         )}
-        <MessageDeliveryStatus message={message} endOfGroup={endOfGroup} />
+        <SentMessageDeliveryStatus />
         {showReplyCountButton && (
           <MessageRepliesCountButton
             onClick={handleOpenThread}

package/src/styles.css

@@ -333,16 +333,12 @@
   grid-column-gap: 4px;
 }
 
-/* Outer grid for other (incoming) messages — footer + delivery-status rows
-   after message. `delivery-status` carries the "Delivered" status on the last
-   bubble of each incoming group (MES-1036); it aligns under the message, not
-   the avatar, and collapses to 0 height on messages that don't render it. */
+/* Outer grid for other (incoming) messages — add footer row after message */
 .str-chat__li .str-chat__message--other {
   grid-template-areas:
     '. message-reminder'
     'avatar message'
     '. footer'
-    '. delivery-status'
     '. replies'
     '. translation-notice'
     '. custom-metadata'
@@ -356,9 +352,9 @@
 }
 
 /* Outer grid for me (outgoing) messages — footer + delivery-status rows
-   after message. `delivery-status` carries the "Delivered" status on the last
-   bubble of each outgoing group (MES-1036); the row collapses to 0 height on
-   messages that don't render it. */
+   after message. `delivery-status` carries the "Delivered" receipt on the
+   last sent message (MES-1036); the row collapses to 0 height on messages
+   that don't render it. */
 .str-chat__li .str-chat__message--me {
   grid-template-areas:
     'message-reminder'
@@ -420,21 +416,34 @@
   align-items: flex-end;
 }
 
-/* "✓✓ Delivered" delivery status beneath the last bubble of each message
-   group (MES-1036), for both sent and received messages. It sits in the
-   `delivery-status` grid row and inherits left/right alignment from each
-   side's grid `justify-items` (start for `--other`, end for `--me`). */
-.str-chat__li .str-chat__message-delivery-status {
+/* "✓✓ Delivered" delivery status under the last sent message (MES-1036).
+   `SentMessageDeliveryStatus` renders it through stream's `MessageStatus`,
+   whose `.str-chat__message-status` span is the grid item here (right-aligned
+   via the outer grid's `justify-items: end`). Stream emits that span for every
+   own message and leaves it empty when no state is active (i.e. not the last
+   sent message), so `:empty` collapses those away. */
+.str-chat__li .str-chat__message--me .str-chat__message-status {
   grid-area: delivery-status;
-  display: inline-flex;
-  align-items: center;
+  justify-content: flex-end;
   gap: 2px;
   padding-block-start: 2px;
-  padding-inline: 4px;
+  padding-inline-end: 4px;
   font-size: 12px;
   line-height: 1.4;
   color: var(--str-chat__text-low-emphasis-color, rgba(0, 0, 0, 0.5));
 }
+.str-chat__li .str-chat__message-status:empty {
+  display: none;
+}
+/* Match the check icon to the label size/colour (overrides stream's default
+   per-state icon sizing and status-colour fill). */
+.str-chat__li .str-chat__message--me .str-chat__message-status svg {
+  width: 14px;
+  height: 14px;
+}
+.str-chat__li .str-chat__message--me .str-chat__message-status svg path {
+  fill: currentColor;
+}
 
 /* Channel list load-more button overrides */
 .str-chat__channel-list .str-chat__load-more-button__button {