@linktr.ee/messaging-react 1.31.0 → 1.32.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@linktr.ee/messaging-react",
-  "version": "1.31.0",
+  "version": "1.32.0",
   "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>
+  )
+}