chatbotlite 0.5.2 → 0.6.0

package/dist/react/index.cjs

@@ -5,6 +5,18 @@ var jsxRuntime = require('react/jsx-runtime');
 
 // src/react/ChatWidget.tsx
 
+// src/react/color.ts
+function luminance(hex) {
+  const m = hex.replace("#", "");
+  const norm = m.length === 3 ? m.split("").map((c) => c + c).join("") : m;
+  if (norm.length !== 6 || !/^[0-9a-fA-F]{6}$/.test(norm)) return 0;
+  const r = parseInt(norm.slice(0, 2), 16) / 255;
+  const g = parseInt(norm.slice(2, 4), 16) / 255;
+  const b = parseInt(norm.slice(4, 6), 16) / 255;
+  const toLinear = (c) => c <= 0.03928 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4);
+  return 0.2126 * toLinear(r) + 0.7152 * toLinear(g) + 0.0722 * toLinear(b);
+}
+
 // src/core/tools.ts
 var MARKER_RE = /\[SKILL:(\w+)((?:\s+\w+=(?:"[^"]*"|[\w./@*+,:-]+))*)\s*\]/g;
 var ARG_RE = /(\w+)=("([^"]*)"|([\w./@*+,:-]+))/g;
@@ -1011,30 +1023,76 @@ function RequestPayment(props) {
     ] })
   ] });
 }
-var BOLT = "\u26A1";
 var DEFAULT_PRIMARY = "#0f172a";
 var DEFAULT_ON_PRIMARY = "#ffffff";
-function luminance(hex) {
-  const m = hex.replace("#", "");
-  const norm = m.length === 3 ? m.split("").map((c) => c + c).join("") : m;
-  if (norm.length !== 6) return 0;
-  const r = parseInt(norm.slice(0, 2), 16) / 255;
-  const g = parseInt(norm.slice(2, 4), 16) / 255;
-  const b = parseInt(norm.slice(4, 6), 16) / 255;
-  const toLinear = (c) => c <= 0.03928 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4);
-  return 0.2126 * toLinear(r) + 0.7152 * toLinear(g) + 0.0722 * toLinear(b);
-}
-var SURFACE = "#ffffff";
-var CHAT_BG = "#f5f1eb";
-var BUBBLE_BOT = "#ffffff";
-var INPUT_BG = "#f1f3f5";
-var BORDER = "#e5e7eb";
-var BORDER_LIGHT = "rgba(15,23,42,0.06)";
-var TEXT_BODY = "#0f172a";
-var TEXT_MUTED = "#64748b";
-var TEXT_FAINT = "#94a3b8";
-var FONT_STACK = `-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif`;
+var IconPaperclip = ({ size = 18 }) => /* @__PURE__ */ jsxRuntime.jsx("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 1.75, strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M21.44 11.05l-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48" }) });
+var IconMic = ({ size = 16 }) => /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 1.75, strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [
+  /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "9", y: "3", width: "6", height: "12", rx: "3" }),
+  /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M5 11a7 7 0 0 0 14 0M12 19v3" })
+] });
+var IconBolt = ({ size = 11 }) => /* @__PURE__ */ jsxRuntime.jsx("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "currentColor", "aria-hidden": "true", style: { verticalAlign: "-1px" }, children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M13 2L4 14h7l-1 8 9-12h-7l1-8z" }) });
+var SURFACE = "var(--cbl-bg)";
+var CHAT_BG = "var(--cbl-bg-chat)";
+var BUBBLE_BOT = "var(--cbl-bg-elevated)";
+var INPUT_BG = "var(--cbl-bg-sunken)";
+var BORDER = "var(--cbl-border)";
+var BORDER_LIGHT = "var(--cbl-border-light)";
+var TEXT_BODY = "var(--cbl-text)";
+var TEXT_MUTED = "var(--cbl-text-muted)";
+var TEXT_FAINT = "var(--cbl-text-faint)";
+var FONT_STACK = "var(--cbl-font)";
 var STYLE_TAG_ID = "chatbotlite-widget-styles";
