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

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

@@ -1,109 +0,0 @@
-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

@@ -1,408 +0,0 @@
-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