@retrivora-ai/rag-engine 1.6.0 → 1.6.1
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 +83 -35
- package/dist/index.mjs +83 -35
- package/package.json +1 -1
- package/src/components/DynamicChart.tsx +20 -10
- package/src/components/MessageBubble.tsx +27 -1
package/dist/index.js
CHANGED
|
@@ -247,10 +247,17 @@ function DynamicChart({
|
|
|
247
247
|
const isTiny = containerWidth > 0 && containerWidth < 300;
|
|
248
248
|
const isCompact = viewportSize === "compact" || containerWidth > 0 && containerWidth < 420;
|
|
249
249
|
const isMedium = !isCompact && (viewportSize === "medium" || containerWidth > 0 && containerWidth < 640);
|
|
250
|
-
const
|
|
250
|
+
const chartHeight = (() => {
|
|
251
|
+
if (type === "pie") {
|
|
252
|
+
if (containerWidth <= 0) return isTiny ? 180 : isCompact ? 220 : isMedium ? 250 : 280;
|
|
253
|
+
return Math.max(180, Math.min(containerWidth, isTiny ? 180 : isCompact ? 220 : isMedium ? 250 : 280));
|
|
254
|
+
}
|
|
255
|
+
if (containerWidth <= 0) return isTiny ? 190 : isCompact ? 230 : isMedium ? 260 : 300;
|
|
256
|
+
return Math.max(190, Math.min(Math.round(containerWidth * 0.7), isTiny ? 190 : isCompact ? 230 : isMedium ? 260 : 300));
|
|
257
|
+
})();
|
|
251
258
|
const pieOuterRadius = (() => {
|
|
252
259
|
if (containerWidth <= 0) return isTiny ? 44 : isCompact ? 56 : isMedium ? 68 : 80;
|
|
253
|
-
const squareSize = Math.min(containerWidth,
|
|
260
|
+
const squareSize = Math.min(containerWidth, chartHeight);
|
|
254
261
|
return Math.max(36, Math.floor(squareSize * 0.28));
|
|
255
262
|
})();
|
|
256
263
|
const axisTick = { fontSize: isTiny ? 9 : isCompact ? 10 : 12, fill: "#64748b" };
|
|
@@ -360,42 +367,58 @@ function DynamicChart({
|
|
|
360
367
|
return row;
|
|
361
368
|
};
|
|
362
369
|
if (type === "pie") {
|
|
363
|
-
return /* @__PURE__ */ import_react4.default.createElement(
|
|
364
|
-
|
|
370
|
+
return /* @__PURE__ */ import_react4.default.createElement(
|
|
371
|
+
"div",
|
|
365
372
|
{
|
|
366
|
-
|
|
367
|
-
|
|
368
|
-
|
|
369
|
-
cx: "50%",
|
|
370
|
-
cy: "50%",
|
|
371
|
-
outerRadius: pieOuterRadius,
|
|
372
|
-
label: false,
|
|
373
|
-
labelLine: false
|
|
373
|
+
ref: containerRef,
|
|
374
|
+
className: "w-full min-w-0 mt-4 mb-2 select-none overflow-hidden",
|
|
375
|
+
style: { height: chartHeight }
|
|
374
376
|
},
|
|
375
|
-
|
|
376
|
-
|
|
377
|
+
/* @__PURE__ */ import_react4.default.createElement("div", { className: "mx-auto h-full aspect-square max-w-full" }, /* @__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(
|
|
378
|
+
import_recharts.Pie,
|
|
379
|
+
{
|
|
380
|
+
data: sanitizedData,
|
|
381
|
+
dataKey: pieDataKey,
|
|
382
|
+
nameKey: finalXKey,
|
|
383
|
+
cx: "50%",
|
|
384
|
+
cy: "50%",
|
|
385
|
+
outerRadius: pieOuterRadius,
|
|
386
|
+
label: false,
|
|
387
|
+
labelLine: false
|
|
388
|
+
},
|
|
389
|
+
sanitizedData.map((entry, index) => /* @__PURE__ */ import_react4.default.createElement(import_recharts.Cell, { key: `cell-${index}`, fill: stockAwareColor(entry, index) }))
|
|
390
|
+
), /* @__PURE__ */ import_react4.default.createElement(import_recharts.Tooltip, { content: (props) => renderTooltip(getTooltipRow(props.payload), typeof props.label === "string" ? props.label : void 0) }), showLegend && !isCompact && /* @__PURE__ */ import_react4.default.createElement(import_recharts.Legend, { wrapperStyle: { fontSize: 12 }, verticalAlign: "bottom" }))))
|
|
391
|
+
);
|
|
377
392
|
}
|
|
378
|
-
return /* @__PURE__ */ import_react4.default.createElement(
|
|
379
|
-
|
|
380
|
-
{
|
|
381
|
-
key,
|
|
382
|
-
dataKey: key,
|
|
383
|
-
fill: colors[index % colors.length],
|
|
384
|
-
radius: [4, 4, 0, 0],
|
|
385
|
-
barSize: isTiny ? Math.max(10, 28 / data.length) : isCompact ? Math.max(14, 42 / data.length) : Math.max(20, 60 / data.length)
|
|
386
|
-
}
|
|
387
|
-
))) : /* @__PURE__ */ import_react4.default.createElement(import_recharts.LineChart, { data: sanitizedData, margin: chartMargin }, /* @__PURE__ */ import_react4.default.createElement(import_recharts.CartesianGrid, { strokeDasharray: "3 3", vertical: false, stroke: "#e2e8f0" }), /* @__PURE__ */ import_react4.default.createElement(import_recharts.XAxis, { dataKey: finalXKey, tick: axisTick, tickFormatter: truncateAxisLabel, tickLine: false, axisLine: { stroke: "#cbd5e1" }, interval: 0, minTickGap: isTiny ? 2 : isCompact ? 6 : 12 }), /* @__PURE__ */ import_react4.default.createElement(import_recharts.YAxis, { tick: axisTick, tickLine: false, axisLine: false }), /* @__PURE__ */ import_react4.default.createElement(import_recharts.Tooltip, { content: (props) => renderTooltip(getTooltipRow(props.payload), typeof props.label === "string" ? props.label : void 0) }), showLegend && /* @__PURE__ */ import_react4.default.createElement(import_recharts.Legend, { wrapperStyle: { fontSize: isCompact ? 10 : 12 } }), finalDataKeys.map((key, index) => /* @__PURE__ */ import_react4.default.createElement(
|
|
388
|
-
import_recharts.Line,
|
|
393
|
+
return /* @__PURE__ */ import_react4.default.createElement(
|
|
394
|
+
"div",
|
|
389
395
|
{
|
|
390
|
-
|
|
391
|
-
|
|
392
|
-
|
|
393
|
-
|
|
394
|
-
|
|
395
|
-
|
|
396
|
-
|
|
397
|
-
|
|
398
|
-
|
|
396
|
+
ref: containerRef,
|
|
397
|
+
className: "w-full min-w-0 mt-4 mb-2 select-none overflow-hidden",
|
|
398
|
+
style: { height: chartHeight }
|
|
399
|
+
},
|
|
400
|
+
/* @__PURE__ */ import_react4.default.createElement(import_recharts.ResponsiveContainer, { width: "100%", height: "100%" }, type === "bar" ? /* @__PURE__ */ import_react4.default.createElement(import_recharts.BarChart, { data: sanitizedData, margin: chartMargin }, /* @__PURE__ */ import_react4.default.createElement(import_recharts.CartesianGrid, { strokeDasharray: "3 3", vertical: false, stroke: "#e2e8f0" }), /* @__PURE__ */ import_react4.default.createElement(import_recharts.XAxis, { dataKey: finalXKey, tick: axisTick, tickFormatter: truncateAxisLabel, tickLine: false, axisLine: { stroke: "#cbd5e1" }, interval: 0, minTickGap: isTiny ? 2 : isCompact ? 6 : 12 }), /* @__PURE__ */ import_react4.default.createElement(import_recharts.YAxis, { tick: axisTick, tickLine: false, axisLine: false }), /* @__PURE__ */ import_react4.default.createElement(import_recharts.Tooltip, { content: (props) => renderTooltip(getTooltipRow(props.payload), typeof props.label === "string" ? props.label : void 0), cursor: { fill: "#f1f5f9" } }), showLegend && /* @__PURE__ */ import_react4.default.createElement(import_recharts.Legend, { wrapperStyle: { fontSize: isCompact ? 10 : 12 } }), finalDataKeys.map((key, index) => /* @__PURE__ */ import_react4.default.createElement(
|
|
401
|
+
import_recharts.Bar,
|
|
402
|
+
{
|
|
403
|
+
key,
|
|
404
|
+
dataKey: key,
|
|
405
|
+
fill: colors[index % colors.length],
|
|
406
|
+
radius: [4, 4, 0, 0],
|
|
407
|
+
barSize: isTiny ? Math.max(10, 28 / data.length) : isCompact ? Math.max(14, 42 / data.length) : Math.max(20, 60 / data.length)
|
|
408
|
+
}
|
|
409
|
+
))) : /* @__PURE__ */ import_react4.default.createElement(import_recharts.LineChart, { data: sanitizedData, margin: chartMargin }, /* @__PURE__ */ import_react4.default.createElement(import_recharts.CartesianGrid, { strokeDasharray: "3 3", vertical: false, stroke: "#e2e8f0" }), /* @__PURE__ */ import_react4.default.createElement(import_recharts.XAxis, { dataKey: finalXKey, tick: axisTick, tickFormatter: truncateAxisLabel, tickLine: false, axisLine: { stroke: "#cbd5e1" }, interval: 0, minTickGap: isTiny ? 2 : isCompact ? 6 : 12 }), /* @__PURE__ */ import_react4.default.createElement(import_recharts.YAxis, { tick: axisTick, tickLine: false, axisLine: false }), /* @__PURE__ */ import_react4.default.createElement(import_recharts.Tooltip, { content: (props) => renderTooltip(getTooltipRow(props.payload), typeof props.label === "string" ? props.label : void 0) }), showLegend && /* @__PURE__ */ import_react4.default.createElement(import_recharts.Legend, { wrapperStyle: { fontSize: isCompact ? 10 : 12 } }), finalDataKeys.map((key, index) => /* @__PURE__ */ import_react4.default.createElement(
|
|
410
|
+
import_recharts.Line,
|
|
411
|
+
{
|
|
412
|
+
key,
|
|
413
|
+
type: "monotone",
|
|
414
|
+
dataKey: key,
|
|
415
|
+
stroke: colors[index % colors.length],
|
|
416
|
+
strokeWidth: isTiny ? 1.75 : isCompact ? 2 : 3,
|
|
417
|
+
dot: { r: isTiny ? 2.5 : isCompact ? 3 : 4, strokeWidth: 2 },
|
|
418
|
+
activeDot: { r: isTiny ? 4 : isCompact ? 5 : 6 }
|
|
419
|
+
}
|
|
420
|
+
))))
|
|
421
|
+
);
|
|
399
422
|
}
|
|
400
423
|
|
|
401
424
|
// src/components/MessageBubble.tsx
|
|
@@ -469,6 +492,15 @@ function stripMarkdownTables(raw) {
|
|
|
469
492
|
"\n\n"
|
|
470
493
|
);
|
|
471
494
|
}
|
|
495
|
+
function stripStructuredUiLabels(raw) {
|
|
496
|
+
return raw.replace(
|
|
497
|
+
/(?:^|\n)\*\*(?:Chart Data|Table Data|Visualization|Visual Representation)\*\:\s*(?=\n|$)/gi,
|
|
498
|
+
"\n"
|
|
499
|
+
).replace(
|
|
500
|
+
/(?:^|\n)(?:Chart Data|Table Data|Visualization|Visual Representation)\s*\:\s*(?=\n|$)/gi,
|
|
501
|
+
"\n"
|
|
502
|
+
);
|
|
503
|
+
}
|
|
472
504
|
function resolveImage(data) {
|
|
473
505
|
for (const key of ["image", "img", "thumbnail"]) {
|
|
474
506
|
const v = data[key];
|
|
@@ -764,7 +796,7 @@ ${match.trim()}
|
|
|
764
796
|
});
|
|
765
797
|
}
|
|
766
798
|
if (hasStructuredUiBlock) {
|
|
767
|
-
raw = stripMarkdownTables(raw).replace(/\n{3,}/g, "\n\n").trim();
|
|
799
|
+
raw = stripStructuredUiLabels(stripMarkdownTables(raw)).replace(/\n{3,}/g, "\n\n").trim();
|
|
768
800
|
}
|
|
769
801
|
if (isStreaming) {
|
|
770
802
|
raw = raw.replace(/((?:^|\n)\|.*)+/g, (match) => {
|
|
@@ -878,6 +910,22 @@ ${match.trim()}
|
|
|
878
910
|
);
|
|
879
911
|
}
|
|
880
912
|
}
|
|
913
|
+
if (!inline) {
|
|
914
|
+
const content = String(children != null ? children : "").trim();
|
|
915
|
+
if (looksLikeStructuredPayload(content)) {
|
|
916
|
+
return /* @__PURE__ */ import_react5.default.createElement(
|
|
917
|
+
UIDispatcher,
|
|
918
|
+
{
|
|
919
|
+
rawContent: content,
|
|
920
|
+
primaryColor,
|
|
921
|
+
accentColor,
|
|
922
|
+
isStreaming,
|
|
923
|
+
onAddToCart,
|
|
924
|
+
viewportSize
|
|
925
|
+
}
|
|
926
|
+
);
|
|
927
|
+
}
|
|
928
|
+
}
|
|
881
929
|
if (!inline && lang === "table-loading") {
|
|
882
930
|
return /* @__PURE__ */ import_react5.default.createElement("div", { className: "my-5 p-6 bg-slate-50 dark:bg-white/5 rounded-xl border border-dashed border-slate-300 dark:border-white/10 flex items-center justify-center gap-3 select-none" }, /* @__PURE__ */ import_react5.default.createElement("div", { className: "w-4 h-4 border-2 border-indigo-500 border-t-transparent rounded-full animate-spin" }), /* @__PURE__ */ import_react5.default.createElement("p", { className: "text-xs text-slate-500 font-medium italic animate-pulse" }, "Generating data table..."));
|
|
883
931
|
}
|
package/dist/index.mjs
CHANGED
|
@@ -210,10 +210,17 @@ function DynamicChart({
|
|
|
210
210
|
const isTiny = containerWidth > 0 && containerWidth < 300;
|
|
211
211
|
const isCompact = viewportSize === "compact" || containerWidth > 0 && containerWidth < 420;
|
|
212
212
|
const isMedium = !isCompact && (viewportSize === "medium" || containerWidth > 0 && containerWidth < 640);
|
|
213
|
-
const
|
|
213
|
+
const chartHeight = (() => {
|
|
214
|
+
if (type === "pie") {
|
|
215
|
+
if (containerWidth <= 0) return isTiny ? 180 : isCompact ? 220 : isMedium ? 250 : 280;
|
|
216
|
+
return Math.max(180, Math.min(containerWidth, isTiny ? 180 : isCompact ? 220 : isMedium ? 250 : 280));
|
|
217
|
+
}
|
|
218
|
+
if (containerWidth <= 0) return isTiny ? 190 : isCompact ? 230 : isMedium ? 260 : 300;
|
|
219
|
+
return Math.max(190, Math.min(Math.round(containerWidth * 0.7), isTiny ? 190 : isCompact ? 230 : isMedium ? 260 : 300));
|
|
220
|
+
})();
|
|
214
221
|
const pieOuterRadius = (() => {
|
|
215
222
|
if (containerWidth <= 0) return isTiny ? 44 : isCompact ? 56 : isMedium ? 68 : 80;
|
|
216
|
-
const squareSize = Math.min(containerWidth,
|
|
223
|
+
const squareSize = Math.min(containerWidth, chartHeight);
|
|
217
224
|
return Math.max(36, Math.floor(squareSize * 0.28));
|
|
218
225
|
})();
|
|
219
226
|
const axisTick = { fontSize: isTiny ? 9 : isCompact ? 10 : 12, fill: "#64748b" };
|
|
@@ -323,42 +330,58 @@ function DynamicChart({
|
|
|
323
330
|
return row;
|
|
324
331
|
};
|
|
325
332
|
if (type === "pie") {
|
|
326
|
-
return /* @__PURE__ */ React4.createElement(
|
|
327
|
-
|
|
333
|
+
return /* @__PURE__ */ React4.createElement(
|
|
334
|
+
"div",
|
|
328
335
|
{
|
|
329
|
-
|
|
330
|
-
|
|
331
|
-
|
|
332
|
-
cx: "50%",
|
|
333
|
-
cy: "50%",
|
|
334
|
-
outerRadius: pieOuterRadius,
|
|
335
|
-
label: false,
|
|
336
|
-
labelLine: false
|
|
336
|
+
ref: containerRef,
|
|
337
|
+
className: "w-full min-w-0 mt-4 mb-2 select-none overflow-hidden",
|
|
338
|
+
style: { height: chartHeight }
|
|
337
339
|
},
|
|
338
|
-
|
|
339
|
-
|
|
340
|
+
/* @__PURE__ */ React4.createElement("div", { className: "mx-auto h-full aspect-square max-w-full" }, /* @__PURE__ */ React4.createElement(ResponsiveContainer, { width: "100%", height: "100%" }, /* @__PURE__ */ React4.createElement(PieChart, null, /* @__PURE__ */ React4.createElement(
|
|
341
|
+
Pie,
|
|
342
|
+
{
|
|
343
|
+
data: sanitizedData,
|
|
344
|
+
dataKey: pieDataKey,
|
|
345
|
+
nameKey: finalXKey,
|
|
346
|
+
cx: "50%",
|
|
347
|
+
cy: "50%",
|
|
348
|
+
outerRadius: pieOuterRadius,
|
|
349
|
+
label: false,
|
|
350
|
+
labelLine: false
|
|
351
|
+
},
|
|
352
|
+
sanitizedData.map((entry, index) => /* @__PURE__ */ React4.createElement(Cell, { key: `cell-${index}`, fill: stockAwareColor(entry, index) }))
|
|
353
|
+
), /* @__PURE__ */ React4.createElement(Tooltip, { content: (props) => renderTooltip(getTooltipRow(props.payload), typeof props.label === "string" ? props.label : void 0) }), showLegend && !isCompact && /* @__PURE__ */ React4.createElement(Legend, { wrapperStyle: { fontSize: 12 }, verticalAlign: "bottom" }))))
|
|
354
|
+
);
|
|
340
355
|
}
|
|
341
|
-
return /* @__PURE__ */ React4.createElement(
|
|
342
|
-
|
|
343
|
-
{
|
|
344
|
-
key,
|
|
345
|
-
dataKey: key,
|
|
346
|
-
fill: colors[index % colors.length],
|
|
347
|
-
radius: [4, 4, 0, 0],
|
|
348
|
-
barSize: isTiny ? Math.max(10, 28 / data.length) : isCompact ? Math.max(14, 42 / data.length) : Math.max(20, 60 / data.length)
|
|
349
|
-
}
|
|
350
|
-
))) : /* @__PURE__ */ React4.createElement(LineChart, { data: sanitizedData, margin: chartMargin }, /* @__PURE__ */ React4.createElement(CartesianGrid, { strokeDasharray: "3 3", vertical: false, stroke: "#e2e8f0" }), /* @__PURE__ */ React4.createElement(XAxis, { dataKey: finalXKey, tick: axisTick, tickFormatter: truncateAxisLabel, tickLine: false, axisLine: { stroke: "#cbd5e1" }, interval: 0, minTickGap: isTiny ? 2 : isCompact ? 6 : 12 }), /* @__PURE__ */ React4.createElement(YAxis, { tick: axisTick, tickLine: false, axisLine: false }), /* @__PURE__ */ React4.createElement(Tooltip, { content: (props) => renderTooltip(getTooltipRow(props.payload), typeof props.label === "string" ? props.label : void 0) }), showLegend && /* @__PURE__ */ React4.createElement(Legend, { wrapperStyle: { fontSize: isCompact ? 10 : 12 } }), finalDataKeys.map((key, index) => /* @__PURE__ */ React4.createElement(
|
|
351
|
-
Line,
|
|
356
|
+
return /* @__PURE__ */ React4.createElement(
|
|
357
|
+
"div",
|
|
352
358
|
{
|
|
353
|
-
|
|
354
|
-
|
|
355
|
-
|
|
356
|
-
|
|
357
|
-
|
|
358
|
-
|
|
359
|
-
|
|
360
|
-
|
|
361
|
-
|
|
359
|
+
ref: containerRef,
|
|
360
|
+
className: "w-full min-w-0 mt-4 mb-2 select-none overflow-hidden",
|
|
361
|
+
style: { height: chartHeight }
|
|
362
|
+
},
|
|
363
|
+
/* @__PURE__ */ React4.createElement(ResponsiveContainer, { width: "100%", height: "100%" }, type === "bar" ? /* @__PURE__ */ React4.createElement(BarChart, { data: sanitizedData, margin: chartMargin }, /* @__PURE__ */ React4.createElement(CartesianGrid, { strokeDasharray: "3 3", vertical: false, stroke: "#e2e8f0" }), /* @__PURE__ */ React4.createElement(XAxis, { dataKey: finalXKey, tick: axisTick, tickFormatter: truncateAxisLabel, tickLine: false, axisLine: { stroke: "#cbd5e1" }, interval: 0, minTickGap: isTiny ? 2 : isCompact ? 6 : 12 }), /* @__PURE__ */ React4.createElement(YAxis, { tick: axisTick, tickLine: false, axisLine: false }), /* @__PURE__ */ React4.createElement(Tooltip, { content: (props) => renderTooltip(getTooltipRow(props.payload), typeof props.label === "string" ? props.label : void 0), cursor: { fill: "#f1f5f9" } }), showLegend && /* @__PURE__ */ React4.createElement(Legend, { wrapperStyle: { fontSize: isCompact ? 10 : 12 } }), finalDataKeys.map((key, index) => /* @__PURE__ */ React4.createElement(
|
|
364
|
+
Bar,
|
|
365
|
+
{
|
|
366
|
+
key,
|
|
367
|
+
dataKey: key,
|
|
368
|
+
fill: colors[index % colors.length],
|
|
369
|
+
radius: [4, 4, 0, 0],
|
|
370
|
+
barSize: isTiny ? Math.max(10, 28 / data.length) : isCompact ? Math.max(14, 42 / data.length) : Math.max(20, 60 / data.length)
|
|
371
|
+
}
|
|
372
|
+
))) : /* @__PURE__ */ React4.createElement(LineChart, { data: sanitizedData, margin: chartMargin }, /* @__PURE__ */ React4.createElement(CartesianGrid, { strokeDasharray: "3 3", vertical: false, stroke: "#e2e8f0" }), /* @__PURE__ */ React4.createElement(XAxis, { dataKey: finalXKey, tick: axisTick, tickFormatter: truncateAxisLabel, tickLine: false, axisLine: { stroke: "#cbd5e1" }, interval: 0, minTickGap: isTiny ? 2 : isCompact ? 6 : 12 }), /* @__PURE__ */ React4.createElement(YAxis, { tick: axisTick, tickLine: false, axisLine: false }), /* @__PURE__ */ React4.createElement(Tooltip, { content: (props) => renderTooltip(getTooltipRow(props.payload), typeof props.label === "string" ? props.label : void 0) }), showLegend && /* @__PURE__ */ React4.createElement(Legend, { wrapperStyle: { fontSize: isCompact ? 10 : 12 } }), finalDataKeys.map((key, index) => /* @__PURE__ */ React4.createElement(
|
|
373
|
+
Line,
|
|
374
|
+
{
|
|
375
|
+
key,
|
|
376
|
+
type: "monotone",
|
|
377
|
+
dataKey: key,
|
|
378
|
+
stroke: colors[index % colors.length],
|
|
379
|
+
strokeWidth: isTiny ? 1.75 : isCompact ? 2 : 3,
|
|
380
|
+
dot: { r: isTiny ? 2.5 : isCompact ? 3 : 4, strokeWidth: 2 },
|
|
381
|
+
activeDot: { r: isTiny ? 4 : isCompact ? 5 : 6 }
|
|
382
|
+
}
|
|
383
|
+
))))
|
|
384
|
+
);
|
|
362
385
|
}
|
|
363
386
|
|
|
364
387
|
// src/components/MessageBubble.tsx
|
|
@@ -432,6 +455,15 @@ function stripMarkdownTables(raw) {
|
|
|
432
455
|
"\n\n"
|
|
433
456
|
);
|
|
434
457
|
}
|
|
458
|
+
function stripStructuredUiLabels(raw) {
|
|
459
|
+
return raw.replace(
|
|
460
|
+
/(?:^|\n)\*\*(?:Chart Data|Table Data|Visualization|Visual Representation)\*\:\s*(?=\n|$)/gi,
|
|
461
|
+
"\n"
|
|
462
|
+
).replace(
|
|
463
|
+
/(?:^|\n)(?:Chart Data|Table Data|Visualization|Visual Representation)\s*\:\s*(?=\n|$)/gi,
|
|
464
|
+
"\n"
|
|
465
|
+
);
|
|
466
|
+
}
|
|
435
467
|
function resolveImage(data) {
|
|
436
468
|
for (const key of ["image", "img", "thumbnail"]) {
|
|
437
469
|
const v = data[key];
|
|
@@ -727,7 +759,7 @@ ${match.trim()}
|
|
|
727
759
|
});
|
|
728
760
|
}
|
|
729
761
|
if (hasStructuredUiBlock) {
|
|
730
|
-
raw = stripMarkdownTables(raw).replace(/\n{3,}/g, "\n\n").trim();
|
|
762
|
+
raw = stripStructuredUiLabels(stripMarkdownTables(raw)).replace(/\n{3,}/g, "\n\n").trim();
|
|
731
763
|
}
|
|
732
764
|
if (isStreaming) {
|
|
733
765
|
raw = raw.replace(/((?:^|\n)\|.*)+/g, (match) => {
|
|
@@ -841,6 +873,22 @@ ${match.trim()}
|
|
|
841
873
|
);
|
|
842
874
|
}
|
|
843
875
|
}
|
|
876
|
+
if (!inline) {
|
|
877
|
+
const content = String(children != null ? children : "").trim();
|
|
878
|
+
if (looksLikeStructuredPayload(content)) {
|
|
879
|
+
return /* @__PURE__ */ React5.createElement(
|
|
880
|
+
UIDispatcher,
|
|
881
|
+
{
|
|
882
|
+
rawContent: content,
|
|
883
|
+
primaryColor,
|
|
884
|
+
accentColor,
|
|
885
|
+
isStreaming,
|
|
886
|
+
onAddToCart,
|
|
887
|
+
viewportSize
|
|
888
|
+
}
|
|
889
|
+
);
|
|
890
|
+
}
|
|
891
|
+
}
|
|
844
892
|
if (!inline && lang === "table-loading") {
|
|
845
893
|
return /* @__PURE__ */ React5.createElement("div", { className: "my-5 p-6 bg-slate-50 dark:bg-white/5 rounded-xl border border-dashed border-slate-300 dark:border-white/10 flex items-center justify-center gap-3 select-none" }, /* @__PURE__ */ React5.createElement("div", { className: "w-4 h-4 border-2 border-indigo-500 border-t-transparent rounded-full animate-spin" }), /* @__PURE__ */ React5.createElement("p", { className: "text-xs text-slate-500 font-medium italic animate-pulse" }, "Generating data table..."));
|
|
846
894
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@retrivora-ai/rag-engine",
|
|
3
|
-
"version": "1.6.
|
|
3
|
+
"version": "1.6.1",
|
|
4
4
|
"description": "Retrivora AI is a plug-and-play AI engine for RAG chat experiences — generic vector DB + LLM provider, embeddable or standalone.",
|
|
5
5
|
"author": "Abhinav Alkuchi",
|
|
6
6
|
"license": "MIT",
|
|
@@ -57,16 +57,18 @@ export function DynamicChart({
|
|
|
57
57
|
const isTiny = containerWidth > 0 && containerWidth < 300;
|
|
58
58
|
const isCompact = viewportSize === 'compact' || (containerWidth > 0 && containerWidth < 420);
|
|
59
59
|
const isMedium = !isCompact && (viewportSize === 'medium' || (containerWidth > 0 && containerWidth < 640));
|
|
60
|
-
const
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
?
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
60
|
+
const chartHeight = (() => {
|
|
61
|
+
if (type === 'pie') {
|
|
62
|
+
if (containerWidth <= 0) return isTiny ? 180 : isCompact ? 220 : isMedium ? 250 : 280;
|
|
63
|
+
return Math.max(180, Math.min(containerWidth, isTiny ? 180 : isCompact ? 220 : isMedium ? 250 : 280));
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
if (containerWidth <= 0) return isTiny ? 190 : isCompact ? 230 : isMedium ? 260 : 300;
|
|
67
|
+
return Math.max(190, Math.min(Math.round(containerWidth * 0.7), isTiny ? 190 : isCompact ? 230 : isMedium ? 260 : 300));
|
|
68
|
+
})();
|
|
67
69
|
const pieOuterRadius = (() => {
|
|
68
70
|
if (containerWidth <= 0) return isTiny ? 44 : isCompact ? 56 : isMedium ? 68 : 80;
|
|
69
|
-
const squareSize = Math.min(containerWidth,
|
|
71
|
+
const squareSize = Math.min(containerWidth, chartHeight);
|
|
70
72
|
return Math.max(36, Math.floor(squareSize * 0.28));
|
|
71
73
|
})();
|
|
72
74
|
const axisTick = { fontSize: isTiny ? 9 : isCompact ? 10 : 12, fill: '#64748b' };
|
|
@@ -232,7 +234,11 @@ export function DynamicChart({
|
|
|
232
234
|
// Handle Pie Chart separately as it has a different structure
|
|
233
235
|
if (type === 'pie') {
|
|
234
236
|
return (
|
|
235
|
-
<div
|
|
237
|
+
<div
|
|
238
|
+
ref={containerRef}
|
|
239
|
+
className="w-full min-w-0 mt-4 mb-2 select-none overflow-hidden"
|
|
240
|
+
style={{ height: chartHeight }}
|
|
241
|
+
>
|
|
236
242
|
<div className="mx-auto h-full aspect-square max-w-full">
|
|
237
243
|
<ResponsiveContainer width="100%" height="100%">
|
|
238
244
|
<PieChart>
|
|
@@ -261,7 +267,11 @@ export function DynamicChart({
|
|
|
261
267
|
|
|
262
268
|
// Bar and Line charts
|
|
263
269
|
return (
|
|
264
|
-
<div
|
|
270
|
+
<div
|
|
271
|
+
ref={containerRef}
|
|
272
|
+
className="w-full min-w-0 mt-4 mb-2 select-none overflow-hidden"
|
|
273
|
+
style={{ height: chartHeight }}
|
|
274
|
+
>
|
|
265
275
|
<ResponsiveContainer width="100%" height="100%">
|
|
266
276
|
{type === 'bar' ? (
|
|
267
277
|
<BarChart data={sanitizedData} margin={chartMargin}>
|
|
@@ -113,6 +113,16 @@ function stripMarkdownTables(raw: string): string {
|
|
|
113
113
|
);
|
|
114
114
|
}
|
|
115
115
|
|
|
116
|
+
function stripStructuredUiLabels(raw: string): string {
|
|
117
|
+
return raw.replace(
|
|
118
|
+
/(?:^|\n)\*\*(?:Chart Data|Table Data|Visualization|Visual Representation)\*\:\s*(?=\n|$)/gi,
|
|
119
|
+
'\n',
|
|
120
|
+
).replace(
|
|
121
|
+
/(?:^|\n)(?:Chart Data|Table Data|Visualization|Visual Representation)\s*\:\s*(?=\n|$)/gi,
|
|
122
|
+
'\n',
|
|
123
|
+
);
|
|
124
|
+
}
|
|
125
|
+
|
|
116
126
|
// ─── Tiny helpers ─────────────────────────────────────────────────────────────
|
|
117
127
|
|
|
118
128
|
function resolveImage(data: Record<string, unknown>): string | undefined {
|
|
@@ -599,7 +609,7 @@ export function MessageBubble({
|
|
|
599
609
|
// 2b. If the model already provided a structured UI block, suppress duplicated
|
|
600
610
|
// markdown tables that often follow as a fallback explanation.
|
|
601
611
|
if (hasStructuredUiBlock) {
|
|
602
|
-
raw = stripMarkdownTables(raw)
|
|
612
|
+
raw = stripStructuredUiLabels(stripMarkdownTables(raw))
|
|
603
613
|
.replace(/\n{3,}/g, '\n\n')
|
|
604
614
|
.trim();
|
|
605
615
|
}
|
|
@@ -710,6 +720,22 @@ export function MessageBubble({
|
|
|
710
720
|
}
|
|
711
721
|
}
|
|
712
722
|
|
|
723
|
+
if (!inline) {
|
|
724
|
+
const content = String(children ?? '').trim();
|
|
725
|
+
if (looksLikeStructuredPayload(content)) {
|
|
726
|
+
return (
|
|
727
|
+
<UIDispatcher
|
|
728
|
+
rawContent={content}
|
|
729
|
+
primaryColor={primaryColor}
|
|
730
|
+
accentColor={accentColor}
|
|
731
|
+
isStreaming={isStreaming}
|
|
732
|
+
onAddToCart={onAddToCart}
|
|
733
|
+
viewportSize={viewportSize}
|
|
734
|
+
/>
|
|
735
|
+
);
|
|
736
|
+
}
|
|
737
|
+
}
|
|
738
|
+
|
|
713
739
|
if (!inline && lang === 'table-loading') {
|
|
714
740
|
return (
|
|
715
741
|
<div className="my-5 p-6 bg-slate-50 dark:bg-white/5 rounded-xl border border-dashed border-slate-300 dark:border-white/10 flex items-center justify-center gap-3 select-none">
|