@linktr.ee/messaging-react 3.5.0-rc-1782408966 → 3.5.0-rc-1782792813

package/src/components/ChannelList/index.test.tsx

@@ -7,7 +7,8 @@ import { renderWithProviders } from '../../test/utils'
 import { ChannelList } from '.'
 
 const streamChannelListMock = vi.fn()
-const { InfiniteScrollMock } = vi.hoisted(() => ({
+const { CustomChannelPreviewMock, InfiniteScrollMock } = vi.hoisted(() => ({
+  CustomChannelPreviewMock: () => null,
   InfiniteScrollMock: () => null,
 }))
 
@@ -24,7 +25,7 @@ vi.mock('../../providers/MessagingProvider', () => ({
 }))
 
 vi.mock('./CustomChannelPreview', () => ({
-  default: () => null,
+  default: CustomChannelPreviewMock,
 }))
 
 describe('ChannelList', () => {
@@ -55,6 +56,28 @@ describe('ChannelList', () => {
     })
   })
 
+  it('uses the built-in channel preview by default', () => {
+    renderWithProviders(<ChannelList {...defaultProps} />)
+
+    expect(streamChannelListMock).toHaveBeenCalledOnce()
+    expect(streamChannelListMock.mock.calls[0][0]).toMatchObject({
+      Preview: CustomChannelPreviewMock,
+    })
+  })
+
+  it('passes a custom channel preview through to Stream ChannelList', () => {
+    const ChannelPreview = () => null
+
+    renderWithProviders(
+      <ChannelList {...defaultProps} channelPreview={ChannelPreview} />
+    )
+
+    expect(streamChannelListMock).toHaveBeenCalledOnce()
+    expect(streamChannelListMock.mock.calls[0][0]).toMatchObject({
+      Preview: ChannelPreview,
+    })
+  })
+
   it('passes allowNewMessagesFromUnfilteredChannels through to Stream ChannelList', () => {
     const props: React.ComponentProps<typeof ChannelList> = {
       ...defaultProps,

package/src/components/ChannelList/index.tsx

@@ -28,6 +28,7 @@ export const ChannelList = React.memo<ChannelListProps>(
     sort = DEFAULT_SORT,
     className,
     customEmptyStateIndicator,
+    channelPreview,
     renderMessagePreview,
     viewerLanguage,
   }) => {
@@ -97,7 +98,7 @@ export const ChannelList = React.memo<ChannelListProps>(
               }
               channelRenderFilterFn={wrappedChannelRenderFilterFn}
               Paginator={InfiniteScroll}
-              Preview={CustomChannelPreview}
+              Preview={channelPreview ?? CustomChannelPreview}
               EmptyStateIndicator={customEmptyStateIndicator}
             />
           </ChannelListProvider>

package/src/components/ChannelView.stories.tsx

@@ -41,7 +41,14 @@ const createMockChannel = async (
   client: StreamChat,
   hasMessages = true,
   followerStatus?: string | boolean,
-  isFrozen = false
+  isFrozen = false,
+  {
+    isCustomer = false,
+    isStarred = false,
+  }: {
+    isCustomer?: boolean
+    isStarred?: boolean
+  } = {}
 ) => {
   const participant = mockParticipants[0]
 
@@ -142,8 +149,12 @@ const createMockChannel = async (
         user_id: participant.id,
         role: 'member',
         is_account: true,
+        ...(isCustomer ? { customer: true } : {}),
       },
     }
+    channel.state.membership = {
+      pinned_at: isStarred ? now().toISOString() : null,
+    } as ChannelMemberResponse
     return {
       channel: channelData,
       members: [],
@@ -171,6 +182,8 @@ const createMockChannel = async (
 type TemplateProps = ComponentProps & {
   followerStatus?: string | boolean
   isFrozen?: boolean
+  isCustomer?: boolean
+  isStarred?: boolean
   typingUser?: {
     id: string
     name?: string
@@ -182,6 +195,8 @@ const Template: StoryFn<TemplateProps> = (args) => {
   const {
     followerStatus,
     isFrozen = false,
+    isCustomer = false,
+    isStarred = false,
     typingUser,
     ...channelViewProps
   } = args
@@ -197,12 +212,13 @@ const Template: StoryFn<TemplateProps> = (args) => {
   const [channel, setChannel] = React.useState<ChannelType | null>(null)
 
   useEffect(() => {
-    createMockChannel(client, true, followerStatus, isFrozen).then(
-      (mockChannel) => {
-        setChannel(mockChannel)
-      }
-    )
-  }, [client, followerStatus, isFrozen])
+    createMockChannel(client, true, followerStatus, isFrozen, {
+      isCustomer,
+      isStarred,
+    }).then((mockChannel) => {
+      setChannel(mockChannel)
+    })
+  }, [client, followerStatus, isCustomer, isFrozen, isStarred])
 
   useEffect(() => {
     if (!channel || !typingUser) {
@@ -251,18 +267,20 @@ Default.parameters = {
   },
 }
 
-export const ParticipantNameTrigger: StoryFn<TemplateProps> = Template.bind({})
-ParticipantNameTrigger.args = {
+export const ParticipantIdentityTrigger: StoryFn<TemplateProps> = Template.bind(
+  {}
+)
+ParticipantIdentityTrigger.args = {
   showBackButton: false,
   onParticipantNameClick: () =>
     // eslint-disable-next-line no-alert
-    window.alert('Participant name clicked — open Thread content'),
+    window.alert('Participant details clicked — open Thread content'),
 }
-ParticipantNameTrigger.parameters = {
+ParticipantIdentityTrigger.parameters = {
   docs: {
     description: {
       story:
-        'Header with `onParticipantNameClick` set: the participant name renders as a button with a trailing caret (both the mobile and desktop header layouts). Click the name to fire the callback (shows an alert here). With the prop omitted (see Default) the name is plain, non-interactive text.',
+        'Header with `onParticipantNameClick` set: the participant avatar and name render as one button with a trailing caret in both the mobile and desktop header layouts. Click the identity block to fire the callback (shows an alert here). With the prop omitted (see Default) the header remains non-interactive.',
     },
   },
 }
@@ -307,6 +325,21 @@ WithHeaderTitleBadges.parameters = {
   },
 }
 
+export const ParticipantBadges: StoryFn<TemplateProps> = Template.bind({})
+ParticipantBadges.args = {
+  showBackButton: false,
+  isCustomer: true,
+  isStarred: true,
+}
+ParticipantBadges.parameters = {
+  docs: {
+    description: {
+      story:
+        'Shows the built-in customer badge from participant.customer and the starred badge from the current user membership pinned_at value in the channel header.',
+    },
+  },
+}
+
 export const RestrictedOfficialChannel: StoryFn<TemplateProps> = Template.bind(
   {}
 )

package/src/components/ChannelView.test.tsx

@@ -84,13 +84,9 @@ vi.mock('./Avatar', () => ({
   },
 }))
 
-let mockIsStarred = false
-vi.mock('../hooks/useChannelStar', () => ({
-  useChannelStar: () => mockIsStarred,
-}))
-
 const createChannel = ({
   currentUserId = 'visitor-1',
+  currentUserPinnedAt,
   currentUserRole = 'owner',
   otherUser = {
     id: 'linker-1' as const,
@@ -98,15 +94,17 @@ const createChannel = ({
     username: undefined as string | undefined,
     is_account: true,
   },
+  otherMemberCustomer = false,
 }: {
   currentUserId?: 'visitor-1' | 'linker-1'
+  currentUserPinnedAt?: string
   currentUserRole?: 'owner' | 'member'
+  otherMemberCustomer?: boolean
   otherUser?: {
     id: string
     name?: string
     username?: string
     is_account?: boolean
-    is_verified?: boolean
   }
 } = {}) =>
   ({
@@ -134,12 +132,15 @@ const createChannel = ({
               otherUser.is_account ?? currentUserId === 'visitor-1',
           },
           role: currentUserRole === 'owner' ? 'member' : 'owner',
+          customer: otherMemberCustomer,
         },
       },
-      membership: {},
+      membership: {
+        pinned_at: currentUserPinnedAt,
+      },
       messages: [],
     },
-    on: vi.fn(),
+    on: vi.fn(() => ({ unsubscribe: vi.fn() })),
     off: vi.fn(),
     sendMessage: vi.fn(),
     hide: vi.fn(),
@@ -154,7 +155,6 @@ describe('ChannelView', () => {
     avatarRenderCalls.length = 0
     channelActionsMenuProps.length = 0
     messageInputProps.length = 0
-    mockIsStarred = false
   })
 
   const lastActionsMenuProps = () =>
@@ -192,6 +192,14 @@ describe('ChannelView', () => {
       screen.queryByRole('button', { name: /view info for/i })
     ).not.toBeInTheDocument()
     expect(screen.getAllByText('Linker').length).toBeGreaterThanOrEqual(1)
+
+    const avatars = screen.getAllByTestId('avatar')
+    expect(avatars.length).toBeGreaterThanOrEqual(1)
+    expect(avatars[0].parentElement).toHaveClass(
+      'rounded-[12px]',
+      'px-1',
+      'py-0.5'
+    )
   })
 
   it('renders the participant name as a button that fires onParticipantNameClick', () => {
@@ -209,6 +217,18 @@ describe('ChannelView', () => {
       name: /view details for linker/i,
     })
     expect(buttons.length).toBeGreaterThanOrEqual(1)
+    expect(buttons[0]).toHaveClass(
+      'appearance-none',
+      'border-0',
+      'bg-transparent',
+      'rounded-[12px]',
+      'px-1',
+      'py-0.5'
+    )
+
+    const avatars = screen.getAllByTestId('avatar')
+    expect(avatars.length).toBeGreaterThanOrEqual(1)
+    expect(avatars[0].closest('button')).toBe(buttons[0])
 
     buttons[0].click()
     expect(onParticipantNameClick).toHaveBeenCalledTimes(1)
@@ -288,38 +308,54 @@ describe('ChannelView', () => {
     expect(screen.queryByTestId('conversation-footer')).not.toBeInTheDocument()
   })
 
-  it('does not pass starred to avatar when showStarButton is false', () => {
-    mockIsStarred = true
-    const channel = createChannel()
+  it('does not pass starred to avatar when channel is starred', () => {
+    const channel = createChannel({
+      currentUserPinnedAt: '2026-01-01T00:00:00.000Z',
+    })
 
     renderWithProviders(
-      <ChannelView channel={channel} showStarButton={false} />
+      <ChannelView channel={channel} showStarButton={true} />
     )
 
     expect(avatarRenderCalls.length).toBeGreaterThan(0)
-    expect(avatarRenderCalls.every((call) => call.starred === false)).toBe(true)
+    expect(avatarRenderCalls.every((call) => !('starred' in call))).toBe(true)
   })
 
-  it('passes starred to avatar when showStarButton is true and channel is starred', () => {
-    mockIsStarred = true
-    const channel = createChannel()
-
+  it('renders built-in customer badges from participant member data', () => {
     renderWithProviders(
-      <ChannelView channel={channel} showStarButton={true} />
+      <ChannelView
+        channel={createChannel({ otherMemberCustomer: true })}
+        renderHeaderTitleBadges={() => (
+          <span data-testid="custom-header-badge">VIP</span>
+        )}
+      />
     )
 
-    expect(avatarRenderCalls.length).toBeGreaterThan(0)
-    expect(avatarRenderCalls.every((call) => call.starred === true)).toBe(true)
-  })
+    const customerBadges = screen.getAllByRole('img', { name: 'Customer' })
+    const customBadges = screen.getAllByTestId('custom-header-badge')
 
-  it('does not pass starred to avatar by default (showStarButton defaults to false)', () => {
-    mockIsStarred = true
-    const channel = createChannel()
+    expect(customerBadges.length).toBeGreaterThan(0)
+    expect(customBadges.length).toBe(customerBadges.length)
+    customerBadges.forEach((badge, index) => {
+      expect(
+        badge.compareDocumentPosition(customBadges[index]) &
+          Node.DOCUMENT_POSITION_FOLLOWING
+      ).toBeTruthy()
+    })
+  })
 
-    renderWithProviders(<ChannelView channel={channel} />)
+  it('renders built-in starred badges from channel star state', () => {
+    renderWithProviders(
+      <ChannelView
+        channel={createChannel({
+          currentUserPinnedAt: '2026-01-01T00:00:00.000Z',
+        })}
+      />
+    )
 
-    expect(avatarRenderCalls.length).toBeGreaterThan(0)
-    expect(avatarRenderCalls.every((call) => call.starred === false)).toBe(true)
+    expect(
+      screen.getAllByRole('img', { name: 'Starred conversation' }).length
+    ).toBeGreaterThan(0)
   })
 
   it('passes dmAgentEnabled to avatar when dmAgentEnabled is true for visitor view', () => {
@@ -476,40 +512,6 @@ describe('ChannelView', () => {
     expect(screen.getAllByText('Unknown member').length).toBeGreaterThan(0)
   })
 
-  it('shows the verification badge in the header when the participant is verified', () => {
-    renderWithProviders(
-      <ChannelView
-        channel={createChannel({
-          otherUser: {
-            id: 'linker-1',
-            name: 'Linker',
-            is_account: true,
-            is_verified: true,
-          },
-        })}
-      />
-    )
-
-    expect(screen.getAllByLabelText('Verified').length).toBeGreaterThan(0)
-  })
-
-  it('does not show the verification badge in the header when the participant is not verified', () => {
-    renderWithProviders(
-      <ChannelView
-        channel={createChannel({
-          otherUser: {
-            id: 'linker-1',
-            name: 'Linker',
-            is_account: true,
-            is_verified: false,
-          },
-        })}
-      />
-    )
-
-    expect(screen.queryByLabelText('Verified')).not.toBeInTheDocument()
-  })
-
   it('fires onMessageLinkClick with the href and undefined message when the link is not inside a message wrapper', () => {
     const handler = vi.fn()
     const { container } = renderWithProviders(

package/src/components/ChannelView.tsx

@@ -32,7 +32,7 @@ import CustomTypingIndicator from './CustomTypingIndicator'
 import { DmAgentEnabledContext } from './CustomTypingIndicator/DmAgentContext'
 import { ChannelEmptyState } from './MessagingShell/ChannelEmptyState'
 import { LoadingState } from './MessagingShell/LoadingState'
-import { VerifiedBadge } from './VerifiedBadge'
+import { ParticipantBadges } from './ParticipantBadges'
 
 const ICON_BTN_CLASS =
   'size-10 rounded-full hover:bg-[#E5E4E1] flex items-center justify-center transition-colors duration-150 focus-ring'
@@ -93,12 +93,24 @@ const CustomChannelHeader: React.FC<{
 
   const participantName = resolveParticipantDisplayName(participant?.user)
   const participantImage = participant?.user?.image
-  const isParticipantVerified = participant?.user?.is_verified === true
   const isStarred = useChannelStar(channel)
   const headerTitleBadges = renderHeaderTitleBadges?.({
     channel,
     participant,
   })
+  const mobileParticipantIdentityClassName =
+    'flex max-w-full flex-col items-center gap-1 rounded-[12px] px-1 py-0.5 text-center text-xs font-medium text-black/90'
+  const desktopParticipantIdentityClassName =
+    'flex min-w-0 max-w-full items-center gap-4 rounded-[12px] px-1 py-0.5 text-left text-black/90'
+  const participantTitle = (
+    <>
+      <span className="min-w-0 truncate">{participantName}</span>
+      <ParticipantBadges channel={channel} participant={participant} />
+      {headerTitleBadges && (
+        <span className="shrink-0">{headerTitleBadges}</span>
+      )}
+    </>
+  )
 
   const handleStarClick = async () => {
     try {
@@ -133,42 +145,60 @@ const CustomChannelHeader: React.FC<{
             </button>
           )}
         </div>
-        <div className="flex flex-col gap-1 items-center">
-          <Avatar
-            id={participant?.user?.id || channel.id || 'unknown'}
-            name={participantName}
-            image={participantImage}
-            starred={showStarButton && isStarred}
-            dmAgentEnabled={dmAgentEnabled}
-            size={48}
-          />
+        <div
+          className="flex flex-col gap-1 items-center"
+          data-dd-privacy="mask"
+        >
           {onParticipantNameClick ? (
             <button
               type="button"
               onClick={onParticipantNameClick}
               aria-label={`View details for ${participantName}`}
-              className="flex max-w-full items-center gap-0.5 rounded text-center text-xs font-medium text-black/90 transition-opacity hover:opacity-70"
+              className={classNames(
+                mobileParticipantIdentityClassName,
+                'appearance-none border-0 bg-transparent transition-opacity hover:opacity-70 focus-ring focus-visible:outline-none'
+              )}
             >
-              <span className="min-w-0 truncate">{participantName}</span>
-              {isParticipantVerified && <VerifiedBadge />}
-              {headerTitleBadges && (
-                <span className="shrink-0">{headerTitleBadges}</span>
+              <Avatar
+                id={participant?.user?.id || channel.id || 'unknown'}
+                name={participantName}
+                image={participantImage}
+                dmAgentEnabled={dmAgentEnabled}
+                size={48}
+              />
+              <span className="flex max-w-full items-center gap-0.5">
+                {participantTitle}
+                <CaretRightIcon className="size-3 shrink-0" weight="bold" />
+              </span>
+              {dmAgentEnabled && (
+                <div className="flex items-center gap-1 text-[10px] leading-3 text-black/55">
+                  <SparkleIcon className="size-3 shrink-0 text-black/55" />
+                  <span>{DM_AGENT_HEADER_HELPER_TEXT}</span>
+                </div>
               )}
-              <CaretRightIcon className="size-3 shrink-0" weight="bold" />
             </button>
           ) : (
-            <p className="flex max-w-full items-center justify-center gap-1 text-center text-xs font-medium text-black/90">
-              <span className="min-w-0 truncate">{participantName}</span>
-              {isParticipantVerified && <VerifiedBadge />}
-              {headerTitleBadges && (
-                <span className="shrink-0">{headerTitleBadges}</span>
+            <div className={mobileParticipantIdentityClassName}>
+              <Avatar
+                id={participant?.user?.id || channel.id || 'unknown'}
+                name={participantName}
+                image={participantImage}
+                dmAgentEnabled={dmAgentEnabled}
+                size={48}
+              />
+              <p className="flex max-w-full items-center justify-center gap-0.5">
+                {participantTitle}
+                <CaretRightIcon
+                  className="invisible size-3 shrink-0"
+                  weight="bold"
+                />
+              </p>
+              {dmAgentEnabled && (
+                <div className="flex items-center gap-1 text-[10px] leading-3 text-black/55">
+                  <SparkleIcon className="size-3 shrink-0 text-black/55" />
+                  <span>{DM_AGENT_HEADER_HELPER_TEXT}</span>
+                </div>
               )}
-            </p>
-          )}
-          {dmAgentEnabled && (
-            <div className="flex items-center gap-1 text-[10px] leading-3 text-black/55">
-              <SparkleIcon className="size-3 shrink-0 text-black/55" />
-              <span>{DM_AGENT_HEADER_HELPER_TEXT}</span>
             </div>
           )}
         </div>
@@ -213,7 +243,7 @@ const CustomChannelHeader: React.FC<{
         </div>
       </div>
       <div className="px-6 py-3 hidden @lg:flex items-center justify-between gap-3 min-h-12 border-b border-b-black/[0.08]">
-        <div className="flex items-center gap-4 min-w-0">
+        <div className="flex items-center gap-4 min-w-0" data-dd-privacy="mask">
           {showBackButton && onBack && (
             <button
               className={classNames(
@@ -227,46 +257,66 @@ const CustomChannelHeader: React.FC<{
               <ArrowLeftIcon className="size-5 text-black/90" />
             </button>
           )}
-          {/* Avatar */}
-          <Avatar
-            id={participant?.user?.id || channel.id || 'unknown'}
-            name={participantName}
-            image={participantImage}
-            starred={showStarButton && isStarred}
-            dmAgentEnabled={dmAgentEnabled}
-            size={48}
-          />
-          <div className="min-w-0">
-            {onParticipantNameClick ? (
-              <button
-                type="button"
-                onClick={onParticipantNameClick}
-                aria-label={`View details for ${participantName}`}
-                className="flex min-w-0 max-w-full items-center gap-1 rounded font-medium text-black/90 transition-opacity hover:opacity-70"
-              >
-                <span className="min-w-0 truncate">{participantName}</span>
-                {isParticipantVerified && <VerifiedBadge />}
-                {headerTitleBadges && (
-                  <span className="shrink-0">{headerTitleBadges}</span>
+          {onParticipantNameClick ? (
+            <button
+              type="button"
+              onClick={onParticipantNameClick}
+              aria-label={`View details for ${participantName}`}
+              className={classNames(
+                desktopParticipantIdentityClassName,
+                'appearance-none border-0 bg-transparent transition-opacity hover:opacity-70 focus-ring focus-visible:outline-none'
+              )}
+            >
+              <Avatar
+                id={participant?.user?.id || channel.id || 'unknown'}
+                name={participantName}
+                image={participantImage}
+                dmAgentEnabled={dmAgentEnabled}
+                size={48}
+              />
+              <div className="min-w-0">
+                <h1 className="flex min-w-0 items-center gap-1 font-medium text-black/90">
+                  {participantTitle}
+                  <CaretRightIcon className="size-4 shrink-0" weight="bold" />
+                </h1>
+                {dmAgentEnabled && (
+                  <div className="mt-0.5 flex items-center gap-1 text-[10px] leading-3 text-black/55">
+                    <SparkleIcon className="size-3 shrink-0 text-black/55" />
+                    <span className="truncate">
+                      {DM_AGENT_HEADER_HELPER_TEXT}
+                    </span>
+                  </div>
                 )}
-                <CaretRightIcon className="size-4 shrink-0" weight="bold" />
-              </button>
-            ) : (
-              <h1 className="flex min-w-0 items-center gap-1 font-medium text-black/90">
-                <span className="min-w-0 truncate">{participantName}</span>
-                {isParticipantVerified && <VerifiedBadge />}
-                {headerTitleBadges && (
-                  <span className="shrink-0">{headerTitleBadges}</span>
+              </div>
+            </button>
+          ) : (
+            <div className={desktopParticipantIdentityClassName}>
+              <Avatar
+                id={participant?.user?.id || channel.id || 'unknown'}
+                name={participantName}
+                image={participantImage}
+                dmAgentEnabled={dmAgentEnabled}
+                size={48}
+              />
+              <div className="min-w-0">
+                <h1 className="flex min-w-0 items-center gap-1 font-medium text-black/90">
+                  {participantTitle}
+                  <CaretRightIcon
+                    className="invisible size-4 shrink-0"
+                    weight="bold"
+                  />
+                </h1>
+                {dmAgentEnabled && (
+                  <div className="mt-0.5 flex items-center gap-1 text-[10px] leading-3 text-black/55">
+                    <SparkleIcon className="size-3 shrink-0 text-black/55" />
+                    <span className="truncate">
+                      {DM_AGENT_HEADER_HELPER_TEXT}
+                    </span>
+                  </div>
                 )}
-              </h1>
-            )}
-            {dmAgentEnabled && (
-              <div className="mt-0.5 flex items-center gap-1 text-[10px] leading-3 text-black/55">
-                <SparkleIcon className="size-3 shrink-0 text-black/55" />
-                <span className="truncate">{DM_AGENT_HEADER_HELPER_TEXT}</span>
               </div>
-            )}
-          </div>
+            </div>
+          )}
         </div>
         <div className="flex items-center gap-2">
           {showStarButton && (
@@ -346,6 +396,7 @@ const ChannelViewInner: React.FC<{
   viewerLanguage?: string
   showChannelInfo?: boolean
   onParticipantNameClick?: () => void
+  composerInput?: ChannelViewProps['composerInput']
 }> = ({
   onBack,
   showBackButton,
@@ -373,6 +424,7 @@ const ChannelViewInner: React.FC<{
   viewerLanguage,
   showChannelInfo = true,
   onParticipantNameClick,
+  composerInput,
 }) => {
   const { channel } = useChannelStateContext()
 
@@ -394,10 +446,10 @@ const ChannelViewInner: React.FC<{
   }, [channel._client?.userID, channel.state?.members])
 
   const currentUserIsAccount =
-    (currentMember?.user as { is_account?: boolean } | undefined)?.is_account ??
+    currentMember?.user?.is_account ??
     (currentMember as { is_account?: boolean } | undefined)?.is_account
   const participantIsAccount =
-    (participant?.user as { is_account?: boolean } | undefined)?.is_account ??
+    participant?.user?.is_account ??
     (participant as { is_account?: boolean } | undefined)?.is_account
 
   const showDmAgentHeader =
@@ -489,6 +541,7 @@ const ChannelViewInner: React.FC<{
             renderFooter={() => renderMessageInputFooter?.(channel)}
             disabled={composerDisabled}
             disabledReason={composerDisabledReason}
+            composerInput={composerInput}
           />
         </Window>
       </WithComponents>
@@ -535,6 +588,7 @@ export const ChannelView = React.memo<ChannelViewProps>(
     viewerLanguage,
     showChannelInfo = true,
     onParticipantNameClick,
+    composerInput,
   }) => {
     // Custom send message handler that:
     // 1. Applies messageMetadata if provided
@@ -649,6 +703,7 @@ export const ChannelView = React.memo<ChannelViewProps>(
               viewerLanguage={viewerLanguage}
               showChannelInfo={showChannelInfo}
               onParticipantNameClick={onParticipantNameClick}
+              composerInput={composerInput}
             />
           </Channel>
         </DmAgentEnabledContext.Provider>