chore: emoji popup trigger length

.changeset/soft-kings-admire.md

@@ -0,0 +1,5 @@
+---
+'@rocket.chat/meteor': minor
+---
+
+Added emoji popup trigger length of 3 characters.

apps/meteor/app/ui-message/client/popup/hooks/useComposerBoxPopup.ts

@@ -27,6 +27,7 @@ type ComposerBoxPopupResult<T extends { _id: string; sort?: number }> =
 			callbackRef: (node: HTMLElement) => void;
 			commandsRef: ComposerBoxPopupImperativeCommands<T>;
 			suspended: boolean;
+			filter: unknown;
 	  }
 	| {
 			popup: undefined;
@@ -37,6 +38,7 @@ type ComposerBoxPopupResult<T extends { _id: string; sort?: number }> =
 			select: undefined;
 			commandsRef: ComposerBoxPopupImperativeCommands<T>;
 			suspended: boolean;
+			filter: unknown;
 	  };
 
 const keys = {
@@ -110,7 +112,6 @@ export const useComposerBoxPopup = <T extends { _id: string; sort?: number }>({
 				end: chat?.composer?.selection.start,
 			});
 		}
-
 		setPopup(undefined);
 		setFocused(undefined);
 	});
@@ -124,13 +125,16 @@ export const useComposerBoxPopup = <T extends { _id: string; sort?: number }>({
 			return;
 		}
 
-		const configuration = configurations.find(({ trigger, matchSelectorRegex, triggerAnywhere }) => {
+		const configuration = configurations.find(({ trigger, matchSelectorRegex, triggerAnywhere, triggerLength }) => {
 			const selector =
 				matchSelectorRegex ?? (triggerAnywhere ? new RegExp(`(?:^| |\n)(${trigger})[^\\s]*$`) : new RegExp(`(?:^)(${trigger})[^\\s]*$`));
 			const result = selector.test(value);
-			return result;
+			if (!triggerLength || !result) {
+				return result;
+			}
+			const filter = value.match(selector);
+			return filter && triggerLength < filter[0].length;
 		});
-
 		setPopup(configuration);
 		if (!configuration) {
 			setFocused(undefined);
@@ -251,6 +255,7 @@ export const useComposerBoxPopup = <T extends { _id: string; sort?: number }>({
 			select: undefined,
 			suspended: true,
 			commandsRef,
+			filter: undefined,
 		};
 	}
 
@@ -260,6 +265,7 @@ export const useComposerBoxPopup = <T extends { _id: string; sort?: number }>({
 		ariaActiveDescendant,
 		popup,
 		select,
+		filter,
 		suspended,
 		commandsRef,
 		callbackRef,

apps/meteor/app/ui-message/client/popup/hooks/useComposerBoxPopupQueries.ts

@@ -4,6 +4,7 @@ import { useEffect, useState } from 'react';
 
 import type { ComposerPopupOption } from '../../../../../client/views/room/contexts/ComposerPopupContext';
 import { slashCommands } from '../../../../utils/client';
+import { useEnablePopupPreview } from './useEnablePopupPreview';
 
 export const useComposerBoxPopupQueries = <T extends { _id: string; sort?: number }>(filter: unknown, popup?: ComposerPopupOption<T>) => {
 	const [counter, setCounter] = useState(0);
@@ -12,11 +13,14 @@ export const useComposerBoxPopupQueries = <T extends { _id: string; sort?: numbe
 		setCounter(0);
 	}, [popup, filter]);
 
+	const shouldPopupPreview = useEnablePopupPreview(filter, popup);
+
 	const enableQuery =
 		!popup ||
 		(popup.preview &&
 			Boolean(slashCommands.commands[(filter as any)?.cmd]) &&
-			slashCommands.commands[(filter as any)?.cmd].providesPreview);
+			slashCommands.commands[(filter as any)?.cmd].providesPreview) ||
+		shouldPopupPreview;
 
 	return {
 		queries: useQueries({

apps/meteor/app/ui-message/client/popup/hooks/useEnablePopupPreview.ts

@@ -0,0 +1,4 @@
+import type { ComposerPopupOption } from '../../../../../client/views/room/contexts/ComposerPopupContext';
+
+export const useEnablePopupPreview = <T extends { _id: string; sort?: number }>(filter: unknown, popup?: ComposerPopupOption<T>) =>
+	popup && !popup.preview && popup?.triggerLength ? typeof filter === 'string' && popup.triggerLength - 1 < filter.length : true;

apps/meteor/client/views/room/components/body/composer/messageBox/MessageBox.tsx

@@ -23,6 +23,7 @@ import { formattingButtons } from '../../../../../../../app/ui-message/client/me
 import ComposerBoxPopup from '../../../../../../../app/ui-message/client/popup/ComposerBoxPopup';
 import ComposerBoxPopupPreview from '../../../../../../../app/ui-message/client/popup/components/composerBoxPopupPreview/ComposerBoxPopupPreview';
 import { useComposerBoxPopup } from '../../../../../../../app/ui-message/client/popup/hooks/useComposerBoxPopup';
+import { useEnablePopupPreview } from '../../../../../../../app/ui-message/client/popup/hooks/useEnablePopupPreview';
 import { getImageExtensionFromMime } from '../../../../../../../lib/getImageExtensionFromMime';
 import { useFormatDateAndTime } from '../../../../../../hooks/useFormatDateAndTime';
 import { useReactiveValue } from '../../../../../../hooks/useReactiveValue';
@@ -332,17 +333,20 @@ const MessageBox = ({
 		select,
 		commandsRef,
 		callbackRef: c,
+		filter,
 	} = useComposerBoxPopup<{ _id: string; sort?: number }>({
 		configurations: composerPopupConfig,
 	});
 
 	const mergedRefs = useMessageComposerMergedRefs(c, textareaRef, callbackRef, autofocusRef);
 
+	const shouldPopupPreview = useEnablePopupPreview(filter, popup);
+
 	return (
 		<>
 			{chat.composer?.quotedMessages && <MessageBoxReplies />}
 
-			{popup && !popup.preview && (
+			{shouldPopupPreview && popup && (
 				<ComposerBoxPopup select={select} items={items} focused={focused} title={popup.title} renderItem={popup.renderItem} />
 			)}
 			{/*

apps/meteor/client/views/room/contexts/ComposerPopupContext.ts

@@ -10,6 +10,7 @@ export type ComposerPopupOption<T extends { _id: string; sort?: number } = { _id
 
 	trigger?: string;
 	triggerAnywhere?: boolean;
+	triggerLength?: number;
 
 	suffix?: string;
 	prefix?: string;

apps/meteor/client/views/room/providers/ComposerPopupProvider.tsx

@@ -154,6 +154,7 @@ const ComposerPopupProvider = ({ children, room }: { children: ReactNode; room:
 				createMessageBoxPopupConfig<ComposerBoxPopupEmojiProps>({
 					trigger: ':',
 					title: t('Emoji'),
+					triggerLength: 2,
 					getItemsFromLocal: async (filter: string) => {
 						const exactFinalTone = new RegExp('^tone[1-5]:*$');
 						const colorBlind = new RegExp('tone[1-5]:*$');