dp-widgets-framework 1.5.3 → 1.5.5

package/dist/index.esm.js

@@ -1841,14 +1841,14 @@ function WidgetSettingsPanel({ pageId, widget, onClose, onWidgetUpdate, widgetBa
     const renderCodeSettings = () => {
         var _a;
         return (jsxRuntimeExports.jsx("div", { className: "space-y-4", children: jsxRuntimeExports.jsxs("div", { className: "space-y-2", children: [jsxRuntimeExports.jsx(Label$1, { className: "text-xs", children: "Custom Widget Code" }), jsxRuntimeExports.jsx(CodeEditor, { value: ((_a = localWidget.config) === null || _a === void 0 ? void 0 : _a.customCode) ||
-                            `// Custom search widget code
-  // You can modify the widget behavior here
-  function customSearch(query) {
-    // Your custom search logic
-    console.log('Searching for:', query);
-    return {
-      // Return your search results
-    };
+                            `// Custom search widget code
+  // You can modify the widget behavior here
+  function customSearch(query) {
+    // Your custom search logic
+    console.log('Searching for:', query);
+    return {
+      // Return your search results
+    };
   }`, onChange: (value) => updateConfig({
                             customCode: value || "",
                         }) })] }) }));
@@ -39279,7 +39279,7 @@ const createLoadingComponent$4 = (message = "Loading filter data...") => (jsxRun
 const createInitialFilterState = (datasetId, filterData) => {
     return {
         column_values: filterData || [],
-        dataset_id: datasetId || ""
+        dashboard_id: datasetId || ""
     };
 };
 const loadAgentState$4 = async (widgetBackendUrl, threadId, agentName) => {
@@ -39350,7 +39350,7 @@ const convertFilterStateToGroups = (filterState) => {
         })),
     }));
 };
-function FiltersContent({ filterGroups, showHeader, onFilterChange, widget, appendMessage, query, isFirstLoad, widgetBackendUrl, widgetId, startLoadingTimeout, clearLoadingTimeout, filterState, onApplyFilters, }) {
+function FiltersContent({ filterGroups, showHeader, onFilterChange, widget, appendMessage, query, isFirstLoad, widgetBackendUrl, widgetId, startLoadingTimeout, clearLoadingTimeout, filterState, onApplyFilters, isEditing = false, }) {
     const hasCalledRef = useRef(false);
     const [expandedGroups, setExpandedGroups] = useState({});
     const [selectedFilters, setSelectedFilters] = useState({});
@@ -39455,9 +39455,22 @@ function FiltersContent({ filterGroups, showHeader, onFilterChange, widget, appe
                                 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" })] }) })] }));
+                            }, 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: () => {
+                                // Convert option IDs back to original label values
+                                const filtersWithLabels = {};
+                                Object.entries(selectedFilters).forEach(([groupId, optionIds]) => {
+                                    const group = filterGroups.find(g => g.id === groupId);
+                                    if (group) {
+                                        filtersWithLabels[groupId] = optionIds.map(optionId => {
+                                            const option = group.options.find(opt => opt.id === optionId);
+                                            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" })] }) })] }));
 }
-function CopilotKitFilters({ widget, showHeader, onFilterChange, onResetReady, widgetBackendUrl, datasetId, onApplyFilters, }) {
+function CopilotKitFilters({ widget, showHeader, onFilterChange, onResetReady, widgetBackendUrl, datasetId, onApplyFilters, isEditing = false, }) {
     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;
@@ -39566,9 +39579,9 @@ function CopilotKitFilters({ widget, showHeader, onFilterChange, onResetReady, w
     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 })) }));
+            ? (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, isEditing: isEditing })) }));
 }
-function FiltersWidget({ widget, showHeader = true, onConfigUpdate, onFilterChange, widgetBackendUrl, onResetReady, datasetId, onApplyFilters, }) {
+function FiltersWidget({ widget, showHeader = true, onConfigUpdate, onFilterChange, widgetBackendUrl, onResetReady, datasetId, onApplyFilters, isEditing = false, }) {
     var _a;
     const getRuntimeUrl = () => {
         var _a;
@@ -39576,7 +39589,7 @@ function FiltersWidget({ widget, showHeader = true, onConfigUpdate, onFilterChan
         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 }) }));
+    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, isEditing: isEditing }) }));
 }
 
 const CHART_REFRESH_TIMEOUT$3 = 3000;
@@ -40787,7 +40800,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, onApplyFilters, }) {
+function WidgetRenderer({ widget, isTemplate = false, onConfigUpdate, widgetBackendUrl, onResetReady, widgetIds, datasetId, pageId, onApplyFilters, isEditing = false, }) {
     const handleConfigUpdate = (config) => {
         if (onConfigUpdate) {
             onConfigUpdate(widget.id, config);
@@ -40813,7 +40826,7 @@ function WidgetRenderer({ widget, isTemplate = false, onConfigUpdate, widgetBack
             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 }));
+                return (jsxRuntimeExports.jsx(FiltersWidget, { widget: widget, showHeader: false, widgetBackendUrl: widgetBackendUrl, onResetReady: onResetReady, datasetId: pageId, onConfigUpdate: handleConfigUpdate, onApplyFilters: onApplyFilters, isEditing: isEditing }));
             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:
@@ -40957,7 +40970,7 @@ function EditWidgetDialog({ editingWidget, setWidgets, initialText, isOpen, onCl
                                 jsxRuntimeExports.jsxs("div", { children: [jsxRuntimeExports.jsxs("div", { className: "flex flex-col gap-2", children: [jsxRuntimeExports.jsx("div", { className: "font-semibold", children: "Query:" }), jsxRuntimeExports.jsx(Textarea, { className: "w-full p-2", value: query, onChange: (e) => { var _a; return setQuery((_a = e === null || e === void 0 ? void 0 : e.target) === null || _a === void 0 ? void 0 : _a.value); } })] }), jsxRuntimeExports.jsx("div", { className: "flex justify-end pt-3", children: jsxRuntimeExports.jsx("button", { onClick: handleSubmit, className: "font-medium rounded-lg transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none bg-primary-600 text-white hover:bg-primary-700 focus:ring-primary-500 px-6 py-2 text-sm flex items-center gap-2", children: "Submit" }) })] })] })] }) }));
 }
 
-function AddWidgetDialog({ isOpen, onClose, addWidgetFn, defaultAgentName = "adk-construction-project-agent" }) {
+function AddWidgetDialog({ isOpen, onClose, addWidgetFn, defaultAgentName = "adk-construction-project-agent", hasFiltersWidget = false }) {
     var _a;
     const [selectedWidgetType, setSelectedWidgetType] = useState(null);
     const [query, setQuery] = useState('');
@@ -41176,7 +41189,12 @@ function AddWidgetDialog({ isOpen, onClose, addWidgetFn, defaultAgentName = "adk
         // initialFocusRef={inputRef}
         noOverflowHidden: true, children: jsxRuntimeExports.jsx("div", { children: jsxRuntimeExports.jsx("div", { className: "pt-4", children: !showConfigStep ? (jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsx("div", { className: "mb-4", children: jsxRuntimeExports.jsx("p", { className: "text-sm text-gray-700", children: "Choose a widget to add to your dashboard:" }) }), jsxRuntimeExports.jsx("div", { className: "grid grid-cols-1 gap-3 max-h-[400px] overflow-y-auto", children: widgetOptions.map((widget) => {
                                 const IconComponent = widget.icon;
-                                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));
+                                const isFiltersDisabled = widget.type === 'filters' && hasFiltersWidget;
+                                return (jsxRuntimeExports.jsxs("button", { onClick: () => !isFiltersDisabled && handleWidgetSelect(widget.type), disabled: isFiltersDisabled, className: `flex items-start gap-3 p-4 border border-slate-200 rounded-lg transition-colors text-left ${isFiltersDisabled
+                                        ? 'opacity-50 cursor-not-allowed bg-gray-100'
+                                        : 'hover:bg-gray-50 cursor-pointer'}`, children: [jsxRuntimeExports.jsx("div", { className: `flex-shrink-0 p-2 rounded-md ${isFiltersDisabled ? 'bg-gray-200' : 'bg-primary-100'}`, children: jsxRuntimeExports.jsx(IconComponent, { className: `w-5 h-5 ${isFiltersDisabled ? 'text-gray-400' : 'text-primary-600'}` }) }), jsxRuntimeExports.jsxs("div", { className: "min-w-0 flex-1", children: [jsxRuntimeExports.jsx("h3", { className: `font-medium text-sm ${isFiltersDisabled ? 'text-gray-400' : ''}`, children: widget.title }), jsxRuntimeExports.jsx("p", { className: `text-xs !mt-1 ${isFiltersDisabled ? 'text-gray-400' : 'text-gray-500'}`, children: isFiltersDisabled
+                                                        ? 'Only one Filters Widget is allowed per dashboard'
+                                                        : 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"
@@ -41702,11 +41720,11 @@ function WidgetDashboard({ pageId, isEditing, selectedWidget = null, onWidgetSel
     return (jsxRuntimeExports.jsxs("div", { className: "w-full max-w-full p-4 bg-accent/5", children: [jsxRuntimeExports.jsx(AddWidgetDialog, { isOpen: openWidgetPallete, onClose: onCloseWidgetPallete || (() => { }), addWidgetFn: (widgetType, config) => {
                     addWidget(widgetType, config);
                     onCloseWidgetPallete && onCloseWidgetPallete();
-                }, defaultAgentName: defaultAgentName }), 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) => {
+                }, 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;
                         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, onApplyFilters: onApplyFilters })] })] }, 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, pageId: pageId, onApplyFilters: onApplyFilters, isEditing: isEditing })] })] }, w.id));
                     }) })) })] }));
 }
 

package/dist/index.js

@@ -1868,14 +1868,14 @@ function WidgetSettingsPanel({ pageId, widget, onClose, onWidgetUpdate, widgetBa
     const renderCodeSettings = () => {
         var _a;
         return (jsxRuntimeExports.jsx("div", { className: "space-y-4", children: jsxRuntimeExports.jsxs("div", { className: "space-y-2", children: [jsxRuntimeExports.jsx(Label$1, { className: "text-xs", children: "Custom Widget Code" }), jsxRuntimeExports.jsx(CodeEditor, { value: ((_a = localWidget.config) === null || _a === void 0 ? void 0 : _a.customCode) ||
-                            `// Custom search widget code
-  // You can modify the widget behavior here
-  function customSearch(query) {
-    // Your custom search logic
-    console.log('Searching for:', query);
-    return {
-      // Return your search results
-    };
+                            `// Custom search widget code
+  // You can modify the widget behavior here
+  function customSearch(query) {
+    // Your custom search logic
+    console.log('Searching for:', query);
+    return {
+      // Return your search results
+    };
   }`, onChange: (value) => updateConfig({
                             customCode: value || "",
                         }) })] }) }));
@@ -39306,7 +39306,7 @@ const createLoadingComponent$4 = (message = "Loading filter data...") => (jsxRun
 const createInitialFilterState = (datasetId, filterData) => {
     return {
         column_values: filterData || [],
-        dataset_id: datasetId || ""
+        dashboard_id: datasetId || ""
     };
 };
 const loadAgentState$4 = async (widgetBackendUrl, threadId, agentName) => {
@@ -39377,7 +39377,7 @@ const convertFilterStateToGroups = (filterState) => {
         })),
     }));
 };
