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

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

@@ -65,7 +65,9 @@ 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,7 +30,9 @@ 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', () => {
@@ -47,9 +49,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,7 +9,9 @@ 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,11 +46,7 @@ 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,7 +46,9 @@ 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,8 +37,7 @@ 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,3 +24,4 @@ const Template: StoryFn<ComponentProps> = () => {
 }
 
 export const Default: StoryFn<ComponentProps> = Template.bind({})
+

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

@@ -167,11 +167,7 @@ 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
@@ -237,10 +233,7 @@ 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
@@ -363,11 +356,7 @@ 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,9 +20,7 @@ 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 () => {
@@ -99,11 +97,7 @@ 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"
       />
     )
@@ -120,11 +114,7 @@ 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
@@ -193,9 +183,7 @@ 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,8 +21,7 @@ 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]'
 
 /**
@@ -110,10 +109,7 @@ 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>
@@ -143,11 +139,7 @@ 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,6 +1,7 @@
 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'
@@ -50,7 +51,8 @@ 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,6 +2,7 @@ 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.
@@ -84,8 +85,9 @@ 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,3 +31,4 @@ export const CustomPlaceholder: StoryFn<ComponentProps> = Template.bind({})
 CustomPlaceholder.args = {
   placeholder: 'Find a conversation...',
 }
+

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

@@ -1,131 +1,102 @@
-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()
-
+      const user = userEvent.setup();
+      
       renderWithProviders(
-        <SearchInput
-          searchQuery=""
-          setSearchQuery={vi.fn()}
-          placeholder="Search"
-        />
-      )
-
-      await user.tab()
-      const input = screen.getByRole('textbox')
-      expect(input).toHaveFocus()
-    })
-  })
-})
+        <SearchInput searchQuery="" setSearchQuery={vi.fn()} placeholder="Search" />
+      );
+
+      await user.tab();
+      const input = screen.getByRole('textbox');
+      expect(input).toHaveFocus();
+    });
+  });
+});
+

package/src/hooks/useChannelStar.ts

@@ -19,9 +19,7 @@ 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,10 +38,7 @@ 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,9 +665,7 @@
   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;
@@ -696,9 +694,7 @@
 .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;
@@ -710,31 +706,20 @@
   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,4 +535,5 @@ interface MessagingProviderApiKeyProps extends MessagingProviderBaseProps {
  * neither.
  */
 export type MessagingProviderProps =
-  MessagingProviderInjectedClientProps | MessagingProviderApiKeyProps
+  | MessagingProviderInjectedClientProps
+  | MessagingProviderApiKeyProps

package/src/utils/cdnImageUrl.test.ts

@@ -13,9 +13,7 @@ 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')
   })