Chat Empty State

1'use client';
2 
3import { Sparkles } from 'lucide-react';
4import { cn } from '@/lib/utils';
5import type { SuggestedPrompt } from './types';
6 
7const KEYFRAMES = `
8@keyframes su-msg-in { from { opacity: 0; transform: translateY(6px) } to { opacity: 1; transform: none } }
9`;
10 
11export type ChatEmptyStateVariant = 'Default' | 'Centered';
12 
13export interface ChatEmptyStateProps {
14  title?: string;
15  subtitle?: string;
16  prompts?: SuggestedPrompt[];
17  onSelectPrompt?: (prompt: SuggestedPrompt) => void;
18  variant?: ChatEmptyStateVariant;
19  className?: string;
20}
21 
22export function ChatEmptyState({
23  title = 'What do you want to know?',
24  subtitle = 'Ask a question, or start from one of these.',
25  prompts = [],
26  onSelectPrompt,
27  variant = 'Default',
28  className,
29}: ChatEmptyStateProps) {
30  const centered = variant === 'Centered';
31 
32  return (
33    <div
34      className={cn(
35        'w-full max-w-[520px]',
36        centered && 'flex flex-col items-center text-center',
37        className,
38      )}
39    >
40      <style dangerouslySetInnerHTML={{ __html: KEYFRAMES }} />
41 
42      <div className="grid size-9 place-items-center rounded-xl border border-black/[0.07] bg-black/[0.02] dark:border-white/[0.08] dark:bg-white/[0.04]">
43        <Sparkles className="size-4 text-neutral-500 dark:text-neutral-400" />
44      </div>
45 
46      <h3 className="mt-4 text-[16px] font-semibold tracking-[-0.2px] text-neutral-900 dark:text-neutral-50">
47        {title}
48      </h3>
49      <p className="mt-1.5 text-[13px] leading-[1.6] text-neutral-500 dark:text-neutral-400">
50        {subtitle}
51      </p>
52 
53      {prompts.length > 0 && (
54        <div
55          className={cn(
56            'mt-5 flex flex-wrap gap-1.5',
57            centered && 'justify-center',
58          )}
59        >
60          {prompts.map((prompt, index) => (
61            <button
62              key={prompt.id}
63              type="button"
64              onClick={() => onSelectPrompt?.(prompt)}
65              style={{ animationDelay: `${Math.min(index, 5) * 50}ms` }}
66              className={cn(
67                'rounded-full border border-black/[0.08] bg-white px-3 py-1.5 text-[12.5px] text-neutral-600',
68                'transition-[color,border-color,transform] duration-150 active:scale-[0.96]',
69                'hover:border-black/[0.16] hover:bg-black/[0.02] hover:text-neutral-900',
70                'focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-neutral-400',
71// … truncated