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

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-DluSX5DB.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-Cj6b1oEe.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.1",
   "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/components/MessagingShell/MessagingShell.test.tsx

@@ -168,4 +168,97 @@ describe('MessagingShell', () => {
       'Conversation ended'
     )
   })
+
+  it('does not create the channel again when the load effect re-runs for the same pair (e.g. service identity settles during connect)', async () => {
+    queryChannelsMock.mockResolvedValue([])
+    startChannelWithParticipantMock.mockResolvedValue(makeChannel('created-1'))
+
+    const { rerender } = renderWithProviders(
+      <MessagingShell
+        initialParticipantFilter="other-1"
+        initialParticipantData={{ id: 'other-1', name: 'Other Person' }}
+      />
+    )
+
+    await waitFor(() =>
+      expect(startChannelWithParticipantMock).toHaveBeenCalledTimes(1)
+    )
+
+    // A fresh `service` reference (as happens while the connection settles)
+    // re-runs the load effect. The once-per-pair guard must prevent a second
+    // create for the same viewer/participant pair before the new channel is
+    // indexed by queryChannels.
+    useMessagingReturn = {
+      ...useMessagingReturn,
+      service: { startChannelWithParticipant: startChannelWithParticipantMock },
+    }
+    rerender(
+      <MessagingShell
+        initialParticipantFilter="other-1"
+        initialParticipantData={{ id: 'other-1', name: 'Other Person' }}
+      />
+    )
+
+    await new Promise((resolve) => setTimeout(resolve, 50))
+    expect(startChannelWithParticipantMock).toHaveBeenCalledTimes(1)
+  })
+
+  it('does not wipe a newer pair load guard when an earlier in-flight load fails', async () => {
+    const PAIR_A = 'pair-A'
+    const PAIR_B = 'pair-B'
+
+    // Pair A's query stays pending until we reject it, simulating a load still
+    // in flight when the participant changes. Pair B resolves with no channel.
+    let rejectA: (reason?: unknown) => void = () => {}
+    queryChannelsMock.mockImplementation(
+      (query: { members?: { $eq?: string[] } }) => {
+        if (query?.members?.$eq?.includes(PAIR_A)) {
+          return new Promise((_resolve, reject) => {
+            rejectA = reject
+          })
+        }
+        return Promise.resolve([])
+      }
+    )
+    startChannelWithParticipantMock.mockResolvedValue(makeChannel('created-b'))
+
+    const { rerender } = renderWithProviders(
+      <MessagingShell
+        initialParticipantFilter={PAIR_A}
+        initialParticipantData={{ id: PAIR_A, name: 'A' }}
+      />
+    )
+
+    // Switch to pair B while A's load is still pending; B creates its channel.
+    rerender(
+      <MessagingShell
+        initialParticipantFilter={PAIR_B}
+        initialParticipantData={{ id: PAIR_B, name: 'B' }}
+      />
+    )
+
+    await waitFor(() =>
+      expect(startChannelWithParticipantMock).toHaveBeenCalledTimes(1)
+    )
+
+    // A's stale load now fails. Its catch must not clear pair B's guard.
+    rejectA(new Error('transient'))
+    await new Promise((resolve) => setTimeout(resolve, 0))
+
+    // Re-run the load effect for pair B (a fresh `service` reference). With B's
+    // guard intact this must not create a second channel.
+    useMessagingReturn = {
+      ...useMessagingReturn,
+      service: { startChannelWithParticipant: startChannelWithParticipantMock },
+    }
+    rerender(
+      <MessagingShell
+        initialParticipantFilter={PAIR_B}
+        initialParticipantData={{ id: PAIR_B, name: 'B' }}
+      />
+    )
+
+    await new Promise((resolve) => setTimeout(resolve, 50))
+    expect(startChannelWithParticipantMock).toHaveBeenCalledTimes(1)
+  })
 })

package/src/components/MessagingShell/index.tsx

@@ -65,13 +65,44 @@ export const MessagingShell: React.FC<MessagingShellProps> = ({
   const onChannelSelectRef = useRef(onChannelSelect)
   onChannelSelectRef.current = onChannelSelect
 
+  // Track the direct-conversation load to prevent repeated/concurrent loads.
+  // Identity-stable deps (above) stop the common re-fire, but legitimate dep
+  // changes (e.g. `service`/`client` settling during connect) can still re-run
+  // this effect before the just-created channel is indexed, each firing another
+  // startChannelWithParticipant call and creating duplicate welcome messages.
+  const directConversationLoadRef = useRef<string | null>(null)
+
+  // Mirror the currently-selected channel into a ref so the async load can read
+  // the latest value rather than the (possibly stale) effect-closure value.
+  const selectedChannelRef = useRef<Channel | null>(null)
+  useEffect(() => {
+    selectedChannelRef.current = selectedChannel
+  }, [selectedChannel])
+
   useEffect(() => {
     if (!client || !isConnected) return
 
-    const loadInitialChannel = async () => {
-      const userId = client.userID
-      if (!userId) return
+    const userId = client.userID
+    if (!userId) return
+
+    // Only load once per viewer ↔ participant pair. Set synchronously (before
+    // the async work) so re-runs triggered by changing dependency identities
+    // bail out instead of issuing another channel-create request.
+    const loadKey = `${userId}::${initialParticipantFilter}`
+    if (directConversationLoadRef.current === loadKey) return
+    directConversationLoadRef.current = loadKey
 
+    // Release the guard only if it still belongs to this load. A newer load for
+    // a different pair may have taken ownership while this one was in flight, so
+    // clearing unconditionally could wipe the newer guard and let a duplicate
+    // load/create slip through.
+    const releaseLoadGuard = () => {
+      if (directConversationLoadRef.current === loadKey) {
+        directConversationLoadRef.current = null
+      }
+    }
+
+    const loadInitialChannel = async () => {
       try {
         if (debug) {
           console.log(
@@ -105,6 +136,8 @@ export const MessagingShell: React.FC<MessagingShellProps> = ({
 
         const participantData = initialParticipantDataRef.current
         if (!participantData || !service) {
+          // Allow a retry once participant data / service become available.
+          releaseLoadGuard()
           setDirectConversationError('No conversation found with this account')
           if (debug) {
             console.log(
@@ -136,6 +169,8 @@ export const MessagingShell: React.FC<MessagingShellProps> = ({
             '[MessagingShell] Failed to create conversation:',
             createErr
           )
+          // Allow a retry for this pair after a transient failure.
+          releaseLoadGuard()
           setDirectConversationError('Failed to create conversation')
         }
       } catch (err) {
@@ -143,7 +178,14 @@ export const MessagingShell: React.FC<MessagingShellProps> = ({
           '[MessagingShell] Failed to load initial conversation:',
           err
         )
-        setDirectConversationError('Failed to load conversation')
+        // Allow a retry for this pair after a transient failure.
+        releaseLoadGuard()
+        // Don't replace an already-loaded conversation with an error screen.
+        // Read the latest selected channel via ref to avoid acting on a stale
+        // closure value when the channel was selected mid-flight.
+        if (!selectedChannelRef.current) {
+          setDirectConversationError('Failed to load conversation')
+        }
       }
     }
 

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