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

apps/meteor/client/views/room/composer/messageBox/MessageBoxActionsToolbar/MessageBoxActionsToolbar.tsx

@@ -0,0 +1,168 @@
+import type { IRoom, IMessage } from '@rocket.chat/core-typings';
+import { isTruthy } from '@rocket.chat/tools';
+import { GenericMenu, type GenericMenuItemProps } from '@rocket.chat/ui-client';
+import { MessageComposerAction, MessageComposerActionsDivider } from '@rocket.chat/ui-composer';
+import type { TranslationKey } from '@rocket.chat/ui-contexts';
+import { useTranslation, useLayoutHiddenActions } from '@rocket.chat/ui-contexts';
+import type { MouseEvent } from 'react';
+import { memo } from 'react';
+
+import { useAudioMessageAction } from './hooks/useAudioMessageAction';
+import { useCreateDiscussionAction } from './hooks/useCreateDiscussionAction';
+import { useFileUploadAction } from './hooks/useFileUploadAction';
+import { useShareLocationAction } from './hooks/useShareLocationAction';
+import { useTimestampAction } from './hooks/useTimestampAction';
+import { useVideoMessageAction } from './hooks/useVideoMessageAction';
+import { useWebdavActions } from './hooks/useWebdavActions';
+import { useMessageboxAppsActionButtons } from '../../../../../hooks/useMessageboxAppsActionButtons';
+import { messageBox } from '../../../../../lib/messageBox';
+import { useChat } from '../../../contexts/ChatContext';
+import { useRoom } from '../../../contexts/RoomContext';
+
+export type MessageBoxActionsToolbarProps = {
+	canSend: boolean;
+	isMicrophoneDenied: boolean;
+	variant: 'small' | 'large';
+	isRecording: boolean;
+	rid: IRoom['_id'];
+	tmid?: IMessage['_id'];
+	isEditing: boolean;
+};
+
+const isHidden = (hiddenActions: Array<string>, action: GenericMenuItemProps) => {
+	if (!action) {
+		return true;
+	}
+	return hiddenActions.includes(action.id);
+};
+
+const MessageBoxActionsToolbar = ({
+	canSend,
+	isRecording,
+	rid,
+	tmid,
+	variant = 'large',
+	isMicrophoneDenied,
+	isEditing = false,
+}: MessageBoxActionsToolbarProps) => {
+	const t = useTranslation();
+	const chatContext = useChat();
+
+	if (!chatContext) {
+		throw new Error('useChat must be used within a ChatProvider');
+	}
+
+	const room = useRoom();
+
+	const disableBasicActions = !canSend || isRecording || isEditing;
+
+	const audioMessageAction = useAudioMessageAction(disableBasicActions || isMicrophoneDenied, isMicrophoneDenied);
+	const videoMessageAction = useVideoMessageAction(disableBasicActions);
+	const fileUploadAction = useFileUploadAction(disableBasicActions);
+	const webdavActions = useWebdavActions(disableBasicActions);
+	const createDiscussionAction = useCreateDiscussionAction(disableBasicActions, room);
+	const shareLocationAction = useShareLocationAction(disableBasicActions, room, tmid);
+	const timestampAction = useTimestampAction(!canSend || isRecording, chatContext.composer);
+
+	const apps = useMessageboxAppsActionButtons();
+	const { composerToolbox: hiddenActions } = useLayoutHiddenActions();
+
+	const allActions = {
+		...(!isHidden(hiddenActions, audioMessageAction) && { audioMessageAction }),
+		...(!isHidden(hiddenActions, videoMessageAction) && { videoMessageAction }),
+		...(!isHidden(hiddenActions, fileUploadAction) && { fileUploadAction }),
+		...(!isHidden(hiddenActions, createDiscussionAction) && { createDiscussionAction }),
+		...(!isHidden(hiddenActions, shareLocationAction) && { shareLocationAction }),
+		...(timestampAction && !isHidden(hiddenActions, timestampAction) && { timestampAction }),
+		...(!hiddenActions.includes('webdav-add') && webdavActions && { webdavActions }),
+	};
+
+	const featured = [];
+	const createNew = [];
+	const share = [];
+	const insert = [];
+
+	createNew.push(allActions.createDiscussionAction);
+
+	if (allActions.timestampAction) {
+		insert.push(allActions.timestampAction);
+	}
+
+	if (variant === 'small') {
+		featured.push(allActions.audioMessageAction, allActions.fileUploadAction);
+		createNew.push(allActions.videoMessageAction);
+	} else {
+		featured.push(allActions.audioMessageAction, allActions.videoMessageAction, allActions.fileUploadAction);
+	}
+
+	if (allActions.webdavActions) {
+		createNew.push(...allActions.webdavActions);
+	}
+
+	share.push(allActions.shareLocationAction);
+
+	const groups = {
+		...(apps.isSuccess &&
+			apps.data.length > 0 && {
+				Apps: apps.data,
+			}),
+		...messageBox.actions.get(),
+	};
+	const messageBoxActions = Object.entries(groups).map(([name, group]) => {
+		const items: GenericMenuItemProps[] = group
+			.filter((item) => !hiddenActions.includes(item.id))
+			.map((item) => ({
+				id: item.id,
+				icon: item.icon,
+				content: t(item.label),
+				onClick: (event?: MouseEvent<HTMLElement>) =>
+					item.action({
+						rid,
+						tmid,
+						event: event as unknown as Event,
+						chat: chatContext,
+					}),
+				gap: Boolean(!item.icon),
+				disabled: disableBasicActions,
+			}));
+
+		return {
+			title: t(name as TranslationKey),
+			items: items || [],
+		};
+	});
+
+	const createNewFiltered = createNew.filter(isTruthy);
+	const shareFiltered = share.filter(isTruthy);
+	const insertFiltered = insert.filter(isTruthy);
+
+	const renderAction = ({ id, icon, content, disabled, onClick }: GenericMenuItemProps) => {
+		if (!icon) {
+			return;
+		}
+
+		return <MessageComposerAction key={id} icon={icon} data-qa-id={id} title={content as string} disabled={disabled} onClick={onClick} />;
+	};
+
+	return (
+		<>
+			<MessageComposerActionsDivider />
+			{featured.map((action) => action && renderAction(action))}
+			<GenericMenu
+				disabled={isRecording || !canSend}
+				data-qa-id='menu-more-actions'
+				detached
+				icon='plus'
+				sections={[
+					{ title: t('Create_new'), items: createNewFiltered },
+					{ title: t('Share'), items: shareFiltered },
+					...(insertFiltered.length > 0 ? [{ title: t('Insert'), items: insertFiltered }] : []),
+					...messageBoxActions,
+				]}
+				title={t('More_actions')}
+			/>
+		</>
+	);
+};
+
+export default memo(MessageBoxActionsToolbar);

