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

package/dist/index.cjs

@@ -1,2 +1,2 @@
-"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;
+"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-DcEVHNS3.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-1783311170",
+  "version": "3.6.2-rc-1783311731",
   "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-1783311170",
+    "@linktr.ee/messaging-core": "2.3.0-rc-1783311731",
     "@phosphor-icons/react": "^2.1.10"
   },
   "devDependencies": {

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

@@ -1,5 +1,9 @@
 import React from 'react'
-import { useMessageContext } from 'stream-chat-react'
+import {
+  useChannelStateContext,
+  useChatContext,
+  useMessageContext,
+} from 'stream-chat-react'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 
 import { renderWithProviders, screen, within } from '../../test/utils'
@@ -7,13 +11,16 @@ 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 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.
+// 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,
@@ -38,14 +45,24 @@ 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.
+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(() => {
-    mockedUseMessageContext.mockReturnValue({
-      lastOwnMessage: { id: 'message-1' },
-      message: { id: 'message-1' },
+    mockedUseChatContext.mockReturnValue({ client: { user: { id: 'me' } } } as never)
+    mockedUseChannelStateContext.mockReturnValue({
+      messages: CHANNEL_MESSAGES,
     } as never)
   })
 
@@ -53,6 +70,10 @@ describe('SentMessageDeliveryStatus', () => {
     // 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) {
@@ -62,10 +83,9 @@ describe('SentMessageDeliveryStatus', () => {
     }
   })
 
-  it('renders nothing in the terminal slots when it is not the last own message', () => {
+  it('renders nothing for an earlier own message even though one is the last own message', () => {
     mockedUseMessageContext.mockReturnValue({
-      lastOwnMessage: { id: 'message-2' },
-      message: { id: 'message-1' },
+      message: { id: 'own-1' },
     } as never)
 
     renderWithProviders(<SentMessageDeliveryStatus />)
@@ -76,6 +96,10 @@ describe('SentMessageDeliveryStatus', () => {
   })
 
   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

@@ -1,28 +1,54 @@
 import { ChecksIcon } from '@phosphor-icons/react'
-import { MessageStatus, useMessageContext } from 'stream-chat-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).
  *
- * `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.
+ * 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 { lastOwnMessage, message } = useMessageContext(
-    'SentMessageDeliveryStatus'
-  )
+  const { message } = useMessageContext('SentMessageDeliveryStatus')
+  const { messages } = useChannelStateContext('SentMessageDeliveryStatus')
+  const { client } = useChatContext('SentMessageDeliveryStatus')
 
-  if (lastOwnMessage?.id !== message.id) {
+  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
   }
 
@@ -42,20 +68,13 @@ 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 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.
+ * 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

package/src/components/CustomMessage/index.tsx

@@ -418,13 +418,6 @@ 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, 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)
   }
 ) as typeof CustomMessageWithContext