AI Chat Interface

1import { useState } from "react";
2 
3const MESSAGES = [
4  { role: "assistant", content: "Hello! I can help you build UI components. What are you looking for today?" },
5  { role: "user", content: "I need an animated card grid with staggered entrance animations" },
6  { 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" },
7  { role: "user", content: "Perfect, make it dark themed with orange accents" },
8];
9 
10export default function AIChatInterface() {
11  const [input, setInput] = useState("");
12 
13  return (
14    <div className="flex min-h-screen items-center justify-center bg-[#09090b] p-4">
15      <div className="flex h-[600px] w-full max-w-2xl flex-col rounded-xl border border-zinc-800 bg-[#111113]">
16        {/* Header */}
17        <div className="flex items-center gap-3 border-b border-zinc-800 px-5 py-4">
18          <div className="flex h-8 w-8 items-center justify-center rounded-lg bg-orange-500/10">
19            <svg className="h-4 w-4 text-orange-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
20              <path strokeLinecap="round" d="M8 10h.01M12 10h.01M16 10h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" />
21            </svg>
22          </div>
23          <div>
24            <h3 className="text-sm font-semibold text-white">AI Assistant</h3>
25            <p className="text-xs text-zinc-500">Claude Sonnet 4</p>
26          </div>
27        </div>
28 
29        {/* Messages */}
30        <div className="flex-1 space-y-4 overflow-y-auto px-5 py-5">
31          {MESSAGES.map((msg, i) => (
32            <div key={i} className={`flex ${msg.role === "user" ? "justify-end" : "justify-start"}`}>
33              <div
34                className={`max-w-[80%] rounded-xl px-4 py-3 text-sm leading-relaxed ${
35                  msg.role === "user"
36                    ? "bg-orange-500 text-white"
37                    : "border-l-2 border-orange-500/30 bg-zinc-800/50 text-zinc-300"
38                }`}
39              >
40                <p className="whitespace-pre-wrap">{msg.content}</p>
41              </div>
42            </div>
43          ))}
44          {/* Typing indicator */}
45          <div className="flex justify-start">
46            <div className="flex items-center gap-1.5 rounded-xl bg-zinc-800/50 px-4 py-3">
47              <span className="h-1.5 w-1.5 animate-bounce rounded-full bg-zinc-500" style={{ animationDelay: "0ms" }} />
48              <span className="h-1.5 w-1.5 animate-bounce rounded-full bg-zinc-500" style={{ animationDelay: "150ms" }} />
49              <span className="h-1.5 w-1.5 animate-bounce rounded-full bg-zinc-500" style={{ animationDelay: "300ms" }} />
50            </div>
51          </div>
52        </div>
53 
54        {/* Input */}
55        <div className="border-t border-zinc-800 px-4 py-3">
56          <div className="flex items-center gap-2 rounded-lg border border-zinc-700 bg-zinc-900 px-3 py-2">
57            <input
58              type="text"
59              value={input}
60              onChange={(e) => setInput(e.target.value)}
61              placeholder="Type a message..."
62              className="flex-1 bg-transparent text-sm text-white placeholder-zinc-500 outline-none"
63            />
64            <button className="rounded-md bg-orange-500 p-1.5 text-white transition hover:bg-orange-600">
65              <svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
66                <path strokeLinecap="round" d="M5 12h14M12 5l7 7-7 7" />
67              </svg>
68            </button>
69          </div>
70        </div>
71      </div>
72    </div>
73  );
74}