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

packages/livechat/src/components/Alert/index.tsx

@@ -0,0 +1,68 @@
+import type { ComponentChildren, JSX as JSXInternal } from 'preact';
+import { useCallback, useEffect } from 'preact/hooks';
+import { useTranslation } from 'react-i18next';
+
+import styles from './styles.scss';
+import { createClassName } from '../../helpers/createClassName';
+import CloseIcon from '../../icons/close.svg';
+
+export type AlertProps = {
+	id?: string;
+	onDismiss?: (id?: string) => void;
+	success?: boolean;
+	warning?: boolean;
+	error?: boolean;
+	color?: string;
+	hideCloseButton?: boolean;
+	className?: string;
+	style?: JSXInternal.CSSProperties;
+	children?: ComponentChildren;
+	timeout?: number;
+};
+
+const Alert = ({
+	id,
+	onDismiss,
+	success,
+	warning,
+	error,
+	color,
+	hideCloseButton = false,
+	className,
+	style = {},
+	children,
+	timeout = 3000,
+}: AlertProps) => {
+	const { t } = useTranslation();
+	const handleDismiss = useCallback(() => {
+		onDismiss?.(id);
+	}, [id, onDismiss]);
+
+	useEffect(() => {
+		let dismissTimeout: ReturnType<typeof setTimeout> | undefined;
+		if (Number.isFinite(timeout) && timeout > 0) {
+			dismissTimeout = setTimeout(handleDismiss, timeout);
+		}
+		return () => clearTimeout(dismissTimeout);
+	}, [handleDismiss, timeout]);
+
+	return (
+		<div
+			role='alert'
+			className={createClassName(styles, 'alert', { success, warning, error }, [className])}
+			style={{
+				...style,
+				...(color && { backgroundColor: color }),
+			}}
+		>
+			<div className={createClassName(styles, 'alert__content')}>{children}</div>
+			{!hideCloseButton && (
+				<button onClick={handleDismiss} className={createClassName(styles, 'alert__close')} aria-label={t('dismiss_this_alert')}>
+					<CloseIcon width={20} height={20} />
+				</button>
+			)}
+		</div>
+	);
+};
+
+export default Alert;