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

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-D0lSJc9F.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-DYp35Tv3.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-1783581484",
   "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-1783581484",
     "@phosphor-icons/react": "^2.1.10"
   },
   "devDependencies": {

package/src/components/ChannelHeaderRedesign.tsx

@@ -42,7 +42,6 @@ const hasCustomerPaidTag = (participant?: ChannelMemberResponse) => {
 }
 
 interface ChannelHeaderRedesignProps {
-  className?: string
   onBack?: () => void
   showBackButton: boolean
   showStarButton?: boolean
@@ -62,7 +61,6 @@ interface ChannelHeaderRedesignProps {
 }
 
 export const ChannelHeaderRedesign: React.FC<ChannelHeaderRedesignProps> = ({
-  className,
   onBack,
   showBackButton,
   showStarButton = false,
@@ -114,12 +112,7 @@ export const ChannelHeaderRedesign: React.FC<ChannelHeaderRedesignProps> = ({
   }
 
   return (
-    <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="@container w-full bg-[linear-gradient(180deg,#FBFAF9_0%,rgba(251,250,249,0.92)_58%,rgba(251,250,249,0)_100%)]">
       <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,7 +475,6 @@ 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}
@@ -553,22 +552,20 @@ 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,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

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, LocalMessage } from 'stream-chat'
+import type { Attachment } from 'stream-chat'
 
 import {
   currentUserArgType,
@@ -23,29 +23,22 @@ import StreamAttachmentMessage from './StreamAttachmentMessage'
  * Stream-attachment → `LinkAttachment` prop mapping, caption
  * de-duplication (including emoji preservation), and media clustering.
  *
- * 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.
+ * 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.
  * ────────────────────────────────────────────────────────────────── */
 
 const Bubbles: React.FC<{ isMyMessage: boolean; children: React.ReactNode }> = ({
   isMyMessage,
   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 className="mx-auto max-w-2xl p-12">
+    <div
+      className={classNames(
+        'flex flex-col gap-[2px]',
+        isMyMessage ? 'items-end' : 'items-start'
+      )}
+    >
+      {children}
     </div>
   </div>
 )
@@ -58,7 +51,7 @@ const Render = (attachments: Attachment[], text?: string): StoryFn<StoryArgs> =>
         <StreamAttachmentMessage
           groupPosition="single"
           isMyMessage={isMyMessage}
-          message={{ attachments, text } as LocalMessage}
+          message={{ attachments, text }}
         />
       </Bubbles>
     )

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

@@ -1,5 +1,4 @@
 import React from 'react'
-import type { Attachment, LocalMessage } from 'stream-chat'
 import { describe, expect, it } from 'vitest'
 
 import { renderWithProviders, screen } from '../../test/utils'
@@ -9,11 +8,6 @@ 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(
@@ -72,8 +66,8 @@ describe('StreamAttachmentMessage', () => {
       <StreamAttachmentMessage
         groupPosition="single"
         isMyMessage={true}
-        message={message(
-          [
+        message={{
+          attachments: [
             {
               type: 'link',
               og_scrape_url: 'https://linktr.ee/someone',
@@ -82,8 +76,8 @@ describe('StreamAttachmentMessage', () => {
               image_url: 'https://cdn.example.com/thumb.jpg',
             },
           ],
-          'https://linktr.ee/someone !'
-        )}
+          text: 'https://linktr.ee/someone !',
+        }}
       />
     )
 
@@ -94,30 +88,24 @@ describe('StreamAttachmentMessage', () => {
   })
 
   it('keeps an emoji-only caption instead of dropping it', () => {
-    const { container } = renderWithProviders(
+    renderWithProviders(
       <StreamAttachmentMessage
         groupPosition="single"
         isMyMessage={false}
-        message={message(
-          [
+        message={{
+          attachments: [
             {
               type: 'link',
               og_scrape_url: 'https://linktr.ee/someone',
               title: 'My Linktree',
             },
           ],
-          'https://linktr.ee/someone 😎'
-        )}
+          text: 'https://linktr.ee/someone 😎',
+        }}
       />
     )
 
-    // 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('😎')
+    expect(screen.getByText('https://linktr.ee/someone 😎')).toBeInTheDocument()
   })
 
   it('renders mixed link and media attachments in order', () => {
@@ -125,8 +113,8 @@ describe('StreamAttachmentMessage', () => {
       <StreamAttachmentMessage
         groupPosition="single"
         isMyMessage={true}
-        message={message(
-          [
+        message={{
+          attachments: [
             {
               type: 'link',
               og_scrape_url: 'https://linktr.ee/someone',
@@ -138,8 +126,8 @@ describe('StreamAttachmentMessage', () => {
               title: 'Vacation',
             },
           ],
-          'caption'
-        )}
+          text: 'caption',
+        }}
       />
     )
 
@@ -152,28 +140,27 @@ 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', () => {
-    const { container } = renderWithProviders(
+    renderWithProviders(
       <StreamAttachmentMessage
         groupPosition="single"
         isMyMessage={true}
-        message={message(
-          [
+        message={{
+          attachments: [
             {
               type: 'link',
               og_scrape_url: 'https://linktr.ee/someone',
               title: 'My Linktree',
             },
           ],
-          'you have to see this'
-        )}
+          text: 'you have to see this',
+        }}
       />
     )
 
-    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')
+    expect(screen.getByText('you have to see this')).toBeInTheDocument()
   })
 
   it('renders the accompanying message text next to a media attachment', () => {
@@ -181,24 +168,19 @@ describe('StreamAttachmentMessage', () => {
       <StreamAttachmentMessage
         groupPosition="single"
         isMyMessage={false}
-        message={message(
-          [
+        message={{
+          attachments: [
             {
               type: 'image',
               image_url: 'https://cdn.example.com/photo.jpg',
               title: 'Vacation',
             },
           ],
-          'from the trip'
-        )}
+          text: 'from the trip',
+        }}
       />
     )
 
     expect(container).toHaveTextContent('from the trip')
-    expect(
-      container.querySelector(
-        '.str-chat__message-bubble:not([data-attachment-bubble])'
-      )
-    ).toHaveTextContent('from the trip')
   })
 })