chatbotlite 0.5.1 → 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,26 +1023,82 @@ function RequestPayment(props) {
     ] })
   ] });
 }
-var BOLT = "\u26A1";
 var DEFAULT_PRIMARY = "#0f172a";
 var DEFAULT_ON_PRIMARY = "#ffffff";
-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); } }
 @keyframes chatbotlite-fade-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
 @keyframes chatbotlite-dot { 0%, 60%, 100% { transform: translateY(0); opacity: 0.4; } 30% { transform: translateY(-4px); opacity: 1; } }
-@keyframes chatbotlite-cursor { 0%, 50% { opacity: 1; } 51%, 100% { opacity: 0; } }
+@keyframes chatbotlite-cursor { 0%, 50% { opacity: 1; } 51%, 100% { opacity: 0.2; } }
 @keyframes chatbotlite-pulse { 0%, 100% { box-shadow: 0 12px 28px -8px rgba(15,23,42,0.32), 0 4px 8px -2px rgba(15,23,42,0.12); } 50% { box-shadow: 0 14px 32px -8px rgba(15,23,42,0.36), 0 6px 12px -2px rgba(15,23,42,0.16); } }
 .chatbotlite-launcher { transition: transform 180ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 180ms cubic-bezier(0.4, 0, 0.2, 1); animation: chatbotlite-pop 320ms cubic-bezier(0.34, 1.56, 0.64, 1), chatbotlite-pulse 3.6s ease-in-out 1.2s 2; }
 .chatbotlite-launcher:hover { transform: translateY(-2px) scale(1.04); }
