@xcelsior/ui-chat 2.0.1 → 2.0.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.
- package/README.md +1 -1
- package/dist/index.js +225 -182
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +225 -182
- package/dist/index.mjs.map +1 -1
- package/package.json +2 -6
- package/src/components/MessageList.tsx +1 -1
- package/src/components/Spinner.tsx +50 -0
package/dist/index.mjs
CHANGED
|
@@ -912,7 +912,50 @@ function ChatHeader({ agent, onClose, onMinimize, theme }) {
|
|
|
912
912
|
|
|
913
913
|
// src/components/MessageList.tsx
|
|
914
914
|
import { useCallback as useCallback4, useEffect as useEffect6, useRef as useRef4 } from "react";
|
|
915
|
-
|
|
915
|
+
|
|
916
|
+
// src/components/Spinner.tsx
|
|
917
|
+
import { Fragment, jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
|
|
918
|
+
var SIZE_MAP = {
|
|
919
|
+
sm: 16,
|
|
920
|
+
md: 24,
|
|
921
|
+
lg: 36
|
|
922
|
+
};
|
|
923
|
+
var BORDER_MAP = {
|
|
924
|
+
sm: 2,
|
|
925
|
+
md: 2,
|
|
926
|
+
lg: 3
|
|
927
|
+
};
|
|
928
|
+
function Spinner({ size = "md", color = "currentColor" }) {
|
|
929
|
+
const px = SIZE_MAP[size];
|
|
930
|
+
const border = BORDER_MAP[size];
|
|
931
|
+
return /* @__PURE__ */ jsxs3(Fragment, { children: [
|
|
932
|
+
/* @__PURE__ */ jsx3("style", { children: `
|
|
933
|
+
@keyframes xchat-spin {
|
|
934
|
+
to { transform: rotate(360deg); }
|
|
935
|
+
}
|
|
936
|
+
.xchat-spinner {
|
|
937
|
+
animation: xchat-spin 0.75s linear infinite;
|
|
938
|
+
border-radius: 50%;
|
|
939
|
+
display: inline-block;
|
|
940
|
+
flex-shrink: 0;
|
|
941
|
+
}
|
|
942
|
+
` }),
|
|
943
|
+
/* @__PURE__ */ jsx3(
|
|
944
|
+
"span",
|
|
945
|
+
{
|
|
946
|
+
className: "xchat-spinner",
|
|
947
|
+
role: "status",
|
|
948
|
+
"aria-label": "Loading",
|
|
949
|
+
style: {
|
|
950
|
+
width: px,
|
|
951
|
+
height: px,
|
|
952
|
+
border: `${border}px solid rgba(128,128,128,0.25)`,
|
|
953
|
+
borderTopColor: color
|
|
954
|
+
}
|
|
955
|
+
}
|
|
956
|
+
)
|
|
957
|
+
] });
|
|
958
|
+
}
|
|
916
959
|
|
|
917
960
|
// src/components/MessageItem.tsx
|
|
918
961
|
import { formatDistanceToNow } from "date-fns";
|
|
@@ -1007,7 +1050,7 @@ function getMarkdownStyles(theme, isLightTheme) {
|
|
|
1007
1050
|
}
|
|
1008
1051
|
|
|
1009
1052
|
// src/components/MarkdownMessage.tsx
|
|
1010
|
-
import { jsx as
|
|
1053
|
+
import { jsx as jsx4 } from "react/jsx-runtime";
|
|
1011
1054
|
function computeIsLightTheme(theme) {
|
|
1012
1055
|
const bgColor = theme?.background || "#00001a";
|
|
1013
1056
|
if (!bgColor.startsWith("#")) return false;
|
|
@@ -1026,18 +1069,18 @@ function MarkdownMessage({ content, theme }) {
|
|
|
1026
1069
|
// inside the bubble.
|
|
1027
1070
|
display: "block"
|
|
1028
1071
|
};
|
|
1029
|
-
return /* @__PURE__ */
|
|
1072
|
+
return /* @__PURE__ */ jsx4("div", { style: wrapperStyle, children: /* @__PURE__ */ jsx4(
|
|
1030
1073
|
ReactMarkdown,
|
|
1031
1074
|
{
|
|
1032
1075
|
components: {
|
|
1033
1076
|
// Paragraphs
|
|
1034
|
-
p: ({ children }) => /* @__PURE__ */
|
|
1077
|
+
p: ({ children }) => /* @__PURE__ */ jsx4("p", { style: styles.paragraph, children }),
|
|
1035
1078
|
// Bold
|
|
1036
|
-
strong: ({ children }) => /* @__PURE__ */
|
|
1079
|
+
strong: ({ children }) => /* @__PURE__ */ jsx4("strong", { style: styles.strong, children }),
|
|
1037
1080
|
// Italic
|
|
1038
|
-
em: ({ children }) => /* @__PURE__ */
|
|
1081
|
+
em: ({ children }) => /* @__PURE__ */ jsx4("em", { style: styles.emphasis, children }),
|
|
1039
1082
|
// Links — open in new tab
|
|
1040
|
-
a: ({ href, children }) => /* @__PURE__ */
|
|
1083
|
+
a: ({ href, children }) => /* @__PURE__ */ jsx4(
|
|
1041
1084
|
"a",
|
|
1042
1085
|
{
|
|
1043
1086
|
href,
|
|
@@ -1048,9 +1091,9 @@ function MarkdownMessage({ content, theme }) {
|
|
|
1048
1091
|
}
|
|
1049
1092
|
),
|
|
1050
1093
|
// Unordered list
|
|
1051
|
-
ul: ({ children }) => /* @__PURE__ */
|
|
1094
|
+
ul: ({ children }) => /* @__PURE__ */ jsx4("ul", { style: { ...styles.list, listStyleType: "disc" }, children }),
|
|
1052
1095
|
// Ordered list
|
|
1053
|
-
ol: ({ children }) => /* @__PURE__ */
|
|
1096
|
+
ol: ({ children }) => /* @__PURE__ */ jsx4(
|
|
1054
1097
|
"ol",
|
|
1055
1098
|
{
|
|
1056
1099
|
style: { ...styles.list, listStyleType: "decimal" },
|
|
@@ -1058,7 +1101,7 @@ function MarkdownMessage({ content, theme }) {
|
|
|
1058
1101
|
}
|
|
1059
1102
|
),
|
|
1060
1103
|
// List item
|
|
1061
|
-
li: ({ children }) => /* @__PURE__ */
|
|
1104
|
+
li: ({ children }) => /* @__PURE__ */ jsx4("li", { style: styles.listItem, children }),
|
|
1062
1105
|
// Inline code vs code block — react-markdown wraps fenced
|
|
1063
1106
|
// code blocks as <pre><code className="language-*">. The
|
|
1064
1107
|
// cleanest heuristic: if the className starts with
|
|
@@ -1068,7 +1111,7 @@ function MarkdownMessage({ content, theme }) {
|
|
|
1068
1111
|
className?.startsWith("language-")
|
|
1069
1112
|
);
|
|
1070
1113
|
if (isBlock) {
|
|
1071
|
-
return /* @__PURE__ */
|
|
1114
|
+
return /* @__PURE__ */ jsx4(
|
|
1072
1115
|
"code",
|
|
1073
1116
|
{
|
|
1074
1117
|
className,
|
|
@@ -1077,10 +1120,10 @@ function MarkdownMessage({ content, theme }) {
|
|
|
1077
1120
|
}
|
|
1078
1121
|
);
|
|
1079
1122
|
}
|
|
1080
|
-
return /* @__PURE__ */
|
|
1123
|
+
return /* @__PURE__ */ jsx4("code", { style: styles.code, children });
|
|
1081
1124
|
}),
|
|
1082
1125
|
// Pre wrapper for code blocks
|
|
1083
|
-
pre: ({ children }) => /* @__PURE__ */
|
|
1126
|
+
pre: ({ children }) => /* @__PURE__ */ jsx4(
|
|
1084
1127
|
"pre",
|
|
1085
1128
|
{
|
|
1086
1129
|
style: {
|
|
@@ -1094,7 +1137,7 @@ function MarkdownMessage({ content, theme }) {
|
|
|
1094
1137
|
}
|
|
1095
1138
|
),
|
|
1096
1139
|
// Headings — h1 through h6 with progressive size reduction
|
|
1097
|
-
h1: ({ children }) => /* @__PURE__ */
|
|
1140
|
+
h1: ({ children }) => /* @__PURE__ */ jsx4(
|
|
1098
1141
|
"h1",
|
|
1099
1142
|
{
|
|
1100
1143
|
style: {
|
|
@@ -1104,7 +1147,7 @@ function MarkdownMessage({ content, theme }) {
|
|
|
1104
1147
|
children
|
|
1105
1148
|
}
|
|
1106
1149
|
),
|
|
1107
|
-
h2: ({ children }) => /* @__PURE__ */
|
|
1150
|
+
h2: ({ children }) => /* @__PURE__ */ jsx4(
|
|
1108
1151
|
"h2",
|
|
1109
1152
|
{
|
|
1110
1153
|
style: {
|
|
@@ -1114,7 +1157,7 @@ function MarkdownMessage({ content, theme }) {
|
|
|
1114
1157
|
children
|
|
1115
1158
|
}
|
|
1116
1159
|
),
|
|
1117
|
-
h3: ({ children }) => /* @__PURE__ */
|
|
1160
|
+
h3: ({ children }) => /* @__PURE__ */ jsx4(
|
|
1118
1161
|
"h3",
|
|
1119
1162
|
{
|
|
1120
1163
|
style: {
|
|
@@ -1124,8 +1167,8 @@ function MarkdownMessage({ content, theme }) {
|
|
|
1124
1167
|
children
|
|
1125
1168
|
}
|
|
1126
1169
|
),
|
|
1127
|
-
h4: ({ children }) => /* @__PURE__ */
|
|
1128
|
-
h5: ({ children }) => /* @__PURE__ */
|
|
1170
|
+
h4: ({ children }) => /* @__PURE__ */ jsx4("h4", { style: { ...styles.heading, fontSize: "1em" }, children }),
|
|
1171
|
+
h5: ({ children }) => /* @__PURE__ */ jsx4(
|
|
1129
1172
|
"h5",
|
|
1130
1173
|
{
|
|
1131
1174
|
style: {
|
|
@@ -1135,7 +1178,7 @@ function MarkdownMessage({ content, theme }) {
|
|
|
1135
1178
|
children
|
|
1136
1179
|
}
|
|
1137
1180
|
),
|
|
1138
|
-
h6: ({ children }) => /* @__PURE__ */
|
|
1181
|
+
h6: ({ children }) => /* @__PURE__ */ jsx4(
|
|
1139
1182
|
"h6",
|
|
1140
1183
|
{
|
|
1141
1184
|
style: {
|
|
@@ -1146,9 +1189,9 @@ function MarkdownMessage({ content, theme }) {
|
|
|
1146
1189
|
}
|
|
1147
1190
|
),
|
|
1148
1191
|
// Blockquote
|
|
1149
|
-
blockquote: ({ children }) => /* @__PURE__ */
|
|
1192
|
+
blockquote: ({ children }) => /* @__PURE__ */ jsx4("blockquote", { style: styles.blockquote, children }),
|
|
1150
1193
|
// Horizontal rule
|
|
1151
|
-
hr: () => /* @__PURE__ */
|
|
1194
|
+
hr: () => /* @__PURE__ */ jsx4("hr", { style: styles.hr })
|
|
1152
1195
|
},
|
|
1153
1196
|
children: content
|
|
1154
1197
|
}
|
|
@@ -1156,7 +1199,7 @@ function MarkdownMessage({ content, theme }) {
|
|
|
1156
1199
|
}
|
|
1157
1200
|
|
|
1158
1201
|
// src/components/MessageItem.tsx
|
|
1159
|
-
import { jsx as
|
|
1202
|
+
import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
|
|
1160
1203
|
function MessageItem({
|
|
1161
1204
|
message,
|
|
1162
1205
|
currentUser,
|
|
@@ -1182,7 +1225,7 @@ function MessageItem({
|
|
|
1182
1225
|
const textColor = theme?.text || (isLightTheme ? "#1a1a2e" : "#f7f7f8");
|
|
1183
1226
|
const textMuted = theme?.textMuted || (isLightTheme ? "rgba(0,0,0,0.35)" : "rgba(247,247,248,0.35)");
|
|
1184
1227
|
if (isSystemMessage) {
|
|
1185
|
-
return /* @__PURE__ */
|
|
1228
|
+
return /* @__PURE__ */ jsx5("div", { className: "flex justify-center my-3", children: /* @__PURE__ */ jsx5(
|
|
1186
1229
|
"div",
|
|
1187
1230
|
{
|
|
1188
1231
|
className: "px-4 py-1.5 rounded-full",
|
|
@@ -1190,7 +1233,7 @@ function MessageItem({
|
|
|
1190
1233
|
backgroundColor: isLightTheme ? "rgba(0,0,0,0.04)" : "rgba(255,255,255,0.03)",
|
|
1191
1234
|
boxShadow: isLightTheme ? "inset 0 0 0 1px rgba(0,0,0,0.06)" : "inset 0 0 0 0.5px rgba(255,255,255,0.06)"
|
|
1192
1235
|
},
|
|
1193
|
-
children: /* @__PURE__ */
|
|
1236
|
+
children: /* @__PURE__ */ jsx5(
|
|
1194
1237
|
"p",
|
|
1195
1238
|
{
|
|
1196
1239
|
style: {
|
|
@@ -1229,12 +1272,12 @@ function MessageItem({
|
|
|
1229
1272
|
borderRadius: "18px 18px 18px 4px",
|
|
1230
1273
|
boxShadow: "inset 0 0 0 0.5px rgba(255,255,255,0.06), inset 0 1px 0 0 rgba(255,255,255,0.08)"
|
|
1231
1274
|
};
|
|
1232
|
-
return /* @__PURE__ */
|
|
1275
|
+
return /* @__PURE__ */ jsxs4(
|
|
1233
1276
|
"div",
|
|
1234
1277
|
{
|
|
1235
1278
|
className: `flex gap-2.5 mb-3 ${isOwnMessage ? "flex-row-reverse" : "flex-row"}`,
|
|
1236
1279
|
children: [
|
|
1237
|
-
showAvatar && !isOwnMessage && /* @__PURE__ */
|
|
1280
|
+
showAvatar && !isOwnMessage && /* @__PURE__ */ jsx5("div", { className: "flex-shrink-0 mt-auto mb-5", children: isBotMessage || isAIMessage ? /* @__PURE__ */ jsx5(XcelsiorAvatar, { size: 28 }) : /* @__PURE__ */ jsx5(
|
|
1238
1281
|
"div",
|
|
1239
1282
|
{
|
|
1240
1283
|
className: "h-7 w-7 rounded-full flex items-center justify-center",
|
|
@@ -1242,7 +1285,7 @@ function MessageItem({
|
|
|
1242
1285
|
background: isLightTheme ? `linear-gradient(135deg, ${primaryColor}30, rgba(0,0,0,0.04))` : `linear-gradient(135deg, ${primaryColor}60, rgba(255,255,255,0.06))`,
|
|
1243
1286
|
boxShadow: isLightTheme ? "inset 0 0 0 1px rgba(0,0,0,0.08)" : "inset 0 0 0 0.5px rgba(255,255,255,0.1)"
|
|
1244
1287
|
},
|
|
1245
|
-
children: /* @__PURE__ */
|
|
1288
|
+
children: /* @__PURE__ */ jsxs4(
|
|
1246
1289
|
"svg",
|
|
1247
1290
|
{
|
|
1248
1291
|
width: "14",
|
|
@@ -1255,21 +1298,21 @@ function MessageItem({
|
|
|
1255
1298
|
strokeLinejoin: "round",
|
|
1256
1299
|
"aria-hidden": "true",
|
|
1257
1300
|
children: [
|
|
1258
|
-
/* @__PURE__ */
|
|
1259
|
-
/* @__PURE__ */
|
|
1260
|
-
/* @__PURE__ */
|
|
1301
|
+
/* @__PURE__ */ jsx5("title", { children: "Agent" }),
|
|
1302
|
+
/* @__PURE__ */ jsx5("path", { d: "M3 18v-6a9 9 0 0 1 18 0v6" }),
|
|
1303
|
+
/* @__PURE__ */ jsx5("path", { d: "M21 19a2 2 0 0 1-2 2h-1a2 2 0 0 1-2-2v-3a2 2 0 0 1 2-2h3zM3 19a2 2 0 0 0 2 2h1a2 2 0 0 0 2-2v-3a2 2 0 0 0-2-2H3z" })
|
|
1261
1304
|
]
|
|
1262
1305
|
}
|
|
1263
1306
|
)
|
|
1264
1307
|
}
|
|
1265
1308
|
) }),
|
|
1266
|
-
showAvatar && isOwnMessage && /* @__PURE__ */
|
|
1267
|
-
/* @__PURE__ */
|
|
1309
|
+
showAvatar && isOwnMessage && /* @__PURE__ */ jsx5("div", { className: "w-7 flex-shrink-0" }),
|
|
1310
|
+
/* @__PURE__ */ jsxs4(
|
|
1268
1311
|
"div",
|
|
1269
1312
|
{
|
|
1270
1313
|
className: `flex flex-col max-w-[75%] ${isOwnMessage ? "items-end" : "items-start"}`,
|
|
1271
1314
|
children: [
|
|
1272
|
-
senderLabel && /* @__PURE__ */
|
|
1315
|
+
senderLabel && /* @__PURE__ */ jsx5(
|
|
1273
1316
|
"span",
|
|
1274
1317
|
{
|
|
1275
1318
|
className: "mb-1 px-1 font-medium",
|
|
@@ -1281,7 +1324,7 @@ function MessageItem({
|
|
|
1281
1324
|
children: senderLabel
|
|
1282
1325
|
}
|
|
1283
1326
|
),
|
|
1284
|
-
/* @__PURE__ */
|
|
1327
|
+
/* @__PURE__ */ jsxs4(
|
|
1285
1328
|
"div",
|
|
1286
1329
|
{
|
|
1287
1330
|
className: "px-4 py-2.5",
|
|
@@ -1294,12 +1337,12 @@ function MessageItem({
|
|
|
1294
1337
|
children: [
|
|
1295
1338
|
message.messageType === "text" && (isOwnMessage ? (
|
|
1296
1339
|
// User messages: plain text — no markdown parsing
|
|
1297
|
-
/* @__PURE__ */
|
|
1340
|
+
/* @__PURE__ */ jsx5("span", { style: { whiteSpace: "pre-wrap", wordBreak: "break-word" }, children: message.content })
|
|
1298
1341
|
) : (
|
|
1299
1342
|
// Bot / agent messages: full markdown rendering
|
|
1300
|
-
/* @__PURE__ */
|
|
1343
|
+
/* @__PURE__ */ jsx5(MarkdownMessage, { content: message.content, theme })
|
|
1301
1344
|
)),
|
|
1302
|
-
message.messageType === "image" && /* @__PURE__ */
|
|
1345
|
+
message.messageType === "image" && /* @__PURE__ */ jsx5("div", { children: /* @__PURE__ */ jsx5(
|
|
1303
1346
|
"img",
|
|
1304
1347
|
{
|
|
1305
1348
|
src: message.content,
|
|
@@ -1308,8 +1351,8 @@ function MessageItem({
|
|
|
1308
1351
|
loading: "lazy"
|
|
1309
1352
|
}
|
|
1310
1353
|
) }),
|
|
1311
|
-
message.messageType === "file" && /* @__PURE__ */
|
|
1312
|
-
/* @__PURE__ */
|
|
1354
|
+
message.messageType === "file" && /* @__PURE__ */ jsxs4("div", { className: "flex items-center gap-2", children: [
|
|
1355
|
+
/* @__PURE__ */ jsxs4(
|
|
1313
1356
|
"svg",
|
|
1314
1357
|
{
|
|
1315
1358
|
width: "18",
|
|
@@ -1322,12 +1365,12 @@ function MessageItem({
|
|
|
1322
1365
|
strokeLinejoin: "round",
|
|
1323
1366
|
"aria-hidden": "true",
|
|
1324
1367
|
children: [
|
|
1325
|
-
/* @__PURE__ */
|
|
1326
|
-
/* @__PURE__ */
|
|
1368
|
+
/* @__PURE__ */ jsx5("title", { children: "File" }),
|
|
1369
|
+
/* @__PURE__ */ jsx5("path", { d: "M21.44 11.05l-9.19 9.19a6 6 0 01-8.49-8.49l9.19-9.19a4 4 0 015.66 5.66l-9.2 9.19a2 2 0 01-2.83-2.83l8.49-8.48" })
|
|
1327
1370
|
]
|
|
1328
1371
|
}
|
|
1329
1372
|
),
|
|
1330
|
-
/* @__PURE__ */
|
|
1373
|
+
/* @__PURE__ */ jsx5(
|
|
1331
1374
|
"a",
|
|
1332
1375
|
{
|
|
1333
1376
|
href: message.content,
|
|
@@ -1345,12 +1388,12 @@ function MessageItem({
|
|
|
1345
1388
|
]
|
|
1346
1389
|
}
|
|
1347
1390
|
),
|
|
1348
|
-
showTimestamp && /* @__PURE__ */
|
|
1391
|
+
showTimestamp && /* @__PURE__ */ jsxs4(
|
|
1349
1392
|
"div",
|
|
1350
1393
|
{
|
|
1351
1394
|
className: `flex items-center gap-1.5 mt-1 px-1 ${isOwnMessage ? "flex-row-reverse" : "flex-row"}`,
|
|
1352
1395
|
children: [
|
|
1353
|
-
/* @__PURE__ */
|
|
1396
|
+
/* @__PURE__ */ jsx5(
|
|
1354
1397
|
"span",
|
|
1355
1398
|
{
|
|
1356
1399
|
style: {
|
|
@@ -1363,8 +1406,8 @@ function MessageItem({
|
|
|
1363
1406
|
})
|
|
1364
1407
|
}
|
|
1365
1408
|
),
|
|
1366
|
-
isOwnMessage && message.status && /* @__PURE__ */
|
|
1367
|
-
message.status === "sent" && /* @__PURE__ */
|
|
1409
|
+
isOwnMessage && message.status && /* @__PURE__ */ jsxs4("span", { style: { color: textMuted }, children: [
|
|
1410
|
+
message.status === "sent" && /* @__PURE__ */ jsxs4(
|
|
1368
1411
|
"svg",
|
|
1369
1412
|
{
|
|
1370
1413
|
width: "14",
|
|
@@ -1377,12 +1420,12 @@ function MessageItem({
|
|
|
1377
1420
|
strokeLinejoin: "round",
|
|
1378
1421
|
"aria-hidden": "true",
|
|
1379
1422
|
children: [
|
|
1380
|
-
/* @__PURE__ */
|
|
1381
|
-
/* @__PURE__ */
|
|
1423
|
+
/* @__PURE__ */ jsx5("title", { children: "Sent" }),
|
|
1424
|
+
/* @__PURE__ */ jsx5("polyline", { points: "20 6 9 17 4 12" })
|
|
1382
1425
|
]
|
|
1383
1426
|
}
|
|
1384
1427
|
),
|
|
1385
|
-
message.status === "delivered" && /* @__PURE__ */
|
|
1428
|
+
message.status === "delivered" && /* @__PURE__ */ jsxs4(
|
|
1386
1429
|
"svg",
|
|
1387
1430
|
{
|
|
1388
1431
|
width: "14",
|
|
@@ -1395,13 +1438,13 @@ function MessageItem({
|
|
|
1395
1438
|
strokeLinejoin: "round",
|
|
1396
1439
|
"aria-hidden": "true",
|
|
1397
1440
|
children: [
|
|
1398
|
-
/* @__PURE__ */
|
|
1399
|
-
/* @__PURE__ */
|
|
1400
|
-
/* @__PURE__ */
|
|
1441
|
+
/* @__PURE__ */ jsx5("title", { children: "Delivered" }),
|
|
1442
|
+
/* @__PURE__ */ jsx5("polyline", { points: "18 6 7 17 2 12" }),
|
|
1443
|
+
/* @__PURE__ */ jsx5("polyline", { points: "22 6 11 17" })
|
|
1401
1444
|
]
|
|
1402
1445
|
}
|
|
1403
1446
|
),
|
|
1404
|
-
message.status === "read" && /* @__PURE__ */
|
|
1447
|
+
message.status === "read" && /* @__PURE__ */ jsxs4(
|
|
1405
1448
|
"svg",
|
|
1406
1449
|
{
|
|
1407
1450
|
width: "14",
|
|
@@ -1414,9 +1457,9 @@ function MessageItem({
|
|
|
1414
1457
|
strokeLinejoin: "round",
|
|
1415
1458
|
"aria-hidden": "true",
|
|
1416
1459
|
children: [
|
|
1417
|
-
/* @__PURE__ */
|
|
1418
|
-
/* @__PURE__ */
|
|
1419
|
-
/* @__PURE__ */
|
|
1460
|
+
/* @__PURE__ */ jsx5("title", { children: "Read" }),
|
|
1461
|
+
/* @__PURE__ */ jsx5("polyline", { points: "18 6 7 17 2 12" }),
|
|
1462
|
+
/* @__PURE__ */ jsx5("polyline", { points: "22 6 11 17" })
|
|
1420
1463
|
]
|
|
1421
1464
|
}
|
|
1422
1465
|
)
|
|
@@ -1434,7 +1477,7 @@ function MessageItem({
|
|
|
1434
1477
|
|
|
1435
1478
|
// src/components/ThinkingIndicator.tsx
|
|
1436
1479
|
import { useEffect as useEffect5, useRef as useRef3, useState as useState6 } from "react";
|
|
1437
|
-
import { jsx as
|
|
1480
|
+
import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
|
|
1438
1481
|
var PHRASE_POOLS = {
|
|
1439
1482
|
// ── Greetings & small talk ──
|
|
1440
1483
|
greeting: [
|
|
@@ -1653,7 +1696,7 @@ function ThinkingIndicator({
|
|
|
1653
1696
|
}
|
|
1654
1697
|
return () => clearTimeout(timeout);
|
|
1655
1698
|
}, [displayText, isDeleting, phraseIndex]);
|
|
1656
|
-
return /* @__PURE__ */
|
|
1699
|
+
return /* @__PURE__ */ jsxs5(
|
|
1657
1700
|
"div",
|
|
1658
1701
|
{
|
|
1659
1702
|
className: "flex gap-2.5 mb-3",
|
|
@@ -1661,8 +1704,8 @@ function ThinkingIndicator({
|
|
|
1661
1704
|
"aria-live": "polite",
|
|
1662
1705
|
"aria-label": "Xcelsior is thinking",
|
|
1663
1706
|
children: [
|
|
1664
|
-
showAvatar && /* @__PURE__ */
|
|
1665
|
-
/* @__PURE__ */
|
|
1707
|
+
showAvatar && /* @__PURE__ */ jsx6("div", { className: "flex-shrink-0 mt-auto mb-5", children: /* @__PURE__ */ jsx6(XcelsiorAvatar, { size: 28 }) }),
|
|
1708
|
+
/* @__PURE__ */ jsx6("div", { className: "flex flex-col items-start", children: /* @__PURE__ */ jsx6(
|
|
1666
1709
|
"div",
|
|
1667
1710
|
{
|
|
1668
1711
|
style: {
|
|
@@ -1672,8 +1715,8 @@ function ThinkingIndicator({
|
|
|
1672
1715
|
padding: "12px 16px",
|
|
1673
1716
|
minWidth: 160
|
|
1674
1717
|
},
|
|
1675
|
-
children: /* @__PURE__ */
|
|
1676
|
-
/* @__PURE__ */
|
|
1718
|
+
children: /* @__PURE__ */ jsxs5("div", { style: { display: "flex", alignItems: "center", gap: 8 }, children: [
|
|
1719
|
+
/* @__PURE__ */ jsx6("div", { style: { display: "flex", gap: 4, alignItems: "center" }, children: [0, 1, 2].map((i) => /* @__PURE__ */ jsx6(
|
|
1677
1720
|
"span",
|
|
1678
1721
|
{
|
|
1679
1722
|
style: {
|
|
@@ -1687,7 +1730,7 @@ function ThinkingIndicator({
|
|
|
1687
1730
|
},
|
|
1688
1731
|
i
|
|
1689
1732
|
)) }),
|
|
1690
|
-
/* @__PURE__ */
|
|
1733
|
+
/* @__PURE__ */ jsxs5(
|
|
1691
1734
|
"span",
|
|
1692
1735
|
{
|
|
1693
1736
|
style: {
|
|
@@ -1698,7 +1741,7 @@ function ThinkingIndicator({
|
|
|
1698
1741
|
},
|
|
1699
1742
|
children: [
|
|
1700
1743
|
displayText,
|
|
1701
|
-
/* @__PURE__ */
|
|
1744
|
+
/* @__PURE__ */ jsx6(
|
|
1702
1745
|
"span",
|
|
1703
1746
|
{
|
|
1704
1747
|
style: {
|
|
@@ -1724,7 +1767,7 @@ function ThinkingIndicator({
|
|
|
1724
1767
|
}
|
|
1725
1768
|
|
|
1726
1769
|
// src/components/MessageList.tsx
|
|
1727
|
-
import { jsx as
|
|
1770
|
+
import { jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
|
|
1728
1771
|
function MessageList({
|
|
1729
1772
|
messages,
|
|
1730
1773
|
currentUser,
|
|
@@ -1805,11 +1848,11 @@ function MessageList({
|
|
|
1805
1848
|
return () => container.removeEventListener("scroll", handleScroll);
|
|
1806
1849
|
}, [handleScroll]);
|
|
1807
1850
|
if (isLoading) {
|
|
1808
|
-
return /* @__PURE__ */
|
|
1851
|
+
return /* @__PURE__ */ jsx7("div", { className: "flex items-center justify-center h-full", children: /* @__PURE__ */ jsx7(Spinner, { size: "lg" }) });
|
|
1809
1852
|
}
|
|
1810
1853
|
if (messages.length === 0) {
|
|
1811
|
-
return /* @__PURE__ */
|
|
1812
|
-
/* @__PURE__ */
|
|
1854
|
+
return /* @__PURE__ */ jsxs6("div", { className: "flex flex-col items-center justify-center h-full text-center", style: { padding: "40px 32px" }, children: [
|
|
1855
|
+
/* @__PURE__ */ jsx7(
|
|
1813
1856
|
"h3",
|
|
1814
1857
|
{
|
|
1815
1858
|
className: "font-semibold mb-2",
|
|
@@ -1821,7 +1864,7 @@ function MessageList({
|
|
|
1821
1864
|
children: "How can we help?"
|
|
1822
1865
|
}
|
|
1823
1866
|
),
|
|
1824
|
-
/* @__PURE__ */
|
|
1867
|
+
/* @__PURE__ */ jsx7(
|
|
1825
1868
|
"p",
|
|
1826
1869
|
{
|
|
1827
1870
|
className: "max-w-[240px]",
|
|
@@ -1835,11 +1878,11 @@ function MessageList({
|
|
|
1835
1878
|
children: "Ask us anything. We are here to help you get the most out of Xcelsior."
|
|
1836
1879
|
}
|
|
1837
1880
|
),
|
|
1838
|
-
/* @__PURE__ */
|
|
1881
|
+
/* @__PURE__ */ jsx7("div", { className: "flex flex-wrap justify-center gap-2", children: [
|
|
1839
1882
|
{ label: "Our services", message: "What services does Xcelsior offer?" },
|
|
1840
1883
|
{ label: "Get a quote", message: "I would like to get a quote for a project" },
|
|
1841
1884
|
{ label: "Support", message: "I need help with something" }
|
|
1842
|
-
].map((action) => /* @__PURE__ */
|
|
1885
|
+
].map((action) => /* @__PURE__ */ jsx7(
|
|
1843
1886
|
"button",
|
|
1844
1887
|
{
|
|
1845
1888
|
type: "button",
|
|
@@ -1871,14 +1914,14 @@ function MessageList({
|
|
|
1871
1914
|
)) })
|
|
1872
1915
|
] });
|
|
1873
1916
|
}
|
|
1874
|
-
return /* @__PURE__ */
|
|
1917
|
+
return /* @__PURE__ */ jsxs6(
|
|
1875
1918
|
"div",
|
|
1876
1919
|
{
|
|
1877
1920
|
ref: containerRef,
|
|
1878
1921
|
className: "flex-1 overflow-y-auto px-4 py-3",
|
|
1879
1922
|
style: { scrollBehavior: "smooth" },
|
|
1880
1923
|
children: [
|
|
1881
|
-
/* @__PURE__ */
|
|
1924
|
+
/* @__PURE__ */ jsx7("style", { children: `
|
|
1882
1925
|
@keyframes thinkingPulse {
|
|
1883
1926
|
0%, 60%, 100% { opacity: 0.3; transform: scale(0.8); }
|
|
1884
1927
|
30% { opacity: 1; transform: scale(1); }
|
|
@@ -1888,9 +1931,9 @@ function MessageList({
|
|
|
1888
1931
|
50% { opacity: 0; }
|
|
1889
1932
|
}
|
|
1890
1933
|
` }),
|
|
1891
|
-
isLoadingMore && /* @__PURE__ */
|
|
1892
|
-
/* @__PURE__ */
|
|
1893
|
-
messages.map((message) => /* @__PURE__ */
|
|
1934
|
+
isLoadingMore && /* @__PURE__ */ jsx7("div", { className: "flex justify-center py-3", children: /* @__PURE__ */ jsx7(Spinner, { size: "sm" }) }),
|
|
1935
|
+
/* @__PURE__ */ jsx7("div", { ref: loadMoreTriggerRef }),
|
|
1936
|
+
messages.map((message) => /* @__PURE__ */ jsx7(
|
|
1894
1937
|
MessageItem,
|
|
1895
1938
|
{
|
|
1896
1939
|
message,
|
|
@@ -1901,10 +1944,10 @@ function MessageList({
|
|
|
1901
1944
|
},
|
|
1902
1945
|
message.id
|
|
1903
1946
|
)),
|
|
1904
|
-
isTyping && /* @__PURE__ */
|
|
1905
|
-
/* @__PURE__ */
|
|
1906
|
-
/* @__PURE__ */
|
|
1907
|
-
/* @__PURE__ */
|
|
1947
|
+
isTyping && /* @__PURE__ */ jsxs6("div", { className: "flex gap-2.5 mb-3", children: [
|
|
1948
|
+
/* @__PURE__ */ jsx7("div", { className: "flex-shrink-0 mt-auto mb-5", children: /* @__PURE__ */ jsx7(XcelsiorAvatar, { size: 28 }) }),
|
|
1949
|
+
/* @__PURE__ */ jsxs6("div", { className: "flex flex-col items-start", children: [
|
|
1950
|
+
/* @__PURE__ */ jsx7(
|
|
1908
1951
|
"div",
|
|
1909
1952
|
{
|
|
1910
1953
|
className: "px-4 py-3",
|
|
@@ -1913,7 +1956,7 @@ function MessageList({
|
|
|
1913
1956
|
borderRadius: "18px 18px 18px 4px",
|
|
1914
1957
|
boxShadow: isLightTheme ? "inset 0 0 0 1px rgba(0,0,0,0.06)" : "inset 0 0 0 0.5px rgba(255,255,255,0.06), inset 0 1px 0 0 rgba(255,255,255,0.08)"
|
|
1915
1958
|
},
|
|
1916
|
-
children: /* @__PURE__ */
|
|
1959
|
+
children: /* @__PURE__ */ jsx7("div", { className: "flex gap-1.5 items-center", style: { height: 16 }, children: [0, 1, 2].map((i) => /* @__PURE__ */ jsx7(
|
|
1917
1960
|
"span",
|
|
1918
1961
|
{
|
|
1919
1962
|
className: "rounded-full animate-bounce",
|
|
@@ -1929,7 +1972,7 @@ function MessageList({
|
|
|
1929
1972
|
)) })
|
|
1930
1973
|
}
|
|
1931
1974
|
),
|
|
1932
|
-
typingUser && /* @__PURE__ */
|
|
1975
|
+
typingUser && /* @__PURE__ */ jsxs6(
|
|
1933
1976
|
"span",
|
|
1934
1977
|
{
|
|
1935
1978
|
className: "mt-1 px-1",
|
|
@@ -1946,14 +1989,14 @@ function MessageList({
|
|
|
1946
1989
|
)
|
|
1947
1990
|
] })
|
|
1948
1991
|
] }),
|
|
1949
|
-
isBotThinking && !isTyping && /* @__PURE__ */
|
|
1992
|
+
isBotThinking && !isTyping && /* @__PURE__ */ jsx7(
|
|
1950
1993
|
ThinkingIndicator,
|
|
1951
1994
|
{
|
|
1952
1995
|
theme,
|
|
1953
1996
|
lastUserMessage: messages.filter((m) => m.senderType === "customer").pop()?.content
|
|
1954
1997
|
}
|
|
1955
1998
|
),
|
|
1956
|
-
/* @__PURE__ */
|
|
1999
|
+
/* @__PURE__ */ jsx7("div", { ref: messagesEndRef })
|
|
1957
2000
|
]
|
|
1958
2001
|
}
|
|
1959
2002
|
);
|
|
@@ -1963,7 +2006,7 @@ function MessageList({
|
|
|
1963
2006
|
import { useEffect as useEffect7, useRef as useRef5, useState as useState7 } from "react";
|
|
1964
2007
|
import { createPortal } from "react-dom";
|
|
1965
2008
|
import Picker from "@emoji-mart/react";
|
|
1966
|
-
import { Fragment, jsx as
|
|
2009
|
+
import { Fragment as Fragment2, jsx as jsx8, jsxs as jsxs7 } from "react/jsx-runtime";
|
|
1967
2010
|
function isLightColor(color) {
|
|
1968
2011
|
let r = 0, g = 0, b = 0;
|
|
1969
2012
|
if (color.startsWith("#")) {
|
|
@@ -2141,7 +2184,7 @@ ${uploadedFile.markdown}
|
|
|
2141
2184
|
};
|
|
2142
2185
|
const canSend = message.trim().length > 0 && !disabled;
|
|
2143
2186
|
const placeholderColor = isLightTheme ? "rgba(0,0,0,0.35)" : "rgba(247,247,248,0.3)";
|
|
2144
|
-
return /* @__PURE__ */
|
|
2187
|
+
return /* @__PURE__ */ jsxs7(
|
|
2145
2188
|
"div",
|
|
2146
2189
|
{
|
|
2147
2190
|
className: "px-4 py-3",
|
|
@@ -2149,7 +2192,7 @@ ${uploadedFile.markdown}
|
|
|
2149
2192
|
borderTop: isLightTheme ? "1px solid rgba(0,0,0,0.06)" : "1px solid rgba(255,255,255,0.06)"
|
|
2150
2193
|
},
|
|
2151
2194
|
children: [
|
|
2152
|
-
/* @__PURE__ */
|
|
2195
|
+
/* @__PURE__ */ jsxs7(
|
|
2153
2196
|
"div",
|
|
2154
2197
|
{
|
|
2155
2198
|
className: "relative flex items-center rounded-full transition-all duration-200",
|
|
@@ -2161,8 +2204,8 @@ ${uploadedFile.markdown}
|
|
|
2161
2204
|
backdropFilter: "blur(32px)"
|
|
2162
2205
|
},
|
|
2163
2206
|
children: [
|
|
2164
|
-
/* @__PURE__ */
|
|
2165
|
-
/* @__PURE__ */
|
|
2207
|
+
/* @__PURE__ */ jsx8("style", { children: `.xchat-input::placeholder { color: ${placeholderColor}; }` }),
|
|
2208
|
+
/* @__PURE__ */ jsx8(
|
|
2166
2209
|
"textarea",
|
|
2167
2210
|
{
|
|
2168
2211
|
ref: textAreaRef,
|
|
@@ -2191,8 +2234,8 @@ ${uploadedFile.markdown}
|
|
|
2191
2234
|
disabled
|
|
2192
2235
|
}
|
|
2193
2236
|
),
|
|
2194
|
-
/* @__PURE__ */
|
|
2195
|
-
enableEmoji && /* @__PURE__ */
|
|
2237
|
+
/* @__PURE__ */ jsxs7("div", { className: "flex items-center gap-1 px-2 shrink-0", children: [
|
|
2238
|
+
enableEmoji && /* @__PURE__ */ jsx8(
|
|
2196
2239
|
"button",
|
|
2197
2240
|
{
|
|
2198
2241
|
ref: emojiButtonRef,
|
|
@@ -2222,7 +2265,7 @@ ${uploadedFile.markdown}
|
|
|
2222
2265
|
},
|
|
2223
2266
|
disabled,
|
|
2224
2267
|
"aria-label": "Add emoji",
|
|
2225
|
-
children: /* @__PURE__ */
|
|
2268
|
+
children: /* @__PURE__ */ jsxs7(
|
|
2226
2269
|
"svg",
|
|
2227
2270
|
{
|
|
2228
2271
|
width: "18",
|
|
@@ -2235,18 +2278,18 @@ ${uploadedFile.markdown}
|
|
|
2235
2278
|
strokeLinejoin: "round",
|
|
2236
2279
|
"aria-hidden": "true",
|
|
2237
2280
|
children: [
|
|
2238
|
-
/* @__PURE__ */
|
|
2239
|
-
/* @__PURE__ */
|
|
2240
|
-
/* @__PURE__ */
|
|
2241
|
-
/* @__PURE__ */
|
|
2242
|
-
/* @__PURE__ */
|
|
2281
|
+
/* @__PURE__ */ jsx8("title", { children: "Emoji" }),
|
|
2282
|
+
/* @__PURE__ */ jsx8("circle", { cx: "12", cy: "12", r: "10" }),
|
|
2283
|
+
/* @__PURE__ */ jsx8("path", { d: "M8 14s1.5 2 4 2 4-2 4-2" }),
|
|
2284
|
+
/* @__PURE__ */ jsx8("line", { x1: "9", y1: "9", x2: "9.01", y2: "9" }),
|
|
2285
|
+
/* @__PURE__ */ jsx8("line", { x1: "15", y1: "9", x2: "15.01", y2: "9" })
|
|
2243
2286
|
]
|
|
2244
2287
|
}
|
|
2245
2288
|
)
|
|
2246
2289
|
}
|
|
2247
2290
|
),
|
|
2248
|
-
enableFileUpload && fileUpload.canUpload && /* @__PURE__ */
|
|
2249
|
-
/* @__PURE__ */
|
|
2291
|
+
enableFileUpload && fileUpload.canUpload && /* @__PURE__ */ jsxs7(Fragment2, { children: [
|
|
2292
|
+
/* @__PURE__ */ jsx8(
|
|
2250
2293
|
"button",
|
|
2251
2294
|
{
|
|
2252
2295
|
type: "button",
|
|
@@ -2266,7 +2309,7 @@ ${uploadedFile.markdown}
|
|
|
2266
2309
|
},
|
|
2267
2310
|
disabled: disabled || fileUpload.isUploading,
|
|
2268
2311
|
"aria-label": "Attach file",
|
|
2269
|
-
children: fileUpload.isUploading ? /* @__PURE__ */
|
|
2312
|
+
children: fileUpload.isUploading ? /* @__PURE__ */ jsxs7(
|
|
2270
2313
|
"svg",
|
|
2271
2314
|
{
|
|
2272
2315
|
width: "18",
|
|
@@ -2278,11 +2321,11 @@ ${uploadedFile.markdown}
|
|
|
2278
2321
|
className: "animate-spin",
|
|
2279
2322
|
"aria-hidden": "true",
|
|
2280
2323
|
children: [
|
|
2281
|
-
/* @__PURE__ */
|
|
2282
|
-
/* @__PURE__ */
|
|
2324
|
+
/* @__PURE__ */ jsx8("title", { children: "Uploading" }),
|
|
2325
|
+
/* @__PURE__ */ jsx8("path", { d: "M21 12a9 9 0 11-6.219-8.56" })
|
|
2283
2326
|
]
|
|
2284
2327
|
}
|
|
2285
|
-
) : /* @__PURE__ */
|
|
2328
|
+
) : /* @__PURE__ */ jsxs7(
|
|
2286
2329
|
"svg",
|
|
2287
2330
|
{
|
|
2288
2331
|
width: "18",
|
|
@@ -2295,14 +2338,14 @@ ${uploadedFile.markdown}
|
|
|
2295
2338
|
strokeLinejoin: "round",
|
|
2296
2339
|
"aria-hidden": "true",
|
|
2297
2340
|
children: [
|
|
2298
|
-
/* @__PURE__ */
|
|
2299
|
-
/* @__PURE__ */
|
|
2341
|
+
/* @__PURE__ */ jsx8("title", { children: "Attach file" }),
|
|
2342
|
+
/* @__PURE__ */ jsx8("path", { d: "M21.44 11.05l-9.19 9.19a6 6 0 01-8.49-8.49l9.19-9.19a4 4 0 015.66 5.66l-9.2 9.19a2 2 0 01-2.83-2.83l8.49-8.48" })
|
|
2300
2343
|
]
|
|
2301
2344
|
}
|
|
2302
2345
|
)
|
|
2303
2346
|
}
|
|
2304
2347
|
),
|
|
2305
|
-
/* @__PURE__ */
|
|
2348
|
+
/* @__PURE__ */ jsx8(
|
|
2306
2349
|
"input",
|
|
2307
2350
|
{
|
|
2308
2351
|
ref: fileInputRef,
|
|
@@ -2313,7 +2356,7 @@ ${uploadedFile.markdown}
|
|
|
2313
2356
|
}
|
|
2314
2357
|
)
|
|
2315
2358
|
] }),
|
|
2316
|
-
/* @__PURE__ */
|
|
2359
|
+
/* @__PURE__ */ jsx8(
|
|
2317
2360
|
"button",
|
|
2318
2361
|
{
|
|
2319
2362
|
type: "button",
|
|
@@ -2328,7 +2371,7 @@ ${uploadedFile.markdown}
|
|
|
2328
2371
|
boxShadow: canSend ? `0 2px 8px -2px ${primaryColor}60` : "none"
|
|
2329
2372
|
},
|
|
2330
2373
|
"aria-label": "Send message",
|
|
2331
|
-
children: /* @__PURE__ */
|
|
2374
|
+
children: /* @__PURE__ */ jsxs7(
|
|
2332
2375
|
"svg",
|
|
2333
2376
|
{
|
|
2334
2377
|
width: "18",
|
|
@@ -2341,9 +2384,9 @@ ${uploadedFile.markdown}
|
|
|
2341
2384
|
strokeLinejoin: "round",
|
|
2342
2385
|
"aria-hidden": "true",
|
|
2343
2386
|
children: [
|
|
2344
|
-
/* @__PURE__ */
|
|
2345
|
-
/* @__PURE__ */
|
|
2346
|
-
/* @__PURE__ */
|
|
2387
|
+
/* @__PURE__ */ jsx8("title", { children: "Send" }),
|
|
2388
|
+
/* @__PURE__ */ jsx8("line", { x1: "22", y1: "2", x2: "11", y2: "13" }),
|
|
2389
|
+
/* @__PURE__ */ jsx8("polygon", { points: "22 2 15 22 11 13 2 9 22 2" })
|
|
2347
2390
|
]
|
|
2348
2391
|
}
|
|
2349
2392
|
)
|
|
@@ -2353,8 +2396,8 @@ ${uploadedFile.markdown}
|
|
|
2353
2396
|
]
|
|
2354
2397
|
}
|
|
2355
2398
|
),
|
|
2356
|
-
fileUpload.isUploading && /* @__PURE__ */
|
|
2357
|
-
/* @__PURE__ */
|
|
2399
|
+
fileUpload.isUploading && /* @__PURE__ */ jsxs7("div", { className: "mt-2 px-1", children: [
|
|
2400
|
+
/* @__PURE__ */ jsx8(
|
|
2358
2401
|
"div",
|
|
2359
2402
|
{
|
|
2360
2403
|
className: "w-full rounded-full overflow-hidden",
|
|
@@ -2362,7 +2405,7 @@ ${uploadedFile.markdown}
|
|
|
2362
2405
|
height: 3,
|
|
2363
2406
|
backgroundColor: isLightTheme ? "rgba(0,0,0,0.06)" : "rgba(255,255,255,0.06)"
|
|
2364
2407
|
},
|
|
2365
|
-
children: /* @__PURE__ */
|
|
2408
|
+
children: /* @__PURE__ */ jsx8(
|
|
2366
2409
|
"div",
|
|
2367
2410
|
{
|
|
2368
2411
|
className: "h-full rounded-full transition-all duration-300",
|
|
@@ -2374,7 +2417,7 @@ ${uploadedFile.markdown}
|
|
|
2374
2417
|
)
|
|
2375
2418
|
}
|
|
2376
2419
|
),
|
|
2377
|
-
/* @__PURE__ */
|
|
2420
|
+
/* @__PURE__ */ jsxs7(
|
|
2378
2421
|
"p",
|
|
2379
2422
|
{
|
|
2380
2423
|
className: "mt-1",
|
|
@@ -2392,7 +2435,7 @@ ${uploadedFile.markdown}
|
|
|
2392
2435
|
)
|
|
2393
2436
|
] }),
|
|
2394
2437
|
showEmojiPicker && emojiData && emojiPickerPosition && typeof document !== "undefined" && createPortal(
|
|
2395
|
-
/* @__PURE__ */
|
|
2438
|
+
/* @__PURE__ */ jsx8(
|
|
2396
2439
|
"div",
|
|
2397
2440
|
{
|
|
2398
2441
|
ref: emojiPickerRef,
|
|
@@ -2407,7 +2450,7 @@ ${uploadedFile.markdown}
|
|
|
2407
2450
|
"0 16px 48px -8px rgba(0,0,0,0.5)"
|
|
2408
2451
|
].join(", ")
|
|
2409
2452
|
},
|
|
2410
|
-
children: /* @__PURE__ */
|
|
2453
|
+
children: /* @__PURE__ */ jsx8(
|
|
2411
2454
|
Picker,
|
|
2412
2455
|
{
|
|
2413
2456
|
data: emojiData,
|
|
@@ -2433,7 +2476,7 @@ ${uploadedFile.markdown}
|
|
|
2433
2476
|
}
|
|
2434
2477
|
|
|
2435
2478
|
// src/components/ChatWidget.tsx
|
|
2436
|
-
import { jsx as
|
|
2479
|
+
import { jsx as jsx9, jsxs as jsxs8 } from "react/jsx-runtime";
|
|
2437
2480
|
function getAnonymousUser() {
|
|
2438
2481
|
let anonId;
|
|
2439
2482
|
try {
|
|
@@ -2567,14 +2610,14 @@ function ChatWidget({
|
|
|
2567
2610
|
outlineOffset: -1,
|
|
2568
2611
|
transition: "outline 150ms ease"
|
|
2569
2612
|
};
|
|
2570
|
-
return /* @__PURE__ */
|
|
2613
|
+
return /* @__PURE__ */ jsxs8(
|
|
2571
2614
|
"div",
|
|
2572
2615
|
{
|
|
2573
2616
|
className: isFullPage ? `flex flex-col h-full ${className}` : `fixed bottom-20 ${positionClass} z-50 flex flex-col overflow-hidden ${className}`,
|
|
2574
2617
|
style: { ...containerStyle, ...dotGridBg, ...edgeHintStyle },
|
|
2575
2618
|
...!isFullPage ? containerResizeProps : {},
|
|
2576
2619
|
children: [
|
|
2577
|
-
!isFullPage && /* @__PURE__ */
|
|
2620
|
+
!isFullPage && /* @__PURE__ */ jsx9(
|
|
2578
2621
|
ChatHeader,
|
|
2579
2622
|
{
|
|
2580
2623
|
agent: effectiveUser.type === "customer" ? {
|
|
@@ -2588,7 +2631,7 @@ function ChatWidget({
|
|
|
2588
2631
|
theme: config.theme
|
|
2589
2632
|
}
|
|
2590
2633
|
),
|
|
2591
|
-
!websocket.isConnected && /* @__PURE__ */
|
|
2634
|
+
!websocket.isConnected && /* @__PURE__ */ jsx9(
|
|
2592
2635
|
"div",
|
|
2593
2636
|
{
|
|
2594
2637
|
className: "px-4 py-2",
|
|
@@ -2596,15 +2639,15 @@ function ChatWidget({
|
|
|
2596
2639
|
backgroundColor: isLightTheme ? "rgba(255,169,56,0.08)" : "rgba(255,169,56,0.06)",
|
|
2597
2640
|
borderBottom: `1px solid rgba(255,169,56,${isLightTheme ? "0.15" : "0.12"})`
|
|
2598
2641
|
},
|
|
2599
|
-
children: /* @__PURE__ */
|
|
2600
|
-
/* @__PURE__ */
|
|
2642
|
+
children: /* @__PURE__ */ jsxs8("div", { className: "flex items-center gap-2", children: [
|
|
2643
|
+
/* @__PURE__ */ jsx9(
|
|
2601
2644
|
"div",
|
|
2602
2645
|
{
|
|
2603
2646
|
className: "w-1.5 h-1.5 rounded-full animate-pulse",
|
|
2604
2647
|
style: { backgroundColor: config.theme?.statusCaution || "#ffa938" }
|
|
2605
2648
|
}
|
|
2606
2649
|
),
|
|
2607
|
-
/* @__PURE__ */
|
|
2650
|
+
/* @__PURE__ */ jsx9(
|
|
2608
2651
|
"span",
|
|
2609
2652
|
{
|
|
2610
2653
|
style: {
|
|
@@ -2615,7 +2658,7 @@ function ChatWidget({
|
|
|
2615
2658
|
children: "Reconnecting..."
|
|
2616
2659
|
}
|
|
2617
2660
|
),
|
|
2618
|
-
/* @__PURE__ */
|
|
2661
|
+
/* @__PURE__ */ jsx9(
|
|
2619
2662
|
"button",
|
|
2620
2663
|
{
|
|
2621
2664
|
type: "button",
|
|
@@ -2639,8 +2682,8 @@ function ChatWidget({
|
|
|
2639
2682
|
] })
|
|
2640
2683
|
}
|
|
2641
2684
|
),
|
|
2642
|
-
isLoading ? /* @__PURE__ */
|
|
2643
|
-
/* @__PURE__ */
|
|
2685
|
+
isLoading ? /* @__PURE__ */ jsx9("div", { className: "flex-1 flex items-center justify-center", children: /* @__PURE__ */ jsxs8("div", { className: "text-center", children: [
|
|
2686
|
+
/* @__PURE__ */ jsx9(
|
|
2644
2687
|
"div",
|
|
2645
2688
|
{
|
|
2646
2689
|
className: "w-7 h-7 border-2 border-t-transparent rounded-full animate-spin mx-auto mb-3",
|
|
@@ -2650,7 +2693,7 @@ function ChatWidget({
|
|
|
2650
2693
|
}
|
|
2651
2694
|
}
|
|
2652
2695
|
),
|
|
2653
|
-
/* @__PURE__ */
|
|
2696
|
+
/* @__PURE__ */ jsx9(
|
|
2654
2697
|
"p",
|
|
2655
2698
|
{
|
|
2656
2699
|
style: {
|
|
@@ -2661,7 +2704,7 @@ function ChatWidget({
|
|
|
2661
2704
|
children: "Loading messages..."
|
|
2662
2705
|
}
|
|
2663
2706
|
)
|
|
2664
|
-
] }) }) : /* @__PURE__ */
|
|
2707
|
+
] }) }) : /* @__PURE__ */ jsx9(
|
|
2665
2708
|
MessageList,
|
|
2666
2709
|
{
|
|
2667
2710
|
messages,
|
|
@@ -2677,7 +2720,7 @@ function ChatWidget({
|
|
|
2677
2720
|
isBotThinking
|
|
2678
2721
|
}
|
|
2679
2722
|
),
|
|
2680
|
-
/* @__PURE__ */
|
|
2723
|
+
/* @__PURE__ */ jsx9(
|
|
2681
2724
|
ChatInput,
|
|
2682
2725
|
{
|
|
2683
2726
|
onSend: handleSendMessage,
|
|
@@ -2687,7 +2730,7 @@ function ChatWidget({
|
|
|
2687
2730
|
disabled: !websocket.isConnected
|
|
2688
2731
|
}
|
|
2689
2732
|
),
|
|
2690
|
-
!isFullPage && /* @__PURE__ */
|
|
2733
|
+
!isFullPage && /* @__PURE__ */ jsx9(
|
|
2691
2734
|
"div",
|
|
2692
2735
|
{
|
|
2693
2736
|
className: "px-4 py-1.5 text-center",
|
|
@@ -2695,7 +2738,7 @@ function ChatWidget({
|
|
|
2695
2738
|
borderTop: isLightTheme ? "1px solid rgba(0,0,0,0.06)" : "1px solid rgba(255,255,255,0.06)",
|
|
2696
2739
|
backgroundColor: isLightTheme ? "rgba(0,0,0,0.03)" : "rgba(0,0,0,0.2)"
|
|
2697
2740
|
},
|
|
2698
|
-
children: /* @__PURE__ */
|
|
2741
|
+
children: /* @__PURE__ */ jsxs8(
|
|
2699
2742
|
"p",
|
|
2700
2743
|
{
|
|
2701
2744
|
style: {
|
|
@@ -2706,7 +2749,7 @@ function ChatWidget({
|
|
|
2706
2749
|
children: [
|
|
2707
2750
|
"Powered by",
|
|
2708
2751
|
" ",
|
|
2709
|
-
/* @__PURE__ */
|
|
2752
|
+
/* @__PURE__ */ jsx9("span", { style: {
|
|
2710
2753
|
fontWeight: 600,
|
|
2711
2754
|
color: isLightTheme ? "rgba(0,0,0,0.5)" : "rgba(247,247,248,0.45)"
|
|
2712
2755
|
}, children: "Xcelsior" })
|
|
@@ -2725,7 +2768,7 @@ import { useCallback as useCallback8, useEffect as useEffect10, useState as useS
|
|
|
2725
2768
|
|
|
2726
2769
|
// src/components/PreChatForm.tsx
|
|
2727
2770
|
import { useState as useState8 } from "react";
|
|
2728
|
-
import { jsx as
|
|
2771
|
+
import { jsx as jsx10, jsxs as jsxs9 } from "react/jsx-runtime";
|
|
2729
2772
|
function PreChatForm({
|
|
2730
2773
|
onSubmit,
|
|
2731
2774
|
className = "",
|
|
@@ -2786,7 +2829,7 @@ function PreChatForm({
|
|
|
2786
2829
|
transition: "box-shadow 0.2s ease",
|
|
2787
2830
|
caretColor: "#337eff"
|
|
2788
2831
|
});
|
|
2789
|
-
return /* @__PURE__ */
|
|
2832
|
+
return /* @__PURE__ */ jsxs9(
|
|
2790
2833
|
"div",
|
|
2791
2834
|
{
|
|
2792
2835
|
className: `fixed bottom-4 right-4 z-50 flex flex-col overflow-hidden ${className}`,
|
|
@@ -2806,7 +2849,7 @@ function PreChatForm({
|
|
|
2806
2849
|
backgroundSize: "24px 24px"
|
|
2807
2850
|
},
|
|
2808
2851
|
children: [
|
|
2809
|
-
/* @__PURE__ */
|
|
2852
|
+
/* @__PURE__ */ jsxs9(
|
|
2810
2853
|
"div",
|
|
2811
2854
|
{
|
|
2812
2855
|
className: "relative text-white overflow-hidden",
|
|
@@ -2814,7 +2857,7 @@ function PreChatForm({
|
|
|
2814
2857
|
background: "linear-gradient(135deg, #337eff 0%, #005eff 50%, #001a66 100%)"
|
|
2815
2858
|
},
|
|
2816
2859
|
children: [
|
|
2817
|
-
/* @__PURE__ */
|
|
2860
|
+
/* @__PURE__ */ jsx10(
|
|
2818
2861
|
"div",
|
|
2819
2862
|
{
|
|
2820
2863
|
className: "absolute inset-0 pointer-events-none",
|
|
@@ -2823,9 +2866,9 @@ function PreChatForm({
|
|
|
2823
2866
|
}
|
|
2824
2867
|
}
|
|
2825
2868
|
),
|
|
2826
|
-
/* @__PURE__ */
|
|
2827
|
-
/* @__PURE__ */
|
|
2828
|
-
/* @__PURE__ */
|
|
2869
|
+
/* @__PURE__ */ jsx10("div", { className: "relative px-5 py-4", children: /* @__PURE__ */ jsxs9("div", { className: "flex items-start justify-between", children: [
|
|
2870
|
+
/* @__PURE__ */ jsxs9("div", { className: "flex-1", children: [
|
|
2871
|
+
/* @__PURE__ */ jsx10(
|
|
2829
2872
|
"h2",
|
|
2830
2873
|
{
|
|
2831
2874
|
className: "font-semibold",
|
|
@@ -2836,7 +2879,7 @@ function PreChatForm({
|
|
|
2836
2879
|
children: "Start a Conversation"
|
|
2837
2880
|
}
|
|
2838
2881
|
),
|
|
2839
|
-
/* @__PURE__ */
|
|
2882
|
+
/* @__PURE__ */ jsx10(
|
|
2840
2883
|
"p",
|
|
2841
2884
|
{
|
|
2842
2885
|
className: "mt-1",
|
|
@@ -2849,8 +2892,8 @@ function PreChatForm({
|
|
|
2849
2892
|
}
|
|
2850
2893
|
)
|
|
2851
2894
|
] }),
|
|
2852
|
-
/* @__PURE__ */
|
|
2853
|
-
/* @__PURE__ */
|
|
2895
|
+
/* @__PURE__ */ jsxs9("div", { className: "flex gap-1 ml-2", children: [
|
|
2896
|
+
/* @__PURE__ */ jsx10(
|
|
2854
2897
|
"button",
|
|
2855
2898
|
{
|
|
2856
2899
|
type: "button",
|
|
@@ -2864,7 +2907,7 @@ function PreChatForm({
|
|
|
2864
2907
|
e.currentTarget.style.backgroundColor = "transparent";
|
|
2865
2908
|
},
|
|
2866
2909
|
"aria-label": "Minimize chat",
|
|
2867
|
-
children: /* @__PURE__ */
|
|
2910
|
+
children: /* @__PURE__ */ jsxs9(
|
|
2868
2911
|
"svg",
|
|
2869
2912
|
{
|
|
2870
2913
|
width: "18",
|
|
@@ -2873,8 +2916,8 @@ function PreChatForm({
|
|
|
2873
2916
|
stroke: "currentColor",
|
|
2874
2917
|
viewBox: "0 0 24 24",
|
|
2875
2918
|
children: [
|
|
2876
|
-
/* @__PURE__ */
|
|
2877
|
-
/* @__PURE__ */
|
|
2919
|
+
/* @__PURE__ */ jsx10("title", { children: "Minimize" }),
|
|
2920
|
+
/* @__PURE__ */ jsx10(
|
|
2878
2921
|
"path",
|
|
2879
2922
|
{
|
|
2880
2923
|
strokeLinecap: "round",
|
|
@@ -2888,7 +2931,7 @@ function PreChatForm({
|
|
|
2888
2931
|
)
|
|
2889
2932
|
}
|
|
2890
2933
|
),
|
|
2891
|
-
/* @__PURE__ */
|
|
2934
|
+
/* @__PURE__ */ jsx10(
|
|
2892
2935
|
"button",
|
|
2893
2936
|
{
|
|
2894
2937
|
type: "button",
|
|
@@ -2902,7 +2945,7 @@ function PreChatForm({
|
|
|
2902
2945
|
e.currentTarget.style.backgroundColor = "transparent";
|
|
2903
2946
|
},
|
|
2904
2947
|
"aria-label": "Close chat",
|
|
2905
|
-
children: /* @__PURE__ */
|
|
2948
|
+
children: /* @__PURE__ */ jsxs9(
|
|
2906
2949
|
"svg",
|
|
2907
2950
|
{
|
|
2908
2951
|
width: "18",
|
|
@@ -2911,8 +2954,8 @@ function PreChatForm({
|
|
|
2911
2954
|
stroke: "currentColor",
|
|
2912
2955
|
viewBox: "0 0 24 24",
|
|
2913
2956
|
children: [
|
|
2914
|
-
/* @__PURE__ */
|
|
2915
|
-
/* @__PURE__ */
|
|
2957
|
+
/* @__PURE__ */ jsx10("title", { children: "Close" }),
|
|
2958
|
+
/* @__PURE__ */ jsx10(
|
|
2916
2959
|
"path",
|
|
2917
2960
|
{
|
|
2918
2961
|
strokeLinecap: "round",
|
|
@@ -2928,7 +2971,7 @@ function PreChatForm({
|
|
|
2928
2971
|
)
|
|
2929
2972
|
] })
|
|
2930
2973
|
] }) }),
|
|
2931
|
-
/* @__PURE__ */
|
|
2974
|
+
/* @__PURE__ */ jsx10(
|
|
2932
2975
|
"div",
|
|
2933
2976
|
{
|
|
2934
2977
|
className: "h-px",
|
|
@@ -2940,9 +2983,9 @@ function PreChatForm({
|
|
|
2940
2983
|
]
|
|
2941
2984
|
}
|
|
2942
2985
|
),
|
|
2943
|
-
/* @__PURE__ */
|
|
2944
|
-
/* @__PURE__ */
|
|
2945
|
-
/* @__PURE__ */
|
|
2986
|
+
/* @__PURE__ */ jsxs9("form", { onSubmit: handleSubmit, className: "p-5 flex flex-col gap-4", children: [
|
|
2987
|
+
/* @__PURE__ */ jsxs9("div", { children: [
|
|
2988
|
+
/* @__PURE__ */ jsxs9(
|
|
2946
2989
|
"label",
|
|
2947
2990
|
{
|
|
2948
2991
|
htmlFor: "chat-name",
|
|
@@ -2954,11 +2997,11 @@ function PreChatForm({
|
|
|
2954
2997
|
},
|
|
2955
2998
|
children: [
|
|
2956
2999
|
"Name ",
|
|
2957
|
-
/* @__PURE__ */
|
|
3000
|
+
/* @__PURE__ */ jsx10("span", { style: { color: "#ff6363" }, children: "*" })
|
|
2958
3001
|
]
|
|
2959
3002
|
}
|
|
2960
3003
|
),
|
|
2961
|
-
/* @__PURE__ */
|
|
3004
|
+
/* @__PURE__ */ jsx10(
|
|
2962
3005
|
"input",
|
|
2963
3006
|
{
|
|
2964
3007
|
type: "text",
|
|
@@ -2978,7 +3021,7 @@ function PreChatForm({
|
|
|
2978
3021
|
autoComplete: "name"
|
|
2979
3022
|
}
|
|
2980
3023
|
),
|
|
2981
|
-
errors.name && /* @__PURE__ */
|
|
3024
|
+
errors.name && /* @__PURE__ */ jsx10(
|
|
2982
3025
|
"p",
|
|
2983
3026
|
{
|
|
2984
3027
|
className: "mt-1.5",
|
|
@@ -2992,8 +3035,8 @@ function PreChatForm({
|
|
|
2992
3035
|
}
|
|
2993
3036
|
)
|
|
2994
3037
|
] }),
|
|
2995
|
-
/* @__PURE__ */
|
|
2996
|
-
/* @__PURE__ */
|
|
3038
|
+
/* @__PURE__ */ jsxs9("div", { children: [
|
|
3039
|
+
/* @__PURE__ */ jsxs9(
|
|
2997
3040
|
"label",
|
|
2998
3041
|
{
|
|
2999
3042
|
htmlFor: "chat-email",
|
|
@@ -3005,11 +3048,11 @@ function PreChatForm({
|
|
|
3005
3048
|
},
|
|
3006
3049
|
children: [
|
|
3007
3050
|
"Email ",
|
|
3008
|
-
/* @__PURE__ */
|
|
3051
|
+
/* @__PURE__ */ jsx10("span", { style: { color: "#ff6363" }, children: "*" })
|
|
3009
3052
|
]
|
|
3010
3053
|
}
|
|
3011
3054
|
),
|
|
3012
|
-
/* @__PURE__ */
|
|
3055
|
+
/* @__PURE__ */ jsx10(
|
|
3013
3056
|
"input",
|
|
3014
3057
|
{
|
|
3015
3058
|
type: "email",
|
|
@@ -3029,7 +3072,7 @@ function PreChatForm({
|
|
|
3029
3072
|
autoComplete: "email"
|
|
3030
3073
|
}
|
|
3031
3074
|
),
|
|
3032
|
-
errors.email && /* @__PURE__ */
|
|
3075
|
+
errors.email && /* @__PURE__ */ jsx10(
|
|
3033
3076
|
"p",
|
|
3034
3077
|
{
|
|
3035
3078
|
className: "mt-1.5",
|
|
@@ -3043,7 +3086,7 @@ function PreChatForm({
|
|
|
3043
3086
|
}
|
|
3044
3087
|
)
|
|
3045
3088
|
] }),
|
|
3046
|
-
/* @__PURE__ */
|
|
3089
|
+
/* @__PURE__ */ jsx10(
|
|
3047
3090
|
"button",
|
|
3048
3091
|
{
|
|
3049
3092
|
type: "submit",
|
|
@@ -3065,8 +3108,8 @@ function PreChatForm({
|
|
|
3065
3108
|
onMouseLeave: (e) => {
|
|
3066
3109
|
e.currentTarget.style.boxShadow = "0 4px 16px -4px rgba(51,126,255,0.4)";
|
|
3067
3110
|
},
|
|
3068
|
-
children: isSubmitting ? /* @__PURE__ */
|
|
3069
|
-
/* @__PURE__ */
|
|
3111
|
+
children: isSubmitting ? /* @__PURE__ */ jsxs9("span", { className: "flex items-center justify-center gap-2", children: [
|
|
3112
|
+
/* @__PURE__ */ jsxs9(
|
|
3070
3113
|
"svg",
|
|
3071
3114
|
{
|
|
3072
3115
|
className: "animate-spin",
|
|
@@ -3078,8 +3121,8 @@ function PreChatForm({
|
|
|
3078
3121
|
strokeWidth: "2",
|
|
3079
3122
|
"aria-label": "Loading",
|
|
3080
3123
|
children: [
|
|
3081
|
-
/* @__PURE__ */
|
|
3082
|
-
/* @__PURE__ */
|
|
3124
|
+
/* @__PURE__ */ jsx10("title", { children: "Loading" }),
|
|
3125
|
+
/* @__PURE__ */ jsx10("path", { d: "M21 12a9 9 0 11-6.219-8.56" })
|
|
3083
3126
|
]
|
|
3084
3127
|
}
|
|
3085
3128
|
),
|
|
@@ -3087,7 +3130,7 @@ function PreChatForm({
|
|
|
3087
3130
|
] }) : "Start Chat"
|
|
3088
3131
|
}
|
|
3089
3132
|
),
|
|
3090
|
-
/* @__PURE__ */
|
|
3133
|
+
/* @__PURE__ */ jsx10(
|
|
3091
3134
|
"p",
|
|
3092
3135
|
{
|
|
3093
3136
|
className: "text-center",
|
|
@@ -3100,7 +3143,7 @@ function PreChatForm({
|
|
|
3100
3143
|
}
|
|
3101
3144
|
)
|
|
3102
3145
|
] }),
|
|
3103
|
-
/* @__PURE__ */
|
|
3146
|
+
/* @__PURE__ */ jsx10(
|
|
3104
3147
|
"div",
|
|
3105
3148
|
{
|
|
3106
3149
|
className: "px-4 py-1.5 text-center",
|
|
@@ -3108,7 +3151,7 @@ function PreChatForm({
|
|
|
3108
3151
|
borderTop: "1px solid rgba(255,255,255,0.06)",
|
|
3109
3152
|
backgroundColor: "rgba(0,0,0,0.2)"
|
|
3110
3153
|
},
|
|
3111
|
-
children: /* @__PURE__ */
|
|
3154
|
+
children: /* @__PURE__ */ jsxs9(
|
|
3112
3155
|
"p",
|
|
3113
3156
|
{
|
|
3114
3157
|
style: {
|
|
@@ -3119,7 +3162,7 @@ function PreChatForm({
|
|
|
3119
3162
|
children: [
|
|
3120
3163
|
"Powered by",
|
|
3121
3164
|
" ",
|
|
3122
|
-
/* @__PURE__ */
|
|
3165
|
+
/* @__PURE__ */ jsx10("span", { style: { fontWeight: 600, color: "rgba(247,247,248,0.45)" }, children: "Xcelsior" })
|
|
3123
3166
|
]
|
|
3124
3167
|
}
|
|
3125
3168
|
)
|
|
@@ -3233,7 +3276,7 @@ function useChatWidgetState({
|
|
|
3233
3276
|
}
|
|
3234
3277
|
|
|
3235
3278
|
// src/components/Chat.tsx
|
|
3236
|
-
import { jsx as
|
|
3279
|
+
import { jsx as jsx11, jsxs as jsxs10 } from "react/jsx-runtime";
|
|
3237
3280
|
function generateSessionId() {
|
|
3238
3281
|
if (typeof crypto !== "undefined" && crypto.randomUUID) {
|
|
3239
3282
|
return crypto.randomUUID();
|
|
@@ -3364,7 +3407,7 @@ function Chat({
|
|
|
3364
3407
|
const primaryColor = config.theme?.primary || "#337eff";
|
|
3365
3408
|
const primaryStrong = config.theme?.primaryStrong || "#005eff";
|
|
3366
3409
|
if (currentState === "minimized") {
|
|
3367
|
-
return /* @__PURE__ */
|
|
3410
|
+
return /* @__PURE__ */ jsx11("div", { className: `fixed bottom-5 ${positionClass} z-50 ${className}`, children: /* @__PURE__ */ jsxs10(
|
|
3368
3411
|
"button",
|
|
3369
3412
|
{
|
|
3370
3413
|
type: "button",
|
|
@@ -3389,8 +3432,8 @@ function Chat({
|
|
|
3389
3432
|
"aria-label": "Open chat",
|
|
3390
3433
|
...handlers,
|
|
3391
3434
|
children: [
|
|
3392
|
-
/* @__PURE__ */
|
|
3393
|
-
/* @__PURE__ */
|
|
3435
|
+
/* @__PURE__ */ jsx11(ChatBubbleIcon, { size: 28, color: "white", className: "pointer-events-none" }),
|
|
3436
|
+
/* @__PURE__ */ jsx11(
|
|
3394
3437
|
"span",
|
|
3395
3438
|
{
|
|
3396
3439
|
className: "absolute inset-0 rounded-full animate-ping pointer-events-none",
|
|
@@ -3406,7 +3449,7 @@ function Chat({
|
|
|
3406
3449
|
) });
|
|
3407
3450
|
}
|
|
3408
3451
|
if (identityMode === "form" && (!userInfo || !userInfo.email || !userInfo.name)) {
|
|
3409
|
-
return /* @__PURE__ */
|
|
3452
|
+
return /* @__PURE__ */ jsx11(
|
|
3410
3453
|
PreChatForm,
|
|
3411
3454
|
{
|
|
3412
3455
|
onSubmit: handlePreChatSubmit,
|
|
@@ -3432,7 +3475,7 @@ function Chat({
|
|
|
3432
3475
|
transform: "translateY(12px) scale(0.97)",
|
|
3433
3476
|
transition: "opacity 0.2s ease-in, transform 0.2s ease-in"
|
|
3434
3477
|
};
|
|
3435
|
-
return /* @__PURE__ */
|
|
3478
|
+
return /* @__PURE__ */ jsx11("div", { style: widgetAnimationStyle, children: /* @__PURE__ */ jsx11(
|
|
3436
3479
|
ChatWidget,
|
|
3437
3480
|
{
|
|
3438
3481
|
config: fullConfig,
|
|
@@ -3445,12 +3488,12 @@ function Chat({
|
|
|
3445
3488
|
}
|
|
3446
3489
|
|
|
3447
3490
|
// src/components/TypingIndicator.tsx
|
|
3448
|
-
import { jsx as
|
|
3491
|
+
import { jsx as jsx12, jsxs as jsxs11 } from "react/jsx-runtime";
|
|
3449
3492
|
function TypingIndicator({ isTyping, userName }) {
|
|
3450
3493
|
if (!isTyping) {
|
|
3451
3494
|
return null;
|
|
3452
3495
|
}
|
|
3453
|
-
return /* @__PURE__ */
|
|
3496
|
+
return /* @__PURE__ */ jsx12(
|
|
3454
3497
|
"div",
|
|
3455
3498
|
{
|
|
3456
3499
|
className: "px-4 py-2",
|
|
@@ -3458,8 +3501,8 @@ function TypingIndicator({ isTyping, userName }) {
|
|
|
3458
3501
|
borderTop: "1px solid rgba(255,255,255,0.06)",
|
|
3459
3502
|
backgroundColor: "rgba(0,0,0,0.15)"
|
|
3460
3503
|
},
|
|
3461
|
-
children: /* @__PURE__ */
|
|
3462
|
-
/* @__PURE__ */
|
|
3504
|
+
children: /* @__PURE__ */ jsxs11("div", { className: "flex items-center gap-2", children: [
|
|
3505
|
+
/* @__PURE__ */ jsx12("div", { className: "flex gap-1", children: [0, 1, 2].map((i) => /* @__PURE__ */ jsx12(
|
|
3463
3506
|
"span",
|
|
3464
3507
|
{
|
|
3465
3508
|
className: "rounded-full animate-bounce",
|
|
@@ -3473,7 +3516,7 @@ function TypingIndicator({ isTyping, userName }) {
|
|
|
3473
3516
|
},
|
|
3474
3517
|
i
|
|
3475
3518
|
)) }),
|
|
3476
|
-
/* @__PURE__ */
|
|
3519
|
+
/* @__PURE__ */ jsx12(
|
|
3477
3520
|
"span",
|
|
3478
3521
|
{
|
|
3479
3522
|
style: {
|