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

apps/meteor/client/views/omnichannel/contactInfo/tabs/ContactInfoChannels/BlockChannelModal.tsx

@@ -0,0 +1,20 @@
+import { Box } from '@rocket.chat/fuselage';
+import { GenericModal } from '@rocket.chat/ui-client';
+import { useTranslation } from 'react-i18next';
+
+export type BlockChannelModalProps = {
+	onCancel: () => void;
+	onConfirm: () => void;
+};
+
+const BlockChannelModal = ({ onCancel, onConfirm }: BlockChannelModalProps) => {
+	const { t } = useTranslation();
+
+	return (
+		<GenericModal variant='danger' icon='ban' title={t('Block_channel')} confirmText={t('Block')} onConfirm={onConfirm} onCancel={onCancel}>
+			<Box>{t('Block_channel_description')}</Box>
+		</GenericModal>
+	);
+};
+
+export default BlockChannelModal;

apps/meteor/client/views/omnichannel/contactInfo/tabs/ContactInfoChannels/ContactInfoChannels.tsx

@@ -0,0 +1,83 @@
+import type { ILivechatContact } from '@rocket.chat/core-typings';
+import { Box, States, StatesIcon, StatesTitle, Throbber } from '@rocket.chat/fuselage';
+import { VirtualizedScrollbars, ContextualbarContent, ContextualbarEmptyContent } from '@rocket.chat/ui-client';
+import { useEndpoint } from '@rocket.chat/ui-contexts';
+import { useQuery } from '@tanstack/react-query';
+import { useTranslation } from 'react-i18next';
+import { Virtuoso } from 'react-virtuoso';
+
+import ContactInfoChannelsItem from './ContactInfoChannelsItem';
+import useOutboundProvidersList from '../../../components/outboundMessage/hooks/useOutboundProvidersList';
+
+export type ContactInfoChannelsProps = {
+	contact: Pick<ILivechatContact, '_id' | 'unknown'>;
+};
+
+const ContactInfoChannels = ({ contact }: ContactInfoChannelsProps) => {
+	const { t } = useTranslation();
+
+	const getContactChannels = useEndpoint('GET', '/v1/omnichannel/contacts.channels');
+	const { data, isError, isPending } = useQuery({
+		queryKey: ['getContactChannels', contact._id],
+		queryFn: () => getContactChannels({ contactId: contact._id }),
+	});
+
+	const { data: providers = [] } = useOutboundProvidersList({
+		select: (data) => data.providers.map((provider) => provider.providerId),
+	});
+
+	if (isPending) {
+		return (
+			<ContextualbarContent>
+				<Box paddingBlock={12}>
+					<Throbber size='x12' />
+				</Box>
+			</ContextualbarContent>
+		);
+	}
+
+	if (isError) {
+		return (
+			<ContextualbarContent paddingInline={0}>
+				<States>
+					<StatesIcon name='warning' variation='danger' />
+					<StatesTitle>{t('Something_went_wrong')}</StatesTitle>
+				</States>
+			</ContextualbarContent>
+		);
+	}
+
+	return (
+		<ContextualbarContent paddingInline={0}>
+			{data.channels?.length === 0 && (
+				<ContextualbarEmptyContent icon='balloon' title={t('No_channels_yet')} subtitle={t('No_channels_yet_description')} />
+			)}
+			{data.channels && data.channels.length > 0 && (
+				<>
+					<Box is='span' fontScale='p2' paddingBlockStart={24} paddingInlineStart={24} marginBlockEnd={8}>
+						{t('Last_contacts')}
+					</Box>
+					<Box role='list' flexGrow={1} flexShrink={1} overflow='hidden' display='flex'>
+						<VirtualizedScrollbars>
+							<Virtuoso
+								totalCount={data.channels.length}
+								overscan={25}
+								data={data?.channels}
+								itemContent={(index, data) => (
+									<ContactInfoChannelsItem
+										key={index}
+										{...data}
+										contact={contact}
+										canSendOutboundMessage={data.details.id ? providers.includes(data.details.id) : false}
+									/>
+								)}
+							/>
+						</VirtualizedScrollbars>
+					</Box>
+				</>
+			)}
+		</ContextualbarContent>
+	);
+};
+
+export default ContactInfoChannels;

apps/meteor/client/views/omnichannel/contactInfo/tabs/ContactInfoChannels/ContactInfoChannelsItem.tsx

