@sendbird/ai-agent-messenger-react 1.1.2 → 1.2.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.
@@ -1,3704 +0,0 @@
1
- import * as r from "react";
2
- import { createContext as ye, useContext as J, useEffect as R, useState as T, useId as mn, useRef as D, useCallback as P, useLayoutEffect as ge, lazy as C, Suspense as $e, useMemo as Ie, Component as gr, Fragment as Rt, useReducer as pr, forwardRef as hr, Children as fr } from "react";
3
- import br, { SendbirdProduct as xr, DeviceOsPlatform as Nt, SendbirdPlatform as Er, ConnectionHandler as ut, SendbirdError as vr, SessionHandler as yr, LogLevel as gn, ConnectionState as Cr } from "@sendbird/chat";
4
- import c, { css as k, ThemeProvider as Tr, useTheme as mt, createGlobalStyle as _r, StyleSheetManager as Sr, keyframes as pn } from "styled-components";
5
- import { format as hn, isSameMinute as Dt, isSameDay as wr } from "date-fns";
6
- import { enUS as kr } from "date-fns/locale/en-US";
7
- import { AIAgentModule as Ar, ConversationStatus as z, ConversationListOrder as Ir, ConversationType as $r } from "@sendbird/chat/aiAgent";
8
- import { useGroupChannelMessages as Mr, useGroupChannelHandler as fn, useForceUpdate as Or } from "@sendbird/uikit-tools";
9
- import { GroupChannelModule as Lr } from "@sendbird/chat/groupChannel";
10
- import { MessageMetaArray as Rr, SendingStatus as Nr } from "@sendbird/chat/message";
11
- import { isSameDay as Dr } from "date-fns/isSameDay";
12
- import { renderer as Br, parser as Pr, MessageProvider as Fr } from "@sendbird/react-uikit-message-template-view";
13
- import { createMessageTemplate as Hr } from "@sendbird/uikit-message-template";
14
- import bn from "dompurify";
15
- import { createPortal as Ur } from "react-dom";
16
- import zr from "@emotion/is-prop-valid";
17
- const W = (e, t) => {
18
- const n = ye(null), o = ({ children: a, value: l }) => /* @__PURE__ */ r.createElement(n.Provider, { value: l }, typeof a == "function" ? a(l) : a), i = ({ children: a }) => /* @__PURE__ */ r.createElement(n.Consumer, null, (l) => l ? typeof a == "function" ? a(l) : a : null), s = () => {
19
- const a = J(n);
20
- if (!a)
21
- throw new Error(`use${e}Context must be used within a ${e}Provider`);
22
- return a;
23
- };
24
- return n.displayName = `${e}Context`, o.displayName = `${e}Provider`, i.displayName = `${e}Consumer`, s.displayName = `use${e}Context`, { Context: n, Provider: o, Consumer: i, useContext: s };
25
- };
26
- function Ce(e) {
27
- const t = ye({
28
- Template: e.template,
29
- updateTemplate: () => {
30
- },
31
- components: e.components,
32
- updateComponent: () => {
33
- }
34
- });
35
- function n({ children: s }) {
36
- const [a, l] = T(() => e.template), [d, g] = T(e.components), m = {
37
- Template: a,
38
- updateTemplate: (p) => l(() => p),
39
- components: d,
40
- updateComponent: (p, h) => g((b) => ({ ...b, [p]: h }))
41
- };
42
- return /* @__PURE__ */ r.createElement(t.Provider, { value: m }, s);
43
- }
44
- function o({ template: s, children: a }) {
45
- const { updateTemplate: l } = J(t);
46
- return R(() => {
47
- s && l(s);
48
- }, [s]), /* @__PURE__ */ r.createElement(r.Fragment, null, a);
49
- }
50
- function i({ children: s }) {
51
- return /* @__PURE__ */ r.createElement(n, null, s);
52
- }
53
- return i.defaults = e, i.useContext = () => J(t), i.Context = t, i.Template = o, Object.keys(e.components).forEach((s) => {
54
- i[s] = function({
55
- component: l
56
- }) {
57
- const { updateComponent: d } = J(t);
58
- return R(() => {
59
- l && d(s, l);
60
- }, [l]), null;
61
- };
62
- }), i;
63
- }
64
- function Wr(...e) {
65
- return function({ children: n }) {
66
- return e.reduce((o, i) => /* @__PURE__ */ r.createElement(i, null, o), n);
67
- };
68
- }
69
- function ot() {
70
- }
71
- function Vr() {
72
- const e = /iPad|iPhone|iPod/.test(navigator.userAgent), t = /Android/.test(navigator.userAgent);
73
- return e || t;
74
- }
75
- class xn {
76
- constructor(t) {
77
- this.logger = t, this.subscribers = {};
78
- }
79
- async send(t) {
80
- const n = Gr(), o = this.subscribers[t.type];
81
- if (o) {
82
- this.logger.debug(`messenger.dispatcher: dispatching command: ${t.type}`, t.payload);
83
- const i = o.map((s) => s(t.payload));
84
- await Promise.all(i).catch((s) => {
85
- this.logger.error(`messenger.dispatcher: error in callback for command: ${t.type}`, s);
86
- });
87
- }
88
- return n.resolve(), n.promise;
89
- }
90
- subscribe(t, n) {
91
- this.subscribers[t] || (this.subscribers[t] = []), this.subscribers[t].push(n);
92
- }
93
- unsubscribe(t, n) {
94
- this.subscribers[t] && (this.subscribers[t] = this.subscribers[t].filter((o) => o !== n));
95
- }
96
- }
97
- const Gr = () => {
98
- let e = ot, t = ot;
99
- return { promise: new Promise((o, i) => {
100
- e = o, t = i;
101
- }), resolve: e, reject: t };
102
- }, jr = "1.1.2", ke = "sb-agent", Kr = jr;
103
- var En = /* @__PURE__ */ ((e) => (e[e.VERBOSE = 0] = "VERBOSE", e[e.DEBUG = 1] = "DEBUG", e[e.INFO = 2] = "INFO", e[e.WARN = 3] = "WARN", e[e.ERROR = 4] = "ERROR", e[e.NONE = 5] = "NONE", e))(En || {});
104
- class vn {
105
- constructor(t) {
106
- this.level = t;
107
- }
108
- verbose(...t) {
109
- this.level <= 0 && console.log(`[${ke}/verbose]`, ...t);
110
- }
111
- debug(...t) {
112
- this.level <= 1 && console.log(`[${ke}/debug]`, ...t);
113
- }
114
- info(...t) {
115
- this.level <= 2 && console.log(`[${ke}/info]`, ...t);
116
- }
117
- warn(...t) {
118
- this.level <= 3 && console.warn(`[${ke}/warn]`, ...t);
119
- }
120
- error(...t) {
121
- this.level <= 4 && console.error(`[${ke}/error]`, ...t);
122
- }
123
- }
124
- function Bt(e, t, n) {
125
- const o = br.init({
126
- appId: e,
127
- modules: [new Lr(), new Ar()],
128
- localCacheEnabled: !0,
129
- ...n
130
- });
131
- return o.addSendbirdExtensions(
132
- [{ version: Kr, product: xr.AI_AGENT, platform: t.platform }],
133
- { platform: t.deviceOSPlatform, version: t.deviceOSVersion },
134
- t.customData
135
- ) || console.warn("Invalid Sendbird Extensions", t), o;
136
- }
137
- const {
138
- Provider: Zr,
139
- useContext: Ze
140
- } = W("AIAgent");
141
- function Yr({
142
- appId: e,
143
- aiAgentId: t,
144
- language: n,
145
- countryCode: o,
146
- context: i,
147
- chatSDK: s,
148
- chatParams: a,
149
- dispatcher: l,
150
- logger: d,
151
- children: g,
152
- extensions: m = {
153
- platform: Er.JS,
154
- deviceOSPlatform: Vr() ? Nt.MOBILE_WEB : Nt.WEB
155
- }
156
- }) {
157
- const [p, h] = T(() => {
158
- const b = d ?? new vn(En.WARN), x = l ?? new xn(b);
159
- return {
160
- appId: e,
161
- aiAgentId: t,
162
- language: n,
163
- countryCode: o,
164
- context: i,
165
- chatSDK: s ?? Bt(e, m, a),
166
- logger: b,
167
- dispatcher: x
168
- };
169
- });
170
- return (n !== p.language || o !== p.countryCode) && h((b) => ({ ...b, language: n, countryCode: o, context: i })), s && s !== p.chatSDK ? h((b) => ({ ...b, aiAgentId: t, chatSDK: s })) : !s && p.chatSDK.appId !== e && h((b) => ({
171
- ...b,
172
- aiAgentId: t,
173
- chatSDK: Bt(e, m, { newInstance: !0, ...a })
174
- })), R(() => () => {
175
- p.chatSDK.disconnectWebSocket();
176
- }, [p.chatSDK]), /* @__PURE__ */ r.createElement(Zr, { value: p }, g);
177
- }
178
- const qr = (e, t, n) => Mr(e, t, { ...n, strictStreamingOrder: !0 });
179
- var it = /* @__PURE__ */ ((e) => (e.ConversationClose = "conv.close", e))(it || {});
180
- class Jr {
181
- constructor(t = {}) {
182
- this.payload = t;
183
- }
184
- toJSON() {
185
- return JSON.stringify({ type: this.type, payload: this.payload });
186
- }
187
- }
188
- class Xr extends Jr {
189
- constructor() {
190
- super(...arguments), this.type = "conv.close";
191
- }
192
- }
193
- const Qr = {
194
- CloseConversation: () => new Xr()
195
- }, {
196
- Provider: eo
197
- } = W("AIAgentConversation");
198
- function to({
199
- children: e,
200
- channelUrl: t,
201
- onChannelDeleted: n,
202
- onMessagesUpdated: o,
203
- onConversationClosedViaDispatcher: i,
204
- onBeforeSendMessage: s,
205
- onAfterSendMessage: a = ot
206
- }) {
207
- var E;
208
- const { chatSDK: l, logger: d, dispatcher: g } = Ze(), { channel: m, channelFetchError: p, fetchChannel: h } = no(t), b = qr(l, m, {
209
- shouldCountNewMessages: () => !1,
210
- onChannelDeleted: n,
211
- onMessagesReceived: o,
212
- onMessagesUpdated: o,
213
- logger: d
214
- });
215
- R(() => {
216
- const f = async () => {
217
- d.debug("conversation.dispatcher: try to close conversation", m), m != null && m.conversation && m.conversation.status === z.OPEN && (await m.closeConversation(), i == null || i());
218
- };
219
- return g.subscribe(it.ConversationClose, f), () => {
220
- g.unsubscribe(it.ConversationClose, f);
221
- };
222
- }, [g, (E = m == null ? void 0 : m.conversation) == null ? void 0 : E.status, i]);
223
- const x = {
224
- conversation: (m == null ? void 0 : m.conversation) ?? void 0,
225
- channelSource: {
226
- channel: m,
227
- error: p,
228
- refetch: () => h()
229
- },
230
- messageSource: {
231
- messages: b.messages,
232
- initialized: b.initialized,
233
- loadPrevious: () => b.loadPrevious(),
234
- loadNext: () => b.loadNext(),
235
- sendUserMessage: async (f) => {
236
- s && (f = await s(f));
237
- const y = await b.sendUserMessage(f, a);
238
- return a == null || a(y), y;
239
- },
240
- sendFileMessage: async (f) => {
241
- s && (f = await s(f));
242
- const y = await b.sendFileMessage(f, a);
243
- return a == null || a(y), y;
244
- }
245
- }
246
- };
247
- return /* @__PURE__ */ r.createElement(eo, { value: x }, e);
248
- }
249
- function no(e) {
250
- const { chatSDK: t, logger: n } = Ze(), [o, i] = T(void 0), [s, a] = T(void 0);
251
- async function l() {
252
- if (n.debug("conversation.fetchChannel: start"), i(void 0), a(void 0), e)
253
- try {
254
- n.debug("conversation.fetchChannel: get channel", e);
255
- const d = await t.groupChannel.getChannel(e);
256
- i(d);
257
- const g = new ut({ onReconnectSucceeded: () => d.refresh() });
258
- t.addConnectionHandler("sba-refresh", g), n.debug("conversation.fetchChannel: fetched channel", d);
259
- } catch (d) {
260
- d instanceof vr && a(d), n.error("conversation.fetchChannel: error", d);
261
- }
262
- }
263
- return R(() => {
264
- l();
265
- }, [e, t]), {
266
- channel: o,
267
- channelFetchError: s,
268
- fetchChannel: l
269
- };
270
- }
271
- const ro = (e, t) => {
272
- const n = mn(), [o, i] = T(!1), [s, a] = T(null), [l, d] = T([]), [g, m] = T(null), p = D(!1), h = P(async () => {
273
- if (!p.current && e.currentUser) {
274
- p.current = !0, i(!1), a(null), d([]);
275
- try {
276
- const x = e.aiAgent.createConversationListQuery(t), E = await x.next();
277
- d(E), m(x), a(null);
278
- } catch (x) {
279
- m(null), a(x);
280
- } finally {
281
- i(!0), p.current = !1;
282
- }
283
- }
284
- }, [e, t.aiAgentId, t.status, t.limit, t.order, t.reverse]), b = P(async () => {
285
- g && g.next().then((x) => {
286
- d((E) => [...E, ...x]);
287
- }).catch(() => {
288
- });
289
- }, [g]);
290
- return R(() => (e.addConnectionHandler(n, new ut({ onConnected: () => h() })), () => e.removeConnectionHandler(n)), [e, n, h]), R(() => {
291
- h();
292
- }, [h]), {
293
- initialized: o,
294
- error: s,
295
- conversations: l,
296
- loadMore: b
297
- };
298
- }, {
299
- Provider: oo
300
- } = W("AIAgentConversationList");
301
- function io({ children: e }) {
302
- const { chatSDK: t, aiAgentId: n } = Ze(), o = ro(t, {
303
- aiAgentId: n,
304
- status: z.CLOSED,
305
- order: Ir.UPDATED_AT,
306
- reverse: !0
307
- }), i = {
308
- listSource: {
309
- initialized: o.initialized,
310
- error: o.error ?? void 0,
311
- conversations: o.conversations,
312
- loadMore: () => o.loadMore()
313
- }
314
- };
315
- return /* @__PURE__ */ r.createElement(oo, { value: i }, e);
316
- }
317
- const st = {
318
- DEFAULT_BOT_MSG_BG: "#eeeeee",
319
- WHITE: "#ffffff",
320
- BLACK: "#000000"
321
- };
322
- function yn(e) {
323
- return e.length === 4 ? `#${[...e.slice(1)].map((t) => t + t).join("")}` : e;
324
- }
325
- function so(e) {
326
- const t = yn(e);
327
- return [
328
- parseInt(t.slice(1, 3), 16),
329
- // r
330
- parseInt(t.slice(3, 5), 16),
331
- // g
332
- parseInt(t.slice(5, 7), 16)
333
- // b
334
- ];
335
- }
336
- function ao(e) {
337
- return `#${e.map((t) => t.toString(16).padStart(2, "0")).join("")}`;
338
- }
339
- function lo(e, t, n) {
340
- e /= 255, t /= 255, n /= 255;
341
- const o = Math.max(e, t, n), i = Math.min(e, t, n), s = o - i;
342
- let a = 0, l = 0;
343
- const d = (o + i) / 2;
344
- return o !== i && (l = d > 0.5 ? s / (2 - o - i) : s / (o + i)), o === e ? a = (t - n) / s + (t < n ? 6 : 0) : o === t ? a = (n - e) / s + 2 : o === n && (a = (e - t) / s + 4), a /= 6, [a, l, d];
345
- }
346
- function co(e, t, n) {
347
- let o, i, s;
348
- if (t === 0)
349
- o = i = s = n;
350
- else {
351
- const a = function(m, p, h) {
352
- return h < 0 && (h += 1), h > 1 && (h -= 1), h < 0.16666666666666666 ? m + (p - m) * 6 * h : h < 0.5 ? p : h < 0.6666666666666666 ? m + (p - m) * (0.6666666666666666 - h) * 6 : m;
353
- }, l = n < 0.5 ? n * (1 + t) : n + t - n * t, d = 2 * n - l;
354
- o = a(d, l, e + 1 / 3), i = a(d, l, e), s = a(d, l, e - 1 / 3);
355
- }
356
- return [Math.round(o * 255), Math.round(i * 255), Math.round(s * 255)];
357
- }
358
- function De(e, t, n) {
359
- const [o, i, s] = so(e), [a, l, d] = lo(o, i, s), g = Math.max(0, Math.min(1, d * t)), m = Math.max(0, Math.min(1, l * n)), [p, h, b] = co(a, m, g);
360
- return ao([Math.round(p), Math.round(h), Math.round(b)]);
361
- }
362
- function uo(e, t = "light") {
363
- return {
364
- extraDark: De(e, 0.6, 1.2),
365
- dark: De(e, 0.85, 1.1),
366
- main: e,
367
- light: De(e, t === "dark" ? 1.1 : 1.5, t === "dark" ? 0.95 : 0.9),
368
- extraLight: De(e, t === "dark" ? 1.2 : 1.75, t === "dark" ? 0.9 : 0.8)
369
- };
370
- }
371
- function at(e) {
372
- const t = yn(e), n = 149, o = +`0x${t[1]}${t[2]}`, i = +`0x${t[3]}${t[4]}`, s = +`0x${t[5]}${t[6]}`;
373
- return o * 0.299 + i * 0.587 + s * 0.114 > n ? st.BLACK : st.WHITE;
374
- }
375
- function mo(e, t, n, o, i) {
376
- return {
377
- base: {
378
- primary: t,
379
- primaryContrastContent: n,
380
- background: e.background50,
381
- headerBackground: e.background50,
382
- modalContentBackground: e.background50
383
- },
384
- metadata: {
385
- errorContent: e.ondark.textHighEmphasis,
386
- placeholderText: e.onlight.textLowEmphasis
387
- },
388
- messageInput: {
389
- background: e.background100
390
- },
391
- messageIncoming: {
392
- text: i,
393
- background: o
394
- },
395
- messageOutgoing: {
396
- text: n,
397
- background: t
398
- },
399
- csat: {
400
- background: e.background100
401
- }
402
- };
403
- }
404
- const go = (e, t, n, o, i) => ({
405
- base: {
406
- primary: t,
407
- primaryContrastContent: n,
408
- background: e.background600,
409
- headerBackground: e.background500,
410
- modalContentBackground: e.background500
411
- },
412
- metadata: {
413
- errorContent: e.ondark.textHighEmphasis,
414
- placeholderText: e.ondark.textLowEmphasis
415
- },
416
- messageInput: {
417
- background: e.background400
418
- },
419
- messageIncoming: {
420
- text: i,
421
- background: o
422
- },
423
- messageOutgoing: {
424
- text: n,
425
- background: t
426
- },
427
- csat: {
428
- background: e.background400
429
- }
430
- }), Be = {
431
- primary: {
432
- extraDark: "#491389",
433
- dark: "#6211c8",
434
- main: "#742ddd",
435
- light: "#c2a9fa",
436
- extraLight: "#dbd1ff"
437
- },
438
- secondary: {
439
- extraDark: "#066858",
440
- dark: "#027d69",
441
- main: "#259c72",
442
- light: "#69c085",
443
- extraLight: "#a8e2ab"
444
- },
445
- error: {
446
- extraDark: "#9d091e",
447
- dark: "#bf0711",
448
- main: "#de360b",
449
- light: "#f66161",
450
- extraLight: "#fdaaaa"
451
- },
452
- information: {
453
- extraDark: "#241389",
454
- dark: "#362ca9",
455
- main: "#4a48cd",
456
- light: "#a9bbfa",
457
- extraLight: "#d1dbff"
458
- },
459
- background700: "#000000",
460
- background600: "#161616",
461
- background500: "#2c2c2c",
462
- background400: "#393939",
463
- background300: "#bdbdbd",
464
- background200: "#e0e0e0",
465
- background100: "#eeeeee",
466
- background50: "#ffffff",
467
- onlight: {
468
- textHighEmphasis: "rgba(0, 0, 0, 0.88)",
469
- textMidEmphasis: "rgba(0, 0, 0, 0.5)",
470
- textLowEmphasis: "rgba(0, 0, 0, 0.38)",
471
- textDisabled: "rgba(0, 0, 0, 0.12)"
472
- },
473
- ondark: {
474
- textHighEmphasis: "rgba(255, 255, 255, 0.88)",
475
- textMidEmphasis: "rgba(255, 255, 255, 0.5)",
476
- textLowEmphasis: "rgba(255, 255, 255, 0.38)",
477
- textDisabled: "rgba(255, 255, 255, 0.12)"
478
- },
479
- overlay: {
480
- dark: "rgba(0, 0, 0, 0.55)",
481
- light: "rgba(22, 22, 22, 0.32)"
482
- }
483
- }, Qe = {
484
- h1: { fontSize: 18, fontWeight: 700 },
485
- h2: { fontSize: 16, fontWeight: 700 },
486
- subtitle1: { fontSize: 16, fontWeight: 500 },
487
- subtitle2: { fontSize: 16, fontWeight: 400 },
488
- body1: { fontSize: 16, fontWeight: 400 },
489
- body2: { fontSize: 14, fontWeight: 500 },
490
- body3: { fontSize: 14, fontWeight: 400 },
491
- button: { fontSize: 14, fontWeight: 700 },
492
- caption1: { fontSize: 12, fontWeight: 700 },
493
- caption2: { fontSize: 12, fontWeight: 400 },
494
- caption3: { fontSize: 11, fontWeight: 700 },
495
- caption4: { fontSize: 11, fontWeight: 400 }
496
- };
497
- function Pt(e) {
498
- const t = po(e), { colors: n, aiAgentColorVariables: o } = ho(e, t), i = bo(e);
499
- return {
500
- selectedTheme: e.selectedTheme,
501
- palette: t,
502
- colors: n,
503
- aiAgentColorVariables: o,
504
- typography: i
505
- };
506
- }
507
- function po({ selectedTheme: e, palette: t, primary: n }) {
508
- const o = t != null && t.primary ? t.primary : n ? n === Be.primary.main ? Be.primary : uo(n, e) : Be.primary;
509
- return {
510
- ...Be,
511
- primary: o,
512
- ...t
513
- };
514
- }
515
- function ho({ selectedTheme: e, primaryContrast: t, botMessageBackground: n, botMessageBackgroundContrast: o }, i) {
516
- const s = i.primary.main, a = t ?? at(s), l = n ?? st.DEFAULT_BOT_MSG_BG, d = o ?? at(l);
517
- return {
518
- colors: (e === "light" ? mo : go)(
519
- i,
520
- s,
521
- a,
522
- l,
523
- d
524
- ),
525
- aiAgentColorVariables: {
526
- primary_color: s,
527
- bot_message_bg_color: l,
528
- primary_contrast_color: a,
529
- bot_message_bg_contrast_color: d
530
- }
531
- };
532
- }
533
- function fo(e, t, n) {
534
- const o = { ...e };
535
- return n.forEach((i) => {
536
- const s = t[i];
537
- s != null && (o[i] = s);
538
- }), o;
539
- }
540
- function bo({ typography: e }) {
541
- if (!e)
542
- return Qe;
543
- const t = { ...Qe };
544
- return Object.keys(e).forEach((n) => {
545
- const o = e[n];
546
- if (o && typeof o == "object") {
547
- const i = Qe[n], s = ["fontSize", "fontWeight", "fontFamily", "lineHeight"];
548
- t[n] = fo(i, o, s);
549
- }
550
- }), t;
551
- }
552
- const {
553
- Provider: xo,
554
- useContext: Cn
555
- } = W("AIAgentTheme");
556
- function Eo({ logger: e, palette: t, typography: n, appearance: o, children: i }) {
557
- const [s, a] = T(
558
- () => Pt({
559
- selectedTheme: (o == null ? void 0 : o.theme) ?? "light",
560
- palette: t,
561
- typography: n,
562
- primary: o == null ? void 0 : o.primaryColor,
563
- botMessageBackground: o == null ? void 0 : o.botMessageBackgroundColor
564
- })
565
- ), l = P(
566
- (d, g) => {
567
- const m = (o == null ? void 0 : o.theme) ?? d, p = g == null ? void 0 : g(m), h = {
568
- primary: o == null ? void 0 : o.primaryColor,
569
- primaryContrast: void 0,
570
- botMessageBackground: o == null ? void 0 : o.botMessageBackgroundColor,
571
- botMessageBackgroundContrast: void 0
572
- };
573
- !h.primary && (p != null && p.primaryColor) && (h.primary = p.primaryColor, h.primaryContrast = p.primaryContrastColor), !h.botMessageBackground && (p != null && p.botMessageBackgroundColor) && (h.botMessageBackground = p.botMessageBackgroundColor, h.botMessageBackgroundContrast = p.botMessageBackgroundContrastColor);
574
- const b = Pt({ selectedTheme: m, palette: t, typography: n, ...h });
575
- a(b), e == null || e.info("theme.update:", m);
576
- },
577
- [o == null ? void 0 : o.theme, o == null ? void 0 : o.primaryColor, o == null ? void 0 : o.botMessageBackgroundColor, t, n, e]
578
- );
579
- return R(() => {
580
- (o != null && o.theme || o != null && o.primaryColor || o != null && o.botMessageBackgroundColor) && l(s.selectedTheme);
581
- }, [o == null ? void 0 : o.theme, o == null ? void 0 : o.primaryColor, o == null ? void 0 : o.botMessageBackgroundColor]), /* @__PURE__ */ r.createElement(xo, { value: { theme: s, updateTheme: l } }, i);
582
- }
583
- const Tn = (e) => {
584
- try {
585
- const t = JSON.parse(e);
586
- return typeof t == "string" ? JSON.stringify(t).slice(1, -1) : e.trim();
587
- } catch {
588
- return JSON.stringify(e).slice(1, -1);
589
- }
590
- }, Me = (e) => JSON.parse(e), Ye = (e) => JSON.parse(e);
591
- function vo(e, t) {
592
- const [n, o] = t.split(",").map((i) => i.trim());
593
- return e === "dark" && o || n;
594
- }
595
- function yo(e) {
596
- const t = {};
597
- function n(o, i = "") {
598
- for (const [s, a] of Object.entries(o)) {
599
- const l = i ? `${i}.${s}` : s;
600
- a && typeof a == "object" && !Array.isArray(a) ? n(a, l) : t[l] = a;
601
- }
602
- }
603
- return n(e), t;
604
- }
605
- function gt({
606
- template: e,
607
- variables: t,
608
- variableKeyPattern: n,
609
- variableValueTransformer: o
610
- }) {
611
- return Object.entries(t).reduce((i, [s, a]) => {
612
- if (!o && !["number", "boolean", "string"].includes(typeof a))
613
- throw new Error("If transformer is not provided, value must be a {string, number, or boolean}");
614
- const l = o ? o(a) : String(a), d = n(s);
615
- return i.replace(d, Tn(l));
616
- }, e);
617
- }
618
- async function Co({
619
- template: e,
620
- variables: t,
621
- variableKeyPattern: n,
622
- variableValueTransformer: o
623
- }) {
624
- return (await Promise.all(
625
- Object.entries(t).map(async ([s, a]) => {
626
- const l = await o(a);
627
- return { regex: n(s), transformedValue: l };
628
- })
629
- )).reduce((s, { regex: a, transformedValue: l }) => s.replace(a, Tn(l)), e);
630
- }
631
- const To = (e) => ({
632
- setTemplate: (t, n) => e.onSetTemplate(t, n),
633
- getTemplate: (t) => e.onGetTemplate(t),
634
- setCachedToken: (t) => e.onSetCachedToken(t),
635
- getCachedToken: () => e.onGetCachedToken(),
636
- clear: () => e.onClear()
637
- }), {
638
- Provider: _o,
639
- useContext: _n
640
- } = W("MessageCacheTemplate");
641
- function So({ logger: e, storage: t, children: n }) {
642
- const o = P(
643
- (a) => {
644
- var g, m;
645
- const l = (m = (g = a.appInfo) == null ? void 0 : g.aiAgentInfo) == null ? void 0 : m.templateListToken;
646
- if (!l) return !1;
647
- const d = t.getCachedToken();
648
- return d ? l !== d : !0;
649
- },
650
- [t]
651
- ), i = P(
652
- async (a) => {
653
- try {
654
- const { templates: l, token: d } = await a.aiAgent.getMessageTemplates({ limit: 20 });
655
- for (const { template: g } of l) {
656
- const { key: m } = Me(g);
657
- t.setTemplate(m, g);
658
- }
659
- t.setCachedToken(d);
660
- } catch (l) {
661
- e == null || e.error("messageTemplateContext.syncCachedTemplates: error:", l);
662
- }
663
- },
664
- [t, e]
665
- ), s = P(() => {
666
- t.clear();
667
- }, [t]);
668
- return /* @__PURE__ */ r.createElement(_o, { value: { shouldSyncCachedTemplate: o, syncCachedTemplates: i, clearCachedTemplates: s, storage: t } }, n);
669
- }
670
- function wo(e) {
671
- let t = "pending", n = e.then((o) => {
672
- t = "resolved", n = o;
673
- }).catch((o) => {
674
- t = "rejected", n = o;
675
- });
676
- return {
677
- get value() {
678
- if (t === "resolved")
679
- return n;
680
- throw n;
681
- }
682
- };
683
- }
684
- const {
685
- Provider: ko,
686
- useContext: Sn
687
- } = W("MessageTemplateFetching");
688
- function Ao({ children: e, internalVariables: t }) {
689
- const n = D({}), o = D({}), [i, s] = T({}), a = P((g, m) => {
690
- s((p) => ({
691
- ...p,
692
- [g]: { fetching: !1, error: !1, ...p[g], ...m }
693
- }));
694
- }, []), l = P(
695
- async ({
696
- onRequestTemplate: g,
697
- onGetCachedTemplate: m,
698
- templateKey: p,
699
- suspense: h = !1
700
- }) => {
701
- const b = m(p);
702
- if (b) return b;
703
- const x = o.current[p];
704
- if (x) return x;
705
- h || a(p, { fetching: !0 });
706
- const E = g(p).catch((f) => {
707
- throw h || a(p, { error: !0 }), f;
708
- }).finally(() => {
709
- h || a(p, { fetching: !1 }), delete o.current[p];
710
- });
711
- return o.current[p] = E, E;
712
- },
713
- [a]
714
- ), d = {
715
- internalVariables: t,
716
- fetchTemplate: l,
717
- suspend: (g, m) => {
718
- if (n.current[g])
719
- return n.current[g];
720
- const p = wo(m());
721
- return n.current[g] = p, p;
722
- },
723
- getIsFetching: (g) => {
724
- var m;
725
- return ((m = i[g]) == null ? void 0 : m.fetching) ?? !1;
726
- },
727
- getHasError: (g) => {
728
- var m;
729
- return ((m = i[g]) == null ? void 0 : m.error) ?? !1;
730
- }
731
- };
732
- return /* @__PURE__ */ r.createElement(ko, { value: d }, e);
733
- }
734
- const qe = {
735
- VARIABLE: (e) => new RegExp(`\\{${e}\\}`, "g"),
736
- VIEW_VARIABLE: (e) => new RegExp(`"{@${e}}"`, "g")
737
- };
738
- function oe({ uiTemplateString: e, variables: t = {} }) {
739
- const n = yo(t);
740
- return gt({
741
- template: e,
742
- variables: n,
743
- variableKeyPattern: (o) => qe.VARIABLE(o)
744
- });
745
- }
746
- function ie({
747
- theme: e,
748
- uiTemplateString: t,
749
- colorVariables: n = {}
750
- }) {
751
- return gt({
752
- template: t,
753
- variables: n,
754
- variableKeyPattern: (o) => qe.VARIABLE(o),
755
- variableValueTransformer: (o) => vo(e, o)
756
- });
757
- }
758
- function Io({
759
- theme: e,
760
- uiTemplateString: t,
761
- viewVariables: n = {},
762
- aiAgentColorVariables: o,
763
- internalVariables: i,
764
- onRequestTemplate: s
765
- }) {
766
- const l = Object.values(n).flat().map((g) => g.key);
767
- return [...new Set(l)].some((g) => !s(g)) ? null : gt({
768
- template: t,
769
- variables: n,
770
- variableKeyPattern: (g) => qe.VIEW_VARIABLE(g),
771
- variableValueTransformer: (g) => {
772
- const m = g.map(({ key: p, variables: h }) => {
773
- const b = s(p), { ui_template: x, color_variables: E } = Me(b);
774
- let f = JSON.stringify(x);
775
- return f = oe({
776
- uiTemplateString: f,
777
- variables: i
778
- }), f = ie({
779
- theme: e,
780
- uiTemplateString: f,
781
- colorVariables: E
782
- }), f = ie({
783
- theme: e,
784
- uiTemplateString: f,
785
- colorVariables: o
786
- }), f = oe({
787
- uiTemplateString: f,
788
- variables: h
789
- }), Ye(f);
790
- });
791
- return JSON.stringify(m);
792
- }
793
- });
794
- }
795
- async function $o({
796
- theme: e,
797
- uiTemplateString: t,
798
- viewVariables: n = {},
799
- aiAgentColorVariables: o,
800
- internalVariables: i,
801
- onRequestTemplate: s
802
- }) {
803
- return Co({
804
- template: t,
805
- variables: n,
806
- variableKeyPattern: (a) => qe.VIEW_VARIABLE(a),
807
- variableValueTransformer: async (a) => {
808
- const l = a.map(async ({ key: g, variables: m }) => {
809
- const p = await s(g), { ui_template: h, color_variables: b } = Me(p);
810
- let x = JSON.stringify(h);
811
- return x = oe({
812
- uiTemplateString: x,
813
- variables: i
814
- }), x = ie({
815
- theme: e,
816
- uiTemplateString: x,
817
- colorVariables: b
818
- }), x = ie({
819
- theme: e,
820
- uiTemplateString: x,
821
- colorVariables: o
822
- }), x = oe({
823
- uiTemplateString: x,
824
- variables: m
825
- }), Ye(x);
826
- }), d = await Promise.all(l);
827
- return JSON.stringify(d);
828
- }
829
- });
830
- }
831
- const Mo = ({
832
- rawTemplate: e,
833
- aiAgentColorVariables: t,
834
- internalVariables: n,
835
- ...o
836
- }) => {
837
- const { ui_template: i, color_variables: s } = Me(e);
838
- let a = JSON.stringify(i);
839
- if (Object.keys(o.viewVariables ?? {}).length > 0) {
840
- const d = Io({
841
- ...o,
842
- uiTemplateString: a,
843
- aiAgentColorVariables: t,
844
- internalVariables: n
845
- });
846
- if (d === null) return null;
847
- a = d;
848
- }
849
- return a = oe({ ...o, uiTemplateString: a, variables: n }), a = ie({ ...o, uiTemplateString: a, colorVariables: s }), a = ie({ ...o, uiTemplateString: a, colorVariables: t }), a = oe({ ...o, uiTemplateString: a }), Ye(a);
850
- }, Oo = async ({
851
- rawTemplate: e,
852
- aiAgentColorVariables: t,
853
- internalVariables: n,
854
- ...o
855
- }) => {
856
- const { ui_template: i, color_variables: s } = Me(e);
857
- let a = JSON.stringify(i);
858
- return Object.keys(o.viewVariables ?? {}).length > 0 && (a = await $o({
859
- ...o,
860
- uiTemplateString: a,
861
- aiAgentColorVariables: t,
862
- internalVariables: n
863
- })), a = oe({ ...o, uiTemplateString: a, variables: n }), a = ie({ ...o, uiTemplateString: a, colorVariables: s }), a = ie({ ...o, uiTemplateString: a, colorVariables: t }), a = oe({ ...o, uiTemplateString: a }), Ye(a);
864
- }, Lo = (e) => {
865
- const { aiAgentColorVariables: t = {} } = e, { internalVariables: n } = Sn();
866
- return T(() => {
867
- const o = e.onGetCachedTemplate(e.templateKey);
868
- return o ? Mo({
869
- ...e,
870
- rawTemplate: o,
871
- aiAgentColorVariables: t,
872
- internalVariables: n,
873
- onRequestTemplate: e.onGetCachedTemplate
874
- }) : null;
875
- });
876
- }, Ro = (e) => {
877
- const [t] = Lo(e);
878
- if (t) return t;
879
- const { aiAgentColorVariables: n = {} } = e, { internalVariables: o, fetchTemplate: i, suspend: s } = Sn();
880
- return s(e.templateKey, async () => {
881
- const l = await i({ ...e, suspense: !0 });
882
- return await Oo({
883
- ...e,
884
- rawTemplate: l,
885
- aiAgentColorVariables: n,
886
- internalVariables: o
887
- });
888
- }).value;
889
- }, No = '@import"https://fonts.googleapis.com/css?family=Roboto:400,500,600,700&display=swap";.sb-message-template__border{position:relative}.sb-message-template__border:after{content:"";position:absolute;top:0;bottom:0;left:0;right:0;z-index:1;box-shadow:inset 0 0 0 var(--border-width) var(--border-color);border-radius:var(--border-radius);pointer-events:none}.sb-message-template__action{cursor:pointer}.sb-message-template__parent{font-family:Roboto,serif}.sb-message-template__text{font-family:inherit;font-size:14px;font-weight:400;font-stretch:normal;font-style:normal;letter-spacing:normal;text-align:left}.sb-message-template__text-button{font-family:inherit;background-color:#e0e0e0;text-align:center;padding:10px;border-radius:6px;font-size:14px;font-weight:600;font-stretch:normal;font-style:normal;letter-spacing:normal}.sendbird-theme--light .sb-message-template__text-button{color:#742ddd}.sendbird-theme--dark .sb-message-template__text-button{color:#c2a9fa}.sb-message-template__text-button:hover{opacity:1;box-shadow:#0000001a 0 1px 3px,#0000000f 0 1px 2px}.sb-message-template__text-button,.sb-message-template__image-button{cursor:pointer;border-style:none}.sb-message-template__parent{border-radius:unset;background-color:transparent;overflow:hidden}.sb-message-template__parent *{box-sizing:border-box;line-height:1.3}.sb-message-template__carousel{display:flex;width:100%;box-sizing:border-box;touch-action:pan-y}', Oe = "en", Do = /* @__PURE__ */ new Set([
890
- Oe,
891
- "ko",
892
- "es",
893
- "pt",
894
- "fr",
895
- "hi",
896
- "it",
897
- "de",
898
- "tr",
899
- "ja"
900
- ]), Bo = (e, t, n) => {
901
- const o = e[t];
902
- return o ? typeof o == "function" ? o() : Promise.resolve(o) : new Promise((i, s) => {
903
- (typeof queueMicrotask == "function" ? queueMicrotask : setTimeout)(
904
- s.bind(
905
- null,
906
- new Error(
907
- "Unknown variable dynamic import: " + t + (t.split("/").length !== n ? ". Note that variables only represent file names one level deep." : "")
908
- )
909
- )
910
- );
911
- });
912
- }, Po = kr, Fo = {
913
- // Channel - Common
914
- CHANNEL_FROZEN: "Channel frozen",
915
- PLACE_HOLDER__WRONG: "Something went wrong",
916
- PLACE_HOLDER__NO_MESSAGES: "No messages",
917
- UNKNOWN__UNKNOWN_MESSAGE_TYPE: "(Unknown message type)",
918
- // Channel - Header
919
- HEADER_BUTTON__AGENT_HANDOFF: "Connect with an agent",
920
- // Message Input
921
- MESSAGE_INPUT__PLACE_HOLDER: "Ask a question",
922
- MESSAGE_INPUT__PLACE_HOLDER__WAIT_AI_AGENT_RESPONSE: "Waiting for the agent’s reply…",
923
- MESSAGE_INPUT__PLACE_HOLDER__DISABLED: "Chat is unavailable in this channel",
924
- // Common UI
925
- BUTTON__CANCEL: "Cancel",
926
- BUTTON__SAVE: "Save",
927
- BUTTON__OK: "OK",
928
- NO_NAME: "(No name)",
929
- RETRY: "Retry",
930
- // Date format
931
- DATE_FORMAT__MESSAGE_LIST__DATE_SEPARATOR: "MMMM dd, yyyy",
932
- DATE_FORMAT__MESSAGE_TIMESTAMP: "p",
933
- // File Upload
934
- FILE_UPLOAD_NOTIFICATION__COUNT_LIMIT: "You can't upload more than one image",
935
- FILE_UPLOAD_NOTIFICATION__SIZE_LIMIT: "The maximum size per file is %d MB.",
936
- // File Viewer
937
- FILE_VIEWER__UNSUPPORT: "Unsupported message",
938
- // CSAT
939
- CSAT_TITLE_UNSUBMITTED: "Your feedback matters to us",
940
- CSAT_TITLE_SUBMITTED: "Successfully submitted!",
941
- CSAT_CRE_TITLE: "Was your issue resolved?",
942
- CSAT_CRE_SOLVED: "Yes, thank you! 👍",
943
- CSAT_CRE_NOT_SOLVED: "No, that didn’t help.",
944
- CSAT_REASON_PLACEHOLDER: "Share your feedback",
945
- CSAT_RATING_TITLE: "How would you rate your experience?",
946
- CSAT5_RATING_SCORE_1: "Terrible",
947
- CSAT5_RATING_SCORE_2: "Bad",
948
- CSAT5_RATING_SCORE_3: "Okay",
949
- CSAT5_RATING_SCORE_4: "Good",
950
- CSAT5_RATING_SCORE_5: "Great",
951
- CSAT_SUBMIT_LABEL: "Submit",
952
- CSAT_SUBMISSION_EXPIRED: "We’re sorry, the survey period has ended.",
953
- POWERED_BY: "Powered by",
954
- // Conversation list
955
- CONVERSATION_CLOSED_FOOTER_LABEL: "Your conversation has ended",
956
- START_NEW_CONVERSATION: "💬 Start a new conversation",
957
- RETURN_TO_CONVERSATION: "💬 Return to conversation",
958
- CONVERSATION_LIST__HEADER_TITLE: "Conversation history",
959
- CONVERSATION_LIST__TOPICS_FALLBACK: "No category",
960
- CONVERSATION_LIST__NO_CONVERSATIONS: "No conversations yet",
961
- DATE_FORMAT__CONVERSATION_LIST__LIST_ITEM_TITLE: "MM/dd/yyyy",
962
- DATE_FORMAT__CONVERSATION_LIST__LIST_ITEM_TITLE_CAPTION: "h:mma"
963
- }, pt = { language: "en", dateLocale: Po, stringSet: Fo }, Ho = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
964
- __proto__: null,
965
- default: pt
966
- }, Symbol.toStringTag, { value: "Module" })), We = /* @__PURE__ */ new Map([[Oe, pt]]);
967
- async function Uo(e) {
968
- if (We.has(e))
969
- return We.get(e);
970
- const t = Do.has(e) ? e : Oe;
971
- try {
972
- const { default: n } = await Bo(/* @__PURE__ */ Object.assign({ "./languages/de.ts": () => import("./DvjrAXLD.js"), "./languages/en.ts": () => Promise.resolve().then(() => Ho), "./languages/es.ts": () => import("./zI14HLvP.js"), "./languages/fr.ts": () => import("./B9V0T5ZP.js"), "./languages/hi.ts": () => import("./YRQ0vk5Q.js"), "./languages/it.ts": () => import("./BQWJPfGp.js"), "./languages/ja.ts": () => import("./sl-YrKkN.js"), "./languages/ko.ts": () => import("./B8c_rqvH.js"), "./languages/pt.ts": () => import("./BSz49qaD.js"), "./languages/tr.ts": () => import("./D_eZyIAR.js") }), `./languages/${t}.ts`, 3);
973
- return We.set(e, n), n;
974
- } catch {
975
- return pt;
976
- }
977
- }
978
- const {
979
- Provider: zo,
980
- useContext: M
981
- } = W("Localization");
982
- function Wo(e) {
983
- var t;
984
- return ((t = e.split("-")) == null ? void 0 : t[0]) ?? Oe;
985
- }
986
- function Vo({
987
- language: e = navigator.language,
988
- logger: t,
989
- stringSet: n,
990
- children: o
991
- }) {
992
- const [i, s] = T(We.get(Oe));
993
- return R(() => {
994
- const a = Wo(e);
995
- i.language !== a && (t == null || t.debug("localization.useEffect: update language", `${i.language} -> ${a}`), Uo(a).then(s));
996
- }, [e]), /* @__PURE__ */ r.createElement(
997
- zo,
998
- {
999
- value: {
1000
- language: i.language,
1001
- stringSet: { ...i.stringSet, ...n },
1002
- dateLocale: i.dateLocale,
1003
- format: (a, l, d) => hn(a, l, { locale: i.dateLocale, ...d })
1004
- }
1005
- },
1006
- o
1007
- );
1008
- }
1009
- const Ve = "data-sb-agent-theme", Ft = (e) => (t, ...n) => {
1010
- let o = "";
1011
- return t.forEach((i, s) => {
1012
- o += i + (n[s] ?? "");
1013
- }), `[${Ve}='${e}'] & { ${o} }`;
1014
- }, B = {
1015
- light: Ft("light"),
1016
- dark: Ft("dark")
1017
- }, Go = k(({ theme: e }) => {
1018
- const { palette: t } = e;
1019
- return `
1020
- :root,
1021
- :host {
1022
- --sendbird-primary-extra-dark: ${t.primary.extraDark};
1023
- --sendbird-primary-dark: ${t.primary.dark};
1024
- --sendbird-primary-main: ${t.primary.main};
1025
- --sendbird-primary-light: ${t.primary.light};
1026
- --sendbird-primary-extra-light: ${t.primary.extraLight};
1027
-
1028
- --sendbird-secondary-extra-dark: ${t.secondary.extraDark};
1029
- --sendbird-secondary-dark: ${t.secondary.dark};
1030
- --sendbird-secondary-main: ${t.secondary.main};
1031
- --sendbird-secondary-light: ${t.secondary.light};
1032
- --sendbird-secondary-extra-light: ${t.secondary.extraLight};
1033
-
1034
- --sendbird-information-extra-dark: ${t.information.extraDark};
1035
- --sendbird-information-dark: ${t.information.dark};
1036
- --sendbird-information-main: ${t.information.main};
1037
- --sendbird-information-light: ${t.information.light};
1038
- --sendbird-information-extra-light: ${t.information.extraLight};
1039
-
1040
- --sendbird-error-extra-dark: ${t.error.extraDark};
1041
- --sendbird-error-dark: ${t.error.dark};
1042
- --sendbird-error-main: ${t.error.main};
1043
- --sendbird-error-light: ${t.error.light};
1044
- --sendbird-error-extra-light: ${t.error.extraLight};
1045
-
1046
- --sendbird-background-700: ${t.background700};
1047
- --sendbird-background-600: ${t.background600};
1048
- --sendbird-background-500: ${t.background500};
1049
- --sendbird-background-400: ${t.background400};
1050
- --sendbird-background-300: ${t.background300};
1051
- --sendbird-background-200: ${t.background200};
1052
- --sendbird-background-100: ${t.background100};
1053
- --sendbird-background-50: ${t.background50};
1054
-
1055
- --sendbird-onlight-text-high-emphasis: ${t.onlight.textHighEmphasis};
1056
- --sendbird-onlight-text-mid-emphasis: ${t.onlight.textMidEmphasis};
1057
- --sendbird-onlight-text-low-emphasis: ${t.onlight.textLowEmphasis};
1058
- --sendbird-onlight-text-disabled: ${t.onlight.textDisabled};
1059
-
1060
- --sendbird-ondark-text-high-emphasis: ${t.ondark.textHighEmphasis};
1061
- --sendbird-ondark-text-mid-emphasis: ${t.ondark.textMidEmphasis};
1062
- --sendbird-ondark-text-low-emphasis: ${t.ondark.textLowEmphasis};
1063
- --sendbird-ondark-text-disabled: ${t.ondark.textDisabled};
1064
-
1065
- --sendbird-overlay-dark: ${t.overlay.dark};
1066
- --sendbird-overlay-light: ${t.overlay.light};
1067
- }
1068
- `;
1069
- }), jo = k`[${Ve}='light'] &{--sb-text-high-emphasis:var(--sendbird-onlight-text-high-emphasis);--sb-text-mid-emphasis:var(--sendbird-onlight-text-mid-emphasis);--sb-text-low-emphasis:var(--sendbird-onlight-text-low-emphasis);--sb-text-disabled:var(--sendbird-onlight-text-disabled);--sb-text-high-emphasis-inverse:var(--sendbird-ondark-text-high-emphasis);--sb-text-mid-emphasis-inverse:var(--sendbird-ondark-text-mid-emphasis);--sb-text-low-emphasis-inverse:var(--sendbird-ondark-text-low-emphasis);--sb-text-disabled-inverse:var(--sendbird-ondark-text-disabled);--sb-bg-50-600:var(--sendbird-background-50);--sb-bg-100-500:var(--sendbird-background-100);--sb-bg-200-400:var(--sendbird-background-200);--sb-primary:var(--sendbird-primary-main);--sb-secondary:var(--sendbird-secondary-main);--sb-error:var(--sendbird-error-main);--sb-information:var(--sendbird-information-light);}[${Ve}='dark'] &{--sb-text-high-emphasis:var(--sendbird-ondark-text-high-emphasis);--sb-text-mid-emphasis:var(--sendbird-ondark-text-mid-emphasis);--sb-text-low-emphasis:var(--sendbird-ondark-text-low-emphasis);--sb-text-disabled:var(--sendbird-ondark-text-disabled);--sb-text-high-emphasis-inverse:var(--sendbird-onlight-text-high-emphasis);--sb-text-mid-emphasis-inverse:var(--sendbird-onlight-text-mid-emphasis);--sb-text-low-emphasis-inverse:var(--sendbird-onlight-text-low-emphasis);--sb-text-disabled-inverse:var(--sendbird-onlight-text-disabled);--sb-bg-50-600:var(--sendbird-background-600);--sb-bg-100-500:var(--sendbird-background-500);--sb-bg-200-400:var(--sendbird-background-400);--sb-primary:var(--sendbird-primary-light);--sb-secondary:var(--sendbird-secondary-light);--sb-error:var(--sendbird-error-light);--sb-information:var(--sendbird-information-light);}`, u = {
1070
- color: {
1071
- primary: {
1072
- dark: "var(--sendbird-primary-dark)",
1073
- main: "var(--sendbird-primary-main)"
1074
- },
1075
- error: {
1076
- extraDark: "var(--sendbird-error-extra-dark)",
1077
- dark: "var(--sendbird-error-dark)"
1078
- },
1079
- information: {
1080
- main: "var(--sendbird-information-main)",
1081
- light: "var(--sendbird-information-light)"
1082
- },
1083
- background700: "var(--sendbird-background-700)",
1084
- background500: "var(--sendbird-background-500)",
1085
- background400: "var(--sendbird-background-400)",
1086
- background200: "var(--sendbird-background-200)",
1087
- background100: "var(--sendbird-background-100)",
1088
- background50: "var(--sendbird-background-50)",
1089
- ondark: {
1090
- textMidEmphasis: "var(--sendbird-ondark-text-mid-emphasis)",
1091
- textLowEmphasis: "var(--sendbird-ondark-text-low-emphasis)",
1092
- textDisabled: "var(--sendbird-ondark-text-disabled)"
1093
- },
1094
- overlay: {
1095
- dark: "var(--sendbird-overlay-dark)"
1096
- }
1097
- },
1098
- themedColor: {
1099
- textHighEmphasis: "var(--sb-text-high-emphasis)",
1100
- textMidEmphasis: "var(--sb-text-mid-emphasis)",
1101
- textLowEmphasis: "var(--sb-text-low-emphasis)",
1102
- textDisabled: "var(--sb-text-disabled)",
1103
- textHighEmphasisInverse: "var(--sb-text-high-emphasis-inverse)",
1104
- bg_50_600: "var(--sb-bg-50-600)",
1105
- bg_100_500: "var(--sb-bg-100-500)",
1106
- bg_200_400: "var(--sb-bg-200-400)",
1107
- error: "var(--sb-error)"
1108
- }
1109
- }, {
1110
- Provider: Ko,
1111
- useContext: Zo
1112
- } = W("AIAgentTheme");
1113
- function Yo(e) {
1114
- const { theme: t, appearance: n, logger: o } = e;
1115
- return /* @__PURE__ */ r.createElement(
1116
- Eo,
1117
- {
1118
- appearance: n,
1119
- palette: t == null ? void 0 : t.palette,
1120
- typography: t == null ? void 0 : t.typography,
1121
- logger: o
1122
- },
1123
- /* @__PURE__ */ r.createElement(qo, { ...e })
1124
- );
1125
- }
1126
- function qo({ rootElement: e = document.body, children: t }) {
1127
- const { theme: n, updateTheme: o } = Cn();
1128
- return ge(() => {
1129
- e.setAttribute(Ve, n.selectedTheme);
1130
- }, [e, n.selectedTheme]), /* @__PURE__ */ r.createElement(Tr, { theme: n }, /* @__PURE__ */ r.createElement(Ko, { value: { theme: n, updateTheme: o } }, t));
1131
- }
1132
- function pe(e, t) {
1133
- const n = e.getRootNode({ composed: t });
1134
- return n instanceof ShadowRoot || n instanceof Document ? n : document;
1135
- }
1136
- const Jo = (e, t) => {
1137
- R(() => {
1138
- const n = pe(t) instanceof ShadowRoot, o = pe(t, !0);
1139
- if (!(n ? t : o).querySelector(`link[href*='${e}']`)) {
1140
- const s = o.createElement("link");
1141
- s.rel = "stylesheet", s.href = e, (n ? t : o.head).appendChild(s);
1142
- }
1143
- }, [e, t]);
1144
- }, Xo = (e, t = document.body) => {
1145
- R(() => {
1146
- const n = pe(t), i = n instanceof ShadowRoot ? t : n.head;
1147
- if (!i) return;
1148
- const s = `sba-${btoa(e).slice(0, 10)}`;
1149
- let a = i.querySelector(`style#${s}`);
1150
- a ? a.textContent !== e && (a.textContent = e) : (a = i.ownerDocument.createElement("style"), a.id = s, a.textContent = e, i.appendChild(a));
1151
- }, [e, t]);
1152
- }, ht = /iPad|iPhone|iPod/.test(navigator.userAgent), Qo = /Android/.test(navigator.userAgent), Le = (e) => ht || Qo, Y = "sb-agent", X = {
1153
- ENTRY: `${Y}-entry`,
1154
- MODAL_ROOT: `${Y}-modal-root`,
1155
- WINDOW: `${Y}-window`,
1156
- LAUNCHER: `${Y}-launcher`
1157
- }, Pe = 2147483647, he = {
1158
- MODAL: Pe - 1,
1159
- // FIXME: need to cover the case where the tooltip is on the top of the modal
1160
- TOOLTIP: Pe - 2,
1161
- WINDOW: Pe - 3,
1162
- LAUNCHER: Pe - 4
1163
- }, wn = {
1164
- SESSION: `@${Y}-session`,
1165
- USER_DATA: `@${Y}-udata`
1166
- }, kn = {
1167
- DEFAULT_PRIMARY: "#742ddd",
1168
- WHITE: "#ffffff"
1169
- }, An = 36, ei = 100, ti = 25 * 1024 * 1024, In = ["application/pdf", "image/jpeg", "image/jpg", "image/png"], ft = "noopener noreferrer nofollow", Fe = {}, q = {
1170
- getItem: (e) => {
1171
- try {
1172
- return localStorage.getItem(e);
1173
- } catch {
1174
- return Fe[e] ?? null;
1175
- }
1176
- },
1177
- setItem: (e, t) => {
1178
- try {
1179
- localStorage.setItem(e, t);
1180
- } catch {
1181
- Fe[e] = t;
1182
- }
1183
- },
1184
- deleteItem: (e) => {
1185
- try {
1186
- localStorage.removeItem(e);
1187
- } catch {
1188
- delete Fe[e];
1189
- }
1190
- },
1191
- getKeys: (e) => {
1192
- try {
1193
- const t = [];
1194
- for (let n = 0; n < localStorage.length; n++) {
1195
- const o = localStorage.key(n);
1196
- o && o.startsWith(e) && t.push(o);
1197
- }
1198
- return t;
1199
- } catch {
1200
- return Object.keys(Fe).filter((t) => t.startsWith(e));
1201
- }
1202
- }
1203
- };
1204
- function $n(e) {
1205
- const { keyGenerator: t, keyParamsValidator: n } = e;
1206
- function o(a) {
1207
- try {
1208
- n && n(a);
1209
- const l = t(a), d = q.getItem(l);
1210
- return d ? JSON.parse(d) : null;
1211
- } catch {
1212
- return null;
1213
- }
1214
- }
1215
- function i(a, l) {
1216
- try {
1217
- n && n(a);
1218
- const d = t(a), g = JSON.stringify(l);
1219
- q.setItem(d, g);
1220
- } catch {
1221
- }
1222
- }
1223
- function s(a) {
1224
- try {
1225
- n && n(a);
1226
- const l = t(a);
1227
- q.deleteItem(l);
1228
- } catch {
1229
- }
1230
- }
1231
- return { get: o, set: i, clear: s };
1232
- }
1233
- const et = $n({
1234
- keyGenerator: ({ appId: e, aiAgentId: t, userId: n }) => {
1235
- const o = ni(`${e}/${t}/${n}`);
1236
- return `${wn.USER_DATA}/${o}`;
1237
- },
1238
- keyParamsValidator: ({ appId: e, aiAgentId: t, userId: n }) => {
1239
- if (!e || !t || !n)
1240
- throw new Error("Invalid parameters for user data cache");
1241
- }
1242
- });
1243
- function ni(e) {
1244
- let t = 0;
1245
- for (let n = 0; n < e.length; n++)
1246
- t = (t << 5) - t + e.charCodeAt(n), t |= 0;
1247
- return t.toString(16);
1248
- }
1249
- const tt = $n({
1250
- keyGenerator: ({ appId: e, aiAgentId: t }) => `${wn.SESSION}/${e}/${t}`
1251
- }), {
1252
- Provider: ri,
1253
- Consumer: Mn,
1254
- useContext: N
1255
- } = W("Agent");
1256
- function oi({
1257
- children: e,
1258
- state: t,
1259
- enableCloseConversationButton: n = !1,
1260
- enableExpandButton: o = !0,
1261
- enableAutoDisconnectInLauncher: i = !0,
1262
- ...s
1263
- }) {
1264
- const a = Ze(), [l, d] = T(!1), [g, m] = T(!1), p = {
1265
- opened: (t == null ? void 0 : t.opened) ?? l,
1266
- setOpened: (t == null ? void 0 : t.setOpened) ?? d,
1267
- expanded: (t == null ? void 0 : t.expanded) ?? g,
1268
- setExpanded: (t == null ? void 0 : t.setExpanded) ?? m
1269
- };
1270
- return /* @__PURE__ */ r.createElement(
1271
- ri,
1272
- {
1273
- value: {
1274
- ...s,
1275
- ...a,
1276
- state: p,
1277
- enableCloseConversationButton: n,
1278
- enableExpandButton: o,
1279
- enableAutoDisconnectInLauncher: i
1280
- }
1281
- },
1282
- e
1283
- );
1284
- }
1285
- function ii() {
1286
- const { chatSDK: e, logger: t } = N(), { shouldSyncCachedTemplate: n, syncCachedTemplates: o, clearCachedTemplates: i } = _n(), s = P(
1287
- async (l, d) => {
1288
- t.debug("authManager.authenticate: session:", l.userId), d && e.setSessionHandler(new yr(d)), await e.connect(l.userId, l.authToken), t.debug("authManager.authenticate: user:", e.currentUser), n(e) && await o(e);
1289
- },
1290
- [e, t, n, o]
1291
- ), a = P(async () => {
1292
- t.debug("authManager.deauthenticate: disconnect"), await e.disconnect(), i();
1293
- }, [e, t, i]);
1294
- return {
1295
- authenticate: s,
1296
- deauthenticate: a
1297
- };
1298
- }
1299
- const si = 24 * 60 * 60 * 1e3, {
1300
- Provider: ai,
1301
- useContext: F
1302
- } = W("MessengerSession");
1303
- function li({
1304
- userSessionInfo: e,
1305
- children: t
1306
- }) {
1307
- const { appId: n, aiAgentId: o, chatSDK: i, agentPreviewConfigs: s, state: a, logger: l, language: d, countryCode: g, context: m, handlers: p } = N(), { updateTheme: h } = Cn(), { authenticate: b, deauthenticate: x } = ii(), [E, f] = T(
1308
- void 0
1309
- ), [y, _] = T(void 0), [w, O] = T(null), [ee, U] = T(null), [le, _e] = T(null), v = s == null ? void 0 : s.forceCreateChannel;
1310
- function H() {
1311
- if (e) {
1312
- l.debug("messengerSession.initialize: manual session info detected");
1313
- const A = ["userId", "authToken", "sessionHandler"].filter((L) => !(L in e));
1314
- return A.length > 0 && l.error(
1315
- `messengerSession.initialize: missing required keys in userSessionInfo: ${A.join(", ")}`
1316
- ), e;
1317
- }
1318
- const I = tt.get({ appId: n, aiAgentId: o });
1319
- return I ? I.expireAt - si <= Date.now() ? (l.debug("messengerSession.initialize: auto session expired, clear cache"), tt.clear({ appId: n, aiAgentId: o }), et.clear({ appId: n, aiAgentId: o, userId: I.userId }), null) : (l.debug("messengerSession.initialize: auto session info detected"), I) : null;
1320
- }
1321
- const te = P(
1322
- (I, A) => {
1323
- et.set({ appId: n, aiAgentId: o, userId: I }, { knownActiveChannelUrl: A });
1324
- },
1325
- [n, o]
1326
- ), j = P(
1327
- (I) => {
1328
- const A = et.get({ appId: n, aiAgentId: o, userId: I });
1329
- return A == null ? void 0 : A.knownActiveChannelUrl;
1330
- },
1331
- [n, o]
1332
- ), Xe = P(async () => {
1333
- if (w) {
1334
- l.debug("messengerSession.refreshActiveChannel: try to refresh active channel"), f(void 0);
1335
- const I = await i.aiAgent.requestMessengerSettings({
1336
- aiAgentId: o,
1337
- userId: w.userId,
1338
- language: d,
1339
- country: g,
1340
- context: m,
1341
- forceCreateChannel: v,
1342
- knownActiveChannelUrl: j(w.userId)
1343
- });
1344
- return te(w.userId, I.active_channel.channel_url), f({ url: I.active_channel.channel_url, status: z.OPEN }), l.info(
1345
- "messengerSession.refreshActiveChannel: refreshed active channel",
1346
- I.active_channel.channel_url
1347
- ), I.active_channel.channel_url;
1348
- } else
1349
- throw l.error("messengerSession.refreshActiveChannel: userSession is not ready"), new Error("userSession is not ready");
1350
- }, [
1351
- i,
1352
- n,
1353
- o,
1354
- w == null ? void 0 : w.userId,
1355
- d,
1356
- g,
1357
- m,
1358
- v,
1359
- j,
1360
- te
1361
- ]);
1362
- return fn(i, {
1363
- onChannelChanged: (I) => {
1364
- var A;
1365
- I.isGroupChannel() && I.url === (E == null ? void 0 : E.url) && (l.info("messengerSession.channelChanged: channel.conversation", I.conversation), f({ url: I.url, status: ((A = I.conversation) == null ? void 0 : A.status) ?? z.OPEN }));
1366
- },
1367
- async onUserJoined(I, A) {
1368
- var K, fe;
1369
- if (I.conversation && I.conversation.type === $r.PROACTIVE && A.userId === ((K = i.currentUser) == null ? void 0 : K.userId)) {
1370
- l.info("messengerSession.onUserJoined: proactive channel joined", I.url);
1371
- const Se = ((fe = I.conversation) == null ? void 0 : fe.status) ?? z.OPEN;
1372
- f({ url: I.url, status: Se }), a.setOpened(!0), ci({
1373
- sound: document.hidden || !a.opened
1374
- });
1375
- }
1376
- }
1377
- }), R(() => {
1378
- async function I() {
1379
- l.debug("messengerSession.initialize: start");
1380
- const A = H(), L = await i.aiAgent.requestMessengerSettings({
1381
- aiAgentId: o,
1382
- userId: A == null ? void 0 : A.userId,
1383
- language: d,
1384
- country: g,
1385
- context: m,
1386
- forceCreateChannel: v,
1387
- knownActiveChannelUrl: j(A == null ? void 0 : A.userId)
1388
- });
1389
- l.debug("messengerSession.initialize: messenger settings response", L);
1390
- let K = null;
1391
- if (L.auto_created_user) {
1392
- const { user_id: Z, session_token: ne, expire_at: we } = L.auto_created_user;
1393
- tt.set({ appId: n, aiAgentId: o }, { userId: Z, authToken: ne, expireAt: we }), K = { userId: Z, authToken: ne };
1394
- } else
1395
- K = {
1396
- userId: (A == null ? void 0 : A.userId) ?? "",
1397
- authToken: (A == null ? void 0 : A.authToken) ?? ""
1398
- };
1399
- te(K.userId, L.active_channel.channel_url);
1400
- function fe() {
1401
- const Z = L.appearance.selected_theme;
1402
- h(Z, (we) => {
1403
- const ce = L.appearance.themes[we];
1404
- return {
1405
- primaryColor: ce.primary_color,
1406
- botMessageBackgroundColor: ce.bot_message_bg_color,
1407
- primaryContrastColor: ce.primary_contrast_color,
1408
- botMessageBackgroundContrastColor: ce.bot_message_bg_contrast_color
1409
- };
1410
- }), _(void 0), O(K), U({
1411
- userId: L.bot.bot_userid,
1412
- profileUrl: L.bot.bot_profile_url,
1413
- nickname: L.bot.bot_nickname,
1414
- replyToFile: L.bot.reply_to_file,
1415
- specialNotice: L.bot.special_notice,
1416
- specialNoticeEnabled: L.bot.is_special_notice_enabled,
1417
- showHandoffButton: L.bot.show_handoff_button ?? !0
1418
- }), _e({
1419
- type: L.launcher.image_type || "default_icon",
1420
- imageUrl: L.launcher.image_url
1421
- }), L.launcher.auto_open && !Le() && setTimeout(() => a.setOpened(!0), 500);
1422
- }
1423
- function Se() {
1424
- f({ url: L.active_channel.channel_url, status: z.OPEN });
1425
- }
1426
- try {
1427
- fe(), await b(K, e == null ? void 0 : e.sessionHandler), Se();
1428
- } catch (Z) {
1429
- Z instanceof Error && (l.error("messengerSession.initialize: failed to connect", Z), _(Z));
1430
- }
1431
- }
1432
- I().catch((A) => {
1433
- l.error("messengerSession: failed to initialize", A);
1434
- });
1435
- }, [i, n, o, e == null ? void 0 : e.userId, e == null ? void 0 : e.authToken]), R(() => {
1436
- p != null && p.onRegisterDeauthenticateHandler && (l.debug("messengerSession: registering deauthenticate handler"), p.onRegisterDeauthenticateHandler(x));
1437
- }, [p == null ? void 0 : p.onRegisterDeauthenticateHandler, x]), !w || !ee || !le ? null : /* @__PURE__ */ r.createElement(
1438
- ai,
1439
- {
1440
- value: {
1441
- userSession: w,
1442
- activeChannel: E,
1443
- refreshActiveChannel: Xe,
1444
- connectionError: y,
1445
- aiAgentInfo: { ...ee, ...s == null ? void 0 : s.bot },
1446
- launcherInfo: { ...le, ...s == null ? void 0 : s.launcher }
1447
- }
1448
- },
1449
- t
1450
- );
1451
- }
1452
- function ci({ sound: e }) {
1453
- const t = "🔔You have received a new message", n = document.title, o = setInterval(() => {
1454
- document.title = document.title === t ? n : t;
1455
- }, 750);
1456
- setTimeout(() => clearInterval(o), 5e3), e && import("./DP0MwObA.js").then((i) => {
1457
- new Audio(i.default).play();
1458
- });
1459
- }
1460
- const di = ({ publishSynchronous: e = !1 }) => {
1461
- const t = /* @__PURE__ */ new Set();
1462
- return {
1463
- publish: (n) => {
1464
- t.forEach((o) => {
1465
- e ? o(n) : setTimeout(() => o(n), 0);
1466
- });
1467
- },
1468
- subscribe: (n) => (t.add(n), () => t.delete(n))
1469
- };
1470
- };
1471
- function ui(e, t = []) {
1472
- const n = D(null), o = D(0), i = D(0), [s] = T(() => di({ publishSynchronous: !0 })), [a, l] = T(!0);
1473
- return ge(() => {
1474
- o.current = 0, i.current = 0, l(!0), n.current && (n.current.scrollTop = n.current.scrollHeight);
1475
- }, t), ge(() => s.subscribe(({ type: d, data: g }) => {
1476
- const { resolve: m, animated: p } = g ?? {};
1477
- if (!n.current) return m == null ? void 0 : m();
1478
- if (d === "scrollToBottom" && (n.current.scroll ? n.current.scroll({
1479
- top: n.current.scrollHeight,
1480
- behavior: Ht(e, p)
1481
- }) : n.current.scrollTop = n.current.scrollHeight, i.current = 0, l(!0), m == null || m()), d === "scroll") {
1482
- const h = g == null ? void 0 : g.top, { scrollTop: b, scrollHeight: x, clientHeight: E } = n.current;
1483
- n.current.scroll ? n.current.scroll({ top: h, behavior: Ht(e, p) }) : typeof h == "number" && (n.current.scrollTop = h), i.current = Math.max(0, x - b - E), l(i.current === 0), m == null || m();
1484
- }
1485
- }), [e]), {
1486
- scrollRef: n,
1487
- scrollPubSub: s,
1488
- isScrollBottomReached: a,
1489
- setIsScrollBottomReached: l,
1490
- scrollDistanceFromBottomRef: i,
1491
- scrollPositionRef: o
1492
- };
1493
- }
1494
- function Ht(e, t) {
1495
- return typeof t == "boolean" ? t ? "smooth" : "auto" : e;
1496
- }
1497
- function mi(e) {
1498
- return new Promise((t) => {
1499
- const n = new Image();
1500
- n.onload = function() {
1501
- const o = String(n.width), i = String(n.height);
1502
- URL.revokeObjectURL(n.src), t({ width: o, height: i });
1503
- }, n.src = URL.createObjectURL(e);
1504
- });
1505
- }
1506
- async function gi(e) {
1507
- if ("file" in e && e.file instanceof File && e.file.type.startsWith("image/")) {
1508
- const { width: t, height: n } = await mi(e.file);
1509
- return new Rr({
1510
- key: On,
1511
- value: [t, n]
1512
- });
1513
- }
1514
- }
1515
- const On = "KEY_IMG_ASPECT_RATIO", pi = ({ onScroll: e }) => {
1516
- const { agentPreviewConfigs: t, handlers: n } = N(), o = D(t == null ? void 0 : t.agentAttributes);
1517
- return o.current = t == null ? void 0 : t.agentAttributes, {
1518
- onBeforeSendMessage: async (i) => {
1519
- const s = await gi(i), a = {
1520
- ...i,
1521
- metaArrays: s ? [s] : void 0
1522
- }, l = hi(o.current);
1523
- return l ? { ...a, data: JSON.stringify(l) } : a;
1524
- },
1525
- onAfterSendMessage: (i) => {
1526
- var s;
1527
- e(), (s = n == null ? void 0 : n.onMessageSend) == null || s.call(n, i.message);
1528
- }
1529
- };
1530
- }, hi = (e) => {
1531
- if (!e) return null;
1532
- const t = {};
1533
- return e.ai && Object.keys(e.ai).length > 0 && (t.ai_attrs = e.ai), e.safeguard && Object.keys(e.safeguard).length > 0 && (t.safeguard_attrs = e.safeguard), typeof e.use_prompt_cache == "boolean" && (t.use_prompt_cache = e.use_prompt_cache), Object.keys(t).length > 0 ? t : null;
1534
- }, {
1535
- Provider: fi,
1536
- useContext: G
1537
- } = W("Conversation"), bi = ({
1538
- closedChannelUrl: e,
1539
- onClearClosedChannelUrl: t,
1540
- onNavigateToConversationList: n,
1541
- children: o
1542
- }) => {
1543
- const { activeChannel: i, refreshActiveChannel: s } = F(), a = ui("smooth"), l = () => {
1544
- setTimeout(() => a.scrollPubSub.publish({ type: "scrollToBottom" }), 25);
1545
- }, { onBeforeSendMessage: d, onAfterSendMessage: g } = pi({ onScroll: l }), m = P(async () => {
1546
- await s(), e && (t == null || t());
1547
- }, [s, e, t]);
1548
- return /* @__PURE__ */ r.createElement(
1549
- to,
1550
- {
1551
- channelUrl: e || (i == null ? void 0 : i.url),
1552
- onBeforeSendMessage: d,
1553
- onAfterSendMessage: g,
1554
- onMessagesUpdated: l,
1555
- onChannelDeleted: m,
1556
- onConversationClosedViaDispatcher: m
1557
- },
1558
- (p) => /* @__PURE__ */ r.createElement(
1559
- fi,
1560
- {
1561
- value: { ...p, scrollSource: a, goToActiveConversation: m, onNavigateToConversationList: n }
1562
- },
1563
- o
1564
- )
1565
- );
1566
- };
1567
- function Ge() {
1568
- }
1569
- async function Ln(e) {
1570
- let t = e;
1571
- t && (!t.startsWith("http://") && !t.startsWith("https://") && (t = "https://" + t), window.open(t, "_blank", "noopener,noreferrer"));
1572
- }
1573
- function Ut(e) {
1574
- try {
1575
- return JSON.parse(e === "" ? "{}" : e);
1576
- } catch {
1577
- return {};
1578
- }
1579
- }
1580
- function Rn(e) {
1581
- return !e || !e.conversation ? !1 : e.conversation.status === z.CLOSED;
1582
- }
1583
- function Nn(e) {
1584
- return !e || !e.conversation ? !1 : e.conversation.status === z.OPEN;
1585
- }
1586
- function Dn(e) {
1587
- var n;
1588
- const t = (n = e == null ? void 0 : e.conversation) == null ? void 0 : n.handoff;
1589
- return !!(t != null && t.timestamp);
1590
- }
1591
- function xi(e) {
1592
- return Nn(e) && !Dn(e);
1593
- }
1594
- const bt = ye({
1595
- onDrop: Ge,
1596
- subscribe: () => Ge
1597
- }), lt = ({ children: e }) => {
1598
- const t = D(/* @__PURE__ */ new Set());
1599
- return /* @__PURE__ */ r.createElement(
1600
- bt.Provider,
1601
- {
1602
- value: {
1603
- onDrop: (n) => {
1604
- var o;
1605
- if (n.preventDefault(), (o = n.dataTransfer) != null && o.files) {
1606
- const i = Array.from(n.dataTransfer.files);
1607
- i.length > 0 && t.current.forEach((s) => s(i));
1608
- }
1609
- },
1610
- subscribe: (n) => (t.current.add(n), () => t.current.delete(n))
1611
- }
1612
- },
1613
- e
1614
- );
1615
- }, Ei = ({ onDropFiles: e }) => {
1616
- const { subscribe: t } = J(bt);
1617
- R(() => t(e), [e]);
1618
- };
1619
- lt.Consumer = ({ children: e }) => {
1620
- const { onDrop: t } = J(bt);
1621
- return e({ onDrop: t, onDragOver: (i) => i.preventDefault() });
1622
- };
1623
- const se = (e) => {
1624
- const t = e;
1625
- return typeof t == "number" ? `${t}px` : t;
1626
- }, vi = /* @__PURE__ */ new Set(["send", "chat", "message", "chevron-right"]), yi = {
1627
- spinner: C(() => import("./BcUGcaq2.js")),
1628
- chat: C(() => import("./DcFCGVBm.js")),
1629
- message: C(() => import("./DsGXnanX.js")),
1630
- error: C(() => import("./B6fvrWGq.js")),
1631
- info: C(() => import("./CAIYsKDy.js")),
1632
- refresh: C(() => import("./B6xd54zt.js")),
1633
- "chevron-down": C(() => import("./BsimU71m.js")),
1634
- "chevron-right": C(() => import("./NmJl7zv3.js")),
1635
- done: C(() => import("./D_q6g3Dd.js")),
1636
- user: C(() => import("./CvqfQEhO.js")),
1637
- "file-document": C(() => import("./BAr50pfO.js")),
1638
- download: C(() => import("./B2CtcWp3.js")),
1639
- attach: C(() => import("./DY2ULcTX.js")),
1640
- delete: C(() => import("./DMruRpOm.js")),
1641
- close: C(() => import("./CuaBI7kd.js")),
1642
- "close-filled": C(() => import("./CxQFWLnW.js")),
1643
- send: C(() => import("./DZJyDpNp.js")),
1644
- menu: C(() => import("./BUYabNz7.js")),
1645
- expand: C(() => import("./wBtIAuNm.js")),
1646
- collapse: C(() => import("./C0RFfifL.js")),
1647
- agent: C(() => import("./Cc7XmLN1.js")),
1648
- question: C(() => import("./dqwvRBog.js")),
1649
- actionbook: C(() => import("./CrjNuryZ.js")),
1650
- function: C(() => import("./CvdSjw1c.js")),
1651
- "radio-on": C(() => import("./nmdo2Fbj.js")),
1652
- "radio-off": C(() => import("./BnZcRFmS.js")),
1653
- confluence: C(() => import("./BOnlh2zd.js")),
1654
- zendesk: C(() => import("./BAJ6LEKc.js")),
1655
- salesforce: C(() => import("./CT2kv4lr.js")),
1656
- sprinklr: C(() => import("./m2INcyV2.js")),
1657
- website: C(() => import("./BgGVGNdg.js")),
1658
- snippet: C(() => import("./BFcXPuf5.js")),
1659
- template: C(() => import("./awO7aBCv.js"))
1660
- }, $ = ({ type: e, size: t = 24, className: n, color: o }) => {
1661
- const i = yi[e];
1662
- return /* @__PURE__ */ r.createElement(
1663
- Ti,
1664
- {
1665
- className: n,
1666
- $rtlFlip: vi.has(e),
1667
- $size: t,
1668
- $color: o ?? u.color.primary.main
1669
- },
1670
- /* @__PURE__ */ r.createElement($e, { fallback: null }, /* @__PURE__ */ r.createElement(i, null))
1671
- );
1672
- }, Ci = k`[dir='rtl'] &{transform:scaleX(-1);}`, Ti = c.div`width:${({ $size: e }) => se(e)};height:${({ $size: e }) => se(e)};display:inline-block;&:focus{outline:none;}svg{display:block;}[class*='fill']{fill:${({ $color: e }) => e};}[class*='stroke']{stroke:${({ $color: e }) => e};stroke-width:2px;stroke-linejoin:round;}${({ $rtlFlip: e }) => e && Ci};`, S = ({
1673
- as: e,
1674
- variant: t = "body1",
1675
- color: n,
1676
- className: o,
1677
- ...i
1678
- }) => /* @__PURE__ */ r.createElement(Si, { as: e, $variant: t, className: o, $color: n, ...i }), zt = /* @__PURE__ */ new WeakMap(), _i = (e, t) => {
1679
- let n = zt.get(t);
1680
- n || (n = /* @__PURE__ */ new Map(), zt.set(t, n));
1681
- const o = n.get(e);
1682
- if (o) return o;
1683
- const i = t[e] ?? t.body1, s = k`font-size:${se(i.fontSize)};font-weight:${i.fontWeight};${i.fontFamily ? `font-family: ${i.fontFamily};` : ""}
1684
- ${i.lineHeight ? `line-height: ${i.lineHeight};` : "line-height: 100%;"}
1685
- `;
1686
- return n.set(e, s), s;
1687
- }, Si = c.span`font-stretch:normal;font-style:normal;letter-spacing:normal;${({ $variant: e, theme: t }) => _i(e, t.typography)}color:${({ $color: e }) => e};`, Ld = ({ iconSize: e = 64, icon: t, className: n, label: o, children: i }) => /* @__PURE__ */ r.createElement(ki, { className: n }, /* @__PURE__ */ r.createElement($, { type: t, size: e, color: u.themedColor.textLowEmphasis }), /* @__PURE__ */ r.createElement(S, { variant: "body1", color: u.themedColor.textMidEmphasis }, o), i), wi = c.div`position:relative;display:flex;justify-content:center;align-items:center;width:100%;height:100%;`, ki = c.div`display:flex;flex-direction:column;min-height:104px;align-items:center;gap:20px;text-align:center;`, Ai = {
1688
- loading: C(() => import("./BUZAFjik.js")),
1689
- error: C(() => import("./u7xN649y.js")),
1690
- noChannels: C(() => import("./y47rQgeT.js")),
1691
- noMessages: C(() => import("./BO79e6F7.js"))
1692
- }, Ee = ({ className: e, type: t = "loading", ...n }) => {
1693
- const o = Ai[t];
1694
- return /* @__PURE__ */ r.createElement(wi, { className: e }, /* @__PURE__ */ r.createElement($e, { fallback: null }, /* @__PURE__ */ r.createElement(o, { ...n })));
1695
- }, Re = 244, Bn = 640, je = 26, Pn = 4, Q = 12, Te = 2, Ii = 16, ae = `${Y}-incoming-msg`, $i = `${Y}-marked-text`;
1696
- function xt(e) {
1697
- switch (e) {
1698
- case "top":
1699
- case "middle":
1700
- return Te;
1701
- default:
1702
- return Ii;
1703
- }
1704
- }
1705
- function Et(e, t) {
1706
- if (t) {
1707
- const [, n] = t.split("/");
1708
- if (n)
1709
- return n.toUpperCase();
1710
- }
1711
- if (e && !e.startsWith(".")) {
1712
- const n = e.split(".").pop();
1713
- if (n && n !== e)
1714
- return n.toUpperCase();
1715
- }
1716
- return "FILE";
1717
- }
1718
- function Fn(e) {
1719
- return e.messageType === "file" ? e.message.length > 0 && e.file.name !== e.message : e.message.length > 0;
1720
- }
1721
- function vt({
1722
- name: e,
1723
- type: t = "FILE",
1724
- iconColor: n,
1725
- iconBackgroundColor: o,
1726
- onClick: i
1727
- }) {
1728
- const { colors: s } = mt();
1729
- return /* @__PURE__ */ r.createElement(Mi, { onClick: i, $clickable: !!i }, /* @__PURE__ */ r.createElement(Li, { $bgColor: o ?? s.base.primary }, /* @__PURE__ */ r.createElement($, { type: "file-document", size: 24, color: n ?? s.base.primaryContrastContent })), /* @__PURE__ */ r.createElement(Ri, null, /* @__PURE__ */ r.createElement(Ni, { variant: "button", color: u.themedColor.textHighEmphasis }, e), /* @__PURE__ */ r.createElement(S, { color: u.themedColor.textMidEmphasis, variant: "caption3" }, t)));
1730
- }
1731
- const Mi = c.div`border-radius:12px;gap:8px;width:${Re}px;height:64px;display:flex;align-items:center;padding:12px;box-sizing:border-box;border:1px solid ${u.themedColor.textDisabled};background-color:${u.themedColor.bg_50_600};${({ $clickable: e }) => e && Oi}`, Oi = k`cursor:pointer;&:hover{background-color:${u.themedColor.bg_100_500};}`, Li = c.div`border-radius:8px;width:40px;height:40px;display:flex;align-items:center;justify-content:center;background-color:${({ $bgColor: e }) => e};`, Ri = c.div`display:flex;flex:1;flex-direction:column;gap:4px;min-width:0;`, Ni = c(S)`text-overflow:ellipsis;white-space:nowrap;overflow:hidden;`;
1732
- function Di({ file: e, children: t, onClickFile: n }) {
1733
- return /* @__PURE__ */ r.createElement(Bi, null, /* @__PURE__ */ r.createElement(
1734
- vt,
1735
- {
1736
- name: e.name,
1737
- type: Et(e.name, e.type),
1738
- onClick: n && (() => n == null ? void 0 : n(e))
1739
- }
1740
- ), t);
1741
- }
1742
- const Bi = c.div`display:flex;flex-direction:column;align-items:flex-start;gap:${Te}px;`;
1743
- function Pi({ file: e, onClickMedia: t, children: n }) {
1744
- const o = () => e.type.startsWith("image") ? /* @__PURE__ */ r.createElement(Ui, { src: e.url, alt: "image-message" }) : e.type.startsWith("video") ? /* @__PURE__ */ r.createElement(zi, { controls: !0 }, /* @__PURE__ */ r.createElement("source", { src: e.url }), /* @__PURE__ */ r.createElement("track", { kind: "captions" })) : null;
1745
- if (o) {
1746
- const i = {
1747
- id: `${ae}-media-body`,
1748
- onClick: () => t == null ? void 0 : t(e)
1749
- };
1750
- return /* @__PURE__ */ r.createElement(Fi, null, /* @__PURE__ */ r.createElement(Hi, { ...i }, o()), n);
1751
- }
1752
- return null;
1753
- }
1754
- const Fi = c.div`display:flex;flex-direction:column;align-items:flex-start;gap:${Te}px;`, Hi = c.div`width:${Re}px;height:160px;border-radius:12px;overflow:hidden;cursor:pointer;${B.light`
1755
- background-color: ${u.color.background100};
1756
- `}
1757
- ${B.dark`
1758
- background-color: ${u.color.background400};
1759
- `}
1760
- `, Ui = c.img`width:100%;height:100%;object-fit:cover;`, zi = c.video`width:100%;height:100%;object-fit:cover;`, Wi = "✱";
1761
- function Hn(e) {
1762
- const t = new RegExp(`${Wi}+`, "g");
1763
- return e.replace(t, (n) => `<span id=${$i} aria-label="masked-text">${n}</span>`);
1764
- }
1765
- function Vi(e) {
1766
- const t = /```(\w+)?\n([\s\S]*?)```/g, n = [];
1767
- let o = 0;
1768
- return e.replace(t, (i, ...s) => {
1769
- const [a, l, d] = s;
1770
- return o < d && n.push({
1771
- type: "text",
1772
- value: e.slice(o, d).trim()
1773
- }), n.push({
1774
- type: "code",
1775
- value: l.trim(),
1776
- language: a ? a.trim() : "plaintext"
1777
- }), o = d + i.length, i;
1778
- }), o < e.length && n.push({
1779
- type: "text",
1780
- value: e.slice(o).trim()
1781
- }), n.map((i) => i.type !== "text" ? i : { ...i, value: Hn(i.value) });
1782
- }
1783
- const Gi = C(async () => ({ default: (await import("./HxsmHNdw.js")).MarkdownText })), ji = C(async () => ({ default: (await import("./DH2PekOm.js")).CodeBlock }));
1784
- function Wt(e) {
1785
- var i, s;
1786
- const t = e.maxBodyWidth ?? Re, n = Ie(() => Vi(e.message), [e.message]), o = {
1787
- id: `${ae}-text-body`,
1788
- $maxWidth: t,
1789
- $color: (i = e.customStyle) == null ? void 0 : i.bubbleContentColor,
1790
- $bgColor: (s = e.customStyle) == null ? void 0 : s.bubbleBackgroundColor
1791
- };
1792
- return n.length === 0 ? e.children ? /* @__PURE__ */ r.createElement(Vt, { ...o }, e.children) : null : /* @__PURE__ */ r.createElement(Vt, { ...o }, n.map((a, l) => a.type === "text" ? /* @__PURE__ */ r.createElement(Gt, { key: l, variant: "body3" }, /* @__PURE__ */ r.createElement($e, { fallback: a.value }, /* @__PURE__ */ r.createElement(Gi, null, a.value))) : a.type === "code" ? /* @__PURE__ */ r.createElement($e, { key: l, fallback: /* @__PURE__ */ r.createElement(Gt, { variant: "body3" }, a.value) }, /* @__PURE__ */ r.createElement(ji, { code: a.value, language: a.language })) : null), e.children);
1793
- }
1794
- const Vt = c.div`display:flex;flex-direction:column;border-radius:12px;overflow:hidden;max-width:${({ $maxWidth: e }) => e}px;${({ theme: e, $color: t, $bgColor: n }) => k`
1795
- color: ${t || e.colors.messageIncoming.text};
1796
- background-color: ${n || e.colors.messageIncoming.background};
1797
- `}
1798
- padding: 12px 0;
1799
- transition: max-width 0.3s;
1800
- overflow-wrap: break-word;
1801
- `, Gt = c(S)`align-items:flex-start;line-height:140%;white-space:pre-wrap;padding:0 12px;`;
1802
- function Ki(e) {
1803
- const { stringSet: t } = M(), n = Fn(e) ? /* @__PURE__ */ r.createElement(Wt, { ...e }) : null;
1804
- if (e.messageType === "user")
1805
- return n;
1806
- if (e.messageType === "file") {
1807
- const o = e.file;
1808
- return o.type.startsWith("image") || o.type.startsWith("video") ? /* @__PURE__ */ r.createElement(Pi, { ...e }, n) : /* @__PURE__ */ r.createElement(Di, { ...e }, n);
1809
- }
1810
- return /* @__PURE__ */ r.createElement(Wt, { ...e, message: t.UNKNOWN__UNKNOWN_MESSAGE_TYPE });
1811
- }
1812
- const yt = (e) => /* @__PURE__ */ r.createElement("svg", { width: 24, height: 24, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...e }, /* @__PURE__ */ r.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M12.0008 0.973633C10.6172 0.973633 9.49558 2.09527 9.49558 3.47888C9.49558 4.50705 10.115 5.39055 11.0009 5.77664V7.47887H13.0009V5.77653C13.8868 5.3904 14.5061 4.50696 14.5061 3.47888C14.5061 2.09527 13.3844 0.973633 12.0008 0.973633ZM0.250977 16.5788L0.250977 10.5789H2.25098L2.25098 16.5788H0.250977ZM21.7511 10.5789V16.5788H23.7511V10.5789H21.7511ZM18.251 7.47888H3.25097V18.9789C3.25097 20.3596 4.37026 21.4789 5.75097 21.4789H18.251C19.6317 21.4789 20.751 20.3596 20.751 18.9789V9.97887C20.751 8.59816 19.6317 7.47888 18.251 7.47888ZM9.78434 11.9539V15.2038C9.78434 15.7561 9.33663 16.2038 8.78434 16.2038C8.23206 16.2038 7.78434 15.7561 7.78434 15.2038V11.9539C7.78434 11.4016 8.23206 10.9539 8.78434 10.9539C9.33663 10.9539 9.78434 11.4016 9.78434 11.9539ZM16.2677 11.9539V15.2038C16.2677 15.7561 15.82 16.2038 15.2677 16.2038C14.7154 16.2038 14.2677 15.7561 14.2677 15.2038V11.9539C14.2677 11.4016 14.7154 10.9539 15.2677 10.9539C15.82 10.9539 16.2677 11.4016 16.2677 11.9539Z", fill: "#0D0D0D" }));
1813
- function Ct({ id: e, src: t, size: n = 56, onClick: o, style: i }) {
1814
- return /* @__PURE__ */ r.createElement(Zi, { id: e, tabIndex: 0, onClick: o, $size: se(n), style: i }, t ? /* @__PURE__ */ r.createElement(Yi, { src: t }) : /* @__PURE__ */ r.createElement($, { type: "user", size: n }));
1815
- }
1816
- const Zi = c.div`border-radius:50%;display:inline-block;overflow:hidden;position:relative;flex-shrink:0;height:${(e) => e.$size};width:${(e) => e.$size};background-color:${u.themedColor.bg_100_500};&:focus{outline:none;}`, Yi = c.img`object-fit:cover;width:100%;height:100%;position:absolute;`;
1817
- function qi({ sender: e, isBotMessage: t }) {
1818
- const n = `${ae}-sender-avatar`;
1819
- return !e.profileUrl && t ? /* @__PURE__ */ r.createElement(Ji, { id: n }, /* @__PURE__ */ r.createElement(yt, null)) : /* @__PURE__ */ r.createElement(Ct, { id: n, size: je, src: e.profileUrl });
1820
- }
1821
- const Ji = c.div`flex-shrink:0;width:${je}px;height:${je}px;box-sizing:border-box;padding:6px;border-radius:50%;display:flex;justify-content:center;align-items:center;background-color:${({ theme: e }) => e.colors.base.primary};path{fill:${({ theme: e }) => e.colors.base.primaryContrastContent};}}`;
1822
- function Xi({ sender: e }) {
1823
- return /* @__PURE__ */ r.createElement(Qi, { id: `${ae}-sender-name`, variant: "caption1", color: u.themedColor.textMidEmphasis }, e.nickname);
1824
- }
1825
- const Qi = c(S)`text-align:start;width:100%;box-sizing:border-box;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-block:5px;padding-inline:0 7px;`;
1826
- function es({ createdAt: e }) {
1827
- const { stringSet: t, format: n } = M();
1828
- return e ? /* @__PURE__ */ r.createElement(S, { id: `${ae}-sent-time`, variant: "caption4", color: u.themedColor.textLowEmphasis }, n(e, t.DATE_FORMAT__MESSAGE_TIMESTAMP)) : null;
1829
- }
1830
- function ts({ customStyle: e }) {
1831
- return /* @__PURE__ */ r.createElement(ns, { $bgColor: e == null ? void 0 : e.bubbleBackgroundColor }, [0, 1, 2].map((t) => /* @__PURE__ */ r.createElement(rs, { key: t, $color: e == null ? void 0 : e.bubbleContentColor })));
1832
- }
1833
- const ns = c.div`align-items:center;border-radius:12px;display:flex;gap:6px;justify-content:center;padding:16px 12px;background-color:${({ theme: e, $bgColor: t }) => t || e.colors.messageIncoming.background};`, rs = c.span`animation:blink 1.4s infinite;animation-fill-mode:both;border-radius:50%;height:8px;width:8px;background:${({ theme: e, $color: t }) => t || e.colors.messageIncoming.text};@keyframes blink{0%{opacity:0.12;transform:scale(1);}21.43%{opacity:0.38;transform:scale(1.2);}42.86%{opacity:0.12;transform:scale(1);}100%{opacity:0.12;transform:scale(1);}}&:nth-child(1){animation-delay:0.4s;}&:nth-child(2){animation-delay:0.6s;}&:nth-child(3){animation-delay:0.8s;}`;
1834
- function os({
1835
- extendedMessagePayload: e,
1836
- onClickCTA: t = ({ url: n }) => Ln(n)
1837
- }) {
1838
- const n = e == null ? void 0 : e.cta_button;
1839
- return n ? /* @__PURE__ */ r.createElement(is, { id: `${ae}-ext-cta-button`, role: "button", onClick: () => t(n) }, /* @__PURE__ */ r.createElement(ss, { variant: "button" }, n.label)) : null;
1840
- }
1841
- const is = c.div`display:flex;align-items:center;justify-content:center;cursor:pointer;border-radius:6px;padding:8px;background-color:${u.color.primary.main};color:${({ theme: e }) => e.colors.base.primaryContrastContent};&:hover{background-color:${u.color.primary.dark};}`, ss = c(S)`overflow:hidden;text-overflow:ellipsis;white-space:nowrap;`;
1842
- function as(e) {
1843
- return /* @__PURE__ */ r.createElement(r.Fragment, null);
1844
- }
1845
- class ls extends gr {
1846
- constructor(t) {
1847
- super(t), this.state = {
1848
- hasError: !1
1849
- };
1850
- }
1851
- static getDerivedStateFromError() {
1852
- return { hasError: !0 };
1853
- }
1854
- render() {
1855
- return this.state.hasError ? this.props.errorFallback : /* @__PURE__ */ r.createElement($e, { fallback: this.props.loadingFallback }, this.props.children);
1856
- }
1857
- }
1858
- const cs = /* @__PURE__ */ new Set(["default"]), { MessageTemplate: ds } = Hr({
1859
- parser: Pr,
1860
- renderer: Br,
1861
- Container: (e) => /* @__PURE__ */ r.createElement("div", { ...e })
1862
- });
1863
- function us(e) {
1864
- return /* @__PURE__ */ r.createElement(
1865
- ls,
1866
- {
1867
- errorFallback: e.messageTemplateErrorFallback,
1868
- loadingFallback: e.messageTemplateLoadingFallback
1869
- },
1870
- /* @__PURE__ */ r.createElement(ms, { ...e })
1871
- );
1872
- }
1873
- const ms = ({
1874
- extendedMessagePayload: e,
1875
- onGetCachedMessageTemplate: t = () => null,
1876
- onRequestMessageTemplate: n
1877
- }) => {
1878
- const o = e == null ? void 0 : e.message_template;
1879
- if (!cs.has((o == null ? void 0 : o.type) ?? "default")) throw new Error("Unsupported template type");
1880
- if (!n) throw new Error("onRequestMessageTemplate is required");
1881
- const { theme: s } = Zo(), a = Ro({
1882
- onRequestTemplate: n,
1883
- onGetCachedTemplate: t,
1884
- theme: s.selectedTheme,
1885
- templateKey: (o == null ? void 0 : o.key) ?? "invalid",
1886
- variables: o == null ? void 0 : o.variables,
1887
- viewVariables: o == null ? void 0 : o.view_variables,
1888
- aiAgentColorVariables: s.aiAgentColorVariables
1889
- });
1890
- return /* @__PURE__ */ r.createElement(gs, { id: `${ae}-ext-message-template` }, /* @__PURE__ */ r.createElement(Fr, { message: {} }, /* @__PURE__ */ r.createElement(ds, { templateItems: a.body.items, templateVersion: a.version })));
1891
- }, gs = c.div`box-sizing:border-box;overflow:hidden;width:100%;`;
1892
- function ps({
1893
- extendedMessagePayload: e,
1894
- onClickSuggestedReply: t,
1895
- suggestedRepliesDirection: n = "vertical"
1896
- }) {
1897
- const [o, i] = T(!1), s = (e == null ? void 0 : e.suggested_replies) ?? [];
1898
- return s.length === 0 || o ? null : /* @__PURE__ */ r.createElement(hs, { id: `${ae}-ext-suggested-replies`, $type: n }, s.map((a, l) => /* @__PURE__ */ r.createElement(
1899
- fs,
1900
- {
1901
- key: l,
1902
- $type: n,
1903
- variant: "body3",
1904
- onClick: () => {
1905
- t && (t == null || t({ reply: a }), i(!0));
1906
- }
1907
- },
1908
- a
1909
- )));
1910
- }
1911
- const hs = c.div`margin:16px 0;padding:0 ${Q}px;position:relative;display:flex;gap:8px;${({ $type: e }) => e === "vertical" ? bs : xs};`, fs = c(S)`box-sizing:border-box;padding:8px 12px;display:flex;align-items:center;border-radius:20px / clamp(20px,5%,100px);cursor:pointer;word-break:break-word;color:${u.color.primary.main};border:1px solid ${u.color.primary.main};background-color:${u.themedColor.bg_50_600};&:hover{background-color:${u.themedColor.bg_100_500};}${({ $type: e, theme: t }) => k`
1912
- ${e === "vertical" ? Es : vs};
1913
- &:active {
1914
- background-color: ${t.colors.base.primary};
1915
- color: ${t.colors.base.primaryContrastContent};
1916
- }
1917
- `}
1918
- `, bs = k`flex-direction:column;align-items:flex-end;`, xs = k`flex-direction:row;overflow-x:scroll;-ms-overflow-style:none;scrollbar-width:none;&::-webkit-scrollbar{display:none;}`, Es = k`max-width:calc(100% - 70px);white-space:pre-wrap;`, vs = k`white-space:nowrap;`;
1919
- function Tt(e) {
1920
- return e();
1921
- }
1922
- const ve = Ce({
1923
- template: ys,
1924
- components: {
1925
- SenderName: Xi,
1926
- SenderAvatar: qi,
1927
- SentTime: es,
1928
- MessageBody: Ki,
1929
- TypingIndicator: ts,
1930
- SuggestedReplies: ps,
1931
- MessageTemplate: us,
1932
- CTAButton: os,
1933
- MessageLogs: as
1934
- }
1935
- });
1936
- function ys(e) {
1937
- return /* @__PURE__ */ r.createElement(Un, { ...e, testerMode: !1 });
1938
- }
1939
- function Un(e) {
1940
- var p, h, b, x;
1941
- const { components: t } = ve.useContext(), n = !!e.isTyping, o = e.testerMode, i = !!((p = e.extendedMessagePayload) != null && p.message_template), s = !!((h = e.extendedMessagePayload) != null && h.cta_button), a = !!e.createdAt, l = Tt(() => e.messageType === "user" ? e.message.length > 0 : !0), d = e.groupType === "top" || e.groupType === "single", g = e.groupType === "bottom" || e.groupType === "single", m = o ? 0 : je;
1942
- return /* @__PURE__ */ r.createElement(Cs, { $marginBottom: n ? 0 : xt(e.groupType) }, d && /* @__PURE__ */ r.createElement(Ts, null, !o && /* @__PURE__ */ r.createElement(t.SenderAvatar, { ...e }), /* @__PURE__ */ r.createElement(t.SenderName, { ...e })), /* @__PURE__ */ r.createElement(Rt, null, /* @__PURE__ */ r.createElement(nt, { $extraStartPadding: m }, n && /* @__PURE__ */ r.createElement(t.TypingIndicator, { ...e }), /* @__PURE__ */ r.createElement(t.MessageBody, { ...e }, s && /* @__PURE__ */ r.createElement("div", { style: { marginTop: 12, marginInline: 12 } }, /* @__PURE__ */ r.createElement(t.CTAButton, { ...e })))), i && /* @__PURE__ */ r.createElement(jt, { $startPadding: 0, $endPadding: 0, style: { marginTop: l ? Te : 0 } }, /* @__PURE__ */ r.createElement(
1943
- t.MessageTemplate,
1944
- {
1945
- ...e,
1946
- messageTemplateErrorFallback: e.messageTemplateErrorFallback ?? /* @__PURE__ */ r.createElement(nt, { $extraStartPadding: m }, /* @__PURE__ */ r.createElement(
1947
- t.MessageBody,
1948
- {
1949
- ...e,
1950
- messageType: "user",
1951
- message: ((x = (b = e.extendedMessagePayload) == null ? void 0 : b.message_template) == null ? void 0 : x.fallback_message) ?? "Cannot read this template."
1952
- }
1953
- )),
1954
- messageTemplateLoadingFallback: e.messageTemplateLoadingFallback ?? /* @__PURE__ */ r.createElement(nt, { $extraStartPadding: m }, /* @__PURE__ */ r.createElement(t.TypingIndicator, { ...e }))
1955
- }
1956
- ))), g && a && /* @__PURE__ */ r.createElement(_s, { $extraStartPadding: m + 8 }, /* @__PURE__ */ r.createElement(t.SentTime, { ...e })), /* @__PURE__ */ r.createElement(Rt, null, e.suggestedRepliesVisible && /* @__PURE__ */ r.createElement(jt, null, /* @__PURE__ */ r.createElement(t.SuggestedReplies, { ...e })), /* @__PURE__ */ r.createElement(t.MessageLogs, { ...e })));
1957
- }
1958
- const Cs = c.div`display:flex;flex-direction:column;align-items:flex-start;margin-bottom:${({ $marginBottom: e }) => `${e}px`};
1959
- `, Je = c.div`display:flex;align-self:stretch;justify-content:flex-start;${({ $startPadding: e = Q, $endPadding: t = Q, $extraStartPadding: n = 0 }) => `
1960
- padding-inline: ${e + n}px ${t}px;
1961
- `}
1962
- `, Ts = c(Je)`display:flex;flex-direction:row;align-items:center;gap:8px;`, nt = c(Je)`display:flex;`, _s = c(Je)`margin-top:${Pn}px;display:flex;align-items:flex-start;justify-content:flex-start;`, jt = c(Je)`display:flex;flex-direction:column;${({ $startPadding: e = Q, $endPadding: t = Q, $extraStartPadding: n = 0 }) => `
1963
- padding-inline: ${e + n}px ${t}px;
1964
- `}
1965
- `;
1966
- function Ss({ file: e, children: t, onClickFile: n }) {
1967
- return /* @__PURE__ */ r.createElement(ws, null, /* @__PURE__ */ r.createElement(
1968
- vt,
1969
- {
1970
- name: e.name,
1971
- type: Et(e.name, e.type),
1972
- onClick: n && (() => n == null ? void 0 : n(e))
1973
- }
1974
- ), t);
1975
- }
1976
- const ws = c.div`display:flex;flex-direction:column;align-items:flex-end;gap:${Te}px;`, zn = ({ className: e, children: t, size: n = 26 }) => /* @__PURE__ */ r.createElement(ks, { className: e, $size: n }, t ?? /* @__PURE__ */ r.createElement($, { type: "spinner", size: n })), ks = c.div`display:flex;align-items:center;justify-content:center;width:${({ $size: e }) => se(e)};height:${({ $size: e }) => se(e)};animation:1s infinite linear;animation-name:rotate;@keyframes rotate{from{transform:rotate(0);}to{transform:rotate(360deg);}}`;
1977
- function As({ file: e, metadata: t, onClickMedia: n, children: o }) {
1978
- const { aspectRatio: i, localFile: s } = t, [a] = T(() => s instanceof File ? URL.createObjectURL(s) : e.url), [l, d] = T(!1), g = {
1979
- onClick: () => n == null ? void 0 : n(e),
1980
- $ratio: i
1981
- };
1982
- return /* @__PURE__ */ r.createElement(Is, null, /* @__PURE__ */ r.createElement($s, { ...g }, !l && /* @__PURE__ */ r.createElement(zn, { size: 26 }, /* @__PURE__ */ r.createElement($, { type: "spinner", color: "textLowEmphasis", size: 26 })), /* @__PURE__ */ r.createElement(Ms, { $loaded: l, src: a, alt: "image-message", onLoad: () => d(!0) })), o);
1983
- }
1984
- const Is = c.div`display:flex;flex-direction:column;align-items:flex-end;gap:${Te}px;`, $s = c.div`width:${Re}px;border-radius:12px;overflow:hidden;cursor:pointer;height:auto;aspect-ratio:${(e) => e.$ratio};position:relative;display:flex;align-items:center;justify-content:center;${B.light`
1985
- background-color: ${u.color.background100};
1986
- `}
1987
- ${B.dark`
1988
- background-color: ${u.color.background400};
1989
- `}
1990
- `, Ms = c.img`position:absolute;width:100%;height:100%;inset-block-start:0;inset-inline-start:0;object-fit:cover;opacity:${(e) => e.$loaded ? 1 : 0};transition:opacity 0.5s ease;`;
1991
- function Kt(e) {
1992
- var n, o;
1993
- const t = Ie(() => bn.sanitize(Hn(e.message)), [e.message]);
1994
- return /* @__PURE__ */ r.createElement(
1995
- Os,
1996
- {
1997
- $maxWidth: e.maxBodyWidth ?? Re,
1998
- $color: (n = e.customStyle) == null ? void 0 : n.bubbleContentColor,
1999
- $bgColor: (o = e.customStyle) == null ? void 0 : o.bubbleBackgroundColor
2000
- },
2001
- /* @__PURE__ */ r.createElement(Ls, { variant: "body3", dangerouslySetInnerHTML: { __html: t } })
2002
- );
2003
- }
2004
- const Os = c.div`display:flex;flex-direction:column;border-radius:12px;overflow:hidden;max-width:${({ $maxWidth: e }) => e}px;${({ theme: e, $color: t, $bgColor: n }) => k`
2005
- color: ${t || e.colors.messageOutgoing.text};
2006
- background-color: ${n || e.colors.messageOutgoing.background};
2007
- `}
2008
- padding: 12px 0;
2009
- transition: max-width 0.3s;
2010
- overflow-wrap: break-word;
2011
- `, Ls = c(S)`align-items:flex-start;line-height:140%;white-space:pre-wrap;padding:0 12px;`;
2012
- function Rs(e) {
2013
- const { stringSet: t } = M(), n = Fn(e) ? /* @__PURE__ */ r.createElement(Kt, { ...e }) : null;
2014
- return e.messageType === "user" ? n : e.messageType === "file" ? e.file.type.startsWith("image") ? /* @__PURE__ */ r.createElement(As, { ...e }, n) : /* @__PURE__ */ r.createElement(Ss, { ...e }, n) : /* @__PURE__ */ r.createElement(Kt, { ...e, message: t.UNKNOWN__UNKNOWN_MESSAGE_TYPE });
2015
- }
2016
- function Ns({ sendingStatus: e }) {
2017
- const t = mt();
2018
- switch (e) {
2019
- case "pending":
2020
- return /* @__PURE__ */ r.createElement(Ds, { size: 16 }, /* @__PURE__ */ r.createElement($, { type: "spinner", color: t.colors.messageOutgoing.background, size: 16 }));
2021
- case "failed":
2022
- return /* @__PURE__ */ r.createElement("div", { style: { marginBottom: 2 } }, /* @__PURE__ */ r.createElement($, { type: "error", color: u.themedColor.error, size: 16 }));
2023
- case "scheduled":
2024
- case "canceled":
2025
- return null;
2026
- default:
2027
- return /* @__PURE__ */ r.createElement("div", null, /* @__PURE__ */ r.createElement($, { type: "chevron-down" }));
2028
- }
2029
- }
2030
- const Ds = c(zn)`margin-bottom:2px;width:16px;height:16px;`;
2031
- function Bs({ createdAt: e }) {
2032
- const { stringSet: t, format: n } = M();
2033
- return e ? /* @__PURE__ */ r.createElement(S, { variant: "caption4", color: u.themedColor.textLowEmphasis }, n(e, t.DATE_FORMAT__MESSAGE_TIMESTAMP)) : null;
2034
- }
2035
- const _t = Ce({
2036
- template: Ps,
2037
- components: {
2038
- SendingStatus: Ns,
2039
- SentTime: Bs,
2040
- MessageBody: Rs
2041
- }
2042
- });
2043
- function Ps(e) {
2044
- const { components: t } = _t.useContext(), n = e.sendingStatus === "succeeded", o = e.groupType === "bottom" || e.groupType === "single";
2045
- return /* @__PURE__ */ r.createElement(Fs, { $marginBottom: xt(e.groupType) }, /* @__PURE__ */ r.createElement(Hs, null, /* @__PURE__ */ r.createElement(t.MessageBody, { ...e })), o && /* @__PURE__ */ r.createElement(Us, { $extraEndPadding: 8 }, n ? /* @__PURE__ */ r.createElement(t.SentTime, { ...e }) : /* @__PURE__ */ r.createElement(t.SendingStatus, { ...e })));
2046
- }
2047
- const Fs = c.div`display:flex;flex:1;flex-direction:column;align-items:flex-end;margin-bottom:${({ $marginBottom: e }) => `${e}px`};
2048
- `, Wn = c.div`display:flex;align-self:stretch;justify-content:flex-end;${({ $startPadding: e = Q, $endPadding: t = Q, $extraEndPadding: n = 0 }) => `padding-inline: ${e}px ${t + n}px;`};
2049
- `, Hs = c(Wn)``, Us = c(Wn)`margin-top:${Pn}px;`;
2050
- function zs(e) {
2051
- return e.messageType !== "admin" ? null : /* @__PURE__ */ r.createElement(Ws, null, /* @__PURE__ */ r.createElement(S, { variant: "caption2", color: u.themedColor.textMidEmphasis }, Vs(bn.sanitize(e.message))));
2052
- }
2053
- const Ws = c.div`text-align:center;text-wrap:pretty;a{text-decoration:none;color:inherit;}`, Vs = (e) => {
2054
- const t = /\[([^\]]+)\]\((https?:\/\/[^\s]+)\)/g, n = [];
2055
- let o = 0;
2056
- return e.replace(t, (i, s, a, l) => (n.push(e.slice(o, l)), n.push(
2057
- /* @__PURE__ */ r.createElement("a", { key: a, href: a, target: "_blank", rel: ft }, s)
2058
- ), o = l + i.length, i)), n.push(e.slice(o)), n;
2059
- }, Gs = ({ submitted: e, defaultValue: t, value: n, onChange: o }) => {
2060
- const { stringSet: i } = M();
2061
- return R(() => {
2062
- typeof n > "u" && typeof t == "boolean" && (o == null || o(t));
2063
- }, [n, t]), /* @__PURE__ */ r.createElement(js, null, /* @__PURE__ */ r.createElement(S, { variant: "caption2", color: u.themedColor.textMidEmphasis }, i.CSAT_CRE_TITLE), /* @__PURE__ */ r.createElement("div", null, /* @__PURE__ */ r.createElement(
2064
- Zt,
2065
- {
2066
- checked: n === !0,
2067
- label: i.CSAT_CRE_SOLVED,
2068
- disabled: e,
2069
- onClick: () => o == null ? void 0 : o(!0)
2070
- }
2071
- ), /* @__PURE__ */ r.createElement(
2072
- Zt,
2073
- {
2074
- checked: n === !1,
2075
- label: i.CSAT_CRE_NOT_SOLVED,
2076
- disabled: e,
2077
- onClick: () => o == null ? void 0 : o(!1)
2078
- }
2079
- )));
2080
- }, Zt = ({ onClick: e, checked: t, label: n, disabled: o }) => {
2081
- const i = t ? u.color.primary.main : o ? u.themedColor.textDisabled : u.themedColor.textLowEmphasis, s = t ? u.themedColor.textHighEmphasis : o ? u.themedColor.textLowEmphasis : u.themedColor.textHighEmphasis;
2082
- return /* @__PURE__ */ r.createElement(Ks, { onClick: e, disabled: o }, /* @__PURE__ */ r.createElement($, { size: 24, type: t ? "radio-on" : "radio-off", color: i }), /* @__PURE__ */ r.createElement(S, { variant: "caption2", color: s }, n));
2083
- }, js = c.div`display:flex;flex-direction:column;gap:8px;`, Ks = c.button`all:unset;display:flex;align-items:center;justify-content:flex-start;gap:2px;span{line-height:initial;}&:enabled{cursor:pointer;}`, Zs = (e) => /* @__PURE__ */ r.createElement("svg", { width: 40, height: 40, viewBox: "0 0 40 40", fill: "none", xmlns: "http://www.w3.org/2000/svg", id: "csat1", ...e }, /* @__PURE__ */ r.createElement("path", { d: "M2.08301 20C2.08301 10.1049 10.1046 2.08334 19.9997 2.08334C29.8948 2.08334 37.9163 10.1049 37.9163 20C37.9163 29.8952 29.8948 37.9167 19.9997 37.9167C10.1046 37.9167 2.08301 29.8952 2.08301 20Z", fill: "#E0E0E0" }), /* @__PURE__ */ r.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M12.5824 29.3328C13.1344 29.7473 13.918 29.636 14.3326 29.084C15.6269 27.3607 17.6835 26.25 19.9997 26.25C22.316 26.25 24.3727 27.3607 25.6668 29.084C26.0815 29.636 26.865 29.7473 27.4172 29.3328C27.9692 28.9182 28.0805 28.1347 27.6658 27.5825C25.9198 25.2577 23.1357 23.75 19.9997 23.75C16.8638 23.75 14.0797 25.2577 12.3336 27.5825C11.919 28.1347 12.0304 28.9182 12.5824 29.3328Z", fill: "black", fillOpacity: 0.12 }), /* @__PURE__ */ r.createElement("path", { d: "M28.4449 13.7707C29.1324 13.8328 29.64 14.4406 29.578 15.1281C29.516 15.8153 28.909 16.3221 28.2219 16.2608C28.2219 16.2608 28.0282 16.2502 27.9267 16.2487C27.7224 16.2457 27.4382 16.2509 27.1224 16.2833C26.7864 16.3177 26.4644 16.3782 26.1799 16.4662L26.304 16.86C26.7792 18.3675 25.5094 19.5813 24.2057 19.5813C23.504 19.5813 22.8319 19.2617 22.4295 18.6857C22.0025 18.0745 21.9417 17.241 22.4075 16.5344C22.7505 16.0143 23.2444 15.3831 23.8959 14.8657C24.8355 14.1195 26.0435 13.8809 26.867 13.7963C27.3024 13.7517 28.0149 13.7319 28.4449 13.7707Z", fill: "black", fillOpacity: 0.12 }), /* @__PURE__ */ r.createElement("path", { d: "M11.5553 13.7707C10.8677 13.8328 10.3601 14.4406 10.4221 15.1281C10.4842 15.8153 11.0912 16.3221 11.7782 16.2608C11.7782 16.2608 11.972 16.2502 12.0734 16.2487C12.2778 16.2457 12.562 16.2509 12.8778 16.2833C13.2137 16.3177 13.5357 16.3782 13.8203 16.4662L13.6962 16.86C13.2209 18.3675 14.4907 19.5813 15.7944 19.5813C16.4962 19.5813 17.1683 19.2617 17.5707 18.6857C17.9975 18.0745 18.0585 17.241 17.5925 16.5344C17.2497 16.0143 16.7557 15.3831 16.1043 14.8657C15.1646 14.1195 13.9566 13.8809 13.1331 13.7963C12.6978 13.7517 11.9853 13.7319 11.5553 13.7707Z", fill: "black", fillOpacity: 0.12 })), Ys = (e) => /* @__PURE__ */ r.createElement("svg", { width: 40, height: 40, viewBox: "0 0 40 40", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...e }, /* @__PURE__ */ r.createElement("path", { d: "M2.08337 19.9999C2.08337 10.1048 10.1049 2.08325 20 2.08325C29.8952 2.08325 37.9167 10.1048 37.9167 19.9999C37.9167 29.8951 29.8952 37.9166 20 37.9166C10.1049 37.9166 2.08337 29.8951 2.08337 19.9999Z", fill: "url(#paint0_linear_159_173206)" }), /* @__PURE__ */ r.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M12.5828 29.3328C13.1348 29.7473 13.9184 29.636 14.3329 29.084C15.6272 27.3607 17.6839 26.25 20 26.25C22.3164 26.25 24.373 27.3607 25.6672 29.084C26.0819 29.636 26.8654 29.7473 27.4175 29.3328C27.9695 28.9182 28.0809 28.1347 27.6662 27.5825C25.9202 25.2577 23.136 23.75 20 23.75C16.8642 23.75 14.0801 25.2577 12.334 27.5825C11.9194 28.1347 12.0308 28.9182 12.5828 29.3328Z", fill: "#141B34" }), /* @__PURE__ */ r.createElement("path", { d: "M28.4454 13.7707C29.1329 13.8328 29.6405 14.4406 29.5785 15.1281C29.5165 15.8153 28.9095 16.3221 28.2224 16.2608C28.2224 16.2608 28.0287 16.2502 27.9272 16.2487C27.7229 16.2457 27.4387 16.2509 27.1229 16.2833C26.7869 16.3177 26.4649 16.3782 26.1804 16.4662L26.3045 16.86C26.7797 18.3675 25.5099 19.5813 24.2062 19.5813C23.5045 19.5813 22.8324 19.2617 22.43 18.6857C22.003 18.0745 21.9422 17.241 22.408 16.5344C22.751 16.0143 23.2449 15.3831 23.8964 14.8657C24.836 14.1195 26.044 13.8809 26.8675 13.7963C27.3029 13.7517 28.0154 13.7319 28.4454 13.7707Z", fill: "#141B34" }), /* @__PURE__ */ r.createElement("path", { d: "M11.5549 13.7707C10.8674 13.8328 10.3597 14.4406 10.4218 15.1281C10.4838 15.8153 11.0908 16.3221 11.7779 16.2608C11.7779 16.2608 11.9716 16.2502 12.073 16.2487C12.2774 16.2457 12.5616 16.2509 12.8774 16.2833C13.2134 16.3177 13.5353 16.3782 13.8199 16.4662L13.6958 16.86C13.2205 18.3675 14.4904 19.5813 15.794 19.5813C16.4958 19.5813 17.168 19.2617 17.5703 18.6857C17.9971 18.0745 18.0581 17.241 17.5921 16.5344C17.2493 16.0143 16.7553 15.3831 16.1039 14.8657C15.1643 14.1195 13.9562 13.8809 13.1327 13.7963C12.6974 13.7517 11.9849 13.7319 11.5549 13.7707Z", fill: "#141B34" }), /* @__PURE__ */ r.createElement("defs", null, /* @__PURE__ */ r.createElement("linearGradient", { id: "paint0_linear_159_173206", x1: 20, y1: 2.08325, x2: 20, y2: 37.9166, gradientUnits: "userSpaceOnUse" }, /* @__PURE__ */ r.createElement("stop", { stopColor: "#FF2D1D" }), /* @__PURE__ */ r.createElement("stop", { offset: 1, stopColor: "#FFA540" })))), qs = (e) => /* @__PURE__ */ r.createElement("svg", { width: 40, height: 40, viewBox: "0 0 40 40", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...e }, /* @__PURE__ */ r.createElement("path", { d: "M19.9997 36.6667C29.2044 36.6667 36.6663 29.2048 36.6663 20C36.6663 10.7953 29.2044 3.33334 19.9997 3.33334C10.7949 3.33334 3.33301 10.7953 3.33301 20C3.33301 29.2048 10.7949 36.6667 19.9997 36.6667Z", fill: "#E0E0E0" }), /* @__PURE__ */ r.createElement("path", { d: "M15 28.333C16.3927 27.2867 18.124 26.6667 20 26.6667C21.876 26.6667 23.6073 27.2867 25 28.333", stroke: "black", strokeOpacity: 0.12, strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round" }), /* @__PURE__ */ r.createElement("path", { d: "M11.667 13.3511C11.667 13.3511 14.0161 13.139 15.3268 14.18M15.3268 14.18L14.8882 15.5711C14.7153 16.1199 15.1675 16.6667 15.7943 16.6667C16.4531 16.6667 16.8882 16.0723 16.549 15.5579C16.2483 15.102 15.8388 14.5866 15.3268 14.18ZM23.3337 13.3511C23.3337 13.3511 25.6827 13.139 26.9935 14.18M26.9935 14.18L26.555 15.5711C26.382 16.1199 26.8342 16.6667 27.461 16.6667C28.1198 16.6667 28.5548 16.0723 28.2157 15.5579C27.915 15.102 27.5055 14.5866 26.9935 14.18Z", stroke: "black", strokeOpacity: 0.12, strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round" })), Js = (e) => /* @__PURE__ */ r.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: 40, height: 40, viewBox: "0 0 40 40", fill: "none", ...e }, /* @__PURE__ */ r.createElement("path", { d: "M2.083 20C2.083 10.105 10.105 2.083 20 2.083c9.895 0 17.917 8.021 17.917 17.917 0 9.895-8.022 17.917-17.917 17.917C10.105 37.917 2.083 29.895 2.083 20Z", fill: "#FFD46E" }), /* @__PURE__ */ r.createElement("path", { d: "M14.249 27.334C15.851 26.13 17.844 25.417 20 25.417c2.156 0 4.149.714 5.751 1.917.553.415.664 1.199.25 1.751-.415.552-1.199.664-1.751.25-1.183-.889-2.652-1.416-4.25-1.416s-3.067.527-4.25 1.416c-.553.414-1.336.302-1.751-.25-.415-.552-.303-1.336.249-1.751Z", fill: "#141B34" }), /* @__PURE__ */ r.createElement("path", { d: "M23.445 14.596c-.687.062-1.294-.445-1.356-1.132-.062-.687.445-1.295 1.132-1.357.082-.005.342-.02.482-.022.277-.004.662.002 1.097.047.823.085 2.031.323 2.97 1.07.652.518 1.146 1.15 1.489 1.67.466.706.405 1.54-.022 2.15-.402.576-1.074.896-1.775.896-1.304 0-2.573-1.214-2.098-2.722l.125-.394c-.285-.088-.607-.148-.942-.182-.316-.033-.6-.038-.804-.035-.101.002-.242.01-.294.013Z", fill: "#141B34" }), /* @__PURE__ */ r.createElement("path", { d: "M11.779 14.596c-.687.062-1.294-.445-1.356-1.132-.062-.687.445-1.295 1.132-1.357.082-.005.342-.02.482-.022.277-.004.662.002 1.097.047.823.085 2.031.323 2.97 1.07.652.518 1.146 1.15 1.489 1.67.466.706.405 1.54-.022 2.15-.402.576-1.074.896-1.775.896-1.304 0-2.573-1.214-2.098-2.722l.124-.394c-.284-.088-.606-.148-.941-.182-.316-.033-.6-.038-.804-.035-.101.002-.243.01-.294.013Z", fill: "#141B34" })), Xs = (e) => /* @__PURE__ */ r.createElement("svg", { width: 40, height: 40, viewBox: "0 0 40 40", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...e }, /* @__PURE__ */ r.createElement("path", { d: "M19.9997 36.6667C29.2044 36.6667 36.6663 29.2048 36.6663 20C36.6663 10.7953 29.2044 3.33334 19.9997 3.33334C10.7949 3.33334 3.33301 10.7953 3.33301 20C3.33301 29.2048 10.7949 36.6667 19.9997 36.6667Z", fill: "#E0E0E0" }), /* @__PURE__ */ r.createElement("path", { d: "M13.348 15H13.333M26.6663 15H26.6513", stroke: "black", strokeOpacity: 0.12, strokeWidth: 3.33333, strokeLinecap: "round", strokeLinejoin: "round" }), /* @__PURE__ */ r.createElement("path", { d: "M15 26.6667H25", stroke: "black", strokeOpacity: 0.12, strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round" })), Qs = (e) => /* @__PURE__ */ r.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: 40, height: 40, viewBox: "0 0 40 40", fill: "none", ...e }, /* @__PURE__ */ r.createElement("path", { d: "M2.083 20C2.083 10.105 10.105 2.083 20 2.083c9.895 0 17.917 8.021 17.917 17.917 0 9.895-8.022 17.917-17.917 17.917C10.105 37.917 2.083 29.895 2.083 20Z", fill: "#FFD46E" }), /* @__PURE__ */ r.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M11.25 15c0-1.151.933-2.083 2.083-2.083h.015c1.151 0 2.084.933 2.084 2.083 0 1.151-.933 2.083-2.084 2.083h-.015c-1.15 0-2.083-.933-2.083-2.083ZM24.568 15c0-1.151.933-2.083 2.084-2.083h.015c1.151 0 2.083.933 2.083 2.083 0 1.151-.932 2.083-2.083 2.083h-.015c-1.151 0-2.084-.933-2.084-2.083Z", fill: "#141B34" }), /* @__PURE__ */ r.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M13.75 26.667c0-.691.56-1.25 1.25-1.25h10c.69 0 1.25.559 1.25 1.25 0 .691-.56 1.25-1.25 1.25h-10c-.69 0-1.25-.559-1.25-1.25Z", fill: "#141B34" })), ea = (e) => /* @__PURE__ */ r.createElement("svg", { width: 40, height: 40, viewBox: "0 0 40 40", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...e }, /* @__PURE__ */ r.createElement("path", { d: "M19.9997 36.6667C29.2044 36.6667 36.6663 29.2048 36.6663 20C36.6663 10.7953 29.2044 3.33334 19.9997 3.33334C10.7949 3.33334 3.33301 10.7953 3.33301 20C3.33301 29.2048 10.7949 36.6667 19.9997 36.6667Z", fill: "#E0E0E0" }), /* @__PURE__ */ r.createElement("path", { d: "M13.333 25C14.8532 27.024 17.2735 28.3333 19.9997 28.3333C22.7258 28.3333 25.1462 27.024 26.6663 25", stroke: "black", strokeOpacity: 0.12, strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round" }), /* @__PURE__ */ r.createElement("path", { d: "M13.348 15H13.333M26.6663 15H26.6513", stroke: "black", strokeOpacity: 0.12, strokeWidth: 3.33333, strokeLinecap: "round", strokeLinejoin: "round" })), ta = (e) => /* @__PURE__ */ r.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: 40, height: 40, viewBox: "0 0 40 40", fill: "none", ...e }, /* @__PURE__ */ r.createElement("path", { d: "M2.083 20C2.083 10.105 10.105 2.083 20 2.083c9.895 0 17.917 8.021 17.917 17.917 0 9.895-8.022 17.917-17.917 17.917C10.105 37.917 2.083 29.895 2.083 20Z", fill: "#FFD46E" }), /* @__PURE__ */ r.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M12.583 24.001c.552-.414 1.335-.302 1.75.25 1.294 1.723 3.35 2.834 5.667 2.834s4.373-1.11 5.667-2.834c.415-.552 1.199-.664 1.751-.25.552.415.664 1.199.25 1.751C25.92 28.076 23.136 29.584 20 29.584s-5.92-1.508-7.666-3.832c-.415-.552-.303-1.336.249-1.751Z", fill: "#141B34" }), /* @__PURE__ */ r.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M11.25 15c0-1.151.933-2.083 2.083-2.083h.015c1.151 0 2.084.933 2.084 2.083 0 1.151-.933 2.083-2.084 2.083h-.015c-1.15 0-2.083-.933-2.083-2.083ZM24.568 15c0-1.151.933-2.083 2.084-2.083h.015c1.151 0 2.083.933 2.083 2.083 0 1.151-.932 2.083-2.083 2.083h-.015c-1.151 0-2.084-.933-2.084-2.083Z", fill: "#141B34" })), na = (e) => /* @__PURE__ */ r.createElement("svg", { width: 40, height: 40, viewBox: "0 0 40 40", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...e }, /* @__PURE__ */ r.createElement("path", { d: "M19.9997 36.6663C29.2044 36.6663 36.6663 29.2044 36.6663 19.9997C36.6663 10.7949 29.2044 3.33301 19.9997 3.33301C10.7949 3.33301 3.33301 10.7949 3.33301 19.9997C3.33301 29.2044 10.7949 36.6663 19.9997 36.6663Z", fill: "#E0E0E0" }), /* @__PURE__ */ r.createElement("path", { d: "M19.9997 30C23.16 30 25.8145 27.867 26.56 24.9832C26.9068 23.6413 26.4033 23.3333 25.0765 23.3333H14.9228C13.5959 23.3333 13.0925 23.6413 13.4393 24.9832C14.1848 27.867 16.8393 30 19.9997 30Z", stroke: "black", strokeOpacity: 0.12, strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round" }), /* @__PURE__ */ r.createElement("path", { d: "M11.667 15.8333C11.667 14.4526 12.7863 13.3333 14.167 13.3333C15.5477 13.3333 16.667 14.4526 16.667 15.8333M23.3337 15.8333C23.3337 14.4526 24.453 13.3333 25.8337 13.3333C27.2143 13.3333 28.3337 14.4526 28.3337 15.8333", stroke: "black", strokeOpacity: 0.12, strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round" })), ra = (e) => /* @__PURE__ */ r.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: 40, height: 40, viewBox: "0 0 40 40", fill: "none", ...e }, /* @__PURE__ */ r.createElement("path", { d: "M2.083 20C2.083 10.105 10.105 2.083 20 2.083c9.895 0 17.917 8.021 17.917 17.917 0 9.895-8.022 17.917-17.917 17.917C10.105 37.917 2.083 29.895 2.083 20Z", fill: "#FFD46E" }), /* @__PURE__ */ r.createElement("g", { clipPath: "url(#clip0_159_173224)" }, /* @__PURE__ */ r.createElement("g", { clipPath: "url(#clip1_159_173224)" }, /* @__PURE__ */ r.createElement("path", { d: "M20 30.624c3.752 0 6.904-2.532 7.789-5.956.412-1.593-.185-1.959-1.76-1.959H13.973c-1.575 0-2.173.366-1.761 1.959.885 3.424 4.037 5.956 7.788 5.956Z", fill: "#141B34" })), /* @__PURE__ */ r.createElement("mask", { id: "mask0_159_173224", style: {
2084
- maskType: "alpha"
2085
- }, maskUnits: "userSpaceOnUse", x: 12, y: 22, width: 16, height: 9 }, /* @__PURE__ */ r.createElement("path", { d: "M20 30.624c3.752 0 6.904-2.532 7.789-5.956.412-1.593-.185-1.959-1.76-1.959H13.973c-1.575 0-2.173.366-1.761 1.959.885 3.424 4.037 5.956 7.788 5.956Z", fill: "#141B34" })), /* @__PURE__ */ r.createElement("g", { mask: "url(#mask0_159_173224)" }, /* @__PURE__ */ r.createElement("path", { d: "M20 32.998c3.278 0 5.936-1.594 5.936-3.561 0-1.968-2.658-3.562-5.936-3.562-3.278 0-5.936 1.594-5.936 3.562 0 1.967 2.658 3.561 5.936 3.561Z", fill: "#FF493B" }))), /* @__PURE__ */ r.createElement("path", { d: "M11.667 15.833c0-1.381 1.12-2.5 2.5-2.5s2.5 1.12 2.5 2.5M23.333 15.833c0-1.381 1.12-2.5 2.5-2.5s2.5 1.12 2.5 2.5", stroke: "#141B34", strokeWidth: 2.5, strokeLinecap: "round", strokeLinejoin: "round" }), /* @__PURE__ */ r.createElement("defs", null, /* @__PURE__ */ r.createElement("clipPath", { id: "clip0_159_173224" }, /* @__PURE__ */ r.createElement("rect", { width: 15.83, height: 7.915, fill: "white", transform: "translate(12.085 22.709)" })), /* @__PURE__ */ r.createElement("clipPath", { id: "clip1_159_173224" }, /* @__PURE__ */ r.createElement("rect", { width: 15.83, height: 7.915, fill: "white", transform: "translate(12.085 22.709)" })))), oa = [
2086
- {
2087
- value: 1,
2088
- Icon: {
2089
- Active: Ys,
2090
- Inactive: Zs
2091
- },
2092
- isActive: (e) => e <= 1,
2093
- getTooltip: (e) => e.CSAT5_RATING_SCORE_1
2094
- },
2095
- {
2096
- value: 2,
2097
- Icon: {
2098
- Active: Js,
2099
- Inactive: qs
2100
- },
2101
- isActive: (e) => e === 2,
2102
- getTooltip: (e) => e.CSAT5_RATING_SCORE_2
2103
- },
2104
- {
2105
- value: 3,
2106
- Icon: {
2107
- Active: Qs,
2108
- Inactive: Xs
2109
- },
2110
- isActive: (e) => e === 3,
2111
- getTooltip: (e) => e.CSAT5_RATING_SCORE_3
2112
- },
2113
- {
2114
- value: 4,
2115
- Icon: {
2116
- Active: ta,
2117
- Inactive: ea
2118
- },
2119
- isActive: (e) => e === 4,
2120
- getTooltip: (e) => e.CSAT5_RATING_SCORE_4
2121
- },
2122
- {
2123
- value: 5,
2124
- Icon: {
2125
- Active: ra,
2126
- Inactive: na
2127
- },
2128
- isActive: (e) => 5 <= e,
2129
- getTooltip: (e) => e.CSAT5_RATING_SCORE_5
2130
- }
2131
- ], ia = () => oa, Vn = ({ label: e, children: t, position: n = "top", disabled: o }) => o ? t : /* @__PURE__ */ r.createElement(ct, null, t, /* @__PURE__ */ r.createElement(la, { $position: n }, /* @__PURE__ */ r.createElement(ca, { variant: "caption1" }, e), /* @__PURE__ */ r.createElement(sa, { $position: n }))), sa = ({ $position: e }) => /* @__PURE__ */ r.createElement(
2132
- "svg",
2133
- {
2134
- style: { transform: e === "top" ? "rotate(0)" : "rotate(180deg)" },
2135
- xmlns: "http://www.w3.org/2000/svg",
2136
- width: "12",
2137
- height: "6",
2138
- viewBox: "0 0 12 6",
2139
- fill: "none"
2140
- },
2141
- /* @__PURE__ */ r.createElement("path", { d: "M6 6L0 0h12L6 6Z", fill: u.themedColor.textHighEmphasis })
2142
- ), aa = {
2143
- top: k`flex-direction:column;top:0;transform:translate(-50%,-100%);`,
2144
- bottom: k`flex-direction:column-reverse;bottom:0;transform:translate(-50%,100%);`
2145
- }, ct = c.div`position:relative;`, la = c.div`display:flex;align-items:center;position:absolute;left:50%;z-index:${he.TOOLTIP};${({ $position: e }) => aa[e]}opacity:0;transition:opacity 0.2s ease-in-out;pointer-events:none;${ct}:hover &,${ct}:focus-within &{opacity:1;}`, ca = c(S)`padding:6px 8px;background:${u.themedColor.textHighEmphasis};color:${u.themedColor.textHighEmphasisInverse};border-radius:4px;font-size:12px;white-space:nowrap;`, da = ({ submitted: e, value: t, onChange: n }) => {
2146
- const { stringSet: o } = M(), i = ia(), s = typeof t == "number";
2147
- return /* @__PURE__ */ r.createElement(ua, null, /* @__PURE__ */ r.createElement(S, { variant: "caption2", color: u.themedColor.textMidEmphasis }, o.CSAT_RATING_TITLE), /* @__PURE__ */ r.createElement(ma, null, i.map((a) => /* @__PURE__ */ r.createElement(Vn, { disabled: e, key: a.value, label: a.getTooltip(o) }, /* @__PURE__ */ r.createElement(
2148
- ga,
2149
- {
2150
- disabled: e,
2151
- onClick: () => n(a.value),
2152
- $inactive: s && !a.isActive(t)
2153
- },
2154
- s ? a.isActive(t) ? /* @__PURE__ */ r.createElement(a.Icon.Active, null) : /* @__PURE__ */ r.createElement(a.Icon.Inactive, null) : /* @__PURE__ */ r.createElement(a.Icon.Active, null)
2155
- )))));
2156
- }, ua = c.div`display:flex;flex-direction:column;gap:8px;`, ma = c.div`display:flex;justify-content:space-between;width:100%;max-width:320px;`, ga = c.button`background-color:transparent;border:none;border-radius:4px;padding:0;display:flex;align-items:center;justify-content:center;box-sizing:border-box;&:enabled:hover{cursor:pointer;background-color:${u.color.background200};${B.dark`
2157
- background-color: ${u.color.background500};
2158
- `}
2159
- }
2160
-
2161
- ${({ $inactive: e, theme: t }) => e && t.selectedTheme === "dark" && pa};
2162
- `, pa = k`[fill]{fill:white;fill-opacity:0.12;}[stroke]{stroke:white;stroke-opacity:0.12;}`, ha = ({ submitted: e, value: t = "", onChange: n }) => {
2163
- const { stringSet: o } = M();
2164
- return e && !t ? null : /* @__PURE__ */ r.createElement(
2165
- fa,
2166
- {
2167
- disabled: e,
2168
- maxLength: 255,
2169
- value: t,
2170
- onChange: (i) => n(i.target.value),
2171
- placeholder: o.CSAT_REASON_PLACEHOLDER
2172
- }
2173
- );
2174
- }, fa = c.input`box-sizing:border-box;width:100%;border-radius:4px;padding:10px 16px;font-size:14px;font-weight:400;font-style:normal;border:unset;&:focus{outline:none;}color:${u.themedColor.textHighEmphasis};&::placeholder{color:${u.themedColor.textLowEmphasis};}background-color:${u.color.background50};${B.dark`
2175
- background-color: ${u.themedColor.textDisabled};
2176
- `}
2177
-
2178
- &:disabled {
2179
- cursor: not-allowed;
2180
- color: ${u.themedColor.textLowEmphasis};
2181
- background-color: ${u.color.background200};
2182
- ${B.dark`
2183
- color: ${u.color.ondark.textDisabled};
2184
- background-color: ${u.themedColor.textDisabled};
2185
- `}
2186
- }
2187
- `, ba = ({ submitted: e }) => {
2188
- const { stringSet: t } = M();
2189
- return e ? /* @__PURE__ */ r.createElement(S, { variant: "h2", color: u.themedColor.textHighEmphasis }, t.CSAT_TITLE_SUBMITTED) : /* @__PURE__ */ r.createElement(S, { variant: "h2", color: u.themedColor.textHighEmphasis }, t.CSAT_TITLE_UNSUBMITTED);
2190
- };
2191
- var me = /* @__PURE__ */ ((e) => (e.AI_AGENT_CSAT_5 = "AI_AGENT_CSAT_5", e.AI_AGENT_CSAT_5_WITH_CRE = "AI_AGENT_CSAT_5_WITH_CRE", e))(me || {});
2192
- const xa = (e) => pr((t, n) => ({ ...t, ...n }), e), Yt = ({
2193
- type: e,
2194
- renderSubmitButton: t,
2195
- initialCsat: n,
2196
- initialCsatReason: o,
2197
- initialIsResolved: i
2198
- }) => {
2199
- const [s, a] = xa({
2200
- csatType: e,
2201
- csat: n,
2202
- csatReason: o,
2203
- isResolved: i
2204
- }), l = typeof n == "number" ? "submitted" : e === me.AI_AGENT_CSAT_5 && typeof s.csat == "number" || e === me.AI_AGENT_CSAT_5_WITH_CRE && typeof s.csat == "number" && typeof s.isResolved == "boolean" ? "submittable" : "unsubmittable", d = { state: l, submitted: l === "submitted" };
2205
- return /* @__PURE__ */ r.createElement(r.Fragment, null, /* @__PURE__ */ r.createElement(Ea, null, /* @__PURE__ */ r.createElement(ba, { ...d }), e === me.AI_AGENT_CSAT_5_WITH_CRE && /* @__PURE__ */ r.createElement(
2206
- Gs,
2207
- {
2208
- ...d,
2209
- defaultValue: i,
2210
- value: s.isResolved,
2211
- onChange: (g) => a({ isResolved: g })
2212
- }
2213
- ), /* @__PURE__ */ r.createElement(da, { ...d, value: s.csat, onChange: (g) => a({ csat: g }) }), s.csat && /* @__PURE__ */ r.createElement(
2214
- ha,
2215
- {
2216
- ...d,
2217
- value: s.csatReason,
2218
- onChange: (g) => a({ csatReason: g })
2219
- }
2220
- )), l !== "submitted" && t({ state: l, params: s }));
2221
- }, Ea = c.div`display:flex;flex-direction:column;gap:12px;`, va = () => {
2222
- const { stringSet: e } = M();
2223
- return /* @__PURE__ */ r.createElement(S, { variant: "body2", color: u.themedColor.textMidEmphasis, style: { textAlign: "center" } }, e.CSAT_SUBMISSION_EXPIRED);
2224
- }, ya = (e) => {
2225
- if (e.messageType !== "admin.csat")
2226
- throw new Error("Invalid message type");
2227
- const t = Or(), { stringSet: n } = M(), { extendedMessagePayload: o, csat: i, csatReason: s, csatExpireAt: a, isResolvedWhenDeterminedByUser: l, onSubmitCSAT: d } = e, { visibility: g, type: m } = (o == null ? void 0 : o.csat) ?? {};
2228
- if (!g || !m || !me[m]) return null;
2229
- const p = m === me.AI_AGENT_CSAT_5 || m === me.AI_AGENT_CSAT_5_WITH_CRE ? Yt : () => null, h = (b) => {
2230
- b.csat && !qt(a) ? d({
2231
- csatType: b.csatType,
2232
- csat: b.csat,
2233
- csatReason: b.csatReason,
2234
- isResolved: b.isResolved
2235
- }) : t();
2236
- };
2237
- return /* @__PURE__ */ r.createElement(Ca, null, !i && qt(a) ? /* @__PURE__ */ r.createElement(va, null) : /* @__PURE__ */ r.createElement(
2238
- p,
2239
- {
2240
- type: m,
2241
- initialCsat: i,
2242
- initialCsatReason: s,
2243
- initialIsResolved: l,
2244
- renderSubmitButton: ({ state: b, params: x }) => /* @__PURE__ */ r.createElement(Ta, { disabled: b !== "submittable", onClick: () => h(x) }, /* @__PURE__ */ r.createElement(S, { variant: "button" }, n.CSAT_SUBMIT_LABEL))
2245
- }
2246
- ));
2247
- }, Ca = c.div`display:flex;flex-direction:column;background-color:${({ theme: e }) => e.colors.csat.background};border-radius:16px;gap:16px;padding:24px;`, Ta = c.button`all:unset;background-color:${({ theme: e }) => e.colors.base.primary};color:${({ theme: e }) => e.colors.base.primaryContrastContent};border-radius:6px;padding:10px 20px;display:flex;align-items:center;justify-content:center;cursor:pointer;&:hover{background-color:${u.color.primary.dark};}&:disabled{color:${u.color.ondark.textLowEmphasis};background-color:${u.themedColor.textDisabled};cursor:not-allowed;}`;
2248
- function qt(e) {
2249
- return !!e && e < Date.now();
2250
- }
2251
- const St = Ce({
2252
- template: _a,
2253
- components: {
2254
- AdminMessage: zs,
2255
- CSATMessage: ya
2256
- }
2257
- });
2258
- function _a(e) {
2259
- const { components: t } = St.useContext(), n = Tt(() => e.messageType === "admin" ? /* @__PURE__ */ r.createElement(t.AdminMessage, { ...e }) : e.messageType === "admin.csat" ? /* @__PURE__ */ r.createElement(t.CSATMessage, { ...e }) : null);
2260
- return /* @__PURE__ */ r.createElement(Sa, { $marginBottom: xt(e.groupType) }, n);
2261
- }
2262
- const Sa = c.div`padding-inline:${Q}px;margin-bottom:${({ $marginBottom: e }) => e}px;`, Jt = {
2263
- file: "attach",
2264
- snippet: "snippet",
2265
- site: "website",
2266
- sb_sprinklr: "sprinklr",
2267
- sb_salesforce: "salesforce",
2268
- sb_confluence: "confluence",
2269
- sb_zendesk: "zendesk",
2270
- sb_desk: "snippet"
2271
- // TODO: request icon
2272
- }, wa = ({
2273
- actionbook: e,
2274
- functionCalls: t,
2275
- groundedness: n,
2276
- agentMessageTemplates: o,
2277
- onClickActionbook: i,
2278
- onClickFunctionCall: s,
2279
- onClickFunctionCallDetail: a,
2280
- onClickGroundedness: l,
2281
- onClickAgentMessageTemplate: d,
2282
- bottomContent: g,
2283
- renderCustomGroundednessIcon: m = (h) => h.default,
2284
- style: p = {}
2285
- }) => {
2286
- const {
2287
- // Note: This component is used with the dashboard, so cssVars should not be used.
2288
- iconColor: h = "#000000",
2289
- textColor: b = "#000000",
2290
- highlightColor: x = kn.DEFAULT_PRIMARY
2291
- } = p;
2292
- return /* @__PURE__ */ r.createElement(Xt, null, e && /* @__PURE__ */ r.createElement(Xt, null, /* @__PURE__ */ r.createElement(Ke, null, /* @__PURE__ */ r.createElement(Ue, null, /* @__PURE__ */ r.createElement($, { size: 16, type: "actionbook", color: h })), /* @__PURE__ */ r.createElement(
2293
- He,
2294
- {
2295
- $clickable: !!i,
2296
- $highlightColor: x,
2297
- variant: "body2",
2298
- color: b,
2299
- onClick: () => i == null ? void 0 : i(e)
2300
- },
2301
- e.name
2302
- ))), t == null ? void 0 : t.map((E) => /* @__PURE__ */ r.createElement(rt, { key: E.key }, /* @__PURE__ */ r.createElement(Ue, null, /* @__PURE__ */ r.createElement($, { size: 16, type: "function", color: h })), /* @__PURE__ */ r.createElement(Ke, null, /* @__PURE__ */ r.createElement(
2303
- He,
2304
- {
2305
- $clickable: !!i,
2306
- $highlightColor: x,
2307
- variant: "body2",
2308
- color: b,
2309
- onClick: () => s == null ? void 0 : s(E)
2310
- },
2311
- E.name
2312
- ), /* @__PURE__ */ r.createElement(Aa, { role: "button", onClick: () => a == null ? void 0 : a(E) }, /* @__PURE__ */ r.createElement(S, { variant: "body2", color: x }, "View details"), /* @__PURE__ */ r.createElement($, { type: "chevron-right", size: 16, color: x }))))), n == null ? void 0 : n.map((E) => /* @__PURE__ */ r.createElement(rt, { key: E.id }, /* @__PURE__ */ r.createElement(Ue, null, m({
2313
- default: /* @__PURE__ */ r.createElement($, { size: 16, type: Jt[E.source_type] ?? Jt.snippet, color: h }),
2314
- sourceType: E.source_type
2315
- })), /* @__PURE__ */ r.createElement(
2316
- He,
2317
- {
2318
- $clickable: !!l,
2319
- $highlightColor: x,
2320
- variant: "body2",
2321
- color: b,
2322
- onClick: () => l == null ? void 0 : l(E)
2323
- },
2324
- E.preview_title
2325
- ))), o == null ? void 0 : o.map((E) => /* @__PURE__ */ r.createElement(rt, { key: E.key }, /* @__PURE__ */ r.createElement(Ue, null, /* @__PURE__ */ r.createElement($, { size: 16, type: "template", color: h })), /* @__PURE__ */ r.createElement(
2326
- He,
2327
- {
2328
- $clickable: !!d,
2329
- $highlightColor: x,
2330
- variant: "body2",
2331
- color: b,
2332
- onClick: () => d == null ? void 0 : d(E)
2333
- },
2334
- E.name
2335
- ))), g);
2336
- }, ka = c(S)`font-weight:400;`, He = c(ka)`${({ $clickable: e, $highlightColor: t }) => e && k`
2337
- cursor: pointer;
2338
- text-decoration: underline;
2339
- &:hover {
2340
- color: ${t};
2341
- }
2342
- `}
2343
- `, Ue = c.div`display:flex;align-items:center;justify-content:center;flex-shrink:0;`, Ke = c.div`display:flex;gap:8px;align-items:center;`, Aa = c(Ke)`cursor:pointer;gap:4px;`, rt = c(Ke)`flex-direction:row;align-items:center;`, Xt = c.div`display:flex;gap:4px;flex-direction:column;align-items:flex-start;`, Gn = ye(
2344
- null
2345
- );
2346
- function Ia({
2347
- isDashboardActionbookTester: e = !1,
2348
- children: t
2349
- }) {
2350
- return /* @__PURE__ */ r.createElement(Gn.Provider, { value: { isDashboardActionbookTester: e } }, e && /* @__PURE__ */ r.createElement($a, null), t);
2351
- }
2352
- const wt = () => {
2353
- const e = J(Gn);
2354
- if (!e) throw new Error("_UNSAFE_INTERNAL_DashboardActionbookTesterProvider not found");
2355
- return e;
2356
- }, $a = () => /* @__PURE__ */ r.createElement(ve.Template, { template: Ma }, /* @__PURE__ */ r.createElement(ve.MessageLogs, { component: Oa })), Ma = (e) => /* @__PURE__ */ r.createElement(Un, { ...e, testerMode: !0, maxBodyWidth: Bn }), Oa = ({ extendedMessagePayload: e = {} }) => {
2357
- const { handlers: t } = N(), { manual: n, groundedness: o, function_calls: i, agent_message_templates: s, is_thinking: a } = e;
2358
- return a || !n && !(o != null && o.length) && !(i != null && i.length) && !(s != null && s.length) ? /* @__PURE__ */ r.createElement(r.Fragment, null) : /* @__PURE__ */ r.createElement(La, null, /* @__PURE__ */ r.createElement(Ra, { width: 4 }), /* @__PURE__ */ r.createElement(
2359
- wa,
2360
- {
2361
- actionbook: n,
2362
- functionCalls: i,
2363
- groundedness: o,
2364
- agentMessageTemplates: s,
2365
- onClickFunctionCallDetail: t == null ? void 0 : t.onFunctionCallDetailClick,
2366
- style: {
2367
- iconColor: u.themedColor.textHighEmphasis,
2368
- textColor: u.themedColor.textHighEmphasis,
2369
- barColor: u.themedColor.textDisabled
2370
- },
2371
- bottomContent: /* @__PURE__ */ r.createElement(Na, { variant: "caption2", color: u.themedColor.textLowEmphasis }, "Only visible in the tester")
2372
- }
2373
- ));
2374
- }, La = c.div`display:flex;gap:16px;margin:16px ${Q}px 0;align-self:stretch;`, Ra = c.div`width:${({ width: e }) => e}px;background-color:${u.themedColor.textDisabled};border-radius:100px;flex-shrink:0;`, Na = c(S)`margin-top:5px;`, kt = {
2375
- isStreaming(e) {
2376
- const t = Ut(e.data);
2377
- return typeof t == "object" ? !!t.stream : !1;
2378
- },
2379
- isWelcomeMessage(e, t) {
2380
- var n;
2381
- if (((n = e.extendedMessagePayload) == null ? void 0 : n.bot_message_type) === "welcome")
2382
- return !0;
2383
- if ((e.isUserMessage() || e.isFileMessage()) && e.sender.userId === t) {
2384
- const o = Ut(e.data);
2385
- return !(o != null && o.respond_mesg_id) && !(o != null && o.stream);
2386
- }
2387
- return !1;
2388
- }
2389
- };
2390
- function Da(e) {
2391
- return "sendingStatus" in e ? e.sendingStatus === "succeeded" ? String(e.messageId) : e.reqId : String(e.messageId);
2392
- }
2393
- const Ba = (e, t, n, o = !0) => {
2394
- if (!o || !e.isUserMessage() && !e.isFileMessage())
2395
- return "single";
2396
- const i = () => {
2397
- if (!t || !t.isUserMessage() && !t.isFileMessage()) return !1;
2398
- const d = t.sender.userId === e.sender.userId, g = Dt(t.createdAt, e.createdAt);
2399
- return d && g;
2400
- }, s = () => {
2401
- if (!n || !n.isUserMessage() && !n.isFileMessage()) return !1;
2402
- const d = n.sender.userId === e.sender.userId, g = Dt(n.createdAt, e.createdAt);
2403
- return d && g;
2404
- }, a = i(), l = s();
2405
- return a && l ? "middle" : a ? "bottom" : l ? "top" : "single";
2406
- };
2407
- function Pa(e, t) {
2408
- return e.filter((n) => kt.isWelcomeMessage(n, t));
2409
- }
2410
- function jn(e, t) {
2411
- return Fa(e) === t;
2412
- }
2413
- function Fa(e) {
2414
- var t;
2415
- if (e)
2416
- return e.isUserMessage() || e.isFileMessage() || e.isMultipleFilesMessage() ? e.sender.userId : ((t = e == null ? void 0 : e.sender) == null ? void 0 : t.userId) ?? void 0;
2417
- }
2418
- function Ha(e) {
2419
- return e.isAdminMessage() ? e.message === "The channel's custom_type was updated." : !1;
2420
- }
2421
- const Qt = (e) => !!e && "sender" in e, Kn = (e) => e.startsWith("image/"), Zn = (e) => e.startsWith("video/"), en = (e) => Kn(e) || Zn(e), ze = {
2422
- isAdmin: (e) => e.isAdminMessage(),
2423
- isCSAT: (e) => {
2424
- var t;
2425
- return e.isAdminMessage() && !!((t = e.extendedMessagePayload) != null && t.csat);
2426
- },
2427
- isIncoming: (e, t) => Qt(e) && e.sender.userId !== t,
2428
- isOutgoing: (e, t) => Qt(e) && (e.sender.userId === t || e.sendingStatus === Nr.PENDING)
2429
- }, Yn = ({ rootElementId: e, visible: t, onClose: n, children: o }) => {
2430
- if (!t) return null;
2431
- const { rootElement: i } = N(), s = pe(i), a = pe(i, !0);
2432
- return Ur(
2433
- /* @__PURE__ */ r.createElement(Ua, { onClick: n }, /* @__PURE__ */ r.createElement(za, { onClick: (l) => l.stopPropagation() }, o)),
2434
- s.getElementById(e) ?? s.getElementById(X.MODAL_ROOT) ?? a.body
2435
- );
2436
- }, Ua = c.div`position:fixed;top:0;left:0;width:100%;height:100%;background:${u.color.overlay.dark};display:flex;justify-content:center;align-items:center;z-index:${he.MODAL};`, za = c.div`border-radius:4px;overflow:hidden;box-shadow:0 16px 24px 2px rgba(13,13,13,0.12),0 6px 30px 5px rgba(13,13,13,0.08),0 6px 10px -5px rgba(13,13,13,0.04);z-index:${he.MODAL};`, Wa = c.div`flex-shrink:0;width:${({ $size: e }) => se(e)};height:${({ $size: e }) => se(e)};background-color:${({ theme: e }) => e.colors.base.primary};box-sizing:border-box;padding:6px;border-radius:50%;display:flex;justify-content:center;align-items:center;}`, Va = c(yt)`path{fill:${({ theme: e }) => e.colors.base.primaryContrastContent};}`;
2437
- function qn({ size: e }) {
2438
- const { aiAgentInfo: t } = F();
2439
- return t.profileUrl ? /* @__PURE__ */ r.createElement(Ct, { size: e, src: t.profileUrl }) : /* @__PURE__ */ r.createElement(Wa, { $size: e }, /* @__PURE__ */ r.createElement(Va, null));
2440
- }
2441
- const Ga = c.div`width:100%;height:100%;position:fixed;top:0;left:0;outline:none;`, ja = c.div`height:64px;min-height:64px;box-sizing:border-box;display:flex;justify-content:space-between;border-bottom:1px solid ${u.themedColor.textDisabled};background-color:${u.themedColor.bg_50_600};@media screen and (max-width:768px){position:relative;}`, Ka = c.div`box-sizing:border-box;display:flex;flex-direction:row;align-items:center;height:64px;padding:16px 20px;width:calc(100% - 128px);`, Za = c.div`margin-inline-end:8px;`, Ya = c.div`max-width:500px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:inline-block;@media screen and (max-width:768px){position:absolute;inset-inline-start:64px;top:10px;display:block;max-width:calc(100vw - 240px);}`, qa = c.div`display:inline-block;margin-inline-start:8px;padding-top:5px;@media screen and (max-width:768px){position:absolute;inset-inline-start:56px;top:24px;}`, Ja = c.div`display:flex;width:160px;justify-content:flex-end;`, Xa = c.div`inset-inline-end:0;display:flex;flex-direction:row;`, dt = c.div`width:64px;padding:21px;box-sizing:border-box;cursor:${(e) => e.disabled ? "not-allowed" : "pointer"};`, Qa = c(dt)`border-inline-start:1px solid ${u.themedColor.textDisabled};`, el = c.div`width:100%;height:100%;display:flex;align-items:center;justify-content:center;`, tl = c.video`max-width:100%;max-height:100%;user-select:none;-webkit-user-drag:none;`, nl = c.img`max-width:90%;max-height:90%;user-select:none;-webkit-user-drag:none;`, rl = c.div`max-width:100%;max-height:100%;display:flex;justify-content:center;align-items:center;`, ol = ({ message: e, onClose: t, onDownloadClick: n }) => {
2442
- const { sender: o, type: i, url: s, name: a = "", threadInfo: l } = e, { profileUrl: d, nickname: g, userId: m } = o, { userSession: p, aiAgentInfo: h } = F();
2443
- return /* @__PURE__ */ r.createElement(
2444
- sl,
2445
- {
2446
- profileUrl: d,
2447
- nickname: g,
2448
- type: i,
2449
- url: s,
2450
- name: a,
2451
- onClose: t,
2452
- isBotMessage: m === h.userId,
2453
- isByMe: p.userId === m,
2454
- disableDelete: l != null && l.replyCount ? l.replyCount > 0 : !1,
2455
- onDownloadClick: n
2456
- }
2457
- );
2458
- }, il = ({ profileUrl: e, isBotMessage: t }) => !e && t ? /* @__PURE__ */ r.createElement(qn, { size: 32 }) : /* @__PURE__ */ r.createElement(Ct, { size: 32, src: e }), sl = ({
2459
- profileUrl: e,
2460
- isBotMessage: t,
2461
- nickname: n,
2462
- name: o,
2463
- type: i,
2464
- url: s,
2465
- isByMe: a,
2466
- onClose: l,
2467
- onDelete: d,
2468
- disableDelete: g,
2469
- onDownloadClick: m
2470
- }) => {
2471
- const { stringSet: p } = M();
2472
- return /* @__PURE__ */ r.createElement(Yn, { onClose: l, visible: !0, rootElementId: X.MODAL_ROOT }, /* @__PURE__ */ r.createElement(Ga, null, /* @__PURE__ */ r.createElement(ja, null, /* @__PURE__ */ r.createElement(Ka, null, /* @__PURE__ */ r.createElement(Za, null, /* @__PURE__ */ r.createElement(il, { profileUrl: e, isBotMessage: t })), /* @__PURE__ */ r.createElement(Ya, null, /* @__PURE__ */ r.createElement(S, { variant: "h2", color: u.themedColor.textHighEmphasis }, o)), /* @__PURE__ */ r.createElement(qa, null, /* @__PURE__ */ r.createElement(S, { variant: "body1", color: u.color.ondark.textMidEmphasis }, n))), /* @__PURE__ */ r.createElement(Ja, null, en(i) && /* @__PURE__ */ r.createElement(Xa, null, /* @__PURE__ */ r.createElement(dt, { as: "a", href: s, target: "_blank", rel: ft, onClick: m }, /* @__PURE__ */ r.createElement($, { type: "download", color: u.themedColor.textHighEmphasis, size: 24 })), d && a && /* @__PURE__ */ r.createElement(
2473
- dt,
2474
- {
2475
- disabled: g,
2476
- onClick: () => {
2477
- g || d();
2478
- }
2479
- },
2480
- /* @__PURE__ */ r.createElement(
2481
- $,
2482
- {
2483
- type: "delete",
2484
- color: g ? "gray" : u.themedColor.textHighEmphasis,
2485
- size: 24
2486
- }
2487
- )
2488
- )), /* @__PURE__ */ r.createElement(Qa, { onClick: l }, /* @__PURE__ */ r.createElement($, { type: "close", color: u.themedColor.textHighEmphasis, size: 24 })))), /* @__PURE__ */ r.createElement(el, { onClick: (h) => h.currentTarget === h.target && l() }, Zn(i) && /* @__PURE__ */ r.createElement(tl, { controls: !0 }, /* @__PURE__ */ r.createElement("source", { src: s, type: i })), Kn(i) && /* @__PURE__ */ r.createElement(nl, { src: s, alt: o }), !en(i) && /* @__PURE__ */ r.createElement(rl, null, /* @__PURE__ */ r.createElement(S, { variant: "h1", color: u.themedColor.textHighEmphasis }, p.FILE_VIEWER__UNSUPPORT)))));
2489
- }, Jn = ({
2490
- className: e,
2491
- locale: t,
2492
- date: n = Date.now(),
2493
- formatString: o = "MMMM dd, yyyy",
2494
- style: i
2495
- }) => /* @__PURE__ */ r.createElement(al, { style: i, className: e }, /* @__PURE__ */ r.createElement(S, { variant: "caption4", color: u.themedColor.textMidEmphasis }, hn(n, o, { locale: t }))), al = c.div`display:flex;justify-content:center;align-items:center;`, ll = hr(function(t, n) {
2496
- const {
2497
- messages: o,
2498
- renderMessage: i,
2499
- messageTopArea: s,
2500
- messageBottomArea: a,
2501
- overlayArea: l,
2502
- onLoadPrev: d,
2503
- onLoadNext: g,
2504
- loadThreshold: m = 0.05,
2505
- onScrollPosition: p = Ge,
2506
- depsForResetScrollPositionToBottom: h,
2507
- scrollPositionRef: b,
2508
- scrollDistanceFromBottomRef: x,
2509
- stackDirection: E = "top"
2510
- } = t, f = n && "current" in n ? n : { current: null }, y = D(!1), _ = D(void 0), w = D(0), O = D(0), ee = D(0), U = b ?? O, le = x ?? ee;
2511
- ge(() => {
2512
- f.current && (f.current.scrollTop = f.current.scrollHeight);
2513
- }, h), ge(() => {
2514
- f.current && (_.current === "top" && (f.current.scrollTop = f.current.scrollHeight - U.current), _.current === "bottom" && (f.current.scrollTop = w.current), _.current = void 0);
2515
- }, [f.current, o.length]);
2516
- const _e = async () => {
2517
- if (!f.current) return;
2518
- const v = f.current;
2519
- if (p(cl(v)), U.current = v.scrollHeight - v.scrollTop, le.current = U.current - v.clientHeight, w.current = v.scrollTop, y.current) return;
2520
- const H = v.clientHeight * Math.min(Math.max(0, m), 1);
2521
- v.scrollTop <= H ? (y.current = !0, _.current = "top", await d(), y.current = !1) : v.scrollHeight - v.scrollTop - v.clientHeight <= H ? (y.current = !0, _.current = "bottom", await g(), y.current = !1) : _.current = void 0;
2522
- };
2523
- return /* @__PURE__ */ r.createElement(dl, { id: "infinite-list-container" }, /* @__PURE__ */ r.createElement(ul, { id: "infinite-list-inner", ref: f, onScroll: _e }, E === "bottom" && /* @__PURE__ */ r.createElement("div", { style: { flexGrow: 1 } }), s, o.map((v, H) => i({ message: v, index: H })), a), /* @__PURE__ */ r.createElement(ml, { id: "infinite-list-overlay-container" }, /* @__PURE__ */ r.createElement(gl, { id: "infinite-list-overlay" }, l)));
2524
- });
2525
- function cl(e) {
2526
- return e.scrollTop <= 10 ? "top" : e.scrollHeight - (e.scrollTop + e.clientHeight) <= 10 ? "bottom" : "middle";
2527
- }
2528
- const dl = c.div`display:flex;position:relative;flex:1;overflow:hidden;`, ul = c.div`display:flex;flex:1;flex-direction:column;overflow-y:auto;scrollbar-color:${u.themedColor.textLowEmphasis}transparent;&::-webkit-scrollbar-thumb:hover{background-color:transparent;}`, ml = c.div`position:absolute;top:0;bottom:0;left:0;right:0;pointer-events:none;`, gl = c.div`pointer-events:auto;`, pl = ({ className: e, onClick: t }) => /* @__PURE__ */ r.createElement(hl, { className: e, onClick: t, tabIndex: 0 }, /* @__PURE__ */ r.createElement($, { size: 24, type: "chevron-down", color: u.color.primary.main })), hl = c.button`all:unset;cursor:pointer;display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:24px;box-shadow:0 2px 8px 0 rgba(0,0,0,0.08),0 4px 6px 0 rgba(0,0,0,0.12);${B.light`
2529
- background-color: ${u.color.background50};
2530
- &:hover {
2531
- background-color: ${u.color.background100};
2532
- }
2533
- &:active {
2534
- background-color: ${u.color.background200};
2535
- }
2536
- `}
2537
- ${B.dark`
2538
- background-color: ${u.color.background400};
2539
- &:hover {
2540
- background-color: ${u.color.background500};
2541
- }
2542
- &:active {
2543
- background-color: ${u.color.background700};
2544
- }
2545
- `}
2546
-
2547
- &:focus {
2548
- outline: none;
2549
- }
2550
- `, Xn = () => {
2551
- const { chatSDK: e } = N(), { channelSource: t } = G(), [n, o] = T([]);
2552
- return fn(e, {
2553
- onTypingStatusUpdated(i) {
2554
- var s;
2555
- if (i.url === ((s = t.channel) == null ? void 0 : s.url)) {
2556
- const a = i.getTypingUsers();
2557
- o(a);
2558
- }
2559
- }
2560
- }), n;
2561
- }, fl = () => {
2562
- const { agentPreviewConfigs: e = {}, aiAgentId: t } = N(), { aiAgentInfo: n } = F(), { stringSet: o, dateLocale: i } = M(), { messageSource: s } = G(), { Template: a } = ve.useContext(), l = e.welcomeMessages ?? [], d = s.messages, g = Pa(d, t), m = d[g.length + 1], p = g[0] ?? m;
2563
- return {
2564
- /**
2565
- * Returns a list of messages filtered according to business requirements.
2566
- */
2567
- filteredMessages: d.filter((h) => Ha(h) ? !1 : l.length > 0 ? !kt.isWelcomeMessage(h, t) : !0),
2568
- /**
2569
- * Determines whether to display the DateSeparator in the data list by comparing it with the welcome messages from Bot Studio.
2570
- */
2571
- shouldShowOriginalDate: (h) => h > 0 || l.length === 0 ? !0 : m && !wr(m.createdAt, (p == null ? void 0 : p.createdAt) ?? 0),
2572
- /**
2573
- * Renders the list of welcome messages from Bot Studio.
2574
- */
2575
- renderAgentPreviewWelcomeMessages: () => l.length === 0 ? null : /* @__PURE__ */ r.createElement(r.Fragment, null, /* @__PURE__ */ r.createElement(
2576
- Jn,
2577
- {
2578
- style: { margin: "16px 0" },
2579
- date: p == null ? void 0 : p.createdAt,
2580
- locale: i,
2581
- formatString: o.DATE_FORMAT__MESSAGE_LIST__DATE_SEPARATOR
2582
- }
2583
- ), l.map((h, b) => {
2584
- const x = b === l.length - 1, E = g.length !== d.length, f = l.length === 1 ? "single" : b === 0 ? "top" : x || E ? "bottom" : "middle";
2585
- return /* @__PURE__ */ r.createElement(
2586
- a,
2587
- {
2588
- messageType: "user",
2589
- message: h.message,
2590
- sender: n,
2591
- groupType: f,
2592
- createdAt: (p == null ? void 0 : p.createdAt) ?? Date.now(),
2593
- extendedMessagePayload: { suggested_replies: h.suggestedReplies },
2594
- suggestedRepliesDirection: e.suggestedRepliesDirection,
2595
- suggestedRepliesVisible: x && !E,
2596
- isBotMessage: !0,
2597
- onClickSuggestedReply: async ({ reply: y }) => {
2598
- s.sendUserMessage({ message: y });
2599
- }
2600
- }
2601
- );
2602
- }))
2603
- };
2604
- }, bl = (e) => c(e).withConfig({ shouldForwardProp: zr });
2605
- function xl(e) {
2606
- var o;
2607
- const t = "remove_powered_by", n = (o = e == null ? void 0 : e.appInfo) == null ? void 0 : o.applicationAttributes;
2608
- return Array.isArray(n) && n.includes(t);
2609
- }
2610
- const El = ({ style: e }) => {
2611
- const { stringSet: t } = M(), { chatSDK: n } = N(), { isDashboardActionbookTester: o } = wt();
2612
- return xl(n) || o ? null : /* @__PURE__ */ r.createElement(vl, { variant: "caption2", style: e }, t.POWERED_BY + " ", /* @__PURE__ */ r.createElement(
2613
- yl,
2614
- {
2615
- variant: "caption2",
2616
- as: "a",
2617
- href: "https://sendbird.com?utm_medium=product&utm_source=aiagent&utm_campaign=fy26-glbl-ai-agent-poweredby",
2618
- "aria-label": "Learn more about Sendbird",
2619
- rel: ft,
2620
- target: "_blank"
2621
- },
2622
- "Sendbird"
2623
- ));
2624
- }, vl = c(S)`color:${u.themedColor.textLowEmphasis};text-align:center;`, yl = bl(S)`
2625
- color: ${u.themedColor.textLowEmphasis};
2626
- cursor: pointer;
2627
- text-decoration: none;
2628
- `, Cl = () => {
2629
- var d;
2630
- const { stringSet: e } = M(), { activeChannel: t } = F(), { channelSource: n, goToActiveConversation: o, scrollSource: i } = G(), s = Rn(n.channel), l = t && ((d = n.channel) == null ? void 0 : d.url) === (t == null ? void 0 : t.url) && s;
2631
- return ge(() => {
2632
- l && i.scrollPubSub.publish({ type: "scrollToBottom", data: { animated: !0 } });
2633
- }, [l]), l ? /* @__PURE__ */ r.createElement(Tl, null, /* @__PURE__ */ r.createElement(
2634
- _l,
2635
- {
2636
- variant: "button",
2637
- role: "button",
2638
- color: u.themedColor.textHighEmphasis,
2639
- onClick: () => o()
2640
- },
2641
- e.START_NEW_CONVERSATION
2642
- )) : null;
2643
- }, Tl = c.div`display:flex;justify-content:center;margin:16px 0;`, _l = c(S)`border-radius:6px;box-sizing:border-box;padding:10px 20px;border:1px solid ${u.themedColor.textDisabled};cursor:pointer;user-select:none;`, Sl = !0, wl = () => {
2644
- const { Template: e } = _t.useContext(), { Template: t } = ve.useContext(), { Template: n } = St.useContext(), [o, i] = T(null), { userSession: s, aiAgentInfo: a } = F(), { agentPreviewConfigs: l, chatSDK: d, state: g } = N(), { stringSet: m, dateLocale: p } = M(), { conversation: h, channelSource: b, messageSource: x, scrollSource: E } = G(), { isDashboardActionbookTester: f } = wt(), { filteredMessages: y, shouldShowOriginalDate: _, renderAgentPreviewWelcomeMessages: w } = fl(), { storage: O } = _n(), ee = Xn(), U = Tt(() => {
2645
- const v = ee[0];
2646
- if (!v) return null;
2647
- const H = v.userId === a.userId;
2648
- return { user: H ? a : v, isBot: H };
2649
- });
2650
- R(() => {
2651
- U && setTimeout(() => E.scrollPubSub.publish({ type: "scrollToBottom", data: { animated: !0 } }), 25);
2652
- }, [!!U, E]);
2653
- const le = (v, H = !1) => {
2654
- var te;
2655
- return H ? a : ((te = b.channel) == null ? void 0 : te.members.find((j) => j.userId === v.sender.userId)) ?? v.sender;
2656
- }, _e = () => {
2657
- if (!x.initialized)
2658
- return /* @__PURE__ */ r.createElement(Ee, { type: "loading" });
2659
- if (x.messages.length === 0) {
2660
- const v = w();
2661
- return v ? /* @__PURE__ */ r.createElement("div", { style: { width: "100%" } }, v) : /* @__PURE__ */ r.createElement(Ee, { type: "noMessages", label: m.PLACE_HOLDER__NO_MESSAGES });
2662
- }
2663
- return /* @__PURE__ */ r.createElement(
2664
- ll,
2665
- {
2666
- ref: E.scrollRef,
2667
- scrollPositionRef: E.scrollPositionRef,
2668
- scrollDistanceFromBottomRef: E.scrollDistanceFromBottomRef,
2669
- onScrollPosition: (v) => E.setIsScrollBottomReached(v === "bottom"),
2670
- stackDirection: l == null ? void 0 : l.messageStackDirection,
2671
- messages: y,
2672
- onLoadPrev: x.loadPrevious,
2673
- onLoadNext: x.loadNext,
2674
- depsForResetScrollPositionToBottom: [x.initialized, x.messages.length !== 0],
2675
- messageTopArea: /* @__PURE__ */ r.createElement(r.Fragment, null, /* @__PURE__ */ r.createElement(El, { style: { marginTop: 16 } }), w()),
2676
- messageBottomArea: /* @__PURE__ */ r.createElement(r.Fragment, null, U && /* @__PURE__ */ r.createElement(
2677
- t,
2678
- {
2679
- isTyping: !0,
2680
- isBotMessage: U.isBot,
2681
- sender: U.user,
2682
- messageType: "user",
2683
- groupType: "single",
2684
- message: ""
2685
- }
2686
- ), /* @__PURE__ */ r.createElement(Cl, null)),
2687
- overlayArea: /* @__PURE__ */ r.createElement(r.Fragment, null, !E.isScrollBottomReached && /* @__PURE__ */ r.createElement(Al, { onClick: () => E.scrollPubSub.publish({ type: "scrollToBottom" }) })),
2688
- renderMessage: ({ message: v, index: H }) => {
2689
- const te = Da(v), j = y[H - 1], Xe = y[H + 1], I = y[y.length - 1], A = v === I, L = Ba(v, j, Xe, Sl), K = !Dr((j == null ? void 0 : j.createdAt) ?? 0, v.createdAt) && _(H) && !f, fe = () => {
2690
- v.isFileMessage() && i(v);
2691
- }, Se = () => {
2692
- v.isFileMessage() && Ln(v.url);
2693
- }, Z = K ? /* @__PURE__ */ r.createElement(
2694
- Jn,
2695
- {
2696
- style: { margin: "16px 0" },
2697
- date: v.createdAt,
2698
- locale: p,
2699
- formatString: m.DATE_FORMAT__MESSAGE_LIST__DATE_SEPARATOR
2700
- }
2701
- ) : null, ne = {
2702
- maxBodyWidth: g.expanded ? Bn : void 0,
2703
- extendedMessagePayload: v.extendedMessagePayload,
2704
- createdAt: v.createdAt,
2705
- groupType: L,
2706
- onClickMedia: fe,
2707
- onClickFile: Se
2708
- }, we = (() => {
2709
- var ce, Ot;
2710
- if (ze.isAdmin(v))
2711
- return ze.isCSAT(v) ? h ? /* @__PURE__ */ r.createElement(
2712
- n,
2713
- {
2714
- ...ne,
2715
- ...h,
2716
- isResolvedWhenDeterminedByUser: Il(h),
2717
- messageType: "admin.csat",
2718
- onSubmitCSAT: ({ csat: re, csatType: de, csatReason: V, isResolved: be }) => {
2719
- var Lt;
2720
- re && ((Lt = b.channel) == null || Lt.submitCSAT({ csat: re, csatType: de, csatReason: V, isResolved: be }));
2721
- }
2722
- }
2723
- ) : null : /* @__PURE__ */ r.createElement(n, { ...ne, messageType: "admin", message: v.message });
2724
- if (ze.isOutgoing(v, s.userId)) {
2725
- const re = {
2726
- ...ne,
2727
- message: v.message,
2728
- sender: le(v),
2729
- sendingStatus: v.sendingStatus
2730
- };
2731
- if (v.isUserMessage())
2732
- return /* @__PURE__ */ r.createElement(e, { messageType: "user", ...re });
2733
- if (v.isFileMessage()) {
2734
- const [de, V] = ((ce = v.metaArrays.find((be) => be.key === On)) == null ? void 0 : ce.value) ?? [];
2735
- return /* @__PURE__ */ r.createElement(
2736
- e,
2737
- {
2738
- messageType: "file",
2739
- file: v,
2740
- metadata: {
2741
- aspectRatio: de && V ? `${de}/${V}` : "1/1",
2742
- localFile: (Ot = v.messageParams) == null ? void 0 : Ot.file
2743
- },
2744
- ...re
2745
- }
2746
- );
2747
- }
2748
- }
2749
- if (ze.isIncoming(v, s.userId)) {
2750
- const re = v.sender.userId === a.userId, de = {
2751
- ...ne,
2752
- sender: le(v, re),
2753
- message: v.message,
2754
- suggestedRepliesVisible: A,
2755
- suggestedRepliesDirection: l == null ? void 0 : l.suggestedRepliesDirection,
2756
- isBotMessage: re,
2757
- onClickSuggestedReply: async ({ reply: V }) => {
2758
- x.sendUserMessage({ message: V });
2759
- },
2760
- onRequestMessageTemplate: async (V) => {
2761
- const { template: be } = await d.aiAgent.getMessageTemplate(V);
2762
- return O.setTemplate(V, be), be;
2763
- },
2764
- onGetCachedMessageTemplate: (V) => O.getTemplate(V)
2765
- };
2766
- if (v.isUserMessage())
2767
- return /* @__PURE__ */ r.createElement(t, { messageType: "user", ...de });
2768
- if (v.isFileMessage())
2769
- return /* @__PURE__ */ r.createElement(t, { messageType: "file", file: v, ...de });
2770
- }
2771
- })();
2772
- return /* @__PURE__ */ r.createElement("div", { key: te, id: `${Y}-message-item` }, Z, we);
2773
- }
2774
- }
2775
- );
2776
- };
2777
- return /* @__PURE__ */ r.createElement(kl, { id: `${Y}-message-list` }, _e(), o && /* @__PURE__ */ r.createElement(ol, { onClose: () => i(null), message: o }));
2778
- }, kl = c.div`overflow-y:hidden;display:flex;flex:1;position:relative;`, Al = c(pl)`position:absolute;bottom:20px;inset-inline-end:20px;`;
2779
- function Il(e) {
2780
- var t;
2781
- if (((t = e == null ? void 0 : e.resolution) == null ? void 0 : t.determinedBy) === "user")
2782
- return e.resolution.isResolved;
2783
- }
2784
- const $l = () => {
2785
- const { stringSet: e } = M(), { connectionError: t } = F(), { channelSource: n } = G(), o = t || n.error;
2786
- if (o) {
2787
- const i = t ? void 0 : { label: e.RETRY, onClick: () => n.refetch() };
2788
- return /* @__PURE__ */ r.createElement(Ee, { type: "error", label: o.message, action: i });
2789
- }
2790
- return n.channel ? /* @__PURE__ */ r.createElement(wl, null) : /* @__PURE__ */ r.createElement(Ee, { type: "loading" });
2791
- }, Qn = () => {
2792
- const { stringSet: e } = M(), { activeChannel: t } = F(), [n] = T(() => (t == null ? void 0 : t.status) === z.OPEN);
2793
- return n ? e.RETURN_TO_CONVERSATION : e.START_NEW_CONVERSATION;
2794
- }, Ml = () => {
2795
- const { stringSet: e } = M(), { goToActiveConversation: t } = G(), n = Qn();
2796
- return /* @__PURE__ */ r.createElement(Ol, null, /* @__PURE__ */ r.createElement(S, { variant: "body1", color: u.themedColor.textMidEmphasis }, e.CONVERSATION_CLOSED_FOOTER_LABEL), /* @__PURE__ */ r.createElement(Ll, { onClick: t }, /* @__PURE__ */ r.createElement(S, { variant: "button", color: u.themedColor.textHighEmphasis }, n)));
2797
- }, Ol = c.div`display:flex;flex-direction:column;align-items:center;justify-content:center;padding:32px 0;gap:14px;${B.light`
2798
- background-color: ${u.color.background100};
2799
- `}
2800
- ${B.dark`
2801
- background-color: ${u.color.background500};
2802
- `}
2803
- `, Ll = c.button`all:unset;padding:10px 20px;border-radius:6px;border:1px solid ${u.themedColor.textDisabled};cursor:pointer;${B.light`
2804
- background-color: ${u.color.background50};
2805
- `}
2806
- ${B.dark`
2807
- background-color: ${u.color.background700};
2808
- `}
2809
- `, er = ye(void 0), Rl = ({ children: e }) => {
2810
- const { stringSet: t } = M(), { aiAgentInfo: n } = F(), { channelSource: o } = G(), [i, s] = T([]), [a, l] = T({
2811
- visible: !1,
2812
- title: "",
2813
- buttonText: t.BUTTON__OK
2814
- }), d = (n == null ? void 0 : n.replyToFile) || Dn(o.channel), g = (h) => {
2815
- if (!d) return;
2816
- const b = h.filter((x) => In.includes(x.type));
2817
- if (b.length !== 0) {
2818
- if (b.some((x) => x.size > ti)) {
2819
- l((x) => ({
2820
- ...x,
2821
- visible: !0,
2822
- title: t.FILE_UPLOAD_NOTIFICATION__SIZE_LIMIT.replace("%d", "25")
2823
- }));
2824
- return;
2825
- }
2826
- if (b.length > 1 || b.length > 0 && i.length > 0) {
2827
- l((x) => ({
2828
- ...x,
2829
- visible: !0,
2830
- title: t.FILE_UPLOAD_NOTIFICATION__COUNT_LIMIT
2831
- }));
2832
- return;
2833
- }
2834
- s((x) => [
2835
- ...x,
2836
- ...b.map((E) => ({
2837
- file: E,
2838
- preview: { url: URL.createObjectURL(E), type: E.type, name: E.name }
2839
- }))
2840
- ]);
2841
- }
2842
- }, m = (h) => {
2843
- s((b) => {
2844
- var E;
2845
- const x = (E = b[h]) == null ? void 0 : E.preview;
2846
- return x && URL.revokeObjectURL(x.url), b.filter((f, y) => y !== h);
2847
- });
2848
- }, p = () => {
2849
- s((h) => (h.forEach((b) => URL.revokeObjectURL(b.preview.url)), []));
2850
- };
2851
- return /* @__PURE__ */ r.createElement(
2852
- er.Provider,
2853
- {
2854
- value: {
2855
- files: i,
2856
- addFiles: g,
2857
- removeFile: m,
2858
- clearFiles: p,
2859
- isFileUploadEnabled: d
2860
- }
2861
- },
2862
- e,
2863
- /* @__PURE__ */ r.createElement(Nl, { ...a, onClose: () => l((h) => ({ ...h, visible: !1, title: "" })) })
2864
- );
2865
- }, At = () => {
2866
- const e = J(er);
2867
- if (!e)
2868
- throw new Error("useFileUpload must be used within FileUploadProvider");
2869
- return e;
2870
- }, Nl = ({
2871
- title: e,
2872
- buttonText: t,
2873
- visible: n,
2874
- onClose: o
2875
- }) => /* @__PURE__ */ r.createElement(Yn, { rootElementId: X.WINDOW, visible: n, onClose: o }, /* @__PURE__ */ r.createElement(Dl, null, /* @__PURE__ */ r.createElement(Pl, null, /* @__PURE__ */ r.createElement(S, { variant: "h1", color: u.themedColor.textHighEmphasis }, e)), /* @__PURE__ */ r.createElement(Bl, null, /* @__PURE__ */ r.createElement(Fl, { onClick: o }, /* @__PURE__ */ r.createElement(S, { variant: "button", color: u.themedColor.textHighEmphasisInverse }, t))))), Dl = c.div`width:100%;height:auto;padding-block:18px 24px;padding-inline:24px;margin:0 auto;border-radius:4px;box-sizing:border-box;background-color:${({ theme: e }) => e.colors.base.modalContentBackground};`, Bl = c.div`display:flex;flex-direction:row;justify-content:flex-end;`, Pl = c.div`margin-bottom:16px;`, Fl = c.button`display:flex;justify-content:center;align-items:center;border-radius:4px;cursor:pointer;background-color:${u.themedColor.error};border:1px solid ${u.themedColor.error};padding:10px 16px;&:hover{background-color:${u.color.error.dark};border-color:${u.color.error.dark};}&:active{background-color:${u.color.error.extraDark};}`;
2876
- function Hl({ blurred: e, elementRef: t, document: n = window.document }) {
2877
- const o = D(!1);
2878
- e && t.current && n.activeElement === t.current && (o.current = !0), ge(() => {
2879
- var i;
2880
- !e && o.current && ((i = t.current) == null || i.focus(), o.current = !1);
2881
- }, [e]);
2882
- }
2883
- const Ul = c.div`&::-webkit-scrollbar{display:none;}overflow-x:auto;display:flex;flex-direction:row;gap:10px;padding:8px 16px;background-color:transparent;`, zl = c.div`display:flex;flex-shrink:0;position:relative;margin-block-start:8px;border-radius:12px;height:64px;img{border-radius:12px;object-fit:cover;width:64px;-webkit-user-drag:none;}`, Wl = c.div`display:flex;align-items:center;justify-content:center;position:absolute;inset-inline-end:-8px;inset-block-start:-8px;cursor:pointer;border-radius:50%;${B.light`
2884
- background-color: ${u.color.background50};
2885
- `}
2886
- ${B.dark`
2887
- background-color: ${u.color.background500};
2888
- `}
2889
- path {
2890
- fill: ${u.themedColor.textMidEmphasis};
2891
- }
2892
-
2893
- &:hover {
2894
- path {
2895
- fill: ${u.themedColor.textHighEmphasis};
2896
- }
2897
- }
2898
-
2899
- circle {
2900
- stroke: ${u.themedColor.bg_50_600};
2901
- }
2902
- `, Vl = () => {
2903
- const e = Le(), [t, n] = T(), { files: o, removeFile: i, isFileUploadEnabled: s } = At();
2904
- return !s || o.length === 0 ? null : /* @__PURE__ */ r.createElement(Ul, null, o.map(({ preview: { type: a, name: l, url: d } }, g) => /* @__PURE__ */ r.createElement(zl, { key: d, onMouseOver: () => n(g), onMouseLeave: () => n(void 0) }, (e || t === g) && /* @__PURE__ */ r.createElement(Wl, { title: "Remove file", onClick: () => i(g) }, /* @__PURE__ */ r.createElement($, { type: "close-filled", color: u.themedColor.textMidEmphasis })), a.startsWith("image/") ? /* @__PURE__ */ r.createElement("img", { alt: "file-image", src: d }) : /* @__PURE__ */ r.createElement(vt, { name: l, type: Et(l, a) }))));
2905
- }, Gl = ({ channel: e, messages: t }) => {
2906
- const { stringSet: n } = M(), { aiAgentInfo: o } = F(), i = jl(), s = Kl({
2907
- lastMessage: t[t.length - 1],
2908
- aiAgentUserId: o.userId
2909
- });
2910
- return !e || !i || Rn(e) ? [!0, n.MESSAGE_INPUT__PLACE_HOLDER__DISABLED] : s ? [!0, n.MESSAGE_INPUT__PLACE_HOLDER__WAIT_AI_AGENT_RESPONSE] : [!1, n.MESSAGE_INPUT__PLACE_HOLDER];
2911
- }, jl = () => {
2912
- const e = mn(), { chatSDK: t } = N(), [n, o] = T(!0);
2913
- return R(() => {
2914
- const i = new ut({
2915
- onDisconnected: () => o(!1),
2916
- onConnected: () => o(!0),
2917
- onReconnectSucceeded: () => o(!0)
2918
- });
2919
- return t.addConnectionHandler(e, i), () => {
2920
- t.removeConnectionHandler(e);
2921
- };
2922
- }, [t]), n;
2923
- }, Kl = ({
2924
- lastMessage: e,
2925
- aiAgentUserId: t
2926
- }) => {
2927
- const [n, o] = T(!1), i = Xn();
2928
- return R(() => {
2929
- if (!e) return;
2930
- const s = i.some((l) => l.userId === t), a = jn(e, t) && kt.isStreaming(e);
2931
- o(!!(a || s));
2932
- }, [i, e, t]), n;
2933
- }, tr = {
2934
- textArea: k`min-height:40px;height:40px;font-size:16px;line-height:24px;`,
2935
- attachIcon: k`margin-bottom:4px;`
2936
- }, nr = c.button`all:unset;cursor:pointer;display:flex;align-items:center;justify-content:center;width:32px;height:32px;`, Zl = c(nr)`flex-shrink:0;margin-inline-end:12px;margin-bottom:2px;&:disabled{cursor:not-allowed;}&:not(:disabled){&:hover{path{fill:${u.themedColor.textHighEmphasis};}}&:active{border-radius:4px;background-color:${u.themedColor.bg_200_400};}}${ht && tr.attachIcon};`, Yl = c.input`display:none;`, tn = c.div`width:100%;position:relative;background-color:${u.themedColor.bg_100_500};border-radius:20px;`, nn = c.div`display:flex;flex-direction:row;align-items:flex-end;position:relative;`, rn = c.textarea`all:unset;display:block;flex:1;min-width:0;padding-top:8px;padding-bottom:8px;padding-inline-start:16px;padding-inline-end:12px;box-sizing:border-box;font-size:14px;line-height:20px;color:${u.themedColor.textHighEmphasis};resize:none;width:100%;height:${An}px;overflow-wrap:break-word;white-space:pre-wrap;overflow-x:hidden;${ht && tr.textArea};&::placeholder{color:${u.themedColor.textLowEmphasis};}&:disabled{cursor:not-allowed;&::placeholder{color:${u.themedColor.textDisabled};}}`, on = c.div`padding:12px 16px;position:relative;display:flex;align-items:center;`, sn = ({ disabled: e }) => {
2937
- const t = D(null), { addFiles: n, clearFiles: o, files: i, isFileUploadEnabled: s } = At();
2938
- return !s || i.length > 0 ? null : /* @__PURE__ */ r.createElement(
2939
- Zl,
2940
- {
2941
- disabled: e,
2942
- onClick: () => {
2943
- var a;
2944
- o(), (a = t.current) == null || a.click();
2945
- }
2946
- },
2947
- /* @__PURE__ */ r.createElement(
2948
- $,
2949
- {
2950
- type: "attach",
2951
- color: e ? u.themedColor.textDisabled : u.themedColor.textMidEmphasis,
2952
- size: 16
2953
- }
2954
- ),
2955
- /* @__PURE__ */ r.createElement(
2956
- Yl,
2957
- {
2958
- type: "file",
2959
- ref: t,
2960
- onChange: (a) => {
2961
- const l = a.currentTarget.files;
2962
- l && n(Array.from(l)), a.target.value = "";
2963
- },
2964
- accept: In.join(",")
2965
- }
2966
- )
2967
- );
2968
- }, ql = () => {
2969
- const e = D(null), [t, n] = T(""), { rootElement: o } = N(), { channelSource: i, messageSource: s } = G(), [a, l] = Gl({
2970
- channel: i.channel,
2971
- messages: s.messages
2972
- }), { files: d, addFiles: g, clearFiles: m } = At();
2973
- Ei({ onDropFiles: g }), Hl({ blurred: a, elementRef: e, document: pe(o) });
2974
- const p = t.trim().length > 0, h = d.length > 0, b = !a && (p || h), x = () => {
2975
- e.current && (e.current.value = "", e.current.style.height = ""), m(), n("");
2976
- }, E = async () => {
2977
- const w = t.trim(), O = { message: w };
2978
- if (!(!w && !d.length)) {
2979
- if (d.length > 0) {
2980
- const ee = d[0].file, U = { ...O, file: ee };
2981
- s.sendFileMessage(U), x();
2982
- return;
2983
- }
2984
- s.sendUserMessage(O), x();
2985
- }
2986
- }, f = (w) => {
2987
- const O = Array.from(w.clipboardData.files);
2988
- O.length > 0 && (w.preventDefault(), g(O));
2989
- }, y = (w) => {
2990
- w.key !== "Enter" || w.nativeEvent.isComposing || w.shiftKey || (w.preventDefault(), E());
2991
- }, _ = (w) => {
2992
- if (e.current) {
2993
- e.current.style.height = "";
2994
- const O = Math.min(ei, e.current.scrollHeight);
2995
- An < O && (e.current.style.height = `${O}px`);
2996
- }
2997
- n(w.target.value);
2998
- };
2999
- return a ? /* @__PURE__ */ r.createElement(on, null, /* @__PURE__ */ r.createElement(tn, null, /* @__PURE__ */ r.createElement(nn, null, /* @__PURE__ */ r.createElement(rn, { disabled: !0, placeholder: l }), /* @__PURE__ */ r.createElement(sn, { disabled: !0 })))) : /* @__PURE__ */ r.createElement(on, null, /* @__PURE__ */ r.createElement(tn, null, /* @__PURE__ */ r.createElement(Vl, null), /* @__PURE__ */ r.createElement(nn, null, /* @__PURE__ */ r.createElement(
3000
- rn,
3001
- {
3002
- ref: e,
3003
- role: "textbox",
3004
- "aria-label": "Text Input",
3005
- placeholder: l,
3006
- maxLength: 5e3,
3007
- onKeyDown: y,
3008
- onChange: _,
3009
- onPaste: f
3010
- }
3011
- ), /* @__PURE__ */ r.createElement(sn, null))), b && /* @__PURE__ */ r.createElement(nr, { onClick: () => E() }, /* @__PURE__ */ r.createElement($, { type: "send", color: u.color.primary.main, size: 20 })));
3012
- }, Jl = c.div`padding:8px 16px;text-align:center;word-break:break-word;white-space:pre-wrap;line-height:1.43;letter-spacing:-0.2px;font-size:14px;font-weight:400;color:${u.themedColor.textLowEmphasis};&& a{font-weight:700;text-decoration:none;${B.light`
3013
- color: ${u.color.information.light};
3014
- `};
3015
- ${B.dark`
3016
- color: ${u.color.information.main};
3017
- `};
3018
- }
3019
- `, Xl = C(() => import("./HxsmHNdw.js").then((e) => ({ default: e.MarkdownText }))), Ql = () => {
3020
- const { aiAgentInfo: e } = F(), { messageSource: t } = G(), { userSession: n } = F();
3021
- return !e.specialNoticeEnabled || !e.specialNotice || !(t.initialized && !t.messages.some((i) => jn(i, n.userId))) ? null : /* @__PURE__ */ r.createElement(Jl, null, /* @__PURE__ */ r.createElement(Xl, null, e.specialNotice));
3022
- }, ec = () => /* @__PURE__ */ r.createElement(tc, null, /* @__PURE__ */ r.createElement(Ql, null), /* @__PURE__ */ r.createElement(Rl, null, /* @__PURE__ */ r.createElement(ql, null))), tc = c.div`z-index:0;border:none;width:100%;`, nc = () => {
3023
- var s, a, l;
3024
- const { activeChannel: e } = F(), { channelSource: t } = G(), n = ((a = (s = t.channel) == null ? void 0 : s.conversation) == null ? void 0 : a.status) === z.CLOSED;
3025
- return !(((l = t.channel) == null ? void 0 : l.url) === (e == null ? void 0 : e.url)) && n ? /* @__PURE__ */ r.createElement(Ml, null) : /* @__PURE__ */ r.createElement(ec, null);
3026
- }, rc = () => {
3027
- var _;
3028
- const { state: e, logger: t, enableCloseConversationButton: n, enableExpandButton: o, dispatcher: i } = N(), { stringSet: s } = M(), { aiAgentInfo: a, activeChannel: l } = F(), { channelSource: d, onNavigateToConversationList: g } = G(), m = d.channel, h = Le() ? 24 : 16, b = () => {
3029
- e.setOpened(!1);
3030
- }, x = async () => {
3031
- try {
3032
- const w = await (m == null ? void 0 : m.markConversationAsHandoff());
3033
- t.info("conversation.handleAgentHandoff: success", w);
3034
- } catch (w) {
3035
- t.error("conversation.handleAgentHandoff: error", w);
3036
- }
3037
- }, E = async () => {
3038
- m && await i.send(Qr.CloseConversation());
3039
- }, f = l && (m == null ? void 0 : m.url) === l.url, y = a.showHandoffButton && !!((_ = m == null ? void 0 : m.conversation) != null && _.handoff) && f;
3040
- return /* @__PURE__ */ r.createElement(lc, null, /* @__PURE__ */ r.createElement(cc, null, g && /* @__PURE__ */ r.createElement(Ne, { onClick: () => g() }, /* @__PURE__ */ r.createElement($, { type: "menu", size: 24, color: u.themedColor.textHighEmphasis })), f && /* @__PURE__ */ r.createElement(qn, { size: 34 }), /* @__PURE__ */ r.createElement(uc, { variant: "h2", color: u.themedColor.textHighEmphasis }, a.nickname || (m == null ? void 0 : m.name))), /* @__PURE__ */ r.createElement(dc, null, y && /* @__PURE__ */ r.createElement(
3041
- ac,
3042
- {
3043
- tooltipLabel: s.HEADER_BUTTON__AGENT_HANDOFF,
3044
- disabled: !xi(m),
3045
- size: h,
3046
- onClick: x
3047
- }
3048
- ), n && /* @__PURE__ */ r.createElement(
3049
- sc,
3050
- {
3051
- disabled: !Nn(m),
3052
- size: h,
3053
- onClick: E
3054
- }
3055
- ), o && /* @__PURE__ */ r.createElement(oc, { size: h }), /* @__PURE__ */ r.createElement(ic, { size: h, onClick: b })));
3056
- }, oc = ({ size: e, disabled: t }) => {
3057
- const { state: n } = N();
3058
- return /* @__PURE__ */ r.createElement(Ne, { "aria-label": "expand", onClick: () => n.setExpanded(!n.expanded), disabled: t }, /* @__PURE__ */ r.createElement($, { type: n.expanded ? "collapse" : "expand", size: e, color: u.themedColor.textHighEmphasis }));
3059
- }, ic = ({ size: e, disabled: t, onClick: n }) => /* @__PURE__ */ r.createElement(Ne, { "aria-label": "close messenger", onClick: n, disabled: t }, /* @__PURE__ */ r.createElement($, { type: "close", size: e, color: u.themedColor.textHighEmphasis })), sc = ({ size: e, disabled: t, onClick: n }) => /* @__PURE__ */ r.createElement(Ne, { "aria-label": "close conversation", onClick: n, disabled: t }, /* @__PURE__ */ r.createElement(
3060
- $,
3061
- {
3062
- type: "refresh",
3063
- size: e,
3064
- color: t ? u.themedColor.textDisabled : u.themedColor.textHighEmphasis
3065
- }
3066
- )), ac = ({ size: e, onClick: t, disabled: n, tooltipLabel: o }) => /* @__PURE__ */ r.createElement(Vn, { label: o, position: "bottom", disabled: n }, /* @__PURE__ */ r.createElement(Ne, { "aria-label": "agent", onClick: t, disabled: n }, /* @__PURE__ */ r.createElement(
3067
- $,
3068
- {
3069
- type: "agent",
3070
- size: e,
3071
- color: n ? u.themedColor.textDisabled : u.themedColor.textHighEmphasis
3072
- }
3073
- ))), lc = c.div`height:56px;box-sizing:border-box;display:flex;align-items:center;padding:11px 12px;border-bottom:1px solid ${u.themedColor.textDisabled};background-color:${({ theme: e }) => e.colors.base.headerBackground};`, cc = c.div`display:flex;flex:1;flex-direction:row;align-items:center;gap:6px;overflow:hidden;`, dc = c.div`display:flex;gap:10px;align-items:center;justify-content:center;`, uc = c(S)`text-overflow:ellipsis;overflow:hidden;white-space:nowrap;padding:2px 0;`, Ne = c.button`all:unset;padding:4px;cursor:pointer;display:flex;align-items:center;justify-content:center;&:disabled{cursor:not-allowed;}`, mc = () => {
3074
- const { isDashboardActionbookTester: e } = wt();
3075
- return e ? null : /* @__PURE__ */ r.createElement(rc, null);
3076
- }, an = ({
3077
- children: e,
3078
- onNavigateToConversationList: t,
3079
- closedChannelUrl: n,
3080
- onClearClosedChannelUrl: o
3081
- }) => {
3082
- const { Template: i } = It.useContext();
3083
- return /* @__PURE__ */ r.createElement(
3084
- bi,
3085
- {
3086
- onNavigateToConversationList: t,
3087
- closedChannelUrl: n,
3088
- onClearClosedChannelUrl: o
3089
- },
3090
- /* @__PURE__ */ r.createElement(lt, null, /* @__PURE__ */ r.createElement(lt.Consumer, null, (s) => /* @__PURE__ */ r.createElement(r.Fragment, null, /* @__PURE__ */ r.createElement(pc, { ...s }, /* @__PURE__ */ r.createElement(i, null)), e)))
3091
- );
3092
- }, It = Ce({
3093
- template: gc,
3094
- components: {
3095
- Header: mc,
3096
- Body: $l,
3097
- Footer: nc
3098
- }
3099
- });
3100
- function gc() {
3101
- const { components: e } = It.useContext();
3102
- return /* @__PURE__ */ r.createElement(r.Fragment, null, /* @__PURE__ */ r.createElement(e.Header, null), /* @__PURE__ */ r.createElement(e.Body, null), /* @__PURE__ */ r.createElement(e.Footer, null));
3103
- }
3104
- const pc = c.div`height:100%;width:100%;display:flex;flex-direction:column;flex:1;background-color:${({ theme: e }) => e.colors.base.background};`, {
3105
- Provider: hc,
3106
- useContext: rr
3107
- } = W("ConversationList");
3108
- function fc({
3109
- onOpenConversationView: e = Ge,
3110
- children: t
3111
- }) {
3112
- return /* @__PURE__ */ r.createElement(io, null, (n) => /* @__PURE__ */ r.createElement(hc, { value: { ...n, onOpenConversationView: e } }, t));
3113
- }
3114
- const or = Ce({
3115
- template: bc,
3116
- // Note: 리스트 변경되면 디자인 변경 가능성이 있어서 일단 컴포넌트는 비워둠
3117
- components: {}
3118
- });
3119
- function bc({
3120
- title: e = "",
3121
- lastMessageTimestamp: t = Date.now(),
3122
- onClick: n
3123
- }) {
3124
- const { stringSet: o, format: i } = M();
3125
- return /* @__PURE__ */ r.createElement(xc, { role: "button", onClick: () => n == null ? void 0 : n() }, /* @__PURE__ */ r.createElement(vc, null, /* @__PURE__ */ r.createElement(yc, null, /* @__PURE__ */ r.createElement(S, { variant: "subtitle1", color: u.themedColor.textHighEmphasis }, i(t, o.DATE_FORMAT__CONVERSATION_LIST__LIST_ITEM_TITLE)), /* @__PURE__ */ r.createElement(S, { variant: "caption2", color: u.themedColor.textLowEmphasis }, i(t, o.DATE_FORMAT__CONVERSATION_LIST__LIST_ITEM_TITLE_CAPTION))), /* @__PURE__ */ r.createElement(S, { variant: "body3", color: u.themedColor.textMidEmphasis }, e || o.CONVERSATION_LIST__TOPICS_FALLBACK)), /* @__PURE__ */ r.createElement($, { type: "chevron-right", size: 16, color: u.themedColor.textHighEmphasis }), /* @__PURE__ */ r.createElement(Ec, null));
3126
- }
3127
- const xc = c.div`display:flex;flex-direction:row;align-items:center;position:relative;width:100%;padding:14px 16px;box-sizing:border-box;gap:4px;cursor:pointer;`, Ec = c.div`position:absolute;bottom:0;height:1px;width:calc(100% - 32px);background-color:${u.themedColor.textDisabled};`, vc = c.div`gap:4px;display:flex;flex-direction:column;flex:1;`, yc = c.div`display:flex;justify-content:flex-start;align-items:center;gap:6px;`, Cc = ({ items: e, renderItem: t, onEndReached: n }) => {
3128
- const o = (i) => {
3129
- const s = i.target;
3130
- s.scrollHeight - s.scrollTop === s.clientHeight && (n == null || n());
3131
- };
3132
- return /* @__PURE__ */ r.createElement(Tc, { onScroll: (i) => o(i) }, e.map((i, s) => t(i, s)));
3133
- }, Tc = c.div`width:100%;height:100%;display:flex;flex-direction:column;flex:1;overflow:auto;`, _c = () => {
3134
- const { stringSet: e } = M(), { listSource: t, onOpenConversationView: n } = rr(), { Template: o } = or.useContext();
3135
- return t.initialized ? t.conversations.length === 0 ? /* @__PURE__ */ r.createElement(Ee, { type: "noChannels", label: e.CONVERSATION_LIST__NO_CONVERSATIONS }) : /* @__PURE__ */ r.createElement(
3136
- Cc,
3137
- {
3138
- items: t.conversations,
3139
- renderItem: (i, s) => {
3140
- var a;
3141
- return /* @__PURE__ */ r.createElement(
3142
- o,
3143
- {
3144
- key: s,
3145
- channelUrl: i.channelInfo.url,
3146
- title: (a = i.topics) == null ? void 0 : a.join(", "),
3147
- lastMessageTimestamp: i.channelInfo.lastMessageTs,
3148
- onClick: () => n(i.channelInfo.url, z.CLOSED)
3149
- }
3150
- );
3151
- },
3152
- onEndReached: () => {
3153
- t.loadMore();
3154
- }
3155
- }
3156
- ) : /* @__PURE__ */ r.createElement(Ee, { type: "loading" });
3157
- }, Sc = () => {
3158
- const { refreshActiveChannel: e } = F(), { onOpenConversationView: t } = rr(), n = Qn();
3159
- return /* @__PURE__ */ r.createElement(
3160
- wc,
3161
- {
3162
- role: "button",
3163
- onClick: async () => {
3164
- const o = await e();
3165
- t(o, z.OPEN);
3166
- }
3167
- },
3168
- /* @__PURE__ */ r.createElement(kc, { variant: "h1" }, n)
3169
- );
3170
- }, wc = c.div`background-color:${({ theme: e }) => e.colors.base.primary};display:flex;align-items:center;justify-content:center;padding:16px;cursor:pointer;`, kc = c(S)`color:${({ theme: e }) => e.colors.base.primaryContrastContent};overflow:hidden;text-overflow:ellipsis;white-space:nowrap;`, Ac = () => {
3171
- const { stringSet: e } = M();
3172
- return /* @__PURE__ */ r.createElement(Ic, null, /* @__PURE__ */ r.createElement($c, { variant: "h2", color: u.themedColor.textHighEmphasis }, e.CONVERSATION_LIST__HEADER_TITLE), /* @__PURE__ */ r.createElement(Mc, null));
3173
- }, Ic = c.div`display:flex;flex-direction:column;align-items:flex-start;justify-content:center;width:100%;flex-shrink:0;height:56px;position:relative;background-color:${({ theme: e }) => e.colors.base.headerBackground};`, $c = c(S)`padding:0 12px;width:100%;box-sizing:border-box;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;`, Mc = c.div`position:absolute;bottom:0;width:100%;height:1px;background-color:${u.themedColor.textDisabled};`, Oc = ({ children: e, onOpenConversationView: t }) => {
3174
- const { Template: n } = $t.useContext();
3175
- return /* @__PURE__ */ r.createElement(fc, { onOpenConversationView: t }, /* @__PURE__ */ r.createElement(Rc, null, /* @__PURE__ */ r.createElement(n, null)), e);
3176
- }, $t = Ce({
3177
- template: Lc,
3178
- components: {
3179
- Header: Ac,
3180
- Body: _c,
3181
- Footer: Sc
3182
- }
3183
- });
3184
- function Lc() {
3185
- const { components: e } = $t.useContext();
3186
- return /* @__PURE__ */ r.createElement(r.Fragment, null, /* @__PURE__ */ r.createElement(e.Header, null), /* @__PURE__ */ r.createElement(e.Body, null), /* @__PURE__ */ r.createElement(e.Footer, null));
3187
- }
3188
- const Rc = c.div`height:100%;width:100%;display:flex;flex-direction:column;flex:1;background-color:${({ theme: e }) => e.colors.base.background};`, Nc = k`:where(#${X.ENTRY}) :not(code *){font-family:'Roboto',sans-serif;box-sizing:border-box;}`, Dc = [Nc, Go, jo], Bc = (e, ...t) => _r(e, ...Dc, ...t), Pc = Bc``, Fc = Wr(
3189
- It,
3190
- ve,
3191
- _t,
3192
- St,
3193
- $t,
3194
- or
3195
- );
3196
- function Hc({
3197
- appearance: e,
3198
- rootElement: t,
3199
- logger: n,
3200
- language: o,
3201
- stringSet: i,
3202
- children: s,
3203
- messageTemplate: a,
3204
- theme: l
3205
- }) {
3206
- return Xo(No, t), /* @__PURE__ */ r.createElement(Sr, { target: t }, /* @__PURE__ */ r.createElement(Yo, { rootElement: t, logger: n, appearance: e, theme: l }, /* @__PURE__ */ r.createElement(Ao, { internalVariables: a == null ? void 0 : a.__internalVariables }, /* @__PURE__ */ r.createElement(Vo, { stringSet: i, logger: n, language: o }, /* @__PURE__ */ r.createElement(Fc, null, s, /* @__PURE__ */ r.createElement(Pc, null))))));
3207
- }
3208
- const ln = {
3209
- key_payment_plan_container: {
3210
- color_variables: {},
3211
- created_at: 1232,
3212
- updated_at: 4563,
3213
- key: "key_payment_plan_container",
3214
- ui_template: {
3215
- body: {
3216
- items: [
3217
- {
3218
- carouselStyle: { maxChildWidth: 265, spacing: 10 },
3219
- items: "{@templates}",
3220
- type: "carouselView",
3221
- viewStyle: { padding: { top: 0, bottom: 0, left: 50, right: 16 } }
3222
- }
3223
- ]
3224
- },
3225
- version: 2
3226
- }
3227
- },
3228
- key_payment_plan: {
3229
- color_variables: {},
3230
- created_at: 123,
3231
- updated_at: 456,
3232
- key: "key_payment_plan",
3233
- ui_template: {
3234
- version: 1,
3235
- body: {
3236
- items: [
3237
- {
3238
- viewStyle: { radius: 16, backgroundColor: "#FFFFFF", borderWidth: "1", borderColor: "#E0E0E0" },
3239
- width: { type: "fixed", value: "264" },
3240
- height: { type: "fixed", value: "275" },
3241
- type: "box",
3242
- layout: "column",
3243
- items: [
3244
- {
3245
- viewStyle: {
3246
- padding: { left: 16, right: 16, top: 16, bottom: 16 },
3247
- backgroundImageUrl: "https://storage-66w.pages.dev/carousel-bg.png"
3248
- },
3249
- action: { type: "web", data: "{action_url}" },
3250
- type: "box",
3251
- layout: "column",
3252
- items: [
3253
- {
3254
- type: "text",
3255
- text: "{header_plan}",
3256
- textStyle: { size: 14, weight: "bold", color: "#FFFFFF" }
3257
- },
3258
- { type: "text", text: "{header_desc}", textStyle: { size: 12, color: "#FFFFFF" } }
3259
- ]
3260
- },
3261
- {
3262
- viewStyle: { padding: { left: 16, right: 16, top: 16, bottom: 16 } },
3263
- action: { type: "web", data: "{action_url}" },
3264
- type: "box",
3265
- layout: "column",
3266
- items: [
3267
- { type: "text", text: "{price}", textStyle: { size: 20, weight: "bold" } },
3268
- {
3269
- viewStyle: { padding: { left: 0, right: 0, top: 16, bottom: 16 } },
3270
- type: "box",
3271
- layout: "column",
3272
- items: [
3273
- {
3274
- viewStyle: { backgroundColor: "#E0E0E0" },
3275
- width: { type: "flex", value: 0 },
3276
- height: { type: "fixed", value: "1" },
3277
- type: "box",
3278
- layout: "column"
3279
- }
3280
- ]
3281
- },
3282
- {
3283
- viewStyle: { margin: { bottom: 8, top: 0, left: 0, right: 0 } },
3284
- type: "text",
3285
- text: "{description}",
3286
- textStyle: { size: 14, weight: "normal", color: "#7F7F7F" }
3287
- }
3288
- ]
3289
- }
3290
- ]
3291
- }
3292
- ]
3293
- }
3294
- }
3295
- },
3296
- key_content_preview: {
3297
- color_variables: {},
3298
- created_at: 1232,
3299
- updated_at: 4563,
3300
- key: "key_content_preview",
3301
- ui_template: {
3302
- version: 1,
3303
- body: {
3304
- items: [
3305
- {
3306
- viewStyle: {
3307
- radius: 16,
3308
- borderWidth: 1,
3309
- borderColor: "#1F000000",
3310
- backgroundColor: "#FFFFFF"
3311
- },
3312
- width: {
3313
- type: "fixed",
3314
- value: 264
3315
- },
3316
- action: { type: "web", data: "{action_url}" },
3317
- type: "box",
3318
- layout: "column",
3319
- items: [
3320
- {
3321
- action: { type: "web", data: "{action_url}" },
3322
- width: {
3323
- type: "flex",
3324
- value: 0
3325
- },
3326
- height: {
3327
- type: "fixed",
3328
- value: 200
3329
- },
3330
- type: "image",
3331
- imageUrl: "{image}",
3332
- imageStyle: {
3333
- contentMode: "aspectFill"
3334
- }
3335
- },
3336
- {
3337
- action: { type: "web", data: "{action_url}" },
3338
- viewStyle: {
3339
- padding: {
3340
- left: 16,
3341
- right: 16,
3342
- top: 16,
3343
- bottom: 16
3344
- }
3345
- },
3346
- type: "box",
3347
- layout: "column",
3348
- items: [
3349
- {
3350
- viewStyle: {
3351
- margin: {
3352
- bottom: 4,
3353
- top: 0,
3354
- left: 0,
3355
- right: 0
3356
- }
3357
- },
3358
- height: {
3359
- type: "fixed",
3360
- value: 16
3361
- },
3362
- type: "text",
3363
- text: "{title}",
3364
- maxTextLines: 1,
3365
- textStyle: {
3366
- size: 14,
3367
- weight: "bold",
3368
- color: "#000000"
3369
- }
3370
- },
3371
- {
3372
- height: {
3373
- type: "fixed",
3374
- value: 16
3375
- },
3376
- type: "text",
3377
- text: "{release_date}",
3378
- maxTextLines: 1,
3379
- textStyle: {
3380
- size: 14,
3381
- weight: "normal",
3382
- color: "#80000000"
3383
- }
3384
- }
3385
- ]
3386
- }
3387
- ]
3388
- }
3389
- ]
3390
- }
3391
- }
3392
- }
3393
- };
3394
- function ir({
3395
- rootElement: e = document.body,
3396
- logLevel: t = gn.WARN,
3397
- language: n = navigator.language,
3398
- userSessionInfo: o,
3399
- children: i,
3400
- ...s
3401
- }) {
3402
- var a;
3403
- return xe.level !== t && (xe.level = t), Jo("https://fonts.googleapis.com/css2?family=Roboto&display=swap", e), /* @__PURE__ */ r.createElement("div", { id: X.ENTRY, style: { width: "fit-content", height: "fit-content" } }, /* @__PURE__ */ r.createElement(So, { logger: xe, storage: zc }, /* @__PURE__ */ r.createElement(
3404
- Hc,
3405
- {
3406
- logger: xe,
3407
- rootElement: e,
3408
- appearance: (a = s.agentPreviewConfigs) == null ? void 0 : a.appearance,
3409
- stringSet: s.stringSet,
3410
- language: n,
3411
- messageTemplate: s.messageTemplate,
3412
- theme: s.theme
3413
- },
3414
- /* @__PURE__ */ r.createElement(
3415
- Yr,
3416
- {
3417
- appId: s.appId,
3418
- aiAgentId: s.aiAgentId,
3419
- language: n,
3420
- countryCode: s.countryCode,
3421
- context: s.context,
3422
- logger: xe,
3423
- dispatcher: Uc,
3424
- chatParams: { customApiHost: s.customApiHost, customWebSocketHost: s.customWebSocketHost }
3425
- },
3426
- /* @__PURE__ */ r.createElement(oi, { rootElement: e, ...s }, /* @__PURE__ */ r.createElement(li, { userSessionInfo: o }, /* @__PURE__ */ r.createElement(
3427
- Ia,
3428
- {
3429
- isDashboardActionbookTester: s._UNSAFE_INTERNAL_isActionbookTester
3430
- },
3431
- i,
3432
- /* @__PURE__ */ r.createElement("div", { id: X.MODAL_ROOT })
3433
- )))
3434
- )
3435
- )));
3436
- }
3437
- const xe = new vn(gn.WARN), Uc = new xn(xe), Mt = "@sba/message-template", cn = (e) => `${Mt}/templates/${e}`, dn = () => `${Mt}/token`, zc = To({
3438
- onSetTemplate: (e, t) => {
3439
- ln[e] || q.setItem(cn(e), t);
3440
- },
3441
- onGetTemplate: (e) => {
3442
- const t = ln[e];
3443
- return t ? JSON.stringify(t) : q.getItem(cn(e));
3444
- },
3445
- onSetCachedToken(e) {
3446
- q.setItem(dn(), e);
3447
- },
3448
- onGetCachedToken() {
3449
- return q.getItem(dn());
3450
- },
3451
- onClear: () => {
3452
- q.getKeys(Mt).forEach(q.deleteItem);
3453
- }
3454
- }), sr = ({ children: e, isOpened: t }) => {
3455
- const { dir: n, rootElement: o } = N(), i = pe(o, !0);
3456
- return R(() => {
3457
- const s = "sb-agent-block-scroll";
3458
- return t ? i.body.classList.add(s) : i.body.classList.remove(s), () => {
3459
- i.body.classList.remove(s);
3460
- };
3461
- }, [i, t]), /* @__PURE__ */ r.createElement(Wc, { dir: n, $visible: t }, e);
3462
- }, Wc = c.div`width:100%;height:100%;position:fixed;top:0;left:0;z-index:${he.WINDOW};visibility:${({ $visible: e }) => e ? "visible" : "hidden"};`;
3463
- function Vc({
3464
- className: e,
3465
- isOpened: t,
3466
- onClick: n,
3467
- type: o,
3468
- imageUrl: i,
3469
- dir: s,
3470
- animated: a = !0,
3471
- backgroundColor: l
3472
- }) {
3473
- const d = at(l);
3474
- return /* @__PURE__ */ r.createElement(
3475
- Kc,
3476
- {
3477
- dir: s,
3478
- id: X.LAUNCHER,
3479
- className: e,
3480
- "aria-label": "Sendbird AIAgent Launcher",
3481
- onClick: n,
3482
- $animated: a,
3483
- $backgroundColor: l
3484
- },
3485
- /* @__PURE__ */ r.createElement(Zc, { $isOpened: t, $animated: a, $fillColor: d }, /* @__PURE__ */ r.createElement(un.Open, { url: i, isDefaultIcon: o === "default_icon" })),
3486
- /* @__PURE__ */ r.createElement(Yc, { $isOpened: t, $animated: a, $fillColor: d }, /* @__PURE__ */ r.createElement(un.Close, null))
3487
- );
3488
- }
3489
- const Gc = k`&:hover{transition:transform 250ms cubic-bezier(0.33,0,0,1);transform:scale(1.1);}&:active{transform:scale(0.8);}`, jc = k`img{width:100%;height:100%;object-fit:cover;user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;-webkit-user-drag:none;&[data-default-icon='true']{width:32px;height:32px;filter:${({ $fillColor: e }) => e === kn.WHITE ? "grayscale(100%) brightness(2000%)" : "grayscale(100%) invert(100%) saturate(0%) brightness(0%) contrast(1000%)"};}}`, ar = k`svg{width:32px;height:32px;${({ $fillColor: e }) => k`
3490
- path {
3491
- fill: ${e};
3492
- }
3493
- [class*='fill'] {
3494
- fill: ${e};
3495
- }
3496
- `}
3497
- }
3498
- `, Kc = c.button`position:relative;padding:0;width:48px;height:48px;background:${({ $backgroundColor: e }) => e};border-radius:50%;transition:all 0.3s cubic-bezier(0.31,-0.105,0.43,1.4);border:none;display:flex;justify-content:center;align-items:center;box-shadow:0 16px 24px 2px rgba(33,33,33,0.12),0 6px 30px 5px rgba(33,33,33,0.08),0 6px 10px -5px rgba(33,33,33,0.04);${({ $animated: e }) => e && Gc}`, lr = c.span`position:absolute;width:100%;height:100%;border-radius:50%;overflow:hidden;transition:transform 0.16s linear,opacity 0.08s linear,scale 0.16s linear;user-select:none;display:flex;justify-content:center;align-items:center;`, Zc = c(lr)`opacity:${({ $isOpened: e }) => e ? 0 : 1};transform:${({ $animated: e, $isOpened: t }) => e && (t ? "rotate(-90deg) scale(0)" : "rotate(0deg)")};${jc}${ar}`, Yc = c(lr)`scale:${({ $isOpened: e }) => e ? 1 : 0};transform:${({ $animated: e, $isOpened: t }) => e && (t ? "rotate(0deg)" : "rotate(-90deg)")};${ar}`, un = {
3499
- Open: (e) => e.url ? /* @__PURE__ */ r.createElement("img", { src: e.url, alt: "launcher-img", "data-default-icon": e.isDefaultIcon }) : /* @__PURE__ */ r.createElement(yt, null),
3500
- Close: () => /* @__PURE__ */ r.createElement($, { size: 32, type: "chevron-down" })
3501
- };
3502
- function cr({ className: e }) {
3503
- const { colors: t } = mt(), { dir: n, state: o } = N(), { launcherInfo: i } = F();
3504
- return Jc(), /* @__PURE__ */ r.createElement(
3505
- Vc,
3506
- {
3507
- dir: n,
3508
- className: e,
3509
- isOpened: o.opened,
3510
- onClick: () => o.setOpened(!o.opened),
3511
- type: i.type,
3512
- imageUrl: i.imageUrl,
3513
- backgroundColor: t.base.primary
3514
- }
3515
- );
3516
- }
3517
- const qc = 1e3 * 60;
3518
- function Jc() {
3519
- const { chatSDK: e, state: t, logger: n, enableAutoDisconnectInLauncher: o } = N(), i = D(null);
3520
- R(() => {
3521
- if (!o) return;
3522
- function s() {
3523
- i.current && (clearTimeout(i.current), i.current = null);
3524
- }
3525
- function a() {
3526
- e.connectionState === Cr.CLOSED && (e.reconnect(), n.debug("useSDKInactivityTimeout: reconnected")), s(), n.debug("useSDKInactivityTimeout: clear disconnect schedule");
3527
- }
3528
- function l() {
3529
- s(), i.current = setTimeout(async () => {
3530
- await e.disconnectWebSocket(), n.debug("useSDKInactivityTimeout: disconnected");
3531
- }, qc);
3532
- }
3533
- t.opened ? a() : (l(), n.debug("useSDKInactivityTimeout: schedule disconnect"));
3534
- }, [o, e, t.opened]);
3535
- }
3536
- const dr = ye(null);
3537
- function Xc() {
3538
- const e = J(dr);
3539
- if (!e)
3540
- throw new Error("useNavigator() must be used within <Navigator />");
3541
- return e;
3542
- }
3543
- function ur({ children: e }) {
3544
- const t = Xc();
3545
- return typeof e == "function" ? e(t) : /* @__PURE__ */ r.createElement(r.Fragment, null, e);
3546
- }
3547
- const Qc = pn`0%{transform:translateY(40px);opacity:0;}100%{transform:translateY(0px);opacity:1;}`, ed = pn`0%{transform:translateY(0px);opacity:1;}100%{transform:translateY(40px);opacity:0;}`, td = k`animation-name:${Qc};animation-duration:0.3s;animation-fill-mode:forwards;`, nd = k``, rd = k`animation-name:${ed};animation-duration:0.3s;animation-fill-mode:forwards;`, od = k`visibility:hidden;`, id = c.div`position:absolute;top:0;left:0;width:100%;height:100%;${({ $transitionState: e }) => {
3548
- switch (e) {
3549
- case "entering":
3550
- return td;
3551
- case "entered":
3552
- return nd;
3553
- case "exiting":
3554
- return rd;
3555
- case "exited":
3556
- return od;
3557
- default:
3558
- return "";
3559
- }
3560
- }}${({ $active: e }) => e ? k`
3561
- z-index: 999;
3562
- ` : k`z-index:1;pointer-events:none;`}
3563
- `;
3564
- function Ae({ initialId: e, children: t }) {
3565
- const n = P((f, y) => {
3566
- d((_) => [..._, f]), m((_) => ({ ..._, [f]: !0 })), y != null && y.reset && x((_) => ({
3567
- ..._,
3568
- [f]: (_[f] || 0) + 1
3569
- })), h((_) => ({
3570
- ..._,
3571
- [f]: "entering"
3572
- })), setTimeout(() => {
3573
- h((_) => ({
3574
- ..._,
3575
- [f]: "entered"
3576
- }));
3577
- }, 300);
3578
- }, []), o = P(() => {
3579
- d((f) => {
3580
- if (f.length <= 1) return f;
3581
- const y = f[f.length - 1];
3582
- return h((_) => ({
3583
- ..._,
3584
- [y]: "exiting"
3585
- })), setTimeout(() => {
3586
- h((_) => ({
3587
- ..._,
3588
- [y]: "exited"
3589
- })), d((_) => _.slice(0, -1));
3590
- }, 300), f;
3591
- });
3592
- }, []), i = Ie(() => ({
3593
- navigation: {
3594
- navigate: n,
3595
- pop: o
3596
- }
3597
- }), [n, o]), s = Ie(() => fr.toArray(t).filter(
3598
- (f) => f.type === ur
3599
- ), [t]), a = Ie(() => {
3600
- const f = {};
3601
- return s.forEach((y) => {
3602
- const { id: _, lazy: w, children: O } = y.props;
3603
- f[_] = { lazy: w, element: typeof O == "function" ? O(i) : O };
3604
- }), f;
3605
- }, [s]), [l, d] = T([e]), [g, m] = T(() => {
3606
- const f = {};
3607
- return Object.entries(a).forEach(([y, { lazy: _ }]) => {
3608
- _ === !1 && (f[y] = !0);
3609
- }), f[e] = !0, f;
3610
- }), [p, h] = T(() => {
3611
- const f = {};
3612
- return Object.keys(a).forEach((y) => {
3613
- y === e ? f[y] = "entered" : f[y] = "exited";
3614
- }), f;
3615
- }), [b, x] = T({}), E = l[l.length - 1];
3616
- return /* @__PURE__ */ r.createElement(dr.Provider, { value: i }, /* @__PURE__ */ r.createElement(sd, null, Object.keys(a).map((f) => {
3617
- var O;
3618
- if (!g[f]) return null;
3619
- const y = p[f] || "exited", _ = f === E, w = `${f}-${b[f] || 0}`;
3620
- return /* @__PURE__ */ r.createElement(id, { key: w, $transitionState: y, $active: _ }, (O = a[f]) == null ? void 0 : O.element);
3621
- })));
3622
- }
3623
- const sd = c.div`position:relative;width:100%;height:100%;`;
3624
- Ae.Screen = ur;
3625
- const ue = {
3626
- activeConv: "active-conv",
3627
- closedConv: "closed-conv",
3628
- convList: "conv-list"
3629
- }, mr = ({ setClosedChannelUrl: e, closedChannelUrl: t }) => /* @__PURE__ */ r.createElement(Ae, { initialId: ue.activeConv }, /* @__PURE__ */ r.createElement(Ae.Screen, { id: ue.activeConv }, ({ navigation: n }) => /* @__PURE__ */ r.createElement(an, { onNavigateToConversationList: () => n.navigate(ue.convList, { reset: !0 }) })), /* @__PURE__ */ r.createElement(Ae.Screen, { id: ue.closedConv }, ({ navigation: n }) => /* @__PURE__ */ r.createElement(
3630
- an,
3631
- {
3632
- onNavigateToConversationList: () => n.pop(),
3633
- closedChannelUrl: t,
3634
- onClearClosedChannelUrl: () => e(void 0)
3635
- }
3636
- )), /* @__PURE__ */ r.createElement(Ae.Screen, { id: ue.convList, lazy: !0 }, ({ navigation: n }) => /* @__PURE__ */ r.createElement(
3637
- Oc,
3638
- {
3639
- onOpenConversationView: (o, i) => {
3640
- i === "closed" ? (e(o), n.navigate(ue.closedConv, { reset: !0 })) : n.navigate(ue.activeConv);
3641
- }
3642
- }
3643
- )));
3644
- function ad({ isExpanded: e, isOpened: t, children: n, launcher: o }) {
3645
- const { dir: i } = N();
3646
- return /* @__PURE__ */ r.createElement(ld, null, /* @__PURE__ */ r.createElement(cd, { dir: i, id: X.WINDOW, $isExpanded: e, $isOpened: t }, n), o);
3647
- }
3648
- const ld = c.div`display:flex;flex-direction:column;gap:8px;align-items:flex-end;`, cd = c.div`background:${({ theme: e }) => e.colors.base.background};display:flex;overscroll-behavior:none;-webkit-overflow-scrolling:auto;height:640px;min-height:80px;width:400px;max-width:80vw;max-height:80vh;box-shadow:0px 16px 24px 2px rgba(33,33,33,0.12),0px 6px 30px 5px rgba(33,33,33,0.08),0px 6px 10px -5px rgba(33,33,33,0.04);border-radius:16px;overflow:hidden;transition:width 200ms ease 0s,height 200ms ease 0s,max-height 200ms ease 0s,transform 150ms cubic-bezier(0,1.2,1,1) 0s,opacity 83ms ease-out 0s;transform:scale(0.15);opacity:0;transform-origin:right bottom;[dir='rtl'] &:not([dir='ltr']),&[dir='rtl']{transform-origin:left bottom;}${({ $isOpened: e }) => e && ud};${({ $isExpanded: e }) => e && dd};`, dd = k`width:743px;height:723px;`, ud = k`z-index:${he.WINDOW};pointer-events:all;transform:scale(1);opacity:1;transition:width 200ms ease 0s,height 200ms ease 0s,max-height 200ms ease 0s,transform 300ms cubic-bezier(0,1.2,1,1) 0s,opacity 83ms ease-out 0s;`, Rd = ({ children: e, ...t }) => {
3649
- const n = Le(), [o, i] = T(), s = n ? sr : ad;
3650
- return /* @__PURE__ */ r.createElement(ir, { enableExpandButton: !n, ...t }, /* @__PURE__ */ r.createElement(Mn, null, ({ state: a }) => /* @__PURE__ */ r.createElement(r.Fragment, null, /* @__PURE__ */ r.createElement(s, { isExpanded: a.expanded, isOpened: a.opened, launcher: /* @__PURE__ */ r.createElement(cr, null) }, /* @__PURE__ */ r.createElement(
3651
- mr,
3652
- {
3653
- closedChannelUrl: o,
3654
- setClosedChannelUrl: i
3655
- }
3656
- )), e)));
3657
- };
3658
- function md(e) {
3659
- return /* @__PURE__ */ r.createElement(gd, { ...e });
3660
- }
3661
- const gd = c(cr)`position:fixed;z-index:${he.LAUNCHER};bottom:24px;inset-inline-end:24px;`;
3662
- function pd({ isExpanded: e, isOpened: t, children: n }) {
3663
- const { dir: o } = N();
3664
- return /* @__PURE__ */ r.createElement(hd, { dir: o, id: X.WINDOW, $isExpanded: e, $isOpened: t }, n);
3665
- }
3666
- const hd = c.div`background:${({ theme: e }) => e.colors.base.background};display:flex;overscroll-behavior:none;-webkit-overflow-scrolling:auto;position:fixed;bottom:84px;inset-inline-end:20px;height:640px;min-height:80px;width:400px;max-width:80vw;max-height:80vh;box-shadow:0px 16px 24px 2px rgba(33,33,33,0.12),0px 6px 30px 5px rgba(33,33,33,0.08),0px 6px 10px -5px rgba(33,33,33,0.04);border-radius:16px;overflow:hidden;transition:width 200ms ease 0s,height 200ms ease 0s,max-height 200ms ease 0s,transform 150ms cubic-bezier(0,1.2,1,1) 0s,opacity 83ms ease-out 0s;transform:scale(0.15);opacity:0;transform-origin:right bottom;[dir='rtl'] &:not([dir='ltr']),&[dir='rtl']{transform-origin:left bottom;}${({ $isOpened: e }) => e && bd};${({ $isExpanded: e }) => e && fd};`, fd = k`width:743px;height:723px;`, bd = k`z-index:${he.WINDOW};pointer-events:all;transform:scale(1);opacity:1;transition:width 200ms ease 0s,height 200ms ease 0s,max-height 200ms ease 0s,transform 300ms cubic-bezier(0,1.2,1,1) 0s,opacity 83ms ease-out 0s;`, Nd = ({ children: e, ...t }) => {
3667
- const n = Le(), [o, i] = T(), s = n ? sr : pd;
3668
- return /* @__PURE__ */ r.createElement(ir, { enableExpandButton: !n, ...t }, /* @__PURE__ */ r.createElement(Mn, null, ({ state: a }) => /* @__PURE__ */ r.createElement(r.Fragment, null, /* @__PURE__ */ r.createElement(s, { isExpanded: a.expanded, isOpened: a.opened }, /* @__PURE__ */ r.createElement(
3669
- mr,
3670
- {
3671
- closedChannelUrl: o,
3672
- setClosedChannelUrl: i
3673
- }
3674
- )), /* @__PURE__ */ r.createElement(md, null), e)));
3675
- };
3676
- export {
3677
- ft as A,
3678
- Qr as C,
3679
- Rd as D,
3680
- Nd as F,
3681
- $ as I,
3682
- zn as L,
3683
- wa as M,
3684
- _t as O,
3685
- Ld as P,
3686
- St as S,
3687
- S as a,
3688
- ir as b,
3689
- u as c,
3690
- Hc as d,
3691
- F as e,
3692
- M as f,
3693
- Vc as g,
3694
- ve as h,
3695
- me as i,
3696
- or as j,
3697
- an as k,
3698
- It as l,
3699
- Uc as m,
3700
- Oc as n,
3701
- $t as o,
3702
- En as p,
3703
- N as u
3704
- };