+var TOKENS = `
+:where(.chatbotlite-root) {
+  --cbl-bg: #FFFFFF;
+  --cbl-bg-elevated: #FFFFFF;
+  --cbl-bg-chat: #F7F8FA;
+  --cbl-bg-sunken: #F1F3F5;
+  --cbl-border: #E5E7EB;
+  --cbl-border-strong: #D1D5DB;
+  --cbl-border-light: rgba(15,23,42,0.06);
+  --cbl-text: #0F172A;
+  --cbl-text-muted: #64748B;
+  --cbl-text-faint: #94A3B8;
+  --cbl-success: #10B981;
+  --cbl-danger: #EF4444;
+  --cbl-font: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", system-ui, sans-serif;
+  --cbl-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
+  --cbl-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
+  --cbl-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
+  --cbl-shadow-1: 0 1px 2px rgba(15,23,42,0.04);
+  --cbl-shadow-2: 0 4px 12px rgba(15,23,42,0.06), 0 1px 2px rgba(15,23,42,0.04);
+  --cbl-shadow-3: 0 10px 32px rgba(15,23,42,0.10), 0 2px 6px rgba(15,23,42,0.04);
+  --cbl-shadow-4: 0 20px 48px rgba(15,23,42,0.18), 0 4px 12px rgba(15,23,42,0.08);
+}
+@media (prefers-color-scheme: dark) {
+  :where(.chatbotlite-root[data-color-scheme="auto"]),
+  :where(.chatbotlite-root[data-color-scheme="dark"]) {
+    --cbl-bg: #16181D;
+    --cbl-bg-elevated: #1F2228;
+    --cbl-bg-chat: #0B0D10;
+    --cbl-bg-sunken: #1F2228;
+    --cbl-border: #24272E;
+    --cbl-border-strong: #2E323A;
+    --cbl-border-light: rgba(255,255,255,0.06);
+    --cbl-text: #ECEDEE;
+    --cbl-text-muted: #9BA1A6;
+    --cbl-text-faint: #6B7177;
+  }
+}
+:where(.chatbotlite-root[data-color-scheme="light"]) {
+  --cbl-bg: #FFFFFF;
+  --cbl-bg-elevated: #FFFFFF;
+  --cbl-bg-chat: #F7F8FA;
+  --cbl-bg-sunken: #F1F3F5;
+  --cbl-border: #E5E7EB;
+  --cbl-border-strong: #D1D5DB;
+  --cbl-border-light: rgba(15,23,42,0.06);
+  --cbl-text: #0F172A;
+  --cbl-text-muted: #64748B;
+  --cbl-text-faint: #94A3B8;
+}
+`;
 var KEYFRAMES = `
 @keyframes chatbotlite-pop { 0% { opacity: 0; transform: scale(0.6); } 100% { opacity: 1; transform: scale(1); } }
 @keyframes chatbotlite-slide { 0% { opacity: 0; transform: translateY(16px) scale(0.98); } 100% { opacity: 1; transform: translateY(0) scale(1); } }
@@ -1067,7 +1125,7 @@ function ensureStyles() {
   if (document.getElementById(STYLE_TAG_ID)) return;
   const style = document.createElement("style");
   style.id = STYLE_TAG_ID;
-  style.textContent = KEYFRAMES;
+  style.textContent = TOKENS + KEYFRAMES;
   document.head.appendChild(style);
 }
 function ChatWidget(props) {
@@ -1220,7 +1278,12 @@ function ChatWidget(props) {
       body = JSON.stringify({ message: text, transcript: history, enabledTools });
     }
     const res = await fetch(props.endpoint, { method: "POST", headers, body });
-    if (!res.ok) throw new Error(`Endpoint ${res.status}: ${await res.text().catch(() => "")}`);
+    if (!res.ok) {
+      const raw = await res.text().catch(() => "");
+      const looksLikeHtml = /^\s*<(!doctype|html|head|body)/i.test(raw);
+      const snippet = looksLikeHtml ? "" : raw.slice(0, 120).replace(/\s+/g, " ").trim();
+      throw new Error(`Server returned ${res.status}${snippet ? ` \u2014 ${snippet}` : ""}`);
+    }
     const contentType = res.headers.get("Content-Type") ?? "";
     if (contentType.includes("text/event-stream") && res.body) {
       const reader = res.body.getReader();
@@ -1322,10 +1385,13 @@ function ChatWidget(props) {
     !open && /* @__PURE__ */ jsxRuntime.jsx(
       "button",
       {
-        className: "chatbotlite-launcher",
+        className: "chatbotlite-root chatbotlite-launcher",
+        "data-color-scheme": "auto",
         onClick: () => setOpen(true),
         "aria-label": "Open chat",
         style: {
+          ["--cbl-primary"]: primary,
+          ["--cbl-on-primary"]: onPrimary,
           position: "fixed",
           bottom: 20,
           ...launcherPos,
@@ -1356,9 +1422,13 @@ function ChatWidget(props) {
     open && /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
       {
+        className: "chatbotlite-root",
+        "data-color-scheme": "auto",
         role: "dialog",
         "aria-label": "Chat",
         style: {
+          ["--cbl-primary"]: primary,
+          ["--cbl-on-primary"]: onPrimary,
           position: "fixed",
           bottom: 20,
           ...panelPos,
@@ -1629,9 +1699,9 @@ function ChatWidget(props) {
                 maxWidth: 200
               },
               children: [
-                /* @__PURE__ */ jsxRuntime.jsxs("span", { style: { overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children: [
-                  "\u{1F4CE} ",
-                  f.name
+                /* @__PURE__ */ jsxRuntime.jsxs("span", { style: { display: "inline-flex", alignItems: "center", gap: 6, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", color: TEXT_MUTED }, children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(IconPaperclip, { size: 12 }),
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { style: { overflow: "hidden", textOverflow: "ellipsis", color: TEXT_BODY }, children: f.name })
                 ] }),
                 /* @__PURE__ */ jsxRuntime.jsx(
                   "button",
@@ -1691,8 +1761,8 @@ function ChatWidget(props) {
                         background: "transparent",
                         border: "none",
                         cursor: sending || files.length >= maxFiles ? "default" : "pointer",
-                        opacity: sending || files.length >= maxFiles ? 0.35 : 0.7,
-                        fontSize: 18,
+                        opacity: sending || files.length >= maxFiles ? 0.35 : 0.75,
+                        color: TEXT_MUTED,
                         lineHeight: 1,
                         padding: 0,
                         display: "flex",
@@ -1702,7 +1772,7 @@ function ChatWidget(props) {
                         alignSelf: "center",
                         transition: "opacity 120ms ease, background 120ms ease"
                       },
-                      children: "\u{1F4CE}"
+                      children: /* @__PURE__ */ jsxRuntime.jsx(IconPaperclip, { size: 18 })
                     }
                   )
                 ] }),
@@ -1721,8 +1791,7 @@ function ChatWidget(props) {
                       color: voiceListening ? onPrimary : "inherit",
                       border: "none",
                       cursor: sending ? "default" : "pointer",
-                      opacity: sending ? 0.35 : voiceListening ? 1 : 0.7,
-                      fontSize: 16,
+                      opacity: sending ? 0.35 : voiceListening ? 1 : 0.75,
                       lineHeight: 1,
                       padding: 0,
                       display: "flex",
@@ -1732,7 +1801,7 @@ function ChatWidget(props) {
                       alignSelf: "center",
                       transition: "opacity 120ms ease, background 120ms ease, color 120ms ease"
                     },
-                    children: "\u{1F399}\uFE0F"
+                    children: /* @__PURE__ */ jsxRuntime.jsx(IconMic, { size: 16 })
                   }
                 ),
                 /* @__PURE__ */ jsxRuntime.jsx(
@@ -1812,7 +1881,7 @@ function ChatWidget(props) {
               ]
             }
           ) }),
-          showBranding && /* @__PURE__ */ jsxRuntime.jsxs(
+          showBranding && /* @__PURE__ */ jsxRuntime.jsx(
             "a",
             {
               className: "chatbotlite-brand",
@@ -1831,10 +1900,10 @@ function ChatWidget(props) {
                 letterSpacing: "0.01em",
                 transition: "color 120ms ease"
               },
-              children: [
-                BOLT,
-                " Powered by chatbotlite"
-              ]
+              children: /* @__PURE__ */ jsxRuntime.jsxs("span", { style: { display: "inline-flex", alignItems: "center", gap: 5 }, children: [
+                /* @__PURE__ */ jsxRuntime.jsx(IconBolt, { size: 11 }),
+                "Powered by chatbotlite"
+              ] })
             }
           )
         ]