[NEW] UiKit - Interactive UI elements for Rocket.Chat Apps

app/api/server/v1/commands.js

@@ -51,7 +51,7 @@ API.v1.addRoute('commands.list', { authRequired: true }, {
 	},
 });
 
-// Expects a body of: { command: 'gimme', params: 'any string value', roomId: 'value' }
+// Expects a body of: { command: 'gimme', params: 'any string value', roomId: 'value', triggerId: 'value' }
 API.v1.addRoute('commands.run', { authRequired: true }, {
 	post() {
 		const body = this.bodyParams;
@@ -74,7 +74,7 @@ API.v1.addRoute('commands.run', { authRequired: true }, {
 		}
 
 		const cmd = body.command.toLowerCase();
-		if (!slashCommands.commands[body.command.toLowerCase()]) {
+		if (!slashCommands.commands[cmd]) {
 			return API.v1.failure('The command provided does not exist (or is disabled).');
 		}
 
@@ -96,7 +96,9 @@ API.v1.addRoute('commands.run', { authRequired: true }, {
 			message.tmid = body.tmid;
 		}
 
-		const result = Meteor.runAsUser(user._id, () => slashCommands.run(cmd, params, message));
+		const { triggerId } = body;
+
+		const result = Meteor.runAsUser(user._id, () => slashCommands.run(cmd, params, message, triggerId));
 
 		return API.v1.success({ result });
 	},
@@ -137,7 +139,7 @@ API.v1.addRoute('commands.preview', { authRequired: true }, {
 
 		return API.v1.success({ preview });
 	},
-	// Expects a body format of: { command: 'giphy', params: 'mine', roomId: 'value', previewItem: { id: 'sadf8' type: 'image', value: 'https://dev.null/gif } }
+	// Expects a body format of: { command: 'giphy', params: 'mine', roomId: 'value', tmid: 'value', triggerId: 'value', previewItem: { id: 'sadf8' type: 'image', value: 'https://dev.null/gif' } }
 	post() {
 		const body = this.bodyParams;
 		const user = this.getLoggedInUser();
@@ -162,6 +164,14 @@ API.v1.addRoute('commands.preview', { authRequired: true }, {
 			return API.v1.failure('The preview item being executed is in the wrong format.');
 		}
 
+		if (body.tmid && typeof body.tmid !== 'string') {
+			return API.v1.failure('The tmid parameter when provided must be a string.');
+		}
+
+		if (body.triggerId && typeof body.triggerId !== 'string') {
+			return API.v1.failure('The triggerId parameter when provided must be a string.');
+		}
+
 		const cmd = body.command.toLowerCase();
 		if (!slashCommands.commands[cmd]) {
 			return API.v1.failure('The command provided does not exist (or is disabled).');
@@ -171,9 +181,24 @@ API.v1.addRoute('commands.preview', { authRequired: true }, {
 		Meteor.call('canAccessRoom', body.roomId, user._id);
 
 		const params = body.params ? body.params : '';
+		const message = {
+			rid: body.roomId,
+		};
+
+		if (body.tmid) {
+			const thread = Messages.findOneById(body.tmid);
+			if (!thread || thread.rid !== body.roomId) {
+				return API.v1.failure('Invalid thread.');
+			}
+			message.tmid = body.tmid;
+		}
 
 		Meteor.runAsUser(user._id, () => {
-			Meteor.call('executeSlashCommandPreview', { cmd, params, msg: { rid: body.roomId } }, body.previewItem);
+			Meteor.call('executeSlashCommandPreview', {
+				cmd,
+				params,
+				msg: { rid: body.roomId, tmid: body.tmid },
+			}, body.previewItem, body.triggerId);
 		});
 
 		return API.v1.success();

app/apps/server/bridges/bridges.js

@@ -15,6 +15,7 @@ import { AppSettingBridge } from './settings';
 import { AppUserBridge } from './users';
 import { AppLivechatBridge } from './livechat';
 import { AppUploadBridge } from './uploads';
+import { UiInteractionBridge } from './uiInteraction';
 
 export class RealAppBridges extends AppBridges {
 	constructor(orch) {
@@ -35,6 +36,7 @@ export class RealAppBridges extends AppBridges {
 		this._userBridge = new AppUserBridge(orch);
 		this._livechatBridge = new AppLivechatBridge(orch);
 		this._uploadBridge = new AppUploadBridge(orch);
+		this._uiInteractionBridge = new UiInteractionBridge(orch);
 	}
 
 	getCommandBridge() {
@@ -96,4 +98,8 @@ export class RealAppBridges extends AppBridges {
 	getUploadBridge() {
 		return this._uploadBridge;
 	}
+
+	getUiInteractionBridge() {
+		return this._uiInteractionBridge;
+	}
 }

app/apps/server/bridges/commands.js

@@ -91,6 +91,7 @@ export class AppCommandsBridge {
 		this._verifyCommand(command);
 
 		const item = {
+			appId,
 			command: command.command.toLowerCase(),
 			params: Utilities.getI18nKeyForApp(command.i18nParamsExample, appId),
 			description: Utilities.getI18nKeyForApp(command.i18nDescription, appId),
@@ -145,7 +146,7 @@ export class AppCommandsBridge {
 		}
 	}
 
-	_appCommandExecutor(command, parameters, message) {
+	_appCommandExecutor(command, parameters, message, triggerId) {
 		const user = this.orch.getConverters().get('users').convertById(Meteor.userId());
 		const room = this.orch.getConverters().get('rooms').convertById(message.rid);
 		const threadId = message.tmid;
@@ -156,7 +157,9 @@ export class AppCommandsBridge {
 			Object.freeze(room),
 			Object.freeze(params),
 			threadId,
+			triggerId,
 		);
+
 		Promise.await(this.orch.getManager().getCommandManager().executeCommand(command, context));
 	}
 
@@ -175,7 +178,7 @@ export class AppCommandsBridge {
 		return Promise.await(this.orch.getManager().getCommandManager().getPreviews(command, context));
 	}
 
-	_appCommandPreviewExecutor(command, parameters, message, preview) {
+	_appCommandPreviewExecutor(command, parameters, message, preview, triggerId) {
 		const user = this.orch.getConverters().get('users').convertById(Meteor.userId());
 		const room = this.orch.getConverters().get('rooms').convertById(message.rid);
 		const threadId = message.tmid;
@@ -186,7 +189,9 @@ export class AppCommandsBridge {
 			Object.freeze(room),
 			Object.freeze(params),
 			threadId,
+			triggerId,
 		);
+
 		Promise.await(this.orch.getManager().getCommandManager().executePreview(command, preview, context));
 	}
 }

app/apps/server/bridges/listeners.js

@@ -37,6 +37,17 @@ export class AppListenerBridge {
 		// }
 	}
 
+	async uiKitInteractionEvent(inte, action) {
+		return this.orch.getManager().getListenerManager().executeListener(inte, action);
+
+		// try {
+
+		// } catch (e) {
+		// 	this.orch.debugLog(`${ e.name }: ${ e.message }`);
+		// 	this.orch.debugLog(e.stack);
+		// }
+	}
+
 	async livechatEvent(inte, room) {
 		const rm = this.orch.getConverters().get('rooms').convertRoom(room);
 		const result = await this.orch.getManager().getListenerManager().executeListener(inte, rm);

app/apps/server/bridges/uiInteraction.js

@@ -0,0 +1,13 @@
+import { Notifications } from '../../../notifications/server';
+
+export class UiInteractionBridge {
+	constructor(orch) {
+		this.orch = orch;
+	}
+
+	async notifyUser(user, interaction, appId) {
+		this.orch.debugLog(`The App ${ appId } is sending an interaction to user.`);
+
+		Notifications.notifyUser(user.id, 'uiInteraction', interaction);
+	}
+}

app/apps/server/communication/index.js

@@ -1,11 +1,6 @@
 import { AppMethods } from './methods';
 import { AppsRestApi } from './rest';
-import { AppEvents, AppServerNotifier, AppServerListener } from './websockets';
+import { AppUIKitInteractionApi } from './uikit';
+import { AppEvents, AppServerListener, AppServerNotifier } from './websockets';
 
-export {
-	AppMethods,
-	AppsRestApi,
-	AppEvents,
-	AppServerNotifier,
-	AppServerListener,
-};
+export { AppUIKitInteractionApi, AppMethods, AppsRestApi, AppEvents, AppServerNotifier, AppServerListener };

app/apps/server/communication/uikit.js

@@ -0,0 +1,159 @@
+import express from 'express';
+import { WebApp } from 'meteor/webapp';
+import { UIKitIncomingInteractionType } from '@rocket.chat/apps-engine/definition/uikit';
+
+import { Users } from '../../../models/server';
+
+const apiServer = express();
+
+apiServer.disable('x-powered-by');
+
+WebApp.connectHandlers.use(apiServer);
+
+// eslint-disable-next-line new-cap
+const router = express.Router();
+
+const unauthorized = (res) =>
+	res.status(401).send({
+		status: 'error',
+		message: 'You must be logged in to do this.',
+	});
+
+router.use((req, res, next) => {
+	const {
+		'x-user-id': userId,
+		'x-auth-token': authToken,
+	} = req.headers;
+
+	if (!userId || !authToken) {
+		return unauthorized(res);
+	}
+
+	const user = Users.findOneByIdAndLoginToken(userId, authToken);
+	if (!user) {
+		return unauthorized(res);
+	}
+
+	req.user = user;
+	req.userId = user._id;
+
+	next();
+});
+
+apiServer.use('/api/apps/ui.interaction/', router);
+
+export class AppUIKitInteractionApi {
+	constructor(orch) {
+		this.orch = orch;
+
+		router.post('/:appId', (req, res) => {
+			const {
+				appId,
+			} = req.params;
+
+			const {
+				type,
+			} = req.body;
+
+			switch (type) {
+				case UIKitIncomingInteractionType.BLOCK: {
+					const {
+						type,
+						actionId,
+						triggerId,
+						mid,
+						rid,
+						payload,
+					} = req.body;
+
+					const room = this.orch.getConverters().get('rooms').convertById(rid);
+					const user = this.orch.getConverters().get('users').convertToApp(req.user);
+					const message = mid && this.orch.getConverters().get('messages').convertById(mid);
+
+					const action = {
+						type,
+						appId,
+						actionId,
+						message,
+						triggerId,
+						payload,
+						user,
+						room,
+					};
+
+					try {
+						const result = Promise.await(this.orch.getBridges().getListenerBridge().uiKitInteractionEvent('IUIKitInteractionHandler', action));
+
+						res.send(result);
+					} catch (e) {
+						res.status(500).send(e.message);
+					}
+					break;
+				}
+
+				case UIKitIncomingInteractionType.VIEW_CLOSED: {
+					const {
+						type,
+						actionId,
+						view,
+						isCleared,
+					} = req.body;
+
+					const user = this.orch.getConverters().get('users').convertToApp(req.user);
+
+					const action = {
+						type,
+						appId,
+						actionId,
+						user,
+						payload: {
+							view,
+							isCleared,
+						},
+					};
+
+					try {
+						Promise.await(this.orch.getBridges().getListenerBridge().uiKitInteractionEvent('IUIKitInteractionHandler', action));
+
+						res.send(200);
+					} catch (e) {
+						console.log(e);
+						res.status(500).send(e.message);
+					}
+					break;
+				}
+
+				case UIKitIncomingInteractionType.VIEW_SUBMIT: {
+					const {
+						type,
+						actionId,
+						triggerId,
+						payload,
+					} = req.body;
+
+					const user = this.orch.getConverters().get('users').convertToApp(req.user);
+
+					const action = {
+						type,
+						appId,
+						actionId,
+						triggerId,
+						payload,
+						user,
+					};
+
+					try {
+						const result = Promise.await(this.orch.getBridges().getListenerBridge().uiKitInteractionEvent('IUIKitInteractionHandler', action));
+
+						res.send(result);
+					} catch (e) {
+						res.status(500).send(e.message);
+					}
+					break;
+				}
+			}
+
+			// TODO: validate payloads per type
+		});
+	}
+}

app/apps/server/converters/messages.js

@@ -35,6 +35,7 @@ export class AppMessagesConverter {
 			customFields: 'customFields',
 			groupable: 'groupable',
 			token: 'token',
+			blocks: 'blocks',
 			room: (message) => {
 				const result = this.orch.getConverters().get('rooms').convertById(message.rid);
 				delete message.rid;
@@ -135,6 +136,7 @@ export class AppMessagesConverter {
 			attachments,
 			reactions: message.reactions,
 			parseUrls: message.parseUrls,
+			blocks: message.blocks,
 			token: message.token,
 		};