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

apps/meteor/client/views/room/composer/ComposerOmnichannel/ComposerOmnichannel.tsx

@@ -0,0 +1,79 @@
+import { MessageFooterCallout } from '@rocket.chat/ui-composer';
+import { useUserId } from '@rocket.chat/ui-contexts';
+import { useTranslation } from 'react-i18next';
+
+import { useIsRoomOverMacLimit } from '../../../omnichannel/hooks/useIsRoomOverMacLimit';
+import { useOmnichannelRoom, useUserIsSubscribed } from '../../contexts/RoomContext';
+import type { ComposerMessageProps } from '../ComposerMessage';
+import ComposerMessage from '../ComposerMessage';
+import ComposerOmnichannelCallout from './ComposerOmnichannelCallout';
+import { ComposerOmnichannelInquiry } from './ComposerOmnichannelInquiry';
+import { ComposerOmnichannelJoin } from './ComposerOmnichannelJoin';
+import { ComposerOmnichannelOnHold } from './ComposerOmnichannelOnHold';
+
+const ComposerOmnichannel = (props: ComposerMessageProps) => {
+	const { t } = useTranslation();
+	const userId = useUserId();
+	const room = useOmnichannelRoom();
+
+	const { servedBy, queuedAt, open, onHold } = room;
+
+	const isSubscribed = useUserIsSubscribed();
+	const isInquired = !servedBy && queuedAt;
+	const isSameAgent = servedBy?._id === userId;
+	const isRoomOverMacLimit = useIsRoomOverMacLimit(room);
+
+	if (!open) {
+		return (
+			<>
+				<ComposerOmnichannelCallout />
+				<MessageFooterCallout color='default'>{t('This_conversation_is_already_closed')}</MessageFooterCallout>
+			</>
+		);
+	}
+
+	if (isRoomOverMacLimit) {
+		return (
+			<>
+				<ComposerOmnichannelCallout />
+				<MessageFooterCallout color='default'>{t('Workspace_exceeded_MAC_limit_disclaimer')}</MessageFooterCallout>
+			</>
+		);
+	}
+
+	if (onHold) {
+		return (
+			<>
+				<ComposerOmnichannelCallout />
+				<ComposerOmnichannelOnHold />
+			</>
+		);
+	}
+
+	if (isInquired) {
+		return (
+			<>
+				<ComposerOmnichannelCallout />
+				<ComposerOmnichannelInquiry />
+			</>
+		);
+	}
+
+	if (!isSubscribed && !isSameAgent) {
+		return (
+			<>
+				<ComposerOmnichannelCallout />
+				<ComposerOmnichannelJoin />
+			</>
+		);
+	}
+
+	return (
+		<>
+			<ComposerOmnichannelCallout />
+			<ComposerMessage {...props} />
+		</>
+	);
+};
+
+export default ComposerOmnichannel;

apps/meteor/client/views/room/composer/ComposerOmnichannel/ComposerOmnichannelCallout.spec.tsx

