Move more actions to hooks

apps/meteor/app/ui-utils/client/index.ts

@@ -1,5 +1,3 @@
-import './lib/messageActionDefault';
-
 export { MessageAction } from './lib/MessageAction';
 export { messageBox } from './lib/messageBox';
 export { LegacyRoomManager } from './lib/LegacyRoomManager';

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

@@ -10,14 +10,23 @@ import React, { memo, useMemo, useRef } from 'react';
 
 import MessageActionMenu from './MessageActionMenu';
 import MessageToolbarStarsActionMenu from './MessageToolbarStarsActionMenu';
+import { useCopyAction } from './useCopyAction';
+import { useDeleteMessageAction } from './useDeleteMessageAction';
+import { useEditMessageAction } from './useEditMessageAction';
 import { useFollowMessageAction } from './useFollowMessageAction';
+import { useForwardMessageAction } from './useForwardMessageAction';
 import { useJumpToMessageContextAction } from './useJumpToMessageContextAction';
 import { useMarkAsUnreadMessageAction } from './useMarkAsUnreadMessageAction';
 import { useNewDiscussionMessageAction } from './useNewDiscussionMessageAction';
 import { usePermalinkAction } from './usePermalinkAction';
 import { usePinMessageAction } from './usePinMessageAction';
+import { useQuoteMessageAction } from './useQuoteMessageAction';
 import { useReactionMessageAction } from './useReactionMessageAction';
+import { useReadReceiptsDetailsAction } from './useReadReceiptsDetailsAction';
+import { useReplyInDMAction } from './useReplyInDMAction';
 import { useReplyInThreadMessageAction } from './useReplyInThreadMessageAction';
+import { useReportMessageAction } from './useReportMessageAction';
+import { useShowMessageReactionsAction } from './useShowMessageReactionsAction';
 import { useStarMessageAction } from './useStarMessageAction';
 import { useTranslateAction } from './useTranslateAction';
 import { useUnFollowMessageAction } from './useUnFollowMessageAction';
@@ -139,6 +148,15 @@ const MessageToolbar = ({
 	useMarkAsUnreadMessageAction(message, { user, room, subscription });
 	useTranslateAction(message, { user, room, subscription });
 	useViewOriginalTranslationAction(message, { user, room, subscription });
+	useReplyInDMAction(message, { user, room, subscription });
+	useForwardMessageAction(message);
+	useQuoteMessageAction(message, { subscription });
+	useCopyAction(message, { subscription });
+	useEditMessageAction(message, { user, room, subscription });
+	useDeleteMessageAction(message, { user, room, subscription });
+	useReportMessageAction(message, { user, room, subscription });
+	useShowMessageReactionsAction(message);
+	useReadReceiptsDetailsAction(message);
 
 	const actionsQueryResult = useQuery({
 		queryKey: roomsQueryKeys.messageActionsWithParameters(room._id, message),

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

@@ -0,0 +1,43 @@
+import type { IMessage, ISubscription } from '@rocket.chat/core-typings';
+import { useToastMessageDispatch } from '@rocket.chat/ui-contexts';
+import { useEffect } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { MessageAction } from '../../../../app/ui-utils/client';
+
+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 }) => {
+	const { t } = useTranslation();
+	const dispatchToastMessage = useToastMessageDispatch();
+
+	useEffect(() => {
+		if (!subscription) {
+			return;
+		}
+
+		MessageAction.addButton({
+			id: 'copy',
+			icon: 'copy',
+			label: 'Copy_text',
+			context: ['message', 'message-mobile', 'threads', 'federated'],
+			type: 'duplication',
+			async action(_, { message }) {
+				const msgText = getMainMessageText(message).msg;
+				await navigator.clipboard.writeText(msgText);
+				dispatchToastMessage({ type: 'success', message: t('Copied') });
+			},
+			order: 6,
+			group: 'menu',
+		});
+
+		return () => {
+			MessageAction.removeButton('copy');
+		};
+	}, [dispatchToastMessage, message, subscription, t]);
+};

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

@@ -0,0 +1,50 @@
+import { isRoomFederated } from '@rocket.chat/core-typings';
+import type { ISubscription, IUser, IRoom, IMessage } from '@rocket.chat/core-typings';
+import { useEffect } from 'react';
+
+import { MessageAction } from '../../../../app/ui-utils/client';
+import { roomCoordinator } from '../../../lib/rooms/roomCoordinator';
+import { useChat } from '../../../views/room/contexts/ChatContext';
+
+export const useDeleteMessageAction = (
+	message: IMessage,
+	{ user, room, subscription }: { user: IUser | undefined; room: IRoom; subscription: ISubscription | undefined },
+) => {
+	const chat = useChat();
+
+	useEffect(() => {
+		if (!subscription) {
+			return;
+		}
+
+		MessageAction.addButton({
+			id: 'delete-message',
+			icon: 'trash',
+			label: 'Delete',
+			context: ['message', 'message-mobile', 'threads', 'federated', 'videoconf', 'videoconf-threads'],
+			color: 'alert',
+			type: 'management',
+			async action() {
+				await chat?.flows.requestMessageDeletion(message);
+			},
+			condition() {
+				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;
+			},
+			order: 10,
+			group: 'menu',
+		});
+
+		return () => {
+			MessageAction.removeButton('delete-message');
+		};
+	}, [chat?.data, chat?.flows, message, room, subscription, user?._id]);
+};