chatbotlite 0.5.1 → 0.5.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (9) hide show
  1. package/dist/embed.global.js +22 -20
  2. package/dist/embed.global.js.map +1 -1
  3. package/dist/react/index.cjs +225 -172
  4. package/dist/react/index.cjs.map +1 -1
  5. package/dist/react/index.d.cts +15 -0
  6. package/dist/react/index.d.ts +15 -0
  7. package/dist/react/index.js +225 -172
  8. package/dist/react/index.js.map +1 -1
  9. package/package.json +1 -1
package/dist/react/index.d.cts CHANGED
@@ -74,6 +74,21 @@ interface ChatWidgetCommonProps {
74
74
  };
75
75
  /** LLM-triggered tool registry. Bot emits `[SKILL:name args]` → widget renders matching card. */
76
76
  tools?: ChatWidgetTools;
77
+ /**
78
+ * Header avatar. Defaults to NONE (no avatar, just title) — most website chatbots don't
79
+ * need one.
80
+ * - `true` → circular badge with first letter of `title` on brand color
81
+ * - `"https://..."` → image URL (rendered in 32px circle)
82
+ * - omit / `false` → no avatar (default)
83
+ */
84
+ avatar?: boolean | string;
85
+ /**
86
+ * Launcher button icon. Customer override for the floating button glyph.
87
+ * - omit → default chat-bubble SVG
88
+ * - emoji string (e.g. "⚡", "💬", "🤖")
89
+ * - URL → rendered as image
90
+ */
91
+ launcherIcon?: string;
77
92
  }
78
93
  interface ChatWidgetDirectProps extends ChatWidgetCommonProps {
79
94
  /** Markdown knowledge for the bot. Client-side mode — API keys WILL be exposed. */
package/dist/react/index.d.ts CHANGED
@@ -74,6 +74,21 @@ interface ChatWidgetCommonProps {
74
74
  };
75
75
  /** LLM-triggered tool registry. Bot emits `[SKILL:name args]` → widget renders matching card. */
76
76
  tools?: ChatWidgetTools;
77
+ /**
78
+ * Header avatar. Defaults to NONE (no avatar, just title) — most website chatbots don't
79
+ * need one.
80
+ * - `true` → circular badge with first letter of `title` on brand color
81
+ * - `"https://..."` → image URL (rendered in 32px circle)
82
+ * - omit / `false` → no avatar (default)
83
+ */
84
+ avatar?: boolean | string;
85
+ /**
86
+ * Launcher button icon. Customer override for the floating button glyph.
87
+ * - omit → default chat-bubble SVG
88
+ * - emoji string (e.g. "⚡", "💬", "🤖")
89
+ * - URL → rendered as image
90
+ */
91
+ launcherIcon?: string;
77
92
  }