@@ -0,0 +1,75 @@
+import { faker } from '@faker-js/faker/locale/af_ZA';
+import type { IOmnichannelRoom } from '@rocket.chat/core-typings';
+import { mockAppRoot } from '@rocket.chat/mock-providers';
+import { render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+import ComposerOmnichannelCallout from './ComposerOmnichannelCallout';
+import FakeRoomProvider from '../../../../../tests/mocks/client/FakeRoomProvider';
+import { createFakeContact, createFakeRoom } from '../../../../../tests/mocks/data';
+
+jest.mock('../../../omnichannel/contactInfo/tabs/ContactInfoChannels/useBlockChannel', () => ({
+	useBlockChannel: () => jest.fn(),
+}));
+
+const fakeVisitor = {
+	_id: faker.string.uuid(),
+	token: faker.string.uuid(),
+	username: faker.internet.userName(),
+};
+
+const fakeRoom = createFakeRoom<IOmnichannelRoom>({ t: 'l', v: fakeVisitor });
+const fakeContact = createFakeContact();
+
+it('should be displayed if contact is unknown', async () => {
+	const getContactMockFn = jest.fn().mockResolvedValue({ contact: fakeContact });
+	const wrapper = mockAppRoot().withEndpoint('GET', '/v1/omnichannel/contacts.get', getContactMockFn).withRoom(fakeRoom);
+
+	render(
+		<FakeRoomProvider roomOverrides={fakeRoom}>
+			<ComposerOmnichannelCallout />
+		</FakeRoomProvider>,
+		{ wrapper: wrapper.build() },
+	);
+
+	await waitFor(() => expect(getContactMockFn).toHaveBeenCalled());
+	expect(screen.getByText('Unknown_contact_callout_description')).toBeVisible();
+	expect(screen.getByRole('button', { name: 'Add_contact' })).toBeVisible();
+	expect(screen.getByRole('button', { name: 'Block' })).toBeVisible();
+	expect(screen.getByRole('button', { name: 'Dismiss' })).toBeVisible();
+});
+
+it('should not be displayed if contact is known', async () => {
+	const getContactMockFn = jest.fn().mockResolvedValue({ contact: createFakeContact({ unknown: false }) });
+	const wrapper = mockAppRoot().withEndpoint('GET', '/v1/omnichannel/contacts.get', getContactMockFn).withRoom(fakeRoom);
+
+	render(
+		<FakeRoomProvider roomOverrides={fakeRoom}>
+			<ComposerOmnichannelCallout />
+		</FakeRoomProvider>,
+		{ wrapper: wrapper.build() },
+	);
+
+	await waitFor(() => expect(getContactMockFn).toHaveBeenCalled());
+	expect(screen.queryByText('Unknown_contact_callout_description')).not.toBeInTheDocument();
+});
+
+it('should hide callout on dismiss', async () => {
+	const getContactMockFn = jest.fn().mockResolvedValue({ contact: fakeContact });
+	const wrapper = mockAppRoot().withEndpoint('GET', '/v1/omnichannel/contacts.get', getContactMockFn).withRoom(fakeRoom);
+
+	render(
+		<FakeRoomProvider roomOverrides={fakeRoom}>
+			<ComposerOmnichannelCallout />
+		</FakeRoomProvider>,
+		{ wrapper: wrapper.build() },
+	);
+
+	await waitFor(() => expect(getContactMockFn).toHaveBeenCalled());
+	expect(screen.getByText('Unknown_contact_callout_description')).toBeVisible();
+
+	const btnDismiss = screen.getByRole('button', { name: 'Dismiss' });
+	await userEvent.click(btnDismiss);
+
+	expect(screen.queryByText('Unknown_contact_callout_description')).not.toBeInTheDocument();
+});

apps/meteor/client/views/room/composer/ComposerOmnichannel/ComposerOmnichannelCallout.tsx

@@ -0,0 +1,61 @@
+import { Button, ButtonGroup, Callout, IconButton } from '@rocket.chat/fuselage';
+import { useSessionStorage } from '@rocket.chat/fuselage-hooks';
+import { useEndpoint, useRouter } from '@rocket.chat/ui-contexts';
+import { useQuery } from '@tanstack/react-query';
+import { useId } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { isSameChannel } from '../../../../../app/livechat/lib/isSameChannel';
+import { useBlockChannel } from '../../../omnichannel/contactInfo/tabs/ContactInfoChannels/useBlockChannel';
+import { useOmnichannelRoom } from '../../contexts/RoomContext';
+
+const ComposerOmnichannelCallout = () => {
+	const { t } = useTranslation();
+	const room = useOmnichannelRoom();
+	const { navigate } = useRouter();
+
+	const {
+		_id,
+		v: { _id: visitorId },
+		source,
+		contactId,
+	} = room;
+
+	const calloutDescriptionId = useId();
+	const [dismissed, setDismissed] = useSessionStorage(`contact-unknown-callout-${contactId}`, false);
+
+	const getContactById = useEndpoint('GET', '/v1/omnichannel/contacts.get');
+	const { data } = useQuery({ queryKey: ['getContactById', contactId], queryFn: () => getContactById({ contactId }) });
+
+	const association = { visitorId, source };
+	const currentChannel = data?.contact?.channels?.find((channel) => isSameChannel(channel.visitor, association));
+
+	const handleBlock = useBlockChannel({ blocked: currentChannel?.blocked || false, association });
+
+	if (dismissed || !data?.contact?.unknown) {
+		return null;
+	}
+
+	return (
+		<Callout
+			role='status'
+			aria-labelledby={calloutDescriptionId}
+			marginBlockEnd={16}
+			actions={
+				<ButtonGroup>
+					<Button onClick={() => navigate(`/live/${_id}/contact-profile/edit`)} small>
+						{t('Add_contact')}
+					</Button>
+					<Button danger secondary small onClick={handleBlock}>
+						{currentChannel?.blocked ? t('Unblock') : t('Block')}
+					</Button>
+					<IconButton icon='cross' secondary small title={t('Dismiss')} onClick={() => setDismissed(true)} />
+				</ButtonGroup>
+			}
+		>
+			<p id={calloutDescriptionId}>{t('Unknown_contact_callout_description')}</p>
+		</Callout>
+	);
+};
+
+export default ComposerOmnichannelCallout;

apps/meteor/client/views/room/composer/ComposerOmnichannel/ComposerOmnichannelInquiry.tsx

@@ -0,0 +1,63 @@
+import { MessageFooterCallout, MessageFooterCalloutAction, MessageFooterCalloutContent } from '@rocket.chat/ui-composer';
+import { useEndpoint, useToastMessageDispatch, useTranslation, useUser } from '@rocket.chat/ui-contexts';
+import { useQuery } from '@tanstack/react-query';
+import { useMemo } from 'react';
+
+import { useOmnichannelAgentAvailable } from '../../../omnichannel/hooks/useOmnichannelAgentAvailable';
+import { useOmnichannelRoom } from '../../contexts/RoomContext';
+
+export const ComposerOmnichannelInquiry = () => {
+	const t = useTranslation();
+	const dispatchToastMessage = useToastMessageDispatch();
+	const user = useUser();
+	const agentAvailable = useOmnichannelAgentAvailable();
+	const room = useOmnichannelRoom();
+	const getInquire = useEndpoint('GET', `/v1/livechat/inquiries.getOne`);
+	const result = useQuery({
+		queryKey: ['inquire', room._id],
+
+		queryFn: () =>
+			getInquire({
+				roomId: room._id,
+			}),
+	});
+
+	const takeInquiry = useEndpoint('POST', '/v1/livechat/inquiries.take');
+
+	const handleTakeInquiry = async (): Promise<void> => {
+		if (!result.isSuccess) {
+			return;
+		}
+		if (!result.data.inquiry) {
+			return;
+		}
+		try {
+			await takeInquiry({ inquiryId: result.data.inquiry._id, options: { clientAction: true } });
+		} catch (error) {
+			dispatchToastMessage({ type: 'error', message: error });
+		}
+	};
+
+	const title = useMemo(() => {
+		if (user?.status === 'offline') {
+			return t('You_cant_take_chats_offline');
+		}
+
+		if (!agentAvailable) {
+			return t('You_cant_take_chats_unavailable');
+		}
+	}, [agentAvailable, t, user?.status]);
+
+	return (
+		<MessageFooterCallout aria-busy={result.isPending}>
+			<MessageFooterCalloutContent>{t('you_are_in_preview_mode_of_incoming_livechat')}</MessageFooterCalloutContent>
+			<MessageFooterCalloutAction
+				{...(title && { title })}
+				disabled={result.isPending || user?.status === 'offline' || !agentAvailable}
+				onClick={handleTakeInquiry}
+			>
+				{t('Take_it')}
+			</MessageFooterCalloutAction>
+		</MessageFooterCallout>
+	);
+};

apps/meteor/client/views/room/composer/ComposerOmnichannel/ComposerOmnichannelJoin.tsx

@@ -0,0 +1,32 @@
+import { MessageFooterCallout, MessageFooterCalloutAction, MessageFooterCalloutContent } from '@rocket.chat/ui-composer';
+import { useEndpoint, useToastMessageDispatch } from '@rocket.chat/ui-contexts';
+import { useTranslation } from 'react-i18next';
+
+import { useOmnichannelRoom } from '../../contexts/RoomContext';
+
+export const ComposerOmnichannelJoin = () => {
+	const room = useOmnichannelRoom();
+	const join = useEndpoint('GET', `/v1/livechat/room.join`);
+
+	const dispatchToastMessage = useToastMessageDispatch();
+
+	const { t } = useTranslation();
+	return (
+		<MessageFooterCallout>
+			<MessageFooterCalloutContent>{t('room_is_read_only')}</MessageFooterCalloutContent>
+			<MessageFooterCalloutAction
+				onClick={async (): Promise<void> => {
+					try {
+						await join({
+							roomId: room._id,
+						});
+					} catch (error) {
+						dispatchToastMessage({ type: 'error', message: error });
+					}
+				}}
+			>
+				{t('Join')}
+			</MessageFooterCalloutAction>
+		</MessageFooterCallout>
+	);
+};

apps/meteor/client/views/room/composer/ComposerOmnichannel/ComposerOmnichannelOnHold.tsx

@@ -0,0 +1,25 @@
+import { MessageFooterCallout, MessageFooterCalloutAction, MessageFooterCalloutContent } from '@rocket.chat/ui-composer';
+import { useTranslation } from 'react-i18next';
+
+import { useResumeChatOnHoldMutation } from './hooks/useResumeChatOnHoldMutation';
+import { useOmnichannelRoom } from '../../contexts/RoomContext';
+
+export const ComposerOmnichannelOnHold = () => {
+	const resumeChatOnHoldMutation = useResumeChatOnHoldMutation();
+
+	const room = useOmnichannelRoom();
+
+	const { t } = useTranslation();
+
+	return (
+		<MessageFooterCallout>
+			<MessageFooterCalloutContent>{t('chat_on_hold_due_to_inactivity')}</MessageFooterCalloutContent>
+			<MessageFooterCalloutAction
+				disabled={resumeChatOnHoldMutation.isPending}
+				onClick={(): void => resumeChatOnHoldMutation.mutate(room._id)}
+			>
+				{t('Resume')}
+			</MessageFooterCalloutAction>
+		</MessageFooterCallout>
+	);
+};

apps/meteor/client/views/room/composer/ComposerOmnichannel/hooks/useResumeChatOnHoldMutation.ts

@@ -0,0 +1,32 @@
+import type { IRoom } from '@rocket.chat/core-typings';
+import { useEndpoint, useToastMessageDispatch } from '@rocket.chat/ui-contexts';
+import type { UseMutationOptions, UseMutationResult } from '@tanstack/react-query';
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+
+import { roomsQueryKeys, subscriptionsQueryKeys } from '../../../../../lib/queryKeys';
+
+export const useResumeChatOnHoldMutation = (
+	options?: Omit<UseMutationOptions<void, Error, IRoom['_id']>, 'mutationFn'>,
+): UseMutationResult<void, Error, IRoom['_id']> => {
+	const resumeChatOnHold = useEndpoint('POST', '/v1/livechat/room.resumeOnHold');
+
+	const dispatchToastMessage = useToastMessageDispatch();
+
+	const queryClient = useQueryClient();
+
+	return useMutation({
+		mutationFn: async (roomId) => {
+			await resumeChatOnHold({ roomId });
+		},
+		...options,
+		onSuccess: async (data, rid, context) => {
+			await queryClient.invalidateQueries({ queryKey: ['current-chats'] });
+			await queryClient.invalidateQueries({ queryKey: roomsQueryKeys.room(rid) });
+			await queryClient.invalidateQueries({ queryKey: subscriptionsQueryKeys.subscription(rid) });
+			return options?.onSuccess?.(data, rid, context);
+		},
+		onError: (error) => {
+			dispatchToastMessage({ type: 'error', message: error });
+		},
+	});
+};

apps/meteor/client/views/room/composer/ComposerOmnichannel/index.tsx

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