@linktr.ee/messaging-react 4.4.6 → 4.4.7-rc-1788243598

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@linktr.ee/messaging-react",
-  "version": "4.4.6",
+  "version": "4.4.7-rc-1788243598",
   "description": "React messaging components built on messaging-core for web applications",
   "type": "module",
   "main": "dist/index.cjs",
@@ -50,8 +50,8 @@
     "chromatic:local": "yarn storybook:build && chromatic"
   },
   "dependencies": {
-    "@linktr.ee/messaging-core": "^2.6.0",
-    "@linktr.ee/messaging-taxonomy": "^0.11.0",
+    "@linktr.ee/messaging-core": "2.6.0-rc-1788243598",
+    "@linktr.ee/messaging-taxonomy": "0.11.0-rc-1788243598",
     "@phosphor-icons/react": "^2.1.10"
   },
   "devDependencies": {

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

@@ -24,7 +24,9 @@ vi.mock('stream-chat-react', () => ({
   }: {
     MessageSentStatus: React.ComponentType
   }) => <MessageSentStatus />,
-  MessageText: () => <span>Message</span>,
+  MessageText: ({ message }: { message?: { text?: string } }) => (
+    <span>{message?.text ?? 'Message'}</span>
+  ),
   Poll: () => null,
   ReminderNotification: () => null,
   StreamedMessageText: () => null,
@@ -54,13 +56,24 @@ vi.mock('../Avatar', () => ({
   Avatar: () => null,
 }))
 
+vi.mock('../LinkAttachment', () => ({
+  default: {
+    Sent: ({ title }: { title?: string }) => <span>{title}</span>,
+    Received: ({ title }: { title?: string }) => <span>{title}</span>,
+  },
+}))
+
 vi.mock('./MessageTag', () => ({
   MessageTag: () => null,
   isAttachmentMessage: () => false,
   isChatbotMessage: () => false,
-  isMediaAttachmentMessage: () => false,
+  isMediaAttachmentMessage: (message: {
+    metadata?: { attachment_content_type?: string }
+  }) => message.metadata?.attachment_content_type === 'media',
   isPaidMessage: () => false,
-  isTextAttachmentMessage: () => false,
+  isTextAttachmentMessage: (message: {
+    metadata?: { attachment_content_type?: string }
+  }) => message.metadata?.attachment_content_type === 'text',
   hasPaidDeliveryTag: () => false,
 }))
 
@@ -70,16 +83,32 @@ vi.mock('./TipMessage', () => ({
 }))
 
 vi.mock('./LockedAttachment', () => ({
-  default: () => null,
+  default: () => <span>Locked attachment</span>,
 }))
 
 vi.mock('./StreamAttachmentMessage', () => ({
   default: () => null,
   buildOrderedAttachmentSegments: () => [],
+  linkCardPropsFromStreamAttachment: (attachment: {
+    title?: string
+    og_scrape_url?: string
+  }) => ({
+    title: attachment.title,
+    url: attachment.og_scrape_url,
+  }),
+  linkCaptionDuplicatesAttachmentUrl: (
+    caption?: string,
+    attachmentUrl?: string
+  ) =>
+    !!caption &&
+    !!attachmentUrl &&
+    caption.trim().replace(/\/+$/, '').toLowerCase() ===
+      attachmentUrl.trim().replace(/\/+$/, '').toLowerCase(),
 }))
 
 vi.mock('../MediaMessage', () => ({
-  isLinkAttachment: () => false,
+  isLinkAttachment: (attachment: { type?: string; og_scrape_url?: string }) =>
+    attachment.type === 'link' || !!attachment.og_scrape_url?.trim(),
 }))
 
 const mockedUseChannelStateContext = vi.mocked(useChannelStateContext)
@@ -259,6 +288,226 @@ describe('CustomMessage', () => {
       </OutboundContext.Provider>
     )
 
-    expect(screen.getByText('Message')).toBeInTheDocument()
+    expect(screen.getByText('Hello')).toBeInTheDocument()
+  })
+
+  it('renders a link attachment alongside a locked media attachment', () => {
+    mockedUseMessageContext.mockReturnValue({
+      message: {
+        id: 'locked-media-message',
+        text: '',
+        type: 'regular',
+        status: 'received',
+        user: { id: 'me', name: 'Me' },
+        metadata: {
+          custom_type: 'MESSAGE_ATTACHMENT',
+          attachment_content_type: 'media',
+        },
+        attachments: [
+          {
+            type: 'link',
+            og_scrape_url: 'https://reactjs.org/',
+            title: 'ReactJS Philippines',
+          },
+        ],
+      },
+      isMyMessage: () => true,
+      threadList: false,
+      editing: false,
+      endOfGroup: true,
+      firstOfGroup: true,
+      groupedByUser: true,
+      handleAction: vi.fn(),
+      handleOpenThread: vi.fn(),
+      handleRetry: vi.fn(),
+      highlighted: false,
+      renderText: undefined,
+      isMessageAIGenerated: undefined,
+    } as never)
+
+    renderWithProviders(
+      <OutboundContext.Provider value={{}}>
+        <CustomMessage />
+      </OutboundContext.Provider>
+    )
+
+    expect(screen.getByText(/reactjs philippines/i)).toBeInTheDocument()
+    expect(screen.getByText('Locked attachment')).toBeInTheDocument()
+  })
+
+  it('renders a link attachment alongside a locked text attachment', () => {
+    mockedUseMessageContext.mockReturnValue({
+      message: {
+        id: 'locked-text-message',
+        text: '',
+        type: 'regular',
+        status: 'received',
+        user: { id: 'me', name: 'Me' },
+        metadata: {
+          custom_type: 'MESSAGE_ATTACHMENT',
+          attachment_content_type: 'text',
+        },
+        attachments: [
+          {
+            type: 'link',
+            og_scrape_url: 'https://reactjs.org/',
+            title: 'ReactJS Philippines',
+          },
+        ],
+      },
+      isMyMessage: () => true,
+      threadList: false,
+      editing: false,
+      endOfGroup: true,
+      firstOfGroup: true,
+      groupedByUser: true,
+      handleAction: vi.fn(),
+      handleOpenThread: vi.fn(),
+      handleRetry: vi.fn(),
+      highlighted: false,
+      renderText: undefined,
+      isMessageAIGenerated: undefined,
+    } as never)
+
+    renderWithProviders(
+      <OutboundContext.Provider value={{}}>
+        <CustomMessage />
+      </OutboundContext.Provider>
+    )
+
+    expect(screen.getByText(/reactjs philippines/i)).toBeInTheDocument()
+    expect(screen.getByText('Locked attachment')).toBeInTheDocument()
+  })
+
+  it('does not render a link card when a locked message has no link attachments', () => {
+    mockedUseMessageContext.mockReturnValue({
+      message: {
+        id: 'locked-media-without-link',
+        text: '',
+        type: 'regular',
+        status: 'received',
+        user: { id: 'me', name: 'Me' },
+        metadata: {
+          custom_type: 'MESSAGE_ATTACHMENT',
+          attachment_content_type: 'media',
+        },
+        attachments: [
+          {
+            type: 'image',
+            image_url: 'https://cdn.example/image.jpg',
+          },
+        ],
+      },
+      isMyMessage: () => true,
+      threadList: false,
+      editing: false,
+      endOfGroup: true,
+      firstOfGroup: true,
+      groupedByUser: true,
+      handleAction: vi.fn(),
+      handleOpenThread: vi.fn(),
+      handleRetry: vi.fn(),
+      highlighted: false,
+      renderText: undefined,
+      isMessageAIGenerated: undefined,
+    } as never)
+
+    renderWithProviders(
+      <OutboundContext.Provider value={{}}>
+        <CustomMessage />
+      </OutboundContext.Provider>
+    )
+
+    expect(screen.queryByText(/reactjs philippines/i)).not.toBeInTheDocument()
+  })
+
+  it('does not render a duplicate URL caption for a locked media attachment', () => {
+    const linkUrl = 'https://reactjs.org/'
+    mockedUseMessageContext.mockReturnValue({
+      message: {
+        id: 'locked-media-url-caption',
+        text: linkUrl,
+        type: 'regular',
+        status: 'received',
+        user: { id: 'me', name: 'Me' },
+        metadata: {
+          custom_type: 'MESSAGE_ATTACHMENT',
+          attachment_content_type: 'media',
+        },
+        attachments: [
+          {
+            type: 'link',
+            og_scrape_url: linkUrl,
+            title: 'ReactJS Philippines',
+          },
+        ],
+      },
+      isMyMessage: () => true,
+      threadList: false,
+      editing: false,
+      endOfGroup: true,
+      firstOfGroup: true,
+      groupedByUser: true,
+      handleAction: vi.fn(),
+      handleOpenThread: vi.fn(),
+      handleRetry: vi.fn(),
+      highlighted: false,
+      renderText: undefined,
+      isMessageAIGenerated: undefined,
+    } as never)
+
+    renderWithProviders(
+      <OutboundContext.Provider value={{}}>
+        <CustomMessage />
+      </OutboundContext.Provider>
+    )
+
+    expect(screen.getByText(/reactjs philippines/i)).toBeInTheDocument()
+    expect(screen.queryByText(linkUrl)).not.toBeInTheDocument()
+  })
+
+  it('renders a genuine caption alongside a locked media attachment', () => {
+    const linkUrl = 'https://reactjs.org/'
+    mockedUseMessageContext.mockReturnValue({
+      message: {
+        id: 'locked-media-genuine-caption',
+        text: 'Check this out',
+        type: 'regular',
+        status: 'received',
+        user: { id: 'me', name: 'Me' },
+        metadata: {
+          custom_type: 'MESSAGE_ATTACHMENT',
+          attachment_content_type: 'media',
+        },
+        attachments: [
+          {
+            type: 'link',
+            og_scrape_url: linkUrl,
+            title: 'ReactJS Philippines',
+          },
+        ],
+      },
+      isMyMessage: () => true,
+      threadList: false,
+      editing: false,
+      endOfGroup: true,
+      firstOfGroup: true,
+      groupedByUser: true,
+      handleAction: vi.fn(),
+      handleOpenThread: vi.fn(),
+      handleRetry: vi.fn(),
+      highlighted: false,
+      renderText: undefined,
+      isMessageAIGenerated: undefined,
+    } as never)
+
+    renderWithProviders(
+      <OutboundContext.Provider value={{}}>
+        <CustomMessage />
+      </OutboundContext.Provider>
+    )
+
+    expect(screen.getByText(/reactjs philippines/i)).toBeInTheDocument()
+    expect(screen.getByText(/check this out/i)).toBeInTheDocument()
   })
 })

