@enjoys/react-chatbot-plugin 1.1.0 → 1.3.0

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/index.mjs CHANGED
@@ -1,2469 +1,7 @@
1
- import _, { createContext as N, useCallback as v, useContext as Y, useEffect as A, useMemo as U, useReducer as Q, useRef as C, useState as I } from "react";
2
- import { Fragment as K, jsx as a, jsxs as x } from "react/jsx-runtime";
3
- function J(e, t) {
4
- switch (t.type) {
5
- case "TOGGLE_OPEN":
6
- return {
7
- ...e,
8
- isOpen: !e.isOpen
9
- };
10
- case "SET_OPEN":
11
- return {
12
- ...e,
13
- isOpen: t.payload
14
- };
15
- case "ADD_MESSAGE":
16
- return {
17
- ...e,
18
- messages: [...e.messages, t.payload]
19
- };
20
- case "ADD_MESSAGES":
21
- return {
22
- ...e,
23
- messages: [...e.messages, ...t.payload]
24
- };
25
- case "SET_TYPING":
26
- return {
27
- ...e,
28
- isTyping: t.payload
29
- };
30
- case "DISMISS_WELCOME":
31
- return {
32
- ...e,
33
- showWelcome: !1
34
- };
35
- case "SET_STEP":
36
- return {
37
- ...e,
38
- currentStepId: t.payload
39
- };
40
- case "SET_DATA":
41
- return {
42
- ...e,
43
- collectedData: {
44
- ...e.collectedData,
45
- ...t.payload
46
- }
47
- };
48
- case "SET_LOGGED_IN":
49
- return {
50
- ...e,
51
- isLoggedIn: t.payload
52
- };
53
- case "CLEAR_QUICK_REPLIES": {
54
- let r = -1;
55
- for (let o = e.messages.length - 1; o >= 0; o--) if (e.messages[o].quickReplies) {
56
- r = o;
57
- break;
58
- }
59
- if (r === -1) return e;
60
- const n = [...e.messages];
61
- return n[r] = {
62
- ...n[r],
63
- quickReplies: void 0
64
- }, {
65
- ...e,
66
- messages: n
67
- };
68
- }
69
- case "RESET_CHAT":
70
- return {
71
- ...e,
72
- messages: [],
73
- isTyping: !1,
74
- currentStepId: null,
75
- collectedData: {}
76
- };
77
- case "UPDATE_MESSAGE":
78
- return {
79
- ...e,
80
- messages: e.messages.map((r) => r.id === t.payload.id ? {
81
- ...r,
82
- ...t.payload.updates
83
- } : r)
84
- };
85
- default:
86
- return e;
87
- }
88
- }
89
- var V = (e) => ({
90
- isOpen: e.defaultOpen ?? !1,
91
- messages: e.initialMessages ?? [],
92
- isTyping: !1,
93
- showWelcome: !!e.welcomeScreen,
94
- currentStepId: null,
95
- collectedData: {},
96
- isLoggedIn: !e.loginForm
97
- }), $ = N(null);
98
- function j() {
99
- const e = Y($);
100
- if (!e) throw new Error("useChatContext must be used within ChatProvider");
101
- return e;
102
- }
103
- var X = {
104
- primaryColor: "#6C5CE7",
105
- headerBg: "linear-gradient(135deg, #6C5CE7 0%, #A29BFE 100%)",
106
- headerText: "#FFFFFF",
107
- bubbleBg: "rgba(241, 243, 249, 0.85)",
108
- bubbleText: "#2D3436",
109
- userBubbleBg: "linear-gradient(135deg, #6C5CE7 0%, #A29BFE 100%)",
110
- userBubbleText: "#FFFFFF",
111
- fontFamily: '"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
112
- fontSize: "14px",
113
- borderRadius: "20px",
114
- windowWidth: "400px",
115
- windowHeight: "600px",
116
- mode: "light"
117
- }, Z = {
118
- headerBg: "linear-gradient(135deg, #2D1B69 0%, #4A3298 100%)",
119
- headerText: "#F0F0FF",
120
- bubbleBg: "rgba(45, 45, 70, 0.85)",
121
- bubbleText: "#E8E8F0",
122
- userBubbleBg: "linear-gradient(135deg, #6C5CE7 0%, #A29BFE 100%)",
123
- userBubbleText: "#FFFFFF"
124
- };
125
- function O(e) {
126
- const t = {
127
- ...X,
128
- ...e
129
- };
130
- return t.mode === "dark" ? {
131
- ...t,
132
- ...Z,
133
- ...e
134
- } : t;
135
- }
136
- function ee(e) {
137
- return {
138
- "--cb-primary": e.primaryColor,
139
- "--cb-header-bg": e.headerBg,
140
- "--cb-header-text": e.headerText,
141
- "--cb-bubble-bg": e.bubbleBg,
142
- "--cb-bubble-text": e.bubbleText,
143
- "--cb-user-bubble-bg": e.userBubbleBg,
144
- "--cb-user-bubble-text": e.userBubbleText,
145
- "--cb-font-family": e.fontFamily,
146
- "--cb-font-size": e.fontSize,
147
- "--cb-border-radius": e.borderRadius,
148
- "--cb-window-width": e.windowWidth,
149
- "--cb-window-height": e.windowHeight,
150
- "--cb-bg": e.mode === "dark" ? "rgba(22, 22, 40, 0.95)" : "rgba(255, 255, 255, 0.92)",
151
- "--cb-border": e.mode === "dark" ? "rgba(255,255,255,0.08)" : "rgba(0,0,0,0.06)",
152
- "--cb-input-bg": e.mode === "dark" ? "rgba(40, 40, 65, 0.8)" : "rgba(245, 247, 252, 0.9)",
153
- "--cb-input-border": e.mode === "dark" ? "rgba(255,255,255,0.1)" : "rgba(0,0,0,0.06)",
154
- "--cb-input-text": e.mode === "dark" ? "#E0E0E0" : "#2D3436",
155
- "--cb-branding-bg": e.mode === "dark" ? "rgba(20, 20, 35, 0.8)" : "rgba(250, 250, 255, 0.8)"
156
- };
157
- }
158
- function te(e, t) {
159
- const r = e.mode === "dark";
160
- return {
161
- root: {
162
- fontFamily: e.fontFamily,
163
- fontSize: e.fontSize,
164
- lineHeight: "1.5"
165
- },
166
- launcher: {
167
- position: "fixed",
168
- width: "62px",
169
- height: "62px",
170
- borderRadius: "50%",
171
- background: e.headerBg,
172
- color: "#fff",
173
- border: "none",
174
- cursor: "pointer",
175
- display: "flex",
176
- alignItems: "center",
177
- justifyContent: "center",
178
- boxShadow: "0 6px 24px rgba(108, 92, 231, 0.4), 0 2px 8px rgba(0,0,0,0.1)",
179
- transition: "all 0.3s cubic-bezier(0.4, 0, 0.2, 1)",
180
- zIndex: 9998,
181
- ...t?.launcher
182
- },
183
- window: {
184
- position: "fixed",
185
- width: e.windowWidth,
186
- height: e.windowHeight,
187
- maxHeight: "85vh",
188
- borderRadius: e.borderRadius,
189
- overflow: "hidden",
190
- display: "flex",
191
- flexDirection: "column",
192
- boxShadow: r ? "0 20px 60px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.05)" : "0 20px 60px rgba(108, 92, 231, 0.15), 0 8px 24px rgba(0,0,0,0.08), 0 0 0 1px rgba(0,0,0,0.04)",
193
- backgroundColor: r ? "rgba(22, 22, 40, 0.95)" : "rgba(255, 255, 255, 0.95)",
194
- backdropFilter: "blur(20px)",
195
- WebkitBackdropFilter: "blur(20px)",
196
- border: r ? "1px solid rgba(255,255,255,0.08)" : "1px solid rgba(255,255,255,0.8)",
197
- zIndex: 9999,
198
- animation: "cb-window-enter 0.35s cubic-bezier(0.4, 0, 0.2, 1)",
199
- ...t?.window
200
- },
201
- header: {
202
- background: e.headerBg,
203
- color: e.headerText,
204
- padding: "18px 20px",
205
- display: "flex",
206
- alignItems: "center",
207
- justifyContent: "space-between",
208
- gap: "12px",
209
- flexShrink: 0,
210
- position: "relative",
211
- overflow: "hidden",
212
- ...t?.header
213
- },
214
- messageList: {
215
- flex: 1,
216
- overflowY: "auto",
217
- padding: "20px 16px",
218
- display: "flex",
219
- flexDirection: "column",
220
- gap: "10px",
221
- background: r ? "linear-gradient(180deg, rgba(22, 22, 40, 0.98) 0%, rgba(30, 30, 50, 0.98) 100%)" : "linear-gradient(180deg, rgba(248, 249, 254, 0.95) 0%, rgba(255, 255, 255, 0.95) 100%)",
222
- ...t?.messageList
223
- },
224
- inputArea: {
225
- padding: "12px 16px 14px",
226
- borderTop: `1px solid ${r ? "rgba(255,255,255,0.06)" : "rgba(0,0,0,0.05)"}`,
227
- backgroundColor: r ? "rgba(20, 20, 38, 0.9)" : "rgba(255, 255, 255, 0.95)",
228
- backdropFilter: "blur(12px)",
229
- WebkitBackdropFilter: "blur(12px)",
230
- flexShrink: 0,
231
- ...t?.inputArea
232
- },
233
- botBubble: {
234
- background: r ? "rgba(45, 45, 70, 0.7)" : "rgba(241, 243, 249, 0.9)",
235
- color: r ? "#E8E8F0" : "#2D3436",
236
- padding: "12px 16px",
237
- borderRadius: "18px 18px 18px 4px",
238
- maxWidth: "82%",
239
- alignSelf: "flex-start",
240
- wordBreak: "break-word",
241
- whiteSpace: "pre-wrap",
242
- backdropFilter: "blur(8px)",
243
- WebkitBackdropFilter: "blur(8px)",
244
- border: r ? "1px solid rgba(255,255,255,0.06)" : "1px solid rgba(0,0,0,0.04)",
245
- boxShadow: r ? "0 2px 8px rgba(0,0,0,0.2)" : "0 2px 8px rgba(0,0,0,0.04)",
246
- fontSize: "14px",
247
- lineHeight: "1.55",
248
- letterSpacing: "0.01em"
249
- },
250
- userBubble: {
251
- background: e.userBubbleBg,
252
- color: e.userBubbleText,
253
- padding: "12px 16px",
254
- borderRadius: "18px 18px 4px 18px",
255
- maxWidth: "82%",
256
- alignSelf: "flex-end",
257
- wordBreak: "break-word",
258
- whiteSpace: "pre-wrap",
259
- boxShadow: "0 4px 14px rgba(108, 92, 231, 0.25)",
260
- fontSize: "14px",
261
- lineHeight: "1.55",
262
- letterSpacing: "0.01em"
263
- }
264
- };
265
- }
266
- var re = ({ size: e = 18, color: t = "currentColor" }) => /* @__PURE__ */ a("svg", {
267
- width: e,
268
- height: e,
269
- viewBox: "0 0 24 24",
270
- fill: t,
271
- children: /* @__PURE__ */ a("path", { d: "M2.01 21L23 12 2.01 3 2 10l15 2-15 2z" })
272
- }), ne = ({ size: e = 28, color: t = "currentColor" }) => /* @__PURE__ */ a("svg", {
273
- width: e,
274
- height: e,
275
- viewBox: "0 0 24 24",
276
- fill: "none",
277
- stroke: t,
278
- strokeWidth: "2",
279
- strokeLinecap: "round",
280
- strokeLinejoin: "round",
281
- children: /* @__PURE__ */ a("path", { d: "M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" })
282
- }), P = ({ size: e = 20, color: t = "currentColor" }) => /* @__PURE__ */ x("svg", {
283
- width: e,
284
- height: e,
285
- viewBox: "0 0 24 24",
286
- fill: "none",
287
- stroke: t,
288
- strokeWidth: "2",
289
- strokeLinecap: "round",
290
- strokeLinejoin: "round",
291
- children: [/* @__PURE__ */ a("line", {
292
- x1: "18",
293
- y1: "6",
294
- x2: "6",
295
- y2: "18"
296
- }), /* @__PURE__ */ a("line", {
297
- x1: "6",
298
- y1: "6",
299
- x2: "18",
300
- y2: "18"
301
- })]
302
- }), ae = ({ size: e = 20, color: t = "currentColor" }) => /* @__PURE__ */ a("svg", {
303
- width: e,
304
- height: e,
305
- viewBox: "0 0 24 24",
306
- fill: "none",
307
- stroke: t,
308
- strokeWidth: "2",
309
- strokeLinecap: "round",
310
- strokeLinejoin: "round",
311
- children: /* @__PURE__ */ a("line", {
312
- x1: "5",
313
- y1: "12",
314
- x2: "19",
315
- y2: "12"
316
- })
317
- }), oe = ({ size: e = 20, color: t = "currentColor" }) => /* @__PURE__ */ x("svg", {
318
- width: e,
319
- height: e,
320
- viewBox: "0 0 24 24",
321
- fill: "none",
322
- stroke: t,
323
- strokeWidth: "2",
324
- strokeLinecap: "round",
325
- strokeLinejoin: "round",
326
- children: [
327
- /* @__PURE__ */ a("circle", {
328
- cx: "12",
329
- cy: "12",
330
- r: "10"
331
- }),
332
- /* @__PURE__ */ a("path", { d: "M8 14s1.5 2 4 2 4-2 4-2" }),
333
- /* @__PURE__ */ a("line", {
334
- x1: "9",
335
- y1: "9",
336
- x2: "9.01",
337
- y2: "9"
338
- }),
339
- /* @__PURE__ */ a("line", {
340
- x1: "15",
341
- y1: "9",
342
- x2: "15.01",
343
- y2: "9"
344
- })
345
- ]
346
- }), ie = ({ size: e = 20, color: t = "currentColor" }) => /* @__PURE__ */ a("svg", {
347
- width: e,
348
- height: e,
349
- viewBox: "0 0 24 24",
350
- fill: "none",
351
- stroke: t,
352
- strokeWidth: "2",
353
- strokeLinecap: "round",
354
- strokeLinejoin: "round",
355
- children: /* @__PURE__ */ a("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" })
356
- }), G = ({ size: e = 16, color: t = "currentColor" }) => /* @__PURE__ */ x("svg", {
357
- width: e,
358
- height: e,
359
- viewBox: "0 0 24 24",
360
- fill: "none",
361
- stroke: t,
362
- strokeWidth: "2",
363
- strokeLinecap: "round",
364
- strokeLinejoin: "round",
365
- children: [/* @__PURE__ */ a("path", { d: "M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z" }), /* @__PURE__ */ a("polyline", { points: "14 2 14 8 20 8" })]
366
- }), se = ({ size: e = 16, color: t = "currentColor" }) => /* @__PURE__ */ x("svg", {
367
- width: e,
368
- height: e,
369
- viewBox: "0 0 24 24",
370
- fill: "none",
371
- stroke: t,
372
- strokeWidth: "2",
373
- strokeLinecap: "round",
374
- strokeLinejoin: "round",
375
- children: [
376
- /* @__PURE__ */ a("rect", {
377
- x: "3",
378
- y: "3",
379
- width: "18",
380
- height: "18",
381
- rx: "2",
382
- ry: "2"
383
- }),
384
- /* @__PURE__ */ a("circle", {
385
- cx: "8.5",
386
- cy: "8.5",
387
- r: "1.5"
388
- }),
389
- /* @__PURE__ */ a("polyline", { points: "21 15 16 10 5 21" })
390
- ]
391
- }), le = ({ size: e = 14, color: t = "currentColor" }) => /* @__PURE__ */ x("svg", {
392
- width: e,
393
- height: e,
394
- viewBox: "0 0 24 24",
395
- fill: "none",
396
- stroke: t,
397
- strokeWidth: "2",
398
- strokeLinecap: "round",
399
- strokeLinejoin: "round",
400
- children: [
401
- /* @__PURE__ */ a("circle", {
402
- cx: "12",
403
- cy: "12",
404
- r: "10"
405
- }),
406
- /* @__PURE__ */ a("line", {
407
- x1: "15",
408
- y1: "9",
409
- x2: "9",
410
- y2: "15"
411
- }),
412
- /* @__PURE__ */ a("line", {
413
- x1: "9",
414
- y1: "9",
415
- x2: "15",
416
- y2: "15"
417
- })
418
- ]
419
- }), ce = ({ size: e = 16, color: t = "currentColor" }) => /* @__PURE__ */ x("svg", {
420
- width: e,
421
- height: e,
422
- viewBox: "0 0 24 24",
423
- fill: "none",
424
- stroke: t,
425
- strokeWidth: "2",
426
- strokeLinecap: "round",
427
- strokeLinejoin: "round",
428
- children: [/* @__PURE__ */ a("polyline", { points: "1 4 1 10 7 10" }), /* @__PURE__ */ a("path", { d: "M3.51 15a9 9 0 1 0 2.13-9.36L1 10" })]
429
- }), de = ({ onClick: e, isOpen: t, position: r, styles: n, icon: o, closeIcon: s, zIndex: i }) => {
430
- const c = r === "bottom-left" ? {
431
- bottom: "24px",
432
- left: "24px"
433
- } : {
434
- bottom: "24px",
435
- right: "24px"
436
- };
437
- return /* @__PURE__ */ a("button", {
438
- onClick: e,
439
- "aria-label": t ? "Close chat" : "Open chat",
440
- style: {
441
- ...n.launcher,
442
- ...c,
443
- ...i != null ? { zIndex: i } : {},
444
- transform: t ? "scale(0.92) rotate(90deg)" : "scale(1)",
445
- animation: t ? "none" : "cb-launcher-pulse 3s ease-in-out infinite"
446
- },
447
- children: t ? s ?? /* @__PURE__ */ a(P, { size: 22 }) : o ?? /* @__PURE__ */ a(ne, { size: 26 })
448
- });
449
- }, pe = ({ config: e, styles: t, onClose: r, onRestart: n, logo: o, logoWidth: s }) => /* @__PURE__ */ x("div", {
450
- style: t.header,
451
- children: [
452
- /* @__PURE__ */ a("div", { style: {
453
- position: "absolute",
454
- top: 0,
455
- left: 0,
456
- right: 0,
457
- bottom: 0,
458
- background: "linear-gradient(135deg, rgba(255,255,255,0.12) 0%, transparent 50%)",
459
- pointerEvents: "none"
460
- } }),
461
- /* @__PURE__ */ x("div", {
462
- style: {
463
- display: "flex",
464
- alignItems: "center",
465
- gap: "12px",
466
- flex: 1,
467
- position: "relative",
468
- zIndex: 1
469
- },
470
- children: [
471
- e.avatar && /* @__PURE__ */ x("div", {
472
- style: { position: "relative" },
473
- children: [/* @__PURE__ */ a("img", {
474
- src: e.avatar,
475
- alt: "",
476
- style: {
477
- width: "40px",
478
- height: "40px",
479
- borderRadius: "50%",
480
- objectFit: "cover",
481
- border: "2px solid rgba(255,255,255,0.3)"
482
- }
483
- }), /* @__PURE__ */ a("span", { style: {
484
- position: "absolute",
485
- bottom: "1px",
486
- right: "1px",
487
- width: "10px",
488
- height: "10px",
489
- backgroundColor: "#2ECC71",
490
- borderRadius: "50%",
491
- border: "2px solid rgba(255,255,255,0.8)"
492
- } })]
493
- }),
494
- o && !e.avatar && /* @__PURE__ */ a("img", {
495
- src: o,
496
- alt: "",
497
- style: {
498
- width: s ?? "36px",
499
- height: "auto",
500
- objectFit: "contain",
501
- filter: "brightness(1.1)"
502
- }
503
- }),
504
- !e.avatar && !o && /* @__PURE__ */ a("div", {
505
- style: {
506
- width: "40px",
507
- height: "40px",
508
- borderRadius: "50%",
509
- background: "rgba(255,255,255,0.2)",
510
- backdropFilter: "blur(4px)",
511
- display: "flex",
512
- alignItems: "center",
513
- justifyContent: "center",
514
- fontSize: "18px",
515
- fontWeight: 700,
516
- color: "rgba(255,255,255,0.9)",
517
- border: "1px solid rgba(255,255,255,0.2)"
518
- },
519
- children: (e.title ?? "C").charAt(0).toUpperCase()
520
- }),
521
- /* @__PURE__ */ x("div", { children: [/* @__PURE__ */ a("div", {
522
- style: {
523
- fontWeight: 600,
524
- fontSize: "16px",
525
- letterSpacing: "-0.01em"
526
- },
527
- children: e.title ?? "Chat with us"
528
- }), e.subtitle && /* @__PURE__ */ x("div", {
529
- style: {
530
- fontSize: "12px",
531
- opacity: 0.8,
532
- display: "flex",
533
- alignItems: "center",
534
- gap: "5px",
535
- marginTop: "1px"
536
- },
537
- children: [/* @__PURE__ */ a("span", { style: {
538
- width: "6px",
539
- height: "6px",
540
- borderRadius: "50%",
541
- backgroundColor: "#2ECC71",
542
- display: "inline-block"
543
- } }), e.subtitle]
544
- })] })
545
- ]
546
- }),
547
- /* @__PURE__ */ x("div", {
548
- style: {
549
- display: "flex",
550
- alignItems: "center",
551
- gap: "2px",
552
- position: "relative",
553
- zIndex: 1
554
- },
555
- children: [
556
- e.showRestart && n && /* @__PURE__ */ a("button", {
557
- onClick: n,
558
- "aria-label": "Restart conversation",
559
- title: "Restart conversation",
560
- style: {
561
- background: "rgba(255,255,255,0.1)",
562
- border: "none",
563
- color: "inherit",
564
- cursor: "pointer",
565
- padding: "6px",
566
- display: "flex",
567
- alignItems: "center",
568
- borderRadius: "8px",
569
- transition: "background 0.2s ease"
570
- },
571
- onMouseEnter: (i) => i.currentTarget.style.background = "rgba(255,255,255,0.2)",
572
- onMouseLeave: (i) => i.currentTarget.style.background = "rgba(255,255,255,0.1)",
573
- children: /* @__PURE__ */ a(ce, { size: 16 })
574
- }),
575
- e.showMinimize && /* @__PURE__ */ a("button", {
576
- onClick: r,
577
- "aria-label": "Minimize chat",
578
- style: {
579
- background: "rgba(255,255,255,0.1)",
580
- border: "none",
581
- color: "inherit",
582
- cursor: "pointer",
583
- padding: "6px",
584
- display: "flex",
585
- alignItems: "center",
586
- borderRadius: "8px",
587
- transition: "background 0.2s ease"
588
- },
589
- onMouseEnter: (i) => i.currentTarget.style.background = "rgba(255,255,255,0.2)",
590
- onMouseLeave: (i) => i.currentTarget.style.background = "rgba(255,255,255,0.1)",
591
- children: /* @__PURE__ */ a(ae, { size: 16 })
592
- }),
593
- e.showClose !== !1 && /* @__PURE__ */ a("button", {
594
- onClick: r,
595
- "aria-label": "Close chat",
596
- style: {
597
- background: "rgba(255,255,255,0.1)",
598
- border: "none",
599
- color: "inherit",
600
- cursor: "pointer",
601
- padding: "6px",
602
- display: "flex",
603
- alignItems: "center",
604
- borderRadius: "8px",
605
- transition: "background 0.2s ease"
606
- },
607
- onMouseEnter: (i) => i.currentTarget.style.background = "rgba(255,255,255,0.2)",
608
- onMouseLeave: (i) => i.currentTarget.style.background = "rgba(255,255,255,0.1)",
609
- children: /* @__PURE__ */ a(P, { size: 18 })
610
- })
611
- ]
612
- })
613
- ]
614
- }), ue = ({ content: e, onDismiss: t, primaryColor: r }) => /* @__PURE__ */ x("div", {
615
- style: {
616
- flex: 1,
617
- display: "flex",
618
- flexDirection: "column",
619
- overflow: "auto",
620
- background: "linear-gradient(180deg, rgba(248, 249, 254, 0.95) 0%, rgba(255, 255, 255, 0.98) 100%)"
621
- },
622
- children: [/* @__PURE__ */ a("div", {
623
- style: {
624
- flex: 1,
625
- padding: "28px 24px",
626
- overflow: "auto"
627
- },
628
- children: e
629
- }), /* @__PURE__ */ a("div", {
630
- style: {
631
- padding: "16px 20px",
632
- borderTop: "1px solid rgba(0,0,0,0.05)",
633
- backdropFilter: "blur(12px)",
634
- WebkitBackdropFilter: "blur(12px)",
635
- flexShrink: 0
636
- },
637
- children: /* @__PURE__ */ a("button", {
638
- onClick: t,
639
- style: {
640
- width: "100%",
641
- padding: "14px",
642
- background: `linear-gradient(135deg, ${r} 0%, ${ge(r, 30)} 100%)`,
643
- color: "#fff",
644
- border: "none",
645
- borderRadius: "14px",
646
- fontSize: "15px",
647
- fontWeight: 600,
648
- cursor: "pointer",
649
- fontFamily: "inherit",
650
- letterSpacing: "0.02em",
651
- boxShadow: `0 6px 20px ${r}44`,
652
- transition: "all 0.25s cubic-bezier(0.4, 0, 0.2, 1)"
653
- },
654
- onMouseEnter: (n) => {
655
- n.currentTarget.style.transform = "translateY(-1px)", n.currentTarget.style.boxShadow = `0 8px 28px ${r}55`;
656
- },
657
- onMouseLeave: (n) => {
658
- n.currentTarget.style.transform = "translateY(0)", n.currentTarget.style.boxShadow = `0 6px 20px ${r}44`;
659
- },
660
- children: "Start Chat"
661
- })
662
- })]
663
- });
664
- function ge(e, t) {
665
- const r = parseInt(e.replace("#", ""), 16), n = Math.min(255, (r >> 16 & 255) + t), o = Math.min(255, (r >> 8 & 255) + t), s = Math.min(255, (r & 255) + t);
666
- return `#${(n << 16 | o << 8 | s).toString(16).padStart(6, "0")}`;
667
- }
668
- var be = ({ field: e, value: t, onChange: r, error: n }) => {
669
- const o = e.type === "textarea", s = e.type === "textarea" ? void 0 : e.type, i = {
670
- width: "100%",
671
- padding: "10px 14px",
672
- border: `1.5px solid ${n ? "rgba(229, 62, 62, 0.5)" : "rgba(0,0,0,0.08)"}`,
673
- borderRadius: "12px",
674
- fontSize: "13px",
675
- fontFamily: "inherit",
676
- outline: "none",
677
- boxSizing: "border-box",
678
- transition: "all 0.2s ease",
679
- backgroundColor: "rgba(245, 247, 252, 0.6)",
680
- color: "#2D3436",
681
- letterSpacing: "0.01em"
682
- };
683
- return /* @__PURE__ */ x("div", {
684
- style: { marginBottom: "14px" },
685
- children: [
686
- e.label && /* @__PURE__ */ x("label", {
687
- style: {
688
- display: "block",
689
- marginBottom: "6px",
690
- fontSize: "13px",
691
- fontWeight: 500,
692
- color: "#2D3436"
693
- },
694
- children: [e.label, e.required && /* @__PURE__ */ a("span", {
695
- style: {
696
- color: "#E53E3E",
697
- marginLeft: "3px"
698
- },
699
- children: "*"
700
- })]
701
- }),
702
- o ? /* @__PURE__ */ a("textarea", {
703
- value: t,
704
- onChange: (c) => r(c.target.value),
705
- placeholder: e.placeholder,
706
- required: e.required,
707
- rows: 3,
708
- style: {
709
- ...i,
710
- resize: "vertical"
711
- },
712
- minLength: e.validation?.minLength,
713
- maxLength: e.validation?.maxLength
714
- }) : /* @__PURE__ */ a("input", {
715
- type: s,
716
- value: t,
717
- onChange: (c) => r(c.target.value),
718
- placeholder: e.placeholder,
719
- required: e.required,
720
- style: i,
721
- min: e.validation?.min,
722
- max: e.validation?.max,
723
- minLength: e.validation?.minLength,
724
- maxLength: e.validation?.maxLength,
725
- pattern: e.validation?.pattern
726
- }),
727
- n && /* @__PURE__ */ a("div", {
728
- style: {
729
- color: "#E53E3E",
730
- fontSize: "12px",
731
- marginTop: "2px"
732
- },
733
- children: n
734
- })
735
- ]
736
- });
737
- }, xe = ({ field: e, value: t, onChange: r, error: n }) => {
738
- const o = e.type === "multiselect" || e.multiple, s = (c) => {
739
- r(o ? Array.from(c.target.selectedOptions, (u) => u.value) : c.target.value);
740
- }, i = o ? Array.isArray(t) ? t : [t].filter(Boolean) : typeof t == "string" ? t : "";
741
- return /* @__PURE__ */ x("div", {
742
- style: { marginBottom: "14px" },
743
- children: [
744
- e.label && /* @__PURE__ */ x("label", {
745
- style: {
746
- display: "block",
747
- marginBottom: "6px",
748
- fontSize: "13px",
749
- fontWeight: 500,
750
- color: "#2D3436"
751
- },
752
- children: [e.label, e.required && /* @__PURE__ */ a("span", {
753
- style: {
754
- color: "#E53E3E",
755
- marginLeft: "3px"
756
- },
757
- children: "*"
758
- })]
759
- }),
760
- /* @__PURE__ */ x("select", {
761
- value: i,
762
- onChange: s,
763
- multiple: o,
764
- required: e.required,
765
- style: {
766
- width: "100%",
767
- padding: "10px 14px",
768
- border: `1.5px solid ${n ? "rgba(229, 62, 62, 0.5)" : "rgba(0,0,0,0.08)"}`,
769
- borderRadius: "12px",
770
- fontSize: "13px",
771
- fontFamily: "inherit",
772
- outline: "none",
773
- backgroundColor: "rgba(245, 247, 252, 0.6)",
774
- color: "#2D3436",
775
- boxSizing: "border-box",
776
- transition: "all 0.2s ease",
777
- ...o ? { minHeight: "80px" } : {}
778
- },
779
- children: [!o && /* @__PURE__ */ a("option", {
780
- value: "",
781
- children: "Select..."
782
- }), e.options?.map((c) => /* @__PURE__ */ a("option", {
783
- value: c.value,
784
- children: c.label
785
- }, c.value))]
786
- }),
787
- o && /* @__PURE__ */ a("div", {
788
- style: {
789
- fontSize: "11px",
790
- color: "#888",
791
- marginTop: "2px"
792
- },
793
- children: "Hold Ctrl/Cmd to select multiple"
794
- }),
795
- n && /* @__PURE__ */ a("div", {
796
- style: {
797
- color: "#E53E3E",
798
- fontSize: "12px",
799
- marginTop: "2px"
800
- },
801
- children: n
802
- })
803
- ]
804
- });
805
- }, he = ({ field: e, value: t, onChange: r, error: n }) => /* @__PURE__ */ x("div", {
806
- style: { marginBottom: "12px" },
807
- children: [
808
- e.label && /* @__PURE__ */ x("label", {
809
- style: {
810
- display: "block",
811
- marginBottom: "6px",
812
- fontSize: "13px",
813
- fontWeight: 500
814
- },
815
- children: [e.label, e.required && /* @__PURE__ */ a("span", {
816
- style: {
817
- color: "#E53E3E",
818
- marginLeft: "2px"
819
- },
820
- children: "*"
821
- })]
822
- }),
823
- /* @__PURE__ */ a("div", {
824
- style: {
825
- display: "flex",
826
- flexDirection: "column",
827
- gap: "6px"
828
- },
829
- children: e.options?.map((o) => /* @__PURE__ */ x("label", {
830
- style: {
831
- display: "flex",
832
- alignItems: "center",
833
- gap: "8px",
834
- cursor: "pointer",
835
- fontSize: "13px"
836
- },
837
- children: [/* @__PURE__ */ a("input", {
838
- type: "radio",
839
- name: e.name,
840
- value: o.value,
841
- checked: t === o.value,
842
- onChange: () => r(o.value),
843
- style: { margin: 0 }
844
- }), o.label]
845
- }, o.value))
846
- }),
847
- n && /* @__PURE__ */ a("div", {
848
- style: {
849
- color: "#E53E3E",
850
- fontSize: "12px",
851
- marginTop: "2px"
852
- },
853
- children: n
854
- })
855
- ]
856
- }), me = ({ field: e, value: t, onChange: r, error: n }) => {
857
- const o = (s) => {
858
- t.includes(s) ? r(t.filter((i) => i !== s)) : r([...t, s]);
859
- };
860
- return /* @__PURE__ */ x("div", {
861
- style: { marginBottom: "12px" },
862
- children: [
863
- e.label && /* @__PURE__ */ x("label", {
864
- style: {
865
- display: "block",
866
- marginBottom: "6px",
867
- fontSize: "13px",
868
- fontWeight: 500
869
- },
870
- children: [e.label, e.required && /* @__PURE__ */ a("span", {
871
- style: {
872
- color: "#E53E3E",
873
- marginLeft: "2px"
874
- },
875
- children: "*"
876
- })]
877
- }),
878
- /* @__PURE__ */ a("div", {
879
- style: {
880
- display: "flex",
881
- flexDirection: "column",
882
- gap: "6px"
883
- },
884
- children: e.options?.map((s) => /* @__PURE__ */ x("label", {
885
- style: {
886
- display: "flex",
887
- alignItems: "center",
888
- gap: "8px",
889
- cursor: "pointer",
890
- fontSize: "13px"
891
- },
892
- children: [/* @__PURE__ */ a("input", {
893
- type: "checkbox",
894
- checked: t.includes(s.value),
895
- onChange: () => o(s.value),
896
- style: { margin: 0 }
897
- }), s.label]
898
- }, s.value))
899
- }),
900
- n && /* @__PURE__ */ a("div", {
901
- style: {
902
- color: "#E53E3E",
903
- fontSize: "12px",
904
- marginTop: "2px"
905
- },
906
- children: n
907
- })
908
- ]
909
- });
910
- }, ye = ({ field: e, value: t, onChange: r, error: n, primaryColor: o }) => {
911
- const s = C(null), i = t ? Array.from(t).map((c) => c.name).join(", ") : "";
912
- return /* @__PURE__ */ x("div", {
913
- style: { marginBottom: "12px" },
914
- children: [
915
- e.label && /* @__PURE__ */ x("label", {
916
- style: {
917
- display: "block",
918
- marginBottom: "4px",
919
- fontSize: "13px",
920
- fontWeight: 500
921
- },
922
- children: [e.label, e.required && /* @__PURE__ */ a("span", {
923
- style: {
924
- color: "#E53E3E",
925
- marginLeft: "2px"
926
- },
927
- children: "*"
928
- })]
929
- }),
930
- /* @__PURE__ */ a("input", {
931
- ref: s,
932
- type: "file",
933
- accept: e.accept,
934
- multiple: e.multiple,
935
- onChange: (c) => r(c.target.files),
936
- style: { display: "none" }
937
- }),
938
- /* @__PURE__ */ a("button", {
939
- type: "button",
940
- onClick: () => s.current?.click(),
941
- style: {
942
- padding: "8px 16px",
943
- border: `1px dashed ${n ? "#E53E3E" : "#D1D5DB"}`,
944
- borderRadius: "8px",
945
- backgroundColor: "#FAFAFA",
946
- cursor: "pointer",
947
- fontSize: "13px",
948
- color: "#555",
949
- width: "100%",
950
- textAlign: "left"
951
- },
952
- children: i || e.placeholder || "Choose file(s)..."
953
- }),
954
- i && /* @__PURE__ */ x("div", {
955
- style: {
956
- fontSize: "12px",
957
- color: o,
958
- marginTop: "4px"
959
- },
960
- children: [Array.from(t).length, " file(s) selected"]
961
- }),
962
- n && /* @__PURE__ */ a("div", {
963
- style: {
964
- color: "#E53E3E",
965
- fontSize: "12px",
966
- marginTop: "2px"
967
- },
968
- children: n
969
- })
970
- ]
971
- });
972
- }, H = ({ config: e, onSubmit: t, primaryColor: r }) => {
973
- const [n, o] = I(() => {
974
- const g = {};
975
- for (const h of e.fields) h.defaultValue !== void 0 ? g[h.name] = h.defaultValue : h.type === "checkbox" || h.type === "multiselect" ? g[h.name] = [] : h.type === "file" ? g[h.name] = null : g[h.name] = "";
976
- return g;
977
- }), [s, i] = I({}), [c, u] = I(!1), f = v((g, h) => {
978
- o((k) => ({
979
- ...k,
980
- [g]: h
981
- })), i((k) => {
982
- const D = { ...k };
983
- return delete D[g], D;
984
- });
985
- }, []), w = () => {
986
- const g = {};
987
- for (const h of e.fields) {
988
- const k = n[h.name];
989
- if (h.required && (k === "" || k === null || k === void 0 || Array.isArray(k) && k.length === 0)) {
990
- g[h.name] = h.validation?.message ?? `${h.label || h.name} is required`;
991
- continue;
992
- }
993
- if (h.validation?.pattern && typeof k == "string" && k) try {
994
- new RegExp(h.validation.pattern).test(k) || (g[h.name] = h.validation.message ?? "Invalid format");
995
- } catch {
996
- }
997
- }
998
- return i(g), Object.keys(g).length === 0;
999
- }, p = (g) => {
1000
- g.preventDefault(), w() && (u(!0), t(n));
1001
- };
1002
- return c ? /* @__PURE__ */ a("div", {
1003
- style: {
1004
- padding: "16px",
1005
- background: "linear-gradient(135deg, rgba(46, 213, 115, 0.1), rgba(46, 213, 115, 0.05))",
1006
- borderRadius: "14px",
1007
- fontSize: "14px",
1008
- color: "#2ecc71",
1009
- textAlign: "center",
1010
- fontWeight: 500,
1011
- border: "1px solid rgba(46, 213, 115, 0.15)",
1012
- animation: "cb-fade-in 0.3s ease-out"
1013
- },
1014
- children: "✓ Submitted successfully"
1015
- }) : /* @__PURE__ */ x("form", {
1016
- onSubmit: p,
1017
- style: {
1018
- background: "rgba(255, 255, 255, 0.7)",
1019
- backdropFilter: "blur(12px)",
1020
- WebkitBackdropFilter: "blur(12px)",
1021
- borderRadius: "16px",
1022
- padding: "20px",
1023
- border: "1px solid rgba(0,0,0,0.06)",
1024
- boxShadow: "0 4px 16px rgba(0,0,0,0.04)",
1025
- animation: "cb-slide-up 0.35s ease-out"
1026
- },
1027
- children: [
1028
- e.title && /* @__PURE__ */ a("div", {
1029
- style: {
1030
- fontWeight: 600,
1031
- fontSize: "15px",
1032
- marginBottom: "4px",
1033
- color: "#2D3436",
1034
- letterSpacing: "-0.01em"
1035
- },
1036
- children: e.title
1037
- }),
1038
- e.description && /* @__PURE__ */ a("div", {
1039
- style: {
1040
- fontSize: "12px",
1041
- color: "rgba(0,0,0,0.45)",
1042
- marginBottom: "16px",
1043
- lineHeight: "1.5"
1044
- },
1045
- children: e.description
1046
- }),
1047
- e.fields.map((g) => /* @__PURE__ */ a(fe, {
1048
- field: g,
1049
- value: n[g.name],
1050
- onChange: (h) => f(g.name, h),
1051
- error: s[g.name],
1052
- primaryColor: r
1053
- }, g.name)),
1054
- /* @__PURE__ */ a("button", {
1055
- type: "submit",
1056
- style: {
1057
- width: "100%",
1058
- padding: "12px",
1059
- background: `linear-gradient(135deg, ${r} 0%, ${Se(r, 30)} 100%)`,
1060
- color: "#fff",
1061
- border: "none",
1062
- borderRadius: "12px",
1063
- fontSize: "14px",
1064
- fontWeight: 600,
1065
- cursor: "pointer",
1066
- marginTop: "8px",
1067
- fontFamily: "inherit",
1068
- letterSpacing: "0.02em",
1069
- boxShadow: `0 4px 14px ${r}33`,
1070
- transition: "all 0.25s cubic-bezier(0.4, 0, 0.2, 1)"
1071
- },
1072
- onMouseEnter: (g) => {
1073
- g.currentTarget.style.transform = "translateY(-1px)", g.currentTarget.style.boxShadow = `0 6px 20px ${r}44`;
1074
- },
1075
- onMouseLeave: (g) => {
1076
- g.currentTarget.style.transform = "translateY(0)", g.currentTarget.style.boxShadow = `0 4px 14px ${r}33`;
1077
- },
1078
- children: e.submitLabel ?? "Submit"
1079
- })
1080
- ]
1081
- });
1082
- }, fe = ({ field: e, value: t, onChange: r, error: n, primaryColor: o }) => {
1083
- switch (e.type) {
1084
- case "text":
1085
- case "email":
1086
- case "password":
1087
- case "number":
1088
- case "tel":
1089
- case "url":
1090
- case "textarea":
1091
- case "date":
1092
- case "time":
1093
- return /* @__PURE__ */ a(be, {
1094
- field: e,
1095
- value: String(t ?? ""),
1096
- onChange: r,
1097
- error: n
1098
- });
1099
- case "select":
1100
- case "multiselect":
1101
- return /* @__PURE__ */ a(xe, {
1102
- field: e,
1103
- value: t,
1104
- onChange: r,
1105
- error: n
1106
- });
1107
- case "radio":
1108
- return /* @__PURE__ */ a(he, {
1109
- field: e,
1110
- value: String(t ?? ""),
1111
- onChange: r,
1112
- error: n
1113
- });
1114
- case "checkbox":
1115
- return /* @__PURE__ */ a(me, {
1116
- field: e,
1117
- value: t ?? [],
1118
- onChange: r,
1119
- error: n
1120
- });
1121
- case "file":
1122
- return /* @__PURE__ */ a(ye, {
1123
- field: e,
1124
- value: t,
1125
- onChange: r,
1126
- error: n,
1127
- primaryColor: o
1128
- });
1129
- case "hidden":
1130
- return /* @__PURE__ */ a("input", {
1131
- type: "hidden",
1132
- name: e.name,
1133
- value: String(t ?? "")
1134
- });
1135
- default:
1136
- return null;
1137
- }
1138
- };
1139
- function Se(e, t) {
1140
- const r = parseInt(e.replace("#", ""), 16), n = Math.min(255, (r >> 16 & 255) + t), o = Math.min(255, (r >> 8 & 255) + t), s = Math.min(255, (r & 255) + t);
1141
- return `#${(n << 16 | o << 8 | s).toString(16).padStart(6, "0")}`;
1142
- }
1143
- var ke = ({ config: e, onLogin: t, primaryColor: r }) => /* @__PURE__ */ a("div", {
1144
- style: {
1145
- flex: 1,
1146
- display: "flex",
1147
- flexDirection: "column",
1148
- justifyContent: "center",
1149
- padding: "24px",
1150
- overflow: "auto",
1151
- background: "linear-gradient(180deg, rgba(248, 249, 254, 0.95) 0%, rgba(255, 255, 255, 0.98) 100%)"
1152
- },
1153
- children: /* @__PURE__ */ a(H, {
1154
- config: e,
1155
- onSubmit: t,
1156
- primaryColor: r
1157
- })
1158
- }), we = ({ message: e, styles: t }) => {
1159
- const r = e.sender === "bot", n = e.sender === "system", o = r || n ? t.botBubble : t.userBubble;
1160
- return e.text || e.attachments && e.attachments.length > 0 ? /* @__PURE__ */ x("div", {
1161
- style: {
1162
- ...o,
1163
- ...n ? {
1164
- background: "transparent",
1165
- border: "none",
1166
- boxShadow: "none",
1167
- color: "#999",
1168
- fontSize: "12px",
1169
- alignSelf: "center",
1170
- padding: "6px 12px",
1171
- backdropFilter: "none",
1172
- WebkitBackdropFilter: "none"
1173
- } : {},
1174
- animation: "cb-fade-in 0.3s ease-out"
1175
- },
1176
- children: [e.text && /* @__PURE__ */ a("span", {
1177
- style: { display: "block" },
1178
- children: e.text
1179
- }), e.attachments && e.attachments.length > 0 && /* @__PURE__ */ a("div", {
1180
- style: {
1181
- marginTop: e.text ? "10px" : 0,
1182
- display: "flex",
1183
- flexDirection: "column",
1184
- gap: "6px"
1185
- },
1186
- children: e.attachments.map((i, c) => /* @__PURE__ */ a(ve, {
1187
- attachment: i,
1188
- isBot: r
1189
- }, c))
1190
- })]
1191
- }) : null;
1192
- }, ve = ({ attachment: e, isBot: t }) => e.type.startsWith("image/") && e.url ? /* @__PURE__ */ x("div", {
1193
- style: {
1194
- borderRadius: "12px",
1195
- overflow: "hidden",
1196
- maxWidth: "220px"
1197
- },
1198
- children: [/* @__PURE__ */ a("img", {
1199
- src: e.url,
1200
- alt: e.name,
1201
- style: {
1202
- width: "100%",
1203
- height: "auto",
1204
- display: "block",
1205
- borderRadius: "12px"
1206
- }
1207
- }), /* @__PURE__ */ a("div", {
1208
- style: {
1209
- fontSize: "11px",
1210
- padding: "4px 0",
1211
- opacity: 0.6
1212
- },
1213
- children: e.name
1214
- })]
1215
- }) : /* @__PURE__ */ x("a", {
1216
- href: e.url,
1217
- target: "_blank",
1218
- rel: "noopener noreferrer",
1219
- style: {
1220
- display: "flex",
1221
- alignItems: "center",
1222
- gap: "8px",
1223
- padding: "8px 12px",
1224
- backgroundColor: t ? "rgba(0,0,0,0.04)" : "rgba(255,255,255,0.15)",
1225
- borderRadius: "10px",
1226
- textDecoration: "none",
1227
- color: "inherit",
1228
- fontSize: "13px",
1229
- border: t ? "1px solid rgba(0,0,0,0.06)" : "1px solid rgba(255,255,255,0.15)",
1230
- transition: "background 0.2s ease"
1231
- },
1232
- children: [
1233
- /* @__PURE__ */ a(G, { size: 16 }),
1234
- /* @__PURE__ */ a("span", {
1235
- style: {
1236
- overflow: "hidden",
1237
- textOverflow: "ellipsis",
1238
- whiteSpace: "nowrap",
1239
- flex: 1
1240
- },
1241
- children: e.name
1242
- }),
1243
- e.size && /* @__PURE__ */ a("span", {
1244
- style: {
1245
- fontSize: "11px",
1246
- opacity: 0.5,
1247
- flexShrink: 0
1248
- },
1249
- children: Ee(e.size)
1250
- })
1251
- ]
1252
- });
1253
- function Ee(e) {
1254
- return e < 1024 ? `${e}B` : e < 1024 * 1024 ? `${(e / 1024).toFixed(1)}KB` : `${(e / (1024 * 1024)).toFixed(1)}MB`;
1255
- }
1256
- var Ce = ({ replies: e, onSelect: t, primaryColor: r }) => /* @__PURE__ */ a("div", {
1257
- style: {
1258
- display: "flex",
1259
- flexWrap: "wrap",
1260
- gap: "8px",
1261
- alignSelf: "flex-start",
1262
- maxWidth: "90%",
1263
- animation: "cb-slide-up 0.35s ease-out",
1264
- padding: "4px 0"
1265
- },
1266
- children: e.map((n) => /* @__PURE__ */ a("button", {
1267
- onClick: () => t(n.value, n.label),
1268
- style: {
1269
- padding: "8px 18px",
1270
- borderRadius: "22px",
1271
- border: `1.5px solid ${r}`,
1272
- backgroundColor: "rgba(108, 92, 231, 0.06)",
1273
- color: r,
1274
- cursor: "pointer",
1275
- fontSize: "13px",
1276
- fontWeight: 500,
1277
- fontFamily: "inherit",
1278
- transition: "all 0.25s cubic-bezier(0.4, 0, 0.2, 1)",
1279
- backdropFilter: "blur(4px)",
1280
- WebkitBackdropFilter: "blur(4px)",
1281
- letterSpacing: "0.01em"
1282
- },
1283
- onMouseEnter: (o) => {
1284
- o.currentTarget.style.backgroundColor = r, o.currentTarget.style.color = "#fff", o.currentTarget.style.transform = "translateY(-1px)", o.currentTarget.style.boxShadow = `0 4px 14px ${r}44`;
1285
- },
1286
- onMouseLeave: (o) => {
1287
- o.currentTarget.style.backgroundColor = "rgba(108, 92, 231, 0.06)", o.currentTarget.style.color = r, o.currentTarget.style.transform = "translateY(0)", o.currentTarget.style.boxShadow = "none";
1288
- },
1289
- children: n.label
1290
- }, n.value))
1291
- }), De = ({ color: e }) => {
1292
- const t = {
1293
- width: "7px",
1294
- height: "7px",
1295
- borderRadius: "50%",
1296
- backgroundColor: e,
1297
- opacity: 0.35,
1298
- animation: "cb-typing-bounce 1.4s infinite ease-in-out"
1299
- };
1300
- return /* @__PURE__ */ x("div", {
1301
- style: {
1302
- display: "flex",
1303
- gap: "5px",
1304
- padding: "14px 18px",
1305
- background: "rgba(241, 243, 249, 0.8)",
1306
- backdropFilter: "blur(8px)",
1307
- WebkitBackdropFilter: "blur(8px)",
1308
- borderRadius: "18px 18px 18px 4px",
1309
- alignSelf: "flex-start",
1310
- alignItems: "center",
1311
- border: "1px solid rgba(0,0,0,0.04)",
1312
- boxShadow: "0 2px 8px rgba(0,0,0,0.04)",
1313
- animation: "cb-fade-in 0.3s ease-out"
1314
- },
1315
- children: [
1316
- /* @__PURE__ */ a("span", { style: {
1317
- ...t,
1318
- animationDelay: "0s"
1319
- } }),
1320
- /* @__PURE__ */ a("span", { style: {
1321
- ...t,
1322
- animationDelay: "0.2s"
1323
- } }),
1324
- /* @__PURE__ */ a("span", { style: {
1325
- ...t,
1326
- animationDelay: "0.4s"
1327
- } })
1328
- ]
1329
- });
1330
- }, Fe = ({ messages: e, isTyping: t, styles: r, primaryColor: n, onQuickReply: o, onFormSubmit: s, components: i, onComponentComplete: c, collectedData: u, currentStepId: f }) => {
1331
- const w = C(null);
1332
- return A(() => {
1333
- w.current?.scrollIntoView({ behavior: "smooth" });
1334
- }, [e, t]), /* @__PURE__ */ x("div", {
1335
- style: r.messageList,
1336
- className: "cb-scrollbar",
1337
- children: [
1338
- e.map((p) => /* @__PURE__ */ x(_.Fragment, { children: [
1339
- /* @__PURE__ */ a(we, {
1340
- message: p,
1341
- styles: r
1342
- }),
1343
- p.quickReplies && p.quickReplies.length > 0 && /* @__PURE__ */ a(Ce, {
1344
- replies: p.quickReplies,
1345
- onSelect: o,
1346
- primaryColor: n
1347
- }),
1348
- p.form && /* @__PURE__ */ a("div", {
1349
- style: {
1350
- alignSelf: "flex-start",
1351
- width: "92%",
1352
- animation: "cb-slide-up 0.35s ease-out"
1353
- },
1354
- children: /* @__PURE__ */ a(H, {
1355
- config: p.form,
1356
- onSubmit: (g) => s(p.form.id, g),
1357
- primaryColor: n
1358
- })
1359
- }),
1360
- p.component && i?.[p.component] && /* @__PURE__ */ a("div", {
1361
- style: {
1362
- alignSelf: "flex-start",
1363
- width: "92%",
1364
- animation: "cb-slide-up 0.35s ease-out"
1365
- },
1366
- children: _.createElement(i[p.component], {
1367
- stepId: f ?? "",
1368
- data: u ?? {},
1369
- onComplete: (g) => c?.(g)
1370
- })
1371
- })
1372
- ] }, p.id)),
1373
- t && /* @__PURE__ */ a(De, { color: n }),
1374
- /* @__PURE__ */ a("div", { ref: w })
1375
- ]
1376
- });
1377
- }, W = [
1378
- {
1379
- name: "Smileys",
1380
- emojis: [
1381
- "😀",
1382
- "😃",
1383
- "😄",
1384
- "😁",
1385
- "😅",
1386
- "😂",
1387
- "🤣",
1388
- "😊",
1389
- "😇",
1390
- "🙂",
1391
- "😉",
1392
- "😍",
1393
- "🥰",
1394
- "😘",
1395
- "😋",
1396
- "😜",
1397
- "🤪",
1398
- "🤗",
1399
- "🤔",
1400
- "🤫",
1401
- "🤭",
1402
- "😏",
1403
- "😐",
1404
- "😑",
1405
- "😶",
1406
- "😌",
1407
- "😴",
1408
- "🤤",
1409
- "😷",
1410
- "🤒"
1411
- ]
1412
- },
1413
- {
1414
- name: "Gestures",
1415
- emojis: [
1416
- "👍",
1417
- "👎",
1418
- "👌",
1419
- "✌️",
1420
- "🤞",
1421
- "🤟",
1422
- "🤘",
1423
- "👋",
1424
- "🤚",
1425
- "✋",
1426
- "🖖",
1427
- "👏",
1428
- "🙌",
1429
- "🤝",
1430
- "🙏",
1431
- "💪",
1432
- "🖐️",
1433
- "☝️",
1434
- "👆",
1435
- "👇",
1436
- "👈",
1437
- "👉",
1438
- "🤙",
1439
- "🫡",
1440
- "🫶",
1441
- "🫰",
1442
- "🫳",
1443
- "🫴",
1444
- "🫲",
1445
- "🫱"
1446
- ]
1447
- },
1448
- {
1449
- name: "Hearts",
1450
- emojis: [
1451
- "❤️",
1452
- "🧡",
1453
- "💛",
1454
- "💚",
1455
- "💙",
1456
- "💜",
1457
- "🖤",
1458
- "🤍",
1459
- "🤎",
1460
- "💔",
1461
- "❣️",
1462
- "💕",
1463
- "💞",
1464
- "💓",
1465
- "💗",
1466
- "💖",
1467
- "💘",
1468
- "💝",
1469
- "💟",
1470
- "♥️",
1471
- "🫀",
1472
- "💌",
1473
- "💐",
1474
- "🌹",
1475
- "🌺",
1476
- "🌸",
1477
- "🌼",
1478
- "🌻",
1479
- "🌷",
1480
- "💮"
1481
- ]
1482
- },
1483
- {
1484
- name: "Objects",
1485
- emojis: [
1486
- "🔥",
1487
- "⭐",
1488
- "✨",
1489
- "💯",
1490
- "🎉",
1491
- "🎊",
1492
- "🎯",
1493
- "🚀",
1494
- "💡",
1495
- "📌",
1496
- "📎",
1497
- "🔗",
1498
- "💻",
1499
- "📱",
1500
- "☎️",
1501
- "📧",
1502
- "📝",
1503
- "📋",
1504
- "📊",
1505
- "📈",
1506
- "🗂️",
1507
- "📁",
1508
- "🔒",
1509
- "🔑",
1510
- "⚙️",
1511
- "🛠️",
1512
- "🔧",
1513
- "📦",
1514
- "🏷️",
1515
- "✅"
1516
- ]
1517
- }
1518
- ], Te = ({ onSelect: e, onClose: t, primaryColor: r }) => {
1519
- const [n, o] = I(0), s = C(null);
1520
- A(() => {
1521
- const c = (u) => {
1522
- s.current && !s.current.contains(u.target) && t();
1523
- };
1524
- return document.addEventListener("mousedown", c), () => document.removeEventListener("mousedown", c);
1525
- }, [t]);
1526
- const i = W[n]?.emojis ?? [];
1527
- return /* @__PURE__ */ x("div", {
1528
- ref: s,
1529
- style: {
1530
- position: "absolute",
1531
- bottom: "100%",
1532
- left: 0,
1533
- width: "280px",
1534
- backgroundColor: "rgba(255, 255, 255, 0.92)",
1535
- backdropFilter: "blur(20px)",
1536
- WebkitBackdropFilter: "blur(20px)",
1537
- borderRadius: "16px",
1538
- boxShadow: "0 8px 32px rgba(0,0,0,0.12), 0 0 0 1px rgba(0,0,0,0.04)",
1539
- border: "1px solid rgba(255,255,255,0.8)",
1540
- overflow: "hidden",
1541
- zIndex: 10,
1542
- marginBottom: "8px",
1543
- animation: "cb-slide-up 0.25s ease-out"
1544
- },
1545
- children: [/* @__PURE__ */ a("div", {
1546
- style: {
1547
- display: "flex",
1548
- borderBottom: "1px solid rgba(0,0,0,0.06)",
1549
- padding: "6px",
1550
- gap: "3px"
1551
- },
1552
- children: W.map((c, u) => /* @__PURE__ */ a("button", {
1553
- onClick: () => o(u),
1554
- title: c.name,
1555
- style: {
1556
- flex: 1,
1557
- padding: "6px 4px",
1558
- border: "none",
1559
- borderRadius: "8px",
1560
- cursor: "pointer",
1561
- fontSize: "11px",
1562
- fontWeight: 600,
1563
- fontFamily: "inherit",
1564
- letterSpacing: "0.02em",
1565
- background: u === n ? `linear-gradient(135deg, ${r}, ${r}CC)` : "transparent",
1566
- color: u === n ? "#fff" : "rgba(0,0,0,0.4)",
1567
- transition: "all 0.2s ease",
1568
- boxShadow: u === n ? `0 2px 8px ${r}33` : "none"
1569
- },
1570
- children: c.name
1571
- }, c.name))
1572
- }), /* @__PURE__ */ a("div", {
1573
- style: {
1574
- display: "grid",
1575
- gridTemplateColumns: "repeat(8, 1fr)",
1576
- gap: "2px",
1577
- padding: "8px",
1578
- maxHeight: "180px",
1579
- overflowY: "auto"
1580
- },
1581
- children: i.map((c) => /* @__PURE__ */ a("button", {
1582
- onClick: () => {
1583
- e(c), t();
1584
- },
1585
- style: {
1586
- width: "30px",
1587
- height: "30px",
1588
- border: "none",
1589
- backgroundColor: "transparent",
1590
- cursor: "pointer",
1591
- fontSize: "18px",
1592
- borderRadius: "6px",
1593
- display: "flex",
1594
- alignItems: "center",
1595
- justifyContent: "center",
1596
- transition: "all 0.15s ease"
1597
- },
1598
- onMouseEnter: (u) => u.currentTarget.style.backgroundColor = "rgba(108, 92, 231, 0.08)",
1599
- onMouseLeave: (u) => u.currentTarget.style.backgroundColor = "transparent",
1600
- children: c
1601
- }, c))
1602
- })]
1603
- });
1604
- }, Ie = ({ config: e, onFiles: t, selectedFiles: r, onRemoveFile: n, primaryColor: o }) => {
1605
- const s = C(null), i = (c) => {
1606
- const u = c.target.files;
1607
- if (!u || u.length === 0) return;
1608
- const f = Array.from(u);
1609
- if (e.maxSize && f.filter((p) => p.size > e.maxSize).length > 0) {
1610
- alert(`File(s) too large. Max size: ${q(e.maxSize)}`);
1611
- return;
1612
- }
1613
- const w = e.maxFiles ?? 5;
1614
- if (r.length + f.length > w) {
1615
- alert(`Maximum ${w} files allowed`);
1616
- return;
1617
- }
1618
- t(f), s.current && (s.current.value = "");
1619
- };
1620
- return /* @__PURE__ */ x("div", { children: [/* @__PURE__ */ a("input", {
1621
- ref: s,
1622
- type: "file",
1623
- accept: e.accept,
1624
- multiple: e.multiple !== !1,
1625
- onChange: i,
1626
- style: { display: "none" }
1627
- }), /* @__PURE__ */ a("button", {
1628
- type: "button",
1629
- onClick: () => s.current?.click(),
1630
- "aria-label": "Attach file",
1631
- title: "Attach file",
1632
- style: {
1633
- background: "none",
1634
- border: "none",
1635
- cursor: "pointer",
1636
- padding: "6px",
1637
- display: "flex",
1638
- alignItems: "center",
1639
- color: "#999",
1640
- borderRadius: "6px",
1641
- transition: "color 0.15s ease"
1642
- },
1643
- onMouseEnter: (c) => c.currentTarget.style.color = o,
1644
- onMouseLeave: (c) => c.currentTarget.style.color = "#999",
1645
- children: /* @__PURE__ */ a(ie, { size: 20 })
1646
- })] });
1647
- }, Re = ({ files: e, onRemove: t, primaryColor: r }) => e.length === 0 ? null : /* @__PURE__ */ a("div", {
1648
- style: {
1649
- display: "flex",
1650
- flexWrap: "wrap",
1651
- gap: "6px",
1652
- padding: "8px 12px 0"
1653
- },
1654
- children: e.map((n, o) => /* @__PURE__ */ a(Ae, {
1655
- file: n,
1656
- onRemove: () => t(o),
1657
- primaryColor: r
1658
- }, `${n.name}-${o}`))
1659
- }), Ae = ({ file: e, onRemove: t, primaryColor: r }) => {
1660
- const n = e.type.startsWith("image/");
1661
- return /* @__PURE__ */ x("div", {
1662
- style: {
1663
- display: "flex",
1664
- alignItems: "center",
1665
- gap: "6px",
1666
- padding: "4px 8px",
1667
- backgroundColor: "#F3F4F6",
1668
- borderRadius: "8px",
1669
- fontSize: "12px",
1670
- maxWidth: "200px"
1671
- },
1672
- children: [
1673
- /* @__PURE__ */ a("span", {
1674
- style: {
1675
- color: r,
1676
- flexShrink: 0
1677
- },
1678
- children: n ? /* @__PURE__ */ a(se, { size: 14 }) : /* @__PURE__ */ a(G, { size: 14 })
1679
- }),
1680
- /* @__PURE__ */ a("span", {
1681
- style: {
1682
- overflow: "hidden",
1683
- textOverflow: "ellipsis",
1684
- whiteSpace: "nowrap",
1685
- color: "#555"
1686
- },
1687
- children: e.name
1688
- }),
1689
- /* @__PURE__ */ a("span", {
1690
- style: {
1691
- color: "#999",
1692
- fontSize: "11px",
1693
- flexShrink: 0
1694
- },
1695
- children: q(e.size)
1696
- }),
1697
- /* @__PURE__ */ a("button", {
1698
- onClick: t,
1699
- style: {
1700
- background: "none",
1701
- border: "none",
1702
- cursor: "pointer",
1703
- padding: "0",
1704
- display: "flex",
1705
- color: "#999",
1706
- flexShrink: 0
1707
- },
1708
- children: /* @__PURE__ */ a(le, { size: 14 })
1709
- })
1710
- ]
1711
- });
1712
- };
1713
- function q(e) {
1714
- return e < 1024 ? `${e}B` : e < 1024 * 1024 ? `${(e / 1024).toFixed(1)}KB` : `${(e / (1024 * 1024)).toFixed(1)}MB`;
1715
- }
1716
- var Me = ({ onSend: e, placeholder: t = "Type a message...", primaryColor: r, isDark: n = !1, disabled: o, styleOverride: s, enableEmoji: i = !1, fileUpload: c, onFileUpload: u }) => {
1717
- const [f, w] = I(""), [p, g] = I(!1), [h, k] = I([]), D = C(null), R = v(() => {
1718
- const d = f.trim();
1719
- !d && h.length === 0 || (e(d, h.length > 0 ? h : void 0), w(""), k([]), D.current?.focus());
1720
- }, [
1721
- f,
1722
- h,
1723
- e
1724
- ]), T = (d) => {
1725
- d.key === "Enter" && !d.shiftKey && (d.preventDefault(), R());
1726
- }, l = (d) => {
1727
- w((S) => S + d), D.current?.focus();
1728
- }, b = (d) => {
1729
- k((S) => [...S, ...d]), u?.(d);
1730
- }, m = (d) => {
1731
- k((S) => S.filter((M, E) => E !== d));
1732
- }, y = f.trim() || h.length > 0;
1733
- return /* @__PURE__ */ x("div", {
1734
- style: {
1735
- position: "relative",
1736
- ...s
1737
- },
1738
- children: [
1739
- h.length > 0 && /* @__PURE__ */ a(Re, {
1740
- files: h,
1741
- onRemove: m,
1742
- primaryColor: r
1743
- }),
1744
- p && /* @__PURE__ */ a(Te, {
1745
- onSelect: l,
1746
- onClose: () => g(!1),
1747
- primaryColor: r
1748
- }),
1749
- /* @__PURE__ */ x("div", {
1750
- style: {
1751
- display: "flex",
1752
- gap: "8px",
1753
- alignItems: "flex-end",
1754
- background: n ? "rgba(40, 40, 65, 0.5)" : "rgba(245, 247, 252, 0.7)",
1755
- borderRadius: "16px",
1756
- border: `1px solid ${n ? "rgba(255,255,255,0.08)" : "rgba(0,0,0,0.05)"}`,
1757
- backdropFilter: "blur(8px)",
1758
- WebkitBackdropFilter: "blur(8px)",
1759
- padding: "6px 6px 6px 12px"
1760
- },
1761
- children: [
1762
- /* @__PURE__ */ x("div", {
1763
- style: {
1764
- display: "flex",
1765
- alignItems: "center",
1766
- gap: "2px",
1767
- flexShrink: 0,
1768
- paddingBottom: "2px"
1769
- },
1770
- children: [i && /* @__PURE__ */ a("button", {
1771
- type: "button",
1772
- onClick: () => g(!p),
1773
- "aria-label": "Emoji",
1774
- title: "Emoji",
1775
- style: {
1776
- background: "none",
1777
- border: "none",
1778
- cursor: "pointer",
1779
- padding: "6px",
1780
- display: "flex",
1781
- color: p ? r : n ? "rgba(255,255,255,0.35)" : "rgba(0,0,0,0.3)",
1782
- borderRadius: "8px",
1783
- transition: "all 0.2s ease"
1784
- },
1785
- children: /* @__PURE__ */ a(oe, { size: 20 })
1786
- }), c?.enabled && /* @__PURE__ */ a(Ie, {
1787
- config: c,
1788
- onFiles: b,
1789
- selectedFiles: h,
1790
- onRemoveFile: m,
1791
- primaryColor: r
1792
- })]
1793
- }),
1794
- /* @__PURE__ */ a("textarea", {
1795
- ref: D,
1796
- value: f,
1797
- onChange: (d) => w(d.target.value),
1798
- onKeyDown: T,
1799
- placeholder: t,
1800
- disabled: o,
1801
- rows: 1,
1802
- style: {
1803
- flex: 1,
1804
- padding: "8px 2px",
1805
- border: "none",
1806
- borderRadius: "12px",
1807
- outline: "none",
1808
- resize: "none",
1809
- fontFamily: "inherit",
1810
- fontSize: "14px",
1811
- lineHeight: "1.45",
1812
- maxHeight: "100px",
1813
- overflowY: "auto",
1814
- backgroundColor: "transparent",
1815
- color: n ? "#E0E0E0" : "#2D3436",
1816
- letterSpacing: "0.01em"
1817
- }
1818
- }),
1819
- /* @__PURE__ */ a("button", {
1820
- onClick: R,
1821
- disabled: o || !y,
1822
- "aria-label": "Send message",
1823
- style: {
1824
- width: "36px",
1825
- height: "36px",
1826
- borderRadius: "12px",
1827
- background: y ? `linear-gradient(135deg, ${r} 0%, ${Be(r, 30)} 100%)` : n ? "rgba(255,255,255,0.08)" : "rgba(0,0,0,0.06)",
1828
- color: y ? "#fff" : n ? "rgba(255,255,255,0.25)" : "rgba(0,0,0,0.2)",
1829
- border: "none",
1830
- cursor: y ? "pointer" : "default",
1831
- display: "flex",
1832
- alignItems: "center",
1833
- justifyContent: "center",
1834
- flexShrink: 0,
1835
- transition: "all 0.25s cubic-bezier(0.4, 0, 0.2, 1)",
1836
- boxShadow: y ? `0 4px 12px ${r}44` : "none"
1837
- },
1838
- children: /* @__PURE__ */ a(re, { size: 16 })
1839
- })
1840
- ]
1841
- })
1842
- ]
1843
- });
1844
- };
1845
- function Be(e, t) {
1846
- const r = parseInt(e.replace("#", ""), 16), n = Math.min(255, (r >> 16 & 255) + t), o = Math.min(255, (r >> 8 & 255) + t), s = Math.min(255, (r & 255) + t);
1847
- return `#${(n << 16 | o << 8 | s).toString(16).padStart(6, "0")}`;
1848
- }
1849
- var Le = ({ config: e, primaryColor: t }) => {
1850
- if (e.showBranding === !1) return null;
1851
- const r = e.poweredBy ?? "React ChatBot";
1852
- return /* @__PURE__ */ x("div", {
1853
- style: {
1854
- padding: "8px 16px",
1855
- textAlign: "center",
1856
- fontSize: "11px",
1857
- color: "rgba(0,0,0,0.35)",
1858
- background: "rgba(250, 250, 255, 0.7)",
1859
- backdropFilter: "blur(8px)",
1860
- WebkitBackdropFilter: "blur(8px)",
1861
- borderTop: "1px solid rgba(0,0,0,0.04)",
1862
- flexShrink: 0,
1863
- letterSpacing: "0.02em"
1864
- },
1865
- children: [
1866
- "Powered by",
1867
- " ",
1868
- e.poweredByUrl ? /* @__PURE__ */ a("a", {
1869
- href: e.poweredByUrl,
1870
- target: "_blank",
1871
- rel: "noopener noreferrer",
1872
- style: {
1873
- color: t,
1874
- textDecoration: "none",
1875
- fontWeight: 600,
1876
- transition: "opacity 0.2s ease"
1877
- },
1878
- children: r
1879
- }) : /* @__PURE__ */ a("span", {
1880
- style: {
1881
- color: t,
1882
- fontWeight: 600
1883
- },
1884
- children: r
1885
- })
1886
- ]
1887
- });
1888
- }, ze = class {
1889
- constructor(e) {
1890
- this.collectedData = {}, this.idCounter = 0, this.uid = () => `msg_${Date.now()}_${++this.idCounter}`, this.stepHistory = [], this.startStep = e.startStep, this.steps = new Map(e.steps.map((t) => [t.id, t]));
1891
- }
1892
- getStartStepId() {
1893
- return this.startStep;
1894
- }
1895
- getStep(e) {
1896
- return this.steps.get(e);
1897
- }
1898
- getData() {
1899
- return { ...this.collectedData };
1900
- }
1901
- setData(e, t) {
1902
- this.collectedData[e] = t;
1903
- }
1904
- mergeData(e) {
1905
- Object.assign(this.collectedData, e);
1906
- }
1907
- pushHistory(e) {
1908
- this.stepHistory.push(e);
1909
- }
1910
- popHistory() {
1911
- return this.stepHistory.pop(), this.stepHistory.pop();
1912
- }
1913
- canGoBack() {
1914
- return this.stepHistory.length > 1;
1915
- }
1916
- reset() {
1917
- this.collectedData = {}, this.stepHistory = [];
1918
- }
1919
- resolveNext(e, t) {
1920
- if (e.condition) {
1921
- const { field: r, operator: n, value: o, then: s, else: i } = e.condition, c = this.collectedData[r];
1922
- return this.evaluate(c, n, o) ? s : i;
1923
- }
1924
- if (t && e.quickReplies) {
1925
- const r = e.quickReplies.find((n) => n.value === t);
1926
- if (r?.next) return r.next;
1927
- }
1928
- return e.next;
1929
- }
1930
- stepExpectsQuickReply(e) {
1931
- return !!(e.quickReplies && e.quickReplies.length > 0);
1932
- }
1933
- stepExpectsForm(e) {
1934
- return !!e.form;
1935
- }
1936
- matchQuickReply(e, t) {
1937
- if (!e.quickReplies) return;
1938
- const r = t.toLowerCase().trim(), n = e.quickReplies.find((s) => s.value.toLowerCase() === r);
1939
- if (n) return n;
1940
- const o = e.quickReplies.find((s) => s.label.toLowerCase().replace(/[^\w\s]/g, "").trim() === r);
1941
- return o || e.quickReplies.find((s) => r.includes(s.value.toLowerCase()) || s.label.toLowerCase().includes(r));
1942
- }
1943
- buildMessages(e) {
1944
- const t = [], r = e.messages ?? (e.message ? [e.message] : []);
1945
- for (const n of r) t.push({
1946
- id: this.uid(),
1947
- sender: "bot",
1948
- text: n,
1949
- timestamp: Date.now()
1950
- });
1951
- return e.quickReplies && t.length > 0 && (t[t.length - 1].quickReplies = e.quickReplies), e.form && t.push({
1952
- id: this.uid(),
1953
- sender: "bot",
1954
- timestamp: Date.now(),
1955
- form: e.form
1956
- }), e.component && t.push({
1957
- id: this.uid(),
1958
- sender: "bot",
1959
- timestamp: Date.now(),
1960
- component: e.component
1961
- }), t;
1962
- }
1963
- evaluate(e, t, r) {
1964
- switch (t) {
1965
- case "eq":
1966
- return String(e) === String(r);
1967
- case "neq":
1968
- return String(e) !== String(r);
1969
- case "contains":
1970
- return String(e).includes(String(r));
1971
- case "gt":
1972
- return Number(e) > Number(r);
1973
- case "lt":
1974
- return Number(e) < Number(r);
1975
- default:
1976
- return !1;
1977
- }
1978
- }
1979
- }, _e = 0, F = () => `msg_${Date.now()}_${++_e}`, B = (e) => new Promise((t) => setTimeout(t, e)), We = {
1980
- "/help": "Show available commands",
1981
- "/cancel": "Cancel current step and go back",
1982
- "/back": "Go back to the previous step",
1983
- "/restart": "Restart the conversation from the beginning"
1984
- };
1985
- function $e() {
1986
- const { state: e, dispatch: t, props: r } = j(), n = C(null), o = C(!1), s = C(e);
1987
- s.current = e;
1988
- const i = C(r);
1989
- i.current = r, A(() => {
1990
- r.flow && (n.current = new ze(r.flow), o.current = !1);
1991
- }, [r.flow]);
1992
- const c = v(async (l, b) => {
1993
- t({
1994
- type: "SET_TYPING",
1995
- payload: !0
1996
- }), await B(400);
1997
- const m = {
1998
- id: F(),
1999
- sender: "bot",
2000
- text: l,
2001
- timestamp: Date.now(),
2002
- ...b
2003
- };
2004
- t({
2005
- type: "SET_TYPING",
2006
- payload: !1
2007
- }), t({
2008
- type: "ADD_MESSAGE",
2009
- payload: m
2010
- }), i.current.callbacks?.onMessageReceive?.(m);
2011
- }, [t]), u = v((l) => {
2012
- t({
2013
- type: "ADD_MESSAGE",
2014
- payload: {
2015
- id: F(),
2016
- sender: "system",
2017
- text: l,
2018
- timestamp: Date.now()
2019
- }
2020
- });
2021
- }, [t]), f = C(async () => {
2022
- });
2023
- f.current = async (l) => {
2024
- const b = n.current;
2025
- if (!b) return;
2026
- const m = b.getStep(l);
2027
- if (!m) return;
2028
- b.pushHistory(l), t({
2029
- type: "SET_STEP",
2030
- payload: l
2031
- }), t({
2032
- type: "SET_TYPING",
2033
- payload: !0
2034
- }), await B(m.delay ?? 500);
2035
- const y = b.buildMessages(m);
2036
- if (t({
2037
- type: "SET_TYPING",
2038
- payload: !1
2039
- }), t({
2040
- type: "ADD_MESSAGES",
2041
- payload: y
2042
- }), y.forEach((d) => i.current.callbacks?.onMessageReceive?.(d)), m.asyncAction) {
2043
- const d = i.current.actionHandlers?.[m.asyncAction.handler];
2044
- if (d) {
2045
- const S = F();
2046
- t({
2047
- type: "ADD_MESSAGE",
2048
- payload: {
2049
- id: S,
2050
- sender: "bot",
2051
- text: m.asyncAction.loadingMessage ?? "Processing...",
2052
- timestamp: Date.now()
2053
- }
2054
- });
2055
- const M = { updateMessage: (E) => {
2056
- t({
2057
- type: "UPDATE_MESSAGE",
2058
- payload: {
2059
- id: S,
2060
- updates: { text: E }
2061
- }
2062
- });
2063
- } };
2064
- try {
2065
- const E = await d(b.getData(), M);
2066
- E.data && (b.mergeData(E.data), t({
2067
- type: "SET_DATA",
2068
- payload: E.data
2069
- })), t({
2070
- type: "UPDATE_MESSAGE",
2071
- payload: {
2072
- id: S,
2073
- updates: { text: E.message ?? (E.status === "success" ? m.asyncAction.successMessage ?? "Done!" : m.asyncAction.errorMessage ?? "Something went wrong.") }
2074
- }
2075
- });
2076
- const z = w(m, E);
2077
- z && (await B(600), f.current(z));
2078
- } catch {
2079
- t({
2080
- type: "UPDATE_MESSAGE",
2081
- payload: {
2082
- id: S,
2083
- updates: { text: m.asyncAction.errorMessage ?? "❌ Something went wrong." }
2084
- }
2085
- }), m.asyncAction.onError && (await B(600), f.current(m.asyncAction.onError));
2086
- }
2087
- return;
2088
- }
2089
- }
2090
- m.component && i.current.components?.[m.component] || !m.quickReplies && !m.form && m.next && (await B(300), f.current(m.next));
2091
- };
2092
- function w(l, b) {
2093
- return b.next ? b.next : l.asyncAction?.routes?.[b.status] ? l.asyncAction.routes[b.status] : b.status === "success" && l.asyncAction?.onSuccess ? l.asyncAction.onSuccess : b.status === "error" && l.asyncAction?.onError ? l.asyncAction.onError : l.next;
2094
- }
2095
- const p = v((l) => f.current(l), []), g = v(() => {
2096
- const l = n.current;
2097
- if (!l || !l.canGoBack()) {
2098
- u("There is no previous step to go back to.");
2099
- return;
2100
- }
2101
- t({ type: "CLEAR_QUICK_REPLIES" });
2102
- const b = l.popHistory();
2103
- b ? p(b) : u("There is no previous step to go back to.");
2104
- }, [
2105
- t,
2106
- p,
2107
- u
2108
- ]), h = v(() => {
2109
- const l = n.current;
2110
- l && l.reset(), o.current = !1, t({ type: "RESET_CHAT" }), l && (o.current = !0, p(l.getStartStepId()));
2111
- }, [t, p]), k = C(() => !1);
2112
- k.current = (l) => {
2113
- const b = l.trim().toLowerCase();
2114
- if (!b.startsWith("/")) return !1;
2115
- switch (b) {
2116
- case "/help":
2117
- return u(`Available commands:
2118
- ${Object.entries(We).map(([m, y]) => `**${m}** — ${y}`).join(`
2119
- `)}`), !0;
2120
- case "/cancel":
2121
- case "/back":
2122
- return g(), !0;
2123
- case "/restart":
2124
- return h(), !0;
2125
- default:
2126
- return u(`Unknown command: ${b}. Type /help for available commands.`), !0;
2127
- }
2128
- };
2129
- const D = v((l) => {
2130
- const b = n.current, m = s.current.currentStepId;
2131
- if (!b || !m) return;
2132
- const y = b.getStep(m);
2133
- if (!y) return;
2134
- l?.data && (b.mergeData(l.data), t({
2135
- type: "SET_DATA",
2136
- payload: l.data
2137
- })), l?.message && t({
2138
- type: "ADD_MESSAGE",
2139
- payload: {
2140
- id: F(),
2141
- sender: "bot",
2142
- text: l.message,
2143
- timestamp: Date.now()
2144
- }
2145
- });
2146
- const d = l?.next ?? y.next;
2147
- d ? p(d) : (i.current.callbacks?.onFlowEnd?.(b.getData()), t({
2148
- type: "SET_STEP",
2149
- payload: null
2150
- }));
2151
- }, [t, p]), R = v((l) => {
2152
- if (k.current(l)) return;
2153
- const b = {
2154
- id: F(),
2155
- sender: "user",
2156
- text: l,
2157
- timestamp: Date.now()
2158
- };
2159
- t({
2160
- type: "ADD_MESSAGE",
2161
- payload: b
2162
- }), i.current.callbacks?.onMessageSend?.(b), i.current.callbacks?.onSubmit?.({ message: l });
2163
- const m = s.current.currentStepId;
2164
- if (n.current && m) {
2165
- const y = n.current.getStep(m);
2166
- if (y) {
2167
- if (y.asyncAction || y.component) {
2168
- c("Please wait, I'm still processing. You can type /back to go back.");
2169
- return;
2170
- }
2171
- if (n.current.stepExpectsQuickReply(y)) {
2172
- const d = n.current.matchQuickReply(y, l);
2173
- if (d) {
2174
- t({ type: "CLEAR_QUICK_REPLIES" }), n.current.setData(y.id, d.value);
2175
- const S = n.current.resolveNext(y, d.value);
2176
- S ? p(S) : (i.current.callbacks?.onFlowEnd?.(n.current.getData()), t({
2177
- type: "SET_STEP",
2178
- payload: null
2179
- }));
2180
- } else c("I didn't quite get that. Please choose one of the options below:", { quickReplies: y.quickReplies });
2181
- } else if (n.current.stepExpectsForm(y)) c("Please fill out the form above to continue.");
2182
- else {
2183
- n.current.setData(y.id, l);
2184
- const d = n.current.resolveNext(y, l);
2185
- d ? p(d) : (c("Thanks for your message! Our team will get back to you soon. 🙌"), i.current.callbacks?.onFlowEnd?.(n.current.getData()), t({
2186
- type: "SET_STEP",
2187
- payload: null
2188
- }));
2189
- }
2190
- }
2191
- }
2192
- }, [
2193
- t,
2194
- c,
2195
- p
2196
- ]), T = v(() => {
2197
- const l = n.current;
2198
- !l || o.current || (o.current = !0, p(l.getStartStepId()));
2199
- }, [p]);
2200
- return A(() => {
2201
- r.flow && !e.showWelcome && e.isLoggedIn && !o.current && T();
2202
- }, [
2203
- r.flow,
2204
- e.showWelcome,
2205
- e.isLoggedIn,
2206
- T
2207
- ]), {
2208
- state: e,
2209
- sendMessage: R,
2210
- addBotMessage: c,
2211
- handleQuickReply: v((l, b) => {
2212
- t({ type: "CLEAR_QUICK_REPLIES" }), t({
2213
- type: "ADD_MESSAGE",
2214
- payload: {
2215
- id: F(),
2216
- sender: "user",
2217
- text: b,
2218
- timestamp: Date.now()
2219
- }
2220
- }), i.current.callbacks?.onQuickReply?.(l, b);
2221
- const m = s.current.currentStepId;
2222
- if (n.current && m) {
2223
- const y = n.current.getStep(m);
2224
- if (y) {
2225
- n.current.setData(y.id, l);
2226
- const d = n.current.resolveNext(y, l);
2227
- d ? p(d) : (i.current.callbacks?.onFlowEnd?.(n.current.getData()), t({
2228
- type: "SET_STEP",
2229
- payload: null
2230
- }));
2231
- }
2232
- }
2233
- }, [t, p]),
2234
- handleFormSubmit: v(async (l, b) => {
2235
- t({
2236
- type: "SET_DATA",
2237
- payload: b
2238
- }), n.current && n.current.mergeData(b);
2239
- const m = Object.entries(b).filter(([, d]) => d !== void 0 && d !== "").map(([d, S]) => `${d}: ${String(S)}`).join(`
2240
- `);
2241
- t({
2242
- type: "ADD_MESSAGE",
2243
- payload: {
2244
- id: F(),
2245
- sender: "user",
2246
- text: m,
2247
- formData: b,
2248
- timestamp: Date.now()
2249
- }
2250
- }), await i.current.callbacks?.onFormSubmit?.(l, b);
2251
- const y = s.current.currentStepId;
2252
- if (n.current && y) {
2253
- const d = n.current.getStep(y);
2254
- if (d) {
2255
- const S = n.current.resolveNext(d);
2256
- S ? p(S) : (i.current.callbacks?.onFlowEnd?.(n.current.getData()), t({
2257
- type: "SET_STEP",
2258
- payload: null
2259
- }));
2260
- }
2261
- }
2262
- }, [t, p]),
2263
- handleLogin: v(async (l) => {
2264
- await i.current.callbacks?.onLogin?.(l), t({
2265
- type: "SET_LOGGED_IN",
2266
- payload: !0
2267
- });
2268
- }, [t]),
2269
- toggleChat: v(() => {
2270
- const l = !s.current.isOpen;
2271
- t({ type: "TOGGLE_OPEN" }), l ? i.current.callbacks?.onOpen?.() : i.current.callbacks?.onClose?.();
2272
- }, [t]),
2273
- dismissWelcome: v(() => {
2274
- t({ type: "DISMISS_WELCOME" });
2275
- }, [t]),
2276
- startFlow: T,
2277
- processFlowStep: p,
2278
- goBack: g,
2279
- restartSession: h,
2280
- handleComponentComplete: D
2281
- };
2282
- }
2283
- var je = ({ styles: e, position: t, zIndex: r, hidden: n }) => {
2284
- const { props: o, dispatch: s } = j(), i = O(o.theme), c = i.mode === "dark", { state: u, sendMessage: f, handleQuickReply: w, handleFormSubmit: p, handleLogin: g, toggleChat: h, dismissWelcome: k, restartSession: D, handleComponentComplete: R } = $e(), T = t === "bottom-left" ? {
2285
- bottom: "96px",
2286
- left: "24px"
2287
- } : {
2288
- bottom: "96px",
2289
- right: "24px"
2290
- }, l = v((d, S) => {
2291
- if (S && S.length > 0) {
2292
- const M = S.map((E) => ({
2293
- name: E.name,
2294
- url: URL.createObjectURL(E),
2295
- type: E.type,
2296
- size: E.size
2297
- }));
2298
- d ? (s({
2299
- type: "ADD_MESSAGE",
2300
- payload: {
2301
- id: F(),
2302
- sender: "user",
2303
- text: d,
2304
- timestamp: Date.now(),
2305
- attachments: M
2306
- }
2307
- }), f(d)) : s({
2308
- type: "ADD_MESSAGE",
2309
- payload: {
2310
- id: F(),
2311
- sender: "user",
2312
- timestamp: Date.now(),
2313
- attachments: M
2314
- }
2315
- }), o.callbacks?.onFileUpload?.(S);
2316
- } else d && f(d);
2317
- }, [
2318
- f,
2319
- s,
2320
- o.callbacks
2321
- ]), b = U(() => ({
2322
- currentStepId: u.currentStepId,
2323
- isOpen: u.isOpen,
2324
- messages: u.messages,
2325
- collectedData: u.collectedData,
2326
- toggleChat: h,
2327
- restartSession: D,
2328
- sendMessage: f
2329
- }), [
2330
- u.currentStepId,
2331
- u.isOpen,
2332
- u.messages,
2333
- u.collectedData,
2334
- h,
2335
- D,
2336
- f
2337
- ]), m = /* @__PURE__ */ a(pe, {
2338
- config: o.header ?? { title: "Chat with us" },
2339
- styles: e,
2340
- onClose: h,
2341
- onRestart: D,
2342
- logo: o.branding?.logo,
2343
- logoWidth: o.branding?.logoWidth
2344
- }), y = /* @__PURE__ */ a(Me, {
2345
- onSend: l,
2346
- placeholder: o.inputPlaceholder,
2347
- primaryColor: i.primaryColor,
2348
- isDark: c,
2349
- enableEmoji: o.enableEmoji,
2350
- fileUpload: o.fileUpload,
2351
- onFileUpload: o.callbacks?.onFileUpload
2352
- });
2353
- return n ? /* @__PURE__ */ a("div", { style: { display: "none" } }) : /* @__PURE__ */ x("div", {
2354
- style: {
2355
- ...e.window,
2356
- ...T,
2357
- ...r != null ? { zIndex: r } : {}
2358
- },
2359
- children: [o.renderHeader ? o.renderHeader(b, m) : m, u.showWelcome && o.welcomeScreen ? /* @__PURE__ */ a(ue, {
2360
- content: o.welcomeScreen,
2361
- onDismiss: k,
2362
- primaryColor: i.primaryColor
2363
- }) : !u.isLoggedIn && o.loginForm ? /* @__PURE__ */ a(ke, {
2364
- config: o.loginForm,
2365
- onLogin: g,
2366
- primaryColor: i.primaryColor
2367
- }) : /* @__PURE__ */ x(K, { children: [
2368
- /* @__PURE__ */ a(Fe, {
2369
- messages: u.messages,
2370
- isTyping: u.isTyping,
2371
- styles: e,
2372
- primaryColor: i.primaryColor,
2373
- onQuickReply: w,
2374
- onFormSubmit: p,
2375
- components: o.components,
2376
- onComponentComplete: R,
2377
- collectedData: u.collectedData,
2378
- currentStepId: u.currentStepId
2379
- }),
2380
- /* @__PURE__ */ a("div", {
2381
- style: e.inputArea,
2382
- children: o.renderInput ? o.renderInput(b, y) : y
2383
- }),
2384
- o.branding && /* @__PURE__ */ a(Le, {
2385
- config: o.branding,
2386
- primaryColor: i.primaryColor
2387
- })
2388
- ] })]
2389
- });
2390
- }, Oe = class {
2391
- constructor() {
2392
- this.plugins = [], this.context = null, this.eventHandlers = /* @__PURE__ */ new Map();
2393
- }
2394
- register(e) {
2395
- this.plugins = [...e];
2396
- }
2397
- setContext(e) {
2398
- this.context = {
2399
- ...e,
2400
- on: (t, r) => this.on(t, r),
2401
- emit: (t, ...r) => this.emit(t, ...r)
2402
- };
2403
- }
2404
- on(e, t) {
2405
- this.eventHandlers.has(e) || this.eventHandlers.set(e, /* @__PURE__ */ new Set()), this.eventHandlers.get(e).add(t);
2406
- }
2407
- emit(e, ...t) {
2408
- const r = this.eventHandlers.get(e);
2409
- r && r.forEach((n) => n(...t));
2410
- }
2411
- async init() {
2412
- if (this.context)
2413
- for (const e of this.plugins) try {
2414
- await e.onInit?.(this.context);
2415
- } catch (t) {
2416
- console.error(`[Plugin:${e.name}] onInit error:`, t);
2417
- }
2418
- }
2419
- async onMessage(e) {
2420
- if (!this.context) return e;
2421
- let t = e;
2422
- for (const r of this.plugins) try {
2423
- const n = await r.onMessage?.(t, this.context);
2424
- n && typeof n == "object" && "id" in n && (t = n);
2425
- } catch (n) {
2426
- console.error(`[Plugin:${r.name}] onMessage error:`, n);
2427
- }
2428
- return this.dispatchEvent({
2429
- type: "message",
2430
- payload: t,
2431
- timestamp: Date.now()
2432
- }), t;
2433
- }
2434
- async onSubmit(e) {
2435
- if (this.context) {
2436
- for (const t of this.plugins) try {
2437
- await t.onSubmit?.(e, this.context);
2438
- } catch (r) {
2439
- console.error(`[Plugin:${t.name}] onSubmit error:`, r);
2440
- }
2441
- this.dispatchEvent({
2442
- type: "submit",
2443
- payload: e,
2444
- timestamp: Date.now()
2445
- });
2446
- }
2447
- }
2448
- async destroy() {
2449
- if (this.context) {
2450
- for (const e of this.plugins) try {
2451
- await e.onDestroy?.(this.context);
2452
- } catch (t) {
2453
- console.error(`[Plugin:${e.name}] onDestroy error:`, t);
2454
- }
2455
- this.eventHandlers.clear(), this.plugins = [];
2456
- }
2457
- }
2458
- dispatchEvent(e) {
2459
- if (this.context)
2460
- for (const t of this.plugins) try {
2461
- t.onEvent?.(e, this.context);
2462
- } catch (r) {
2463
- console.error(`[Plugin:${t.name}] onEvent error:`, r);
2464
- }
2465
- }
2466
- }, Pe = `
1
+ import e,{createContext as t,useCallback as n,useContext as r,useEffect as i,useMemo as a,useReducer as o,useRef as s,useState as c}from"react";import{Fragment as l,jsx as u,jsxs as d}from"react/jsx-runtime";function f(e,t){switch(t.type){case`TOGGLE_OPEN`:return{...e,isOpen:!e.isOpen};case`SET_OPEN`:return{...e,isOpen:t.payload};case`ADD_MESSAGE`:return{...e,messages:[...e.messages,t.payload]};case`ADD_MESSAGES`:return{...e,messages:[...e.messages,...t.payload]};case`SET_TYPING`:return{...e,isTyping:t.payload};case`DISMISS_WELCOME`:return{...e,showWelcome:!1};case`SET_STEP`:return{...e,currentStepId:t.payload};case`SET_DATA`:return{...e,collectedData:{...e.collectedData,...t.payload}};case`SET_LOGGED_IN`:return{...e,isLoggedIn:t.payload};case`CLEAR_QUICK_REPLIES`:{let t=-1;for(let n=e.messages.length-1;n>=0;n--)if(e.messages[n].quickReplies){t=n;break}if(t===-1)return e;let n=[...e.messages];return n[t]={...n[t],quickReplies:void 0},{...e,messages:n}}case`RESET_CHAT`:return{...e,messages:[],isTyping:!1,currentStepId:null,collectedData:{}};case`UPDATE_MESSAGE`:return{...e,messages:e.messages.map(e=>e.id===t.payload.id?{...e,...t.payload.updates}:e)};default:return e}}var p=e=>({isOpen:e.defaultOpen??!1,messages:e.initialMessages??[],isTyping:!1,showWelcome:!!e.welcomeScreen,currentStepId:null,collectedData:{},isLoggedIn:!e.loginForm}),m=t(null);function h(){let e=r(m);if(!e)throw Error(`useChatContext must be used within ChatProvider`);return e}var g={primaryColor:`#6C5CE7`,headerBg:`linear-gradient(135deg, #6C5CE7 0%, #A29BFE 100%)`,headerText:`#FFFFFF`,bubbleBg:`rgba(241, 243, 249, 0.85)`,bubbleText:`#2D3436`,userBubbleBg:`linear-gradient(135deg, #6C5CE7 0%, #A29BFE 100%)`,userBubbleText:`#FFFFFF`,fontFamily:`"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif`,fontSize:`14px`,borderRadius:`20px`,windowWidth:`400px`,windowHeight:`600px`,mode:`light`},_={headerBg:`linear-gradient(135deg, #2D1B69 0%, #4A3298 100%)`,headerText:`#F0F0FF`,bubbleBg:`rgba(45, 45, 70, 0.85)`,bubbleText:`#E8E8F0`,userBubbleBg:`linear-gradient(135deg, #6C5CE7 0%, #A29BFE 100%)`,userBubbleText:`#FFFFFF`};function v(e){let t={...g,...e};return t.mode===`dark`?{...t,..._,...e}:t}function y(e){return{"--cb-primary":e.primaryColor,"--cb-header-bg":e.headerBg,"--cb-header-text":e.headerText,"--cb-bubble-bg":e.bubbleBg,"--cb-bubble-text":e.bubbleText,"--cb-user-bubble-bg":e.userBubbleBg,"--cb-user-bubble-text":e.userBubbleText,"--cb-font-family":e.fontFamily,"--cb-font-size":e.fontSize,"--cb-border-radius":e.borderRadius,"--cb-window-width":e.windowWidth,"--cb-window-height":e.windowHeight,"--cb-bg":e.mode===`dark`?`rgba(22, 22, 40, 0.95)`:`rgba(255, 255, 255, 0.92)`,"--cb-border":e.mode===`dark`?`rgba(255,255,255,0.08)`:`rgba(0,0,0,0.06)`,"--cb-input-bg":e.mode===`dark`?`rgba(40, 40, 65, 0.8)`:`rgba(245, 247, 252, 0.9)`,"--cb-input-border":e.mode===`dark`?`rgba(255,255,255,0.1)`:`rgba(0,0,0,0.06)`,"--cb-input-text":e.mode===`dark`?`#E0E0E0`:`#2D3436`,"--cb-branding-bg":e.mode===`dark`?`rgba(20, 20, 35, 0.8)`:`rgba(250, 250, 255, 0.8)`}}function b(e,t){let n=e.mode===`dark`;return{root:{fontFamily:e.fontFamily,fontSize:e.fontSize,lineHeight:`1.5`},launcher:{position:`fixed`,width:`62px`,height:`62px`,borderRadius:`50%`,background:e.headerBg,color:`#fff`,border:`none`,cursor:`pointer`,display:`flex`,alignItems:`center`,justifyContent:`center`,boxShadow:`0 6px 24px rgba(108, 92, 231, 0.4), 0 2px 8px rgba(0,0,0,0.1)`,transition:`all 0.3s cubic-bezier(0.4, 0, 0.2, 1)`,zIndex:9998,...t?.launcher},window:{position:`fixed`,width:e.windowWidth,height:e.windowHeight,maxHeight:`85vh`,borderRadius:e.borderRadius,overflow:`hidden`,display:`flex`,flexDirection:`column`,boxShadow:n?`0 20px 60px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.05)`:`0 20px 60px rgba(108, 92, 231, 0.15), 0 8px 24px rgba(0,0,0,0.08), 0 0 0 1px rgba(0,0,0,0.04)`,backgroundColor:n?`rgba(22, 22, 40, 0.95)`:`rgba(255, 255, 255, 0.95)`,backdropFilter:`blur(20px)`,WebkitBackdropFilter:`blur(20px)`,border:n?`1px solid rgba(255,255,255,0.08)`:`1px solid rgba(255,255,255,0.8)`,zIndex:9999,animation:`cb-window-enter 0.35s cubic-bezier(0.4, 0, 0.2, 1)`,...t?.window},header:{background:e.headerBg,color:e.headerText,padding:`18px 20px`,display:`flex`,alignItems:`center`,justifyContent:`space-between`,gap:`12px`,flexShrink:0,position:`relative`,overflow:`hidden`,...t?.header},messageList:{flex:1,overflowY:`auto`,padding:`20px 16px`,display:`flex`,flexDirection:`column`,gap:`10px`,background:n?`linear-gradient(180deg, rgba(22, 22, 40, 0.98) 0%, rgba(30, 30, 50, 0.98) 100%)`:`linear-gradient(180deg, rgba(248, 249, 254, 0.95) 0%, rgba(255, 255, 255, 0.95) 100%)`,...t?.messageList},inputArea:{padding:`12px 16px 14px`,borderTop:`1px solid ${n?`rgba(255,255,255,0.06)`:`rgba(0,0,0,0.05)`}`,backgroundColor:n?`rgba(20, 20, 38, 0.9)`:`rgba(255, 255, 255, 0.95)`,backdropFilter:`blur(12px)`,WebkitBackdropFilter:`blur(12px)`,flexShrink:0,...t?.inputArea},botBubble:{background:n?`rgba(45, 45, 70, 0.7)`:`rgba(241, 243, 249, 0.9)`,color:n?`#E8E8F0`:`#2D3436`,padding:`12px 16px`,borderRadius:`18px 18px 18px 4px`,maxWidth:`82%`,alignSelf:`flex-start`,wordBreak:`break-word`,whiteSpace:`pre-wrap`,backdropFilter:`blur(8px)`,WebkitBackdropFilter:`blur(8px)`,border:n?`1px solid rgba(255,255,255,0.06)`:`1px solid rgba(0,0,0,0.04)`,boxShadow:n?`0 2px 8px rgba(0,0,0,0.2)`:`0 2px 8px rgba(0,0,0,0.04)`,fontSize:`14px`,lineHeight:`1.55`,letterSpacing:`0.01em`},userBubble:{background:e.userBubbleBg,color:e.userBubbleText,padding:`12px 16px`,borderRadius:`18px 18px 4px 18px`,maxWidth:`82%`,alignSelf:`flex-end`,wordBreak:`break-word`,whiteSpace:`pre-wrap`,boxShadow:`0 4px 14px rgba(108, 92, 231, 0.25)`,fontSize:`14px`,lineHeight:`1.55`,letterSpacing:`0.01em`}}}var x=({size:e=18,color:t=`currentColor`})=>u(`svg`,{width:e,height:e,viewBox:`0 0 24 24`,fill:t,children:u(`path`,{d:`M2.01 21L23 12 2.01 3 2 10l15 2-15 2z`})}),S=({size:e=28,color:t=`currentColor`})=>u(`svg`,{width:e,height:e,viewBox:`0 0 24 24`,fill:`none`,stroke:t,strokeWidth:`2`,strokeLinecap:`round`,strokeLinejoin:`round`,children:u(`path`,{d:`M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z`})}),C=({size:e=20,color:t=`currentColor`})=>d(`svg`,{width:e,height:e,viewBox:`0 0 24 24`,fill:`none`,stroke:t,strokeWidth:`2`,strokeLinecap:`round`,strokeLinejoin:`round`,children:[u(`line`,{x1:`18`,y1:`6`,x2:`6`,y2:`18`}),u(`line`,{x1:`6`,y1:`6`,x2:`18`,y2:`18`})]}),w=({size:e=20,color:t=`currentColor`})=>u(`svg`,{width:e,height:e,viewBox:`0 0 24 24`,fill:`none`,stroke:t,strokeWidth:`2`,strokeLinecap:`round`,strokeLinejoin:`round`,children:u(`line`,{x1:`5`,y1:`12`,x2:`19`,y2:`12`})}),T=({size:e=20,color:t=`currentColor`})=>d(`svg`,{width:e,height:e,viewBox:`0 0 24 24`,fill:`none`,stroke:t,strokeWidth:`2`,strokeLinecap:`round`,strokeLinejoin:`round`,children:[u(`circle`,{cx:`12`,cy:`12`,r:`10`}),u(`path`,{d:`M8 14s1.5 2 4 2 4-2 4-2`}),u(`line`,{x1:`9`,y1:`9`,x2:`9.01`,y2:`9`}),u(`line`,{x1:`15`,y1:`9`,x2:`15.01`,y2:`9`})]}),E=({size:e=20,color:t=`currentColor`})=>u(`svg`,{width:e,height:e,viewBox:`0 0 24 24`,fill:`none`,stroke:t,strokeWidth:`2`,strokeLinecap:`round`,strokeLinejoin:`round`,children:u(`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`})}),D=({size:e=16,color:t=`currentColor`})=>d(`svg`,{width:e,height:e,viewBox:`0 0 24 24`,fill:`none`,stroke:t,strokeWidth:`2`,strokeLinecap:`round`,strokeLinejoin:`round`,children:[u(`path`,{d:`M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z`}),u(`polyline`,{points:`14 2 14 8 20 8`})]}),O=({size:e=16,color:t=`currentColor`})=>d(`svg`,{width:e,height:e,viewBox:`0 0 24 24`,fill:`none`,stroke:t,strokeWidth:`2`,strokeLinecap:`round`,strokeLinejoin:`round`,children:[u(`rect`,{x:`3`,y:`3`,width:`18`,height:`18`,rx:`2`,ry:`2`}),u(`circle`,{cx:`8.5`,cy:`8.5`,r:`1.5`}),u(`polyline`,{points:`21 15 16 10 5 21`})]}),k=({size:e=14,color:t=`currentColor`})=>d(`svg`,{width:e,height:e,viewBox:`0 0 24 24`,fill:`none`,stroke:t,strokeWidth:`2`,strokeLinecap:`round`,strokeLinejoin:`round`,children:[u(`circle`,{cx:`12`,cy:`12`,r:`10`}),u(`line`,{x1:`15`,y1:`9`,x2:`9`,y2:`15`}),u(`line`,{x1:`9`,y1:`9`,x2:`15`,y2:`15`})]}),A=({size:e=16,color:t=`currentColor`})=>d(`svg`,{width:e,height:e,viewBox:`0 0 24 24`,fill:`none`,stroke:t,strokeWidth:`2`,strokeLinecap:`round`,strokeLinejoin:`round`,children:[u(`polyline`,{points:`1 4 1 10 7 10`}),u(`path`,{d:`M3.51 15a9 9 0 1 0 2.13-9.36L1 10`})]}),j=({onClick:e,isOpen:t,position:n,styles:r,icon:i,closeIcon:a,zIndex:o})=>{let s=n===`bottom-left`?{bottom:`24px`,left:`24px`}:{bottom:`24px`,right:`24px`};return u(`button`,{onClick:e,"aria-label":t?`Close chat`:`Open chat`,style:{...r.launcher,...s,...o==null?{}:{zIndex:o},transform:t?`scale(0.92) rotate(90deg)`:`scale(1)`,animation:t?`none`:`cb-launcher-pulse 3s ease-in-out infinite`},children:t?a??u(C,{size:22}):i??u(S,{size:26})})},ee=({config:e,styles:t,onClose:n,onRestart:r,logo:i,logoWidth:a})=>d(`div`,{style:t.header,children:[u(`div`,{style:{position:`absolute`,top:0,left:0,right:0,bottom:0,background:`linear-gradient(135deg, rgba(255,255,255,0.12) 0%, transparent 50%)`,pointerEvents:`none`}}),d(`div`,{style:{display:`flex`,alignItems:`center`,gap:`12px`,flex:1,position:`relative`,zIndex:1},children:[e.avatar&&d(`div`,{style:{position:`relative`},children:[u(`img`,{src:e.avatar,alt:``,style:{width:`40px`,height:`40px`,borderRadius:`50%`,objectFit:`cover`,border:`2px solid rgba(255,255,255,0.3)`}}),u(`span`,{style:{position:`absolute`,bottom:`1px`,right:`1px`,width:`10px`,height:`10px`,backgroundColor:`#2ECC71`,borderRadius:`50%`,border:`2px solid rgba(255,255,255,0.8)`}})]}),i&&!e.avatar&&u(`img`,{src:i,alt:``,style:{width:a??`36px`,height:`auto`,objectFit:`contain`,filter:`brightness(1.1)`}}),!e.avatar&&!i&&u(`div`,{style:{width:`40px`,height:`40px`,borderRadius:`50%`,background:`rgba(255,255,255,0.2)`,backdropFilter:`blur(4px)`,display:`flex`,alignItems:`center`,justifyContent:`center`,fontSize:`18px`,fontWeight:700,color:`rgba(255,255,255,0.9)`,border:`1px solid rgba(255,255,255,0.2)`},children:(e.title??`C`).charAt(0).toUpperCase()}),d(`div`,{children:[u(`div`,{style:{fontWeight:600,fontSize:`16px`,letterSpacing:`-0.01em`},children:e.title??`Chat with us`}),e.subtitle&&d(`div`,{style:{fontSize:`12px`,opacity:.8,display:`flex`,alignItems:`center`,gap:`5px`,marginTop:`1px`},children:[u(`span`,{style:{width:`6px`,height:`6px`,borderRadius:`50%`,backgroundColor:`#2ECC71`,display:`inline-block`}}),e.subtitle]})]})]}),d(`div`,{style:{display:`flex`,alignItems:`center`,gap:`2px`,position:`relative`,zIndex:1},children:[e.showRestart&&r&&u(`button`,{onClick:r,"aria-label":`Restart conversation`,title:`Restart conversation`,style:{background:`rgba(255,255,255,0.1)`,border:`none`,color:`inherit`,cursor:`pointer`,padding:`6px`,display:`flex`,alignItems:`center`,borderRadius:`8px`,transition:`background 0.2s ease`},onMouseEnter:e=>e.currentTarget.style.background=`rgba(255,255,255,0.2)`,onMouseLeave:e=>e.currentTarget.style.background=`rgba(255,255,255,0.1)`,children:u(A,{size:16})}),e.showMinimize&&u(`button`,{onClick:n,"aria-label":`Minimize chat`,style:{background:`rgba(255,255,255,0.1)`,border:`none`,color:`inherit`,cursor:`pointer`,padding:`6px`,display:`flex`,alignItems:`center`,borderRadius:`8px`,transition:`background 0.2s ease`},onMouseEnter:e=>e.currentTarget.style.background=`rgba(255,255,255,0.2)`,onMouseLeave:e=>e.currentTarget.style.background=`rgba(255,255,255,0.1)`,children:u(w,{size:16})}),e.showClose!==!1&&u(`button`,{onClick:n,"aria-label":`Close chat`,style:{background:`rgba(255,255,255,0.1)`,border:`none`,color:`inherit`,cursor:`pointer`,padding:`6px`,display:`flex`,alignItems:`center`,borderRadius:`8px`,transition:`background 0.2s ease`},onMouseEnter:e=>e.currentTarget.style.background=`rgba(255,255,255,0.2)`,onMouseLeave:e=>e.currentTarget.style.background=`rgba(255,255,255,0.1)`,children:u(C,{size:18})})]})]}),te=({content:e,onDismiss:t,primaryColor:n})=>d(`div`,{style:{flex:1,display:`flex`,flexDirection:`column`,overflow:`auto`,background:`linear-gradient(180deg, rgba(248, 249, 254, 0.95) 0%, rgba(255, 255, 255, 0.98) 100%)`},children:[u(`div`,{style:{flex:1,padding:`28px 24px`,overflow:`auto`},children:e}),u(`div`,{style:{padding:`16px 20px`,borderTop:`1px solid rgba(0,0,0,0.05)`,backdropFilter:`blur(12px)`,WebkitBackdropFilter:`blur(12px)`,flexShrink:0},children:u(`button`,{onClick:t,style:{width:`100%`,padding:`14px`,background:`linear-gradient(135deg, ${n} 0%, ${ne(n,30)} 100%)`,color:`#fff`,border:`none`,borderRadius:`14px`,fontSize:`15px`,fontWeight:600,cursor:`pointer`,fontFamily:`inherit`,letterSpacing:`0.02em`,boxShadow:`0 6px 20px ${n}44`,transition:`all 0.25s cubic-bezier(0.4, 0, 0.2, 1)`},onMouseEnter:e=>{e.currentTarget.style.transform=`translateY(-1px)`,e.currentTarget.style.boxShadow=`0 8px 28px ${n}55`},onMouseLeave:e=>{e.currentTarget.style.transform=`translateY(0)`,e.currentTarget.style.boxShadow=`0 6px 20px ${n}44`},children:`Start Chat`})})]});function ne(e,t){let n=parseInt(e.replace(`#`,``),16),r=Math.min(255,(n>>16&255)+t),i=Math.min(255,(n>>8&255)+t),a=Math.min(255,(n&255)+t);return`#${(r<<16|i<<8|a).toString(16).padStart(6,`0`)}`}var M=({field:e,value:t,onChange:n,error:r})=>{let i=e.type===`textarea`,a=e.type===`textarea`?void 0:e.type,o={width:`100%`,padding:`10px 14px`,border:`1.5px solid ${r?`rgba(229, 62, 62, 0.5)`:`rgba(0,0,0,0.08)`}`,borderRadius:`12px`,fontSize:`13px`,fontFamily:`inherit`,outline:`none`,boxSizing:`border-box`,transition:`all 0.2s ease`,backgroundColor:`rgba(245, 247, 252, 0.6)`,color:`#2D3436`,letterSpacing:`0.01em`};return d(`div`,{style:{marginBottom:`14px`},children:[e.label&&d(`label`,{style:{display:`block`,marginBottom:`6px`,fontSize:`13px`,fontWeight:500,color:`#2D3436`},children:[e.label,e.required&&u(`span`,{style:{color:`#E53E3E`,marginLeft:`3px`},children:`*`})]}),i?u(`textarea`,{value:t,onChange:e=>n(e.target.value),placeholder:e.placeholder,required:e.required,rows:3,style:{...o,resize:`vertical`},minLength:e.validation?.minLength,maxLength:e.validation?.maxLength}):u(`input`,{type:a,value:t,onChange:e=>n(e.target.value),placeholder:e.placeholder,required:e.required,style:o,min:e.validation?.min,max:e.validation?.max,minLength:e.validation?.minLength,maxLength:e.validation?.maxLength,pattern:e.validation?.pattern}),r&&u(`div`,{style:{color:`#E53E3E`,fontSize:`12px`,marginTop:`2px`},children:r})]})},N=({field:e,value:t,onChange:n,error:r})=>{let i=e.type===`multiselect`||e.multiple,a=e=>{n(i?Array.from(e.target.selectedOptions,e=>e.value):e.target.value)},o=i?Array.isArray(t)?t:[t].filter(Boolean):typeof t==`string`?t:``;return d(`div`,{style:{marginBottom:`14px`},children:[e.label&&d(`label`,{style:{display:`block`,marginBottom:`6px`,fontSize:`13px`,fontWeight:500,color:`#2D3436`},children:[e.label,e.required&&u(`span`,{style:{color:`#E53E3E`,marginLeft:`3px`},children:`*`})]}),d(`select`,{value:o,onChange:a,multiple:i,required:e.required,style:{width:`100%`,padding:`10px 14px`,border:`1.5px solid ${r?`rgba(229, 62, 62, 0.5)`:`rgba(0,0,0,0.08)`}`,borderRadius:`12px`,fontSize:`13px`,fontFamily:`inherit`,outline:`none`,backgroundColor:`rgba(245, 247, 252, 0.6)`,color:`#2D3436`,boxSizing:`border-box`,transition:`all 0.2s ease`,...i?{minHeight:`80px`}:{}},children:[!i&&u(`option`,{value:``,children:`Select...`}),e.options?.map(e=>u(`option`,{value:e.value,children:e.label},e.value))]}),i&&u(`div`,{style:{fontSize:`11px`,color:`#888`,marginTop:`2px`},children:`Hold Ctrl/Cmd to select multiple`}),r&&u(`div`,{style:{color:`#E53E3E`,fontSize:`12px`,marginTop:`2px`},children:r})]})},P=({field:e,value:t,onChange:n,error:r})=>d(`div`,{style:{marginBottom:`12px`},children:[e.label&&d(`label`,{style:{display:`block`,marginBottom:`6px`,fontSize:`13px`,fontWeight:500},children:[e.label,e.required&&u(`span`,{style:{color:`#E53E3E`,marginLeft:`2px`},children:`*`})]}),u(`div`,{style:{display:`flex`,flexDirection:`column`,gap:`6px`},children:e.options?.map(r=>d(`label`,{style:{display:`flex`,alignItems:`center`,gap:`8px`,cursor:`pointer`,fontSize:`13px`},children:[u(`input`,{type:`radio`,name:e.name,value:r.value,checked:t===r.value,onChange:()=>n(r.value),style:{margin:0}}),r.label]},r.value))}),r&&u(`div`,{style:{color:`#E53E3E`,fontSize:`12px`,marginTop:`2px`},children:r})]}),F=({field:e,value:t,onChange:n,error:r})=>{let i=e=>{t.includes(e)?n(t.filter(t=>t!==e)):n([...t,e])};return d(`div`,{style:{marginBottom:`12px`},children:[e.label&&d(`label`,{style:{display:`block`,marginBottom:`6px`,fontSize:`13px`,fontWeight:500},children:[e.label,e.required&&u(`span`,{style:{color:`#E53E3E`,marginLeft:`2px`},children:`*`})]}),u(`div`,{style:{display:`flex`,flexDirection:`column`,gap:`6px`},children:e.options?.map(e=>d(`label`,{style:{display:`flex`,alignItems:`center`,gap:`8px`,cursor:`pointer`,fontSize:`13px`},children:[u(`input`,{type:`checkbox`,checked:t.includes(e.value),onChange:()=>i(e.value),style:{margin:0}}),e.label]},e.value))}),r&&u(`div`,{style:{color:`#E53E3E`,fontSize:`12px`,marginTop:`2px`},children:r})]})},I=({field:e,value:t,onChange:n,error:r,primaryColor:i})=>{let a=s(null),o=t?Array.from(t).map(e=>e.name).join(`, `):``;return d(`div`,{style:{marginBottom:`12px`},children:[e.label&&d(`label`,{style:{display:`block`,marginBottom:`4px`,fontSize:`13px`,fontWeight:500},children:[e.label,e.required&&u(`span`,{style:{color:`#E53E3E`,marginLeft:`2px`},children:`*`})]}),u(`input`,{ref:a,type:`file`,accept:e.accept,multiple:e.multiple,onChange:e=>n(e.target.files),style:{display:`none`}}),u(`button`,{type:`button`,onClick:()=>a.current?.click(),style:{padding:`8px 16px`,border:`1px dashed ${r?`#E53E3E`:`#D1D5DB`}`,borderRadius:`8px`,backgroundColor:`#FAFAFA`,cursor:`pointer`,fontSize:`13px`,color:`#555`,width:`100%`,textAlign:`left`},children:o||e.placeholder||`Choose file(s)...`}),o&&d(`div`,{style:{fontSize:`12px`,color:i,marginTop:`4px`},children:[Array.from(t).length,` file(s) selected`]}),r&&u(`div`,{style:{color:`#E53E3E`,fontSize:`12px`,marginTop:`2px`},children:r})]})},L=({config:e,onSubmit:t,primaryColor:r,renderFormField:i})=>{let[a,o]=c(()=>{let t={};for(let n of e.fields)n.defaultValue===void 0?n.type===`checkbox`||n.type===`multiselect`?t[n.name]=[]:n.type===`file`?t[n.name]=null:t[n.name]=``:t[n.name]=n.defaultValue;return t}),[s,l]=c({}),[f,p]=c(!1),m=n((e,t)=>{o(n=>({...n,[e]:t})),l(t=>{let n={...t};return delete n[e],n})},[]),h=()=>{let t={};for(let n of e.fields){let e=a[n.name];if(n.required&&(e===``||e==null||Array.isArray(e)&&e.length===0)){t[n.name]=n.validation?.message??`${n.label||n.name} is required`;continue}if(n.validation?.pattern&&typeof e==`string`&&e)try{new RegExp(n.validation.pattern).test(e)||(t[n.name]=n.validation.message??`Invalid format`)}catch{}}return l(t),Object.keys(t).length===0};return f?u(`div`,{style:{padding:`16px`,background:`linear-gradient(135deg, rgba(46, 213, 115, 0.1), rgba(46, 213, 115, 0.05))`,borderRadius:`14px`,fontSize:`14px`,color:`#2ecc71`,textAlign:`center`,fontWeight:500,border:`1px solid rgba(46, 213, 115, 0.15)`,animation:`cb-fade-in 0.3s ease-out`},children:`✓ Submitted successfully`}):d(`form`,{onSubmit:e=>{e.preventDefault(),h()&&(p(!0),t(a))},style:{background:`rgba(255, 255, 255, 0.7)`,backdropFilter:`blur(12px)`,WebkitBackdropFilter:`blur(12px)`,borderRadius:`16px`,padding:`20px`,border:`1px solid rgba(0,0,0,0.06)`,boxShadow:`0 4px 16px rgba(0,0,0,0.04)`,animation:`cb-slide-up 0.35s ease-out`},children:[e.title&&u(`div`,{style:{fontWeight:600,fontSize:`15px`,marginBottom:`4px`,color:`#2D3436`,letterSpacing:`-0.01em`},children:e.title}),e.description&&u(`div`,{style:{fontSize:`12px`,color:`rgba(0,0,0,0.45)`,marginBottom:`16px`,lineHeight:`1.5`},children:e.description}),e.fields.map(e=>u(re,{field:e,value:a[e.name],onChange:t=>m(e.name,t),error:s[e.name],primaryColor:r,renderFormField:i},e.name)),u(`button`,{type:`submit`,style:{width:`100%`,padding:`12px`,background:`linear-gradient(135deg, ${r} 0%, ${ie(r,30)} 100%)`,color:`#fff`,border:`none`,borderRadius:`12px`,fontSize:`14px`,fontWeight:600,cursor:`pointer`,marginTop:`8px`,fontFamily:`inherit`,letterSpacing:`0.02em`,boxShadow:`0 4px 14px ${r}33`,transition:`all 0.25s cubic-bezier(0.4, 0, 0.2, 1)`},onMouseEnter:e=>{e.currentTarget.style.transform=`translateY(-1px)`,e.currentTarget.style.boxShadow=`0 6px 20px ${r}44`},onMouseLeave:e=>{e.currentTarget.style.transform=`translateY(0)`,e.currentTarget.style.boxShadow=`0 4px 14px ${r}33`},children:e.submitLabel??`Submit`})]})},re=({field:e,value:t,onChange:n,error:r,primaryColor:i,renderFormField:a})=>{let o=a?.[e.type];switch(e.type){case`text`:case`email`:case`password`:case`number`:case`tel`:case`url`:case`textarea`:case`date`:case`time`:{let i={type:e.type,field:e,value:String(t??``),onChange:n,error:r},a=u(M,{field:e,value:String(t??``),onChange:n,error:r});return o?u(l,{children:o(i,a)}):a}case`select`:case`multiselect`:{let i={type:e.type,field:e,value:t,onChange:n,error:r},a=u(N,{field:e,value:t,onChange:n,error:r});return o?u(l,{children:o(i,a)}):a}case`radio`:{let i={type:`radio`,field:e,value:String(t??``),onChange:n,error:r},a=u(P,{field:e,value:String(t??``),onChange:n,error:r});return o?u(l,{children:o(i,a)}):a}case`checkbox`:{let i={type:`checkbox`,field:e,value:t??[],onChange:n,error:r},a=u(F,{field:e,value:t??[],onChange:n,error:r});return o?u(l,{children:o(i,a)}):a}case`file`:{let a={type:`file`,field:e,value:t,onChange:n,error:r,primaryColor:i},s=u(I,{field:e,value:t,onChange:n,error:r,primaryColor:i});return o?u(l,{children:o(a,s)}):s}case`hidden`:return u(`input`,{type:`hidden`,name:e.name,value:String(t??``)});default:return null}};function ie(e,t){let n=parseInt(e.replace(`#`,``),16),r=Math.min(255,(n>>16&255)+t),i=Math.min(255,(n>>8&255)+t),a=Math.min(255,(n&255)+t);return`#${(r<<16|i<<8|a).toString(16).padStart(6,`0`)}`}var R=({config:e,onLogin:t,primaryColor:n,renderFormField:r})=>u(`div`,{style:{flex:1,display:`flex`,flexDirection:`column`,justifyContent:`center`,padding:`24px`,overflow:`auto`,background:`linear-gradient(180deg, rgba(248, 249, 254, 0.95) 0%, rgba(255, 255, 255, 0.98) 100%)`},children:u(L,{config:e,onSubmit:t,primaryColor:n,renderFormField:r})}),z=({message:e,styles:t})=>{let n=e.sender===`bot`,r=e.sender===`system`,i=n||r?t.botBubble:t.userBubble;return e.text||e.attachments&&e.attachments.length>0?d(`div`,{style:{...i,...r?{background:`transparent`,border:`none`,boxShadow:`none`,color:`#999`,fontSize:`12px`,alignSelf:`center`,padding:`6px 12px`,backdropFilter:`none`,WebkitBackdropFilter:`none`}:{},animation:`cb-fade-in 0.3s ease-out`},children:[e.text&&u(`span`,{style:{display:`block`},children:e.text}),e.attachments&&e.attachments.length>0&&u(`div`,{style:{marginTop:e.text?`10px`:0,display:`flex`,flexDirection:`column`,gap:`6px`},children:e.attachments.map((e,t)=>u(ae,{attachment:e,isBot:n},t))})]}):null},ae=({attachment:e,isBot:t})=>e.type.startsWith(`image/`)&&e.url?d(`div`,{style:{borderRadius:`12px`,overflow:`hidden`,maxWidth:`220px`},children:[u(`img`,{src:e.url,alt:e.name,style:{width:`100%`,height:`auto`,display:`block`,borderRadius:`12px`}}),u(`div`,{style:{fontSize:`11px`,padding:`4px 0`,opacity:.6},children:e.name})]}):d(`a`,{href:e.url,target:`_blank`,rel:`noopener noreferrer`,style:{display:`flex`,alignItems:`center`,gap:`8px`,padding:`8px 12px`,backgroundColor:t?`rgba(0,0,0,0.04)`:`rgba(255,255,255,0.15)`,borderRadius:`10px`,textDecoration:`none`,color:`inherit`,fontSize:`13px`,border:t?`1px solid rgba(0,0,0,0.06)`:`1px solid rgba(255,255,255,0.15)`,transition:`background 0.2s ease`},children:[u(D,{size:16}),u(`span`,{style:{overflow:`hidden`,textOverflow:`ellipsis`,whiteSpace:`nowrap`,flex:1},children:e.name}),e.size&&u(`span`,{style:{fontSize:`11px`,opacity:.5,flexShrink:0},children:oe(e.size)})]});function oe(e){return e<1024?`${e}B`:e<1024*1024?`${(e/1024).toFixed(1)}KB`:`${(e/(1024*1024)).toFixed(1)}MB`}var B=({replies:e,onSelect:t,primaryColor:n})=>u(`div`,{style:{display:`flex`,flexWrap:`wrap`,gap:`8px`,alignSelf:`flex-start`,maxWidth:`90%`,animation:`cb-slide-up 0.35s ease-out`,padding:`4px 0`},children:e.map(e=>u(`button`,{onClick:()=>t(e.value,e.label),style:{padding:`8px 18px`,borderRadius:`22px`,border:`1.5px solid ${n}`,backgroundColor:`rgba(108, 92, 231, 0.06)`,color:n,cursor:`pointer`,fontSize:`13px`,fontWeight:500,fontFamily:`inherit`,transition:`all 0.25s cubic-bezier(0.4, 0, 0.2, 1)`,backdropFilter:`blur(4px)`,WebkitBackdropFilter:`blur(4px)`,letterSpacing:`0.01em`},onMouseEnter:e=>{e.currentTarget.style.backgroundColor=n,e.currentTarget.style.color=`#fff`,e.currentTarget.style.transform=`translateY(-1px)`,e.currentTarget.style.boxShadow=`0 4px 14px ${n}44`},onMouseLeave:e=>{e.currentTarget.style.backgroundColor=`rgba(108, 92, 231, 0.06)`,e.currentTarget.style.color=n,e.currentTarget.style.transform=`translateY(0)`,e.currentTarget.style.boxShadow=`none`},children:e.label},e.value))}),V=({color:e})=>{let t={width:`7px`,height:`7px`,borderRadius:`50%`,backgroundColor:e,opacity:.35,animation:`cb-typing-bounce 1.4s infinite ease-in-out`};return d(`div`,{style:{display:`flex`,gap:`5px`,padding:`14px 18px`,background:`rgba(241, 243, 249, 0.8)`,backdropFilter:`blur(8px)`,WebkitBackdropFilter:`blur(8px)`,borderRadius:`18px 18px 18px 4px`,alignSelf:`flex-start`,alignItems:`center`,border:`1px solid rgba(0,0,0,0.04)`,boxShadow:`0 2px 8px rgba(0,0,0,0.04)`,animation:`cb-fade-in 0.3s ease-out`},children:[u(`span`,{style:{...t,animationDelay:`0s`}}),u(`span`,{style:{...t,animationDelay:`0.2s`}}),u(`span`,{style:{...t,animationDelay:`0.4s`}})]})},H=({messages:t,isTyping:n,styles:r,primaryColor:a,onQuickReply:o,onFormSubmit:c,components:l,onComponentComplete:f,collectedData:p,currentStepId:m,renderFormField:h})=>{let g=s(null);return i(()=>{g.current?.scrollIntoView({behavior:`smooth`})},[t,n]),d(`div`,{style:r.messageList,className:`cb-scrollbar`,children:[t.map(t=>d(e.Fragment,{children:[u(z,{message:t,styles:r}),t.quickReplies&&t.quickReplies.length>0&&u(B,{replies:t.quickReplies,onSelect:o,primaryColor:a}),t.form&&u(`div`,{style:{alignSelf:`flex-start`,width:`92%`,animation:`cb-slide-up 0.35s ease-out`},children:u(L,{config:t.form,onSubmit:e=>c(t.form.id,e),primaryColor:a,renderFormField:h})}),t.component&&l?.[t.component]&&u(`div`,{style:{alignSelf:`flex-start`,width:`92%`,animation:`cb-slide-up 0.35s ease-out`},children:e.createElement(l[t.component],{stepId:m??``,data:p??{},onComplete:e=>f?.(e)})})]},t.id)),n&&u(V,{color:a}),u(`div`,{ref:g})]})},U=[{name:`Smileys`,emojis:`😀.😃.😄.😁.😅.😂.🤣.😊.😇.🙂.😉.😍.🥰.😘.😋.😜.🤪.🤗.🤔.🤫.🤭.😏.😐.😑.😶.😌.😴.🤤.😷.🤒`.split(`.`)},{name:`Gestures`,emojis:`👍.👎.👌.✌️.🤞.🤟.🤘.👋.🤚.✋.🖖.👏.🙌.🤝.🙏.💪.🖐️.☝️.👆.👇.👈.👉.🤙.🫡.🫶.🫰.🫳.🫴.🫲.🫱`.split(`.`)},{name:`Hearts`,emojis:`❤️.🧡.💛.💚.💙.💜.🖤.🤍.🤎.💔.❣️.💕.💞.💓.💗.💖.💘.💝.💟.♥️.🫀.💌.💐.🌹.🌺.🌸.🌼.🌻.🌷.💮`.split(`.`)},{name:`Objects`,emojis:`🔥.⭐.✨.💯.🎉.🎊.🎯.🚀.💡.📌.📎.🔗.💻.📱.☎️.📧.📝.📋.📊.📈.🗂️.📁.🔒.🔑.⚙️.🛠️.🔧.📦.🏷️.✅`.split(`.`)}],W=({onSelect:e,onClose:t,primaryColor:n})=>{let[r,a]=c(0),o=s(null);i(()=>{let e=e=>{o.current&&!o.current.contains(e.target)&&t()};return document.addEventListener(`mousedown`,e),()=>document.removeEventListener(`mousedown`,e)},[t]);let l=U[r]?.emojis??[];return d(`div`,{ref:o,style:{position:`absolute`,bottom:`100%`,left:0,width:`280px`,backgroundColor:`rgba(255, 255, 255, 0.92)`,backdropFilter:`blur(20px)`,WebkitBackdropFilter:`blur(20px)`,borderRadius:`16px`,boxShadow:`0 8px 32px rgba(0,0,0,0.12), 0 0 0 1px rgba(0,0,0,0.04)`,border:`1px solid rgba(255,255,255,0.8)`,overflow:`hidden`,zIndex:10,marginBottom:`8px`,animation:`cb-slide-up 0.25s ease-out`},children:[u(`div`,{style:{display:`flex`,borderBottom:`1px solid rgba(0,0,0,0.06)`,padding:`6px`,gap:`3px`},children:U.map((e,t)=>u(`button`,{onClick:()=>a(t),title:e.name,style:{flex:1,padding:`6px 4px`,border:`none`,borderRadius:`8px`,cursor:`pointer`,fontSize:`11px`,fontWeight:600,fontFamily:`inherit`,letterSpacing:`0.02em`,background:t===r?`linear-gradient(135deg, ${n}, ${n}CC)`:`transparent`,color:t===r?`#fff`:`rgba(0,0,0,0.4)`,transition:`all 0.2s ease`,boxShadow:t===r?`0 2px 8px ${n}33`:`none`},children:e.name},e.name))}),u(`div`,{style:{display:`grid`,gridTemplateColumns:`repeat(8, 1fr)`,gap:`2px`,padding:`8px`,maxHeight:`180px`,overflowY:`auto`},children:l.map(n=>u(`button`,{onClick:()=>{e(n),t()},style:{width:`30px`,height:`30px`,border:`none`,backgroundColor:`transparent`,cursor:`pointer`,fontSize:`18px`,borderRadius:`6px`,display:`flex`,alignItems:`center`,justifyContent:`center`,transition:`all 0.15s ease`},onMouseEnter:e=>e.currentTarget.style.backgroundColor=`rgba(108, 92, 231, 0.08)`,onMouseLeave:e=>e.currentTarget.style.backgroundColor=`transparent`,children:n},n))})]})},G=({config:e,onFiles:t,selectedFiles:n,onRemoveFile:r,primaryColor:i})=>{let a=s(null);return d(`div`,{children:[u(`input`,{ref:a,type:`file`,accept:e.accept,multiple:e.multiple!==!1,onChange:r=>{let i=r.target.files;if(!i||i.length===0)return;let o=Array.from(i);if(e.maxSize&&o.filter(t=>t.size>e.maxSize).length>0){alert(`File(s) too large. Max size: ${q(e.maxSize)}`);return}let s=e.maxFiles??5;if(n.length+o.length>s){alert(`Maximum ${s} files allowed`);return}t(o),a.current&&(a.current.value=``)},style:{display:`none`}}),u(`button`,{type:`button`,onClick:()=>a.current?.click(),"aria-label":`Attach file`,title:`Attach file`,style:{background:`none`,border:`none`,cursor:`pointer`,padding:`6px`,display:`flex`,alignItems:`center`,color:`#999`,borderRadius:`6px`,transition:`color 0.15s ease`},onMouseEnter:e=>e.currentTarget.style.color=i,onMouseLeave:e=>e.currentTarget.style.color=`#999`,children:u(E,{size:20})})]})},K=({files:e,onRemove:t,primaryColor:n})=>e.length===0?null:u(`div`,{style:{display:`flex`,flexWrap:`wrap`,gap:`6px`,padding:`8px 12px 0`},children:e.map((e,r)=>u(se,{file:e,onRemove:()=>t(r),primaryColor:n},`${e.name}-${r}`))}),se=({file:e,onRemove:t,primaryColor:n})=>{let r=e.type.startsWith(`image/`);return d(`div`,{style:{display:`flex`,alignItems:`center`,gap:`6px`,padding:`4px 8px`,backgroundColor:`#F3F4F6`,borderRadius:`8px`,fontSize:`12px`,maxWidth:`200px`},children:[u(`span`,{style:{color:n,flexShrink:0},children:u(r?O:D,{size:14})}),u(`span`,{style:{overflow:`hidden`,textOverflow:`ellipsis`,whiteSpace:`nowrap`,color:`#555`},children:e.name}),u(`span`,{style:{color:`#999`,fontSize:`11px`,flexShrink:0},children:q(e.size)}),u(`button`,{onClick:t,style:{background:`none`,border:`none`,cursor:`pointer`,padding:`0`,display:`flex`,color:`#999`,flexShrink:0},children:u(k,{size:14})})]})};function q(e){return e<1024?`${e}B`:e<1024*1024?`${(e/1024).toFixed(1)}KB`:`${(e/(1024*1024)).toFixed(1)}MB`}var J=({onSend:e,placeholder:t=`Type a message...`,primaryColor:r,isDark:i=!1,disabled:a,styleOverride:o,enableEmoji:l=!1,fileUpload:f,onFileUpload:p})=>{let[m,h]=c(``),[g,_]=c(!1),[v,y]=c([]),b=s(null),S=n(()=>{let t=m.trim();!t&&v.length===0||(e(t,v.length>0?v:void 0),h(``),y([]),b.current?.focus())},[m,v,e]),C=e=>{e.key===`Enter`&&!e.shiftKey&&(e.preventDefault(),S())},w=e=>{h(t=>t+e),b.current?.focus()},E=e=>{y(t=>[...t,...e]),p?.(e)},D=e=>{y(t=>t.filter((t,n)=>n!==e))},O=m.trim()||v.length>0;return d(`div`,{style:{position:`relative`,...o},children:[v.length>0&&u(K,{files:v,onRemove:D,primaryColor:r}),g&&u(W,{onSelect:w,onClose:()=>_(!1),primaryColor:r}),d(`div`,{style:{display:`flex`,gap:`8px`,alignItems:`flex-end`,background:i?`rgba(40, 40, 65, 0.5)`:`rgba(245, 247, 252, 0.7)`,borderRadius:`16px`,border:`1px solid ${i?`rgba(255,255,255,0.08)`:`rgba(0,0,0,0.05)`}`,backdropFilter:`blur(8px)`,WebkitBackdropFilter:`blur(8px)`,padding:`6px 6px 6px 12px`},children:[d(`div`,{style:{display:`flex`,alignItems:`center`,gap:`2px`,flexShrink:0,paddingBottom:`2px`},children:[l&&u(`button`,{type:`button`,onClick:()=>_(!g),"aria-label":`Emoji`,title:`Emoji`,style:{background:`none`,border:`none`,cursor:`pointer`,padding:`6px`,display:`flex`,color:g?r:i?`rgba(255,255,255,0.35)`:`rgba(0,0,0,0.3)`,borderRadius:`8px`,transition:`all 0.2s ease`},children:u(T,{size:20})}),f?.enabled&&u(G,{config:f,onFiles:E,selectedFiles:v,onRemoveFile:D,primaryColor:r})]}),u(`textarea`,{ref:b,value:m,onChange:e=>h(e.target.value),onKeyDown:C,placeholder:t,disabled:a,rows:1,style:{flex:1,padding:`8px 2px`,border:`none`,borderRadius:`12px`,outline:`none`,resize:`none`,fontFamily:`inherit`,fontSize:`14px`,lineHeight:`1.45`,maxHeight:`100px`,overflowY:`auto`,backgroundColor:`transparent`,color:i?`#E0E0E0`:`#2D3436`,letterSpacing:`0.01em`}}),u(`button`,{onClick:S,disabled:a||!O,"aria-label":`Send message`,style:{width:`36px`,height:`36px`,borderRadius:`12px`,background:O?`linear-gradient(135deg, ${r} 0%, ${ce(r,30)} 100%)`:i?`rgba(255,255,255,0.08)`:`rgba(0,0,0,0.06)`,color:O?`#fff`:i?`rgba(255,255,255,0.25)`:`rgba(0,0,0,0.2)`,border:`none`,cursor:O?`pointer`:`default`,display:`flex`,alignItems:`center`,justifyContent:`center`,flexShrink:0,transition:`all 0.25s cubic-bezier(0.4, 0, 0.2, 1)`,boxShadow:O?`0 4px 12px ${r}44`:`none`},children:u(x,{size:16})})]})]})};function ce(e,t){let n=parseInt(e.replace(`#`,``),16),r=Math.min(255,(n>>16&255)+t),i=Math.min(255,(n>>8&255)+t),a=Math.min(255,(n&255)+t);return`#${(r<<16|i<<8|a).toString(16).padStart(6,`0`)}`}var Y=({config:e,primaryColor:t})=>{if(e.showBranding===!1)return null;let n=e.poweredBy??`React ChatBot`;return d(`div`,{style:{padding:`8px 16px`,textAlign:`center`,fontSize:`11px`,color:`rgba(0,0,0,0.35)`,background:`rgba(250, 250, 255, 0.7)`,backdropFilter:`blur(8px)`,WebkitBackdropFilter:`blur(8px)`,borderTop:`1px solid rgba(0,0,0,0.04)`,flexShrink:0,letterSpacing:`0.02em`},children:[`Powered by`,` `,e.poweredByUrl?u(`a`,{href:e.poweredByUrl,target:`_blank`,rel:`noopener noreferrer`,style:{color:t,textDecoration:`none`,fontWeight:600,transition:`opacity 0.2s ease`},children:n}):u(`span`,{style:{color:t,fontWeight:600},children:n})]})},X=class{constructor(e){this.collectedData={},this.idCounter=0,this.uid=()=>`msg_${Date.now()}_${++this.idCounter}`,this.stepHistory=[],this.startStep=e.startStep,this.steps=new Map(e.steps.map(e=>[e.id,e]))}getStartStepId(){return this.startStep}getStep(e){return this.steps.get(e)}getData(){return{...this.collectedData}}setData(e,t){this.collectedData[e]=t}mergeData(e){Object.assign(this.collectedData,e)}pushHistory(e){this.stepHistory.push(e)}popHistory(){return this.stepHistory.pop(),this.stepHistory.pop()}canGoBack(){return this.stepHistory.length>1}reset(){this.collectedData={},this.stepHistory=[]}resolveNext(e,t){if(e.condition){let{field:t,operator:n,value:r,then:i,else:a}=e.condition,o=this.collectedData[t];return this.evaluate(o,n,r)?i:a}if(t&&e.quickReplies){let n=e.quickReplies.find(e=>e.value===t);if(n?.next)return n.next}return e.next}stepExpectsQuickReply(e){return!!(e.quickReplies&&e.quickReplies.length>0)}stepExpectsForm(e){return!!e.form}matchQuickReply(e,t){if(!e.quickReplies)return;let n=t.toLowerCase().trim();return e.quickReplies.find(e=>e.value.toLowerCase()===n)||e.quickReplies.find(e=>e.label.toLowerCase().replace(/[^\w\s]/g,``).trim()===n)||e.quickReplies.find(e=>n.includes(e.value.toLowerCase())||e.label.toLowerCase().includes(n))}buildMessages(e){let t=[],n=e.messages??(e.message?[e.message]:[]);for(let e of n)t.push({id:this.uid(),sender:`bot`,text:e,timestamp:Date.now()});return e.quickReplies&&t.length>0&&(t[t.length-1].quickReplies=e.quickReplies),e.form&&t.push({id:this.uid(),sender:`bot`,timestamp:Date.now(),form:e.form}),e.component&&t.push({id:this.uid(),sender:`bot`,timestamp:Date.now(),component:e.component}),t}evaluate(e,t,n){switch(t){case`eq`:return String(e)===String(n);case`neq`:return String(e)!==String(n);case`contains`:return String(e).includes(String(n));case`gt`:return Number(e)>Number(n);case`lt`:return Number(e)<Number(n);default:return!1}}},le=0,Z=()=>`msg_${Date.now()}_${++le}`,Q=e=>new Promise(t=>setTimeout(t,e)),ue={"/help":`Show available commands`,"/cancel":`Cancel current step and go back`,"/back":`Go back to the previous step`,"/restart":`Restart the conversation from the beginning`};function de(){let{state:e,dispatch:t,props:r}=h(),a=s(null),o=s(!1),c=s(e);c.current=e;let l=s(r);l.current=r,i(()=>{r.flow&&(a.current=new X(r.flow),o.current=!1)},[r.flow]);let u=n(async(e,n)=>{t({type:`SET_TYPING`,payload:!0}),await Q(400);let r={id:Z(),sender:`bot`,text:e,timestamp:Date.now(),...n};t({type:`SET_TYPING`,payload:!1}),t({type:`ADD_MESSAGE`,payload:r}),l.current.callbacks?.onMessageReceive?.(r)},[t]),d=n(e=>{t({type:`ADD_MESSAGE`,payload:{id:Z(),sender:`system`,text:e,timestamp:Date.now()}})},[t]),f=s(async()=>{});f.current=async e=>{let n=a.current;if(!n)return;let r=n.getStep(e);if(!r)return;n.pushHistory(e),t({type:`SET_STEP`,payload:e}),t({type:`SET_TYPING`,payload:!0}),await Q(r.delay??500);let i=n.buildMessages(r);if(t({type:`SET_TYPING`,payload:!1}),t({type:`ADD_MESSAGES`,payload:i}),i.forEach(e=>l.current.callbacks?.onMessageReceive?.(e)),r.asyncAction){let e=l.current.actionHandlers?.[r.asyncAction.handler];if(e){let i=Z();t({type:`ADD_MESSAGE`,payload:{id:i,sender:`bot`,text:r.asyncAction.loadingMessage??`Processing...`,timestamp:Date.now()}});let a={updateMessage:e=>{t({type:`UPDATE_MESSAGE`,payload:{id:i,updates:{text:e}}})}};try{let o=await e(n.getData(),a);o.data&&(n.mergeData(o.data),t({type:`SET_DATA`,payload:o.data})),t({type:`UPDATE_MESSAGE`,payload:{id:i,updates:{text:o.message??(o.status===`success`?r.asyncAction.successMessage??`Done!`:r.asyncAction.errorMessage??`Something went wrong.`)}}});let s=p(r,o);s&&(await Q(600),f.current(s))}catch{t({type:`UPDATE_MESSAGE`,payload:{id:i,updates:{text:r.asyncAction.errorMessage??`❌ Something went wrong.`}}}),r.asyncAction.onError&&(await Q(600),f.current(r.asyncAction.onError))}return}}r.component&&l.current.components?.[r.component]||!r.quickReplies&&!r.form&&r.next&&(await Q(300),f.current(r.next))};function p(e,t){return t.next?t.next:e.asyncAction?.routes?.[t.status]?e.asyncAction.routes[t.status]:t.status===`success`&&e.asyncAction?.onSuccess?e.asyncAction.onSuccess:t.status===`error`&&e.asyncAction?.onError?e.asyncAction.onError:e.next}let m=n(e=>f.current(e),[]),g=n(()=>{let e=a.current;if(!e||!e.canGoBack()){d(`There is no previous step to go back to.`);return}t({type:`CLEAR_QUICK_REPLIES`});let n=e.popHistory();n?m(n):d(`There is no previous step to go back to.`)},[t,m,d]),_=n(()=>{let e=a.current;e&&e.reset(),o.current=!1,t({type:`RESET_CHAT`}),e&&(o.current=!0,m(e.getStartStepId()))},[t,m]),v=s(()=>!1);v.current=e=>{let t=e.trim().toLowerCase();if(!t.startsWith(`/`))return!1;switch(t){case`/help`:return d(`Available commands:
2
+ ${Object.entries(ue).map(([e,t])=>`**${e}** ${t}`).join(`
3
+ `)}`),!0;case`/cancel`:case`/back`:return g(),!0;case`/restart`:return _(),!0;default:return d(`Unknown command: ${t}. Type /help for available commands.`),!0}};let y=n(e=>{let n=a.current,r=c.current.currentStepId;if(!n||!r)return;let i=n.getStep(r);if(!i)return;e?.data&&(n.mergeData(e.data),t({type:`SET_DATA`,payload:e.data})),e?.message&&t({type:`ADD_MESSAGE`,payload:{id:Z(),sender:`bot`,text:e.message,timestamp:Date.now()}});let o=e?.next??i.next;o?m(o):(l.current.callbacks?.onFlowEnd?.(n.getData()),t({type:`SET_STEP`,payload:null}))},[t,m]),b=n(e=>{if(v.current(e))return;let n={id:Z(),sender:`user`,text:e,timestamp:Date.now()};t({type:`ADD_MESSAGE`,payload:n}),l.current.callbacks?.onMessageSend?.(n),l.current.callbacks?.onSubmit?.({message:e});let r=c.current.currentStepId;if(a.current&&r){let n=a.current.getStep(r);if(n){if(n.asyncAction||n.component){u(`Please wait, I'm still processing. You can type /back to go back.`);return}if(a.current.stepExpectsQuickReply(n)){let r=a.current.matchQuickReply(n,e);if(r){t({type:`CLEAR_QUICK_REPLIES`}),a.current.setData(n.id,r.value);let e=a.current.resolveNext(n,r.value);e?m(e):(l.current.callbacks?.onFlowEnd?.(a.current.getData()),t({type:`SET_STEP`,payload:null}))}else u(`I didn't quite get that. Please choose one of the options below:`,{quickReplies:n.quickReplies})}else if(a.current.stepExpectsForm(n))u(`Please fill out the form above to continue.`);else{a.current.setData(n.id,e);let r=a.current.resolveNext(n,e);r?m(r):(u(`Thanks for your message! Our team will get back to you soon. 🙌`),l.current.callbacks?.onFlowEnd?.(a.current.getData()),t({type:`SET_STEP`,payload:null}))}}}},[t,u,m]),x=n(()=>{let e=a.current;!e||o.current||(o.current=!0,m(e.getStartStepId()))},[m]);return i(()=>{r.flow&&!e.showWelcome&&e.isLoggedIn&&!o.current&&x()},[r.flow,e.showWelcome,e.isLoggedIn,x]),{state:e,sendMessage:b,addBotMessage:u,handleQuickReply:n((e,n)=>{t({type:`CLEAR_QUICK_REPLIES`}),t({type:`ADD_MESSAGE`,payload:{id:Z(),sender:`user`,text:n,timestamp:Date.now()}}),l.current.callbacks?.onQuickReply?.(e,n);let r=c.current.currentStepId;if(a.current&&r){let n=a.current.getStep(r);if(n){a.current.setData(n.id,e);let r=a.current.resolveNext(n,e);r?m(r):(l.current.callbacks?.onFlowEnd?.(a.current.getData()),t({type:`SET_STEP`,payload:null}))}}},[t,m]),handleFormSubmit:n(async(e,n)=>{t({type:`SET_DATA`,payload:n}),a.current&&a.current.mergeData(n);let r=Object.entries(n).filter(([,e])=>e!==void 0&&e!==``).map(([e,t])=>`${e}: ${String(t)}`).join(`
4
+ `);t({type:`ADD_MESSAGE`,payload:{id:Z(),sender:`user`,text:r,formData:n,timestamp:Date.now()}}),await l.current.callbacks?.onFormSubmit?.(e,n);let i=c.current.currentStepId;if(a.current&&i){let e=a.current.getStep(i);if(e){let n=a.current.resolveNext(e);n?m(n):(l.current.callbacks?.onFlowEnd?.(a.current.getData()),t({type:`SET_STEP`,payload:null}))}}},[t,m]),handleLogin:n(async e=>{await l.current.callbacks?.onLogin?.(e),t({type:`SET_LOGGED_IN`,payload:!0})},[t]),toggleChat:n(()=>{let e=!c.current.isOpen;t({type:`TOGGLE_OPEN`}),e?l.current.callbacks?.onOpen?.():l.current.callbacks?.onClose?.()},[t]),dismissWelcome:n(()=>{t({type:`DISMISS_WELCOME`})},[t]),startFlow:x,processFlowStep:m,goBack:g,restartSession:_,handleComponentComplete:y}}var fe=({styles:e,position:t,zIndex:r,hidden:i})=>{let{props:o,dispatch:s}=h(),c=v(o.theme),f=c.mode===`dark`,{state:p,sendMessage:m,handleQuickReply:g,handleFormSubmit:_,handleLogin:y,toggleChat:b,dismissWelcome:x,restartSession:S,handleComponentComplete:C}=de(),w=t===`bottom-left`?{bottom:`96px`,left:`24px`}:{bottom:`96px`,right:`24px`},T=n((e,t)=>{if(t&&t.length>0){let n=t.map(e=>({name:e.name,url:URL.createObjectURL(e),type:e.type,size:e.size}));e?(s({type:`ADD_MESSAGE`,payload:{id:Z(),sender:`user`,text:e,timestamp:Date.now(),attachments:n}}),m(e)):s({type:`ADD_MESSAGE`,payload:{id:Z(),sender:`user`,timestamp:Date.now(),attachments:n}}),o.callbacks?.onFileUpload?.(t)}else e&&m(e)},[m,s,o.callbacks]),E=a(()=>({currentStepId:p.currentStepId,isOpen:p.isOpen,messages:p.messages,collectedData:p.collectedData,toggleChat:b,restartSession:S,sendMessage:m}),[p.currentStepId,p.isOpen,p.messages,p.collectedData,b,S,m]),D=u(ee,{config:o.header??{title:`Chat with us`},styles:e,onClose:b,onRestart:S,logo:o.branding?.logo,logoWidth:o.branding?.logoWidth}),O=u(J,{onSend:T,placeholder:o.inputPlaceholder,primaryColor:c.primaryColor,isDark:f,enableEmoji:o.enableEmoji,fileUpload:o.fileUpload,onFileUpload:o.callbacks?.onFileUpload});return i?u(`div`,{style:{display:`none`}}):d(`div`,{style:{...e.window,...w,...r==null?{}:{zIndex:r}},children:[o.renderHeader?o.renderHeader(E,D):D,p.showWelcome&&o.welcomeScreen?u(te,{content:o.welcomeScreen,onDismiss:x,primaryColor:c.primaryColor}):!p.isLoggedIn&&o.loginForm?u(R,{config:o.loginForm,onLogin:y,primaryColor:c.primaryColor,renderFormField:o.renderFormField}):d(l,{children:[u(H,{messages:p.messages,isTyping:p.isTyping,styles:e,primaryColor:c.primaryColor,onQuickReply:g,onFormSubmit:_,components:o.components,onComponentComplete:C,collectedData:p.collectedData,currentStepId:p.currentStepId,renderFormField:o.renderFormField}),u(`div`,{style:e.inputArea,children:o.renderInput?o.renderInput(E,O):O}),o.branding&&u(Y,{config:o.branding,primaryColor:c.primaryColor})]})]})},pe=class{constructor(){this.plugins=[],this.context=null,this.eventHandlers=new Map}register(e){this.plugins=[...e]}setContext(e){this.context={...e,on:(e,t)=>this.on(e,t),emit:(e,...t)=>this.emit(e,...t)}}on(e,t){this.eventHandlers.has(e)||this.eventHandlers.set(e,new Set),this.eventHandlers.get(e).add(t)}emit(e,...t){let n=this.eventHandlers.get(e);n&&n.forEach(e=>e(...t))}async init(){if(this.context)for(let e of this.plugins)try{await e.onInit?.(this.context)}catch{}}async onMessage(e){if(!this.context)return e;let t=e;for(let e of this.plugins)try{let n=await e.onMessage?.(t,this.context);n&&typeof n==`object`&&`id`in n&&(t=n)}catch{}return this.dispatchEvent({type:`message`,payload:t,timestamp:Date.now()}),t}async onSubmit(e){if(this.context){for(let t of this.plugins)try{await t.onSubmit?.(e,this.context)}catch{}this.dispatchEvent({type:`submit`,payload:e,timestamp:Date.now()})}}async destroy(){if(this.context){for(let e of this.plugins)try{await e.onDestroy?.(this.context)}catch{}this.eventHandlers.clear(),this.plugins=[]}}dispatchEvent(e){if(this.context)for(let t of this.plugins)try{t.onEvent?.(e,this.context)}catch{}}},me=`
2467
5
  @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
