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, apps can use this new context by registering buttons under the `category: AI`

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

@@ -19,6 +19,7 @@ import { useAutoTranslate } from '../../../views/room/MessageList/hooks/useAutoT
 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 = useMessageActionAppsActionButtons(context, 'ai');
+
 	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,97 @@
+import { useUniqueId } from '@rocket.chat/fuselage-hooks';
+import { GenericMenu, type GenericMenuItemProps } from '@rocket.chat/ui-client';
+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';
+
+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

@@ -1,4 +1,4 @@
-import type { IUIActionButton, UIActionButtonContext } from '@rocket.chat/apps-engine/definition/ui';
+import { type IUIActionButton, type UIActionButtonContext } from '@rocket.chat/apps-engine/definition/ui';
 import { useDebouncedCallback } from '@rocket.chat/fuselage-hooks';
 import type { GenericMenuItemProps } from '@rocket.chat/ui-client';
 import { useEndpoint, useStream, useToastMessageDispatch, useUserId } from '@rocket.chat/ui-contexts';
@@ -13,6 +13,7 @@ import type { MessageBoxAction } from '../../app/ui-utils/client/lib/messageBox'
 import { Utilities } from '../../ee/lib/misc/Utilities';
 import { useUiKitActionManager } from '../uikit/hooks/useUiKitActionManager';
 import { useApplyButtonFilters, useApplyButtonAuthFilter } from './useApplyButtonFilters';
+import { useFilterActionsByContextAndCategory } from './useFilterActions';
 
 const getIdForActionButton = ({ appId, actionId }: IUIActionButton): string => `${appId}/${actionId}`;
 
@@ -160,20 +161,18 @@ export const useUserDropdownAppsActionButtons = () => {
 	} as UseQueryResult<GenericMenuItemProps[]>;
 };
 
