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

apps/meteor/client/components/message/toolbar/MessageToolbar.tsx

@@ -0,0 +1,94 @@
+import { useToolbar } from '@react-aria/toolbar';
+import type { IMessage, IRoom, ISubscription, ITranslatedMessage } from '@rocket.chat/core-typings';
+import { isThreadMessage, isRoomFederated, isVideoConfMessage } from '@rocket.chat/core-typings';
+import { MessageToolbar as FuselageMessageToolbar } from '@rocket.chat/fuselage';
+import { useTranslation } from '@rocket.chat/ui-contexts';
+import type { ComponentProps, ElementType } from 'react';
+import { memo, useRef } from 'react';
+
+import MessageToolbarActionMenu from './MessageToolbarActionMenu';
+import MessageToolbarStarsActionMenu from './MessageToolbarStarsActionMenu';
+import DefaultItems from './items/DefaultItems';
+import DirectItems from './items/DirectItems';
+import FederatedItems from './items/FederatedItems';
+import MentionsItems from './items/MentionsItems';
+import MobileItems from './items/MobileItems';
+import PinnedItems from './items/PinnedItems';
+import SearchItems from './items/SearchItems';
+import StarredItems from './items/StarredItems';
+import ThreadsItems from './items/ThreadsItems';
+import VideoconfItems from './items/VideoconfItems';
+import VideoconfThreadsItems from './items/VideoconfThreadsItems';
+import type { MessageActionContext } from '../../../lib/MessageAction';
+
+const getMessageContext = (message: IMessage, room: IRoom, context?: MessageActionContext): MessageActionContext => {
+	if (context) {
+		return context;
+	}
+
+	if (isVideoConfMessage(message)) {
+		return 'videoconf';
+	}
+
+	if (isRoomFederated(room)) {
+		return 'federated';
+	}
+
+	if (isThreadMessage(message)) {
+		return 'threads';
+	}
+
+	return 'message';
+};
+
+const itemsByContext: Record<
+	MessageActionContext,
+	ElementType<{ message: IMessage; room: IRoom; subscription: ISubscription | undefined }>
+> = {
+	'message': DefaultItems,
+	'message-mobile': MobileItems,
+	'threads': ThreadsItems,
+	'videoconf': VideoconfItems,
+	'videoconf-threads': VideoconfThreadsItems,
+	'pinned': PinnedItems,
+	'direct': DirectItems,
+	'starred': StarredItems,
+	'mentions': MentionsItems,
+	'federated': FederatedItems,
+	'search': SearchItems,
+};
+
+export type MessageToolbarProps = {
+	message: IMessage & Partial<ITranslatedMessage>;
+	messageContext?: MessageActionContext;
+	room: IRoom;
+	subscription?: ISubscription;
+	onChangeMenuVisibility: (visible: boolean) => void;
+} & ComponentProps<typeof FuselageMessageToolbar>;
+
+const MessageToolbar = ({ message, messageContext, room, subscription, onChangeMenuVisibility, ...props }: MessageToolbarProps) => {
+	const t = useTranslation();
+
+	const toolbarRef = useRef(null);
+	const { toolbarProps } = useToolbar(props, toolbarRef);
+
+	const context = getMessageContext(message, room, messageContext);
+
+	const MessageToolbarItems = itemsByContext[context];
+
+	return (
+		<FuselageMessageToolbar ref={toolbarRef} {...toolbarProps} aria-label={t('Message_actions')} {...props}>
+			<MessageToolbarItems message={message} room={room} subscription={subscription} />
+			<MessageToolbarStarsActionMenu message={message} context={context} onChangeMenuVisibility={onChangeMenuVisibility} />
+			<MessageToolbarActionMenu
+				message={message}
+				context={context}
+				room={room}
+				subscription={subscription}
+				onChangeMenuVisibility={onChangeMenuVisibility}
+			/>
+		</FuselageMessageToolbar>
+	);
+};
+
+export default memo(MessageToolbar);

apps/meteor/client/components/message/toolbar/MessageToolbarActionMenu.tsx

@@ -0,0 +1,149 @@
+import { isE2EEMessage, type IMessage, type IRoom, type ISubscription } from '@rocket.chat/core-typings';
+import { isTruthy } from '@rocket.chat/tools';
+import { GenericMenu, type GenericMenuItemProps } from '@rocket.chat/ui-client';
+import { useLayoutHiddenActions } from '@rocket.chat/ui-contexts';
+import { useId } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { useCopyAction } from './useCopyAction';
+import { useDeleteMessageAction } from './useDeleteMessageAction';
+import { useEditMessageAction } from './useEditMessageAction';
+import { useFollowMessageAction } from './useFollowMessageAction';
+import { useMarkAsUnreadMessageAction } from './useMarkAsUnreadMessageAction';
+import { useMessageActionAppsActionButtons } from './useMessageActionAppsActionButtons';
+import { useNewDiscussionMessageAction } from './useNewDiscussionMessageAction';
+import { usePermalinkAction } from './usePermalinkAction';
+import { usePinMessageAction } from './usePinMessageAction';
+import { useReadReceiptsDetailsAction } from './useReadReceiptsDetailsAction';
+import { useReplyInDMAction } from './useReplyInDMAction';
+import { useReportMessageAction } from './useReportMessageAction';
+import { useShowMessageReactionsAction } from './useShowMessageReactionsAction';
+import { useStarMessageAction } from './useStarMessageAction';
+import { useTranslateAction } from './useTranslateAction';
+import { useUnFollowMessageAction } from './useUnFollowMessageAction';
+import { useUnpinMessageAction } from './useUnpinMessageAction';
+import { useUnstarMessageAction } from './useUnstarMessageAction';
+import { useViewOriginalTranslationAction } from './useViewOriginalTranslationAction';
+import { useWebDAVMessageAction } from './useWebDAVMessageAction';
+import type { MessageActionContext } from '../../../lib/MessageAction';
+
+type MessageActionSection = {
+	id: string;
+	title: string;
+	items: GenericMenuItemProps[];
+};
+
+export type MessageToolbarActionMenuProps = {
+	message: IMessage;
+	context: MessageActionContext;
+	room: IRoom;
+	subscription: ISubscription | undefined;
+	onChangeMenuVisibility: (visible: boolean) => void;
+};
+
+const MessageToolbarActionMenu = ({ message, context, room, subscription, onChangeMenuVisibility }: MessageToolbarActionMenuProps) => {
+	// TODO: move this to another place
+	const menuItems = [
+		useWebDAVMessageAction(message, { subscription }),
+		useNewDiscussionMessageAction(message, { room, subscription }),
+		useUnpinMessageAction(message, { room, subscription }),
+		usePinMessageAction(message, { room, subscription }),
+		useStarMessageAction(message, { room }),
+		useUnstarMessageAction(message, { room }),
+		usePermalinkAction(message, { id: 'permalink-star', context: ['starred'], order: 10 }, { room }),
+		usePermalinkAction(message, { id: 'permalink-pinned', context: ['pinned'], order: 5 }, { room }),
+		usePermalinkAction(
+			message,
+			{
+				id: 'permalink',
+				context: ['message', 'message-mobile', 'threads', 'federated', 'videoconf', 'videoconf-threads'],
+				type: 'duplication',
+				order: 5,
+			},
+			{ room },
+		),
+		useFollowMessageAction(message, { room, context }),
+		useUnFollowMessageAction(message, { room, context }),
+		useMarkAsUnreadMessageAction(message, { room, subscription }),
+		useTranslateAction(message, { room, subscription }),
+		useViewOriginalTranslationAction(message, { room, subscription }),
+		useReplyInDMAction(message, { room, subscription }),
+		useCopyAction(message, { subscription }),
+		useEditMessageAction(message, { room, subscription }),
+		useDeleteMessageAction(message, { room, subscription }),
+		useReportMessageAction(message, { room, subscription }),
+		useShowMessageReactionsAction(message),
+		useReadReceiptsDetailsAction(message),
+	];
+
+	const hiddenActions = useLayoutHiddenActions().messageToolbox;
+	const data = menuItems
+		.filter(isTruthy)
+		.filter((button) => button.group === 'menu')
+		.filter((button) => !button.context || button.context.includes(context))
+		.filter((action) => !hiddenActions.includes(action.id))
+		.sort((a, b) => (a.order ?? 0) - (b.order ?? 0));
+
+	const actionButtonApps = useMessageActionAppsActionButtons(message, context);
+
+	const id = useId();
+	const { t } = useTranslation();
+
+	if (data.length === 0) {
+		return null;
+	}
+
+	const isMessageEncrypted = isE2EEMessage(message);
+
+	const groupOptions = [...data, ...(actionButtonApps.data ?? [])]
+		.map((option) => ({
+			variant: option.variant,
+			id: option.id,
+			icon: option.icon,
+			content: t(option.label),
+			onClick: option.action,
+			type: option.type,
+			...(option.tooltip && { tooltip: option.tooltip }),
+			...(typeof option.disabled === 'boolean' && { disabled: option.disabled }),
+		}))
+		.reduce((acc, option) => {
+			const group = option.type ? option.type : '';
+			const section = acc.find((section: { id: string }) => section.id === group);
+			if (section) {
+				section.items.push(option);
+				return acc;
+			}
+			const newSection = { id: group, title: group === 'apps' ? t('Apps') : '', items: [option] };
+			acc.push(newSection);
+
+			return acc;
+		}, [] as MessageActionSection[])
+		.map((section) => {
+			if (section.id !== 'apps') {
+				return section;
+			}
+
+			if (!isMessageEncrypted) {
+				return section;
+			}
+
+			return {
+				id: 'apps',
+				title: t('Apps'),
+				items: [
+					{
+						content: t('Unavailable'),
+						type: 'apps',
+						id,
+						disabled: true,
+						gap: false,
+						tooltip: t('Action_not_available_encrypted_content', { action: t('Apps') }),
+					},
+				],
+			};
+		});
+
+	return <GenericMenu onOpenChange={onChangeMenuVisibility} detached title={t('More')} sections={groupOptions} placement='bottom-end' />;
+};
+
+export default MessageToolbarActionMenu;

