@sendbird/ai-agent-messenger-react 1.0.1 → 1.1.1

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