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

package/dist/index.cjs

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@linktr.ee/messaging-react",
-  "version": "3.9.2-rc-1783581484",
+  "version": "3.9.2",
   "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-1783581484",
+    "@linktr.ee/messaging-core": "^2.2.0",
     "@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/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

package/src/components/CustomMessage/index.tsx

@@ -326,27 +326,19 @@ const CustomMessageWithContext = (props: CustomMessageWithContextProps) => {
             /* Tip-only messages render as a standalone bubble */
             <MessageTag message={message} standalone />
           ) : canRenderAttachmentsInToolkit ? (
-            <div className="str-chat__message-bubble-wrapper">
-              <div
-                className="str-chat__message-bubble"
-                style={{
-                  background: 'transparent',
-                  borderRadius: 0,
-                  overflow: 'visible',
-                  padding: 0,
-                }}
-              >
-                <StreamAttachmentMessage
-                  groupPosition={streamAttachmentGroupPosition}
-                  isMyMessage={isMine}
-                  message={{
-                    attachments: finalAttachments,
-                    text: displayMessage.text,
-                  }}
-                />
-                <MessageErrorIcon />
-              </div>
-            </div>
+            <StreamAttachmentMessage
+              groupPosition={streamAttachmentGroupPosition}
+              isMyMessage={isMine}
+              message={{
+                ...displayMessage,
+                attachments: finalAttachments,
+                // MessageText prefers message.i18n[userLanguage_text] from
+                // Stream's TranslationContext over message.text. Drop i18n so
+                // the caption uses displayMessage.text from viewerLanguage.
+                i18n: undefined,
+              }}
+              renderText={renderText}
+            />
           ) : (
             <div className="str-chat__message-bubble-wrapper">
               <div className="str-chat__message-bubble">