@linktr.ee/messaging-react 3.0.0 → 3.1.0-rc-1780514752

package/dist/index.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./index-DqNobxVj.cjs");exports.ActionButton=e.ActionButton;exports.Avatar=e.Avatar;exports.ChannelEmptyState=e.ChannelEmptyState;exports.ChannelList=e.ChannelList;exports.ChannelView=e.ChannelView;exports.CustomMessageProvider=e.CustomMessageProvider;exports.FaqList=e.FaqList;exports.FaqListItem=e.FaqListItem;exports.LinkAttachment=e.LinkAttachment;exports.LockedAttachment=e.LockedAttachment;exports.MediaMessage=e.MediaMessage;exports.MessageAttachment=e.MessageAttachment;exports.MessageVoteButtons=e.MessageVoteButtons;exports.MessagingProvider=e.MessagingProvider;exports.MessagingShell=e.MessagingShell;exports.buildCompactMetaLabel=e.buildCompactMetaLabel;exports.formatFileSize=e.formatFileSize;exports.formatRelativeTime=e.formatRelativeTime;exports.getFileExtensionLabel=e.getFileExtensionLabel;exports.getMessageDisplayText=e.getMessageDisplayText;exports.isLinkAttachment=e.isLinkAttachment;exports.isUuidLike=e.isUuidLike;exports.messageAttachmentGroupPositionFromStream=e.bubbleGroupPositionFromStream;exports.normalizeLanguageCode=e.normalizeLanguageCode;exports.resolveLinkAttachment=e.resolveLinkAttachment;exports.resolveMediaFromMessage=e.resolveMediaFromMessage;exports.resolveParticipantDisplayName=e.resolveParticipantDisplayName;exports.useCustomMessage=e.useCustomMessage;exports.useMessageVote=e.useMessageVote;exports.useMessaging=e.useMessaging;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./index-Cg-bxSZn.cjs");exports.ActionButton=e.ActionButton;exports.Avatar=e.Avatar;exports.ChannelEmptyState=e.ChannelEmptyState;exports.ChannelList=e.ChannelList;exports.ChannelView=e.ChannelView;exports.CustomMessageProvider=e.CustomMessageProvider;exports.FaqList=e.FaqList;exports.FaqListItem=e.FaqListItem;exports.LinkAttachment=e.LinkAttachment;exports.LockedAttachment=e.LockedAttachment;exports.MediaMessage=e.MediaMessage;exports.MessageAttachment=e.MessageAttachment;exports.MessageVoteButtons=e.MessageVoteButtons;exports.MessagingProvider=e.MessagingProvider;exports.MessagingShell=e.MessagingShell;exports.buildCompactMetaLabel=e.buildCompactMetaLabel;exports.formatFileSize=e.formatFileSize;exports.formatRelativeTime=e.formatRelativeTime;exports.getFileExtensionLabel=e.getFileExtensionLabel;exports.getMessageDisplayText=e.getMessageDisplayText;exports.isLinkAttachment=e.isLinkAttachment;exports.isUuidLike=e.isUuidLike;exports.messageAttachmentGroupPositionFromStream=e.bubbleGroupPositionFromStream;exports.normalizeLanguageCode=e.normalizeLanguageCode;exports.resolveLinkAttachment=e.resolveLinkAttachment;exports.resolveMediaFromMessage=e.resolveMediaFromMessage;exports.resolveParticipantDisplayName=e.resolveParticipantDisplayName;exports.useCustomMessage=e.useCustomMessage;exports.useMessageVote=e.useMessageVote;exports.useMessaging=e.useMessaging;
 //# sourceMappingURL=index.cjs.map

package/dist/index.d.ts

