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

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;