feat(vc-poc): move LiveKit chat inside conference, update toggle, and fix room join button

- Chat panel now opens on the right inside the call surface and starts closed.
- ActionToggleChat uses a chat icon and shows an unread-messages badge.
- MediaCallRoomSection accepts children and renders the chat panel inside the call.
- LiveKitConferenceEmbeddedPage passes ConferenceChat as children and unreadCount.
- VideoConfManager/VideoConferenceBlock pass providerName/rid so the /conference window can open synchronously before the join request, avoiding popup blocking.
- Update VideoConfContext and providers to support optional providerName/rid for joinCall.

Co-Authored-By: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>

Author: rodrigok

apps/meteor/client/lib/VideoConfManager.ts

@@ -184,9 +184,9 @@ export const VideoConfManager = new (class VideoConfManager extends Emitter<Vide
 			case 'direct':
 				return this.callUser({ uid: data.calleeId, rid: roomId, callId: data.callId });
 			case 'videoconference':
-				return this.joinCall(data.callId);
+				return this.joinCall(data.callId, data.providerName, data.rid);
 			case 'livechat':
-				return this.joinCall(data.callId);
+				return this.joinCall(data.callId, data.providerName, undefined);
 		}
 	}
 
@@ -356,7 +356,7 @@ export const VideoConfManager = new (class VideoConfManager extends Emitter<Vide
 		this._logLevel = Math.max(0, Math.min(level, 2));
 	}
 
