chatbotlite 0.5.2 → 0.6.1

package/dist/react/index.d.cts

@@ -95,6 +95,19 @@ interface ChatWidgetDirectProps extends ChatWidgetCommonProps {
     knowledge: Knowledge;
     /** Provider chain + API keys. */
     providers: ProviderConfig;
+    /**
+     * Append per-vertical behaviour tweaks to the default system prompt
+     * (tone, escalation rules, "don't quote price too early", etc.).
+     * Only used in direct (client-side) mode — in endpoint mode the server
+     * controls the prompt.
+     */
+    extraInstructions?: string;
+    /**
+     * Power-user hook to modify our default scaffolding inline.
+     * Receives the assembled default prompt, returns a transformed string.
+     * Direct mode only.
+     */
+    systemPromptTransform?: (defaultPrompt: string) => string;
     endpoint?: never;
 }
 interface ChatWidgetEndpointProps extends ChatWidgetCommonProps {

package/dist/react/index.d.ts

@@ -95,6 +95,19 @@ interface ChatWidgetDirectProps extends ChatWidgetCommonProps {
     knowledge: Knowledge;
     /** Provider chain + API keys. */
     providers: ProviderConfig;
+    /**
+     * Append per-vertical behaviour tweaks to the default system prompt
+     * (tone, escalation rules, "don't quote price too early", etc.).
+     * Only used in direct (client-side) mode — in endpoint mode the server
+     * controls the prompt.
+     */
+    extraInstructions?: string;
+    /**
+     * Power-user hook to modify our default scaffolding inline.
+     * Receives the assembled default prompt, returns a transformed string.
+     * Direct mode only.
+     */
+    systemPromptTransform?: (defaultPrompt: string) => string;
     endpoint?: never;
 }
 interface ChatWidgetEndpointProps extends ChatWidgetCommonProps {

package/dist/react/index.js

@@ -1,8 +1,20 @@
-import { useState, useRef, useEffect, useMemo } from 'react';
+import { useState, useEffect, useRef, useMemo } from 'react';
 import { jsxs, Fragment, jsx } from '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;
@@ -55,9 +67,11 @@ function buildToolsPromptAddendum(enabledTools) {
 }
 
 // src/core/prompts.ts
-function buildSystemPrompt(knowledge, enabledTools = []) {
-  const toolsAddendum = buildToolsPromptAddendum(enabledTools);
-  return [
+function buildSystemPrompt(knowledge, optionsOrEnabledTools = []) {
+  const opts = Array.isArray(optionsOrEnabledTools) ? { enabledTools: optionsOrEnabledTools } : optionsOrEnabledTools;
+  const toolsAddendum = buildToolsPromptAddendum(opts.enabledTools ?? []);
+  const extras = opts.extraInstructions?.trim();
+  const parts = [
     "You are an AI assistant on a business website. Use ONLY the knowledge below to answer.",
     "",
     "## Business knowledge",
@@ -69,9 +83,16 @@ function buildSystemPrompt(knowledge, enabledTools = []) {
     "- For anything not covered in the knowledge above, say the owner will follow up \u2014 do NOT guess.",
     '- If the caller is clearly a vendor/sales pitch, say: "This does not look like a customer service request, so we will not continue this thread."',
     `- If wrong number or asked to stop, say: "Sorry about that. We won't text again."`,
-    "- Match the caller's language automatically.",
-    toolsAddendum
-  ].filter(Boolean).join("\n");
+    "- Match the caller's language automatically."
+  ];
+  if (extras) {
+    parts.push("", "## Additional instructions", extras);
+  }
+  if (toolsAddendum) {
+    parts.push(toolsAddendum);
+  }
+  const defaultPrompt = parts.join("\n");
+  return opts.systemPromptTransform ? opts.systemPromptTransform(defaultPrompt) : defaultPrompt;
 }
 
 // src/core/guards.ts
@@ -195,6 +216,8 @@ var ChatBot = class {
   cachedSystemPrompt;
   guards;
   knowledge;
+  extraInstructions;
+  systemPromptTransform;
   constructor(init) {
     if (!init.knowledge || typeof init.knowledge !== "string" || init.knowledge.trim().length === 0) {
       throw new Error("chatbotlite: knowledge is required (a non-empty markdown string).");
@@ -204,14 +227,23 @@ var ChatBot = class {
     this.steps = resolveChain(init.providers);
     this.fetcher = init.options?.fetch ?? globalThis.fetch.bind(globalThis);
     this.timeoutMs = init.options?.timeoutMs ?? 3e4;
-    this.cachedSystemPrompt = buildSystemPrompt(init.knowledge);
+    this.extraInstructions = init.extraInstructions;
+    this.systemPromptTransform = init.systemPromptTransform;
+    this.cachedSystemPrompt = buildSystemPrompt(init.knowledge, {
+      extraInstructions: this.extraInstructions,
+      systemPromptTransform: this.systemPromptTransform
+    });
     this.guards = init.guards ?? {};
   }
   /** Build system prompt for given opts — uses cached if no enabledTools, else rebuilds. */
   resolveSystemPrompt(opts) {
     if (opts.systemPrompt) return opts.systemPrompt;
     if (opts.enabledTools && opts.enabledTools.length > 0) {
-      return buildSystemPrompt(this.knowledge, opts.enabledTools);
+      return buildSystemPrompt(this.knowledge, {
+        enabledTools: opts.enabledTools,
+        extraInstructions: this.extraInstructions,
+        systemPromptTransform: this.systemPromptTransform
+      });
     }
     return this.cachedSystemPrompt;
   }
@@ -881,7 +913,7 @@ function RequestPayment(props) {
     surface,
     textBody,
     textMuted,
-    showInterac = true,
+    showInterac = false,
     stripeLink,
     onPick,
     submitting = false,
@@ -997,8 +1029,12 @@ function RequestPayment(props) {
               display: "flex",
               alignItems: "center",
               justifyContent: "center",
-              flexShrink: 0
-            }, children: /* @__PURE__ */ jsx("span", { style: { color: "#635BFF", fontSize: 14, fontWeight: 700 }, children: "\u{1F4B3}" }) }),
+              flexShrink: 0,
+              color: "#635BFF"
+            }, children: /* @__PURE__ */ jsxs("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 1.75, strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [
+              /* @__PURE__ */ jsx("rect", { x: "2", y: "5", width: "20", height: "14", rx: "2.5" }),
+              /* @__PURE__ */ jsx("line", { x1: "2", y1: "10", x2: "22", y2: "10" })
+            ] }) }),
             /* @__PURE__ */ jsxs("div", { style: { flex: 1, minWidth: 0 }, children: [
               /* @__PURE__ */ jsx("p", { style: { margin: 0, fontSize: 13, fontWeight: 600, color: textBody }, children: "Pay by card" }),
               /* @__PURE__ */ jsx("p", { style: { margin: "2px 0 0", fontSize: 11, color: textMuted }, children: "Visa \xB7 Mastercard \xB7 Amex" })
@@ -1009,30 +1045,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__ */ 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__ */ 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__ */ 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__ */ jsx("rect", { x: "9", y: "3", width: "6", height: "12", rx: "3" }),
+  /* @__PURE__ */ jsx("path", { d: "M5 11a7 7 0 0 0 14 0M12 19v3" })
+] });
+var IconBolt = ({ size = 11 }) => /* @__PURE__ */ jsx("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "currentColor", "aria-hidden": "true", style: { verticalAlign: "-1px" }, children: /* @__PURE__ */ 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); } }
@@ -1065,7 +1147,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) {
@@ -1093,6 +1175,33 @@ function ChatWidget(props) {
   const voiceLang = voiceCfg?.lang ?? "en-US";
   const speechSupported = typeof window !== "undefined" && (Boolean(window.SpeechRecognition) || Boolean(window.webkitSpeechRecognition));
   const [open, setOpen] = useState(false);
+  const [expanded, setExpanded] = useState(() => {
+    if (typeof window === "undefined") return false;
+    try {
+      return window.localStorage.getItem("cbl-panel-size") === "expanded";
+    } catch {
+      return false;
+    }
+  });
+  const [isMobile, setIsMobile] = useState(
+    () => typeof window === "undefined" ? false : window.innerWidth < 640
+  );
+  useEffect(() => {
+    if (typeof window === "undefined") return;
+    const onResize = () => setIsMobile(window.innerWidth < 640);
+    window.addEventListener("resize", onResize);
+    return () => window.removeEventListener("resize", onResize);
+  }, []);
+  function toggleExpanded() {
+    setExpanded((prev) => {
+      const next = !prev;
+      try {
+        window.localStorage.setItem("cbl-panel-size", next ? "expanded" : "compact");
+      } catch {
+      }
+      return next;
+    });
+  }
   const [messages, setMessages] = useState([
     { id: "g0", role: "assistant", content: resolvedGreeting, ts: Date.now() }
   ]);
@@ -1185,11 +1294,17 @@ function ChatWidget(props) {
   useEffect(() => {
     ensureStyles();
   }, []);
+  const directProps = isEndpointMode ? null : props;
   const bot = useMemo(() => {
-    if (isEndpointMode) return null;
-    if (!props.knowledge || !props.providers) return null;
-    return new ChatBot({ knowledge: props.knowledge, providers: props.providers });
-  }, [isEndpointMode, props.knowledge, props.providers]);
+    if (!directProps) return null;
+    if (!directProps.knowledge || !directProps.providers) return null;
+    return new ChatBot({
+      knowledge: directProps.knowledge,
+      providers: directProps.providers,
+      ...directProps.extraInstructions ? { extraInstructions: directProps.extraInstructions } : {},
+      ...directProps.systemPromptTransform ? { systemPromptTransform: directProps.systemPromptTransform } : {}
+    });
+  }, [directProps]);
   useEffect(() => {
     if (scrollRef.current) {
       scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
@@ -1218,7 +1333,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();
@@ -1320,10 +1440,13 @@ function ChatWidget(props) {
     !open && /* @__PURE__ */ 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,
@@ -1354,16 +1477,20 @@ function ChatWidget(props) {
     open && /* @__PURE__ */ 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,
-          width: 380,
-          maxWidth: "calc(100vw - 40px)",
-          height: 580,
-          maxHeight: "calc(100vh - 40px)",
+          bottom: isMobile ? 0 : 20,
+          ...isMobile ? { left: 0, right: 0 } : panelPos,
+          width: isMobile ? "100vw" : expanded ? 720 : 380,
+          maxWidth: isMobile ? "100vw" : "calc(100vw - 40px)",
+          height: isMobile ? "100vh" : expanded ? 800 : 580,
+          maxHeight: isMobile ? "100vh" : "calc(100vh - 40px)",
           background: SURFACE,
           color: TEXT_BODY,
           borderRadius: 20,
@@ -1421,30 +1548,63 @@ function ChatWidget(props) {
                 (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(
-              "button",
-              {
-                className: "chatbotlite-close",
-                onClick: () => setOpen(false),
-                "aria-label": "Close chat",
-                style: {
-                  background: "transparent",
-                  border: "none",
-                  color: TEXT_MUTED,
-                  width: 32,
-                  height: 32,
-                  borderRadius: 10,
-                  fontSize: 22,
-                  lineHeight: 1,
-                  cursor: "pointer",
-                  display: "flex",
-                  alignItems: "center",
-                  justifyContent: "center",
-                  flexShrink: 0
-                },
-                children: "\xD7"
-              }
-            )
+            /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 2, flexShrink: 0 }, children: [
+              !isMobile && /* @__PURE__ */ jsx(
+                "button",
+                {
+                  className: "chatbotlite-resize",
+                  onClick: toggleExpanded,
+                  "aria-label": expanded ? "Compact view" : "Expand view",
+                  title: expanded ? "Compact view" : "Expand view",
+                  style: {
+                    background: "transparent",
+                    border: "none",
+                    color: TEXT_MUTED,
+                    width: 32,
+                    height: 32,
+                    borderRadius: 10,
+                    cursor: "pointer",
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "center"
+                  },
+                  children: expanded ? /* @__PURE__ */ jsxs("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 1.75, strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [
+                    /* @__PURE__ */ jsx("polyline", { points: "9 4 4 4 4 9" }),
+                    /* @__PURE__ */ jsx("polyline", { points: "15 4 20 4 20 9" }),
+                    /* @__PURE__ */ jsx("polyline", { points: "4 15 4 20 9 20" }),
+                    /* @__PURE__ */ jsx("polyline", { points: "20 15 20 20 15 20" })
+                  ] }) : /* @__PURE__ */ jsxs("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 1.75, strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [
+                    /* @__PURE__ */ jsx("polyline", { points: "3 9 3 3 9 3" }),
+                    /* @__PURE__ */ jsx("polyline", { points: "21 9 21 3 15 3" }),
+                    /* @__PURE__ */ jsx("polyline", { points: "3 15 3 21 9 21" }),
+                    /* @__PURE__ */ jsx("polyline", { points: "21 15 21 21 15 21" })
+                  ] })
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  className: "chatbotlite-close",
+                  onClick: () => setOpen(false),
+                  "aria-label": "Close chat",
+                  style: {
+                    background: "transparent",
+                    border: "none",
+                    color: TEXT_MUTED,
+                    width: 32,
+                    height: 32,
+                    borderRadius: 10,
+                    fontSize: 22,
+                    lineHeight: 1,
+                    cursor: "pointer",
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "center"
+                  },
+                  children: "\xD7"
+                }
+              )
+            ] })
           ] }),
           /* @__PURE__ */ jsxs(
             "div",
@@ -1627,9 +1787,9 @@ function ChatWidget(props) {
                 maxWidth: 200
               },
               children: [
-                /* @__PURE__ */ jsxs("span", { style: { overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children: [
-                  "\u{1F4CE} ",
-                  f.name
+                /* @__PURE__ */ jsxs("span", { style: { display: "inline-flex", alignItems: "center", gap: 6, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", color: TEXT_MUTED }, children: [
+                  /* @__PURE__ */ jsx(IconPaperclip, { size: 12 }),
+                  /* @__PURE__ */ jsx("span", { style: { overflow: "hidden", textOverflow: "ellipsis", color: TEXT_BODY }, children: f.name })
                 ] }),
                 /* @__PURE__ */ jsx(
                   "button",
@@ -1689,8 +1849,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",
@@ -1700,7 +1860,7 @@ function ChatWidget(props) {
                         alignSelf: "center",
                         transition: "opacity 120ms ease, background 120ms ease"
                       },
-                      children: "\u{1F4CE}"
+                      children: /* @__PURE__ */ jsx(IconPaperclip, { size: 18 })
                     }
                   )
                 ] }),
@@ -1719,8 +1879,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",
@@ -1730,7 +1889,7 @@ function ChatWidget(props) {
                       alignSelf: "center",
                       transition: "opacity 120ms ease, background 120ms ease, color 120ms ease"
                     },
-                    children: "\u{1F399}\uFE0F"
+                    children: /* @__PURE__ */ jsx(IconMic, { size: 16 })
                   }
                 ),
                 /* @__PURE__ */ jsx(
@@ -1810,7 +1969,7 @@ function ChatWidget(props) {
               ]
             }
           ) }),
-          showBranding && /* @__PURE__ */ jsxs(
+          showBranding && /* @__PURE__ */ jsx(
             "a",
             {
               className: "chatbotlite-brand",
@@ -1829,10 +1988,10 @@ function ChatWidget(props) {
                 letterSpacing: "0.01em",
                 transition: "color 120ms ease"
               },
-              children: [
-                BOLT,
-                " Powered by chatbotlite"
-              ]
+              children: /* @__PURE__ */ jsxs("span", { style: { display: "inline-flex", alignItems: "center", gap: 5 }, children: [
+                /* @__PURE__ */ jsx(IconBolt, { size: 11 }),
+                "Powered by chatbotlite"
+              ] })
             }
           )
         ]