npm - dp-widgets-framework - Versions diffs - 1.7.6 → 1.7.8 - Mend

dp-widgets-framework 1.7.6 → 1.7.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (3) hide show

package/dist/index.js CHANGED Viewed

@@ -20,6 +20,7 @@ var runtimeClientGql = require('@copilotkit/runtime-client-gql');
 var reactCore = require('@copilotkit/react-core');
 var jsPDF = require('jspdf');
 var CheckboxPrimitive = require('@radix-ui/react-checkbox');
+var SliderPrimitive = require('@radix-ui/react-slider');
 var DialogPrimitive = require('@radix-ui/react-dialog');
 var dateFns = require('date-fns');
@@ -48,6 +49,7 @@ var SelectPrimitive__namespace = /*#__PURE__*/_interopNamespaceDefault(SelectPri
 var ScrollAreaPrimitive__namespace = /*#__PURE__*/_interopNamespaceDefault(ScrollAreaPrimitive);
 var ReactDOM__namespace = /*#__PURE__*/_interopNamespaceDefault(ReactDOM);
 var CheckboxPrimitive__namespace = /*#__PURE__*/_interopNamespaceDefault(CheckboxPrimitive);
+var SliderPrimitive__namespace = /*#__PURE__*/_interopNamespaceDefault(SliderPrimitive);
 var DialogPrimitive__namespace = /*#__PURE__*/_interopNamespaceDefault(DialogPrimitive);
 function getDefaultExportFromCjs (x) {
@@ -1457,40 +1459,40 @@ const KEYS = {
   ESCAPE: "Escape",
   TAB: "Tab"};
-var __defProp$q = Object.defineProperty;
-var __getOwnPropSymbols$q = Object.getOwnPropertySymbols;
-var __hasOwnProp$q = Object.prototype.hasOwnProperty;
-var __propIsEnum$q = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$q = (obj, key, value) => key in obj ? __defProp$q(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$q = (a, b) => {
+var __defProp$u = Object.defineProperty;
+var __getOwnPropSymbols$u = Object.getOwnPropertySymbols;
+var __hasOwnProp$u = Object.prototype.hasOwnProperty;
+var __propIsEnum$u = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$u = (obj, key, value) => key in obj ? __defProp$u(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$u = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$q.call(b, prop))
-      __defNormalProp$q(a, prop, b[prop]);
-  if (__getOwnPropSymbols$q)
-    for (var prop of __getOwnPropSymbols$q(b)) {
-      if (__propIsEnum$q.call(b, prop))
-        __defNormalProp$q(a, prop, b[prop]);
+    if (__hasOwnProp$u.call(b, prop))
+      __defNormalProp$u(a, prop, b[prop]);
+  if (__getOwnPropSymbols$u)
+    for (var prop of __getOwnPropSymbols$u(b)) {
+      if (__propIsEnum$u.call(b, prop))
+        __defNormalProp$u(a, prop, b[prop]);
     }
   return a;
 };
-var __objRest$d = (source, exclude) => {
+var __objRest$e = (source, exclude) => {
   var target = {};
   for (var prop in source)
-    if (__hasOwnProp$q.call(source, prop) && exclude.indexOf(prop) < 0)
+    if (__hasOwnProp$u.call(source, prop) && exclude.indexOf(prop) < 0)
       target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols$q)
-    for (var prop of __getOwnPropSymbols$q(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum$q.call(source, prop))
+  if (source != null && __getOwnPropSymbols$u)
+    for (var prop of __getOwnPropSymbols$u(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum$u.call(source, prop))
         target[prop] = source[prop];
     }
   return target;
 };
 const Tabs = TabsPrimitive__namespace.Root;
 const TabsList = React__namespace.forwardRef((_a, ref) => {
-  var _b = _a, { className } = _b, props = __objRest$d(_b, ["className"]);
+  var _b = _a, { className } = _b, props = __objRest$e(_b, ["className"]);
   return /* @__PURE__ */ jsxRuntimeExports.jsx(
     TabsPrimitive__namespace.List,
-    __spreadValues$q({
+    __spreadValues$u({
       ref,
       className: cn(
         "inline-flex h-10 items-center justify-center rounded-md bg-muted p-1 text-muted-foreground",
@@ -1501,10 +1503,10 @@ const TabsList = React__namespace.forwardRef((_a, ref) => {
 });
 TabsList.displayName = TabsPrimitive__namespace.List.displayName;
 const TabsTrigger = React__namespace.forwardRef((_c, ref) => {
-  var _d = _c, { className } = _d, props = __objRest$d(_d, ["className"]);
+  var _d = _c, { className } = _d, props = __objRest$e(_d, ["className"]);
   return /* @__PURE__ */ jsxRuntimeExports.jsx(
     TabsPrimitive__namespace.Trigger,
-    __spreadValues$q({
+    __spreadValues$u({
       ref,
       className: cn(
         "inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm",
@@ -1515,10 +1517,10 @@ const TabsTrigger = React__namespace.forwardRef((_c, ref) => {
 });
 TabsTrigger.displayName = TabsPrimitive__namespace.Trigger.displayName;
 const TabsContent = React__namespace.forwardRef((_e, ref) => {
-  var _f = _e, { className } = _f, props = __objRest$d(_f, ["className"]);
+  var _f = _e, { className } = _f, props = __objRest$e(_f, ["className"]);
   return /* @__PURE__ */ jsxRuntimeExports.jsx(
     TabsPrimitive__namespace.Content,
-    __spreadValues$q({
+    __spreadValues$u({
       ref,
       className: cn(
         "mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
@@ -1529,40 +1531,40 @@ const TabsContent = React__namespace.forwardRef((_e, ref) => {
 });
 TabsContent.displayName = TabsPrimitive__namespace.Content.displayName;
-var __defProp$p = Object.defineProperty;
-var __getOwnPropSymbols$p = Object.getOwnPropertySymbols;
-var __hasOwnProp$p = Object.prototype.hasOwnProperty;
-var __propIsEnum$p = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$p = (obj, key, value) => key in obj ? __defProp$p(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$p = (a, b) => {
+var __defProp$t = Object.defineProperty;
+var __getOwnPropSymbols$t = Object.getOwnPropertySymbols;
+var __hasOwnProp$t = Object.prototype.hasOwnProperty;
+var __propIsEnum$t = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$t = (obj, key, value) => key in obj ? __defProp$t(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$t = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$p.call(b, prop))
-      __defNormalProp$p(a, prop, b[prop]);
-  if (__getOwnPropSymbols$p)
-    for (var prop of __getOwnPropSymbols$p(b)) {
-      if (__propIsEnum$p.call(b, prop))
-        __defNormalProp$p(a, prop, b[prop]);
+    if (__hasOwnProp$t.call(b, prop))
+      __defNormalProp$t(a, prop, b[prop]);
+  if (__getOwnPropSymbols$t)
+    for (var prop of __getOwnPropSymbols$t(b)) {
+      if (__propIsEnum$t.call(b, prop))
+        __defNormalProp$t(a, prop, b[prop]);
     }
   return a;
 };
-var __objRest$c = (source, exclude) => {
+var __objRest$d = (source, exclude) => {
   var target = {};
   for (var prop in source)
-    if (__hasOwnProp$p.call(source, prop) && exclude.indexOf(prop) < 0)
+    if (__hasOwnProp$t.call(source, prop) && exclude.indexOf(prop) < 0)
       target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols$p)
-    for (var prop of __getOwnPropSymbols$p(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum$p.call(source, prop))
+  if (source != null && __getOwnPropSymbols$t)
+    for (var prop of __getOwnPropSymbols$t(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum$t.call(source, prop))
         target[prop] = source[prop];
     }
   return target;
 };
 const Input = React__namespace.forwardRef(
   (_a, ref) => {
-    var _b = _a, { className, type } = _b, props = __objRest$c(_b, ["className", "type"]);
+    var _b = _a, { className, type } = _b, props = __objRest$d(_b, ["className", "type"]);
     return /* @__PURE__ */ jsxRuntimeExports.jsx(
       "input",
-      __spreadValues$p({
+      __spreadValues$t({
         type,
         className: cn(
           "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-base ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
@@ -1575,30 +1577,30 @@ const Input = React__namespace.forwardRef(
 );
 Input.displayName = "Input";
-var __defProp$o = Object.defineProperty;
-var __getOwnPropSymbols$o = Object.getOwnPropertySymbols;
-var __hasOwnProp$o = Object.prototype.hasOwnProperty;
-var __propIsEnum$o = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$o = (obj, key, value) => key in obj ? __defProp$o(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$o = (a, b) => {
+var __defProp$s = Object.defineProperty;
+var __getOwnPropSymbols$s = Object.getOwnPropertySymbols;
+var __hasOwnProp$s = Object.prototype.hasOwnProperty;
+var __propIsEnum$s = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$s = (obj, key, value) => key in obj ? __defProp$s(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$s = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$o.call(b, prop))
-      __defNormalProp$o(a, prop, b[prop]);
-  if (__getOwnPropSymbols$o)
-    for (var prop of __getOwnPropSymbols$o(b)) {
-      if (__propIsEnum$o.call(b, prop))
-        __defNormalProp$o(a, prop, b[prop]);
+    if (__hasOwnProp$s.call(b, prop))
+      __defNormalProp$s(a, prop, b[prop]);
+  if (__getOwnPropSymbols$s)
+    for (var prop of __getOwnPropSymbols$s(b)) {
+      if (__propIsEnum$s.call(b, prop))
+        __defNormalProp$s(a, prop, b[prop]);
     }
   return a;
 };
-var __objRest$b = (source, exclude) => {
+var __objRest$c = (source, exclude) => {
   var target = {};
   for (var prop in source)
-    if (__hasOwnProp$o.call(source, prop) && exclude.indexOf(prop) < 0)
+    if (__hasOwnProp$s.call(source, prop) && exclude.indexOf(prop) < 0)
       target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols$o)
-    for (var prop of __getOwnPropSymbols$o(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum$o.call(source, prop))
+  if (source != null && __getOwnPropSymbols$s)
+    for (var prop of __getOwnPropSymbols$s(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum$s.call(source, prop))
         target[prop] = source[prop];
     }
   return target;
@@ -1607,10 +1609,10 @@ const labelVariants = classVarianceAuthority.cva(
   "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
 );
 const Label$1 = React__namespace.forwardRef((_a, ref) => {
-  var _b = _a, { className } = _b, props = __objRest$b(_b, ["className"]);
+  var _b = _a, { className } = _b, props = __objRest$c(_b, ["className"]);
   return /* @__PURE__ */ jsxRuntimeExports.jsx(
     LabelPrimitive__namespace.Root,
-    __spreadValues$o({
+    __spreadValues$s({
       ref,
       className: cn(labelVariants(), className)
     }, props)
@@ -1618,42 +1620,42 @@ const Label$1 = React__namespace.forwardRef((_a, ref) => {
 });
 Label$1.displayName = LabelPrimitive__namespace.Root.displayName;
-var __defProp$n = Object.defineProperty;
-var __defProps$g = Object.defineProperties;
-var __getOwnPropDescs$g = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$n = Object.getOwnPropertySymbols;
-var __hasOwnProp$n = Object.prototype.hasOwnProperty;
-var __propIsEnum$n = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$n = (obj, key, value) => key in obj ? __defProp$n(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$n = (a, b) => {
+var __defProp$r = Object.defineProperty;
+var __defProps$k = Object.defineProperties;
+var __getOwnPropDescs$k = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$r = Object.getOwnPropertySymbols;
+var __hasOwnProp$r = Object.prototype.hasOwnProperty;
+var __propIsEnum$r = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$r = (obj, key, value) => key in obj ? __defProp$r(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$r = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$n.call(b, prop))
-      __defNormalProp$n(a, prop, b[prop]);
-  if (__getOwnPropSymbols$n)
-    for (var prop of __getOwnPropSymbols$n(b)) {
-      if (__propIsEnum$n.call(b, prop))
-        __defNormalProp$n(a, prop, b[prop]);
+    if (__hasOwnProp$r.call(b, prop))
+      __defNormalProp$r(a, prop, b[prop]);
+  if (__getOwnPropSymbols$r)
+    for (var prop of __getOwnPropSymbols$r(b)) {
+      if (__propIsEnum$r.call(b, prop))
+        __defNormalProp$r(a, prop, b[prop]);
     }
   return a;
 };
-var __spreadProps$g = (a, b) => __defProps$g(a, __getOwnPropDescs$g(b));
-var __objRest$a = (source, exclude) => {
+var __spreadProps$k = (a, b) => __defProps$k(a, __getOwnPropDescs$k(b));
+var __objRest$b = (source, exclude) => {
   var target = {};
   for (var prop in source)
-    if (__hasOwnProp$n.call(source, prop) && exclude.indexOf(prop) < 0)
+    if (__hasOwnProp$r.call(source, prop) && exclude.indexOf(prop) < 0)
       target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols$n)
-    for (var prop of __getOwnPropSymbols$n(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum$n.call(source, prop))
+  if (source != null && __getOwnPropSymbols$r)
+    for (var prop of __getOwnPropSymbols$r(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum$r.call(source, prop))
         target[prop] = source[prop];
     }
   return target;
 };
 const Switch = React__namespace.forwardRef((_a, ref) => {
-  var _b = _a, { className } = _b, props = __objRest$a(_b, ["className"]);
+  var _b = _a, { className } = _b, props = __objRest$b(_b, ["className"]);
   return /* @__PURE__ */ jsxRuntimeExports.jsx(
     SwitchPrimitives__namespace.Root,
-    __spreadProps$g(__spreadValues$n({
+    __spreadProps$k(__spreadValues$r({
       className: cn(
         "peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input",
         className
@@ -1673,33 +1675,33 @@ const Switch = React__namespace.forwardRef((_a, ref) => {
 });
 Switch.displayName = SwitchPrimitives__namespace.Root.displayName;
-var __defProp$m = Object.defineProperty;
-var __defProps$f = Object.defineProperties;
-var __getOwnPropDescs$f = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$m = Object.getOwnPropertySymbols;
-var __hasOwnProp$m = Object.prototype.hasOwnProperty;
-var __propIsEnum$m = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$m = (obj, key, value) => key in obj ? __defProp$m(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$m = (a, b) => {
+var __defProp$q = Object.defineProperty;
+var __defProps$j = Object.defineProperties;
+var __getOwnPropDescs$j = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$q = Object.getOwnPropertySymbols;
+var __hasOwnProp$q = Object.prototype.hasOwnProperty;
+var __propIsEnum$q = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$q = (obj, key, value) => key in obj ? __defProp$q(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$q = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$m.call(b, prop))
-      __defNormalProp$m(a, prop, b[prop]);
-  if (__getOwnPropSymbols$m)
-    for (var prop of __getOwnPropSymbols$m(b)) {
-      if (__propIsEnum$m.call(b, prop))
-        __defNormalProp$m(a, prop, b[prop]);
+    if (__hasOwnProp$q.call(b, prop))
+      __defNormalProp$q(a, prop, b[prop]);
+  if (__getOwnPropSymbols$q)
+    for (var prop of __getOwnPropSymbols$q(b)) {
+      if (__propIsEnum$q.call(b, prop))
+        __defNormalProp$q(a, prop, b[prop]);
     }
   return a;
 };
-var __spreadProps$f = (a, b) => __defProps$f(a, __getOwnPropDescs$f(b));
-var __objRest$9 = (source, exclude) => {
+var __spreadProps$j = (a, b) => __defProps$j(a, __getOwnPropDescs$j(b));
+var __objRest$a = (source, exclude) => {
   var target = {};
   for (var prop in source)
-    if (__hasOwnProp$m.call(source, prop) && exclude.indexOf(prop) < 0)
+    if (__hasOwnProp$q.call(source, prop) && exclude.indexOf(prop) < 0)
       target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols$m)
-    for (var prop of __getOwnPropSymbols$m(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum$m.call(source, prop))
+  if (source != null && __getOwnPropSymbols$q)
+    for (var prop of __getOwnPropSymbols$q(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum$q.call(source, prop))
         target[prop] = source[prop];
     }
   return target;
@@ -1707,10 +1709,10 @@ var __objRest$9 = (source, exclude) => {
 const Select = SelectPrimitive__namespace.Root;
 const SelectValue = SelectPrimitive__namespace.Value;
 const SelectTrigger = React__namespace.forwardRef((_a, ref) => {
-  var _b = _a, { className, children } = _b, props = __objRest$9(_b, ["className", "children"]);
+  var _b = _a, { className, children } = _b, props = __objRest$a(_b, ["className", "children"]);
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(
     SelectPrimitive__namespace.Trigger,
-    __spreadProps$f(__spreadValues$m({
+    __spreadProps$j(__spreadValues$q({
       ref,
       className: cn(
         "flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
@@ -1726,10 +1728,10 @@ const SelectTrigger = React__namespace.forwardRef((_a, ref) => {
 });
 SelectTrigger.displayName = SelectPrimitive__namespace.Trigger.displayName;
 const SelectScrollUpButton = React__namespace.forwardRef((_c, ref) => {
-  var _d = _c, { className } = _d, props = __objRest$9(_d, ["className"]);
+  var _d = _c, { className } = _d, props = __objRest$a(_d, ["className"]);
   return /* @__PURE__ */ jsxRuntimeExports.jsx(
     SelectPrimitive__namespace.ScrollUpButton,
-    __spreadProps$f(__spreadValues$m({
+    __spreadProps$j(__spreadValues$q({
       ref,
       className: cn(
         "flex cursor-default items-center justify-center py-1",
@@ -1742,10 +1744,10 @@ const SelectScrollUpButton = React__namespace.forwardRef((_c, ref) => {
 });
 SelectScrollUpButton.displayName = SelectPrimitive__namespace.ScrollUpButton.displayName;
 const SelectScrollDownButton = React__namespace.forwardRef((_e, ref) => {
-  var _f = _e, { className } = _f, props = __objRest$9(_f, ["className"]);
+  var _f = _e, { className } = _f, props = __objRest$a(_f, ["className"]);
   return /* @__PURE__ */ jsxRuntimeExports.jsx(
     SelectPrimitive__namespace.ScrollDownButton,
-    __spreadProps$f(__spreadValues$m({
+    __spreadProps$j(__spreadValues$q({
       ref,
       className: cn(
         "flex cursor-default items-center justify-center py-1",
@@ -1758,10 +1760,10 @@ const SelectScrollDownButton = React__namespace.forwardRef((_e, ref) => {
 });
 SelectScrollDownButton.displayName = SelectPrimitive__namespace.ScrollDownButton.displayName;
 const SelectContent = React__namespace.forwardRef((_g, ref) => {
-  var _h = _g, { className, children, position = "popper" } = _h, props = __objRest$9(_h, ["className", "children", "position"]);
+  var _h = _g, { className, children, position = "popper" } = _h, props = __objRest$a(_h, ["className", "children", "position"]);
   return /* @__PURE__ */ jsxRuntimeExports.jsx(SelectPrimitive__namespace.Portal, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
     SelectPrimitive__namespace.Content,
-    __spreadProps$f(__spreadValues$m({
+    __spreadProps$j(__spreadValues$q({
       ref,
       className: cn(
         "relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
@@ -1789,10 +1791,10 @@ const SelectContent = React__namespace.forwardRef((_g, ref) => {
 });
 SelectContent.displayName = SelectPrimitive__namespace.Content.displayName;
 const SelectLabel = React__namespace.forwardRef((_i, ref) => {
-  var _j = _i, { className } = _j, props = __objRest$9(_j, ["className"]);
+  var _j = _i, { className } = _j, props = __objRest$a(_j, ["className"]);
   return /* @__PURE__ */ jsxRuntimeExports.jsx(
     SelectPrimitive__namespace.Label,
-    __spreadValues$m({
+    __spreadValues$q({
       ref,
       className: cn("py-1.5 pl-8 pr-2 text-sm font-semibold", className)
     }, props)
@@ -1800,10 +1802,10 @@ const SelectLabel = React__namespace.forwardRef((_i, ref) => {
 });
 SelectLabel.displayName = SelectPrimitive__namespace.Label.displayName;
 const SelectItem = React__namespace.forwardRef((_k, ref) => {
-  var _l = _k, { className, children } = _l, props = __objRest$9(_l, ["className", "children"]);
+  var _l = _k, { className, children } = _l, props = __objRest$a(_l, ["className", "children"]);
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(
     SelectPrimitive__namespace.Item,
-    __spreadProps$f(__spreadValues$m({
+    __spreadProps$j(__spreadValues$q({
       ref,
       className: cn(
         "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
@@ -1819,10 +1821,10 @@ const SelectItem = React__namespace.forwardRef((_k, ref) => {
 });
 SelectItem.displayName = SelectPrimitive__namespace.Item.displayName;
 const SelectSeparator = React__namespace.forwardRef((_m, ref) => {
-  var _n = _m, { className } = _n, props = __objRest$9(_n, ["className"]);
+  var _n = _m, { className } = _n, props = __objRest$a(_n, ["className"]);
   return /* @__PURE__ */ jsxRuntimeExports.jsx(
     SelectPrimitive__namespace.Separator,
-    __spreadValues$m({
+    __spreadValues$q({
       ref,
       className: cn("-mx-1 my-1 h-px bg-muted", className)
     }, props)
@@ -1830,42 +1832,42 @@ const SelectSeparator = React__namespace.forwardRef((_m, ref) => {
 });
 SelectSeparator.displayName = SelectPrimitive__namespace.Separator.displayName;
-var __defProp$l = Object.defineProperty;
-var __defProps$e = Object.defineProperties;
-var __getOwnPropDescs$e = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$l = Object.getOwnPropertySymbols;
-var __hasOwnProp$l = Object.prototype.hasOwnProperty;
-var __propIsEnum$l = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$l = (obj, key, value) => key in obj ? __defProp$l(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$l = (a, b) => {
+var __defProp$p = Object.defineProperty;
+var __defProps$i = Object.defineProperties;
+var __getOwnPropDescs$i = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$p = Object.getOwnPropertySymbols;
+var __hasOwnProp$p = Object.prototype.hasOwnProperty;
+var __propIsEnum$p = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$p = (obj, key, value) => key in obj ? __defProp$p(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$p = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$l.call(b, prop))
-      __defNormalProp$l(a, prop, b[prop]);
-  if (__getOwnPropSymbols$l)
-    for (var prop of __getOwnPropSymbols$l(b)) {
-      if (__propIsEnum$l.call(b, prop))
-        __defNormalProp$l(a, prop, b[prop]);
+    if (__hasOwnProp$p.call(b, prop))
+      __defNormalProp$p(a, prop, b[prop]);
+  if (__getOwnPropSymbols$p)
+    for (var prop of __getOwnPropSymbols$p(b)) {
+      if (__propIsEnum$p.call(b, prop))
+        __defNormalProp$p(a, prop, b[prop]);
     }
   return a;
 };
-var __spreadProps$e = (a, b) => __defProps$e(a, __getOwnPropDescs$e(b));
-var __objRest$8 = (source, exclude) => {
+var __spreadProps$i = (a, b) => __defProps$i(a, __getOwnPropDescs$i(b));
+var __objRest$9 = (source, exclude) => {
   var target = {};
   for (var prop in source)
-    if (__hasOwnProp$l.call(source, prop) && exclude.indexOf(prop) < 0)
+    if (__hasOwnProp$p.call(source, prop) && exclude.indexOf(prop) < 0)
       target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols$l)
-    for (var prop of __getOwnPropSymbols$l(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum$l.call(source, prop))
+  if (source != null && __getOwnPropSymbols$p)
+    for (var prop of __getOwnPropSymbols$p(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum$p.call(source, prop))
         target[prop] = source[prop];
     }
   return target;
 };
 const ScrollArea = React__namespace.forwardRef((_a, ref) => {
-  var _b = _a, { className, children } = _b, props = __objRest$8(_b, ["className", "children"]);
+  var _b = _a, { className, children } = _b, props = __objRest$9(_b, ["className", "children"]);
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(
     ScrollAreaPrimitive__namespace.Root,
-    __spreadProps$e(__spreadValues$l({
+    __spreadProps$i(__spreadValues$p({
       ref,
       className: cn("relative overflow-hidden", className)
     }, props), {
@@ -1879,10 +1881,10 @@ const ScrollArea = React__namespace.forwardRef((_a, ref) => {
 });
 ScrollArea.displayName = ScrollAreaPrimitive__namespace.Root.displayName;
 const ScrollBar = React__namespace.forwardRef((_c, ref) => {
-  var _d = _c, { className, orientation = "vertical" } = _d, props = __objRest$8(_d, ["className", "orientation"]);
+  var _d = _c, { className, orientation = "vertical" } = _d, props = __objRest$9(_d, ["className", "orientation"]);
   return /* @__PURE__ */ jsxRuntimeExports.jsx(
     ScrollAreaPrimitive__namespace.ScrollAreaScrollbar,
-    __spreadProps$e(__spreadValues$l({
+    __spreadProps$i(__spreadValues$p({
       ref,
       orientation,
       className: cn(
@@ -1898,30 +1900,30 @@ const ScrollBar = React__namespace.forwardRef((_c, ref) => {
 });
 ScrollBar.displayName = ScrollAreaPrimitive__namespace.ScrollAreaScrollbar.displayName;
-var __defProp$k = Object.defineProperty;
-var __getOwnPropSymbols$k = Object.getOwnPropertySymbols;
-var __hasOwnProp$k = Object.prototype.hasOwnProperty;
-var __propIsEnum$k = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$k = (obj, key, value) => key in obj ? __defProp$k(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$k = (a, b) => {
+var __defProp$o = Object.defineProperty;
+var __getOwnPropSymbols$o = Object.getOwnPropertySymbols;
+var __hasOwnProp$o = Object.prototype.hasOwnProperty;
+var __propIsEnum$o = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$o = (obj, key, value) => key in obj ? __defProp$o(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$o = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$k.call(b, prop))
-      __defNormalProp$k(a, prop, b[prop]);
-  if (__getOwnPropSymbols$k)
-    for (var prop of __getOwnPropSymbols$k(b)) {
-      if (__propIsEnum$k.call(b, prop))
-        __defNormalProp$k(a, prop, b[prop]);
+    if (__hasOwnProp$o.call(b, prop))
+      __defNormalProp$o(a, prop, b[prop]);
+  if (__getOwnPropSymbols$o)
+    for (var prop of __getOwnPropSymbols$o(b)) {
+      if (__propIsEnum$o.call(b, prop))
+        __defNormalProp$o(a, prop, b[prop]);
     }
   return a;
 };
-var __objRest$7 = (source, exclude) => {
+var __objRest$8 = (source, exclude) => {
   var target = {};
   for (var prop in source)
-    if (__hasOwnProp$k.call(source, prop) && exclude.indexOf(prop) < 0)
+    if (__hasOwnProp$o.call(source, prop) && exclude.indexOf(prop) < 0)
       target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols$k)
-    for (var prop of __getOwnPropSymbols$k(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum$k.call(source, prop))
+  if (source != null && __getOwnPropSymbols$o)
+    for (var prop of __getOwnPropSymbols$o(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum$o.call(source, prop))
         target[prop] = source[prop];
     }
   return target;
@@ -1953,11 +1955,11 @@ const buttonVariants = classVarianceAuthority.cva(
 );
 const Button = React__namespace.forwardRef(
   (_a, ref) => {
-    var _b = _a, { className, variant, size, asChild = false } = _b, props = __objRest$7(_b, ["className", "variant", "size", "asChild"]);
+    var _b = _a, { className, variant, size, asChild = false } = _b, props = __objRest$8(_b, ["className", "variant", "size", "asChild"]);
     const Comp = asChild ? reactSlot.Slot : "button";
     return /* @__PURE__ */ jsxRuntimeExports.jsx(
       Comp,
-      __spreadValues$k({
+      __spreadValues$o({
         className: cn(buttonVariants({ variant, size, className })),
         ref
       }, props)
@@ -1966,30 +1968,30 @@ const Button = React__namespace.forwardRef(
 );
 Button.displayName = "Button";
-var __defProp$j = Object.defineProperty;
-var __getOwnPropSymbols$j = Object.getOwnPropertySymbols;
-var __hasOwnProp$j = Object.prototype.hasOwnProperty;
-var __propIsEnum$j = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$j = (obj, key, value) => key in obj ? __defProp$j(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$j = (a, b) => {
+var __defProp$n = Object.defineProperty;
+var __getOwnPropSymbols$n = Object.getOwnPropertySymbols;
+var __hasOwnProp$n = Object.prototype.hasOwnProperty;
+var __propIsEnum$n = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$n = (obj, key, value) => key in obj ? __defProp$n(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$n = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$j.call(b, prop))
-      __defNormalProp$j(a, prop, b[prop]);
-  if (__getOwnPropSymbols$j)
-    for (var prop of __getOwnPropSymbols$j(b)) {
-      if (__propIsEnum$j.call(b, prop))
-        __defNormalProp$j(a, prop, b[prop]);
+    if (__hasOwnProp$n.call(b, prop))
+      __defNormalProp$n(a, prop, b[prop]);
+  if (__getOwnPropSymbols$n)
+    for (var prop of __getOwnPropSymbols$n(b)) {
+      if (__propIsEnum$n.call(b, prop))
+        __defNormalProp$n(a, prop, b[prop]);
     }
   return a;
 };
-var __objRest$6 = (source, exclude) => {
+var __objRest$7 = (source, exclude) => {
   var target = {};
   for (var prop in source)
-    if (__hasOwnProp$j.call(source, prop) && exclude.indexOf(prop) < 0)
+    if (__hasOwnProp$n.call(source, prop) && exclude.indexOf(prop) < 0)
       target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols$j)
-    for (var prop of __getOwnPropSymbols$j(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum$j.call(source, prop))
+  if (source != null && __getOwnPropSymbols$n)
+    for (var prop of __getOwnPropSymbols$n(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum$n.call(source, prop))
         target[prop] = source[prop];
     }
   return target;
@@ -2009,10 +2011,10 @@ const alertVariants = classVarianceAuthority.cva(
   }
 );
 const Alert = React__namespace.forwardRef((_a, ref) => {
-  var _b = _a, { className, variant } = _b, props = __objRest$6(_b, ["className", "variant"]);
+  var _b = _a, { className, variant } = _b, props = __objRest$7(_b, ["className", "variant"]);
   return /* @__PURE__ */ jsxRuntimeExports.jsx(
     "div",
-    __spreadValues$j({
+    __spreadValues$n({
       ref,
       role: "alert",
       className: cn(alertVariants({ variant }), className)
@@ -2021,10 +2023,10 @@ const Alert = React__namespace.forwardRef((_a, ref) => {
 });
 Alert.displayName = "Alert";
 const AlertTitle = React__namespace.forwardRef((_c, ref) => {
-  var _d = _c, { className } = _d, props = __objRest$6(_d, ["className"]);
+  var _d = _c, { className } = _d, props = __objRest$7(_d, ["className"]);
   return /* @__PURE__ */ jsxRuntimeExports.jsx(
     "h5",
-    __spreadValues$j({
+    __spreadValues$n({
       ref,
       className: cn("mb-1 font-medium leading-none tracking-tight", className)
     }, props)
@@ -2032,10 +2034,10 @@ const AlertTitle = React__namespace.forwardRef((_c, ref) => {
 });
 AlertTitle.displayName = "AlertTitle";
 const AlertDescription = React__namespace.forwardRef((_e, ref) => {
-  var _f = _e, { className } = _f, props = __objRest$6(_f, ["className"]);
+  var _f = _e, { className } = _f, props = __objRest$7(_f, ["className"]);
   return /* @__PURE__ */ jsxRuntimeExports.jsx(
     "div",
-    __spreadValues$j({
+    __spreadValues$n({
       ref,
       className: cn("text-sm [&_p]:leading-relaxed", className)
     }, props)
@@ -2068,25 +2070,25 @@ function CodeEditor({
   );
 }
-var __defProp$i = Object.defineProperty;
-var __defProps$d = Object.defineProperties;
-var __getOwnPropDescs$d = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$i = Object.getOwnPropertySymbols;
-var __hasOwnProp$i = Object.prototype.hasOwnProperty;
-var __propIsEnum$i = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$i = (obj, key, value) => key in obj ? __defProp$i(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$i = (a, b) => {
+var __defProp$m = Object.defineProperty;
+var __defProps$h = Object.defineProperties;
+var __getOwnPropDescs$h = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$m = Object.getOwnPropertySymbols;
+var __hasOwnProp$m = Object.prototype.hasOwnProperty;
+var __propIsEnum$m = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$m = (obj, key, value) => key in obj ? __defProp$m(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$m = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$i.call(b, prop))
-      __defNormalProp$i(a, prop, b[prop]);
-  if (__getOwnPropSymbols$i)
-    for (var prop of __getOwnPropSymbols$i(b)) {
-      if (__propIsEnum$i.call(b, prop))
-        __defNormalProp$i(a, prop, b[prop]);
+    if (__hasOwnProp$m.call(b, prop))
+      __defNormalProp$m(a, prop, b[prop]);
+  if (__getOwnPropSymbols$m)
+    for (var prop of __getOwnPropSymbols$m(b)) {
+      if (__propIsEnum$m.call(b, prop))
+        __defNormalProp$m(a, prop, b[prop]);
     }
   return a;
 };
-var __spreadProps$d = (a, b) => __defProps$d(a, __getOwnPropDescs$d(b));
+var __spreadProps$h = (a, b) => __defProps$h(a, __getOwnPropDescs$h(b));
 function SearchWidgetFacetSettings({
   value = [],
   onChange,
@@ -2127,14 +2129,14 @@ function SearchWidgetFacetSettings({
   };
   const removeFacet = (index) => {
     const newFields = value.filter((_, i) => i !== index);
-    const reorderedFields = newFields.map((field, idx) => __spreadProps$d(__spreadValues$i({}, field), {
+    const reorderedFields = newFields.map((field, idx) => __spreadProps$h(__spreadValues$m({}, field), {
       order: idx
     }));
     onChange(reorderedFields);
   };
   const updateFacet = (index, updates) => {
     const newFields = value.map(
-      (field, i) => i === index ? __spreadValues$i(__spreadValues$i({}, field), updates) : field
+      (field, i) => i === index ? __spreadValues$m(__spreadValues$m({}, field), updates) : field
     );
     onChange(newFields);
   };
@@ -2145,8 +2147,8 @@ function SearchWidgetFacetSettings({
     const newFields = [...value];
     const newIndex = direction === "up" ? index - 1 : index + 1;
     [newFields[index], newFields[newIndex]] = [
-      __spreadProps$d(__spreadValues$i({}, newFields[newIndex]), { order: index }),
-      __spreadProps$d(__spreadValues$i({}, newFields[index]), { order: newIndex })
+      __spreadProps$h(__spreadValues$m({}, newFields[newIndex]), { order: index }),
+      __spreadProps$h(__spreadValues$m({}, newFields[index]), { order: newIndex })
     ];
     onChange(newFields);
   };
@@ -2232,25 +2234,25 @@ function SearchWidgetFacetSettings({
   ] });
 }
-var __defProp$h = Object.defineProperty;
-var __defProps$c = Object.defineProperties;
-var __getOwnPropDescs$c = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$h = Object.getOwnPropertySymbols;
-var __hasOwnProp$h = Object.prototype.hasOwnProperty;
-var __propIsEnum$h = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$h = (obj, key, value) => key in obj ? __defProp$h(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$h = (a, b) => {
+var __defProp$l = Object.defineProperty;
+var __defProps$g = Object.defineProperties;
+var __getOwnPropDescs$g = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$l = Object.getOwnPropertySymbols;
+var __hasOwnProp$l = Object.prototype.hasOwnProperty;
+var __propIsEnum$l = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$l = (obj, key, value) => key in obj ? __defProp$l(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$l = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$h.call(b, prop))
-      __defNormalProp$h(a, prop, b[prop]);
-  if (__getOwnPropSymbols$h)
-    for (var prop of __getOwnPropSymbols$h(b)) {
-      if (__propIsEnum$h.call(b, prop))
-        __defNormalProp$h(a, prop, b[prop]);
+    if (__hasOwnProp$l.call(b, prop))
+      __defNormalProp$l(a, prop, b[prop]);
+  if (__getOwnPropSymbols$l)
+    for (var prop of __getOwnPropSymbols$l(b)) {
+      if (__propIsEnum$l.call(b, prop))
+        __defNormalProp$l(a, prop, b[prop]);
     }
   return a;
 };
-var __spreadProps$c = (a, b) => __defProps$c(a, __getOwnPropDescs$c(b));
+var __spreadProps$g = (a, b) => __defProps$g(a, __getOwnPropDescs$g(b));
 function WidgetSettingsPanel({
   pageId,
   widget,
@@ -2276,14 +2278,14 @@ function WidgetSettingsPanel({
     }
     const pageData = await pageResponse.json();
     const updatedWidgets = pageData.widgets.map(
-      (w) => w.id === widgetId ? __spreadValues$h(__spreadValues$h({}, w), updates) : w
+      (w) => w.id === widgetId ? __spreadValues$l(__spreadValues$l({}, w), updates) : w
     );
     const response = await fetch(getApiUrl(`/api/pages/${pageId}`), {
       method: "PUT",
       headers: {
         "Content-Type": "application/json"
       },
-      body: JSON.stringify(__spreadProps$c(__spreadValues$h({}, pageData), {
+      body: JSON.stringify(__spreadProps$g(__spreadValues$l({}, pageData), {
         widgets: updatedWidgets
       }))
     });
@@ -2342,12 +2344,12 @@ function WidgetSettingsPanel({
     }
   };
   const updateWidget = (updates) => {
-    const updatedWidget = __spreadValues$h(__spreadValues$h({}, localWidget), updates);
+    const updatedWidget = __spreadValues$l(__spreadValues$l({}, localWidget), updates);
     setLocalWidget(updatedWidget);
   };
   const updateConfig = (updates) => {
     console.log("Updating config with:", updates);
-    const newConfig = __spreadValues$h(__spreadValues$h({}, localWidget.config), updates);
+    const newConfig = __spreadValues$l(__spreadValues$l({}, localWidget.config), updates);
     console.log("New config will be:", newConfig);
     updateWidget({
       config: newConfig
@@ -2356,8 +2358,8 @@ function WidgetSettingsPanel({
   const updateStyle = (updates) => {
     var _a;
     updateWidget({
-      config: __spreadProps$c(__spreadValues$h({}, localWidget.config), {
-        styles: __spreadValues$h(__spreadValues$h({}, ((_a = localWidget.config) == null ? void 0 : _a.styles) || {}), updates)
+      config: __spreadProps$g(__spreadValues$l({}, localWidget.config), {
+        styles: __spreadValues$l(__spreadValues$l({}, ((_a = localWidget.config) == null ? void 0 : _a.styles) || {}), updates)
       })
     });
   };
@@ -2624,8 +2626,8 @@ function WidgetSettingsPanel({
               checked: (_k = (_j = (_i = widget.config) == null ? void 0 : _i.facets) == null ? void 0 : _j.enabled) != null ? _k : false,
               onCheckedChange: (checked) => {
                 var _a2, _b2, _c2;
-                const newConfig = __spreadProps$c(__spreadValues$h({}, widget.config), {
-                  facets: __spreadProps$c(__spreadValues$h({}, ((_a2 = widget.config) == null ? void 0 : _a2.facets) || {}), {
+                const newConfig = __spreadProps$g(__spreadValues$l({}, widget.config), {
+                  facets: __spreadProps$g(__spreadValues$l({}, ((_a2 = widget.config) == null ? void 0 : _a2.facets) || {}), {
                     enabled: checked,
                     fields: ((_c2 = (_b2 = widget.config) == null ? void 0 : _b2.facets) == null ? void 0 : _c2.fields) || []
                   })
@@ -2641,8 +2643,8 @@ function WidgetSettingsPanel({
             placeHolder: "Select facet field",
             value: widget.config.facets.fields || [],
             onChange: (fields) => {
-              const newConfig = __spreadProps$c(__spreadValues$h({}, widget.config), {
-                facets: __spreadProps$c(__spreadValues$h({}, widget.config.facets), {
+              const newConfig = __spreadProps$g(__spreadValues$l({}, widget.config), {
+                facets: __spreadProps$g(__spreadValues$l({}, widget.config.facets), {
                   fields
                 })
               });
@@ -2666,7 +2668,7 @@ function WidgetSettingsPanel({
             onValueChange: (value) => {
               var _a2;
               return updateConfig({
-                layout: __spreadProps$c(__spreadValues$h({}, (_a2 = localWidget.config) == null ? void 0 : _a2.layout), { type: value })
+                layout: __spreadProps$g(__spreadValues$l({}, (_a2 = localWidget.config) == null ? void 0 : _a2.layout), { type: value })
               });
             },
             children: [
@@ -2689,7 +2691,7 @@ function WidgetSettingsPanel({
             onValueChange: (value) => {
               var _a2;
               return updateConfig({
-                layout: __spreadProps$c(__spreadValues$h({}, (_a2 = localWidget.config) == null ? void 0 : _a2.layout), {
+                layout: __spreadProps$g(__spreadValues$l({}, (_a2 = localWidget.config) == null ? void 0 : _a2.layout), {
                   itemsPerPage: parseInt(value)
                 })
               });
@@ -2713,7 +2715,7 @@ function WidgetSettingsPanel({
             onCheckedChange: (checked) => {
               var _a2;
               return updateConfig({
-                layout: __spreadProps$c(__spreadValues$h({}, (_a2 = localWidget.config) == null ? void 0 : _a2.layout), {
+                layout: __spreadProps$g(__spreadValues$l({}, (_a2 = localWidget.config) == null ? void 0 : _a2.layout), {
                   infiniteScroll: checked
                 })
               });
@@ -2765,8 +2767,8 @@ function WidgetSettingsPanel({
             placeHolder: "Select metadata field",
             value: ((_l = (_k = widget.config) == null ? void 0 : _k.metadata) == null ? void 0 : _l.fields) || [],
             onChange: (fields) => {
-              const newConfig = __spreadProps$c(__spreadValues$h({}, widget.config), {
-                metadata: __spreadProps$c(__spreadValues$h({}, widget.config.metadata), {
+              const newConfig = __spreadProps$g(__spreadValues$l({}, widget.config), {
+                metadata: __spreadProps$g(__spreadValues$l({}, widget.config.metadata), {
                   fields
                 })
               });
@@ -2842,8 +2844,8 @@ function WidgetSettingsPanel({
             checked: (_f = (_e = (_d = widget.config) == null ? void 0 : _d.facets) == null ? void 0 : _e.enabled) != null ? _f : false,
             onCheckedChange: (checked) => {
               var _a2, _b2, _c2;
-              const newConfig = __spreadProps$c(__spreadValues$h({}, widget.config), {
-                facets: __spreadProps$c(__spreadValues$h({}, ((_a2 = widget.config) == null ? void 0 : _a2.facets) || {}), {
+              const newConfig = __spreadProps$g(__spreadValues$l({}, widget.config), {
+                facets: __spreadProps$g(__spreadValues$l({}, ((_a2 = widget.config) == null ? void 0 : _a2.facets) || {}), {
                   enabled: checked,
                   fields: ((_c2 = (_b2 = widget.config) == null ? void 0 : _b2.facets) == null ? void 0 : _c2.fields) || []
                 })
@@ -2860,8 +2862,8 @@ function WidgetSettingsPanel({
           placeHolder: "Select facet field",
           value: widget.config.facets.fields || [],
           onChange: (fields) => {
-            const newConfig = __spreadProps$c(__spreadValues$h({}, widget.config), {
-              facets: __spreadProps$c(__spreadValues$h({}, widget.config.facets), {
+            const newConfig = __spreadProps$g(__spreadValues$l({}, widget.config), {
+              facets: __spreadProps$g(__spreadValues$l({}, widget.config.facets), {
                 fields
               })
             });
@@ -2979,39 +2981,39 @@ function WidgetSettingsPanel({
   ] });
 }
-var __defProp$g = Object.defineProperty;
-var __getOwnPropSymbols$g = Object.getOwnPropertySymbols;
-var __hasOwnProp$g = Object.prototype.hasOwnProperty;
-var __propIsEnum$g = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$g = (obj, key, value) => key in obj ? __defProp$g(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$g = (a, b) => {
+var __defProp$k = Object.defineProperty;
+var __getOwnPropSymbols$k = Object.getOwnPropertySymbols;
+var __hasOwnProp$k = Object.prototype.hasOwnProperty;
+var __propIsEnum$k = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$k = (obj, key, value) => key in obj ? __defProp$k(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$k = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$g.call(b, prop))
-      __defNormalProp$g(a, prop, b[prop]);
-  if (__getOwnPropSymbols$g)
-    for (var prop of __getOwnPropSymbols$g(b)) {
-      if (__propIsEnum$g.call(b, prop))
-        __defNormalProp$g(a, prop, b[prop]);
+    if (__hasOwnProp$k.call(b, prop))
+      __defNormalProp$k(a, prop, b[prop]);
+  if (__getOwnPropSymbols$k)
+    for (var prop of __getOwnPropSymbols$k(b)) {
+      if (__propIsEnum$k.call(b, prop))
+        __defNormalProp$k(a, prop, b[prop]);
     }
   return a;
 };
-var __objRest$5 = (source, exclude) => {
+var __objRest$6 = (source, exclude) => {
   var target = {};
   for (var prop in source)
-    if (__hasOwnProp$g.call(source, prop) && exclude.indexOf(prop) < 0)
+    if (__hasOwnProp$k.call(source, prop) && exclude.indexOf(prop) < 0)
       target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols$g)
-    for (var prop of __getOwnPropSymbols$g(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum$g.call(source, prop))
+  if (source != null && __getOwnPropSymbols$k)
+    for (var prop of __getOwnPropSymbols$k(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum$k.call(source, prop))
         target[prop] = source[prop];
     }
   return target;
 };
 const Card = React__namespace.forwardRef((_a, ref) => {
-  var _b = _a, { className } = _b, props = __objRest$5(_b, ["className"]);
+  var _b = _a, { className } = _b, props = __objRest$6(_b, ["className"]);
   return /* @__PURE__ */ jsxRuntimeExports.jsx(
     "div",
-    __spreadValues$g({
+    __spreadValues$k({
       ref,
       className: cn(
         "rounded-lg border bg-card text-card-foreground shadow-sm",
@@ -3022,10 +3024,10 @@ const Card = React__namespace.forwardRef((_a, ref) => {
 });
 Card.displayName = "Card";
 const CardHeader = React__namespace.forwardRef((_c, ref) => {
-  var _d = _c, { className } = _d, props = __objRest$5(_d, ["className"]);
+  var _d = _c, { className } = _d, props = __objRest$6(_d, ["className"]);
   return /* @__PURE__ */ jsxRuntimeExports.jsx(
     "div",
-    __spreadValues$g({
+    __spreadValues$k({
       ref,
       className: cn("flex flex-col space-y-1.5 p-6", className)
     }, props)
@@ -3033,10 +3035,10 @@ const CardHeader = React__namespace.forwardRef((_c, ref) => {
 });
 CardHeader.displayName = "CardHeader";
 const CardTitle = React__namespace.forwardRef((_e, ref) => {
-  var _f = _e, { className } = _f, props = __objRest$5(_f, ["className"]);
+  var _f = _e, { className } = _f, props = __objRest$6(_f, ["className"]);
   return /* @__PURE__ */ jsxRuntimeExports.jsx(
     "div",
-    __spreadValues$g({
+    __spreadValues$k({
       ref,
       className: cn(
         "text-2xl font-semibold leading-none tracking-tight",
@@ -3047,10 +3049,10 @@ const CardTitle = React__namespace.forwardRef((_e, ref) => {
 });
 CardTitle.displayName = "CardTitle";
 const CardDescription = React__namespace.forwardRef((_g, ref) => {
-  var _h = _g, { className } = _h, props = __objRest$5(_h, ["className"]);
+  var _h = _g, { className } = _h, props = __objRest$6(_h, ["className"]);
   return /* @__PURE__ */ jsxRuntimeExports.jsx(
     "div",
-    __spreadValues$g({
+    __spreadValues$k({
       ref,
       className: cn("text-sm text-muted-foreground", className)
     }, props)
@@ -3058,15 +3060,15 @@ const CardDescription = React__namespace.forwardRef((_g, ref) => {
 });
 CardDescription.displayName = "CardDescription";
 const CardContent = React__namespace.forwardRef((_i, ref) => {
-  var _j = _i, { className } = _j, props = __objRest$5(_j, ["className"]);
-  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", __spreadValues$g({ ref, className: cn("p-6 pt-0", className) }, props));
+  var _j = _i, { className } = _j, props = __objRest$6(_j, ["className"]);
+  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", __spreadValues$k({ ref, className: cn("p-6 pt-0", className) }, props));
 });
 CardContent.displayName = "CardContent";
 const CardFooter = React__namespace.forwardRef((_k, ref) => {
-  var _l = _k, { className } = _l, props = __objRest$5(_l, ["className"]);
+  var _l = _k, { className } = _l, props = __objRest$6(_l, ["className"]);
   return /* @__PURE__ */ jsxRuntimeExports.jsx(
     "div",
-    __spreadValues$g({
+    __spreadValues$k({
       ref,
       className: cn("flex items-center p-6 pt-0", className)
     }, props)
@@ -3175,30 +3177,141 @@ function WidgetPalette({ widgetBackendUrl } = {}) {
   ] });
 }
-var __defProp$f = Object.defineProperty;
-var __getOwnPropSymbols$f = Object.getOwnPropertySymbols;
-var __hasOwnProp$f = Object.prototype.hasOwnProperty;
-var __propIsEnum$f = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$f = (obj, key, value) => key in obj ? __defProp$f(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$f = (a, b) => {
+class WidgetService {
+  constructor() {
+    this.baseUrl = "/api/widgets";
+  }
+  async getWidgetTypes() {
+    try {
+      const response = await fetch(`${this.baseUrl}/types`);
+      if (!response.ok) {
+        throw new Error(`Failed to fetch widget types: ${response.statusText}`);
+      }
+      const data = await response.json();
+      return data;
+    } catch (error) {
+      console.error("Error fetching widget types:", error);
+      throw error;
+    }
+  }
+  async getWidgetTemplates() {
+    try {
+      const response = await fetch(`${this.baseUrl}/templates`);
+      if (!response.ok) {
+        throw new Error(
+          `Failed to fetch widget templates: ${response.statusText}`
+        );
+      }
+      return await response.json();
+    } catch (error) {
+      console.error("Error fetching widget templates:", error);
+      throw error;
+    }
+  }
+  async getWidgetCategories() {
+    try {
+      const response = await fetch(`${this.baseUrl}/categories`);
+      if (!response.ok) {
+        throw new Error(
+          `Failed to fetch widget categories: ${response.statusText}`
+        );
+      }
+      return await response.json();
+    } catch (error) {
+      console.error("Error fetching widget categories:", error);
+      throw error;
+    }
+  }
+  async getPageWidgets(pageId) {
+    try {
+      const response = await fetch(`${this.baseUrl}/page/${pageId}`);
+      if (!response.ok) {
+        throw new Error(`Failed to fetch page widgets: ${response.statusText}`);
+      }
+      return await response.json();
+    } catch (error) {
+      console.error("Error fetching page widgets:", error);
+      throw error;
+    }
+  }
+  async saveWidget(widget) {
+    try {
+      const response = await fetch(this.baseUrl, {
+        method: widget.id ? "PUT" : "POST",
+        headers: {
+          "Content-Type": "application/json"
+        },
+        body: JSON.stringify(widget)
+      });
+      if (!response.ok) {
+        throw new Error(`Failed to save widget: ${response.statusText}`);
+      }
+      return await response.json();
+    } catch (error) {
+      console.error("Error saving widget:", error);
+      throw error;
+    }
+  }
+  async deleteWidget(widgetId) {
+    try {
+      const response = await fetch(`${this.baseUrl}/${widgetId}`, {
+        method: "DELETE"
+      });
+      if (!response.ok) {
+        throw new Error(`Failed to delete widget: ${response.statusText}`);
+      }
+      return true;
+    } catch (error) {
+      console.error("Error deleting widget:", error);
+      throw error;
+    }
+  }
+  async updateWidgetPositions(widgets) {
+    try {
+      const response = await fetch(`${this.baseUrl}/positions`, {
+        method: "PUT",
+        headers: {
+          "Content-Type": "application/json"
+        },
+        body: JSON.stringify(widgets)
+      });
+      if (!response.ok) {
+        throw new Error(
+          `Failed to update widget positions: ${response.statusText}`
+        );
+      }
+      return await response.json();
+    } catch (error) {
+      console.error("Error updating widget positions:", error);
+      throw error;
+    }
+  }
+}
+var __defProp$j = Object.defineProperty;
+var __getOwnPropSymbols$j = Object.getOwnPropertySymbols;
+var __hasOwnProp$j = Object.prototype.hasOwnProperty;
+var __propIsEnum$j = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$j = (obj, key, value) => key in obj ? __defProp$j(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$j = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$f.call(b, prop))
-      __defNormalProp$f(a, prop, b[prop]);
-  if (__getOwnPropSymbols$f)
-    for (var prop of __getOwnPropSymbols$f(b)) {
-      if (__propIsEnum$f.call(b, prop))
-        __defNormalProp$f(a, prop, b[prop]);
+    if (__hasOwnProp$j.call(b, prop))
+      __defNormalProp$j(a, prop, b[prop]);
+  if (__getOwnPropSymbols$j)
+    for (var prop of __getOwnPropSymbols$j(b)) {
+      if (__propIsEnum$j.call(b, prop))
+        __defNormalProp$j(a, prop, b[prop]);
     }
   return a;
 };
-var __objRest$4 = (source, exclude) => {
+var __objRest$5 = (source, exclude) => {
   var target = {};
   for (var prop in source)
-    if (__hasOwnProp$f.call(source, prop) && exclude.indexOf(prop) < 0)
+    if (__hasOwnProp$j.call(source, prop) && exclude.indexOf(prop) < 0)
       target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols$f)
-    for (var prop of __getOwnPropSymbols$f(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum$f.call(source, prop))
+  if (source != null && __getOwnPropSymbols$j)
+    for (var prop of __getOwnPropSymbols$j(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum$j.call(source, prop))
         target[prop] = source[prop];
     }
   return target;
@@ -3225,8 +3338,8 @@ const badgeVariants = classVarianceAuthority.cva(
   }
 );
 function Badge(_a) {
-  var _b = _a, { className, variant } = _b, props = __objRest$4(_b, ["className", "variant"]);
-  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", __spreadValues$f({ className: cn(badgeVariants({ variant }), className) }, props));
+  var _b = _a, { className, variant } = _b, props = __objRest$5(_b, ["className", "variant"]);
+  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", __spreadValues$j({ className: cn(badgeVariants({ variant }), className) }, props));
 }
 // src/primitive.tsx
@@ -3631,10 +3744,6 @@ const oppositeSideMap = {
   bottom: 'top',
   top: 'bottom'
 };
-const oppositeAlignmentMap = {
-  start: 'end',
-  end: 'start'
-};
 function clamp(start, value, end) {
   return max(start, min(value, end));
 }
@@ -3653,9 +3762,9 @@ function getOppositeAxis(axis) {
 function getAxisLength(axis) {
   return axis === 'y' ? 'height' : 'width';
 }
-const yAxisSides = /*#__PURE__*/new Set(['top', 'bottom']);
 function getSideAxis(placement) {
-  return yAxisSides.has(getSide(placement)) ? 'y' : 'x';
+  const firstChar = placement[0];
+  return firstChar === 't' || firstChar === 'b' ? 'y' : 'x';
 }
 function getAlignmentAxis(placement) {
   return getOppositeAxis(getSideAxis(placement));
@@ -3678,7 +3787,7 @@ function getExpandedPlacements(placement) {
   return [getOppositeAlignmentPlacement(placement), oppositePlacement, getOppositeAlignmentPlacement(oppositePlacement)];
 }
 function getOppositeAlignmentPlacement(placement) {
-  return placement.replace(/start|end/g, alignment => oppositeAlignmentMap[alignment]);
+  return placement.includes('start') ? placement.replace('start', 'end') : placement.replace('end', 'start');
 }
 const lrPlacement = ['left', 'right'];
 const rlPlacement = ['right', 'left'];
@@ -3709,7 +3818,8 @@ function getOppositeAxisPlacements(placement, flipAlignment, direction, rtl) {
   return list;
 }
 function getOppositePlacement(placement) {
-  return placement.replace(/left|right|bottom|top/g, side => oppositeSideMap[side]);
+  const side = getSide(placement);
+  return oppositeSideMap[side] + placement.slice(side.length);
 }
 function expandPaddingObject(padding) {
   return {
@@ -3868,6 +3978,9 @@ async function detectOverflow(state, options) {
   };
 }
+// Maximum number of resets that can occur before bailing to avoid infinite reset loops.
+const MAX_RESET_COUNT = 50;
 /**
  * Computes the `x` and `y` coordinates that will place the floating element
  * next to a given reference element.
@@ -3882,7 +3995,10 @@ const computePosition$1 = async (reference, floating, config) => {
     middleware = [],
     platform
   } = config;
-  const validMiddleware = middleware.filter(Boolean);
+  const platformWithDetectOverflow = platform.detectOverflow ? platform : {
+    ...platform,
+    detectOverflow
+  };
   const rtl = await (platform.isRTL == null ? void 0 : platform.isRTL(floating));
   let rects = await platform.getElementRects({
     reference,
@@ -3894,14 +4010,17 @@ const computePosition$1 = async (reference, floating, config) => {
     y
   } = computeCoordsFromPlacement(rects, placement, rtl);
   let statefulPlacement = placement;
-  let middlewareData = {};
   let resetCount = 0;
-  for (let i = 0; i < validMiddleware.length; i++) {
-    var _platform$detectOverf;
+  const middlewareData = {};
+  for (let i = 0; i < middleware.length; i++) {
+    const currentMiddleware = middleware[i];
+    if (!currentMiddleware) {
+      continue;
+    }
     const {
       name,
       fn
-    } = validMiddleware[i];
+    } = currentMiddleware;
     const {
       x: nextX,
       y: nextY,
@@ -3915,10 +4034,7 @@ const computePosition$1 = async (reference, floating, config) => {
       strategy,
       middlewareData,
       rects,
-      platform: {
-        ...platform,
-        detectOverflow: (_platform$detectOverf = platform.detectOverflow) != null ? _platform$detectOverf : detectOverflow
-      },
+      platform: platformWithDetectOverflow,
       elements: {
         reference,
         floating
@@ -3926,14 +4042,11 @@ const computePosition$1 = async (reference, floating, config) => {
     });
     x = nextX != null ? nextX : x;
     y = nextY != null ? nextY : y;
-    middlewareData = {
-      ...middlewareData,
-      [name]: {
-        ...middlewareData[name],
-        ...data
-      }
+    middlewareData[name] = {
+      ...middlewareData[name],
+      ...data
     };
-    if (reset && resetCount <= 50) {
+    if (reset && resetCount < MAX_RESET_COUNT) {
       resetCount++;
       if (typeof reset === 'object') {
         if (reset.placement) {
@@ -4608,7 +4721,6 @@ function isShadowRoot(value) {
   }
   return value instanceof ShadowRoot || value instanceof getWindow(value).ShadowRoot;
 }
-const invalidOverflowDisplayValues = /*#__PURE__*/new Set(['inline', 'contents']);
 function isOverflowElement(element) {
   const {
     overflow,
@@ -4616,32 +4728,35 @@ function isOverflowElement(element) {
     overflowY,
     display
   } = getComputedStyle$2(element);
-  return /auto|scroll|overlay|hidden|clip/.test(overflow + overflowY + overflowX) && !invalidOverflowDisplayValues.has(display);
+  return /auto|scroll|overlay|hidden|clip/.test(overflow + overflowY + overflowX) && display !== 'inline' && display !== 'contents';
 }
-const tableElements$1 = /*#__PURE__*/new Set(['table', 'td', 'th']);
 function isTableElement(element) {
-  return tableElements$1.has(getNodeName(element));
+  return /^(table|td|th)$/.test(getNodeName(element));
 }
-const topLayerSelectors = [':popover-open', ':modal'];
 function isTopLayer(element) {
-  return topLayerSelectors.some(selector => {
-    try {
-      return element.matches(selector);
-    } catch (_e) {
-      return false;
+  try {
+    if (element.matches(':popover-open')) {
+      return true;
     }
-  });
+  } catch (_e) {
+    // no-op
+  }
+  try {
+    return element.matches(':modal');
+  } catch (_e) {
+    return false;
+  }
 }
-const transformProperties = ['transform', 'translate', 'scale', 'rotate', 'perspective'];
-const willChangeValues = ['transform', 'translate', 'scale', 'rotate', 'perspective', 'filter'];
-const containValues = ['paint', 'layout', 'strict', 'content'];
+const willChangeRe = /transform|translate|scale|rotate|perspective|filter/;
+const containRe = /paint|layout|strict|content/;
+const isNotNone = value => !!value && value !== 'none';
+let isWebKitValue;
 function isContainingBlock(elementOrCss) {
-  const webkit = isWebKit();
   const css = isElement(elementOrCss) ? getComputedStyle$2(elementOrCss) : elementOrCss;
   // https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block#identifying_the_containing_block
   // https://drafts.csswg.org/css-transforms-2/#individual-transforms
-  return transformProperties.some(value => css[value] ? css[value] !== 'none' : false) || (css.containerType ? css.containerType !== 'normal' : false) || !webkit && (css.backdropFilter ? css.backdropFilter !== 'none' : false) || !webkit && (css.filter ? css.filter !== 'none' : false) || willChangeValues.some(value => (css.willChange || '').includes(value)) || containValues.some(value => (css.contain || '').includes(value));
+  return isNotNone(css.transform) || isNotNone(css.translate) || isNotNone(css.scale) || isNotNone(css.rotate) || isNotNone(css.perspective) || !isWebKit() && (isNotNone(css.backdropFilter) || isNotNone(css.filter)) || willChangeRe.test(css.willChange || '') || containRe.test(css.contain || '');
 }
 function getContainingBlock(element) {
   let currentNode = getParentNode(element);
@@ -4656,12 +4771,13 @@ function getContainingBlock(element) {
   return null;
 }
 function isWebKit() {
-  if (typeof CSS === 'undefined' || !CSS.supports) return false;
-  return CSS.supports('-webkit-backdrop-filter', 'none');
+  if (isWebKitValue == null) {
+    isWebKitValue = typeof CSS !== 'undefined' && CSS.supports && CSS.supports('-webkit-backdrop-filter', 'none');
+  }
+  return isWebKitValue;
 }
-const lastTraversableNodeNames = /*#__PURE__*/new Set(['html', 'body', '#document']);
 function isLastTraversableNode(node) {
-  return lastTraversableNodeNames.has(getNodeName(node));
+  return /^(html|body|#document)$/.test(getNodeName(node));
 }
 function getComputedStyle$2(element) {
   return getWindow(element).getComputedStyle(element);
@@ -4717,8 +4833,9 @@ function getOverflowAncestors(node, list, traverseIframes) {
   if (isBody) {
     const frameElement = getFrameElement(win);
     return list.concat(win, win.visualViewport || [], isOverflowElement(scrollableAncestor) ? scrollableAncestor : [], frameElement && traverseIframes ? getOverflowAncestors(frameElement) : []);
+  } else {
+    return list.concat(scrollableAncestor, getOverflowAncestors(scrollableAncestor, [], traverseIframes));
   }
-  return list.concat(scrollableAncestor, getOverflowAncestors(scrollableAncestor, [], traverseIframes));
 }
 function getFrameElement(win) {
   return win.parent && Object.getPrototypeOf(win.parent) ? win.frameElement : null;
@@ -4895,7 +5012,7 @@ function convertOffsetParentRelativeRectToViewportRelativeRect(_ref) {
     if (getNodeName(offsetParent) !== 'body' || isOverflowElement(documentElement)) {
       scroll = getNodeScroll(offsetParent);
     }
-    if (isHTMLElement(offsetParent)) {
+    if (isOffsetParentAnElement) {
       const offsetRect = getBoundingClientRect(offsetParent);
       scale = getScale(offsetParent);
       offsets.x = offsetRect.x + offsetParent.clientLeft;
@@ -4983,7 +5100,6 @@ function getViewportRect(element, strategy) {
   };
 }
-const absoluteOrFixed = /*#__PURE__*/new Set(['absolute', 'fixed']);
 // Returns the inner client rect, subtracting scrollbars if present.
 function getInnerBoundingClientRect(element, strategy) {
   const clientRect = getBoundingClientRect(element, true, strategy === 'fixed');
@@ -5048,7 +5164,7 @@ function getClippingElementAncestors(element, cache) {
     if (!currentNodeIsContaining && computedStyle.position === 'fixed') {
       currentContainingBlockComputedStyle = null;
     }
-    const shouldDropCurrentNode = elementIsFixed ? !currentNodeIsContaining && !currentContainingBlockComputedStyle : !currentNodeIsContaining && computedStyle.position === 'static' && !!currentContainingBlockComputedStyle && absoluteOrFixed.has(currentContainingBlockComputedStyle.position) || isOverflowElement(currentNode) && !currentNodeIsContaining && hasFixedPositionAncestor(element, currentNode);
+    const shouldDropCurrentNode = elementIsFixed ? !currentNodeIsContaining && !currentContainingBlockComputedStyle : !currentNodeIsContaining && computedStyle.position === 'static' && !!currentContainingBlockComputedStyle && (currentContainingBlockComputedStyle.position === 'absolute' || currentContainingBlockComputedStyle.position === 'fixed') || isOverflowElement(currentNode) && !currentNodeIsContaining && hasFixedPositionAncestor(element, currentNode);
     if (shouldDropCurrentNode) {
       // Drop non-containing blocks.
       result = result.filter(ancestor => ancestor !== currentNode);
@@ -5073,20 +5189,23 @@ function getClippingRect(_ref) {
   } = _ref;
   const elementClippingAncestors = boundary === 'clippingAncestors' ? isTopLayer(element) ? [] : getClippingElementAncestors(element, this._c) : [].concat(boundary);
   const clippingAncestors = [...elementClippingAncestors, rootBoundary];
-  const firstClippingAncestor = clippingAncestors[0];
-  const clippingRect = clippingAncestors.reduce((accRect, clippingAncestor) => {
-    const rect = getClientRectFromClippingAncestor(element, clippingAncestor, strategy);
-    accRect.top = max(rect.top, accRect.top);
-    accRect.right = min(rect.right, accRect.right);
-    accRect.bottom = min(rect.bottom, accRect.bottom);
-    accRect.left = max(rect.left, accRect.left);
-    return accRect;
-  }, getClientRectFromClippingAncestor(element, firstClippingAncestor, strategy));
+  const firstRect = getClientRectFromClippingAncestor(element, clippingAncestors[0], strategy);
+  let top = firstRect.top;
+  let right = firstRect.right;
+  let bottom = firstRect.bottom;
+  let left = firstRect.left;
+  for (let i = 1; i < clippingAncestors.length; i++) {
+    const rect = getClientRectFromClippingAncestor(element, clippingAncestors[i], strategy);
+    top = max(rect.top, top);
+    right = min(rect.right, right);
+    bottom = min(rect.bottom, bottom);
+    left = max(rect.left, left);
+  }
   return {
-    width: clippingRect.right - clippingRect.left,
-    height: clippingRect.bottom - clippingRect.top,
-    x: clippingRect.left,
-    y: clippingRect.top
+    width: right - left,
+    height: bottom - top,
+    x: left,
+    y: top
   };
 }
@@ -5337,7 +5456,7 @@ function autoUpdate(reference, floating, update, options) {
     animationFrame = false
   } = options;
   const referenceEl = unwrapElement(reference);
-  const ancestors = ancestorScroll || ancestorResize ? [...(referenceEl ? getOverflowAncestors(referenceEl) : []), ...getOverflowAncestors(floating)] : [];
+  const ancestors = ancestorScroll || ancestorResize ? [...(referenceEl ? getOverflowAncestors(referenceEl) : []), ...(floating ? getOverflowAncestors(floating) : [])] : [];
   ancestors.forEach(ancestor => {
     ancestorScroll && ancestor.addEventListener('scroll', update, {
       passive: true
@@ -5350,7 +5469,7 @@ function autoUpdate(reference, floating, update, options) {
   if (elementResize) {
     resizeObserver = new ResizeObserver(_ref => {
       let [firstEntry] = _ref;
-      if (firstEntry && firstEntry.target === referenceEl && resizeObserver) {
+      if (firstEntry && firstEntry.target === referenceEl && resizeObserver && floating) {
         // Prevent update loops when using the `size` middleware.
         // https://github.com/floating-ui/floating-ui/issues/1740
         resizeObserver.unobserve(floating);
@@ -5365,7 +5484,9 @@ function autoUpdate(reference, floating, update, options) {
     if (referenceEl && !animationFrame) {
       resizeObserver.observe(referenceEl);
     }
-    resizeObserver.observe(floating);
+    if (floating) {
+      resizeObserver.observe(floating);
+    }
   }
   let frameId;
   let prevRefRect = animationFrame ? getBoundingClientRect(reference) : null;
@@ -5747,28 +5868,39 @@ const arrow$1 = options => {
  * object may be passed.
  * @see https://floating-ui.com/docs/offset
  */
-const offset = (options, deps) => ({
-  ...offset$1(options),
-  options: [options, deps]
-});
+const offset = (options, deps) => {
+  const result = offset$1(options);
+  return {
+    name: result.name,
+    fn: result.fn,
+    options: [options, deps]
+  };
+};
 /**
  * Optimizes the visibility of the floating element by shifting it in order to
  * keep it in view when it will overflow the clipping boundary.
  * @see https://floating-ui.com/docs/shift
  */
-const shift = (options, deps) => ({
-  ...shift$1(options),
-  options: [options, deps]
-});
+const shift = (options, deps) => {
+  const result = shift$1(options);
+  return {
+    name: result.name,
+    fn: result.fn,
+    options: [options, deps]
+  };
+};
 /**
  * Built-in `limiter` that will stop `shift()` at a certain point.
  */
-const limitShift = (options, deps) => ({
-  ...limitShift$1(options),
-  options: [options, deps]
-});
+const limitShift = (options, deps) => {
+  const result = limitShift$1(options);
+  return {
+    fn: result.fn,
+    options: [options, deps]
+  };
+};
 /**
  * Optimizes the visibility of the floating element by flipping the `placement`
@@ -5776,10 +5908,14 @@ const limitShift = (options, deps) => ({
  * clipping boundary. Alternative to `autoPlacement`.
  * @see https://floating-ui.com/docs/flip
  */
-const flip = (options, deps) => ({
-  ...flip$1(options),
-  options: [options, deps]
-});
+const flip = (options, deps) => {
+  const result = flip$1(options);
+  return {
+    name: result.name,
+    fn: result.fn,
+    options: [options, deps]
+  };
+};
 /**
  * Provides data that allows you to change the size of the floating element —
@@ -5787,20 +5923,28 @@ const flip = (options, deps) => ({
  * width of the reference element.
  * @see https://floating-ui.com/docs/size
  */
-const size = (options, deps) => ({
-  ...size$1(options),
-  options: [options, deps]
-});
+const size = (options, deps) => {
+  const result = size$1(options);
+  return {
+    name: result.name,
+    fn: result.fn,
+    options: [options, deps]
+  };
+};
 /**
  * Provides data to hide the floating element in applicable situations, such as
  * when it is not in the same clipping context as the reference element.
  * @see https://floating-ui.com/docs/hide
  */
-const hide = (options, deps) => ({
-  ...hide$1(options),
-  options: [options, deps]
-});
+const hide = (options, deps) => {
+  const result = hide$1(options);
+  return {
+    name: result.name,
+    fn: result.fn,
+    options: [options, deps]
+  };
+};
 /**
  * Provides data to position an inner element of the floating element so that it
@@ -5808,10 +5952,14 @@ const hide = (options, deps) => ({
  * This wraps the core `arrow` middleware to allow React refs as the element.
  * @see https://floating-ui.com/docs/arrow
  */
-const arrow = (options, deps) => ({
-  ...arrow$1(options),
-  options: [options, deps]
-});
+const arrow = (options, deps) => {
+  const result = arrow$1(options);
+  return {
+    name: result.name,
+    fn: result.fn,
+    options: [options, deps]
+  };
+};
 // src/arrow.tsx
 var NAME$1 = "Arrow";
@@ -6827,30 +6975,30 @@ var Root3 = Tooltip$2;
 var Trigger = TooltipTrigger$1;
 var Content2 = TooltipContent$1;
-var __defProp$e = Object.defineProperty;
-var __getOwnPropSymbols$e = Object.getOwnPropertySymbols;
-var __hasOwnProp$e = Object.prototype.hasOwnProperty;
-var __propIsEnum$e = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$e = (obj, key, value) => key in obj ? __defProp$e(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$e = (a, b) => {
+var __defProp$i = Object.defineProperty;
+var __getOwnPropSymbols$i = Object.getOwnPropertySymbols;
+var __hasOwnProp$i = Object.prototype.hasOwnProperty;
+var __propIsEnum$i = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$i = (obj, key, value) => key in obj ? __defProp$i(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$i = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$e.call(b, prop))
-      __defNormalProp$e(a, prop, b[prop]);
-  if (__getOwnPropSymbols$e)
-    for (var prop of __getOwnPropSymbols$e(b)) {
-      if (__propIsEnum$e.call(b, prop))
-        __defNormalProp$e(a, prop, b[prop]);
+    if (__hasOwnProp$i.call(b, prop))
+      __defNormalProp$i(a, prop, b[prop]);
+  if (__getOwnPropSymbols$i)
+    for (var prop of __getOwnPropSymbols$i(b)) {
+      if (__propIsEnum$i.call(b, prop))
+        __defNormalProp$i(a, prop, b[prop]);
     }
   return a;
 };
-var __objRest$3 = (source, exclude) => {
+var __objRest$4 = (source, exclude) => {
   var target = {};
   for (var prop in source)
-    if (__hasOwnProp$e.call(source, prop) && exclude.indexOf(prop) < 0)
+    if (__hasOwnProp$i.call(source, prop) && exclude.indexOf(prop) < 0)
       target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols$e)
-    for (var prop of __getOwnPropSymbols$e(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum$e.call(source, prop))
+  if (source != null && __getOwnPropSymbols$i)
+    for (var prop of __getOwnPropSymbols$i(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum$i.call(source, prop))
         target[prop] = source[prop];
     }
   return target;
@@ -6859,10 +7007,10 @@ const TooltipProvider = Provider;
 const Tooltip$1 = Root3;
 const TooltipTrigger = Trigger;
 const TooltipContent = React__namespace.forwardRef((_a, ref) => {
-  var _b = _a, { className, sideOffset = 4 } = _b, props = __objRest$3(_b, ["className", "sideOffset"]);
+  var _b = _a, { className, sideOffset = 4 } = _b, props = __objRest$4(_b, ["className", "sideOffset"]);
   return /* @__PURE__ */ jsxRuntimeExports.jsx(
     Content2,
-    __spreadValues$e({
+    __spreadValues$i({
       ref,
       sideOffset,
       className: cn(
@@ -7024,11 +7172,16 @@ function getWidgetStyles(widget) {
   };
 }
 function shuffleColors(colors, count) {
-  const shuffled = [...colors].sort(() => Math.random() - 0.5);
-  while (shuffled.length < count) {
-    shuffled.push(...[...colors].sort(() => Math.random() - 0.5));
+  const shuffled = [...colors];
+  for (let i = shuffled.length - 1; i > 0; i--) {
+    const j = Math.floor(Math.random() * (i + 1));
+    [shuffled[i], shuffled[j]] = [shuffled[j], shuffled[i]];
+  }
+  let result = [...shuffled];
+  while (result.length < count) {
+    result.push(...shuffled);
   }
-  return shuffled.slice(0, count);
+  return result.slice(0, count);
 }
 function getBorderRadiusValue(value) {
   switch (value) {
@@ -7059,25 +7212,25 @@ function getPaddingValue(value) {
   }
 }
-var __defProp$d = Object.defineProperty;
-var __defProps$b = Object.defineProperties;
-var __getOwnPropDescs$b = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$d = Object.getOwnPropertySymbols;
-var __hasOwnProp$d = Object.prototype.hasOwnProperty;
-var __propIsEnum$d = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$d = (obj, key, value) => key in obj ? __defProp$d(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$d = (a, b) => {
+var __defProp$h = Object.defineProperty;
+var __defProps$f = Object.defineProperties;
+var __getOwnPropDescs$f = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$h = Object.getOwnPropertySymbols;
+var __hasOwnProp$h = Object.prototype.hasOwnProperty;
+var __propIsEnum$h = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$h = (obj, key, value) => key in obj ? __defProp$h(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$h = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$d.call(b, prop))
-      __defNormalProp$d(a, prop, b[prop]);
-  if (__getOwnPropSymbols$d)
-    for (var prop of __getOwnPropSymbols$d(b)) {
-      if (__propIsEnum$d.call(b, prop))
-        __defNormalProp$d(a, prop, b[prop]);
+    if (__hasOwnProp$h.call(b, prop))
+      __defNormalProp$h(a, prop, b[prop]);
+  if (__getOwnPropSymbols$h)
+    for (var prop of __getOwnPropSymbols$h(b)) {
+      if (__propIsEnum$h.call(b, prop))
+        __defNormalProp$h(a, prop, b[prop]);
     }
   return a;
 };
-var __spreadProps$b = (a, b) => __defProps$b(a, __getOwnPropDescs$b(b));
+var __spreadProps$f = (a, b) => __defProps$f(a, __getOwnPropDescs$f(b));
 function FacetWidget({
   widget,
   showHeader = true,
@@ -7136,7 +7289,7 @@ function FacetWidget({
   };
   const updateConfig = (newFields) => {
     if (onConfigUpdate) {
-      onConfigUpdate(__spreadProps$b(__spreadValues$d({}, widget.config), {
+      onConfigUpdate(__spreadProps$f(__spreadValues$h({}, widget.config), {
         fields: newFields
       }));
     }
@@ -20133,9 +20286,28 @@ function BarChart({ orientation, title, data, options, className, units, content
   return /* @__PURE__ */ jsxRuntimeExports.jsx(Bar, { data, options: options != null ? options : defaultOptions, plugins: [barValuePlugin] });
 }
+var __defProp$g = Object.defineProperty;
+var __defProps$e = Object.defineProperties;
+var __getOwnPropDescs$e = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$g = Object.getOwnPropertySymbols;
+var __hasOwnProp$g = Object.prototype.hasOwnProperty;
+var __propIsEnum$g = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$g = (obj, key, value) => key in obj ? __defProp$g(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$g = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp$g.call(b, prop))
+      __defNormalProp$g(a, prop, b[prop]);
+  if (__getOwnPropSymbols$g)
+    for (var prop of __getOwnPropSymbols$g(b)) {
+      if (__propIsEnum$g.call(b, prop))
+        __defNormalProp$g(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps$e = (a, b) => __defProps$e(a, __getOwnPropDescs$e(b));
 Chart$1.register(CategoryScale, LinearScale, BarElement, plugin_title, plugin_tooltip, plugin_legend);
-function SeriesChart({ orientation, title, data, options, className, units, content, x_axis_title, y_axis_title }) {
-  var _a, _b;
+function SeriesChart({ orientation, title, data, options, className, units, content, x_axis_title, y_axis_title, chartSettings }) {
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z;
   const formatValue = (value) => {
     const numValue = typeof value === "string" ? parseFloat(value) : value;
     if (!isNaN(numValue)) {
@@ -20148,15 +20320,17 @@ function SeriesChart({ orientation, title, data, options, className, units, cont
     afterDatasetsDraw(chart) {
       if (!(content == null ? void 0 : content.showLabels)) return;
       const { ctx } = chart;
+      const chartHeight = chart.height;
+      const fontSize = Math.max(11, Math.min(14, Math.floor(chartHeight * 0.025)));
       chart.data.datasets.forEach((dataset, i) => {
         const meta = chart.getDatasetMeta(i);
         meta.data.forEach((bar, index) => {
           const value = dataset.data[index];
           ctx.save();
-          ctx.font = "12px sans-serif";
+          ctx.font = `bold ${fontSize}px sans-serif`;
           ctx.textAlign = "center";
-          ctx.fillStyle = "black";
-          ctx.fillText(value, bar.x, bar.y - 5);
+          ctx.fillStyle = "#0F172A";
+          ctx.fillText(value, bar.x, bar.y - 8);
           ctx.restore();
         });
       });
@@ -20176,10 +20350,10 @@ function SeriesChart({ orientation, title, data, options, className, units, cont
     indexAxis: orientation === "horizontal" ? "y" : "x",
     layout: {
       padding: {
-        bottom: 0,
-        top: 0,
-        left: 0,
-        right: 0
+        bottom: 8,
+        top: 24,
+        left: 4,
+        right: 16
       }
     },
     plugins: {
@@ -20191,24 +20365,27 @@ function SeriesChart({ orientation, title, data, options, className, units, cont
           return false;
         }),
         labels: {
-          boxWidth: 12,
-          boxHeight: 12
+          boxWidth: 16,
+          boxHeight: 16,
+          padding: 16,
+          font: { size: 13, weight: "normal" },
+          usePointStyle: true,
+          pointStyle: "rect"
         },
         position: "bottom"
       },
       datalabels: {
         display: false
       },
-      title: {
-        display: true,
-        text: title,
-        font: {
-          size: 18,
-          weight: "bold"
-        },
-        color: "#0F172A"
-      },
       tooltip: {
+        mode: "index",
+        intersect: false,
+        backgroundColor: "rgba(0, 0, 0, 0.8)",
+        titleFont: { size: 13, weight: "bold" },
+        bodyFont: { size: 12 },
+        padding: 12,
+        borderColor: "#ccc",
+        borderWidth: 1,
         callbacks: {
           label: function(context) {
             var _a2, _b2;
@@ -20222,28 +20399,91 @@ function SeriesChart({ orientation, title, data, options, className, units, cont
       x: {
         title: {
           display: !!x_axis_title,
-          text: x_axis_title
+          text: x_axis_title,
+          font: { size: 13, weight: "bold" },
+          padding: 8
         },
-        ticks: { autoSkip: false, maxRotation: 45, minRotation: 0 }
+        ticks: {
+          autoSkip: true,
+          maxRotation: 45,
+          minRotation: 0,
+          font: { size: 12 },
+          maxTicksLimit: 12
+        },
+        grid: {
+          color: "rgba(0, 0, 0, 0.05)"
+        }
       },
       y: {
         title: {
           display: true,
-          text: y_axis_title || ((data == null ? void 0 : data.datasets) && ((_a = data == null ? void 0 : data.datasets) == null ? void 0 : _a.length) === 1 ? (_b = data == null ? void 0 : data.datasets) == null ? void 0 : _b[0].label : getAxisLabel(units != null ? units : ""))
+          text: y_axis_title || ((data == null ? void 0 : data.datasets) && ((_a = data == null ? void 0 : data.datasets) == null ? void 0 : _a.length) === 1 ? (_b = data == null ? void 0 : data.datasets) == null ? void 0 : _b[0].label : getAxisLabel(units != null ? units : "")),
+          font: { size: 13, weight: "bold" },
+          padding: 12
         },
         beginAtZero: true,
         ticks: {
+          font: { size: 12 },
           callback: function(value) {
             if (units === "$") {
               return `${units}${formatValue(value)}`;
             }
             return units ? `${formatValue(value)} ${(units == null ? void 0 : units.length) < 3 ? units : ""}` : value;
           }
+        },
+        grid: {
+          color: "rgba(0, 0, 0, 0.05)"
         }
       }
     }
   };
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(Bar, { data, options: options != null ? options : defaultOptions, plugins: [barValuePlugin] });
+  const mergedOptions = chartSettings ? __spreadProps$e(__spreadValues$g({}, defaultOptions), {
+    plugins: __spreadProps$e(__spreadValues$g({}, defaultOptions.plugins), {
+      legend: __spreadProps$e(__spreadValues$g({}, (_c = defaultOptions.plugins) == null ? void 0 : _c.legend), {
+        display: chartSettings.showLegend !== false,
+        labels: __spreadProps$e(__spreadValues$g({}, (_e = (_d = defaultOptions.plugins) == null ? void 0 : _d.legend) == null ? void 0 : _e.labels), {
+          boxWidth: (_f = chartSettings.legendBoxSize) != null ? _f : 16,
+          boxHeight: (_g = chartSettings.legendBoxSize) != null ? _g : 16,
+          font: { size: (_h = chartSettings.legendFontSize) != null ? _h : 13 }
+        })
+      }),
+      tooltip: __spreadProps$e(__spreadValues$g({}, (_i = defaultOptions.plugins) == null ? void 0 : _i.tooltip), {
+        bodyFont: { size: (_j = chartSettings.tooltipFontSize) != null ? _j : 12 },
+        titleFont: { size: (_k = chartSettings.tooltipFontSize) != null ? _k : 12 }
+      })
+    }),
+    scales: __spreadProps$e(__spreadValues$g({}, defaultOptions.scales), {
+      x: __spreadProps$e(__spreadValues$g({}, (_l = defaultOptions.scales) == null ? void 0 : _l.x), {
+        title: __spreadProps$e(__spreadValues$g({}, (_n = (_m = defaultOptions.scales) == null ? void 0 : _m.x) == null ? void 0 : _n.title), {
+          font: { size: (_o = chartSettings.xAxisTitleFontSize) != null ? _o : 13, weight: "bold" }
+        }),
+        ticks: __spreadProps$e(__spreadValues$g({}, (_q = (_p = defaultOptions.scales) == null ? void 0 : _p.x) == null ? void 0 : _q.ticks), {
+          font: { size: (_r = chartSettings.xAxisTickFontSize) != null ? _r : 12 }
+        })
+      }),
+      y: __spreadProps$e(__spreadValues$g({}, (_s = defaultOptions.scales) == null ? void 0 : _s.y), {
+        title: __spreadProps$e(__spreadValues$g({}, (_u = (_t = defaultOptions.scales) == null ? void 0 : _t.y) == null ? void 0 : _u.title), {
+          font: { size: (_v = chartSettings.yAxisTitleFontSize) != null ? _v : 13, weight: "bold" }
+        }),
+        ticks: __spreadProps$e(__spreadValues$g({}, (_x = (_w = defaultOptions.scales) == null ? void 0 : _w.y) == null ? void 0 : _x.ticks), {
+          font: { size: (_y = chartSettings.yAxisTickFontSize) != null ? _y : 12 }
+        })
+      })
+    })
+  }) : defaultOptions;
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-col h-full", children: [
+    ((chartSettings == null ? void 0 : chartSettings.titleText) || title) && (chartSettings == null ? void 0 : chartSettings.showTitle) !== false && /* @__PURE__ */ jsxRuntimeExports.jsx(
+      "p",
+      {
+        style: {
+          fontSize: `${(_z = chartSettings == null ? void 0 : chartSettings.titleFontSize) != null ? _z : 16}px`
+        },
+        className: "font-bold text-slate-900 text-center px-2 pt-4 pb-2 select-text cursor-text shrink-0",
+        children: (chartSettings == null ? void 0 : chartSettings.titleText) || title
+      }
+    ),
+    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex-1 min-h-0", children: /* @__PURE__ */ jsxRuntimeExports.jsx(Bar, { data, options: options != null ? options : mergedOptions, plugins: [barValuePlugin] }) })
+  ] });
 }
 /*!
@@ -21594,9 +21834,28 @@ var plugin$1 = {
   }
 };
-Chart$1.register(CategoryScale, LinearScale, PointElement, LineElement, plugin_title, plugin_tooltip, plugin_legend);
-function SeriesLineChart({ orientation, title, data, options, className, units, content, x_axis_title, y_axis_title }) {
-  var _a, _b;
+var __defProp$f = Object.defineProperty;
+var __defProps$d = Object.defineProperties;
+var __getOwnPropDescs$d = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$f = Object.getOwnPropertySymbols;
+var __hasOwnProp$f = Object.prototype.hasOwnProperty;
+var __propIsEnum$f = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$f = (obj, key, value) => key in obj ? __defProp$f(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$f = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp$f.call(b, prop))
+      __defNormalProp$f(a, prop, b[prop]);
+  if (__getOwnPropSymbols$f)
+    for (var prop of __getOwnPropSymbols$f(b)) {
+      if (__propIsEnum$f.call(b, prop))
+        __defNormalProp$f(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps$d = (a, b) => __defProps$d(a, __getOwnPropDescs$d(b));
+Chart$1.register(CategoryScale, LinearScale, PointElement, LineElement, plugin_tooltip, plugin_legend);
+function SeriesLineChart({ orientation, title, data, options, className, units, content, x_axis_title, y_axis_title, chartSettings }) {
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _A, _B, _C, _D;
   const formatValue = (value) => {
     const numValue = typeof value === "string" ? parseFloat(value) : value;
     if (!isNaN(numValue)) {
@@ -21617,10 +21876,10 @@ function SeriesLineChart({ orientation, title, data, options, className, units,
     maintainAspectRatio: false,
     layout: {
       padding: {
-        bottom: 0,
-        top: 0,
-        left: 0,
-        right: 0
+        bottom: 8,
+        top: 8,
+        left: 4,
+        right: 16
       }
     },
     plugins: {
@@ -21632,8 +21891,12 @@ function SeriesLineChart({ orientation, title, data, options, className, units,
           return false;
         }),
         labels: {
-          boxWidth: 12,
-          boxHeight: 12
+          boxWidth: 16,
+          boxHeight: 16,
+          padding: 16,
+          font: { size: 13, weight: "normal" },
+          usePointStyle: true,
+          pointStyle: "circle"
         },
         position: "bottom"
       },
@@ -21653,16 +21916,15 @@ function SeriesLineChart({ orientation, title, data, options, className, units,
         },
         formatter: (value) => value
       },
-      title: {
-        display: true,
-        text: title,
-        font: {
-          size: 18,
-          weight: "bold"
-        },
-        color: "#0F172A"
-      },
       tooltip: {
+        mode: "index",
+        intersect: false,
+        backgroundColor: "rgba(0, 0, 0, 0.8)",
+        titleFont: { size: 13, weight: "bold" },
+        bodyFont: { size: 12 },
+        padding: 12,
+        borderColor: "#ccc",
+        borderWidth: 1,
         callbacks: {
           label: function(context) {
             var _a2;
@@ -21676,33 +21938,111 @@ function SeriesLineChart({ orientation, title, data, options, className, units,
       x: {
         title: {
           display: !!x_axis_title,
-          text: x_axis_title
+          text: x_axis_title,
+          font: { size: 13, weight: "bold" },
+          padding: 8
         },
-        ticks: { autoSkip: true, maxTicksLimit: 8, maxRotation: 45, minRotation: 0 }
+        ticks: {
+          autoSkip: true,
+          maxRotation: 45,
+          minRotation: 0,
+          font: { size: 12 },
+          maxTicksLimit: 10
+        },
+        grid: {
+          color: "rgba(0, 0, 0, 0.05)"
+        }
       },
       y: {
         title: {
           display: true,
-          text: y_axis_title || ((data == null ? void 0 : data.datasets) && ((_a = data == null ? void 0 : data.datasets) == null ? void 0 : _a.length) === 1 ? (_b = data == null ? void 0 : data.datasets) == null ? void 0 : _b[0].label : getAxisLabel(units != null ? units : ""))
+          text: y_axis_title || ((data == null ? void 0 : data.datasets) && ((_a = data == null ? void 0 : data.datasets) == null ? void 0 : _a.length) === 1 ? (_b = data == null ? void 0 : data.datasets) == null ? void 0 : _b[0].label : getAxisLabel(units != null ? units : "")),
+          font: { size: 13, weight: "bold" },
+          padding: 12
         },
         beginAtZero: true,
         ticks: {
+          font: { size: 12 },
           callback: function(value) {
             return units ? `${formatValue(value)} ${units}` : value;
           }
+        },
+        grid: {
+          color: "rgba(0, 0, 0, 0.05)"
         }
       }
     },
     elements: {
       line: {
-        tension: 0.1
+        tension: 0.3
       },
       point: {
         radius: 4
       }
     }
   };
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(Line, { data, options: options != null ? options : defaultOptions, plugins: [plugin$1] });
+  const mergedOptions = chartSettings ? __spreadProps$d(__spreadValues$f({}, defaultOptions), {
+    plugins: __spreadProps$d(__spreadValues$f({}, defaultOptions.plugins), {
+      legend: __spreadProps$d(__spreadValues$f({}, (_c = defaultOptions.plugins) == null ? void 0 : _c.legend), {
+        display: chartSettings.showLegend !== false,
+        labels: __spreadProps$d(__spreadValues$f({}, (_e = (_d = defaultOptions.plugins) == null ? void 0 : _d.legend) == null ? void 0 : _e.labels), {
+          boxWidth: (_f = chartSettings.legendBoxSize) != null ? _f : 16,
+          boxHeight: (_g = chartSettings.legendBoxSize) != null ? _g : 16,
+          font: { size: (_h = chartSettings.legendFontSize) != null ? _h : 13 }
+        })
+      }),
+      datalabels: __spreadProps$d(__spreadValues$f({}, (_i = defaultOptions.plugins) == null ? void 0 : _i.datalabels), {
+        display: (context) => {
+          var _a2;
+          return context.dataset.data[context.dataIndex] !== null && ((_a2 = chartSettings.showLabels) != null ? _a2 : false);
+        },
+        font: { size: (_j = chartSettings.dataLabelsFontSize) != null ? _j : 12 }
+      }),
+      tooltip: __spreadProps$d(__spreadValues$f({}, (_k = defaultOptions.plugins) == null ? void 0 : _k.tooltip), {
+        bodyFont: { size: (_l = chartSettings.tooltipFontSize) != null ? _l : 12 },
+        titleFont: { size: (_m = chartSettings.tooltipFontSize) != null ? _m : 12 }
+      })
+    }),
+    scales: __spreadProps$d(__spreadValues$f({}, defaultOptions.scales), {
+      x: __spreadProps$d(__spreadValues$f({}, (_n = defaultOptions.scales) == null ? void 0 : _n.x), {
+        title: __spreadProps$d(__spreadValues$f({}, (_p = (_o = defaultOptions.scales) == null ? void 0 : _o.x) == null ? void 0 : _p.title), {
+          font: { size: (_q = chartSettings.xAxisTitleFontSize) != null ? _q : 13, weight: "bold" }
+        }),
+        ticks: __spreadProps$d(__spreadValues$f({}, (_s = (_r = defaultOptions.scales) == null ? void 0 : _r.x) == null ? void 0 : _s.ticks), {
+          font: { size: (_t = chartSettings.xAxisTickFontSize) != null ? _t : 12 }
+        })
+      }),
+      y: __spreadProps$d(__spreadValues$f({}, (_u = defaultOptions.scales) == null ? void 0 : _u.y), {
+        title: __spreadProps$d(__spreadValues$f({}, (_w = (_v = defaultOptions.scales) == null ? void 0 : _v.y) == null ? void 0 : _w.title), {
+          font: { size: (_x = chartSettings.yAxisTitleFontSize) != null ? _x : 13, weight: "bold" }
+        }),
+        ticks: __spreadProps$d(__spreadValues$f({}, (_z = (_y = defaultOptions.scales) == null ? void 0 : _y.y) == null ? void 0 : _z.ticks), {
+          font: { size: (_A = chartSettings.yAxisTickFontSize) != null ? _A : 12 }
+        })
+      })
+    }),
+    elements: {
+      line: {
+        tension: (_B = chartSettings.lineTension) != null ? _B : 0.3
+      },
+      point: {
+        radius: (_C = chartSettings.pointRadius) != null ? _C : 4
+      }
+    }
+  }) : defaultOptions;
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-col h-full", children: [
+    ((chartSettings == null ? void 0 : chartSettings.titleText) || title) && (chartSettings == null ? void 0 : chartSettings.showTitle) !== false && /* @__PURE__ */ jsxRuntimeExports.jsx(
+      "p",
+      {
+        style: {
+          fontSize: `${(_D = chartSettings == null ? void 0 : chartSettings.titleFontSize) != null ? _D : 16}px`
+        },
+        className: "font-bold text-slate-900 text-center px-2 pt-4 pb-2 select-text cursor-text shrink-0",
+        children: (chartSettings == null ? void 0 : chartSettings.titleText) || title
+      }
+    ),
+    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex-1 min-h-0", children: /* @__PURE__ */ jsxRuntimeExports.jsx(Line, { data, options: options != null ? options : mergedOptions, plugins: [plugin$1] }) })
+  ] });
 }
 /*!
@@ -22487,9 +22827,29 @@ var plugin = {
     },
 };
+var __defProp$e = Object.defineProperty;
+var __defProps$c = Object.defineProperties;
+var __getOwnPropDescs$c = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$e = Object.getOwnPropertySymbols;
+var __hasOwnProp$e = Object.prototype.hasOwnProperty;
+var __propIsEnum$e = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$e = (obj, key, value) => key in obj ? __defProp$e(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$e = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp$e.call(b, prop))
+      __defNormalProp$e(a, prop, b[prop]);
+  if (__getOwnPropSymbols$e)
+    for (var prop of __getOwnPropSymbols$e(b)) {
+      if (__propIsEnum$e.call(b, prop))
+        __defNormalProp$e(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps$c = (a, b) => __defProps$c(a, __getOwnPropDescs$c(b));
 Chart$1.register(ArcElement, plugin_tooltip, plugin_legend);
 const PieChart = (props) => {
-  const { data, title, options, units, content } = props;
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o;
+  const { data, title, options, units, content, chartSettings } = props;
   const formatValue = (value) => {
     const numValue = typeof value === "string" ? parseFloat(value) : value;
     if (units === "$" && !isNaN(numValue)) {
@@ -22503,52 +22863,55 @@ const PieChart = (props) => {
     plugins: {
       legend: {
         labels: {
-          boxWidth: 4,
-          boxHeight: 4
+          boxWidth: 16,
+          boxHeight: 16,
+          padding: 12,
+          font: { size: 13, weight: "normal" },
+          usePointStyle: true,
+          pointStyle: "circle"
         },
         position: "bottom"
       },
       outlabels: {
         display: (context) => {
-          var _a;
-          return context.dataset.data[context.dataIndex] !== null && ((_a = content == null ? void 0 : content.showLabels) != null ? _a : false);
+          var _a2;
+          return context.dataset.data[context.dataIndex] !== null && ((_a2 = content == null ? void 0 : content.showLabels) != null ? _a2 : false);
         },
         text: (ctx) => {
-          var _a;
+          var _a2;
           const dataset = ctx.dataset.data;
           const total = dataset.reduce((a, b) => a + b, 0);
           const value = dataset[ctx.dataIndex];
           const percent = value / total * 100;
-          return percent >= 5 ? `${(_a = ctx.chart.data.labels) == null ? void 0 : _a[ctx.dataIndex]} ${value}` : "";
+          return percent >= 5 ? `${(_a2 = ctx.chart.data.labels) == null ? void 0 : _a2[ctx.dataIndex]} ${value}` : "";
         },
-        color: "black",
-        stretch: 15,
+        color: "#0F172A",
+        stretch: 25,
+        padding: 4,
         font: {
           resizable: true,
-          minSize: 12,
-          maxSize: 18
+          minSize: 11,
+          maxSize: 14,
+          weight: "bold"
         },
         backgroundColor: (ctx) => {
           const dataset = ctx.dataset.data;
           const total = dataset.reduce((a, b) => a + b, 0);
           const value = dataset[ctx.dataIndex];
           const percent = value / total * 100;
-          return percent >= 5 ? "rgba(255,255,255,0.7)" : "transparent";
+          return percent >= 5 ? "rgba(255,255,255,0.85)" : "transparent";
         }
       },
       datalabels: {
         display: false
       },
-      title: {
-        display: true,
-        text: title,
-        font: {
-          size: 18,
-          weight: "bold"
-        },
-        color: "#0F172A"
-      },
       tooltip: {
+        backgroundColor: "rgba(0, 0, 0, 0.8)",
+        titleFont: { size: 13, weight: "bold" },
+        bodyFont: { size: 12 },
+        padding: 12,
+        borderColor: "#ccc",
+        borderWidth: 1,
         callbacks: {
           label: function(context) {
             const value = context.parsed;
@@ -22559,14 +22922,48 @@ const PieChart = (props) => {
     },
     layout: {
       padding: {
-        bottom: 0,
-        top: 0,
-        left: 0,
-        right: 0
+        bottom: 4,
+        top: 24,
+        left: 4,
+        right: 4
       }
     }
   };
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(Pie, { data, options: options != null ? options : defaultOptions, plugins: [plugin] });
+  const mergedOptions = chartSettings ? __spreadProps$c(__spreadValues$e({}, defaultOptions), {
+    plugins: __spreadProps$c(__spreadValues$e({}, defaultOptions.plugins), {
+      legend: __spreadProps$c(__spreadValues$e({}, (_a = defaultOptions.plugins) == null ? void 0 : _a.legend), {
+        display: chartSettings.showLegend !== false,
+        labels: __spreadProps$c(__spreadValues$e({}, (_c = (_b = defaultOptions.plugins) == null ? void 0 : _b.legend) == null ? void 0 : _c.labels), {
+          boxWidth: (_d = chartSettings.legendBoxSize) != null ? _d : 16,
+          boxHeight: (_e = chartSettings.legendBoxSize) != null ? _e : 16,
+          font: { size: (_f = chartSettings.legendFontSize) != null ? _f : 13 }
+        })
+      }),
+      outlabels: __spreadProps$c(__spreadValues$e({}, (_g = defaultOptions.plugins) == null ? void 0 : _g.outlabels), {
+        font: __spreadProps$c(__spreadValues$e({}, (_i = (_h = defaultOptions.plugins) == null ? void 0 : _h.outlabels) == null ? void 0 : _i.font), {
+          minSize: (_j = chartSettings.dataLabelsFontSize) != null ? _j : 11,
+          maxSize: ((_k = chartSettings.dataLabelsFontSize) != null ? _k : 12) + 2
+        })
+      }),
+      tooltip: __spreadProps$c(__spreadValues$e({}, (_l = defaultOptions.plugins) == null ? void 0 : _l.tooltip), {
+        bodyFont: { size: (_m = chartSettings.tooltipFontSize) != null ? _m : 12 },
+        titleFont: { size: (_n = chartSettings.tooltipFontSize) != null ? _n : 12 }
+      })
+    })
+  }) : defaultOptions;
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-col h-full", children: [
+    ((chartSettings == null ? void 0 : chartSettings.titleText) || title) && (chartSettings == null ? void 0 : chartSettings.showTitle) !== false && /* @__PURE__ */ jsxRuntimeExports.jsx(
+      "p",
+      {
+        style: {
+          fontSize: `${(_o = chartSettings == null ? void 0 : chartSettings.titleFontSize) != null ? _o : 16}px`
+        },
+        className: "font-bold text-slate-900 text-center px-2 pt-4 pb-2 select-text cursor-text shrink-0",
+        children: (chartSettings == null ? void 0 : chartSettings.titleText) || title
+      }
+    ),
+    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex-1 min-h-0", children: /* @__PURE__ */ jsxRuntimeExports.jsx(Pie, { data, options: options != null ? options : mergedOptions, plugins: [plugin] }) })
+  ] });
 };
 Chart$1.register(CategoryScale, LinearScale, PointElement, LineElement, plugin_title, plugin_tooltip, plugin_legend);
@@ -36931,7 +37328,7 @@ const own$2 = {}.hasOwnProperty;
  *   mdast tree.
  */
 function fromMarkdown(value, encoding, options) {
-  if (typeof encoding !== 'string') {
+  if (encoding && typeof encoding === 'object') {
     options = encoding;
     encoding = undefined;
   }
@@ -43491,27 +43888,27 @@ function SummaryWidget({ title, data, metadata, className }) {
   ] });
 }
-var __defProp$c = Object.defineProperty;
-var __defProps$a = Object.defineProperties;
-var __getOwnPropDescs$a = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$c = Object.getOwnPropertySymbols;
-var __hasOwnProp$c = Object.prototype.hasOwnProperty;
-var __propIsEnum$c = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$c = (obj, key, value) => key in obj ? __defProp$c(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$c = (a, b) => {
+var __defProp$d = Object.defineProperty;
+var __defProps$b = Object.defineProperties;
+var __getOwnPropDescs$b = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$d = Object.getOwnPropertySymbols;
+var __hasOwnProp$d = Object.prototype.hasOwnProperty;
+var __propIsEnum$d = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$d = (obj, key, value) => key in obj ? __defProp$d(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$d = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$c.call(b, prop))
-      __defNormalProp$c(a, prop, b[prop]);
-  if (__getOwnPropSymbols$c)
-    for (var prop of __getOwnPropSymbols$c(b)) {
-      if (__propIsEnum$c.call(b, prop))
-        __defNormalProp$c(a, prop, b[prop]);
+    if (__hasOwnProp$d.call(b, prop))
+      __defNormalProp$d(a, prop, b[prop]);
+  if (__getOwnPropSymbols$d)
+    for (var prop of __getOwnPropSymbols$d(b)) {
+      if (__propIsEnum$d.call(b, prop))
+        __defNormalProp$d(a, prop, b[prop]);
     }
   return a;
 };
-var __spreadProps$a = (a, b) => __defProps$a(a, __getOwnPropDescs$a(b));
+var __spreadProps$b = (a, b) => __defProps$b(a, __getOwnPropDescs$b(b));
 const CHART_REFRESH_TIMEOUT$4 = 3e3;
-const DEFAULT_COLORS$3 = ["#E4DCB8", "#DAC46C", "#808080", "#582809", "#A3ADD0", "#398E6F", "#AF123D", "#8C99C4", "#5290AC", "#601B07", "#50649D", "#B4A8A0", "#6F2587"];
+const DEFAULT_COLORS$4 = ["#E4DCB8", "#DAC46C", "#808080", "#582809", "#A3ADD0", "#398E6F", "#AF123D", "#8C99C4", "#5290AC", "#601B07", "#50649D", "#B4A8A0", "#6F2587"];
 const LINE_COLORS = ["#243D84", "#69238B", "#4A959F", "#D0A677", "#B31E47", "#396431"];
 const clearChat$5 = async (widgetBackendUrl, widgetId) => {
   if (!widgetBackendUrl || !widgetId) return;
@@ -43541,7 +43938,7 @@ const createInitialChartState$4 = (agentType, widgetIds, datasetId) => {
   const baseState = { dataset_id: datasetId || "home_generation_dataset" };
   switch (agentType) {
     case "Pie Chart Agent":
-      return __spreadValues$c({
+      return __spreadValues$d({
         pie_chart_data: {
           title: "",
           type: "pie",
@@ -43552,7 +43949,7 @@ const createInitialChartState$4 = (agentType, widgetIds, datasetId) => {
       }, baseState);
     case "Line Chart Agent":
     case "Bar Chart Agent":
-      return __spreadValues$c({
+      return __spreadValues$d({
         bar_chart_data: {
           title: "",
           type: agentType === "Line Chart Agent" ? "line" : "bar",
@@ -43564,7 +43961,7 @@ const createInitialChartState$4 = (agentType, widgetIds, datasetId) => {
       }, baseState);
     case "Series Bar Chart Agent":
     case "Series Line Chart Agent":
-      return __spreadValues$c({
+      return __spreadValues$d({
         series_bar_chart_data: {
           title: "",
           type: "series_bar",
@@ -43590,7 +43987,7 @@ const createInitialChartState$4 = (agentType, widgetIds, datasetId) => {
         }
       }, baseState);
     case "Data Grid Agent":
-      return __spreadValues$c({
+      return __spreadValues$d({
         matrix_grid_data: {
           title: "",
           type: "data_grid",
@@ -43601,7 +43998,7 @@ const createInitialChartState$4 = (agentType, widgetIds, datasetId) => {
         }
       }, baseState);
     case "Summary Agent":
-      return __spreadValues$c({
+      return __spreadValues$d({
         summary_data: {
           title: "",
           type: "summary",
@@ -43610,7 +44007,7 @@ const createInitialChartState$4 = (agentType, widgetIds, datasetId) => {
         }
       }, baseState);
     default:
-      return __spreadValues$c({ widget_ids: widgetIds }, baseState);
+      return __spreadValues$d({ widget_ids: widgetIds }, baseState);
   }
 };
 const loadAgentState$5 = async (widgetBackendUrl, threadId, agentName) => {
@@ -43650,7 +44047,7 @@ const parseAndUpdateChartState$4 = (apiResponse, setChartState) => {
       if (parsedState.state) {
         const chartData = parsedState.state;
         setChartState((prevState) => {
-          const newChartState = __spreadValues$c({}, prevState);
+          const newChartState = __spreadValues$d({}, prevState);
           if (chartData.bar_chart_data) {
             newChartState.bar_chart_data = chartData.bar_chart_data;
           }
@@ -43749,7 +44146,7 @@ function BarChartComponent({
     }
   }, [isEmpty, startLoadingTimeout, clearLoadingTimeout]);
   const finalColors = React.useMemo(() => {
-    return shuffleColors(DEFAULT_COLORS$3, labels == null ? void 0 : labels.length);
+    return shuffleColors(DEFAULT_COLORS$4, labels == null ? void 0 : labels.length);
   }, [labels.length]);
   if (isEmpty) {
     return createLoadingComponent$5();
@@ -43815,7 +44212,7 @@ function SeriesBarChartComponent$2({
     }
   }, [isEmpty, startLoadingTimeout, clearLoadingTimeout]);
   const finalColors = React.useMemo(() => {
-    return shuffleColors(DEFAULT_COLORS$3, series == null ? void 0 : series.length);
+    return shuffleColors(DEFAULT_COLORS$4, series == null ? void 0 : series.length);
   }, [series.length]);
   if (isEmpty) {
     return createLoadingComponent$5();
@@ -43879,7 +44276,7 @@ function SeriesLineChartComponent({
     }
   }, [isEmpty, startLoadingTimeout, clearLoadingTimeout]);
   const finalColors = React.useMemo(() => {
-    return shuffleColors([...LINE_COLORS, ...DEFAULT_COLORS$3], series == null ? void 0 : series.length);
+    return shuffleColors([...LINE_COLORS, ...DEFAULT_COLORS$4], series == null ? void 0 : series.length);
   }, [series.length]);
   if (isEmpty) {
     return createLoadingComponent$5();
@@ -43948,7 +44345,7 @@ function PieChartComponent$1({
     }
   }, [isEmpty, startLoadingTimeout, clearLoadingTimeout]);
   const backgroundColors = React.useMemo(() => {
-    return shuffleColors(DEFAULT_COLORS$3, labels.length);
+    return shuffleColors(DEFAULT_COLORS$4, labels.length);
   }, [labels.length]);
   if (isEmpty) {
     return createLoadingComponent$5();
@@ -44127,7 +44524,7 @@ function SummaryComponent({
   React.useEffect(() => {
     if (isEmpty && query && isFirstLoad && !(summaryState == null ? void 0 : summaryState.agent_message) && !hasCalledRef.current) {
       hasCalledRef.current = true;
-      setChartState(__spreadProps$a(__spreadValues$c({}, summaryState), {
+      setChartState(__spreadProps$b(__spreadValues$d({}, summaryState), {
         widget_ids
       }));
       setTimeout(() => {
@@ -44204,7 +44601,7 @@ function CopilotKitAgent({
     if (apiCallCount >= 10) {
       console.log("API call limit reached for widget:", widget.id);
       setHasTimeoutError(true);
-      setChartState((prevState) => __spreadProps$a(__spreadValues$c({}, prevState), {
+      setChartState((prevState) => __spreadProps$b(__spreadValues$d({}, prevState), {
         agent_message: "Timeout: Unable to load data after multiple attempts. Please try refreshing the widget."
       }));
       return;
@@ -44613,25 +45010,25 @@ function exportChatToPDF(options) {
   doc.save(filename);
 }
-var __defProp$b = Object.defineProperty;
-var __defProps$9 = Object.defineProperties;
-var __getOwnPropDescs$9 = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$b = Object.getOwnPropertySymbols;
-var __hasOwnProp$b = Object.prototype.hasOwnProperty;
-var __propIsEnum$b = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$b = (obj, key, value) => key in obj ? __defProp$b(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$b = (a, b) => {
+var __defProp$c = Object.defineProperty;
+var __defProps$a = Object.defineProperties;
+var __getOwnPropDescs$a = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$c = Object.getOwnPropertySymbols;
+var __hasOwnProp$c = Object.prototype.hasOwnProperty;
+var __propIsEnum$c = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$c = (obj, key, value) => key in obj ? __defProp$c(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$c = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$b.call(b, prop))
-      __defNormalProp$b(a, prop, b[prop]);
-  if (__getOwnPropSymbols$b)
-    for (var prop of __getOwnPropSymbols$b(b)) {
-      if (__propIsEnum$b.call(b, prop))
-        __defNormalProp$b(a, prop, b[prop]);
+    if (__hasOwnProp$c.call(b, prop))
+      __defNormalProp$c(a, prop, b[prop]);
+  if (__getOwnPropSymbols$c)
+    for (var prop of __getOwnPropSymbols$c(b)) {
+      if (__propIsEnum$c.call(b, prop))
+        __defNormalProp$c(a, prop, b[prop]);
     }
   return a;
 };
-var __spreadProps$9 = (a, b) => __defProps$9(a, __getOwnPropDescs$9(b));
+var __spreadProps$a = (a, b) => __defProps$a(a, __getOwnPropDescs$a(b));
 const getStyleValues$4 = (styles = {}) => {
   const borderRadiusMap = {
     none: "0px",
@@ -44662,7 +45059,9 @@ function CopilotKitChatbot({
   onResetReady,
   widgetIds,
   datasetId,
-  dashboardName
+  dashboardName,
+  onClearChat,
+  isClearing = false
 }) {
   var _a, _b, _c, _d;
   const { threadId, setThreadId } = reactCore.useCopilotContext();
@@ -44749,7 +45148,7 @@ function CopilotKitChatbot({
   const handleSubmit = (e) => {
     e.preventDefault();
     if (!inputValue.trim()) return;
-    setChatbotState((prevState) => __spreadProps$9(__spreadValues$b({}, prevState), {
+    setChatbotState((prevState) => __spreadProps$a(__spreadValues$c({}, prevState), {
       widget_ids: widgetIds,
       dataset_id: datasetId
     }));
@@ -44771,25 +45170,46 @@ function CopilotKitChatbot({
       /* @__PURE__ */ jsxRuntimeExports.jsx("h3", { className: "text-sm font-medium", children: widget.title })
     ] }) }),
     /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex-1 h-full flex flex-col", children: [
-      chatMessages.length > 0 && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex items-center justify-start px-4 py-2 border-b border-gray-100", children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
-        "button",
-        {
-          onClick: handleExport,
-          disabled: isExporting,
-          className: cn(
-            "flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium rounded-md",
-            "bg-gray-100 border border-gray-200",
-            "text-gray-700 hover:bg-gray-200 hover:border-gray-300",
-            "disabled:opacity-50 disabled:cursor-not-allowed",
-            "transition-colors duration-150"
-          ),
-          title: "Export conversation as PDF",
-          children: [
-            isExporting ? /* @__PURE__ */ jsxRuntimeExports.jsx(lucideReact.Loader2, { className: "h-3.5 w-3.5 animate-spin" }) : /* @__PURE__ */ jsxRuntimeExports.jsx(lucideReact.Download, { className: "h-3.5 w-3.5" }),
-            /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: "Export PDF" })
-          ]
-        }
-      ) }),
+      chatMessages.length > 0 && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-start gap-2 px-4 py-2 border-b border-gray-100", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsxs(
+          "button",
+          {
+            onClick: handleExport,
+            disabled: isExporting,
+            className: cn(
+              "flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium rounded-md",
+              "bg-gray-100 border border-gray-200",
+              "text-gray-700 hover:bg-gray-200 hover:border-gray-300",
+              "disabled:opacity-50 disabled:cursor-not-allowed",
+              "transition-colors duration-150"
+            ),
+            title: "Export conversation as PDF",
+            children: [
+              isExporting ? /* @__PURE__ */ jsxRuntimeExports.jsx(lucideReact.Loader2, { className: "h-3.5 w-3.5 animate-spin" }) : /* @__PURE__ */ jsxRuntimeExports.jsx(lucideReact.Download, { className: "h-3.5 w-3.5" }),
+              /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: "Export PDF" })
+            ]
+          }
+        ),
+        onClearChat && /* @__PURE__ */ jsxRuntimeExports.jsxs(
+          "button",
+          {
+            onClick: onClearChat,
+            disabled: isClearing,
+            className: cn(
+              "flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium rounded-md",
+              "bg-gray-100 border border-gray-200",
+              "text-gray-700 hover:bg-gray-200 hover:border-gray-300",
+              "disabled:opacity-50 disabled:cursor-not-allowed",
+              "transition-colors duration-150"
+            ),
+            title: "Clear chat conversation",
+            children: [
+              isClearing ? /* @__PURE__ */ jsxRuntimeExports.jsx(lucideReact.Loader2, { className: "h-3.5 w-3.5 animate-spin" }) : /* @__PURE__ */ jsxRuntimeExports.jsx(lucideReact.MessageCircleX, { className: "h-3.5 w-3.5" }),
+              /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: "Clear Chat" })
+            ]
+          }
+        )
+      ] }),
       /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex-1 overflow-y-auto p-4 space-y-4", children: chatMessages.length === 0 ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-center text-gray-500 text-xs mt-8", children: ((_b = widget.config) == null ? void 0 : _b.copilotInitialMessage) || ((_c = widget.config) == null ? void 0 : _c.placeholder) || "How can I help you today?" }) : /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
         chatMessages.map((message) => /* @__PURE__ */ jsxRuntimeExports.jsx(
           "div",
@@ -44866,7 +45286,9 @@ function ChatbotWidget({
   onResetReady,
   widgetIds,
   datasetId,
-  dashboardName
+  dashboardName,
+  onClearChat,
+  isClearing = false
 }) {
   var _a, _b;
   const styles = getStyleValues$4((_a = widget.config) == null ? void 0 : _a.styles);
@@ -44891,49 +45313,51 @@ function ChatbotWidget({
           onResetReady,
           widgetIds,
           datasetId,
-          dashboardName
+          dashboardName,
+          onClearChat,
+          isClearing
         }
       )
     }
   );
 }
-var __defProp$a = Object.defineProperty;
-var __defProps$8 = Object.defineProperties;
-var __getOwnPropDescs$8 = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$a = Object.getOwnPropertySymbols;
-var __hasOwnProp$a = Object.prototype.hasOwnProperty;
-var __propIsEnum$a = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$a = (obj, key, value) => key in obj ? __defProp$a(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$a = (a, b) => {
+var __defProp$b = Object.defineProperty;
+var __defProps$9 = Object.defineProperties;
+var __getOwnPropDescs$9 = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$b = Object.getOwnPropertySymbols;
+var __hasOwnProp$b = Object.prototype.hasOwnProperty;
+var __propIsEnum$b = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$b = (obj, key, value) => key in obj ? __defProp$b(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$b = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$a.call(b, prop))
-      __defNormalProp$a(a, prop, b[prop]);
-  if (__getOwnPropSymbols$a)
-    for (var prop of __getOwnPropSymbols$a(b)) {
-      if (__propIsEnum$a.call(b, prop))
-        __defNormalProp$a(a, prop, b[prop]);
+    if (__hasOwnProp$b.call(b, prop))
+      __defNormalProp$b(a, prop, b[prop]);
+  if (__getOwnPropSymbols$b)
+    for (var prop of __getOwnPropSymbols$b(b)) {
+      if (__propIsEnum$b.call(b, prop))
+        __defNormalProp$b(a, prop, b[prop]);
     }
   return a;
 };
-var __spreadProps$8 = (a, b) => __defProps$8(a, __getOwnPropDescs$8(b));
-var __objRest$2 = (source, exclude) => {
+var __spreadProps$9 = (a, b) => __defProps$9(a, __getOwnPropDescs$9(b));
+var __objRest$3 = (source, exclude) => {
   var target = {};
   for (var prop in source)
-    if (__hasOwnProp$a.call(source, prop) && exclude.indexOf(prop) < 0)
+    if (__hasOwnProp$b.call(source, prop) && exclude.indexOf(prop) < 0)
       target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols$a)
-    for (var prop of __getOwnPropSymbols$a(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum$a.call(source, prop))
+  if (source != null && __getOwnPropSymbols$b)
+    for (var prop of __getOwnPropSymbols$b(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum$b.call(source, prop))
         target[prop] = source[prop];
     }
   return target;
 };
 const Checkbox = React__namespace.forwardRef((_a, ref) => {
-  var _b = _a, { className } = _b, props = __objRest$2(_b, ["className"]);
+  var _b = _a, { className } = _b, props = __objRest$3(_b, ["className"]);
   return /* @__PURE__ */ jsxRuntimeExports.jsx(
     CheckboxPrimitive__namespace.Root,
-    __spreadProps$8(__spreadValues$a({
+    __spreadProps$9(__spreadValues$b({
       ref,
       className: cn(
         "peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
@@ -44952,25 +45376,25 @@ const Checkbox = React__namespace.forwardRef((_a, ref) => {
 });
 Checkbox.displayName = CheckboxPrimitive__namespace.Root.displayName;
-var __defProp$9 = Object.defineProperty;
-var __defProps$7 = Object.defineProperties;
-var __getOwnPropDescs$7 = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$9 = Object.getOwnPropertySymbols;
-var __hasOwnProp$9 = Object.prototype.hasOwnProperty;
-var __propIsEnum$9 = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$9 = (obj, key, value) => key in obj ? __defProp$9(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$9 = (a, b) => {
+var __defProp$a = Object.defineProperty;
+var __defProps$8 = Object.defineProperties;
+var __getOwnPropDescs$8 = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$a = Object.getOwnPropertySymbols;
+var __hasOwnProp$a = Object.prototype.hasOwnProperty;
+var __propIsEnum$a = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$a = (obj, key, value) => key in obj ? __defProp$a(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$a = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$9.call(b, prop))
-      __defNormalProp$9(a, prop, b[prop]);
-  if (__getOwnPropSymbols$9)
-    for (var prop of __getOwnPropSymbols$9(b)) {
-      if (__propIsEnum$9.call(b, prop))
-        __defNormalProp$9(a, prop, b[prop]);
+    if (__hasOwnProp$a.call(b, prop))
+      __defNormalProp$a(a, prop, b[prop]);
+  if (__getOwnPropSymbols$a)
+    for (var prop of __getOwnPropSymbols$a(b)) {
+      if (__propIsEnum$a.call(b, prop))
+        __defNormalProp$a(a, prop, b[prop]);
     }
   return a;
 };
-var __spreadProps$7 = (a, b) => __defProps$7(a, __getOwnPropDescs$7(b));
+var __spreadProps$8 = (a, b) => __defProps$8(a, __getOwnPropDescs$8(b));
 const FILTER_REFRESH_TIMEOUT = 3e3;
 const clearChat$4 = async (widgetBackendUrl, widgetId) => {
   if (!widgetBackendUrl || !widgetId) return;
@@ -45039,7 +45463,7 @@ const parseAndUpdateFilterState = (apiResponse, setFilterState) => {
       if (parsedState.state) {
         const filterData = parsedState.state;
         setFilterState((prevState) => {
-          const newFilterState = __spreadValues$9({}, prevState);
+          const newFilterState = __spreadValues$a({}, prevState);
           if (filterData.column_values) {
             newFilterState.column_values = filterData.column_values;
           }
@@ -45128,7 +45552,7 @@ function TableSelectionConfirmation({
         {
           value: selectedTables[col.column] || "",
           onChange: (e) => {
-            setSelectedTables((prev) => __spreadProps$7(__spreadValues$9({}, prev), {
+            setSelectedTables((prev) => __spreadProps$8(__spreadValues$a({}, prev), {
               [col.column]: e.target.value
             }));
           },
@@ -45244,7 +45668,7 @@ function FiltersContent({
     }
   }, [(_a = widget.config) == null ? void 0 : _a.filters, filterGroups]);
   const toggleGroup = (groupId) => {
-    setExpandedGroups((prev) => __spreadProps$7(__spreadValues$9({}, prev), {
+    setExpandedGroups((prev) => __spreadProps$8(__spreadValues$a({}, prev), {
       [groupId]: !prev[groupId]
     }));
   };
@@ -45257,7 +45681,7 @@ function FiltersContent({
       } else {
         newGroupFilters = groupFilters.filter((id) => id !== optionId);
       }
-      const newFilters = __spreadProps$7(__spreadValues$9({}, prev), {
+      const newFilters = __spreadProps$8(__spreadValues$a({}, prev), {
         [groupId]: newGroupFilters
       });
       if (onFilterChange) {
@@ -45267,7 +45691,7 @@ function FiltersContent({
     });
   };
   const handleSearchChange = (groupId, query2) => {
-    setSearchQueries((prev) => __spreadProps$7(__spreadValues$9({}, prev), {
+    setSearchQueries((prev) => __spreadProps$8(__spreadValues$a({}, prev), {
       [groupId]: query2
     }));
   };
@@ -45285,7 +45709,7 @@ function FiltersContent({
   };
   const clearGroupFilters = (groupId) => {
     setSelectedFilters((prev) => {
-      const newFilters = __spreadProps$7(__spreadValues$9({}, prev), { [groupId]: [] });
+      const newFilters = __spreadProps$8(__spreadValues$a({}, prev), { [groupId]: [] });
       if (onFilterChange) {
         onFilterChange(newFilters);
       }
@@ -45447,7 +45871,7 @@ function FiltersContent({
                       "Content-Type": "application/json"
                     },
                     body: JSON.stringify({
-                      config: __spreadProps$7(__spreadValues$9({}, widget.config), {
+                      config: __spreadProps$8(__spreadValues$a({}, widget.config), {
                         filters: filtersWithLabels
                       })
                     })
@@ -45527,7 +45951,7 @@ function CopilotKitFilters({
     if (apiCallCount >= 30) {
       console.log("API call limit reached for widget:", widget.id);
       setHasTimeoutError(true);
-      setFilterState((prevState) => __spreadProps$7(__spreadValues$9({}, prevState), {
+      setFilterState((prevState) => __spreadProps$8(__spreadValues$a({}, prevState), {
         agent_message: "Timeout: Unable to load filter data after multiple attempts. Please try refreshing the widget."
       }));
       return;
@@ -45668,7 +46092,7 @@ function CopilotKitFilters({
     startLoadingTimeout();
   }, [filterState.filter_columns, filterState.ambiguous_columns, (_f = widget.config) == null ? void 0 : _f.query, datasetId, appendMessage, setFilterState, setAgentState, startLoadingTimeout, setApiCallCount, setHasTimeoutError]);
   const handleCancelConfirmation = React.useCallback(() => {
-    setFilterState((prev) => __spreadProps$7(__spreadValues$9({}, prev), {
+    setFilterState((prev) => __spreadProps$8(__spreadValues$a({}, prev), {
       status: void 0,
       ambiguous_columns: void 0,
       message: void 0
@@ -45762,27 +46186,27 @@ function FiltersWidget({
   );
 }
-var __defProp$8 = Object.defineProperty;
-var __defProps$6 = Object.defineProperties;
-var __getOwnPropDescs$6 = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$8 = Object.getOwnPropertySymbols;
-var __hasOwnProp$8 = Object.prototype.hasOwnProperty;
-var __propIsEnum$8 = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$8 = (obj, key, value) => key in obj ? __defProp$8(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$8 = (a, b) => {
+var __defProp$9 = Object.defineProperty;
+var __defProps$7 = Object.defineProperties;
+var __getOwnPropDescs$7 = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$9 = Object.getOwnPropertySymbols;
+var __hasOwnProp$9 = Object.prototype.hasOwnProperty;
+var __propIsEnum$9 = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$9 = (obj, key, value) => key in obj ? __defProp$9(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$9 = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$8.call(b, prop))
-      __defNormalProp$8(a, prop, b[prop]);
-  if (__getOwnPropSymbols$8)
-    for (var prop of __getOwnPropSymbols$8(b)) {
-      if (__propIsEnum$8.call(b, prop))
-        __defNormalProp$8(a, prop, b[prop]);
+    if (__hasOwnProp$9.call(b, prop))
+      __defNormalProp$9(a, prop, b[prop]);
+  if (__getOwnPropSymbols$9)
+    for (var prop of __getOwnPropSymbols$9(b)) {
+      if (__propIsEnum$9.call(b, prop))
+        __defNormalProp$9(a, prop, b[prop]);
     }
   return a;
 };
-var __spreadProps$6 = (a, b) => __defProps$6(a, __getOwnPropDescs$6(b));
+var __spreadProps$7 = (a, b) => __defProps$7(a, __getOwnPropDescs$7(b));
 const CHART_REFRESH_TIMEOUT$3 = 3e3;
-const DEFAULT_COLORS$2 = ["#E4DCB8", "#DAC46C", "#808080", "#582809", "#A3ADD0", "#398E6F", "#AF123D", "#8C99C4", "#5290AC", "#601B07", "#50649D", "#B4A8A0", "#6F2587"];
+const DEFAULT_COLORS$3 = ["#3B82F6", "#10B981", "#F59E0B", "#EF4444", "#8B5CF6", "#06B6D4", "#F97316", "#EC4899", "#14B8A6", "#6366F1", "#84CC16", "#FB7185", "#A78BFA", "#34D399", "#FBBF24"];
 const clearChat$3 = async (widgetBackendUrl, widgetId) => {
   if (!widgetBackendUrl || !widgetId) return;
   console.log("clearChat called for widgetId:", widgetId);
@@ -45856,7 +46280,7 @@ const parseAndUpdateChartState$3 = (apiResponse, setChartState) => {
       if (parsedState.state) {
         const chartData = parsedState.state;
         setChartState((prevState) => {
-          const newChartState = __spreadValues$8({}, prevState);
+          const newChartState = __spreadValues$9({}, prevState);
           if (chartData.pie_chart_data) {
             newChartState.pie_chart_data = chartData.pie_chart_data;
           }
@@ -45905,9 +46329,11 @@ function PieChartComponent({
   startLoadingTimeout,
   clearLoadingTimeout,
   content,
-  hasWidgetData
+  hasWidgetData,
+  chartSettings,
+  onConfigUpdate
 }) {
-  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j;
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k;
   const hasCalledRef = React.useRef(false);
   const labels = ((_b = (_a = pieChartState == null ? void 0 : pieChartState.pie_chart_data) == null ? void 0 : _a.data) == null ? void 0 : _b.labels) || [];
   const values = ((_d = (_c = pieChartState == null ? void 0 : pieChartState.pie_chart_data) == null ? void 0 : _c.data) == null ? void 0 : _d.values) || [];
@@ -45915,6 +46341,10 @@ function PieChartComponent({
   const chartTitle = ((_g = pieChartState == null ? void 0 : pieChartState.pie_chart_data) == null ? void 0 : _g.title) || "";
   const units = ((_h = pieChartState == null ? void 0 : pieChartState.pie_chart_data) == null ? void 0 : _h.units) || "";
   const isEmpty = labels.length === 0 || values.length === 0;
+  React.useEffect(() => {
+    console.log("[PieChartComponent] chartSettings:", chartSettings);
+    console.log("[PieChartComponent] seriesColors:", chartSettings == null ? void 0 : chartSettings.seriesColors);
+  }, [chartSettings]);
   const handleRefresh = async () => {
     if (query) {
       await clearChat$3(widgetBackendUrl, widgetId);
@@ -45944,24 +46374,49 @@ function PieChartComponent({
     }
   }, [isEmpty, startLoadingTimeout, clearLoadingTimeout, pieChartState]);
   const backgroundColors = React.useMemo(() => {
-    return shuffleColors(DEFAULT_COLORS$2, labels.length);
+    return shuffleColors(DEFAULT_COLORS$3, labels.length);
   }, [labels.length]);
+  const sortedIndices = React.useMemo(() => {
+    return labels.map((label, index) => ({ label, index, value: values[index] })).sort((a, b) => a.label.localeCompare(b.label)).map((item) => item.index);
+  }, [labels, values]);
+  const sortedLabels = React.useMemo(() => {
+    return sortedIndices.map((i) => labels[i]);
+  }, [sortedIndices, labels]);
+  const sortedValues = React.useMemo(() => {
+    return sortedIndices.map((i) => values[i]);
+  }, [sortedIndices, values]);
+  const colors = React.useMemo(() => {
+    var _a2, _b2;
+    if ((chartSettings == null ? void 0 : chartSettings.seriesColors) && chartSettings.seriesColors.length > 0) {
+      return chartSettings.seriesColors.slice(0, sortedLabels.length);
+    }
+    return ((_b2 = (_a2 = pieChartState == null ? void 0 : pieChartState.pie_chart_data) == null ? void 0 : _a2.data) == null ? void 0 : _b2.colors) || sortedLabels.map((_, index) => backgroundColors[index % backgroundColors.length]);
+  }, [chartSettings == null ? void 0 : chartSettings.seriesColors, sortedLabels, (_j = (_i = pieChartState == null ? void 0 : pieChartState.pie_chart_data) == null ? void 0 : _i.data) == null ? void 0 : _j.colors]);
+  React.useEffect(() => {
+    var _a2;
+    if (!isEmpty && colors.length > 0 && !((_a2 = chartSettings == null ? void 0 : chartSettings.seriesColors) == null ? void 0 : _a2.length) && onConfigUpdate && widgetId) {
+      onConfigUpdate(widgetId, {
+        chartSettings: __spreadProps$7(__spreadValues$9({}, chartSettings), {
+          seriesColors: colors
+        })
+      });
+    }
+  }, [sortedLabels.length, (_k = chartSettings == null ? void 0 : chartSettings.seriesColors) == null ? void 0 : _k.length, onConfigUpdate, widgetId, isEmpty]);
   if (isEmpty) {
     return createLoadingComponent$3();
   }
-  const colors = ((_j = (_i = pieChartState == null ? void 0 : pieChartState.pie_chart_data) == null ? void 0 : _i.data) == null ? void 0 : _j.colors) || labels.map((_, index) => backgroundColors[index % backgroundColors.length]);
   const transformedData = {
-    labels,
+    labels: sortedLabels,
     datasets: [
       {
         label: chartTitle || "Data",
-        data: values,
+        data: sortedValues,
         backgroundColor: colors,
         borderWidth: 0
       }
     ]
   };
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(PieChart, { title: chartTitle, data: transformedData, units, content });
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(PieChart, { title: chartTitle, data: transformedData, units, content, chartSettings });
 }
 function CopilotKitPieChart({
   widget,
@@ -45970,9 +46425,10 @@ function CopilotKitPieChart({
   onResetReady,
   widgetBackendUrl,
   datasetId,
-  widgetData
+  widgetData,
+  onConfigUpdate
 }) {
-  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q;
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r;
   const isFirstLoad = (_a = widget.config) == null ? void 0 : _a.isFirstLoad;
   const content = (_b = widget.config) == null ? void 0 : _b.content;
   const widget_data = (_c = widget.widget_data) == null ? void 0 : _c.pie_chart_data;
@@ -46012,7 +46468,7 @@ function CopilotKitPieChart({
     if (apiCallCount >= 30) {
       console.log("API call limit reached for widget:", widget.id);
       setHasTimeoutError(true);
-      setChartState((prevState) => __spreadProps$6(__spreadValues$8({}, prevState), {
+      setChartState((prevState) => __spreadProps$7(__spreadValues$9({}, prevState), {
         agent_message: "Timeout: Unable to load data after multiple attempts. Please try refreshing the widget."
       }));
       return;
@@ -46112,7 +46568,9 @@ function CopilotKitPieChart({
         widgetId: widget.id,
         startLoadingTimeout,
         clearLoadingTimeout,
-        hasWidgetData: !!(((_o = (_n = widget_data == null ? void 0 : widget_data.data) == null ? void 0 : _n.labels) == null ? void 0 : _o.length) && ((_q = (_p = widget_data == null ? void 0 : widget_data.data) == null ? void 0 : _p.values) == null ? void 0 : _q.length))
+        hasWidgetData: !!(((_o = (_n = widget_data == null ? void 0 : widget_data.data) == null ? void 0 : _n.labels) == null ? void 0 : _o.length) && ((_q = (_p = widget_data == null ? void 0 : widget_data.data) == null ? void 0 : _p.values) == null ? void 0 : _q.length)),
+        chartSettings: (_r = widget.config) == null ? void 0 : _r.chartSettings,
+        onConfigUpdate
       }
     ) })
   ] });
@@ -46124,7 +46582,8 @@ function PieChartWidget({
   onResetReady,
   widgetIds,
   datasetId,
-  widgetData
+  widgetData,
+  onConfigUpdate
 }) {
   var _a, _b;
   const styles = getStyleValues$3((_a = widget.config) == null ? void 0 : _a.styles);
@@ -46148,34 +46607,35 @@ function PieChartWidget({
           styles,
           onResetReady,
           widgetBackendUrl,
-          datasetId
+          datasetId,
+          onConfigUpdate
         }
       )
     }
   );
 }
-var __defProp$7 = Object.defineProperty;
-var __defProps$5 = Object.defineProperties;
-var __getOwnPropDescs$5 = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$7 = Object.getOwnPropertySymbols;
-var __hasOwnProp$7 = Object.prototype.hasOwnProperty;
-var __propIsEnum$7 = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$7 = (obj, key, value) => key in obj ? __defProp$7(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$7 = (a, b) => {
+var __defProp$8 = Object.defineProperty;
+var __defProps$6 = Object.defineProperties;
+var __getOwnPropDescs$6 = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$8 = Object.getOwnPropertySymbols;
+var __hasOwnProp$8 = Object.prototype.hasOwnProperty;
+var __propIsEnum$8 = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$8 = (obj, key, value) => key in obj ? __defProp$8(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$8 = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$7.call(b, prop))
-      __defNormalProp$7(a, prop, b[prop]);
-  if (__getOwnPropSymbols$7)
-    for (var prop of __getOwnPropSymbols$7(b)) {
-      if (__propIsEnum$7.call(b, prop))
-        __defNormalProp$7(a, prop, b[prop]);
+    if (__hasOwnProp$8.call(b, prop))
+      __defNormalProp$8(a, prop, b[prop]);
+  if (__getOwnPropSymbols$8)
+    for (var prop of __getOwnPropSymbols$8(b)) {
+      if (__propIsEnum$8.call(b, prop))
+        __defNormalProp$8(a, prop, b[prop]);
     }
   return a;
 };
-var __spreadProps$5 = (a, b) => __defProps$5(a, __getOwnPropDescs$5(b));
+var __spreadProps$6 = (a, b) => __defProps$6(a, __getOwnPropDescs$6(b));
 const CHART_REFRESH_TIMEOUT$2 = 3e3;
-const DEFAULT_COLORS$1 = ["#E4DCB8", "#DAC46C", "#808080", "#582809", "#A3ADD0", "#398E6F", "#AF123D", "#8C99C4", "#5290AC", "#601B07", "#50649D", "#B4A8A0", "#6F2587"];
+const DEFAULT_COLORS$2 = ["#3B82F6", "#10B981", "#F59E0B", "#EF4444", "#8B5CF6", "#06B6D4", "#F97316", "#EC4899", "#14B8A6", "#6366F1", "#84CC16", "#FB7185", "#A78BFA", "#34D399", "#FBBF24"];
 const clearChat$2 = async (widgetBackendUrl, widgetId) => {
   if (!widgetBackendUrl || !widgetId) return;
   console.log("clearChat called for widgetId:", widgetId);
@@ -46270,7 +46730,7 @@ const parseAndUpdateChartState$2 = (apiResponse, setChartState) => {
       if (parsedState.state) {
         const chartData = parsedState.state;
         setChartState((prevState) => {
-          const newChartState = __spreadValues$7({}, prevState);
+          const newChartState = __spreadValues$8({}, prevState);
           if (chartData.series_bar_chart_data) {
             newChartState.series_bar_chart_data = chartData.series_bar_chart_data;
           }
@@ -46320,9 +46780,11 @@ function SeriesBarChartComponent$1({
   startLoadingTimeout,
   clearLoadingTimeout,
   content,
-  hasWidgetData
+  hasWidgetData,
+  chartSettings,
+  onConfigUpdate
 }) {
-  var _a, _b, _c, _d, _e, _f, _g, _h;
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i;
   const hasCalledRef = React.useRef(false);
   const labels = ((_b = (_a = seriesBarChartState == null ? void 0 : seriesBarChartState.series_bar_chart_data) == null ? void 0 : _a.data) == null ? void 0 : _b.labels) || [];
   const series = ((_d = (_c = seriesBarChartState == null ? void 0 : seriesBarChartState.series_bar_chart_data) == null ? void 0 : _c.data) == null ? void 0 : _d.series) || [];
@@ -46360,18 +46822,40 @@ function SeriesBarChartComponent$1({
     }
   }, [isEmpty, startLoadingTimeout, clearLoadingTimeout, seriesBarChartState]);
   const finalColors = React.useMemo(() => {
-    return shuffleColors(DEFAULT_COLORS$1, series.length);
+    return shuffleColors(DEFAULT_COLORS$2, series.length);
   }, [series.length]);
+  const sortedSeries = React.useMemo(() => {
+    return [...series].sort(
+      (a, b) => (a.name || "").localeCompare(b.name || "")
+    );
+  }, [series]);
+  const colors = React.useMemo(() => {
+    return sortedSeries.map((_, index) => finalColors[index % finalColors.length]);
+  }, [sortedSeries, finalColors]);
+  React.useEffect(() => {
+    var _a2;
+    if (!isEmpty && colors.length > 0 && !((_a2 = chartSettings == null ? void 0 : chartSettings.seriesColors) == null ? void 0 : _a2.length) && onConfigUpdate && widgetId) {
+      onConfigUpdate(widgetId, {
+        chartSettings: __spreadProps$6(__spreadValues$8({}, chartSettings), {
+          seriesColors: colors
+        })
+      });
+    }
+  }, [series.length, (_i = chartSettings == null ? void 0 : chartSettings.seriesColors) == null ? void 0 : _i.length, onConfigUpdate, widgetId, isEmpty]);
   if (isEmpty) {
     return createLoadingComponent$2();
   }
   const transformedData = {
     labels,
-    datasets: series.map((seriesItem, index) => ({
-      label: seriesItem.name,
-      data: seriesItem.values,
-      backgroundColor: (seriesItem == null ? void 0 : seriesItem.colors) || (seriesItem == null ? void 0 : seriesItem.color) || finalColors[index % finalColors.length]
-    }))
+    datasets: sortedSeries.map((seriesItem, index) => {
+      var _a2;
+      const color = ((_a2 = chartSettings == null ? void 0 : chartSettings.seriesColors) == null ? void 0 : _a2[index]) || (seriesItem == null ? void 0 : seriesItem.colors) || (seriesItem == null ? void 0 : seriesItem.color) || finalColors[index % finalColors.length];
+      return {
+        label: seriesItem.name,
+        data: seriesItem.values,
+        backgroundColor: color
+      };
+    })
   };
   return /* @__PURE__ */ jsxRuntimeExports.jsx(
     SeriesChart,
@@ -46382,7 +46866,8 @@ function SeriesBarChartComponent$1({
       units,
       content,
       x_axis_title,
-      y_axis_title
+      y_axis_title,
+      chartSettings
     }
   );
 }
@@ -46393,9 +46878,10 @@ function CopilotKitSeriesBarChart$1({
   onResetReady,
   widgetBackendUrl,
   datasetId,
-  widgetData
+  widgetData,
+  onConfigUpdate
 }) {
-  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r;
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s;
   const orientation = ((_a = widget.config) == null ? void 0 : _a.orientation) || "vertical";
   const isFirstLoad = (_b = widget.config) == null ? void 0 : _b.isFirstLoad;
   const content = (_c = widget.config) == null ? void 0 : _c.content;
@@ -46436,7 +46922,7 @@ function CopilotKitSeriesBarChart$1({
     if (apiCallCount >= 30) {
       console.log("API call limit reached for widget:", widget.id);
       setHasTimeoutError(true);
-      setChartState((prevState) => __spreadProps$5(__spreadValues$7({}, prevState), {
+      setChartState((prevState) => __spreadProps$6(__spreadValues$8({}, prevState), {
         agent_message: "Timeout: Unable to load data after multiple attempts. Please try refreshing the widget."
       }));
       return;
@@ -46537,7 +47023,9 @@ function CopilotKitSeriesBarChart$1({
         widgetId: widget.id,
         startLoadingTimeout,
         clearLoadingTimeout,
-        hasWidgetData: !!(((_p = (_o = widget_data == null ? void 0 : widget_data.data) == null ? void 0 : _o.labels) == null ? void 0 : _p.length) && ((_r = (_q = widget_data == null ? void 0 : widget_data.data) == null ? void 0 : _q.series) == null ? void 0 : _r.length))
+        hasWidgetData: !!(((_p = (_o = widget_data == null ? void 0 : widget_data.data) == null ? void 0 : _o.labels) == null ? void 0 : _p.length) && ((_r = (_q = widget_data == null ? void 0 : widget_data.data) == null ? void 0 : _q.series) == null ? void 0 : _r.length)),
+        chartSettings: (_s = widget.config) == null ? void 0 : _s.chartSettings,
+        onConfigUpdate
       }
     ) })
   ] });
@@ -46549,7 +47037,8 @@ function SeriesBarChartWidget({
   onResetReady,
   widgetIds,
   datasetId,
-  widgetData
+  widgetData,
+  onConfigUpdate
 }) {
   var _a, _b;
   const styles = getStyleValues$2((_a = widget.config) == null ? void 0 : _a.styles);
@@ -46573,34 +47062,35 @@ function SeriesBarChartWidget({
           styles,
           onResetReady,
           widgetBackendUrl,
-          datasetId
+          datasetId,
+          onConfigUpdate
         }
       )
     }
   );
 }
-var __defProp$6 = Object.defineProperty;
-var __defProps$4 = Object.defineProperties;
-var __getOwnPropDescs$4 = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$6 = Object.getOwnPropertySymbols;
-var __hasOwnProp$6 = Object.prototype.hasOwnProperty;
-var __propIsEnum$6 = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$6 = (obj, key, value) => key in obj ? __defProp$6(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$6 = (a, b) => {
+var __defProp$7 = Object.defineProperty;
+var __defProps$5 = Object.defineProperties;
+var __getOwnPropDescs$5 = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$7 = Object.getOwnPropertySymbols;
+var __hasOwnProp$7 = Object.prototype.hasOwnProperty;
+var __propIsEnum$7 = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$7 = (obj, key, value) => key in obj ? __defProp$7(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$7 = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$6.call(b, prop))
-      __defNormalProp$6(a, prop, b[prop]);
-  if (__getOwnPropSymbols$6)
-    for (var prop of __getOwnPropSymbols$6(b)) {
-      if (__propIsEnum$6.call(b, prop))
-        __defNormalProp$6(a, prop, b[prop]);
+    if (__hasOwnProp$7.call(b, prop))
+      __defNormalProp$7(a, prop, b[prop]);
+  if (__getOwnPropSymbols$7)
+    for (var prop of __getOwnPropSymbols$7(b)) {
+      if (__propIsEnum$7.call(b, prop))
+        __defNormalProp$7(a, prop, b[prop]);
     }
   return a;
 };
-var __spreadProps$4 = (a, b) => __defProps$4(a, __getOwnPropDescs$4(b));
+var __spreadProps$5 = (a, b) => __defProps$5(a, __getOwnPropDescs$5(b));
 const CHART_REFRESH_TIMEOUT$1 = 3e3;
-const DEFAULT_COLORS = ["#E4DCB8", "#DAC46C", "#808080", "#582809", "#A3ADD0", "#398E6F", "#AF123D", "#8C99C4", "#5290AC", "#601B07", "#50649D", "#B4A8A0", "#6F2587"];
+const DEFAULT_COLORS$1 = ["#3B82F6", "#10B981", "#F59E0B", "#EF4444", "#8B5CF6", "#06B6D4", "#F97316", "#EC4899", "#14B8A6", "#6366F1", "#84CC16", "#FB7185", "#A78BFA", "#34D399", "#FBBF24"];
 const clearChat$1 = async (widgetBackendUrl, widgetId) => {
   if (!widgetBackendUrl || !widgetId) return;
   console.log("clearChat called for widgetId:", widgetId);
@@ -46695,7 +47185,7 @@ const parseAndUpdateChartState$1 = (apiResponse, setChartState) => {
       if (parsedState.state) {
         const chartData = parsedState.state;
         setChartState((prevState) => {
-          const newChartState = __spreadValues$6({}, prevState);
+          const newChartState = __spreadValues$7({}, prevState);
           if (chartData.series_bar_chart_data) {
             newChartState.series_bar_chart_data = chartData.series_bar_chart_data;
           }
@@ -46745,9 +47235,11 @@ function SeriesBarChartComponent({
   startLoadingTimeout,
   clearLoadingTimeout,
   content,
-  hasWidgetData
+  hasWidgetData,
+  chartSettings,
+  onConfigUpdate
 }) {
-  var _a, _b, _c, _d, _e, _f, _g, _h;
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i;
   const hasCalledRef = React.useRef(false);
   const labels = ((_b = (_a = seriesBarChartState == null ? void 0 : seriesBarChartState.series_bar_chart_data) == null ? void 0 : _a.data) == null ? void 0 : _b.labels) || [];
   const series = ((_d = (_c = seriesBarChartState == null ? void 0 : seriesBarChartState.series_bar_chart_data) == null ? void 0 : _c.data) == null ? void 0 : _d.series) || [];
@@ -46785,18 +47277,49 @@ function SeriesBarChartComponent({
     }
   }, [isEmpty, startLoadingTimeout, clearLoadingTimeout, seriesBarChartState]);
   const finalColors = React.useMemo(() => {
-    return shuffleColors(DEFAULT_COLORS, series.length);
+    return shuffleColors(DEFAULT_COLORS$1, series.length);
   }, [series.length]);
+  const sortedSeries = React.useMemo(() => {
+    return [...series].sort(
+      (a, b) => (a.name || "").localeCompare(b.name || "")
+    );
+  }, [series]);
+  const colors = React.useMemo(() => {
+    return sortedSeries.map((_, index) => finalColors[index % finalColors.length]);
+  }, [sortedSeries, finalColors]);
+  React.useEffect(() => {
+    var _a2;
+    if (!isEmpty && colors.length > 0 && !((_a2 = chartSettings == null ? void 0 : chartSettings.seriesColors) == null ? void 0 : _a2.length) && onConfigUpdate && widgetId) {
+      onConfigUpdate(widgetId, {
+        chartSettings: __spreadProps$5(__spreadValues$7({}, chartSettings), {
+          seriesColors: colors
+        })
+      });
+    }
+  }, [series.length, (_i = chartSettings == null ? void 0 : chartSettings.seriesColors) == null ? void 0 : _i.length, onConfigUpdate, widgetId, isEmpty]);
   if (isEmpty) {
     return createLoadingComponent$1();
   }
   const transformedData = {
     labels,
-    datasets: series.map((seriesItem, index) => ({
-      label: seriesItem.name,
-      data: seriesItem.values,
-      backgroundColor: (seriesItem == null ? void 0 : seriesItem.colors) || (seriesItem == null ? void 0 : seriesItem.color) || finalColors[index % finalColors.length]
-    }))
+    datasets: sortedSeries.map((seriesItem, index) => {
+      var _a2, _b2, _c2;
+      const color = ((_a2 = chartSettings == null ? void 0 : chartSettings.seriesColors) == null ? void 0 : _a2[index]) || (seriesItem == null ? void 0 : seriesItem.colors) || (seriesItem == null ? void 0 : seriesItem.color) || finalColors[index % finalColors.length];
+      return {
+        label: seriesItem.name,
+        data: seriesItem.values,
+        borderColor: color,
+        backgroundColor: color + "26",
+        // 15% opacity for subtle fill under curve
+        borderWidth: (_b2 = chartSettings == null ? void 0 : chartSettings.lineWidth) != null ? _b2 : 2.5,
+        fill: false,
+        pointRadius: (_c2 = chartSettings == null ? void 0 : chartSettings.pointRadius) != null ? _c2 : 4,
+        pointHoverRadius: 6,
+        pointBackgroundColor: color,
+        pointBorderColor: "#ffffff",
+        pointBorderWidth: 2
+      };
+    })
   };
   return /* @__PURE__ */ jsxRuntimeExports.jsx(
     SeriesLineChart,
@@ -46807,7 +47330,8 @@ function SeriesBarChartComponent({
       units,
       content,
       x_axis_title,
-      y_axis_title
+      y_axis_title,
+      chartSettings
     }
   );
 }
@@ -46818,9 +47342,10 @@ function CopilotKitSeriesBarChart({
   onResetReady,
   widgetBackendUrl,
   datasetId,
-  widgetData
+  widgetData,
+  onConfigUpdate
 }) {
-  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r;
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s;
   const orientation = ((_a = widget.config) == null ? void 0 : _a.orientation) || "vertical";
   const isFirstLoad = (_b = widget.config) == null ? void 0 : _b.isFirstLoad;
   const content = (_c = widget.config) == null ? void 0 : _c.content;
@@ -46861,7 +47386,7 @@ function CopilotKitSeriesBarChart({
     if (apiCallCount >= 30) {
       console.log("API call limit reached for widget:", widget.id);
       setHasTimeoutError(true);
-      setChartState((prevState) => __spreadProps$4(__spreadValues$6({}, prevState), {
+      setChartState((prevState) => __spreadProps$5(__spreadValues$7({}, prevState), {
         agent_message: "Timeout: Unable to load data after multiple attempts. Please try refreshing the widget."
       }));
       return;
@@ -46962,7 +47487,9 @@ function CopilotKitSeriesBarChart({
         widgetId: widget.id,
         startLoadingTimeout,
         clearLoadingTimeout,
-        hasWidgetData: !!(((_p = (_o = widget_data == null ? void 0 : widget_data.data) == null ? void 0 : _o.labels) == null ? void 0 : _p.length) && ((_r = (_q = widget_data == null ? void 0 : widget_data.data) == null ? void 0 : _q.series) == null ? void 0 : _r.length))
+        hasWidgetData: !!(((_p = (_o = widget_data == null ? void 0 : widget_data.data) == null ? void 0 : _o.labels) == null ? void 0 : _p.length) && ((_r = (_q = widget_data == null ? void 0 : widget_data.data) == null ? void 0 : _q.series) == null ? void 0 : _r.length)),
+        chartSettings: (_s = widget.config) == null ? void 0 : _s.chartSettings,
+        onConfigUpdate
       }
     ) })
   ] });
@@ -46974,7 +47501,8 @@ function SeriesLineChartWidget({
   onResetReady,
   widgetIds,
   datasetId,
-  widgetData
+  widgetData,
+  onConfigUpdate
 }) {
   var _a, _b;
   const styles = getStyleValues$1((_a = widget.config) == null ? void 0 : _a.styles);
@@ -46998,32 +47526,33 @@ function SeriesLineChartWidget({
           styles,
           onResetReady,
           widgetBackendUrl,
-          datasetId
+          datasetId,
+          onConfigUpdate
         }
       )
     }
   );
 }
-var __defProp$5 = Object.defineProperty;
-var __defProps$3 = Object.defineProperties;
-var __getOwnPropDescs$3 = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$5 = Object.getOwnPropertySymbols;
-var __hasOwnProp$5 = Object.prototype.hasOwnProperty;
-var __propIsEnum$5 = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$5 = (obj, key, value) => key in obj ? __defProp$5(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$5 = (a, b) => {
+var __defProp$6 = Object.defineProperty;
+var __defProps$4 = Object.defineProperties;
+var __getOwnPropDescs$4 = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$6 = Object.getOwnPropertySymbols;
+var __hasOwnProp$6 = Object.prototype.hasOwnProperty;
+var __propIsEnum$6 = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$6 = (obj, key, value) => key in obj ? __defProp$6(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$6 = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$5.call(b, prop))
-      __defNormalProp$5(a, prop, b[prop]);
-  if (__getOwnPropSymbols$5)
-    for (var prop of __getOwnPropSymbols$5(b)) {
-      if (__propIsEnum$5.call(b, prop))
-        __defNormalProp$5(a, prop, b[prop]);
+    if (__hasOwnProp$6.call(b, prop))
+      __defNormalProp$6(a, prop, b[prop]);
+  if (__getOwnPropSymbols$6)
+    for (var prop of __getOwnPropSymbols$6(b)) {
+      if (__propIsEnum$6.call(b, prop))
+        __defNormalProp$6(a, prop, b[prop]);
     }
   return a;
 };
-var __spreadProps$3 = (a, b) => __defProps$3(a, __getOwnPropDescs$3(b));
+var __spreadProps$4 = (a, b) => __defProps$4(a, __getOwnPropDescs$4(b));
 const CHART_REFRESH_TIMEOUT = 3e3;
 const clearChat = async (widgetBackendUrl, widgetId) => {
   if (!widgetBackendUrl || !widgetId) return;
@@ -47110,7 +47639,7 @@ const parseAndUpdateChartState = (apiResponse, setChartState) => {
       if (parsedState.state) {
         const chartData = parsedState.state;
         setChartState((prevState) => {
-          const newChartState = __spreadValues$5({}, prevState);
+          const newChartState = __spreadValues$6({}, prevState);
           if (chartData.matrix_grid_data) {
             newChartState.matrix_grid_data = chartData.matrix_grid_data;
           }
@@ -47257,7 +47786,7 @@ function CopilotKitDataGrid({
     if (apiCallCount >= 30) {
       console.log("API call limit reached for widget:", widget.id);
       setHasTimeoutError(true);
-      setChartState((prevState) => __spreadProps$3(__spreadValues$5({}, prevState), {
+      setChartState((prevState) => __spreadProps$4(__spreadValues$6({}, prevState), {
         agent_message: "Timeout: Unable to load data after multiple attempts. Please try refreshing the widget."
       }));
       return;
@@ -47411,7 +47940,9 @@ function WidgetRenderer({
   pageId,
   onApplyFilters,
   isEditing = false,
-  dashboardName
+  dashboardName,
+  onClearChat,
+  isClearing
 }) {
   const handleConfigUpdate = (config) => {
     if (onConfigUpdate) {
@@ -47443,7 +47974,7 @@ function WidgetRenderer({
           }
         );
       case "chatbot":
-        return /* @__PURE__ */ jsxRuntimeExports.jsx(ChatbotWidget, { widget, showHeader: false, widgetBackendUrl, onResetReady, widgetIds, datasetId, dashboardName });
+        return /* @__PURE__ */ jsxRuntimeExports.jsx(ChatbotWidget, { widget, showHeader: false, widgetBackendUrl, onResetReady, widgetIds, datasetId, dashboardName, onClearChat: onClearChat ? () => onClearChat(widget.id) : void 0, isClearing: isClearing === widget.id });
       case "filters":
         return /* @__PURE__ */ jsxRuntimeExports.jsx(
           FiltersWidget,
@@ -47467,7 +47998,8 @@ function WidgetRenderer({
             widgetBackendUrl,
             onResetReady,
             widgetIds,
-            datasetId
+            datasetId,
+            onConfigUpdate
           }
         ) : widget.config.agentType === "Series Bar Chart Agent" ? /* @__PURE__ */ jsxRuntimeExports.jsx(
           SeriesBarChartWidget,
@@ -47477,7 +48009,8 @@ function WidgetRenderer({
             widgetBackendUrl,
             onResetReady,
             widgetIds,
-            datasetId
+            datasetId,
+            onConfigUpdate
           }
         ) : widget.config.agentType === "Series Line Chart Agent" ? /* @__PURE__ */ jsxRuntimeExports.jsx(
           SeriesLineChartWidget,
@@ -47487,7 +48020,8 @@ function WidgetRenderer({
             widgetBackendUrl,
             onResetReady,
             widgetIds,
-            datasetId
+            datasetId,
+            onConfigUpdate
           }
         ) : widget.config.agentType === "Data Grid Agent" ? /* @__PURE__ */ jsxRuntimeExports.jsx(
           DatagridWidget,
@@ -47520,39 +48054,39 @@ function WidgetRenderer({
   return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `${(widget == null ? void 0 : widget.type) === "text" ? "" : "h-full"}`, children: renderWidget() });
 }
-var __defProp$4 = Object.defineProperty;
-var __getOwnPropSymbols$4 = Object.getOwnPropertySymbols;
-var __hasOwnProp$4 = Object.prototype.hasOwnProperty;
-var __propIsEnum$4 = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$4 = (obj, key, value) => key in obj ? __defProp$4(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$4 = (a, b) => {
+var __defProp$5 = Object.defineProperty;
+var __getOwnPropSymbols$5 = Object.getOwnPropertySymbols;
+var __hasOwnProp$5 = Object.prototype.hasOwnProperty;
+var __propIsEnum$5 = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$5 = (obj, key, value) => key in obj ? __defProp$5(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$5 = (a, b) => {
   for (var prop in b || (b = {}))
-    if (__hasOwnProp$4.call(b, prop))
-      __defNormalProp$4(a, prop, b[prop]);
-  if (__getOwnPropSymbols$4)
-    for (var prop of __getOwnPropSymbols$4(b)) {
-      if (__propIsEnum$4.call(b, prop))
-        __defNormalProp$4(a, prop, b[prop]);
+    if (__hasOwnProp$5.call(b, prop))
+      __defNormalProp$5(a, prop, b[prop]);
+  if (__getOwnPropSymbols$5)
+    for (var prop of __getOwnPropSymbols$5(b)) {
+      if (__propIsEnum$5.call(b, prop))
+        __defNormalProp$5(a, prop, b[prop]);
     }
   return a;
 };
-var __objRest$1 = (source, exclude) => {
+var __objRest$2 = (source, exclude) => {
   var target = {};
   for (var prop in source)
-    if (__hasOwnProp$4.call(source, prop) && exclude.indexOf(prop) < 0)
+    if (__hasOwnProp$5.call(source, prop) && exclude.indexOf(prop) < 0)
       target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols$4)
-    for (var prop of __getOwnPropSymbols$4(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum$4.call(source, prop))
+  if (source != null && __getOwnPropSymbols$5)
+    for (var prop of __getOwnPropSymbols$5(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum$5.call(source, prop))
         target[prop] = source[prop];
     }
   return target;
 };
 const Textarea = React__namespace.forwardRef((_a, ref) => {
-  var _b = _a, { className } = _b, props = __objRest$1(_b, ["className"]);
+  var _b = _a, { className } = _b, props = __objRest$2(_b, ["className"]);
   return /* @__PURE__ */ jsxRuntimeExports.jsx(
     "textarea",
-    __spreadValues$4({
+    __spreadValues$5({
       className: cn(
         "flex min-h-[120px] w-full rounded-md border border-gray-300 bg-transparent px-3 py-2 text-base ring-offset-gray-300 placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-500 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
         className
@@ -47673,6 +48207,57 @@ function Modal({
   );
 }
+var __defProp$4 = Object.defineProperty;
+var __defProps$3 = Object.defineProperties;
+var __getOwnPropDescs$3 = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$4 = Object.getOwnPropertySymbols;
+var __hasOwnProp$4 = Object.prototype.hasOwnProperty;
+var __propIsEnum$4 = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$4 = (obj, key, value) => key in obj ? __defProp$4(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$4 = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp$4.call(b, prop))
+      __defNormalProp$4(a, prop, b[prop]);
+  if (__getOwnPropSymbols$4)
+    for (var prop of __getOwnPropSymbols$4(b)) {
+      if (__propIsEnum$4.call(b, prop))
+        __defNormalProp$4(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps$3 = (a, b) => __defProps$3(a, __getOwnPropDescs$3(b));
+var __objRest$1 = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp$4.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols$4)
+    for (var prop of __getOwnPropSymbols$4(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum$4.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+const Slider = React__namespace.forwardRef((_a, ref) => {
+  var _b = _a, { className } = _b, props = __objRest$1(_b, ["className"]);
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs(
+    SliderPrimitive__namespace.Root,
+    __spreadProps$3(__spreadValues$4({
+      ref,
+      className: cn(
+        "relative flex w-full touch-none select-none items-center",
+        className
+      )
+    }, props), {
+      children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx(SliderPrimitive__namespace.Track, { className: "relative h-2 w-full grow overflow-hidden rounded-full bg-secondary", children: /* @__PURE__ */ jsxRuntimeExports.jsx(SliderPrimitive__namespace.Range, { className: "absolute h-full bg-primary" }) }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(SliderPrimitive__namespace.Thumb, { className: "block h-5 w-5 rounded-full border-2 border-primary bg-background ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50" })
+      ]
+    })
+  );
+});
+Slider.displayName = SliderPrimitive__namespace.Root.displayName;
 var __defProp$3 = Object.defineProperty;
 var __defProps$2 = Object.defineProperties;
 var __getOwnPropDescs$2 = Object.getOwnPropertyDescriptors;
@@ -47692,9 +48277,63 @@ var __spreadValues$3 = (a, b) => {
   return a;
 };
 var __spreadProps$2 = (a, b) => __defProps$2(a, __getOwnPropDescs$2(b));
+const isChartWidget = (agentType) => {
+  if (!agentType) return false;
+  return agentType === "Pie Chart Agent" || agentType === "Line Chart Agent" || agentType === "Series Line Chart Agent" || agentType === "Bar Chart Agent" || agentType === "Series Bar Chart Agent";
+};
+const isLineChart = (agentType) => {
+  if (!agentType) return false;
+  return agentType === "Line Chart Agent" || agentType === "Series Line Chart Agent";
+};
+const DEFAULT_COLORS = ["#3B82F6", "#10B981", "#F59E0B", "#EF4444", "#8B5CF6", "#06B6D4", "#F97316", "#EC4899", "#14B8A6", "#6366F1", "#84CC16", "#FB7185", "#A78BFA", "#34D399", "#FBBF24"];
+const getSeriesNames = (widget) => {
+  var _a, _b, _c, _d;
+  const data = widget == null ? void 0 : widget.widget_data;
+  if (!data) return [];
+  if (((_b = (_a = data == null ? void 0 : data.pie_chart_data) == null ? void 0 : _a.data) == null ? void 0 : _b.labels) && Array.isArray(data.pie_chart_data.data.labels)) {
+    return data.pie_chart_data.data.labels.sort();
+  }
+  if (((_d = (_c = data == null ? void 0 : data.series_bar_chart_data) == null ? void 0 : _c.data) == null ? void 0 : _d.series) && Array.isArray(data.series_bar_chart_data.data.series)) {
+    return data.series_bar_chart_data.data.series.map((item) => item.name || item.label || "").filter((name) => name !== "").sort();
+  }
+  if (Array.isArray(data)) {
+    const names = /* @__PURE__ */ new Set();
+    data.forEach((item) => {
+      if (item.series_name) names.add(item.series_name);
+      if (item.label) names.add(item.label);
+    });
+    return Array.from(names).sort();
+  }
+  return [];
+};
+const getDefaultSeriesColors = (widget) => {
+  var _a, _b, _c, _d;
+  const data = widget == null ? void 0 : widget.widget_data;
+  if (!data) return [];
+  if (((_b = (_a = data == null ? void 0 : data.pie_chart_data) == null ? void 0 : _a.data) == null ? void 0 : _b.labels) && Array.isArray(data.pie_chart_data.data.labels)) {
+    const labels = data.pie_chart_data.data.labels;
+    return shuffleColors(DEFAULT_COLORS, labels.length);
+  }
+  if (((_d = (_c = data == null ? void 0 : data.series_bar_chart_data) == null ? void 0 : _c.data) == null ? void 0 : _d.series) && Array.isArray(data.series_bar_chart_data.data.series)) {
+    const series = data.series_bar_chart_data.data.series;
+    return shuffleColors(DEFAULT_COLORS, series.length);
+  }
+  if (Array.isArray(data)) {
+    const series = /* @__PURE__ */ new Set();
+    data.forEach((item) => {
+      if (item.series_name) series.add(item.series_name);
+      if (item.label) series.add(item.label);
+    });
+    const seriesArray = Array.from(series).sort();
+    return shuffleColors(DEFAULT_COLORS, seriesArray.length);
+  }
+  return [];
+};
 function EditWidgetDialog({ editingWidget, setWidgets, initialText, isOpen, onClose, onSubmit }) {
-  var _a;
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p;
   const agentType = (_a = editingWidget == null ? void 0 : editingWidget.config) == null ? void 0 : _a.agentType;
+  const isChart = isChartWidget(agentType);
+  const isLine = isLineChart(agentType);
   const [query, setQuery] = React.useState("");
   const [displayText, setDisplayText] = React.useState("");
   const [blockType, setBlockType] = React.useState("");
@@ -47702,13 +48341,42 @@ function EditWidgetDialog({ editingWidget, setWidgets, initialText, isOpen, onCl
   const [divider, setDivider] = React.useState("no");
   const [showLabels, setShowLabels] = React.useState(false);
   const [styles, setStyles] = React.useState("");
+  const [chartSettings, setChartSettings] = React.useState({
+    showLegend: true,
+    legendBoxSize: 16,
+    legendFontSize: 13,
+    lineWidth: 2.5,
+    lineTension: 0.3,
+    pointRadius: 4,
+    showLabels: false,
+    seriesColors: [],
+    dataLabelsFontSize: 12,
+    showTitle: true,
+    titleText: "",
+    titleFontSize: 16,
+    xAxisTitleFontSize: 13,
+    yAxisTitleFontSize: 13,
+    xAxisTickFontSize: 12,
+    yAxisTickFontSize: 12,
+    tooltipFontSize: 12
+  });
+  const seriesNames = getSeriesNames(editingWidget);
+  const defaultSeriesColors = getDefaultSeriesColors(editingWidget);
+  const colorCount = seriesNames.length || ((_b = chartSettings.seriesColors) == null ? void 0 : _b.length) || defaultSeriesColors.length || 0;
+  const displaySeriesNames = seriesNames.length > 0 ? seriesNames : Array.from({ length: colorCount }, (_, i) => `Series ${i + 1}`);
+  React.useEffect(() => {
+    console.log("[EditWidgetDialog] Series names:", seriesNames);
+    console.log("[EditWidgetDialog] Default colors:", defaultSeriesColors);
+    console.log("[EditWidgetDialog] Display series names:", displaySeriesNames);
+  }, [seriesNames, defaultSeriesColors, displaySeriesNames]);
   React.useEffect(() => {
     setQuery(initialText);
   }, [initialText]);
   React.useEffect(() => {
-    var _a2, _b;
+    var _a2, _b2, _c2, _d2, _e2, _f2, _g2, _h2, _i2, _j2, _k2, _l2, _m2, _n2, _o2, _p2, _q, _r, _s, _t;
     const content = (_a2 = editingWidget == null ? void 0 : editingWidget.config) == null ? void 0 : _a2.content;
-    const cssStyles = (_b = editingWidget == null ? void 0 : editingWidget.config) == null ? void 0 : _b.styles;
+    const cssStyles = (_b2 = editingWidget == null ? void 0 : editingWidget.config) == null ? void 0 : _b2.styles;
+    const savedChartSettings = (_c2 = editingWidget == null ? void 0 : editingWidget.config) == null ? void 0 : _c2.chartSettings;
     const text = content == null ? void 0 : content.displayText;
     if (text == null ? void 0 : text.length) {
       setDisplayText(text);
@@ -47729,63 +48397,114 @@ function EditWidgetDialog({ editingWidget, setWidgets, initialText, isOpen, onCl
     if (hasShowLabel !== void 0) {
       setShowLabels(hasShowLabel);
     }
+    if (savedChartSettings) {
+      setChartSettings({
+        showLegend: (_d2 = savedChartSettings.showLegend) != null ? _d2 : true,
+        legendBoxSize: (_e2 = savedChartSettings.legendBoxSize) != null ? _e2 : 16,
+        legendFontSize: (_f2 = savedChartSettings.legendFontSize) != null ? _f2 : 13,
+        lineWidth: (_g2 = savedChartSettings.lineWidth) != null ? _g2 : 2.5,
+        lineTension: (_h2 = savedChartSettings.lineTension) != null ? _h2 : 0.3,
+        pointRadius: (_i2 = savedChartSettings.pointRadius) != null ? _i2 : 4,
+        showLabels: (_j2 = savedChartSettings.showLabels) != null ? _j2 : false,
+        seriesColors: (_k2 = savedChartSettings.seriesColors) != null ? _k2 : defaultSeriesColors,
+        dataLabelsFontSize: (_l2 = savedChartSettings.dataLabelsFontSize) != null ? _l2 : 12,
+        showTitle: (_m2 = savedChartSettings.showTitle) != null ? _m2 : true,
+        titleText: (_n2 = savedChartSettings.titleText) != null ? _n2 : "",
+        titleFontSize: (_o2 = savedChartSettings.titleFontSize) != null ? _o2 : 16,
+        xAxisTitleFontSize: (_p2 = savedChartSettings.xAxisTitleFontSize) != null ? _p2 : 13,
+        yAxisTitleFontSize: (_q = savedChartSettings.yAxisTitleFontSize) != null ? _q : 13,
+        xAxisTickFontSize: (_r = savedChartSettings.xAxisTickFontSize) != null ? _r : 12,
+        yAxisTickFontSize: (_s = savedChartSettings.yAxisTickFontSize) != null ? _s : 12,
+        tooltipFontSize: (_t = savedChartSettings.tooltipFontSize) != null ? _t : 12
+      });
+    } else {
+      setChartSettings({
+        showLegend: true,
+        legendBoxSize: 16,
+        legendFontSize: 13,
+        lineWidth: 2.5,
+        lineTension: 0.3,
+        pointRadius: 4,
+        showLabels: hasShowLabel != null ? hasShowLabel : false,
+        seriesColors: defaultSeriesColors,
+        dataLabelsFontSize: 12,
+        showTitle: true,
+        titleText: "",
+        titleFontSize: 16,
+        xAxisTitleFontSize: 13,
+        yAxisTitleFontSize: 13,
+        xAxisTickFontSize: 12,
+        yAxisTickFontSize: 12,
+        tooltipFontSize: 12
+      });
+    }
   }, [editingWidget]);
   const handleSubmit = () => {
+    var _a2;
     if (onSubmit && query.trim()) {
-      onSubmit(query, showLabels);
+      if (isChart) {
+        onSubmit(query, (_a2 = chartSettings.showLabels) != null ? _a2 : false, chartSettings);
+      } else {
+        onSubmit(query, showLabels);
+      }
     }
     if (editingWidget.type === "text") {
       const widgetId = editingWidget == null ? void 0 : editingWidget.id;
-      setWidgets && setWidgets((prev) => prev.map((w) => {
-        if (w.id === widgetId) {
-          return __spreadProps$2(__spreadValues$3({}, w), {
-            config: __spreadProps$2(__spreadValues$3({}, w.config), {
-              content: __spreadProps$2(__spreadValues$3({}, w.config.content), {
-                displayText,
-                blockType,
-                divider
-              }),
-              styles: __spreadValues$3(__spreadValues$3({}, w.config.styles), alignment && alignment.length > 0 ? { textAlign: alignment } : {})
-            })
-          });
-        }
-        return w;
-      }));
+      setWidgets && setWidgets(
+        (prev) => prev.map((w) => {
+          if (w.id === widgetId) {
+            return __spreadProps$2(__spreadValues$3({}, w), {
+              config: __spreadProps$2(__spreadValues$3({}, w.config), {
+                content: __spreadProps$2(__spreadValues$3({}, w.config.content), {
+                  displayText,
+                  blockType,
+                  divider
+                }),
+                styles: __spreadValues$3(__spreadValues$3({}, w.config.styles), alignment && alignment.length > 0 ? { textAlign: alignment } : {})
+              })
+            });
+          }
+          return w;
+        })
+      );
       onClose && onClose();
     }
   };
   if (!isOpen) return null;
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs(
     Modal,
     {
       isOpen,
       onClose,
       title: "Edit Widget",
-      size: "lg",
+      size: "xl",
       noOverflowHidden: true,
-      children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-gray-700", children: "Customize the widget\u2019s appearance" }),
-        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "pt-7", children: [
-          (agentType === "Pie Chart Agent" || agentType === "Line Chart Agent" || agentType === "Series Line Chart Agent" || agentType === "Bar Chart Agent" || agentType === "Series Bar Chart Agent") && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-col gap-2 mb-4", children: [
-            /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "font-semibold", children: "Data Labels:" }),
-            /* @__PURE__ */ jsxRuntimeExports.jsxs(
-              Select,
-              {
-                value: showLabels ? "yes" : "no",
-                onValueChange: (value) => setShowLabels(value === "yes"),
-                children: [
-                  /* @__PURE__ */ jsxRuntimeExports.jsx(SelectTrigger, { className: "h-8", children: /* @__PURE__ */ jsxRuntimeExports.jsx(SelectValue, { placeholder: "Visible data labels?" }) }),
-                  /* @__PURE__ */ jsxRuntimeExports.jsxs(SelectContent, { children: [
-                    /* @__PURE__ */ jsxRuntimeExports.jsx(SelectItem, { value: "no", children: "No" }),
-                    /* @__PURE__ */ jsxRuntimeExports.jsx(SelectItem, { value: "yes", children: "Yes" })
-                  ] })
-                ]
-              }
-            )
-          ] }),
-          (editingWidget == null ? void 0 : editingWidget.type) === "text" ? /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-col gap-5", children: [
-            /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-col gap-2", children: [
-              /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "font-semibold", children: "Display text:" }),
+      children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx("style", { children: `
+        .dialog-scrollable::-webkit-scrollbar {
+          width: 6px;
+        }
+        .dialog-scrollable::-webkit-scrollbar-track {
+          background: #f1f5f9;
+          border-radius: 3px;
+        }
+        .dialog-scrollable::-webkit-scrollbar-thumb {
+          background: #cbd5e1;
+          border-radius: 3px;
+        }
+        .dialog-scrollable::-webkit-scrollbar-thumb:hover {
+          background: #94a3b8;
+        }
+        .dialog-scrollable {
+          scrollbar-width: thin;
+          scrollbar-color: #cbd5e1 #f1f5f9;
+        }
+      ` }),
+        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-col h-[calc(100vh-260px)] bg-white rounded-lg", children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "px-6 py-4 border-b border-gray-200 flex-shrink-0", children: /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-sm text-gray-700 font-medium", children: "Customize your widget settings" }) }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex-1 overflow-y-auto dialog-scrollable px-6 py-4 flex flex-col", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex-shrink-0", children: (editingWidget == null ? void 0 : editingWidget.type) === "text" ? /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-5", children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-2", children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx(Label$1, { className: "font-semibold text-sm", children: "Display text" }),
               /* @__PURE__ */ jsxRuntimeExports.jsx(
                 Input,
                 {
@@ -47795,88 +48514,463 @@ function EditWidgetDialog({ editingWidget, setWidgets, initialText, isOpen, onCl
                 }
               )
             ] }),
-            /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-col gap-2", children: [
-              /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "font-semibold", children: "Block type:" }),
-              /* @__PURE__ */ jsxRuntimeExports.jsxs(
-                Select,
-                {
-                  value: blockType,
-                  onValueChange: (value) => setBlockType(value),
-                  children: [
-                    /* @__PURE__ */ jsxRuntimeExports.jsx(SelectTrigger, { className: "h-8", children: /* @__PURE__ */ jsxRuntimeExports.jsx(SelectValue, { placeholder: "Select block type" }) }),
-                    /* @__PURE__ */ jsxRuntimeExports.jsxs(SelectContent, { children: [
-                      /* @__PURE__ */ jsxRuntimeExports.jsx(SelectItem, { value: "heading-1", children: "Heading 1" }),
-                      /* @__PURE__ */ jsxRuntimeExports.jsx(SelectItem, { value: "heading-2", children: "Heading 2" }),
-                      /* @__PURE__ */ jsxRuntimeExports.jsx(SelectItem, { value: "heading-3", children: "Heading 3" }),
-                      /* @__PURE__ */ jsxRuntimeExports.jsx(SelectItem, { value: "paragraph", children: "Paragraph" })
-                    ] })
-                  ]
-                }
-              )
+            /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-2", children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx(Label$1, { className: "font-semibold text-sm", children: "Block type" }),
+              /* @__PURE__ */ jsxRuntimeExports.jsxs(Select, { value: blockType, onValueChange: (value) => setBlockType(value), children: [
+                /* @__PURE__ */ jsxRuntimeExports.jsx(SelectTrigger, { className: "h-8", children: /* @__PURE__ */ jsxRuntimeExports.jsx(SelectValue, { placeholder: "Select block type" }) }),
+                /* @__PURE__ */ jsxRuntimeExports.jsxs(SelectContent, { children: [
+                  /* @__PURE__ */ jsxRuntimeExports.jsx(SelectItem, { value: "heading-1", children: "Heading 1" }),
+                  /* @__PURE__ */ jsxRuntimeExports.jsx(SelectItem, { value: "heading-2", children: "Heading 2" }),
+                  /* @__PURE__ */ jsxRuntimeExports.jsx(SelectItem, { value: "heading-3", children: "Heading 3" }),
+                  /* @__PURE__ */ jsxRuntimeExports.jsx(SelectItem, { value: "paragraph", children: "Paragraph" })
+                ] })
+              ] })
             ] }),
-            /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-col gap-2", children: [
-              /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "font-semibold", children: "Align:" }),
-              /* @__PURE__ */ jsxRuntimeExports.jsxs(
-                Select,
-                {
-                  value: alignment,
-                  onValueChange: (value) => setAlignment(value),
-                  children: [
-                    /* @__PURE__ */ jsxRuntimeExports.jsx(SelectTrigger, { className: "h-8", children: /* @__PURE__ */ jsxRuntimeExports.jsx(SelectValue, { placeholder: "Select block type" }) }),
-                    /* @__PURE__ */ jsxRuntimeExports.jsxs(SelectContent, { children: [
-                      /* @__PURE__ */ jsxRuntimeExports.jsx(SelectItem, { value: "left", children: "Left" }),
-                      /* @__PURE__ */ jsxRuntimeExports.jsx(SelectItem, { value: "center", children: "Center" }),
-                      /* @__PURE__ */ jsxRuntimeExports.jsx(SelectItem, { value: "right", children: "Right" }),
-                      /* @__PURE__ */ jsxRuntimeExports.jsx(SelectItem, { value: "justify", children: "Justify" })
-                    ] })
-                  ]
-                }
-              )
+            /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-2", children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx(Label$1, { className: "font-semibold text-sm", children: "Alignment" }),
+              /* @__PURE__ */ jsxRuntimeExports.jsxs(Select, { value: alignment, onValueChange: (value) => setAlignment(value), children: [
+                /* @__PURE__ */ jsxRuntimeExports.jsx(SelectTrigger, { className: "h-8", children: /* @__PURE__ */ jsxRuntimeExports.jsx(SelectValue, { placeholder: "Select alignment" }) }),
+                /* @__PURE__ */ jsxRuntimeExports.jsxs(SelectContent, { children: [
+                  /* @__PURE__ */ jsxRuntimeExports.jsx(SelectItem, { value: "left", children: "Left" }),
+                  /* @__PURE__ */ jsxRuntimeExports.jsx(SelectItem, { value: "center", children: "Center" }),
+                  /* @__PURE__ */ jsxRuntimeExports.jsx(SelectItem, { value: "right", children: "Right" }),
+                  /* @__PURE__ */ jsxRuntimeExports.jsx(SelectItem, { value: "justify", children: "Justify" })
+                ] })
+              ] })
             ] }),
-            /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-col gap-2", children: [
-              /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "font-semibold", children: "Divider:" }),
-              /* @__PURE__ */ jsxRuntimeExports.jsxs(
-                Select,
+            /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-2", children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx(Label$1, { className: "font-semibold text-sm", children: "Divider" }),
+              /* @__PURE__ */ jsxRuntimeExports.jsxs(Select, { value: divider, onValueChange: (value) => setDivider(value), children: [
+                /* @__PURE__ */ jsxRuntimeExports.jsx(SelectTrigger, { className: "h-8", children: /* @__PURE__ */ jsxRuntimeExports.jsx(SelectValue, { placeholder: "No" }) }),
+                /* @__PURE__ */ jsxRuntimeExports.jsxs(SelectContent, { children: [
+                  /* @__PURE__ */ jsxRuntimeExports.jsx(SelectItem, { value: "yes", children: "Yes" }),
+                  /* @__PURE__ */ jsxRuntimeExports.jsx(SelectItem, { value: "no", children: "No" })
+                ] })
+              ] })
+            ] })
+          ] }) : isChart ? /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-6", children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-4 pb-4 border-b", children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx("h3", { className: "text-xs font-semibold text-gray-500 uppercase tracking-wide", children: "Query" }),
+              /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "space-y-2", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+                Textarea,
                 {
-                  value: divider,
-                  onValueChange: (value) => setDivider(value),
-                  children: [
-                    /* @__PURE__ */ jsxRuntimeExports.jsx(SelectTrigger, { className: "h-8", children: /* @__PURE__ */ jsxRuntimeExports.jsx(SelectValue, { placeholder: "No" }) }),
-                    /* @__PURE__ */ jsxRuntimeExports.jsxs(SelectContent, { children: [
-                      /* @__PURE__ */ jsxRuntimeExports.jsx(SelectItem, { value: "yes", children: "Yes" }),
-                      /* @__PURE__ */ jsxRuntimeExports.jsx(SelectItem, { value: "no", children: "No" })
-                    ] })
-                  ]
+                  className: "w-full p-2 min-h-[120px]",
+                  value: query,
+                  onChange: (e) => {
+                    var _a2;
+                    return setQuery((_a2 = e == null ? void 0 : e.target) == null ? void 0 : _a2.value);
+                  }
                 }
-              )
-            ] }),
-            /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex justify-end", children: /* @__PURE__ */ 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"
-              }
-            ) })
-          ] }) : /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
-            /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-col gap-2", children: [
-              /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "font-semibold", children: "Query:" }),
-              /* @__PURE__ */ jsxRuntimeExports.jsx(Textarea, { className: "w-full p-2", value: query, onChange: (e) => {
-                var _a2;
-                return setQuery((_a2 = e == null ? void 0 : e.target) == null ? void 0 : _a2.value);
-              } })
+              ) })
             ] }),
-            /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex justify-end pt-3", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-              "button",
+            /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-6", children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-4 pb-4 border-b", children: [
+                /* @__PURE__ */ jsxRuntimeExports.jsx("h3", { className: "text-xs font-semibold text-gray-500 uppercase tracking-wide", children: "Legend" }),
+                /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-3", children: [
+                  /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
+                    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex justify-between mb-2", children: /* @__PURE__ */ jsxRuntimeExports.jsx(Label$1, { className: "text-sm font-medium", children: "Show Legend" }) }),
+                    /* @__PURE__ */ jsxRuntimeExports.jsxs(
+                      Select,
+                      {
+                        value: chartSettings.showLegend !== false ? "yes" : "no",
+                        onValueChange: (value) => setChartSettings(__spreadProps$2(__spreadValues$3({}, chartSettings), {
+                          showLegend: value === "yes"
+                        })),
+                        children: [
+                          /* @__PURE__ */ jsxRuntimeExports.jsx(SelectTrigger, { className: "h-8", children: /* @__PURE__ */ jsxRuntimeExports.jsx(SelectValue, { placeholder: "Show legend?" }) }),
+                          /* @__PURE__ */ jsxRuntimeExports.jsxs(SelectContent, { children: [
+                            /* @__PURE__ */ jsxRuntimeExports.jsx(SelectItem, { value: "no", children: "No" }),
+                            /* @__PURE__ */ jsxRuntimeExports.jsx(SelectItem, { value: "yes", children: "Yes" })
+                          ] })
+                        ]
+                      }
+                    )
+                  ] }),
+                  /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
+                    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex justify-between mb-2", children: [
+                      /* @__PURE__ */ jsxRuntimeExports.jsx(Label$1, { className: "text-sm font-medium", children: "Box Size" }),
+                      /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "text-sm text-gray-600", children: [
+                        chartSettings.legendBoxSize,
+                        "px"
+                      ] })
+                    ] }),
+                    /* @__PURE__ */ jsxRuntimeExports.jsx(
+                      Slider,
+                      {
+                        min: 8,
+                        max: 32,
+                        step: 1,
+                        value: [(_c = chartSettings.legendBoxSize) != null ? _c : 16],
+                        onValueChange: (value) => setChartSettings(__spreadProps$2(__spreadValues$3({}, chartSettings), {
+                          legendBoxSize: value[0]
+                        })),
+                        className: "w-full"
+                      }
+                    )
+                  ] }),
+                  /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
+                    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex justify-between mb-2", children: [
+                      /* @__PURE__ */ jsxRuntimeExports.jsx(Label$1, { className: "text-sm font-medium", children: "Font Size" }),
+                      /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "text-sm text-gray-600", children: [
+                        chartSettings.legendFontSize,
+                        "px"
+                      ] })
+                    ] }),
+                    /* @__PURE__ */ jsxRuntimeExports.jsx(
+                      Slider,
+                      {
+                        min: 10,
+                        max: 18,
+                        step: 1,
+                        value: [(_d = chartSettings.legendFontSize) != null ? _d : 13],
+                        onValueChange: (value) => setChartSettings(__spreadProps$2(__spreadValues$3({}, chartSettings), {
+                          legendFontSize: value[0]
+                        })),
+                        className: "w-full"
+                      }
+                    )
+                  ] })
+                ] })
+              ] }),
+              displaySeriesNames.length > 0 && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-4 pb-4 border-b", children: [
+                /* @__PURE__ */ jsxRuntimeExports.jsx("h3", { className: "text-xs font-semibold text-gray-500 uppercase tracking-wide", children: "Series Colors" }),
+                /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "space-y-3", children: displaySeriesNames.map((seriesName, index) => {
+                  var _a2;
+                  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-3", children: [
+                    /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-sm font-medium flex-1 truncate", children: seriesName }),
+                    /* @__PURE__ */ jsxRuntimeExports.jsx(
+                      "input",
+                      {
+                        type: "color",
+                        value: ((_a2 = chartSettings.seriesColors) == null ? void 0 : _a2[index]) || defaultSeriesColors[index] || "#3B82F6",
+                        onChange: (e) => {
+                          const newColors = [...chartSettings.seriesColors || []];
+                          newColors[index] = e.target.value;
+                          setChartSettings(__spreadProps$2(__spreadValues$3({}, chartSettings), {
+                            seriesColors: newColors
+                          }));
+                        },
+                        className: "w-10 h-10 rounded cursor-pointer border border-gray-300"
+                      }
+                    )
+                  ] }, index);
+                }) })
+              ] }),
+              isLine && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-4 pb-4 border-b", children: [
+                /* @__PURE__ */ jsxRuntimeExports.jsx("h3", { className: "text-xs font-semibold text-gray-500 uppercase tracking-wide", children: "Line Style" }),
+                /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-3", children: [
+                  /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
+                    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex justify-between mb-2", children: [
+                      /* @__PURE__ */ jsxRuntimeExports.jsx(Label$1, { className: "text-sm font-medium", children: "Line Width" }),
+                      /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-sm text-gray-600", children: chartSettings.lineWidth })
+                    ] }),
+                    /* @__PURE__ */ jsxRuntimeExports.jsx(
+                      Slider,
+                      {
+                        min: 1,
+                        max: 5,
+                        step: 0.5,
+                        value: [(_e = chartSettings.lineWidth) != null ? _e : 2.5],
+                        onValueChange: (value) => setChartSettings(__spreadProps$2(__spreadValues$3({}, chartSettings), {
+                          lineWidth: value[0]
+                        })),
+                        className: "w-full"
+                      }
+                    )
+                  ] }),
+                  /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
+                    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex justify-between mb-2", children: [
+                      /* @__PURE__ */ jsxRuntimeExports.jsx(Label$1, { className: "text-sm font-medium", children: "Tension" }),
+                      /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-sm text-gray-600", children: ((_f = chartSettings.lineTension) != null ? _f : 0.3).toFixed(2) })
+                    ] }),
+                    /* @__PURE__ */ jsxRuntimeExports.jsx(
+                      Slider,
+                      {
+                        min: 0,
+                        max: 0.8,
+                        step: 0.05,
+                        value: [(_g = chartSettings.lineTension) != null ? _g : 0.3],
+                        onValueChange: (value) => setChartSettings(__spreadProps$2(__spreadValues$3({}, chartSettings), {
+                          lineTension: value[0]
+                        })),
+                        className: "w-full"
+                      }
+                    )
+                  ] }),
+                  /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
+                    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex justify-between mb-2", children: [
+                      /* @__PURE__ */ jsxRuntimeExports.jsx(Label$1, { className: "text-sm font-medium", children: "Point Size" }),
+                      /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "text-sm text-gray-600", children: [
+                        chartSettings.pointRadius,
+                        "px"
+                      ] })
+                    ] }),
+                    /* @__PURE__ */ jsxRuntimeExports.jsx(
+                      Slider,
+                      {
+                        min: 0,
+                        max: 8,
+                        step: 0.5,
+                        value: [(_h = chartSettings.pointRadius) != null ? _h : 4],
+                        onValueChange: (value) => setChartSettings(__spreadProps$2(__spreadValues$3({}, chartSettings), {
+                          pointRadius: value[0]
+                        })),
+                        className: "w-full"
+                      }
+                    )
+                  ] })
+                ] })
+              ] }),
+              /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-4 pb-4 border-b", children: [
+                /* @__PURE__ */ jsxRuntimeExports.jsx("h3", { className: "text-xs font-semibold text-gray-500 uppercase tracking-wide", children: "Chart Title" }),
+                /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-3", children: [
+                  /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
+                    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex justify-between mb-2", children: /* @__PURE__ */ jsxRuntimeExports.jsx(Label$1, { className: "text-sm font-medium", children: "Show Title" }) }),
+                    /* @__PURE__ */ jsxRuntimeExports.jsxs(
+                      Select,
+                      {
+                        value: chartSettings.showTitle !== false ? "yes" : "no",
+                        onValueChange: (value) => setChartSettings(__spreadProps$2(__spreadValues$3({}, chartSettings), {
+                          showTitle: value === "yes"
+                        })),
+                        children: [
+                          /* @__PURE__ */ jsxRuntimeExports.jsx(SelectTrigger, { className: "h-8", children: /* @__PURE__ */ jsxRuntimeExports.jsx(SelectValue, { placeholder: "Show title?" }) }),
+                          /* @__PURE__ */ jsxRuntimeExports.jsxs(SelectContent, { children: [
+                            /* @__PURE__ */ jsxRuntimeExports.jsx(SelectItem, { value: "no", children: "No" }),
+                            /* @__PURE__ */ jsxRuntimeExports.jsx(SelectItem, { value: "yes", children: "Yes" })
+                          ] })
+                        ]
+                      }
+                    )
+                  ] }),
+                  /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
+                    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex justify-between mb-2", children: /* @__PURE__ */ jsxRuntimeExports.jsx(Label$1, { className: "text-sm font-medium", children: "Title Text" }) }),
+                    /* @__PURE__ */ jsxRuntimeExports.jsx(
+                      "input",
+                      {
+                        type: "text",
+                        placeholder: "Enter custom title (optional)",
+                        value: (_i = chartSettings.titleText) != null ? _i : "",
+                        onChange: (e) => setChartSettings(__spreadProps$2(__spreadValues$3({}, chartSettings), {
+                          titleText: e.target.value
+                        })),
+                        className: "w-full px-3 py-2 border border-gray-300 rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
+                      }
+                    )
+                  ] }),
+                  /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
+                    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex justify-between mb-2", children: [
+                      /* @__PURE__ */ jsxRuntimeExports.jsx(Label$1, { className: "text-sm font-medium", children: "Font Size" }),
+                      /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "text-sm text-gray-600", children: [
+                        chartSettings.titleFontSize,
+                        "px"
+                      ] })
+                    ] }),
+                    /* @__PURE__ */ jsxRuntimeExports.jsx(
+                      Slider,
+                      {
+                        min: 12,
+                        max: 28,
+                        step: 1,
+                        value: [(_j = chartSettings.titleFontSize) != null ? _j : 16],
+                        onValueChange: (value) => setChartSettings(__spreadProps$2(__spreadValues$3({}, chartSettings), {
+                          titleFontSize: value[0]
+                        })),
+                        className: "w-full"
+                      }
+                    )
+                  ] })
+                ] })
+              ] }),
+              /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-4 pb-4 border-b", children: [
+                /* @__PURE__ */ jsxRuntimeExports.jsx("h3", { className: "text-xs font-semibold text-gray-500 uppercase tracking-wide", children: "Data Labels" }),
+                /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-3", children: [
+                  /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
+                    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex justify-between mb-2", children: /* @__PURE__ */ jsxRuntimeExports.jsx(Label$1, { className: "text-sm font-medium", children: "Show Labels" }) }),
+                    /* @__PURE__ */ jsxRuntimeExports.jsxs(
+                      Select,
+                      {
+                        value: chartSettings.showLabels ? "yes" : "no",
+                        onValueChange: (value) => setChartSettings(__spreadProps$2(__spreadValues$3({}, chartSettings), {
+                          showLabels: value === "yes"
+                        })),
+                        children: [
+                          /* @__PURE__ */ jsxRuntimeExports.jsx(SelectTrigger, { className: "h-8", children: /* @__PURE__ */ jsxRuntimeExports.jsx(SelectValue, { placeholder: "Show data labels?" }) }),
+                          /* @__PURE__ */ jsxRuntimeExports.jsxs(SelectContent, { children: [
+                            /* @__PURE__ */ jsxRuntimeExports.jsx(SelectItem, { value: "no", children: "No" }),
+                            /* @__PURE__ */ jsxRuntimeExports.jsx(SelectItem, { value: "yes", children: "Yes" })
+                          ] })
+                        ]
+                      }
+                    )
+                  ] }),
+                  /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
+                    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex justify-between mb-2", children: [
+                      /* @__PURE__ */ jsxRuntimeExports.jsx(Label$1, { className: "text-sm font-medium", children: "Font Size" }),
+                      /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "text-sm text-gray-600", children: [
+                        chartSettings.dataLabelsFontSize,
+                        "px"
+                      ] })
+                    ] }),
+                    /* @__PURE__ */ jsxRuntimeExports.jsx(
+                      Slider,
+                      {
+                        min: 10,
+                        max: 18,
+                        step: 1,
+                        value: [(_k = chartSettings.dataLabelsFontSize) != null ? _k : 12],
+                        onValueChange: (value) => setChartSettings(__spreadProps$2(__spreadValues$3({}, chartSettings), {
+                          dataLabelsFontSize: value[0]
+                        })),
+                        className: "w-full"
+                      }
+                    )
+                  ] })
+                ] })
+              ] }),
+              (agentType === "Series Bar Chart Agent" || agentType === "Bar Chart Agent" || agentType === "Series Line Chart Agent" || agentType === "Line Chart Agent") && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-4 pb-4 border-b", children: [
+                /* @__PURE__ */ jsxRuntimeExports.jsx("h3", { className: "text-xs font-semibold text-gray-500 uppercase tracking-wide", children: "Axes" }),
+                /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-3", children: [
+                  /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
+                    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex justify-between mb-2", children: [
+                      /* @__PURE__ */ jsxRuntimeExports.jsx(Label$1, { className: "text-sm font-medium", children: "X-Axis Title Font Size" }),
+                      /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "text-sm text-gray-600", children: [
+                        chartSettings.xAxisTitleFontSize,
+                        "px"
+                      ] })
+                    ] }),
+                    /* @__PURE__ */ jsxRuntimeExports.jsx(
+                      Slider,
+                      {
+                        min: 10,
+                        max: 18,
+                        step: 1,
+                        value: [(_l = chartSettings.xAxisTitleFontSize) != null ? _l : 13],
+                        onValueChange: (value) => setChartSettings(__spreadProps$2(__spreadValues$3({}, chartSettings), {
+                          xAxisTitleFontSize: value[0]
+                        })),
+                        className: "w-full"
+                      }
+                    )
+                  ] }),
+                  /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
+                    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex justify-between mb-2", children: [
+                      /* @__PURE__ */ jsxRuntimeExports.jsx(Label$1, { className: "text-sm font-medium", children: "X-Axis Tick Font Size" }),
+                      /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "text-sm text-gray-600", children: [
+                        chartSettings.xAxisTickFontSize,
+                        "px"
+                      ] })
+                    ] }),
+                    /* @__PURE__ */ jsxRuntimeExports.jsx(
+                      Slider,
+                      {
+                        min: 10,
+                        max: 14,
+                        step: 1,
+                        value: [(_m = chartSettings.xAxisTickFontSize) != null ? _m : 12],
+                        onValueChange: (value) => setChartSettings(__spreadProps$2(__spreadValues$3({}, chartSettings), {
+                          xAxisTickFontSize: value[0]
+                        })),
+                        className: "w-full"
+                      }
+                    )
+                  ] }),
+                  /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
+                    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex justify-between mb-2", children: [
+                      /* @__PURE__ */ jsxRuntimeExports.jsx(Label$1, { className: "text-sm font-medium", children: "Y-Axis Title Font Size" }),
+                      /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "text-sm text-gray-600", children: [
+                        chartSettings.yAxisTitleFontSize,
+                        "px"
+                      ] })
+                    ] }),
+                    /* @__PURE__ */ jsxRuntimeExports.jsx(
+                      Slider,
+                      {
+                        min: 10,
+                        max: 18,
+                        step: 1,
+                        value: [(_n = chartSettings.yAxisTitleFontSize) != null ? _n : 13],
+                        onValueChange: (value) => setChartSettings(__spreadProps$2(__spreadValues$3({}, chartSettings), {
+                          yAxisTitleFontSize: value[0]
+                        })),
+                        className: "w-full"
+                      }
+                    )
+                  ] }),
+                  /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
+                    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex justify-between mb-2", children: [
+                      /* @__PURE__ */ jsxRuntimeExports.jsx(Label$1, { className: "text-sm font-medium", children: "Y-Axis Tick Font Size" }),
+                      /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "text-sm text-gray-600", children: [
+                        chartSettings.yAxisTickFontSize,
+                        "px"
+                      ] })
+                    ] }),
+                    /* @__PURE__ */ jsxRuntimeExports.jsx(
+                      Slider,
+                      {
+                        min: 10,
+                        max: 14,
+                        step: 1,
+                        value: [(_o = chartSettings.yAxisTickFontSize) != null ? _o : 12],
+                        onValueChange: (value) => setChartSettings(__spreadProps$2(__spreadValues$3({}, chartSettings), {
+                          yAxisTickFontSize: value[0]
+                        })),
+                        className: "w-full"
+                      }
+                    )
+                  ] })
+                ] })
+              ] }),
+              /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-4", children: [
+                /* @__PURE__ */ jsxRuntimeExports.jsx("h3", { className: "text-xs font-semibold text-gray-500 uppercase tracking-wide", children: "Tooltip" }),
+                /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "space-y-3", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
+                  /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex justify-between mb-2", children: [
+                    /* @__PURE__ */ jsxRuntimeExports.jsx(Label$1, { className: "text-sm font-medium", children: "Font Size" }),
+                    /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "text-sm text-gray-600", children: [
+                      chartSettings.tooltipFontSize,
+                      "px"
+                    ] })
+                  ] }),
+                  /* @__PURE__ */ jsxRuntimeExports.jsx(
+                    Slider,
+                    {
+                      min: 10,
+                      max: 16,
+                      step: 1,
+                      value: [(_p = chartSettings.tooltipFontSize) != null ? _p : 12],
+                      onValueChange: (value) => setChartSettings(__spreadProps$2(__spreadValues$3({}, chartSettings), {
+                        tooltipFontSize: value[0]
+                      })),
+                      className: "w-full"
+                    }
+                  )
+                ] }) })
+              ] })
+            ] })
+          ] }) : /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "space-y-4", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-2", children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx(Label$1, { className: "font-semibold text-sm", children: "Query" }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx(
+              Textarea,
               {
-                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"
+                className: "w-full p-2 min-h-[120px]",
+                value: query,
+                onChange: (e) => {
+                  var _a2;
+                  return setQuery((_a2 = e == null ? void 0 : e.target) == null ? void 0 : _a2.value);
+                }
               }
-            ) })
-          ] })
+            )
+          ] }) }) }) }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex-shrink-0 px-6 py-4 border-t border-gray-200 bg-gradient-to-b from-white to-gray-50 flex justify-end", children: /* @__PURE__ */ 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 text-primary-foreground hover:bg-primary/80 focus:ring-primary px-6 py-2 text-sm flex items-center gap-2",
+              children: "Submit"
+            }
+          ) })
         ] })
-      ] })
+      ]
     }
   );
 }
@@ -48323,11 +49417,11 @@ function WidgetDashboard({
   const [internalSelectedWidget, setInternalSelectedWidget] = React.useState(selectedWidget);
   const [currentLayouts, setCurrentLayouts] = React.useState(defaultLayouts);
   const [draftLayouts, setDraftLayouts] = React.useState(defaultLayouts);
-  const [visibleClearButton, setVisibleClearButton] = React.useState("");
   const [showEditModal, setShowEditModal] = React.useState(false);
   const [editInitialQuery, setEditInitialQuery] = React.useState("");
   const [editingWidget, setEditingWidget] = React.useState(null);
   const [widgetResetFunctions, setWidgetResetFunctions] = React.useState(/* @__PURE__ */ new Map());
+  const [clearingChatWidget, setClearingChatWidget] = React.useState("");
   const displayWidgets = React.useMemo(() => {
     if (focusWidgetId) {
       return widgets.filter((w) => w.id === focusWidgetId);
@@ -48380,20 +49474,52 @@ function WidgetDashboard({
   };
   const onClickSettings = (widget) => {
     var _a;
+    const currentWidget = widgets.find((w) => w.id === widget.id) || widget;
     setShowEditModal(true);
-    setEditingWidget(widget);
-    let query = (_a = widget == null ? void 0 : widget.config) == null ? void 0 : _a.query;
+    setEditingWidget(currentWidget);
+    let query = (_a = currentWidget == null ? void 0 : currentWidget.config) == null ? void 0 : _a.query;
     if (query) {
       setEditInitialQuery(query);
     } else {
       setEditInitialQuery("");
     }
   };
-  const handleEditSubmit = async (newQuery, showLabels) => {
+  const saveWidgetConfigToBackend = React.useCallback(
+    lodash.debounce(async (widget) => {
+      try {
+        const widgetService = new WidgetService();
+        await widgetService.saveWidget(widget);
+        console.log(`[WidgetDashboard] Widget ${widget.id} config saved to backend`);
+      } catch (error) {
+        console.error(`[WidgetDashboard] Failed to save widget config:`, error);
+      }
+    }, 1e3),
+    []
+  );
+  const handleConfigUpdate = (widgetId, config) => {
+    setWidgets((prevWidgets) => {
+      const updatedWidgets = prevWidgets.map(
+        (w) => w.id === widgetId ? __spreadProps$1(__spreadValues$1({}, w), {
+          config: __spreadValues$1(__spreadValues$1({}, w.config), config)
+        }) : w
+      );
+      const updatedWidget = updatedWidgets.find((w) => w.id === widgetId);
+      if (updatedWidget) {
+        saveWidgetConfigToBackend(updatedWidget);
+      }
+      return updatedWidgets;
+    });
+  };
+  const handleEditSubmit = async (newQuery, showLabels, chartSettings) => {
     var _a, _b;
     if (!editingWidget) return;
     const updatedWidgets = widgets.map(
-      (w) => w.id === editingWidget.id ? __spreadProps$1(__spreadValues$1({}, w), { config: __spreadProps$1(__spreadValues$1({}, w.config), { query: newQuery, content: __spreadProps$1(__spreadValues$1({}, w.config.content), { showLabels }) }) }) : w
+      (w) => w.id === editingWidget.id ? __spreadProps$1(__spreadValues$1({}, w), {
+        config: __spreadValues$1(__spreadProps$1(__spreadValues$1({}, w.config), {
+          query: newQuery,
+          content: __spreadProps$1(__spreadValues$1({}, w.config.content), { showLabels })
+        }), chartSettings && { chartSettings })
+      }) : w
     );
     setWidgets(updatedWidgets);
     setShowEditModal(false);
@@ -48483,6 +49609,11 @@ function WidgetDashboard({
         setTimeout(() => pollForSqlQuery(), 2e3);
       }
     }
+    try {
+      await stableSaveLayout();
+    } catch (error) {
+      console.error("Failed to save widget configuration:", error);
+    }
   };
   const handleResetReady = React.useCallback((widgetId, resetFn) => {
     setWidgetResetFunctions((prev) => {
@@ -48493,6 +49624,7 @@ function WidgetDashboard({
   }, []);
   const handleClearChat = async (widgetId) => {
     try {
+      setClearingChatWidget(widgetId);
       const response = await fetch(getApiUrl("/api/clear-chat"), {
         method: "POST",
         headers: {
@@ -48514,9 +49646,12 @@ function WidgetDashboard({
       }
     } catch (error) {
       console.error("Error clearing chat:", error);
+    } finally {
+      setClearingChatWidget("");
     }
   };
   const loadData = React.useCallback(async () => {
+    var _a;
     if (!pageId) {
       setIsLoading(false);
       return;
@@ -48537,6 +49672,12 @@ function WidgetDashboard({
       setPageData(data);
       setWidgets(data.widgets || []);
       setDatasetId(data == null ? void 0 : data.dataset_id);
+      (_a = data.widgets) == null ? void 0 : _a.forEach((w) => {
+        var _a2;
+        if ((_a2 = w.config) == null ? void 0 : _a2.chartSettings) {
+          console.log(`[WidgetDashboard] Widget ${w.id} has chartSettings:`, w.config.chartSettings);
+        }
+      });
     } catch (err) {
       console.error("Error loading page data:", err);
     } finally {
@@ -48582,6 +49723,23 @@ function WidgetDashboard({
     const newAgentWidgetIds = widgets.filter((w) => w.type === "agent" && !originalWidgetIdsRef.current.has(w.id)).map((w) => w.id);
     const hasFilterWidget = widgets.some((w) => w.type === "filters");
     try {
+      const widgetsToSave = widgets.map((widget) => __spreadProps$1(__spreadValues$1({}, widget), {
+        config: __spreadProps$1(__spreadValues$1({}, widget.config), {
+          isFirstLoad: false
+        }),
+        position: {
+          x: widget.position_x,
+          y: widget.position_y,
+          width: widget.width,
+          height: widget.height
+        }
+      }));
+      widgetsToSave.forEach((w) => {
+        var _a;
+        if ((_a = w.config) == null ? void 0 : _a.chartSettings) {
+          console.log(`[WidgetDashboard] Saving widget ${w.id} with chartSettings:`, w.config.chartSettings);
+        }
+      });
       const response = await fetch(getApiUrl(`/api/pages/${pageId}`), {
         method: "PUT",
         headers: {
@@ -48590,17 +49748,7 @@ function WidgetDashboard({
         body: JSON.stringify(__spreadProps$1(__spreadValues$1({
           id: pageId
         }, pageData), {
-          widgets: widgets.map((widget) => __spreadProps$1(__spreadValues$1({}, widget), {
-            config: __spreadProps$1(__spreadValues$1({}, widget.config), {
-              isFirstLoad: false
-            }),
-            position: {
-              x: widget.position_x,
-              y: widget.position_y,
-              width: widget.width,
-              height: widget.height
-            }
-          }))
+          widgets: widgetsToSave
         }))
       });
       if (!response.ok) {
@@ -49043,10 +50191,10 @@ function WidgetDashboard({
               const filterStatus = w.type === "agent" ? getWidgetFilterStatus(w.id) : null;
               const badgeInfo = filterStatus ? getFilterStatusBadge(filterStatus.status) : null;
               const isFocusMode = focusWidgetId && w.id === focusWidgetId;
-              const widgetBaseStyles = "rounded-xl border border-gray-200 !bg-white";
-              const widgetHoverStyles = isEditing ? "hover:border-primary-500 hover:shadow-lg transition-all duration-200" : "";
-              const widgetShadow = "shadow-[0_2px_8px_-2px_rgba(0,0,0,0.15)]";
-              return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { "data-widget-id": w.id, className: `${w.type === "text" || w.type === "spacer" ? `${((_b = (_a = w == null ? void 0 : w.config) == null ? void 0 : _a.content) == null ? void 0 : _b.divider) === "yes" && "border-b border-gray-300"} ${isEditing ? `${widgetBaseStyles} ${widgetShadow} ${widgetHoverStyles}` : "flex items-center"}` : `${widgetBaseStyles} ${widgetShadow} ${widgetHoverStyles} p-4 ${isEditing ? "pb-14" : "pb-5"}`} ${isFocusMode ? "h-full" : ""} relative`, children: [
+              const widgetBaseStyles = "rounded-xl border-2 border-gray-300 !bg-white";
+              const widgetHoverStyles = isEditing ? "hover:border-primary-500 hover:shadow-lg transition-all duration-200 cursor-pointer" : "";
+              const widgetShadow = "shadow-[0_4px_12px_-2px_rgba(0,0,0,0.2)]";
+              return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { "data-widget-id": w.id, className: `${w.type === "text" || w.type === "spacer" ? `${((_b = (_a = w == null ? void 0 : w.config) == null ? void 0 : _a.content) == null ? void 0 : _b.divider) === "yes" && "border-b border-gray-300"} ${isEditing ? `${widgetBaseStyles} ${widgetShadow} ${widgetHoverStyles}` : "flex items-center"}` : `${widgetBaseStyles} ${widgetShadow} ${widgetHoverStyles} p-4 ${isEditing ? "pb-14" : "pb-5"}`} ${isFocusMode ? "h-full" : ""} relative overflow-hidden`, children: [
                 w.type === "agent" && badgeInfo && !isApplyingFilters && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "absolute top-2 right-2 z-10", title: (filterStatus == null ? void 0 : filterStatus.reason) || (filterStatus == null ? void 0 : filterStatus.error) || "", children: /* @__PURE__ */ jsxRuntimeExports.jsxs(Badge, { variant: badgeInfo.variant, className: "text-[10px] px-2 py-0.5 gap-1", children: [
                   /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: badgeInfo.icon }),
                   /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: badgeInfo.label })
@@ -49073,13 +50221,7 @@ function WidgetDashboard({
                     w.type !== "spacer" && w.type !== "chatbot" && /* @__PURE__ */ jsxRuntimeExports.jsx(lucideReact.Edit, { onClick: () => onClickSettings && onClickSettings(w), className: "w-5 h-5 text-gray-600" })
                   ] })
                 ] }),
-                /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: `${(w == null ? void 0 : w.type) === "text" || (w == null ? void 0 : w.type) === "spacer" ? `${isEditing ? "px-4" : ""}` : "h-full"} w-full relative`, children: [
-                  (w == null ? void 0 : w.type) === "chatbot" && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "relative z-50", children: [
-                    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { onClick: () => handleClearChat(w == null ? void 0 : w.id), onMouseOver: () => setVisibleClearButton(w == null ? void 0 : w.id), onMouseLeave: () => setVisibleClearButton(""), className: "absolute top-[12px] right-0 z-40 flex align-middle justify-center gap-2 text-sm px-4 py-2 border-primary-300 rounded-l-sm w-fit bg-primary-700 text-white cursor-pointer shadow-md transition-all", children: /* @__PURE__ */ jsxRuntimeExports.jsx(lucideReact.MessageCircleX, { className: "w-5 h-5" }) }),
-                    /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: `absolute top-[56px] right-[16px] z-50 w-max py-1 text-xs px-2 rounded-sm text-white bg-gray-950 ${visibleClearButton === (w == null ? void 0 : w.id) ? "block" : "hidden"}`, children: "Clear Chat" })
-                  ] }),
-                  /* @__PURE__ */ jsxRuntimeExports.jsx(WidgetRenderer, { widget: w, widgetBackendUrl, onResetReady: handleResetReady, widgetIds: widgets.filter((widget) => widget.type !== "chatbot").map((widget) => widget.id), datasetId, pageId, onApplyFilters, isEditing, dashboardName: ((_c = pageData == null ? void 0 : pageData.basic) == null ? void 0 : _c.title) || (pageData == null ? void 0 : pageData.name) || (pageData == null ? void 0 : pageData.title) })
-                ] })
+                /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: `${(w == null ? void 0 : w.type) === "text" || (w == null ? void 0 : w.type) === "spacer" ? `${isEditing ? "px-4" : ""}` : "h-full"} w-full relative`, children: /* @__PURE__ */ jsxRuntimeExports.jsx(WidgetRenderer, { widget: w, widgetBackendUrl, onResetReady: handleResetReady, widgetIds: widgets.filter((widget) => widget.type !== "chatbot").map((widget) => widget.id), datasetId, pageId, onApplyFilters, isEditing, dashboardName: ((_c = pageData == null ? void 0 : pageData.basic) == null ? void 0 : _c.title) || (pageData == null ? void 0 : pageData.name) || (pageData == null ? void 0 : pageData.title), onClearChat: handleClearChat, isClearing: clearingChatWidget, onConfigUpdate: handleConfigUpdate }) })
               ] }, w.id);
             })
           }
@@ -49374,7 +50516,7 @@ function PresentationMode({
                 }
               )
             ] }),
-            /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex-1 bg-white p-6 min-h-0 overflow-hidden", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-full w-full rounded-xl border border-gray-200 bg-white shadow-sm overflow-hidden", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+            /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex-1 bg-white p-6 min-h-0 overflow-hidden", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-full w-full rounded-xl border-2 border-gray-300 bg-white shadow-[0_4px_12px_-2px_rgba(0,0,0,0.2)] overflow-hidden", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
               WidgetRenderer,
               {
                 widget: currentFocusWidget,