chatbotlite 0.4.0 → 0.5.1

package/dist/react/index.js

@@ -3,8 +3,60 @@ import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 
 // src/react/ChatWidget.tsx
 
+// src/core/tools.ts
+var MARKER_RE = /\[SKILL:(\w+)((?:\s+\w+=(?:"[^"]*"|[\w./@*+,:-]+))*)\s*\]/g;
+var ARG_RE = /(\w+)=("([^"]*)"|([\w./@*+,:-]+))/g;
+function coerce(value) {
+  if (value === "true") return true;
+  if (value === "false") return false;
+  if (/^-?\d+(?:\.\d+)?$/.test(value)) return Number(value);
+  return value;
+}
+function parseToolMarkers(text) {
+  const markers = [];
+  let m;
+  MARKER_RE.lastIndex = 0;
+  while ((m = MARKER_RE.exec(text)) !== null) {
+    const name = m[1];
+    const argsRaw = m[2] ?? "";
+    const args = {};
+    let a;
+    ARG_RE.lastIndex = 0;
+    while ((a = ARG_RE.exec(argsRaw)) !== null) {
+      const key = a[1];
+      const value = a[3] ?? a[4] ?? "";
+      args[key] = coerce(value);
+    }
+    markers.push({ name, args, raw: m[0] });
+  }
+  return markers;
+}
+function stripToolMarkers(text) {
+  return text.replace(MARKER_RE, "").replace(/\s+\n/g, "\n").trim();
+}
+function buildToolsPromptAddendum(enabledTools) {
+  if (enabledTools.length === 0) return "";
+  const examples = {
+    uploadForReview: '[SKILL:uploadForReview purpose="T4 slip" accept="image/*,application/pdf" maxMb=10] \u2014 collect a document for human review (bytes go to webhook, you never see content)',
+    scheduleCallback: '[SKILL:scheduleCallback durationMin=15 timezone="America/Vancouver"] \u2014 let the user pick a callback time slot',
+    requestPayment: '[SKILL:requestPayment amount=4250 currency="cad" reason="initial deposit"] \u2014 collect payment via inline card'
+  };
+  const lines = enabledTools.filter((t) => examples[t]).map((t) => `- ${examples[t]}`);
+  if (lines.length === 0) return "";
+  return [
+    "",
+    "## Available tools",
+    "When you need one of these workflows, emit the marker INLINE in your reply.",
+    "Write a short message first, THEN the marker. The marker will be replaced by an interactive card.",
+    "Pause the conversation after emitting \u2014 wait for the tool result before continuing.",
+    "",
+    ...lines
+  ].join("\n");
+}
+
 // src/core/prompts.ts
-function buildSystemPrompt(knowledge) {
+function buildSystemPrompt(knowledge, enabledTools = []) {
+  const toolsAddendum = buildToolsPromptAddendum(enabledTools);
   return [
     "You are an AI assistant on a business website. Use ONLY the knowledge below to answer.",
     "",
@@ -17,8 +69,9 @@ function buildSystemPrompt(knowledge) {
     "- 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."
-  ].join("\n");
+    "- Match the caller's language automatically.",
+    toolsAddendum
+  ].filter(Boolean).join("\n");
 }
 
 // src/core/guards.ts
@@ -141,10 +194,12 @@ var ChatBot = class {
   timeoutMs;
   cachedSystemPrompt;
   guards;
+  knowledge;
   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).");
     }
+    this.knowledge = init.knowledge;
     this.keys = init.providers.keys ?? {};
     this.steps = resolveChain(init.providers);
     this.fetcher = init.options?.fetch ?? globalThis.fetch.bind(globalThis);
@@ -152,6 +207,14 @@ var ChatBot = class {
     this.cachedSystemPrompt = buildSystemPrompt(init.knowledge);
     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 this.cachedSystemPrompt;
+  }
   /** Run an LLM judge against content. Fail-open on errors. */
   async judge(config, content) {
     const endpoint = PROVIDER_ENDPOINTS[config.provider];
@@ -188,7 +251,7 @@ var ChatBot = class {
    *   event: error   data: {"message":"...","attempts":[...]}
    */
   async replyStream(message, opts = {}) {
-    const systemPrompt = opts.systemPrompt ?? this.cachedSystemPrompt;
+    const systemPrompt = this.resolveSystemPrompt(opts);
     const messages = [
       { role: "system", content: systemPrompt },
       ...opts.history ?? [],
@@ -301,7 +364,7 @@ data: ${data}
       return this.reply(message, opts);
     }
     const dataUrls = await Promise.all(images.map(fileToDataUrl));
-    const systemPrompt = opts.systemPrompt ?? this.cachedSystemPrompt;
+    const systemPrompt = this.resolveSystemPrompt(opts);
     const userContent = [];
     if (message) userContent.push({ type: "text", text: message });
     for (const url of dataUrls) userContent.push({ type: "image_url", image_url: { url } });
@@ -381,7 +444,7 @@ data: ${data}
         };
       }
     }
-    const systemPrompt = opts.systemPrompt ?? this.cachedSystemPrompt;
+    const systemPrompt = this.resolveSystemPrompt(opts);
     const messages = [
       { role: "system", content: systemPrompt },
       ...opts.history ?? [],
@@ -494,38 +557,6 @@ function normalizeChainEntry(entry, keys) {
   }
   return { provider, model, label: `${provider}/${model}` };
 }
-
-// src/core/tools.ts
-var MARKER_RE = /\[SKILL:(\w+)((?:\s+\w+=(?:"[^"]*"|[\w./@*+,:-]+))*)\s*\]/g;
-var ARG_RE = /(\w+)=("([^"]*)"|([\w./@*+,:-]+))/g;
-function coerce(value) {
-  if (value === "true") return true;
-  if (value === "false") return false;
-  if (/^-?\d+(?:\.\d+)?$/.test(value)) return Number(value);
-  return value;
-}
-function parseToolMarkers(text) {
-  const markers = [];
-  let m;
-  MARKER_RE.lastIndex = 0;
-  while ((m = MARKER_RE.exec(text)) !== null) {
-    const name = m[1];
-    const argsRaw = m[2] ?? "";
-    const args = {};
-    let a;
-    ARG_RE.lastIndex = 0;
-    while ((a = ARG_RE.exec(argsRaw)) !== null) {
-      const key = a[1];
-      const value = a[3] ?? a[4] ?? "";
-      args[key] = coerce(value);
-    }
-    markers.push({ name, args, raw: m[0] });
-  }
-  return markers;
-}
-function stripToolMarkers(text) {
-  return text.replace(MARKER_RE, "").replace(/\s+\n/g, "\n").trim();
-}
 var CLOUD_ICON = "M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12";
 function UploadForReview(props) {
   const {
@@ -982,12 +1013,15 @@ var BOLT = "\u26A1";
 var DEFAULT_PRIMARY = "#0f172a";
 var DEFAULT_ON_PRIMARY = "#ffffff";
 var SURFACE = "#ffffff";
-var SURFACE_MUTED = "#fafbfc";
+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 = `'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif`;
+var FONT_STACK = `-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif`;
 var STYLE_TAG_ID = "chatbotlite-widget-styles";
 var KEYFRAMES = `
 @keyframes chatbotlite-pop { 0% { opacity: 0; transform: scale(0.6); } 100% { opacity: 1; transform: scale(1); } }
@@ -999,8 +1033,8 @@ var KEYFRAMES = `
 .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); }
 .chatbotlite-launcher:active { transform: translateY(0) scale(0.98); }
-.chatbotlite-close { transition: background 120ms ease; }
-.chatbotlite-close:hover { background: rgba(255,255,255,0.16); }
+.chatbotlite-close { transition: background 120ms ease, color 120ms ease; }
+.chatbotlite-close:hover { background: rgba(15,23,42,0.06); color: ${TEXT_BODY}; }
 .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); }
@@ -1008,8 +1042,8 @@ var KEYFRAMES = `
 .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-attach-btn:hover:not(:disabled), .chatbotlite-voice-btn:hover:not(:disabled) { background: ${BORDER}; }
-.chatbotlite-attach-btn:active:not(:disabled), .chatbotlite-voice-btn:active:not(:disabled) { transform: scale(0.96); }
+.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; }
 .chatbotlite-dot:nth-child(3) { animation-delay: 0.3s; margin-right: 0; }
 .chatbotlite-brand:hover { color: ${TEXT_MUTED} !important; }
@@ -1156,17 +1190,19 @@ function ChatWidget(props) {
     return void 0;
   }, [open]);
   async function fetchReplyFromEndpoint(text, history, attachedFiles, onToken) {
+    const enabledTools = Object.keys(tools);
     let body;
     const headers = { Accept: "text/event-stream, application/json" };
     if (attachedFiles.length > 0) {
       const form = new FormData();
       form.append("message", text);
       form.append("transcript", JSON.stringify(history));
+      form.append("enabledTools", JSON.stringify(enabledTools));
       for (const f of attachedFiles) form.append("attachments", f, f.name);
       body = form;
     } else {
       headers["Content-Type"] = "application/json";
-      body = JSON.stringify({ message: text, transcript: history });
+      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(() => "")}`);
@@ -1323,17 +1359,34 @@ function ChatWidget(props) {
         },
         children: [
           /* @__PURE__ */ jsxs("header", { style: {
-            padding: "16px 18px",
-            background: primary,
-            color: onPrimary,
+            padding: "14px 16px",
+            background: SURFACE,
+            color: TEXT_BODY,
             display: "flex",
             justifyContent: "space-between",
             alignItems: "center",
-            gap: 12
+            gap: 12,
+            borderBottom: `1px solid ${BORDER_LIGHT}`
           }, children: [
-            /* @__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" }, children: resolvedTitle }),
-              subtitle && /* @__PURE__ */ jsx("span", { style: { fontSize: 12, opacity: 0.7, marginTop: 2, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children: subtitle })
+            /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 10, minWidth: 0 }, children: [
+              /* @__PURE__ */ jsx("div", { style: {
+                width: 36,
+                height: 36,
+                borderRadius: "50%",
+                background: primary,
+                color: onPrimary,
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+                fontSize: 16,
+                fontWeight: 600,
+                flexShrink: 0,
+                letterSpacing: "-0.02em"
+              }, children: resolvedTitle.charAt(0).toUpperCase() }),
+              /* @__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 }),
+                /* @__PURE__ */ jsx("span", { style: { fontSize: 12, color: TEXT_MUTED, marginTop: 2, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children: subtitle ?? (sending ? "typing\u2026" : "online") })
+              ] })
             ] }),
             /* @__PURE__ */ jsx(
               "button",
@@ -1344,7 +1397,7 @@ function ChatWidget(props) {
                 style: {
                   background: "transparent",
                   border: "none",
-                  color: onPrimary,
+                  color: TEXT_MUTED,
                   width: 32,
                   height: 32,
                   borderRadius: 10,
@@ -1371,7 +1424,7 @@ function ChatWidget(props) {
                 display: "flex",
                 flexDirection: "column",
                 gap: 8,
-                background: SURFACE_MUTED
+                background: CHAT_BG
               },
               children: [
                 messages.map((m) => /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 6, alignItems: m.role === "user" ? "flex-end" : "stretch" }, children: [
@@ -1381,18 +1434,18 @@ function ChatWidget(props) {
                       className: "chatbotlite-msg",
                       style: {
                         alignSelf: m.role === "user" ? "flex-end" : "flex-start",
-                        maxWidth: "82%",
-                        padding: "9px 13px",
-                        borderRadius: m.role === "user" ? "18px 18px 4px 18px" : "18px 18px 18px 4px",
-                        background: m.role === "user" ? primary : SURFACE,
+                        maxWidth: "78%",
+                        padding: "8px 12px",
+                        borderRadius: 18,
+                        background: m.role === "user" ? primary : BUBBLE_BOT,
                         color: m.role === "user" ? onPrimary : TEXT_BODY,
-                        border: m.role === "user" ? "none" : `1px solid ${BORDER}`,
-                        fontSize: 14,
-                        lineHeight: 1.5,
+                        border: "none",
+                        fontSize: 14.5,
+                        lineHeight: 1.4,
                         letterSpacing: "-0.005em",
                         whiteSpace: "pre-wrap",
                         wordBreak: "break-word",
-                        boxShadow: m.role === "user" ? "0 1px 2px rgba(15,23,42,0.12)" : "0 1px 2px rgba(15,23,42,0.04)"
+                        boxShadow: m.role === "user" ? "none" : "0 1px 0.5px rgba(15,23,42,0.05)"
                       },
                       children: [
                         m.content,
@@ -1407,7 +1460,7 @@ function ChatWidget(props) {
                       onPrimary,
                       border: BORDER,
                       surface: SURFACE,
-                      surfaceMuted: SURFACE_MUTED,
+                      surfaceMuted: CHAT_BG,
                       textBody: TEXT_BODY,
                       textMuted: TEXT_MUTED
                     };
@@ -1490,17 +1543,16 @@ function ChatWidget(props) {
                     return null;
                   })
                 ] }, m.id)),
-                sending && /* @__PURE__ */ jsxs(
+                sending && messages[messages.length - 1]?.content === "" && /* @__PURE__ */ jsxs(
                   "div",
                   {
                     className: "chatbotlite-msg",
                     style: {
                       alignSelf: "flex-start",
-                      padding: "12px 14px",
-                      borderRadius: "18px 18px 18px 4px",
-                      background: SURFACE,
-                      border: `1px solid ${BORDER}`,
-                      boxShadow: "0 1px 2px rgba(15,23,42,0.04)"
+                      padding: "10px 14px",
+                      borderRadius: 18,
+                      background: BUBBLE_BOT,
+                      boxShadow: "0 1px 0.5px rgba(15,23,42,0.05)"
                     },
                     children: [
                       /* @__PURE__ */ jsx("span", { className: "chatbotlite-dot" }),
@@ -1512,172 +1564,199 @@ function ChatWidget(props) {
               ]
             }
           ),
-          /* @__PURE__ */ jsxs("div", { style: {
-            display: "flex",
-            flexDirection: "column",
-            padding: 12,
-            gap: 8,
+          files.length > 0 && /* @__PURE__ */ jsx("div", { style: {
+            padding: "8px 12px 0",
             background: SURFACE,
-            borderTop: `1px solid ${BORDER}`
-          }, children: [
-            files.length > 0 && /* @__PURE__ */ jsx("div", { style: { display: "flex", flexWrap: "wrap", gap: 6 }, children: files.map((f, i) => /* @__PURE__ */ jsxs(
-              "span",
-              {
-                style: {
-                  display: "inline-flex",
-                  alignItems: "center",
-                  gap: 6,
-                  padding: "4px 8px 4px 10px",
-                  borderRadius: 8,
-                  background: SURFACE_MUTED,
-                  border: `1px solid ${BORDER}`,
-                  fontSize: 12,
-                  color: TEXT_BODY,
-                  maxWidth: 200
-                },
-                children: [
-                  /* @__PURE__ */ jsxs("span", { style: { overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children: [
-                    "\u{1F4CE} ",
-                    f.name
-                  ] }),
-                  /* @__PURE__ */ jsx(
-                    "button",
-                    {
-                      onClick: () => removeFile(i),
-                      "aria-label": `Remove ${f.name}`,
-                      style: {
-                        background: "transparent",
-                        border: "none",
-                        cursor: "pointer",
-                        color: TEXT_MUTED,
-                        fontSize: 14,
-                        lineHeight: 1,
-                        padding: 0
-                      },
-                      children: "\xD7"
-                    }
-                  )
-                ]
+            display: "flex",
+            flexWrap: "wrap",
+            gap: 6
+          }, children: files.map((f, i) => /* @__PURE__ */ jsxs(
+            "span",
+            {
+              style: {
+                display: "inline-flex",
+                alignItems: "center",
+                gap: 6,
+                padding: "4px 8px 4px 10px",
+                borderRadius: 999,
+                background: INPUT_BG,
+                fontSize: 12,
+                color: TEXT_BODY,
+                maxWidth: 200
               },
-              `${f.name}-${i}`
-            )) }),
-            /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: 8 }, children: [
-              attachEnabled && /* @__PURE__ */ jsxs(Fragment, { children: [
-                /* @__PURE__ */ 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__ */ jsxs("span", { style: { overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children: [
+                  "\u{1F4CE} ",
+                  f.name
+                ] }),
                 /* @__PURE__ */ jsx(
                   "button",
                   {
-                    className: "chatbotlite-attach-btn",
-                    onClick: () => fileInputRef.current?.click(),
-                    disabled: sending || files.length >= maxFiles,
-                    "aria-label": "Attach file",
-                    style: {
-                      width: 40,
-                      height: 40,
-                      borderRadius: 10,
-                      background: SURFACE_MUTED,
-                      border: `1px solid ${BORDER}`,
-                      cursor: sending || files.length >= maxFiles ? "default" : "pointer",
-                      opacity: sending || files.length >= maxFiles ? 0.4 : 1,
-                      fontSize: 16,
-                      transition: "background 120ms ease, transform 80ms ease"
-                    },
-                    children: "\u{1F4CE}"
+                    onClick: () => removeFile(i),
+                    "aria-label": `Remove ${f.name}`,
+                    style: { background: "transparent", border: "none", cursor: "pointer", color: TEXT_MUTED, fontSize: 14, lineHeight: 1, padding: 0 },
+                    children: "\xD7"
                   }
                 )
-              ] }),
-              voiceEnabled && speechSupported && /* @__PURE__ */ jsx(
-                "button",
-                {
-                  className: "chatbotlite-voice-btn",
-                  onClick: toggleVoice,
-                  disabled: sending,
-                  "aria-label": voiceListening ? "Stop recording" : "Start voice input",
-                  style: {
-                    width: 40,
-                    height: 40,
-                    borderRadius: 10,
-                    background: voiceListening ? primary : SURFACE_MUTED,
-                    color: voiceListening ? onPrimary : TEXT_BODY,
-                    border: `1px solid ${voiceListening ? primary : BORDER}`,
-                    cursor: sending ? "default" : "pointer",
-                    opacity: sending ? 0.4 : 1,
-                    fontSize: 16,
-                    transition: "background 120ms ease, color 120ms ease, border-color 120ms ease, transform 80ms ease"
-                  },
-                  children: "\u{1F399}\uFE0F"
-                }
-              ),
+              ]
+            },
+            `${f.name}-${i}`
+          )) }),
+          /* @__PURE__ */ jsx("div", { style: {
+            padding: "10px 12px 12px",
+            background: SURFACE
+          }, children: /* @__PURE__ */ 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__ */ jsxs(Fragment, { children: [
               /* @__PURE__ */ jsx(
                 "input",
                 {
-                  ref: inputRef,
-                  className: "chatbotlite-input",
-                  type: "text",
-                  value: input,
-                  onChange: (e) => setInput(e.target.value),
-                  onKeyDown: (e) => {
-                    if (e.key === "Enter" && !e.shiftKey) {
-                      e.preventDefault();
-                      void send();
-                    }
-                  },
-                  placeholder: "Type a message\u2026",
-                  disabled: sending,
-                  style: {
-                    flex: 1,
-                    padding: "10px 14px",
-                    borderRadius: 12,
-                    border: `1px solid ${BORDER}`,
-                    background: SURFACE_MUTED,
-                    fontSize: 14,
-                    fontFamily: FONT_STACK,
-                    color: TEXT_BODY,
-                    outline: "none",
-                    transition: "box-shadow 120ms ease, border-color 120ms ease"
+                  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__ */ jsx(
                 "button",
                 {
-                  className: "chatbotlite-send",
-                  onClick: () => void send(),
-                  disabled: sending || !input.trim() && files.length === 0,
-                  "aria-label": "Send message",
+                  className: "chatbotlite-icon-btn",
+                  onClick: () => fileInputRef.current?.click(),
+                  disabled: sending || files.length >= maxFiles,
+                  "aria-label": "Attach file",
                   style: {
-                    padding: "0 16px",
-                    height: 40,
-                    minWidth: 64,
-                    borderRadius: 12,
-                    background: primary,
-                    color: onPrimary,
+                    width: 32,
+                    height: 32,
+                    borderRadius: "50%",
+                    background: "transparent",
                     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.4 : 1,
-                    boxShadow: "0 2px 6px -1px rgba(15,23,42,0.18)"
+                    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: "Send"
+                  children: "\u{1F4CE}"
                 }
               )
-            ] })
-          ] }),
+            ] }),
+            voiceEnabled && speechSupported && /* @__PURE__ */ 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__ */ 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();
+                  }
+                },
+                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__ */ 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__ */ jsxs("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: [
+                  /* @__PURE__ */ jsx("line", { x1: "12", y1: "19", x2: "12", y2: "5" }),
+                  /* @__PURE__ */ jsx("polyline", { points: "5 12 12 5 19 12" })
+                ] })
+              }
+            )
+          ] }) }),
           showBranding && /* @__PURE__ */ jsxs(
             "a",
             {