@linktr.ee/messaging-react 3.0.0 → 3.1.0

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-D-5Igybf.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,39 @@ 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;
+    /**
+     * Replace the message composer with a non-interactive locked panel showing
+     * `composerDisabledReason`. Defaults to false. Used by the Linktree official
+     * channel, where the linker cannot message Linktree from the inbox (they
+     * message Linktree from its public profile instead).
+     *
+     * Distinct from the channel's `frozen` flag, which keeps the composer
+     * rendered but read-only/dimmed.
+     */
+    composerDisabled?: boolean;
+    /**
+     * Explanatory text shown inside the locked panel. Only rendered when
+     * `composerDisabled` is true.
+     */
+    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-CJEl_fID.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",
   "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

@@ -225,7 +225,7 @@ const Template: StoryFn<TemplateProps> = (args) => {
 
   return (
     <Chat client={client}>
-      <div className="h-screen w-full bg-white">
+      <div className="h-screen w-full bg-[#FBFAF9]">
         <ChannelView {...channelViewProps} channel={channel} />
       </div>
     </Chat>
@@ -269,6 +269,30 @@ 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: 'Only Linktree can send messages on this thread',
+  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 replaced by a locked panel explaining the linker cannot send messages on this thread. 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,
@@ -438,7 +462,7 @@ const WithStarButtonTemplate: StoryFn<ComponentProps> = (args) => {
 
   return (
     <Chat client={client}>
-      <div className="h-screen w-full bg-white">
+      <div className="h-screen w-full bg-[#FBFAF9]">
         <ChannelView {...args} channel={channel} />
       </div>
     </Chat>
@@ -495,7 +519,7 @@ const EmptyTemplate: StoryFn<ComponentProps> = (args) => {
 
   return (
     <Chat client={client}>
-      <div className="h-screen w-full bg-white">
+      <div className="h-screen w-full bg-[#FBFAF9]">
         <ChannelView {...args} channel={channel} />
       </div>
     </Chat>

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,44 @@ describe('CustomMessageInput', () => {
     // useMessageComposerHasSendableData is mocked to return false
     expect(sendButton).toBeDisabled()
   })
+
+  it('replaces the composer with the locked panel when disabled (channel not frozen)', () => {
+    mockChannelData = {}
+
+    const { container } = renderWithProviders(
+      <CustomMessageInput
+        disabled
+        disabledReason="Only Linktree can send messages on this thread"
+      />
+    )
+
+    // The interactive input is gone entirely — no textarea, no send button.
+    expect(
+      screen.queryByTestId('stream-message-input')
+    ).not.toBeInTheDocument()
+    expect(screen.queryByTestId('textarea-composer')).not.toBeInTheDocument()
+    expect(container.querySelector('.message-input')).not.toBeInTheDocument()
+
+    // The locked panel with the reason replaces it.
+    expect(
+      container.querySelector('.messaging-composer-locked-panel')
+    ).toBeInTheDocument()
+    expect(
+      screen.getByText(/Only Linktree can send messages on this thread/i)
+    ).toBeInTheDocument()
+  })
+
+  it('does not render the locked panel when the composer is not disabled', () => {
+    mockChannelData = {}
+
+    const { container } = renderWithProviders(
+      <CustomMessageInput disabledReason="should not show" />
+    )
+
+    expect(
+      container.querySelector('.messaging-composer-locked-panel')
+    ).not.toBeInTheDocument()
+    expect(screen.queryByText(/should not show/i)).not.toBeInTheDocument()
+    expect(screen.getByTestId('stream-message-input')).toBeInTheDocument()
+  })
 })