Chore: Refactor Composer Dropdown

apps/meteor/app/discussion/client/index.js

@@ -1,5 +1,4 @@
 // Other UI extensions
 import './lib/messageTypes/discussionMessage';
 import './createDiscussionMessageAction';
-import './discussionFromMessageBox';
 import './tabBar';

apps/meteor/app/ui-message/client/actionButtons/messageBox.ts

@@ -11,11 +11,9 @@ import { Utilities } from '../../../apps/lib/misc/Utilities';
 
 const getIdForActionButton = ({ appId, actionId }: IUIActionButton): string => `${appId}/${actionId}`;
 
-const APP_GROUP = 'Create_new';
-
 export const onAdded = (button: IUIActionButton): void =>
 	// eslint-disable-next-line no-void
-	void messageBox.actions.add(APP_GROUP, t(Utilities.getI18nKeyForApp(button.labelI18n, button.appId)) as TranslationKey, {
+	void messageBox.actions.add('Apps', t(Utilities.getI18nKeyForApp(button.labelI18n, button.appId)) as TranslationKey, {
 		id: getIdForActionButton(button),
 		// icon: button.icon || '',
 		condition() {
@@ -33,4 +31,4 @@ export const onAdded = (button: IUIActionButton): void =>
 
 export const onRemoved = (button: IUIActionButton): void =>
 	// eslint-disable-next-line no-void
-	void messageBox.actions.remove(APP_GROUP, new RegExp(getIdForActionButton(button)));
+	void messageBox.actions.remove('Apps', new RegExp(getIdForActionButton(button)));

apps/meteor/app/ui-message/client/messageBox/createComposerAPI.ts

@@ -5,7 +5,6 @@ import $ from 'jquery';
 
 import { withDebouncing } from '../../../../lib/utils/highOrderFunctions';
 import type { ComposerAPI } from '../../../../client/lib/chats/ChatAPI';
-import './messageBoxActions';
 import type { FormattingButton } from './messageBoxFormatting';
 import { formattingButtons } from './messageBoxFormatting';
 

apps/meteor/app/ui-message/client/messageBox/messageBox.ts

@@ -1,5 +1,3 @@
-import './messageBoxActions';
-
 const lastFocusedInput: HTMLTextAreaElement | undefined = undefined;
 
 export const refocusComposer = () => {

apps/meteor/app/webdav/client/index.js

@@ -9,7 +9,6 @@ Meteor.startup(() => {
 			return;
 		}
 		c.stop();
-		import('./startup/messageBoxActions');
 		import('./startup/sync');
 		import('./actionButton');
 	});

apps/meteor/client/components/CreateDiscussion/CreateDiscussion.tsx

@@ -21,7 +21,7 @@ type CreateDiscussionFormValues = {
 };
 
 type CreateDiscussionProps = {
-	parentMessageId: IMessage['_id'];
+	parentMessageId?: IMessage['_id'];
 	onClose: () => void;
 	defaultParentRoom?: IRoom['_id'];
 	nameSuggestion?: string;

apps/meteor/client/views/composer/AudioMessageRecorder/AudioMessageRecorder.tsx

@@ -15,10 +15,11 @@ const audioRecorder = new AudioRecorder();
 type AudioMessageRecorderProps = {
 	rid: IRoom['_id'];
 	tmid?: IMessage['_id'];
+	isRecording?: boolean;
 	chatContext?: ChatAPI; // TODO: remove this when the composer is migrated to React
 } & Omit<AllHTMLAttributes<HTMLDivElement>, 'is'>;
 
-const AudioMessageRecorder = ({ rid, chatContext, ...props }: AudioMessageRecorderProps): ReactElement | null => {
+const AudioMessageRecorder = ({ rid, chatContext, isRecording, ...props }: AudioMessageRecorderProps): ReactElement | null => {
 	const t = useTranslation();
 
 	const [state, setState] = useState<'idle' | 'loading' | 'recording'>('idle');
@@ -167,6 +168,7 @@ const AudioMessageRecorder = ({ rid, chatContext, ...props }: AudioMessageRecord
 	if (state === 'idle') {
 		return (
 			<MessageComposerAction
+				disabled={isRecording}
 				title={t('Audio_message')}
 				icon='mic'
 				className='rc-message-box__icon rc-message-box__audio-message-mic'

apps/meteor/client/views/room/components/body/composer/messageBox/MessageBox.tsx

@@ -29,7 +29,6 @@ import { EmojiPicker } from '../../../../../../../app/emoji/client';
 import { createComposerAPI } from '../../../../../../../app/ui-message/client/messageBox/createComposerAPI';
 import type { FormattingButton } from '../../../../../../../app/ui-message/client/messageBox/messageBoxFormatting';
 import { formattingButtons } from '../../../../../../../app/ui-message/client/messageBox/messageBoxFormatting';
-import { messageBox, popover } from '../../../../../../../app/ui-utils/client';
 import { getImageExtensionFromMime } from '../../../../../../../lib/getImageExtensionFromMime';
 import { useFormatDateAndTime } from '../../../../../../hooks/useFormatDateAndTime';
 import { useReactiveValue } from '../../../../../../hooks/useReactiveValue';
@@ -42,8 +41,11 @@ import { useChat } from '../../../../contexts/ChatContext';
 import BlazeTemplate from '../../../BlazeTemplate';
 import ComposerUserActionIndicator from '../ComposerUserActionIndicator';
 import { useAutoGrow } from '../RoomComposer/hooks/useAutoGrow';
+import MessageBoxDropdown from './MessageBoxDropdown';
 import MessageBoxFormattingToolbar from './MessageBoxFormattingToolbar';
 import MessageBoxReplies from './MessageBoxReplies';
+import FileUploadAction from './actions/FileUploadAction';
+import VideoMessageAction from './actions/VideoMessageAction';
 
 const reducer = (_: unknown, event: FormEvent<HTMLInputElement>): boolean => {
 	const target = event.target as HTMLInputElement;
@@ -108,7 +110,6 @@ const MessageBox = ({
 	onUploadFiles,
 	onEscape,
 	onTyping,
-	subscription,
 	readOnly,
 	tshow,
 }: MessageBoxProps): ReactElement => {
@@ -255,7 +256,7 @@ const MessageBox = ({
 		subscribe: chat.composer?.editing.subscribe ?? emptySubscribe,
 	});
 
-	const isRecording = useSubscription({
+	const isRecordingAudio = useSubscription({
 		getCurrentValue: chat.composer?.recording.get ?? getEmptyFalse,
 		subscribe: chat.composer?.recording.subscribe ?? emptySubscribe,
 	});
@@ -320,6 +321,10 @@ const MessageBox = ({
 		}
 	});
 
+	const isRecording = isRecordingAudio || isRecordingVideo;
+
+	console.log(isRecordingVideo);
+
 	return (
 		<>
 			{chat?.composer?.quotedMessages && <MessageBoxReplies />}
@@ -358,48 +363,10 @@ const MessageBox = ({
 							/>
 						)}
 						<MessageComposerActionsDivider />
-						<AudioMessageRecorder rid={rid} tmid={tmid} disabled={!canSend || typing} />
-						<MessageComposerAction
-							disabled={isRecording}
-							onClick={(event): void => {
-								const groups = messageBox.actions.get();
-								const config = {
-									popoverClass: 'message-box',
-									columns: [
-										{
-											groups: Object.entries(groups).map(([name, group]) => {
-												const items = group.map((item) => ({
-													icon: item.icon,
-													name: t(item.label),
-													type: 'messagebox-action',
-													id: item.id,
-													action: item.action,
-												}));
-												return {
-													title: t.has(name) && t(name),
-													items,
-												};
-											}),
-										},
-									],
-									offsetVertical: 10,
-									direction: 'top-inverted',
-									currentTarget: event.currentTarget,
-									data: {
-										rid,
-										tmid,
-										prid: subscription?.prid,
-										messageBox: textareaRef.current,
-										chat,
-									},
-									activeElement: event.currentTarget,
-								};
-
-								popover.open(config);
-							}}
-							icon='plus'
-							data-qa-id='menu-more-actions'
-						/>
+						<VideoMessageAction isRecording={isRecordingAudio} />
+						<AudioMessageRecorder rid={rid} tmid={tmid} disabled={!canSend || typing || isRecordingVideo} />
+						<FileUploadAction isRecording={isRecording} />
+						<MessageBoxDropdown isRecording={isRecording} rid={rid} tmid={tmid} />
 					</MessageComposerToolbarActions>
 					<MessageComposerToolbarSubmit>
 						{!canSend && (