snapshot of https://github.com/RocketChat/Rocket.Chat.git (develop, 2026-09-16; blobs > 131072B omitted)

apps/meteor/client/uikit/hooks/useBannerContextValue.ts

@@ -0,0 +1,47 @@
+import type { UiKitContext } from '@rocket.chat/fuselage-ui-kit';
+import type * as UiKit from '@rocket.chat/ui-kit';
+import type { ContextType } from 'react';
+
+import { useUiKitActionManager } from './useUiKitActionManager';
+
+type UseBannerContextValueParams = {
+	view: UiKit.BannerView;
+	values: {
+		[actionId: string]: {
+			value: unknown;
+			blockId?: string | undefined;
+		};
+	};
+};
+type UseBannerContextValueReturn = ContextType<typeof UiKitContext>;
+
+export const useBannerContextValue = ({ view, values }: UseBannerContextValueParams): UseBannerContextValueReturn => {
+	const actionManager = useUiKitActionManager();
+
+	return {
+		action: async ({ appId, viewId, actionId, blockId, value }) => {
+			if (!appId || !viewId) {
+				return;
+			}
+
+			await actionManager.emitInteraction(appId, {
+				type: 'blockAction',
+				actionId,
+				container: {
+					type: 'view',
+					id: viewId,
+				},
+				payload: {
+					blockId,
+					value,
+				},
+			});
+
+			actionManager.disposeView(view.viewId);
+		},
+		updateState: (): void => undefined,
+		appId: view.appId,
+		viewId: view.viewId,
+		values,
+	};
+};

apps/meteor/client/uikit/hooks/useContextualBarContextValue.ts

@@ -0,0 +1,74 @@
+import { useDebouncedCallback } from '@rocket.chat/fuselage-hooks';
+import type { UiKitContext } from '@rocket.chat/fuselage-ui-kit';
+import type * as UiKit from '@rocket.chat/ui-kit';
+import { useMemo } from 'react';
+import type { Dispatch, ContextType } from 'react';
+
+import { useUiKitActionManager } from './useUiKitActionManager';
+
+type UseContextualBarContextValueParams = {
+	view: UiKit.ContextualBarView;
+	values: {
+		[actionId: string]: {
+			value: unknown;
+			blockId?: string | undefined;
+		};
+	};
+	updateValues: Dispatch<{
+		actionId: string;
+		payload: {
+			value: unknown;
+			blockId?: string | undefined;
+		};
+	}>;
+	rid: string;
+};
+type UseContextualBarContextValueReturn = ContextType<typeof UiKitContext>;
+
+export const useContextualBarContextValue = ({
+	view,
+	values,
+	updateValues,
+	rid,
+}: UseContextualBarContextValueParams): UseContextualBarContextValueReturn => {
+	const actionManager = useUiKitActionManager();
+
+	const emitInteraction = useMemo(() => actionManager.emitInteraction.bind(actionManager), [actionManager]);
+	const debouncedEmitInteraction = useDebouncedCallback(emitInteraction, 700);
+
+	return {
+		action: async ({ appId, viewId, actionId, dispatchActionConfig, blockId, value }): Promise<void> => {
+			if (!appId || !viewId) {
+				return;
+			}
+
+			const emit = dispatchActionConfig?.includes('on_character_entered') ? debouncedEmitInteraction : emitInteraction;
+
+			await emit(appId, {
+				type: 'blockAction',
+				actionId,
+				container: {
+					type: 'view',
+					id: viewId,
+				},
+				payload: {
+					blockId,
+					value,
+				},
+				rid,
+			});
+		},
+		updateState: ({ actionId, value, blockId = 'default' }) => {
+			updateValues({
+				actionId,
+				payload: {
+					blockId,
+					value,
+				},
+			});
+		},
+		...view,
+		values,
+		viewId: view.id,
+	};
+};

apps/meteor/client/uikit/hooks/useMessageBlockContextValue.ts

