chatbotlite 0.5.0 → 0.5.2

package/dist/react/index.d.cts

@@ -74,6 +74,21 @@ interface ChatWidgetCommonProps {
     };
     /** LLM-triggered tool registry. Bot emits `[SKILL:name args]` → widget renders matching card. */
     tools?: ChatWidgetTools;
+    /**
+     * Header avatar. Defaults to NONE (no avatar, just title) — most website chatbots don't
+     * need one.
+     * - `true`  → circular badge with first letter of `title` on brand color
+     * - `"https://..."` → image URL (rendered in 32px circle)
+     * - omit / `false` → no avatar (default)
+     */
+    avatar?: boolean | string;
+    /**
+     * Launcher button icon. Customer override for the floating button glyph.
+     * - omit → default chat-bubble SVG
+     * - emoji string (e.g. "⚡", "💬", "🤖")
+     * - URL → rendered as image
+     */
+    launcherIcon?: string;
 }
 interface ChatWidgetDirectProps extends ChatWidgetCommonProps {
     /** Markdown knowledge for the bot. Client-side mode — API keys WILL be exposed. */

package/dist/react/index.d.ts

@@ -74,6 +74,21 @@ interface ChatWidgetCommonProps {
     };
     /** LLM-triggered tool registry. Bot emits `[SKILL:name args]` → widget renders matching card. */
     tools?: ChatWidgetTools;
+    /**
+     * Header avatar. Defaults to NONE (no avatar, just title) — most website chatbots don't
+     * need one.
+     * - `true`  → circular badge with first letter of `title` on brand color
+     * - `"https://..."` → image URL (rendered in 32px circle)
+     * - omit / `false` → no avatar (default)
+     */
+    avatar?: boolean | string;
+    /**
+     * Launcher button icon. Customer override for the floating button glyph.
+     * - omit → default chat-bubble SVG
+     * - emoji string (e.g. "⚡", "💬", "🤖")
+     * - URL → rendered as image
+     */
+    launcherIcon?: string;
 }
 interface ChatWidgetDirectProps extends ChatWidgetCommonProps {
     /** Markdown knowledge for the bot. Client-side mode — API keys WILL be exposed. */

package/dist/react/index.js

@@ -1012,35 +1012,50 @@ 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 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); } }
 @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); }
 .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); }
-.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-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-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; }
 .chatbotlite-dot:nth-child(3) { animation-delay: 0.3s; margin-right: 0; }
 .chatbotlite-brand:hover { color: ${TEXT_MUTED} !important; }
@@ -1066,7 +1081,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(",");
@@ -1327,7 +1343,12 @@ function ChatWidget(props) {
           alignItems: "center",
           justifyContent: "center"
         },
-        children: /* @__PURE__ */ 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__ */ jsx("img", { src: props.launcherIcon, alt: "", style: { width: 28, height: 28, objectFit: "contain" } }) : /* @__PURE__ */ jsx("span", { style: { filter: "drop-shadow(0 1px 2px rgba(0,0,0,0.2))" }, children: props.launcherIcon }) : /* @__PURE__ */ 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__ */ jsx("path", { d: "M21 12a8 8 0 0 1-13.6 5.8L3 19l1.2-4.4A8 8 0 1 1 21 12z" }),
+          /* @__PURE__ */ jsx("circle", { cx: "9", cy: "12", r: "1", fill: "currentColor", stroke: "none" }),
+          /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "1", fill: "currentColor", stroke: "none" }),
+          /* @__PURE__ */ jsx("circle", { cx: "15", cy: "12", r: "1", fill: "currentColor", stroke: "none" })
+        ] })
       }
     ),
     open && /* @__PURE__ */ jsxs(
@@ -1356,17 +1377,49 @@ 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: props.avatar ? 10 : 0, minWidth: 0 }, children: [
+              props.avatar === true && /* @__PURE__ */ jsx("div", { style: {
+                width: 32,
+                height: 32,
+                borderRadius: "50%",
+                background: primary,
+                color: onPrimary,
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+                fontSize: 14,
+                fontWeight: 600,
+                flexShrink: 0,
+                letterSpacing: "-0.02em"
+              }, children: resolvedTitle.charAt(0).toUpperCase() }),
+              typeof props.avatar === "string" && /* @__PURE__ */ jsx(
+                "img",
+                {
+                  src: props.avatar,
+                  alt: "",
+                  style: {
+                    width: 32,
+                    height: 32,
+                    borderRadius: "50%",
+                    objectFit: "cover",
+                    flexShrink: 0,
+                    border: `1px solid ${BORDER}`
+                  }
+                }
+              ),
+              /* @__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(
               "button",
@@ -1377,7 +1430,7 @@ function ChatWidget(props) {
                 style: {
                   background: "transparent",
                   border: "none",
-                  color: onPrimary,
+                  color: TEXT_MUTED,
                   width: 32,
                   height: 32,
                   borderRadius: 10,
@@ -1404,7 +1457,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: [
@@ -1417,7 +1470,7 @@ function ChatWidget(props) {
                         maxWidth: "82%",
                         padding: "9px 13px",
                         borderRadius: m.role === "user" ? "18px 18px 4px 18px" : "18px 18px 18px 4px",
-                        background: m.role === "user" ? primary : SURFACE,
+                        background: m.role === "user" ? primary : BUBBLE_BOT,
                         color: m.role === "user" ? onPrimary : TEXT_BODY,
                         border: m.role === "user" ? "none" : `1px solid ${BORDER}`,
                         fontSize: 14,
@@ -1429,7 +1482,15 @@ function ChatWidget(props) {
                       },
                       children: [
                         m.content,
-                        sending && m.role === "assistant" && m === messages[messages.length - 1] && /* @__PURE__ */ jsx("span", { className: "chatbotlite-cursor", "aria-hidden": "true" })
+                        sending && m.role === "assistant" && m === messages[messages.length - 1] && /* @__PURE__ */ jsx(
+                          "span",
+                          {
+                            className: "chatbotlite-cursor",
+                            style: { color: primary },
+                            "aria-hidden": "true",
+                            children: "\u258D"
+                          }
+                        )
                       ]
                     }
                   ),