78
93
  interface ChatWidgetDirectProps extends ChatWidgetCommonProps {
79
94
  /** Markdown knowledge for the bot. Client-side mode — API keys WILL be exposed. */
package/dist/react/index.js CHANGED
@@ -1012,6 +1012,16 @@ function RequestPayment(props) {
1012
1012
  var BOLT = "\u26A1";
1013
1013
  var DEFAULT_PRIMARY = "#0f172a";
1014
1014
  var DEFAULT_ON_PRIMARY = "#ffffff";
1015
+ function luminance(hex) {
1016
+ const m = hex.replace("#", "");
1017
+ const norm = m.length === 3 ? m.split("").map((c) => c + c).join("") : m;
1018
+ if (norm.length !== 6) return 0;
1019
+ const r = parseInt(norm.slice(0, 2), 16) / 255;
1020
+ const g = parseInt(norm.slice(2, 4), 16) / 255;
1021
+ const b = parseInt(norm.slice(4, 6), 16) / 255;
1022
+ const toLinear = (c) => c <= 0.03928 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4);
1023
+ return 0.2126 * toLinear(r) + 0.7152 * toLinear(g) + 0.0722 * toLinear(b);
1024
+ }
1015
1025
  var SURFACE = "#ffffff";
1016
1026
  var CHAT_BG = "#f5f1eb";
1017
1027
  var BUBBLE_BOT = "#ffffff";
@@ -1028,7 +1038,7 @@ var KEYFRAMES = `
1028
1038
  @keyframes chatbotlite-slide { 0% { opacity: 0; transform: translateY(16px) scale(0.98); } 100% { opacity: 1; transform: translateY(0) scale(1); } }
1029
1039
  @keyframes chatbotlite-fade-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
1030
1040
  @keyframes chatbotlite-dot { 0%, 60%, 100% { transform: translateY(0); opacity: 0.4; } 30% { transform: translateY(-4px); opacity: 1; } }
1031
- @keyframes chatbotlite-cursor { 0%, 50% { opacity: 1; } 51%, 100% { opacity: 0; } }
1041
+ @keyframes chatbotlite-cursor { 0%, 50% { opacity: 1; } 51%, 100% { opacity: 0.2; } }
1032
1042
  @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); } }
1033
1043
  .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; }
1034
1044
  .chatbotlite-launcher:hover { transform: translateY(-2px) scale(1.04); }
@@ -1038,10 +1048,12 @@ var KEYFRAMES = `
1038
1048
  .chatbotlite-send { transition: transform 120ms ease, opacity 120ms ease, box-shadow 120ms ease; }
1039
1049
  .chatbotlite-send:not(:disabled):hover { transform: translateY(-1px); }
1040
1050
  .chatbotlite-send:not(:disabled):active { transform: translateY(0); }
1041
- .chatbotlite-input:focus { box-shadow: 0 0 0 3px rgba(15,23,42,0.06); }
1051
+ .chatbotlite-input:focus { box-shadow: none; outline: none; }
1052
+ .chatbotlite-composer { transition: background 120ms ease, box-shadow 120ms ease; }
1053
+ .chatbotlite-composer:focus-within { background: ${SURFACE}; box-shadow: 0 0 0 1px ${BORDER}, 0 1px 2px rgba(15,23,42,0.04); }
1042
1054
  .chatbotlite-msg { animation: chatbotlite-fade-in 220ms cubic-bezier(0.4, 0, 0.2, 1); }
1043
1055
  .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; }
1044
- .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; }
1056
+ .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; }
1045
1057
  .chatbotlite-icon-btn:hover:not(:disabled) { background: rgba(15,23,42,0.06) !important; opacity: 1 !important; }
1046
1058
  .chatbotlite-icon-btn:active:not(:disabled) { transform: scale(0.92); }
1047
1059
  .chatbotlite-dot:nth-child(2) { animation-delay: 0.15s; }
@@ -1069,7 +1081,8 @@ function ChatWidget(props) {
1069
1081
  const resolvedTitle = title ?? "Chat";
1070
1082
  const resolvedGreeting = greeting ?? "Hi! How can we help?";
1071
1083
  const primary = themeOverrides?.primary ?? DEFAULT_PRIMARY;
1072
- const onPrimary = themeOverrides?.onPrimary ?? DEFAULT_ON_PRIMARY;
1084
+ const primaryIsLight = luminance(primary) > 0.65;
1085
+ const onPrimary = themeOverrides?.onPrimary ?? (primaryIsLight ? "#0f172a" : DEFAULT_ON_PRIMARY);
1073
1086
  const attachCfg = props.attach;
1074
1087
  const attachEnabled = attachCfg?.enabled === true;
1075
1088
  const acceptAttr = attachCfg?.accept?.join(",");
@@ -1330,7 +1343,12 @@ function ChatWidget(props) {
1330
1343
  alignItems: "center",
1331
1344
  justifyContent: "center"
1332
1345
  },
1333
- children: /* @__PURE__ */ jsx("span", { style: { filter: "drop-shadow(0 1px 2px rgba(0,0,0,0.2))" }, children: BOLT })
1346
+ 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: [
1347
+ /* @__PURE__ */ jsx("path", { d: "M21 12a8 8 0 0 1-13.6 5.8L3 19l1.2-4.4A8 8 0 1 1 21 12z" }),
1348
+ /* @__PURE__ */ jsx("circle", { cx: "9", cy: "12", r: "1", fill: "currentColor", stroke: "none" }),
1349
+ /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "1", fill: "currentColor", stroke: "none" }),
1350
+ /* @__PURE__ */ jsx("circle", { cx: "15", cy: "12", r: "1", fill: "currentColor", stroke: "none" })
1351
+ ] })
1334
1352
  }
1335
1353
  ),
