feat: handle command injection optionally (#1548)

The goal of the PR is to handle command injection and apply the command
settings to the text using middleware that the SDK or apps can plug in.
The existing commands middleware will be responsible for setting the
`command` state to the `textComposer`, which can be used by the other
middleware.

SDKs can basically add something like this to support the commands UI on
message input:
```
 messageComposer.compositionMiddlewareExecutor.insert({
    middleware: [createCommandInjectionMiddleware(messageComposer)],
    position: { after: 'stream-io/message-composer-middleware/attachments' },
  });

  messageComposer.draftCompositionMiddlewareExecutor.insert({
    middleware: [createDraftCommandInjectionMiddleware(messageComposer)],
    position: { after: 'stream-io/message-composer-middleware/draft-attachments' },
  });

  messageComposer.textComposer.middlewareExecutor.insert({
    middleware: [createActiveCommandGuardMiddleware() as TextComposerMiddleware],
    position: { before: 'stream-io/text-composer/commands-middleware' },
  });

  messageComposer.textComposer.middlewareExecutor.insert({
    middleware: [createCommandStringExtractionMiddleware() as TextComposerMiddleware],
    position: { after: 'stream-io/text-composer/commands-middleware' },
  });
```

---------

Co-authored-by: MartinCupela <[email protected]>

Author: khushal87

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: ({
+      forward,
+      next,
+      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 next({
+        ...state,
+        localMessage: {
+          ...state.localMessage,
+          text: enrichedText,
+        },
+        message: {
+          ...state.message,
+          text: enrichedText,
+        },
+      });
+    },
+  },
+  id: 'stream-io/message-composer-middleware/command-string-injection',
+});
+
+export const createDraftCommandInjectionMiddleware = (
+  composer: MessageComposer,
+): MessageDraftCompositionMiddleware => ({
+  handlers: {
+    compose: ({
+      forward,
+      next,
+      state,
+    }: MiddlewareHandlerParams<MessageDraftComposerMiddlewareValueState>) => {
+      const command = composer.textComposer.command;
+      if (!command) {
+        return forward();
+      }
+      const { text } = state.draft;
+
+      const injection = `/${command?.name}`;
+      const enrichedText = `${injection} ${text}`;
+
+      return next({
+        ...state,
+        draft: {
+          ...state.draft,
+          text: enrichedText,
+        },
+      });
+    },
+  },
+  id: 'stream-io/message-composer-middleware/draft-command-string-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/activeCommandGuard.ts

@@ -0,0 +1,20 @@
+import type { Middleware } from '../../../middleware';
+import type { TextComposerMiddlewareExecutorState } from './TextComposerMiddlewareExecutor';
+
+export type PreCommandMiddleware = Middleware<
+  TextComposerMiddlewareExecutorState,
+  'onChange' | 'onSuggestionItemSelect'
+>;
+
+export const createActiveCommandGuardMiddleware = (): PreCommandMiddleware => ({
+  handlers: {
+    onChange: ({ complete, forward, state }) => {
+      if (state.command) {
+        return complete(state);
+      }
+      return forward();
+    },
+    onSuggestionItemSelect: ({ forward }) => forward(),
+  },
+  id: 'stream-io/text-composer/active-command-guard',
+});

src/messageComposer/middleware/textComposer/commandStringExtraction.ts

@@ -0,0 +1,56 @@
+import type { TextComposerMiddlewareExecutorState } from './TextComposerMiddlewareExecutor';
+import type { CommandSuggestion } from './types';
+import type { Middleware } from '../../../middleware';
+import { escapeRegExp } from './textMiddlewareUtils';
+
+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: {
+      onChange: ({ complete, forward, state }) => {
+        const { command } = state;
+
+        if (!command?.name) {
+          return forward();
+        }
+
+        const newText = stripCommandFromText(state.text, command.name);
+
+        return complete({
+          ...state,
+          selection: {
+            end: newText.length,
+            start: newText.length,
+          },
+          text: newText,
+        });
+      },
+      onSuggestionItemSelect: ({ next, forward, state }) => {
+        const { command } = state;
+
+        if (!command) {
+          return forward();
+        }
+
+        const triggerWithCommand = `/${command?.name} `;
+
+        const newText = state.text.slice(triggerWithCommand.length);
+        return next({
+          ...state,
+          selection: {
+            end: newText.length,
+            start: newText.length,
+          },
+          text: newText,
+        });
+      },
+    },
+    id: 'stream-io/text-composer/command-string-extraction',
+  });

