feat(frontend): rebuild as Ambient/WebGL console with all pages + command palette

Ground-up rombak UI: hapus semua component/page lama, bangun ulang dengan desain sistem Ambient (WebGL haze + drifting motes, signal-driven color) di atas kontrak API/WS/type yang sudah ada. - Design system: globals.css tokens + primitives (glass, button, badge, select, avatar, toast, chart SVG murni). - Shell: nav rail, topbar (status WS + pill signal + theme), AppFrame. - 8 halaman: dashboard, voice (orbital stage), media, messages (live feed + detail AI), moderation, analysis (search), recordings, + chatbot floating. - Command palette (Cmd/Ctrl+K) untuk navigasi cepat. - Server fetch di-page di-try/catch agar render graceful saat backend mati. Verified: tsc clean, next build 8/8 halaman, semua route 200.
2026-08-15 17:53:48 +07:00
parent b98101c576
commit 1b56212d1a
104 changed files with 2905 additions and 7048 deletions
@@ -0,0 +1,132 @@
+"use client";
+
+import { useEffect, useRef, useState } from "react";
+import { Bot, Send, X, MessageCircle } from "lucide-react";
+import { chatbotApi } from "@/lib/api";
+import { useChatbotUserId } from "@/hooks/use-chatbot-user";
+import { GlassPanel, Input, Button, Avatar } from "@/components/primitives";
+import { toast } from "@/components/primitives";
+import { cn } from "@/lib/utils";
+
+interface Msg {
+  role: "user" | "bot";
+  content: string;
+}
+
+export function Chatbot() {
+  const userId = useChatbotUserId();
+  const [open, setOpen] = useState(false);
+  const [msgs, setMsgs] = useState<Msg[]>([]);
+  const [input, setInput] = useState("");
+  const [loading, setLoading] = useState(false);
+  const listRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (!open || !userId) return;
+    chatbotApi
+      .getHistory(userId)
+      .then((res) => {
+        setMsgs(
+          res.history
+            .slice(-12)
+            .flatMap((h) => [
+              { role: "user" as const, content: h.user_message },
+              { role: "bot" as const, content: h.bot_response },
+            ]),
+        );
+      })
+      .catch(() => {});
+  }, [open, userId]);
+
+  useEffect(() => {
+    listRef.current?.scrollTo({ top: listRef.current.scrollHeight });
+  }, [msgs, loading]);
+
+  const send = async () => {
+    const text = input.trim();
+    if (!text || loading || !userId) return;
+    setInput("");
+    setMsgs((m) => [...m, { role: "user", content: text }]);
+    setLoading(true);
+    try {
+      const res = await chatbotApi.send(text, undefined, userId);
+      setMsgs((m) => [...m, { role: "bot", content: res.response }]);
+    } catch (e) {
+      toast({ title: "Chat error", description: String(e), tone: "vermilion" });
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <>
+      <button
+        type="button"
+        aria-label="Open assistant"
+        onClick={() => setOpen((o) => !o)}
+        className="fixed bottom-5 right-5 z-50 flex items-center justify-center rounded-full bg-signal text-signal-ink shadow-[0_10px_30px_-8px_var(--color-signal-glow)] transition-transform hover:scale-105"
+        style={{ width: 52, height: 52 }}
+      >
+        {open ? <X className="size-5" /> : <MessageCircle className="size-5" />}
+      </button>
+
+      {open && (
+        <GlassPanel
+          className="fixed bottom-20 right-5 z-50 flex w-[min(92vw,360px)] flex-col p-0"
+          style={{ animation: "fade-up 0.16s ease", height: 460 }}
+        >
+          <div className="flex items-center gap-2 border-b border-hairline px-4 py-3">
+            <span className="flex size-8 items-center justify-center rounded-full bg-signal/15 text-signal">
+              <Bot className="size-4" />
+            </span>
+            <div>
+              <div className="text-sm font-semibold text-ink">GMW Assistant</div>
+              <div className="mono text-[0.6rem] text-ink-faint">context-aware</div>
+            </div>
+          </div>
+
+          <div ref={listRef} className="flex-1 space-y-3 overflow-y-auto px-4 py-3">
+            {msgs.length === 0 && (
+              <div className="py-8 text-center text-xs text-ink-faint">
+                Ask about moderation, voice, or media.
+              </div>
+            )}
+            {msgs.map((m, i) => (
+              <div key={i} className={cn("flex gap-2", m.role === "user" ? "justify-end" : "justify-start")}>
+                {m.role === "bot" && <Avatar name="GMW" size={26} className="mt-0.5 bg-signal/15 text-signal" />}
+                <div
+                  className={cn(
+                    "max-w-[80%] rounded-2xl px-3 py-2 text-sm",
+                    m.role === "user"
+                      ? "rounded-br-sm bg-signal/20 text-ink"
+                      : "rounded-bl-sm bg-white/5 text-ink-soft",
+                  )}
+                >
+                  {m.content}
+                </div>
+              </div>
+            ))}
+            {loading && (
+              <div className="flex gap-2">
+                <Avatar name="GMW" size={26} className="bg-signal/15 text-signal" />
+                <div className="rounded-2xl rounded-bl-sm bg-white/5 px-3 py-2 text-sm text-ink-faint">…</div>
+              </div>
+            )}
+          </div>
+
+          <div className="flex items-center gap-2 border-t border-hairline p-3">
+            <Input
+              placeholder="Message…"
+              value={input}
+              onChange={(e) => setInput(e.target.value)}
+              onKeyDown={(e) => e.key === "Enter" && send()}
+            />
+            <Button variant="primary" size="icon" onClick={send} disabled={loading}>
+              <Send className="size-4" />
+            </Button>
+          </div>
+        </GlassPanel>
+      )}
+    </>
+  );
+}