stream-chat 9.42.2 → 9.43.0

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,

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

@@ -1,5 +1,6 @@
 export * from './activeCommandGuard';
 export * from './commands';
+export * from './commandEffects';
 export * from './commandStringExtraction';
 export * from './mentions';
 export * from './validation';

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

@@ -1,4 +1,5 @@
 import type { TextSelection } from './types';
+import { escapeCommandRegExp } from './commandUtils';
 
 /**
  * For commands, we want to match all patterns except:
@@ -16,7 +17,7 @@ export const getTriggerCharWithToken = ({
   isCommand?: boolean;
   acceptTrailingSpaces?: boolean;
 }) => {
-  const escapedTrigger = escapeRegExp(trigger);
+  const escapedTrigger = escapeCommandRegExp(trigger);
   const triggerNorWhitespace = `[^\\s${escapedTrigger}]*`;
 
   const match = text.match(
@@ -33,14 +34,6 @@ 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,
@@ -93,42 +86,6 @@ export const replaceWordWithEntity = async ({
   return textBeforeWord + newWord + spaces + textAfterCaret;
 };
 
-/**
- * Escapes a string for use in a regular expression
- * @param text - The string to escape
- * @returns The escaped string
- * What does this regex do?
-
- The regex escapes special regex characters by adding a backslash before them. Here's what it matches:
- - dash
- [ ] square brackets
- { } curly braces
- ( ) parentheses
- * asterisk
- + plus
- ? question mark
- . period
- , comma
- / forward slash
- \ backslash
- ^ caret
- $ dollar sign
- | pipe
- # hash
-
- The \\$& replacement adds a backslash before any matched character.
- This is needed when you want to use these characters literally
- in a regex pattern instead of their special regex meanings.
- For example:
- escapeRegExp("hello.world")  // Returns: "hello\.world"
- escapeRegExp("[test]")       // Returns: "\[test\]"
-
- This is commonly used when building dynamic regex patterns from user input to prevent special characters from being interpreted as regex syntax.
- */
-export function escapeRegExp(text: string) {
-  return text.replace(/[-[\]{}()*+?.,/\\^$|#]/g, '\\$&');
-}
-
 export type TokenizationPayload = {
   tokenizedDisplayName: { token: string; parts: string[] };
 };
@@ -144,7 +101,7 @@ export const getTokenizedSuggestionDisplayName = ({
     token: searchToken,
     parts: searchToken
       ? displayName
-          .split(new RegExp(`(${escapeRegExp(searchToken)})`, 'gi'))
+          .split(new RegExp(`(${escapeCommandRegExp(searchToken)})`, 'gi'))
           .filter(Boolean)
       : [displayName],
   },

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

@@ -1,4 +1,5 @@
 import type { MessageComposer } from '../../messageComposer';
+import type { MessageComposerEffect } from '../../messageComposer';
 import type { CommandResponse, UserResponse } from '../../../types';
 import type { TokenizationPayload } from './textMiddlewareUtils';
 import type { SearchSource, SearchSourceSync } from '../../../search';
@@ -12,11 +13,30 @@ export type BaseSuggestion = {
   id: string;
 };
 
+export type CommandSuggestionDisabledReason = 'editing' | 'quoted_message';
+
 export type CommandSuggestion = BaseSuggestion & CommandResponse;
 export type UserSuggestion = BaseSuggestion & UserResponse & TokenizationPayload;
 export type CustomValidSuggestion = BaseSuggestion & CustomTextComposerSuggestion;
 export type Suggestion = CommandSuggestion | UserSuggestion | CustomValidSuggestion;
 
+export type TextComposerStateSnapshot = TextComposerState;
+
+export type TextComposerCommandActivationStateToRestore =
+  Partial<TextComposerStateSnapshot>;
+
+export type TextComposerCommandActivationEffect = {
+  command: CommandResponse;
+  stateToRestore?: TextComposerCommandActivationStateToRestore;
+  type: 'command.activate';
+};
+
+export type TextComposerCommandClearEffect = {
+  type: 'command.clear';
+};
+
+export type TextComposerEffect = MessageComposerEffect;
+
 export type TextComposerMiddlewareOptions = {
   minChars: number;
   trigger: string;

package/src/messageComposer/pollComposer.ts

@@ -13,6 +13,8 @@ import type {
   UpdateFieldsData,
 } from './middleware/pollComposer';
 
+export type PollComposerSnapshot = PollComposerState;
+
 export type PollComposerOptions = {
   composer: MessageComposer;
 };
@@ -107,6 +109,12 @@ export class PollComposer {
     this.state.next(this.initialState);
   };
 
+  getSnapshot = (): PollComposerSnapshot => this.state.getLatestValue();
+
+  restoreSnapshot = (snapshot: PollComposerSnapshot) => {
+    this.state.next(snapshot);
+  };
+
   /**
    * Updates specified fields and generates relevant errors
    * @param data