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

apps/meteor/client/views/omnichannel/triggers/actions/ActionExternalServiceUrl.tsx

@@ -0,0 +1,98 @@
+import { Box, Button, Field, FieldError, FieldHint, FieldLabel, FieldRow, Icon, TextInput } from '@rocket.chat/fuselage';
+import { useSafely } from '@rocket.chat/fuselage-hooks';
+import type { TranslationKey } from '@rocket.chat/ui-contexts';
+import { useEndpoint } from '@rocket.chat/ui-contexts';
+import { useMutation } from '@tanstack/react-query';
+import type { ComponentProps } from 'react';
+import { useId, useState } from 'react';
+import type { Control, UseFormTrigger } from 'react-hook-form';
+import { Controller, useWatch } from 'react-hook-form';
+import { useTranslation } from 'react-i18next';
+
+import type { TriggersPayload } from '../EditTrigger';
+import { useFieldError } from '../hooks';
+
+type ActionExternaServicelUrlType = ComponentProps<typeof Field> & {
+	index: number;
+	control: Control<TriggersPayload>;
+	trigger: UseFormTrigger<TriggersPayload>;
+	disabled?: boolean;
+};
+
+export const ActionExternalServiceUrl = ({ control, trigger, index, disabled, ...props }: ActionExternaServicelUrlType) => {
+	const { t } = useTranslation();
+
+	const serviceUrlFieldId = useId();
+	const serviceUrlFieldName = `actions.${index}.params.serviceUrl` as const;
+	const serviceTimeoutFieldName = `actions.${index}.params.serviceTimeout` as const;
+
+	const serviceTimeoutValue = useWatch({ control, name: serviceTimeoutFieldName });
+	const [serviceUrlError] = useFieldError({ control, name: serviceUrlFieldName });
+	const [isSuccessMessageVisible, setSuccessMessageVisible] = useSafely(useState(false));
+	const webhookTestEndpoint = useEndpoint('POST', '/v1/livechat/triggers/external-service/test');
+
+	const showSuccessMesssage = () => {
+		setSuccessMessageVisible(true);
+		setTimeout(() => setSuccessMessageVisible(false), 3000);
+	};
+
+	const webhookTest = useMutation({
+		mutationFn: webhookTestEndpoint,
+		onSuccess: showSuccessMesssage,
+	});
+
+	const testExternalService = async (serviceUrl: string) => {
+		if (!serviceUrl) {
+			return true;
+		}
+
+		try {
+			await webhookTest.mutateAsync({
+				webhookUrl: serviceUrl,
+				timeout: serviceTimeoutValue || 10000,
+				fallbackMessage: '',
+				extraData: [],
+			});
+			return true;
+		} catch (e) {
+			return t((e as { error: TranslationKey }).error);
+		}
+	};
+
+	return (
+		<Field {...props}>
+			<FieldLabel required htmlFor={serviceUrlFieldId}>
+				{t('External_service_url')}
+			</FieldLabel>
+			<FieldRow>
+				<Controller
+					name={serviceUrlFieldName}
+					control={control}
+					defaultValue=''
+					rules={{
+						required: t('Required_field', { field: t('External_service_url') }),
+						validate: testExternalService,
+						deps: serviceTimeoutFieldName,
+					}}
+					render={({ field }) => {
+						return <TextInput {...field} disabled={webhookTest.isPending || disabled} error={serviceUrlError?.message} />;
+					}}
+				/>
+			</FieldRow>
+
+			{serviceUrlError && <FieldError>{serviceUrlError.message}</FieldError>}
+
+			<FieldHint>{t('External_service_test_hint')}</FieldHint>
+
+			<Button loading={webhookTest.isPending} disabled={disabled || isSuccessMessageVisible} onClick={() => trigger(serviceUrlFieldName)}>
+				{isSuccessMessageVisible ? (
+					<Box is='span' color='status-font-on-success'>
+						<Icon name='success-circle' size='x20' verticalAlign='middle' /> {t('Success')}!
+					</Box>
+				) : (
+					t('Send_Test')
+				)}
+			</Button>
+		</Field>
+	);
+};

apps/meteor/client/views/omnichannel/triggers/actions/ActionForm.tsx

