react-sigma-chatbox 1.0.4 → 1.0.5
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/index.js +7 -7
- package/dist/index.mjs +319 -296
- package/dist/react-sigma-chatbox.css +1 -1
- package/package.json +1 -1
package/dist/index.mjs
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import
|
|
2
|
-
var H = { exports: {} },
|
|
1
|
+
import de, { useState as k, useEffect as I, useRef as ne, useMemo as Z } from "react";
|
|
2
|
+
var H = { exports: {} }, Y = {};
|
|
3
3
|
/**
|
|
4
4
|
* @license React
|
|
5
5
|
* react-jsx-runtime.production.js
|
|
@@ -10,28 +10,28 @@ var H = { exports: {} }, W = {};
|
|
|
10
10
|
* LICENSE file in the root directory of this source tree.
|
|
11
11
|
*/
|
|
12
12
|
var se;
|
|
13
|
-
function
|
|
14
|
-
if (se) return
|
|
13
|
+
function ue() {
|
|
14
|
+
if (se) return Y;
|
|
15
15
|
se = 1;
|
|
16
|
-
var r = Symbol.for("react.transitional.element"),
|
|
17
|
-
function n(
|
|
18
|
-
var
|
|
19
|
-
if (d !== void 0 && (
|
|
16
|
+
var r = Symbol.for("react.transitional.element"), i = Symbol.for("react.fragment");
|
|
17
|
+
function n(s, l, d) {
|
|
18
|
+
var m = null;
|
|
19
|
+
if (d !== void 0 && (m = "" + d), l.key !== void 0 && (m = "" + l.key), "key" in l) {
|
|
20
20
|
d = {};
|
|
21
|
-
for (var
|
|
22
|
-
|
|
21
|
+
for (var c in l)
|
|
22
|
+
c !== "key" && (d[c] = l[c]);
|
|
23
23
|
} else d = l;
|
|
24
24
|
return l = d.ref, {
|
|
25
25
|
$$typeof: r,
|
|
26
|
-
type:
|
|
27
|
-
key:
|
|
26
|
+
type: s,
|
|
27
|
+
key: m,
|
|
28
28
|
ref: l !== void 0 ? l : null,
|
|
29
29
|
props: d
|
|
30
30
|
};
|
|
31
31
|
}
|
|
32
|
-
return
|
|
32
|
+
return Y.Fragment = i, Y.jsx = n, Y.jsxs = n, Y;
|
|
33
33
|
}
|
|
34
|
-
var
|
|
34
|
+
var U = {};
|
|
35
35
|
/**
|
|
36
36
|
* @license React
|
|
37
37
|
* react-jsx-runtime.development.js
|
|
@@ -42,101 +42,101 @@ var Y = {};
|
|
|
42
42
|
* LICENSE file in the root directory of this source tree.
|
|
43
43
|
*/
|
|
44
44
|
var ae;
|
|
45
|
-
function
|
|
45
|
+
function he() {
|
|
46
46
|
return ae || (ae = 1, process.env.NODE_ENV !== "production" && (function() {
|
|
47
47
|
function r(t) {
|
|
48
48
|
if (t == null) return null;
|
|
49
49
|
if (typeof t == "function")
|
|
50
|
-
return t.$$typeof ===
|
|
50
|
+
return t.$$typeof === T ? null : t.displayName || t.name || null;
|
|
51
51
|
if (typeof t == "string") return t;
|
|
52
52
|
switch (t) {
|
|
53
53
|
case R:
|
|
54
54
|
return "Fragment";
|
|
55
55
|
case q:
|
|
56
56
|
return "Profiler";
|
|
57
|
-
case
|
|
57
|
+
case A:
|
|
58
58
|
return "StrictMode";
|
|
59
59
|
case z:
|
|
60
60
|
return "Suspense";
|
|
61
|
-
case J:
|
|
62
|
-
return "SuspenseList";
|
|
63
61
|
case G:
|
|
62
|
+
return "SuspenseList";
|
|
63
|
+
case J:
|
|
64
64
|
return "Activity";
|
|
65
65
|
}
|
|
66
66
|
if (typeof t == "object")
|
|
67
67
|
switch (typeof t.tag == "number" && console.error(
|
|
68
68
|
"Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."
|
|
69
69
|
), t.$$typeof) {
|
|
70
|
-
case
|
|
70
|
+
case v:
|
|
71
71
|
return "Portal";
|
|
72
72
|
case X:
|
|
73
73
|
return t.displayName || "Context";
|
|
74
74
|
case V:
|
|
75
75
|
return (t._context.displayName || "Context") + ".Consumer";
|
|
76
|
-
case
|
|
77
|
-
var
|
|
78
|
-
return t = t.displayName, t || (t =
|
|
79
|
-
case
|
|
80
|
-
return
|
|
81
|
-
case
|
|
82
|
-
|
|
76
|
+
case F:
|
|
77
|
+
var o = t.render;
|
|
78
|
+
return t = t.displayName, t || (t = o.displayName || o.name || "", t = t !== "" ? "ForwardRef(" + t + ")" : "ForwardRef"), t;
|
|
79
|
+
case w:
|
|
80
|
+
return o = t.displayName || null, o !== null ? o : r(t.type) || "Memo";
|
|
81
|
+
case S:
|
|
82
|
+
o = t._payload, t = t._init;
|
|
83
83
|
try {
|
|
84
|
-
return r(t(
|
|
84
|
+
return r(t(o));
|
|
85
85
|
} catch {
|
|
86
86
|
}
|
|
87
87
|
}
|
|
88
88
|
return null;
|
|
89
89
|
}
|
|
90
|
-
function
|
|
90
|
+
function i(t) {
|
|
91
91
|
return "" + t;
|
|
92
92
|
}
|
|
93
93
|
function n(t) {
|
|
94
94
|
try {
|
|
95
|
-
|
|
96
|
-
var
|
|
95
|
+
i(t);
|
|
96
|
+
var o = !1;
|
|
97
97
|
} catch {
|
|
98
|
-
|
|
98
|
+
o = !0;
|
|
99
99
|
}
|
|
100
|
-
if (
|
|
101
|
-
|
|
102
|
-
var p =
|
|
100
|
+
if (o) {
|
|
101
|
+
o = console;
|
|
102
|
+
var p = o.error, f = typeof Symbol == "function" && Symbol.toStringTag && t[Symbol.toStringTag] || t.constructor.name || "Object";
|
|
103
103
|
return p.call(
|
|
104
|
-
|
|
104
|
+
o,
|
|
105
105
|
"The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",
|
|
106
106
|
f
|
|
107
|
-
),
|
|
107
|
+
), i(t);
|
|
108
108
|
}
|
|
109
109
|
}
|
|
110
|
-
function
|
|
110
|
+
function s(t) {
|
|
111
111
|
if (t === R) return "<>";
|
|
112
|
-
if (typeof t == "object" && t !== null && t.$$typeof ===
|
|
112
|
+
if (typeof t == "object" && t !== null && t.$$typeof === S)
|
|
113
113
|
return "<...>";
|
|
114
114
|
try {
|
|
115
|
-
var
|
|
116
|
-
return
|
|
115
|
+
var o = r(t);
|
|
116
|
+
return o ? "<" + o + ">" : "<...>";
|
|
117
117
|
} catch {
|
|
118
118
|
return "<...>";
|
|
119
119
|
}
|
|
120
120
|
}
|
|
121
121
|
function l() {
|
|
122
|
-
var t =
|
|
122
|
+
var t = N.A;
|
|
123
123
|
return t === null ? null : t.getOwner();
|
|
124
124
|
}
|
|
125
125
|
function d() {
|
|
126
126
|
return Error("react-stack-top-frame");
|
|
127
127
|
}
|
|
128
|
-
function
|
|
129
|
-
if (
|
|
130
|
-
var
|
|
131
|
-
if (
|
|
128
|
+
function m(t) {
|
|
129
|
+
if (E.call(t, "key")) {
|
|
130
|
+
var o = Object.getOwnPropertyDescriptor(t, "key").get;
|
|
131
|
+
if (o && o.isReactWarning) return !1;
|
|
132
132
|
}
|
|
133
133
|
return t.key !== void 0;
|
|
134
134
|
}
|
|
135
|
-
function
|
|
135
|
+
function c(t, o) {
|
|
136
136
|
function p() {
|
|
137
|
-
|
|
137
|
+
O || (O = !0, console.error(
|
|
138
138
|
"%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",
|
|
139
|
-
|
|
139
|
+
o
|
|
140
140
|
));
|
|
141
141
|
}
|
|
142
142
|
p.isReactWarning = !0, Object.defineProperty(t, "key", {
|
|
@@ -144,23 +144,23 @@ function ue() {
|
|
|
144
144
|
configurable: !0
|
|
145
145
|
});
|
|
146
146
|
}
|
|
147
|
-
function
|
|
147
|
+
function u() {
|
|
148
148
|
var t = r(this.type);
|
|
149
|
-
return
|
|
149
|
+
return L[t] || (L[t] = !0, console.error(
|
|
150
150
|
"Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release."
|
|
151
151
|
)), t = this.props.ref, t !== void 0 ? t : null;
|
|
152
152
|
}
|
|
153
|
-
function
|
|
153
|
+
function x(t, o, p, f, B, Q) {
|
|
154
154
|
var g = p.ref;
|
|
155
155
|
return t = {
|
|
156
|
-
$$typeof:
|
|
156
|
+
$$typeof: _,
|
|
157
157
|
type: t,
|
|
158
|
-
key:
|
|
158
|
+
key: o,
|
|
159
159
|
props: p,
|
|
160
160
|
_owner: f
|
|
161
161
|
}, (g !== void 0 ? g : null) !== null ? Object.defineProperty(t, "ref", {
|
|
162
162
|
enumerable: !1,
|
|
163
|
-
get:
|
|
163
|
+
get: u
|
|
164
164
|
}) : Object.defineProperty(t, "ref", { enumerable: !1, value: null }), t._store = {}, Object.defineProperty(t._store, "validated", {
|
|
165
165
|
configurable: !1,
|
|
166
166
|
enumerable: !1,
|
|
@@ -175,7 +175,7 @@ function ue() {
|
|
|
175
175
|
configurable: !1,
|
|
176
176
|
enumerable: !1,
|
|
177
177
|
writable: !0,
|
|
178
|
-
value:
|
|
178
|
+
value: B
|
|
179
179
|
}), Object.defineProperty(t, "_debugTask", {
|
|
180
180
|
configurable: !1,
|
|
181
181
|
enumerable: !1,
|
|
@@ -183,23 +183,23 @@ function ue() {
|
|
|
183
183
|
value: Q
|
|
184
184
|
}), Object.freeze && (Object.freeze(t.props), Object.freeze(t)), t;
|
|
185
185
|
}
|
|
186
|
-
function
|
|
187
|
-
var g =
|
|
186
|
+
function h(t, o, p, f, B, Q) {
|
|
187
|
+
var g = o.children;
|
|
188
188
|
if (g !== void 0)
|
|
189
189
|
if (f)
|
|
190
|
-
if (
|
|
190
|
+
if (M(g)) {
|
|
191
191
|
for (f = 0; f < g.length; f++)
|
|
192
|
-
|
|
192
|
+
a(g[f]);
|
|
193
193
|
Object.freeze && Object.freeze(g);
|
|
194
194
|
} else
|
|
195
195
|
console.error(
|
|
196
196
|
"React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead."
|
|
197
197
|
);
|
|
198
|
-
else
|
|
199
|
-
if (
|
|
198
|
+
else a(g);
|
|
199
|
+
if (E.call(o, "key")) {
|
|
200
200
|
g = r(t);
|
|
201
|
-
var P = Object.keys(
|
|
202
|
-
return
|
|
201
|
+
var P = Object.keys(o).filter(function(ce) {
|
|
202
|
+
return ce !== "key";
|
|
203
203
|
});
|
|
204
204
|
f = 0 < P.length ? "{key: someKey, " + P.join(": ..., ") + ": ...}" : "{key: someKey}", re[g + f] || (P = 0 < P.length ? "{" + P.join(": ..., ") + ": ...}" : "{}", console.error(
|
|
205
205
|
`A props object containing a "key" prop is being spread into JSX:
|
|
@@ -214,80 +214,80 @@ React keys must be passed directly to JSX without using spread:
|
|
|
214
214
|
g
|
|
215
215
|
), re[g + f] = !0);
|
|
216
216
|
}
|
|
217
|
-
if (g = null, p !== void 0 && (n(p), g = "" + p),
|
|
217
|
+
if (g = null, p !== void 0 && (n(p), g = "" + p), m(o) && (n(o.key), g = "" + o.key), "key" in o) {
|
|
218
218
|
p = {};
|
|
219
|
-
for (var
|
|
220
|
-
|
|
221
|
-
} else p =
|
|
222
|
-
return g &&
|
|
219
|
+
for (var K in o)
|
|
220
|
+
K !== "key" && (p[K] = o[K]);
|
|
221
|
+
} else p = o;
|
|
222
|
+
return g && c(
|
|
223
223
|
p,
|
|
224
224
|
typeof t == "function" ? t.displayName || t.name || "Unknown" : t
|
|
225
|
-
),
|
|
225
|
+
), x(
|
|
226
226
|
t,
|
|
227
227
|
g,
|
|
228
228
|
p,
|
|
229
229
|
l(),
|
|
230
|
-
|
|
230
|
+
B,
|
|
231
231
|
Q
|
|
232
232
|
);
|
|
233
233
|
}
|
|
234
|
-
function
|
|
235
|
-
|
|
234
|
+
function a(t) {
|
|
235
|
+
b(t) ? t._store && (t._store.validated = 1) : typeof t == "object" && t !== null && t.$$typeof === S && (t._payload.status === "fulfilled" ? b(t._payload.value) && t._payload.value._store && (t._payload.value._store.validated = 1) : t._store && (t._store.validated = 1));
|
|
236
236
|
}
|
|
237
|
-
function
|
|
238
|
-
return typeof t == "object" && t !== null && t.$$typeof ===
|
|
237
|
+
function b(t) {
|
|
238
|
+
return typeof t == "object" && t !== null && t.$$typeof === _;
|
|
239
239
|
}
|
|
240
|
-
var
|
|
240
|
+
var j = de, _ = Symbol.for("react.transitional.element"), v = Symbol.for("react.portal"), R = Symbol.for("react.fragment"), A = Symbol.for("react.strict_mode"), q = Symbol.for("react.profiler"), V = Symbol.for("react.consumer"), X = Symbol.for("react.context"), F = Symbol.for("react.forward_ref"), z = Symbol.for("react.suspense"), G = Symbol.for("react.suspense_list"), w = Symbol.for("react.memo"), S = Symbol.for("react.lazy"), J = Symbol.for("react.activity"), T = Symbol.for("react.client.reference"), N = j.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, E = Object.prototype.hasOwnProperty, M = Array.isArray, W = console.createTask ? console.createTask : function() {
|
|
241
241
|
return null;
|
|
242
242
|
};
|
|
243
|
-
|
|
243
|
+
j = {
|
|
244
244
|
react_stack_bottom_frame: function(t) {
|
|
245
245
|
return t();
|
|
246
246
|
}
|
|
247
247
|
};
|
|
248
|
-
var
|
|
249
|
-
|
|
248
|
+
var O, L = {}, ee = j.react_stack_bottom_frame.bind(
|
|
249
|
+
j,
|
|
250
250
|
d
|
|
251
|
-
)(), te =
|
|
252
|
-
|
|
253
|
-
var f = 1e4 >
|
|
254
|
-
return
|
|
251
|
+
)(), te = W(s(d)), re = {};
|
|
252
|
+
U.Fragment = R, U.jsx = function(t, o, p) {
|
|
253
|
+
var f = 1e4 > N.recentlyCreatedOwnerStacks++;
|
|
254
|
+
return h(
|
|
255
255
|
t,
|
|
256
|
-
|
|
256
|
+
o,
|
|
257
257
|
p,
|
|
258
258
|
!1,
|
|
259
259
|
f ? Error("react-stack-top-frame") : ee,
|
|
260
|
-
f ?
|
|
260
|
+
f ? W(s(t)) : te
|
|
261
261
|
);
|
|
262
|
-
},
|
|
263
|
-
var f = 1e4 >
|
|
264
|
-
return
|
|
262
|
+
}, U.jsxs = function(t, o, p) {
|
|
263
|
+
var f = 1e4 > N.recentlyCreatedOwnerStacks++;
|
|
264
|
+
return h(
|
|
265
265
|
t,
|
|
266
|
-
|
|
266
|
+
o,
|
|
267
267
|
p,
|
|
268
268
|
!0,
|
|
269
269
|
f ? Error("react-stack-top-frame") : ee,
|
|
270
|
-
f ?
|
|
270
|
+
f ? W(s(t)) : te
|
|
271
271
|
);
|
|
272
272
|
};
|
|
273
|
-
})()),
|
|
273
|
+
})()), U;
|
|
274
274
|
}
|
|
275
275
|
var oe;
|
|
276
|
-
function
|
|
277
|
-
return oe || (oe = 1, process.env.NODE_ENV === "production" ? H.exports =
|
|
276
|
+
function me() {
|
|
277
|
+
return oe || (oe = 1, process.env.NODE_ENV === "production" ? H.exports = ue() : H.exports = he()), H.exports;
|
|
278
278
|
}
|
|
279
|
-
var e =
|
|
280
|
-
const
|
|
279
|
+
var e = me(), C = /* @__PURE__ */ ((r) => (r.TEXT = "text", r.PRODUCT_LIST = "product_list", r.LOADING = "loading", r))(C || {}), y = /* @__PURE__ */ ((r) => (r.USER = "user", r.AI = "ai", r))(y || {});
|
|
280
|
+
const xe = ({
|
|
281
281
|
title: r,
|
|
282
|
-
primaryColor:
|
|
282
|
+
primaryColor: i,
|
|
283
283
|
onClose: n,
|
|
284
|
-
onReset:
|
|
284
|
+
onReset: s,
|
|
285
285
|
onToggleExpand: l,
|
|
286
286
|
isExpanded: d,
|
|
287
|
-
language:
|
|
288
|
-
onLanguageChange:
|
|
287
|
+
language: m,
|
|
288
|
+
onLanguageChange: c
|
|
289
289
|
}) => {
|
|
290
|
-
const
|
|
290
|
+
const u = [
|
|
291
291
|
{ value: "en", label: "EN" },
|
|
292
292
|
{ value: "vi", label: "VI" },
|
|
293
293
|
{ value: "ja", label: "JA" }
|
|
@@ -302,7 +302,7 @@ const me = ({
|
|
|
302
302
|
"img",
|
|
303
303
|
{
|
|
304
304
|
src: "https://fptshop.com.vn/img/bitu/bitu-avatar.png",
|
|
305
|
-
onError: (
|
|
305
|
+
onError: (x) => x.currentTarget.src = "https://cdn-icons-png.flaticon.com/512/4712/4712035.png",
|
|
306
306
|
className: "w-full h-full object-contain",
|
|
307
307
|
alt: "Bot Icon"
|
|
308
308
|
}
|
|
@@ -324,11 +324,11 @@ const me = ({
|
|
|
324
324
|
/* @__PURE__ */ e.jsx(
|
|
325
325
|
"select",
|
|
326
326
|
{
|
|
327
|
-
value:
|
|
328
|
-
onChange: (
|
|
327
|
+
value: m,
|
|
328
|
+
onChange: (x) => c(x.target.value),
|
|
329
329
|
className: "appearance-none bg-white/50 border border-gray-200 rounded-lg px-2 pr-5 py-1 text-[10px] font-black text-indigo-600 cursor-pointer hover:bg-white transition-all focus:outline-none focus:ring-2 focus:ring-indigo-100 uppercase",
|
|
330
330
|
title: "Select language",
|
|
331
|
-
children:
|
|
331
|
+
children: u.map((x) => /* @__PURE__ */ e.jsx("option", { value: x.value, className: "font-sans font-bold", children: x.label }, x.value))
|
|
332
332
|
}
|
|
333
333
|
),
|
|
334
334
|
/* @__PURE__ */ e.jsx("div", { className: "absolute right-1.5 top-1/2 -translate-y-1/2 pointer-events-none text-indigo-400", children: /* @__PURE__ */ e.jsx("svg", { width: "8", height: "8", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "4", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ e.jsx("path", { d: "m6 9 6 6 6-6" }) }) })
|
|
@@ -336,7 +336,7 @@ const me = ({
|
|
|
336
336
|
/* @__PURE__ */ e.jsx(
|
|
337
337
|
"button",
|
|
338
338
|
{
|
|
339
|
-
onClick:
|
|
339
|
+
onClick: s,
|
|
340
340
|
className: "w-8 h-8 flex items-center justify-center rounded-lg hover:bg-white/60 text-gray-500 hover:text-indigo-600 transition-all",
|
|
341
341
|
title: "Reset chat",
|
|
342
342
|
children: /* @__PURE__ */ e.jsxs("svg", { width: "15", height: "15", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: [
|
|
@@ -382,7 +382,7 @@ const me = ({
|
|
|
382
382
|
]
|
|
383
383
|
}
|
|
384
384
|
);
|
|
385
|
-
},
|
|
385
|
+
}, pe = ({ product: r, primaryColor: i }) => /* @__PURE__ */ e.jsxs("div", { className: "min-w-[170px] max-w-[170px] bg-white rounded-xl border border-gray-50 shadow-sm overflow-hidden flex flex-col hover:shadow-lg transition-all duration-300 group", children: [
|
|
386
386
|
/* @__PURE__ */ e.jsxs("div", { className: "relative h-32 w-full bg-white flex items-center justify-center p-2", children: [
|
|
387
387
|
/* @__PURE__ */ e.jsx(
|
|
388
388
|
"img",
|
|
@@ -406,19 +406,19 @@ const me = ({
|
|
|
406
406
|
"button",
|
|
407
407
|
{
|
|
408
408
|
className: "w-full py-1.5 rounded-lg text-[11px] font-bold border transition-all duration-300 active:scale-95 shadow-sm",
|
|
409
|
-
style: { borderColor:
|
|
409
|
+
style: { borderColor: i, color: i },
|
|
410
410
|
onMouseEnter: (n) => {
|
|
411
|
-
n.currentTarget.style.backgroundColor =
|
|
411
|
+
n.currentTarget.style.backgroundColor = i, n.currentTarget.style.color = "white";
|
|
412
412
|
},
|
|
413
413
|
onMouseLeave: (n) => {
|
|
414
|
-
n.currentTarget.style.backgroundColor = "transparent", n.currentTarget.style.color =
|
|
414
|
+
n.currentTarget.style.backgroundColor = "transparent", n.currentTarget.style.color = i;
|
|
415
415
|
},
|
|
416
416
|
children: "Chọn mua"
|
|
417
417
|
}
|
|
418
418
|
)
|
|
419
419
|
] })
|
|
420
|
-
] }),
|
|
421
|
-
const [
|
|
420
|
+
] }), fe = ({ text: r }) => {
|
|
421
|
+
const [i, n] = k(!1), s = async () => {
|
|
422
422
|
try {
|
|
423
423
|
await navigator.clipboard.writeText(r), n(!0), setTimeout(() => n(!1), 2e3);
|
|
424
424
|
} catch (l) {
|
|
@@ -428,106 +428,118 @@ const me = ({
|
|
|
428
428
|
return /* @__PURE__ */ e.jsx(
|
|
429
429
|
"button",
|
|
430
430
|
{
|
|
431
|
-
onClick:
|
|
431
|
+
onClick: s,
|
|
432
432
|
className: "p-1.5 rounded-md hover:bg-slate-100 text-slate-400 hover:text-indigo-600 transition-all active:scale-90 flex items-center gap-1 group/copy",
|
|
433
433
|
title: "Copy message",
|
|
434
|
-
children:
|
|
434
|
+
children: i ? /* @__PURE__ */ e.jsx("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "3", strokeLinecap: "round", strokeLinejoin: "round", className: "text-green-500", children: /* @__PURE__ */ e.jsx("path", { d: "M20 6 9 17l-5-5" }) }) : /* @__PURE__ */ e.jsxs("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: [
|
|
435
435
|
/* @__PURE__ */ e.jsx("rect", { width: "8", height: "4", x: "8", y: "2", rx: "1", ry: "1" }),
|
|
436
436
|
/* @__PURE__ */ e.jsx("path", { d: "M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2" })
|
|
437
437
|
] })
|
|
438
438
|
}
|
|
439
439
|
);
|
|
440
|
+
}, ge = ({ text: r, speed: i = 8, onComplete: n }) => {
|
|
441
|
+
const [s, l] = k(""), [d, m] = k(0);
|
|
442
|
+
return I(() => {
|
|
443
|
+
r.length < s.length && (l(""), m(0));
|
|
444
|
+
}, [r]), I(() => {
|
|
445
|
+
if (d < r.length) {
|
|
446
|
+
const c = setTimeout(() => {
|
|
447
|
+
l((u) => u + r.charAt(d)), m((u) => u + 1);
|
|
448
|
+
}, i);
|
|
449
|
+
return () => clearTimeout(c);
|
|
450
|
+
} else n && r.length > 0 && n();
|
|
451
|
+
}, [d, r, i, n]), /* @__PURE__ */ e.jsx("span", { children: s });
|
|
440
452
|
}, $ = (r) => {
|
|
441
|
-
const
|
|
442
|
-
return r.split(
|
|
443
|
-
if (
|
|
444
|
-
const
|
|
445
|
-
return /* @__PURE__ */ e.jsx("strong", { className: "font-bold text-gray-900", children:
|
|
453
|
+
const i = /(\*\*.*?\*\*|\[.*?\]\(.*?\))/g;
|
|
454
|
+
return r.split(i).map((s, l) => {
|
|
455
|
+
if (s.startsWith("**") && s.endsWith("**")) {
|
|
456
|
+
const m = s.slice(2, -2);
|
|
457
|
+
return /* @__PURE__ */ e.jsx("strong", { className: "font-bold text-gray-900", children: m }, l);
|
|
446
458
|
}
|
|
447
|
-
const d =
|
|
459
|
+
const d = s.match(/\[(.*?)\]\((.*?)\)/);
|
|
448
460
|
if (d) {
|
|
449
|
-
const [
|
|
461
|
+
const [m, c, u] = d;
|
|
450
462
|
return /* @__PURE__ */ e.jsx(
|
|
451
463
|
"a",
|
|
452
464
|
{
|
|
453
|
-
href:
|
|
465
|
+
href: u,
|
|
454
466
|
target: "_blank",
|
|
455
467
|
rel: "noopener noreferrer",
|
|
456
468
|
className: "text-blue-600 hover:underline break-all font-semibold",
|
|
457
|
-
children:
|
|
469
|
+
children: c
|
|
458
470
|
},
|
|
459
471
|
l
|
|
460
472
|
);
|
|
461
473
|
}
|
|
462
|
-
return
|
|
474
|
+
return s;
|
|
463
475
|
});
|
|
464
|
-
},
|
|
465
|
-
const
|
|
476
|
+
}, be = ({ text: r }) => {
|
|
477
|
+
const i = r.replace(/\r/g, "").split(`
|
|
466
478
|
`), n = [];
|
|
467
|
-
let
|
|
468
|
-
const d = (
|
|
469
|
-
if (
|
|
470
|
-
const
|
|
471
|
-
|
|
479
|
+
let s = [], l = !1;
|
|
480
|
+
const d = (m) => {
|
|
481
|
+
if (s.length > 0) {
|
|
482
|
+
const u = s.length > 1 && s[1].every((x) => x.trim().match(/^:?-+:?$/)) ? [s[0], ...s.slice(2)] : s;
|
|
483
|
+
u.length > 0 && n.push(
|
|
472
484
|
/* @__PURE__ */ e.jsxs("div", { className: "my-4 relative group/table", children: [
|
|
473
485
|
/* @__PURE__ */ e.jsx("div", { className: "overflow-x-auto border border-slate-200 rounded-xl shadow-sm bg-white chat-scrollbar custom-table-scroll", children: /* @__PURE__ */ e.jsxs("table", { className: "min-w-full border-collapse text-[13px] leading-normal", children: [
|
|
474
|
-
/* @__PURE__ */ e.jsx("thead", { className: "bg-slate-50 border-b border-slate-200", children: /* @__PURE__ */ e.jsx("tr", { children:
|
|
475
|
-
/* @__PURE__ */ e.jsx("tbody", { className: "divide-y divide-slate-100", children:
|
|
486
|
+
/* @__PURE__ */ e.jsx("thead", { className: "bg-slate-50 border-b border-slate-200", children: /* @__PURE__ */ e.jsx("tr", { children: u[0].map((x, h) => /* @__PURE__ */ e.jsx("th", { className: "px-4 py-3 text-left font-bold text-slate-700 border-r last:border-r-0 border-slate-200 whitespace-nowrap", children: $(x.trim()) }, h)) }) }),
|
|
487
|
+
/* @__PURE__ */ e.jsx("tbody", { className: "divide-y divide-slate-100", children: u.slice(1).map((x, h) => /* @__PURE__ */ e.jsx("tr", { className: "hover:bg-slate-50/50 transition-colors", children: x.map((a, b) => /* @__PURE__ */ e.jsx("td", { className: "px-4 py-3 text-slate-600 border-r last:border-r-0 border-slate-200 align-top", children: $(a.trim()) }, b)) }, h)) })
|
|
476
488
|
] }) }),
|
|
477
489
|
/* @__PURE__ */ e.jsx("div", { className: "absolute right-0 top-0 bottom-0 w-8 bg-gradient-to-l from-white/80 to-transparent pointer-events-none md:hidden opacity-0 group-hover/table:opacity-100 transition-opacity" })
|
|
478
|
-
] }, `table-wrapper-${
|
|
479
|
-
),
|
|
490
|
+
] }, `table-wrapper-${m}`)
|
|
491
|
+
), s = [], l = !1;
|
|
480
492
|
}
|
|
481
493
|
};
|
|
482
|
-
return
|
|
483
|
-
const
|
|
484
|
-
if (
|
|
485
|
-
let
|
|
486
|
-
|
|
494
|
+
return i.forEach((m, c) => {
|
|
495
|
+
const u = m.trim();
|
|
496
|
+
if (u.includes("|") && (u.startsWith("|") || u.split("|").length > 1)) {
|
|
497
|
+
let a = u.split("|");
|
|
498
|
+
u.startsWith("|") && a.shift(), u.endsWith("|") && a.pop(), s.push(a), l = !0;
|
|
487
499
|
return;
|
|
488
|
-
} else l && d(
|
|
489
|
-
const
|
|
490
|
-
if (
|
|
491
|
-
const
|
|
492
|
-
n.push(/* @__PURE__ */ e.jsx("div", { className:
|
|
500
|
+
} else l && d(c);
|
|
501
|
+
const x = u.match(/^(#{1,4})\s+(.*)$/);
|
|
502
|
+
if (x) {
|
|
503
|
+
const a = x[1].length, b = x[2], j = a === 1 ? "text-xl font-bold mb-4 mt-6 first:mt-1" : a === 2 ? "text-lg font-bold mb-3 mt-5" : "text-[13px] font-black mb-2 mt-5 text-indigo-600 uppercase tracking-widest";
|
|
504
|
+
n.push(/* @__PURE__ */ e.jsx("div", { className: j, children: $(b) }, c));
|
|
493
505
|
return;
|
|
494
506
|
}
|
|
495
|
-
const
|
|
496
|
-
if (
|
|
497
|
-
const
|
|
507
|
+
const h = u.match(/^[*+-]\s+(.*)$/);
|
|
508
|
+
if (h) {
|
|
509
|
+
const a = h[1];
|
|
498
510
|
n.push(
|
|
499
511
|
/* @__PURE__ */ e.jsxs("div", { className: "flex gap-3 pl-1 mb-2 items-start group", children: [
|
|
500
512
|
/* @__PURE__ */ e.jsx("span", { className: "text-indigo-400 flex-shrink-0 mt-2 w-1.5 h-1.5 bg-indigo-400 rounded-full group-hover:scale-125 transition-transform" }),
|
|
501
|
-
/* @__PURE__ */ e.jsx("div", { className: "flex-1 leading-relaxed text-slate-700", children: $(
|
|
502
|
-
] },
|
|
513
|
+
/* @__PURE__ */ e.jsx("div", { className: "flex-1 leading-relaxed text-slate-700", children: $(a) })
|
|
514
|
+
] }, c)
|
|
503
515
|
);
|
|
504
516
|
return;
|
|
505
517
|
}
|
|
506
|
-
if (
|
|
507
|
-
n.push(/* @__PURE__ */ e.jsx("div", { className: "h-3" },
|
|
518
|
+
if (u === "") {
|
|
519
|
+
n.push(/* @__PURE__ */ e.jsx("div", { className: "h-3" }, c));
|
|
508
520
|
return;
|
|
509
521
|
}
|
|
510
522
|
n.push(
|
|
511
|
-
/* @__PURE__ */ e.jsx("div", { className: "mb-1.5 leading-relaxed text-slate-700", children: $(
|
|
523
|
+
/* @__PURE__ */ e.jsx("div", { className: "mb-1.5 leading-relaxed text-slate-700", children: $(m) }, c)
|
|
512
524
|
);
|
|
513
|
-
}), l && d(
|
|
514
|
-
},
|
|
525
|
+
}), l && d(i.length), /* @__PURE__ */ e.jsx("div", { className: "markdown-render w-full", children: n });
|
|
526
|
+
}, ve = ({
|
|
515
527
|
messages: r,
|
|
516
|
-
isLoading:
|
|
528
|
+
isLoading: i,
|
|
517
529
|
description: n,
|
|
518
|
-
quickReplies:
|
|
530
|
+
quickReplies: s,
|
|
519
531
|
onQuickReply: l,
|
|
520
532
|
primaryColor: d,
|
|
521
|
-
renderMarkdown:
|
|
533
|
+
renderMarkdown: m = !1
|
|
522
534
|
}) => {
|
|
523
|
-
const
|
|
535
|
+
const c = "https://fptshop.com.vn/img/bitu/bitu-avatar.png", u = "https://cdn-icons-png.flaticon.com/512/4712/4712035.png", [x, h] = k(/* @__PURE__ */ new Set(["welcome"]));
|
|
524
536
|
return /* @__PURE__ */ e.jsxs("div", { className: "flex flex-col gap-8 pb-4", children: [
|
|
525
537
|
/* @__PURE__ */ e.jsxs("div", { className: "flex flex-col items-center justify-center pt-4 text-center animate-msg", children: [
|
|
526
538
|
/* @__PURE__ */ e.jsx("div", { className: "relative mb-5", children: /* @__PURE__ */ e.jsx("div", { className: "w-20 h-20 flex items-center justify-center", children: /* @__PURE__ */ e.jsx(
|
|
527
539
|
"img",
|
|
528
540
|
{
|
|
529
|
-
src:
|
|
530
|
-
onError: (
|
|
541
|
+
src: c,
|
|
542
|
+
onError: (a) => a.currentTarget.src = u,
|
|
531
543
|
className: "w-full h-full object-contain",
|
|
532
544
|
alt: "Sigma AI Hero"
|
|
533
545
|
}
|
|
@@ -536,58 +548,67 @@ const me = ({
|
|
|
536
548
|
"Sigma ",
|
|
537
549
|
/* @__PURE__ */ e.jsx("span", { className: "bg-indigo-600 text-white text-[10px] px-1.5 py-0.5 rounded-md leading-none ml-1 uppercase font-bold tracking-tight", children: "AI" })
|
|
538
550
|
] }),
|
|
539
|
-
/* @__PURE__ */ e.jsx("div", { className: "text-[14px] text-gray-600 mt-3 leading-relaxed px-4 max-w-[
|
|
551
|
+
/* @__PURE__ */ e.jsx("div", { className: "text-[14px] text-gray-600 mt-3 leading-relaxed px-4 max-w-[320px]", children: n && /* @__PURE__ */ e.jsx("div", { className: "bot-description", children: $(n) }) })
|
|
540
552
|
] }),
|
|
541
|
-
r.map((
|
|
542
|
-
|
|
543
|
-
|
|
544
|
-
|
|
545
|
-
|
|
546
|
-
|
|
547
|
-
|
|
548
|
-
|
|
553
|
+
r.map((a, b) => {
|
|
554
|
+
const _ = a.sender === y.AI && b === r.length - 1 && !i && !x.has(a.id);
|
|
555
|
+
return /* @__PURE__ */ e.jsxs(
|
|
556
|
+
"div",
|
|
557
|
+
{
|
|
558
|
+
className: `flex flex-col animate-msg group ${a.sender === y.USER ? "items-end" : "items-start"}`,
|
|
559
|
+
style: { animationDelay: `${b * 0.05}s` },
|
|
560
|
+
children: [
|
|
561
|
+
a.sender === y.AI && /* @__PURE__ */ e.jsxs("div", { className: "flex items-center justify-between w-full max-w-[96%] mb-2 ml-1", children: [
|
|
562
|
+
/* @__PURE__ */ e.jsxs("div", { className: "flex items-center gap-1.5", children: [
|
|
563
|
+
/* @__PURE__ */ e.jsx(
|
|
564
|
+
"img",
|
|
565
|
+
{
|
|
566
|
+
src: c,
|
|
567
|
+
onError: (v) => v.currentTarget.src = u,
|
|
568
|
+
className: "w-4 h-4 object-contain",
|
|
569
|
+
alt: "AI"
|
|
570
|
+
}
|
|
571
|
+
),
|
|
572
|
+
/* @__PURE__ */ e.jsx("span", { className: "text-[11px] font-bold text-gray-400 uppercase tracking-widest", children: "AI Agent" })
|
|
573
|
+
] }),
|
|
574
|
+
/* @__PURE__ */ e.jsx("div", { className: "opacity-0 group-hover:opacity-100 transition-opacity duration-200", children: /* @__PURE__ */ e.jsx(fe, { text: a.content }) })
|
|
575
|
+
] }),
|
|
576
|
+
/* @__PURE__ */ e.jsxs("div", { className: `flex flex-col ${a.sender === y.USER ? "items-end" : "items-start"} w-full max-w-[96%]`, children: [
|
|
549
577
|
/* @__PURE__ */ e.jsx(
|
|
550
|
-
"
|
|
578
|
+
"div",
|
|
551
579
|
{
|
|
552
|
-
|
|
553
|
-
|
|
554
|
-
|
|
555
|
-
|
|
580
|
+
className: `px-4 py-3 rounded-[20px] shadow-sm border border-black/[0.02] overflow-hidden transition-all duration-300 ${a.sender === y.USER ? "bg-indigo-600 text-white rounded-tr-none whitespace-pre-line shadow-indigo-100/50" : "bg-white text-slate-800 border-none rounded-tl-none hover:shadow-md"} ${(!m || a.sender === y.USER) && !_ ? "whitespace-pre-line" : ""}`,
|
|
581
|
+
children: _ ? /* @__PURE__ */ e.jsx(
|
|
582
|
+
ge,
|
|
583
|
+
{
|
|
584
|
+
text: a.content,
|
|
585
|
+
onComplete: () => h((v) => new Set(v).add(a.id))
|
|
586
|
+
}
|
|
587
|
+
) : m && a.sender === y.AI ? /* @__PURE__ */ e.jsx(be, { text: a.content }) : a.content
|
|
556
588
|
}
|
|
557
589
|
),
|
|
558
|
-
/* @__PURE__ */ e.jsx("
|
|
559
|
-
|
|
560
|
-
|
|
561
|
-
|
|
562
|
-
|
|
563
|
-
|
|
564
|
-
|
|
565
|
-
|
|
566
|
-
|
|
567
|
-
|
|
568
|
-
|
|
569
|
-
|
|
570
|
-
|
|
571
|
-
|
|
572
|
-
|
|
573
|
-
|
|
574
|
-
|
|
575
|
-
className: "px-4 py-2 rounded-full text-[13px] font-semibold border border-transparent bg-white text-gray-600 hover:text-indigo-600 hover:border-indigo-100 transition-all duration-200 shadow-sm active:scale-95",
|
|
576
|
-
children: m
|
|
577
|
-
},
|
|
578
|
-
j
|
|
579
|
-
)) })
|
|
580
|
-
] })
|
|
581
|
-
]
|
|
582
|
-
},
|
|
583
|
-
s.id
|
|
584
|
-
)),
|
|
585
|
-
c && /* @__PURE__ */ e.jsxs("div", { className: "flex flex-col gap-1.5 items-start animate-msg", children: [
|
|
590
|
+
a.type === C.PRODUCT_LIST && a.products && /* @__PURE__ */ e.jsx("div", { className: "w-full mt-4 flex gap-4 overflow-x-auto pb-4 pt-1 no-scrollbar snap-x", children: a.products.map((v) => /* @__PURE__ */ e.jsx("div", { className: "product-card-snap", children: /* @__PURE__ */ e.jsx(pe, { product: v, primaryColor: d }) }, v.id)) }),
|
|
591
|
+
b === 0 && r.length === 1 && a.sender === y.AI && /* @__PURE__ */ e.jsx("div", { className: "mt-5 flex flex-wrap gap-2.5 w-full", children: s.map((v, R) => /* @__PURE__ */ e.jsx(
|
|
592
|
+
"button",
|
|
593
|
+
{
|
|
594
|
+
onClick: () => l(v),
|
|
595
|
+
className: "px-4 py-2 rounded-full text-[13px] font-semibold border border-transparent bg-white text-gray-600 hover:text-indigo-600 hover:border-indigo-100 transition-all duration-200 shadow-sm active:scale-95",
|
|
596
|
+
children: v
|
|
597
|
+
},
|
|
598
|
+
R
|
|
599
|
+
)) })
|
|
600
|
+
] })
|
|
601
|
+
]
|
|
602
|
+
},
|
|
603
|
+
a.id
|
|
604
|
+
);
|
|
605
|
+
}),
|
|
606
|
+
i && /* @__PURE__ */ e.jsxs("div", { className: "flex flex-col gap-1.5 items-start animate-msg", children: [
|
|
586
607
|
/* @__PURE__ */ e.jsx("div", { className: "flex items-center gap-1.5 ml-1", children: /* @__PURE__ */ e.jsx(
|
|
587
608
|
"img",
|
|
588
609
|
{
|
|
589
|
-
src:
|
|
590
|
-
onError: (
|
|
610
|
+
src: c,
|
|
611
|
+
onError: (a) => a.currentTarget.src = u,
|
|
591
612
|
className: "w-4 h-4 object-contain",
|
|
592
613
|
alt: "AI Loading"
|
|
593
614
|
}
|
|
@@ -599,19 +620,19 @@ const me = ({
|
|
|
599
620
|
] })
|
|
600
621
|
] })
|
|
601
622
|
] });
|
|
602
|
-
},
|
|
603
|
-
const [
|
|
604
|
-
|
|
605
|
-
},
|
|
606
|
-
|
|
623
|
+
}, je = ({ placeholder: r, onSendMessage: i, primaryColor: n }) => {
|
|
624
|
+
const [s, l] = k(""), d = () => {
|
|
625
|
+
s.trim() && (i(s), l(""));
|
|
626
|
+
}, m = (c) => {
|
|
627
|
+
c.key === "Enter" && !c.shiftKey && (c.preventDefault(), d());
|
|
607
628
|
};
|
|
608
629
|
return /* @__PURE__ */ e.jsx("div", { className: "p-1", children: /* @__PURE__ */ e.jsxs("div", { className: "relative flex items-center bg-gray-50/50 rounded-2xl border border-gray-100 focus-within:border-indigo-100 focus-within:bg-white transition-all duration-200 pr-2 pl-3 py-1", children: [
|
|
609
630
|
/* @__PURE__ */ e.jsx(
|
|
610
631
|
"textarea",
|
|
611
632
|
{
|
|
612
|
-
value:
|
|
613
|
-
onChange: (
|
|
614
|
-
onKeyDown:
|
|
633
|
+
value: s,
|
|
634
|
+
onChange: (c) => l(c.target.value),
|
|
635
|
+
onKeyDown: m,
|
|
615
636
|
placeholder: r,
|
|
616
637
|
rows: 1,
|
|
617
638
|
className: "w-full bg-transparent border-none outline-none focus:ring-0 text-[14px] text-gray-700 font-normal py-3 px-1 resize-none chat-scrollbar min-h-[44px] max-h-[120px] leading-relaxed placeholder:text-gray-400",
|
|
@@ -622,8 +643,8 @@ const me = ({
|
|
|
622
643
|
"button",
|
|
623
644
|
{
|
|
624
645
|
onClick: d,
|
|
625
|
-
disabled: !
|
|
626
|
-
className: `w-9 h-9 rounded-xl flex-shrink-0 flex items-center justify-center transition-all duration-300 shadow-sm ${
|
|
646
|
+
disabled: !s.trim(),
|
|
647
|
+
className: `w-9 h-9 rounded-xl flex-shrink-0 flex items-center justify-center transition-all duration-300 shadow-sm ${s.trim() ? "bg-indigo-600 text-white hover:bg-indigo-700 active:scale-95" : "bg-gray-200 text-gray-400 cursor-not-allowed"}`,
|
|
627
648
|
children: /* @__PURE__ */ e.jsxs("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "3", strokeLinecap: "round", strokeLinejoin: "round", children: [
|
|
628
649
|
/* @__PURE__ */ e.jsx("path", { d: "m5 12 7-7 7 7" }),
|
|
629
650
|
/* @__PURE__ */ e.jsx("path", { d: "M12 19V5" })
|
|
@@ -631,10 +652,10 @@ const me = ({
|
|
|
631
652
|
}
|
|
632
653
|
)
|
|
633
654
|
] }) });
|
|
634
|
-
},
|
|
655
|
+
}, we = ({ isOpen: r, onClick: i, primaryColor: n, className: s = "" }) => /* @__PURE__ */ e.jsx("div", { className: `fixed bottom-4 right-4 md:bottom-6 md:right-6 z-[100] ${s}`, children: /* @__PURE__ */ e.jsx(
|
|
635
656
|
"button",
|
|
636
657
|
{
|
|
637
|
-
onClick:
|
|
658
|
+
onClick: i,
|
|
638
659
|
className: `w-12 h-12 bg-white rounded-2xl shadow-lg flex items-center justify-center border transition-all duration-300 overflow-hidden ${r ? "border-indigo-500 ring-4 ring-indigo-50 scale-105 rotate-0" : "border-slate-100 hover:scale-110 hover:shadow-xl"}`,
|
|
639
660
|
children: /* @__PURE__ */ e.jsx(
|
|
640
661
|
"img",
|
|
@@ -646,142 +667,144 @@ const me = ({
|
|
|
646
667
|
}
|
|
647
668
|
)
|
|
648
669
|
}
|
|
649
|
-
) }), le = () => Math.random().toString(36).substring(2, 15) + Math.random().toString(36).substring(2, 15),
|
|
650
|
-
const [n,
|
|
651
|
-
|
|
652
|
-
|
|
653
|
-
|
|
670
|
+
) }), le = "sigma-chat-language", ie = () => Math.random().toString(36).substring(2, 15) + Math.random().toString(36).substring(2, 15), D = (r, i, n) => typeof r == "object" && r !== null && !Array.isArray(r) ? r[i] || r.en || Object.values(r)[0] || n : r ?? n, Ne = ({ config: r, onGetAiResponse: i }) => {
|
|
671
|
+
const [n, s] = k(!1), [l, d] = k(!1), [m, c] = k(!1), [u, x] = k(ie()), [h, a] = k(() => localStorage.getItem(le) || "en"), [b, j] = k([]), [_, v] = k(!1), R = ne(null), A = ne(0);
|
|
672
|
+
I(() => {
|
|
673
|
+
localStorage.setItem(le, h);
|
|
674
|
+
}, [h]), I(() => {
|
|
675
|
+
const w = D(r.welcomeMessage, h, "Hello!");
|
|
676
|
+
j([{
|
|
654
677
|
id: "welcome",
|
|
655
|
-
type:
|
|
656
|
-
sender:
|
|
657
|
-
content:
|
|
678
|
+
type: C.TEXT,
|
|
679
|
+
sender: y.AI,
|
|
680
|
+
content: w,
|
|
658
681
|
timestamp: /* @__PURE__ */ new Date()
|
|
659
682
|
}]);
|
|
660
683
|
}, []);
|
|
661
|
-
const q =
|
|
662
|
-
|
|
663
|
-
if (
|
|
664
|
-
const
|
|
665
|
-
|
|
684
|
+
const q = Z(() => D(r.placeholder, h, "Type a message..."), [r.placeholder, h]), V = Z(() => D(r.quickReplies, h, []), [r.quickReplies, h]), X = Z(() => D(r.description, h, ""), [r.description, h]);
|
|
685
|
+
I(() => {
|
|
686
|
+
if (b.length === 1 && (b[0].id === "welcome" || b[0].sender === y.AI)) {
|
|
687
|
+
const w = D(r.welcomeMessage, h, "Hello!");
|
|
688
|
+
j([{ ...b[0], content: w }]);
|
|
666
689
|
}
|
|
667
|
-
}, [
|
|
690
|
+
}, [h]), I(() => {
|
|
668
691
|
if (n) {
|
|
669
|
-
const
|
|
670
|
-
return () => clearTimeout(
|
|
692
|
+
const w = setTimeout(() => c(!0), 50);
|
|
693
|
+
return () => clearTimeout(w);
|
|
671
694
|
} else
|
|
672
|
-
|
|
673
|
-
}, [n]),
|
|
695
|
+
c(!1);
|
|
696
|
+
}, [n]), I(() => {
|
|
674
697
|
R.current && n && (R.current.scrollTop = R.current.scrollHeight);
|
|
675
|
-
}, [
|
|
676
|
-
const
|
|
677
|
-
if (!
|
|
678
|
-
const
|
|
698
|
+
}, [b, n, _]);
|
|
699
|
+
const F = async (w) => {
|
|
700
|
+
if (!w.trim() || _) return;
|
|
701
|
+
const S = ++A.current, J = {
|
|
679
702
|
id: `user-${Date.now()}`,
|
|
680
|
-
type:
|
|
681
|
-
sender:
|
|
682
|
-
content:
|
|
703
|
+
type: C.TEXT,
|
|
704
|
+
sender: y.USER,
|
|
705
|
+
content: w,
|
|
683
706
|
timestamp: /* @__PURE__ */ new Date()
|
|
684
707
|
};
|
|
685
|
-
|
|
708
|
+
j((T) => [...T, J]), v(!0);
|
|
686
709
|
try {
|
|
687
|
-
const
|
|
688
|
-
if (
|
|
689
|
-
let
|
|
690
|
-
const
|
|
691
|
-
for await (const
|
|
692
|
-
if (
|
|
693
|
-
|
|
694
|
-
id:
|
|
695
|
-
type:
|
|
696
|
-
sender:
|
|
710
|
+
const T = i(w, u, h);
|
|
711
|
+
if (T && typeof T == "object" && Symbol.asyncIterator in T) {
|
|
712
|
+
let N = "", E = !1;
|
|
713
|
+
const M = `ai-${Date.now()}`;
|
|
714
|
+
for await (const W of T) {
|
|
715
|
+
if (S !== A.current) return;
|
|
716
|
+
E || (j((O) => [...O, {
|
|
717
|
+
id: M,
|
|
718
|
+
type: C.TEXT,
|
|
719
|
+
sender: y.AI,
|
|
697
720
|
content: "",
|
|
698
721
|
timestamp: /* @__PURE__ */ new Date()
|
|
699
|
-
}]),
|
|
700
|
-
(
|
|
722
|
+
}]), v(!1), E = !0), N += W, j((O) => O.map(
|
|
723
|
+
(L) => L.id === M ? { ...L, content: N } : L
|
|
701
724
|
));
|
|
702
725
|
}
|
|
703
726
|
} else {
|
|
704
|
-
const
|
|
705
|
-
if (
|
|
706
|
-
|
|
707
|
-
const
|
|
708
|
-
|
|
727
|
+
const N = await T;
|
|
728
|
+
if (S !== A.current) return;
|
|
729
|
+
v(!1);
|
|
730
|
+
const E = typeof N == "string" ? { text: N, products: void 0 } : N;
|
|
731
|
+
j((M) => [...M, {
|
|
709
732
|
id: `ai-${Date.now()}`,
|
|
710
|
-
type:
|
|
711
|
-
sender:
|
|
712
|
-
content:
|
|
713
|
-
products:
|
|
733
|
+
type: E.products ? C.PRODUCT_LIST : C.TEXT,
|
|
734
|
+
sender: y.AI,
|
|
735
|
+
content: E.text,
|
|
736
|
+
products: E.products,
|
|
714
737
|
timestamp: /* @__PURE__ */ new Date()
|
|
715
738
|
}]);
|
|
716
739
|
}
|
|
717
|
-
} catch (
|
|
718
|
-
if (
|
|
719
|
-
console.error("Chatbox Error:",
|
|
720
|
-
const
|
|
721
|
-
|
|
740
|
+
} catch (T) {
|
|
741
|
+
if (S !== A.current) return;
|
|
742
|
+
console.error("Chatbox Error:", T), v(!1);
|
|
743
|
+
const N = h === "vi" ? "Hệ thống đang bận, vui lòng thử lại sau." : "System is busy, please try again later.";
|
|
744
|
+
j((E) => [...E, {
|
|
722
745
|
id: `err-${Date.now()}`,
|
|
723
|
-
type:
|
|
724
|
-
sender:
|
|
725
|
-
content:
|
|
746
|
+
type: C.TEXT,
|
|
747
|
+
sender: y.AI,
|
|
748
|
+
content: N,
|
|
726
749
|
timestamp: /* @__PURE__ */ new Date()
|
|
727
750
|
}]);
|
|
728
751
|
}
|
|
729
752
|
}, z = () => {
|
|
730
|
-
|
|
731
|
-
const
|
|
732
|
-
|
|
753
|
+
A.current++, x(ie());
|
|
754
|
+
const w = D(r.welcomeMessage, h, "Hello!");
|
|
755
|
+
j([{
|
|
733
756
|
id: "welcome",
|
|
734
|
-
type:
|
|
735
|
-
sender:
|
|
736
|
-
content:
|
|
757
|
+
type: C.TEXT,
|
|
758
|
+
sender: y.AI,
|
|
759
|
+
content: w,
|
|
737
760
|
timestamp: /* @__PURE__ */ new Date()
|
|
738
|
-
}]),
|
|
739
|
-
},
|
|
761
|
+
}]), v(!1);
|
|
762
|
+
}, G = `
|
|
740
763
|
fixed z-[99] overflow-hidden flex flex-col border border-white/40 shadow-2xl bg-white animate-chat-pop
|
|
741
|
-
${
|
|
764
|
+
${m ? "transition-[width,height,border-radius,right,bottom] duration-300 ease-in-out" : ""}
|
|
742
765
|
${l ? "bottom-0 right-0 w-full h-full md:bottom-6 md:right-28 md:w-[850px] md:h-[85vh] rounded-none md:rounded-[32px]" : "bottom-0 right-0 w-full h-[80vh] md:bottom-6 md:right-28 md:w-[420px] md:h-[580px] rounded-t-[28px] md:rounded-[28px]"}
|
|
743
766
|
`;
|
|
744
767
|
return /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
|
|
745
768
|
/* @__PURE__ */ e.jsx(
|
|
746
|
-
|
|
769
|
+
we,
|
|
747
770
|
{
|
|
748
771
|
isOpen: n,
|
|
749
|
-
onClick: () =>
|
|
772
|
+
onClick: () => s(!n),
|
|
750
773
|
primaryColor: r.primaryColor,
|
|
751
774
|
className: n ? "hidden md:flex" : "flex"
|
|
752
775
|
}
|
|
753
776
|
),
|
|
754
|
-
n && /* @__PURE__ */ e.jsxs("div", { className:
|
|
777
|
+
n && /* @__PURE__ */ e.jsxs("div", { className: G, style: { left: "auto" }, children: [
|
|
755
778
|
/* @__PURE__ */ e.jsx(
|
|
756
|
-
|
|
779
|
+
xe,
|
|
757
780
|
{
|
|
758
781
|
title: r.botName,
|
|
759
782
|
primaryColor: r.primaryColor,
|
|
760
|
-
onClose: () =>
|
|
783
|
+
onClose: () => s(!1),
|
|
761
784
|
onReset: z,
|
|
762
785
|
onToggleExpand: () => d(!l),
|
|
763
786
|
isExpanded: l,
|
|
764
|
-
language:
|
|
765
|
-
onLanguageChange:
|
|
787
|
+
language: h,
|
|
788
|
+
onLanguageChange: a
|
|
766
789
|
}
|
|
767
790
|
),
|
|
768
791
|
/* @__PURE__ */ e.jsx("div", { className: "flex-1 overflow-y-auto chat-scrollbar px-5 py-5 bg-slate-50/30", ref: R, children: /* @__PURE__ */ e.jsx(
|
|
769
|
-
|
|
792
|
+
ve,
|
|
770
793
|
{
|
|
771
|
-
messages:
|
|
772
|
-
isLoading:
|
|
794
|
+
messages: b,
|
|
795
|
+
isLoading: _,
|
|
773
796
|
description: X,
|
|
774
797
|
quickReplies: V,
|
|
775
|
-
onQuickReply: (
|
|
798
|
+
onQuickReply: (w) => F(w),
|
|
776
799
|
primaryColor: r.primaryColor,
|
|
777
800
|
renderMarkdown: r.renderMarkdown
|
|
778
801
|
}
|
|
779
802
|
) }),
|
|
780
803
|
/* @__PURE__ */ e.jsx("div", { className: "bg-white p-3 border-t border-slate-100", children: /* @__PURE__ */ e.jsx(
|
|
781
|
-
|
|
804
|
+
je,
|
|
782
805
|
{
|
|
783
806
|
placeholder: q,
|
|
784
|
-
onSendMessage:
|
|
807
|
+
onSendMessage: F,
|
|
785
808
|
primaryColor: r.primaryColor
|
|
786
809
|
}
|
|
787
810
|
) })
|
|
@@ -789,7 +812,7 @@ const me = ({
|
|
|
789
812
|
] });
|
|
790
813
|
};
|
|
791
814
|
export {
|
|
792
|
-
|
|
793
|
-
|
|
794
|
-
|
|
815
|
+
Ne as Chatbox,
|
|
816
|
+
C as MessageType,
|
|
817
|
+
y as SenderType
|
|
795
818
|
};
|