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

apps/meteor/client/components/UserAndRoomAutoCompleteMultiple/UserAndRoomAutoCompleteMultiple.spec.tsx

@@ -0,0 +1,90 @@
+import { MockedAppRootBuilder } from '@rocket.chat/mock-providers/dist/MockedAppRootBuilder';
+import type { SubscriptionWithRoom } from '@rocket.chat/ui-contexts';
+import { render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+import UserAndRoomAutoCompleteMultiple from './UserAndRoomAutoCompleteMultiple';
+import { createFakeSubscription, createFakeUser } from '../../../tests/mocks/data';
+import { roomCoordinator } from '../../lib/rooms/roomCoordinator';
+
+const user = createFakeUser({
+	active: true,
+	roles: ['admin'],
+	type: 'user',
+});
+
+const direct = createFakeSubscription({
+	t: 'd',
+	name: 'Direct',
+});
+
+const channel = createFakeSubscription({
+	t: 'c',
+	name: 'General',
+});
+
+const appRoot = new MockedAppRootBuilder()
+	.withSubscriptions([
+		{ ...direct, ro: false },
+		{ ...channel, ro: true },
+	] as unknown as SubscriptionWithRoom[])
+	.withUser(user);
+
+jest.mock('../../lib/rooms/roomCoordinator', () => ({
+	roomCoordinator: {
+		readOnly: jest.fn(),
+	},
+}));
+
+beforeEach(() => {
+	(roomCoordinator.readOnly as jest.Mock).mockReturnValue(false);
+});
+
+afterEach(() => jest.clearAllMocks());
+
+it('should render options based on user subscriptions', async () => {
+	render(<UserAndRoomAutoCompleteMultiple value={[]} onChange={jest.fn()} />, { wrapper: appRoot.build() });
+
+	const input = screen.getByRole('textbox');
+	await userEvent.click(input);
+
+	await waitFor(() => {
+		expect(screen.getByText('Direct')).toBeInTheDocument();
+	});
+
+	await waitFor(() => {
+		expect(screen.getByText('General')).toBeInTheDocument();
+	});
+});
+
+it('should filter out read-only rooms', async () => {
+	(roomCoordinator.readOnly as jest.Mock).mockReturnValueOnce(true);
+
+	render(<UserAndRoomAutoCompleteMultiple value={[]} onChange={jest.fn()} />, { wrapper: appRoot.build() });
+
+	const input = screen.getByRole('textbox');
+	await userEvent.click(input);
+
+	await waitFor(() => {
+		expect(screen.getByText('General')).toBeInTheDocument();
+	});
+
+	await waitFor(() => {
+		expect(screen.queryByText('Direct')).not.toBeInTheDocument();
+	});
+});
+
+it('should call onChange when selecting an option', async () => {
+	const handleChange = jest.fn();
+	render(<UserAndRoomAutoCompleteMultiple value={[]} onChange={handleChange} />, { wrapper: appRoot.build() });
+
+	const input = screen.getByRole('textbox');
+	await userEvent.click(input);
+
+	await waitFor(() => {
+		expect(screen.getByText('General')).toBeInTheDocument();
+	});
+
+	await userEvent.click(screen.getByText('General'));
+	expect(handleChange).toHaveBeenCalled();
+});

apps/meteor/client/components/UserAndRoomAutoCompleteMultiple/UserAndRoomAutoCompleteMultiple.tsx

@@ -0,0 +1,115 @@
+import { type RoomType, isDirectMessageRoom } from '@rocket.chat/core-typings';
+import { AutoComplete, Box, Option, OptionAvatar, OptionContent, Chip } from '@rocket.chat/fuselage';
+import { useDebouncedValue } from '@rocket.chat/fuselage-hooks';
+import { escapeRegExp } from '@rocket.chat/tools';
+import { RoomAvatar } from '@rocket.chat/ui-avatar';
+import { useUser, useUserSubscriptions } from '@rocket.chat/ui-contexts';
+import type { ComponentProps } from 'react';
+import { memo, useMemo, useState } from 'react';
+
+import { roomCoordinator } from '../../lib/rooms/roomCoordinator';
+import { Rooms } from '../../stores';
+
+export type UserAndRoomAutoCompleteMultipleProps = Omit<ComponentProps<typeof AutoComplete>, 'filter'> & {
+	limit?: number;
+	excludeTypes?: RoomType[];
+	allowReadOnly?: boolean;
+};
+
+type OptionType = {
+	value: string;
+	label: {
+		name: string | undefined;
+		avatarETag: string | undefined;
+		type: RoomType;
+	};
+}[];
+
+const UserAndRoomAutoCompleteMultiple = ({
+	value,
+	onChange,
+	limit,
+	excludeTypes,
+	allowReadOnly = false,
+	...props
+}: UserAndRoomAutoCompleteMultipleProps) => {
+	const user = useUser();
+	const [filter, setFilter] = useState('');
+	const debouncedFilter = useDebouncedValue(filter, 1000);
+
+	const rooms = useUserSubscriptions(
+		...useMemo<Parameters<typeof useUserSubscriptions>>(
+			() => [
+				{
+					open: { $ne: false },
+					$or: [
+						{ lowerCaseFName: new RegExp(escapeRegExp(debouncedFilter), 'i') },
+						{ lowerCaseName: new RegExp(escapeRegExp(debouncedFilter), 'i') },
+					],
+				},
+				// We are using a higher limit here to take advantage of the amount that
+				// will be filtered below into a smaller set respecting the limit prop.
+				{ limit: 100 },
+			],
+			[debouncedFilter],
+		),
+	);
+
+	const options = useMemo(
+		() =>
+			rooms.reduce<OptionType>((acc, room) => {
+				if (acc.length === limit) return acc;
+
+				if (excludeTypes?.includes(room.t)) return acc;
+
+				if (isDirectMessageRoom(room) && (room.blocked || room.blocker)) {
+					return acc;
+				}
+
+				if (!allowReadOnly && roomCoordinator.readOnly(Rooms.state.get(room.rid), user)) return acc;
+
+				return [
+					...acc,
+					{
+						value: room.rid,
+						label: {
+							name: room.fname || room.name,
+							avatarETag: room.avatarETag,
+							type: room.t,
+						},
+					},
+				];
+			}, []),
+		[allowReadOnly, excludeTypes, limit, rooms, user],
+	);
+
+	return (
+		<AutoComplete
+			{...props}
+			value={value}
+			onChange={onChange}
+			filter={filter}
+			setFilter={setFilter}
+			multiple
+			renderSelected={({ selected: { value, label }, onRemove, ...props }) => (
+				<Chip {...props} height='x20' value={value} onClick={onRemove} marginInlineEnd={4}>
+					<RoomAvatar size='x20' room={{ ...label, _id: value }} />
+					<Box is='span' margin='none' marginInlineStart={4}>
+						{label.name}
+					</Box>
+				</Chip>
+			)}
+			renderItem={({ value, label, ...props }) => (
+				<Option key={value} {...props}>
+					<OptionAvatar>
+						<RoomAvatar size='x20' room={{ ...label, _id: value }} />
+					</OptionAvatar>
+					<OptionContent>{label.name}</OptionContent>
+				</Option>
+			)}
+			options={options}
+		/>
+	);
+};
+
+export default memo(UserAndRoomAutoCompleteMultiple);

apps/meteor/client/components/UserAndRoomAutoCompleteMultiple/index.ts

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