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

apps/meteor/client/views/room/contextualBar/AutoTranslate/AutoTranslate.stories.tsx

@@ -0,0 +1,25 @@
+import { Contextualbar } from '@rocket.chat/ui-client';
+import type { StoryObj, Meta } from '@storybook/react';
+
+import AutoTranslate from './AutoTranslate';
+
+export default {
+	component: AutoTranslate,
+	parameters: {
+		layout: 'fullscreen',
+	},
+	decorators: [(fn) => <Contextualbar height='100vh'>{fn()}</Contextualbar>],
+} satisfies Meta<typeof AutoTranslate>;
+
+export const Default: StoryObj<typeof AutoTranslate> = {
+	name: 'AutoTranslate',
+
+	args: {
+		language: 'en',
+		languages: [
+			['en', 'English'],
+			['jp', 'Japanese'],
+			['pt', 'Portuguese'],
+		],
+	},
+};

apps/meteor/client/views/room/contextualBar/AutoTranslate/AutoTranslate.tsx

@@ -0,0 +1,72 @@
+import { Callout, FieldGroup, Field, FieldLabel, FieldRow, ToggleSwitch, Select } from '@rocket.chat/fuselage';
+import type { SelectOption } from '@rocket.chat/fuselage';
+import {
+	ContextualbarClose,
+	ContextualbarTitle,
+	ContextualbarHeader,
+	ContextualbarIcon,
+	ContextualbarContent,
+	ContextualbarDialog,
+} from '@rocket.chat/ui-client';
+import type { ChangeEvent } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { useRoom } from '../../contexts/RoomContext';
+
+export type AutoTranslateProps = {
+	language: string;
+	languages: SelectOption[];
+	handleSwitch: (e: ChangeEvent<HTMLInputElement>) => void;
+	translateEnable: boolean | undefined;
+	handleChangeLanguage: (value: string) => void;
+	handleClose?: () => void;
+};
+
+const AutoTranslate = ({ language, languages, handleSwitch, translateEnable, handleChangeLanguage, handleClose }: AutoTranslateProps) => {
+	const { t } = useTranslation();
+	const room = useRoom();
+
+	return (
+		<ContextualbarDialog>
+			<ContextualbarHeader>
+				<ContextualbarIcon name='language' />
+				<ContextualbarTitle>{t('Auto_Translate')}</ContextualbarTitle>
+				{handleClose && <ContextualbarClose onClick={handleClose} />}
+			</ContextualbarHeader>
+			<ContextualbarContent paddingBlockStart={24}>
+				<FieldGroup>
+					{room.encrypted && (
+						<Callout title={t('Automatic_translation_not_available')} type='warning'>
+							{t('Automatic_translation_not_available_info')}
+						</Callout>
+					)}
+					<Field>
+						<FieldRow>
+							<FieldLabel htmlFor='automatic-translation'>{t('Automatic_Translation')}</FieldLabel>
+							<ToggleSwitch
+								id='automatic-translation'
+								onChange={handleSwitch}
+								defaultChecked={translateEnable}
+								disabled={room.encrypted && !translateEnable}
+							/>
+						</FieldRow>
+					</Field>
+					<Field>
+						<FieldLabel htmlFor='translate-to'>{t('Translate_to')}</FieldLabel>
+						<FieldRow verticalAlign='middle'>
+							<Select
+								id='language'
+								value={language}
+								disabled={!translateEnable}
+								onChange={(value) => handleChangeLanguage(String(value))}
+								options={languages}
+							/>
+						</FieldRow>
+					</Field>
+				</FieldGroup>
+			</ContextualbarContent>
+		</ContextualbarDialog>
+	);
+};
+
+export default AutoTranslate;

apps/meteor/client/views/room/contextualBar/AutoTranslate/AutoTranslateWithData.tsx

@@ -0,0 +1,90 @@
+import { useStableCallback } from '@rocket.chat/fuselage-hooks';
+import { useEndpoint, useLanguage, useToastMessageDispatch, useRoomToolbox } from '@rocket.chat/ui-contexts';
+import { useQuery } from '@tanstack/react-query';
+import type { ChangeEvent } from 'react';
+import { useEffect, useState, memo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import AutoTranslate from './AutoTranslate';
+import { useEndpointMutation } from '../../../../hooks/useEndpointMutation';
+import { miscQueryKeys } from '../../../../lib/queryKeys';
+import { useRoom, useRoomSubscription } from '../../contexts/RoomContext';
+
+const AutoTranslateWithData = () => {
+	const room = useRoom();
+	const subscription = useRoomSubscription();
+	const { closeTab } = useRoomToolbox();
+	const userLanguage = useLanguage();
+	const [currentLanguage, setCurrentLanguage] = useState(subscription?.autoTranslateLanguage ?? '');
+	const dispatchToastMessage = useToastMessageDispatch();
+	const { mutateAsync: saveSettings } = useEndpointMutation('POST', '/v1/autotranslate.saveSettings');
+	const { t } = useTranslation();
+
+	const getSupportedLanguages = useEndpoint('GET', '/v1/autotranslate.getSupportedLanguages');
+	const { data: supportedLanguages } = useQuery({
+		queryKey: miscQueryKeys.autotranslateSupportedLanguages(userLanguage),
+		queryFn: async () => {
+			const { languages } = await getSupportedLanguages({ targetLanguage: userLanguage });
+			return languages;
+		},
+	});
+
+	const languagesDict = supportedLanguages ? Object.fromEntries(supportedLanguages.map((lang) => [lang.language, lang.name])) : {};
+
+	const handleChangeLanguage = useStableCallback(async (value: string) => {
+		setCurrentLanguage(value);
+
+		await saveSettings({
+			roomId: room._id,
+			field: 'autoTranslateLanguage',
+			value,
+		});
+		dispatchToastMessage({
+			type: 'success',
+			message: t('AutoTranslate_language_set_to', { language: languagesDict[value] }),
+		});
+	});
+
+	const handleSwitch = useStableCallback(async (event: ChangeEvent<HTMLInputElement>) => {
+		await saveSettings({
+			roomId: room._id,
+			field: 'autoTranslate',
+			value: event.target.checked,
+		});
+		dispatchToastMessage({
+			type: 'success',
+			message: event.target.checked
+				? t('AutoTranslate_Enabled_for_room', { roomName: room.name })
+				: t('AutoTranslate_Disabled_for_room', { roomName: room.name }),
+		});
+		if (event.target.checked && currentLanguage) {
+			dispatchToastMessage({
+				type: 'success',
+				message: t('AutoTranslate_language_set_to', { language: languagesDict[currentLanguage] }),
+			});
+		}
+	});
+
+	useEffect(() => {
+		if (!subscription?.autoTranslate) {
+			return;
+		}
+
+		if (!subscription?.autoTranslateLanguage) {
+			handleChangeLanguage(userLanguage);
+		}
+	}, [subscription?.autoTranslate, subscription?.autoTranslateLanguage, handleChangeLanguage, userLanguage]);
+
+	return (
+		<AutoTranslate
+			language={currentLanguage}
+			languages={supportedLanguages ? supportedLanguages.map((language) => [language.language, language.name]) : []}
+			handleSwitch={handleSwitch}
+			handleChangeLanguage={handleChangeLanguage}
+			translateEnable={!!subscription?.autoTranslate}
+			handleClose={closeTab}
+		/>
+	);
+};
+
+export default memo(AutoTranslateWithData);

apps/meteor/client/views/room/contextualBar/AutoTranslate/index.ts

@@ -0,0 +1 @@
+export { default } from './AutoTranslateWithData';