-function FiltersContent({ filterGroups, showHeader, onFilterChange, widget, appendMessage, query, isFirstLoad, widgetBackendUrl, widgetId, startLoadingTimeout, clearLoadingTimeout, filterState, onApplyFilters, }) {
+function FiltersContent({ filterGroups, showHeader, onFilterChange, widget, appendMessage, query, isFirstLoad, widgetBackendUrl, widgetId, startLoadingTimeout, clearLoadingTimeout, filterState, onApplyFilters, isEditing = false, }) {
     const hasCalledRef = React.useRef(false);
     const [expandedGroups, setExpandedGroups] = React.useState({});
     const [selectedFilters, setSelectedFilters] = React.useState({});
@@ -39482,9 +39482,22 @@ function FiltersContent({ filterGroups, showHeader, onFilterChange, widget, appe
                                 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" })] }) })] }));
+                            }, 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: () => {
+                                // Convert option IDs back to original label values
+                                const filtersWithLabels = {};
+                                Object.entries(selectedFilters).forEach(([groupId, optionIds]) => {
+                                    const group = filterGroups.find(g => g.id === groupId);
+                                    if (group) {
+                                        filtersWithLabels[groupId] = optionIds.map(optionId => {
+                                            const option = group.options.find(opt => opt.id === optionId);
+                                            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" })] }) })] }));
 }
-function CopilotKitFilters({ widget, showHeader, onFilterChange, onResetReady, widgetBackendUrl, datasetId, onApplyFilters, }) {
+function CopilotKitFilters({ widget, showHeader, onFilterChange, onResetReady, widgetBackendUrl, datasetId, onApplyFilters, isEditing = false, }) {
     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;
@@ -39593,9 +39606,9 @@ function CopilotKitFilters({ widget, showHeader, onFilterChange, onResetReady, w
     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 })) }));
+            ? (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, isEditing: isEditing })) }));
 }
