@paramms/chat-widget 1.0.10 → 1.0.12

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