Create static/app.jsx

static/app.jsx

@@ -0,0 +1,57 @@
+import React, { useState } from "https://esm.sh/react";
+import ReactDOM from "https://esm.sh/react-dom";
+
+function App() {
+  const [messages, setMessages] = useState([]);
+  const [input, setInput] = useState("");
+
+  async function sendMessage() {
+    const userMsg = { role: "user", content: input };
+    setMessages([...messages, userMsg]);
+    setInput("");
+
+    const res = await fetch("/chat", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ messages: [...messages, userMsg] })
+    });
+
+    const data = await res.json();
+    setMessages(m => [...m, data]);
+  }
+
+  return (
+    <div className="flex h-screen">
+      {/* Sidebar */}
+      <div className="w-64 bg-zinc-800 p-4">
+        <button className="w-full bg-zinc-700 p-2 rounded">+ New Chat</button>
+      </div>
+
+      {/* Chat */}
+      <div className="flex-1 flex flex-col">
+        <div className="flex-1 p-6 space-y-4 overflow-y-auto">
+          {messages.map((m, i) => (
+            <div key={i} className={m.role === "user" ? "text-right" : "text-left"}>
+              <div className={`inline-block p-4 rounded-xl max-w-xl ${m.role === "user" ? "bg-blue-600" : "bg-zinc-700"}`}>
+                {m.content}
+              </div>
+            </div>
+          ))}
+        </div>
+
+        {/* Input */}
+        <div className="p-4 border-t border-zinc-700">
+          <input
+            value={input}
+            onChange={e => setInput(e.target.value)}
+            onKeyDown={e => e.key === "Enter" && sendMessage()}
+            className="w-full bg-zinc-800 p-3 rounded"
+            placeholder="Message ChatAI..."
+          />
+        </div>
+      </div>
+    </div>
+  );
+}
+
+ReactDOM.createRoot(document.getElementById("root")).render(<App />);