First commit

2026-02-07 18:08:42 -06:00
commit b7a86a2d1c
57 changed files with 9188 additions and 0 deletions
--- a/components/AssistantDrawer.tsx
+++ b/components/AssistantDrawer.tsx
@@ -0,0 +1,115 @@
+"use client";
+
+import { FormEvent, useEffect, useMemo, useState } from "react";
+
+type AssistantMessage = {
+  id: string;
+  role: "user" | "assistant";
+  content: string;
+};
+
+type AssistantDrawerProps = {
+  mode?: "global" | "page";
+};
+
+export const ASSISTANT_TOGGLE_EVENT = "acve:assistant-toggle";
+
+export default function AssistantDrawer({ mode = "global" }: AssistantDrawerProps) {
+  const [isOpen, setIsOpen] = useState(mode === "page");
+  const [messages, setMessages] = useState<AssistantMessage[]>([
+    {
+      id: "seed",
+      role: "assistant",
+      content: "Ask about courses, case studies, or practice. Demo responses are mocked for now.",
+    },
+  ]);
+  const [input, setInput] = useState("");
+
+  useEffect(() => {
+    if (mode === "page") {
+      return;
+    }
+
+    const onToggle = () => setIsOpen((current) => !current);
+    window.addEventListener(ASSISTANT_TOGGLE_EVENT, onToggle);
+    return () => window.removeEventListener(ASSISTANT_TOGGLE_EVENT, onToggle);
+  }, [mode]);
+
+  const panelClasses = useMemo(() => {
+    if (mode === "page") {
+      return "mx-auto flex h-[70vh] max-w-3xl flex-col rounded-2xl border border-slate-300 bg-white shadow-xl";
+    }
+
+    return `fixed right-0 top-0 z-50 h-screen w-full max-w-md border-l border-slate-300 bg-white shadow-2xl transition-transform ${
+      isOpen ? "translate-x-0" : "translate-x-full"
+    }`;
+  }, [isOpen, mode]);
+
+  const send = (event: FormEvent) => {
+    event.preventDefault();
+    const trimmed = input.trim();
+    if (!trimmed) return;
+
+    const now = Date.now().toString();
+    setMessages((current) => [
+      ...current,
+      { id: `u-${now}`, role: "user", content: trimmed },
+      { id: `a-${now}`, role: "assistant", content: "(Demo) Assistant not connected yet." },
+    ]);
+    setInput("");
+  };
+
+  if (mode === "global" && !isOpen) {
+    return (
+      <aside className={panelClasses}>
+        <div />
+      </aside>
+    );
+  }
+
+  return (
+    <aside className={panelClasses}>
+      <div className="flex items-center justify-between border-b border-slate-200 px-4 py-3">
+        <h2 className="acve-heading text-2xl">AI Assistant</h2>
+        {mode === "global" ? (
+          <button
+            className="rounded-md border border-slate-300 px-2 py-1 text-sm text-slate-600 hover:bg-slate-50"
+            onClick={() => setIsOpen(false)}
+            type="button"
+          >
+            Close
+          </button>
+        ) : null}
+      </div>
+
+      <div className="flex-1 space-y-3 overflow-y-auto p-4">
+        {messages.map((message) => (
+          <div
+            key={message.id}
+            className={`max-w-[90%] rounded-lg px-3 py-2 text-sm ${
+              message.role === "user"
+                ? "ml-auto bg-brand text-white"
+                : "mr-auto border border-slate-200 bg-slate-50 text-slate-800"
+            }`}
+          >
+            {message.content}
+          </div>
+        ))}
+      </div>
+
+      <form className="border-t border-slate-200 p-3" onSubmit={send}>
+        <div className="flex gap-2">
+          <input
+            className="flex-1 rounded-md border border-slate-300 px-3 py-2 text-sm outline-none focus:border-brand"
+            onChange={(event) => setInput(event.target.value)}
+            placeholder="Type your message..."
+            value={input}
+          />
+          <button className="rounded-md bg-brand px-4 py-2 text-sm font-semibold text-white hover:brightness-105" type="submit">
+            Send
+          </button>
+        </div>
+      </form>
+    </aside>
+  );
+}