dp-widgets-framework 1.5.8 → 1.6.0

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, ChevronRight, RefreshCw, Send, X, AlignVerticalSpaceAround, LineChart as LineChart$1, PieChart as PieChart$1, Table, FileText, SlidersHorizontal, Loader2, GripHorizontal, Edit, 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, ChevronRight, RefreshCw, Send, Loader2, X, AlignVerticalSpaceAround, LineChart as LineChart$1, PieChart as PieChart$1, Table, FileText, SlidersHorizontal, 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';
@@ -1986,6 +1986,29 @@ function WidgetPalette({ widgetBackendUrl } = {}) {
                         }, className: "cursor-move hover:bg-accent transition-colors", children: jsxRuntimeExports.jsx(CardContent, { className: "p-3", children: jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2", children: [React__default.createElement(widget.icon, {}), jsxRuntimeExports.jsxs("div", { children: [jsxRuntimeExports.jsx("h4", { className: "font-medium text-sm", children: widget.name }), jsxRuntimeExports.jsx("p", { className: "text-xs text-muted-foreground", children: widget.description })] })] }) }) }, widget.type))) }) })] }));
 }
 
+const badgeVariants = cva("inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2", {
+    variants: {
+        variant: {
+            default: "border-transparent bg-primary text-primary-foreground hover:bg-primary/80",
+            secondary: "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
+            destructive: "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
+            outline: "text-foreground",
+            // Filter status variants
+            success: "border-transparent bg-green-100 text-green-800 hover:bg-green-200",
+            warning: "border-transparent bg-amber-100 text-amber-800 hover:bg-amber-200",
+            muted: "border-transparent bg-gray-100 text-gray-600 hover:bg-gray-200",
+            error: "border-transparent bg-red-100 text-red-800 hover:bg-red-200",
+        },
+    },
+    defaultVariants: {
+        variant: "default",
+    },
+});
+function Badge(_a) {
+    var { className, variant } = _a, props = __rest(_a, ["className", "variant"]);
+    return (jsxRuntimeExports.jsx("div", Object.assign({ className: cn(badgeVariants({ variant }), className) }, props)));
+}
+
 const borderRadiusMap$2 = {
     none: "0px",
     rounded: "0.375rem",
@@ -39327,6 +39350,10 @@ const parseAndUpdateFilterState = (apiResponse, setFilterState) => {
                     if (filterData.agent_message) {
                         newFilterState.agent_message = filterData.agent_message;
                     }
+                    // Handle error key as a fallback for agent_message
+                    if (filterData.error && !newFilterState.agent_message) {
+                        newFilterState.agent_message = filterData.error;
+                    }
                     // Handle confirmation state
                     if (filterData.status) {
                         newFilterState.status = filterData.status;
@@ -39382,15 +39409,17 @@ function TableSelectionConfirmation({ ambiguousColumns, resolvedColumns, message
         onConfirm(selectedTables);
     };
     const allSelected = ambiguousColumns.every((col) => selectedTables[col.column]);
-    return (jsxRuntimeExports.jsxs("div", { className: "flex flex-col h-full p-4 bg-white", children: [jsxRuntimeExports.jsxs("div", { className: "mb-4", children: [jsxRuntimeExports.jsx("h3", { className: "text-lg font-semibold text-gray-800 mb-2", children: "Table Selection Required" }), message && (jsxRuntimeExports.jsx("p", { className: "text-sm text-gray-600 mb-4 whitespace-pre-line", children: message }))] }), resolvedColumns && resolvedColumns.length > 0 && (jsxRuntimeExports.jsxs("div", { className: "mb-4 p-3 bg-green-50 border border-green-200 rounded-lg", children: [jsxRuntimeExports.jsx("p", { className: "text-sm font-medium text-green-800 mb-2", children: "Already Resolved Columns:" }), jsxRuntimeExports.jsx("div", { className: "space-y-1", children: resolvedColumns.map((col) => (jsxRuntimeExports.jsxs("div", { className: "text-sm text-green-700", children: [jsxRuntimeExports.jsx("span", { className: "font-medium", children: col.column }), " \u2192 ", jsxRuntimeExports.jsx("span", { className: "text-green-600", children: col.table_name })] }, col.column))) })] })), jsxRuntimeExports.jsx(ScrollArea, { className: "flex-1 mb-4", children: jsxRuntimeExports.jsx("div", { className: "space-y-4", children: ambiguousColumns.map((col) => (jsxRuntimeExports.jsxs("div", { className: "border border-gray-200 rounded-lg p-3", children: [jsxRuntimeExports.jsx("label", { className: "block mb-2", children: jsxRuntimeExports.jsxs("span", { className: "text-sm font-medium text-gray-700", children: ["Column: ", jsxRuntimeExports.jsx("span", { className: "text-primary-600", children: col.column })] }) }), jsxRuntimeExports.jsxs("select", { value: selectedTables[col.column] || '', onChange: (e) => {
+    return (jsxRuntimeExports.jsxs("div", { className: "flex flex-col h-full p-4 bg-white overflow-hidden", children: [jsxRuntimeExports.jsxs("div", { className: "mb-4 flex-shrink-0", children: [jsxRuntimeExports.jsx("h3", { className: "text-lg font-semibold text-gray-800 mb-2", children: "Table Selection Required" }), message && (jsxRuntimeExports.jsx("p", { className: "text-sm text-gray-600 mb-4 whitespace-pre-line", children: message }))] }), resolvedColumns && resolvedColumns.length > 0 && (jsxRuntimeExports.jsxs("div", { className: "mb-4 p-3 bg-green-50 border border-green-200 rounded-lg flex-shrink-0", children: [jsxRuntimeExports.jsx("p", { className: "text-sm font-medium text-green-800 mb-2", children: "Already Resolved Columns:" }), jsxRuntimeExports.jsx("div", { className: "space-y-1", children: resolvedColumns.map((col) => (jsxRuntimeExports.jsxs("div", { className: "text-sm text-green-700", children: [jsxRuntimeExports.jsx("span", { className: "font-medium", children: col.column }), " \u2192 ", jsxRuntimeExports.jsx("span", { className: "text-green-600", children: col.table_name })] }, col.column))) })] })), jsxRuntimeExports.jsx("div", { className: "flex-1 overflow-y-auto mb-4 min-h-0 scrollbar-thin scrollbar-thumb-gray-300 scrollbar-track-transparent", children: jsxRuntimeExports.jsx("div", { className: "space-y-4", children: ambiguousColumns.map((col) => (jsxRuntimeExports.jsxs("div", { className: "border border-gray-200 rounded-lg p-3", children: [jsxRuntimeExports.jsx("label", { className: "block mb-2", children: jsxRuntimeExports.jsxs("span", { className: "text-sm font-medium text-gray-700", children: ["Column: ", jsxRuntimeExports.jsx("span", { className: "text-primary-600", children: col.column })] }) }), jsxRuntimeExports.jsxs("select", { value: selectedTables[col.column] || '', onChange: (e) => {
                                     setSelectedTables((prev) => (Object.assign(Object.assign({}, prev), { [col.column]: e.target.value })));
-                                }, className: "w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary-500", children: [jsxRuntimeExports.jsx("option", { value: "", children: "Select a table..." }), col.tables.map((table) => (jsxRuntimeExports.jsx("option", { value: table, children: table }, table)))] })] }, col.column))) }) }), jsxRuntimeExports.jsxs("div", { className: "flex gap-2 pt-3 border-t border-gray-200", children: [jsxRuntimeExports.jsx(Button, { onClick: onCancel, variant: "outline", className: "flex-1", children: "Cancel" }), jsxRuntimeExports.jsx(Button, { onClick: handleSubmit, disabled: !allSelected, className: "flex-1 bg-primary-600 hover:bg-primary-700 text-white disabled:bg-gray-400", children: "Confirm Selection" })] })] }));
+                                }, className: "w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary-500", children: [jsxRuntimeExports.jsx("option", { value: "", children: "Select a table..." }), col.tables.map((table) => (jsxRuntimeExports.jsx("option", { value: table, children: table }, table)))] })] }, col.column))) }) }), jsxRuntimeExports.jsxs("div", { className: "flex gap-2 pt-3 border-t border-gray-200 flex-shrink-0", children: [jsxRuntimeExports.jsx(Button, { onClick: onCancel, variant: "outline", className: "flex-1", children: "Cancel" }), jsxRuntimeExports.jsx(Button, { onClick: handleSubmit, disabled: !allSelected, className: "flex-1 bg-primary-600 hover:bg-primary-700 text-white disabled:bg-gray-400", children: "Confirm Selection" })] })] }));
 }
 function FiltersContent({ filterGroups, showHeader, onFilterChange, widget, appendMessage, query, isFirstLoad, widgetBackendUrl, widgetId, startLoadingTimeout, clearLoadingTimeout, filterState, onApplyFilters, isEditing = false, }) {
+    var _a;
     const hasCalledRef = useRef(false);
     const [expandedGroups, setExpandedGroups] = useState({});
     const [selectedFilters, setSelectedFilters] = useState({});
     const [searchQueries, setSearchQueries] = useState({});
+    const [isSubmitting, setIsSubmitting] = useState(false);
     const isEmpty = filterGroups.length === 0;
     const handleRefresh = async () => {
         if (query) {
@@ -39428,6 +39457,29 @@ function FiltersContent({ filterGroups, showHeader, onFilterChange, widget, appe
         });
         setExpandedGroups(initialExpanded);
     }, [filterGroups]);
+    // Initialize selected filters from widget.config.filters
+    useEffect(() => {
+        var _a;
+        if (((_a = widget.config) === null || _a === void 0 ? void 0 : _a.filters) && filterGroups.length > 0) {
+            const initialSelectedFilters = {};
+            Object.entries(widget.config.filters).forEach(([groupId, labels]) => {
+                const group = filterGroups.find(g => g.id === groupId);
+                if (group && Array.isArray(labels)) {
+                    // Convert labels back to option IDs
+                    const optionIds = labels
+                        .map(label => {
+                        const option = group.options.find(opt => opt.label === label);
+                        return option === null || option === void 0 ? void 0 : option.id;
+                    })
+                        .filter((id) => id !== undefined);
+                    if (optionIds.length > 0) {
+                        initialSelectedFilters[groupId] = optionIds;
+                    }
+                }
+            });
+            setSelectedFilters(initialSelectedFilters);
+        }
+    }, [(_a = widget.config) === null || _a === void 0 ? void 0 : _a.filters, filterGroups]);
     const toggleGroup = (groupId) => {
         setExpandedGroups((prev) => (Object.assign(Object.assign({}, prev), { [groupId]: !prev[groupId] })));
     };
@@ -39474,24 +39526,24 @@ function FiltersContent({ filterGroups, showHeader, onFilterChange, widget, appe
     if (isEmpty) {
         return createLoadingComponent$4();
     }
-    return (jsxRuntimeExports.jsxs("div", { className: "h-full flex flex-col bg-white rounded-lg", children: [showHeader && (jsxRuntimeExports.jsx("div", { className: "px-4 py-3 border-b border-gray-100", children: jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2", children: [jsxRuntimeExports.jsx(Bot, { className: "h-4 w-4" }), jsxRuntimeExports.jsx("h3", { className: "font-semibold text-gray-800", children: "Filters" })] }) })), jsxRuntimeExports.jsx(ScrollArea, { className: "flex-1", children: jsxRuntimeExports.jsx("div", { className: "p-2", children: filterGroups.map((group) => {
+    return (jsxRuntimeExports.jsxs("div", { className: "h-full flex flex-col bg-white rounded-lg overflow-hidden", children: [showHeader && (jsxRuntimeExports.jsx("div", { className: "px-4 py-3 border-b border-gray-100 flex-shrink-0", children: jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2", children: [jsxRuntimeExports.jsx(Bot, { className: "h-4 w-4" }), jsxRuntimeExports.jsx("h3", { className: "font-semibold text-gray-800", children: "Filters" })] }) })), jsxRuntimeExports.jsx("div", { className: "flex-1 overflow-y-auto min-h-0 scrollbar-thin scrollbar-thumb-gray-300 scrollbar-track-transparent", children: jsxRuntimeExports.jsx("div", { className: "p-2", children: filterGroups.map((group) => {
                         const isExpanded = expandedGroups[group.id];
                         const selectedCount = getSelectedCount(group.id);
                         const filteredOptions = getFilteredOptions(group);
                         return (jsxRuntimeExports.jsxs("div", { className: "mb-2 border border-gray-100 rounded-lg overflow-hidden", children: [jsxRuntimeExports.jsxs("button", { onClick: () => toggleGroup(group.id), className: cn("w-full flex items-center justify-between px-3 py-2.5", "bg-gray-50 hover:bg-gray-100 transition-colors", "focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-inset"), children: [jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2", children: [isExpanded ? (jsxRuntimeExports.jsx(ChevronDown, { className: "w-4 h-4 text-primary-600" })) : (jsxRuntimeExports.jsx(ChevronRight, { className: "w-4 h-4 text-gray-500" })), jsxRuntimeExports.jsx("span", { className: "font-medium text-sm text-gray-700", children: group.name }), selectedCount > 0 && (jsxRuntimeExports.jsx("span", { className: "ml-1 px-1.5 py-0.5 text-xs font-medium bg-primary-100 text-primary-700 rounded-full", children: selectedCount }))] }), selectedCount > 0 && (jsxRuntimeExports.jsx("button", { onClick: (e) => {
                                                 e.stopPropagation();
                                                 clearGroupFilters(group.id);
-                                            }, className: "text-xs text-primary-600 hover:text-primary-800 hover:underline", children: "Clear" }))] }), jsxRuntimeExports.jsx("div", { className: cn("overflow-hidden transition-all duration-200 ease-in-out", isExpanded ? "max-h-[400px]" : "max-h-0"), children: jsxRuntimeExports.jsxs("div", { className: "px-3 py-2 bg-white", children: [group.options.length > 5 && (jsxRuntimeExports.jsxs("div", { className: "relative mb-2", children: [jsxRuntimeExports.jsx(Search, { className: "absolute left-2.5 top-1/2 transform -translate-y-1/2 w-3.5 h-3.5 text-gray-400" }), jsxRuntimeExports.jsx(Input, { type: "text", placeholder: `Search ${group.name.toLowerCase()}...`, value: searchQueries[group.id] || "", onChange: (e) => handleSearchChange(group.id, e.target.value), className: "pl-8 h-8 text-sm border-gray-200 focus:border-primary-400 focus:ring-primary-400" })] })), jsxRuntimeExports.jsx("div", { className: "space-y-1 max-h-[250px] overflow-y-auto pr-1", children: filteredOptions.length === 0 ? (jsxRuntimeExports.jsx("p", { className: "text-sm text-gray-500 py-2 text-center", children: "No options found" })) : (filteredOptions.map((option) => {
+                                            }, className: "text-xs text-primary-600 hover:text-primary-800 hover:underline", children: "Clear" }))] }), jsxRuntimeExports.jsx("div", { className: cn("overflow-hidden transition-all duration-200 ease-in-out", isExpanded ? "max-h-[500px]" : "max-h-0"), children: jsxRuntimeExports.jsxs("div", { className: "px-3 py-2 bg-white", children: [group.options.length > 5 && (jsxRuntimeExports.jsxs("div", { className: "relative mb-2", children: [jsxRuntimeExports.jsx(Search, { className: "absolute left-2.5 top-1/2 transform -translate-y-1/2 w-3.5 h-3.5 text-gray-400" }), jsxRuntimeExports.jsx(Input, { type: "text", placeholder: `Search ${group.name.toLowerCase()}...`, value: searchQueries[group.id] || "", onChange: (e) => handleSearchChange(group.id, e.target.value), className: "pl-8 h-8 text-sm border-gray-200 focus:border-primary-400 focus:ring-primary-400" })] })), jsxRuntimeExports.jsx("div", { className: "space-y-1 max-h-[350px] overflow-y-auto pr-1 scrollbar-thin scrollbar-thumb-gray-300 scrollbar-track-transparent", children: filteredOptions.length === 0 ? (jsxRuntimeExports.jsx("p", { className: "text-sm text-gray-500 py-2 text-center", children: "No options found" })) : (filteredOptions.map((option) => {
                                                     var _a;
                                                     const isChecked = ((_a = selectedFilters[group.id]) === null || _a === void 0 ? void 0 : _a.includes(option.id)) || false;
                                                     return (jsxRuntimeExports.jsxs("label", { className: cn("flex items-center gap-2.5 px-2 py-1.5 rounded-md cursor-pointer", "hover:bg-gray-50 transition-colors", isChecked && "bg-primary-50"), children: [jsxRuntimeExports.jsx(Checkbox, { checked: isChecked, onCheckedChange: (checked) => handleCheckboxChange(group.id, option.id, checked), className: cn("h-4 w-4 rounded border-gray-300", "data-[state=checked]:bg-primary-600 data-[state=checked]:border-primary-600") }), jsxRuntimeExports.jsx("span", { className: cn("text-sm flex-1 truncate", isChecked ? "text-primary-700 font-medium" : "text-gray-600"), title: option.label, children: option.label }), option.count !== undefined && (jsxRuntimeExports.jsxs("span", { className: "text-xs text-gray-400", children: ["(", option.count, ")"] }))] }, option.id));
                                                 })) })] }) })] }, group.id));
-                    }) }) }), jsxRuntimeExports.jsx("div", { className: "px-4 py-2 border-t border-gray-100 bg-gray-50", children: jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between", children: [Object.values(selectedFilters).some((arr) => arr.length > 0) ? (jsxRuntimeExports.jsx("button", { onClick: () => {
+                    }) }) }), jsxRuntimeExports.jsx("div", { className: "px-4 py-2 border-t border-gray-100 bg-gray-50 flex-shrink-0", children: jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between", children: [Object.values(selectedFilters).some((arr) => arr.length > 0) ? (jsxRuntimeExports.jsx("button", { onClick: () => {
                                 setSelectedFilters({});
                                 if (onFilterChange) {
                                     onFilterChange({});
                                 }
-                            }, className: "py-1.5 text-sm font-medium text-primary-600 hover:text-primary-800 hover:bg-primary-50 rounded-md transition-colors px-2", children: "Clear All Filters" })) : (jsxRuntimeExports.jsx("div", {})), jsxRuntimeExports.jsx(Button, { onClick: () => {
+                            }, className: "py-1.5 text-sm font-medium text-primary-600 hover:text-primary-800 hover:bg-primary-50 rounded-md transition-colors px-2", children: "Clear All Filters" })) : (jsxRuntimeExports.jsx("div", {})), jsxRuntimeExports.jsx(Button, { onClick: async () => {
                                 // Convert option IDs back to original label values
                                 const filtersWithLabels = {};
                                 filterGroups.forEach((group) => {
@@ -39501,8 +39553,37 @@ function FiltersContent({ filterGroups, showHeader, onFilterChange, widget, appe
                                         return (option === null || option === void 0 ? void 0 : option.label) || optionId;
                                     });
                                 });
-                                onApplyFilters === null || onApplyFilters === void 0 ? void 0 : onApplyFilters(filtersWithLabels);
-                            }, disabled: isEditing, className: `${isEditing ? 'bg-gray-400 cursor-not-allowed' : 'bg-primary-600 hover:bg-primary-700'} text-white`, title: isEditing ? 'Save the layout first to apply filters' : '', children: "Apply Filters" })] }) })] }));
+                                // Call API to update widget config with filters
+                                if (widgetBackendUrl && widgetId) {
+                                    setIsSubmitting(true);
+                                    try {
+                                        const response = await fetch(`${widgetBackendUrl}/api/widgets/${widgetId}/config`, {
+                                            method: 'PATCH',
+                                            headers: {
+                                                'Content-Type': 'application/json',
+                                            },
+                                            body: JSON.stringify({
+                                                config: Object.assign(Object.assign({}, widget.config), { filters: filtersWithLabels }),
+                                            }),
+                                        });
+                                        if (!response.ok) {
+                                            throw new Error('Failed to update widget config');
+                                        }
+                                        // Call the onApplyFilters callback after successful API call
+                                        onApplyFilters === null || onApplyFilters === void 0 ? void 0 : onApplyFilters(filtersWithLabels);
+                                    }
+                                    catch (error) {
+                                        console.error('Error updating widget config:', error);
+                                    }
+                                    finally {
+                                        setIsSubmitting(false);
+                                    }
+                                }
+                                else {
+                                    // Fallback if no backend URL - just call the callback
+                                    onApplyFilters === null || onApplyFilters === void 0 ? void 0 : onApplyFilters(filtersWithLabels);
+                                }
+                            }, disabled: isEditing || isSubmitting, className: `${isEditing || isSubmitting ? 'bg-gray-400 cursor-not-allowed' : 'bg-primary-600 hover:bg-primary-700'} text-white`, title: isEditing ? 'Save the layout first to apply filters' : '', children: isSubmitting ? (jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsx(Loader2, { className: "mr-2 h-4 w-4 animate-spin" }), "Applying..."] })) : ('Apply Filters') })] }) })] }));
 }
 function CopilotKitFilters({ widget, showHeader, onFilterChange, onResetReady, widgetBackendUrl, datasetId, onApplyFilters, isEditing = false, }) {
     var _a, _b, _c, _d, _e, _f, _g, _h;
@@ -41356,7 +41437,7 @@ const IconMap = {
     'pie-chart': PieChart$1,
     'chatbot': Bot,
 };
-function WidgetDashboard({ pageId, isEditing, selectedWidget = null, onWidgetSelect, refreshKey, widgetBackendUrl, onSaveLayoutReady, openWidgetPallete = false, onCloseWidgetPallete, defaultAgentName = "adk-construction-project-agent", userId, onApplyFilters, activeFilters = {} }) {
+function WidgetDashboard({ pageId, isEditing, selectedWidget = null, onWidgetSelect, refreshKey, widgetBackendUrl, onSaveLayoutReady, openWidgetPallete = false, onCloseWidgetPallete, defaultAgentName = "adk-construction-project-agent", userId, onApplyFilters, filterResults, isApplyingFilters = false }) {
     const [widgets, setWidgets] = useState([]);
     const [datasetId, setDatasetId] = useState('');
     const [availableWidgets, setAvailableWidgets] = useState([]);
@@ -41371,6 +41452,31 @@ function WidgetDashboard({ pageId, isEditing, selectedWidget = null, onWidgetSel
     const [editInitialQuery, setEditInitialQuery] = useState("");
     const [editingWidget, setEditingWidget] = useState(null);
     const [widgetResetFunctions, setWidgetResetFunctions] = useState(new Map());
+    // Helper to get filter status for a widget
+    const getWidgetFilterStatus = useCallback((widgetId) => {
+        if (!filterResults)
+            return null;
+        // Only show status for agent widgets
+        const result = filterResults.results.find(r => r.widgetId === widgetId);
+        if (!result)
+            return null;
+        return result;
+    }, [filterResults]);
+    // Helper to get badge variant based on filter status
+    const getFilterStatusBadge = (status) => {
+        switch (status) {
+            case "updated":
+                return { variant: "success", label: "Filtered", icon: "✓" };
+            case "no_data":
+                return { variant: "warning", label: "No Data", icon: "⚠" };
+            case "skipped":
+                return { variant: "muted", label: "Skipped", icon: "−" };
+            case "failed":
+                return { variant: "error", label: "Failed", icon: "✕" };
+            default:
+                return { variant: "muted", label: status, icon: "?" };
+        }
+    };
     // Use external selectedWidget if provided, otherwise use internal state
     const currentSelectedWidget = selectedWidget !== undefined ? selectedWidget : internalSelectedWidget;
     const setSelectedWidget = onWidgetSelect || setInternalSelectedWidget;
@@ -41435,6 +41541,19 @@ function WidgetDashboard({ pageId, isEditing, selectedWidget = null, onWidgetSel
                 }
             });
             window.dispatchEvent(event);
+            // If filters have been applied (filter widget exists), regenerate filtered_sql_query for this widget
+            // This handles the case where a widget's query is changed after filters have been applied
+            const hasFilterWidget = widgets.some(w => w.type === 'filters');
+            if (hasFilterWidget && editingWidget.type === 'agent' && widgetBackendUrl) {
+                // Dispatch event to notify that filtered query needs regeneration for this widget
+                const regenerateEvent = new CustomEvent('regenerateFilteredQuery', {
+                    detail: {
+                        widgetId: editingWidget.id,
+                        dashboardId: pageId
+                    }
+                });
+                window.dispatchEvent(regenerateEvent);
+            }
         }
     };
     const handleResetReady = useCallback((widgetId, resetFn) => {
@@ -41526,6 +41645,15 @@ function WidgetDashboard({ pageId, isEditing, selectedWidget = null, onWidgetSel
         };
         loadWidgetTypes();
     }, []);
+    // Track original widget IDs from initial load
+    const originalWidgetIdsRef = useRef(new Set());
+    // Update original widget IDs when widgets are loaded from server
+    useEffect(() => {
+        if (pageData === null || pageData === void 0 ? void 0 : pageData.widgets) {
+            const ids = new Set(pageData.widgets.map((w) => w.id));
+            originalWidgetIdsRef.current = ids;
+        }
+    }, [pageData]);
     // Use ref to store the latest save function without causing re-renders
     const saveLayoutRef = useRef();
     // Update the ref whenever dependencies change
@@ -41533,6 +41661,13 @@ function WidgetDashboard({ pageId, isEditing, selectedWidget = null, onWidgetSel
         if (!pageData) {
             throw new Error("No page data available");
         }
+        // Identify new agent widgets (added since last load/save)
+        const currentWidgetIds = new Set(widgets.map(w => w.id));
+        const newAgentWidgetIds = widgets
+            .filter(w => w.type === 'agent' && !originalWidgetIdsRef.current.has(w.id))
+            .map(w => w.id);
+        // Check if there's a filter widget on this dashboard
+        const hasFilterWidget = widgets.some(w => w.type === 'filters');
         try {
             const response = await fetch(getApiUrl(`/api/pages/${pageId}`), {
                 method: "PUT",
@@ -41550,16 +41685,42 @@ function WidgetDashboard({ pageId, isEditing, selectedWidget = null, onWidgetSel
                 throw new Error("Failed to save layout");
             }
             const savedData = await response.json();
-            // setPageData(savedData);
-            // // Update local widgets state to clear isFirstLoad flag
-            // setWidgets(prevWidgets => prevWidgets.map(widget => ({
-            //   ...widget,
-            //   config: {
-            //     ...widget.config,
-            //     isFirstLoad: false
-            //   }
-            // })));
+            // Update original widget IDs to include newly saved widgets
+            originalWidgetIdsRef.current = currentWidgetIds;
             console.log('Layout saved successfully');
+            // If there are new agent widgets and a filter widget exists,
+            // schedule generation of filtered_sql_query for new widgets
+            // Note: This is done asynchronously after save to not block the save operation
+            // The actual generation will happen after the widget agents have run and created sql_query
+            if (newAgentWidgetIds.length > 0 && hasFilterWidget) {
+                console.log(`[WidgetDashboard] New agent widgets detected: ${newAgentWidgetIds.join(', ')}`);
+                console.log('[WidgetDashboard] Filter widget exists - filtered_sql_query will be generated when filters are applied');
+                // Optionally, we could trigger generation after a delay to allow widget agents to initialize
+                // For now, we rely on the auto-generation in /api/filters/apply when filters are applied
+                // Uncomment below to proactively generate after a delay:
+                /*
+                setTimeout(async () => {
+                  try {
+                    console.log('[WidgetDashboard] Generating filtered_sql_query for new widgets...');
+                    const generateResponse = await fetch(getApiUrl('/api/filters/generate-queries'), {
+                      method: 'POST',
+                      headers: { 'Content-Type': 'application/json' },
+                      body: JSON.stringify({
+                        dashboard_id: pageId,
+                        widget_ids: newAgentWidgetIds,
+                        regenerate: false,
+                      }),
+                    });
+                    if (generateResponse.ok) {
+                      const result = await generateResponse.json();
+                      console.log('[WidgetDashboard] Generate queries result:', result);
+                    }
+                  } catch (err) {
+                    console.warn('[WidgetDashboard] Could not generate filtered queries for new widgets:', err);
+                  }
+                }, 5000); // 5 second delay to allow widget agents to initialize
+                */
+            }
         }
         catch (err) {
             console.error("Save error:", err);
@@ -41839,10 +42000,10 @@ function WidgetDashboard({ pageId, isEditing, selectedWidget = null, onWidgetSel
                     onCloseWidgetPallete && onCloseWidgetPallete();
                 }, defaultAgentName: defaultAgentName, hasFiltersWidget: widgets.some(w => w.type === 'filters') }), jsxRuntimeExports.jsx(EditWidgetDialog, { editingWidget: editingWidget, setWidgets: setWidgets, 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 gap-2", layouts: { lg: getLayoutFromWidgets() }, breakpoints: { lg: 1200, md: 996, sm: 768, xs: 480 }, cols: { lg: 12, md: 8, sm: 6, xs: 2 }, rowHeight: 60, isDraggable: isEditing, isResizable: isEditing, draggableHandle: ".drag-icon", onLayoutChange: handleLayoutChange, compactType: "vertical", containerPadding: [0, 0], margin: [16, 16], children: widgets.map((w) => {
                         var _a, _b;
-                        const hasActiveFilters = Object.keys(activeFilters).length > 0 && Object.values(activeFilters).some(arr => arr.length > 0);
-                        const shouldShowFilterBadge = hasActiveFilters && w.type !== "filters" && w.type !== "text" && w.type !== "spacer" && w.type !== "divider" && w.type !== "header" && w.type !== "footer";
-                        return (jsxRuntimeExports.jsxs("div", { className: `${(w.type === "text" || w.type === "spacer") ? `${((_b = (_a = w === null || w === void 0 ? void 0 : w.config) === null || _a === void 0 ? void 0 : _a.content) === null || _b === void 0 ? void 0 : _b.divider) === "yes" && "border-b border-gray-300"} ${isEditing ? 'shadow-lg rounded-xl border border-primary-300' : 'flex items-center'}` : `shadow-lg rounded-xl border border-primary-300 p-4 ${isEditing ? 'pb-14' : 'pb-5'}`}`, children: [isEditing &&
-                                    jsxRuntimeExports.jsxs("div", { className: `flex items-center justify-end mb-4 relative ${(w.type === "text" || w.type === "spacer") ? "pl-4 pr-4 pt-4" : ""}`, 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" }), (w.type !== "spacer" && w.type !== "chatbot") && jsxRuntimeExports.jsx(Edit, { onClick: () => onClickSettings && onClickSettings(w), className: "w-5 h-5 text-gray-600" })] })] }), !isEditing && shouldShowFilterBadge && (jsxRuntimeExports.jsxs("div", { className: "absolute top-2 right-2 z-10 bg-primary-600 text-white px-2 py-1 rounded-md shadow-md flex items-center gap-1.5 text-xs font-medium", children: [jsxRuntimeExports.jsx(Filter, { className: "w-3 h-3" }), jsxRuntimeExports.jsx("span", { children: "Filtered" })] })), jsxRuntimeExports.jsxs("div", { className: `${((w === null || w === void 0 ? void 0 : w.type) === 'text' || (w === null || w === void 0 ? void 0 : w.type) === 'spacer') ? `${isEditing ? 'px-4' : ''}` : "h-full"} w-full relative`, children: [(w === null || w === void 0 ? void 0 : w.type) === "chatbot" &&
+                        const filterStatus = w.type === 'agent' ? getWidgetFilterStatus(w.id) : null;
+                        const badgeInfo = filterStatus ? getFilterStatusBadge(filterStatus.status) : null;
+                        return (jsxRuntimeExports.jsxs("div", { className: `${(w.type === "text" || w.type === "spacer") ? `${((_b = (_a = w === null || w === void 0 ? void 0 : w.config) === null || _a === void 0 ? void 0 : _a.content) === null || _b === void 0 ? void 0 : _b.divider) === "yes" && "border-b border-gray-300"} ${isEditing ? 'shadow-lg rounded-xl border border-primary-300' : 'flex items-center'}` : `shadow-lg rounded-xl border border-primary-300 p-4 ${isEditing ? 'pb-14' : 'pb-5'}`} relative`, children: [w.type === 'agent' && badgeInfo && !isApplyingFilters && (jsxRuntimeExports.jsx("div", { className: "absolute top-2 right-2 z-10", title: (filterStatus === null || filterStatus === void 0 ? void 0 : filterStatus.reason) || (filterStatus === null || filterStatus === void 0 ? void 0 : filterStatus.error) || '', children: jsxRuntimeExports.jsxs(Badge, { variant: badgeInfo.variant, className: "text-[10px] px-2 py-0.5 gap-1", children: [jsxRuntimeExports.jsx("span", { children: badgeInfo.icon }), jsxRuntimeExports.jsx("span", { children: badgeInfo.label })] }) })), w.type === 'agent' && isApplyingFilters && (jsxRuntimeExports.jsx("div", { className: "absolute top-2 right-2 z-10", children: jsxRuntimeExports.jsxs(Badge, { variant: "secondary", className: "text-[10px] px-2 py-0.5 gap-1 animate-pulse", children: [jsxRuntimeExports.jsx(Loader2, { className: "w-3 h-3 animate-spin" }), jsxRuntimeExports.jsx("span", { children: "Filtering..." })] }) })), isEditing &&
+                                    jsxRuntimeExports.jsxs("div", { className: `flex items-center justify-end mb-4 relative ${(w.type === "text" || w.type === "spacer") ? "pl-4 pr-4 pt-4" : ""}`, 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" }), (w.type !== "spacer" && w.type !== "chatbot") && jsxRuntimeExports.jsx(Edit, { onClick: () => onClickSettings && onClickSettings(w), className: "w-5 h-5 text-gray-600" })] })] }), jsxRuntimeExports.jsxs("div", { className: `${((w === null || w === void 0 ? void 0 : w.type) === 'text' || (w === null || w === void 0 ? void 0 : w.type) === 'spacer') ? `${isEditing ? 'px-4' : ''}` : "h-full"} w-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 === null || w === void 0 ? void 0 : w.id), onMouseOver: () => setVisibleClearButton(w === null || w === void 0 ? void 0 : w.id), onMouseLeave: () => setVisibleClearButton(""), className: "absolute top-[12px] right-0 z-40 flex align-middle justify-center gap-2 text-sm px-4 py-2 border-primary-300 rounded-l-sm w-fit bg-primary-700 text-white cursor-pointer shadow-md transition-all", children: jsxRuntimeExports.jsx(MessageCircleX, { className: "w-5 h-5" }) }), jsxRuntimeExports.jsx("span", { className: `absolute top-[56px] right-[16px] z-50 w-max py-1 text-xs px-2 rounded-sm text-white bg-gray-950 ${visibleClearButton === (w === null || w === void 0 ? void 0 : w.id) ? "block" : "hidden"}`, children: "Clear Chat" })] }), jsxRuntimeExports.jsx(WidgetRenderer, { widget: w, widgetBackendUrl: widgetBackendUrl, onResetReady: handleResetReady, widgetIds: widgets.filter(widget => widget.type !== 'chatbot').map(widget => widget.id), datasetId: datasetId, pageId: pageId, onApplyFilters: onApplyFilters, isEditing: isEditing })] })] }, w.id));
                     }) })) })] }));
 }
@@ -44740,7 +44901,6 @@ function DashboardPages({ widgetBackendUrl }) {
     const [pages, setPages] = useState([]);
     const [isLoading, setIsLoading] = useState(true);
     const [error, setError] = useState(null);
-    const [activeFilters, setActiveFilters] = useState({});
     // Helper function to get API URL
     const getApiUrl = (endpoint) => {
         const baseUrl = widgetBackendUrl || '';
@@ -44749,10 +44909,6 @@ function DashboardPages({ widgetBackendUrl }) {
     useEffect(() => {
         loadPages();
     }, []);
-    const handleApplyFilters = (pageId) => (filters) => {
-        console.log('Filters applied for page:', pageId, filters);
-        setActiveFilters(prev => (Object.assign(Object.assign({}, prev), { [pageId]: filters })));
-    };
     const loadPages = async () => {
         try {
             setIsLoading(true);
@@ -44797,7 +44953,7 @@ function DashboardPages({ widgetBackendUrl }) {
     }
     return (jsxRuntimeExports.jsxs("div", { className: "container mx-auto p-6 h-screen flex flex-col", children: [jsxRuntimeExports.jsxs("div", { className: "mb-6", children: [jsxRuntimeExports.jsx("h1", { className: "text-2xl font-bold", children: "Dashboard Pages" }), jsxRuntimeExports.jsx("p", { className: "text-muted-foreground", children: "View all your saved pages in dashboard mode" })] }), jsxRuntimeExports.jsx("div", { className: "flex-1 overflow-hidden", children: jsxRuntimeExports.jsxs(Tabs, { defaultValue: (_a = pages[0]) === null || _a === void 0 ? void 0 : _a.id, className: "h-full flex flex-col", children: [jsxRuntimeExports.jsx(TabsList, { className: "grid w-full grid-cols-auto gap-1 mb-4", style: {
                                 gridTemplateColumns: `repeat(${pages.length}, minmax(120px, 1fr))`
-                            }, children: pages.map((page) => (jsxRuntimeExports.jsx(TabsTrigger, { value: page.id, className: "truncate px-3 py-2 data-[state=active]:bg-primary data-[state=active]:text-primary-foreground data-[state=active]:shadow-lg border-2 data-[state=active]:border-primary data-[state=inactive]:border-transparent hover:bg-accent hover:text-accent-foreground transition-all duration-200", title: page.title, children: page.title }, page.id))) }), pages.map((page) => (jsxRuntimeExports.jsx(TabsContent, { value: page.id, className: "flex-1 overflow-hidden m-0", children: jsxRuntimeExports.jsx("div", { className: "h-full border rounded-lg overflow-hidden", children: jsxRuntimeExports.jsx(WidgetDashboard, { pageId: page.id, isEditing: false, widgetBackendUrl: widgetBackendUrl, onApplyFilters: handleApplyFilters(page.id), activeFilters: activeFilters[page.id] || {} }) }) }, page.id)))] }) })] }));
+                            }, children: pages.map((page) => (jsxRuntimeExports.jsx(TabsTrigger, { value: page.id, className: "truncate px-3 py-2 data-[state=active]:bg-primary data-[state=active]:text-primary-foreground data-[state=active]:shadow-lg border-2 data-[state=active]:border-primary data-[state=inactive]:border-transparent hover:bg-accent hover:text-accent-foreground transition-all duration-200", title: page.title, children: page.title }, page.id))) }), pages.map((page) => (jsxRuntimeExports.jsx(TabsContent, { value: page.id, className: "flex-1 overflow-hidden m-0", children: jsxRuntimeExports.jsx("div", { className: "h-full border rounded-lg overflow-hidden", children: jsxRuntimeExports.jsx(WidgetDashboard, { pageId: page.id, isEditing: false, widgetBackendUrl: widgetBackendUrl }) }) }, page.id)))] }) })] }));
 }
 
 export { Button, DashboardPages, Input, SavedPages, WidgetDashboard, WidgetPalette, WidgetSettingsPanel, cn };

package/dist/index.js

@@ -2013,6 +2013,29 @@ function WidgetPalette({ widgetBackendUrl } = {}) {
                         }, className: "cursor-move hover:bg-accent transition-colors", children: jsxRuntimeExports.jsx(CardContent, { className: "p-3", children: jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2", children: [React.createElement(widget.icon, {}), jsxRuntimeExports.jsxs("div", { children: [jsxRuntimeExports.jsx("h4", { className: "font-medium text-sm", children: widget.name }), jsxRuntimeExports.jsx("p", { className: "text-xs text-muted-foreground", children: widget.description })] })] }) }) }, widget.type))) }) })] }));
 }
 
+const badgeVariants = classVarianceAuthority.cva("inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2", {
+    variants: {
+        variant: {
+            default: "border-transparent bg-primary text-primary-foreground hover:bg-primary/80",
+            secondary: "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
+            destructive: "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
+            outline: "text-foreground",
+            // Filter status variants
+            success: "border-transparent bg-green-100 text-green-800 hover:bg-green-200",
+            warning: "border-transparent bg-amber-100 text-amber-800 hover:bg-amber-200",
+            muted: "border-transparent bg-gray-100 text-gray-600 hover:bg-gray-200",
+            error: "border-transparent bg-red-100 text-red-800 hover:bg-red-200",
+        },
+    },
+    defaultVariants: {
+        variant: "default",
+    },
+});
+function Badge(_a) {
+    var { className, variant } = _a, props = __rest(_a, ["className", "variant"]);
+    return (jsxRuntimeExports.jsx("div", Object.assign({ className: cn(badgeVariants({ variant }), className) }, props)));
+}
+
 const borderRadiusMap$2 = {
     none: "0px",
     rounded: "0.375rem",
@@ -39354,6 +39377,10 @@ const parseAndUpdateFilterState = (apiResponse, setFilterState) => {
                     if (filterData.agent_message) {
                         newFilterState.agent_message = filterData.agent_message;
                     }
+                    // Handle error key as a fallback for agent_message
+                    if (filterData.error && !newFilterState.agent_message) {
+                        newFilterState.agent_message = filterData.error;
+                    }
                     // Handle confirmation state
                     if (filterData.status) {
                         newFilterState.status = filterData.status;
@@ -39409,15 +39436,17 @@ function TableSelectionConfirmation({ ambiguousColumns, resolvedColumns, message
         onConfirm(selectedTables);
     };
     const allSelected = ambiguousColumns.every((col) => selectedTables[col.column]);
-    return (jsxRuntimeExports.jsxs("div", { className: "flex flex-col h-full p-4 bg-white", children: [jsxRuntimeExports.jsxs("div", { className: "mb-4", children: [jsxRuntimeExports.jsx("h3", { className: "text-lg font-semibold text-gray-800 mb-2", children: "Table Selection Required" }), message && (jsxRuntimeExports.jsx("p", { className: "text-sm text-gray-600 mb-4 whitespace-pre-line", children: message }))] }), resolvedColumns && resolvedColumns.length > 0 && (jsxRuntimeExports.jsxs("div", { className: "mb-4 p-3 bg-green-50 border border-green-200 rounded-lg", children: [jsxRuntimeExports.jsx("p", { className: "text-sm font-medium text-green-800 mb-2", children: "Already Resolved Columns:" }), jsxRuntimeExports.jsx("div", { className: "space-y-1", children: resolvedColumns.map((col) => (jsxRuntimeExports.jsxs("div", { className: "text-sm text-green-700", children: [jsxRuntimeExports.jsx("span", { className: "font-medium", children: col.column }), " \u2192 ", jsxRuntimeExports.jsx("span", { className: "text-green-600", children: col.table_name })] }, col.column))) })] })), jsxRuntimeExports.jsx(ScrollArea, { className: "flex-1 mb-4", children: jsxRuntimeExports.jsx("div", { className: "space-y-4", children: ambiguousColumns.map((col) => (jsxRuntimeExports.jsxs("div", { className: "border border-gray-200 rounded-lg p-3", children: [jsxRuntimeExports.jsx("label", { className: "block mb-2", children: jsxRuntimeExports.jsxs("span", { className: "text-sm font-medium text-gray-700", children: ["Column: ", jsxRuntimeExports.jsx("span", { className: "text-primary-600", children: col.column })] }) }), jsxRuntimeExports.jsxs("select", { value: selectedTables[col.column] || '', onChange: (e) => {
+    return (jsxRuntimeExports.jsxs("div", { className: "flex flex-col h-full p-4 bg-white overflow-hidden", children: [jsxRuntimeExports.jsxs("div", { className: "mb-4 flex-shrink-0", children: [jsxRuntimeExports.jsx("h3", { className: "text-lg font-semibold text-gray-800 mb-2", children: "Table Selection Required" }), message && (jsxRuntimeExports.jsx("p", { className: "text-sm text-gray-600 mb-4 whitespace-pre-line", children: message }))] }), resolvedColumns && resolvedColumns.length > 0 && (jsxRuntimeExports.jsxs("div", { className: "mb-4 p-3 bg-green-50 border border-green-200 rounded-lg flex-shrink-0", children: [jsxRuntimeExports.jsx("p", { className: "text-sm font-medium text-green-800 mb-2", children: "Already Resolved Columns:" }), jsxRuntimeExports.jsx("div", { className: "space-y-1", children: resolvedColumns.map((col) => (jsxRuntimeExports.jsxs("div", { className: "text-sm text-green-700", children: [jsxRuntimeExports.jsx("span", { className: "font-medium", children: col.column }), " \u2192 ", jsxRuntimeExports.jsx("span", { className: "text-green-600", children: col.table_name })] }, col.column))) })] })), jsxRuntimeExports.jsx("div", { className: "flex-1 overflow-y-auto mb-4 min-h-0 scrollbar-thin scrollbar-thumb-gray-300 scrollbar-track-transparent", children: jsxRuntimeExports.jsx("div", { className: "space-y-4", children: ambiguousColumns.map((col) => (jsxRuntimeExports.jsxs("div", { className: "border border-gray-200 rounded-lg p-3", children: [jsxRuntimeExports.jsx("label", { className: "block mb-2", children: jsxRuntimeExports.jsxs("span", { className: "text-sm font-medium text-gray-700", children: ["Column: ", jsxRuntimeExports.jsx("span", { className: "text-primary-600", children: col.column })] }) }), jsxRuntimeExports.jsxs("select", { value: selectedTables[col.column] || '', onChange: (e) => {
                                     setSelectedTables((prev) => (Object.assign(Object.assign({}, prev), { [col.column]: e.target.value })));
-                                }, className: "w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary-500", children: [jsxRuntimeExports.jsx("option", { value: "", children: "Select a table..." }), col.tables.map((table) => (jsxRuntimeExports.jsx("option", { value: table, children: table }, table)))] })] }, col.column))) }) }), jsxRuntimeExports.jsxs("div", { className: "flex gap-2 pt-3 border-t border-gray-200", children: [jsxRuntimeExports.jsx(Button, { onClick: onCancel, variant: "outline", className: "flex-1", children: "Cancel" }), jsxRuntimeExports.jsx(Button, { onClick: handleSubmit, disabled: !allSelected, className: "flex-1 bg-primary-600 hover:bg-primary-700 text-white disabled:bg-gray-400", children: "Confirm Selection" })] })] }));
+                                }, className: "w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary-500", children: [jsxRuntimeExports.jsx("option", { value: "", children: "Select a table..." }), col.tables.map((table) => (jsxRuntimeExports.jsx("option", { value: table, children: table }, table)))] })] }, col.column))) }) }), jsxRuntimeExports.jsxs("div", { className: "flex gap-2 pt-3 border-t border-gray-200 flex-shrink-0", children: [jsxRuntimeExports.jsx(Button, { onClick: onCancel, variant: "outline", className: "flex-1", children: "Cancel" }), jsxRuntimeExports.jsx(Button, { onClick: handleSubmit, disabled: !allSelected, className: "flex-1 bg-primary-600 hover:bg-primary-700 text-white disabled:bg-gray-400", children: "Confirm Selection" })] })] }));
 }
 function FiltersContent({ filterGroups, showHeader, onFilterChange, widget, appendMessage, query, isFirstLoad, widgetBackendUrl, widgetId, startLoadingTimeout, clearLoadingTimeout, filterState, onApplyFilters, isEditing = false, }) {
+    var _a;
     const hasCalledRef = React.useRef(false);
     const [expandedGroups, setExpandedGroups] = React.useState({});
     const [selectedFilters, setSelectedFilters] = React.useState({});
     const [searchQueries, setSearchQueries] = React.useState({});
+    const [isSubmitting, setIsSubmitting] = React.useState(false);
     const isEmpty = filterGroups.length === 0;
     const handleRefresh = async () => {
         if (query) {
@@ -39455,6 +39484,29 @@ function FiltersContent({ filterGroups, showHeader, onFilterChange, widget, appe
         });
         setExpandedGroups(initialExpanded);
     }, [filterGroups]);
+    // Initialize selected filters from widget.config.filters
+    React.useEffect(() => {
+        var _a;
+        if (((_a = widget.config) === null || _a === void 0 ? void 0 : _a.filters) && filterGroups.length > 0) {
+            const initialSelectedFilters = {};
+            Object.entries(widget.config.filters).forEach(([groupId, labels]) => {
+                const group = filterGroups.find(g => g.id === groupId);
+                if (group && Array.isArray(labels)) {
+                    // Convert labels back to option IDs
+                    const optionIds = labels
+                        .map(label => {
+                        const option = group.options.find(opt => opt.label === label);
+                        return option === null || option === void 0 ? void 0 : option.id;
+                    })
+                        .filter((id) => id !== undefined);
+                    if (optionIds.length > 0) {
+                        initialSelectedFilters[groupId] = optionIds;
+                    }
+                }
+            });
+            setSelectedFilters(initialSelectedFilters);
+        }
+    }, [(_a = widget.config) === null || _a === void 0 ? void 0 : _a.filters, filterGroups]);
     const toggleGroup = (groupId) => {
         setExpandedGroups((prev) => (Object.assign(Object.assign({}, prev), { [groupId]: !prev[groupId] })));
     };
@@ -39501,24 +39553,24 @@ function FiltersContent({ filterGroups, showHeader, onFilterChange, widget, appe
     if (isEmpty) {
         return createLoadingComponent$4();
     }
-    return (jsxRuntimeExports.jsxs("div", { className: "h-full flex flex-col bg-white rounded-lg", children: [showHeader && (jsxRuntimeExports.jsx("div", { className: "px-4 py-3 border-b border-gray-100", children: jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2", children: [jsxRuntimeExports.jsx(lucideReact.Bot, { className: "h-4 w-4" }), jsxRuntimeExports.jsx("h3", { className: "font-semibold text-gray-800", children: "Filters" })] }) })), jsxRuntimeExports.jsx(ScrollArea, { className: "flex-1", children: jsxRuntimeExports.jsx("div", { className: "p-2", children: filterGroups.map((group) => {
+    return (jsxRuntimeExports.jsxs("div", { className: "h-full flex flex-col bg-white rounded-lg overflow-hidden", children: [showHeader && (jsxRuntimeExports.jsx("div", { className: "px-4 py-3 border-b border-gray-100 flex-shrink-0", children: jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2", children: [jsxRuntimeExports.jsx(lucideReact.Bot, { className: "h-4 w-4" }), jsxRuntimeExports.jsx("h3", { className: "font-semibold text-gray-800", children: "Filters" })] }) })), jsxRuntimeExports.jsx("div", { className: "flex-1 overflow-y-auto min-h-0 scrollbar-thin scrollbar-thumb-gray-300 scrollbar-track-transparent", children: jsxRuntimeExports.jsx("div", { className: "p-2", children: filterGroups.map((group) => {
                         const isExpanded = expandedGroups[group.id];
                         const selectedCount = getSelectedCount(group.id);
                         const filteredOptions = getFilteredOptions(group);
                         return (jsxRuntimeExports.jsxs("div", { className: "mb-2 border border-gray-100 rounded-lg overflow-hidden", children: [jsxRuntimeExports.jsxs("button", { onClick: () => toggleGroup(group.id), className: cn("w-full flex items-center justify-between px-3 py-2.5", "bg-gray-50 hover:bg-gray-100 transition-colors", "focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-inset"), children: [jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2", children: [isExpanded ? (jsxRuntimeExports.jsx(lucideReact.ChevronDown, { className: "w-4 h-4 text-primary-600" })) : (jsxRuntimeExports.jsx(lucideReact.ChevronRight, { className: "w-4 h-4 text-gray-500" })), jsxRuntimeExports.jsx("span", { className: "font-medium text-sm text-gray-700", children: group.name }), selectedCount > 0 && (jsxRuntimeExports.jsx("span", { className: "ml-1 px-1.5 py-0.5 text-xs font-medium bg-primary-100 text-primary-700 rounded-full", children: selectedCount }))] }), selectedCount > 0 && (jsxRuntimeExports.jsx("button", { onClick: (e) => {
                                                 e.stopPropagation();
                                                 clearGroupFilters(group.id);
-                                            }, className: "text-xs text-primary-600 hover:text-primary-800 hover:underline", children: "Clear" }))] }), jsxRuntimeExports.jsx("div", { className: cn("overflow-hidden transition-all duration-200 ease-in-out", isExpanded ? "max-h-[400px]" : "max-h-0"), children: jsxRuntimeExports.jsxs("div", { className: "px-3 py-2 bg-white", children: [group.options.length > 5 && (jsxRuntimeExports.jsxs("div", { className: "relative mb-2", children: [jsxRuntimeExports.jsx(lucideReact.Search, { className: "absolute left-2.5 top-1/2 transform -translate-y-1/2 w-3.5 h-3.5 text-gray-400" }), jsxRuntimeExports.jsx(Input, { type: "text", placeholder: `Search ${group.name.toLowerCase()}...`, value: searchQueries[group.id] || "", onChange: (e) => handleSearchChange(group.id, e.target.value), className: "pl-8 h-8 text-sm border-gray-200 focus:border-primary-400 focus:ring-primary-400" })] })), jsxRuntimeExports.jsx("div", { className: "space-y-1 max-h-[250px] overflow-y-auto pr-1", children: filteredOptions.length === 0 ? (jsxRuntimeExports.jsx("p", { className: "text-sm text-gray-500 py-2 text-center", children: "No options found" })) : (filteredOptions.map((option) => {
+                                            }, className: "text-xs text-primary-600 hover:text-primary-800 hover:underline", children: "Clear" }))] }), jsxRuntimeExports.jsx("div", { className: cn("overflow-hidden transition-all duration-200 ease-in-out", isExpanded ? "max-h-[500px]" : "max-h-0"), children: jsxRuntimeExports.jsxs("div", { className: "px-3 py-2 bg-white", children: [group.options.length > 5 && (jsxRuntimeExports.jsxs("div", { className: "relative mb-2", children: [jsxRuntimeExports.jsx(lucideReact.Search, { className: "absolute left-2.5 top-1/2 transform -translate-y-1/2 w-3.5 h-3.5 text-gray-400" }), jsxRuntimeExports.jsx(Input, { type: "text", placeholder: `Search ${group.name.toLowerCase()}...`, value: searchQueries[group.id] || "", onChange: (e) => handleSearchChange(group.id, e.target.value), className: "pl-8 h-8 text-sm border-gray-200 focus:border-primary-400 focus:ring-primary-400" })] })), jsxRuntimeExports.jsx("div", { className: "space-y-1 max-h-[350px] overflow-y-auto pr-1 scrollbar-thin scrollbar-thumb-gray-300 scrollbar-track-transparent", children: filteredOptions.length === 0 ? (jsxRuntimeExports.jsx("p", { className: "text-sm text-gray-500 py-2 text-center", children: "No options found" })) : (filteredOptions.map((option) => {
                                                     var _a;
                                                     const isChecked = ((_a = selectedFilters[group.id]) === null || _a === void 0 ? void 0 : _a.includes(option.id)) || false;
                                                     return (jsxRuntimeExports.jsxs("label", { className: cn("flex items-center gap-2.5 px-2 py-1.5 rounded-md cursor-pointer", "hover:bg-gray-50 transition-colors", isChecked && "bg-primary-50"), children: [jsxRuntimeExports.jsx(Checkbox, { checked: isChecked, onCheckedChange: (checked) => handleCheckboxChange(group.id, option.id, checked), className: cn("h-4 w-4 rounded border-gray-300", "data-[state=checked]:bg-primary-600 data-[state=checked]:border-primary-600") }), jsxRuntimeExports.jsx("span", { className: cn("text-sm flex-1 truncate", isChecked ? "text-primary-700 font-medium" : "text-gray-600"), title: option.label, children: option.label }), option.count !== undefined && (jsxRuntimeExports.jsxs("span", { className: "text-xs text-gray-400", children: ["(", option.count, ")"] }))] }, option.id));
                                                 })) })] }) })] }, group.id));
-                    }) }) }), jsxRuntimeExports.jsx("div", { className: "px-4 py-2 border-t border-gray-100 bg-gray-50", children: jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between", children: [Object.values(selectedFilters).some((arr) => arr.length > 0) ? (jsxRuntimeExports.jsx("button", { onClick: () => {
+                    }) }) }), jsxRuntimeExports.jsx("div", { className: "px-4 py-2 border-t border-gray-100 bg-gray-50 flex-shrink-0", children: jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between", children: [Object.values(selectedFilters).some((arr) => arr.length > 0) ? (jsxRuntimeExports.jsx("button", { onClick: () => {
                                 setSelectedFilters({});
                                 if (onFilterChange) {
                                     onFilterChange({});
                                 }
-                            }, className: "py-1.5 text-sm font-medium text-primary-600 hover:text-primary-800 hover:bg-primary-50 rounded-md transition-colors px-2", children: "Clear All Filters" })) : (jsxRuntimeExports.jsx("div", {})), jsxRuntimeExports.jsx(Button, { onClick: () => {
+                            }, className: "py-1.5 text-sm font-medium text-primary-600 hover:text-primary-800 hover:bg-primary-50 rounded-md transition-colors px-2", children: "Clear All Filters" })) : (jsxRuntimeExports.jsx("div", {})), jsxRuntimeExports.jsx(Button, { onClick: async () => {
                                 // Convert option IDs back to original label values
                                 const filtersWithLabels = {};
                                 filterGroups.forEach((group) => {
@@ -39528,8 +39580,37 @@ function FiltersContent({ filterGroups, showHeader, onFilterChange, widget, appe
                                         return (option === null || option === void 0 ? void 0 : option.label) || optionId;
                                     });
                                 });
-                                onApplyFilters === null || onApplyFilters === void 0 ? void 0 : onApplyFilters(filtersWithLabels);
-                            }, disabled: isEditing, className: `${isEditing ? 'bg-gray-400 cursor-not-allowed' : 'bg-primary-600 hover:bg-primary-700'} text-white`, title: isEditing ? 'Save the layout first to apply filters' : '', children: "Apply Filters" })] }) })] }));
+                                // Call API to update widget config with filters
+                                if (widgetBackendUrl && widgetId) {
+                                    setIsSubmitting(true);
+                                    try {
+                                        const response = await fetch(`${widgetBackendUrl}/api/widgets/${widgetId}/config`, {
+                                            method: 'PATCH',
+                                            headers: {
+                                                'Content-Type': 'application/json',
+                                            },
+                                            body: JSON.stringify({
+                                                config: Object.assign(Object.assign({}, widget.config), { filters: filtersWithLabels }),
+                                            }),
+                                        });
+                                        if (!response.ok) {
+                                            throw new Error('Failed to update widget config');
+                                        }
+                                        // Call the onApplyFilters callback after successful API call
+                                        onApplyFilters === null || onApplyFilters === void 0 ? void 0 : onApplyFilters(filtersWithLabels);
+                                    }
+                                    catch (error) {
+                                        console.error('Error updating widget config:', error);
+                                    }
+                                    finally {
+                                        setIsSubmitting(false);
+                                    }
+                                }
+                                else {
+                                    // Fallback if no backend URL - just call the callback
+                                    onApplyFilters === null || onApplyFilters === void 0 ? void 0 : onApplyFilters(filtersWithLabels);
+                                }
+                            }, disabled: isEditing || isSubmitting, className: `${isEditing || isSubmitting ? 'bg-gray-400 cursor-not-allowed' : 'bg-primary-600 hover:bg-primary-700'} text-white`, title: isEditing ? 'Save the layout first to apply filters' : '', children: isSubmitting ? (jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsx(lucideReact.Loader2, { className: "mr-2 h-4 w-4 animate-spin" }), "Applying..."] })) : ('Apply Filters') })] }) })] }));
 }
 function CopilotKitFilters({ widget, showHeader, onFilterChange, onResetReady, widgetBackendUrl, datasetId, onApplyFilters, isEditing = false, }) {
     var _a, _b, _c, _d, _e, _f, _g, _h;
@@ -41383,7 +41464,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", userId, onApplyFilters, activeFilters = {} }) {
+function WidgetDashboard({ pageId, isEditing, selectedWidget = null, onWidgetSelect, refreshKey, widgetBackendUrl, onSaveLayoutReady, openWidgetPallete = false, onCloseWidgetPallete, defaultAgentName = "adk-construction-project-agent", userId, onApplyFilters, filterResults, isApplyingFilters = false }) {
     const [widgets, setWidgets] = React.useState([]);
     const [datasetId, setDatasetId] = React.useState('');
     const [availableWidgets, setAvailableWidgets] = React.useState([]);
@@ -41398,6 +41479,31 @@ function WidgetDashboard({ pageId, isEditing, selectedWidget = null, onWidgetSel
     const [editInitialQuery, setEditInitialQuery] = React.useState("");
     const [editingWidget, setEditingWidget] = React.useState(null);
     const [widgetResetFunctions, setWidgetResetFunctions] = React.useState(new Map());
+    // Helper to get filter status for a widget
+    const getWidgetFilterStatus = React.useCallback((widgetId) => {
+        if (!filterResults)
+            return null;
+        // Only show status for agent widgets
+        const result = filterResults.results.find(r => r.widgetId === widgetId);
+        if (!result)
+            return null;
+        return result;
+    }, [filterResults]);
+    // Helper to get badge variant based on filter status
+    const getFilterStatusBadge = (status) => {
+        switch (status) {
+            case "updated":
+                return { variant: "success", label: "Filtered", icon: "✓" };
+            case "no_data":
+                return { variant: "warning", label: "No Data", icon: "⚠" };
+            case "skipped":
+                return { variant: "muted", label: "Skipped", icon: "−" };
+            case "failed":
+                return { variant: "error", label: "Failed", icon: "✕" };
+            default:
+                return { variant: "muted", label: status, icon: "?" };
+        }
+    };
     // Use external selectedWidget if provided, otherwise use internal state
     const currentSelectedWidget = selectedWidget !== undefined ? selectedWidget : internalSelectedWidget;
     const setSelectedWidget = onWidgetSelect || setInternalSelectedWidget;
@@ -41462,6 +41568,19 @@ function WidgetDashboard({ pageId, isEditing, selectedWidget = null, onWidgetSel
                 }
             });
             window.dispatchEvent(event);
+            // If filters have been applied (filter widget exists), regenerate filtered_sql_query for this widget
+            // This handles the case where a widget's query is changed after filters have been applied
+            const hasFilterWidget = widgets.some(w => w.type === 'filters');
+            if (hasFilterWidget && editingWidget.type === 'agent' && widgetBackendUrl) {
+                // Dispatch event to notify that filtered query needs regeneration for this widget
+                const regenerateEvent = new CustomEvent('regenerateFilteredQuery', {
+                    detail: {
+                        widgetId: editingWidget.id,
+                        dashboardId: pageId
+                    }
+                });
+                window.dispatchEvent(regenerateEvent);
+            }
         }
     };
     const handleResetReady = React.useCallback((widgetId, resetFn) => {
@@ -41553,6 +41672,15 @@ function WidgetDashboard({ pageId, isEditing, selectedWidget = null, onWidgetSel
         };
         loadWidgetTypes();
     }, []);
+    // Track original widget IDs from initial load
+    const originalWidgetIdsRef = React.useRef(new Set());
+    // Update original widget IDs when widgets are loaded from server
+    React.useEffect(() => {
+        if (pageData === null || pageData === void 0 ? void 0 : pageData.widgets) {
+            const ids = new Set(pageData.widgets.map((w) => w.id));
+            originalWidgetIdsRef.current = ids;
+        }
+    }, [pageData]);
     // Use ref to store the latest save function without causing re-renders
     const saveLayoutRef = React.useRef();
     // Update the ref whenever dependencies change
@@ -41560,6 +41688,13 @@ function WidgetDashboard({ pageId, isEditing, selectedWidget = null, onWidgetSel
         if (!pageData) {
             throw new Error("No page data available");
         }
+        // Identify new agent widgets (added since last load/save)
+        const currentWidgetIds = new Set(widgets.map(w => w.id));
+        const newAgentWidgetIds = widgets
+            .filter(w => w.type === 'agent' && !originalWidgetIdsRef.current.has(w.id))
+            .map(w => w.id);
+        // Check if there's a filter widget on this dashboard
+        const hasFilterWidget = widgets.some(w => w.type === 'filters');
         try {
             const response = await fetch(getApiUrl(`/api/pages/${pageId}`), {
                 method: "PUT",
@@ -41577,16 +41712,42 @@ function WidgetDashboard({ pageId, isEditing, selectedWidget = null, onWidgetSel
                 throw new Error("Failed to save layout");
             }
             const savedData = await response.json();
-            // setPageData(savedData);
-            // // Update local widgets state to clear isFirstLoad flag
-            // setWidgets(prevWidgets => prevWidgets.map(widget => ({
-            //   ...widget,
-            //   config: {
-            //     ...widget.config,
-            //     isFirstLoad: false
-            //   }
-            // })));
+            // Update original widget IDs to include newly saved widgets
+            originalWidgetIdsRef.current = currentWidgetIds;
             console.log('Layout saved successfully');
+            // If there are new agent widgets and a filter widget exists,
+            // schedule generation of filtered_sql_query for new widgets
+            // Note: This is done asynchronously after save to not block the save operation
+            // The actual generation will happen after the widget agents have run and created sql_query
+            if (newAgentWidgetIds.length > 0 && hasFilterWidget) {
+                console.log(`[WidgetDashboard] New agent widgets detected: ${newAgentWidgetIds.join(', ')}`);
+                console.log('[WidgetDashboard] Filter widget exists - filtered_sql_query will be generated when filters are applied');
+                // Optionally, we could trigger generation after a delay to allow widget agents to initialize
+                // For now, we rely on the auto-generation in /api/filters/apply when filters are applied
+                // Uncomment below to proactively generate after a delay:
+                /*
+                setTimeout(async () => {
+                  try {
+                    console.log('[WidgetDashboard] Generating filtered_sql_query for new widgets...');
+                    const generateResponse = await fetch(getApiUrl('/api/filters/generate-queries'), {
+                      method: 'POST',
+                      headers: { 'Content-Type': 'application/json' },
+                      body: JSON.stringify({
+                        dashboard_id: pageId,
+                        widget_ids: newAgentWidgetIds,
+                        regenerate: false,
+                      }),
+                    });
+                    if (generateResponse.ok) {
+                      const result = await generateResponse.json();
+                      console.log('[WidgetDashboard] Generate queries result:', result);
+                    }
+                  } catch (err) {
+                    console.warn('[WidgetDashboard] Could not generate filtered queries for new widgets:', err);
+                  }
+                }, 5000); // 5 second delay to allow widget agents to initialize
+                */
+            }
         }
         catch (err) {
             console.error("Save error:", err);
@@ -41866,10 +42027,10 @@ function WidgetDashboard({ pageId, isEditing, selectedWidget = null, onWidgetSel
                     onCloseWidgetPallete && onCloseWidgetPallete();
                 }, defaultAgentName: defaultAgentName, hasFiltersWidget: widgets.some(w => w.type === 'filters') }), jsxRuntimeExports.jsx(EditWidgetDialog, { editingWidget: editingWidget, setWidgets: setWidgets, 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 gap-2", layouts: { lg: getLayoutFromWidgets() }, breakpoints: { lg: 1200, md: 996, sm: 768, xs: 480 }, cols: { lg: 12, md: 8, sm: 6, xs: 2 }, rowHeight: 60, isDraggable: isEditing, isResizable: isEditing, draggableHandle: ".drag-icon", onLayoutChange: handleLayoutChange, compactType: "vertical", containerPadding: [0, 0], margin: [16, 16], children: widgets.map((w) => {
                         var _a, _b;
-                        const hasActiveFilters = Object.keys(activeFilters).length > 0 && Object.values(activeFilters).some(arr => arr.length > 0);
-                        const shouldShowFilterBadge = hasActiveFilters && w.type !== "filters" && w.type !== "text" && w.type !== "spacer" && w.type !== "divider" && w.type !== "header" && w.type !== "footer";
-                        return (jsxRuntimeExports.jsxs("div", { className: `${(w.type === "text" || w.type === "spacer") ? `${((_b = (_a = w === null || w === void 0 ? void 0 : w.config) === null || _a === void 0 ? void 0 : _a.content) === null || _b === void 0 ? void 0 : _b.divider) === "yes" && "border-b border-gray-300"} ${isEditing ? 'shadow-lg rounded-xl border border-primary-300' : 'flex items-center'}` : `shadow-lg rounded-xl border border-primary-300 p-4 ${isEditing ? 'pb-14' : 'pb-5'}`}`, children: [isEditing &&
-                                    jsxRuntimeExports.jsxs("div", { className: `flex items-center justify-end mb-4 relative ${(w.type === "text" || w.type === "spacer") ? "pl-4 pr-4 pt-4" : ""}`, 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" }), (w.type !== "spacer" && w.type !== "chatbot") && jsxRuntimeExports.jsx(lucideReact.Edit, { onClick: () => onClickSettings && onClickSettings(w), className: "w-5 h-5 text-gray-600" })] })] }), !isEditing && shouldShowFilterBadge && (jsxRuntimeExports.jsxs("div", { className: "absolute top-2 right-2 z-10 bg-primary-600 text-white px-2 py-1 rounded-md shadow-md flex items-center gap-1.5 text-xs font-medium", children: [jsxRuntimeExports.jsx(lucideReact.Filter, { className: "w-3 h-3" }), jsxRuntimeExports.jsx("span", { children: "Filtered" })] })), jsxRuntimeExports.jsxs("div", { className: `${((w === null || w === void 0 ? void 0 : w.type) === 'text' || (w === null || w === void 0 ? void 0 : w.type) === 'spacer') ? `${isEditing ? 'px-4' : ''}` : "h-full"} w-full relative`, children: [(w === null || w === void 0 ? void 0 : w.type) === "chatbot" &&
+                        const filterStatus = w.type === 'agent' ? getWidgetFilterStatus(w.id) : null;
+                        const badgeInfo = filterStatus ? getFilterStatusBadge(filterStatus.status) : null;
+                        return (jsxRuntimeExports.jsxs("div", { className: `${(w.type === "text" || w.type === "spacer") ? `${((_b = (_a = w === null || w === void 0 ? void 0 : w.config) === null || _a === void 0 ? void 0 : _a.content) === null || _b === void 0 ? void 0 : _b.divider) === "yes" && "border-b border-gray-300"} ${isEditing ? 'shadow-lg rounded-xl border border-primary-300' : 'flex items-center'}` : `shadow-lg rounded-xl border border-primary-300 p-4 ${isEditing ? 'pb-14' : 'pb-5'}`} relative`, children: [w.type === 'agent' && badgeInfo && !isApplyingFilters && (jsxRuntimeExports.jsx("div", { className: "absolute top-2 right-2 z-10", title: (filterStatus === null || filterStatus === void 0 ? void 0 : filterStatus.reason) || (filterStatus === null || filterStatus === void 0 ? void 0 : filterStatus.error) || '', children: jsxRuntimeExports.jsxs(Badge, { variant: badgeInfo.variant, className: "text-[10px] px-2 py-0.5 gap-1", children: [jsxRuntimeExports.jsx("span", { children: badgeInfo.icon }), jsxRuntimeExports.jsx("span", { children: badgeInfo.label })] }) })), w.type === 'agent' && isApplyingFilters && (jsxRuntimeExports.jsx("div", { className: "absolute top-2 right-2 z-10", children: jsxRuntimeExports.jsxs(Badge, { variant: "secondary", className: "text-[10px] px-2 py-0.5 gap-1 animate-pulse", children: [jsxRuntimeExports.jsx(lucideReact.Loader2, { className: "w-3 h-3 animate-spin" }), jsxRuntimeExports.jsx("span", { children: "Filtering..." })] }) })), isEditing &&
+                                    jsxRuntimeExports.jsxs("div", { className: `flex items-center justify-end mb-4 relative ${(w.type === "text" || w.type === "spacer") ? "pl-4 pr-4 pt-4" : ""}`, 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" }), (w.type !== "spacer" && w.type !== "chatbot") && jsxRuntimeExports.jsx(lucideReact.Edit, { onClick: () => onClickSettings && onClickSettings(w), className: "w-5 h-5 text-gray-600" })] })] }), jsxRuntimeExports.jsxs("div", { className: `${((w === null || w === void 0 ? void 0 : w.type) === 'text' || (w === null || w === void 0 ? void 0 : w.type) === 'spacer') ? `${isEditing ? 'px-4' : ''}` : "h-full"} w-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 === null || w === void 0 ? void 0 : w.id), onMouseOver: () => setVisibleClearButton(w === null || w === void 0 ? void 0 : w.id), onMouseLeave: () => setVisibleClearButton(""), className: "absolute top-[12px] right-0 z-40 flex align-middle justify-center gap-2 text-sm px-4 py-2 border-primary-300 rounded-l-sm w-fit bg-primary-700 text-white cursor-pointer shadow-md transition-all", children: jsxRuntimeExports.jsx(lucideReact.MessageCircleX, { className: "w-5 h-5" }) }), jsxRuntimeExports.jsx("span", { className: `absolute top-[56px] right-[16px] z-50 w-max py-1 text-xs px-2 rounded-sm text-white bg-gray-950 ${visibleClearButton === (w === null || w === void 0 ? void 0 : w.id) ? "block" : "hidden"}`, children: "Clear Chat" })] }), jsxRuntimeExports.jsx(WidgetRenderer, { widget: w, widgetBackendUrl: widgetBackendUrl, onResetReady: handleResetReady, widgetIds: widgets.filter(widget => widget.type !== 'chatbot').map(widget => widget.id), datasetId: datasetId, pageId: pageId, onApplyFilters: onApplyFilters, isEditing: isEditing })] })] }, w.id));
                     }) })) })] }));
 }
@@ -44767,7 +44928,6 @@ function DashboardPages({ widgetBackendUrl }) {
     const [pages, setPages] = React.useState([]);
     const [isLoading, setIsLoading] = React.useState(true);
     const [error, setError] = React.useState(null);
-    const [activeFilters, setActiveFilters] = React.useState({});
     // Helper function to get API URL
     const getApiUrl = (endpoint) => {
         const baseUrl = widgetBackendUrl || '';
@@ -44776,10 +44936,6 @@ function DashboardPages({ widgetBackendUrl }) {
     React.useEffect(() => {
         loadPages();
     }, []);
-    const handleApplyFilters = (pageId) => (filters) => {
-        console.log('Filters applied for page:', pageId, filters);
-        setActiveFilters(prev => (Object.assign(Object.assign({}, prev), { [pageId]: filters })));
-    };
     const loadPages = async () => {
         try {
             setIsLoading(true);
@@ -44824,7 +44980,7 @@ function DashboardPages({ widgetBackendUrl }) {
     }
     return (jsxRuntimeExports.jsxs("div", { className: "container mx-auto p-6 h-screen flex flex-col", children: [jsxRuntimeExports.jsxs("div", { className: "mb-6", children: [jsxRuntimeExports.jsx("h1", { className: "text-2xl font-bold", children: "Dashboard Pages" }), jsxRuntimeExports.jsx("p", { className: "text-muted-foreground", children: "View all your saved pages in dashboard mode" })] }), jsxRuntimeExports.jsx("div", { className: "flex-1 overflow-hidden", children: jsxRuntimeExports.jsxs(Tabs, { defaultValue: (_a = pages[0]) === null || _a === void 0 ? void 0 : _a.id, className: "h-full flex flex-col", children: [jsxRuntimeExports.jsx(TabsList, { className: "grid w-full grid-cols-auto gap-1 mb-4", style: {
                                 gridTemplateColumns: `repeat(${pages.length}, minmax(120px, 1fr))`
-                            }, children: pages.map((page) => (jsxRuntimeExports.jsx(TabsTrigger, { value: page.id, className: "truncate px-3 py-2 data-[state=active]:bg-primary data-[state=active]:text-primary-foreground data-[state=active]:shadow-lg border-2 data-[state=active]:border-primary data-[state=inactive]:border-transparent hover:bg-accent hover:text-accent-foreground transition-all duration-200", title: page.title, children: page.title }, page.id))) }), pages.map((page) => (jsxRuntimeExports.jsx(TabsContent, { value: page.id, className: "flex-1 overflow-hidden m-0", children: jsxRuntimeExports.jsx("div", { className: "h-full border rounded-lg overflow-hidden", children: jsxRuntimeExports.jsx(WidgetDashboard, { pageId: page.id, isEditing: false, widgetBackendUrl: widgetBackendUrl, onApplyFilters: handleApplyFilters(page.id), activeFilters: activeFilters[page.id] || {} }) }) }, page.id)))] }) })] }));
+                            }, children: pages.map((page) => (jsxRuntimeExports.jsx(TabsTrigger, { value: page.id, className: "truncate px-3 py-2 data-[state=active]:bg-primary data-[state=active]:text-primary-foreground data-[state=active]:shadow-lg border-2 data-[state=active]:border-primary data-[state=inactive]:border-transparent hover:bg-accent hover:text-accent-foreground transition-all duration-200", title: page.title, children: page.title }, page.id))) }), pages.map((page) => (jsxRuntimeExports.jsx(TabsContent, { value: page.id, className: "flex-1 overflow-hidden m-0", children: jsxRuntimeExports.jsx("div", { className: "h-full border rounded-lg overflow-hidden", children: jsxRuntimeExports.jsx(WidgetDashboard, { pageId: page.id, isEditing: false, widgetBackendUrl: widgetBackendUrl }) }) }, page.id)))] }) })] }));
 }
 
 exports.Button = Button;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dp-widgets-framework",
-  "version": "1.5.8",
+  "version": "1.6.0",
   "private": false,
   "publishConfig": {
     "registry": "https://registry.npmjs.org"