dp-widgets-framework 1.0.3 → 1.0.5

package/dist/index.js

@@ -35997,30 +35997,35 @@ const parseAndUpdateChartState = (apiResponse, setChartState) => {
             const parsedState = JSON.parse(stateString);
             if (parsedState.state) {
                 const chartData = parsedState.state;
-                // Create a new chart state object based on the parsed data
-                const newChartState = {};
-                // Check for different chart types and map them accordingly
-                if (chartData.bar_chart_data) {
-                    newChartState.bar_chart_data = chartData.bar_chart_data;
-                }
-                if (chartData.series_bar_chart_data) {
-                    newChartState.series_bar_chart_data = chartData.series_bar_chart_data;
-                }
-                if (chartData.series_line_chart_data) {
-                    newChartState.series_line_chart_data = chartData.series_line_chart_data;
-                }
-                if (chartData.pie_chart_data) {
-                    newChartState.pie_chart_data = chartData.pie_chart_data;
-                }
-                if (chartData.matrix_grid_data) {
-                    newChartState.matrix_grid_data = chartData.matrix_grid_data;
-                }
-                if (chartData.summary_data) {
-                    newChartState.summary_data = chartData.summary_data;
-                }
-                // Update the chart state
-                setChartState(newChartState);
-                console.log('Chart state updated from API response:', newChartState);
+                // Update chart state while preserving existing data including agent_message
+                setChartState(prevState => {
+                    const newChartState = Object.assign({}, prevState);
+                    // Check for different chart types and map them accordingly
+                    if (chartData.bar_chart_data) {
+                        newChartState.bar_chart_data = chartData.bar_chart_data;
+                    }
+                    if (chartData.series_bar_chart_data) {
+                        newChartState.series_bar_chart_data = chartData.series_bar_chart_data;
+                    }
+                    if (chartData.series_line_chart_data) {
+                        newChartState.series_line_chart_data = chartData.series_line_chart_data;
+                    }
+                    if (chartData.pie_chart_data) {
+                        newChartState.pie_chart_data = chartData.pie_chart_data;
+                    }
+                    if (chartData.matrix_grid_data) {
+                        newChartState.matrix_grid_data = chartData.matrix_grid_data;
+                    }
+                    if (chartData.summary_data) {
+                        newChartState.summary_data = chartData.summary_data;
+                    }
+                    // Preserve agent_message if it exists
+                    if (chartData.agent_message) {
+                        newChartState.agent_message = chartData.agent_message;
+                    }
+                    console.log('Chart state updated from API response:', newChartState);
+                    return newChartState;
+                });
             }
         }
     }
