Add AI chat feature

components/chat/chat-form.tsx

@@ -0,0 +1,34 @@
+import { useState, type SubmitEvent } from "react";
+import { Button } from "../ui/button";
+import { Textarea } from "../ui/textarea";
+import { ArrowUpIcon, SendIcon } from "lucide-react";
+
+interface ChatFormProps {
+  onMessage: (message: { text: string }) => void;
+  disabled?: boolean;
+}
+
+export function ChatForm({ onMessage, disabled }: ChatFormProps) {
+  const [text, setText] = useState("");
+
+  function handleSubmit(e: SubmitEvent<HTMLFormElement>) {
+    e.preventDefault();
+    if (!text.trim()) return;
+    setText("");
+    onMessage({ text });
+  }
+
+  return (
+    <form onSubmit={handleSubmit} className="flex gap-2">
+      <Textarea
+        name="text"
+        value={text}
+        onChange={(e) => setText(e.target.value)}
+        className="min-h-18"
+      />
+      <Button type="submit" disabled={disabled} size="icon-lg">
+        <ArrowUpIcon />
+      </Button>
+    </form>
+  );
+}

components/chat/chat-messages.tsx

@@ -0,0 +1,32 @@
+import { cn } from "@/lib/utils";
+import { UIMessage } from "ai";
+
+interface ChatMessagesProps {
+  messages: UIMessage[];
+}
+
+export function ChatMessages({ messages }: ChatMessagesProps) {
+  return (
+    <div className="flex flex-col gap-2">
+      {messages.map((message, index) => (
+        <div
+          key={index}
+          className={cn(
+            "bg-primary text-primary-foreground px-3 py-2 rounded-lg whitespace-pre-wrap wrap-break-word break-all",
+            message.role === "user"
+              ? "self-end bg-primary text-primary-foreground"
+              : "self-start bg-accent text-accent-foreground",
+          )}
+        >
+          {message.parts.map((part, index) => {
+            if (part.type === "text") {
+              return <span key={index}>{part.text}</span>;
+            }
+
+            return null;
+          })}
+        </div>
+      ))}
+    </div>
+  );
+}

components/chat/index.tsx

@@ -0,0 +1,24 @@
+"use client";
+
+import { ChatMessages } from "./chat-messages";
+import { ChatForm } from "./chat-form";
+import { DefaultChatTransport } from "ai";
+import { useChat } from "@ai-sdk/react";
+
+export function Chat() {
+  const { messages, sendMessage, status, error } = useChat({
+    transport: new DefaultChatTransport({
+      api: "http://localhost:3000/api/chat",
+    }),
+  });
+
+  return (
+    <div className="max-w-2xl flex flex-col gap-2">
+      <ChatMessages messages={messages} />
+      <ChatForm
+        onMessage={sendMessage}
+        disabled={status === "submitted" || status === "streaming"}
+      />
+    </div>
+  );
+}

components/ui/button.tsx

@@ -0,0 +1,67 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+import { Slot } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+
+const buttonVariants = cva(
+  "group/button inline-flex shrink-0 items-center justify-center rounded-lg border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground [a]:hover:bg-primary/80",
+        outline:
+          "border-border bg-background hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50",
+        secondary:
+          "bg-secondary text-secondary-foreground hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-secondary-foreground",
+        ghost:
+          "hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50",
+        destructive:
+          "bg-destructive/10 text-destructive hover:bg-destructive/20 focus-visible:border-destructive/40 focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:hover:bg-destructive/30 dark:focus-visible:ring-destructive/40",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default:
+          "h-8 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
+        xs: "h-6 gap-1 rounded-[min(var(--radius-md),10px)] px-2 text-xs in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3",
+        sm: "h-7 gap-1 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5",
+        lg: "h-9 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
+        icon: "size-8",
+        "icon-xs":
+          "size-6 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-lg [&_svg:not([class*='size-'])]:size-3",
+        "icon-sm":
+          "size-7 rounded-[min(var(--radius-md),12px)] in-data-[slot=button-group]:rounded-lg",
+        "icon-lg": "size-9",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+function Button({
+  className,
+  variant = "default",
+  size = "default",
+  asChild = false,
+  ...props
+}: React.ComponentProps<"button"> &
+  VariantProps<typeof buttonVariants> & {
+    asChild?: boolean
+  }) {
+  const Comp = asChild ? Slot.Root : "button"
+
+  return (
+    <Comp
+      data-slot="button"
+      data-variant={variant}
+      data-size={size}
+      className={cn(buttonVariants({ variant, size, className }))}
+      {...props}
+    />
+  )
+}
+
+export { Button, buttonVariants }

components/ui/textarea.tsx

@@ -0,0 +1,18 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {
+  return (
+    <textarea
+      data-slot="textarea"
+      className={cn(
+        "flex field-sizing-content min-h-16 w-full rounded-lg border border-input bg-transparent px-2.5 py-2 text-base transition-colors outline-none placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Textarea }