refactor: Message component

.rnstorybook/preview.tsx

@@ -35,7 +35,13 @@ const preview: Preview = {
 						onReactionPress: () => {},
 						onDiscussionPress: () => {},
 						onReactionLongPress: () => {},
-						threadBadgeColor: themes.light.badgeBackgroundLevel1
+						threadBadgeColor: themes.light.badgeBackgroundLevel1,
+						getCustomEmoji: () => null,
+						navToRoomInfo: () => {},
+						showAttachment: undefined,
+						blockAction: undefined,
+						handleEnterCall: undefined,
+						fetchThreadName: undefined
 					}}>
 					<Story />
 				</MessageContext.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
 

UBIQUITOUS_LANGUAGE.md → CONTEXT.md

@@ -52,6 +52,15 @@
 | **Room History**    | Older Messages of a Room fetched on demand from the server (distinct from **Server History**)                                      | Message history        |
 | **Jump to Message** | Re-position the Room view onto a target Message that may be far from the Live Tail or not yet synced — fetches a surrounding Chunk | Scroll to message      |
 
+## Message Interaction & Position State
+
+Two distinct kinds of transient per-Room state drive how the Room view renders Messages. They have different owners and are migrated independently, so keep them apart.
+
+| Term                  | Definition                                                                              | Owner                          | Scope                                                                |
+| --------------------- | --------------------------------------------------------------------------------------- | ------------------------------ | -------------------------------------------------------------------- |
+| **Interaction state** | Which Message is selected and the current Message action — reply, quote, edit, or react | A per-Room interaction store   | Migrated to the per-Room store as part of the Message row work       |
+| **Positional state**  | Which Message is highlighted and the jump or scroll position                            | The Room view scroll machinery | Stays with the Room view scroll machinery and is migrated separately |
+
 ## Users & Roles
 
 | Term            | Definition                                                                         | Aliases to avoid        |

app/containers/MessageComposer/MessageComposer.test.tsx

@@ -12,7 +12,8 @@ import { mockedStore } from '../../reducers/mockedStore';
 import { type IPermissionsState } from '../../reducers/permissions';
 import { type IMessage, type IShareAttachment } from '../../definitions';
 import { colors } from '../../lib/constants/colors';
-import { type IRoomContext, RoomContext } from '../../views/RoomView/context';
+import { type IRoomContext, RoomContext, type TMessageAction } from '../../views/RoomView/context';
+import { InteractionProvider } from '../../views/RoomView/InteractionStore';
 import * as EmojiKeyboardHook from './hooks/useEmojiKeyboard';
 import { initStore } from '../../lib/store/auxStore';
 import { search } from '../../lib/methods/search';
@@ -109,24 +110,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,
+	interactionState,
+	children
+}: {
+	context?: Partial<IRoomContext>;
+	interactionState?: { action?: TMessageAction; selectedMessages?: string[] };
+	children?: ReactElement;
+}) => (
 	<Provider store={mockedStore}>
-		<RoomContext.Provider value={{ ...initialContext, ...context }}>
-			<MessageComposerContainer>
-				<>
-					<ComposerAttachments />
-					{children}
-				</>
-			</MessageComposerContainer>
-		</RoomContext.Provider>
+		<InteractionProvider initialState={interactionState}>
+			<RoomContext.Provider value={{ ...initialContext, ...context }}>
+				<MessageComposerContainer>
+					<>
+						<ComposerAttachments />
+						{children}
+					</>
+				</MessageComposerContainer>
+			</RoomContext.Provider>
+		</InteractionProvider>
 	</Provider>
 );
 