-	public async joinCall(callId: string): Promise<void> {
+	public async joinCall(callId: string, providerName?: string, rid?: string): Promise<void> {
 		this.debugLog(`[VideoConf] Joining call ${callId}.`);
 
 		if (this.incomingDirectCalls.has(callId)) {
@@ -376,7 +376,28 @@ export const VideoConfManager = new (class VideoConfManager extends Emitter<Vide
 			},
 		};
 
-		const { url, providerName, rid } = await sdk.rest.post('/v1/video-conference.join', params).catch((e) => {
+		// LiveKit calls are rendered in a dedicated /conference/:callId window.
+		// Open that window synchronously while the click user-gesture is still
+		// active; the conference page itself validates the join on the server.
+		if (providerName === 'livekit') {
+			this.debugLog(`[VideoConf] Opening embedded ${providerName} call ${callId} in room ${rid}.`);
+			this.emit('call/joinEmbedded', {
+				callId,
+				rid: rid || '',
+				providerName,
+				// Forward the same prefs the server received so the
+				// embedded provider can publish/skip mic + camera tracks
+				// according to the preflight popup's toggle state.
+				preferences: { ...this._preferences },
+			});
+			return;
+		}
+
+		const {
+			url,
+			providerName: responseProviderName,
+			rid: responseRid,
+		} = await sdk.rest.post('/v1/video-conference.join', params).catch((e) => {
 			console.error(`[VideoConf] Failed to join call ${callId}`, e);
 			this.emitError(e?.xhr?.responseJSON?.error || 'error-videoconf-join-failed');
 
@@ -387,12 +408,12 @@ export const VideoConfManager = new (class VideoConfManager extends Emitter<Vide
 		// url + a rid — the call is mounted inline by their React provider
 		// instead of opened in a popup. Dispatch to that provider via a
 		// distinct event so the URL-handling code path doesn't run.
-		if (!url && providerName && rid) {
-			this.debugLog(`[VideoConf] Joining embedded ${providerName} call ${callId} in room ${rid}.`);
+		if (!url && responseProviderName && responseRid) {
+			this.debugLog(`[VideoConf] Joining embedded ${responseProviderName} call ${callId} in room ${responseRid}.`);
 			this.emit('call/joinEmbedded', {
 				callId,
-				rid,
-				providerName,
+				rid: responseRid,
+				providerName: responseProviderName,
 				// Forward the same prefs the server received so the
 				// embedded provider can publish/skip mic + camera tracks
 				// according to the preflight popup's toggle state.
@@ -407,7 +428,7 @@ export const VideoConfManager = new (class VideoConfManager extends Emitter<Vide
 		}
 
 		this.debugLog(`[VideoConf] Opening ${url}.`);
-		this.emit('call/join', { url, callId, providerName });
+		this.emit('call/join', { url, callId, providerName: responseProviderName });
 	}
 
 	public abortCall(): void {

apps/meteor/client/providers/VideoConfProvider.tsx

@@ -79,7 +79,7 @@ const VideoConfContextProvider = ({ children }: VideoConfContextProviderProps) =
 			dismissOutgoing: () => setOutgoing(undefined),
 			startCall: (rid, confTitle) => void VideoConfManager.startCall(rid, confTitle),
 			acceptCall: (callId) => VideoConfManager.acceptIncomingCall(callId),
-			joinCall: (callId) => void VideoConfManager.joinCall(callId),
+			joinCall: (callId, providerName, rid) => void VideoConfManager.joinCall(callId, providerName, rid),
 			dismissCall: (callId) => VideoConfManager.dismissIncomingCall(callId),
 			rejectIncomingCall: (callId) => VideoConfManager.rejectIncomingCall(callId),
 			abortCall: () => VideoConfManager.abortCall(),

apps/meteor/client/views/conference/LiveKitConferenceEmbeddedPage.tsx

@@ -1,7 +1,14 @@
 import type { CallPreferences } from '@rocket.chat/core-typings';
 import { Box } from '@rocket.chat/fuselage';
 import { useUserDisplayName } from '@rocket.chat/ui-client';
-import { useRouteParameter, useSearchParameter, useSetModal, useUser, useUserAvatarPath } from '@rocket.chat/ui-contexts';
+import {
+	useRouteParameter,
+	useSearchParameter,
+	useSetModal,
+	useUser,
+	useUserAvatarPath,
+	useUserSubscription,
+} from '@rocket.chat/ui-contexts';
 import { MediaCallRoomSection, useMediaCallView } from '@rocket.chat/ui-voip';
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 
@@ -40,7 +47,7 @@ const LiveKitConferenceEmbeddedPage = () => {
 	const wasConnected = useRef(false);
 	const hasJoined = useRef(false);
 
-	const [showChat, setShowChat] = useState(true);
+	const [showChat, setShowChat] = useState(false);
 	const toggleChat = useCallback(() => setShowChat((prev) => !prev), []);
 	const closeChat = useCallback(() => setShowChat(false), []);
 
@@ -97,6 +104,9 @@ const LiveKitConferenceEmbeddedPage = () => {
 		[displayName, getUserAvatarPath, user?._id],
 	);
 
+	const subscription = useUserSubscription(room.rid ?? '');
+	const unreadCount = subscription?.unread ?? 0;
+
 	if (conference.error || (conference.providerName && conference.providerName !== 'livekit')) {
 		return <ConferencePageError />;
 	}
@@ -111,14 +121,9 @@ const LiveKitConferenceEmbeddedPage = () => {
 
 	return (
 		<Box bg='surface-light' w='full' h='full' display='flex' overflow='hidden'>
-			{showChat && (
-				<Box display='flex' flexDirection='column' flexShrink={0} width={400} h='full' borderInlineEndWidth={1} borderColor='stroke-light'>
-					<ConferenceChat rid={room.rid} loading={room.loading} onClose={closeChat} />
-				</Box>
-			)}
-			<Box flexGrow={1} display='flex' flexDirection='column' position='relative' minWidth={0} minHeight={0}>
-				<MediaCallRoomSection showChat={showChat} onToggleChat={toggleChat} user={ownUser} />
-			</Box>
+			<MediaCallRoomSection showChat={showChat} onToggleChat={toggleChat} user={ownUser} unreadCount={unreadCount}>
+				<ConferenceChat rid={room.rid} loading={room.loading} onClose={closeChat} />
+			</MediaCallRoomSection>
 		</Box>
 	);
 };

apps/meteor/client/views/room/contextualBar/VideoConference/VideoConfList/VideoConfListItem.tsx

@@ -47,6 +47,8 @@ const VideoConfListItem = ({
 		createdAt,
 		endedAt,
 		discussionRid,
+		providerName,
+		rid,
 	} = videoConfData;
 
 	const displayName = useUserDisplayName({ name, username });
@@ -63,7 +65,7 @@ const VideoConfListItem = ({
 	`;
 
 	const handleJoinConference = useStableCallback((): void => {
-		joinCall(callId);
+		joinCall(callId, providerName, rid);
 		return reload();
 	});
 

packages/fuselage-ui-kit/src/blocks/VideoConferenceBlock/VideoConferenceBlock.tsx

@@ -14,6 +14,8 @@ import {
 	VideoConfMessageContent,
 	VideoConfMessageActions,
 	VideoConfMessageAction,
+	useVideoConfJoinCall,
+	useVideoConfSetPreferences,
 } from '@rocket.chat/ui-video-conf';
 import type { MouseEventHandler } from 'react';
 import { useContext, memo, useMemo } from 'react';
@@ -37,6 +39,8 @@ const VideoConferenceBlock = ({ block }: VideoConferenceBlockProps) => {
 	const showRealName = useSetting('UI_Use_Real_Name', false);
 
 	const { action, viewId = undefined, rid } = useContext(UiKitContext);
+	const joinCall = useVideoConfJoinCall();
+	const setPreferences = useVideoConfSetPreferences();
 
 	if (surfaceType !== 'message') {
 		throw new Error('VideoConferenceBlock cannot be rendered outside message');
@@ -48,19 +52,6 @@ const VideoConferenceBlock = ({ block }: VideoConferenceBlockProps) => {
 
 	const result = useVideoConfDataStream({ rid, callId });
 
-	const joinHandler: MouseEventHandler<HTMLButtonElement> = (e): void => {
-		void action(
-			{
-				blockId: block.blockId || '',
-				appId,
-				actionId: 'join',
-				value: block.blockId || '',
-				viewId,
-			},
-			e,
-		);
-	};
-
 	const callAgainHandler: MouseEventHandler<HTMLButtonElement> = (e): void => {
 		void action(
 			{
@@ -130,6 +121,12 @@ const VideoConferenceBlock = ({ block }: VideoConferenceBlockProps) => {
 				})
 			: t('__usernames__joined', { usernames: joinedNamesOrUsernames });
 
+	const joinHandler: MouseEventHandler<HTMLButtonElement> = (e): void => {
+		e.preventDefault();
+		setPreferences({ mic: true, cam: false });
+		void joinCall(callId, data.providerName, data.rid);
+	};
+
 	const actions = (
 		<VideoConfMessageActions>
 			{data.discussionRid && <VideoConfMessageAction icon='discussion' title={t('Join_discussion')} onClick={openDiscussion} />}

packages/ui-video-conf/src/VideoConfContext.ts

@@ -12,7 +12,7 @@ export type VideoConfContextValue = {
 	dismissOutgoing: () => void;
 	startCall: (rid: IRoom['_id'], title?: string) => void;
 	acceptCall: (callId: string) => void;
-	joinCall: (callId: string) => void;
+	joinCall: (callId: string, providerName?: string, rid?: string) => void;
 	dismissCall: (callId: string) => void;
 	rejectIncomingCall: (callId: string) => void;
 	abortCall: () => void;

packages/ui-voip/src/components/Actions/ActionToggleChat.tsx

@@ -1,18 +1,24 @@
-import { Button } from '@rocket.chat/fuselage';
+import { Badge, Button } from '@rocket.chat/fuselage';
 import { useTranslation } from 'react-i18next';
 
 export type ActionToggleChatProps = {
 	pressed: boolean;
 	onClick: () => void;
+	unreadCount?: number;
 };
-const ActionToggleChat = ({ pressed, onClick }: ActionToggleChatProps) => {
+const ActionToggleChat = ({ pressed, onClick, unreadCount = 0 }: ActionToggleChatProps) => {
 	const { t } = useTranslation();
-	const icon = pressed ? 'chevron-down' : 'chevron-up';
 
-	const label = pressed ? t('Hide_chat') : t('Show_chat');
+	const displayCount = unreadCount > 99 ? '99+' : unreadCount;
+
 	return (
-		<Button medium onClick={onClick} icon={icon}>
-			{label}
+		<Button medium primary={pressed} onClick={onClick} icon='chat'>
+			{t('Chat')}
+			{unreadCount > 0 && (
+				<Badge small variant='danger' style={{ marginInlineStart: 4 }}>
+					{displayCount}
+				</Badge>
+			)}
 		</Button>
 	);
 };

packages/ui-voip/src/views/MediaCallRoomSection/MediaCallRoomSection.tsx

@@ -1,6 +1,6 @@
 import { css } from '@rocket.chat/css-in-js';
 import { Box, ButtonGroup, Icon } from '@rocket.chat/fuselage';
-import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { memo, useCallback, useEffect, useMemo, useRef, useState, type ReactNode } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import CallStage from './CallStage';
@@ -271,9 +271,13 @@ type MediaCallRoomSectionProps = {
 	};
 	/** When true, suppresses the chat-toggle button (used by the floating widget which has no chat slot). */
 	hideChatToggle?: boolean;
+	/** Optional chat panel rendered inside the call surface when showChat is true. */
+	children?: ReactNode;
+	/** Number of unread messages in the chat panel, shown as a badge on the toggle button. */
+	unreadCount?: number;
 };
 
-const MediaCallRoomSection = ({ showChat, onToggleChat, user, hideChatToggle }: MediaCallRoomSectionProps) => {
+const MediaCallRoomSection = ({ showChat, onToggleChat, user, hideChatToggle, children, unreadCount }: MediaCallRoomSectionProps) => {
 	const { t } = useTranslation();
 
 	const {
@@ -777,19 +781,37 @@ const MediaCallRoomSection = ({ showChat, onToggleChat, user, hideChatToggle }:
 					</Box>
 				</Box>
 			</Box>
-			<CallStage
-				localParticipant={localParticipant}
-				remoteParticipants={remoteParticipants}
-				onStopLocalScreenShare={onToggleScreenSharing}
-				handPositions={handPositions}
-				reactionsByParticipant={reactionsByParticipant}
-				captionsByParticipant={activeCaptions}
-			/>
+			<Box display='flex' flexDirection='row' flexGrow={1} minWidth={0} minHeight={0} overflow='hidden'>
+				<Box flexGrow={1} minWidth={0} minHeight={0} display='flex' flexDirection='column'>
+					<CallStage
+						localParticipant={localParticipant}
+						remoteParticipants={remoteParticipants}
+						onStopLocalScreenShare={onToggleScreenSharing}
+						handPositions={handPositions}
+						reactionsByParticipant={reactionsByParticipant}
+						captionsByParticipant={activeCaptions}
+					/>
+				</Box>
+				{showChat && children && (
+					<Box
+						display='flex'
+						flexDirection='column'
+						flexShrink={0}
+						width={400}
+						h='full'
+						bg='surface-light'
+						borderInlineStartWidth={1}
+						borderColor='stroke-light'
+					>
+						{children}
+					</Box>
+				)}
+			</Box>
 			<ActionStrip
 				rightSlot={
 					!hideChatToggle ? (
 						<ButtonGroup>
-							<ActionToggleChat pressed={showChat} onClick={onToggleChat} />
+							<ActionToggleChat pressed={showChat} onClick={onToggleChat} unreadCount={unreadCount} />
 							<ToggleButton
 								label={t('Open_in_new_window')}
 								titles={[t('Open_in_new_window'), t('Return_to_main_window')]}