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

apps/meteor/client/views/omnichannel/agents/AgentEdit.tsx

@@ -0,0 +1,191 @@
+import type { ILivechatAgent, ILivechatAgentStatus, ILivechatDepartmentAgents } from '@rocket.chat/core-typings';
+import { Field, FieldLabel, FieldGroup, FieldRow, TextInput, Button, Box, Icon, Select, ButtonGroup } from '@rocket.chat/fuselage';
+import type { SelectOption } from '@rocket.chat/fuselage';
+import { useStableCallback } from '@rocket.chat/fuselage-hooks';
+import {
+	ContextualbarTitle,
+	ContextualbarClose,
+	ContextualbarHeader,
+	ContextualbarScrollableContent,
+	ContextualbarFooter,
+} from '@rocket.chat/ui-client';
+import { useToastMessageDispatch, useTranslation, useEndpoint, useRouter } from '@rocket.chat/ui-contexts';
+import { useQueryClient } from '@tanstack/react-query';
+import { useId, useMemo } from 'react';
+import { useForm, Controller, FormProvider } from 'react-hook-form';
+
+import { getUserEmailAddress } from '../../../../lib/getUserEmailAddress';
+import { UserInfoAvatar } from '../../../components/UserInfo';
+import { omnichannelQueryKeys } from '../../../lib/queryKeys';
+import { MaxChatsPerAgent } from '../additionalForms';
+import AutoCompleteDepartmentMultiple from '../components/AutoCompleteDepartmentMultiple';
+
+type AgentEditFormData = {
+	name: string | undefined;
+	username: string | undefined;
+	email: string | undefined;
+	departments: { label: string; value: string }[];
+	status: ILivechatAgentStatus;
+	maxNumberSimultaneousChat: number;
+};
+
+export type AgentEditProps = {
+	agentData: Pick<ILivechatAgent, '_id' | 'username' | 'name' | 'status' | 'statusLivechat' | 'emails' | 'livechat'>;
+	agentDepartments: (Pick<ILivechatDepartmentAgents, 'departmentId'> & { departmentName: string })[];
+};
+
+const AgentEdit = ({ agentData, agentDepartments }: AgentEditProps) => {
+	const t = useTranslation();
+	const router = useRouter();
+	const queryClient = useQueryClient();
+
+	const dispatchToastMessage = useToastMessageDispatch();
+
+	const { name, username, livechat, statusLivechat } = agentData;
+
+	const email = getUserEmailAddress(agentData);
+
+	const statusOptions: SelectOption[] = useMemo(
+		() => [
+			['available', t('Available')],
+			['not-available', t('Not_Available')],
+		],
+		[t],
+	);
+
+	const initialDepartmentValue = useMemo(
+		() => agentDepartments.map(({ departmentName, departmentId }) => ({ label: departmentName, value: departmentId })) || [],
+		[agentDepartments],
+	);
+
+	const methods = useForm<AgentEditFormData>({
+		values: {
+			name,
+			username,
+			email,
+			departments: initialDepartmentValue,
+			status: statusLivechat,
+			maxNumberSimultaneousChat: livechat?.maxNumberSimultaneousChat || 0,
+		},
+	});
+
+	const {
+		control,
+		handleSubmit,
+		reset,
+		formState: { isDirty },
+	} = methods;
+
+	const saveAgentInfo = useEndpoint('POST', '/v1/livechat/agents.saveInfo');
+	const saveAgentStatus = useEndpoint('POST', '/v1/livechat/agent.status');
+
+	const handleSave = useStableCallback(async ({ status, departments, ...data }: AgentEditFormData) => {
+		try {
+			await saveAgentStatus({ agentId: agentData._id, status });
+			await saveAgentInfo({
+				agentId: agentData._id,
+				agentData: data,
+				agentDepartments: departments.map((dep) => dep.value),
+			});
+			dispatchToastMessage({ type: 'success', message: t('Success') });
+			router.navigate('/omnichannel/agents');
+
+			queryClient.invalidateQueries({ queryKey: omnichannelQueryKeys.agents() });
+			queryClient.invalidateQueries({ queryKey: omnichannelQueryKeys.agentDepartments(agentData._id) });
+		} catch (error) {
+			dispatchToastMessage({ type: 'error', message: error });
+		}
+	});
+
+	const formId = useId();
+	const nameField = useId();
+	const usernameField = useId();
+	const emailField = useId();
+	const departmentsFieldId = useId();
+	const statusField = useId();
+
+	return (
+		<>
+			<ContextualbarHeader>
+				<ContextualbarTitle>{t('Edit_User')}</ContextualbarTitle>
+				<ContextualbarClose onClick={() => router.navigate('/omnichannel/agents')} />
+			</ContextualbarHeader>
+			<ContextualbarScrollableContent>
+				<FormProvider {...methods}>
+					<form id={formId} onSubmit={handleSubmit(handleSave)}>
+						{username && (
+							<Box display='flex' flexDirection='column' alignItems='center'>
+								<UserInfoAvatar username={username} />
+							</Box>
+						)}
+						<FieldGroup>
+							<Field>
+								<FieldLabel htmlFor={nameField}>{t('Name')}</FieldLabel>
+								<FieldRow>
+									<Controller name='name' control={control} render={({ field }) => <TextInput id={nameField} {...field} readOnly />} />
+								</FieldRow>
+							</Field>
+							<Field>
+								<FieldLabel htmlFor={usernameField}>{t('Username')}</FieldLabel>
+								<FieldRow>
+									<Controller
+										name='username'
+										control={control}
+										render={({ field }) => <TextInput id={usernameField} {...field} readOnly endAddon={<Icon name='at' size='x20' />} />}
+									/>
+								</FieldRow>
+							</Field>
+							<Field>
+								<FieldLabel htmlFor={emailField}>{t('Email')}</FieldLabel>
+								<FieldRow>
+									<Controller
+										name='email'
+										control={control}
+										render={({ field }) => <TextInput id={emailField} {...field} readOnly endAddon={<Icon name='mail' size='x20' />} />}
+									/>
+								</FieldRow>
+							</Field>
+							<Field>
+								<FieldLabel id={departmentsFieldId}>{t('Departments')}</FieldLabel>
+								<FieldRow>
+									<Controller
+										name='departments'
+										control={control}
+										render={({ field }) => (
+											<AutoCompleteDepartmentMultiple aria-labelledby={departmentsFieldId} withCheckbox showArchived {...field} />
+										)}
+									/>
+								</FieldRow>
+							</Field>
+							<Field>
+								<FieldLabel htmlFor={statusField}>{t('Status')}</FieldLabel>
+								<FieldRow>
+									<Controller
+										name='status'
+										control={control}
+										render={({ field }) => (
+											<Select id={statusField} {...field} options={statusOptions} placeholder={t('Select_an_option')} />
+										)}
+									/>
+								</FieldRow>
+							</Field>
+							{MaxChatsPerAgent && <MaxChatsPerAgent />}
+						</FieldGroup>
+					</form>
+				</FormProvider>
+			</ContextualbarScrollableContent>
+			<ContextualbarFooter>
+				<ButtonGroup stretch>
+					<Button type='reset' disabled={!isDirty} onClick={() => reset()}>
+						{t('Reset')}
+					</Button>
+					<Button form={formId} primary type='submit' disabled={!isDirty}>
+						{t('Save')}
+					</Button>
+				</ButtonGroup>
+			</ContextualbarFooter>
+		</>
+	);
+};
+
+export default AgentEdit;

