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: ({
+      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 });
@@ -181,7 +195,13 @@ export class TextComposer {
     this.state.partialNext({ selection });
   };
 
-  insertText = ({ text, selection }: { text: string; selection?: TextSelection }) => {
+  insertText = async ({
+    text,
+    selection,
+  }: {
+    text: string;
+    selection?: TextSelection;
+  }) => {
     if (!this.enabled) return;
 
     const finalSelection: TextSelection = selection ?? this.selection;
@@ -203,7 +223,7 @@ export class TextComposer {
         ? finalText.length
         : currentText.slice(0, expectedCursorPosition).length;
 
-    this.state.partialNext({
+    await this.handleChange({
       text: finalText,
       selection: {
         start: cursorPosition,

src/pagination/BasePaginator.ts

@@ -38,7 +38,7 @@ export const DEFAULT_PAGINATION_OPTIONS: Required<PaginatorOptions> = {
 
 export abstract class BasePaginator<T> {
   state: StateStore<PaginatorState<T>>;
-  protected pageSize: number;
+  pageSize: number;
   protected _executeQueryDebounced!: DebouncedExecQueryFunction;
   protected _isCursorPagination = false;
 

src/pagination/ReminderPaginator.ts

@@ -9,8 +9,26 @@ import type { StreamChat } from '../client';
 
 export class ReminderPaginator extends BasePaginator<ReminderResponse> {
   private client: StreamChat;
-  filters: ReminderFilters | undefined;
-  sort: ReminderSort | undefined;
+  protected _filters: ReminderFilters | undefined;
+  protected _sort: ReminderSort | undefined;
+
+  get filters(): ReminderFilters | undefined {
+    return this._filters;
+  }
+
+  get sort(): ReminderSort | undefined {
+    return this._sort;
+  }
+
+  set filters(filters: ReminderFilters | undefined) {
+    this._filters = filters;
+    this.resetState();
+  }
+
+  set sort(sort: ReminderSort | undefined) {
+    this._sort = sort;
+    this.resetState();
+  }
 
   constructor(client: StreamChat, options?: PaginatorOptions) {
     super(options);