dp-widgets-framework 1.2.8 → 1.3.0

package/dist/index.esm.js

@@ -16,6 +16,7 @@ import { WidthProvider, Responsive } from 'react-grid-layout';
 import { v4 } from 'uuid';
 import { CopilotKit, useCopilotContext, useCoAgent, useCopilotChat } from '@copilotkit/react-core';
 import { CopilotChat } from '@copilotkit/react-ui';
+import ChartDataLabels from 'chartjs-plugin-datalabels';
 import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
 import * as DialogPrimitive from '@radix-ui/react-dialog';
 
@@ -15038,7 +15039,8 @@ const Bar = /* #__PURE__ */ createTypedChart('bar', BarController);
 const Pie = /* #__PURE__ */ createTypedChart('pie', PieController);
 
 Chart$1.register(CategoryScale, LinearScale, BarElement, plugin_title, plugin_tooltip, plugin_legend);
-function BarChart({ orientation, title, data, options, className, units }) {
+function BarChart({ orientation, title, data, options, className, units, content }) {
+    var _a;
     const formatValue = (value) => {
         const numValue = typeof value === 'string' ? parseFloat(value) : value;
         if (units === '$' && !isNaN(numValue)) {
@@ -15067,6 +15069,12 @@ function BarChart({ orientation, title, data, options, className, units }) {
                 },
                 position: "bottom"
             },
+            datalabels: {
+                display: (_a = content === null || content === void 0 ? void 0 : content.showLabels) !== null && _a !== void 0 ? _a : false,
+                color: "white",
+                font: { size: 12 },
+                formatter: (value) => value,
+            },
             title: {
                 display: true,
                 text: title,
@@ -15106,11 +15114,12 @@ function BarChart({ orientation, title, data, options, className, units }) {
             },
         },
     };
-    return (jsxRuntimeExports.jsx(Bar, { data: data, options: options !== null && options !== void 0 ? options : defaultOptions }));
+    return (jsxRuntimeExports.jsx(Bar, { data: data, options: options !== null && options !== void 0 ? options : defaultOptions, plugins: [ChartDataLabels] }));
 }
 
 Chart$1.register(CategoryScale, LinearScale, BarElement, plugin_title, plugin_tooltip, plugin_legend);
-function SeriesChart({ orientation, title, data, options, className, units }) {
+function SeriesChart({ orientation, title, data, options, className, units, content }) {
+    var _a;
     const formatValue = (value) => {
         const numValue = typeof value === 'string' ? parseFloat(value) : value;
         if (units === '$' && !isNaN(numValue)) {
@@ -15139,6 +15148,12 @@ function SeriesChart({ orientation, title, data, options, className, units }) {
                 },
                 position: "bottom"
             },
+            datalabels: {
+                display: (_a = content === null || content === void 0 ? void 0 : content.showLabels) !== null && _a !== void 0 ? _a : false,
+                color: "white",
+                font: { size: 12 },
+                formatter: (value) => value,
+            },
             title: {
                 display: true,
                 text: title,
@@ -15174,11 +15189,12 @@ function SeriesChart({ orientation, title, data, options, className, units }) {
             },
         },
     };
-    return (jsxRuntimeExports.jsx(Bar, { data: data, options: options !== null && options !== void 0 ? options : defaultOptions }));
+    return (jsxRuntimeExports.jsx(Bar, { data: data, options: options !== null && options !== void 0 ? options : defaultOptions, plugins: [ChartDataLabels] }));
 }
 
 Chart$1.register(CategoryScale, LinearScale, PointElement, LineElement, plugin_title, plugin_tooltip, plugin_legend);
-function SeriesLineChart({ orientation, title, data, options, className, units }) {
+function SeriesLineChart({ orientation, title, data, options, className, units, content }) {
+    var _a;
     const formatValue = (value) => {
         const numValue = typeof value === 'string' ? parseFloat(value) : value;
         if (units === '$' && !isNaN(numValue)) {
@@ -15206,6 +15222,19 @@ function SeriesLineChart({ orientation, title, data, options, className, units }
                 },
                 position: "bottom"
             },
+            datalabels: {
+                display: (_a = content === null || content === void 0 ? void 0 : content.showLabels) !== null && _a !== void 0 ? _a : false,
+                color: "#0F172A",
+                font: { size: 12 },
+                offset: 6,
+                anchor: "end",
+                backgroundColor: "#f1f1f1",
+                borderRadius: 3,
+                align: (context) => {
+                    return context.dataIndex % 2 === 0 ? "top" : "bottom";
+                },
+                formatter: (value) => value,
+            },
             title: {
                 display: true,
                 text: title,
@@ -15246,12 +15275,13 @@ function SeriesLineChart({ orientation, title, data, options, className, units }
             },
         },
     };
-    return (jsxRuntimeExports.jsx(Line, { data: data, options: options !== null && options !== void 0 ? options : defaultOptions }));
+    return (jsxRuntimeExports.jsx(Line, { data: data, options: options !== null && options !== void 0 ? options : defaultOptions, plugins: [ChartDataLabels] }));
 }
 
 Chart$1.register(ArcElement, plugin_tooltip, plugin_legend);
 const PieChart = (props) => {
-    const { data, title, options, units } = props;
+    var _a;
+    const { data, title, options, units, content } = props;
     const formatValue = (value) => {
         const numValue = typeof value === 'string' ? parseFloat(value) : value;
         if (units === '$' && !isNaN(numValue)) {
@@ -15270,6 +15300,12 @@ const PieChart = (props) => {
                 },
                 position: "bottom",
             },
+            datalabels: {
+                display: (_a = content === null || content === void 0 ? void 0 : content.showLabels) !== null && _a !== void 0 ? _a : false,
+                color: "white",
+                font: { size: 12 },
+                formatter: (value) => value,
+            },
             title: {
                 display: true,
                 text: title,
@@ -15297,11 +15333,12 @@ const PieChart = (props) => {
             },
         },
     };
-    return jsxRuntimeExports.jsx(Pie, { data: data, options: options !== null && options !== void 0 ? options : defaultOptions });
+    return jsxRuntimeExports.jsx(Pie, { data: data, options: options !== null && options !== void 0 ? options : defaultOptions, plugins: [ChartDataLabels] });
 };
 
 Chart$1.register(CategoryScale, LinearScale, PointElement, LineElement, plugin_title, plugin_tooltip, plugin_legend);
-function LineChart({ title, data, options, className, units }) {
+function LineChart({ title, data, options, className, units, content }) {
+    var _a;
     const formatValue = (value) => {
         const numValue = typeof value === 'string' ? parseFloat(value) : value;
         if (units === '$' && !isNaN(numValue)) {
@@ -15329,6 +15366,19 @@ function LineChart({ title, data, options, className, units }) {
                 },
                 position: "bottom"
             },
+            datalabels: {
+                display: (_a = content === null || content === void 0 ? void 0 : content.showLabels) !== null && _a !== void 0 ? _a : false,
+                color: "#0F172A",
+                font: { size: 12 },
+                offset: 6,
+                anchor: "end",
+                backgroundColor: "#f1f1f1",
+                borderRadius: 3,
+                align: (context) => {
+                    return context.dataIndex % 2 === 0 ? "top" : "bottom";
+                },
+                formatter: (value) => value,
+            },
             title: {
                 display: true,
                 text: title,
@@ -15361,7 +15411,7 @@ function LineChart({ title, data, options, className, units }) {
             },
         },
     };
-    return (jsxRuntimeExports.jsx(Line, { data: data, options: options !== null && options !== void 0 ? options : defaultOptions }));
+    return (jsxRuntimeExports.jsx(Line, { data: data, options: options !== null && options !== void 0 ? options : defaultOptions, plugins: [ChartDataLabels] }));
 }
 
 function DataGrid({ title, data, className }) {
@@ -36269,7 +36319,7 @@ const getStyleValues$1 = (styles = {}) => {
         textAlign: alignment,
     };
 };
-function BarChartComponent({ orientation, barChartState, styles, appendMessage, query, isFirstLoad, widgetBackendUrl, widgetId, startLoadingTimeout, clearLoadingTimeout }) {
+function BarChartComponent({ orientation, barChartState, styles, appendMessage, query, isFirstLoad, widgetBackendUrl, widgetId, startLoadingTimeout, clearLoadingTimeout, content }) {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
     const hasCalledRef = useRef(false);
     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) || [];
@@ -36319,9 +36369,9 @@ function BarChartComponent({ orientation, barChartState, styles, appendMessage,
             },
         ],
     };
-    return (jsxRuntimeExports.jsx(BarChart, { orientation: orientation, title: chartTitle, data: transformedData, units: units }));
+    return (jsxRuntimeExports.jsx(BarChart, { orientation: orientation, title: chartTitle, data: transformedData, units: units, content: content }));
 }
-function SeriesBarChartComponent({ orientation, seriesBarChartState, styles, appendMessage, query, isFirstLoad, widgetBackendUrl, widgetId, startLoadingTimeout, clearLoadingTimeout }) {
+function SeriesBarChartComponent({ orientation, seriesBarChartState, styles, appendMessage, query, isFirstLoad, widgetBackendUrl, widgetId, startLoadingTimeout, clearLoadingTimeout, content }) {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
     const hasCalledRef = useRef(false);
     const labels = ((_b = (_a = seriesBarChartState === null || seriesBarChartState === void 0 ? void 0 : seriesBarChartState.series_bar_chart_data) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.labels) || ((_e = (_d = (_c = seriesBarChartState === null || seriesBarChartState === void 0 ? void 0 : seriesBarChartState.state) === null || _c === void 0 ? void 0 : _c.series_bar_chart_data) === null || _d === void 0 ? void 0 : _d.data) === null || _e === void 0 ? void 0 : _e.labels) || [];
@@ -36367,12 +36417,12 @@ function SeriesBarChartComponent({ orientation, seriesBarChartState, styles, app
         datasets: series.map((seriesItem, index) => ({
             label: seriesItem.name,
             data: seriesItem.values,
-            backgroundColor: seriesItem.color || finalColors[index % finalColors.length],
+            backgroundColor: (seriesItem === null || seriesItem === void 0 ? void 0 : seriesItem.colors) || (seriesItem === null || seriesItem === void 0 ? void 0 : seriesItem.color) || finalColors[index % finalColors.length],
         })),
     };
-    return (jsxRuntimeExports.jsx(SeriesChart, { orientation: orientation, title: chartTitle, data: transformedData, units: units }));
+    return (jsxRuntimeExports.jsx(SeriesChart, { orientation: orientation, title: chartTitle, data: transformedData, units: units, content: content }));
 }
-function SeriesLineChartComponent({ orientation, seriesLineChartState, styles, appendMessage, query, isFirstLoad, widgetBackendUrl, widgetId, startLoadingTimeout, clearLoadingTimeout }) {
+function SeriesLineChartComponent({ orientation, seriesLineChartState, styles, appendMessage, content, query, isFirstLoad, widgetBackendUrl, widgetId, startLoadingTimeout, clearLoadingTimeout }) {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
     const hasCalledRef = useRef(false);
     const labels = ((_b = (_a = seriesLineChartState === null || seriesLineChartState === void 0 ? void 0 : seriesLineChartState.series_bar_chart_data) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.labels) || ((_e = (_d = (_c = seriesLineChartState === null || seriesLineChartState === void 0 ? void 0 : seriesLineChartState.state) === null || _c === void 0 ? void 0 : _c.series_bar_chart_data) === null || _d === void 0 ? void 0 : _d.data) === null || _e === void 0 ? void 0 : _e.labels) || [];
@@ -36428,9 +36478,9 @@ function SeriesLineChartComponent({ orientation, seriesLineChartState, styles, a
             tension: 0.1,
         })),
     };
-    return (jsxRuntimeExports.jsx(SeriesLineChart, { orientation: orientation, title: chartTitle, data: transformedData, units: units }));
+    return (jsxRuntimeExports.jsx(SeriesLineChart, { orientation: orientation, title: chartTitle, data: transformedData, units: units, content: content }));
 }
-function PieChartComponent({ pieChartState, styles, appendMessage, query, isFirstLoad, widgetBackendUrl, widgetId, startLoadingTimeout, clearLoadingTimeout }) {
+function PieChartComponent({ pieChartState, styles, appendMessage, query, isFirstLoad, widgetBackendUrl, widgetId, startLoadingTimeout, clearLoadingTimeout, content }) {
     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;
     const hasCalledRef = useRef(false);
     const labels = ((_b = (_a = pieChartState === null || pieChartState === void 0 ? void 0 : pieChartState.pie_chart_data) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.labels) || ((_e = (_d = (_c = pieChartState === null || pieChartState === void 0 ? void 0 : pieChartState.state) === null || _c === void 0 ? void 0 : _c.pie_chart_data) === null || _d === void 0 ? void 0 : _d.data) === null || _e === void 0 ? void 0 : _e.labels) || [];
@@ -36484,9 +36534,9 @@ function PieChartComponent({ pieChartState, styles, appendMessage, query, isFirs
             },
         ],
     };
-    return (jsxRuntimeExports.jsx(PieChart, { title: chartTitle, data: transformedData, units: units }));
+    return (jsxRuntimeExports.jsx(PieChart, { title: chartTitle, data: transformedData, units: units, content: content }));
 }
-function LineChartComponent({ lineChartState, styles, appendMessage, query, isFirstLoad, widgetBackendUrl, widgetId, startLoadingTimeout, clearLoadingTimeout }) {
+function LineChartComponent({ lineChartState, styles, appendMessage, query, isFirstLoad, widgetBackendUrl, widgetId, startLoadingTimeout, clearLoadingTimeout, content }) {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
     const hasCalledRef = useRef(false);
     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) || [];
@@ -36541,7 +36591,7 @@ function LineChartComponent({ lineChartState, styles, appendMessage, query, isFi
             },
         ],
     };
-    return (jsxRuntimeExports.jsx(LineChart, { title: chartTitle, data: transformedData, units: units }));
+    return (jsxRuntimeExports.jsx(LineChart, { title: chartTitle, data: transformedData, units: units, content: content }));
 }
 function DataGridComponent({ dataGridState, styles, appendMessage, query, isFirstLoad, widgetBackendUrl, widgetId, startLoadingTimeout, clearLoadingTimeout }) {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u;
@@ -36632,10 +36682,11 @@ function SummaryComponent({ summaryState, styles, appendMessage, query, isFirstL
     return (jsxRuntimeExports.jsx(SummaryWidget, { title: title, data: data, metadata: metadata, className: "" }));
 }
 function CopilotKitAgent({ widget, showHeader, styles, onResetReady, widgetIds, widgetBackendUrl, datasetId }) {
-    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;
+    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, _32;
     const agentType = (_a = widget.config) === null || _a === void 0 ? void 0 : _a.agentType;
     const orientation = (_b = widget.config) === null || _b === void 0 ? void 0 : _b.orientation;
     const isFirstLoad = (_c = widget.config) === null || _c === void 0 ? void 0 : _c.isFirstLoad;
+    const content = (_d = widget.config) === null || _d === void 0 ? void 0 : _d.content;
     const { threadId, setThreadId } = useCopilotContext();
     const timeoutRef = useRef(null);
     const [isTimeoutTriggered, setIsTimeoutTriggered] = useState(false);
@@ -36645,7 +36696,7 @@ function CopilotKitAgent({ widget, showHeader, styles, onResetReady, widgetIds,
         setThreadId(widget.id);
     }, [widget.id, setThreadId]);
     const { state: chartState, setState: setChartState } = useCoAgent({
-        name: (_d = widget.config) === null || _d === void 0 ? void 0 : _d.agentName,
+        name: (_e = widget.config) === null || _e === void 0 ? void 0 : _e.agentName,
         initialState: createInitialChartState(agentType || '', widgetIds, datasetId),
     });
     // Function to handle timeout and call loadAgentState API
@@ -36669,7 +36720,7 @@ function CopilotKitAgent({ widget, showHeader, styles, onResetReady, widgetIds,
         if (apiResponse && !(chartState === null || chartState === void 0 ? void 0 : chartState.agent_message)) {
             parseAndUpdateChartState(apiResponse, setChartState);
         }
-    }, [widgetBackendUrl, widget.id, isTimeoutTriggered, setChartState, (_e = widget.config) === null || _e === void 0 ? void 0 : _e.agentName, chartState, apiCallCount, hasTimeoutError]);
+    }, [widgetBackendUrl, widget.id, isTimeoutTriggered, setChartState, (_f = widget.config) === null || _f === void 0 ? void 0 : _f.agentName, chartState, apiCallCount, hasTimeoutError]);
     // Function to start timeout
     const startLoadingTimeout = useCallback(() => {
         if (timeoutRef.current) {
@@ -36783,15 +36834,15 @@ function CopilotKitAgent({ widget, showHeader, styles, onResetReady, widgetIds,
     }, [widget.id, appendMessage, agentType, setChartState]);
     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" && (
                 // Check if data is empty based on agent type
-                (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))) ||
-                    (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))) ||
-                    (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))) ||
-                    (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))) ||
-                    (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))) ||
-                    (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))) ||
-                    (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: {
-                        title: ((_29 = widget.config) === null || _29 === void 0 ? void 0 : _29.copilotTitle) || widget.title,
-                        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?"
+                (agentType === "Bar Chart Agent" && (!((_j = (_h = (_g = chartState.bar_chart_data) === null || _g === void 0 ? void 0 : _g.data) === null || _h === void 0 ? void 0 : _h.labels) === null || _j === void 0 ? void 0 : _j.length) || !((_m = (_l = (_k = chartState.bar_chart_data) === null || _k === void 0 ? void 0 : _k.data) === null || _l === void 0 ? void 0 : _l.values) === null || _m === void 0 ? void 0 : _m.length))) ||
+                    (agentType === "Series Bar Chart Agent" && (!((_q = (_p = (_o = chartState.series_bar_chart_data) === null || _o === void 0 ? void 0 : _o.data) === null || _p === void 0 ? void 0 : _p.labels) === null || _q === void 0 ? void 0 : _q.length) || !((_t = (_s = (_r = chartState.series_bar_chart_data) === null || _r === void 0 ? void 0 : _r.data) === null || _s === void 0 ? void 0 : _s.series) === null || _t === void 0 ? void 0 : _t.length))) ||
+                    (agentType === "Series Line Chart Agent" && (!((_w = (_v = (_u = chartState.series_bar_chart_data) === null || _u === void 0 ? void 0 : _u.data) === null || _v === void 0 ? void 0 : _v.labels) === null || _w === void 0 ? void 0 : _w.length) || !((_z = (_y = (_x = chartState.series_bar_chart_data) === null || _x === void 0 ? void 0 : _x.data) === null || _y === void 0 ? void 0 : _y.series) === null || _z === void 0 ? void 0 : _z.length))) ||
+                    (agentType === "Pie Chart Agent" && (!((_2 = (_1 = (_0 = chartState.pie_chart_data) === null || _0 === void 0 ? void 0 : _0.data) === null || _1 === void 0 ? void 0 : _1.labels) === null || _2 === void 0 ? void 0 : _2.length) || !((_5 = (_4 = (_3 = chartState.pie_chart_data) === null || _3 === void 0 ? void 0 : _3.data) === null || _4 === void 0 ? void 0 : _4.values) === null || _5 === void 0 ? void 0 : _5.length))) ||
+                    (agentType === "Line Chart Agent" && (!((_8 = (_7 = (_6 = chartState.bar_chart_data) === null || _6 === void 0 ? void 0 : _6.data) === null || _7 === void 0 ? void 0 : _7.labels) === null || _8 === void 0 ? void 0 : _8.length) || !((_11 = (_10 = (_9 = chartState.bar_chart_data) === null || _9 === void 0 ? void 0 : _9.data) === null || _10 === void 0 ? void 0 : _10.values) === null || _11 === void 0 ? void 0 : _11.length))) ||
+                    (agentType === "Data Grid Agent" && (!((_14 = (_13 = (_12 = chartState.matrix_grid_data) === null || _12 === void 0 ? void 0 : _12.data) === null || _13 === void 0 ? void 0 : _13.headers) === null || _14 === void 0 ? void 0 : _14.length) || !((_17 = (_16 = (_15 = chartState.matrix_grid_data) === null || _15 === void 0 ? void 0 : _15.data) === null || _16 === void 0 ? void 0 : _16.rows) === null || _17 === void 0 ? void 0 : _17.length))) ||
+                    (agentType === "Summary Agent" && (!((_19 = (_18 = chartState.summary_data) === null || _18 === void 0 ? void 0 : _18.data) === null || _19 === void 0 ? void 0 : _19.content) || ((_22 = (_21 = (_20 = chartState.summary_data) === null || _20 === void 0 ? void 0 : _20.data) === null || _21 === void 0 ? void 0 : _21.content) === null || _22 === void 0 ? void 0 : _22.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, content: content, 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 Bar Chart Agent" ? (jsxRuntimeExports.jsx(SeriesBarChartComponent, { seriesBarChartState: chartState, styles: styles, orientation: orientation, content: content, 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 === "Series Line Chart Agent" ? (jsxRuntimeExports.jsx(SeriesLineChartComponent, { seriesLineChartState: chartState, styles: styles, orientation: orientation, content: content, 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 === "Pie Chart Agent" ? (jsxRuntimeExports.jsx(PieChartComponent, { pieChartState: chartState, styles: styles, appendMessage: appendMessage, content: content, query: (_26 = widget.config) === null || _26 === void 0 ? void 0 : _26.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, content: content, query: (_27 = widget.config) === null || _27 === void 0 ? void 0 : _27.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: (_28 = widget.config) === null || _28 === void 0 ? void 0 : _28.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: (_29 = widget.config) === null || _29 === void 0 ? void 0 : _29.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: {
+                        title: ((_30 = widget.config) === null || _30 === void 0 ? void 0 : _30.copilotTitle) || widget.title,
+                        initial: ((_31 = widget.config) === null || _31 === void 0 ? void 0 : _31.copilotInitialMessage) || ((_32 = widget.config) === null || _32 === void 0 ? void 0 : _32.placeholder) || "How can I help you today?"
                     }, onSubmitMessage: () => {
                         setChartState(prevState => (Object.assign(Object.assign({}, prevState), { widget_ids: widgetIds, dataset_id: datasetId })));
                     } })) })] }));