apps/meteor/client/views/room/composer/messageBox/MessageBoxActionsToolbar/hooks/useAudioMessageAction.ts

@@ -0,0 +1,64 @@
+import { useStableCallback } from '@rocket.chat/fuselage-hooks';
+import type { GenericMenuItemProps } from '@rocket.chat/ui-client';
+import { useSetting } from '@rocket.chat/ui-contexts';
+import { useEffect, useMemo } from 'react';
+
+import { AudioRecorder } from '../../../../../../lib/AudioRecorder';
+import { useChat } from '../../../../contexts/ChatContext';
+import { useMediaActionTitle } from '../../hooks/useMediaActionTitle';
+import { useMediaPermissions } from '../../hooks/useMediaPermissions';
+
+const audioRecorder = new AudioRecorder();
+
+export const useAudioMessageAction = (disabled: boolean, isMicrophoneDenied: boolean): GenericMenuItemProps => {
+	const isFileUploadEnabled = useSetting('FileUpload_Enabled', true);
+	const isAudioRecorderEnabled = useSetting('Message_AudioRecorderEnabled', true);
+	const fileUploadMediaTypeBlackList = useSetting('FileUpload_MediaTypeBlackList', '');
+	const fileUploadMediaTypeWhiteList = useSetting('FileUpload_MediaTypeWhiteList', '');
+	const [isPermissionDenied] = useMediaPermissions('microphone');
+
+	const isAllowed = useMemo(
+		() =>
+			Boolean(
+				audioRecorder.isSupported() &&
+				!isMicrophoneDenied &&
+				isFileUploadEnabled &&
+				isAudioRecorderEnabled &&
+				!fileUploadMediaTypeBlackList?.match(/audio\/mp3|audio\/\*/i) &&
+				(!fileUploadMediaTypeWhiteList || fileUploadMediaTypeWhiteList.match(/audio\/mp3|audio\/\*/i)),
+			),
+		[fileUploadMediaTypeBlackList, fileUploadMediaTypeWhiteList, isAudioRecorderEnabled, isFileUploadEnabled, isMicrophoneDenied],
+	);
+
+	const getMediaActionTitle = useMediaActionTitle('audio', isPermissionDenied, isFileUploadEnabled, isAudioRecorderEnabled, isAllowed);
+
+	const chat = useChat();
+
+	const stopRecording = useStableCallback(() => {
+		chat?.action.stop('recording');
+
+		chat?.composer?.setRecordingMode(false);
+	});
+
+	const setMicrophoneDenied = useStableCallback((isDenied: boolean) => {
+		if (isDenied) {
+			stopRecording();
+		}
+
+		chat?.composer?.setIsMicrophoneDenied(isDenied);
+	});
+
+	useEffect(() => {
+		setMicrophoneDenied(isPermissionDenied);
+	}, [setMicrophoneDenied, isPermissionDenied]);
+
+	const handleRecordButtonClick = () => chat?.composer?.setRecordingMode(true);
+
+	return {
+		id: 'audio-message',
+		content: getMediaActionTitle,
+		icon: 'mic',
+		disabled: !isAllowed || Boolean(disabled),
+		onClick: handleRecordButtonClick,
+	};
+};

