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

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-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;
 //# 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-DPwo1avm.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-1783314663",
   "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-1783314663",
     "@phosphor-icons/react": "^2.1.10"
   },
   "devDependencies": {

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

@@ -225,36 +225,43 @@ Default.args = {
   ],
 }
 
-// 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.
+// 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).
 export const DeliveredStatus: StoryFn<TemplateProps> = Template.bind({})
 DeliveredStatus.args = {
   messages: [
     {
       id: 'msg-1',
-      text: 'Hey, did you get my last message?',
+      text: 'Hey there!',
       user: storyUsers.visitor,
     },
     {
       id: 'msg-2',
-      text: 'Yes! Just replying now.',
+      text: 'Hi! Great to hear from you.',
       user: storyUsers.creator,
     },
     {
       id: 'msg-3',
-      text: 'Sounds good.',
-      user: storyUsers.visitor,
+      text: 'Talk soon!',
+      user: storyUsers.creator,
     },
     {
       id: 'msg-4',
-      text: 'Let me know if you need anything else.',
-      user: storyUsers.creator,
+      text: 'Sounds good — catch up tomorrow?',
+      user: storyUsers.visitor,
     },
     {
       id: 'msg-5',
-      text: 'Talk soon!',
+      text: 'Absolutely.',
+      user: storyUsers.creator,
+    },
+    {
+      id: 'msg-6',
+      text: 'See you then.',
       user: storyUsers.creator,
     },
   ],

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

@@ -0,0 +1,60 @@
+import type { LocalMessage } from 'stream-chat'
+import { describe, expect, it } from 'vitest'
+
+import { renderWithProviders, screen } from '../../test/utils'
+
+import { MessageDeliveryStatus } from './MessageDeliveryStatus'
+
+const receivedMessage = {
+  id: 'message-1',
+  status: 'received',
+  type: 'regular',
+} as unknown as LocalMessage
+
+const render = (
+  props: Partial<{ message: LocalMessage; endOfGroup: boolean }> = {}
+) =>
+  renderWithProviders(
+    <MessageDeliveryStatus
+      message={props.message ?? receivedMessage}
+      endOfGroup={props.endOfGroup ?? true}
+    />
+  )
+
+describe('MessageDeliveryStatus', () => {
+  it('renders "Delivered" at the end of a group for a stored message', () => {
+    render()
+
+    expect(screen.getByTestId('message-delivery-status')).toHaveTextContent(
+      'Delivered'
+    )
+  })
+
+  it('renders nothing for messages that are not the end of their group', () => {
+    const { container } = render({ endOfGroup: false })
+
+    expect(container).toBeEmptyDOMElement()
+  })
+
+  it.each(['sending', 'failed'] as const)(
+    'renders nothing while the message status is %s',
+    (status) => {
+      const { container } = render({
+        message: { ...receivedMessage, status } as unknown as LocalMessage,
+      })
+
+      expect(container).toBeEmptyDOMElement()
+    }
+  )
+
+  it('renders nothing for error messages', () => {
+    const { container } = render({
+      message: {
+        ...receivedMessage,
+        type: 'error',
+      } as unknown as LocalMessage,
+    })
+
+    expect(container).toBeEmptyDOMElement()
+  })
+})

package/src/components/CustomMessage/MessageDeliveryStatus.tsx

@@ -0,0 +1,43 @@
+import { ChecksIcon } from '@phosphor-icons/react'
+import type { LocalMessage } from 'stream-chat'
+
+interface MessageDeliveryStatusProps {
+  message: LocalMessage
+  /**
+   * stream's end-of-group flag — the last message in a run of consecutive
+   * messages from the same author.
+   */
+  endOfGroup?: boolean
+}
+
+/**
+ * "✓✓ Delivered" status shown beneath the last bubble of every message group,
+ * on both the sent (right) and received (left) sides (MES-1036). The design
+ * displays the status per group rather than only on the most recent message,
+ * so it's gated on `endOfGroup` rather than "last own message".
+ *
+ * `endOfGroup` is compared by both stream's `Message` memo
+ * (`areMessagePropsEqual`) and `CustomMessage`'s memo (`areMessageUIPropsEqual`),
+ * so the status reliably appears/updates as groups form and re-form — no
+ * stale-memo caveats. It renders only once a message is stored
+ * (`status === 'received'`, true for incoming messages too) and never on
+ * errors. Left/right alignment comes from the outer grid (see `styles.css`).
+ */
+export const MessageDeliveryStatus = ({
+  message,
+  endOfGroup,
+}: MessageDeliveryStatusProps) => {
+  if (!endOfGroup || message.type === 'error' || message.status !== 'received') {
+    return null
+  }
+
+  return (
+    <div
+      className="str-chat__message-delivery-status"
+      data-testid="message-delivery-status"
+    >
+      <ChecksIcon size={14} weight="bold" aria-hidden="true" />
+      <span>Delivered</span>
+    </div>
+  )
+}

package/src/components/CustomMessage/index.tsx

@@ -39,6 +39,7 @@ import {
 } from '../MessageAttachment'
 
 import { useCustomMessage } from './context'
+import { MessageDeliveryStatus } from './MessageDeliveryStatus'
 import {
   MessageTag,
   isAttachmentMessage,
@@ -46,7 +47,6 @@ 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>
         )}
-        <SentMessageDeliveryStatus />
+        <MessageDeliveryStatus message={message} endOfGroup={endOfGroup} />
         {showReplyCountButton && (
           <MessageRepliesCountButton
             onClick={handleOpenThread}
@@ -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

package/src/styles.css

@@ -333,12 +333,16 @@
   grid-column-gap: 4px;
 }
 
-/* Outer grid for other (incoming) messages — add footer row after message */
+/* 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. */
 .str-chat__li .str-chat__message--other {
   grid-template-areas:
     '. message-reminder'
     'avatar message'
     '. footer'
+    '. delivery-status'
     '. replies'
     '. translation-notice'
     '. custom-metadata'
@@ -352,9 +356,9 @@
 }
 
 /* Outer grid for me (outgoing) messages — footer + delivery-status rows
-   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. */
+   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. */
 .str-chat__li .str-chat__message--me {
   grid-template-areas:
     'message-reminder'
@@ -416,34 +420,21 @@
   align-items: flex-end;
 }
 
-/* "✓✓ 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 {
+/* "✓✓ 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 {
   grid-area: delivery-status;
-  justify-content: flex-end;
+  display: inline-flex;
+  align-items: center;
   gap: 2px;
   padding-block-start: 2px;
-  padding-inline-end: 4px;
+  padding-inline: 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 {