@linktr.ee/messaging-react 3.2.0 → 3.3.0

package/dist/index.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./index-BO2VfA-M.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-_Se6ovQm.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

@@ -194,9 +194,11 @@ export declare 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;
     /**
@@ -249,11 +251,15 @@ export declare interface ChannelViewProps {
      */
     showStarButton?: boolean;
     /**
-     * Show the channel info trigger (kebab) in the header, the clickable
-     * participant name on desktop, and mount the channel info dialog. Defaults
-     * to true. Set false for surfaces that should not expose the participant
-     * profile, block/report/delete actions — e.g. anonymous visitor chat,
-     * where the visitor has no authenticated identity to act on.
+     * 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;
     /**
@@ -275,16 +281,15 @@ export declare 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.

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-DJKFVBkP.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-C_NFzAB9.js";
 export {
   e as ActionButton,
   t as Avatar,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@linktr.ee/messaging-react",
-  "version": "3.2.0",
+  "version": "3.3.0",
   "description": "React messaging components built on messaging-core for web applications",
   "type": "module",
   "main": "dist/index.cjs",
@@ -28,8 +28,8 @@
     "test:ci": "vitest run",
     "test:ui": "vitest --ui",
     "test:coverage": "vitest --coverage",
-    "lint": "../../node_modules/.bin/eslint . --ext .ts,.tsx",
-    "lint:fix": "../../node_modules/.bin/eslint . --ext .ts,.tsx --fix",
+    "lint": "npx --no-install eslint . --ext .ts,.tsx",
+    "lint:fix": "npx --no-install eslint . --ext .ts,.tsx --fix",
     "verify": "yarn type-check && yarn lint && yarn test:ci && yarn build",
     "storybook": "storybook dev -p 6006",
     "storybook:build": "storybook build"

package/src/components/ChannelActionsMenu/ChannelActionsMenu.test.tsx

@@ -0,0 +1,305 @@
+import React from 'react'
+import type { Channel, ChannelMemberResponse } from 'stream-chat'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
+import {
+  renderWithProviders,
+  screen,
+  userEvent,
+  waitFor,
+} from '../../test/utils'
+
+import { ChannelActionsMenu } from './index'
+
+const { getBlockedUsersMock, blockUserMock, unBlockUserMock } = vi.hoisted(
+  () => ({
+    getBlockedUsersMock: vi.fn().mockResolvedValue([]),
+    blockUserMock: vi.fn().mockResolvedValue(undefined),
+    unBlockUserMock: vi.fn().mockResolvedValue(undefined),
+  })
+)
+
+vi.mock('../../providers/MessagingProvider', () => ({
+  useMessagingContext: () => ({
+    service: {
+      getBlockedUsers: getBlockedUsersMock,
+      blockUser: blockUserMock,
+      unBlockUser: unBlockUserMock,
+    },
+    debug: false,
+  }),
+}))
+
+vi.mock('../ActionButton', () => ({
+  default: ({
+    children,
+    onClick,
+    disabled,
+  }: {
+    children: React.ReactNode
+    onClick?: () => void
+    disabled?: boolean
+  }) => (
+    <button data-testid="action-button" onClick={onClick} disabled={disabled}>
+      {children}
+    </button>
+  ),
+}))
+
+vi.mock('@phosphor-icons/react', () => ({
+  DotsThreeIcon: () => <span data-testid="dots-icon" />,
+  FlagIcon: () => <span data-testid="flag-icon" />,
+  ProhibitInsetIcon: () => <span data-testid="prohibit-icon" />,
+  SignOutIcon: () => <span data-testid="signout-icon" />,
+  SpinnerGapIcon: () => <span data-testid="spinner-icon" />,
+}))
+
+const createChannel = () =>
+  ({
+    id: 'channel-1',
+    cid: 'messaging:channel-1',
+    data: {},
+    _client: { userID: 'visitor-1' },
+    state: {
+      members: {},
+      membership: {},
+      messages: [],
+    },
+    hide: vi.fn(),
+  }) as unknown as Channel
+
+const createParticipant = () =>
+  ({
+    user: {
+      id: 'linker-1',
+      name: 'Linker',
+    },
+    role: 'member',
+  }) as unknown as ChannelMemberResponse
+
+const defaultProps = () => ({
+  channel: createChannel(),
+  participant: createParticipant(),
+})
+
+const openMenu = async () =>
+  userEvent.click(screen.getByRole('button', { name: 'More options' }))
+
+describe('ChannelActionsMenu', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    getBlockedUsersMock.mockResolvedValue([])
+  })
+
+  it('renders the trigger but keeps options hidden until opened', () => {
+    renderWithProviders(<ChannelActionsMenu {...defaultProps()} />)
+
+    expect(
+      screen.getByRole('button', { name: 'More options' })
+    ).toBeInTheDocument()
+    expect(screen.queryByText('Delete Conversation')).not.toBeInTheDocument()
+    expect(screen.queryByText('Block')).not.toBeInTheDocument()
+    expect(screen.queryByText('Report')).not.toBeInTheDocument()
+  })
+
+  it('reflects open state via aria-expanded and shows the options inline', async () => {
+    renderWithProviders(<ChannelActionsMenu {...defaultProps()} />)
+
+    const trigger = screen.getByRole('button', { name: 'More options' })
+    expect(trigger).toHaveAttribute('aria-expanded', 'false')
+
+    await openMenu()
+
+    expect(trigger).toHaveAttribute('aria-expanded', 'true')
+    expect(screen.getByText('Delete Conversation')).toBeInTheDocument()
+    expect(screen.getByText('Block')).toBeInTheDocument()
+    expect(screen.getByText('Report')).toBeInTheDocument()
+    // Each option renders its icon inline.
+    expect(screen.getByTestId('signout-icon')).toBeInTheDocument()
+    expect(screen.getByTestId('prohibit-icon')).toBeInTheDocument()
+    expect(screen.getByTestId('flag-icon')).toBeInTheDocument()
+  })
+
+  it('closes the popover when Escape is pressed', async () => {
+    renderWithProviders(<ChannelActionsMenu {...defaultProps()} />)
+
+    await openMenu()
+    expect(screen.getByText('Report')).toBeInTheDocument()
+
+    await userEvent.keyboard('{Escape}')
+
+    await waitFor(() => {
+      expect(screen.queryByText('Report')).not.toBeInTheDocument()
+    })
+  })
+
+  it('closes the popover when clicking outside', async () => {
+    renderWithProviders(
+      <div>
+        <span data-testid="outside">outside</span>
+        <ChannelActionsMenu {...defaultProps()} />
+      </div>
+    )
+
+    await openMenu()
+    expect(screen.getByText('Report')).toBeInTheDocument()
+
+    await userEvent.click(screen.getByTestId('outside'))
+
+    await waitFor(() => {
+      expect(screen.queryByText('Report')).not.toBeInTheDocument()
+    })
+  })
+
+  it('calls onDeleteConversationClick and closes after deleting', async () => {
+    const onDeleteConversationClick = vi.fn()
+    renderWithProviders(
+      <ChannelActionsMenu
+        {...defaultProps()}
+        onDeleteConversationClick={onDeleteConversationClick}
+      />
+    )
+
+    await openMenu()
+    await userEvent.click(screen.getByText('Delete Conversation'))
+
+    await waitFor(() => {
+      expect(onDeleteConversationClick).toHaveBeenCalledOnce()
+    })
+    await waitFor(() => {
+      expect(screen.queryByText('Delete Conversation')).not.toBeInTheDocument()
+    })
+  })
+
+  it('calls onBlockParticipantClick and blocks the user', async () => {
+    const onBlockParticipantClick = vi.fn()
+    renderWithProviders(
+      <ChannelActionsMenu
+        {...defaultProps()}
+        onBlockParticipantClick={onBlockParticipantClick}
+      />
+    )
+
+    await openMenu()
+    await userEvent.click(screen.getByText('Block'))
+
+    await waitFor(() => {
+      expect(onBlockParticipantClick).toHaveBeenCalledOnce()
+      expect(blockUserMock).toHaveBeenCalledWith('linker-1')
+    })
+  })
+
+  it('shows Unblock when the participant is already blocked', async () => {
+    getBlockedUsersMock.mockResolvedValue([{ blocked_user_id: 'linker-1' }])
+    renderWithProviders(<ChannelActionsMenu {...defaultProps()} />)
+
+    await openMenu()
+
+    await waitFor(() => {
+      expect(screen.getByText('Unblock')).toBeInTheDocument()
+    })
+    expect(screen.queryByText('Block')).not.toBeInTheDocument()
+  })
+
+  it('disables the block action until the blocked-status lookup resolves', async () => {
+    let resolveBlockedUsers: (
+      value: Array<{ blocked_user_id: string }>
+    ) => void = () => {}
+    getBlockedUsersMock.mockImplementation(
+      () =>
+        new Promise((resolve) => {
+          resolveBlockedUsers = resolve
+        })
+    )
+
+    renderWithProviders(<ChannelActionsMenu {...defaultProps()} />)
+    await openMenu()
+
+    // While the lookup is pending the action is disabled so a premature click
+    // can't act on a stale block state.
+    const pendingBlock = screen.getByText('Block').closest('button')
+    expect(pendingBlock).toBeDisabled()
+    await userEvent.click(pendingBlock as HTMLElement)
+    expect(blockUserMock).not.toHaveBeenCalled()
+
+    // Once the lookup resolves (already blocked) the Unblock action is offered.
+    resolveBlockedUsers([{ blocked_user_id: 'linker-1' }])
+    await waitFor(() => {
+      expect(screen.getByText('Unblock')).toBeInTheDocument()
+    })
+  })
+
+  it('calls onReportParticipantClick and opens the report page', async () => {
+    const onReportParticipantClick = vi.fn()
+    const windowOpenSpy = vi
+      .spyOn(window, 'open')
+      .mockImplementation(() => null)
+    renderWithProviders(
+      <ChannelActionsMenu
+        {...defaultProps()}
+        onReportParticipantClick={onReportParticipantClick}
+      />
+    )
+
+    await openMenu()
+    await userEvent.click(screen.getByText('Report'))
+
+    await waitFor(() => {
+      expect(onReportParticipantClick).toHaveBeenCalledOnce()
+      expect(windowOpenSpy).toHaveBeenCalled()
+    })
+    windowOpenSpy.mockRestore()
+  })
+
+  it('hides actions based on the show* flags', async () => {
+    renderWithProviders(
+      <ChannelActionsMenu
+        {...defaultProps()}
+        showDeleteConversation={false}
+        showBlockParticipant={false}
+        showReportParticipant={false}
+        customChannelActions={<li data-testid="custom-action">Custom</li>}
+      />
+    )
+
+    await openMenu()
+
+    expect(screen.queryByText('Delete Conversation')).not.toBeInTheDocument()
+    expect(screen.queryByText('Block')).not.toBeInTheDocument()
+    expect(screen.queryByText('Report')).not.toBeInTheDocument()
+    expect(screen.getByTestId('custom-action')).toBeInTheDocument()
+  })
+
+  it('does not fetch blocked users until the menu is opened', async () => {
+    renderWithProviders(<ChannelActionsMenu {...defaultProps()} />)
+
+    expect(getBlockedUsersMock).not.toHaveBeenCalled()
+
+    await openMenu()
+
+    await waitFor(() => {
+      expect(getBlockedUsersMock).toHaveBeenCalled()
+    })
+  })
+
+  it('renders nothing when there is no participant', () => {
+    const { container } = renderWithProviders(
+      <ChannelActionsMenu {...defaultProps()} participant={undefined} />
+    )
+
+    expect(container).toBeEmptyDOMElement()
+  })
+
+  it('renders nothing when no actions are available', () => {
+    const { container } = renderWithProviders(
+      <ChannelActionsMenu
+        {...defaultProps()}
+        showDeleteConversation={false}
+        showBlockParticipant={false}
+        showReportParticipant={false}
+      />
+    )
+
+    expect(container).toBeEmptyDOMElement()
+  })
+})

package/src/components/ChannelActionsMenu/index.tsx

@@ -0,0 +1,221 @@
+import {
+  DotsThreeIcon,
+  FlagIcon,
+  ProhibitInsetIcon,
+  SignOutIcon,
+  SpinnerGapIcon,
+} from '@phosphor-icons/react'
+import classNames from 'classnames'
+import React, { useCallback, useEffect, useId, useRef, useState } from 'react'
+import type { Channel as ChannelType, ChannelMemberResponse } from 'stream-chat'
+
+import { useChannelModerationActions } from '../../hooks/useChannelModerationActions'
+import ActionButton from '../ActionButton'
+
+export interface ChannelActionsMenuProps {
+  channel: ChannelType
+  participant: ChannelMemberResponse | undefined
+  showDeleteConversation?: boolean
+  /**
+   * Show the Block/Unblock action. Defaults to true.
+   * Set false to hide it (e.g. the Linktree official channel).
+   */
+  showBlockParticipant?: boolean
+  /**
+   * Show the Report action. Defaults to true.
+   * Set false to hide it (e.g. the Linktree official channel).
+   */
+  showReportParticipant?: boolean
+  onLeaveConversation?: (channel: ChannelType) => void
+  onBlockParticipant?: (participantId?: string) => void
+  onDeleteConversationClick?: () => void
+  onBlockParticipantClick?: () => void
+  onReportParticipantClick?: () => void
+  customChannelActions?: React.ReactNode
+  /** Classes applied to the trigger ("...") button so it matches the header. */
+  triggerClassName?: string
+}
+
+/**
+ * Conversation overflow ("...") menu rendered as an anchored popover.
+ *
+ * Replaces the slide-in sidebar dialog for moderation actions: the trigger
+ * opens a small popover that lists the available options (delete, block,
+ * report) inline with their icons.
+ */
+export const ChannelActionsMenu: React.FC<ChannelActionsMenuProps> = ({
+  channel,
+  participant,
+  showDeleteConversation = true,
+  showBlockParticipant = true,
+  showReportParticipant = true,
+  onLeaveConversation,
+  onBlockParticipant,
+  onDeleteConversationClick,
+  onBlockParticipantClick,
+  onReportParticipantClick,
+  customChannelActions,
+  triggerClassName,
+}) => {
+  const [isOpen, setIsOpen] = useState(false)
+  const containerRef = useRef<HTMLDivElement>(null)
+  const menuId = useId()
+
+  const close = useCallback(() => setIsOpen(false), [])
+
+  const {
+    isParticipantBlocked,
+    isCheckingBlockedStatus,
+    isLeaving,
+    isUpdatingBlockStatus,
+    handleLeaveConversation,
+    handleBlockUser,
+    handleUnblockUser,
+    handleReportUser,
+  } = useChannelModerationActions({
+    channel,
+    participant,
+    showBlockParticipant,
+    enabled: isOpen,
+    onLeaveConversation,
+    onBlockParticipant,
+    onDeleteConversationClick,
+    onBlockParticipantClick,
+    onReportParticipantClick,
+    onActionComplete: close,
+    logLabel: 'ChannelActionsMenu',
+  })
+
+  // Close the popover on outside click or Escape.
+  useEffect(() => {
+    if (!isOpen) return
+
+    const handlePointerDown = (event: MouseEvent) => {
+      if (
+        containerRef.current &&
+        !containerRef.current.contains(event.target as Node)
+      ) {
+        setIsOpen(false)
+      }
+    }
+
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.key === 'Escape') {
+        setIsOpen(false)
+      }
+    }
+
+    document.addEventListener('mousedown', handlePointerDown)
+    document.addEventListener('keydown', handleKeyDown)
+
+    return () => {
+      document.removeEventListener('mousedown', handlePointerDown)
+      document.removeEventListener('keydown', handleKeyDown)
+    }
+  }, [isOpen])
+
+  if (!participant) return null
+
+  const hasActions =
+    showDeleteConversation ||
+    showBlockParticipant ||
+    showReportParticipant ||
+    Boolean(customChannelActions)
+
+  if (!hasActions) return null
+
+  return (
+    <div ref={containerRef} className="relative">
+      <button
+        className={triggerClassName}
+        type="button"
+        aria-haspopup="true"
+        aria-expanded={isOpen}
+        aria-controls={isOpen ? menuId : undefined}
+        onClick={() => setIsOpen((open) => !open)}
+      >
+        <DotsThreeIcon className="size-5 text-black/90" />
+        <span className="sr-only">More options</span>
+      </button>
+
+      {isOpen && (
+        <div
+          id={menuId}
+          aria-label="Conversation options"
+          className={classNames(
+            'absolute right-0 top-full z-50 mt-2 w-56 overflow-hidden',
+            'rounded-lg border border-sand bg-white p-1 shadow-max-elevation-light'
+          )}
+        >
+          <ul className="flex flex-col gap-1">
+            {showDeleteConversation && (
+              <li>
+                <ActionButton
+                  onClick={handleLeaveConversation}
+                  disabled={isLeaving}
+                  aria-busy={isLeaving}
+                >
+                  {isLeaving ? (
+                    <SpinnerGapIcon className="h-5 w-5 animate-spin" />
+                  ) : (
+                    <SignOutIcon className="h-5 w-5" />
+                  )}
+                  <span>Delete Conversation</span>
+                </ActionButton>
+              </li>
+            )}
+            {showBlockParticipant && (
+              <li>
+                {isCheckingBlockedStatus ? (
+                  // Block status not yet resolved — show a disabled placeholder
+                  // so a premature click can't act on a stale block state.
+                  <ActionButton disabled aria-busy>
+                    <SpinnerGapIcon className="h-5 w-5 animate-spin" />
+                    <span>Block</span>
+                  </ActionButton>
+                ) : isParticipantBlocked ? (
+                  <ActionButton
+                    onClick={handleUnblockUser}
+                    disabled={isUpdatingBlockStatus}
+                    aria-busy={isUpdatingBlockStatus}
+                  >
+                    {isUpdatingBlockStatus ? (
+                      <SpinnerGapIcon className="h-5 w-5 animate-spin" />
+                    ) : (
+                      <ProhibitInsetIcon className="h-5 w-5" />
+                    )}
+                    <span>Unblock</span>
+                  </ActionButton>
+                ) : (
+                  <ActionButton
+                    onClick={handleBlockUser}
+                    disabled={isUpdatingBlockStatus}
+                    aria-busy={isUpdatingBlockStatus}
+                  >
+                    {isUpdatingBlockStatus ? (
+                      <SpinnerGapIcon className="h-5 w-5 animate-spin" />
+                    ) : (
+                      <ProhibitInsetIcon className="h-5 w-5" />
+                    )}
+                    <span>Block</span>
+                  </ActionButton>
+                )}
+              </li>
+            )}
+            {showReportParticipant && (
+              <li>
+                <ActionButton variant="danger" onClick={handleReportUser}>
+                  <FlagIcon className="h-5 w-5" />
+                  <span>Report</span>
+                </ActionButton>
+              </li>
+            )}
+            {customChannelActions}
+          </ul>
+        </div>
+      )}
+    </div>
+  )
+}
+
+export default ChannelActionsMenu