apps/meteor/client/views/room/composer/messageBox/MessageBoxActionsToolbar/hooks/useCreateDiscussionAction.tsx

@@ -0,0 +1,34 @@
+import type { IRoom } from '@rocket.chat/core-typings';
+import { isRoomFederated } from '@rocket.chat/core-typings';
+import type { GenericMenuItemProps } from '@rocket.chat/ui-client';
+import { useTranslation, useSetting, usePermission, useSetModal } from '@rocket.chat/ui-contexts';
+
+import CreateDiscussion from '../../../../../../components/CreateDiscussion';
+
+export const useCreateDiscussionAction = (disabled: boolean, room?: IRoom): GenericMenuItemProps => {
+	const t = useTranslation();
+	const setModal = useSetModal();
+
+	if (!room) {
+		throw new Error('Invalid room');
+	}
+
+	const handleCreateDiscussion = () =>
+		setModal(
+			<CreateDiscussion onClose={() => setModal(null)} defaultParentRoom={room?.prid || room?._id} encryptedParentRoom={room?.encrypted} />,
+		);
+
+	const discussionEnabled = useSetting('Discussion_enabled', true);
+	const canStartDiscussion = usePermission('start-discussion', room._id);
+	const canSstartDiscussionOtherUser = usePermission('start-discussion-other-user', room._id);
+
+	const allowDiscussion = room && discussionEnabled && !isRoomFederated(room) && (canStartDiscussion || canSstartDiscussionOtherUser);
+
+	return {
+		id: 'create-discussion',
+		content: t('Discussion'),
+		icon: 'discussion',
+		disabled: !allowDiscussion || disabled,
+		onClick: handleCreateDiscussion,
+	};
+};

apps/meteor/client/views/room/composer/messageBox/MessageBoxActionsToolbar/hooks/useFileUploadAction.ts

@@ -0,0 +1,52 @@
+import type { GenericMenuItemProps } from '@rocket.chat/ui-client';
+import { useSetting } from '@rocket.chat/ui-contexts';
+import { useEffect } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { useFileInput } from '../../../../../../hooks/useFileInput';
+import { useChat } from '../../../../contexts/ChatContext';
+
+const fileInputProps = { type: 'file', multiple: true };
+
+export const useFileUploadAction = (disabled: boolean): GenericMenuItemProps => {
+	const { t } = useTranslation();
+	const fileUploadEnabled = useSetting('FileUpload_Enabled', true);
+	const fileInputRef = useFileInput(fileInputProps);
+	const chat = useChat();
+
+	useEffect(() => {
+		const resetFileInput = () => {
+			if (!fileInputRef?.current) {
+				return;
+			}
+
+			fileInputRef.current.value = '';
+		};
+
+		const handleUploadChange = async () => {
+			const { getMimeType } = await import('../../../../../../../app/utils/lib/mimeTypes');
+			const filesToUpload = Array.from(fileInputRef?.current?.files ?? []).map((file) => {
+				Object.defineProperty(file, 'type', {
+					value: getMimeType(file.type, file.name),
+				});
+				return file;
+			});
+			chat?.flows.uploadFiles({ files: filesToUpload, resetFileInput });
+		};
+
+		fileInputRef.current?.addEventListener('change', handleUploadChange);
+		return () => fileInputRef?.current?.removeEventListener('change', handleUploadChange);
+	}, [chat, fileInputRef]);
+
+	const handleUpload = () => {
+		fileInputRef?.current?.click();
+	};
+
+	return {
+		id: 'file-upload',
+		content: t('Upload_file'),
+		icon: 'clip',
+		onClick: handleUpload,
+		disabled: !fileUploadEnabled || disabled,
+	};
+};

