refactor: extract composer autocomplete engine to ui-client

Author: ricardogarim

apps/meteor/client/components/EmojiAutocomplete/emojiPopupConfig.spec.tsx

@@ -0,0 +1,59 @@
+import { createEmojiPopupConfig } from './emojiPopupConfig';
+import { emoji } from '../../../app/emoji/client';
+
+const search = async (filter: string, recents: string[] = []) => {
+	const config = createEmojiPopupConfig({ t: ((key: string) => key) as never, recentEmojis: recents });
+	const items = (await config.getItemsFromLocal?.(filter)) ?? [];
+	return items.map(({ _id }) => _id);
+};
+
+beforeAll(() => {
+	emoji.packages.test = {
+		emojisByCategory: {},
+		toneList: {},
+		render: () => '',
+		renderPicker: () => undefined,
+	} as never;
+
+	const handles = [
+		':rocket:',
+		':smile:',
+		':smiley:',
+		':sweat_smile:',
+		':thumbsup:',
+		':thumbsup_tone1:',
+		':thumbsup_tone5:',
+		...Array.from({ length: 15 }, (_, i) => `:cat${i}:`),
+	];
+	for (const handle of handles) {
+		emoji.list[handle] = { emojiPackage: 'test' } as never;
+	}
+});
+
+describe('createEmojiPopupConfig search', () => {
+	it('matches substrings case-insensitively', async () => {
+		expect(await search('SMILE')).toEqual(expect.arrayContaining([':smile:', ':smiley:', ':sweat_smile:']));
+	});
+
+	it('ranks exact/prefix matches before substring matches', async () => {
+		const results = await search('smile');
+		expect(results[0]).toBe(':smile:');
+		expect(results.indexOf(':sweat_smile:')).toBeGreaterThan(0);
+	});
+
+	it('boosts recently used emojis', async () => {
+		expect((await search('smile', ['smiley']))[0]).toBe(':smiley:');
+	});
+
+	it('hides skin tone variants unless explicitly searched', async () => {
+		expect(await search('thumbsup')).toEqual([':thumbsup:']);
+	});
+
+	it('includes skin tone variants when the search asks for a tone', async () => {
+		expect(await search('thumbsup_tone')).toEqual(expect.arrayContaining([':thumbsup_tone1:', ':thumbsup_tone5:']));
+	});
+
+	it('limits the number of suggestions', async () => {
+		expect((await search('cat')).length).toBeLessThanOrEqual(10);
+	});
+});

apps/meteor/client/components/EmojiAutocomplete/emojiPopupConfig.tsx

@@ -0,0 +1,84 @@
+import { OptionColumn, OptionContent } from '@rocket.chat/fuselage';
+import { escapeRegExp } from '@rocket.chat/string-helpers';
+import { createAutocompletePopupConfig } from '@rocket.chat/ui-client';
+import type { TranslationKey } from '@rocket.chat/ui-contexts';
+
+import { emoji } from '../../../app/emoji/client';
+import Emoji from '../Emoji';
+
+export type AutocompletePopupEmojiProps = {
+	_id: string;
+};
+
+export function AutocompletePopupEmoji({ _id }: AutocompletePopupEmojiProps) {
+	return (
+		<>
+			<OptionColumn>
+				<Emoji emojiHandle={_id} />
+			</OptionColumn>
+			<OptionContent>{_id}</OptionContent>
+		</>
+	);
+}
+
+type CreateEmojiPopupConfigParams = {
+	t: (key: TranslationKey) => string;
+	recentEmojis: string[];
+};
+
+export const createEmojiPopupConfig = ({ t, recentEmojis }: CreateEmojiPopupConfigParams) =>
+	createAutocompletePopupConfig<AutocompletePopupEmojiProps>({
+		trigger: ':',
+		title: t('Emoji'),
+		triggerLength: 2,
+		getItemsFromLocal: async (filter: string) => {
+			const exactFinalTone = new RegExp('^tone[1-5]:*$');
+			const colorBlind = new RegExp('tone[1-5]:*$');
+			const seeColor = new RegExp('_t(?:o|$)(?:n|$)(?:e|$)(?:[1-5]|$)(?::|$)$');
+
+			const emojiSort = (recents: string[]) => (a: { _id: string }, b: { _id: string }) => {
+				const aExact = a._id === key ? 2 : 0;
+				const bExact = b._id === key ? 2 : 0;
+				const aPartial = a._id.startsWith(key) ? 1 : 0;
+				const bPartial = b._id.startsWith(key) ? 1 : 0;
+
+				let aScore = aExact + aPartial;
+				let bScore = bExact + bPartial;
+
+				if (recents.includes(a._id)) {
+					aScore += recents.indexOf(a._id) + 1;
+				}
+				if (recents.includes(b._id)) {
+					bScore += recents.indexOf(b._id) + 1;
+				}
+
+				if (aScore > bScore) {
+					return -1;
+				}
+				if (aScore < bScore) {
+					return 1;
+				}
+				return 0;
+			};
+			const filterRegex = new RegExp(escapeRegExp(filter), 'i');
+			const key = `:${filter}`;
+
+			const recents = recentEmojis.map((item) => `:${item}:`);
+
+			const collection = emoji.list;
+
+			return Object.keys(collection)
+				.map((_id) => ({ _id }))
+				.filter(
+					({ _id }) =>
+						filterRegex.test(_id) && (exactFinalTone.test(_id.substring(key.length)) || seeColor.test(key) || !colorBlind.test(_id)),
+				)
+				.sort(emojiSort(recents))
+				.slice(0, 10);
+		},
+		getItemsFromServer: async () => {
+			return [];
+		},
+		getValue: (item) => `${item._id.substring(1)}`,
+		renderItem: ({ item }) => <AutocompletePopupEmoji {...item} />,
+	});

