chat-suggestions-demo

1"use client";
2 
3import { useState } from "react";
4import {
5	ChatSuggestion,
6	ChatSuggestions,
7	ChatSuggestionsContent,
8	ChatSuggestionsDescription,
9	ChatSuggestionsHeader,
10	ChatSuggestionsTitle,
11} from "@/registry/ui/chat-suggestions";
12 
13export default function ChatSuggestionsDemo() {
14	const [selectedSuggestion, setSelectedSuggestion] = useState<string>("");
15 
16	const suggestions = [
17		"Tell me about your features",
18		"How do I get started?",
19		"Show me an example",
20		"What are the pricing options?",
21	];
22 
23	return (
24		<div className="flex flex-col gap-4 p-4">
25			<ChatSuggestions>
26				<ChatSuggestionsHeader>
27					<ChatSuggestionsTitle>
28						Try these prompts:
29					</ChatSuggestionsTitle>
30					<ChatSuggestionsDescription>
31						Click a suggestion to get started
32					</ChatSuggestionsDescription>
33				</ChatSuggestionsHeader>
34				<ChatSuggestionsContent>
35					{suggestions.map((suggestion) => (
36						<ChatSuggestion
37							key={suggestion}
38							onClick={() => setSelectedSuggestion(suggestion)}
39						>
40							{suggestion}
41						</ChatSuggestion>
42					))}
43				</ChatSuggestionsContent>
44			</ChatSuggestions>
45 
46			{selectedSuggestion && (
47				<div className="p-3 bg-muted rounded-md text-sm">
48					<span className="font-medium">Selected:</span>{" "}
49					{selectedSuggestion}
50				</div>
51			)}
52		</div>
53	);
54}