@linktr.ee/messaging-react 3.6.2-rc-1783307602 → 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-eVxxkfK6.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-DaF1G1q2.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-1783307602",
+  "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-1783307602",
+    "@linktr.ee/messaging-core": "2.3.0-rc-1783311170",
     "@phosphor-icons/react": "^2.1.10"
   },
   "devDependencies": {

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

@@ -1,27 +1,35 @@
 import React from 'react'
-import { describe, expect, it, vi } from 'vitest'
+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'
 
-// stream-chat-react's `MessageStatus` owns the gating (own message, not error,
-// last own message, not in a thread) and the sending/sent/delivered/read state
-// machine — that's Stream's tested code. What this component owns is the label
-// wired into the `sent` slot and suppressing the sending spinner, so mock
-// `MessageStatus` to render the slots it was handed and assert on those.
+// 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,
-  }: {
-    MessageSentStatus: React.ComponentType
-    MessageSendingStatus: React.ComponentType
-  }) => (
+  }: 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>
@@ -29,24 +37,45 @@ vi.mock('stream-chat-react', () => ({
   ),
 }))
 
+const mockedUseMessageContext = vi.mocked(useMessageContext)
+
+const TERMINAL_SLOTS = ['sent-slot', 'delivered-slot', 'read-slot'] as const
+
 describe('SentMessageDeliveryStatus', () => {
-  it('renders "Delivered" for the sent state', () => {
+  beforeEach(() => {
+    mockedUseMessageContext.mockReturnValue({
+      lastOwnMessage: { id: 'message-1' },
+      message: { id: 'message-1' },
+    } 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.
     renderWithProviders(<SentMessageDeliveryStatus />)
 
-    expect(
-      screen.getByTestId('sent-message-delivery-status')
-    ).toHaveTextContent('Delivered')
+    for (const slot of TERMINAL_SLOTS) {
+      expect(
+        within(screen.getByTestId(slot)).getByText('Delivered')
+      ).toBeInTheDocument()
+    }
   })
 
-  it('renders an icon alongside the label', () => {
-    const { container } = renderWithProviders(<SentMessageDeliveryStatus />)
+  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)
+
+    renderWithProviders(<SentMessageDeliveryStatus />)
 
-    expect(
-      container.querySelector('[data-testid="sent-slot"] svg')
-    ).toBeInTheDocument()
+    for (const slot of TERMINAL_SLOTS) {
+      expect(screen.getByTestId(slot)).toBeEmptyDOMElement()
+    }
   })
 
-  it('suppresses the sending spinner', () => {
+  it('always suppresses the sending spinner', () => {
     renderWithProviders(<SentMessageDeliveryStatus />)
 
     expect(screen.getByTestId('sending-slot')).toBeEmptyDOMElement()

package/src/components/CustomMessage/SentMessageDeliveryStatus.tsx

@@ -1,20 +1,38 @@
 import { ChecksIcon } from '@phosphor-icons/react'
-import { MessageStatus } from 'stream-chat-react'
+import { MessageStatus, useMessageContext } from 'stream-chat-react'
 
 /**
- * "✓✓ Delivered" label wired into `MessageStatus`'s `sent` state.
+ * "✓✓ Delivered" label, wired into *every* terminal `MessageStatus` state
+ * (sent / delivered / read).
  *
- * See {@link SentMessageDeliveryStatus} for why `sent` — not `delivered` — is
- * the state that fires in our setup. 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`.
+ * `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.
+ *
+ * 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 = () => (
-  <>
-    <ChecksIcon weight="bold" aria-hidden="true" />
-    <span data-testid="sent-message-delivery-status">Delivered</span>
-  </>
-)
+const DeliveredStatus = () => {
+  const { lastOwnMessage, message } = useMessageContext(
+    'SentMessageDeliveryStatus'
+  )
+
+  if (lastOwnMessage?.id !== message.id) {
+    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
@@ -24,26 +42,26 @@ const NoStatus = () => null
  * a right-aligned "✓✓ Delivered" that appears once Stream confirms the
  * message is stored and updates live.
  *
- * Built on stream-chat-react's `MessageStatus`, which already owns the exact
- * gating we want — own message, not an error, the *last* own message, and not
- * inside a thread — plus the sending/sent/delivered/read state machine.
+ * 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.
  *
- * The catch: Stream's `delivered` and `read` states require per-recipient
- * delivery/read receipts, which Linktree's Stream setup does not populate. So
- * those branches never fire; the branch that fires for a backend-confirmed
- * (`status === 'received'`) last own message is `sent`. We therefore map the
- * `sent` state to the ticket's "Delivered" label and suppress the default
- * sending spinner (scope is "Delivered" only — no Sending/Read). If receipts
- * are ever enabled, give `MessageDeliveredStatus` / `MessageReadStatus` their
- * own labels here.
+ * 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.
  *
- * `MessageStatus` reads `lastOwnMessage` from the message context, so
+ * `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}
   />
 )