[IMPROVE] VideoConference Messages UI

apps/meteor/client/views/blocks/MessageBlock.js

@@ -1,12 +1,21 @@
 import { UIKitIncomingInteractionContainerType } from '@rocket.chat/apps-engine/definition/uikit/UIKitIncomingInteractionContainer';
+import { useMutableCallback } from '@rocket.chat/fuselage-hooks';
 import { UiKitMessage, UiKitComponent, kitContext, messageParser } from '@rocket.chat/fuselage-ui-kit';
 import React from 'react';
 
 import * as ActionManager from '../../../app/ui-message/client/ActionManager';
 import { useBlockRendered } from '../../components/message/hooks/useBlockRendered';
-import { useVideoConfJoinCall, useVideoConfSetPreferences } from '../../contexts/VideoConfContext';
+import {
+	useVideoConfJoinCall,
+	useVideoConfSetPreferences,
+	useVideoConfIsCalling,
+	useVideoConfIsRinging,
+	useVideoConfDispatchOutgoing,
+} from '../../contexts/VideoConfContext';
+import { VideoConfManager } from '../../lib/VideoConfManager';
 import { renderMessageBody } from '../../lib/utils/renderMessageBody';
 import './textParsers';
+import { useVideoConfWarning } from '../room/contextualBar/VideoConference/useVideoConfWarning';
 
 // TODO: move this to fuselage-ui-kit itself
 const mrkdwn = ({ text } = {}) => text && <span dangerouslySetInnerHTML={{ __html: renderMessageBody({ msg: text }) }} />;