apps/meteor/client/views/omnichannel/agents/AgentEditWithData.tsx

@@ -0,0 +1,46 @@
+import type { ILivechatAgent } from '@rocket.chat/core-typings';
+import { Box } from '@rocket.chat/fuselage';
+import { ContextualbarSkeletonBody } from '@rocket.chat/ui-client';
+import { useEndpoint } from '@rocket.chat/ui-contexts';
+import { useQuery } from '@tanstack/react-query';
+import { useTranslation } from 'react-i18next';
+
+import AgentEdit from './AgentEdit';
+import { omnichannelQueryKeys } from '../../../lib/queryKeys';
+
+export type AgentEditWithDataProps = { uid: ILivechatAgent['_id'] };
+
+const AgentEditWithData = ({ uid }: AgentEditWithDataProps) => {
+	const { t } = useTranslation();
+
+	const getAgentById = useEndpoint('GET', '/v1/livechat/users/agent/:_id', { _id: uid });
+	const getAgentDepartments = useEndpoint('GET', '/v1/livechat/agents/:agentId/departments', { agentId: uid });
+
+	const { data, isPending, error } = useQuery({
+		queryKey: ['livechat-getAgentById', uid],
+		queryFn: async () => getAgentById(),
+		refetchOnWindowFocus: false,
+	});
+
+	const {
+		data: agentDepartments,
+		isPending: agentDepartmentsLoading,
+		error: agentsDepartmentsError,
+	} = useQuery({
+		queryKey: omnichannelQueryKeys.agentDepartments(uid),
+		queryFn: async () => getAgentDepartments(),
+		refetchOnWindowFocus: false,
+	});
+
+	if (isPending || agentDepartmentsLoading || !agentDepartments) {
+		return <ContextualbarSkeletonBody />;
+	}
+
+	if (error || agentsDepartmentsError || !data?.user) {
+		return <Box padding={16}>{t('User_not_found')}</Box>;
+	}
+
+	return <AgentEdit agentData={data.user} agentDepartments={agentDepartments.departments} />;
+};
+
+export default AgentEditWithData;

