@linktr.ee/messaging-react 3.4.2-rc-1782395074 → 3.4.2-rc-1782453401

package/src/components/ChannelView.tsx

@@ -32,6 +32,7 @@ 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'
@@ -136,7 +137,6 @@ const CustomChannelHeader: React.FC<{
             id={participant?.user?.id || channel.id || 'unknown'}
             name={participantName}
             image={participantImage}
-            starred={showStarButton && isStarred}
             dmAgentEnabled={dmAgentEnabled}
             size={48}
           />
@@ -148,6 +148,10 @@ 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>
               )}
@@ -156,6 +160,10 @@ 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>
               )}
@@ -228,7 +236,6 @@ const CustomChannelHeader: React.FC<{
             id={participant?.user?.id || channel.id || 'unknown'}
             name={participantName}
             image={participantImage}
-            starred={showStarButton && isStarred}
             dmAgentEnabled={dmAgentEnabled}
             size={48}
           />
@@ -241,6 +248,10 @@ 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>
                 )}
@@ -249,6 +260,10 @@ 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>
                 )}
@@ -340,7 +355,6 @@ const ChannelViewInner: React.FC<{
   viewerLanguage?: string
   showChannelInfo?: boolean
   onParticipantNameClick?: () => void
-  composerInput?: ChannelViewProps['composerInput']
 }> = ({
   onBack,
   showBackButton,
@@ -368,7 +382,6 @@ const ChannelViewInner: React.FC<{
   viewerLanguage,
   showChannelInfo = true,
   onParticipantNameClick,
-  composerInput,
 }) => {
   const { channel } = useChannelStateContext()
 
@@ -390,10 +403,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 =
@@ -485,7 +498,6 @@ const ChannelViewInner: React.FC<{
             renderFooter={() => renderMessageInputFooter?.(channel)}
             disabled={composerDisabled}
             disabledReason={composerDisabledReason}
-            composerInput={composerInput}
           />
         </Window>
       </WithComponents>
@@ -532,7 +544,6 @@ export const ChannelView = React.memo<ChannelViewProps>(
     viewerLanguage,
     showChannelInfo = true,
     onParticipantNameClick,
-    composerInput,
   }) => {
     // Custom send message handler that:
     // 1. Applies messageMetadata if provided
@@ -647,7 +658,6 @@ 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,40 +204,6 @@ 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,15 +23,6 @@ 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
@@ -110,18 +101,6 @@ 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> = ({
@@ -129,7 +108,6 @@ export const CustomMessageInput: React.FC<CustomMessageInputProps> = ({
   renderFooter,
   disabled = false,
   disabledReason,
-  composerInput,
 }) => {
   const { channel } = useChannelStateContext()
   const isFrozen = channel?.data?.frozen === true
@@ -165,7 +143,7 @@ export const CustomMessageInput: React.FC<CustomMessageInputProps> = ({
           </div>
         )}
         <ComposerLockedContext.Provider value={isFrozen}>
-          <MessageInput Input={composerInput ?? CustomMessageInputInner} />
+          <MessageInput Input={CustomMessageInputInner} />
         </ComposerLockedContext.Provider>
       </div>
       {renderFooter?.()}

package/src/components/MessagingShell/index.tsx

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

package/src/components/ParticipantBadges.tsx

@@ -0,0 +1,39 @@
+import { CurrencyDollarIcon, StarIcon } from '@phosphor-icons/react'
+import React from 'react'
+import type { ChannelMemberResponse } from 'stream-chat'
+
+export const ParticipantBadges: React.FC<{
+  participant?: ChannelMemberResponse
+  isStarred?: boolean
+}> = ({ participant, isStarred = false }) => {
+  const isCustomer = participant?.customer === true
+
+  if (!isCustomer && !isStarred) return null
+
+  return (
+    <span className="inline-flex shrink-0 items-center gap-1">
+      {isCustomer && (
+        <span
+          role="img"
+          aria-label="Customer"
+          className="inline-flex size-4 items-center justify-center rounded-full bg-[#22C55E] text-white"
+        >
+          <CurrencyDollarIcon
+            aria-hidden="true"
+            className="size-3"
+            weight="bold"
+          />
+        </span>
+      )}
+      {isStarred && (
+        <span
+          role="img"
+          aria-label="Starred conversation"
+          className="inline-flex size-4 items-center justify-center rounded-full bg-[#F6C343] text-white"
+        >
+          <StarIcon aria-hidden="true" className="size-3" weight="fill" />
+        </span>
+      )}
+    </span>
+  )
+}

package/src/hooks/useChannelStar.ts

@@ -1,5 +1,5 @@
 import { useEffect, useState } from 'react'
-import { Channel, Event } from 'stream-chat'
+import type { Channel, Event } from 'stream-chat'
 
 export const useChannelStar = (channel?: Channel) => {
   const [isChannelStarred, setIsChannelStarred] = useState(
@@ -15,15 +15,18 @@ export const useChannelStar = (channel?: Channel) => {
     setIsChannelStarred(!!channel.state.membership?.pinned_at)
 
     const handleMemberUpdate = (event: Event) => {
-      setIsChannelStarred(
-        event?.member ? !!event.member.pinned_at : !!channel.state.membership?.pinned_at
-      )
+      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)
     }
 
-    channel.on('member.updated', handleMemberUpdate)
+    const subscription = channel.on('member.updated', handleMemberUpdate)
 
     return () => {
-      channel.off('member.updated', handleMemberUpdate)
+      subscription.unsubscribe()
     }
   }, [channel])
 

package/src/index.ts

@@ -30,7 +30,6 @@ 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,7 +2,8 @@
  * Stream Chat custom data type augmentation.
  *
  * This file extends Stream Chat's type system by augmenting their empty
- * CustomMessageData and CustomChannelData interfaces with our custom properties.
+ * CustomMessageData, CustomChannelData, CustomMemberData, and CustomUserData
+ * interfaces with our custom properties.
  *
  * @see https://getstream.io/chat/docs/sdk/react/guides/typescript_and_custom_data_types/
  *
@@ -98,6 +99,14 @@ 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.
@@ -115,4 +124,10 @@ declare module 'stream-chat' {
      */
     dm_agent_system_type?: DmAgentSystemType
   }
+
+  interface CustomUserData {
+    is_account?: boolean
+    is_follower?: boolean
+    username?: string
+  }
 }

package/src/types.ts

@@ -324,23 +324,6 @@ 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
@@ -376,7 +359,6 @@ export type ChannelViewPassthroughProps = Pick<
   | 'renderMessage'
   | 'onMessageLinkClick'
   | 'showChannelInfo'
-  | 'composerInput'
 >
 
 /**