stream-chat 9.42.3 → 9.43.1

package/src/messageComposer/MessageComposerEffectHandlers.ts

@@ -0,0 +1,89 @@
+import type { MessageComposer, MessageComposerEffectHandler } from './messageComposer';
+import type {
+  TextComposerCommandActivationEffect,
+  TextComposerCommandClearEffect,
+} from './middleware/textComposer/types';
+
+type RegisteredMessageComposerEffectHandler = (
+  effect: { type: string },
+  composer: MessageComposer,
+) => void;
+
+export type MessageComposerEffectHandlersOptions = {
+  composer: MessageComposer;
+};
+
+const applyCommandActivationEffect: MessageComposerEffectHandler<
+  TextComposerCommandActivationEffect
+> = (effect, composer) => {
+  const snapshot = composer.getSnapshot();
+  if (effect.stateToRestore) {
+    snapshot.textComposer = {
+      ...snapshot.textComposer,
+      ...effect.stateToRestore,
+      command: null,
+    };
+  }
+  composer.captureSnapshot(snapshot);
+
+  // we manually clear because we want the command to still persist
+  composer.textComposer.state.next({
+    command: effect.command,
+    mentionedUsers: [],
+    suggestions: undefined,
+    selection: { start: 0, end: 0 },
+    text: '',
+  });
+  const attachmentsToCancel = composer.attachmentManager.attachments;
+  composer.attachmentManager.initState();
+  composer.attachmentManager.cancelAttachmentUploads(attachmentsToCancel);
+  composer.linkPreviewsManager.initState();
+  composer.locationComposer.initState();
+  composer.pollComposer.initState();
+  composer.customDataManager.initState();
+};
+
+const applyCommandClearEffect: MessageComposerEffectHandler<
+  TextComposerCommandClearEffect
+> = (_, composer) => {
+  const snapshot = composer.popSnapshot();
+
+  if (!snapshot) return;
+
+  composer.restoreSnapshot(snapshot);
+};
+
+export class MessageComposerEffectHandlers {
+  private handlers = new Map<string, RegisteredMessageComposerEffectHandler>();
+
+  constructor(private options: MessageComposerEffectHandlersOptions) {
+    this.registerDefaultHandlers();
+  }
+
+  private registerDefaultHandlers = () => {
+    this.registerEffectHandler<TextComposerCommandActivationEffect>(
+      'command.activate',
+      applyCommandActivationEffect,
+    );
+    this.registerEffectHandler<TextComposerCommandClearEffect>(
+      'command.clear',
+      applyCommandClearEffect,
+    );
+  };
+
+  registerEffectHandler = <T extends { type: string }>(
+    type: T['type'],
+    handler: MessageComposerEffectHandler<T>,
+  ): void => {
+    this.handlers.set(type, handler as RegisteredMessageComposerEffectHandler);
+  };
+
+  applyEffects = <T extends { type: string }>(effects: T[] = []) => {
+    effects.forEach((effect) => this.applyEffect(effect));
+  };
+
+  private applyEffect = (effect: { type: string }) => {
+    const handler = this.handlers.get(effect.type);
+    handler?.(effect, this.options.composer);
+  };
+}

package/src/messageComposer/attachmentManager.ts

@@ -41,6 +41,8 @@ export type AttachmentManagerState = {
   attachments: LocalAttachment[];
 };
 
+export type AttachmentManagerSnapshot = AttachmentManagerState;
+
 export type AttachmentManagerOptions = {
   composer: MessageComposer;
   message?: DraftMessage | LocalMessage;
@@ -208,10 +210,62 @@ export class AttachmentManager {
     );
   }
 
+  cancelAttachmentUploads = (attachments: LocalAttachment[] = this.attachments) => {
+    for (const { localMetadata } of attachments) {
+      this.client.uploadManager.deleteUploadRecord(localMetadata.id);
+    }
+  };
+
+  private normalizeSnapshotAttachment = (attachment: LocalAttachment) => {
+    if (attachment.localMetadata.uploadState !== 'uploading') return attachment;
+
+    this.client.uploadManager.deleteUploadRecord(attachment.localMetadata.id);
+
+    return {
+      ...attachment,
+      localMetadata: {
+        ...attachment.localMetadata,
+        uploadProgress: undefined,
+        uploadState: 'failed',
+      },
+    } as LocalAttachment;
+  };
+
   initState = ({ message }: { message?: DraftMessage | LocalMessage } = {}) => {
     this.state.next(initState({ message }));
   };
 