-function FiltersWidget({ widget, showHeader = true, onConfigUpdate, onFilterChange, widgetBackendUrl, onResetReady, datasetId, onApplyFilters, }) {
+function FiltersWidget({ widget, showHeader = true, onConfigUpdate, onFilterChange, widgetBackendUrl, onResetReady, datasetId, onApplyFilters, isEditing = false, }) {
     var _a;
     const getRuntimeUrl = () => {
         var _a;
@@ -39603,7 +39616,7 @@ function FiltersWidget({ widget, showHeader = true, onConfigUpdate, onFilterChan
         const agentName = ((_a = widget.config) === null || _a === void 0 ? void 0 : _a.agentName) || 'default-agent';
         return `${baseUrl}/api/copilot/${agentName}`;
     };
-    return (jsxRuntimeExports.jsx(reactCore.CopilotKit, { runtimeUrl: getRuntimeUrl(), showDevConsole: false, agent: ((_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 }) }));
+    return (jsxRuntimeExports.jsx(reactCore.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, isEditing: isEditing }) }));
 }
 
 const CHART_REFRESH_TIMEOUT$3 = 3000;
@@ -40814,7 +40827,7 @@ function DatagridWidget({ widget, showHeader = true, widgetBackendUrl, onResetRe
     return (jsxRuntimeExports.jsx(reactCore.CopilotKit, { runtimeUrl: getRuntimeUrl(), showDevConsole: false, agent: ((_b = widget.config) === null || _b === void 0 ? void 0 : _b.agentName) || "widget_assistant", children: jsxRuntimeExports.jsx(CopilotKitDataGrid, { widget: widget, showHeader: showHeader, styles: styles, onResetReady: onResetReady, widgetBackendUrl: widgetBackendUrl, datasetId: datasetId }) }));
 }
 
-function WidgetRenderer({ widget, isTemplate = false, onConfigUpdate, widgetBackendUrl, onResetReady, widgetIds, datasetId, onApplyFilters, }) {
+function WidgetRenderer({ widget, isTemplate = false, onConfigUpdate, widgetBackendUrl, onResetReady, widgetIds, datasetId, pageId, onApplyFilters, isEditing = false, }) {
     const handleConfigUpdate = (config) => {
         if (onConfigUpdate) {
             onConfigUpdate(widget.id, config);
@@ -40840,7 +40853,7 @@ function WidgetRenderer({ widget, isTemplate = false, onConfigUpdate, widgetBack
             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 }));
+                return (jsxRuntimeExports.jsx(FiltersWidget, { widget: widget, showHeader: false, widgetBackendUrl: widgetBackendUrl, onResetReady: onResetReady, datasetId: pageId, onConfigUpdate: handleConfigUpdate, onApplyFilters: onApplyFilters, isEditing: isEditing }));
             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:
@@ -40984,7 +40997,7 @@ function EditWidgetDialog({ editingWidget, setWidgets, initialText, isOpen, onCl
                                 jsxRuntimeExports.jsxs("div", { children: [jsxRuntimeExports.jsxs("div", { className: "flex flex-col gap-2", children: [jsxRuntimeExports.jsx("div", { className: "font-semibold", children: "Query:" }), jsxRuntimeExports.jsx(Textarea, { className: "w-full p-2", value: query, onChange: (e) => { var _a; return setQuery((_a = e === null || e === void 0 ? void 0 : e.target) === null || _a === void 0 ? void 0 : _a.value); } })] }), jsxRuntimeExports.jsx("div", { className: "flex justify-end pt-3", children: jsxRuntimeExports.jsx("button", { onClick: handleSubmit, className: "font-medium rounded-lg transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none bg-primary-600 text-white hover:bg-primary-700 focus:ring-primary-500 px-6 py-2 text-sm flex items-center gap-2", children: "Submit" }) })] })] })] }) }));
 }
 