@@ -36922,11 +36973,14 @@ function Modal({ isOpen, onClose, title, children, size = 'md', initialFocusRef,
 }
 
 function EditWidgetDialog({ editingWidget, setWidgets, initialText, isOpen, onClose, onSubmit }) {
+    var _a;
+    const agentType = (_a = editingWidget === null || editingWidget === void 0 ? void 0 : editingWidget.config) === null || _a === void 0 ? void 0 : _a.agentType;
     const [query, setQuery] = useState("");
     const [displayText, setDisplayText] = useState("");
     const [blockType, setBlockType] = useState("");
     const [alignment, setAlignment] = useState("");
     const [divider, setDivider] = useState("no");
+    const [showLabels, setShowLabels] = useState(false);
     const [styles, setStyles] = useState("");
     useEffect(() => {
         setQuery(initialText);
@@ -36951,10 +37005,14 @@ function EditWidgetDialog({ editingWidget, setWidgets, initialText, isOpen, onCl
         if (hasDivider === null || hasDivider === void 0 ? void 0 : hasDivider.length) {
             setDivider(hasDivider);
         }
+        const hasShowLabel = content === null || content === void 0 ? void 0 : content.showLabels;
+        if (hasShowLabel !== undefined) {
+            setShowLabels(hasShowLabel);
+        }
     }, [editingWidget]);
     const handleSubmit = () => {
         if (onSubmit && query.trim()) {
-            onSubmit(query);
+            onSubmit(query, showLabels);
         }
         if (editingWidget.type === 'text') {
             const widgetId = editingWidget === null || editingWidget === void 0 ? void 0 : editingWidget.id;
@@ -36976,10 +37034,10 @@ function EditWidgetDialog({ editingWidget, setWidgets, initialText, isOpen, onCl
         return null;
     return (jsxRuntimeExports.jsx(Modal, { isOpen: isOpen, onClose: onClose, title: "Edit Widget", size: "lg", 
         // initialFocusRef={inputRef}
-        noOverflowHidden: true, children: jsxRuntimeExports.jsxs("div", { children: [jsxRuntimeExports.jsx("p", { className: "text-gray-700", children: "Customize the widget\u2019s appearance" }), jsxRuntimeExports.jsx("div", { className: "pt-7", children: (editingWidget === null || editingWidget === void 0 ? void 0 : editingWidget.type) === "text" ?
-                        jsxRuntimeExports.jsxs("div", { className: "flex flex-col gap-5", children: [jsxRuntimeExports.jsxs("div", { className: "flex flex-col gap-2", children: [jsxRuntimeExports.jsx("div", { className: "font-semibold", children: "Display text:" }), jsxRuntimeExports.jsx(Input, { value: displayText, onChange: (e) => setDisplayText(e.target.value), className: "h-8" })] }), jsxRuntimeExports.jsxs("div", { className: "flex flex-col gap-2", children: [jsxRuntimeExports.jsx("div", { className: "font-semibold", children: "Block type:" }), jsxRuntimeExports.jsxs(Select, { value: blockType, onValueChange: (value) => setBlockType(value), children: [jsxRuntimeExports.jsx(SelectTrigger, { className: "h-8", children: jsxRuntimeExports.jsx(SelectValue, { placeholder: "Select block type" }) }), jsxRuntimeExports.jsxs(SelectContent, { children: [jsxRuntimeExports.jsx(SelectItem, { value: "heading-1", children: "Heading 1" }), jsxRuntimeExports.jsx(SelectItem, { value: "heading-2", children: "Heading 2" }), jsxRuntimeExports.jsx(SelectItem, { value: "heading-3", children: "Heading 3" }), jsxRuntimeExports.jsx(SelectItem, { value: "paragraph", children: "Paragraph" })] })] })] }), jsxRuntimeExports.jsxs("div", { className: "flex flex-col gap-2", children: [jsxRuntimeExports.jsx("div", { className: "font-semibold", children: "Align:" }), jsxRuntimeExports.jsxs(Select, { value: alignment, onValueChange: (value) => setAlignment(value), children: [jsxRuntimeExports.jsx(SelectTrigger, { className: "h-8", children: jsxRuntimeExports.jsx(SelectValue, { placeholder: "Select block type" }) }), jsxRuntimeExports.jsxs(SelectContent, { children: [jsxRuntimeExports.jsx(SelectItem, { value: "left", children: "Left" }), jsxRuntimeExports.jsx(SelectItem, { value: "center", children: "Center" }), jsxRuntimeExports.jsx(SelectItem, { value: "right", children: "Right" }), jsxRuntimeExports.jsx(SelectItem, { value: "justify", children: "Justify" })] })] })] }), jsxRuntimeExports.jsxs("div", { className: "flex flex-col gap-2", children: [jsxRuntimeExports.jsx("div", { className: "font-semibold", children: "Divider:" }), jsxRuntimeExports.jsxs(Select, { value: divider, onValueChange: (value) => setDivider(value), children: [jsxRuntimeExports.jsx(SelectTrigger, { className: "h-8", children: jsxRuntimeExports.jsx(SelectValue, { placeholder: "No" }) }), jsxRuntimeExports.jsxs(SelectContent, { children: [jsxRuntimeExports.jsx(SelectItem, { value: "yes", children: "Yes" }), jsxRuntimeExports.jsx(SelectItem, { value: "no", children: "No" })] })] })] }), jsxRuntimeExports.jsx("div", { className: "flex justify-end", children: jsxRuntimeExports.jsx("button", { onClick: handleSubmit, className: "font-medium rounded-lg transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none bg-primary-600 text-white hover:bg-primary-700 focus:ring-primary-500 px-6 py-2 text-sm flex items-center gap-2", children: "Submit" }) })] })
-                        :
-                            jsxRuntimeExports.jsxs("div", { children: [jsxRuntimeExports.jsxs("div", { className: "flex flex-col gap-2", children: [jsxRuntimeExports.jsx("div", { className: "font-semibold", children: "Query:" }), jsxRuntimeExports.jsx(Textarea, { className: "w-full p-2", value: query, onChange: (e) => { var _a; return setQuery((_a = e === null || e === void 0 ? void 0 : e.target) === null || _a === void 0 ? void 0 : _a.value); } })] }), jsxRuntimeExports.jsx("div", { className: "flex justify-end pt-3", children: jsxRuntimeExports.jsx("button", { onClick: handleSubmit, className: "font-medium rounded-lg transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none bg-primary-600 text-white hover:bg-primary-700 focus:ring-primary-500 px-6 py-2 text-sm flex items-center gap-2", children: "Submit" }) })] }) })] }) }));
+        noOverflowHidden: true, children: jsxRuntimeExports.jsxs("div", { children: [jsxRuntimeExports.jsx("p", { className: "text-gray-700", children: "Customize the widget\u2019s appearance" }), jsxRuntimeExports.jsxs("div", { className: "pt-7", children: [(agentType === "Pie Chart Agent" || agentType === "Line Chart Agent" || agentType === "Series Line Chart Agent" || agentType === "Bar Chart Agent" || agentType === "Series Bar Chart Agent") && (jsxRuntimeExports.jsxs("div", { className: "flex flex-col gap-2 mb-4", children: [jsxRuntimeExports.jsx("div", { className: "font-semibold", children: "Data Labels:" }), jsxRuntimeExports.jsxs(Select, { value: showLabels ? "yes" : "no", onValueChange: (value) => setShowLabels(value === "yes"), children: [jsxRuntimeExports.jsx(SelectTrigger, { className: "h-8", children: jsxRuntimeExports.jsx(SelectValue, { placeholder: "Visible data labels?" }) }), jsxRuntimeExports.jsxs(SelectContent, { children: [jsxRuntimeExports.jsx(SelectItem, { value: "no", children: "No" }), jsxRuntimeExports.jsx(SelectItem, { value: "yes", children: "Yes" })] })] })] })), (editingWidget === null || editingWidget === void 0 ? void 0 : editingWidget.type) === "text" ?
+                            jsxRuntimeExports.jsxs("div", { className: "flex flex-col gap-5", children: [jsxRuntimeExports.jsxs("div", { className: "flex flex-col gap-2", children: [jsxRuntimeExports.jsx("div", { className: "font-semibold", children: "Display text:" }), jsxRuntimeExports.jsx(Input, { value: displayText, onChange: (e) => setDisplayText(e.target.value), className: "h-8" })] }), jsxRuntimeExports.jsxs("div", { className: "flex flex-col gap-2", children: [jsxRuntimeExports.jsx("div", { className: "font-semibold", children: "Block type:" }), jsxRuntimeExports.jsxs(Select, { value: blockType, onValueChange: (value) => setBlockType(value), children: [jsxRuntimeExports.jsx(SelectTrigger, { className: "h-8", children: jsxRuntimeExports.jsx(SelectValue, { placeholder: "Select block type" }) }), jsxRuntimeExports.jsxs(SelectContent, { children: [jsxRuntimeExports.jsx(SelectItem, { value: "heading-1", children: "Heading 1" }), jsxRuntimeExports.jsx(SelectItem, { value: "heading-2", children: "Heading 2" }), jsxRuntimeExports.jsx(SelectItem, { value: "heading-3", children: "Heading 3" }), jsxRuntimeExports.jsx(SelectItem, { value: "paragraph", children: "Paragraph" })] })] })] }), jsxRuntimeExports.jsxs("div", { className: "flex flex-col gap-2", children: [jsxRuntimeExports.jsx("div", { className: "font-semibold", children: "Align:" }), jsxRuntimeExports.jsxs(Select, { value: alignment, onValueChange: (value) => setAlignment(value), children: [jsxRuntimeExports.jsx(SelectTrigger, { className: "h-8", children: jsxRuntimeExports.jsx(SelectValue, { placeholder: "Select block type" }) }), jsxRuntimeExports.jsxs(SelectContent, { children: [jsxRuntimeExports.jsx(SelectItem, { value: "left", children: "Left" }), jsxRuntimeExports.jsx(SelectItem, { value: "center", children: "Center" }), jsxRuntimeExports.jsx(SelectItem, { value: "right", children: "Right" }), jsxRuntimeExports.jsx(SelectItem, { value: "justify", children: "Justify" })] })] })] }), jsxRuntimeExports.jsxs("div", { className: "flex flex-col gap-2", children: [jsxRuntimeExports.jsx("div", { className: "font-semibold", children: "Divider:" }), jsxRuntimeExports.jsxs(Select, { value: divider, onValueChange: (value) => setDivider(value), children: [jsxRuntimeExports.jsx(SelectTrigger, { className: "h-8", children: jsxRuntimeExports.jsx(SelectValue, { placeholder: "No" }) }), jsxRuntimeExports.jsxs(SelectContent, { children: [jsxRuntimeExports.jsx(SelectItem, { value: "yes", children: "Yes" }), jsxRuntimeExports.jsx(SelectItem, { value: "no", children: "No" })] })] })] }), jsxRuntimeExports.jsx("div", { className: "flex justify-end", children: jsxRuntimeExports.jsx("button", { onClick: handleSubmit, className: "font-medium rounded-lg transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none bg-primary-600 text-white hover:bg-primary-700 focus:ring-primary-500 px-6 py-2 text-sm flex items-center gap-2", children: "Submit" }) })] })
+                            :
+                                jsxRuntimeExports.jsxs("div", { children: [jsxRuntimeExports.jsxs("div", { className: "flex flex-col gap-2", children: [jsxRuntimeExports.jsx("div", { className: "font-semibold", children: "Query:" }), jsxRuntimeExports.jsx(Textarea, { className: "w-full p-2", value: query, onChange: (e) => { var _a; return setQuery((_a = e === null || e === void 0 ? void 0 : e.target) === null || _a === void 0 ? void 0 : _a.value); } })] }), jsxRuntimeExports.jsx("div", { className: "flex justify-end pt-3", children: jsxRuntimeExports.jsx("button", { onClick: handleSubmit, className: "font-medium rounded-lg transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none bg-primary-600 text-white hover:bg-primary-700 focus:ring-primary-500 px-6 py-2 text-sm flex items-center gap-2", children: "Submit" }) })] })] })] }) }));
 }
 
 function AddWidgetDialog({ isOpen, onClose, addWidgetFn, defaultAgentName = "adk-construction-project-agent" }) {
@@ -36991,6 +37049,7 @@ function AddWidgetDialog({ isOpen, onClose, addWidgetFn, defaultAgentName = "adk
     const [blockType, setBlockType] = useState("paragraph");
     const [alignment, setAlignment] = useState("left");
     const [divider, setDivider] = useState("no");
+    const [showLabels, setShowLabels] = useState(false);
     const widgetOptions = [
         // {
         //   type: 'bar-chart',
@@ -37111,14 +37170,20 @@ function AddWidgetDialog({ isOpen, onClose, addWidgetFn, defaultAgentName = "adk
             config = {
                 query: query,
                 agentName: defaultAgentName,
-                agentType: "Series Line Chart Agent"
+                agentType: "Series Line Chart Agent",
+                content: {
+                    showLabels
+                },
             };
         }
         else if (selectedWidgetType === 'line-chart') {
             config = {
                 query: query,
                 agentName: defaultAgentName,
-                agentType: "Line Chart Agent"
+                agentType: "Line Chart Agent",
+                content: {
+                    showLabels
+                },
             };
         }
         else if (selectedWidgetType === 'pie-chart') {
@@ -37181,7 +37246,7 @@ function AddWidgetDialog({ isOpen, onClose, addWidgetFn, defaultAgentName = "adk
         noOverflowHidden: true, children: jsxRuntimeExports.jsx("div", { children: jsxRuntimeExports.jsx("div", { className: "pt-4", children: !showConfigStep ? (jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsx("div", { className: "mb-4", children: jsxRuntimeExports.jsx("p", { className: "text-sm text-gray-700", children: "Choose a widget to add to your dashboard:" }) }), jsxRuntimeExports.jsx("div", { className: "grid grid-cols-1 gap-3 max-h-[400px] overflow-y-auto", children: widgetOptions.map((widget) => {
                                 const IconComponent = widget.icon;
                                 return (jsxRuntimeExports.jsxs("button", { onClick: () => handleWidgetSelect(widget.type), className: "flex items-start gap-3 p-4 border border-slate-200 rounded-lg hover:bg-gray-50 transition-colors text-left", children: [jsxRuntimeExports.jsx("div", { className: "flex-shrink-0 p-2 bg-primary-100 rounded-md", children: jsxRuntimeExports.jsx(IconComponent, { className: "w-5 h-5 text-primary-600" }) }), jsxRuntimeExports.jsxs("div", { className: "min-w-0 flex-1", children: [jsxRuntimeExports.jsx("h3", { className: "font-medium text-sm", children: widget.title }), jsxRuntimeExports.jsx("p", { className: "text-xs text-gray-500 !mt-1", children: widget.description })] })] }, widget.type));
-                            }) })] })) : (jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsx("div", { className: "mb-2", children: jsxRuntimeExports.jsx("p", { className: "text-sm text-gray-700", children: selectedWidgetType === 'chatbot'
+                            }) })] })) : (jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [(selectedWidgetType === 'bar-chart' || selectedWidgetType === 'series-bar-chart' || selectedWidgetType === 'series-line-chart' || selectedWidgetType === 'line-chart' || selectedWidgetType === 'pie-chart') && (jsxRuntimeExports.jsxs("div", { className: "flex flex-col gap-2 mb-4 mt-2", children: [jsxRuntimeExports.jsx("p", { className: "text-sm text-gray-700", children: "Data Labels:" }), jsxRuntimeExports.jsxs(Select, { value: showLabels ? "yes" : "no", onValueChange: (value) => setShowLabels(value === "yes"), children: [jsxRuntimeExports.jsx(SelectTrigger, { className: "h-8", children: jsxRuntimeExports.jsx(SelectValue, { placeholder: "Visible data labels?" }) }), jsxRuntimeExports.jsxs(SelectContent, { children: [jsxRuntimeExports.jsx(SelectItem, { value: "no", children: "No" }), jsxRuntimeExports.jsx(SelectItem, { value: "yes", children: "Yes" })] })] })] })), jsxRuntimeExports.jsx("div", { className: "mb-2", children: jsxRuntimeExports.jsx("p", { className: "text-sm text-gray-700", children: selectedWidgetType === 'chatbot'
                                     ? 'Chatbot widget will be configured with the default agent.'
                                     : selectedWidgetType === 'text' ? "Customize the widget's appearance" : 'Enter a query for your chart widget:' }) }), (selectedWidgetType === 'bar-chart' || selectedWidgetType === 'series-bar-chart' || selectedWidgetType === 'series-line-chart' || selectedWidgetType === 'line-chart' || selectedWidgetType === 'pie-chart' || selectedWidgetType === 'data-grid' || selectedWidgetType === 'summary') && (jsxRuntimeExports.jsx("div", { className: "mb-6", children: jsxRuntimeExports.jsx(Textarea, { value: query, onChange: (e) => setQuery(e.target.value), placeholder: "e.g., List out the product types by its count and render it on bar chart", className: "w-full h-24 resize-none" }) })), selectedWidgetType === 'text' && (jsxRuntimeExports.jsxs("div", { className: "flex flex-col gap-5 pb-5 pt-2", children: [jsxRuntimeExports.jsxs("div", { className: "flex flex-col gap-2", children: [jsxRuntimeExports.jsx("div", { className: "font-semibold", children: "Display text:" }), jsxRuntimeExports.jsx(Input, { value: displayText, onChange: (e) => setDisplayText(e.target.value), className: "h-8" })] }), jsxRuntimeExports.jsxs("div", { className: "flex flex-col gap-2", children: [jsxRuntimeExports.jsx("div", { className: "font-semibold", children: "Block type:" }), jsxRuntimeExports.jsxs(Select, { value: blockType, onValueChange: (value) => setBlockType(value), children: [jsxRuntimeExports.jsx(SelectTrigger, { className: "h-8", children: jsxRuntimeExports.jsx(SelectValue, { placeholder: "Select block type" }) }), jsxRuntimeExports.jsxs(SelectContent, { children: [jsxRuntimeExports.jsx(SelectItem, { value: "heading-1", children: "Heading 1" }), jsxRuntimeExports.jsx(SelectItem, { value: "heading-2", children: "Heading 2" }), jsxRuntimeExports.jsx(SelectItem, { value: "heading-3", children: "Heading 3" }), jsxRuntimeExports.jsx(SelectItem, { value: "paragraph", children: "Paragraph" })] })] })] }), jsxRuntimeExports.jsxs("div", { className: "flex flex-col gap-2", children: [jsxRuntimeExports.jsx("div", { className: "font-semibold", children: "Align:" }), jsxRuntimeExports.jsxs(Select, { value: alignment, onValueChange: (value) => setAlignment(value), children: [jsxRuntimeExports.jsx(SelectTrigger, { className: "h-8", children: jsxRuntimeExports.jsx(SelectValue, { placeholder: "Select block type" }) }), jsxRuntimeExports.jsxs(SelectContent, { children: [jsxRuntimeExports.jsx(SelectItem, { value: "left", children: "Left" }), jsxRuntimeExports.jsx(SelectItem, { value: "center", children: "Center" }), jsxRuntimeExports.jsx(SelectItem, { value: "right", children: "Right" }), jsxRuntimeExports.jsx(SelectItem, { value: "justify", children: "Justify" })] })] })] }), jsxRuntimeExports.jsxs("div", { className: "flex flex-col gap-2", children: [jsxRuntimeExports.jsx("div", { className: "font-semibold", children: "Divider:" }), jsxRuntimeExports.jsxs(Select, { value: divider, onValueChange: (value) => setDivider(value), children: [jsxRuntimeExports.jsx(SelectTrigger, { className: "h-8", children: jsxRuntimeExports.jsx(SelectValue, { placeholder: "No" }) }), jsxRuntimeExports.jsxs(SelectContent, { children: [jsxRuntimeExports.jsx(SelectItem, { value: "yes", children: "Yes" }), jsxRuntimeExports.jsx(SelectItem, { value: "no", children: "No" })] })] })] })] })), jsxRuntimeExports.jsxs("div", { className: "flex gap-3 justify-end", children: [jsxRuntimeExports.jsx(Button, { variant: "outline", onClick: () => setShowConfigStep(false), children: "Back" }), jsxRuntimeExports.jsx(Button, { onClick: handleConfigSubmit, disabled: (selectedWidgetType === 'bar-chart' || selectedWidgetType === 'series-bar-chart' || selectedWidgetType === 'series-line-chart' || selectedWidgetType === 'line-chart' || selectedWidgetType === 'pie-chart' || selectedWidgetType === 'data-grid' || selectedWidgetType === 'summary') && !query.trim(), children: "Add Widget" })] })] })) }) }) }));
 }
