@linktr.ee/messaging-react 1.32.1 → 1.33.0-rc-1777272812

package/src/components/ChannelView.test.tsx

@@ -7,17 +7,17 @@ import { renderWithProviders, screen } from '../test/utils'
 import { ChannelView } from './ChannelView'
 
 let activeChannel: unknown
+let activeChannelProps: Record<string, unknown> = {}
 
 vi.mock('stream-chat-react', () => ({
-  Channel: ({
-    channel,
-    children,
-  }: {
+  Channel: (props: {
     channel: unknown
     children: React.ReactNode
+    [key: string]: unknown
   }) => {
-    activeChannel = channel
-    return <div data-testid="channel">{children}</div>
+    activeChannel = props.channel
+    activeChannelProps = props
+    return <div data-testid="channel">{props.children}</div>
   },
   Window: ({ children }: { children: React.ReactNode }) => (
     <div data-testid="window">{children}</div>
@@ -96,6 +96,7 @@ const createChannel = () =>
 describe('ChannelView', () => {
   beforeEach(() => {
     activeChannel = undefined
+    activeChannelProps = {}
     avatarRenderCalls.length = 0
     mockIsStarred = false
   })
@@ -193,4 +194,22 @@ describe('ChannelView', () => {
     )
     expect(renderMessageInputActions).toHaveBeenCalledWith(channel)
   })
+
+  it('passes sendButton to Channel as SendButton when provided', () => {
+    const CustomSendButton = () => (
+      <button type="button" aria-label="Custom Send" />
+    )
+
+    renderWithProviders(
+      <ChannelView channel={createChannel()} sendButton={CustomSendButton} />
+    )
+
+    expect(activeChannelProps.SendButton).toBe(CustomSendButton)
+  })
+
+  it('does not pass SendButton to Channel when sendButton is not provided', () => {
+    renderWithProviders(<ChannelView channel={createChannel()} />)
+
+    expect(activeChannelProps.SendButton).toBeUndefined()
+  })
 })

package/src/components/ChannelView.tsx

@@ -376,6 +376,7 @@ export const ChannelView = React.memo<ChannelViewProps>(
     customProfileContent,
     customChannelActions,
     renderMessage,
+    sendButton,
   }) => {
     // Custom send message handler that:
     // 1. Applies messageMetadata if provided
@@ -435,6 +436,7 @@ export const ChannelView = React.memo<ChannelViewProps>(
           LoadingIndicator={LoadingState}
           DateSeparator={CustomDateSeparator}
           doSendMessageRequest={doSendMessageRequest}
+          {...(sendButton ? { SendButton: sendButton } : {})}
         >
           <ChannelViewInner
             onBack={onBack}

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

@@ -0,0 +1,180 @@
+import type { Meta, StoryFn } from '@storybook/react'
+import React, { useEffect } from 'react'
+import { QueryChannelAPIResponse, StreamChat } from 'stream-chat'
+import { Channel, Chat } from 'stream-chat-react'
+
+import { CustomMessageInput } from '.'
+
+// ---------------------------------------------------------------------------
+// Setup helpers (mirrors ChannelView.stories.tsx)
+// ---------------------------------------------------------------------------
+
+const mockUser = {
+  id: 'storybook-user',
+  name: 'Storybook User',
+  image: 'https://i.pravatar.cc/150?img=1',
+}
+
+const mockParticipant = {
+  id: 'participant-1',
+  name: 'Jane Creator',
+  image: 'https://i.pravatar.cc/150?img=5',
+}
+
+const createMockChannel = async (
+  client: StreamChat,
+  opts: { frozen?: boolean } = {}
+) => {
+  const channelData = { members: [mockUser.id, mockParticipant.id], frozen: opts.frozen ?? false }
+  const ch = client.channel('messaging', 'storybook-cmi-channel', channelData)
+
+  ch.watch = async () => {
+    ch.state.members = {
+      [mockUser.id]: { user: mockUser, user_id: mockUser.id },
+      [mockParticipant.id]: { user: mockParticipant, user_id: mockParticipant.id },
+    }
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    ;(ch as any)._data = channelData
+    return { channel: channelData, members: [], messages: [], watchers: [], pinned_messages: [], duration: '0ms' } as unknown as QueryChannelAPIResponse
+  }
+
+  try { await ch.watch() } catch (_) { /* mock */ }
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  ;(ch as any)._data = channelData
+  return ch
+}
+
+// ---------------------------------------------------------------------------
+// Story wrapper — mounts the input inside a real Stream Channel context
+// ---------------------------------------------------------------------------
+
+type WrapperProps = {
+  frozen?: boolean
+  sendButton?: React.ComponentType<{
+    sendMessage: (...args: unknown[]) => unknown
+    disabled?: boolean
+    [key: string]: unknown
+  }>
+  renderActions?: () => React.ReactNode
+}
+
+const Wrapper: React.FC<WrapperProps> = ({ frozen, sendButton, renderActions }) => {
+  const [client] = React.useState(() => {
+    const c = new StreamChat('mock-api-key', { allowServerSideConnect: true })
+    c.userID = mockUser.id
+    c.user = mockUser
+    return c
+  })
+
+  const [channel, setChannel] = React.useState<ReturnType<StreamChat['channel']> | null>(null)
+
+  useEffect(() => {
+    createMockChannel(client, { frozen }).then(setChannel)
+  }, [client, frozen])
+
+  if (!channel) return <div className="p-4 text-sm text-gray-400">Loading…</div>
+
+  return (
+    <Chat client={client}>
+      <Channel
+        channel={channel}
+        {...(sendButton ? { SendButton: sendButton } : {})}
+      >
+        <div className="bg-white" style={{ minWidth: 360 }}>
+          <CustomMessageInput renderActions={renderActions} />
+        </div>
+      </Channel>
+    </Chat>
+  )
+}
+
+// ---------------------------------------------------------------------------
+// Meta
+// ---------------------------------------------------------------------------
+
+const meta: Meta<WrapperProps> = {
+  title: 'CustomMessageInput',
+  component: CustomMessageInput,
+  parameters: {
+    layout: 'centered',
+  },
+}
+export default meta
+
+// ---------------------------------------------------------------------------
+// Stories
+// ---------------------------------------------------------------------------
+
+export const Default: StoryFn<WrapperProps> = (args) => <Wrapper {...args} />
+Default.args = {}
+Default.parameters = {
+  docs: {
+    description: {
+      story:
+        'Default message input. The send button (arrow) is disabled until the user types text — `useMessageComposerHasSendableData` controls this.',
+    },
+  },
+}
+
+export const Frozen: StoryFn<WrapperProps> = (args) => <Wrapper {...args} />
+Frozen.args = { frozen: true }
+Frozen.parameters = {
+  docs: {
+    description: {
+      story:
+        'Frozen channel state: the entire input area fades out (`aria-disabled`, `inert`), the textarea becomes read-only, and the send button is disabled.',
+    },
+  },
+}
+
+export const WithCustomActionButton: StoryFn<WrapperProps> = (args) => <Wrapper {...args} />
+WithCustomActionButton.args = {
+  renderActions: () => (
+    <button
+      type="button"
+      aria-label="Attach media"
+      className="flex items-center justify-center size-10 rounded-full bg-[#F1F0EE] hover:bg-[#E5E4E1] shrink-0"
+      onClick={() => console.log('media picker')}
+    >
+      📷
+    </button>
+  ),
+}
+WithCustomActionButton.parameters = {
+  docs: {
+    description: {
+      story:
+        'Shows how `renderActions` injects extra controls (e.g. a media picker button) to the left of the message bubble.',
+    },
+  },
+}
+
+/** A custom send button that turns purple to signal a media attachment is staged. */
+const PurpleMediaSendButton: React.FC<{
+  sendMessage: (...args: unknown[]) => unknown
+  disabled?: boolean
+  [key: string]: unknown
+}> = ({ sendMessage, disabled, ...rest }) => (
+  <button
+    {...rest}
+    type="button"
+    aria-label="Send"
+    disabled={disabled}
+    onClick={() => sendMessage()}
+    className="str-chat__send-button mt-auto flex items-center justify-center shrink-0 rounded-full size-8 bg-[#6D28D9] disabled:bg-[#F1F0EE] disabled:text-black/20 text-white"
+    style={{ fontSize: 15 }}
+  >
+    🚀
+  </button>
+)
+
+export const WithCustomSendButton: StoryFn<WrapperProps> = (args) => <Wrapper {...args} />
+WithCustomSendButton.args = { sendButton: PurpleMediaSendButton }
+WithCustomSendButton.parameters = {
+  docs: {
+    description: {
+      story:
+        'Passes a custom `SendButton` via `Channel`\'s `SendButton` prop (which is how `ChannelView`\'s `sendButton` prop surfaces it). `CustomMessageInput` reads the button from `useComponentContext` and falls back to the default when none is provided.',
+    },
+  },
+}

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

@@ -1,5 +1,5 @@
 import React from 'react'
-import { describe, expect, it, vi } from 'vitest'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
 
 import { renderWithProviders, screen } from '../../test/utils'
 
@@ -7,6 +7,21 @@ import { CustomMessageInput } from '.'
 
 let mockChannelData: Record<string, unknown> = {}
 
+let mockContextSendButton:
+  | React.ComponentType<{
+      sendMessage: (...args: unknown[]) => unknown
+      disabled?: boolean
+    }>
+  | undefined = ({ sendMessage, disabled }) => (
+  <button
+    type="button"
+    data-testid="send-button"
+    aria-label="Send"
+    disabled={disabled}
+    onClick={() => sendMessage()}
+  />
+)
+
 vi.mock('stream-chat-react', () => ({
   MessageInput: ({
     Input,
@@ -35,6 +50,9 @@ vi.mock('stream-chat-react', () => ({
     handleSubmit: vi.fn(),
   }),
   useMessageComposerHasSendableData: () => false,
+  useComponentContext: () => ({
+    SendButton: mockContextSendButton,
+  }),
 }))
 
 vi.mock('../CustomLinkPreviewList', () => ({
@@ -42,6 +60,18 @@ vi.mock('../CustomLinkPreviewList', () => ({
 }))
 
 describe('CustomMessageInput', () => {
+  beforeEach(() => {
+    mockContextSendButton = ({ sendMessage, disabled }) => (
+      <button
+        type="button"
+        data-testid="send-button"
+        aria-label="Send"
+        disabled={disabled}
+        onClick={() => sendMessage()}
+      />
+    )
+  })
+
   it('renders the interactive message input when channel is not frozen', () => {
     mockChannelData = {}
 
@@ -124,4 +154,36 @@ describe('CustomMessageInput', () => {
     expect(messageInput).not.toHaveAttribute('aria-disabled')
     expect(screen.getByTestId('custom-action')).toBeInTheDocument()
   })
+
+  it('renders the custom SendButton from component context', () => {
+    mockChannelData = {}
+    mockContextSendButton = () => (
+      <button type="button" data-testid="custom-context-send-button" aria-label="Custom Send" />
+    )
+
+    renderWithProviders(<CustomMessageInput />)
+
+    expect(screen.getByTestId('custom-context-send-button')).toBeInTheDocument()
+    expect(screen.queryByTestId('default-send-button')).not.toBeInTheDocument()
+  })
+
+  it('falls back to the arrow send button when component context provides none', () => {
+    mockChannelData = {}
+    mockContextSendButton = undefined
+
+    renderWithProviders(<CustomMessageInput />)
+
+    expect(screen.getByTestId('send-button')).toBeInTheDocument()
+    expect(screen.queryByTestId('custom-context-send-button')).not.toBeInTheDocument()
+  })
+
+  it('preserves disabled state on the send button when there is no sendable data', () => {
+    mockChannelData = {}
+
+    renderWithProviders(<CustomMessageInput />)
+
+    const sendButton = screen.getByRole('button', { name: /send/i })
+    // useMessageComposerHasSendableData is mocked to return false
+    expect(sendButton).toBeDisabled()
+  })
 })

package/src/components/CustomMessageInput/index.tsx

@@ -7,16 +7,37 @@ import {
   SimpleAttachmentSelector,
   TextareaComposer,
   useChannelStateContext,
+  useComponentContext,
   useMessageComposerHasSendableData,
   useMessageInputContext,
 } from 'stream-chat-react'
 
 import { CustomLinkPreviewList } from '../CustomLinkPreviewList'
 
+const DefaultSendButton: React.FC<{
+  sendMessage: () => void
+  disabled?: boolean
+  [key: string]: unknown
+}> = ({ sendMessage, disabled, ...rest }) => (
+  <button
+    {...rest}
+    type="button"
+    aria-label="Send"
+    disabled={disabled}
+    onClick={sendMessage}
+  >
+    <ArrowUpIcon weight="bold" className="size-4" />
+  </button>
+)
+
 const CustomMessageInputInner: React.FC = () => {
   const { channel } = useChannelStateContext()
   const isFrozen = channel?.data?.frozen === true
   const { handleSubmit } = useMessageInputContext()
+  const { SendButton: SendButtonFromContext } = useComponentContext(
+    'CustomMessageInput',
+  )
+  const SendButton = SendButtonFromContext ?? DefaultSendButton
   const hasSendableData = useMessageComposerHasSendableData()
   const isSendDisabled = isFrozen || !hasSendableData
 
@@ -44,16 +65,14 @@ const CustomMessageInputInner: React.FC = () => {
               tabIndex={isFrozen ? -1 : undefined}
             />
           </div>
-          <button
+          <SendButton
+            sendMessage={handleSubmit}
             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={isSendDisabled}
-            onClick={handleSubmit}
             type="button"
-          >
-            <ArrowUpIcon className="size-4" />
-          </button>
+          />
         </div>
       </div>
     </>

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

@@ -0,0 +1,170 @@
+import type { Meta, StoryFn } from '@storybook/react'
+import React from 'react'
+import type { LocalMessage } from 'stream-chat'
+
+import { MediaMessage } from '.'
+
+const meta: Meta<typeof MediaMessage> = {
+  title: 'Components/MediaMessage',
+  component: MediaMessage,
+  parameters: {
+    layout: 'centered',
+  },
+}
+export default meta
+
+// ---------------------------------------------------------------------------
+// Shared helpers
+// ---------------------------------------------------------------------------
+
+const SENDER = { id: 'user-other', name: 'Jane Creator', image: 'https://i.pravatar.cc/40?img=5' }
+const ME = { id: 'user-me', name: 'Me' }
+
+const base = (overrides: Partial<LocalMessage> = {}): LocalMessage => ({
+  id: 'msg-1',
+  text: '',
+  type: 'regular',
+  created_at: new Date(),
+  updated_at: new Date(),
+  user: SENDER,
+  attachments: [],
+  ...overrides,
+})
+
+const VARIANTS = [
+  {
+    label: 'Video',
+    attachment: {
+      type: 'video',
+      asset_url: 'https://www.w3schools.com/html/mov_bbb.mp4',
+      mime_type: 'video/mp4',
+      title: "Alicia's Workout Plan",
+      file_size: 788_456,
+    },
+  },
+  {
+    label: 'Audio',
+    attachment: {
+      type: 'audio',
+      asset_url: 'https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3',
+      mime_type: 'audio/mpeg',
+      title: 'Morning Meditation',
+      file_size: 6_900_000,
+    },
+  },
+  {
+    label: 'Image',
+    attachment: {
+      type: 'image',
+      image_url: 'https://picsum.photos/seed/storybook/560/315',
+      mime_type: 'image/jpeg',
+      title: 'Picture of my cat',
+      file_size: 3_355_443,
+    },
+  },
+  {
+    label: 'Document',
+    attachment: {
+      type: 'file',
+      asset_url: 'https://www.w3.org/WAI/WCAG21/wcag21.pdf',
+      mime_type: 'application/pdf',
+      title: 'Strength Training Guide',
+      file_size: 1_240_000,
+    },
+  },
+  {
+    label: 'Unknown',
+    attachment: {
+      type: 'file',
+      asset_url: 'https://www.w3.org/WAI/WCAG21/wcag21.pdf',
+      mime_type: 'application/octet-stream',
+      title: 'Unknown Attachment',
+      file_size: 456_000,
+    },
+  },
+] as const
+
+// ---------------------------------------------------------------------------
+// Layout primitives
+// ---------------------------------------------------------------------------
+
+const GridTable: React.FC<{ children: React.ReactNode }> = ({ children }) => (
+  <div className="p-12 bg-[#F9F7F4]">
+    <table className="border-separate border-spacing-4">{children}</table>
+  </div>
+)
+
+const GridHead = () => (
+  <thead>
+    <tr>
+      <th className="text-left text-xs font-medium text-black/40 pb-2 w-16" />
+      {VARIANTS.map(({ label }) => (
+        <th key={label} className="text-left text-xs font-medium text-black/40 pb-2">
+          {label}
+        </th>
+      ))}
+    </tr>
+  </thead>
+)
+
+const RowLabel: React.FC<{ children: React.ReactNode }> = ({ children }) => (
+  <td className="text-xs text-right font-medium text-black/40 pr-4 align-top pt-2">
+    {children}
+  </td>
+)
+
+// ---------------------------------------------------------------------------
+// Stories
+// ---------------------------------------------------------------------------
+
+export const Visitor: StoryFn = () => (
+  <GridTable>
+    <GridHead />
+    <tbody>
+      <tr>
+        <RowLabel>Sent</RowLabel>
+        {VARIANTS.map(({ label, attachment }) => (
+          <td key={label} className="align-top">
+            <MediaMessage
+              isMyMessage={false}
+              message={base({ user: SENDER, attachments: [attachment as LocalMessage['attachments'][number]] })}
+            />
+          </td>
+        ))}
+      </tr>
+    </tbody>
+  </GridTable>
+)
+Visitor.parameters = {
+  docs: {
+    description: {
+      story: 'Visitor perspective — messages from the creator, left-aligned with avatar.',
+    },
+  },
+}
+
+export const Creator: StoryFn = () => (
+  <GridTable>
+    <GridHead />
+    <tbody>
+      <tr>
+        <RowLabel>Sent</RowLabel>
+        {VARIANTS.map(({ label, attachment }) => (
+          <td key={label} className="align-top">
+            <MediaMessage
+              isMyMessage={true}
+              message={base({ user: ME, attachments: [attachment as LocalMessage['attachments'][number]] })}
+            />
+          </td>
+        ))}
+      </tr>
+    </tbody>
+  </GridTable>
+)
+Creator.parameters = {
+  docs: {
+    description: {
+      story: 'Creator perspective — own messages, right-aligned, no avatar.',
+    },
+  },
+}