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

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

@@ -0,0 +1,202 @@
+import { css } from '@rocket.chat/css-in-js';
+import { Box, Field, FieldLabel, FieldRow, FieldError, TextInput, FieldGroup, RadioButton, FieldHint, Option } from '@rocket.chat/fuselage';
+import { usePermission } from '@rocket.chat/ui-contexts';
+import { useId, useState } from 'react';
+import { useFormContext, Controller } from 'react-hook-form';
+import { useTranslation } from 'react-i18next';
+
+import CannedResponsesComposer from './CannedResponsesComposer/CannedResponsesComposer';
+import CannedResponsesComposerPreview from './CannedResponsesComposer/CannedResponsesComposerPreview';
+import AutoCompleteDepartment from '../../components/AutoCompleteDepartment';
+import Tags from '../../components/Tags';
+import type { CannedResponseEditFormData } from '../modals/CannedResponseEdit';
+
+// TODO: refactor Tags field to get proper validation
+const CannedResponseForm = () => {
+	const { t } = useTranslation();
+	const hasManagerPermission = usePermission('view-all-canned-responses');
+	const hasMonitorPermission = usePermission('save-department-canned-responses');
+
+	const {
+		control,
+		formState: { errors },
+		watch,
+	} = useFormContext<CannedResponseEditFormData>();
+
+	const clickable = css`
+		cursor: pointer;
+	`;
+
+	const { text, scope } = watch();
+	const [preview, setPreview] = useState(false);
+
+	const shortcutField = useId();
+	const messageField = useId();
+	const publicRadioField = useId();
+	const departmentRadioField = useId();
+	const privateRadioField = useId();
+	const departmentField = useId();
+
+	return (
+		<FieldGroup>
+			<Field>
+				<FieldLabel htmlFor={shortcutField}>{t('Shortcut')}</FieldLabel>
+				<Controller
+					name='shortcut'
+					control={control}
+					rules={{ required: t('Required_field', { field: t('Shortcut') }) }}
+					render={({ field }) => (
+						<TextInput
+							{...field}
+							id={shortcutField}
+							placeholder={`!${t('shortcut_name')}`}
+							aria-required={true}
+							aria-invalid={Boolean(errors?.shortcut)}
+							aria-describedby={`${shortcutField}-error`}
+						/>
+					)}
+				/>
+				{errors?.shortcut && (
+					<FieldError aria-live='assertive' id={`${shortcutField}-error`}>
+						{errors.shortcut.message}
+					</FieldError>
+				)}
+			</Field>
+			<Field>
+				<FieldLabel htmlFor={messageField} width='full' display='flex' flexDirection='row' justifyContent='space-between'>
+					{t('Message')}
+					{text !== '' && (
+						<Box className={clickable} color='info' onClick={() => setPreview(!preview)}>
+							{preview ? t('Editor') : t('Preview')}
+						</Box>
+					)}
+				</FieldLabel>
+				{preview ? (
+					<CannedResponsesComposerPreview text={text} />
+				) : (
+					<Controller
+						name='text'
+						control={control}
+						rules={{ required: t('Required_field', { field: t('Message') }) }}
+						render={({ field: { value, onChange, name, onBlur } }) => (
+							<CannedResponsesComposer
+								id={messageField}
+								value={value}
+								onChange={onChange}
+								name={name}
+								onBlur={onBlur}
+								aria-describedby={`${messageField}-error`}
+								aria-required={true}
+								aria-invalid={Boolean(errors.text)}
+							/>
+						)}
+					/>
+				)}
+				{errors?.text && (
+					<FieldError aria-live='assertive' id={`${messageField}-error`}>
+						{errors.text.message}
+					</FieldError>
+				)}
+			</Field>
+			<Field>
+				<Controller name='tags' control={control} render={({ field: { value, onChange } }) => <Tags handler={onChange} tags={value} />} />
+			</Field>
+			{(hasManagerPermission || hasMonitorPermission) && (
+				<>
+					<Field>
+						<FieldRow>
+							<FieldLabel htmlFor={publicRadioField}>{t('Public')}</FieldLabel>
+							<Controller
+								name='scope'
+								control={control}
+								render={({ field: { onChange, value, ...field } }) => (
+									<RadioButton
+										{...field}
+										id={publicRadioField}
+										onChange={() => onChange('global')}
+										disabled={hasMonitorPermission && !hasManagerPermission}
+										checked={value === 'global'}
+										aria-describedby={`${publicRadioField}-hint`}
+									/>
+								)}
+							/>
+						</FieldRow>
+						<FieldHint id={`${publicRadioField}-hint`}>{t('Canned_Response_Sharing_Public_Description')}</FieldHint>
+					</Field>
+					<Field>
+						<FieldRow>
+							<FieldLabel htmlFor={departmentRadioField}>{t('Department')}</FieldLabel>
+							<Controller
+								name='scope'
+								control={control}
+								render={({ field: { onChange, value, ...field } }) => (
+									<RadioButton
+										{...field}
+										id={departmentRadioField}
+										onChange={() => onChange('department')}
+										checked={value === 'department'}
+										aria-describedby={`${departmentRadioField}-hint`}
+									/>
+								)}
+							/>
+						</FieldRow>
+						<FieldHint id={`${departmentRadioField}-hint`}>{t('Canned_Response_Sharing_Department_Description')}</FieldHint>
+					</Field>
+					<Field>
+						<FieldRow>
+							<FieldLabel htmlFor={privateRadioField}>{t('Private')}</FieldLabel>
+							<Controller
+								name='scope'
+								control={control}
+								render={({ field: { onChange, value, ...field } }) => (
+									<RadioButton
+										{...field}
+										id={privateRadioField}
+										onChange={() => onChange('user')}
+										checked={value === 'user'}
+										aria-describedby={`${privateRadioField}-hint`}
+									/>
+								)}
+							/>
+						</FieldRow>
+						<FieldHint id={`${privateRadioField}-hint`}>{t('Canned_Response_Sharing_Private_Description')}</FieldHint>
+					</Field>
+					{scope === 'department' && (
+						<Field>
+							<FieldLabel htmlFor={departmentField}>{t('Department')}</FieldLabel>
+							<FieldRow>
+								<Controller
+									name='departmentId'
+									control={control}
+									rules={{ required: t('Required_field', { field: t('Department') }) }}
+									render={({ field: { value, onChange } }) => (
+										<AutoCompleteDepartment
+											{...(hasMonitorPermission && { onlyMyDepartments: hasMonitorPermission })}
+											id={departmentField}
+											value={value}
+											onChange={onChange}
+											aria-describedby={`${departmentField}-error`}
+											aria-required={true}
+											aria-invalid={Boolean(errors?.departmentId)}
+											withTitle={false}
+											renderItem={({ label, ...props }) => (
+												<Option {...props} label={<span style={{ whiteSpace: 'normal' }}>{label}</span>} />
+											)}
+										/>
+									)}
+								/>
+							</FieldRow>
+							{errors?.departmentId && (
+								<FieldError aria-live='assertive' id={departmentField}>
+									{errors.departmentId.message}
+								</FieldError>
+							)}
+						</Field>
+					)}
+				</>
+			)}
+		</FieldGroup>
+	);
+};
+
+export default CannedResponseForm;

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