@@ -37257,13 +37322,13 @@ function WidgetDashboard({ pageId, isEditing, selectedWidget = null, onWidgetSel
             setEditInitialQuery("");
         }
     };
-    const handleEditSubmit = async (newQuery) => {
+    const handleEditSubmit = async (newQuery, showLabels) => {
         var _a;
         if (!editingWidget)
             return;
         // Update the widget's config with the new query
         const updatedWidgets = widgets.map(w => w.id === editingWidget.id
-            ? Object.assign(Object.assign({}, w), { config: Object.assign(Object.assign({}, w.config), { query: newQuery }) }) : w);
+            ? Object.assign(Object.assign({}, w), { config: Object.assign(Object.assign({}, w.config), { query: newQuery, content: Object.assign(Object.assign({}, w.config.content), { showLabels }) }) }) : w);
         setWidgets(updatedWidgets);
         // Close the modal
         setShowEditModal(false);

package/dist/index.js

@@ -17,6 +17,7 @@ var reactGridLayout = require('react-grid-layout');
 var uuid = require('uuid');
 var reactCore = require('@copilotkit/react-core');
 var reactUi = require('@copilotkit/react-ui');
+var ChartDataLabels = require('chartjs-plugin-datalabels');
 var CheckboxPrimitive = require('@radix-ui/react-checkbox');
 var DialogPrimitive = require('@radix-ui/react-dialog');
 
@@ -15065,7 +15066,8 @@ const Bar = /* #__PURE__ */ createTypedChart('bar', BarController);
 const Pie = /* #__PURE__ */ createTypedChart('pie', PieController);
 
 Chart$1.register(CategoryScale, LinearScale, BarElement, plugin_title, plugin_tooltip, plugin_legend);
-function BarChart({ orientation, title, data, options, className, units }) {
+function BarChart({ orientation, title, data, options, className, units, content }) {
+    var _a;
     const formatValue = (value) => {
         const numValue = typeof value === 'string' ? parseFloat(value) : value;
         if (units === '$' && !isNaN(numValue)) {
@@ -15094,6 +15096,12 @@ function BarChart({ orientation, title, data, options, className, units }) {
                 },
                 position: "bottom"
             },
+            datalabels: {
+                display: (_a = content === null || content === void 0 ? void 0 : content.showLabels) !== null && _a !== void 0 ? _a : false,
+                color: "white",
+                font: { size: 12 },
+                formatter: (value) => value,
+            },
             title: {
                 display: true,
                 text: title,
@@ -15133,11 +15141,12 @@ function BarChart({ orientation, title, data, options, className, units }) {
             },
         },
     };
-    return (jsxRuntimeExports.jsx(Bar, { data: data, options: options !== null && options !== void 0 ? options : defaultOptions }));
+    return (jsxRuntimeExports.jsx(Bar, { data: data, options: options !== null && options !== void 0 ? options : defaultOptions, plugins: [ChartDataLabels] }));
 }
 
 Chart$1.register(CategoryScale, LinearScale, BarElement, plugin_title, plugin_tooltip, plugin_legend);
-function SeriesChart({ orientation, title, data, options, className, units }) {
+function SeriesChart({ orientation, title, data, options, className, units, content }) {
+    var _a;
     const formatValue = (value) => {
         const numValue = typeof value === 'string' ? parseFloat(value) : value;
         if (units === '$' && !isNaN(numValue)) {
@@ -15166,6 +15175,12 @@ function SeriesChart({ orientation, title, data, options, className, units }) {
                 },
                 position: "bottom"
             },
+            datalabels: {
+                display: (_a = content === null || content === void 0 ? void 0 : content.showLabels) !== null && _a !== void 0 ? _a : false,
+                color: "white",
+                font: { size: 12 },
+                formatter: (value) => value,
+            },
             title: {
                 display: true,
                 text: title,
@@ -15201,11 +15216,12 @@ function SeriesChart({ orientation, title, data, options, className, units }) {
             },
         },
     };
-    return (jsxRuntimeExports.jsx(Bar, { data: data, options: options !== null && options !== void 0 ? options : defaultOptions }));
+    return (jsxRuntimeExports.jsx(Bar, { data: data, options: options !== null && options !== void 0 ? options : defaultOptions, plugins: [ChartDataLabels] }));
 }
 
 Chart$1.register(CategoryScale, LinearScale, PointElement, LineElement, plugin_title, plugin_tooltip, plugin_legend);
-function SeriesLineChart({ orientation, title, data, options, className, units }) {
+function SeriesLineChart({ orientation, title, data, options, className, units, content }) {
+    var _a;
     const formatValue = (value) => {
         const numValue = typeof value === 'string' ? parseFloat(value) : value;
         if (units === '$' && !isNaN(numValue)) {
@@ -15233,6 +15249,19 @@ function SeriesLineChart({ orientation, title, data, options, className, units }
                 },
                 position: "bottom"
             },
+            datalabels: {
+                display: (_a = content === null || content === void 0 ? void 0 : content.showLabels) !== null && _a !== void 0 ? _a : false,
+                color: "#0F172A",
+                font: { size: 12 },
+                offset: 6,
+                anchor: "end",
+                backgroundColor: "#f1f1f1",
+                borderRadius: 3,
+                align: (context) => {
+                    return context.dataIndex % 2 === 0 ? "top" : "bottom";
+                },
+                formatter: (value) => value,
+            },
             title: {
                 display: true,
                 text: title,
@@ -15273,12 +15302,13 @@ function SeriesLineChart({ orientation, title, data, options, className, units }
             },
         },
     };
-    return (jsxRuntimeExports.jsx(Line, { data: data, options: options !== null && options !== void 0 ? options : defaultOptions }));
+    return (jsxRuntimeExports.jsx(Line, { data: data, options: options !== null && options !== void 0 ? options : defaultOptions, plugins: [ChartDataLabels] }));
 }
 
 Chart$1.register(ArcElement, plugin_tooltip, plugin_legend);
 const PieChart = (props) => {
-    const { data, title, options, units } = props;
+    var _a;
+    const { data, title, options, units, content } = props;
     const formatValue = (value) => {
         const numValue = typeof value === 'string' ? parseFloat(value) : value;
         if (units === '$' && !isNaN(numValue)) {
@@ -15297,6 +15327,12 @@ const PieChart = (props) => {
                 },
                 position: "bottom",
             },
+            datalabels: {
+                display: (_a = content === null || content === void 0 ? void 0 : content.showLabels) !== null && _a !== void 0 ? _a : false,
+                color: "white",
+                font: { size: 12 },
+                formatter: (value) => value,
+            },
             title: {
                 display: true,
                 text: title,
@@ -15324,11 +15360,12 @@ const PieChart = (props) => {
             },
         },
     };
-    return jsxRuntimeExports.jsx(Pie, { data: data, options: options !== null && options !== void 0 ? options : defaultOptions });
+    return jsxRuntimeExports.jsx(Pie, { data: data, options: options !== null && options !== void 0 ? options : defaultOptions, plugins: [ChartDataLabels] });
 };
 
 Chart$1.register(CategoryScale, LinearScale, PointElement, LineElement, plugin_title, plugin_tooltip, plugin_legend);
-function LineChart({ title, data, options, className, units }) {
+function LineChart({ title, data, options, className, units, content }) {
+    var _a;
     const formatValue = (value) => {
         const numValue = typeof value === 'string' ? parseFloat(value) : value;
         if (units === '$' && !isNaN(numValue)) {
@@ -15356,6 +15393,19 @@ function LineChart({ title, data, options, className, units }) {
                 },
                 position: "bottom"
             },
+            datalabels: {
+                display: (_a = content === null || content === void 0 ? void 0 : content.showLabels) !== null && _a !== void 0 ? _a : false,
+                color: "#0F172A",
+                font: { size: 12 },
+                offset: 6,
+                anchor: "end",
+                backgroundColor: "#f1f1f1",
+                borderRadius: 3,
+                align: (context) => {
+                    return context.dataIndex % 2 === 0 ? "top" : "bottom";
+                },
+                formatter: (value) => value,
+            },
             title: {
                 display: true,
                 text: title,
@@ -15388,7 +15438,7 @@ function LineChart({ title, data, options, className, units }) {
             },
         },
     };
-    return (jsxRuntimeExports.jsx(Line, { data: data, options: options !== null && options !== void 0 ? options : defaultOptions }));
+    return (jsxRuntimeExports.jsx(Line, { data: data, options: options !== null && options !== void 0 ? options : defaultOptions, plugins: [ChartDataLabels] }));
 }
 
 function DataGrid({ title, data, className }) {
@@ -36296,7 +36346,7 @@ const getStyleValues$1 = (styles = {}) => {
         textAlign: alignment,
     };
 };
-function BarChartComponent({ orientation, barChartState, styles, appendMessage, query, isFirstLoad, widgetBackendUrl, widgetId, startLoadingTimeout, clearLoadingTimeout }) {
+function BarChartComponent({ orientation, barChartState, styles, appendMessage, query, isFirstLoad, widgetBackendUrl, widgetId, startLoadingTimeout, clearLoadingTimeout, content }) {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
     const hasCalledRef = React.useRef(false);
     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) || [];
@@ -36346,9 +36396,9 @@ function BarChartComponent({ orientation, barChartState, styles, appendMessage,
             },
         ],
     };
-    return (jsxRuntimeExports.jsx(BarChart, { orientation: orientation, title: chartTitle, data: transformedData, units: units }));
+    return (jsxRuntimeExports.jsx(BarChart, { orientation: orientation, title: chartTitle, data: transformedData, units: units, content: content }));
 }
-function SeriesBarChartComponent({ orientation, seriesBarChartState, styles, appendMessage, query, isFirstLoad, widgetBackendUrl, widgetId, startLoadingTimeout, clearLoadingTimeout }) {
+function SeriesBarChartComponent({ orientation, seriesBarChartState, styles, appendMessage, query, isFirstLoad, widgetBackendUrl, widgetId, startLoadingTimeout, clearLoadingTimeout, content }) {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
     const hasCalledRef = React.useRef(false);
     const labels = ((_b = (_a = seriesBarChartState === null || seriesBarChartState === void 0 ? void 0 : seriesBarChartState.series_bar_chart_data) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.labels) || ((_e = (_d = (_c = seriesBarChartState === null || seriesBarChartState === void 0 ? void 0 : seriesBarChartState.state) === null || _c === void 0 ? void 0 : _c.series_bar_chart_data) === null || _d === void 0 ? void 0 : _d.data) === null || _e === void 0 ? void 0 : _e.labels) || [];
@@ -36394,12 +36444,12 @@ function SeriesBarChartComponent({ orientation, seriesBarChartState, styles, app
         datasets: series.map((seriesItem, index) => ({
             label: seriesItem.name,
             data: seriesItem.values,
-            backgroundColor: seriesItem.color || finalColors[index % finalColors.length],
+            backgroundColor: (seriesItem === null || seriesItem === void 0 ? void 0 : seriesItem.colors) || (seriesItem === null || seriesItem === void 0 ? void 0 : seriesItem.color) || finalColors[index % finalColors.length],
         })),
     };
-    return (jsxRuntimeExports.jsx(SeriesChart, { orientation: orientation, title: chartTitle, data: transformedData, units: units }));
+    return (jsxRuntimeExports.jsx(SeriesChart, { orientation: orientation, title: chartTitle, data: transformedData, units: units, content: content }));
 }
-function SeriesLineChartComponent({ orientation, seriesLineChartState, styles, appendMessage, query, isFirstLoad, widgetBackendUrl, widgetId, startLoadingTimeout, clearLoadingTimeout }) {
+function SeriesLineChartComponent({ orientation, seriesLineChartState, styles, appendMessage, content, query, isFirstLoad, widgetBackendUrl, widgetId, startLoadingTimeout, clearLoadingTimeout }) {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
     const hasCalledRef = React.useRef(false);
     const labels = ((_b = (_a = seriesLineChartState === null || seriesLineChartState === void 0 ? void 0 : seriesLineChartState.series_bar_chart_data) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.labels) || ((_e = (_d = (_c = seriesLineChartState === null || seriesLineChartState === void 0 ? void 0 : seriesLineChartState.state) === null || _c === void 0 ? void 0 : _c.series_bar_chart_data) === null || _d === void 0 ? void 0 : _d.data) === null || _e === void 0 ? void 0 : _e.labels) || [];
@@ -36455,9 +36505,9 @@ function SeriesLineChartComponent({ orientation, seriesLineChartState, styles, a
             tension: 0.1,
         })),
     };
-    return (jsxRuntimeExports.jsx(SeriesLineChart, { orientation: orientation, title: chartTitle, data: transformedData, units: units }));
+    return (jsxRuntimeExports.jsx(SeriesLineChart, { orientation: orientation, title: chartTitle, data: transformedData, units: units, content: content }));
 }
-function PieChartComponent({ pieChartState, styles, appendMessage, query, isFirstLoad, widgetBackendUrl, widgetId, startLoadingTimeout, clearLoadingTimeout }) {
+function PieChartComponent({ pieChartState, styles, appendMessage, query, isFirstLoad, widgetBackendUrl, widgetId, startLoadingTimeout, clearLoadingTimeout, content }) {
     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;
     const hasCalledRef = React.useRef(false);
     const labels = ((_b = (_a = pieChartState === null || pieChartState === void 0 ? void 0 : pieChartState.pie_chart_data) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.labels) || ((_e = (_d = (_c = pieChartState === null || pieChartState === void 0 ? void 0 : pieChartState.state) === null || _c === void 0 ? void 0 : _c.pie_chart_data) === null || _d === void 0 ? void 0 : _d.data) === null || _e === void 0 ? void 0 : _e.labels) || [];
@@ -36511,9 +36561,9 @@ function PieChartComponent({ pieChartState, styles, appendMessage, query, isFirs
             },
         ],
     };
-    return (jsxRuntimeExports.jsx(PieChart, { title: chartTitle, data: transformedData, units: units }));
+    return (jsxRuntimeExports.jsx(PieChart, { title: chartTitle, data: transformedData, units: units, content: content }));
 }
-function LineChartComponent({ lineChartState, styles, appendMessage, query, isFirstLoad, widgetBackendUrl, widgetId, startLoadingTimeout, clearLoadingTimeout }) {
+function LineChartComponent({ lineChartState, styles, appendMessage, query, isFirstLoad, widgetBackendUrl, widgetId, startLoadingTimeout, clearLoadingTimeout, content }) {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
     const hasCalledRef = React.useRef(false);
     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) || [];
@@ -36568,7 +36618,7 @@ function LineChartComponent({ lineChartState, styles, appendMessage, query, isFi
             },
         ],
     };
-    return (jsxRuntimeExports.jsx(LineChart, { title: chartTitle, data: transformedData, units: units }));
+    return (jsxRuntimeExports.jsx(LineChart, { title: chartTitle, data: transformedData, units: units, content: content }));
 }
 function DataGridComponent({ dataGridState, styles, appendMessage, query, isFirstLoad, widgetBackendUrl, widgetId, startLoadingTimeout, clearLoadingTimeout }) {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u;
@@ -36659,10 +36709,11 @@ function SummaryComponent({ summaryState, styles, appendMessage, query, isFirstL
     return (jsxRuntimeExports.jsx(SummaryWidget, { title: title, data: data, metadata: metadata, className: "" }));
 }
 function CopilotKitAgent({ widget, showHeader, styles, onResetReady, widgetIds, widgetBackendUrl, datasetId }) {
-    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;
+    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, _32;
     const agentType = (_a = widget.config) === null || _a === void 0 ? void 0 : _a.agentType;
     const orientation = (_b = widget.config) === null || _b === void 0 ? void 0 : _b.orientation;
     const isFirstLoad = (_c = widget.config) === null || _c === void 0 ? void 0 : _c.isFirstLoad;
+    const content = (_d = widget.config) === null || _d === void 0 ? void 0 : _d.content;
     const { threadId, setThreadId } = reactCore.useCopilotContext();
     const timeoutRef = React.useRef(null);
     const [isTimeoutTriggered, setIsTimeoutTriggered] = React.useState(false);
@@ -36672,7 +36723,7 @@ function CopilotKitAgent({ widget, showHeader, styles, onResetReady, widgetIds,
         setThreadId(widget.id);
     }, [widget.id, setThreadId]);
     const { state: chartState, setState: setChartState } = reactCore.useCoAgent({
-        name: (_d = widget.config) === null || _d === void 0 ? void 0 : _d.agentName,
+        name: (_e = widget.config) === null || _e === void 0 ? void 0 : _e.agentName,
         initialState: createInitialChartState(agentType || '', widgetIds, datasetId),
     });
     // Function to handle timeout and call loadAgentState API
@@ -36696,7 +36747,7 @@ function CopilotKitAgent({ widget, showHeader, styles, onResetReady, widgetIds,
         if (apiResponse && !(chartState === null || chartState === void 0 ? void 0 : chartState.agent_message)) {
             parseAndUpdateChartState(apiResponse, setChartState);
         }
-    }, [widgetBackendUrl, widget.id, isTimeoutTriggered, setChartState, (_e = widget.config) === null || _e === void 0 ? void 0 : _e.agentName, chartState, apiCallCount, hasTimeoutError]);
+    }, [widgetBackendUrl, widget.id, isTimeoutTriggered, setChartState, (_f = widget.config) === null || _f === void 0 ? void 0 : _f.agentName, chartState, apiCallCount, hasTimeoutError]);
     // Function to start timeout
     const startLoadingTimeout = React.useCallback(() => {
         if (timeoutRef.current) {
@@ -36810,15 +36861,15 @@ function CopilotKitAgent({ widget, showHeader, styles, onResetReady, widgetIds,
     }, [widget.id, appendMessage, agentType, setChartState]);
     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" && (
                 // Check if data is empty based on agent type
-                (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))) ||
-                    (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))) ||
-                    (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))) ||
-                    (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))) ||
-                    (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))) ||
-                    (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))) ||
-                    (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: {
-                        title: ((_29 = widget.config) === null || _29 === void 0 ? void 0 : _29.copilotTitle) || widget.title,
-                        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?"
+                (agentType === "Bar Chart Agent" && (!((_j = (_h = (_g = chartState.bar_chart_data) === null || _g === void 0 ? void 0 : _g.data) === null || _h === void 0 ? void 0 : _h.labels) === null || _j === void 0 ? void 0 : _j.length) || !((_m = (_l = (_k = chartState.bar_chart_data) === null || _k === void 0 ? void 0 : _k.data) === null || _l === void 0 ? void 0 : _l.values) === null || _m === void 0 ? void 0 : _m.length))) ||
+                    (agentType === "Series Bar Chart Agent" && (!((_q = (_p = (_o = chartState.series_bar_chart_data) === null || _o === void 0 ? void 0 : _o.data) === null || _p === void 0 ? void 0 : _p.labels) === null || _q === void 0 ? void 0 : _q.length) || !((_t = (_s = (_r = chartState.series_bar_chart_data) === null || _r === void 0 ? void 0 : _r.data) === null || _s === void 0 ? void 0 : _s.series) === null || _t === void 0 ? void 0 : _t.length))) ||
+                    (agentType === "Series Line Chart Agent" && (!((_w = (_v = (_u = chartState.series_bar_chart_data) === null || _u === void 0 ? void 0 : _u.data) === null || _v === void 0 ? void 0 : _v.labels) === null || _w === void 0 ? void 0 : _w.length) || !((_z = (_y = (_x = chartState.series_bar_chart_data) === null || _x === void 0 ? void 0 : _x.data) === null || _y === void 0 ? void 0 : _y.series) === null || _z === void 0 ? void 0 : _z.length))) ||
+                    (agentType === "Pie Chart Agent" && (!((_2 = (_1 = (_0 = chartState.pie_chart_data) === null || _0 === void 0 ? void 0 : _0.data) === null || _1 === void 0 ? void 0 : _1.labels) === null || _2 === void 0 ? void 0 : _2.length) || !((_5 = (_4 = (_3 = chartState.pie_chart_data) === null || _3 === void 0 ? void 0 : _3.data) === null || _4 === void 0 ? void 0 : _4.values) === null || _5 === void 0 ? void 0 : _5.length))) ||
+                    (agentType === "Line Chart Agent" && (!((_8 = (_7 = (_6 = chartState.bar_chart_data) === null || _6 === void 0 ? void 0 : _6.data) === null || _7 === void 0 ? void 0 : _7.labels) === null || _8 === void 0 ? void 0 : _8.length) || !((_11 = (_10 = (_9 = chartState.bar_chart_data) === null || _9 === void 0 ? void 0 : _9.data) === null || _10 === void 0 ? void 0 : _10.values) === null || _11 === void 0 ? void 0 : _11.length))) ||
+                    (agentType === "Data Grid Agent" && (!((_14 = (_13 = (_12 = chartState.matrix_grid_data) === null || _12 === void 0 ? void 0 : _12.data) === null || _13 === void 0 ? void 0 : _13.headers) === null || _14 === void 0 ? void 0 : _14.length) || !((_17 = (_16 = (_15 = chartState.matrix_grid_data) === null || _15 === void 0 ? void 0 : _15.data) === null || _16 === void 0 ? void 0 : _16.rows) === null || _17 === void 0 ? void 0 : _17.length))) ||
+                    (agentType === "Summary Agent" && (!((_19 = (_18 = chartState.summary_data) === null || _18 === void 0 ? void 0 : _18.data) === null || _19 === void 0 ? void 0 : _19.content) || ((_22 = (_21 = (_20 = chartState.summary_data) === null || _20 === void 0 ? void 0 : _20.data) === null || _21 === void 0 ? void 0 : _21.content) === null || _22 === void 0 ? void 0 : _22.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, content: content, 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 Bar Chart Agent" ? (jsxRuntimeExports.jsx(SeriesBarChartComponent, { seriesBarChartState: chartState, styles: styles, orientation: orientation, content: content, 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 === "Series Line Chart Agent" ? (jsxRuntimeExports.jsx(SeriesLineChartComponent, { seriesLineChartState: chartState, styles: styles, orientation: orientation, content: content, 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 === "Pie Chart Agent" ? (jsxRuntimeExports.jsx(PieChartComponent, { pieChartState: chartState, styles: styles, appendMessage: appendMessage, content: content, query: (_26 = widget.config) === null || _26 === void 0 ? void 0 : _26.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, content: content, query: (_27 = widget.config) === null || _27 === void 0 ? void 0 : _27.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: (_28 = widget.config) === null || _28 === void 0 ? void 0 : _28.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: (_29 = widget.config) === null || _29 === void 0 ? void 0 : _29.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: {
+                        title: ((_30 = widget.config) === null || _30 === void 0 ? void 0 : _30.copilotTitle) || widget.title,
+                        initial: ((_31 = widget.config) === null || _31 === void 0 ? void 0 : _31.copilotInitialMessage) || ((_32 = widget.config) === null || _32 === void 0 ? void 0 : _32.placeholder) || "How can I help you today?"
                     }, onSubmitMessage: () => {
                         setChartState(prevState => (Object.assign(Object.assign({}, prevState), { widget_ids: widgetIds, dataset_id: datasetId })));
                     } })) })] }));
