@linktr.ee/messaging-react 3.6.2-rc-1783305830 → 3.6.2-rc-1783311170

package/dist/index.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./index-Cx5L9rqX.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-LP0PQJxl.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-Dy-mY8YE.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-DcEVHNS3.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-1783305830",
+  "version": "3.6.2-rc-1783311170",
   "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-1783305830",
+    "@linktr.ee/messaging-core": "2.3.0-rc-1783311170",
     "@phosphor-icons/react": "^2.1.10"
   },
   "devDependencies": {

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

@@ -1,72 +1,83 @@
-import type { LocalMessage } from 'stream-chat'
-import { describe, expect, it } from 'vitest'
+import React from 'react'
+import { useMessageContext } from 'stream-chat-react'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
 
-import { renderWithProviders, screen } from '../../test/utils'
+import { renderWithProviders, screen, within } from '../../test/utils'
 
 import { SentMessageDeliveryStatus } from './SentMessageDeliveryStatus'
 
-const baseMessage = {
-  id: 'message-1',
-  status: 'received',
-  type: 'regular',
-} as unknown as LocalMessage
+// stream-chat-react's `MessageStatus` owns the outer gating (own message, not
+// error, not in a thread) and the state machine — Stream's tested code. What
+// this component owns is the "Delivered" label wired into the terminal slots
+// (sent/delivered/read), its "last own message" self-gate, and suppressing
+// the sending spinner. Mock `MessageStatus` to render the slots it was handed,
+// and `useMessageContext` to feed the label's self-gate.
+vi.mock('stream-chat-react', () => ({
+  useMessageContext: 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 renderStatus = (
-  props: Partial<{
-    message: LocalMessage
-    isMyMessage: boolean
-    lastOwnMessageId?: string
-  }> = {}
-) =>
-  renderWithProviders(
-    <SentMessageDeliveryStatus
-      message={props.message ?? baseMessage}
-      isMyMessage={props.isMyMessage ?? true}
-      lastOwnMessageId={props.lastOwnMessageId ?? 'message-1'}
-    />
-  )
+const mockedUseMessageContext = vi.mocked(useMessageContext)
 
-describe('SentMessageDeliveryStatus', () => {
-  it('renders "Delivered" for the last own message once Stream has received it', () => {
-    renderStatus()
+const TERMINAL_SLOTS = ['sent-slot', 'delivered-slot', 'read-slot'] as const
 
-    expect(
-      screen.getByTestId('sent-message-delivery-status')
-    ).toBeInTheDocument()
-    expect(screen.getByText(/delivered/i)).toBeInTheDocument()
+describe('SentMessageDeliveryStatus', () => {
+  beforeEach(() => {
+    mockedUseMessageContext.mockReturnValue({
+      lastOwnMessage: { id: 'message-1' },
+      message: { id: 'message-1' },
+    } as never)
   })
 
-  it('renders nothing when the message is not authored by the viewer', () => {
-    const { container } = renderStatus({ isMyMessage: false })
+  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.
+    renderWithProviders(<SentMessageDeliveryStatus />)
 
-    expect(container).toBeEmptyDOMElement()
+    for (const slot of TERMINAL_SLOTS) {
+      expect(
+        within(screen.getByTestId(slot)).getByText('Delivered')
+      ).toBeInTheDocument()
+    }
   })
 
-  it('renders nothing when this is not the last own message', () => {
-    const { container } = renderStatus({ lastOwnMessageId: 'message-2' })
+  it('renders nothing in the terminal slots when it is not the last own message', () => {
+    mockedUseMessageContext.mockReturnValue({
+      lastOwnMessage: { id: 'message-2' },
+      message: { id: 'message-1' },
+    } as never)
 
-    expect(container).toBeEmptyDOMElement()
-  })
-
-  it.each(['sending', 'failed'] as const)(
-    'renders nothing while the message status is %s',
-    (status) => {
-      const { container } = renderStatus({
-        message: { ...baseMessage, status } as unknown as LocalMessage,
-      })
+    renderWithProviders(<SentMessageDeliveryStatus />)
 
-      expect(container).toBeEmptyDOMElement()
+    for (const slot of TERMINAL_SLOTS) {
+      expect(screen.getByTestId(slot)).toBeEmptyDOMElement()
     }
-  )
+  })
 
-  it('renders nothing for error messages', () => {
-    const { container } = renderStatus({
-      message: {
-        ...baseMessage,
-        type: 'error',
-      } as unknown as LocalMessage,
-    })
+  it('always suppresses the sending spinner', () => {
+    renderWithProviders(<SentMessageDeliveryStatus />)
 
-    expect(container).toBeEmptyDOMElement()
+    expect(screen.getByTestId('sending-slot')).toBeEmptyDOMElement()
   })
 })

package/src/components/CustomMessage/SentMessageDeliveryStatus.tsx

@@ -1,49 +1,67 @@
 import { ChecksIcon } from '@phosphor-icons/react'
-import type { LocalMessage } from 'stream-chat'
-
-interface SentMessageDeliveryStatusProps {
-  message: LocalMessage
-  /** Result of the message context's `isMyMessage()` for this message. */
-  isMyMessage: boolean
-  /** `id` of the viewer's most recent own message, from `lastOwnMessage`. */
-  lastOwnMessageId?: string
-}
+import { MessageStatus, useMessageContext } from 'stream-chat-react'
 
 /**
- * "✓✓ Delivered" indicator shown beneath the viewer's most recent **sent**
- * message, right-aligned (MES-1036).
+ * "✓✓ Delivered" label, wired into *every* terminal `MessageStatus` state
+ * (sent / delivered / read).
  *
- * "Delivered" fires once Stream confirms the message is stored on the backend
- * (`status === 'received'`) and updates live as that status flips. It renders
- * only on the last own message in the thread — never on earlier bubbles, and
- * never on error messages. Read receipts are intentionally out of scope per
- * the ticket.
+ * `MessageStatus` picks its `delivered` and `read` branches ahead of `sent`
+ * whenever Stream has `deliveredTo` / `readBy` for the message — and, unlike
+ * `sent`, those branches are *not* gated to the last own message. So in a
+ * channel that has receipts we must (a) replace Stream's default delivered
+ * icon / read avatars with our label — otherwise the required "Delivered"
+ * label disappears and an out-of-scope read receipt would show — and (b)
+ * re-apply the "last own message only" gate ourselves, since the
+ * delivered/read branches would otherwise render on every read own message.
  *
- * The "is this the last own message?" decision comes from stream-chat-react's
- * `lastOwnMessage` (via `MessageContext`); the parent must re-render this
- * subtree when `lastOwnMessage` changes so the label hops to a newer 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`.
  */
-export const SentMessageDeliveryStatus = ({
-  message,
-  isMyMessage,
-  lastOwnMessageId,
-}: SentMessageDeliveryStatusProps) => {
-  const isLastOwnMessage =
-    isMyMessage &&
-    message.type !== 'error' &&
-    lastOwnMessageId === message.id
+const DeliveredStatus = () => {
+  const { lastOwnMessage, message } = useMessageContext(
+    'SentMessageDeliveryStatus'
+  )
 
-  if (!isLastOwnMessage || message.status !== 'received') {
+  if (lastOwnMessage?.id !== message.id) {
     return null
   }
 
   return (
-    <div
-      className="str-chat__message-delivery-status"
-      data-testid="sent-message-delivery-status"
-    >
-      <ChecksIcon size={14} weight="bold" aria-hidden="true" />
-      <span>Delivered</span>
-    </div>
+    <>
+      <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 want
+ * — own message, not an error, and not inside a thread — plus the
+ * sending/sent/delivered/read state machine.
+ *
+ * Scope is "Delivered" only (no Sending / Read). Stream's `sent` state maps
+ * to "Delivered" for a backend-confirmed (`status === 'received'`) last own
+ * message; its `delivered`/`read` states (only populated in channels with
+ * per-recipient receipts) also render the same "Delivered" label via
+ * {@link DeliveredStatus} so we never surface a read receipt. The sending
+ * spinner is suppressed.
+ *
+ * `DeliveredStatus` reads `lastOwnMessage` from the message context, so
+ * `CustomMessage`'s memo comparator must re-render when it changes (see
+ * `index.tsx`) for the label to hop to a newer message.
+ */
+export const SentMessageDeliveryStatus = () => (
+  <MessageStatus
+    MessageSentStatus={DeliveredStatus}
+    MessageDeliveredStatus={DeliveredStatus}
+    MessageReadStatus={DeliveredStatus}
+    MessageSendingStatus={NoStatus}
+  />
+)

package/src/components/CustomMessage/index.tsx

@@ -75,7 +75,6 @@ const CustomMessageWithContext = (props: CustomMessageWithContextProps) => {
     highlighted,
     isMessageAIGenerated,
     isMyMessage,
-    lastOwnMessage,
     message,
     renderText,
     threadList,
@@ -399,11 +398,7 @@ const CustomMessageWithContext = (props: CustomMessageWithContextProps) => {
             )}
           </div>
         )}
-        <SentMessageDeliveryStatus
-          message={message}
-          isMyMessage={isMine}
-          lastOwnMessageId={lastOwnMessage?.id}
-        />
+        <SentMessageDeliveryStatus />
         {showReplyCountButton && (
           <MessageRepliesCountButton
             onClick={handleOpenThread}
@@ -423,10 +418,12 @@ const MemoizedCustomMessage = React.memo(
   (prev, next) => {
     if (prev.chatbotVotingEnabled !== next.chatbotVotingEnabled) return false
     if (prev.viewerLanguage !== next.viewerLanguage) return false
-    // `lastOwnMessage` drives the "Delivered" indicator's placement
-    // (`SentMessageDeliveryStatus`). `areMessageUIPropsEqual` doesn't compare
-    // it, so without this a stale "Delivered" would linger on the previous
-    // bubble after a newer message is sent — re-render when it changes.
+    // `lastOwnMessage` drives the "Delivered" indicator, which
+    // `SentMessageDeliveryStatus` derives from stream's `MessageStatus`
+    // (reading it off the message context inside this memoised subtree).
+    // `areMessageUIPropsEqual` doesn't compare it, so without this a stale
+    // "Delivered" would linger on the previous bubble after a newer message
+    // is sent — re-render when it changes.
     if (prev.lastOwnMessage?.id !== next.lastOwnMessage?.id) return false
     return areMessageUIPropsEqual(prev, next)
   }

package/src/styles.css

@@ -417,11 +417,14 @@
 }
 
 /* "✓✓ Delivered" delivery status under the last sent message (MES-1036).
-   Right-aligned via the outer grid's `justify-items: end`. */
-.str-chat__li .str-chat__message-delivery-status {
+   `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-end: 4px;
@@ -429,6 +432,18 @@
   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 {