2468
6
 
2469
7
  @keyframes cb-window-enter {
@@ -2504,222 +42,5 @@ var je = ({ styles: e, position: t, zIndex: r, hidden: n }) => {
2504
42
  .cb-scrollbar::-webkit-scrollbar-thumb:hover {
2505
43
  background: rgba(108, 92, 231, 0.35);
2506
44
  }
2507
- `, L = !1;
2508
- function Ge() {
2509
- if (L || typeof document > "u") return;
2510
- if (document.querySelector("style[data-chatbot-styles]")) {
2511
- L = !0;
2512
- return;
2513
- }
2514
- const e = document.createElement("style");
2515
- e.setAttribute("data-chatbot-styles", ""), e.textContent = Pe, document.head.appendChild(e), L = !0;
2516
- }
2517
- var Ne = (e) => {
2518
- const [t, r] = Q(J, e, V), n = O(e.theme), o = te(n, e.style), s = ee(n), i = e.position ?? "bottom-right", c = e.showLauncher !== !1, u = C(null), f = C(t);
2519
- f.current = t, A(() => {
2520
- Ge();
2521
- }, []), A(() => {
2522
- if (e.plugins && e.plugins.length > 0) {
2523
- const p = new Oe();
2524
- return p.register(e.plugins), p.setContext({
2525
- sendMessage: (g) => {
2526
- r({
2527
- type: "ADD_MESSAGE",
2528
- payload: {
2529
- id: F(),
2530
- sender: "user",
2531
- text: g,
2532
- timestamp: Date.now()
2533
- }
2534
- });
2535
- },
2536
- addBotMessage: (g) => {
2537
- r({
2538
- type: "ADD_MESSAGE",
2539
- payload: {
2540
- id: F(),
2541
- sender: "bot",
2542
- text: g,
2543
- timestamp: Date.now()
2544
- }
2545
- });
2546
- },
2547
- getMessages: () => f.current.messages,
2548
- getData: () => f.current.collectedData,
2549
- setData: (g, h) => r({
2550
- type: "SET_DATA",
2551
- payload: { [g]: h }
2552
- })
2553
- }), p.init(), u.current = p, () => {
2554
- p.destroy();
2555
- };
2556
- }
2557
- }, [e.plugins]);
2558
- const w = v(() => {
2559
- const p = !t.isOpen;
2560
- r({ type: "TOGGLE_OPEN" }), p ? e.callbacks?.onOpen?.() : e.callbacks?.onClose?.();
2561
- }, [t.isOpen, e.callbacks]);
2562
- return /* @__PURE__ */ a($.Provider, {
2563
- value: {
2564
- state: t,
2565
- dispatch: r,
2566
- props: e
2567
- },
2568
- children: /* @__PURE__ */ x("div", {
2569
- style: {
2570
- ...o.root,
2571
- ...s
2572
- },
2573
- className: e.className,
2574
- children: [/* @__PURE__ */ a(je, {
2575
- styles: o,
2576
- position: i,
2577
- zIndex: e.zIndex,
2578
- hidden: !t.isOpen
2579
- }), c && /* @__PURE__ */ a(de, {
2580
- onClick: w,
2581
- isOpen: t.isOpen,
2582
- position: i,
2583
- styles: o,
2584
- icon: e.launcherIcon,
2585
- closeIcon: e.closeIcon,
2586
- zIndex: e.zIndex
2587
- })]
2588
- })
2589
- });
2590
- };
2591
- function Ye(e) {
2592
- let t = 0, r = 0;
2593
- return {
2594
- name: "analytics",
2595
- onInit(n) {
2596
- t = 0, r = 0, e?.onTrack?.("chatbot:init");
2597
- },
2598
- onMessage(n, o) {
2599
- t++, e?.onTrack?.("chatbot:message", {
2600
- sender: n.sender,
2601
- messageCount: t
2602
- });
2603
- },
2604
- onSubmit(n, o) {
2605
- r++, e?.onTrack?.("chatbot:submit", {
2606
- formSubmissions: r,
2607
- fields: Object.keys(n)
2608
- });
2609
- },
2610
- onDestroy() {
2611
- e?.onTrack?.("chatbot:destroy", {
2612
- totalMessages: t,
2613
- totalFormSubmissions: r
2614
- });
2615
- }
2616
- };
2617
- }
2618
- function Ue(e) {
2619
- const t = e.events ?? ["message", "submit"], r = async (n, o) => {
2620
- try {
2621
- await fetch(e.url, {
2622
- method: "POST",
2623
- headers: {
2624
- "Content-Type": "application/json",
2625
- ...e.headers
2626
- },
2627
- body: JSON.stringify({
2628
- type: n,
2629
- payload: o,
2630
- timestamp: Date.now()
2631
- })
2632
- });
2633
- } catch (s) {
2634
- console.error(`[webhook] Failed to send ${n}:`, s);
2635
- }
2636
- };
2637
- return {
2638
- name: "webhook",
2639
- async onInit() {
2640
- t.includes("init") && await r("init", {});
2641
- },
2642
- async onMessage(n) {
2643
- t.includes("message") && await r("message", n);
2644
- },
2645
- async onSubmit(n) {
2646
- t.includes("submit") && await r("submit", n);
2647
- },
2648
- async onDestroy() {
2649
- t.includes("destroy") && await r("destroy", {});
2650
- }
2651
- };
2652
- }
2653
- function Qe(e) {
2654
- const t = e?.storageKey ?? "chatbot_history", r = e?.storage === "session" ? sessionStorage : localStorage;
2655
- return {
2656
- name: "persistence",
2657
- onInit(n) {
2658
- try {
2659
- const o = r.getItem(t);
2660
- if (o) {
2661
- const s = JSON.parse(o);
2662
- Array.isArray(s) && s.forEach((i) => {
2663
- i.sender === "bot" && n.addBotMessage(i.text);
2664
- });
2665
- }
2666
- } catch {
2667
- }
2668
- },
2669
- onMessage(n, o) {
2670
- try {
2671
- const s = o.getMessages();
2672
- r.setItem(t, JSON.stringify(s.slice(-50)));
2673
- } catch {
2674
- }
2675
- },
2676
- onDestroy() {
2677
- }
2678
- };
2679
- }
2680
- export {
2681
- ie as AttachmentIcon,
2682
- Le as Branding,
2683
- Ne as ChatBot,
2684
- ne as ChatBubbleIcon,
2685
- $ as ChatContext,
2686
- pe as ChatHeader,
2687
- Me as ChatInput,
2688
- je as ChatWindow,
2689
- me as CheckboxField,
2690
- P as CloseIcon,
2691
- H as DynamicForm,
2692
- oe as EmojiIcon,
2693
- Te as EmojiPicker,
2694
- G as FileIcon,
2695
- Re as FilePreviewList,
2696
- Ie as FileUploadButton,
2697
- ye as FileUploadField,
2698
- ze as FlowEngine,
2699
- se as ImageIcon,
2700
- de as Launcher,
2701
- ke as LoginScreen,
2702
- we as MessageBubble,
2703
- Fe as MessageList,
2704
- ae as MinimizeIcon,
2705
- Oe as PluginManager,
2706
- Ce as QuickReplies,
2707
- he as RadioField,
2708
- le as RemoveIcon,
2709
- ce as RestartIcon,
2710
- xe as SelectField,
2711
- re as SendIcon,
2712
- be as TextField,
2713
- De as TypingIndicator,
2714
- ue as WelcomeScreen,
2715
- Ye as analyticsPlugin,
2716
- ee as buildCSSVariables,
2717
- te as buildStyles,
2718
- Qe as persistencePlugin,
2719
- O as resolveTheme,
2720
- $e as useChat,
2721
- j as useChatContext,
2722
- Ue as webhookPlugin
2723
- };
2724
-
45
+ `,$=!1;function he(){if($||typeof document>`u`)return;if(document.querySelector(`style[data-chatbot-styles]`)){$=!0;return}let e=document.createElement(`style`);e.setAttribute(`data-chatbot-styles`,``),e.textContent=me,document.head.appendChild(e),$=!0}var ge=e=>{let[t,r]=o(f,e,p),a=v(e.theme),c=b(a,e.style),l=y(a),h=e.position??`bottom-right`,g=e.showLauncher!==!1,_=s(null),x=s(t);x.current=t,i(()=>{he()},[]),i(()=>{if(e.plugins&&e.plugins.length>0){let t=new pe;return t.register(e.plugins),t.setContext({sendMessage:e=>{r({type:`ADD_MESSAGE`,payload:{id:Z(),sender:`user`,text:e,timestamp:Date.now()}})},addBotMessage:e=>{r({type:`ADD_MESSAGE`,payload:{id:Z(),sender:`bot`,text:e,timestamp:Date.now()}})},getMessages:()=>x.current.messages,getData:()=>x.current.collectedData,setData:(e,t)=>r({type:`SET_DATA`,payload:{[e]:t}})}),t.init(),_.current=t,()=>{t.destroy()}}},[e.plugins]);let S=n(()=>{let n=!t.isOpen;r({type:`TOGGLE_OPEN`}),n?e.callbacks?.onOpen?.():e.callbacks?.onClose?.()},[t.isOpen,e.callbacks]);return u(m.Provider,{value:{state:t,dispatch:r,props:e},children:d(`div`,{style:{...c.root,...l},className:e.className,children:[u(fe,{styles:c,position:h,zIndex:e.zIndex,hidden:!t.isOpen}),g&&u(j,{onClick:S,isOpen:t.isOpen,position:h,styles:c,icon:e.launcherIcon,closeIcon:e.closeIcon,zIndex:e.zIndex})]})})};function _e(e){let t=0,n=0;return{name:`analytics`,onInit(r){t=0,n=0,e?.onTrack?.(`chatbot:init`)},onMessage(n,r){t++,e?.onTrack?.(`chatbot:message`,{sender:n.sender,messageCount:t})},onSubmit(t,r){n++,e?.onTrack?.(`chatbot:submit`,{formSubmissions:n,fields:Object.keys(t)})},onDestroy(){e?.onTrack?.(`chatbot:destroy`,{totalMessages:t,totalFormSubmissions:n})}}}function ve(e){let t=e.events??[`message`,`submit`],n=async(t,n)=>{try{await fetch(e.url,{method:`POST`,headers:{"Content-Type":`application/json`,...e.headers},body:JSON.stringify({type:t,payload:n,timestamp:Date.now()})})}catch{}};return{name:`webhook`,async onInit(){t.includes(`init`)&&await n(`init`,{})},async onMessage(e){t.includes(`message`)&&await n(`message`,e)},async onSubmit(e){t.includes(`submit`)&&await n(`submit`,e)},async onDestroy(){t.includes(`destroy`)&&await n(`destroy`,{})}}}function ye(e){let t=e?.storageKey??`chatbot_history`,n=e?.storage===`session`?sessionStorage:localStorage;return{name:`persistence`,onInit(e){try{let r=n.getItem(t);if(r){let t=JSON.parse(r);Array.isArray(t)&&t.forEach(t=>{t.sender===`bot`&&e.addBotMessage(t.text)})}}catch{}},onMessage(e,r){try{let e=r.getMessages();n.setItem(t,JSON.stringify(e.slice(-50)))}catch{}},onDestroy(){}}}export{E as AttachmentIcon,Y as Branding,ge as ChatBot,S as ChatBubbleIcon,m as ChatContext,ee as ChatHeader,J as ChatInput,fe as ChatWindow,F as CheckboxField,C as CloseIcon,L as DynamicForm,T as EmojiIcon,W as EmojiPicker,D as FileIcon,K as FilePreviewList,G as FileUploadButton,I as FileUploadField,X as FlowEngine,O as ImageIcon,j as Launcher,R as LoginScreen,z as MessageBubble,H as MessageList,w as MinimizeIcon,pe as PluginManager,B as QuickReplies,P as RadioField,k as RemoveIcon,A as RestartIcon,N as SelectField,x as SendIcon,M as TextField,V as TypingIndicator,te as WelcomeScreen,_e as analyticsPlugin,y as buildCSSVariables,b as buildStyles,ye as persistencePlugin,v as resolveTheme,de as useChat,h as useChatContext,ve as webhookPlugin};
2725
46
  //# sourceMappingURL=index.mjs.map