@paramms/chat-widget 1.0.32 → 1.0.34

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