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

apps/meteor/client/views/omnichannel/components/AutoCompleteContact/AutoCompleteContact.tsx

@@ -0,0 +1,63 @@
+import type { Serialized } from '@rocket.chat/core-typings';
+import { PaginatedSelectFiltered } from '@rocket.chat/fuselage';
+import { useDebouncedValue } from '@rocket.chat/fuselage-hooks';
+import type { ILivechatContactWithManagerData } from '@rocket.chat/rest-typings';
+import type { ComponentProps, ReactNode, SyntheticEvent } from 'react';
+import { memo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { useContactsList } from './useContactsList';
+
+type OptionProps = {
+	role: 'option';
+	title?: string;
+	index: number;
+	label: string;
+	value: string;
+	selected: boolean;
+	focus: boolean;
+	onMouseDown(event: SyntheticEvent): void;
+};
+
+export type AutoCompleteContactProps = Omit<
+	ComponentProps<typeof PaginatedSelectFiltered>,
+	'filter' | 'setFilter' | 'options' | 'endReached' | 'renderItem' | 'value' | 'onChange'
+> & {
+	value: string;
+	onChange: (value: string) => void;
+	renderItem?: (props: OptionProps, contact: Serialized<ILivechatContactWithManagerData>) => ReactNode;
+};
+
+const AutoCompleteContact = ({ value, placeholder, disabled, renderItem, onChange, ...props }: AutoCompleteContactProps) => {
+	const { t } = useTranslation();
+	const [contactsFilter, setContactFilter] = useState<string>('');
+	const debouncedContactFilter = useDebouncedValue(contactsFilter, 500);
+
+	const {
+		data: contactsItems = [],
+		fetchNextPage,
+		isPending,
+	} = useContactsList({
+		filter: debouncedContactFilter,
+	});
+
+	return (
+		<PaginatedSelectFiltered
+			{...props}
+			aria-busy={isPending}
+			placeholder={isPending ? t('Loading...') : placeholder}
+			aria-disabled={isPending || disabled}
+			disabled={isPending || disabled}
+			value={value}
+			flexShrink={0}
+			filter={contactsFilter}
+			setFilter={setContactFilter as (value: string | number | undefined) => void}
+			options={contactsItems}
+			onChange={onChange}
+			endReached={() => fetchNextPage()}
+			renderItem={renderItem ? (props: OptionProps) => renderItem(props, contactsItems[props.index]) : undefined}
+		/>
+	);
+};
+
+export default memo(AutoCompleteContact);

apps/meteor/client/views/omnichannel/components/AutoCompleteContact/index.ts

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

apps/meteor/client/views/omnichannel/components/AutoCompleteContact/useContactsList.ts

@@ -0,0 +1,52 @@
+import type { Serialized } from '@rocket.chat/core-typings';
+import type { ILivechatContactWithManagerData } from '@rocket.chat/rest-typings';
+import { useEndpoint } from '@rocket.chat/ui-contexts';
+import { useInfiniteQuery } from '@tanstack/react-query';
+
+import { omnichannelQueryKeys } from '../../../../lib/queryKeys';
+
+export type ContactOption = Serialized<ILivechatContactWithManagerData> & {
+	value: string;
+	label: string;
+};
+
+type ContactOptions = {
+	filter: string;
+	limit?: number;
+};
+
+const DEFAULT_QUERY_LIMIT = 25;
+
+const formatContactItem = (contact: Serialized<ILivechatContactWithManagerData>): ContactOption => ({
+	...contact,
+	label: contact.name || contact._id,
+	value: contact._id,
+});
+
+export const useContactsList = (options: ContactOptions) => {
+	const getContacts = useEndpoint('GET', '/v1/omnichannel/contacts.search');
+	const { filter, limit = DEFAULT_QUERY_LIMIT } = options;
+
+	return useInfiniteQuery({
+		queryKey: omnichannelQueryKeys.contacts({ filter, limit }),
+		queryFn: async ({ pageParam: offset = 0 }) => {
+			const { contacts, ...data } = await getContacts({
+				searchText: filter,
+				// sort: `{ name: -1 }`,
+				...(limit && { count: limit }),
+				...(offset && { offset }),
+			});
+
+			return {
+				...data,
+				contacts: contacts.map(formatContactItem),
+			};
+		},
+		select: (data) => data.pages.flatMap<ContactOption>((page) => page.contacts),
+		initialPageParam: 0,
+		getNextPageParam: (lastPage) => {
+			const offset = lastPage.offset + lastPage.count;
+			return offset < lastPage.total ? offset : undefined;
+		},
+	});
+};