@@ -0,0 +1,82 @@
+import type { IRoom, IMessage } from '@rocket.chat/core-typings';
+import { useStableCallback } from '@rocket.chat/fuselage-hooks';
+import type { UiKitContext } from '@rocket.chat/fuselage-ui-kit';
+import { useRoomToolbox } from '@rocket.chat/ui-contexts';
+import {
+	useVideoConfDispatchOutgoing,
+	useVideoConfIsCalling,
+	useVideoConfIsRinging,
+	useVideoConfJoinCall,
+	useVideoConfLoadCapabilities,
+	useVideoConfSetPreferences,
+} from '@rocket.chat/ui-video-conf';
+import type { ContextType } from 'react';
+
+import { useUiKitActionManager } from './useUiKitActionManager';
+import { useVideoConfWarning } from '../../views/room/contextualBar/VideoConference/hooks/useVideoConfWarning';
+
+export const useMessageBlockContextValue = (rid: IRoom['_id'], mid: IMessage['_id']): ContextType<typeof UiKitContext> => {
+	const joinCall = useVideoConfJoinCall();
+	const setPreferences = useVideoConfSetPreferences();
+	const isCalling = useVideoConfIsCalling();
+	const isRinging = useVideoConfIsRinging();
+	const dispatchWarning = useVideoConfWarning();
+	const dispatchPopup = useVideoConfDispatchOutgoing();
+	const loadVideoConfCapabilities = useVideoConfLoadCapabilities();
+
+	const handleOpenVideoConf = useStableCallback(async (rid: IRoom['_id']) => {
+		if (isCalling || isRinging) {
+			return;
+		}
+
+		try {
+			await loadVideoConfCapabilities();
+			dispatchPopup({ rid });
+		} catch (error: any) {
+			dispatchWarning(error.error);
+		}
+	});
+
+	const actionManager = useUiKitActionManager();
+
+	const { openTab } = useRoomToolbox();
+
+	return {
+		action: ({ appId, actionId, blockId, value }, event) => {
+			if (appId === 'videoconf-core') {
+				event.preventDefault();
+				setPreferences({ mic: true, cam: false });
+				if (actionId === 'join') {
+					return joinCall(blockId);
+				}
+
+				if (actionId === 'callBack') {
+					return handleOpenVideoConf(blockId);
+				}
+			}
+
+			if (appId === 'media-call-core') {
+				if (actionId === 'open-history') {
+					return openTab('media-call-history', blockId);
+				}
+			}
+
+			actionManager.emitInteraction(appId, {
+				type: 'blockAction',
+				actionId,
+				payload: {
+					blockId,
+					value,
+				},
+				container: {
+					type: 'message',
+					id: mid,
+				},
+				rid,
+				mid,
+			});
+		},
+		rid,
+		values: {}, // TODO: this is a hack to make the context work, but it should be removed
+	};
+};

apps/meteor/client/uikit/hooks/useModalContextValue.ts

@@ -0,0 +1,70 @@
+import { useDebouncedCallback } from '@rocket.chat/fuselage-hooks';
+import type { UiKitContext } from '@rocket.chat/fuselage-ui-kit';
+import type * as UiKit from '@rocket.chat/ui-kit';
+import { useMemo } from 'react';
+import type { Dispatch, ContextType } from 'react';
+
+import { useUiKitActionManager } from './useUiKitActionManager';
+
+type UseModalContextValueParams = {
+	view: UiKit.ModalView;
+	values: {
+		[actionId: string]: {
+			value: unknown;
+			blockId?: string | undefined;
+		};
+	};
+	errors?: { [field: string]: string }[] | { [field: string]: string };
+	updateValues: Dispatch<{
+		actionId: string;
+		payload: {
+			value: unknown;
+			blockId?: string;
+		};
+	}>;
+};
+
+type UseModalContextValueReturn = ContextType<typeof UiKitContext>;
+
+export const useModalContextValue = ({ view, errors, values, updateValues }: UseModalContextValueParams): UseModalContextValueReturn => {
+	const actionManager = useUiKitActionManager();
+
+	const emitInteraction = useMemo(() => actionManager.emitInteraction.bind(actionManager), [actionManager]);
+	const debouncedEmitInteraction = useDebouncedCallback(emitInteraction, 700);
+
+	return {
+		action: async ({ actionId, viewId, appId, dispatchActionConfig, blockId, value }) => {
+			if (!appId || !viewId) {
+				return;
+			}
+
+			const emit = dispatchActionConfig?.includes('on_character_entered') ? debouncedEmitInteraction : emitInteraction;
+
+			await emit(appId, {
+				type: 'blockAction',
+				actionId,
+				container: {
+					type: 'view',
+					id: viewId,
+				},
+				payload: {
+					blockId,
+					value,
+				},
+			});
+		},
+		updateState: ({ actionId, value, /* ,appId, */ blockId = 'default' }) => {
+			updateValues({
+				actionId,
+				payload: {
+					blockId,
+					value,
+				},
+			});
+		},
+		...view,
+		errors,
+		values,
+		viewId: view.id,
+	};
+};