-function AddWidgetDialog({ isOpen, onClose, addWidgetFn, defaultAgentName = "adk-construction-project-agent" }) {
+function AddWidgetDialog({ isOpen, onClose, addWidgetFn, defaultAgentName = "adk-construction-project-agent", hasFiltersWidget = false }) {
     var _a;
     const [selectedWidgetType, setSelectedWidgetType] = React.useState(null);
     const [query, setQuery] = React.useState('');
@@ -41203,7 +41216,12 @@ function AddWidgetDialog({ isOpen, onClose, addWidgetFn, defaultAgentName = "adk
         // initialFocusRef={inputRef}
         noOverflowHidden: true, children: jsxRuntimeExports.jsx("div", { children: jsxRuntimeExports.jsx("div", { className: "pt-4", children: !showConfigStep ? (jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsx("div", { className: "mb-4", children: jsxRuntimeExports.jsx("p", { className: "text-sm text-gray-700", children: "Choose a widget to add to your dashboard:" }) }), jsxRuntimeExports.jsx("div", { className: "grid grid-cols-1 gap-3 max-h-[400px] overflow-y-auto", children: widgetOptions.map((widget) => {
                                 const IconComponent = widget.icon;
-                                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));
+                                const isFiltersDisabled = widget.type === 'filters' && hasFiltersWidget;
+                                return (jsxRuntimeExports.jsxs("button", { onClick: () => !isFiltersDisabled && handleWidgetSelect(widget.type), disabled: isFiltersDisabled, className: `flex items-start gap-3 p-4 border border-slate-200 rounded-lg transition-colors text-left ${isFiltersDisabled
+                                        ? 'opacity-50 cursor-not-allowed bg-gray-100'
+                                        : 'hover:bg-gray-50 cursor-pointer'}`, children: [jsxRuntimeExports.jsx("div", { className: `flex-shrink-0 p-2 rounded-md ${isFiltersDisabled ? 'bg-gray-200' : 'bg-primary-100'}`, children: jsxRuntimeExports.jsx(IconComponent, { className: `w-5 h-5 ${isFiltersDisabled ? 'text-gray-400' : 'text-primary-600'}` }) }), jsxRuntimeExports.jsxs("div", { className: "min-w-0 flex-1", children: [jsxRuntimeExports.jsx("h3", { className: `font-medium text-sm ${isFiltersDisabled ? 'text-gray-400' : ''}`, children: widget.title }), jsxRuntimeExports.jsx("p", { className: `text-xs !mt-1 ${isFiltersDisabled ? 'text-gray-400' : 'text-gray-500'}`, children: isFiltersDisabled
+                                                        ? 'Only one Filters Widget is allowed per dashboard'
+                                                        : 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"
@@ -41729,11 +41747,11 @@ function WidgetDashboard({ pageId, isEditing, selectedWidget = null, onWidgetSel
     return (jsxRuntimeExports.jsxs("div", { className: "w-full max-w-full p-4 bg-accent/5", children: [jsxRuntimeExports.jsx(AddWidgetDialog, { isOpen: openWidgetPallete, onClose: onCloseWidgetPallete || (() => { }), addWidgetFn: (widgetType, config) => {
                     addWidget(widgetType, config);
                     onCloseWidgetPallete && onCloseWidgetPallete();
-                }, defaultAgentName: defaultAgentName }), 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) => {
+                }, 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;
                         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" })] })] }), 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, onApplyFilters: onApplyFilters })] })] }, 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(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));
                     }) })) })] }));
 }
 

package/package.json

@@ -1,139 +1,139 @@
-{
-  "name": "dp-widgets-framework",
-  "version": "1.5.3",
-  "private": false,
-  "publishConfig": {
-    "registry": "https://registry.npmjs.org"
-  },
-  "description": "A React framework for creating customizable widget dashboards with drag-and-drop functionality",
-  "keywords": [
-    "react",
-    "widgets",
-    "dashboard",
-    "framework",
-    "drag-and-drop",
-    "customizable"
-  ],
-  "homepage": "https://github.com/aretec-inc/di-widgets-framework",
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/aretec-inc/di-widgets-framework.git"
-  },
-  "author": "Syed Fakher Uddin",
-  "files": [
-    "dist/*.esm.js",
-    "dist/*.js",
-    "dist/*.d.ts",
-    "dist/*.css",
-    "README.md"
-  ],
-  "main": "dist/index.js",
-  "module": "dist/index.esm.js",
-  "types": "dist/index.d.ts",
-  "exports": {
-    ".": {
-      "import": "./dist/index.esm.js",
-      "require": "./dist/index.js",
-      "default": "./dist/index.js"
-    }
-  },
-  "scripts": {
-    "dev": "next dev",
-    "build": "next build",
-    "start": "next start",
-    "lint": "next lint",
-    "format-all-files": "prettier --write \"src/**/*.{js,jsx,ts,tsx,json,css,md}\"",
-    "build:rollup": "rollup -c --bundleConfigAsCjs",
-    "prepare": "npm run build:rollup",
-    "prepublishOnly": "npm run build:rollup",
-    "init:db": "node scripts/init-db.js",
-    "test:db": "node scripts/test-db-init.js",
-    "postbuild": "echo 'Build completed. Run npm run init:db if database initialization is needed.'"
-  },
-  "dependencies": {
-    "@ag-ui/client": "0.0.35",
-    "@ag-ui/core": "0.0.35",
-    "@copilotkit/react-core": "1.9.3",
-    "@copilotkit/react-ui": "1.9.3",
-    "@copilotkit/runtime": "1.9.3",
-    "@energiency/chartjs-plugin-piechart-outlabels": "^1.3.5",
-    "@hello-pangea/dnd": "^17.0.0",
-    "@monaco-editor/react": "^4.6.0",
-    "@radix-ui/react-accordion": "^1.2.2",
-    "@radix-ui/react-avatar": "^1.1.2",
-    "@radix-ui/react-checkbox": "^1.1.3",
-    "@radix-ui/react-collapsible": "^1.1.2",
-    "@radix-ui/react-dialog": "^1.1.5",
-    "@radix-ui/react-dropdown-menu": "^2.1.5",
-    "@radix-ui/react-label": "^2.1.1",
-    "@radix-ui/react-radio-group": "^1.2.2",
-    "@radix-ui/react-scroll-area": "^1.2.2",
-    "@radix-ui/react-select": "^2.1.5",
-    "@radix-ui/react-slider": "^1.2.2",
-    "@radix-ui/react-slot": "^1.1.1",
-    "@radix-ui/react-switch": "^1.1.2",
-    "@radix-ui/react-tabs": "^1.1.2",
-    "@types/cors": "^2.8.17",
-    "@types/express": "^5.0.0",
-    "@types/pg": "^8.11.11",
-    "@types/react-beautiful-dnd": "^13.1.8",
-    "@types/react-datepicker": "^7.0.0",
-    "@types/react-grid-layout": "^1.3.5",
-    "chart.js": "^4.5.0",
-    "chartjs-plugin-datalabels": "^2.2.0",
-    "class-variance-authority": "^0.7.1",
-    "clsx": "^2.1.1",
-    "cors": "^2.8.5",
-    "dotenv": "^16.4.7",
-    "express": "^4.21.2",
-    "express-validator": "^7.2.1",
-    "framer-motion": "^12.0.6",
-    "lodash": "^4.17.21",
-    "lucide-react": "^0.474.0",
-    "next": "14.0.4",
-    "next-themes": "^0.4.4",
-    "pg": "^8.13.1",
-    "react": "^18",
-    "react-beautiful-dnd": "^13.1.1",
-    "react-chartjs-2": "^5.3.0",
-    "react-datepicker": "^7.6.0",
-    "react-dom": "^18",
-    "react-error-boundary": "^5.0.0",
-    "react-grid-layout": "^1.5.0",
-    "react-markdown": "^9.0.3",
-    "tailwind-merge": "^3.0.1",
-    "tailwindcss-animate": "^1.0.7",
-    "uuid": "^11.0.5",
-    "zod": "^3.24.1"
-  },
-  "devDependencies": {
-    "@eslint/eslintrc": "^3",
-    "@rollup/plugin-babel": "^6.0.4",
-    "@rollup/plugin-commonjs": "^28.0.1",
-    "@rollup/plugin-json": "^6.1.0",
-    "@rollup/plugin-node-resolve": "^15.3.0",
-    "@rollup/plugin-terser": "^0.4.4",
-    "@rollup/plugin-typescript": "^12.1.1",
-    "@types/lodash": "^4.17.15",
-    "@types/node": "^20",
-    "@types/react": "^18",
-    "@types/react-dom": "^18",
-    "autoprefixer": "^10.0.1",
-    "eslint": "^8.43.0",
-    "eslint-config-next": "15.1.6",
-    "eslint-config-node": "^4.1.0",
-    "eslint-config-prettier": "^8.10.0",
-    "eslint-plugin-next": "^0.0.0",
-    "eslint-plugin-node": "^11.1.0",
-    "eslint-plugin-prettier": "^4.2.1",
-    "eslint-plugin-react": "^7.32.2",
-    "postcss": "^8",
-    "prettier": "^2.8.8",
-    "rollup": "^4.27.3",
-    "rollup-plugin-peer-deps-external": "^2.2.4",
-    "rollup-plugin-postcss": "^4.0.2",
-    "rollup-plugin-visualizer": "^5.12.0",
-    "tailwindcss": "^3.3.0",
-    "typescript": "^5"
-  }
+{
+  "name": "dp-widgets-framework",
+  "version": "1.5.5",
+  "private": false,
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org"
+  },
+  "description": "A React framework for creating customizable widget dashboards with drag-and-drop functionality",
+  "keywords": [
+    "react",
+    "widgets",
+    "dashboard",
+    "framework",
+    "drag-and-drop",
+    "customizable"
+  ],
+  "homepage": "https://github.com/aretec-inc/di-widgets-framework",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/aretec-inc/di-widgets-framework.git"
+  },
+  "author": "Syed Fakher Uddin",
+  "files": [
+    "dist/*.esm.js",
+    "dist/*.js",
+    "dist/*.d.ts",
+    "dist/*.css",
+    "README.md"
+  ],
+  "main": "dist/index.js",
+  "module": "dist/index.esm.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.esm.js",
+      "require": "./dist/index.js",
+      "default": "./dist/index.js"
+    }
+  },
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint",
+    "format-all-files": "prettier --write \"src/**/*.{js,jsx,ts,tsx,json,css,md}\"",
+    "build:rollup": "rollup -c --bundleConfigAsCjs",
+    "prepare": "npm run build:rollup",
+    "prepublishOnly": "npm run build:rollup",
+    "init:db": "node scripts/init-db.js",
+    "test:db": "node scripts/test-db-init.js",
+    "postbuild": "echo 'Build completed. Run npm run init:db if database initialization is needed.'"
+  },
+  "dependencies": {
+    "@ag-ui/client": "0.0.35",
+    "@ag-ui/core": "0.0.35",
+    "@copilotkit/react-core": "1.9.3",
+    "@copilotkit/react-ui": "1.9.3",
+    "@copilotkit/runtime": "1.9.3",
+    "@energiency/chartjs-plugin-piechart-outlabels": "^1.3.5",
+    "@hello-pangea/dnd": "^17.0.0",
+    "@monaco-editor/react": "^4.6.0",
+    "@radix-ui/react-accordion": "^1.2.2",
+    "@radix-ui/react-avatar": "^1.1.2",
+    "@radix-ui/react-checkbox": "^1.1.3",
+    "@radix-ui/react-collapsible": "^1.1.2",
+    "@radix-ui/react-dialog": "^1.1.5",
+    "@radix-ui/react-dropdown-menu": "^2.1.5",
+    "@radix-ui/react-label": "^2.1.1",
+    "@radix-ui/react-radio-group": "^1.2.2",
+    "@radix-ui/react-scroll-area": "^1.2.2",
+    "@radix-ui/react-select": "^2.1.5",
+    "@radix-ui/react-slider": "^1.2.2",
+    "@radix-ui/react-slot": "^1.1.1",
+    "@radix-ui/react-switch": "^1.1.2",
+    "@radix-ui/react-tabs": "^1.1.2",
+    "@types/cors": "^2.8.17",
+    "@types/express": "^5.0.0",
+    "@types/pg": "^8.11.11",
+    "@types/react-beautiful-dnd": "^13.1.8",
+    "@types/react-datepicker": "^7.0.0",
+    "@types/react-grid-layout": "^1.3.5",
+    "chart.js": "^4.5.0",
+    "chartjs-plugin-datalabels": "^2.2.0",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "cors": "^2.8.5",
+    "dotenv": "^16.4.7",
+    "express": "^4.21.2",
+    "express-validator": "^7.2.1",
+    "framer-motion": "^12.0.6",
+    "lodash": "^4.17.21",
+    "lucide-react": "^0.474.0",
+    "next": "14.0.4",
+    "next-themes": "^0.4.4",
+    "pg": "^8.13.1",
+    "react": "^18",
+    "react-beautiful-dnd": "^13.1.1",
+    "react-chartjs-2": "^5.3.0",
+    "react-datepicker": "^7.6.0",
+    "react-dom": "^18",
+    "react-error-boundary": "^5.0.0",
+    "react-grid-layout": "^1.5.0",
+    "react-markdown": "^9.0.3",
+    "tailwind-merge": "^3.0.1",
+    "tailwindcss-animate": "^1.0.7",
+    "uuid": "^11.0.5",
+    "zod": "^3.24.1"
+  },
+  "devDependencies": {
+    "@eslint/eslintrc": "^3",
+    "@rollup/plugin-babel": "^6.0.4",
+    "@rollup/plugin-commonjs": "^28.0.1",
+    "@rollup/plugin-json": "^6.1.0",
+    "@rollup/plugin-node-resolve": "^15.3.0",
+    "@rollup/plugin-terser": "^0.4.4",
+    "@rollup/plugin-typescript": "^12.1.1",
+    "@types/lodash": "^4.17.15",
+    "@types/node": "^20",
+    "@types/react": "^18",
+    "@types/react-dom": "^18",
+    "autoprefixer": "^10.0.1",
+    "eslint": "^8.43.0",
+    "eslint-config-next": "15.1.6",
+    "eslint-config-node": "^4.1.0",
+    "eslint-config-prettier": "^8.10.0",
+    "eslint-plugin-next": "^0.0.0",
+    "eslint-plugin-node": "^11.1.0",
+    "eslint-plugin-prettier": "^4.2.1",
+    "eslint-plugin-react": "^7.32.2",
+    "postcss": "^8",
+    "prettier": "^2.8.8",
+    "rollup": "^4.27.3",
+    "rollup-plugin-peer-deps-external": "^2.2.4",
+    "rollup-plugin-postcss": "^4.0.2",
+    "rollup-plugin-visualizer": "^5.12.0",
+    "tailwindcss": "^3.3.0",
+    "typescript": "^5"
+  }
 }