@@ -36061,6 +36066,7 @@ function BarChartComponent({ orientation, barChartState, styles, appendMessage,
     const clearChat = async () => {
         if (!widgetBackendUrl || !widgetId)
             return;
+        console.log('clearChat called for widgetId:', widgetId);
         try {
             await fetch(`${widgetBackendUrl}/api/clear-chat`, {
                 method: 'POST',
@@ -36069,9 +36075,12 @@ function BarChartComponent({ orientation, barChartState, styles, appendMessage,
                 },
                 body: JSON.stringify({
                     session_id: widgetId,
-                    delete_state: false
+                    delete_state: true
                 }),
             });
+            // Clear chart state directly after clearing chat
+            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);
@@ -36080,6 +36089,9 @@ function BarChartComponent({ orientation, barChartState, styles, appendMessage,
     const handleRefresh = async () => {
         if (query) {
             await clearChat();
+            // Send trigger event to clear chart state
+            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 bar chart`,
                 role: Role.User,
@@ -36087,13 +36099,13 @@ function BarChartComponent({ orientation, barChartState, styles, appendMessage,
         }
     };
     React.useEffect(() => {
-        if (isEmpty && query && isFirstLoad) {
+        if (isEmpty && query && isFirstLoad && !(barChartState === null || barChartState === void 0 ? void 0 : barChartState.agent_message)) {
             handleRefresh();
         }
     }, [isEmpty, query, isFirstLoad]);
     // Start timeout when chart is empty and loading
     React.useEffect(() => {
-        if (isEmpty && startLoadingTimeout) {
+        if (isEmpty && startLoadingTimeout && !(barChartState === null || barChartState === void 0 ? void 0 : barChartState.agent_message)) {
             startLoadingTimeout();
         }
         else if (!isEmpty && clearLoadingTimeout) {
@@ -36132,6 +36144,7 @@ function SeriesBarChartComponent({ orientation, seriesBarChartState, styles, app
     const clearChat = async () => {
         if (!widgetBackendUrl || !widgetId)
             return;
+        console.log('clearChat called for widgetId:', widgetId);
         try {
             await fetch(`${widgetBackendUrl}/api/clear-chat`, {
                 method: 'POST',
@@ -36140,9 +36153,12 @@ function SeriesBarChartComponent({ orientation, seriesBarChartState, styles, app
                 },
                 body: JSON.stringify({
                     session_id: widgetId,
-                    delete_state: false
+                    delete_state: true
                 }),
             });
+            // Clear chart state directly after clearing chat
+            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);
@@ -36151,6 +36167,9 @@ function SeriesBarChartComponent({ orientation, seriesBarChartState, styles, app
     const handleRefresh = async () => {
         if (query) {
             await clearChat();
+            // Send trigger event to clear chart state
+            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,
@@ -36158,13 +36177,13 @@ function SeriesBarChartComponent({ orientation, seriesBarChartState, styles, app
         }
     };
     React.useEffect(() => {
-        if (isEmpty && query && isFirstLoad) {
+        if (isEmpty && query && isFirstLoad && !(seriesBarChartState === null || seriesBarChartState === void 0 ? void 0 : seriesBarChartState.agent_message)) {
             handleRefresh();
         }
     }, [isEmpty, query, isFirstLoad]);
     // Start timeout when chart is empty and loading
     React.useEffect(() => {
-        if (isEmpty && startLoadingTimeout) {
+        if (isEmpty && startLoadingTimeout && !(seriesBarChartState === null || seriesBarChartState === void 0 ? void 0 : seriesBarChartState.agent_message)) {
             startLoadingTimeout();
         }
         else if (!isEmpty && clearLoadingTimeout) {
@@ -36197,6 +36216,7 @@ function SeriesLineChartComponent({ orientation, seriesLineChartState, styles, a
     const clearChat = async () => {
         if (!widgetBackendUrl || !widgetId)
             return;
+        console.log('clearChat called for widgetId:', widgetId);
         try {
             await fetch(`${widgetBackendUrl}/api/clear-chat`, {
                 method: 'POST',
@@ -36205,9 +36225,12 @@ function SeriesLineChartComponent({ orientation, seriesLineChartState, styles, a
                 },
                 body: JSON.stringify({
                     session_id: widgetId,
-                    delete_state: false
+                    delete_state: true
                 }),
             });
+            // Clear chart state directly after clearing chat
+            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);
@@ -36216,6 +36239,9 @@ function SeriesLineChartComponent({ orientation, seriesLineChartState, styles, a
     const handleRefresh = async () => {
         if (query) {
             await clearChat();
+            // Send trigger event to clear chart state
+            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 line chart`,
                 role: Role.User,
@@ -36223,13 +36249,13 @@ function SeriesLineChartComponent({ orientation, seriesLineChartState, styles, a
         }
     };
     React.useEffect(() => {
-        if (isEmpty && query && isFirstLoad) {
+        if (isEmpty && query && isFirstLoad && !(seriesLineChartState === null || seriesLineChartState === void 0 ? void 0 : seriesLineChartState.agent_message)) {
             handleRefresh();
         }
     }, [isEmpty, query, isFirstLoad]);
     // Start timeout when chart is empty and loading
     React.useEffect(() => {
-        if (isEmpty && startLoadingTimeout) {
+        if (isEmpty && startLoadingTimeout && !(seriesLineChartState === null || seriesLineChartState === void 0 ? void 0 : seriesLineChartState.agent_message)) {
             startLoadingTimeout();
         }
         else if (!isEmpty && clearLoadingTimeout) {
@@ -36270,6 +36296,7 @@ function PieChartComponent({ pieChartState, styles, appendMessage, query, isFirs
     const clearChat = async () => {
         if (!widgetBackendUrl || !widgetId)
             return;
+        console.log('clearChat called for widgetId:', widgetId);
         try {
             await fetch(`${widgetBackendUrl}/api/clear-chat`, {
                 method: 'POST',
@@ -36278,9 +36305,12 @@ function PieChartComponent({ pieChartState, styles, appendMessage, query, isFirs
                 },
                 body: JSON.stringify({
                     session_id: widgetId,
-                    delete_state: false
+                    delete_state: true
                 }),
             });
+            // Clear chart state directly after clearing chat
+            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);
@@ -36289,6 +36319,9 @@ function PieChartComponent({ pieChartState, styles, appendMessage, query, isFirs
     const handleRefresh = async () => {
         if (query) {
             await clearChat();
+            // Send trigger event to clear chart state
+            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,
@@ -36296,13 +36329,13 @@ function PieChartComponent({ pieChartState, styles, appendMessage, query, isFirs
         }
     };
     React.useEffect(() => {
-        if (isEmpty && query && isFirstLoad) {
+        if (isEmpty && query && isFirstLoad && !(pieChartState === null || pieChartState === void 0 ? void 0 : pieChartState.agent_message)) {
             handleRefresh();
         }
     }, [isEmpty, query, isFirstLoad]);
     // Start timeout when chart is empty and loading
     React.useEffect(() => {
-        if (isEmpty && startLoadingTimeout) {
+        if (isEmpty && startLoadingTimeout && !(pieChartState === null || pieChartState === void 0 ? void 0 : pieChartState.agent_message)) {
             startLoadingTimeout();
         }
         else if (!isEmpty && clearLoadingTimeout) {
@@ -36350,6 +36383,7 @@ function LineChartComponent({ lineChartState, styles, appendMessage, query, isFi
     const clearChat = async () => {
         if (!widgetBackendUrl || !widgetId)
             return;
+        console.log('clearChat called for widgetId:', widgetId);
         try {
             await fetch(`${widgetBackendUrl}/api/clear-chat`, {
                 method: 'POST',
@@ -36358,9 +36392,12 @@ function LineChartComponent({ lineChartState, styles, appendMessage, query, isFi
                 },
                 body: JSON.stringify({
                     session_id: widgetId,
-                    delete_state: false
+                    delete_state: true
                 }),
             });
+            // Clear chart state directly after clearing chat
+            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);
@@ -36369,6 +36406,9 @@ function LineChartComponent({ lineChartState, styles, appendMessage, query, isFi
     const handleRefresh = async () => {
         if (query) {
             await clearChat();
+            // Send trigger event to clear chart state
+            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 bar chart`,
                 role: Role.User,
@@ -36376,13 +36416,13 @@ function LineChartComponent({ lineChartState, styles, appendMessage, query, isFi
         }
     };
     React.useEffect(() => {
-        if (isEmpty && query && isFirstLoad) {
+        if (isEmpty && query && isFirstLoad && !(lineChartState === null || lineChartState === void 0 ? void 0 : lineChartState.agent_message)) {
             handleRefresh();
         }
     }, [isEmpty, query, isFirstLoad]);
     // Start timeout when chart is empty and loading
     React.useEffect(() => {
-        if (isEmpty && startLoadingTimeout) {
+        if (isEmpty && startLoadingTimeout && !(lineChartState === null || lineChartState === void 0 ? void 0 : lineChartState.agent_message)) {
             startLoadingTimeout();
         }
         else if (!isEmpty && clearLoadingTimeout) {
@@ -36430,6 +36470,7 @@ function DataGridComponent({ dataGridState, styles, appendMessage, query, isFirs
     const clearChat = async () => {
         if (!widgetBackendUrl || !widgetId)
             return;
+        console.log('clearChat called for widgetId:', widgetId);
         try {
             await fetch(`${widgetBackendUrl}/api/clear-chat`, {
                 method: 'POST',
@@ -36438,9 +36479,12 @@ function DataGridComponent({ dataGridState, styles, appendMessage, query, isFirs
                 },
                 body: JSON.stringify({
                     session_id: widgetId,
-                    delete_state: false
+                    delete_state: true
                 }),
             });
+            // Clear chart state directly after clearing chat
+            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);
@@ -36449,6 +36493,9 @@ function DataGridComponent({ dataGridState, styles, appendMessage, query, isFirs
     const handleRefresh = async () => {
         if (query) {
             await clearChat();
+            // Send trigger event to clear chart state
+            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,
@@ -36456,13 +36503,13 @@ function DataGridComponent({ dataGridState, styles, appendMessage, query, isFirs
         }
     };
     React.useEffect(() => {
-        if (isEmpty && query && isFirstLoad) {
+        if (isEmpty && query && isFirstLoad && !(dataGridState === null || dataGridState === void 0 ? void 0 : dataGridState.agent_message)) {
             handleRefresh();
         }
     }, [isEmpty, query, isFirstLoad]);
     // Start timeout when chart is empty and loading
     React.useEffect(() => {
-        if (isEmpty && startLoadingTimeout) {
+        if (isEmpty && startLoadingTimeout && !(dataGridState === null || dataGridState === void 0 ? void 0 : dataGridState.agent_message)) {
             startLoadingTimeout();
         }
         else if (!isEmpty && clearLoadingTimeout) {
@@ -36488,6 +36535,7 @@ function SummaryComponent({ summaryState, styles, appendMessage, query, isFirstL
     const clearChat = async () => {
         if (!widgetBackendUrl || !widgetId)
             return;
+        console.log('clearChat called for widgetId:', widgetId);
         try {
             await fetch(`${widgetBackendUrl}/api/clear-chat`, {
                 method: 'POST',
@@ -36496,9 +36544,12 @@ function SummaryComponent({ summaryState, styles, appendMessage, query, isFirstL
                 },
                 body: JSON.stringify({
                     session_id: widgetId,
-                    delete_state: false
+                    delete_state: true
                 }),
             });
+            // Clear chart state directly after clearing chat
+            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);
@@ -36507,6 +36558,9 @@ function SummaryComponent({ summaryState, styles, appendMessage, query, isFirstL
     const handleRefresh = async () => {
         if (query) {
             await clearChat();
+            // Send trigger event to clear chart state
+            console.log('Dispatching clearChartState event for widgetId:', widgetId);
+            window.dispatchEvent(new CustomEvent('clearChartState', { detail: { widgetId } }));
             appendMessage(new TextMessage({
                 content: `${query} and provide a summary with statistics`,
                 role: Role.User,
@@ -36514,7 +36568,7 @@ function SummaryComponent({ summaryState, styles, appendMessage, query, isFirstL
         }
     };
     React.useEffect(() => {
-        if (isEmpty && query && isFirstLoad) {
+        if (isEmpty && query && isFirstLoad && !(summaryState === null || summaryState === void 0 ? void 0 : summaryState.agent_message)) {
             setChartState(prevState => (Object.assign(Object.assign({}, prevState), { widget_ids: widget_ids })));
             setTimeout(() => {
                 handleRefresh();
@@ -36523,7 +36577,7 @@ function SummaryComponent({ summaryState, styles, appendMessage, query, isFirstL
     }, [isEmpty, query, isFirstLoad]);
     // Start timeout when summary is empty and loading
     React.useEffect(() => {
-        if (isEmpty && startLoadingTimeout) {
+        if (isEmpty && startLoadingTimeout && !(summaryState === null || summaryState === void 0 ? void 0 : summaryState.agent_message)) {
             startLoadingTimeout();
         }
         else if (!isEmpty && clearLoadingTimeout) {
@@ -36536,13 +36590,14 @@ function SummaryComponent({ summaryState, styles, appendMessage, query, isFirstL
     return (jsxRuntimeExports.jsx(SummaryWidget, { title: title, data: data, metadata: metadata, className: "" }));
 }
 function CopilotKitAgent({ widget, showHeader, styles, onResetReady, widgetIds, widgetBackendUrl }) {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
+    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, _33, _34, _35, _36, _37, _38, _39;
     const agentType = (_a = widget.config) === null || _a === void 0 ? void 0 : _a.agentType;
     const orientation = (_b = widget.config) === null || _b === void 0 ? void 0 : _b.orientation;
     const isFirstLoad = (_c = widget.config) === null || _c === void 0 ? void 0 : _c.isFirstLoad;
     const { threadId, setThreadId } = reactCore.useCopilotContext();
     const timeoutRef = React.useRef(null);
     const [isTimeoutTriggered, setIsTimeoutTriggered] = React.useState(false);
+    const [timeoutCount, setTimeoutCount] = React.useState(0);
     React.useEffect(() => {
         setThreadId(widget.id);
     }, [widget.id, setThreadId]);
@@ -36724,16 +36779,17 @@ function CopilotKitAgent({ widget, showHeader, styles, onResetReady, widgetIds,
     // Function to handle timeout and call loadAgentState API
     const handleLoadingTimeout = React.useCallback(async () => {
         var _a;
-        if (!widgetBackendUrl || !widget.id || isTimeoutTriggered)
+        if (!widgetBackendUrl || !widget.id || isTimeoutTriggered || (chartState === null || chartState === void 0 ? void 0 : chartState.agent_message))
             return;
         console.log('Loading timeout triggered for widget:', widget.id);
         setIsTimeoutTriggered(true);
+        setTimeoutCount(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);
-        if (apiResponse) {
+        if (apiResponse && !(chartState === null || chartState === void 0 ? void 0 : chartState.agent_message)) {
             parseAndUpdateChartState(apiResponse, setChartState);
         }
-    }, [widgetBackendUrl, widget.id, isTimeoutTriggered, setChartState, (_e = widget.config) === null || _e === void 0 ? void 0 : _e.agentName]);
+    }, [widgetBackendUrl, widget.id, isTimeoutTriggered, setChartState, (_e = widget.config) === null || _e === void 0 ? void 0 : _e.agentName, chartState]);
     // Function to start timeout
     const startLoadingTimeout = React.useCallback(() => {
         if (timeoutRef.current) {
@@ -36751,6 +36807,28 @@ 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
+                }),
+            });
+            // Reset chart state based on agent type - call getInitialState from local scope
+            setChartState(getInitialState());
+        }
+        catch (error) {
+            console.error('Failed to clear chat and state:', error);
+        }
+    }, [widgetBackendUrl, setChartState, agentType, widgetIds]);
     // Clean up timeout on unmount
     React.useEffect(() => {
         return () => {
@@ -36759,13 +36837,26 @@ function CopilotKitAgent({ widget, showHeader, styles, onResetReady, widgetIds,
             }
         };
     }, []);
-    const { appendMessage, reset } = reactCore.useCopilotChat();
+    const { appendMessage, reset, isLoading } = reactCore.useCopilotChat();
     // Register the reset function with the parent component
     React.useEffect(() => {
+        console.log('onResetReady available:', !!onResetReady, 'reset available:', !!reset, 'widget.id:', widget.id);
         if (onResetReady && reset && widget.id) {
-            onResetReady(widget.id, reset);
+            console.log('Registering reset function for widget:', widget.id);
+            // Create a wrapped reset function that also clears chart state
+            const wrappedReset = () => {
+                console.log('Reset called for widget:', widget.id);
+                reset();
+                // Clear chart state after reset
+                console.log('Dispatching clearChartState event from reset for widgetId:', widget.id);
+                window.dispatchEvent(new CustomEvent('clearChartState', { detail: { widgetId: widget.id } }));
+            };
+            onResetReady(widget.id, wrappedReset);
+        }
+        else {
+            console.log('Not registering reset - missing dependencies');
         }
-    }, [reset, widget.id]); // Removed onResetReady from deps to avoid the error
+    }, [reset, widget.id, onResetReady]); // Removed onResetReady from deps to avoid the error
     // Listen for triggerAgent events for this widget
     React.useEffect(() => {
         const handleTriggerAgent = (event) => {
@@ -36800,14 +36891,240 @@ function CopilotKitAgent({ widget, showHeader, styles, onResetReady, widgetIds,
                 }));
             }
         };
+        const handleClearChartState = (event) => {
+            const { widgetId } = event.detail;
+            console.log('Received clearChartState event - widgetId:', widgetId, 'current widget.id:', widget.id);
+            if (widgetId === widget.id) {
+                console.log('Clearing chart state for widget:', widgetId);
+                // Reset chart state based on agent type with explicit initial state
+                if (agentType === "Pie Chart Agent") {
+                    setChartState({
+                        pie_chart_data: {
+                            title: "",
+                            type: "pie",
+                            chart_type: "financial",
+                            data: {
+                                labels: [],
+                                values: [],
+                                percentages: [],
+                                total: 0
+                            },
+                            metadata: {
+                                categories: 0,
+                                largest_category: "",
+                                largest_value: 0,
+                                largest_percentage: 0
+                            }
+                        }
+                    });
+                }
+                else if (agentType === "Bar Chart Agent") {
+                    setChartState({
+                        bar_chart_data: {
+                            title: "",
+                            type: "bar",
+                            chart_type: "financial",
+                            orientation: "vertical",
+                            data: {
+                                labels: [],
+                                values: [],
+                                total: 0,
+                                average: 0
+                            },
+                            metadata: {
+                                categories: 0,
+                                highest_category: "",
+                                highest_value: 0,
+                                lowest_category: "",
+                                lowest_value: 0,
+                                range: 0
+                            }
+                        }
+                    });
+                }
+                else if (agentType === "Series Bar Chart Agent") {
+                    setChartState({
+                        series_bar_chart_data: {
+                            title: "",
+                            type: "series_bar",
+                            chart_type: "financial",
+                            orientation: "vertical",
+                            data: {
+                                labels: [],
+                                series: [],
+                                total: 0,
+                                average: 0
+                            },
+                            metadata: {
+                                categories: 0,
+                                series_count: 0,
+                                highest_category: "",
+                                highest_value: 0,
+                                highest_series: "",
+                                lowest_category: "",
+                                lowest_value: 0,
+                                lowest_series: "",
+                                range: 0,
+                                series_totals: {},
+                                series_averages: {}
+                            }
+                        }
+                    });
+                }
+                else if (agentType === "Series Line Chart Agent") {
+                    setChartState({
+                        series_bar_chart_data: {
+                            title: "",
+                            type: "series_bar",
+                            chart_type: "financial",
+                            orientation: "vertical",
+                            data: {
+                                labels: [],
+                                series: [],
+                                total: 0,
+                                average: 0
+                            },
+                            metadata: {
+                                categories: 0,
+                                series_count: 0,
+                                highest_category: "",
+                                highest_value: 0,
+                                highest_series: "",
+                                lowest_category: "",
+                                lowest_value: 0,
+                                lowest_series: "",
+                                range: 0,
+                                series_totals: {},
+                                series_averages: {}
+                            }
+                        }
+                    });
+                }
+                else if (agentType === "Line Chart Agent") {
+                    setChartState({
+                        bar_chart_data: {
+                            title: "",
+                            type: "line",
+                            chart_type: "financial",
+                            orientation: "horizontal",
+                            data: {
+                                labels: [],
+                                values: [],
+                                total: 0,
+                                average: 0
+                            },
+                            metadata: {
+                                categories: 0,
+                                highest_category: "",
+                                highest_value: 0,
+                                lowest_category: "",
+                                lowest_value: 0,
+                                range: 0
+                            }
+                        }
+                    });
+                }
+                else if (agentType === "Data Grid Agent") {
+                    setChartState({
+                        matrix_grid_data: {
+                            title: "",
+                            type: "data_grid",
+                            grid_type: "",
+                            data: {
+                                headers: [],
+                                rows: [],
+                                row_count: 0,
+                                column_count: 0
+                            },
+                            metadata: {
+                                total_rows: 0,
+                                total_columns: 0,
+                                numeric_columns: []
+                            }
+                        }
+                    });
+                }
+                else if (agentType === "Summary Agent") {
+                    setChartState({
+                        summary_data: {
+                            title: "",
+                            type: "summary",
+                            data: {
+                                content: "",
+                                word_count: 0,
+                                character_count: 0,
+                                character_count_no_spaces: 0,
+                                line_count: 0
+                            },
+                            metadata: {
+                                created_at: "",
+                                content_type: "text",
+                                is_multiline: false
+                            }
+                        }
+                    });
+                }
+                else {
+                    setChartState({ widget_ids: widgetIds });
+                }
+            }
+        };
+        console.log('Setting up event listeners for widget:', widget.id);
         window.addEventListener('triggerAgent', handleTriggerAgent);
+        window.addEventListener('clearChartState', handleClearChartState);
         return () => {
             window.removeEventListener('triggerAgent', handleTriggerAgent);
+            window.removeEventListener('clearChartState', handleClearChartState);
         };
-    }, [widget.id, appendMessage, agentType]);
-    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: agentType === "Bar Chart Agent" ? (jsxRuntimeExports.jsx(BarChartComponent, { barChartState: chartState, styles: styles, orientation: orientation, appendMessage: appendMessage, query: (_f = widget.config) === null || _f === void 0 ? void 0 : _f.query, isFirstLoad: isFirstLoad, widgetBackendUrl: widgetBackendUrl, widgetId: widget.id, startLoadingTimeout: startLoadingTimeout, clearLoadingTimeout: clearLoadingTimeout })) : agentType === "Series Bar Chart Agent" ? (jsxRuntimeExports.jsx(SeriesBarChartComponent, { seriesBarChartState: chartState, styles: styles, orientation: orientation, appendMessage: appendMessage, query: (_g = widget.config) === null || _g === void 0 ? void 0 : _g.query, isFirstLoad: isFirstLoad, widgetBackendUrl: widgetBackendUrl, widgetId: widget.id, startLoadingTimeout: startLoadingTimeout, clearLoadingTimeout: clearLoadingTimeout })) : agentType === "Series Line Chart Agent" ? (jsxRuntimeExports.jsx(SeriesLineChartComponent, { seriesLineChartState: chartState, styles: styles, orientation: orientation, appendMessage: appendMessage, query: (_h = widget.config) === null || _h === void 0 ? void 0 : _h.query, isFirstLoad: isFirstLoad, widgetBackendUrl: widgetBackendUrl, widgetId: widget.id, startLoadingTimeout: startLoadingTimeout, clearLoadingTimeout: clearLoadingTimeout })) : agentType === "Pie Chart Agent" ? (jsxRuntimeExports.jsx(PieChartComponent, { pieChartState: chartState, styles: styles, appendMessage: appendMessage, query: (_j = widget.config) === null || _j === void 0 ? void 0 : _j.query, isFirstLoad: isFirstLoad, widgetBackendUrl: widgetBackendUrl, widgetId: widget.id, startLoadingTimeout: startLoadingTimeout, clearLoadingTimeout: clearLoadingTimeout })) : agentType === "Line Chart Agent" ? (jsxRuntimeExports.jsx(LineChartComponent, { lineChartState: chartState, styles: styles, appendMessage: appendMessage, query: (_k = widget.config) === null || _k === void 0 ? void 0 : _k.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: (_l = widget.config) === null || _l === void 0 ? void 0 : _l.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: (_m = widget.config) === null || _m === void 0 ? void 0 : _m.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: ((_o = widget.config) === null || _o === void 0 ? void 0 : _o.copilotTitle) || widget.title,
-                        initial: ((_p = widget.config) === null || _p === void 0 ? void 0 : _p.copilotInitialMessage) || ((_q = widget.config) === null || _q === void 0 ? void 0 : _q.placeholder) || "How can I help you today?"
+    }, [widget.id, appendMessage, agentType, setChartState]);
+    // Monitor chartState and add manual clear functionality
+    React.useEffect(() => {
+        // Add a global function to manually clear this widget's state
+        const clearThisWidget = () => {
+            console.log('Manual clear triggered for widget:', widget.id);
+            if (agentType === "Pie Chart Agent") {
+                setChartState({
+                    pie_chart_data: {
+                        title: "",
+                        type: "pie",
+                        chart_type: "financial",
+                        data: {
+                            labels: [],
+                            values: [],
+                            percentages: [],
+                            total: 0
+                        },
+                        metadata: {
+                            categories: 0,
+                            largest_category: "",
+                            largest_value: 0,
+                            largest_percentage: 0
+                        }
+                    }
+                });
+            }
+            // Add other agent types as needed
+        };
+        // Make it globally accessible for testing
+        window[`clearWidget_${widget.id}`] = clearThisWidget;
+        return () => {
+            delete window[`clearWidget_${widget.id}`];
+        };
+    }, [widget.id, agentType, setChartState]);
+    console.log('agent_message==>', chartState === null || chartState === void 0 ? void 0 : chartState.agent_message);
+    console.log('Pie Chart Agent==>', (agentType === "Pie Chart Agent" && (!((_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))));
+    console.log('chartState.pie_chart_data?.data?.labels?.length==>', (_o = (_m = chartState.pie_chart_data) === null || _m === void 0 ? void 0 : _m.data) === null || _o === void 0 ? void 0 : _o.labels);
+    return (jsxRuntimeExports.jsxs("div", { className: cn("flex flex-col h-full"), children: [showHeader && (jsxRuntimeExports.jsx("div", { className: "flex items-center justify-between pb-2 border-b", children: jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2", children: [jsxRuntimeExports.jsx(lucideReact.Bot, { className: "h-4 w-4" }), jsxRuntimeExports.jsx("h3", { className: "text-sm font-medium", children: widget.title })] }) })), jsxRuntimeExports.jsx("div", { className: "flex-1 h-full", children: (chartState === null || chartState === void 0 ? void 0 : chartState.agent_message) && agentType !== "chatbot" && (
+                // Check if data is empty based on agent type
+                (agentType === "Bar Chart Agent" && (!((_r = (_q = (_p = chartState.bar_chart_data) === null || _p === void 0 ? void 0 : _p.data) === null || _q === void 0 ? void 0 : _q.labels) === null || _r === void 0 ? void 0 : _r.length) || !((_u = (_t = (_s = chartState.bar_chart_data) === null || _s === void 0 ? void 0 : _s.data) === null || _t === void 0 ? void 0 : _t.values) === null || _u === void 0 ? void 0 : _u.length))) ||
+                    (agentType === "Series Bar Chart Agent" && (!((_x = (_w = (_v = chartState.series_bar_chart_data) === null || _v === void 0 ? void 0 : _v.data) === null || _w === void 0 ? void 0 : _w.labels) === null || _x === void 0 ? void 0 : _x.length) || !((_0 = (_z = (_y = chartState.series_bar_chart_data) === null || _y === void 0 ? void 0 : _y.data) === null || _z === void 0 ? void 0 : _z.series) === null || _0 === void 0 ? void 0 : _0.length))) ||
+                    (agentType === "Series Line Chart Agent" && (!((_3 = (_2 = (_1 = chartState.series_bar_chart_data) === null || _1 === void 0 ? void 0 : _1.data) === null || _2 === void 0 ? void 0 : _2.labels) === null || _3 === void 0 ? void 0 : _3.length) || !((_6 = (_5 = (_4 = chartState.series_bar_chart_data) === null || _4 === void 0 ? void 0 : _4.data) === null || _5 === void 0 ? void 0 : _5.series) === null || _6 === void 0 ? void 0 : _6.length))) ||
+                    (agentType === "Pie Chart Agent" && (!((_9 = (_8 = (_7 = chartState.pie_chart_data) === null || _7 === void 0 ? void 0 : _7.data) === null || _8 === void 0 ? void 0 : _8.labels) === null || _9 === void 0 ? void 0 : _9.length) || !((_12 = (_11 = (_10 = chartState.pie_chart_data) === null || _10 === void 0 ? void 0 : _10.data) === null || _11 === void 0 ? void 0 : _11.values) === null || _12 === void 0 ? void 0 : _12.length))) ||
+                    (agentType === "Line Chart Agent" && (!((_15 = (_14 = (_13 = chartState.bar_chart_data) === null || _13 === void 0 ? void 0 : _13.data) === null || _14 === void 0 ? void 0 : _14.labels) === null || _15 === void 0 ? void 0 : _15.length) || !((_18 = (_17 = (_16 = chartState.bar_chart_data) === null || _16 === void 0 ? void 0 : _16.data) === null || _17 === void 0 ? void 0 : _17.values) === null || _18 === void 0 ? void 0 : _18.length))) ||
+                    (agentType === "Data Grid Agent" && (!((_21 = (_20 = (_19 = chartState.matrix_grid_data) === null || _19 === void 0 ? void 0 : _19.data) === null || _20 === void 0 ? void 0 : _20.headers) === null || _21 === void 0 ? void 0 : _21.length) || !((_24 = (_23 = (_22 = chartState.matrix_grid_data) === null || _22 === void 0 ? void 0 : _22.data) === null || _23 === void 0 ? void 0 : _23.rows) === null || _24 === void 0 ? void 0 : _24.length))) ||
+                    (agentType === "Summary Agent" && (!((_26 = (_25 = chartState.summary_data) === null || _25 === void 0 ? void 0 : _25.data) === null || _26 === void 0 ? void 0 : _26.content) || ((_29 = (_28 = (_27 = chartState.summary_data) === null || _27 === void 0 ? void 0 : _27.data) === null || _28 === void 0 ? void 0 : _28.content) === null || _29 === void 0 ? void 0 : _29.trim()) === ""))) ? (jsxRuntimeExports.jsx("div", { className: "flex items-center justify-center h-full p-4", children: jsxRuntimeExports.jsx("div", { className: "text-center max-w-md", children: jsxRuntimeExports.jsx("p", { className: "text-sm text-gray-700", children: chartState.agent_message }) }) })) : agentType === "Bar Chart Agent" ? (jsxRuntimeExports.jsx(BarChartComponent, { barChartState: chartState, styles: styles, orientation: orientation, appendMessage: appendMessage, query: (_30 = widget.config) === null || _30 === void 0 ? void 0 : _30.query, isFirstLoad: isFirstLoad, widgetBackendUrl: widgetBackendUrl, widgetId: widget.id, startLoadingTimeout: startLoadingTimeout, clearLoadingTimeout: clearLoadingTimeout })) : agentType === "Series Bar Chart Agent" ? (jsxRuntimeExports.jsx(SeriesBarChartComponent, { seriesBarChartState: chartState, styles: styles, orientation: orientation, appendMessage: appendMessage, query: (_31 = widget.config) === null || _31 === void 0 ? void 0 : _31.query, isFirstLoad: isFirstLoad, widgetBackendUrl: widgetBackendUrl, widgetId: widget.id, startLoadingTimeout: startLoadingTimeout, clearLoadingTimeout: clearLoadingTimeout })) : agentType === "Series Line Chart Agent" ? (jsxRuntimeExports.jsx(SeriesLineChartComponent, { seriesLineChartState: chartState, styles: styles, orientation: orientation, appendMessage: appendMessage, query: (_32 = widget.config) === null || _32 === void 0 ? void 0 : _32.query, isFirstLoad: isFirstLoad, widgetBackendUrl: widgetBackendUrl, widgetId: widget.id, startLoadingTimeout: startLoadingTimeout, clearLoadingTimeout: clearLoadingTimeout })) : agentType === "Pie Chart Agent" ? (jsxRuntimeExports.jsx(PieChartComponent, { pieChartState: chartState, styles: styles, appendMessage: appendMessage, query: (_33 = widget.config) === null || _33 === void 0 ? void 0 : _33.query, isFirstLoad: isFirstLoad, widgetBackendUrl: widgetBackendUrl, widgetId: widget.id, startLoadingTimeout: startLoadingTimeout, clearLoadingTimeout: clearLoadingTimeout })) : agentType === "Line Chart Agent" ? (jsxRuntimeExports.jsx(LineChartComponent, { lineChartState: chartState, styles: styles, appendMessage: appendMessage, query: (_34 = widget.config) === null || _34 === void 0 ? void 0 : _34.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: (_35 = widget.config) === null || _35 === void 0 ? void 0 : _35.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: (_36 = widget.config) === null || _36 === void 0 ? void 0 : _36.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: ((_37 = widget.config) === null || _37 === void 0 ? void 0 : _37.copilotTitle) || widget.title,
+                        initial: ((_38 = widget.config) === null || _38 === void 0 ? void 0 : _38.copilotInitialMessage) || ((_39 = widget.config) === null || _39 === void 0 ? void 0 : _39.placeholder) || "How can I help you today?"
                     }, onSubmitMessage: () => {
                         setChartState(prevState => (Object.assign(Object.assign({}, prevState), { widget_ids: widgetIds })));
                     } })) })] }));
@@ -37086,7 +37403,7 @@ const IconMap = {
     'pie-chart': lucideReact.PieChart,
     'chatbot': lucideReact.Bot,
 };
-function WidgetDashboard({ pageId, isEditing, selectedWidget = null, onWidgetSelect, refreshKey, widgetBackendUrl, onSaveLayoutReady, openWidgetPallete = false, onCloseWidgetPallete, defaultAgentName = "adk-construction-project-agent" }) {
+function WidgetDashboard({ pageId, isEditing, selectedWidget = null, onWidgetSelect, refreshKey, widgetBackendUrl, onSaveLayoutReady, openWidgetPallete = false, onCloseWidgetPallete, defaultAgentName = "adk-construction-project-agent", userId }) {
     const [widgets, setWidgets] = React.useState([]);
     const [availableWidgets, setAvailableWidgets] = React.useState([]);
     const [isLoading, setIsLoading] = React.useState(true);
@@ -37144,7 +37461,7 @@ function WidgetDashboard({ pageId, isEditing, selectedWidget = null, onWidgetSel
                         },
                         body: JSON.stringify({
                             session_id: editingWidget.id,
-                            delete_state: false
+                            delete_state: true
                         }),
                     });
                 }
@@ -37207,7 +37524,13 @@ function WidgetDashboard({ pageId, isEditing, selectedWidget = null, onWidgetSel
         }
         setIsLoading(true);
         try {
-            const response = await fetch(getApiUrl(`/api/pages/${pageId}`));
+            const response = await fetch(getApiUrl(`/api/pages/${pageId}`), {
+                method: "GET",
+                headers: {
+                    "Content-Type": "application/json",
+                    "x-owner-id": userId || "",
+                },
+            });
             if (!response.ok) {
                 throw new Error("Failed to load page data");
             }
@@ -37543,62 +37866,7 @@ function WidgetDashboard({ pageId, isEditing, selectedWidget = null, onWidgetSel
                     onCloseWidgetPallete === null || onCloseWidgetPallete === void 0 ? void 0 : onCloseWidgetPallete();
                 }, defaultAgentName: defaultAgentName }), jsxRuntimeExports.jsx(EditWidgetDialog, { initialText: editInitialQuery, isOpen: showEditModal, onClose: () => setShowEditModal(false), onSubmit: handleEditSubmit }), jsxRuntimeExports.jsx("div", { className: "min-h-full", onDragOver: (e) => e.preventDefault(), onDrop: handleDrop, onClick: () => setSelectedWidget(null), children: isLoading ? (jsxRuntimeExports.jsx("div", { className: "flex items-center justify-center h-full", children: jsxRuntimeExports.jsx(lucideReact.Loader2, { className: "h-8 w-8 animate-spin" }) })) : (jsxRuntimeExports.jsx(RGL, { className: "layout m-0 p-0", layouts: { lg: getLayoutFromWidgets() }, breakpoints: { lg: 1200, md: 996, sm: 768, xs: 480 }, cols: { lg: 12, md: 8, sm: 6, xs: 2 }, rowHeight: 100, isDraggable: isEditing, isResizable: isEditing, draggableHandle: ".drag-icon", onLayoutChange: handleLayoutChange, compactType: "vertical", containerPadding: [0, 0], resizeHandles: ["sw", "nw", "se", "ne"], children: widgets.map((w) => (jsxRuntimeExports.jsxs("div", { style: { borderColor: "rgb(147 197 253 / 1)" }, className: `border border-blue-300 rounded-xl p-4 shadow-lg overflow-hidden ${isEditing ? 'pb-20' : 'pb-14'}`, children: [isEditing &&
                                 jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-end mb-4 relative", children: [jsxRuntimeExports.jsxs("div", { className: "flex items-center drag-icon cursor-grab absolute left-1/2 -translate-x-1/2", children: [jsxRuntimeExports.jsx(lucideReact.GripHorizontal, { className: "" }), jsxRuntimeExports.jsx(lucideReact.GripHorizontal, { className: "-ml-[3px]" }), jsxRuntimeExports.jsx(lucideReact.GripHorizontal, { className: "-ml-[3px]" })] }), jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2 cursor-pointer justify-end", children: [jsxRuntimeExports.jsx(lucideReact.Trash2, { onClick: () => removeWidget(w.id), className: "w-5 h-5 text-red-700" }), jsxRuntimeExports.jsx(lucideReact.Edit, { onClick: () => onClickSettings && onClickSettings(w), className: "w-5 h-5 text-gray-600" })] })] }), jsxRuntimeExports.jsxs("div", { className: "w-full h-full relative", children: [(w === null || w === void 0 ? void 0 : w.type) === "chatbot" &&
-                                        jsxRuntimeExports.jsxs("div", { className: "relative z-50", children: [jsxRuntimeExports.jsx("div", { onClick: () => handleClearChat(w.id), onMouseOver: () => setVisibleClearButton(true), onMouseLeave: () => setVisibleClearButton(false), className: "absolute z-40 flex align-middle justify-center gap-2 text-sm px-4 py-2 border-blue-300 rounded-sm dark:bg-white w-fit bg-gray-900 text-white dark:text-gray-900 cursor-pointer shadow-md transition-all", style: { top: "12px", right: "0", borderTopLeftRadius: "4px", borderBottomLeftRadius: "4px" }, children: jsxRuntimeExports.jsx(lucideReact.MessageCircleX, { className: "w-5 h-5" }) }), jsxRuntimeExports.jsx("span", { className: `absolute z-50 w-max py-1 text-xs px-2 rounded-sm dark:text-gray-900 dark:bg-white text-white bg-gray-900 ${visibleClearButton ? "block" : "hidden"}`, style: { top: "56px", right: "16px", borderRadius: "3px" }, children: "Clear Chat" })] }), jsxRuntimeExports.jsx(WidgetRenderer, { widget: w, widgetBackendUrl: widgetBackendUrl, onResetReady: handleResetReady, widgetIds: widgets.filter(widget => widget.type !== 'chatbot').map(widget => widget.id) })] })] }, w.id))) })
-                // <ReactGridLayout
-                //   className="layout"
-                //   layout={getLayoutFromWidgets()}
-                //   cols={12}
-                //   rowHeight={50}
-                //   onLayoutChange={handleLayoutChange}
-                //   onDragStart={() => setIsDragging(true)}
-                //   onDragStop={() => setIsDragging(false)}
-                //   isDraggable={isEditing}
-                //   isResizable={isEditing}
-                //   useCSSTransforms
-                //   compactType={null}
-                //   margin={[8, 8]}
-                //   preventCollision={true}
-                // >
-                //   {widgets.map((widget) => (
-                //     <div
-                //       key={widget.id}
-                //       className={cn(
-                //         "bg-background rounded-lg shadow-sm border overflow-hidden transition-all",
-                //         currentSelectedWidget?.id === widget.id &&
-                //         "ring-2 ring-primary ring-offset-2"
-                //       )}
-                //       onClick={(e) => handleWidgetClick(widget, e)}
-                //       onDoubleClick={(e) => handleWidgetDoubleClick(widget, e)}
-                //     >
-                //       {widget.config?.showHeader !== false && (
-                //         <div className="p-2 border-b flex items-center justify-between">
-                //           <span className="font-medium text-sm">
-                //             {widget.title}
-                //           </span>
-                //           {isEditing && (
-                //             <Button
-                //               variant="ghost"
-                //               size="sm"
-                //               onClick={() => removeWidget(widget.id)}
-                //             >
-                //               <Trash2 className="h-4 w-4" />
-                //             </Button>
-                //           )}
-                //         </div>
-                //       )}
-                //       <div
-                //         className={cn(
-                //           "h-full",
-                //           widget.config?.showHeader !== false &&
-                //           "h-[calc(100%-40px)]"
-                //         )}
-                //       >
-                //         <WidgetRenderer widget={widget} widgetBackendUrl={widgetBackendUrl} />
-                //       </div>
-                //     </div>
-                //   ))}
-                // </ReactGridLayout>
-                ) })] }));
+                                        jsxRuntimeExports.jsxs("div", { className: "relative z-50", children: [jsxRuntimeExports.jsx("div", { onClick: () => handleClearChat(w.id), onMouseOver: () => setVisibleClearButton(true), onMouseLeave: () => setVisibleClearButton(false), className: "absolute z-40 flex align-middle justify-center gap-2 text-sm px-4 py-2 border-blue-300 rounded-sm dark:bg-white w-fit bg-gray-900 text-white dark:text-gray-900 cursor-pointer shadow-md transition-all", style: { top: "12px", right: "0", borderTopLeftRadius: "4px", borderBottomLeftRadius: "4px" }, children: jsxRuntimeExports.jsx(lucideReact.MessageCircleX, { className: "w-5 h-5" }) }), jsxRuntimeExports.jsx("span", { className: `absolute z-50 w-max py-1 text-xs px-2 rounded-sm dark:text-gray-900 dark:bg-white text-white bg-gray-900 ${visibleClearButton ? "block" : "hidden"}`, style: { top: "56px", right: "16px", borderRadius: "3px" }, children: "Clear Chat" })] }), jsxRuntimeExports.jsx(WidgetRenderer, { widget: w, widgetBackendUrl: widgetBackendUrl, onResetReady: handleResetReady, widgetIds: widgets.filter(widget => widget.type !== 'chatbot').map(widget => widget.id) })] })] }, w.id))) })) })] }));
 }
 
 const Checkbox = React__namespace.forwardRef((_a, ref) => {