@linktr.ee/messaging-react 3.1.4-rc-1780636753 → 3.3.0

package/src/components/ChannelView.tsx

@@ -1,9 +1,4 @@
-import {
-  ArrowLeftIcon,
-  DotsThreeIcon,
-  SparkleIcon,
-  StarIcon,
-} from '@phosphor-icons/react'
+import { ArrowLeftIcon, SparkleIcon, StarIcon } from '@phosphor-icons/react'
 import classNames from 'classnames'
 import React, { useCallback, useEffect, useRef } from 'react'
 import { Channel as ChannelType } from 'stream-chat'
@@ -22,7 +17,7 @@ import type { ChannelViewProps } from '../types'
 import { resolveParticipantDisplayName } from '../utils/resolveParticipantDisplayName'
 
 import { Avatar } from './Avatar'
-import { ChannelInfoDialog } from './ChannelInfoDialog'
+import { ChannelActionsMenu } from './ChannelActionsMenu'
 import { CustomDateSeparator } from './CustomDateSeparator'
 import { CustomMessage } from './CustomMessage'
 import { CustomMessageActions } from './CustomMessage/CustomMessageActions'
@@ -44,17 +39,33 @@ const DM_AGENT_HEADER_HELPER_TEXT = 'Replies instantly with AI assistant'
 const CustomChannelHeader: React.FC<{
   onBack?: () => void
   showBackButton: boolean
-  onShowInfo: () => void
-  canShowInfo: boolean
   showStarButton?: boolean
   dmAgentEnabled?: boolean
+  onLeaveConversation?: (channel: ChannelType) => void
+  onBlockParticipant?: (participantId?: string) => void
+  showDeleteConversation?: boolean
+  showBlockParticipant?: boolean
+  showReportParticipant?: boolean
+  onDeleteConversationClick?: () => void
+  onBlockParticipantClick?: () => void
+  onReportParticipantClick?: () => void
+  customChannelActions?: React.ReactNode
+  showActionsMenu?: boolean
 }> = ({
   onBack,
   showBackButton,
-  onShowInfo,
-  canShowInfo,
   showStarButton = false,
   dmAgentEnabled = false,
+  onLeaveConversation,
+  onBlockParticipant,
+  showDeleteConversation = true,
+  showBlockParticipant = true,
+  showReportParticipant = true,
+  onDeleteConversationClick,
+  onBlockParticipantClick,
+  onReportParticipantClick,
+  customChannelActions,
+  showActionsMenu = true,
 }) => {
   const { channel } = useChannelStateContext()
 
@@ -143,14 +154,22 @@ const CustomChannelHeader: React.FC<{
               />
             </button>
           )}
-          <button
-            className={classNames(ICON_BTN_CLASS, 'bg-[#F1F0EE]')}
-            onClick={onShowInfo}
-            type="button"
-            aria-label="Show info"
-          >
-            <DotsThreeIcon className="size-5 text-black/90" />
-          </button>
+          {showActionsMenu && (
+            <ChannelActionsMenu
+              channel={channel}
+              participant={participant}
+              showDeleteConversation={showDeleteConversation}
+              showBlockParticipant={showBlockParticipant}
+              showReportParticipant={showReportParticipant}
+              onLeaveConversation={onLeaveConversation}
+              onBlockParticipant={onBlockParticipant}
+              onDeleteConversationClick={onDeleteConversationClick}
+              onBlockParticipantClick={onBlockParticipantClick}
+              onReportParticipantClick={onReportParticipantClick}
+              customChannelActions={customChannelActions}
+              triggerClassName={classNames(ICON_BTN_CLASS, 'bg-[#F1F0EE]')}
+            />
+          )}
         </div>
       </div>
       <div className="px-6 py-3 hidden @lg:flex items-center justify-between gap-3 min-h-12 border-b border-b-black/[0.08]">
