chatbotlite 0.5.0 → 0.5.1

package/dist/react/index.cjs

@@ -1015,12 +1015,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); } }
@@ -1032,8 +1035,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); }
@@ -1041,8 +1044,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; }
@@ -1358,17 +1361,34 @@ function ChatWidget(props) {
         },
         children: [
           /* @__PURE__ */ jsxRuntime.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__ */ 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" }, children: resolvedTitle }),
-              subtitle && /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontSize: 12, opacity: 0.7, marginTop: 2, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children: subtitle })
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", alignItems: "center", gap: 10, minWidth: 0 }, children: [
+              /* @__PURE__ */ jsxRuntime.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__ */ 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") })
+              ] })
             ] }),
             /* @__PURE__ */ jsxRuntime.jsx(
               "button",
@@ -1379,7 +1399,7 @@ function ChatWidget(props) {
                 style: {
                   background: "transparent",
                   border: "none",
-                  color: onPrimary,
+                  color: TEXT_MUTED,
                   width: 32,
                   height: 32,
                   borderRadius: 10,
@@ -1406,7 +1426,7 @@ function ChatWidget(props) {
                 display: "flex",
                 flexDirection: "column",
                 gap: 8,
-                background: SURFACE_MUTED
+                background: CHAT_BG
               },
               children: [
                 messages.map((m) => /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 6, alignItems: m.role === "user" ? "flex-end" : "stretch" }, children: [
@@ -1416,18 +1436,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,
@@ -1442,7 +1462,7 @@ function ChatWidget(props) {
                       onPrimary,
                       border: BORDER,
                       surface: SURFACE,
-                      surfaceMuted: SURFACE_MUTED,
+                      surfaceMuted: CHAT_BG,
                       textBody: TEXT_BODY,
                       textMuted: TEXT_MUTED
                     };
@@ -1525,17 +1545,16 @@ function ChatWidget(props) {
                     return null;
                   })
                 ] }, m.id)),
-                sending && /* @__PURE__ */ jsxRuntime.jsxs(
+                sending && messages[messages.length - 1]?.content === "" && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("span", { className: "chatbotlite-dot" }),
@@ -1547,172 +1566,199 @@ function ChatWidget(props) {
               ]
             }
           ),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { style: {
-            display: "flex",
-            flexDirection: "column",
-            padding: 12,
-            gap: 8,
+          files.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { style: {
+            padding: "8px 12px 0",
             background: SURFACE,
-            borderTop: `1px solid ${BORDER}`
-          }, children: [
-            files.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { style: { display: "flex", flexWrap: "wrap", gap: 6 }, children: files.map((f, i) => /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("span", { style: { overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children: [
-                    "\u{1F4CE} ",
-                    f.name
-                  ] }),
-                  /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { style: { display: "flex", gap: 8 }, 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("span", { style: { overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children: [
+                  "\u{1F4CE} ",
+                  f.name
+                ] }),
                 /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ 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: 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__ */ jsxRuntime.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__ */ 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();
+                  }
+                },
+                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(
             "a",
             {