examples/web_ui/frontend/src/components/chat/Empty.tsx

import { MessagesSquare } from 'lucide-react';

import {
	Empty,
	EmptyDescription,
	EmptyHeader,
	EmptyMedia,
	EmptyTitle,
} from '@/components/ui/empty';
import { useTranslation } from '@/i18n/useI18n';

/**

 * Empty state component shown when there are no messages.

 * @returns An empty state element with icon and description.

 */
export function EmptyMessage() {
	const { t } = useTranslation();

	return (
		<Empty className="size-full">

			<EmptyHeader>

				<EmptyMedia variant="icon">

					<MessagesSquare />

				</EmptyMedia>

				<EmptyTitle>{t('chat.noMessages')}</EmptyTitle>

				<EmptyDescription>{t('chat.noMessagesDesc')}</EmptyDescription>

			</EmptyHeader>

		</Empty>
	);
}