@linktr.ee/messaging-react 1.31.0 → 1.32.1-rc-1777007852

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@linktr.ee/messaging-react",
-  "version": "1.31.0",
+  "version": "1.32.1-rc-1777007852",
   "description": "React messaging components built on messaging-core for web applications",
   "type": "module",
   "main": "dist/index.js",

package/src/components/ChannelView.stories.tsx

@@ -39,7 +39,8 @@ const mockUser = {
 const createMockChannel = async (
   client: StreamChat,
   hasMessages = true,
-  followerStatus?: string | boolean
+  followerStatus?: string | boolean,
+  isFrozen = false
 ) => {
   const participant = mockParticipants[0]
 
@@ -105,6 +106,7 @@ const createMockChannel = async (
   // Prepare channel data with optional follower status
   const channelData: Record<string, unknown> = {
     members: [mockUser.id, participant.id],
+    frozen: isFrozen,
   }
 
   // Add follower status if provided
@@ -155,10 +157,13 @@ const createMockChannel = async (
   return channel
 }
 
-type TemplateProps = ComponentProps & { followerStatus?: string | boolean }
+type TemplateProps = ComponentProps & {
+  followerStatus?: string | boolean
+  isFrozen?: boolean
+}
 
 const Template: StoryFn<TemplateProps> = (args) => {
-  const { followerStatus, ...channelViewProps } = args
+  const { followerStatus, isFrozen = false, ...channelViewProps } = args
   const [client] = React.useState(() => {
     const client = new StreamChat('mock-api-key', {
       allowServerSideConnect: true,
@@ -171,10 +176,12 @@ const Template: StoryFn<TemplateProps> = (args) => {
   const [channel, setChannel] = React.useState<ChannelType | null>(null)
 
   useEffect(() => {
-    createMockChannel(client, true, followerStatus).then((mockChannel) => {
-      setChannel(mockChannel)
-    })
-  }, [client, followerStatus])
+    createMockChannel(client, true, followerStatus, isFrozen).then(
+      (mockChannel) => {
+        setChannel(mockChannel)
+      }
+    )
+  }, [client, followerStatus, isFrozen])
 
   if (!channel) {
     return <div>Loading...</div>
@@ -524,3 +531,27 @@ NoFollowerStatus.parameters = {
     },
   },
 }
+
+export const FrozenChannel: StoryFn<TemplateProps> = Template.bind({})
+FrozenChannel.args = {
+  showBackButton: false,
+  isFrozen: true,
+  renderMessageInputActions: (channel) => (
+    <button
+      onClick={() => console.log('Custom action clicked', channel.id)}
+      className="p-2 hover:bg-sand rounded-lg"
+      aria-label="Attach file"
+      type="button"
+    >
+      📎
+    </button>
+  ),
+}
+FrozenChannel.parameters = {
+  docs: {
+    description: {
+      story:
+        'Channel view for a frozen conversation. The message composer renders in its disabled frozen state while the rest of the conversation remains readable.',
+    },
+  },
+}

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

@@ -0,0 +1,127 @@
+import React from 'react'
+import { describe, expect, it, vi } from 'vitest'
+
+import { renderWithProviders, screen } from '../../test/utils'
+
+import { CustomMessageInput } from '.'
+
+let mockChannelData: Record<string, unknown> = {}
+
+vi.mock('stream-chat-react', () => ({
+  MessageInput: ({
+    Input,
+  }: {
+    Input: React.ComponentType
+  }) => (
+    <div data-testid="stream-message-input">
+      <Input />
+    </div>
+  ),
+  SimpleAttachmentSelector: () => (
+    <div data-testid="simple-attachment-selector" />
+  ),
+  TextareaComposer: ({
+    maxRows: _maxRows,
+    ...props
+  }: React.TextareaHTMLAttributes<HTMLTextAreaElement> & { maxRows?: number }) => (
+    <textarea data-testid="textarea-composer" {...props} />
+  ),
+  AttachmentPreviewList: () => <div data-testid="attachment-preview-list" />,
+  QuotedMessagePreview: () => <div data-testid="quoted-message-preview" />,
+  useChannelStateContext: () => ({
+    channel: { data: mockChannelData },
+  }),
+  useMessageInputContext: () => ({
+    handleSubmit: vi.fn(),
+  }),
+  useMessageComposerHasSendableData: () => false,
+}))
+
+vi.mock('../CustomLinkPreviewList', () => ({
+  CustomLinkPreviewList: () => <div data-testid="custom-link-preview-list" />,
+}))
+
+describe('CustomMessageInput', () => {
+  it('renders the interactive message input when channel is not frozen', () => {
+    mockChannelData = {}
+
+    const { container } = renderWithProviders(<CustomMessageInput />)
+
+    const messageInput = container.firstElementChild
+    expect(messageInput).not.toHaveAttribute('aria-disabled')
+    expect(messageInput).not.toHaveAttribute('inert')
+    expect(screen.getByTestId('stream-message-input')).toBeInTheDocument()
+  })
+
+  it('renders the frozen message input when channel is frozen', () => {
+    mockChannelData = { frozen: true }
+
+    const { container } = renderWithProviders(<CustomMessageInput />)
+
+    const messageInput = container.firstElementChild
+    expect(messageInput).toHaveAttribute('aria-disabled', 'true')
+    expect(messageInput).toHaveAttribute('inert')
+    expect(screen.getByTestId('stream-message-input')).toBeInTheDocument()
+  })
+
+  it('makes the textarea read-only and disables send when channel is frozen', () => {
+    mockChannelData = { frozen: true }
+
+    renderWithProviders(<CustomMessageInput />)
+
+    const textarea = screen.getByTestId('textarea-composer')
+    expect(textarea).toHaveAttribute('aria-disabled', 'true')
+    expect(textarea).toHaveAttribute('readonly')
+    expect(textarea).toHaveAttribute('tabindex', '-1')
+    expect(textarea).not.toHaveAttribute('autofocus')
+
+    const sendButton = screen.getByRole('button', { name: /send/i })
+    expect(sendButton).toBeDisabled()
+  })
+
+  it('renders the existing attachment selector when channel is frozen', () => {
+    mockChannelData = { frozen: true }
+
+    renderWithProviders(<CustomMessageInput />)
+
+    expect(screen.getByTestId('simple-attachment-selector')).toBeInTheDocument()
+  })
+
+  it('renders adjacent actions inside the disabled container when frozen', () => {
+    mockChannelData = { frozen: true }
+
+    const { container } = renderWithProviders(
+      <CustomMessageInput
+        renderActions={() => (
+          <button data-testid="custom-action" type="button">
+            Action
+          </button>
+        )}
+      />
+    )
+
+    const messageInput = container.firstElementChild
+    const action = screen.getByTestId('custom-action')
+
+    expect(messageInput).toHaveAttribute('aria-disabled', 'true')
+    expect(messageInput?.contains(action)).toBe(true)
+  })
+
+  it('renders adjacent actions in the interactive container when not frozen', () => {
+    mockChannelData = {}
+
+    const { container } = renderWithProviders(
+      <CustomMessageInput
+        renderActions={() => (
+          <button data-testid="custom-action" type="button">
+            Action
+          </button>
+        )}
+      />
+    )
+
+    const messageInput = container.firstElementChild
+    expect(messageInput).not.toHaveAttribute('aria-disabled')
+    expect(screen.getByTestId('custom-action')).toBeInTheDocument()
+  })
+})

package/src/components/CustomMessageInput/index.tsx

@@ -6,6 +6,7 @@ import {
   QuotedMessagePreview,
   SimpleAttachmentSelector,
   TextareaComposer,
+  useChannelStateContext,
   useMessageComposerHasSendableData,
   useMessageInputContext,
 } from 'stream-chat-react'
@@ -13,8 +14,11 @@ import {
 import { CustomLinkPreviewList } from '../CustomLinkPreviewList'
 
 const CustomMessageInputInner: React.FC = () => {
+  const { channel } = useChannelStateContext()
+  const isFrozen = channel?.data?.frozen === true
   const { handleSubmit } = useMessageInputContext()
   const hasSendableData = useMessageComposerHasSendableData()
+  const isSendDisabled = isFrozen || !hasSendableData
 
   return (
     <>
@@ -28,20 +32,23 @@ const CustomMessageInputInner: React.FC = () => {
         <div className="flex">
           <div className="w-full ml-2 mr-4 self-center leading-[0]">
             <TextareaComposer
+              aria-disabled={isFrozen || undefined}
               className="w-full resize-none outline-none leading-6"
               // While this might usually be considered an anti-pattern, in most
               // cases, when a message thread is rendered, we want the input to
               // gain focus automatically.
               // eslint-disable-next-line jsx-a11y/no-autofocus
-              autoFocus
+              autoFocus={!isFrozen}
               maxRows={4}
+              readOnly={isFrozen}
+              tabIndex={isFrozen ? -1 : undefined}
             />
           </div>
           <button
             aria-label="Send"
             className="str-chat__send-button mt-auto flex justify-center items-center flex-shrink-0 rounded-full size-8 bg-[#121110] disabled:bg-[#F1F0EE] disabled:text-black/20 text-white focus-ring"
             data-testid="send-button"
-            disabled={!hasSendableData}
+            disabled={isSendDisabled}
             onClick={handleSubmit}
             type="button"
           >
@@ -59,9 +66,19 @@ export interface CustomMessageInputProps {
 
 export const CustomMessageInput: React.FC<CustomMessageInputProps> = ({
   renderActions,
-}) => (
-  <div className="message-input flex items-center gap-2 p-4">
-    {renderActions && renderActions?.()}
-    <MessageInput Input={CustomMessageInputInner} />
-  </div>
-)
+}) => {
+  const { channel } = useChannelStateContext()
+  const isFrozen = channel?.data?.frozen === true
+
+  return (
+    <div
+      // @ts-expect-error Only React 19 onwards has `inert` in its types.
+      inert={isFrozen ? '' : undefined}
+      aria-disabled={isFrozen || undefined}
+      className="message-input flex items-center gap-2 p-4 aria-disabled:opacity-40"
+    >
+      {renderActions?.()}
+      <MessageInput Input={CustomMessageInputInner} />
+    </div>
+  )
+}

package/src/components/LockedAttachment/LockedAttachment.stories.tsx

@@ -1,17 +1,21 @@
 import type { Meta, StoryFn } from '@storybook/react'
-import React from 'react'
+import React, { useState } from 'react'
 
 import LockedAttachment from '.'
 
 const VIDEO_THUMBNAIL_BLURRED = '/video-thumbnail-blurred.jpg'
+const VIDEO_THUMBNAIL = '/video-thumbnail.jpg'
 const VIDEO_SOURCE = '/video-source.mp4'
 
 const IMAGE_THUMBNAIL_BLURRED = '/image-thumbnail-blurred.jpg'
+const IMAGE_THUMBNAIL = '/image-thumbnail.jpg'
 const IMAGE_SOURCE = '/image-source.jpg'
 
+const DOCUMENT_THUMBNAIL_BLURRED = '/document-thumbnail-blurred.jpg'
 const DOCUMENT_THUMBNAIL = '/document-thumbnail.jpg'
 const DOCUMENT_SOURCE = '/document-source.pdf'
 
+const AUDIO_THUMBNAIL_BLURRED = '/audio-thumbnail-blurred.jpg'
 const AUDIO_THUMBNAIL = '/audio-thumbnail.jpg'
 const AUDIO_SOURCE = '/audio-source.mp3'
 
@@ -28,6 +32,7 @@ const VARIANTS = [
     mimeType: 'video/mp4',
     detail: '1:20',
     thumbnailUrl: VIDEO_THUMBNAIL_BLURRED,
+    thumbnailUnlockedUrl: VIDEO_THUMBNAIL,
     sourceUrl: VIDEO_SOURCE,
   },
   {
@@ -35,7 +40,8 @@ const VARIANTS = [
     title: 'Morning Meditation',
     mimeType: 'audio/mpeg',
     detail: '4:35',
-    thumbnailUrl: AUDIO_THUMBNAIL,
+    thumbnailUrl: AUDIO_THUMBNAIL_BLURRED,
+    thumbnailUnlockedUrl: AUDIO_THUMBNAIL,
     sourceUrl: AUDIO_SOURCE,
   },
   {
@@ -44,6 +50,7 @@ const VARIANTS = [
     mimeType: 'image/jpeg',
     detail: '3.2 MB',
     thumbnailUrl: IMAGE_THUMBNAIL_BLURRED,
+    thumbnailUnlockedUrl: IMAGE_THUMBNAIL,
     sourceUrl: IMAGE_SOURCE,
   },
   {
@@ -51,15 +58,8 @@ const VARIANTS = [
     title: 'Strength Training Guide',
     mimeType: 'application/zip',
     detail: '14 files',
-    thumbnailUrl: DOCUMENT_THUMBNAIL,
-    sourceUrl: DOCUMENT_SOURCE,
-  },
-  {
-    label: 'Unknown',
-    title: 'Unknown Attachment',
-    mimeType: 'application/octet-stream',
-    detail: undefined,
-    thumbnailUrl: undefined,
+    thumbnailUrl: DOCUMENT_THUMBNAIL_BLURRED,
+    thumbnailUnlockedUrl: DOCUMENT_THUMBNAIL,
     sourceUrl: DOCUMENT_SOURCE,
   },
 ]
@@ -70,7 +70,9 @@ const Table = ({ children }: { children: React.ReactNode }) => (
   </div>
 )
 
-const TableHead = ({ variants, }: {
+const TableHead = ({
+  variants,
+}: {
   variants: { label: string; mimeType: string }[]
 }) => (
   <thead>
@@ -88,69 +90,105 @@ const TableHead = ({ variants, }: {
   </thead>
 )
 
-export const Visitor: StoryFn = () => (
-  <Table>
-    <TableHead variants={VARIANTS} />
-    <tbody>
-      <tr>
-        <td className="text-xs text-right font-medium text-black/40 pr-4 align-top pt-2">
-          Locked
-        </td>
-        {VARIANTS.map(({ title, mimeType, detail, thumbnailUrl }) => (
-          <td key={mimeType} className="align-top">
-            <LockedAttachment.Visitor
-              title={title}
-              amountText="AU$9.99"
-              thumbnailUrl={thumbnailUrl}
-              mimeType={mimeType}
-              detail={detail}
-              onUnlockClick={() => {}}
-              onDownloadClick={() => {}}
-            />
+export const Visitor: StoryFn = () => {
+  const [isPaid, setPaid] = useState<string | undefined>()
+
+  return (
+    <Table>
+      <TableHead variants={VARIANTS} />
+      <tbody>
+        <tr>
+          <td className="text-xs text-right font-medium text-black/40 pr-4 align-top pt-2">
+            Locked
           </td>
-        ))}
-      </tr>
-      <tr>
-        <td className="text-xs text-right font-medium text-black/40 pr-4 align-top pt-2">
-          Purchased
-        </td>
-        {VARIANTS.map(({ title, mimeType, detail, thumbnailUrl }) => (
-          <td key={mimeType} className="align-top">
-            <LockedAttachment.Visitor
-              title={title}
-              amountText="AU$9.99"
-              thumbnailUrl={thumbnailUrl}
-              mimeType={mimeType}
-              detail={detail}
-              paymentStatus="paid"
-              onUnlockClick={() => {}}
-              onDownloadClick={() => {}}
-            />
+          {VARIANTS.map(
+            ({
+              title,
+              mimeType,
+              detail,
+              thumbnailUrl,
+              thumbnailUnlockedUrl,
+              sourceUrl,
+            }) => (
+              <td key={mimeType} className="align-top">
+                <LockedAttachment.Visitor
+                  title={title}
+                  thumbnailUrl={thumbnailUrl}
+                  mimeType={mimeType}
+                  detail={detail}
+                  paymentStatus={isPaid === mimeType ? 'paid' : undefined}
+                  amountText="AU$9.99"
+                  onUnlockClick={() => setPaid(mimeType)}
+                  onDownloadClick={() => alert('Download clicked')}
+                  onFetchSource={async () => {
+                    return Promise.resolve({
+                      sourceUrl: sourceUrl,
+                      thumbnailUrl: thumbnailUnlockedUrl,
+                    })
+                  }}
+                />
+              </td>
+            )
+          )}
+        </tr>
+        <tr>
+          <td className="text-xs text-right font-medium text-black/40 pr-4 align-top pt-2">
+            Purchased
           </td>
-        ))}
-      </tr>
-      <tr>
-        <td className="text-xs text-right font-medium text-black/40 pr-4 align-top pt-2">
-          Unlocked
-        </td>
-        {VARIANTS.map(({ title, mimeType, detail, thumbnailUrl, sourceUrl }) => (
-          <td key={mimeType} className="align-top">
-            <LockedAttachment.Visitor
-              title={title}
-              thumbnailUrl={thumbnailUrl}
-              mimeType={mimeType}
-              detail={detail}
-              amountText="AU$9.99"
-              paymentStatus="paid"
-              onUnlockClick={() => Promise.resolve({ sourceUrl })}
-              onDownloadClick={() => {}}
-            />
+          {VARIANTS.map(({ title, mimeType, detail, thumbnailUrl }) => (
+            <td key={mimeType} className="align-top">
+              <LockedAttachment.Visitor
+                title={title}
+                thumbnailUrl={thumbnailUrl}
+                mimeType={mimeType}
+                detail={detail}
+                amountText="AU$9.99"
+                paymentStatus="paid"
+                onUnlockClick={() => alert('Unlock clicked')}
+                onDownloadClick={() => alert('Download clicked')}
+              />
+            </td>
+          ))}
+        </tr>
+        <tr>
+          <td className="text-xs text-right font-medium text-black/40 pr-4 align-top pt-2">
+            Unlocked
           </td>
-        ))}
-      </tr>
-    </tbody>
-  </Table>
-)
+          {VARIANTS.map(
+            ({
+              title,
+              mimeType,
+              detail,
+              thumbnailUrl,
+              thumbnailUnlockedUrl,
+              sourceUrl,
+            }) => (
+              <td key={mimeType} className="align-top">
+                <LockedAttachment.Visitor
+                  title={title}
+                  thumbnailUrl={thumbnailUrl}
+                  mimeType={mimeType}
+                  detail={detail}
+                  amountText="AU$9.99"
+                  paymentStatus="paid"
+                  onUnlockClick={() => console.log('Unlock clicked')}
+                  onDownloadClick={() => alert('Download clicked')}
+                  onFetchSource={async () => {
+                    await new Promise((resolve) => setTimeout(resolve, 500))
+                    return Promise.resolve({
+                      sourceUrl: sourceUrl,
+                      thumbnailUrl: thumbnailUnlockedUrl,
+                    })
+                  }}
+                />
+              </td>
+            )
+          )}
+        </tr>
+      </tbody>
+    </Table>
+  )
+}
 
 export const Creator: StoryFn = () => (
   <Table>
@@ -160,30 +198,39 @@ export const Creator: StoryFn = () => (
         <td className="text-xs text-right font-medium text-black/40 pr-4 align-top pt-2">
           Preview
         </td>
-        {VARIANTS.map(({ mimeType, detail, thumbnailUrl, sourceUrl }) => (
-          <td key={mimeType} className="align-top">
-            <LockedAttachment.Creator
-              isPreview={true}
-              thumbnailUrl={thumbnailUrl}
-              sourceUrl={sourceUrl}
-              mimeType={mimeType}
-              detail={detail}
-              placeholderAmountText="A$0.00"
-              onDismiss={undefined}
-            />
-          </td>
-        ))}
+        {VARIANTS.map(
+          ({
+            mimeType,
+            detail,
+            thumbnailUrl,
+            thumbnailUnlockedUrl,
+            sourceUrl,
+          }) => (
+            <td key={mimeType} className="align-top">
+              <LockedAttachment.Creator
+                placeholderTitle="Attachment title"
+                placeholderAmountText="AU$0.00"
+                thumbnailUrl={thumbnailUrl}
+                mimeType={mimeType}
+                detail={detail}
+                onPreviewClick={() => ({
+                  sourceUrl: sourceUrl,
+                  thumbnailUrl: thumbnailUnlockedUrl,
+                })}
+              />
+            </td>
+          )
+        )}
       </tr>
       <tr>
         <td className="text-xs text-right font-medium text-black/40 pr-4 align-top pt-2">
           Pending
         </td>
-        {VARIANTS.map(({ title, mimeType, detail, thumbnailUrl, sourceUrl }) => (
+        {VARIANTS.map(({ title, mimeType, detail, thumbnailUrl }) => (
           <td key={mimeType} className="align-top">
             <LockedAttachment.Creator
               title={title}
               thumbnailUrl={thumbnailUrl}
-              sourceUrl={sourceUrl}
               mimeType={mimeType}
               detail={detail}
               amountText="AU$9.99"
@@ -196,16 +243,14 @@ export const Creator: StoryFn = () => (
         <td className="text-xs text-right font-medium text-black/40 pr-4 align-top pt-2">
           Sent
         </td>
-        {VARIANTS.map(({ title, mimeType, detail, thumbnailUrl, sourceUrl }) => (
+        {VARIANTS.map(({ title, mimeType, detail, thumbnailUrl }) => (
           <td key={mimeType} className="align-top">
             <LockedAttachment.Creator
               title={title}
               thumbnailUrl={thumbnailUrl}
-              sourceUrl={sourceUrl}
               mimeType={mimeType}
               detail={detail}
               amountText="AU$9.99"
-              onDismiss={undefined}
             />
           </td>
         ))}
@@ -214,17 +259,15 @@ export const Creator: StoryFn = () => (
         <td className="text-xs text-right font-medium text-black/40 pr-4 align-top pt-2">
           Sold
         </td>
-        {VARIANTS.map(({ title, mimeType, detail, thumbnailUrl, sourceUrl }) => (
+        {VARIANTS.map(({ title, mimeType, detail, thumbnailUrl }) => (
           <td key={mimeType} className="align-top">
             <LockedAttachment.Creator
               title={title}
               thumbnailUrl={thumbnailUrl}
-              sourceUrl={sourceUrl}
               mimeType={mimeType}
               detail={detail}
               amountText="AU$9.99"
               paymentStatus="paid"
-              onDismiss={undefined}
             />
           </td>
         ))}