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

package/src/components/CustomMessage/MessageAttachmentConversations.stories.tsx

@@ -88,9 +88,7 @@ const ChatRow: React.FC<{
         ) : null}
       </div>
     ) : null}
-    <div
-      className={role === 'sender' ? 'flex justify-end' : 'flex justify-start'}
-    >
+    <div className={role === 'sender' ? 'flex justify-end' : 'flex justify-start'}>
       {children}
     </div>
   </div>
@@ -605,92 +603,91 @@ ConversationWithFiles.parameters = skipInChromatic
  * and a PDF handoff. Useful for sanity-checking spacing and bubble
  * rhythm when multiple attachment types coexist.
  */
-export const ConversationWithMixedAttachments: StoryFn<
-  ConversationStoryArgs
-> = ({ currentUser }) => {
-  const isSenderTheCreator = currentUser.id === storyUsers.creator.id
-  const receiver = isSenderTheCreator ? storyUsers.visitor : storyUsers.creator
-  return (
-    <ChatMock
-      currentUser={currentUser}
-      receiver={receiver}
-      messages={[
-        {
-          id: 'msg-1',
-          role: 'receiver',
-          content: 'Hey! Got a sec to look at the launch package?',
-        },
-        {
-          id: 'msg-2',
-          role: 'sender',
-          content: 'Yep, send it over.',
-        },
-        {
-          id: 'msg-3',
-          role: 'receiver',
-          content: 'Here is the hero shot for the page',
-        },
-        {
-          id: 'msg-4',
-          role: 'receiver',
-          content: (
-            <MessageAttachment.Image.Received
-              src={HERO_PHOTO}
-              alt="Hero shot"
-              filename="hero.jpg"
-            />
-          ),
-        },
-        {
-          id: 'msg-5',
-          role: 'receiver',
-          content: (
-            <MessageAttachment.Video.Received
-              src={VIDEO_SRC}
-              poster={VIDEO_POSTER}
-              mimeType="video/mp4"
-              filename="trailer.mp4"
-              text="And the rough trailer ↑"
-            />
-          ),
-        },
-        {
-          id: 'msg-6',
-          role: 'sender',
-          content: 'Looks great. Quick voice memo with notes ↓',
-        },
-        {
-          id: 'msg-7',
-          role: 'sender',
-          content: (
-            <MessageAttachment.Audio.Sent
-              src={AUDIO_SRC}
-              mimeType="audio/mpeg"
-              filename="notes.mp3"
-            />
-          ),
-        },
-        {
-          id: 'msg-8',
-          role: 'sender',
-          content: (
-            <MessageAttachment.Pdf.Sent
-              src={PDF_SRC}
-              filename="launch-checklist.pdf"
-              fileSize={142_336}
-              text="And the launch checklist for the dry run."
-            />
-          ),
-        },
-        {
-          id: 'msg-9',
-          role: 'receiver',
-          content: 'Got everything. Will sync back in the morning.',
-        },
-      ]}
-    />
-  )
-}
+export const ConversationWithMixedAttachments: StoryFn<ConversationStoryArgs> =
+  ({ currentUser }) => {
+    const isSenderTheCreator = currentUser.id === storyUsers.creator.id
+    const receiver = isSenderTheCreator ? storyUsers.visitor : storyUsers.creator
+    return (
+      <ChatMock
+        currentUser={currentUser}
+        receiver={receiver}
+        messages={[
+          {
+            id: 'msg-1',
+            role: 'receiver',
+            content: 'Hey! Got a sec to look at the launch package?',
+          },
+          {
+            id: 'msg-2',
+            role: 'sender',
+            content: 'Yep, send it over.',
+          },
+          {
+            id: 'msg-3',
+            role: 'receiver',
+            content: 'Here is the hero shot for the page',
+          },
+          {
+            id: 'msg-4',
+            role: 'receiver',
+            content: (
+              <MessageAttachment.Image.Received
+                src={HERO_PHOTO}
+                alt="Hero shot"
+                filename="hero.jpg"
+              />
+            ),
+          },
+          {
+            id: 'msg-5',
+            role: 'receiver',
+            content: (
+              <MessageAttachment.Video.Received
+                src={VIDEO_SRC}
+                poster={VIDEO_POSTER}
+                mimeType="video/mp4"
+                filename="trailer.mp4"
+                text="And the rough trailer ↑"
+              />
+            ),
+          },
+          {
+            id: 'msg-6',
+            role: 'sender',
+            content: 'Looks great. Quick voice memo with notes ↓',
+          },
+          {
+            id: 'msg-7',
+            role: 'sender',
+            content: (
+              <MessageAttachment.Audio.Sent
+                src={AUDIO_SRC}
+                mimeType="audio/mpeg"
+                filename="notes.mp3"
+              />
+            ),
+          },
+          {
+            id: 'msg-8',
+            role: 'sender',
+            content: (
+              <MessageAttachment.Pdf.Sent
+                src={PDF_SRC}
+                filename="launch-checklist.pdf"
+                fileSize={142_336}
+                text="And the launch checklist for the dry run."
+              />
+            ),
+          },
+          {
+            id: 'msg-9',
+            role: 'receiver',
+            content: 'Got everything. Will sync back in the morning.',
+          },
+        ]}
+      />
+    )
+  }
 
 /**
  * Multi-attachment message — audio + PDF.

package/src/components/CustomMessage/MessageVoteButtons.tsx

@@ -38,10 +38,7 @@ export const MessageVoteButtons: React.FC<MessageVoteButtonsProps> = ({
       aria-pressed={selected === 'down'}
       data-tooltip="Bad response"
     >
-      <ThumbsDownIcon
-        size={16}
-        weight={selected === 'down' ? 'fill' : 'regular'}
-      />
+      <ThumbsDownIcon size={16} weight={selected === 'down' ? 'fill' : 'regular'} />
     </button>
   </div>
 )

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

@@ -260,9 +260,10 @@ describe('SentMessageDeliveryStatus', () => {
     expect(screen.getAllByText('•')).toHaveLength(1)
     expect(button).not.toHaveTextContent('•')
     expect(name).toHaveClass('sent-message-broadcast-name')
-    expect(
-      button.querySelector('.sent-message-broadcast-badge')
-    ).toHaveAttribute('aria-hidden', 'true')
+    expect(button.querySelector('.sent-message-broadcast-badge')).toHaveAttribute(
+      'aria-hidden',
+      'true'
+    )
     expect(screen.getAllByTestId('sent-message-delivery-status')).toHaveLength(
       3
     )
@@ -289,11 +290,9 @@ describe('SentMessageDeliveryStatus', () => {
       />
     )
 
-    screen
-      .getByRole('button', {
-        name: 'View broadcast July 9th Class absentee',
-      })
-      .click()
+    screen.getByRole('button', {
+      name: 'View broadcast July 9th Class absentee',
+    }).click()
 
     expect(onBroadcastClick).toHaveBeenCalledWith({
       id: 'broadcast-1',
@@ -322,11 +321,9 @@ describe('SentMessageDeliveryStatus', () => {
       />
     )
 
-    screen
-      .getByRole('button', {
-        name: 'View broadcast Broadcast',
-      })
-      .click()
+    screen.getByRole('button', {
+      name: 'View broadcast Broadcast',
+    }).click()
 
     expect(onBroadcastClick).toHaveBeenCalledWith({
       id: 'broadcast-1',

package/src/components/CustomMessage/SentMessageDeliveryStatus.tsx

@@ -219,7 +219,10 @@ export const SentMessageDeliveryStatus = ({
     <span className="sent-message-status-row">
       {messageStatus}
       {isLatestRealMessage && (
-        <span className="sent-message-broadcast-separator" aria-hidden="true">
+        <span
+          className="sent-message-broadcast-separator"
+          aria-hidden="true"
+        >
           •
         </span>
       )}

package/src/components/CustomMessage/StreamAttachmentMessage.stories.tsx

@@ -28,10 +28,10 @@ import StreamAttachmentMessage from './StreamAttachmentMessage'
  * ancestry that Stream bubble chrome and the MES-1031 tails are scoped under.
  * ────────────────────────────────────────────────────────────────── */
 
