@sendbird/ai-agent-messenger-react 1.2.7 → 1.3.0

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