stream-chat 9.44.1 → 9.45.0

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));