dp-widgets-framework 1.5.0 → 1.5.2

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, 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, X, AlignVerticalSpaceAround, LineChart as LineChart$1, PieChart as PieChart$1, Table, FileText, SlidersHorizontal, 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';
@@ -17649,8 +17649,6 @@ function LineChart({ title, data, options, className, units, content }) {
 function DataGrid({ title, data, className }) {
     var _a;
     const { columns, rows, units, grouped = false, grouping } = data;
-    console.log('title==>', title);
-    console.log('grouping==>', grouping);
     const [expandedGroups, setExpandedGroups] = useState(new Set(((_a = grouping === null || grouping === void 0 ? void 0 : grouping.sections) === null || _a === void 0 ? void 0 : _a.filter(s => s.expanded).map(s => s.group_value)) || []));
     const toggleGroup = (groupValue) => {
         const newExpanded = new Set(expandedGroups);
@@ -38412,7 +38410,7 @@ function SummaryWidget({ title, data, metadata, className }) {
 const CHART_REFRESH_TIMEOUT$4 = 3000;
 const DEFAULT_COLORS$3 = ["#E4DCB8", "#DAC46C", "#808080", "#582809", "#A3ADD0", "#398E6F", "#AF123D", "#8C99C4", "#5290AC", "#601B07", "#50649D", "#B4A8A0", "#6F2587"];
 const LINE_COLORS = ["#243D84", "#69238B", "#4A959F", "#D0A677", "#B31E47", "#396431"];
-const clearChat$4 = async (widgetBackendUrl, widgetId) => {
+const clearChat$5 = async (widgetBackendUrl, widgetId) => {
     if (!widgetBackendUrl || !widgetId)
         return;
     console.log('clearChat called for widgetId:', widgetId);
@@ -38434,7 +38432,7 @@ const clearChat$4 = async (widgetBackendUrl, widgetId) => {
         console.error('Failed to clear chat:', error);
     }
 };
-const createLoadingComponent$4 = (message = "Loading chart data...") => (jsxRuntimeExports.jsx("div", { className: "flex items-center justify-center h-full", children: jsxRuntimeExports.jsxs("div", { className: "flex flex-col items-center gap-2", children: [jsxRuntimeExports.jsx(RefreshCw, { className: "h-6 w-6 animate-spin text-gray-800" }), jsxRuntimeExports.jsx("p", { className: "text-sm text-gray-500", children: message })] }) }));
+const createLoadingComponent$5 = (message = "Loading chart data...") => (jsxRuntimeExports.jsx("div", { className: "flex items-center justify-center h-full", children: jsxRuntimeExports.jsxs("div", { className: "flex flex-col items-center gap-2", children: [jsxRuntimeExports.jsx(RefreshCw, { className: "h-6 w-6 animate-spin text-gray-800" }), jsxRuntimeExports.jsx("p", { className: "text-sm text-gray-500", children: message })] }) }));
 const createInitialChartState$4 = (agentType, widgetIds, datasetId) => {
     const baseState = { dataset_id: datasetId || "home_generation_dataset" };
     switch (agentType) {
@@ -38492,7 +38490,7 @@ const createInitialChartState$4 = (agentType, widgetIds, datasetId) => {
             return Object.assign({ widget_ids: widgetIds }, baseState);
     }
 };
-const loadAgentState$4 = async (widgetBackendUrl, threadId, agentName) => {
+const loadAgentState$5 = async (widgetBackendUrl, threadId, agentName) => {
     try {
         const response = await fetch(`${widgetBackendUrl}/api/copilot/${agentName}`, {
             method: 'POST',
@@ -38598,7 +38596,7 @@ function BarChartComponent({ orientation, barChartState, styles, appendMessage,
     const isEmpty = labels.length === 0 || values.length === 0;
     const handleRefresh = async () => {
         if (query && widgetBackendUrl && widgetId) {
-            await clearChat$4(widgetBackendUrl, widgetId);
+            await clearChat$5(widgetBackendUrl, widgetId);
             appendMessage(new TextMessage({
                 content: `${query} and render data on a bar chart`,
                 role: Role.User,
@@ -38625,7 +38623,7 @@ function BarChartComponent({ orientation, barChartState, styles, appendMessage,
         return shuffleColors(DEFAULT_COLORS$3, labels === null || labels === void 0 ? void 0 : labels.length);
     }, [labels.length]);
     if (isEmpty) {
-        return createLoadingComponent$4();
+        return createLoadingComponent$5();
     }
     const transformedData = {
         labels: labels,
@@ -38651,7 +38649,7 @@ function SeriesBarChartComponent$2({ orientation, seriesBarChartState, styles, a
     const isEmpty = labels.length === 0 || series.length === 0;
     const handleRefresh = async () => {
         if (query) {
-            await clearChat$4(widgetBackendUrl, widgetId);
+            await clearChat$5(widgetBackendUrl, widgetId);
             // Send trigger event to clear chart state
             console.log('Dispatching clearChartState event for widgetId:', widgetId);
             window.dispatchEvent(new CustomEvent('clearChartState', { detail: { widgetId } }));
@@ -38680,7 +38678,7 @@ function SeriesBarChartComponent$2({ orientation, seriesBarChartState, styles, a
         return shuffleColors(DEFAULT_COLORS$3, series === null || series === void 0 ? void 0 : series.length);
     }, [series.length]);
     if (isEmpty) {
-        return createLoadingComponent$4();
+        return createLoadingComponent$5();
     }
     const transformedData = {
         labels: labels,
@@ -38704,7 +38702,7 @@ function SeriesLineChartComponent({ orientation, seriesLineChartState, styles, a
     const isEmpty = labels.length === 0 || series.length === 0;
     const handleRefresh = async () => {
         if (query) {
-            await clearChat$4(widgetBackendUrl, widgetId);
+            await clearChat$5(widgetBackendUrl, widgetId);
             // Send trigger event to clear chart state
             console.log('Dispatching clearChartState event for widgetId:', widgetId);
             window.dispatchEvent(new CustomEvent('clearChartState', { detail: { widgetId } }));
@@ -38733,7 +38731,7 @@ function SeriesLineChartComponent({ orientation, seriesLineChartState, styles, a
         return shuffleColors([...LINE_COLORS, ...DEFAULT_COLORS$3], series === null || series === void 0 ? void 0 : series.length);
     }, [series.length]);
     if (isEmpty) {
-        return createLoadingComponent$4();
+        return createLoadingComponent$5();
     }
     const transformedData = {
         labels: labels,
@@ -38763,7 +38761,7 @@ function PieChartComponent$1({ pieChartState, styles, appendMessage, query, isFi
     const isEmpty = labels.length === 0 || values.length === 0;
     const handleRefresh = async () => {
         if (query) {
-            await clearChat$4(widgetBackendUrl, widgetId);
+            await clearChat$5(widgetBackendUrl, widgetId);
             // Send trigger event to clear chart state
             console.log('Dispatching clearChartState event for widgetId:', widgetId);
             window.dispatchEvent(new CustomEvent('clearChartState', { detail: { widgetId } }));
@@ -38792,7 +38790,7 @@ function PieChartComponent$1({ pieChartState, styles, appendMessage, query, isFi
         return shuffleColors(DEFAULT_COLORS$3, labels.length);
     }, [labels.length]);
     if (isEmpty) {
-        return createLoadingComponent$4();
+        return createLoadingComponent$5();
     }
     const colors = ((_y = (_x = pieChartState === null || pieChartState === void 0 ? void 0 : pieChartState.pie_chart_data) === null || _x === void 0 ? void 0 : _x.data) === null || _y === void 0 ? void 0 : _y.colors) || ((_1 = (_0 = (_z = pieChartState === null || pieChartState === void 0 ? void 0 : pieChartState.state) === null || _z === void 0 ? void 0 : _z.pie_chart_data) === null || _0 === void 0 ? void 0 : _0.data) === null || _1 === void 0 ? void 0 : _1.colors) || labels.map((_, index) => backgroundColors[index % backgroundColors.length]);
     const transformedData = {
@@ -38819,7 +38817,7 @@ function LineChartComponent({ lineChartState, styles, appendMessage, query, isFi
     const isEmpty = labels.length === 0 || values.length === 0;
     const handleRefresh = async () => {
         if (query && widgetBackendUrl && widgetId) {
-            await clearChat$4(widgetBackendUrl, widgetId);
+            await clearChat$5(widgetBackendUrl, widgetId);
             appendMessage(new TextMessage({
                 content: `${query} and render data on a bar chart`,
                 role: Role.User,
@@ -38845,7 +38843,7 @@ function LineChartComponent({ lineChartState, styles, appendMessage, query, isFi
         return LINE_COLORS[Math.floor(Math.random() * LINE_COLORS.length)];
     }, [labels.length]);
     if (isEmpty) {
-        return createLoadingComponent$4();
+        return createLoadingComponent$5();
     }
     const transformedData = {
         labels: labels,
@@ -38875,7 +38873,7 @@ function DataGridComponent$1({ dataGridState, styles, appendMessage, query, isFi
     const isEmpty = columns.length === 0 || rows.length === 0;
     const handleRefresh = async () => {
         if (query) {
-            await clearChat$4(widgetBackendUrl, widgetId);
+            await clearChat$5(widgetBackendUrl, widgetId);
             // Send trigger event to clear chart state
             console.log('Dispatching clearChartState event for widgetId:', widgetId);
             window.dispatchEvent(new CustomEvent('clearChartState', { detail: { widgetId } }));
@@ -38901,7 +38899,7 @@ function DataGridComponent$1({ dataGridState, styles, appendMessage, query, isFi
         }
     }, [isEmpty, startLoadingTimeout, clearLoadingTimeout]);
     if (isEmpty) {
-        return createLoadingComponent$4("Loading table data...");
+        return createLoadingComponent$5("Loading table data...");
     }
     const transformedData = {
         columns: columns,
@@ -38922,7 +38920,7 @@ function SummaryComponent({ summaryState, styles, appendMessage, query, isFirstL
     const isEmpty = !content || content.trim() === "";
     const handleRefresh = async () => {
         if (query) {
-            await clearChat$4(widgetBackendUrl, widgetId);
+            await clearChat$5(widgetBackendUrl, widgetId);
             // Send trigger event to clear chart state
             console.log('Dispatching clearChartState event for widgetId:', widgetId);
             window.dispatchEvent(new CustomEvent('clearChartState', { detail: { widgetId } }));
@@ -38951,7 +38949,7 @@ function SummaryComponent({ summaryState, styles, appendMessage, query, isFirstL
         }
     }, [isEmpty, startLoadingTimeout, clearLoadingTimeout]);
     if (isEmpty) {
-        return createLoadingComponent$4("Loading summary...");
+        return createLoadingComponent$5("Loading summary...");
     }
     return (jsxRuntimeExports.jsx(SummaryWidget, { title: title, data: data, metadata: metadata, className: "" }));
 }
@@ -38990,7 +38988,7 @@ function CopilotKitAgent({ widget, showHeader, styles, onResetReady, widgetIds,
         // Increment the API call counter
         setApiCallCount(prev => prev + 1);
         const agentName = ((_a = widget.config) === null || _a === void 0 ? void 0 : _a.agentName) || "adk-construction-project-agent";
-        const apiResponse = await loadAgentState$4(widgetBackendUrl, widget.id, agentName);
+        const apiResponse = await loadAgentState$5(widgetBackendUrl, widget.id, agentName);
         if (apiResponse && !(chartState === null || chartState === void 0 ? void 0 : chartState.agent_message)) {
             parseAndUpdateChartState$4(apiResponse, setChartState);
         }
@@ -39248,6 +39246,339 @@ function ChatbotWidget({ widget, showHeader = true, widgetBackendUrl, onResetRea
     return (jsxRuntimeExports.jsx(CopilotKit, { runtimeUrl: getRuntimeUrl(), showDevConsole: false, agent: ((_b = widget.config) === null || _b === void 0 ? void 0 : _b.agentName) || "widget_assistant", children: jsxRuntimeExports.jsx(CopilotKitChatbot, { widget: widget, showHeader: showHeader, styles: styles, onResetReady: onResetReady, widgetIds: widgetIds, datasetId: datasetId }) }));
 }
 
+const Checkbox = React.forwardRef((_a, ref) => {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return (jsxRuntimeExports.jsx(CheckboxPrimitive.Root, Object.assign({ ref: ref, className: cn("peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground", className) }, props, { children: jsxRuntimeExports.jsx(CheckboxPrimitive.Indicator, { className: cn("flex items-center justify-center text-current"), children: jsxRuntimeExports.jsx(Check, { className: "h-4 w-4" }) }) })));
+});
+Checkbox.displayName = CheckboxPrimitive.Root.displayName;
+
+const FILTER_REFRESH_TIMEOUT = 3000;
+const clearChat$4 = async (widgetBackendUrl, widgetId) => {
+    if (!widgetBackendUrl || !widgetId)
+        return;
+    console.log('clearChat called for widgetId:', widgetId);
+    try {
+        await fetch(`${widgetBackendUrl}/api/clear-chat`, {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+            },
+            body: JSON.stringify({
+                session_id: widgetId,
+                delete_state: true
+            }),
+        });
+        console.log('Dispatching clearFilterState event from clearChat for widgetId:', widgetId);
+        window.dispatchEvent(new CustomEvent('clearFilterState', { detail: { widgetId } }));
+    }
+    catch (error) {
+        console.error('Failed to clear chat:', error);
+    }
+};
+const createLoadingComponent$4 = (message = "Loading filter data...") => (jsxRuntimeExports.jsx("div", { className: "flex items-center justify-center h-full", children: jsxRuntimeExports.jsxs("div", { className: "flex flex-col items-center gap-2", children: [jsxRuntimeExports.jsx(RefreshCw, { className: "h-6 w-6 animate-spin text-gray-800" }), jsxRuntimeExports.jsx("p", { className: "text-sm text-gray-500", children: message })] }) }));
+const createInitialFilterState = (datasetId, filterData) => {
+    return {
+        column_values: filterData || [],
+        dataset_id: datasetId || ""
+    };
+};
+const loadAgentState$4 = async (widgetBackendUrl, threadId, agentName) => {
+    try {
+        const response = await fetch(`${widgetBackendUrl}/api/copilot/${agentName}`, {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+            },
+            body: JSON.stringify({
+                "operationName": "loadAgentState",
+                "query": "query loadAgentState($data: LoadAgentStateInput!) {\n  loadAgentState(data: $data) {\n    threadId\n    threadExists\n    state\n    messages\n    __typename\n  }\n}",
+                "variables": {
+                    "data": {
+                        "agentName": agentName,
+                        "threadId": threadId
+                    }
+                }
+            }),
+        });
+        if (!response.ok) {
+            throw new Error(`HTTP error! status: ${response.status}`);
+        }
+        const result = await response.json();
+        return result;
+    }
+    catch (error) {
+        console.error('Failed to load agent state:', error);
+        return null;
+    }
+};
+const parseAndUpdateFilterState = (apiResponse, setFilterState) => {
+    var _a, _b;
+    try {
+        if ((_b = (_a = apiResponse === null || apiResponse === void 0 ? void 0 : apiResponse.data) === null || _a === void 0 ? void 0 : _a.loadAgentState) === null || _b === void 0 ? void 0 : _b.state) {
+            const stateString = apiResponse.data.loadAgentState.state;
+            const parsedState = JSON.parse(stateString);
+            if (parsedState.state) {
+                const filterData = parsedState.state;
+                setFilterState((prevState) => {
+                    const newFilterState = Object.assign({}, prevState);
+                    if (filterData.column_values) {
+                        newFilterState.column_values = filterData.column_values;
+                    }
+                    if (filterData.agent_message) {
+                        newFilterState.agent_message = filterData.agent_message;
+                    }
+                    return newFilterState;
+                });
+            }
+        }
+    }
+    catch (error) {
+        console.error('Failed to parse and update filter state:', error);
+    }
+};
+// Helper function to convert FilterState to FilterGroup array
+const convertFilterStateToGroups = (filterState) => {
+    if (!filterState.column_values || filterState.column_values.length === 0) {
+        return [];
+    }
+    return filterState.column_values.map((filter) => ({
+        id: `${filter.table_name}_${filter.column}`,
+        name: filter.column.replace(/_/g, ' ').replace(/\b\w/g, (l) => l.toUpperCase()),
+        options: filter.values.map((value) => ({
+            id: value.toLowerCase().replace(/\s+/g, '-'),
+            label: value,
+        })),
+    }));
+};
+function FiltersContent({ filterGroups, showHeader, onFilterChange, widget, appendMessage, query, isFirstLoad, widgetBackendUrl, widgetId, startLoadingTimeout, clearLoadingTimeout, filterState, onApplyFilters, }) {
+    const hasCalledRef = useRef(false);
+    const [expandedGroups, setExpandedGroups] = useState({});
+    const [selectedFilters, setSelectedFilters] = useState({});
+    const [searchQueries, setSearchQueries] = useState({});
+    const isEmpty = filterGroups.length === 0;
+    const handleRefresh = async () => {
+        if (query) {
+            await clearChat$4(widgetBackendUrl, widgetId);
+            console.log('Dispatching clearFilterState event for widgetId:', widgetId);
+            window.dispatchEvent(new CustomEvent('clearFilterState', { detail: { widgetId } }));
+            appendMessage(new TextMessage({
+                content: `${query}`,
+                role: Role.User,
+            }));
+        }
+    };
+    useEffect(() => {
+        if (isEmpty && query && isFirstLoad && !(filterState === null || filterState === void 0 ? void 0 : filterState.agent_message) && !hasCalledRef.current) {
+            hasCalledRef.current = true;
+            handleRefresh();
+        }
+    }, [isEmpty, query, isFirstLoad, filterState]);
+    useEffect(() => {
+        console.log('FiltersContent useEffect - isEmpty:', isEmpty, 'hasMessage:', !!(filterState === null || filterState === void 0 ? void 0 : filterState.agent_message), 'isFirstLoad:', isFirstLoad);
+        if (isEmpty && startLoadingTimeout && !(filterState === null || filterState === void 0 ? void 0 : filterState.agent_message)) {
+            console.log('Starting loading timeout from FiltersContent useEffect');
+            startLoadingTimeout();
+        }
+        else if (!isEmpty && clearLoadingTimeout) {
+            clearLoadingTimeout();
+        }
+    }, [isEmpty, startLoadingTimeout, clearLoadingTimeout, filterState]);
+    // Initialize expanded state for all groups
+    useEffect(() => {
+        const initialExpanded = {};
+        filterGroups.forEach((group) => {
+            var _a;
+            initialExpanded[group.id] = ((_a = widget.config) === null || _a === void 0 ? void 0 : _a.defaultExpanded) !== false;
+        });
+        setExpandedGroups(initialExpanded);
+    }, [filterGroups]);
+    const toggleGroup = (groupId) => {
+        setExpandedGroups((prev) => (Object.assign(Object.assign({}, prev), { [groupId]: !prev[groupId] })));
+    };
+    const handleCheckboxChange = (groupId, optionId, checked) => {
+        setSelectedFilters((prev) => {
+            const groupFilters = prev[groupId] || [];
+            let newGroupFilters;
+            if (checked) {
+                newGroupFilters = [...groupFilters, optionId];
+            }
+            else {
+                newGroupFilters = groupFilters.filter((id) => id !== optionId);
+            }
+            const newFilters = Object.assign(Object.assign({}, prev), { [groupId]: newGroupFilters });
+            if (onFilterChange) {
+                onFilterChange(newFilters);
+            }
+            return newFilters;
+        });
+    };
+    const handleSearchChange = (groupId, query) => {
+        setSearchQueries((prev) => (Object.assign(Object.assign({}, prev), { [groupId]: query })));
+    };
+    const getFilteredOptions = (group) => {
+        var _a;
+        const query = ((_a = searchQueries[group.id]) === null || _a === void 0 ? void 0 : _a.toLowerCase()) || "";
+        if (!query)
+            return group.options;
+        return group.options.filter((option) => option.label.toLowerCase().includes(query));
+    };
+    const getSelectedCount = (groupId) => {
+        var _a;
+        return ((_a = selectedFilters[groupId]) === null || _a === void 0 ? void 0 : _a.length) || 0;
+    };
+    const clearGroupFilters = (groupId) => {
+        setSelectedFilters((prev) => {
+            const newFilters = Object.assign(Object.assign({}, prev), { [groupId]: [] });
+            if (onFilterChange) {
+                onFilterChange(newFilters);
+            }
+            return newFilters;
+        });
+    };
+    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) => {
+                        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) => {
+                                                    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: () => {
+                                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: () => { onApplyFilters === null || onApplyFilters === void 0 ? void 0 : onApplyFilters(selectedFilters); }, className: "bg-primary-600 hover:bg-primary-700 text-white", children: "Apply Filters" })] }) })] }));
+}
+function CopilotKitFilters({ widget, showHeader, onFilterChange, onResetReady, widgetBackendUrl, datasetId, onApplyFilters, }) {
+    var _a, _b, _c, _d, _e, _f;
+    const isFirstLoad = (_a = widget.config) === null || _a === void 0 ? void 0 : _a.isFirstLoad;
+    const widget_data = (_b = widget.widget_data) === null || _b === void 0 ? void 0 : _b.column_values;
+    const { setThreadId } = useCopilotContext();
+    const timeoutRef = useRef(null);
+    const [apiCallCount, setApiCallCount] = useState(0);
+    const [hasTimeoutError, setHasTimeoutError] = useState(false);
+    useEffect(() => {
+        setThreadId(widget.id);
+    }, [widget.id, setThreadId]);
+    const { state: agentState, setState: setAgentState } = useCoAgent({
+        name: (_c = widget.config) === null || _c === void 0 ? void 0 : _c.agentName,
+        initialState: createInitialFilterState(datasetId, widget_data),
+    });
+    const [filterState, setFilterState] = useState(createInitialFilterState(datasetId, widget_data));
+    const handleLoadingTimeout = useCallback(async () => {
+        var _a;
+        if (!widgetBackendUrl || !widget.id || (filterState === null || filterState === void 0 ? void 0 : filterState.agent_message) || hasTimeoutError) {
+            console.log('Skipping API call - conditions not met');
+            return;
+        }
+        console.log('Loading timeout triggered for widget:', widget.id, 'API call count:', apiCallCount);
+        if (apiCallCount >= 30) {
+            console.log('API call limit reached for widget:', widget.id);
+            setHasTimeoutError(true);
+            setFilterState(prevState => (Object.assign(Object.assign({}, prevState), { agent_message: "Timeout: Unable to load filter data after multiple attempts. Please try refreshing the widget." })));
+            return;
+        }
+        setApiCallCount(prev => prev + 1);
+        const agentName = ((_a = widget.config) === null || _a === void 0 ? void 0 : _a.agentName) || "adk-construction-project-agent";
+        console.log('Calling loadAgentState API for widget:', widget.id);
+        const apiResponse = await loadAgentState$4(widgetBackendUrl, widget.id, agentName);
+        console.log('API response received:', apiResponse);
+        if (apiResponse && !(filterState === null || filterState === void 0 ? void 0 : filterState.agent_message)) {
+            parseAndUpdateFilterState(apiResponse, setFilterState);
+        }
+    }, [widgetBackendUrl, widget.id, setFilterState, (_d = widget.config) === null || _d === void 0 ? void 0 : _d.agentName, filterState, apiCallCount, hasTimeoutError]);
+    const startLoadingTimeout = useCallback(() => {
+        if (timeoutRef.current) {
+            clearTimeout(timeoutRef.current);
+        }
+        console.log('Scheduling next API call in 3 seconds');
+        timeoutRef.current = setTimeout(() => {
+            handleLoadingTimeout();
+        }, FILTER_REFRESH_TIMEOUT);
+    }, [handleLoadingTimeout]);
+    const clearLoadingTimeout = useCallback(() => {
+        if (timeoutRef.current) {
+            clearTimeout(timeoutRef.current);
+            timeoutRef.current = null;
+        }
+    }, []);
+    useEffect(() => {
+        return () => {
+            if (timeoutRef.current) {
+                clearTimeout(timeoutRef.current);
+            }
+        };
+    }, []);
+    const { appendMessage, reset } = useCopilotChat();
+    useEffect(() => {
+        if (onResetReady && reset && widget.id) {
+            const wrappedReset = () => {
+                reset();
+                window.dispatchEvent(new CustomEvent('clearFilterState', { detail: { widgetId: widget.id } }));
+            };
+            onResetReady(widget.id, wrappedReset);
+        }
+    }, [reset, widget.id, onResetReady]);
+    useEffect(() => {
+        const handleTriggerAgent = (event) => {
+            const { widgetId, query, datasetId } = event.detail;
+            reset();
+            if (widgetId === widget.id) {
+                let messageContent = `${query}`;
+                console.log('triggering to datasetId==>', datasetId);
+                setFilterState(createInitialFilterState(datasetId));
+                setAgentState(createInitialFilterState(datasetId));
+                setApiCallCount(0);
+                setHasTimeoutError(false);
+                appendMessage(new TextMessage({
+                    content: messageContent,
+                    role: Role.User,
+                }));
+                // Start polling for filter data
+                startLoadingTimeout();
+            }
+        };
+        const handleClearFilterState = (event) => {
+            const { widgetId } = event.detail;
+            if (widgetId === widget.id) {
+                setFilterState(createInitialFilterState(datasetId));
+                setAgentState(createInitialFilterState(datasetId));
+                setApiCallCount(0);
+                setHasTimeoutError(false);
+            }
+        };
+        window.addEventListener('triggerAgent', handleTriggerAgent);
+        window.addEventListener('clearFilterState', handleClearFilterState);
+        return () => {
+            window.removeEventListener('triggerAgent', handleTriggerAgent);
+            window.removeEventListener('clearFilterState', handleClearFilterState);
+        };
+    }, [widget.id, appendMessage, setFilterState, startLoadingTimeout]);
+    // Convert filter state to filter groups
+    const filterGroups = convertFilterStateToGroups(filterState);
+    return (jsxRuntimeExports.jsx("div", { className: cn("flex flex-col h-full"), children: (filterState === null || filterState === void 0 ? void 0 : filterState.agent_message) &&
+            (!((_e = filterState.column_values) === null || _e === void 0 ? void 0 : _e.length))
+            ? (jsxRuntimeExports.jsx("div", { className: "flex items-center justify-center h-full p-4", children: jsxRuntimeExports.jsx("div", { className: "text-center max-w-md", children: jsxRuntimeExports.jsx("p", { className: "text-sm text-gray-700", children: filterState.agent_message }) }) })) : (jsxRuntimeExports.jsx(FiltersContent, { filterGroups: filterGroups, showHeader: showHeader, onFilterChange: onFilterChange, widget: widget, 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, filterState: filterState, onApplyFilters: onApplyFilters })) }));
+}
+function FiltersWidget({ widget, showHeader = true, onConfigUpdate, onFilterChange, widgetBackendUrl, onResetReady, datasetId, onApplyFilters, }) {
+    var _a;
+    const getRuntimeUrl = () => {
+        var _a;
+        const baseUrl = widgetBackendUrl || '';
+        const agentName = ((_a = widget.config) === null || _a === void 0 ? void 0 : _a.agentName) || 'default-agent';
+        return `${baseUrl}/api/copilot/${agentName}`;
+    };
+    return (jsxRuntimeExports.jsx(CopilotKit, { runtimeUrl: getRuntimeUrl(), showDevConsole: false, agent: ((_a = widget.config) === null || _a === void 0 ? void 0 : _a.agentName) || "widget_assistant", children: jsxRuntimeExports.jsx(CopilotKitFilters, { widget: widget, showHeader: showHeader, onFilterChange: onFilterChange, onResetReady: onResetReady, widgetBackendUrl: widgetBackendUrl, datasetId: datasetId, onApplyFilters: onApplyFilters }) }));
+}
+
 const CHART_REFRESH_TIMEOUT$3 = 3000;
 const DEFAULT_COLORS$2 = ["#E4DCB8", "#DAC46C", "#808080", "#582809", "#A3ADD0", "#398E6F", "#AF123D", "#8C99C4", "#5290AC", "#601B07", "#50649D", "#B4A8A0", "#6F2587"];
 const clearChat$3 = async (widgetBackendUrl, widgetId) => {
@@ -40456,7 +40787,7 @@ function DatagridWidget({ widget, showHeader = true, widgetBackendUrl, onResetRe
     return (jsxRuntimeExports.jsx(CopilotKit, { runtimeUrl: getRuntimeUrl(), showDevConsole: false, agent: ((_b = widget.config) === null || _b === void 0 ? void 0 : _b.agentName) || "widget_assistant", children: jsxRuntimeExports.jsx(CopilotKitDataGrid, { widget: widget, showHeader: showHeader, styles: styles, onResetReady: onResetReady, widgetBackendUrl: widgetBackendUrl, datasetId: datasetId }) }));
 }
 
-function WidgetRenderer({ widget, isTemplate = false, onConfigUpdate, widgetBackendUrl, onResetReady, widgetIds, datasetId, }) {
+function WidgetRenderer({ widget, isTemplate = false, onConfigUpdate, widgetBackendUrl, onResetReady, widgetIds, datasetId, onApplyFilters, }) {
     const handleConfigUpdate = (config) => {
         if (onConfigUpdate) {
             onConfigUpdate(widget.id, config);
@@ -40481,6 +40812,8 @@ function WidgetRenderer({ widget, isTemplate = false, onConfigUpdate, widgetBack
                 return (jsxRuntimeExports.jsx(FacetWidget, { widget: widget, showHeader: false, onConfigUpdate: handleConfigUpdate }));
             case "chatbot":
                 return jsxRuntimeExports.jsx(ChatbotWidget, { widget: widget, showHeader: false, widgetBackendUrl: widgetBackendUrl, onResetReady: onResetReady, widgetIds: widgetIds, datasetId: datasetId });
+            case "filters":
+                return (jsxRuntimeExports.jsx(FiltersWidget, { widget: widget, showHeader: false, widgetBackendUrl: widgetBackendUrl, onResetReady: onResetReady, datasetId: datasetId, onConfigUpdate: handleConfigUpdate, onApplyFilters: onApplyFilters }));
             case "agent":
                 return widget.config.agentType === "Pie Chart Agent" ? (jsxRuntimeExports.jsx(PieChartWidget, { widget: widget, showHeader: false, widgetBackendUrl: widgetBackendUrl, onResetReady: onResetReady, widgetIds: widgetIds, datasetId: datasetId })) : widget.config.agentType === "Series Bar Chart Agent" ? (jsxRuntimeExports.jsx(SeriesBarChartWidget, { widget: widget, showHeader: false, widgetBackendUrl: widgetBackendUrl, onResetReady: onResetReady, widgetIds: widgetIds, datasetId: datasetId })) : widget.config.agentType === "Series Line Chart Agent" ? (jsxRuntimeExports.jsx(SeriesLineChartWidget, { widget: widget, showHeader: false, widgetBackendUrl: widgetBackendUrl, onResetReady: onResetReady, widgetIds: widgetIds, datasetId: datasetId })) : widget.config.agentType === "Data Grid Agent" ? (jsxRuntimeExports.jsx(DatagridWidget, { widget: widget, showHeader: false, widgetBackendUrl: widgetBackendUrl, onResetReady: onResetReady, widgetIds: widgetIds, datasetId: datasetId })) : (jsxRuntimeExports.jsx(AgentWidget, { widget: widget, showHeader: false, widgetBackendUrl: widgetBackendUrl, onResetReady: onResetReady, widgetIds: widgetIds, datasetId: datasetId }));
             default:
@@ -40704,6 +41037,13 @@ function AddWidgetDialog({ isOpen, onClose, addWidgetFn, defaultAgentName = "adk
             icon: Bot,
             description: 'Add an AI chatbot interface to your dashboard',
             configRequired: false
+        },
+        {
+            type: 'filters',
+            title: 'Filters Widget',
+            icon: SlidersHorizontal,
+            description: 'Add filter groups with checkboxes to filter dashboard data',
+            configRequired: true
         }
     ];
     const handleWidgetSelect = (widgetType) => {
@@ -40810,12 +41150,19 @@ function AddWidgetDialog({ isOpen, onClose, addWidgetFn, defaultAgentName = "adk
                     : {})),
             };
         }
+        else if (selectedWidgetType === 'filters') {
+            config = {
+                query: query,
+                agentName: "adk-filter-agent",
+                agentType: "Filters Agent"
+            };
+        }
         else {
             config = {
                 agentName: defaultAgentName
             };
         }
-        const type = selectedWidgetType === 'text' ? selectedWidgetType : "agent";
+        const type = selectedWidgetType === 'text' || selectedWidgetType === 'filters' ? selectedWidgetType : "agent";
         handleAddWidget(type, config);
     };
     const resetModal = () => {
@@ -40832,7 +41179,9 @@ function AddWidgetDialog({ isOpen, onClose, addWidgetFn, defaultAgentName = "adk
                                 return (jsxRuntimeExports.jsxs("button", { onClick: () => handleWidgetSelect(widget.type), className: "flex items-start gap-3 p-4 border border-slate-200 rounded-lg hover:bg-gray-50 transition-colors text-left", children: [jsxRuntimeExports.jsx("div", { className: "flex-shrink-0 p-2 bg-primary-100 rounded-md", children: jsxRuntimeExports.jsx(IconComponent, { className: "w-5 h-5 text-primary-600" }) }), jsxRuntimeExports.jsxs("div", { className: "min-w-0 flex-1", children: [jsxRuntimeExports.jsx("h3", { className: "font-medium text-sm", children: widget.title }), jsxRuntimeExports.jsx("p", { className: "text-xs text-gray-500 !mt-1", children: widget.description })] })] }, widget.type));
                             }) })] })) : (jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [(selectedWidgetType === 'bar-chart' || selectedWidgetType === 'series-bar-chart' || selectedWidgetType === 'series-line-chart' || selectedWidgetType === 'line-chart' || selectedWidgetType === 'pie-chart') && (jsxRuntimeExports.jsxs("div", { className: "flex flex-col gap-2 mb-4 mt-2", children: [jsxRuntimeExports.jsx("p", { className: "text-sm text-gray-700", children: "Data Labels:" }), jsxRuntimeExports.jsxs(Select, { value: showLabels ? "yes" : "no", onValueChange: (value) => setShowLabels(value === "yes"), children: [jsxRuntimeExports.jsx(SelectTrigger, { className: "h-8", children: jsxRuntimeExports.jsx(SelectValue, { placeholder: "Visible data labels?" }) }), jsxRuntimeExports.jsxs(SelectContent, { children: [jsxRuntimeExports.jsx(SelectItem, { value: "no", children: "No" }), jsxRuntimeExports.jsx(SelectItem, { value: "yes", children: "Yes" })] })] })] })), jsxRuntimeExports.jsx("div", { className: "mb-2", children: jsxRuntimeExports.jsx("p", { className: "text-sm text-gray-700", children: selectedWidgetType === 'chatbot'
                                     ? 'Chatbot widget will be configured with the default agent.'
-                                    : selectedWidgetType === 'text' ? "Customize the widget's appearance" : 'Enter a query for your chart widget:' }) }), (selectedWidgetType === 'bar-chart' || selectedWidgetType === 'series-bar-chart' || selectedWidgetType === 'series-line-chart' || selectedWidgetType === 'line-chart' || selectedWidgetType === 'pie-chart' || selectedWidgetType === 'data-grid' || selectedWidgetType === 'summary') && (jsxRuntimeExports.jsx("div", { className: "mb-6", children: jsxRuntimeExports.jsx(Textarea, { value: query, onChange: (e) => setQuery(e.target.value), placeholder: "e.g., List out the product types by its count and render it on bar chart", className: "w-full h-24 resize-none" }) })), selectedWidgetType === 'text' && (jsxRuntimeExports.jsxs("div", { className: "flex flex-col gap-5 pb-5 pt-2", children: [jsxRuntimeExports.jsxs("div", { className: "flex flex-col gap-2", children: [jsxRuntimeExports.jsx("div", { className: "font-semibold", children: "Display text:" }), jsxRuntimeExports.jsx(Input, { value: displayText, onChange: (e) => setDisplayText(e.target.value), className: "h-8" })] }), jsxRuntimeExports.jsxs("div", { className: "flex flex-col gap-2", children: [jsxRuntimeExports.jsx("div", { className: "font-semibold", children: "Block type:" }), jsxRuntimeExports.jsxs(Select, { value: blockType, onValueChange: (value) => setBlockType(value), children: [jsxRuntimeExports.jsx(SelectTrigger, { className: "h-8", children: jsxRuntimeExports.jsx(SelectValue, { placeholder: "Select block type" }) }), jsxRuntimeExports.jsxs(SelectContent, { children: [jsxRuntimeExports.jsx(SelectItem, { value: "heading-1", children: "Heading 1" }), jsxRuntimeExports.jsx(SelectItem, { value: "heading-2", children: "Heading 2" }), jsxRuntimeExports.jsx(SelectItem, { value: "heading-3", children: "Heading 3" }), jsxRuntimeExports.jsx(SelectItem, { value: "paragraph", children: "Paragraph" })] })] })] }), jsxRuntimeExports.jsxs("div", { className: "flex flex-col gap-2", children: [jsxRuntimeExports.jsx("div", { className: "font-semibold", children: "Align:" }), jsxRuntimeExports.jsxs(Select, { value: alignment, onValueChange: (value) => setAlignment(value), children: [jsxRuntimeExports.jsx(SelectTrigger, { className: "h-8", children: jsxRuntimeExports.jsx(SelectValue, { placeholder: "Select block type" }) }), jsxRuntimeExports.jsxs(SelectContent, { children: [jsxRuntimeExports.jsx(SelectItem, { value: "left", children: "Left" }), jsxRuntimeExports.jsx(SelectItem, { value: "center", children: "Center" }), jsxRuntimeExports.jsx(SelectItem, { value: "right", children: "Right" }), jsxRuntimeExports.jsx(SelectItem, { value: "justify", children: "Justify" })] })] })] }), jsxRuntimeExports.jsxs("div", { className: "flex flex-col gap-2", children: [jsxRuntimeExports.jsx("div", { className: "font-semibold", children: "Divider:" }), jsxRuntimeExports.jsxs(Select, { value: divider, onValueChange: (value) => setDivider(value), children: [jsxRuntimeExports.jsx(SelectTrigger, { className: "h-8", children: jsxRuntimeExports.jsx(SelectValue, { placeholder: "No" }) }), jsxRuntimeExports.jsxs(SelectContent, { children: [jsxRuntimeExports.jsx(SelectItem, { value: "yes", children: "Yes" }), jsxRuntimeExports.jsx(SelectItem, { value: "no", children: "No" })] })] })] })] })), jsxRuntimeExports.jsxs("div", { className: "flex gap-3 justify-end", children: [jsxRuntimeExports.jsx(Button, { variant: "outline", onClick: () => setShowConfigStep(false), children: "Back" }), jsxRuntimeExports.jsx(Button, { onClick: handleConfigSubmit, disabled: (selectedWidgetType === 'bar-chart' || selectedWidgetType === 'series-bar-chart' || selectedWidgetType === 'series-line-chart' || selectedWidgetType === 'line-chart' || selectedWidgetType === 'pie-chart' || selectedWidgetType === 'data-grid' || selectedWidgetType === 'summary') && !query.trim(), children: "Add Widget" })] })] })) }) }) }));
+                                    : selectedWidgetType === 'text' ? "Customize the widget's appearance"
+                                        : selectedWidgetType === 'filters' ? "Configure the filters widget:"
+                                            : 'Enter a query for your chart widget:' }) }), (selectedWidgetType === 'bar-chart' || selectedWidgetType === 'series-bar-chart' || selectedWidgetType === 'series-line-chart' || selectedWidgetType === 'line-chart' || selectedWidgetType === 'pie-chart' || selectedWidgetType === 'data-grid' || selectedWidgetType === 'summary') && (jsxRuntimeExports.jsx("div", { className: "mb-6", children: jsxRuntimeExports.jsx(Textarea, { value: query, onChange: (e) => setQuery(e.target.value), placeholder: "e.g., List out the product types by its count and render it on bar chart", className: "w-full h-24 resize-none" }) })), (selectedWidgetType === 'filters') && (jsxRuntimeExports.jsx("div", { className: "mb-6", children: jsxRuntimeExports.jsx(Textarea, { value: query, onChange: (e) => setQuery(e.target.value), placeholder: "e.g., Create filters for products and regions", className: "w-full h-24 resize-none" }) })), selectedWidgetType === 'text' && (jsxRuntimeExports.jsxs("div", { className: "flex flex-col gap-5 pb-5 pt-2", children: [jsxRuntimeExports.jsxs("div", { className: "flex flex-col gap-2", children: [jsxRuntimeExports.jsx("div", { className: "font-semibold", children: "Display text:" }), jsxRuntimeExports.jsx(Input, { value: displayText, onChange: (e) => setDisplayText(e.target.value), className: "h-8" })] }), jsxRuntimeExports.jsxs("div", { className: "flex flex-col gap-2", children: [jsxRuntimeExports.jsx("div", { className: "font-semibold", children: "Block type:" }), jsxRuntimeExports.jsxs(Select, { value: blockType, onValueChange: (value) => setBlockType(value), children: [jsxRuntimeExports.jsx(SelectTrigger, { className: "h-8", children: jsxRuntimeExports.jsx(SelectValue, { placeholder: "Select block type" }) }), jsxRuntimeExports.jsxs(SelectContent, { children: [jsxRuntimeExports.jsx(SelectItem, { value: "heading-1", children: "Heading 1" }), jsxRuntimeExports.jsx(SelectItem, { value: "heading-2", children: "Heading 2" }), jsxRuntimeExports.jsx(SelectItem, { value: "heading-3", children: "Heading 3" }), jsxRuntimeExports.jsx(SelectItem, { value: "paragraph", children: "Paragraph" })] })] })] }), jsxRuntimeExports.jsxs("div", { className: "flex flex-col gap-2", children: [jsxRuntimeExports.jsx("div", { className: "font-semibold", children: "Align:" }), jsxRuntimeExports.jsxs(Select, { value: alignment, onValueChange: (value) => setAlignment(value), children: [jsxRuntimeExports.jsx(SelectTrigger, { className: "h-8", children: jsxRuntimeExports.jsx(SelectValue, { placeholder: "Select block type" }) }), jsxRuntimeExports.jsxs(SelectContent, { children: [jsxRuntimeExports.jsx(SelectItem, { value: "left", children: "Left" }), jsxRuntimeExports.jsx(SelectItem, { value: "center", children: "Center" }), jsxRuntimeExports.jsx(SelectItem, { value: "right", children: "Right" }), jsxRuntimeExports.jsx(SelectItem, { value: "justify", children: "Justify" })] })] })] }), jsxRuntimeExports.jsxs("div", { className: "flex flex-col gap-2", children: [jsxRuntimeExports.jsx("div", { className: "font-semibold", children: "Divider:" }), jsxRuntimeExports.jsxs(Select, { value: divider, onValueChange: (value) => setDivider(value), children: [jsxRuntimeExports.jsx(SelectTrigger, { className: "h-8", children: jsxRuntimeExports.jsx(SelectValue, { placeholder: "No" }) }), jsxRuntimeExports.jsxs(SelectContent, { children: [jsxRuntimeExports.jsx(SelectItem, { value: "yes", children: "Yes" }), jsxRuntimeExports.jsx(SelectItem, { value: "no", children: "No" })] })] })] })] })), jsxRuntimeExports.jsxs("div", { className: "flex gap-3 justify-end", children: [jsxRuntimeExports.jsx(Button, { variant: "outline", onClick: () => setShowConfigStep(false), children: "Back" }), jsxRuntimeExports.jsx(Button, { onClick: handleConfigSubmit, disabled: (selectedWidgetType === 'bar-chart' || selectedWidgetType === 'series-bar-chart' || selectedWidgetType === 'series-line-chart' || selectedWidgetType === 'line-chart' || selectedWidgetType === 'pie-chart' || selectedWidgetType === 'data-grid' || selectedWidgetType === 'summary') && !query.trim(), children: "Add Widget" })] })] })) }) }) }));
 }
 
 const RGL = WidthProvider(Responsive);
@@ -40860,6 +41209,7 @@ const defaultLayouts = {
 const IconMap = {
     search: Search,
     filter: Filter,
+    filters: SlidersHorizontal,
     results: LayoutGrid,
     analytics: BarChart$1,
     custom: LayoutGrid,
@@ -40871,7 +41221,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 }) {
+function WidgetDashboard({ pageId, isEditing, selectedWidget = null, onWidgetSelect, refreshKey, widgetBackendUrl, onSaveLayoutReady, openWidgetPallete = false, onCloseWidgetPallete, defaultAgentName = "adk-construction-project-agent", userId, onApplyFilters }) {
     const [widgets, setWidgets] = useState([]);
     const [datasetId, setDatasetId] = useState('');
     const [availableWidgets, setAvailableWidgets] = useState([]);
@@ -40919,7 +41269,7 @@ function WidgetDashboard({ pageId, isEditing, selectedWidget = null, onWidgetSel
         setEditingWidget(null);
         // Trigger the agent by calling its appendMessage function
         const widgetResetFn = widgetResetFunctions.get(editingWidget.id);
-        if (widgetResetFn && editingWidget.type === 'agent') {
+        if (widgetResetFn && (editingWidget.type === 'agent' || editingWidget.type === 'filters')) {
             // Clear the chat first, then trigger with new query
             try {
                 if (widgetBackendUrl) {
@@ -41117,6 +41467,8 @@ function WidgetDashboard({ pageId, isEditing, selectedWidget = null, onWidgetSel
                 return { w: 6, h: 4 };
             case "chatbot":
                 return { w: 6, h: 6 };
+            case "filters":
+                return { w: 3, h: 8 };
             default:
                 return { w: 6, h: 4 };
         }
@@ -41255,7 +41607,8 @@ function WidgetDashboard({ pageId, isEditing, selectedWidget = null, onWidgetSel
                 'pie-chart': 'Pie Chart Widget',
                 'chatbot': 'Chatbot Widget',
                 'text': 'Text Widget',
-                'spacer': 'Spacer Widget'
+                'spacer': 'Spacer Widget',
+                'filters': 'Filters Widget'
             };
             widgetTypeConfig = {
                 type: widgetType,
@@ -41353,16 +41706,10 @@ function WidgetDashboard({ pageId, isEditing, selectedWidget = null, onWidgetSel
                         var _a, _b;
                         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" })] })] }), 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 })] })] }, w.id));
+                                            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, onApplyFilters: onApplyFilters })] })] }, w.id));
                     }) })) })] }));
 }
 
-const Checkbox = React.forwardRef((_a, ref) => {
-    var { className } = _a, props = __rest(_a, ["className"]);
-    return (jsxRuntimeExports.jsx(CheckboxPrimitive.Root, Object.assign({ ref: ref, className: cn("peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground", className) }, props, { children: jsxRuntimeExports.jsx(CheckboxPrimitive.Indicator, { className: cn("flex items-center justify-center text-current"), children: jsxRuntimeExports.jsx(Check, { className: "h-4 w-4" }) }) })));
-});
-Checkbox.displayName = CheckboxPrimitive.Root.displayName;
-
 const Dialog = DialogPrimitive.Root;
 const DialogPortal = DialogPrimitive.Portal;
 const DialogOverlay = React.forwardRef((_a, ref) => {