snapshot of https://github.com/RocketChat/Rocket.Chat.git (develop, 2026-09-16; blobs > 131072B omitted)

apps/meteor/client/views/omnichannel/cannedResponses/components/CannedResponsesComposer/CannedResponsesComposer.spec.tsx

@@ -0,0 +1,93 @@
+import { useUserPreference } from '@rocket.chat/ui-contexts';
+import { render, screen } from '@testing-library/react';
+
+import CannedResponsesComposer from './CannedResponsesComposer';
+import { useEmojiPicker } from '../../../../../contexts/EmojiPickerContext';
+import { emoji } from '../../../../../lib/emoji';
+
+jest.mock('@rocket.chat/ui-contexts', () => ({
+	...jest.requireActual('@rocket.chat/ui-contexts'),
+	useUserPreference: jest.fn(),
+}));
+
+jest.mock('../../../../../contexts/EmojiPickerContext', () => ({
+	useEmojiPicker: jest.fn(),
+}));
+
+jest.mock('react-i18next', () => ({
+	useTranslation: () => ({
+		t: (key: string) => key,
+	}),
+}));
+
+const mockedUseUserPreference = useUserPreference as jest.Mock;
+const mockedUseEmojiPicker = useEmojiPicker as jest.Mock;
+
+describe('CannedResponsesComposer emoji insertion', () => {
+	const originalEmojiList = emoji.list;
+
+	beforeAll(() => {
+		mockedUseUserPreference.mockReturnValue(true);
+
+		emoji.list = {
+			':grinning_face_with_big_eyes:': {
+				category: 'people',
+				emojiPackage: 'native',
+				shortnames: [],
+				uc_base: '1f603',
+				uc_greedy: '1f603',
+				uc_match: '1f603',
+				uc_output: '1f603',
+				unicode: '😃',
+			},
+			':my_custom_emoji:': {
+				category: 'custom',
+				emojiPackage: 'emojiCustom',
+				shortnames: [],
+				uc_base: '',
+				uc_greedy: '',
+				uc_match: '',
+				uc_output: '',
+			},
+		};
+	});
+
+	afterAll(() => {
+		emoji.list = originalEmojiList;
+	});
+
+	afterEach(() => {
+		jest.clearAllMocks();
+	});
+
+	const renderWithPickedEmoji = (pickedEmojiName: string) => {
+		mockedUseEmojiPicker.mockReturnValue({
+			open: (_ref: Element, callback: (emojiName: string) => void) => callback(pickedEmojiName),
+			isOpen: false,
+			close: jest.fn(),
+		});
+
+		const onChange = jest.fn();
+		render(<CannedResponsesComposer onChange={onChange} />);
+
+		return { onChange };
+	};
+
+	it('inserts the unicode character when the picked emoji has a native unicode value', async () => {
+		const { onChange } = renderWithPickedEmoji('grinning_face_with_big_eyes');
+
+		const emojiButton = await screen.findByRole('button', { name: 'Emoji' });
+		emojiButton.click();
+
+		expect(onChange).toHaveBeenLastCalledWith('😃 ');
+	});
+
+	it('falls back to the raw shortcode text when the picked emoji has no unicode value (custom emoji)', async () => {
+		const { onChange } = renderWithPickedEmoji('my_custom_emoji');
+
+		const emojiButton = await screen.findByRole('button', { name: 'Emoji' });
+		emojiButton.click();
+
+		expect(onChange).toHaveBeenLastCalledWith(':my_custom_emoji: ');
+	});
+});

apps/meteor/client/views/omnichannel/cannedResponses/components/CannedResponsesComposer/CannedResponsesComposer.stories.tsx

@@ -0,0 +1,11 @@
+import type { StoryObj, Meta } from '@storybook/react';
+
+import CannedResponsesComposer from './CannedResponsesComposer';
+
+export default {
+	component: CannedResponsesComposer,
+} satisfies Meta<typeof CannedResponsesComposer>;
+
+export const Default: StoryObj<typeof CannedResponsesComposer> = {
+	name: 'CannedResponsesComposer',
+};

apps/meteor/client/views/omnichannel/cannedResponses/components/CannedResponsesComposer/CannedResponsesComposer.tsx

