@linktr.ee/messaging-react 3.6.2-rc-1783304704 → 3.6.2

package/src/components/CustomMessage/StreamAttachmentMessage.tsx

@@ -0,0 +1,417 @@
+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'
+
+type StreamMediaKind = 'image' | 'video' | 'audio' | 'pdf' | 'file'
+
+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
+}
+
+export function normalizeLinkUrl(url: string): string {
+  return url
+    .trim()
+    .replace(/^https?:\/\//i, '')
+    .replace(/\/+$/, '')
+    .toLowerCase()
+}
+
+export function linkCaptionDuplicatesAttachmentUrl(
+  caption: string | undefined,
+  attachmentUrl?: string
+): boolean {
+  if (!caption?.trim() || !attachmentUrl?.trim()) {
+    return false
+  }
+
+  const normalizedCaption = normalizeLinkUrl(caption)
+  const normalizedUrl = normalizeLinkUrl(attachmentUrl)
+
+  if (normalizedCaption === normalizedUrl) {
+    return true
+  }
+
+  if (!normalizedCaption.includes(normalizedUrl)) {
+    return false
+  }
+
+  const remainder = normalizedCaption.split(normalizedUrl).join('')
+  return !/[^\p{P}\p{Z}\p{C}]/u.test(remainder)
+}
+
+export function linkCardPropsFromStreamAttachment(a: Attachment) {
+  const url = trimToUndefined(a.og_scrape_url) ?? trimToUndefined(a.title_link)
+  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),
+    description: trimToUndefined((a as { text?: string }).text),
+    url,
+    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,
+    layout:
+      thumbnailUrl || isPlayableMedia(mimeType, sourceUrl)
+        ? 'featured'
+        : 'classic',
+    mimeType,
+  } as const
+}
+
+export function getAttachmentMediaKind(
+  attachment: Attachment
+): StreamMediaKind | null {
+  if (isLinkAttachment(attachment)) return null
+
+  if (attachment.type === 'image') {
+    const imageUrl = (attachment as { image_url?: string }).image_url
+    if (imageUrl || attachment.asset_url) return 'image'
+    return null
+  }
+
+  if (attachment.type === 'video' && attachment.asset_url) return 'video'
+  if (attachment.type === 'audio' && attachment.asset_url) return 'audio'
+
+  if (attachment.type === 'file' && attachment.asset_url) {
+    if (attachment.mime_type === 'application/pdf') return 'pdf'
+    if (attachment.mime_type?.startsWith('audio/')) return 'audio'
+    return 'file'
+  }
+
+  return null
+}
+
+export function isLinkAttachment(a: Attachment): boolean {
+  const ogScrapeUrl = trimToUndefined(a.og_scrape_url)
+  return a.type === 'link' || (!!ogScrapeUrl && !a.asset_url)
+}
+
+export function buildOrderedAttachmentSegments(
+  attachments: Attachment[] | undefined
+): AttachmentSegment[] {
+  if (!attachments?.length) return []
+
+  const segments: AttachmentSegment[] = []
+
+  const pushOrMergeMedia = (kind: StreamMediaKind, attachment: Attachment) => {
+    const last = segments[segments.length - 1]
+    if (last?.type === 'media' && last.kind === kind) {
+      last.attachments.push(attachment)
+      return
+    }
+
+    segments.push({ type: 'media', kind, attachments: [attachment] })
+  }
+
+  const pushOrMergeLink = (attachment: Attachment) => {
+    const last = segments[segments.length - 1]
+    if (last?.type === 'link') {
+      last.attachments.push(attachment)
+      return
+    }
+
+    segments.push({ type: 'link', attachments: [attachment] })
+  }
+
+  for (const attachment of attachments) {
+    if (isLinkAttachment(attachment)) {
+      pushOrMergeLink(attachment)
+      continue
+    }
+
+    const kind = getAttachmentMediaKind(attachment)
+    if (!kind) continue
+
+    pushOrMergeMedia(kind, attachment)
+  }
+
+  return segments
+}
+
+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
+}
+
+export function bubblePositionInRun(
+  index: number,
+  total: number,
+  streamPosition: BubbleGroupPosition
+): BubbleGroupPosition {
+  if (total <= 1) return streamPosition
+  if (index === 0) return 'first'
+  if (index === total - 1) return 'end'
+  return 'middle'
+}
+
+function imageSrcFromAttachment(attachment: Attachment): string {
+  return (
+    trimToUndefined((attachment as { image_url?: string }).image_url) ??
+    trimToUndefined(attachment.asset_url) ??
+    ''
+  )
+}
+
+function messageAttachmentNamespaceForKind(kind: StreamMediaKind) {
+  switch (kind) {
+    case 'image':
+      return MessageAttachment.Image
+    case 'video':
+      return MessageAttachment.Video
+    case 'audio':
+      return MessageAttachment.Audio
+    case 'pdf':
+      return MessageAttachment.Pdf
+    default:
+      return MessageAttachment.File
+  }
+}
+
+function buildMediaClusterRenderProps(
+  kind: StreamMediaKind,
+  attachments: Attachment[]
+): Record<string, unknown> {
+  if (attachments.length > 1) {
+    switch (kind) {
+      case 'image':
+        return {
+          items: attachments.map((attachment) => ({
+            src: imageSrcFromAttachment(attachment),
+            alt: trimToUndefined((attachment as { title?: string }).title),
+          })),
+        }
+      case 'video':
+        return {
+          items: attachments.map((attachment) => ({
+            src: trimToUndefined(attachment.asset_url) ?? '',
+            poster: trimToUndefined(
+              (attachment as { thumb_url?: string }).thumb_url
+            ),
+            mimeType: trimToUndefined(attachment.mime_type),
+          })),
+        }
+      case 'audio':
+        return {
+          items: attachments.map((attachment) => ({
+            src: trimToUndefined(attachment.asset_url) ?? '',
+            mimeType:
+              trimToUndefined(attachment.mime_type) ?? 'audio/mpeg',
+            filename: trimToUndefined(
+              (attachment as { title?: string }).title
+            ),
+          })),
+        }
+      case 'pdf':
+        return {
+          items: attachments.map((attachment) => ({
+            src: trimToUndefined(attachment.asset_url) ?? '',
+            filename: trimToUndefined(
+              (attachment as { title?: string }).title
+            ),
+            fileSize: (attachment as { file_size?: number }).file_size,
+          })),
+        }
+      case 'file':
+        return {
+          items: attachments.map((attachment) => ({
+            src: trimToUndefined(attachment.asset_url) ?? '',
+            filename: trimToUndefined(
+              (attachment as { title?: string }).title
+            ),
+            fileSize: (attachment as { file_size?: number }).file_size,
+            mimeType:
+              trimToUndefined(attachment.mime_type) ??
+              'application/octet-stream',
+          })),
+        }
+    }
+  }
+
+  const attachment = attachments[0]
+  if (!attachment) return {}
+
+  switch (kind) {
+    case 'image':
+      return {
+        src: imageSrcFromAttachment(attachment),
+        alt: trimToUndefined((attachment as { title?: string }).title),
+      }
+    case 'video':
+      return {
+        src: trimToUndefined(attachment.asset_url) ?? '',
+        poster: trimToUndefined((attachment as { thumb_url?: string }).thumb_url),
+        mimeType: trimToUndefined(attachment.mime_type),
+      }
+    case 'audio':
+      return {
+        src: trimToUndefined(attachment.asset_url) ?? '',
+        mimeType: trimToUndefined(attachment.mime_type) ?? 'audio/mpeg',
+        filename: trimToUndefined((attachment as { title?: string }).title),
+      }
+    case 'pdf':
+      return {
+        src: trimToUndefined(attachment.asset_url) ?? '',
+        filename: trimToUndefined((attachment as { title?: string }).title),
+        fileSize: (attachment as { file_size?: number }).file_size,
+      }
+    case 'file':
+      return {
+        src: trimToUndefined(attachment.asset_url) ?? '',
+        filename: trimToUndefined((attachment as { title?: string }).title),
+        fileSize: (attachment as { file_size?: number }).file_size,
+        mimeType:
+          trimToUndefined(attachment.mime_type) ?? 'application/octet-stream',
+      }
+  }
+}
+
+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) {
+    return <TypeNamespace.Sent {...props} />
+  }
+
+  return <TypeNamespace.Received {...props} />
+}
+
+export interface StreamAttachmentMessageProps {
+  groupPosition: BubbleGroupPosition
+  isMyMessage: boolean
+  message: StreamThreadMessage
+}
+
+const StreamAttachmentMessage: React.FC<StreamAttachmentMessageProps> = ({
+  groupPosition,
+  isMyMessage,
+  message,
+}) => {
+  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')
+  const primaryLinkUrl =
+    linkSegment?.type === 'link'
+      ? linkCardPropsFromStreamAttachment(linkSegment.attachments[0] ?? {}).url
+      : undefined
+  const caption =
+    rawCaption &&
+    linkCaptionDuplicatesAttachmentUrl(rawCaption, primaryLinkUrl)
+      ? 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>
+    )
+  }
+
+  const pushMediaCluster = (
+    segment: Extract<AttachmentSegment, { type: 'media' }>,
+    key: string
+  ) => {
+    const isLastBubble = bubbleIndex === totalBubbles - 1
+    const position = bubblePositionInRun(
+      mediaBubbleIndex,
+      totalMediaBubbles,
+      groupPosition
+    )
+
+    bubbleIndex += 1
+    mediaBubbleIndex += 1
+
+    rows.push(
+      <MediaClusterBubble
+        key={key}
+        groupPosition={position}
+        isMyMessage={isMyMessage}
+        segment={segment}
+        text={isLastBubble ? caption : undefined}
+      />
+    )
+  }
+
+  segments.forEach((segment, segmentIndex) => {
+    if (segment.type === 'link') {
+      segment.attachments.forEach((attachment, attachmentIndex) => {
+        pushLinkRow(attachment, `link-${segmentIndex}-${attachmentIndex}`)
+      })
+      return
+    }
+
+    pushMediaCluster(segment, `media-${segmentIndex}`)
+  })
+
+  return <>{rows}</>
+}
+
+export default StreamAttachmentMessage