apps/meteor/client/components/message/toolbar/MessageToolbarItem.tsx

@@ -0,0 +1,24 @@
+import { MessageToolbarItem as FuselageMessageToolbarItem } from '@rocket.chat/fuselage';
+import type { Keys as IconName } from '@rocket.chat/icons';
+import { useLayoutHiddenActions } from '@rocket.chat/ui-contexts';
+import type { MouseEventHandler } from 'react';
+
+export type MessageToolbarItemProps = {
+	id: string;
+	icon: IconName;
+	title: string;
+	disabled?: boolean;
+	onClick: MouseEventHandler;
+};
+
+const MessageToolbarItem = ({ id, icon, title, disabled, onClick }: MessageToolbarItemProps) => {
+	const hiddenActions = useLayoutHiddenActions().messageToolbox;
+
+	if (hiddenActions.includes(id)) {
+		return null;
+	}
+
+	return <FuselageMessageToolbarItem icon={icon} title={title} disabled={disabled} onClick={onClick} />;
+};
+
+export default MessageToolbarItem;

apps/meteor/client/components/message/toolbar/MessageToolbarStarsActionMenu.tsx

@@ -0,0 +1,83 @@
+import { isE2EEMessage, type IMessage } from '@rocket.chat/core-typings';
+import { GenericMenu, type GenericMenuItemProps } from '@rocket.chat/ui-client';
+import { useId } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { useMessageActionAppsActionButtons } from './useMessageActionAppsActionButtons';
+import type { MessageActionContext } from '../../../lib/MessageAction';
+
+type MessageActionSection = {
+	id: string;
+	title: string;
+	items: GenericMenuItemProps[];
+};
+
+type MessageActionMenuProps = {
+	message: IMessage;
+	context: MessageActionContext;
+	onChangeMenuVisibility: (visible: boolean) => void;
+};
+
+const MessageToolbarStarsActionMenu = ({ message, context, onChangeMenuVisibility }: MessageActionMenuProps) => {
+	const starsAction = useMessageActionAppsActionButtons(message, context, 'ai');
+	const { t } = useTranslation();
+	const id = useId();
+
+	if (!starsAction.data?.length) {
+		return null;
+	}
+
+	const isMessageEncrypted = isE2EEMessage(message);
+
+	const groupOptions = starsAction.data.reduce((acc, option) => {
+		const transformedOption = {
+			variant: option.variant,
+			id: option.id,
+			icon: option.icon,
+			content: t(option.label),
+			onClick: option.action,
+			type: option.type,
+			...(option.tooltip && { tooltip: option.tooltip }),
+			...(typeof option.disabled === 'boolean' && { disabled: option.disabled }),
+		};
+
+		const group = option.type || '';
+		let section = acc.find((section: { id: string }) => section.id === group);
+
+		if (!section) {
+			section = { id: group, title: '', items: [] };
+			acc.push(section);
+		}
+
+		// Add option to the appropriate section
+		section.items.push(transformedOption);
+
+		// Handle the "apps" section if message is encrypted
+		if (group === 'apps' && isMessageEncrypted) {
+			section.items = [
+				{
+					content: t('Unavailable'),
+					id,
+					disabled: true,
+					gap: false,
+					tooltip: t('Action_not_available_encrypted_content', { action: t('Apps') }),
+				},
+			];
+		}
+
+		return acc;
+	}, [] as MessageActionSection[]);
+
+	return (
+		<GenericMenu
+			detached
+			icon='stars'
+			title={t('AI_Actions')}
+			sections={groupOptions}
+			placement='bottom-end'
+			onOpenChange={onChangeMenuVisibility}
+		/>
+	);
+};
+
+export default MessageToolbarStarsActionMenu;

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>
+`;

apps/meteor/client/components/message/toolbar/useCopyAction.ts

@@ -0,0 +1,39 @@
+import type { IMessage, ISubscription } from '@rocket.chat/core-typings';
+import { useToastMessageDispatch } from '@rocket.chat/ui-contexts';
+import { useTranslation } from 'react-i18next';
+
+import type { MessageActionConfig } from '../../../lib/MessageAction';
+
+const getMainMessageText = (message: IMessage): IMessage => {
+	const newMessage = { ...message };
+	newMessage.msg = newMessage.msg || newMessage.attachments?.[0]?.description || newMessage.attachments?.[0]?.title || '';
+	newMessage.md = newMessage.md || newMessage.attachments?.[0]?.descriptionMd || undefined;
+	return { ...newMessage };
+};
+
+export const useCopyAction = (
+	message: IMessage,
+	{ subscription }: { subscription: ISubscription | undefined },
+): MessageActionConfig | null => {
+	const { t } = useTranslation();
+	const dispatchToastMessage = useToastMessageDispatch();
+
+	if (!subscription) {
+		return null;
+	}
+
+	return {
+		id: 'copy',
+		icon: 'copy',
+		label: 'Copy_text',
+		context: ['message', 'message-mobile', 'threads', 'federated'],
+		type: 'duplication',
+		async action() {
+			const msgText = getMainMessageText(message).msg;
+			await navigator.clipboard.writeText(msgText);
+			dispatchToastMessage({ type: 'success', message: t('Copied') });
+		},
+		order: 6,
+		group: 'menu',
+	};
+};

apps/meteor/client/components/message/toolbar/useDeleteMessageAction.ts

@@ -0,0 +1,54 @@
+import { isRoomFederated } from '@rocket.chat/core-typings';
+import type { ISubscription, IRoom, IMessage } from '@rocket.chat/core-typings';
+import { useUser } from '@rocket.chat/ui-contexts';
+import { useQuery } from '@tanstack/react-query';
+
+import type { MessageActionConfig } from '../../../lib/MessageAction';
+import { roomCoordinator } from '../../../lib/rooms/roomCoordinator';
+import { useChat } from '../../../views/room/contexts/ChatContext';
+
+export const useDeleteMessageAction = (
+	message: IMessage,
+	{ room, subscription }: { room: IRoom; subscription: ISubscription | undefined },
+): MessageActionConfig | null => {
+	const user = useUser();
+	const chat = useChat();
+
+	const { data: condition = false } = useQuery({
+		queryKey: ['delete-message', message] as const,
+		queryFn: async () => {
+			if (!subscription) {
+				return false;
+			}
+
+			if (isRoomFederated(room)) {
+				return message.u._id === user?._id;
+			}
+
+			const isLivechatRoom = roomCoordinator.isLivechatRoom(room.t);
+			if (isLivechatRoom) {
+				return false;
+			}
+
+			return chat?.data.canDeleteMessage(message) ?? false;
+		},
+	});
+
+	if (!condition) {
+		return null;
+	}
+
+	return {
+		id: 'delete-message',
+		icon: 'trash',
+		label: 'Delete',
+		context: ['message', 'message-mobile', 'threads', 'federated', 'videoconf', 'videoconf-threads'],
+		variant: 'danger',
+		type: 'management',
+		async action() {
+			await chat?.flows.requestMessageDeletion(message);
+		},
+		order: 10,
+		group: 'menu',
+	};
+};

apps/meteor/client/components/message/toolbar/useEditMessageAction.ts

@@ -0,0 +1,58 @@
+import { isRoomFederated } from '@rocket.chat/core-typings';
+import type { IRoom, IMessage, ISubscription } from '@rocket.chat/core-typings';
+import { usePermission, useSetting, useUser } from '@rocket.chat/ui-contexts';
+import { differenceInMinutes } from 'date-fns';
+
+import type { MessageActionConfig } from '../../../lib/MessageAction';
+import { useChat } from '../../../views/room/contexts/ChatContext';
+
+export const useEditMessageAction = (
+	message: IMessage,
+	{ room, subscription }: { room: IRoom; subscription: ISubscription | undefined },
+): MessageActionConfig | null => {
+	const user = useUser();
+	const chat = useChat();
+	const isEditAllowed = useSetting('Message_AllowEditing', true);
+	const canEditMessage = usePermission('edit-message', message.rid);
+	const blockEditInMinutes = useSetting('Message_AllowEditing_BlockEditInMinutes', 0);
+	const canBypassBlockTimeLimit = usePermission('bypass-time-limit-edit-and-delete', message.rid);
+
+	if (!subscription) {
+		return null;
+	}
+
+	const condition = (() => {
+		if (isRoomFederated(room)) {
+			return message.u._id === user?._id;
+		}
+
+		const editOwn = message.u && message.u._id === user?._id;
+		if (!canEditMessage && (!isEditAllowed || !editOwn)) {
+			return false;
+		}
+
+		if (!canBypassBlockTimeLimit && blockEditInMinutes) {
+			const currentTsDiff = message.ts ? differenceInMinutes(new Date(), message.ts) : undefined;
+			return typeof currentTsDiff === 'number' && currentTsDiff < blockEditInMinutes;
+		}
+
+		return true;
+	})();
+
+	if (!condition) {
+		return null;
+	}
+
+	return {
+		id: 'edit-message',
+		icon: 'edit',
+		label: 'Edit',
+		context: ['message', 'message-mobile', 'threads', 'federated'],
+		type: 'management',
+		async action() {
+			await chat?.messageEditing.editMessage(message);
+		},
+		order: 8,
+		group: 'menu',
+	};
+};

apps/meteor/client/components/message/toolbar/useFollowMessageAction.ts

@@ -0,0 +1,62 @@
+import type { IMessage, IRoom } from '@rocket.chat/core-typings';
+import { isOmnichannelRoom } from '@rocket.chat/core-typings';
+import { useSetting, useToastMessageDispatch, useUser } from '@rocket.chat/ui-contexts';
+
+import { t } from '../../../../app/utils/lib/i18n';
+import type { MessageActionContext, MessageActionConfig } from '../../../lib/MessageAction';
+import { Messages } from '../../../stores';
+import { useToggleFollowingThreadMutation } from '../../../views/room/contextualBar/Threads/hooks/useToggleFollowingThreadMutation';
+
+export const useFollowMessageAction = (
+	message: IMessage,
+	{ room, context }: { room: IRoom; context: MessageActionContext },
+): MessageActionConfig | null => {
+	const user = useUser();
+	const threadsEnabled = useSetting('Threads_enabled');
+
+	const dispatchToastMessage = useToastMessageDispatch();
+
+	const { mutate: toggleFollowingThread } = useToggleFollowingThreadMutation({
+		onSuccess: () => {
+			dispatchToastMessage({
+				type: 'success',
+				message: t('You_followed_this_message'),
+			});
+		},
+	});
+
+	const { tmid, _id } = message;
+	const parentMessage = Messages.use((state) => state.find((record) => record._id === tmid || record._id === _id));
+
+	if (!message || !threadsEnabled || isOmnichannelRoom(room)) {
+		return null;
+	}
+
+	let { replies = [] } = message;
+	if (tmid || context) {
+		if (parentMessage) {
+			replies = parentMessage.replies || [];
+		}
+	}
+
+	if (!user?._id) {
+		return null;
+	}
+
+	if (replies.includes(user._id)) {
+		return null;
+	}
+
+	return {
+		id: 'follow-message',
+		icon: 'bell',
+		label: 'Follow_message',
+		type: 'interaction',
+		context: ['message', 'message-mobile', 'threads', 'federated', 'videoconf', 'videoconf-threads'],
+		action() {
+			toggleFollowingThread({ tmid: tmid || _id, follow: true, rid: room._id });
+		},
+		order: 1,
+		group: 'menu',
+	};
+};

apps/meteor/client/components/message/toolbar/useMarkAsUnreadMessageAction.ts

@@ -0,0 +1,42 @@
+import { isOmnichannelRoom } from '@rocket.chat/core-typings';
+import type { ISubscription, IMessage, IRoom } from '@rocket.chat/core-typings';
+import { useRouter, useUser } from '@rocket.chat/ui-contexts';
+
+import type { MessageActionConfig } from '../../../lib/MessageAction';
+import { useMarkAsUnreadMutation } from '../hooks/useMarkAsUnreadMutation';
+
+export const useMarkAsUnreadMessageAction = (
+	message: IMessage,
+	{ room, subscription }: { room: IRoom; subscription: ISubscription | undefined },
+): MessageActionConfig | null => {
+	const user = useUser();
+	const { mutateAsync: markAsUnread } = useMarkAsUnreadMutation();
+
+	const router = useRouter();
+
+	if (isOmnichannelRoom(room) || !user) {
+		return null;
+	}
+
+	if (!subscription) {
+		return null;
+	}
+
+	if (message.u._id === user._id) {
+		return null;
+	}
+
+	return {
+		id: 'mark-message-as-unread',
+		icon: 'flag',
+		label: 'Mark_unread',
+		context: ['message', 'message-mobile', 'threads', 'federated'],
+		type: 'interaction',
+		async action() {
+			router.navigate('/home');
+			await markAsUnread({ message, subscription });
+		},
+		order: 4,
+		group: 'menu',
+	};
+};

apps/meteor/client/components/message/toolbar/useMessageActionAppsActionButtons.ts

@@ -0,0 +1,77 @@
+import { type IUIActionButton, MessageActionContext as AppsEngineMessageActionContext } from '@rocket.chat/apps-engine/definition/ui';
+import type { IMessage } from '@rocket.chat/core-typings';
+import { useToastMessageDispatch } from '@rocket.chat/ui-contexts';
+import { useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { Utilities } from '../../../../ee/lib/misc/Utilities';
+import { useAppActionButtons, getIdForActionButton } from '../../../hooks/useAppActionButtons';
+import { useApplyButtonFilters } from '../../../hooks/useApplyButtonFilters';
+import type { MessageActionContext, MessageActionConfig } from '../../../lib/MessageAction';
+import { UiKitTriggerTimeoutError } from '../../../lib/errors/UiKitTriggerTimeoutError';
+import { useUiKitActionManager } from '../../../uikit/hooks/useUiKitActionManager';
+
+const filterActionsByContext = (context: string | undefined, action: IUIActionButton) => {
+	if (!context) {
+		return true;
+	}
+
+	const messageActionContext = action.when?.messageActionContext || Object.values(AppsEngineMessageActionContext);
+	const isContextMatch = messageActionContext.includes(context as AppsEngineMessageActionContext);
+
+	return isContextMatch;
+};
+
+export const useMessageActionAppsActionButtons = (message: IMessage, context?: MessageActionContext, category?: string) => {
+	const result = useAppActionButtons('messageAction');
+	const actionManager = useUiKitActionManager();
+	const applyButtonFilters = useApplyButtonFilters(category);
+	const dispatchToastMessage = useToastMessageDispatch();
+	const { t } = useTranslation();
+	const data = useMemo(
+		() =>
+			result.data
+				?.filter((action) => filterActionsByContext(context, action))
+				.filter((action) => applyButtonFilters(action))
+				.map((action) => {
+					const item: MessageActionConfig = {
+						icon: undefined as any,
+						id: getIdForActionButton(action),
+						label: Utilities.getI18nKeyForApp(action.labelI18n, action.appId),
+						order: 7,
+						type: 'apps',
+						variant: action.variant,
+						group: 'menu',
+						action: () => {
+							void actionManager
+								.emitInteraction(action.appId, {
+									type: 'actionButton',
+									rid: message.rid,
+									tmid: message.tmid,
+									mid: message._id,
+									actionId: action.actionId,
+									payload: { context: action.context },
+								})
+								.catch(async (reason) => {
+									if (reason instanceof UiKitTriggerTimeoutError) {
+										dispatchToastMessage({
+											type: 'error',
+											message: t('UIKit_Interaction_Timeout'),
+										});
+										return;
+									}
+
+									return reason;
+								});
+						},
+					};
+
+					return item;
+				}),
+		[actionManager, applyButtonFilters, context, dispatchToastMessage, message._id, message.rid, message.tmid, result.data, t],
+	);
+	return {
+		...result,
+		data,
+	};
+};

apps/meteor/client/components/message/toolbar/useNewDiscussionMessageAction.tsx

@@ -0,0 +1,70 @@
+import type { IMessage, IRoom, ISubscription } from '@rocket.chat/core-typings';
+import { usePermission, useSetModal, useSetting, useUser } from '@rocket.chat/ui-contexts';
+
+import type { MessageActionConfig } from '../../../lib/MessageAction';
+import { roomCoordinator } from '../../../lib/rooms/roomCoordinator';
+import CreateDiscussion from '../../CreateDiscussion';
+
+export const useNewDiscussionMessageAction = (
+	message: IMessage,
+	{ room, subscription }: { room: IRoom; subscription: ISubscription | undefined },
+): MessageActionConfig | null => {
+	const user = useUser();
+	const enabled = useSetting('Discussion_enabled', false);
+
+	const setModal = useSetModal();
+
+	const canStartDiscussion = usePermission('start-discussion', room._id);
+	const canStartDiscussionOtherUser = usePermission('start-discussion-other-user', room._id);
+
+	if (!enabled) {
+		return null;
+	}
+
+	const {
+		u: { _id: uid },
+		drid,
+		dcount,
+	} = message;
+	if (drid || !Number.isNaN(Number(dcount))) {
+		return null;
+	}
+
+	if (!subscription) {
+		return null;
+	}
+
+	const isLivechatRoom = roomCoordinator.isLivechatRoom(room.t);
+	if (isLivechatRoom) {
+		return null;
+	}
+
+	if (!user) {
+		return null;
+	}
+
+	if (!(uid !== user._id ? canStartDiscussionOtherUser : canStartDiscussion)) {
+		return null;
+	}
+
+	return {
+		id: 'start-discussion',
+		icon: 'discussion',
+		label: 'Discussion_start',
+		type: 'communication',
+		context: ['message', 'message-mobile', 'videoconf'],
+		async action() {
+			setModal(
+				<CreateDiscussion
+					defaultParentRoom={room?.prid || room?._id}
+					onClose={() => setModal(undefined)}
+					parentMessageId={message._id}
+					nameSuggestion={message?.msg?.substr(0, 140)}
+					encryptedParentRoom={room?.encrypted}
+				/>,
+			);
+		},
+		order: 1,
+		group: 'menu',
+	};
+};

apps/meteor/client/components/message/toolbar/usePermalinkAction.spec.ts

@@ -0,0 +1,171 @@
+import type { MessageActionContext } from '@rocket.chat/apps-engine/definition/ui';
+import type { IMessage, IRoom } from '@rocket.chat/core-typings';
+import { mockAppRoot } from '@rocket.chat/mock-providers';
+import { renderHook } from '@testing-library/react';
+
+import { usePermalinkAction } from './usePermalinkAction';
+import { createFakeUser } from '../../../../tests/mocks/data';
+import type { MessageActionConfig } from '../../../lib/MessageAction';
+
+// Mock the getPermaLink function
+jest.mock('../../../lib/getPermaLink', () => ({
+	getPermaLink: jest.fn(() => Promise.resolve('https://example.com/permalink')),
+}));
+
+const user = createFakeUser({
+	_id: 'current-user-id',
+	username: 'currentuser',
+	active: true,
+	roles: ['admin'],
+	type: 'user',
+});
+
+const appRoot = mockAppRoot()
+	.withUser(user)
+	.withTranslations('en', 'core', {
+		Copy_link: 'Copy link',
+		Copied: 'Copied',
+	})
+	.build();
+
+const createMockMessage = (overrides: Partial<IMessage> = {}): IMessage => ({
+	_id: 'message-id',
+	rid: 'room-id',
+	msg: 'Test message',
+	ts: new Date(),
+	u: { _id: 'user-id', username: 'testuser' },
+	_updatedAt: new Date(),
+	channels: [],
+	file: { _id: 'file-id', name: 'file.txt', type: 'text/plain', size: 100, format: 'text/plain' },
+	mentions: [],
+	reactions: {},
+	starred: [],
+	...overrides,
+});
+
+const createMockRoom = (overrides: Partial<IRoom> = {}): IRoom => ({
+	_id: 'room-id',
+	t: 'c' as const,
+	name: 'test-room',
+	msgs: 0,
+	u: { _id: 'user-id', username: 'testuser' },
+	usersCount: 1,
+	_updatedAt: new Date(),
+	...overrides,
+});
+
+describe('usePermalinkAction', () => {
+	it('should be enabled for normal messages', () => {
+		const message = createMockMessage();
+		const room = createMockRoom();
+		const config = {
+			id: 'permalink',
+			context: ['message', 'message-mobile'],
+			type: 'communication',
+			order: 0,
+		} as { context: MessageActionContext[]; order: number } & Pick<MessageActionConfig, 'id' | 'type'>;
+
+		const { result } = renderHook(() => usePermalinkAction(message, config, { room }), { wrapper: appRoot });
+
+		expect(result.current).toEqual({
+			id: 'permalink',
+			icon: 'permalink',
+			label: 'Copy_link',
+			context: ['message', 'message-mobile'],
+			type: 'communication',
+			action: expect.any(Function),
+			order: 0,
+			group: 'menu',
+			disabled: false,
+		});
+	});
+	it('should be disabled for encrypted messages', () => {
+		const message = createMockMessage({
+			t: 'e2e',
+			e2e: 'done',
+		});
+		const room = createMockRoom();
+		const config = {
+			id: 'permalink',
+			context: ['message', 'message-mobile'],
+			type: 'communication',
+			order: 0,
+		} as { context: MessageActionContext[]; order: number } & Pick<MessageActionConfig, 'id' | 'type'>;
+
+		const { result } = renderHook(() => usePermalinkAction(message, config, { room }), { wrapper: appRoot });
+
+		expect(result.current).toEqual({
+			id: 'permalink',
+			icon: 'permalink',
+			label: 'Copy_link',
+			context: ['message', 'message-mobile'],
+			type: 'communication',
+			action: expect.any(Function),
+			order: 0,
+			group: 'menu',
+			disabled: true,
+			tooltip: 'Action_not_available_encrypted_content',
+		});
+	});
+
+	it('should be disabled for ABAC rooms', () => {
+		const message = createMockMessage();
+		const room = createMockRoom({
+			// @ts-expect-error to be implemented
+			abacAttributes: { someAttribute: 'value' },
+		});
+		const config = {
+			id: 'permalink',
+			context: ['message', 'message-mobile'],
+			type: 'communication',
+			order: 0,
+		} as { context: MessageActionContext[]; order: number } & Pick<MessageActionConfig, 'id' | 'type'>;
+
+		const { result } = renderHook(() => usePermalinkAction(message, config, { room }), { wrapper: appRoot });
+
+		expect(result.current).toEqual({
+			id: 'permalink',
+			icon: 'permalink',
+			label: 'Copy_link',
+			context: ['message', 'message-mobile'],
+			type: 'communication',
+			action: expect.any(Function),
+			order: 0,
+			group: 'menu',
+			disabled: true,
+			tooltip: 'Not_available_for_ABAC_enabled_rooms',
+		});
+	});
+
+	it('should be disabled for both encrypted messages and ABAC rooms', () => {
+		const message = createMockMessage({
+			t: 'e2e',
+			e2e: 'done',
+		});
+		const room = createMockRoom({
+			// @ts-expect-error to be implemented
+			abacAttributes: { someAttribute: 'value' },
+		});
+		const config = {
+			id: 'permalink',
+			context: ['message', 'message-mobile'],
+			type: 'communication',
+			order: 0,
+		} as { context: MessageActionContext[]; order: number } & Pick<MessageActionConfig, 'id' | 'type'>;
+
+		const { result } = renderHook(() => usePermalinkAction(message, config, { room }), { wrapper: appRoot });
+
+		expect(result.current).toEqual({
+			id: 'permalink',
+			icon: 'permalink',
+			label: 'Copy_link',
+			context: ['message', 'message-mobile'],
+			type: 'communication',
+			action: expect.any(Function),
+			order: 0,
+			group: 'menu',
+			disabled: true,
+			tooltip: 'Action_not_available_encrypted_content',
+		});
+	});
+});

apps/meteor/client/components/message/toolbar/usePermalinkAction.ts

@@ -0,0 +1,51 @@
+import type { IMessage, IRoom } from '@rocket.chat/core-typings';
+import { isE2EEMessage } from '@rocket.chat/core-typings';
+import { useToastMessageDispatch } from '@rocket.chat/ui-contexts';
+import { useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import type { MessageActionConfig, MessageActionContext } from '../../../lib/MessageAction';
+import { getPermaLink } from '../../../lib/getPermaLink';
+
+export const usePermalinkAction = (
+	message: IMessage,
+	{ id, context, type, order }: { context: MessageActionContext[]; order: number } & Pick<MessageActionConfig, 'id' | 'type'>,
+	{ room }: { room: IRoom },
+): MessageActionConfig | null => {
+	const { t } = useTranslation();
+
+	const dispatchToastMessage = useToastMessageDispatch();
+
+	const isABACEnabled = !!room.abacAttributes;
+	const encrypted = isE2EEMessage(message);
+	const tooltip = useMemo(() => {
+		if (encrypted) {
+			return t('Action_not_available_encrypted_content', { action: t('Copy_link') });
+		}
+		if (isABACEnabled) {
+			return t('Not_available_for_ABAC_enabled_rooms');
+		}
+		return null;
+	}, [encrypted, isABACEnabled, t]);
+
+	return {
+		id,
+		icon: 'permalink',
+		label: 'Copy_link',
+		context,
+		type,
+		async action() {
+			try {
+				const permalink = await getPermaLink(message._id);
+				navigator.clipboard.writeText(permalink);
+				dispatchToastMessage({ type: 'success', message: t('Copied') });
+			} catch (e) {
+				dispatchToastMessage({ type: 'error', message: e });
+			}
+		},
+		order,
+		group: 'menu',
+		disabled: encrypted || isABACEnabled,
+		...(tooltip && { tooltip }),
+	};
+};

apps/meteor/client/components/message/toolbar/usePinMessageAction.tsx

@@ -0,0 +1,40 @@
+import type { IMessage, IRoom, ISubscription } from '@rocket.chat/core-typings';
+import { isOmnichannelRoom } from '@rocket.chat/core-typings';
+import { useSetting, useSetModal, usePermission } from '@rocket.chat/ui-contexts';
+
+import type { MessageActionConfig } from '../../../lib/MessageAction';
+import PinMessageModal from '../../../views/room/modals/PinMessageModal';
+import { usePinMessageMutation } from '../hooks/usePinMessageMutation';
+
+export const usePinMessageAction = (
+	message: IMessage,
+	{ room, subscription }: { room: IRoom; subscription: ISubscription | undefined },
+): MessageActionConfig | null => {
+	const setModal = useSetModal();
+
+	const allowPinning = useSetting('Message_AllowPinning');
+	const hasPermission = usePermission('pin-message', room._id);
+	const { mutateAsync: pinMessage } = usePinMessageMutation();
+
+	if (!allowPinning || isOmnichannelRoom(room) || !hasPermission || message.pinned || !subscription) {
+		return null;
+	}
+
+	const onConfirm = async () => {
+		pinMessage(message);
+		setModal(null);
+	};
+
+	return {
+		id: 'pin-message',
+		icon: 'pin',
+		label: 'Pin',
+		type: 'interaction',
+		context: ['pinned', 'message', 'message-mobile', 'threads', 'direct', 'videoconf', 'videoconf-threads'],
+		async action() {
+			setModal(<PinMessageModal message={message} onConfirm={onConfirm} onCancel={() => setModal(null)} />);
+		},
+		order: 2,
+		group: 'menu',
+	};
+};

apps/meteor/client/components/message/toolbar/useReadReceiptsDetailsAction.spec.ts

@@ -0,0 +1,50 @@
+import { mockAppRoot } from '@rocket.chat/mock-providers';
+import { renderHook } from '@testing-library/react';
+
+import { useReadReceiptsDetailsAction } from './useReadReceiptsDetailsAction';
+import { createFakeMessage } from '../../../../tests/mocks/data';
+import { useMessageListReadReceipts } from '../list/MessageListContext';
+
+jest.mock('../list/MessageListContext', () => ({
+	useMessageListReadReceipts: jest.fn(),
+}));
+
+const useMessageListReadReceiptsMocked = jest.mocked(useMessageListReadReceipts);
+
+describe('useReadReceiptsDetailsAction', () => {
+	const message = createFakeMessage({ _id: 'messageId' });
+
+	afterEach(() => {
+		jest.clearAllMocks();
+	});
+
+	it('should return null if read receipts are not enabled', () => {
+		useMessageListReadReceiptsMocked.mockReturnValue({ enabled: false, storeUsers: true });
+
+		const { result } = renderHook(() => useReadReceiptsDetailsAction(message), { wrapper: mockAppRoot().build() });
+
+		expect(result.current).toBeNull();
+	});
+
+	it('should return null if read receipts store users is not enabled', () => {
+		useMessageListReadReceiptsMocked.mockReturnValue({ enabled: true, storeUsers: false });
+
+		const { result } = renderHook(() => useReadReceiptsDetailsAction(message), { wrapper: mockAppRoot().build() });
+
+		expect(result.current).toBeNull();
+	});
+
+	it('should return a message action config', () => {
+		useMessageListReadReceiptsMocked.mockReturnValue({ enabled: true, storeUsers: true });
+
+		const { result } = renderHook(() => useReadReceiptsDetailsAction(message), { wrapper: mockAppRoot().build() });
+
+		expect(result.current).toEqual(
+			expect.objectContaining({
+				id: 'receipt-detail',
+				icon: 'check-double',
+				label: 'Read_Receipts',
+			}),
+		);
+	});
+});

apps/meteor/client/components/message/toolbar/useReadReceiptsDetailsAction.tsx

@@ -0,0 +1,37 @@
+import type { IMessage } from '@rocket.chat/core-typings';
+import { useSetModal } from '@rocket.chat/ui-contexts';
+
+import type { MessageActionConfig } from '../../../lib/MessageAction';
+import ReadReceiptsModal from '../../../views/room/modals/ReadReceiptsModal';
+import { useMessageListReadReceipts } from '../list/MessageListContext';
+
+export const useReadReceiptsDetailsAction = (message: IMessage): MessageActionConfig | null => {
+	const setModal = useSetModal();
+
+	const { enabled: readReceiptsEnabled, storeUsers: readReceiptsStoreUsers } = useMessageListReadReceipts();
+
+	if (!readReceiptsEnabled || !readReceiptsStoreUsers) {
+		return null;
+	}
+
+	return {
+		id: 'receipt-detail',
+		icon: 'check-double',
+		label: 'Read_Receipts',
+		context: ['starred', 'message', 'message-mobile', 'threads', 'videoconf', 'videoconf-threads', 'federated'],
+		type: 'duplication',
+		action() {
+			setModal(
+				<ReadReceiptsModal
+					messageId={message._id}
+					rid={message.rid}
+					onClose={() => {
+						setModal(null);
+					}}
+				/>,
+			);
+		},
+		order: 10,
+		group: 'menu',
+	};
+};

apps/meteor/client/components/message/toolbar/useReplyInDMAction.spec.ts

@@ -0,0 +1,86 @@
+import { mockAppRoot } from '@rocket.chat/mock-providers';
+import { renderHook } from '@testing-library/react';
+
+import { useReplyInDMAction } from './useReplyInDMAction';
+import { createFakeMessage, createFakeRoom, createFakeSubscription, createFakeUser } from '../../../../tests/mocks/data';
+import { roomCoordinator } from '../../../lib/rooms/roomCoordinator';
+
+jest.mock('../../../lib/rooms/roomCoordinator', () => ({
+	roomCoordinator: {
+		openRouteLink: jest.fn(),
+	},
+}));
+
+const mockedOpenRouteLink = jest.mocked(roomCoordinator.openRouteLink);
+
+const currentUser = createFakeUser({
+	_id: 'current-user-id',
+	username: 'currentuser',
+});
+
+const messageAuthor = {
+	_id: 'author-user-id',
+	username: 'authoruser',
+	name: 'Author User',
+};
+
+const message = createFakeMessage({
+	_id: 'reply-message-id',
+	u: messageAuthor,
+});
+
+const room = createFakeRoom({
+	_id: 'channel-id',
+	t: 'c',
+	name: 'general',
+});
+
+const subscription = createFakeSubscription({
+	rid: 'channel-id',
+	t: 'c',
+});
+
+afterEach(() => {
+	jest.clearAllMocks();
+});
+
+describe('useReplyInDMAction', () => {
+	it('should not carry over the msg search parameter when opening a direct message', () => {
+		const getSearchParameters = jest.fn().mockReturnValue({
+			msg: 'stale-message-id',
+			layout: 'embedded',
+		});
+
+		const { result } = renderHook(() => useReplyInDMAction(message, { room, subscription }), {
+			wrapper: mockAppRoot().withUser(currentUser).withPermission('create-d').withRouter({ getSearchParameters }).build(),
+		});
+
+		expect(result.current).not.toBeNull();
+
+		result.current?.action({ stopPropagation: jest.fn() } as unknown as UIEvent);
+
+		expect(getSearchParameters).toHaveBeenCalled();
+		expect(mockedOpenRouteLink).toHaveBeenCalledWith(
+			'd',
+			{ name: messageAuthor.username },
+			{
+				layout: 'embedded',
+				reply: 'reply-message-id',
+			},
+		);
+
+		const searchParams = mockedOpenRouteLink.mock.calls[0]?.[2];
+		expect(searchParams).not.toHaveProperty('msg');
+	});
+
+	it('should return null when already in a direct message room', () => {
+		const dmRoom = createFakeRoom({ t: 'd' });
+		const dmSubscription = createFakeSubscription({ t: 'd' });
+
+		const { result } = renderHook(() => useReplyInDMAction(message, { room: dmRoom, subscription: dmSubscription }), {
+			wrapper: mockAppRoot().withUser(currentUser).withPermission('create-d').build(),
+		});
+
+		expect(result.current).toBeNull();
+	});
+});

apps/meteor/client/components/message/toolbar/useReplyInDMAction.ts

@@ -0,0 +1,89 @@
+import { type IMessage, type ISubscription, type IRoom, isE2EEMessage } from '@rocket.chat/core-typings';
+import { useEmbeddedLayout } from '@rocket.chat/ui-client';
+import { usePermission, useRouter, useUser } from '@rocket.chat/ui-contexts';
+import { useCallback, useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useShallow } from 'zustand/shallow';
+
+import type { MessageActionConfig } from '../../../lib/MessageAction';
+import { roomCoordinator } from '../../../lib/rooms/roomCoordinator';
+import { Rooms, Subscriptions } from '../../../stores';
+
+export const useReplyInDMAction = (
+	message: IMessage,
+	{ room, subscription }: { room: IRoom; subscription: ISubscription | undefined },
+): MessageActionConfig | null => {
+	const user = useUser();
+	const router = useRouter();
+	const encrypted = isE2EEMessage(message);
+	const isABACEnabled = !!room.abacAttributes;
+	const canCreateDM = usePermission('create-d');
+	const isLayoutEmbedded = useEmbeddedLayout();
+	const { t } = useTranslation();
+
+	const roomPredicate = useCallback(
+		(record: IRoom): boolean => {
+			const ids = [user?._id, message.u._id].sort().join('');
+			return ids.includes(record._id);
+		},
+		[message.u._id, user],
+	);
+
+	const shouldFindRoom = useMemo(() => !!user && !canCreateDM && user._id !== message.u._id, [canCreateDM, message.u._id, user]);
+	const dmRoom = Rooms.use(useShallow((state) => (shouldFindRoom ? state.find(roomPredicate) : undefined)));
+
+	const subsPredicate = useCallback(
+		(record: ISubscription) => record.rid === dmRoom?._id || record.u._id === user?._id,
+		[dmRoom, user?._id],
+	);
+	const dmSubs = Subscriptions.use(useShallow((state) => state.find(subsPredicate)));
+
+	const tooltip = useMemo(() => {
+		if (encrypted) {
+			return t('Action_not_available_encrypted_content', { action: t('Reply_in_direct_message') });
+		}
+		if (isABACEnabled) {
+			return t('Not_available_for_ABAC_enabled_rooms');
+		}
+		return null;
+	}, [encrypted, isABACEnabled, t]);
+
+	const canReplyInDM = useMemo(() => {
+		if (!subscription || room.t === 'd' || room.t === 'l' || isLayoutEmbedded) {
+			return false;
+		}
+		if (!!user && user._id !== message.u._id && !canCreateDM) {
+			if (!dmRoom || !dmSubs) {
+				return false;
+			}
+		}
+		return true;
+	}, [canCreateDM, dmRoom, dmSubs, isLayoutEmbedded, message.u._id, room.t, subscription, user]);
+
+	if (!canReplyInDM) {
+		return null;
+	}
+
+	return {
+		id: 'reply-directly',
+		icon: 'reply-directly',
+		label: 'Reply_in_direct_message',
+		context: ['message', 'message-mobile', 'threads', 'federated'],
+		type: 'communication',
+		action() {
+			const { msg: _, ...searchParameters } = router.getSearchParameters();
+			roomCoordinator.openRouteLink(
+				'd',
+				{ name: message.u.username },
+				{
+					...searchParameters,
+					reply: message._id,
+				},
+			);
+		},
+		order: 0,
+		group: 'menu',
+		disabled: encrypted || isABACEnabled,
+		...(tooltip && { tooltip }),
+	};
+};

apps/meteor/client/components/message/toolbar/useReportMessageAction.tsx

@@ -0,0 +1,52 @@
+import type { ISubscription, IRoom, IMessage } from '@rocket.chat/core-typings';
+import { useSetModal, useUser } from '@rocket.chat/ui-contexts';
+
+import type { MessageActionConfig } from '../../../lib/MessageAction';
+import { roomCoordinator } from '../../../lib/rooms/roomCoordinator';
+import ReportMessageModal from '../../../views/room/modals/ReportMessageModal';
+
+const getMainMessageText = (message: IMessage): IMessage => {
+	const newMessage = { ...message };
+	newMessage.msg = newMessage.msg || newMessage.attachments?.[0]?.description || newMessage.attachments?.[0]?.title || '';
+	newMessage.md = newMessage.md || newMessage.attachments?.[0]?.descriptionMd || undefined;
+	return { ...newMessage };
+};
+
+export const useReportMessageAction = (
+	message: IMessage,
+	{ room, subscription }: { room: IRoom; subscription: ISubscription | undefined },
+): MessageActionConfig | null => {
+	const user = useUser();
+	const setModal = useSetModal();
+
+	const isLivechatRoom = roomCoordinator.isLivechatRoom(room.t);
+
+	if (!subscription) {
+		return null;
+	}
+
+	if (isLivechatRoom || message.u._id === user?._id) {
+		return null;
+	}
+
+	return {
+		id: 'report-message',
+		icon: 'report',
+		label: 'Report',
+		context: ['message', 'message-mobile', 'threads', 'federated', 'videoconf', 'videoconf-threads'],
+		variant: 'danger',
+		type: 'management',
+		action() {
+			setModal(
+				<ReportMessageModal
+					message={getMainMessageText(message)}
+					onClose={() => {
+						setModal(null);
+					}}
+				/>,
+			);
+		},
+		order: 9,
+		group: 'menu',
+	};
+};

apps/meteor/client/components/message/toolbar/useShowMessageReactionsAction.tsx

@@ -0,0 +1,33 @@
+import type { IMessage } from '@rocket.chat/core-typings';
+import { useSetModal } from '@rocket.chat/ui-contexts';
+
+import type { MessageActionConfig } from '../../../lib/MessageAction';
+import ReactionListModal from '../../../views/room/modals/ReactionListModal';
+
+export const useShowMessageReactionsAction = (message: IMessage): MessageActionConfig | null => {
+	const setModal = useSetModal();
+
+	if (!message.reactions) {
+		return null;
+	}
+
+	return {
+		id: 'reaction-list',
+		icon: 'emoji',
+		label: 'Reactions',
+		context: ['message', 'message-mobile', 'threads', 'videoconf', 'videoconf-threads', 'federated'],
+		type: 'interaction',
+		action() {
+			setModal(
+				<ReactionListModal
+					reactions={message.reactions ?? {}}
+					onClose={() => {
+						setModal(null);
+					}}
+				/>,
+			);
+		},
+		order: 9,
+		group: 'menu',
+	};
+};

apps/meteor/client/components/message/toolbar/useStarMessageAction.ts

@@ -0,0 +1,34 @@
+import type { IMessage, IRoom } from '@rocket.chat/core-typings';
+import { isOmnichannelRoom } from '@rocket.chat/core-typings';
+import { useSetting, useUser } from '@rocket.chat/ui-contexts';
+
+import type { MessageActionConfig } from '../../../lib/MessageAction';
+import { useStarMessageMutation } from '../hooks/useStarMessageMutation';
+
+export const useStarMessageAction = (message: IMessage, { room }: { room: IRoom }): MessageActionConfig | null => {
+	const user = useUser();
+	const allowStarring = useSetting('Message_AllowStarring', true);
+
+	const { mutateAsync: starMessage } = useStarMessageMutation();
+
+	if (!allowStarring || isOmnichannelRoom(room)) {
+		return null;
+	}
+
+	if (Array.isArray(message.starred) && message.starred.some((star) => star._id === user?._id)) {
+		return null;
+	}
+
+	return {
+		id: 'star-message',
+		icon: 'star',
+		label: 'Star',
+		type: 'interaction',
+		context: ['starred', 'message', 'message-mobile', 'threads', 'federated', 'videoconf', 'videoconf-threads'],
+		async action() {
+			await starMessage(message);
+		},
+		order: 3,
+		group: 'menu',
+	};
+};

apps/meteor/client/components/message/toolbar/useTranslateAction.ts

@@ -0,0 +1,69 @@
+import type { IMessage, ISubscription, IRoom } from '@rocket.chat/core-typings';
+import { useEndpoint, usePermission, useSetting, useUser } from '@rocket.chat/ui-contexts';
+import { useMemo } from 'react';
+
+import type { MessageActionConfig } from '../../../lib/MessageAction';
+import { AutoTranslate } from '../../../lib/autotranslate';
+import { roomCoordinator } from '../../../lib/rooms/roomCoordinator';
+import { Messages } from '../../../stores';
+import { hasTranslationLanguageInAttachments, hasTranslationLanguageInMessage } from '../../../views/room/MessageList/lib/autoTranslate';
+
+export const useTranslateAction = (
+	message: IMessage & { autoTranslateShowInverse?: boolean },
+	{ room, subscription }: { room: IRoom; subscription: ISubscription | undefined },
+): MessageActionConfig | null => {
+	const user = useUser();
+	const autoTranslateEnabled = useSetting('AutoTranslate_Enabled', false);
+	const canAutoTranslate = usePermission('auto-translate');
+	const translateMessage = useEndpoint('POST', '/v1/autotranslate.translateMessage');
+
+	const language = useMemo(
+		() => subscription?.autoTranslateLanguage || AutoTranslate.getLanguage(message.rid),
+		[message.rid, subscription?.autoTranslateLanguage],
+	);
+	const hasTranslations = useMemo(
+		() => hasTranslationLanguageInMessage(message, language) || hasTranslationLanguageInAttachments(message.attachments, language),
+		[message, language],
+	);
+
+	const updateMessages = Messages.use((state) => state.update);
+
+	if (!autoTranslateEnabled || !canAutoTranslate || !user) {
+		return null;
+	}
+
+	const isLivechatRoom = roomCoordinator.isLivechatRoom(room?.t);
+	const isDifferentUser = message?.u && message.u._id !== user._id;
+	const autoTranslationActive = subscription?.autoTranslate || isLivechatRoom;
+
+	if (!message.autoTranslateShowInverse && (!isDifferentUser || !autoTranslationActive || hasTranslations)) {
+		return null;
+	}
+
+	return {
+		id: 'translate',
+		icon: 'language',
+		label: 'Translate',
+		context: ['message', 'message-mobile', 'threads'],
+		type: 'interaction',
+		group: 'menu',
+		action() {
+			if (!hasTranslations) {
+				AutoTranslate.messageIdsToWait[message._id] = true;
+				updateMessages(
+					(record) => record._id === message._id,
+					(record) => ({ ...record, autoTranslateFetching: true }),
+				);
+				void translateMessage({ messageId: message._id, targetLanguage: language });
+			}
+
+			updateMessages(
+				(record) => record._id === message._id,
+				'autoTranslateShowInverse' in message
+					? ({ autoTranslateShowInverse: _, ...record }) => record
+					: (record) => ({ ...record, autoTranslateShowInverse: true }),
+			);
+		},
+		order: 90,
+	};
+};

apps/meteor/client/components/message/toolbar/useUnFollowMessageAction.ts

@@ -0,0 +1,63 @@
+import type { IMessage, IRoom } from '@rocket.chat/core-typings';
+import { isOmnichannelRoom } from '@rocket.chat/core-typings';
+import { useSetting, useToastMessageDispatch, useUser } from '@rocket.chat/ui-contexts';
+
+import { t } from '../../../../app/utils/lib/i18n';
+import type { MessageActionContext, MessageActionConfig } from '../../../lib/MessageAction';
+import { Messages } from '../../../stores';
+import { useToggleFollowingThreadMutation } from '../../../views/room/contextualBar/Threads/hooks/useToggleFollowingThreadMutation';
+
+export const useUnFollowMessageAction = (
+	message: IMessage,
+	{ room, context }: { room: IRoom; context: MessageActionContext },
+): MessageActionConfig | null => {
+	const user = useUser();
+	const threadsEnabled = useSetting('Threads_enabled');
+
+	const dispatchToastMessage = useToastMessageDispatch();
+
+	const { mutate: toggleFollowingThread } = useToggleFollowingThreadMutation({
+		onSuccess: () => {
+			dispatchToastMessage({
+				type: 'success',
+				message: t('You_unfollowed_this_message'),
+			});
+		},
+	});
+
+	const { tmid, _id } = message;
+	const parentMessage = Messages.use((state) => state.find((record) => record._id === tmid || record._id === _id));
+
+	if (!message || !threadsEnabled || isOmnichannelRoom(room)) {
+		return null;
+	}
+
+	let { replies } = message;
+
+	if (tmid || context) {
+		if (parentMessage) {
+			replies = parentMessage.replies || [];
+		}
+	}
+
+	if (!user?._id) {
+		return null;
+	}
+
+	if (!replies?.includes(user._id)) {
+		return null;
+	}
+
+	return {
+		id: 'unfollow-message',
+		icon: 'bell-off',
+		label: 'Unfollow_message',
+		type: 'interaction',
+		context: ['message', 'message-mobile', 'threads', 'federated', 'videoconf', 'videoconf-threads'],
+		action() {
+			toggleFollowingThread({ tmid: tmid || _id, follow: false, rid: room._id });
+		},
+		order: 1,
+		group: 'menu',
+	};
+};

apps/meteor/client/components/message/toolbar/useUnpinMessageAction.ts

@@ -0,0 +1,33 @@
+import type { IMessage, IRoom, ISubscription } from '@rocket.chat/core-typings';
+import { isOmnichannelRoom } from '@rocket.chat/core-typings';
+import { useSetting, usePermission } from '@rocket.chat/ui-contexts';
+
+import type { MessageActionConfig } from '../../../lib/MessageAction';
+import { useUnpinMessageMutation } from '../hooks/useUnpinMessageMutation';
+
+export const useUnpinMessageAction = (
+	message: IMessage,
+	{ room, subscription }: { room: IRoom; subscription: ISubscription | undefined },
+): MessageActionConfig | null => {
+	const allowPinning = useSetting('Message_AllowPinning');
+	const hasPermission = usePermission('pin-message', room._id);
+
+	const { mutate: unpinMessage } = useUnpinMessageMutation();
+
+	if (!allowPinning || isOmnichannelRoom(room) || !hasPermission || !message.pinned || !subscription) {
+		return null;
+	}
+
+	return {
+		id: 'unpin-message',
+		icon: 'pin',
+		label: 'Unpin',
+		type: 'interaction',
+		context: ['pinned', 'message', 'message-mobile', 'threads', 'direct', 'videoconf', 'videoconf-threads'],
+		action() {
+			unpinMessage(message);
+		},
+		order: 2,
+		group: 'menu',
+	};
+};

apps/meteor/client/components/message/toolbar/useUnstarMessageAction.ts

@@ -0,0 +1,34 @@
+import type { IMessage, IRoom } from '@rocket.chat/core-typings';
+import { isOmnichannelRoom } from '@rocket.chat/core-typings';
+import { useSetting, useUser } from '@rocket.chat/ui-contexts';
+
+import type { MessageActionConfig } from '../../../lib/MessageAction';
+import { useUnstarMessageMutation } from '../hooks/useUnstarMessageMutation';
+
+export const useUnstarMessageAction = (message: IMessage, { room }: { room: IRoom }): MessageActionConfig | null => {
+	const user = useUser();
+	const allowStarring = useSetting('Message_AllowStarring');
+
+	const { mutateAsync: unstarMessage } = useUnstarMessageMutation();
+
+	if (!allowStarring || isOmnichannelRoom(room)) {
+		return null;
+	}
+
+	if (!Array.isArray(message.starred) || message.starred.every((star) => star._id !== user?._id)) {
+		return null;
+	}
+
+	return {
+		id: 'unstar-message',
+		icon: 'star',
+		label: 'Unstar_Message',
+		type: 'interaction',
+		context: ['starred', 'message', 'message-mobile', 'threads', 'federated', 'videoconf', 'videoconf-threads'],
+		async action() {
+			await unstarMessage(message);
+		},
+		order: 3,
+		group: 'menu',
+	};
+};

apps/meteor/client/components/message/toolbar/useViewOriginalTranslationAction.ts

@@ -0,0 +1,69 @@
+import type { IMessage, IRoom, ISubscription } from '@rocket.chat/core-typings';
+import { useEndpoint, usePermission, useSetting, useUser } from '@rocket.chat/ui-contexts';
+import { useMemo } from 'react';
+
+import type { MessageActionConfig } from '../../../lib/MessageAction';
+import { AutoTranslate } from '../../../lib/autotranslate';
+import { roomCoordinator } from '../../../lib/rooms/roomCoordinator';
+import { Messages } from '../../../stores';
+import { hasTranslationLanguageInAttachments, hasTranslationLanguageInMessage } from '../../../views/room/MessageList/lib/autoTranslate';
+
+export const useViewOriginalTranslationAction = (
+	message: IMessage & { autoTranslateShowInverse?: boolean },
+	{ room, subscription }: { room: IRoom; subscription: ISubscription | undefined },
+): MessageActionConfig | null => {
+	const user = useUser();
+	const autoTranslateEnabled = useSetting('AutoTranslate_Enabled', false);
+	const canAutoTranslate = usePermission('auto-translate');
+	const translateMessage = useEndpoint('POST', '/v1/autotranslate.translateMessage');
+
+	const language = useMemo(
+		() => subscription?.autoTranslateLanguage || AutoTranslate.getLanguage(message.rid),
+		[message.rid, subscription?.autoTranslateLanguage],
+	);
+	const hasTranslations = useMemo(
+		() => hasTranslationLanguageInMessage(message, language) || hasTranslationLanguageInAttachments(message.attachments, language),
+		[message, language],
+	);
+
+	const updateMessages = Messages.use((state) => state.update);
+
+	if (!autoTranslateEnabled || !canAutoTranslate || !user) {
+		return null;
+	}
+
+	const isLivechatRoom = roomCoordinator.isLivechatRoom(room?.t);
+	const isDifferentUser = message?.u && message.u._id !== user._id;
+	const autoTranslationActive = subscription?.autoTranslate || isLivechatRoom;
+
+	if (message.autoTranslateShowInverse || !isDifferentUser || !autoTranslationActive || !hasTranslations) {
+		return null;
+	}
+
+	return {
+		id: 'view-original',
+		icon: 'language',
+		label: 'View_original',
+		context: ['message', 'message-mobile', 'threads'],
+		type: 'interaction',
+		group: 'menu',
+		action() {
+			if (!hasTranslations) {
+				AutoTranslate.messageIdsToWait[message._id] = true;
+				updateMessages(
+					(record) => record._id === message._id,
+					(record) => ({ ...record, autoTranslateFetching: true }),
+				);
+				void translateMessage({ messageId: message._id, targetLanguage: language });
+			}
+
+			updateMessages(
+				(record) => record._id === message._id,
+				'autoTranslateShowInverse' in message
+					? ({ autoTranslateShowInverse: _, ...record }) => record
+					: (record) => ({ ...record, autoTranslateShowInverse: true }),
+			);
+		},
+		order: 90,
+	};
+};

apps/meteor/client/components/message/toolbar/useWebDAVMessageAction.tsx

@@ -0,0 +1,43 @@
+import type { IMessage, ISubscription } from '@rocket.chat/core-typings';
+import { useSetModal, useSetting } from '@rocket.chat/ui-contexts';
+
+import { useWebDAVAccountIntegrationsQuery } from '../../../hooks/webdav/useWebDAVAccountIntegrationsQuery';
+import type { MessageActionConfig } from '../../../lib/MessageAction';
+import { getURL } from '../../../lib/getURL';
+import SaveToWebdavModal from '../../../views/room/webdav/SaveToWebdavModal';
+
+export const useWebDAVMessageAction = (
+	message: IMessage,
+	{ subscription }: { subscription: ISubscription | undefined },
+): MessageActionConfig | null => {
+	const enabled = useSetting('Webdav_Integration_Enabled', false);
+
+	const { data } = useWebDAVAccountIntegrationsQuery({ enabled });
+
+	const setModal = useSetModal();
+
+	if (!enabled || !subscription || !data?.length || !message.file) {
+		return null;
+	}
+
+	return {
+		id: 'webdav-upload',
+		icon: 'upload',
+		label: 'Save_To_Webdav',
+		action() {
+			const [attachment] = message.attachments || [];
+			const url = getURL(attachment.title_link as string, { full: true });
+
+			setModal(
+				<SaveToWebdavModal
+					data={{ attachment, url }}
+					onClose={() => {
+						setModal(null);
+					}}
+				/>,
+			);
+		},
+		order: 100,
+		group: 'menu',
+	};
+};