1336
1354
  open && /* @__PURE__ */ jsxs(
@@ -1368,24 +1386,39 @@ function ChatWidget(props) {
1368
1386
  gap: 12,
1369
1387
  borderBottom: `1px solid ${BORDER_LIGHT}`
1370
1388
  }, children: [
1371
- /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 10, minWidth: 0 }, children: [
1372
- /* @__PURE__ */ jsx("div", { style: {
1373
- width: 36,
1374
- height: 36,
1389
+ /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: props.avatar ? 10 : 0, minWidth: 0 }, children: [
1390
+ props.avatar === true && /* @__PURE__ */ jsx("div", { style: {
1391
+ width: 32,
1392
+ height: 32,
1375
1393
  borderRadius: "50%",
1376
1394
  background: primary,
1377
1395
  color: onPrimary,
1378
1396
  display: "flex",
1379
1397
  alignItems: "center",
1380
1398
  justifyContent: "center",
1381
- fontSize: 16,
1399
+ fontSize: 14,
1382
1400
  fontWeight: 600,
1383
1401
  flexShrink: 0,
1384
1402
  letterSpacing: "-0.02em"
1385
1403
  }, children: resolvedTitle.charAt(0).toUpperCase() }),
1404
+ typeof props.avatar === "string" && /* @__PURE__ */ jsx(
1405
+ "img",
1406
+ {
1407
+ src: props.avatar,
1408
+ alt: "",
1409
+ style: {
1410
+ width: 32,
1411
+ height: 32,
1412
+ borderRadius: "50%",
1413
+ objectFit: "cover",
1414
+ flexShrink: 0,
1415
+ border: `1px solid ${BORDER}`
1416
+ }
1417
+ }
1418
+ ),
1386
1419
  /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", lineHeight: 1.2, minWidth: 0 }, children: [
1387
1420
  /* @__PURE__ */ jsx("span", { style: { fontWeight: 600, fontSize: 15, letterSpacing: "-0.01em", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", color: TEXT_BODY }, children: resolvedTitle }),
1388
- /* @__PURE__ */ jsx("span", { style: { fontSize: 12, color: TEXT_MUTED, marginTop: 2, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children: subtitle ?? (sending ? "typing\u2026" : "online") })
1421
+ (subtitle || sending) && /* @__PURE__ */ jsx("span", { style: { fontSize: 12, color: TEXT_MUTED, marginTop: 2, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children: subtitle ?? (sending ? "typing\u2026" : "") })
1389
1422
  ] })
1390
1423
  ] }),
1391
1424
  /* @__PURE__ */ jsx(
@@ -1434,22 +1467,30 @@ function ChatWidget(props) {
1434
1467
  className: "chatbotlite-msg",
1435
1468
  style: {
1436
1469
  alignSelf: m.role === "user" ? "flex-end" : "flex-start",
1437
- maxWidth: "78%",
1438
- padding: "8px 12px",
1439
- borderRadius: 18,
1470
+ maxWidth: "82%",
1471
+ padding: "9px 13px",
1472
+ borderRadius: m.role === "user" ? "18px 18px 4px 18px" : "18px 18px 18px 4px",
1440
1473
  background: m.role === "user" ? primary : BUBBLE_BOT,
1441
1474
  color: m.role === "user" ? onPrimary : TEXT_BODY,
1442
- border: "none",
1443
- fontSize: 14.5,
1444
- lineHeight: 1.4,
1475
+ border: m.role === "user" ? "none" : `1px solid ${BORDER}`,
1476
+ fontSize: 14,
1477
+ lineHeight: 1.5,
1445
1478
  letterSpacing: "-0.005em",
1446
1479
  whiteSpace: "pre-wrap",
1447
1480
  wordBreak: "break-word",
1448
- boxShadow: m.role === "user" ? "none" : "0 1px 0.5px rgba(15,23,42,0.05)"
1481
+ boxShadow: m.role === "user" ? "0 1px 2px rgba(15,23,42,0.12)" : "0 1px 2px rgba(15,23,42,0.04)"
1449
1482
  },
1450
1483
  children: [
1451
1484
  m.content,
1452
- sending && m.role === "assistant" && m === messages[messages.length - 1] && /* @__PURE__ */ jsx("span", { className: "chatbotlite-cursor", "aria-hidden": "true" })
1485
+ sending && m.role === "assistant" && m === messages[messages.length - 1] && /* @__PURE__ */ jsx(
1486
+ "span",
1487
+ {
1488
+ className: "chatbotlite-cursor",
1489
+ style: { color: primary },
1490
+ "aria-hidden": "true",
1491
+ children: "\u258D"
1492
+ }
1493
+ )
1453
1494
  ]
1454
1495
  }
1455
1496
  ),
@@ -1549,10 +1590,11 @@ function ChatWidget(props) {
1549
1590
  className: "chatbotlite-msg",
1550
1591
  style: {
1551
1592
  alignSelf: "flex-start",
1552
- padding: "10px 14px",
1553
- borderRadius: 18,
1593
+ padding: "12px 14px",
1594
+ borderRadius: "18px 18px 18px 4px",
1554
1595
  background: BUBBLE_BOT,
1555
- boxShadow: "0 1px 0.5px rgba(15,23,42,0.05)"
1596
+ border: `1px solid ${BORDER}`,
1597
+ boxShadow: "0 1px 2px rgba(15,23,42,0.04)"
1556
1598
  },
1557
1599
  children: [
1558
1600
  /* @__PURE__ */ jsx("span", { className: "chatbotlite-dot" }),
@@ -1605,158 +1647,169 @@ function ChatWidget(props) {
1605
1647
  /* @__PURE__ */ jsx("div", { style: {
1606
1648
  padding: "10px 12px 12px",
1607
1649
  background: SURFACE
1608
- }, children: /* @__PURE__ */ jsxs("div", { style: {
1609
- display: "flex",
1610
- alignItems: "flex-end",
1611
- gap: 6,
1612
- padding: "6px 6px 6px 10px",
1613
- background: INPUT_BG,
1614
- borderRadius: 22,
1615
- transition: "background 120ms ease"
1616
- }, children: [
1617
- attachEnabled && /* @__PURE__ */ jsxs(Fragment, { children: [
1618
- /* @__PURE__ */ jsx(
1619
- "input",
1620
- {
1621
- ref: fileInputRef,
1622
- type: "file",
1623
- multiple: true,
1624
- accept: acceptAttr,
1625
- style: { display: "none" },
1626
- onChange: (e) => {
1627
- if (e.target.files) addFiles(e.target.files);
1628
- e.target.value = "";
1650
+ }, children: /* @__PURE__ */ jsxs(
1651
+ "div",
1652
+ {
1653
+ className: "chatbotlite-composer",
1654
+ style: {
1655
+ display: "flex",
1656
+ alignItems: "center",
1657
+ gap: 4,
1658
+ padding: "4px 4px 4px 8px",
1659
+ background: INPUT_BG,
1660
+ borderRadius: 999
1661
+ },
1662
+ children: [
1663
+ attachEnabled && /* @__PURE__ */ jsxs(Fragment, { children: [
1664
+ /* @__PURE__ */ jsx(
1665
+ "input",
1666
+ {
1667
+ ref: fileInputRef,
1668
+ type: "file",
1669
+ multiple: true,
1670
+ accept: acceptAttr,
1671
+ style: { display: "none" },
1672
+ onChange: (e) => {
1673
+ if (e.target.files) addFiles(e.target.files);
1674
+ e.target.value = "";
1675
+ }
1676
+ }
1677
+ ),
1678
+ /* @__PURE__ */ jsx(
1679
+ "button",
1680
+ {
1681
+ className: "chatbotlite-icon-btn",
1682
+ onClick: () => fileInputRef.current?.click(),
1683
+ disabled: sending || files.length >= maxFiles,
1684
+ "aria-label": "Attach file",
1685
+ style: {
1686
+ width: 32,
1687
+ height: 32,
1688
+ borderRadius: "50%",
1689
+ background: "transparent",
1690
+ border: "none",
1691
+ cursor: sending || files.length >= maxFiles ? "default" : "pointer",
1692
+ opacity: sending || files.length >= maxFiles ? 0.35 : 0.7,
1693
+ fontSize: 18,
1694
+ lineHeight: 1,
1695
+ padding: 0,
1696
+ display: "flex",
1697
+ alignItems: "center",
1698
+ justifyContent: "center",
1699
+ flexShrink: 0,
1700
+ alignSelf: "center",
1701
+ transition: "opacity 120ms ease, background 120ms ease"
1702
+ },
1703
+ children: "\u{1F4CE}"
1704
+ }
1705
+ )
1706
+ ] }),
1707
+ voiceEnabled && speechSupported && /* @__PURE__ */ jsx(
1708
+ "button",
1709
+ {
1710
+ className: "chatbotlite-icon-btn",
1711
+ onClick: toggleVoice,
1712
+ disabled: sending,
1713
+ "aria-label": voiceListening ? "Stop recording" : "Start voice input",
1714
+ style: {
1715
+ width: 32,
1716
+ height: 32,
1717
+ borderRadius: "50%",
1718
+ background: voiceListening ? primary : "transparent",
1719
+ color: voiceListening ? onPrimary : "inherit",
1720
+ border: "none",
1721
+ cursor: sending ? "default" : "pointer",
1722
+ opacity: sending ? 0.35 : voiceListening ? 1 : 0.7,
1723
+ fontSize: 16,
1724
+ lineHeight: 1,
1725
+ padding: 0,
1726
+ display: "flex",
1727
+ alignItems: "center",
1728
+ justifyContent: "center",
1729
+ flexShrink: 0,
1730
+ alignSelf: "center",
1731
+ transition: "opacity 120ms ease, background 120ms ease, color 120ms ease"
1732
+ },
1733
+ children: "\u{1F399}\uFE0F"
1629
1734
  }
1630
- }
1631
- ),
1632
- /* @__PURE__ */ jsx(
1633
- "button",
1634
- {
1635
- className: "chatbotlite-icon-btn",
1636
- onClick: () => fileInputRef.current?.click(),
1637
- disabled: sending || files.length >= maxFiles,
1638
- "aria-label": "Attach file",
1639
- style: {
1640
- width: 32,
1641
- height: 32,
1642
- borderRadius: "50%",
1643
- background: "transparent",
1644
- border: "none",
1645
- cursor: sending || files.length >= maxFiles ? "default" : "pointer",
1646
- opacity: sending || files.length >= maxFiles ? 0.35 : 0.7,
1647
- fontSize: 18,
1648
- lineHeight: 1,
1649
- padding: 0,
1650
- display: "flex",
1651
- alignItems: "center",
1652
- justifyContent: "center",
1653
- flexShrink: 0,
1654
- alignSelf: "center",
1655
- transition: "opacity 120ms ease, background 120ms ease"
1656
- },
1657
- children: "\u{1F4CE}"
1658
- }
1659
- )
1660
- ] }),
1661
- voiceEnabled && speechSupported && /* @__PURE__ */ jsx(
1662
- "button",
1663
- {
1664
- className: "chatbotlite-icon-btn",
1665
- onClick: toggleVoice,
1666
- disabled: sending,
1667
- "aria-label": voiceListening ? "Stop recording" : "Start voice input",
1668
- style: {
1669
- width: 32,
1670
- height: 32,
1671
- borderRadius: "50%",
1672
- background: voiceListening ? primary : "transparent",
1673
- color: voiceListening ? onPrimary : "inherit",
1674
- border: "none",
1675
- cursor: sending ? "default" : "pointer",
1676
- opacity: sending ? 0.35 : voiceListening ? 1 : 0.7,
1677
- fontSize: 16,
1678
- lineHeight: 1,
1679
- padding: 0,
1680
- display: "flex",
1681
- alignItems: "center",
1682
- justifyContent: "center",
1683
- flexShrink: 0,
1684
- alignSelf: "center",
1685
- transition: "opacity 120ms ease, background 120ms ease, color 120ms ease"
1686
- },
1687
- children: "\u{1F399}\uFE0F"
1688
- }
1689
- ),
1690
- /* @__PURE__ */ jsx(
1691
- "textarea",
1692
- {
1693
- ref: inputRef,
1694
- className: "chatbotlite-input",
1695
- rows: 1,
1696
- value: input,
1697
- onChange: (e) => {
1698
- setInput(e.target.value);
1699
- const el = e.currentTarget;
1700
- el.style.height = "auto";
1701
- el.style.height = Math.min(el.scrollHeight, 100) + "px";
1702
- },
1703
- onKeyDown: (e) => {
1704
- if (e.key === "Enter" && !e.shiftKey) {
1705
- e.preventDefault();
1706
- void send();
1735
+ ),
1736
+ /* @__PURE__ */ jsx(
1737
+ "textarea",
1738
+ {
1739
+ ref: inputRef,
1740
+ className: "chatbotlite-input",
1741
+ rows: 1,
1742
+ value: input,
1743
+ onChange: (e) => {
1744
+ setInput(e.target.value);
1745
+ const el = e.currentTarget;
1746
+ el.style.height = "20px";
1747
+ if (el.scrollHeight > 28) {
1748
+ el.style.height = Math.min(el.scrollHeight, 100) + "px";
1749
+ }
1750
+ },
1751
+ onKeyDown: (e) => {
1752
+ if (e.key === "Enter" && !e.shiftKey) {
1753
+ e.preventDefault();
1754
+ void send();
1755
+ }
1756
+ },
1757
+ placeholder: "Message",
1758
+ disabled: sending,
1759
+ style: {
1760
+ flex: 1,
1761
+ padding: "4px 6px",
1762
+ margin: 0,
1763
+ border: "none",
1764
+ background: "transparent",
1765
+ fontSize: 14,
1766
+ fontFamily: FONT_STACK,
1767
+ color: TEXT_BODY,
1768
+ outline: "none",
1769
+ resize: "none",
1770
+ lineHeight: 1.4,
1771
+ height: 20,
1772
+ maxHeight: 100,
1773
+ boxSizing: "content-box",
1774
+ overflow: "hidden"
1775
+ }
1707
1776
  }
1708
- },
1709
- placeholder: "Message",
1710
- disabled: sending,
1711
- style: {
1712
- flex: 1,
1713
- padding: "7px 4px",
1714
- border: "none",
1715
- background: "transparent",
1716
- fontSize: 14.5,
1717
- fontFamily: FONT_STACK,
1718
- color: TEXT_BODY,
1719
- outline: "none",
1720
- resize: "none",
1721
- lineHeight: 1.35,
1722
- maxHeight: 100,
1723
- minHeight: 20
1724
- }
1725
- }
1726
- ),
1727
- /* @__PURE__ */ jsx(
1728
- "button",
1729
- {
1730
- className: "chatbotlite-send",
1731
- onClick: () => void send(),
1732
- disabled: sending || !input.trim() && files.length === 0,
1733
- "aria-label": "Send message",
1734
- style: {
1735
- width: 34,
1736
- height: 34,
1737
- borderRadius: "50%",
1738
- background: primary,
1739
- color: onPrimary,
1740
- border: "none",
1741
- fontSize: 14,
1742
- fontWeight: 600,
1743
- fontFamily: FONT_STACK,
1744
- cursor: sending || !input.trim() && files.length === 0 ? "default" : "pointer",
1745
- opacity: sending || !input.trim() && files.length === 0 ? 0.35 : 1,
1746
- display: "flex",
1747
- alignItems: "center",
1748
- justifyContent: "center",
1749
- flexShrink: 0,
1750
- padding: 0,
1751
- transition: "opacity 120ms ease, transform 80ms ease"
1752
- },
1753
- 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: [
1754
- /* @__PURE__ */ jsx("line", { x1: "12", y1: "19", x2: "12", y2: "5" }),
1755
- /* @__PURE__ */ jsx("polyline", { points: "5 12 12 5 19 12" })
1756
- ] })
1757
- }
1758
- )
1759
- ] }) }),
1777
+ ),
1778
+ /* @__PURE__ */ jsx(
1779
+ "button",
1780
+ {
1781
+ className: "chatbotlite-send",
1782
+ onClick: () => void send(),
1783
+ disabled: sending || !input.trim() && files.length === 0,
1784
+ "aria-label": "Send message",
1785
+ style: {
1786
+ width: 34,
1787
+ height: 34,
1788
+ borderRadius: "50%",
1789
+ background: primary,
1790
+ color: onPrimary,
1791
+ border: "none",
1792
+ fontSize: 14,
1793
+ fontWeight: 600,
1794
+ fontFamily: FONT_STACK,
1795
+ cursor: sending || !input.trim() && files.length === 0 ? "default" : "pointer",
1796
+ opacity: sending || !input.trim() && files.length === 0 ? 0.35 : 1,
1797
+ display: "flex",
1798
+ alignItems: "center",
1799
+ justifyContent: "center",
1800
+ flexShrink: 0,
1801
+ padding: 0,
1802
+ transition: "opacity 120ms ease, transform 80ms ease"
1803
+ },
1804
+ 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: [
1805
+ /* @__PURE__ */ jsx("line", { x1: "12", y1: "19", x2: "12", y2: "5" }),
1806
+ /* @__PURE__ */ jsx("polyline", { points: "5 12 12 5 19 12" })
1807
+ ] })
1808
+ }
1809
+ )
1810
+ ]
1811
+ }
1812
+ ) }),
1760
1813
  showBranding && /* @__PURE__ */ jsxs(
1761
1814
  "a",
1762
1815
  {