@@ -1440,7 +1501,7 @@ function ChatWidget(props) {
                       onPrimary,
                       border: BORDER,
                       surface: SURFACE,
-                      surfaceMuted: SURFACE_MUTED,
+                      surfaceMuted: CHAT_BG,
                       textBody: TEXT_BODY,
                       textMuted: TEXT_MUTED
                     };
@@ -1523,7 +1584,7 @@ function ChatWidget(props) {
                     return null;
                   })
                 ] }, m.id)),
-                sending && /* @__PURE__ */ jsxs(
+                sending && messages[messages.length - 1]?.content === "" && /* @__PURE__ */ jsxs(
                   "div",
                   {
                     className: "chatbotlite-msg",
@@ -1531,7 +1592,7 @@ function ChatWidget(props) {
                       alignSelf: "flex-start",
                       padding: "12px 14px",
                       borderRadius: "18px 18px 18px 4px",
-                      background: SURFACE,
+                      background: BUBBLE_BOT,
                       border: `1px solid ${BORDER}`,
                       boxShadow: "0 1px 2px rgba(15,23,42,0.04)"
                     },
@@ -1545,172 +1606,210 @@ 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
-                  ] }),
+            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
+              },
+              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"
+                  }
+                )
+              ]
+            },
+            `${f.name}-${i}`
+          )) }),
+          /* @__PURE__ */ jsx("div", { style: {
+            padding: "10px 12px 12px",
+            background: SURFACE
+          }, children: /* @__PURE__ */ 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__ */ 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 = "";
+                      }
+                    }
+                  ),
                   /* @__PURE__ */ jsx(
                     "button",
                     {
-                      onClick: () => removeFile(i),
-                      "aria-label": `Remove ${f.name}`,
+                      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: "pointer",
-                        color: TEXT_MUTED,
-                        fontSize: 14,
+                        cursor: sending || files.length >= maxFiles ? "default" : "pointer",
+                        opacity: sending || files.length >= maxFiles ? 0.35 : 0.7,
+                        fontSize: 18,
                         lineHeight: 1,
-                        padding: 0
+                        padding: 0,
+                        display: "flex",
+                        alignItems: "center",
+                        justifyContent: "center",
+                        flexShrink: 0,
+                        alignSelf: "center",
+                        transition: "opacity 120ms ease, background 120ms ease"
                       },
-                      children: "\xD7"
+                      children: "\u{1F4CE}"
                     }
                   )
-                ]
-              },
-              `${f.name}-${i}`
-            )) }),
-            /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: 8 }, children: [
-              attachEnabled && /* @__PURE__ */ jsxs(Fragment, { children: [
+                ] }),
+                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(
-                  "input",
+                  "textarea",
                   {
-                    ref: fileInputRef,
-                    type: "file",
-                    multiple: true,
-                    accept: acceptAttr,
-                    style: { display: "none" },
+                    ref: inputRef,
+                    className: "chatbotlite-input",
+                    rows: 1,
+                    value: input,
                     onChange: (e) => {
-                      if (e.target.files) addFiles(e.target.files);
-                      e.target.value = "";
+                      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"
                     }
                   }
                 ),
                 /* @__PURE__ */ jsx(
                   "button",
                   {
-                    className: "chatbotlite-attach-btn",
-                    onClick: () => fileInputRef.current?.click(),
-                    disabled: sending || files.length >= maxFiles,
-                    "aria-label": "Attach file",
+                    className: "chatbotlite-send",
+                    onClick: () => void send(),
+                    disabled: sending || !input.trim() && files.length === 0,
+                    "aria-label": "Send message",
                     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"
+                      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: "\u{1F4CE}"
+                    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" })
+                    ] })
                   }
                 )
-              ] }),
-              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"
-                }
-              ),
-              /* @__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"
-                  }
-                }
-              ),
-              /* @__PURE__ */ jsx(
-                "button",
-                {
-                  className: "chatbotlite-send",
-                  onClick: () => void send(),
-                  disabled: sending || !input.trim() && files.length === 0,
-                  "aria-label": "Send message",
-                  style: {
-                    padding: "0 16px",
-                    height: 40,
-                    minWidth: 64,
-                    borderRadius: 12,
-                    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.4 : 1,
-                    boxShadow: "0 2px 6px -1px rgba(15,23,42,0.18)"
-                  },
-                  children: "Send"
-                }
-              )
-            ] })
-          ] }),
+              ]
+            }
+          ) }),
           showBranding && /* @__PURE__ */ jsxs(
             "a",
             {