@@ -181,6 +181,36 @@ export declare interface ChannelViewProps {
      * Analytics callback fired when "Report" is clicked.
      */
     onReportParticipantClick?: () => void;
+    /**
+     * Show the "Block"/"Unblock" action in the channel info dialog.
+     * Defaults to true. Set false for restricted surfaces such as the
+     * Linktree official channel, where blocking is not offered.
+     */
+    showBlockParticipant?: boolean;
+    /**
+     * Show the "Report" action in the channel info dialog.
+     * Defaults to true. Set false for restricted surfaces such as the
+     * Linktree official channel, where reporting is not offered.
+     */
+    showReportParticipant?: boolean;
+    /**
+     * Show the subscription/follower-status label in the channel info dialog
+     * profile card. Defaults to true. Set false for restricted surfaces such
+     * as the Linktree official channel, where subscription status is hidden.
+     */
+    showFollowerStatus?: boolean;
+    /**
+     * Lock the message composer (read-only, send disabled). Defaults to false.
+     * Combined with the channel's `frozen` flag — either one locks the input.
+     * Used by the Linktree official channel, where the composer stays locked
+     * until the linker messages Linktree from its public profile.
+     */
+    composerDisabled?: boolean;
+    /**
+     * Explanatory text rendered below the composer while it is locked.
+     * Only shown when `composerDisabled` is true (or the channel is frozen).
+     */
+    composerDisabledReason?: string;
     /**
      * When true and DM agent is active on the channel (not paused),
      * messages will be sent with skip_push and silent flags to suppress

package/dist/index.js

@@ -1,4 +1,4 @@
-import { a as e, b as t, C as i, c as n, d as o, e as m, F as g, f as l, L as r, h as M, M as u, i as L, j as c, k as h, l as d, m as p, n as v, o as A, p as C, q as F, s as k, t as b, u as f, v as x, w as y, x as P, y as S, z as q, B as z, D as B } from "./index-BUT2yBvJ.js";
+import { a as e, b as t, C as i, c as n, d as o, e as m, F as g, f as l, L as r, h as M, M as u, i as L, j as c, k as h, l as d, m as p, n as v, o as A, p as C, q as F, s as k, t as b, u as f, v as x, w as y, x as P, y as S, z as q, B as z, D as B } from "./index-BmCc1-F3.js";
 export {
   e as ActionButton,
   t as Avatar,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@linktr.ee/messaging-react",
-  "version": "3.0.0",
+  "version": "3.1.0-rc-1780514752",
   "description": "React messaging components built on messaging-core for web applications",
   "type": "module",
   "main": "dist/index.cjs",

package/src/components/ChannelInfoDialog/ChannelInfoDialog.test.tsx

@@ -6,10 +6,14 @@ import { renderWithProviders, screen, userEvent, waitFor } from '../../test/util
 
 import { ChannelInfoDialog } from './index'
 
+const { getBlockedUsersMock } = vi.hoisted(() => ({
+  getBlockedUsersMock: vi.fn().mockResolvedValue([]),
+}))
+
 vi.mock('../../providers/MessagingProvider', () => ({
   useMessagingContext: () => ({
     service: {
-      getBlockedUsers: vi.fn().mockResolvedValue([]),
+      getBlockedUsers: getBlockedUsersMock,
       blockUser: vi.fn().mockResolvedValue(undefined),
       unBlockUser: vi.fn().mockResolvedValue(undefined),
     },
@@ -278,6 +282,44 @@ describe('ChannelInfoDialog', () => {
     windowOpenSpy.mockRestore()
   })
 
+  it('shows Block and Report actions by default', () => {
+    renderWithProviders(<ChannelInfoDialog {...defaultProps()} />)
+
+    expect(screen.getByText('Block')).toBeInTheDocument()
+    expect(screen.getByText('Report')).toBeInTheDocument()
+  })
+
+  it('hides the Block action when showBlockParticipant is false', () => {
+    renderWithProviders(
+      <ChannelInfoDialog {...defaultProps()} showBlockParticipant={false} />
+    )
+
+    expect(screen.queryByText('Block')).not.toBeInTheDocument()
+    expect(screen.queryByText('Unblock')).not.toBeInTheDocument()
+  })
+
+  it('fetches blocked users by default (Block action shown)', () => {
+    renderWithProviders(<ChannelInfoDialog {...defaultProps()} />)
+
+    expect(getBlockedUsersMock).toHaveBeenCalled()
+  })
+
+  it('does not fetch blocked users when showBlockParticipant is false', () => {
+    renderWithProviders(
+      <ChannelInfoDialog {...defaultProps()} showBlockParticipant={false} />
+    )
+
+    expect(getBlockedUsersMock).not.toHaveBeenCalled()
+  })
+
+  it('hides the Report action when showReportParticipant is false', () => {
+    renderWithProviders(
+      <ChannelInfoDialog {...defaultProps()} showReportParticipant={false} />
+    )
+
+    expect(screen.queryByText('Report')).not.toBeInTheDocument()
+  })
+
   it('returns null when participant is undefined', () => {
     const { container } = renderWithProviders(
       <ChannelInfoDialog

package/src/components/ChannelInfoDialog/index.tsx

@@ -33,6 +33,16 @@ export interface ChannelInfoDialogProps {
   onLeaveConversation?: (channel: ChannelType) => void
   onBlockParticipant?: (participantId?: string) => void
   showDeleteConversation?: boolean
+  /**
+   * Show the Block/Unblock action. Defaults to true.
+   * Set false to hide it (e.g. the Linktree official channel).
+   */
+  showBlockParticipant?: boolean
+  /**
+   * Show the Report action. Defaults to true.
+   * Set false to hide it (e.g. the Linktree official channel).
+   */
+  showReportParticipant?: boolean
   onDeleteConversationClick?: () => void
   onBlockParticipantClick?: () => void
   onReportParticipantClick?: () => void
@@ -53,6 +63,8 @@ export const ChannelInfoDialog: React.FC<ChannelInfoDialogProps> = ({
   onLeaveConversation,
   onBlockParticipant,
   showDeleteConversation = true,
+  showBlockParticipant = true,
+  showReportParticipant = true,
   onDeleteConversationClick,
   onBlockParticipantClick,
   onReportParticipantClick,
@@ -64,9 +76,11 @@ export const ChannelInfoDialog: React.FC<ChannelInfoDialogProps> = ({
   const [isLeaving, setIsLeaving] = useState(false)
   const [isUpdatingBlockStatus, setIsUpdatingBlockStatus] = useState(false)
 
-  // Check if participant is blocked when participant changes
+  // Check if participant is blocked when participant changes.
+  // Skipped when the Block action is hidden — the result would be unused
+  // (e.g. the Linktree official channel does not offer blocking).
   const checkIsParticipantBlocked = useCallback(async () => {
-    if (!service || !participant?.user?.id) return
+    if (!showBlockParticipant || !service || !participant?.user?.id) return
 
     try {
       const blockedUsers = await service.getBlockedUsers()
@@ -80,7 +94,7 @@ export const ChannelInfoDialog: React.FC<ChannelInfoDialogProps> = ({
         error
       )
     }
-  }, [service, participant?.user?.id])
+  }, [service, participant?.user?.id, showBlockParticipant])
 
   useEffect(() => {
     checkIsParticipantBlocked()
@@ -274,41 +288,45 @@ export const ChannelInfoDialog: React.FC<ChannelInfoDialogProps> = ({
                 </ActionButton>
               </li>
             )}
-            <li>
-              {isParticipantBlocked ? (
-                <ActionButton
-                  onClick={handleUnblockUser}
-                  disabled={isUpdatingBlockStatus}
-                  aria-busy={isUpdatingBlockStatus}
-                >
-                  {isUpdatingBlockStatus ? (
-                    <SpinnerGapIcon className="h-5 w-5 animate-spin" />
-                  ) : (
-                    <ProhibitInsetIcon className="h-5 w-5" />
-                  )}
-                  <span>Unblock</span>
-                </ActionButton>
-              ) : (
-                <ActionButton
-                  onClick={handleBlockUser}
-                  disabled={isUpdatingBlockStatus}
-                  aria-busy={isUpdatingBlockStatus}
-                >
-                  {isUpdatingBlockStatus ? (
-                    <SpinnerGapIcon className="h-5 w-5 animate-spin" />
-                  ) : (
-                    <ProhibitInsetIcon className="h-5 w-5" />
-                  )}
-                  <span>Block</span>
+            {showBlockParticipant && (
+              <li>
+                {isParticipantBlocked ? (
+                  <ActionButton
+                    onClick={handleUnblockUser}
+                    disabled={isUpdatingBlockStatus}
+                    aria-busy={isUpdatingBlockStatus}
+                  >
+                    {isUpdatingBlockStatus ? (
+                      <SpinnerGapIcon className="h-5 w-5 animate-spin" />
+                    ) : (
+                      <ProhibitInsetIcon className="h-5 w-5" />
+                    )}
+                    <span>Unblock</span>
+                  </ActionButton>
+                ) : (
+                  <ActionButton
+                    onClick={handleBlockUser}
+                    disabled={isUpdatingBlockStatus}
+                    aria-busy={isUpdatingBlockStatus}
+                  >
+                    {isUpdatingBlockStatus ? (
+                      <SpinnerGapIcon className="h-5 w-5 animate-spin" />
+                    ) : (
+                      <ProhibitInsetIcon className="h-5 w-5" />
+                    )}
+                    <span>Block</span>
+                  </ActionButton>
+                )}
+              </li>
+            )}
+            {showReportParticipant && (
+              <li>
+                <ActionButton variant="danger" onClick={handleReportUser}>
+                  <FlagIcon className="h-5 w-5" />
+                  <span>Report</span>
                 </ActionButton>
-              )}
-            </li>
-            <li>
-              <ActionButton variant="danger" onClick={handleReportUser}>
-                <FlagIcon className="h-5 w-5" />
-                <span>Report</span>
-              </ActionButton>
-            </li>
+              </li>
+            )}
             {customChannelActions}
           </ul>
         </div>

package/src/components/ChannelView.stories.tsx

@@ -269,6 +269,31 @@ DmAgentHeader.parameters = {
   },
 }
 
+export const RestrictedOfficialChannel: StoryFn<TemplateProps> = Template.bind(
+  {}
+)
+RestrictedOfficialChannel.args = {
+  showBackButton: false,
+  // Restricted surface for the Linktree official channel:
+  showBlockParticipant: false,
+  showReportParticipant: false,
+  showFollowerStatus: false,
+  composerDisabled: true,
+  composerDisabledReason:
+    'Message Linktree from your profile to start the conversation',
+  followerStatus: true, // would normally render "Subscribed to you" — suppressed here
+  onLeaveConversation: (channel) =>
+    console.log('Leave conversation:', channel.id),
+}
+RestrictedOfficialChannel.parameters = {
+  docs: {
+    description: {
+      story:
+        'Restricted action surface used by the Linktree official channel: block, report, and the subscription-status label are hidden, and the composer is locked with an explanatory reason. Delete conversation, favorite, and chat info remain available. Open the chat info dialog (3-dot / name click) to see block & report removed.',
+    },
+  },
+}
+
 export const WithBackButton: StoryFn<TemplateProps> = Template.bind({})
 WithBackButton.args = {
   showBackButton: true,

package/src/components/ChannelView.test.tsx

@@ -45,12 +45,15 @@ vi.mock('../providers/MessagingProvider', () => ({
   useMessagingContext: () => ({ service: null, debug: false }),
 }))
 
+const messageInputProps: Array<Record<string, unknown>> = []
 vi.mock('./CustomMessageInput', () => ({
-  CustomMessageInput: ({
-    renderActions,
-  }: {
+  CustomMessageInput: (props: {
     renderActions?: () => React.ReactNode
-  }) => <div data-testid="message-input">{renderActions?.()}</div>,
+    [key: string]: unknown
+  }) => {
+    messageInputProps.push({ ...props })
+    return <div data-testid="message-input">{props.renderActions?.()}</div>
+  },
 }))
 
 vi.mock('./CustomMessage', () => ({
@@ -65,8 +68,12 @@ vi.mock('./CustomDateSeparator', () => ({
   CustomDateSeparator: () => <div data-testid="custom-date-separator" />,
 }))
 
+const channelInfoDialogProps: Array<Record<string, unknown>> = []
 vi.mock('./ChannelInfoDialog', () => ({
-  ChannelInfoDialog: () => <div data-testid="channel-info-dialog" />,
+  ChannelInfoDialog: (props: Record<string, unknown>) => {
+    channelInfoDialogProps.push({ ...props })
+    return <div data-testid="channel-info-dialog" />
+  },
 }))
 
 const avatarRenderCalls: Array<Record<string, unknown>> = []
@@ -144,9 +151,81 @@ describe('ChannelView', () => {
     activeChannel = undefined
     activeChannelProps = {}
     avatarRenderCalls.length = 0
+    channelInfoDialogProps.length = 0
+    messageInputProps.length = 0
     mockIsStarred = false
   })
 
+  const lastDialogProps = () =>
+    channelInfoDialogProps[channelInfoDialogProps.length - 1]
+  const lastInputProps = () =>
+    messageInputProps[messageInputProps.length - 1]
+
+  it('keeps block and report visible by default in the info dialog', () => {
+    renderWithProviders(<ChannelView channel={createChannel()} />)
+
+    expect(lastDialogProps().showBlockParticipant).not.toBe(false)
+    expect(lastDialogProps().showReportParticipant).not.toBe(false)
+  })
+
+  it('hides block and report in the info dialog when restricted', () => {
+    renderWithProviders(
+      <ChannelView
+        channel={createChannel()}
+        showBlockParticipant={false}
+        showReportParticipant={false}
+      />
+    )
+
+    expect(lastDialogProps().showBlockParticipant).toBe(false)
+    expect(lastDialogProps().showReportParticipant).toBe(false)
+  })
+
+  it('passes the follower status label to the info dialog by default', () => {
+    const channel = createChannel()
+    ;(channel as unknown as { data: Record<string, unknown> }).data = {
+      isFollower: true,
+    }
+
+    renderWithProviders(<ChannelView channel={channel} />)
+
+    expect(lastDialogProps().followerStatusLabel).toBe('Subscribed to you')
+  })
+
+  it('suppresses the follower status label when showFollowerStatus is false', () => {
+    const channel = createChannel()
+    ;(channel as unknown as { data: Record<string, unknown> }).data = {
+      isFollower: true,
+    }
+
+    renderWithProviders(
+      <ChannelView channel={channel} showFollowerStatus={false} />
+    )
+
+    expect(lastDialogProps().followerStatusLabel).toBeUndefined()
+  })
+
+  it('passes composer disabled state and reason to the message input', () => {
+    renderWithProviders(
+      <ChannelView
+        channel={createChannel()}
+        composerDisabled
+        composerDisabledReason="Message Linktree from your profile to reply"
+      />
+    )
+
+    expect(lastInputProps().disabled).toBe(true)
+    expect(lastInputProps().disabledReason).toBe(
+      'Message Linktree from your profile to reply'
+    )
+  })
+
+  it('does not disable the composer by default', () => {
+    renderWithProviders(<ChannelView channel={createChannel()} />)
+
+    expect(lastInputProps().disabled).not.toBe(true)
+  })
+
   it('renders conversation footer between message list and message input', () => {
     const channel = createChannel()
     const renderConversationFooter = vi.fn((currentChannel: Channel) => (

package/src/components/ChannelView.tsx

@@ -259,6 +259,11 @@ const ChannelViewInner: React.FC<{
   onDeleteConversationClick?: () => void
   onBlockParticipantClick?: () => void
   onReportParticipantClick?: () => void
+  showBlockParticipant?: boolean
+  showReportParticipant?: boolean
+  showFollowerStatus?: boolean
+  composerDisabled?: boolean
+  composerDisabledReason?: string
   showStarButton?: boolean
   chatbotVotingEnabled?: boolean
   renderChannelBanner?: () => React.ReactNode
@@ -282,6 +287,11 @@ const ChannelViewInner: React.FC<{
   onDeleteConversationClick,
   onBlockParticipantClick,
   onReportParticipantClick,
+  showBlockParticipant = true,
+  showReportParticipant = true,
+  showFollowerStatus = true,
+  composerDisabled = false,
+  composerDisabledReason,
   showStarButton = false,
   chatbotVotingEnabled = false,
   renderChannelBanner,
@@ -323,8 +333,12 @@ const ChannelViewInner: React.FC<{
     currentUserIsAccount === false &&
     participantIsAccount === true
 
-  // Get follower status label from channel data
+  // Get follower status label from channel data.
+  // Suppressed entirely when showFollowerStatus is false (e.g. the Linktree
+  // official channel hides subscription status).
   const followerStatusLabel = React.useMemo(() => {
+    if (!showFollowerStatus) return undefined
+
     const channelExtraData = (channel.data ?? {}) as {
       followerStatus?: string
       isFollower?: boolean
@@ -342,7 +356,7 @@ const ChannelViewInner: React.FC<{
     }
     // Otherwise, don't show any status
     return undefined
-  }, [channel.data])
+  }, [channel.data, showFollowerStatus])
 
   const handleShowInfo = useCallback(() => {
     infoDialogRef.current?.showModal()
@@ -424,6 +438,8 @@ const ChannelViewInner: React.FC<{
             key="lt-channel-message-input"
             renderActions={() => renderMessageInputActions?.(channel)}
             renderFooter={() => renderMessageInputFooter?.(channel)}
+            disabled={composerDisabled}
+            disabledReason={composerDisabledReason}
           />
         </Window>
       </WithComponents>
@@ -439,6 +455,8 @@ const ChannelViewInner: React.FC<{
         onLeaveConversation={onLeaveConversation}
         onBlockParticipant={onBlockParticipant}
         showDeleteConversation={showDeleteConversation}
+        showBlockParticipant={showBlockParticipant}
+        showReportParticipant={showReportParticipant}
         onDeleteConversationClick={onDeleteConversationClick}
         onBlockParticipantClick={onBlockParticipantClick}
         onReportParticipantClick={onReportParticipantClick}
@@ -468,6 +486,11 @@ export const ChannelView = React.memo<ChannelViewProps>(
     onDeleteConversationClick,
     onBlockParticipantClick,
     onReportParticipantClick,
+    showBlockParticipant = true,
+    showReportParticipant = true,
+    showFollowerStatus = true,
+    composerDisabled = false,
+    composerDisabledReason,
     dmAgentEnabled,
     messageMetadata,
     onMessageSent,
@@ -580,6 +603,11 @@ export const ChannelView = React.memo<ChannelViewProps>(
               onDeleteConversationClick={onDeleteConversationClick}
               onBlockParticipantClick={onBlockParticipantClick}
               onReportParticipantClick={onReportParticipantClick}
+              showBlockParticipant={showBlockParticipant}
+              showReportParticipant={showReportParticipant}
+              showFollowerStatus={showFollowerStatus}
+              composerDisabled={composerDisabled}
+              composerDisabledReason={composerDisabledReason}
               showStarButton={showStarButton}
               dmAgentEnabled={dmAgentEnabled}
               chatbotVotingEnabled={chatbotVotingEnabled}

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

@@ -177,4 +177,46 @@ describe('CustomMessageInput', () => {
     // useMessageComposerHasSendableData is mocked to return false
     expect(sendButton).toBeDisabled()
   })
+
+  it('locks the composer when the disabled prop is true (channel not frozen)', () => {
+    mockChannelData = {}
+
+    const { container } = renderWithProviders(<CustomMessageInput disabled />)
+
+    const messageInput = container.querySelector('.message-input')
+    expect(messageInput).toHaveAttribute('aria-disabled', 'true')
+    expect(messageInput).toHaveAttribute('inert')
+
+    const textarea = screen.getByTestId('textarea-composer')
+    expect(textarea).toHaveAttribute('readonly')
+    expect(textarea).toHaveAttribute('tabindex', '-1')
+
+    const sendButton = screen.getByRole('button', { name: /send/i })
+    expect(sendButton).toBeDisabled()
+  })
+
+  it('renders the disabled reason when the composer is disabled with a reason', () => {
+    mockChannelData = {}
+
+    renderWithProviders(
+      <CustomMessageInput
+        disabled
+        disabledReason="Message Linktree from your profile to reply"
+      />
+    )
+
+    expect(
+      screen.getByText(/Message Linktree from your profile to reply/i)
+    ).toBeInTheDocument()
+  })
+
+  it('does not render the disabled reason when the composer is not disabled', () => {
+    mockChannelData = {}
+
+    renderWithProviders(
+      <CustomMessageInput disabledReason="should not show" />
+    )
+
+    expect(screen.queryByText(/should not show/i)).not.toBeInTheDocument()
+  })
 })

package/src/components/CustomMessageInput/index.tsx

@@ -1,5 +1,5 @@
 import { ArrowUpIcon } from '@phosphor-icons/react'
-import React from 'react'
+import React, { useCallback } from 'react'
 import {
   AttachmentPreviewList as DefaultAttachmentPreviewList,
   MessageInput,
@@ -29,13 +29,13 @@ const DefaultSendButton: React.FC<{
   </button>
 )
 
-const CustomMessageInputInner: React.FC = () => {
-  const { channel } = useChannelStateContext()
+const CustomMessageInputInner: React.FC<{ disabled?: boolean }> = ({
+  disabled = false,
+}) => {
   const { handleSubmit } = useMessageInputContext()
 
   const hasSendableData = useMessageComposerHasSendableData()
-  const isFrozen = channel?.data?.frozen === true
-  const isSendDisabled = isFrozen || !hasSendableData
+  const isSendDisabled = disabled || !hasSendableData
 
   const {
     SendButton = DefaultSendButton,
@@ -50,16 +50,16 @@ const CustomMessageInputInner: React.FC = () => {
       <div className="flex">
         <div className="w-full ml-2 mr-4 self-center leading-[0]">
           <TextareaComposer
-            aria-disabled={isFrozen || undefined}
+            aria-disabled={disabled || undefined}
             className="w-full resize-none outline-none leading-6"
             // While this might usually be considered an anti-pattern, in most
             // cases, when a message thread is rendered, we want the input to
             // gain focus automatically.
             // eslint-disable-next-line jsx-a11y/no-autofocus
-            autoFocus={!isFrozen}
+            autoFocus={!disabled}
             maxRows={4}
-            readOnly={isFrozen}
-            tabIndex={isFrozen ? -1 : undefined}
+            readOnly={disabled}
+            tabIndex={disabled ? -1 : undefined}
           />
         </div>
         <SendButton
@@ -78,21 +78,42 @@ const CustomMessageInputInner: React.FC = () => {
 export interface CustomMessageInputProps {
   renderActions?: () => React.ReactNode
   renderFooter?: () => React.ReactNode
+  /**
+   * Lock the composer (read-only textarea, disabled send, no autofocus).
+   * Combined with the channel's `frozen` flag — either one locks the input.
+   * Used by the Linktree official channel, where the composer stays locked
+   * until the linker messages Linktree from its public profile.
+   * Defaults to false.
+   */
+  disabled?: boolean
+  /**
+   * Explanatory text rendered below the composer while it is locked.
+   * Only shown when the composer is disabled (via `disabled` or `frozen`).
+   */
+  disabledReason?: string
 }
 
 export const CustomMessageInput: React.FC<CustomMessageInputProps> = ({
   renderActions,
   renderFooter,
+  disabled = false,
+  disabledReason,
 }) => {
   const { channel } = useChannelStateContext()
   const isFrozen = channel?.data?.frozen === true
+  const isLocked = isFrozen || disabled
+
+  const Input = useCallback(
+    () => <CustomMessageInputInner disabled={isLocked} />,
+    [isLocked]
+  )
 
   return (
     <div className="flex flex-col gap-4 p-4">
       <div
         // @ts-expect-error Only React 19 onwards has `inert` in its types.
-        inert={isFrozen ? '' : undefined}
-        aria-disabled={isFrozen || undefined}
+        inert={isLocked ? '' : undefined}
+        aria-disabled={isLocked || undefined}
         className="message-input flex items-end gap-4 aria-disabled:opacity-40"
       >
         {renderActions && (
@@ -100,8 +121,13 @@ export const CustomMessageInput: React.FC<CustomMessageInputProps> = ({
             {renderActions()}
           </div>
         )}
-        <MessageInput Input={CustomMessageInputInner} />
+        <MessageInput Input={Input} />
       </div>
+      {isLocked && disabledReason ? (
+        <p className="message-input-disabled-reason px-2 text-center text-sm text-black/55">
+          {disabledReason}
+        </p>
+      ) : null}
       {renderFooter?.()}
     </div>
   )