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

package/src/components/CustomMessage/StreamAttachmentMessage.tsx

@@ -1,10 +1,5 @@
 import React from 'react'
-import type { Attachment, LocalMessage } from 'stream-chat'
-import {
-  MessageErrorIcon,
-  MessageText,
-  type MessageContextValue,
-} from 'stream-chat-react'
+import type { Attachment } from 'stream-chat'
 
 import LinkAttachment from '../LinkAttachment'
 import { isPlayableMedia } from '../LinkAttachment/components/_shared/CardThumbnail'
@@ -17,6 +12,16 @@ 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
@@ -147,9 +152,19 @@ export function buildOrderedAttachmentSegments(
   return segments
 }
 
-export function countMediaSegmentBubbles(
+export function countAttachmentSegmentBubbles(
   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
 }
 
@@ -289,15 +304,18 @@ 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) {
@@ -310,19 +328,18 @@ function MediaClusterBubble({
 export interface StreamAttachmentMessageProps {
   groupPosition: BubbleGroupPosition
   isMyMessage: boolean
-  message: LocalMessage
-  renderText?: MessageContextValue['renderText']
+  message: StreamThreadMessage
 }
 
 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')
@@ -336,14 +353,25 @@ 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(
-      <Card key={key} {...linkCardPropsFromStreamAttachment(attachment)} />
+      <React.Fragment key={key}>
+        <Card {...linkCardPropsFromStreamAttachment(attachment)} />
+        {isLastBubble && caption ? (
+          <div className={isMyMessage ? SENT_CAPTION_CLASS : RECEIVED_CAPTION_CLASS}>
+            {caption}
+          </div>
+        ) : null}
+      </React.Fragment>
     )
   }
 
@@ -351,12 +379,14 @@ 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(
@@ -365,6 +395,7 @@ const StreamAttachmentMessage: React.FC<StreamAttachmentMessageProps> = ({
         groupPosition={position}
         isMyMessage={isMyMessage}
         segment={segment}
+        text={isLastBubble ? caption : undefined}
       />
     )
   }
@@ -380,32 +411,7 @@ const StreamAttachmentMessage: React.FC<StreamAttachmentMessageProps> = ({
     pushMediaCluster(segment, `media-${segmentIndex}`)
   })
 
-  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>
-  )
+  return <>{rows}</>
 }
 
 export default StreamAttachmentMessage

package/src/components/CustomMessage/index.tsx

@@ -326,19 +326,27 @@ const CustomMessageWithContext = (props: CustomMessageWithContextProps) => {
             /* Tip-only messages render as a standalone bubble */
             <MessageTag message={message} standalone />
           ) : canRenderAttachmentsInToolkit ? (
-            <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"
+                style={{
+                  background: 'transparent',
+                  borderRadius: 0,
+                  overflow: 'visible',
+                  padding: 0,
+                }}
+              >
+                <StreamAttachmentMessage
+                  groupPosition={streamAttachmentGroupPosition}
+                  isMyMessage={isMine}
+                  message={{
+                    attachments: finalAttachments,
+                    text: displayMessage.text,
+                  }}
+                />
+                <MessageErrorIcon />
+              </div>
+            </div>
           ) : (
             <div className="str-chat__message-bubble-wrapper">
               <div className="str-chat__message-bubble">