refactor: Message component

.rnstorybook/preview.tsx

@@ -2,8 +2,6 @@ import React from 'react';
 import type { Preview } from '@storybook/react';
 import { Provider } from 'react-redux';
 
-import { themes } from '../app/lib/constants/colors';
-import MessageContext from '../app/containers/message/Context';
 import { selectServerRequest } from '../app/actions/server';
 import { mockedStore as store } from '../app/reducers/mockedStore';
 import { setUser } from '../app/actions/login';
@@ -19,26 +17,7 @@ const preview: Preview = {
 	decorators: [
 		Story => (
 			<Provider store={store}>
-				<MessageContext.Provider
-					value={{
-						user: {
-							id: 'y8bd77ptZswPj3EW8',
-							username: 'diego.mello',
-							token: 'abc'
-						},
-						baseUrl,
-						onPress: () => {},
-						onLongPress: () => {},
-						reactionInit: () => {},
-						onErrorPress: () => {},
-						replyBroadcast: () => {},
-						onReactionPress: () => {},
-						onDiscussionPress: () => {},
-						onReactionLongPress: () => {},
-						threadBadgeColor: themes.light.badgeBackgroundLevel1
-					}}>
-					<Story />
-				</MessageContext.Provider>
+				<Story />
 			</Provider>
 		)
 	]

CLAUDE.md

@@ -9,7 +9,7 @@ Rocket.Chat React Native mobile client. Single-package React Native app (not a m
 - React 19.1, React Native 0.81, Expo 54
 - TypeScript with strict mode, baseUrl set to `app/` (imports resolve from there)
 - Node: engines `>=18`, volta pins 24.13.1
-- Read UBIQUITOUS_LANGUAGE.md
+- Read CONTEXT.md
 
 ## Commands
 

app/containers/MessageComposer/MessageComposer.test.tsx

@@ -10,9 +10,10 @@ import { selectServerRequest } from '../../actions/server';
 import { setUser } from '../../actions/login';
 import { mockedStore } from '../../reducers/mockedStore';
 import { type IPermissionsState } from '../../reducers/permissions';
-import { type IMessage, type IShareAttachment } from '../../definitions';
+import { type IMessage, type IShareAttachment, type TMessageActionState } from '../../definitions';
 import { colors } from '../../lib/constants/colors';
 import { type IRoomContext, RoomContext } from '../../views/RoomView/context';
+import { MessageActionProvider } from '../message/stores/MessageActionStore';
 import * as EmojiKeyboardHook from './hooks/useEmojiKeyboard';
 import { initStore } from '../../lib/store/auxStore';
 import { searchRemote } from '../../lib/methods/search';
@@ -110,24 +111,32 @@ const initialContext = {
 		federated: false
 	},
 	sharing: false,
-	action: null,
-	selectedMessages: [],
 	editCancel: jest.fn(),
 	editRequest: jest.fn(),
 	onSendMessage: jest.fn(),
 	onRemoveQuoteMessage: jest.fn()
 };
 
-const Render = ({ context, children }: { context?: Partial<IRoomContext>; children?: ReactElement }) => (
+const Render = ({
+	context,
+	action,
+	children
+}: {
+	context?: Partial<IRoomContext>;
+	action?: TMessageActionState;
+	children?: ReactElement;
+}) => (
 	<Provider store={mockedStore}>
-		<RoomContext.Provider value={{ ...initialContext, ...context }}>
-			<MessageComposerContainer>
-				<>
-					<ComposerAttachments />
-					{children}
-				</>
-			</MessageComposerContainer>
-		</RoomContext.Provider>
+		<MessageActionProvider initialAction={action}>
+			<RoomContext.Provider value={{ ...initialContext, ...context }}>
+				<MessageComposerContainer>
+					<>
+						<ComposerAttachments />
+						{children}
+					</>
+				</MessageComposerContainer>
+			</RoomContext.Provider>
+		</MessageActionProvider>
 	</Provider>
 );
 
@@ -639,7 +648,7 @@ describe('MessageComposer', () => {
 		const id = 'messageId';
 		beforeEach(() => {
 			return renderAndFlush(
-				<Render context={{ rid: 'rid', selectedMessages: [id], action: 'edit', onSendMessage, editCancel, editRequest }} />
+				<Render context={{ rid: 'rid', onSendMessage, editCancel, editRequest }} action={{ kind: 'edit', messageId: id }} />
 			);
 		});
 		test('init', async () => {
@@ -671,7 +680,7 @@ describe('MessageComposer', () => {
 		const editRequest = jest.fn();
 		const id = 'image';
 		test('edit image', async () => {
-			await renderAndFlush(<Render context={{ rid: 'rid', selectedMessages: [id], action: 'edit', editRequest }} />);
+			await renderAndFlush(<Render context={{ rid: 'rid', editRequest }} action={{ kind: 'edit', messageId: id }} />);
 			await screen.findByTestId('message-composer');
 			await user.press(screen.getByTestId('message-composer-send'));
 			expect(editRequest).toHaveBeenCalledWith({ id, msg: `Attachment description for ${id}`, rid: 'rid' });
@@ -703,14 +712,14 @@ describe('MessageComposer', () => {
 
 	describe('Quote', () => {
 		test('Add quote `abc`', async () => {
-			render(<Render context={{ action: 'quote', selectedMessages: ['abc'] }} />);
+			render(<Render action={{ kind: 'quote', messageIds: ['abc'] }} />);
 			await screen.findByTestId('composer-quote-abc');
 			expect(screen.queryByTestId('composer-quote-abc')).toBeOnTheScreen();
 			expect(screen.toJSON()).toMatchSnapshot();
 		});
 
 		test('Add quote `def`', async () => {
-			render(<Render context={{ action: 'quote', selectedMessages: ['abc', 'def'] }} />);
+			render(<Render action={{ kind: 'quote', messageIds: ['abc', 'def'] }} />);
 			await screen.findByTestId('composer-quote-abc');
 			expect(screen.queryByTestId('composer-quote-abc')).toBeOnTheScreen();
 			expect(screen.queryByTestId('composer-quote-def')).toBeOnTheScreen();
@@ -719,7 +728,7 @@ describe('MessageComposer', () => {
 
 		test('Remove a quote', async () => {
 			const onRemoveQuoteMessage = jest.fn();
-			render(<Render context={{ action: 'quote', selectedMessages: ['abc', 'def'], onRemoveQuoteMessage }} />);
+			render(<Render context={{ onRemoveQuoteMessage }} action={{ kind: 'quote', messageIds: ['abc', 'def'] }} />);
 			await screen.findByTestId('composer-quote-def');
 			await user.press(screen.getByTestId('composer-quote-remove-def'));
 			expect(onRemoveQuoteMessage).toHaveBeenCalledTimes(1);

app/containers/MessageComposer/MessageComposer.tsx

@@ -5,6 +5,7 @@ import { Q } from '@nozbe/watermelondb';
 import Animated, { useAnimatedStyle, useSharedValue } from 'react-native-reanimated';
 
 import { useRoomContext } from '../../views/RoomView/context';
+import { useMessageAction } from '../message/stores/MessageActionStore';
 import { Autocomplete } from './components';
 import { MIN_HEIGHT } from './constants';
 import {
@@ -54,7 +55,8 @@ export const MessageComposer = ({
 	});
 	const contentHeight = useSharedValue(MIN_HEIGHT);
 	useCloseKeyboardWhenOrientationChanges();
-	const { rid, tmid, action, selectedMessages, sharing, editRequest, onSendMessage, setQuotesAndText } = useRoomContext();
+	const { rid, tmid, sharing, editRequest, onSendMessage, setQuotesAndText } = useRoomContext();
+	const action = useMessageAction();
 	const alsoSendThreadToChannel = useAlsoSendThreadToChannel();
 	const { showEmojiKeyboard, showEmojiSearchbar, openEmojiSearchbar, resetKeyboard, keyboardHeight } = useEmojiKeyboard();
 	const { setAlsoSendThreadToChannel, setAutocompleteParams, clearAttachments } = useMessageComposerApi();
@@ -108,22 +110,22 @@ export const MessageComposer = ({
 
 		const textFromInput = composerInputComponentRef.current.getTextAndClear();
 
-		if (action === 'edit') {
+		if (action?.kind === 'edit') {
 			const updatedAttachments = attachments.length
 				? attachments.map(({ description, altText, fileId, filename }) =>
 						altTextSupported ? { description: altText || '', fileId, filename } : { description: description || '' }
 				  )
 				: undefined;
-			editRequest?.({ id: selectedMessages[0], msg: textFromInput, rid, attachments: updatedAttachments });
+			editRequest?.({ id: action.messageId, msg: textFromInput, rid, attachments: updatedAttachments });
 			clearAttachments();
 			return;
 		}
 
 		if (attachments.length) {
 			let quotedMessage: string | undefined;
 
-			if (action === 'quote') {
-				quotedMessage = await prepareQuoteMessage(textFromInput, selectedMessages);
+			if (action?.kind === 'quote') {
+				quotedMessage = await prepareQuoteMessage(textFromInput, action.messageIds);
 			}
 
 			try {
@@ -146,8 +148,8 @@ export const MessageComposer = ({
 			}
 		}
 
-		if (action === 'quote') {
-			const quoteMessage = await prepareQuoteMessage(textFromInput, selectedMessages);
+		if (action?.kind === 'quote') {
+			const quoteMessage = await prepareQuoteMessage(textFromInput, action.messageIds);
 			onSendMessage?.(quoteMessage);
 			return;
 		}
@@ -245,7 +247,7 @@ export const MessageComposer = ({
 			}}>
 			<MessageComposerContent
 				recordingAudio={recordingAudio}
-				action={action}
+				action={action?.kind ?? null}
 				showEmojiSearchbar={showEmojiSearchbar}
 				composerInputComponentRef={composerInputComponentRef}
 				composerInputRef={composerInputRef}

app/containers/MessageComposer/components/CancelEdit.tsx

@@ -1,13 +1,15 @@
 import { BaseButton } from './Buttons';
 import { useRoomContext } from '../../../views/RoomView/context';
+import { useMessageAction } from '../../message/stores/MessageActionStore';
 import { Gap } from './Gap';
 
 export const CancelEdit = () => {
 	'use memo';
 
-	const { action, editCancel } = useRoomContext();
+	const { editCancel } = useRoomContext();
+	const action = useMessageAction();
 
-	if (action !== 'edit') {
+	if (action?.kind !== 'edit') {
 		return null;
 	}
 	return (

app/containers/MessageComposer/components/ComposerInput.tsx

@@ -33,6 +33,7 @@ import database from '../../../lib/database';
 import Navigation from '../../../lib/navigation/appNavigation';
 import { emitter } from '../../../lib/methods/helpers/emitter';
 import { useRoomContext } from '../../../views/RoomView/context';
+import { useMessageAction } from '../../message/stores/MessageActionStore';
 import { getMessageById } from '../../../lib/database/services/Message';
 import { generateTriggerId } from '../../../lib/methods/actions';
 import { executeCommandPreview } from '../../../lib/services/restApi';
@@ -50,7 +51,8 @@ const defaultSelection: IInputSelection = { start: 0, end: 0 };
 export const ComposerInput = memo(
 	forwardRef<IComposerInput, IComposerInputProps>(({ inputRef }, ref) => {
 		const { colors, theme } = useTheme();
-		const { rid, tmid, sharing, action, selectedMessages, setQuotesAndText, room } = useRoomContext();
+		const { rid, tmid, sharing, setQuotesAndText, room } = useRoomContext();
+		const action = useMessageAction();
 		const focused = useFocused();
 		const { setFocused, setMicOrSend, setAutocompleteParams } = useMessageComposerApi();
 		const autocompleteType = useAutocompleteParams()?.type;
@@ -92,38 +94,38 @@ export const ComposerInput = memo(
 				}
 			};
 
-			if (action !== 'edit' && firstRender.current) {
+			if (action?.kind !== 'edit' && firstRender.current) {
 				firstRender.current = false;
 				setDraftMessage();
 			}
 			if (sharing) return;
 			if (usedCannedResponse) setInput(usedCannedResponse);
-		}, [action, rid, tmid, usedCannedResponse]);
+		}, [action?.kind, rid, tmid, usedCannedResponse]);
 
 		// Edit/quote
 		useEffect(() => {
-			const fetchMessageAndSetInput = async () => {
-				const message = await getMessageById(selectedMessages[0]);
+			const fetchMessageAndSetInput = async (messageId: string) => {
+				const message = await getMessageById(messageId);
 				if (message) {
 					setInput(message?.msg || (altTextSupported ? '' : message?.attachments?.[0]?.description || ''));
 				}
 			};
 
 			if (sharing) return;
 
-			if (prevAction === 'edit' && action !== 'edit') {
+			if (prevAction?.kind === 'edit' && action?.kind !== 'edit') {
 				setInput('');
 				return;
 			}
-			if (action === 'edit' && selectedMessages[0]) {
+			if (action?.kind === 'edit') {
 				focus();
-				fetchMessageAndSetInput();
+				fetchMessageAndSetInput(action.messageId);
 				return;
 			}
-			if (action === 'quote' && selectedMessages.length) {
+			if (action?.kind === 'quote' && action.messageIds.length) {
 				focus();
 			}
-		}, [action, selectedMessages]);
+		}, [action]);
 
 		useFocusEffect(
 			useCallback(() => {

app/containers/MessageComposer/components/MessageComposerContent.tsx

@@ -1,7 +1,7 @@
 import { memo, type ReactElement, type RefObject } from 'react';
 import { type LayoutChangeEvent, StyleSheet, View } from 'react-native';
 
-import { type TMessageAction } from '../../../views/RoomView/context';
+import { type TMessageAction } from '../../../definitions';
 import { type IComposerInput } from '../interfaces';
 import { useTheme } from '../../../theme';
 import { RecordAudio } from './RecordAudio';

app/containers/MessageComposer/components/Quotes/Quotes.tsx

@@ -2,12 +2,13 @@ import { useEffect, useRef, type ReactElement } from 'react';
 import { FlatList } from 'react-native';
 
 import { Quote } from './Quote';
-import { useRoomContext } from '../../../../views/RoomView/context';
+import { useMessageAction } from '../../../message/stores/MessageActionStore';
 
 export const Quotes = (): ReactElement | null => {
 	'use memo';
 
-	const { selectedMessages, action } = useRoomContext();
+	const action = useMessageAction();
+	const selectedMessages = action?.kind === 'quote' ? action.messageIds : [];
 	const nQuotesRef = useRef(0);
 	const listRef = useRef<FlatList>(null);
 
@@ -20,7 +21,7 @@ export const Quotes = (): ReactElement | null => {
 		nQuotesRef.current = selectedMessages.length;
 	}, [selectedMessages.length]);
 
-	if (action !== 'quote') {
+	if (action?.kind !== 'quote') {
 		return null;
 	}
 

app/containers/MessageComposer/hooks/useAutoSaveDraft.ts

@@ -3,13 +3,15 @@ import { useCallback, useEffect, useRef } from 'react';
 
 import { saveDraftMessage } from '../../../lib/methods/draftMessage';
 import { useRoomContext } from '../../../views/RoomView/context';
+import { useMessageAction } from '../../message/stores/MessageActionStore';
 import { useFocused } from '../context';
 
 export const useAutoSaveDraft = (text = '') => {
 	'use memo';
 
 	const route = useRoute();
-	const { rid, tmid, action, selectedMessages } = useRoomContext();
+	const { rid, tmid } = useRoomContext();
+	const action = useMessageAction();
 	const focused = useFocused();
 	const oldText = useRef('');
 	const intervalRef = useRef<number | null>(null);
@@ -19,11 +21,13 @@ export const useAutoSaveDraft = (text = '') => {
 	const saveMessageDraft = useCallback(
 		(m?: string) => {
 			if (route.name === 'ShareView') return;
-			if (action === 'edit') return;
+			if (action?.kind === 'edit') return;
 
 			let draftMessage = '';
-			if (selectedMessages?.length) {
-				draftMessage = JSON.stringify({ quotes: selectedMessages, msg: text });
+			if (action?.kind === 'quote') {
+				draftMessage = JSON.stringify({ quotes: action.messageIds, msg: text });
+			} else if (action?.kind === 'react') {
+				draftMessage = JSON.stringify({ quotes: [action.messageId], msg: text });
 			} else {
 				draftMessage = m ?? text;
 			}
@@ -32,7 +36,7 @@ export const useAutoSaveDraft = (text = '') => {
 				saveDraftMessage({ rid, tmid, draftMessage });
 			}
 		},
-		[action, rid, tmid, text, selectedMessages, route.name]
+		[action, rid, tmid, text, route.name]
 	);
 
 	// if focused on composer input, saves every N seconds