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

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'
 >
 
 /**