@linktr.ee/messaging-react 3.37.0 → 3.37.1

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

@@ -13,13 +13,7 @@ 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}
@@ -82,7 +76,10 @@ 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', () => {
@@ -185,7 +182,10 @@ 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,7 +308,9 @@ 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', () => {
@@ -390,8 +392,12 @@ 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', () => {
@@ -410,7 +416,9 @@ 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()
   })
 
@@ -429,8 +437,12 @@ 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', () => {
@@ -448,7 +460,9 @@ 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,4 +1,8 @@
-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'
 
@@ -69,15 +73,23 @@ 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>
         )}
@@ -87,7 +99,12 @@ 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>
     )
@@ -108,8 +125,11 @@ 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()
@@ -135,8 +155,12 @@ 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))
   }
 
@@ -148,7 +172,10 @@ 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" />
@@ -205,8 +232,10 @@ 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,
@@ -326,11 +355,19 @@ 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,7 +145,8 @@ 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)} />}
       />
@@ -157,7 +158,8 @@ 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,7 +275,9 @@ 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,7 +245,10 @@ 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
@@ -265,7 +268,10 @@ 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
@@ -285,7 +291,10 @@ 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
@@ -297,7 +306,9 @@ 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,12 +3,8 @@ 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,
@@ -150,9 +146,8 @@ 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">
@@ -268,9 +263,8 @@ 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,9 +307,10 @@ 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.
@@ -326,9 +327,10 @@ 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', () => {
@@ -575,9 +577,7 @@ 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,9 +731,7 @@ 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', () => {
@@ -885,7 +883,11 @@ 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' },
           ]}
         />
@@ -927,9 +929,7 @@ 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,9 +947,7 @@ 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')
     })
   })
@@ -1011,16 +1009,45 @@ 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)
     }
   )
@@ -1050,10 +1077,15 @@ 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,7 +102,9 @@ 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,9 +119,8 @@ 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,7 +183,10 @@ 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
@@ -204,7 +207,10 @@ 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
@@ -225,7 +231,9 @@ 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,9 +3,7 @@ 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 {
@@ -117,7 +115,9 @@ 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,9 +167,8 @@ 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">
@@ -189,10 +188,7 @@ 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}
       />
@@ -219,9 +215,8 @@ 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,9 +126,7 @@ 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,9 +67,7 @@ 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,7 +119,11 @@ 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,9 +65,7 @@ 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