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

apps/meteor/client/components/message/toolbar/items/DefaultItems.tsx

@@ -0,0 +1,25 @@
+import type { IRoom, ISubscription, IMessage } from '@rocket.chat/core-typings';
+
+import ForwardMessageAction from './actions/ForwardMessageAction';
+import QuoteMessageAction from './actions/QuoteMessageAction';
+import ReactionMessageAction from './actions/ReactionMessageAction';
+import ReplyInThreadMessageAction from './actions/ReplyInThreadMessageAction';
+
+export type DefaultItemsProps = {
+	message: IMessage;
+	room: IRoom;
+	subscription: ISubscription | undefined;
+};
+
+const DefaultItems = ({ message, room, subscription }: DefaultItemsProps) => {
+	return (
+		<>
+			<ReactionMessageAction message={message} room={room} subscription={subscription} />
+			<QuoteMessageAction message={message} subscription={subscription} />
+			<ReplyInThreadMessageAction message={message} room={room} subscription={subscription} />
+			<ForwardMessageAction message={message} room={room} />
+		</>
+	);
+};
+
+export default DefaultItems;

apps/meteor/client/components/message/toolbar/items/DirectItems.tsx

@@ -0,0 +1,15 @@
+import type { IRoom, ISubscription, IMessage } from '@rocket.chat/core-typings';
+
+import JumpToMessageAction from './actions/JumpToMessageAction';
+
+export type DirectItemsProps = {
+	message: IMessage;
+	room: IRoom;
+	subscription: ISubscription | undefined;
+};
+
+const DirectItems = ({ message, subscription }: DirectItemsProps) => {
+	return <>{!!subscription && <JumpToMessageAction id='jump-to-pin-message' message={message} />}</>;
+};
+
+export default DirectItems;

apps/meteor/client/components/message/toolbar/items/FederatedItems.tsx

@@ -0,0 +1,23 @@
+import type { IRoom, ISubscription, IMessage } from '@rocket.chat/core-typings';
+
+import QuoteMessageAction from './actions/QuoteMessageAction';
+import ReactionMessageAction from './actions/ReactionMessageAction';
+import ReplyInThreadMessageAction from './actions/ReplyInThreadMessageAction';
+
+export type FederatedItemsProps = {
+	message: IMessage;
+	room: IRoom;
+	subscription: ISubscription | undefined;
+};
+
+const FederatedItems = ({ message, room, subscription }: FederatedItemsProps) => {
+	return (
+		<>
+			<ReactionMessageAction message={message} room={room} subscription={subscription} />
+			<QuoteMessageAction message={message} subscription={subscription} />
+			<ReplyInThreadMessageAction message={message} room={room} subscription={subscription} />
+		</>
+	);
+};
+
+export default FederatedItems;

apps/meteor/client/components/message/toolbar/items/MentionsItems.tsx

@@ -0,0 +1,19 @@
+import type { IRoom, ISubscription, IMessage } from '@rocket.chat/core-typings';
+
+import JumpToMessageAction from './actions/JumpToMessageAction';
+
+export type MentionsItemsProps = {
+	message: IMessage;
+	room: IRoom;
+	subscription: ISubscription | undefined;
+};
+
+const MentionsItems = ({ message }: MentionsItemsProps) => {
+	return (
+		<>
+			<JumpToMessageAction id='jump-to-message' message={message} />
+		</>
+	);
+};
+
+export default MentionsItems;

apps/meteor/client/components/message/toolbar/items/MobileItems.tsx

@@ -0,0 +1,27 @@
+import type { IRoom, ISubscription, IMessage } from '@rocket.chat/core-typings';
+
+import ForwardMessageAction from './actions/ForwardMessageAction';
+import JumpToMessageAction from './actions/JumpToMessageAction';
+import QuoteMessageAction from './actions/QuoteMessageAction';
+import ReactionMessageAction from './actions/ReactionMessageAction';
+import ReplyInThreadMessageAction from './actions/ReplyInThreadMessageAction';
+
+export type MobileItemsProps = {
+	message: IMessage;
+	room: IRoom;
+	subscription: ISubscription | undefined;
+};
+
+const MobileItems = ({ message, room, subscription }: MobileItemsProps) => {
+	return (
+		<>
+			<ReactionMessageAction message={message} room={room} subscription={subscription} />
+			<QuoteMessageAction message={message} subscription={subscription} />
+			<ReplyInThreadMessageAction message={message} room={room} subscription={subscription} />
+			<ForwardMessageAction message={message} room={room} />
+			<JumpToMessageAction id='jump-to-message' message={message} />
+		</>
+	);
+};
+
+export default MobileItems;

apps/meteor/client/components/message/toolbar/items/PinnedItems.tsx

@@ -0,0 +1,19 @@
+import type { IRoom, ISubscription, IMessage } from '@rocket.chat/core-typings';
+
+import JumpToMessageAction from './actions/JumpToMessageAction';
+
+export type PinnedItemsProps = {
+	message: IMessage;
+	room: IRoom;
+	subscription: ISubscription | undefined;
+};
+
+const PinnedItems = ({ message }: PinnedItemsProps) => {
+	return (
+		<>
+			<JumpToMessageAction id='jump-to-pin-message' message={message} />
+		</>
+	);
+};
+
+export default PinnedItems;

apps/meteor/client/components/message/toolbar/items/SearchItems.tsx

@@ -0,0 +1,19 @@
+import type { IRoom, ISubscription, IMessage } from '@rocket.chat/core-typings';
+
+import JumpToMessageAction from './actions/JumpToMessageAction';
+
+export type SearchItemsProps = {
+	message: IMessage;
+	room: IRoom;
+	subscription: ISubscription | undefined;
+};
+
+const SearchItems = ({ message }: SearchItemsProps) => {
+	return (
+		<>
+			<JumpToMessageAction id='jump-to-message' message={message} />
+		</>
+	);
+};
+
+export default SearchItems;

apps/meteor/client/components/message/toolbar/items/StarredItems.tsx

@@ -0,0 +1,19 @@
+import type { IRoom, ISubscription, IMessage } from '@rocket.chat/core-typings';
+
+import JumpToMessageAction from './actions/JumpToMessageAction';
+
+export type StarredItemsProps = {
+	message: IMessage;
+	room: IRoom;
+	subscription: ISubscription | undefined;
+};
+
+const StarredItems = ({ message }: StarredItemsProps) => {
+	return (
+		<>
+			<JumpToMessageAction id='jump-to-star-message' message={message} />
+		</>
+	);
+};
+
+export default StarredItems;

apps/meteor/client/components/message/toolbar/items/ThreadsItems.tsx

