@linktr.ee/messaging-react 3.4.2-rc-1782453771 → 3.4.2

package/src/components/ChannelView.tsx

@@ -32,7 +32,6 @@ import CustomTypingIndicator from './CustomTypingIndicator'
 import { DmAgentEnabledContext } from './CustomTypingIndicator/DmAgentContext'
 import { ChannelEmptyState } from './MessagingShell/ChannelEmptyState'
 import { LoadingState } from './MessagingShell/LoadingState'
-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'
@@ -137,6 +136,7 @@ const CustomChannelHeader: React.FC<{
             id={participant?.user?.id || channel.id || 'unknown'}
             name={participantName}
             image={participantImage}
+            starred={showStarButton && isStarred}
             dmAgentEnabled={dmAgentEnabled}
             size={48}
           />
@@ -148,10 +148,6 @@ const CustomChannelHeader: React.FC<{
               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"
             >
               <span className="min-w-0 truncate">{participantName}</span>
-              <ParticipantBadges
-                participant={participant}
-                isStarred={isStarred}
-              />
               {headerTitleBadges && (
                 <span className="shrink-0">{headerTitleBadges}</span>
               )}
@@ -160,10 +156,6 @@ const CustomChannelHeader: React.FC<{
           ) : (
             <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>
-              <ParticipantBadges
-                participant={participant}
-                isStarred={isStarred}
-              />
               {headerTitleBadges && (
                 <span className="shrink-0">{headerTitleBadges}</span>
               )}
@@ -236,6 +228,7 @@ const CustomChannelHeader: React.FC<{
             id={participant?.user?.id || channel.id || 'unknown'}
             name={participantName}
             image={participantImage}
+            starred={showStarButton && isStarred}
             dmAgentEnabled={dmAgentEnabled}
             size={48}
           />
@@ -248,10 +241,6 @@ const CustomChannelHeader: React.FC<{
                 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>
-                <ParticipantBadges
-                  participant={participant}
-                  isStarred={isStarred}
-                />
                 {headerTitleBadges && (
                   <span className="shrink-0">{headerTitleBadges}</span>
                 )}
@@ -260,10 +249,6 @@ const CustomChannelHeader: React.FC<{
             ) : (
               <h1 className="flex min-w-0 items-center gap-1 font-medium text-black/90">
                 <span className="min-w-0 truncate">{participantName}</span>
-                <ParticipantBadges
-                  participant={participant}
-                  isStarred={isStarred}
-                />
                 {headerTitleBadges && (
                   <span className="shrink-0">{headerTitleBadges}</span>
                 )}
@@ -355,6 +340,7 @@ const ChannelViewInner: React.FC<{
   viewerLanguage?: string
   showChannelInfo?: boolean
   onParticipantNameClick?: () => void
+  composerInput?: ChannelViewProps['composerInput']
 }> = ({
   onBack,
   showBackButton,
@@ -382,6 +368,7 @@ const ChannelViewInner: React.FC<{
   viewerLanguage,
   showChannelInfo = true,
   onParticipantNameClick,
+  composerInput,
 }) => {
   const { channel } = useChannelStateContext()
 
@@ -403,10 +390,10 @@ const ChannelViewInner: React.FC<{
   }, [channel._client?.userID, channel.state?.members])
 
   const currentUserIsAccount =
-    currentMember?.user?.is_account ??
+    (currentMember?.user as { is_account?: boolean } | undefined)?.is_account ??
     (currentMember as { is_account?: boolean } | undefined)?.is_account
   const participantIsAccount =
-    participant?.user?.is_account ??
+    (participant?.user as { is_account?: boolean } | undefined)?.is_account ??
     (participant as { is_account?: boolean } | undefined)?.is_account
 
   const showDmAgentHeader =
@@ -498,6 +485,7 @@ const ChannelViewInner: React.FC<{
             renderFooter={() => renderMessageInputFooter?.(channel)}
             disabled={composerDisabled}
             disabledReason={composerDisabledReason}
+            composerInput={composerInput}
           />
         </Window>
       </WithComponents>
@@ -544,6 +532,7 @@ export const ChannelView = React.memo<ChannelViewProps>(
     viewerLanguage,
     showChannelInfo = true,
     onParticipantNameClick,
+    composerInput,
   }) => {
     // Custom send message handler that:
     // 1. Applies messageMetadata if provided
@@ -658,6 +647,7 @@ export const ChannelView = React.memo<ChannelViewProps>(
               viewerLanguage={viewerLanguage}
               showChannelInfo={showChannelInfo}
               onParticipantNameClick={onParticipantNameClick}
+              composerInput={composerInput}
             />
           </Channel>
         </DmAgentEnabledContext.Provider>

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

@@ -204,6 +204,40 @@ describe('CustomMessageInput', () => {
     ).toBeInTheDocument()
   })
 
+  it('renders a custom composerInput in place of the default composer', () => {
+    mockChannelData = {}
+
+    renderWithProviders(
+      <CustomMessageInput
+        composerInput={() => (
+          <div data-testid="custom-composer">custom composer</div>
+        )}
+      />
+    )
+
+    // The host-owned composer renders instead of the built-in textarea/send.
+    expect(screen.getByTestId('custom-composer')).toBeInTheDocument()
+    expect(screen.queryByTestId('textarea-composer')).not.toBeInTheDocument()
+    // It is still mounted inside Stream's <MessageInput> so it keeps the
+    // message-input context (send pipeline, attachments, previews).
+    expect(screen.getByTestId('stream-message-input')).toBeInTheDocument()
+  })
+
+  it('keeps the frozen wrapper around a custom composerInput', () => {
+    mockChannelData = { frozen: true }
+
+    const { container } = renderWithProviders(
+      <CustomMessageInput
+        composerInput={() => <div data-testid="custom-composer" />}
+      />
+    )
+
+    const messageInput = container.querySelector('.message-input')
+    expect(messageInput).toHaveAttribute('aria-disabled', 'true')
+    expect(messageInput).toHaveAttribute('inert')
+    expect(screen.getByTestId('custom-composer')).toBeInTheDocument()
+  })
+
   it('does not render the locked panel when the composer is not disabled', () => {
     mockChannelData = {}
 

package/src/components/CustomMessageInput/index.tsx

@@ -23,6 +23,15 @@ import { CustomLinkPreviewList } from '../CustomLinkPreviewList'
  */
 const ComposerLockedContext = React.createContext(false)
 
+/**
+ * Read the composer's locked (frozen-channel) state from inside a custom
+ * composer supplied via `composerInput`. Returns true when the channel is
+ * frozen; mirror the default composer by rendering the textarea read-only and
+ * disabling the send control.
+ */
+export const useComposerLocked = (): boolean =>
+  useContext(ComposerLockedContext)
+
 const DefaultSendButton: React.FC<{
   sendMessage: () => void
   disabled?: boolean
@@ -101,6 +110,18 @@ export interface CustomMessageInputProps {
    * `disabled` is true.
    */
   disabledReason?: string
+  /**
+   * Replace the inner composer — the textarea + send arrangement rendered
+   * inside Stream's `<MessageInput>` — with a host-owned component. When
+   * provided it is passed to Stream as the `Input` component, so it runs inside
+   * the message-input context and can drive sending, attachments, and previews
+   * via the Stream hooks (`useMessageInputContext`,
+   * `useMessageComposerHasSendableData`, `TextareaComposer`, …). The outer
+   * frozen/`renderActions`/`renderFooter` wrapper is unchanged; read
+   * `useComposerLocked()` to honour the frozen state. Defaults to the built-in
+   * composer.
+   */
+  composerInput?: React.ComponentType
 }
 
 export const CustomMessageInput: React.FC<CustomMessageInputProps> = ({
@@ -108,6 +129,7 @@ export const CustomMessageInput: React.FC<CustomMessageInputProps> = ({
   renderFooter,
   disabled = false,
   disabledReason,
+  composerInput,
 }) => {
   const { channel } = useChannelStateContext()
   const isFrozen = channel?.data?.frozen === true
@@ -143,7 +165,7 @@ export const CustomMessageInput: React.FC<CustomMessageInputProps> = ({
           </div>
         )}
         <ComposerLockedContext.Provider value={isFrozen}>
-          <MessageInput Input={CustomMessageInputInner} />
+          <MessageInput Input={composerInput ?? CustomMessageInputInner} />
         </ComposerLockedContext.Provider>
       </div>
       {renderFooter?.()}

package/src/components/MessagingShell/index.tsx

@@ -39,6 +39,7 @@ export const MessagingShell: React.FC<MessagingShellProps> = ({
   renderMessage,
   onMessageLinkClick,
   showChannelInfo,
+  composerInput,
 }) => {
   const {
     client,
@@ -264,6 +265,7 @@ export const MessagingShell: React.FC<MessagingShellProps> = ({
           renderMessage={renderMessage}
           onMessageLinkClick={onMessageLinkClick}
           showChannelInfo={showChannelInfo}
+          composerInput={composerInput}
         />
       </div>
     </div>

package/src/hooks/useChannelStar.ts

@@ -1,5 +1,5 @@
 import { useEffect, useState } from 'react'
-import type { Channel, Event } from 'stream-chat'
+import { Channel, Event } from 'stream-chat'
 
 export const useChannelStar = (channel?: Channel) => {
   const [isChannelStarred, setIsChannelStarred] = useState(
@@ -15,18 +15,15 @@ export const useChannelStar = (channel?: Channel) => {
     setIsChannelStarred(!!channel.state.membership?.pinned_at)
 
     const handleMemberUpdate = (event: Event) => {
-      const currentUserId = channel._client?.userID
-      const memberUserId = event.member?.user_id ?? event.member?.user?.id
-
-      if (!currentUserId || memberUserId !== currentUserId) return
-
-      setIsChannelStarred(!!event.member?.pinned_at)
+      setIsChannelStarred(
+        event?.member ? !!event.member.pinned_at : !!channel.state.membership?.pinned_at
+      )
     }
 
-    const subscription = channel.on('member.updated', handleMemberUpdate)
+    channel.on('member.updated', handleMemberUpdate)
 
     return () => {
-      subscription.unsubscribe()
+      channel.off('member.updated', handleMemberUpdate)
     }
   }, [channel])
 

package/src/index.ts

@@ -30,6 +30,7 @@ export { MessagingProvider } from './providers/MessagingProvider'
 export { CustomMessageProvider } from './components/CustomMessage/context'
 
 // Hooks
+export { useComposerLocked } from './components/CustomMessageInput'
 export { useMessaging } from './hooks/useMessaging'
 export { useMessageVote } from './hooks/useMessageVote'
 export { useCustomMessage } from './components/CustomMessage/context'

package/src/stream-custom-data.ts

@@ -2,8 +2,7 @@
  * Stream Chat custom data type augmentation.
  *
  * This file extends Stream Chat's type system by augmenting their empty
- * CustomMessageData, CustomChannelData, CustomMemberData, and CustomUserData
- * interfaces with our custom properties.
+ * CustomMessageData and CustomChannelData interfaces with our custom properties.
  *
  * @see https://getstream.io/chat/docs/sdk/react/guides/typescript_and_custom_data_types/
  *
@@ -99,14 +98,6 @@ declare module 'stream-chat' {
     chatbot_paused?: boolean
   }
 
-  interface CustomMemberData {
-    /**
-     * Whether the member should be identified as a customer in participant UI.
-     * Stored on the channel member so it is scoped to this conversation.
-     */
-    customer?: boolean
-  }
-
   interface CustomMessageData {
     /**
      * When true, hides the date timestamp in system messages.
@@ -124,10 +115,4 @@ declare module 'stream-chat' {
      */
     dm_agent_system_type?: DmAgentSystemType
   }
-
-  interface CustomUserData {
-    is_account?: boolean
-    is_follower?: boolean
-    username?: string
-  }
 }

package/src/types.ts

@@ -324,6 +324,23 @@ export interface ChannelViewProps {
    */
   attachmentPreviewList?: ComponentType
 
+  /**
+   * Replace the entire inner composer — the textarea + send arrangement — with
+   * a host-owned component. Passed to Stream's `<MessageInput>` as the `Input`
+   * component, so it runs inside the message-input context and reuses the
+   * library's send pipeline (`doSendMessageRequest`, message metadata, DM-agent
+   * suppression), attachments, and previews via the Stream hooks
+   * (`useMessageInputContext`, `useMessageComposerHasSendableData`,
+   * `TextareaComposer`, …). Use it when a surface needs a different composer
+   * layout (e.g. a full-width textarea above a toolbar row) than the default.
+   *
+   * The outer wrapper — frozen handling and the `renderMessageInputActions` /
+   * `renderMessageInputFooter` slots — is unchanged. Read the exported
+   * `useComposerLocked()` hook to honour the frozen state. Defaults to the
+   * built-in composer when omitted.
+   */
+  composerInput?: ComponentType
+
   /**
    * Fired when the participant's name in the channel header is clicked. When
    * provided, the name renders as a button with a trailing caret (an affordance
@@ -359,6 +376,7 @@ export type ChannelViewPassthroughProps = Pick<
   | 'renderMessage'
   | 'onMessageLinkClick'
   | 'showChannelInfo'
+  | 'composerInput'
 >
 
 /**