@linktr.ee/messaging-react 3.0.0 → 3.1.0

package/src/components/CustomMessageInput/index.tsx

@@ -1,5 +1,5 @@
 import { ArrowUpIcon } from '@phosphor-icons/react'
-import React 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
@@ -30,12 +40,11 @@ const DefaultSendButton: React.FC<{
 )
 
 const CustomMessageInputInner: React.FC = () => {
-  const { channel } = useChannelStateContext()
+  const disabled = useContext(ComposerLockedContext)
   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 +59,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,15 +87,48 @@ const CustomMessageInputInner: React.FC = () => {
 export interface CustomMessageInputProps {
   renderActions?: () => React.ReactNode
   renderFooter?: () => React.ReactNode
+  /**
+   * 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 shown inside the locked panel. Only rendered when
+   * `disabled` is true.
+   */
+  disabledReason?: string
 }
 
 export const CustomMessageInput: React.FC<CustomMessageInputProps> = ({
   renderActions,
   renderFooter,
+  disabled = false,
+  disabledReason,
 }) => {
   const { channel } = useChannelStateContext()
   const isFrozen = channel?.data?.frozen === true
 
+  // 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
@@ -100,7 +142,9 @@ export const CustomMessageInput: React.FC<CustomMessageInputProps> = ({
             {renderActions()}
           </div>
         )}
-        <MessageInput Input={CustomMessageInputInner} />
+        <ComposerLockedContext.Provider value={isFrozen}>
+          <MessageInput Input={CustomMessageInputInner} />
+        </ComposerLockedContext.Provider>
       </div>
       {renderFooter?.()}
     </div>

package/src/types.ts

@@ -131,6 +131,44 @@ export interface ChannelViewProps {
    */
   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