dp-widgets-framework 1.2.0 → 1.2.2

package/dist/index.esm.js

@@ -1584,7 +1584,7 @@ const alertVariants = cva("relative w-full rounded-lg border p-4 [&>svg~*]:pl-7
     variants: {
         variant: {
             default: "bg-background text-foreground",
-            destructive: "border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive",
+            destructive: "border-destructive/50 text-destructive [&>svg]:text-destructive",
         },
     },
     defaultVariants: {
@@ -2100,20 +2100,6 @@ function shuffleColors(colors, count) {
     }
     return shuffled.slice(0, count);
 }
-function shuffleColorsWithPriority(colors, count, priorityColors = []) {
-    const available = [...colors];
-    priorityColors.forEach(c => {
-        const idx = available.indexOf(c);
-        if (idx > -1)
-            available.splice(idx, 1);
-    });
-    for (let i = available.length - 1; i > 0; i--) {
-        const j = Math.floor(Math.random() * (i + 1));
-        [available[i], available[j]] = [available[j], available[i]];
-    }
-    const finalColors = [...priorityColors, ...available];
-    return finalColors.slice(0, count);
-}
 function getBorderRadiusValue(value) {
     switch (value) {
         case "none":
@@ -15403,16 +15389,16 @@ function DataGrid({ title, data, className }) {
     const renderGroupedTable = () => {
         if (!(grouping === null || grouping === void 0 ? void 0 : grouping.sections))
             return null;
-        return (jsxRuntimeExports.jsxs("table", { className: "w-full border-collapse", children: [jsxRuntimeExports.jsx("thead", { children: jsxRuntimeExports.jsxs("tr", { className: "border-b border-gray-200 dark:border-gray-700", children: [jsxRuntimeExports.jsx("th", { className: "px-4 py-3 text-left text-sm font-medium text-gray-900 dark:text-gray-100 bg-gray-50 dark:bg-gray-800 w-8" }), columns.map((column, index) => (jsxRuntimeExports.jsx("th", { className: "px-4 py-3 text-left text-sm font-medium text-gray-900 dark:text-gray-100 bg-gray-50 dark:bg-gray-800", children: column }, index)))] }) }), jsxRuntimeExports.jsx("tbody", { children: grouping.sections.map((section, sectionIndex) => {
+        return (jsxRuntimeExports.jsxs("table", { className: "w-full border-collapse", children: [jsxRuntimeExports.jsx("thead", { children: jsxRuntimeExports.jsxs("tr", { className: "border-b border-gray-200", children: [jsxRuntimeExports.jsx("th", { className: "px-4 py-3 text-left text-sm font-medium text-gray-900 bg-gray-50 w-8" }), columns.map((column, index) => (jsxRuntimeExports.jsx("th", { className: "px-4 py-3 text-left text-sm font-medium text-gray-900 bg-gray-50", children: column }, index)))] }) }), jsxRuntimeExports.jsx("tbody", { children: grouping.sections.map((section, sectionIndex) => {
                         const isExpanded = expandedGroups.has(section.group_value);
-                        return (jsxRuntimeExports.jsxs(React__default.Fragment, { children: [jsxRuntimeExports.jsxs("tr", { className: "bg-blue-50 dark:bg-blue-900/30 border-b border-gray-200 dark:border-gray-700", children: [jsxRuntimeExports.jsx("td", { className: "px-4 py-3", children: section.collapsible && (jsxRuntimeExports.jsx("button", { onClick: () => toggleGroup(section.group_value), className: "flex items-center justify-center w-6 h-6 hover:bg-blue-100 dark:hover:bg-blue-800 rounded transition-colors", "aria-label": isExpanded ? "Collapse group" : "Expand group", children: isExpanded ? (jsxRuntimeExports.jsx(ChevronDown, { className: "w-4 h-4 text-blue-600 dark:text-blue-400" })) : (jsxRuntimeExports.jsx(ChevronRight, { className: "w-4 h-4 text-blue-600 dark:text-blue-400" })) })) }), jsxRuntimeExports.jsx("td", { colSpan: columns.length, className: "px-4 py-3 text-sm font-semibold text-blue-900 dark:text-blue-100", children: jsxRuntimeExports.jsx("div", { className: "flex items-center justify-between", children: jsxRuntimeExports.jsxs("span", { children: [section.title, ": ", section.group_value, " (", section.row_count, " row", section.row_count !== 1 ? "s" : "", ")"] }) }) })] }), (!section.collapsible || isExpanded) && section.rows.map((row, rowIndex) => (jsxRuntimeExports.jsxs("tr", { className: `border-b border-gray-200 dark:border-gray-700 ${rowIndex % 2 === 0
-                                        ? "bg-white dark:bg-gray-900"
-                                        : "bg-gray-50 dark:bg-gray-800"} hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors`, children: [jsxRuntimeExports.jsx("td", { className: "px-4 py-3" }), row.map((cell, cellIndex) => (jsxRuntimeExports.jsx("td", { className: "px-4 py-3 text-sm text-gray-900 dark:text-gray-100", children: cell !== null && cell !== undefined ? String(cell) : "—" }, cellIndex)))] }, `${sectionIndex}-${rowIndex}`)))] }, `section-${sectionIndex}`));
+                        return (jsxRuntimeExports.jsxs(React__default.Fragment, { children: [jsxRuntimeExports.jsxs("tr", { className: "bg-blue-50 border-b border-gray-200", children: [jsxRuntimeExports.jsx("td", { className: "px-4 py-3", children: section.collapsible && (jsxRuntimeExports.jsx("button", { onClick: () => toggleGroup(section.group_value), className: "flex items-center justify-center w-6 h-6 hover:bg-blue-100 rounded transition-colors", "aria-label": isExpanded ? "Collapse group" : "Expand group", children: isExpanded ? (jsxRuntimeExports.jsx(ChevronDown, { className: "w-4 h-4 text-blue-600" })) : (jsxRuntimeExports.jsx(ChevronRight, { className: "w-4 h-4 text-blue-600" })) })) }), jsxRuntimeExports.jsx("td", { colSpan: columns.length, className: "px-4 py-3 text-sm font-semibold text-blue-900", children: jsxRuntimeExports.jsx("div", { className: "flex items-center justify-between", children: jsxRuntimeExports.jsxs("span", { children: [section.title, ": ", section.group_value, " (", section.row_count, " row", section.row_count !== 1 ? "s" : "", ")"] }) }) })] }), (!section.collapsible || isExpanded) && section.rows.map((row, rowIndex) => (jsxRuntimeExports.jsxs("tr", { className: `border-b border-gray-200 ${rowIndex % 2 === 0
+                                        ? "bg-white"
+                                        : "bg-gray-50"} hover:bg-gray-100 transition-colors`, children: [jsxRuntimeExports.jsx("td", { className: "px-4 py-3" }), row.map((cell, cellIndex) => (jsxRuntimeExports.jsx("td", { className: "px-4 py-3 text-sm text-gray-900", children: cell !== null && cell !== undefined ? String(cell) : "—" }, cellIndex)))] }, `${sectionIndex}-${rowIndex}`)))] }, `section-${sectionIndex}`));
                     }) })] }));
     };
-    const renderRegularTable = () => (jsxRuntimeExports.jsxs("table", { className: "w-full border-collapse", children: [jsxRuntimeExports.jsx("thead", { children: jsxRuntimeExports.jsx("tr", { className: "border-b border-gray-200 dark:border-gray-700", children: columns.map((column, index) => (jsxRuntimeExports.jsx("th", { className: "px-4 py-3 text-left text-sm font-medium text-gray-900 dark:text-gray-100 bg-gray-50 dark:bg-gray-800", children: column }, index))) }) }), jsxRuntimeExports.jsx("tbody", { children: rows.map((row, rowIndex) => (jsxRuntimeExports.jsx("tr", { className: `border-b border-gray-200 dark:border-gray-700 ${rowIndex % 2 === 0
-                        ? "bg-white dark:bg-gray-900"
-                        : "bg-gray-50 dark:bg-gray-800"} hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors`, children: row.map((cell, cellIndex) => (jsxRuntimeExports.jsx("td", { className: "px-4 py-3 text-sm text-gray-900 dark:text-gray-100", children: cell !== null && cell !== undefined ? String(cell) : "—" }, cellIndex))) }, rowIndex))) })] }));
+    const renderRegularTable = () => (jsxRuntimeExports.jsxs("table", { className: "w-full border-collapse", children: [jsxRuntimeExports.jsx("thead", { children: jsxRuntimeExports.jsx("tr", { className: "border-b border-gray-200", children: columns.map((column, index) => (jsxRuntimeExports.jsx("th", { className: "px-4 py-3 text-left text-sm font-medium text-gray-900 bg-gray-50", children: column }, index))) }) }), jsxRuntimeExports.jsx("tbody", { children: rows.map((row, rowIndex) => (jsxRuntimeExports.jsx("tr", { className: `border-b border-gray-200 ${rowIndex % 2 === 0
+                        ? "bg-white"
+                        : "bg-gray-50"} hover:bg-gray-100 transition-colors`, children: row.map((cell, cellIndex) => (jsxRuntimeExports.jsx("td", { className: "px-4 py-3 text-sm text-gray-900", children: cell !== null && cell !== undefined ? String(cell) : "—" }, cellIndex))) }, rowIndex))) })] }));
     const getTotalRowCount = () => {
         if (grouped && (grouping === null || grouping === void 0 ? void 0 : grouping.sections)) {
             return grouping.sections.reduce((total, section) => total + section.row_count, 0);
@@ -15421,7 +15407,7 @@ function DataGrid({ title, data, className }) {
     };
     return (jsxRuntimeExports.jsxs("div", { className: `h-full flex flex-col ${className || ""}`, children: [title && (jsxRuntimeExports.jsx("div", { className: "pb-4", children: jsxRuntimeExports.jsx("h3", { className: "text-lg font-bold", style: {
                         color: "#0F172A"
-                    }, children: title }) })), jsxRuntimeExports.jsx("div", { className: "flex-1 overflow-auto", children: jsxRuntimeExports.jsx("div", { className: "min-w-full", children: grouped && grouping ? renderGroupedTable() : renderRegularTable() }) }), jsxRuntimeExports.jsx("div", { className: "pt-2 text-xs text-gray-500 dark:text-gray-400", children: grouped && grouping ? (jsxRuntimeExports.jsxs("span", { children: ["Showing ", getTotalRowCount(), " row", getTotalRowCount() !== 1 ? "s" : "", " in ", grouping.total_groups, " group", grouping.total_groups !== 1 ? "s" : "", " \u00D7 ", columns.length, " column", columns.length !== 1 ? "s" : ""] })) : (jsxRuntimeExports.jsxs("span", { children: ["Showing ", rows.length, " row", rows.length !== 1 ? "s" : "", " \u00D7 ", columns.length, " column", columns.length !== 1 ? "s" : ""] })) })] }));
+                    }, children: title }) })), jsxRuntimeExports.jsx("div", { className: "flex-1 overflow-auto", children: jsxRuntimeExports.jsx("div", { className: "min-w-full", children: grouped && grouping ? renderGroupedTable() : renderRegularTable() }) }), jsxRuntimeExports.jsx("div", { className: "pt-2 text-xs text-gray-500", children: grouped && grouping ? (jsxRuntimeExports.jsxs("span", { children: ["Showing ", getTotalRowCount(), " row", getTotalRowCount() !== 1 ? "s" : "", " in ", grouping.total_groups, " group", grouping.total_groups !== 1 ? "s" : "", " \u00D7 ", columns.length, " column", columns.length !== 1 ? "s" : ""] })) : (jsxRuntimeExports.jsxs("span", { children: ["Showing ", rows.length, " row", rows.length !== 1 ? "s" : "", " \u00D7 ", columns.length, " column", columns.length !== 1 ? "s" : ""] })) })] }));
 }
 
 function ok$1() {}
@@ -36079,7 +36065,7 @@ function SummaryWidget({ title, data, metadata, className }) {
     }
     return (jsxRuntimeExports.jsxs("div", { className: `h-full flex flex-col ${className || ""}`, children: [title && (jsxRuntimeExports.jsx("div", { className: "pb-4", children: jsxRuntimeExports.jsx("h3", { className: "text-lg font-bold", style: {
                         color: "#0F172A"
-                    }, children: title }) })), jsxRuntimeExports.jsx("div", { className: "flex-1 overflow-auto space-y-4", children: jsxRuntimeExports.jsx("div", { className: "prose prose-sm max-w-none", children: jsxRuntimeExports.jsx(Markdown, { className: "text-gray-800 dark:text-gray-200", children: data.content }) }) })] }));
+                    }, children: title }) })), jsxRuntimeExports.jsx("div", { className: "flex-1 overflow-auto space-y-4", children: jsxRuntimeExports.jsx("div", { className: "prose prose-sm max-w-none", children: jsxRuntimeExports.jsx(Markdown, { className: "text-gray-800", children: data.content }) }) })] }));
 }
 
 const CHART_REFRESH_TIMEOUT = 3000;
