@linktr.ee/messaging-react 3.37.0 → 3.37.1

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

@@ -65,9 +65,7 @@ const VideoViewer: React.FC<VideoViewerProps> = ({
       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="video-viewer"
     >
       {/* No `<track>` is rendered — we don't author caption sidecars

package/src/components/MessageAttachment/_shared/fileMeta.test.ts

@@ -30,9 +30,7 @@ describe('formatFileSize', () => {
 describe('getFileExtensionLabel', () => {
   it('prefers the filename extension when present', () => {
     expect(getFileExtensionLabel(undefined, 'notes.pdf')).toBe('PDF')
-    expect(getFileExtensionLabel('application/pdf', 'oops.docx')).toBe(
-      'DOCX'
-    )
+    expect(getFileExtensionLabel('application/pdf', 'oops.docx')).toBe('DOCX')
   })
 
   it('falls back to MIME-derived label when filename has no extension', () => {
@@ -49,9 +47,9 @@ describe('getFileExtensionLabel', () => {
 
 describe('buildCompactMetaLabel', () => {
   it('joins extension and size with a middle dot', () => {
-    expect(
-      buildCompactMetaLabel('application/pdf', 'notes.pdf', 388_658)
-    ).toBe('PDF · 379.5 KB')
+    expect(buildCompactMetaLabel('application/pdf', 'notes.pdf', 388_658)).toBe(
+      'PDF · 379.5 KB'
+    )
   })
 
   it('drops the size when missing', () => {

package/src/components/MessageAttachment/stories/StoryTable.tsx

@@ -9,9 +9,7 @@ import React from 'react'
  */
 export const StoryPage: React.FC<{ children: React.ReactNode }> = ({
   children,
-}) => (
-  <div className="min-h-screen w-full bg-[#F9F7F4] p-12">{children}</div>
-)
+}) => <div className="min-h-screen w-full bg-[#F9F7F4] p-12">{children}</div>
 
 export const StoryHeading: React.FC<{
   title: string

package/src/components/MessageBubble/MessageBubble.stories.tsx

@@ -46,7 +46,11 @@ export const Gallery: StoryFn = () => (
       <MessageBubble.Received text={SHORT} className="w-fit" />
     </Row>
     <Row label="Received — with header (sender name)" align="start">
-      <MessageBubble.Received header="Brie" text={LONG} className="w-fit max-w-[520px]" />
+      <MessageBubble.Received
+        header="Brie"
+        text={LONG}
+        className="w-fit max-w-[520px]"
+      />
     </Row>
     <Row label="Received — no tail" align="start">
       <MessageBubble.Received text={SHORT} tail={false} className="w-fit" />

package/src/components/MessageBubble/MessageBubble.test.tsx

@@ -46,9 +46,7 @@ describe('MessageBubble', () => {
   })
 
   it('applies the sent and received surface treatments from theme vars', () => {
-    const { rerender } = renderWithProviders(
-      <MessageBubble.Sent text="mine" />
-    )
+    const { rerender } = renderWithProviders(<MessageBubble.Sent text="mine" />)
     const sent = screen.getByText('mine').parentElement as HTMLElement
     expect(sent.style.backgroundColor).toBe(
       'var(--str-chat__own-message-bubble-background-color, #1e2330)'

package/src/components/MessageBubble/components/_shared/bubbleTail.tsx

@@ -37,7 +37,8 @@ export const BubbleTail = ({ variant }: { variant: MessageBubbleVariant }) => (
     className="pointer-events-none absolute bottom-0 z-[-1] h-[1.4375rem] w-5"
     style={{
       insetInlineEnd: variant === 'sent' ? 'calc(-1 * 0.25rem)' : undefined,
-      insetInlineStart: variant === 'received' ? 'calc(-1 * 0.25rem)' : undefined,
+      insetInlineStart:
+        variant === 'received' ? 'calc(-1 * 0.25rem)' : undefined,
       transform: variant === 'received' ? 'scaleX(-1)' : undefined,
       transformOrigin: 'center',
       backgroundColor: BG_VAR_BY_VARIANT[variant],

package/src/components/MessagingShell/LoadingState.stories.tsx

@@ -24,4 +24,3 @@ const Template: StoryFn<ComponentProps> = () => {
 }
 
 export const Default: StoryFn<ComponentProps> = Template.bind({})
-

package/src/components/RichCard/RichCard.stories.tsx

@@ -167,7 +167,11 @@ export const ImagePresentation: StoryFn = () => (
           <tr key={side}>
             <RowLabel>{side}</RowLabel>
             <Cell>
-              <Card {...PRESENTATION_BASE} images={[IMAGE]} imagePresentation="hero" />
+              <Card
+                {...PRESENTATION_BASE}
+                images={[IMAGE]}
+                imagePresentation="hero"
+              />
             </Cell>
             <Cell>
               <Card
@@ -233,7 +237,10 @@ export const FooterLayout: StoryFn = () => (
           <tr key={side}>
             <RowLabel>{side}</RowLabel>
             <Cell>
-              <Card {...FOOTER_BASE} actions={[primary('Set up welcome message')]} />
+              <Card
+                {...FOOTER_BASE}
+                actions={[primary('Set up welcome message')]}
+              />
             </Cell>
             <Cell>
               <Card
@@ -356,7 +363,11 @@ export const ContentEdges: StoryFn = () => (
               />
             </Cell>
             <Cell>
-              <Card {...OFFICIAL_WELCOME} subtitle={undefined} actions={undefined} />
+              <Card
+                {...OFFICIAL_WELCOME}
+                subtitle={undefined}
+                actions={undefined}
+              />
             </Cell>
             <Cell>
               <Card {...OFFICIAL_WELCOME} groupPosition="middle" />

package/src/components/RichCard/RichCard.test.tsx

@@ -20,7 +20,9 @@ describe('RichCard', () => {
     )
     expect(await screen.findByTestId('rich-card')).toBeInTheDocument()
     expect(screen.getByText('Set up your welcome message')).toBeInTheDocument()
-    expect(screen.getByText('Automatically greet new followers.')).toBeInTheDocument()
+    expect(
+      screen.getByText('Automatically greet new followers.')
+    ).toBeInTheDocument()
   })
 
   it('renders a single hero image for the hero presentation', async () => {
@@ -97,7 +99,11 @@ describe('RichCard', () => {
     rerender(
       <RichCard.Received
         title="Collection"
-        images={['https://cdn.example.com/a.jpg', 'https://cdn.example.com/b.jpg', 'https://cdn.example.com/c.jpg']}
+        images={[
+          'https://cdn.example.com/a.jpg',
+          'https://cdn.example.com/b.jpg',
+          'https://cdn.example.com/c.jpg',
+        ]}
         imagePresentation="fan"
       />
     )
@@ -114,7 +120,11 @@ describe('RichCard', () => {
 
   it('drops a failed hero image to the placeholder rather than a broken image', async () => {
     const { container } = renderWithProviders(
-      <RichCard.Received title="Welcome" images={[HERO]} imagePresentation="hero" />
+      <RichCard.Received
+        title="Welcome"
+        images={[HERO]}
+        imagePresentation="hero"
+      />
     )
     const img = await screen.findByRole('img')
     // The hero errors → useChinPalette clears the URL → CardThumbnail falls
@@ -183,7 +193,9 @@ describe('RichCard', () => {
       />
     )
     // Primary → stacked, full-width button.
-    expect(await screen.findByText('Set up welcome message')).toHaveClass('w-full')
+    expect(await screen.findByText('Set up welcome message')).toHaveClass(
+      'w-full'
+    )
 
     rerender(
       <RichCard.Received

package/src/components/RichCard/RichCardBody.tsx

@@ -21,7 +21,8 @@ export interface RichCardBodyProps {
 // Mirror LinkAttachment's `CardBody` type scales so the two cards read
 // identically (14/20 medium title, 12/16 subtitle). Colour is always supplied
 // via `chinTextColor`, so no per-variant text class is needed here.
-const TITLE_CLASS = 'line-clamp-2 text-[14px] font-medium leading-5 tracking-[0.28px]'
+const TITLE_CLASS =
+  'line-clamp-2 text-[14px] font-medium leading-5 tracking-[0.28px]'
 const SUBTITLE_CLASS = 'text-[12px] leading-4 tracking-[0.24px]'
 
 /**
@@ -109,7 +110,10 @@ const RichCardBody: React.FC<RichCardBodyProps> = ({
       {hasTitle && (
         <div className="flex min-w-0 items-center gap-2">
           {appIcon ? <span className="shrink-0">{appIcon}</span> : null}
-          <p className={classNames('min-w-0', TITLE_CLASS)} style={chinTextStyle}>
+          <p
+            className={classNames('min-w-0', TITLE_CLASS)}
+            style={chinTextStyle}
+          >
             {title}
           </p>
         </div>
@@ -139,7 +143,11 @@ const RichCardBody: React.FC<RichCardBodyProps> = ({
       ) : (
         <>
           {textBlock}
-          <RichCardFooter surface={ctaSurface} actions={actions} layout="stacked" />
+          <RichCardFooter
+            surface={ctaSurface}
+            actions={actions}
+            layout="stacked"
+          />
         </>
       )}
     </div>

package/src/components/RichCard/RichCardCard.tsx

@@ -1,7 +1,6 @@
 import { resolveRichCardImagePresentation } from '@linktr.ee/messaging-taxonomy'
 import React from 'react'
 
-
 import BubbleTail from '../LinkAttachment/components/_shared/BubbleTail'
 import CardShell from '../LinkAttachment/components/_shared/CardShell'
 import type { LinkAttachmentVariant } from '../LinkAttachment/components/_shared/CardShell'
@@ -51,8 +50,7 @@ const RichCardCard: React.FC<RichCardCardProps> = ({
     thumbnailUrl: isHero ? images[0] : undefined,
   })
 
-  const tailVisible =
-    groupPosition === 'single' || groupPosition === 'end'
+  const tailVisible = groupPosition === 'single' || groupPosition === 'end'
 
   return (
     <BubbleTail

package/src/components/RichCard/RichCardImages.tsx

@@ -2,7 +2,6 @@ import type { RichCardImagePresentation } from '@linktr.ee/messaging-taxonomy'
 import classNames from 'classnames'
 import React from 'react'
 
-
 import { optimizeMessagingAttachmentUrl } from '../../utils/cdnImageUrl'
 // Reuse LinkAttachment's card chrome primitives — the rich card is a sibling
 // renderer over the same building blocks, not a from-scratch card.
@@ -85,9 +84,8 @@ const RichCardFan: React.FC<{
     .map((src, index) => ({ src, index }))
     .filter(({ index }) => !failed[index])
 
-  const count = (
-    survivors.length >= 3 ? 3 : survivors.length === 2 ? 2 : 1
-  ) as 1 | 2 | 3
+  const count = (survivors.length >= 3 ? 3 : survivors.length === 2 ? 2 : 1) as
+    1 | 2 | 3
   const rotations = FAN_ROTATION[count]
   const offsets = FAN_OFFSET_PX[count]
   const zorder = FAN_ZORDER[count]

package/src/components/SearchInput/SearchInput.stories.tsx

@@ -31,4 +31,3 @@ export const CustomPlaceholder: StoryFn<ComponentProps> = Template.bind({})
 CustomPlaceholder.args = {
   placeholder: 'Find a conversation...',
 }
-

package/src/components/SearchInput/SearchInput.test.tsx

@@ -1,102 +1,131 @@
-import { describe, it, expect, vi } from 'vitest';
+import { describe, it, expect, vi } from 'vitest'
 
-import { renderWithProviders, screen, userEvent } from '../../test/utils';
+import { renderWithProviders, screen, userEvent } from '../../test/utils'
 
-import { SearchInput } from './index';
+import { SearchInput } from './index'
 
 describe('SearchInput', () => {
   describe('Rendering', () => {
     it('renders with placeholder', () => {
       renderWithProviders(
-        <SearchInput 
-          searchQuery="" 
-          setSearchQuery={vi.fn()} 
-          placeholder="Search messages..." 
+        <SearchInput
+          searchQuery=""
+          setSearchQuery={vi.fn()}
+          placeholder="Search messages..."
         />
-      );
-      expect(screen.getByPlaceholderText('Search messages...')).toBeInTheDocument();
-    });
+      )
+      expect(
+        screen.getByPlaceholderText('Search messages...')
+      ).toBeInTheDocument()
+    })
 
     it('displays the current value', () => {
       renderWithProviders(
-        <SearchInput searchQuery="test query" setSearchQuery={vi.fn()} placeholder="Search" />
-      );
-      const input = screen.getByRole('textbox');
-      expect(input).toHaveValue('test query');
-    });
-  });
+        <SearchInput
+          searchQuery="test query"
+          setSearchQuery={vi.fn()}
+          placeholder="Search"
+        />
+      )
+      const input = screen.getByRole('textbox')
+      expect(input).toHaveValue('test query')
+    })
+  })
 
   describe('User Interaction', () => {
     it('calls setSearchQuery when user types', async () => {
-      const handleChange = vi.fn();
-      const user = userEvent.setup();
-      
+      const handleChange = vi.fn()
+      const user = userEvent.setup()
+
       renderWithProviders(
-        <SearchInput searchQuery="" setSearchQuery={handleChange} placeholder="Search" />
-      );
+        <SearchInput
+          searchQuery=""
+          setSearchQuery={handleChange}
+          placeholder="Search"
+        />
+      )
 
-      const input = screen.getByRole('textbox');
-      await user.type(input, 'hello');
+      const input = screen.getByRole('textbox')
+      await user.type(input, 'hello')
 
-      expect(handleChange).toHaveBeenCalledTimes(5); // Once per character
-    });
-  });
+      expect(handleChange).toHaveBeenCalledTimes(5) // Once per character
+    })
+  })
 
   describe('Clear Functionality', () => {
     it('shows clear button when there is a value', () => {
       renderWithProviders(
-        <SearchInput searchQuery="test" setSearchQuery={vi.fn()} placeholder="Search" />
-      );
-      
-      const clearButton = screen.getByRole('button', { name: /clear/i });
-      expect(clearButton).toBeInTheDocument();
-    });
+        <SearchInput
+          searchQuery="test"
+          setSearchQuery={vi.fn()}
+          placeholder="Search"
+        />
+      )
+
+      const clearButton = screen.getByRole('button', { name: /clear/i })
+      expect(clearButton).toBeInTheDocument()
+    })
 
     it('does not show clear button when value is empty', () => {
       renderWithProviders(
-        <SearchInput searchQuery="" setSearchQuery={vi.fn()} placeholder="Search" />
-      );
-      
-      const clearButton = screen.queryByLabelText(/clear/i);
-      expect(clearButton).not.toBeInTheDocument();
-    });
+        <SearchInput
+          searchQuery=""
+          setSearchQuery={vi.fn()}
+          placeholder="Search"
+        />
+      )
+
+      const clearButton = screen.queryByLabelText(/clear/i)
+      expect(clearButton).not.toBeInTheDocument()
+    })
 
     it('calls setSearchQuery with empty string when clear is clicked', async () => {
-      const handleChange = vi.fn();
-      const user = userEvent.setup();
-      
+      const handleChange = vi.fn()
+      const user = userEvent.setup()
+
       renderWithProviders(
-        <SearchInput searchQuery="test" setSearchQuery={handleChange} placeholder="Search" />
-      );
+        <SearchInput
+          searchQuery="test"
+          setSearchQuery={handleChange}
+          placeholder="Search"
+        />
+      )
 
-      const clearButton = screen.getByRole('button', { name: /clear/i });
-      await user.click(clearButton);
+      const clearButton = screen.getByRole('button', { name: /clear/i })
+      await user.click(clearButton)
 
-      expect(handleChange).toHaveBeenCalledWith('');
-    });
-  });
+      expect(handleChange).toHaveBeenCalledWith('')
+    })
+  })
 
   describe('Accessibility', () => {
     it('clear button has accessible label', () => {
       renderWithProviders(
-        <SearchInput searchQuery="test" setSearchQuery={vi.fn()} placeholder="Search" />
-      );
+        <SearchInput
+          searchQuery="test"
+          setSearchQuery={vi.fn()}
+          placeholder="Search"
+        />
+      )
 
-      const clearButton = screen.getByRole('button', { name: /clear search/i });
-      expect(clearButton).toBeInTheDocument();
-    });
+      const clearButton = screen.getByRole('button', { name: /clear search/i })
+      expect(clearButton).toBeInTheDocument()
+    })
 
     it('is keyboard navigable', async () => {
-      const user = userEvent.setup();
-      
-      renderWithProviders(
-        <SearchInput searchQuery="" setSearchQuery={vi.fn()} placeholder="Search" />
-      );
-
-      await user.tab();
-      const input = screen.getByRole('textbox');
-      expect(input).toHaveFocus();
-    });
-  });
-});
+      const user = userEvent.setup()
 
+      renderWithProviders(
+        <SearchInput
+          searchQuery=""
+          setSearchQuery={vi.fn()}
+          placeholder="Search"
+        />
+      )
+
+      await user.tab()
+      const input = screen.getByRole('textbox')
+      expect(input).toHaveFocus()
+    })
+  })
+})

package/src/hooks/useChannelStar.ts

@@ -19,7 +19,9 @@ export const useChannelStar = (channel?: Channel) => {
 
     const handleMemberUpdate = (event: Event) => {
       setIsChannelStarred(
-        event?.member ? !!event.member.pinned_at : !!channel.state.membership?.pinned_at
+        event?.member
+          ? !!event.member.pinned_at
+          : !!channel.state.membership?.pinned_at
       )
     }
 

package/src/hooks/useMessaging.ts

@@ -1,9 +1,9 @@
-import { useMessagingContext } from '../providers/MessagingProvider';
-import type { MessagingContextValue } from '../providers/MessagingProvider';
+import { useMessagingContext } from '../providers/MessagingProvider'
+import type { MessagingContextValue } from '../providers/MessagingProvider'
 
 /**
  * Hook to access messaging service and state
  */
 export const useMessaging = (): MessagingContextValue => {
-  return useMessagingContext();
-};
+  return useMessagingContext()
+}

package/src/stories/decorators/storyUser.tsx

@@ -15,7 +15,7 @@ export const storyUsers = {
 
 export type StoryRole = keyof typeof storyUsers
 
-export type StoryUser = typeof storyUsers[keyof typeof storyUsers]
+export type StoryUser = (typeof storyUsers)[keyof typeof storyUsers]
 
 const DEFAULT_ROLE: StoryRole = 'creator'
 
@@ -34,4 +34,4 @@ export const currentUserArgType: ArgTypes<{ currentUser?: StoryUser }> = {
     },
     table: { defaultValue: { summary: DEFAULT_ROLE } },
   },
-} satisfies ArgTypes<{ currentUser?: StoryUser }>
+} satisfies ArgTypes<{ currentUser?: StoryUser }>

package/src/stories/mocks.tsx

@@ -38,7 +38,10 @@ export const MockChatProviderWithChannels: React.FC<{
     // Create mock channels
     const mockChannels = Array.from({ length: channelCount }, (_, i) => {
       const participant = mockParticipants[i % mockParticipants.length]
-      const eventListeners = new Map<string, Set<(...args: unknown[]) => void>>()
+      const eventListeners = new Map<
+        string,
+        Set<(...args: unknown[]) => void>
+      >()
 
       const latestMessage = {
         id: `msg-${i}-1`,

package/src/styles.css

@@ -665,7 +665,9 @@
   line-height: 1.4;
   color: var(--str-chat__text-low-emphasis-color, rgba(0, 0, 0, 0.5));
 }
-.str-chat__li .str-chat__message--me .sent-message-status-row
+.str-chat__li
+  .str-chat__message--me
+  .sent-message-status-row
   .str-chat__message-status {
   grid-area: auto;
   justify-content: inherit;
@@ -694,7 +696,9 @@
 .str-chat__li .str-chat__message--me .sent-message-status-row svg path {
   fill: currentColor;
 }
-.str-chat__li .str-chat__message--me .sent-message-status-row
+.str-chat__li
+  .str-chat__message--me
+  .sent-message-status-row
   .sent-message-broadcast-badge {
   display: inline-flex;
   width: 16px;
@@ -706,20 +710,31 @@
   background: var(--sent-message-broadcast-badge-color);
   color: #fff;
 }
-.str-chat__li .str-chat__message--me .sent-message-status-row
-  .sent-message-broadcast-badge svg {
+.str-chat__li
+  .str-chat__message--me
+  .sent-message-status-row
+  .sent-message-broadcast-badge
+  svg {
   width: 10px;
   height: 10px;
 }
-.str-chat__li .str-chat__message--me .sent-message-status-row
-  .sent-message-broadcast-badge svg path {
+.str-chat__li
+  .str-chat__message--me
+  .sent-message-status-row
+  .sent-message-broadcast-badge
+  svg
+  path {
   fill: currentColor;
 }
-.str-chat__li .str-chat__message--me .sent-message-status-row
+.str-chat__li
+  .str-chat__message--me
+  .sent-message-status-row
   .sent-message-broadcast-name {
   color: var(--sent-message-broadcast-name-color);
 }
-.str-chat__li .str-chat__message--me .sent-message-status-row
+.str-chat__li
+  .str-chat__message--me
+  .sent-message-status-row
   .sent-message-broadcast-link
   .sent-message-broadcast-name {
   text-decoration: underline;

package/src/types.ts

@@ -535,5 +535,4 @@ interface MessagingProviderApiKeyProps extends MessagingProviderBaseProps {
  * neither.
  */
 export type MessagingProviderProps =
-  | MessagingProviderInjectedClientProps
-  | MessagingProviderApiKeyProps
+  MessagingProviderInjectedClientProps | MessagingProviderApiKeyProps

package/src/utils/cdnImageUrl.test.ts

@@ -13,7 +13,9 @@ describe('optimizeMessagingAttachmentUrl', () => {
 
   it('does not optimize unrelated CloudFront hosts', () => {
     expect(
-      optimizeMessagingAttachmentUrl('https://d111111abcdef8.cloudfront.net/photo.jpg')
+      optimizeMessagingAttachmentUrl(
+        'https://d111111abcdef8.cloudfront.net/photo.jpg'
+      )
     ).toBe('https://d111111abcdef8.cloudfront.net/photo.jpg')
   })