apps/meteor/client/views/omnichannel/agents/AgentInfo.tsx

@@ -0,0 +1,87 @@
+import { Box, Margins, ButtonGroup } from '@rocket.chat/fuselage';
+import {
+	ContextualbarTitle,
+	ContextualbarClose,
+	ContextualbarHeader,
+	ContextualbarScrollableContent,
+	ContextualbarSkeletonBody,
+	InfoPanelLabel,
+	InfoPanelText,
+} from '@rocket.chat/ui-client';
+import { useEndpoint, useRouter } from '@rocket.chat/ui-contexts';
+import { useQuery } from '@tanstack/react-query';
+import type { HTMLAttributes } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import AgentInfoAction from './AgentInfoAction';
+import { useRemoveAgent } from './hooks/useRemoveAgent';
+import { UserInfoAvatar, UserInfoUsername } from '../../../components/UserInfo';
+import { UserStatus } from '../../../components/UserStatus';
+import { MaxChatsPerAgentDisplay } from '../additionalForms';
+
+export type AgentInfoProps = {
+	uid: string;
+} & Omit<HTMLAttributes<HTMLElement>, 'is'>;
+
+const AgentInfo = ({ uid }: AgentInfoProps) => {
+	const { t } = useTranslation();
+	const router = useRouter();
+	const getAgentById = useEndpoint('GET', '/v1/livechat/users/agent/:_id', { _id: uid });
+	const { data, isPending, isError } = useQuery({
+		queryKey: ['livechat-getAgentInfoById', uid],
+		queryFn: async () => getAgentById(),
+		refetchOnWindowFocus: false,
+	});
+
+	const handleDelete = useRemoveAgent(uid);
+
+	if (isPending) {
+		return <ContextualbarSkeletonBody />;
+	}
+
+	if (isError) {
+		return <Box marginBlockStart={16}>{t('User_not_found')}</Box>;
+	}
+
+	const { username, statusLivechat, status: userStatus } = data?.user;
+
+	return (
+		<>
+			<ContextualbarHeader>
+				<ContextualbarTitle>{t('User_Info')}</ContextualbarTitle>
+				<ContextualbarClose onClick={() => router.navigate('/omnichannel/agents')} />
+			</ContextualbarHeader>
+			<ContextualbarScrollableContent>
+				{username && (
+					<Box alignSelf='center'>
+						<UserInfoAvatar username={username} />
+					</Box>
+				)}
+				<ButtonGroup align='center'>
+					<AgentInfoAction
+						key={t('Edit')}
+						title={t('Edit')}
+						label={t('Edit')}
+						onClick={() => router.navigate(`/omnichannel/agents/edit/${uid}`)}
+						icon='edit'
+					/>
+					<AgentInfoAction key={t('Remove')} title={t('Remove')} label={t('Remove')} onClick={handleDelete} icon='trash' />
+				</ButtonGroup>
+				<Margins block={4}>
+					<Box marginBlock={2}>
+						<UserInfoUsername username={username} status={<UserStatus status={userStatus} />} />
+					</Box>
+					{statusLivechat && (
+						<>
+							<InfoPanelLabel>{t('Livechat_status')}</InfoPanelLabel>
+							<InfoPanelText>{statusLivechat === 'available' ? t('Available') : t('Not_Available')}</InfoPanelText>
+						</>
+					)}
+					{MaxChatsPerAgentDisplay && <MaxChatsPerAgentDisplay maxNumberSimultaneousChat={data.user.livechat?.maxNumberSimultaneousChat} />}
+				</Margins>
+			</ContextualbarScrollableContent>
+		</>
+	);
+};
+
+export default AgentInfo;

