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

apps/meteor/client/views/room/composer/hooks/useComposerBoxPopup.ts

@@ -0,0 +1,285 @@
+import { useStableCallback } from '@rocket.chat/fuselage-hooks';
+import type { UseQueryResult } from '@tanstack/react-query';
+import type { MutableRefObject } from 'react';
+import { useEffect, useCallback, useState, useRef } from 'react';
+
+import { useComposerBoxPopupQueries } from './useComposerBoxPopupQueries';
+import { useChat } from '../../contexts/ChatContext';
+import type { ComposerPopupOption } from '../../contexts/ComposerPopupContext';
+
+type ComposerBoxPopupImperativeCommands<T> = MutableRefObject<
+	| {
+			getFilter?: () => string;
+			select?: (s: T) => void;
+	  }
+	| undefined
+>;
+
+type ComposerBoxPopupOptions<T extends { _id: string; sort?: number | undefined }> = ComposerPopupOption<T>;
+
+type ComposerBoxPopupResult<T extends { _id: string; sort?: number }> =
+	| {
+			option: ComposerPopupOption<T>;
+			items: UseQueryResult<T[]>[];
+			focused: T | undefined;
+			select: (item: T) => void;
+			callbackRef: (node: HTMLElement) => void;
+			commandsRef: ComposerBoxPopupImperativeCommands<T>;
+			suspended: boolean;
+			filter: unknown;
+			clear: () => void;
+	  }
+	| {
+			option: undefined;
+			items: undefined;
+			focused: undefined;
+			callbackRef: (node: HTMLElement) => void;
+			select: undefined;
+			commandsRef: ComposerBoxPopupImperativeCommands<T>;
+			suspended: undefined;
+			filter: unknown;
+			clear: () => void;
+	  };
+
+const keys = {
+	TAB: 9,
+	ENTER: 13,
+	ESC: 27,
+	ARROW_UP: 38,
+	ARROW_DOWN: 40,
+} as const;
+
+export const useComposerBoxPopup = <T extends { _id: string; sort?: number }>(
+	options: ComposerBoxPopupOptions<T>[],
+): ComposerBoxPopupResult<T> => {
+	const [optionIndex, setOptionIndex] = useState<number>(-1);
+	const [focused, setFocused] = useState<T | undefined>(undefined);
+	const [filter, setFilter] = useState('');
+
+	const option = options[optionIndex];
+
+	const commandsRef: ComposerBoxPopupImperativeCommands<T> = useRef(undefined);
+
+	const { queries: items, suspended } = useComposerBoxPopupQueries(filter, option) as {
+		queries: UseQueryResult<T[]>[];
+		suspended: boolean;
+	};
+
+	const chat = useChat();
+
+	useEffect(() => {
+		if (!option) {
+			return;
+		}
+
+		if (option?.preview && suspended) {
+			setFocused(undefined);
+			return;
+		}
+		setFocused((focused) => {
+			const sortedItems = items
+				.filter((item) => item.isSuccess)
+				.flatMap((item) => item.data)
+				.sort((a, b) => (('sort' in a && a.sort) || 0) - (('sort' in b && b.sort) || 0));
+			return sortedItems.find((item) => item._id === focused?._id) ?? sortedItems[0];
+		});
+	}, [items, option, suspended]);
+
+	const select = useStableCallback((item: T) => {
+		if (!option) {
+			throw new Error('No popup is open');
+		}
+
+		if (commandsRef.current?.select) {
+			commandsRef.current.select(item);
+		} else {
+			const value = chat?.composer?.substring(0, chat?.composer?.selection.start);
+			const selector =
+				option.matchSelectorRegex ??
+				(option.triggerAnywhere ? new RegExp(`(?:^| |\n)(${option.trigger})([^\\s]*$)`) : new RegExp(`(?:^)(${option.trigger})([^\\s]*$)`));
+
+			const result = value?.match(selector);
+			if (!result || !value) {
+				return;
+			}
+
+			chat?.composer?.replaceText((option.prefix ?? option.trigger ?? '') + option.getValue(item) + (option.suffix ?? ''), {
+				start: value.lastIndexOf(result[1] + result[2]),
+				end: chat?.composer?.selection.start,
+			});
+		}
+		setOptionIndex(-1);
+		setFocused(undefined);
+	});
+
+	const setOptionByInput = useStableCallback((): ComposerBoxPopupOptions<T> | undefined => {
+		const value = chat?.composer?.substring(0, chat?.composer?.selection.start);
+
+		if (!value) {
+			setOptionIndex(-1);
+			setFocused(undefined);
+			return;
+		}
+
+		const optionIndex = options.findIndex(({ trigger, matchSelectorRegex, triggerAnywhere, triggerLength }) => {
+			const selector =
+				matchSelectorRegex ?? (triggerAnywhere ? new RegExp(`(?:^| |\n)(${trigger})[^\\s]*$`) : new RegExp(`(?:^)(${trigger})[^\\s]*$`));
+			const result = selector.test(value);
+			if (!triggerLength || !result) {
+				return result;
+			}
+			const filter = value.match(selector);
+			return filter && triggerLength < filter[0].length;
+		});
+		setOptionIndex(optionIndex);
+		const option = options[optionIndex];
+		if (!option) {
+			setFocused(undefined);
+			setFilter('');
+		}
+
+		if (option) {
+			const selector =
+				option.matchSelectorRegex ??
+				(option.triggerAnywhere ? new RegExp(`(?:^| |\n)(${option.trigger})([^\\s]*$)`) : new RegExp(`(?:^)(${option.trigger})([^\\s]*$)`));
+			const result = value.match(selector);
+			setFilter(commandsRef.current?.getFilter?.() ?? (result ? result[2] : ''));
+		}
+		return option;
+	});
+
+	const handleFocus = useStableCallback(() => {
+		if (option) {
+			return;
+		}
+		setOptionByInput();
+	});
+
+	const handleInput = useStableCallback(() => {
+		setOptionByInput();
+	});
+
+	const handleKeyUp = useStableCallback((event: KeyboardEvent) => {
+		if (event.which === keys.ESC) {
+			if (option?.closeOnEsc === true) {
+				setOptionIndex(-1);
+				setFocused(undefined);
+				event.preventDefault();
+				event.stopImmediatePropagation();
+			}
+			return;
+		}
+
+		setOptionByInput();
+	});
+
+	const handleKeyDown = useStableCallback((event: KeyboardEvent) => {
+		if (!option) {
+			return;
+		}
+
+		if (event.which === keys.ENTER || event.which === keys.TAB) {
+			if (!focused) {
+				return;
+			}
+
+			select(focused);
+
+			event.preventDefault();
+			event.stopImmediatePropagation();
+			return true;
+		}
+		if (event.which === keys.ARROW_UP && !(event.shiftKey || event.ctrlKey || event.altKey || event.metaKey)) {
+			setFocused((focused) => {
+				const list = items
+					.filter((item) => item.isSuccess)
+					.flatMap((item) => item.data)
+					.sort((a, b) => (('sort' in a && a.sort) || 0) - (('sort' in b && b.sort) || 0));
+
+				if (!list) {
+					return;
+				}
+
+				const focusedIndex = list.findIndex((item) => item === focused);
+
+				return focusedIndex > 0 ? list[focusedIndex - 1] : list[list.length - 1];
+			});
+			event.preventDefault();
+			event.stopImmediatePropagation();
+			return true;
+		}
+		if (event.which === keys.ARROW_DOWN && !(event.shiftKey || event.ctrlKey || event.altKey || event.metaKey)) {
+			setFocused((focused) => {
+				const list = items
+					.filter((item) => item.isSuccess)
+					.flatMap((item) => item.data)
+					.sort((a, b) => (('sort' in a && a.sort) || 0) - (('sort' in b && b.sort) || 0));
+
+				if (!list) {
+					return undefined;
+				}
+
+				const focusedIndex = list.findIndex((item) => item === focused);
+
+				return focusedIndex < list.length - 1 ? list[focusedIndex + 1] : list[0];
+			});
+			event.preventDefault();
+			event.stopImmediatePropagation();
+			return true;
+		}
+	});
+
+	const clear = useStableCallback(() => {
+		setOptionIndex(-1);
+		setFocused(undefined);
+		setFilter('');
+	});
+
+	const ref = useRef<HTMLElement | null>(null);
+	const callbackRef = useCallback(
+		(node: HTMLElement | null) => {
+			if (ref.current) {
+				ref.current.removeEventListener('input', handleInput);
+				ref.current.removeEventListener('keyup', handleKeyUp);
+				ref.current.removeEventListener('keydown', handleKeyDown);
+				ref.current.removeEventListener('focus', handleFocus);
+				ref.current = null;
+			}
+
+			if (node) {
+				ref.current = node;
+				node.addEventListener('input', handleInput);
+				node.addEventListener('keyup', handleKeyUp);
+				node.addEventListener('keydown', handleKeyDown);
+				node.addEventListener('focus', handleFocus);
+			}
+		},
+		[handleInput, handleKeyUp, handleKeyDown, handleFocus],
+	);
+
+	if (!option) {
+		return {
+			option: undefined,
+			items: undefined,
+			focused: undefined,
+			select: undefined,
+			callbackRef,
+			commandsRef,
+			suspended: undefined,
+			filter: undefined,
+			clear,
+		};
+	}
+
+	return {
+		option,
+		items,
+		focused,
+		select,
+		callbackRef,
+		commandsRef,
+		suspended,
+		filter,
+		clear,
+	};
+};