@@ -638,7 +647,10 @@ 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 }}
+					interactionState={{ action: 'edit', selectedMessages: [id] }}
+				/>
 			);
 		});
 		test('init', async () => {
@@ -670,7 +682,9 @@ 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 }} interactionState={{ action: 'edit', selectedMessages: [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' });
@@ -702,14 +716,14 @@ describe('MessageComposer', () => {
 
 	describe('Quote', () => {
 		test('Add quote `abc`', async () => {
-			render(<Render context={{ action: 'quote', selectedMessages: ['abc'] }} />);
+			render(<Render interactionState={{ action: 'quote', selectedMessages: ['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 interactionState={{ action: 'quote', selectedMessages: ['abc', 'def'] }} />);
 			await screen.findByTestId('composer-quote-abc');
 			expect(screen.queryByTestId('composer-quote-abc')).toBeOnTheScreen();
 			expect(screen.queryByTestId('composer-quote-def')).toBeOnTheScreen();
@@ -718,7 +732,9 @@ describe('MessageComposer', () => {
 
 		test('Remove a quote', async () => {
 			const onRemoveQuoteMessage = jest.fn();
-			render(<Render context={{ action: 'quote', selectedMessages: ['abc', 'def'], onRemoveQuoteMessage }} />);
+			render(
+				<Render context={{ onRemoveQuoteMessage }} interactionState={{ action: 'quote', selectedMessages: ['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, useSelectedMessages } from '../../views/RoomView/InteractionStore';
 import { Autocomplete } from './components';
 import { MIN_HEIGHT } from './constants';
 import {
@@ -54,7 +55,9 @@ 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 selectedMessages = useSelectedMessages();
 	const alsoSendThreadToChannel = useAlsoSendThreadToChannel();
 	const { showEmojiKeyboard, showEmojiSearchbar, openEmojiSearchbar, resetKeyboard, keyboardHeight } = useEmojiKeyboard();
 	const { setAlsoSendThreadToChannel, setAutocompleteParams, clearAttachments } = useMessageComposerApi();

app/containers/MessageComposer/components/CancelEdit.tsx

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

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, useSelectedMessages } from '../../../views/RoomView/InteractionStore';
 import { getMessageById } from '../../../lib/database/services/Message';
 import { generateTriggerId } from '../../../lib/methods/actions';
 import { executeCommandPreview } from '../../../lib/services/restApi';
@@ -50,7 +51,9 @@ 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 selectedMessages = useSelectedMessages();
 		const focused = useFocused();
 		const { setFocused, setMicOrSend, setAutocompleteParams } = useMessageComposerApi();
 		const autocompleteType = useAutocompleteParams()?.type;

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, useSelectedMessages } from '../../../../views/RoomView/InteractionStore';
 
 export const Quotes = (): ReactElement | null => {
 	'use memo';
 
-	const { selectedMessages, action } = useRoomContext();
+	const selectedMessages = useSelectedMessages();
+	const action = useMessageAction();
 	const nQuotesRef = useRef(0);
 	const listRef = useRef<FlatList>(null);
 

app/containers/MessageComposer/hooks/useAutoSaveDraft.ts

@@ -3,13 +3,16 @@ import { useCallback, useEffect, useRef } from 'react';
 
 import { saveDraftMessage } from '../../../lib/methods/draftMessage';
 import { useRoomContext } from '../../../views/RoomView/context';
+import { useMessageAction, useSelectedMessages } from '../../../views/RoomView/InteractionStore';
 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 selectedMessages = useSelectedMessages();
 	const focused = useFocused();
 	const oldText = useRef('');
 	const intervalRef = useRef<number | null>(null);

app/containers/MessageComposer/hooks/useChooseMedia.test.tsx

@@ -18,6 +18,11 @@ jest.mock('../../../views/RoomView/context', () => ({
 	useRoomContext: jest.fn()
 }));
 
+jest.mock('../../../views/RoomView/InteractionStore', () => ({
+	useMessageAction: jest.fn(),
+	useSelectedMessages: jest.fn()
+}));
+
 jest.mock('../../../lib/hooks/useAltTextSupported', () => ({
 	useAltTextSupported: jest.fn()
 }));
@@ -46,6 +51,8 @@ const mockGetDocumentAsync = require('expo-document-picker').getDocumentAsync as
 const mockUseAppSelector = require('../../../lib/hooks/useAppSelector').useAppSelector as jest.Mock;
 const mockUseMessageComposerApi = require('../context').useMessageComposerApi as jest.Mock;
 const mockUseRoomContext = require('../../../views/RoomView/context').useRoomContext as jest.Mock;
+const mockUseMessageAction = require('../../../views/RoomView/InteractionStore').useMessageAction as jest.Mock;
+const mockUseSelectedMessages = require('../../../views/RoomView/InteractionStore').useSelectedMessages as jest.Mock;
 const mockUseAltTextSupported = require('../../../lib/hooks/useAltTextSupported').useAltTextSupported as jest.Mock;
 const mockGetSubscriptionByRoomId = require('../../../lib/database/services/Subscription').getSubscriptionByRoomId as jest.Mock;
 const mockGetThreadById = require('../../../lib/database/services/Thread').getThreadById as jest.Mock;
@@ -67,11 +74,11 @@ describe('useChooseMedia', () => {
 		);
 		mockUseMessageComposerApi.mockReturnValue({ addAttachments });
 		mockUseRoomContext.mockReturnValue({
-			action: null,
 			setQuotesAndText: jest.fn(),
-			selectedMessages: [],
 			getText: jest.fn(() => 'draft')
 		});
+		mockUseMessageAction.mockReturnValue(null);
+		mockUseSelectedMessages.mockReturnValue([]);
 		mockGetSubscriptionByRoomId.mockResolvedValue({ rid: 'room-id', t: 'c' });
 		mockGetThreadById.mockResolvedValue({ id: 'thread-id' });
 	});

app/containers/MessageComposer/hooks/useChooseMedia.ts

@@ -10,6 +10,7 @@ import { getThreadById } from '../../../lib/database/services/Thread';
 import Navigation from '../../../lib/navigation/appNavigation';
 import { useAppSelector } from '../../../lib/hooks/useAppSelector';
 import { useRoomContext } from '../../../views/RoomView/context';
+import { useMessageAction, useSelectedMessages } from '../../../views/RoomView/InteractionStore';
 import { type IShareAttachment } from '../../../definitions';
 import ImagePicker, { type ImageOrVideo } from '../../../lib/methods/helpers/ImagePicker/ImagePicker';
 import { useMessageComposerApi } from '../context';
@@ -31,7 +32,9 @@ export const useChooseMedia = ({
 
 	const { FileUpload_MediaTypeWhiteList, FileUpload_MaxFileSize } = useAppSelector(state => state.settings);
 	const { addAttachments } = useMessageComposerApi();
-	const { action, setQuotesAndText, selectedMessages, getText } = useRoomContext();
+	const { setQuotesAndText, getText } = useRoomContext();
+	const action = useMessageAction();
+	const selectedMessages = useSelectedMessages();
 	const altTextSupported = useAltTextSupported();
 	const allowList = FileUpload_MediaTypeWhiteList as string;
 	const maxFileSize = FileUpload_MaxFileSize as number;

app/containers/ReactionsList/index.tsx

@@ -30,7 +30,7 @@ const useRoutes = (reactions: IReaction[] | undefined) => {
 		};
 	}
 
-	const sortedReactions = reactions?.sort((reaction1, reaction2) => reaction2.usernames.length - reaction1.usernames.length);
+	const sortedReactions = [...reactions].sort((reaction1, reaction2) => reaction2.usernames.length - reaction1.usernames.length);
 	const routes: IRoute[] = sortedReactions.map(reaction => ({
 		key: reaction.emoji,
 		title: reaction.emoji,

app/containers/message/Blocks.ts

@@ -1,11 +1,14 @@
-import { createElement } from 'react';
+import { createElement, useContext } from 'react';
 
 import { messageBlockWithContext } from '../UIKit/MessageBlock';
 import { type IMessageBlocks } from './interfaces';
+import MessageContext from './Context';
 
-const Blocks = ({ blocks, id: mid, rid, blockAction }: IMessageBlocks) => {
+const Blocks = ({ blocks, id: mid, rid }: IMessageBlocks) => {
 	'use memo';
 
+	const { blockAction } = useContext(MessageContext);
+
 	if (blocks && blocks.length > 0) {
 		const appId = blocks[0]?.appId || '';
 		return createElement(

app/containers/message/Broadcast.tsx

@@ -17,7 +17,7 @@ const Broadcast = memo(({ author, broadcast }: IMessageBroadcast) => {
 
 	const { user, replyBroadcast } = useContext(MessageContext);
 	const { theme } = useTheme();
-	const isOwn = author?._id === user.id;
+	const isOwn = author?._id === user?.id;
 
 	if (broadcast && !isOwn) {
 		return (

app/containers/message/CallButton.tsx

@@ -1,4 +1,4 @@
-import { memo } from 'react';
+import { memo, useContext } from 'react';
 import { Text, View } from 'react-native';
 
 import Touchable from './Touchable';
@@ -7,13 +7,13 @@ import styles from './styles';
 import I18n from '../../i18n';
 import { CustomIcon } from '../CustomIcon';
 import { themes } from '../../lib/constants/colors';
-import { type IMessageCallButton } from './interfaces';
 import { useTheme } from '../../theme';
+import MessageContext from './Context';
 
-// TODO: Create a reusable button component for message
-const CallButton = memo(({ handleEnterCall }: IMessageCallButton) => {
+const CallButton = memo(() => {
 	'use memo';
 
+	const { handleEnterCall } = useContext(MessageContext);
 	const { theme } = useTheme();
 	return (
 		<View style={styles.buttonContainer}>

app/containers/message/Components/Attachments/AttachedActions.tsx

@@ -25,7 +25,7 @@ const AttachedActions = ({ attachment, getCustomEmoji }: { attachment: IAttachme
 	const attachedButtons = attachment.actions.map((element: TElement) => {
 		const onPress = () => {
 			if (element.msg) {
-				onAnswerButtonPress(element.msg);
+				onAnswerButtonPress?.(element.msg);
 			}
 
 			if (element.url) {