Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 | 2x 2x 2x 41x 2x 13x | import { Avatar } from "@/components/ui/avatar";
import { Text } from "@/components/ui/text";
import { CHAT_EMPTY_STATE_COPY } from "@/constants/chat";
import type { Suggestion } from "@/types/chat";
type SuggestionChipsProps = {
suggestions: Suggestion[];
onSelectPrompt: (prompt: string) => void;
};
export function SuggestionChips({ suggestions, onSelectPrompt }: SuggestionChipsProps) {
return (
<div className="flex flex-wrap gap-2.5">
{suggestions.map((action) => (
<button
key={action.label}
type="button"
className="cursor-pointer rounded-full border border-white/18 bg-white/6 px-3.5 py-1.5 font-dm-sans text-xs text-white/78 backdrop-blur-[0.625rem] transition-all duration-200 hover:border-violet-300/55 hover:bg-violet-600/20 hover:text-white hover:shadow-brand-soft light:border-slate-300 light:bg-slate-50 light:text-slate-600 light:hover:border-violet-400 light:hover:bg-violet-50 light:hover:text-violet-700"
onClick={() => onSelectPrompt(action.prompt)}
>
{action.label}
</button>
))}
</div>
);
}
type ChatEmptyStateProps = {
suggestions: Suggestion[];
onSelectPrompt: (prompt: string) => void;
};
export function ChatEmptyState({
suggestions,
onSelectPrompt,
}: ChatEmptyStateProps) {
return (
<div className="mx-auto flex w-full max-w-xl flex-1 flex-col items-center justify-center px-4 py-12">
<div className="flex w-full max-w-[32.5rem] flex-col items-center gap-6 rounded-3xl border border-white/10 bg-glass p-8 shadow-glass-card backdrop-blur-[2rem] light:border-slate-200 light:bg-white light:shadow-glass-card-light">
<div className="flex items-center justify-center">
<Avatar variant="assistant" size="lg" />
</div>
<div className="text-center">
<Text
as="h2"
variant="inherit"
className="mb-2 font-dm-sans text-[1.875rem] font-bold leading-[1.3] text-white light:text-slate-900"
>
{CHAT_EMPTY_STATE_COPY.title}
</Text>
<Text variant="subtitle" className="text-sm leading-relaxed text-white/72 light:text-slate-600">
{CHAT_EMPTY_STATE_COPY.description}
</Text>
</div>
<SuggestionChips suggestions={suggestions} onSelectPrompt={onSelectPrompt} />
</div>
</div>
);
}
|