feat(MessageComposer): control command sendability

src/messageComposer/configuration/commands.configuration.ts

@@ -0,0 +1,55 @@
+import type {
+  CommandsConfig,
+  CommandSendValidator,
+  MessageComposerConfig,
+} from './types';
+import type { DeepPartial } from '../../types.utility';
+import { stripMentionTokens } from '../middleware';
+
+export const MENTION_ONLY_COMMANDS = new Set(['mute', 'unmute', 'unban']);
+export const defaultCommandSendabilityValidator: CommandSendValidator = ({
+  command,
+  commandArgsText,
+  mentionedUsersInText,
+}) => {
+  if (command.name !== 'ban' && !MENTION_ONLY_COMMANDS.has(command.name ?? '')) return;
+
+  if (mentionedUsersInText.length === 0) {
+    return { command, ready: false, reason: 'missing_mention' };
+  }
+
+  if (command.name !== 'ban') {
+    return { command, ready: true };
+  }
+
+  const reason = stripMentionTokens(commandArgsText, mentionedUsersInText);
+
+  if (!reason.length) {
+    return { command, ready: false, reason: 'missing_reason' };
+  }
+
+  return { command, ready: true };
+};
+export const DEFAULT_COMMANDS_CONFIG: CommandsConfig = {
+  sendValidators: [defaultCommandSendabilityValidator],
+};
+export const applyCommandValidatorOverride = (
+  targetConfig: MessageComposerConfig,
+  sourceConfig?: DeepPartial<MessageComposerConfig>,
+) => {
+  const overrideValidators = sourceConfig?.commands?.sendValidators as
+    | CommandSendValidator[]
+    | undefined;
+
+  if (typeof overrideValidators === 'undefined') {
+    return targetConfig;
+  }
+
+  return {
+    ...targetConfig,
+    commands: {
+      ...targetConfig.commands,
+      sendValidators: overrideValidators,
+    },
+  };
+};

src/messageComposer/configuration/configuration.ts

@@ -5,9 +5,10 @@ import type {
   LinkPreviewsManagerConfig,
   LocationComposerConfig,
   MessageComposerConfig,
+  TextComposerConfig,
 } from './types';
-import type { TextComposerConfig } from './types';
 import { generateUUIDv4 } from '../../utils';
