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

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

@@ -0,0 +1,163 @@
+import { Box, Skeleton, Tile, Option } from '@rocket.chat/fuselage';
+import { Random } from '@rocket.chat/random';
+import { useEndpoint } from '@rocket.chat/ui-contexts';
+import type { ForwardedRef, ReactNode } from 'react';
+import { forwardRef, useEffect, useId, useImperativeHandle } from 'react';
+
+import type { ComposerBoxPopupProps } from './ComposerBoxPopup';
+import { useChat } from '../contexts/ChatContext';
+
+type ComposerBoxPopupPreviewItem = { _id: string; type: 'image' | 'video' | 'audio' | 'text' | 'other'; value: string; sort?: number };
+
+export type ComposerBoxPopupPreviewProps = ComposerBoxPopupProps<ComposerBoxPopupPreviewItem> & {
+	title?: ReactNode;
+	rid: string;
+	tmid?: string;
+	suspended: boolean;
+};
+
+const ComposerBoxPopupPreview = forwardRef(function ComposerBoxPopupPreview(
+	{ focused, items, title, rid, tmid, select, suspended }: ComposerBoxPopupPreviewProps,
+	ref: ForwardedRef<
+		| {
+				getFilter?: () => unknown;
+				select?: (s: ComposerBoxPopupPreviewItem) => void;
+		  }
+		| undefined
+	>,
+) {
+	const id = useId();
+	const chat = useChat();
+	const executeSlashCommandPreviewEndpoint = useEndpoint('POST', '/v1/commands.preview');
+
+	useImperativeHandle(
+		ref,
+		() => ({
+			getFilter: () => {
+				const value = chat?.composer?.substring(0, chat?.composer?.selection.start);
+				if (!value) {
+					throw new Error('No value');
+				}
+				const matches = value.match(/(\/[\w\d\S]+ )([^]*)$/);
+
+				if (!matches) {
+					throw new Error('No matches');
+				}
+
+				const cmd = matches[1].replace('/', '').trim().toLowerCase();
+
+				const params = matches[2];
+				return { cmd, params, msg: { rid, tmid } };
+			},
+			...(!suspended && {
+				select: (item) => {
+					const value = chat?.composer?.substring(0, chat?.composer?.selection.start);
+					if (!value) {
+						throw new Error('No value');
+					}
+					const matches = value.match(/(\/[\w\d\S]+ )([^]*)$/);
+
+					if (!matches) {
+						throw new Error('No matches');
+					}
+
+					const cmd = matches[1].replace('/', '').trim().toLowerCase();
+
+					const params = matches[2];
+					void executeSlashCommandPreviewEndpoint({
+						command: cmd,
+						params,
+						roomId: rid,
+						...(tmid && { tmid }),
+						triggerId: Random.id(),
+						previewItem: { id: item._id, type: item.type, value: item.value },
+					});
+					chat?.composer?.setText('');
+				},
+			}),
+		}),
+		[chat?.composer, executeSlashCommandPreviewEndpoint, rid, tmid, suspended],
+	);
+
+	const itemsFlat = items
+		.flatMap((item) => {
+			if (item.isSuccess) {
+				return item.data;
+			}
+			return [];
+		})
+		.sort((a, b) => (('sort' in a && a.sort) || 0) - (('sort' in b && b.sort) || 0));
+
+	const isLoading = items.some((item) => item.isLoading && item.fetchStatus !== 'idle');
+
+	useEffect(() => {
+		if (focused) {
+			const element = document.getElementById(`popup-item-${focused._id}`);
+			if (element) {
+				element.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
+			}
+		}
+	}, [focused]);
+
+	if (suspended) {
+		return null;
+	}
+
+	return (
+		<Box position='relative'>
+			<Tile padding={0} role='menu' marginBlockEnd={8} overflow='hidden' aria-labelledby={id}>
+				{title && (
+					<Box backgroundColor='tint' paddingInline={16} paddingBlock={8} id={id}>
+						{title}
+					</Box>
+				)}
+				<Box display='flex' padding={8}>
+					<Box role='listbox' display='flex' overflow='auto' fontSize={0} width={0} flexGrow={1} aria-busy={isLoading}>
+						{isLoading &&
+							Array(5)
+								.fill(5)
+								.map((_, index) => <Skeleton variant='rect' height='100px' width='120px' margin={2} key={index} />)}
+
+						{!isLoading &&
+							itemsFlat.map((item) => (
+								<Box
+									onClick={() => select(item)}
+									role='option'
+									className={['popup-item', item === focused && 'selected'].filter(Boolean).join(' ')}
+									id={`popup-item-${item._id}`}
+									key={item._id}
+									backgroundColor={item === focused ? 'selected' : undefined}
+									borderColor={item === focused ? 'highlight' : 'transparent'}
+									tabIndex={item === focused ? 0 : -1}
+									aria-selected={item === focused}
+									margin={2}
+									borderWidth='default'
+									borderRadius='x4'
+								>
+									{item.type === 'image' && <img src={item.value} alt={item._id} />}
+									{item.type === 'audio' && (
+										<audio controls>
+											<track kind='captions' />
+											<source src={item.value} />
+											Your browser does not support the audio element.
+										</audio>
+									)}
+									{item.type === 'video' && (
+										<video controls className='inline-video'>
+											<track kind='captions' />
+											<source src={item.value} />
+											Your browser does not support the video element.
+										</video>
+									)}
+									{item.type === 'text' && <Option>{item.value}</Option>}
+									{item.type === 'other' && <code>{item.value}</code>}
+								</Box>
+							))}
+					</Box>
+				</Box>
+			</Tile>
+		</Box>
+	);
+});
+
+export default ComposerBoxPopupPreview;