+
+ );
+ }
+
+ if (doc.status === "processing" || processing === doc.id) {
+ return (
+
+
+ );
+ }
+
+ return (
+
+ );
+ };
+
+ if (!open) return null;
+
+ // ── Header title & back button logic ────────────────────────────────────────
+
+ const selectedDbInfo = dbTypeInfos.find((d) => d.db_type === selectedDbType);
+
+ const headerTitle =
+ view === "db-select"
+ ? "Connect Database"
+ : view === "db-credentials"
+ ? `Connect to ${selectedDbInfo?.display_name ?? selectedDbType}`
+ : "Knowledge Base";
+
+ const headerBack =
+ view === "db-select"
+ ? () => setView("main")
+ : view === "db-credentials"
+ ? () => setView("db-select")
+ : null;
+
+ // ── Render ───────────────────────────────────────────────────────────────────
+
+ return (
+
+
+
+ {/* Header */}
+
+
+
+ {/* Content */}
+
+ {headerBack ? (
+
+ ) : (
+
+
+
+
+ )}
+ {headerTitle}
+
+
+ {/* ── VIEW: main ── */}
+ {view === "main" && (
+
+
+ {/* Upload zone */}
+
+
+ {uploadError && (
+
+ )}
+
+ {/* ── VIEW: db-select ── */}
+ {view === "db-select" && (
+ + {uploadError} +
+ )} + + {/* Connect DB row */} + + + {/* Database connections list */} + {dbClients.length > 0 && ( +
+
+ )}
+
+ {/* Documents list */}
+
+
+ Databases · {dbClients.length}
+
+
+
+ {dbClients.map((client) => (
+
+
+
+ ))}
+
+ 
+
+
+
+ {client.name}
+{client.db_type} · {client.status}
+
+
+
+
+
+
+
+
+ Documents · {documents.length}
+
+ {documents.length > 0 && (
+
+ )}
+
+
+ {loadingDocs ? (
+
+
+ ) : docsError ? (
+ {docsError}
+ ) : documents.length === 0 ? ( +
+
+ ) : (
+
+
+ No documents yet
+Upload files to get started
+
+ {documents.map((doc) => (
+
+ )}
+
+
+ ))}
+
+
+
+
+ + {doc.filename} +
++ {formatFileSize(doc.file_size)} · {formatDate(doc.created_at)} +
+
+ {renderStatus(doc)}
+
+
+
+
+ )}
+
+ {/* ── VIEW: db-credentials ── */}
+ {view === "db-credentials" && (
+ + Choose a database to connect to your knowledge base. +
+ {loadingDbTypes ? ( +
+
+ ) : (
+
+ {dbTypeInfos.map((info) => {
+ const active = info.status === "active";
+ return (
+
+ );
+ })}
+
+ )}
+
+
+ {/* Selected DB chip */}
+ {selectedDbInfo && (
+
+ 
+ {selectedDbInfo.display_name}
+
+ )}
+
+
+ {/* Connection Name */}
+
+
+ setConnectionName(e.target.value)}
+ className="w-full border border-slate-200 rounded-lg px-3 py-2 text-sm bg-white focus:outline-none focus:ring-2 focus:ring-[#FF8F00]/25 focus:border-[#FF8F00] placeholder:text-slate-300 transition"
+ />
+
+
+ {/* Dynamic fields from API */}
+ {selectedDbInfo?.fields.map((field) => (
+
+
+
+ {field.type === "select" ? (
+
+ ) : field.type === "boolean" ? (
+
+ setDbForm((f) => ({ ...f, [field.name]: e.target.checked }))}
+ className="w-4 h-4 accent-[#FF8F00]"
+ />
+
+
+ ) : field.name === "service_account_json" ? (
+