apps/meteor/client/views/omnichannel/agents/AgentInfoAction.tsx

@@ -0,0 +1,17 @@
+import { Button } from '@rocket.chat/fuselage';
+import type { Keys as IconName } from '@rocket.chat/icons';
+import type { HTMLAttributes } from 'react';
+
+export type AgentInfoActionProps = {
+	icon: IconName;
+	label?: string;
+	title?: string;
+} & Omit<HTMLAttributes<HTMLElement>, 'is'>;
+
+const AgentInfoAction = ({ icon, label, ...props }: AgentInfoActionProps) => (
+	<Button icon={icon} title={label} {...props}>
+		{label}
+	</Button>
+);
+
+export default AgentInfoAction;

apps/meteor/client/views/omnichannel/agents/AgentsPage.tsx

@@ -0,0 +1,42 @@
+import { useStableCallback } from '@rocket.chat/fuselage-hooks';
+import { ContextualbarDialog, Page, PageHeader, PageContent } from '@rocket.chat/ui-client';
+import { usePermission, useRouteParameter, useRouter } from '@rocket.chat/ui-contexts';
+import { useTranslation } from 'react-i18next';
+
+import AgentEditWithData from './AgentEditWithData';
+import AgentInfo from './AgentInfo';
+import AgentsTable from './AgentsTable';
+import NotAuthorizedPage from '../../notAuthorized/NotAuthorizedPage';
+
+const AgentsPage = () => {
+	const { t } = useTranslation();
+	const canViewAgents = usePermission('manage-livechat-agents');
+
+	const context = useRouteParameter('context');
+	const id = useRouteParameter('id');
+	const router = useRouter();
+	const handleCloseContextualbar = useStableCallback(() => router.navigate('/omnichannel/agents'));
+
+	if (!canViewAgents) {
+		return <NotAuthorizedPage />;
+	}
+
+	return (
+		<Page flexDirection='row'>
+			<Page>
+				<PageHeader title={t('Agents')} />
+				<PageContent>
+					<AgentsTable />
+				</PageContent>
+			</Page>
+			{context && (
+				<ContextualbarDialog onClose={handleCloseContextualbar}>
+					{id && context === 'edit' && <AgentEditWithData uid={id} />}
+					{id && context === 'info' && <AgentInfo uid={id} />}
+				</ContextualbarDialog>
+			)}
+		</Page>
+	);
+};
+
+export default AgentsPage;

apps/meteor/client/views/omnichannel/agents/AgentsTable/AddAgent.tsx

