| "use client";
|
|
|
| import { useCallback, useEffect, useRef, useState } from "react";
|
| import { motion, AnimatePresence } from "framer-motion";
|
| import {
|
| X,
|
| Upload,
|
| Database,
|
| Trash2,
|
| RefreshCcw,
|
| Loader2,
|
| CheckCircle2,
|
| AlertTriangle,
|
| Pencil,
|
| Check,
|
| } from "lucide-react";
|
|
|
| type TableInfo = { name: string; rows: number | null; columns: string[] };
|
|
|
| export function KnowledgeBaseModal({
|
| open,
|
| onClose,
|
| onChange,
|
| }: {
|
| open: boolean;
|
| onClose: () => void;
|
| onChange?: (version: number) => void;
|
| }) {
|
| const [tables, setTables] = useState<TableInfo[]>([]);
|
| const [version, setVersion] = useState<number>(0);
|
| const [loading, setLoading] = useState(false);
|
| const [busy, setBusy] = useState<string | null>(null);
|
| const [error, setError] = useState<string | null>(null);
|
| const [success, setSuccess] = useState<string | null>(null);
|
| const [renameTarget, setRenameTarget] = useState<string | null>(null);
|
| const [renameValue, setRenameValue] = useState("");
|
| const [uploadMode, setUploadMode] = useState<"replace" | "append">("replace");
|
| const [tableNameOverride, setTableNameOverride] = useState("");
|
| const [dragOver, setDragOver] = useState(false);
|
| const fileInputRef = useRef<HTMLInputElement>(null);
|
|
|
| const fetchTables = useCallback(async () => {
|
| setLoading(true);
|
| setError(null);
|
| try {
|
| const res = await fetch("/api/backend/kb/tables");
|
| if (!res.ok) throw new Error(`HTTP ${res.status}`);
|
| const d = await res.json();
|
| setTables(d.tables ?? []);
|
| setVersion(d.version ?? 0);
|
| } catch (e) {
|
| setError(e instanceof Error ? e.message : String(e));
|
| } finally {
|
| setLoading(false);
|
| }
|
| }, []);
|
|
|
| useEffect(() => {
|
| if (open) fetchTables();
|
| }, [open, fetchTables]);
|
|
|
|
|
| useEffect(() => {
|
| if (!success) return;
|
| const t = setTimeout(() => setSuccess(null), 3000);
|
| return () => clearTimeout(t);
|
| }, [success]);
|
|
|
| const notifyChange = useCallback(
|
| (v: number) => {
|
| onChange?.(v);
|
|
|
|
|
| try {
|
| window.dispatchEvent(new CustomEvent("finai:kb-changed", { detail: { version: v } }));
|
| } catch {}
|
| },
|
| [onChange]
|
| );
|
|
|
| const doUpload = useCallback(
|
| async (file: File) => {
|
| setBusy(`upload:${file.name}`);
|
| setError(null);
|
| setSuccess(null);
|
| try {
|
| const fd = new FormData();
|
| fd.append("file", file);
|
| if (tableNameOverride.trim()) fd.append("table", tableNameOverride.trim());
|
| const url = `/api/backend/kb/upload?mode=${uploadMode}${
|
| tableNameOverride.trim() ? `&table=${encodeURIComponent(tableNameOverride.trim())}` : ""
|
| }`;
|
| const res = await fetch(url, { method: "POST", body: fd });
|
| const d = await res.json().catch(() => ({}));
|
| if (!res.ok) throw new Error(d.detail || `HTTP ${res.status}`);
|
| setSuccess(`Loaded ${d.rows} rows into ${d.table}`);
|
| setTableNameOverride("");
|
| await fetchTables();
|
| notifyChange(d.version ?? version + 1);
|
| } catch (e) {
|
| setError(e instanceof Error ? e.message : String(e));
|
| } finally {
|
| setBusy(null);
|
| if (fileInputRef.current) fileInputRef.current.value = "";
|
| }
|
| },
|
| [tableNameOverride, uploadMode, fetchTables, notifyChange, version]
|
| );
|
|
|
| const doDelete = useCallback(
|
| async (name: string) => {
|
| if (!confirm(`Drop table "${name}"? This cannot be undone.`)) return;
|
| setBusy(`delete:${name}`);
|
| setError(null);
|
| try {
|
| const res = await fetch(`/api/backend/kb/tables/${encodeURIComponent(name)}`, {
|
| method: "DELETE",
|
| });
|
| const d = await res.json().catch(() => ({}));
|
| if (!res.ok) throw new Error(d.detail || `HTTP ${res.status}`);
|
| setSuccess(`Dropped ${name}`);
|
| await fetchTables();
|
| notifyChange(d.version ?? version + 1);
|
| } catch (e) {
|
| setError(e instanceof Error ? e.message : String(e));
|
| } finally {
|
| setBusy(null);
|
| }
|
| },
|
| [fetchTables, notifyChange, version]
|
| );
|
|
|
| const doRename = useCallback(
|
| async (oldName: string, newName: string) => {
|
| if (!newName.trim() || newName === oldName) {
|
| setRenameTarget(null);
|
| return;
|
| }
|
| setBusy(`rename:${oldName}`);
|
| setError(null);
|
| try {
|
| const res = await fetch("/api/backend/kb/rename", {
|
| method: "POST",
|
| headers: { "content-type": "application/json" },
|
| body: JSON.stringify({ old_name: oldName, new_name: newName.trim() }),
|
| });
|
| const d = await res.json().catch(() => ({}));
|
| if (!res.ok) throw new Error(d.detail || `HTTP ${res.status}`);
|
| setSuccess(`Renamed ${oldName} → ${newName}`);
|
| setRenameTarget(null);
|
| await fetchTables();
|
| notifyChange(d.version ?? version + 1);
|
| } catch (e) {
|
| setError(e instanceof Error ? e.message : String(e));
|
| } finally {
|
| setBusy(null);
|
| }
|
| },
|
| [fetchTables, notifyChange, version]
|
| );
|
|
|
| if (!open) return null;
|
|
|
| return (
|
| <AnimatePresence>
|
| <motion.div
|
| key="kb-overlay"
|
| initial={{ opacity: 0 }}
|
| animate={{ opacity: 1 }}
|
| exit={{ opacity: 0 }}
|
| className="fixed inset-0 z-50 flex items-center justify-center bg-black/40 p-4 backdrop-blur-sm"
|
| onClick={onClose}
|
| >
|
| <motion.div
|
| key="kb-panel"
|
| initial={{ opacity: 0, y: 14, scale: 0.97 }}
|
| animate={{ opacity: 1, y: 0, scale: 1 }}
|
| exit={{ opacity: 0, y: 14, scale: 0.97 }}
|
| transition={{ duration: 0.2 }}
|
| onClick={(e) => e.stopPropagation()}
|
| className="flex max-h-[90vh] w-full max-w-4xl flex-col overflow-hidden rounded-2xl border border-mb-amber-200/60 bg-white shadow-2xl"
|
| >
|
| {/* Header */}
|
| <div className="flex items-center justify-between border-b border-mb-amber-100 bg-gradient-to-r from-mb-amber-50/60 to-white px-5 py-3.5">
|
| <div className="flex items-center gap-3">
|
| <div className="flex h-9 w-9 items-center justify-center rounded-xl bg-gradient-to-br from-emerald-500 to-teal-600 shadow-sm">
|
| <Database className="h-4.5 w-4.5 text-white" />
|
| </div>
|
| <div>
|
| <h2 className="text-base font-semibold text-mb-ink leading-tight">
|
| Knowledge Base
|
| </h2>
|
| <p className="text-[11px] text-mb-slate/60">
|
| Add, rename, or remove tables · changes propagate everywhere
|
| </p>
|
| </div>
|
| </div>
|
| <div className="flex items-center gap-2">
|
| <span className="rounded-full bg-slate-100 px-2.5 py-0.5 text-[10px] font-mono text-slate-600">
|
| v{version}
|
| </span>
|
| <button
|
| type="button"
|
| onClick={fetchTables}
|
| disabled={loading}
|
| suppressHydrationWarning
|
| className="rounded-md p-1.5 text-mb-slate/60 hover:bg-mb-amber-50 hover:text-mb-amber-700 disabled:opacity-50"
|
| title="Refresh"
|
| >
|
| <RefreshCcw className={`h-4 w-4 ${loading ? "animate-spin" : ""}`} />
|
| </button>
|
| <button
|
| type="button"
|
| onClick={onClose}
|
| suppressHydrationWarning
|
| className="rounded-md p-1.5 text-mb-slate/60 hover:bg-rose-50 hover:text-rose-600"
|
| title="Close"
|
| >
|
| <X className="h-4 w-4" />
|
| </button>
|
| </div>
|
| </div>
|
|
|
| {/* Toasts */}
|
| {(error || success) && (
|
| <div className="border-b border-mb-amber-100 px-5 py-2">
|
| {error && (
|
| <div className="flex items-start gap-2 rounded-md bg-rose-50 px-3 py-2 text-[12px] text-rose-800">
|
| <AlertTriangle className="h-3.5 w-3.5 shrink-0 mt-0.5" />
|
| <span className="break-words">{error}</span>
|
| </div>
|
| )}
|
| {success && (
|
| <div className="flex items-start gap-2 rounded-md bg-emerald-50 px-3 py-2 text-[12px] text-emerald-800">
|
| <CheckCircle2 className="h-3.5 w-3.5 shrink-0 mt-0.5" />
|
| <span>{success}</span>
|
| </div>
|
| )}
|
| </div>
|
| )}
|
|
|
| {/* Body */}
|
| <div className="grid flex-1 overflow-hidden md:grid-cols-[1fr_360px]">
|
| {/* Tables list */}
|
| <div className="flex flex-col overflow-hidden">
|
| <div className="border-b border-mb-amber-100 bg-mb-paper/40 px-5 py-2 text-[11px] font-semibold uppercase tracking-wider text-mb-slate/60">
|
| Tables ({tables.length})
|
| </div>
|
| <div className="flex-1 overflow-y-auto px-3 py-2">
|
| {loading && tables.length === 0 ? (
|
| <div className="flex items-center justify-center py-10 text-mb-slate/50">
|
| <Loader2 className="h-5 w-5 animate-spin" />
|
| </div>
|
| ) : tables.length === 0 ? (
|
| <div className="px-3 py-8 text-center text-sm text-mb-slate/50">
|
| No tables yet. Upload a CSV to get started →
|
| </div>
|
| ) : (
|
| <ul className="space-y-1">
|
| {tables.map((t) => (
|
| <li
|
| key={t.name}
|
| className="group flex items-start gap-2 rounded-lg border border-transparent px-3 py-2 transition hover:border-mb-amber-200/60 hover:bg-mb-amber-50/40"
|
| >
|
| <Database className="h-4 w-4 shrink-0 mt-0.5 text-mb-amber-700" />
|
| <div className="min-w-0 flex-1">
|
| {renameTarget === t.name ? (
|
| <div className="flex items-center gap-1">
|
| <input
|
| autoFocus
|
| title="New table name"
|
| placeholder="new_table_name"
|
| value={renameValue}
|
| onChange={(e) => setRenameValue(e.target.value)}
|
| onKeyDown={(e) => {
|
| if (e.key === "Enter") doRename(t.name, renameValue);
|
| else if (e.key === "Escape") setRenameTarget(null);
|
| }}
|
| className="min-w-0 flex-1 rounded-md border border-mb-amber-300 px-2 py-0.5 text-[13px] outline-none focus:border-mb-amber-500"
|
| />
|
| <button
|
| type="button"
|
| onClick={() => doRename(t.name, renameValue)}
|
| suppressHydrationWarning
|
| className="rounded-md p-1 text-emerald-600 hover:bg-emerald-50"
|
| title="Confirm"
|
| >
|
| <Check className="h-3.5 w-3.5" />
|
| </button>
|
| </div>
|
| ) : (
|
| <div className="flex items-center justify-between gap-2">
|
| <code className="truncate text-[13px] font-medium text-mb-ink">
|
| {t.name}
|
| </code>
|
| <span className="shrink-0 rounded-full bg-slate-100 px-2 py-0.5 text-[10px] text-slate-600">
|
| {t.rows == null ? "—" : t.rows.toLocaleString("en-IN")} rows
|
| </span>
|
| </div>
|
| )}
|
| {t.columns.length > 0 && renameTarget !== t.name && (
|
| <p className="mt-0.5 truncate text-[10px] text-mb-slate/55">
|
| {t.columns.slice(0, 8).join(", ")}
|
| {t.columns.length > 8 ? ` … +${t.columns.length - 8}` : ""}
|
| </p>
|
| )}
|
| </div>
|
| {renameTarget !== t.name && (
|
| <div className="flex shrink-0 items-center gap-0.5 opacity-0 group-hover:opacity-100 transition-opacity">
|
| <button
|
| type="button"
|
| onClick={() => {
|
| setRenameTarget(t.name);
|
| setRenameValue(t.name);
|
| }}
|
| suppressHydrationWarning
|
| disabled={busy != null}
|
| className="rounded-md p-1 text-mb-slate/60 hover:bg-mb-amber-100 hover:text-mb-amber-700 disabled:opacity-50"
|
| title="Rename"
|
| >
|
| <Pencil className="h-3.5 w-3.5" />
|
| </button>
|
| <button
|
| type="button"
|
| onClick={() => doDelete(t.name)}
|
| suppressHydrationWarning
|
| disabled={busy != null}
|
| className="rounded-md p-1 text-mb-slate/60 hover:bg-rose-50 hover:text-rose-600 disabled:opacity-50"
|
| title="Drop table"
|
| >
|
| {busy === `delete:${t.name}` ? (
|
| <Loader2 className="h-3.5 w-3.5 animate-spin" />
|
| ) : (
|
| <Trash2 className="h-3.5 w-3.5" />
|
| )}
|
| </button>
|
| </div>
|
| )}
|
| </li>
|
| ))}
|
| </ul>
|
| )}
|
| </div>
|
| </div>
|
|
|
| {/* Upload pane */}
|
| <div className="flex flex-col border-t border-mb-amber-100 md:border-l md:border-t-0">
|
| <div className="border-b border-mb-amber-100 bg-mb-paper/40 px-5 py-2 text-[11px] font-semibold uppercase tracking-wider text-mb-slate/60">
|
| Upload CSV
|
| </div>
|
| <div className="flex-1 overflow-y-auto p-5 space-y-4">
|
| <div>
|
| <label className="block text-[11px] font-medium text-mb-slate mb-1">
|
| Table name (optional)
|
| </label>
|
| <input
|
| value={tableNameOverride}
|
| onChange={(e) => setTableNameOverride(e.target.value)}
|
| placeholder="auto-derived from filename"
|
| className="w-full rounded-md border border-mb-amber-200 px-2.5 py-1.5 text-[13px] outline-none focus:border-mb-amber-500"
|
| />
|
| </div>
|
|
|
| <div>
|
| <label className="block text-[11px] font-medium text-mb-slate mb-1">
|
| Mode
|
| </label>
|
| <div className="flex rounded-md border border-mb-amber-200 p-0.5">
|
| {(["replace", "append"] as const).map((m) => (
|
| <button
|
| key={m}
|
| type="button"
|
| suppressHydrationWarning
|
| onClick={() => setUploadMode(m)}
|
| className={`flex-1 rounded px-3 py-1 text-[12px] font-medium transition ${
|
| uploadMode === m
|
| ? "bg-mb-amber-100 text-mb-amber-800"
|
| : "text-mb-slate/70 hover:bg-mb-paper"
|
| }`}
|
| >
|
| {m === "replace" ? "Replace" : "Append"}
|
| </button>
|
| ))}
|
| </div>
|
| <p className="mt-1 text-[10px] text-mb-slate/55">
|
| {uploadMode === "replace"
|
| ? "Drops existing table (if any) and creates a new one."
|
| : "Appends rows to the existing table (must already exist)."}
|
| </p>
|
| </div>
|
|
|
| <label
|
| onDragOver={(e) => {
|
| e.preventDefault();
|
| setDragOver(true);
|
| }}
|
| onDragLeave={() => setDragOver(false)}
|
| onDrop={(e) => {
|
| e.preventDefault();
|
| setDragOver(false);
|
| const f = e.dataTransfer.files?.[0];
|
| if (f) doUpload(f);
|
| }}
|
| className={`flex flex-col items-center justify-center gap-2 rounded-xl border-2 border-dashed px-4 py-8 text-center transition cursor-pointer ${
|
| dragOver
|
| ? "border-emerald-400 bg-emerald-50/50"
|
| : "border-mb-amber-200 hover:border-mb-amber-400 hover:bg-mb-amber-50/30"
|
| } ${busy?.startsWith("upload:") ? "pointer-events-none opacity-60" : ""}`}
|
| >
|
| <input
|
| ref={fileInputRef}
|
| type="file"
|
| accept=".csv,.tsv,text/csv"
|
| className="hidden"
|
| onChange={(e) => {
|
| const f = e.target.files?.[0];
|
| if (f) doUpload(f);
|
| }}
|
| />
|
| {busy?.startsWith("upload:") ? (
|
| <>
|
| <Loader2 className="h-6 w-6 animate-spin text-emerald-600" />
|
| <span className="text-[12px] text-mb-slate/70">Loading…</span>
|
| </>
|
| ) : (
|
| <>
|
| <Upload className="h-6 w-6 text-mb-amber-600" />
|
| <span className="text-[12px] font-medium text-mb-ink">
|
| Click or drag CSV here
|
| </span>
|
| <span className="text-[10px] text-mb-slate/55">
|
| Max 50MB · TSV also supported
|
| </span>
|
| </>
|
| )}
|
| </label>
|
|
|
| <div className="rounded-lg bg-sky-50/60 px-3 py-2 text-[11px] text-sky-800/80 leading-relaxed">
|
| Once you upload, the dashboard, chat suggestions, and query
|
| engine all see the new tables instantly — no restart needed.
|
| </div>
|
| </div>
|
| </div>
|
| </div>
|
| </motion.div>
|
| </motion.div>
|
| </AnimatePresence>
|
| );
|
| }
|
|
|
