opencami 1.0.0

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

@@ -0,0 +1,568 @@
+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 "./menu-D6n4DB0U.js";
+import { Switch as Switch$1 } from "@base-ui/react/switch";
+import { c as cn, B as Button } from "./button-DtQ3rV1m.js";
+import { Tabs as Tabs$1 } from "@base-ui/react/tabs";
+import { u as useChatSettings } from "./index-COu2idHm.js";
+import { u as useLlmSettings } from "./_sessionKey-qlAPF_Ft.js";
+import "@base-ui/react/tooltip";
+import "@base-ui/react/dialog";
+import "@base-ui/react/menu";
+import "@base-ui/react/merge-props";
+import "@base-ui/react/use-render";
+import "class-variance-authority";
+import "clsx";
+import "tailwind-merge";
+import "shiki";
+import "zustand";
+import "zustand/middleware";
+import "@tanstack/react-router";
+import "@tanstack/react-query";
+import "motion/react";
+import "@base-ui/react/alert-dialog";
+import "@base-ui/react/collapsible";
+import "@base-ui/react/scroll-area";
+import "marked";
+import "react-markdown";
+import "remark-breaks";
+import "remark-gfm";
+import "react-dom";
+import "./router-DbxyvprK.js";
+import "node:crypto";
+import "ws";
+import "@tanstack/router-core/ssr/client";
+import "node:fs/promises";
+import "node:os";
+import "node:path";
+import "path";
+function Switch({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    Switch$1.Root,
+    {
+      className: cn(
+        "inline-flex h-[calc(var(--thumb-size)+2px)] w-[calc(var(--thumb-size)*2-2px)] shrink-0 items-center rounded-full p-px outline-none transition-[background-color,box-shadow] duration-200 [--thumb-size:--spacing(5)] focus-visible:ring-2 focus-visible:ring-primary-950 focus-visible:ring-offset-1 focus-visible:ring-offset-background data-checked:bg-primary-900 data-unchecked:bg-primary-200 data-disabled:opacity-64 sm:[--thumb-size:--spacing(4)]",
+        className
+      ),
+      "data-slot": "switch",
+      ...props,
+      children: /* @__PURE__ */ jsx(
+        Switch$1.Thumb,
+        {
+          className: cn(
+            "pointer-events-none block aspect-square h-full origin-left in-[[role=switch]:active,[data-slot=label]:active]:not-data-disabled:scale-x-110 in-[[role=switch]:active,[data-slot=label]:active]:rounded-[var(--thumb-size)/calc(var(--thumb-size)*1.1)] rounded-(--thumb-size) bg-primary-50 shadow-sm/5 will-change-transform [transition:translate_.15s,border-radius_.15s,scale_.1s_.1s,transform-origin_.15s] data-checked:origin-[var(--thumb-size)_50%] data-checked:translate-x-[calc(var(--thumb-size)-4px)]"
+          ),
+          "data-slot": "switch-thumb"
+        }
+      )
+    }
+  );
+}
+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;
+    }
+  });
+  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__ */ 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__ */ jsx(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__ */ 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
+};

package/dist/server/assets/start-HYkvq4Ni.js

@@ -0,0 +1,4 @@
+const startInstance = void 0;
+export {
+  startInstance
+};