@@ -0,0 +1,25 @@
+import type { IRoom, ISubscription, IMessage } from '@rocket.chat/core-typings';
+
+import ForwardMessageAction from './actions/ForwardMessageAction';
+import JumpToMessageAction from './actions/JumpToMessageAction';
+import QuoteMessageAction from './actions/QuoteMessageAction';
+import ReactionMessageAction from './actions/ReactionMessageAction';
+
+export type ThreadsItemsProps = {
+	message: IMessage;
+	room: IRoom;
+	subscription: ISubscription | undefined;
+};
+
+const ThreadsItems = ({ message, room, subscription }: ThreadsItemsProps) => {
+	return (
+		<>
+			<ReactionMessageAction message={message} room={room} subscription={subscription} />
+			<QuoteMessageAction message={message} subscription={subscription} />
+			<ForwardMessageAction message={message} room={room} />
+			<JumpToMessageAction id='jump-to-message' message={message} />
+		</>
+	);
+};
+
+export default ThreadsItems;

apps/meteor/client/components/message/toolbar/items/VideoconfItems.tsx

@@ -0,0 +1,21 @@
+import type { IRoom, ISubscription, IMessage } from '@rocket.chat/core-typings';
+
+import ReactionMessageAction from './actions/ReactionMessageAction';
+import ReplyInThreadMessageAction from './actions/ReplyInThreadMessageAction';
+
+export type VideoconfItemsProps = {
+	message: IMessage;
+	room: IRoom;
+	subscription: ISubscription | undefined;
+};
+
+const VideoconfItems = ({ message, room, subscription }: VideoconfItemsProps) => {
+	return (
+		<>
+			<ReactionMessageAction message={message} room={room} subscription={subscription} />
+			<ReplyInThreadMessageAction message={message} room={room} subscription={subscription} />
+		</>
+	);
+};
+
+export default VideoconfItems;

apps/meteor/client/components/message/toolbar/items/VideoconfThreadsItems.tsx

@@ -0,0 +1,21 @@
+import type { IRoom, ISubscription, IMessage } from '@rocket.chat/core-typings';
+
+import JumpToMessageAction from './actions/JumpToMessageAction';
+import ReactionMessageAction from './actions/ReactionMessageAction';
+
+export type VideoconfThreadsItemsProps = {
+	message: IMessage;
+	room: IRoom;
+	subscription: ISubscription | undefined;
+};
+
+const VideoconfThreadsItems = ({ message, room, subscription }: VideoconfThreadsItemsProps) => {
+	return (
+		<>
+			<ReactionMessageAction message={message} room={room} subscription={subscription} />
+			<JumpToMessageAction id='jump-to-message' message={message} />
+		</>
+	);
+};
+
+export default VideoconfThreadsItems;

apps/meteor/client/components/message/toolbar/items/actions/ForwardMessageAction.spec.tsx

@@ -0,0 +1,154 @@
+import { mockAppRoot } from '@rocket.chat/mock-providers';
+import { render, screen } from '@testing-library/react';
+import { axe } from 'jest-axe';
+
+import ForwardMessageAction from './ForwardMessageAction';
+import FakeRoomProvider from '../../../../../../tests/mocks/client/FakeRoomProvider';
+import { createFakeRoom } from '../../../../../../tests/mocks/data';
+
+// Mock the getPermaLink function
+jest.mock('../../../../../lib/getPermaLink', () => ({
+	getPermaLink: jest.fn(() => Promise.resolve(null)),
+}));
+
+jest.mock('../../../../../views/room/modals/ForwardMessageModal', () => ({
+	getPermaLink: jest.fn(() => null),
+}));
+
+const appRoot = mockAppRoot()
+	.withTranslations('en', 'core', {
+		Forward_message: 'Forward message',
+		Action_not_available_encrypted_content: 'Action not available for encrypted content',
+	})
+	.build();
+
+const createMockMessage = (overrides: any = {}) => ({
+	_id: 'message-id',
+	rid: 'room-id',
+	msg: 'Test message',
+	ts: new Date(),
+	u: { _id: 'user-id', username: 'testuser' },
+	...overrides,
+});
+
+describe('ForwardMessageAction', () => {
+	it('should render the forward action for normal messages', () => {
+		const message = createMockMessage();
+		const room = createFakeRoom();
+
+		render(
+			<FakeRoomProvider roomOverrides={room}>
+				<ForwardMessageAction message={message} room={room} />
+			</FakeRoomProvider>,
+			{ wrapper: appRoot },
+		);
+
+		expect(screen.getByRole('button', { name: 'Forward message' })).toBeInTheDocument();
+		expect(screen.getByRole('button', { name: 'Forward message' })).not.toBeDisabled();
+	});
+
+	it('should be disabled for encrypted messages', () => {
+		const message = createMockMessage({
+			t: 'e2e',
+			e2e: 'encrypted',
+		});
+		const room = createFakeRoom();
+
+		render(
+			<FakeRoomProvider roomOverrides={room}>
+				<ForwardMessageAction message={message} room={room} />
+			</FakeRoomProvider>,
+			{ wrapper: appRoot },
+		);
+
+		const button = screen.getByRole('button', { name: 'Action not available for encrypted content' });
+		expect(button).toBeDisabled();
+	});
+
+	it('should be disabled for ABAC rooms', () => {
+		const message = createMockMessage();
+		const room = createFakeRoom({
+			// @ts-expect-error - abacAttributes is not yet implemented in IRoom type
+			abacAttributes: { someAttribute: 'value' },
+		});
+
+		render(
+			<FakeRoomProvider roomOverrides={room}>
+				<ForwardMessageAction message={message} room={room} />
+			</FakeRoomProvider>,
+			{ wrapper: appRoot },
+		);
+
+		const button = screen.getByRole('button', { name: 'Not_available_for_ABAC_enabled_rooms' });
+		expect(button).toBeDisabled();
+	});
+
+	it('should be disabled for both encrypted messages and ABAC rooms', () => {
+		const message = createMockMessage({
+			t: 'e2e',
+			e2e: 'encrypted',
+		});
+		const room = createFakeRoom({
+			// @ts-expect-error - abacAttributes is not yet implemented in IRoom type
+			abacAttributes: { someAttribute: 'value' },
+		});
+
+		render(
+			<FakeRoomProvider roomOverrides={room}>
+				<ForwardMessageAction message={message} room={room} />
+			</FakeRoomProvider>,
+			{ wrapper: appRoot },
+		);
+
+		const button = screen.getByRole('button', { name: 'Action not available for encrypted content' });
+		expect(button).toBeDisabled();
+	});
+
+	it('should have no accessibility violations for normal messages', async () => {
+		const message = createMockMessage();
+		const room = createFakeRoom();
+
+		const { container } = render(
+			<FakeRoomProvider roomOverrides={room}>
+				<ForwardMessageAction message={message} room={room} />
+			</FakeRoomProvider>,
+			{ wrapper: appRoot },
+		);
+		const results = await axe(container);
+		expect(results).toHaveNoViolations();
+	});
+
+	it('should have no accessibility violations for encrypted messages', async () => {
+		const message = createMockMessage({
+			t: 'e2e',
+			e2e: 'encrypted',
+		});
+		const room = createFakeRoom();
+
+		const { container } = render(
+			<FakeRoomProvider roomOverrides={room}>
+				<ForwardMessageAction message={message} room={room} />
+			</FakeRoomProvider>,
+			{ wrapper: appRoot },
+		);
+		const results = await axe(container);
+		expect(results).toHaveNoViolations();
+	});
+
+	it('should have no accessibility violations for ABAC rooms', async () => {
+		const message = createMockMessage();
+		const room = createFakeRoom({
+			// @ts-expect-error - abacAttributes is not yet implemented in IRoom type
+			abacAttributes: { someAttribute: 'value' },
+		});
+
+		const { container } = render(
+			<FakeRoomProvider roomOverrides={room}>
+				<ForwardMessageAction message={message} room={room} />
+			</FakeRoomProvider>,
+			{ wrapper: appRoot },
+		);
+		const results = await axe(container);
+		expect(results).toHaveNoViolations();
+	});
+});

