import { useState } from "react"; const MESSAGES = [ { role: "assistant", content: "Hello! I can help you build UI components. What are you looking for today?" }, { role: "user", content: "I need an animated card grid with staggered entrance animations" }, { role: "assistant", content: "Great choice! I'll create a responsive card grid with staggered fade-in animations. Each card will enter from below with a slight delay between them.\n\nHere's what I'll include:\n- CSS Grid layout (responsive 1-3 columns)\n- Intersection Observer for scroll-triggered animation\n- Staggered delays using CSS custom properties\n- Hover lift effect with shadow" }, { role: "user", content: "Perfect, make it dark themed with orange accents" }, ]; export default function AIChatInterface() { const [input, setInput] = useState(""); return (

{/* Header */}

AI Assistant

Claude Sonnet 4

{/* Messages */}

{MESSAGES.map((msg, i) => (

{msg.content}

))} {/* Typing indicator */}

{/* Input */}

setInput(e.target.value)} placeholder="Type a message..." className="flex-1 bg-transparent text-sm text-white placeholder-zinc-500 outline-none" />

); }

AI Chat Components

AI Chat Interface