chatbotlite 0.5.0 → 0.5.1
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.
- package/dist/embed.global.js +21 -21
- package/dist/embed.global.js.map +1 -1
- package/dist/react/index.cjs +221 -175
- package/dist/react/index.cjs.map +1 -1
- package/dist/react/index.js +221 -175
- package/dist/react/index.js.map +1 -1
- package/package.json +1 -1
package/dist/react/index.js
CHANGED
|
@@ -1013,12 +1013,15 @@ var BOLT = "\u26A1";
|
|
|
1013
1013
|
var DEFAULT_PRIMARY = "#0f172a";
|
|
1014
1014
|
var DEFAULT_ON_PRIMARY = "#ffffff";
|
|
1015
1015
|
var SURFACE = "#ffffff";
|
|
1016
|
-
var
|
|
1016
|
+
var CHAT_BG = "#f5f1eb";
|
|
1017
|
+
var BUBBLE_BOT = "#ffffff";
|
|
1018
|
+
var INPUT_BG = "#f1f3f5";
|
|
1017
1019
|
var BORDER = "#e5e7eb";
|
|
1020
|
+
var BORDER_LIGHT = "rgba(15,23,42,0.06)";
|
|
1018
1021
|
var TEXT_BODY = "#0f172a";
|
|
1019
1022
|
var TEXT_MUTED = "#64748b";
|
|
1020
1023
|
var TEXT_FAINT = "#94a3b8";
|
|
1021
|
-
var FONT_STACK =
|
|
1024
|
+
var FONT_STACK = `-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif`;
|
|
1022
1025
|
var STYLE_TAG_ID = "chatbotlite-widget-styles";
|
|
1023
1026
|
var KEYFRAMES = `
|
|
1024
1027
|
@keyframes chatbotlite-pop { 0% { opacity: 0; transform: scale(0.6); } 100% { opacity: 1; transform: scale(1); } }
|
|
@@ -1030,8 +1033,8 @@ var KEYFRAMES = `
|
|
|
1030
1033
|
.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; }
|
|
1031
1034
|
.chatbotlite-launcher:hover { transform: translateY(-2px) scale(1.04); }
|
|
1032
1035
|
.chatbotlite-launcher:active { transform: translateY(0) scale(0.98); }
|
|
1033
|
-
.chatbotlite-close { transition: background 120ms ease; }
|
|
1034
|
-
.chatbotlite-close:hover { background: rgba(
|
|
1036
|
+
.chatbotlite-close { transition: background 120ms ease, color 120ms ease; }
|
|
1037
|
+
.chatbotlite-close:hover { background: rgba(15,23,42,0.06); color: ${TEXT_BODY}; }
|
|
1035
1038
|
.chatbotlite-send { transition: transform 120ms ease, opacity 120ms ease, box-shadow 120ms ease; }
|
|
1036
1039
|
.chatbotlite-send:not(:disabled):hover { transform: translateY(-1px); }
|
|
1037
1040
|
.chatbotlite-send:not(:disabled):active { transform: translateY(0); }
|
|
@@ -1039,8 +1042,8 @@ var KEYFRAMES = `
|
|
|
1039
1042
|
.chatbotlite-msg { animation: chatbotlite-fade-in 220ms cubic-bezier(0.4, 0, 0.2, 1); }
|
|
1040
1043
|
.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; }
|
|
1041
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; }
|
|
1042
|
-
.chatbotlite-
|
|
1043
|
-
.chatbotlite-
|
|
1045
|
+
.chatbotlite-icon-btn:hover:not(:disabled) { background: rgba(15,23,42,0.06) !important; opacity: 1 !important; }
|
|
1046
|
+
.chatbotlite-icon-btn:active:not(:disabled) { transform: scale(0.92); }
|
|
1044
1047
|
.chatbotlite-dot:nth-child(2) { animation-delay: 0.15s; }
|
|
1045
1048
|
.chatbotlite-dot:nth-child(3) { animation-delay: 0.3s; margin-right: 0; }
|
|
1046
1049
|
.chatbotlite-brand:hover { color: ${TEXT_MUTED} !important; }
|
|
@@ -1356,17 +1359,34 @@ function ChatWidget(props) {
|
|
|
1356
1359
|
},
|
|
1357
1360
|
children: [
|
|
1358
1361
|
/* @__PURE__ */ jsxs("header", { style: {
|
|
1359
|
-
padding: "16px
|
|
1360
|
-
background:
|
|
1361
|
-
color:
|
|
1362
|
+
padding: "14px 16px",
|
|
1363
|
+
background: SURFACE,
|
|
1364
|
+
color: TEXT_BODY,
|
|
1362
1365
|
display: "flex",
|
|
1363
1366
|
justifyContent: "space-between",
|
|
1364
1367
|
alignItems: "center",
|
|
1365
|
-
gap: 12
|
|
1368
|
+
gap: 12,
|
|
1369
|
+
borderBottom: `1px solid ${BORDER_LIGHT}`
|
|
1366
1370
|
}, children: [
|
|
1367
|
-
/* @__PURE__ */ jsxs("div", { style: { display: "flex",
|
|
1368
|
-
/* @__PURE__ */ jsx("
|
|
1369
|
-
|
|
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,
|
|
1375
|
+
borderRadius: "50%",
|
|
1376
|
+
background: primary,
|
|
1377
|
+
color: onPrimary,
|
|
1378
|
+
display: "flex",
|
|
1379
|
+
alignItems: "center",
|
|
1380
|
+
justifyContent: "center",
|
|
1381
|
+
fontSize: 16,
|
|
1382
|
+
fontWeight: 600,
|
|
1383
|
+
flexShrink: 0,
|
|
1384
|
+
letterSpacing: "-0.02em"
|
|
1385
|
+
}, children: resolvedTitle.charAt(0).toUpperCase() }),
|
|
1386
|
+
/* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", lineHeight: 1.2, minWidth: 0 }, children: [
|
|
1387
|
+
/* @__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") })
|
|
1389
|
+
] })
|
|
1370
1390
|
] }),
|
|
1371
1391
|
/* @__PURE__ */ jsx(
|
|
1372
1392
|
"button",
|
|
@@ -1377,7 +1397,7 @@ function ChatWidget(props) {
|
|
|
1377
1397
|
style: {
|
|
1378
1398
|
background: "transparent",
|
|
1379
1399
|
border: "none",
|
|
1380
|
-
color:
|
|
1400
|
+
color: TEXT_MUTED,
|
|
1381
1401
|
width: 32,
|
|
1382
1402
|
height: 32,
|
|
1383
1403
|
borderRadius: 10,
|
|
@@ -1404,7 +1424,7 @@ function ChatWidget(props) {
|
|
|
1404
1424
|
display: "flex",
|
|
1405
1425
|
flexDirection: "column",
|
|
1406
1426
|
gap: 8,
|
|
1407
|
-
background:
|
|
1427
|
+
background: CHAT_BG
|
|
1408
1428
|
},
|
|
1409
1429
|
children: [
|
|
1410
1430
|
messages.map((m) => /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 6, alignItems: m.role === "user" ? "flex-end" : "stretch" }, children: [
|
|
@@ -1414,18 +1434,18 @@ function ChatWidget(props) {
|
|
|
1414
1434
|
className: "chatbotlite-msg",
|
|
1415
1435
|
style: {
|
|
1416
1436
|
alignSelf: m.role === "user" ? "flex-end" : "flex-start",
|
|
1417
|
-
maxWidth: "
|
|
1418
|
-
padding: "
|
|
1419
|
-
borderRadius:
|
|
1420
|
-
background: m.role === "user" ? primary :
|
|
1437
|
+
maxWidth: "78%",
|
|
1438
|
+
padding: "8px 12px",
|
|
1439
|
+
borderRadius: 18,
|
|
1440
|
+
background: m.role === "user" ? primary : BUBBLE_BOT,
|
|
1421
1441
|
color: m.role === "user" ? onPrimary : TEXT_BODY,
|
|
1422
|
-
border:
|
|
1423
|
-
fontSize: 14,
|
|
1424
|
-
lineHeight: 1.
|
|
1442
|
+
border: "none",
|
|
1443
|
+
fontSize: 14.5,
|
|
1444
|
+
lineHeight: 1.4,
|
|
1425
1445
|
letterSpacing: "-0.005em",
|
|
1426
1446
|
whiteSpace: "pre-wrap",
|
|
1427
1447
|
wordBreak: "break-word",
|
|
1428
|
-
boxShadow: m.role === "user" ? "
|
|
1448
|
+
boxShadow: m.role === "user" ? "none" : "0 1px 0.5px rgba(15,23,42,0.05)"
|
|
1429
1449
|
},
|
|
1430
1450
|
children: [
|
|
1431
1451
|
m.content,
|
|
@@ -1440,7 +1460,7 @@ function ChatWidget(props) {
|
|
|
1440
1460
|
onPrimary,
|
|
1441
1461
|
border: BORDER,
|
|
1442
1462
|
surface: SURFACE,
|
|
1443
|
-
surfaceMuted:
|
|
1463
|
+
surfaceMuted: CHAT_BG,
|
|
1444
1464
|
textBody: TEXT_BODY,
|
|
1445
1465
|
textMuted: TEXT_MUTED
|
|
1446
1466
|
};
|
|
@@ -1523,17 +1543,16 @@ function ChatWidget(props) {
|
|
|
1523
1543
|
return null;
|
|
1524
1544
|
})
|
|
1525
1545
|
] }, m.id)),
|
|
1526
|
-
sending && /* @__PURE__ */ jsxs(
|
|
1546
|
+
sending && messages[messages.length - 1]?.content === "" && /* @__PURE__ */ jsxs(
|
|
1527
1547
|
"div",
|
|
1528
1548
|
{
|
|
1529
1549
|
className: "chatbotlite-msg",
|
|
1530
1550
|
style: {
|
|
1531
1551
|
alignSelf: "flex-start",
|
|
1532
|
-
padding: "
|
|
1533
|
-
borderRadius:
|
|
1534
|
-
background:
|
|
1535
|
-
|
|
1536
|
-
boxShadow: "0 1px 2px rgba(15,23,42,0.04)"
|
|
1552
|
+
padding: "10px 14px",
|
|
1553
|
+
borderRadius: 18,
|
|
1554
|
+
background: BUBBLE_BOT,
|
|
1555
|
+
boxShadow: "0 1px 0.5px rgba(15,23,42,0.05)"
|
|
1537
1556
|
},
|
|
1538
1557
|
children: [
|
|
1539
1558
|
/* @__PURE__ */ jsx("span", { className: "chatbotlite-dot" }),
|
|
@@ -1545,172 +1564,199 @@ function ChatWidget(props) {
|
|
|
1545
1564
|
]
|
|
1546
1565
|
}
|
|
1547
1566
|
),
|
|
1548
|
-
/* @__PURE__ */
|
|
1549
|
-
|
|
1550
|
-
flexDirection: "column",
|
|
1551
|
-
padding: 12,
|
|
1552
|
-
gap: 8,
|
|
1567
|
+
files.length > 0 && /* @__PURE__ */ jsx("div", { style: {
|
|
1568
|
+
padding: "8px 12px 0",
|
|
1553
1569
|
background: SURFACE,
|
|
1554
|
-
|
|
1555
|
-
|
|
1556
|
-
|
|
1557
|
-
|
|
1558
|
-
|
|
1559
|
-
|
|
1560
|
-
|
|
1561
|
-
|
|
1562
|
-
|
|
1563
|
-
|
|
1564
|
-
|
|
1565
|
-
|
|
1566
|
-
|
|
1567
|
-
|
|
1568
|
-
|
|
1569
|
-
|
|
1570
|
-
},
|
|
1571
|
-
children: [
|
|
1572
|
-
/* @__PURE__ */ jsxs("span", { style: { overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children: [
|
|
1573
|
-
"\u{1F4CE} ",
|
|
1574
|
-
f.name
|
|
1575
|
-
] }),
|
|
1576
|
-
/* @__PURE__ */ jsx(
|
|
1577
|
-
"button",
|
|
1578
|
-
{
|
|
1579
|
-
onClick: () => removeFile(i),
|
|
1580
|
-
"aria-label": `Remove ${f.name}`,
|
|
1581
|
-
style: {
|
|
1582
|
-
background: "transparent",
|
|
1583
|
-
border: "none",
|
|
1584
|
-
cursor: "pointer",
|
|
1585
|
-
color: TEXT_MUTED,
|
|
1586
|
-
fontSize: 14,
|
|
1587
|
-
lineHeight: 1,
|
|
1588
|
-
padding: 0
|
|
1589
|
-
},
|
|
1590
|
-
children: "\xD7"
|
|
1591
|
-
}
|
|
1592
|
-
)
|
|
1593
|
-
]
|
|
1570
|
+
display: "flex",
|
|
1571
|
+
flexWrap: "wrap",
|
|
1572
|
+
gap: 6
|
|
1573
|
+
}, children: files.map((f, i) => /* @__PURE__ */ jsxs(
|
|
1574
|
+
"span",
|
|
1575
|
+
{
|
|
1576
|
+
style: {
|
|
1577
|
+
display: "inline-flex",
|
|
1578
|
+
alignItems: "center",
|
|
1579
|
+
gap: 6,
|
|
1580
|
+
padding: "4px 8px 4px 10px",
|
|
1581
|
+
borderRadius: 999,
|
|
1582
|
+
background: INPUT_BG,
|
|
1583
|
+
fontSize: 12,
|
|
1584
|
+
color: TEXT_BODY,
|
|
1585
|
+
maxWidth: 200
|
|
1594
1586
|
},
|
|
1595
|
-
|
|
1596
|
-
|
|
1597
|
-
|
|
1598
|
-
|
|
1599
|
-
|
|
1600
|
-
"input",
|
|
1601
|
-
{
|
|
1602
|
-
ref: fileInputRef,
|
|
1603
|
-
type: "file",
|
|
1604
|
-
multiple: true,
|
|
1605
|
-
accept: acceptAttr,
|
|
1606
|
-
style: { display: "none" },
|
|
1607
|
-
onChange: (e) => {
|
|
1608
|
-
if (e.target.files) addFiles(e.target.files);
|
|
1609
|
-
e.target.value = "";
|
|
1610
|
-
}
|
|
1611
|
-
}
|
|
1612
|
-
),
|
|
1587
|
+
children: [
|
|
1588
|
+
/* @__PURE__ */ jsxs("span", { style: { overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children: [
|
|
1589
|
+
"\u{1F4CE} ",
|
|
1590
|
+
f.name
|
|
1591
|
+
] }),
|
|
1613
1592
|
/* @__PURE__ */ jsx(
|
|
1614
1593
|
"button",
|
|
1615
1594
|
{
|
|
1616
|
-
|
|
1617
|
-
|
|
1618
|
-
|
|
1619
|
-
|
|
1620
|
-
style: {
|
|
1621
|
-
width: 40,
|
|
1622
|
-
height: 40,
|
|
1623
|
-
borderRadius: 10,
|
|
1624
|
-
background: SURFACE_MUTED,
|
|
1625
|
-
border: `1px solid ${BORDER}`,
|
|
1626
|
-
cursor: sending || files.length >= maxFiles ? "default" : "pointer",
|
|
1627
|
-
opacity: sending || files.length >= maxFiles ? 0.4 : 1,
|
|
1628
|
-
fontSize: 16,
|
|
1629
|
-
transition: "background 120ms ease, transform 80ms ease"
|
|
1630
|
-
},
|
|
1631
|
-
children: "\u{1F4CE}"
|
|
1595
|
+
onClick: () => removeFile(i),
|
|
1596
|
+
"aria-label": `Remove ${f.name}`,
|
|
1597
|
+
style: { background: "transparent", border: "none", cursor: "pointer", color: TEXT_MUTED, fontSize: 14, lineHeight: 1, padding: 0 },
|
|
1598
|
+
children: "\xD7"
|
|
1632
1599
|
}
|
|
1633
1600
|
)
|
|
1634
|
-
]
|
|
1635
|
-
|
|
1636
|
-
|
|
1637
|
-
|
|
1638
|
-
|
|
1639
|
-
|
|
1640
|
-
|
|
1641
|
-
|
|
1642
|
-
|
|
1643
|
-
|
|
1644
|
-
|
|
1645
|
-
|
|
1646
|
-
|
|
1647
|
-
|
|
1648
|
-
|
|
1649
|
-
|
|
1650
|
-
|
|
1651
|
-
fontSize: 16,
|
|
1652
|
-
transition: "background 120ms ease, color 120ms ease, border-color 120ms ease, transform 80ms ease"
|
|
1653
|
-
},
|
|
1654
|
-
children: "\u{1F399}\uFE0F"
|
|
1655
|
-
}
|
|
1656
|
-
),
|
|
1601
|
+
]
|
|
1602
|
+
},
|
|
1603
|
+
`${f.name}-${i}`
|
|
1604
|
+
)) }),
|
|
1605
|
+
/* @__PURE__ */ jsx("div", { style: {
|
|
1606
|
+
padding: "10px 12px 12px",
|
|
1607
|
+
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: [
|
|
1657
1618
|
/* @__PURE__ */ jsx(
|
|
1658
1619
|
"input",
|
|
1659
1620
|
{
|
|
1660
|
-
ref:
|
|
1661
|
-
|
|
1662
|
-
|
|
1663
|
-
|
|
1664
|
-
|
|
1665
|
-
|
|
1666
|
-
if (e.
|
|
1667
|
-
|
|
1668
|
-
void send();
|
|
1669
|
-
}
|
|
1670
|
-
},
|
|
1671
|
-
placeholder: "Type a message\u2026",
|
|
1672
|
-
disabled: sending,
|
|
1673
|
-
style: {
|
|
1674
|
-
flex: 1,
|
|
1675
|
-
padding: "10px 14px",
|
|
1676
|
-
borderRadius: 12,
|
|
1677
|
-
border: `1px solid ${BORDER}`,
|
|
1678
|
-
background: SURFACE_MUTED,
|
|
1679
|
-
fontSize: 14,
|
|
1680
|
-
fontFamily: FONT_STACK,
|
|
1681
|
-
color: TEXT_BODY,
|
|
1682
|
-
outline: "none",
|
|
1683
|
-
transition: "box-shadow 120ms ease, border-color 120ms ease"
|
|
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 = "";
|
|
1684
1629
|
}
|
|
1685
1630
|
}
|
|
1686
1631
|
),
|
|
1687
1632
|
/* @__PURE__ */ jsx(
|
|
1688
1633
|
"button",
|
|
1689
1634
|
{
|
|
1690
|
-
className: "chatbotlite-
|
|
1691
|
-
onClick: () =>
|
|
1692
|
-
disabled: sending ||
|
|
1693
|
-
"aria-label": "
|
|
1635
|
+
className: "chatbotlite-icon-btn",
|
|
1636
|
+
onClick: () => fileInputRef.current?.click(),
|
|
1637
|
+
disabled: sending || files.length >= maxFiles,
|
|
1638
|
+
"aria-label": "Attach file",
|
|
1694
1639
|
style: {
|
|
1695
|
-
|
|
1696
|
-
height:
|
|
1697
|
-
|
|
1698
|
-
|
|
1699
|
-
background: primary,
|
|
1700
|
-
color: onPrimary,
|
|
1640
|
+
width: 32,
|
|
1641
|
+
height: 32,
|
|
1642
|
+
borderRadius: "50%",
|
|
1643
|
+
background: "transparent",
|
|
1701
1644
|
border: "none",
|
|
1702
|
-
|
|
1703
|
-
|
|
1704
|
-
|
|
1705
|
-
|
|
1706
|
-
|
|
1707
|
-
|
|
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"
|
|
1708
1656
|
},
|
|
1709
|
-
children: "
|
|
1657
|
+
children: "\u{1F4CE}"
|
|
1710
1658
|
}
|
|
1711
1659
|
)
|
|
1712
|
-
] })
|
|
1713
|
-
|
|
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();
|
|
1707
|
+
}
|
|
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
|
+
] }) }),
|
|
1714
1760
|
showBranding && /* @__PURE__ */ jsxs(
|
|
1715
1761
|
"a",
|
|
1716
1762
|
{
|