@linktr.ee/messaging-react 3.9.1 → 3.9.2-rc-1783582192

package/dist/index.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./index-CWopIWxB.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-C2hIrXzf.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-CBm9au-T.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-CPbf44kW.js";
 export {
   e as ActionButton,
   t as Avatar,

package/package.json

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

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,49 @@ 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('ignores a trailing system row when the last real message is still the viewer’s own', () => {
+    mockedUseChannelStateContext.mockReturnValue({
+      messages: [
+        { id: 'own-1', user: { id: 'me' } },
+        { id: 'their-1', user: { id: 'them' } },
+        { id: 'own-2', user: { id: 'me' } },
+        { id: 'system-1', type: 'system' },
+      ],
+    } as never)
+    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('always suppresses the sending spinner', () => {
     mockedUseMessageContext.mockReturnValue({
       message: { id: 'own-2' },

package/src/components/CustomMessage/SentMessageDeliveryStatus.tsx

@@ -1,9 +1,7 @@
 import { ChecksIcon } from '@phosphor-icons/react'
-import { useMemo } from 'react'
 import {
   MessageStatus,
   useChannelStateContext,
-  useChatContext,
   useMessageContext,
 } from 'stream-chat-react'
 
@@ -15,21 +13,25 @@ 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. We still skip non-participant rows (`system`,
+ *    `ephemeral`, `deleted`) when finding the last real message so a trailing
+ *    system event does not clear the label.
  *
  * 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 +39,30 @@ 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
+  const lastMessageId = (() => {
+    if (!messages) {
+      return undefined
     }
+
+    for (let index = messages.length - 1; index >= 0; index -= 1) {
+      const lastMessage = messages[index]
+
+      if (
+        lastMessage.type === 'system' ||
+        lastMessage.type === 'ephemeral' ||
+        lastMessage.type === 'deleted'
+      ) {
+        continue
+      }
+
+      return lastMessage.id
+    }
+
     return undefined
-  }, [messages, ownUserId])
+  })()
 
-  if (message.id !== lastOwnMessageId) {
+  if (message.id !== lastMessageId) {
     return null
   }
 
@@ -73,8 +87,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