@@ -36949,11 +37000,14 @@ function Modal({ isOpen, onClose, title, children, size = 'md', initialFocusRef,
 }
 
 function EditWidgetDialog({ editingWidget, setWidgets, initialText, isOpen, onClose, onSubmit }) {
+    var _a;
+    const agentType = (_a = editingWidget === null || editingWidget === void 0 ? void 0 : editingWidget.config) === null || _a === void 0 ? void 0 : _a.agentType;
     const [query, setQuery] = React.useState("");
     const [displayText, setDisplayText] = React.useState("");
     const [blockType, setBlockType] = React.useState("");
     const [alignment, setAlignment] = React.useState("");
     const [divider, setDivider] = React.useState("no");
+    const [showLabels, setShowLabels] = React.useState(false);
     const [styles, setStyles] = React.useState("");
     React.useEffect(() => {
         setQuery(initialText);
@@ -36978,10 +37032,14 @@ function EditWidgetDialog({ editingWidget, setWidgets, initialText, isOpen, onCl
         if (hasDivider === null || hasDivider === void 0 ? void 0 : hasDivider.length) {
             setDivider(hasDivider);
         }
+        const hasShowLabel = content === null || content === void 0 ? void 0 : content.showLabels;
+        if (hasShowLabel !== undefined) {
+            setShowLabels(hasShowLabel);
+        }
     }, [editingWidget]);
     const handleSubmit = () => {
         if (onSubmit && query.trim()) {
-            onSubmit(query);
+            onSubmit(query, showLabels);
         }
         if (editingWidget.type === 'text') {
             const widgetId = editingWidget === null || editingWidget === void 0 ? void 0 : editingWidget.id;
@@ -37003,10 +37061,10 @@ function EditWidgetDialog({ editingWidget, setWidgets, initialText, isOpen, onCl
         return null;
     return (jsxRuntimeExports.jsx(Modal, { isOpen: isOpen, onClose: onClose, title: "Edit Widget", size: "lg", 
         // initialFocusRef={inputRef}
-        noOverflowHidden: true, children: jsxRuntimeExports.jsxs("div", { children: [jsxRuntimeExports.jsx("p", { className: "text-gray-700", children: "Customize the widget\u2019s appearance" }), jsxRuntimeExports.jsx("div", { className: "pt-7", children: (editingWidget === null || editingWidget === void 0 ? void 0 : editingWidget.type) === "text" ?
-                        jsxRuntimeExports.jsxs("div", { className: "flex flex-col gap-5", children: [jsxRuntimeExports.jsxs("div", { className: "flex flex-col gap-2", children: [jsxRuntimeExports.jsx("div", { className: "font-semibold", children: "Display text:" }), jsxRuntimeExports.jsx(Input, { value: displayText, onChange: (e) => setDisplayText(e.target.value), className: "h-8" })] }), jsxRuntimeExports.jsxs("div", { className: "flex flex-col gap-2", children: [jsxRuntimeExports.jsx("div", { className: "font-semibold", children: "Block type:" }), jsxRuntimeExports.jsxs(Select, { value: blockType, onValueChange: (value) => setBlockType(value), children: [jsxRuntimeExports.jsx(SelectTrigger, { className: "h-8", children: jsxRuntimeExports.jsx(SelectValue, { placeholder: "Select block type" }) }), jsxRuntimeExports.jsxs(SelectContent, { children: [jsxRuntimeExports.jsx(SelectItem, { value: "heading-1", children: "Heading 1" }), jsxRuntimeExports.jsx(SelectItem, { value: "heading-2", children: "Heading 2" }), jsxRuntimeExports.jsx(SelectItem, { value: "heading-3", children: "Heading 3" }), jsxRuntimeExports.jsx(SelectItem, { value: "paragraph", children: "Paragraph" })] })] })] }), jsxRuntimeExports.jsxs("div", { className: "flex flex-col gap-2", children: [jsxRuntimeExports.jsx("div", { className: "font-semibold", children: "Align:" }), jsxRuntimeExports.jsxs(Select, { value: alignment, onValueChange: (value) => setAlignment(value), children: [jsxRuntimeExports.jsx(SelectTrigger, { className: "h-8", children: jsxRuntimeExports.jsx(SelectValue, { placeholder: "Select block type" }) }), jsxRuntimeExports.jsxs(SelectContent, { children: [jsxRuntimeExports.jsx(SelectItem, { value: "left", children: "Left" }), jsxRuntimeExports.jsx(SelectItem, { value: "center", children: "Center" }), jsxRuntimeExports.jsx(SelectItem, { value: "right", children: "Right" }), jsxRuntimeExports.jsx(SelectItem, { value: "justify", children: "Justify" })] })] })] }), jsxRuntimeExports.jsxs("div", { className: "flex flex-col gap-2", children: [jsxRuntimeExports.jsx("div", { className: "font-semibold", children: "Divider:" }), jsxRuntimeExports.jsxs(Select, { value: divider, onValueChange: (value) => setDivider(value), children: [jsxRuntimeExports.jsx(SelectTrigger, { className: "h-8", children: jsxRuntimeExports.jsx(SelectValue, { placeholder: "No" }) }), jsxRuntimeExports.jsxs(SelectContent, { children: [jsxRuntimeExports.jsx(SelectItem, { value: "yes", children: "Yes" }), jsxRuntimeExports.jsx(SelectItem, { value: "no", children: "No" })] })] })] }), jsxRuntimeExports.jsx("div", { className: "flex justify-end", children: jsxRuntimeExports.jsx("button", { onClick: handleSubmit, className: "font-medium rounded-lg transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none bg-primary-600 text-white hover:bg-primary-700 focus:ring-primary-500 px-6 py-2 text-sm flex items-center gap-2", children: "Submit" }) })] })
-                        :
-                            jsxRuntimeExports.jsxs("div", { children: [jsxRuntimeExports.jsxs("div", { className: "flex flex-col gap-2", children: [jsxRuntimeExports.jsx("div", { className: "font-semibold", children: "Query:" }), jsxRuntimeExports.jsx(Textarea, { className: "w-full p-2", value: query, onChange: (e) => { var _a; return setQuery((_a = e === null || e === void 0 ? void 0 : e.target) === null || _a === void 0 ? void 0 : _a.value); } })] }), jsxRuntimeExports.jsx("div", { className: "flex justify-end pt-3", children: jsxRuntimeExports.jsx("button", { onClick: handleSubmit, className: "font-medium rounded-lg transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none bg-primary-600 text-white hover:bg-primary-700 focus:ring-primary-500 px-6 py-2 text-sm flex items-center gap-2", children: "Submit" }) })] }) })] }) }));
+        noOverflowHidden: true, children: jsxRuntimeExports.jsxs("div", { children: [jsxRuntimeExports.jsx("p", { className: "text-gray-700", children: "Customize the widget\u2019s appearance" }), jsxRuntimeExports.jsxs("div", { className: "pt-7", children: [(agentType === "Pie Chart Agent" || agentType === "Line Chart Agent" || agentType === "Series Line Chart Agent" || agentType === "Bar Chart Agent" || agentType === "Series Bar Chart Agent") && (jsxRuntimeExports.jsxs("div", { className: "flex flex-col gap-2 mb-4", children: [jsxRuntimeExports.jsx("div", { className: "font-semibold", children: "Data Labels:" }), jsxRuntimeExports.jsxs(Select, { value: showLabels ? "yes" : "no", onValueChange: (value) => setShowLabels(value === "yes"), children: [jsxRuntimeExports.jsx(SelectTrigger, { className: "h-8", children: jsxRuntimeExports.jsx(SelectValue, { placeholder: "Visible data labels?" }) }), jsxRuntimeExports.jsxs(SelectContent, { children: [jsxRuntimeExports.jsx(SelectItem, { value: "no", children: "No" }), jsxRuntimeExports.jsx(SelectItem, { value: "yes", children: "Yes" })] })] })] })), (editingWidget === null || editingWidget === void 0 ? void 0 : editingWidget.type) === "text" ?
+                            jsxRuntimeExports.jsxs("div", { className: "flex flex-col gap-5", children: [jsxRuntimeExports.jsxs("div", { className: "flex flex-col gap-2", children: [jsxRuntimeExports.jsx("div", { className: "font-semibold", children: "Display text:" }), jsxRuntimeExports.jsx(Input, { value: displayText, onChange: (e) => setDisplayText(e.target.value), className: "h-8" })] }), jsxRuntimeExports.jsxs("div", { className: "flex flex-col gap-2", children: [jsxRuntimeExports.jsx("div", { className: "font-semibold", children: "Block type:" }), jsxRuntimeExports.jsxs(Select, { value: blockType, onValueChange: (value) => setBlockType(value), children: [jsxRuntimeExports.jsx(SelectTrigger, { className: "h-8", children: jsxRuntimeExports.jsx(SelectValue, { placeholder: "Select block type" }) }), jsxRuntimeExports.jsxs(SelectContent, { children: [jsxRuntimeExports.jsx(SelectItem, { value: "heading-1", children: "Heading 1" }), jsxRuntimeExports.jsx(SelectItem, { value: "heading-2", children: "Heading 2" }), jsxRuntimeExports.jsx(SelectItem, { value: "heading-3", children: "Heading 3" }), jsxRuntimeExports.jsx(SelectItem, { value: "paragraph", children: "Paragraph" })] })] })] }), jsxRuntimeExports.jsxs("div", { className: "flex flex-col gap-2", children: [jsxRuntimeExports.jsx("div", { className: "font-semibold", children: "Align:" }), jsxRuntimeExports.jsxs(Select, { value: alignment, onValueChange: (value) => setAlignment(value), children: [jsxRuntimeExports.jsx(SelectTrigger, { className: "h-8", children: jsxRuntimeExports.jsx(SelectValue, { placeholder: "Select block type" }) }), jsxRuntimeExports.jsxs(SelectContent, { children: [jsxRuntimeExports.jsx(SelectItem, { value: "left", children: "Left" }), jsxRuntimeExports.jsx(SelectItem, { value: "center", children: "Center" }), jsxRuntimeExports.jsx(SelectItem, { value: "right", children: "Right" }), jsxRuntimeExports.jsx(SelectItem, { value: "justify", children: "Justify" })] })] })] }), jsxRuntimeExports.jsxs("div", { className: "flex flex-col gap-2", children: [jsxRuntimeExports.jsx("div", { className: "font-semibold", children: "Divider:" }), jsxRuntimeExports.jsxs(Select, { value: divider, onValueChange: (value) => setDivider(value), children: [jsxRuntimeExports.jsx(SelectTrigger, { className: "h-8", children: jsxRuntimeExports.jsx(SelectValue, { placeholder: "No" }) }), jsxRuntimeExports.jsxs(SelectContent, { children: [jsxRuntimeExports.jsx(SelectItem, { value: "yes", children: "Yes" }), jsxRuntimeExports.jsx(SelectItem, { value: "no", children: "No" })] })] })] }), jsxRuntimeExports.jsx("div", { className: "flex justify-end", children: jsxRuntimeExports.jsx("button", { onClick: handleSubmit, className: "font-medium rounded-lg transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none bg-primary-600 text-white hover:bg-primary-700 focus:ring-primary-500 px-6 py-2 text-sm flex items-center gap-2", children: "Submit" }) })] })
+                            :
+                                jsxRuntimeExports.jsxs("div", { children: [jsxRuntimeExports.jsxs("div", { className: "flex flex-col gap-2", children: [jsxRuntimeExports.jsx("div", { className: "font-semibold", children: "Query:" }), jsxRuntimeExports.jsx(Textarea, { className: "w-full p-2", value: query, onChange: (e) => { var _a; return setQuery((_a = e === null || e === void 0 ? void 0 : e.target) === null || _a === void 0 ? void 0 : _a.value); } })] }), jsxRuntimeExports.jsx("div", { className: "flex justify-end pt-3", children: jsxRuntimeExports.jsx("button", { onClick: handleSubmit, className: "font-medium rounded-lg transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none bg-primary-600 text-white hover:bg-primary-700 focus:ring-primary-500 px-6 py-2 text-sm flex items-center gap-2", children: "Submit" }) })] })] })] }) }));
 }
 
 function AddWidgetDialog({ isOpen, onClose, addWidgetFn, defaultAgentName = "adk-construction-project-agent" }) {
@@ -37018,6 +37076,7 @@ function AddWidgetDialog({ isOpen, onClose, addWidgetFn, defaultAgentName = "adk
     const [blockType, setBlockType] = React.useState("paragraph");
     const [alignment, setAlignment] = React.useState("left");
     const [divider, setDivider] = React.useState("no");
+    const [showLabels, setShowLabels] = React.useState(false);
     const widgetOptions = [
         // {
         //   type: 'bar-chart',
@@ -37138,14 +37197,20 @@ function AddWidgetDialog({ isOpen, onClose, addWidgetFn, defaultAgentName = "adk
             config = {
                 query: query,
                 agentName: defaultAgentName,
-                agentType: "Series Line Chart Agent"
+                agentType: "Series Line Chart Agent",
+                content: {
+                    showLabels
+                },
             };
         }
         else if (selectedWidgetType === 'line-chart') {
             config = {
                 query: query,
                 agentName: defaultAgentName,
-                agentType: "Line Chart Agent"
+                agentType: "Line Chart Agent",
+                content: {
+                    showLabels
+                },
             };
         }
         else if (selectedWidgetType === 'pie-chart') {
@@ -37208,7 +37273,7 @@ function AddWidgetDialog({ isOpen, onClose, addWidgetFn, defaultAgentName = "adk
         noOverflowHidden: true, children: jsxRuntimeExports.jsx("div", { children: jsxRuntimeExports.jsx("div", { className: "pt-4", children: !showConfigStep ? (jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsx("div", { className: "mb-4", children: jsxRuntimeExports.jsx("p", { className: "text-sm text-gray-700", children: "Choose a widget to add to your dashboard:" }) }), jsxRuntimeExports.jsx("div", { className: "grid grid-cols-1 gap-3 max-h-[400px] overflow-y-auto", children: widgetOptions.map((widget) => {
                                 const IconComponent = widget.icon;
                                 return (jsxRuntimeExports.jsxs("button", { onClick: () => handleWidgetSelect(widget.type), className: "flex items-start gap-3 p-4 border border-slate-200 rounded-lg hover:bg-gray-50 transition-colors text-left", children: [jsxRuntimeExports.jsx("div", { className: "flex-shrink-0 p-2 bg-primary-100 rounded-md", children: jsxRuntimeExports.jsx(IconComponent, { className: "w-5 h-5 text-primary-600" }) }), jsxRuntimeExports.jsxs("div", { className: "min-w-0 flex-1", children: [jsxRuntimeExports.jsx("h3", { className: "font-medium text-sm", children: widget.title }), jsxRuntimeExports.jsx("p", { className: "text-xs text-gray-500 !mt-1", children: widget.description })] })] }, widget.type));
-                            }) })] })) : (jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsx("div", { className: "mb-2", children: jsxRuntimeExports.jsx("p", { className: "text-sm text-gray-700", children: selectedWidgetType === 'chatbot'
+                            }) })] })) : (jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [(selectedWidgetType === 'bar-chart' || selectedWidgetType === 'series-bar-chart' || selectedWidgetType === 'series-line-chart' || selectedWidgetType === 'line-chart' || selectedWidgetType === 'pie-chart') && (jsxRuntimeExports.jsxs("div", { className: "flex flex-col gap-2 mb-4 mt-2", children: [jsxRuntimeExports.jsx("p", { className: "text-sm text-gray-700", children: "Data Labels:" }), jsxRuntimeExports.jsxs(Select, { value: showLabels ? "yes" : "no", onValueChange: (value) => setShowLabels(value === "yes"), children: [jsxRuntimeExports.jsx(SelectTrigger, { className: "h-8", children: jsxRuntimeExports.jsx(SelectValue, { placeholder: "Visible data labels?" }) }), jsxRuntimeExports.jsxs(SelectContent, { children: [jsxRuntimeExports.jsx(SelectItem, { value: "no", children: "No" }), jsxRuntimeExports.jsx(SelectItem, { value: "yes", children: "Yes" })] })] })] })), jsxRuntimeExports.jsx("div", { className: "mb-2", children: jsxRuntimeExports.jsx("p", { className: "text-sm text-gray-700", children: selectedWidgetType === 'chatbot'
                                     ? 'Chatbot widget will be configured with the default agent.'
                                     : selectedWidgetType === 'text' ? "Customize the widget's appearance" : 'Enter a query for your chart widget:' }) }), (selectedWidgetType === 'bar-chart' || selectedWidgetType === 'series-bar-chart' || selectedWidgetType === 'series-line-chart' || selectedWidgetType === 'line-chart' || selectedWidgetType === 'pie-chart' || selectedWidgetType === 'data-grid' || selectedWidgetType === 'summary') && (jsxRuntimeExports.jsx("div", { className: "mb-6", children: jsxRuntimeExports.jsx(Textarea, { value: query, onChange: (e) => setQuery(e.target.value), placeholder: "e.g., List out the product types by its count and render it on bar chart", className: "w-full h-24 resize-none" }) })), selectedWidgetType === 'text' && (jsxRuntimeExports.jsxs("div", { className: "flex flex-col gap-5 pb-5 pt-2", children: [jsxRuntimeExports.jsxs("div", { className: "flex flex-col gap-2", children: [jsxRuntimeExports.jsx("div", { className: "font-semibold", children: "Display text:" }), jsxRuntimeExports.jsx(Input, { value: displayText, onChange: (e) => setDisplayText(e.target.value), className: "h-8" })] }), jsxRuntimeExports.jsxs("div", { className: "flex flex-col gap-2", children: [jsxRuntimeExports.jsx("div", { className: "font-semibold", children: "Block type:" }), jsxRuntimeExports.jsxs(Select, { value: blockType, onValueChange: (value) => setBlockType(value), children: [jsxRuntimeExports.jsx(SelectTrigger, { className: "h-8", children: jsxRuntimeExports.jsx(SelectValue, { placeholder: "Select block type" }) }), jsxRuntimeExports.jsxs(SelectContent, { children: [jsxRuntimeExports.jsx(SelectItem, { value: "heading-1", children: "Heading 1" }), jsxRuntimeExports.jsx(SelectItem, { value: "heading-2", children: "Heading 2" }), jsxRuntimeExports.jsx(SelectItem, { value: "heading-3", children: "Heading 3" }), jsxRuntimeExports.jsx(SelectItem, { value: "paragraph", children: "Paragraph" })] })] })] }), jsxRuntimeExports.jsxs("div", { className: "flex flex-col gap-2", children: [jsxRuntimeExports.jsx("div", { className: "font-semibold", children: "Align:" }), jsxRuntimeExports.jsxs(Select, { value: alignment, onValueChange: (value) => setAlignment(value), children: [jsxRuntimeExports.jsx(SelectTrigger, { className: "h-8", children: jsxRuntimeExports.jsx(SelectValue, { placeholder: "Select block type" }) }), jsxRuntimeExports.jsxs(SelectContent, { children: [jsxRuntimeExports.jsx(SelectItem, { value: "left", children: "Left" }), jsxRuntimeExports.jsx(SelectItem, { value: "center", children: "Center" }), jsxRuntimeExports.jsx(SelectItem, { value: "right", children: "Right" }), jsxRuntimeExports.jsx(SelectItem, { value: "justify", children: "Justify" })] })] })] }), jsxRuntimeExports.jsxs("div", { className: "flex flex-col gap-2", children: [jsxRuntimeExports.jsx("div", { className: "font-semibold", children: "Divider:" }), jsxRuntimeExports.jsxs(Select, { value: divider, onValueChange: (value) => setDivider(value), children: [jsxRuntimeExports.jsx(SelectTrigger, { className: "h-8", children: jsxRuntimeExports.jsx(SelectValue, { placeholder: "No" }) }), jsxRuntimeExports.jsxs(SelectContent, { children: [jsxRuntimeExports.jsx(SelectItem, { value: "yes", children: "Yes" }), jsxRuntimeExports.jsx(SelectItem, { value: "no", children: "No" })] })] })] })] })), jsxRuntimeExports.jsxs("div", { className: "flex gap-3 justify-end", children: [jsxRuntimeExports.jsx(Button, { variant: "outline", onClick: () => setShowConfigStep(false), children: "Back" }), jsxRuntimeExports.jsx(Button, { onClick: handleConfigSubmit, disabled: (selectedWidgetType === 'bar-chart' || selectedWidgetType === 'series-bar-chart' || selectedWidgetType === 'series-line-chart' || selectedWidgetType === 'line-chart' || selectedWidgetType === 'pie-chart' || selectedWidgetType === 'data-grid' || selectedWidgetType === 'summary') && !query.trim(), children: "Add Widget" })] })] })) }) }) }));
 }