@@ -178,20 +197,9 @@ const CustomChannelHeader: React.FC<{
             size={48}
           />
           <div className="min-w-0">
-            {canShowInfo ? (
-              <button
-                type="button"
-                onClick={onShowInfo}
-                className="flex items-center gap-1 font-medium text-black/90 truncate hover:text-black/70 transition-colors"
-                aria-label={`View info for ${participantName}`}
-              >
-                <span className="truncate">{participantName}</span>
-              </button>
-            ) : (
-              <h1 className="font-medium text-black/90 truncate">
-                {participantName}
-              </h1>
-            )}
+            <h1 className="font-medium text-black/90 truncate">
+              {participantName}
+            </h1>
             {dmAgentEnabled && (
               <div className="mt-0.5 flex items-center gap-1 text-[10px] leading-3 text-black/55">
                 <SparkleIcon className="size-3 shrink-0 text-black/55" />
@@ -219,15 +227,21 @@ const CustomChannelHeader: React.FC<{
               />
             </button>
           )}
-          {canShowInfo && onShowInfo && (
-            <button
-              className={ICON_BTN_CLASS}
-              onClick={onShowInfo}
-              type="button"
-              aria-label="Show info"
-            >
-              <DotsThreeIcon className="size-6 text-black/90" />
-            </button>
+          {showActionsMenu && (
+            <ChannelActionsMenu
+              channel={channel}
+              participant={participant}
+              showDeleteConversation={showDeleteConversation}
+              showBlockParticipant={showBlockParticipant}
+              showReportParticipant={showReportParticipant}
+              onLeaveConversation={onLeaveConversation}
+              onBlockParticipant={onBlockParticipant}
+              onDeleteConversationClick={onDeleteConversationClick}
+              onBlockParticipantClick={onBlockParticipantClick}
+              onReportParticipantClick={onReportParticipantClick}
+              customChannelActions={customChannelActions}
+              triggerClassName={ICON_BTN_CLASS}
+            />
           )}
         </div>
       </div>
@@ -253,13 +267,11 @@ const ChannelViewInner: React.FC<{
   onReportParticipantClick?: () => void
   showBlockParticipant?: boolean
   showReportParticipant?: boolean
-  showFollowerStatus?: boolean
   composerDisabled?: boolean
   composerDisabledReason?: string
   showStarButton?: boolean
   chatbotVotingEnabled?: boolean
   renderChannelBanner?: () => React.ReactNode
-  customProfileContent?: React.ReactNode
   customChannelActions?: React.ReactNode
   renderMessage?: (
     messageNode: React.ReactElement,
@@ -267,6 +279,7 @@ const ChannelViewInner: React.FC<{
   ) => React.ReactNode
   dmAgentEnabled?: boolean
   viewerLanguage?: string
+  showChannelInfo?: boolean
 }> = ({
   onBack,
   showBackButton,
@@ -281,22 +294,20 @@ const ChannelViewInner: React.FC<{
   onReportParticipantClick,
   showBlockParticipant = true,
   showReportParticipant = true,
-  showFollowerStatus = true,
   composerDisabled = false,
   composerDisabledReason,
   showStarButton = false,
   chatbotVotingEnabled = false,
   renderChannelBanner,
-  customProfileContent,
   customChannelActions,
   renderMessage,
   dmAgentEnabled = false,
   viewerLanguage,
+  showChannelInfo = true,
 }) => {
   const { channel } = useChannelStateContext()
-  const infoDialogRef = useRef<HTMLDialogElement>(null)
 
-  // Get participant info for info dialog
+  // Get participant info (the other channel member)
   const participant = React.useMemo(() => {
     const myUserId = channel._client?.userID
     if (!myUserId) return undefined
@@ -325,39 +336,6 @@ const ChannelViewInner: React.FC<{
     currentUserIsAccount === false &&
     participantIsAccount === true
 
-  // 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
-    }
-
-    // If explicit followerStatus is provided, use it
-    if (channelExtraData.followerStatus) {
-      return String(channelExtraData.followerStatus)
-    }
-    // If isFollower is explicitly defined, use it to determine status
-    if (channelExtraData.isFollower !== undefined) {
-      return channelExtraData.isFollower
-        ? 'Subscribed to you'
-        : 'Not subscribed'
-    }
-    // Otherwise, don't show any status
-    return undefined
-  }, [channel.data, showFollowerStatus])
-
-  const handleShowInfo = useCallback(() => {
-    infoDialogRef.current?.showModal()
-  }, [])
-
-  const handleCloseInfo = useCallback(() => {
-    infoDialogRef.current?.close()
-  }, [])
-
   // Prevents all message instances from unmounting when ChannelViewInner re-renders
   const MessageOverride = useCallback(
     (props: MessageUIComponentProps) => {
@@ -394,10 +372,18 @@ const ChannelViewInner: React.FC<{
             <CustomChannelHeader
               onBack={onBack}
               showBackButton={showBackButton}
-              onShowInfo={handleShowInfo}
-              canShowInfo={Boolean(participant)}
+              showActionsMenu={showChannelInfo}
               showStarButton={showStarButton}
               dmAgentEnabled={showDmAgentHeader}
+              onLeaveConversation={onLeaveConversation}
+              onBlockParticipant={onBlockParticipant}
+              showDeleteConversation={showDeleteConversation}
+              showBlockParticipant={showBlockParticipant}
+              showReportParticipant={showReportParticipant}
+              onDeleteConversationClick={onDeleteConversationClick}
+              onBlockParticipantClick={onBlockParticipantClick}
+              onReportParticipantClick={onReportParticipantClick}
+              customChannelActions={customChannelActions}
             />
           </div>
 
@@ -434,28 +420,6 @@ const ChannelViewInner: React.FC<{
           />
         </Window>
       </WithComponents>
-
-      {/* Channel Info Dialog */}
-      <ChannelInfoDialog
-        dialogRef={infoDialogRef}
-        onClose={handleCloseInfo}
-        participant={participant}
-        participantDisplayName={resolveParticipantDisplayName(
-          participant?.user
-        )}
-        channel={channel}
-        followerStatusLabel={followerStatusLabel}
-        onLeaveConversation={onLeaveConversation}
-        onBlockParticipant={onBlockParticipant}
-        showDeleteConversation={showDeleteConversation}
-        showBlockParticipant={showBlockParticipant}
-        showReportParticipant={showReportParticipant}
-        onDeleteConversationClick={onDeleteConversationClick}
-        onBlockParticipantClick={onBlockParticipantClick}
-        onReportParticipantClick={onReportParticipantClick}
-        customProfileContent={customProfileContent}
-        customChannelActions={customChannelActions}
-      />
     </>
   )
 }
@@ -481,7 +445,6 @@ export const ChannelView = React.memo<ChannelViewProps>(
     onReportParticipantClick,
     showBlockParticipant = true,
     showReportParticipant = true,
-    showFollowerStatus = true,
     composerDisabled = false,
     composerDisabledReason,
     dmAgentEnabled,
@@ -490,13 +453,13 @@ export const ChannelView = React.memo<ChannelViewProps>(
     showStarButton = false,
     chatbotVotingEnabled = false,
     renderChannelBanner,
-    customProfileContent,
     customChannelActions,
     renderMessage,
     onMessageLinkClick,
     sendButton,
     attachmentPreviewList,
     viewerLanguage,
+    showChannelInfo = true,
   }) => {
     // Custom send message handler that:
     // 1. Applies messageMetadata if provided
@@ -600,17 +563,16 @@ export const ChannelView = React.memo<ChannelViewProps>(
               onReportParticipantClick={onReportParticipantClick}
               showBlockParticipant={showBlockParticipant}
               showReportParticipant={showReportParticipant}
-              showFollowerStatus={showFollowerStatus}
               composerDisabled={composerDisabled}
               composerDisabledReason={composerDisabledReason}
               showStarButton={showStarButton}
               dmAgentEnabled={dmAgentEnabled}
               chatbotVotingEnabled={chatbotVotingEnabled}
               renderChannelBanner={renderChannelBanner}
-              customProfileContent={customProfileContent}
               customChannelActions={customChannelActions}
               renderMessage={renderMessage}
               viewerLanguage={viewerLanguage}
+              showChannelInfo={showChannelInfo}
             />
           </Channel>
         </DmAgentEnabledContext.Provider>

package/src/components/MessagingShell/index.tsx

@@ -35,6 +35,7 @@ export const MessagingShell: React.FC<MessagingShellProps> = ({
   customChannelActions,
   renderMessage,
   onMessageLinkClick,
+  showChannelInfo,
 }) => {
   const {
     client,
@@ -256,6 +257,7 @@ export const MessagingShell: React.FC<MessagingShellProps> = ({
           customChannelActions={customChannelActions}
           renderMessage={renderMessage}
           onMessageLinkClick={onMessageLinkClick}
+          showChannelInfo={showChannelInfo}
         />
       </div>
     </div>

package/src/hooks/useChannelModerationActions.ts

@@ -0,0 +1,227 @@
+import { useEffect, useState } from 'react'
+import type { Channel as ChannelType, ChannelMemberResponse } from 'stream-chat'
+
+import { useMessagingContext } from '../providers/MessagingProvider'
+
+// Blocked user from Stream Chat API
+type BlockedUser = {
+  blocked_user_id: string
+}
+
+const REPORT_URL = 'https://linktr.ee/s/about/trust-center/report'
+
+export interface UseChannelModerationActionsParams {
+  channel: ChannelType
+  participant: ChannelMemberResponse | undefined
+  /**
+   * When false, the blocked-status lookup is skipped (the result would be
+   * unused, e.g. the Linktree official channel does not offer blocking).
+   * Defaults to true.
+   */
+  showBlockParticipant?: boolean
+  /**
+   * When false, the blocked-status lookup is deferred. Useful for surfaces
+   * that mount the actions ahead of time (e.g. a closed popover) and only
+   * need block state once visible. Defaults to true.
+   */
+  enabled?: boolean
+  onLeaveConversation?: (channel: ChannelType) => void
+  onBlockParticipant?: (participantId?: string) => void
+  onDeleteConversationClick?: () => void
+  onBlockParticipantClick?: () => void
+  onReportParticipantClick?: () => void
+  /**
+   * Called after an action completes successfully (e.g. to close the
+   * surrounding dialog or popover).
+   */
+  onActionComplete?: () => void
+  /** Prefix used for debug logging. */
+  logLabel?: string
+}
+
+export interface ChannelModerationActions {
+  isParticipantBlocked: boolean
+  /**
+   * True while the initial blocked-status lookup is in flight. Until this is
+   * false, `isParticipantBlocked` has not yet been resolved and the
+   * block/unblock action should not be acted on.
+   */
+  isCheckingBlockedStatus: boolean
+  isLeaving: boolean
+  isUpdatingBlockStatus: boolean
+  handleLeaveConversation: () => Promise<void>
+  handleBlockUser: () => Promise<void>
+  handleUnblockUser: () => Promise<void>
+  handleReportUser: () => void
+}
+
+/**
+ * Encapsulates the conversation moderation actions (leave/delete, block,
+ * unblock, report) shared by the channel info dialog and the channel actions
+ * popover menu. Keeping the logic in one place ensures both surfaces stay in
+ * sync.
+ */
+export const useChannelModerationActions = ({
+  channel,
+  participant,
+  showBlockParticipant = true,
+  enabled = true,
+  onLeaveConversation,
+  onBlockParticipant,
+  onDeleteConversationClick,
+  onBlockParticipantClick,
+  onReportParticipantClick,
+  onActionComplete,
+  logLabel = 'useChannelModerationActions',
+}: UseChannelModerationActionsParams): ChannelModerationActions => {
+  const { service, debug } = useMessagingContext()
+  const [isParticipantBlocked, setIsParticipantBlocked] = useState(false)
+  const [isCheckingBlockedStatus, setIsCheckingBlockedStatus] =
+    useState(false)
+  const [isLeaving, setIsLeaving] = useState(false)
+  const [isUpdatingBlockStatus, setIsUpdatingBlockStatus] = useState(false)
+
+  // Resolve whether the participant is blocked whenever the participant or
+  // surface visibility changes.
+  useEffect(() => {
+    // When the lookup is skipped (Block action hidden, surface disabled, or no
+    // participant), clear any stale blocked state so a previous participant's
+    // value can't leak into the next conversation.
+    if (
+      !enabled ||
+      !showBlockParticipant ||
+      !service ||
+      !participant?.user?.id
+    ) {
+      setIsParticipantBlocked(false)
+      setIsCheckingBlockedStatus(false)
+      return
+    }
+
+    let cancelled = false
+    const participantId = participant.user.id
+
+    setIsCheckingBlockedStatus(true)
+
+    void (async () => {
+      try {
+        const blockedUsers = await service.getBlockedUsers()
+        if (cancelled) return
+        setIsParticipantBlocked(
+          blockedUsers.some(
+            (user: BlockedUser) => user.blocked_user_id === participantId
+          )
+        )
+      } catch (error) {
+        if (!cancelled) {
+          console.error(`[${logLabel}] Failed to check blocked status:`, error)
+        }
+      } finally {
+        if (!cancelled) setIsCheckingBlockedStatus(false)
+      }
+    })()
+
+    // Ignore an in-flight result if the participant/surface changes first.
+    return () => {
+      cancelled = true
+    }
+  }, [enabled, service, participant?.user?.id, showBlockParticipant, logLabel])
+
+  const handleLeaveConversation = async () => {
+    if (isLeaving) return
+
+    // Fire analytics callback before action
+    onDeleteConversationClick?.()
+
+    if (debug) {
+      console.log(`[${logLabel}] Leave conversation`, channel.cid)
+    }
+    setIsLeaving(true)
+
+    try {
+      const actingUserId = channel._client?.userID ?? null
+      await channel.hide(actingUserId, false)
+
+      if (onLeaveConversation) {
+        await onLeaveConversation(channel)
+      }
+
+      onActionComplete?.()
+    } catch (error) {
+      console.error(`[${logLabel}] Failed to leave conversation`, error)
+    } finally {
+      setIsLeaving(false)
+    }
+  }
+
+  const handleBlockUser = async () => {
+    if (isUpdatingBlockStatus || !service) return
+
+    // Fire analytics callback before action
+    onBlockParticipantClick?.()
+
+    if (debug) {
+      console.log(`[${logLabel}] Block member`, participant?.user?.id)
+    }
+    setIsUpdatingBlockStatus(true)
+
+    try {
+      await service.blockUser(participant?.user?.id)
+
+      if (onBlockParticipant) {
+        await onBlockParticipant(participant?.user?.id)
+      }
+
+      onActionComplete?.()
+    } catch (error) {
+      console.error(`[${logLabel}] Failed to block member`, error)
+    } finally {
+      setIsUpdatingBlockStatus(false)
+    }
+  }
+
+  const handleUnblockUser = async () => {
+    if (isUpdatingBlockStatus || !service) return
+
+    // Fire analytics callback before action
+    onBlockParticipantClick?.()
+
+    if (debug) {
+      console.log(`[${logLabel}] Unblock member`, participant?.user?.id)
+    }
+    setIsUpdatingBlockStatus(true)
+
+    try {
+      await service.unBlockUser(participant?.user?.id)
+
+      if (onBlockParticipant) {
+        await onBlockParticipant(participant?.user?.id)
+      }
+
+      onActionComplete?.()
+    } catch (error) {
+      console.error(`[${logLabel}] Failed to unblock member`, error)
+    } finally {
+      setIsUpdatingBlockStatus(false)
+    }
+  }
+
+  const handleReportUser = () => {
+    // Fire analytics callback before action
+    onReportParticipantClick?.()
+
+    onActionComplete?.()
+    window.open(REPORT_URL, '_blank', 'noopener,noreferrer')
+  }
+
+  return {
+    isParticipantBlocked,
+    isCheckingBlockedStatus,
+    isLeaving,
+    isUpdatingBlockStatus,
+    handleLeaveConversation,
+    handleBlockUser,
+    handleUnblockUser,
+    handleReportUser,
+  }
+}

package/src/index.ts

@@ -48,7 +48,6 @@ export type { ParticipantDisplayUser } from './utils/resolveParticipantDisplayNa
 
 // Types
 export type {
-  ChannelListDerivedState,
   MessagingShellProps,
   ChannelListProps,
   ChannelViewProps,

package/src/types.ts

@@ -52,36 +52,6 @@ export interface MessagingCapabilities {
   showDeleteConversation?: boolean
 }
 
-/**
- * Derived state reported by the mounted ChannelList instance.
- *
- * This reflects the currently loaded list data only. It does not guarantee
- * complete server-side truth for channels outside the mounted list's current
- * query window or cache.
- */
-export interface ChannelListDerivedState {
-  /**
-   * Whether the mounted list has completed its first channel-resolution pass.
-   */
-  isInitialLoadSettled: boolean
-  /**
-   * Visible channels after `channelRenderFilterFn` is applied.
-   */
-  channels: Channel[]
-  /**
-   * Raw channels received from Stream before client-side filtering.
-   */
-  rawChannels: Channel[]
-  /**
-   * Convenience flag for empty-state consumers. Mirrors `channels.length > 0`.
-   */
-  hasChannels: boolean
-  /**
-   * Number of visible channels with at least one unread message.
-   */
-  unreadCount: number
-}
-
 /**
  * ChannelList component props
  */
@@ -127,14 +97,6 @@ export interface ChannelListProps {
    * Falls back to message.text when no matching translation exists.
    */
   viewerLanguage?: string
-  /**
-   * Reports derived state from the mounted Stream ChannelList instance.
-   *
-   * This callback is driven by currently loaded list data only. Use it for
-   * cache/list-derived UI state such as empty-state confirmation or visible
-   * unread badges; do not assume it represents complete server-side truth.
-   */
-  onStateChange?: (state: ChannelListDerivedState) => void
 }
 
 /**
@@ -184,9 +146,11 @@ export interface ChannelViewProps {
   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.
+   * @deprecated Not currently rendered. The channel info sidebar was removed
+   * in favour of the actions popover; this prop is retained for API
+   * compatibility and will be wired up again when the replacement profile
+   * surface lands. Previously toggled the subscription/follower-status label
+   * in the channel info dialog profile card.
    */
   showFollowerStatus?: boolean
 
@@ -245,6 +209,19 @@ export interface ChannelViewProps {
    */
   showStarButton?: boolean
 
+  /**
+   * Show the channel actions menu (the `...` popover) in the header, which
+   * exposes the block/report/delete moderation actions. Defaults to true.
+   * Set false for surfaces that should not expose those actions — e.g.
+   * anonymous visitor chat, where the visitor has no authenticated identity
+   * to act on.
+   *
+   * Note: the channel info sidebar was removed in favour of the actions
+   * popover, so this no longer mounts a profile dialog or renders a clickable
+   * participant name; it now solely gates the actions menu.
+   */
+  showChannelInfo?: boolean
+
   /**
    * Enable thumbs up/down voting on chatbot messages.
    * When true, vote buttons render below chatbot (DM Agent) messages.
@@ -266,17 +243,16 @@ export interface ChannelViewProps {
   renderChannelBanner?: () => React.ReactNode
 
   /**
-   * Custom content rendered below the participant name and contact details
-   * in the channel info dialog profile card.
-   * Useful for badges (e.g. follower status), metadata, or any extra info.
-   *
-   * @example
-   * customProfileContent={<SubscriptionBadge isFollower={channel.data?.isFollower} />}
+   * @deprecated Not currently rendered. The channel info sidebar was removed
+   * in favour of the actions popover; this prop is retained for API
+   * compatibility and will be wired up again when the replacement profile
+   * surface lands. Previously rendered custom content (badges, metadata)
+   * below the participant name in the channel info dialog profile card.
    */
   customProfileContent?: React.ReactNode
 
   /**
-   * Custom actions rendered at the bottom of the channel info dialog
+   * Custom actions rendered at the bottom of the channel actions popover
    * (below Delete Conversation, Block/Unblock, Report).
    * Pass one or more <li> elements so they match the list styling.
    * Use the exported ActionButton for consistent styling.
@@ -347,6 +323,7 @@ export type ChannelViewPassthroughProps = Pick<
   | 'customChannelActions'
   | 'renderMessage'
   | 'onMessageLinkClick'
+  | 'showChannelInfo'
 >
 
 /**