@linktr.ee/messaging-react 3.37.0-rc-1786190741 → 3.37.0

package/src/components/MediaMessage/MediaMessage.test.tsx

@@ -13,7 +13,13 @@ vi.mock('../Avatar', () => ({
 }))
 
 vi.mock('../AttachmentCard/MediaPlayer', () => ({
-  default: ({ source, mimeType }: { source: string; mimeType: string }) => (
+  default: ({
+    source,
+    mimeType,
+  }: {
+    source: string
+    mimeType: string
+  }) => (
     <div
       role="button"
       tabIndex={0}
@@ -76,10 +82,7 @@ describe('MediaMessage', () => {
 
     const player = screen.getByTestId('media-player')
     expect(player).toBeInTheDocument()
-    expect(player).toHaveAttribute(
-      'data-source',
-      'https://cdn.example.com/clip.mp4'
-    )
+    expect(player).toHaveAttribute('data-source', 'https://cdn.example.com/clip.mp4')
   })
 
   it('renders MediaPlayer for an audio attachment', () => {
@@ -182,10 +185,7 @@ describe('MediaMessage', () => {
     )
 
     expect(screen.getByTestId('avatar')).toBeInTheDocument()
-    expect(screen.getByTestId('avatar')).toHaveAttribute(
-      'data-user-id',
-      'user-1'
-    )
+    expect(screen.getByTestId('avatar')).toHaveAttribute('data-user-id', 'user-1')
   })
 
   it('does not render Avatar for own messages', () => {
@@ -308,9 +308,7 @@ describe('MediaMessage', () => {
       />
     )
 
-    expect(
-      screen.queryByRole('button', { name: 'Download' })
-    ).not.toBeInTheDocument()
+    expect(screen.queryByRole('button', { name: 'Download' })).not.toBeInTheDocument()
   })
 
   it('shows Download action for received audio attachment', () => {
@@ -392,12 +390,8 @@ describe('MediaMessage', () => {
       />
     )
 
-    expect(
-      screen.queryByRole('button', { name: 'Download' })
-    ).not.toBeInTheDocument()
-    expect(
-      screen.queryByRole('button', { name: 'View full screen' })
-    ).not.toBeInTheDocument()
+    expect(screen.queryByRole('button', { name: 'Download' })).not.toBeInTheDocument()
+    expect(screen.queryByRole('button', { name: 'View full screen' })).not.toBeInTheDocument()
   })
 
   it('MediaMessage.Visitor renders card without chat shell', () => {
@@ -416,9 +410,7 @@ describe('MediaMessage', () => {
       />
     )
 
-    expect(
-      container.querySelector('.str-chat__message')
-    ).not.toBeInTheDocument()
+    expect(container.querySelector('.str-chat__message')).not.toBeInTheDocument()
     expect(screen.getByRole('button', { name: 'Download' })).toBeInTheDocument()
   })
 
@@ -437,12 +429,8 @@ describe('MediaMessage', () => {
       />
     )
 
-    expect(
-      container.querySelector('.str-chat__message')
-    ).not.toBeInTheDocument()
-    expect(
-      screen.queryByRole('button', { name: 'Download' })
-    ).not.toBeInTheDocument()
+    expect(container.querySelector('.str-chat__message')).not.toBeInTheDocument()
+    expect(screen.queryByRole('button', { name: 'Download' })).not.toBeInTheDocument()
   })
 
   it('resolveLinkAttachment ignores empty-string og_scrape_url without asset_url', () => {
@@ -460,9 +448,7 @@ describe('MediaMessage', () => {
   })
 
   it('Download button triggers fetch and uses fallback on failure', async () => {
-    const fetchSpy = vi
-      .spyOn(global, 'fetch')
-      .mockRejectedValue(new Error('fail'))
+    const fetchSpy = vi.spyOn(global, 'fetch').mockRejectedValue(new Error('fail'))
     const openSpy = vi.spyOn(window, 'open').mockReturnValue({
       location: { href: '' },
       close: vi.fn(),

package/src/components/MediaMessage/index.tsx

@@ -1,8 +1,4 @@
-import {
-  CircleNotchIcon,
-  DownloadSimpleIcon,
-  LinkIcon,
-} from '@phosphor-icons/react'
+import { CircleNotchIcon, DownloadSimpleIcon, LinkIcon } from '@phosphor-icons/react'
 import React, { useState } from 'react'
 import type { Attachment, LocalMessage } from 'stream-chat'
 
@@ -73,23 +69,15 @@ const LinkCard: React.FC<{
       </div>
       <div className="px-3 pb-3">
         {title && (
-          <p
-            className={`truncate text-[14px] font-medium leading-5 ${linkPrimaryText(isMyMessage)}`}
-          >
+          <p className={`truncate text-[14px] font-medium leading-5 ${linkPrimaryText(isMyMessage)}`}>
             {title}
           </p>
         )}
         {text && (
-          <p
-            className={`truncate text-[12px] leading-4 ${linkSecondaryText(isMyMessage)}`}
-          >
-            {text}
-          </p>
+          <p className={`truncate text-[12px] leading-4 ${linkSecondaryText(isMyMessage)}`}>{text}</p>
         )}
         {url && (
-          <p
-            className={`mt-1 truncate text-[12px] leading-4 ${linkTertiaryText(isMyMessage)}`}
-          >
+          <p className={`mt-1 truncate text-[12px] leading-4 ${linkTertiaryText(isMyMessage)}`}>
             {url}
           </p>
         )}
@@ -99,12 +87,7 @@ const LinkCard: React.FC<{
 
   if (url) {
     return (
-      <a
-        href={url}
-        target="_blank"
-        rel="noopener noreferrer"
-        className="block no-underline"
-      >
+      <a href={url} target="_blank" rel="noopener noreferrer" className="block no-underline">
         {body}
       </a>
     )
@@ -125,11 +108,8 @@ export function resolveLinkAttachment(
 
 async function triggerDownload(url: string, filename?: string): Promise<void> {
   let name: string
-  try {
-    name = filename ?? new URL(url).pathname.split('/').pop() ?? 'download'
-  } catch {
-    name = filename ?? 'download'
-  }
+  try { name = filename ?? new URL(url).pathname.split('/').pop() ?? 'download' }
+  catch { name = filename ?? 'download' }
   const res = await fetch(url, { mode: 'cors' })
   if (!res.ok) throw new Error(`HTTP ${res.status}`)
   const blob = await res.blob()
@@ -155,12 +135,8 @@ const DownloadAction: React.FC<{ url: string; filename?: string }> = ({
     const fallback = window.open('', '_blank', 'noopener,noreferrer')
     setBusy(true)
     triggerDownload(url, filename)
-      .then(() => {
-        fallback?.close()
-      })
-      .catch(() => {
-        if (fallback) fallback.location.href = url
-      })
+      .then(() => { fallback?.close() })
+      .catch(() => { if (fallback) fallback.location.href = url })
       .finally(() => setBusy(false))
   }
 
@@ -172,10 +148,7 @@ const DownloadAction: React.FC<{ url: string; filename?: string }> = ({
       className="mt-3 inline-flex h-10 w-full items-center justify-center gap-2 rounded-full bg-[#121110] px-4 text-sm font-medium leading-none text-white hover:bg-[#2a2928] disabled:opacity-70"
     >
       {busy ? (
-        <CircleNotchIcon
-          className="size-4 animate-spin text-white"
-          weight="bold"
-        />
+        <CircleNotchIcon className="size-4 animate-spin text-white" weight="bold" />
       ) : (
         <React.Fragment>
           <DownloadSimpleIcon className="size-4 text-white" weight="bold" />
@@ -232,10 +205,8 @@ export function resolveMediaFromMessage(
           : 'application/octet-stream')
 
   const title = (activeAttachment as { title?: string } | undefined)?.title
-  const fileSize = (activeAttachment as { file_size?: number } | undefined)
-    ?.file_size
-  const thumbnailUrl = (videoAttachment as { thumb_url?: string } | undefined)
-    ?.thumb_url
+  const fileSize = (activeAttachment as { file_size?: number } | undefined)?.file_size
+  const thumbnailUrl = (videoAttachment as { thumb_url?: string } | undefined)?.thumb_url
 
   return {
     resolvedUrl,
@@ -355,19 +326,11 @@ const MediaMessageRoot: React.FC<MediaMessageProps> = ({
             // tail tinted from the text-bubble surface (#f2f1ef) hangs off
             // a white card and reads as a detached grey nub.
             data-attachment-bubble="true"
-            style={{
-              padding: 0,
-              borderRadius: 0,
-              overflow: 'visible',
-              background: 'transparent',
-            }}
+            style={{ padding: 0, borderRadius: 0, overflow: 'visible', background: 'transparent' }}
           >
             {linkAttachment ? (
               <div className={linkCardShellClass(isMyMessage)}>
-                <LinkCard
-                  attachment={linkAttachment}
-                  isMyMessage={isMyMessage}
-                />
+                <LinkCard attachment={linkAttachment} isMyMessage={isMyMessage} />
               </div>
             ) : isMyMessage ? (
               <Creator {...resolved!} />

package/src/components/MessageAttachment/Audio/AudioAttachment.stories.tsx

@@ -145,8 +145,7 @@ export const Stacked: StoryFn = () => (
             mimeType="audio/mpeg"
             filename="Morning meditation.mp3"
             onDismiss={handleDismiss}
-          />
-        }
+          />}
         sent={<AudioAttachment.Sent items={STACK_AUDIO.slice(0, 2)} />}
         received={<AudioAttachment.Received items={STACK_AUDIO.slice(0, 2)} />}
       />
@@ -158,8 +157,7 @@ export const Stacked: StoryFn = () => (
             mimeType="audio/mpeg"
             filename="Morning meditation.mp3"
             onDismiss={handleDismiss}
-          />
-        }
+          />}
         sent={<AudioAttachment.Sent items={STACK_AUDIO} />}
         received={<AudioAttachment.Received items={STACK_AUDIO} />}
       />

package/src/components/MessageAttachment/File/FileAttachment.stories.tsx

@@ -275,9 +275,7 @@ export const Grouping: StoryFn = () => (
     <StoryGrid>
       <StoryRow
         label="single"
-        sent={
-          <FileAttachment.Sent {...STACK_FILES[0]} groupPosition="single" />
-        }
+        sent={<FileAttachment.Sent {...STACK_FILES[0]} groupPosition="single" />}
         received={
           <FileAttachment.Received {...STACK_FILES[0]} groupPosition="single" />
         }

package/src/components/MessageAttachment/Image/ImageAttachment.stories.tsx

@@ -245,10 +245,7 @@ export const Stacked: StoryFn = () => (
           />
         }
         sent={
-          <ImageAttachment.Sent
-            items={STACK_IMAGES.slice(0, 2)}
-            filename="album"
-          />
+          <ImageAttachment.Sent items={STACK_IMAGES.slice(0, 2)} filename="album" />
         }
         received={
           <ImageAttachment.Received
@@ -268,10 +265,7 @@ export const Stacked: StoryFn = () => (
           />
         }
         sent={
-          <ImageAttachment.Sent
-            items={STACK_IMAGES.slice(0, 3)}
-            filename="album"
-          />
+          <ImageAttachment.Sent items={STACK_IMAGES.slice(0, 3)} filename="album" />
         }
         received={
           <ImageAttachment.Received
@@ -291,10 +285,7 @@ export const Stacked: StoryFn = () => (
           />
         }
         sent={
-          <ImageAttachment.Sent
-            items={STACK_IMAGES.slice(0, 4)}
-            filename="album"
-          />
+          <ImageAttachment.Sent items={STACK_IMAGES.slice(0, 4)} filename="album" />
         }
         received={
           <ImageAttachment.Received
@@ -306,9 +297,7 @@ export const Stacked: StoryFn = () => (
       <StoryRow
         label="6 photos (+overflow)"
         sent={<ImageAttachment.Sent items={STACK_IMAGES} filename="album" />}
-        received={
-          <ImageAttachment.Received items={STACK_IMAGES} filename="album" />
-        }
+        received={<ImageAttachment.Received items={STACK_IMAGES} filename="album" />}
       />
     </StoryGrid>
   </StoryPage>

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

@@ -3,8 +3,12 @@ import React from 'react'
 import { optimizeMessagingAttachmentUrl } from '../../../utils/cdnImageUrl'
 import Bubble from '../_shared/Bubble'
 import DismissButton from '../_shared/DismissButton'
-import ImageViewer, { type ImageViewerItem } from '../_shared/ImageViewer'
-import MediaStackGrid, { type MediaStackTile } from '../_shared/MediaStackGrid'
+import ImageViewer, {
+  type ImageViewerItem,
+} from '../_shared/ImageViewer'
+import MediaStackGrid, {
+  type MediaStackTile,
+} from '../_shared/MediaStackGrid'
 import { useViewer } from '../_shared/useViewer'
 import {
   bubbleVariantForState,
@@ -146,8 +150,9 @@ const ImageComposerInner: React.FC<{
   onClick?: (index: number) => boolean | void
   onDismiss?: () => void
 }> = ({ src, alt, filename, loading = 'lazy', onClick, onDismiss }) => {
-  const { viewerOpen, viewerIndex, handleActivate, closeViewer } =
-    useViewer(onClick)
+  const { viewerOpen, viewerIndex, handleActivate, closeViewer } = useViewer(
+    onClick
+  )
 
   return (
     <div className="relative w-fit">
@@ -263,8 +268,9 @@ const ImageBubbleRow: React.FC<InternalImageRowProps> = ({
 }) => {
   const resolvedItems = resolveItems({ src, alt, items })
   const variant = bubbleVariantForState(state)
-  const { viewerOpen, viewerIndex, handleActivate, closeViewer } =
-    useViewer(onClick)
+  const { viewerOpen, viewerIndex, handleActivate, closeViewer } = useViewer(
+    onClick
+  )
   const isSingle = resolvedItems.length === 1
   const single = useSingleImageRatio(isSingle ? resolvedItems[0] : undefined)
 

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

@@ -307,10 +307,9 @@ describe('MessageAttachment.Image single-image aspect ratio', () => {
     renderWithProviders(
       <MessageAttachment.Image.Sent src="https://cdn.example.com/unsized.jpg" />
     )
-    expect(Number(mediaBox('Open image 1 of 1').style.aspectRatio)).toBeCloseTo(
-      326 / 246,
-      4
-    )
+    expect(
+      Number(mediaBox('Open image 1 of 1').style.aspectRatio)
+    ).toBeCloseTo(326 / 246, 4)
 
     // Scoped to the tile: the always-mounted `ImageViewer` renders a
     // second `<img>` for the same source.
@@ -327,10 +326,9 @@ describe('MessageAttachment.Image single-image aspect ratio', () => {
     })
     fireEvent.load(img)
 
-    expect(Number(mediaBox('Open image 1 of 1').style.aspectRatio)).toBeCloseTo(
-      0.5625,
-      4
-    )
+    expect(
+      Number(mediaBox('Open image 1 of 1').style.aspectRatio)
+    ).toBeCloseTo(0.5625, 4)
   })
 
   it('leaves a stacked grid on its fixed aspect', () => {
@@ -577,7 +575,9 @@ describe('MessageAttachment.Pdf', () => {
     expect(() =>
       rerender(
         <MessageAttachment.Pdf.Received
-          items={[{ src: 'https://cdn.example.com/a.pdf', filename: 'a.pdf' }]}
+          items={[
+            { src: 'https://cdn.example.com/a.pdf', filename: 'a.pdf' },
+          ]}
         />
       )
     ).not.toThrow()
@@ -731,7 +731,9 @@ describe('MessageAttachment.Audio', () => {
     expect(screen.queryByText('song.mp3')).toBeNull()
     // Native player handles its own download in the kebab menu, so
     // no extra Download button should be rendered.
-    expect(screen.queryByRole('button', { name: /download/i })).toBeNull()
+    expect(
+      screen.queryByRole('button', { name: /download/i })
+    ).toBeNull()
   })
 
   it('shows an inline dismiss button next to the player on Composer state', () => {
@@ -883,11 +885,7 @@ describe('MessageAttachment lazy-loading defaults', () => {
       renderWithProviders(
         <MessageAttachment.Image.Sent
           items={[
-            {
-              src: 'https://cdn.example.com/a.jpg',
-              alt: 'A',
-              loading: 'eager',
-            },
+            { src: 'https://cdn.example.com/a.jpg', alt: 'A', loading: 'eager' },
             { src: 'https://cdn.example.com/b.jpg', alt: 'B' },
           ]}
         />
@@ -929,7 +927,9 @@ describe('MessageAttachment lazy-loading defaults', () => {
           mimeType="video/mp4"
         />
       )
-      const poster = screen.getByTestId('video-attachment').querySelector('img')
+      const poster = screen
+        .getByTestId('video-attachment')
+        .querySelector('img')
       expect(poster?.getAttribute('src')).toBe(
         'https://cdn.example.com/poster.jpg'
       )
@@ -947,7 +947,9 @@ describe('MessageAttachment lazy-loading defaults', () => {
         />
       )
       fireEvent.click(screen.getByLabelText('Play video 1 of 1'))
-      const video = screen.getByTestId('video-viewer').querySelector('video')
+      const video = screen
+        .getByTestId('video-viewer')
+        .querySelector('video')
       expect(video?.getAttribute('preload')).toBe('metadata')
     })
   })
@@ -1009,45 +1011,16 @@ describe('MessageAttachment lazy-loading defaults', () => {
 
 describe('bubbleGroupPositionFromStream', () => {
   it.each([
-    {
-      groupedByUser: false,
-      firstOfGroup: true,
-      endOfGroup: true,
-      expected: 'single',
-    },
-    {
-      groupedByUser: true,
-      firstOfGroup: true,
-      endOfGroup: true,
-      expected: 'single',
-    },
-    {
-      groupedByUser: true,
-      firstOfGroup: true,
-      endOfGroup: false,
-      expected: 'first',
-    },
-    {
-      groupedByUser: true,
-      firstOfGroup: false,
-      endOfGroup: true,
-      expected: 'end',
-    },
-    {
-      groupedByUser: true,
-      firstOfGroup: false,
-      endOfGroup: false,
-      expected: 'middle',
-    },
+    { groupedByUser: false, firstOfGroup: true, endOfGroup: true, expected: 'single' },
+    { groupedByUser: true, firstOfGroup: true, endOfGroup: true, expected: 'single' },
+    { groupedByUser: true, firstOfGroup: true, endOfGroup: false, expected: 'first' },
+    { groupedByUser: true, firstOfGroup: false, endOfGroup: true, expected: 'end' },
+    { groupedByUser: true, firstOfGroup: false, endOfGroup: false, expected: 'middle' },
   ])(
     'maps groupedByUser=$groupedByUser firstOfGroup=$firstOfGroup endOfGroup=$endOfGroup → $expected',
     ({ groupedByUser, firstOfGroup, endOfGroup, expected }) => {
       expect(
-        bubbleGroupPositionFromStream({
-          groupedByUser,
-          firstOfGroup,
-          endOfGroup,
-        })
+        bubbleGroupPositionFromStream({ groupedByUser, firstOfGroup, endOfGroup })
       ).toBe(expected)
     }
   )
@@ -1077,15 +1050,10 @@ describe('MessageAttachment.Bubble grouping', () => {
     'serializes groupPosition="%s" on the bubble',
     (groupPosition) => {
       renderWithProviders(
-        <MessageAttachment.File.Sent
-          {...FILE_PROPS}
-          groupPosition={groupPosition}
-        />
+        <MessageAttachment.File.Sent {...FILE_PROPS} groupPosition={groupPosition} />
       )
       expect(
-        screen
-          .getByTestId('file-attachment')
-          .getAttribute('data-group-position')
+        screen.getByTestId('file-attachment').getAttribute('data-group-position')
       ).toBe(groupPosition)
     }
   )

package/src/components/MessageAttachment/Pdf/PdfAttachment.stories.tsx

@@ -102,9 +102,7 @@ export const Single: StoryFn = () => (
           />
         }
         sent={<PdfAttachment.Sent src={PDF_SRC} filename="contract.pdf" />}
-        received={
-          <PdfAttachment.Received src={PDF_SRC} filename="contract.pdf" />
-        }
+        received={<PdfAttachment.Received src={PDF_SRC} filename="contract.pdf" />}
       />
     </StoryGrid>
   </StoryPage>

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

@@ -119,8 +119,9 @@ const PdfAttachmentRow: React.FC<InternalPdfRowProps> = ({
 }) => {
   const variant = bubbleVariantForState(state)
   const resolvedItems = resolveItems({ src, filename, fileSize, title, items })
-  const { viewerOpen, viewerIndex, handleActivate, closeViewer } =
-    useViewer(onClick)
+  const { viewerOpen, viewerIndex, handleActivate, closeViewer } = useViewer(
+    onClick
+  )
   const showDismiss = state === 'composer' && !!onDismiss
 
   if (resolvedItems.length === 0) {

package/src/components/MessageAttachment/Video/VideoAttachment.stories.tsx

@@ -183,10 +183,7 @@ export const Stacked: StoryFn = () => (
           />
         }
         sent={
-          <VideoAttachment.Sent
-            items={STACK_VIDEOS.slice(0, 2)}
-            filename="clips"
-          />
+          <VideoAttachment.Sent items={STACK_VIDEOS.slice(0, 2)} filename="clips" />
         }
         received={
           <VideoAttachment.Received
@@ -207,10 +204,7 @@ export const Stacked: StoryFn = () => (
           />
         }
         sent={
-          <VideoAttachment.Sent
-            items={STACK_VIDEOS.slice(0, 3)}
-            filename="clips"
-          />
+          <VideoAttachment.Sent items={STACK_VIDEOS.slice(0, 3)} filename="clips" />
         }
         received={
           <VideoAttachment.Received
@@ -231,9 +225,7 @@ export const Stacked: StoryFn = () => (
           />
         }
         sent={<VideoAttachment.Sent items={STACK_VIDEOS} filename="clips" />}
-        received={
-          <VideoAttachment.Received items={STACK_VIDEOS} filename="clips" />
-        }
+        received={<VideoAttachment.Received items={STACK_VIDEOS} filename="clips" />}
       />
     </StoryGrid>
   </StoryPage>

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

@@ -3,7 +3,9 @@ import React from 'react'
 
 import Bubble from '../_shared/Bubble'
 import DismissButton from '../_shared/DismissButton'
-import MediaStackGrid, { type MediaStackTile } from '../_shared/MediaStackGrid'
+import MediaStackGrid, {
+  type MediaStackTile,
+} from '../_shared/MediaStackGrid'
 import { useViewer } from '../_shared/useViewer'
 import VideoViewer, { type VideoViewerItem } from '../_shared/VideoViewer'
 import {
@@ -115,9 +117,7 @@ const resolveItems = ({
   items?: VideoItem[]
 }): VideoItem[] => {
   if (items && items.length > 0) {
-    return preload
-      ? items.map((it) => ({ ...it, preload: it.preload ?? preload }))
-      : items
+    return preload ? items.map((it) => ({ ...it, preload: it.preload ?? preload })) : items
   }
   if (src) return [{ src, poster, mimeType, preload }]
   return []
@@ -167,8 +167,9 @@ const VideoComposerInner: React.FC<{
   onClick?: (index: number) => boolean | void
   onDismiss?: () => void
 }> = ({ src, poster, mimeType, filename, preload, onClick, onDismiss }) => {
-  const { viewerOpen, viewerIndex, handleActivate, closeViewer } =
-    useViewer(onClick)
+  const { viewerOpen, viewerIndex, handleActivate, closeViewer } = useViewer(
+    onClick
+  )
 
   return (
     <div className="relative w-fit">
@@ -188,7 +189,10 @@ const VideoComposerInner: React.FC<{
 
       <VideoViewer
         open={viewerOpen}
-        items={buildViewerItems([{ src, poster, mimeType, preload }], filename)}
+        items={buildViewerItems(
+          [{ src, poster, mimeType, preload }],
+          filename
+        )}
         initialIndex={viewerIndex}
         onClose={closeViewer}
       />
@@ -215,8 +219,9 @@ const VideoBubbleRow: React.FC<InternalVideoRowProps> = ({
 }) => {
   const resolvedItems = resolveItems({ src, poster, mimeType, preload, items })
   const variant = bubbleVariantForState(state)
-  const { viewerOpen, viewerIndex, handleActivate, closeViewer } =
-    useViewer(onClick)
+  const { viewerOpen, viewerIndex, handleActivate, closeViewer } = useViewer(
+    onClick
+  )
 
   if (resolvedItems.length === 0) {
     return null

package/src/components/MessageAttachment/_shared/CompactDocumentRow.tsx

@@ -126,7 +126,9 @@ const CompactDocumentRow: React.FC<CompactDocumentRowProps> = ({
       aria-label={activateLabel}
       className={classNames(
         'flex min-w-0 flex-1 items-center gap-3 rounded-sm text-left transition-colors',
-        variant === 'dark' ? 'hover:bg-white/[0.04]' : 'hover:bg-black/[0.04]'
+        variant === 'dark'
+          ? 'hover:bg-white/[0.04]'
+          : 'hover:bg-black/[0.04]'
       )}
     >
       {iconTile}

package/src/components/MessageAttachment/_shared/ImageViewer.tsx

@@ -67,7 +67,9 @@ const ImageViewer: React.FC<ImageViewerProps> = ({
       open={open}
       onClose={onClose}
       ariaLabel={filename}
-      counter={items.length > 1 ? `${index + 1} / ${items.length}` : undefined}
+      counter={
+        items.length > 1 ? `${index + 1} / ${items.length}` : undefined
+      }
       actions={
         <DownloadAction
           url={item.src}

package/src/components/MessageAttachment/_shared/MediaStackGrid.tsx

@@ -119,11 +119,7 @@ const MediaStackGrid: React.FC<MediaStackGridProps> = ({
   const visible = tiles.slice(0, Math.min(total, maxVisible))
   const overflow = total - visible.length
 
-  const renderTile = (
-    tile: MediaStackTile,
-    index: number,
-    extra?: React.ReactNode
-  ) => {
+  const renderTile = (tile: MediaStackTile, index: number, extra?: React.ReactNode) => {
     const sharedClass = classNames(
       TILE_SHELL,
       'h-full w-full',

package/src/components/MessageAttachment/_shared/PdfViewer.tsx

@@ -65,7 +65,9 @@ const PdfViewer: React.FC<PdfViewerProps> = ({
       open={open}
       onClose={onClose}
       ariaLabel={filename}
-      counter={items.length > 1 ? `${index + 1} / ${items.length}` : undefined}
+      counter={
+        items.length > 1 ? `${index + 1} / ${items.length}` : undefined
+      }
       data-testid="pdf-viewer"
     >
       <iframe