feat: Disable slash commands for encrypted rooms

.changeset/popular-bulldogs-accept.md

@@ -0,0 +1,6 @@
+---
+'@rocket.chat/i18n': patch
+'@rocket.chat/meteor': patch
+---
+
+Disable slash commands in encrypted rooms and show a disabled warning.

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

@@ -9,6 +9,7 @@ export type ComposerBoxPopupProps<
 	T extends {
 		_id: string;
 		sort?: number;
+		disabled?: boolean;
 	},
 > = {
 	title?: string;
@@ -22,6 +23,7 @@ function ComposerBoxPopup<
 	T extends {
 		_id: string;
 		sort?: number;
+		disabled?: boolean;
 	},
 >({
 	title,
@@ -37,7 +39,9 @@ function ComposerBoxPopup<
 
 	const variant = popupSizes && popupSizes.inlineSize < 480 ? 'small' : 'large';
 
-	const getOptionTitle = <T extends { _id: string; sort?: number; outside?: boolean; suggestion?: boolean }>(item: T) => {
+	const getOptionTitle = <T extends { _id: string; sort?: number; outside?: boolean; suggestion?: boolean; disabled?: boolean }>(
+		item: T,
+	) => {
 		if (variant !== 'small') {
 			return undefined;
 		}
@@ -49,6 +53,10 @@ function ComposerBoxPopup<
 		if (item.suggestion) {
 			return t('Suggestion_from_recent_messages');
 		}
+
+		if (item.disabled) {
+			return t('Unavailable_in_encrypted_channels');
+		}
 	};
 
 	const itemsFlat = useMemo(
@@ -96,6 +104,7 @@ function ComposerBoxPopup<
 								id={`popup-item-${item._id}`}
 								tabIndex={item === focused ? 0 : -1}
 								aria-selected={item === focused}
+								disabled={item.disabled}
 							>
 								{renderItem({ item: { ...item, variant } })}
 							</Option>

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

@@ -1,20 +1,24 @@
 import { OptionColumn, OptionContent, OptionDescription, OptionInput } from '@rocket.chat/fuselage';
+import { useTranslation } from '@rocket.chat/ui-contexts';
 import React from 'react';
 
 export type ComposerBoxPopupSlashCommandProps = {
 	_id: string;
 	description?: string;
 	params?: string;
+	disabled?: boolean;
 };
 
-function ComposerBoxPopupSlashCommand({ _id, description, params }: ComposerBoxPopupSlashCommandProps) {
+function ComposerBoxPopupSlashCommand({ _id, description, params, disabled }: ComposerBoxPopupSlashCommandProps) {
+	const t = useTranslation();
+
 	return (
 		<>
 			<OptionContent>
 				{_id} <OptionDescription>{params}</OptionDescription>
 			</OptionContent>
 			<OptionColumn>
-				<OptionInput>{description}</OptionInput>
+				<OptionInput>{disabled ? t('Unavailable_in_encrypted_channels') : description}</OptionInput>
 			</OptionColumn>
 		</>
 	);

apps/meteor/client/views/room/contexts/ComposerPopupContext.ts

@@ -21,6 +21,7 @@ export type ComposerPopupOption<T extends { _id: string; sort?: number } = { _id
 	getValue: (item: T) => string;
 
 	renderItem?: ({ item }: { item: T }) => ReactElement;
+	disabled?: boolean;
 };
 
 export type ComposerPopupContextValue = ComposerPopupOption[];

apps/meteor/client/views/room/providers/ComposerPopupProvider.tsx

@@ -25,14 +25,17 @@ import type { ComposerPopupContextValue } from '../contexts/ComposerPopupContext
 import { ComposerPopupContext, createMessageBoxPopupConfig } from '../contexts/ComposerPopupContext';
 
 const ComposerPopupProvider = ({ children, room }: { children: ReactNode; room: IRoom }) => {
-	const { _id: rid } = room;
+	const { _id: rid, encrypted: isRoomEncrypted } = room;
 	const userSpotlight = useMethod('spotlight');
 	const suggestionsCount = useSetting<number>('Number_of_users_autocomplete_suggestions');
 	const cannedResponseEnabled = useSetting<boolean>('Canned_Responses_Enable');
 	const [recentEmojis] = useLocalStorage('emoji.recent', []);
 	const isOmnichannel = isOmnichannelRoom(room);
 	const useEmoji = useUserPreference('useEmojis');
 	const t = useTranslation();
+	const e2eEnabled = useSetting<boolean>('E2E_Enable');
+	const unencryptedMessagesAllowed = useSetting<boolean>('E2E_Allow_Unencrypted_Messages');
+	const encrypted = isRoomEncrypted && e2eEnabled && !unencryptedMessagesAllowed;
 
 	const call = useMethod('getSlashCommandPreviews');
 	const value: ComposerPopupContextValue = useMemo(() => {
@@ -278,6 +281,7 @@ const ComposerPopupProvider = ({ children, room }: { children: ReactNode; room:
 				trigger: '/',
 				suffix: ' ',
 				triggerAnywhere: false,
+				disabled: encrypted,
 				renderItem: ({ item }) => <ComposerBoxPopupSlashCommand {...item} />,
 				getItemsFromLocal: async (filter: string) => {
 					return Object.keys(slashCommands.commands)
@@ -288,6 +292,7 @@ const ComposerPopupProvider = ({ children, room }: { children: ReactNode; room:
 								params: item.params && t.has(item.params) ? t(item.params) : item.params ?? '',
 								description: item.description && t.has(item.description) ? t(item.description) : item.description,
 								permission: item.permission,
+								...(encrypted && { disabled: encrypted }),
 							};
 						})
 						.filter((command) => {
@@ -360,7 +365,7 @@ const ComposerPopupProvider = ({ children, room }: { children: ReactNode; room:
 				},
 			}),
 		].filter(Boolean);
-	}, [t, cannedResponseEnabled, isOmnichannel, recentEmojis, suggestionsCount, userSpotlight, rid, call, useEmoji]);
+	}, [t, cannedResponseEnabled, isOmnichannel, recentEmojis, suggestionsCount, userSpotlight, rid, call, useEmoji, encrypted]);
 
 	return <ComposerPopupContext.Provider value={value} children={children} />;
 };

packages/i18n/src/locales/en.i18n.json

@@ -5464,6 +5464,7 @@
   "Unassigned": "Unassigned",
   "unauthorized": "Not authorized",
   "Unavailable": "Unavailable",
+  "Unavailable_in_encrypted_channels": "Unavailable in encrypted channels",
   "Unblock": "Unblock",
   "Unblock_User": "Unblock User",
   "Uncheck_All": "Uncheck All",