feat: handle command injection optionally

src/messageComposer/middleware/messageComposer/commandInjection.ts

@@ -0,0 +1,72 @@
+import type { MessageComposer } from '../../messageComposer';
+import type {
+  MessageComposerMiddlewareState,
+  MessageCompositionMiddleware,
+  MessageDraftComposerMiddlewareValueState,
+  MessageDraftCompositionMiddleware,
+} from '../messageComposer/types';
+import type { MiddlewareHandlerParams } from '../../../middleware';
+
+export const createCommandInjectionMiddleware = (
+  composer: MessageComposer,
+): MessageCompositionMiddleware => ({
+  handlers: {
+    compose: ({
+      complete,
+      forward,
+      state,
+    }: MiddlewareHandlerParams<MessageComposerMiddlewareState>) => {
+      const command = composer.textComposer.command;
+      if (!command) {
+        return forward();
+      }
+      const { text } = state.localMessage;
+
+      const injection = `/${command?.name}`;
+      const enrichedText = `${injection} ${text}`;
+
+      return complete({
+        ...state,
+        localMessage: {
+          ...state.localMessage,
+          text: enrichedText,
+        },
+        message: {
+          ...state.message,
+          text: enrichedText,
+        },
+      });
+    },
+  },
+  id: 'stream-io/message-composer-middleware/command-injection',
+});
+
+export const createDraftCommandInjectionMiddleware = (
+  composer: MessageComposer,
+): MessageDraftCompositionMiddleware => ({
+  handlers: {
+    compose: ({
+      forward,
+      state,
+      complete,
+    }: MiddlewareHandlerParams<MessageDraftComposerMiddlewareValueState>) => {
+      const command = composer.textComposer.command;
+      if (!command) {
+        return forward();
+      }
+      const { text } = state.draft;
+
+      const injection = `/${command?.name}`;
+      const enrichedText = `${injection} ${text}`;
+
+      return complete({
+        ...state,
+        draft: {
+          ...state.draft,
+          text: enrichedText,
+        },
+      });
+    },
+  },
+  id: 'stream-io/message-composer-middleware/draft-command-injection',
+});

src/messageComposer/middleware/messageComposer/index.ts

@@ -7,3 +7,4 @@ export * from './MessageComposerMiddlewareExecutor';
 export * from './messageComposerState';
 export * from './textComposer';
 export * from './types';
+export * from './commandInjection';

src/messageComposer/middleware/textComposer/applyCommandSettings.ts

@@ -0,0 +1,55 @@
+import type { Middleware } from '../../../middleware';
+import type { TextComposerMiddlewareExecutorState } from './TextComposerMiddlewareExecutor';
+import type { CommandSuggestion } from './types';
+
+export type ApplyCommandSettingsMiddleware = Middleware<
+  TextComposerMiddlewareExecutorState<CommandSuggestion>,
+  'onChange' | 'onSuggestionItemSelect'
+>;
+
+export const createApplyCommandSettingsMiddleware =
+  (): ApplyCommandSettingsMiddleware => ({
+    handlers: {
+      onChange: ({ complete, forward, state }) => {
+        const { command } = state;
+
+        if (!command) {
+          return forward();
+        }
+
+        const trigger = `/${command.name}`;
+        const newText = state.text.replace(new RegExp(`^${trigger}(\\s|$)`), '');
+
+        return complete({
+          ...state,
+          selection: {
+            end: state.selection.end - trigger.length,
+            start: state.selection.start - trigger.length,
+          },
+          suggestions: undefined,
+          text: newText,
+        });
+      },
+      onSuggestionItemSelect: ({ complete, forward, state }) => {
+        const { command } = state;
+
+        if (!command) {
+          return forward();
+        }
+
+        const trigger = `/${command?.name} `;
+
+        const newText = state.text.slice(trigger.length);
+        return complete({
+          ...state,
+          selection: {
+            end: state.selection.end - trigger.length,
+            start: state.selection.start - trigger.length,
+          },
+          suggestions: undefined,
+          text: newText,
+        });
+      },
+    },
+    id: 'stream-io/text-composer/apply-command-settings',
+  });

src/messageComposer/middleware/textComposer/commands.ts

@@ -5,7 +5,11 @@ import { BaseSearchSource } from '../../../search_controller';
 import type { CommandResponse } from '../../../types';
 import { mergeWith } from '../../../utils/mergeWith';
 import type { CommandSuggestion, TextComposerMiddlewareOptions } from './types';
