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

package/src/components/CustomMessage/index.tsx

@@ -198,6 +198,7 @@ const CustomMessageWithContext = (props: CustomMessageWithContextProps) => {
         className={rootClassName}
         key={message.id}
         data-message-id={message.id}
+        data-dd-privacy="mask"
       >
         {PinIndicator && <PinIndicator />}
         {!!reminder && <ReminderNotification reminder={reminder} />}

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
@@ -52,7 +61,10 @@ const CustomMessageInputInner: React.FC = () => {
   } = useComponentContext('CustomMessageInput')
 
   return (
-    <div className="central-container flex flex-col gap-2 min-w-0 w-full p-2 bg-white rounded-[1.5rem] shadow-[0_4px_16px_0_rgba(0,0,0,0.08),0_1px_2px_0_rgba(0,0,0,0.04),0_0_0_1px_rgba(0,0,0,0.04)]">
+    <div
+      className="central-container flex flex-col gap-2 min-w-0 w-full p-2 bg-white rounded-[1.5rem] shadow-[0_4px_16px_0_rgba(0,0,0,0.08),0_1px_2px_0_rgba(0,0,0,0.04),0_0_0_1px_rgba(0,0,0,0.04)]"
+      data-dd-privacy="mask"
+    >
       <QuotedMessagePreview />
       <CustomLinkPreviewList />
       <AttachmentPreviewList />
@@ -101,6 +113,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 +132,7 @@ export const CustomMessageInput: React.FC<CustomMessageInputProps> = ({
   renderFooter,
   disabled = false,
   disabledReason,
+  composerInput,
 }) => {
   const { channel } = useChannelStateContext()
   const isFrozen = channel?.data?.frozen === true
@@ -143,7 +168,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/MediaMessage/index.tsx

@@ -302,7 +302,7 @@ const MediaMessageRoot: React.FC<MediaMessageProps> = ({
     : 'str-chat__message str-chat__message-simple str-chat__message--other'
 
   return (
-    <div className={messageClass}>
+    <div className={messageClass} data-dd-privacy="mask">
       {!isMyMessage && message.user && (
         <Avatar
           className="str-chat__avatar str-chat__message-sender-avatar"
@@ -342,14 +342,18 @@ const MediaMessageCreatorEntry: React.FC<{ message: LocalMessage }> = ({
   const linkAttachment = resolveLinkAttachment(message)
   if (linkAttachment) {
     return (
-      <div className={linkCardShellClass(true)}>
+      <div className={linkCardShellClass(true)} data-dd-privacy="mask">
         <LinkCard attachment={linkAttachment} isMyMessage={true} />
       </div>
     )
   }
   const resolved = resolveMediaFromMessage(message)
   if (!resolved) return null
-  return <Creator {...resolved} />
+  return (
+    <div style={{ display: 'contents' }} data-dd-privacy="mask">
+      <Creator {...resolved} />
+    </div>
+  )
 }
 
 const MediaMessageVisitorEntry: React.FC<{ message: LocalMessage }> = ({
@@ -358,14 +362,18 @@ const MediaMessageVisitorEntry: React.FC<{ message: LocalMessage }> = ({
   const linkAttachment = resolveLinkAttachment(message)
   if (linkAttachment) {
     return (
-      <div className={linkCardShellClass(false)}>
+      <div className={linkCardShellClass(false)} data-dd-privacy="mask">
         <LinkCard attachment={linkAttachment} isMyMessage={false} />
       </div>
     )
   }
   const resolved = resolveMediaFromMessage(message)
   if (!resolved) return null
-  return <Visitor {...resolved} />
+  return (
+    <div style={{ display: 'contents' }} data-dd-privacy="mask">
+      <Visitor {...resolved} />
+    </div>
+  )
 }
 
 export const MediaMessage = Object.assign(MediaMessageRoot, {

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/components/ParticipantBadges.tsx

@@ -0,0 +1,42 @@
+import { CurrencyDollarIcon, StarIcon } from '@phosphor-icons/react'
+import React from 'react'
+import type { Channel, ChannelMemberResponse } from 'stream-chat'
+
+import { useChannelStar } from '../hooks/useChannelStar'
+
+export const ParticipantBadges: React.FC<{
+  channel?: Channel
+  participant?: ChannelMemberResponse
+}> = ({ channel, participant }) => {
+  const isCustomer = participant?.customer === true
+  const isStarred = useChannelStar(channel)
+
+  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

@@ -10,8 +10,6 @@ export { default as LockedAttachment } from './components/LockedAttachment'
 export { default as LinkAttachment } from './components/LinkAttachment'
 export { default as MessageAttachment } from './components/MessageAttachment'
 export { Avatar } from './components/Avatar'
-export { VerifiedBadge } from './components/VerifiedBadge'
-export type { VerifiedBadgeProps } from './components/VerifiedBadge'
 export { FaqList } from './components/FaqList'
 export { FaqListItem } from './components/FaqList/FaqListItem'
 export { ChannelEmptyState } from './components/MessagingShell/ChannelEmptyState'
@@ -32,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/stories/mocks.tsx

@@ -54,6 +54,14 @@ export const MockChatProviderWithChannels: React.FC<{
     // Create mock channels
     const mockChannels = Array.from({ length: channelCount }, (_, i) => {
       const participant = mockParticipants[i % mockParticipants.length]
+      const eventListeners = new Map<string, Set<(...args: unknown[]) => void>>()
+
+      const latestMessage = {
+        id: `msg-${i}-1`,
+        text: `Hey! This is message ${i + 1}`,
+        created_at: new Date(Date.now() - 1000 * 60 * (i + 1)),
+        user: participant,
+      }
 
       const mockChannel = {
         id: `channel-${i + 1}`,
@@ -71,18 +79,35 @@ export const MockChatProviderWithChannels: React.FC<{
               user_id: participant.id,
             },
           },
-          messages: [
+          latestMessages: [latestMessage],
+          messages: [latestMessage],
+          messageSets: [
             {
-              id: `msg-${i}-1`,
-              text: `Hey! This is message ${i + 1}`,
-              created_at: new Date(Date.now() - 1000 * 60 * (i + 1)),
-              user: participant,
+              isCurrent: true,
+              isLatest: true,
+              messages: [latestMessage],
             },
           ],
           unreadCount: i === 0 ? 2 : 0,
           read: {},
         },
         // Mock channel methods
+        countUnread: () => (i === 0 ? 2 : 0),
+        muteStatus: () => false,
+        on: (eventName: string, listener: (...args: unknown[]) => void) => {
+          if (!eventListeners.has(eventName)) {
+            eventListeners.set(eventName, new Set())
+          }
+          eventListeners.get(eventName)?.add(listener)
+          return {
+            unsubscribe: () => {
+              eventListeners.get(eventName)?.delete(listener)
+            },
+          }
+        },
+        off: (eventName: string, listener: (...args: unknown[]) => void) => {
+          eventListeners.get(eventName)?.delete(listener)
+        },
         query: async () => ({ messages: [] }),
         watch: async () => ({ messages: [] }),
       }

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,12 +99,12 @@ declare module 'stream-chat' {
     chatbot_paused?: boolean
   }
 
-  interface CustomUserData {
+  interface CustomMemberData {
     /**
-     * Whether the user is a verified Linktree profile. When true, a
-     * verification badge is shown next to their name in messaging.
+     * Whether the member should be identified as a customer in participant UI.
+     * Stored on the channel member so it is scoped to this conversation.
      */
-    is_verified?: boolean
+    customer?: boolean
   }
 
   interface CustomMessageData {
@@ -123,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

@@ -11,7 +11,10 @@ import type {
   LocalMessage,
   SendMessageAPIResponse,
 } from 'stream-chat'
-import type { EmptyStateIndicatorProps } from 'stream-chat-react'
+import type {
+  ChannelPreviewUIComponentProps,
+  EmptyStateIndicatorProps,
+} from 'stream-chat-react'
 
 import type { MessageMetadata } from './stream-custom-data'
 
@@ -89,6 +92,11 @@ export interface ChannelListProps {
    */
   sort?: ChannelSort
   customEmptyStateIndicator?: React.ComponentType<EmptyStateIndicatorProps>
+  /**
+   * Custom component rendered for each channel row in the conversation list.
+   * Defaults to the package's built-in CustomChannelPreview.
+   */
+  channelPreview?: ComponentType<ChannelPreviewUIComponentProps>
   renderMessagePreview?: (
     message: LocalMessage | undefined,
     defaultPreview?: string
@@ -324,6 +332,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 +384,7 @@ export type ChannelViewPassthroughProps = Pick<
   | 'renderMessage'
   | 'onMessageLinkClick'
   | 'showChannelInfo'
+  | 'composerInput'
 >
 
 /**