apps/meteor/client/views/room/composer/hooks/useComposerBoxPopupQueries.ts

@@ -0,0 +1,51 @@
+import { keepPreviousData, useQueries } from '@tanstack/react-query';
+import { useEffect, useState } from 'react';
+
+import { useEnablePopupPreview } from './useEnablePopupPreview';
+import { slashCommands } from '../../../../lib/slashCommand';
+import type { ComposerPopupOption } from '../../contexts/ComposerPopupContext';
+
+export const useComposerBoxPopupQueries = <T extends { _id: string; sort?: number }>(filter: unknown, popup?: ComposerPopupOption<T>) => {
+	const [counter, setCounter] = useState(0);
+
+	useEffect(() => {
+		setCounter(0);
+	}, [popup, filter]);
+
+	const shouldPopupPreview = useEnablePopupPreview(filter, popup);
+
+	const enableQuery =
+		!popup ||
+		(popup.preview &&
+			Boolean(slashCommands.commands[(filter as any)?.cmd]) &&
+			slashCommands.commands[(filter as any)?.cmd].providesPreview) ||
+		shouldPopupPreview;
+
+	const queries = useQueries({
+		queries: [
+			{
+				placeholderData: keepPreviousData,
+				queryKey: ['message-popup', 'local', filter, popup],
+				queryFn: () => popup?.getItemsFromLocal?.(filter) || [],
+				enabled: enableQuery,
+			},
+			{
+				placeholderData: keepPreviousData,
+				queryKey: ['message-popup', 'server', filter, popup],
+				queryFn: () => popup?.getItemsFromServer?.(filter) || [],
+				enabled: counter > 0,
+			},
+		],
+	});
+
+	useEffect(() => {
+		if (Array.isArray(queries[0].data) && queries[0].data.length < 5) {
+			setCounter(1);
+		}
+	}, [queries]);
+
+	return {
+		queries,
+		suspended: !enableQuery,
+	};
+};