@@ -1040,10 +1108,12 @@ var KEYFRAMES = `
 .chatbotlite-send { transition: transform 120ms ease, opacity 120ms ease, box-shadow 120ms ease; }
 .chatbotlite-send:not(:disabled):hover { transform: translateY(-1px); }
 .chatbotlite-send:not(:disabled):active { transform: translateY(0); }
-.chatbotlite-input:focus { box-shadow: 0 0 0 3px rgba(15,23,42,0.06); }
+.chatbotlite-input:focus { box-shadow: none; outline: none; }
+.chatbotlite-composer { transition: background 120ms ease, box-shadow 120ms ease; }
+.chatbotlite-composer:focus-within { background: ${SURFACE}; box-shadow: 0 0 0 1px ${BORDER}, 0 1px 2px rgba(15,23,42,0.04); }
 .chatbotlite-msg { animation: chatbotlite-fade-in 220ms cubic-bezier(0.4, 0, 0.2, 1); }
 .chatbotlite-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: ${TEXT_FAINT}; margin-right: 4px; animation: chatbotlite-dot 1.2s ease-in-out infinite; }
-.chatbotlite-cursor { display: inline-block; width: 2px; height: 1em; background: currentColor; vertical-align: text-bottom; margin-left: 1px; animation: chatbotlite-cursor 1s steps(1) infinite; }
+.chatbotlite-cursor { display: inline-block; width: 0.5ch; vertical-align: text-bottom; margin-left: 1px; font-size: inherit; line-height: inherit; animation: chatbotlite-cursor 1s ease-in-out infinite; }
 .chatbotlite-icon-btn:hover:not(:disabled) { background: rgba(15,23,42,0.06) !important; opacity: 1 !important; }
 .chatbotlite-icon-btn:active:not(:disabled) { transform: scale(0.92); }
 .chatbotlite-dot:nth-child(2) { animation-delay: 0.15s; }
@@ -1055,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) {
@@ -1071,7 +1141,8 @@ function ChatWidget(props) {
   const resolvedTitle = title ?? "Chat";
   const resolvedGreeting = greeting ?? "Hi! How can we help?";
   const primary = themeOverrides?.primary ?? DEFAULT_PRIMARY;
-  const onPrimary = themeOverrides?.onPrimary ?? DEFAULT_ON_PRIMARY;
+  const primaryIsLight = luminance(primary) > 0.65;
+  const onPrimary = themeOverrides?.onPrimary ?? (primaryIsLight ? "#0f172a" : DEFAULT_ON_PRIMARY);
   const attachCfg = props.attach;
   const attachEnabled = attachCfg?.enabled === true;
   const acceptAttr = attachCfg?.accept?.join(",");
@@ -1207,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();
@@ -1309,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,
@@ -1332,15 +1411,24 @@ function ChatWidget(props) {
           alignItems: "center",
           justifyContent: "center"
         },
-        children: /* @__PURE__ */ jsxRuntime.jsx("span", { style: { filter: "drop-shadow(0 1px 2px rgba(0,0,0,0.2))" }, children: BOLT })
+        children: props.launcherIcon ? props.launcherIcon.startsWith("http") || props.launcherIcon.startsWith("/") ? /* @__PURE__ */ jsxRuntime.jsx("img", { src: props.launcherIcon, alt: "", style: { width: 28, height: 28, objectFit: "contain" } }) : /* @__PURE__ */ jsxRuntime.jsx("span", { style: { filter: "drop-shadow(0 1px 2px rgba(0,0,0,0.2))" }, children: props.launcherIcon }) : /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "26", height: "26", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M21 12a8 8 0 0 1-13.6 5.8L3 19l1.2-4.4A8 8 0 1 1 21 12z" }),
+          /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "9", cy: "12", r: "1", fill: "currentColor", stroke: "none" }),
+          /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "12", cy: "12", r: "1", fill: "currentColor", stroke: "none" }),
+          /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "15", cy: "12", r: "1", fill: "currentColor", stroke: "none" })
+        ] })
       }
     ),
     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,
@@ -1370,24 +1458,39 @@ function ChatWidget(props) {
             gap: 12,
             borderBottom: `1px solid ${BORDER_LIGHT}`
           }, children: [
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", alignItems: "center", gap: 10, minWidth: 0 }, children: [
-              /* @__PURE__ */ jsxRuntime.jsx("div", { style: {
-                width: 36,
-                height: 36,
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", alignItems: "center", gap: props.avatar ? 10 : 0, minWidth: 0 }, children: [
+              props.avatar === true && /* @__PURE__ */ jsxRuntime.jsx("div", { style: {
+                width: 32,
+                height: 32,
                 borderRadius: "50%",
                 background: primary,
                 color: onPrimary,
                 display: "flex",
                 alignItems: "center",
                 justifyContent: "center",
-                fontSize: 16,
+                fontSize: 14,
                 fontWeight: 600,
                 flexShrink: 0,
                 letterSpacing: "-0.02em"
               }, children: resolvedTitle.charAt(0).toUpperCase() }),
+              typeof props.avatar === "string" && /* @__PURE__ */ jsxRuntime.jsx(
+                "img",
+                {
+                  src: props.avatar,
+                  alt: "",
+                  style: {
+                    width: 32,
+                    height: 32,
+                    borderRadius: "50%",
+                    objectFit: "cover",
+                    flexShrink: 0,
+                    border: `1px solid ${BORDER}`
+                  }
+                }
+              ),
               /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", flexDirection: "column", lineHeight: 1.2, minWidth: 0 }, children: [
                 /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontWeight: 600, fontSize: 15, letterSpacing: "-0.01em", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", color: TEXT_BODY }, children: resolvedTitle }),
-                /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontSize: 12, color: TEXT_MUTED, marginTop: 2, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children: subtitle ?? (sending ? "typing\u2026" : "online") })
+                (subtitle || sending) && /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontSize: 12, color: TEXT_MUTED, marginTop: 2, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children: subtitle ?? (sending ? "typing\u2026" : "") })
               ] })
             ] }),
             /* @__PURE__ */ jsxRuntime.jsx(
@@ -1436,22 +1539,30 @@ function ChatWidget(props) {
                       className: "chatbotlite-msg",
                       style: {
                         alignSelf: m.role === "user" ? "flex-end" : "flex-start",
-                        maxWidth: "78%",
-                        padding: "8px 12px",
-                        borderRadius: 18,
+                        maxWidth: "82%",
+                        padding: "9px 13px",
+                        borderRadius: m.role === "user" ? "18px 18px 4px 18px" : "18px 18px 18px 4px",
                         background: m.role === "user" ? primary : BUBBLE_BOT,
                         color: m.role === "user" ? onPrimary : TEXT_BODY,
-                        border: "none",
-                        fontSize: 14.5,
-                        lineHeight: 1.4,
+                        border: m.role === "user" ? "none" : `1px solid ${BORDER}`,
+                        fontSize: 14,
+                        lineHeight: 1.5,
                         letterSpacing: "-0.005em",
                         whiteSpace: "pre-wrap",
                         wordBreak: "break-word",
-                        boxShadow: m.role === "user" ? "none" : "0 1px 0.5px rgba(15,23,42,0.05)"
+                        boxShadow: m.role === "user" ? "0 1px 2px rgba(15,23,42,0.12)" : "0 1px 2px rgba(15,23,42,0.04)"
                       },
                       children: [
                         m.content,
-                        sending && m.role === "assistant" && m === messages[messages.length - 1] && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "chatbotlite-cursor", "aria-hidden": "true" })
+                        sending && m.role === "assistant" && m === messages[messages.length - 1] && /* @__PURE__ */ jsxRuntime.jsx(
+                          "span",
+                          {
+                            className: "chatbotlite-cursor",
+                            style: { color: primary },
+                            "aria-hidden": "true",
+                            children: "\u258D"
+                          }
+                        )
                       ]
                     }
                   ),
@@ -1551,10 +1662,11 @@ function ChatWidget(props) {
                     className: "chatbotlite-msg",
                     style: {
                       alignSelf: "flex-start",
-                      padding: "10px 14px",
-                      borderRadius: 18,
+                      padding: "12px 14px",
+                      borderRadius: "18px 18px 18px 4px",
                       background: BUBBLE_BOT,
-                      boxShadow: "0 1px 0.5px rgba(15,23,42,0.05)"
+                      border: `1px solid ${BORDER}`,
+                      boxShadow: "0 1px 2px rgba(15,23,42,0.04)"
                     },
                     children: [
                       /* @__PURE__ */ jsxRuntime.jsx("span", { className: "chatbotlite-dot" }),
@@ -1587,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",
@@ -1607,159 +1719,169 @@ function ChatWidget(props) {
           /* @__PURE__ */ jsxRuntime.jsx("div", { style: {
             padding: "10px 12px 12px",
             background: SURFACE
-          }, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { style: {
-            display: "flex",
-            alignItems: "flex-end",
-            gap: 6,
-            padding: "6px 6px 6px 10px",
-            background: INPUT_BG,
-            borderRadius: 22,
-            transition: "background 120ms ease"
-          }, children: [
-            attachEnabled && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-              /* @__PURE__ */ jsxRuntime.jsx(
-                "input",
-                {
-                  ref: fileInputRef,
-                  type: "file",
-                  multiple: true,
-                  accept: acceptAttr,
-                  style: { display: "none" },
-                  onChange: (e) => {
-                    if (e.target.files) addFiles(e.target.files);
-                    e.target.value = "";
+          }, children: /* @__PURE__ */ jsxRuntime.jsxs(
+            "div",
+            {
+              className: "chatbotlite-composer",
+              style: {
+                display: "flex",
+                alignItems: "center",
+                gap: 4,
+                padding: "4px 4px 4px 8px",
+                background: INPUT_BG,
+                borderRadius: 999
+              },
+              children: [
+                attachEnabled && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    "input",
+                    {
+                      ref: fileInputRef,
+                      type: "file",
+                      multiple: true,
+                      accept: acceptAttr,
+                      style: { display: "none" },
+                      onChange: (e) => {
+                        if (e.target.files) addFiles(e.target.files);
+                        e.target.value = "";
+                      }
+                    }
+                  ),
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    "button",
+                    {
+                      className: "chatbotlite-icon-btn",
+                      onClick: () => fileInputRef.current?.click(),
+                      disabled: sending || files.length >= maxFiles,
+                      "aria-label": "Attach file",
+                      style: {
+                        width: 32,
+                        height: 32,
+                        borderRadius: "50%",
+                        background: "transparent",
+                        border: "none",
+                        cursor: sending || files.length >= maxFiles ? "default" : "pointer",
+                        opacity: sending || files.length >= maxFiles ? 0.35 : 0.75,
+                        color: TEXT_MUTED,
+                        lineHeight: 1,
+                        padding: 0,
+                        display: "flex",
+                        alignItems: "center",
+                        justifyContent: "center",
+                        flexShrink: 0,
+                        alignSelf: "center",
+                        transition: "opacity 120ms ease, background 120ms ease"
+                      },
+                      children: /* @__PURE__ */ jsxRuntime.jsx(IconPaperclip, { size: 18 })
+                    }
+                  )
+                ] }),
+                voiceEnabled && speechSupported && /* @__PURE__ */ jsxRuntime.jsx(
+                  "button",
+                  {
+                    className: "chatbotlite-icon-btn",
+                    onClick: toggleVoice,
+                    disabled: sending,
+                    "aria-label": voiceListening ? "Stop recording" : "Start voice input",
+                    style: {
+                      width: 32,
+                      height: 32,
+                      borderRadius: "50%",
+                      background: voiceListening ? primary : "transparent",
+                      color: voiceListening ? onPrimary : "inherit",
+                      border: "none",
+                      cursor: sending ? "default" : "pointer",
+                      opacity: sending ? 0.35 : voiceListening ? 1 : 0.75,
+                      lineHeight: 1,
+                      padding: 0,
+                      display: "flex",
+                      alignItems: "center",
+                      justifyContent: "center",
+                      flexShrink: 0,
+                      alignSelf: "center",
+                      transition: "opacity 120ms ease, background 120ms ease, color 120ms ease"
+                    },
+                    children: /* @__PURE__ */ jsxRuntime.jsx(IconMic, { size: 16 })
                   }
-                }
-              ),
-              /* @__PURE__ */ jsxRuntime.jsx(
-                "button",
-                {
-                  className: "chatbotlite-icon-btn",
-                  onClick: () => fileInputRef.current?.click(),
-                  disabled: sending || files.length >= maxFiles,
-                  "aria-label": "Attach file",
-                  style: {
-                    width: 32,
-                    height: 32,
-                    borderRadius: "50%",
-                    background: "transparent",
-                    border: "none",
-                    cursor: sending || files.length >= maxFiles ? "default" : "pointer",
-                    opacity: sending || files.length >= maxFiles ? 0.35 : 0.7,
-                    fontSize: 18,
-                    lineHeight: 1,
-                    padding: 0,
-                    display: "flex",
-                    alignItems: "center",
-                    justifyContent: "center",
-                    flexShrink: 0,
-                    alignSelf: "center",
-                    transition: "opacity 120ms ease, background 120ms ease"
-                  },
-                  children: "\u{1F4CE}"
-                }
-              )
-            ] }),
-            voiceEnabled && speechSupported && /* @__PURE__ */ jsxRuntime.jsx(
-              "button",
-              {
-                className: "chatbotlite-icon-btn",
-                onClick: toggleVoice,
-                disabled: sending,
-                "aria-label": voiceListening ? "Stop recording" : "Start voice input",
-                style: {
-                  width: 32,
-                  height: 32,
-                  borderRadius: "50%",
-                  background: voiceListening ? primary : "transparent",
-                  color: voiceListening ? onPrimary : "inherit",
-                  border: "none",
-                  cursor: sending ? "default" : "pointer",
-                  opacity: sending ? 0.35 : voiceListening ? 1 : 0.7,
-                  fontSize: 16,
-                  lineHeight: 1,
-                  padding: 0,
-                  display: "flex",
-                  alignItems: "center",
-                  justifyContent: "center",
-                  flexShrink: 0,
-                  alignSelf: "center",
-                  transition: "opacity 120ms ease, background 120ms ease, color 120ms ease"
-                },
-                children: "\u{1F399}\uFE0F"
-              }
-            ),
-            /* @__PURE__ */ jsxRuntime.jsx(
-              "textarea",
-              {
-                ref: inputRef,
-                className: "chatbotlite-input",
-                rows: 1,
-                value: input,
-                onChange: (e) => {
-                  setInput(e.target.value);
-                  const el = e.currentTarget;
-                  el.style.height = "auto";
-                  el.style.height = Math.min(el.scrollHeight, 100) + "px";
-                },
-                onKeyDown: (e) => {
-                  if (e.key === "Enter" && !e.shiftKey) {
-                    e.preventDefault();
-                    void send();
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "textarea",
+                  {
+                    ref: inputRef,
+                    className: "chatbotlite-input",
+                    rows: 1,
+                    value: input,
+                    onChange: (e) => {
+                      setInput(e.target.value);
+                      const el = e.currentTarget;
+                      el.style.height = "20px";
+                      if (el.scrollHeight > 28) {
+                        el.style.height = Math.min(el.scrollHeight, 100) + "px";
+                      }
+                    },
+                    onKeyDown: (e) => {
+                      if (e.key === "Enter" && !e.shiftKey) {
+                        e.preventDefault();
+                        void send();
+                      }
+                    },
+                    placeholder: "Message",
+                    disabled: sending,
+                    style: {
+                      flex: 1,
+                      padding: "4px 6px",
+                      margin: 0,
+                      border: "none",
+                      background: "transparent",
+                      fontSize: 14,
+                      fontFamily: FONT_STACK,
+                      color: TEXT_BODY,
+                      outline: "none",
+                      resize: "none",
+                      lineHeight: 1.4,
+                      height: 20,
+                      maxHeight: 100,
+                      boxSizing: "content-box",
+                      overflow: "hidden"
+                    }
                   }
-                },
-                placeholder: "Message",
-                disabled: sending,
-                style: {
-                  flex: 1,
-                  padding: "7px 4px",
-                  border: "none",
-                  background: "transparent",
-                  fontSize: 14.5,
-                  fontFamily: FONT_STACK,
-                  color: TEXT_BODY,
-                  outline: "none",
-                  resize: "none",
-                  lineHeight: 1.35,
-                  maxHeight: 100,
-                  minHeight: 20
-                }
-              }
-            ),
-            /* @__PURE__ */ jsxRuntime.jsx(
-              "button",
-              {
-                className: "chatbotlite-send",
-                onClick: () => void send(),
-                disabled: sending || !input.trim() && files.length === 0,
-                "aria-label": "Send message",
-                style: {
-                  width: 34,
-                  height: 34,
-                  borderRadius: "50%",
-                  background: primary,
-                  color: onPrimary,
-                  border: "none",
-                  fontSize: 14,
-                  fontWeight: 600,
-                  fontFamily: FONT_STACK,
-                  cursor: sending || !input.trim() && files.length === 0 ? "default" : "pointer",
-                  opacity: sending || !input.trim() && files.length === 0 ? 0.35 : 1,
-                  display: "flex",
-                  alignItems: "center",
-                  justifyContent: "center",
-                  flexShrink: 0,
-                  padding: 0,
-                  transition: "opacity 120ms ease, transform 80ms ease"
-                },
-                children: /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: [
-                  /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "12", y1: "19", x2: "12", y2: "5" }),
-                  /* @__PURE__ */ jsxRuntime.jsx("polyline", { points: "5 12 12 5 19 12" })
-                ] })
-              }
-            )
-          ] }) }),
-          showBranding && /* @__PURE__ */ jsxRuntime.jsxs(
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "button",
+                  {
+                    className: "chatbotlite-send",
+                    onClick: () => void send(),
+                    disabled: sending || !input.trim() && files.length === 0,
+                    "aria-label": "Send message",
+                    style: {
+                      width: 34,
+                      height: 34,
+                      borderRadius: "50%",
+                      background: primary,
+                      color: onPrimary,
+                      border: "none",
+                      fontSize: 14,
+                      fontWeight: 600,
+                      fontFamily: FONT_STACK,
+                      cursor: sending || !input.trim() && files.length === 0 ? "default" : "pointer",
+                      opacity: sending || !input.trim() && files.length === 0 ? 0.35 : 1,
+                      display: "flex",
+                      alignItems: "center",
+                      justifyContent: "center",
+                      flexShrink: 0,
+                      padding: 0,
+                      transition: "opacity 120ms ease, transform 80ms ease"
+                    },
+                    children: /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: [
+                      /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "12", y1: "19", x2: "12", y2: "5" }),
+                      /* @__PURE__ */ jsxRuntime.jsx("polyline", { points: "5 12 12 5 19 12" })
+                    ] })
+                  }
+                )
+              ]
+            }
+          ) }),
+          showBranding && /* @__PURE__ */ jsxRuntime.jsx(
             "a",
             {
               className: "chatbotlite-brand",
@@ -1778,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"
+              ] })
             }
           )
         ]