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

apps/meteor/client/views/omnichannel/directory/contacts/ContactItemMenu.tsx

@@ -0,0 +1,58 @@
+import type { ILivechatContactChannel } from '@rocket.chat/core-typings';
+import { useStableCallback } from '@rocket.chat/fuselage-hooks';
+import type { GenericMenuItemProps } from '@rocket.chat/ui-client';
+import { GenericMenu } from '@rocket.chat/ui-client';
+import { useSetModal, usePermission } from '@rocket.chat/ui-contexts';
+import { useTranslation } from 'react-i18next';
+
+import RemoveContactModal from './RemoveContactModal';
+import { useOmnichannelDirectoryRouter } from '../hooks/useOmnichannelDirectoryRouter';
+
+export type ContactItemMenuProps = {
+	_id: string;
+	name: string;
+	channels: ILivechatContactChannel[];
+};
+
+const ContactItemMenu = ({ _id, name, channels }: ContactItemMenuProps) => {
+	const { t } = useTranslation();
+	const setModal = useSetModal();
+	const omnichannelDirectoryRouter = useOmnichannelDirectoryRouter();
+
+	const canEditContact = usePermission('update-livechat-contact');
+	const canDeleteContact = usePermission('delete-livechat-contact');
+
+	const handleContactEdit = useStableCallback((): void =>
+		omnichannelDirectoryRouter.navigate({
+			tab: 'contacts',
+			context: 'edit',
+			id: _id,
+		}),
+	);
+
+	const handleContactRemoval = useStableCallback(() => {
+		setModal(<RemoveContactModal _id={_id} name={name} channelsCount={channels.length} onClose={() => setModal(null)} />);
+	});
+
+	const menuOptions: GenericMenuItemProps[] = [
+		{
+			id: 'edit',
+			icon: 'edit',
+			content: t('Edit'),
+			onClick: () => handleContactEdit(),
+			disabled: !canEditContact,
+		},
+		{
+			id: 'delete',
+			icon: 'trash',
+			content: t('Delete'),
+			onClick: () => handleContactRemoval(),
+			variant: 'danger',
+			disabled: !canDeleteContact,
+		},
+	];
+
+	return <GenericMenu detached title={t('More_actions')} sections={[{ title: '', items: menuOptions }]} placement='bottom-end' />;
+};
+
+export default ContactItemMenu;

apps/meteor/client/views/omnichannel/directory/contacts/ContactTab.tsx

@@ -0,0 +1,16 @@
+import { usePermission } from '@rocket.chat/ui-contexts';
+
+import ContactTable from './ContactTable';
+import NotAuthorizedPage from '../../../notAuthorized/NotAuthorizedPage';
+
+const ContactTab = () => {
+	const hasAccess = usePermission('view-l-room');
+
+	if (hasAccess) {
+		return <ContactTable />;
+	}
+
+	return <NotAuthorizedPage />;
+};
+
+export default ContactTab;

apps/meteor/client/views/omnichannel/directory/contacts/ContactTable.tsx

