dp-widgets-framework 1.2.3 → 1.2.5

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, X, 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, X, AlignVerticalSpaceAround, LineChart as LineChart$1, PieChart as PieChart$1, Table, FileText, Loader2, GripHorizontal, Edit, MessageCircleX, Edit2 } from 'lucide-react';
 import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area';
 import { Slot } from '@radix-ui/react-slot';
 import { debounce as debounce$1 } from 'lodash';
@@ -1993,7 +1993,7 @@ const borderRadiusMap$2 = {
     large: "0.5rem",
     "extra-large": "0.75rem",
 };
-const getStyleValues$4 = (styles = {}) => {
+const getStyleValues$5 = (styles = {}) => {
     return {
         backgroundColor: styles.backgroundColor || "transparent",
         borderRadius: borderRadiusMap$2[styles.borderRadius || "rounded"],
@@ -2006,7 +2006,7 @@ const getStyleValues$4 = (styles = {}) => {
 };
 function HeaderWidget({ widget }) {
     var _a, _b;
-    const styles = getStyleValues$4((_a = widget.config) === null || _a === void 0 ? void 0 : _a.styles);
+    const styles = getStyleValues$5((_a = widget.config) === null || _a === void 0 ? void 0 : _a.styles);
     const content = ((_b = widget.config) === null || _b === void 0 ? void 0 : _b.content) || {};
     return (jsxRuntimeExports.jsx("div", { className: "w-full", style: styles, children: jsxRuntimeExports.jsxs("div", { className: cn("flex items-center justify-between"), children: [jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-3", children: [content.showLogo && content.logoUrl && (jsxRuntimeExports.jsx("img", { src: content.logoUrl, alt: "Logo", className: "h-8 w-auto" })), jsxRuntimeExports.jsx("h1", { className: cn("font-semibold", content.titleSize || "text-xl"), children: content.title || "Header" })] }), content.showRightContent && (jsxRuntimeExports.jsx("div", { className: "flex items-center gap-4", children: content.rightContent }))] }) }));
 }
@@ -2017,7 +2017,7 @@ const borderRadiusMap$1 = {
     large: "0.5rem",
     "extra-large": "0.75rem",
 };
-const getStyleValues$3 = (styles = {}) => {
+const getStyleValues$4 = (styles = {}) => {
     return {
         backgroundColor: styles.backgroundColor || "transparent",
         borderRadius: borderRadiusMap$1[styles.borderRadius || "rounded"],
@@ -2030,7 +2030,7 @@ const getStyleValues$3 = (styles = {}) => {
 };
 function FooterWidget({ widget }) {
     var _a, _b;
-    const styles = getStyleValues$3((_a = widget.config) === null || _a === void 0 ? void 0 : _a.styles);
+    const styles = getStyleValues$4((_a = widget.config) === null || _a === void 0 ? void 0 : _a.styles);
     const content = ((_b = widget.config) === null || _b === void 0 ? void 0 : _b.content) || {};
     return (jsxRuntimeExports.jsx("footer", { className: "w-full", style: styles, children: jsxRuntimeExports.jsxs("div", { className: cn("flex items-center", content.layout === "centered" ? "justify-center" : "justify-between"), children: [jsxRuntimeExports.jsx("div", { className: "text-sm", children: content.leftContent || "© 2024 Your Company" }), content.showCenterContent && (jsxRuntimeExports.jsx("div", { className: "text-sm", children: content.centerContent })), content.showRightContent && (jsxRuntimeExports.jsx("div", { className: "flex items-center gap-4 text-sm", children: content.rightContent }))] }) }));
 }
@@ -2041,7 +2041,7 @@ const borderRadiusMap = {
     large: "0.5rem",
     "extra-large": "0.75rem",
 };
-const getStyleValues$2 = (styles = {}) => {
+const getStyleValues$3 = (styles = {}) => {
     const borderRadius = (styles.borderRadius || "rounded");
     return {
         backgroundColor: styles.backgroundColor || "transparent",
@@ -2056,12 +2056,12 @@ const getStyleValues$2 = (styles = {}) => {
 };
 function TextWidget({ widget }) {
     var _a, _b;
-    const styles = getStyleValues$2((_a = widget.config) === null || _a === void 0 ? void 0 : _a.styles);
+    const styles = getStyleValues$3((_a = widget.config) === null || _a === void 0 ? void 0 : _a.styles);
     const content = ((_b = widget.config) === null || _b === void 0 ? void 0 : _b.content) || {};
     return (jsxRuntimeExports.jsx("div", { className: "w-full", style: styles, children: jsxRuntimeExports.jsx("div", { className: cn("prose max-w-none", content.blockType === "heading-1" && "text-[24px] font-bold", content.blockType === "heading-2" && "text-[22px] font-bold", content.blockType === "heading-3" && "text-[18px] font-bold", content.blockType === "paragraph" && "text-base"), dangerouslySetInnerHTML: { __html: content.displayText || "Text content" } }) }));
 }
 
-const getStyleValues$1 = (styles = {}) => {
+const getStyleValues$2 = (styles = {}) => {
     return {
         borderColor: styles.color || "#e5e7eb",
         borderStyle: styles.style || "solid",
@@ -2071,7 +2071,7 @@ const getStyleValues$1 = (styles = {}) => {
 };
 function DividerWidget({ widget }) {
     var _a, _b;
-    const styles = getStyleValues$1((_a = widget.config) === null || _a === void 0 ? void 0 : _a.styles);
+    const styles = getStyleValues$2((_a = widget.config) === null || _a === void 0 ? void 0 : _a.styles);
     const content = ((_b = widget.config) === null || _b === void 0 ? void 0 : _b.content) || {};
     return (jsxRuntimeExports.jsxs("div", { className: "w-full", style: { margin: styles.margin }, children: [jsxRuntimeExports.jsx("hr", { className: cn("w-full", content.variant === "dashed" && "border-dashed", content.variant === "dotted" && "border-dotted"), style: {
                     borderColor: styles.borderColor,
@@ -36221,7 +36221,7 @@ const parseAndUpdateChartState = (apiResponse, setChartState) => {
         console.error('Failed to parse and update chart state:', error);
     }
 };
-const getStyleValues = (styles = {}) => {
+const getStyleValues$1 = (styles = {}) => {
     const borderRadiusMap = {
         none: "0px",
         rounded: "0.375rem",
@@ -36773,7 +36773,7 @@ function CopilotKitAgent({ widget, showHeader, styles, onResetReady, widgetIds,
 }
 function AgentWidget({ widget, showHeader = true, widgetBackendUrl, onResetReady, widgetIds, datasetId, }) {
     var _a, _b;
-    const styles = getStyleValues((_a = widget.config) === null || _a === void 0 ? void 0 : _a.styles);
+    const styles = getStyleValues$1((_a = widget.config) === null || _a === void 0 ? void 0 : _a.styles);
     // Construct the runtime URL using the configurable backend URL
     const getRuntimeUrl = () => {
         var _a;
@@ -36784,6 +36784,19 @@ function AgentWidget({ widget, showHeader = true, widgetBackendUrl, onResetReady
     return (jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: jsxRuntimeExports.jsx(CopilotKit, { runtimeUrl: getRuntimeUrl(), showDevConsole: false, agent: ((_b = widget.config) === null || _b === void 0 ? void 0 : _b.agentName) || "widget_assistant", children: jsxRuntimeExports.jsx(CopilotKitAgent, { widget: widget, showHeader: showHeader, styles: styles, onResetReady: onResetReady, widgetIds: widgetIds, widgetBackendUrl: widgetBackendUrl, datasetId: datasetId }) }) }));
 }
 
+const getStyleValues = (styles = {}) => {
+    (styles.borderRadius || "rounded");
+    return {
+    // backgroundColor: styles.backgroundColor || "10px",
+    };
+};
+function SpacerWidget({ widget }) {
+    var _a, _b;
+    const styles = getStyleValues((_a = widget.config) === null || _a === void 0 ? void 0 : _a.styles);
+    ((_b = widget.config) === null || _b === void 0 ? void 0 : _b.content) || {};
+    return (jsxRuntimeExports.jsx("div", { className: "w-full", style: styles }));
+}
+
 function WidgetRenderer({ widget, isTemplate = false, onConfigUpdate, widgetBackendUrl, onResetReady, widgetIds, datasetId, }) {
     const handleConfigUpdate = (config) => {
         if (onConfigUpdate) {
@@ -36801,6 +36814,8 @@ function WidgetRenderer({ widget, isTemplate = false, onConfigUpdate, widgetBack
                 return jsxRuntimeExports.jsx(FooterWidget, { widget: widget, showHeader: false });
             case "text":
                 return jsxRuntimeExports.jsx(TextWidget, { widget: widget, showHeader: false });
+            case "spacer":
+                return jsxRuntimeExports.jsx(SpacerWidget, { widget: widget, showHeader: false });
             case "divider":
                 return jsxRuntimeExports.jsx(DividerWidget, { widget: widget, showHeader: false });
             case "facet":
@@ -36963,6 +36978,13 @@ function AddWidgetDialog({ isOpen, onClose, addWidgetFn, defaultAgentName = "adk
             description: 'Add headings or paragraphs to your dashboard',
             configRequired: false
         },
+        {
+            type: 'spacer',
+            title: 'Spacer Widget',
+            icon: AlignVerticalSpaceAround,
+            description: 'Add empty space to adjust layout and improve visual balance',
+            configRequired: false
+        },
         {
             type: 'series-bar-chart',
             title: 'Bar Chart Widget',
@@ -37491,7 +37513,7 @@ function WidgetDashboard({ pageId, isEditing, selectedWidget = null, onWidgetSel
             w: widget.width,
             h: widget.height,
             minW: 0,
-            minH: 0,
+            minH: widget.minH,
         }));
         // Create a grid map to track occupied spaces
         const gridMap = [];
@@ -37551,7 +37573,8 @@ function WidgetDashboard({ pageId, isEditing, selectedWidget = null, onWidgetSel
                 'bar-chart': 'Bar Chart Widget',
                 'pie-chart': 'Pie Chart Widget',
                 'chatbot': 'Chatbot Widget',
-                'text': 'Text Widget'
+                'text': 'Text Widget',
+                'spacer': 'Spacer Widget'
             };
             widgetTypeConfig = {
                 type: widgetType,
@@ -37578,7 +37601,7 @@ function WidgetDashboard({ pageId, isEditing, selectedWidget = null, onWidgetSel
                 config: config ? Object.assign(Object.assign({}, config), { isFirstLoad: true }) : { isFirstLoad: true },
                 is_draggable: true,
                 is_resizable: true,
-                minH: widgetType === "text" ? widgetTypeConfig.defaultSize.h : undefined,
+                minH: widgetType === "text" ? widgetTypeConfig.defaultSize.h : 1,
                 maxH: widgetType === "text" ? widgetTypeConfig.defaultSize.h : undefined,
                 page_id: pageId,
             };
@@ -37622,7 +37645,7 @@ function WidgetDashboard({ pageId, isEditing, selectedWidget = null, onWidgetSel
                     ? (isEditing ? widget.height : Math.max(widget.height - 1, 1))
                     : widget.height,
                 minW: 0,
-                minH: isText ? widget.height : 0,
+                minH: isText ? widget.height : 1,
                 maxH: isText ? widget.height : undefined,
                 isResizable: isEditing,
                 resizeHandles: isText
@@ -37652,8 +37675,8 @@ function WidgetDashboard({ pageId, isEditing, selectedWidget = null, onWidgetSel
                     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) => {
                         var _a, _b;
-                        return (jsxRuntimeExports.jsxs("div", { className: `${w.type === "text" ? `${((_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-20' : 'pb-14'}`} overflow-hidden`, children: [isEditing &&
-                                    jsxRuntimeExports.jsxs("div", { className: `flex items-center justify-end mb-4 relative ${w.type === "text" ? "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" }), 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' ? `${isEditing ? 'px-4' : ''}` : "h-full"} w-full relative`, children: [(w === null || w === void 0 ? void 0 : w.type) === "chatbot" &&
+                        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-20' : 'pb-14'}`} overflow-hidden`, 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" && 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.id), onMouseOver: () => setVisibleClearButton(true), onMouseLeave: () => setVisibleClearButton(false), 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 ? "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));
                     }) })) })] }));
 }

package/dist/index.js

@@ -2020,7 +2020,7 @@ const borderRadiusMap$2 = {
     large: "0.5rem",
     "extra-large": "0.75rem",
 };
-const getStyleValues$4 = (styles = {}) => {
+const getStyleValues$5 = (styles = {}) => {
     return {
         backgroundColor: styles.backgroundColor || "transparent",
         borderRadius: borderRadiusMap$2[styles.borderRadius || "rounded"],
@@ -2033,7 +2033,7 @@ const getStyleValues$4 = (styles = {}) => {
 };
 function HeaderWidget({ widget }) {
     var _a, _b;
-    const styles = getStyleValues$4((_a = widget.config) === null || _a === void 0 ? void 0 : _a.styles);
+    const styles = getStyleValues$5((_a = widget.config) === null || _a === void 0 ? void 0 : _a.styles);
     const content = ((_b = widget.config) === null || _b === void 0 ? void 0 : _b.content) || {};
     return (jsxRuntimeExports.jsx("div", { className: "w-full", style: styles, children: jsxRuntimeExports.jsxs("div", { className: cn("flex items-center justify-between"), children: [jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-3", children: [content.showLogo && content.logoUrl && (jsxRuntimeExports.jsx("img", { src: content.logoUrl, alt: "Logo", className: "h-8 w-auto" })), jsxRuntimeExports.jsx("h1", { className: cn("font-semibold", content.titleSize || "text-xl"), children: content.title || "Header" })] }), content.showRightContent && (jsxRuntimeExports.jsx("div", { className: "flex items-center gap-4", children: content.rightContent }))] }) }));
 }
@@ -2044,7 +2044,7 @@ const borderRadiusMap$1 = {
     large: "0.5rem",
     "extra-large": "0.75rem",
 };
-const getStyleValues$3 = (styles = {}) => {
+const getStyleValues$4 = (styles = {}) => {
     return {
         backgroundColor: styles.backgroundColor || "transparent",
         borderRadius: borderRadiusMap$1[styles.borderRadius || "rounded"],
@@ -2057,7 +2057,7 @@ const getStyleValues$3 = (styles = {}) => {
 };
 function FooterWidget({ widget }) {
     var _a, _b;
-    const styles = getStyleValues$3((_a = widget.config) === null || _a === void 0 ? void 0 : _a.styles);
+    const styles = getStyleValues$4((_a = widget.config) === null || _a === void 0 ? void 0 : _a.styles);
     const content = ((_b = widget.config) === null || _b === void 0 ? void 0 : _b.content) || {};
     return (jsxRuntimeExports.jsx("footer", { className: "w-full", style: styles, children: jsxRuntimeExports.jsxs("div", { className: cn("flex items-center", content.layout === "centered" ? "justify-center" : "justify-between"), children: [jsxRuntimeExports.jsx("div", { className: "text-sm", children: content.leftContent || "© 2024 Your Company" }), content.showCenterContent && (jsxRuntimeExports.jsx("div", { className: "text-sm", children: content.centerContent })), content.showRightContent && (jsxRuntimeExports.jsx("div", { className: "flex items-center gap-4 text-sm", children: content.rightContent }))] }) }));
 }
@@ -2068,7 +2068,7 @@ const borderRadiusMap = {
     large: "0.5rem",
     "extra-large": "0.75rem",
 };
-const getStyleValues$2 = (styles = {}) => {
+const getStyleValues$3 = (styles = {}) => {
     const borderRadius = (styles.borderRadius || "rounded");
     return {
         backgroundColor: styles.backgroundColor || "transparent",
@@ -2083,12 +2083,12 @@ const getStyleValues$2 = (styles = {}) => {
 };
 function TextWidget({ widget }) {
     var _a, _b;
-    const styles = getStyleValues$2((_a = widget.config) === null || _a === void 0 ? void 0 : _a.styles);
+    const styles = getStyleValues$3((_a = widget.config) === null || _a === void 0 ? void 0 : _a.styles);
     const content = ((_b = widget.config) === null || _b === void 0 ? void 0 : _b.content) || {};
     return (jsxRuntimeExports.jsx("div", { className: "w-full", style: styles, children: jsxRuntimeExports.jsx("div", { className: cn("prose max-w-none", content.blockType === "heading-1" && "text-[24px] font-bold", content.blockType === "heading-2" && "text-[22px] font-bold", content.blockType === "heading-3" && "text-[18px] font-bold", content.blockType === "paragraph" && "text-base"), dangerouslySetInnerHTML: { __html: content.displayText || "Text content" } }) }));
 }
 
-const getStyleValues$1 = (styles = {}) => {
+const getStyleValues$2 = (styles = {}) => {
     return {
         borderColor: styles.color || "#e5e7eb",
         borderStyle: styles.style || "solid",
@@ -2098,7 +2098,7 @@ const getStyleValues$1 = (styles = {}) => {
 };
 function DividerWidget({ widget }) {
     var _a, _b;
-    const styles = getStyleValues$1((_a = widget.config) === null || _a === void 0 ? void 0 : _a.styles);
+    const styles = getStyleValues$2((_a = widget.config) === null || _a === void 0 ? void 0 : _a.styles);
     const content = ((_b = widget.config) === null || _b === void 0 ? void 0 : _b.content) || {};
     return (jsxRuntimeExports.jsxs("div", { className: "w-full", style: { margin: styles.margin }, children: [jsxRuntimeExports.jsx("hr", { className: cn("w-full", content.variant === "dashed" && "border-dashed", content.variant === "dotted" && "border-dotted"), style: {
                     borderColor: styles.borderColor,
@@ -36248,7 +36248,7 @@ const parseAndUpdateChartState = (apiResponse, setChartState) => {
         console.error('Failed to parse and update chart state:', error);
     }
 };
-const getStyleValues = (styles = {}) => {
+const getStyleValues$1 = (styles = {}) => {
     const borderRadiusMap = {
         none: "0px",
         rounded: "0.375rem",
@@ -36800,7 +36800,7 @@ function CopilotKitAgent({ widget, showHeader, styles, onResetReady, widgetIds,
 }
 function AgentWidget({ widget, showHeader = true, widgetBackendUrl, onResetReady, widgetIds, datasetId, }) {
     var _a, _b;
-    const styles = getStyleValues((_a = widget.config) === null || _a === void 0 ? void 0 : _a.styles);
+    const styles = getStyleValues$1((_a = widget.config) === null || _a === void 0 ? void 0 : _a.styles);
     // Construct the runtime URL using the configurable backend URL
     const getRuntimeUrl = () => {
         var _a;
@@ -36811,6 +36811,19 @@ function AgentWidget({ widget, showHeader = true, widgetBackendUrl, onResetReady
     return (jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: 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(CopilotKitAgent, { widget: widget, showHeader: showHeader, styles: styles, onResetReady: onResetReady, widgetIds: widgetIds, widgetBackendUrl: widgetBackendUrl, datasetId: datasetId }) }) }));
 }
 
+const getStyleValues = (styles = {}) => {
+    (styles.borderRadius || "rounded");
+    return {
+    // backgroundColor: styles.backgroundColor || "10px",
+    };
+};
+function SpacerWidget({ widget }) {
+    var _a, _b;
+    const styles = getStyleValues((_a = widget.config) === null || _a === void 0 ? void 0 : _a.styles);
+    ((_b = widget.config) === null || _b === void 0 ? void 0 : _b.content) || {};
+    return (jsxRuntimeExports.jsx("div", { className: "w-full", style: styles }));
+}
+
 function WidgetRenderer({ widget, isTemplate = false, onConfigUpdate, widgetBackendUrl, onResetReady, widgetIds, datasetId, }) {
     const handleConfigUpdate = (config) => {
         if (onConfigUpdate) {
@@ -36828,6 +36841,8 @@ function WidgetRenderer({ widget, isTemplate = false, onConfigUpdate, widgetBack
                 return jsxRuntimeExports.jsx(FooterWidget, { widget: widget, showHeader: false });
             case "text":
                 return jsxRuntimeExports.jsx(TextWidget, { widget: widget, showHeader: false });
+            case "spacer":
+                return jsxRuntimeExports.jsx(SpacerWidget, { widget: widget, showHeader: false });
             case "divider":
                 return jsxRuntimeExports.jsx(DividerWidget, { widget: widget, showHeader: false });
             case "facet":
@@ -36990,6 +37005,13 @@ function AddWidgetDialog({ isOpen, onClose, addWidgetFn, defaultAgentName = "adk
             description: 'Add headings or paragraphs to your dashboard',
             configRequired: false
         },
+        {
+            type: 'spacer',
+            title: 'Spacer Widget',
+            icon: lucideReact.AlignVerticalSpaceAround,
+            description: 'Add empty space to adjust layout and improve visual balance',
+            configRequired: false
+        },
         {
             type: 'series-bar-chart',
             title: 'Bar Chart Widget',
@@ -37518,7 +37540,7 @@ function WidgetDashboard({ pageId, isEditing, selectedWidget = null, onWidgetSel
             w: widget.width,
             h: widget.height,
             minW: 0,
-            minH: 0,
+            minH: widget.minH,
         }));
         // Create a grid map to track occupied spaces
         const gridMap = [];
@@ -37578,7 +37600,8 @@ function WidgetDashboard({ pageId, isEditing, selectedWidget = null, onWidgetSel
                 'bar-chart': 'Bar Chart Widget',
                 'pie-chart': 'Pie Chart Widget',
                 'chatbot': 'Chatbot Widget',
-                'text': 'Text Widget'
+                'text': 'Text Widget',
+                'spacer': 'Spacer Widget'
             };
             widgetTypeConfig = {
                 type: widgetType,
@@ -37605,7 +37628,7 @@ function WidgetDashboard({ pageId, isEditing, selectedWidget = null, onWidgetSel
                 config: config ? Object.assign(Object.assign({}, config), { isFirstLoad: true }) : { isFirstLoad: true },
                 is_draggable: true,
                 is_resizable: true,
-                minH: widgetType === "text" ? widgetTypeConfig.defaultSize.h : undefined,
+                minH: widgetType === "text" ? widgetTypeConfig.defaultSize.h : 1,
                 maxH: widgetType === "text" ? widgetTypeConfig.defaultSize.h : undefined,
                 page_id: pageId,
             };
@@ -37649,7 +37672,7 @@ function WidgetDashboard({ pageId, isEditing, selectedWidget = null, onWidgetSel
                     ? (isEditing ? widget.height : Math.max(widget.height - 1, 1))
                     : widget.height,
                 minW: 0,
-                minH: isText ? widget.height : 0,
+                minH: isText ? widget.height : 1,
                 maxH: isText ? widget.height : undefined,
                 isResizable: isEditing,
                 resizeHandles: isText
@@ -37679,8 +37702,8 @@ function WidgetDashboard({ pageId, isEditing, selectedWidget = null, onWidgetSel
                     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) => {
                         var _a, _b;
-                        return (jsxRuntimeExports.jsxs("div", { className: `${w.type === "text" ? `${((_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-20' : 'pb-14'}`} overflow-hidden`, children: [isEditing &&
-                                    jsxRuntimeExports.jsxs("div", { className: `flex items-center justify-end mb-4 relative ${w.type === "text" ? "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" }), 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' ? `${isEditing ? 'px-4' : ''}` : "h-full"} w-full relative`, children: [(w === null || w === void 0 ? void 0 : w.type) === "chatbot" &&
+                        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-20' : 'pb-14'}`} overflow-hidden`, 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" && 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.id), onMouseOver: () => setVisibleClearButton(true), onMouseLeave: () => setVisibleClearButton(false), 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 ? "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));
                     }) })) })] }));
 }

package/package.json

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