dp-widgets-framework 1.0.2 → 1.0.4

package/dist/index.esm.js

@@ -7,7 +7,7 @@ import * as LabelPrimitive from '@radix-ui/react-label';
 import { cva } from 'class-variance-authority';
 import * as SwitchPrimitives from '@radix-ui/react-switch';
 import * as SelectPrimitive from '@radix-ui/react-select';
-import { ChevronDown, ChevronUp, Check, AlertCircle, MoveUp, MoveDown, Trash2, Plus, Bot, Type, Layout, LayoutGrid, BarChart as BarChart$1, Filter, Search, ArrowUp, ArrowDown, RefreshCw, X, LineChart as LineChart$1, PieChart as PieChart$1, Table, FileText, Loader2, Edit, GripVertical, MessageCircleX, Edit2 } from 'lucide-react';
+import { ChevronDown, ChevronUp, Check, AlertCircle, MoveUp, MoveDown, Trash2, Plus, Bot, Type, Layout, LayoutGrid, BarChart as BarChart$1, Filter, Search, ArrowUp, ArrowDown, RefreshCw, X, LineChart as LineChart$1, PieChart as PieChart$1, Table, FileText, Loader2, GripHorizontal, Edit, MessageCircleX, Edit2 } from 'lucide-react';
 import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area';
 import { Slot } from '@radix-ui/react-slot';
 import { debounce as debounce$1 } from 'lodash';
@@ -35970,30 +35970,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;
+                });
             }
         }
     }