@@ -37284,13 +37349,13 @@ function WidgetDashboard({ pageId, isEditing, selectedWidget = null, onWidgetSel
             setEditInitialQuery("");
         }
     };
-    const handleEditSubmit = async (newQuery) => {
+    const handleEditSubmit = async (newQuery, showLabels) => {
         var _a;
         if (!editingWidget)
             return;
         // Update the widget's config with the new query
         const updatedWidgets = widgets.map(w => w.id === editingWidget.id
-            ? Object.assign(Object.assign({}, w), { config: Object.assign(Object.assign({}, w.config), { query: newQuery }) }) : w);
+            ? Object.assign(Object.assign({}, w), { config: Object.assign(Object.assign({}, w.config), { query: newQuery, content: Object.assign(Object.assign({}, w.config.content), { showLabels }) }) }) : w);
         setWidgets(updatedWidgets);
         // Close the modal
         setShowEditModal(false);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dp-widgets-framework",
-  "version": "1.2.8",
+  "version": "1.3.0",
   "private": false,
   "publishConfig": {
     "registry": "https://registry.npmjs.org"
@@ -79,6 +79,7 @@
     "@types/react-datepicker": "^7.0.0",
     "@types/react-grid-layout": "^1.3.5",
     "chart.js": "^4.5.0",
+    "chartjs-plugin-datalabels": "^2.2.0",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "cors": "^2.8.5",