RocketChat · gabriellsh · Apr 17, 2026 · Apr 23, 2026 · Apr 14, 2026 · Apr 14, 2026
diff --git a/.yarn/patches/@react-aria-overlays-npm-3.25.0-2628866e6e.patch b/.yarn/patches/@react-aria-overlays-npm-3.25.0-2628866e6e.patch
@@ -14,8 +14,9 @@ const MediaCallProvider = ({ children }: { children: ReactNode }) => {
 
 	const unauthorizedContextValue = useMemo(
 		() => ({
-			inRoomView: false,
-			setInRoomView: () => undefined,
+			currentViews: [],
+			registerView: () => undefined,
+			unregisterView: () => undefined,
 			instance: undefined,
 			signalEmitter: new Emitter<any>(),
 			audioElement: undefined,

diff --git a/apps/meteor/ee/server/services/package.json b/apps/meteor/ee/server/services/package.json
@@ -47,7 +47,7 @@
 		"ws": "~8.19.0"
 	},
 	"devDependencies": {
-		"@rocket.chat/icons": "~0.47.0",
+		"@rocket.chat/icons": "^0.48.0",
 		"@types/cookie": "^0.5.4",
 		"@types/cookie-parser": "^1.4.10",
 		"@types/ejson": "^2.2.2",

diff --git a/apps/meteor/package.json b/apps/meteor/package.json
@@ -116,7 +116,7 @@
 		"@rocket.chat/gazzodown": "workspace:^",
 		"@rocket.chat/http-router": "workspace:^",
 		"@rocket.chat/i18n": "workspace:^",
-		"@rocket.chat/icons": "~0.47.0",
+		"@rocket.chat/icons": "^0.48.0",
 		"@rocket.chat/instance-status": "workspace:^",
 		"@rocket.chat/jwt": "workspace:^",
 		"@rocket.chat/layout": "^0.34.2",

diff --git a/apps/meteor/packages/meteor-inject-initial/lib/inject-core.js b/apps/meteor/packages/meteor-inject-initial/lib/inject-core.js
@@ -45,6 +45,8 @@ Inject.appUrl = function (url) {
 	// Avoid serving app HTML for declared routes such as /sockjs/.
 	if (typeof RoutePolicy !== 'undefined' && RoutePolicy.classify(url)) return false;
 
+	if (url === '/voice-call-popup.html') return false;
+
 	// we currently return app HTML on all URLs by default
 	return true;
 };
diff --git a/apps/meteor/public/voice-call-popup.html b/apps/meteor/public/voice-call-popup.html
@@ -0,0 +1 @@
+../node_modules/@rocket.chat/ui-voip/dist/voice-call-popup.html
diff --git a/apps/uikit-playground/package.json b/apps/uikit-playground/package.json
@@ -23,7 +23,7 @@
 		"@rocket.chat/fuselage-toastbar": "^0.35.2",
 		"@rocket.chat/fuselage-tokens": "~0.33.2",
 		"@rocket.chat/fuselage-ui-kit": "workspace:~",
-		"@rocket.chat/icons": "~0.47.0",
+		"@rocket.chat/icons": "^0.48.0",
 		"@rocket.chat/logo": "^0.32.5",
 		"@rocket.chat/styled": "^0.33.0",
 		"@rocket.chat/ui-avatar": "workspace:^",

diff --git a/package.json b/package.json
@@ -104,6 +104,7 @@
 		"@react-aria/i18n@npm:^3.12.5": "patch:@react-aria/i18n@npm%3A3.12.5#~/.yarn/patches/@react-aria-i18n-npm-3.12.5-435edff786.patch",
 		"@react-aria/toolbar@npm:^3.0.0-nightly.5042": "3.0.0-nightly-fb28ab3b4-241024",
 		"xml-crypto/@xmldom/xmldom": "0.8.13",
+		"@react-aria/overlays@npm:^3.25.0": "patch:@react-aria/overlays@npm%3A3.25.0#~/.yarn/patches/@react-aria-overlays-npm-3.25.0-2628866e6e.patch",
 		"xml-encryption/@xmldom/xmldom": "0.8.13",
 		"form-data@npm:^2.5.0": "2.5.5",
 		"form-data@npm:^4.0.0": "4.0.5",

diff --git a/packages/core-services/package.json b/packages/core-services/package.json
@@ -20,7 +20,7 @@
 		"@rocket.chat/core-typings": "workspace:^",
 		"@rocket.chat/federation-sdk": "0.6.3",
 		"@rocket.chat/http-router": "workspace:^",
-		"@rocket.chat/icons": "~0.47.0",
+		"@rocket.chat/icons": "^0.48.0",
 		"@rocket.chat/media-signaling": "workspace:^",
 		"@rocket.chat/message-parser": "workspace:^",
 		"@rocket.chat/models": "workspace:^",

@@ -18,7 +18,7 @@
 		"test": "echo \"no tests\" && exit 1"
 	},
 	"dependencies": {
-		"@rocket.chat/icons": "~0.47.0",
+		"@rocket.chat/icons": "^0.48.0",
 		"@rocket.chat/message-parser": "workspace:^",
 		"@rocket.chat/ui-kit": "workspace:~",
 		"typia": "patch:typia@npm%3A9.7.2#~/.yarn/patches/typia-npm-9.7.2-5c5d9c80b4.patch",

diff --git a/packages/fuselage-ui-kit/package.json b/packages/fuselage-ui-kit/package.json
@@ -49,7 +49,7 @@
 		"@rocket.chat/fuselage": "^0.78.0",
 		"@rocket.chat/fuselage-hooks": "^0.41.0",
 		"@rocket.chat/fuselage-tokens": "~0.33.2",
-		"@rocket.chat/icons": "~0.47.0",
+		"@rocket.chat/icons": "^0.48.0",
 		"@rocket.chat/jest-presets": "workspace:~",
 		"@rocket.chat/mock-providers": "workspace:^",
 		"@rocket.chat/styled": "^0.33.0",

diff --git a/packages/gazzodown/package.json b/packages/gazzodown/package.json
@@ -34,7 +34,7 @@
 		"@rocket.chat/fuselage": "^0.78.0",
 		"@rocket.chat/fuselage-hooks": "^0.41.0",
 		"@rocket.chat/fuselage-tokens": "~0.33.2",
-		"@rocket.chat/icons": "~0.47.0",
+		"@rocket.chat/icons": "^0.48.0",
 		"@rocket.chat/jest-presets": "workspace:~",
 		"@rocket.chat/message-parser": "workspace:^",
 		"@rocket.chat/styled": "^0.33.0",

diff --git a/packages/i18n/src/locales/en.i18n.json b/packages/i18n/src/locales/en.i18n.json
@@ -1052,6 +1052,7 @@
   "Call_not_found": "Call not found",
   "Call_not_found_error": "This could happen when the call URL is not valid, or you're having connection issues. Please check with the source of the call URL and try again, or talk to your workspace administrator if the problem persists",
   "Call_ongoing": "Call ongoing",
+  "Call_open_separate_window": "Call open in a separate window",
   "Call_provider": "Call Provider",
   "Call_ringer_volume": "Call ringer volume",
   "Call_ringer_volume_hint": "For all incoming voice and video call notifications",
@@ -2154,6 +2155,7 @@
   "Exclude_pinned": "Exclude pinned messages",
   "Execute_Synchronization_Now": "Execute Synchronization Now",
   "Exit_Full_Screen": "Exit Full Screen",
+  "Exit_fullscreen": "Exit fullscreen",
   "Expand": "Expand",
   "Expand_group": "Expand {{group}}",
   "Expand_all": "Expand all",
@@ -4063,6 +4065,7 @@
   "Open_Days": "Open days",
   "Open_Dialpad": "Open Dialpad",
   "Open_dialpad": "Open dialpad",
+  "Open_in_new_window": "Open in new window",
   "Open_Livechats": "Chats in progress",
   "Open_Outlook": "Open Outlook",
   "Open_call": "Open call",
@@ -4608,6 +4611,7 @@
   "Retrying": "Retrying",
   "Retry_Count": "Retry Count",
   "Return_to_home": "Return to home",
+  "Return_to_main_window": "Return to main window",
   "Return_to_previous_page": "Return to previous page",
   "Return_to_the_queue": "Return back to the Queue",
   "Review": "Review",
@@ -4978,6 +4982,7 @@
   "Show_agent_email": "Show agent email",
   "Show_agent_info": "Show agent information",
   "Show_all": "Show All",
+  "Show_call_here": "Show call here",
   "Show_counter": "Mark as unread",
   "Show_default_content": "Show default content",
   "Show_email_field": "Show email field",
@@ -6025,6 +6030,7 @@
   "You_are_not_authorized_to_access_this_feature": "You are not authorized to access this feature.",
   "You_are_sharing_your_screen": "You are sharing your screen",
   "You_can_change_a_different_avatar_too": "You can override the avatar used to post from this integration.",
+  "You_can_close_this_window": "You can close this window",
   "You_can_close_this_window_now": "You can close this window now.",
   "You_can_do_from_account_preferences": "You can do this later from your account preferences",
   "You_can_search_using_RegExp_eg": "You can search using <a href=\"https://en.wikipedia.org/wiki/Regular_expression\" target=\"_blank\">Regular Expression</a>. e.g. <code class='code-colors inline'>/^text$/i</code>",
@@ -7267,4 +7273,4 @@
   "Avatar_preview_updated": "Avatar preview updated",
   "Select_message_from_user": "Select message from {{username}}",
   "Select_message_from_user_with_preview": "Select message from {{username}}: {{message}}"
-}
+}
diff --git a/packages/storybook-config/package.json b/packages/storybook-config/package.json
@@ -37,7 +37,7 @@
 	},
 	"devDependencies": {
 		"@rocket.chat/fuselage": "^0.78.0",
-		"@rocket.chat/icons": "~0.47.0",
+		"@rocket.chat/icons": "^0.48.0",
 		"@rocket.chat/tsconfig": "workspace:*",
 		"@storybook/react": "^8.6.18",
 		"eslint": "~9.39.4",

diff --git a/packages/ui-avatar/package.json b/packages/ui-avatar/package.json
@@ -20,7 +20,7 @@
 		"@rocket.chat/fuselage": "^0.78.0",
 		"@rocket.chat/fuselage-hooks": "^0.41.0",
 		"@rocket.chat/fuselage-tokens": "~0.33.2",
-		"@rocket.chat/icons": "~0.47.0",
+		"@rocket.chat/icons": "^0.48.0",
 		"@rocket.chat/ui-contexts": "workspace:^",
 		"@types/react": "~18.3.28",
 		"@types/react-dom": "~18.3.7",

diff --git a/packages/ui-client/package.json b/packages/ui-client/package.json
@@ -29,7 +29,7 @@
 		"@rocket.chat/fuselage": "^0.78.0",
 		"@rocket.chat/fuselage-hooks": "^0.41.0",
 		"@rocket.chat/fuselage-tokens": "~0.33.2",
-		"@rocket.chat/icons": "~0.47.0",
+		"@rocket.chat/icons": "^0.48.0",
 		"@rocket.chat/jest-presets": "workspace:~",
 		"@rocket.chat/layout": "^0.34.2",
 		"@rocket.chat/logo": "^0.32.5",

diff --git a/packages/ui-composer/package.json b/packages/ui-composer/package.json
@@ -25,7 +25,7 @@
 		"@rocket.chat/fuselage": "^0.78.0",
 		"@rocket.chat/fuselage-hooks": "^0.41.0",
 		"@rocket.chat/fuselage-tokens": "~0.33.2",
-		"@rocket.chat/icons": "~0.47.0",
+		"@rocket.chat/icons": "^0.48.0",
 		"@rocket.chat/jest-presets": "workspace:~",
 		"@rocket.chat/tsconfig": "workspace:*",
 		"@rocket.chat/ui-client": "workspace:~",

@@ -27,7 +27,7 @@
 		"@rocket.chat/fuselage-hooks": "^0.41.0",
 		"@rocket.chat/fuselage-tokens": "~0.33.2",
 		"@rocket.chat/i18n": "workspace:~",
-		"@rocket.chat/icons": "~0.47.0",
+		"@rocket.chat/icons": "^0.48.0",
 		"@rocket.chat/jest-presets": "workspace:~",
 		"@rocket.chat/rest-typings": "workspace:^",
 		"@rocket.chat/tools": "workspace:~",

diff --git a/packages/ui-kit/package.json b/packages/ui-kit/package.json
@@ -34,7 +34,7 @@
 		"typia": "patch:typia@npm%3A9.7.2#~/.yarn/patches/typia-npm-9.7.2-5c5d9c80b4.patch"
 	},
 	"devDependencies": {
-		"@rocket.chat/icons": "~0.47.0",
+		"@rocket.chat/icons": "^0.48.0",
 		"@rocket.chat/jest-presets": "workspace:~",
 		"@rocket.chat/tsconfig": "workspace:*",
 		"@types/jest": "~30.0.0",

diff --git a/packages/ui-video-conf/package.json b/packages/ui-video-conf/package.json
@@ -25,7 +25,7 @@
 		"@rocket.chat/fuselage": "^0.78.0",
 		"@rocket.chat/fuselage-hooks": "^0.41.0",
 		"@rocket.chat/fuselage-tokens": "~0.33.2",
-		"@rocket.chat/icons": "~0.47.0",
+		"@rocket.chat/icons": "^0.48.0",
 		"@rocket.chat/jest-presets": "workspace:~",
 		"@rocket.chat/styled": "^0.33.0",
 		"@rocket.chat/tsconfig": "workspace:*",

diff --git a/packages/ui-voip/package.json b/packages/ui-voip/package.json
@@ -8,7 +8,8 @@
 		"/dist"
 	],
 	"scripts": {
-		"build": "rm -rf dist && tsc -p tsconfig.build.json",
+		"build": "rm -rf dist && tsc -p tsconfig.build.json && yarn build:post",
+		"build:post": "node --no-warnings dist/generate-landing-view.js && rm -f dist/generate-landing-view.*",
 		"dev": "tsc -p tsconfig.build.json --watch --preserveWatchOutput",
 		"lint": "eslint .",
 		"lint:fix": "eslint --fix .",
@@ -34,7 +35,7 @@
 		"@rocket.chat/fuselage-hooks": "^0.41.0",
 		"@rocket.chat/fuselage-tokens": "~0.33.2",
 		"@rocket.chat/fuselage-ui-kit": "workspace:^",
-		"@rocket.chat/icons": "~0.47.0",
+		"@rocket.chat/icons": "^0.48.0",
 		"@rocket.chat/jest-presets": "workspace:~",
 		"@rocket.chat/mock-providers": "workspace:~",
 		"@rocket.chat/styled": "^0.33.0",
@@ -58,13 +59,15 @@
 		"@testing-library/user-event": "~14.6.1",
 		"@types/jest": "~30.0.0",
 		"@types/jest-axe": "~3.5.9",
+		"@types/node": "~22.19.17",
 		"@types/react": "~18.3.28",
 		"@types/react-dom": "~18.3.7",
 		"date-fns": "~4.1.0",
 		"eslint": "~9.39.4",
 		"i18next": "~23.4.9",
 		"jest": "~30.2.0",
 		"jest-axe": "~10.0.0",
+		"jsdom": "^26.1.0",
 		"react": "~18.3.1",
 		"react-dom": "~18.3.1",
 		"react-virtuoso": "~4.12.8",

diff --git a/packages/ui-voip/src/components/ToggleButton.tsx b/packages/ui-voip/src/components/ToggleButton.tsx
@@ -11,20 +11,32 @@ type ToggleButtonProps = {
 	onToggle?: () => void;
 } & Omit<ComponentProps<typeof IconButton>, 'icon' | 'title' | 'aria-label' | 'disabled' | 'onClick'>;
 
-const ToggleButton = ({ disabled, label, pressed, icons, titles, onToggle, ...props }: ToggleButtonProps) => {
+const ToggleButton = ({
+	disabled,
+	label,
+	pressed,
+	icons,
+	titles,
+	onToggle,
+	danger = true,
+	secondary = true,
+	tiny = false,
+	...props
+}: ToggleButtonProps) => {
 	const iconName = icons[pressed ? 1 : 0];
 	const title = titles[pressed ? 1 : 0];
-	const iconColor = pressed ? 'font-danger' : undefined;
+	const iconColor = pressed && danger ? 'font-danger' : undefined;
+
+	const size = tiny ? { tiny: true } : { medium: true };
 
 	return (
 		<IconButton
 			{...props}
 			label={label}
-			medium
-			secondary
+			{...size}
+			secondary={secondary}
 			icon={<Icon size={16} color={iconColor} name={iconName} />}
 			title={title}
-			pressed={pressed}
 			aria-label={label}
 			disabled={disabled}
 			onClick={onToggle}

diff --git a/packages/ui-voip/src/context/MediaCallInstanceContext.ts b/packages/ui-voip/src/context/MediaCallInstanceContext.ts
@@ -10,15 +10,21 @@ export type Signals = {
 	toggleWidget: { peerInfo?: PeerInfo };
 };
 
+export type AvailableViews = 'room' | 'popout' | 'widget';
+
+type RegisterView = (view: AvailableViews) => void;
+type UnregisterView = (view: AvailableViews) => void;
+
 type MediaCallInstanceContextValue = {
 	instance: MediaSignalingSession | undefined;
 	signalEmitter: Emitter<Signals>;
 	audioElement: RefObject<HTMLAudioElement | null> | undefined;
 	openRoomId: string | undefined;
-	inRoomView: boolean;
+	currentViews: AvailableViews[];
 	setOpenRoomId: (openRoomId: string | undefined) => void;
 	getAutocompleteOptions: (filter: string) => Promise<PeerAutocompleteOptions[]>;
-	setInRoomView: (inRoomView: boolean) => void;
+	registerView: RegisterView;
+	unregisterView: UnregisterView;
 };
 
 export const MediaCallInstanceContext = createContext<MediaCallInstanceContextValue>({
@@ -28,8 +34,9 @@ export const MediaCallInstanceContext = createContext<MediaCallInstanceContextVa
 	openRoomId: undefined,
 	setOpenRoomId: () => undefined,
 	getAutocompleteOptions: () => Promise.resolve([]),
-	inRoomView: false,
-	setInRoomView: () => undefined,
+	currentViews: [],
+	registerView: () => undefined,
+	unregisterView: () => undefined,
 });
 
 export const useMediaCallInstance = (): MediaCallInstanceContextValue => useContext(MediaCallInstanceContext);
diff --git a/packages/ui-voip/src/context/MediaCallViewContext.ts b/packages/ui-voip/src/context/MediaCallViewContext.ts
@@ -23,6 +23,8 @@ type MediaCallViewContextValue = {
 	onAccept: () => Promise<void>;
 	onSelectPeer: (peerInfo: PeerInfo) => void;
 	onToggleScreenSharing: () => void;
+	onOpenPopout: () => void;
+	onClosePopout: () => void;
 	streams: MediaCallStreams;
 	widgetPositionTracker?: {
 		onChangePosition: (position: LastKnownPosition | null) => void;
@@ -56,6 +58,8 @@ export const defaultMediaCallContextValue: MediaCallViewContextValue = {
 	onAccept: () => Promise.resolve(undefined),
 	onSelectPeer: () => undefined,
 	onToggleScreenSharing: () => undefined,
+	onOpenPopout: () => undefined,
+	onClosePopout: () => undefined,
 	streams: {},
 };
 

diff --git a/packages/ui-voip/src/context/usePeekMediaSessionPeerInfo.spec.tsx b/packages/ui-voip/src/context/usePeekMediaSessionPeerInfo.spec.tsx
@@ -16,8 +16,9 @@ const createWrapper = (instance: MockInstance | undefined) => {
 	const wrapper = ({ children }: { children?: ReactNode }) => (
 		<MediaCallInstanceContext.Provider
 			value={{
-				inRoomView: false,
-				setInRoomView: () => undefined,
+				currentViews: [],
+				registerView: () => undefined,
+				unregisterView: () => undefined,
 				instance: instance as any,
 				signalEmitter: new Emitter<Signals>(),
 				audioElement: undefined,

diff --git a/packages/ui-voip/src/context/usePeekMediaSessionState.spec.tsx b/packages/ui-voip/src/context/usePeekMediaSessionState.spec.tsx
@@ -16,8 +16,9 @@ const createWrapper = (instance: MockInstance | undefined) => {
 	const wrapper = ({ children }: { children?: ReactNode }) => (
 		<MediaCallInstanceContext.Provider
 			value={{
-				inRoomView: false,
-				setInRoomView: () => undefined,
+				currentViews: [],
+				registerView: () => undefined,
+				unregisterView: () => undefined,
 				instance: instance as any,
 				signalEmitter: new Emitter<Signals>(),
 				audioElement: undefined,

diff --git a/packages/ui-voip/src/context/usePeerAutocomplete.spec.tsx b/packages/ui-voip/src/context/usePeerAutocomplete.spec.tsx
@@ -24,8 +24,9 @@ const appRoot = () =>
 		.wrap((children) => (
 			<MediaCallInstanceContext.Provider
 				value={{
-					inRoomView: false,
-					setInRoomView: () => undefined,
+					currentViews: [],
+					registerView: () => undefined,
+					unregisterView: () => undefined,
 					instance: undefined,
 					signalEmitter: new Emitter<Signals>(),
 					audioElement: undefined,

diff --git a/packages/ui-voip/src/context/useRegisterView.ts b/packages/ui-voip/src/context/useRegisterView.ts
@@ -0,0 +1,18 @@
+import { useLayoutEffect } from 'react';
+
+import { useMediaCallInstance } from '.';
+import type { AvailableViews } from './MediaCallInstanceContext';
+
+const useRegisterView = (view: AvailableViews): AvailableViews[] => {
+	const { currentViews, registerView, unregisterView } = useMediaCallInstance();
+
+	useLayoutEffect(() => {
+		registerView(view);
+
+		return () => unregisterView(view);
+	}, [view, registerView, unregisterView]);
+
+	return currentViews;
+};
+
+export default useRegisterView;
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		../node_modules/@rocket.chat/ui-voip/dist/voice-call-popup.html