feat: introduce selective command enablement based on message editing or quoting in message composer

Author: MartinCupela

package.json

@@ -104,7 +104,7 @@
     "emoji-mart": "^5.4.0",
     "react": "^19.0.0 || ^18.0.0 || ^17.0.0",
     "react-dom": "^19.0.0 || ^18.0.0 || ^17.0.0",
-    "stream-chat": "^9.41.0"
+    "stream-chat": "^9.43.0"
   },
   "peerDependenciesMeta": {
     "@breezystack/lamejs": {
@@ -170,7 +170,7 @@
     "react-dom": "^19.0.0",
     "sass": "^1.97.2",
     "semantic-release": "^25.0.2",
-    "stream-chat": "^9.41.1",
+    "stream-chat": "^9.43.0",
     "typescript": "^5.4.5",
     "typescript-eslint": "^8.17.0",
     "vite": "^7.3.1",

src/components/Dialog/styling/ContextMenu.scss

@@ -199,6 +199,13 @@
 
       &:disabled {
         background-color: transparent;
+        color: var(--str-chat__text-disabled);
+        cursor: default;
+
+        .str-chat__context-menu__button__details,
+        .str-chat__icon {
+          color: inherit;
+        }
       }
 
       .str-chat__icon {
@@ -211,7 +218,6 @@
         @include utils.ellipsis-text;
         flex: auto;
         text-align: start;
-        color: var(--str-chat__text-primary);
         white-space: nowrap;
         min-width: 0;
       }

src/components/MessageComposer/AttachmentSelector/AttachmentSelector.tsx

@@ -7,7 +7,11 @@ import React, {
   useRef,
   useState,
 } from 'react';
-import { useAttachmentManagerState, useMessageComposerController } from '../hooks';
+import {
+  useAttachmentManagerState,
+  useMessageComposerCommands,
+  useMessageComposerController,
+} from '../hooks';
 import { CHANNEL_CONTAINER_ID } from '../../Channel/constants';
 import {
   ContextMenu,
@@ -146,10 +150,14 @@ export const DefaultAttachmentSelectorComponents = {
   Command({ submenuHeader, submenuItems }: AttachmentSelectorActionProps) {
     const { t } = useTranslationContext();
     const { openSubmenu } = useContextMenuContext();
+    const commands = useMessageComposerCommands();
+    const hasEnabledCommands = commands.some(({ enabled }) => enabled);
     const hasSubmenu = !!submenuItems;
+
     return (
       <ContextMenuButton
-        className='str-chat__attachment-selector-actions-menu__button str-chat__attachment-selector-actions-menu__create-poll-button'
+        className='str-chat__attachment-selector-actions-menu__button str-chat__attachment-selector-actions-menu__commands-button'
+        disabled={!hasEnabledCommands}
         hasSubMenu={hasSubmenu}
         Icon={IconCommand}
         onClick={(event) => {

src/components/MessageComposer/AttachmentSelector/CommandsMenu.tsx

@@ -1,7 +1,7 @@
 import React, { type ComponentProps, type ComponentType, useMemo } from 'react';
 import type { CommandResponse } from 'stream-chat';
 import { useMessageComposerContext, useTranslationContext } from '../../../context';
-import { useMessageComposerController } from '../hooks';
+import { useMessageComposerCommands, useMessageComposerController } from '../hooks';
 import {
   ContextMenuBackButton,
   ContextMenuButton,
@@ -56,25 +56,24 @@ export const CommandsMenu = () => {
   const { closeMenu } = useContextMenuContext();
   const messageComposer = useMessageComposerController();
   const { textareaRef } = useMessageComposerContext();
-  const channelConfig = messageComposer.channel.getConfig();
-  const commands = useMemo<(CommandResponse & { name: string })[]>(
+  const commands = useMessageComposerCommands();
+  const sortedCommands = useMemo(
     () =>
-      (channelConfig?.commands ?? [])
-        .filter(
-          (command): command is CommandResponse & { name: string } => !!command.name,
-        )
-        .sort((a, b) => (a.name ?? '').localeCompare(b.name ?? '')),
-    [channelConfig],
+      [...commands].sort((a, b) =>
+        (a.command.name ?? '').localeCompare(b.command.name ?? ''),
+      ),
+    [commands],
   );
 
   return (
     <>
-      {commands.map((command) => (
+      {sortedCommands.map(({ command, enabled }) => (
         <CommandContextMenuItem
           command={command}
+          enabled={enabled}
           key={command.name}
           onClick={() => {
-            if (!command.name) return;
+            if (!command.name || !enabled) return;
             messageComposer.textComposer.setCommand(command);
             closeMenu();
             // Defer the focus to the next frame so it wins over FocusScope's restore-to-attachment-selector-button behavior.
@@ -122,20 +121,26 @@ export const useCommandTranslation = (command: CommandResponse) => {
 export const CommandContextMenuItem = ({
   className,
   command,
+  enabled = true,
   ...props
 }: ComponentProps<'button'> & {
   command: CommandResponse & { name: string };
+  enabled?: boolean;
 }) => {
   const { args, description } = useCommandTranslation(command);
 
   // todo: retrieve the command trigger char from textComposer - needed adjustment in LLC
-  const details = useMemo(() => `/${command.name} ${args}`, [args, command.name]);
+  const details = useMemo(
+    () => (args ? `/${command.name} ${args}` : `/${command.name}`),
+    [args, command.name],
+  );
 
   return (
     <ContextMenuButton
       {...props}
       className={clsx('str-chat__context-menu__button--command', className)}
       details={details}
+      disabled={!enabled}
       Icon={icons[command.name]}
       key={command.name}
       label={command.name}

src/components/MessageComposer/__tests__/AttachmentSelector.test.tsx

@@ -8,6 +8,7 @@ import {
   waitFor,
 } from '@testing-library/react';
 import { fromPartial } from '@total-typescript/shoehorn';
+import type { CommandResponse } from 'stream-chat';
 import { MessageComposer } from '../MessageComposer';
 import { Chat } from '../../Chat';
 import {
@@ -38,6 +39,8 @@ const UPLOAD_FILE_BUTTON_CLASS =
   'str-chat__attachment-selector-actions-menu__upload-file-button';
 const CREATE_POLL_BUTTON_CLASS =
   'str-chat__attachment-selector-actions-menu__create-poll-button';
+const COMMANDS_BUTTON_CLASS =
+  'str-chat__attachment-selector-actions-menu__commands-button';
 const SHARE_LOCATION_BUTTON_CLASS =
   'str-chat__attachment-selector-actions-menu__add-location-button';
 const SIMPLE_ATTACHMENT_SELECTOR_TEST_ID = 'invoke-attachment-selector-button';
@@ -177,6 +180,53 @@ describe('AttachmentSelector', () => {
     expect(menu).toHaveTextContent('Location');
   });
 
+  it('keeps Commands visible and disables it when all commands are unavailable', async () => {
+    const disabledCommand = fromPartial<CommandResponse>({
+      args: 'ban-command-args',
+      description: 'ban-command-description',
+      name: 'ban',
+      set: 'moderation_set',
+    });
+    const {
+      channels: [customChannel],
+      client: customClient,
+    } = await initClientWithChannels({
+      channelsData: [
+        {
+          channel: {
+            ...defaultChannelData,
+            cid: 'type:id',
+            config: {
+              commands: [disabledCommand],
+              polls: false,
+              shared_locations: false,
+              uploads: false,
+            },
+            id: 'id',
+            type: 'type',
+          },
+        },
+      ],
+    });
+
+    customChannel.messageComposer.initState({
+      composition: generateMessage({ text: 'editing' }),
+    });
+
+    await renderComponent({
+      channelStateContext: { channelCapabilities: {} },
+      customChannel,
+      customClient,
+    });
+
+    await invokeMenu();
+
+    const menu = screen.getByTestId(ATTACHMENT_SELECTOR__ACTIONS_MENU_TEST_ID);
+    const commandsButton = menu.querySelector(`.${COMMANDS_BUTTON_CLASS}`);
+
+    expect(commandsButton).toBeDisabled();
+  });
+
   it('renders with poll only if only polls are enabled', async () => {
     const {
       channels: [customChannel],

src/components/MessageComposer/__tests__/MessageInput.test.tsx

@@ -39,6 +39,7 @@ import { QuotedMessagePreview } from '../QuotedMessagePreview';
 import type {
   Attachment,
   Channel as ChannelType,
+  CommandResponse,
   CooldownTimerState,
   LinkPreviewsManagerState,
   LocalAttachment,
@@ -1377,6 +1378,28 @@ describe(`MessageInputFlat`, () => {
       });
       quotedMessagePreviewIsNotDisplayed(mainListMessage);
     });
+
+    it('clears active command when quoting makes it unavailable', async () => {
+      const { channel } = await renderComponent();
+      const command = fromPartial<CommandResponse>({
+        args: 'ban-command-args',
+        description: 'ban-command-description',
+        name: 'ban',
+        set: 'moderation_set',
+      });
+
+      await act(() => {
+        channel.messageComposer.textComposer.setCommand(command);
+      });
+
+      expect(screen.getByText('ban')).toBeInTheDocument();
+
+      await initQuotedMessagePreview(mainListMessage);
+
+      await waitFor(() => {
+        expect(screen.queryByText('ban')).not.toBeInTheDocument();
+      });
+    });
   });
 
   describe('send button', () => {
@@ -1554,5 +1577,26 @@ describe(`MessageInputFlat`, () => {
         expect(textarea).toHaveValue('');
       });
     });
+
+    it('should clear active command when entering edit mode', async () => {
+      const { channel } = await renderComponent();
+      const command = fromPartial<CommandResponse>({
+        args: 'giphy-command-args',
+        description: 'giphy-command-description',
+        name: 'giphy',
+      });
+
+      await act(() => {
+        channel.messageComposer.textComposer.setCommand(command);
+      });
+
+      expect(screen.getByText('giphy')).toBeInTheDocument();
+
+      await enterEditMode();
+
+      await waitFor(() => {
+        expect(screen.queryByText('giphy')).not.toBeInTheDocument();
+      });
+    });
   });
 });

src/components/MessageComposer/hooks/__tests__/useMessageComposerCommands.test.tsx

@@ -0,0 +1,119 @@
+import { act, renderHook } from '@testing-library/react';
+import { fromPartial } from '@total-typescript/shoehorn';
+import type { CommandResponse, MessageComposerState } from 'stream-chat';
+import { StateStore } from 'stream-chat';
+
+import { useMessageComposerCommands } from '../useMessageComposerCommands';
+
+const mockedUseMessageComposerController = vi.hoisted(() => vi.fn());
+
+let commands: CommandResponse[];
+let messageComposer: {
+  channel: { getConfig: ReturnType<typeof vi.fn> };
+  getCommandDisabledReason: ReturnType<typeof vi.fn>;
+  isCommandDisabled: ReturnType<typeof vi.fn>;
+  state: StateStore<MessageComposerState>;
+};
+let state: StateStore<MessageComposerState>;
+
+vi.mock('../useMessageComposerController', () => ({
+  useMessageComposerController: mockedUseMessageComposerController,
+}));
+
+describe('useMessageComposerCommands', () => {
+  beforeEach(() => {
+    state = new StateStore<MessageComposerState>(
+      fromPartial<MessageComposerState>({
+        editedMessage: null,
+        quotedMessage: null,
+      }) as MessageComposerState,
+    );
+    commands = [
+      fromPartial<CommandResponse>({
+        args: 'giphy-command-args',
+        description: 'giphy-command-description',
+        name: 'giphy',
+      }),
+      fromPartial<CommandResponse>({
+        args: 'ban-command-args',
+        description: 'ban-command-description',
+        name: 'ban',
+        set: 'moderation_set',
+      }),
+      fromPartial<CommandResponse>({
+        description: 'missing-name',
+      }),
+    ];
+    messageComposer = {
+      channel: {
+        getConfig: vi.fn(() => ({
+          commands,
+        })),
+      },
+      getCommandDisabledReason: vi.fn((command: CommandResponse) => {
+        const latestState = state.getLatestValue();
+
+        if (latestState.editedMessage) {
+          return 'editing';
+        }
+
+        if (
+          latestState.quotedMessage &&
+          (command.set === 'moderation_set' || command.name === 'moderation_set')
+        ) {
+          return 'quoted_message';
+        }
+
+        return undefined;
+      }),
+      isCommandDisabled: vi.fn(
+        (command: CommandResponse) => !!messageComposer.getCommandDisabledReason(command),
+      ),
+      state,
+    };
+    mockedUseMessageComposerController.mockReturnValue(messageComposer);
+  });
+
+  afterEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it('returns named commands with enabled state', () => {
+    const { result } = renderHook(() => useMessageComposerCommands());
+
+    expect(result.current).toEqual([
+      { command: expect.objectContaining({ name: 'giphy' }), enabled: true },
+      { command: expect.objectContaining({ name: 'ban' }), enabled: true },
+    ]);
+  });
+
+  it('updates when entering edit mode and disables all commands', () => {
+    const { result } = renderHook(() => useMessageComposerCommands());
+
+    act(() => {
+      state.partialNext({
+        editedMessage: fromPartial({ id: 'edited-message-id' }),
+      });
+    });
+
+    expect(result.current).toEqual([
+      { command: expect.objectContaining({ name: 'giphy' }), enabled: false },
+      { command: expect.objectContaining({ name: 'ban' }), enabled: false },
+    ]);
+  });
+
+  it('marks quoted-message-disabled commands as disabled while keeping allowed ones enabled', () => {
+    const { result } = renderHook(() => useMessageComposerCommands());
+
+    act(() => {
+      state.partialNext({
+        quotedMessage: fromPartial({ id: 'quoted-message-id' }),
+      });
+    });
+
+    expect(result.current).toEqual([
+      { command: expect.objectContaining({ name: 'giphy' }), enabled: true },
+      { command: expect.objectContaining({ name: 'ban' }), enabled: false },
+    ]);
+  });
+});