@@ -36420,13 +36406,14 @@ function SeriesLineChartComponent({ orientation, seriesLineChartState, styles, a
     return (jsxRuntimeExports.jsx(SeriesLineChart, { orientation: orientation, title: chartTitle, data: transformedData, units: units }));
 }
 function PieChartComponent({ pieChartState, styles, appendMessage, query, isFirstLoad, widgetBackendUrl, widgetId, startLoadingTimeout, clearLoadingTimeout }) {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1;
     const hasCalledRef = useRef(false);
     const labels = ((_b = (_a = pieChartState === null || pieChartState === void 0 ? void 0 : pieChartState.pie_chart_data) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.labels) || ((_e = (_d = (_c = pieChartState === null || pieChartState === void 0 ? void 0 : pieChartState.state) === null || _c === void 0 ? void 0 : _c.pie_chart_data) === null || _d === void 0 ? void 0 : _d.data) === null || _e === void 0 ? void 0 : _e.labels) || [];
-    const values = ((_g = (_f = pieChartState === null || pieChartState === void 0 ? void 0 : pieChartState.pie_chart_data) === null || _f === void 0 ? void 0 : _f.data) === null || _g === void 0 ? void 0 : _g.values) || ((_k = (_j = (_h = pieChartState === null || pieChartState === void 0 ? void 0 : pieChartState.state) === null || _h === void 0 ? void 0 : _h.pie_chart_data) === null || _j === void 0 ? void 0 : _j.data) === null || _k === void 0 ? void 0 : _k.values) || [];
-    ((_m = (_l = pieChartState === null || pieChartState === void 0 ? void 0 : pieChartState.pie_chart_data) === null || _l === void 0 ? void 0 : _l.data) === null || _m === void 0 ? void 0 : _m.percentages) || ((_q = (_p = (_o = pieChartState === null || pieChartState === void 0 ? void 0 : pieChartState.state) === null || _o === void 0 ? void 0 : _o.pie_chart_data) === null || _p === void 0 ? void 0 : _p.data) === null || _q === void 0 ? void 0 : _q.percentages) || [];
-    const chartTitle = ((_r = pieChartState === null || pieChartState === void 0 ? void 0 : pieChartState.pie_chart_data) === null || _r === void 0 ? void 0 : _r.title) || ((_t = (_s = pieChartState === null || pieChartState === void 0 ? void 0 : pieChartState.state) === null || _s === void 0 ? void 0 : _s.pie_chart_data) === null || _t === void 0 ? void 0 : _t.title) || "";
-    const units = ((_u = pieChartState === null || pieChartState === void 0 ? void 0 : pieChartState.pie_chart_data) === null || _u === void 0 ? void 0 : _u.units) || ((_w = (_v = pieChartState === null || pieChartState === void 0 ? void 0 : pieChartState.state) === null || _v === void 0 ? void 0 : _v.pie_chart_data) === null || _w === void 0 ? void 0 : _w.units) || "";
+    const colors = ((_g = (_f = pieChartState === null || pieChartState === void 0 ? void 0 : pieChartState.pie_chart_data) === null || _f === void 0 ? void 0 : _f.data) === null || _g === void 0 ? void 0 : _g.colors) || ((_k = (_j = (_h = pieChartState === null || pieChartState === void 0 ? void 0 : pieChartState.state) === null || _h === void 0 ? void 0 : _h.pie_chart_data) === null || _j === void 0 ? void 0 : _j.data) === null || _k === void 0 ? void 0 : _k.colors) || [];
+    const values = ((_m = (_l = pieChartState === null || pieChartState === void 0 ? void 0 : pieChartState.pie_chart_data) === null || _l === void 0 ? void 0 : _l.data) === null || _m === void 0 ? void 0 : _m.values) || ((_q = (_p = (_o = pieChartState === null || pieChartState === void 0 ? void 0 : pieChartState.state) === null || _o === void 0 ? void 0 : _o.pie_chart_data) === null || _p === void 0 ? void 0 : _p.data) === null || _q === void 0 ? void 0 : _q.values) || [];
+    ((_s = (_r = pieChartState === null || pieChartState === void 0 ? void 0 : pieChartState.pie_chart_data) === null || _r === void 0 ? void 0 : _r.data) === null || _s === void 0 ? void 0 : _s.percentages) || ((_v = (_u = (_t = pieChartState === null || pieChartState === void 0 ? void 0 : pieChartState.state) === null || _t === void 0 ? void 0 : _t.pie_chart_data) === null || _u === void 0 ? void 0 : _u.data) === null || _v === void 0 ? void 0 : _v.percentages) || [];
+    const chartTitle = ((_w = pieChartState === null || pieChartState === void 0 ? void 0 : pieChartState.pie_chart_data) === null || _w === void 0 ? void 0 : _w.title) || ((_y = (_x = pieChartState === null || pieChartState === void 0 ? void 0 : pieChartState.state) === null || _x === void 0 ? void 0 : _x.pie_chart_data) === null || _y === void 0 ? void 0 : _y.title) || "";
+    const units = ((_z = pieChartState === null || pieChartState === void 0 ? void 0 : pieChartState.pie_chart_data) === null || _z === void 0 ? void 0 : _z.units) || ((_1 = (_0 = pieChartState === null || pieChartState === void 0 ? void 0 : pieChartState.state) === null || _0 === void 0 ? void 0 : _0.pie_chart_data) === null || _1 === void 0 ? void 0 : _1.units) || "";
     const isEmpty = labels.length === 0 || values.length === 0;
     const handleRefresh = async () => {
         if (query) {
@@ -36456,7 +36443,7 @@ function PieChartComponent({ pieChartState, styles, appendMessage, query, isFirs
         }
     }, [isEmpty, startLoadingTimeout, clearLoadingTimeout]);
     const backgroundColors = useMemo(() => {
-        return shuffleColorsWithPriority(DEFAULT_COLORS, labels.length, ["#7B0D3F"]);
+        return shuffleColors(DEFAULT_COLORS, labels.length);
     }, [labels.length]);
     if (isEmpty) {
         return createLoadingComponent();
@@ -36467,7 +36454,7 @@ function PieChartComponent({ pieChartState, styles, appendMessage, query, isFirs
             {
                 label: chartTitle || "Data",
                 data: values,
-                backgroundColor: labels.map((_, index) => backgroundColors[index % backgroundColors.length]),
+                backgroundColor: colors || labels.map((_, index) => backgroundColors[index % backgroundColors.length]),
                 borderWidth: 0,
             },
         ],
@@ -36891,7 +36878,7 @@ function Modal({ isOpen, onClose, title, children, size = 'md', initialFocusRef,
         lg: 'max-w-lg',
         xl: 'max-w-xl',
     };
-    return (jsxRuntimeExports.jsx("div", { className: "fixed inset-0 z-50 overflow-y-auto", "aria-labelledby": "modal-title", role: "dialog", "aria-modal": "true", children: jsxRuntimeExports.jsxs("div", { className: "flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0", children: [jsxRuntimeExports.jsx("div", { className: "fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity", "aria-hidden": "true", onClick: onClose }), jsxRuntimeExports.jsx("div", { ref: modalRef, className: clsx$1(`relative transform ${noOverflowHidden ? "" : "overflow-hidden"} rounded-lg bg-white dark:bg-gray-900 text-left shadow-xl transition-all sm:my-8 sm:w-full`, sizeClasses[size]), children: jsxRuntimeExports.jsxs("div", { className: `bg-white dark:bg-gray-900 px-4 pb-4 pt-5 ${noOverflowHidden ? "rounded-lg" : ""} sm:p-6 sm:pb-4`, children: [jsxRuntimeExports.jsxs("div", { className: "flex items-start justify-between mb-4", children: [jsxRuntimeExports.jsx("h3", { id: "modal-title", className: "text-lg font-semibold text-gray-900 dark:text-white", children: title }), jsxRuntimeExports.jsx("button", { onClick: onClose, className: "p-1 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 transition-colors", "aria-label": "Close modal", children: jsxRuntimeExports.jsx(X, { className: "w-5 h-5" }) })] }), jsxRuntimeExports.jsx("div", { children: children })] }) })] }) }));
+    return (jsxRuntimeExports.jsx("div", { className: "fixed inset-0 z-50 overflow-y-auto", "aria-labelledby": "modal-title", role: "dialog", "aria-modal": "true", children: jsxRuntimeExports.jsxs("div", { className: "flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0", children: [jsxRuntimeExports.jsx("div", { className: "fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity", "aria-hidden": "true", onClick: onClose }), jsxRuntimeExports.jsx("div", { ref: modalRef, className: clsx$1(`relative transform ${noOverflowHidden ? "" : "overflow-hidden"} rounded-lg bg-white text-left shadow-xl transition-all sm:my-8 sm:w-full`, sizeClasses[size]), children: jsxRuntimeExports.jsxs("div", { className: `bg-white px-4 pb-4 pt-5 ${noOverflowHidden ? "rounded-lg" : ""} sm:p-6 sm:pb-4`, children: [jsxRuntimeExports.jsxs("div", { className: "flex items-start justify-between mb-4", children: [jsxRuntimeExports.jsx("h3", { id: "modal-title", className: "text-lg font-semibold text-gray-900", children: title }), jsxRuntimeExports.jsx("button", { onClick: onClose, className: "p-1 text-gray-400 hover:text-gray-600 transition-colors", "aria-label": "Close modal", children: jsxRuntimeExports.jsx(X, { className: "w-5 h-5" }) })] }), jsxRuntimeExports.jsx("div", { children: children })] }) })] }) }));
 }
 
 function EditWidgetDialog({ editingWidget, setWidgets, initialText, isOpen, onClose, onSubmit }) {
@@ -36950,10 +36937,10 @@ function EditWidgetDialog({ editingWidget, setWidgets, initialText, isOpen, onCl
     console.log(editingWidget, "==> editingWidget");
     return (jsxRuntimeExports.jsx(Modal, { isOpen: isOpen, onClose: onClose, title: "Edit Widget", size: "lg", 
         // initialFocusRef={inputRef}
-        noOverflowHidden: true, children: jsxRuntimeExports.jsxs("div", { children: [jsxRuntimeExports.jsx("p", { className: "text-gray-700 dark:text-gray-300", children: "Customize the widget\u2019s appearance" }), jsxRuntimeExports.jsx("div", { className: "pt-7", children: (editingWidget === null || editingWidget === void 0 ? void 0 : editingWidget.type) === "text" ?
+        noOverflowHidden: true, children: jsxRuntimeExports.jsxs("div", { children: [jsxRuntimeExports.jsx("p", { className: "text-gray-700", children: "Customize the widget\u2019s appearance" }), jsxRuntimeExports.jsx("div", { className: "pt-7", children: (editingWidget === null || editingWidget === void 0 ? void 0 : editingWidget.type) === "text" ?
                         jsxRuntimeExports.jsxs("div", { className: "flex flex-col gap-5", children: [jsxRuntimeExports.jsxs("div", { className: "flex flex-col gap-2", children: [jsxRuntimeExports.jsx("div", { className: "font-semibold", children: "Display text:" }), jsxRuntimeExports.jsx(Input, { value: displayText, onChange: (e) => setDisplayText(e.target.value), className: "h-8" })] }), jsxRuntimeExports.jsxs("div", { className: "flex flex-col gap-2", children: [jsxRuntimeExports.jsx("div", { className: "font-semibold", children: "Block type:" }), jsxRuntimeExports.jsxs(Select, { value: blockType, onValueChange: (value) => setBlockType(value), children: [jsxRuntimeExports.jsx(SelectTrigger, { className: "h-8", children: jsxRuntimeExports.jsx(SelectValue, { placeholder: "Select block type" }) }), jsxRuntimeExports.jsxs(SelectContent, { children: [jsxRuntimeExports.jsx(SelectItem, { value: "heading-1", children: "Heading 1" }), jsxRuntimeExports.jsx(SelectItem, { value: "heading-2", children: "Heading 2" }), jsxRuntimeExports.jsx(SelectItem, { value: "heading-3", children: "Heading 3" }), jsxRuntimeExports.jsx(SelectItem, { value: "paragraph", children: "Paragraph" })] })] })] }), jsxRuntimeExports.jsxs("div", { className: "flex flex-col gap-2", children: [jsxRuntimeExports.jsx("div", { className: "font-semibold", children: "Align:" }), jsxRuntimeExports.jsxs(Select, { value: alignment, onValueChange: (value) => setAlignment(value), children: [jsxRuntimeExports.jsx(SelectTrigger, { className: "h-8", children: jsxRuntimeExports.jsx(SelectValue, { placeholder: "Select block type" }) }), jsxRuntimeExports.jsxs(SelectContent, { children: [jsxRuntimeExports.jsx(SelectItem, { value: "left", children: "Left" }), jsxRuntimeExports.jsx(SelectItem, { value: "center", children: "Center" }), jsxRuntimeExports.jsx(SelectItem, { value: "right", children: "Right" }), jsxRuntimeExports.jsx(SelectItem, { value: "justify", children: "Justify" })] })] })] }), jsxRuntimeExports.jsxs("div", { className: "flex flex-col gap-2", children: [jsxRuntimeExports.jsx("div", { className: "font-semibold", children: "Divider:" }), jsxRuntimeExports.jsxs(Select, { value: divider, onValueChange: (value) => setDivider(value), children: [jsxRuntimeExports.jsx(SelectTrigger, { className: "h-8", children: jsxRuntimeExports.jsx(SelectValue, { placeholder: "No" }) }), jsxRuntimeExports.jsxs(SelectContent, { children: [jsxRuntimeExports.jsx(SelectItem, { value: "yes", children: "Yes" }), jsxRuntimeExports.jsx(SelectItem, { value: "no", children: "No" })] })] })] }), jsxRuntimeExports.jsx("div", { className: "flex justify-end", 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" }) })] })
                         :
-                            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 dark:bg-gray-800 dark:border-white", 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" }) })] }) })] }) }));
+                            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" }) {
@@ -37136,10 +37123,10 @@ function AddWidgetDialog({ isOpen, onClose, addWidgetFn, defaultAgentName = "adk
         return null;
     return (jsxRuntimeExports.jsx(Modal, { isOpen: isOpen, onClose: onClose, title: showConfigStep ? `Configure ${(_a = widgetOptions.find(w => w.type === selectedWidgetType)) === null || _a === void 0 ? void 0 : _a.title}` : 'Add Widget', size: "lg", 
         // 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 dark:text-gray-300", 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) => {
+        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 dark:hover:bg-gray-700 transition-colors text-left", children: [jsxRuntimeExports.jsx("div", { className: "flex-shrink-0 p-2 bg-primary-100 dark:bg-primary-900 rounded-md", children: jsxRuntimeExports.jsx(IconComponent, { className: "w-5 h-5 text-primary-600 dark:text-primary-400" }) }), 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 dark:text-gray-400 !mt-1", children: widget.description })] })] }, widget.type));
-                            }) })] })) : (jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsx("div", { className: "mb-2", children: jsxRuntimeExports.jsx("p", { className: "text-sm text-gray-700 dark:text-gray-400", children: selectedWidgetType === 'chatbot'
+                                return (jsxRuntimeExports.jsxs("button", { onClick: () => handleWidgetSelect(widget.type), className: "flex items-start gap-3 p-4 border border-slate-200 rounded-lg hover:bg-gray-50 transition-colors text-left", children: [jsxRuntimeExports.jsx("div", { className: "flex-shrink-0 p-2 bg-primary-100 rounded-md", children: jsxRuntimeExports.jsx(IconComponent, { className: "w-5 h-5 text-primary-600" }) }), jsxRuntimeExports.jsxs("div", { className: "min-w-0 flex-1", children: [jsxRuntimeExports.jsx("h3", { className: "font-medium text-sm", children: widget.title }), jsxRuntimeExports.jsx("p", { className: "text-xs text-gray-500 !mt-1", children: widget.description })] })] }, widget.type));
+                            }) })] })) : (jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [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.'
                                     : 'Enter a query for your chart widget:' }) }), (selectedWidgetType === 'bar-chart' || selectedWidgetType === 'series-bar-chart' || selectedWidgetType === 'series-line-chart' || selectedWidgetType === 'line-chart' || selectedWidgetType === 'pie-chart' || selectedWidgetType === 'data-grid' || selectedWidgetType === 'summary') && (jsxRuntimeExports.jsx("div", { className: "mb-6", children: jsxRuntimeExports.jsx(Textarea, { value: query, onChange: (e) => setQuery(e.target.value), placeholder: "e.g., List out the product types by its count and render it on bar chart", className: "w-full h-24 resize-none" }) })), jsxRuntimeExports.jsxs("div", { className: "flex gap-3 justify-end", children: [jsxRuntimeExports.jsx(Button, { variant: "outline", onClick: () => setShowConfigStep(false), children: "Back" }), jsxRuntimeExports.jsx(Button, { onClick: handleConfigSubmit, disabled: (selectedWidgetType === 'bar-chart' || selectedWidgetType === 'series-bar-chart' || selectedWidgetType === 'series-line-chart' || selectedWidgetType === 'line-chart' || selectedWidgetType === 'pie-chart' || selectedWidgetType === 'data-grid' || selectedWidgetType === 'summary') && !query.trim(), children: "Add Widget" })] })] })) }) }) }));
 }
