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

apps/meteor/client/components/message/content/attachments/default/ActionAttachmentButton.tsx

@@ -0,0 +1,47 @@
+import type { IMessage, MessageAttachmentAction } from '@rocket.chat/core-typings';
+import { Button } from '@rocket.chat/fuselage';
+import { useToastMessageDispatch } from '@rocket.chat/ui-contexts';
+import type { ReactNode } from 'react';
+
+import { usePerformActionMutation } from './hooks/usePerformActionMutation';
+
+type ProcessingType = Exclude<MessageAttachmentAction['actions'][number]['msg_processing_type'], undefined>;
+
+export type ActionAttachmentButtonProps = {
+	children: ReactNode;
+	mid?: IMessage['_id'];
+	msg?: string;
+	processingType: ProcessingType;
+};
+
+const ActionAttachmentButton = ({ children, processingType, msg, mid }: ActionAttachmentButtonProps) => {
+	const dispatchToastMessage = useToastMessageDispatch();
+
+	const performActionMutation = usePerformActionMutation({
+		onError: (error) => {
+			dispatchToastMessage({ type: 'error', message: error });
+		},
+	});
+
+	return (
+		<Button
+			small
+			value={msg}
+			id={mid}
+			disabled={performActionMutation.isPending}
+			onClick={(event): void => {
+				event.preventDefault();
+
+				performActionMutation.mutate({
+					processingType,
+					msg,
+					mid,
+				});
+			}}
+		>
+			{children}
+		</Button>
+	);
+};
+
+export default ActionAttachmentButton;

apps/meteor/client/components/message/content/attachments/default/ActionAttachtment.tsx

@@ -0,0 +1,38 @@
+import type { MessageAttachmentAction } from '@rocket.chat/core-typings';
+import { Box, Button, ButtonGroup } from '@rocket.chat/fuselage';
+
+import ActionAttachmentButton from './ActionAttachmentButton';
+import { useExternalLink } from '../../../../../hooks/useExternalLink';
+
+export type ActionAttachmentProps = MessageAttachmentAction;
+
+export const ActionAttachment = ({ actions }: ActionAttachmentProps) => {
+	const handleLinkClick = useExternalLink();
+
+	return (
+		<Box marginBlock={4}>
+			<ButtonGroup small>
+				{actions
+					.filter(
+						({ type, msg_in_chat_window: msgInChatWindow, url, image_url: image, text }) =>
+							type === 'button' && (image || text) && (url || msgInChatWindow),
+					)
+					.map(({ text, url, msgId, msg, msg_processing_type: processingType = 'sendMessage', image_url: image }, index) => {
+						const content = image ? <Box is='img' src={image} maxHeight={200} /> : text;
+						if (url) {
+							return (
+								<Button role='link' onClick={() => handleLinkClick(url)} key={index} small>
+									{content}
+								</Button>
+							);
+						}
+						return (
+							<ActionAttachmentButton key={index} processingType={processingType} msg={msg} mid={msgId}>
+								{content}
+							</ActionAttachmentButton>
+						);
+					})}
+			</ButtonGroup>
+		</Box>
+	);
+};

apps/meteor/client/components/message/content/attachments/default/Field.tsx

@@ -0,0 +1,18 @@
+import { Box } from '@rocket.chat/fuselage';
+import type { ComponentProps, ReactNode } from 'react';
+
+export type FieldProps = {
+	short?: boolean;
+	title: ReactNode;
+	value: ReactNode;
+} & Omit<ComponentProps<typeof Box>, 'title' | 'value'>;
+
+// TODO: description missing color token
+const Field = ({ title, value, ...props }: FieldProps) => (
+	<Box marginBlock={4} paddingInline={4} width='full' flexBasis={100} flexShrink={0} color='default' {...props}>
+		<Box fontScale='p2m'>{title}</Box>
+		{value}
+	</Box>
+);
+
+export default Field;

apps/meteor/client/components/message/content/attachments/default/FieldsAttachment.tsx

@@ -0,0 +1,21 @@
+import { Box } from '@rocket.chat/fuselage';
+import type { ReactNode } from 'react';
+
+import Field from './Field';
+import ShortField from './ShortField';
+
+export type FieldsAttachmentProps = {
+	fields: {
+		short?: boolean;
+		title: ReactNode;
+		value: ReactNode;
+	}[];
+};
+
+const FieldsAttachment = ({ fields }: FieldsAttachmentProps) => (
+	<Box flexWrap='wrap' display='flex' marginBlock={4} marginInline={-4}>
+		{fields.map((field, index) => (field.short ? <ShortField key={index} {...field} /> : <Field key={index} {...field} />))}
+	</Box>
+);
+
+export default FieldsAttachment;

apps/meteor/client/components/message/content/attachments/default/ShortField.tsx

@@ -0,0 +1,9 @@
+import type { ComponentPropsWithoutRef } from 'react';
+
+import Field from './Field';
+
+export type ShortFieldProps = ComponentPropsWithoutRef<typeof Field>;
+
+const ShortField = (props: ShortFieldProps) => <Field {...props} flexGrow={1} width='50%' flexBasis={1} />;
+
+export default ShortField;

apps/meteor/client/components/message/content/attachments/default/hooks/usePerformActionMutation.ts

@@ -0,0 +1,46 @@
+import type { IMessage, MessageAttachmentAction } from '@rocket.chat/core-typings';
+import type { UseMutationOptions, UseMutationResult } from '@tanstack/react-query';
+import { useMutation } from '@tanstack/react-query';
+
+import { useChat } from '../../../../../../views/room/contexts/ChatContext';
+
+type ProcessingType = Exclude<MessageAttachmentAction['actions'][number]['msg_processing_type'], undefined>;
+
+type UsePerfomActionMutationParams = {
+	processingType: ProcessingType;
+	msg?: string;
+	mid?: IMessage['_id'];
+};
+
+export const usePerformActionMutation = (
+	options?: Omit<UseMutationOptions<void, Error, UsePerfomActionMutationParams>, 'mutationFn'>,
+): UseMutationResult<void, Error, UsePerfomActionMutationParams> => {
+	const chat = useChat();
+
+	return useMutation({
+		mutationFn: async ({ processingType, msg, mid }) => {
+			if (!chat) {
+				return;
+			}
+
+			switch (processingType) {
+				case 'sendMessage':
+					if (!msg) return;
+					await chat.flows.sendMessage({ text: msg });
+					return;
+
+				case 'respondWithMessage':
+					if (!msg) return;
+					await chat.composer?.replyWith(msg);
+					return;
+
+				case 'respondWithQuotedMessage':
+					if (!mid) return;
+					const message = await chat.data.getMessageByID(mid);
+					await chat.composer?.quoteMessage(message);
+			}
+		},
+
+		...options,
+	});
+};