package/src/components/CustomMessage/index.tsx

@@ -32,6 +32,7 @@ import {
 import type { OutboundClickHandler, ResolvedOutbound } from '../../types'
 import { getMessageDisplayText } from '../../utils/getMessageDisplayText'
 import { Avatar } from '../Avatar'
+import LinkAttachment from '../LinkAttachment'
 import { isLinkAttachment } from '../MediaMessage'
 import type { BubbleGroupPosition } from '../MessageAttachment/types'
 
@@ -49,6 +50,8 @@ import { OutboundContext } from './OutboundContext'
 import { SentMessageDeliveryStatus } from './SentMessageDeliveryStatus'
 import StreamAttachmentMessage, {
   buildOrderedAttachmentSegments,
+  linkCardPropsFromStreamAttachment,
+  linkCaptionDuplicatesAttachmentUrl,
 } from './StreamAttachmentMessage'
 import { TipMessage, isTipMessage } from './TipMessage'
 
@@ -123,6 +126,20 @@ const CustomMessageWithContext = (props: CustomMessageWithContextProps) => {
     const filtered = raw.filter((a) => !('type' in a) || !isLinkAttachment(a))
     return filtered.length === raw.length ? raw : filtered
   }, [message])
+  const lockedLinkAttachments = useMemo(
+    () => (message.attachments ?? []).filter(isLinkAttachment),
+    [message]
+  )
+  const lockedCaption = useMemo(() => {
+    const raw = message.text?.trim()
+    if (!raw) return undefined
+    const primaryLinkUrl = lockedLinkAttachments[0]
+      ? linkCardPropsFromStreamAttachment(lockedLinkAttachments[0]).url
+      : undefined
+    return linkCaptionDuplicatesAttachmentUrl(raw, primaryLinkUrl)
+      ? undefined
+      : raw
+  }, [message, lockedLinkAttachments])
   const attachmentSegments = useMemo(
     () => buildOrderedAttachmentSegments(finalAttachments),
     [finalAttachments]
@@ -270,6 +287,27 @@ const CustomMessageWithContext = (props: CustomMessageWithContextProps) => {
       {showTail && <MessageTail side={isMine ? 'me' : 'other'} />}
     </div>
   )
+  const lockedLinkCards = lockedLinkAttachments.length > 0 && (
+    <div
+      className={classNames(
+        'flex flex-col gap-[4px]',
+        isMine ? 'items-end' : 'items-start'
+      )}
+    >
+      {lockedLinkAttachments.map((attachment, index) => {
+        const Card = isMine ? LinkAttachment.Sent : LinkAttachment.Received
+        const isFinalRow =
+          index === lockedLinkAttachments.length - 1 && !lockedCaption
+        return (
+          <Card
+            key={`locked-link-${index}`}
+            {...linkCardPropsFromStreamAttachment(attachment)}
+            groupPosition={isFinalRow ? bubbleGroupPosition : 'middle'}
+          />
+        )
+      })}
+    </div>
+  )
   return (
     <>
       {editing && (
@@ -340,6 +378,7 @@ const CustomMessageWithContext = (props: CustomMessageWithContextProps) => {
                 )}
                 {!isMine && MessageActions && <MessageActions />}
               </div>
+              {lockedLinkCards}
             </div>
           ) : isMediaAttachmentMessage(message) ? (
             <div className="str-chat__message-bubble-wrapper message-locked-attachment-wrapper">
@@ -374,7 +413,8 @@ const CustomMessageWithContext = (props: CustomMessageWithContextProps) => {
                 )}
                 {!isMine && MessageActions && <MessageActions />}
               </div>
-              {message.text && accompanyingTextBubble}
+              {lockedLinkCards}
+              {lockedCaption && accompanyingTextBubble}
             </div>
           ) : canRenderAttachmentsInToolkit ? (
             <StreamAttachmentMessage

package/src/components/MessageAttachment/MessageAttachment.behavior.test.tsx

@@ -105,7 +105,7 @@ describe('MessageAttachment behavior', () => {
     )
   })
 
-  it('renders video poster and fallback, and wires viewer attributes', () => {
+  it('renders video posters and posterless first-frame previews', () => {
     const onDismiss = vi.fn()
     const { rerender } = renderWithProviders(
       <MessageAttachment.Video.Composer
@@ -121,12 +121,55 @@ describe('MessageAttachment behavior', () => {
     ).toHaveAttribute('src', '/poster.jpg')
     fireEvent.click(screen.getByRole('button', { name: 'Dismiss attachment' }))
     expect(onDismiss).toHaveBeenCalledOnce()
+    rerender(
+      <MessageAttachment.Video.Sent src="https://cdn.example.com/video.mp4" />
+    )
+    expect(screen.getByLabelText('Video 1 thumbnail')).toHaveAttribute(
+      'src',
+      'https://cdn.example.com/video.mp4#t=0.001'
+    )
+    expect(screen.getByLabelText('Play video 1 of 1')).toBeInTheDocument()
+
+    rerender(
+      <MessageAttachment.Video.Sent src="https://cdn.example.com/video.mp4#track=fr" />
+    )
+    expect(screen.getByLabelText('Video 1 thumbnail')).toHaveAttribute(
+      'src',
+      'https://cdn.example.com/video.mp4#track=fr&t=0.001'
+    )
+
+    rerender(
+      <MessageAttachment.Video.Sent src="https://cdn.example.com/video.mp4#t=5" />
+    )
+    expect(screen.getByLabelText('Video 1 thumbnail')).toHaveAttribute(
+      'src',
+      'https://cdn.example.com/video.mp4#t=5'
+    )
+
+    rerender(
+      <MessageAttachment.Video.Received src="https://cdn.example.com/received-video.mp4" />
+    )
+    expect(screen.getByLabelText('Video 1 thumbnail')).toHaveAttribute(
+      'src',
+      'https://cdn.example.com/received-video.mp4#t=0.001'
+    )
+
     rerender(
       <MessageAttachment.Video.Sent
-        items={[{ src: 'https://cdn.example.com/video.mp4' }]}
+        src="https://cdn.example.com/video.mp4"
+        preload="none"
       />
     )
+    expect(screen.queryByLabelText('Video 1 thumbnail')).not.toBeInTheDocument()
     expect(screen.getByLabelText('Play video 1 of 1')).toBeInTheDocument()
+
+    rerender(
+      <MessageAttachment.Video.Composer
+        src="https://cdn.example.com/video.mp4"
+        preload="none"
+      />
+    )
+    expect(screen.queryByLabelText('Video 1 thumbnail')).not.toBeInTheDocument()
   })
 
   it('supports PDF titles, download actions, dismiss, and viewer index', () => {

package/src/components/MessageAttachment/Video/index.tsx

@@ -42,10 +42,10 @@ export interface VideoAttachmentSharedProps extends MessageAttachmentBaseProps {
   items?: VideoItem[]
   /**
    * `<video preload>` hint forwarded into the viewer. Defaults to
-   * `'none'` — the poster `<img>` carries the visual weight on the
-   * bubble surface, and we shouldn't fetch any video bytes until the
-   * user actually opens the viewer. Per-item overrides live on
-   * `VideoItem.preload`. The opened `VideoViewer` always preloads
+   * `'none'` — poster images carry the visual weight on the bubble surface,
+   * while posterless tiles fetch metadata to paint a first frame unless
+   * `'none'` is explicitly set, in which case they use the placeholder icon.
+   * Per-item overrides live on `VideoItem.preload`. The opened `VideoViewer` always preloads
    * metadata for the active item (so duration / first-frame appear
    * immediately) regardless of this value.
    */
@@ -70,9 +70,8 @@ export interface VideoAttachmentSharedProps extends MessageAttachmentBaseProps {
  * recorded it, and only otherwise measured off the decoded poster. Measuring
  * the poster alone was not enough: an uploaded clip may have no poster, and a
  * portrait video then sat in whatever `FALLBACK_ASPECT` guessed. Reading the
- * dimensions Stream already stores costs nothing at render time and needs no
- * `loadedmetadata` probe, which would fetch video bytes for every card in the
- * thread against the deliberate `preload: 'none'`.
+ * dimensions Stream already stores costs nothing at render time; posterless
+ * tiles fetch metadata to paint a first frame, without using it for sizing.
  *
  * `FALLBACK_ASPECT` is **square** on purpose. It covers only the case where we
  * know nothing — no recorded dimensions, no decoded poster — and a square box
@@ -101,6 +100,14 @@ const PlayBadge: React.FC = () => (
   </div>
 )
 
+// Safari needs a time fragment to paint a first frame from a remote MP4.
+const withFirstFrameHint = (src: string): string => {
+  const hashIndex = src.indexOf('#')
+  if (hashIndex === -1) return `${src}#t=0.001`
+  const fragment = src.slice(hashIndex + 1)
+  return /(^|&)t=/.test(fragment) ? src : `${src}&t=0.001`
+}
+
 // The tile shell owns the cluster's geometry: `MediaStackGrid` gives
 // each tile the 18px radius on the cluster's OUTER corners only and
 // clips with `overflow-hidden`, so a poster must carry no radius of
@@ -137,6 +144,15 @@ const PosterTile: React.FC<{
           onLoad={onLoad}
           className="absolute inset-0 size-full object-cover"
         />
+      ) : item.src && item.preload !== 'none' ? (
+        <video
+          src={withFirstFrameHint(item.src)}
+          muted
+          playsInline
+          preload="metadata"
+          aria-label={`Video ${index + 1} thumbnail`}
+          className="absolute inset-0 size-full object-cover"
+        />
       ) : (
         <div className="absolute inset-0 flex items-center justify-center">
           <VideoCameraIcon
@@ -264,7 +280,7 @@ const VideoComposerInner: React.FC<{
         aria-label="Play video"
         className="relative block size-[280px] cursor-pointer overflow-hidden rounded-md outline-none focus-visible:ring-2 focus-visible:ring-black/40"
       >
-        <PosterTile item={{ src, poster, mimeType }} index={0} />
+        <PosterTile item={{ src, poster, mimeType, preload }} index={0} />
       </button>
       {onDismiss ? (
         <div className="absolute right-2 top-2 z-10">

package/src/logging/index.test.tsx

@@ -22,7 +22,7 @@ const ErrorEmitter: React.FC<{ error: Error }> = ({ error }) => {
 /** Emits one line at every level so partial-sink fallback is observable. */
 const AllLevelsEmitter: React.FC = () => {
   const logger = useMessagingLogger()
-  // eslint-disable-next-line testing-library/no-debugging-utils -- this is the messaging logger's debug level, not screen.debug()
+  // This is the messaging logger's debug level, not screen.debug().
   logger.debug('debug line', 1)
   logger.info('info line', 2)
   logger.warn('warn line', 3)