stream-chat 9.44.2 → 9.45.0

package/src/messageComposer/configuration/types.ts

@@ -1,6 +1,8 @@
 import type { LinkPreview } from '../linkPreviewsManager';
 import type { FileUploadFilter } from '../attachmentManager';
+import type { MessageComposer } from '../messageComposer';
 import type { FileLike, FileReference } from '../types';
+import type { CommandResponse, UserResponse } from '../../types';
 
 export type MinimumUploadRequestResult = { file: string; thumb_url?: string } & Partial<
   Record<string, unknown>
@@ -38,6 +40,29 @@ export type TextComposerConfig = {
   maxLengthOnSend?: number;
 };
 
+export type CommandSendability = {
+  command: CommandResponse;
+  ready: boolean;
+  reason?: string & {};
+  metadata?: Record<string, unknown>;
+};
+
+export type CommandSendValidationContext = {
+  command: CommandResponse;
+  composer: MessageComposer;
+  commandArgsText: string;
+  mentionedUsersInText: UserResponse[];
+  rawText: string;
+};
+
+export type CommandSendValidator = (
+  context: CommandSendValidationContext,
+) => CommandSendability | undefined;
+
+export type CommandsConfig = {
+  sendValidator: CommandSendValidator;
+};
+
 export type AttachmentManagerConfig = {
   // todo: document removal of noFiles prop showing how to achieve the same with custom fileUploadFilter function
   /**
@@ -86,6 +111,8 @@ export type LocationComposerConfig = {
 export type MessageComposerConfig = {
   /** If true, enables creating drafts on the server */
   drafts: DraftsConfiguration;
+  /** Configuration for command sendability validation */
+  commands: CommandsConfig;
   /** Configuration for the attachment manager */
   attachments: AttachmentManagerConfig;
   /** Configuration for the link previews manager */

package/src/messageComposer/messageComposer.ts

@@ -5,7 +5,7 @@ import { LocationComposer } from './LocationComposer';
 import { MessageComposerEffectHandlers } from './MessageComposerEffectHandlers';
 import { PollComposer } from './pollComposer';
 import { TextComposer } from './textComposer';
-import { DEFAULT_COMPOSER_CONFIG } from './configuration';
+import { applyCommandValidatorOverride, DEFAULT_COMPOSER_CONFIG } from './configuration';
 import type { MessageComposerMiddlewareValue } from './middleware';
 import {
   MessageComposerMiddlewareExecutor,
@@ -30,7 +30,7 @@ import type {
 } from '../types';
 import { WithSubscriptions } from '../utils/WithSubscriptions';
 import type { StreamChat } from '../client';
-import type { MessageComposerConfig } from './configuration/types';
+import type { CommandSendability, MessageComposerConfig } from './configuration/types';
 import type {
   CommandSuggestionDisabledReason,
   TextComposerCommandActivationEffect,
@@ -44,6 +44,10 @@ import type { PollComposerSnapshot } from './pollComposer';
 import type { TextComposerSnapshot } from './textComposer';
 import type { DeepPartial } from '../types.utility';
 import type { MergeWithCustomizer } from '../utils/mergeWith/mergeWithCore';
+import {
+  getMentionedUsersInText,
+  stripCommandFromText,
+} from './middleware/textComposer/commandUtils';
 
 type UnregisterSubscriptions = Unsubscribe;
 
@@ -208,7 +212,16 @@ export class MessageComposer extends WithSubscriptions {
       );
     }
 
-    const mergeChannelConfigCustomizer: MergeWithCustomizer<
+    /**
+     * Customizes config merges for the composer constructor.
+     *
+     * It catches two scalar override cases that should not use the default deep merge:
+     * - client-disabled `enabled` flags stay disabled even if the channel config tries to re-enable them
+     * - scalar channel-config values replace client defaults for matching config keys
+     *
+     * All other values fall back to the normal `mergeWith` behavior.
+     */
+    const mergeMessageComposerConfigCustomizer: MergeWithCustomizer<
       DeepPartial<MessageComposerConfig>
     > = (originalVal, channelConfigVal, key) =>
       typeof originalVal === 'object'
@@ -223,14 +236,17 @@ export class MessageComposer extends WithSubscriptions {
             : originalVal;
 
     this.configState = new StateStore<MessageComposerConfig>(
-      mergeWith(
-        mergeWith(DEFAULT_COMPOSER_CONFIG, config ?? {}),
-        {
-          location: {
-            enabled: this.channel.getConfig()?.shared_locations,
+      applyCommandValidatorOverride(
+        mergeWith(
+          mergeWith(DEFAULT_COMPOSER_CONFIG, config ?? {}),
+          {
+            location: {
+              enabled: this.channel.getConfig()?.shared_locations,
+            },
           },
-        },
-        mergeChannelConfigCustomizer,
+          mergeMessageComposerConfigCustomizer,
+        ),
+        config,
       ),
     );
 
@@ -360,6 +376,14 @@ export class MessageComposer extends WithSubscriptions {
     return this.state.getLatestValue().quotedMessage;
   }
 
+  get pollId() {
+    return this.state.getLatestValue().pollId;
+  }
+
+  get showReplyInChannel() {
+    return this.state.getLatestValue().showReplyInChannel;
+  }
+
   getCommandDisabledReason = (
     command: CommandResponse,
   ): CommandSuggestionDisabledReason | undefined => {
@@ -378,21 +402,46 @@ export class MessageComposer extends WithSubscriptions {
   isCommandDisabled = (command: CommandResponse) =>
     !!this.getCommandDisabledReason(command);
 
-  get pollId() {
-    return this.state.getLatestValue().pollId;
-  }
+  validateCommandSendability = (
+    command: CommandResponse,
+    text = this.textComposer.text,
+  ): CommandSendability => {
+    const currentMentionedUsers = this.textComposer.mentionedUsers;
+    const mentionedUsersInText = getMentionedUsersInText(text, currentMentionedUsers);
+
+    const validationContext = {
+      command,
+      commandArgsText: command.name
+        ? stripCommandFromText(text, command.name).trim()
+        : text.trim(),
+      composer: this,
+      mentionedUsersInText,
+      rawText: text,
+    };
 
-  get showReplyInChannel() {
-    return this.state.getLatestValue().showReplyInChannel;
+    const result = this.config.commands.sendValidator(validationContext);
+    if (result && !result.ready) {
+      return result;
+    }
+
+    return { command, ready: true };
+  };
+
+  get isCommandSendable() {
+    const currentCommand = this.textComposer.command;
+    return !currentCommand || this.validateCommandSendability(currentCommand).ready;
   }
 
   get hasSendableData() {
-    return !!(
-      (!this.attachmentManager.uploadsInProgressCount &&
-        (!this.textComposer.textIsEmpty ||
-          this.attachmentManager.successfulUploadsCount > 0)) ||
-      this.pollId ||
-      !!this.locationComposer.validLocation
+    return (
+      this.isCommandSendable &&
+      !!(
+        (!this.attachmentManager.uploadsInProgressCount &&
+          (!this.textComposer.textIsEmpty ||
+            this.attachmentManager.successfulUploadsCount > 0)) ||
+        this.pollId ||
+        !!this.locationComposer.validLocation
+      )
     );
   }
 
@@ -426,7 +475,9 @@ export class MessageComposer extends WithSubscriptions {
   }
 
   updateConfig(config: DeepPartial<MessageComposerConfig>) {
-    this.configState.partialNext(mergeWith(this.config, config));
+    this.configState.partialNext(
+      applyCommandValidatorOverride(mergeWith(this.config, config), config),
+    );
   }
 
   refreshId = () => {

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

@@ -1,7 +1,12 @@
 import { textIsEmpty } from '../../textComposer';
 import type { CommandResponse } from '../../../types';
 import { CommandSearchSource } from '../textComposer/commands';
-import { getRawCommandName, notifyCommandDisabled } from '../textComposer/commandUtils';
+import {
+  getCommandByName,
+  getRawCommandName,
+  notifyCommandDisabled,
+  notifyCommandNotReady,
+} from '../textComposer/commandUtils';
 import type {
   MessageComposerMiddlewareState,
   MessageCompositionMiddleware,
@@ -11,18 +16,6 @@ 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,
@@ -36,8 +29,10 @@ const getDisabledRawCommand = (
 
 export const createCompositionValidationMiddleware = (
   composer: MessageComposer,
+  commandSearchSource?: CommandSearchSource,
 ): MessageCompositionMiddleware => {
-  const commandSearchSource = new CommandSearchSource(composer.channel);
+  const effectiveCommandSearchSource =
+    commandSearchSource ?? new CommandSearchSource(composer.channel);
 
   return {
     id: 'stream-io/message-composer-middleware/data-validation',
@@ -52,7 +47,7 @@ export const createCompositionValidationMiddleware = (
 
         const disabledRawCommand = getDisabledRawCommand(
           composer,
-          commandSearchSource,
+          effectiveCommandSearchSource,
           inputText,
         );
         if (disabledRawCommand) {
@@ -60,6 +55,19 @@ export const createCompositionValidationMiddleware = (
           return await discard();
         }
 
+        const currentCommand =
+          composer.textComposer.command ??
+          getCommandByName(effectiveCommandSearchSource, getRawCommandName(inputText));
+        if (
+          currentCommand &&
+          notifyCommandNotReady({
+            composer,
+            sendability: composer.validateCommandSendability(currentCommand, inputText),
+          })
+        ) {
+          return await discard();
+        }
+
         const hasExceededMaxLength =
           typeof maxLengthOnSend === 'number' && inputText.length > maxLengthOnSend;
 

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

@@ -1,11 +1,114 @@
+import type { MiddlewareHandlerParams } from '../../../middleware';
+import type { DraftMessage, LocalMessage, UserResponse } from '../../../types';
+import type { MessageComposer } from '../../messageComposer';
+import { mentionEntityToUserResponse } from '../textComposer/mentionUtils';
+import type { MentionEntity } from '../textComposer/types';
 import type {
   MessageComposerMiddlewareState,
   MessageCompositionMiddleware,
   MessageDraftComposerMiddlewareValueState,
   MessageDraftCompositionMiddleware,
 } from './types';
-import type { MessageComposer } from '../../messageComposer';
-import type { MiddlewareHandlerParams } from '../../../middleware';
+
+type MentionPayloadBase = Pick<
+  LocalMessage,
+  'mentioned_channel' | 'mentioned_group_ids' | 'mentioned_here' | 'mentioned_roles'
+>;
+
+type MentionCompositionMetadata = Omit<
+  Required<MentionPayloadBase>,
+  'mentioned_channel' | 'mentioned_here'
+> & {
+  mentioned_channel: boolean;
+  mentioned_here: boolean;
+  mentioned_users: UserResponse[];
+};
+
+type BuildMentionCompositionMetadataParams = {
+  mentions: MentionEntity[];
+  text: string;
+};
+
+type DraftMentionPayload = Pick<
+  DraftMessage,
+  | 'mentioned_channel'
+  | 'mentioned_group_ids'
+  | 'mentioned_here'
+  | 'mentioned_roles'
+  | 'mentioned_users'
+>;
+
+const textIncludesMentionToken = (text: string, token: string) =>
+  text.includes(`@${token}`);
+const isDefined = <TValue>(value: TValue | undefined): value is TValue =>
+  value !== undefined;
+
+const getMentionEntityTextCandidates = (entity: MentionEntity) => {
+  if (entity.mentionType === 'channel') return ['channel'];
+  if (entity.mentionType === 'here') return ['here'];
+  if (entity.mentionType === 'user') return [entity.id, entity.name].filter(isDefined);
+  if (entity.mentionType === 'role') return [entity.name, entity.id].filter(isDefined);
+  if (entity.mentionType === 'user_group') {
+    return entity.name ? [entity.name, entity.id].filter(isDefined) : [];
+  }
+
+  return [];
+};
+
+const isMentionEntityPresentInText = (entity: MentionEntity, text: string) => {
+  const textCandidates = getMentionEntityTextCandidates(entity);
+  if (!textCandidates.length) return true;
+
+  return textCandidates.some((candidate) => textIncludesMentionToken(text, candidate));
+};
+
+const dedupeBy = <TItem, TKey extends string>(
+  items: TItem[],
+  getKey: (item: TItem) => TKey,
+) => {
+  const uniqueItems = new Map<TKey, TItem>();
+
+  items.forEach((item) => {
+    uniqueItems.set(getKey(item), item);
+  });
+
+  return [...uniqueItems.values()];
+};
+
+const buildMentionCompositionMetadata = ({
+  mentions,
+  text,
+}: BuildMentionCompositionMetadataParams): MentionCompositionMetadata => {
+  const presentMentions = dedupeBy(
+    mentions.filter((entity) => isMentionEntityPresentInText(entity, text)),
+    (entity) => `${entity.mentionType}:${entity.id}`,
+  );
+
+  return presentMentions.reduce<MentionCompositionMetadata>(
+    (acc, entity) => {
+      if (entity.mentionType === 'user') {
+        acc.mentioned_users.push(mentionEntityToUserResponse(entity));
+      } else if (entity.mentionType === 'channel') {
+        acc.mentioned_channel = true;
+      } else if (entity.mentionType === 'here') {
+        acc.mentioned_here = true;
+      } else if (entity.mentionType === 'role') {
+        acc.mentioned_roles.push(entity.id);
+      } else if (entity.mentionType === 'user_group') {
+        acc.mentioned_group_ids.push(entity.id);
+      }
+
+      return acc;
+    },
+    {
+      mentioned_channel: false,
+      mentioned_group_ids: [],
+      mentioned_here: false,
+      mentioned_roles: [],
+      mentioned_users: [],
+    },
+  );
+};
 
 export const createTextComposerCompositionMiddleware = (
   composer: MessageComposer,
@@ -18,30 +121,44 @@ export const createTextComposerCompositionMiddleware = (
       forward,
     }: MiddlewareHandlerParams<MessageComposerMiddlewareState>) => {
       if (!composer.textComposer) return forward();
-      const { mentionedUsers, text } = composer.textComposer;
-      // Instead of checking if a user is still mentioned every time the text changes,
-      // just filter out non-mentioned users before submit, which is cheaper
-      // and allows users to easily undo any accidental deletion
-      const mentioned_users = Array.from(
-        new Set(
-          mentionedUsers.filter(
-            ({ id, name }) => text.includes(`@${id}`) || text.includes(`@${name}`),
-          ),
-        ),
-      );
-
-      // prevent introducing text and mentioned_users array into the payload sent to the server
-      if (!text && mentioned_users.length === 0) return forward();
+      const { mentions, text } = composer.textComposer;
+      const {
+        mentioned_channel,
+        mentioned_group_ids,
+        mentioned_here,
+        mentioned_roles,
+        mentioned_users,
+      } = buildMentionCompositionMetadata({ mentions, text });
+
+      // prevent introducing text and mention metadata into the payload sent to the server
+      if (
+        !text &&
+        !mentioned_channel &&
+        !mentioned_here &&
+        mentioned_group_ids.length === 0 &&
+        mentioned_roles.length === 0 &&
+        mentioned_users.length === 0
+      ) {
+        return forward();
+      }
 
       return next({
         ...state,
         localMessage: {
           ...state.localMessage,
+          mentioned_channel,
+          mentioned_group_ids,
+          mentioned_here,
+          mentioned_roles,
           mentioned_users,
           text,
         },
         message: {
           ...state.message,
+          mentioned_channel,
+          mentioned_group_ids,
+          mentioned_here,
+          mentioned_roles,
           mentioned_users: mentioned_users.map((u) => u.id),
           text,
         },
@@ -62,31 +179,34 @@ export const createDraftTextComposerCompositionMiddleware = (
     }: MiddlewareHandlerParams<MessageDraftComposerMiddlewareValueState>) => {
       if (!composer.textComposer) return forward();
       const { maxLengthOnSend } = composer.config.text ?? {};
-      const { mentionedUsers, text: inputText } = composer.textComposer;
-      // Instead of checking if a user is still mentioned every time the text changes,
-      // just filter out non-mentioned users before submit, which is cheaper
-      // and allows users to easily undo any accidental deletion
-      const mentioned_users = mentionedUsers.length
-        ? Array.from(
-            new Set(
-              mentionedUsers.filter(
-                ({ id, name }) =>
-                  inputText.includes(`@${id}`) || inputText.includes(`@${name}`),
-              ),
-            ),
-          )
-        : undefined;
+      const { mentions, text: inputText } = composer.textComposer;
 
       const text =
         typeof maxLengthOnSend === 'number' && inputText.length > maxLengthOnSend
           ? inputText.slice(0, maxLengthOnSend)
           : inputText;
+      const {
+        mentioned_channel,
+        mentioned_group_ids,
+        mentioned_here,
+        mentioned_roles,
+        mentioned_users,
+      } = buildMentionCompositionMetadata({ mentions, text });
+      const draftMentionPayload: DraftMentionPayload = {
+        ...(mentioned_channel ? { mentioned_channel: true } : {}),
+        ...(mentioned_group_ids.length ? { mentioned_group_ids } : {}),
+        ...(mentioned_here ? { mentioned_here: true } : {}),
+        ...(mentioned_roles.length ? { mentioned_roles } : {}),
+        ...(mentioned_users.length
+          ? { mentioned_users: mentioned_users.map((u) => u.id) }
+          : {}),
+      };
 
       return next({
         ...state,
         draft: {
           ...state.draft,
-          mentioned_users: mentioned_users?.map((u) => u.id),
+          ...draftMentionPayload,
           text,
         },
       });

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

@@ -1,5 +1,7 @@
 import type { MessageComposer } from '../../messageComposer';
-import type { CommandResponse } from '../../../types';
+import type { CommandResponse, UserResponse } from '../../../types';
+import type { CommandSendability } from '../../configuration';
+import type { CommandSearchSource } from './commands';
 
 export function escapeCommandRegExp(text: string) {
   return text.replace(/[-[\]{}()*+?.,/\\^$|#]/g, '\\$&');
@@ -19,6 +21,43 @@ export const getCompleteCommandInString = (text: string) => {
 export const stripCommandFromText = (text: string, commandName: string) =>
   text.replace(new RegExp(`^${escapeCommandRegExp(`/${commandName}`)}\\s*`), '');
 
+export const stripMentionTokens = (
+  text: string,
+  mentionedUsersInText: UserResponse[],
+  trigger = '@',
+) =>
+  mentionedUsersInText.reduce((value, user) => {
+    let next = value.replace(`${trigger}${user.id}`, '');
+
+    if (user.name) {
+      next = next.replace(`${trigger}${user.name}`, '');
+    }
+
+    return next.trim();
+  }, text.trim());
+
+export const getMentionedUsersInText = (text: string, mentionedUsers: UserResponse[]) =>
+  Array.from(
+    new Set(
+      mentionedUsers.filter(
+        ({ id, name }) =>
+          text.includes(`@${id}`) || (!!name && text.includes(`@${name}`)),
+      ),
+    ),
+  );
+
+export 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);
+};
+
 export const notifyCommandDisabled = (
   composer: MessageComposer,
   command: CommandResponse,
@@ -46,3 +85,31 @@ export const notifyCommandDisabled = (
 
   return true;
 };
+
+export const notifyCommandNotReady = ({
+  composer,
+  sendability,
+}: {
+  composer: MessageComposer;
+  sendability: CommandSendability;
+}) => {
+  if (sendability.ready) return;
+
+  composer.client.notifications.addWarning({
+    message: 'Command not ready to be sent',
+    origin: {
+      emitter: 'MessageComposer',
+      context: { command: sendability.command, composer },
+    },
+    options: {
+      type: 'validation:command:not-ready',
+      metadata: {
+        command: sendability.command.name,
+        ...(sendability.reason ? { reason: sendability.reason } : {}),
+        ...(sendability.metadata ?? {}),
+      },
+    },
+  });
+
+  return true;
+};

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

@@ -6,7 +6,11 @@ import type { CommandResponse } from '../../../types';
 import { mergeWith } from '../../../utils/mergeWith';
 import type { MessageComposer } from '../../messageComposer';
 import type { CommandSuggestion, TextComposerMiddlewareOptions } from './types';
-import { getCompleteCommandInString, notifyCommandDisabled } from './commandUtils';
+import {
+  getCommandByName,
+  getCompleteCommandInString,
+  notifyCommandDisabled,
+} from './commandUtils';
 import { getTriggerCharWithToken, insertItemWithTrigger } from './textMiddlewareUtils';
 import type { TextComposerMiddlewareExecutorState } from './TextComposerMiddlewareExecutor';
 
@@ -124,7 +128,7 @@ export const createCommandsMiddleware = (
         const finalText = state.text.slice(0, state.selection.end);
         const commandName = getCompleteCommandInString(finalText);
         if (commandName) {
-          const command = searchSource?.query(commandName).items[0];
+          const command = getCommandByName(searchSource, commandName);
           const composer = options?.composer;
           if (command && !composer?.isCommandDisabled(command)) {
             return next({

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

@@ -0,0 +1,33 @@
+import type { UserResponse } from '../../../types';
+import type { MentionEntity, UserMentionEntity, UserSuggestion } from './types';
+
+export const isUserMentionEntity = (entity: MentionEntity): entity is UserMentionEntity =>
+  entity.mentionType === 'user';
+
+export const userResponseToMentionEntity = (user: UserResponse): UserMentionEntity => ({
+  ...user,
+  mentionType: 'user',
+});
+
+export const userResponsesToMentionEntities = (users: UserResponse[]) =>
+  users.map(userResponseToMentionEntity);
+
+export const mentionEntityToUserResponse = (entity: UserMentionEntity): UserResponse => {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const { mentionType, ...user } = entity;
+  return user;
+};
+
+export const userSuggestionToUserResponse = (
+  suggestion: UserSuggestion,
+): UserResponse => {
+  const { mentionType, tokenizedDisplayName, ...userResponse } = suggestion;
+  void mentionType;
+  void tokenizedDisplayName;
+  return userResponse;
+};
+
+export const userSuggestionToMentionEntity = (
+  suggestion: UserSuggestion,
+): UserMentionEntity =>
+  userResponseToMentionEntity(userSuggestionToUserResponse(suggestion));