@@ -0,0 +1,112 @@
+import {
+	Box,
+	Field,
+	FieldGroup,
+	FieldHint,
+	FieldLabel,
+	FieldRow,
+	Option,
+	SelectLegacy,
+	Tag,
+	type SelectOption,
+} from '@rocket.chat/fuselage';
+import type { TranslationKey } from '@rocket.chat/ui-contexts';
+import type { ComponentProps } from 'react';
+import { useCallback, useId, useMemo } from 'react';
+import type { Control, UseFormTrigger } from 'react-hook-form';
+import { Controller, useWatch } from 'react-hook-form';
+import { useTranslation } from 'react-i18next';
+
+import { useHasLicenseModule } from '../../../../hooks/useHasLicenseModule';
+import type { TriggersPayload } from '../EditTrigger';
+import { getActionFormFields } from '../utils';
+
+type SendMessageFormType = ComponentProps<typeof Field> & {
+	control: Control<TriggersPayload>;
+	trigger: UseFormTrigger<TriggersPayload>;
+	index: number;
+};
+
+const ACTION_HINTS: Record<string, TranslationKey> = {
+	'use-external-service': 'External_service_action_hint',
+} as const;
+
+const PREMIUM_ACTIONS = ['use-external-service'];
+
+export const ActionForm = ({ control, trigger, index, ...props }: SendMessageFormType) => {
+	const { t } = useTranslation();
+
+	const actionFieldId = useId();
+	const actionFieldName = `actions.${index}.name` as const;
+	const actionFieldValue = useWatch({ control, name: actionFieldName });
+
+	const { data: hasLicense = false } = useHasLicenseModule('livechat-enterprise');
+
+	const actionOptions = useMemo<SelectOption[]>(() => {
+		return [
+			['send-message', t('Send_a_message')],
+			['use-external-service', t('Send_a_message_external_service')],
+		];
+	}, [t]);
+
+	const ActionFormFields = getActionFormFields(actionFieldValue);
+	const actionHint = useMemo(() => ACTION_HINTS[actionFieldValue] || '', [actionFieldValue]);
+	const isOptionDisabled = useCallback((value: string) => !hasLicense && PREMIUM_ACTIONS.includes(value), [hasLicense]);
+
+	const renderOption = useCallback(
+		(label: TranslationKey, value: string) => {
+			return (
+				<>
+					{isOptionDisabled(value) ? (
+						<Box justifyContent='space-between' flexDirection='row' display='flex' width='100%'>
+							{t(label)}
+							<Tag variant='featured'>{t('Premium')}</Tag>
+						</Box>
+					) : (
+						t(label)
+					)}
+				</>
+			);
+		},
+		[isOptionDisabled, t],
+	);
+
+	return (
+		<FieldGroup {...props}>
+			<Field>
+				<FieldLabel htmlFor={actionFieldId}>{t('Action')}</FieldLabel>
+				<FieldRow>
+					<Controller
+						name={actionFieldName}
+						control={control}
+						render={({ field: { onChange, value, name, ref } }) => {
+							return (
+								// TODO: Remove SelectLegacy once we have a new Select component
+								<SelectLegacy
+									ref={ref}
+									name={name}
+									onChange={onChange}
+									value={value}
+									id={actionFieldId}
+									options={actionOptions}
+									renderSelected={({ label, value }) => <Box flexGrow='1'>{renderOption(label, value)}</Box>}
+									renderItem={({ label, value, onMouseDown, ...props }) => (
+										<Option
+											{...props}
+											onMouseDown={isOptionDisabled(value) ? (e) => e.preventDefault() : onMouseDown}
+											disabled={isOptionDisabled(value)}
+											label={renderOption(label, value)}
+										/>
+									)}
+								/>
+							);
+						}}
+					/>
+				</FieldRow>
+				{actionHint && <FieldHint>{t(actionHint)}</FieldHint>}
+			</Field>
+
+			<ActionFormFields control={control} trigger={trigger} index={index} />
+		</FieldGroup>
+	);
+};

apps/meteor/client/views/omnichannel/triggers/actions/ActionSender.tsx

