@paramms/chat-widget 1.0.21 → 1.0.23

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 (7) hide show
  1. package/dist/connection.d.ts +1 -3
  2. package/dist/index.d.ts +13 -0
  3. package/dist/index.js +1 -1
  4. package/dist/index.js.map +1 -1
  5. package/dist/react.js +151 -147
  6. package/dist/react.js.map +1 -1
  7. package/package.json +1 -1
package/dist/react.js CHANGED
@@ -1,111 +1,113 @@
1
- import { jsxs as j, jsx as u, Fragment as $ } from "react/jsx-runtime";
2
- import { useState as L, useRef as k, useEffect as W } from "react";
3
- import { mount as D } from "./index.js";
1
+ import { jsxs as S, jsx as p, Fragment as $ } from "react/jsx-runtime";
2
+ import { useState as D, useRef as k, useEffect as z } from "react";
3
+ import { mount as T } from "./index.js";
4
4
  function A({
5
- url: b,
5
+ url: x,
6
6
  apiUrl: i,
7
- profileId: a,
8
- userId: e,
7
+ profileId: b,
8
+ userId: t,
9
9
  userName: l,
10
10
  userEmail: c,
11
11
  userAvatar: o,
12
- contextTitle: m,
12
+ contextTitle: w,
13
13
  contextSubtitle: y,
14
- contextStatus: t,
15
- subjectId: p,
16
- accent: s,
14
+ contextStatus: e,
15
+ subjectId: a,
16
+ accent: d,
17
17
  launcher: n,
18
- position: d,
18
+ position: s,
19
19
  quickReplies: f,
20
20
  height: h = "100%",
21
21
  i18n: g,
22
22
  translateLang: r
23
23
  }) {
24
- const w = k(null), x = k(null);
25
- return W(() => {
24
+ const m = k(null), u = k(null);
25
+ return z(() => {
26
26
  var v;
27
- if (w.current)
28
- return (v = x.current) == null || v.close(), x.current = D({
29
- el: w.current,
30
- url: b,
27
+ if (m.current)
28
+ return (v = u.current) == null || v.close(), u.current = T({
29
+ el: m.current,
30
+ url: x,
31
31
  ...i ? { apiUrl: i } : {},
32
- profileId: a,
33
- ...p ? { subjectId: p } : {},
34
- ...e ? { token: e } : {},
35
- ...e || l || c || o ? {
32
+ profileId: b,
33
+ ...a ? { subjectId: a } : {},
34
+ ...t ? { userId: t } : {},
35
+ ...t || l || c || o ? {
36
36
  user: {
37
37
  ...l ? { name: l } : {},
38
38
  ...c ? { email: c } : {},
39
39
  ...o ? { avatar: o } : {}
40
40
  }
41
41
  } : {},
42
- ...m ? {
42
+ ...w ? {
43
43
  subject: {
44
- title: m,
44
+ title: w,
45
45
  ...y ? { subtitle: y } : {},
46
- ...t ? { status: t } : {}
46
+ ...e ? { status: e } : {}
47
47
  }
48
48
  } : {},
49
49
  ...f ? { quickReplies: f } : {},
50
- ...s ? { accent: s } : {},
50
+ ...d ? { accent: d } : {},
51
51
  ...r ? { translateLang: r } : {},
52
52
  ...g ? { i18n: g } : {},
53
- ...n ? { launcher: n, position: d ?? "bottom-right" } : {}
53
+ ...n ? { launcher: n, position: s ?? "bottom-right" } : {}
54
54
  }), () => {
55
55
  var C;
56
- (C = x.current) == null || C.close(), x.current = null;
56
+ (C = u.current) == null || C.close(), u.current = null;
57
57
  };
58
- }, [b, i, a, p, e, l, c, s, n, d, r]), /* @__PURE__ */ u(
58
+ }, [x, i, b, a, t, l, c, d, n, s, r]), /* @__PURE__ */ p(
59
59
  "div",
60
60
  {
61
- ref: w,
61
+ ref: m,
62
62
  style: n ? { width: 0, height: 0, overflow: "hidden" } : { width: "100%", height: h, minHeight: h === "100%" ? "480px" : void 0 }
63
63
  }
64
64
  );
65
65
  }
66
- const T = [
66
+ const B = [
67
67
  "Is this still available?",
68
68
  "Can I schedule a viewing?",
69
69
  "What is your best price?"
70
70
  ];
71
71
  function K({
72
- url: b,
72
+ url: x,
73
73
  apiUrl: i,
74
- profileId: a,
75
- listingId: e,
74
+ profileId: b,
75
+ listingId: t,
76
76
  listingTitle: l,
77
77
  listingMeta: c,
78
78
  listingPrice: o,
79
- listingStatus: m,
79
+ listingStatus: w,
80
80
  userId: y,
81
- userName: t,
82
- userEmail: p,
83
- userAvatar: s,
81
+ userName: e,
82
+ userEmail: a,
83
+ userAvatar: d,
84
84
  accent: n,
85
- launcher: d,
85
+ launcher: s,
86
86
  position: f,
87
87
  quickReplies: h,
88
88
  height: g = "100%",
89
89
  i18n: r,
90
- translateLang: w
90
+ translateLang: m
91
91
  }) {
92
- const x = k(null), v = k(null);
93
- return W(() => {
94
- var C;
95
- if (x.current)
96
- return (C = v.current) == null || C.close(), v.current = D({
97
- el: x.current,
98
- url: b,
92
+ const u = k(null), v = k(null);
93
+ return z(() => {
94
+ if (!u.current) return;
95
+ let C = !1;
96
+ const M = setTimeout(() => {
97
+ var j;
98
+ C || !u.current || ((j = v.current) == null || j.close(), v.current = T({
99
+ el: u.current,
100
+ url: x,
99
101
  ...i ? { apiUrl: i } : {},
100
- profileId: a,
101
- ...e ? { subjectId: `listing_${e}` } : {},
102
- ...y ? { token: y } : {},
103
- ...y || t || p || s ? {
102
+ profileId: b,
103
+ ...t ? { subjectId: `listing_${t}` } : {},
104
+ ...y ? { userId: y } : {},
105
+ ...y || e || a || d ? {
104
106
  user: {
105
- ...t ? { name: t } : {},
106
- ...p ? { email: p } : {},
107
- ...s ? { avatar: s } : {},
108
- ...e ? { meta: { listingId: e } } : {}
107
+ ...e ? { name: e } : {},
108
+ ...a ? { email: a } : {},
109
+ ...d ? { avatar: d } : {},
110
+ ...t ? { meta: { listingId: t } } : {}
109
111
  }
110
112
  } : {},
111
113
  ...l ? {
@@ -113,76 +115,78 @@ function K({
113
115
  title: l,
114
116
  ...c ? { subtitle: c } : {},
115
117
  ...o ? { tags: [`$${o.toLocaleString()}`] } : {},
116
- ...m ? { status: m } : {}
118
+ ...w ? { status: w } : {}
117
119
  }
118
120
  } : {},
119
- quickReplies: h ?? T,
121
+ quickReplies: h ?? B,
120
122
  ...n ? { accent: n } : {},
121
- ...w ? { translateLang: w } : {},
123
+ ...m ? { translateLang: m } : {},
122
124
  ...r ? { i18n: r } : {},
123
- ...d ? { launcher: d, position: f ?? "bottom-right" } : {}
124
- }), () => {
125
- var z;
126
- (z = v.current) == null || z.close(), v.current = null;
127
- };
128
- }, [b, i, a, e, y, t, p, n, d, f, w]), /* @__PURE__ */ u(
125
+ ...s ? { launcher: s, position: f ?? "bottom-right" } : {}
126
+ }));
127
+ }, 0);
128
+ return () => {
129
+ var j;
130
+ C = !0, clearTimeout(M), (j = v.current) == null || j.close(), v.current = null;
131
+ };
132
+ }, [x, i, b, t, y, n, s, f, m]), /* @__PURE__ */ p(
129
133
  "div",
130
134
  {
131
- ref: x,
132
- style: d ? { width: 0, height: 0, overflow: "hidden" } : { width: "100%", height: g, minHeight: g === "100%" ? "480px" : void 0 }
135
+ ref: u,
136
+ style: s ? { width: 0, height: 0, overflow: "hidden" } : { width: "100%", height: g, minHeight: g === "100%" ? "480px" : void 0 }
133
137
  }
134
138
  );
135
139
  }
136
140
  function F({
137
- url: b,
141
+ url: x,
138
142
  apiUrl: i,
139
- profileId: a,
140
- userId: e,
143
+ profileId: b,
144
+ userId: t,
141
145
  userName: l,
142
146
  userEmail: c,
143
147
  accent: o,
144
- height: m = "100%",
148
+ height: w = "100%",
145
149
  i18n: y
146
150
  }) {
147
- const [t, p] = L(null), s = k(null), n = k(null), d = k(null), f = k(null);
148
- W(() => {
149
- if (!s.current) return;
151
+ const [e, a] = D(null), d = k(null), n = k(null), s = k(null), f = k(null);
152
+ z(() => {
153
+ if (!d.current) return;
150
154
  let g = !1;
151
155
  return import("./chatlist.js").then(({ mountChatList: r }) => {
152
- g || !s.current || (d.current = r({
153
- el: s.current,
154
- url: b,
156
+ g || !d.current || (s.current = r({
157
+ el: d.current,
158
+ url: x,
155
159
  ...i ? { apiUrl: i } : {},
156
- profileId: a,
157
- onSelect: (w) => p(w),
158
- ...e ? { userId: e } : {},
160
+ profileId: b,
161
+ onSelect: (m) => a(m),
162
+ ...t ? { userId: t } : {},
159
163
  ...o ? { accent: o } : {},
160
164
  ...y ? { i18n: y } : {}
161
165
  }));
162
166
  }), () => {
163
167
  var r;
164
- g = !0, (r = d.current) == null || r.close(), d.current = null;
168
+ g = !0, (r = s.current) == null || r.close(), s.current = null;
165
169
  };
166
- }, [b, a, e]), W(() => {
170
+ }, [x, b, t]), z(() => {
167
171
  var g;
168
- if (!(!n.current || !t))
169
- return (g = f.current) == null || g.close(), f.current = D({
172
+ if (!(!n.current || !e))
173
+ return (g = f.current) == null || g.close(), f.current = T({
170
174
  el: n.current,
171
- url: b,
175
+ url: x,
172
176
  ...i ? { apiUrl: i } : {},
173
- profileId: a,
174
- ...t.subjectId ? { subjectId: t.subjectId } : {},
175
- ...e ? { token: e } : {},
176
- ...e || l || c ? {
177
+ profileId: b,
178
+ ...e.subjectId ? { subjectId: e.subjectId } : {},
179
+ ...t ? { token: t } : {},
180
+ ...t || l || c ? {
177
181
  user: {
178
182
  ...l ? { name: l } : {},
179
183
  ...c ? { email: c } : {}
180
184
  }
181
185
  } : {},
182
- ...t.subjectTitle ? {
186
+ ...e.subjectTitle ? {
183
187
  subject: {
184
- title: t.subjectTitle,
185
- ...t.subjectMeta ? { subtitle: t.subjectMeta } : {}
188
+ title: e.subjectTitle,
189
+ ...e.subjectMeta ? { subtitle: e.subjectMeta } : {}
186
190
  }
187
191
  } : {},
188
192
  ...o ? { accent: o } : {}
@@ -190,53 +194,53 @@ function F({
190
194
  var r;
191
195
  (r = f.current) == null || r.close(), f.current = null;
192
196
  };
193
- }, [t == null ? void 0 : t.id]);
197
+ }, [e == null ? void 0 : e.id]);
194
198
  const h = typeof window < "u" && window.innerWidth < 768;
195
- return /* @__PURE__ */ j("div", { style: { display: "flex", width: "100%", height: m, minHeight: "400px", overflow: "hidden" }, children: [
196
- /* @__PURE__ */ u("div", { style: {
199
+ return /* @__PURE__ */ S("div", { style: { display: "flex", width: "100%", height: w, minHeight: "400px", overflow: "hidden" }, children: [
200
+ /* @__PURE__ */ p("div", { style: {
197
201
  width: h ? "100%" : "360px",
198
- flex: h && t ? "none" : void 0,
199
- display: h && t ? "none" : "flex",
202
+ flex: h && e ? "none" : void 0,
203
+ display: h && e ? "none" : "flex",
200
204
  flexDirection: "column",
201
205
  borderRight: h ? "none" : "1px solid #e8eaed",
202
206
  minWidth: 0
203
- }, children: /* @__PURE__ */ u("div", { ref: s, style: { width: "100%", height: "100%" } }) }),
204
- t ? /* @__PURE__ */ j("div", { style: { flex: 1, display: "flex", flexDirection: "column", minWidth: 0, position: "relative" }, children: [
205
- h && /* @__PURE__ */ u(
207
+ }, children: /* @__PURE__ */ p("div", { ref: d, style: { width: "100%", height: "100%" } }) }),
208
+ e ? /* @__PURE__ */ S("div", { style: { flex: 1, display: "flex", flexDirection: "column", minWidth: 0, position: "relative" }, children: [
209
+ h && /* @__PURE__ */ p(
206
210
  "button",
207
211
  {
208
- onClick: () => p(null),
212
+ onClick: () => a(null),
209
213
  style: { position: "absolute", top: 12, left: 12, zIndex: 10, background: "none", border: "none", fontSize: 22, cursor: "pointer", color: "#1c1b1a" },
210
214
  children: "←"
211
215
  }
212
216
  ),
213
- /* @__PURE__ */ u("div", { ref: n, style: { width: "100%", height: "100%" } })
214
- ] }) : /* @__PURE__ */ u("div", { style: { flex: 1, display: h ? "none" : "flex", alignItems: "center", justifyContent: "center", color: "#9b9690", fontSize: 14 }, children: "Select a conversation" })
217
+ /* @__PURE__ */ p("div", { ref: n, style: { width: "100%", height: "100%" } })
218
+ ] }) : /* @__PURE__ */ p("div", { style: { flex: 1, display: h ? "none" : "flex", alignItems: "center", justifyContent: "center", color: "#9b9690", fontSize: 14 }, children: "Select a conversation" })
215
219
  ] });
216
220
  }
217
221
  function P({
218
- url: b,
222
+ url: x,
219
223
  apiUrl: i,
220
- profileId: a,
221
- userId: e,
224
+ profileId: b,
225
+ userId: t,
222
226
  userName: l,
223
227
  userEmail: c,
224
228
  accent: o = "#4F63F5",
225
- floating: m = !0,
229
+ floating: w = !0,
226
230
  position: y = "bottom-right",
227
- label: t,
228
- panelWidth: p,
229
- panelHeight: s = "600px"
231
+ label: e,
232
+ panelWidth: a,
233
+ panelHeight: d = "600px"
230
234
  }) {
231
- const [n, d] = L(!1), f = k(null), h = y === "bottom-right", r = t ?? (m ? "💬" : "Messages");
232
- if (W(() => {
233
- const R = (M) => {
234
- M.key === "Escape" && d(!1);
235
+ const [n, s] = D(!1), f = k(null), h = y === "bottom-right", r = e ?? (w ? "💬" : "Messages");
236
+ if (z(() => {
237
+ const R = (L) => {
238
+ L.key === "Escape" && s(!1);
235
239
  };
236
240
  return document.addEventListener("keydown", R), () => document.removeEventListener("keydown", R);
237
- }, []), m) {
238
- const R = typeof window < "u" && window.innerWidth < 480, M = R ? "100vw" : p ?? "420px", B = R ? "100dvh" : s;
239
- return /* @__PURE__ */ j("div", { style: {
241
+ }, []), w) {
242
+ const R = typeof window < "u" && window.innerWidth < 480, L = R ? "100vw" : a ?? "420px", H = R ? "100dvh" : d;
243
+ return /* @__PURE__ */ S("div", { style: {
240
244
  position: "fixed",
241
245
  [h ? "right" : "left"]: "20px",
242
246
  bottom: "20px",
@@ -246,9 +250,9 @@ function P({
246
250
  alignItems: h ? "flex-end" : "flex-start",
247
251
  gap: "12px"
248
252
  }, children: [
249
- /* @__PURE__ */ u("div", { style: {
250
- width: M,
251
- height: B,
253
+ /* @__PURE__ */ p("div", { style: {
254
+ width: L,
255
+ height: H,
252
256
  borderRadius: R ? "0" : "16px",
253
257
  overflow: "hidden",
254
258
  boxShadow: "0 8px 40px rgba(0,0,0,.18)",
@@ -257,24 +261,24 @@ function P({
257
261
  flexDirection: "column",
258
262
  transformOrigin: `bottom ${h ? "right" : "left"}`,
259
263
  animation: n ? "ocl-pop-in .18s ease" : "none"
260
- }, children: /* @__PURE__ */ u(
264
+ }, children: /* @__PURE__ */ p(
261
265
  F,
262
266
  {
263
- url: b,
267
+ url: x,
264
268
  ...i ? { apiUrl: i } : {},
265
- profileId: a,
266
- ...e ? { userId: e } : {},
269
+ profileId: b,
270
+ ...t ? { userId: t } : {},
267
271
  ...l ? { userName: l } : {},
268
272
  ...c ? { userEmail: c } : {},
269
273
  accent: o,
270
274
  height: "100%"
271
275
  }
272
276
  ) }),
273
- /* @__PURE__ */ u(
277
+ /* @__PURE__ */ p(
274
278
  "button",
275
279
  {
276
280
  ref: f,
277
- onClick: () => d((S) => !S),
281
+ onClick: () => s((W) => !W),
278
282
  style: {
279
283
  width: "56px",
280
284
  height: "56px",
@@ -288,23 +292,23 @@ function P({
288
292
  boxShadow: "0 4px 16px rgba(0,0,0,.25)",
289
293
  transition: "transform .15s"
290
294
  },
291
- onMouseEnter: (S) => {
292
- S.target.style.transform = "scale(1.08)";
295
+ onMouseEnter: (W) => {
296
+ W.target.style.transform = "scale(1.08)";
293
297
  },
294
- onMouseLeave: (S) => {
295
- S.target.style.transform = "scale(1)";
298
+ onMouseLeave: (W) => {
299
+ W.target.style.transform = "scale(1)";
296
300
  },
297
301
  children: n ? "✕" : r
298
302
  }
299
303
  ),
300
- /* @__PURE__ */ u("style", { children: "@keyframes ocl-pop-in { from { opacity:0; transform:scale(.95) } to { opacity:1; transform:scale(1) } }" })
304
+ /* @__PURE__ */ p("style", { children: "@keyframes ocl-pop-in { from { opacity:0; transform:scale(.95) } to { opacity:1; transform:scale(1) } }" })
301
305
  ] });
302
306
  }
303
- const w = p ?? "420px", [x, v] = L(null), C = () => {
304
- !n && f.current && v(f.current.getBoundingClientRect()), d((R) => !R);
305
- }, z = x ? x.bottom + 8 : 0, H = x ? window.innerWidth - x.right : 0;
306
- return /* @__PURE__ */ j($, { children: [
307
- /* @__PURE__ */ j(
307
+ const m = a ?? "420px", [u, v] = D(null), C = () => {
308
+ !n && f.current && v(f.current.getBoundingClientRect()), s((R) => !R);
309
+ }, M = u ? u.bottom + 8 : 0, j = u ? window.innerWidth - u.right : 0;
310
+ return /* @__PURE__ */ S($, { children: [
311
+ /* @__PURE__ */ S(
308
312
  "button",
309
313
  {
310
314
  ref: f,
@@ -329,40 +333,40 @@ function P({
329
333
  ]
330
334
  }
331
335
  ),
332
- n && x && /* @__PURE__ */ j($, { children: [
333
- /* @__PURE__ */ u(
336
+ n && u && /* @__PURE__ */ S($, { children: [
337
+ /* @__PURE__ */ p(
334
338
  "div",
335
339
  {
336
- onClick: () => d(!1),
340
+ onClick: () => s(!1),
337
341
  style: { position: "fixed", inset: 0, zIndex: 9998 }
338
342
  }
339
343
  ),
340
- /* @__PURE__ */ u("div", { style: {
344
+ /* @__PURE__ */ p("div", { style: {
341
345
  position: "fixed",
342
- top: z,
343
- right: H,
344
- width: w,
345
- height: s,
346
+ top: M,
347
+ right: j,
348
+ width: m,
349
+ height: d,
346
350
  borderRadius: "16px",
347
351
  overflow: "hidden",
348
352
  boxShadow: "0 8px 40px rgba(0,0,0,.2)",
349
353
  background: "#fff",
350
354
  zIndex: 9999,
351
355
  animation: "ocl-slide-in .18s ease"
352
- }, children: /* @__PURE__ */ u(
356
+ }, children: /* @__PURE__ */ p(
353
357
  F,
354
358
  {
355
- url: b,
359
+ url: x,
356
360
  ...i ? { apiUrl: i } : {},
357
- profileId: a,
358
- ...e ? { userId: e } : {},
361
+ profileId: b,
362
+ ...t ? { userId: t } : {},
359
363
  ...l ? { userName: l } : {},
360
364
  ...c ? { userEmail: c } : {},
361
365
  accent: o,
362
366
  height: "100%"
363
367
  }
364
368
  ) }),
365
- /* @__PURE__ */ u("style", { children: "@keyframes ocl-slide-in { from { opacity:0; transform:translateY(-8px) } to { opacity:1; transform:translateY(0) } }" })
369
+ /* @__PURE__ */ p("style", { children: "@keyframes ocl-slide-in { from { opacity:0; transform:translateY(-8px) } to { opacity:1; transform:translateY(0) } }" })
366
370
  ] })
367
371
  ] });
368
372
  }