src/messageComposer/middleware/textComposer/commands.ts

@@ -5,7 +5,11 @@ import { BaseSearchSourceSync } from '../../../search';
 import type { CommandResponse } from '../../../types';
 import { mergeWith } from '../../../utils/mergeWith';
 import type { CommandSuggestion, TextComposerMiddlewareOptions } from './types';
-import { getTriggerCharWithToken, insertItemWithTrigger } from './textMiddlewareUtils';
+import {
+  getCompleteCommandInString,
+  getTriggerCharWithToken,
+  insertItemWithTrigger,
+} from './textMiddlewareUtils';
 import type { TextComposerMiddlewareExecutorState } from './TextComposerMiddlewareExecutor';
 
 export class CommandSearchSource extends BaseSearchSourceSync<CommandSuggestion> {
@@ -115,10 +119,22 @@ export const createCommandsMiddleware = (
     handlers: {
       onChange: ({ state, next, complete, forward }) => {
         if (!state.selection) return forward();
+        const finalText = state.text.slice(0, state.selection.end);
+        const commandName = getCompleteCommandInString(finalText);
+        if (commandName) {
+          const command = searchSource?.query(commandName).items[0];
+          if (command) {
+            return next({
+              ...state,
+              command,
+              suggestions: undefined,
+            });
+          }
+        }
 
         const triggerWithToken = getTriggerCharWithToken({
           trigger: finalOptions.trigger,
-          text: state.text.slice(0, state.selection.end),
+          text: finalText,
           acceptTrailingSpaces: false,
           isCommand: true,
         });
@@ -144,27 +160,29 @@ export const createCommandsMiddleware = (
 
         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,6 @@
+export * from './activeCommandGuard';
 export * from './commands';
+export * from './commandStringExtraction';
 export * from './mentions';
 export * from './validation';
 export * from './TextComposerMiddlewareExecutor';

src/messageComposer/middleware/textComposer/textMiddlewareUtils.ts

@@ -1,5 +1,10 @@
 import type { TextSelection } from './types';
 
+/**
+ * For commands, we want to match all patterns except:
+ * 1. Text not starting with trigger
+ * 2. Trigger in middle of text
+ */
 export const getTriggerCharWithToken = ({
   trigger,
   text,
@@ -12,6 +17,7 @@ export const getTriggerCharWithToken = ({
   acceptTrailingSpaces?: boolean;
 }) => {
   const triggerNorWhitespace = `[^\\s${trigger}]*`;
+
   const match = text.match(
     new RegExp(
       isCommand
@@ -26,6 +32,14 @@ export const getTriggerCharWithToken = ({
   return match && match[match.length - 1].trim();
 };
 
+export const getCompleteCommandInString = (text: string) => {
+  // starts with "/" followed by 1+ non-whitespace chars followed by 1+ white-space chars
+  // the comand name is extracted into a separate group
+  const match = text.match(/^\/(\S+)\s+.*/);
+  const commandName = match && match[1];
+  return commandName;
+};
+
 export const insertItemWithTrigger = ({
   insertText,
   selection,

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?.name === this.command?.name) return;
+    this.state.partialNext({ command });
+  };
+
   setText = (text: string) => {
     if (!this.enabled || text === this.text) return;
     this.state.partialNext({ text });