@@ -0,0 +1,59 @@
+import { FieldRow, Select, TextInput, type SelectOption, Field, FieldLabel } from '@rocket.chat/fuselage';
+import type { ComponentProps } from 'react';
+import { useId, useMemo } from 'react';
+import type { Control } from 'react-hook-form';
+import { Controller, useWatch } from 'react-hook-form';
+import { useTranslation } from 'react-i18next';
+
+import type { TriggersPayload } from '../EditTrigger';
+
+type ActionSenderType = ComponentProps<typeof Field> & {
+	control: Control<TriggersPayload>;
+	index: number;
+	disabled?: boolean;
+};
+
+export const ActionSender = ({ control, index, disabled, ...props }: ActionSenderType) => {
+	const { t } = useTranslation();
+
+	const senderFieldId = useId();
+	const senderFieldName = `actions.${index}.params.sender` as const;
+	const senderNameFieldName = `actions.${index}.params.name` as const;
+	const senderNameFieldValue = useWatch({ control, name: senderFieldName });
+
+	const senderOptions: SelectOption[] = useMemo(
+		() => [
+			['queue', t('Impersonate_next_agent_from_queue')],
+			['custom', t('Custom_agent')],
+		],
+		[t],
+	);
+
+	return (
+		<Field {...props}>
+			<FieldLabel htmlFor={senderFieldId}>{t('Sender')}</FieldLabel>
+			<FieldRow>
+				<Controller
+					control={control}
+					name={senderFieldName}
+					defaultValue='queue'
+					render={({ field }) => {
+						return <Select {...field} id={senderFieldId} options={senderOptions} placeholder={t('Select_an_option')} disabled={disabled} />;
+					}}
+				/>
+			</FieldRow>
+
+			{senderNameFieldValue === 'custom' && (
+				<FieldRow>
+					<Controller
+						control={control}
+						name={senderNameFieldName}
+						render={({ field }) => {
+							return <TextInput {...field} placeholder={t('Name_of_agent')} aria-label={t('Name_of_agent')} disabled={disabled} />;
+						}}
+					/>
+				</FieldRow>
+			)}
+		</Field>
+	);
+};

apps/meteor/client/views/omnichannel/triggers/actions/ExternalServiceActionForm.tsx