apps/meteor/client/views/room/composer/messageBox/MessageBoxActionsToolbar/hooks/useShareLocationAction.tsx

@@ -0,0 +1,33 @@
+import type { IMessage, IRoom } from '@rocket.chat/core-typings';
+import { isRoomFederated } from '@rocket.chat/core-typings';
+import type { GenericMenuItemProps } from '@rocket.chat/ui-client';
+import { useSetting, useSetModal } from '@rocket.chat/ui-contexts';
+import { useTranslation } from 'react-i18next';
+
+import ShareLocationModal from '../../../../ShareLocation/ShareLocationModal';
+
+export const useShareLocationAction = (disabled: boolean, room?: IRoom, tmid?: IMessage['tmid']): GenericMenuItemProps => {
+	if (!room) {
+		throw new Error('Invalid room');
+	}
+
+	const { t } = useTranslation();
+	const setModal = useSetModal();
+
+	const isMapViewEnabled = useSetting('MapView_Enabled') === true;
+	const isGeolocationCurrentPositionSupported = Boolean(navigator.geolocation?.getCurrentPosition);
+	const googleMapsApiKey = useSetting('MapView_GMapsAPIKey', '');
+	const canGetGeolocation = isMapViewEnabled && isGeolocationCurrentPositionSupported && googleMapsApiKey && googleMapsApiKey.length;
+
+	const handleShareLocation = () => setModal(<ShareLocationModal rid={room._id} tmid={tmid} onClose={() => setModal(null)} />);
+
+	const allowGeolocation = room && canGetGeolocation && !isRoomFederated(room);
+
+	return {
+		id: 'share-location',
+		content: t('Location'),
+		icon: 'map-pin',
+		onClick: handleShareLocation,
+		disabled: !allowGeolocation || disabled,
+	};
+};

apps/meteor/client/views/room/composer/messageBox/MessageBoxActionsToolbar/hooks/useTimestampAction.tsx

@@ -0,0 +1,27 @@
+import type { GenericMenuItemProps } from '@rocket.chat/ui-client';
+import { useSetModal } from '@rocket.chat/ui-contexts';
+import { useTranslation } from 'react-i18next';
+
+import { TimestampPickerModal } from '../../../../../../components/message/toolbar/items/actions/Timestamp/TimestampPicker/TimestampPickerModal';
+import type { ComposerAPI } from '../../../../../../lib/chats/ChatAPI';
+
+export const useTimestampAction = (disabled: boolean, composer: ComposerAPI | undefined): GenericMenuItemProps | undefined => {
+	const setModal = useSetModal();
+	const { t } = useTranslation();
+
+	const handleClick = () => {
+		if (!composer) {
+			return;
+		}
+
+		setModal(<TimestampPickerModal onClose={() => setModal(null)} composer={composer} />);
+	};
+
+	return {
+		id: 'timestamp',
+		icon: 'clock',
+		content: t('Timestamp'),
+		onClick: handleClick,
+		disabled,
+	};
+};

apps/meteor/client/views/room/composer/messageBox/MessageBoxActionsToolbar/hooks/useVideoMessageAction.ts

