Chat Suggestions

1"use client";
2 
3import type { ComponentProps } from "react";
4import { Button } from "@/components/ui/button";
5import { cn } from "@/lib/utils";
6 
7function ChatSuggestions({ className, ...props }: ComponentProps<"div">) {
8	return (
9		<div
10			className={cn("flex flex-col gap-2.5 px-2 py-2", className)}
11			{...props}
12		/>
13	);
14}
15 
16function ChatSuggestionsHeader({ className, ...props }: ComponentProps<"div">) {
17	return <div className={cn("flex flex-col gap-1", className)} {...props} />;
18}
19 
20function ChatSuggestionsTitle({ className, ...props }: ComponentProps<"p">) {
21	return (
22		<p
23			className={cn(
24				"text-sm font-medium text-muted-foreground",
25				className,
26			)}
27			{...props}
28		/>
29	);
30}
31 
32function ChatSuggestionsDescription({
33	className,
34	...props
35}: ComponentProps<"p">) {
36	return (
37		<p
38			className={cn("text-xs text-muted-foreground/80", className)}
39			{...props}
40		/>
41	);
42}
43 
44function ChatSuggestionsContent({
45	className,
46	...props
47}: ComponentProps<"div">) {
48	return <div className={cn("flex flex-wrap gap-2", className)} {...props} />;
49}
50 
51function ChatSuggestion({
52	className,
53	...props
54}: ComponentProps<typeof Button>) {
55	return (
56		<Button
57			variant="outline"
58			size="default"
59			className={cn(
60				"h-auto py-2 px-3 text-sm font-normal whitespace-normal text-left justify-start",
61				"hover:bg-accent/50 hover:text-accent-foreground",
62				"transition-colors",
63				className,
64			)}
65			{...props}
66		/>
67	);
68}
69 
70export {
71	ChatSuggestions,
72	ChatSuggestionsHeader,
73	ChatSuggestionsTitle,
74	ChatSuggestionsDescription,
75	ChatSuggestionsContent,
76	ChatSuggestion,
77};