"use client" import { useState } from "react" import { AnimatePresence, motion } from "motion/react" import { Button } from "@/components/ui/button" import { Textarea } from "@/components/ui/textarea" import { Avatar, AvatarFallback } from "@/components/ui/avatar" import { Badge } from "@/components/ui/badge" import { ScrollArea } from "@/components/ui/scroll-area" import { Alert, AlertTitle, AlertDescription } from "@/components/ui/alert" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu" import { Send, CircleAlert, Copy, X, MoreVertical, Trash2 } from "lucide-react" import { cn } from "@/lib/utils" const msgTransition = { duration: 0.22, ease: "easeOut" } const msgVariants = { initial: { opacity: 0, y: 8 }, animate: { opacity: 1, y: 0 }, exit: { opacity: 0, y: -4 } } function ChatMessageRow({ role, content, className }: { role: "user" | "assistant"; content: string; className?: string }) { const isUser = role === "user" return ( {isUser ? "U" : "AI"}

{content}

) } export function AIChatPlayground({ onClearChat, onRetry, onDismiss, suggestedPrompts = ["Summarize", "Explain", "Improve"], onSelectPrompt, attachments = [{ id: "a1", name: "file.pdf" }], onRemoveAttachment, onSend, className, }: { onClearChat?: () => void onRetry?: () => void onDismiss?: () => void suggestedPrompts?: string[] onSelectPrompt?: (p: string) => void attachments?: { id: string; name: string }[] onRemoveAttachment?: (id: string) => void onSend?: (message: string) => void className?: string }) { const [messages, setMessages] = useState([{ id: "1", role: "user" as const, content: "Explain this code to me." }, { id: "2", role: "assistant" as const, content: "Here's a simple helper:" }]) const [showAssistantBlocks, setShowAssistantBlocks] = useState(true) const [model, setModel] = useState("gpt-4") const [inputValue, setInputValue] = useState("") const sampleCode = "const greet = (name: string) => `Hello, ${name}`;" const handleClear = () => { setMessages([]); setShowAssistantBlocks(false); onClearChat?.() } const handleCopy = () => { void navigator.clipboard.writeText(sampleCode) } const blockClass = "rounded-[var(--chat-bubble-radius)] border border-[var(--glass-border)] bg-[var(--chat-assistant-bg)] backdrop-blur-[var(--glass-blur)] max-w-[var(--chat-bubble-max-width,85%)]" return (

AI Chat

{ e.preventDefault(); handleClear() }}> Clear chat

{messages.map((msg) => )} {showAssistantBlocks && ( <> AI

{sampleCode}

ErrorRequest failed. Retry?

)} {messages.length === 0 && !showAssistantBlocks &&

Send a message or pick a prompt below.

}

{suggestedPrompts.map((p) => )}

{attachments.map((a) => ( {a.name} ))}

AI chat playground

Error