@@ -0,0 +1,108 @@
+import { FieldError, Field, FieldHint, FieldLabel, FieldRow, NumberInput, TextAreaInput, FieldGroup } from '@rocket.chat/fuselage';
+import { useId, type ComponentProps, type FocusEvent } from 'react';
+import type { Control, UseFormTrigger } from 'react-hook-form';
+import { Controller } from 'react-hook-form';
+import { useTranslation } from 'react-i18next';
+
+import { useHasLicenseModule } from '../../../../hooks/useHasLicenseModule';
+import type { TriggersPayload } from '../EditTrigger';
+import { useFieldError } from '../hooks';
+import { ActionExternalServiceUrl } from './ActionExternalServiceUrl';
+import { ActionSender } from './ActionSender';
+
+type SendMessageActionFormType = ComponentProps<typeof Field> & {
+	index: number;
+	control: Control<TriggersPayload>;
+	trigger: UseFormTrigger<TriggersPayload>;
+};
+
+export const ExternalServiceActionForm = ({ control, trigger, index, ...props }: SendMessageActionFormType) => {
+	const { t } = useTranslation();
+
+	const { data: hasLicense = false } = useHasLicenseModule('livechat-enterprise');
+
+	const timeoutFieldId = useId();
+	const timeoutFieldName = `actions.${index}.params.serviceTimeout` as const;
+	const fallbackMessageFieldId = useId();
+	const fallbackMessageFieldName = `actions.${index}.params.serviceFallbackMessage` as const;
+
+	const [timeoutError, fallbackMessageError] = useFieldError({ control, name: [timeoutFieldName, fallbackMessageFieldName] });
+
+	return (
+		<FieldGroup {...props}>
+			<ActionSender disabled={!hasLicense} control={control} index={index} />
+
+			<ActionExternalServiceUrl disabled={!hasLicense} control={control} trigger={trigger} index={index} />
+
+			<Field>
+				<FieldLabel required htmlFor={timeoutFieldId}>
+					{t('Timeout_in_miliseconds')}
+				</FieldLabel>
+				<FieldRow>
+					<Controller
+						control={control}
+						name={timeoutFieldName}
+						defaultValue={10000}
+						rules={{
+							required: t('Required_field', { field: t('Timeout_in_miliseconds') }),
+							min: { value: 0, message: t('Timeout_in_miliseconds_cant_be_negative_number') },
+						}}
+						render={({ field }) => {
+							return (
+								<NumberInput
+									{...field}
+									error={timeoutError?.message}
+									aria-invalid={Boolean(timeoutError)}
+									aria-describedby={`${timeoutFieldId}-hint`}
+									aria-required={true}
+									onFocus={(v: FocusEvent<HTMLInputElement>) => v.currentTarget.select()}
+									disabled={!hasLicense}
+								/>
+							);
+						}}
+					/>
+				</FieldRow>
+
+				{timeoutError && (
+					<FieldError aria-live='assertive' id={`${timeoutFieldId}-error`}>
+						{timeoutError.message}
+					</FieldError>
+				)}
+
+				<FieldHint id={`${timeoutFieldId}-hint`}>{t('Timeout_in_miliseconds_hint')}</FieldHint>
+			</Field>
+
+			<Field>
+				<FieldLabel htmlFor={fallbackMessageFieldId}>{t('Fallback_message')}</FieldLabel>
+				<FieldRow>
+					<Controller
+						control={control}
+						name={fallbackMessageFieldName}
+						defaultValue=''
+						render={({ field }) => (
+							<TextAreaInput
+								{...field}
+								id={fallbackMessageFieldId}
+								rows={3}
+								placeholder={t('Fallback_message')}
+								error={fallbackMessageError?.message}
+								aria-invalid={Boolean(fallbackMessageError)}
+								aria-describedby={`${fallbackMessageFieldId}-hint`}
+								aria-required={true}
+								disabled={!hasLicense}
+							/>
+						)}
+					/>
+				</FieldRow>
+
+				{fallbackMessageError && (
+					<FieldError aria-live='assertive' id={`${fallbackMessageFieldId}-error`}>
+						{fallbackMessageError.message}
+					</FieldError>
+				)}
+
+				<FieldHint id={`${fallbackMessageFieldId}-hint`}>{t('Service_fallback_message_hint')}</FieldHint>
+			</Field>
+		</FieldGroup>
+	);
+};

apps/meteor/client/views/omnichannel/triggers/actions/SendMessageActionForm.tsx

@@ -0,0 +1,58 @@
+import { Field, FieldError, FieldLabel, FieldRow, TextAreaInput } from '@rocket.chat/fuselage';
+import { useId, type ComponentProps } from 'react';
+import type { Control } from 'react-hook-form';
+import { Controller } from 'react-hook-form';
+import { useTranslation } from 'react-i18next';
+
+import type { TriggersPayload } from '../EditTrigger';
+import { useFieldError } from '../hooks';
+import { ActionSender } from './ActionSender';
+
+type SendMessageActionFormType = ComponentProps<typeof Field> & {
+	index: number;
+	control: Control<TriggersPayload>;
+};
+
+export const SendMessageActionForm = ({ control, index, ...props }: SendMessageActionFormType) => {
+	const { t } = useTranslation();
+	const messageFieldId = useId();
+	const name = `actions.${index}.params.msg` as const;
+	const [messageError] = useFieldError({ control, name });
+
+	return (
+		<>
+			<ActionSender {...props} control={control} index={index} />
+
+			<Field {...props}>
+				<FieldLabel required htmlFor={messageFieldId}>
+					{t('Message')}
+				</FieldLabel>
+				<FieldRow>
+					<Controller
+						control={control}
+						name={name}
+						defaultValue=''
+						rules={{ required: t('Required_field', { field: t('Message') }) }}
+						render={({ field }) => (
+							<TextAreaInput
+								error={messageError?.message}
+								aria-invalid={Boolean(messageError)}
+								aria-describedby={`${messageFieldId}-error`}
+								aria-required={true}
+								{...field}
+								rows={3}
+								placeholder={`${t('Message')}*`}
+							/>
+						)}
+					/>
+				</FieldRow>
+
+				{messageError && (
+					<FieldError aria-live='assertive' id={`${messageFieldId}-error`}>
+						{messageError.message}
+					</FieldError>
+				)}
+			</Field>
+		</>
+	);
+};