@@ -16,14 +25,36 @@ function MessageBlock({ mid: _mid, rid, blocks, appId }) {
 	const { ref, className } = useBlockRendered();
 	const joinCall = useVideoConfJoinCall();
 	const setPreferences = useVideoConfSetPreferences();
+	const isCalling = useVideoConfIsCalling();
+	const isRinging = useVideoConfIsRinging();
+	const dispatchWarning = useVideoConfWarning();
+	const dispatchPopup = useVideoConfDispatchOutgoing();
+
+	const handleOpenVideoConf = useMutableCallback(async (rid) => {
+		if (isCalling || isRinging) {
+			return;
+		}
+
+		try {
+			await VideoConfManager.loadCapabilities();
+			dispatchPopup({ rid });
+		} catch (error) {
+			dispatchWarning(error.error);
+		}
+	});
 
 	const context = {
 		action: ({ actionId, value, blockId, mid = _mid, appId }, event) => {
-			if (appId === 'videoconf-core' && actionId === 'join') {
+			if (appId === 'videoconf-core') {
 				event.preventDefault();
 				setPreferences({ mic: true, cam: false });
-				joinCall(blockId);
-				return;
+				if (actionId === 'join') {
+					return joinCall(blockId);
+				}
+
+				if (actionId === 'callBack') {
+					return handleOpenVideoConf(blockId);
+				}
 			}
 
 			ActionManager.triggerBlockAction({

apps/meteor/package.json

@@ -60,11 +60,11 @@
 		"email": "support@rocket.chat"
 	},
 	"devDependencies": {
-		"@babel/core": "^7.18.9",
+		"@babel/core": "^7.18.13",
 		"@babel/eslint-parser": "^7.18.9",
 		"@babel/plugin-proposal-nullish-coalescing-operator": "^7.18.6",
 		"@babel/plugin-proposal-optional-chaining": "^7.18.9",
-		"@babel/preset-env": "^7.18.9",
+		"@babel/preset-env": "^7.18.10",
 		"@babel/preset-react": "^7.18.6",
 		"@babel/register": "^7.18.9",
 		"@faker-js/faker": "^6.3.1",
@@ -125,7 +125,7 @@
 		"@types/prometheus-gc-stats": "^0.6.2",
 		"@types/proxyquire": "^1.3.28",
 		"@types/psl": "^1.1.0",
-		"@types/react": "~17.0.47",
+		"@types/react": "~17.0.48",
 		"@types/react-dom": "~17.0.17",
 		"@types/rewire": "^2.5.28",
 		"@types/semver": "^7.3.10",
@@ -153,7 +153,7 @@
 		"chai-spies": "^1.0.0",
 		"cross-env": "^7.0.3",
 		"emojione-assets": "^4.5.0",
-		"eslint": "^8.20.0",
+		"eslint": "^8.22.0",
 		"eslint-config-prettier": "^8.5.0",
 		"eslint-plugin-import": "^2.26.0",
 		"eslint-plugin-prettier": "^4.2.1",
@@ -211,7 +211,7 @@
 		"@rocket.chat/fuselage-polyfills": "next",
 		"@rocket.chat/fuselage-toastbar": "next",
 		"@rocket.chat/fuselage-tokens": "next",
-		"@rocket.chat/fuselage-ui-kit": "next",
+		"@rocket.chat/fuselage-ui-kit": "workspace:^",
 		"@rocket.chat/gazzodown": "workspace:^",
 		"@rocket.chat/icons": "next",
 		"@rocket.chat/layout": "next",

apps/meteor/packages/rocketchat-i18n/i18n/en.i18n.json

@@ -764,6 +764,7 @@
   "By_author": "By __author__",
   "cache_cleared": "Cache cleared",
   "Call": "Call",
+  "Call_back": "Call back",
   "Calling": "Calling",
   "Call_Center": "Voice Channel",
   "Call_Center_Description": "Configure Rocket.Chat's voice channels",
@@ -780,7 +781,9 @@
   "Call_number_enterprise_only": "Call number (Enterprise Edition only)",
   "call-management": "Call Management",
   "call-management_description": "Permission to start a meeting",
+  "Call_ongoing": "Call ongoing",
   "Call_unavailable_for_federation": "Call is unavailable for Federated rooms",
+  "Call_was_not_answered": "Call was not answered",
   "Caller": "Caller",
   "Caller_Id": "Caller ID",
   "Cam_on": "Cam On",
@@ -5232,6 +5235,7 @@
   "VoIP_Toggle": "Enable/Disable VoIP",
   "Chat_opened_by_visitor": "Chat opened by the visitor",
   "Wait_activation_warning": "Before you can login, your account must be manually activated by an administrator.",
+  "Waiting_for_answer": "Waiting for answer",
   "Waiting_queue": "Waiting queue",
   "Waiting_queue_message": "Waiting queue message",
   "Waiting_queue_message_description": "Message that will be displayed to the visitors when they get in the queue",

apps/meteor/server/models/raw/VideoConference.ts

@@ -189,7 +189,10 @@ export class VideoConferenceRaw extends BaseRaw<VideoConference> implements IVid
 		});
 	}
 
-	public async addUserById(callId: string, user: Pick<IUser, '_id' | 'name' | 'username' | 'avatarETag'> & { ts?: Date }): Promise<void> {
+	public async addUserById(
+		callId: string,
+		user: Required<Pick<IUser, '_id' | 'name' | 'username' | 'avatarETag'>> & { ts?: Date },
+	): Promise<void> {
 		await this.updateOneById(callId, {
 			$addToSet: {
 				users: {

apps/meteor/server/modules/listeners/listeners.module.ts

@@ -128,6 +128,12 @@ export class ListenersModule {
 			notifications.streamRoomMessage.emitWithoutBroadcast(message.rid, message);
 		});
 
+		service.onEvent('message.update', ({ message }) => {
+			if (message.rid) {
+				notifications.streamRoomMessage.emitWithoutBroadcast(message.rid, message);
+			}
+		});
+
 		service.onEvent('watch.subscriptions', ({ clientAction, subscription }) => {
 			if (!subscription.u?._id) {
 				return;

apps/meteor/server/sdk/lib/Events.ts

@@ -22,6 +22,7 @@ import type {
 	IWebdavAccount,
 	ICustomSound,
 	VoipEventDataSignature,
+	AtLeast,
 	UserStatus,
 } from '@rocket.chat/core-typings';
 
@@ -136,4 +137,5 @@ export type EventSignatures = {
 	'call.callerhangup'(userId: string, data: { roomId: string }): void;
 	'watch.pbxevents'(data: { clientAction: ClientAction; data: Partial<IPbxEvent>; id: string }): void;
 	'connector.statuschanged'(enabled: boolean): void;
+	'message.update'(data: { message: AtLeast<IMessage, 'rid'> }): void;
 };