+  getSnapshot = (): AttachmentManagerSnapshot => {
+    const state = this.state.getLatestValue();
+    let hasUpdates = false;
+    const attachments = state.attachments.map(this.normalizeSnapshotAttachment);
+
+    for (let i = 0; i < attachments.length; i++) {
+      if (attachments[i] !== state.attachments[i]) {
+        hasUpdates = true;
+        break;
+      }
+    }
+
+    return hasUpdates ? { ...state, attachments } : state;
+  };
+
+  restoreSnapshot = (snapshot: AttachmentManagerSnapshot) => {
+    this.cancelAttachmentUploads(this.attachments);
+    this.state.next(snapshot);
+  };
+
+  setAttachments = (attachments: LocalAttachment[]) => {
+    this.state.partialNext({ attachments });
+  };
+
+  clearAttachments = () => {
+    if (!this.attachments.length) return;
+    this.removeAttachments(
+      this.attachments.map((attachment) => attachment.localMetadata.id),
+    );
+  };
+
   getAttachmentIndex = (localId: string) => {
     const attachmentsById = this.attachmentsById;
 

package/src/messageComposer/linkPreviewsManager.ts

@@ -11,7 +11,7 @@ export type LinkPreview = OGAttachment & {
 };
 
 export interface ILinkPreviewsManager {
-  /** Function cancels all the scheduled or in-progress URL enrichment queries and resets the state. */
+  /** Function cancels all scheduled or in-progress URL enrichment queries. */
   cancelURLEnrichment: () => void;
   /** Function that triggers the search for URLs and their enrichment. */
   findAndEnrichUrls?: DebouncedFunc<(text: string) => void>;
@@ -38,6 +38,8 @@ export type LinkPreviewsManagerState = {
   previews: LinkPreviewMap;
 };
 
+export type LinkPreviewsManagerSnapshot = LinkPreviewsManagerState;
+
 export type LinkPreviewsManagerOptions = {
   composer: MessageComposer;
   message?: DraftMessage | LocalMessage;
@@ -186,9 +188,16 @@ export class LinkPreviewsManager implements ILinkPreviewsManager {
   }
 
   initState = ({ message }: { message?: DraftMessage | LocalMessage } = {}) => {
+    this.cancelURLEnrichment();
     this.state.next(initState({ message: this.enabled ? message : undefined }));
   };
 
+  getSnapshot = (): LinkPreviewsManagerSnapshot => this.state.getLatestValue();
+
+  restoreSnapshot = (snapshot: LinkPreviewsManagerSnapshot) => {
+    this.state.next(snapshot);
+  };
+
   private _findAndEnrichUrls = async (text: string) => {
     if (!this.enabled) return;
     const urls = this.config.findURLFn(text);
@@ -254,8 +263,8 @@ export class LinkPreviewsManager implements ILinkPreviewsManager {
   };
 
   cancelURLEnrichment = () => {
-    this.findAndEnrichUrls.cancel();
-    this.findAndEnrichUrls.flush();
+    this.findAndEnrichUrls.cancel?.();
+    this.findAndEnrichUrls.flush?.();
   };
 
   /**

package/src/messageComposer/messageComposer.ts

@@ -2,6 +2,7 @@ import { AttachmentManager } from './attachmentManager';
 import { CustomDataManager } from './CustomDataManager';
 import { LinkPreviewsManager } from './linkPreviewsManager';
 import { LocationComposer } from './LocationComposer';
+import { MessageComposerEffectHandlers } from './MessageComposerEffectHandlers';
 import { PollComposer } from './pollComposer';
 import { TextComposer } from './textComposer';
 import { DEFAULT_COMPOSER_CONFIG } from './configuration';
@@ -18,6 +19,7 @@ import { Channel } from '../channel';
 import { Thread } from '../thread';
 import type {
   ChannelAPIResponse,
+  CommandResponse,
   DraftMessage,
   DraftResponse,
   EventTypes,
@@ -29,6 +31,17 @@ import type {
 import { WithSubscriptions } from '../utils/WithSubscriptions';
 import type { StreamChat } from '../client';
 import type { MessageComposerConfig } from './configuration/types';
+import type {
+  CommandSuggestionDisabledReason,
+  TextComposerCommandActivationEffect,
+  TextComposerCommandClearEffect,
+} from './middleware/textComposer/types';
+import type { AttachmentManagerSnapshot } from './attachmentManager';
+import type { CustomDataManagerSnapshot } from './CustomDataManager';
+import type { LinkPreviewsManagerSnapshot } from './linkPreviewsManager';
+import type { LocationComposerSnapshot } from './LocationComposer';
+import type { PollComposerSnapshot } from './pollComposer';
+import type { TextComposerSnapshot } from './textComposer';
 import type { DeepPartial } from '../types.utility';
 import type { MergeWithCustomizer } from '../utils/mergeWith/mergeWithCore';
 
@@ -40,6 +53,31 @@ export type EditingAuditState = {
   lastChange: LastComposerChange;
 };
 
+export type BuiltInMessageComposerEffect =
+  | TextComposerCommandActivationEffect
+  | TextComposerCommandClearEffect;
+
+export type CustomMessageComposerEffect = {
+  type: string & {};
+} & Record<string, unknown>;
+
+export type MessageComposerEffect =
+  | BuiltInMessageComposerEffect
+  | CustomMessageComposerEffect;
+
+export type MessageComposerEffectHandler<
+  T extends { type: string } = MessageComposerEffect,
+> = (effect: T, composer: MessageComposer) => void;
+
+export type MessageComposerSnapshot = {
+  attachmentManager: AttachmentManagerSnapshot;
+  customDataManager: CustomDataManagerSnapshot;
+  linkPreviewsManager: LinkPreviewsManagerSnapshot;
+  locationComposer: LocationComposerSnapshot;
+  pollComposer: PollComposerSnapshot;
+  textComposer: TextComposerSnapshot;
+};
+
 export type LocalMessageWithLegacyThreadId = LocalMessage & { legacyThreadId?: string };
 export type CompositionContext = Channel | Thread | LocalMessageWithLegacyThreadId;
 
@@ -142,6 +180,8 @@ export class MessageComposer extends WithSubscriptions {
   pollComposer: PollComposer;
   locationComposer: LocationComposer;
   customDataManager: CustomDataManager;
+  private snapshots: MessageComposerSnapshot[] = [];
+  private effectHandlers: MessageComposerEffectHandlers;
   // todo: mediaRecorder: MediaRecorderController;
 
   constructor({
@@ -219,6 +259,7 @@ export class MessageComposer extends WithSubscriptions {
     this.draftCompositionMiddlewareExecutor = new MessageDraftComposerMiddlewareExecutor({
       composer: this,
     });
+    this.effectHandlers = new MessageComposerEffectHandlers({ composer: this });
   }
 
   static evaluateContextType(compositionContext: CompositionContext) {
@@ -259,6 +300,9 @@ export class MessageComposer extends WithSubscriptions {
 
   setEditedMessage = (editedMessage: LocalMessage | null | undefined) => {
     this.state.partialNext({ editedMessage: editedMessage ?? null });
+    if (editedMessage) {
+      this.textComposer.clearCommand();
+    }
   };
 
   get contextType() {
@@ -316,6 +360,24 @@ export class MessageComposer extends WithSubscriptions {
     return this.state.getLatestValue().quotedMessage;
   }
 
+  getCommandDisabledReason = (
+    command: CommandResponse,
+  ): CommandSuggestionDisabledReason | undefined => {
+    if (this.editedMessage) return 'editing';
+
+    if (
+      this.quotedMessage &&
+      (command.set === 'moderation_set' || command.name === 'moderation_set')
+    ) {
+      return 'quoted_message';
+    }
+
+    return undefined;
+  };
+
+  isCommandDisabled = (command: CommandResponse) =>
+    !!this.getCommandDisabledReason(command);
+
   get pollId() {
     return this.state.getLatestValue().pollId;
   }
@@ -374,6 +436,7 @@ export class MessageComposer extends WithSubscriptions {
   initState = ({
     composition,
   }: { composition?: DraftResponse | MessageResponse | LocalMessage } = {}) => {
+    this.clearSnapshots();
     this.editingAuditState.partialNext(this.initEditingAuditState(composition));
 
     const message: LocalMessage | DraftMessage | undefined =
@@ -414,6 +477,46 @@ export class MessageComposer extends WithSubscriptions {
     composition?: DraftResponse | MessageResponse | LocalMessage,
   ) => initEditingAuditState(composition);
 
+  clearSnapshots = () => {
+    this.snapshots = [];
+  };
+
+  getSnapshot = (): MessageComposerSnapshot => ({
+    attachmentManager: this.attachmentManager.getSnapshot(),
+    customDataManager: this.customDataManager.getSnapshot(),
+    linkPreviewsManager: this.linkPreviewsManager.getSnapshot(),
+    locationComposer: this.locationComposer.getSnapshot(),
+    pollComposer: this.pollComposer.getSnapshot(),
+    textComposer: this.textComposer.getSnapshot(),
+  });
+
+  restoreSnapshot = (snapshot: MessageComposerSnapshot) => {
+    this.attachmentManager.restoreSnapshot(snapshot.attachmentManager);
+    this.linkPreviewsManager.restoreSnapshot(snapshot.linkPreviewsManager);
+    this.locationComposer.restoreSnapshot(snapshot.locationComposer);
+    this.pollComposer.restoreSnapshot(snapshot.pollComposer);
+    this.customDataManager.restoreSnapshot(snapshot.customDataManager);
+    this.textComposer.restoreSnapshot(snapshot.textComposer);
+  };
+
+  captureSnapshot = (snapshot = this.getSnapshot()) => {
+    if (this.snapshots.length) return;
+    this.snapshots.push(snapshot);
+  };
+
+  popSnapshot = () => this.snapshots.pop();
+
+  registerEffectHandler = <T extends { type: string }>(
+    type: T['type'],
+    handler: MessageComposerEffectHandler<T>,
+  ): void => {
+    this.effectHandlers.registerEffectHandler(type, handler);
+  };
+
+  applyEffects = <T extends { type: string }>(effects: T[] = []) => {
+    this.effectHandlers.applyEffects(effects);
+  };
+
   private logStateUpdateTimestamp() {
     this.editingAuditState.partialNext({
       lastChange: { ...this.lastChange, stateUpdate: new Date().getTime() },
@@ -671,6 +774,10 @@ export class MessageComposer extends WithSubscriptions {
 
   setQuotedMessage = (quotedMessage: LocalMessage | null) => {
     this.state.partialNext({ quotedMessage });
+    const activeCommand = this.textComposer.command;
+    if (quotedMessage && activeCommand && this.isCommandDisabled(activeCommand)) {
+      this.textComposer.clearCommand();
+    }
   };
 
   toggleShowReplyInChannel = () => {

package/src/messageComposer/middleware/messageComposer/compositionValidation.ts

@@ -1,4 +1,7 @@
 import { textIsEmpty } from '../../textComposer';
+import type { CommandResponse } from '../../../types';
+import { CommandSearchSource } from '../textComposer/commands';
+import { getRawCommandName, notifyCommandDisabled } from '../textComposer/commandUtils';
 import type {
   MessageComposerMiddlewareState,
   MessageCompositionMiddleware,
@@ -8,30 +11,67 @@ 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,
+  text?: string,
+): CommandResponse | undefined => {
+  const rawCommand = getCommandByName(searchSource, getRawCommandName(text));
+  if (rawCommand && composer.isCommandDisabled(rawCommand)) {
+    return rawCommand;
+  }
+};
+
 export const createCompositionValidationMiddleware = (
   composer: MessageComposer,
-): MessageCompositionMiddleware => ({
-  id: 'stream-io/message-composer-middleware/data-validation',
-  handlers: {
-    compose: async ({
-      state,
-      discard,
-      forward,
-    }: MiddlewareHandlerParams<MessageComposerMiddlewareState>) => {
-      const { maxLengthOnSend } = composer.config.text ?? {};
-      const inputText = state.message.text ?? '';
+): MessageCompositionMiddleware => {
+  const commandSearchSource = new CommandSearchSource(composer.channel);
 
-      const hasExceededMaxLength =
-        typeof maxLengthOnSend === 'number' && inputText.length > maxLengthOnSend;
+  return {
+    id: 'stream-io/message-composer-middleware/data-validation',
+    handlers: {
+      compose: async ({
+        state,
+        discard,
+        forward,
+      }: MiddlewareHandlerParams<MessageComposerMiddlewareState>) => {
+        const { maxLengthOnSend } = composer.config.text ?? {};
+        const inputText = state.message.text ?? '';
 
-      if (composer.compositionIsEmpty || hasExceededMaxLength) {
-        return await discard();
-      }
+        const disabledRawCommand = getDisabledRawCommand(
+          composer,
+          commandSearchSource,
+          inputText,
+        );
+        if (disabledRawCommand) {
+          notifyCommandDisabled(composer, disabledRawCommand);
+          return await discard();
+        }
 
-      return await forward();
+        const hasExceededMaxLength =
+          typeof maxLengthOnSend === 'number' && inputText.length > maxLengthOnSend;
+
+        if (composer.compositionIsEmpty || hasExceededMaxLength) {
+          return await discard();
+        }
+
+        return await forward();
+      },
     },
-  },
-});
+  };
+};
 
 export const createDraftCompositionValidationMiddleware = (
   composer: MessageComposer,

package/src/messageComposer/middleware/textComposer/TextComposerMiddlewareExecutor.ts

@@ -1,4 +1,5 @@
 import { createCommandsMiddleware } from './commands';
+import { createCommandEffectsMiddleware } from './commandEffects';
 import { createMentionsMiddleware } from './mentions';
 import { createTextComposerPreValidationMiddleware } from './validation';
 import { MiddlewareExecutor } from '../../../middleware';
@@ -10,6 +11,7 @@ import type {
 import type {
   Suggestion,
   Suggestions,
+  TextComposerEffect,
   TextComposerMiddlewareExecutorOptions,
   TextComposerState,
 } from './types';
@@ -19,6 +21,7 @@ export type TextComposerMiddlewareExecutorState<T extends Suggestion = Suggestio
     change?: {
       selectedSuggestion?: T;
     };
+    effects?: TextComposerEffect[];
   };
 
 export type TextComposerHandlerNames = 'onChange' | 'onSuggestionItemSelect';
@@ -43,7 +46,10 @@ export class TextComposerMiddlewareExecutor<
     this.use([
       createTextComposerPreValidationMiddleware(composer) as TextComposerMiddleware<T>,
       createMentionsMiddleware(composer.channel) as TextComposerMiddleware<T>,
-      createCommandsMiddleware(composer.channel) as TextComposerMiddleware<T>,
+      createCommandsMiddleware(composer.channel, {
+        composer,
+      }) as TextComposerMiddleware<T>,
+      createCommandEffectsMiddleware() as TextComposerMiddleware<T>,
     ]);
   }
 

package/src/messageComposer/middleware/textComposer/commandEffects.ts

@@ -0,0 +1,51 @@
+import type { Middleware } from '../../../middleware';
+import type { CommandResponse } from '../../../types';
+import type {
+  CommandSuggestion,
+  TextComposerCommandActivationEffect,
+  TextComposerCommandActivationStateToRestore,
+} from './types';
+import type { TextComposerMiddlewareExecutorState } from './TextComposerMiddlewareExecutor';
+
+export type CommandEffectsMiddleware = Middleware<
+  TextComposerMiddlewareExecutorState<CommandSuggestion>,
+  'onChange' | 'onSuggestionItemSelect'
+>;
+
+const emptyCommandStateToRestore: TextComposerCommandActivationStateToRestore = {
+  selection: { start: 0, end: 0 },
+  text: '',
+};
+
+const createCommandActivationEffect = (
+  command: CommandResponse,
+): TextComposerCommandActivationEffect => ({
+  command,
+  stateToRestore: emptyCommandStateToRestore,
+  type: 'command.activate',
+});
+
+const isCommandResponse = (suggestion: unknown): suggestion is CommandSuggestion =>
+  typeof (suggestion as CommandSuggestion | undefined)?.name === 'string';
+
+export const createCommandEffectsMiddleware = (): CommandEffectsMiddleware => ({
+  handlers: {
+    onChange: ({ forward }) => forward(),
+    onSuggestionItemSelect: ({ state, next, forward }) => {
+      const { selectedSuggestion } = state.change ?? {};
+      if (
+        !isCommandResponse(selectedSuggestion) ||
+        !state.command ||
+        state.command.name !== selectedSuggestion.name
+      ) {
+        return forward();
+      }
+
+      return next({
+        ...state,
+        effects: [...(state.effects ?? []), createCommandActivationEffect(state.command)],
+      });
+    },
+  },
+  id: 'stream-io/text-composer/command-effects-middleware',
+});

package/src/messageComposer/middleware/textComposer/commandStringExtraction.ts

@@ -1,16 +1,13 @@
 import type { TextComposerMiddlewareExecutorState } from './TextComposerMiddlewareExecutor';
 import type { CommandSuggestion } from './types';
 import type { Middleware } from '../../../middleware';
-import { escapeRegExp } from './textMiddlewareUtils';
+import { stripCommandFromText } from './commandUtils';
 
 export type CommandStringExtractionMiddleware = Middleware<
   TextComposerMiddlewareExecutorState<CommandSuggestion>,
   'onChange' | 'onSuggestionItemSelect'
 >;
 
-const stripCommandFromText = (text: string, commandName: string) =>
-  text.replace(new RegExp(`^${escapeRegExp(`/${commandName}`)}\\s*`), '');
-
 export const createCommandStringExtractionMiddleware =
   (): CommandStringExtractionMiddleware => ({
     handlers: {

package/src/messageComposer/middleware/textComposer/commandUtils.ts

@@ -0,0 +1,48 @@
+import type { MessageComposer } from '../../messageComposer';
+import type { CommandResponse } from '../../../types';
+
+export function escapeCommandRegExp(text: string) {
+  return text.replace(/[-[\]{}()*+?.,/\\^$|#]/g, '\\$&');
+}
+
+export const getRawCommandName = (text?: string) =>
+  text?.match(/^\/(\S+)(?:\s.*)?$/)?.[1];
+
+export const getCompleteCommandInString = (text: string) => {
+  // starts with "/" followed by 1+ non-whitespace chars followed by 1+ white-space chars
+  // the command name is extracted into a separate group
+  const match = text.match(/^\/(\S+)\s+.*/);
+  const commandName = match && match[1];
+  return commandName;
+};
+
+export const stripCommandFromText = (text: string, commandName: string) =>
+  text.replace(new RegExp(`^${escapeCommandRegExp(`/${commandName}`)}\\s*`), '');
+
+export const notifyCommandDisabled = (
+  composer: MessageComposer,
+  command: CommandResponse,
+) => {
+  const disabledReason = composer.getCommandDisabledReason(command);
+  if (!disabledReason) return;
+
+  composer.client.notifications.addWarning({
+    message:
+      disabledReason === 'editing'
+        ? 'Command not available while editing'
+        : 'Command not available while replying',
+    origin: {
+      emitter: 'MessageComposer',
+      context: { command, composer },
+    },
+    options: {
+      type: 'validation:command:disabled',
+      metadata: {
+        command: command.name,
+        reason: disabledReason,
+      },
+    },
+  });
+
+  return true;
+};

package/src/messageComposer/middleware/textComposer/commands.ts

@@ -4,12 +4,10 @@ import type { SearchSourceOptions } from '../../../search';
 import { BaseSearchSourceSync } from '../../../search';
 import type { CommandResponse } from '../../../types';
 import { mergeWith } from '../../../utils/mergeWith';
+import type { MessageComposer } from '../../messageComposer';
 import type { CommandSuggestion, TextComposerMiddlewareOptions } from './types';
-import {
-  getCompleteCommandInString,
-  getTriggerCharWithToken,
-  insertItemWithTrigger,
-} from './textMiddlewareUtils';
+import { getCompleteCommandInString, notifyCommandDisabled } from './commandUtils';
+import { getTriggerCharWithToken, insertItemWithTrigger } from './textMiddlewareUtils';
 import type { TextComposerMiddlewareExecutorState } from './TextComposerMiddlewareExecutor';
 
 export class CommandSearchSource extends BaseSearchSourceSync<CommandSuggestion> {
@@ -70,7 +68,10 @@ export class CommandSearchSource extends BaseSearchSourceSync<CommandSuggestion>
     });
 
     return {
-      items: selectedCommands.map((c) => ({ ...c, id: c.name })),
+      items: selectedCommands.map((command) => ({
+        ...command,
+        id: command.name,
+      })),
       next: null,
     };
   }
@@ -103,6 +104,7 @@ export type CommandsMiddleware = Middleware<
 export const createCommandsMiddleware = (
   channel: Channel,
   options?: Partial<TextComposerMiddlewareOptions> & {
+    composer?: MessageComposer;
     searchSource?: CommandSearchSource;
   },
 ): CommandsMiddleware => {
@@ -123,7 +125,8 @@ export const createCommandsMiddleware = (
         const commandName = getCompleteCommandInString(finalText);
         if (commandName) {
           const command = searchSource?.query(commandName).items[0];
-          if (command) {
+          const composer = options?.composer;
+          if (command && !composer?.isCommandDisabled(command)) {
             return next({
               ...state,
               command,
@@ -173,6 +176,11 @@ export const createCommandsMiddleware = (
         if (!selectedSuggestion || state.suggestions?.trigger !== finalOptions.trigger)
           return forward();
 
+        const composer = options?.composer;
+        if (composer && notifyCommandDisabled(composer, selectedSuggestion)) {
+          return forward();
+        }
+
         searchSource.resetStateAndActivate();
         return next({
           ...state,