apps/meteor/client/components/message/toolbar/items/actions/ForwardMessageAction.tsx

@@ -0,0 +1,55 @@
+import { isE2EEMessage } from '@rocket.chat/core-typings';
+import type { IRoom, IMessage } from '@rocket.chat/core-typings';
+import { useSetModal } from '@rocket.chat/ui-contexts';
+import { useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { getPermaLink } from '../../../../../lib/getPermaLink';
+import ForwardMessageModal from '../../../../../views/room/modals/ForwardMessageModal';
+import MessageToolbarItem from '../../MessageToolbarItem';
+
+export type ForwardMessageActionProps = {
+	message: IMessage;
+	room: IRoom;
+};
+
+const ForwardMessageAction = ({ message, room }: ForwardMessageActionProps) => {
+	const setModal = useSetModal();
+	const { t } = useTranslation();
+
+	const encrypted = isE2EEMessage(message);
+	const isABACEnabled = !!room.abacAttributes;
+
+	const getTitle = useMemo(() => {
+		if (encrypted) {
+			return t('Action_not_available_encrypted_content', { action: t('Forward_message') });
+		}
+		if (isABACEnabled) {
+			return t('Not_available_for_ABAC_enabled_rooms');
+		}
+		return t('Forward_message');
+	}, [encrypted, isABACEnabled, t]);
+
+	return (
+		<MessageToolbarItem
+			id='forward-message'
+			icon='arrow-forward'
+			title={getTitle}
+			disabled={encrypted || isABACEnabled}
+			onClick={async () => {
+				const permalink = await getPermaLink(message._id);
+				setModal(
+					<ForwardMessageModal
+						message={message}
+						permalink={permalink}
+						onClose={() => {
+							setModal(null);
+						}}
+					/>,
+				);
+			}}
+		/>
+	);
+};
+
+export default ForwardMessageAction;

apps/meteor/client/components/message/toolbar/items/actions/JumpToMessageAction.tsx

@@ -0,0 +1,27 @@
+import type { IMessage } from '@rocket.chat/core-typings';
+import { useTranslation } from 'react-i18next';
+
+import { setMessageJumpQueryStringParameter } from '../../../../../lib/utils/setMessageJumpQueryStringParameter';
+import MessageToolbarItem from '../../MessageToolbarItem';
+
+export type JumpToMessageActionProps = {
+	id: 'jump-to-message' | 'jump-to-pin-message' | 'jump-to-star-message';
+	message: IMessage;
+};
+
+const JumpToMessageAction = ({ id, message }: JumpToMessageActionProps) => {
+	const { t } = useTranslation();
+
+	return (
+		<MessageToolbarItem
+			id={id}
+			icon='jump'
+			title={t('Jump_to_message')}
+			onClick={() => {
+				setMessageJumpQueryStringParameter(message._id);
+			}}
+		/>
+	);
+};
+
+export default JumpToMessageAction;

apps/meteor/client/components/message/toolbar/items/actions/QuoteMessageAction.tsx

@@ -0,0 +1,57 @@
+import {
+	type ITranslatedMessage,
+	type IMessage,
+	type ISubscription,
+	isRoomFederated,
+	isRoomNativeFederated,
+} from '@rocket.chat/core-typings';
+import { useTranslation } from 'react-i18next';
+
+import { useChat } from '../../../../../views/room/contexts/ChatContext';
+import { useRoom } from '../../../../../views/room/contexts/RoomContext';
+import { useMessageListAutoTranslate } from '../../../list/MessageListContext';
+import MessageToolbarItem from '../../MessageToolbarItem';
+
+export type QuoteMessageActionProps = {
+	message: IMessage & Partial<ITranslatedMessage>;
+	subscription: ISubscription | undefined;
+};
+
+const QuoteMessageAction = ({ message, subscription }: QuoteMessageActionProps) => {
+	const chat = useChat();
+	const autoTranslateOptions = useMessageListAutoTranslate();
+	const { t } = useTranslation();
+
+	const room = useRoom();
+
+	const isFederated = room && isRoomFederated(room);
+	const isFederationBlocked = isFederated && !isRoomNativeFederated(room);
+
+	if (isFederationBlocked) {
+		return null;
+	}
+
+	if (!chat || !subscription) {
+		return null;
+	}
+
+	return (
+		<MessageToolbarItem
+			id='quote-message'
+			icon='quote'
+			title={t('Quote')}
+			onClick={() => {
+				if (message && autoTranslateOptions?.autoTranslateEnabled && autoTranslateOptions.showAutoTranslate(message)) {
+					message.msg =
+						message.translations && autoTranslateOptions.autoTranslateLanguage
+							? message.translations[autoTranslateOptions.autoTranslateLanguage]
+							: message.msg;
+				}
+
+				chat?.composer?.quoteMessage(message);
+			}}
+		/>
+	);
+};
+
+export default QuoteMessageAction;

apps/meteor/client/components/message/toolbar/items/actions/ReactionMessageAction.tsx

@@ -0,0 +1,89 @@
+import {
+	isOmnichannelRoom,
+	isRoomFederated,
+	isRoomNativeFederated,
+	type IMessage,
+	type IRoom,
+	type ISubscription,
+} from '@rocket.chat/core-typings';
+import { useUser, useEndpoint, usePermission } from '@rocket.chat/ui-contexts';
+import { useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { useEmojiPickerData } from '../../../../../contexts/EmojiPickerContext';
+import { roomCoordinator } from '../../../../../lib/rooms/roomCoordinator';
+import EmojiElement from '../../../../../views/composer/EmojiPicker/EmojiElement';
+import { useChat } from '../../../../../views/room/contexts/ChatContext';
+import MessageToolbarItem from '../../MessageToolbarItem';
+
+export type ReactionMessageActionProps = {
+	message: IMessage;
+	room: IRoom;
+	subscription: ISubscription | undefined;
+};
+
+const ReactionMessageAction = ({ message, room, subscription }: ReactionMessageActionProps) => {
+	const chat = useChat();
+	const user = useUser();
+	const setReaction = useEndpoint('POST', '/v1/chat.react');
+	const { quickReactions, addRecentEmoji } = useEmojiPickerData();
+	const { t } = useTranslation();
+
+	const isFederated = room && isRoomFederated(room);
+	const isFederationBlocked = isFederated && !isRoomNativeFederated(room);
+
+	// depend on post-readonly so readOnly re-evaluates when the permission toggles at runtime.
+	const postReadOnly = usePermission('post-readonly', room._id);
+	const enabled = useMemo(
+		() => {
+			if (isFederationBlocked) {
+				return false;
+			}
+
+			if (!chat || isOmnichannelRoom(room) || !subscription || message.private || !user) {
+				return false;
+			}
+
+			if (roomCoordinator.readOnly(room, user) && !room.reactWhenReadOnly) {
+				return false;
+			}
+
+			return true;
+		},
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+		[chat, room, subscription, message.private, user, isFederationBlocked, postReadOnly],
+	);
+
+	if (!enabled) {
+		return null;
+	}
+
+	const toggleReaction = (emoji: string) => {
+		setReaction({
+			emoji: `:${emoji}:`,
+			messageId: message._id,
+		});
+		addRecentEmoji(emoji);
+	};
+
+	return (
+		<>
+			{quickReactions.slice(0, 3).map(({ emoji, image }) => {
+				return <EmojiElement key={emoji} small title={emoji} emoji={emoji} image={image} onClick={() => toggleReaction(emoji)} />;
+			})}
+			<MessageToolbarItem
+				id='reaction-message'
+				icon='add-reaction'
+				title={t('Add_Reaction')}
+				onClick={(event) => {
+					event.stopPropagation();
+					chat?.emojiPicker.open(event.currentTarget, (emoji) => {
+						toggleReaction(emoji);
+					});
+				}}
+			/>
+		</>
+	);
+};
+
+export default ReactionMessageAction;

apps/meteor/client/components/message/toolbar/items/actions/ReplyInThreadMessageAction.tsx

@@ -0,0 +1,59 @@
+import {
+	type IMessage,
+	type ISubscription,
+	type IRoom,
+	isOmnichannelRoom,
+	isRoomFederated,
+	isRoomNativeFederated,
+} from '@rocket.chat/core-typings';
+import { useRouter, useSetting } from '@rocket.chat/ui-contexts';
+import { useTranslation } from 'react-i18next';
+
+import MessageToolbarItem from '../../MessageToolbarItem';
+
+export type ReplyInThreadMessageActionProps = {
+	message: IMessage;
+	room: IRoom;
+	subscription: ISubscription | undefined;
+};
+
+const ReplyInThreadMessageAction = ({ message, room, subscription }: ReplyInThreadMessageActionProps) => {
+	const router = useRouter();
+	const threadsEnabled = useSetting('Threads_enabled', true);
+	const { t } = useTranslation();
+
+	if (!threadsEnabled || isOmnichannelRoom(room) || !subscription) {
+		return null;
+	}
+	const isFederated = room && isRoomFederated(room);
+	const isFederationBlocked = isFederated && !isRoomNativeFederated(room);
+
+	if (isFederationBlocked) {
+		return null;
+	}
+
+	return (
+		<MessageToolbarItem
+			id='reply-in-thread'
+			icon='thread'
+			title={t('Reply_in_thread')}
+			onClick={(event) => {
+				event.stopPropagation();
+				const routeName = router.getRouteName();
+
+				if (routeName) {
+					router.navigate({
+						name: routeName,
+						params: {
+							...router.getRouteParameters(),
+							tab: 'thread',
+							context: message.tmid || message._id,
+						},
+					});
+				}
+			}}
+		/>
+	);
+};
+
+export default ReplyInThreadMessageAction;

apps/meteor/client/components/message/toolbar/items/actions/Timestamp/TimestampPicker/DatePicker.tsx

@@ -0,0 +1,37 @@
+import { Box, Field, FieldLabel, FieldRow, InputBox } from '@rocket.chat/fuselage';
+import { format } from 'date-fns';
+import type { ChangeEvent } from 'react';
+import { useId } from 'react';
+import { useTranslation } from 'react-i18next';
+
+export type DatePickerProps = {
+	value: Date;
+	onChange: (date: Date) => void;
+};
+
+const DatePicker = ({ value, onChange }: DatePickerProps) => {
+	const { t } = useTranslation();
+	const fieldId = useId();
+
+	const handleDateChange = (e: ChangeEvent<HTMLInputElement>) => {
+		const [year, month, day] = e.target.value.split('-').map(Number);
+		const newDate = new Date(value);
+		newDate.setFullYear(year, month - 1, day);
+		onChange(newDate);
+	};
+
+	const dateValue = value && !isNaN(value.getTime()) ? format(value, 'yyyy-MM-dd') : '';
+
+	return (
+		<Box marginBlock='x16'>
+			<Field>
+				<FieldLabel htmlFor={fieldId}>{t('Date')}</FieldLabel>
+				<FieldRow>
+					<InputBox id={fieldId} type='date' value={dateValue} onChange={handleDateChange} />
+				</FieldRow>
+			</Field>
+		</Box>
+	);
+};
+
+export default DatePicker;

apps/meteor/client/components/message/toolbar/items/actions/Timestamp/TimestampPicker/FormatSelector.tsx

@@ -0,0 +1,36 @@
+import { Box, Field, FieldLabel, FieldRow, Select } from '@rocket.chat/fuselage';
+import type { Key } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { TIMESTAMP_FORMATS } from '../../../../../../../lib/utils/timestamp/formats';
+import type { TimestampFormat, ITimestampFormatConfig } from '../../../../../../../lib/utils/timestamp/types';
+
+export type FormatSelectorProps = {
+	value: TimestampFormat;
+	onChange: (format: TimestampFormat) => void;
+};
+
+const FormatSelector = ({ value, onChange }: FormatSelectorProps) => {
+	const { t } = useTranslation();
+
+	const handleFormatChange = (key: Key): void => {
+		onChange(key as TimestampFormat);
+	};
+
+	const formatOptions = Object.entries(TIMESTAMP_FORMATS).map(
+		([format, config]: [string, ITimestampFormatConfig]) => [format, `${t(config.label)} (${t(config.description)})`] as const,
+	);
+
+	return (
+		<Box marginBlock='x16'>
+			<Field>
+				<FieldLabel>{t('Format')}</FieldLabel>
+				<FieldRow>
+					<Select value={value} onChange={handleFormatChange} options={formatOptions} width='full' />
+				</FieldRow>
+			</Field>
+		</Box>
+	);
+};
+
+export default FormatSelector;

apps/meteor/client/components/message/toolbar/items/actions/Timestamp/TimestampPicker/Preview.tsx

@@ -0,0 +1,36 @@
+import { Box, Field, FieldLabel, FieldRow } from '@rocket.chat/fuselage';
+import { Markup } from '@rocket.chat/gazzodown';
+import { parse } from '@rocket.chat/message-parser';
+import { useTranslation } from 'react-i18next';
+
+import { dateToISOString, generateTimestampMarkup } from '../../../../../../../lib/utils/timestamp/conversion';
+import type { TimestampFormat, TimezoneKey } from '../../../../../../../lib/utils/timestamp/types';
+import GazzodownText from '../../../../../../GazzodownText';
+
+export type PreviewProps = {
+	date: Date;
+	format: TimestampFormat;
+	timezone: TimezoneKey;
+};
+
+const Preview = ({ date, format, timezone }: PreviewProps) => {
+	const { t } = useTranslation();
+	const timestamp = dateToISOString(date, timezone);
+	const markup = generateTimestampMarkup(timestamp, format);
+	const tokens = parse(markup);
+
+	return (
+		<Box marginBlock='x16'>
+			<Field>
+				<FieldLabel>{t('Preview')}</FieldLabel>
+				<FieldRow>
+					<GazzodownText>
+						<Markup tokens={tokens} />
+					</GazzodownText>
+				</FieldRow>
+			</Field>
+		</Box>
+	);
+};
+
+export default Preview;

apps/meteor/client/components/message/toolbar/items/actions/Timestamp/TimestampPicker/TimePicker.tsx

@@ -0,0 +1,37 @@
+import { Box, Field, FieldLabel, FieldRow, InputBox } from '@rocket.chat/fuselage';
+import { format } from 'date-fns';
+import type { ChangeEvent } from 'react';
+import { useId } from 'react';
+import { useTranslation } from 'react-i18next';
+
+export type TimePickerProps = {
+	value: Date;
+	onChange: (date: Date) => void;
+};
+
+const TimePicker = ({ value, onChange }: TimePickerProps) => {
+	const { t } = useTranslation();
+	const fieldId = useId();
+
+	const handleTimeChange = (e: ChangeEvent<HTMLInputElement>) => {
+		const newDate = new Date(value);
+		const [hours, minutes] = e.target.value.split(':').map(Number);
+		newDate.setHours(hours, minutes, 0, 0);
+		onChange(newDate);
+	};
+
+	const timeValue = value && !isNaN(value.getTime()) ? format(value, 'HH:mm') : '';
+
+	return (
+		<Box marginBlock='x16'>
+			<Field>
+				<FieldLabel htmlFor={fieldId}>{t('Time')}</FieldLabel>
+				<FieldRow>
+					<InputBox id={fieldId} type='time' value={timeValue} onChange={handleTimeChange} />
+				</FieldRow>
+			</Field>
+		</Box>
+	);
+};
+
+export default TimePicker;

apps/meteor/client/components/message/toolbar/items/actions/Timestamp/TimestampPicker/TimestampPicker.spec.tsx

@@ -0,0 +1,154 @@
+import { mockAppRoot } from '@rocket.chat/mock-providers';
+import { composeStories } from '@storybook/react';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { axe } from 'jest-axe';
+
+import * as stories from './TimestampPicker.stories';
+import { TimestampPickerModal } from './TimestampPickerModal';
+import { dateToISOString, generateTimestampMarkup } from '../../../../../../../lib/utils/timestamp/conversion';
+import { TIMESTAMP_FORMATS } from '../../../../../../../lib/utils/timestamp/formats';
+
+jest.mock('../../../../../../GazzodownText', () => ({
+	__esModule: true,
+	default: () => <div data-testid='mock-gazzodown-text'>Mocked GazzodownText</div>,
+}));
+
+const wrapper = mockAppRoot().withUserPreference('useEmojis', true).withSetting('UI_Use_Real_Name', false).withJohnDoe();
+
+const testCases = Object.values(composeStories(stories)).map((Story) => [Story.storyName || 'Story', Story]);
+
+describe('Story Tests', () => {
+	beforeAll(() => {
+		jest.useFakeTimers();
+		jest.setSystemTime(new Date('2025-01-01T12:00:00.000Z'));
+	});
+
+	test.each(testCases)(`renders %s without crashing`, async (_storyname, Story) => {
+		const view = render(<Story />, { wrapper: wrapper.build() });
+		expect(view.baseElement).toMatchSnapshot();
+	});
+
+	test.each(testCases)(
+		`%s should be accessible`,
+		async (_storyname, Story) => {
+			jest.useRealTimers();
+
+			const { container } = render(<Story />, { wrapper: wrapper.build() });
+			/**
+			 ** Disable 'nested-interactive' rule because our `Select` component is still not a11y compliant
+			 **/
+			const results = await axe(container, {
+				rules: { 'nested-interactive': { enabled: false } },
+			});
+			expect(results).toHaveNoViolations();
+
+			jest.useFakeTimers();
+			jest.setSystemTime(new Date('2025-01-01T12:00:00.000Z'));
+		},
+		30000,
+	);
+
+	afterAll(() => {
+		jest.useRealTimers();
+	});
+});
+
+describe('TimestampPicker', () => {
+	const mockOnClose = jest.fn();
+	const mockComposer = { insertText: jest.fn() };
+
+	beforeEach(() => {
+		jest.clearAllMocks();
+	});
+
+	it('should complete timestamp creation workflow', async () => {
+		render(<TimestampPickerModal onClose={mockOnClose} composer={mockComposer as any} />, {
+			wrapper: wrapper.build(),
+		});
+
+		// 1. Select date
+		const dateInput = screen.getByDisplayValue(/\d{4}-\d{2}-\d{2}/);
+		await userEvent.type(dateInput, '{selectall}2025-07-25');
+
+		// 2. Select time
+		const timeInput = screen.getByDisplayValue(/\d{2}:\d{2}/);
+		await userEvent.type(timeInput, '{selectall}14:30');
+
+		// 3. Select format
+		const formatSelectButton = screen.getByRole('button', {
+			name: /timestamps\.fullDateTime/i,
+		});
+		await userEvent.click(formatSelectButton);
+
+		const formatOption = screen.getByRole('option', {
+			name: /timestamps\.fullDateTime \(timestamps\.fullDateTimeDescription\)/,
+		});
+		await userEvent.click(formatOption);
+
+		// 4. Select timezone
+		const timezoneSelects = screen.getAllByRole('button', { name: /Local_Time/ });
+		const timezoneSelect = timezoneSelects[0];
+		await userEvent.click(timezoneSelect);
+
+		const timezoneOption = screen.getByRole('option', { name: /UTC\+8/ });
+		await userEvent.click(timezoneOption);
+
+		// 5. Submit
+		const addButton = screen.getByRole('button', { name: /add/i });
+		await userEvent.click(addButton);
+
+		// Verify results
+		expect(mockComposer.insertText).toHaveBeenCalledTimes(1);
+		expect(mockOnClose).toHaveBeenCalledTimes(1);
+
+		const output = mockComposer.insertText.mock.calls[0][0];
+		expect(output).toMatch(/^<t::f>$/);
+	});
+
+	// Cancel Operation Test
+	it('should call onClose when cancel is clicked', async () => {
+		render(<TimestampPickerModal onClose={mockOnClose} />, { wrapper: wrapper.build() });
+
+		const cancelButton = screen.getByRole('button', { name: /cancel/i });
+		await userEvent.click(cancelButton);
+
+		expect(mockOnClose).toHaveBeenCalledTimes(1);
+	});
+
+	// Format Validation Test
+	it('should validate all timestamp formats', () => {
+		const testDate = new Date('2025-07-25T10:30:00.000Z');
+		const timestamp = dateToISOString(testDate, 'UTC+8');
+
+		Object.keys(TIMESTAMP_FORMATS).forEach((format) => {
+			const markup = generateTimestampMarkup(timestamp, format as any);
+			expect(markup).toBe(`<t:${timestamp}:${format}>`);
+		});
+	});
+});
+
+describe('Timestamp Conversion Logic', () => {
+	const testDate = new Date('2025-07-25T10:30:00.000Z');
+
+	it('should convert date to correct ISO string for different timezones', () => {
+		expect(dateToISOString(testDate, 'local')).toBe('2025-07-25T10:30:00.000+00:00');
+		expect(dateToISOString(testDate, 'UTC+8')).toContain('+08:00');
+		expect(dateToISOString(testDate, 'UTC-5')).toContain('-05:00');
+	});
+
+	it('should handle extreme timezone values', () => {
+		const extremeTimezones = ['UTC-12', 'UTC+12'];
+
+		extremeTimezones.forEach((timezone) => {
+			const result = dateToISOString(testDate, timezone as any);
+			expect(result).toMatch(/^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}\.\d{3}[+-]\d{2}:\d{2}$/);
+
+			if (timezone === 'UTC+12') {
+				expect(result).toContain('+12:00');
+			} else {
+				expect(result).toContain('-12:00');
+			}
+		});
+	});
+});

apps/meteor/client/components/message/toolbar/items/actions/Timestamp/TimestampPicker/TimestampPicker.stories.tsx

@@ -0,0 +1,31 @@
+import { mockAppRoot } from '@rocket.chat/mock-providers';
+import type { Meta, StoryFn } from '@storybook/react';
+import { action } from 'storybook/actions';
+
+import DatePicker from './DatePicker';
+import FormatSelector from './FormatSelector';
+import Preview from './Preview';
+import TimePicker from './TimePicker';
+import { TimestampPickerModal } from './TimestampPickerModal';
+import TimezoneSelector from './TimezoneSelector';
+
+export default {
+	component: TimestampPickerModal,
+	subcomponents: {
+		DatePicker,
+		TimePicker,
+		FormatSelector,
+		TimezoneSelector,
+		Preview,
+	},
+	decorators: [mockAppRoot().buildStoryDecorator()],
+	parameters: {
+		layout: 'fullscreen',
+	},
+} satisfies Meta<typeof TimestampPickerModal>;
+
+export const Default = () => <TimestampPickerModal onClose={action('onClose')} composer={{ insertText: action('insertText') } as any} />;
+
+export const DatePickerDefault: StoryFn<typeof DatePicker> = () => (
+	<DatePicker value={new Date('2025-07-25')} onChange={action('date-change')} />
+);

apps/meteor/client/components/message/toolbar/items/actions/Timestamp/TimestampPicker/TimestampPickerModal.tsx

@@ -0,0 +1,75 @@
+import { Box } from '@rocket.chat/fuselage';
+import { GenericModal } from '@rocket.chat/ui-client';
+import { useForm, Controller } from 'react-hook-form';
+import { useTranslation } from 'react-i18next';
+
+import DatePicker from './DatePicker';
+import FormatSelector from './FormatSelector';
+import Preview from './Preview';
+import TimePicker from './TimePicker';
+import TimezoneSelector from './TimezoneSelector';
+import type { ComposerAPI } from '../../../../../../../lib/chats/ChatAPI';
+import { dateToISOString, generateTimestampMarkup } from '../../../../../../../lib/utils/timestamp/conversion';
+import type { TimezoneKey, TimestampFormat } from '../../../../../../../lib/utils/timestamp/types';
+
+type TimestampForm = {
+	date: Date;
+	format: TimestampFormat;
+	timezone: TimezoneKey;
+};
+
+type TimestampPickerProps = {
+	onClose: () => void;
+	composer?: ComposerAPI;
+};
+
+export const TimestampPickerModal = ({ onClose, composer }: TimestampPickerProps) => {
+	const { t } = useTranslation();
+	const {
+		control,
+		handleSubmit,
+		watch,
+		formState: { isValid },
+	} = useForm<TimestampForm>({
+		defaultValues: {
+			date: new Date(),
+			format: 'f',
+			timezone: 'local',
+		},
+		mode: 'onChange',
+	});
+
+	const currentDate = watch('date');
+	const currentFormat = watch('format');
+	const currentTimezone = watch('timezone');
+
+	const onSubmit = (data: TimestampForm) => {
+		const timestamp = dateToISOString(data.date, data.timezone);
+		const markup = generateTimestampMarkup(timestamp, data.format);
+		if (composer) {
+			composer.insertText(markup);
+		}
+		onClose();
+	};
+
+	return (
+		<GenericModal
+			variant='warning'
+			icon={null}
+			title={t('Insert_timestamp')}
+			onConfirm={handleSubmit(onSubmit)}
+			onCancel={onClose}
+			onClose={onClose}
+			confirmText={t('Add')}
+			confirmDisabled={!isValid}
+		>
+			<Box display='flex' flexDirection='column'>
+				<Preview date={currentDate} format={currentFormat} timezone={currentTimezone} />
+				<Controller name='date' control={control} render={({ field }) => <DatePicker {...field} />} />
+				<Controller name='date' control={control} render={({ field }) => <TimePicker {...field} />} />
+				<Controller name='format' control={control} render={({ field }) => <FormatSelector {...field} />} />
+				<Controller name='timezone' control={control} render={({ field }) => <TimezoneSelector {...field} />} />
+			</Box>
+		</GenericModal>
+	);
+};

apps/meteor/client/components/message/toolbar/items/actions/Timestamp/TimestampPicker/TimezoneSelector.tsx

@@ -0,0 +1,39 @@
+import { Box, Field, FieldHint, FieldDescription, FieldLabel, FieldRow, Select } from '@rocket.chat/fuselage';
+import type { Key } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { UTCOffsets } from '../../../../../../../lib/utils/timestamp/types';
+import type { TimezoneKey } from '../../../../../../../lib/utils/timestamp/types';
+
+export type TimezoneSelectorProps = {
+	value: TimezoneKey;
+	onChange: (timezone: TimezoneKey) => void;
+};
+
+const TimezoneSelector = ({ value, onChange }: TimezoneSelectorProps) => {
+	const { t } = useTranslation();
+
+	const handleTimezoneChange = (key: Key): void => {
+		onChange(key as TimezoneKey);
+	};
+
+	const options: [string, string][] = [
+		['local', t('Local_Time')],
+		...Object.entries(UTCOffsets).map(([label]) => [label, label] as [string, string]),
+	];
+
+	return (
+		<Box marginBlock='x16'>
+			<Field>
+				<FieldLabel>{t('Timezone')}</FieldLabel>
+				<FieldDescription>{t('Timezone_picker_description')}</FieldDescription>
+				<FieldRow>
+					<Select value={value} onChange={handleTimezoneChange} options={options} width='full' />
+				</FieldRow>
+				<FieldHint>{t('Timezone_picker_hint')}</FieldHint>
+			</Field>
+		</Box>
+	);
+};
+
+export default TimezoneSelector;

apps/meteor/client/components/message/toolbar/items/actions/Timestamp/TimestampPicker/__snapshots__/TimestampPicker.spec.tsx.snap

@@ -0,0 +1,525 @@
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
+
+exports[`Story Tests renders DatePickerDefault without crashing 1`] = `
+<body>
+  <div>
+    <div
+      class="rcx-box rcx-box--full rcx-css-1bjg207"
+    >
+      <div
+        class="rcx-box rcx-box--full rcx-field"
+      >
+        <label
+          class="rcx-box rcx-box--full rcx-field__label rcx-label"
+          for="_r_0_"
+        >
+          Date
+        </label>
+        <span
+          class="rcx-box rcx-box--full rcx-field__row"
+        >
+          <label
+            class="rcx-box rcx-box--full rcx-label rcx-box rcx-box--full rcx-box--animated rcx-input-box__wrapper"
+          >
+            <input
+              class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--undecorated rcx-input-box--type-date rcx-input-box"
+              id="_r_0_"
+              size="1"
+              type="date"
+              value="2025-07-25"
+            />
+            <span
+              class="rcx-box rcx-box--full rcx-input-box__addon"
+            >
+              <i
+                aria-hidden="true"
+                class="rcx-box rcx-box--full rcx-icon--name-calendar rcx-icon rcx-css-4pvxx3"
+              >
+                
+              </i>
+            </span>
+          </label>
+        </span>
+      </div>
+    </div>
+  </div>
+</body>
+`;
+
+exports[`Story Tests renders Default without crashing 1`] = `
+<body>
+  <div>
+    <dialog
+      aria-labelledby="_r_1_-title"
+      aria-modal="true"
+      class="rcx-box rcx-box--full rcx-modal"
+      open=""
+    >
+      <div
+        class="rcx-box rcx-box--full rcx-modal__inner rcx-css-qtwduz"
+      >
+        <header
+          class="rcx-box rcx-box--full rcx-modal__header"
+        >
+          <div
+            class="rcx-box rcx-box--full rcx-modal__header-inner"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-modal__header-text rcx-css-trljwa rcx-css-lma364"
+            >
+              <h2
+                class="rcx-box rcx-box--full rcx-modal__title"
+                id="_r_1_-title"
+              >
+                Insert_timestamp
+              </h2>
+            </div>
+            <button
+              aria-label="Close"
+              class="rcx-box rcx-box--full rcx-button--small-square rcx-button--square rcx-button--icon rcx-button rcx-css-trljwa rcx-css-lma364"
+              tabindex="-1"
+              type="button"
+            >
+              <i
+                aria-hidden="true"
+                class="rcx-box rcx-box--full rcx-icon--name-cross rcx-icon rcx-css-4pvxx3"
+              >
+                
+              </i>
+            </button>
+          </div>
+        </header>
+        <div
+          class="rcx-box rcx-box--full rcx-modal__content rcx-css-1vw7itl"
+        >
+          <div
+            class="rcx-box rcx-box--full rcx-modal__content-wrapper rcx-css-r1bpeb"
+          >
+            <div
+              class="rcx-box rcx-box--full rcx-css-1tbw8nv"
+            >
+              <div
+                class="rcx-box rcx-box--full rcx-css-1bjg207"
+              >
+                <div
+                  class="rcx-box rcx-box--full rcx-field"
+                >
+                  <label
+                    class="rcx-box rcx-box--full rcx-field__label rcx-label"
+                  >
+                    Preview
+                  </label>
+                  <span
+                    class="rcx-box rcx-box--full rcx-field__row"
+                  >
+                    <div
+                      data-testid="mock-gazzodown-text"
+                    >
+                      Mocked GazzodownText
+                    </div>
+                  </span>
+                </div>
+              </div>
+              <div
+                class="rcx-box rcx-box--full rcx-css-1bjg207"
+              >
+                <div
+                  class="rcx-box rcx-box--full rcx-field"
+                >
+                  <label
+                    class="rcx-box rcx-box--full rcx-field__label rcx-label"
+                    for="_r_2_"
+                  >
+                    Date
+                  </label>
+                  <span
+                    class="rcx-box rcx-box--full rcx-field__row"
+                  >
+                    <label
+                      class="rcx-box rcx-box--full rcx-label rcx-box rcx-box--full rcx-box--animated rcx-input-box__wrapper"
+                    >
+                      <input
+                        class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--undecorated rcx-input-box--type-date rcx-input-box"
+                        id="_r_2_"
+                        size="1"
+                        type="date"
+                        value="2025-01-01"
+                      />
+                      <span
+                        class="rcx-box rcx-box--full rcx-input-box__addon"
+                      >
+                        <i
+                          aria-hidden="true"
+                          class="rcx-box rcx-box--full rcx-icon--name-calendar rcx-icon rcx-css-4pvxx3"
+                        >
+                          
+                        </i>
+                      </span>
+                    </label>
+                  </span>
+                </div>
+              </div>
+              <div
+                class="rcx-box rcx-box--full rcx-css-1bjg207"
+              >
+                <div
+                  class="rcx-box rcx-box--full rcx-field"
+                >
+                  <label
+                    class="rcx-box rcx-box--full rcx-field__label rcx-label"
+                    for="_r_3_"
+                  >
+                    Time
+                  </label>
+                  <span
+                    class="rcx-box rcx-box--full rcx-field__row"
+                  >
+                    <label
+                      class="rcx-box rcx-box--full rcx-label rcx-box rcx-box--full rcx-box--animated rcx-input-box__wrapper"
+                    >
+                      <input
+                        class="rcx-box rcx-box--full rcx-box--animated rcx-input-box--undecorated rcx-input-box--type-time rcx-input-box"
+                        id="_r_3_"
+                        size="1"
+                        type="time"
+                        value="12:00"
+                      />
+                      <span
+                        class="rcx-box rcx-box--full rcx-input-box__addon"
+                      >
+                        <i
+                          aria-hidden="true"
+                          class="rcx-box rcx-box--full rcx-icon--name-clock rcx-icon rcx-css-4pvxx3"
+                        >
+                          
+                        </i>
+                      </span>
+                    </label>
+                  </span>
+                </div>
+              </div>
+              <div
+                class="rcx-box rcx-box--full rcx-css-1bjg207"
+              >
+                <div
+                  class="rcx-box rcx-box--full rcx-field"
+                >
+                  <label
+                    class="rcx-box rcx-box--full rcx-field__label rcx-label"
+                  >
+                    Format
+                  </label>
+                  <span
+                    class="rcx-box rcx-box--full rcx-field__row"
+                  >
+                    <div
+                      class="rcx-box rcx-box--full rcx-css-1mbgoc8"
+                    >
+                      <div
+                        aria-hidden="true"
+                        data-a11y-ignore="aria-hidden-focus"
+                        data-react-aria-prevent-focus="true"
+                        data-testid="hidden-select-container"
+                        style="border: 0px; clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; width: 1px; white-space: nowrap;"
+                      >
+                        <label>
+                          <select
+                            tabindex="-1"
+                          >
+                            <option />
+                            <option
+                              value="t"
+                            >
+                              t
+                            </option>
+                            <option
+                              value="T"
+                            >
+                              T
+                            </option>
+                            <option
+                              value="d"
+                            >
+                              d
+                            </option>
+                            <option
+                              value="D"
+                            >
+                              D
+                            </option>
+                            <option
+                              value="f"
+                            >
+                              f
+                            </option>
+                            <option
+                              value="F"
+                            >
+                              F
+                            </option>
+                            <option
+                              value="R"
+                            >
+                              R
+                            </option>
+                          </select>
+                        </label>
+                      </div>
+                    </div>
+                    <button
+                      aria-expanded="false"
+                      aria-haspopup="listbox"
+                      aria-labelledby="react-aria-_r_b_"
+                      class="rcx-box rcx-box--full rcx-box--animated rcx-select rcx-css-1vw6rc6"
+                      type="button"
+                    >
+                      <span
+                        class="rcx-box rcx-box--full rcx-css-1ah8hdc"
+                        id="react-aria-_r_b_"
+                      >
+                        timestamps.fullDateTime (timestamps.fullDateTimeDescription)
+                      </span>
+                      <i
+                        aria-hidden="true"
+                        class="rcx-box rcx-box--full rcx-icon--name-chevron-down rcx-icon rcx-css-l5txo2"
+                      >
+                        
+                      </i>
+                    </button>
+                  </span>
+                </div>
+              </div>
+              <div
+                class="rcx-box rcx-box--full rcx-css-1bjg207"
+              >
+                <div
+                  class="rcx-box rcx-box--full rcx-field"
+                >
+                  <label
+                    class="rcx-box rcx-box--full rcx-field__label rcx-label"
+                  >
+                    Timezone
+                  </label>
+                  <span
+                    class="rcx-box rcx-box--full rcx-field__description"
+                  >
+                    Timezone_picker_description
+                  </span>
+                  <span
+                    class="rcx-box rcx-box--full rcx-field__row"
+                  >
+                    <div
+                      class="rcx-box rcx-box--full rcx-css-1mbgoc8"
+                    >
+                      <div
+                        aria-hidden="true"
+                        data-a11y-ignore="aria-hidden-focus"
+                        data-react-aria-prevent-focus="true"
+                        data-testid="hidden-select-container"
+                        style="border: 0px; clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; width: 1px; white-space: nowrap;"
+                      >
+                        <label>
+                          <select
+                            tabindex="-1"
+                          >
+                            <option />
+                            <option
+                              value="local"
+                            >
+                              local
+                            </option>
+                            <option
+                              value="UTC-12"
+                            >
+                              UTC-12
+                            </option>
+                            <option
+                              value="UTC-11"
+                            >
+                              UTC-11
+                            </option>
+                            <option
+                              value="UTC-10"
+                            >
+                              UTC-10
+                            </option>
+                            <option
+                              value="UTC-9"
+                            >
+                              UTC-9
+                            </option>
+                            <option
+                              value="UTC-8"
+                            >
+                              UTC-8
+                            </option>
+                            <option
+                              value="UTC-7"
+                            >
+                              UTC-7
+                            </option>
+                            <option
+                              value="UTC-6"
+                            >
+                              UTC-6
+                            </option>
+                            <option
+                              value="UTC-5"
+                            >
+                              UTC-5
+                            </option>
+                            <option
+                              value="UTC-4"
+                            >
+                              UTC-4
+                            </option>
+                            <option
+                              value="UTC-3"
+                            >
+                              UTC-3
+                            </option>
+                            <option
+                              value="UTC-2"
+                            >
+                              UTC-2
+                            </option>
+                            <option
+                              value="UTC-1"
+                            >
+                              UTC-1
+                            </option>
+                            <option
+                              value="UTC"
+                            >
+                              UTC
+                            </option>
+                            <option
+                              value="UTC+1"
+                            >
+                              UTC+1
+                            </option>
+                            <option
+                              value="UTC+2"
+                            >
+                              UTC+2
+                            </option>
+                            <option
+                              value="UTC+3"
+                            >
+                              UTC+3
+                            </option>
+                            <option
+                              value="UTC+4"
+                            >
+                              UTC+4
+                            </option>
+                            <option
+                              value="UTC+5"
+                            >
+                              UTC+5
+                            </option>
+                            <option
+                              value="UTC+6"
+                            >
+                              UTC+6
+                            </option>
+                            <option
+                              value="UTC+7"
+                            >
+                              UTC+7
+                            </option>
+                            <option
+                              value="UTC+8"
+                            >
+                              UTC+8
+                            </option>
+                            <option
+                              value="UTC+9"
+                            >
+                              UTC+9
+                            </option>
+                            <option
+                              value="UTC+10"
+                            >
+                              UTC+10
+                            </option>
+                            <option
+                              value="UTC+11"
+                            >
+                              UTC+11
+                            </option>
+                            <option
+                              value="UTC+12"
+                            >
+                              UTC+12
+                            </option>
+                          </select>
+                        </label>
+                      </div>
+                    </div>
+                    <button
+                      aria-expanded="false"
+                      aria-haspopup="listbox"
+                      aria-labelledby="react-aria-_r_j_"
+                      class="rcx-box rcx-box--full rcx-box--animated rcx-select rcx-css-1vw6rc6"
+                      type="button"
+                    >
+                      <span
+                        class="rcx-box rcx-box--full rcx-css-1ah8hdc"
+                        id="react-aria-_r_j_"
+                      >
+                        Local_Time
+                      </span>
+                      <i
+                        aria-hidden="true"
+                        class="rcx-box rcx-box--full rcx-icon--name-chevron-down rcx-icon rcx-css-l5txo2"
+                      >
+                        
+                      </i>
+                    </button>
+                  </span>
+                  <span
+                    class="rcx-box rcx-box--full rcx-field__hint"
+                  >
+                    Timezone_picker_hint
+                  </span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div
+          class="rcx-box rcx-box--full rcx-modal__footer rcx-css-17mu816"
+        >
+          <div
+            class="rcx-button-group rcx-button-group--align-end"
+            role="group"
+          >
+            <button
+              class="rcx-box rcx-box--full rcx-button--secondary rcx-button"
+              type="button"
+            >
+              <span
+                class="rcx-button--content"
+              >
+                Cancel
+              </span>
+            </button>
+            <button
+              class="rcx-box rcx-box--full rcx-button--primary rcx-button"
+              disabled=""
+              type="button"
+            >
+              <span
+                class="rcx-button--content"
+              >
+                Add
+              </span>
+            </button>
+          </div>
+        </div>
+      </div>
+    </dialog>
+  </div>
+</body>
+`;