-import { getTriggerCharWithToken, insertItemWithTrigger } from './textMiddlewareUtils';
+import {
+  getTriggerCharWithToken,
+  insertItemWithTrigger,
+  isTextMatched,
+} from './textMiddlewareUtils';
 import type { TextComposerMiddlewareExecutorState } from './TextComposerMiddlewareExecutor';
 
 export class CommandSearchSource extends BaseSearchSource<CommandSuggestion> {
@@ -103,6 +107,7 @@ export const createCommandsMiddleware = (
     searchSource?: CommandSearchSource;
   },
 ): CommandsMiddleware => {
+  const commands = channel?.getConfig()?.commands ?? [];
   const finalOptions = mergeWith(DEFAULT_OPTIONS, options ?? {});
   let searchSource = new CommandSearchSource(channel);
   if (options?.searchSource) {
@@ -143,29 +148,49 @@ export const createCommandsMiddleware = (
           return next(newState);
         }
 
+        const inputText = triggerWithToken?.toLowerCase().slice(1);
+        const matchedCommand = commands.find((command) => {
+          if (!command.name || !inputText) return false;
+          return isTextMatched(inputText, command.name.toLowerCase());
+        });
+
+        if (matchedCommand) {
+          return next({
+            ...state,
+            command: matchedCommand,
+            suggestions: {
+              query: triggerWithToken.slice(1),
+              searchSource,
+              trigger: finalOptions.trigger,
+            },
+          });
+        }
+
         return complete({
           ...state,
+          command: null,
           suggestions: {
             query: triggerWithToken.slice(1),
             searchSource,
             trigger: finalOptions.trigger,
           },
         });
       },
-      onSuggestionItemSelect: ({ state, complete, forward }) => {
+      onSuggestionItemSelect: ({ state, next, forward }) => {
         const { selectedSuggestion } = state.change ?? {};
         if (!selectedSuggestion || state.suggestions?.trigger !== finalOptions.trigger)
           return forward();
 
         searchSource.resetStateAndActivate();
-        return complete({
+        return next({
           ...state,
           ...insertItemWithTrigger({
             insertText: `/${selectedSuggestion.name} `,
             selection: state.selection,
             text: state.text,
             trigger: finalOptions.trigger,
           }),
+          command: selectedSuggestion,
           suggestions: undefined,
         });
       },

src/messageComposer/middleware/textComposer/index.ts

@@ -1,4 +1,5 @@
 export * from './commands';
+export * from './applyCommandSettings';
 export * from './mentions';
 export * from './validation';
 export * from './TextComposerMiddlewareExecutor';

src/messageComposer/middleware/textComposer/textMiddlewareUtils.ts

@@ -134,3 +134,13 @@ export const getTokenizedSuggestionDisplayName = ({
       : [displayName],
   },
 });
+
+export const isTextMatched = (input: string, command: string): boolean => {
+  try {
+    const regex = new RegExp(`^${escapeRegExp(command)}`, 'i');
+    return regex.test(input);
+  } catch (error) {
+    console.error('Error in validating with the regex:', error);
+    return false;
+  }
+};

src/messageComposer/middleware/textComposer/types.ts

@@ -38,5 +38,6 @@ export type TextComposerState<T extends Suggestion = Suggestion> = {
   mentionedUsers: UserResponse[];
   selection: TextSelection;
   text: string;
+  command?: CommandResponse | null;
   suggestions?: Suggestions<T>;
 };

src/messageComposer/textComposer.ts

@@ -6,7 +6,7 @@ import type { TextSelection } from './middleware/textComposer/types';
 import type { TextComposerState } from './middleware/textComposer/types';
 import type { Suggestions } from './middleware/textComposer/types';
 import type { MessageComposer } from './messageComposer';
-import type { DraftMessage, LocalMessage, UserResponse } from '../types';
+import type { CommandResponse, DraftMessage, LocalMessage, UserResponse } from '../types';
 
 export type TextComposerOptions = {
   composer: MessageComposer;
@@ -37,6 +37,7 @@ const initState = ({
   if (!message) {
     const text = composer.config.text.defaultValue ?? '';
     return {
+      command: null,
       mentionedUsers: [],
       text,
       selection: { start: text.length, end: text.length },
@@ -118,6 +119,10 @@ export class TextComposer {
 
   // --- START STATE API ---
 
+  get command() {
+    return this.state.getLatestValue().command;
+  }
+
   get mentionedUsers() {
     return this.state.getLatestValue().mentionedUsers;
   }
@@ -146,6 +151,10 @@ export class TextComposer {
     this.state.partialNext({ mentionedUsers: users });
   }
 
+  clearCommand() {
+    this.state.partialNext({ command: null });
+  }
+
   upsertMentionedUser = (user: UserResponse) => {
     const mentionedUsers = [...this.mentionedUsers];
     const existingUserIndex = mentionedUsers.findIndex((u) => u.id === user.id);
@@ -169,6 +178,11 @@ export class TextComposer {
     this.state.partialNext({ mentionedUsers });
   };
 
+  setCommand = (command: CommandResponse | null) => {
+    if (command === this.command) return;
+    this.state.partialNext({ command });
+  };
+
   setText = (text: string) => {
     if (!this.enabled || text === this.text) return;
     this.state.partialNext({ text });