apps/meteor/client/views/room/composer/hooks/useEnablePopupPreview.ts

@@ -0,0 +1,4 @@
+import type { ComposerPopupOption } from '../../contexts/ComposerPopupContext';
+
+export const useEnablePopupPreview = <T extends { _id: string; sort?: number }>(filter: unknown, popup?: ComposerPopupOption<T>) =>
+	popup && !popup.preview && (popup?.triggerLength ? typeof filter === 'string' && popup.triggerLength - 1 < filter.length : true);

apps/meteor/client/views/room/composer/hooks/useMessageComposerIsAnonymous.ts

@@ -0,0 +1,13 @@
+import { useSetting, useUserId } from '@rocket.chat/ui-contexts';
+
+export const useMessageComposerIsAnonymous = (): boolean => {
+	const isAnonymousReadEnabled = useSetting('Accounts_AllowAnonymousRead');
+	const isAnonymousWriteEnabled = useSetting('Accounts_AllowAnonymousWrite');
+
+	const uid = useUserId();
+
+	if (!uid && !isAnonymousReadEnabled && !isAnonymousWriteEnabled) {
+		throw new Error('Anonymous access is disabled');
+	}
+	return Boolean(!uid);
+};

apps/meteor/client/views/room/composer/hooks/useMessageComposerIsArchived.ts