-export const useMessageActionAppsActionButtons = (context?: MessageActionContext) => {
+export const useMessageActionAppsActionButtons = (context?: MessageActionContext, category?: string) => {
 	const result = useAppActionButtons('messageAction');
 	const actionManager = useUiKitActionManager();
 	const applyButtonFilters = useApplyButtonFilters();
 	const dispatchToastMessage = useToastMessageDispatch();
 	const { t } = useTranslation();
+	const filterActionsByContextAndCategory = useFilterActionsByContextAndCategory(context, category);
 	const data = useMemo(
 		() =>
 			result.data
 				?.filter((action) => {
-					if (
-						context &&
-						!(action.when?.messageActionContext || ['message', 'message-mobile', 'threads', 'starred']).includes(context as any)
-					) {
+					if (!filterActionsByContextAndCategory(action)) {
 						return false;
 					}
 					return applyButtonFilters(action);
@@ -212,7 +211,7 @@ export const useMessageActionAppsActionButtons = (context?: MessageActionContext
 
 					return item;
 				}),
-		[actionManager, applyButtonFilters, context, dispatchToastMessage, result.data, t],
+		[actionManager, applyButtonFilters, dispatchToastMessage, filterActionsByContextAndCategory, result.data, t],
 	);
 	return {
 		...result,

apps/meteor/client/hooks/useFilterActions.ts

@@ -0,0 +1,24 @@
+import type { IUIActionButton } from '@rocket.chat/apps-engine/definition/ui';
+import { useCallback } from 'react';
+
+const DEFAULT_CATEGORY = 'default';
+
+export const useFilterActionsByContextAndCategory = (context: string | undefined, category = 'default') => {
+	return useCallback(
+		(action: IUIActionButton) => {
+			if (!context) {
+				return true;
+			}
+
+			const actionCategory = action?.category ?? DEFAULT_CATEGORY;
+			const isContextMatch = (action.when?.messageActionContext || ['message', 'message-mobile', 'threads', 'starred']).includes(
+				context as any,
+			);
+
+			const isCategoryMatch = category === DEFAULT_CATEGORY ? actionCategory === DEFAULT_CATEGORY : actionCategory === category;
+
+			return isContextMatch && isCategoryMatch;
+		},
+		[context, category],
+	);
+};

apps/meteor/ee/server/services/package.json

@@ -18,7 +18,7 @@
 	"author": "Rocket.Chat",
 	"license": "MIT",
 	"dependencies": {
-		"@rocket.chat/apps-engine": "1.45.0-alpha.868",
+		"@rocket.chat/apps-engine": "1.47.0-alpha.899",
 		"@rocket.chat/core-services": "workspace:^",
 		"@rocket.chat/core-typings": "workspace:^",
 		"@rocket.chat/emitter": "~0.31.25",

apps/meteor/package.json

@@ -230,7 +230,7 @@
 		"@rocket.chat/agenda": "workspace:^",
 		"@rocket.chat/api-client": "workspace:^",
 		"@rocket.chat/apps": "workspace:^",
-		"@rocket.chat/apps-engine": "1.45.0-alpha.868",
+		"@rocket.chat/apps-engine": "1.47.0-alpha.899",
 		"@rocket.chat/base64": "workspace:^",
 		"@rocket.chat/cas-validate": "workspace:^",
 		"@rocket.chat/core-services": "workspace:^",

ee/apps/ddp-streamer/package.json

@@ -15,7 +15,7 @@
 	],
 	"author": "Rocket.Chat",
 	"dependencies": {
-		"@rocket.chat/apps-engine": "1.45.0-alpha.868",
+		"@rocket.chat/apps-engine": "1.47.0-alpha.899",
 		"@rocket.chat/core-services": "workspace:^",
 		"@rocket.chat/core-typings": "workspace:^",
 		"@rocket.chat/emitter": "~0.31.25",

ee/packages/presence/package.json

@@ -6,7 +6,7 @@
 		"@babel/core": "~7.22.20",
 		"@babel/preset-env": "~7.22.20",
 		"@babel/preset-typescript": "~7.22.15",
-		"@rocket.chat/apps-engine": "1.45.0-alpha.868",
+		"@rocket.chat/apps-engine": "1.47.0-alpha.899",
 		"@rocket.chat/eslint-config": "workspace:^",
 		"@rocket.chat/rest-typings": "workspace:^",
 		"@types/node": "^14.18.63",

packages/apps/package.json

@@ -18,7 +18,7 @@
 		"/dist"
 	],
 	"dependencies": {
-		"@rocket.chat/apps-engine": "1.45.0-alpha.868",
+		"@rocket.chat/apps-engine": "1.47.0-alpha.899",
 		"@rocket.chat/core-typings": "workspace:^",
 		"@rocket.chat/model-typings": "workspace:^"
 	}

packages/core-services/package.json

@@ -32,7 +32,7 @@
 		"extends": "../../package.json"
 	},
 	"dependencies": {
-		"@rocket.chat/apps-engine": "1.45.0-alpha.868",
+		"@rocket.chat/apps-engine": "1.47.0-alpha.899",
 		"@rocket.chat/core-typings": "workspace:^",
 		"@rocket.chat/icons": "~0.38.0",
 		"@rocket.chat/message-parser": "workspace:^",

packages/core-typings/package.json

@@ -22,7 +22,7 @@
 		"/dist"
 	],
 	"dependencies": {
-		"@rocket.chat/apps-engine": "1.45.0-alpha.868",
+		"@rocket.chat/apps-engine": "1.47.0-alpha.899",
 		"@rocket.chat/icons": "~0.38.0",
 		"@rocket.chat/message-parser": "workspace:^",
 		"@rocket.chat/ui-kit": "workspace:~",

packages/fuselage-ui-kit/package.json

@@ -63,7 +63,7 @@
     "@babel/preset-env": "~7.22.20",
     "@babel/preset-react": "~7.22.15",
     "@babel/preset-typescript": "~7.22.15",
-    "@rocket.chat/apps-engine": "1.45.0-alpha.868",
+    "@rocket.chat/apps-engine": "1.47.0-alpha.899",
     "@rocket.chat/core-typings": "workspace:^",
     "@rocket.chat/eslint-config": "workspace:^",
     "@rocket.chat/fuselage": "^0.59.1",

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

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

packages/rest-typings/package.json

@@ -23,7 +23,7 @@
 		"/dist"
 	],
 	"dependencies": {
-		"@rocket.chat/apps-engine": "1.45.0-alpha.868",
+		"@rocket.chat/apps-engine": "1.47.0-alpha.899",
 		"@rocket.chat/core-typings": "workspace:^",
 		"@rocket.chat/message-parser": "workspace:^",
 		"@rocket.chat/ui-kit": "workspace:~",

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>();