package/src/components/CustomMessage/index.tsx

@@ -34,6 +34,9 @@ import { getMessageDisplayText } from '../../utils/getMessageDisplayText'
 import { Avatar } from '../Avatar'
 import LockedAttachment from '../LockedAttachment'
 import { isLinkAttachment } from '../MediaMessage'
+import {
+  bubbleGroupPositionFromStream as messageAttachmentGroupPositionFromStream,
+} from '../MessageAttachment'
 
 import { useCustomMessage } from './context'
 import {
@@ -43,6 +46,9 @@ import {
   isTipOnlyMessage,
 } from './MessageTag'
 import { MessageVoteButtons } from './MessageVoteButtons'
+import StreamAttachmentMessage, {
+  buildOrderedAttachmentSegments,
+} from './StreamAttachmentMessage'
 
 type CustomMessageUIComponentProps = MessageUIComponentProps & {
   chatbotVotingEnabled?: boolean
@@ -113,12 +119,38 @@ const CustomMessageWithContext = (props: CustomMessageWithContextProps) => {
     const filtered = raw.filter((a) => !('type' in a) || !isLinkAttachment(a))
     return filtered.length === raw.length ? raw : filtered
   }, [message])
+  const attachmentSegments = useMemo(
+    () => buildOrderedAttachmentSegments(finalAttachments),
+    [finalAttachments]
+  )
   const displayMessage = useMemo(() => {
     const displayText = getMessageDisplayText({ message, viewerLanguage })
     return displayText === message.text
       ? message
       : { ...message, text: displayText }
   }, [message, viewerLanguage])
+  // Route every generic Stream-attachment message (link OG previews and
+  // image/video/audio/pdf/file media) through the toolkit renderer, so
+  // messaging-react owns all shared attachment rendering rather than leaving
+  // media on stream-chat-react's default Attachment. App-specific types
+  // (locked/paid, tips, chatbot) are handled by the branches above.
+  const hasAttachmentSegments = attachmentSegments.length > 0
+  // Only own the message when every attachment maps to a representable segment.
+  // Otherwise a mixed message (e.g. an unsupported shared_location alongside a
+  // photo) would silently drop the unrepresented attachment — those fall
+  // through to the default `Attachment` renderer, which handles all of them.
+  const allAttachmentsRepresented =
+    attachmentSegments.reduce(
+      (total, segment) => total + segment.attachments.length,
+      0
+    ) === (finalAttachments?.length ?? 0)
+  const streamAttachmentGroupPosition = messageAttachmentGroupPositionFromStream(
+    {
+      endOfGroup,
+      firstOfGroup,
+      groupedByUser,
+    }
+  )
 
   if (isDateSeparatorMessage(message)) {
     return null
@@ -179,6 +211,19 @@ const CustomMessageWithContext = (props: CustomMessageWithContextProps) => {
   )
   const useAttachmentFooterChatbotTag =
     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, 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 &&
+    !isChatbot
 
   return (
     <>
@@ -279,6 +324,28 @@ const CustomMessageWithContext = (props: CustomMessageWithContextProps) => {
           ) : isTipOnly ? (
             /* 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>
           ) : (
             <div className="str-chat__message-bubble-wrapper">
               <div className="str-chat__message-bubble">