@linktr.ee/messaging-react 3.37.0 → 3.37.1

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

@@ -88,7 +88,9 @@ 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>
@@ -603,91 +605,92 @@ 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,7 +38,10 @@ 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,10 +260,9 @@ 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
     )
@@ -290,9 +289,11 @@ 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',
@@ -321,9 +322,11 @@ 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,10 +219,7 @@ 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,10 +9,8 @@ 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', () => {
@@ -99,9 +97,10 @@ 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,6 +1,9 @@
 import { createContext, useContext } from 'react'
 
-import { defaultLockedAttachmentContextValue, type LockedAttachmentContextValue } from './LockedAttachment/types'
+import {
+  defaultLockedAttachmentContextValue,
+  type LockedAttachmentContextValue,
+} from './LockedAttachment/types'
 
 export interface CustomMessageRegistry {
   LockedAttachment: LockedAttachmentContextValue
@@ -14,7 +17,9 @@ 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,10 +307,7 @@ 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,11 +85,20 @@ 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)
@@ -102,7 +111,9 @@ const Wrapper: React.FC<WrapperProps> = (props) => {
       <Channel
         channel={channel}
         {...(sendButton ? { SendButton: sendButton } : {})}
-        {...(attachmentPreviewList ? { AttachmentPreviewList: attachmentPreviewList } : {})}
+        {...(attachmentPreviewList
+          ? { AttachmentPreviewList: attachmentPreviewList }
+          : {})}
       >
         <div
           className="bg-white"
@@ -121,7 +132,10 @@ const Wrapper: React.FC<WrapperProps> = (props) => {
             } as React.CSSProperties
           }
         >
-          <CustomMessageInput renderActions={renderActions} renderFooter={renderFooter} />
+          <CustomMessageInput
+            renderActions={renderActions}
+            renderFooter={renderFooter}
+          />
         </div>
       </Channel>
     </Chat>
@@ -167,7 +181,9 @@ Frozen.parameters = {
   },
 }
 
-export const WithCustomActionButton: StoryFn<WrapperProps> = (args) => <Wrapper {...args} />
+export const WithCustomActionButton: StoryFn<WrapperProps> = (args) => (
+  <Wrapper {...args} />
+)
 WithCustomActionButton.args = {
   renderActions: () => (
     <button
@@ -207,7 +223,9 @@ 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: {
@@ -218,7 +236,9 @@ 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">
@@ -249,9 +269,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.
@@ -274,7 +294,9 @@ 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,16 +51,13 @@ 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,7 +38,10 @@ 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,32 +1,36 @@
-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,7 +60,10 @@ 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,7 +32,10 @@ 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,11 +15,8 @@ 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,9 +169,7 @@ export const Attachment: StoryFn = () => (
             <MediaMessage
               isMyMessage={false}
               message={base({
-                attachments: [
-                  attachment as MessageAttachment,
-                ],
+                attachments: [attachment as MessageAttachment],
               })}
             />
           </td>
@@ -186,9 +184,7 @@ export const Attachment: StoryFn = () => (
             <MediaMessage
               isMyMessage={true}
               message={base({
-                attachments: [
-                  attachment as MessageAttachment,
-                ],
+                attachments: [attachment as MessageAttachment],
               })}
             />
           </td>
@@ -211,9 +207,7 @@ export const Links: StoryFn = () => (
             <MediaMessage
               isMyMessage={false}
               message={base({
-                attachments: [
-                  attachment as MessageAttachment,
-                ],
+                attachments: [attachment as MessageAttachment],
               })}
             />
           </td>
@@ -228,9 +222,7 @@ export const Links: StoryFn = () => (
             <MediaMessage
               isMyMessage={true}
               message={base({
-                attachments: [
-                  attachment as MessageAttachment,
-                ],
+                attachments: [attachment as MessageAttachment],
               })}
             />
           </td>
@@ -253,9 +245,7 @@ export const Compound: StoryFn = () => (
           <td key={label} className="align-top">
             <MediaMessage.Visitor
               message={base({
-                attachments: [
-                  attachment as MessageAttachment,
-                ],
+                attachments: [attachment as MessageAttachment],
               })}
             />
           </td>
@@ -269,9 +259,7 @@ export const Compound: StoryFn = () => (
           <td key={label} className="align-top">
             <MediaMessage.Creator
               message={base({
-                attachments: [
-                  attachment as MessageAttachment,
-                ],
+                attachments: [attachment as MessageAttachment],
               })}
             />
           </td>