@@ -0,0 +1,4 @@
+import type { IRoom, ISubscription } from '@rocket.chat/core-typings';
+
+export const useMessageComposerIsArchived = (room: IRoom, subscription?: ISubscription): boolean =>
+	!!room?.archived || Boolean(subscription && subscription.t === 'd' && subscription.archived);

apps/meteor/client/views/room/composer/hooks/useMessageComposerIsBlocked.ts

@@ -0,0 +1,19 @@
+import type { ISubscription } from '@rocket.chat/core-typings';
+import { isDirectMessageRoom } from '@rocket.chat/core-typings';
+
+import { useRoom } from '../../contexts/RoomContext';
+
+export const useMessageComposerIsBlocked = ({ subscription }: { subscription?: ISubscription }): boolean => {
+	const room = useRoom();
+
+	if (!isDirectMessageRoom(room)) {
+		return false;
+	}
+	if (!subscription) {
+		return false;
+	}
+	// over DM's is possible to block or being blocked by the other user
+	const isBlocked = Boolean(subscription.blocked);
+	const isBlocker = Boolean(subscription.blocker);
+	return isBlocked || isBlocker;
+};

apps/meteor/client/views/room/composer/hooks/useMessageComposerIsReadOnly.ts

@@ -0,0 +1,14 @@
+import type { IRoom } from '@rocket.chat/core-typings';
+import { usePermission, useUser } from '@rocket.chat/ui-contexts';
+import { useMemo } from 'react';
+
+import { roomCoordinator } from '../../../../lib/rooms/roomCoordinator';
+
+export const useMessageComposerIsReadOnly = (room: IRoom): boolean => {
+	const user = useUser();
+	// depend on post-readonly so this re-runs when the permission is granted/revoked at runtime;
+	// roomCoordinator.readOnly calls hasPermission internally and returns the up-to-date value.
+	const postReadOnly = usePermission('post-readonly', room._id);
+	// eslint-disable-next-line react-hooks/exhaustive-deps
+	return useMemo(() => roomCoordinator.readOnly(room, user), [room, user, postReadOnly]);
+};

apps/meteor/client/views/room/composer/hooks/useMessageComposerMergedRefs.ts

@@ -0,0 +1,30 @@
+import type { MutableRefObject, Ref, RefCallback } from 'react';
+import { useCallback } from 'react';
+
+const isRefCallback = <T>(x: unknown): x is RefCallback<T> => typeof x === 'function';
+const isMutableRefObject = <T>(x: unknown): x is MutableRefObject<T> => typeof x === 'object';
+
+export const setRef = <T>(ref: Ref<T> | undefined, refValue: T) => {
+	if (isRefCallback<T>(ref)) {
+		ref(refValue);
+		return;
+	}
+
+	if (isMutableRefObject<T>(ref)) {
+		ref.current = refValue;
+	}
+};
+
+/**
+ * Merges multiple refs into a single ref callback.
+ * it was not meant to be used with in any different place than MessageBox
+ *
+ * @param refs The refs to merge.
+ * @returns The merged ref callback.
+ */
+export const useMessageComposerMergedRefs = <T>(...refs: (Ref<T> | undefined)[]): RefCallback<T> => {
+	return useCallback((refValue: T) => {
+		refs.forEach((ref) => setRef(ref, refValue));
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, refs);
+};