Create pages/index.js

pages/index.js

@@ -0,0 +1,105 @@
+import { useState } from "react";
+
+export default function Home() {
+  const [projectName, setProjectName] = useState("");
+  const [projectDescription, setProjectDescription] = useState("");
+  const [projects, setProjects] = useState([]);
+  const [messages, setMessages] = useState([]);
+  const [input, setInput] = useState("");
+
+  const handleAddProject = () => {
+    if (!projectName) return;
+    setProjects([...projects, { name: projectName, description: projectDescription }]);
+    setProjectName("");
+    setProjectDescription("");
+  };
+
+  const handleSendMessage = async () => {
+    if (!input) return;
+    const newMessage = { role: "user", content: input };
+    setMessages((prev) => [...prev, newMessage]);
+
+    try {
+      const res = await fetch("/api/chat", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ messages: [...messages, newMessage] }),
+      });
+      const data = await res.json();
+      setMessages((prev) => [...prev, { role: "assistant", content: data.reply }]);
+    } catch (err) {
+      setMessages((prev) => [...prev, { role: "assistant", content: "⚠️ Error fetching response" }]);
+    }
+
+    setInput("");
+  };
+
+  return (
+    <div className="min-h-screen flex flex-col items-center p-6">
+      <h1 className="text-3xl font-bold mb-6">🧪 Bio Lab AI</h1>
+
+      {/* Projects */}
+      <div className="w-full max-w-2xl mb-6">
+        <h2 className="text-xl font-semibold mb-2">Projects</h2>
+        <div className="flex gap-2 mb-3">
+          <input
+            className="flex-1 p-2 border rounded-lg"
+            placeholder="Project name"
+            value={projectName}
+            onChange={(e) => setProjectName(e.target.value)}
+          />
+          <input
+            className="flex-1 p-2 border rounded-lg"
+            placeholder="Project description"
+            value={projectDescription}
+            onChange={(e) => setProjectDescription(e.target.value)}
+          />
+          <button
+            onClick={handleAddProject}
+            className="px-4 py-2 bg-blue-600 text-white rounded-lg"
+          >
+            Add
+          </button>
+        </div>
+        <ul className="space-y-1">
+          {projects.map((p, i) => (
+            <li key={i} className="p-2 bg-white rounded shadow">
+              <strong>{p.name}</strong> — {p.description}
+            </li>
+          ))}
+        </ul>
+      </div>
+
+      {/* Chat */}
+      <div className="w-full max-w-2xl flex-1 flex flex-col border rounded-lg bg-white shadow p-4">
+        <div className="flex-1 overflow-y-auto space-y-2 mb-3">
+          {messages.map((m, i) => (
+            <div
+              key={i}
+              className={`p-2 rounded-lg max-w-xs ${
+                m.role === "user" ? "bg-blue-100 self-end" : "bg-gray-100 self-start"
+              }`}
+            >
+              <span>{m.content}</span>
+            </div>
+          ))}
+        </div>
+        <div className="flex gap-2">
+          <input
+            className="flex-1 p-2 border rounded-lg"
+            placeholder="Type a message..."
+            value={input}
+            onChange={(e) => setInput(e.target.value)}
+            onKeyDown={(e) => e.key === "Enter" && handleSendMessage()}
+          />
+          <button
+            onClick={handleSendMessage}
+            className="px-4 py-2 bg-green-600 text-white rounded-lg"
+          >
+            Send
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}