opencami 1.2.0 → 1.3.1

package/dist/server/assets/settings-dialog-BBQcU55J.js

@@ -1,731 +0,0 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import { useState, useEffect } from "react";
-import { HugeiconsIcon } from "@hugeicons/react";
-import { Cancel01Icon, ComputerIcon, Sun01Icon, Moon01Icon, Leaf01Icon, Loading02Icon, Tick01Icon, Cancel02Icon } from "@hugeicons/core-free-icons";
-import { D as DialogRoot, a as DialogContent, b as DialogTitle, c as DialogDescription, d as DialogClose } from "./use-file-explorer-state-DMHdtb7D.js";
-import { S as Switch } from "./switch-DnX0MjGS.js";
-import { Tabs as Tabs$1 } from "@base-ui/react/tabs";
-import { c as cn, B as Button } from "./button-DtQ3rV1m.js";
-import { a as useChatSettings } from "./index-CmbNTqa2.js";
-import { u as useLlmSettings } from "./_sessionKey-DQwkBUS7.js";
-import "@base-ui/react/dialog";
-import "@base-ui/react/menu";
-import "zustand";
-import "@base-ui/react/switch";
-import "@base-ui/react/merge-props";
-import "@base-ui/react/use-render";
-import "class-variance-authority";
-import "clsx";
-import "tailwind-merge";
-import "shiki/core";
-import "shiki/engine/javascript";
-import "@shikijs/themes/vitesse-dark";
-import "@shikijs/themes/vitesse-light";
-import "@shikijs/langs/bash";
-import "@shikijs/langs/c";
-import "@shikijs/langs/cpp";
-import "@shikijs/langs/csharp";
-import "@shikijs/langs/css";
-import "@shikijs/langs/diff";
-import "@shikijs/langs/dockerfile";
-import "@shikijs/langs/go";
-import "@shikijs/langs/graphql";
-import "@shikijs/langs/html";
-import "@shikijs/langs/java";
-import "@shikijs/langs/javascript";
-import "@shikijs/langs/json";
-import "@shikijs/langs/jsx";
-import "@shikijs/langs/kotlin";
-import "@shikijs/langs/markdown";
-import "@shikijs/langs/php";
-import "@shikijs/langs/python";
-import "@shikijs/langs/regexp";
-import "@shikijs/langs/ruby";
-import "@shikijs/langs/rust";
-import "@shikijs/langs/shell";
-import "@shikijs/langs/sql";
-import "@shikijs/langs/swift";
-import "@shikijs/langs/toml";
-import "@shikijs/langs/typescript";
-import "@shikijs/langs/tsx";
-import "@shikijs/langs/xml";
-import "@shikijs/langs/yaml";
-import "zustand/middleware";
-import "@tanstack/react-router";
-import "@tanstack/react-query";
-import "./tooltip-gbV6rEVv.js";
-import "@base-ui/react/tooltip";
-import "motion/react";
-import "@base-ui/react/alert-dialog";
-import "@base-ui/react/collapsible";
-import "@base-ui/react/scroll-area";
-import "./opencami-logo-C-43FL3R.js";
-import "marked";
-import "react-markdown";
-import "remark-breaks";
-import "remark-gfm";
-import "react-dom";
-import "./router-5qObg5aX.js";
-import "node:crypto";
-import "ws";
-import "node:fs";
-import "node:path";
-import "node:os";
-import "@tanstack/router-core/ssr/client";
-import "node:fs/promises";
-import "path";
-function Tabs({ className, ...props }) {
-  return /* @__PURE__ */ jsx(
-    Tabs$1.Root,
-    {
-      className: cn(
-        "flex flex-col gap-2 data-[orientation=vertical]:flex-row",
-        className
-      ),
-      "data-slot": "tabs",
-      ...props
-    }
-  );
-}
-function TabsList({
-  variant = "default",
-  className,
-  children,
-  ...props
-}) {
-  return /* @__PURE__ */ jsxs(
-    Tabs$1.List,
-    {
-      className: cn(
-        "relative z-0 flex w-fit items-center justify-center gap-x-0.5 text-primary-600",
-        "data-[orientation=vertical]:flex-col",
-        variant === "default" ? "p-0.5 text-primary-600/80" : "data-[orientation=vertical]:px-1 data-[orientation=horizontal]:py-1",
-        className
-      ),
-      "data-slot": "tabs-list",
-      ...props,
-      children: [
-        children,
-        /* @__PURE__ */ jsx(
-          Tabs$1.Indicator,
-          {
-            className: cn(
-              "-translate-y-(--active-tab-bottom) absolute bottom-0 left-0 h-(--active-tab-height) w-(--active-tab-width) translate-x-(--active-tab-left) transition-[width,translate] duration-200 ease-in-out",
-              variant === "underline" ? "data-[orientation=vertical]:-translate-x-px z-10 bg-primary-900 data-[orientation=horizontal]:h-0.5 data-[orientation=vertical]:w-0.5 data-[orientation=horizontal]:translate-y-px" : "z-0 rounded-md bg-primary-200"
-            ),
-            "data-slot": "tab-indicator"
-          }
-        )
-      ]
-    }
-  );
-}
-function TabsTab({ className, ...props }) {
-  return /* @__PURE__ */ jsx(
-    Tabs$1.Tab,
-    {
-      className: cn(
-        '[&_svg]:-mx-0.5 relative z-10 flex h-8 shrink-0 grow cursor-pointer items-center justify-center gap-1.5 whitespace-nowrap rounded-md px-3 text-sm font-medium outline-none transition-[color,background-color,box-shadow] hover:text-primary-900 focus-visible:ring-2 focus-visible:ring-primary-400 data-disabled:pointer-events-none data-[orientation=vertical]:w-full data-[orientation=vertical]:justify-start data-active:text-primary-900 data-disabled:opacity-64 [&_svg:not([class*="size-"])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0',
-        className
-      ),
-      "data-slot": "tabs-tab",
-      ...props
-    }
-  );
-}
-function SettingsSection({ title, children }) {
-  return /* @__PURE__ */ jsxs("div", { className: "border-b border-primary-200 py-4 last:border-0", children: [
-    /* @__PURE__ */ jsx("h3", { className: "mb-3 text-sm font-medium text-primary-900", children: title }),
-    /* @__PURE__ */ jsx("div", { className: "space-y-3", children })
-  ] });
-}
-function SettingsRow({ label, description, children }) {
-  return /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
-    /* @__PURE__ */ jsxs("div", { className: "flex-1 select-none", children: [
-      /* @__PURE__ */ jsx("div", { className: "text-sm text-primary-800", children: label }),
-      description && /* @__PURE__ */ jsx("div", { className: "text-xs text-primary-500", children: description })
-    ] }),
-    /* @__PURE__ */ jsx("div", { className: "flex items-center gap-2", children })
-  ] });
-}
-const textSizeOptions = [
-  { value: "14px", label: "S" },
-  { value: "16px", label: "M" },
-  { value: "18px", label: "L" },
-  { value: "20px", label: "XL" }
-];
-function isTextSizeValue(value) {
-  return textSizeOptions.some((option) => option.value === value);
-}
-function SettingsDialog({
-  open,
-  onOpenChange,
-  onClose
-}) {
-  const { settings, updateSettings } = useChatSettings();
-  const {
-    settings: llmSettings,
-    updateSettings: updateLlmSettings,
-    status: llmStatus,
-    testApiKey
-  } = useLlmSettings();
-  const [apiKeyInput, setApiKeyInput] = useState(llmSettings.openaiApiKey);
-  const [testingKey, setTestingKey] = useState(false);
-  const [testResult, setTestResult] = useState(null);
-  const [textSize, setTextSize] = useState(() => {
-    if (typeof window === "undefined") return "16px";
-    try {
-      const stored = localStorage.getItem("opencami-text-size");
-      if (stored && isTextSizeValue(stored)) return stored;
-    } catch {
-    }
-    return "16px";
-  });
-  const [ttsEnabled, setTtsEnabled] = useState(() => {
-    if (typeof window === "undefined") return true;
-    try {
-      const stored = localStorage.getItem("opencami-tts-enabled");
-      return stored === null ? true : stored === "true";
-    } catch {
-      return true;
-    }
-  });
-  const [ttsProvider, setTtsProvider] = useState(() => {
-    if (typeof window === "undefined") return "auto";
-    try {
-      return localStorage.getItem("opencami-tts-provider") || "auto";
-    } catch {
-      return "auto";
-    }
-  });
-  const [ttsVoice, setTtsVoice] = useState(() => {
-    if (typeof window === "undefined") return "nova";
-    try {
-      return localStorage.getItem("opencami-tts-voice") || "nova";
-    } catch {
-      return "nova";
-    }
-  });
-  const [sttProvider, setSttProvider] = useState(() => {
-    if (typeof window === "undefined") return "auto";
-    try {
-      return localStorage.getItem("opencami-stt-provider") || "auto";
-    } catch {
-      return "auto";
-    }
-  });
-  const handleTtsProviderChange = (value) => {
-    setTtsProvider(value);
-    try {
-      localStorage.setItem("opencami-tts-provider", value);
-    } catch {
-    }
-  };
-  const handleTtsVoiceChange = (value) => {
-    setTtsVoice(value);
-    try {
-      localStorage.setItem("opencami-tts-voice", value);
-    } catch {
-    }
-  };
-  const handleSttProviderChange = (value) => {
-    setSttProvider(value);
-    try {
-      localStorage.setItem("opencami-stt-provider", value);
-    } catch {
-    }
-  };
-  function applyTextSize(value) {
-    if (typeof document === "undefined") return;
-    document.documentElement.style.setProperty("--opencami-text-size", value);
-  }
-  const handleTextSizeChange = (value) => {
-    if (!isTextSizeValue(value)) return;
-    setTextSize(value);
-    applyTextSize(value);
-    try {
-      localStorage.setItem("opencami-text-size", value);
-    } catch {
-    }
-  };
-  const handleTtsToggle = (checked) => {
-    setTtsEnabled(checked);
-    try {
-      localStorage.setItem("opencami-tts-enabled", String(checked));
-    } catch {
-    }
-    window.dispatchEvent(new StorageEvent("storage", {
-      key: "opencami-tts-enabled",
-      newValue: String(checked)
-    }));
-  };
-  const [personasAvailable, setPersonasAvailable] = useState(false);
-  const [personasEnabled, setPersonasEnabled] = useState(() => {
-    if (typeof window === "undefined") return true;
-    try {
-      const stored = localStorage.getItem("opencami-personas-enabled");
-      return stored === null ? true : stored === "true";
-    } catch {
-      return true;
-    }
-  });
-  useEffect(() => {
-    let mounted = true;
-    async function checkPersonas() {
-      try {
-        const res = await fetch("/api/personas");
-        if (!res.ok) return;
-        const data = await res.json();
-        if (mounted && data.ok) {
-          setPersonasAvailable(data.available);
-        }
-      } catch {
-      }
-    }
-    checkPersonas();
-    return () => {
-      mounted = false;
-    };
-  }, []);
-  const handlePersonasToggle = (checked) => {
-    setPersonasEnabled(checked);
-    try {
-      localStorage.setItem("opencami-personas-enabled", String(checked));
-    } catch {
-    }
-    window.dispatchEvent(new StorageEvent("storage", {
-      key: "opencami-personas-enabled",
-      newValue: String(checked)
-    }));
-  };
-  const handleTestApiKey = async () => {
-    if (!apiKeyInput.trim()) return;
-    setTestingKey(true);
-    setTestResult(null);
-    try {
-      const result = await testApiKey(apiKeyInput.trim());
-      setTestResult(result);
-      if (result.valid) {
-        updateLlmSettings({ openaiApiKey: apiKeyInput.trim() });
-      }
-    } finally {
-      setTestingKey(false);
-    }
-  };
-  const handleSaveApiKey = () => {
-    updateLlmSettings({ openaiApiKey: apiKeyInput.trim() });
-    setTestResult(null);
-  };
-  const handleClearApiKey = () => {
-    setApiKeyInput("");
-    updateLlmSettings({ openaiApiKey: "" });
-    setTestResult(null);
-  };
-  const themeOptions = [
-    { value: "system", label: "System", icon: ComputerIcon },
-    { value: "light", label: "Light", icon: Sun01Icon },
-    { value: "dark", label: "Dark", icon: Moon01Icon },
-    { value: "chameleon", label: "Chameleon", icon: Leaf01Icon }
-  ];
-  function applyTheme(theme) {
-    if (typeof document === "undefined") return;
-    const root = document.documentElement;
-    const media = window.matchMedia("(prefers-color-scheme: dark)");
-    root.classList.remove("light", "dark", "system", "chameleon");
-    root.classList.add(theme);
-    if (theme === "system" && media.matches) {
-      root.classList.add("dark");
-    }
-  }
-  return /* @__PURE__ */ jsx(DialogRoot, { open, onOpenChange, children: /* @__PURE__ */ jsx(DialogContent, { className: "w-[min(480px,92vw)] max-h-[80vh] overflow-auto", children: /* @__PURE__ */ jsxs("div", { className: "p-4", children: [
-    /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between", children: [
-      /* @__PURE__ */ jsxs("div", { children: [
-        /* @__PURE__ */ jsx(DialogTitle, { className: "mb-1", children: "Settings" }),
-        /* @__PURE__ */ jsx(DialogDescription, { className: "hidden", children: "Configure OpenCami" })
-      ] }),
-      /* @__PURE__ */ jsx(
-        DialogClose,
-        {
-          render: /* @__PURE__ */ jsx(
-            Button,
-            {
-              size: "icon-sm",
-              variant: "ghost",
-              className: "text-primary-500 hover:bg-primary-100 hover:text-primary-700",
-              "aria-label": "Close",
-              children: /* @__PURE__ */ jsx(
-                HugeiconsIcon,
-                {
-                  icon: Cancel01Icon,
-                  size: 20,
-                  strokeWidth: 1.5
-                }
-              )
-            }
-          )
-        }
-      )
-    ] }),
-    /* @__PURE__ */ jsx(SettingsSection, { title: "Connection", children: /* @__PURE__ */ jsx(SettingsRow, { label: "Status", children: /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-1.5 text-sm text-green-600", children: [
-      /* @__PURE__ */ jsx("span", { className: "size-2 rounded-full bg-green-500" }),
-      "Connected"
-    ] }) }) }),
-    /* @__PURE__ */ jsxs(SettingsSection, { title: "Appearance", children: [
-      /* @__PURE__ */ jsx(SettingsRow, { label: "Theme", children: /* @__PURE__ */ jsx(
-        Tabs,
-        {
-          value: settings.theme,
-          onValueChange: (value) => {
-            const theme = value;
-            applyTheme(theme);
-            updateSettings({ theme });
-          },
-          children: /* @__PURE__ */ jsx(
-            TabsList,
-            {
-              variant: "default",
-              className: "gap-2 *:data-[slot=tab-indicator]:duration-0",
-              children: themeOptions.map((option) => /* @__PURE__ */ jsxs(TabsTab, { value: option.value, children: [
-                /* @__PURE__ */ jsx(
-                  HugeiconsIcon,
-                  {
-                    icon: option.icon,
-                    size: 20,
-                    strokeWidth: 1.5
-                  }
-                ),
-                /* @__PURE__ */ jsx("span", { children: option.label })
-              ] }, option.value))
-            }
-          )
-        }
-      ) }),
-      /* @__PURE__ */ jsx(
-        SettingsRow,
-        {
-          label: "Text Size",
-          description: "Adjust chat and composer text",
-          children: /* @__PURE__ */ jsx(Tabs, { value: textSize, onValueChange: handleTextSizeChange, children: /* @__PURE__ */ jsx(
-            TabsList,
-            {
-              variant: "default",
-              className: "gap-2 *:data-[slot=tab-indicator]:duration-0",
-              children: textSizeOptions.map((option) => /* @__PURE__ */ jsx(TabsTab, { value: option.value, children: /* @__PURE__ */ jsx("span", { className: "tabular-nums text-xs", children: option.label }) }, option.value))
-            }
-          ) })
-        }
-      )
-    ] }),
-    /* @__PURE__ */ jsxs(SettingsSection, { title: "Chat", children: [
-      /* @__PURE__ */ jsx(SettingsRow, { label: "Show tool messages", children: /* @__PURE__ */ jsx(
-        Switch,
-        {
-          checked: settings.showToolMessages,
-          onCheckedChange: (checked) => updateSettings({ showToolMessages: checked })
-        }
-      ) }),
-      /* @__PURE__ */ jsx(SettingsRow, { label: "Show reasoning blocks", children: /* @__PURE__ */ jsx(
-        Switch,
-        {
-          checked: settings.showReasoningBlocks,
-          onCheckedChange: (checked) => updateSettings({ showReasoningBlocks: checked })
-        }
-      ) }),
-      /* @__PURE__ */ jsx(SettingsRow, { label: "Show search sources", children: /* @__PURE__ */ jsx(
-        Switch,
-        {
-          checked: settings.showSearchSources,
-          onCheckedChange: (checked) => updateSettings({ showSearchSources: checked })
-        }
-      ) }),
-      /* @__PURE__ */ jsx(
-        SettingsRow,
-        {
-          label: "Agent Manager (Beta)",
-          description: "Show Agent Manager in sidebar for creating and managing agents",
-          children: /* @__PURE__ */ jsx(
-            Switch,
-            {
-              checked: (() => {
-                try {
-                  return localStorage.getItem("opencami-agent-manager") === "true";
-                } catch {
-                  return false;
-                }
-              })(),
-              onCheckedChange: (checked) => {
-                localStorage.setItem("opencami-agent-manager", String(checked));
-                window.location.reload();
-              }
-            }
-          )
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        SettingsRow,
-        {
-          label: "Inline File Preview",
-          description: "Make file paths in messages clickable to preview file contents",
-          children: /* @__PURE__ */ jsx(
-            Switch,
-            {
-              checked: settings.inlineFilePreview,
-              onCheckedChange: (checked) => updateSettings({ inlineFilePreview: checked })
-            }
-          )
-        }
-      )
-    ] }),
-    /* @__PURE__ */ jsxs(SettingsSection, { title: "Personas", children: [
-      personasAvailable ? /* @__PURE__ */ jsx(
-        SettingsRow,
-        {
-          label: "Persona Picker",
-          description: "Show persona picker in chat (20 personalities)",
-          children: /* @__PURE__ */ jsx(
-            Switch,
-            {
-              checked: personasEnabled,
-              onCheckedChange: handlePersonasToggle
-            }
-          )
-        }
-      ) : /* @__PURE__ */ jsx(
-        SettingsRow,
-        {
-          label: "Persona Picker",
-          description: "Install the Personas skill to unlock 20 AI personalities",
-          children: /* @__PURE__ */ jsx(Switch, { checked: false, disabled: true })
-        }
-      ),
-      !personasAvailable && /* @__PURE__ */ jsx("div", { className: "pt-1", children: /* @__PURE__ */ jsx(
-        "a",
-        {
-          href: "https://www.clawhub.ai/robbyczgw-cla/personas",
-          target: "_blank",
-          rel: "noopener noreferrer",
-          className: "text-xs text-primary-600 hover:text-primary-900 hover:underline",
-          children: "Get it on ClawHub →"
-        }
-      ) })
-    ] }),
-    /* @__PURE__ */ jsxs(SettingsSection, { title: "Text-to-Speech", children: [
-      /* @__PURE__ */ jsx(
-        SettingsRow,
-        {
-          label: "Voice Playback",
-          description: "Add a 🔊 button to AI messages for text-to-speech",
-          children: /* @__PURE__ */ jsx(
-            Switch,
-            {
-              checked: ttsEnabled,
-              onCheckedChange: handleTtsToggle
-            }
-          )
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        SettingsRow,
-        {
-          label: "TTS Provider",
-          description: "Choose which service generates speech",
-          children: /* @__PURE__ */ jsxs(
-            "select",
-            {
-              value: ttsProvider,
-              onChange: (e) => handleTtsProviderChange(e.target.value),
-              className: "rounded-md border border-primary-200 bg-surface px-2 py-1 text-sm focus:outline-none focus:ring-2 focus:ring-primary-500",
-              children: [
-                /* @__PURE__ */ jsx("option", { value: "auto", children: "Auto" }),
-                /* @__PURE__ */ jsx("option", { value: "elevenlabs", children: "ElevenLabs" }),
-                /* @__PURE__ */ jsx("option", { value: "openai", children: "OpenAI" }),
-                /* @__PURE__ */ jsx("option", { value: "edge", children: "Edge TTS (free)" })
-              ]
-            }
-          )
-        }
-      ),
-      ttsProvider === "openai" && /* @__PURE__ */ jsx(
-        SettingsRow,
-        {
-          label: "Voice",
-          description: "OpenAI voice selection",
-          children: /* @__PURE__ */ jsx(
-            "select",
-            {
-              value: ttsVoice,
-              onChange: (e) => handleTtsVoiceChange(e.target.value),
-              className: "rounded-md border border-primary-200 bg-surface px-2 py-1 text-sm focus:outline-none focus:ring-2 focus:ring-primary-500",
-              children: ["alloy", "echo", "fable", "onyx", "nova", "shimmer"].map((v) => /* @__PURE__ */ jsx("option", { value: v, children: v.charAt(0).toUpperCase() + v.slice(1) }, v))
-            }
-          )
-        }
-      )
-    ] }),
-    /* @__PURE__ */ jsx(SettingsSection, { title: "Speech-to-Text", children: /* @__PURE__ */ jsx(
-      SettingsRow,
-      {
-        label: "STT Provider",
-        description: "Choose which service transcribes your voice",
-        children: /* @__PURE__ */ jsxs(
-          "select",
-          {
-            value: sttProvider,
-            onChange: (e) => handleSttProviderChange(e.target.value),
-            className: "rounded-md border border-primary-200 bg-surface px-2 py-1 text-sm focus:outline-none focus:ring-2 focus:ring-primary-500",
-            children: [
-              /* @__PURE__ */ jsx("option", { value: "auto", children: "Auto" }),
-              /* @__PURE__ */ jsx("option", { value: "elevenlabs", children: "ElevenLabs" }),
-              /* @__PURE__ */ jsx("option", { value: "openai", children: "OpenAI" }),
-              /* @__PURE__ */ jsx("option", { value: "browser", children: "Browser (free)" })
-            ]
-          }
-        )
-      }
-    ) }),
-    /* @__PURE__ */ jsxs(SettingsSection, { title: "LLM Features", children: [
-      /* @__PURE__ */ jsxs("div", { className: "text-xs text-primary-500 mb-3", children: [
-        "Enhance session titles and follow-up suggestions using OpenAI API.",
-        llmStatus.hasEnvKey && /* @__PURE__ */ jsx("span", { className: "block mt-1 text-green-600", children: "✓ Server has OPENAI_API_KEY configured" })
-      ] }),
-      /* @__PURE__ */ jsx(
-        SettingsRow,
-        {
-          label: "Smart session titles",
-          description: "Generate concise titles using AI",
-          children: /* @__PURE__ */ jsx(
-            Switch,
-            {
-              checked: llmSettings.useLlmTitles,
-              onCheckedChange: (checked) => updateLlmSettings({ useLlmTitles: checked }),
-              disabled: !llmStatus.isAvailable
-            }
-          )
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        SettingsRow,
-        {
-          label: "Smart follow-up suggestions",
-          description: "AI-generated contextual follow-ups",
-          children: /* @__PURE__ */ jsx(
-            Switch,
-            {
-              checked: llmSettings.useLlmFollowUps,
-              onCheckedChange: (checked) => updateLlmSettings({ useLlmFollowUps: checked }),
-              disabled: !llmStatus.isAvailable
-            }
-          )
-        }
-      ),
-      /* @__PURE__ */ jsxs("div", { className: "mt-4 pt-3 border-t border-primary-100", children: [
-        /* @__PURE__ */ jsx("div", { className: "text-sm text-primary-800 mb-2", children: "OpenAI API Key" }),
-        /* @__PURE__ */ jsx("div", { className: "text-xs text-primary-500 mb-2", children: llmStatus.hasEnvKey ? "Optional: Override server key with your own" : "Required for LLM features (stored locally)" }),
-        /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
-          /* @__PURE__ */ jsx(
-            "input",
-            {
-              type: "password",
-              value: apiKeyInput,
-              onChange: (e) => {
-                setApiKeyInput(e.target.value);
-                setTestResult(null);
-              },
-              placeholder: "sk-...",
-              className: "flex-1 px-3 py-1.5 text-sm rounded-md border border-primary-200 bg-surface focus:outline-none focus:ring-2 focus:ring-primary-500"
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            Button,
-            {
-              size: "sm",
-              variant: "outline",
-              onClick: handleTestApiKey,
-              disabled: !apiKeyInput.trim() || testingKey,
-              className: "min-w-[60px]",
-              children: testingKey ? /* @__PURE__ */ jsx(
-                HugeiconsIcon,
-                {
-                  icon: Loading02Icon,
-                  size: 16,
-                  className: "animate-spin"
-                }
-              ) : "Test"
-            }
-          )
-        ] }),
-        testResult && /* @__PURE__ */ jsxs(
-          "div",
-          {
-            className: `mt-2 flex items-center gap-1.5 text-xs ${testResult.valid ? "text-green-600" : "text-red-600"}`,
-            children: [
-              /* @__PURE__ */ jsx(
-                HugeiconsIcon,
-                {
-                  icon: testResult.valid ? Tick01Icon : Cancel02Icon,
-                  size: 14
-                }
-              ),
-              testResult.valid ? "API key is valid" : testResult.error || "Invalid API key"
-            ]
-          }
-        ),
-        llmSettings.openaiApiKey && /* @__PURE__ */ jsxs("div", { className: "mt-2 flex items-center justify-between", children: [
-          /* @__PURE__ */ jsxs("span", { className: "text-xs text-green-600 flex items-center gap-1", children: [
-            /* @__PURE__ */ jsx(HugeiconsIcon, { icon: Tick01Icon, size: 14 }),
-            "Key saved"
-          ] }),
-          /* @__PURE__ */ jsx(
-            Button,
-            {
-              size: "sm",
-              variant: "ghost",
-              onClick: handleClearApiKey,
-              className: "text-xs text-red-600 hover:text-red-700 hover:bg-red-50",
-              children: "Clear"
-            }
-          )
-        ] }),
-        apiKeyInput && apiKeyInput !== llmSettings.openaiApiKey && !testResult?.valid && /* @__PURE__ */ jsx(
-          Button,
-          {
-            size: "sm",
-            variant: "outline",
-            onClick: handleSaveApiKey,
-            className: "mt-2 w-full",
-            children: "Save without testing"
-          }
-        )
-      ] })
-    ] }),
-    /* @__PURE__ */ jsxs(SettingsSection, { title: "About", children: [
-      /* @__PURE__ */ jsx("div", { className: "text-sm text-primary-800", children: "OpenCami" }),
-      /* @__PURE__ */ jsxs("div", { className: "flex gap-4 pt-2", children: [
-        /* @__PURE__ */ jsx(
-          "a",
-          {
-            href: "https://github.com/robbyczgw-cla/opencami",
-            target: "_blank",
-            rel: "noopener noreferrer",
-            className: "text-sm text-primary-600 hover:text-primary-900 hover:underline",
-            children: "GitHub"
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "a",
-          {
-            href: "https://docs.openclaw.ai",
-            target: "_blank",
-            rel: "noopener noreferrer",
-            className: "text-sm text-primary-600 hover:text-primary-900 hover:underline",
-            children: "OpenClaw docs"
-          }
-        )
-      ] })
-    ] }),
-    /* @__PURE__ */ jsx("div", { className: "mt-6 flex justify-end", children: /* @__PURE__ */ jsx(DialogClose, { onClick: onClose, children: "Close" }) })
-  ] }) }) });
-}
-export {
-  SettingsDialog
-};