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

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

@@ -1,4 +1,4 @@
-import { ArrowLeftIcon, DotsThreeIcon, StarIcon } from '@phosphor-icons/react'
+import { ArrowLeftIcon, CaretRightIcon, DotsThreeIcon, StarIcon } from '@phosphor-icons/react'
 import classNames from 'classnames'
 import React, { useCallback, useRef } from 'react'
 import { Channel as ChannelType } from 'stream-chat'
@@ -96,9 +96,15 @@ const CustomChannelHeader: React.FC<{
             starred={showStarButton && isStarred}
             size={40}
           />
-          <h1 className="text-xs font-medium text-black/90">
+          <button
+            type="button"
+            onClick={onShowInfo}
+            className="flex items-center gap-0.5 rounded-full bg-black/[0.05] px-3 py-1 text-xs font-medium text-black/90 hover:bg-black/[0.08] transition-colors"
+            aria-label={`View info for ${participantName}`}
+          >
             {participantName}
-          </h1>
+            <CaretRightIcon className="size-3 shrink-0" />
+          </button>
         </div>
         <div className="flex justify-end items-center gap-2">
           {showStarButton && (
@@ -150,9 +156,21 @@ const CustomChannelHeader: React.FC<{
             size={40}
           />
           <div className="min-w-0">
-            <h1 className="font-medium text-black/90 truncate">
-              {participantName}
-            </h1>
+            {canShowInfo ? (
+              <button
+                type="button"
+                onClick={onShowInfo}
+                className="flex items-center gap-1 font-medium text-black/90 truncate hover:text-black/70 transition-colors"
+                aria-label={`View info for ${participantName}`}
+              >
+                <span className="truncate">{participantName}</span>
+                <CaretRightIcon className="size-4 shrink-0" />
+              </button>
+            ) : (
+              <h1 className="font-medium text-black/90 truncate">
+                {participantName}
+              </h1>
+            )}
           </div>
         </div>
         <div className="flex items-center gap-2">
@@ -376,6 +394,7 @@ export const ChannelView = React.memo<ChannelViewProps>(
     customProfileContent,
     customChannelActions,
     renderMessage,
+    sendButton,
   }) => {
     // Custom send message handler that:
     // 1. Applies messageMetadata if provided
@@ -435,6 +454,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/LockedAttachment/components/Creator/Card.tsx

@@ -67,11 +67,11 @@ const CreatorCard: React.FC<CreatorCardProps> = ({
         onToggle={onPreviewClick ? handleToggle : undefined}
       />
 
-      <div className="px-4 pb-3 pt-3">
+      <div className="px-4 pb-3 pt-3 bg-black">
         <p
           className={classNames('mb-1.5 truncate text-base font-medium', {
-            'text-black/30': !title,
-            'text-black': !!title,
+            'text-white/30': !title,
+            'text-white': !!title,
           })}
         >
           {title || placeholderTitle}
@@ -79,30 +79,30 @@ const CreatorCard: React.FC<CreatorCardProps> = ({
 
         <div className="flex items-center gap-1">
           {renderTypeIcon(mimeType, {
-            className: 'size-5 shrink-0 text-black/55',
+            className: 'size-5 shrink-0 text-white/55',
             weight: 'regular',
           })}
 
           {detail && (
-            <span className="text-xs font-medium text-black/55">{detail}</span>
+            <span className="text-xs font-medium text-white/55">{detail}</span>
           )}
 
           {paymentStatus === 'paid' ? (
             <React.Fragment>
-              <span className="text-xs font-medium text-black/55">&bull;</span>
-              <span className="text-xs font-medium text-[#008236]">Sold</span>
+              <span className="text-xs font-medium text-white/55">&bull;</span>
+              <span className="text-xs font-medium text-[#4ade80]">Sold</span>
               <CheckCircleIcon
-                className="size-4 text-[#008236]"
+                className="size-4 text-[#4ade80]"
                 weight="bold"
               />
             </React.Fragment>
           ) : (
             <React.Fragment>
-              <span className="text-xs font-medium text-black/55">&bull;</span>
+              <span className="text-xs font-medium text-white/55">&bull;</span>
               <span
                 className={classNames('text-xs font-medium', {
-                  'text-black/30': !amountText,
-                  'text-black/55': !!amountText,
+                  'text-white/30': !amountText,
+                  'text-white/55': !!amountText,
                 })}
               >
                 {amountText || placeholderAmountText}

package/src/components/LockedAttachment/components/MediaPlayer.tsx

@@ -31,6 +31,12 @@ export interface MediaPlayerProps {
   showProgress?: boolean
   /** When true, requests muted playback (helps autoplay policies on video). */
   muted?: boolean
+  /**
+   * When provided, overrides the default click-to-play-toggle behaviour on the
+   * player container. The play/pause button (which calls stopPropagation) is
+   * unaffected, so inline playback still works.
+   */
+  onContainerClick?: (e: React.MouseEvent) => void
 }
 
 const MediaPlayer: React.FC<MediaPlayerProps> = ({
@@ -43,6 +49,7 @@ const MediaPlayer: React.FC<MediaPlayerProps> = ({
   controls = true,
   showProgress = false,
   muted = false,
+  onContainerClick,
 }) => {
   // --- Derived ---
   const sourceType = getSourceType(mimeType)
@@ -185,13 +192,15 @@ const MediaPlayer: React.FC<MediaPlayerProps> = ({
       tabIndex={0}
       className={`relative cursor-pointer overflow-hidden bg-black ${aspectClass}`}
       style={aspectStyle}
-      onClick={() => {
+      onClick={(e) => {
+        if (onContainerClick) { onContainerClick(e); return }
         if (manualPlayRequired) return
         if (controls) setPlaying((p) => !p)
       }}
       onKeyDown={(e) => {
         if (e.key !== 'Enter' && e.key !== ' ') return
         e.preventDefault()
+        if (onContainerClick) { onContainerClick(e as unknown as React.MouseEvent); return }
         if (manualPlayRequired) return
         if (controls) setPlaying((p) => !p)
       }}

package/src/components/LockedAttachment/components/Visitor/Card.tsx

@@ -111,35 +111,35 @@ const VisitorCard: React.FC<VisitorCardProps> = ({
         paymentStatus={paymentStatus}
       />
 
-      <div className="px-4 pb-3 pt-3">
-        <p className="mb-1.5 truncate text-base font-medium text-black">
+      <div className="px-4 pb-3 pt-3 bg-black">
+        <p className="mb-1.5 truncate text-base font-medium text-white">
           {title}
         </p>
         <div className="flex items-center gap-1">
           {renderTypeIcon(mimeType, {
-            className: 'size-5 shrink-0 text-black/55',
+            className: 'size-5 shrink-0 text-white/55',
             weight: 'regular',
           })}
 
           {detail && (
-            <span className="text-xs font-medium text-black/55">{detail}</span>
+            <span className="text-xs font-medium text-white/55">{detail}</span>
           )}
 
           {paymentStatus === 'paid' ? (
             <React.Fragment>
-              <span className="text-xs font-medium text-black/55">&bull;</span>
-              <span className="text-xs font-medium text-[#008236]">
+              <span className="text-xs font-medium text-white/55">&bull;</span>
+              <span className="text-xs font-medium text-[#4ade80]">
                 Purchased
               </span>
               <CheckCircleIcon
-                className="size-4 text-[#008236]"
+                className="size-4 text-[#4ade80]"
                 weight="bold"
               />
             </React.Fragment>
           ) : amountText != null ? (
             <React.Fragment>
-              <span className="text-xs font-medium text-black/55">&bull;</span>
-              <span className="text-xs font-medium text-black/55">
+              <span className="text-xs font-medium text-white/55">&bull;</span>
+              <span className="text-xs font-medium text-white/55">
                 {amountText}
               </span>
             </React.Fragment>

package/src/components/LockedAttachment/components/Visitor/CardActions.tsx

@@ -26,7 +26,7 @@ const CardActions: React.FC<CardActionsProps> = (props) => {
         type="button"
         onClick={onUnlockClicked}
         disabled={isUnlocking}
-        className="mt-3 inline-flex h-10 w-full items-center justify-center gap-2 rounded-full bg-[#121110] px-4 text-sm font-medium leading-none text-white hover:bg-[#2a2928] disabled:opacity-70"
+        className="mt-3 inline-flex h-10 w-full items-center justify-center gap-2 rounded-full bg-white px-4 text-sm font-medium leading-none text-[#121110] hover:bg-white/90 disabled:opacity-70"
       >
         {isUnlocking ? (
           <LoadingDots />
@@ -47,7 +47,7 @@ const CardActions: React.FC<CardActionsProps> = (props) => {
         target="_blank"
         rel="noopener noreferrer"
         onClick={onDownloadClicked}
-        className="mt-3 inline-flex h-10 w-full items-center justify-center gap-2 rounded-full bg-[#121110] px-4 text-sm font-medium leading-none !text-white hover:bg-[#2a2928]"
+        className="mt-3 inline-flex h-10 w-full items-center justify-center gap-2 rounded-full bg-white px-4 text-sm font-medium leading-none !text-[#121110] hover:bg-white/90"
       >
         <DownloadSimpleIcon className="size-4" weight="bold" />
         Download