feat: introduce new categories field for UI Action Buttons

.changeset/red-crews-behave.md

@@ -0,0 +1,7 @@
+---
+'@rocket.chat/ui-kit': minor
+'@rocket.chat/i18n': minor
+'@rocket.chat/meteor': minor
+---
+
+New UI context for Rocket.Chat Apps to register actions, specifically targeting AI Actions.

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

@@ -11,14 +11,15 @@ import React, { memo, useMemo, useRef } from 'react';
 import type { MessageActionContext } from '../../../../app/ui-utils/client/lib/MessageAction';
 import { MessageAction } from '../../../../app/ui-utils/client/lib/MessageAction';
 import { useEmojiPickerData } from '../../../contexts/EmojiPickerContext';
-import { useMessageActionAppsActionButtons } from '../../../hooks/useAppActionButtons';
+import { useMessageActionAppsActionButtons, useMessageToolbarStarsAppsAction } from '../../../hooks/useAppActionButtons';
 import { useEmbeddedLayout } from '../../../hooks/useEmbeddedLayout';
 import EmojiElement from '../../../views/composer/EmojiPicker/EmojiElement';
 import { useIsSelecting } from '../../../views/room/MessageList/contexts/SelectedMessagesContext';
 import { useAutoTranslate } from '../../../views/room/MessageList/hooks/useAutoTranslate';
 import { useChat } from '../../../views/room/contexts/ChatContext';
 import { useRoomToolbox } from '../../../views/room/contexts/RoomToolboxContext';
 import MessageActionMenu from './MessageActionMenu';
