@linktr.ee/messaging-react 3.6.0 → 3.6.1-rc-1783305041

package/dist/index.cjs

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@linktr.ee/messaging-react",
-  "version": "3.6.0",
+  "version": "3.6.1-rc-1783305041",
   "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.2.0",
+    "@linktr.ee/messaging-core": "2.3.0-rc-1783305041",
     "@phosphor-icons/react": "^2.1.10"
   },
   "devDependencies": {

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

@@ -225,6 +225,41 @@ 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.
+export const DeliveredStatus: StoryFn<TemplateProps> = Template.bind({})
+DeliveredStatus.args = {
+  messages: [
+    {
+      id: 'msg-1',
+      text: 'Hey, did you get my last message?',
+      user: storyUsers.visitor,
+    },
+    {
+      id: 'msg-2',
+      text: 'Yes! Just replying now.',
+      user: storyUsers.creator,
+    },
+    {
+      id: 'msg-3',
+      text: 'Sounds good.',
+      user: storyUsers.visitor,
+    },
+    {
+      id: 'msg-4',
+      text: 'Let me know if you need anything else.',
+      user: storyUsers.creator,
+    },
+    {
+      id: 'msg-5',
+      text: 'Talk soon!',
+      user: storyUsers.creator,
+    },
+  ],
+}
+
 export const WithTipTag: StoryFn<TemplateProps> = Template.bind({})
 WithTipTag.args = {
   messages: [

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

@@ -0,0 +1,72 @@
+import type { LocalMessage } from 'stream-chat'
+import { describe, expect, it } from 'vitest'
+
+import { renderWithProviders, screen } from '../../test/utils'
+
+import { SentMessageDeliveryStatus } from './SentMessageDeliveryStatus'
+
+const baseMessage = {
+  id: 'message-1',
+  status: 'received',
+  type: 'regular',
+} as unknown as LocalMessage
+
+const renderStatus = (
+  props: Partial<{
+    message: LocalMessage
+    isMyMessage: boolean
+    lastOwnMessageId?: string
+  }> = {}
+) =>
+  renderWithProviders(
+    <SentMessageDeliveryStatus
+      message={props.message ?? baseMessage}
+      isMyMessage={props.isMyMessage ?? true}
+      lastOwnMessageId={props.lastOwnMessageId ?? 'message-1'}
+    />
+  )
+
+describe('SentMessageDeliveryStatus', () => {
+  it('renders "Delivered" for the last own message once Stream has received it', () => {
+    renderStatus()
+
+    expect(
+      screen.getByTestId('sent-message-delivery-status')
+    ).toBeInTheDocument()
+    expect(screen.getByText(/delivered/i)).toBeInTheDocument()
+  })
+
+  it('renders nothing when the message is not authored by the viewer', () => {
+    const { container } = renderStatus({ isMyMessage: false })
+
+    expect(container).toBeEmptyDOMElement()
+  })
+
+  it('renders nothing when this is not the last own message', () => {
+    const { container } = renderStatus({ lastOwnMessageId: 'message-2' })
+
+    expect(container).toBeEmptyDOMElement()
+  })
+
+  it.each(['sending', 'failed'] as const)(
+    'renders nothing while the message status is %s',
+    (status) => {
+      const { container } = renderStatus({
+        message: { ...baseMessage, status } as unknown as LocalMessage,
+      })
+
+      expect(container).toBeEmptyDOMElement()
+    }
+  )
+
+  it('renders nothing for error messages', () => {
+    const { container } = renderStatus({
+      message: {
+        ...baseMessage,
+        type: 'error',
+      } as unknown as LocalMessage,
+    })
+
+    expect(container).toBeEmptyDOMElement()
+  })
+})

package/src/components/CustomMessage/SentMessageDeliveryStatus.tsx

@@ -0,0 +1,49 @@
+import { ChecksIcon } from '@phosphor-icons/react'
+import type { LocalMessage } from 'stream-chat'
+
+interface SentMessageDeliveryStatusProps {
+  message: LocalMessage
+  /** Result of the message context's `isMyMessage()` for this message. */
+  isMyMessage: boolean
+  /** `id` of the viewer's most recent own message, from `lastOwnMessage`. */
+  lastOwnMessageId?: string
+}
+
+/**
+ * "✓✓ Delivered" indicator shown beneath the viewer's most recent **sent**
+ * message, right-aligned (MES-1036).
+ *
+ * "Delivered" fires once Stream confirms the message is stored on the backend
+ * (`status === 'received'`) and updates live as that status flips. It renders
+ * only on the last own message in the thread — never on earlier bubbles, and
+ * never on error messages. Read receipts are intentionally out of scope per
+ * the ticket.
+ *
+ * The "is this the last own message?" decision comes from stream-chat-react's
+ * `lastOwnMessage` (via `MessageContext`); the parent must re-render this
+ * subtree when `lastOwnMessage` changes so the label hops to a newer message.
+ */
+export const SentMessageDeliveryStatus = ({
+  message,
+  isMyMessage,
+  lastOwnMessageId,
+}: SentMessageDeliveryStatusProps) => {
+  const isLastOwnMessage =
+    isMyMessage &&
+    message.type !== 'error' &&
+    lastOwnMessageId === message.id
+
+  if (!isLastOwnMessage || message.status !== 'received') {
+    return null
+  }
+
+  return (
+    <div
+      className="str-chat__message-delivery-status"
+      data-testid="sent-message-delivery-status"
+    >
+      <ChecksIcon size={14} weight="bold" aria-hidden="true" />
+      <span>Delivered</span>
+    </div>
+  )
+}

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

@@ -5,8 +5,41 @@ import { renderWithProviders, screen } from '../../test/utils'
 
 import StreamAttachmentMessage, {
   linkCaptionDuplicatesAttachmentUrl,
+  linkCardPropsFromStreamAttachment,
 } from './StreamAttachmentMessage'
 
+describe('linkCardPropsFromStreamAttachment', () => {
+  it('uses the featured layout when a thumbnail is present', () => {
+    expect(
+      linkCardPropsFromStreamAttachment({
+        type: 'link',
+        og_scrape_url: 'https://linktr.ee/someone',
+        image_url: 'https://cdn.example.com/thumb.jpg',
+      }).layout
+    ).toBe('featured')
+  })
+
+  it('uses the classic layout for a plain link with no thumbnail', () => {
+    expect(
+      linkCardPropsFromStreamAttachment({
+        type: 'link',
+        og_scrape_url: 'https://linktr.ee/someone',
+      }).layout
+    ).toBe('classic')
+  })
+
+  it('keeps the featured layout for a playable clip with no thumbnail so the player renders', () => {
+    expect(
+      linkCardPropsFromStreamAttachment({
+        type: 'link',
+        og_scrape_url: 'https://linktr.ee/someone',
+        asset_url: 'https://cdn.example.com/clip.mp3',
+        mime_type: 'audio/mpeg',
+      }).layout
+    ).toBe('featured')
+  })
+})
+
 describe('linkCaptionDuplicatesAttachmentUrl', () => {
   it('suppresses captions that are just the link plus punctuation', () => {
     expect(

package/src/components/CustomMessage/StreamAttachmentMessage.tsx

@@ -2,6 +2,7 @@ import React from 'react'
 import type { Attachment } from 'stream-chat'
 
 import LinkAttachment from '../LinkAttachment'
+import { isPlayableMedia } from '../LinkAttachment/components/_shared/CardThumbnail'
 import MessageAttachment from '../MessageAttachment'
 import type { BubbleGroupPosition } from '../MessageAttachment/types'
 
@@ -62,6 +63,8 @@ export function linkCardPropsFromStreamAttachment(a: Attachment) {
   const thumbnailUrl =
     trimToUndefined((a as { image_url?: string }).image_url) ??
     trimToUndefined((a as { thumb_url?: string }).thumb_url)
+  const sourceUrl = trimToUndefined(a.asset_url)
+  const mimeType = trimToUndefined(a.mime_type)
 
   return {
     title: trimToUndefined((a as { title?: string }).title),
@@ -70,9 +73,12 @@ export function linkCardPropsFromStreamAttachment(a: Attachment) {
     thumbnailUrl,
     // Playable clip embedded in a link preview — lets LinkAttachment render its
     // native video/audio player in the hero instead of a static thumbnail.
-    sourceUrl: trimToUndefined(a.asset_url),
-    layout: thumbnailUrl ? 'featured' : 'classic',
-    mimeType: trimToUndefined(a.mime_type),
+    sourceUrl,
+    layout:
+      thumbnailUrl || isPlayableMedia(mimeType, sourceUrl)
+        ? 'featured'
+        : 'classic',
+    mimeType,
   } as const
 }
 

package/src/components/CustomMessage/index.tsx

@@ -46,6 +46,7 @@ import {
   isTipOnlyMessage,
 } from './MessageTag'
 import { MessageVoteButtons } from './MessageVoteButtons'
+import { SentMessageDeliveryStatus } from './SentMessageDeliveryStatus'
 import StreamAttachmentMessage, {
   buildOrderedAttachmentSegments,
 } from './StreamAttachmentMessage'
@@ -74,6 +75,7 @@ const CustomMessageWithContext = (props: CustomMessageWithContextProps) => {
     highlighted,
     isMessageAIGenerated,
     isMyMessage,
+    lastOwnMessage,
     message,
     renderText,
     threadList,
@@ -213,15 +215,17 @@ const CustomMessageWithContext = (props: CustomMessageWithContextProps) => {
     isChatbot && isMine && hasRenderableAttachments
   // Route generic Stream attachments through the toolkit renderer only when it
   // can faithfully own the whole message. Quoted replies (attachments are
-  // suppressed there), polls, and AI-streamed messages fall through to the
-  // default branch so their Poll / StreamedMessageText / message-text handling
-  // is preserved — the accompanying message text must never be dropped.
+  // suppressed there), polls, AI-streamed, and chatbot messages fall through to
+  // the default branch so their Poll / StreamedMessageText / message-text and
+  // chatbot attribution (MessageTag) handling is preserved — the accompanying
+  // message text and attribution must never be dropped.
   const canRenderAttachmentsInToolkit =
     hasAttachmentSegments &&
     allAttachmentsRepresented &&
     !message.quoted_message &&
     !poll &&
-    !isAIGenerated
+    !isAIGenerated &&
+    !isChatbot
 
   return (
     <>
@@ -395,6 +399,11 @@ const CustomMessageWithContext = (props: CustomMessageWithContextProps) => {
             )}
           </div>
         )}
+        <SentMessageDeliveryStatus
+          message={message}
+          isMyMessage={isMine}
+          lastOwnMessageId={lastOwnMessage?.id}
+        />
         {showReplyCountButton && (
           <MessageRepliesCountButton
             onClick={handleOpenThread}
@@ -414,6 +423,11 @@ 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's placement
+    // (`SentMessageDeliveryStatus`). `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

@@ -351,12 +351,16 @@
   column-gap: 0.25rem;
 }
 
-/* Outer grid for me (outgoing) messages — add footer row after message */
+/* 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. */
 .str-chat__li .str-chat__message--me {
   grid-template-areas:
     'message-reminder'
     'message'
     'footer'
+    'delivery-status'
     'replies'
     'translation-notice'
     'custom-metadata'
@@ -412,6 +416,20 @@
   align-items: flex-end;
 }
 
+/* "✓✓ Delivered" delivery status under the last sent message (MES-1036).
+   Right-aligned via the outer grid's `justify-items: end`. */
+.str-chat__li .str-chat__message-delivery-status {
+  grid-area: delivery-status;
+  display: inline-flex;
+  align-items: center;
+  gap: 2px;
+  padding-block-start: 2px;
+  padding-inline-end: 4px;
+  font-size: 12px;
+  line-height: 1.4;
+  color: var(--str-chat__text-low-emphasis-color, rgba(0, 0, 0, 0.5));
+}
+
 /* Channel list load-more button overrides */
 .str-chat__channel-list .str-chat__load-more-button__button {
   background-color: #121110;