| "use client"; | |
| import { useEffect, useState, useRef } from "react"; | |
| import Image from "next/image"; | |
| import { Send, History, Sparkles, Trash2, MessageSquare, Clock, ChevronLeft, Menu, X, Activity, Database } from "lucide-react"; | |
| import { motion, AnimatePresence } from "framer-motion"; | |
| import type { UIPlan } from "@/components/dynamic/types"; | |
| type Health = { | |
| status: string; | |
| duckdb_ok: boolean; | |
| tables: number; | |
| llm_keys: number; | |
| mode: string; | |
| }; | |
| type HistoryEntry = { q: string; plan: UIPlan; ts: number }; | |
| type Props = { | |
| history: HistoryEntry[]; | |
| onAsk: (q: string) => void; | |
| onSelect: (e: HistoryEntry) => void; | |
| onClear?: () => void; | |
| loading: boolean; | |
| children: React.ReactNode; | |
| liveMode?: boolean; | |
| onToggleLive?: () => void; | |
| onOpenKB?: () => void; | |
| }; | |
| export function ChatShell({ history, onAsk, onSelect, onClear, loading, children, liveMode, onToggleLive, onOpenKB }: Props) { | |
| const [q, setQ] = useState(""); | |
| const [sidebarOpen, setSidebarOpen] = useState(false); | |
| const inputRef = useRef<HTMLInputElement>(null); | |
| const submit = () => { | |
| if (!q.trim() || loading) return; | |
| onAsk(q); | |
| setQ(""); | |
| }; | |
| return ( | |
| <div className="grid min-h-screen max-w-full overflow-x-hidden grid-cols-1 lg:grid-cols-[280px_1fr]"> | |
| {/* Mobile sidebar overlay */} | |
| <AnimatePresence> | |
| {sidebarOpen && ( | |
| <motion.div | |
| initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0 }} | |
| className="fixed inset-0 z-40 bg-black/30 backdrop-blur-sm lg:hidden" | |
| onClick={() => setSidebarOpen(false)} | |
| /> | |
| )} | |
| </AnimatePresence> | |
| <Sidebar | |
| history={history} | |
| onSelect={(e) => { onSelect(e); setSidebarOpen(false); }} | |
| onClear={onClear} | |
| mobileOpen={sidebarOpen} | |
| onCloseMobile={() => setSidebarOpen(false)} | |
| liveMode={liveMode} | |
| onToggleLive={onToggleLive ? () => { onToggleLive(); setSidebarOpen(false); } : undefined} | |
| onOpenKB={onOpenKB ? () => { onOpenKB(); setSidebarOpen(false); } : undefined} | |
| /> | |
| <main className="flex min-h-screen flex-col"> | |
| <Topbar onMenuClick={() => setSidebarOpen(true)} /> | |
| <section className={`flex-1 overflow-x-hidden ${liveMode ? "" : "px-4 py-6 sm:px-6"}`}>{children}</section> | |
| {/* ── Enhanced Input Bar ──────────────────────────────── */} | |
| <div className="sticky bottom-0 z-10 border-t border-mb-mist bg-white/85 px-4 py-3 backdrop-blur-lg"> | |
| <form | |
| onSubmit={(e) => { e.preventDefault(); submit(); }} | |
| className="mx-auto max-w-4xl" | |
| > | |
| <div className="flex items-center gap-3 rounded-2xl border border-mb-amber-200/80 bg-white px-4 py-2 shadow-lg shadow-mb-orange/5 ring-1 ring-mb-orange/10 transition-shadow focus-within:shadow-xl focus-within:shadow-mb-orange/10 focus-within:ring-mb-orange/20"> | |
| <Sparkles className="h-4 w-4 shrink-0 text-mb-orange" /> | |
| <input | |
| ref={inputRef} | |
| value={q} | |
| onChange={(e) => setQ(e.target.value)} | |
| placeholder="Ask about budgets, programs, regional trends…" | |
| className="h-10 flex-1 bg-transparent text-[15px] text-mb-ink outline-none placeholder:text-mb-slate/40" | |
| suppressHydrationWarning | |
| autoComplete="off" | |
| /> | |
| <div className="flex items-center gap-2"> | |
| {q.trim() && ( | |
| <span className="hidden sm:inline text-[10px] text-mb-slate/40 font-mono"> | |
| ↵ Enter | |
| </span> | |
| )} | |
| <button | |
| type="submit" | |
| disabled={loading || !q.trim()} | |
| suppressHydrationWarning | |
| className="flex h-9 items-center gap-2 rounded-xl bg-gradient-to-r from-mb-orange to-mb-yellow px-4 text-sm font-semibold text-white shadow-lg shadow-mb-orange/30 transition-all hover:brightness-105 hover:shadow-xl disabled:opacity-40 disabled:shadow-none" | |
| > | |
| <Send className="h-4 w-4" /> | |
| <span className="hidden sm:inline">{loading ? "Thinking…" : "Ask"}</span> | |
| </button> | |
| </div> | |
| </div> | |
| <div className="mt-1.5 flex justify-center"> | |
| <span className="text-[10px] text-mb-slate/35"> | |
| Results include provenance citations from your database · No hallucinated data | |
| </span> | |
| </div> | |
| </form> | |
| </div> | |
| </main> | |
| </div> | |
| ); | |
| } | |
| function Sidebar({ | |
| history, | |
| onSelect, | |
| onClear, | |
| mobileOpen, | |
| onCloseMobile, | |
| liveMode, | |
| onToggleLive, | |
| onOpenKB, | |
| }: Pick<Props, "history" | "onSelect" | "onClear" | "liveMode" | "onToggleLive" | "onOpenKB"> & { | |
| mobileOpen: boolean; | |
| onCloseMobile: () => void; | |
| }) { | |
| return ( | |
| <aside className={` | |
| ${mobileOpen ? "fixed inset-y-0 left-0 z-50 w-72 shadow-2xl" : "hidden"} | |
| border-r border-[#D4A11E]/35 bg-gradient-to-b from-[#F1C232] via-[#F6D76B] to-[#FFF1B8] p-4 backdrop-blur | |
| lg:relative lg:flex lg:flex-col lg:z-auto lg:w-auto lg:shadow-none | |
| `}> | |
| {/* Header */} | |
| <div className="flex items-center justify-between"> | |
| <div className="flex items-center gap-2"> | |
| <Image | |
| src="/magic-bus-logo.png" | |
| alt="Magic Bus India Foundation" | |
| width={36} | |
| height={36} | |
| className="rounded-lg shadow-sm" | |
| priority | |
| /> | |
| <div> | |
| <div className="font-serif text-lg leading-none">FinAI</div> | |
| <div className="text-[10px] uppercase tracking-[0.12em] text-mb-slate/55"> | |
| Adaptive Analytics | |
| </div> | |
| </div> | |
| </div> | |
| <button onClick={onCloseMobile} title="Close sidebar" className="rounded-md p-1 lg:hidden hover:bg-white/30"> | |
| <X className="h-4 w-4" /> | |
| </button> | |
| </div> | |
| {/* Live Insights toggle */} | |
| {onToggleLive && ( | |
| <button | |
| type="button" | |
| onClick={onToggleLive} | |
| suppressHydrationWarning | |
| className={`mt-4 flex w-full items-center gap-2 rounded-xl px-3 py-2.5 text-sm font-semibold transition-all ${ | |
| liveMode | |
| ? "bg-gradient-to-r from-emerald-500 to-teal-600 text-white shadow-md" | |
| : "bg-white/50 text-mb-ink/80 ring-1 ring-mb-amber-200/40 hover:bg-white/70 hover:shadow-sm" | |
| }`} | |
| > | |
| <Activity className="h-4 w-4" /> | |
| Live Insights | |
| <span className="relative ml-auto flex h-2.5 w-2.5"> | |
| <span className={`absolute inline-flex h-full w-full rounded-full opacity-75 ${liveMode ? "animate-ping bg-white" : "bg-emerald-400"}`} /> | |
| <span className={`relative inline-flex h-2.5 w-2.5 rounded-full ${liveMode ? "bg-white" : "bg-emerald-500"}`} /> | |
| </span> | |
| </button> | |
| )} | |
| {/* Knowledge Base manager */} | |
| {onOpenKB && ( | |
| <button | |
| type="button" | |
| onClick={onOpenKB} | |
| suppressHydrationWarning | |
| className="mt-2 flex w-full items-center gap-2 rounded-xl bg-white/50 px-3 py-2.5 text-sm font-semibold text-mb-ink/80 ring-1 ring-mb-amber-200/40 transition-all hover:bg-white/70 hover:shadow-sm" | |
| > | |
| <Database className="h-4 w-4 text-mb-amber-700" /> | |
| Knowledge Base | |
| <span className="ml-auto rounded-full bg-mb-amber-100 px-2 py-0.5 text-[10px] font-medium text-mb-amber-800"> | |
| Edit | |
| </span> | |
| </button> | |
| )} | |
| {/* History section */} | |
| <div className="mt-6 flex items-center justify-between"> | |
| <div className="flex items-center gap-1.5 text-[11px] uppercase tracking-[0.12em] text-mb-slate/55 font-semibold"> | |
| <Clock className="h-3 w-3" /> | |
| History | |
| {history.length > 0 && ( | |
| <span className="ml-1 rounded-full bg-white/50 px-1.5 py-0.5 text-[9px] font-bold text-mb-amber-800"> | |
| {history.length} | |
| </span> | |
| )} | |
| </div> | |
| {history.length > 0 && onClear && ( | |
| <button | |
| onClick={onClear} | |
| title="Clear history" | |
| className="rounded-md p-1 text-mb-slate/50 transition hover:bg-white/40 hover:text-rose-700" | |
| > | |
| <Trash2 className="h-3 w-3" /> | |
| </button> | |
| )} | |
| </div> | |
| <ul className="mt-2 flex-1 space-y-0.5 overflow-y-auto pr-1 scrollbar-thin"> | |
| {history.length === 0 ? ( | |
| <li className="rounded-xl bg-[#F1C232]/15 p-3 text-[12px] text-mb-slate/60 leading-relaxed"> | |
| <MessageSquare className="mb-1 h-4 w-4 text-mb-amber-700/40" /> | |
| Your analysis history will appear here. Saved locally on this device. | |
| </li> | |
| ) : ( | |
| history.map((h, i) => ( | |
| <li key={`${h.q}-${i}`}> | |
| <button | |
| onClick={() => onSelect(h)} | |
| className="group/h w-full rounded-xl px-2.5 py-2 text-left transition-all hover:bg-gradient-to-r hover:from-[#F9E08B]/80 hover:to-[#FFF3C2]/80 hover:shadow-sm" | |
| title={h.q} | |
| > | |
| <div className="truncate text-[13px] font-medium text-mb-ink/90 group-hover/h:text-mb-amber-900"> | |
| {h.q} | |
| </div> | |
| {h.ts && ( | |
| <div className="mt-0.5 flex items-center gap-1 text-[10px] text-mb-slate/45 group-hover/h:text-mb-amber-700/60"> | |
| <Clock className="h-2.5 w-2.5" /> | |
| {fmtTime(h.ts)} | |
| </div> | |
| )} | |
| </button> | |
| </li> | |
| )) | |
| )} | |
| </ul> | |
| </aside> | |
| ); | |
| } | |
| function fmtTime(ts: number): string { | |
| const d = new Date(ts); | |
| const now = new Date(); | |
| const sameDay = d.toDateString() === now.toDateString(); | |
| return sameDay | |
| ? d.toLocaleTimeString(undefined, { hour: "2-digit", minute: "2-digit" }) | |
| : d.toLocaleDateString(undefined, { month: "short", day: "numeric" }) + | |
| " · " + | |
| d.toLocaleTimeString(undefined, { hour: "2-digit", minute: "2-digit" }); | |
| } | |
| function Topbar({ onMenuClick }: { onMenuClick: () => void }) { | |
| const [h, setH] = useState<Health | null>(null); | |
| useEffect(() => { | |
| let alive = true; | |
| const load = () => | |
| fetch("/api/backend/health") | |
| .then((r) => (r.ok ? r.json() : null)) | |
| .then((j) => alive && setH(j)) | |
| .catch(() => alive && setH(null)); | |
| load(); | |
| const id = setInterval(load, 15000); | |
| return () => { | |
| alive = false; | |
| clearInterval(id); | |
| }; | |
| }, []); | |
| const tables = h?.tables ?? 0; | |
| const keys = h?.llm_keys ?? 0; | |
| const mode = h?.mode ?? "…"; | |
| const dbOk = h?.duckdb_ok; | |
| const loadingHealth = h === null; | |
| const dotColor = loadingHealth | |
| ? "bg-yellow-400 animate-pulse" | |
| : dbOk && keys > 0 | |
| ? "bg-emerald-400" | |
| : "bg-rose-400"; | |
| return ( | |
| <header className="flex items-center justify-between border-b border-[#D4A11E]/35 bg-gradient-to-r from-[#F1C232] via-[#F6D76B] to-[#FFF1B8] px-4 py-2.5 backdrop-blur sm:px-6"> | |
| <div className="flex items-center gap-3"> | |
| <button onClick={onMenuClick} title="Open sidebar" className="rounded-md p-1 lg:hidden hover:bg-white/30"> | |
| <Menu className="h-5 w-5 text-mb-ink/70" /> | |
| </button> | |
| <div className="flex items-center gap-2 text-sm text-mb-slate"> | |
| <span className={`h-2 w-2 rounded-full ${dotColor}`} /> | |
| <span className="font-semibold text-mb-orange">finai</span> | |
| <span className="hidden sm:inline text-mb-slate/40">·</span> | |
| <span className="hidden sm:inline text-[13px]"> | |
| {loadingHealth | |
| ? "connecting…" | |
| : dbOk === false | |
| ? "database unavailable" | |
| : `${tables} tables · Llama 3.3`} | |
| </span> | |
| </div> | |
| </div> | |
| <div className="flex items-center gap-2 text-xs"> | |
| {!loadingHealth && keys > 0 && ( | |
| <span className="hidden sm:inline rounded-full bg-emerald-100/70 px-2 py-0.5 text-[10px] font-medium text-emerald-800 ring-1 ring-emerald-300/30"> | |
| {keys} keys active | |
| </span> | |
| )} | |
| <span className="rounded-full bg-mb-amber-100/80 px-2 py-0.5 text-[10px] font-semibold text-mb-amber-800 ring-1 ring-mb-amber-200/60"> | |
| FY 2025–26 | |
| </span> | |
| </div> | |
| </header> | |
| ); | |
| } | |