+import MessageToolbarStarsActionMenu from './MessageToolbarStarsActionMenu';
 import { useWebDAVMessageAction } from './useWebDAVMessageAction';
 
 const getMessageContext = (message: IMessage, room: IRoom, context?: MessageActionContext): MessageActionContext => {
@@ -78,6 +79,8 @@ const MessageToolbar = ({
 
 	const actionButtonApps = useMessageActionAppsActionButtons(context);
 
+	const starsAction = useMessageToolbarStarsAppsAction(context);
+
 	const { messageToolbox: hiddenActions } = useLayoutHiddenActions();
 
 	// TODO: move this to another place
@@ -135,6 +138,19 @@ const MessageToolbar = ({
 						disabled={action?.disabled?.({ message, room, user, subscription, settings: mapSettings, chat, context })}
 					/>
 				))}
+			{starsAction.data && starsAction.data.length > 0 && (
+				<MessageToolbarStarsActionMenu
+					options={starsAction.data.map((action) => ({
+						...action,
+						action: (e) => action.action(e, { message, tabbar: toolbox, room, chat, autoTranslateOptions }),
+					}))}
+					onChangeMenuVisibility={onChangeMenuVisibility}
+					data-qa-type='message-action-stars-menu-options'
+					context={{ message, room, user, subscription, settings: mapSettings, chat, context }}
+					isMessageEncrypted={isE2EEMessage(message)}
+				/>
+			)}
+
 			{actionsQueryResult.isSuccess && actionsQueryResult.data.menu.length > 0 && (
 				<MessageActionMenu
 					options={[...actionsQueryResult.data?.menu, ...(actionButtonApps.data ?? [])].filter(Boolean).map((action) => ({

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

@@ -0,0 +1,98 @@
+import { useUniqueId } from '@rocket.chat/fuselage-hooks';
+import { useTranslation } from '@rocket.chat/ui-contexts';
+import type { MouseEvent, ReactElement } from 'react';
+import React from 'react';
+
+import type { MessageActionConditionProps, MessageActionConfig } from '../../../../app/ui-utils/client/lib/MessageAction';
+import GenericMenu from '../../GenericMenu/GenericMenu';
+import type { GenericMenuItemProps } from '../../GenericMenu/GenericMenuItem';
+
+type MessageActionConfigOption = Omit<MessageActionConfig, 'condition' | 'context' | 'order' | 'action'> & {
+	action: (e?: MouseEvent<HTMLElement>) => void;
+};
+
+type MessageActionSection = {
+	id: string;
+	title: string;
+	items: GenericMenuItemProps[];
+};
+
+type MessageActionMenuProps = {
+	onChangeMenuVisibility: (visible: boolean) => void;
+	options: MessageActionConfigOption[];
+	context: MessageActionConditionProps;
+	isMessageEncrypted: boolean;
+};
+
+const MessageToolbarStarsActionMenu = ({
+	options,
+	onChangeMenuVisibility,
+	context,
+	isMessageEncrypted,
+}: MessageActionMenuProps): ReactElement => {
+	const t = useTranslation();
+	const id = useUniqueId();
+	const groupOptions = options
+		.map((option) => ({
+			variant: option.color === 'alert' ? 'danger' : '',
+			id: option.id,
+			icon: option.icon,
+			content: t(option.label),
+			onClick: option.action,
+			type: option.type,
+			...(option.disabled && { disabled: option?.disabled?.(context) }),
+			...(option.disabled &&
+				option?.disabled?.(context) && { tooltip: t('Action_not_available_encrypted_content', { action: t(option.label) }) }),
+		}))
+		.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: '', items: [option] };
+			acc.push(newSection);
+			return acc;
+		}, [] as unknown 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
+			icon='stars'
+			title={t('AI_Actions')}
+			data-qa-id='menu'
+			data-qa-type='message-action-menu'
+			sections={groupOptions}
+			placement='bottom-end'
+		/>
+	);
+};
+
+export default MessageToolbarStarsActionMenu;

apps/meteor/client/hooks/useAppActionButtons.ts

@@ -219,3 +219,63 @@ export const useMessageActionAppsActionButtons = (context?: MessageActionContext
 		data,
 	} as UseQueryResult<MessageActionConfig[]>;
 };
+
+export const useMessageToolbarStarsAppsAction = (context?: MessageActionContext) => {
+	const result = useAppActionButtons('messageToolbarStarsAction');
+	const actionManager = useUiKitActionManager();
+	const applyButtonFilters = useApplyButtonFilters();
+	const dispatchToastMessage = useToastMessageDispatch();
+	const { t } = useTranslation();
+	const data = useMemo(
+		() =>
+			result.data
+				?.filter((action) => {
+					if (
+						context &&
+						!(action.when?.messageActionContext || ['message', 'message-mobile', 'threads', 'starred']).includes(context as any)
+					) {
+						return false;
+					}
+					return 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,
+						action: (_, params) => {
+							void actionManager
+								.emitInteraction(action.appId, {
+									type: 'actionButton',
+									rid: params.message.rid,
+									tmid: params.message.tmid,
+									mid: params.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, result.data, t],
+	);
+	return {
+		...result,
+		data,
+	} as UseQueryResult<MessageActionConfig[]>;
+};

packages/i18n/src/locales/en.i18n.json

@@ -389,6 +389,7 @@
   "Agent_Without_Extensions": "Agent Without Extensions",
   "Agents": "Agents",
   "Agree": "Agree",
+  "AI_Actions": "AI Actions",
   "Alerts": "Alerts",
   "Alias": "Alias",
   "Alias_Format": "Alias Format",

packages/ui-kit/src/interactions/UserInteraction.ts

@@ -98,6 +98,19 @@ export type MesssageActionButtonUserInteraction = {
 	triggerId: string;
 };
 
+export type MessageToolbarStarsActionButtonUserInteraction = {
+	type: 'actionButton';
+	actionId: string;
+	payload: {
+		context: 'messageToolbarStarsAction';
+		message?: undefined;
+	};
+	mid: string;
+	tmid?: string;
+	rid: string;
+	triggerId: string;
+};
+
 export type RoomActionButtonUserInteraction = {
 	type: 'actionButton';
 	actionId: string;
@@ -119,7 +132,8 @@ export type UserInteraction =
 	| MessageBoxActionButtonUserInteraction
 	| UserDropdownActionButtonUserInteraction
 	| MesssageActionButtonUserInteraction
-	| RoomActionButtonUserInteraction;
+	| RoomActionButtonUserInteraction
+	| MessageToolbarStarsActionButtonUserInteraction;
 
 export const isMessageBlockActionUserInteraction = typia.createIs<MessageBlockActionUserInteraction>();
 export const isViewBlockActionUserInteraction = typia.createIs<ViewBlockActionUserInteraction>();
@@ -129,3 +143,4 @@ export const isMessageBoxActionButtonUserInteraction = typia.createIs<MessageBox
 export const isUserDropdownActionButtonUserInteraction = typia.createIs<UserDropdownActionButtonUserInteraction>();
 export const isMesssageActionButtonUserInteraction = typia.createIs<MesssageActionButtonUserInteraction>();
 export const isRoomActionButtonUserInteraction = typia.createIs<RoomActionButtonUserInteraction>();
+export const isMessageToolbarStarsActionButtonUserInteraction = typia.createIs<MessageToolbarStarsActionButtonUserInteraction>();