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

apps/meteor/client/views/room/composer/RoomComposer/RoomComposer.tsx

@@ -0,0 +1,37 @@
+import { css } from '@rocket.chat/css-in-js';
+import { Box } from '@rocket.chat/fuselage';
+import { useLayout } from '@rocket.chat/ui-contexts';
+import type { AllHTMLAttributes } from 'react';
+
+const customStyle = css`
+	&.rc-message-box {
+		position: relative;
+		width: 100%;
+		padding: 0 24px;
+
+		&.embedded {
+			min-height: 36px;
+			padding: 0;
+
+			& .users-typing {
+				display: none;
+			}
+
+			& .formatting-tips {
+				display: none;
+			}
+		}
+	}
+`;
+
+const RoomComposer = ({ children, ...props }: Omit<AllHTMLAttributes<HTMLElement>, 'is'>) => {
+	const { isEmbedded } = useLayout();
+
+	return (
+		<Box is='footer' className={[customStyle, 'rc-message-box', isEmbedded && 'embedded'].filter(Boolean)} {...props}>
+			{children}
+		</Box>
+	);
+};
+
+export default RoomComposer;

apps/meteor/client/views/room/composer/RoomComposer/RoomComposerSkeleton.tsx

@@ -0,0 +1,11 @@
+import { memo } from 'react';
+
+import ComposerSkeleton from '../ComposerSkeleton';
+import RoomComposer from './RoomComposer';
+
+const RoomComposerSkeleton = () => (
+	<RoomComposer>
+		<ComposerSkeleton />
+	</RoomComposer>
+);
+export default memo(RoomComposerSkeleton);

apps/meteor/client/views/room/composer/RoomComposer/hooks/useAutoGrow.ts

@@ -0,0 +1,63 @@
+import { useSafeRefCallback } from '@rocket.chat/fuselage-hooks';
+import type { CSSProperties, MutableRefObject, RefCallback } from 'react';
+import { useCallback } from 'react';
+
+function shouldScrollToBottom(textarea: HTMLTextAreaElement) {
+	const isCursorAtBottom = textarea.selectionEnd === textarea.value.length;
+	const isScrolledToBottom = textarea.scrollTop + textarea.clientHeight === textarea.scrollHeight;
+
+	return isCursorAtBottom || isScrolledToBottom;
+}
+
+export const useAutoGrow = (
+	ref: MutableRefObject<HTMLTextAreaElement | null>,
+	hideTextArea?: boolean,
+): {
+	textAreaStyle: CSSProperties;
+	autoGrowRef: RefCallback<HTMLTextAreaElement>;
+} => {
+	const autoGrowRef = useSafeRefCallback(
+		useCallback(
+			(node: HTMLTextAreaElement) => {
+				ref.current = node;
+
+				const resize = () => {
+					const shouldScroll = shouldScrollToBottom(node);
+
+					node.style.height = '0';
+					node.style.height = `${node.scrollHeight}px`;
+
+					if (shouldScroll) {
+						node.scrollTop = node.scrollHeight;
+					}
+				};
+
+				const resizeObserver = new ResizeObserver(resize);
+
+				resizeObserver.observe(node);
+
+				node.addEventListener('input', resize);
+
+				return () => {
+					resizeObserver.disconnect();
+					node.removeEventListener('input', resize);
+				};
+			},
+			[ref],
+		),
+	);
+
+	return {
+		autoGrowRef,
+		textAreaStyle: {
+			...(hideTextArea && {
+				visibility: 'hidden',
+			}),
+			whiteSpace: 'pre-wrap',
+			wordWrap: 'break-word',
+			overflowWrap: 'break-word',
+			willChange: 'contents',
+			wordBreak: 'normal',
+		},
+	};
+};