@paramms/chat-widget 1.0.8 → 1.0.9

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