@linktr.ee/messaging-react 3.4.2-rc-1782453771 → 3.4.2-rc-1782480798

package/src/components/ChannelView.tsx

@@ -32,7 +32,6 @@ import CustomTypingIndicator from './CustomTypingIndicator'
 import { DmAgentEnabledContext } from './CustomTypingIndicator/DmAgentContext'
 import { ChannelEmptyState } from './MessagingShell/ChannelEmptyState'
 import { LoadingState } from './MessagingShell/LoadingState'
-import { ParticipantBadges } from './ParticipantBadges'
 
 const ICON_BTN_CLASS =
   'size-10 rounded-full hover:bg-[#E5E4E1] flex items-center justify-center transition-colors duration-150 focus-ring'
@@ -137,6 +136,7 @@ const CustomChannelHeader: React.FC<{
             id={participant?.user?.id || channel.id || 'unknown'}
             name={participantName}
             image={participantImage}
+            starred={showStarButton && isStarred}
             dmAgentEnabled={dmAgentEnabled}
             size={48}
           />
@@ -148,10 +148,6 @@ const CustomChannelHeader: React.FC<{
               className="flex max-w-full items-center gap-0.5 rounded text-center text-xs font-medium text-black/90 transition-opacity hover:opacity-70"
             >
               <span className="min-w-0 truncate">{participantName}</span>
-              <ParticipantBadges
-                participant={participant}
-                isStarred={isStarred}
-              />
               {headerTitleBadges && (
                 <span className="shrink-0">{headerTitleBadges}</span>
               )}
@@ -160,10 +156,6 @@ const CustomChannelHeader: React.FC<{
           ) : (
             <p className="flex max-w-full items-center justify-center gap-1 text-center text-xs font-medium text-black/90">
               <span className="min-w-0 truncate">{participantName}</span>
-              <ParticipantBadges
-                participant={participant}
-                isStarred={isStarred}
-              />
               {headerTitleBadges && (
                 <span className="shrink-0">{headerTitleBadges}</span>
               )}
@@ -236,6 +228,7 @@ const CustomChannelHeader: React.FC<{
             id={participant?.user?.id || channel.id || 'unknown'}
             name={participantName}
             image={participantImage}
+            starred={showStarButton && isStarred}
             dmAgentEnabled={dmAgentEnabled}
             size={48}
           />
@@ -248,10 +241,6 @@ const CustomChannelHeader: React.FC<{
                 className="flex min-w-0 max-w-full items-center gap-1 rounded font-medium text-black/90 transition-opacity hover:opacity-70"
               >
                 <span className="min-w-0 truncate">{participantName}</span>
-                <ParticipantBadges
-                  participant={participant}
-                  isStarred={isStarred}
-                />
                 {headerTitleBadges && (
                   <span className="shrink-0">{headerTitleBadges}</span>
                 )}
@@ -260,10 +249,6 @@ const CustomChannelHeader: React.FC<{
             ) : (
               <h1 className="flex min-w-0 items-center gap-1 font-medium text-black/90">
                 <span className="min-w-0 truncate">{participantName}</span>
-                <ParticipantBadges
-                  participant={participant}
-                  isStarred={isStarred}
-                />
                 {headerTitleBadges && (
                   <span className="shrink-0">{headerTitleBadges}</span>
                 )}
@@ -355,6 +340,7 @@ const ChannelViewInner: React.FC<{
   viewerLanguage?: string
   showChannelInfo?: boolean
   onParticipantNameClick?: () => void
+  composerInput?: ChannelViewProps['composerInput']
 }> = ({
   onBack,
   showBackButton,
@@ -382,6 +368,7 @@ const ChannelViewInner: React.FC<{
   viewerLanguage,
   showChannelInfo = true,
   onParticipantNameClick,
+  composerInput,
 }) => {
   const { channel } = useChannelStateContext()
 
@@ -403,10 +390,10 @@ const ChannelViewInner: React.FC<{
   }, [channel._client?.userID, channel.state?.members])
 
   const currentUserIsAccount =
-    currentMember?.user?.is_account ??
+    (currentMember?.user as { is_account?: boolean } | undefined)?.is_account ??
     (currentMember as { is_account?: boolean } | undefined)?.is_account
   const participantIsAccount =
-    participant?.user?.is_account ??
+    (participant?.user as { is_account?: boolean } | undefined)?.is_account ??
     (participant as { is_account?: boolean } | undefined)?.is_account
 
   const showDmAgentHeader =
@@ -498,6 +485,7 @@ const ChannelViewInner: React.FC<{
             renderFooter={() => renderMessageInputFooter?.(channel)}
             disabled={composerDisabled}
             disabledReason={composerDisabledReason}
+            composerInput={composerInput}
           />
         </Window>
       </WithComponents>
@@ -544,6 +532,7 @@ export const ChannelView = React.memo<ChannelViewProps>(
     viewerLanguage,
     showChannelInfo = true,
     onParticipantNameClick,
+    composerInput,
   }) => {
     // Custom send message handler that:
     // 1. Applies messageMetadata if provided
@@ -658,6 +647,7 @@ export const ChannelView = React.memo<ChannelViewProps>(
               viewerLanguage={viewerLanguage}
               showChannelInfo={showChannelInfo}
               onParticipantNameClick={onParticipantNameClick}
+              composerInput={composerInput}
             />
           </Channel>
         </DmAgentEnabledContext.Provider>

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

@@ -0,0 +1,109 @@
+import React from 'react'
+import { describe, expect, it } from 'vitest'
+
+import { renderWithProviders, screen } from '../../test/utils'
+
+import StreamAttachmentMessage, {
+  linkCaptionDuplicatesAttachmentUrl,
+} from './StreamAttachmentMessage'
+
+describe('linkCaptionDuplicatesAttachmentUrl', () => {
+  it('suppresses captions that are just the link plus punctuation', () => {
+    expect(
+      linkCaptionDuplicatesAttachmentUrl(
+        'https://tr.ee/abc !',
+        'https://tr.ee/abc'
+      )
+    ).toBe(true)
+  })
+
+  it('keeps captions that add emoji after the link', () => {
+    expect(
+      linkCaptionDuplicatesAttachmentUrl(
+        'https://tr.ee/abc 😎',
+        'https://tr.ee/abc'
+      )
+    ).toBe(false)
+  })
+})
+
+describe('StreamAttachmentMessage', () => {
+  it('renders a sent link card and suppresses a URL-only caption', () => {
+    renderWithProviders(
+      <StreamAttachmentMessage
+        groupPosition="single"
+        isMyMessage={true}
+        message={{
+          attachments: [
+            {
+              type: 'link',
+              og_scrape_url: 'https://linktr.ee/someone',
+              title: 'My Linktree',
+              text: 'Check out my links',
+              image_url: 'https://cdn.example.com/thumb.jpg',
+            },
+          ],
+          text: 'https://linktr.ee/someone !',
+        }}
+      />
+    )
+
+    expect(
+      screen.getByRole('link', { name: /my linktree/i })
+    ).toHaveAttribute('href', 'https://linktr.ee/someone')
+    expect(screen.queryByText('https://linktr.ee/someone !')).toBeNull()
+  })
+
+  it('keeps an emoji-only caption instead of dropping it', () => {
+    renderWithProviders(
+      <StreamAttachmentMessage
+        groupPosition="single"
+        isMyMessage={false}
+        message={{
+          attachments: [
+            {
+              type: 'link',
+              og_scrape_url: 'https://linktr.ee/someone',
+              title: 'My Linktree',
+            },
+          ],
+          text: 'https://linktr.ee/someone 😎',
+        }}
+      />
+    )
+
+    expect(screen.getByText('https://linktr.ee/someone 😎')).toBeInTheDocument()
+  })
+
+  it('renders mixed link and media attachments in order', () => {
+    const { container } = renderWithProviders(
+      <StreamAttachmentMessage
+        groupPosition="single"
+        isMyMessage={true}
+        message={{
+          attachments: [
+            {
+              type: 'link',
+              og_scrape_url: 'https://linktr.ee/someone',
+              title: 'My Linktree',
+            },
+            {
+              type: 'image',
+              image_url: 'https://cdn.example.com/photo.jpg',
+              title: 'Vacation',
+            },
+          ],
+          text: 'caption',
+        }}
+      />
+    )
+
+    const link = screen.getByRole('link', { name: /my linktree/i })
+    const imageBubble = screen.getByTestId('image-attachment')
+
+    expect(link.compareDocumentPosition(imageBubble)).toBe(
+      Node.DOCUMENT_POSITION_FOLLOWING
+    )
+    expect(container).toHaveTextContent('caption')
+  })
+})

package/src/components/CustomMessage/StreamAttachmentMessage.tsx

@@ -0,0 +1,408 @@
+import React from 'react'
+import type { Attachment } from 'stream-chat'
+
+import LinkAttachment from '../LinkAttachment'
+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)
+
+  return {
+    title: trimToUndefined((a as { title?: string }).title),
+    description: trimToUndefined((a as { text?: string }).text),
+    url,
+    thumbnailUrl,
+    layout: thumbnailUrl ? 'featured' : 'classic',
+    mimeType: trimToUndefined(a.mime_type),
+  } 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,26 @@ 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])
+  const hasLinkAttachmentSegments = attachmentSegments.some(
+    (segment) => segment.type === 'link'
+  )
+  const streamAttachmentGroupPosition = messageAttachmentGroupPositionFromStream(
+    {
+      endOfGroup,
+      firstOfGroup,
+      groupedByUser,
+    }
+  )
 
   if (isDateSeparatorMessage(message)) {
     return null
@@ -278,6 +298,28 @@ const CustomMessageWithContext = (props: CustomMessageWithContextProps) => {
           ) : isTipOnly ? (
             /* Tip-only messages render as a standalone bubble */
             <MessageTag message={message} standalone />
+          ) : hasLinkAttachmentSegments ? (
+            <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">