+import { DEFAULT_COMMANDS_CONFIG } from './commands.configuration';
 
 export const DEFAULT_LINK_PREVIEW_MANAGER_CONFIG: LinkPreviewsManagerConfig = {
   debounceURLEnrichmentMs: 1500,
@@ -46,6 +47,7 @@ export const DEFAULT_LOCATION_COMPOSER_CONFIG: LocationComposerConfig = {
 
 export const DEFAULT_COMPOSER_CONFIG: MessageComposerConfig = {
   attachments: DEFAULT_ATTACHMENT_MANAGER_CONFIG,
+  commands: DEFAULT_COMMANDS_CONFIG,
   drafts: { enabled: false },
   linkPreviews: DEFAULT_LINK_PREVIEW_MANAGER_CONFIG,
   location: DEFAULT_LOCATION_COMPOSER_CONFIG,

src/messageComposer/configuration/index.ts

@@ -1,2 +1,6 @@
 export * from './configuration';
 export * from './types';
+export { applyCommandValidatorOverride } from './commands.configuration';
+export { DEFAULT_COMMANDS_CONFIG } from './commands.configuration';
+export { defaultCommandSendabilityValidator } from './commands.configuration';
+export { MENTION_ONLY_COMMANDS } from './commands.configuration';

src/messageComposer/configuration/types.ts

@@ -1,6 +1,8 @@
 import type { LinkPreview } from '../linkPreviewsManager';
 import type { FileUploadFilter } from '../attachmentManager';
+import type { MessageComposer } from '../messageComposer';
 import type { FileLike, FileReference } from '../types';
+import type { CommandResponse, UserResponse } from '../../types';
 
 export type MinimumUploadRequestResult = { file: string; thumb_url?: string } & Partial<
   Record<string, unknown>
@@ -38,6 +40,29 @@ export type TextComposerConfig = {
   maxLengthOnSend?: number;
 };
 
+export type CommandSendability = {
+  command: CommandResponse;
+  ready: boolean;
+  reason?: string & {};
+  metadata?: Record<string, unknown>;
+};
+
+export type CommandSendValidationContext = {
+  command: CommandResponse;
+  composer: MessageComposer;
+  commandArgsText: string;
+  mentionedUsersInText: UserResponse[];
+  rawText: string;
+};
+
+export type CommandSendValidator = (
+  context: CommandSendValidationContext,
+) => CommandSendability | undefined;
+
+export type CommandsConfig = {
+  sendValidators: CommandSendValidator[];
+};
+
 export type AttachmentManagerConfig = {
   // todo: document removal of noFiles prop showing how to achieve the same with custom fileUploadFilter function
   /**
@@ -86,6 +111,8 @@ export type LocationComposerConfig = {
 export type MessageComposerConfig = {
   /** If true, enables creating drafts on the server */
   drafts: DraftsConfiguration;
+  /** Configuration for command sendability validation */
+  commands: CommandsConfig;
   /** Configuration for the attachment manager */
   attachments: AttachmentManagerConfig;
   /** Configuration for the link previews manager */

src/messageComposer/messageComposer.ts

@@ -5,7 +5,7 @@ import { LocationComposer } from './LocationComposer';
 import { MessageComposerEffectHandlers } from './MessageComposerEffectHandlers';
 import { PollComposer } from './pollComposer';
 import { TextComposer } from './textComposer';
-import { DEFAULT_COMPOSER_CONFIG } from './configuration';
+import { applyCommandValidatorOverride, DEFAULT_COMPOSER_CONFIG } from './configuration';
 import type { MessageComposerMiddlewareValue } from './middleware';
 import {
   MessageComposerMiddlewareExecutor,
@@ -30,7 +30,7 @@ import type {
 } from '../types';
 import { WithSubscriptions } from '../utils/WithSubscriptions';
 import type { StreamChat } from '../client';
-import type { MessageComposerConfig } from './configuration/types';
+import type { CommandSendability, MessageComposerConfig } from './configuration/types';
 import type {
   CommandSuggestionDisabledReason,
   TextComposerCommandActivationEffect,
@@ -44,6 +44,10 @@ import type { PollComposerSnapshot } from './pollComposer';
 import type { TextComposerSnapshot } from './textComposer';
 import type { DeepPartial } from '../types.utility';
 import type { MergeWithCustomizer } from '../utils/mergeWith/mergeWithCore';
+import {
+  getMentionedUsersInText,
+  stripCommandFromText,
+} from './middleware/textComposer/commandUtils';
 
 type UnregisterSubscriptions = Unsubscribe;
 
@@ -208,7 +212,16 @@ export class MessageComposer extends WithSubscriptions {
       );
     }
 
-    const mergeChannelConfigCustomizer: MergeWithCustomizer<
+    /**
+     * Customizes config merges for the composer constructor.
+     *
+     * It catches two scalar override cases that should not use the default deep merge:
+     * - client-disabled `enabled` flags stay disabled even if the channel config tries to re-enable them
+     * - scalar channel-config values replace client defaults for matching config keys
+     *
+     * All other values fall back to the normal `mergeWith` behavior.
+     */
+    const mergeMessageComposerConfigCustomizer: MergeWithCustomizer<
       DeepPartial<MessageComposerConfig>
     > = (originalVal, channelConfigVal, key) =>
       typeof originalVal === 'object'
@@ -223,14 +236,17 @@ export class MessageComposer extends WithSubscriptions {
             : originalVal;
 
     this.configState = new StateStore<MessageComposerConfig>(
-      mergeWith(
-        mergeWith(DEFAULT_COMPOSER_CONFIG, config ?? {}),
-        {
-          location: {
-            enabled: this.channel.getConfig()?.shared_locations,
+      applyCommandValidatorOverride(
+        mergeWith(
+          mergeWith(DEFAULT_COMPOSER_CONFIG, config ?? {}),
+          {
+            location: {
+              enabled: this.channel.getConfig()?.shared_locations,
+            },
           },
-        },
-        mergeChannelConfigCustomizer,
+          mergeMessageComposerConfigCustomizer,
+        ),
+        config,
       ),
     );
 
@@ -360,6 +376,14 @@ export class MessageComposer extends WithSubscriptions {
     return this.state.getLatestValue().quotedMessage;
   }
 
+  get pollId() {
+    return this.state.getLatestValue().pollId;
+  }
+
+  get showReplyInChannel() {
+    return this.state.getLatestValue().showReplyInChannel;
+  }
+
   getCommandDisabledReason = (
     command: CommandResponse,
   ): CommandSuggestionDisabledReason | undefined => {
@@ -378,21 +402,49 @@ export class MessageComposer extends WithSubscriptions {
   isCommandDisabled = (command: CommandResponse) =>
     !!this.getCommandDisabledReason(command);
 
-  get pollId() {
-    return this.state.getLatestValue().pollId;
-  }
+  validateCommandSendability = (
+    command: CommandResponse,
+    text = this.textComposer.text,
+  ): CommandSendability => {
+    const currentMentionedUsers = this.textComposer.mentionedUsers;
+    const mentionedUsersInText = getMentionedUsersInText(text, currentMentionedUsers);
+
+    const validationContext = {
+      command,
+      commandArgsText: command.name
+        ? stripCommandFromText(text, command.name).trim()
+        : text.trim(),
+      composer: this,
+      mentionedUsersInText,
+      rawText: text,
+    };
 
-  get showReplyInChannel() {
-    return this.state.getLatestValue().showReplyInChannel;
-  }
+    for (const validator of this.config.commands.sendValidators) {
+      const result = validator(validationContext);
+      if (result && !result.ready) {
+        return result;
+      }
+    }
+
+    return { command, ready: true };
+  };
+
+  isCommandSendable = (command: CommandResponse, text = this.textComposer.text) =>
+    this.validateCommandSendability(command, text).ready;
 
   get hasSendableData() {
-    return !!(
-      (!this.attachmentManager.uploadsInProgressCount &&
-        (!this.textComposer.textIsEmpty ||
-          this.attachmentManager.successfulUploadsCount > 0)) ||
-      this.pollId ||
-      !!this.locationComposer.validLocation
+    const currentCommand = this.textComposer.command;
+    const commandIsSendable = !currentCommand || this.isCommandSendable(currentCommand);
+
+    return (
+      commandIsSendable &&
+      !!(
+        (!this.attachmentManager.uploadsInProgressCount &&
+          (!this.textComposer.textIsEmpty ||
+            this.attachmentManager.successfulUploadsCount > 0)) ||
+        this.pollId ||
+        !!this.locationComposer.validLocation
+      )
     );
   }
 
@@ -426,7 +478,9 @@ export class MessageComposer extends WithSubscriptions {
   }
 
   updateConfig(config: DeepPartial<MessageComposerConfig>) {
-    this.configState.partialNext(mergeWith(this.config, config));
+    this.configState.partialNext(
+      applyCommandValidatorOverride(mergeWith(this.config, config), config),
+    );
   }
 
   refreshId = () => {
@@ -624,6 +678,7 @@ export class MessageComposer extends WithSubscriptions {
         draft.channel_cid !== this.channel.cid
       )
         return;
+      if (this.editedMessage) return;
       this.initState({ composition: draft });
     }).unsubscribe;
 
@@ -637,6 +692,7 @@ export class MessageComposer extends WithSubscriptions {
       ) {
         return;
       }
+      if (this.editedMessage) return;
 
       this.logDraftUpdateTimestamp();
 

src/messageComposer/middleware/messageComposer/compositionValidation.ts

@@ -1,7 +1,12 @@
 import { textIsEmpty } from '../../textComposer';
 import type { CommandResponse } from '../../../types';
 import { CommandSearchSource } from '../textComposer/commands';
-import { getRawCommandName, notifyCommandDisabled } from '../textComposer/commandUtils';
+import {
+  getCommandByName,
+  getRawCommandName,
+  notifyCommandDisabled,
+  notifyCommandNotReady,
+} from '../textComposer/commandUtils';
 import type {
   MessageComposerMiddlewareState,
   MessageCompositionMiddleware,
@@ -11,21 +16,9 @@ import type {
 import type { MessageComposer } from '../../messageComposer';
 import type { MiddlewareHandlerParams } from '../../../middleware';
 
-const getCommandByName = (
-  searchSource: CommandSearchSource,
-  commandName?: string,
-): CommandResponse | undefined => {
-  if (!commandName) return;
-
-  const normalizedCommandName = commandName.toLowerCase();
-  return searchSource
-    .query(normalizedCommandName)
-    .items.find((command) => command.name?.toLowerCase() === normalizedCommandName);
-};
-
 const getDisabledRawCommand = (
   composer: MessageComposer,
-  searchSource: CommandSearchSource,
+  searchSource: Pick<CommandSearchSource, 'query'>,
   text?: string,
 ): CommandResponse | undefined => {
   const rawCommand = getCommandByName(searchSource, getRawCommandName(text));
@@ -36,8 +29,10 @@ const getDisabledRawCommand = (
 
 export const createCompositionValidationMiddleware = (
   composer: MessageComposer,
+  commandSearchSource?: Pick<CommandSearchSource, 'query'>,
 ): MessageCompositionMiddleware => {
-  const commandSearchSource = new CommandSearchSource(composer.channel);
+  const effectiveCommandSearchSource =
+    commandSearchSource ?? new CommandSearchSource(composer.channel);
 
   return {
     id: 'stream-io/message-composer-middleware/data-validation',
@@ -52,14 +47,28 @@ export const createCompositionValidationMiddleware = (
 
         const disabledRawCommand = getDisabledRawCommand(
           composer,
-          commandSearchSource,
+          effectiveCommandSearchSource,
           inputText,
         );
         if (disabledRawCommand) {
           notifyCommandDisabled(composer, disabledRawCommand);
           return await discard();
         }
 
+        const currentCommand =
+          composer.textComposer.command ??
+          getCommandByName(effectiveCommandSearchSource, getRawCommandName(inputText));
+        if (currentCommand) {
+          if (
+            notifyCommandNotReady({
+              composer,
+              sendability: composer.validateCommandSendability(currentCommand, inputText),
+            })
+          ) {
+            return await discard();
+          }
+        }
+
         const hasExceededMaxLength =
           typeof maxLengthOnSend === 'number' && inputText.length > maxLengthOnSend;