@@ -0,0 +1,62 @@
+import { useStableCallback } from '@rocket.chat/fuselage-hooks';
+import type { GenericMenuItemProps } from '@rocket.chat/ui-client';
+import { useSetting } from '@rocket.chat/ui-contexts';
+import { useEffect, useMemo } from 'react';
+
+import { VideoRecorder } from '../../../../../../lib/videoRecorder';
+import { useChat } from '../../../../contexts/ChatContext';
+import { useMediaActionTitle } from '../../hooks/useMediaActionTitle';
+import { useMediaPermissions } from '../../hooks/useMediaPermissions';
+
+export const useVideoMessageAction = (disabled: boolean): GenericMenuItemProps => {
+	const isFileUploadEnabled = useSetting('FileUpload_Enabled', true);
+	const isVideoRecorderEnabled = useSetting('Message_VideoRecorderEnabled', true);
+	const fileUploadMediaTypeBlackList = useSetting('FileUpload_MediaTypeBlackList', 'image/svg+xml');
+	const fileUploadMediaTypeWhiteList = useSetting('FileUpload_MediaTypeWhiteList', '');
+	const [isPermissionDenied, setIsPermissionDenied] = useMediaPermissions('camera');
+
+	const isAllowed = useMemo(
+		() =>
+			Boolean(
+				!isPermissionDenied &&
+				navigator.mediaDevices &&
+				window.MediaRecorder &&
+				isFileUploadEnabled &&
+				isVideoRecorderEnabled &&
+				!fileUploadMediaTypeBlackList?.match(/video\/webm|video\/\*/i) &&
+				(!fileUploadMediaTypeWhiteList || fileUploadMediaTypeWhiteList.match(/video\/webm|video\/\*/i)) &&
+				Boolean(VideoRecorder.getSupportedMimeTypes()),
+			),
+		[fileUploadMediaTypeBlackList, fileUploadMediaTypeWhiteList, isFileUploadEnabled, isPermissionDenied, isVideoRecorderEnabled],
+	);
+
+	const getMediaActionTitle = useMediaActionTitle('video', isPermissionDenied, isFileUploadEnabled, isVideoRecorderEnabled, isAllowed);
+
+	const chat = useChat();
+
+	const handleOpenVideoMessage = () => {
+		if (!chat?.composer?.recordingVideo.get()) {
+			chat?.composer?.setRecordingVideo(true);
+		}
+	};
+
+	const handleDenyVideo = useStableCallback((isDenied: boolean) => {
+		if (isDenied) {
+			chat?.composer?.setRecordingVideo(false);
+		}
+
+		setIsPermissionDenied(isDenied);
+	});
+
+	useEffect(() => {
+		handleDenyVideo(isPermissionDenied);
+	}, [handleDenyVideo, isPermissionDenied]);
+
+	return {
+		id: 'video-message',
+		content: getMediaActionTitle,
+		icon: 'video-message',
+		disabled: !isAllowed || Boolean(disabled),
+		onClick: handleOpenVideoMessage,
+	};
+};

apps/meteor/client/views/room/composer/messageBox/MessageBoxActionsToolbar/hooks/useWebdavActions.tsx

@@ -0,0 +1,45 @@
+import type { IWebdavAccountIntegration } from '@rocket.chat/core-typings';
+import type { GenericMenuItemProps } from '@rocket.chat/ui-client';
+import { useSetModal, useSetting } from '@rocket.chat/ui-contexts';
+import { useTranslation } from 'react-i18next';
+
+import { useWebDAVAccountIntegrationsQuery } from '../../../../../../hooks/webdav/useWebDAVAccountIntegrationsQuery';
+import { useChat } from '../../../../contexts/ChatContext';
+import AddWebdavAccountModal from '../../../../webdav/AddWebdavAccountModal';
+import WebdavFilePickerModal from '../../../../webdav/WebdavFilePickerModal';
+
+export const useWebdavActions = (disabled: boolean): GenericMenuItemProps[] => {
+	const enabled = useSetting('Webdav_Integration_Enabled', false);
+
+	const { isSuccess, data } = useWebDAVAccountIntegrationsQuery({ enabled });
+
+	const chat = useChat();
+
+	const { t } = useTranslation();
+	const setModal = useSetModal();
+	const handleAddWebDav = () => setModal(<AddWebdavAccountModal onClose={() => setModal(null)} onConfirm={() => setModal(null)} />);
+
+	const handleUpload = async (file: File) => chat?.flows.uploadFiles({ files: [file] });
+
+	const handleOpenWebdav = (account: IWebdavAccountIntegration) =>
+		setModal(<WebdavFilePickerModal account={account} onUpload={handleUpload} onClose={() => setModal(null)} />);
+
+	return [
+		{
+			id: 'webdav-add',
+			content: t('Add_Server'),
+			icon: 'cloud-plus',
+			disabled: !isSuccess,
+			onClick: handleAddWebDav,
+		},
+		...(isSuccess
+			? data.map((account) => ({
+					id: account._id,
+					content: account.name,
+					icon: 'cloud-plus' as const,
+					disabled,
+					onClick: () => handleOpenWebdav(account),
+				}))
+			: []),
+	];
+};

apps/meteor/client/views/room/composer/messageBox/MessageBoxActionsToolbar/index.ts

@@ -0,0 +1 @@
+export { default } from './MessageBoxActionsToolbar';