@@ -0,0 +1,160 @@
+import { Pagination, States, StatesAction, StatesActions, StatesIcon, StatesTitle, Box, Button } from '@rocket.chat/fuselage';
+import { useDebouncedValue, useStableCallback } from '@rocket.chat/fuselage-hooks';
+import {
+	GenericTable,
+	GenericTableHeader,
+	GenericTableBody,
+	GenericTableHeaderCell,
+	GenericTableLoadingTable,
+	usePagination,
+	useSort,
+} from '@rocket.chat/ui-client';
+import { hashKey } from '@tanstack/react-query';
+import { useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import ContactTableRow from './ContactTableRow';
+import { useCurrentContacts } from './hooks/useCurrentContacts';
+import FilterByText from '../../../../components/FilterByText';
+import GenericNoResults from '../../../../components/GenericNoResults';
+import { links } from '../../../../lib/links';
+import { useOmnichannelDirectoryRouter } from '../hooks/useOmnichannelDirectoryRouter';
+
+function ContactTable() {
+	const { t } = useTranslation();
+
+	const [term, setTerm] = useState('');
+	const omnichannelDirectoryRouter = useOmnichannelDirectoryRouter();
+
+	const { current, itemsPerPage, setItemsPerPage, setCurrent, ...paginationProps } = usePagination();
+	const { sortBy, sortDirection, setSort } = useSort<'name' | 'channels.lastChat.ts' | 'contactManager.username' | 'lastChat.ts'>('name');
+
+	const query = useDebouncedValue(
+		useMemo(
+			() => ({
+				searchText: term,
+				sort: `{ "${sortBy}": ${sortDirection === 'asc' ? 1 : -1} }`,
+				...(itemsPerPage && { count: itemsPerPage }),
+				...(current && { offset: current }),
+			}),
+			[itemsPerPage, current, sortBy, sortDirection, term],
+		),
+		500,
+	);
+
+	const onButtonNewClick = useStableCallback(() =>
+		omnichannelDirectoryRouter.navigate({
+			tab: 'contacts',
+			context: 'new',
+		}),
+	);
+
+	const { data, isLoading, isError, isSuccess, refetch } = useCurrentContacts(query);
+
+	const [defaultQuery] = useState(hashKey([query]));
+	const queryHasChanged = defaultQuery !== hashKey([query]);
+
+	const headers = (
+		<>
+			<GenericTableHeaderCell key='name' direction={sortDirection} active={sortBy === 'name'} onClick={setSort} sort='name'>
+				{t('Name')}
+			</GenericTableHeaderCell>
+			<GenericTableHeaderCell
+				key='lastChannel'
+				direction={sortDirection}
+				active={sortBy === 'channels.lastChat.ts'}
+				onClick={setSort}
+				sort='channels.lastChat.ts'
+			>
+				{t('Last_channel')}
+			</GenericTableHeaderCell>
+			<GenericTableHeaderCell
+				key='contactManager'
+				direction={sortDirection}
+				active={sortBy === 'contactManager.username'}
+				onClick={setSort}
+				sort='contactManager.username'
+			>
+				{t('Contact_Manager')}
+			</GenericTableHeaderCell>
+			<GenericTableHeaderCell
+				key='lastchat'
+				direction={sortDirection}
+				active={sortBy === 'lastChat.ts'}
+				onClick={setSort}
+				sort='lastChat.ts'
+			>
+				{t('Last_Chat')}
+			</GenericTableHeaderCell>
+			<GenericTableHeaderCell key='spacer' width={40} />
+		</>
+	);
+
+	return (
+		<>
+			{((isSuccess && data?.contacts.length > 0) || queryHasChanged) && (
+				<FilterByText value={term} onChange={(event) => setTerm(event.target.value)}>
+					<Button onClick={onButtonNewClick} primary>
+						{t('New_contact')}
+					</Button>
+				</FilterByText>
+			)}
+			{isLoading && (
+				<GenericTable>
+					<GenericTableHeader>{headers}</GenericTableHeader>
+					<GenericTableBody>
+						<GenericTableLoadingTable headerCells={headers.props.children.filter(Boolean).length} />
+					</GenericTableBody>
+				</GenericTable>
+			)}
+			{isSuccess && data?.contacts.length === 0 && queryHasChanged && <GenericNoResults />}
+			{isSuccess && data?.contacts.length === 0 && !queryHasChanged && (
+				<GenericNoResults
+					icon='user-plus'
+					title={t('No_contacts_yet')}
+					description={t('No_contacts_yet_description')}
+					buttonTitle={t('New_contact')}
+					buttonAction={onButtonNewClick}
+					linkHref={links.go.omnichannelDocs}
+					linkText={t('Learn_more_about_contacts')}
+				/>
+			)}
+			{isSuccess && data?.contacts.length > 0 && (
+				<>
+					<GenericTable aria-label={t('Omnichannel_Contact_Center_Contacts')}>
+						<GenericTableHeader>{headers}</GenericTableHeader>
+						<GenericTableBody>
+							{data?.contacts.map((contact) => (
+								<ContactTableRow key={contact._id} {...contact} />
+							))}
+						</GenericTableBody>
+					</GenericTable>
+					<Pagination
+						divider
+						current={current}
+						itemsPerPage={itemsPerPage}
+						count={data?.total}
+						onSetItemsPerPage={setItemsPerPage}
+						onSetCurrent={setCurrent}
+						{...paginationProps}
+					/>
+				</>
+			)}
+			{isError && (
+				<Box marginBlockStart={20}>
+					<States>
+						<StatesIcon variation='danger' name='circle-exclamation' />
+						<StatesTitle>{t('Connection_error')}</StatesTitle>
+						<StatesActions>
+							<StatesAction icon='reload' onClick={() => refetch()}>
+								{t('Reload_page')}
+							</StatesAction>
+						</StatesActions>
+					</States>
+				</Box>
+			)}
+		</>
+	);
+}
+
+export default ContactTable;

apps/meteor/client/views/omnichannel/directory/contacts/ContactTableRow.tsx

@@ -0,0 +1,86 @@
+import { css } from '@rocket.chat/css-in-js';
+import { Box } from '@rocket.chat/fuselage';
+import { useStableCallback } from '@rocket.chat/fuselage-hooks';
+import type { ILivechatContactWithManagerData } from '@rocket.chat/rest-typings';
+import { GenericTableCell, GenericTableRow } from '@rocket.chat/ui-client';
+
+import ContactItemMenu from './ContactItemMenu';
+import { OmnichannelRoomIcon } from '../../../../components/RoomIcon/OmnichannelRoomIcon';
+import { useFormatDate } from '../../../../hooks/useFormatDate';
+import { useTimeFromNow } from '../../../../hooks/useTimeFromNow';
+import { useOmnichannelSource } from '../../hooks/useOmnichannelSource';
+import { useOmnichannelDirectoryRouter } from '../hooks/useOmnichannelDirectoryRouter';
+
+/**
+ * TODO: We should have a variant for aligning row cell instead of using custom CSS
+ **/
+const customAlignTop = css`
+	td {
+		vertical-align: top;
+	}
+`;
+
+const ContactTableRow = ({ _id, name, contactManager, lastChat, channels }: ILivechatContactWithManagerData) => {
+	const { getSourceLabel } = useOmnichannelSource();
+	const getTimeFromNow = useTimeFromNow(true);
+	const formatDate = useFormatDate();
+	const omnichannelDirectoryRouter = useOmnichannelDirectoryRouter();
+
+	const latestChannel = channels?.sort((a, b) => {
+		if (a.lastChat && b.lastChat) {
+			return a.lastChat.ts > b.lastChat.ts ? -1 : 1;
+		}
+
+		return 0;
+	})[0];
+
+	const onRowClick = useStableCallback((id: string) =>
+		omnichannelDirectoryRouter.navigate({
+			id,
+			tab: 'contacts',
+			context: 'details',
+		}),
+	);
+
+	return (
+		<GenericTableRow
+			action
+			key={_id}
+			tabIndex={0}
+			height='40px'
+			rcx-show-call-button-on-hover
+			className={customAlignTop}
+			onClick={() => onRowClick(_id)}
+		>
+			<GenericTableCell fontScale='p2m' color='default' withTruncatedText>
+				{name}
+			</GenericTableCell>
+			<GenericTableCell withTruncatedText>
+				{latestChannel?.details && (
+					<Box withTruncatedText display='flex' alignItems='center'>
+						<OmnichannelRoomIcon size='x20' source={latestChannel?.details} />
+						<Box withTruncatedText marginInlineStart={8}>
+							{getSourceLabel(latestChannel?.details)}
+						</Box>
+					</Box>
+				)}
+			</GenericTableCell>
+			<GenericTableCell withTruncatedText>{contactManager?.username}</GenericTableCell>
+			<GenericTableCell withTruncatedText>
+				{lastChat && (
+					<Box display='flex' flexDirection='column'>
+						<Box fontScale='p2m' withTruncatedText color='default'>
+							{formatDate(lastChat.ts)}
+						</Box>
+						<Box withTruncatedText>{getTimeFromNow(lastChat.ts)}</Box>
+					</Box>
+				)}
+			</GenericTableCell>
+			<GenericTableCell>
+				<ContactItemMenu _id={_id} name={name} channels={channels} />
+			</GenericTableCell>
+		</GenericTableRow>
+	);
+};
+
+export default ContactTableRow;

apps/meteor/client/views/omnichannel/directory/contacts/RemoveContactModal.tsx

@@ -0,0 +1,79 @@
+import { Box, Input } from '@rocket.chat/fuselage';
+import { useStableCallback } from '@rocket.chat/fuselage-hooks';
+import { GenericModal } from '@rocket.chat/ui-client';
+import { useToastMessageDispatch, useEndpoint } from '@rocket.chat/ui-contexts';
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+import type { ChangeEvent, SubmitEvent } from 'react';
+import { useState, useId } from 'react';
+import { useTranslation } from 'react-i18next';
+
+export type RemoveContactModalProps = {
+	_id: string;
+	name: string;
+	channelsCount: number;
+	onClose: () => void;
+};
+
+const RemoveContactModal = ({ _id, name, channelsCount, onClose }: RemoveContactModalProps) => {
+	const { t } = useTranslation();
+	const [text, setText] = useState<string>('');
+
+	const queryClient = useQueryClient();
+	const removeContact = useEndpoint('POST', '/v1/omnichannel/contacts.delete');
+	const dispatchToast = useToastMessageDispatch();
+	const contactDeleteModalId = useId();
+
+	const handleSubmit = useStableCallback((event: SubmitEvent<HTMLFormElement>): void => {
+		event.preventDefault();
+		removeContactMutation.mutate();
+	});
+
+	const confirmationText = t('Delete').toLowerCase();
+
+	const removeContactMutation = useMutation({
+		mutationFn: () => removeContact({ contactId: _id }),
+		onSuccess: async () => {
+			dispatchToast({ type: 'success', message: t('Contact_has_been_deleted') });
+			await Promise.all([
+				queryClient.invalidateQueries({
+					queryKey: ['current-contacts'],
+				}),
+				queryClient.invalidateQueries({
+					queryKey: ['getContactsByIds', _id],
+				}),
+			]);
+			onClose();
+		},
+		onError: (error) => {
+			dispatchToast({ type: 'error', message: error });
+			onClose();
+		},
+	});
+
+	return (
+		<GenericModal
+			wrapperFunction={(props) => <Box is='form' onSubmit={handleSubmit} {...props} />}
+			onCancel={onClose}
+			confirmText={t('Delete')}
+			title={t('Delete_Contact')}
+			onClose={onClose}
+			variant='danger'
+			confirmDisabled={text !== confirmationText}
+		>
+			<Box is='p' id={`${contactDeleteModalId}-description`} marginBlockEnd={16}>
+				{t('Are_you_sure_delete_contact', { contactName: name, channelsCount, confirmationText })}
+			</Box>
+			<Box marginBlockEnd={16} display='flex' justifyContent='stretch'>
+				<Input
+					value={text}
+					name='confirmContactRemoval'
+					aria-label={t('Confirm_contact_removal')}
+					aria-describedby={`${contactDeleteModalId}-description`}
+					onChange={(event: ChangeEvent<HTMLInputElement>) => setText(event.currentTarget.value)}
+				/>
+			</Box>
+		</GenericModal>
+	);
+};
+
+export default RemoveContactModal;

apps/meteor/client/views/omnichannel/directory/contacts/hooks/useCurrentContacts.ts

@@ -0,0 +1,17 @@
+import type { OperationResult, PaginatedRequest } from '@rocket.chat/rest-typings';
+import { useEndpoint } from '@rocket.chat/ui-contexts';
+import type { UseQueryResult } from '@tanstack/react-query';
+import { useQuery } from '@tanstack/react-query';
+
+export const useCurrentContacts = (
+	query: PaginatedRequest<{
+		searchText: string;
+	}>,
+): UseQueryResult<OperationResult<'GET', '/v1/omnichannel/contacts.search'>> => {
+	const currentContacts = useEndpoint('GET', '/v1/omnichannel/contacts.search');
+
+	return useQuery({
+		queryKey: ['current-contacts', query],
+		queryFn: () => currentContacts(query),
+	});
+};