@harbinger-ai/harbinger 0.1.2 → 0.1.3

package/lib/chat/components/settings-providers-page.js

@@ -0,0 +1,337 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useState, useEffect } from "react";
+import { motion, AnimatePresence } from "framer-motion";
+import { CpuIcon, CheckIcon, SpinnerIcon, EyeIcon, EyeOffIcon, XIcon } from "./icons.js";
+import {
+  getLlmProviders,
+  saveLlmProvider,
+  setActiveProvider,
+  testLlmConnection,
+  getActiveProvider
+} from "../actions.js";
+const PROVIDER_MODELS = {
+  anthropic: ["claude-sonnet-4-20250514", "claude-opus-4-20250514", "claude-haiku-4-5-20251001", "claude-3-5-sonnet-20241022"],
+  openai: ["gpt-4o", "gpt-4o-mini", "gpt-4-turbo", "o1", "o1-mini", "o3-mini"],
+  google: ["gemini-2.5-pro", "gemini-2.5-flash", "gemini-2.0-flash"],
+  custom: []
+};
+const PROVIDER_META = {
+  anthropic: { name: "Anthropic", keyPrefix: "sk-ant-", keyEnv: "ANTHROPIC_API_KEY" },
+  openai: { name: "OpenAI", keyPrefix: "sk-", keyEnv: "OPENAI_API_KEY" },
+  google: { name: "Google", keyPrefix: "AI", keyEnv: "GOOGLE_API_KEY" },
+  custom: { name: "Custom", keyPrefix: "", keyEnv: "CUSTOM_API_KEY" }
+};
+function ProviderCard({ provider, config, isActive, onEdit, index }) {
+  const meta = PROVIDER_META[provider];
+  const hasKey = !!config?.apiKey;
+  return /* @__PURE__ */ jsx(
+    motion.div,
+    {
+      initial: { opacity: 0, y: 8 },
+      animate: { opacity: 1, y: 0 },
+      transition: { duration: 0.25, delay: index * 0.05 },
+      className: `rounded-lg border bg-[--card] transition-all cursor-pointer hover:border-[--cyan]/20 ${isActive ? "border-[--cyan]/30 shadow-[0_0_15px_oklch(0.7_0.17_195/8%)]" : "border-white/[0.06]"}`,
+      onClick: onEdit,
+      children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 p-4", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 shrink-0", children: [
+          /* @__PURE__ */ jsx("div", { className: "w-2 h-2 rounded-full bg-[#ff5f57]" }),
+          /* @__PURE__ */ jsx("div", { className: "w-2 h-2 rounded-full bg-[#febc2e]" }),
+          /* @__PURE__ */ jsx("div", { className: "w-2 h-2 rounded-full bg-[#28c840]" })
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "shrink-0 rounded-md bg-[--cyan]/10 p-2", children: /* @__PURE__ */ jsx(CpuIcon, { size: 16, className: "text-[--cyan]" }) }),
+        /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
+          /* @__PURE__ */ jsx("p", { className: "text-sm font-mono font-medium", children: meta.name }),
+          config?.model && /* @__PURE__ */ jsx("p", { className: "text-[10px] font-mono text-muted-foreground mt-0.5 truncate", children: config.model })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 shrink-0", children: [
+          /* @__PURE__ */ jsx("div", { className: `w-2 h-2 rounded-full ${hasKey ? "bg-[--success]" : "bg-muted-foreground/40"}` }),
+          /* @__PURE__ */ jsx("span", { className: `text-[10px] font-mono ${hasKey ? "text-[--success]" : "text-muted-foreground"}`, children: hasKey ? "configured" : "no key" }),
+          isActive && /* @__PURE__ */ jsx("span", { className: "inline-flex items-center rounded-full bg-[--cyan]/10 text-[--cyan] border border-[--cyan]/20 px-2 py-0.5 text-[10px] font-mono font-medium", children: "active" })
+        ] })
+      ] })
+    }
+  );
+}
+function ProviderSetupForm({ provider, config, isActive, onSave, onSetActive, onClose }) {
+  const meta = PROVIDER_META[provider];
+  const models = PROVIDER_MODELS[provider];
+  const [apiKey, setApiKey] = useState(config?.apiKey || "");
+  const [model, setModel] = useState(config?.model || models[0] || "");
+  const [maxTokens, setMaxTokens] = useState(config?.maxTokens || 4096);
+  const [baseUrl, setBaseUrl] = useState(config?.baseUrl || "");
+  const [showKey, setShowKey] = useState(false);
+  const [saving, setSaving] = useState(false);
+  const [testing, setTesting] = useState(false);
+  const [testResult, setTestResult] = useState(null);
+  async function handleSave() {
+    setSaving(true);
+    try {
+      await onSave(provider, { apiKey, model, maxTokens: parseInt(maxTokens), baseUrl: baseUrl || void 0 });
+    } finally {
+      setSaving(false);
+    }
+  }
+  async function handleTest() {
+    setTesting(true);
+    setTestResult(null);
+    try {
+      const result = await testLlmConnection(provider);
+      setTestResult(result);
+    } catch (err) {
+      setTestResult({ error: err.message });
+    } finally {
+      setTesting(false);
+    }
+  }
+  async function handleSetActive() {
+    await onSetActive(provider, model);
+  }
+  const maskedKey = apiKey ? apiKey.slice(0, 8) + "\u2022".repeat(Math.max(0, apiKey.length - 12)) + apiKey.slice(-4) : "";
+  return /* @__PURE__ */ jsx(
+    motion.div,
+    {
+      initial: { opacity: 0, height: 0 },
+      animate: { opacity: 1, height: "auto" },
+      exit: { opacity: 0, height: 0 },
+      transition: { duration: 0.2 },
+      className: "overflow-hidden",
+      children: /* @__PURE__ */ jsxs("div", { className: "rounded-lg border border-[--cyan]/20 bg-[--card] p-5 mt-3", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between mb-4", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
+              /* @__PURE__ */ jsx("div", { className: "w-2 h-2 rounded-full bg-[#ff5f57]" }),
+              /* @__PURE__ */ jsx("div", { className: "w-2 h-2 rounded-full bg-[#febc2e]" }),
+              /* @__PURE__ */ jsx("div", { className: "w-2 h-2 rounded-full bg-[#28c840]" })
+            ] }),
+            /* @__PURE__ */ jsxs("span", { className: "font-mono text-[10px] font-medium text-[--cyan] uppercase tracking-wider", children: [
+              meta.name,
+              " Setup"
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx("button", { onClick: onClose, className: "text-muted-foreground hover:text-foreground transition-colors", children: /* @__PURE__ */ jsx(XIcon, { size: 14 }) })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4", children: [
+          /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx("label", { className: "block text-[10px] font-mono font-medium text-muted-foreground uppercase tracking-wider mb-1.5", children: "API Key" }),
+            /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
+              /* @__PURE__ */ jsxs("div", { className: "flex-1 relative", children: [
+                /* @__PURE__ */ jsx(
+                  "input",
+                  {
+                    type: showKey ? "text" : "password",
+                    value: apiKey,
+                    onChange: (e) => setApiKey(e.target.value),
+                    placeholder: meta.keyPrefix + "...",
+                    className: "w-full text-sm border border-white/[0.06] rounded-md px-3 py-2 bg-black/20 font-mono text-foreground/80 placeholder:text-muted-foreground/50 focus:outline-none focus:border-[--cyan]/40 focus:ring-1 focus:ring-[--cyan]/20 transition-colors"
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: () => setShowKey(!showKey),
+                    className: "absolute right-2.5 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground transition-colors",
+                    children: showKey ? /* @__PURE__ */ jsx(EyeOffIcon, { size: 14 }) : /* @__PURE__ */ jsx(EyeIcon, { size: 14 })
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  onClick: handleTest,
+                  disabled: testing || !apiKey,
+                  className: "inline-flex items-center gap-1.5 rounded-md px-3 py-2 text-xs font-mono font-medium border border-white/[0.06] hover:bg-white/[0.04] hover:border-[--cyan]/30 hover:text-[--cyan] transition-colors disabled:opacity-50",
+                  children: testing ? /* @__PURE__ */ jsx(SpinnerIcon, { size: 12 }) : "Test"
+                }
+              )
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx("label", { className: "block text-[10px] font-mono font-medium text-muted-foreground uppercase tracking-wider mb-1.5", children: "Model" }),
+            models.length > 0 ? /* @__PURE__ */ jsx(
+              "select",
+              {
+                value: model,
+                onChange: (e) => setModel(e.target.value),
+                className: "w-full text-sm border border-white/[0.06] rounded-md px-3 py-2 bg-black/20 font-mono text-foreground/80 focus:outline-none focus:border-[--cyan]/40 focus:ring-1 focus:ring-[--cyan]/20 transition-colors appearance-none",
+                children: models.map((m) => /* @__PURE__ */ jsx("option", { value: m, children: m }, m))
+              }
+            ) : /* @__PURE__ */ jsx(
+              "input",
+              {
+                type: "text",
+                value: model,
+                onChange: (e) => setModel(e.target.value),
+                placeholder: "model-name",
+                className: "w-full text-sm border border-white/[0.06] rounded-md px-3 py-2 bg-black/20 font-mono text-foreground/80 placeholder:text-muted-foreground/50 focus:outline-none focus:border-[--cyan]/40 focus:ring-1 focus:ring-[--cyan]/20 transition-colors"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx("label", { className: "block text-[10px] font-mono font-medium text-muted-foreground uppercase tracking-wider mb-1.5", children: "Max Tokens" }),
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                type: "number",
+                value: maxTokens,
+                onChange: (e) => setMaxTokens(e.target.value),
+                className: "w-32 text-sm border border-white/[0.06] rounded-md px-3 py-2 bg-black/20 font-mono text-foreground/80 focus:outline-none focus:border-[--cyan]/40 focus:ring-1 focus:ring-[--cyan]/20 transition-colors"
+              }
+            )
+          ] }),
+          provider === "custom" && /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx("label", { className: "block text-[10px] font-mono font-medium text-muted-foreground uppercase tracking-wider mb-1.5", children: "Base URL" }),
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                type: "text",
+                value: baseUrl,
+                onChange: (e) => setBaseUrl(e.target.value),
+                placeholder: "https://api.example.com/v1",
+                className: "w-full text-sm border border-white/[0.06] rounded-md px-3 py-2 bg-black/20 font-mono text-foreground/80 placeholder:text-muted-foreground/50 focus:outline-none focus:border-[--cyan]/40 focus:ring-1 focus:ring-[--cyan]/20 transition-colors"
+              }
+            )
+          ] }),
+          testResult && /* @__PURE__ */ jsxs("div", { className: "rounded-md border border-white/[0.04] bg-black/30 overflow-hidden", children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5 px-2.5 py-1.5 border-b border-white/[0.04]", children: [
+              /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
+                /* @__PURE__ */ jsx("div", { className: "w-2 h-2 rounded-full bg-[#ff5f57]" }),
+                /* @__PURE__ */ jsx("div", { className: "w-2 h-2 rounded-full bg-[#febc2e]" }),
+                /* @__PURE__ */ jsx("div", { className: "w-2 h-2 rounded-full bg-[#28c840]" })
+              ] }),
+              /* @__PURE__ */ jsx("span", { className: "font-mono text-[9px] text-muted-foreground ml-1", children: "connection test" }),
+              testResult.error ? /* @__PURE__ */ jsx(XIcon, { size: 10, className: "text-[--destructive] ml-auto" }) : /* @__PURE__ */ jsx(CheckIcon, { size: 10, className: "text-[--success] ml-auto" })
+            ] }),
+            /* @__PURE__ */ jsx("pre", { className: "text-[11px] p-2.5 font-mono overflow-auto max-h-24 whitespace-pre-wrap break-words text-foreground/80", children: testResult.error ? `Error: ${testResult.error}` : `Connected. Response: ${testResult.response || "OK"}` })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 pt-2", children: [
+            /* @__PURE__ */ jsxs(
+              "button",
+              {
+                onClick: handleSave,
+                disabled: saving || !apiKey,
+                className: "inline-flex items-center gap-1.5 rounded-md px-4 py-2 text-xs font-mono font-medium bg-[--cyan]/10 text-[--cyan] border border-[--cyan]/20 hover:bg-[--cyan] hover:text-[--primary-foreground] transition-colors disabled:opacity-50",
+                children: [
+                  saving ? /* @__PURE__ */ jsx(SpinnerIcon, { size: 12 }) : /* @__PURE__ */ jsx(CheckIcon, { size: 12 }),
+                  "Save"
+                ]
+              }
+            ),
+            !isActive && apiKey && /* @__PURE__ */ jsx(
+              "button",
+              {
+                onClick: handleSetActive,
+                className: "inline-flex items-center gap-1.5 rounded-md px-4 py-2 text-xs font-mono font-medium border border-white/[0.06] hover:bg-white/[0.04] hover:border-[--cyan]/30 hover:text-[--cyan] transition-colors",
+                children: "Set as Active"
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                onClick: onClose,
+                className: "inline-flex items-center gap-1.5 rounded-md px-4 py-2 text-xs font-mono font-medium border border-white/[0.06] hover:bg-white/[0.04] transition-colors text-muted-foreground",
+                children: "Cancel"
+              }
+            )
+          ] })
+        ] })
+      ] })
+    }
+  );
+}
+function StatsCard({ label, value, active }) {
+  return /* @__PURE__ */ jsxs("div", { className: `flex flex-col items-center justify-center p-4 rounded-lg border bg-[--card] ${active ? "border-[--cyan]/20" : "border-white/[0.06]"}`, children: [
+    /* @__PURE__ */ jsx("span", { className: `text-2xl font-semibold font-mono ${active ? "text-[--cyan]" : "text-foreground"}`, children: value }),
+    /* @__PURE__ */ jsx("span", { className: "font-mono text-[10px] text-muted-foreground uppercase tracking-wider mt-1", children: label })
+  ] });
+}
+function SettingsProvidersPage() {
+  const [loading, setLoading] = useState(true);
+  const [providers, setProviders] = useState({});
+  const [activeProviderInfo, setActiveProviderInfo] = useState(null);
+  const [editingProvider, setEditingProvider] = useState(null);
+  async function load() {
+    try {
+      const [provs, active] = await Promise.all([
+        getLlmProviders(),
+        getActiveProvider()
+      ]);
+      setProviders(provs || {});
+      setActiveProviderInfo(active || {});
+    } catch {
+    }
+    setLoading(false);
+  }
+  useEffect(() => {
+    load();
+  }, []);
+  async function handleSave(provider, config) {
+    await saveLlmProvider(provider, config);
+    await load();
+    setEditingProvider(null);
+  }
+  async function handleSetActive(provider, model) {
+    await setActiveProvider(provider, model);
+    await load();
+    setEditingProvider(null);
+  }
+  if (loading) {
+    return /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-3", children: [...Array(4)].map((_, i) => /* @__PURE__ */ jsx("div", { className: "h-16 animate-shimmer rounded-lg border border-white/[0.06] bg-[--card]" }, i)) });
+  }
+  const configuredCount = Object.values(providers).filter((p) => p?.apiKey).length;
+  const providerList = ["anthropic", "openai", "google", "custom"];
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    activeProviderInfo?.provider && /* @__PURE__ */ jsx("div", { className: "rounded-lg border border-[--cyan]/20 bg-[--cyan]/5 p-4 mb-6", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+      /* @__PURE__ */ jsx("div", { className: "shrink-0 rounded-md bg-[--cyan]/10 p-2", children: /* @__PURE__ */ jsx(CpuIcon, { size: 16, className: "text-[--cyan]" }) }),
+      /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsx("span", { className: "font-mono text-[10px] font-medium text-[--cyan] uppercase tracking-wider", children: "Active Provider" }),
+          /* @__PURE__ */ jsx("div", { className: "w-2 h-2 rounded-full bg-[--success] animate-pulse" })
+        ] }),
+        /* @__PURE__ */ jsxs("p", { className: "text-sm font-mono font-medium mt-0.5", children: [
+          PROVIDER_META[activeProviderInfo.provider]?.name || activeProviderInfo.provider,
+          activeProviderInfo.model && /* @__PURE__ */ jsxs("span", { className: "text-muted-foreground ml-2", children: [
+            "/ ",
+            activeProviderInfo.model
+          ] })
+        ] })
+      ] })
+    ] }) }),
+    /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-3 gap-3 mb-6", children: [
+      /* @__PURE__ */ jsx(StatsCard, { label: "Providers", value: providerList.length }),
+      /* @__PURE__ */ jsx(StatsCard, { label: "Configured", value: configuredCount }),
+      /* @__PURE__ */ jsx(StatsCard, { label: "Active", value: activeProviderInfo?.provider ? 1 : 0, active: true })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 pb-2 mb-4", children: [
+      /* @__PURE__ */ jsx("span", { className: "font-mono text-[10px] font-medium text-[--cyan] uppercase tracking-wider", children: "Configured Providers" }),
+      /* @__PURE__ */ jsx("span", { className: "inline-flex items-center rounded-full bg-[--cyan]/10 px-2 py-0.5 text-[10px] font-mono font-medium text-[--cyan]", children: configuredCount })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-3", children: providerList.map((p, i) => /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx(
+        ProviderCard,
+        {
+          provider: p,
+          config: providers[p],
+          isActive: activeProviderInfo?.provider === p,
+          onEdit: () => setEditingProvider(editingProvider === p ? null : p),
+          index: i
+        }
+      ),
+      /* @__PURE__ */ jsx(AnimatePresence, { children: editingProvider === p && /* @__PURE__ */ jsx(
+        ProviderSetupForm,
+        {
+          provider: p,
+          config: providers[p],
+          isActive: activeProviderInfo?.provider === p,
+          onSave: handleSave,
+          onSetActive: handleSetActive,
+          onClose: () => setEditingProvider(null)
+        }
+      ) })
+    ] }, p)) })
+  ] });
+}
+export {
+  SettingsProvidersPage
+};