AI Chat (Tailwind)

1"use client";
2 
3import { ArrowUp, AudioLines, Paperclip } from "lucide-react";
4import { useActionState, useState } from "react";
5import { cn } from "@/lib/utils";
6import { Button } from "@/registry/brook/tailwind/ui/button";
7import { Card, CardContent, CardFooter } from "@/registry/brook/tailwind/ui/card";
8import { Field, FieldControl } from "@/registry/brook/tailwind/ui/field";
9import { Form } from "@/registry/brook/tailwind/ui/form";
10import {
11  Select,
12  SelectIcon,
13  SelectItem,
14  SelectItemIndicator,
15  SelectItemText,
16  SelectList,
17  SelectPopup,
18  SelectPortal,
19  SelectPositioner,
20  SelectSpacer,
21  SelectTrigger,
22  SelectValue,
23} from "@/registry/brook/tailwind/ui/select";
24 
25const aiModes = [
26  { value: "creative", label: "Creative" },
27  { value: "fast", label: "Fast" },
28  { value: "reasoning", label: "Reason" },
29  { value: "teach", label: "Teach" },
30];
31 
32type FormState =
33  | { status: "idle" }
34  | { status: "success"; data: { message: string; mode: string } }
35  | { status: "error"; error: string; submittedData: { message: string; mode: string } };
36 
37const initialFormState: FormState = { status: "idle" };
38 
39async function chatAction(_prevState: FormState, formData: FormData): Promise<FormState> {
40  await new Promise((resolve) => setTimeout(resolve, 500));
41 
42  const message = formData.get("message") as string;
43  const mode = formData.get("mode") as string;
44 
45  return { status: "success", data: { message, mode } };
46}
47 
48export function AiChat() {
49  const [formState, submitAction, isPending] = useActionState(chatAction, initialFormState);
50  const [hasContent, setHasContent] = useState(false);
51 
52  const defaultMessage = formState.status === "error" ? formState.submittedData.message : "";
53  const defaultMode = formState.status === "error" ? formState.submittedData.mode : aiModes[0].value;
54 
55  return (
56    <Form action={submitAction} className="w-full max-sm:flex max-sm:items-center max-sm:justify-center">
57      <Card
58        className={cn(
59          "!gap-3 !p-3 mx-auto h-auto w-full rounded-[var(--radius-lg)] border-[oklch(from_var(--border)_l_c_h_/_0.25)] bg-[var(--mix-card-50-bg)] transition-[border-color] duration-200 ease-in-out focus-within:border-[oklch(from_var(--border)_l_c_h_/_0.5)] hover:border-[oklch(from_var(--border)_l_c_h_/_0.5)]",
60          "min-w-0 max-w-[600px]",
61          "max-sm:min-w-[230px]"
62        )}
63      >
64        <CardContent>
65          <Field
66            className={cn(
67// … truncated