@retrivora-ai/rag-engine 1.2.2 → 1.2.3
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/{chunk-GCPPRD2G.mjs → chunk-WGPNEAK3.mjs} +37 -3
- package/dist/handlers/index.js +37 -3
- package/dist/handlers/index.mjs +1 -1
- package/dist/index.js +229 -106
- package/dist/index.mjs +199 -73
- package/dist/server.js +37 -3
- package/dist/server.mjs +1 -1
- package/package.json +2 -1
- package/src/components/ChatWindow.tsx +2 -1
- package/src/components/DynamicChart.tsx +113 -0
- package/src/components/MessageBubble.tsx +50 -1
- package/src/core/LangChainAgent.ts +20 -2
- package/src/core/Pipeline.ts +17 -0
package/dist/index.js
CHANGED
|
@@ -22,6 +22,18 @@ var __spreadValues = (a, b) => {
|
|
|
22
22
|
return a;
|
|
23
23
|
};
|
|
24
24
|
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
|
|
25
|
+
var __objRest = (source, exclude) => {
|
|
26
|
+
var target = {};
|
|
27
|
+
for (var prop in source)
|
|
28
|
+
if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
|
|
29
|
+
target[prop] = source[prop];
|
|
30
|
+
if (source != null && __getOwnPropSymbols)
|
|
31
|
+
for (var prop of __getOwnPropSymbols(source)) {
|
|
32
|
+
if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
|
|
33
|
+
target[prop] = source[prop];
|
|
34
|
+
}
|
|
35
|
+
return target;
|
|
36
|
+
};
|
|
25
37
|
var __export = (target, all) => {
|
|
26
38
|
for (var name in all)
|
|
27
39
|
__defProp(target, name, { get: all[name], enumerable: true });
|
|
@@ -59,15 +71,15 @@ __export(index_exports, {
|
|
|
59
71
|
module.exports = __toCommonJS(index_exports);
|
|
60
72
|
|
|
61
73
|
// src/components/ChatWidget.tsx
|
|
62
|
-
var
|
|
74
|
+
var import_react9 = __toESM(require("react"));
|
|
63
75
|
var import_lucide_react6 = require("lucide-react");
|
|
64
76
|
|
|
65
77
|
// src/components/ChatWindow.tsx
|
|
66
|
-
var
|
|
78
|
+
var import_react8 = __toESM(require("react"));
|
|
67
79
|
var import_lucide_react5 = require("lucide-react");
|
|
68
80
|
|
|
69
81
|
// src/components/MessageBubble.tsx
|
|
70
|
-
var
|
|
82
|
+
var import_react5 = __toESM(require("react"));
|
|
71
83
|
var import_lucide_react4 = require("lucide-react");
|
|
72
84
|
var import_react_markdown = __toESM(require("react-markdown"));
|
|
73
85
|
var import_remark_gfm = __toESM(require("remark-gfm"));
|
|
@@ -204,6 +216,71 @@ function ProductCarousel({ products, primaryColor = "#6366f1", onAddToCart }) {
|
|
|
204
216
|
));
|
|
205
217
|
}
|
|
206
218
|
|
|
219
|
+
// src/components/DynamicChart.tsx
|
|
220
|
+
var import_react4 = __toESM(require("react"));
|
|
221
|
+
var import_recharts = require("recharts");
|
|
222
|
+
var DEFAULT_COLORS = ["#6366f1", "#10b981", "#f59e0b", "#ef4444", "#8b5cf6", "#ec4899"];
|
|
223
|
+
function DynamicChart({ config, primaryColor = "#6366f1", accentColor = "#8b5cf6" }) {
|
|
224
|
+
const { type, data, xAxisKey = "name", dataKeys = [] } = config;
|
|
225
|
+
const colors = config.colors || [primaryColor, accentColor, ...DEFAULT_COLORS];
|
|
226
|
+
if (!data || data.length === 0) {
|
|
227
|
+
return /* @__PURE__ */ import_react4.default.createElement("div", { className: "p-4 text-sm text-slate-500" }, "No data available for chart.");
|
|
228
|
+
}
|
|
229
|
+
if (type === "pie") {
|
|
230
|
+
const pieDataKey = dataKeys[0] || Object.keys(data[0]).find((k) => k !== xAxisKey) || "value";
|
|
231
|
+
return /* @__PURE__ */ import_react4.default.createElement("div", { className: "w-full h-64 mt-4 mb-2 select-none" }, /* @__PURE__ */ import_react4.default.createElement(import_recharts.ResponsiveContainer, { width: "100%", height: "100%" }, /* @__PURE__ */ import_react4.default.createElement(import_recharts.PieChart, null, /* @__PURE__ */ import_react4.default.createElement(
|
|
232
|
+
import_recharts.Pie,
|
|
233
|
+
{
|
|
234
|
+
data,
|
|
235
|
+
dataKey: pieDataKey,
|
|
236
|
+
nameKey: xAxisKey,
|
|
237
|
+
cx: "50%",
|
|
238
|
+
cy: "50%",
|
|
239
|
+
outerRadius: 80,
|
|
240
|
+
label: ({ name, percent }) => `${name} ${((percent != null ? percent : 0) * 100).toFixed(0)}%`
|
|
241
|
+
},
|
|
242
|
+
data.map((entry, index) => /* @__PURE__ */ import_react4.default.createElement(import_recharts.Cell, { key: `cell-${index}`, fill: colors[index % colors.length] }))
|
|
243
|
+
), /* @__PURE__ */ import_react4.default.createElement(
|
|
244
|
+
import_recharts.Tooltip,
|
|
245
|
+
{
|
|
246
|
+
contentStyle: { borderRadius: "8px", border: "none", boxShadow: "0 4px 6px -1px rgb(0 0 0 / 0.1)" }
|
|
247
|
+
}
|
|
248
|
+
), /* @__PURE__ */ import_react4.default.createElement(import_recharts.Legend, null))));
|
|
249
|
+
}
|
|
250
|
+
return /* @__PURE__ */ import_react4.default.createElement("div", { className: "w-full h-64 mt-4 mb-2 select-none" }, /* @__PURE__ */ import_react4.default.createElement(import_recharts.ResponsiveContainer, { width: "100%", height: "100%" }, type === "bar" ? /* @__PURE__ */ import_react4.default.createElement(import_recharts.BarChart, { data, margin: { top: 10, right: 10, left: -20, bottom: 0 } }, /* @__PURE__ */ import_react4.default.createElement(import_recharts.CartesianGrid, { strokeDasharray: "3 3", vertical: false, stroke: "#e2e8f0" }), /* @__PURE__ */ import_react4.default.createElement(import_recharts.XAxis, { dataKey: xAxisKey, tick: { fontSize: 12, fill: "#64748b" }, tickLine: false, axisLine: { stroke: "#cbd5e1" } }), /* @__PURE__ */ import_react4.default.createElement(import_recharts.YAxis, { tick: { fontSize: 12, fill: "#64748b" }, tickLine: false, axisLine: false }), /* @__PURE__ */ import_react4.default.createElement(
|
|
251
|
+
import_recharts.Tooltip,
|
|
252
|
+
{
|
|
253
|
+
contentStyle: { borderRadius: "8px", border: "none", boxShadow: "0 4px 6px -1px rgb(0 0 0 / 0.1)" },
|
|
254
|
+
cursor: { fill: "#f1f5f9" }
|
|
255
|
+
}
|
|
256
|
+
), /* @__PURE__ */ import_react4.default.createElement(import_recharts.Legend, { wrapperStyle: { fontSize: 12 } }), dataKeys.map((key, index) => /* @__PURE__ */ import_react4.default.createElement(
|
|
257
|
+
import_recharts.Bar,
|
|
258
|
+
{
|
|
259
|
+
key,
|
|
260
|
+
dataKey: key,
|
|
261
|
+
fill: colors[index % colors.length],
|
|
262
|
+
radius: [4, 4, 0, 0],
|
|
263
|
+
barSize: Math.max(20, 60 / data.length)
|
|
264
|
+
}
|
|
265
|
+
))) : /* @__PURE__ */ import_react4.default.createElement(import_recharts.LineChart, { data, margin: { top: 10, right: 10, left: -20, bottom: 0 } }, /* @__PURE__ */ import_react4.default.createElement(import_recharts.CartesianGrid, { strokeDasharray: "3 3", vertical: false, stroke: "#e2e8f0" }), /* @__PURE__ */ import_react4.default.createElement(import_recharts.XAxis, { dataKey: xAxisKey, tick: { fontSize: 12, fill: "#64748b" }, tickLine: false, axisLine: { stroke: "#cbd5e1" } }), /* @__PURE__ */ import_react4.default.createElement(import_recharts.YAxis, { tick: { fontSize: 12, fill: "#64748b" }, tickLine: false, axisLine: false }), /* @__PURE__ */ import_react4.default.createElement(
|
|
266
|
+
import_recharts.Tooltip,
|
|
267
|
+
{
|
|
268
|
+
contentStyle: { borderRadius: "8px", border: "none", boxShadow: "0 4px 6px -1px rgb(0 0 0 / 0.1)" }
|
|
269
|
+
}
|
|
270
|
+
), /* @__PURE__ */ import_react4.default.createElement(import_recharts.Legend, { wrapperStyle: { fontSize: 12 } }), dataKeys.map((key, index) => /* @__PURE__ */ import_react4.default.createElement(
|
|
271
|
+
import_recharts.Line,
|
|
272
|
+
{
|
|
273
|
+
key,
|
|
274
|
+
type: "monotone",
|
|
275
|
+
dataKey: key,
|
|
276
|
+
stroke: colors[index % colors.length],
|
|
277
|
+
strokeWidth: 3,
|
|
278
|
+
dot: { r: 4, strokeWidth: 2 },
|
|
279
|
+
activeDot: { r: 6 }
|
|
280
|
+
}
|
|
281
|
+
)))));
|
|
282
|
+
}
|
|
283
|
+
|
|
207
284
|
// src/components/MessageBubble.tsx
|
|
208
285
|
function MessageBubble({
|
|
209
286
|
message,
|
|
@@ -214,7 +291,7 @@ function MessageBubble({
|
|
|
214
291
|
onAddToCart
|
|
215
292
|
}) {
|
|
216
293
|
const isUser = message.role === "user";
|
|
217
|
-
const [showSources, setShowSources] =
|
|
294
|
+
const [showSources, setShowSources] = import_react5.default.useState(false);
|
|
218
295
|
const resolveImage = (data) => {
|
|
219
296
|
if (!data) return void 0;
|
|
220
297
|
const singleFields = ["image", "img", "thumbnail"];
|
|
@@ -227,7 +304,7 @@ function MessageBubble({
|
|
|
227
304
|
}
|
|
228
305
|
return void 0;
|
|
229
306
|
};
|
|
230
|
-
const productsFromSources =
|
|
307
|
+
const productsFromSources = import_react5.default.useMemo(() => {
|
|
231
308
|
if (isUser || !sources) return [];
|
|
232
309
|
return sources.filter((s) => {
|
|
233
310
|
const m = s.metadata || {};
|
|
@@ -245,7 +322,7 @@ function MessageBubble({
|
|
|
245
322
|
};
|
|
246
323
|
});
|
|
247
324
|
}, [sources, isUser]);
|
|
248
|
-
const { productsFromContent, cleanContent } =
|
|
325
|
+
const { productsFromContent, cleanContent } = import_react5.default.useMemo(() => {
|
|
249
326
|
if (isUser) return { productsFromContent: [], cleanContent: message.content };
|
|
250
327
|
const jsonRegex = /```json\s*([\s\S]*?)\s*```/g;
|
|
251
328
|
const products = [];
|
|
@@ -268,7 +345,7 @@ function MessageBubble({
|
|
|
268
345
|
}
|
|
269
346
|
return { productsFromContent: products, cleanContent: content.trim() };
|
|
270
347
|
}, [message.content, isUser]);
|
|
271
|
-
const allProducts =
|
|
348
|
+
const allProducts = import_react5.default.useMemo(() => {
|
|
272
349
|
if (productsFromContent.length > 0) return productsFromContent;
|
|
273
350
|
const uniqueProducts = [];
|
|
274
351
|
const seenIds = /* @__PURE__ */ new Set();
|
|
@@ -286,43 +363,88 @@ function MessageBubble({
|
|
|
286
363
|
return uniqueProducts;
|
|
287
364
|
}, [productsFromSources, productsFromContent, message.content]);
|
|
288
365
|
const hasProducts = allProducts.length > 0;
|
|
289
|
-
return /* @__PURE__ */
|
|
366
|
+
return /* @__PURE__ */ import_react5.default.createElement("div", { className: `flex gap-3 ${isUser ? "flex-row-reverse" : "flex-row"} items-start` }, /* @__PURE__ */ import_react5.default.createElement(
|
|
290
367
|
"div",
|
|
291
368
|
{
|
|
292
369
|
className: `flex-shrink-0 w-8 h-8 rounded-full flex items-center justify-center shadow-lg ${isUser ? "text-white" : "bg-slate-100 dark:bg-white/10 text-slate-700 dark:text-white/80"}`,
|
|
293
370
|
style: isUser ? { background: `linear-gradient(135deg, ${primaryColor}, ${accentColor})` } : {}
|
|
294
371
|
},
|
|
295
|
-
isUser ? /* @__PURE__ */
|
|
296
|
-
), /* @__PURE__ */
|
|
372
|
+
isUser ? /* @__PURE__ */ import_react5.default.createElement(import_lucide_react4.User, { className: "w-4 h-4 text-white" }) : /* @__PURE__ */ import_react5.default.createElement(import_lucide_react4.Bot, { className: "w-4 h-4" })
|
|
373
|
+
), /* @__PURE__ */ import_react5.default.createElement("div", { className: `flex flex-col gap-1 max-w-[90%] ${isUser ? "items-end" : "items-start"}` }, /* @__PURE__ */ import_react5.default.createElement(
|
|
297
374
|
"div",
|
|
298
375
|
{
|
|
299
376
|
className: `relative px-4 py-3 rounded-2xl text-sm leading-relaxed shadow-sm dark:shadow-lg ${isUser ? "text-white rounded-tr-sm" : "bg-white dark:bg-white/5 border border-slate-200 dark:border-white/10 text-slate-800 dark:text-white/90 rounded-tl-sm"}`,
|
|
300
377
|
style: isUser ? { background: `linear-gradient(135deg, ${primaryColor}, ${accentColor})` } : {}
|
|
301
378
|
},
|
|
302
|
-
isStreaming && !message.content ? /* @__PURE__ */
|
|
303
|
-
|
|
379
|
+
isStreaming && !message.content ? /* @__PURE__ */ import_react5.default.createElement("span", { className: "flex items-center gap-1 py-1" }, /* @__PURE__ */ import_react5.default.createElement("span", { className: "w-1.5 h-1.5 rounded-full bg-slate-400 dark:bg-white/60 animate-bounce [animation-delay:0ms]" }), /* @__PURE__ */ import_react5.default.createElement("span", { className: "w-1.5 h-1.5 rounded-full bg-slate-400 dark:bg-white/60 animate-bounce [animation-delay:150ms]" }), /* @__PURE__ */ import_react5.default.createElement("span", { className: "w-1.5 h-1.5 rounded-full bg-slate-400 dark:bg-white/60 animate-bounce [animation-delay:300ms]" })) : /* @__PURE__ */ import_react5.default.createElement("div", { className: `prose prose-sm max-w-none ${isUser ? "prose-invert" : "dark:prose-invert"}` }, /* @__PURE__ */ import_react5.default.createElement(
|
|
380
|
+
import_react_markdown.default,
|
|
381
|
+
{
|
|
382
|
+
remarkPlugins: [import_remark_gfm.default],
|
|
383
|
+
components: {
|
|
384
|
+
table: (_a) => {
|
|
385
|
+
var props = __objRest(_a, []);
|
|
386
|
+
return /* @__PURE__ */ import_react5.default.createElement("div", { className: "overflow-x-auto my-4 rounded-xl border border-slate-200 dark:border-white/10 shadow-sm" }, /* @__PURE__ */ import_react5.default.createElement("table", __spreadValues({ className: "w-full text-left border-collapse min-w-[400px]" }, props)));
|
|
387
|
+
},
|
|
388
|
+
thead: (_b) => {
|
|
389
|
+
var props = __objRest(_b, []);
|
|
390
|
+
return /* @__PURE__ */ import_react5.default.createElement("thead", __spreadValues({ className: "bg-slate-50 dark:bg-white/5 border-b border-slate-200 dark:border-white/10" }, props));
|
|
391
|
+
},
|
|
392
|
+
th: (_c) => {
|
|
393
|
+
var props = __objRest(_c, []);
|
|
394
|
+
return /* @__PURE__ */ import_react5.default.createElement("th", __spreadValues({ className: "p-3 font-semibold text-slate-700 dark:text-white/90 first:rounded-tl-xl last:rounded-tr-xl" }, props));
|
|
395
|
+
},
|
|
396
|
+
td: (_d) => {
|
|
397
|
+
var props = __objRest(_d, []);
|
|
398
|
+
return /* @__PURE__ */ import_react5.default.createElement("td", __spreadValues({ className: "p-3 border-b border-slate-100 dark:border-white/5 last:border-0 text-slate-600 dark:text-white/70" }, props));
|
|
399
|
+
},
|
|
400
|
+
code(_e) {
|
|
401
|
+
var _f = _e, { inline, className, children } = _f, props = __objRest(_f, ["inline", "className", "children"]);
|
|
402
|
+
const match = /language-(\w+)/.exec(className || "");
|
|
403
|
+
const isChart = match && match[1] === "chart";
|
|
404
|
+
if (!inline && isChart) {
|
|
405
|
+
try {
|
|
406
|
+
const config = JSON.parse(String(children).replace(/\n$/, ""));
|
|
407
|
+
return /* @__PURE__ */ import_react5.default.createElement("div", { className: "my-4 p-4 bg-white dark:bg-slate-900 rounded-xl border border-slate-200 dark:border-white/10 shadow-sm" }, /* @__PURE__ */ import_react5.default.createElement(
|
|
408
|
+
DynamicChart,
|
|
409
|
+
{
|
|
410
|
+
config,
|
|
411
|
+
primaryColor,
|
|
412
|
+
accentColor
|
|
413
|
+
}
|
|
414
|
+
));
|
|
415
|
+
} catch (e) {
|
|
416
|
+
return /* @__PURE__ */ import_react5.default.createElement("div", { className: "p-4 bg-red-50 dark:bg-red-900/20 text-red-600 dark:text-red-400 rounded-lg text-sm" }, "Failed to render chart: Invalid configuration.");
|
|
417
|
+
}
|
|
418
|
+
}
|
|
419
|
+
return /* @__PURE__ */ import_react5.default.createElement("code", __spreadValues({ className }, props), children);
|
|
420
|
+
}
|
|
421
|
+
}
|
|
422
|
+
},
|
|
423
|
+
cleanContent || message.content
|
|
424
|
+
), isStreaming && message.content && /* @__PURE__ */ import_react5.default.createElement("span", { className: "inline-block w-1.5 h-3.5 ml-1 bg-emerald-500 animate-pulse align-middle" }))
|
|
425
|
+
), !isUser && hasProducts && /* @__PURE__ */ import_react5.default.createElement("div", { className: "w-full mt-1" }, /* @__PURE__ */ import_react5.default.createElement(
|
|
304
426
|
ProductCarousel,
|
|
305
427
|
{
|
|
306
428
|
products: allProducts,
|
|
307
429
|
primaryColor,
|
|
308
430
|
onAddToCart
|
|
309
431
|
}
|
|
310
|
-
)), !isUser && sources && sources.length > 0 && /* @__PURE__ */
|
|
432
|
+
)), !isUser && sources && sources.length > 0 && /* @__PURE__ */ import_react5.default.createElement("div", { className: "w-full" }, /* @__PURE__ */ import_react5.default.createElement(
|
|
311
433
|
"button",
|
|
312
434
|
{
|
|
313
435
|
onClick: () => setShowSources((s) => !s),
|
|
314
436
|
className: "text-[11px] text-indigo-400 hover:text-indigo-300 transition-colors flex items-center gap-1 mt-1"
|
|
315
437
|
},
|
|
316
|
-
showSources ? /* @__PURE__ */
|
|
438
|
+
showSources ? /* @__PURE__ */ import_react5.default.createElement(import_lucide_react4.ChevronDown, { className: "w-3 h-3" }) : /* @__PURE__ */ import_react5.default.createElement(import_lucide_react4.ChevronRight, { className: "w-3 h-3" }),
|
|
317
439
|
sources.length,
|
|
318
440
|
" source",
|
|
319
441
|
sources.length !== 1 ? "s" : "",
|
|
320
442
|
" used"
|
|
321
|
-
), showSources && /* @__PURE__ */
|
|
443
|
+
), showSources && /* @__PURE__ */ import_react5.default.createElement("div", { className: "mt-2 flex flex-col gap-2" }, sources.map((src, i) => /* @__PURE__ */ import_react5.default.createElement(SourceCard, { key: src.id, source: src, index: i }))))));
|
|
322
444
|
}
|
|
323
445
|
|
|
324
446
|
// src/components/ConfigProvider.tsx
|
|
325
|
-
var
|
|
447
|
+
var import_react6 = __toESM(require("react"));
|
|
326
448
|
|
|
327
449
|
// src/utils/templateUtils.ts
|
|
328
450
|
function mergeDefined(base, override) {
|
|
@@ -374,7 +496,7 @@ var CHAT_SUGGESTIONS = [
|
|
|
374
496
|
];
|
|
375
497
|
|
|
376
498
|
// src/components/ConfigProvider.tsx
|
|
377
|
-
var ConfigContext = (0,
|
|
499
|
+
var ConfigContext = (0, import_react6.createContext)(DEFAULT_CONFIG);
|
|
378
500
|
function ConfigProvider({
|
|
379
501
|
config,
|
|
380
502
|
children
|
|
@@ -383,17 +505,17 @@ function ConfigProvider({
|
|
|
383
505
|
projectId: (config == null ? void 0 : config.projectId) || DEFAULT_CONFIG.projectId,
|
|
384
506
|
ui: mergeDefined(DEFAULT_CONFIG.ui, config == null ? void 0 : config.ui)
|
|
385
507
|
};
|
|
386
|
-
return /* @__PURE__ */
|
|
508
|
+
return /* @__PURE__ */ import_react6.default.createElement(ConfigContext.Provider, { value: merged }, children);
|
|
387
509
|
}
|
|
388
510
|
function useConfig() {
|
|
389
|
-
return (0,
|
|
511
|
+
return (0, import_react6.useContext)(ConfigContext);
|
|
390
512
|
}
|
|
391
513
|
|
|
392
514
|
// src/hooks/useRagChat.ts
|
|
393
|
-
var
|
|
515
|
+
var import_react7 = require("react");
|
|
394
516
|
|
|
395
517
|
// src/hooks/useStoredMessages.ts
|
|
396
|
-
var
|
|
518
|
+
var React7 = __toESM(require("react"));
|
|
397
519
|
function readStoredMessages(storageKey) {
|
|
398
520
|
if (typeof window === "undefined") {
|
|
399
521
|
return [];
|
|
@@ -410,8 +532,8 @@ function readStoredMessages(storageKey) {
|
|
|
410
532
|
}
|
|
411
533
|
}
|
|
412
534
|
function useStoredMessages(storageKey, persist) {
|
|
413
|
-
const [messages, setMessages] =
|
|
414
|
-
|
|
535
|
+
const [messages, setMessages] = React7.useState(() => persist ? readStoredMessages(storageKey) : []);
|
|
536
|
+
React7.useEffect(() => {
|
|
415
537
|
if (!persist || typeof window === "undefined") {
|
|
416
538
|
return;
|
|
417
539
|
}
|
|
@@ -451,14 +573,14 @@ function useRagChat(projectId, options = {}) {
|
|
|
451
573
|
} = options;
|
|
452
574
|
const storageKey = `rag_chat_${projectId}`;
|
|
453
575
|
const [messages, setMessages] = useStoredMessages(storageKey, persist);
|
|
454
|
-
const [isLoading, setIsLoading] = (0,
|
|
455
|
-
const [error, setError] = (0,
|
|
456
|
-
const lastInputRef = (0,
|
|
457
|
-
const messagesRef = (0,
|
|
458
|
-
(0,
|
|
576
|
+
const [isLoading, setIsLoading] = (0, import_react7.useState)(false);
|
|
577
|
+
const [error, setError] = (0, import_react7.useState)(null);
|
|
578
|
+
const lastInputRef = (0, import_react7.useRef)("");
|
|
579
|
+
const messagesRef = (0, import_react7.useRef)(messages);
|
|
580
|
+
(0, import_react7.useEffect)(() => {
|
|
459
581
|
messagesRef.current = messages;
|
|
460
582
|
}, [messages]);
|
|
461
|
-
const sendMessage = (0,
|
|
583
|
+
const sendMessage = (0, import_react7.useCallback)(
|
|
462
584
|
async (text, opts) => {
|
|
463
585
|
var _a, _b;
|
|
464
586
|
const trimmed = text.trim();
|
|
@@ -555,12 +677,12 @@ function useRagChat(projectId, options = {}) {
|
|
|
555
677
|
},
|
|
556
678
|
[apiUrl, isLoading, namespace, onError, onReply, projectId, setMessages]
|
|
557
679
|
);
|
|
558
|
-
const clear = (0,
|
|
680
|
+
const clear = (0, import_react7.useCallback)(() => {
|
|
559
681
|
setMessages([]);
|
|
560
682
|
setError(null);
|
|
561
683
|
if (persist) localStorage.removeItem(storageKey);
|
|
562
684
|
}, [persist, setMessages, storageKey]);
|
|
563
|
-
const retry = (0,
|
|
685
|
+
const retry = (0, import_react7.useCallback)(async () => {
|
|
564
686
|
if (lastInputRef.current) {
|
|
565
687
|
const latestMessage = messagesRef.current[messagesRef.current.length - 1];
|
|
566
688
|
await sendMessage(lastInputRef.current, {
|
|
@@ -594,18 +716,18 @@ function ChatWindow({
|
|
|
594
716
|
}) {
|
|
595
717
|
var _a;
|
|
596
718
|
const { ui, projectId } = useConfig();
|
|
597
|
-
const [input, setInput] = (0,
|
|
598
|
-
const [mounted, setMounted] = (0,
|
|
599
|
-
const bottomRef = (0,
|
|
600
|
-
const inputRef = (0,
|
|
719
|
+
const [input, setInput] = (0, import_react8.useState)("");
|
|
720
|
+
const [mounted, setMounted] = (0, import_react8.useState)(false);
|
|
721
|
+
const bottomRef = (0, import_react8.useRef)(null);
|
|
722
|
+
const inputRef = (0, import_react8.useRef)(null);
|
|
601
723
|
const { messages, send, clear, isLoading, error } = useRagChat(projectId, {
|
|
602
724
|
namespace: projectId
|
|
603
725
|
});
|
|
604
|
-
const [suggestions, setSuggestions] = (0,
|
|
605
|
-
const [isSuggesting, setIsSuggesting] = (0,
|
|
606
|
-
const [isListening, setIsListening] = (0,
|
|
607
|
-
const recognitionRef = (0,
|
|
608
|
-
(0,
|
|
726
|
+
const [suggestions, setSuggestions] = (0, import_react8.useState)([]);
|
|
727
|
+
const [isSuggesting, setIsSuggesting] = (0, import_react8.useState)(false);
|
|
728
|
+
const [isListening, setIsListening] = (0, import_react8.useState)(false);
|
|
729
|
+
const recognitionRef = (0, import_react8.useRef)(null);
|
|
730
|
+
(0, import_react8.useEffect)(() => {
|
|
609
731
|
if (typeof window !== "undefined") {
|
|
610
732
|
const win = window;
|
|
611
733
|
const SpeechRecognition = win.SpeechRecognition || win.webkitSpeechRecognition;
|
|
@@ -651,16 +773,16 @@ function ChatWindow({
|
|
|
651
773
|
}
|
|
652
774
|
}
|
|
653
775
|
};
|
|
654
|
-
(0,
|
|
776
|
+
(0, import_react8.useEffect)(() => {
|
|
655
777
|
setMounted(true);
|
|
656
778
|
}, []);
|
|
657
|
-
(0,
|
|
779
|
+
(0, import_react8.useEffect)(() => {
|
|
658
780
|
var _a2;
|
|
659
781
|
if (messages.length > 0 || isLoading) {
|
|
660
782
|
(_a2 = bottomRef.current) == null ? void 0 : _a2.scrollIntoView({ behavior: "smooth" });
|
|
661
783
|
}
|
|
662
784
|
}, [messages, isLoading]);
|
|
663
|
-
const sendMessage = (0,
|
|
785
|
+
const sendMessage = (0, import_react8.useCallback)(async () => {
|
|
664
786
|
var _a2;
|
|
665
787
|
const text = input.trim();
|
|
666
788
|
if (!text || isLoading) return;
|
|
@@ -690,7 +812,7 @@ function ChatWindow({
|
|
|
690
812
|
const isEmpty = messages.length === 0;
|
|
691
813
|
const currentRadius = BORDER_RADIUS_MAP[ui.borderRadius || "xl"];
|
|
692
814
|
const isGlass = ui.visualStyle !== "solid";
|
|
693
|
-
(0,
|
|
815
|
+
(0, import_react8.useEffect)(() => {
|
|
694
816
|
if (input.trim().length < 3) {
|
|
695
817
|
return;
|
|
696
818
|
}
|
|
@@ -714,83 +836,83 @@ function ChatWindow({
|
|
|
714
836
|
}, 800);
|
|
715
837
|
return () => clearTimeout(timer);
|
|
716
838
|
}, [input, projectId]);
|
|
717
|
-
return /* @__PURE__ */
|
|
839
|
+
return /* @__PURE__ */ import_react8.default.createElement(
|
|
718
840
|
"div",
|
|
719
841
|
{
|
|
720
842
|
className: `relative flex flex-col border border-slate-200 dark:border-white/10 shadow-2xl transition-all duration-300 ${currentRadius} ${isGlass ? "bg-white/90 dark:bg-[#0f0f1a]/90 backdrop-blur-xl" : "bg-white dark:bg-[#0f0f1a]"} ${className}`,
|
|
721
843
|
style: __spreadValues({ "--primary": ui.primaryColor, "--accent": ui.accentColor }, style)
|
|
722
844
|
},
|
|
723
|
-
onResizeStart && /* @__PURE__ */
|
|
845
|
+
onResizeStart && /* @__PURE__ */ import_react8.default.createElement(
|
|
724
846
|
"div",
|
|
725
847
|
{
|
|
726
848
|
onMouseDown: onResizeStart,
|
|
727
849
|
className: "absolute top-0 left-0 w-6 h-6 cursor-nw-resize z-[100] group flex items-start justify-start p-1",
|
|
728
850
|
title: "Drag to resize"
|
|
729
851
|
},
|
|
730
|
-
/* @__PURE__ */
|
|
852
|
+
/* @__PURE__ */ import_react8.default.createElement("div", { className: "w-2.5 h-2.5 border-t-2 border-l-2 border-slate-300 dark:border-white/20 group-hover:border-slate-500 dark:group-hover:border-white/50 transition-colors rounded-tl-[2px]" })
|
|
731
853
|
),
|
|
732
|
-
/* @__PURE__ */
|
|
854
|
+
/* @__PURE__ */ import_react8.default.createElement(
|
|
733
855
|
"div",
|
|
734
856
|
{
|
|
735
857
|
className: "flex items-center justify-between px-5 py-4 border-b border-slate-200 dark:border-white/10",
|
|
736
858
|
style: { background: `linear-gradient(135deg, ${ui.primaryColor}15, ${ui.accentColor}10)` }
|
|
737
859
|
},
|
|
738
|
-
/* @__PURE__ */
|
|
860
|
+
/* @__PURE__ */ import_react8.default.createElement("div", { className: "flex items-center gap-3" }, ui.logoUrl ? (
|
|
739
861
|
// eslint-disable-next-line @next/next/no-img-element
|
|
740
|
-
/* @__PURE__ */
|
|
741
|
-
) : /* @__PURE__ */
|
|
862
|
+
/* @__PURE__ */ import_react8.default.createElement("img", { src: ui.logoUrl, alt: "logo", className: "w-8 h-8 rounded-lg object-cover" })
|
|
863
|
+
) : /* @__PURE__ */ import_react8.default.createElement(
|
|
742
864
|
"div",
|
|
743
865
|
{
|
|
744
866
|
className: `w-9 h-9 flex items-center justify-center shadow-md ${ui.borderRadius === "full" ? "rounded-full" : "rounded-xl"}`,
|
|
745
867
|
style: { background: `linear-gradient(135deg, ${ui.primaryColor}, ${ui.accentColor})` }
|
|
746
868
|
},
|
|
747
|
-
/* @__PURE__ */
|
|
748
|
-
), /* @__PURE__ */
|
|
749
|
-
/* @__PURE__ */
|
|
869
|
+
/* @__PURE__ */ import_react8.default.createElement(import_lucide_react5.Bot, { className: "w-5 h-5 text-white" })
|
|
870
|
+
), /* @__PURE__ */ import_react8.default.createElement("div", null, /* @__PURE__ */ import_react8.default.createElement("h2", { className: "text-slate-900 dark:text-white font-semibold text-sm leading-tight" }, ui.title), ui.poweredBy && /* @__PURE__ */ import_react8.default.createElement("p", { className: "text-slate-500 dark:text-white/40 text-[11px] leading-tight" }, `Powered by ${ui.poweredBy}`))),
|
|
871
|
+
/* @__PURE__ */ import_react8.default.createElement("div", { className: "flex items-center gap-1.5" }, /* @__PURE__ */ import_react8.default.createElement("span", { className: "flex items-center gap-1 text-[10px] text-emerald-500 dark:text-emerald-400 mr-2" }, /* @__PURE__ */ import_react8.default.createElement("span", { className: "w-1.5 h-1.5 rounded-full bg-emerald-500 dark:bg-emerald-400 animate-pulse" }), "Online"), /* @__PURE__ */ import_react8.default.createElement("div", { className: "flex items-center bg-slate-100/50 dark:bg-white/5 rounded-lg p-0.5 border border-slate-200/50 dark:border-white/5" }, mounted && messages.length > 0 && /* @__PURE__ */ import_react8.default.createElement(
|
|
750
872
|
"button",
|
|
751
873
|
{
|
|
752
874
|
onClick: clearHistory,
|
|
753
875
|
title: "Clear conversation",
|
|
754
876
|
className: "w-7 h-7 rounded-md flex items-center justify-center text-slate-400 hover:text-rose-500 dark:text-white/40 dark:hover:text-rose-400 hover:bg-white dark:hover:bg-white/10 transition-all cursor-pointer"
|
|
755
877
|
},
|
|
756
|
-
/* @__PURE__ */
|
|
757
|
-
), isResized && onResetResize && /* @__PURE__ */
|
|
878
|
+
/* @__PURE__ */ import_react8.default.createElement(import_lucide_react5.Trash2, { className: "w-3.5 h-3.5" })
|
|
879
|
+
), isResized && onResetResize && /* @__PURE__ */ import_react8.default.createElement(
|
|
758
880
|
"button",
|
|
759
881
|
{
|
|
760
882
|
onClick: onResetResize,
|
|
761
883
|
title: "Reset to default size",
|
|
762
884
|
className: "w-7 h-7 rounded-md flex items-center justify-center text-slate-400 hover:text-blue-500 dark:text-white/40 dark:hover:text-blue-400 hover:bg-white dark:hover:bg-white/10 transition-all cursor-pointer"
|
|
763
885
|
},
|
|
764
|
-
/* @__PURE__ */
|
|
765
|
-
), onMaximize && /* @__PURE__ */
|
|
886
|
+
/* @__PURE__ */ import_react8.default.createElement(import_lucide_react5.RotateCcw, { className: "w-3.5 h-3.5" })
|
|
887
|
+
), onMaximize && /* @__PURE__ */ import_react8.default.createElement(
|
|
766
888
|
"button",
|
|
767
889
|
{
|
|
768
890
|
onClick: onMaximize,
|
|
769
891
|
title: isMaximized ? "Minimize" : "Maximize",
|
|
770
892
|
className: "w-7 h-7 rounded-md flex items-center justify-center text-slate-400 hover:text-blue-500 dark:text-white/40 dark:hover:text-blue-400 hover:bg-white dark:hover:bg-white/10 transition-all cursor-pointer"
|
|
771
893
|
},
|
|
772
|
-
isMaximized ? /* @__PURE__ */
|
|
773
|
-
), showClose && onClose && /* @__PURE__ */
|
|
894
|
+
isMaximized ? /* @__PURE__ */ import_react8.default.createElement(import_lucide_react5.Minimize2, { className: "w-3.5 h-3.5" }) : /* @__PURE__ */ import_react8.default.createElement(import_lucide_react5.Maximize2, { className: "w-3.5 h-3.5" })
|
|
895
|
+
), showClose && onClose && /* @__PURE__ */ import_react8.default.createElement(
|
|
774
896
|
"button",
|
|
775
897
|
{
|
|
776
898
|
onClick: onClose,
|
|
777
899
|
title: "Close chat",
|
|
778
900
|
className: "w-7 h-7 rounded-md flex items-center justify-center text-slate-400 hover:text-slate-600 dark:text-white/40 dark:hover:text-white/70 hover:bg-white dark:hover:bg-white/10 transition-all cursor-pointer"
|
|
779
901
|
},
|
|
780
|
-
/* @__PURE__ */
|
|
902
|
+
/* @__PURE__ */ import_react8.default.createElement(import_lucide_react5.X, { className: "w-4 h-4" })
|
|
781
903
|
)))
|
|
782
904
|
),
|
|
783
|
-
/* @__PURE__ */
|
|
905
|
+
/* @__PURE__ */ import_react8.default.createElement("div", { className: "flex-1 overflow-y-auto px-4 py-4 space-y-5 scrollbar-thin scrollbar-thumb-slate-200 dark:scrollbar-thumb-white/10 scrollbar-track-transparent min-h-0 bg-slate-50 dark:bg-transparent" }, !mounted || isEmpty ? (
|
|
784
906
|
/* Welcome state */
|
|
785
|
-
/* @__PURE__ */
|
|
907
|
+
/* @__PURE__ */ import_react8.default.createElement("div", { className: "h-full flex flex-col items-center justify-center text-center gap-4 px-6 py-12" }, /* @__PURE__ */ import_react8.default.createElement(
|
|
786
908
|
"div",
|
|
787
909
|
{
|
|
788
910
|
className: `w-16 h-16 flex items-center justify-center shadow-lg ${ui.borderRadius === "full" ? "rounded-full" : "rounded-2xl"}`,
|
|
789
911
|
style: { background: `linear-gradient(135deg, ${ui.primaryColor}, ${ui.accentColor})` }
|
|
790
912
|
},
|
|
791
|
-
/* @__PURE__ */
|
|
792
|
-
), /* @__PURE__ */
|
|
793
|
-
(suggestion) => /* @__PURE__ */
|
|
913
|
+
/* @__PURE__ */ import_react8.default.createElement(import_lucide_react5.Sparkles, { className: "w-8 h-8 text-white" })
|
|
914
|
+
), /* @__PURE__ */ import_react8.default.createElement("div", null, /* @__PURE__ */ import_react8.default.createElement("p", { className: "text-slate-800 dark:text-white/80 font-medium leading-relaxed" }, ui.welcomeMessage), /* @__PURE__ */ import_react8.default.createElement("p", { className: "text-slate-500 dark:text-white/30 text-sm mt-2" }, "Ask a question to get started")), /* @__PURE__ */ import_react8.default.createElement("div", { className: "flex flex-wrap gap-2 justify-center mt-2" }, CHAT_SUGGESTIONS.map(
|
|
915
|
+
(suggestion) => /* @__PURE__ */ import_react8.default.createElement(
|
|
794
916
|
"button",
|
|
795
917
|
{
|
|
796
918
|
key: suggestion,
|
|
@@ -804,7 +926,7 @@ function ChatWindow({
|
|
|
804
926
|
suggestion
|
|
805
927
|
)
|
|
806
928
|
)))
|
|
807
|
-
) : messages.map((msg, index) => /* @__PURE__ */
|
|
929
|
+
) : messages.map((msg, index) => /* @__PURE__ */ import_react8.default.createElement(
|
|
808
930
|
MessageBubble,
|
|
809
931
|
{
|
|
810
932
|
key: msg.id,
|
|
@@ -815,7 +937,7 @@ function ChatWindow({
|
|
|
815
937
|
accentColor: ui.accentColor,
|
|
816
938
|
onAddToCart
|
|
817
939
|
}
|
|
818
|
-
)), isLoading && ((_a = messages[messages.length - 1]) == null ? void 0 : _a.role) !== "assistant" && /* @__PURE__ */
|
|
940
|
+
)), isLoading && ((_a = messages[messages.length - 1]) == null ? void 0 : _a.role) !== "assistant" && /* @__PURE__ */ import_react8.default.createElement(
|
|
819
941
|
MessageBubble,
|
|
820
942
|
{
|
|
821
943
|
message: { id: "loading", role: "assistant", content: "", createdAt: (/* @__PURE__ */ new Date()).toISOString() },
|
|
@@ -824,8 +946,8 @@ function ChatWindow({
|
|
|
824
946
|
accentColor: ui.accentColor,
|
|
825
947
|
onAddToCart
|
|
826
948
|
}
|
|
827
|
-
), error && /* @__PURE__ */
|
|
828
|
-
/* @__PURE__ */
|
|
949
|
+
), error && /* @__PURE__ */ import_react8.default.createElement("div", { className: "flex items-center gap-2 text-rose-500 dark:text-rose-400 text-sm bg-rose-50 dark:bg-rose-400/10 border border-rose-200 dark:border-rose-400/20 rounded-xl px-4 py-3" }, /* @__PURE__ */ import_react8.default.createElement(import_lucide_react5.TriangleAlert, { className: "w-4 h-4 flex-shrink-0" }), /* @__PURE__ */ import_react8.default.createElement("span", null, error)), /* @__PURE__ */ import_react8.default.createElement("div", { ref: bottomRef })),
|
|
950
|
+
/* @__PURE__ */ import_react8.default.createElement("div", { className: `px-4 pb-4 pt-2 border-t border-slate-200 dark:border-white/10 ${isGlass ? "bg-transparent" : "bg-white dark:bg-[#0f0f1a]"}` }, (suggestions.length > 0 || isSuggesting) && !isLoading && /* @__PURE__ */ import_react8.default.createElement("div", { className: "mb-3 flex flex-wrap gap-2 animate-in fade-in slide-in-from-bottom-2 duration-300" }, suggestions.map((suggestion) => /* @__PURE__ */ import_react8.default.createElement(
|
|
829
951
|
"button",
|
|
830
952
|
{
|
|
831
953
|
key: suggestion,
|
|
@@ -837,9 +959,9 @@ function ChatWindow({
|
|
|
837
959
|
},
|
|
838
960
|
className: "flex items-center gap-1.5 px-3 py-1.5 rounded-xl text-[11px] font-medium bg-white dark:bg-white/5 border border-slate-200 dark:border-white/10 text-slate-600 dark:text-white/60 hover:text-slate-900 dark:hover:text-white/90 hover:border-slate-300 dark:hover:border-white/20 transition-all shadow-sm cursor-pointer group"
|
|
839
961
|
},
|
|
840
|
-
/* @__PURE__ */
|
|
962
|
+
/* @__PURE__ */ import_react8.default.createElement(import_lucide_react5.Sparkles, { className: "w-3 h-3 text-amber-400" }),
|
|
841
963
|
suggestion
|
|
842
|
-
)), isSuggesting && suggestions.length === 0 && /* @__PURE__ */
|
|
964
|
+
)), isSuggesting && suggestions.length === 0 && /* @__PURE__ */ import_react8.default.createElement("div", { className: "flex items-center gap-1.5 px-3 py-1.5 rounded-xl text-[11px] font-medium text-slate-400 dark:text-white/30 animate-pulse" }, /* @__PURE__ */ import_react8.default.createElement(import_lucide_react5.Sparkles, { className: "w-3 h-3" }), "Thinking...")), /* @__PURE__ */ import_react8.default.createElement("div", { className: `flex items-end gap-2 bg-slate-50 dark:bg-white/5 border border-slate-200 dark:border-white/10 p-2 focus-within:border-slate-300 dark:focus-within:border-white/20 transition-all ${ui.borderRadius === "full" ? "rounded-3xl" : "rounded-2xl"}` }, /* @__PURE__ */ import_react8.default.createElement(
|
|
843
965
|
"textarea",
|
|
844
966
|
{
|
|
845
967
|
ref: inputRef,
|
|
@@ -858,16 +980,17 @@ function ChatWindow({
|
|
|
858
980
|
className: "flex-1 bg-transparent text-slate-900 dark:text-white/90 placeholder-slate-400 dark:placeholder-white/30 text-sm resize-none outline-none py-1.5 px-2 max-h-32 leading-relaxed disabled:opacity-50",
|
|
859
981
|
style: { scrollbarWidth: "none" }
|
|
860
982
|
}
|
|
861
|
-
), ui.enableVoiceInput !== false && /* @__PURE__ */
|
|
983
|
+
), ui.enableVoiceInput !== false && /* @__PURE__ */ import_react8.default.createElement(
|
|
862
984
|
"button",
|
|
863
985
|
{
|
|
864
986
|
type: "button",
|
|
865
987
|
onClick: toggleListening,
|
|
866
|
-
|
|
988
|
+
disabled: isLoading,
|
|
989
|
+
className: `flex-shrink-0 w-9 h-9 rounded-xl flex items-center justify-center transition-all hover:scale-105 active:scale-95 disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:scale-100 disabled:active:scale-100 ${isListening ? "bg-rose-500 text-white animate-pulse shadow-md shadow-rose-500/20" : "text-slate-400 dark:text-white/40 hover:bg-slate-200 dark:hover:bg-white/10"}`,
|
|
867
990
|
title: isListening ? "Stop listening" : "Start voice input"
|
|
868
991
|
},
|
|
869
|
-
isListening ? /* @__PURE__ */
|
|
870
|
-
), /* @__PURE__ */
|
|
992
|
+
isListening ? /* @__PURE__ */ import_react8.default.createElement(import_lucide_react5.MicOff, { className: "w-4 h-4" }) : /* @__PURE__ */ import_react8.default.createElement(import_lucide_react5.Mic, { className: "w-4 h-4" })
|
|
993
|
+
), /* @__PURE__ */ import_react8.default.createElement(
|
|
871
994
|
"button",
|
|
872
995
|
{
|
|
873
996
|
onClick: sendMessage,
|
|
@@ -878,8 +1001,8 @@ function ChatWindow({
|
|
|
878
1001
|
// slate-400/20 for light mode disabled
|
|
879
1002
|
}
|
|
880
1003
|
},
|
|
881
|
-
/* @__PURE__ */
|
|
882
|
-
)), /* @__PURE__ */
|
|
1004
|
+
/* @__PURE__ */ import_react8.default.createElement(import_lucide_react5.ArrowUp, { className: "w-4 h-4 text-white" })
|
|
1005
|
+
)), /* @__PURE__ */ import_react8.default.createElement("p", { className: "text-center text-[10px] text-slate-400 dark:text-white/20 mt-2" }, "Press Enter to send \xB7 Shift+Enter for new line"))
|
|
883
1006
|
);
|
|
884
1007
|
}
|
|
885
1008
|
|
|
@@ -887,12 +1010,12 @@ function ChatWindow({
|
|
|
887
1010
|
var DEFAULT_DIMENSIONS = { width: 380, height: 600 };
|
|
888
1011
|
function ChatWidget({ position = "bottom-right", onAddToCart }) {
|
|
889
1012
|
const { ui } = useConfig();
|
|
890
|
-
const [isOpen, setIsOpen] = (0,
|
|
891
|
-
const [hasUnread, setHasUnread] = (0,
|
|
892
|
-
const [dimensions, setDimensions] = (0,
|
|
893
|
-
const [isResizing, setIsResizing] = (0,
|
|
894
|
-
const [isMaximized, setIsMaximized] = (0,
|
|
895
|
-
const [prevDimensions, setPrevDimensions] = (0,
|
|
1013
|
+
const [isOpen, setIsOpen] = (0, import_react9.useState)(false);
|
|
1014
|
+
const [hasUnread, setHasUnread] = (0, import_react9.useState)(false);
|
|
1015
|
+
const [dimensions, setDimensions] = (0, import_react9.useState)(DEFAULT_DIMENSIONS);
|
|
1016
|
+
const [isResizing, setIsResizing] = (0, import_react9.useState)(false);
|
|
1017
|
+
const [isMaximized, setIsMaximized] = (0, import_react9.useState)(false);
|
|
1018
|
+
const [prevDimensions, setPrevDimensions] = (0, import_react9.useState)(DEFAULT_DIMENSIONS);
|
|
896
1019
|
if (ui.showWidget === false) return null;
|
|
897
1020
|
const positionClass = position === "bottom-left" ? "bottom-6 left-6" : "bottom-6 right-6";
|
|
898
1021
|
const windowPositionClass = position === "bottom-left" ? "bottom-20 left-6" : "bottom-20 right-6";
|
|
@@ -942,7 +1065,7 @@ function ChatWidget({ position = "bottom-right", onAddToCart }) {
|
|
|
942
1065
|
}
|
|
943
1066
|
};
|
|
944
1067
|
const isResized = dimensions.width !== DEFAULT_DIMENSIONS.width || dimensions.height !== DEFAULT_DIMENSIONS.height;
|
|
945
|
-
return /* @__PURE__ */
|
|
1068
|
+
return /* @__PURE__ */ import_react9.default.createElement(import_react9.default.Fragment, null, /* @__PURE__ */ import_react9.default.createElement(
|
|
946
1069
|
"div",
|
|
947
1070
|
{
|
|
948
1071
|
className: `fixed z-[9998] max-w-[calc(100vw-3rem)] ease-in-out ${windowPositionClass} ${isOpen ? "opacity-100 translate-y-0 pointer-events-auto" : "opacity-0 translate-y-4 pointer-events-none"} ${isResizing ? "" : "transition-all duration-300"}`,
|
|
@@ -952,7 +1075,7 @@ function ChatWidget({ position = "bottom-right", onAddToCart }) {
|
|
|
952
1075
|
maxHeight: "calc(100vh - 6rem)"
|
|
953
1076
|
}
|
|
954
1077
|
},
|
|
955
|
-
/* @__PURE__ */
|
|
1078
|
+
/* @__PURE__ */ import_react9.default.createElement(
|
|
956
1079
|
ChatWindow,
|
|
957
1080
|
{
|
|
958
1081
|
className: "h-full relative z-10",
|
|
@@ -966,13 +1089,13 @@ function ChatWidget({ position = "bottom-right", onAddToCart }) {
|
|
|
966
1089
|
onAddToCart
|
|
967
1090
|
}
|
|
968
1091
|
),
|
|
969
|
-
/* @__PURE__ */
|
|
1092
|
+
/* @__PURE__ */ import_react9.default.createElement(
|
|
970
1093
|
"div",
|
|
971
1094
|
{
|
|
972
1095
|
className: `absolute -bottom-1.5 w-4 h-4 rotate-45 border-r border-b border-slate-200 dark:border-white/10 z-0 ${ui.visualStyle === "solid" ? "bg-white dark:bg-[#0f0f1a]" : "bg-white/90 dark:bg-[#0f0f1a]/90 backdrop-blur-xl"} ${position === "bottom-left" ? "left-5" : "right-5"}`
|
|
973
1096
|
}
|
|
974
1097
|
)
|
|
975
|
-
), /* @__PURE__ */
|
|
1098
|
+
), /* @__PURE__ */ import_react9.default.createElement(
|
|
976
1099
|
"button",
|
|
977
1100
|
{
|
|
978
1101
|
onClick: isOpen ? () => setIsOpen(false) : handleOpen,
|
|
@@ -980,32 +1103,32 @@ function ChatWidget({ position = "bottom-right", onAddToCart }) {
|
|
|
980
1103
|
style: { background: `linear-gradient(135deg, ${ui.primaryColor}, ${ui.accentColor})` },
|
|
981
1104
|
"aria-label": "Open chat"
|
|
982
1105
|
},
|
|
983
|
-
/* @__PURE__ */
|
|
1106
|
+
/* @__PURE__ */ import_react9.default.createElement(
|
|
984
1107
|
"span",
|
|
985
1108
|
{
|
|
986
1109
|
className: "absolute inset-0 rounded-full animate-ping opacity-20",
|
|
987
1110
|
style: { background: ui.primaryColor }
|
|
988
1111
|
}
|
|
989
1112
|
),
|
|
990
|
-
/* @__PURE__ */
|
|
1113
|
+
/* @__PURE__ */ import_react9.default.createElement(
|
|
991
1114
|
"span",
|
|
992
1115
|
{
|
|
993
1116
|
className: `transition-transform duration-300 ${isOpen ? "rotate-90 scale-90" : "rotate-0 scale-100"}`
|
|
994
1117
|
},
|
|
995
|
-
isOpen ? /* @__PURE__ */
|
|
1118
|
+
isOpen ? /* @__PURE__ */ import_react9.default.createElement(import_lucide_react6.X, { className: "w-6 h-6 text-white" }) : /* @__PURE__ */ import_react9.default.createElement(import_lucide_react6.MessageSquare, { className: "w-6 h-6 text-white" })
|
|
996
1119
|
),
|
|
997
|
-
hasUnread && !isOpen && /* @__PURE__ */
|
|
1120
|
+
hasUnread && !isOpen && /* @__PURE__ */ import_react9.default.createElement("span", { className: "absolute top-0 right-0 w-4 h-4 bg-rose-500 rounded-full border-2 border-white flex items-center justify-center text-[9px] font-bold text-white" }, "1")
|
|
998
1121
|
));
|
|
999
1122
|
}
|
|
1000
1123
|
|
|
1001
1124
|
// src/components/DocumentUpload.tsx
|
|
1002
|
-
var
|
|
1125
|
+
var import_react10 = __toESM(require("react"));
|
|
1003
1126
|
var import_lucide_react7 = require("lucide-react");
|
|
1004
1127
|
function DocumentUpload({ namespace, onUploadComplete, className = "" }) {
|
|
1005
1128
|
const { ui } = useConfig();
|
|
1006
|
-
const [fileStates, setFileStates] = (0,
|
|
1007
|
-
const [isDragging, setIsDragging] = (0,
|
|
1008
|
-
const fileInputRef = (0,
|
|
1129
|
+
const [fileStates, setFileStates] = (0, import_react10.useState)([]);
|
|
1130
|
+
const [isDragging, setIsDragging] = (0, import_react10.useState)(false);
|
|
1131
|
+
const fileInputRef = (0, import_react10.useRef)(null);
|
|
1009
1132
|
const addFiles = (files) => {
|
|
1010
1133
|
const newStates = files.map((file) => ({ file, status: "idle" }));
|
|
1011
1134
|
setFileStates((prev) => [...prev, ...newStates]);
|
|
@@ -1055,7 +1178,7 @@ function DocumentUpload({ namespace, onUploadComplete, className = "" }) {
|
|
|
1055
1178
|
};
|
|
1056
1179
|
const isUploading = fileStates.some((s) => s.status === "uploading");
|
|
1057
1180
|
const hasIdle = fileStates.some((s) => s.status === "idle");
|
|
1058
|
-
return /* @__PURE__ */
|
|
1181
|
+
return /* @__PURE__ */ import_react10.default.createElement(
|
|
1059
1182
|
"div",
|
|
1060
1183
|
{
|
|
1061
1184
|
className: `p-6 border-2 border-dashed transition-all duration-300 rounded-2xl ${isDragging ? "border-emerald-500 bg-emerald-50/50 dark:bg-emerald-500/5" : "border-slate-200 dark:border-white/10 bg-white dark:bg-white/5"} ${className}`,
|
|
@@ -1063,14 +1186,14 @@ function DocumentUpload({ namespace, onUploadComplete, className = "" }) {
|
|
|
1063
1186
|
onDragLeave,
|
|
1064
1187
|
onDrop
|
|
1065
1188
|
},
|
|
1066
|
-
/* @__PURE__ */
|
|
1189
|
+
/* @__PURE__ */ import_react10.default.createElement("div", { className: "flex flex-col items-center justify-center text-center" }, /* @__PURE__ */ import_react10.default.createElement(
|
|
1067
1190
|
"div",
|
|
1068
1191
|
{
|
|
1069
1192
|
className: "w-12 h-12 rounded-full flex items-center justify-center mb-4 shadow-sm",
|
|
1070
1193
|
style: { background: `linear-gradient(135deg, ${ui.primaryColor}20, ${ui.accentColor}20)` }
|
|
1071
1194
|
},
|
|
1072
|
-
/* @__PURE__ */
|
|
1073
|
-
), /* @__PURE__ */
|
|
1195
|
+
/* @__PURE__ */ import_react10.default.createElement(import_lucide_react7.Upload, { className: "w-6 h-6", style: { color: ui.primaryColor } })
|
|
1196
|
+
), /* @__PURE__ */ import_react10.default.createElement("h3", { className: "text-slate-900 dark:text-white font-semibold mb-1" }, "Upload Documents"), /* @__PURE__ */ import_react10.default.createElement("p", { className: "text-slate-500 dark:text-white/40 text-sm mb-6 max-w-xs" }, "Drag and drop PDF, DOCX, TXT, or JSON files to train your AI on your own data."), /* @__PURE__ */ import_react10.default.createElement(
|
|
1074
1197
|
"button",
|
|
1075
1198
|
{
|
|
1076
1199
|
onClick: () => {
|
|
@@ -1086,7 +1209,7 @@ function DocumentUpload({ namespace, onUploadComplete, className = "" }) {
|
|
|
1086
1209
|
}
|
|
1087
1210
|
},
|
|
1088
1211
|
"Select Files"
|
|
1089
|
-
), /* @__PURE__ */
|
|
1212
|
+
), /* @__PURE__ */ import_react10.default.createElement(
|
|
1090
1213
|
"input",
|
|
1091
1214
|
{
|
|
1092
1215
|
ref: fileInputRef,
|
|
@@ -1097,22 +1220,22 @@ function DocumentUpload({ namespace, onUploadComplete, className = "" }) {
|
|
|
1097
1220
|
accept: ".pdf,.docx,.txt,.md,.json,.csv"
|
|
1098
1221
|
}
|
|
1099
1222
|
)),
|
|
1100
|
-
fileStates.length > 0 && /* @__PURE__ */
|
|
1223
|
+
fileStates.length > 0 && /* @__PURE__ */ import_react10.default.createElement("div", { className: "mt-8 space-y-3" }, fileStates.map((state, i) => /* @__PURE__ */ import_react10.default.createElement(
|
|
1101
1224
|
"div",
|
|
1102
1225
|
{
|
|
1103
1226
|
key: i,
|
|
1104
1227
|
className: "flex items-center justify-between p-3 rounded-xl bg-slate-50 dark:bg-white/5 border border-slate-100 dark:border-white/10"
|
|
1105
1228
|
},
|
|
1106
|
-
/* @__PURE__ */
|
|
1107
|
-
/* @__PURE__ */
|
|
1229
|
+
/* @__PURE__ */ import_react10.default.createElement("div", { className: "flex items-center gap-3 overflow-hidden" }, /* @__PURE__ */ import_react10.default.createElement("div", { className: "w-8 h-8 rounded-lg bg-white dark:bg-white/10 flex items-center justify-center shadow-sm" }, /* @__PURE__ */ import_react10.default.createElement(import_lucide_react7.File, { className: "w-4 h-4 text-slate-400" })), /* @__PURE__ */ import_react10.default.createElement("div", { className: "truncate" }, /* @__PURE__ */ import_react10.default.createElement("p", { className: "text-xs font-medium text-slate-700 dark:text-white/80 truncate" }, state.file.name), /* @__PURE__ */ import_react10.default.createElement("p", { className: "text-[10px] text-slate-400" }, (state.file.size / 1024).toFixed(1), " KB"))),
|
|
1230
|
+
/* @__PURE__ */ import_react10.default.createElement("div", { className: "flex items-center gap-2" }, state.status === "uploading" && /* @__PURE__ */ import_react10.default.createElement(import_lucide_react7.Loader2, { className: "w-4 h-4 text-slate-400 animate-spin" }), state.status === "success" && /* @__PURE__ */ import_react10.default.createElement(import_lucide_react7.CheckCircle, { className: "w-4 h-4 text-emerald-500" }), state.status === "error" && /* @__PURE__ */ import_react10.default.createElement("div", { title: state.error }, /* @__PURE__ */ import_react10.default.createElement(import_lucide_react7.AlertCircle, { className: "w-4 h-4 text-rose-500" })), state.status !== "uploading" && /* @__PURE__ */ import_react10.default.createElement(
|
|
1108
1231
|
"button",
|
|
1109
1232
|
{
|
|
1110
1233
|
onClick: () => removeFile(i),
|
|
1111
1234
|
className: "p-1 rounded-md hover:bg-slate-200 dark:hover:bg-white/10 transition-colors"
|
|
1112
1235
|
},
|
|
1113
|
-
/* @__PURE__ */
|
|
1236
|
+
/* @__PURE__ */ import_react10.default.createElement(import_lucide_react7.X, { className: "w-3.5 h-3.5 text-slate-400" })
|
|
1114
1237
|
))
|
|
1115
|
-
)), hasIdle && !isUploading && /* @__PURE__ */
|
|
1238
|
+
)), hasIdle && !isUploading && /* @__PURE__ */ import_react10.default.createElement(
|
|
1116
1239
|
"button",
|
|
1117
1240
|
{
|
|
1118
1241
|
onClick: uploadFiles,
|