-const Bubbles: React.FC<{
-  isMyMessage: boolean
-  children: React.ReactNode
-}> = ({ isMyMessage, children }) => (
+const Bubbles: React.FC<{ isMyMessage: boolean; children: React.ReactNode }> = ({
+  isMyMessage,
+  children,
+}) => (
   <div className="str-chat mx-auto max-w-2xl p-12">
     {/* Tail CSS is scoped to `.str-chat__li--single|--bottom`; bubble surface
         styles need `.str-chat__message--me|other`. */}

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

@@ -9,8 +9,10 @@ import StreamAttachmentMessage, {
   linkCardPropsFromStreamAttachment,
 } from './StreamAttachmentMessage'
 
-const message = (attachments: Attachment[], text?: string): LocalMessage =>
-  ({ attachments, text }) as LocalMessage
+const message = (
+  attachments: Attachment[],
+  text?: string
+): LocalMessage => ({ attachments, text }) as LocalMessage
 
 describe('linkCardPropsFromStreamAttachment', () => {
   it('uses the featured layout when a thumbnail is present', () => {
@@ -97,10 +99,9 @@ describe('StreamAttachmentMessage', () => {
       />
     )
 
-    expect(screen.getByRole('link', { name: /my linktree/i })).toHaveAttribute(
-      'href',
-      'https://linktr.ee/someone'
-    )
+    expect(
+      screen.getByRole('link', { name: /my linktree/i })
+    ).toHaveAttribute('href', 'https://linktr.ee/someone')
     expect(screen.queryByText('https://linktr.ee/someone !')).toBeNull()
   })
 

package/src/components/CustomMessage/context.tsx

@@ -1,9 +1,6 @@
 import { createContext, useContext } from 'react'
 
-import {
-  defaultLockedAttachmentContextValue,
-  type LockedAttachmentContextValue,
-} from './LockedAttachment/types'
+import { defaultLockedAttachmentContextValue, type LockedAttachmentContextValue } from './LockedAttachment/types'
 
 export interface CustomMessageRegistry {
   LockedAttachment: LockedAttachmentContextValue
@@ -17,9 +14,7 @@ const CustomMessageContext = createContext<Partial<CustomMessageRegistry>>({})
 
 export const CustomMessageProvider = CustomMessageContext.Provider
 
-export function useCustomMessage<K extends keyof CustomMessageRegistry>(
-  key: K
-): CustomMessageRegistry[K] {
+export function useCustomMessage<K extends keyof CustomMessageRegistry>(key: K): CustomMessageRegistry[K] {
   const ctx = useContext(CustomMessageContext)
   return (ctx[key] ?? customMessageDefaults[key]) as CustomMessageRegistry[K]
 }

package/src/components/CustomMessage/index.tsx

@@ -307,7 +307,10 @@ const CustomMessageWithContext = (props: CustomMessageWithContextProps) => {
               <div className="flex items-center gap-2">
                 {isMine && MessageActions && <MessageActions />}
                 {isMine ? (
-                  <LockedAttachment {...sharedLockedTextProps} isMine={true} />
+                  <LockedAttachment
+                    {...sharedLockedTextProps}
+                    isMine={true}
+                  />
                 ) : (
                   <LockedAttachment
                     {...sharedLockedTextProps}

package/src/components/CustomMessageInput/CustomMessageInput.stories.tsx

@@ -85,20 +85,11 @@ type WrapperProps = {
 }
 
 const Wrapper: React.FC<WrapperProps> = (props) => {
-  const {
-    frozen,
-    renderActions,
-    sendButton,
-    attachmentPreviewList,
-    renderFooter,
-    surfaceHeight,
-  } = props
+  const { frozen, renderActions, sendButton, attachmentPreviewList, renderFooter, surfaceHeight } = props
 
   const [client] = React.useState(() => createMockStreamChatClient(mockUser))
 
-  const [channel, setChannel] = React.useState<ReturnType<
-    StreamChat['channel']
-  > | null>(null)
+  const [channel, setChannel] = React.useState<ReturnType<StreamChat['channel']> | null>(null)
 
   useEffect(() => {
     createMockChannel(client, { frozen }).then(setChannel)
@@ -111,9 +102,7 @@ const Wrapper: React.FC<WrapperProps> = (props) => {
       <Channel
         channel={channel}
         {...(sendButton ? { SendButton: sendButton } : {})}
-        {...(attachmentPreviewList
-          ? { AttachmentPreviewList: attachmentPreviewList }
-          : {})}
+        {...(attachmentPreviewList ? { AttachmentPreviewList: attachmentPreviewList } : {})}
       >
         <div
           className="bg-white"
@@ -132,10 +121,7 @@ const Wrapper: React.FC<WrapperProps> = (props) => {
             } as React.CSSProperties
           }
         >
-          <CustomMessageInput
-            renderActions={renderActions}
-            renderFooter={renderFooter}
-          />
+          <CustomMessageInput renderActions={renderActions} renderFooter={renderFooter} />
         </div>
       </Channel>
     </Chat>
@@ -181,9 +167,7 @@ Frozen.parameters = {
   },
 }
 
-export const WithCustomActionButton: StoryFn<WrapperProps> = (args) => (
-  <Wrapper {...args} />
-)
+export const WithCustomActionButton: StoryFn<WrapperProps> = (args) => <Wrapper {...args} />
 WithCustomActionButton.args = {
   renderActions: () => (
     <button
@@ -223,9 +207,7 @@ const PurpleMediaSendButton: React.FC<SendButtonProps> = (props) => {
   )
 }
 
-export const WithCustomSendButton: StoryFn<WrapperProps> = (args) => (
-  <Wrapper {...args} />
-)
+export const WithCustomSendButton: StoryFn<WrapperProps> = (args) => <Wrapper {...args} />
 WithCustomSendButton.args = { sendButton: PurpleMediaSendButton }
 WithCustomSendButton.parameters = {
   docs: {
@@ -236,9 +218,7 @@ WithCustomSendButton.parameters = {
   },
 }
 
-export const WithAttachments: StoryFn<WrapperProps> = (args) => (
-  <Wrapper {...args} />
-)
+export const WithAttachments: StoryFn<WrapperProps> = (args) => <Wrapper {...args} />
 WithAttachments.args = {
   attachmentPreviewList: () => (
     <div className="relative size-20 shrink-0 overflow-hidden rounded-2xl border border-black/8">
@@ -269,9 +249,9 @@ WithAttachments.parameters = {
   },
 }
 
-export const WithStagedLinkPreviewUnderKeyboard: StoryFn<WrapperProps> = (
-  args
-) => <Wrapper {...args} />
+export const WithStagedLinkPreviewUnderKeyboard: StoryFn<WrapperProps> = (args) => (
+  <Wrapper {...args} />
+)
 WithStagedLinkPreviewUnderKeyboard.args = {
   // Roughly a 393x852 phone with the soft keyboard up, so the 250px staged card
   // alone outgrows the composer's cap (half of this) and the card scrolls.
@@ -294,9 +274,7 @@ WithStagedLinkPreviewUnderKeyboard.parameters = {
   },
 }
 
-export const WithPaidAttachment: StoryFn<WrapperProps> = (args) => (
-  <Wrapper {...args} />
-)
+export const WithPaidAttachment: StoryFn<WrapperProps> = (args) => <Wrapper {...args} />
 WithPaidAttachment.args = {
   attachmentPreviewList: () => (
     <LockedAttachment

package/src/components/CustomMessageInput/CustomMessageInput.test.tsx

@@ -375,9 +375,9 @@ describe('CustomMessageInput', () => {
       // Nothing inside may shrink, or the previews get cropped to make room for
       // the textarea instead of scrolling with it.
       expect(card).not.toHaveClass('min-h-0')
-      expect(
-        card.querySelector('.messaging-composer-previews')
-      ).not.toHaveClass('min-h-0')
+      expect(card.querySelector('.messaging-composer-previews')).not.toHaveClass(
+        'min-h-0'
+      )
       expect(card.querySelector('.messaging-composer-row')).not.toHaveClass(
         'shrink-0'
       )

package/src/components/CustomSystemMessage/CustomSystemMessage.test.tsx

@@ -51,13 +51,16 @@ describe('CustomSystemMessage', () => {
   it.each([
     { metadata: {}, text: 'Unknown system message' },
     { text: 'Absent system type' },
-  ])('hides the timestamp for unknown or absent system types', (overrides) => {
-    const { container } = renderWithProviders(
-      <CustomSystemMessage {...createProps(overrides)} />
-    )
+  ])(
+    'hides the timestamp for unknown or absent system types',
+    (overrides) => {
+      const { container } = renderWithProviders(
+        <CustomSystemMessage {...createProps(overrides)} />
+      )
 
-    expect(container.querySelector('time')).not.toBeInTheDocument()
-  })
+      expect(container.querySelector('time')).not.toBeInTheDocument()
+    }
+  )
 
   it('hides the timestamp for legacy dm-agent messages without a custom_type', () => {
     const { container } = renderWithProviders(

package/src/components/CustomTypingIndicator/CustomTypingIndicator.stories.tsx

@@ -38,10 +38,7 @@ const defaultTyping: Record<string, Event> = {
   } as Event,
 }
 
-type ListenerMap = Record<
-  string,
-  (event: { ai_state: string; cid: string }) => void
->
+type ListenerMap = Record<string, (event: { ai_state: string; cid: string }) => void>
 
 const createMockChannel = ({ aiState }: { aiState?: string }) => {
   const listeners: ListenerMap = {}

package/src/components/IconButton/index.tsx

@@ -1,36 +1,32 @@
-import classNames from 'classnames'
-import React from 'react'
+import classNames from "classnames";
+import React from "react";
 
-interface IconButtonProps extends Omit<
-  React.ButtonHTMLAttributes<HTMLButtonElement>,
-  'type' | 'children'
-> {
-  label: string
-  children: React.ReactNode
-  className?: string
+interface IconButtonProps
+  extends Omit<
+    React.ButtonHTMLAttributes<HTMLButtonElement>,
+    "type" | "children"
+  > {
+  label: string;
+  children: React.ReactNode;
+  className?: string;
 }
 
-export function IconButton({
-  label,
-  className,
-  children,
-  ...rest
-}: IconButtonProps) {
+export function IconButton({ label, className, children, ...rest }: IconButtonProps) {
   return (
     <button
       type="button"
       className={classNames(
-        'inline-flex items-center justify-center rounded-full transition-colors focus-ring p-2',
+        "inline-flex items-center justify-center rounded-full transition-colors focus-ring p-2",
         {
-          'cursor-not-allowed opacity-50': rest.disabled,
-          'hover:bg-sand': !rest.disabled,
+          "cursor-not-allowed opacity-50": rest.disabled,
+          "hover:bg-sand": !rest.disabled,
         },
-        className
+        className,
       )}
       {...rest}
     >
       <span className="sr-only">{label}</span>
       {children}
     </button>
-  )
-}
+  );
+}

package/src/components/LinkAttachment/LinkAttachment.test.tsx

@@ -60,10 +60,7 @@ describe('LinkAttachment.Received (link previews)', () => {
 
   it('truncates the description to a single line by default', async () => {
     renderWithProviders(
-      <LinkAttachment.Received
-        title="Official"
-        description="A longer body of prose that would wrap onto several lines"
-      />
+      <LinkAttachment.Received title="Official" description="A longer body of prose that would wrap onto several lines" />
     )
     const description = await screen.findByText(
       'A longer body of prose that would wrap onto several lines'

package/src/components/LinkAttachment/components/_shared/CardCta.tsx

@@ -32,10 +32,7 @@ type CtaEmphasis = NonNullable<LinkAttachmentCta['variant']>
 // component-library preset has no neutral button token (`primary` is brand
 // purple), and the host preset can't retheme arbitrary hex. Align the grey with
 // the Arbor secondary token when the shared design tokens land.
-const BUTTON_CLASS_BY_VARIANT: Record<
-  LinkAttachmentVariant,
-  Record<CtaEmphasis, string>
-> = {
+const BUTTON_CLASS_BY_VARIANT: Record<LinkAttachmentVariant, Record<CtaEmphasis, string>> = {
   dark: {
     primary: 'bg-white text-[#121110] hover:bg-white/90',
     secondary: 'bg-white/15 text-white hover:bg-white/25',

package/src/components/Loading/Loading.stories.tsx

@@ -15,8 +15,11 @@ const meta: Meta<ComponentProps> = {
 export default meta
 
 const Template: StoryFn<ComponentProps> = (args) => {
-  return <Loading {...args} className="w-10 h-10" />
+  return (
+      <Loading {...args} className='w-10 h-10' />
+  )
 }
 
 export const Default: StoryFn<ComponentProps> = Template.bind({})
 Default.args = {}
+

package/src/components/MediaMessage/MediaMessage.stories.tsx

@@ -169,7 +169,9 @@ export const Attachment: StoryFn = () => (
             <MediaMessage
               isMyMessage={false}
               message={base({
-                attachments: [attachment as MessageAttachment],
+                attachments: [
+                  attachment as MessageAttachment,
+                ],
               })}
             />
           </td>
@@ -184,7 +186,9 @@ export const Attachment: StoryFn = () => (
             <MediaMessage
               isMyMessage={true}
               message={base({
-                attachments: [attachment as MessageAttachment],
+                attachments: [
+                  attachment as MessageAttachment,
+                ],
               })}
             />
           </td>
@@ -207,7 +211,9 @@ export const Links: StoryFn = () => (
             <MediaMessage
               isMyMessage={false}
               message={base({
-                attachments: [attachment as MessageAttachment],
+                attachments: [
+                  attachment as MessageAttachment,
+                ],
               })}
             />
           </td>
@@ -222,7 +228,9 @@ export const Links: StoryFn = () => (
             <MediaMessage
               isMyMessage={true}
               message={base({
-                attachments: [attachment as MessageAttachment],
+                attachments: [
+                  attachment as MessageAttachment,
+                ],
               })}
             />
           </td>
@@ -245,7 +253,9 @@ export const Compound: StoryFn = () => (
           <td key={label} className="align-top">
             <MediaMessage.Visitor
               message={base({
-                attachments: [attachment as MessageAttachment],
+                attachments: [
+                  attachment as MessageAttachment,
+                ],
               })}
             />
           </td>
@@ -259,7 +269,9 @@ export const Compound: StoryFn = () => (
           <td key={label} className="align-top">
             <MediaMessage.Creator
               message={base({
-                attachments: [attachment as MessageAttachment],
+                attachments: [
+                  attachment as MessageAttachment,
+                ],
               })}
             />
           </td>