@epam/ai-dial-chat-overlay 1.3.0-dev.124 → 1.3.0-dev.126

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.
Files changed (2) hide show
  1. package/index.js +63 -77
  2. package/package.json +1 -1
package/index.js CHANGED
@@ -26,7 +26,7 @@ var e = "@DIAL_OVERLAY", t = /* @__PURE__ */ function(e) {
26
26
  if (typeof e != "object" || !e) return !1;
27
27
  let t = e;
28
28
  return typeof t.type == "string" && Object.values(n).includes(t.type) && !("requestId" in t);
29
- }, p = "<svg viewBox=\"0 0 50 50\" width=\"32\" height=\"32\" role=\"presentation\" aria-hidden=\"true\"><circle cx=\"25\" cy=\"25\" r=\"20\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"4\" stroke-linecap=\"round\" stroke-dasharray=\"31.4 31.4\"><animateTransform attributeName=\"transform\" type=\"rotate\" from=\"0 25 25\" to=\"360 25 25\" dur=\"1s\" repeatCount=\"indefinite\" /></circle></svg>", m = 0, h = () => (m += 1, `dial-overlay-${Date.now()}-${m}`), g = class {
29
+ }, p = 0, m = () => (p += 1, `dial-overlay-${Date.now()}-${p}`), h = class {
30
30
  requestType;
31
31
  requestId;
32
32
  responseType;
@@ -36,7 +36,7 @@ var e = "@DIAL_OVERLAY", t = /* @__PURE__ */ function(e) {
36
36
  settled = !1;
37
37
  timeoutHandle;
38
38
  constructor(e, t) {
39
- this.requestType = e, this.requestId = h(), this.responseType = `${e}/RESPONSE`, this.promise = new Promise((e, t) => {
39
+ this.requestType = e, this.requestId = m(), this.responseType = `${e}/RESPONSE`, this.promise = new Promise((e, t) => {
40
40
  this.resolveFn = e, this.rejectFn = t;
41
41
  }), this.timeoutHandle = setTimeout(() => {
42
42
  this.reject(/* @__PURE__ */ Error(`ChatOverlay: request "${e}" timed out after ${t}ms`));
@@ -51,13 +51,13 @@ var e = "@DIAL_OVERLAY", t = /* @__PURE__ */ function(e) {
51
51
  reject(e) {
52
52
  this.settled || (this.settled = !0, clearTimeout(this.timeoutHandle), this.rejectFn(e));
53
53
  }
54
- }, _ = (e, t) => {
54
+ }, g = (e, t) => {
55
55
  Object.assign(e.style, t);
56
- }, v = (e, t) => {
56
+ }, _ = (e, t) => {
57
57
  if (document.getElementById(e)) return;
58
58
  let n = document.createElement("style");
59
59
  n.id = e, n.textContent = t, document.head.appendChild(n);
60
- }, y = (e) => {
60
+ }, v = (e) => {
61
61
  let { auth: t, signInOptions: n } = e, r = n?.signInProvider?.trim();
62
62
  if (n?.autoSignIn !== !0 || !r || t?.autoSignInProvider?.trim()) return t;
63
63
  let i = n.signInInNewWindow ? s.External : s.SameWindow;
@@ -69,11 +69,11 @@ var e = "@DIAL_OVERLAY", t = /* @__PURE__ */ function(e) {
69
69
  },
70
70
  autoSignInProvider: r
71
71
  };
72
- }, b = "dial-overlay-styles", x = /* @__PURE__ */ function(e) {
72
+ }, y = "dial-overlay-styles", b = /* @__PURE__ */ function(e) {
73
73
  return e.Root = "dial-overlay-root", e.Iframe = "dial-overlay-iframe", e.Loader = "dial-overlay-loader", e.LoaderHidden = "dial-overlay-loader--hidden", e;
74
- }({}), S = "\n.dial-overlay-root {\n position: relative;\n}\n.dial-overlay-iframe {\n display: block;\n width: 100%;\n height: 100%;\n border: none;\n}\n.dial-overlay-loader {\n position: absolute;\n inset: 0;\n z-index: 2;\n display: flex;\n align-items: center;\n justify-content: center;\n box-sizing: border-box;\n background: var(--dial-overlay-loader-background, #ffffff);\n color: var(--dial-overlay-loader-color, #2764d9);\n}\n.dial-overlay-loader--hidden {\n display: none !important;\n}\n", C = () => {
75
- v(b, S);
76
- }, w = class {
74
+ }({}), x = "\n.dial-overlay-root {\n position: relative;\n}\n.dial-overlay-iframe {\n display: block;\n width: 100%;\n height: 100%;\n border: none;\n}\n.dial-overlay-loader {\n position: absolute;\n inset: 0;\n z-index: 2;\n display: flex;\n align-items: center;\n justify-content: center;\n box-sizing: border-box;\n background: var(--dial-overlay-loader-background, #ffffff);\n color: var(--dial-overlay-loader-color, #2764d9);\n}\n.dial-overlay-loader--hidden {\n display: none !important;\n}\n", S = () => {
75
+ _(y, x);
76
+ }, C = class {
77
77
  promise;
78
78
  resolveFn;
79
79
  rejectFn;
@@ -89,32 +89,32 @@ var e = "@DIAL_OVERLAY", t = /* @__PURE__ */ function(e) {
89
89
  reject(e) {
90
90
  this.settled || (this.settled = !0, this.rejectFn(e));
91
91
  }
92
- }, T = 1e4, E = "data-dial-overlay-loader", D = class extends Error {
92
+ }, w = 1e4, T = "data-dial-overlay-loader", E = class extends Error {
93
93
  code;
94
94
  requestType;
95
95
  constructor(e, t) {
96
96
  super(`ChatOverlay: request "${e}" failed [${t.code}]: ${t.message}`), this.name = "ChatOverlayRequestError", this.code = t.code, this.requestType = e;
97
97
  }
98
- }, O = (e) => {
98
+ }, D = (e) => {
99
99
  if (typeof e != "string") return e;
100
100
  let t = document.querySelector(e);
101
101
  if (!t) throw Error(`ChatOverlay: no element matches selector "${e}"`);
102
102
  return t;
103
- }, k = (e) => {
103
+ }, O = (e) => {
104
104
  let t = document.createElement("iframe");
105
105
  t.src = e.domain, t.name = "overlay", t.setAttribute("aria-label", "DIAL Chat"), t.setAttribute("sandbox", "allow-same-origin allow-scripts allow-modals allow-forms allow-popups allow-downloads allow-popups-to-escape-sandbox");
106
106
  let n = ["clipboard-write"];
107
- return e.enabledFeatures?.includes(r.VoiceInput) && n.push("microphone"), t.setAttribute("allow", n.join("; ")), t.className = x.Iframe, t;
108
- }, A = (e) => {
107
+ return e.enabledFeatures?.includes(r.VoiceInput) && n.push("microphone"), t.setAttribute("allow", n.join("; ")), t.className = b.Iframe, t;
108
+ }, k = (e) => {
109
109
  let t = document.createElement("div");
110
- return t.setAttribute(E, ""), t.innerHTML = e.loaderInnerHTML ?? p, t.className = [x.Loader, e.loaderClass].filter(Boolean).join(" "), e.loaderStyles && _(t, e.loaderStyles), t;
111
- }, j = class {
110
+ return t.setAttribute(T, ""), t.innerHTML = e.loaderInnerHTML ?? "<svg viewBox=\"0 0 50 50\" width=\"32\" height=\"32\" role=\"presentation\" aria-hidden=\"true\"><circle cx=\"25\" cy=\"25\" r=\"20\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"4\" stroke-linecap=\"round\" stroke-dasharray=\"31.4 31.4\"><animateTransform attributeName=\"transform\" type=\"rotate\" from=\"0 25 25\" to=\"360 25 25\" dur=\"1s\" repeatCount=\"indefinite\" /></circle></svg>", t.className = [b.Loader, e.loaderClass].filter(Boolean).join(" "), e.loaderStyles && g(t, e.loaderStyles), t;
111
+ }, A = class {
112
112
  root;
113
113
  iframe;
114
114
  loader;
115
115
  options;
116
116
  targetOrigin;
117
- readyGate = new w();
117
+ readyGate = new C();
118
118
  pendingRequests = /* @__PURE__ */ new Map();
119
119
  eventSubscribers = /* @__PURE__ */ new Map();
120
120
  messageListener = (e) => {
@@ -122,9 +122,9 @@ var e = "@DIAL_OVERLAY", t = /* @__PURE__ */ function(e) {
122
122
  };
123
123
  isDestroyed = !1;
124
124
  constructor(e, t) {
125
- this.root = O(e), this.options = { ...t }, this.targetOrigin = new URL(t.domain).origin, C(), this.iframe = k(this.options), this.loader = A(this.options);
125
+ this.root = D(e), this.options = { ...t }, this.targetOrigin = new URL(t.domain).origin, S(), this.iframe = O(this.options), this.loader = k(this.options);
126
126
  let n = window.getComputedStyle(this.root).position;
127
- (n === "static" || n === "") && this.root.classList.add(x.Root), this.root.appendChild(this.loader), this.root.appendChild(this.iframe), window.addEventListener("message", this.messageListener), this.readyGate.promise.catch(() => void 0);
127
+ (n === "static" || n === "") && this.root.classList.add(b.Root), this.root.appendChild(this.loader), this.root.appendChild(this.iframe), window.addEventListener("message", this.messageListener), this.readyGate.promise.catch(() => void 0);
128
128
  }
129
129
  ready() {
130
130
  return this.readyGate.promise;
@@ -201,7 +201,7 @@ var e = "@DIAL_OVERLAY", t = /* @__PURE__ */ function(e) {
201
201
  sendCurrentOverlayOptions() {
202
202
  let e = { hostDomain: window.location.origin };
203
203
  this.options.theme !== void 0 && (e.theme = this.options.theme), this.options.modelId !== void 0 && (e.modelId = this.options.modelId), this.options.overlayConversationId !== void 0 && (e.overlayConversationId = this.options.overlayConversationId), this.options.enabledFeatures !== void 0 && (e.enabledFeatures = this.options.enabledFeatures);
204
- let n = y(this.options), r = n?.providerUiModes;
204
+ let n = v(this.options), r = n?.providerUiModes;
205
205
  r !== void 0 && Object.keys(r).length > 0 && (e.authProviderUiModes = r);
206
206
  let i = n?.autoSignInProvider?.trim();
207
207
  return i && (e.authAutoSignInProvider = i), this.send(t.SetOverlayOptions, e, { bypassReadyGate: !0 });
@@ -211,7 +211,7 @@ var e = "@DIAL_OVERLAY", t = /* @__PURE__ */ function(e) {
211
211
  }
212
212
  dispatchRequest(e, t) {
213
213
  if (this.isDestroyed) return Promise.reject(/* @__PURE__ */ Error("ChatOverlay: instance was destroyed"));
214
- let n = this.options.requestTimeout ?? T, r = new g(e, n);
214
+ let n = this.options.requestTimeout ?? w, r = new h(e, n);
215
215
  this.pendingRequests.set(r.requestId, r), r.promise.finally(() => {
216
216
  this.pendingRequests.delete(r.requestId);
217
217
  }).catch(() => void 0);
@@ -226,65 +226,55 @@ var e = "@DIAL_OVERLAY", t = /* @__PURE__ */ function(e) {
226
226
  handleMessage(e) {
227
227
  if (e.source !== this.iframe.contentWindow) return;
228
228
  let t = e.data;
229
- if (d(t)) {
230
- this.handleResponse(t);
231
- return;
232
- }
233
- f(t) && this.handleEvent(t);
229
+ d(t) ? this.handleResponse(t) : f(t) && this.handleEvent(t);
234
230
  }
235
231
  handleResponse(e) {
236
232
  let t = this.pendingRequests.get(e.requestId);
237
- if (!(!t || !t.matches(e.type, e.requestId))) {
238
- if (this.pendingRequests.delete(e.requestId), e.error) {
239
- t.reject(new D(t.requestType, e.error));
240
- return;
241
- }
242
- t.resolve(e.payload);
243
- }
233
+ t && t.matches(e.type, e.requestId) && (this.pendingRequests.delete(e.requestId), e.error ? t.reject(new E(t.requestType, e.error)) : t.resolve(e.payload));
244
234
  }
245
235
  handleEvent(e) {
246
236
  let t = e.type;
247
237
  t === n.Ready && this.sendCurrentOverlayOptions().catch(() => void 0), t === (this.options.loaderHideEvent ?? n.Ready) && this.hideLoader(), t === n.ReadyToInteract && this.readyGate.resolve(!0), this.notifySubscribers(t, e.payload);
248
238
  }
249
239
  hideLoader() {
250
- this.loader.classList.add(x.LoaderHidden), this.loader.style.removeProperty("display");
240
+ this.loader.classList.add(b.LoaderHidden), this.loader.style.removeProperty("display");
251
241
  }
252
242
  notifySubscribers(e, t) {
253
243
  this.eventSubscribers.get(e)?.forEach((e) => e(t));
254
244
  }
255
- }, M = 1279, N = 380, P = 600, F = 999999, I = "24px", L = "<svg viewBox=\"0 0 24 24\" width=\"24\" height=\"24\" aria-hidden=\"true\" focusable=\"false\"><path fill=\"currentColor\" d=\"M4 4h16v12H7l-3 3V4z\"/></svg>", R = "<svg viewBox=\"0 0 24 24\" width=\"20\" height=\"20\" aria-hidden=\"true\" focusable=\"false\"><path fill=\"currentColor\" d=\"M18.3 5.71 12 12.01l-6.3-6.3-1.4 1.41 6.29 6.29-6.29 6.29 1.4 1.41 6.3-6.3 6.3 6.3 1.4-1.41-6.29-6.29 6.29-6.29z\"/></svg>", z = "<svg viewBox=\"0 0 24 24\" width=\"20\" height=\"20\" aria-hidden=\"true\" focusable=\"false\"><path fill=\"currentColor\" d=\"M4 4h6v2H6v4H4V4zm10 0h6v6h-2V6h-4V4zM4 14h2v4h4v2H4v-6zm14 0h2v6h-6v-2h4v-4z\"/></svg>", B = "dial-overlay-manager-styles", V = "\n.dial-overlay-btn {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 48px;\n height: 48px;\n border: none;\n border-radius: 999px;\n cursor: pointer;\n background: var(--dial-overlay-btn-background, #2764d9);\n color: var(--dial-overlay-btn-color, #ffffff);\n}\n.dial-overlay-btn:hover,\n.dial-overlay-btn:focus-visible {\n background: var(--dial-overlay-btn-background-hover, #1d4fb8);\n outline: 2px solid var(--dial-overlay-btn-outline, #1d4fb8);\n outline-offset: 2px;\n}\n", H = () => {
256
- v(B, V);
257
- }, U = (e, t) => {
245
+ }, j = 1279, M = 380, N = 600, P = 999999, F = "24px", I = "<svg viewBox=\"0 0 24 24\" width=\"24\" height=\"24\" aria-hidden=\"true\" focusable=\"false\"><path fill=\"currentColor\" d=\"M4 4h16v12H7l-3 3V4z\"/></svg>", L = "<svg viewBox=\"0 0 24 24\" width=\"20\" height=\"20\" aria-hidden=\"true\" focusable=\"false\"><path fill=\"currentColor\" d=\"M18.3 5.71 12 12.01l-6.3-6.3-1.4 1.41 6.29 6.29-6.29 6.29 1.4 1.41 6.3-6.3 6.3 6.3 1.4-1.41-6.29-6.29 6.29-6.29z\"/></svg>", R = "<svg viewBox=\"0 0 24 24\" width=\"20\" height=\"20\" aria-hidden=\"true\" focusable=\"false\"><path fill=\"currentColor\" d=\"M4 4h6v2H6v4H4V4zm10 0h6v6h-2V6h-4V4zM4 14h2v4h4v2H4v-6zm14 0h2v6h-6v-2h4v-4z\"/></svg>", z = "dial-overlay-manager-styles", B = "\n.dial-overlay-btn {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 48px;\n height: 48px;\n border: none;\n border-radius: 999px;\n cursor: pointer;\n background: var(--dial-overlay-btn-background, #2764d9);\n color: var(--dial-overlay-btn-color, #ffffff);\n}\n.dial-overlay-btn:hover,\n.dial-overlay-btn:focus-visible {\n background: var(--dial-overlay-btn-background-hover, #1d4fb8);\n outline: 2px solid var(--dial-overlay-btn-outline, #1d4fb8);\n outline-offset: 2px;\n}\n", V = () => {
246
+ _(z, B);
247
+ }, H = (e, t) => {
258
248
  let n = document.createElement("button");
259
249
  return n.type = "button", n.className = "dial-overlay-btn", n.setAttribute("aria-label", e), n.innerHTML = t, n;
260
- }, W = (e) => typeof e == "number" ? `${e}px` : e, G = /* @__PURE__ */ function(e) {
250
+ }, U = (e) => typeof e == "number" ? `${e}px` : e, W = /* @__PURE__ */ function(e) {
261
251
  return e.LeftBottom = "left-bottom", e.LeftTop = "left-top", e.RightBottom = "right-bottom", e.RightTop = "right-top", e;
262
- }({}), K = {
252
+ }({}), G = {
263
253
  "right-bottom": {
264
- insetInlineEnd: I,
265
- insetBlockEnd: I,
254
+ insetInlineEnd: F,
255
+ insetBlockEnd: F,
266
256
  insetInlineStart: "auto",
267
257
  insetBlockStart: "auto"
268
258
  },
269
259
  "right-top": {
270
- insetInlineEnd: I,
271
- insetBlockStart: I,
260
+ insetInlineEnd: F,
261
+ insetBlockStart: F,
272
262
  insetInlineStart: "auto",
273
263
  insetBlockEnd: "auto"
274
264
  },
275
265
  "left-bottom": {
276
- insetInlineStart: I,
277
- insetBlockEnd: I,
266
+ insetInlineStart: F,
267
+ insetBlockEnd: F,
278
268
  insetInlineEnd: "auto",
279
269
  insetBlockStart: "auto"
280
270
  },
281
271
  "left-top": {
282
- insetInlineStart: I,
283
- insetBlockStart: I,
272
+ insetInlineStart: F,
273
+ insetBlockStart: F,
284
274
  insetInlineEnd: "auto",
285
275
  insetBlockEnd: "auto"
286
276
  }
287
- }, q = class {
277
+ }, K = class {
288
278
  overlays = /* @__PURE__ */ new Map();
289
279
  abortController = new AbortController();
290
280
  isDestroyed = !1;
@@ -296,9 +286,9 @@ var e = "@DIAL_OVERLAY", t = /* @__PURE__ */ function(e) {
296
286
  }
297
287
  createOverlay(e) {
298
288
  if (this.overlays.has(e.overlayId)) throw Error(`ChatOverlayManager: overlay "${e.overlayId}" already exists`);
299
- H();
289
+ V();
300
290
  let t = document.createElement("div");
301
- t.setAttribute("data-dial-overlay-container", e.overlayId), _(t, {
291
+ t.setAttribute("data-dial-overlay-container", e.overlayId), g(t, {
302
292
  display: "flex",
303
293
  flexDirection: "column",
304
294
  overflow: "hidden",
@@ -307,24 +297,24 @@ var e = "@DIAL_OVERLAY", t = /* @__PURE__ */ function(e) {
307
297
  background: "#ffffff"
308
298
  });
309
299
  let n = document.createElement("div");
310
- _(n, {
300
+ g(n, {
311
301
  display: "flex",
312
302
  justifyContent: "flex-end",
313
303
  gap: "8px",
314
304
  padding: "8px"
315
305
  });
316
- let r = U(e.closeButtonAriaLabel ?? "Collapse", R);
306
+ let r = H(e.closeButtonAriaLabel ?? "Collapse", L);
317
307
  n.appendChild(r);
318
308
  let i;
319
- e.allowFullscreen && (i = U(e.fullscreenButtonAriaLabel ?? "Open full screen", z), n.appendChild(i));
309
+ e.allowFullscreen && (i = H(e.fullscreenButtonAriaLabel ?? "Open full screen", R), n.appendChild(i));
320
310
  let a = document.createElement("div");
321
- _(a, {
311
+ g(a, {
322
312
  flex: "1",
323
313
  minHeight: "0"
324
314
  }), t.appendChild(n), t.appendChild(a), document.body.appendChild(t);
325
- let o = new j(a, e);
315
+ let o = new A(a, e);
326
316
  e.allowFullscreen && o.allowFullscreen();
327
- let s = U(e.toggleButtonAriaLabel ?? "Open chat", L);
317
+ let s = H(e.toggleButtonAriaLabel ?? "Open chat", I);
328
318
  document.body.appendChild(s);
329
319
  let c = {
330
320
  overlay: o,
@@ -409,32 +399,28 @@ var e = "@DIAL_OVERLAY", t = /* @__PURE__ */ function(e) {
409
399
  return t;
410
400
  }
411
401
  applyLayout(e) {
412
- let { options: t, container: n, toggleButton: r } = e, i = t.position ?? "right-bottom", a = String(t.zIndex ?? F);
413
- if (_(r, {
402
+ let { options: t, container: n, toggleButton: r } = e, i = t.position ?? "right-bottom", a = String(t.zIndex ?? P);
403
+ g(r, {
414
404
  position: "fixed",
415
405
  zIndex: a,
416
- ...K[i]
417
- }), _(n, {
406
+ ...G[i]
407
+ }), g(n, {
418
408
  position: "fixed",
419
409
  zIndex: a
420
- }), window.innerWidth <= M) {
421
- _(n, {
422
- insetInlineStart: "0",
423
- insetInlineEnd: "0",
424
- insetBlockStart: "0",
425
- insetBlockEnd: "0",
426
- width: "100%",
427
- height: "100%",
428
- borderRadius: "0"
429
- });
430
- return;
431
- }
432
- _(n, {
433
- width: W(t.width ?? N),
434
- height: W(t.height ?? P),
435
- ...K[i]
410
+ }), window.innerWidth <= j ? g(n, {
411
+ insetInlineStart: "0",
412
+ insetInlineEnd: "0",
413
+ insetBlockStart: "0",
414
+ insetBlockEnd: "0",
415
+ width: "100%",
416
+ height: "100%",
417
+ borderRadius: "0"
418
+ }) : g(n, {
419
+ width: U(t.width ?? M),
420
+ height: U(t.height ?? N),
421
+ ...G[i]
436
422
  });
437
423
  }
438
424
  };
439
425
  //#endregion
440
- export { j as ChatOverlay, q as ChatOverlayManager, D as ChatOverlayRequestError, i as DEPRECATED_OVERLAY_FEATURE_ALIASES, e as DIAL_OVERLAY_NAMESPACE, s as OverlayAuthUiMode, n as OverlayEventType, r as OverlayFeature, G as OverlayPosition, c as OverlayRequestErrorCode, t as OverlayRequestType, l as OverlayStageStatus, f as isOverlayMessageEvent, u as isOverlayMessageRequest, d as isOverlayMessageResponse, o as resolveOverlayFeature };
426
+ export { A as ChatOverlay, K as ChatOverlayManager, E as ChatOverlayRequestError, i as DEPRECATED_OVERLAY_FEATURE_ALIASES, e as DIAL_OVERLAY_NAMESPACE, s as OverlayAuthUiMode, n as OverlayEventType, r as OverlayFeature, W as OverlayPosition, c as OverlayRequestErrorCode, t as OverlayRequestType, l as OverlayStageStatus, f as isOverlayMessageEvent, u as isOverlayMessageRequest, d as isOverlayMessageResponse, o as resolveOverlayFeature };
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@epam/ai-dial-chat-overlay",
3
3
  "description": "Embeddable postMessage-based ChatOverlay/ChatOverlayManager widget for hosting a DIAL Chat instance inside a third-party page",
4
- "version": "1.3.0-dev.124",
4
+ "version": "1.3.0-dev.126",
5
5
  "license": "Apache-2.0",
6
6
  "type": "module",
7
7
  "main": "./index.js",