@paramms/chat-widget 1.0.37 → 1.0.38

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 (11) hide show
  1. package/dist/chatlist.js +115 -92
  2. package/dist/chatlist.js.map +1 -1
  3. package/dist/embed.js +32 -14
  4. package/dist/embed.js.map +1 -1
  5. package/dist/index.js +446 -392
  6. package/dist/index.js.map +1 -1
  7. package/dist/react.d.ts +2 -1
  8. package/dist/react.js +330 -309
  9. package/dist/react.js.map +1 -1
  10. package/dist/renderer.d.ts +9 -7
  11. package/package.json +1 -1
package/dist/react.js CHANGED
@@ -1,266 +1,282 @@
1
- import { jsxs as B, jsx as f, Fragment as O } from "react/jsx-runtime";
2
- import { useState as D, useRef as $, useEffect as F } from "react";
3
- import { mount as W } from "./index.js";
4
- function P({
5
- url: h,
6
- apiUrl: n,
7
- profileId: l,
8
- token: e,
9
- refreshToken: o,
10
- userId: i,
11
- userName: c,
12
- userEmail: a,
13
- userAvatar: m,
14
- contextTitle: v,
15
- contextSubtitle: u,
16
- contextStatus: b,
17
- subjectId: C,
18
- accent: j,
19
- launcher: x,
1
+ import { jsxs as _, jsx as e, Fragment as A } from "react/jsx-runtime";
2
+ import { useState as D, useRef as S, useEffect as W } from "react";
3
+ import { mount as H } from "./index.js";
4
+ function O({ size: i = 26 }) {
5
+ return /* @__PURE__ */ e("svg", { viewBox: "0 0 24 24", width: i, height: i, fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true", children: /* @__PURE__ */ e(
6
+ "path",
7
+ {
8
+ d: "M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z",
9
+ fill: "currentColor",
10
+ stroke: "currentColor",
11
+ strokeWidth: "2",
12
+ strokeLinecap: "round",
13
+ strokeLinejoin: "round"
14
+ }
15
+ ) });
16
+ }
17
+ function G({ size: i = 22 }) {
18
+ return /* @__PURE__ */ e("svg", { viewBox: "0 0 24 24", width: i, height: i, fill: "none", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true", children: /* @__PURE__ */ e("path", { d: "M18 6 6 18M6 6l12 12", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round" }) });
19
+ }
20
+ function Q({
21
+ url: i,
22
+ apiUrl: r,
23
+ profileId: s,
24
+ token: o,
25
+ refreshToken: l,
26
+ userId: c,
27
+ userName: d,
28
+ userEmail: h,
29
+ userAvatar: v,
30
+ contextTitle: m,
31
+ contextSubtitle: a,
32
+ contextStatus: u,
33
+ subjectId: j,
34
+ accent: C,
35
+ launcher: p,
20
36
  position: t,
21
- quickReplies: p,
22
- height: g = "100%",
37
+ quickReplies: f,
38
+ height: b = "100%",
23
39
  i18n: R,
24
- translateLang: w,
25
- inbox: M,
26
- inboxScope: S
40
+ translateLang: x,
41
+ inbox: w,
42
+ inboxScope: g
27
43
  }) {
28
- const d = $(null), r = $(null), [s, L] = D(!1);
29
- return F(() => {
30
- var _;
31
- if (!s && d.current)
32
- return (_ = r.current) == null || _.close(), r.current = W({
33
- el: d.current,
34
- url: h,
35
- ...n ? { apiUrl: n } : {},
36
- profileId: l,
37
- ...C ? { subjectId: C } : {},
38
- ...e ? { token: e } : {},
39
- ...o ? { refreshToken: o } : {},
40
- ...i ? { userId: i } : {},
41
- ...i || c || a || m ? {
44
+ const M = S(null), n = S(null), [y, $] = D(!1);
45
+ return W(() => {
46
+ var z;
47
+ if (!y && M.current)
48
+ return (z = n.current) == null || z.close(), n.current = H({
49
+ el: M.current,
50
+ url: i,
51
+ ...r ? { apiUrl: r } : {},
52
+ profileId: s,
53
+ ...j ? { subjectId: j } : {},
54
+ ...o ? { token: o } : {},
55
+ ...l ? { refreshToken: l } : {},
56
+ ...c ? { userId: c } : {},
57
+ ...c || d || h || v ? {
42
58
  user: {
43
- ...c ? { name: c } : {},
44
- ...a ? { email: a } : {},
45
- ...m ? { avatar: m } : {}
59
+ ...d ? { name: d } : {},
60
+ ...h ? { email: h } : {},
61
+ ...v ? { avatar: v } : {}
46
62
  }
47
63
  } : {},
48
- ...v ? {
64
+ ...m ? {
49
65
  subject: {
50
- title: v,
51
- ...u ? { subtitle: u } : {},
52
- ...b ? { status: b } : {}
66
+ title: m,
67
+ ...a ? { subtitle: a } : {},
68
+ ...u ? { status: u } : {}
53
69
  }
54
70
  } : {},
55
- ...p ? { quickReplies: p } : {},
56
- ...j ? { accent: j } : {},
57
- ...w ? { translateLang: w } : {},
71
+ ...f ? { quickReplies: f } : {},
72
+ ...C ? { accent: C } : {},
73
+ ...x ? { translateLang: x } : {},
58
74
  ...R ? { i18n: R } : {},
59
- ...M && !x ? { onBack: () => L(!0) } : {},
60
- ...x ? { launcher: x, position: t ?? "bottom-right" } : {}
75
+ ...w && !p ? { onBack: () => $(!0) } : {},
76
+ ...p ? { launcher: p, position: t ?? "bottom-right" } : {}
61
77
  }), () => {
62
- var z;
63
- (z = r.current) == null || z.close(), r.current = null;
78
+ var B;
79
+ (B = n.current) == null || B.close(), n.current = null;
64
80
  };
65
- }, [h, n, l, C, e, i, c, a, j, x, t, w, M, s]), M && !x && s ? /* @__PURE__ */ f(
66
- H,
81
+ }, [i, r, s, j, o, c, d, h, C, p, t, x, w, y]), w && !p && y ? /* @__PURE__ */ e(
82
+ F,
67
83
  {
68
- url: h,
69
- ...n ? { apiUrl: n } : {},
70
- profileId: l,
71
- ...e ? { token: e } : {},
72
- ...o ? { refreshToken: o } : {},
73
- ...i ? { userId: i } : {},
74
- ...c ? { userName: c } : {},
75
- ...a ? { userEmail: a } : {},
76
- ...j ? { accent: j } : {},
77
- scope: S ?? "tenant",
78
- height: g,
79
- onClose: () => L(!1)
84
+ url: i,
85
+ ...r ? { apiUrl: r } : {},
86
+ profileId: s,
87
+ ...o ? { token: o } : {},
88
+ ...l ? { refreshToken: l } : {},
89
+ ...c ? { userId: c } : {},
90
+ ...d ? { userName: d } : {},
91
+ ...h ? { userEmail: h } : {},
92
+ ...C ? { accent: C } : {},
93
+ scope: g ?? "tenant",
94
+ height: b,
95
+ onClose: () => $(!1)
80
96
  }
81
- ) : /* @__PURE__ */ f(
97
+ ) : /* @__PURE__ */ e(
82
98
  "div",
83
99
  {
84
- ref: d,
85
- style: x ? { width: 0, height: 0, overflow: "hidden" } : { width: "100%", height: g, minHeight: g === "100%" ? "480px" : void 0 }
100
+ ref: M,
101
+ style: p ? { width: 0, height: 0, overflow: "hidden" } : { width: "100%", height: b, minHeight: b === "100%" ? "480px" : void 0 }
86
102
  }
87
103
  );
88
104
  }
89
- const k = [
105
+ const Y = [
90
106
  "Is this still available?",
91
107
  "Can I schedule a viewing?",
92
108
  "What is your best price?"
93
109
  ];
94
- function Q({
95
- url: h,
96
- apiUrl: n,
97
- profileId: l,
98
- token: e,
99
- refreshToken: o,
100
- listingId: i,
101
- listingTitle: c,
102
- listingMeta: a,
103
- listingPrice: m,
104
- listingStatus: v,
105
- userId: u,
106
- userName: b,
107
- userEmail: C,
108
- userAvatar: j,
109
- accent: x,
110
+ function V({
111
+ url: i,
112
+ apiUrl: r,
113
+ profileId: s,
114
+ token: o,
115
+ refreshToken: l,
116
+ listingId: c,
117
+ listingTitle: d,
118
+ listingMeta: h,
119
+ listingPrice: v,
120
+ listingStatus: m,
121
+ userId: a,
122
+ userName: u,
123
+ userEmail: j,
124
+ userAvatar: C,
125
+ accent: p,
110
126
  launcher: t,
111
- position: p,
112
- quickReplies: g,
127
+ position: f,
128
+ quickReplies: b,
113
129
  height: R = "100%",
114
- i18n: w,
115
- translateLang: M,
116
- inbox: S,
117
- inboxScope: d
130
+ i18n: x,
131
+ translateLang: w,
132
+ inbox: g,
133
+ inboxScope: M
118
134
  }) {
119
- const r = $(null), s = $(null), [L, _] = D(!1);
120
- return F(() => {
121
- if (L || !r.current) return;
122
- let z = !1;
123
- const A = setTimeout(() => {
124
- var y;
125
- z || !r.current || ((y = s.current) == null || y.close(), s.current = W({
126
- el: r.current,
127
- url: h,
128
- ...n ? { apiUrl: n } : {},
129
- profileId: l,
130
- ...i ? { subjectId: `listing_${i}` } : {},
131
- ...e ? { token: e } : {},
132
- ...o ? { refreshToken: o } : {},
133
- ...u ? { userId: u } : {},
134
- ...u || b || C || j ? {
135
+ const n = S(null), y = S(null), [$, z] = D(!1);
136
+ return W(() => {
137
+ if ($ || !n.current) return;
138
+ let B = !1;
139
+ const L = setTimeout(() => {
140
+ var k;
141
+ B || !n.current || ((k = y.current) == null || k.close(), y.current = H({
142
+ el: n.current,
143
+ url: i,
144
+ ...r ? { apiUrl: r } : {},
145
+ profileId: s,
146
+ ...c ? { subjectId: `listing_${c}` } : {},
147
+ ...o ? { token: o } : {},
148
+ ...l ? { refreshToken: l } : {},
149
+ ...a ? { userId: a } : {},
150
+ ...a || u || j || C ? {
135
151
  user: {
136
- ...b ? { name: b } : {},
137
- ...C ? { email: C } : {},
138
- ...j ? { avatar: j } : {},
139
- ...i ? { meta: { listingId: i } } : {}
152
+ ...u ? { name: u } : {},
153
+ ...j ? { email: j } : {},
154
+ ...C ? { avatar: C } : {},
155
+ ...c ? { meta: { listingId: c } } : {}
140
156
  }
141
157
  } : {},
142
- ...c ? {
158
+ ...d ? {
143
159
  subject: {
144
- title: c,
145
- ...a ? { subtitle: a } : {},
146
- ...m ? { tags: [`$${m.toLocaleString()}`] } : {},
147
- ...v ? { status: v } : {}
160
+ title: d,
161
+ ...h ? { subtitle: h } : {},
162
+ ...v ? { tags: [`$${v.toLocaleString()}`] } : {},
163
+ ...m ? { status: m } : {}
148
164
  }
149
165
  } : {},
150
- quickReplies: g ?? k,
151
- ...x ? { accent: x } : {},
152
- ...M ? { translateLang: M } : {},
153
- ...w ? { i18n: w } : {},
154
- ...S && !t ? { onBack: () => _(!0) } : {},
155
- ...t ? { launcher: t, position: p ?? "bottom-right" } : {}
166
+ quickReplies: b ?? Y,
167
+ ...p ? { accent: p } : {},
168
+ ...w ? { translateLang: w } : {},
169
+ ...x ? { i18n: x } : {},
170
+ ...g && !t ? { onBack: () => z(!0) } : {},
171
+ ...t ? { launcher: t, position: f ?? "bottom-right" } : {}
156
172
  }));
157
173
  }, 0);
158
174
  return () => {
159
- var y;
160
- z = !0, clearTimeout(A), (y = s.current) == null || y.close(), s.current = null;
175
+ var k;
176
+ B = !0, clearTimeout(L), (k = y.current) == null || k.close(), y.current = null;
161
177
  };
162
- }, [h, n, l, i, e, u, x, t, p, M, S, L]), S && !t && L ? /* @__PURE__ */ f(
163
- H,
178
+ }, [i, r, s, c, o, a, p, t, f, w, g, $]), g && !t && $ ? /* @__PURE__ */ e(
179
+ F,
164
180
  {
165
- url: h,
166
- ...n ? { apiUrl: n } : {},
167
- profileId: l,
168
- ...e ? { token: e } : {},
169
- ...o ? { refreshToken: o } : {},
170
- ...u ? { userId: u } : {},
171
- ...b ? { userName: b } : {},
172
- ...C ? { userEmail: C } : {},
173
- ...x ? { accent: x } : {},
174
- scope: d ?? "tenant",
181
+ url: i,
182
+ ...r ? { apiUrl: r } : {},
183
+ profileId: s,
184
+ ...o ? { token: o } : {},
185
+ ...l ? { refreshToken: l } : {},
186
+ ...a ? { userId: a } : {},
187
+ ...u ? { userName: u } : {},
188
+ ...j ? { userEmail: j } : {},
189
+ ...p ? { accent: p } : {},
190
+ scope: M ?? "tenant",
175
191
  height: R,
176
- onClose: () => _(!1)
192
+ onClose: () => z(!1)
177
193
  }
178
- ) : /* @__PURE__ */ f(
194
+ ) : /* @__PURE__ */ e(
179
195
  "div",
180
196
  {
181
- ref: r,
197
+ ref: n,
182
198
  style: t ? { width: 0, height: 0, overflow: "hidden" } : { width: "100%", height: R, minHeight: R === "100%" ? "480px" : void 0 }
183
199
  }
184
200
  );
185
201
  }
186
- function q(h) {
187
- const [n, l] = D(
188
- typeof window < "u" && window.innerWidth <= h
202
+ function q(i) {
203
+ const [r, s] = D(
204
+ typeof window < "u" && window.innerWidth <= i
189
205
  );
190
- return F(() => {
206
+ return W(() => {
191
207
  if (typeof window > "u" || !window.matchMedia) return;
192
- const e = window.matchMedia(`(max-width: ${h}px)`), o = (i) => l(i.matches);
193
- return l(e.matches), e.addEventListener("change", o), () => e.removeEventListener("change", o);
194
- }, [h]), n;
208
+ const o = window.matchMedia(`(max-width: ${i}px)`), l = (c) => s(c.matches);
209
+ return s(o.matches), o.addEventListener("change", l), () => o.removeEventListener("change", l);
210
+ }, [i]), r;
195
211
  }
196
- function H({
197
- url: h,
198
- apiUrl: n,
199
- profileId: l,
200
- tenantId: e,
201
- token: o,
202
- refreshToken: i,
203
- userId: c,
204
- userName: a,
205
- userEmail: m,
206
- accent: v,
207
- height: u = "100%",
208
- i18n: b,
209
- onClose: C,
210
- scope: j = "tenant"
212
+ function F({
213
+ url: i,
214
+ apiUrl: r,
215
+ profileId: s,
216
+ tenantId: o,
217
+ token: l,
218
+ refreshToken: c,
219
+ userId: d,
220
+ userName: h,
221
+ userEmail: v,
222
+ accent: m,
223
+ height: a = "100%",
224
+ i18n: u,
225
+ onClose: j,
226
+ scope: C = "tenant"
211
227
  }) {
212
- const x = !l && !e, [t, p] = D(null), g = $(null), R = $(null), w = $(null), M = $(null);
213
- return F(() => {
214
- if (!g.current) return;
215
- let S = !1;
216
- return import("./chatlist.js").then(({ mountChatList: d }) => {
217
- S || !g.current || (w.current = d({
218
- el: g.current,
219
- url: h,
220
- ...n ? { apiUrl: n } : {},
221
- ...l ? { profileId: l } : {},
222
- ...e ? { tenantId: e } : {},
223
- scope: j,
224
- onSelect: (r) => p(r),
228
+ const p = !s && !o, [t, f] = D(null), b = S(null), R = S(null), x = S(null), w = S(null);
229
+ return W(() => {
230
+ if (!b.current) return;
231
+ let g = !1;
232
+ return import("./chatlist.js").then(({ mountChatList: M }) => {
233
+ g || !b.current || (x.current = M({
234
+ el: b.current,
235
+ url: i,
236
+ ...r ? { apiUrl: r } : {},
237
+ ...s ? { profileId: s } : {},
238
+ ...o ? { tenantId: o } : {},
239
+ scope: C,
240
+ onSelect: (n) => f(n),
225
241
  // Compose (✎) opens the chatroom's general support thread — without
226
242
  // this a user with no conversations yet had an empty list and no way
227
243
  // to ever start one, which is what made ChatApp feel broken.
228
244
  // Compose target: the configured chatroom, else the tenant's default
229
245
  // (oldest chatroom, reported by the server on the first list fetch).
230
246
  onNewChat: () => {
231
- var s;
232
- const r = (s = w.current) == null ? void 0 : s.defaultProfileId();
233
- r && p({ id: "__new__", profileId: r, state: "open", updatedAt: Date.now() });
247
+ var y;
248
+ const n = (y = x.current) == null ? void 0 : y.defaultProfileId();
249
+ n && f({ id: "__new__", profileId: n, state: "open", updatedAt: Date.now() });
234
250
  },
235
- ...o ? { token: o } : {},
236
- ...c ? { userId: c } : {},
237
- ...v ? { accent: v } : {},
238
- ...b ? { i18n: b } : {}
251
+ ...l ? { token: l } : {},
252
+ ...d ? { userId: d } : {},
253
+ ...m ? { accent: m } : {},
254
+ ...u ? { i18n: u } : {}
239
255
  }));
240
256
  }), () => {
241
- var d;
242
- S = !0, (d = w.current) == null || d.close(), w.current = null;
257
+ var M;
258
+ g = !0, (M = x.current) == null || M.close(), x.current = null;
243
259
  };
244
- }, [h, n, l, e, o, c, j]), F(() => {
245
- var d;
260
+ }, [i, r, s, o, l, d, C]), W(() => {
261
+ var M;
246
262
  if (!R.current || !t) return;
247
- (d = M.current) == null || d.close(), M.current = W({
263
+ (M = w.current) == null || M.close(), w.current = H({
248
264
  el: R.current,
249
- url: h,
250
- ...n ? { apiUrl: n } : {},
251
- profileId: t.profileId ?? l,
265
+ url: i,
266
+ ...r ? { apiUrl: r } : {},
267
+ profileId: t.profileId ?? s,
252
268
  // rows always carry theirs; compose sets one explicitly
253
269
  // DM rows open as direct conversations (kind + peer). Opening them via
254
270
  // their dm:… subjectId only works for the participant that OWNS the
255
271
  // thread key — the other side would silently fork a duplicate.
256
272
  ...t.kind === "direct" && t.peerId ? { kind: "direct", peerId: t.peerId } : t.subjectId ? { subjectId: t.subjectId } : {},
257
- ...o ? { token: o } : {},
258
- ...i ? { refreshToken: i } : {},
259
- ...c ? { userId: c } : {},
260
- ...c || a || m ? {
273
+ ...l ? { token: l } : {},
274
+ ...c ? { refreshToken: c } : {},
275
+ ...d ? { userId: d } : {},
276
+ ...d || h || v ? {
261
277
  user: {
262
- ...a ? { name: a } : {},
263
- ...m ? { email: m } : {}
278
+ ...h ? { name: h } : {},
279
+ ...v ? { email: v } : {}
264
280
  }
265
281
  } : {},
266
282
  ...t.subjectTitle ? {
@@ -269,30 +285,30 @@ function H({
269
285
  ...t.subjectMeta ? { subtitle: t.subjectMeta } : {}
270
286
  }
271
287
  } : {},
272
- ...v ? { accent: v } : {},
288
+ ...m ? { accent: m } : {},
273
289
  // Stack navigation: the chatroom's back chevron returns to the list.
274
- onBack: () => p(null)
290
+ onBack: () => f(null)
275
291
  });
276
- const S = setInterval(() => {
277
- var r;
278
- return (r = w.current) == null ? void 0 : r.refresh();
292
+ const g = setInterval(() => {
293
+ var n;
294
+ return (n = x.current) == null ? void 0 : n.refresh();
279
295
  }, 2e4);
280
296
  return () => {
281
- var r, s;
282
- clearInterval(S), (r = M.current) == null || r.close(), M.current = null, (s = w.current) == null || s.refresh();
297
+ var n, y;
298
+ clearInterval(g), (n = w.current) == null || n.close(), w.current = null, (y = x.current) == null || y.refresh();
283
299
  };
284
- }, [t == null ? void 0 : t.id]), x ? /* @__PURE__ */ B("div", { style: { padding: 16, font: "13px system-ui", color: "#b91c1c", background: "#fef2f2", borderRadius: 8 }, children: [
300
+ }, [t == null ? void 0 : t.id]), p ? /* @__PURE__ */ _("div", { style: { padding: 16, font: "13px system-ui", color: "#b91c1c", background: "#fef2f2", borderRadius: 8 }, children: [
285
301
  "[relay] <ChatApp/> needs a ",
286
- /* @__PURE__ */ f("code", { children: "profileId" }),
302
+ /* @__PURE__ */ e("code", { children: "profileId" }),
287
303
  " or a ",
288
- /* @__PURE__ */ f("code", { children: "tenantId" }),
304
+ /* @__PURE__ */ e("code", { children: "tenantId" }),
289
305
  "."
290
- ] }) : /* @__PURE__ */ B("div", { style: { position: "relative", width: "100%", height: u, minHeight: "400px", overflow: "hidden", background: "#fff" }, children: [
291
- C && !t && /* @__PURE__ */ f(
306
+ ] }) : /* @__PURE__ */ _("div", { style: { position: "relative", width: "100%", height: a, minHeight: "400px", overflow: "hidden", background: "#fff" }, children: [
307
+ j && !t && /* @__PURE__ */ e(
292
308
  "button",
293
309
  {
294
- onClick: C,
295
- "aria-label": (b == null ? void 0 : b.close) ?? "Close",
310
+ onClick: j,
311
+ "aria-label": (u == null ? void 0 : u.close) ?? "Close",
296
312
  style: {
297
313
  position: "absolute",
298
314
  top: 8,
@@ -311,55 +327,55 @@ function H({
311
327
  lineHeight: 1,
312
328
  cursor: "pointer"
313
329
  },
314
- children: "✕"
330
+ children: /* @__PURE__ */ e(G, { size: 18 })
315
331
  }
316
332
  ),
317
- /* @__PURE__ */ f("div", { style: {
333
+ /* @__PURE__ */ e("div", { style: {
318
334
  position: "absolute",
319
335
  inset: 0,
320
336
  display: t ? "none" : "flex",
321
337
  flexDirection: "column"
322
- }, children: /* @__PURE__ */ f("div", { ref: g, style: { width: "100%", height: "100%" } }) }),
323
- t && /* @__PURE__ */ f("div", { style: { position: "absolute", inset: 0, display: "flex", flexDirection: "column" }, children: /* @__PURE__ */ f("div", { ref: R, style: { width: "100%", height: "100%" } }) })
338
+ }, children: /* @__PURE__ */ e("div", { ref: b, style: { width: "100%", height: "100%" } }) }),
339
+ t && /* @__PURE__ */ e("div", { style: { position: "absolute", inset: 0, display: "flex", flexDirection: "column" }, children: /* @__PURE__ */ e("div", { ref: R, style: { width: "100%", height: "100%" } }) })
324
340
  ] });
325
341
  }
326
- function V({
327
- url: h,
328
- apiUrl: n,
329
- profileId: l,
330
- tenantId: e,
331
- token: o,
332
- refreshToken: i,
333
- userId: c,
334
- userName: a,
335
- userEmail: m,
336
- scope: v,
337
- accent: u = "#4F63F5",
338
- floating: b = !0,
339
- position: C = "bottom-right",
340
- label: j,
341
- panelWidth: x,
342
+ function X({
343
+ url: i,
344
+ apiUrl: r,
345
+ profileId: s,
346
+ tenantId: o,
347
+ token: l,
348
+ refreshToken: c,
349
+ userId: d,
350
+ userName: h,
351
+ userEmail: v,
352
+ scope: m,
353
+ accent: a = "#4F63F5",
354
+ floating: u = !0,
355
+ position: j = "bottom-right",
356
+ label: C,
357
+ panelWidth: p,
342
358
  panelHeight: t = "600px"
343
359
  }) {
344
- const [p, g] = D(!1), R = $(null), w = C === "bottom-right", S = j ?? (b ? "💬" : "Messages"), d = q(479);
345
- if (F(() => {
346
- const y = (Y) => {
347
- Y.key === "Escape" && g(!1);
360
+ const [f, b] = D(!1), R = S(null), x = j === "bottom-right", w = C ?? (u ? void 0 : "Messages"), g = q(479);
361
+ if (W(() => {
362
+ const L = (k) => {
363
+ k.key === "Escape" && b(!1);
348
364
  };
349
- return document.addEventListener("keydown", y), () => document.removeEventListener("keydown", y);
350
- }, []), b)
351
- return /* @__PURE__ */ B("div", { style: {
365
+ return document.addEventListener("keydown", L), () => document.removeEventListener("keydown", L);
366
+ }, []), u)
367
+ return /* @__PURE__ */ _("div", { style: {
352
368
  position: "fixed",
353
- [w ? "right" : "left"]: "20px",
369
+ [x ? "right" : "left"]: "20px",
354
370
  bottom: "20px",
355
371
  zIndex: 9999,
356
372
  display: "flex",
357
373
  flexDirection: "column",
358
- alignItems: w ? "flex-end" : "flex-start",
374
+ alignItems: x ? "flex-end" : "flex-start",
359
375
  gap: "12px"
360
376
  }, children: [
361
- /* @__PURE__ */ f("div", { style: {
362
- ...d ? {
377
+ /* @__PURE__ */ e("div", { style: {
378
+ ...g ? {
363
379
  position: "fixed",
364
380
  inset: 0,
365
381
  width: "100%",
@@ -367,147 +383,152 @@ function V({
367
383
  borderRadius: "0",
368
384
  zIndex: 9998
369
385
  } : {
370
- width: `min(${x ?? "420px"}, calc(100vw - 40px))`,
386
+ width: `min(${p ?? "420px"}, calc(100vw - 40px))`,
371
387
  height: `min(${t}, calc(100dvh - 108px))`,
372
388
  borderRadius: "16px"
373
389
  },
374
390
  overflow: "hidden",
375
- boxShadow: d ? "none" : "0 8px 40px rgba(0,0,0,.18)",
391
+ boxShadow: g ? "none" : "0 8px 40px rgba(0,0,0,.18)",
376
392
  background: "#fff",
377
- display: p ? "flex" : "none",
393
+ display: f ? "flex" : "none",
378
394
  flexDirection: "column",
379
- transformOrigin: `bottom ${w ? "right" : "left"}`,
380
- animation: p ? "ocl-pop-in .18s ease" : "none"
381
- }, children: /* @__PURE__ */ f(
382
- H,
395
+ transformOrigin: `bottom ${x ? "right" : "left"}`,
396
+ animation: f ? "ocl-pop-in .18s ease" : "none"
397
+ }, children: /* @__PURE__ */ e(
398
+ F,
383
399
  {
384
- url: h,
385
- ...n ? { apiUrl: n } : {},
386
- ...l ? { profileId: l } : {},
387
- ...e ? { tenantId: e } : {},
388
- ...o ? { token: o } : {},
389
- ...i ? { refreshToken: i } : {},
390
- ...c ? { userId: c } : {},
391
- ...a ? { userName: a } : {},
392
- ...m ? { userEmail: m } : {},
393
- ...v ? { scope: v } : {},
394
- accent: u,
400
+ url: i,
401
+ ...r ? { apiUrl: r } : {},
402
+ ...s ? { profileId: s } : {},
403
+ ...o ? { tenantId: o } : {},
404
+ ...l ? { token: l } : {},
405
+ ...c ? { refreshToken: c } : {},
406
+ ...d ? { userId: d } : {},
407
+ ...h ? { userName: h } : {},
408
+ ...v ? { userEmail: v } : {},
409
+ ...m ? { scope: m } : {},
410
+ accent: a,
395
411
  height: "100%",
396
- onClose: () => g(!1)
412
+ onClose: () => b(!1)
397
413
  }
398
414
  ) }),
399
- /* @__PURE__ */ f(
415
+ /* @__PURE__ */ e(
400
416
  "button",
401
417
  {
402
418
  ref: R,
403
- onClick: () => g((y) => !y),
419
+ onClick: () => b((L) => !L),
420
+ "aria-label": f ? "Close chat" : typeof w == "string" ? w : "Open chat",
421
+ "aria-expanded": f,
404
422
  style: {
405
423
  width: "56px",
406
424
  height: "56px",
407
425
  borderRadius: "50%",
408
- background: u,
426
+ background: a,
409
427
  color: "#fff",
410
428
  border: "none",
411
- fontSize: "24px",
429
+ fontSize: "20px",
412
430
  cursor: "pointer",
413
431
  flexShrink: 0,
414
432
  boxShadow: "0 4px 16px rgba(0,0,0,.25)",
415
433
  transition: "transform .15s",
416
- display: p && d ? "none" : "block"
434
+ alignItems: "center",
435
+ justifyContent: "center",
436
+ display: f && g ? "none" : "flex"
417
437
  },
418
- onMouseEnter: (y) => {
419
- y.target.style.transform = "scale(1.08)";
438
+ onMouseEnter: (L) => {
439
+ L.currentTarget.style.transform = "scale(1.08)";
420
440
  },
421
- onMouseLeave: (y) => {
422
- y.target.style.transform = "scale(1)";
441
+ onMouseLeave: (L) => {
442
+ L.currentTarget.style.transform = "scale(1)";
423
443
  },
424
- children: p ? "✕" : S
444
+ children: f ? /* @__PURE__ */ e(G, {}) : C ?? /* @__PURE__ */ e(O, {})
425
445
  }
426
446
  ),
427
- /* @__PURE__ */ f("style", { children: "@keyframes ocl-pop-in { from { opacity:0; transform:scale(.95) } to { opacity:1; transform:scale(1) } }" })
447
+ /* @__PURE__ */ e("style", { children: "@keyframes ocl-pop-in { from { opacity:0; transform:scale(.95) } to { opacity:1; transform:scale(1) } }" })
428
448
  ] });
429
- const r = `min(${x ?? "420px"}, calc(100vw - 16px))`, [s, L] = D(null), _ = () => {
430
- !p && R.current && L(R.current.getBoundingClientRect()), g((y) => !y);
431
- }, z = s ? s.bottom + 8 : 0, A = s ? Math.max(8, window.innerWidth - s.right) : 0;
432
- return /* @__PURE__ */ B(O, { children: [
433
- /* @__PURE__ */ B(
449
+ const M = `min(${p ?? "420px"}, calc(100vw - 16px))`, [n, y] = D(null), $ = () => {
450
+ !f && R.current && y(R.current.getBoundingClientRect()), b((L) => !L);
451
+ }, z = n ? n.bottom + 8 : 0, B = n ? Math.max(8, window.innerWidth - n.right) : 0;
452
+ return /* @__PURE__ */ _(A, { children: [
453
+ /* @__PURE__ */ _(
434
454
  "button",
435
455
  {
436
456
  ref: R,
437
- onClick: _,
457
+ onClick: $,
438
458
  style: {
439
459
  display: "inline-flex",
440
460
  alignItems: "center",
441
461
  gap: "6px",
442
462
  padding: "8px 16px",
443
463
  borderRadius: "8px",
444
- background: p ? u : "transparent",
445
- color: p ? "#fff" : u,
446
- border: `2px solid ${u}`,
464
+ background: f ? a : "transparent",
465
+ color: f ? "#fff" : a,
466
+ border: `2px solid ${a}`,
447
467
  fontSize: "14px",
448
468
  fontWeight: 600,
449
469
  cursor: "pointer",
450
470
  transition: "background .15s, color .15s"
451
471
  },
452
472
  children: [
453
- "💬 ",
454
- S
473
+ /* @__PURE__ */ e(O, { size: 16 }),
474
+ " ",
475
+ w
455
476
  ]
456
477
  }
457
478
  ),
458
- p && s && /* @__PURE__ */ B(O, { children: [
459
- /* @__PURE__ */ f(
479
+ f && n && /* @__PURE__ */ _(A, { children: [
480
+ /* @__PURE__ */ e(
460
481
  "div",
461
482
  {
462
- onClick: () => g(!1),
483
+ onClick: () => b(!1),
463
484
  style: { position: "fixed", inset: 0, zIndex: 9998 }
464
485
  }
465
486
  ),
466
- /* @__PURE__ */ f("div", { style: {
487
+ /* @__PURE__ */ e("div", { style: {
467
488
  position: "fixed",
468
- ...d ? {
489
+ ...g ? {
469
490
  inset: 0,
470
491
  width: "100%",
471
492
  height: "100dvh",
472
493
  borderRadius: "0"
473
494
  } : {
474
495
  top: z,
475
- right: A,
476
- width: r,
496
+ right: B,
497
+ width: M,
477
498
  height: `min(${t}, calc(100dvh - ${z}px - 12px))`,
478
499
  borderRadius: "16px"
479
500
  },
480
501
  overflow: "hidden",
481
- boxShadow: d ? "none" : "0 8px 40px rgba(0,0,0,.2)",
502
+ boxShadow: g ? "none" : "0 8px 40px rgba(0,0,0,.2)",
482
503
  background: "#fff",
483
504
  zIndex: 9999,
484
505
  animation: "ocl-slide-in .18s ease"
485
- }, children: /* @__PURE__ */ f(
486
- H,
506
+ }, children: /* @__PURE__ */ e(
507
+ F,
487
508
  {
488
- url: h,
489
- ...n ? { apiUrl: n } : {},
490
- ...l ? { profileId: l } : {},
491
- ...e ? { tenantId: e } : {},
492
- ...o ? { token: o } : {},
493
- ...i ? { refreshToken: i } : {},
494
- ...c ? { userId: c } : {},
495
- ...a ? { userName: a } : {},
496
- ...m ? { userEmail: m } : {},
497
- ...v ? { scope: v } : {},
498
- accent: u,
509
+ url: i,
510
+ ...r ? { apiUrl: r } : {},
511
+ ...s ? { profileId: s } : {},
512
+ ...o ? { tenantId: o } : {},
513
+ ...l ? { token: l } : {},
514
+ ...c ? { refreshToken: c } : {},
515
+ ...d ? { userId: d } : {},
516
+ ...h ? { userName: h } : {},
517
+ ...v ? { userEmail: v } : {},
518
+ ...m ? { scope: m } : {},
519
+ accent: a,
499
520
  height: "100%",
500
- onClose: () => g(!1)
521
+ onClose: () => b(!1)
501
522
  }
502
523
  ) }),
503
- /* @__PURE__ */ f("style", { children: "@keyframes ocl-slide-in { from { opacity:0; transform:translateY(-8px) } to { opacity:1; transform:translateY(0) } }" })
524
+ /* @__PURE__ */ e("style", { children: "@keyframes ocl-slide-in { from { opacity:0; transform:translateY(-8px) } to { opacity:1; transform:translateY(0) } }" })
504
525
  ] })
505
526
  ] });
506
527
  }
507
528
  export {
508
- H as ChatApp,
509
- V as ChatAppLauncher,
510
- P as ChatWidget,
511
- Q as MarketplaceChat
529
+ F as ChatApp,
530
+ X as ChatAppLauncher,
531
+ Q as ChatWidget,
532
+ V as MarketplaceChat
512
533
  };
513
534
  //# sourceMappingURL=react.js.map