@@ -37667,7 +37654,7 @@ function WidgetDashboard({ pageId, isEditing, selectedWidget = null, onWidgetSel
                         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" &&
-                                            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 dark:bg-white w-fit bg-primary-700 text-white dark:text-primary-700 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 dark:text-gray-950 dark:bg-white 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));
+                                            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

@@ -1611,7 +1611,7 @@ const alertVariants = classVarianceAuthority.cva("relative w-full rounded-lg bor
     variants: {
         variant: {
             default: "bg-background text-foreground",
-            destructive: "border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive",
+            destructive: "border-destructive/50 text-destructive [&>svg]:text-destructive",
         },
     },
     defaultVariants: {
@@ -2127,20 +2127,6 @@ function shuffleColors(colors, count) {
     }
     return shuffled.slice(0, count);
 }
-function shuffleColorsWithPriority(colors, count, priorityColors = []) {
-    const available = [...colors];
-    priorityColors.forEach(c => {
-        const idx = available.indexOf(c);
-        if (idx > -1)
-            available.splice(idx, 1);
-    });
-    for (let i = available.length - 1; i > 0; i--) {
-        const j = Math.floor(Math.random() * (i + 1));
-        [available[i], available[j]] = [available[j], available[i]];
-    }
-    const finalColors = [...priorityColors, ...available];
-    return finalColors.slice(0, count);
-}
 function getBorderRadiusValue(value) {
     switch (value) {
         case "none":
@@ -15430,16 +15416,16 @@ function DataGrid({ title, data, className }) {
     const renderGroupedTable = () => {
         if (!(grouping === null || grouping === void 0 ? void 0 : grouping.sections))
             return null;
-        return (jsxRuntimeExports.jsxs("table", { className: "w-full border-collapse", children: [jsxRuntimeExports.jsx("thead", { children: jsxRuntimeExports.jsxs("tr", { className: "border-b border-gray-200 dark:border-gray-700", children: [jsxRuntimeExports.jsx("th", { className: "px-4 py-3 text-left text-sm font-medium text-gray-900 dark:text-gray-100 bg-gray-50 dark:bg-gray-800 w-8" }), columns.map((column, index) => (jsxRuntimeExports.jsx("th", { className: "px-4 py-3 text-left text-sm font-medium text-gray-900 dark:text-gray-100 bg-gray-50 dark:bg-gray-800", children: column }, index)))] }) }), jsxRuntimeExports.jsx("tbody", { children: grouping.sections.map((section, sectionIndex) => {
+        return (jsxRuntimeExports.jsxs("table", { className: "w-full border-collapse", children: [jsxRuntimeExports.jsx("thead", { children: jsxRuntimeExports.jsxs("tr", { className: "border-b border-gray-200", children: [jsxRuntimeExports.jsx("th", { className: "px-4 py-3 text-left text-sm font-medium text-gray-900 bg-gray-50 w-8" }), columns.map((column, index) => (jsxRuntimeExports.jsx("th", { className: "px-4 py-3 text-left text-sm font-medium text-gray-900 bg-gray-50", children: column }, index)))] }) }), jsxRuntimeExports.jsx("tbody", { children: grouping.sections.map((section, sectionIndex) => {
                         const isExpanded = expandedGroups.has(section.group_value);
-                        return (jsxRuntimeExports.jsxs(React.Fragment, { children: [jsxRuntimeExports.jsxs("tr", { className: "bg-blue-50 dark:bg-blue-900/30 border-b border-gray-200 dark:border-gray-700", children: [jsxRuntimeExports.jsx("td", { className: "px-4 py-3", children: section.collapsible && (jsxRuntimeExports.jsx("button", { onClick: () => toggleGroup(section.group_value), className: "flex items-center justify-center w-6 h-6 hover:bg-blue-100 dark:hover:bg-blue-800 rounded transition-colors", "aria-label": isExpanded ? "Collapse group" : "Expand group", children: isExpanded ? (jsxRuntimeExports.jsx(lucideReact.ChevronDown, { className: "w-4 h-4 text-blue-600 dark:text-blue-400" })) : (jsxRuntimeExports.jsx(lucideReact.ChevronRight, { className: "w-4 h-4 text-blue-600 dark:text-blue-400" })) })) }), jsxRuntimeExports.jsx("td", { colSpan: columns.length, className: "px-4 py-3 text-sm font-semibold text-blue-900 dark:text-blue-100", children: jsxRuntimeExports.jsx("div", { className: "flex items-center justify-between", children: jsxRuntimeExports.jsxs("span", { children: [section.title, ": ", section.group_value, " (", section.row_count, " row", section.row_count !== 1 ? "s" : "", ")"] }) }) })] }), (!section.collapsible || isExpanded) && section.rows.map((row, rowIndex) => (jsxRuntimeExports.jsxs("tr", { className: `border-b border-gray-200 dark:border-gray-700 ${rowIndex % 2 === 0
-                                        ? "bg-white dark:bg-gray-900"
-                                        : "bg-gray-50 dark:bg-gray-800"} hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors`, children: [jsxRuntimeExports.jsx("td", { className: "px-4 py-3" }), row.map((cell, cellIndex) => (jsxRuntimeExports.jsx("td", { className: "px-4 py-3 text-sm text-gray-900 dark:text-gray-100", children: cell !== null && cell !== undefined ? String(cell) : "—" }, cellIndex)))] }, `${sectionIndex}-${rowIndex}`)))] }, `section-${sectionIndex}`));
+                        return (jsxRuntimeExports.jsxs(React.Fragment, { children: [jsxRuntimeExports.jsxs("tr", { className: "bg-blue-50 border-b border-gray-200", children: [jsxRuntimeExports.jsx("td", { className: "px-4 py-3", children: section.collapsible && (jsxRuntimeExports.jsx("button", { onClick: () => toggleGroup(section.group_value), className: "flex items-center justify-center w-6 h-6 hover:bg-blue-100 rounded transition-colors", "aria-label": isExpanded ? "Collapse group" : "Expand group", children: isExpanded ? (jsxRuntimeExports.jsx(lucideReact.ChevronDown, { className: "w-4 h-4 text-blue-600" })) : (jsxRuntimeExports.jsx(lucideReact.ChevronRight, { className: "w-4 h-4 text-blue-600" })) })) }), jsxRuntimeExports.jsx("td", { colSpan: columns.length, className: "px-4 py-3 text-sm font-semibold text-blue-900", children: jsxRuntimeExports.jsx("div", { className: "flex items-center justify-between", children: jsxRuntimeExports.jsxs("span", { children: [section.title, ": ", section.group_value, " (", section.row_count, " row", section.row_count !== 1 ? "s" : "", ")"] }) }) })] }), (!section.collapsible || isExpanded) && section.rows.map((row, rowIndex) => (jsxRuntimeExports.jsxs("tr", { className: `border-b border-gray-200 ${rowIndex % 2 === 0
+                                        ? "bg-white"
+                                        : "bg-gray-50"} hover:bg-gray-100 transition-colors`, children: [jsxRuntimeExports.jsx("td", { className: "px-4 py-3" }), row.map((cell, cellIndex) => (jsxRuntimeExports.jsx("td", { className: "px-4 py-3 text-sm text-gray-900", children: cell !== null && cell !== undefined ? String(cell) : "—" }, cellIndex)))] }, `${sectionIndex}-${rowIndex}`)))] }, `section-${sectionIndex}`));
                     }) })] }));
     };
-    const renderRegularTable = () => (jsxRuntimeExports.jsxs("table", { className: "w-full border-collapse", children: [jsxRuntimeExports.jsx("thead", { children: jsxRuntimeExports.jsx("tr", { className: "border-b border-gray-200 dark:border-gray-700", children: columns.map((column, index) => (jsxRuntimeExports.jsx("th", { className: "px-4 py-3 text-left text-sm font-medium text-gray-900 dark:text-gray-100 bg-gray-50 dark:bg-gray-800", children: column }, index))) }) }), jsxRuntimeExports.jsx("tbody", { children: rows.map((row, rowIndex) => (jsxRuntimeExports.jsx("tr", { className: `border-b border-gray-200 dark:border-gray-700 ${rowIndex % 2 === 0
-                        ? "bg-white dark:bg-gray-900"
-                        : "bg-gray-50 dark:bg-gray-800"} hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors`, children: row.map((cell, cellIndex) => (jsxRuntimeExports.jsx("td", { className: "px-4 py-3 text-sm text-gray-900 dark:text-gray-100", children: cell !== null && cell !== undefined ? String(cell) : "—" }, cellIndex))) }, rowIndex))) })] }));
+    const renderRegularTable = () => (jsxRuntimeExports.jsxs("table", { className: "w-full border-collapse", children: [jsxRuntimeExports.jsx("thead", { children: jsxRuntimeExports.jsx("tr", { className: "border-b border-gray-200", children: columns.map((column, index) => (jsxRuntimeExports.jsx("th", { className: "px-4 py-3 text-left text-sm font-medium text-gray-900 bg-gray-50", children: column }, index))) }) }), jsxRuntimeExports.jsx("tbody", { children: rows.map((row, rowIndex) => (jsxRuntimeExports.jsx("tr", { className: `border-b border-gray-200 ${rowIndex % 2 === 0
+                        ? "bg-white"
+                        : "bg-gray-50"} hover:bg-gray-100 transition-colors`, children: row.map((cell, cellIndex) => (jsxRuntimeExports.jsx("td", { className: "px-4 py-3 text-sm text-gray-900", children: cell !== null && cell !== undefined ? String(cell) : "—" }, cellIndex))) }, rowIndex))) })] }));
     const getTotalRowCount = () => {
         if (grouped && (grouping === null || grouping === void 0 ? void 0 : grouping.sections)) {
             return grouping.sections.reduce((total, section) => total + section.row_count, 0);
@@ -15448,7 +15434,7 @@ function DataGrid({ title, data, className }) {
     };
     return (jsxRuntimeExports.jsxs("div", { className: `h-full flex flex-col ${className || ""}`, children: [title && (jsxRuntimeExports.jsx("div", { className: "pb-4", children: jsxRuntimeExports.jsx("h3", { className: "text-lg font-bold", style: {
                         color: "#0F172A"
-                    }, children: title }) })), jsxRuntimeExports.jsx("div", { className: "flex-1 overflow-auto", children: jsxRuntimeExports.jsx("div", { className: "min-w-full", children: grouped && grouping ? renderGroupedTable() : renderRegularTable() }) }), jsxRuntimeExports.jsx("div", { className: "pt-2 text-xs text-gray-500 dark:text-gray-400", children: grouped && grouping ? (jsxRuntimeExports.jsxs("span", { children: ["Showing ", getTotalRowCount(), " row", getTotalRowCount() !== 1 ? "s" : "", " in ", grouping.total_groups, " group", grouping.total_groups !== 1 ? "s" : "", " \u00D7 ", columns.length, " column", columns.length !== 1 ? "s" : ""] })) : (jsxRuntimeExports.jsxs("span", { children: ["Showing ", rows.length, " row", rows.length !== 1 ? "s" : "", " \u00D7 ", columns.length, " column", columns.length !== 1 ? "s" : ""] })) })] }));
+                    }, children: title }) })), jsxRuntimeExports.jsx("div", { className: "flex-1 overflow-auto", children: jsxRuntimeExports.jsx("div", { className: "min-w-full", children: grouped && grouping ? renderGroupedTable() : renderRegularTable() }) }), jsxRuntimeExports.jsx("div", { className: "pt-2 text-xs text-gray-500", children: grouped && grouping ? (jsxRuntimeExports.jsxs("span", { children: ["Showing ", getTotalRowCount(), " row", getTotalRowCount() !== 1 ? "s" : "", " in ", grouping.total_groups, " group", grouping.total_groups !== 1 ? "s" : "", " \u00D7 ", columns.length, " column", columns.length !== 1 ? "s" : ""] })) : (jsxRuntimeExports.jsxs("span", { children: ["Showing ", rows.length, " row", rows.length !== 1 ? "s" : "", " \u00D7 ", columns.length, " column", columns.length !== 1 ? "s" : ""] })) })] }));
 }
 
 function ok$1() {}
@@ -36106,7 +36092,7 @@ function SummaryWidget({ title, data, metadata, className }) {
     }
     return (jsxRuntimeExports.jsxs("div", { className: `h-full flex flex-col ${className || ""}`, children: [title && (jsxRuntimeExports.jsx("div", { className: "pb-4", children: jsxRuntimeExports.jsx("h3", { className: "text-lg font-bold", style: {
                         color: "#0F172A"
-                    }, children: title }) })), jsxRuntimeExports.jsx("div", { className: "flex-1 overflow-auto space-y-4", children: jsxRuntimeExports.jsx("div", { className: "prose prose-sm max-w-none", children: jsxRuntimeExports.jsx(Markdown, { className: "text-gray-800 dark:text-gray-200", children: data.content }) }) })] }));
+                    }, children: title }) })), jsxRuntimeExports.jsx("div", { className: "flex-1 overflow-auto space-y-4", children: jsxRuntimeExports.jsx("div", { className: "prose prose-sm max-w-none", children: jsxRuntimeExports.jsx(Markdown, { className: "text-gray-800", children: data.content }) }) })] }));
 }
 
 const CHART_REFRESH_TIMEOUT = 3000;