@@ -0,0 +1,53 @@
+import { Button, Box, Field, FieldLabel, FieldRow } from '@rocket.chat/fuselage';
+import { useStableCallback } from '@rocket.chat/fuselage-hooks';
+import { UserAutoComplete } from '@rocket.chat/ui-client';
+import { useToastMessageDispatch } from '@rocket.chat/ui-contexts';
+import { useQueryClient } from '@tanstack/react-query';
+import { useId, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { useEndpointMutation } from '../../../../hooks/useEndpointMutation';
+import { omnichannelQueryKeys } from '../../../../lib/queryKeys';
+
+const AddAgent = () => {
+	const { t } = useTranslation();
+	const [username, setUsername] = useState('');
+	const dispatchToastMessage = useToastMessageDispatch();
+	const queryClient = useQueryClient();
+
+	const usernameFieldId = useId();
+
+	const { mutateAsync: saveAction } = useEndpointMutation('POST', '/v1/livechat/users/agent', {
+		onSuccess: () => {
+			queryClient.invalidateQueries({ queryKey: omnichannelQueryKeys.agents() });
+			setUsername('');
+			dispatchToastMessage({ type: 'success', message: t('Agent_added') });
+		},
+	});
+
+	const handleSave = useStableCallback(async () => {
+		await saveAction({ username });
+	});
+
+	const handleChange = (value: unknown): void => {
+		if (typeof value === 'string') {
+			setUsername(value);
+		}
+	};
+
+	return (
+		<Box display='flex' alignItems='center'>
+			<Field>
+				<FieldLabel htmlFor={usernameFieldId}>{t('Username')}</FieldLabel>
+				<FieldRow>
+					<UserAutoComplete id={usernameFieldId} value={username} onChange={handleChange} />
+					<Button disabled={!username} onClick={handleSave} marginInlineStart={8} primary>
+						{t('Add_agent')}
+					</Button>
+				</FieldRow>
+			</Field>
+		</Box>
+	);
+};
+
+export default AddAgent;

apps/meteor/client/views/omnichannel/agents/AgentsTable/AgentsTable.tsx

@@ -0,0 +1,123 @@
+import { Pagination } from '@rocket.chat/fuselage';
+import { useDebouncedValue, useMediaQuery, useStableCallback } from '@rocket.chat/fuselage-hooks';
+import {
+	GenericTable,
+	GenericTableBody,
+	GenericTableHeader,
+	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 AddAgent from './AddAgent';
+import AgentsTableRow from './AgentsTableRow';
+import FilterByText from '../../../../components/FilterByText';
+import GenericError from '../../../../components/GenericError';
+import GenericNoResults from '../../../../components/GenericNoResults/GenericNoResults';
+import { links } from '../../../../lib/links';
+import { useAgentsQuery } from '../hooks/useAgentsQuery';
+import { useQuery } from '../hooks/useQuery';
+
+const AgentsTable = () => {
+	const { t } = useTranslation();
+
+	const { sortBy, sortDirection, setSort } = useSort<'name' | 'username' | 'emails.address' | 'statusLivechat'>('name');
+	const [text, setText] = useState('');
+	const debouncedSort = useDebouncedValue(
+		useMemo(() => [sortBy, sortDirection], [sortBy, sortDirection]),
+		500,
+	) as ['name' | 'username' | 'emails.address' | 'statusLivechat', 'asc' | 'desc'];
+
+	const { current, itemsPerPage, setItemsPerPage, setCurrent, ...paginationProps } = usePagination();
+
+	const query = useQuery({ text, current, itemsPerPage }, debouncedSort);
+	const { data, isSuccess, isLoading, isError, refetch } = useAgentsQuery(query);
+
+	const [defaultQuery] = useState(hashKey([query]));
+	const queryHasChanged = defaultQuery !== hashKey([query]);
+
+	const onHeaderClick = useStableCallback((id: 'name' | 'username' | 'emails.address' | 'statusLivechat') => {
+		if (sortBy === id) {
+			setSort(id, sortDirection === 'asc' ? 'desc' : 'asc');
+			return;
+		}
+		setSort(id, 'asc');
+	});
+
+	const mediaQuery = useMediaQuery('(min-width: 1024px)');
+
+	const headers = (
+		<>
+			<GenericTableHeaderCell direction={sortDirection} sort='name' active={sortBy === 'name'} onClick={onHeaderClick}>
+				{t('Name')}
+			</GenericTableHeaderCell>
+			{mediaQuery && (
+				<GenericTableHeaderCell direction={sortDirection} sort='username' active={sortBy === 'username'} onClick={onHeaderClick}>
+					{t('Username')}
+				</GenericTableHeaderCell>
+			)}
+			<GenericTableHeaderCell direction={sortDirection} sort='emails.address' active={sortBy === 'emails.address'} onClick={onHeaderClick}>
+				{t('Email')}
+			</GenericTableHeaderCell>
+			<GenericTableHeaderCell direction={sortDirection} sort='statusLivechat' active={sortBy === 'statusLivechat'} onClick={onHeaderClick}>
+				{t('Livechat_status')}
+			</GenericTableHeaderCell>
+			<GenericTableHeaderCell width='x60'>{t('Remove')}</GenericTableHeaderCell>
+		</>
+	);
+
+	return (
+		<>
+			<AddAgent />
+			{((isSuccess && data?.users.length > 0) || queryHasChanged) && (
+				<FilterByText value={text} onChange={(event) => setText(event.target.value)} />
+			)}
+			{isLoading && (
+				<GenericTable>
+					<GenericTableHeader>{headers}</GenericTableHeader>
+					<GenericTableBody>
+						<GenericTableLoadingTable headerCells={mediaQuery ? 4 : 3} />
+					</GenericTableBody>
+				</GenericTable>
+			)}
+			{isSuccess && data?.users.length === 0 && queryHasChanged && <GenericNoResults />}
+			{isSuccess && data.users.length === 0 && !queryHasChanged && (
+				<GenericNoResults
+					icon='headset'
+					title={t('No_agents_yet')}
+					description={t('No_agents_yet_description')}
+					linkHref={links.go.omnichannelDocs}
+					linkText={t('Learn_more_about_agents')}
+				/>
+			)}
+			{isSuccess && data?.users.length > 0 && (
+				<>
+					<GenericTable aria-label={t('Agents')} aria-busy={isLoading}>
+						<GenericTableHeader>{headers}</GenericTableHeader>
+						<GenericTableBody>
+							{data?.users.map((user) => (
+								<AgentsTableRow key={user._id} user={user} mediaQuery={mediaQuery} />
+							))}
+						</GenericTableBody>
+					</GenericTable>
+					<Pagination
+						divider
+						current={current}
+						itemsPerPage={itemsPerPage}
+						count={data?.total || 0}
+						onSetItemsPerPage={setItemsPerPage}
+						onSetCurrent={setCurrent}
+						{...paginationProps}
+					/>
+				</>
+			)}
+			{isError && <GenericError buttonAction={refetch} />}
+		</>
+	);
+};
+
+export default AgentsTable;

apps/meteor/client/views/omnichannel/agents/AgentsTable/AgentsTableRow.tsx

@@ -0,0 +1,72 @@
+import { Box, IconButton } from '@rocket.chat/fuselage';
+import { UserAvatar } from '@rocket.chat/ui-avatar';
+import { GenericTableRow, GenericTableCell } from '@rocket.chat/ui-client';
+import { useRouter } from '@rocket.chat/ui-contexts';
+import { useTranslation } from 'react-i18next';
+
+import { useRemoveAgent } from '../hooks/useRemoveAgent';
+
+const AgentsTableRow = ({
+	user: { _id, name, username, avatarETag, emails, statusLivechat },
+	mediaQuery,
+}: {
+	user: {
+		_id: string;
+		name?: string;
+		username?: string;
+		avatarETag?: string;
+		emails?: { address: string }[];
+		statusLivechat: string;
+	};
+	mediaQuery: boolean;
+}) => {
+	const { t } = useTranslation();
+	const router = useRouter();
+
+	const handleDelete = useRemoveAgent(_id);
+
+	return (
+		<GenericTableRow action onClick={() => router.navigate(`/omnichannel/agents/info/${_id}`)}>
+			<GenericTableCell>
+				<Box display='flex' alignItems='center'>
+					{username && <UserAvatar size={mediaQuery ? 'x28' : 'x40'} title={username} username={username} etag={avatarETag} />}
+					<Box display='flex' withTruncatedText marginInline={8}>
+						<Box display='flex' flexDirection='column' alignSelf='center' withTruncatedText>
+							<Box fontScale='p2m' withTruncatedText color='default'>
+								{name || username}
+							</Box>
+							{!mediaQuery && name && (
+								<Box fontScale='p2' color='hint' withTruncatedText>
+									{`@${username}`}
+								</Box>
+							)}
+						</Box>
+					</Box>
+				</Box>
+			</GenericTableCell>
+			{mediaQuery && (
+				<GenericTableCell>
+					<Box fontScale='p2m' withTruncatedText color='hint'>
+						{username}
+					</Box>
+					<Box marginInline={4} />
+				</GenericTableCell>
+			)}
+			<GenericTableCell withTruncatedText>{emails?.length && emails[0].address}</GenericTableCell>
+			<GenericTableCell withTruncatedText>{statusLivechat === 'available' ? t('Available') : t('Not_Available')}</GenericTableCell>
+			<GenericTableCell withTruncatedText>
+				<IconButton
+					icon='trash'
+					small
+					title={t('Remove')}
+					onClick={(e) => {
+						e.stopPropagation();
+						handleDelete();
+					}}
+				/>
+			</GenericTableCell>
+		</GenericTableRow>
+	);
+};
+
+export default AgentsTableRow;

apps/meteor/client/views/omnichannel/agents/AgentsTable/index.ts

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

apps/meteor/client/views/omnichannel/agents/hooks/useAgentsQuery.ts

@@ -0,0 +1,14 @@
+import type { PaginatedRequest } from '@rocket.chat/rest-typings';
+import { useEndpoint } from '@rocket.chat/ui-contexts';
+import { useQuery } from '@tanstack/react-query';
+
+import { omnichannelQueryKeys } from '../../../../lib/queryKeys';
+
+export const useAgentsQuery = (query: PaginatedRequest = {}) => {
+	const getAgents = useEndpoint('GET', '/v1/livechat/users/agent');
+
+	return useQuery({
+		queryKey: omnichannelQueryKeys.agents(query),
+		queryFn: () => getAgents(query),
+	});
+};

apps/meteor/client/views/omnichannel/agents/hooks/useQuery.ts

@@ -0,0 +1,33 @@
+import { useDebouncedValue } from '@rocket.chat/fuselage-hooks';
+import type { PaginatedRequest } from '@rocket.chat/rest-typings';
+import { useMemo } from 'react';
+
+const sortDir = (sortDir: 'asc' | 'desc'): 1 | -1 => (sortDir === 'asc' ? 1 : -1);
+
+export const useQuery = (
+	{
+		text,
+		itemsPerPage,
+		current,
+	}: {
+		text: string;
+		itemsPerPage: number;
+		current: number;
+	},
+	[column, direction]: [string, 'asc' | 'desc'],
+): PaginatedRequest<{ text: string }> =>
+	useDebouncedValue(
+		useMemo(
+			() => ({
+				text,
+				sort: JSON.stringify({
+					[column]: sortDir(direction),
+					usernames: column === 'name' ? sortDir(direction) : undefined,
+				}),
+				...(itemsPerPage && { count: itemsPerPage }),
+				...(current && { offset: current }),
+			}),
+			[text, itemsPerPage, current, column, direction],
+		),
+		500,
+	);

apps/meteor/client/views/omnichannel/agents/hooks/useRemoveAgent.tsx

@@ -0,0 +1,37 @@
+import type { ILivechatAgent } from '@rocket.chat/core-typings';
+import { useStableCallback } from '@rocket.chat/fuselage-hooks';
+import { GenericModal } from '@rocket.chat/ui-client';
+import { useSetModal, useToastMessageDispatch, useTranslation, useRouter, useEndpoint } from '@rocket.chat/ui-contexts';
+import { useQueryClient } from '@tanstack/react-query';
+
+import { omnichannelQueryKeys } from '../../../../lib/queryKeys';
+
+export const useRemoveAgent = (uid: ILivechatAgent['_id']) => {
+	const t = useTranslation();
+	const router = useRouter();
+	const setModal = useSetModal();
+	const queryClient = useQueryClient();
+	const dispatchToastMessage = useToastMessageDispatch();
+
+	const deleteAction = useEndpoint('DELETE', '/v1/livechat/users/agent/:_id', { _id: uid });
+
+	const handleDelete = useStableCallback(() => {
+		const onDeleteAgent = async () => {
+			try {
+				await deleteAction();
+				dispatchToastMessage({ type: 'success', message: t('Agent_removed') });
+				router.navigate('/omnichannel/agents');
+				queryClient.invalidateQueries({ queryKey: omnichannelQueryKeys.agents() });
+				queryClient.invalidateQueries({ queryKey: omnichannelQueryKeys.agentDepartments(uid) });
+			} catch (error) {
+				dispatchToastMessage({ type: 'error', message: error });
+			} finally {
+				setModal();
+			}
+		};
+
+		setModal(<GenericModal variant='danger' onConfirm={onDeleteAgent} onCancel={() => setModal()} confirmText={t('Delete')} />);
+	});
+
+	return handleDelete;
+};