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

package/dist/index.cjs

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

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

@@ -228,9 +228,9 @@ Default.args = {
 // 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).
+// per-message `groupStyles` ('bottom' | 'single'), so it shows once per
+// consecutive same-author run — here below "Hey there!" (received),
+// "Talk soon!" (sent run of two), and "See you then." (sent run of two).
 export const DeliveredStatus: StoryFn<TemplateProps> = Template.bind({})
 DeliveredStatus.args = {
   messages: [

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

@@ -12,29 +12,35 @@ const receivedMessage = {
 } as unknown as LocalMessage
 
 const render = (
-  props: Partial<{ message: LocalMessage; endOfGroup: boolean }> = {}
+  props: Partial<{ message: LocalMessage; groupStyles: string[] }> = {}
 ) =>
   renderWithProviders(
     <MessageDeliveryStatus
       message={props.message ?? receivedMessage}
-      endOfGroup={props.endOfGroup ?? true}
+      groupStyles={props.groupStyles ?? ['bottom']}
     />
   )
 
 describe('MessageDeliveryStatus', () => {
-  it('renders "Delivered" at the end of a group for a stored message', () => {
-    render()
+  it.each(['bottom', 'single'] as const)(
+    'renders "Delivered" at the end of a group (groupStyle: %s)',
+    (style) => {
+      render({ groupStyles: [style] })
 
-    expect(screen.getByTestId('message-delivery-status')).toHaveTextContent(
-      'Delivered'
-    )
-  })
+      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 })
+  it.each(['top', 'middle'] as const)(
+    'renders nothing for a message that is not the end of its group (groupStyle: %s)',
+    (style) => {
+      const { container } = render({ groupStyles: [style] })
 
-    expect(container).toBeEmptyDOMElement()
-  })
+      expect(container).toBeEmptyDOMElement()
+    }
+  )
 
   it.each(['sending', 'failed'] as const)(
     'renders nothing while the message status is %s',

package/src/components/CustomMessage/MessageDeliveryStatus.tsx

@@ -4,30 +4,40 @@ 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.
+   * stream's per-message group-position styles (`'top' | 'middle' | 'bottom'
+   * | 'single'`). We key off this rather than the `endOfGroup` boolean:
+   * `endOfGroup` is only supplied by the *virtualized* MessageList, whereas
+   * the standard (non-virtualized) MessageList this package renders through
+   * passes `groupStyles` only. `getGroupStyles` accounts for author changes
+   * and time gaps, so it matches the visual grouping (incl. date breaks).
    */
-  endOfGroup?: boolean
+  groupStyles?: string[]
 }
 
+/** The last bubble of a group is 'bottom' (a run) or 'single' (standalone). */
+const isEndOfGroup = (groupStyles?: string[]) =>
+  !!groupStyles &&
+  (groupStyles.includes('bottom') || groupStyles.includes('single'))
+
 /**
  * "✓✓ 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".
+ * displays the status per group rather than only on the most recent 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`).
+ * Renders only once a message is stored (`status === 'received'`, which
+ * `formatMessage` sets on every persisted message, incoming included) and
+ * never on errors. Left/right alignment comes from the outer grid (see
+ * `styles.css`).
  */
 export const MessageDeliveryStatus = ({
   message,
-  endOfGroup,
+  groupStyles,
 }: MessageDeliveryStatusProps) => {
-  if (!endOfGroup || message.type === 'error' || message.status !== 'received') {
+  if (
+    !isEndOfGroup(groupStyles) ||
+    message.type === 'error' ||
+    message.status !== 'received'
+  ) {
     return null
   }
 

package/src/components/CustomMessage/index.tsx

@@ -69,6 +69,7 @@ const CustomMessageWithContext = (props: CustomMessageWithContextProps) => {
     endOfGroup,
     firstOfGroup,
     groupedByUser,
+    groupStyles,
     handleAction,
     handleOpenThread,
     handleRetry,
@@ -398,7 +399,7 @@ const CustomMessageWithContext = (props: CustomMessageWithContextProps) => {
             )}
           </div>
         )}
-        <MessageDeliveryStatus message={message} endOfGroup={endOfGroup} />
+        <MessageDeliveryStatus message={message} groupStyles={groupStyles} />
         {showReplyCountButton && (
           <MessageRepliesCountButton
             onClick={handleOpenThread}