"use client" import { useState } from "react" import { AnimatePresence, motion } from "motion/react" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { ScrollArea } from "@/components/ui/scroll-area" import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, } from "@/components/ui/dropdown-menu" import { Avatar, AvatarFallback } from "@/components/ui/avatar" import { Bot, Send, MoreHorizontal, Trash2 } from "lucide-react" import { cn } from "@/lib/utils" function ChatMessageRow({ role, content, className }: { role: "user" | "assistant"; content: string; className?: string }) { const isUser = role === "user" return ( {isUser ? "U" : "AI"}

{content}

) } function ChatConversationItem({ id, title, isActive, onDelete }: { id: string; title: string; isActive?: boolean; onDelete?: (id: string) => void }) { return (

{title} { e.preventDefault(); onDelete?.(id) }}> Delete

) } export function ChatLayout({ onDeleteConversation }: { onDeleteConversation?: (id: string) => void }) { const [conversations, setConversations] = useState([{ id: "1", title: "Summary doc" }, { id: "2", title: "Code review" }, { id: "3", title: "API design" }]) const [messages] = useState([ { id: "m1", role: "user" as const, content: "What's the best way to structure this API?" }, { id: "m2", role: "assistant" as const, content: "Consider REST with versioned routes and clear status codes. I can draft a spec." }, ]) const [activeId, setActiveId] = useState("1") const handleDelete = (id: string) => { setConversations((p) => p.filter((c) => c.id !== id)) if (activeId === id && conversations.length > 1) setActiveId(conversations.find((c) => c.id !== id)?.id ?? "") onDeleteConversation?.(id) } return (

{messages.map((msg) => )}

) }

Chat layout