@@ -0,0 +1,118 @@
+import type { ILivechatContact, ILivechatContactChannel, Serialized } from '@rocket.chat/core-typings';
+import { css } from '@rocket.chat/css-in-js';
+import { Box, Palette } from '@rocket.chat/fuselage';
+import type { GenericMenuItemProps } from '@rocket.chat/ui-client';
+import { GenericMenu } from '@rocket.chat/ui-client';
+import { useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { useBlockChannel } from './useBlockChannel';
+import { OmnichannelRoomIcon } from '../../../../../components/RoomIcon/OmnichannelRoomIcon';
+import { useTimeFromNow } from '../../../../../hooks/useTimeFromNow';
+import { useOutboundMessageModal } from '../../../components/outboundMessage/modals/OutboundMessageModal';
+import { useVisitorInfo } from '../../../directory/hooks/useVisitorInfo';
+import { useOmnichannelSource } from '../../../hooks/useOmnichannelSource';
+
+export type ContactInfoChannelsItemProps = Serialized<ILivechatContactChannel> & {
+	contact?: Pick<ILivechatContact, '_id' | 'unknown'>;
+	canSendOutboundMessage?: boolean;
+};
+
+const ContactInfoChannelsItem = ({
+	contact,
+	visitor,
+	details,
+	blocked,
+	lastChat,
+	canSendOutboundMessage,
+}: ContactInfoChannelsItemProps) => {
+	const { t } = useTranslation();
+	const { getSourceLabel, getSourceName } = useOmnichannelSource();
+	const getTimeFromNow = useTimeFromNow(true);
+
+	const { data: visitorData } = useVisitorInfo(visitor.visitorId);
+
+	const channelLabel = useMemo(() => {
+		const phone = getSourceLabel(details);
+		const externalId = details?.id ? visitorData?.externalIds?.find((e) => e.appId === details.id) : undefined;
+		const username = externalId?.metadata?.username;
+
+		if (typeof username === 'string' && phone) {
+			return `${username} - ${phone}`;
+		}
+		return typeof username === 'string' ? username : phone;
+	}, [visitorData?.externalIds, details, getSourceLabel]);
+
+	const [showButton, setShowButton] = useState(false);
+	const handleBlockContact = useBlockChannel({ association: visitor, blocked });
+	const outboundMessageModal = useOutboundMessageModal();
+
+	const customClass = css`
+		&:hover,
+		&:focus {
+			background: ${Palette.surface['surface-hover']};
+		}
+	`;
+
+	const menuItems = useMemo(() => {
+		const items: GenericMenuItemProps[] = [
+			{
+				id: 'block',
+				icon: 'ban',
+				content: blocked ? t('Unblock') : t('Block'),
+				variant: 'danger',
+				onClick: handleBlockContact,
+			},
+		];
+
+		if (canSendOutboundMessage) {
+			items.unshift({
+				id: 'outbound-message',
+				icon: 'send',
+				disabled: contact?.unknown,
+				tooltip: contact?.unknown ? t('error-unknown-contact') : undefined,
+				content: t('Outbound_message'),
+				onClick: () => outboundMessageModal.open({ contactId: contact?._id, providerId: details.id }),
+			});
+		}
+
+		return items;
+	}, [blocked, canSendOutboundMessage, contact?._id, contact?.unknown, details.id, handleBlockContact, outboundMessageModal, t]);
+
+	return (
+		<Box
+			tabIndex={0}
+			borderBlockEndWidth={1}
+			borderBlockEndColor='stroke-extra-light'
+			borderBlockEndStyle='solid'
+			className={['rcx-box--animated', customClass]}
+			paddingInline={24}
+			paddingBlock={12}
+			display='flex'
+			flexDirection='column'
+			onFocus={() => setShowButton(true)}
+			onPointerEnter={() => setShowButton(true)}
+			onPointerLeave={() => setShowButton(false)}
+		>
+			<Box display='flex' alignItems='center'>
+				{details && <OmnichannelRoomIcon source={details} size='x18' placement='default' />}
+				{details && (
+					<Box marginInline={4} fontScale='p2b'>
+						{getSourceName(details)} {blocked && `(${t('Blocked')})`}
+					</Box>
+				)}
+				{lastChat && (
+					<Box marginInlineStart={4} fontScale='c1'>
+						{getTimeFromNow(lastChat.ts)}
+					</Box>
+				)}
+			</Box>
+			<Box minHeight='x24' alignItems='center' marginBlockStart={4} display='flex' justifyContent='space-between'>
+				<Box>{channelLabel}</Box>
+				{showButton && <GenericMenu detached title={t('Options')} sections={[{ items: menuItems }]} tiny />}
+			</Box>
+		</Box>
+	);
+};
+
+export default ContactInfoChannelsItem;

apps/meteor/client/views/omnichannel/contactInfo/tabs/ContactInfoChannels/index.ts

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

apps/meteor/client/views/omnichannel/contactInfo/tabs/ContactInfoChannels/useBlockChannel.tsx

@@ -0,0 +1,52 @@
+import type { ILivechatContactVisitorAssociation } from '@rocket.chat/core-typings';
+import { useEndpoint, useSetModal, useToastMessageDispatch } from '@rocket.chat/ui-contexts';
+import { useQueryClient } from '@tanstack/react-query';
+import { useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import BlockChannelModal from './BlockChannelModal';
+import { useHasLicenseModule } from '../../../../../hooks/useHasLicenseModule';
+import AdvancedContactModal from '../../AdvancedContactModal';
+
+export const useBlockChannel = ({ blocked, association }: { blocked: boolean; association: ILivechatContactVisitorAssociation }) => {
+	const { t } = useTranslation();
+	const setModal = useSetModal();
+	const dispatchToastMessage = useToastMessageDispatch();
+	const { data: hasLicense = false } = useHasLicenseModule('contact-id-verification');
+	const queryClient = useQueryClient();
+
+	const blockContact = useEndpoint('POST', '/v1/omnichannel/contacts.block');
+	const unblockContact = useEndpoint('POST', '/v1/omnichannel/contacts.unblock');
+
+	const handleUnblock = useCallback(async () => {
+		try {
+			await unblockContact({ visitor: association });
+			dispatchToastMessage({ type: 'success', message: t('Contact_unblocked') });
+			queryClient.invalidateQueries({ queryKey: ['getContactById'] });
+		} catch (error) {
+			dispatchToastMessage({ type: 'error', message: error });
+		}
+	}, [association, dispatchToastMessage, queryClient, t, unblockContact]);
+
+	const handleBlock = useCallback(() => {
+		if (!hasLicense) {
+			return setModal(<AdvancedContactModal onCancel={() => setModal(null)} />);
+		}
+
+		const blockAction = async () => {
+			try {
+				await blockContact({ visitor: association });
+				dispatchToastMessage({ type: 'success', message: t('Contact_blocked') });
+				queryClient.invalidateQueries({ queryKey: ['getContactById'] });
+			} catch (error) {
+				dispatchToastMessage({ type: 'error', message: error });
+			} finally {
+				setModal(null);
+			}
+		};
+
+		setModal(<BlockChannelModal onCancel={() => setModal(null)} onConfirm={blockAction} />);
+	}, [association, blockContact, dispatchToastMessage, hasLicense, queryClient, setModal, t]);
+
+	return blocked ? handleUnblock : handleBlock;
+};

apps/meteor/client/views/omnichannel/contactInfo/tabs/ContactInfoDetails/ContactInfoDetails.tsx

@@ -0,0 +1,75 @@
+import type { ILivechatContact } from '@rocket.chat/core-typings';
+import { Divider, Margins } from '@rocket.chat/fuselage';
+import { ContextualbarScrollableContent } from '@rocket.chat/ui-client';
+import { useTranslation } from 'react-i18next';
+
+import ContactInfoDetailsEntry from './ContactInfoDetailsEntry';
+import ContactInfoPhoneEntry from './ContactInfoPhoneEntry';
+import ContactManagerInfo from './ContactManagerInfo';
+import { useFormatDate } from '../../../../../hooks/useFormatDate';
+import CustomField from '../../../components/CustomField';
+import Field from '../../../components/Field';
+import Info from '../../../components/Info';
+import Label from '../../../components/Label';
+
+export type ContactInfoDetailsProps = {
+	contact: Pick<ILivechatContact, '_id' | 'unknown'>;
+	emails?: string[];
+	phones?: string[];
+	createdAt: string;
+	customFieldEntries: [string, string | unknown][];
+	contactManager?: string;
+};
+
+const ContactInfoDetails = ({ contact, emails, phones, createdAt, customFieldEntries, contactManager }: ContactInfoDetailsProps) => {
+	const { t } = useTranslation();
+	const formatDate = useFormatDate();
+
+	return (
+		<ContextualbarScrollableContent>
+			{emails?.length ? (
+				<Field>
+					<Label id={`${contact._id}-emails`}>{t('Email')}</Label>
+					<ul aria-labelledby={`${contact._id}-emails`}>
+						{emails.map((email) => (
+							<ContactInfoDetailsEntry key={email} is='li' icon='mail' value={email} />
+						))}
+					</ul>
+				</Field>
+			) : null}
+
+			{phones?.length ? (
+				<Field>
+					<Label id={`${contact._id}-phones`}>{t('Phone')}</Label>
+					<ul aria-labelledby={`${contact._id}-phones`}>
+						{phones.map((phone) => (
+							<ContactInfoPhoneEntry key={phone} is='li' contact={contact} value={phone} />
+						))}
+					</ul>
+				</Field>
+			) : null}
+
+			{contactManager ? <ContactManagerInfo userId={contactManager} /> : null}
+
+			<Margins block={4}>
+				{createdAt && (
+					<Field>
+						<Label id={`${contact._id}-created-at`}>{t('Created_at')}</Label>
+						<Info aria-labelledby={`${contact._id}-created-at`}>{formatDate(createdAt)}</Info>
+					</Field>
+				)}
+
+				{customFieldEntries.length > 0 && (
+					<>
+						<Divider marginInline={-24} />
+						{customFieldEntries?.map(([key, value]) => (
+							<CustomField key={key} id={key} value={value as string} />
+						))}
+					</>
+				)}
+			</Margins>
+		</ContextualbarScrollableContent>
+	);
+};
+
+export default ContactInfoDetails;

apps/meteor/client/views/omnichannel/contactInfo/tabs/ContactInfoDetails/ContactInfoDetailsEntry.tsx

@@ -0,0 +1,25 @@
+import type { IconProps } from '@rocket.chat/fuselage';
+import { Box, ButtonGroup, Icon } from '@rocket.chat/fuselage';
+import type { ComponentProps, ReactNode } from 'react';
+
+export type ContactInfoDetailsEntryProps = Pick<ComponentProps<typeof Box>, 'is' | 'aria-labelledby'> & {
+	icon: IconProps['name'];
+	value: string;
+	actions?: ReactNode;
+};
+
+const ContactInfoDetailsEntry = ({ icon, value, actions, ...props }: ContactInfoDetailsEntryProps) => (
+	<Box display='flex' alignItems='center' {...props}>
+		<Icon size='x18' marginInlineEnd={4} name={icon} />
+		<Box withTruncatedText display='flex' flexGrow={1} alignItems='center' justifyContent='space-between'>
+			<Box is='p' fontScale='p2' withTruncatedText marginInline={4}>
+				{value}
+			</Box>
+			<Box display='flex' alignItems='center'>
+				<ButtonGroup>{actions}</ButtonGroup>
+			</Box>
+		</Box>
+	</Box>
+);
+
+export default ContactInfoDetailsEntry;

apps/meteor/client/views/omnichannel/contactInfo/tabs/ContactInfoDetails/ContactInfoOutboundMessageButton.tsx

@@ -0,0 +1,34 @@
+import { IconButton } from '@rocket.chat/fuselage';
+import { useTranslation } from 'react-i18next';
+
+import { useOutboundMessageAccess } from '../../../components/outboundMessage/hooks';
+import type { OutboundMessageModalProps } from '../../../components/outboundMessage/modals/OutboundMessageModal';
+import { useOutboundMessageModal } from '../../../components/outboundMessage/modals/OutboundMessageModal';
+
+export type ContactInfoOutboundMessageButtonProps = {
+	title?: string;
+	disabled?: boolean;
+	defaultValues?: OutboundMessageModalProps['defaultValues'];
+};
+
+const ContactInfoOutboundMessageButton = ({ defaultValues, disabled, title }: ContactInfoOutboundMessageButtonProps) => {
+	const { t } = useTranslation();
+	const outboundMessageModal = useOutboundMessageModal();
+	const canSendOutboundMessage = useOutboundMessageAccess();
+
+	if (!canSendOutboundMessage) {
+		return null;
+	}
+
+	return (
+		<IconButton
+			disabled={disabled}
+			onClick={() => outboundMessageModal.open(defaultValues)}
+			tiny
+			icon='send'
+			title={`${t('Outbound_message')} ${title ? `(${title})` : ''}`}
+		/>
+	);
+};
+
+export default ContactInfoOutboundMessageButton;

apps/meteor/client/views/omnichannel/contactInfo/tabs/ContactInfoDetails/ContactInfoPhoneEntry.tsx

@@ -0,0 +1,38 @@
+import type { ILivechatContact } from '@rocket.chat/core-typings';
+import { IconButton } from '@rocket.chat/fuselage';
+import type { ComponentProps } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import ContactInfoDetailsEntry from './ContactInfoDetailsEntry';
+import ContactInfoOutboundMessageButton from './ContactInfoOutboundMessageButton';
+import useClipboardWithToast from '../../../../../hooks/useClipboardWithToast';
+import { parseOutboundPhoneNumber } from '../../../../../lib/voip/parseOutboundPhoneNumber';
+
+export type ContactInfoPhoneEntryProps = Omit<ComponentProps<typeof ContactInfoDetailsEntry>, 'icon' | 'actions'> & {
+	contact?: Pick<ILivechatContact, '_id' | 'unknown'>;
+};
+
+const ContactInfoPhoneEntry = ({ contact, value, ...props }: ContactInfoPhoneEntryProps) => {
+	const { t } = useTranslation();
+	const { copy } = useClipboardWithToast(value);
+
+	return (
+		<ContactInfoDetailsEntry
+			{...props}
+			icon='phone'
+			value={parseOutboundPhoneNumber(value)}
+			actions={[
+				<IconButton key={`${value}-copy`} onClick={() => copy()} tiny icon='copy' title={t('Copy')} />,
+				null,
+				<ContactInfoOutboundMessageButton
+					key={`${value}-outbound-message`}
+					title={contact?.unknown ? t('error-unknown-contact') : undefined}
+					disabled={contact?.unknown}
+					defaultValues={{ contactId: contact?._id, recipient: value }}
+				/>,
+			]}
+		/>
+	);
+};
+
+export default ContactInfoPhoneEntry;

apps/meteor/client/views/omnichannel/contactInfo/tabs/ContactInfoDetails/ContactManagerInfo.tsx

@@ -0,0 +1,41 @@
+import { Box, Skeleton } from '@rocket.chat/fuselage';
+import { UserAvatar } from '@rocket.chat/ui-avatar';
+import { useEndpoint } from '@rocket.chat/ui-contexts';
+import { useQuery } from '@tanstack/react-query';
+import { useTranslation } from 'react-i18next';
+
+import { UserStatus } from '../../../../../components/UserStatus';
+
+export type ContactManagerInfoProps = { userId: string };
+
+const ContactManagerInfo = ({ userId }: ContactManagerInfoProps) => {
+	const { t } = useTranslation();
+
+	const getContactManagerByUsername = useEndpoint('GET', '/v1/users.info');
+	const { data, isLoading, isSuccess, isError } = useQuery({
+		queryKey: ['getContactManagerByUserId', userId],
+		queryFn: async () => getContactManagerByUsername({ userId }),
+	});
+
+	if (isError) {
+		return null;
+	}
+
+	return (
+		<Box>
+			<Box marginBlockEnd={4}>{t('Contact_Manager')}</Box>
+			{isLoading && <Skeleton />}
+			{isSuccess && (
+				<Box display='flex' alignItems='center'>
+					{data.user.username && <UserAvatar size='x18' username={data.user.username} />}
+					<Box marginInline={8}>
+						<UserStatus status={data.user.status} />
+					</Box>
+					<Box fontScale='p2'>{data.user.name}</Box>
+				</Box>
+			)}
+		</Box>
+	);
+};
+
+export default ContactManagerInfo;

apps/meteor/client/views/omnichannel/contactInfo/tabs/ContactInfoDetails/index.ts

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

apps/meteor/client/views/omnichannel/contactInfo/tabs/ContactInfoHistory/ContactInfoHistory.tsx

@@ -0,0 +1,130 @@
+import type { ILivechatContact, Serialized } from '@rocket.chat/core-typings';
+import { OmnichannelSourceType } from '@rocket.chat/core-typings';
+import { Box, Margins, Throbber, States, StatesIcon, StatesTitle, Select } from '@rocket.chat/fuselage';
+import { useLocalStorage } from '@rocket.chat/fuselage-hooks';
+import { VirtualizedScrollbars, ContextualbarContent, ContextualbarEmptyContent } from '@rocket.chat/ui-client';
+import { useEndpoint, useSetModal } from '@rocket.chat/ui-contexts';
+import { useQuery } from '@tanstack/react-query';
+import type { Key } from 'react';
+import { useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Virtuoso } from 'react-virtuoso';
+
+import ContactInfoHistoryItem from './ContactInfoHistoryItem';
+import { useHasLicenseModule } from '../../../../../hooks/useHasLicenseModule';
+import { useOmnichannelSource } from '../../../hooks/useOmnichannelSource';
+import AdvancedContactModal from '../../AdvancedContactModal';
+
+export type ContactInfoHistoryProps = {
+	contact: Serialized<ILivechatContact>;
+	setChatId: (chatId: string) => void;
+};
+
+const isFilterBlocked = (hasLicense: boolean, fieldValue: Key) => !hasLicense && fieldValue !== 'all';
+
+const ContactInfoHistory = ({ contact, setChatId }: ContactInfoHistoryProps) => {
+	const { t } = useTranslation();
+	const setModal = useSetModal();
+	const [storedType, setStoredType] = useLocalStorage<string>('contact-history-type', 'all');
+
+	const { data: hasLicense = false } = useHasLicenseModule('contact-id-verification');
+	const type = isFilterBlocked(hasLicense, storedType) ? 'all' : storedType;
+
+	const { getSourceName } = useOmnichannelSource();
+
+	const getContactHistory = useEndpoint('GET', '/v1/omnichannel/contacts.history');
+	const { data, isLoading, isError } = useQuery({
+		queryKey: ['getContactHistory', contact._id, type],
+		queryFn: () => getContactHistory({ contactId: contact._id, source: type === 'all' ? undefined : type }),
+	});
+
+	const handleChangeFilter = (value: Key) => {
+		if (isFilterBlocked(hasLicense, value)) {
+			return setModal(<AdvancedContactModal onCancel={() => setModal(null)} />);
+		}
+
+		setStoredType(value as string);
+	};
+
+	const historyFilterOptions: [string, string][] = useMemo(
+		() =>
+			Object.values(OmnichannelSourceType).reduce(
+				(acc, cv) => {
+					let sourceName;
+					const hasSourceType = contact.channels?.find((item) => {
+						sourceName = getSourceName(item.details, false);
+						return item.details.type === cv;
+					});
+
+					if (hasSourceType && sourceName) {
+						acc.push([cv, sourceName]);
+					}
+
+					return acc;
+				},
+				[['all', t('All')]],
+			),
+		[contact.channels, getSourceName, t],
+	);
+
+	return (
+		<ContextualbarContent paddingInline={0}>
+			<Box
+				display='flex'
+				flexDirection='row'
+				padding={24}
+				borderBlockEndWidth='default'
+				borderBlockEndStyle='solid'
+				borderBlockEndColor='extra-light'
+				flexShrink={0}
+			>
+				<Box display='flex' flexDirection='row' flexGrow={1} marginInline='neg-x4'>
+					<Margins inline={4}>
+						<Select
+							value={type}
+							onChange={handleChangeFilter}
+							placeholder={t('Filter')}
+							options={historyFilterOptions}
+							disabled={type === 'all' && data?.history.length === 0}
+						/>
+					</Margins>
+				</Box>
+			</Box>
+			{isLoading && (
+				<Box paddingInline={24} paddingBlock={12}>
+					<Throbber size='x12' />
+				</Box>
+			)}
+			{isError && (
+				<States>
+					<StatesIcon name='warning' variation='danger' />
+					<StatesTitle>{t('Something_went_wrong')}</StatesTitle>
+				</States>
+			)}
+			{data?.history.length === 0 && (
+				<ContextualbarEmptyContent icon='history' title={t('No_history_yet')} subtitle={t('No_history_yet_description')} />
+			)}
+			{!isError && data?.history && data.history.length > 0 && (
+				<>
+					<Box paddingInline={24} paddingBlock={12}>
+						<Box is='span' color='hint' fontScale='p2'>
+							{t('Showing_current_of_total', { current: data?.history.length, total: data?.total })}
+						</Box>
+					</Box>
+					<Box role='list' height='100%' overflow='hidden' flexShrink={1}>
+						<VirtualizedScrollbars>
+							<Virtuoso
+								totalCount={data.history.length}
+								overscan={25}
+								data={data?.history}
+								itemContent={(index, data) => <ContactInfoHistoryItem key={index} onClick={() => setChatId(data._id)} {...data} />}
+							/>
+						</VirtualizedScrollbars>
+					</Box>
+				</>
+			)}
+		</ContextualbarContent>
+	);
+};
+
+export default ContactInfoHistory;

apps/meteor/client/views/omnichannel/contactInfo/tabs/ContactInfoHistory/ContactInfoHistoryItem.tsx

@@ -0,0 +1,103 @@
+import type { Serialized } from '@rocket.chat/core-typings';
+import { css } from '@rocket.chat/css-in-js';
+import {
+	Box,
+	Palette,
+	IconButton,
+	Icon,
+	MessageGenericPreview,
+	MessageGenericPreviewContent,
+	MessageGenericPreviewDescription,
+	MessageGenericPreviewTitle,
+} from '@rocket.chat/fuselage';
+import type { ContactSearchChatsResult } from '@rocket.chat/rest-typings';
+import { useSetModal } from '@rocket.chat/ui-contexts';
+import { useTranslation } from 'react-i18next';
+
+import { OmnichannelRoomIcon } from '../../../../../components/RoomIcon/OmnichannelRoomIcon';
+import { useHasLicenseModule } from '../../../../../hooks/useHasLicenseModule';
+import { usePreventPropagation } from '../../../../../hooks/usePreventPropagation';
+import { useTimeFromNow } from '../../../../../hooks/useTimeFromNow';
+import { useOmnichannelSource } from '../../../hooks/useOmnichannelSource';
+import AdvancedContactModal from '../../AdvancedContactModal';
+
+export type ContactInfoHistoryItemProps = Serialized<ContactSearchChatsResult> & {
+	onClick: () => void;
+};
+
+const ContactInfoHistoryItem = ({ source, lastMessage, verified, onClick }: ContactInfoHistoryItemProps) => {
+	const { t } = useTranslation();
+	const getTimeFromNow = useTimeFromNow(true);
+	const setModal = useSetModal();
+	const preventPropagation = usePreventPropagation();
+	const { data: hasLicense = false } = useHasLicenseModule('contact-id-verification');
+	const { getSourceName } = useOmnichannelSource();
+
+	const customClass = css`
+		&:hover {
+			cursor: pointer;
+		}
+
+		&:hover,
+		&:focus {
+			background: ${Palette.surface['surface-hover']};
+		}
+	`;
+
+	return (
+		<Box
+			tabIndex={0}
+			role='listitem'
+			aria-label={getSourceName(source)}
+			borderBlockEndWidth={1}
+			borderBlockEndColor='stroke-extra-light'
+			borderBlockEndStyle='solid'
+			className={['rcx-box--animated', customClass]}
+			paddingInline={24}
+			paddingBlock={12}
+			display='flex'
+			flexDirection='column'
+			onClick={onClick}
+		>
+			<Box display='flex' justifyContent='space-between'>
+				<Box display='flex' alignItems='center'>
+					{source && <OmnichannelRoomIcon source={source} size='x18' placement='default' />}
+					{source && (
+						<Box marginInline={4} fontScale='p2b'>
+							{getSourceName(source)}
+						</Box>
+					)}
+					{lastMessage && (
+						<Box marginInlineStart={4} fontScale='c1'>
+							{getTimeFromNow(lastMessage.ts)}
+						</Box>
+					)}
+				</Box>
+				<Box marginInlineStart={4} is='span' onClick={preventPropagation}>
+					{hasLicense && verified ? (
+						<Icon title={t('Verified')} marginInlineStart={4} size='x16' name='success-circle' color='stroke-highlight' />
+					) : (
+						<IconButton
+							title={t('Unverified')}
+							onClick={() => setModal(<AdvancedContactModal onCancel={() => setModal(null)} />)}
+							icon='question-mark'
+							tiny
+						/>
+					)}
+				</Box>
+			</Box>
+			{lastMessage?.msg.trim() && (
+				<Box width='full' marginBlockStart={8}>
+					<MessageGenericPreview>
+						<MessageGenericPreviewContent>
+							<MessageGenericPreviewTitle>{t('Closing_chat_message')}:</MessageGenericPreviewTitle>
+							<MessageGenericPreviewDescription clamp>{lastMessage?.msg}</MessageGenericPreviewDescription>
+						</MessageGenericPreviewContent>
+					</MessageGenericPreview>
+				</Box>
+			)}
+		</Box>
+	);
+};
+
+export default ContactInfoHistoryItem;

apps/meteor/client/views/omnichannel/contactInfo/tabs/ContactInfoHistory/ContactInfoHistoryMessages.tsx

@@ -0,0 +1,134 @@
+import {
+	Box,
+	Button,
+	ButtonGroup,
+	Icon,
+	IconButton,
+	Margins,
+	States,
+	StatesIcon,
+	StatesSubtitle,
+	StatesTitle,
+	TextInput,
+	Throbber,
+} from '@rocket.chat/fuselage';
+import { useDebouncedValue, useResizeObserver } from '@rocket.chat/fuselage-hooks';
+import { VirtualizedScrollbars, ContextualbarContent, ContextualbarEmptyContent, ContextualbarFooter } from '@rocket.chat/ui-client';
+import { useSetting, useUserPreference } from '@rocket.chat/ui-contexts';
+import type { ChangeEvent } from 'react';
+import { useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Virtuoso } from 'react-virtuoso';
+
+import { isMessageNewDay } from '../../../../room/MessageList/lib/isMessageNewDay';
+import { isMessageSequential } from '../../../../room/MessageList/lib/isMessageSequential';
+import ContactHistoryMessage from '../../../contactHistory/MessageList/ContactHistoryMessage';
+import { useHistoryMessageList } from '../../../contactHistory/MessageList/useHistoryMessageList';
+
+type ContactHistoryMessagesListProps = {
+	chatId: string;
+	onBack: () => void;
+	onOpenRoom?: () => void;
+};
+
+const ContactInfoHistoryMessages = ({ chatId, onBack, onOpenRoom }: ContactHistoryMessagesListProps) => {
+	const { t } = useTranslation();
+	const [text, setText] = useState('');
+	const showUserAvatar = !!useUserPreference<boolean>('displayAvatars');
+
+	const { ref, contentBoxSize: { inlineSize = 378, blockSize = 1 } = {} } = useResizeObserver<HTMLElement>({
+		debounceDelay: 200,
+	});
+
+	const query = useDebouncedValue(
+		useMemo(() => ({ roomId: chatId, filter: text }), [chatId, text]),
+		500,
+	);
+
+	const { isPending, error, isSuccess, data, fetchNextPage } = useHistoryMessageList(query);
+
+	const messages = data?.items || [];
+	const totalItemCount = data?.itemCount ?? 0;
+
+	const handleSearchChange = (event: ChangeEvent<HTMLInputElement>): void => {
+		setText(event.currentTarget.value);
+	};
+
+	const messageGroupingPeriod = Number(useSetting('Message_GroupingPeriod'));
+
+	return (
+		<>
+			<ContextualbarContent paddingInline={0}>
+				<Box
+					display='flex'
+					flexDirection='row'
+					padding={24}
+					borderBlockEndWidth='default'
+					borderBlockEndStyle='solid'
+					borderBlockEndColor='extra-light'
+					flexShrink={0}
+				>
+					<Box display='flex' alignItems='center' flexDirection='row' flexGrow={1} marginInline='neg-x4'>
+						<Margins inline={4}>
+							<TextInput
+								placeholder={t('Search')}
+								value={text}
+								onChange={handleSearchChange}
+								endAddon={<Icon name='magnifier' size='x20' />}
+							/>
+							<IconButton title={t('Back')} small icon='back' onClick={onBack} />
+						</Margins>
+					</Box>
+				</Box>
+				{isPending && (
+					<Box paddingInline={24} paddingBlock={12}>
+						<Throbber size='x12' />
+					</Box>
+				)}
+				{error && (
+					<States>
+						<StatesIcon name='warning' variation='danger' />
+						<StatesTitle>{t('Something_went_wrong')}</StatesTitle>
+						<StatesSubtitle>{error.toString()}</StatesSubtitle>
+					</States>
+				)}
+				{isSuccess && totalItemCount === 0 && <ContextualbarEmptyContent title={t('No_results_found')} />}
+				<Box flexGrow={1} flexShrink={1} overflow='hidden' display='flex' ref={ref}>
+					{!error && totalItemCount > 0 && messages.length > 0 && (
+						<VirtualizedScrollbars>
+							<Virtuoso
+								totalCount={totalItemCount}
+								initialTopMostItemIndex={{ index: 'LAST' }}
+								followOutput
+								style={{
+									height: blockSize,
+									width: inlineSize,
+								}}
+								endReached={() => fetchNextPage()}
+								overscan={25}
+								data={messages}
+								itemContent={(index, data) => {
+									const lastMessage = messages[index - 1];
+									const isSequential = isMessageSequential(data, lastMessage, messageGroupingPeriod);
+									const isNewDay = isMessageNewDay(data, lastMessage);
+									return (
+										<ContactHistoryMessage message={data} sequential={isSequential} isNewDay={isNewDay} showUserAvatar={showUserAvatar} />
+									);
+								}}
+							/>
+						</VirtualizedScrollbars>
+					)}
+				</Box>
+			</ContextualbarContent>
+			{onOpenRoom && (
+				<ContextualbarFooter>
+					<ButtonGroup stretch>
+						<Button onClick={onOpenRoom}>{t('Open_chat')}</Button>
+					</ButtonGroup>
+				</ContextualbarFooter>
+			)}
+		</>
+	);
+};
+
+export default ContactInfoHistoryMessages;

apps/meteor/client/views/omnichannel/contactInfo/tabs/ContactInfoHistory/ContactInfoHistoryRouter.tsx

@@ -0,0 +1,23 @@
+import type { ILivechatContact, Serialized } from '@rocket.chat/core-typings';
+import { useRouter } from '@rocket.chat/ui-contexts';
+import { useState } from 'react';
+
+import ContactInfoHistory from './ContactInfoHistory';
+import ContactInfoHistoryMessages from './ContactInfoHistoryMessages';
+
+export type ContactInfoHistoryRouterProps = { contact: Serialized<ILivechatContact> };
+
+const ContactInfoHistoryRouter = ({ contact }: ContactInfoHistoryRouterProps) => {
+	const [chatId, setChatId] = useState<string | undefined>();
+	const { navigate } = useRouter();
+
+	if (chatId) {
+		return (
+			<ContactInfoHistoryMessages chatId={chatId} onBack={() => setChatId(undefined)} onOpenRoom={() => navigate(`/live/${chatId}`)} />
+		);
+	}
+
+	return <ContactInfoHistory contact={contact} setChatId={setChatId} />;
+};
+
+export default ContactInfoHistoryRouter;

apps/meteor/client/views/omnichannel/contactInfo/tabs/ContactInfoHistory/index.ts

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