@@ -0,0 +1,136 @@
+import { Button, PositionAnimated, Tile } from '@rocket.chat/fuselage';
+import {
+	MessageComposerAction,
+	MessageComposerToolbarActions,
+	MessageComposer,
+	MessageComposerInput,
+	MessageComposerToolbar,
+	MessageComposerActionsDivider,
+} from '@rocket.chat/ui-composer';
+import { useUserPreference } from '@rocket.chat/ui-contexts';
+import type { ComponentProps, ChangeEvent } from 'react';
+import { memo, useCallback, useRef, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import InsertPlaceholderDropdown from './InsertPlaceholderDropdown';
+import { Backdrop } from '../../../../../components/Backdrop';
+import { useEmojiPicker } from '../../../../../contexts/EmojiPickerContext';
+import { emoji } from '../../../../../lib/emoji';
+
+export type CannedResponsesComposerProps = Omit<ComponentProps<typeof MessageComposerInput>, 'onChange'> & {
+	onChange: (value: string) => void;
+};
+
+const CannedResponsesComposer = ({ onChange, ...props }: CannedResponsesComposerProps) => {
+	const { t } = useTranslation();
+	const useEmojisPreference = useUserPreference('useEmojis');
+
+	const textAreaRef = useRef<HTMLTextAreaElement>(null);
+	const ref = useRef<HTMLButtonElement>(null);
+
+	const [visible, setVisible] = useState(false);
+
+	const { open: openEmojiPicker } = useEmojiPicker();
+
+	const useMarkdownSyntax = (char: '*' | '_' | '~' | '[]()'): (() => void) =>
+		useCallback(() => {
+			if (textAreaRef?.current) {
+				const text = textAreaRef.current.value;
+				const startPos = textAreaRef.current.selectionStart;
+				const endPos = textAreaRef.current.selectionEnd;
+
+				if (char === '[]()') {
+					if (startPos !== endPos) {
+						textAreaRef.current.value = `${text.slice(0, startPos)}[${text.slice(startPos, endPos)}]()${text.slice(endPos)}`;
+					}
+				} else {
+					textAreaRef.current.value = `${text.slice(0, startPos)}${char}${text.slice(startPos, endPos)}${char}${text.slice(endPos)}`;
+				}
+				textAreaRef.current.focus();
+
+				if (char === '[]()') {
+					if (startPos === endPos) {
+						textAreaRef.current.setSelectionRange(startPos, endPos);
+					} else {
+						textAreaRef.current.setSelectionRange(endPos + 3, endPos + 3);
+					}
+				} else {
+					textAreaRef.current.setSelectionRange(startPos + 1, endPos + 1);
+				}
+
+				onChange?.(textAreaRef.current.value);
+			}
+		}, [char]);
+
+	const onClickEmoji = (emojiName: string): void => {
+		if (textAreaRef?.current) {
+			const text = textAreaRef.current.value;
+			const startPos = textAreaRef.current.selectionStart;
+			const emojiEntry = emoji.list[`:${emojiName}:`];
+			const emojiValue = emojiEntry && 'unicode' in emojiEntry && emojiEntry.unicode ? `${emojiEntry.unicode} ` : `:${emojiName}: `;
+
+			textAreaRef.current.value = text.slice(0, startPos) + emojiValue + text.slice(startPos);
+
+			textAreaRef.current.focus();
+			textAreaRef.current.setSelectionRange(startPos + emojiValue.length, startPos + emojiValue.length);
+
+			onChange?.(textAreaRef.current.value);
+		}
+	};
+
+	const handleOpenEmojiPicker = (): void => {
+		if (!useEmojisPreference) {
+			return;
+		}
+
+		if (!textAreaRef?.current) {
+			throw new Error('Missing textAreaRef');
+		}
+
+		openEmojiPicker(textAreaRef.current, (emojiName: string) => onClickEmoji(emojiName));
+	};
+
+	const openPlaceholderSelect = (): void => {
+		textAreaRef?.current && textAreaRef.current.focus();
+		setVisible(!visible);
+	};
+
+	return (
+		<MessageComposer>
+			<MessageComposerInput
+				ref={textAreaRef}
+				rows={10}
+				onChange={(e: ChangeEvent<HTMLTextAreaElement>): void => onChange(e.target.value)}
+				{...props}
+			/>
+			<MessageComposerToolbar>
+				<MessageComposerToolbarActions aria-label={t('Message_composer_toolbox_primary_actions')}>
+					<MessageComposerAction icon='emoji' disabled={!useEmojisPreference} onClick={handleOpenEmojiPicker} title={t('Emoji')} />
+					<MessageComposerActionsDivider />
+					<MessageComposerAction icon='bold' onClick={useMarkdownSyntax('*')} title={t('Bold')} />
+					<MessageComposerAction icon='italic' onClick={useMarkdownSyntax('_')} title={t('Italic')} />
+					<MessageComposerAction icon='strike' onClick={useMarkdownSyntax('~')} title={t('Strikethrough')} />
+					<MessageComposerAction icon='link' onClick={useMarkdownSyntax('[]()')} title={t('Link')} />
+					<MessageComposerActionsDivider />
+					<Button ref={ref} small onClick={openPlaceholderSelect}>
+						{t('Insert_Placeholder')}
+					</Button>
+					<Backdrop
+						display={visible ? 'block' : 'none'}
+						onClick={(): void => {
+							textAreaRef?.current && textAreaRef.current.focus();
+							setVisible(false);
+						}}
+					/>
+					<PositionAnimated visible={visible ? 'visible' : 'hidden'} anchor={ref}>
+						<Tile elevation='1' width='224px'>
+							<InsertPlaceholderDropdown onChange={onChange} textAreaRef={textAreaRef} setVisible={setVisible} />
+						</Tile>
+					</PositionAnimated>
+				</MessageComposerToolbarActions>
+			</MessageComposerToolbar>
+		</MessageComposer>
+	);
+};
+
+export default memo(CannedResponsesComposer);

apps/meteor/client/views/omnichannel/cannedResponses/components/CannedResponsesComposer/CannedResponsesComposerPreview.tsx

@@ -0,0 +1,26 @@
+import { Box } from '@rocket.chat/fuselage';
+import { memo } from 'react';
+
+import MarkdownText from '../../../../../components/MarkdownText';
+
+export type CannedResponsesComposerPreviewProps = { text: string };
+
+const CannedResponsesComposerPreview = ({ text }: CannedResponsesComposerPreviewProps) => {
+	const textM = text.split(/\n/).join('  \n');
+
+	return (
+		<Box
+			style={{ wordBreak: 'normal' }}
+			display='flex'
+			flexDirection='column'
+			paddingBlock={0}
+			paddingInline={12}
+			rcx-box--animated
+			rcx-input-box__wrapper
+		>
+			<MarkdownText width='full' flexGrow={1} content={textM} parseEmoji={true} />
+		</Box>
+	);
+};
+
+export default memo(CannedResponsesComposerPreview);

apps/meteor/client/views/omnichannel/cannedResponses/components/CannedResponsesComposer/InsertPlaceholderDropdown.tsx

@@ -0,0 +1,78 @@
+import { css } from '@rocket.chat/css-in-js';
+import { Box, Divider } from '@rocket.chat/fuselage';
+import type { Dispatch, RefObject, SetStateAction } from 'react';
+import { memo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+export type InsertPlaceholderDropdownProps = {
+	onChange: (value: string) => void;
+	textAreaRef: RefObject<HTMLTextAreaElement | null>;
+	setVisible: Dispatch<SetStateAction<boolean>>;
+};
+
+const InsertPlaceholderDropdown = ({ onChange, textAreaRef, setVisible }: InsertPlaceholderDropdownProps) => {
+	const { t } = useTranslation();
+
+	const clickable = css`
+		cursor: pointer;
+	`;
+
+	const setPlaceholder = (name: string): void => {
+		if (textAreaRef?.current) {
+			const text = textAreaRef.current.value;
+			const startPos = textAreaRef.current.selectionStart;
+			const placeholder = `{{${name}}}`;
+
+			textAreaRef.current.value = text.slice(0, startPos) + placeholder + text.slice(startPos);
+
+			textAreaRef.current.focus();
+			textAreaRef.current.setSelectionRange(startPos + placeholder.length, startPos + placeholder.length);
+
+			setVisible(false);
+			onChange(textAreaRef.current.value);
+		}
+	};
+
+	return (
+		<Box>
+			<Box textTransform='uppercase' fontScale='c1' fontSize='10px'>
+				{t('Contact')}
+			</Box>
+			<Box is='ul'>
+				<Box className={clickable} is='li' onClick={(): void => setPlaceholder('contact.name')}>
+					<Box marginBlock='4px' style={{ width: '100%' }} fontScale='p2'>
+						{t('Name')}
+					</Box>
+				</Box>
+				<Box className={clickable} is='li' onClick={(): void => setPlaceholder('contact.email')}>
+					<Box marginBlock='4px' style={{ width: '100%' }} fontScale='p2'>
+						{t('Email')}
+					</Box>
+				</Box>
+				<Box className={clickable} is='li' onClick={(): void => setPlaceholder('contact.phone')}>
+					<Box marginBlock='4px' style={{ width: '100%' }} fontScale='p2'>
+						{t('Phone')}
+					</Box>
+				</Box>
+			</Box>
+			<Divider />
+			<Box textTransform='uppercase' fontScale='c1' fontSize='10px'>
+				{t('Agent')}
+			</Box>
+			<Box is='ul'>
+				<Box className={clickable} is='li' onClick={(): void => setPlaceholder('agent.name')}>
+					<Box marginBlock='4px' style={{ width: '100%' }} fontScale='p2'>
+						{t('Name')}
+					</Box>
+				</Box>
+				<Box className={clickable} is='li' onClick={(): void => setPlaceholder('agent.email')}>
+					<Box marginBlock='4px' style={{ width: '100%' }} fontScale='p2'>
+						{t('Email')}
+					</Box>
+				</Box>
+			</Box>
+		</Box>
+	);
+};
+
+export default memo(InsertPlaceholderDropdown);