@linktr.ee/messaging-react 3.9.1-rc-1783576271 → 3.9.1-rc-1783580113

package/dist/index.cjs

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

package/package.json

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

package/src/components/ChannelHeaderRedesign.tsx

@@ -42,6 +42,7 @@ const hasCustomerPaidTag = (participant?: ChannelMemberResponse) => {
 }
 
 interface ChannelHeaderRedesignProps {
+  className?: string
   onBack?: () => void
   showBackButton: boolean
   showStarButton?: boolean
@@ -61,6 +62,7 @@ interface ChannelHeaderRedesignProps {
 }
 
 export const ChannelHeaderRedesign: React.FC<ChannelHeaderRedesignProps> = ({
+  className,
   onBack,
   showBackButton,
   showStarButton = false,
@@ -112,7 +114,12 @@ export const ChannelHeaderRedesign: React.FC<ChannelHeaderRedesignProps> = ({
   }
 
   return (
-    <div className="@container w-full bg-[linear-gradient(180deg,#FBFAF9_0%,rgba(251,250,249,0.92)_58%,rgba(251,250,249,0)_100%)]">
+    <div
+      className={classNames(
+        '@container bg-[linear-gradient(180deg,#FBFAF9_0%,rgba(251,250,249,0.92)_58%,rgba(251,250,249,0)_100%)]',
+        className
+      )}
+    >
       <div className="grid min-h-[100px] grid-cols-[minmax(40px,1fr)_auto_minmax(40px,1fr)] items-start pb-2 pt-5 @lg:min-h-[104px] @lg:pt-6">
         <div className="flex items-start">
           {showBackButton && (

package/src/components/ChannelView.tsx

@@ -475,6 +475,7 @@ const ChannelViewInner: React.FC<{
   ) : null
   const redesignedHeader = onParticipantNameClick ? (
     <ChannelHeaderRedesign
+      className="-mx-[var(--str-chat\_\_spacing-2)] px-[var(--str-chat\_\_spacing-2)] md:-mx-[min(var(--str-chat\_\_spacing-10),4%)] md:px-[min(var(--str-chat\_\_spacing-10),4%)]"
       onBack={onBack}
       showBackButton={showBackButton}
       showChannelInfo={showChannelInfo}
@@ -552,20 +553,22 @@ const ChannelViewInner: React.FC<{
             </>
           )}
 
-          {/* Stream only renders MessageList.head when there are messages, so
-              empty redesigned channels need the header and banner in normal flow. */}
-          {onParticipantNameClick && !hasVisibleMessages && (
-            <div className="px-4 @lg:px-6">
-              {redesignedHeader}
-              {channelBanner}
-            </div>
-          )}
-
           {/* Message List */}
           <div
             key="lt-channel-message-list"
             className="flex-1 overflow-hidden relative"
           >
+            {/* Stream only renders MessageList.head when there are messages, so
+              empty redesigned channels need the header and banner in normal flow. */}
+            {onParticipantNameClick && !hasVisibleMessages && (
+              <div className="str-chat__list">
+                <div className="str-chat__message-list-scroll">
+                  {redesignedHeader}
+                  {channelBanner}
+                </div>
+              </div>
+            )}
+
             <MessageList
               head={
                 onParticipantNameClick && hasVisibleMessages ? (

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

@@ -1,6 +1,7 @@
 import React from 'react'
 import {
   useChannelStateContext,
+  useChatContext,
   useMessageContext,
 } from 'stream-chat-react'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
@@ -12,13 +13,14 @@ 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 "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.
+// 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,
@@ -44,10 +46,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 label must sit on the last message ('own-2')
-// and clear from the earlier one.
+// 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' } },
@@ -58,12 +60,13 @@ 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 message in the thread', () => {
+  it('renders "Delivered" in every terminal slot for the last own message', () => {
     // delivered/read fire ahead of sent in receipt channels, so all three
     // must show the label — never Stream's default delivered icon / read
     // avatars.
@@ -80,7 +83,7 @@ describe('SentMessageDeliveryStatus', () => {
     }
   })
 
-  it('renders nothing for an earlier own message once a later message exists', () => {
+  it('renders nothing for an earlier own message even though one is the last own message', () => {
     mockedUseMessageContext.mockReturnValue({
       message: { id: 'own-1' },
     } as never)
@@ -92,27 +95,6 @@ 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('always suppresses the sending spinner', () => {
     mockedUseMessageContext.mockReturnValue({
       message: { id: 'own-2' },

package/src/components/CustomMessage/SentMessageDeliveryStatus.tsx

@@ -3,6 +3,7 @@ import { useMemo } from 'react'
 import {
   MessageStatus,
   useChannelStateContext,
+  useChatContext,
   useMessageContext,
 } from 'stream-chat-react'
 
@@ -14,23 +15,21 @@ 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 message. So we override all three
+ *    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 "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.
+ *    icon / read avatars — Read is out of scope) and re-apply the "last own
+ *    message" gate ourselves.
  *
- * 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.
+ * 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`.
@@ -38,13 +37,18 @@ import {
 const DeliveredStatus = () => {
   const { message } = useMessageContext('SentMessageDeliveryStatus')
   const { messages } = useChannelStateContext('SentMessageDeliveryStatus')
+  const { client } = useChatContext('SentMessageDeliveryStatus')
 
-  const lastMessageId = useMemo(
-    () => messages?.[messages.length - 1]?.id,
-    [messages]
-  )
+  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 !== lastMessageId) {
+  if (message.id !== lastOwnMessageId) {
     return null
   }
 
@@ -69,8 +73,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 latest-message-in-thread gate (see there for why the gate is
- * computed from live channel state rather than the context's props).
+ * 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/StreamAttachmentMessage.stories.tsx

@@ -1,7 +1,7 @@
 import type { Meta, StoryFn } from '@storybook/react'
 import classNames from 'classnames'
 import React from 'react'
-import type { Attachment } from 'stream-chat'
+import type { Attachment, LocalMessage } from 'stream-chat'
 
 import {
   currentUserArgType,
@@ -23,22 +23,29 @@ import StreamAttachmentMessage from './StreamAttachmentMessage'
  * Stream-attachment → `LinkAttachment` prop mapping, caption
  * de-duplication (including emoji preservation), and media clustering.
  *
- * The component renders bare rows; this wrapper just anchors the run to
- * the correct chat edge so sent/received read the way they do in-app.
+ * The component owns the Stream bubble-wrapper markup. Stories only supply
+ * the `.str-chat` / `.str-chat__message--me|other` / `.str-chat__li--single`
+ * ancestry that Stream bubble chrome and the MES-1031 tails are scoped under.
  * ────────────────────────────────────────────────────────────────── */
 
 const Bubbles: React.FC<{ isMyMessage: boolean; children: React.ReactNode }> = ({
   isMyMessage,
   children,
 }) => (
-  <div className="mx-auto max-w-2xl p-12">
-    <div
-      className={classNames(
-        'flex flex-col gap-[2px]',
-        isMyMessage ? 'items-end' : 'items-start'
-      )}
-    >
-      {children}
+  <div className="str-chat mx-auto max-w-2xl p-12">
+    {/* Tail CSS is scoped to `.str-chat__li--single|--bottom`; bubble surface
+        styles need `.str-chat__message--me|other`. */}
+    <div className="str-chat__li str-chat__li--single">
+      <div
+        className={classNames(
+          'str-chat__message str-chat__message-simple',
+          isMyMessage
+            ? 'str-chat__message--me str-chat__message-simple--me'
+            : 'str-chat__message--other'
+        )}
+      >
+        <div className="str-chat__message-inner">{children}</div>
+      </div>
     </div>
   </div>
 )
@@ -51,7 +58,7 @@ const Render = (attachments: Attachment[], text?: string): StoryFn<StoryArgs> =>
         <StreamAttachmentMessage
           groupPosition="single"
           isMyMessage={isMyMessage}
-          message={{ attachments, text }}
+          message={{ attachments, text } as LocalMessage}
         />
       </Bubbles>
     )

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

@@ -1,4 +1,5 @@
 import React from 'react'
+import type { Attachment, LocalMessage } from 'stream-chat'
 import { describe, expect, it } from 'vitest'
 
 import { renderWithProviders, screen } from '../../test/utils'
@@ -8,6 +9,11 @@ import StreamAttachmentMessage, {
   linkCardPropsFromStreamAttachment,
 } from './StreamAttachmentMessage'
 
+const message = (
+  attachments: Attachment[],
+  text?: string
+): LocalMessage => ({ attachments, text }) as LocalMessage
+
 describe('linkCardPropsFromStreamAttachment', () => {
   it('uses the featured layout when a thumbnail is present', () => {
     expect(
@@ -66,8 +72,8 @@ describe('StreamAttachmentMessage', () => {
       <StreamAttachmentMessage
         groupPosition="single"
         isMyMessage={true}
-        message={{
-          attachments: [
+        message={message(
+          [
             {
               type: 'link',
               og_scrape_url: 'https://linktr.ee/someone',
@@ -76,8 +82,8 @@ describe('StreamAttachmentMessage', () => {
               image_url: 'https://cdn.example.com/thumb.jpg',
             },
           ],
-          text: 'https://linktr.ee/someone !',
-        }}
+          'https://linktr.ee/someone !'
+        )}
       />
     )
 
@@ -88,24 +94,30 @@ describe('StreamAttachmentMessage', () => {
   })
 
   it('keeps an emoji-only caption instead of dropping it', () => {
-    renderWithProviders(
+    const { container } = renderWithProviders(
       <StreamAttachmentMessage
         groupPosition="single"
         isMyMessage={false}
-        message={{
-          attachments: [
+        message={message(
+          [
             {
               type: 'link',
               og_scrape_url: 'https://linktr.ee/someone',
               title: 'My Linktree',
             },
           ],
-          text: 'https://linktr.ee/someone 😎',
-        }}
+          'https://linktr.ee/someone 😎'
+        )}
       />
     )
 
-    expect(screen.getByText('https://linktr.ee/someone 😎')).toBeInTheDocument()
+    // MessageText linkifies the URL (display text drops the scheme), so the
+    // caption is split across a link node and trailing emoji text.
+    const captionBubble = container.querySelector(
+      '.str-chat__message-bubble:not([data-attachment-bubble])'
+    )
+    expect(captionBubble).toHaveTextContent('linktr.ee/someone')
+    expect(captionBubble).toHaveTextContent('😎')
   })
 
   it('renders mixed link and media attachments in order', () => {
@@ -113,8 +125,8 @@ describe('StreamAttachmentMessage', () => {
       <StreamAttachmentMessage
         groupPosition="single"
         isMyMessage={true}
-        message={{
-          attachments: [
+        message={message(
+          [
             {
               type: 'link',
               og_scrape_url: 'https://linktr.ee/someone',
@@ -126,8 +138,8 @@ describe('StreamAttachmentMessage', () => {
               title: 'Vacation',
             },
           ],
-          text: 'caption',
-        }}
+          'caption'
+        )}
       />
     )
 
@@ -140,27 +152,28 @@ describe('StreamAttachmentMessage', () => {
     expect(container).toHaveTextContent('caption')
   })
 
-  // The message text must never be dropped when a message carries an
-  // attachment — only genuine URL-only captions are suppressed.
   it('renders the accompanying message text next to a link attachment', () => {
-    renderWithProviders(
+    const { container } = renderWithProviders(
       <StreamAttachmentMessage
         groupPosition="single"
         isMyMessage={true}
-        message={{
-          attachments: [
+        message={message(
+          [
             {
               type: 'link',
               og_scrape_url: 'https://linktr.ee/someone',
               title: 'My Linktree',
             },
           ],
-          text: 'you have to see this',
-        }}
+          'you have to see this'
+        )}
       />
     )
 
-    expect(screen.getByText('you have to see this')).toBeInTheDocument()
+    const bubbles = container.querySelectorAll('.str-chat__message-bubble')
+    expect(bubbles).toHaveLength(2)
+    expect(bubbles[0]).toHaveAttribute('data-attachment-bubble', 'true')
+    expect(bubbles[1]).toHaveTextContent('you have to see this')
   })
 
   it('renders the accompanying message text next to a media attachment', () => {
@@ -168,19 +181,24 @@ describe('StreamAttachmentMessage', () => {
       <StreamAttachmentMessage
         groupPosition="single"
         isMyMessage={false}
-        message={{
-          attachments: [
+        message={message(
+          [
             {
               type: 'image',
               image_url: 'https://cdn.example.com/photo.jpg',
               title: 'Vacation',
             },
           ],
-          text: 'from the trip',
-        }}
+          'from the trip'
+        )}
       />
     )
 
     expect(container).toHaveTextContent('from the trip')
+    expect(
+      container.querySelector(
+        '.str-chat__message-bubble:not([data-attachment-bubble])'
+      )
+    ).toHaveTextContent('from the trip')
   })
 })

package/src/components/CustomMessage/StreamAttachmentMessage.tsx

@@ -1,5 +1,10 @@
 import React from 'react'
-import type { Attachment } from 'stream-chat'
+import type { Attachment, LocalMessage } from 'stream-chat'
+import {
+  MessageErrorIcon,
+  MessageText,
+  type MessageContextValue,
+} from 'stream-chat-react'
 
 import LinkAttachment from '../LinkAttachment'
 import { isPlayableMedia } from '../LinkAttachment/components/_shared/CardThumbnail'
@@ -12,16 +17,6 @@ export type AttachmentSegment =
   | { type: 'link'; attachments: Attachment[] }
   | { type: 'media'; kind: StreamMediaKind; attachments: Attachment[] }
 
-type StreamThreadMessage = {
-  attachments?: Attachment[]
-  text?: string
-}
-
-const SENT_CAPTION_CLASS =
-  'mt-[2px] max-w-[280px] whitespace-pre-wrap break-words rounded-[18px] bg-[#121110] px-4 py-2 text-white'
-const RECEIVED_CAPTION_CLASS =
-  'mt-[2px] max-w-[280px] whitespace-pre-wrap break-words rounded-[18px] bg-[#e9eaed] px-4 py-2 text-[#080707]'
-
 function trimToUndefined(value?: string | null): string | undefined {
   const trimmed = value?.trim()
   return trimmed ? trimmed : undefined
@@ -152,19 +147,9 @@ export function buildOrderedAttachmentSegments(
   return segments
 }
 
-export function countAttachmentSegmentBubbles(
+export function countMediaSegmentBubbles(
   segments: AttachmentSegment[]
 ): number {
-  let count = 0
-
-  for (const segment of segments) {
-    count += segment.type === 'link' ? segment.attachments.length : 1
-  }
-
-  return count
-}
-
-export function countMediaSegmentBubbles(segments: AttachmentSegment[]): number {
   return segments.filter((segment) => segment.type === 'media').length
 }
 
@@ -304,18 +289,15 @@ function MediaClusterBubble({
   groupPosition,
   isMyMessage,
   segment,
-  text,
 }: {
   groupPosition: BubbleGroupPosition
   isMyMessage: boolean
   segment: Extract<AttachmentSegment, { type: 'media' }>
-  text?: string
 }) {
   const TypeNamespace = messageAttachmentNamespaceForKind(segment.kind)
   const props = {
     ...buildMediaClusterRenderProps(segment.kind, segment.attachments),
     groupPosition,
-    ...(text ? { text } : {}),
   }
 
   if (isMyMessage) {
@@ -328,18 +310,19 @@ function MediaClusterBubble({
 export interface StreamAttachmentMessageProps {
   groupPosition: BubbleGroupPosition
   isMyMessage: boolean
-  message: StreamThreadMessage
+  message: LocalMessage
+  renderText?: MessageContextValue['renderText']
 }
 
 const StreamAttachmentMessage: React.FC<StreamAttachmentMessageProps> = ({
   groupPosition,
   isMyMessage,
   message,
+  renderText,
 }) => {
   const segments = buildOrderedAttachmentSegments(message.attachments)
   if (segments.length === 0) return null
 
-  const totalBubbles = countAttachmentSegmentBubbles(segments)
   const totalMediaBubbles = countMediaSegmentBubbles(segments)
   const rawCaption = message.text?.trim()
   const linkSegment = segments.find((segment) => segment.type === 'link')
@@ -353,25 +336,14 @@ const StreamAttachmentMessage: React.FC<StreamAttachmentMessageProps> = ({
       ? undefined
       : rawCaption
 
-  let bubbleIndex = 0
   let mediaBubbleIndex = 0
   const rows: React.ReactNode[] = []
 
   const pushLinkRow = (attachment: Attachment, key: string) => {
-    const isLastBubble = bubbleIndex === totalBubbles - 1
-    bubbleIndex += 1
-
     const Card = isMyMessage ? LinkAttachment.Sent : LinkAttachment.Received
 
     rows.push(
-      <React.Fragment key={key}>
-        <Card {...linkCardPropsFromStreamAttachment(attachment)} />
-        {isLastBubble && caption ? (
-          <div className={isMyMessage ? SENT_CAPTION_CLASS : RECEIVED_CAPTION_CLASS}>
-            {caption}
-          </div>
-        ) : null}
-      </React.Fragment>
+      <Card key={key} {...linkCardPropsFromStreamAttachment(attachment)} />
     )
   }
 
@@ -379,14 +351,12 @@ const StreamAttachmentMessage: React.FC<StreamAttachmentMessageProps> = ({
     segment: Extract<AttachmentSegment, { type: 'media' }>,
     key: string
   ) => {
-    const isLastBubble = bubbleIndex === totalBubbles - 1
     const position = bubblePositionInRun(
       mediaBubbleIndex,
       totalMediaBubbles,
       groupPosition
     )
 
-    bubbleIndex += 1
     mediaBubbleIndex += 1
 
     rows.push(
@@ -395,7 +365,6 @@ const StreamAttachmentMessage: React.FC<StreamAttachmentMessageProps> = ({
         groupPosition={position}
         isMyMessage={isMyMessage}
         segment={segment}
-        text={isLastBubble ? caption : undefined}
       />
     )
   }
@@ -411,7 +380,32 @@ const StreamAttachmentMessage: React.FC<StreamAttachmentMessageProps> = ({
     pushMediaCluster(segment, `media-${segmentIndex}`)
   })
 
-  return <>{rows}</>
+  return (
+    <div className="str-chat__message-bubble-wrapper">
+      <div
+        className="str-chat__message-bubble"
+        data-attachment-bubble="true"
+        style={{
+          background: 'transparent',
+          borderRadius: 0,
+          overflow: 'visible',
+          padding: 0,
+        }}
+      >
+        {rows}
+        {!caption && <MessageErrorIcon />}
+      </div>
+      {caption ? (
+        <div className="str-chat__message-bubble">
+          <MessageText
+            message={message}
+            renderText={renderText}
+          />
+          <MessageErrorIcon />
+        </div>
+      ) : null}
+    </div>
+  )
 }
 
 export default StreamAttachmentMessage