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

package/dist/index.cjs

@@ -1,2 +1,2 @@
-"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;
+"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

@@ -200,15 +200,18 @@ export declare interface ChannelViewProps {
      */
     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.
+     * 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 rendered below the composer while it is locked.
-     * Only shown when `composerDisabled` is true (or the channel is frozen).
+     * Explanatory text shown inside the locked panel. Only rendered when
+     * `composerDisabled` is true.
      */
     composerDisabledReason?: string;
     /**

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-BmCc1-F3.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.1.0-rc-1780514752",
+  "version": "3.1.0",
   "description": "React messaging components built on messaging-core for web applications",
   "type": "module",
   "main": "dist/index.cjs",

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>
@@ -279,8 +279,7 @@ RestrictedOfficialChannel.args = {
   showReportParticipant: false,
   showFollowerStatus: false,
   composerDisabled: true,
-  composerDisabledReason:
-    'Message Linktree from your profile to start the conversation',
+  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),
@@ -289,7 +288,7 @@ 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.',
+        '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.',
     },
   },
 }
@@ -463,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>
@@ -520,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/CustomMessageInput/CustomMessageInput.test.tsx

@@ -178,45 +178,43 @@ describe('CustomMessageInput', () => {
     expect(sendButton).toBeDisabled()
   })
 
-  it('locks the composer when the disabled prop is true (channel not frozen)', () => {
+  it('replaces the composer with the locked panel when disabled (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(
+    const { container } = renderWithProviders(
       <CustomMessageInput
         disabled
-        disabledReason="Message Linktree from your profile to reply"
+        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(
-      screen.getByText(/Message Linktree from your profile to reply/i)
+      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 disabled reason when the composer is not disabled', () => {
+  it('does not render the locked panel when the composer is not disabled', () => {
     mockChannelData = {}
 
-    renderWithProviders(
+    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()
   })
 })

package/src/components/CustomMessageInput/index.tsx

@@ -1,5 +1,5 @@
 import { ArrowUpIcon } from '@phosphor-icons/react'
-import React, { useCallback } from 'react'
+import React, { useContext } from 'react'
 import {
   AttachmentPreviewList as DefaultAttachmentPreviewList,
   MessageInput,
@@ -13,6 +13,16 @@ import {
 
 import { CustomLinkPreviewList } from '../CustomLinkPreviewList'
 
+/**
+ * Carries the channel's `frozen` state down to CustomMessageInputInner, which
+ * renders the composer as a read-only/disabled input. Using a context — rather
+ * than closing the value into the `Input` component passed to Stream's
+ * <MessageInput> — keeps CustomMessageInputInner a stable reference, so the
+ * value toggling re-renders the composer instead of unmounting and remounting
+ * it (which would drop textarea focus and interrupt IME composition).
+ */
+const ComposerLockedContext = React.createContext(false)
+
 const DefaultSendButton: React.FC<{
   sendMessage: () => void
   disabled?: boolean
@@ -29,9 +39,8 @@ const DefaultSendButton: React.FC<{
   </button>
 )
 
-const CustomMessageInputInner: React.FC<{ disabled?: boolean }> = ({
-  disabled = false,
-}) => {
+const CustomMessageInputInner: React.FC = () => {
+  const disabled = useContext(ComposerLockedContext)
   const { handleSubmit } = useMessageInputContext()
 
   const hasSendableData = useMessageComposerHasSendableData()
@@ -79,16 +88,17 @@ 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.
+   * Replace the composer entirely with a non-interactive locked panel that
+   * shows `disabledReason`. Used by the Linktree official channel, where the
+   * linker cannot message Linktree from the inbox. Defaults to false.
+   *
+   * Distinct from the channel's `frozen` flag, which keeps the composer
+   * rendered but read-only/dimmed.
    */
   disabled?: boolean
   /**
-   * Explanatory text rendered below the composer while it is locked.
-   * Only shown when the composer is disabled (via `disabled` or `frozen`).
+   * Explanatory text shown inside the locked panel. Only rendered when
+   * `disabled` is true.
    */
   disabledReason?: string
 }
@@ -101,19 +111,30 @@ export const CustomMessageInput: React.FC<CustomMessageInputProps> = ({
 }) => {
   const { channel } = useChannelStateContext()
   const isFrozen = channel?.data?.frozen === true
-  const isLocked = isFrozen || disabled
 
-  const Input = useCallback(
-    () => <CustomMessageInputInner disabled={isLocked} />,
-    [isLocked]
-  )
+  // Linktree official channel: the composer is replaced by an info panel
+  // explaining the linker cannot send messages on this thread.
+  if (disabled) {
+    return (
+      <>
+        <div className="messaging-composer-locked-panel flex w-full flex-col items-center justify-center gap-3 px-6 py-4">
+          {disabledReason ? (
+            <p className="max-w-[345px] text-center text-xs font-normal leading-[1.3] tracking-[0.12px] text-black/40">
+              {disabledReason}
+            </p>
+          ) : null}
+        </div>
+        {renderFooter?.()}
+      </>
+    )
+  }
 
   return (
     <div className="flex flex-col gap-4 p-4">
       <div
         // @ts-expect-error Only React 19 onwards has `inert` in its types.
-        inert={isLocked ? '' : undefined}
-        aria-disabled={isLocked || undefined}
+        inert={isFrozen ? '' : undefined}
+        aria-disabled={isFrozen || undefined}
         className="message-input flex items-end gap-4 aria-disabled:opacity-40"
       >
         {renderActions && (
@@ -121,13 +142,10 @@ export const CustomMessageInput: React.FC<CustomMessageInputProps> = ({
             {renderActions()}
           </div>
         )}
-        <MessageInput Input={Input} />
+        <ComposerLockedContext.Provider value={isFrozen}>
+          <MessageInput Input={CustomMessageInputInner} />
+        </ComposerLockedContext.Provider>
       </div>
-      {isLocked && disabledReason ? (
-        <p className="message-input-disabled-reason px-2 text-center text-sm text-black/55">
-          {disabledReason}
-        </p>
-      ) : null}
       {renderFooter?.()}
     </div>
   )

package/src/types.ts

@@ -153,16 +153,19 @@ export interface ChannelViewProps {
   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.
+   * 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 rendered below the composer while it is locked.
-   * Only shown when `composerDisabled` is true (or the channel is frozen).
+   * Explanatory text shown inside the locked panel. Only rendered when
+   * `composerDisabled` is true.
    */
   composerDisabledReason?: string