@@ -36447,13 +36433,14 @@ function SeriesLineChartComponent({ orientation, seriesLineChartState, styles, a
     return (jsxRuntimeExports.jsx(SeriesLineChart, { orientation: orientation, title: chartTitle, data: transformedData, units: units }));
 }
 function PieChartComponent({ pieChartState, styles, appendMessage, query, isFirstLoad, widgetBackendUrl, widgetId, startLoadingTimeout, clearLoadingTimeout }) {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1;
     const hasCalledRef = React.useRef(false);
     const labels = ((_b = (_a = pieChartState === null || pieChartState === void 0 ? void 0 : pieChartState.pie_chart_data) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.labels) || ((_e = (_d = (_c = pieChartState === null || pieChartState === void 0 ? void 0 : pieChartState.state) === null || _c === void 0 ? void 0 : _c.pie_chart_data) === null || _d === void 0 ? void 0 : _d.data) === null || _e === void 0 ? void 0 : _e.labels) || [];
-    const values = ((_g = (_f = pieChartState === null || pieChartState === void 0 ? void 0 : pieChartState.pie_chart_data) === null || _f === void 0 ? void 0 : _f.data) === null || _g === void 0 ? void 0 : _g.values) || ((_k = (_j = (_h = pieChartState === null || pieChartState === void 0 ? void 0 : pieChartState.state) === null || _h === void 0 ? void 0 : _h.pie_chart_data) === null || _j === void 0 ? void 0 : _j.data) === null || _k === void 0 ? void 0 : _k.values) || [];
-    ((_m = (_l = pieChartState === null || pieChartState === void 0 ? void 0 : pieChartState.pie_chart_data) === null || _l === void 0 ? void 0 : _l.data) === null || _m === void 0 ? void 0 : _m.percentages) || ((_q = (_p = (_o = pieChartState === null || pieChartState === void 0 ? void 0 : pieChartState.state) === null || _o === void 0 ? void 0 : _o.pie_chart_data) === null || _p === void 0 ? void 0 : _p.data) === null || _q === void 0 ? void 0 : _q.percentages) || [];
-    const chartTitle = ((_r = pieChartState === null || pieChartState === void 0 ? void 0 : pieChartState.pie_chart_data) === null || _r === void 0 ? void 0 : _r.title) || ((_t = (_s = pieChartState === null || pieChartState === void 0 ? void 0 : pieChartState.state) === null || _s === void 0 ? void 0 : _s.pie_chart_data) === null || _t === void 0 ? void 0 : _t.title) || "";
-    const units = ((_u = pieChartState === null || pieChartState === void 0 ? void 0 : pieChartState.pie_chart_data) === null || _u === void 0 ? void 0 : _u.units) || ((_w = (_v = pieChartState === null || pieChartState === void 0 ? void 0 : pieChartState.state) === null || _v === void 0 ? void 0 : _v.pie_chart_data) === null || _w === void 0 ? void 0 : _w.units) || "";
+    const colors = ((_g = (_f = pieChartState === null || pieChartState === void 0 ? void 0 : pieChartState.pie_chart_data) === null || _f === void 0 ? void 0 : _f.data) === null || _g === void 0 ? void 0 : _g.colors) || ((_k = (_j = (_h = pieChartState === null || pieChartState === void 0 ? void 0 : pieChartState.state) === null || _h === void 0 ? void 0 : _h.pie_chart_data) === null || _j === void 0 ? void 0 : _j.data) === null || _k === void 0 ? void 0 : _k.colors) || [];
+    const values = ((_m = (_l = pieChartState === null || pieChartState === void 0 ? void 0 : pieChartState.pie_chart_data) === null || _l === void 0 ? void 0 : _l.data) === null || _m === void 0 ? void 0 : _m.values) || ((_q = (_p = (_o = pieChartState === null || pieChartState === void 0 ? void 0 : pieChartState.state) === null || _o === void 0 ? void 0 : _o.pie_chart_data) === null || _p === void 0 ? void 0 : _p.data) === null || _q === void 0 ? void 0 : _q.values) || [];
+    ((_s = (_r = pieChartState === null || pieChartState === void 0 ? void 0 : pieChartState.pie_chart_data) === null || _r === void 0 ? void 0 : _r.data) === null || _s === void 0 ? void 0 : _s.percentages) || ((_v = (_u = (_t = pieChartState === null || pieChartState === void 0 ? void 0 : pieChartState.state) === null || _t === void 0 ? void 0 : _t.pie_chart_data) === null || _u === void 0 ? void 0 : _u.data) === null || _v === void 0 ? void 0 : _v.percentages) || [];
+    const chartTitle = ((_w = pieChartState === null || pieChartState === void 0 ? void 0 : pieChartState.pie_chart_data) === null || _w === void 0 ? void 0 : _w.title) || ((_y = (_x = pieChartState === null || pieChartState === void 0 ? void 0 : pieChartState.state) === null || _x === void 0 ? void 0 : _x.pie_chart_data) === null || _y === void 0 ? void 0 : _y.title) || "";
+    const units = ((_z = pieChartState === null || pieChartState === void 0 ? void 0 : pieChartState.pie_chart_data) === null || _z === void 0 ? void 0 : _z.units) || ((_1 = (_0 = pieChartState === null || pieChartState === void 0 ? void 0 : pieChartState.state) === null || _0 === void 0 ? void 0 : _0.pie_chart_data) === null || _1 === void 0 ? void 0 : _1.units) || "";
     const isEmpty = labels.length === 0 || values.length === 0;
     const handleRefresh = async () => {
         if (query) {
@@ -36483,7 +36470,7 @@ function PieChartComponent({ pieChartState, styles, appendMessage, query, isFirs
         }
     }, [isEmpty, startLoadingTimeout, clearLoadingTimeout]);
     const backgroundColors = React.useMemo(() => {
-        return shuffleColorsWithPriority(DEFAULT_COLORS, labels.length, ["#7B0D3F"]);
+        return shuffleColors(DEFAULT_COLORS, labels.length);
     }, [labels.length]);
     if (isEmpty) {
         return createLoadingComponent();
@@ -36494,7 +36481,7 @@ function PieChartComponent({ pieChartState, styles, appendMessage, query, isFirs
             {
                 label: chartTitle || "Data",
                 data: values,
-                backgroundColor: labels.map((_, index) => backgroundColors[index % backgroundColors.length]),
+                backgroundColor: colors || labels.map((_, index) => backgroundColors[index % backgroundColors.length]),
                 borderWidth: 0,
             },
         ],
@@ -36918,7 +36905,7 @@ function Modal({ isOpen, onClose, title, children, size = 'md', initialFocusRef,
         lg: 'max-w-lg',
         xl: 'max-w-xl',
     };
-    return (jsxRuntimeExports.jsx("div", { className: "fixed inset-0 z-50 overflow-y-auto", "aria-labelledby": "modal-title", role: "dialog", "aria-modal": "true", children: jsxRuntimeExports.jsxs("div", { className: "flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0", children: [jsxRuntimeExports.jsx("div", { className: "fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity", "aria-hidden": "true", onClick: onClose }), jsxRuntimeExports.jsx("div", { ref: modalRef, className: clsx(`relative transform ${noOverflowHidden ? "" : "overflow-hidden"} rounded-lg bg-white dark:bg-gray-900 text-left shadow-xl transition-all sm:my-8 sm:w-full`, sizeClasses[size]), children: jsxRuntimeExports.jsxs("div", { className: `bg-white dark:bg-gray-900 px-4 pb-4 pt-5 ${noOverflowHidden ? "rounded-lg" : ""} sm:p-6 sm:pb-4`, children: [jsxRuntimeExports.jsxs("div", { className: "flex items-start justify-between mb-4", children: [jsxRuntimeExports.jsx("h3", { id: "modal-title", className: "text-lg font-semibold text-gray-900 dark:text-white", children: title }), jsxRuntimeExports.jsx("button", { onClick: onClose, className: "p-1 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 transition-colors", "aria-label": "Close modal", children: jsxRuntimeExports.jsx(lucideReact.X, { className: "w-5 h-5" }) })] }), jsxRuntimeExports.jsx("div", { children: children })] }) })] }) }));
+    return (jsxRuntimeExports.jsx("div", { className: "fixed inset-0 z-50 overflow-y-auto", "aria-labelledby": "modal-title", role: "dialog", "aria-modal": "true", children: jsxRuntimeExports.jsxs("div", { className: "flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0", children: [jsxRuntimeExports.jsx("div", { className: "fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity", "aria-hidden": "true", onClick: onClose }), jsxRuntimeExports.jsx("div", { ref: modalRef, className: clsx(`relative transform ${noOverflowHidden ? "" : "overflow-hidden"} rounded-lg bg-white text-left shadow-xl transition-all sm:my-8 sm:w-full`, sizeClasses[size]), children: jsxRuntimeExports.jsxs("div", { className: `bg-white px-4 pb-4 pt-5 ${noOverflowHidden ? "rounded-lg" : ""} sm:p-6 sm:pb-4`, children: [jsxRuntimeExports.jsxs("div", { className: "flex items-start justify-between mb-4", children: [jsxRuntimeExports.jsx("h3", { id: "modal-title", className: "text-lg font-semibold text-gray-900", children: title }), jsxRuntimeExports.jsx("button", { onClick: onClose, className: "p-1 text-gray-400 hover:text-gray-600 transition-colors", "aria-label": "Close modal", children: jsxRuntimeExports.jsx(lucideReact.X, { className: "w-5 h-5" }) })] }), jsxRuntimeExports.jsx("div", { children: children })] }) })] }) }));
 }
 
 function EditWidgetDialog({ editingWidget, setWidgets, initialText, isOpen, onClose, onSubmit }) {
@@ -36977,10 +36964,10 @@ function EditWidgetDialog({ editingWidget, setWidgets, initialText, isOpen, onCl
     console.log(editingWidget, "==> editingWidget");
     return (jsxRuntimeExports.jsx(Modal, { isOpen: isOpen, onClose: onClose, title: "Edit Widget", size: "lg", 
         // initialFocusRef={inputRef}
-        noOverflowHidden: true, children: jsxRuntimeExports.jsxs("div", { children: [jsxRuntimeExports.jsx("p", { className: "text-gray-700 dark:text-gray-300", children: "Customize the widget\u2019s appearance" }), jsxRuntimeExports.jsx("div", { className: "pt-7", children: (editingWidget === null || editingWidget === void 0 ? void 0 : editingWidget.type) === "text" ?
+        noOverflowHidden: true, children: jsxRuntimeExports.jsxs("div", { children: [jsxRuntimeExports.jsx("p", { className: "text-gray-700", children: "Customize the widget\u2019s appearance" }), jsxRuntimeExports.jsx("div", { className: "pt-7", children: (editingWidget === null || editingWidget === void 0 ? void 0 : editingWidget.type) === "text" ?
                         jsxRuntimeExports.jsxs("div", { className: "flex flex-col gap-5", children: [jsxRuntimeExports.jsxs("div", { className: "flex flex-col gap-2", children: [jsxRuntimeExports.jsx("div", { className: "font-semibold", children: "Display text:" }), jsxRuntimeExports.jsx(Input, { value: displayText, onChange: (e) => setDisplayText(e.target.value), className: "h-8" })] }), jsxRuntimeExports.jsxs("div", { className: "flex flex-col gap-2", children: [jsxRuntimeExports.jsx("div", { className: "font-semibold", children: "Block type:" }), jsxRuntimeExports.jsxs(Select, { value: blockType, onValueChange: (value) => setBlockType(value), children: [jsxRuntimeExports.jsx(SelectTrigger, { className: "h-8", children: jsxRuntimeExports.jsx(SelectValue, { placeholder: "Select block type" }) }), jsxRuntimeExports.jsxs(SelectContent, { children: [jsxRuntimeExports.jsx(SelectItem, { value: "heading-1", children: "Heading 1" }), jsxRuntimeExports.jsx(SelectItem, { value: "heading-2", children: "Heading 2" }), jsxRuntimeExports.jsx(SelectItem, { value: "heading-3", children: "Heading 3" }), jsxRuntimeExports.jsx(SelectItem, { value: "paragraph", children: "Paragraph" })] })] })] }), jsxRuntimeExports.jsxs("div", { className: "flex flex-col gap-2", children: [jsxRuntimeExports.jsx("div", { className: "font-semibold", children: "Align:" }), jsxRuntimeExports.jsxs(Select, { value: alignment, onValueChange: (value) => setAlignment(value), children: [jsxRuntimeExports.jsx(SelectTrigger, { className: "h-8", children: jsxRuntimeExports.jsx(SelectValue, { placeholder: "Select block type" }) }), jsxRuntimeExports.jsxs(SelectContent, { children: [jsxRuntimeExports.jsx(SelectItem, { value: "left", children: "Left" }), jsxRuntimeExports.jsx(SelectItem, { value: "center", children: "Center" }), jsxRuntimeExports.jsx(SelectItem, { value: "right", children: "Right" }), jsxRuntimeExports.jsx(SelectItem, { value: "justify", children: "Justify" })] })] })] }), jsxRuntimeExports.jsxs("div", { className: "flex flex-col gap-2", children: [jsxRuntimeExports.jsx("div", { className: "font-semibold", children: "Divider:" }), jsxRuntimeExports.jsxs(Select, { value: divider, onValueChange: (value) => setDivider(value), children: [jsxRuntimeExports.jsx(SelectTrigger, { className: "h-8", children: jsxRuntimeExports.jsx(SelectValue, { placeholder: "No" }) }), jsxRuntimeExports.jsxs(SelectContent, { children: [jsxRuntimeExports.jsx(SelectItem, { value: "yes", children: "Yes" }), jsxRuntimeExports.jsx(SelectItem, { value: "no", children: "No" })] })] })] }), jsxRuntimeExports.jsx("div", { className: "flex justify-end", 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" }) })] })
                         :
-                            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 dark:bg-gray-800 dark:border-white", 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" }) })] }) })] }) }));
+                            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" }) {
@@ -37163,10 +37150,10 @@ function AddWidgetDialog({ isOpen, onClose, addWidgetFn, defaultAgentName = "adk
         return null;
     return (jsxRuntimeExports.jsx(Modal, { isOpen: isOpen, onClose: onClose, title: showConfigStep ? `Configure ${(_a = widgetOptions.find(w => w.type === selectedWidgetType)) === null || _a === void 0 ? void 0 : _a.title}` : 'Add Widget', size: "lg", 
         // 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 dark:text-gray-300", 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) => {
+        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 dark:hover:bg-gray-700 transition-colors text-left", children: [jsxRuntimeExports.jsx("div", { className: "flex-shrink-0 p-2 bg-primary-100 dark:bg-primary-900 rounded-md", children: jsxRuntimeExports.jsx(IconComponent, { className: "w-5 h-5 text-primary-600 dark:text-primary-400" }) }), 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 dark:text-gray-400 !mt-1", children: widget.description })] })] }, widget.type));
-                            }) })] })) : (jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsx("div", { className: "mb-2", children: jsxRuntimeExports.jsx("p", { className: "text-sm text-gray-700 dark:text-gray-400", children: selectedWidgetType === 'chatbot'
+                                return (jsxRuntimeExports.jsxs("button", { onClick: () => handleWidgetSelect(widget.type), className: "flex items-start gap-3 p-4 border border-slate-200 rounded-lg hover:bg-gray-50 transition-colors text-left", children: [jsxRuntimeExports.jsx("div", { className: "flex-shrink-0 p-2 bg-primary-100 rounded-md", children: jsxRuntimeExports.jsx(IconComponent, { className: "w-5 h-5 text-primary-600" }) }), jsxRuntimeExports.jsxs("div", { className: "min-w-0 flex-1", children: [jsxRuntimeExports.jsx("h3", { className: "font-medium text-sm", children: widget.title }), jsxRuntimeExports.jsx("p", { className: "text-xs text-gray-500 !mt-1", children: widget.description })] })] }, widget.type));
+                            }) })] })) : (jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [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.'
                                     : 'Enter a query for your chart widget:' }) }), (selectedWidgetType === 'bar-chart' || selectedWidgetType === 'series-bar-chart' || selectedWidgetType === 'series-line-chart' || selectedWidgetType === 'line-chart' || selectedWidgetType === 'pie-chart' || selectedWidgetType === 'data-grid' || selectedWidgetType === 'summary') && (jsxRuntimeExports.jsx("div", { className: "mb-6", children: jsxRuntimeExports.jsx(Textarea, { value: query, onChange: (e) => setQuery(e.target.value), placeholder: "e.g., List out the product types by its count and render it on bar chart", className: "w-full h-24 resize-none" }) })), jsxRuntimeExports.jsxs("div", { className: "flex gap-3 justify-end", children: [jsxRuntimeExports.jsx(Button, { variant: "outline", onClick: () => setShowConfigStep(false), children: "Back" }), jsxRuntimeExports.jsx(Button, { onClick: handleConfigSubmit, disabled: (selectedWidgetType === 'bar-chart' || selectedWidgetType === 'series-bar-chart' || selectedWidgetType === 'series-line-chart' || selectedWidgetType === 'line-chart' || selectedWidgetType === 'pie-chart' || selectedWidgetType === 'data-grid' || selectedWidgetType === 'summary') && !query.trim(), children: "Add Widget" })] })] })) }) }) }));
 }
@@ -37694,7 +37681,7 @@ function WidgetDashboard({ pageId, isEditing, selectedWidget = null, onWidgetSel
                         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" &&
-                                            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 dark:bg-white w-fit bg-primary-700 text-white dark:text-primary-700 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 dark:text-gray-950 dark:bg-white 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));
+                                            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.0",
+  "version": "1.2.2",
   "private": false,
   "publishConfig": {
     "registry": "https://registry.npmjs.org"