@@ -36034,6 +36039,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',
@@ -36042,9 +36048,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);
@@ -36053,6 +36062,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,
@@ -36060,13 +36072,13 @@ function BarChartComponent({ orientation, barChartState, styles, appendMessage,
         }
     };
     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
     useEffect(() => {
-        if (isEmpty && startLoadingTimeout) {
+        if (isEmpty && startLoadingTimeout && !(barChartState === null || barChartState === void 0 ? void 0 : barChartState.agent_message)) {
             startLoadingTimeout();
         }
         else if (!isEmpty && clearLoadingTimeout) {
@@ -36105,6 +36117,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',
@@ -36113,9 +36126,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);
@@ -36124,6 +36140,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,
@@ -36131,13 +36150,13 @@ function SeriesBarChartComponent({ orientation, seriesBarChartState, styles, app
         }
     };
     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
     useEffect(() => {
-        if (isEmpty && startLoadingTimeout) {
+        if (isEmpty && startLoadingTimeout && !(seriesBarChartState === null || seriesBarChartState === void 0 ? void 0 : seriesBarChartState.agent_message)) {
             startLoadingTimeout();
         }
         else if (!isEmpty && clearLoadingTimeout) {
@@ -36170,6 +36189,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',
@@ -36178,9 +36198,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);
@@ -36189,6 +36212,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,
@@ -36196,13 +36222,13 @@ function SeriesLineChartComponent({ orientation, seriesLineChartState, styles, a
         }
     };
     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
     useEffect(() => {
-        if (isEmpty && startLoadingTimeout) {
+        if (isEmpty && startLoadingTimeout && !(seriesLineChartState === null || seriesLineChartState === void 0 ? void 0 : seriesLineChartState.agent_message)) {
             startLoadingTimeout();
         }
         else if (!isEmpty && clearLoadingTimeout) {
@@ -36243,6 +36269,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',
@@ -36251,9 +36278,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);
@@ -36262,6 +36292,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,
@@ -36269,13 +36302,13 @@ function PieChartComponent({ pieChartState, styles, appendMessage, query, isFirs
         }
     };
     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
     useEffect(() => {
-        if (isEmpty && startLoadingTimeout) {
+        if (isEmpty && startLoadingTimeout && !(pieChartState === null || pieChartState === void 0 ? void 0 : pieChartState.agent_message)) {
             startLoadingTimeout();
         }
         else if (!isEmpty && clearLoadingTimeout) {
@@ -36323,6 +36356,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',
@@ -36331,9 +36365,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);
@@ -36342,6 +36379,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,
@@ -36349,13 +36389,13 @@ function LineChartComponent({ lineChartState, styles, appendMessage, query, isFi
         }
     };
     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
     useEffect(() => {
-        if (isEmpty && startLoadingTimeout) {
+        if (isEmpty && startLoadingTimeout && !(lineChartState === null || lineChartState === void 0 ? void 0 : lineChartState.agent_message)) {
             startLoadingTimeout();
         }
         else if (!isEmpty && clearLoadingTimeout) {
@@ -36403,6 +36443,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',
@@ -36411,9 +36452,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);
@@ -36422,6 +36466,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,
@@ -36429,13 +36476,13 @@ function DataGridComponent({ dataGridState, styles, appendMessage, query, isFirs
         }
     };
     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
     useEffect(() => {
-        if (isEmpty && startLoadingTimeout) {
+        if (isEmpty && startLoadingTimeout && !(dataGridState === null || dataGridState === void 0 ? void 0 : dataGridState.agent_message)) {
             startLoadingTimeout();
         }
         else if (!isEmpty && clearLoadingTimeout) {
@@ -36461,6 +36508,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',
@@ -36469,9 +36517,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);
@@ -36480,6 +36531,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,
@@ -36487,7 +36541,7 @@ function SummaryComponent({ summaryState, styles, appendMessage, query, isFirstL
         }
     };
     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();
@@ -36496,7 +36550,7 @@ function SummaryComponent({ summaryState, styles, appendMessage, query, isFirstL
     }, [isEmpty, query, isFirstLoad]);
     // Start timeout when summary is empty and loading
     useEffect(() => {
-        if (isEmpty && startLoadingTimeout) {
+        if (isEmpty && startLoadingTimeout && !(summaryState === null || summaryState === void 0 ? void 0 : summaryState.agent_message)) {
             startLoadingTimeout();
         }
         else if (!isEmpty && clearLoadingTimeout) {
@@ -36509,13 +36563,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 } = useCopilotContext();
     const timeoutRef = useRef(null);
     const [isTimeoutTriggered, setIsTimeoutTriggered] = useState(false);
+    const [timeoutCount, setTimeoutCount] = useState(0);
     useEffect(() => {
         setThreadId(widget.id);
     }, [widget.id, setThreadId]);
@@ -36697,16 +36752,17 @@ function CopilotKitAgent({ widget, showHeader, styles, onResetReady, widgetIds,
     // Function to handle timeout and call loadAgentState API
     const handleLoadingTimeout = 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 = useCallback(() => {
         if (timeoutRef.current) {
@@ -36724,6 +36780,28 @@ function CopilotKitAgent({ widget, showHeader, styles, onResetReady, widgetIds,
             timeoutRef.current = null;
         }
     }, []);
+    // Function to clear chat and reset chart state
+    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
     useEffect(() => {
         return () => {
@@ -36732,13 +36810,26 @@ function CopilotKitAgent({ widget, showHeader, styles, onResetReady, widgetIds,
             }
         };
     }, []);
-    const { appendMessage, reset } = useCopilotChat();
+    const { appendMessage, reset, isLoading } = useCopilotChat();
     // Register the reset function with the parent component
     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);
         }
-    }, [reset, widget.id]); // Removed onResetReady from deps to avoid the error
+        else {
+            console.log('Not registering reset - missing dependencies');
+        }
+    }, [reset, widget.id, onResetReady]); // Removed onResetReady from deps to avoid the error
     // Listen for triggerAgent events for this widget
     useEffect(() => {
         const handleTriggerAgent = (event) => {
@@ -36773,14 +36864,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, setChartState]);
+    // Monitor chartState and add manual clear functionality
+    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, 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(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(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, 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(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(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 })));
                     } })) })] }));
@@ -37117,7 +37434,7 @@ function WidgetDashboard({ pageId, isEditing, selectedWidget = null, onWidgetSel
                         },
                         body: JSON.stringify({
                             session_id: editingWidget.id,
-                            delete_state: false
+                            delete_state: true
                         }),
                     });
                 }
@@ -37514,8 +37831,8 @@ function WidgetDashboard({ pageId, isEditing, selectedWidget = null, onWidgetSel
     return (jsxRuntimeExports.jsxs("div", { className: "w-full max-w-full p-4 bg-accent/5", children: [jsxRuntimeExports.jsx(AddWidgetDialog, { isOpen: openWidgetPallete, onClose: onCloseWidgetPallete, addWidgetFn: (widgetType, config) => {
                     addWidget(widgetType, config);
                     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(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], 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.jsx("div", { className: "flex items-center justify-end mb-4", children: jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2 cursor-pointer", children: [jsxRuntimeExports.jsx(Trash2, { onClick: () => removeWidget(w.id), className: "w-5 h-5 text-red-700" }), jsxRuntimeExports.jsx(Edit, { onClick: () => onClickSettings && onClickSettings(w), className: "w-5 h-5 text-gray-600" }), jsxRuntimeExports.jsx(GripVertical, { className: "drag-icon cursor-grab" })] }) }), jsxRuntimeExports.jsxs("div", { className: "w-full h-full relative", children: [(w === null || w === void 0 ? void 0 : w.type) === "chatbot" &&
+                }, 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(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(GripHorizontal, { className: "" }), jsxRuntimeExports.jsx(GripHorizontal, { className: "-ml-[3px]" }), jsxRuntimeExports.jsx(GripHorizontal, { className: "-ml-[3px]" })] }), jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2 cursor-pointer justify-end", children: [jsxRuntimeExports.jsx(Trash2, { onClick: () => removeWidget(w.id), className: "w-5 h-5 text-red-700" }), jsxRuntimeExports.jsx(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(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"