dp-widgets-framework 1.3.9 → 1.4.1

package/dist/index.js

@@ -2020,7 +2020,7 @@ const borderRadiusMap$2 = {
     large: "0.5rem",
     "extra-large": "0.75rem",
 };
-const getStyleValues$5 = (styles = {}) => {
+const getStyleValues$a = (styles = {}) => {
     return {
         backgroundColor: styles.backgroundColor || "transparent",
         borderRadius: borderRadiusMap$2[styles.borderRadius || "rounded"],
@@ -2033,7 +2033,7 @@ const getStyleValues$5 = (styles = {}) => {
 };
 function HeaderWidget({ widget }) {
     var _a, _b;
-    const styles = getStyleValues$5((_a = widget.config) === null || _a === void 0 ? void 0 : _a.styles);
+    const styles = getStyleValues$a((_a = widget.config) === null || _a === void 0 ? void 0 : _a.styles);
     const content = ((_b = widget.config) === null || _b === void 0 ? void 0 : _b.content) || {};
     return (jsxRuntimeExports.jsx("div", { className: "w-full", style: styles, children: jsxRuntimeExports.jsxs("div", { className: cn("flex items-center justify-between"), children: [jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-3", children: [content.showLogo && content.logoUrl && (jsxRuntimeExports.jsx("img", { src: content.logoUrl, alt: "Logo", className: "h-8 w-auto" })), jsxRuntimeExports.jsx("h1", { className: cn("font-semibold", content.titleSize || "text-xl"), children: content.title || "Header" })] }), content.showRightContent && (jsxRuntimeExports.jsx("div", { className: "flex items-center gap-4", children: content.rightContent }))] }) }));
 }
@@ -2044,7 +2044,7 @@ const borderRadiusMap$1 = {
     large: "0.5rem",
     "extra-large": "0.75rem",
 };
-const getStyleValues$4 = (styles = {}) => {
+const getStyleValues$9 = (styles = {}) => {
     return {
         backgroundColor: styles.backgroundColor || "transparent",
         borderRadius: borderRadiusMap$1[styles.borderRadius || "rounded"],
@@ -2057,7 +2057,7 @@ const getStyleValues$4 = (styles = {}) => {
 };
 function FooterWidget({ widget }) {
     var _a, _b;
-    const styles = getStyleValues$4((_a = widget.config) === null || _a === void 0 ? void 0 : _a.styles);
+    const styles = getStyleValues$9((_a = widget.config) === null || _a === void 0 ? void 0 : _a.styles);
     const content = ((_b = widget.config) === null || _b === void 0 ? void 0 : _b.content) || {};
     return (jsxRuntimeExports.jsx("footer", { className: "w-full", style: styles, children: jsxRuntimeExports.jsxs("div", { className: cn("flex items-center", content.layout === "centered" ? "justify-center" : "justify-between"), children: [jsxRuntimeExports.jsx("div", { className: "text-sm", children: content.leftContent || "© 2024 Your Company" }), content.showCenterContent && (jsxRuntimeExports.jsx("div", { className: "text-sm", children: content.centerContent })), content.showRightContent && (jsxRuntimeExports.jsx("div", { className: "flex items-center gap-4 text-sm", children: content.rightContent }))] }) }));
 }
@@ -2068,7 +2068,7 @@ const borderRadiusMap = {
     large: "0.5rem",
     "extra-large": "0.75rem",
 };
-const getStyleValues$3 = (styles = {}) => {
+const getStyleValues$8 = (styles = {}) => {
     const borderRadius = (styles.borderRadius || "rounded");
     return {
         backgroundColor: styles.backgroundColor || "transparent",
@@ -2083,12 +2083,12 @@ const getStyleValues$3 = (styles = {}) => {
 };
 function TextWidget({ widget }) {
     var _a, _b;
-    const styles = getStyleValues$3((_a = widget.config) === null || _a === void 0 ? void 0 : _a.styles);
+    const styles = getStyleValues$8((_a = widget.config) === null || _a === void 0 ? void 0 : _a.styles);
     const content = ((_b = widget.config) === null || _b === void 0 ? void 0 : _b.content) || {};
     return (jsxRuntimeExports.jsx("div", { className: "w-full", style: styles, children: jsxRuntimeExports.jsx("div", { className: cn("prose max-w-none", content.blockType === "heading-1" && "text-[24px] font-bold", content.blockType === "heading-2" && "text-[22px] font-bold", content.blockType === "heading-3" && "text-[18px] font-bold", content.blockType === "paragraph" && "text-base"), dangerouslySetInnerHTML: { __html: content.displayText || "Text content" } }) }));
 }
 
-const getStyleValues$2 = (styles = {}) => {
+const getStyleValues$7 = (styles = {}) => {
     return {
         borderColor: styles.color || "#e5e7eb",
         borderStyle: styles.style || "solid",
@@ -2098,7 +2098,7 @@ const getStyleValues$2 = (styles = {}) => {
 };
 function DividerWidget({ widget }) {
     var _a, _b;
-    const styles = getStyleValues$2((_a = widget.config) === null || _a === void 0 ? void 0 : _a.styles);
+    const styles = getStyleValues$7((_a = widget.config) === null || _a === void 0 ? void 0 : _a.styles);
     const content = ((_b = widget.config) === null || _b === void 0 ? void 0 : _b.content) || {};
     return (jsxRuntimeExports.jsxs("div", { className: "w-full", style: { margin: styles.margin }, children: [jsxRuntimeExports.jsx("hr", { className: cn("w-full", content.variant === "dashed" && "border-dashed", content.variant === "dotted" && "border-dotted"), style: {
                     borderColor: styles.borderColor,
@@ -17689,19 +17689,24 @@ function DataGrid({ title, data, className }) {
         }
         setExpandedGroups(newExpanded);
     };
+    const formatWithCommas = (value) => {
+        if (value == null || value === "")
+            return "";
+        let str = value.toString().trim();
+        let num = Number(str);
+        if (isNaN(num))
+            return str;
+        let [integer, decimal] = str.split(".");
+        integer = integer.replace(/\B(?=(\d{3})+(?!\d))/g, ",");
+        return decimal ? `${integer}.${decimal}` : integer;
+    };
     const formatValueWithUnit = (value, columnIndex) => {
         if (value === null || value === undefined)
             return "—";
         const unit = units === null || units === void 0 ? void 0 : units[columnIndex];
-        console.log('value==>', value, unit);
         // Format the value with commas if it's a number or numeric string
         let valueStr;
-        if (typeof value === 'number') {
-            valueStr = value.toLocaleString();
-        }
-        else {
-            valueStr = String(value);
-        }
+        valueStr = formatWithCommas(value);
         // If no unit or unit length > 3, return value only
         if (!unit || unit.length > 3) {
             return valueStr;
@@ -38431,10 +38436,10 @@ function SummaryWidget({ title, data, metadata, className }) {
                     }, children: title }) })), jsxRuntimeExports.jsx("div", { className: "flex-1 overflow-auto space-y-4", children: jsxRuntimeExports.jsx("div", { className: "prose prose-sm max-w-none", children: jsxRuntimeExports.jsx(Markdown, { className: "text-gray-800", children: data.content }) }) })] }));
 }
 
-const CHART_REFRESH_TIMEOUT = 3000;
-const DEFAULT_COLORS = ["#E4DCB8", "#DAC46C", "#808080", "#582809", "#A3ADD0", "#398E6F", "#AF123D", "#8C99C4", "#5290AC", "#601B07", "#50649D", "#B4A8A0", "#6F2587"];
+const CHART_REFRESH_TIMEOUT$4 = 3000;
+const DEFAULT_COLORS$3 = ["#E4DCB8", "#DAC46C", "#808080", "#582809", "#A3ADD0", "#398E6F", "#AF123D", "#8C99C4", "#5290AC", "#601B07", "#50649D", "#B4A8A0", "#6F2587"];
 const LINE_COLORS = ["#243D84", "#69238B", "#4A959F", "#D0A677", "#B31E47", "#396431"];
-const clearChat = async (widgetBackendUrl, widgetId) => {
+const clearChat$4 = async (widgetBackendUrl, widgetId) => {
     if (!widgetBackendUrl || !widgetId)
         return;
     console.log('clearChat called for widgetId:', widgetId);
@@ -38456,8 +38461,8 @@ const clearChat = async (widgetBackendUrl, widgetId) => {
         console.error('Failed to clear chat:', error);
     }
 };
-const createLoadingComponent = (message = "Loading chart data...") => (jsxRuntimeExports.jsx("div", { className: "flex items-center justify-center h-full", children: jsxRuntimeExports.jsxs("div", { className: "flex flex-col items-center gap-2", children: [jsxRuntimeExports.jsx(lucideReact.RefreshCw, { className: "h-6 w-6 animate-spin text-gray-800" }), jsxRuntimeExports.jsx("p", { className: "text-sm text-gray-500", children: message })] }) }));
-const createInitialChartState = (agentType, widgetIds, datasetId) => {
+const createLoadingComponent$4 = (message = "Loading chart data...") => (jsxRuntimeExports.jsx("div", { className: "flex items-center justify-center h-full", children: jsxRuntimeExports.jsxs("div", { className: "flex flex-col items-center gap-2", children: [jsxRuntimeExports.jsx(lucideReact.RefreshCw, { className: "h-6 w-6 animate-spin text-gray-800" }), jsxRuntimeExports.jsx("p", { className: "text-sm text-gray-500", children: message })] }) }));
+const createInitialChartState$4 = (agentType, widgetIds, datasetId) => {
     const baseState = { dataset_id: datasetId || "home_generation_dataset" };
     switch (agentType) {
         case "Pie Chart Agent":
@@ -38484,6 +38489,8 @@ const createInitialChartState = (agentType, widgetIds, datasetId) => {
                     title: "",
                     type: "series_bar",
                     chart_type: "financial",
+                    x_axis_title: "",
+                    y_axis_title: "",
                     orientation: "vertical",
                     units: "",
                     data: { labels: [], series: [], total: 0, average: 0 },
@@ -38512,7 +38519,7 @@ const createInitialChartState = (agentType, widgetIds, datasetId) => {
             return Object.assign({ widget_ids: widgetIds }, baseState);
     }
 };
-const loadAgentState = async (widgetBackendUrl, threadId, agentName) => {
+const loadAgentState$4 = async (widgetBackendUrl, threadId, agentName) => {
     try {
         const response = await fetch(`${widgetBackendUrl}/api/copilot/${agentName}`, {
             method: 'POST',
@@ -38541,7 +38548,7 @@ const loadAgentState = async (widgetBackendUrl, threadId, agentName) => {
         return null;
     }
 };
-const parseAndUpdateChartState = (apiResponse, setChartState) => {
+const parseAndUpdateChartState$4 = (apiResponse, setChartState) => {
     var _a, _b;
     try {
         if ((_b = (_a = apiResponse === null || apiResponse === void 0 ? void 0 : apiResponse.data) === null || _a === void 0 ? void 0 : _a.loadAgentState) === null || _b === void 0 ? void 0 : _b.state) {
@@ -38584,7 +38591,7 @@ const parseAndUpdateChartState = (apiResponse, setChartState) => {
         console.error('Failed to parse and update chart state:', error);
     }
 };
-const getStyleValues$1 = (styles = {}) => {
+const getStyleValues$6 = (styles = {}) => {
     const borderRadiusMap = {
         none: "0px",
         rounded: "0.375rem",
@@ -38618,7 +38625,7 @@ function BarChartComponent({ orientation, barChartState, styles, appendMessage,
     const isEmpty = labels.length === 0 || values.length === 0;
     const handleRefresh = async () => {
         if (query && widgetBackendUrl && widgetId) {
-            await clearChat(widgetBackendUrl, widgetId);
+            await clearChat$4(widgetBackendUrl, widgetId);
             appendMessage(new TextMessage({
                 content: `${query} and render data on a bar chart`,
                 role: Role.User,
@@ -38642,10 +38649,10 @@ function BarChartComponent({ orientation, barChartState, styles, appendMessage,
         }
     }, [isEmpty, startLoadingTimeout, clearLoadingTimeout]);
     const finalColors = React.useMemo(() => {
-        return shuffleColors(DEFAULT_COLORS, labels === null || labels === void 0 ? void 0 : labels.length);
+        return shuffleColors(DEFAULT_COLORS$3, labels === null || labels === void 0 ? void 0 : labels.length);
     }, [labels.length]);
     if (isEmpty) {
-        return createLoadingComponent();
+        return createLoadingComponent$4();
     }
     const transformedData = {
         labels: labels,
@@ -38659,7 +38666,7 @@ function BarChartComponent({ orientation, barChartState, styles, appendMessage,
     };
     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, content }) {
+function SeriesBarChartComponent$2({ 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, _s, _t, _u, _v, _w, _x;
     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) || [];
@@ -38671,7 +38678,7 @@ function SeriesBarChartComponent({ orientation, seriesBarChartState, styles, app
     const isEmpty = labels.length === 0 || series.length === 0;
     const handleRefresh = async () => {
         if (query) {
-            await clearChat(widgetBackendUrl, widgetId);
+            await clearChat$4(widgetBackendUrl, widgetId);
             // Send trigger event to clear chart state
             console.log('Dispatching clearChartState event for widgetId:', widgetId);
             window.dispatchEvent(new CustomEvent('clearChartState', { detail: { widgetId } }));
@@ -38697,10 +38704,10 @@ function SeriesBarChartComponent({ orientation, seriesBarChartState, styles, app
         }
     }, [isEmpty, startLoadingTimeout, clearLoadingTimeout]);
     const finalColors = React.useMemo(() => {
-        return shuffleColors(DEFAULT_COLORS, series === null || series === void 0 ? void 0 : series.length);
+        return shuffleColors(DEFAULT_COLORS$3, series === null || series === void 0 ? void 0 : series.length);
     }, [series.length]);
     if (isEmpty) {
-        return createLoadingComponent();
+        return createLoadingComponent$4();
     }
     const transformedData = {
         labels: labels,
@@ -38724,7 +38731,7 @@ function SeriesLineChartComponent({ orientation, seriesLineChartState, styles, a
     const isEmpty = labels.length === 0 || series.length === 0;
     const handleRefresh = async () => {
         if (query) {
-            await clearChat(widgetBackendUrl, widgetId);
+            await clearChat$4(widgetBackendUrl, widgetId);
             // Send trigger event to clear chart state
             console.log('Dispatching clearChartState event for widgetId:', widgetId);
             window.dispatchEvent(new CustomEvent('clearChartState', { detail: { widgetId } }));
@@ -38750,10 +38757,10 @@ function SeriesLineChartComponent({ orientation, seriesLineChartState, styles, a
         }
     }, [isEmpty, startLoadingTimeout, clearLoadingTimeout]);
     const finalColors = React.useMemo(() => {
-        return shuffleColors([...LINE_COLORS, ...DEFAULT_COLORS], series === null || series === void 0 ? void 0 : series.length);
+        return shuffleColors([...LINE_COLORS, ...DEFAULT_COLORS$3], series === null || series === void 0 ? void 0 : series.length);
     }, [series.length]);
     if (isEmpty) {
-        return createLoadingComponent();
+        return createLoadingComponent$4();
     }
     const transformedData = {
         labels: labels,
@@ -38772,7 +38779,7 @@ function SeriesLineChartComponent({ orientation, seriesLineChartState, styles, a
     };
     return (jsxRuntimeExports.jsx(SeriesLineChart, { orientation: orientation, title: chartTitle, data: transformedData, units: units, content: content, x_axis_title: x_axis_title, y_axis_title: y_axis_title }));
 }
-function PieChartComponent({ pieChartState, styles, appendMessage, query, isFirstLoad, widgetBackendUrl, widgetId, startLoadingTimeout, clearLoadingTimeout, content }) {
+function PieChartComponent$1({ 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) || [];
@@ -38783,7 +38790,7 @@ function PieChartComponent({ pieChartState, styles, appendMessage, query, isFirs
     const isEmpty = labels.length === 0 || values.length === 0;
     const handleRefresh = async () => {
         if (query) {
-            await clearChat(widgetBackendUrl, widgetId);
+            await clearChat$4(widgetBackendUrl, widgetId);
             // Send trigger event to clear chart state
             console.log('Dispatching clearChartState event for widgetId:', widgetId);
             window.dispatchEvent(new CustomEvent('clearChartState', { detail: { widgetId } }));
@@ -38809,10 +38816,10 @@ function PieChartComponent({ pieChartState, styles, appendMessage, query, isFirs
         }
     }, [isEmpty, startLoadingTimeout, clearLoadingTimeout]);
     const backgroundColors = React.useMemo(() => {
-        return shuffleColors(DEFAULT_COLORS, labels.length);
+        return shuffleColors(DEFAULT_COLORS$3, labels.length);
     }, [labels.length]);
     if (isEmpty) {
-        return createLoadingComponent();
+        return createLoadingComponent$4();
     }
     const colors = ((_y = (_x = pieChartState === null || pieChartState === void 0 ? void 0 : pieChartState.pie_chart_data) === null || _x === void 0 ? void 0 : _x.data) === null || _y === void 0 ? void 0 : _y.colors) || ((_1 = (_0 = (_z = pieChartState === null || pieChartState === void 0 ? void 0 : pieChartState.state) === null || _z === void 0 ? void 0 : _z.pie_chart_data) === null || _0 === void 0 ? void 0 : _0.data) === null || _1 === void 0 ? void 0 : _1.colors) || labels.map((_, index) => backgroundColors[index % backgroundColors.length]);
     const transformedData = {
@@ -38839,7 +38846,7 @@ function LineChartComponent({ lineChartState, styles, appendMessage, query, isFi
     const isEmpty = labels.length === 0 || values.length === 0;
     const handleRefresh = async () => {
         if (query && widgetBackendUrl && widgetId) {
-            await clearChat(widgetBackendUrl, widgetId);
+            await clearChat$4(widgetBackendUrl, widgetId);
             appendMessage(new TextMessage({
                 content: `${query} and render data on a bar chart`,
                 role: Role.User,
@@ -38865,7 +38872,7 @@ function LineChartComponent({ lineChartState, styles, appendMessage, query, isFi
         return LINE_COLORS[Math.floor(Math.random() * LINE_COLORS.length)];
     }, [labels.length]);
     if (isEmpty) {
-        return createLoadingComponent();
+        return createLoadingComponent$4();
     }
     const transformedData = {
         labels: labels,
@@ -38885,7 +38892,7 @@ function LineChartComponent({ lineChartState, styles, appendMessage, query, isFi
     };
     return (jsxRuntimeExports.jsx(LineChart, { title: chartTitle, data: transformedData, units: units, content: content }));
 }
-function DataGridComponent({ dataGridState, styles, appendMessage, query, isFirstLoad, widgetBackendUrl, widgetId, startLoadingTimeout, clearLoadingTimeout }) {
+function DataGridComponent$1({ 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, _v, _w, _x, _y, _z;
     const hasCalledRef = React.useRef(false);
     const columns = ((_b = (_a = dataGridState === null || dataGridState === void 0 ? void 0 : dataGridState.matrix_grid_data) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.headers) || ((_e = (_d = (_c = dataGridState === null || dataGridState === void 0 ? void 0 : dataGridState.state) === null || _c === void 0 ? void 0 : _c.matrix_grid_data) === null || _d === void 0 ? void 0 : _d.data) === null || _e === void 0 ? void 0 : _e.headers) || [];
@@ -38895,7 +38902,7 @@ function DataGridComponent({ dataGridState, styles, appendMessage, query, isFirs
     const isEmpty = columns.length === 0 || rows.length === 0;
     const handleRefresh = async () => {
         if (query) {
-            await clearChat(widgetBackendUrl, widgetId);
+            await clearChat$4(widgetBackendUrl, widgetId);
             // Send trigger event to clear chart state
             console.log('Dispatching clearChartState event for widgetId:', widgetId);
             window.dispatchEvent(new CustomEvent('clearChartState', { detail: { widgetId } }));
@@ -38921,7 +38928,7 @@ function DataGridComponent({ dataGridState, styles, appendMessage, query, isFirs
         }
     }, [isEmpty, startLoadingTimeout, clearLoadingTimeout]);
     if (isEmpty) {
-        return createLoadingComponent("Loading table data...");
+        return createLoadingComponent$4("Loading table data...");
     }
     const transformedData = {
         columns: columns,
@@ -38942,7 +38949,7 @@ function SummaryComponent({ summaryState, styles, appendMessage, query, isFirstL
     const isEmpty = !content || content.trim() === "";
     const handleRefresh = async () => {
         if (query) {
-            await clearChat(widgetBackendUrl, widgetId);
+            await clearChat$4(widgetBackendUrl, widgetId);
             // Send trigger event to clear chart state
             console.log('Dispatching clearChartState event for widgetId:', widgetId);
             window.dispatchEvent(new CustomEvent('clearChartState', { detail: { widgetId } }));
@@ -38955,7 +38962,7 @@ function SummaryComponent({ summaryState, styles, appendMessage, query, isFirstL
     React.useEffect(() => {
         if (isEmpty && query && isFirstLoad && !(summaryState === null || summaryState === void 0 ? void 0 : summaryState.agent_message) && !hasCalledRef.current) {
             hasCalledRef.current = true;
-            setChartState((prevState) => (Object.assign(Object.assign({}, prevState), { widget_ids: widget_ids })));
+            setChartState(Object.assign(Object.assign({}, summaryState), { widget_ids: widget_ids }));
             setTimeout(() => {
                 handleRefresh();
             }, 500);
@@ -38971,12 +38978,12 @@ function SummaryComponent({ summaryState, styles, appendMessage, query, isFirstL
         }
     }, [isEmpty, startLoadingTimeout, clearLoadingTimeout]);
     if (isEmpty) {
-        return createLoadingComponent("Loading summary...");
+        return createLoadingComponent$4("Loading summary...");
     }
     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, _32;
+function CopilotKitAgent({ widget, showHeader, styles, onResetReady, widgetIds, widgetBackendUrl, datasetId, widgetData, }) {
+    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;
     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;
@@ -38991,7 +38998,7 @@ function CopilotKitAgent({ widget, showHeader, styles, onResetReady, widgetIds,
     }, [widget.id, setThreadId]);
     const { state: chartState, setState: setChartState } = reactCore.useCoAgent({
         name: (_e = widget.config) === null || _e === void 0 ? void 0 : _e.agentName,
-        initialState: createInitialChartState(agentType || '', widgetIds, datasetId),
+        initialState: createInitialChartState$4(agentType || '', widgetIds, datasetId),
     });
     // Function to handle timeout and call loadAgentState API
     const handleLoadingTimeout = React.useCallback(async () => {
@@ -39010,9 +39017,9 @@ function CopilotKitAgent({ widget, showHeader, styles, onResetReady, widgetIds,
         // Increment the API call counter
         setApiCallCount(prev => prev + 1);
         const agentName = ((_a = widget.config) === null || _a === void 0 ? void 0 : _a.agentName) || "adk-construction-project-agent";
-        const apiResponse = await loadAgentState(widgetBackendUrl, widget.id, agentName);
+        const apiResponse = await loadAgentState$4(widgetBackendUrl, widget.id, agentName);
         if (apiResponse && !(chartState === null || chartState === void 0 ? void 0 : chartState.agent_message)) {
-            parseAndUpdateChartState(apiResponse, setChartState);
+            parseAndUpdateChartState$4(apiResponse, setChartState);
         }
     }, [widgetBackendUrl, widget.id, isTimeoutTriggered, setChartState, (_f = widget.config) === null || _f === void 0 ? void 0 : _f.agentName, chartState, apiCallCount, hasTimeoutError]);
     // Function to start timeout
@@ -39023,7 +39030,7 @@ function CopilotKitAgent({ widget, showHeader, styles, onResetReady, widgetIds,
         setIsTimeoutTriggered(false);
         timeoutRef.current = setTimeout(() => {
             handleLoadingTimeout();
-        }, CHART_REFRESH_TIMEOUT);
+        }, CHART_REFRESH_TIMEOUT$4);
     }, [handleLoadingTimeout]);
     // Function to clear timeout
     const clearLoadingTimeout = React.useCallback(() => {
@@ -39032,29 +39039,6 @@ function CopilotKitAgent({ widget, showHeader, styles, onResetReady, widgetIds,
             timeoutRef.current = null;
         }
     }, []);
-    // Function to clear chat and reset chart state
-    React.useCallback(async (widgetId) => {
-        if (!widgetBackendUrl)
-            return;
-        try {
-            await fetch(`${widgetBackendUrl}/api/clear-chat`, {
-                method: 'POST',
-                headers: {
-                    'Content-Type': 'application/json',
-                },
-                body: JSON.stringify({
-                    session_id: widgetId,
-                    delete_state: true
-                }),
-            });
-            setChartState(createInitialChartState(agentType || '', widgetIds, datasetId));
-            setApiCallCount(0);
-            setHasTimeoutError(false);
-        }
-        catch (error) {
-            console.error('Failed to clear chat and state:', error);
-        }
-    }, [widgetBackendUrl, setChartState, agentType, widgetIds]);
     // Clean up timeout on unmount
     React.useEffect(() => {
         return () => {
@@ -39103,7 +39087,7 @@ function CopilotKitAgent({ widget, showHeader, styles, onResetReady, widgetIds,
                     messageContent = `${query} and render the data on a summary widget`;
                 }
                 console.log('triggering to datasetId==>', datasetId);
-                setChartState(createInitialChartState(agentType || '', widgetIds, datasetId));
+                setChartState(createInitialChartState$4(agentType || '', widgetIds, datasetId));
                 appendMessage(new TextMessage({
                     content: messageContent,
                     role: Role.User,
@@ -39113,7 +39097,7 @@ function CopilotKitAgent({ widget, showHeader, styles, onResetReady, widgetIds,
         const handleClearChartState = (event) => {
             const { widgetId } = event.detail;
             if (widgetId === widget.id) {
-                setChartState(createInitialChartState(agentType || '', widgetIds, datasetId));
+                setChartState(createInitialChartState$4(agentType || '', widgetIds, datasetId));
                 setApiCallCount(0);
                 setHasTimeoutError(false);
             }
@@ -39133,16 +39117,11 @@ function CopilotKitAgent({ widget, showHeader, styles, onResetReady, widgetIds,
                     (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 })));
-                    } })) })] }));
+                    (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$2, { 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$1, { 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$1, { 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 })) : null })] }));
 }
-function AgentWidget({ widget, showHeader = true, widgetBackendUrl, onResetReady, widgetIds, datasetId, }) {
+function AgentWidget({ widget, showHeader = true, widgetBackendUrl, onResetReady, widgetIds, datasetId, widgetData, }) {
     var _a, _b;
-    const styles = getStyleValues$1((_a = widget.config) === null || _a === void 0 ? void 0 : _a.styles);
+    const styles = getStyleValues$6((_a = widget.config) === null || _a === void 0 ? void 0 : _a.styles);
     // Construct the runtime URL using the configurable backend URL
     const getRuntimeUrl = () => {
         var _a;
@@ -39153,7 +39132,7 @@ function AgentWidget({ widget, showHeader = true, widgetBackendUrl, onResetReady
     return (jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: jsxRuntimeExports.jsx(reactCore.CopilotKit, { runtimeUrl: getRuntimeUrl(), showDevConsole: false, agent: ((_b = widget.config) === null || _b === void 0 ? void 0 : _b.agentName) || "widget_assistant", children: jsxRuntimeExports.jsx(CopilotKitAgent, { widget: widget, showHeader: showHeader, styles: styles, onResetReady: onResetReady, widgetIds: widgetIds, widgetBackendUrl: widgetBackendUrl, datasetId: datasetId }) }) }));
 }
 
-const getStyleValues = (styles = {}) => {
+const getStyleValues$5 = (styles = {}) => {
     (styles.borderRadius || "rounded");
     return {
     // backgroundColor: styles.backgroundColor || "10px",
@@ -39161,37 +39140,1333 @@ const getStyleValues = (styles = {}) => {
 };
 function SpacerWidget({ widget }) {
     var _a, _b;
-    const styles = getStyleValues((_a = widget.config) === null || _a === void 0 ? void 0 : _a.styles);
+    const styles = getStyleValues$5((_a = widget.config) === null || _a === void 0 ? void 0 : _a.styles);
     ((_b = widget.config) === null || _b === void 0 ? void 0 : _b.content) || {};
     return (jsxRuntimeExports.jsx("div", { className: "w-full", style: styles }));
 }
 
-function WidgetRenderer({ widget, isTemplate = false, onConfigUpdate, widgetBackendUrl, onResetReady, widgetIds, datasetId, }) {
-    const handleConfigUpdate = (config) => {
-        if (onConfigUpdate) {
-            onConfigUpdate(widget.id, config);
+const getStyleValues$4 = (styles = {}) => {
+    const borderRadiusMap = {
+        none: "0px",
+        rounded: "0.375rem",
+        large: "0.5rem",
+        "extra-large": "0.75rem",
+    };
+    const paddingMap = {
+        small: "0.5rem",
+        medium: "1rem",
+        large: "1.5rem",
+        "extra-large": "2rem",
+    };
+    const alignment = styles.alignment || "left";
+    return {
+        backgroundColor: styles.backgroundColor || "#ffffff",
+        borderRadius: borderRadiusMap[styles.borderRadius || "rounded"],
+        padding: paddingMap[styles.padding || "medium"],
+        color: styles.textColor || "#000000",
+        fontSize: styles.fontSize || "14px",
+        textAlign: alignment,
+    };
+};
+function CopilotKitChatbot({ widget, showHeader, styles, onResetReady, widgetIds, datasetId, }) {
+    var _a, _b, _c, _d;
+    const { threadId, setThreadId } = reactCore.useCopilotContext();
+    React.useEffect(() => {
+        setThreadId(widget.id);
+    }, [widget.id, setThreadId]);
+    const { state: chatbotState, setState: setChatbotState } = reactCore.useCoAgent({
+        name: ((_a = widget.config) === null || _a === void 0 ? void 0 : _a.agentName) || "widget_assistant",
+        initialState: {
+            widget_ids: widgetIds,
+            dataset_id: datasetId
+        },
+    });
+    const { reset } = reactCore.useCopilotChat();
+    // Register the reset function with the parent component
+    React.useEffect(() => {
+        if (onResetReady && reset && widget.id) {
+            console.log('on reset ready=>');
+            const wrappedReset = () => {
+                reset();
+                window.dispatchEvent(new CustomEvent('clearChartState', { detail: { widgetId: widget.id } }));
+            };
+            onResetReady(widget.id, wrappedReset);
         }
+    }, [reset, widget.id, onResetReady]);
+    // Listen for clearChartState events for this widget
+    React.useEffect(() => {
+        const handleClearChartState = (event) => {
+            const { widgetId } = event.detail;
+            if (widgetId === widget.id) {
+                setChatbotState({
+                    widget_ids: widgetIds,
+                    dataset_id: datasetId
+                });
+            }
+        };
+        window.addEventListener('clearChartState', handleClearChartState);
+        return () => {
+            window.removeEventListener('clearChartState', handleClearChartState);
+        };
+    }, [widget.id, widgetIds, datasetId, setChatbotState]);
+    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: jsxRuntimeExports.jsx(reactUi.CopilotChat, { className: "h-full text-xs [&_.copilot-chat-message]:text-xs [&_.copilot-chat-input]:text-xs", labels: {
+                        title: ((_b = widget.config) === null || _b === void 0 ? void 0 : _b.copilotTitle) || widget.title,
+                        initial: ((_c = widget.config) === null || _c === void 0 ? void 0 : _c.copilotInitialMessage) || ((_d = widget.config) === null || _d === void 0 ? void 0 : _d.placeholder) || "How can I help you today?"
+                    }, onSubmitMessage: () => {
+                        setChatbotState(prevState => (Object.assign(Object.assign({}, prevState), { widget_ids: widgetIds, dataset_id: datasetId })));
+                    } }) })] }));
+}
+function ChatbotWidget({ widget, showHeader = true, widgetBackendUrl, onResetReady, widgetIds, datasetId, }) {
+    var _a, _b;
+    const styles = getStyleValues$4((_a = widget.config) === null || _a === void 0 ? void 0 : _a.styles);
+    // Construct the runtime URL using the configurable backend URL
+    const getRuntimeUrl = () => {
+        var _a;
+        const baseUrl = widgetBackendUrl || '';
+        const agentName = ((_a = widget.config) === null || _a === void 0 ? void 0 : _a.agentName) || 'default-agent';
+        return `${baseUrl}/api/copilot/${agentName}`;
     };
-    getWidgetStyles(widget);
-    const renderWidget = () => {
-        switch (widget.type) {
-            // Search-related widget cases removed
-            // Available widgets
-            case "header":
-                return jsxRuntimeExports.jsx(HeaderWidget, { widget: widget, showHeader: false });
-            case "footer":
-                return jsxRuntimeExports.jsx(FooterWidget, { widget: widget, showHeader: false });
-            case "text":
-                return jsxRuntimeExports.jsx(TextWidget, { widget: widget, showHeader: false });
-            case "spacer":
-                return jsxRuntimeExports.jsx(SpacerWidget, { widget: widget, showHeader: false });
-            case "divider":
-                return jsxRuntimeExports.jsx(DividerWidget, { widget: widget, showHeader: false });
-            case "facet":
-                return (jsxRuntimeExports.jsx(FacetWidget, { widget: widget, showHeader: false, onConfigUpdate: handleConfigUpdate }));
-            case "agent":
-            case "chatbot":
-                return jsxRuntimeExports.jsx(AgentWidget, { widget: widget, showHeader: false, widgetBackendUrl: widgetBackendUrl, onResetReady: onResetReady, widgetIds: widgetIds, datasetId: datasetId });
+    return (jsxRuntimeExports.jsx(reactCore.CopilotKit, { runtimeUrl: getRuntimeUrl(), showDevConsole: false, agent: ((_b = widget.config) === null || _b === void 0 ? void 0 : _b.agentName) || "widget_assistant", children: jsxRuntimeExports.jsx(CopilotKitChatbot, { widget: widget, showHeader: showHeader, styles: styles, onResetReady: onResetReady, widgetIds: widgetIds, datasetId: datasetId }) }));
+}
+
+const CHART_REFRESH_TIMEOUT$3 = 3000;
+const DEFAULT_COLORS$2 = ["#E4DCB8", "#DAC46C", "#808080", "#582809", "#A3ADD0", "#398E6F", "#AF123D", "#8C99C4", "#5290AC", "#601B07", "#50649D", "#B4A8A0", "#6F2587"];
+const clearChat$3 = async (widgetBackendUrl, widgetId) => {
+    if (!widgetBackendUrl || !widgetId)
+        return;
+    console.log('clearChat called for widgetId:', widgetId);
+    try {
+        await fetch(`${widgetBackendUrl}/api/clear-chat`, {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+            },
+            body: JSON.stringify({
+                session_id: widgetId,
+                delete_state: true
+            }),
+        });
+        console.log('Dispatching clearChartState event from clearChat for widgetId:', widgetId);
+        window.dispatchEvent(new CustomEvent('clearChartState', { detail: { widgetId } }));
+    }
+    catch (error) {
+        console.error('Failed to clear chat:', error);
+    }
+};
+const createLoadingComponent$3 = (message = "Loading chart data...") => (jsxRuntimeExports.jsx("div", { className: "flex items-center justify-center h-full", children: jsxRuntimeExports.jsxs("div", { className: "flex flex-col items-center gap-2", children: [jsxRuntimeExports.jsx(lucideReact.RefreshCw, { className: "h-6 w-6 animate-spin text-gray-800" }), jsxRuntimeExports.jsx("p", { className: "text-sm text-gray-500", children: message })] }) }));
+const createInitialChartState$3 = (datasetId, pieChartState) => {
+    return {
+        pie_chart_data: {
+            title: (pieChartState === null || pieChartState === void 0 ? void 0 : pieChartState.title) || "",
+            type: (pieChartState === null || pieChartState === void 0 ? void 0 : pieChartState.type) || "pie",
+            chart_type: (pieChartState === null || pieChartState === void 0 ? void 0 : pieChartState.chart_type) || "financial",
+            data: { labels: (pieChartState === null || pieChartState === void 0 ? void 0 : pieChartState.data.labels) || [], values: (pieChartState === null || pieChartState === void 0 ? void 0 : pieChartState.data.values) || [], percentages: (pieChartState === null || pieChartState === void 0 ? void 0 : pieChartState.data.percentages) || [], total: pieChartState === null || pieChartState === void 0 ? void 0 : pieChartState.data.total },
+            metadata: { categories: (pieChartState === null || pieChartState === void 0 ? void 0 : pieChartState.metadata.categories) || 0, largest_category: (pieChartState === null || pieChartState === void 0 ? void 0 : pieChartState.metadata.largest_category) || "", largest_value: (pieChartState === null || pieChartState === void 0 ? void 0 : pieChartState.metadata.largest_value) || 0, largest_percentage: (pieChartState === null || pieChartState === void 0 ? void 0 : pieChartState.metadata.largest_percentage) || 0 }
+        },
+        dataset_id: datasetId || "home_generation_dataset"
+    };
+};
+const loadAgentState$3 = async (widgetBackendUrl, threadId, agentName) => {
+    try {
+        const response = await fetch(`${widgetBackendUrl}/api/copilot/${agentName}`, {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+            },
+            body: JSON.stringify({
+                "operationName": "loadAgentState",
+                "query": "query loadAgentState($data: LoadAgentStateInput!) {\n  loadAgentState(data: $data) {\n    threadId\n    threadExists\n    state\n    messages\n    __typename\n  }\n}",
+                "variables": {
+                    "data": {
+                        "agentName": agentName,
+                        "threadId": threadId
+                    }
+                }
+            }),
+        });
+        if (!response.ok) {
+            throw new Error(`HTTP error! status: ${response.status}`);
+        }
+        const result = await response.json();
+        return result;
+    }
+    catch (error) {
+        console.error('Failed to load agent state:', error);
+        return null;
+    }
+};
+const parseAndUpdateChartState$3 = (apiResponse, setChartState) => {
+    var _a, _b;
+    try {
+        if ((_b = (_a = apiResponse === null || apiResponse === void 0 ? void 0 : apiResponse.data) === null || _a === void 0 ? void 0 : _a.loadAgentState) === null || _b === void 0 ? void 0 : _b.state) {
+            const stateString = apiResponse.data.loadAgentState.state;
+            const parsedState = JSON.parse(stateString);
+            if (parsedState.state) {
+                const chartData = parsedState.state;
+                setChartState((prevState) => {
+                    const newChartState = Object.assign({}, prevState);
+                    if (chartData.pie_chart_data) {
+                        newChartState.pie_chart_data = chartData.pie_chart_data;
+                    }
+                    if (chartData.agent_message) {
+                        newChartState.agent_message = chartData.agent_message;
+                    }
+                    return newChartState;
+                });
+            }
+        }
+    }
+    catch (error) {
+        console.error('Failed to parse and update chart state:', error);
+    }
+};
+const getStyleValues$3 = (styles = {}) => {
+    const borderRadiusMap = {
+        none: "0px",
+        rounded: "0.375rem",
+        large: "0.5rem",
+        "extra-large": "0.75rem",
+    };
+    const paddingMap = {
+        small: "0.5rem",
+        medium: "1rem",
+        large: "1.5rem",
+        "extra-large": "2rem",
+    };
+    const alignment = styles.alignment || "left";
+    return {
+        backgroundColor: styles.backgroundColor || "#ffffff",
+        borderRadius: borderRadiusMap[styles.borderRadius || "rounded"],
+        padding: paddingMap[styles.padding || "medium"],
+        color: styles.textColor || "#000000",
+        fontSize: styles.fontSize || "14px",
+        textAlign: alignment,
+    };
+};
+function PieChartComponent({ pieChartState, styles, appendMessage, query, isFirstLoad, widgetBackendUrl, widgetId, startLoadingTimeout, clearLoadingTimeout, content, hasWidgetData }) {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+    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) || [];
+    const values = ((_d = (_c = pieChartState === null || pieChartState === void 0 ? void 0 : pieChartState.pie_chart_data) === null || _c === void 0 ? void 0 : _c.data) === null || _d === void 0 ? void 0 : _d.values) || [];
+    ((_f = (_e = pieChartState === null || pieChartState === void 0 ? void 0 : pieChartState.pie_chart_data) === null || _e === void 0 ? void 0 : _e.data) === null || _f === void 0 ? void 0 : _f.percentages) || [];
+    const chartTitle = ((_g = pieChartState === null || pieChartState === void 0 ? void 0 : pieChartState.pie_chart_data) === null || _g === void 0 ? void 0 : _g.title) || "";
+    const units = ((_h = pieChartState === null || pieChartState === void 0 ? void 0 : pieChartState.pie_chart_data) === null || _h === void 0 ? void 0 : _h.units) || "";
+    const isEmpty = labels.length === 0 || values.length === 0;
+    const handleRefresh = async () => {
+        if (query) {
+            await clearChat$3(widgetBackendUrl, widgetId);
+            console.log('Dispatching clearChartState event for widgetId:', widgetId);
+            window.dispatchEvent(new CustomEvent('clearChartState', { detail: { widgetId } }));
+            appendMessage(new TextMessage({
+                content: `${query} and render data on pie chart`,
+                role: Role.User,
+            }));
+        }
+    };
+    React.useEffect(() => {
+        if (isEmpty && query && isFirstLoad && !(pieChartState === null || pieChartState === void 0 ? void 0 : pieChartState.agent_message) && !hasCalledRef.current) {
+            hasCalledRef.current = true;
+            handleRefresh();
+        }
+    }, [isEmpty, query, isFirstLoad, pieChartState]);
+    React.useEffect(() => {
+        console.log('PieChartComponent useEffect - isEmpty:', isEmpty, 'hasMessage:', !!(pieChartState === null || pieChartState === void 0 ? void 0 : pieChartState.agent_message), 'hasWidgetData:', hasWidgetData, 'isFirstLoad:', isFirstLoad);
+        if (isEmpty && startLoadingTimeout && !(pieChartState === null || pieChartState === void 0 ? void 0 : pieChartState.agent_message)) {
+            console.log('Starting loading timeout from PieChartComponent useEffect');
+            startLoadingTimeout();
+        }
+        else if (!isEmpty && clearLoadingTimeout) {
+            clearLoadingTimeout();
+        }
+    }, [isEmpty, startLoadingTimeout, clearLoadingTimeout, pieChartState]);
+    const backgroundColors = React.useMemo(() => {
+        return shuffleColors(DEFAULT_COLORS$2, labels.length);
+    }, [labels.length]);
+    if (isEmpty) {
+        return createLoadingComponent$3();
+    }
+    const colors = ((_k = (_j = pieChartState === null || pieChartState === void 0 ? void 0 : pieChartState.pie_chart_data) === null || _j === void 0 ? void 0 : _j.data) === null || _k === void 0 ? void 0 : _k.colors) || labels.map((_, index) => backgroundColors[index % backgroundColors.length]);
+    const transformedData = {
+        labels: labels,
+        datasets: [
+            {
+                label: chartTitle || "Data",
+                data: values,
+                backgroundColor: colors,
+                borderWidth: 0,
+            },
+        ],
+    };
+    return (jsxRuntimeExports.jsx(PieChart, { title: chartTitle, data: transformedData, units: units, content: content }));
+}
+function CopilotKitPieChart({ widget, showHeader, styles, onResetReady, widgetBackendUrl, datasetId, widgetData, }) {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
+    const isFirstLoad = (_a = widget.config) === null || _a === void 0 ? void 0 : _a.isFirstLoad;
+    const content = (_b = widget.config) === null || _b === void 0 ? void 0 : _b.content;
+    const widget_data = (_c = widget.widget_data) === null || _c === void 0 ? void 0 : _c.pie_chart_data;
+    console.log('widget_data===>', widget_data);
+    const { threadId, setThreadId } = reactCore.useCopilotContext();
+    const timeoutRef = React.useRef(null);
+    const [apiCallCount, setApiCallCount] = React.useState(0);
+    const [hasTimeoutError, setHasTimeoutError] = React.useState(false);
+    React.useEffect(() => {
+        setThreadId(widget.id);
+    }, [widget.id, setThreadId]);
+    const { state: agentState, setState: setAgentState } = reactCore.useCoAgent({
+        name: (_d = widget.config) === null || _d === void 0 ? void 0 : _d.agentName,
+        initialState: createInitialChartState$3(datasetId, widget_data),
+    });
+    const [chartState, setChartState] = React.useState(createInitialChartState$3(datasetId, widget_data));
+    const handleLoadingTimeout = React.useCallback(async () => {
+        var _a;
+        if (!widgetBackendUrl || !widget.id || (chartState === null || chartState === void 0 ? void 0 : chartState.agent_message) || hasTimeoutError) {
+            console.log('Skipping API call - conditions not met');
+            return;
+        }
+        console.log('Loading timeout triggered for widget:', widget.id, 'API call count:', apiCallCount);
+        if (apiCallCount >= 30) {
+            console.log('API call limit reached for widget:', widget.id);
+            setHasTimeoutError(true);
+            setChartState(prevState => (Object.assign(Object.assign({}, prevState), { agent_message: "Timeout: Unable to load data after multiple attempts. Please try refreshing the widget." })));
+            return;
+        }
+        setApiCallCount(prev => prev + 1);
+        const agentName = ((_a = widget.config) === null || _a === void 0 ? void 0 : _a.agentName) || "adk-construction-project-agent";
+        console.log('Calling loadAgentState API for widget:', widget.id);
+        const apiResponse = await loadAgentState$3(widgetBackendUrl, widget.id, agentName);
+        console.log('API response received:', apiResponse);
+        if (apiResponse && !(chartState === null || chartState === void 0 ? void 0 : chartState.agent_message)) {
+            parseAndUpdateChartState$3(apiResponse, setChartState);
+        }
+    }, [widgetBackendUrl, widget.id, setChartState, (_e = widget.config) === null || _e === void 0 ? void 0 : _e.agentName, chartState, apiCallCount, hasTimeoutError]);
+    const startLoadingTimeout = React.useCallback(() => {
+        if (timeoutRef.current) {
+            clearTimeout(timeoutRef.current);
+        }
+        console.log('Scheduling next API call in 3 seconds');
+        timeoutRef.current = setTimeout(() => {
+            handleLoadingTimeout();
+        }, CHART_REFRESH_TIMEOUT$3);
+    }, [handleLoadingTimeout]);
+    const clearLoadingTimeout = React.useCallback(() => {
+        if (timeoutRef.current) {
+            clearTimeout(timeoutRef.current);
+            timeoutRef.current = null;
+        }
+    }, []);
+    React.useEffect(() => {
+        return () => {
+            if (timeoutRef.current) {
+                clearTimeout(timeoutRef.current);
+            }
+        };
+    }, []);
+    const { appendMessage, reset } = reactCore.useCopilotChat();
+    React.useEffect(() => {
+        if (onResetReady && reset && widget.id) {
+            const wrappedReset = () => {
+                reset();
+                window.dispatchEvent(new CustomEvent('clearChartState', { detail: { widgetId: widget.id } }));
+            };
+            onResetReady(widget.id, wrappedReset);
+        }
+    }, [reset, widget.id, onResetReady]);
+    React.useEffect(() => {
+        const handleTriggerAgent = (event) => {
+            const { widgetId, query, agentType: eventAgentType, datasetId } = event.detail;
+            reset();
+            if (widgetId === widget.id) {
+                let messageContent = `${query} and render data on pie chart`;
+                console.log('triggering to datasetId==>', datasetId);
+                setChartState(createInitialChartState$3(datasetId));
+                setAgentState(createInitialChartState$3(datasetId));
+                setApiCallCount(0);
+                setHasTimeoutError(false);
+                appendMessage(new TextMessage({
+                    content: messageContent,
+                    role: Role.User,
+                }));
+                // Start polling for chart data
+                startLoadingTimeout();
+            }
+        };
+        const handleClearChartState = (event) => {
+            const { widgetId } = event.detail;
+            if (widgetId === widget.id) {
+                setChartState(createInitialChartState$3(datasetId));
+                setAgentState(createInitialChartState$3(datasetId));
+                setApiCallCount(0);
+                setHasTimeoutError(false);
+            }
+        };
+        window.addEventListener('triggerAgent', handleTriggerAgent);
+        window.addEventListener('clearChartState', handleClearChartState);
+        return () => {
+            window.removeEventListener('triggerAgent', handleTriggerAgent);
+            window.removeEventListener('clearChartState', handleClearChartState);
+        };
+    }, [widget.id, appendMessage, setChartState, startLoadingTimeout]);
+    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) &&
+                    (!((_h = (_g = (_f = chartState.pie_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.pie_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))
+                    ? (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 }) }) })) : (jsxRuntimeExports.jsx(PieChartComponent, { pieChartState: chartState, styles: styles, appendMessage: appendMessage, content: content, query: (_m = widget.config) === null || _m === void 0 ? void 0 : _m.query, isFirstLoad: isFirstLoad, widgetBackendUrl: widgetBackendUrl, widgetId: widget.id, startLoadingTimeout: startLoadingTimeout, clearLoadingTimeout: clearLoadingTimeout, hasWidgetData: !!(((_p = (_o = widget_data === null || widget_data === void 0 ? void 0 : widget_data.data) === null || _o === void 0 ? void 0 : _o.labels) === null || _p === void 0 ? void 0 : _p.length) && ((_r = (_q = widget_data === null || widget_data === void 0 ? void 0 : widget_data.data) === null || _q === void 0 ? void 0 : _q.values) === null || _r === void 0 ? void 0 : _r.length)) })) })] }));
+}
+function PieChartWidget({ widget, showHeader = true, widgetBackendUrl, onResetReady, widgetIds, datasetId, widgetData, }) {
+    var _a, _b;
+    const styles = getStyleValues$3((_a = widget.config) === null || _a === void 0 ? void 0 : _a.styles);
+    const getRuntimeUrl = () => {
+        var _a;
+        const baseUrl = widgetBackendUrl || '';
+        const agentName = ((_a = widget.config) === null || _a === void 0 ? void 0 : _a.agentName) || 'default-agent';
+        return `${baseUrl}/api/copilot/${agentName}`;
+    };
+    return (jsxRuntimeExports.jsx(reactCore.CopilotKit, { runtimeUrl: getRuntimeUrl(), showDevConsole: false, agent: ((_b = widget.config) === null || _b === void 0 ? void 0 : _b.agentName) || "widget_assistant", children: jsxRuntimeExports.jsx(CopilotKitPieChart, { widget: widget, showHeader: showHeader, styles: styles, onResetReady: onResetReady, widgetBackendUrl: widgetBackendUrl, datasetId: datasetId }) }));
+}
+
+const CHART_REFRESH_TIMEOUT$2 = 3000;
+const DEFAULT_COLORS$1 = ["#E4DCB8", "#DAC46C", "#808080", "#582809", "#A3ADD0", "#398E6F", "#AF123D", "#8C99C4", "#5290AC", "#601B07", "#50649D", "#B4A8A0", "#6F2587"];
+const clearChat$2 = async (widgetBackendUrl, widgetId) => {
+    if (!widgetBackendUrl || !widgetId)
+        return;
+    console.log('clearChat called for widgetId:', widgetId);
+    try {
+        await fetch(`${widgetBackendUrl}/api/clear-chat`, {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+            },
+            body: JSON.stringify({
+                session_id: widgetId,
+                delete_state: true
+            }),
+        });
+        console.log('Dispatching clearChartState event from clearChat for widgetId:', widgetId);
+        window.dispatchEvent(new CustomEvent('clearChartState', { detail: { widgetId } }));
+    }
+    catch (error) {
+        console.error('Failed to clear chat:', error);
+    }
+};
+const createLoadingComponent$2 = (message = "Loading chart data...") => (jsxRuntimeExports.jsx("div", { className: "flex items-center justify-center h-full", children: jsxRuntimeExports.jsxs("div", { className: "flex flex-col items-center gap-2", children: [jsxRuntimeExports.jsx(lucideReact.RefreshCw, { className: "h-6 w-6 animate-spin text-gray-800" }), jsxRuntimeExports.jsx("p", { className: "text-sm text-gray-500", children: message })] }) }));
+const createInitialChartState$2 = (datasetId, seriesBarChartState) => {
+    return {
+        series_bar_chart_data: {
+            title: (seriesBarChartState === null || seriesBarChartState === void 0 ? void 0 : seriesBarChartState.title) || "",
+            type: (seriesBarChartState === null || seriesBarChartState === void 0 ? void 0 : seriesBarChartState.type) || "series_bar",
+            chart_type: (seriesBarChartState === null || seriesBarChartState === void 0 ? void 0 : seriesBarChartState.chart_type) || "financial",
+            x_axis_title: (seriesBarChartState === null || seriesBarChartState === void 0 ? void 0 : seriesBarChartState.x_axis_title) || "",
+            y_axis_title: (seriesBarChartState === null || seriesBarChartState === void 0 ? void 0 : seriesBarChartState.y_axis_title) || "",
+            orientation: (seriesBarChartState === null || seriesBarChartState === void 0 ? void 0 : seriesBarChartState.orientation) || "vertical",
+            units: (seriesBarChartState === null || seriesBarChartState === void 0 ? void 0 : seriesBarChartState.units) || "",
+            data: {
+                labels: (seriesBarChartState === null || seriesBarChartState === void 0 ? void 0 : seriesBarChartState.data.labels) || [],
+                series: (seriesBarChartState === null || seriesBarChartState === void 0 ? void 0 : seriesBarChartState.data.series) || [],
+                total: (seriesBarChartState === null || seriesBarChartState === void 0 ? void 0 : seriesBarChartState.data.total) || 0,
+                average: (seriesBarChartState === null || seriesBarChartState === void 0 ? void 0 : seriesBarChartState.data.average) || 0
+            },
+            metadata: {
+                categories: (seriesBarChartState === null || seriesBarChartState === void 0 ? void 0 : seriesBarChartState.metadata.categories) || 0,
+                series_count: (seriesBarChartState === null || seriesBarChartState === void 0 ? void 0 : seriesBarChartState.metadata.series_count) || 0,
+                highest_category: (seriesBarChartState === null || seriesBarChartState === void 0 ? void 0 : seriesBarChartState.metadata.highest_category) || "",
+                highest_value: (seriesBarChartState === null || seriesBarChartState === void 0 ? void 0 : seriesBarChartState.metadata.highest_value) || 0,
+                highest_series: (seriesBarChartState === null || seriesBarChartState === void 0 ? void 0 : seriesBarChartState.metadata.highest_series) || "",
+                lowest_category: (seriesBarChartState === null || seriesBarChartState === void 0 ? void 0 : seriesBarChartState.metadata.lowest_category) || "",
+                lowest_value: (seriesBarChartState === null || seriesBarChartState === void 0 ? void 0 : seriesBarChartState.metadata.lowest_value) || 0,
+                lowest_series: (seriesBarChartState === null || seriesBarChartState === void 0 ? void 0 : seriesBarChartState.metadata.lowest_series) || "",
+                range: (seriesBarChartState === null || seriesBarChartState === void 0 ? void 0 : seriesBarChartState.metadata.range) || 0,
+                series_totals: (seriesBarChartState === null || seriesBarChartState === void 0 ? void 0 : seriesBarChartState.metadata.series_totals) || {},
+                series_averages: (seriesBarChartState === null || seriesBarChartState === void 0 ? void 0 : seriesBarChartState.metadata.series_averages) || {}
+            }
+        },
+        dataset_id: datasetId || "home_generation_dataset"
+    };
+};
+const loadAgentState$2 = async (widgetBackendUrl, threadId, agentName) => {
+    try {
+        const response = await fetch(`${widgetBackendUrl}/api/copilot/${agentName}`, {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+            },
+            body: JSON.stringify({
+                "operationName": "loadAgentState",
+                "query": "query loadAgentState($data: LoadAgentStateInput!) {\n  loadAgentState(data: $data) {\n    threadId\n    threadExists\n    state\n    messages\n    __typename\n  }\n}",
+                "variables": {
+                    "data": {
+                        "agentName": agentName,
+                        "threadId": threadId
+                    }
+                }
+            }),
+        });
+        if (!response.ok) {
+            throw new Error(`HTTP error! status: ${response.status}`);
+        }
+        const result = await response.json();
+        return result;
+    }
+    catch (error) {
+        console.error('Failed to load agent state:', error);
+        return null;
+    }
+};
+const parseAndUpdateChartState$2 = (apiResponse, setChartState) => {
+    var _a, _b;
+    try {
+        if ((_b = (_a = apiResponse === null || apiResponse === void 0 ? void 0 : apiResponse.data) === null || _a === void 0 ? void 0 : _a.loadAgentState) === null || _b === void 0 ? void 0 : _b.state) {
+            const stateString = apiResponse.data.loadAgentState.state;
+            const parsedState = JSON.parse(stateString);
+            if (parsedState.state) {
+                const chartData = parsedState.state;
+                setChartState((prevState) => {
+                    const newChartState = Object.assign({}, prevState);
+                    if (chartData.series_bar_chart_data) {
+                        newChartState.series_bar_chart_data = chartData.series_bar_chart_data;
+                    }
+                    if (chartData.agent_message) {
+                        newChartState.agent_message = chartData.agent_message;
+                    }
+                    return newChartState;
+                });
+            }
+        }
+    }
+    catch (error) {
+        console.error('Failed to parse and update chart state:', error);
+    }
+};
+const getStyleValues$2 = (styles = {}) => {
+    const borderRadiusMap = {
+        none: "0px",
+        rounded: "0.375rem",
+        large: "0.5rem",
+        "extra-large": "0.75rem",
+    };
+    const paddingMap = {
+        small: "0.5rem",
+        medium: "1rem",
+        large: "1.5rem",
+        "extra-large": "2rem",
+    };
+    const alignment = styles.alignment || "left";
+    return {
+        backgroundColor: styles.backgroundColor || "#ffffff",
+        borderRadius: borderRadiusMap[styles.borderRadius || "rounded"],
+        padding: paddingMap[styles.padding || "medium"],
+        color: styles.textColor || "#000000",
+        fontSize: styles.fontSize || "14px",
+        textAlign: alignment,
+    };
+};
+function SeriesBarChartComponent$1({ orientation, seriesBarChartState, styles, appendMessage, query, isFirstLoad, widgetBackendUrl, widgetId, startLoadingTimeout, clearLoadingTimeout, content, hasWidgetData }) {
+    var _a, _b, _c, _d, _e, _f, _g, _h;
+    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) || [];
+    const series = ((_d = (_c = seriesBarChartState === null || seriesBarChartState === void 0 ? void 0 : seriesBarChartState.series_bar_chart_data) === null || _c === void 0 ? void 0 : _c.data) === null || _d === void 0 ? void 0 : _d.series) || [];
+    const chartTitle = ((_e = seriesBarChartState === null || seriesBarChartState === void 0 ? void 0 : seriesBarChartState.series_bar_chart_data) === null || _e === void 0 ? void 0 : _e.title) || "";
+    const units = ((_f = seriesBarChartState === null || seriesBarChartState === void 0 ? void 0 : seriesBarChartState.series_bar_chart_data) === null || _f === void 0 ? void 0 : _f.units) || "";
+    const x_axis_title = ((_g = seriesBarChartState === null || seriesBarChartState === void 0 ? void 0 : seriesBarChartState.series_bar_chart_data) === null || _g === void 0 ? void 0 : _g.x_axis_title) || "";
+    const y_axis_title = ((_h = seriesBarChartState === null || seriesBarChartState === void 0 ? void 0 : seriesBarChartState.series_bar_chart_data) === null || _h === void 0 ? void 0 : _h.y_axis_title) || "";
+    const isEmpty = labels.length === 0 || series.length === 0;
+    const handleRefresh = async () => {
+        if (query) {
+            await clearChat$2(widgetBackendUrl, widgetId);
+            console.log('Dispatching clearChartState event for widgetId:', widgetId);
+            window.dispatchEvent(new CustomEvent('clearChartState', { detail: { widgetId } }));
+            appendMessage(new TextMessage({
+                content: `${query} and render data on a series bar chart`,
+                role: Role.User,
+            }));
+        }
+    };
+    React.useEffect(() => {
+        if (isEmpty && query && isFirstLoad && !(seriesBarChartState === null || seriesBarChartState === void 0 ? void 0 : seriesBarChartState.agent_message) && !hasCalledRef.current) {
+            hasCalledRef.current = true;
+            handleRefresh();
+        }
+    }, [isEmpty, query, isFirstLoad, seriesBarChartState]);
+    React.useEffect(() => {
+        console.log('SeriesBarChartComponent useEffect - isEmpty:', isEmpty, 'hasMessage:', !!(seriesBarChartState === null || seriesBarChartState === void 0 ? void 0 : seriesBarChartState.agent_message), 'hasWidgetData:', hasWidgetData, 'isFirstLoad:', isFirstLoad);
+        if (isEmpty && startLoadingTimeout && !(seriesBarChartState === null || seriesBarChartState === void 0 ? void 0 : seriesBarChartState.agent_message)) {
+            console.log('Starting loading timeout from SeriesBarChartComponent useEffect');
+            startLoadingTimeout();
+        }
+        else if (!isEmpty && clearLoadingTimeout) {
+            clearLoadingTimeout();
+        }
+    }, [isEmpty, startLoadingTimeout, clearLoadingTimeout, seriesBarChartState]);
+    const finalColors = React.useMemo(() => {
+        return shuffleColors(DEFAULT_COLORS$1, series.length);
+    }, [series.length]);
+    if (isEmpty) {
+        return createLoadingComponent$2();
+    }
+    const transformedData = {
+        labels: labels,
+        datasets: series.map((seriesItem, index) => ({
+            label: seriesItem.name,
+            data: seriesItem.values,
+            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, content: content, x_axis_title: x_axis_title, y_axis_title: y_axis_title }));
+}
+function CopilotKitSeriesBarChart$1({ widget, showHeader, styles, onResetReady, widgetBackendUrl, datasetId, widgetData, }) {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s;
+    const orientation = ((_a = widget.config) === null || _a === void 0 ? void 0 : _a.orientation) || "vertical";
+    const isFirstLoad = (_b = widget.config) === null || _b === void 0 ? void 0 : _b.isFirstLoad;
+    const content = (_c = widget.config) === null || _c === void 0 ? void 0 : _c.content;
+    const widget_data = (_d = widget.widget_data) === null || _d === void 0 ? void 0 : _d.series_bar_chart_data;
+    console.log('widget_data===>', widget_data);
+    const { threadId, setThreadId } = reactCore.useCopilotContext();
+    const timeoutRef = React.useRef(null);
+    const [apiCallCount, setApiCallCount] = React.useState(0);
+    const [hasTimeoutError, setHasTimeoutError] = React.useState(false);
+    React.useEffect(() => {
+        setThreadId(widget.id);
+    }, [widget.id, setThreadId]);
+    const { state: agentState, setState: setAgentState } = reactCore.useCoAgent({
+        name: (_e = widget.config) === null || _e === void 0 ? void 0 : _e.agentName,
+        initialState: createInitialChartState$2(datasetId, widget_data),
+    });
+    const [chartState, setChartState] = React.useState(createInitialChartState$2(datasetId, widget_data));
+    const handleLoadingTimeout = React.useCallback(async () => {
+        var _a;
+        if (!widgetBackendUrl || !widget.id || (chartState === null || chartState === void 0 ? void 0 : chartState.agent_message) || hasTimeoutError) {
+            console.log('Skipping API call - conditions not met');
+            return;
+        }
+        console.log('Loading timeout triggered for widget:', widget.id, 'API call count:', apiCallCount);
+        if (apiCallCount >= 30) {
+            console.log('API call limit reached for widget:', widget.id);
+            setHasTimeoutError(true);
+            setChartState(prevState => (Object.assign(Object.assign({}, prevState), { agent_message: "Timeout: Unable to load data after multiple attempts. Please try refreshing the widget." })));
+            return;
+        }
+        setApiCallCount(prev => prev + 1);
+        const agentName = ((_a = widget.config) === null || _a === void 0 ? void 0 : _a.agentName) || "adk-construction-project-agent";
+        console.log('Calling loadAgentState API for widget:', widget.id);
+        const apiResponse = await loadAgentState$2(widgetBackendUrl, widget.id, agentName);
+        console.log('API response received:', apiResponse);
+        if (apiResponse && !(chartState === null || chartState === void 0 ? void 0 : chartState.agent_message)) {
+            parseAndUpdateChartState$2(apiResponse, setChartState);
+        }
+    }, [widgetBackendUrl, widget.id, setChartState, (_f = widget.config) === null || _f === void 0 ? void 0 : _f.agentName, chartState, apiCallCount, hasTimeoutError]);
+    const startLoadingTimeout = React.useCallback(() => {
+        if (timeoutRef.current) {
+            clearTimeout(timeoutRef.current);
+        }
+        console.log('Scheduling next API call in 3 seconds');
+        timeoutRef.current = setTimeout(() => {
+            handleLoadingTimeout();
+        }, CHART_REFRESH_TIMEOUT$2);
+    }, [handleLoadingTimeout]);
+    const clearLoadingTimeout = React.useCallback(() => {
+        if (timeoutRef.current) {
+            clearTimeout(timeoutRef.current);
+            timeoutRef.current = null;
+        }
+    }, []);
+    React.useEffect(() => {
+        return () => {
+            if (timeoutRef.current) {
+                clearTimeout(timeoutRef.current);
+            }
+        };
+    }, []);
+    const { appendMessage, reset } = reactCore.useCopilotChat();
+    React.useEffect(() => {
+        if (onResetReady && reset && widget.id) {
+            const wrappedReset = () => {
+                reset();
+                window.dispatchEvent(new CustomEvent('clearChartState', { detail: { widgetId: widget.id } }));
+            };
+            onResetReady(widget.id, wrappedReset);
+        }
+    }, [reset, widget.id, onResetReady]);
+    React.useEffect(() => {
+        const handleTriggerAgent = (event) => {
+            const { widgetId, query, agentType: eventAgentType, datasetId } = event.detail;
+            if (widgetId === widget.id) {
+                let messageContent = `${query} and render data on a series bar chart`;
+                reset();
+                console.log('triggering to datasetId==>', datasetId);
+                setChartState(createInitialChartState$2(datasetId));
+                setAgentState(createInitialChartState$2(datasetId));
+                setApiCallCount(0);
+                setHasTimeoutError(false);
+                appendMessage(new TextMessage({
+                    content: messageContent,
+                    role: Role.User,
+                }));
+                // Start polling for chart data
+                startLoadingTimeout();
+            }
+        };
+        const handleClearChartState = (event) => {
+            const { widgetId } = event.detail;
+            if (widgetId === widget.id) {
+                setChartState(createInitialChartState$2(datasetId));
+                setAgentState(createInitialChartState$2(datasetId));
+                setApiCallCount(0);
+                setHasTimeoutError(false);
+            }
+        };
+        window.addEventListener('triggerAgent', handleTriggerAgent);
+        window.addEventListener('clearChartState', handleClearChartState);
+        return () => {
+            window.removeEventListener('triggerAgent', handleTriggerAgent);
+            window.removeEventListener('clearChartState', handleClearChartState);
+        };
+    }, [widget.id, appendMessage, setChartState, startLoadingTimeout]);
+    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) &&
+                    (!((_j = (_h = (_g = chartState.series_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.series_bar_chart_data) === null || _k === void 0 ? void 0 : _k.data) === null || _l === void 0 ? void 0 : _l.series) === null || _m === void 0 ? void 0 : _m.length))
+                    ? (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 }) }) })) : (jsxRuntimeExports.jsx(SeriesBarChartComponent$1, { orientation: orientation, seriesBarChartState: chartState, styles: styles, appendMessage: appendMessage, content: content, query: (_o = widget.config) === null || _o === void 0 ? void 0 : _o.query, isFirstLoad: isFirstLoad, widgetBackendUrl: widgetBackendUrl, widgetId: widget.id, startLoadingTimeout: startLoadingTimeout, clearLoadingTimeout: clearLoadingTimeout, hasWidgetData: !!(((_q = (_p = widget_data === null || widget_data === void 0 ? void 0 : widget_data.data) === null || _p === void 0 ? void 0 : _p.labels) === null || _q === void 0 ? void 0 : _q.length) && ((_s = (_r = widget_data === null || widget_data === void 0 ? void 0 : widget_data.data) === null || _r === void 0 ? void 0 : _r.series) === null || _s === void 0 ? void 0 : _s.length)) })) })] }));
+}
+function SeriesBarChartWidget({ widget, showHeader = true, widgetBackendUrl, onResetReady, widgetIds, datasetId, widgetData, }) {
+    var _a, _b;
+    const styles = getStyleValues$2((_a = widget.config) === null || _a === void 0 ? void 0 : _a.styles);
+    const getRuntimeUrl = () => {
+        var _a;
+        const baseUrl = widgetBackendUrl || '';
+        const agentName = ((_a = widget.config) === null || _a === void 0 ? void 0 : _a.agentName) || 'default-agent';
+        return `${baseUrl}/api/copilot/${agentName}`;
+    };
+    return (jsxRuntimeExports.jsx(reactCore.CopilotKit, { runtimeUrl: getRuntimeUrl(), showDevConsole: false, agent: ((_b = widget.config) === null || _b === void 0 ? void 0 : _b.agentName) || "widget_assistant", children: jsxRuntimeExports.jsx(CopilotKitSeriesBarChart$1, { widget: widget, showHeader: showHeader, styles: styles, onResetReady: onResetReady, widgetBackendUrl: widgetBackendUrl, datasetId: datasetId }) }));
+}
+
+const CHART_REFRESH_TIMEOUT$1 = 3000;
+const DEFAULT_COLORS = ["#E4DCB8", "#DAC46C", "#808080", "#582809", "#A3ADD0", "#398E6F", "#AF123D", "#8C99C4", "#5290AC", "#601B07", "#50649D", "#B4A8A0", "#6F2587"];
+const clearChat$1 = async (widgetBackendUrl, widgetId) => {
+    if (!widgetBackendUrl || !widgetId)
+        return;
+    console.log('clearChat called for widgetId:', widgetId);
+    try {
+        await fetch(`${widgetBackendUrl}/api/clear-chat`, {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+            },
+            body: JSON.stringify({
+                session_id: widgetId,
+                delete_state: true
+            }),
+        });
+        console.log('Dispatching clearChartState event from clearChat for widgetId:', widgetId);
+        window.dispatchEvent(new CustomEvent('clearChartState', { detail: { widgetId } }));
+    }
+    catch (error) {
+        console.error('Failed to clear chat:', error);
+    }
+};
+const createLoadingComponent$1 = (message = "Loading chart data...") => (jsxRuntimeExports.jsx("div", { className: "flex items-center justify-center h-full", children: jsxRuntimeExports.jsxs("div", { className: "flex flex-col items-center gap-2", children: [jsxRuntimeExports.jsx(lucideReact.RefreshCw, { className: "h-6 w-6 animate-spin text-gray-800" }), jsxRuntimeExports.jsx("p", { className: "text-sm text-gray-500", children: message })] }) }));
+const createInitialChartState$1 = (datasetId, seriesBarChartState) => {
+    return {
+        series_bar_chart_data: {
+            title: (seriesBarChartState === null || seriesBarChartState === void 0 ? void 0 : seriesBarChartState.title) || "",
+            type: (seriesBarChartState === null || seriesBarChartState === void 0 ? void 0 : seriesBarChartState.type) || "series_bar",
+            chart_type: (seriesBarChartState === null || seriesBarChartState === void 0 ? void 0 : seriesBarChartState.chart_type) || "financial",
+            x_axis_title: (seriesBarChartState === null || seriesBarChartState === void 0 ? void 0 : seriesBarChartState.x_axis_title) || "",
+            y_axis_title: (seriesBarChartState === null || seriesBarChartState === void 0 ? void 0 : seriesBarChartState.y_axis_title) || "",
+            orientation: (seriesBarChartState === null || seriesBarChartState === void 0 ? void 0 : seriesBarChartState.orientation) || "vertical",
+            units: (seriesBarChartState === null || seriesBarChartState === void 0 ? void 0 : seriesBarChartState.units) || "",
+            data: {
+                labels: (seriesBarChartState === null || seriesBarChartState === void 0 ? void 0 : seriesBarChartState.data.labels) || [],
+                series: (seriesBarChartState === null || seriesBarChartState === void 0 ? void 0 : seriesBarChartState.data.series) || [],
+                total: (seriesBarChartState === null || seriesBarChartState === void 0 ? void 0 : seriesBarChartState.data.total) || 0,
+                average: (seriesBarChartState === null || seriesBarChartState === void 0 ? void 0 : seriesBarChartState.data.average) || 0
+            },
+            metadata: {
+                categories: (seriesBarChartState === null || seriesBarChartState === void 0 ? void 0 : seriesBarChartState.metadata.categories) || 0,
+                series_count: (seriesBarChartState === null || seriesBarChartState === void 0 ? void 0 : seriesBarChartState.metadata.series_count) || 0,
+                highest_category: (seriesBarChartState === null || seriesBarChartState === void 0 ? void 0 : seriesBarChartState.metadata.highest_category) || "",
+                highest_value: (seriesBarChartState === null || seriesBarChartState === void 0 ? void 0 : seriesBarChartState.metadata.highest_value) || 0,
+                highest_series: (seriesBarChartState === null || seriesBarChartState === void 0 ? void 0 : seriesBarChartState.metadata.highest_series) || "",
+                lowest_category: (seriesBarChartState === null || seriesBarChartState === void 0 ? void 0 : seriesBarChartState.metadata.lowest_category) || "",
+                lowest_value: (seriesBarChartState === null || seriesBarChartState === void 0 ? void 0 : seriesBarChartState.metadata.lowest_value) || 0,
+                lowest_series: (seriesBarChartState === null || seriesBarChartState === void 0 ? void 0 : seriesBarChartState.metadata.lowest_series) || "",
+                range: (seriesBarChartState === null || seriesBarChartState === void 0 ? void 0 : seriesBarChartState.metadata.range) || 0,
+                series_totals: (seriesBarChartState === null || seriesBarChartState === void 0 ? void 0 : seriesBarChartState.metadata.series_totals) || {},
+                series_averages: (seriesBarChartState === null || seriesBarChartState === void 0 ? void 0 : seriesBarChartState.metadata.series_averages) || {}
+            }
+        },
+        dataset_id: datasetId || "home_generation_dataset"
+    };
+};
+const loadAgentState$1 = async (widgetBackendUrl, threadId, agentName) => {
+    try {
+        const response = await fetch(`${widgetBackendUrl}/api/copilot/${agentName}`, {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+            },
+            body: JSON.stringify({
+                "operationName": "loadAgentState",
+                "query": "query loadAgentState($data: LoadAgentStateInput!) {\n  loadAgentState(data: $data) {\n    threadId\n    threadExists\n    state\n    messages\n    __typename\n  }\n}",
+                "variables": {
+                    "data": {
+                        "agentName": agentName,
+                        "threadId": threadId
+                    }
+                }
+            }),
+        });
+        if (!response.ok) {
+            throw new Error(`HTTP error! status: ${response.status}`);
+        }
+        const result = await response.json();
+        return result;
+    }
+    catch (error) {
+        console.error('Failed to load agent state:', error);
+        return null;
+    }
+};
+const parseAndUpdateChartState$1 = (apiResponse, setChartState) => {
+    var _a, _b;
+    try {
+        if ((_b = (_a = apiResponse === null || apiResponse === void 0 ? void 0 : apiResponse.data) === null || _a === void 0 ? void 0 : _a.loadAgentState) === null || _b === void 0 ? void 0 : _b.state) {
+            const stateString = apiResponse.data.loadAgentState.state;
+            const parsedState = JSON.parse(stateString);
+            if (parsedState.state) {
+                const chartData = parsedState.state;
+                setChartState((prevState) => {
+                    const newChartState = Object.assign({}, prevState);
+                    if (chartData.series_bar_chart_data) {
+                        newChartState.series_bar_chart_data = chartData.series_bar_chart_data;
+                    }
+                    if (chartData.agent_message) {
+                        newChartState.agent_message = chartData.agent_message;
+                    }
+                    return newChartState;
+                });
+            }
+        }
+    }
+    catch (error) {
+        console.error('Failed to parse and update chart state:', error);
+    }
+};
+const getStyleValues$1 = (styles = {}) => {
+    const borderRadiusMap = {
+        none: "0px",
+        rounded: "0.375rem",
+        large: "0.5rem",
+        "extra-large": "0.75rem",
+    };
+    const paddingMap = {
+        small: "0.5rem",
+        medium: "1rem",
+        large: "1.5rem",
+        "extra-large": "2rem",
+    };
+    const alignment = styles.alignment || "left";
+    return {
+        backgroundColor: styles.backgroundColor || "#ffffff",
+        borderRadius: borderRadiusMap[styles.borderRadius || "rounded"],
+        padding: paddingMap[styles.padding || "medium"],
+        color: styles.textColor || "#000000",
+        fontSize: styles.fontSize || "14px",
+        textAlign: alignment,
+    };
+};
+function SeriesBarChartComponent({ orientation, seriesBarChartState, styles, appendMessage, query, isFirstLoad, widgetBackendUrl, widgetId, startLoadingTimeout, clearLoadingTimeout, content, hasWidgetData }) {
+    var _a, _b, _c, _d, _e, _f, _g, _h;
+    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) || [];
+    const series = ((_d = (_c = seriesBarChartState === null || seriesBarChartState === void 0 ? void 0 : seriesBarChartState.series_bar_chart_data) === null || _c === void 0 ? void 0 : _c.data) === null || _d === void 0 ? void 0 : _d.series) || [];
+    const chartTitle = ((_e = seriesBarChartState === null || seriesBarChartState === void 0 ? void 0 : seriesBarChartState.series_bar_chart_data) === null || _e === void 0 ? void 0 : _e.title) || "";
+    const units = ((_f = seriesBarChartState === null || seriesBarChartState === void 0 ? void 0 : seriesBarChartState.series_bar_chart_data) === null || _f === void 0 ? void 0 : _f.units) || "";
+    const x_axis_title = ((_g = seriesBarChartState === null || seriesBarChartState === void 0 ? void 0 : seriesBarChartState.series_bar_chart_data) === null || _g === void 0 ? void 0 : _g.x_axis_title) || "";
+    const y_axis_title = ((_h = seriesBarChartState === null || seriesBarChartState === void 0 ? void 0 : seriesBarChartState.series_bar_chart_data) === null || _h === void 0 ? void 0 : _h.y_axis_title) || "";
+    const isEmpty = labels.length === 0 || series.length === 0;
+    const handleRefresh = async () => {
+        if (query) {
+            await clearChat$1(widgetBackendUrl, widgetId);
+            console.log('Dispatching clearChartState event for widgetId:', widgetId);
+            window.dispatchEvent(new CustomEvent('clearChartState', { detail: { widgetId } }));
+            appendMessage(new TextMessage({
+                content: `${query} and render data on a series bar chart`,
+                role: Role.User,
+            }));
+        }
+    };
+    React.useEffect(() => {
+        if (isEmpty && query && isFirstLoad && !(seriesBarChartState === null || seriesBarChartState === void 0 ? void 0 : seriesBarChartState.agent_message) && !hasCalledRef.current) {
+            hasCalledRef.current = true;
+            handleRefresh();
+        }
+    }, [isEmpty, query, isFirstLoad, seriesBarChartState]);
+    React.useEffect(() => {
+        console.log('SeriesBarChartComponent useEffect - isEmpty:', isEmpty, 'hasMessage:', !!(seriesBarChartState === null || seriesBarChartState === void 0 ? void 0 : seriesBarChartState.agent_message), 'hasWidgetData:', hasWidgetData, 'isFirstLoad:', isFirstLoad);
+        if (isEmpty && startLoadingTimeout && !(seriesBarChartState === null || seriesBarChartState === void 0 ? void 0 : seriesBarChartState.agent_message)) {
+            console.log('Starting loading timeout from SeriesBarChartComponent useEffect');
+            startLoadingTimeout();
+        }
+        else if (!isEmpty && clearLoadingTimeout) {
+            clearLoadingTimeout();
+        }
+    }, [isEmpty, startLoadingTimeout, clearLoadingTimeout, seriesBarChartState]);
+    const finalColors = React.useMemo(() => {
+        return shuffleColors(DEFAULT_COLORS, series.length);
+    }, [series.length]);
+    if (isEmpty) {
+        return createLoadingComponent$1();
+    }
+    const transformedData = {
+        labels: labels,
+        datasets: series.map((seriesItem, index) => ({
+            label: seriesItem.name,
+            data: seriesItem.values,
+            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(SeriesLineChart, { orientation: orientation, title: chartTitle, data: transformedData, units: units, content: content, x_axis_title: x_axis_title, y_axis_title: y_axis_title }));
+}
+function CopilotKitSeriesBarChart({ widget, showHeader, styles, onResetReady, widgetBackendUrl, datasetId, widgetData, }) {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s;
+    const orientation = ((_a = widget.config) === null || _a === void 0 ? void 0 : _a.orientation) || "vertical";
+    const isFirstLoad = (_b = widget.config) === null || _b === void 0 ? void 0 : _b.isFirstLoad;
+    const content = (_c = widget.config) === null || _c === void 0 ? void 0 : _c.content;
+    const widget_data = (_d = widget.widget_data) === null || _d === void 0 ? void 0 : _d.series_bar_chart_data;
+    console.log('widget_data===>', widget_data);
+    const { threadId, setThreadId } = reactCore.useCopilotContext();
+    const timeoutRef = React.useRef(null);
+    const [apiCallCount, setApiCallCount] = React.useState(0);
+    const [hasTimeoutError, setHasTimeoutError] = React.useState(false);
+    React.useEffect(() => {
+        setThreadId(widget.id);
+    }, [widget.id, setThreadId]);
+    const { state: agentState, setState: setAgentState } = reactCore.useCoAgent({
+        name: (_e = widget.config) === null || _e === void 0 ? void 0 : _e.agentName,
+        initialState: createInitialChartState$1(datasetId, widget_data),
+    });
+    const [chartState, setChartState] = React.useState(createInitialChartState$1(datasetId, widget_data));
+    const handleLoadingTimeout = React.useCallback(async () => {
+        var _a;
+        if (!widgetBackendUrl || !widget.id || (chartState === null || chartState === void 0 ? void 0 : chartState.agent_message) || hasTimeoutError) {
+            console.log('Skipping API call - conditions not met');
+            return;
+        }
+        console.log('Loading timeout triggered for widget:', widget.id, 'API call count:', apiCallCount);
+        if (apiCallCount >= 30) {
+            console.log('API call limit reached for widget:', widget.id);
+            setHasTimeoutError(true);
+            setChartState(prevState => (Object.assign(Object.assign({}, prevState), { agent_message: "Timeout: Unable to load data after multiple attempts. Please try refreshing the widget." })));
+            return;
+        }
+        setApiCallCount(prev => prev + 1);
+        const agentName = ((_a = widget.config) === null || _a === void 0 ? void 0 : _a.agentName) || "adk-construction-project-agent";
+        console.log('Calling loadAgentState API for widget:', widget.id);
+        const apiResponse = await loadAgentState$1(widgetBackendUrl, widget.id, agentName);
+        console.log('API response received:', apiResponse);
+        if (apiResponse && !(chartState === null || chartState === void 0 ? void 0 : chartState.agent_message)) {
+            parseAndUpdateChartState$1(apiResponse, setChartState);
+        }
+    }, [widgetBackendUrl, widget.id, setChartState, (_f = widget.config) === null || _f === void 0 ? void 0 : _f.agentName, chartState, apiCallCount, hasTimeoutError]);
+    const startLoadingTimeout = React.useCallback(() => {
+        if (timeoutRef.current) {
+            clearTimeout(timeoutRef.current);
+        }
+        console.log('Scheduling next API call in 3 seconds');
+        timeoutRef.current = setTimeout(() => {
+            handleLoadingTimeout();
+        }, CHART_REFRESH_TIMEOUT$1);
+    }, [handleLoadingTimeout]);
+    const clearLoadingTimeout = React.useCallback(() => {
+        if (timeoutRef.current) {
+            clearTimeout(timeoutRef.current);
+            timeoutRef.current = null;
+        }
+    }, []);
+    React.useEffect(() => {
+        return () => {
+            if (timeoutRef.current) {
+                clearTimeout(timeoutRef.current);
+            }
+        };
+    }, []);
+    const { appendMessage, reset } = reactCore.useCopilotChat();
+    React.useEffect(() => {
+        if (onResetReady && reset && widget.id) {
+            const wrappedReset = () => {
+                reset();
+                window.dispatchEvent(new CustomEvent('clearChartState', { detail: { widgetId: widget.id } }));
+            };
+            onResetReady(widget.id, wrappedReset);
+        }
+    }, [reset, widget.id, onResetReady]);
+    React.useEffect(() => {
+        const handleTriggerAgent = (event) => {
+            const { widgetId, query, agentType: eventAgentType, datasetId } = event.detail;
+            if (widgetId === widget.id) {
+                let messageContent = `${query} and render data on a series bar chart`;
+                reset();
+                console.log('triggering to datasetId==>', datasetId);
+                setChartState(createInitialChartState$1(datasetId));
+                setAgentState(createInitialChartState$1(datasetId));
+                setApiCallCount(0);
+                setHasTimeoutError(false);
+                appendMessage(new TextMessage({
+                    content: messageContent,
+                    role: Role.User,
+                }));
+                // Start polling for chart data
+                startLoadingTimeout();
+            }
+        };
+        const handleClearChartState = (event) => {
+            const { widgetId } = event.detail;
+            if (widgetId === widget.id) {
+                setChartState(createInitialChartState$1(datasetId));
+                setAgentState(createInitialChartState$1(datasetId));
+                setApiCallCount(0);
+                setHasTimeoutError(false);
+            }
+        };
+        window.addEventListener('triggerAgent', handleTriggerAgent);
+        window.addEventListener('clearChartState', handleClearChartState);
+        return () => {
+            window.removeEventListener('triggerAgent', handleTriggerAgent);
+            window.removeEventListener('clearChartState', handleClearChartState);
+        };
+    }, [widget.id, appendMessage, setChartState, startLoadingTimeout]);
+    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) &&
+                    (!((_j = (_h = (_g = chartState.series_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.series_bar_chart_data) === null || _k === void 0 ? void 0 : _k.data) === null || _l === void 0 ? void 0 : _l.series) === null || _m === void 0 ? void 0 : _m.length))
+                    ? (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 }) }) })) : (jsxRuntimeExports.jsx(SeriesBarChartComponent, { orientation: orientation, seriesBarChartState: chartState, styles: styles, appendMessage: appendMessage, content: content, query: (_o = widget.config) === null || _o === void 0 ? void 0 : _o.query, isFirstLoad: isFirstLoad, widgetBackendUrl: widgetBackendUrl, widgetId: widget.id, startLoadingTimeout: startLoadingTimeout, clearLoadingTimeout: clearLoadingTimeout, hasWidgetData: !!(((_q = (_p = widget_data === null || widget_data === void 0 ? void 0 : widget_data.data) === null || _p === void 0 ? void 0 : _p.labels) === null || _q === void 0 ? void 0 : _q.length) && ((_s = (_r = widget_data === null || widget_data === void 0 ? void 0 : widget_data.data) === null || _r === void 0 ? void 0 : _r.series) === null || _s === void 0 ? void 0 : _s.length)) })) })] }));
+}
+function SeriesLineChartWidget({ widget, showHeader = true, widgetBackendUrl, onResetReady, widgetIds, datasetId, widgetData, }) {
+    var _a, _b;
+    const styles = getStyleValues$1((_a = widget.config) === null || _a === void 0 ? void 0 : _a.styles);
+    const getRuntimeUrl = () => {
+        var _a;
+        const baseUrl = widgetBackendUrl || '';
+        const agentName = ((_a = widget.config) === null || _a === void 0 ? void 0 : _a.agentName) || 'default-agent';
+        return `${baseUrl}/api/copilot/${agentName}`;
+    };
+    return (jsxRuntimeExports.jsx(reactCore.CopilotKit, { runtimeUrl: getRuntimeUrl(), showDevConsole: false, agent: ((_b = widget.config) === null || _b === void 0 ? void 0 : _b.agentName) || "widget_assistant", children: jsxRuntimeExports.jsx(CopilotKitSeriesBarChart, { widget: widget, showHeader: showHeader, styles: styles, onResetReady: onResetReady, widgetBackendUrl: widgetBackendUrl, datasetId: datasetId }) }));
+}
+
+const CHART_REFRESH_TIMEOUT = 3000;
+const clearChat = async (widgetBackendUrl, widgetId) => {
+    if (!widgetBackendUrl || !widgetId)
+        return;
+    console.log('clearChat called for widgetId:', widgetId);
+    try {
+        await fetch(`${widgetBackendUrl}/api/clear-chat`, {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+            },
+            body: JSON.stringify({
+                session_id: widgetId,
+                delete_state: true
+            }),
+        });
+        console.log('Dispatching clearChartState event from clearChat for widgetId:', widgetId);
+        window.dispatchEvent(new CustomEvent('clearChartState', { detail: { widgetId } }));
+    }
+    catch (error) {
+        console.error('Failed to clear chat:', error);
+    }
+};
+const createLoadingComponent = (message = "Loading table data...") => (jsxRuntimeExports.jsx("div", { className: "flex items-center justify-center h-full", children: jsxRuntimeExports.jsxs("div", { className: "flex flex-col items-center gap-2", children: [jsxRuntimeExports.jsx(lucideReact.RefreshCw, { className: "h-6 w-6 animate-spin text-gray-800" }), jsxRuntimeExports.jsx("p", { className: "text-sm text-gray-500", children: message })] }) }));
+const createInitialChartState = (datasetId, dataGridState) => {
+    return {
+        matrix_grid_data: {
+            title: (dataGridState === null || dataGridState === void 0 ? void 0 : dataGridState.title) || "",
+            type: (dataGridState === null || dataGridState === void 0 ? void 0 : dataGridState.type) || "data_grid",
+            grid_type: (dataGridState === null || dataGridState === void 0 ? void 0 : dataGridState.grid_type) || "",
+            grouped: (dataGridState === null || dataGridState === void 0 ? void 0 : dataGridState.grouped) || false,
+            data: {
+                headers: (dataGridState === null || dataGridState === void 0 ? void 0 : dataGridState.data.headers) || [],
+                units: (dataGridState === null || dataGridState === void 0 ? void 0 : dataGridState.data.units) || [],
+                rows: (dataGridState === null || dataGridState === void 0 ? void 0 : dataGridState.data.rows) || [],
+                row_count: (dataGridState === null || dataGridState === void 0 ? void 0 : dataGridState.data.row_count) || 0,
+                column_count: (dataGridState === null || dataGridState === void 0 ? void 0 : dataGridState.data.column_count) || 0
+            },
+            metadata: {
+                total_rows: (dataGridState === null || dataGridState === void 0 ? void 0 : dataGridState.metadata.total_rows) || 0,
+                total_columns: (dataGridState === null || dataGridState === void 0 ? void 0 : dataGridState.metadata.total_columns) || 0,
+                numeric_columns: (dataGridState === null || dataGridState === void 0 ? void 0 : dataGridState.metadata.numeric_columns) || []
+            }
+        },
+        dataset_id: datasetId || "home_generation_dataset"
+    };
+};
+const loadAgentState = async (widgetBackendUrl, threadId, agentName) => {
+    try {
+        const response = await fetch(`${widgetBackendUrl}/api/copilot/${agentName}`, {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+            },
+            body: JSON.stringify({
+                "operationName": "loadAgentState",
+                "query": "query loadAgentState($data: LoadAgentStateInput!) {\n  loadAgentState(data: $data) {\n    threadId\n    threadExists\n    state\n    messages\n    __typename\n  }\n}",
+                "variables": {
+                    "data": {
+                        "agentName": agentName,
+                        "threadId": threadId
+                    }
+                }
+            }),
+        });
+        if (!response.ok) {
+            throw new Error(`HTTP error! status: ${response.status}`);
+        }
+        const result = await response.json();
+        return result;
+    }
+    catch (error) {
+        console.error('Failed to load agent state:', error);
+        return null;
+    }
+};
+const parseAndUpdateChartState = (apiResponse, setChartState) => {
+    var _a, _b;
+    try {
+        if ((_b = (_a = apiResponse === null || apiResponse === void 0 ? void 0 : apiResponse.data) === null || _a === void 0 ? void 0 : _a.loadAgentState) === null || _b === void 0 ? void 0 : _b.state) {
+            const stateString = apiResponse.data.loadAgentState.state;
+            const parsedState = JSON.parse(stateString);
+            if (parsedState.state) {
+                const chartData = parsedState.state;
+                setChartState((prevState) => {
+                    const newChartState = Object.assign({}, prevState);
+                    if (chartData.matrix_grid_data) {
+                        newChartState.matrix_grid_data = chartData.matrix_grid_data;
+                    }
+                    if (chartData.agent_message) {
+                        newChartState.agent_message = chartData.agent_message;
+                    }
+                    return newChartState;
+                });
+            }
+        }
+    }
+    catch (error) {
+        console.error('Failed to parse and update chart state:', error);
+    }
+};
+const getStyleValues = (styles = {}) => {
+    const borderRadiusMap = {
+        none: "0px",
+        rounded: "0.375rem",
+        large: "0.5rem",
+        "extra-large": "0.75rem",
+    };
+    const paddingMap = {
+        small: "0.5rem",
+        medium: "1rem",
+        large: "1.5rem",
+        "extra-large": "2rem",
+    };
+    const alignment = styles.alignment || "left";
+    return {
+        backgroundColor: styles.backgroundColor || "#ffffff",
+        borderRadius: borderRadiusMap[styles.borderRadius || "rounded"],
+        padding: paddingMap[styles.padding || "medium"],
+        color: styles.textColor || "#000000",
+        fontSize: styles.fontSize || "14px",
+        textAlign: alignment,
+    };
+};
+function DataGridComponent({ dataGridState, styles, appendMessage, query, isFirstLoad, widgetBackendUrl, widgetId, startLoadingTimeout, clearLoadingTimeout, content, hasWidgetData }) {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+    const hasCalledRef = React.useRef(false);
+    const columns = ((_b = (_a = dataGridState === null || dataGridState === void 0 ? void 0 : dataGridState.matrix_grid_data) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.headers) || [];
+    const rows = ((_d = (_c = dataGridState === null || dataGridState === void 0 ? void 0 : dataGridState.matrix_grid_data) === null || _c === void 0 ? void 0 : _c.data) === null || _d === void 0 ? void 0 : _d.rows) || [];
+    const gridTitle = ((_e = dataGridState === null || dataGridState === void 0 ? void 0 : dataGridState.matrix_grid_data) === null || _e === void 0 ? void 0 : _e.title) || "";
+    const units = ((_g = (_f = dataGridState === null || dataGridState === void 0 ? void 0 : dataGridState.matrix_grid_data) === null || _f === void 0 ? void 0 : _f.data) === null || _g === void 0 ? void 0 : _g.units) || [];
+    const isEmpty = columns.length === 0 || rows.length === 0;
+    const handleRefresh = async () => {
+        if (query) {
+            await clearChat(widgetBackendUrl, widgetId);
+            console.log('Dispatching clearChartState event for widgetId:', widgetId);
+            window.dispatchEvent(new CustomEvent('clearChartState', { detail: { widgetId } }));
+            appendMessage(new TextMessage({
+                content: `${query} and render data in a data grid table`,
+                role: Role.User,
+            }));
+        }
+    };
+    React.useEffect(() => {
+        if (isEmpty && query && isFirstLoad && !(dataGridState === null || dataGridState === void 0 ? void 0 : dataGridState.agent_message) && !hasCalledRef.current) {
+            hasCalledRef.current = true;
+            handleRefresh();
+        }
+    }, [isEmpty, query, isFirstLoad, dataGridState]);
+    React.useEffect(() => {
+        console.log('DataGridComponent useEffect - isEmpty:', isEmpty, 'hasMessage:', !!(dataGridState === null || dataGridState === void 0 ? void 0 : dataGridState.agent_message), 'hasWidgetData:', hasWidgetData, 'isFirstLoad:', isFirstLoad);
+        if (isEmpty && startLoadingTimeout && !(dataGridState === null || dataGridState === void 0 ? void 0 : dataGridState.agent_message)) {
+            console.log('Starting loading timeout from DataGridComponent useEffect');
+            startLoadingTimeout();
+        }
+        else if (!isEmpty && clearLoadingTimeout) {
+            clearLoadingTimeout();
+        }
+    }, [isEmpty, startLoadingTimeout, clearLoadingTimeout, dataGridState]);
+    if (isEmpty) {
+        return createLoadingComponent();
+    }
+    const transformedData = {
+        columns: columns,
+        units: units,
+        rows: rows,
+        grouped: ((_h = dataGridState === null || dataGridState === void 0 ? void 0 : dataGridState.matrix_grid_data) === null || _h === void 0 ? void 0 : _h.grouped) || false,
+        grouping: (_j = dataGridState === null || dataGridState === void 0 ? void 0 : dataGridState.matrix_grid_data) === null || _j === void 0 ? void 0 : _j.grouping
+    };
+    return (jsxRuntimeExports.jsx(DataGrid, { title: gridTitle, data: transformedData, className: "" }));
+}
+function CopilotKitDataGrid({ widget, showHeader, styles, onResetReady, widgetBackendUrl, datasetId, widgetData, }) {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
+    const isFirstLoad = (_a = widget.config) === null || _a === void 0 ? void 0 : _a.isFirstLoad;
+    const content = (_b = widget.config) === null || _b === void 0 ? void 0 : _b.content;
+    const widget_data = (_c = widget.widget_data) === null || _c === void 0 ? void 0 : _c.matrix_grid_data;
+    console.log('widget_data===>', widget_data);
+    const { threadId, setThreadId } = reactCore.useCopilotContext();
+    const timeoutRef = React.useRef(null);
+    const [apiCallCount, setApiCallCount] = React.useState(0);
+    const [hasTimeoutError, setHasTimeoutError] = React.useState(false);
+    React.useEffect(() => {
+        setThreadId(widget.id);
+    }, [widget.id, setThreadId]);
+    const { state: agentState, setState: setAgentState } = reactCore.useCoAgent({
+        name: (_d = widget.config) === null || _d === void 0 ? void 0 : _d.agentName,
+        initialState: createInitialChartState(datasetId, widget_data),
+    });
+    const [chartState, setChartState] = React.useState(createInitialChartState(datasetId, widget_data));
+    const handleLoadingTimeout = React.useCallback(async () => {
+        var _a;
+        if (!widgetBackendUrl || !widget.id || (chartState === null || chartState === void 0 ? void 0 : chartState.agent_message) || hasTimeoutError) {
+            console.log('Skipping API call - conditions not met');
+            return;
+        }
+        console.log('Loading timeout triggered for widget:', widget.id, 'API call count:', apiCallCount);
+        if (apiCallCount >= 30) {
+            console.log('API call limit reached for widget:', widget.id);
+            setHasTimeoutError(true);
+            setChartState(prevState => (Object.assign(Object.assign({}, prevState), { agent_message: "Timeout: Unable to load data after multiple attempts. Please try refreshing the widget." })));
+            return;
+        }
+        setApiCallCount(prev => prev + 1);
+        const agentName = ((_a = widget.config) === null || _a === void 0 ? void 0 : _a.agentName) || "adk-construction-project-agent";
+        console.log('Calling loadAgentState API for widget:', widget.id);
+        const apiResponse = await loadAgentState(widgetBackendUrl, widget.id, agentName);
+        console.log('API response received:', apiResponse);
+        if (apiResponse && !(chartState === null || chartState === void 0 ? void 0 : chartState.agent_message)) {
+            parseAndUpdateChartState(apiResponse, setChartState);
+        }
+    }, [widgetBackendUrl, widget.id, setChartState, (_e = widget.config) === null || _e === void 0 ? void 0 : _e.agentName, chartState, apiCallCount, hasTimeoutError]);
+    const startLoadingTimeout = React.useCallback(() => {
+        if (timeoutRef.current) {
+            clearTimeout(timeoutRef.current);
+        }
+        console.log('Scheduling next API call in 3 seconds');
+        timeoutRef.current = setTimeout(() => {
+            handleLoadingTimeout();
+        }, CHART_REFRESH_TIMEOUT);
+    }, [handleLoadingTimeout]);
+    const clearLoadingTimeout = React.useCallback(() => {
+        if (timeoutRef.current) {
+            clearTimeout(timeoutRef.current);
+            timeoutRef.current = null;
+        }
+    }, []);
+    React.useEffect(() => {
+        return () => {
+            if (timeoutRef.current) {
+                clearTimeout(timeoutRef.current);
+            }
+        };
+    }, []);
+    const { appendMessage, reset } = reactCore.useCopilotChat();
+    React.useEffect(() => {
+        if (onResetReady && reset && widget.id) {
+            const wrappedReset = () => {
+                reset();
+                window.dispatchEvent(new CustomEvent('clearChartState', { detail: { widgetId: widget.id } }));
+            };
+            onResetReady(widget.id, wrappedReset);
+        }
+    }, [reset, widget.id, onResetReady]);
+    React.useEffect(() => {
+        const handleTriggerAgent = (event) => {
+            const { widgetId, query, agentType: eventAgentType, datasetId } = event.detail;
+            reset();
+            if (widgetId === widget.id) {
+                let messageContent = `${query} and render data in a data grid table`;
+                console.log('triggering to datasetId==>', datasetId);
+                setChartState(createInitialChartState(datasetId));
+                setAgentState(createInitialChartState(datasetId));
+                setApiCallCount(0);
+                setHasTimeoutError(false);
+                appendMessage(new TextMessage({
+                    content: messageContent,
+                    role: Role.User,
+                }));
+                // Start polling for chart data
+                startLoadingTimeout();
+            }
+        };
+        const handleClearChartState = (event) => {
+            const { widgetId } = event.detail;
+            if (widgetId === widget.id) {
+                setChartState(createInitialChartState(datasetId));
+                setAgentState(createInitialChartState(datasetId));
+                setApiCallCount(0);
+                setHasTimeoutError(false);
+            }
+        };
+        window.addEventListener('triggerAgent', handleTriggerAgent);
+        window.addEventListener('clearChartState', handleClearChartState);
+        return () => {
+            window.removeEventListener('triggerAgent', handleTriggerAgent);
+            window.removeEventListener('clearChartState', handleClearChartState);
+        };
+    }, [widget.id, appendMessage, setChartState, startLoadingTimeout]);
+    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) &&
+                    (!((_h = (_g = (_f = chartState.matrix_grid_data) === null || _f === void 0 ? void 0 : _f.data) === null || _g === void 0 ? void 0 : _g.headers) === null || _h === void 0 ? void 0 : _h.length) || !((_l = (_k = (_j = chartState.matrix_grid_data) === null || _j === void 0 ? void 0 : _j.data) === null || _k === void 0 ? void 0 : _k.rows) === null || _l === void 0 ? void 0 : _l.length))
+                    ? (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 }) }) })) : (jsxRuntimeExports.jsx(DataGridComponent, { dataGridState: chartState, styles: styles, appendMessage: appendMessage, content: content, query: (_m = widget.config) === null || _m === void 0 ? void 0 : _m.query, isFirstLoad: isFirstLoad, widgetBackendUrl: widgetBackendUrl, widgetId: widget.id, startLoadingTimeout: startLoadingTimeout, clearLoadingTimeout: clearLoadingTimeout, hasWidgetData: !!(((_p = (_o = widget_data === null || widget_data === void 0 ? void 0 : widget_data.data) === null || _o === void 0 ? void 0 : _o.headers) === null || _p === void 0 ? void 0 : _p.length) && ((_r = (_q = widget_data === null || widget_data === void 0 ? void 0 : widget_data.data) === null || _q === void 0 ? void 0 : _q.rows) === null || _r === void 0 ? void 0 : _r.length)) })) })] }));
+}
+function DatagridWidget({ widget, showHeader = true, widgetBackendUrl, onResetReady, widgetIds, datasetId, widgetData, }) {
+    var _a, _b;
+    const styles = getStyleValues((_a = widget.config) === null || _a === void 0 ? void 0 : _a.styles);
+    const getRuntimeUrl = () => {
+        var _a;
+        const baseUrl = widgetBackendUrl || '';
+        const agentName = ((_a = widget.config) === null || _a === void 0 ? void 0 : _a.agentName) || 'default-agent';
+        return `${baseUrl}/api/copilot/${agentName}`;
+    };
+    return (jsxRuntimeExports.jsx(reactCore.CopilotKit, { runtimeUrl: getRuntimeUrl(), showDevConsole: false, agent: ((_b = widget.config) === null || _b === void 0 ? void 0 : _b.agentName) || "widget_assistant", children: jsxRuntimeExports.jsx(CopilotKitDataGrid, { widget: widget, showHeader: showHeader, styles: styles, onResetReady: onResetReady, widgetBackendUrl: widgetBackendUrl, datasetId: datasetId }) }));
+}
+
+function WidgetRenderer({ widget, isTemplate = false, onConfigUpdate, widgetBackendUrl, onResetReady, widgetIds, datasetId, }) {
+    const handleConfigUpdate = (config) => {
+        if (onConfigUpdate) {
+            onConfigUpdate(widget.id, config);
+        }
+    };
+    getWidgetStyles(widget);
+    const renderWidget = () => {
+        switch (widget.type) {
+            // Search-related widget cases removed
+            // Available widgets
+            case "header":
+                return jsxRuntimeExports.jsx(HeaderWidget, { widget: widget, showHeader: false });
+            case "footer":
+                return jsxRuntimeExports.jsx(FooterWidget, { widget: widget, showHeader: false });
+            case "text":
+                return jsxRuntimeExports.jsx(TextWidget, { widget: widget, showHeader: false });
+            case "spacer":
+                return jsxRuntimeExports.jsx(SpacerWidget, { widget: widget, showHeader: false });
+            case "divider":
+                return jsxRuntimeExports.jsx(DividerWidget, { widget: widget, showHeader: false });
+            case "facet":
+                return (jsxRuntimeExports.jsx(FacetWidget, { widget: widget, showHeader: false, onConfigUpdate: handleConfigUpdate }));
+            case "chatbot":
+                return jsxRuntimeExports.jsx(ChatbotWidget, { widget: widget, showHeader: false, widgetBackendUrl: widgetBackendUrl, onResetReady: onResetReady, widgetIds: widgetIds, datasetId: datasetId });
+            case "agent":
+                return widget.config.agentType === "Pie Chart Agent" ? (jsxRuntimeExports.jsx(PieChartWidget, { widget: widget, showHeader: false, widgetBackendUrl: widgetBackendUrl, onResetReady: onResetReady, widgetIds: widgetIds, datasetId: datasetId })) : widget.config.agentType === "Series Bar Chart Agent" ? (jsxRuntimeExports.jsx(SeriesBarChartWidget, { widget: widget, showHeader: false, widgetBackendUrl: widgetBackendUrl, onResetReady: onResetReady, widgetIds: widgetIds, datasetId: datasetId })) : widget.config.agentType === "Series Line Chart Agent" ? (jsxRuntimeExports.jsx(SeriesLineChartWidget, { widget: widget, showHeader: false, widgetBackendUrl: widgetBackendUrl, onResetReady: onResetReady, widgetIds: widgetIds, datasetId: datasetId })) : widget.config.agentType === "Data Grid Agent" ? (jsxRuntimeExports.jsx(DatagridWidget, { widget: widget, showHeader: false, widgetBackendUrl: widgetBackendUrl, onResetReady: onResetReady, widgetIds: widgetIds, datasetId: datasetId })) : (jsxRuntimeExports.jsx(AgentWidget, { widget: widget, showHeader: false, widgetBackendUrl: widgetBackendUrl, onResetReady: onResetReady, widgetIds: widgetIds, datasetId: datasetId }));
             default:
                 return (jsxRuntimeExports.jsxs("div", { className: "text-muted-foreground", children: ["Unknown widget type: ", widget.type] }));
         }