chatbotlite 0.6.2 → 0.6.3

package/dist/react/index.js

@@ -1058,7 +1058,6 @@ 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)";
@@ -1078,6 +1077,9 @@ var TOKENS = `
   --cbl-text-faint: #94A3B8;
   --cbl-success: #10B981;
   --cbl-danger: #EF4444;
+  /* Soft tint of primary brand color \u2014 used for header background, avatar bg fallback.
+     12% mix keeps chrome neutral but lets the panel feel branded on colored vertical pages. */
+  --cbl-primary-soft: color-mix(in oklab, var(--cbl-primary, #0F172A) 10%, white);
   --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);
@@ -1505,26 +1507,25 @@ function ChatWidget(props) {
         children: [
           /* @__PURE__ */ jsxs("header", { style: {
             padding: "14px 16px",
-            background: SURFACE,
-            color: TEXT_BODY,
+            background: primary,
+            color: onPrimary,
             display: "flex",
             justifyContent: "space-between",
             alignItems: "center",
-            gap: 12,
-            borderBottom: `1px solid ${BORDER_LIGHT}`
+            gap: 12
           }, children: [
             /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: props.avatar ? 10 : 0, minWidth: 0 }, children: [
               props.avatar === true && /* @__PURE__ */ jsx("div", { style: {
                 width: 32,
                 height: 32,
                 borderRadius: "50%",
-                background: primary,
-                color: onPrimary,
+                background: onPrimary,
+                color: primary,
                 display: "flex",
                 alignItems: "center",
                 justifyContent: "center",
                 fontSize: 14,
-                fontWeight: 600,
+                fontWeight: 700,
                 flexShrink: 0,
                 letterSpacing: "-0.02em"
               }, children: resolvedTitle.charAt(0).toUpperCase() }),
@@ -1539,13 +1540,13 @@ function ChatWidget(props) {
                     borderRadius: "50%",
                     objectFit: "cover",
                     flexShrink: 0,
-                    border: `1px solid ${BORDER}`
+                    border: `1px solid rgba(255,255,255,0.25)`
                   }
                 }
               ),
               /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", lineHeight: 1.2, minWidth: 0 }, children: [
-                /* @__PURE__ */ jsx("span", { style: { fontWeight: 600, fontSize: 15, letterSpacing: "-0.01em", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", color: TEXT_BODY }, children: resolvedTitle }),
-                (subtitle || sending) && /* @__PURE__ */ jsx("span", { style: { fontSize: 12, color: TEXT_MUTED, marginTop: 2, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children: subtitle ?? (sending ? "typing\u2026" : "") })
+                /* @__PURE__ */ jsx("span", { style: { fontWeight: 600, fontSize: 15, letterSpacing: "-0.01em", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", color: onPrimary }, children: resolvedTitle }),
+                (subtitle || sending) && /* @__PURE__ */ jsx("span", { style: { fontSize: 12, color: onPrimary, opacity: 0.75, marginTop: 2, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children: subtitle ?? (sending ? "typing\u2026" : "") })
               ] })
             ] }),
             /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 2, flexShrink: 0 }, children: [
@@ -1559,7 +1560,8 @@ function ChatWidget(props) {
                   style: {
                     background: "transparent",
                     border: "none",
-                    color: TEXT_MUTED,
+                    color: onPrimary,
+                    opacity: 0.85,
                     width: 32,
                     height: 32,
                     borderRadius: 10,
@@ -1590,7 +1592,8 @@ function ChatWidget(props) {
                   style: {
                     background: "transparent",
                     border: "none",
-                    color: TEXT_MUTED,
+                    color: onPrimary,
+                    opacity: 0.85,
                     width: 32,
                     height: 32,
                     borderRadius: 10,
@@ -1973,7 +1976,7 @@ function ChatWidget(props) {
             "a",
             {
               className: "chatbotlite-brand",
-              href: "https://github.com/agents-io/chatbotlite",
+              href: "https://chatbotlite-demos.vercel.app",
               target: "_blank",
               rel: "noreferrer",
               style: {
@@ -1990,7 +1993,7 @@ function ChatWidget(props) {
               },
               children: /* @__PURE__ */ jsxs("span", { style: { display: "inline-flex", alignItems: "center", gap: 5 }, children: [
                 /* @__PURE__ */ jsx(IconBolt, { size: 11 }),
-                "Powered by chatbotlite"
+                "Powered by ChatbotLite"
               ] })
             }
           )