@linktr.ee/messaging-react 3.2.0 → 3.3.1

package/src/components/ChannelView.stories.tsx

@@ -240,12 +240,12 @@ Default.args = {
     console.log('Leave conversation:', channel.id),
   onBlockParticipant: (participantId) =>
     console.log('Block participant:', participantId),
-  followerStatus: true, // Shows "Subscribed to you"
+  followerStatus: true,
 }
 Default.parameters = {
   docs: {
     description: {
-      story: 'Default channel view with messages and conversation header, showing subscriber status.',
+      story: 'Default channel view with messages and conversation header.',
     },
   },
 }
@@ -277,10 +277,8 @@ RestrictedOfficialChannel.args = {
   // 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),
 }
@@ -288,7 +286,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 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.',
+        'Restricted action surface used by the Linktree official channel: block and report are hidden, and the composer is replaced by a locked panel explaining the linker cannot send messages on this thread. Delete conversation and favorite remain available in the "..." actions popover.',
     },
   },
 }
@@ -543,74 +541,6 @@ EmptyChannel.parameters = {
   },
 }
 
-export const SubscriberStatus: StoryFn<TemplateProps> = Template.bind({})
-SubscriberStatus.args = {
-  showBackButton: false,
-  followerStatus: true, // Shows "Subscribed to you" in green
-  onLeaveConversation: (channel) =>
-    console.log('Leave conversation:', channel.id),
-  onBlockParticipant: (participantId) =>
-    console.log('Block participant:', participantId),
-}
-SubscriberStatus.parameters = {
-  docs: {
-    description: {
-      story: 'Channel view showing "Subscribed to you" badge in green when isFollower is true.',
-    },
-  },
-}
-
-export const NotSubscribedStatus: StoryFn<TemplateProps> = Template.bind({})
-NotSubscribedStatus.args = {
-  showBackButton: false,
-  followerStatus: false, // Shows "Not subscribed" in gray
-  onLeaveConversation: (channel) =>
-    console.log('Leave conversation:', channel.id),
-  onBlockParticipant: (participantId) =>
-    console.log('Block participant:', participantId),
-}
-NotSubscribedStatus.parameters = {
-  docs: {
-    description: {
-      story: 'Channel view showing "Not subscribed" badge in gray when isFollower is false.',
-    },
-  },
-}
-
-export const CustomFollowerStatus: StoryFn<TemplateProps> = Template.bind({})
-CustomFollowerStatus.args = {
-  showBackButton: false,
-  followerStatus: 'Mutual subscribers', // Custom status text in gray
-  onLeaveConversation: (channel) =>
-    console.log('Leave conversation:', channel.id),
-  onBlockParticipant: (participantId) =>
-    console.log('Block participant:', participantId),
-}
-CustomFollowerStatus.parameters = {
-  docs: {
-    description: {
-      story: 'Channel view with a custom follower status text (shows in gray unless text is "Subscribed to you").',
-    },
-  },
-}
-
-export const NoFollowerStatus: StoryFn<TemplateProps> = Template.bind({})
-NoFollowerStatus.args = {
-  showBackButton: false,
-  followerStatus: undefined, // No badge shown
-  onLeaveConversation: (channel) =>
-    console.log('Leave conversation:', channel.id),
-  onBlockParticipant: (participantId) =>
-    console.log('Block participant:', participantId),
-}
-NoFollowerStatus.parameters = {
-  docs: {
-    description: {
-      story: 'Channel view with no follower status badge displayed.',
-    },
-  },
-}
-
 export const FrozenChannel: StoryFn<TemplateProps> = Template.bind({})
 FrozenChannel.args = {
   showBackButton: false,

package/src/components/ChannelView.test.tsx

@@ -68,11 +68,11 @@ vi.mock('./CustomDateSeparator', () => ({
   CustomDateSeparator: () => <div data-testid="custom-date-separator" />,
 }))
 
-const channelInfoDialogProps: Array<Record<string, unknown>> = []
-vi.mock('./ChannelInfoDialog', () => ({
-  ChannelInfoDialog: (props: Record<string, unknown>) => {
-    channelInfoDialogProps.push({ ...props })
-    return <div data-testid="channel-info-dialog" />
+const channelActionsMenuProps: Array<Record<string, unknown>> = []
+vi.mock('./ChannelActionsMenu', () => ({
+  ChannelActionsMenu: (props: Record<string, unknown>) => {
+    channelActionsMenuProps.push({ ...props })
+    return <div data-testid="channel-actions-menu" />
   },
 }))
 
@@ -151,24 +151,24 @@ describe('ChannelView', () => {
     activeChannel = undefined
     activeChannelProps = {}
     avatarRenderCalls.length = 0
-    channelInfoDialogProps.length = 0
+    channelActionsMenuProps.length = 0
     messageInputProps.length = 0
     mockIsStarred = false
   })
 
-  const lastDialogProps = () =>
-    channelInfoDialogProps[channelInfoDialogProps.length - 1]
+  const lastActionsMenuProps = () =>
+    channelActionsMenuProps[channelActionsMenuProps.length - 1]
   const lastInputProps = () =>
     messageInputProps[messageInputProps.length - 1]
 
-  it('keeps block and report visible by default in the info dialog', () => {
+  it('keeps block and report visible by default in the actions menu', () => {
     renderWithProviders(<ChannelView channel={createChannel()} />)
 
-    expect(lastDialogProps().showBlockParticipant).not.toBe(false)
-    expect(lastDialogProps().showReportParticipant).not.toBe(false)
+    expect(lastActionsMenuProps().showBlockParticipant).not.toBe(false)
+    expect(lastActionsMenuProps().showReportParticipant).not.toBe(false)
   })
 
-  it('hides block and report in the info dialog when restricted', () => {
+  it('hides block and report in the actions menu when restricted', () => {
     renderWithProviders(
       <ChannelView
         channel={createChannel()}
@@ -177,63 +177,36 @@ describe('ChannelView', () => {
       />
     )
 
-    expect(lastDialogProps().showBlockParticipant).toBe(false)
-    expect(lastDialogProps().showReportParticipant).toBe(false)
+    expect(lastActionsMenuProps().showBlockParticipant).toBe(false)
+    expect(lastActionsMenuProps().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('renders the channel info trigger by default', () => {
-    const { container } = renderWithProviders(
-      <ChannelView channel={createChannel()} />
-    )
+  it('renders the participant name without an info trigger', () => {
+    renderWithProviders(<ChannelView channel={createChannel()} />)
 
-    const infoTriggers = container.querySelectorAll(
-      'button[aria-label="Show info"]'
-    )
-    expect(infoTriggers.length).toBeGreaterThan(0)
-    expect(channelInfoDialogProps.length).toBeGreaterThan(0)
+    // The info sidebar was removed, so the participant name is plain text on
+    // both headers — there is no clickable affordance to open a profile
+    // dialog anymore.
+    expect(
+      screen.queryByRole('button', { name: /view info for/i })
+    ).not.toBeInTheDocument()
+    expect(screen.getAllByText('Linker').length).toBeGreaterThanOrEqual(1)
   })
 
-  it('hides the channel info trigger (both desktop and mobile) when showChannelInfo is false', () => {
-    const { container } = renderWithProviders(
-      <ChannelView channel={createChannel()} showChannelInfo={false} />
-    )
+  it('renders the actions menu by default', () => {
+    renderWithProviders(<ChannelView channel={createChannel()} />)
 
-    const infoTriggers = container.querySelectorAll(
-      'button[aria-label="Show info"]'
-    )
-    expect(infoTriggers.length).toBe(0)
+    expect(
+      screen.queryAllByTestId('channel-actions-menu').length
+    ).toBeGreaterThan(0)
   })
 
-  it('does not mount ChannelInfoDialog when showChannelInfo is false', () => {
+  it('hides the actions menu (both desktop and mobile) when showChannelInfo is false', () => {
     renderWithProviders(
       <ChannelView channel={createChannel()} showChannelInfo={false} />
     )
 
-    expect(channelInfoDialogProps.length).toBe(0)
+    expect(screen.queryAllByTestId('channel-actions-menu')).toHaveLength(0)
   })
 
   it('passes composer disabled state and reason to the message input', () => {

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,15 +154,21 @@ const CustomChannelHeader: React.FC<{
               />
             </button>
           )}
-          {canShowInfo && (
-            <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>
@@ -180,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" />
@@ -221,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>
@@ -255,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,
@@ -284,13 +294,11 @@ const ChannelViewInner: React.FC<{
   onReportParticipantClick,
   showBlockParticipant = true,
   showReportParticipant = true,
-  showFollowerStatus = true,
   composerDisabled = false,
   composerDisabledReason,
   showStarButton = false,
   chatbotVotingEnabled = false,
   renderChannelBanner,
-  customProfileContent,
   customChannelActions,
   renderMessage,
   dmAgentEnabled = false,
@@ -298,9 +306,8 @@ const ChannelViewInner: React.FC<{
   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
@@ -329,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) => {
@@ -398,10 +372,18 @@ const ChannelViewInner: React.FC<{
             <CustomChannelHeader
               onBack={onBack}
               showBackButton={showBackButton}
-              onShowInfo={handleShowInfo}
-              canShowInfo={showChannelInfo && 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>
 
@@ -438,33 +420,6 @@ const ChannelViewInner: React.FC<{
           />
         </Window>
       </WithComponents>
-
-      {/* Channel Info Dialog — suppressed entirely when showChannelInfo is
-          false so restricted surfaces (e.g. anonymous visitor chat) cannot
-          surface the participant profile or block/report/delete actions even
-          if the dialog were opened programmatically. */}
-      {showChannelInfo && (
-        <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}
-        />
-      )}
     </>
   )
 }
@@ -490,7 +445,6 @@ export const ChannelView = React.memo<ChannelViewProps>(
     onReportParticipantClick,
     showBlockParticipant = true,
     showReportParticipant = true,
-    showFollowerStatus = true,
     composerDisabled = false,
     composerDisabledReason,
     dmAgentEnabled,
@@ -499,7 +453,6 @@ export const ChannelView = React.memo<ChannelViewProps>(
     showStarButton = false,
     chatbotVotingEnabled = false,
     renderChannelBanner,
-    customProfileContent,
     customChannelActions,
     renderMessage,
     onMessageLinkClick,
@@ -610,14 +563,12 @@ 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}