apps/meteor/client/views/room/composer/ComposerBoxPopupEmoji.tsx

@@ -1,15 +1,15 @@
 import { Box, Skeleton, Tile, Option } from '@rocket.chat/fuselage';
 import { Random } from '@rocket.chat/random';
+import type { AutocompletePopupProps } from '@rocket.chat/ui-client';
 import { useEndpoint } from '@rocket.chat/ui-contexts';
 import type { ForwardedRef, ReactNode } from 'react';
 import { forwardRef, useEffect, useId, useImperativeHandle } from 'react';
 
-import type { ComposerBoxPopupProps } from './ComposerBoxPopup';
 import { useChat } from '../contexts/ChatContext';
 
 type ComposerBoxPopupPreviewItem = { _id: string; type: 'image' | 'video' | 'audio' | 'text' | 'other'; value: string; sort?: number };
 
-type ComposerBoxPopupPreviewProps = ComposerBoxPopupProps<ComposerBoxPopupPreviewItem> & {
+type ComposerBoxPopupPreviewProps = AutocompletePopupProps<ComposerBoxPopupPreviewItem> & {
 	title?: ReactNode;
 	rid: string;
 	tmid?: string;

apps/meteor/client/views/room/composer/ComposerBoxPopupPreview.tsx

@@ -0,0 +1,141 @@
+import { mockAppRoot } from '@rocket.chat/mock-providers';
+import { createAutocompletePopupConfig } from '@rocket.chat/ui-client';
+import { act, fireEvent, renderHook, waitFor } from '@testing-library/react';
+
+import { useComposerBoxPopup } from './useComposerBoxPopup';
+import type { ChatAPI } from '../../../../lib/chats/ChatAPI';
+import { ChatContext } from '../../contexts/ChatContext';
+
+const keys = { ENTER: 13, ESC: 27, ARROW_UP: 38, ARROW_DOWN: 40 };
+
+type Item = { _id: string; username?: string };
+
+const createComposer = (text: string, caret = text.length) => ({
+	substring: (start: number, end?: number) => text.substring(start, end),
+	selection: { start: caret, end: caret },
+	replaceText: jest.fn(),
+});
+
+const userOption = createAutocompletePopupConfig<Item>({
+	trigger: '@',
+	getItemsFromLocal: async () => [
+		{ _id: 'u1', username: 'alice' },
+		{ _id: 'u2', username: 'bob' },
+	],
+	getItemsFromServer: async () => [],
+	getValue: (item) => item.username ?? '',
+});
+
+const emojiOption = createAutocompletePopupConfig<Item>({
+	trigger: ':',
+	triggerLength: 2,
+	getItemsFromLocal: async (filter: string) => [{ _id: `:${filter}a:` }, { _id: `:${filter}b:` }],
+	getItemsFromServer: async () => [],
+	getValue: (item) => item._id.substring(1),
+});
+
+const commandOption = createAutocompletePopupConfig<Item>({
+	trigger: '/',
+	triggerAnywhere: false,
+	getItemsFromLocal: async () => [{ _id: 'archive' }],
+	getItemsFromServer: async () => [],
+	getValue: (item) => item._id,
+});
+
+const options = [userOption, emojiOption, commandOption];
+
+const setup = (text: string, caret = text.length) => {
+	const composer = createComposer(text, caret);
+	const node = document.createElement('textarea');
+
+	const { result } = renderHook(() => useComposerBoxPopup(options), {
+		wrapper: mockAppRoot()
+			.wrap((children) => <ChatContext.Provider value={{ composer } as unknown as ChatAPI}>{children}</ChatContext.Provider>)
+			.build(),
+	});
+	act(() => result.current.callbackRef(node));
+
+	const fire = (type: 'keyUp' | 'keyDown', which: number) => fireEvent[type](node, { which, keyCode: which });
+
+	return { result, composer, fire };
+};
+
+describe('useComposerBoxPopup (characterization)', () => {
+	it('opens no popup when the text has no trigger', () => {
+		const { result, fire } = setup('hello');
+		fire('keyUp', 0);
+		expect(result.current.option).toBeUndefined();
+	});
+
+	it('detects the `@` trigger and extracts the filter', () => {
+		const { result, fire } = setup('hi @al');
+		fire('keyUp', 0);
+		expect(result.current.option?.trigger).toBe('@');
+		expect(result.current.filter).toBe('al');
+	});
+
+	it('respects triggerLength: `:` alone does not open, `:ab` does', () => {
+		const closed = setup('x :');
+		closed.fire('keyUp', 0);
+		expect(closed.result.current.option).toBeUndefined();
+
+		const open = setup('x :ab');
+		open.fire('keyUp', 0);
+		expect(open.result.current.option?.trigger).toBe(':');
+		expect(open.result.current.filter).toBe('ab');
+	});
+
+	it('only triggers a start-only (`/`) option at the very start of the text', () => {
+		const mid = setup('hey /arch');
+		mid.fire('keyUp', 0);
+		expect(mid.result.current.option).toBeUndefined();
+
+		const start = setup('/arch');
+		start.fire('keyUp', 0);
+		expect(start.result.current.option?.trigger).toBe('/');
+		expect(start.result.current.filter).toBe('arch');
+	});
+
+	it('inserts prefix + value + suffix over the trigger range on select', async () => {
+		const { result, composer, fire } = setup('hi @al');
+		fire('keyUp', 0);
+		await waitFor(() => expect(result.current.focused).toBeDefined());
+
+		act(() => result.current.select?.({ _id: 'u1', username: 'alice' }));
+
+		expect(composer.replaceText).toHaveBeenCalledWith('@alice ', { start: 3, end: 6 });
+	});
+
+	it('moves focus with arrow keys and wraps around', async () => {
+		const { result, fire } = setup('hi @');
+		fire('keyUp', 0);
+		await waitFor(() => expect(result.current.focused?._id).toBe('u1'));
+
+		fire('keyDown', keys.ARROW_DOWN);
+		expect(result.current.focused?._id).toBe('u2');
+
+		fire('keyDown', keys.ARROW_DOWN);
+		expect(result.current.focused?._id).toBe('u1');
+
+		fire('keyDown', keys.ARROW_UP);
+		expect(result.current.focused?._id).toBe('u2');
+	});
+
+	it('selects the focused item on Enter', async () => {
+		const { result, composer, fire } = setup('hi @');
+		fire('keyUp', 0);
+		await waitFor(() => expect(result.current.focused?._id).toBe('u1'));
+
+		fire('keyDown', keys.ENTER);
+		expect(composer.replaceText).toHaveBeenCalledWith('@alice ', expect.objectContaining({ end: 4 }));
+	});
+
+	it('closes the popup on Escape', async () => {
+		const { result, fire } = setup('hi @al');
+		fire('keyUp', 0);
+		await waitFor(() => expect(result.current.option?.trigger).toBe('@'));
+
+		fire('keyUp', keys.ESC);
+		expect(result.current.option).toBeUndefined();
+	});
+});