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

apps/meteor/client/views/composer/EmojiPicker/ToneSelector/ToneItem.tsx

@@ -0,0 +1,17 @@
+import { Box } from '@rocket.chat/fuselage';
+
+const TONE_EMOJIS: Record<number, string> = {
+	1: '✋🏻',
+	2: '✋🏼',
+	3: '✋🏽',
+	4: '✋🏾',
+	5: '✋🏿',
+};
+
+const ToneItem = ({ tone }: { tone: number }) => (
+	<Box>
+		<span className='emoji'>{TONE_EMOJIS[tone] ?? '✋'}</span>
+	</Box>
+);
+
+export default ToneItem;

apps/meteor/client/views/composer/EmojiPicker/ToneSelector/ToneSelector.tsx

@@ -0,0 +1,71 @@
+import type { OptionType } from '@rocket.chat/fuselage';
+import { IconButton, useCursor, PositionAnimated, Options } from '@rocket.chat/fuselage';
+import type { ReactNode } from 'react';
+import { useMemo, useRef, useCallback, useEffect } from 'react';
+
+import ToneItem from './ToneItem';
+
+const ToneSelector = ({ tone, setTone }: { tone: number; setTone: (tone: number) => void }) => {
+	const options = useMemo(() => {
+		const renderOption = (tone: number) => <ToneItem tone={tone} />;
+
+		const statuses: Array<[value: number, label: ReactNode, selected: boolean]> = [
+			[0, renderOption(0), tone === 0],
+			[1, renderOption(1), tone === 1],
+			[2, renderOption(2), tone === 2],
+			[3, renderOption(3), tone === 3],
+			[4, renderOption(4), tone === 4],
+			[5, renderOption(5), tone === 5],
+		];
+
+		return statuses;
+	}, [tone]);
+
+	const [cursor, handleKeyDown, handleKeyUp, reset, [visible, hide, show]] = useCursor(-1, options, ([selected], [, hide]) => {
+		setTone(selected);
+		reset();
+		hide();
+	});
+
+	const ref = useRef<HTMLButtonElement>(null);
+	const onClick = useCallback(() => {
+		if (!ref?.current) {
+			return;
+		}
+		ref.current.focus();
+		show();
+	}, [show]);
+
+	const handleSelection = useCallback(
+		([selected]: OptionType) => {
+			setTone(selected as number);
+			reset();
+			hide();
+		},
+		[hide, reset, setTone],
+	);
+
+	useEffect(() => {
+		setTone(tone);
+	}, [tone, setTone]);
+
+	return (
+		<>
+			<IconButton
+				medium
+				ref={ref}
+				onClick={onClick}
+				onBlur={hide}
+				onKeyUp={handleKeyUp}
+				onKeyDown={handleKeyDown}
+				marginInlineStart={4}
+				icon={<ToneItem tone={tone} />}
+			/>
+			<PositionAnimated width='auto' visible={visible} anchor={ref} placement='left-middle'>
+				<Options onSelect={handleSelection} options={options} cursor={cursor} />
+			</PositionAnimated>
+		</>
+	);
+};
+
+export default ToneSelector;

apps/meteor/client/views/composer/EmojiPicker/ToneSelector/ToneSelectorWrapper.tsx

@@ -0,0 +1,17 @@
+import { Box } from '@rocket.chat/fuselage';
+import type { ComponentPropsWithoutRef } from 'react';
+
+export type ToneSelectorWrapperProps = {
+	caption: string;
+} & Omit<ComponentPropsWithoutRef<typeof Box>, 'caption'>;
+
+const ToneSelectorWrapper = ({ caption, children, ...props }: ToneSelectorWrapperProps) => {
+	return (
+		<Box {...props} display='flex' alignItems='center'>
+			<Box fontScale='c2'>{caption}</Box>
+			{children}
+		</Box>
+	);
+};
+
+export default ToneSelectorWrapper;

apps/meteor/client/views/composer/EmojiPicker/ToneSelector/index.ts

@@ -0,0 +1 @@
+export { default } from './ToneSelector';