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