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

apps/meteor/client/views/room/body/JumpToRecentMessageButton.tsx

@@ -0,0 +1,59 @@
+import { css } from '@rocket.chat/css-in-js';
+import { Box, Bubble } from '@rocket.chat/fuselage';
+import { isTruthy } from '@rocket.chat/tools';
+import { useState } from 'react';
+
+export type JumpToRecentMessageButtonProps = {
+	visible: boolean;
+	onClick: () => void;
+	text: string;
+};
+
+const buttonStyle = css`
+	position: absolute;
+	z-index: 2;
+	bottom: 8px;
+	left: 50%;
+	user-select: none;
+	transform: translate(-50%, 0);
+
+	&.not {
+		visibility: hidden;
+	}
+
+	&.clicked {
+		animation: fadeout 1s linear forwards;
+	}
+
+	@keyframes fadeout {
+		50% {
+			visibility: visible;
+			transform: translate(-50%, 150%);
+		}
+		100% {
+			visibility: hidden;
+			transform: translate(-50%, 150%);
+			position: fixed;
+		}
+	}
+`;
+
+const JumpToRecentMessageButton = ({ visible, onClick, text }: JumpToRecentMessageButtonProps) => {
+	const [clicked, setClicked] = useState(false);
+
+	return (
+		<Box className={[buttonStyle, !visible && 'not', clicked && 'clicked'].filter(isTruthy)}>
+			<Bubble
+				icon='arrow-down'
+				onClick={() => {
+					onClick();
+					setClicked(true);
+				}}
+			>
+				{text}
+			</Bubble>
+		</Box>
+	);
+};
+
+export default JumpToRecentMessageButton;