diff --git a/apps/meteor/client/views/room/components/body/RoomBody.tsx b/apps/meteor/client/views/room/components/body/RoomBody.tsx
index 70cd006a0654..e8a9a0edfdb9 100644
--- a/apps/meteor/client/views/room/components/body/RoomBody.tsx
+++ b/apps/meteor/client/views/room/components/body/RoomBody.tsx
@@ -330,6 +330,10 @@ const RoomBody = (): ReactElement => {
 	useLegacyMessageEvents({
 		messageListRef: {
 			get current() {
+				if (!useLegacyMessageTemplate) {
+					return null;
+				}
+
 				return wrapperRef.current?.querySelector('ul') ?? null;
 			},
 		},
@@ -619,7 +623,6 @@ const RoomBody = (): ReactElement => {
 							<ComposerContainer
 								rid={room._id}
 								subscription={subscription}
-								chatMessagesInstance={chat}
 								onResize={handleComposerResize}
 								onNavigateToPreviousMessage={handleNavigateToPreviousMessage}
 								onNavigateToNextMessage={handleNavigateToNextMessage}
diff --git a/apps/meteor/client/views/room/components/body/composer/ComposerMessage.tsx b/apps/meteor/client/views/room/components/body/composer/ComposerMessage.tsx
index 7ec7a731a127..c5a05c889ab9 100644
--- a/apps/meteor/client/views/room/components/body/composer/ComposerMessage.tsx
+++ b/apps/meteor/client/views/room/components/body/composer/ComposerMessage.tsx
@@ -1,21 +1,21 @@
-import type { IRoom, ISubscription } from '@rocket.chat/core-typings';
+import type { IMessage, IRoom, ISubscription } from '@rocket.chat/core-typings';
 import { useToastMessageDispatch } from '@rocket.chat/ui-contexts';
-import type { ContextType, ReactElement, ReactNode } from 'react';
+import type { ReactElement, ReactNode } from 'react';
 import React, { memo, useCallback, useMemo } from 'react';
 
 import { RoomManager } from '../../../../../../app/ui-utils/client';
 import { useReactiveValue } from '../../../../../hooks/useReactiveValue';
 import ComposerSkeleton from '../../../Room/ComposerSkeleton';
-import type { ChatContext } from '../../../contexts/ChatContext';
+import { useChat } from '../../../contexts/ChatContext';
 import MessageBox from './messageBox/MessageBox';
 
 export type ComposerMessageProps = {
 	rid: IRoom['_id'];
+	tmid?: IMessage['_id'];
 	children?: ReactNode;
 	subscription?: ISubscription;
 	readOnly?: boolean;
 	tshow?: boolean;
-	chatMessagesInstance: ContextType<typeof ChatContext>;
 	onResize?: () => void;
 	onEscape?: () => void;
 	onSend?: () => void;
@@ -24,14 +24,15 @@ export type ComposerMessageProps = {
 	onUploadFiles?: (files: readonly File[]) => void;
 };
 
-const ComposerMessage = ({ rid, chatMessagesInstance, readOnly, onSend, ...props }: ComposerMessageProps): ReactElement => {
+const ComposerMessage = ({ rid, tmid, readOnly, onSend, ...props }: ComposerMessageProps): ReactElement => {
+	const chat = useChat();
 	const dispatchToastMessage = useToastMessageDispatch();
 
 	const composerProps = useMemo(
 		() => ({
 			onJoin: async (): Promise<void> => {
 				try {
-					await chatMessagesInstance?.data?.joinRoom();
+					await chat?.data?.joinRoom();
 				} catch (error) {
 					dispatchToastMessage({ type: 'error', message: error });
 					throw error;
@@ -40,8 +41,8 @@ const ComposerMessage = ({ rid, chatMessagesInstance, readOnly, onSend, ...props
 
 			onSend: async ({ value: text, tshow }: { value: string; tshow?: boolean }): Promise<void> => {
 				try {
-					await chatMessagesInstance?.flows.action.stop('typing');
-					const newMessageSent = await chatMessagesInstance?.flows.sendMessage({
+					await chat?.flows.action.stop('typing');
+					const newMessageSent = await chat?.flows.sendMessage({
 						text,
 						tshow,
 					});
@@ -51,26 +52,19 @@ const ComposerMessage = ({ rid, chatMessagesInstance, readOnly, onSend, ...props
 				}
 			},
 			onTyping: async (): Promise<void> => {
-				if (chatMessagesInstance?.composer?.text?.trim() === '') {
-					await chatMessagesInstance?.flows.action.stop('typing');
+				if (chat?.composer?.text?.trim() === '') {
+					await chat?.flows.action.stop('typing');
 					return;
 				}
-				await chatMessagesInstance?.flows.action.start('typing');
+				await chat?.flows.action.start('typing');
 			},
-			onNavigateToPreviousMessage: () => chatMessagesInstance?.messageEditing.toPreviousMessage(),
-			onNavigateToNextMessage: () => chatMessagesInstance?.messageEditing.toNextMessage(),
+			onNavigateToPreviousMessage: () => chat?.messageEditing.toPreviousMessage(),
+			onNavigateToNextMessage: () => chat?.messageEditing.toNextMessage(),
 			onUploadFiles: (files: readonly File[]) => {
-				return chatMessagesInstance?.flows.uploadFiles(files);
+				return chat?.flows.uploadFiles(files);
 			},
 		}),
-		[
-			chatMessagesInstance?.data,
-			chatMessagesInstance?.flows,
-			chatMessagesInstance?.composer?.text,
-			chatMessagesInstance?.messageEditing,
-			dispatchToastMessage,
-			onSend,
-		],
+		[chat?.data, chat?.flows, chat?.composer?.text, chat?.messageEditing, dispatchToastMessage, onSend],
 	);
 
 	const publicationReady = useReactiveValue(useCallback(() => RoomManager.getOpenedRoomByRid(rid)?.streamActive ?? false, [rid]));
@@ -83,16 +77,7 @@ const ComposerMessage = ({ rid, chatMessagesInstance, readOnly, onSend, ...props
 		);
 	}
 
-	return (
-		<MessageBox
-			readOnly={readOnly ?? false}
-			rid={rid}
-			{...composerProps}
-			showFormattingTips={true}
-			{...props}
-			chatContext={chatMessagesInstance}
-		/>
-	);
+	return <MessageBox readOnly={readOnly ?? false} rid={rid} tmid={tmid} {...composerProps} showFormattingTips={true} {...props} />;
 };
 
 export default memo(ComposerMessage);
diff --git a/apps/meteor/client/views/room/components/body/composer/messageBox/MessageBox.tsx b/apps/meteor/client/views/room/components/body/composer/messageBox/MessageBox.tsx
index 1aa72e2a054a..2d741b2bcd48 100644
--- a/apps/meteor/client/views/room/components/body/composer/messageBox/MessageBox.tsx
+++ b/apps/meteor/client/views/room/components/body/composer/messageBox/MessageBox.tsx
@@ -44,8 +44,6 @@ import { useAutoGrow } from '../RoomComposer/hooks/useAutoGrow';
 import MessageBoxFormattingToolbar from './MessageBoxFormattingToolbar';
 import MessageBoxReplies from './MessageBoxReplies';
 
-type MessageBoxProps = MessageBoxTemplateInstance['data'];
-
 const reducer = (_: unknown, event: FormEvent<HTMLInputElement>): boolean => {
 	const target = event.target as HTMLInputElement;
 
@@ -81,7 +79,9 @@ const getEmptyFalse = () => false;
 const a: any[] = [];
 const getEmptyArray = () => a;
 
-export const MessageBox = ({
+type MessageBoxProps = Omit<MessageBoxTemplateInstance['data'], 'chatContext'>;
+
+const MessageBox = ({
 	rid,
 	tmid,
 	onSend,
diff --git a/apps/meteor/client/views/room/contextualBar/Threads/components/ThreadChat.tsx b/apps/meteor/client/views/room/contextualBar/Threads/components/ThreadChat.tsx
index 0aa651d5bd22..b2d0f1920374 100644
--- a/apps/meteor/client/views/room/contextualBar/Threads/components/ThreadChat.tsx
+++ b/apps/meteor/client/views/room/contextualBar/Threads/components/ThreadChat.tsx
@@ -121,8 +121,8 @@ const ThreadChat: VFC<ThreadChatProps> = ({ mainMessage }) => {
 
 				<ComposerContainer
 					rid={mainMessage.rid}
+					tmid={mainMessage._id}
 					subscription={subscription}
-					chatMessagesInstance={chat}
 					onSend={handleSend}
 					onEscape={handleComposerEscape}
 					onNavigateToPreviousMessage={handleNavigateToPreviousMessage}