dp-widgets-framework 1.1.4 → 1.1.6
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.esm.js +304 -80
- package/dist/index.js +298 -74
- package/package.json +1 -1
package/dist/index.esm.js
CHANGED
|
@@ -7,7 +7,7 @@ import * as LabelPrimitive from '@radix-ui/react-label';
|
|
|
7
7
|
import { cva } from 'class-variance-authority';
|
|
8
8
|
import * as SwitchPrimitives from '@radix-ui/react-switch';
|
|
9
9
|
import * as SelectPrimitive from '@radix-ui/react-select';
|
|
10
|
-
import { ChevronDown, ChevronUp, Check, AlertCircle, MoveUp, MoveDown, Trash2, Plus, Bot, Type, Layout, LayoutGrid, BarChart, Filter, Search, ArrowUp, ArrowDown, RefreshCw, X, LineChart, PieChart as PieChart$1, Table, FileText, Loader2, GripHorizontal, Edit, MessageCircleX, Edit2 } from 'lucide-react';
|
|
10
|
+
import { ChevronDown, ChevronUp, Check, AlertCircle, MoveUp, MoveDown, Trash2, Plus, Bot, Type, Layout, LayoutGrid, BarChart as BarChart$1, Filter, Search, ArrowUp, ArrowDown, RefreshCw, X, LineChart as LineChart$1, PieChart as PieChart$1, Table, FileText, Loader2, GripHorizontal, Edit, MessageCircleX, Edit2 } from 'lucide-react';
|
|
11
11
|
import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area';
|
|
12
12
|
import { Slot } from '@radix-ui/react-slot';
|
|
13
13
|
import { debounce as debounce$1 } from 'lodash';
|
|
@@ -1912,7 +1912,7 @@ const IconMap$1 = {
|
|
|
1912
1912
|
search: Search,
|
|
1913
1913
|
filter: Filter,
|
|
1914
1914
|
results: LayoutGrid,
|
|
1915
|
-
analytics: BarChart,
|
|
1915
|
+
analytics: BarChart$1,
|
|
1916
1916
|
custom: LayoutGrid,
|
|
1917
1917
|
header: Layout,
|
|
1918
1918
|
footer: Layout,
|
|
@@ -15048,6 +15048,78 @@ const Line = /* #__PURE__ */ createTypedChart('line', LineController);
|
|
|
15048
15048
|
const Bar = /* #__PURE__ */ createTypedChart('bar', BarController);
|
|
15049
15049
|
const Pie = /* #__PURE__ */ createTypedChart('pie', PieController);
|
|
15050
15050
|
|
|
15051
|
+
Chart$1.register(CategoryScale, LinearScale, BarElement, plugin_title, plugin_tooltip, plugin_legend);
|
|
15052
|
+
function BarChart({ orientation, title, data, options, className, units }) {
|
|
15053
|
+
const formatValue = (value) => {
|
|
15054
|
+
const numValue = typeof value === 'string' ? parseFloat(value) : value;
|
|
15055
|
+
if (units === '$' && !isNaN(numValue)) {
|
|
15056
|
+
return numValue.toLocaleString();
|
|
15057
|
+
}
|
|
15058
|
+
return value;
|
|
15059
|
+
};
|
|
15060
|
+
const defaultOptions = {
|
|
15061
|
+
responsive: true,
|
|
15062
|
+
maintainAspectRatio: false,
|
|
15063
|
+
indexAxis: orientation === "horizontal" ? "y" : "x",
|
|
15064
|
+
layout: {
|
|
15065
|
+
padding: {
|
|
15066
|
+
bottom: 0,
|
|
15067
|
+
top: 0,
|
|
15068
|
+
left: 0,
|
|
15069
|
+
right: 0,
|
|
15070
|
+
},
|
|
15071
|
+
},
|
|
15072
|
+
plugins: {
|
|
15073
|
+
legend: {
|
|
15074
|
+
display: false,
|
|
15075
|
+
labels: {
|
|
15076
|
+
boxWidth: 5,
|
|
15077
|
+
boxHeight: 5,
|
|
15078
|
+
},
|
|
15079
|
+
position: "bottom"
|
|
15080
|
+
},
|
|
15081
|
+
title: {
|
|
15082
|
+
display: true,
|
|
15083
|
+
text: title,
|
|
15084
|
+
font: {
|
|
15085
|
+
size: 18,
|
|
15086
|
+
weight: "bold",
|
|
15087
|
+
},
|
|
15088
|
+
color: "#0F172A"
|
|
15089
|
+
},
|
|
15090
|
+
tooltip: {
|
|
15091
|
+
callbacks: {
|
|
15092
|
+
label: function (context) {
|
|
15093
|
+
const value = context.parsed.y || context.parsed.x;
|
|
15094
|
+
return units ? `${context.dataset.label}: ${formatValue(value)} ${units}` : `${context.dataset.label}: ${value}`;
|
|
15095
|
+
}
|
|
15096
|
+
}
|
|
15097
|
+
},
|
|
15098
|
+
},
|
|
15099
|
+
scales: {
|
|
15100
|
+
x: {
|
|
15101
|
+
ticks: {
|
|
15102
|
+
autoSkip: false,
|
|
15103
|
+
maxRotation: 45,
|
|
15104
|
+
minRotation: 45,
|
|
15105
|
+
font: {
|
|
15106
|
+
size: 10
|
|
15107
|
+
}
|
|
15108
|
+
},
|
|
15109
|
+
},
|
|
15110
|
+
y: {
|
|
15111
|
+
beginAtZero: true,
|
|
15112
|
+
ticks: {
|
|
15113
|
+
callback: function (value) {
|
|
15114
|
+
return units ? `${formatValue(value)} ${units}` : value;
|
|
15115
|
+
}
|
|
15116
|
+
}
|
|
15117
|
+
},
|
|
15118
|
+
},
|
|
15119
|
+
};
|
|
15120
|
+
return (jsxRuntimeExports.jsx(Bar, { data: data, options: options !== null && options !== void 0 ? options : defaultOptions }));
|
|
15121
|
+
}
|
|
15122
|
+
|
|
15051
15123
|
Chart$1.register(CategoryScale, LinearScale, BarElement, plugin_title, plugin_tooltip, plugin_legend);
|
|
15052
15124
|
function SeriesChart({ orientation, title, data, options, className, units }) {
|
|
15053
15125
|
const formatValue = (value) => {
|
|
@@ -15104,6 +15176,9 @@ function SeriesChart({ orientation, title, data, options, className, units }) {
|
|
|
15104
15176
|
beginAtZero: true,
|
|
15105
15177
|
ticks: {
|
|
15106
15178
|
callback: function (value) {
|
|
15179
|
+
if (units === '$') {
|
|
15180
|
+
return `${units}${formatValue(value)}`;
|
|
15181
|
+
}
|
|
15107
15182
|
return units ? `${formatValue(value)} ${units}` : value;
|
|
15108
15183
|
}
|
|
15109
15184
|
}
|
|
@@ -15236,6 +15311,70 @@ const PieChart = (props) => {
|
|
|
15236
15311
|
return jsxRuntimeExports.jsx(Pie, { data: data, options: options !== null && options !== void 0 ? options : defaultOptions });
|
|
15237
15312
|
};
|
|
15238
15313
|
|
|
15314
|
+
Chart$1.register(CategoryScale, LinearScale, PointElement, LineElement, plugin_title, plugin_tooltip, plugin_legend);
|
|
15315
|
+
function LineChart({ title, data, options, className, units }) {
|
|
15316
|
+
const formatValue = (value) => {
|
|
15317
|
+
const numValue = typeof value === 'string' ? parseFloat(value) : value;
|
|
15318
|
+
if (units === '$' && !isNaN(numValue)) {
|
|
15319
|
+
return numValue.toLocaleString();
|
|
15320
|
+
}
|
|
15321
|
+
return value;
|
|
15322
|
+
};
|
|
15323
|
+
const defaultOptions = {
|
|
15324
|
+
responsive: true,
|
|
15325
|
+
maintainAspectRatio: false,
|
|
15326
|
+
layout: {
|
|
15327
|
+
padding: {
|
|
15328
|
+
bottom: 0,
|
|
15329
|
+
top: 0,
|
|
15330
|
+
left: 0,
|
|
15331
|
+
right: 0,
|
|
15332
|
+
},
|
|
15333
|
+
},
|
|
15334
|
+
plugins: {
|
|
15335
|
+
legend: {
|
|
15336
|
+
display: false,
|
|
15337
|
+
labels: {
|
|
15338
|
+
boxWidth: 5,
|
|
15339
|
+
boxHeight: 5,
|
|
15340
|
+
},
|
|
15341
|
+
position: "bottom"
|
|
15342
|
+
},
|
|
15343
|
+
title: {
|
|
15344
|
+
display: true,
|
|
15345
|
+
text: title,
|
|
15346
|
+
font: {
|
|
15347
|
+
size: 18,
|
|
15348
|
+
weight: "bold",
|
|
15349
|
+
},
|
|
15350
|
+
color: "#0F172A"
|
|
15351
|
+
},
|
|
15352
|
+
tooltip: {
|
|
15353
|
+
callbacks: {
|
|
15354
|
+
label: function (context) {
|
|
15355
|
+
const value = context.parsed.y;
|
|
15356
|
+
return units ? `${context.dataset.label}: ${formatValue(value)} ${units}` : `${context.dataset.label}: ${value}`;
|
|
15357
|
+
}
|
|
15358
|
+
}
|
|
15359
|
+
},
|
|
15360
|
+
},
|
|
15361
|
+
scales: {
|
|
15362
|
+
x: {
|
|
15363
|
+
ticks: { autoSkip: true, maxTicksLimit: 8, maxRotation: 45, minRotation: 0 },
|
|
15364
|
+
},
|
|
15365
|
+
y: {
|
|
15366
|
+
beginAtZero: true,
|
|
15367
|
+
ticks: {
|
|
15368
|
+
callback: function (value) {
|
|
15369
|
+
return units ? `${formatValue(value)} ${units}` : value;
|
|
15370
|
+
}
|
|
15371
|
+
}
|
|
15372
|
+
},
|
|
15373
|
+
},
|
|
15374
|
+
};
|
|
15375
|
+
return (jsxRuntimeExports.jsx(Line, { data: data, options: options !== null && options !== void 0 ? options : defaultOptions }));
|
|
15376
|
+
}
|
|
15377
|
+
|
|
15239
15378
|
function DataGrid({ title, data, className }) {
|
|
15240
15379
|
const { columns, rows } = data;
|
|
15241
15380
|
if (!columns || columns.length === 0 || !rows || rows.length === 0) {
|
|
@@ -35943,6 +36082,16 @@ const createInitialChartState = (agentType, widgetIds, datasetId) => {
|
|
|
35943
36082
|
data: { labels: [], values: [], percentages: [], total: 0 },
|
|
35944
36083
|
metadata: { categories: 0, largest_category: "", largest_value: 0, largest_percentage: 0 }
|
|
35945
36084
|
} }, baseState);
|
|
36085
|
+
case "Line Chart Agent":
|
|
36086
|
+
case "Bar Chart Agent":
|
|
36087
|
+
return Object.assign({ bar_chart_data: {
|
|
36088
|
+
title: "",
|
|
36089
|
+
type: agentType === "Line Chart Agent" ? "line" : "bar",
|
|
36090
|
+
chart_type: "financial",
|
|
36091
|
+
orientation: agentType === "Line Chart Agent" ? "horizontal" : "vertical",
|
|
36092
|
+
data: { labels: [], values: [], total: 0, average: 0 },
|
|
36093
|
+
metadata: { categories: 0, highest_category: "", highest_value: 0, lowest_category: "", lowest_value: 0, range: 0 }
|
|
36094
|
+
} }, baseState);
|
|
35946
36095
|
case "Series Bar Chart Agent":
|
|
35947
36096
|
case "Series Line Chart Agent":
|
|
35948
36097
|
return Object.assign({ series_bar_chart_data: {
|
|
@@ -36071,6 +36220,58 @@ const getStyleValues = (styles = {}) => {
|
|
|
36071
36220
|
textAlign: alignment,
|
|
36072
36221
|
};
|
|
36073
36222
|
};
|
|
36223
|
+
function BarChartComponent({ orientation, barChartState, styles, appendMessage, query, isFirstLoad, widgetBackendUrl, widgetId, startLoadingTimeout, clearLoadingTimeout }) {
|
|
36224
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
|
|
36225
|
+
const hasCalledRef = useRef(false);
|
|
36226
|
+
const labels = ((_b = (_a = barChartState === null || barChartState === void 0 ? void 0 : barChartState.bar_chart_data) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.labels) || ((_e = (_d = (_c = barChartState === null || barChartState === void 0 ? void 0 : barChartState.state) === null || _c === void 0 ? void 0 : _c.bar_chart_data) === null || _d === void 0 ? void 0 : _d.data) === null || _e === void 0 ? void 0 : _e.labels) || [];
|
|
36227
|
+
const values = ((_g = (_f = barChartState === null || barChartState === void 0 ? void 0 : barChartState.bar_chart_data) === null || _f === void 0 ? void 0 : _f.data) === null || _g === void 0 ? void 0 : _g.values) || ((_k = (_j = (_h = barChartState === null || barChartState === void 0 ? void 0 : barChartState.state) === null || _h === void 0 ? void 0 : _h.bar_chart_data) === null || _j === void 0 ? void 0 : _j.data) === null || _k === void 0 ? void 0 : _k.values) || [];
|
|
36228
|
+
const chartTitle = ((_l = barChartState === null || barChartState === void 0 ? void 0 : barChartState.bar_chart_data) === null || _l === void 0 ? void 0 : _l.title) || ((_o = (_m = barChartState === null || barChartState === void 0 ? void 0 : barChartState.state) === null || _m === void 0 ? void 0 : _m.bar_chart_data) === null || _o === void 0 ? void 0 : _o.title) || "";
|
|
36229
|
+
const units = ((_p = barChartState === null || barChartState === void 0 ? void 0 : barChartState.bar_chart_data) === null || _p === void 0 ? void 0 : _p.units) || ((_r = (_q = barChartState === null || barChartState === void 0 ? void 0 : barChartState.state) === null || _q === void 0 ? void 0 : _q.bar_chart_data) === null || _r === void 0 ? void 0 : _r.units) || "";
|
|
36230
|
+
values.length > 0 ? Math.max(...values) : 0;
|
|
36231
|
+
const isEmpty = labels.length === 0 || values.length === 0;
|
|
36232
|
+
const handleRefresh = async () => {
|
|
36233
|
+
if (query && widgetBackendUrl && widgetId) {
|
|
36234
|
+
await clearChat(widgetBackendUrl, widgetId);
|
|
36235
|
+
appendMessage(new TextMessage({
|
|
36236
|
+
content: `${query} and render data on a bar chart`,
|
|
36237
|
+
role: Role.User,
|
|
36238
|
+
}));
|
|
36239
|
+
}
|
|
36240
|
+
};
|
|
36241
|
+
useEffect(() => {
|
|
36242
|
+
if (isEmpty && query && isFirstLoad && !(barChartState === null || barChartState === void 0 ? void 0 : barChartState.agent_message) && !hasCalledRef.current) {
|
|
36243
|
+
// console.log('calling append message')
|
|
36244
|
+
hasCalledRef.current = true;
|
|
36245
|
+
handleRefresh();
|
|
36246
|
+
}
|
|
36247
|
+
}, [isEmpty, query, isFirstLoad, barChartState]);
|
|
36248
|
+
// Start timeout when chart is empty and loading
|
|
36249
|
+
useEffect(() => {
|
|
36250
|
+
if (isEmpty && startLoadingTimeout && !(barChartState === null || barChartState === void 0 ? void 0 : barChartState.agent_message)) {
|
|
36251
|
+
startLoadingTimeout();
|
|
36252
|
+
}
|
|
36253
|
+
else if (!isEmpty && clearLoadingTimeout) {
|
|
36254
|
+
clearLoadingTimeout();
|
|
36255
|
+
}
|
|
36256
|
+
}, [isEmpty, startLoadingTimeout, clearLoadingTimeout]);
|
|
36257
|
+
const finalColors = useMemo(() => {
|
|
36258
|
+
return shuffleColors(DEFAULT_COLORS, labels === null || labels === void 0 ? void 0 : labels.length);
|
|
36259
|
+
}, [labels.length]);
|
|
36260
|
+
if (isEmpty) {
|
|
36261
|
+
return createLoadingComponent();
|
|
36262
|
+
}
|
|
36263
|
+
const transformedData = {
|
|
36264
|
+
labels: labels,
|
|
36265
|
+
datasets: [
|
|
36266
|
+
{
|
|
36267
|
+
label: chartTitle || "Data",
|
|
36268
|
+
data: values,
|
|
36269
|
+
backgroundColor: finalColors,
|
|
36270
|
+
},
|
|
36271
|
+
],
|
|
36272
|
+
};
|
|
36273
|
+
return (jsxRuntimeExports.jsx(BarChart, { orientation: orientation, title: chartTitle, data: transformedData, units: units }));
|
|
36274
|
+
}
|
|
36074
36275
|
function SeriesBarChartComponent({ orientation, seriesBarChartState, styles, appendMessage, query, isFirstLoad, widgetBackendUrl, widgetId, startLoadingTimeout, clearLoadingTimeout }) {
|
|
36075
36276
|
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
|
|
36076
36277
|
const hasCalledRef = useRef(false);
|
|
@@ -36235,6 +36436,63 @@ function PieChartComponent({ pieChartState, styles, appendMessage, query, isFirs
|
|
|
36235
36436
|
};
|
|
36236
36437
|
return (jsxRuntimeExports.jsx(PieChart, { title: chartTitle, data: transformedData, units: units }));
|
|
36237
36438
|
}
|
|
36439
|
+
function LineChartComponent({ lineChartState, styles, appendMessage, query, isFirstLoad, widgetBackendUrl, widgetId, startLoadingTimeout, clearLoadingTimeout }) {
|
|
36440
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
|
|
36441
|
+
const hasCalledRef = useRef(false);
|
|
36442
|
+
const labels = ((_b = (_a = lineChartState === null || lineChartState === void 0 ? void 0 : lineChartState.bar_chart_data) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.labels) || ((_e = (_d = (_c = lineChartState === null || lineChartState === void 0 ? void 0 : lineChartState.state) === null || _c === void 0 ? void 0 : _c.bar_chart_data) === null || _d === void 0 ? void 0 : _d.data) === null || _e === void 0 ? void 0 : _e.labels) || [];
|
|
36443
|
+
const values = ((_g = (_f = lineChartState === null || lineChartState === void 0 ? void 0 : lineChartState.bar_chart_data) === null || _f === void 0 ? void 0 : _f.data) === null || _g === void 0 ? void 0 : _g.values) || ((_k = (_j = (_h = lineChartState === null || lineChartState === void 0 ? void 0 : lineChartState.state) === null || _h === void 0 ? void 0 : _h.bar_chart_data) === null || _j === void 0 ? void 0 : _j.data) === null || _k === void 0 ? void 0 : _k.values) || [];
|
|
36444
|
+
const chartTitle = ((_l = lineChartState === null || lineChartState === void 0 ? void 0 : lineChartState.bar_chart_data) === null || _l === void 0 ? void 0 : _l.title) || ((_o = (_m = lineChartState === null || lineChartState === void 0 ? void 0 : lineChartState.state) === null || _m === void 0 ? void 0 : _m.bar_chart_data) === null || _o === void 0 ? void 0 : _o.title) || "";
|
|
36445
|
+
const units = ((_p = lineChartState === null || lineChartState === void 0 ? void 0 : lineChartState.bar_chart_data) === null || _p === void 0 ? void 0 : _p.units) || ((_r = (_q = lineChartState === null || lineChartState === void 0 ? void 0 : lineChartState.state) === null || _q === void 0 ? void 0 : _q.bar_chart_data) === null || _r === void 0 ? void 0 : _r.units) || "";
|
|
36446
|
+
values.length > 0 ? Math.max(...values) : 0;
|
|
36447
|
+
const isEmpty = labels.length === 0 || values.length === 0;
|
|
36448
|
+
const handleRefresh = async () => {
|
|
36449
|
+
if (query && widgetBackendUrl && widgetId) {
|
|
36450
|
+
await clearChat(widgetBackendUrl, widgetId);
|
|
36451
|
+
appendMessage(new TextMessage({
|
|
36452
|
+
content: `${query} and render data on a bar chart`,
|
|
36453
|
+
role: Role.User,
|
|
36454
|
+
}));
|
|
36455
|
+
}
|
|
36456
|
+
};
|
|
36457
|
+
useEffect(() => {
|
|
36458
|
+
if (isEmpty && query && isFirstLoad && !(lineChartState === null || lineChartState === void 0 ? void 0 : lineChartState.agent_message) && !hasCalledRef.current) {
|
|
36459
|
+
hasCalledRef.current = true;
|
|
36460
|
+
handleRefresh();
|
|
36461
|
+
}
|
|
36462
|
+
}, [isEmpty, query, isFirstLoad, lineChartState]);
|
|
36463
|
+
// Start timeout when chart is empty and loading
|
|
36464
|
+
useEffect(() => {
|
|
36465
|
+
if (isEmpty && startLoadingTimeout && !(lineChartState === null || lineChartState === void 0 ? void 0 : lineChartState.agent_message)) {
|
|
36466
|
+
startLoadingTimeout();
|
|
36467
|
+
}
|
|
36468
|
+
else if (!isEmpty && clearLoadingTimeout) {
|
|
36469
|
+
clearLoadingTimeout();
|
|
36470
|
+
}
|
|
36471
|
+
}, [isEmpty, startLoadingTimeout, clearLoadingTimeout]);
|
|
36472
|
+
const lineColor = useMemo(() => {
|
|
36473
|
+
return LINE_COLORS[Math.floor(Math.random() * LINE_COLORS.length)];
|
|
36474
|
+
}, [labels.length]);
|
|
36475
|
+
if (isEmpty) {
|
|
36476
|
+
return createLoadingComponent();
|
|
36477
|
+
}
|
|
36478
|
+
const transformedData = {
|
|
36479
|
+
labels: labels,
|
|
36480
|
+
datasets: [
|
|
36481
|
+
{
|
|
36482
|
+
label: chartTitle || "Data",
|
|
36483
|
+
data: values,
|
|
36484
|
+
borderColor: lineColor,
|
|
36485
|
+
backgroundColor: "rgba(96, 165, 250, 0.1)",
|
|
36486
|
+
borderWidth: 2,
|
|
36487
|
+
pointBackgroundColor: lineColor,
|
|
36488
|
+
pointBorderColor: lineColor,
|
|
36489
|
+
pointRadius: 4,
|
|
36490
|
+
fill: true,
|
|
36491
|
+
},
|
|
36492
|
+
],
|
|
36493
|
+
};
|
|
36494
|
+
return (jsxRuntimeExports.jsx(LineChart, { title: chartTitle, data: transformedData, units: units }));
|
|
36495
|
+
}
|
|
36238
36496
|
function DataGridComponent({ dataGridState, styles, appendMessage, query, isFirstLoad, widgetBackendUrl, widgetId, startLoadingTimeout, clearLoadingTimeout }) {
|
|
36239
36497
|
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
|
|
36240
36498
|
const hasCalledRef = useRef(false);
|
|
@@ -36322,7 +36580,7 @@ function SummaryComponent({ summaryState, styles, appendMessage, query, isFirstL
|
|
|
36322
36580
|
return (jsxRuntimeExports.jsx(SummaryWidget, { title: title, data: data, metadata: metadata, className: "" }));
|
|
36323
36581
|
}
|
|
36324
36582
|
function CopilotKitAgent({ widget, showHeader, styles, onResetReady, widgetIds, widgetBackendUrl, datasetId }) {
|
|
36325
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8, _9, _10, _11, _12, _13, _14, _15, _16, _17, _18;
|
|
36583
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8, _9, _10, _11, _12, _13, _14, _15, _16, _17, _18, _19, _20, _21, _22, _23, _24, _25, _26, _27, _28, _29, _30, _31;
|
|
36326
36584
|
const agentType = (_a = widget.config) === null || _a === void 0 ? void 0 : _a.agentType;
|
|
36327
36585
|
const orientation = (_b = widget.config) === null || _b === void 0 ? void 0 : _b.orientation;
|
|
36328
36586
|
const isFirstLoad = (_c = widget.config) === null || _c === void 0 ? void 0 : _c.isFirstLoad;
|
|
@@ -36331,8 +36589,6 @@ function CopilotKitAgent({ widget, showHeader, styles, onResetReady, widgetIds,
|
|
|
36331
36589
|
const [isTimeoutTriggered, setIsTimeoutTriggered] = useState(false);
|
|
36332
36590
|
const [apiCallCount, setApiCallCount] = useState(0);
|
|
36333
36591
|
const [hasTimeoutError, setHasTimeoutError] = useState(false);
|
|
36334
|
-
const [isAgentTriggered, setIsAgentTriggered] = useState(false);
|
|
36335
|
-
const pollingIntervalRef = useRef(null);
|
|
36336
36592
|
useEffect(() => {
|
|
36337
36593
|
setThreadId(widget.id);
|
|
36338
36594
|
}, [widget.id, setThreadId]);
|
|
@@ -36379,75 +36635,38 @@ function CopilotKitAgent({ widget, showHeader, styles, onResetReady, widgetIds,
|
|
|
36379
36635
|
timeoutRef.current = null;
|
|
36380
36636
|
}
|
|
36381
36637
|
}, []);
|
|
36382
|
-
// Function to
|
|
36383
|
-
|
|
36384
|
-
|
|
36385
|
-
if (!widgetBackendUrl || !((_a = widget.config) === null || _a === void 0 ? void 0 : _a.agentName))
|
|
36638
|
+
// Function to clear chat and reset chart state
|
|
36639
|
+
useCallback(async (widgetId) => {
|
|
36640
|
+
if (!widgetBackendUrl)
|
|
36386
36641
|
return;
|
|
36387
|
-
|
|
36388
|
-
|
|
36389
|
-
|
|
36390
|
-
|
|
36391
|
-
|
|
36392
|
-
|
|
36393
|
-
|
|
36394
|
-
|
|
36395
|
-
|
|
36396
|
-
|
|
36397
|
-
|
|
36398
|
-
|
|
36399
|
-
|
|
36400
|
-
|
|
36401
|
-
|
|
36402
|
-
|
|
36403
|
-
|
|
36404
|
-
|
|
36405
|
-
|
|
36406
|
-
|
|
36407
|
-
const agentName = ((_a = widget.config) === null || _a === void 0 ? void 0 : _a.agentName) || "adk-construction-project-agent";
|
|
36408
|
-
const apiResponse = await loadAgentState(widgetBackendUrl, widget.id, agentName);
|
|
36409
|
-
if (apiResponse && ((_c = (_b = apiResponse.data) === null || _b === void 0 ? void 0 : _b.loadAgentState) === null || _c === void 0 ? void 0 : _c.state)) {
|
|
36410
|
-
parseAndUpdateChartState(apiResponse, setChartState);
|
|
36411
|
-
setIsAgentTriggered(false);
|
|
36412
|
-
if (pollingIntervalRef.current) {
|
|
36413
|
-
clearInterval(pollingIntervalRef.current);
|
|
36414
|
-
pollingIntervalRef.current = null;
|
|
36415
|
-
}
|
|
36416
|
-
}
|
|
36417
|
-
};
|
|
36418
|
-
// Poll immediately
|
|
36419
|
-
pollForData();
|
|
36420
|
-
// Then poll every CHART_REFRESH_TIMEOUT
|
|
36421
|
-
pollingIntervalRef.current = setInterval(pollForData, CHART_REFRESH_TIMEOUT);
|
|
36422
|
-
// Set a maximum timeout to stop polling after 10 attempts
|
|
36423
|
-
setTimeout(() => {
|
|
36424
|
-
if (pollingIntervalRef.current) {
|
|
36425
|
-
clearInterval(pollingIntervalRef.current);
|
|
36426
|
-
pollingIntervalRef.current = null;
|
|
36427
|
-
setIsAgentTriggered(false);
|
|
36428
|
-
if (apiCallCount >= 10) {
|
|
36429
|
-
setHasTimeoutError(true);
|
|
36430
|
-
}
|
|
36431
|
-
}
|
|
36432
|
-
}, CHART_REFRESH_TIMEOUT * 10);
|
|
36433
|
-
}, [widgetBackendUrl, (_f = widget.config) === null || _f === void 0 ? void 0 : _f.agentName, widget.id, apiCallCount, setChartState]);
|
|
36434
|
-
// Clean up timeout and polling on unmount
|
|
36642
|
+
try {
|
|
36643
|
+
await fetch(`${widgetBackendUrl}/api/clear-chat`, {
|
|
36644
|
+
method: 'POST',
|
|
36645
|
+
headers: {
|
|
36646
|
+
'Content-Type': 'application/json',
|
|
36647
|
+
},
|
|
36648
|
+
body: JSON.stringify({
|
|
36649
|
+
session_id: widgetId,
|
|
36650
|
+
delete_state: true
|
|
36651
|
+
}),
|
|
36652
|
+
});
|
|
36653
|
+
setChartState(createInitialChartState(agentType || '', widgetIds, datasetId));
|
|
36654
|
+
setApiCallCount(0);
|
|
36655
|
+
setHasTimeoutError(false);
|
|
36656
|
+
}
|
|
36657
|
+
catch (error) {
|
|
36658
|
+
console.error('Failed to clear chat and state:', error);
|
|
36659
|
+
}
|
|
36660
|
+
}, [widgetBackendUrl, setChartState, agentType, widgetIds]);
|
|
36661
|
+
// Clean up timeout on unmount
|
|
36435
36662
|
useEffect(() => {
|
|
36436
36663
|
return () => {
|
|
36437
36664
|
if (timeoutRef.current) {
|
|
36438
36665
|
clearTimeout(timeoutRef.current);
|
|
36439
36666
|
}
|
|
36440
|
-
if (pollingIntervalRef.current) {
|
|
36441
|
-
clearInterval(pollingIntervalRef.current);
|
|
36442
|
-
}
|
|
36443
36667
|
};
|
|
36444
36668
|
}, []);
|
|
36445
|
-
const { appendMessage
|
|
36446
|
-
// Wrapper function for appendMessage that triggers polling
|
|
36447
|
-
const appendMessage = useCallback((message) => {
|
|
36448
|
-
startPollingForData();
|
|
36449
|
-
return originalAppendMessage(message);
|
|
36450
|
-
}, [originalAppendMessage, startPollingForData]);
|
|
36669
|
+
const { appendMessage, reset } = useCopilotChat();
|
|
36451
36670
|
// Register the reset function with the parent component
|
|
36452
36671
|
useEffect(() => {
|
|
36453
36672
|
if (onResetReady && reset && widget.id) {
|
|
@@ -36461,7 +36680,8 @@ function CopilotKitAgent({ widget, showHeader, styles, onResetReady, widgetIds,
|
|
|
36461
36680
|
// Listen for triggerAgent events for this widget
|
|
36462
36681
|
useEffect(() => {
|
|
36463
36682
|
const handleTriggerAgent = (event) => {
|
|
36464
|
-
const { widgetId, query, agentType: eventAgentType } = event.detail;
|
|
36683
|
+
const { widgetId, query, agentType: eventAgentType, datasetId } = event.detail;
|
|
36684
|
+
console.log('event.detail==>', event.detail);
|
|
36465
36685
|
if (widgetId === widget.id) {
|
|
36466
36686
|
let messageContent = query;
|
|
36467
36687
|
// Customize message based on agent type
|
|
@@ -36486,6 +36706,8 @@ function CopilotKitAgent({ widget, showHeader, styles, onResetReady, widgetIds,
|
|
|
36486
36706
|
else if (eventAgentType === "Summary Agent") {
|
|
36487
36707
|
messageContent = `${query} and render the data on a summary widget`;
|
|
36488
36708
|
}
|
|
36709
|
+
console.log('triggering to datasetId==>', datasetId);
|
|
36710
|
+
setChartState(createInitialChartState(agentType || '', widgetIds, datasetId));
|
|
36489
36711
|
appendMessage(new TextMessage({
|
|
36490
36712
|
content: messageContent,
|
|
36491
36713
|
role: Role.User,
|
|
@@ -36509,16 +36731,17 @@ function CopilotKitAgent({ widget, showHeader, styles, onResetReady, widgetIds,
|
|
|
36509
36731
|
}, [widget.id, appendMessage, agentType, setChartState]);
|
|
36510
36732
|
return (jsxRuntimeExports.jsxs("div", { className: cn("flex flex-col h-full"), children: [showHeader && (jsxRuntimeExports.jsx("div", { className: "flex items-center justify-between pb-2 border-b", children: jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2", children: [jsxRuntimeExports.jsx(Bot, { className: "h-4 w-4" }), jsxRuntimeExports.jsx("h3", { className: "text-sm font-medium", children: widget.title })] }) })), jsxRuntimeExports.jsx("div", { className: "flex-1 h-full", children: (chartState === null || chartState === void 0 ? void 0 : chartState.agent_message) && agentType !== "chatbot" && (
|
|
36511
36733
|
// Check if data is empty based on agent type
|
|
36512
|
-
(agentType === "
|
|
36513
|
-
(agentType === "Series
|
|
36514
|
-
(agentType === "
|
|
36515
|
-
(agentType === "
|
|
36516
|
-
(agentType === "
|
|
36517
|
-
|
|
36518
|
-
|
|
36734
|
+
(agentType === "Bar Chart Agent" && (!((_h = (_g = (_f = chartState.bar_chart_data) === null || _f === void 0 ? void 0 : _f.data) === null || _g === void 0 ? void 0 : _g.labels) === null || _h === void 0 ? void 0 : _h.length) || !((_l = (_k = (_j = chartState.bar_chart_data) === null || _j === void 0 ? void 0 : _j.data) === null || _k === void 0 ? void 0 : _k.values) === null || _l === void 0 ? void 0 : _l.length))) ||
|
|
36735
|
+
(agentType === "Series Bar Chart Agent" && (!((_p = (_o = (_m = chartState.series_bar_chart_data) === null || _m === void 0 ? void 0 : _m.data) === null || _o === void 0 ? void 0 : _o.labels) === null || _p === void 0 ? void 0 : _p.length) || !((_s = (_r = (_q = chartState.series_bar_chart_data) === null || _q === void 0 ? void 0 : _q.data) === null || _r === void 0 ? void 0 : _r.series) === null || _s === void 0 ? void 0 : _s.length))) ||
|
|
36736
|
+
(agentType === "Series Line Chart Agent" && (!((_v = (_u = (_t = chartState.series_bar_chart_data) === null || _t === void 0 ? void 0 : _t.data) === null || _u === void 0 ? void 0 : _u.labels) === null || _v === void 0 ? void 0 : _v.length) || !((_y = (_x = (_w = chartState.series_bar_chart_data) === null || _w === void 0 ? void 0 : _w.data) === null || _x === void 0 ? void 0 : _x.series) === null || _y === void 0 ? void 0 : _y.length))) ||
|
|
36737
|
+
(agentType === "Pie Chart Agent" && (!((_1 = (_0 = (_z = chartState.pie_chart_data) === null || _z === void 0 ? void 0 : _z.data) === null || _0 === void 0 ? void 0 : _0.labels) === null || _1 === void 0 ? void 0 : _1.length) || !((_4 = (_3 = (_2 = chartState.pie_chart_data) === null || _2 === void 0 ? void 0 : _2.data) === null || _3 === void 0 ? void 0 : _3.values) === null || _4 === void 0 ? void 0 : _4.length))) ||
|
|
36738
|
+
(agentType === "Line Chart Agent" && (!((_7 = (_6 = (_5 = chartState.bar_chart_data) === null || _5 === void 0 ? void 0 : _5.data) === null || _6 === void 0 ? void 0 : _6.labels) === null || _7 === void 0 ? void 0 : _7.length) || !((_10 = (_9 = (_8 = chartState.bar_chart_data) === null || _8 === void 0 ? void 0 : _8.data) === null || _9 === void 0 ? void 0 : _9.values) === null || _10 === void 0 ? void 0 : _10.length))) ||
|
|
36739
|
+
(agentType === "Data Grid Agent" && (!((_13 = (_12 = (_11 = chartState.matrix_grid_data) === null || _11 === void 0 ? void 0 : _11.data) === null || _12 === void 0 ? void 0 : _12.headers) === null || _13 === void 0 ? void 0 : _13.length) || !((_16 = (_15 = (_14 = chartState.matrix_grid_data) === null || _14 === void 0 ? void 0 : _14.data) === null || _15 === void 0 ? void 0 : _15.rows) === null || _16 === void 0 ? void 0 : _16.length))) ||
|
|
36740
|
+
(agentType === "Summary Agent" && (!((_18 = (_17 = chartState.summary_data) === null || _17 === void 0 ? void 0 : _17.data) === null || _18 === void 0 ? void 0 : _18.content) || ((_21 = (_20 = (_19 = chartState.summary_data) === null || _19 === void 0 ? void 0 : _19.data) === null || _20 === void 0 ? void 0 : _20.content) === null || _21 === void 0 ? void 0 : _21.trim()) === ""))) ? (jsxRuntimeExports.jsx("div", { className: "flex items-center justify-center h-full p-4", children: jsxRuntimeExports.jsx("div", { className: "text-center max-w-md", children: jsxRuntimeExports.jsx("p", { className: "text-sm text-gray-700", children: chartState.agent_message }) }) })) : agentType === "Bar Chart Agent" ? (jsxRuntimeExports.jsx(BarChartComponent, { barChartState: chartState, styles: styles, orientation: orientation, appendMessage: appendMessage, query: (_22 = widget.config) === null || _22 === void 0 ? void 0 : _22.query, isFirstLoad: isFirstLoad, widgetBackendUrl: widgetBackendUrl, widgetId: widget.id, startLoadingTimeout: startLoadingTimeout, clearLoadingTimeout: clearLoadingTimeout })) : agentType === "Series Bar Chart Agent" ? (jsxRuntimeExports.jsx(SeriesBarChartComponent, { seriesBarChartState: chartState, styles: styles, orientation: orientation, appendMessage: appendMessage, query: (_23 = widget.config) === null || _23 === void 0 ? void 0 : _23.query, isFirstLoad: isFirstLoad, widgetBackendUrl: widgetBackendUrl, widgetId: widget.id, startLoadingTimeout: startLoadingTimeout, clearLoadingTimeout: clearLoadingTimeout })) : agentType === "Series Line Chart Agent" ? (jsxRuntimeExports.jsx(SeriesLineChartComponent, { seriesLineChartState: chartState, styles: styles, orientation: orientation, appendMessage: appendMessage, query: (_24 = widget.config) === null || _24 === void 0 ? void 0 : _24.query, isFirstLoad: isFirstLoad, widgetBackendUrl: widgetBackendUrl, widgetId: widget.id, startLoadingTimeout: startLoadingTimeout, clearLoadingTimeout: clearLoadingTimeout })) : agentType === "Pie Chart Agent" ? (jsxRuntimeExports.jsx(PieChartComponent, { pieChartState: chartState, styles: styles, appendMessage: appendMessage, query: (_25 = widget.config) === null || _25 === void 0 ? void 0 : _25.query, isFirstLoad: isFirstLoad, widgetBackendUrl: widgetBackendUrl, widgetId: widget.id, startLoadingTimeout: startLoadingTimeout, clearLoadingTimeout: clearLoadingTimeout })) : agentType === "Line Chart Agent" ? (jsxRuntimeExports.jsx(LineChartComponent, { lineChartState: chartState, styles: styles, appendMessage: appendMessage, query: (_26 = widget.config) === null || _26 === void 0 ? void 0 : _26.query, isFirstLoad: isFirstLoad, widgetBackendUrl: widgetBackendUrl, widgetId: widget.id, startLoadingTimeout: startLoadingTimeout, clearLoadingTimeout: clearLoadingTimeout })) : agentType === "Data Grid Agent" ? (jsxRuntimeExports.jsx(DataGridComponent, { dataGridState: chartState, styles: styles, appendMessage: appendMessage, query: (_27 = widget.config) === null || _27 === void 0 ? void 0 : _27.query, isFirstLoad: isFirstLoad, widgetBackendUrl: widgetBackendUrl, widgetId: widget.id, startLoadingTimeout: startLoadingTimeout, clearLoadingTimeout: clearLoadingTimeout })) : agentType === "Summary Agent" ? (jsxRuntimeExports.jsx(SummaryComponent, { summaryState: chartState, styles: styles, appendMessage: appendMessage, query: (_28 = widget.config) === null || _28 === void 0 ? void 0 : _28.query, isFirstLoad: isFirstLoad, widgetBackendUrl: widgetBackendUrl, widgetId: widget.id, widget_ids: widgetIds, startLoadingTimeout: startLoadingTimeout, clearLoadingTimeout: clearLoadingTimeout, setChartState: setChartState })) : (jsxRuntimeExports.jsx(CopilotChat, { className: "h-full text-xs [&_.copilot-chat-message]:text-xs [&_.copilot-chat-input]:text-xs", labels: {
|
|
36741
|
+
title: ((_29 = widget.config) === null || _29 === void 0 ? void 0 : _29.copilotTitle) || widget.title,
|
|
36742
|
+
initial: ((_30 = widget.config) === null || _30 === void 0 ? void 0 : _30.copilotInitialMessage) || ((_31 = widget.config) === null || _31 === void 0 ? void 0 : _31.placeholder) || "How can I help you today?"
|
|
36519
36743
|
}, onSubmitMessage: () => {
|
|
36520
36744
|
setChartState(prevState => (Object.assign(Object.assign({}, prevState), { widget_ids: widgetIds, dataset_id: datasetId })));
|
|
36521
|
-
startPollingForData();
|
|
36522
36745
|
} })) })] }));
|
|
36523
36746
|
}
|
|
36524
36747
|
function AgentWidget({ widget, showHeader = true, widgetBackendUrl, onResetReady, widgetIds, datasetId, }) {
|
|
@@ -36602,14 +36825,14 @@ function AddWidgetDialog({ isOpen, onClose, addWidgetFn, defaultAgentName = "adk
|
|
|
36602
36825
|
{
|
|
36603
36826
|
type: 'series-bar-chart',
|
|
36604
36827
|
title: 'Bar Chart Widget',
|
|
36605
|
-
icon: BarChart,
|
|
36828
|
+
icon: BarChart$1,
|
|
36606
36829
|
description: 'Create interactive series bar charts with custom queries',
|
|
36607
36830
|
configRequired: true
|
|
36608
36831
|
},
|
|
36609
36832
|
{
|
|
36610
36833
|
type: 'series-line-chart',
|
|
36611
36834
|
title: 'Line Chart Widget',
|
|
36612
|
-
icon: LineChart,
|
|
36835
|
+
icon: LineChart$1,
|
|
36613
36836
|
description: 'Create interactive series line charts with custom queries',
|
|
36614
36837
|
configRequired: true
|
|
36615
36838
|
},
|
|
@@ -36785,13 +37008,13 @@ const IconMap = {
|
|
|
36785
37008
|
search: Search,
|
|
36786
37009
|
filter: Filter,
|
|
36787
37010
|
results: LayoutGrid,
|
|
36788
|
-
analytics: BarChart,
|
|
37011
|
+
analytics: BarChart$1,
|
|
36789
37012
|
custom: LayoutGrid,
|
|
36790
37013
|
header: Layout,
|
|
36791
37014
|
footer: Layout,
|
|
36792
37015
|
text: Type,
|
|
36793
37016
|
agent: Bot,
|
|
36794
|
-
'bar-chart': BarChart,
|
|
37017
|
+
'bar-chart': BarChart$1,
|
|
36795
37018
|
'pie-chart': PieChart$1,
|
|
36796
37019
|
'chatbot': Bot,
|
|
36797
37020
|
};
|
|
@@ -36869,7 +37092,8 @@ function WidgetDashboard({ pageId, isEditing, selectedWidget = null, onWidgetSel
|
|
|
36869
37092
|
detail: {
|
|
36870
37093
|
widgetId: editingWidget.id,
|
|
36871
37094
|
query: newQuery,
|
|
36872
|
-
agentType: (_a = editingWidget.config) === null || _a === void 0 ? void 0 : _a.agentType
|
|
37095
|
+
agentType: (_a = editingWidget.config) === null || _a === void 0 ? void 0 : _a.agentType,
|
|
37096
|
+
datasetId: datasetId
|
|
36873
37097
|
}
|
|
36874
37098
|
});
|
|
36875
37099
|
window.dispatchEvent(event);
|
package/dist/index.js
CHANGED
|
@@ -15075,6 +15075,78 @@ const Line = /* #__PURE__ */ createTypedChart('line', LineController);
|
|
|
15075
15075
|
const Bar = /* #__PURE__ */ createTypedChart('bar', BarController);
|
|
15076
15076
|
const Pie = /* #__PURE__ */ createTypedChart('pie', PieController);
|
|
15077
15077
|
|
|
15078
|
+
Chart$1.register(CategoryScale, LinearScale, BarElement, plugin_title, plugin_tooltip, plugin_legend);
|
|
15079
|
+
function BarChart({ orientation, title, data, options, className, units }) {
|
|
15080
|
+
const formatValue = (value) => {
|
|
15081
|
+
const numValue = typeof value === 'string' ? parseFloat(value) : value;
|
|
15082
|
+
if (units === '$' && !isNaN(numValue)) {
|
|
15083
|
+
return numValue.toLocaleString();
|
|
15084
|
+
}
|
|
15085
|
+
return value;
|
|
15086
|
+
};
|
|
15087
|
+
const defaultOptions = {
|
|
15088
|
+
responsive: true,
|
|
15089
|
+
maintainAspectRatio: false,
|
|
15090
|
+
indexAxis: orientation === "horizontal" ? "y" : "x",
|
|
15091
|
+
layout: {
|
|
15092
|
+
padding: {
|
|
15093
|
+
bottom: 0,
|
|
15094
|
+
top: 0,
|
|
15095
|
+
left: 0,
|
|
15096
|
+
right: 0,
|
|
15097
|
+
},
|
|
15098
|
+
},
|
|
15099
|
+
plugins: {
|
|
15100
|
+
legend: {
|
|
15101
|
+
display: false,
|
|
15102
|
+
labels: {
|
|
15103
|
+
boxWidth: 5,
|
|
15104
|
+
boxHeight: 5,
|
|
15105
|
+
},
|
|
15106
|
+
position: "bottom"
|
|
15107
|
+
},
|
|
15108
|
+
title: {
|
|
15109
|
+
display: true,
|
|
15110
|
+
text: title,
|
|
15111
|
+
font: {
|
|
15112
|
+
size: 18,
|
|
15113
|
+
weight: "bold",
|
|
15114
|
+
},
|
|
15115
|
+
color: "#0F172A"
|
|
15116
|
+
},
|
|
15117
|
+
tooltip: {
|
|
15118
|
+
callbacks: {
|
|
15119
|
+
label: function (context) {
|
|
15120
|
+
const value = context.parsed.y || context.parsed.x;
|
|
15121
|
+
return units ? `${context.dataset.label}: ${formatValue(value)} ${units}` : `${context.dataset.label}: ${value}`;
|
|
15122
|
+
}
|
|
15123
|
+
}
|
|
15124
|
+
},
|
|
15125
|
+
},
|
|
15126
|
+
scales: {
|
|
15127
|
+
x: {
|
|
15128
|
+
ticks: {
|
|
15129
|
+
autoSkip: false,
|
|
15130
|
+
maxRotation: 45,
|
|
15131
|
+
minRotation: 45,
|
|
15132
|
+
font: {
|
|
15133
|
+
size: 10
|
|
15134
|
+
}
|
|
15135
|
+
},
|
|
15136
|
+
},
|
|
15137
|
+
y: {
|
|
15138
|
+
beginAtZero: true,
|
|
15139
|
+
ticks: {
|
|
15140
|
+
callback: function (value) {
|
|
15141
|
+
return units ? `${formatValue(value)} ${units}` : value;
|
|
15142
|
+
}
|
|
15143
|
+
}
|
|
15144
|
+
},
|
|
15145
|
+
},
|
|
15146
|
+
};
|
|
15147
|
+
return (jsxRuntimeExports.jsx(Bar, { data: data, options: options !== null && options !== void 0 ? options : defaultOptions }));
|
|
15148
|
+
}
|
|
15149
|
+
|
|
15078
15150
|
Chart$1.register(CategoryScale, LinearScale, BarElement, plugin_title, plugin_tooltip, plugin_legend);
|
|
15079
15151
|
function SeriesChart({ orientation, title, data, options, className, units }) {
|
|
15080
15152
|
const formatValue = (value) => {
|
|
@@ -15131,6 +15203,9 @@ function SeriesChart({ orientation, title, data, options, className, units }) {
|
|
|
15131
15203
|
beginAtZero: true,
|
|
15132
15204
|
ticks: {
|
|
15133
15205
|
callback: function (value) {
|
|
15206
|
+
if (units === '$') {
|
|
15207
|
+
return `${units}${formatValue(value)}`;
|
|
15208
|
+
}
|
|
15134
15209
|
return units ? `${formatValue(value)} ${units}` : value;
|
|
15135
15210
|
}
|
|
15136
15211
|
}
|
|
@@ -15263,6 +15338,70 @@ const PieChart = (props) => {
|
|
|
15263
15338
|
return jsxRuntimeExports.jsx(Pie, { data: data, options: options !== null && options !== void 0 ? options : defaultOptions });
|
|
15264
15339
|
};
|
|
15265
15340
|
|
|
15341
|
+
Chart$1.register(CategoryScale, LinearScale, PointElement, LineElement, plugin_title, plugin_tooltip, plugin_legend);
|
|
15342
|
+
function LineChart({ title, data, options, className, units }) {
|
|
15343
|
+
const formatValue = (value) => {
|
|
15344
|
+
const numValue = typeof value === 'string' ? parseFloat(value) : value;
|
|
15345
|
+
if (units === '$' && !isNaN(numValue)) {
|
|
15346
|
+
return numValue.toLocaleString();
|
|
15347
|
+
}
|
|
15348
|
+
return value;
|
|
15349
|
+
};
|
|
15350
|
+
const defaultOptions = {
|
|
15351
|
+
responsive: true,
|
|
15352
|
+
maintainAspectRatio: false,
|
|
15353
|
+
layout: {
|
|
15354
|
+
padding: {
|
|
15355
|
+
bottom: 0,
|
|
15356
|
+
top: 0,
|
|
15357
|
+
left: 0,
|
|
15358
|
+
right: 0,
|
|
15359
|
+
},
|
|
15360
|
+
},
|
|
15361
|
+
plugins: {
|
|
15362
|
+
legend: {
|
|
15363
|
+
display: false,
|
|
15364
|
+
labels: {
|
|
15365
|
+
boxWidth: 5,
|
|
15366
|
+
boxHeight: 5,
|
|
15367
|
+
},
|
|
15368
|
+
position: "bottom"
|
|
15369
|
+
},
|
|
15370
|
+
title: {
|
|
15371
|
+
display: true,
|
|
15372
|
+
text: title,
|
|
15373
|
+
font: {
|
|
15374
|
+
size: 18,
|
|
15375
|
+
weight: "bold",
|
|
15376
|
+
},
|
|
15377
|
+
color: "#0F172A"
|
|
15378
|
+
},
|
|
15379
|
+
tooltip: {
|
|
15380
|
+
callbacks: {
|
|
15381
|
+
label: function (context) {
|
|
15382
|
+
const value = context.parsed.y;
|
|
15383
|
+
return units ? `${context.dataset.label}: ${formatValue(value)} ${units}` : `${context.dataset.label}: ${value}`;
|
|
15384
|
+
}
|
|
15385
|
+
}
|
|
15386
|
+
},
|
|
15387
|
+
},
|
|
15388
|
+
scales: {
|
|
15389
|
+
x: {
|
|
15390
|
+
ticks: { autoSkip: true, maxTicksLimit: 8, maxRotation: 45, minRotation: 0 },
|
|
15391
|
+
},
|
|
15392
|
+
y: {
|
|
15393
|
+
beginAtZero: true,
|
|
15394
|
+
ticks: {
|
|
15395
|
+
callback: function (value) {
|
|
15396
|
+
return units ? `${formatValue(value)} ${units}` : value;
|
|
15397
|
+
}
|
|
15398
|
+
}
|
|
15399
|
+
},
|
|
15400
|
+
},
|
|
15401
|
+
};
|
|
15402
|
+
return (jsxRuntimeExports.jsx(Line, { data: data, options: options !== null && options !== void 0 ? options : defaultOptions }));
|
|
15403
|
+
}
|
|
15404
|
+
|
|
15266
15405
|
function DataGrid({ title, data, className }) {
|
|
15267
15406
|
const { columns, rows } = data;
|
|
15268
15407
|
if (!columns || columns.length === 0 || !rows || rows.length === 0) {
|
|
@@ -35970,6 +36109,16 @@ const createInitialChartState = (agentType, widgetIds, datasetId) => {
|
|
|
35970
36109
|
data: { labels: [], values: [], percentages: [], total: 0 },
|
|
35971
36110
|
metadata: { categories: 0, largest_category: "", largest_value: 0, largest_percentage: 0 }
|
|
35972
36111
|
} }, baseState);
|
|
36112
|
+
case "Line Chart Agent":
|
|
36113
|
+
case "Bar Chart Agent":
|
|
36114
|
+
return Object.assign({ bar_chart_data: {
|
|
36115
|
+
title: "",
|
|
36116
|
+
type: agentType === "Line Chart Agent" ? "line" : "bar",
|
|
36117
|
+
chart_type: "financial",
|
|
36118
|
+
orientation: agentType === "Line Chart Agent" ? "horizontal" : "vertical",
|
|
36119
|
+
data: { labels: [], values: [], total: 0, average: 0 },
|
|
36120
|
+
metadata: { categories: 0, highest_category: "", highest_value: 0, lowest_category: "", lowest_value: 0, range: 0 }
|
|
36121
|
+
} }, baseState);
|
|
35973
36122
|
case "Series Bar Chart Agent":
|
|
35974
36123
|
case "Series Line Chart Agent":
|
|
35975
36124
|
return Object.assign({ series_bar_chart_data: {
|
|
@@ -36098,6 +36247,58 @@ const getStyleValues = (styles = {}) => {
|
|
|
36098
36247
|
textAlign: alignment,
|
|
36099
36248
|
};
|
|
36100
36249
|
};
|
|
36250
|
+
function BarChartComponent({ orientation, barChartState, styles, appendMessage, query, isFirstLoad, widgetBackendUrl, widgetId, startLoadingTimeout, clearLoadingTimeout }) {
|
|
36251
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
|
|
36252
|
+
const hasCalledRef = React.useRef(false);
|
|
36253
|
+
const labels = ((_b = (_a = barChartState === null || barChartState === void 0 ? void 0 : barChartState.bar_chart_data) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.labels) || ((_e = (_d = (_c = barChartState === null || barChartState === void 0 ? void 0 : barChartState.state) === null || _c === void 0 ? void 0 : _c.bar_chart_data) === null || _d === void 0 ? void 0 : _d.data) === null || _e === void 0 ? void 0 : _e.labels) || [];
|
|
36254
|
+
const values = ((_g = (_f = barChartState === null || barChartState === void 0 ? void 0 : barChartState.bar_chart_data) === null || _f === void 0 ? void 0 : _f.data) === null || _g === void 0 ? void 0 : _g.values) || ((_k = (_j = (_h = barChartState === null || barChartState === void 0 ? void 0 : barChartState.state) === null || _h === void 0 ? void 0 : _h.bar_chart_data) === null || _j === void 0 ? void 0 : _j.data) === null || _k === void 0 ? void 0 : _k.values) || [];
|
|
36255
|
+
const chartTitle = ((_l = barChartState === null || barChartState === void 0 ? void 0 : barChartState.bar_chart_data) === null || _l === void 0 ? void 0 : _l.title) || ((_o = (_m = barChartState === null || barChartState === void 0 ? void 0 : barChartState.state) === null || _m === void 0 ? void 0 : _m.bar_chart_data) === null || _o === void 0 ? void 0 : _o.title) || "";
|
|
36256
|
+
const units = ((_p = barChartState === null || barChartState === void 0 ? void 0 : barChartState.bar_chart_data) === null || _p === void 0 ? void 0 : _p.units) || ((_r = (_q = barChartState === null || barChartState === void 0 ? void 0 : barChartState.state) === null || _q === void 0 ? void 0 : _q.bar_chart_data) === null || _r === void 0 ? void 0 : _r.units) || "";
|
|
36257
|
+
values.length > 0 ? Math.max(...values) : 0;
|
|
36258
|
+
const isEmpty = labels.length === 0 || values.length === 0;
|
|
36259
|
+
const handleRefresh = async () => {
|
|
36260
|
+
if (query && widgetBackendUrl && widgetId) {
|
|
36261
|
+
await clearChat(widgetBackendUrl, widgetId);
|
|
36262
|
+
appendMessage(new TextMessage({
|
|
36263
|
+
content: `${query} and render data on a bar chart`,
|
|
36264
|
+
role: Role.User,
|
|
36265
|
+
}));
|
|
36266
|
+
}
|
|
36267
|
+
};
|
|
36268
|
+
React.useEffect(() => {
|
|
36269
|
+
if (isEmpty && query && isFirstLoad && !(barChartState === null || barChartState === void 0 ? void 0 : barChartState.agent_message) && !hasCalledRef.current) {
|
|
36270
|
+
// console.log('calling append message')
|
|
36271
|
+
hasCalledRef.current = true;
|
|
36272
|
+
handleRefresh();
|
|
36273
|
+
}
|
|
36274
|
+
}, [isEmpty, query, isFirstLoad, barChartState]);
|
|
36275
|
+
// Start timeout when chart is empty and loading
|
|
36276
|
+
React.useEffect(() => {
|
|
36277
|
+
if (isEmpty && startLoadingTimeout && !(barChartState === null || barChartState === void 0 ? void 0 : barChartState.agent_message)) {
|
|
36278
|
+
startLoadingTimeout();
|
|
36279
|
+
}
|
|
36280
|
+
else if (!isEmpty && clearLoadingTimeout) {
|
|
36281
|
+
clearLoadingTimeout();
|
|
36282
|
+
}
|
|
36283
|
+
}, [isEmpty, startLoadingTimeout, clearLoadingTimeout]);
|
|
36284
|
+
const finalColors = React.useMemo(() => {
|
|
36285
|
+
return shuffleColors(DEFAULT_COLORS, labels === null || labels === void 0 ? void 0 : labels.length);
|
|
36286
|
+
}, [labels.length]);
|
|
36287
|
+
if (isEmpty) {
|
|
36288
|
+
return createLoadingComponent();
|
|
36289
|
+
}
|
|
36290
|
+
const transformedData = {
|
|
36291
|
+
labels: labels,
|
|
36292
|
+
datasets: [
|
|
36293
|
+
{
|
|
36294
|
+
label: chartTitle || "Data",
|
|
36295
|
+
data: values,
|
|
36296
|
+
backgroundColor: finalColors,
|
|
36297
|
+
},
|
|
36298
|
+
],
|
|
36299
|
+
};
|
|
36300
|
+
return (jsxRuntimeExports.jsx(BarChart, { orientation: orientation, title: chartTitle, data: transformedData, units: units }));
|
|
36301
|
+
}
|
|
36101
36302
|
function SeriesBarChartComponent({ orientation, seriesBarChartState, styles, appendMessage, query, isFirstLoad, widgetBackendUrl, widgetId, startLoadingTimeout, clearLoadingTimeout }) {
|
|
36102
36303
|
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
|
|
36103
36304
|
const hasCalledRef = React.useRef(false);
|
|
@@ -36262,6 +36463,63 @@ function PieChartComponent({ pieChartState, styles, appendMessage, query, isFirs
|
|
|
36262
36463
|
};
|
|
36263
36464
|
return (jsxRuntimeExports.jsx(PieChart, { title: chartTitle, data: transformedData, units: units }));
|
|
36264
36465
|
}
|
|
36466
|
+
function LineChartComponent({ lineChartState, styles, appendMessage, query, isFirstLoad, widgetBackendUrl, widgetId, startLoadingTimeout, clearLoadingTimeout }) {
|
|
36467
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
|
|
36468
|
+
const hasCalledRef = React.useRef(false);
|
|
36469
|
+
const labels = ((_b = (_a = lineChartState === null || lineChartState === void 0 ? void 0 : lineChartState.bar_chart_data) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.labels) || ((_e = (_d = (_c = lineChartState === null || lineChartState === void 0 ? void 0 : lineChartState.state) === null || _c === void 0 ? void 0 : _c.bar_chart_data) === null || _d === void 0 ? void 0 : _d.data) === null || _e === void 0 ? void 0 : _e.labels) || [];
|
|
36470
|
+
const values = ((_g = (_f = lineChartState === null || lineChartState === void 0 ? void 0 : lineChartState.bar_chart_data) === null || _f === void 0 ? void 0 : _f.data) === null || _g === void 0 ? void 0 : _g.values) || ((_k = (_j = (_h = lineChartState === null || lineChartState === void 0 ? void 0 : lineChartState.state) === null || _h === void 0 ? void 0 : _h.bar_chart_data) === null || _j === void 0 ? void 0 : _j.data) === null || _k === void 0 ? void 0 : _k.values) || [];
|
|
36471
|
+
const chartTitle = ((_l = lineChartState === null || lineChartState === void 0 ? void 0 : lineChartState.bar_chart_data) === null || _l === void 0 ? void 0 : _l.title) || ((_o = (_m = lineChartState === null || lineChartState === void 0 ? void 0 : lineChartState.state) === null || _m === void 0 ? void 0 : _m.bar_chart_data) === null || _o === void 0 ? void 0 : _o.title) || "";
|
|
36472
|
+
const units = ((_p = lineChartState === null || lineChartState === void 0 ? void 0 : lineChartState.bar_chart_data) === null || _p === void 0 ? void 0 : _p.units) || ((_r = (_q = lineChartState === null || lineChartState === void 0 ? void 0 : lineChartState.state) === null || _q === void 0 ? void 0 : _q.bar_chart_data) === null || _r === void 0 ? void 0 : _r.units) || "";
|
|
36473
|
+
values.length > 0 ? Math.max(...values) : 0;
|
|
36474
|
+
const isEmpty = labels.length === 0 || values.length === 0;
|
|
36475
|
+
const handleRefresh = async () => {
|
|
36476
|
+
if (query && widgetBackendUrl && widgetId) {
|
|
36477
|
+
await clearChat(widgetBackendUrl, widgetId);
|
|
36478
|
+
appendMessage(new TextMessage({
|
|
36479
|
+
content: `${query} and render data on a bar chart`,
|
|
36480
|
+
role: Role.User,
|
|
36481
|
+
}));
|
|
36482
|
+
}
|
|
36483
|
+
};
|
|
36484
|
+
React.useEffect(() => {
|
|
36485
|
+
if (isEmpty && query && isFirstLoad && !(lineChartState === null || lineChartState === void 0 ? void 0 : lineChartState.agent_message) && !hasCalledRef.current) {
|
|
36486
|
+
hasCalledRef.current = true;
|
|
36487
|
+
handleRefresh();
|
|
36488
|
+
}
|
|
36489
|
+
}, [isEmpty, query, isFirstLoad, lineChartState]);
|
|
36490
|
+
// Start timeout when chart is empty and loading
|
|
36491
|
+
React.useEffect(() => {
|
|
36492
|
+
if (isEmpty && startLoadingTimeout && !(lineChartState === null || lineChartState === void 0 ? void 0 : lineChartState.agent_message)) {
|
|
36493
|
+
startLoadingTimeout();
|
|
36494
|
+
}
|
|
36495
|
+
else if (!isEmpty && clearLoadingTimeout) {
|
|
36496
|
+
clearLoadingTimeout();
|
|
36497
|
+
}
|
|
36498
|
+
}, [isEmpty, startLoadingTimeout, clearLoadingTimeout]);
|
|
36499
|
+
const lineColor = React.useMemo(() => {
|
|
36500
|
+
return LINE_COLORS[Math.floor(Math.random() * LINE_COLORS.length)];
|
|
36501
|
+
}, [labels.length]);
|
|
36502
|
+
if (isEmpty) {
|
|
36503
|
+
return createLoadingComponent();
|
|
36504
|
+
}
|
|
36505
|
+
const transformedData = {
|
|
36506
|
+
labels: labels,
|
|
36507
|
+
datasets: [
|
|
36508
|
+
{
|
|
36509
|
+
label: chartTitle || "Data",
|
|
36510
|
+
data: values,
|
|
36511
|
+
borderColor: lineColor,
|
|
36512
|
+
backgroundColor: "rgba(96, 165, 250, 0.1)",
|
|
36513
|
+
borderWidth: 2,
|
|
36514
|
+
pointBackgroundColor: lineColor,
|
|
36515
|
+
pointBorderColor: lineColor,
|
|
36516
|
+
pointRadius: 4,
|
|
36517
|
+
fill: true,
|
|
36518
|
+
},
|
|
36519
|
+
],
|
|
36520
|
+
};
|
|
36521
|
+
return (jsxRuntimeExports.jsx(LineChart, { title: chartTitle, data: transformedData, units: units }));
|
|
36522
|
+
}
|
|
36265
36523
|
function DataGridComponent({ dataGridState, styles, appendMessage, query, isFirstLoad, widgetBackendUrl, widgetId, startLoadingTimeout, clearLoadingTimeout }) {
|
|
36266
36524
|
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
|
|
36267
36525
|
const hasCalledRef = React.useRef(false);
|
|
@@ -36349,7 +36607,7 @@ function SummaryComponent({ summaryState, styles, appendMessage, query, isFirstL
|
|
|
36349
36607
|
return (jsxRuntimeExports.jsx(SummaryWidget, { title: title, data: data, metadata: metadata, className: "" }));
|
|
36350
36608
|
}
|
|
36351
36609
|
function CopilotKitAgent({ widget, showHeader, styles, onResetReady, widgetIds, widgetBackendUrl, datasetId }) {
|
|
36352
|
-
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8, _9, _10, _11, _12, _13, _14, _15, _16, _17, _18;
|
|
36610
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8, _9, _10, _11, _12, _13, _14, _15, _16, _17, _18, _19, _20, _21, _22, _23, _24, _25, _26, _27, _28, _29, _30, _31;
|
|
36353
36611
|
const agentType = (_a = widget.config) === null || _a === void 0 ? void 0 : _a.agentType;
|
|
36354
36612
|
const orientation = (_b = widget.config) === null || _b === void 0 ? void 0 : _b.orientation;
|
|
36355
36613
|
const isFirstLoad = (_c = widget.config) === null || _c === void 0 ? void 0 : _c.isFirstLoad;
|
|
@@ -36358,8 +36616,6 @@ function CopilotKitAgent({ widget, showHeader, styles, onResetReady, widgetIds,
|
|
|
36358
36616
|
const [isTimeoutTriggered, setIsTimeoutTriggered] = React.useState(false);
|
|
36359
36617
|
const [apiCallCount, setApiCallCount] = React.useState(0);
|
|
36360
36618
|
const [hasTimeoutError, setHasTimeoutError] = React.useState(false);
|
|
36361
|
-
const [isAgentTriggered, setIsAgentTriggered] = React.useState(false);
|
|
36362
|
-
const pollingIntervalRef = React.useRef(null);
|
|
36363
36619
|
React.useEffect(() => {
|
|
36364
36620
|
setThreadId(widget.id);
|
|
36365
36621
|
}, [widget.id, setThreadId]);
|
|
@@ -36406,75 +36662,38 @@ function CopilotKitAgent({ widget, showHeader, styles, onResetReady, widgetIds,
|
|
|
36406
36662
|
timeoutRef.current = null;
|
|
36407
36663
|
}
|
|
36408
36664
|
}, []);
|
|
36409
|
-
// Function to
|
|
36410
|
-
|
|
36411
|
-
|
|
36412
|
-
if (!widgetBackendUrl || !((_a = widget.config) === null || _a === void 0 ? void 0 : _a.agentName))
|
|
36665
|
+
// Function to clear chat and reset chart state
|
|
36666
|
+
React.useCallback(async (widgetId) => {
|
|
36667
|
+
if (!widgetBackendUrl)
|
|
36413
36668
|
return;
|
|
36414
|
-
|
|
36415
|
-
|
|
36416
|
-
|
|
36417
|
-
|
|
36418
|
-
|
|
36419
|
-
|
|
36420
|
-
|
|
36421
|
-
|
|
36422
|
-
|
|
36423
|
-
|
|
36424
|
-
|
|
36425
|
-
|
|
36426
|
-
|
|
36427
|
-
|
|
36428
|
-
|
|
36429
|
-
|
|
36430
|
-
|
|
36431
|
-
|
|
36432
|
-
|
|
36433
|
-
|
|
36434
|
-
const agentName = ((_a = widget.config) === null || _a === void 0 ? void 0 : _a.agentName) || "adk-construction-project-agent";
|
|
36435
|
-
const apiResponse = await loadAgentState(widgetBackendUrl, widget.id, agentName);
|
|
36436
|
-
if (apiResponse && ((_c = (_b = apiResponse.data) === null || _b === void 0 ? void 0 : _b.loadAgentState) === null || _c === void 0 ? void 0 : _c.state)) {
|
|
36437
|
-
parseAndUpdateChartState(apiResponse, setChartState);
|
|
36438
|
-
setIsAgentTriggered(false);
|
|
36439
|
-
if (pollingIntervalRef.current) {
|
|
36440
|
-
clearInterval(pollingIntervalRef.current);
|
|
36441
|
-
pollingIntervalRef.current = null;
|
|
36442
|
-
}
|
|
36443
|
-
}
|
|
36444
|
-
};
|
|
36445
|
-
// Poll immediately
|
|
36446
|
-
pollForData();
|
|
36447
|
-
// Then poll every CHART_REFRESH_TIMEOUT
|
|
36448
|
-
pollingIntervalRef.current = setInterval(pollForData, CHART_REFRESH_TIMEOUT);
|
|
36449
|
-
// Set a maximum timeout to stop polling after 10 attempts
|
|
36450
|
-
setTimeout(() => {
|
|
36451
|
-
if (pollingIntervalRef.current) {
|
|
36452
|
-
clearInterval(pollingIntervalRef.current);
|
|
36453
|
-
pollingIntervalRef.current = null;
|
|
36454
|
-
setIsAgentTriggered(false);
|
|
36455
|
-
if (apiCallCount >= 10) {
|
|
36456
|
-
setHasTimeoutError(true);
|
|
36457
|
-
}
|
|
36458
|
-
}
|
|
36459
|
-
}, CHART_REFRESH_TIMEOUT * 10);
|
|
36460
|
-
}, [widgetBackendUrl, (_f = widget.config) === null || _f === void 0 ? void 0 : _f.agentName, widget.id, apiCallCount, setChartState]);
|
|
36461
|
-
// Clean up timeout and polling on unmount
|
|
36669
|
+
try {
|
|
36670
|
+
await fetch(`${widgetBackendUrl}/api/clear-chat`, {
|
|
36671
|
+
method: 'POST',
|
|
36672
|
+
headers: {
|
|
36673
|
+
'Content-Type': 'application/json',
|
|
36674
|
+
},
|
|
36675
|
+
body: JSON.stringify({
|
|
36676
|
+
session_id: widgetId,
|
|
36677
|
+
delete_state: true
|
|
36678
|
+
}),
|
|
36679
|
+
});
|
|
36680
|
+
setChartState(createInitialChartState(agentType || '', widgetIds, datasetId));
|
|
36681
|
+
setApiCallCount(0);
|
|
36682
|
+
setHasTimeoutError(false);
|
|
36683
|
+
}
|
|
36684
|
+
catch (error) {
|
|
36685
|
+
console.error('Failed to clear chat and state:', error);
|
|
36686
|
+
}
|
|
36687
|
+
}, [widgetBackendUrl, setChartState, agentType, widgetIds]);
|
|
36688
|
+
// Clean up timeout on unmount
|
|
36462
36689
|
React.useEffect(() => {
|
|
36463
36690
|
return () => {
|
|
36464
36691
|
if (timeoutRef.current) {
|
|
36465
36692
|
clearTimeout(timeoutRef.current);
|
|
36466
36693
|
}
|
|
36467
|
-
if (pollingIntervalRef.current) {
|
|
36468
|
-
clearInterval(pollingIntervalRef.current);
|
|
36469
|
-
}
|
|
36470
36694
|
};
|
|
36471
36695
|
}, []);
|
|
36472
|
-
const { appendMessage
|
|
36473
|
-
// Wrapper function for appendMessage that triggers polling
|
|
36474
|
-
const appendMessage = React.useCallback((message) => {
|
|
36475
|
-
startPollingForData();
|
|
36476
|
-
return originalAppendMessage(message);
|
|
36477
|
-
}, [originalAppendMessage, startPollingForData]);
|
|
36696
|
+
const { appendMessage, reset } = reactCore.useCopilotChat();
|
|
36478
36697
|
// Register the reset function with the parent component
|
|
36479
36698
|
React.useEffect(() => {
|
|
36480
36699
|
if (onResetReady && reset && widget.id) {
|
|
@@ -36488,7 +36707,8 @@ function CopilotKitAgent({ widget, showHeader, styles, onResetReady, widgetIds,
|
|
|
36488
36707
|
// Listen for triggerAgent events for this widget
|
|
36489
36708
|
React.useEffect(() => {
|
|
36490
36709
|
const handleTriggerAgent = (event) => {
|
|
36491
|
-
const { widgetId, query, agentType: eventAgentType } = event.detail;
|
|
36710
|
+
const { widgetId, query, agentType: eventAgentType, datasetId } = event.detail;
|
|
36711
|
+
console.log('event.detail==>', event.detail);
|
|
36492
36712
|
if (widgetId === widget.id) {
|
|
36493
36713
|
let messageContent = query;
|
|
36494
36714
|
// Customize message based on agent type
|
|
@@ -36513,6 +36733,8 @@ function CopilotKitAgent({ widget, showHeader, styles, onResetReady, widgetIds,
|
|
|
36513
36733
|
else if (eventAgentType === "Summary Agent") {
|
|
36514
36734
|
messageContent = `${query} and render the data on a summary widget`;
|
|
36515
36735
|
}
|
|
36736
|
+
console.log('triggering to datasetId==>', datasetId);
|
|
36737
|
+
setChartState(createInitialChartState(agentType || '', widgetIds, datasetId));
|
|
36516
36738
|
appendMessage(new TextMessage({
|
|
36517
36739
|
content: messageContent,
|
|
36518
36740
|
role: Role.User,
|
|
@@ -36536,16 +36758,17 @@ function CopilotKitAgent({ widget, showHeader, styles, onResetReady, widgetIds,
|
|
|
36536
36758
|
}, [widget.id, appendMessage, agentType, setChartState]);
|
|
36537
36759
|
return (jsxRuntimeExports.jsxs("div", { className: cn("flex flex-col h-full"), children: [showHeader && (jsxRuntimeExports.jsx("div", { className: "flex items-center justify-between pb-2 border-b", children: jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2", children: [jsxRuntimeExports.jsx(lucideReact.Bot, { className: "h-4 w-4" }), jsxRuntimeExports.jsx("h3", { className: "text-sm font-medium", children: widget.title })] }) })), jsxRuntimeExports.jsx("div", { className: "flex-1 h-full", children: (chartState === null || chartState === void 0 ? void 0 : chartState.agent_message) && agentType !== "chatbot" && (
|
|
36538
36760
|
// Check if data is empty based on agent type
|
|
36539
|
-
(agentType === "
|
|
36540
|
-
(agentType === "Series
|
|
36541
|
-
(agentType === "
|
|
36542
|
-
(agentType === "
|
|
36543
|
-
(agentType === "
|
|
36544
|
-
|
|
36545
|
-
|
|
36761
|
+
(agentType === "Bar Chart Agent" && (!((_h = (_g = (_f = chartState.bar_chart_data) === null || _f === void 0 ? void 0 : _f.data) === null || _g === void 0 ? void 0 : _g.labels) === null || _h === void 0 ? void 0 : _h.length) || !((_l = (_k = (_j = chartState.bar_chart_data) === null || _j === void 0 ? void 0 : _j.data) === null || _k === void 0 ? void 0 : _k.values) === null || _l === void 0 ? void 0 : _l.length))) ||
|
|
36762
|
+
(agentType === "Series Bar Chart Agent" && (!((_p = (_o = (_m = chartState.series_bar_chart_data) === null || _m === void 0 ? void 0 : _m.data) === null || _o === void 0 ? void 0 : _o.labels) === null || _p === void 0 ? void 0 : _p.length) || !((_s = (_r = (_q = chartState.series_bar_chart_data) === null || _q === void 0 ? void 0 : _q.data) === null || _r === void 0 ? void 0 : _r.series) === null || _s === void 0 ? void 0 : _s.length))) ||
|
|
36763
|
+
(agentType === "Series Line Chart Agent" && (!((_v = (_u = (_t = chartState.series_bar_chart_data) === null || _t === void 0 ? void 0 : _t.data) === null || _u === void 0 ? void 0 : _u.labels) === null || _v === void 0 ? void 0 : _v.length) || !((_y = (_x = (_w = chartState.series_bar_chart_data) === null || _w === void 0 ? void 0 : _w.data) === null || _x === void 0 ? void 0 : _x.series) === null || _y === void 0 ? void 0 : _y.length))) ||
|
|
36764
|
+
(agentType === "Pie Chart Agent" && (!((_1 = (_0 = (_z = chartState.pie_chart_data) === null || _z === void 0 ? void 0 : _z.data) === null || _0 === void 0 ? void 0 : _0.labels) === null || _1 === void 0 ? void 0 : _1.length) || !((_4 = (_3 = (_2 = chartState.pie_chart_data) === null || _2 === void 0 ? void 0 : _2.data) === null || _3 === void 0 ? void 0 : _3.values) === null || _4 === void 0 ? void 0 : _4.length))) ||
|
|
36765
|
+
(agentType === "Line Chart Agent" && (!((_7 = (_6 = (_5 = chartState.bar_chart_data) === null || _5 === void 0 ? void 0 : _5.data) === null || _6 === void 0 ? void 0 : _6.labels) === null || _7 === void 0 ? void 0 : _7.length) || !((_10 = (_9 = (_8 = chartState.bar_chart_data) === null || _8 === void 0 ? void 0 : _8.data) === null || _9 === void 0 ? void 0 : _9.values) === null || _10 === void 0 ? void 0 : _10.length))) ||
|
|
36766
|
+
(agentType === "Data Grid Agent" && (!((_13 = (_12 = (_11 = chartState.matrix_grid_data) === null || _11 === void 0 ? void 0 : _11.data) === null || _12 === void 0 ? void 0 : _12.headers) === null || _13 === void 0 ? void 0 : _13.length) || !((_16 = (_15 = (_14 = chartState.matrix_grid_data) === null || _14 === void 0 ? void 0 : _14.data) === null || _15 === void 0 ? void 0 : _15.rows) === null || _16 === void 0 ? void 0 : _16.length))) ||
|
|
36767
|
+
(agentType === "Summary Agent" && (!((_18 = (_17 = chartState.summary_data) === null || _17 === void 0 ? void 0 : _17.data) === null || _18 === void 0 ? void 0 : _18.content) || ((_21 = (_20 = (_19 = chartState.summary_data) === null || _19 === void 0 ? void 0 : _19.data) === null || _20 === void 0 ? void 0 : _20.content) === null || _21 === void 0 ? void 0 : _21.trim()) === ""))) ? (jsxRuntimeExports.jsx("div", { className: "flex items-center justify-center h-full p-4", children: jsxRuntimeExports.jsx("div", { className: "text-center max-w-md", children: jsxRuntimeExports.jsx("p", { className: "text-sm text-gray-700", children: chartState.agent_message }) }) })) : agentType === "Bar Chart Agent" ? (jsxRuntimeExports.jsx(BarChartComponent, { barChartState: chartState, styles: styles, orientation: orientation, appendMessage: appendMessage, query: (_22 = widget.config) === null || _22 === void 0 ? void 0 : _22.query, isFirstLoad: isFirstLoad, widgetBackendUrl: widgetBackendUrl, widgetId: widget.id, startLoadingTimeout: startLoadingTimeout, clearLoadingTimeout: clearLoadingTimeout })) : agentType === "Series Bar Chart Agent" ? (jsxRuntimeExports.jsx(SeriesBarChartComponent, { seriesBarChartState: chartState, styles: styles, orientation: orientation, appendMessage: appendMessage, query: (_23 = widget.config) === null || _23 === void 0 ? void 0 : _23.query, isFirstLoad: isFirstLoad, widgetBackendUrl: widgetBackendUrl, widgetId: widget.id, startLoadingTimeout: startLoadingTimeout, clearLoadingTimeout: clearLoadingTimeout })) : agentType === "Series Line Chart Agent" ? (jsxRuntimeExports.jsx(SeriesLineChartComponent, { seriesLineChartState: chartState, styles: styles, orientation: orientation, appendMessage: appendMessage, query: (_24 = widget.config) === null || _24 === void 0 ? void 0 : _24.query, isFirstLoad: isFirstLoad, widgetBackendUrl: widgetBackendUrl, widgetId: widget.id, startLoadingTimeout: startLoadingTimeout, clearLoadingTimeout: clearLoadingTimeout })) : agentType === "Pie Chart Agent" ? (jsxRuntimeExports.jsx(PieChartComponent, { pieChartState: chartState, styles: styles, appendMessage: appendMessage, query: (_25 = widget.config) === null || _25 === void 0 ? void 0 : _25.query, isFirstLoad: isFirstLoad, widgetBackendUrl: widgetBackendUrl, widgetId: widget.id, startLoadingTimeout: startLoadingTimeout, clearLoadingTimeout: clearLoadingTimeout })) : agentType === "Line Chart Agent" ? (jsxRuntimeExports.jsx(LineChartComponent, { lineChartState: chartState, styles: styles, appendMessage: appendMessage, query: (_26 = widget.config) === null || _26 === void 0 ? void 0 : _26.query, isFirstLoad: isFirstLoad, widgetBackendUrl: widgetBackendUrl, widgetId: widget.id, startLoadingTimeout: startLoadingTimeout, clearLoadingTimeout: clearLoadingTimeout })) : agentType === "Data Grid Agent" ? (jsxRuntimeExports.jsx(DataGridComponent, { dataGridState: chartState, styles: styles, appendMessage: appendMessage, query: (_27 = widget.config) === null || _27 === void 0 ? void 0 : _27.query, isFirstLoad: isFirstLoad, widgetBackendUrl: widgetBackendUrl, widgetId: widget.id, startLoadingTimeout: startLoadingTimeout, clearLoadingTimeout: clearLoadingTimeout })) : agentType === "Summary Agent" ? (jsxRuntimeExports.jsx(SummaryComponent, { summaryState: chartState, styles: styles, appendMessage: appendMessage, query: (_28 = widget.config) === null || _28 === void 0 ? void 0 : _28.query, isFirstLoad: isFirstLoad, widgetBackendUrl: widgetBackendUrl, widgetId: widget.id, widget_ids: widgetIds, startLoadingTimeout: startLoadingTimeout, clearLoadingTimeout: clearLoadingTimeout, setChartState: setChartState })) : (jsxRuntimeExports.jsx(reactUi.CopilotChat, { className: "h-full text-xs [&_.copilot-chat-message]:text-xs [&_.copilot-chat-input]:text-xs", labels: {
|
|
36768
|
+
title: ((_29 = widget.config) === null || _29 === void 0 ? void 0 : _29.copilotTitle) || widget.title,
|
|
36769
|
+
initial: ((_30 = widget.config) === null || _30 === void 0 ? void 0 : _30.copilotInitialMessage) || ((_31 = widget.config) === null || _31 === void 0 ? void 0 : _31.placeholder) || "How can I help you today?"
|
|
36546
36770
|
}, onSubmitMessage: () => {
|
|
36547
36771
|
setChartState(prevState => (Object.assign(Object.assign({}, prevState), { widget_ids: widgetIds, dataset_id: datasetId })));
|
|
36548
|
-
startPollingForData();
|
|
36549
36772
|
} })) })] }));
|
|
36550
36773
|
}
|
|
36551
36774
|
function AgentWidget({ widget, showHeader = true, widgetBackendUrl, onResetReady, widgetIds, datasetId, }) {
|
|
@@ -36896,7 +37119,8 @@ function WidgetDashboard({ pageId, isEditing, selectedWidget = null, onWidgetSel
|
|
|
36896
37119
|
detail: {
|
|
36897
37120
|
widgetId: editingWidget.id,
|
|
36898
37121
|
query: newQuery,
|
|
36899
|
-
agentType: (_a = editingWidget.config) === null || _a === void 0 ? void 0 : _a.agentType
|
|
37122
|
+
agentType: (_a = editingWidget.config) === null || _a === void 0 ? void 0 : _a.agentType,
|
|
37123
|
+
datasetId: datasetId
|
|
36900
37124
|
}
|
|
36901
37125
|
});
|
|
36902
37126
|
window.dispatchEvent(event);
|