AI Chat

1"use client";
2 
3import { ArrowUp, AudioLines, Paperclip } from "lucide-react";
4import { useActionState, useState } from "react";
5import { Button } from "@/registry/brook/ui/button/button";
6import { Card, CardContent, CardFooter } from "@/registry/brook/ui/card/card";
7import { Field, FieldControl } from "@/registry/brook/ui/field/field";
8import { Form } from "@/registry/brook/ui/form/form";
9import {
10  Select,
11  SelectIcon,
12  SelectItem,
13  SelectItemIndicator,
14  SelectItemText,
15  SelectList,
16  SelectPopup,
17  SelectPortal,
18  SelectPositioner,
19  SelectSpacer,
20  SelectTrigger,
21  SelectValue,
22} from "@/registry/brook/ui/select/select";
23import styles from "./ai-chat.module.css";
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={styles.form}>
57      <Card className={styles.aiChatCard}>
58        <CardContent>
59          <Field className={styles.field}>
60            <FieldControl
61              placeholder="How can I help…"
62              render={
63                <textarea
64                  className={styles.textarea}
65                  defaultValue={defaultMessage}
66                  disabled={isPending}
67                  name="message"
68                  onChange={(e) => setHasContent(e.target.value.trim().length > 0)}
69                />
70              }
71            />
72          </Field>
73        </CardContent>
74        <CardFooter className={styles.footer}>
75// … truncated