apps/meteor/client/uikit/hooks/useUiKitActionManager.ts

@@ -0,0 +1,10 @@
+import { ActionManagerContext } from '@rocket.chat/ui-contexts';
+import { useContext } from 'react';
+
+export const useUiKitActionManager = () => {
+	const actionManager = useContext(ActionManagerContext);
+	if (!actionManager) {
+		throw new Error('ActionManagerContext is not provided');
+	}
+	return actionManager;
+};

apps/meteor/client/uikit/hooks/useUiKitView.ts

@@ -0,0 +1,93 @@
+import { useSafely } from '@rocket.chat/fuselage-hooks';
+import { extractInitialStateFromLayout } from '@rocket.chat/fuselage-ui-kit';
+import type * as UiKit from '@rocket.chat/ui-kit';
+import type { Dispatch } from 'react';
+import { useEffect, useMemo, useReducer, useState } from 'react';
+
+import { useUiKitActionManager } from './useUiKitActionManager';
+
+const reduceValues = (
+	values: { [actionId: string]: { value: unknown; blockId?: string } },
+	{ actionId, payload }: { actionId: string; payload: { value: unknown; blockId?: string } },
+): { [actionId: string]: { value: unknown; blockId?: string } } => ({
+	...values,
+	[actionId]: payload,
+});
+
+const getViewId = (view: UiKit.View): string => {
+	if ('id' in view && typeof view.id === 'string') {
+		return view.id;
+	}
+
+	if ('viewId' in view && typeof view.viewId === 'string') {
+		return view.viewId;
+	}
+
+	throw new Error('Invalid view');
+};
+
+const getViewFromInteraction = (interaction: UiKit.ServerInteraction): UiKit.View | undefined => {
+	if ('view' in interaction && typeof interaction.view === 'object') {
+		return interaction.view;
+	}
+
+	if (interaction.type === 'banner.open') {
+		return interaction;
+	}
+
+	return undefined;
+};
+
+type UseUiKitViewReturnType<TView extends UiKit.View> = {
+	view: TView;
+	errors?: { [field: string]: string }[];
+	values: { [actionId: string]: { value: unknown; blockId?: string } };
+	updateValues: Dispatch<{ actionId: string; payload: { value: unknown; blockId?: string } }>;
+	state: {
+		[blockId: string]: {
+			[key: string]: unknown;
+		};
+	};
+};
+
+export function useUiKitView<S extends UiKit.View>(initialView: S): UseUiKitViewReturnType<S> {
+	const [errors, setErrors] = useSafely(useState<{ [field: string]: string }[] | undefined>());
+	const [values, updateValues] = useSafely(useReducer(reduceValues, initialView.blocks, extractInitialStateFromLayout));
+	const [view, updateView] = useSafely(useState(initialView));
+	const actionManager = useUiKitActionManager();
+
+	const state = useMemo(() => {
+		return Object.entries(values).reduce<{ [blockId: string]: { [actionId: string]: unknown } }>((obj, [key, payload]) => {
+			if (!payload?.blockId) {
+				return obj;
+			}
+
+			const { blockId, value } = payload;
+			obj[blockId] = obj[blockId] || {};
+			obj[blockId][key] = value;
+
+			return obj;
+		}, {});
+	}, [values]);
+
+	const viewId = getViewId(view);
+
+	useEffect(() => {
+		const handleUpdate = (interaction: UiKit.ServerInteraction): void => {
+			if (interaction.type === 'errors') {
+				setErrors(interaction.errors);
+				return;
+			}
+
+			updateView((view) => ({ ...view, ...getViewFromInteraction(interaction) }));
+		};
+
+		actionManager.on(viewId, handleUpdate);
+
+		return (): void => {
+			actionManager.off(viewId, handleUpdate);
+		};
+	}, [actionManager, setErrors, updateView, viewId]);
+
+	return { view, errors, values, updateValues, state };
+}