@retrivora-ai/rag-engine 1.8.2 → 1.8.3

package/dist/index.js

@@ -73,19 +73,19 @@ __export(index_exports, {
 module.exports = __toCommonJS(index_exports);
 
 // src/components/ChatWidget.tsx
-var import_react15 = __toESM(require("react"));
+var import_react12 = require("react");
 var import_lucide_react8 = require("lucide-react");
 
 // src/components/ChatWindow.tsx
-var import_react14 = __toESM(require("react"));
+var import_react11 = require("react");
 var import_lucide_react7 = require("lucide-react");
 
 // src/components/DocumentUpload.tsx
-var import_react2 = __toESM(require("react"));
+var import_react2 = require("react");
 var import_lucide_react = require("lucide-react");
 
 // src/components/ConfigProvider.tsx
-var import_react = __toESM(require("react"));
+var import_react = require("react");
 
 // src/utils/templateUtils.ts
 function mergeDefined(base, override) {
@@ -137,6 +137,7 @@ var CHAT_SUGGESTIONS = [
 ];
 
 // src/components/ConfigProvider.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
 var ConfigContext = (0, import_react.createContext)(DEFAULT_CONFIG);
 function ConfigProvider({
   config,
@@ -147,13 +148,14 @@ function ConfigProvider({
     ui: mergeDefined(DEFAULT_CONFIG.ui, config == null ? void 0 : config.ui),
     embedding: config == null ? void 0 : config.embedding
   };
-  return /* @__PURE__ */ import_react.default.createElement(ConfigContext.Provider, { value: merged }, children);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ConfigContext.Provider, { value: merged, children });
 }
 function useConfig() {
   return (0, import_react.useContext)(ConfigContext);
 }
 
 // src/components/DocumentUpload.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
 function DocumentUpload({ namespace, onUploadComplete, className = "" }) {
   var _a;
   const { ui, embedding } = useConfig();
@@ -224,92 +226,129 @@ function DocumentUpload({ namespace, onUploadComplete, className = "" }) {
   };
   const isUploading = fileStates.some((s) => s.status === "uploading");
   const hasIdle = fileStates.some((s) => s.status === "idle");
-  return /* @__PURE__ */ import_react2.default.createElement(
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
     "div",
     {
       className: `p-6 border-2 border-dashed transition-all duration-300 rounded-2xl ${isDragging ? "border-emerald-500 bg-emerald-50/50 dark:bg-emerald-500/5" : "border-slate-200 dark:border-white/10 bg-white dark:bg-white/5"} ${className}`,
       onDragOver,
       onDragLeave,
-      onDrop
-    },
-    /* @__PURE__ */ import_react2.default.createElement("div", { className: "flex flex-col items-center justify-center text-center" }, /* @__PURE__ */ import_react2.default.createElement(
-      "div",
-      {
-        className: "w-12 h-12 rounded-full flex items-center justify-center mb-4 shadow-sm",
-        style: { background: `linear-gradient(135deg, ${ui.primaryColor}20, ${ui.accentColor}20)` }
-      },
-      /* @__PURE__ */ import_react2.default.createElement(import_lucide_react.Upload, { className: "w-6 h-6", style: { color: ui.primaryColor } })
-    ), /* @__PURE__ */ import_react2.default.createElement("h3", { className: "text-slate-900 dark:text-white font-semibold mb-1" }, "Upload Documents"), /* @__PURE__ */ import_react2.default.createElement("p", { className: "text-slate-500 dark:text-white/40 text-sm mb-6 max-w-xs" }, "Drag and drop PDF, DOCX, TXT, or JSON files to train your AI on your own data."), /* @__PURE__ */ import_react2.default.createElement(
-      "button",
-      {
-        onClick: () => {
-          var _a2;
-          return (_a2 = fileInputRef.current) == null ? void 0 : _a2.click();
-        },
-        disabled: isUploading,
-        className: "px-4 py-2 rounded-lg text-sm font-medium transition-all hover:scale-105 active:scale-95 disabled:opacity-50",
-        style: {
-          backgroundColor: `${ui.primaryColor}15`,
-          color: ui.primaryColor,
-          border: `1px solid ${ui.primaryColor}30`
-        }
-      },
-      "Select Files"
-    ), /* @__PURE__ */ import_react2.default.createElement(
-      "input",
-      {
-        ref: fileInputRef,
-        type: "file",
-        multiple: true,
-        onChange: onFileSelect,
-        className: "hidden",
-        accept: ".pdf,.docx,.txt,.md,.json,.csv"
-      }
-    ), /* @__PURE__ */ import_react2.default.createElement("div", { className: "mt-6 flex flex-col items-center gap-2 text-sm" }, /* @__PURE__ */ import_react2.default.createElement("label", { className: "text-slate-600 dark:text-white/60 font-medium" }, "Embedding Dimension"), isChangeable ? /* @__PURE__ */ import_react2.default.createElement(
-      "select",
-      {
-        value: dimension,
-        onChange: (e) => setDimension(Number(e.target.value)),
-        disabled: isUploading,
-        className: "px-3 py-1.5 rounded-lg bg-slate-50 dark:bg-white/5 border border-slate-200 dark:border-white/10 text-slate-800 dark:text-white/90 outline-none focus:border-emerald-500 transition-colors"
-      },
-      availableDimensions.map((dim) => /* @__PURE__ */ import_react2.default.createElement("option", { key: dim, value: dim, className: "bg-white dark:bg-slate-900" }, dim))
-    ) : /* @__PURE__ */ import_react2.default.createElement("div", { className: "px-3 py-1.5 rounded-lg bg-slate-100 dark:bg-white/10 border border-slate-200 dark:border-white/10 text-slate-500 dark:text-white/50 cursor-not-allowed text-xs" }, dimension, " (Fixed for ", currentModel, ")"))),
-    fileStates.length > 0 && /* @__PURE__ */ import_react2.default.createElement("div", { className: "mt-8 space-y-3" }, fileStates.map((state, i) => /* @__PURE__ */ import_react2.default.createElement(
-      "div",
-      {
-        key: i,
-        className: "flex items-center justify-between p-3 rounded-xl bg-slate-50 dark:bg-white/5 border border-slate-100 dark:border-white/10"
-      },
-      /* @__PURE__ */ import_react2.default.createElement("div", { className: "flex items-center gap-3 overflow-hidden" }, /* @__PURE__ */ import_react2.default.createElement("div", { className: "w-8 h-8 rounded-lg bg-white dark:bg-white/10 flex items-center justify-center shadow-sm" }, /* @__PURE__ */ import_react2.default.createElement(import_lucide_react.File, { className: "w-4 h-4 text-slate-400" })), /* @__PURE__ */ import_react2.default.createElement("div", { className: "truncate" }, /* @__PURE__ */ import_react2.default.createElement("p", { className: "text-xs font-medium text-slate-700 dark:text-white/80 truncate" }, state.file.name), /* @__PURE__ */ import_react2.default.createElement("p", { className: "text-[10px] text-slate-400" }, (state.file.size / 1024).toFixed(1), " KB"))),
-      /* @__PURE__ */ import_react2.default.createElement("div", { className: "flex items-center gap-2" }, state.status === "uploading" && /* @__PURE__ */ import_react2.default.createElement(import_lucide_react.Loader2, { className: "w-4 h-4 text-slate-400 animate-spin" }), state.status === "success" && /* @__PURE__ */ import_react2.default.createElement(import_lucide_react.CheckCircle, { className: "w-4 h-4 text-emerald-500" }), state.status === "error" && /* @__PURE__ */ import_react2.default.createElement("div", { title: state.error }, /* @__PURE__ */ import_react2.default.createElement(import_lucide_react.AlertCircle, { className: "w-4 h-4 text-rose-500" })), state.status !== "uploading" && /* @__PURE__ */ import_react2.default.createElement(
-        "button",
-        {
-          onClick: () => removeFile(i),
-          className: "p-1 rounded-md hover:bg-slate-200 dark:hover:bg-white/10 transition-colors"
-        },
-        /* @__PURE__ */ import_react2.default.createElement(import_lucide_react.X, { className: "w-3.5 h-3.5 text-slate-400" })
-      ))
-    )), hasIdle && !isUploading && /* @__PURE__ */ import_react2.default.createElement(
-      "button",
-      {
-        onClick: uploadFiles,
-        className: "w-full mt-4 py-2.5 rounded-xl text-sm font-semibold text-white shadow-lg transition-all hover:scale-[1.02] active:scale-[0.98]",
-        style: { background: `linear-gradient(135deg, ${ui.primaryColor}, ${ui.accentColor})` }
-      },
-      "Start Upload"
-    ))
+      onDrop,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "flex flex-col items-center justify-center text-center", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+            "div",
+            {
+              className: "w-12 h-12 rounded-full flex items-center justify-center mb-4 shadow-sm",
+              style: { background: `linear-gradient(135deg, ${ui.primaryColor}20, ${ui.accentColor}20)` },
+              children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_lucide_react.Upload, { className: "w-6 h-6", style: { color: ui.primaryColor } })
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("h3", { className: "text-slate-900 dark:text-white font-semibold mb-1", children: "Upload Documents" }),
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { className: "text-slate-500 dark:text-white/40 text-sm mb-6 max-w-xs", children: "Drag and drop PDF, DOCX, TXT, or JSON files to train your AI on your own data." }),
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+            "button",
+            {
+              onClick: () => {
+                var _a2;
+                return (_a2 = fileInputRef.current) == null ? void 0 : _a2.click();
+              },
+              disabled: isUploading,
+              className: "px-4 py-2 rounded-lg text-sm font-medium transition-all hover:scale-105 active:scale-95 disabled:opacity-50",
+              style: {
+                backgroundColor: `${ui.primaryColor}15`,
+                color: ui.primaryColor,
+                border: `1px solid ${ui.primaryColor}30`
+              },
+              children: "Select Files"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+            "input",
+            {
+              ref: fileInputRef,
+              type: "file",
+              multiple: true,
+              onChange: onFileSelect,
+              className: "hidden",
+              accept: ".pdf,.docx,.txt,.md,.json,.csv"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "mt-6 flex flex-col items-center gap-2 text-sm", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("label", { className: "text-slate-600 dark:text-white/60 font-medium", children: "Embedding Dimension" }),
+            isChangeable ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+              "select",
+              {
+                value: dimension,
+                onChange: (e) => setDimension(Number(e.target.value)),
+                disabled: isUploading,
+                className: "px-3 py-1.5 rounded-lg bg-slate-50 dark:bg-white/5 border border-slate-200 dark:border-white/10 text-slate-800 dark:text-white/90 outline-none focus:border-emerald-500 transition-colors",
+                children: availableDimensions.map((dim) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("option", { value: dim, className: "bg-white dark:bg-slate-900", children: dim }, dim))
+              }
+            ) : /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "px-3 py-1.5 rounded-lg bg-slate-100 dark:bg-white/10 border border-slate-200 dark:border-white/10 text-slate-500 dark:text-white/50 cursor-not-allowed text-xs", children: [
+              dimension,
+              " (Fixed for ",
+              currentModel,
+              ")"
+            ] })
+          ] })
+        ] }),
+        fileStates.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "mt-8 space-y-3", children: [
+          fileStates.map((state, i) => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+            "div",
+            {
+              className: "flex items-center justify-between p-3 rounded-xl bg-slate-50 dark:bg-white/5 border border-slate-100 dark:border-white/10",
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "flex items-center gap-3 overflow-hidden", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "w-8 h-8 rounded-lg bg-white dark:bg-white/10 flex items-center justify-center shadow-sm", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_lucide_react.File, { className: "w-4 h-4 text-slate-400" }) }),
+                  /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "truncate", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { className: "text-xs font-medium text-slate-700 dark:text-white/80 truncate", children: state.file.name }),
+                    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("p", { className: "text-[10px] text-slate-400", children: [
+                      (state.file.size / 1024).toFixed(1),
+                      " KB"
+                    ] })
+                  ] })
+                ] }),
+                /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "flex items-center gap-2", children: [
+                  state.status === "uploading" && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_lucide_react.Loader2, { className: "w-4 h-4 text-slate-400 animate-spin" }),
+                  state.status === "success" && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_lucide_react.CheckCircle, { className: "w-4 h-4 text-emerald-500" }),
+                  state.status === "error" && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { title: state.error, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_lucide_react.AlertCircle, { className: "w-4 h-4 text-rose-500" }) }),
+                  state.status !== "uploading" && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                    "button",
+                    {
+                      onClick: () => removeFile(i),
+                      className: "p-1 rounded-md hover:bg-slate-200 dark:hover:bg-white/10 transition-colors",
+                      children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_lucide_react.X, { className: "w-3.5 h-3.5 text-slate-400" })
+                    }
+                  )
+                ] })
+              ]
+            },
+            i
+          )),
+          hasIdle && !isUploading && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+            "button",
+            {
+              onClick: uploadFiles,
+              className: "w-full mt-4 py-2.5 rounded-xl text-sm font-semibold text-white shadow-lg transition-all hover:scale-[1.02] active:scale-[0.98]",
+              style: { background: `linear-gradient(135deg, ${ui.primaryColor}, ${ui.accentColor})` },
+              children: "Start Upload"
+            }
+          )
+        ] })
+      ]
+    }
   );
 }
 
 // src/components/MessageBubble.tsx
-var import_react12 = __toESM(require("react"));
+var import_react9 = __toESM(require("react"));
 var import_lucide_react6 = require("lucide-react");
 var import_react_markdown = __toESM(require("react-markdown"));
 
 // src/components/SourceCard.tsx
 var import_react3 = __toESM(require("react"));
 var import_lucide_react2 = require("lucide-react");
+var import_jsx_runtime3 = require("react/jsx-runtime");
 function SourceCard({ source, index }) {
   var _a, _b;
   const [expanded, setExpanded] = import_react3.default.useState(false);
@@ -318,62 +357,98 @@ function SourceCard({ source, index }) {
   const scoreBg = source.score >= 0.8 ? "bg-emerald-50 border-emerald-100 dark:bg-emerald-400/10 dark:border-emerald-400/20" : source.score >= 0.6 ? "bg-amber-50 border-amber-100 dark:bg-amber-400/10 dark:border-amber-400/20" : "bg-rose-50 border-rose-100 dark:bg-rose-400/10 dark:border-rose-400/20";
   const preview = source.content.slice(0, 120);
   const hasMore = source.content.length > 120;
-  return /* @__PURE__ */ import_react3.default.createElement(
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
     "div",
     {
       className: `rounded-xl border backdrop-blur-sm p-3 transition-all duration-200 hover:scale-[1.01] cursor-pointer ${scoreBg}`,
-      onClick: () => setExpanded((e) => !e)
-    },
-    /* @__PURE__ */ import_react3.default.createElement("div", { className: "flex items-start justify-between gap-2" }, /* @__PURE__ */ import_react3.default.createElement("div", { className: "flex items-center gap-2 min-w-0" }, /* @__PURE__ */ import_react3.default.createElement("span", { className: "flex-shrink-0 w-5 h-5 rounded-full bg-slate-200 dark:bg-white/10 flex items-center justify-center text-[10px] font-bold text-slate-500 dark:text-white/60" }, index + 1), /* @__PURE__ */ import_react3.default.createElement("span", { className: "text-xs text-slate-500 dark:text-white/50 truncate font-mono" }, (_b = (_a = source.metadata) == null ? void 0 : _a.docId) != null ? _b : source.id)), /* @__PURE__ */ import_react3.default.createElement("span", { className: `flex-shrink-0 text-xs font-semibold ${scoreColor} tabular-nums` }, scorePercent, "%")),
-    /* @__PURE__ */ import_react3.default.createElement("p", { className: "mt-2 text-xs text-slate-600 dark:text-white/70 leading-relaxed" }, expanded ? source.content : `${preview}${hasMore && !expanded ? "\u2026" : ""}`),
-    hasMore && /* @__PURE__ */ import_react3.default.createElement("button", { className: "mt-1 text-[10px] text-indigo-400 hover:text-indigo-300 transition-colors flex items-center gap-0.5" }, expanded ? /* @__PURE__ */ import_react3.default.createElement(import_react3.default.Fragment, null, /* @__PURE__ */ import_react3.default.createElement(import_lucide_react2.ChevronUp, { className: "w-3 h-3" }), " Show less") : /* @__PURE__ */ import_react3.default.createElement(import_react3.default.Fragment, null, /* @__PURE__ */ import_react3.default.createElement(import_lucide_react2.ChevronDown, { className: "w-3 h-3" }), " Show more"))
+      onClick: () => setExpanded((e) => !e),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "flex items-start justify-between gap-2", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "flex items-center gap-2 min-w-0", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "flex-shrink-0 w-5 h-5 rounded-full bg-slate-200 dark:bg-white/10 flex items-center justify-center text-[10px] font-bold text-slate-500 dark:text-white/60", children: index + 1 }),
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "text-xs text-slate-500 dark:text-white/50 truncate font-mono", children: (_b = (_a = source.metadata) == null ? void 0 : _a.docId) != null ? _b : source.id })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("span", { className: `flex-shrink-0 text-xs font-semibold ${scoreColor} tabular-nums`, children: [
+            scorePercent,
+            "%"
+          ] })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { className: "mt-2 text-xs text-slate-600 dark:text-white/70 leading-relaxed", children: expanded ? source.content : `${preview}${hasMore && !expanded ? "\u2026" : ""}` }),
+        hasMore && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("button", { className: "mt-1 text-[10px] text-indigo-400 hover:text-indigo-300 transition-colors flex items-center gap-0.5", children: expanded ? /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_lucide_react2.ChevronUp, { className: "w-3 h-3" }),
+          " Show less"
+        ] }) : /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_lucide_react2.ChevronDown, { className: "w-3 h-3" }),
+          " Show more"
+        ] }) })
+      ]
+    }
   );
 }
 
 // src/components/ProductCarousel.tsx
-var import_react5 = __toESM(require("react"));
+var import_react4 = require("react");
 var import_lucide_react4 = require("lucide-react");
 
 // src/components/ProductCard.tsx
-var import_react4 = __toESM(require("react"));
 var import_image = __toESM(require("next/image"));
 var import_lucide_react3 = require("lucide-react");
+var import_jsx_runtime4 = require("react/jsx-runtime");
 function ProductCard({ product, primaryColor = "#6366f1", onAddToCart }) {
-  return /* @__PURE__ */ import_react4.default.createElement("div", { className: "flex-shrink-0 w-full bg-white dark:bg-white/5 border border-slate-200 dark:border-white/10 rounded-xl overflow-hidden shadow-sm hover:shadow-md transition-all duration-300 group" }, /* @__PURE__ */ import_react4.default.createElement("div", { className: "relative h-40 w-full bg-slate-100 dark:bg-white/5 flex items-center justify-center overflow-hidden" }, product.image ? /* @__PURE__ */ import_react4.default.createElement(
-    import_image.default,
-    {
-      src: product.image,
-      alt: product.name,
-      fill: true,
-      unoptimized: true,
-      className: "object-cover group-hover:scale-105 transition-transform duration-500"
-    }
-  ) : /* @__PURE__ */ import_react4.default.createElement("div", { className: "text-slate-400 dark:text-white/20" }, /* @__PURE__ */ import_react4.default.createElement(import_lucide_react3.ShoppingCart, { className: "w-12 h-12" })), product.brand && /* @__PURE__ */ import_react4.default.createElement("div", { className: "absolute top-2 left-2 px-2 py-1 bg-white/90 dark:bg-black/60 backdrop-blur-md rounded-md text-[10px] font-bold uppercase tracking-wider text-slate-700 dark:text-white/90 shadow-sm" }, product.brand)), /* @__PURE__ */ import_react4.default.createElement("div", { className: "p-4 flex flex-col gap-2" }, /* @__PURE__ */ import_react4.default.createElement("div", { className: "flex justify-between items-start gap-2" }, /* @__PURE__ */ import_react4.default.createElement("h3", { className: "text-sm font-semibold text-slate-800 dark:text-white/90 line-clamp-1" }, product.name), product.price && /* @__PURE__ */ import_react4.default.createElement("span", { className: "text-sm font-bold", style: { color: primaryColor } }, typeof product.price === "number" ? `$${product.price}` : String(product.price).match(/^[\d.]/) ? `$${product.price}` : product.price)), product.description && /* @__PURE__ */ import_react4.default.createElement("p", { className: "text-[11px] text-slate-500 dark:text-white/50 line-clamp-2 leading-relaxed" }, product.description), /* @__PURE__ */ import_react4.default.createElement("div", { className: "mt-2 flex gap-2" }, /* @__PURE__ */ import_react4.default.createElement(
-    "button",
-    {
-      onClick: () => onAddToCart == null ? void 0 : onAddToCart(product),
-      className: "flex-1 py-2 px-3 rounded-lg text-[11px] font-medium text-white shadow-sm hover:opacity-90 transition-opacity flex items-center justify-center gap-1.5",
-      style: { background: primaryColor }
-    },
-    /* @__PURE__ */ import_react4.default.createElement(import_lucide_react3.ShoppingCart, { className: "w-3 h-3" }),
-    "Add to Cart"
-  ), product.link && /* @__PURE__ */ import_react4.default.createElement(
-    "a",
-    {
-      href: product.link,
-      target: "_blank",
-      rel: "noopener noreferrer",
-      className: "p-2 rounded-lg bg-slate-100 dark:bg-white/10 text-slate-600 dark:text-white/70 hover:bg-slate-200 dark:hover:bg-white/20 transition-colors"
-    },
-    /* @__PURE__ */ import_react4.default.createElement(import_lucide_react3.ExternalLink, { className: "w-3.5 h-3.5" })
-  ))));
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "flex-shrink-0 w-full bg-white dark:bg-white/5 border border-slate-200 dark:border-white/10 rounded-xl overflow-hidden shadow-sm hover:shadow-md transition-all duration-300 group", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "relative h-40 w-full bg-slate-100 dark:bg-white/5 flex items-center justify-center overflow-hidden", children: [
+      product.image ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+        import_image.default,
+        {
+          src: product.image,
+          alt: product.name,
+          fill: true,
+          unoptimized: true,
+          className: "object-cover group-hover:scale-105 transition-transform duration-500"
+        }
+      ) : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "text-slate-400 dark:text-white/20", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_lucide_react3.ShoppingCart, { className: "w-12 h-12" }) }),
+      product.brand && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "absolute top-2 left-2 px-2 py-1 bg-white/90 dark:bg-black/60 backdrop-blur-md rounded-md text-[10px] font-bold uppercase tracking-wider text-slate-700 dark:text-white/90 shadow-sm", children: product.brand })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "p-4 flex flex-col gap-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "flex justify-between items-start gap-2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("h3", { className: "text-sm font-semibold text-slate-800 dark:text-white/90 line-clamp-1", children: product.name }),
+        product.price && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "text-sm font-bold", style: { color: primaryColor }, children: typeof product.price === "number" ? `$${product.price}` : String(product.price).match(/^[\d.]/) ? `$${product.price}` : product.price })
+      ] }),
+      product.description && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("p", { className: "text-[11px] text-slate-500 dark:text-white/50 line-clamp-2 leading-relaxed", children: product.description }),
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "mt-2 flex gap-2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+          "button",
+          {
+            onClick: () => onAddToCart == null ? void 0 : onAddToCart(product),
+            className: "flex-1 py-2 px-3 rounded-lg text-[11px] font-medium text-white shadow-sm hover:opacity-90 transition-opacity flex items-center justify-center gap-1.5",
+            style: { background: primaryColor },
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_lucide_react3.ShoppingCart, { className: "w-3 h-3" }),
+              "Add to Cart"
+            ]
+          }
+        ),
+        product.link && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          "a",
+          {
+            href: product.link,
+            target: "_blank",
+            rel: "noopener noreferrer",
+            className: "p-2 rounded-lg bg-slate-100 dark:bg-white/10 text-slate-600 dark:text-white/70 hover:bg-slate-200 dark:hover:bg-white/20 transition-colors",
+            children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_lucide_react3.ExternalLink, { className: "w-3.5 h-3.5" })
+          }
+        )
+      ] })
+    ] })
+  ] });
 }
 
 // src/components/ProductCarousel.tsx
+var import_jsx_runtime5 = require("react/jsx-runtime");
 function ProductCarousel({ products, primaryColor = "#6366f1", onAddToCart }) {
-  const scrollRef = (0, import_react5.useRef)(null);
-  const [canScroll, setCanScroll] = (0, import_react5.useState)(false);
-  (0, import_react5.useEffect)(() => {
+  const scrollRef = (0, import_react4.useRef)(null);
+  const [canScroll, setCanScroll] = (0, import_react4.useState)(false);
+  (0, import_react4.useEffect)(() => {
     const checkScroll = () => {
       if (scrollRef.current) {
         const hasOverflow = scrollRef.current.scrollWidth > scrollRef.current.clientWidth;
@@ -397,55 +472,61 @@ function ProductCarousel({ products, primaryColor = "#6366f1", onAddToCart }) {
   };
   if (!products || products.length === 0) return null;
   if (products.length === 1) {
-    return /* @__PURE__ */ import_react5.default.createElement("div", { className: "my-4 w-[min(88%,18rem)] min-w-0 max-w-full animate-fade-in-up" }, /* @__PURE__ */ import_react5.default.createElement(ProductCard, { product: products[0], primaryColor, onAddToCart }));
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "my-4 w-[min(88%,18rem)] min-w-0 max-w-full animate-fade-in-up", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ProductCard, { product: products[0], primaryColor, onAddToCart }) });
   }
-  return /* @__PURE__ */ import_react5.default.createElement("div", { className: "relative w-full my-4 group/carousel animate-fade-in-up" }, canScroll && /* @__PURE__ */ import_react5.default.createElement(import_react5.default.Fragment, null, /* @__PURE__ */ import_react5.default.createElement("div", { className: "absolute -left-4 top-1/2 -translate-y-1/2 z-20 opacity-100 md:opacity-0 md:group-hover/carousel:opacity-100 transition-opacity" }, /* @__PURE__ */ import_react5.default.createElement(
-    "button",
-    {
-      onClick: (e) => {
-        e.stopPropagation();
-        scroll("left");
-      },
-      className: "p-2 rounded-full bg-white dark:bg-slate-800 shadow-xl border border-slate-200 dark:border-white/10 text-slate-600 dark:text-white/80 hover:text-indigo-500 dark:hover:text-indigo-400 transition-all hover:scale-110 active:scale-95",
-      "aria-label": "Scroll left"
-    },
-    /* @__PURE__ */ import_react5.default.createElement(import_lucide_react4.ChevronLeft, { className: "w-5 h-5" })
-  )), /* @__PURE__ */ import_react5.default.createElement("div", { className: "absolute -right-4 top-1/2 -translate-y-1/2 z-20 opacity-100 md:opacity-0 md:group-hover/carousel:opacity-100 transition-opacity" }, /* @__PURE__ */ import_react5.default.createElement(
-    "button",
-    {
-      onClick: (e) => {
-        e.stopPropagation();
-        scroll("right");
-      },
-      className: "p-2 rounded-full bg-white dark:bg-slate-800 shadow-xl border border-slate-200 dark:border-white/10 text-slate-600 dark:text-white/80 hover:text-indigo-500 dark:hover:text-indigo-400 transition-all hover:scale-110 active:scale-95",
-      "aria-label": "Scroll right"
-    },
-    /* @__PURE__ */ import_react5.default.createElement(import_lucide_react4.ChevronRight, { className: "w-5 h-5" })
-  ))), /* @__PURE__ */ import_react5.default.createElement(
-    "div",
-    {
-      ref: scrollRef,
-      className: "flex gap-4 overflow-x-auto pb-4 px-1 scrollbar-hide snap-x snap-mandatory",
-      style: { scrollbarWidth: "none", msOverflowStyle: "none" }
-    },
-    products.map((product) => /* @__PURE__ */ import_react5.default.createElement(
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "relative w-full my-4 group/carousel animate-fade-in-up", children: [
+    canScroll && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "absolute -left-4 top-1/2 -translate-y-1/2 z-20 opacity-100 md:opacity-0 md:group-hover/carousel:opacity-100 transition-opacity", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        "button",
+        {
+          onClick: (e) => {
+            e.stopPropagation();
+            scroll("left");
+          },
+          className: "p-2 rounded-full bg-white dark:bg-slate-800 shadow-xl border border-slate-200 dark:border-white/10 text-slate-600 dark:text-white/80 hover:text-indigo-500 dark:hover:text-indigo-400 transition-all hover:scale-110 active:scale-95",
+          "aria-label": "Scroll left",
+          children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_lucide_react4.ChevronLeft, { className: "w-5 h-5" })
+        }
+      ) }),
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "absolute -right-4 top-1/2 -translate-y-1/2 z-20 opacity-100 md:opacity-0 md:group-hover/carousel:opacity-100 transition-opacity", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        "button",
+        {
+          onClick: (e) => {
+            e.stopPropagation();
+            scroll("right");
+          },
+          className: "p-2 rounded-full bg-white dark:bg-slate-800 shadow-xl border border-slate-200 dark:border-white/10 text-slate-600 dark:text-white/80 hover:text-indigo-500 dark:hover:text-indigo-400 transition-all hover:scale-110 active:scale-95",
+          "aria-label": "Scroll right",
+          children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_lucide_react4.ChevronRight, { className: "w-5 h-5" })
+        }
+      ) })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
       "div",
       {
-        key: product.id,
-        className: "snap-start flex-shrink-0 w-[min(88%,18rem)] min-w-[11rem] max-w-full"
-      },
-      /* @__PURE__ */ import_react5.default.createElement(ProductCard, { product, primaryColor, onAddToCart })
-    ))
-  ));
+        ref: scrollRef,
+        className: "flex gap-4 overflow-x-auto pb-4 px-1 scrollbar-hide snap-x snap-mandatory",
+        style: { scrollbarWidth: "none", msOverflowStyle: "none" },
+        children: products.map((product) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+          "div",
+          {
+            className: "snap-start flex-shrink-0 w-[min(88%,18rem)] min-w-[11rem] max-w-full",
+            children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ProductCard, { product, primaryColor, onAddToCart })
+          },
+          product.id
+        ))
+      }
+    )
+  ] });
 }
 
 // src/components/VisualizationRenderer.tsx
-var import_react7 = __toESM(require("react"));
 var import_recharts2 = require("recharts");
 
 // src/components/DynamicChart.tsx
-var import_react6 = __toESM(require("react"));
+var import_react5 = __toESM(require("react"));
 var import_recharts = require("recharts");
+var import_jsx_runtime6 = require("react/jsx-runtime");
 var CHART_COLORS = ["#6366f1", "#10b981", "#f59e0b", "#ef4444", "#8b5cf6", "#ec4899"];
 function DynamicChart({
   config,
@@ -456,9 +537,9 @@ function DynamicChart({
 }) {
   const { type, data } = config;
   const colors = config.colors || [primaryColor, accentColor, ...CHART_COLORS];
-  const containerRef = import_react6.default.useRef(null);
-  const [containerWidth, setContainerWidth] = import_react6.default.useState(0);
-  import_react6.default.useEffect(() => {
+  const containerRef = import_react5.default.useRef(null);
+  const [containerWidth, setContainerWidth] = import_react5.default.useState(0);
+  import_react5.default.useEffect(() => {
     const element = containerRef.current;
     if (!element || typeof ResizeObserver === "undefined") return;
     const updateWidth = (width) => {
@@ -484,7 +565,7 @@ function DynamicChart({
     return text.length > maxLength ? `${text.slice(0, maxLength)}\u2026` : text;
   };
   const chartMargin = isTiny ? { top: 8, right: 4, left: -28, bottom: 0 } : isCompact ? { top: 10, right: 6, left: -24, bottom: 0 } : { top: 10, right: 10, left: -20, bottom: 0 };
-  const sanitizedData = import_react6.default.useMemo(() => {
+  const sanitizedData = import_react5.default.useMemo(() => {
     if (!data) return [];
     return data.map((item) => {
       const newItem = {};
@@ -518,17 +599,17 @@ function DynamicChart({
   }, [data]);
   if (isStreaming) {
     const bars = type === "pie" ? 6 : 5;
-    return /* @__PURE__ */ import_react6.default.createElement("div", { className: "w-full mt-4 mb-2 animate-pulse" }, type === "pie" ? /* @__PURE__ */ import_react6.default.createElement("div", { className: "mx-auto w-40 h-40 rounded-full bg-slate-100 dark:bg-white/10" }) : /* @__PURE__ */ import_react6.default.createElement("div", { className: "flex items-end gap-2 h-32 px-2" }, Array.from({ length: bars }).map((_, i) => /* @__PURE__ */ import_react6.default.createElement(
+    return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "w-full mt-4 mb-2 animate-pulse", children: type === "pie" ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "mx-auto w-40 h-40 rounded-full bg-slate-100 dark:bg-white/10" }) : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "flex items-end gap-2 h-32 px-2", children: Array.from({ length: bars }).map((_, i) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
       "div",
       {
-        key: i,
         className: "flex-1 rounded-t-md bg-slate-100 dark:bg-white/10",
         style: { height: `${40 + i % 3 * 25}%` }
-      }
-    ))));
+      },
+      i
+    )) }) });
   }
   if (!data || data.length === 0) {
-    return /* @__PURE__ */ import_react6.default.createElement("div", { className: "p-4 text-sm text-slate-500" }, "No data available for chart.");
+    return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "p-4 text-sm text-slate-500", children: "No data available for chart." });
   }
   const firstItem = sanitizedData[0];
   const allKeys = Object.keys(firstItem);
@@ -553,14 +634,20 @@ function DynamicChart({
   const renderTooltip = (row, label) => {
     var _a, _b;
     if (!row) return null;
-    return /* @__PURE__ */ import_react6.default.createElement("div", { className: "rounded-xl border border-slate-200 bg-white px-3 py-2 text-xs shadow-xl dark:border-white/10 dark:bg-slate-950" }, /* @__PURE__ */ import_react6.default.createElement("p", { className: "mb-2 font-semibold text-slate-800 dark:text-white/90" }, String((_b = (_a = row[finalXKey]) != null ? _a : label) != null ? _b : "Details")), Object.entries(row).map(([key, value]) => {
-      var _a2;
-      if (value === null || value === void 0 || key === finalXKey) return null;
-      if (typeof value === "object") return null;
-      const forbiddenKeys = ["fill", "color", "payload", "percent", "stroke", "inStock"];
-      if (forbiddenKeys.includes(key)) return null;
-      return /* @__PURE__ */ import_react6.default.createElement("div", { key, className: "flex items-center justify-between gap-3 text-slate-600 dark:text-white/70" }, /* @__PURE__ */ import_react6.default.createElement("span", null, (_a2 = tooltipLabelMap[key]) != null ? _a2 : key), /* @__PURE__ */ import_react6.default.createElement("span", { className: "font-medium text-slate-900 dark:text-white/90" }, String(value)));
-    }));
+    return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "rounded-xl border border-slate-200 bg-white px-3 py-2 text-xs shadow-xl dark:border-white/10 dark:bg-slate-950", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { className: "mb-2 font-semibold text-slate-800 dark:text-white/90", children: String((_b = (_a = row[finalXKey]) != null ? _a : label) != null ? _b : "Details") }),
+      Object.entries(row).map(([key, value]) => {
+        var _a2;
+        if (value === null || value === void 0 || key === finalXKey) return null;
+        if (typeof value === "object") return null;
+        const forbiddenKeys = ["fill", "color", "payload", "percent", "stroke", "inStock"];
+        if (forbiddenKeys.includes(key)) return null;
+        return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "flex items-center justify-between gap-3 text-slate-600 dark:text-white/70", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { children: (_a2 = tooltipLabelMap[key]) != null ? _a2 : key }),
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "font-medium text-slate-900 dark:text-white/90", children: String(value) })
+        ] }, key);
+      })
+    ] });
   };
   const getTooltipRow = (payload) => {
     if (!Array.isArray(payload) || payload.length === 0) return null;
@@ -571,45 +658,64 @@ function DynamicChart({
     return row;
   };
   if (type === "pie") {
-    return /* @__PURE__ */ import_react6.default.createElement("div", { ref: containerRef, className: "w-full min-w-0 mt-4 mb-2 select-none overflow-hidden" }, /* @__PURE__ */ import_react6.default.createElement("div", { className: "mx-auto w-full max-w-full aspect-square" }, /* @__PURE__ */ import_react6.default.createElement(import_recharts.ResponsiveContainer, { width: "100%", height: "100%" }, /* @__PURE__ */ import_react6.default.createElement(import_recharts.PieChart, null, /* @__PURE__ */ import_react6.default.createElement(
-      import_recharts.Pie,
+    return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { ref: containerRef, className: "w-full min-w-0 mt-4 mb-2 select-none overflow-hidden", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "mx-auto w-full max-w-full aspect-square", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_recharts.ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_recharts.PieChart, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+        import_recharts.Pie,
+        {
+          data: sanitizedData,
+          dataKey: pieDataKey,
+          nameKey: finalXKey,
+          cx: "50%",
+          cy: "50%",
+          outerRadius: pieOuterRadius,
+          label: false,
+          labelLine: false,
+          children: sanitizedData.map((_entry, index) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_recharts.Cell, { fill: colors[index % colors.length] }, `cell-${index}`))
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_recharts.Tooltip, { content: (props) => renderTooltip(getTooltipRow(props.payload), typeof props.label === "string" ? props.label : void 0) }),
+      showLegend && !isCompact && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_recharts.Legend, { wrapperStyle: { fontSize: 12 }, verticalAlign: "bottom" })
+    ] }) }) }) });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { ref: containerRef, className: "w-full min-w-0 mt-4 mb-2 select-none overflow-hidden", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "w-full aspect-[4/3]", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_recharts.ResponsiveContainer, { width: "100%", height: "100%", children: type === "bar" ? /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_recharts.BarChart, { data: sanitizedData, margin: chartMargin, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_recharts.CartesianGrid, { strokeDasharray: "3 3", vertical: false, stroke: "#e2e8f0" }),
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_recharts.XAxis, { dataKey: finalXKey, tick: axisTick, tickFormatter: truncateAxisLabel, tickLine: false, axisLine: { stroke: "#cbd5e1" }, interval: 0, minTickGap: isTiny ? 2 : isCompact ? 6 : 12 }),
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_recharts.YAxis, { tick: axisTick, tickLine: false, axisLine: false }),
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_recharts.Tooltip, { content: (props) => renderTooltip(getTooltipRow(props.payload), typeof props.label === "string" ? props.label : void 0), cursor: { fill: "#f1f5f9" } }),
+    showLegend && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_recharts.Legend, { wrapperStyle: { fontSize: isCompact ? 10 : 12 } }),
+    finalDataKeys.map((key, index) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+      import_recharts.Bar,
       {
-        data: sanitizedData,
-        dataKey: pieDataKey,
-        nameKey: finalXKey,
-        cx: "50%",
-        cy: "50%",
-        outerRadius: pieOuterRadius,
-        label: false,
-        labelLine: false
+        dataKey: key,
+        fill: colors[index % colors.length],
+        radius: [4, 4, 0, 0],
+        barSize: isTiny ? Math.max(10, 28 / data.length) : isCompact ? Math.max(14, 42 / data.length) : Math.max(20, 60 / data.length)
       },
-      sanitizedData.map((_entry, index) => /* @__PURE__ */ import_react6.default.createElement(import_recharts.Cell, { key: `cell-${index}`, fill: colors[index % colors.length] }))
-    ), /* @__PURE__ */ import_react6.default.createElement(import_recharts.Tooltip, { content: (props) => renderTooltip(getTooltipRow(props.payload), typeof props.label === "string" ? props.label : void 0) }), showLegend && !isCompact && /* @__PURE__ */ import_react6.default.createElement(import_recharts.Legend, { wrapperStyle: { fontSize: 12 }, verticalAlign: "bottom" })))));
-  }
-  return /* @__PURE__ */ import_react6.default.createElement("div", { ref: containerRef, className: "w-full min-w-0 mt-4 mb-2 select-none overflow-hidden" }, /* @__PURE__ */ import_react6.default.createElement("div", { className: "w-full aspect-[4/3]" }, /* @__PURE__ */ import_react6.default.createElement(import_recharts.ResponsiveContainer, { width: "100%", height: "100%" }, type === "bar" ? /* @__PURE__ */ import_react6.default.createElement(import_recharts.BarChart, { data: sanitizedData, margin: chartMargin }, /* @__PURE__ */ import_react6.default.createElement(import_recharts.CartesianGrid, { strokeDasharray: "3 3", vertical: false, stroke: "#e2e8f0" }), /* @__PURE__ */ import_react6.default.createElement(import_recharts.XAxis, { dataKey: finalXKey, tick: axisTick, tickFormatter: truncateAxisLabel, tickLine: false, axisLine: { stroke: "#cbd5e1" }, interval: 0, minTickGap: isTiny ? 2 : isCompact ? 6 : 12 }), /* @__PURE__ */ import_react6.default.createElement(import_recharts.YAxis, { tick: axisTick, tickLine: false, axisLine: false }), /* @__PURE__ */ import_react6.default.createElement(import_recharts.Tooltip, { content: (props) => renderTooltip(getTooltipRow(props.payload), typeof props.label === "string" ? props.label : void 0), cursor: { fill: "#f1f5f9" } }), showLegend && /* @__PURE__ */ import_react6.default.createElement(import_recharts.Legend, { wrapperStyle: { fontSize: isCompact ? 10 : 12 } }), finalDataKeys.map((key, index) => /* @__PURE__ */ import_react6.default.createElement(
-    import_recharts.Bar,
-    {
-      key,
-      dataKey: key,
-      fill: colors[index % colors.length],
-      radius: [4, 4, 0, 0],
-      barSize: isTiny ? Math.max(10, 28 / data.length) : isCompact ? Math.max(14, 42 / data.length) : Math.max(20, 60 / data.length)
-    }
-  ))) : /* @__PURE__ */ import_react6.default.createElement(import_recharts.LineChart, { data: sanitizedData, margin: chartMargin }, /* @__PURE__ */ import_react6.default.createElement(import_recharts.CartesianGrid, { strokeDasharray: "3 3", vertical: false, stroke: "#e2e8f0" }), /* @__PURE__ */ import_react6.default.createElement(import_recharts.XAxis, { dataKey: finalXKey, tick: axisTick, tickFormatter: truncateAxisLabel, tickLine: false, axisLine: { stroke: "#cbd5e1" }, interval: 0, minTickGap: isTiny ? 2 : isCompact ? 6 : 12 }), /* @__PURE__ */ import_react6.default.createElement(import_recharts.YAxis, { tick: axisTick, tickLine: false, axisLine: false }), /* @__PURE__ */ import_react6.default.createElement(import_recharts.Tooltip, { content: (props) => renderTooltip(getTooltipRow(props.payload), typeof props.label === "string" ? props.label : void 0) }), showLegend && /* @__PURE__ */ import_react6.default.createElement(import_recharts.Legend, { wrapperStyle: { fontSize: isCompact ? 10 : 12 } }), finalDataKeys.map((key, index) => /* @__PURE__ */ import_react6.default.createElement(
-    import_recharts.Line,
-    {
-      key,
-      type: "monotone",
-      dataKey: key,
-      stroke: colors[index % colors.length],
-      strokeWidth: isTiny ? 1.75 : isCompact ? 2 : 3,
-      dot: { r: isTiny ? 2.5 : isCompact ? 3 : 4, strokeWidth: 2 },
-      activeDot: { r: isTiny ? 4 : isCompact ? 5 : 6 }
-    }
-  ))))));
+      key
+    ))
+  ] }) : /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_recharts.LineChart, { data: sanitizedData, margin: chartMargin, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_recharts.CartesianGrid, { strokeDasharray: "3 3", vertical: false, stroke: "#e2e8f0" }),
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_recharts.XAxis, { dataKey: finalXKey, tick: axisTick, tickFormatter: truncateAxisLabel, tickLine: false, axisLine: { stroke: "#cbd5e1" }, interval: 0, minTickGap: isTiny ? 2 : isCompact ? 6 : 12 }),
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_recharts.YAxis, { tick: axisTick, tickLine: false, axisLine: false }),
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_recharts.Tooltip, { content: (props) => renderTooltip(getTooltipRow(props.payload), typeof props.label === "string" ? props.label : void 0) }),
+    showLegend && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_recharts.Legend, { wrapperStyle: { fontSize: isCompact ? 10 : 12 } }),
+    finalDataKeys.map((key, index) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+      import_recharts.Line,
+      {
+        type: "monotone",
+        dataKey: key,
+        stroke: colors[index % colors.length],
+        strokeWidth: isTiny ? 1.75 : isCompact ? 2 : 3,
+        dot: { r: isTiny ? 2.5 : isCompact ? 3 : 4, strokeWidth: 2 },
+        activeDot: { r: isTiny ? 4 : isCompact ? 5 : 6 }
+      },
+      key
+    ))
+  ] }) }) }) });
 }
 
 // src/components/VisualizationRenderer.tsx
+var import_jsx_runtime7 = require("react/jsx-runtime");
 function getColor(index) {
   return CHART_COLORS[index % CHART_COLORS.length];
 }
@@ -619,13 +725,22 @@ function CustomTooltip({
   label
 }) {
   if (!active || !payload || payload.length === 0) return null;
-  return /* @__PURE__ */ import_react7.default.createElement("div", { className: "rounded-xl border border-slate-200 bg-white px-3 py-2 text-xs shadow-xl dark:border-white/10 dark:bg-slate-950" }, label && /* @__PURE__ */ import_react7.default.createElement("p", { className: "mb-2 font-semibold text-slate-800 dark:text-white/90" }, label), payload.map((entry, i) => /* @__PURE__ */ import_react7.default.createElement("div", { key: i, className: "flex items-center justify-between gap-3 text-slate-600 dark:text-white/70" }, /* @__PURE__ */ import_react7.default.createElement("span", { className: "flex items-center gap-1.5" }, entry.color && /* @__PURE__ */ import_react7.default.createElement(
-    "span",
-    {
-      className: "inline-block w-2 h-2 rounded-full flex-shrink-0",
-      style: { background: entry.color }
-    }
-  ), entry.name), /* @__PURE__ */ import_react7.default.createElement("span", { className: "font-medium text-slate-900 dark:text-white/90" }, entry.value))));
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "rounded-xl border border-slate-200 bg-white px-3 py-2 text-xs shadow-xl dark:border-white/10 dark:bg-slate-950", children: [
+    label && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("p", { className: "mb-2 font-semibold text-slate-800 dark:text-white/90", children: label }),
+    payload.map((entry, i) => /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex items-center justify-between gap-3 text-slate-600 dark:text-white/70", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("span", { className: "flex items-center gap-1.5", children: [
+        entry.color && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+          "span",
+          {
+            className: "inline-block w-2 h-2 rounded-full flex-shrink-0",
+            style: { background: entry.color }
+          }
+        ),
+        entry.name
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "font-medium text-slate-900 dark:text-white/90", children: entry.value })
+    ] }, i))
+  ] });
 }
 function VisualizationRenderer({
   data,
@@ -636,72 +751,86 @@ function VisualizationRenderer({
 }) {
   var _a;
   if (!data) {
-    return /* @__PURE__ */ import_react7.default.createElement("div", { className: `p-4 text-gray-500 ${className}` }, "No data available for visualization");
+    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: `p-4 text-gray-500 ${className}`, children: "No data available for visualization" });
   }
-  return /* @__PURE__ */ import_react7.default.createElement("div", { className: `space-y-4 ${className}` }, /* @__PURE__ */ import_react7.default.createElement("div", { className: "space-y-1" }, /* @__PURE__ */ import_react7.default.createElement("h3", { className: "text-sm font-semibold text-slate-900 dark:text-white" }, data.title), data.description && data.description !== ((_a = data.data) == null ? void 0 : _a.content) && /* @__PURE__ */ import_react7.default.createElement("p", { className: "text-xs text-slate-500 dark:text-slate-400" }, data.description)), renderVisualization(data.type, data.data, onAddToCart, primaryColor, isStreaming));
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: `space-y-4 ${className}`, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "space-y-1", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("h3", { className: "text-sm font-semibold text-slate-900 dark:text-white", children: data.title }),
+      data.description && data.description !== ((_a = data.data) == null ? void 0 : _a.content) && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("p", { className: "text-xs text-slate-500 dark:text-slate-400", children: data.description })
+    ] }),
+    renderVisualization(data.type, data.data, onAddToCart, primaryColor, isStreaming)
+  ] });
 }
 function renderVisualization(type, data, onAddToCart, primaryColor, isStreaming) {
   try {
     switch (type) {
       case "pie_chart":
-        return /* @__PURE__ */ import_react7.default.createElement(PieChartView, { data, isStreaming });
+        return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(PieChartView, { data, isStreaming });
       case "bar_chart":
-        return /* @__PURE__ */ import_react7.default.createElement(BarChartView, { data, primaryColor, isStreaming });
+        return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(BarChartView, { data, primaryColor, isStreaming });
       case "line_chart":
-        return /* @__PURE__ */ import_react7.default.createElement(LineChartView, { data, primaryColor, isStreaming });
+        return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(LineChartView, { data, primaryColor, isStreaming });
       case "radar_chart":
-        return /* @__PURE__ */ import_react7.default.createElement(RadarChartView, { data, isStreaming });
+        return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(RadarChartView, { data, isStreaming });
       case "table":
-        return /* @__PURE__ */ import_react7.default.createElement(TableView, { data, isStreaming });
+        return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(TableView, { data, isStreaming });
       case "product_carousel":
       case "carousel":
-        return /* @__PURE__ */ import_react7.default.createElement(CarouselView, { data, onAddToCart, primaryColor });
+        return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(CarouselView, { data, onAddToCart, primaryColor });
       case "text":
       default:
-        return /* @__PURE__ */ import_react7.default.createElement(TextView, { data });
+        return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(TextView, { data });
     }
   } catch (error) {
     console.warn("[VisualizationRenderer] Rendering failed, falling back to text:", error);
-    return /* @__PURE__ */ import_react7.default.createElement(TextView, { data: { content: "Unable to render the requested visualization." } });
+    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(TextView, { data: { content: "Unable to render the requested visualization." } });
   }
 }
 function ChartSkeleton({ type }) {
   if (type === "pie") {
-    return /* @__PURE__ */ import_react7.default.createElement("div", { className: "w-full mt-4 mb-2 animate-pulse" }, /* @__PURE__ */ import_react7.default.createElement("div", { className: "mx-auto w-40 h-40 rounded-full bg-slate-100 dark:bg-white/10" }));
+    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "w-full mt-4 mb-2 animate-pulse", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "mx-auto w-40 h-40 rounded-full bg-slate-100 dark:bg-white/10" }) });
   }
   if (type === "table") {
-    return /* @__PURE__ */ import_react7.default.createElement("div", { className: "w-full mt-4 mb-2 animate-pulse space-y-2" }, /* @__PURE__ */ import_react7.default.createElement("div", { className: "h-8 bg-slate-100 dark:bg-white/10 rounded" }), /* @__PURE__ */ import_react7.default.createElement("div", { className: "h-8 bg-slate-100 dark:bg-white/10 rounded" }), /* @__PURE__ */ import_react7.default.createElement("div", { className: "h-8 bg-slate-100 dark:bg-white/10 rounded" }));
+    return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "w-full mt-4 mb-2 animate-pulse space-y-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "h-8 bg-slate-100 dark:bg-white/10 rounded" }),
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "h-8 bg-slate-100 dark:bg-white/10 rounded" }),
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "h-8 bg-slate-100 dark:bg-white/10 rounded" })
+    ] });
   }
-  return /* @__PURE__ */ import_react7.default.createElement("div", { className: "w-full mt-4 mb-2 animate-pulse flex items-end gap-2 h-32 px-2" }, Array.from({ length: 5 }).map((_, i) => /* @__PURE__ */ import_react7.default.createElement("div", { key: i, className: "flex-1 rounded-t-md bg-slate-100 dark:bg-white/10", style: { height: `${40 + i % 3 * 25}%` } })));
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "w-full mt-4 mb-2 animate-pulse flex items-end gap-2 h-32 px-2", children: Array.from({ length: 5 }).map((_, i) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "flex-1 rounded-t-md bg-slate-100 dark:bg-white/10", style: { height: `${40 + i % 3 * 25}%` } }, i)) });
 }
 function PieChartView({ data, isStreaming }) {
-  if (isStreaming) return /* @__PURE__ */ import_react7.default.createElement(ChartSkeleton, { type: "pie" });
+  if (isStreaming) return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ChartSkeleton, { type: "pie" });
   if (!Array.isArray(data) || data.length === 0) {
-    return /* @__PURE__ */ import_react7.default.createElement("div", { className: "text-xs text-red-500" }, "Invalid pie chart data");
+    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "text-xs text-red-500", children: "Invalid pie chart data" });
   }
   const chartData = data.map((item) => ({
     name: item.label,
     value: item.value
   }));
-  return /* @__PURE__ */ import_react7.default.createElement("div", { className: "bg-white dark:bg-slate-900 rounded-xl border border-slate-200 dark:border-white/10 p-4 shadow-sm" }, /* @__PURE__ */ import_react7.default.createElement(import_recharts2.ResponsiveContainer, { width: "100%", height: 280 }, /* @__PURE__ */ import_react7.default.createElement(import_recharts2.PieChart, null, /* @__PURE__ */ import_react7.default.createElement(
-    import_recharts2.Pie,
-    {
-      data: chartData,
-      dataKey: "value",
-      nameKey: "name",
-      cx: "50%",
-      cy: "50%",
-      outerRadius: "68%",
-      label: false,
-      labelLine: false
-    },
-    chartData.map((_entry, index) => /* @__PURE__ */ import_react7.default.createElement(import_recharts2.Cell, { key: `cell-${index}`, fill: getColor(index) }))
-  ), /* @__PURE__ */ import_react7.default.createElement(import_recharts2.Tooltip, { content: /* @__PURE__ */ import_react7.default.createElement(CustomTooltip, null) }), /* @__PURE__ */ import_react7.default.createElement(import_recharts2.Legend, { wrapperStyle: { fontSize: 12 }, verticalAlign: "bottom" }))));
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "bg-white dark:bg-slate-900 rounded-xl border border-slate-200 dark:border-white/10 p-4 shadow-sm", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_recharts2.ResponsiveContainer, { width: "100%", height: 280, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_recharts2.PieChart, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+      import_recharts2.Pie,
+      {
+        data: chartData,
+        dataKey: "value",
+        nameKey: "name",
+        cx: "50%",
+        cy: "50%",
+        outerRadius: "68%",
+        label: false,
+        labelLine: false,
+        children: chartData.map((_entry, index) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_recharts2.Cell, { fill: getColor(index) }, `cell-${index}`))
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_recharts2.Tooltip, { content: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(CustomTooltip, {}) }),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_recharts2.Legend, { wrapperStyle: { fontSize: 12 }, verticalAlign: "bottom" })
+  ] }) }) });
 }
 function BarChartView({ data, primaryColor, isStreaming }) {
-  if (isStreaming) return /* @__PURE__ */ import_react7.default.createElement(ChartSkeleton, { type: "bar" });
+  if (isStreaming) return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ChartSkeleton, { type: "bar" });
   if (!Array.isArray(data) || data.length === 0) {
-    return /* @__PURE__ */ import_react7.default.createElement("div", { className: "text-xs text-red-500" }, "Invalid bar chart data");
+    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "text-xs text-red-500", children: "Invalid bar chart data" });
   }
   const chartData = data.map((item) => __spreadValues(__spreadValues({
     category: item.category,
@@ -709,20 +838,30 @@ function BarChartView({ data, primaryColor, isStreaming }) {
   }, item.inStockCount !== void 0 && { inStockCount: item.inStockCount }), item.outOfStockCount !== void 0 && { outOfStockCount: item.outOfStockCount }));
   const barColor = primaryColor != null ? primaryColor : getColor(0);
   const hasStock = chartData.some((d) => "inStockCount" in d);
-  return /* @__PURE__ */ import_react7.default.createElement("div", { className: "bg-white dark:bg-slate-900 rounded-xl border border-slate-200 dark:border-white/10 p-4 shadow-sm overflow-x-auto" }, /* @__PURE__ */ import_react7.default.createElement(import_recharts2.ResponsiveContainer, { width: "100%", height: 260 }, /* @__PURE__ */ import_react7.default.createElement(import_recharts2.BarChart, { data: chartData, margin: { top: 10, right: 10, left: -20, bottom: 0 } }, /* @__PURE__ */ import_react7.default.createElement(import_recharts2.CartesianGrid, { strokeDasharray: "3 3", vertical: false, stroke: "#e2e8f0" }), /* @__PURE__ */ import_react7.default.createElement(
-    import_recharts2.XAxis,
-    {
-      dataKey: "category",
-      tick: { fontSize: 11, fill: "#64748b" },
-      tickLine: false,
-      axisLine: { stroke: "#cbd5e1" }
-    }
-  ), /* @__PURE__ */ import_react7.default.createElement(import_recharts2.YAxis, { tick: { fontSize: 11, fill: "#64748b" }, tickLine: false, axisLine: false }), /* @__PURE__ */ import_react7.default.createElement(import_recharts2.Tooltip, { content: /* @__PURE__ */ import_react7.default.createElement(CustomTooltip, null), cursor: { fill: "#f1f5f9" } }), /* @__PURE__ */ import_react7.default.createElement(import_recharts2.Legend, { wrapperStyle: { fontSize: 12 } }), hasStock ? /* @__PURE__ */ import_react7.default.createElement(import_react7.default.Fragment, null, /* @__PURE__ */ import_react7.default.createElement(import_recharts2.Bar, { dataKey: "inStockCount", name: "In Stock", fill: getColor(1), radius: [4, 4, 0, 0] }), /* @__PURE__ */ import_react7.default.createElement(import_recharts2.Bar, { dataKey: "outOfStockCount", name: "Out of Stock", fill: getColor(3), radius: [4, 4, 0, 0] })) : /* @__PURE__ */ import_react7.default.createElement(import_recharts2.Bar, { dataKey: "value", name: "Value", fill: barColor, radius: [4, 4, 0, 0] }))));
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "bg-white dark:bg-slate-900 rounded-xl border border-slate-200 dark:border-white/10 p-4 shadow-sm overflow-x-auto", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_recharts2.ResponsiveContainer, { width: "100%", height: 260, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_recharts2.BarChart, { data: chartData, margin: { top: 10, right: 10, left: -20, bottom: 0 }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_recharts2.CartesianGrid, { strokeDasharray: "3 3", vertical: false, stroke: "#e2e8f0" }),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+      import_recharts2.XAxis,
+      {
+        dataKey: "category",
+        tick: { fontSize: 11, fill: "#64748b" },
+        tickLine: false,
+        axisLine: { stroke: "#cbd5e1" }
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_recharts2.YAxis, { tick: { fontSize: 11, fill: "#64748b" }, tickLine: false, axisLine: false }),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_recharts2.Tooltip, { content: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(CustomTooltip, {}), cursor: { fill: "#f1f5f9" } }),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_recharts2.Legend, { wrapperStyle: { fontSize: 12 } }),
+    hasStock ? /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_recharts2.Bar, { dataKey: "inStockCount", name: "In Stock", fill: getColor(1), radius: [4, 4, 0, 0] }),
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_recharts2.Bar, { dataKey: "outOfStockCount", name: "Out of Stock", fill: getColor(3), radius: [4, 4, 0, 0] })
+    ] }) : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_recharts2.Bar, { dataKey: "value", name: "Value", fill: barColor, radius: [4, 4, 0, 0] })
+  ] }) }) });
 }
 function LineChartView({ data, primaryColor, isStreaming }) {
-  if (isStreaming) return /* @__PURE__ */ import_react7.default.createElement(ChartSkeleton, { type: "bar" });
+  if (isStreaming) return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ChartSkeleton, { type: "bar" });
   if (!Array.isArray(data) || data.length === 0) {
-    return /* @__PURE__ */ import_react7.default.createElement("div", { className: "text-xs text-red-500" }, "Invalid line chart data");
+    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "text-xs text-red-500", children: "Invalid line chart data" });
   }
   const chartData = data.map((point) => {
     var _a;
@@ -732,74 +871,97 @@ function LineChartView({ data, primaryColor, isStreaming }) {
     };
   });
   const lineColor = primaryColor != null ? primaryColor : getColor(0);
-  return /* @__PURE__ */ import_react7.default.createElement("div", { className: "bg-white dark:bg-slate-900 rounded-xl border border-slate-200 dark:border-white/10 p-4 shadow-sm overflow-x-auto" }, /* @__PURE__ */ import_react7.default.createElement(import_recharts2.ResponsiveContainer, { width: "100%", height: 260 }, /* @__PURE__ */ import_react7.default.createElement(import_recharts2.LineChart, { data: chartData, margin: { top: 10, right: 10, left: -20, bottom: 0 } }, /* @__PURE__ */ import_react7.default.createElement(import_recharts2.CartesianGrid, { strokeDasharray: "3 3", vertical: false, stroke: "#e2e8f0" }), /* @__PURE__ */ import_react7.default.createElement(
-    import_recharts2.XAxis,
-    {
-      dataKey: "label",
-      tick: { fontSize: 11, fill: "#64748b" },
-      tickLine: false,
-      axisLine: { stroke: "#cbd5e1" }
-    }
-  ), /* @__PURE__ */ import_react7.default.createElement(import_recharts2.YAxis, { tick: { fontSize: 11, fill: "#64748b" }, tickLine: false, axisLine: false }), /* @__PURE__ */ import_react7.default.createElement(import_recharts2.Tooltip, { content: /* @__PURE__ */ import_react7.default.createElement(CustomTooltip, null) }), /* @__PURE__ */ import_react7.default.createElement(
-    import_recharts2.Line,
-    {
-      type: "monotone",
-      dataKey: "value",
-      name: "Value",
-      stroke: lineColor,
-      strokeWidth: 2.5,
-      dot: { r: 3.5, strokeWidth: 2, fill: lineColor },
-      activeDot: { r: 5 }
-    }
-  ))));
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "bg-white dark:bg-slate-900 rounded-xl border border-slate-200 dark:border-white/10 p-4 shadow-sm overflow-x-auto", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_recharts2.ResponsiveContainer, { width: "100%", height: 260, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_recharts2.LineChart, { data: chartData, margin: { top: 10, right: 10, left: -20, bottom: 0 }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_recharts2.CartesianGrid, { strokeDasharray: "3 3", vertical: false, stroke: "#e2e8f0" }),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+      import_recharts2.XAxis,
+      {
+        dataKey: "label",
+        tick: { fontSize: 11, fill: "#64748b" },
+        tickLine: false,
+        axisLine: { stroke: "#cbd5e1" }
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_recharts2.YAxis, { tick: { fontSize: 11, fill: "#64748b" }, tickLine: false, axisLine: false }),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_recharts2.Tooltip, { content: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(CustomTooltip, {}) }),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+      import_recharts2.Line,
+      {
+        type: "monotone",
+        dataKey: "value",
+        name: "Value",
+        stroke: lineColor,
+        strokeWidth: 2.5,
+        dot: { r: 3.5, strokeWidth: 2, fill: lineColor },
+        activeDot: { r: 5 }
+      }
+    )
+  ] }) }) });
 }
 function RadarChartView({ data, isStreaming }) {
-  if (isStreaming) return /* @__PURE__ */ import_react7.default.createElement(ChartSkeleton, { type: "pie" });
+  if (isStreaming) return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ChartSkeleton, { type: "pie" });
   if (!Array.isArray(data) || data.length === 0) {
-    return /* @__PURE__ */ import_react7.default.createElement("div", { className: "text-xs text-red-500" }, "Invalid radar chart data");
+    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "text-xs text-red-500", children: "Invalid radar chart data" });
   }
   const productNames = Array.from(
     new Set(data.flatMap((item) => Object.keys(item).filter((key) => key !== "attribute")))
   );
-  return /* @__PURE__ */ import_react7.default.createElement("div", { className: "bg-white dark:bg-slate-900 rounded-xl border border-slate-200 dark:border-white/10 p-4 shadow-sm" }, /* @__PURE__ */ import_react7.default.createElement(import_recharts2.ResponsiveContainer, { width: "100%", height: 300 }, /* @__PURE__ */ import_react7.default.createElement(import_recharts2.RadarChart, { cx: "50%", cy: "50%", outerRadius: "80%", data }, /* @__PURE__ */ import_react7.default.createElement(import_recharts2.PolarGrid, { stroke: "#e2e8f0" }), /* @__PURE__ */ import_react7.default.createElement(import_recharts2.PolarAngleAxis, { dataKey: "attribute", tick: { fontSize: 11, fill: "#64748b" } }), /* @__PURE__ */ import_react7.default.createElement(import_recharts2.PolarRadiusAxis, { tick: { fontSize: 10, fill: "#64748b" } }), productNames.map((productName, index) => /* @__PURE__ */ import_react7.default.createElement(
-    import_recharts2.Radar,
-    {
-      key: productName,
-      name: productName,
-      dataKey: productName,
-      stroke: getColor(index),
-      fill: getColor(index),
-      fillOpacity: 0.4
-    }
-  )), /* @__PURE__ */ import_react7.default.createElement(import_recharts2.Tooltip, { content: /* @__PURE__ */ import_react7.default.createElement(CustomTooltip, null) }), /* @__PURE__ */ import_react7.default.createElement(import_recharts2.Legend, { wrapperStyle: { fontSize: 12 } }))));
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "bg-white dark:bg-slate-900 rounded-xl border border-slate-200 dark:border-white/10 p-4 shadow-sm", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_recharts2.ResponsiveContainer, { width: "100%", height: 300, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_recharts2.RadarChart, { cx: "50%", cy: "50%", outerRadius: "80%", data, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_recharts2.PolarGrid, { stroke: "#e2e8f0" }),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_recharts2.PolarAngleAxis, { dataKey: "attribute", tick: { fontSize: 11, fill: "#64748b" } }),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_recharts2.PolarRadiusAxis, { tick: { fontSize: 10, fill: "#64748b" } }),
+    productNames.map((productName, index) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+      import_recharts2.Radar,
+      {
+        name: productName,
+        dataKey: productName,
+        stroke: getColor(index),
+        fill: getColor(index),
+        fillOpacity: 0.4
+      },
+      productName
+    )),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_recharts2.Tooltip, { content: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(CustomTooltip, {}) }),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_recharts2.Legend, { wrapperStyle: { fontSize: 12 } })
+  ] }) }) });
 }
 function TableView({ data, isStreaming }) {
-  if (isStreaming) return /* @__PURE__ */ import_react7.default.createElement(ChartSkeleton, { type: "table" });
+  if (isStreaming) return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ChartSkeleton, { type: "table" });
   if (!(data == null ? void 0 : data.columns) || !(data == null ? void 0 : data.rows)) {
-    return /* @__PURE__ */ import_react7.default.createElement("div", { className: "text-xs text-red-500" }, "Invalid table data");
+    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "text-xs text-red-500", children: "Invalid table data" });
   }
-  return /* @__PURE__ */ import_react7.default.createElement("div", { className: "bg-white dark:bg-slate-900 rounded-xl border border-slate-200 dark:border-white/10 shadow-sm overflow-hidden" }, /* @__PURE__ */ import_react7.default.createElement("div", { className: "overflow-x-auto" }, /* @__PURE__ */ import_react7.default.createElement("table", { className: "w-full text-sm border-collapse" }, /* @__PURE__ */ import_react7.default.createElement("thead", { className: "bg-slate-50 dark:bg-white/5 border-b border-slate-200 dark:border-white/10" }, /* @__PURE__ */ import_react7.default.createElement("tr", null, data.columns.map((col, idx) => /* @__PURE__ */ import_react7.default.createElement(
-    "th",
-    {
-      key: idx,
-      className: "px-4 py-3 text-left text-xs font-semibold text-slate-700 dark:text-white/90 whitespace-nowrap uppercase tracking-wider"
-    },
-    col
-  )))), /* @__PURE__ */ import_react7.default.createElement("tbody", { className: "divide-y divide-slate-100 dark:divide-white/5" }, data.rows.map((row, rowIdx) => /* @__PURE__ */ import_react7.default.createElement(
-    "tr",
-    {
-      key: rowIdx,
-      className: "hover:bg-slate-50/60 dark:hover:bg-white/5 transition-colors"
-    },
-    row.map((cell, cellIdx) => /* @__PURE__ */ import_react7.default.createElement(
-      "td",
-      {
-        key: cellIdx,
-        className: "px-4 py-3 text-slate-600 dark:text-white/70 text-sm"
-      },
-      String(cell)
-    ))
-  ))))), /* @__PURE__ */ import_react7.default.createElement("div", { className: "px-4 py-2 bg-slate-50 dark:bg-white/5 border-t border-slate-100 dark:border-white/5" }, /* @__PURE__ */ import_react7.default.createElement("p", { className: "text-[11px] text-slate-400 dark:text-white/30" }, data.rows.length, " row", data.rows.length !== 1 ? "s" : "")));
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "bg-white dark:bg-slate-900 rounded-xl border border-slate-200 dark:border-white/10 shadow-sm overflow-hidden", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "overflow-x-auto", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("table", { className: "w-full text-sm border-collapse", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("thead", { className: "bg-slate-50 dark:bg-white/5 border-b border-slate-200 dark:border-white/10", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("tr", { children: data.columns.map((col, idx) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+        "th",
+        {
+          className: "px-4 py-3 text-left text-xs font-semibold text-slate-700 dark:text-white/90 whitespace-nowrap uppercase tracking-wider",
+          children: col
+        },
+        idx
+      )) }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("tbody", { className: "divide-y divide-slate-100 dark:divide-white/5", children: data.rows.map((row, rowIdx) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+        "tr",
+        {
+          className: "hover:bg-slate-50/60 dark:hover:bg-white/5 transition-colors",
+          children: row.map((cell, cellIdx) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+            "td",
+            {
+              className: "px-4 py-3 text-slate-600 dark:text-white/70 text-sm",
+              children: String(cell)
+            },
+            cellIdx
+          ))
+        },
+        rowIdx
+      )) })
+    ] }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "px-4 py-2 bg-slate-50 dark:bg-white/5 border-t border-slate-100 dark:border-white/5", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("p", { className: "text-[11px] text-slate-400 dark:text-white/30", children: [
+      data.rows.length,
+      " row",
+      data.rows.length !== 1 ? "s" : ""
+    ] }) })
+  ] });
 }
 function CarouselView({
   data,
@@ -807,7 +969,7 @@ function CarouselView({
   primaryColor
 }) {
   if (!Array.isArray(data)) {
-    return /* @__PURE__ */ import_react7.default.createElement("div", { className: "text-xs text-red-500" }, "Invalid carousel data");
+    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "text-xs text-red-500", children: "Invalid carousel data" });
   }
   const products = data.map((product) => ({
     id: product.id,
@@ -819,23 +981,24 @@ function CarouselView({
     description: product.description,
     inStock: product.inStock
   }));
-  return /* @__PURE__ */ import_react7.default.createElement("div", { className: "w-full" }, /* @__PURE__ */ import_react7.default.createElement(
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "w-full", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
     ProductCarousel,
     {
       products,
       primaryColor: primaryColor != null ? primaryColor : "#6366f1",
       onAddToCart: (p) => onAddToCart == null ? void 0 : onAddToCart(p)
     }
-  ));
+  ) });
 }
 function TextView({ data }) {
   const content = (data == null ? void 0 : data.content) || String(data != null ? data : "");
-  return /* @__PURE__ */ import_react7.default.createElement("div", { className: "bg-white dark:bg-slate-900 rounded-xl border border-slate-200 dark:border-white/10 p-4 shadow-sm" }, /* @__PURE__ */ import_react7.default.createElement("p", { className: "text-sm text-slate-700 dark:text-slate-300 whitespace-pre-wrap leading-relaxed" }, content));
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "bg-white dark:bg-slate-900 rounded-xl border border-slate-200 dark:border-white/10 p-4 shadow-sm", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("p", { className: "text-sm text-slate-700 dark:text-slate-300 whitespace-pre-wrap leading-relaxed", children: content }) });
 }
 
 // src/components/ObservabilityPanel.tsx
-var import_react8 = __toESM(require("react"));
+var import_react6 = __toESM(require("react"));
 var import_lucide_react5 = require("lucide-react");
+var import_jsx_runtime8 = require("react/jsx-runtime");
 function fmtMs(ms) {
   return ms >= 1e3 ? `${(ms / 1e3).toFixed(2)}s` : `${Math.round(ms)}ms`;
 }
@@ -845,25 +1008,55 @@ function fmtTokens(n) {
 function ScoreBadge({ score }) {
   const pct = Math.round(score * 100);
   const color = pct <= 20 ? "text-emerald-600 bg-emerald-50 border-emerald-200 dark:text-emerald-400 dark:bg-emerald-500/10 dark:border-emerald-500/20" : pct <= 50 ? "text-amber-600 bg-amber-50 border-amber-200 dark:text-amber-400 dark:bg-amber-500/10 dark:border-amber-500/20" : "text-red-600 bg-red-50 border-red-200 dark:text-red-400 dark:bg-red-500/10 dark:border-red-500/20";
-  return /* @__PURE__ */ import_react8.default.createElement("span", { className: `inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-[11px] font-semibold border ${color}` }, pct <= 20 ? /* @__PURE__ */ import_react8.default.createElement(import_lucide_react5.CheckCircle, { className: "w-3 h-3" }) : /* @__PURE__ */ import_react8.default.createElement(import_lucide_react5.AlertCircle, { className: "w-3 h-3" }), pct, "% hallucination risk");
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("span", { className: `inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-[11px] font-semibold border ${color}`, children: [
+    pct <= 20 ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_lucide_react5.CheckCircle, { className: "w-3 h-3" }) : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_lucide_react5.AlertCircle, { className: "w-3 h-3" }),
+    pct,
+    "% hallucination risk"
+  ] });
 }
 function RetrievalTab({ trace }) {
-  return /* @__PURE__ */ import_react8.default.createElement("div", { className: "space-y-2" }, /* @__PURE__ */ import_react8.default.createElement("p", { className: "text-[11px] text-slate-500 dark:text-white/40" }, trace.chunks.length, " chunk", trace.chunks.length !== 1 ? "s" : "", " retrieved", trace.rewrittenQuery && /* @__PURE__ */ import_react8.default.createElement("span", { className: "ml-2 italic" }, "(query rewritten: ", /* @__PURE__ */ import_react8.default.createElement("em", { className: "text-indigo-500" }, trace.rewrittenQuery), ")")), /* @__PURE__ */ import_react8.default.createElement("div", { className: "space-y-1.5 max-h-56 overflow-y-auto pr-1 custom-scrollbar" }, trace.chunks.map((chunk, i) => /* @__PURE__ */ import_react8.default.createElement(
-    "div",
-    {
-      key: String(chunk.id),
-      className: "rounded-lg border border-slate-100 dark:border-white/8 bg-slate-50 dark:bg-white/3 p-2.5"
-    },
-    /* @__PURE__ */ import_react8.default.createElement("div", { className: "flex items-center justify-between mb-1" }, /* @__PURE__ */ import_react8.default.createElement("span", { className: "text-[10px] font-mono text-slate-400 dark:text-white/30" }, "[", i + 1, "] ", String(chunk.id).slice(0, 20)), /* @__PURE__ */ import_react8.default.createElement("span", { className: "text-[10px] font-semibold text-indigo-600 dark:text-indigo-400" }, "score: ", chunk.score.toFixed(3))),
-    /* @__PURE__ */ import_react8.default.createElement("div", { className: "h-1 rounded-full bg-slate-200 dark:bg-white/10 mb-2 overflow-hidden" }, /* @__PURE__ */ import_react8.default.createElement(
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "space-y-2", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("p", { className: "text-[11px] text-slate-500 dark:text-white/40", children: [
+      trace.chunks.length,
+      " chunk",
+      trace.chunks.length !== 1 ? "s" : "",
+      " retrieved",
+      trace.rewrittenQuery && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("span", { className: "ml-2 italic", children: [
+        "(query rewritten: ",
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("em", { className: "text-indigo-500", children: trace.rewrittenQuery }),
+        ")"
+      ] })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "space-y-1.5 max-h-56 overflow-y-auto pr-1 custom-scrollbar", children: trace.chunks.map((chunk, i) => /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
       "div",
       {
-        className: "h-full rounded-full bg-indigo-500 dark:bg-indigo-400 transition-all",
-        style: { width: `${Math.min(100, chunk.score * 100)}%` }
-      }
-    )),
-    /* @__PURE__ */ import_react8.default.createElement("p", { className: "text-[11px] text-slate-600 dark:text-white/60 line-clamp-2 leading-relaxed" }, chunk.content)
-  ))));
+        className: "rounded-lg border border-slate-100 dark:border-white/8 bg-slate-50 dark:bg-white/3 p-2.5",
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "flex items-center justify-between mb-1", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("span", { className: "text-[10px] font-mono text-slate-400 dark:text-white/30", children: [
+              "[",
+              i + 1,
+              "] ",
+              String(chunk.id).slice(0, 20)
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("span", { className: "text-[10px] font-semibold text-indigo-600 dark:text-indigo-400", children: [
+              "score: ",
+              chunk.score.toFixed(3)
+            ] })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "h-1 rounded-full bg-slate-200 dark:bg-white/10 mb-2 overflow-hidden", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+            "div",
+            {
+              className: "h-full rounded-full bg-indigo-500 dark:bg-indigo-400 transition-all",
+              style: { width: `${Math.min(100, chunk.score * 100)}%` }
+            }
+          ) }),
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("p", { className: "text-[11px] text-slate-600 dark:text-white/60 line-clamp-2 leading-relaxed", children: chunk.content })
+        ]
+      },
+      String(chunk.id)
+    )) })
+  ] });
 }
 function LatencyTab({ trace }) {
   const { latency } = trace;
@@ -874,73 +1067,153 @@ function LatencyTab({ trace }) {
     { label: "Generate", ms: latency.generateMs, color: "#8b5cf6" }
   ];
   const maxMs = Math.max(...bars.map((b) => b.ms), 1);
-  return /* @__PURE__ */ import_react8.default.createElement("div", { className: "space-y-3" }, /* @__PURE__ */ import_react8.default.createElement("div", { className: "flex items-center justify-between" }, /* @__PURE__ */ import_react8.default.createElement("span", { className: "text-[11px] text-slate-500 dark:text-white/40" }, "Pipeline stages"), /* @__PURE__ */ import_react8.default.createElement("span", { className: "text-[11px] font-semibold text-slate-700 dark:text-white/70" }, "Total: ", fmtMs(latency.totalMs))), /* @__PURE__ */ import_react8.default.createElement("div", { className: "space-y-2" }, bars.map((bar) => /* @__PURE__ */ import_react8.default.createElement("div", { key: bar.label, className: "space-y-0.5" }, /* @__PURE__ */ import_react8.default.createElement("div", { className: "flex items-center justify-between" }, /* @__PURE__ */ import_react8.default.createElement("span", { className: "text-[11px] text-slate-600 dark:text-white/60" }, bar.label), /* @__PURE__ */ import_react8.default.createElement("span", { className: "text-[11px] font-mono text-slate-500 dark:text-white/40" }, fmtMs(bar.ms))), /* @__PURE__ */ import_react8.default.createElement("div", { className: "h-2 rounded-full bg-slate-100 dark:bg-white/8 overflow-hidden" }, /* @__PURE__ */ import_react8.default.createElement(
-    "div",
-    {
-      className: "h-full rounded-full transition-all duration-700",
-      style: {
-        width: `${bar.ms / maxMs * 100}%`,
-        background: bar.color,
-        opacity: 0.85
-      }
-    }
-  ))))));
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "space-y-3", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "flex items-center justify-between", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "text-[11px] text-slate-500 dark:text-white/40", children: "Pipeline stages" }),
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("span", { className: "text-[11px] font-semibold text-slate-700 dark:text-white/70", children: [
+        "Total: ",
+        fmtMs(latency.totalMs)
+      ] })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "space-y-2", children: bars.map((bar) => /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "space-y-0.5", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "flex items-center justify-between", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "text-[11px] text-slate-600 dark:text-white/60", children: bar.label }),
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "text-[11px] font-mono text-slate-500 dark:text-white/40", children: fmtMs(bar.ms) })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "h-2 rounded-full bg-slate-100 dark:bg-white/8 overflow-hidden", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+        "div",
+        {
+          className: "h-full rounded-full transition-all duration-700",
+          style: {
+            width: `${bar.ms / maxMs * 100}%`,
+            background: bar.color,
+            opacity: 0.85
+          }
+        }
+      ) })
+    ] }, bar.label)) })
+  ] });
 }
 function TokensTab({ trace }) {
   const { tokens } = trace;
   if (!tokens) {
-    return /* @__PURE__ */ import_react8.default.createElement("p", { className: "text-[11px] text-slate-400 dark:text-white/30 italic" }, "Token data not available.");
+    return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("p", { className: "text-[11px] text-slate-400 dark:text-white/30 italic", children: "Token data not available." });
   }
   const stats = [
     { label: "Prompt Tokens", value: fmtTokens(tokens.promptTokens), color: "text-indigo-600 dark:text-indigo-400" },
     { label: "Completion Tokens", value: fmtTokens(tokens.completionTokens), color: "text-emerald-600 dark:text-emerald-400" },
     { label: "Total Tokens", value: fmtTokens(tokens.totalTokens), color: "text-slate-700 dark:text-white/80" }
   ];
-  return /* @__PURE__ */ import_react8.default.createElement("div", { className: "space-y-3" }, /* @__PURE__ */ import_react8.default.createElement("div", { className: "grid grid-cols-3 gap-2" }, stats.map((s) => /* @__PURE__ */ import_react8.default.createElement("div", { key: s.label, className: "rounded-lg border border-slate-100 dark:border-white/8 bg-slate-50 dark:bg-white/3 p-2.5 text-center" }, /* @__PURE__ */ import_react8.default.createElement("p", { className: `text-lg font-bold ${s.color}` }, s.value), /* @__PURE__ */ import_react8.default.createElement("p", { className: "text-[10px] text-slate-400 dark:text-white/30 mt-0.5" }, s.label)))), tokens.estimatedCostUsd != null && /* @__PURE__ */ import_react8.default.createElement("div", { className: "flex items-center justify-between rounded-lg border border-emerald-100 dark:border-emerald-500/20 bg-emerald-50 dark:bg-emerald-500/10 px-3 py-2" }, /* @__PURE__ */ import_react8.default.createElement("span", { className: "text-[11px] text-emerald-700 dark:text-emerald-400 font-medium" }, "Estimated Cost"), /* @__PURE__ */ import_react8.default.createElement("span", { className: "text-[11px] font-bold text-emerald-700 dark:text-emerald-400" }, "$", tokens.estimatedCostUsd < 1e-4 ? tokens.estimatedCostUsd.toExponential(2) : tokens.estimatedCostUsd.toFixed(5), " USD")), /* @__PURE__ */ import_react8.default.createElement("div", { className: "h-2 rounded-full overflow-hidden flex" }, /* @__PURE__ */ import_react8.default.createElement(
-    "div",
-    {
-      className: "h-full bg-indigo-500 dark:bg-indigo-400",
-      style: { width: `${tokens.promptTokens / tokens.totalTokens * 100}%` },
-      title: "Prompt tokens"
-    }
-  ), /* @__PURE__ */ import_react8.default.createElement(
-    "div",
-    {
-      className: "h-full bg-emerald-500 dark:bg-emerald-400",
-      style: { width: `${tokens.completionTokens / tokens.totalTokens * 100}%` },
-      title: "Completion tokens"
-    }
-  )), /* @__PURE__ */ import_react8.default.createElement("div", { className: "flex gap-3 text-[10px] text-slate-400 dark:text-white/30" }, /* @__PURE__ */ import_react8.default.createElement("span", { className: "flex items-center gap-1" }, /* @__PURE__ */ import_react8.default.createElement("span", { className: "inline-block w-2 h-2 rounded-full bg-indigo-500" }), " Prompt"), /* @__PURE__ */ import_react8.default.createElement("span", { className: "flex items-center gap-1" }, /* @__PURE__ */ import_react8.default.createElement("span", { className: "inline-block w-2 h-2 rounded-full bg-emerald-500" }), " Completion")));
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "space-y-3", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "grid grid-cols-3 gap-2", children: stats.map((s) => /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "rounded-lg border border-slate-100 dark:border-white/8 bg-slate-50 dark:bg-white/3 p-2.5 text-center", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("p", { className: `text-lg font-bold ${s.color}`, children: s.value }),
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("p", { className: "text-[10px] text-slate-400 dark:text-white/30 mt-0.5", children: s.label })
+    ] }, s.label)) }),
+    tokens.estimatedCostUsd != null && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "flex items-center justify-between rounded-lg border border-emerald-100 dark:border-emerald-500/20 bg-emerald-50 dark:bg-emerald-500/10 px-3 py-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "text-[11px] text-emerald-700 dark:text-emerald-400 font-medium", children: "Estimated Cost" }),
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("span", { className: "text-[11px] font-bold text-emerald-700 dark:text-emerald-400", children: [
+        "$",
+        tokens.estimatedCostUsd < 1e-4 ? tokens.estimatedCostUsd.toExponential(2) : tokens.estimatedCostUsd.toFixed(5),
+        " USD"
+      ] })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "h-2 rounded-full overflow-hidden flex", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+        "div",
+        {
+          className: "h-full bg-indigo-500 dark:bg-indigo-400",
+          style: { width: `${tokens.promptTokens / tokens.totalTokens * 100}%` },
+          title: "Prompt tokens"
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+        "div",
+        {
+          className: "h-full bg-emerald-500 dark:bg-emerald-400",
+          style: { width: `${tokens.completionTokens / tokens.totalTokens * 100}%` },
+          title: "Completion tokens"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "flex gap-3 text-[10px] text-slate-400 dark:text-white/30", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("span", { className: "flex items-center gap-1", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "inline-block w-2 h-2 rounded-full bg-indigo-500" }),
+        " Prompt"
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("span", { className: "flex items-center gap-1", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "inline-block w-2 h-2 rounded-full bg-emerald-500" }),
+        " Completion"
+      ] })
+    ] })
+  ] });
 }
 function HallucinationTab({ trace }) {
   if (trace.hallucinationScore == null) {
-    return /* @__PURE__ */ import_react8.default.createElement("p", { className: "text-[11px] text-slate-400 dark:text-white/30 italic" }, "Hallucination scoring not available for this response.");
+    return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("p", { className: "text-[11px] text-slate-400 dark:text-white/30 italic", children: "Hallucination scoring not available for this response." });
   }
   const score = trace.hallucinationScore;
   const pct = Math.round(score * 100);
   const barColor = pct <= 20 ? "#10b981" : pct <= 50 ? "#f59e0b" : "#ef4444";
-  return /* @__PURE__ */ import_react8.default.createElement("div", { className: "space-y-3" }, /* @__PURE__ */ import_react8.default.createElement("div", { className: "flex items-center justify-between" }, /* @__PURE__ */ import_react8.default.createElement(ScoreBadge, { score }), /* @__PURE__ */ import_react8.default.createElement("span", { className: "text-[11px] font-mono text-slate-500 dark:text-white/40" }, pct, "/100")), /* @__PURE__ */ import_react8.default.createElement("div", { className: "h-3 rounded-full bg-slate-100 dark:bg-white/8 overflow-hidden" }, /* @__PURE__ */ import_react8.default.createElement(
-    "div",
-    {
-      className: "h-full rounded-full transition-all duration-700",
-      style: { width: `${pct}%`, background: barColor }
-    }
-  )), trace.hallucinationReason && /* @__PURE__ */ import_react8.default.createElement("div", { className: "rounded-lg border border-slate-100 dark:border-white/8 bg-slate-50 dark:bg-white/3 p-2.5" }, /* @__PURE__ */ import_react8.default.createElement("p", { className: "text-[11px] text-slate-500 dark:text-white/40 font-medium mb-0.5" }, "AI self-assessment"), /* @__PURE__ */ import_react8.default.createElement("p", { className: "text-[11px] text-slate-700 dark:text-white/70 leading-relaxed" }, trace.hallucinationReason)), /* @__PURE__ */ import_react8.default.createElement("div", { className: "flex gap-2 text-[10px] text-slate-400 dark:text-white/30" }, /* @__PURE__ */ import_react8.default.createElement("span", { className: "flex items-center gap-1" }, /* @__PURE__ */ import_react8.default.createElement("span", { className: "inline-block w-2 h-2 rounded-full bg-emerald-500" }), " 0\u201320%: Grounded"), /* @__PURE__ */ import_react8.default.createElement("span", { className: "flex items-center gap-1" }, /* @__PURE__ */ import_react8.default.createElement("span", { className: "inline-block w-2 h-2 rounded-full bg-amber-500" }), " 21\u201350%: Uncertain"), /* @__PURE__ */ import_react8.default.createElement("span", { className: "flex items-center gap-1" }, /* @__PURE__ */ import_react8.default.createElement("span", { className: "inline-block w-2 h-2 rounded-full bg-red-500" }), " 51\u2013100%: Risk")));
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "space-y-3", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "flex items-center justify-between", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(ScoreBadge, { score }),
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("span", { className: "text-[11px] font-mono text-slate-500 dark:text-white/40", children: [
+        pct,
+        "/100"
+      ] })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "h-3 rounded-full bg-slate-100 dark:bg-white/8 overflow-hidden", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+      "div",
+      {
+        className: "h-full rounded-full transition-all duration-700",
+        style: { width: `${pct}%`, background: barColor }
+      }
+    ) }),
+    trace.hallucinationReason && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "rounded-lg border border-slate-100 dark:border-white/8 bg-slate-50 dark:bg-white/3 p-2.5", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("p", { className: "text-[11px] text-slate-500 dark:text-white/40 font-medium mb-0.5", children: "AI self-assessment" }),
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("p", { className: "text-[11px] text-slate-700 dark:text-white/70 leading-relaxed", children: trace.hallucinationReason })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "flex gap-2 text-[10px] text-slate-400 dark:text-white/30", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("span", { className: "flex items-center gap-1", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "inline-block w-2 h-2 rounded-full bg-emerald-500" }),
+        " 0\u201320%: Grounded"
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("span", { className: "flex items-center gap-1", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "inline-block w-2 h-2 rounded-full bg-amber-500" }),
+        " 21\u201350%: Uncertain"
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("span", { className: "flex items-center gap-1", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "inline-block w-2 h-2 rounded-full bg-red-500" }),
+        " 51\u2013100%: Risk"
+      ] })
+    ] })
+  ] });
 }
 function PromptTab({ trace }) {
-  const [showSystem, setShowSystem] = import_react8.default.useState(false);
-  return /* @__PURE__ */ import_react8.default.createElement("div", { className: "space-y-3" }, /* @__PURE__ */ import_react8.default.createElement("div", null, /* @__PURE__ */ import_react8.default.createElement(
-    "button",
-    {
-      onClick: () => setShowSystem((s) => !s),
-      className: "flex items-center gap-1.5 text-[11px] font-semibold text-slate-600 dark:text-white/60 hover:text-slate-900 dark:hover:text-white/80 transition-colors mb-1.5"
-    },
-    showSystem ? /* @__PURE__ */ import_react8.default.createElement(import_lucide_react5.ChevronDown, { className: "w-3 h-3" }) : /* @__PURE__ */ import_react8.default.createElement(import_lucide_react5.ChevronRight, { className: "w-3 h-3" }),
-    "System Prompt"
-  ), showSystem && /* @__PURE__ */ import_react8.default.createElement("pre", { className: "text-[10px] font-mono text-slate-600 dark:text-white/60 bg-slate-900 dark:bg-black/30 rounded-lg p-3 overflow-auto max-h-40 whitespace-pre-wrap leading-relaxed" }, trace.systemPrompt || "(empty)")), /* @__PURE__ */ import_react8.default.createElement("div", null, /* @__PURE__ */ import_react8.default.createElement("p", { className: "text-[11px] font-semibold text-slate-600 dark:text-white/60 mb-1.5" }, "User Prompt"), /* @__PURE__ */ import_react8.default.createElement("pre", { className: "text-[10px] font-mono text-slate-600 dark:text-white/60 bg-slate-900 dark:bg-black/30 rounded-lg p-3 overflow-auto max-h-40 whitespace-pre-wrap leading-relaxed" }, trace.userPrompt)));
+  const [showSystem, setShowSystem] = import_react6.default.useState(false);
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "space-y-3", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+        "button",
+        {
+          onClick: () => setShowSystem((s) => !s),
+          className: "flex items-center gap-1.5 text-[11px] font-semibold text-slate-600 dark:text-white/60 hover:text-slate-900 dark:hover:text-white/80 transition-colors mb-1.5",
+          children: [
+            showSystem ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_lucide_react5.ChevronDown, { className: "w-3 h-3" }) : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_lucide_react5.ChevronRight, { className: "w-3 h-3" }),
+            "System Prompt"
+          ]
+        }
+      ),
+      showSystem && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("pre", { className: "text-[10px] font-mono text-slate-600 dark:text-white/60 bg-slate-900 dark:bg-black/30 rounded-lg p-3 overflow-auto max-h-40 whitespace-pre-wrap leading-relaxed", children: trace.systemPrompt || "(empty)" })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("p", { className: "text-[11px] font-semibold text-slate-600 dark:text-white/60 mb-1.5", children: "User Prompt" }),
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("pre", { className: "text-[10px] font-mono text-slate-600 dark:text-white/60 bg-slate-900 dark:bg-black/30 rounded-lg p-3 overflow-auto max-h-40 whitespace-pre-wrap leading-relaxed", children: trace.userPrompt })
+    ] })
+  ] });
 }
 function ChunksTab({ trace }) {
-  const [expanded, setExpanded] = import_react8.default.useState(/* @__PURE__ */ new Set());
+  const [expanded, setExpanded] = import_react6.default.useState(/* @__PURE__ */ new Set());
   const toggle = (i) => setExpanded((prev) => {
     const next = new Set(prev);
     if (next.has(i)) {
@@ -950,74 +1223,111 @@ function ChunksTab({ trace }) {
     }
     return next;
   });
-  return /* @__PURE__ */ import_react8.default.createElement("div", { className: "space-y-1.5 max-h-64 overflow-y-auto pr-1 custom-scrollbar" }, trace.chunks.map((chunk, i) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "space-y-1.5 max-h-64 overflow-y-auto pr-1 custom-scrollbar", children: trace.chunks.map((chunk, i) => {
     const isOpen = expanded.has(i);
-    return /* @__PURE__ */ import_react8.default.createElement(
+    return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
       "div",
       {
-        key: String(chunk.id),
-        className: "rounded-lg border border-slate-100 dark:border-white/8 bg-slate-50 dark:bg-white/3 overflow-hidden"
+        className: "rounded-lg border border-slate-100 dark:border-white/8 bg-slate-50 dark:bg-white/3 overflow-hidden",
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+            "button",
+            {
+              onClick: () => toggle(i),
+              className: "w-full flex items-center justify-between px-3 py-2 text-left hover:bg-slate-100 dark:hover:bg-white/5 transition-colors",
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "flex items-center gap-2", children: [
+                  isOpen ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_lucide_react5.ChevronDown, { className: "w-3 h-3 text-slate-400" }) : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_lucide_react5.ChevronRight, { className: "w-3 h-3 text-slate-400" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("span", { className: "text-[11px] font-medium text-slate-700 dark:text-white/70", children: [
+                    "Chunk ",
+                    i + 1
+                  ] }),
+                  /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "text-[10px] font-mono text-slate-400 dark:text-white/30", children: String(chunk.id).slice(0, 16) })
+                ] }),
+                /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "text-[10px] font-semibold text-indigo-600 dark:text-indigo-400", children: chunk.score.toFixed(3) })
+              ]
+            }
+          ),
+          isOpen && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "px-3 pb-3 space-y-2 border-t border-slate-100 dark:border-white/5 pt-2", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("p", { className: "text-[10px] text-slate-400 dark:text-white/30 font-semibold uppercase tracking-wider mb-1", children: "Content" }),
+              /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("p", { className: "text-[11px] text-slate-600 dark:text-white/60 leading-relaxed whitespace-pre-wrap", children: chunk.content })
+            ] }),
+            Object.keys(chunk.metadata).length > 0 && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("p", { className: "text-[10px] text-slate-400 dark:text-white/30 font-semibold uppercase tracking-wider mb-1", children: "Metadata" }),
+              /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("pre", { className: "text-[10px] font-mono text-slate-500 dark:text-white/40 bg-slate-900 dark:bg-black/30 rounded-md p-2 overflow-auto max-h-24", children: JSON.stringify(chunk.metadata, null, 2) })
+            ] })
+          ] })
+        ]
       },
-      /* @__PURE__ */ import_react8.default.createElement(
-        "button",
-        {
-          onClick: () => toggle(i),
-          className: "w-full flex items-center justify-between px-3 py-2 text-left hover:bg-slate-100 dark:hover:bg-white/5 transition-colors"
-        },
-        /* @__PURE__ */ import_react8.default.createElement("div", { className: "flex items-center gap-2" }, isOpen ? /* @__PURE__ */ import_react8.default.createElement(import_lucide_react5.ChevronDown, { className: "w-3 h-3 text-slate-400" }) : /* @__PURE__ */ import_react8.default.createElement(import_lucide_react5.ChevronRight, { className: "w-3 h-3 text-slate-400" }), /* @__PURE__ */ import_react8.default.createElement("span", { className: "text-[11px] font-medium text-slate-700 dark:text-white/70" }, "Chunk ", i + 1), /* @__PURE__ */ import_react8.default.createElement("span", { className: "text-[10px] font-mono text-slate-400 dark:text-white/30" }, String(chunk.id).slice(0, 16))),
-        /* @__PURE__ */ import_react8.default.createElement("span", { className: "text-[10px] font-semibold text-indigo-600 dark:text-indigo-400" }, chunk.score.toFixed(3))
-      ),
-      isOpen && /* @__PURE__ */ import_react8.default.createElement("div", { className: "px-3 pb-3 space-y-2 border-t border-slate-100 dark:border-white/5 pt-2" }, /* @__PURE__ */ import_react8.default.createElement("div", null, /* @__PURE__ */ import_react8.default.createElement("p", { className: "text-[10px] text-slate-400 dark:text-white/30 font-semibold uppercase tracking-wider mb-1" }, "Content"), /* @__PURE__ */ import_react8.default.createElement("p", { className: "text-[11px] text-slate-600 dark:text-white/60 leading-relaxed whitespace-pre-wrap" }, chunk.content)), Object.keys(chunk.metadata).length > 0 && /* @__PURE__ */ import_react8.default.createElement("div", null, /* @__PURE__ */ import_react8.default.createElement("p", { className: "text-[10px] text-slate-400 dark:text-white/30 font-semibold uppercase tracking-wider mb-1" }, "Metadata"), /* @__PURE__ */ import_react8.default.createElement("pre", { className: "text-[10px] font-mono text-slate-500 dark:text-white/40 bg-slate-900 dark:bg-black/30 rounded-md p-2 overflow-auto max-h-24" }, JSON.stringify(chunk.metadata, null, 2))))
+      String(chunk.id)
     );
-  }));
+  }) });
 }
 var TABS = [
-  { id: "retrieval", label: "Retrieval", icon: /* @__PURE__ */ import_react8.default.createElement(import_lucide_react5.Layers, { className: "w-3 h-3" }) },
-  { id: "latency", label: "Latency", icon: /* @__PURE__ */ import_react8.default.createElement(import_lucide_react5.Clock, { className: "w-3 h-3" }) },
-  { id: "tokens", label: "Tokens", icon: /* @__PURE__ */ import_react8.default.createElement(import_lucide_react5.Cpu, { className: "w-3 h-3" }) },
-  { id: "hallucination", label: "Grounding", icon: /* @__PURE__ */ import_react8.default.createElement(import_lucide_react5.AlertTriangle, { className: "w-3 h-3" }) },
-  { id: "prompt", label: "Prompt", icon: /* @__PURE__ */ import_react8.default.createElement(import_lucide_react5.FileText, { className: "w-3 h-3" }) },
-  { id: "chunks", label: "Chunks", icon: /* @__PURE__ */ import_react8.default.createElement(import_lucide_react5.Zap, { className: "w-3 h-3" }) }
+  { id: "retrieval", label: "Retrieval", icon: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_lucide_react5.Layers, { className: "w-3 h-3" }) },
+  { id: "latency", label: "Latency", icon: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_lucide_react5.Clock, { className: "w-3 h-3" }) },
+  { id: "tokens", label: "Tokens", icon: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_lucide_react5.Cpu, { className: "w-3 h-3" }) },
+  { id: "hallucination", label: "Grounding", icon: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_lucide_react5.AlertTriangle, { className: "w-3 h-3" }) },
+  { id: "prompt", label: "Prompt", icon: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_lucide_react5.FileText, { className: "w-3 h-3" }) },
+  { id: "chunks", label: "Chunks", icon: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_lucide_react5.Zap, { className: "w-3 h-3" }) }
 ];
 function ObservabilityPanel({ trace, primaryColor = "#6366f1" }) {
-  const [activeTab, setActiveTab] = import_react8.default.useState("retrieval");
-  return /* @__PURE__ */ import_react8.default.createElement("div", { className: "mt-2 w-full rounded-xl border border-slate-200 dark:border-white/8 bg-white dark:bg-slate-900/60 shadow-sm overflow-hidden text-[12px]" }, /* @__PURE__ */ import_react8.default.createElement(
-    "div",
-    {
-      className: "flex items-center gap-2 px-3 py-2 border-b border-slate-100 dark:border-white/8",
-      style: { background: `${primaryColor}08` }
-    },
-    /* @__PURE__ */ import_react8.default.createElement(
-      "span",
+  const [activeTab, setActiveTab] = import_react6.default.useState("retrieval");
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "mt-2 w-[500px] max-w-full rounded-xl border border-slate-200 dark:border-white/8 bg-white dark:bg-slate-900/60 shadow-sm overflow-hidden text-[12px]", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+      "div",
       {
-        className: "inline-flex items-center gap-1 text-[10px] font-bold uppercase tracking-wider",
-        style: { color: primaryColor }
-      },
-      /* @__PURE__ */ import_react8.default.createElement(import_lucide_react5.Zap, { className: "w-3 h-3" }),
-      "Observability Trace"
+        className: "flex items-center gap-2 px-3 py-2 border-b border-slate-100 dark:border-white/8",
+        style: { background: `${primaryColor}08` },
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+            "span",
+            {
+              className: "inline-flex items-center gap-1 text-[10px] font-bold uppercase tracking-wider",
+              style: { color: primaryColor },
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_lucide_react5.Zap, { className: "w-3 h-3" }),
+                "Observability Trace"
+              ]
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "text-[10px] text-slate-400 dark:text-white/30 ml-auto font-mono", children: trace.requestId })
+        ]
+      }
     ),
-    /* @__PURE__ */ import_react8.default.createElement("span", { className: "text-[10px] text-slate-400 dark:text-white/30 ml-auto font-mono" }, trace.requestId)
-  ), /* @__PURE__ */ import_react8.default.createElement("div", { className: "flex border-b border-slate-100 dark:border-white/8 overflow-x-auto" }, TABS.map((tab) => /* @__PURE__ */ import_react8.default.createElement(
-    "button",
-    {
-      key: tab.id,
-      onClick: () => setActiveTab(tab.id),
-      className: `flex items-center gap-1.5 px-3 py-2 text-[10px] font-semibold whitespace-nowrap transition-colors border-b-2 ${activeTab === tab.id ? "border-b-2 text-indigo-600 dark:text-indigo-400" : "border-transparent text-slate-400 dark:text-white/30 hover:text-slate-600 dark:hover:text-white/60"}`,
-      style: activeTab === tab.id ? { borderBottomColor: primaryColor, color: primaryColor } : {}
-    },
-    tab.icon,
-    tab.label
-  ))), /* @__PURE__ */ import_react8.default.createElement("div", { className: "p-3" }, activeTab === "retrieval" && /* @__PURE__ */ import_react8.default.createElement(RetrievalTab, { trace }), activeTab === "latency" && /* @__PURE__ */ import_react8.default.createElement(LatencyTab, { trace }), activeTab === "tokens" && /* @__PURE__ */ import_react8.default.createElement(TokensTab, { trace }), activeTab === "hallucination" && /* @__PURE__ */ import_react8.default.createElement(HallucinationTab, { trace }), activeTab === "prompt" && /* @__PURE__ */ import_react8.default.createElement(PromptTab, { trace }), activeTab === "chunks" && /* @__PURE__ */ import_react8.default.createElement(ChunksTab, { trace })));
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "flex border-b border-slate-100 dark:border-white/8 overflow-x-auto", children: TABS.map((tab) => /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+      "button",
+      {
+        onClick: () => setActiveTab(tab.id),
+        className: `flex items-center gap-1.5 px-3 py-2 text-[10px] font-semibold whitespace-nowrap transition-colors border-b-2 ${activeTab === tab.id ? "border-b-2 text-indigo-600 dark:text-indigo-400" : "border-transparent text-slate-400 dark:text-white/30 hover:text-slate-600 dark:hover:text-white/60"}`,
+        style: activeTab === tab.id ? { borderBottomColor: primaryColor, color: primaryColor } : {},
+        children: [
+          tab.icon,
+          tab.label
+        ]
+      },
+      tab.id
+    )) }),
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "p-3", children: [
+      activeTab === "retrieval" && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(RetrievalTab, { trace }),
+      activeTab === "latency" && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(LatencyTab, { trace }),
+      activeTab === "tokens" && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(TokensTab, { trace }),
+      activeTab === "hallucination" && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(HallucinationTab, { trace }),
+      activeTab === "prompt" && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(PromptTab, { trace }),
+      activeTab === "chunks" && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(ChunksTab, { trace })
+    ] })
+  ] });
 }
 
 // src/components/HourglassLoader.tsx
-var import_react9 = __toESM(require("react"));
+var import_jsx_runtime9 = require("react/jsx-runtime");
 var HourglassLoader = ({
   size = 16,
   primaryColor = "#10b981",
   glow = false
 }) => {
-  return /* @__PURE__ */ import_react9.default.createElement(
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
     "svg",
     {
       xmlns: "http://www.w3.org/2000/svg",
@@ -1028,58 +1338,64 @@ var HourglassLoader = ({
         height: size,
         background: "transparent",
         filter: glow ? `drop-shadow(0 0 4px ${primaryColor})` : "none"
-      }
-    },
-    /* @__PURE__ */ import_react9.default.createElement("g", null, /* @__PURE__ */ import_react9.default.createElement(
-      "animateTransform",
-      {
-        attributeName: "transform",
-        type: "rotate",
-        calcMode: "spline",
-        values: "0 50 50; 0 50 50; 180 50 50",
-        keyTimes: "0; 0.8; 1",
-        keySplines: "0 0 1 1; 0.4 0 0.2 1",
-        dur: "2s",
-        repeatCount: "indefinite"
-      }
-    ), /* @__PURE__ */ import_react9.default.createElement(
-      "path",
-      {
-        d: "M 25 15 L 75 15 L 75 20 L 55 50 L 75 80 L 75 85 L 25 85 L 25 80 L 45 50 L 25 20 Z",
-        fill: "none",
-        stroke: primaryColor,
-        strokeWidth: "5",
-        strokeLinejoin: "round",
-        strokeLinecap: "round"
-      }
-    ), /* @__PURE__ */ import_react9.default.createElement("path", { fill: primaryColor }, /* @__PURE__ */ import_react9.default.createElement(
-      "animate",
-      {
-        attributeName: "d",
-        values: "M 30 20 L 70 20 L 50 50 L 50 50 Z; M 50 50 L 50 50 L 50 50 L 50 50 Z; M 50 50 L 50 50 L 50 50 L 50 50 Z",
-        keyTimes: "0; 0.8; 1",
-        dur: "2s",
-        repeatCount: "indefinite"
-      }
-    )), /* @__PURE__ */ import_react9.default.createElement("path", { fill: primaryColor }, /* @__PURE__ */ import_react9.default.createElement(
-      "animate",
-      {
-        attributeName: "d",
-        values: "M 30 80 L 70 80 L 70 80 L 30 80 Z; M 30 80 L 70 80 L 50 50 L 50 50 Z; M 30 80 L 70 80 L 50 50 L 50 50 Z",
-        keyTimes: "0; 0.8; 1",
-        dur: "2s",
-        repeatCount: "indefinite"
-      }
-    )), /* @__PURE__ */ import_react9.default.createElement("line", { x1: "50", y1: "50", x2: "50", y2: "80", stroke: primaryColor, strokeWidth: "3" }, /* @__PURE__ */ import_react9.default.createElement(
-      "animate",
-      {
-        attributeName: "opacity",
-        values: "0; 1; 1; 0; 0",
-        keyTimes: "0; 0.1; 0.7; 0.8; 1",
-        dur: "2s",
-        repeatCount: "indefinite"
-      }
-    )))
+      },
+      children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("g", { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+          "animateTransform",
+          {
+            attributeName: "transform",
+            type: "rotate",
+            calcMode: "spline",
+            values: "0 50 50; 0 50 50; 180 50 50",
+            keyTimes: "0; 0.8; 1",
+            keySplines: "0 0 1 1; 0.4 0 0.2 1",
+            dur: "2s",
+            repeatCount: "indefinite"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+          "path",
+          {
+            d: "M 25 15 L 75 15 L 75 20 L 55 50 L 75 80 L 75 85 L 25 85 L 25 80 L 45 50 L 25 20 Z",
+            fill: "none",
+            stroke: primaryColor,
+            strokeWidth: "5",
+            strokeLinejoin: "round",
+            strokeLinecap: "round"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("path", { fill: primaryColor, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+          "animate",
+          {
+            attributeName: "d",
+            values: "M 30 20 L 70 20 L 50 50 L 50 50 Z; M 50 50 L 50 50 L 50 50 L 50 50 Z; M 50 50 L 50 50 L 50 50 L 50 50 Z",
+            keyTimes: "0; 0.8; 1",
+            dur: "2s",
+            repeatCount: "indefinite"
+          }
+        ) }),
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("path", { fill: primaryColor, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+          "animate",
+          {
+            attributeName: "d",
+            values: "M 30 80 L 70 80 L 70 80 L 30 80 Z; M 30 80 L 70 80 L 50 50 L 50 50 Z; M 30 80 L 70 80 L 50 50 L 50 50 Z",
+            keyTimes: "0; 0.8; 1",
+            dur: "2s",
+            repeatCount: "indefinite"
+          }
+        ) }),
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("line", { x1: "50", y1: "50", x2: "50", y2: "80", stroke: primaryColor, strokeWidth: "3", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+          "animate",
+          {
+            attributeName: "opacity",
+            values: "0; 1; 1; 0; 0",
+            keyTimes: "0; 0.1; 0.7; 0.8; 1",
+            dur: "2s",
+            repeatCount: "indefinite"
+          }
+        ) })
+      ] })
+    }
   );
 };
 var HourglassLoader_default = HourglassLoader;
@@ -1332,7 +1648,6 @@ function extractProductsFromSources(sources, isUser) {
     const brand = resolveMetadataValue(m, "brand");
     const price = resolveMetadataValue(m, "price");
     const description = resolveMetadataValue(m, "description");
-    console.log("\u{1F680} ~ extractProductsFromSources ~ description:", s);
     return {
       id: s.id,
       name: (_b = name != null ? name : s.content.split("\n")[0]) != null ? _b : "Unknown Product",
@@ -1345,7 +1660,7 @@ function extractProductsFromSources(sources, isUser) {
     };
   });
 }
-function extractProductsFromContent(content, payloadText, payloadCandidates, productsFromSources) {
+function extractProductsFromContent(content, payloadText, payloadCandidates, productsFromSources, isStreaming = false) {
   var _a, _b;
   const jsonRegex = /```(?:json|ui)?\s*([\s\S]*?)\s*```/g;
   const products = [];
@@ -1388,7 +1703,7 @@ function extractProductsFromContent(content, payloadText, payloadCandidates, pro
   }
   const bulletRegex = /^[ \t]*(?:[•*-]|\d+\.)\s+(?:\*\*)?([^\n\-\$–—\(]+?)(?:\*\*)?(?:\s*\(?Price\s*[:\-–—]?\s*)?(?:\s*[:\-–—]\s*|\s+)\$?([\d,.]+)(?:\s*USD)?/gim;
   const matches = Array.from(cleanContent.matchAll(bulletRegex));
-  if (matches.length >= 2) {
+  if (!isStreaming && matches.length >= 2) {
     const normalize = (s) => s.toLowerCase().replace(/[^a-z0-9]/g, "");
     for (const match of matches) {
       let name = ((_a = match[1]) == null ? void 0 : _a.trim()) || "";
@@ -1440,10 +1755,11 @@ function deduplicateProducts(productsFromSources, productsFromContent, messageCo
 }
 
 // src/components/MarkdownComponents.tsx
-var import_react11 = __toESM(require("react"));
+var import_react8 = __toESM(require("react"));
 
 // src/components/UIDispatcher.tsx
-var import_react10 = __toESM(require("react"));
+var import_react7 = __toESM(require("react"));
+var import_jsx_runtime10 = require("react/jsx-runtime");
 function normalizeTabularRows(rows, columns) {
   if (!Array.isArray(rows)) return [];
   const SYNONYMS = {
@@ -1511,7 +1827,7 @@ function resolveStructuredRows(config) {
 }
 function UIDispatcher({ rawContent, primaryColor, accentColor, isStreaming, onAddToCart, viewportSize = "large" }) {
   var _a;
-  const result = import_react10.default.useMemo(() => {
+  const result = import_react7.default.useMemo(() => {
     try {
       const clean = rawContent.replace(/^```[a-z]*\s*/i, "").replace(/```\s*$/, "").trim();
       const parsed = JSON.parse(sanitizeJson(extractLikelyJsonBlock(clean)));
@@ -1556,72 +1872,87 @@ function UIDispatcher({ rawContent, primaryColor, accentColor, isStreaming, onAd
     }
   }, [rawContent, isStreaming]);
   if ("loading" in result) {
-    return /* @__PURE__ */ import_react10.default.createElement("div", { className: "my-4 p-8 bg-slate-50 dark:bg-white/5 rounded-xl border border-dashed border-slate-300 dark:border-white/10 flex flex-col items-center justify-center gap-3 animate-pulse" }, /* @__PURE__ */ import_react10.default.createElement("div", { className: "w-5 h-5 border-2 border-indigo-500 border-t-transparent rounded-full animate-spin" }), /* @__PURE__ */ import_react10.default.createElement("p", { className: "text-xs text-slate-500 font-medium italic" }, "Preparing view..."));
+    return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "my-4 p-8 bg-slate-50 dark:bg-white/5 rounded-xl border border-dashed border-slate-300 dark:border-white/10 flex flex-col items-center justify-center gap-3 animate-pulse", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "w-5 h-5 border-2 border-indigo-500 border-t-transparent rounded-full animate-spin" }),
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("p", { className: "text-xs text-slate-500 font-medium italic", children: "Preparing view..." })
+    ] });
   }
   if ("error" in result) {
-    return /* @__PURE__ */ import_react10.default.createElement("pre", { className: "p-4 my-2 bg-slate-900 text-slate-100 rounded-lg text-[10px] overflow-auto max-h-40" }, /* @__PURE__ */ import_react10.default.createElement("code", null, rawContent));
+    return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("pre", { className: "p-4 my-2 bg-slate-900 text-slate-100 rounded-lg text-[10px] overflow-auto max-h-40", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("code", { children: rawContent }) });
   }
   const { config } = result;
   const isCompact = viewportSize === "compact";
   const hasInsights = Array.isArray(config.insights) && config.insights.length > 0;
   const hasDescription = typeof config.description === "string" && config.description.trim().length > 0;
-  console.log("\u{1F680} ~ UIDispatcher ~ description:", config.description);
-  console.log("\u{1F680} ~ UIDispatcher ~ hasDescription:", hasDescription);
   switch (config.view) {
     case "chart":
-      return /* @__PURE__ */ import_react10.default.createElement("div", { className: `${isCompact ? "my-4 p-3" : "my-6 p-4"} bg-white dark:bg-slate-900 rounded-2xl border border-slate-200 dark:border-white/10 shadow-sm overflow-hidden` }, config.title && /* @__PURE__ */ import_react10.default.createElement("h4", { className: `${isCompact ? "text-[11px] mb-3" : "text-xs mb-4"} font-semibold text-slate-500 px-2` }, config.title), hasDescription && /* @__PURE__ */ import_react10.default.createElement("p", { className: `px-2 ${isCompact ? "text-xs" : "text-sm"} text-slate-500 dark:text-white/60` }, config.description), /* @__PURE__ */ import_react10.default.createElement(
-        DynamicChart,
-        {
-          config: {
-            type: config.chartType || "bar",
-            data: config.data,
-            xAxisKey: config.xAxisKey,
-            dataKeys: config.dataKeys,
-            colors: config.colors
+      return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: `${isCompact ? "my-4 p-3" : "my-6 p-4"} bg-white dark:bg-slate-900 rounded-2xl border border-slate-200 dark:border-white/10 shadow-sm overflow-hidden`, children: [
+        config.title && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("h4", { className: `${isCompact ? "text-[11px] mb-3" : "text-xs mb-4"} font-semibold text-slate-500 px-2`, children: config.title }),
+        hasDescription && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("p", { className: `px-2 ${isCompact ? "text-xs" : "text-sm"} text-slate-500 dark:text-white/60`, children: config.description }),
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+          DynamicChart,
+          {
+            config: {
+              type: config.chartType || "bar",
+              data: config.data,
+              xAxisKey: config.xAxisKey,
+              dataKeys: config.dataKeys,
+              colors: config.colors
+            },
+            primaryColor,
+            accentColor,
+            viewportSize,
+            isStreaming
+          }
+        ),
+        hasInsights && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "mt-4 flex flex-wrap gap-2 px-2", children: (_a = config.insights) == null ? void 0 : _a.map((insight, i) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+          "span",
+          {
+            className: `rounded-full border border-emerald-200 bg-emerald-50 ${isCompact ? "px-2.5 py-1 text-[10px]" : "px-3 py-1 text-[11px]"} font-medium text-emerald-700 dark:border-emerald-500/20 dark:bg-emerald-500/10 dark:text-emerald-300`,
+            children: String(insight)
           },
-          primaryColor,
-          accentColor,
-          viewportSize,
-          isStreaming
-        }
-      ), hasInsights && /* @__PURE__ */ import_react10.default.createElement("div", { className: "mt-4 flex flex-wrap gap-2 px-2" }, (_a = config.insights) == null ? void 0 : _a.map((insight, i) => /* @__PURE__ */ import_react10.default.createElement(
-        "span",
-        {
-          key: `insight-${i}`,
-          className: `rounded-full border border-emerald-200 bg-emerald-50 ${isCompact ? "px-2.5 py-1 text-[10px]" : "px-3 py-1 text-[11px]"} font-medium text-emerald-700 dark:border-emerald-500/20 dark:bg-emerald-500/10 dark:text-emerald-300`
-        },
-        String(insight)
-      ))));
+          `insight-${i}`
+        )) })
+      ] });
     case "carousel":
-      return /* @__PURE__ */ import_react10.default.createElement("div", { className: "my-4" }, config.title && /* @__PURE__ */ import_react10.default.createElement("h4", { className: `${isCompact ? "mb-1.5 text-[11px]" : "mb-2 text-xs"} font-semibold text-slate-500` }, config.title), hasDescription && /* @__PURE__ */ import_react10.default.createElement("p", { className: `mb-3 ${isCompact ? "text-xs" : "text-sm"} text-slate-500 dark:text-white/60` }, config.description), /* @__PURE__ */ import_react10.default.createElement(ProductCarousel, { products: config.data.map((item) => {
-        var _a2;
-        return __spreadProps(__spreadValues({}, item), {
-          image: (_a2 = item.image) != null ? _a2 : typeof resolveImage === "function" ? resolveImage(item) : void 0
-        });
-      }), primaryColor, onAddToCart }));
+      return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "my-4", children: [
+        config.title && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("h4", { className: `${isCompact ? "mb-1.5 text-[11px]" : "mb-2 text-xs"} font-semibold text-slate-500`, children: config.title }),
+        hasDescription && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("p", { className: `mb-3 ${isCompact ? "text-xs" : "text-sm"} text-slate-500 dark:text-white/60`, children: config.description }),
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(ProductCarousel, { products: config.data.map((item) => {
+          var _a2;
+          return __spreadProps(__spreadValues({}, item), {
+            image: (_a2 = item.image) != null ? _a2 : typeof resolveImage === "function" ? resolveImage(item) : void 0
+          });
+        }), primaryColor, onAddToCart })
+      ] });
     case "table":
-      return /* @__PURE__ */ import_react10.default.createElement("div", { className: `${isCompact ? "my-3 p-3 max-h-[320px]" : "my-4 p-4 max-h-[400px]"} bg-white dark:bg-slate-900 rounded-xl border border-slate-200 dark:border-white/10 shadow-sm overflow-auto` }, config.title && /* @__PURE__ */ import_react10.default.createElement("h4", { className: `${isCompact ? "text-[11px]" : "text-xs"} font-semibold text-slate-500 mb-2` }, config.title), hasDescription && /* @__PURE__ */ import_react10.default.createElement("p", { className: `mb-3 ${isCompact ? "text-xs" : "text-sm"} text-slate-500 dark:text-white/60` }, config.description), /* @__PURE__ */ import_react10.default.createElement(
-        VisualizationRenderer,
-        {
-          data: {
-            type: "table",
-            title: config.title || "",
-            description: config.description,
+      return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: `${isCompact ? "my-3 p-3 max-h-[320px]" : "my-4 p-4 max-h-[400px]"} bg-white dark:bg-slate-900 rounded-xl border border-slate-200 dark:border-white/10 shadow-sm overflow-auto`, children: [
+        config.title && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("h4", { className: `${isCompact ? "text-[11px]" : "text-xs"} font-semibold text-slate-500 mb-2`, children: config.title }),
+        hasDescription && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("p", { className: `mb-3 ${isCompact ? "text-xs" : "text-sm"} text-slate-500 dark:text-white/60`, children: config.description }),
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+          VisualizationRenderer,
+          {
             data: {
-              columns: config.columns || Object.keys(config.data[0] || {}),
-              rows: config.data.map((row) => Object.values(row))
-            }
-          },
-          primaryColor,
-          isStreaming
-        }
-      ));
+              type: "table",
+              title: config.title || "",
+              description: config.description,
+              data: {
+                columns: config.columns || Object.keys(config.data[0] || {}),
+                rows: config.data.map((row) => Object.values(row))
+              }
+            },
+            primaryColor,
+            isStreaming
+          }
+        )
+      ] });
     default:
       return null;
   }
 }
 
 // src/components/MarkdownComponents.tsx
+var import_jsx_runtime11 = require("react/jsx-runtime");
 function createMarkdownComponents({
   primaryColor,
   accentColor,
@@ -1630,66 +1961,75 @@ function createMarkdownComponents({
   viewportSize
 }) {
   return {
-    table: (_a) => {
+    p: (_a) => {
       var props = __objRest(_a, []);
+      return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("p", __spreadValues({ className: "whitespace-pre-line" }, props));
+    },
+    table: (_b) => {
+      var props = __objRest(_b, []);
       if (isStreaming) {
-        return /* @__PURE__ */ import_react11.default.createElement("div", { className: "my-5 p-6 bg-slate-50 dark:bg-white/5 rounded-xl border border-dashed border-slate-300 dark:border-white/10 flex items-center justify-center gap-3 select-none" }, /* @__PURE__ */ import_react11.default.createElement("div", { className: "w-4 h-4 border-2 border-indigo-500 border-t-transparent rounded-full animate-spin" }), /* @__PURE__ */ import_react11.default.createElement("p", { className: "text-xs text-slate-500 font-medium italic animate-pulse" }, "Generating data table..."));
+        return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "my-5 p-6 bg-slate-50 dark:bg-white/5 rounded-xl border border-dashed border-slate-300 dark:border-white/10 flex items-center justify-center gap-3 select-none", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "w-4 h-4 border-2 border-indigo-500 border-t-transparent rounded-full animate-spin" }),
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("p", { className: "text-xs text-slate-500 font-medium italic animate-pulse", children: "Generating data table..." })
+        ] });
       }
-      return /* @__PURE__ */ import_react11.default.createElement("div", { className: "not-prose overflow-hidden my-5 rounded-xl border border-slate-200 dark:border-white/10 shadow-sm bg-white dark:bg-slate-900/50" }, /* @__PURE__ */ import_react11.default.createElement("div", { className: "overflow-x-auto" }, /* @__PURE__ */ import_react11.default.createElement(
+      return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "not-prose overflow-hidden my-5 rounded-xl border border-slate-200 dark:border-white/10 shadow-sm bg-white dark:bg-slate-900/50", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "overflow-x-auto", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
         "table",
         __spreadValues({
           className: "!table w-full text-left border-collapse min-w-[400px] text-sm"
         }, props)
-      )));
+      ) }) });
     },
-    thead: (_b) => {
-      var props = __objRest(_b, []);
-      return /* @__PURE__ */ import_react11.default.createElement(
+    thead: (_c) => {
+      var props = __objRest(_c, []);
+      return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
         "thead",
         __spreadValues({
           className: "!table-header-group bg-slate-50 dark:bg-white/5 border-b border-slate-200 dark:border-white/10"
         }, props)
       );
     },
-    tbody: (_c) => {
-      var props = __objRest(_c, []);
-      return /* @__PURE__ */ import_react11.default.createElement("tbody", __spreadValues({ className: "!table-row-group divide-y divide-slate-100 dark:divide-white/5" }, props));
-    },
-    tr: (_d) => {
+    tbody: (_d) => {
       var props = __objRest(_d, []);
-      return /* @__PURE__ */ import_react11.default.createElement(
+      return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("tbody", __spreadValues({ className: "!table-row-group divide-y divide-slate-100 dark:divide-white/5" }, props));
+    },
+    tr: (_e) => {
+      var props = __objRest(_e, []);
+      return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
         "tr",
         __spreadValues({
           className: "!table-row hover:bg-slate-50/70 dark:hover:bg-white/5 transition-colors"
         }, props)
       );
     },
-    th: (_e) => {
-      var _f = _e, { children } = _f, props = __objRest(_f, ["children"]);
-      return /* @__PURE__ */ import_react11.default.createElement(
+    th: (_f) => {
+      var _g = _f, { children } = _g, props = __objRest(_g, ["children"]);
+      return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
         "th",
-        __spreadValues({
+        __spreadProps(__spreadValues({
           className: "!table-cell px-4 py-3 font-bold text-slate-700 dark:text-white/90 whitespace-nowrap text-[11px] uppercase tracking-wider text-left"
-        }, props),
-        normaliseChild(children)
+        }, props), {
+          children: normaliseChild(children)
+        })
       );
     },
-    td: (_g) => {
-      var _h = _g, { children } = _h, props = __objRest(_h, ["children"]);
-      return /* @__PURE__ */ import_react11.default.createElement(
+    td: (_h) => {
+      var _i = _h, { children } = _i, props = __objRest(_i, ["children"]);
+      return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
         "td",
-        __spreadValues({
+        __spreadProps(__spreadValues({
           className: "!table-cell px-4 py-3 text-slate-600 dark:text-white/70 whitespace-nowrap text-sm"
-        }, props),
-        normaliseChild(children)
+        }, props), {
+          children: normaliseChild(children)
+        })
       );
     },
-    code(_i) {
-      var _j = _i, {
+    code(_j) {
+      var _k = _j, {
         inline,
         className,
         children
-      } = _j, props = __objRest(_j, [
+      } = _k, props = __objRest(_k, [
         "inline",
         "className",
         "children"
@@ -1698,7 +2038,7 @@ function createMarkdownComponents({
       const lang = (_a = /language-(\w+)/.exec(className != null ? className : "")) == null ? void 0 : _a[1];
       if (!inline && (lang === "ui" || lang === "chart" || lang === "json")) {
         const content = String(children != null ? children : "").trim();
-        return /* @__PURE__ */ import_react11.default.createElement(
+        return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
           UIDispatcher,
           {
             rawContent: content,
@@ -1713,7 +2053,7 @@ function createMarkdownComponents({
       if (!inline) {
         const content = String(children != null ? children : "").trim();
         if (content.startsWith("{") && content.endsWith("}")) {
-          return /* @__PURE__ */ import_react11.default.createElement(
+          return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
             UIDispatcher,
             {
               rawContent: content,
@@ -1726,18 +2066,19 @@ function createMarkdownComponents({
           );
         }
       }
-      return /* @__PURE__ */ import_react11.default.createElement("code", __spreadValues({ className }, props), typeof children === "string" || typeof children === "number" ? children : JSON.stringify(children));
+      return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("code", __spreadProps(__spreadValues({ className }, props), { children: typeof children === "string" || typeof children === "number" ? children : JSON.stringify(children) }));
     }
   };
 }
 function normaliseChild(children) {
-  if (typeof children === "object" && children !== null && !Array.isArray(children) && !import_react11.default.isValidElement(children)) {
+  if (typeof children === "object" && children !== null && !Array.isArray(children) && !import_react8.default.isValidElement(children)) {
     return JSON.stringify(children);
   }
   return children;
 }
 
 // src/components/MessageBubble.tsx
+var import_jsx_runtime12 = require("react/jsx-runtime");
 function MessageBubble({
   message,
   sources,
@@ -1750,13 +2091,13 @@ function MessageBubble({
   const isUser = message.role === "user";
   const isCompact = viewportSize === "compact";
   const isMedium = viewportSize === "medium";
-  const [showSources, setShowSources] = import_react12.default.useState(false);
-  const [showTrace, setShowTrace] = import_react12.default.useState(false);
-  const structuredContent = import_react12.default.useMemo(
+  const [showSources, setShowSources] = import_react9.default.useState(false);
+  const [showTrace, setShowTrace] = import_react9.default.useState(false);
+  const structuredContent = import_react9.default.useMemo(
     () => isUser ? { payload: null, text: message.content } : extractStructuredPayload(message.content),
     [isUser, message.content]
   );
-  const hasRichUI = import_react12.default.useMemo(() => {
+  const hasRichUI = import_react9.default.useMemo(() => {
     if (message.uiTransformation) {
       const type = message.uiTransformation.type;
       if (type && !["text", "table"].includes(type)) return true;
@@ -1767,10 +2108,10 @@ function MessageBubble({
     return false;
   }, [message.uiTransformation, structuredContent.payload]);
   const shouldRenderStructuredOnly = !isUser && hasRichUI && isLikelyUiOnlyMessage(structuredContent.text);
-  const productsFromSources = import_react12.default.useMemo(() => {
+  const productsFromSources = import_react9.default.useMemo(() => {
     return extractProductsFromSources(sources, isUser);
   }, [sources, isUser]);
-  const { productsFromContent, cleanContent } = import_react12.default.useMemo(() => {
+  const { productsFromContent, cleanContent } = import_react9.default.useMemo(() => {
     if (isUser) {
       return { productsFromContent: [], cleanContent: message.content };
     }
@@ -1782,13 +2123,14 @@ function MessageBubble({
       message.content,
       structuredContent.text,
       payloadCandidates,
-      productsFromSources
+      productsFromSources,
+      isStreaming
     );
-  }, [message.content, isUser, structuredContent, productsFromSources]);
-  const allProducts = import_react12.default.useMemo(() => {
+  }, [message.content, isUser, structuredContent, productsFromSources, isStreaming]);
+  const allProducts = import_react9.default.useMemo(() => {
     return deduplicateProducts(productsFromSources, productsFromContent, message.content);
   }, [productsFromSources, productsFromContent, message.content]);
-  const processedMarkdown = import_react12.default.useMemo(() => {
+  const processedMarkdown = import_react9.default.useMemo(() => {
     let raw = structuredContent.payload ? structuredContent.text : cleanContent || message.content;
     const hasStructuredUiBlock = Boolean(structuredContent.payload) || /```(?:ui|json|chart)\s*[\s\S]*?"(?:view|chartType|type|data|items|rows|products|results)"\s*:/i.test(raw);
     raw = raw.replace(/([^\n])\n\|/g, "$1\n\n|").replace(/(\|[^\n]*\|)\n\n+(?=\|)/g, "$1\n");
@@ -1811,93 +2153,123 @@ ${match.trim()}
     }
     return raw;
   }, [cleanContent, message.content, isStreaming, structuredContent]);
-  const markdownComponents = import_react12.default.useMemo(
+  const markdownComponents = import_react9.default.useMemo(
     () => createMarkdownComponents({ primaryColor, accentColor, isStreaming, onAddToCart, viewportSize }),
     [primaryColor, accentColor, isStreaming, onAddToCart, viewportSize]
   );
-  return /* @__PURE__ */ import_react12.default.createElement("div", { className: `flex ${isCompact ? "gap-2" : "gap-3"} ${isUser ? "flex-row-reverse" : "flex-row"} items-start` }, /* @__PURE__ */ import_react12.default.createElement(
-    "div",
-    {
-      className: `flex-shrink-0 ${isCompact ? "w-7 h-7" : "w-8 h-8"} rounded-full flex items-center justify-center shadow-lg ${isUser ? "text-white" : "bg-slate-100 dark:bg-white/10 text-slate-700 dark:text-white/80"}`,
-      style: isUser ? { background: `linear-gradient(135deg, ${primaryColor}, ${accentColor})` } : {}
-    },
-    isUser ? /* @__PURE__ */ import_react12.default.createElement(import_lucide_react6.User, { className: `${isCompact ? "w-3.5 h-3.5" : "w-4 h-4"} text-white` }) : /* @__PURE__ */ import_react12.default.createElement(import_lucide_react6.Bot, { className: `${isCompact ? "w-3.5 h-3.5" : "w-4 h-4"}` })
-  ), /* @__PURE__ */ import_react12.default.createElement("div", { className: `flex flex-col gap-1 min-w-0 ${isCompact ? "max-w-[94%]" : isMedium ? "max-w-[92%]" : "max-w-[90%]"} ${isUser ? "items-end" : "items-start"}` }, /* @__PURE__ */ import_react12.default.createElement(
-    "div",
-    {
-      className: `relative ${isCompact ? "px-3 py-2.5 text-[13px]" : "px-4 py-3 text-sm"} rounded-2xl leading-relaxed shadow-sm dark:shadow-lg ${isUser ? "text-white rounded-tr-sm" : "bg-white dark:bg-white/5 border border-slate-200 dark:border-white/10 text-slate-800 dark:text-white/90 rounded-tl-sm"}`,
-      style: isUser ? { background: `linear-gradient(135deg, ${primaryColor}, ${accentColor})` } : {}
-    },
-    isStreaming && !message.content ? /* @__PURE__ */ import_react12.default.createElement("span", { className: "flex items-center gap-1 py-1" }, /* @__PURE__ */ import_react12.default.createElement("span", { className: "w-1.5 h-1.5 rounded-full bg-slate-400 dark:bg-white/60 animate-bounce [animation-delay:0ms]" }), /* @__PURE__ */ import_react12.default.createElement("span", { className: "w-1.5 h-1.5 rounded-full bg-slate-400 dark:bg-white/60 animate-bounce [animation-delay:150ms]" }), /* @__PURE__ */ import_react12.default.createElement("span", { className: "w-1.5 h-1.5 rounded-full bg-slate-400 dark:bg-white/60 animate-bounce [animation-delay:300ms]" })) : /* @__PURE__ */ import_react12.default.createElement("div", { className: `prose ${isCompact ? "prose-xs" : "prose-sm"} max-w-none break-words ${isUser ? "prose-invert" : "dark:prose-invert"}` }, !isUser && structuredContent.payload && /* @__PURE__ */ import_react12.default.createElement(
-      UIDispatcher,
-      {
-        rawContent: structuredContent.payload,
-        primaryColor,
-        accentColor,
-        isStreaming,
-        onAddToCart,
-        viewportSize
-      }
-    ), !shouldRenderStructuredOnly && /* @__PURE__ */ import_react12.default.createElement(import_react_markdown.default, { components: markdownComponents }, processedMarkdown), isStreaming && /* @__PURE__ */ import_react12.default.createElement("span", { className: "inline-flex items-center gap-1.5 ml-2 text-emerald-500 animate-pulse align-middle text-xs font-medium" }, /* @__PURE__ */ import_react12.default.createElement(
-      HourglassLoader_default,
-      {
-        size: 18,
-        primaryColor,
-        accentColor,
-        glow: false
-      }
-    ), "Thinking..."))
-  ), (() => {
-    var _a, _b;
-    if (isUser || structuredContent.payload || !message.uiTransformation) return null;
-    const ui = message.uiTransformation;
-    const textContent = (_b = (_a = ui.data) == null ? void 0 : _a.content) != null ? _b : "";
-    const shouldShow = ui.type === "table" && allProducts.length === 0 || !["text", "table"].includes(ui.type) || ui.type === "text" && !hasRichUI && allProducts.length === 0 && textContent && !processedMarkdown.toLowerCase().includes(textContent.trim().toLowerCase());
-    if (!shouldShow) return null;
-    return /* @__PURE__ */ import_react12.default.createElement("div", { className: "w-full mt-3" }, /* @__PURE__ */ import_react12.default.createElement(
-      VisualizationRenderer,
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: `flex ${isCompact ? "gap-2" : "gap-3"} ${isUser ? "flex-row-reverse" : "flex-row"} items-start`, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+      "div",
       {
-        data: ui,
-        primaryColor,
-        onAddToCart,
-        className: "rounded-3xl border border-slate-200/60 dark:border-white/10 bg-white/90 dark:bg-slate-900/80 p-4",
-        isStreaming
+        className: `flex-shrink-0 ${isCompact ? "w-7 h-7" : "w-8 h-8"} rounded-full flex items-center justify-center shadow-lg ${isUser ? "text-white" : "bg-slate-100 dark:bg-white/10 text-slate-700 dark:text-white/80"}`,
+        style: isUser ? { background: `linear-gradient(135deg, ${primaryColor}, ${accentColor})` } : {},
+        children: isUser ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_lucide_react6.User, { className: `${isCompact ? "w-3.5 h-3.5" : "w-4 h-4"} text-white` }) : /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_lucide_react6.Bot, { className: `${isCompact ? "w-3.5 h-3.5" : "w-4 h-4"}` })
       }
-    ));
-  })(), !isUser && !hasRichUI && allProducts.length > 0 && /* @__PURE__ */ import_react12.default.createElement("div", { className: "w-full mt-1" }, /* @__PURE__ */ import_react12.default.createElement(
-    ProductCarousel,
-    {
-      products: allProducts,
-      primaryColor,
-      onAddToCart
-    }
-  )), !isUser && /* @__PURE__ */ import_react12.default.createElement("div", { className: "flex items-center gap-4 mt-1 w-full flex-wrap" }, sources && sources.length > 0 && /* @__PURE__ */ import_react12.default.createElement(
-    "button",
-    {
-      onClick: () => setShowSources((s) => !s),
-      className: "text-[11px] text-indigo-400 hover:text-indigo-300 transition-colors flex items-center gap-1"
-    },
-    showSources ? /* @__PURE__ */ import_react12.default.createElement(import_lucide_react6.ChevronDown, { className: "w-3 h-3" }) : /* @__PURE__ */ import_react12.default.createElement(import_lucide_react6.ChevronRight, { className: "w-3 h-3" }),
-    sources.length,
-    " source",
-    sources.length !== 1 ? "s" : "",
-    " used"
-  ), message.trace && /* @__PURE__ */ import_react12.default.createElement(
-    "button",
-    {
-      onClick: () => setShowTrace((t) => !t),
-      className: "text-[11px] text-emerald-500 hover:text-emerald-400 transition-colors flex items-center gap-1"
-    },
-    /* @__PURE__ */ import_react12.default.createElement(import_lucide_react6.Activity, { className: "w-3 h-3" }),
-    showTrace ? "Hide Trace" : "Trace"
-  )), /* @__PURE__ */ import_react12.default.createElement("div", { className: "w-full flex flex-col gap-2 min-w-0" }, showSources && sources && sources.length > 0 && /* @__PURE__ */ import_react12.default.createElement("div", { className: "mt-1 flex flex-col gap-2" }, sources.map((src, i) => /* @__PURE__ */ import_react12.default.createElement(SourceCard, { key: src.id, source: src, index: i }))), showTrace && message.trace && /* @__PURE__ */ import_react12.default.createElement(ObservabilityPanel, { trace: message.trace, primaryColor }))));
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: `flex flex-col gap-1 min-w-0 ${isCompact ? "max-w-[94%]" : isMedium ? "max-w-[92%]" : "max-w-[90%]"} ${isUser ? "items-end" : "items-start"}`, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+        "div",
+        {
+          className: `relative ${isCompact ? "px-3 py-2.5 text-[13px]" : "px-4 py-3 text-sm"} rounded-2xl leading-relaxed shadow-sm dark:shadow-lg ${isUser ? "text-white rounded-tr-sm" : "bg-white dark:bg-white/5 border border-slate-200 dark:border-white/10 text-slate-800 dark:text-white/90 rounded-tl-sm"}`,
+          style: isUser ? { background: `linear-gradient(135deg, ${primaryColor}, ${accentColor})` } : {},
+          children: isStreaming && !message.content ? /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("span", { className: "flex items-center gap-1 py-1", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "w-1.5 h-1.5 rounded-full bg-slate-400 dark:bg-white/60 animate-bounce [animation-delay:0ms]" }),
+            /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "w-1.5 h-1.5 rounded-full bg-slate-400 dark:bg-white/60 animate-bounce [animation-delay:150ms]" }),
+            /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "w-1.5 h-1.5 rounded-full bg-slate-400 dark:bg-white/60 animate-bounce [animation-delay:300ms]" })
+          ] }) : /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: `prose ${isCompact ? "prose-xs" : "prose-sm"} max-w-none break-words ${isUser ? "prose-invert" : "dark:prose-invert"}`, children: [
+            !isUser && structuredContent.payload && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+              UIDispatcher,
+              {
+                rawContent: structuredContent.payload,
+                primaryColor,
+                accentColor,
+                isStreaming,
+                onAddToCart,
+                viewportSize
+              }
+            ),
+            !shouldRenderStructuredOnly && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_react_markdown.default, { components: markdownComponents, children: processedMarkdown }),
+            isStreaming && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("span", { className: "inline-flex items-center gap-1.5 ml-2 text-emerald-500 animate-pulse align-middle text-xs font-medium", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+                HourglassLoader_default,
+                {
+                  size: 18,
+                  primaryColor,
+                  accentColor,
+                  glow: false
+                }
+              ),
+              "Thinking..."
+            ] })
+          ] })
+        }
+      ),
+      (() => {
+        var _a, _b;
+        if (isUser || structuredContent.payload || !message.uiTransformation) return null;
+        const ui = message.uiTransformation;
+        const textContent = (_b = (_a = ui.data) == null ? void 0 : _a.content) != null ? _b : "";
+        const shouldShow = ui.type === "table" && allProducts.length === 0 || !["text", "table"].includes(ui.type) || ui.type === "text" && !hasRichUI && allProducts.length === 0 && textContent && !processedMarkdown.toLowerCase().includes(textContent.trim().toLowerCase());
+        if (!shouldShow) return null;
+        return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "w-full mt-3", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+          VisualizationRenderer,
+          {
+            data: ui,
+            primaryColor,
+            onAddToCart,
+            className: "rounded-3xl border border-slate-200/60 dark:border-white/10 bg-white/90 dark:bg-slate-900/80 p-4",
+            isStreaming
+          }
+        ) });
+      })(),
+      !isUser && !hasRichUI && allProducts.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "w-full mt-1", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+        ProductCarousel,
+        {
+          products: allProducts,
+          primaryColor,
+          onAddToCart
+        }
+      ) }),
+      !isUser && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "flex items-center gap-4 mt-1 w-full flex-wrap", children: [
+        sources && sources.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+          "button",
+          {
+            onClick: () => setShowSources((s) => !s),
+            className: "text-[11px] text-indigo-400 hover:text-indigo-300 transition-colors flex items-center gap-1",
+            children: [
+              showSources ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_lucide_react6.ChevronDown, { className: "w-3 h-3" }) : /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_lucide_react6.ChevronRight, { className: "w-3 h-3" }),
+              sources.length,
+              " source",
+              sources.length !== 1 ? "s" : "",
+              " used"
+            ]
+          }
+        ),
+        message.trace && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+          "button",
+          {
+            onClick: () => setShowTrace((t) => !t),
+            className: "text-[11px] text-emerald-500 hover:text-emerald-400 transition-colors flex items-center gap-1",
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_lucide_react6.Activity, { className: "w-3 h-3" }),
+              showTrace ? "Hide Trace" : "Trace"
+            ]
+          }
+        )
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "w-full flex flex-col gap-2 min-w-0", children: [
+        showSources && sources && sources.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "mt-1 flex flex-col gap-2", children: sources.map((src, i) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(SourceCard, { source: src, index: i }, src.id)) }),
+        showTrace && message.trace && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(ObservabilityPanel, { trace: message.trace, primaryColor })
+      ] })
+    ] })
+  ] });
 }
 
 // src/hooks/useRagChat.ts
-var import_react13 = require("react");
+var import_react10 = require("react");
 
 // src/hooks/useStoredMessages.ts
-var React13 = __toESM(require("react"));
+var React10 = __toESM(require("react"));
 function readStoredMessages(storageKey) {
   if (typeof window === "undefined") {
     return [];
@@ -1914,8 +2286,8 @@ function readStoredMessages(storageKey) {
   }
 }
 function useStoredMessages(storageKey, persist) {
-  const [messages, setMessages] = React13.useState(() => persist ? readStoredMessages(storageKey) : []);
-  React13.useEffect(() => {
+  const [messages, setMessages] = React10.useState(() => persist ? readStoredMessages(storageKey) : []);
+  React10.useEffect(() => {
     if (!persist || typeof window === "undefined") {
       return;
     }
@@ -1955,14 +2327,14 @@ function useRagChat(projectId, options = {}) {
   } = options;
   const storageKey = `rag_chat_${projectId}`;
   const [messages, setMessages] = useStoredMessages(storageKey, persist);
-  const [isLoading, setIsLoading] = (0, import_react13.useState)(false);
-  const [error, setError] = (0, import_react13.useState)(null);
-  const lastInputRef = (0, import_react13.useRef)("");
-  const messagesRef = (0, import_react13.useRef)(messages);
-  (0, import_react13.useEffect)(() => {
+  const [isLoading, setIsLoading] = (0, import_react10.useState)(false);
+  const [error, setError] = (0, import_react10.useState)(null);
+  const lastInputRef = (0, import_react10.useRef)("");
+  const messagesRef = (0, import_react10.useRef)(messages);
+  (0, import_react10.useEffect)(() => {
     messagesRef.current = messages;
   }, [messages]);
-  const sendMessage = (0, import_react13.useCallback)(
+  const sendMessage = (0, import_react10.useCallback)(
     async (text, opts) => {
       var _a, _b;
       const trimmed = text.trim();
@@ -2075,12 +2447,12 @@ function useRagChat(projectId, options = {}) {
     },
     [apiUrl, isLoading, namespace, onError, onReply, projectId, setMessages]
   );
-  const clear = (0, import_react13.useCallback)(() => {
+  const clear = (0, import_react10.useCallback)(() => {
     setMessages([]);
     setError(null);
     if (persist) localStorage.removeItem(storageKey);
   }, [persist, setMessages, storageKey]);
-  const retry = (0, import_react13.useCallback)(async () => {
+  const retry = (0, import_react10.useCallback)(async () => {
     if (lastInputRef.current) {
       const latestMessage = messagesRef.current[messagesRef.current.length - 1];
       await sendMessage(lastInputRef.current, {
@@ -2100,6 +2472,7 @@ function useRagChat(projectId, options = {}) {
 }
 
 // src/components/ChatWindow.tsx
+var import_jsx_runtime13 = require("react/jsx-runtime");
 function ChatWindow({
   className = "",
   style,
@@ -2114,21 +2487,21 @@ function ChatWindow({
 }) {
   var _a;
   const { ui, projectId } = useConfig();
-  const [input, setInput] = (0, import_react14.useState)("");
-  const [mounted, setMounted] = (0, import_react14.useState)(false);
-  const [viewportSize, setViewportSize] = (0, import_react14.useState)("large");
-  const windowRef = (0, import_react14.useRef)(null);
-  const bottomRef = (0, import_react14.useRef)(null);
-  const inputRef = (0, import_react14.useRef)(null);
+  const [input, setInput] = (0, import_react11.useState)("");
+  const [mounted, setMounted] = (0, import_react11.useState)(false);
+  const [viewportSize, setViewportSize] = (0, import_react11.useState)("large");
+  const windowRef = (0, import_react11.useRef)(null);
+  const bottomRef = (0, import_react11.useRef)(null);
+  const inputRef = (0, import_react11.useRef)(null);
   const { messages, send, clear, isLoading, error } = useRagChat(projectId, {
     namespace: projectId
   });
-  const [suggestions, setSuggestions] = (0, import_react14.useState)([]);
-  const [isSuggesting, setIsSuggesting] = (0, import_react14.useState)(false);
-  const [isListening, setIsListening] = (0, import_react14.useState)(false);
-  const [isUploadModalOpen, setIsUploadModalOpen] = (0, import_react14.useState)(false);
-  const recognitionRef = (0, import_react14.useRef)(null);
-  (0, import_react14.useEffect)(() => {
+  const [suggestions, setSuggestions] = (0, import_react11.useState)([]);
+  const [isSuggesting, setIsSuggesting] = (0, import_react11.useState)(false);
+  const [isListening, setIsListening] = (0, import_react11.useState)(false);
+  const [isUploadModalOpen, setIsUploadModalOpen] = (0, import_react11.useState)(false);
+  const recognitionRef = (0, import_react11.useRef)(null);
+  (0, import_react11.useEffect)(() => {
     if (typeof window !== "undefined") {
       const win = window;
       const SpeechRecognition = win.SpeechRecognition || win.webkitSpeechRecognition;
@@ -2174,10 +2547,10 @@ function ChatWindow({
       }
     }
   };
-  (0, import_react14.useEffect)(() => {
+  (0, import_react11.useEffect)(() => {
     setMounted(true);
   }, []);
-  (0, import_react14.useEffect)(() => {
+  (0, import_react11.useEffect)(() => {
     const element = windowRef.current;
     if (!element || typeof ResizeObserver === "undefined") return;
     const resolveViewportSize = (width) => {
@@ -2193,13 +2566,13 @@ function ChatWindow({
     observer.observe(element);
     return () => observer.disconnect();
   }, []);
-  (0, import_react14.useEffect)(() => {
+  (0, import_react11.useEffect)(() => {
     var _a2;
     if (messages.length > 0 || isLoading) {
       (_a2 = bottomRef.current) == null ? void 0 : _a2.scrollIntoView({ behavior: "smooth" });
     }
   }, [messages, isLoading]);
-  const sendMessage = (0, import_react14.useCallback)(async () => {
+  const sendMessage = (0, import_react11.useCallback)(async () => {
     var _a2;
     const text = input.trim();
     if (!text || isLoading) return;
@@ -2229,7 +2602,7 @@ function ChatWindow({
   const isEmpty = messages.length === 0;
   const currentRadius = BORDER_RADIUS_MAP[ui.borderRadius || "xl"];
   const isGlass = ui.visualStyle !== "solid";
-  (0, import_react14.useEffect)(() => {
+  (0, import_react11.useEffect)(() => {
     if (input.trim().length < 3) {
       return;
     }
@@ -2253,217 +2626,273 @@ function ChatWindow({
     }, 800);
     return () => clearTimeout(timer);
   }, [input, projectId]);
-  return /* @__PURE__ */ import_react14.default.createElement(
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
     "div",
     {
       ref: windowRef,
       className: `relative flex flex-col border border-slate-200 dark:border-white/10 shadow-2xl transition-all duration-300 ${currentRadius} ${isGlass ? "bg-white/90 dark:bg-[#0f0f1a]/90 backdrop-blur-xl" : "bg-white dark:bg-[#0f0f1a]"} ${className}`,
-      style: __spreadValues({ "--primary": ui.primaryColor, "--accent": ui.accentColor }, style)
-    },
-    onResizeStart && /* @__PURE__ */ import_react14.default.createElement(
-      "div",
-      {
-        onMouseDown: onResizeStart,
-        className: "absolute top-0 left-0 w-6 h-6 cursor-nw-resize z-[100] group flex items-start justify-start p-1",
-        title: "Drag to resize"
-      },
-      /* @__PURE__ */ import_react14.default.createElement("div", { className: "w-2.5 h-2.5 border-t-2 border-l-2 border-slate-300 dark:border-white/20 group-hover:border-slate-500 dark:group-hover:border-white/50 transition-colors rounded-tl-[2px]" })
-    ),
-    /* @__PURE__ */ import_react14.default.createElement(
-      "div",
-      {
-        className: "flex items-center justify-between px-5 py-4 border-b border-slate-200 dark:border-white/10",
-        style: { background: `linear-gradient(135deg, ${ui.primaryColor}15, ${ui.accentColor}10)` }
-      },
-      /* @__PURE__ */ import_react14.default.createElement("div", { className: "flex items-center gap-3" }, ui.logoUrl ? (
-        // eslint-disable-next-line @next/next/no-img-element
-        /* @__PURE__ */ import_react14.default.createElement("img", { src: ui.logoUrl, alt: "logo", className: "w-8 h-8 rounded-lg object-cover" })
-      ) : /* @__PURE__ */ import_react14.default.createElement(
-        "div",
-        {
-          className: `w-9 h-9 flex items-center justify-center shadow-md ${ui.borderRadius === "full" ? "rounded-full" : "rounded-xl"}`,
-          style: { background: `linear-gradient(135deg, ${ui.primaryColor}, ${ui.accentColor})` }
-        },
-        /* @__PURE__ */ import_react14.default.createElement(import_lucide_react7.Bot, { className: "w-5 h-5 text-white" })
-      ), /* @__PURE__ */ import_react14.default.createElement("div", null, /* @__PURE__ */ import_react14.default.createElement("h2", { className: "text-slate-900 dark:text-white font-semibold text-sm leading-tight" }, ui.title), ui.poweredBy && /* @__PURE__ */ import_react14.default.createElement("p", { className: "text-slate-500 dark:text-white/40 text-[11px] leading-tight" }, `Powered by ${ui.poweredBy}`))),
-      /* @__PURE__ */ import_react14.default.createElement("div", { className: "flex items-center gap-1.5" }, /* @__PURE__ */ import_react14.default.createElement("span", { className: "flex items-center gap-1 text-[10px] text-emerald-500 dark:text-emerald-400 mr-2" }, /* @__PURE__ */ import_react14.default.createElement("span", { className: "w-1.5 h-1.5 rounded-full bg-emerald-500 dark:bg-emerald-400 animate-pulse" }), "Online"), /* @__PURE__ */ import_react14.default.createElement("div", { className: "flex items-center bg-slate-100/50 dark:bg-white/5 rounded-lg p-0.5 border border-slate-200/50 dark:border-white/5" }, mounted && messages.length > 0 && /* @__PURE__ */ import_react14.default.createElement(
-        "button",
-        {
-          onClick: clearHistory,
-          title: "Clear conversation",
-          className: "w-7 h-7 rounded-md flex items-center justify-center text-slate-400 hover:text-rose-500 dark:text-white/40 dark:hover:text-rose-400 hover:bg-white dark:hover:bg-white/10 transition-all cursor-pointer"
-        },
-        /* @__PURE__ */ import_react14.default.createElement(import_lucide_react7.Trash2, { className: "w-3.5 h-3.5" })
-      ), isResized && onResetResize && /* @__PURE__ */ import_react14.default.createElement(
-        "button",
-        {
-          onClick: onResetResize,
-          title: "Reset to default size",
-          className: "w-7 h-7 rounded-md flex items-center justify-center text-slate-400 hover:text-blue-500 dark:text-white/40 dark:hover:text-blue-400 hover:bg-white dark:hover:bg-white/10 transition-all cursor-pointer"
-        },
-        /* @__PURE__ */ import_react14.default.createElement(import_lucide_react7.RotateCcw, { className: "w-3.5 h-3.5" })
-      ), onMaximize && /* @__PURE__ */ import_react14.default.createElement(
-        "button",
-        {
-          onClick: onMaximize,
-          title: isMaximized ? "Minimize" : "Maximize",
-          className: "w-7 h-7 rounded-md flex items-center justify-center text-slate-400 hover:text-blue-500 dark:text-white/40 dark:hover:text-blue-400 hover:bg-white dark:hover:bg-white/10 transition-all cursor-pointer"
-        },
-        isMaximized ? /* @__PURE__ */ import_react14.default.createElement(import_lucide_react7.Minimize2, { className: "w-3.5 h-3.5" }) : /* @__PURE__ */ import_react14.default.createElement(import_lucide_react7.Maximize2, { className: "w-3.5 h-3.5" })
-      ), showClose && onClose && /* @__PURE__ */ import_react14.default.createElement(
-        "button",
-        {
-          onClick: onClose,
-          title: "Close chat",
-          className: "w-7 h-7 rounded-md flex items-center justify-center text-slate-400 hover:text-slate-600 dark:text-white/40 dark:hover:text-white/70 hover:bg-white dark:hover:bg-white/10 transition-all cursor-pointer"
-        },
-        /* @__PURE__ */ import_react14.default.createElement(import_lucide_react7.X, { className: "w-4 h-4" })
-      )))
-    ),
-    /* @__PURE__ */ import_react14.default.createElement("div", { className: "flex-1 overflow-y-auto px-4 py-4 space-y-5 scrollbar-thin scrollbar-thumb-slate-200 dark:scrollbar-thumb-white/10 scrollbar-track-transparent min-h-0 bg-slate-50 dark:bg-transparent" }, !mounted || isEmpty ? (
-      /* Welcome state */
-      /* @__PURE__ */ import_react14.default.createElement("div", { className: "h-full flex flex-col items-center justify-center text-center gap-4 px-6 py-12" }, /* @__PURE__ */ import_react14.default.createElement(
-        "div",
-        {
-          className: `w-16 h-16 flex items-center justify-center shadow-lg ${ui.borderRadius === "full" ? "rounded-full" : "rounded-2xl"}`,
-          style: { background: `linear-gradient(135deg, ${ui.primaryColor}, ${ui.accentColor})` }
-        },
-        /* @__PURE__ */ import_react14.default.createElement(import_lucide_react7.Sparkles, { className: "w-8 h-8 text-white" })
-      ), /* @__PURE__ */ import_react14.default.createElement("div", null, /* @__PURE__ */ import_react14.default.createElement("p", { className: "text-slate-800 dark:text-white/80 font-medium leading-relaxed" }, ui.welcomeMessage), /* @__PURE__ */ import_react14.default.createElement("p", { className: "text-slate-500 dark:text-white/30 text-sm mt-2" }, "Ask a question to get started")), /* @__PURE__ */ import_react14.default.createElement("div", { className: "flex flex-wrap gap-2 justify-center mt-2" }, CHAT_SUGGESTIONS.map(
-        (suggestion) => /* @__PURE__ */ import_react14.default.createElement(
-          "button",
+      style: __spreadValues({ "--primary": ui.primaryColor, "--accent": ui.accentColor }, style),
+      children: [
+        onResizeStart && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+          "div",
           {
-            key: suggestion,
-            onClick: () => {
-              var _a2;
-              setInput(suggestion);
-              (_a2 = inputRef.current) == null ? void 0 : _a2.focus();
-            },
-            className: "px-3 py-1.5 rounded-full text-xs border border-slate-200 dark:border-white/10 text-slate-600 dark:text-white/50 hover:text-slate-900 dark:hover:text-white/80 hover:border-slate-300 dark:hover:border-white/20 hover:bg-slate-100 dark:hover:bg-white/5 transition-all"
-          },
-          suggestion
-        )
-      )))
-    ) : messages.map((msg, index) => /* @__PURE__ */ import_react14.default.createElement(
-      MessageBubble,
-      {
-        key: msg.id,
-        message: msg,
-        sources: msg.sources,
-        isStreaming: isLoading && index === messages.length - 1 && msg.role === "assistant",
-        primaryColor: ui.primaryColor,
-        accentColor: ui.accentColor,
-        onAddToCart,
-        viewportSize
-      }
-    )), isLoading && ((_a = messages[messages.length - 1]) == null ? void 0 : _a.role) !== "assistant" && /* @__PURE__ */ import_react14.default.createElement(
-      MessageBubble,
-      {
-        message: { id: "loading", role: "assistant", content: "", createdAt: (/* @__PURE__ */ new Date()).toISOString() },
-        isStreaming: true,
-        primaryColor: ui.primaryColor,
-        accentColor: ui.accentColor,
-        onAddToCart,
-        viewportSize
-      }
-    ), error && /* @__PURE__ */ import_react14.default.createElement("div", { className: "flex items-center gap-2 text-rose-500 dark:text-rose-400 text-sm bg-rose-50 dark:bg-rose-400/10 border border-rose-200 dark:border-rose-400/20 rounded-xl px-4 py-3" }, /* @__PURE__ */ import_react14.default.createElement(import_lucide_react7.TriangleAlert, { className: "w-4 h-4 flex-shrink-0" }), /* @__PURE__ */ import_react14.default.createElement("span", null, error)), /* @__PURE__ */ import_react14.default.createElement("div", { ref: bottomRef })),
-    isUploadModalOpen && /* @__PURE__ */ import_react14.default.createElement("div", { className: "absolute inset-0 z-50 flex items-center justify-center p-4 bg-slate-900/50 backdrop-blur-sm rounded-inherit" }, /* @__PURE__ */ import_react14.default.createElement("div", { className: "relative w-full max-w-md bg-white dark:bg-[#0f0f1a] rounded-2xl shadow-2xl overflow-hidden animate-in zoom-in-95 duration-200" }, /* @__PURE__ */ import_react14.default.createElement(
-      "button",
-      {
-        onClick: () => setIsUploadModalOpen(false),
-        className: "absolute top-4 right-4 p-1.5 rounded-lg text-slate-400 hover:text-slate-600 hover:bg-slate-100 dark:hover:text-white/80 dark:hover:bg-white/10 transition-colors z-10"
-      },
-      /* @__PURE__ */ import_react14.default.createElement(import_lucide_react7.X, { className: "w-5 h-5" })
-    ), /* @__PURE__ */ import_react14.default.createElement(
-      DocumentUpload,
-      {
-        namespace: projectId,
-        onUploadComplete: () => setIsUploadModalOpen(false)
-      }
-    ))),
-    /* @__PURE__ */ import_react14.default.createElement("div", { className: `px-4 pb-4 pt-2 border-t border-slate-200 dark:border-white/10 ${isGlass ? "bg-transparent" : "bg-white dark:bg-[#0f0f1a]"}` }, (suggestions.length > 0 || isSuggesting) && !isLoading && /* @__PURE__ */ import_react14.default.createElement("div", { className: "mb-3 flex flex-wrap gap-2 animate-in fade-in slide-in-from-bottom-2 duration-300" }, suggestions.map((suggestion) => /* @__PURE__ */ import_react14.default.createElement(
-      "button",
-      {
-        key: suggestion,
-        onClick: () => {
-          var _a2;
-          setInput(suggestion);
-          setSuggestions([]);
-          (_a2 = inputRef.current) == null ? void 0 : _a2.focus();
-        },
-        className: "flex items-center gap-1.5 px-3 py-1.5 rounded-xl text-[11px] font-medium bg-white dark:bg-white/5 border border-slate-200 dark:border-white/10 text-slate-600 dark:text-white/60 hover:text-slate-900 dark:hover:text-white/90 hover:border-slate-300 dark:hover:border-white/20 transition-all shadow-sm cursor-pointer group"
-      },
-      /* @__PURE__ */ import_react14.default.createElement(import_lucide_react7.Sparkles, { className: "w-3 h-3 text-amber-400" }),
-      suggestion
-    )), isSuggesting && suggestions.length === 0 && /* @__PURE__ */ import_react14.default.createElement("div", { className: "flex items-center gap-1.5 px-3 py-1.5 rounded-xl text-[11px] font-medium text-slate-400 dark:text-white/30 animate-pulse" }, /* @__PURE__ */ import_react14.default.createElement(import_lucide_react7.Sparkles, { className: "w-3 h-3" }), "Thinking...")), /* @__PURE__ */ import_react14.default.createElement("div", { className: `flex items-end gap-2 bg-slate-50 dark:bg-white/5 border border-slate-200 dark:border-white/10 p-2 focus-within:border-slate-300 dark:focus-within:border-white/20 transition-all ${ui.borderRadius === "full" ? "rounded-3xl" : "rounded-2xl"}` }, /* @__PURE__ */ import_react14.default.createElement(
-      "textarea",
-      {
-        ref: inputRef,
-        value: input,
-        onChange: (e) => {
-          const val = e.target.value;
-          setInput(val);
-          if (val.trim().length < 3) {
-            setSuggestions([]);
+            onMouseDown: onResizeStart,
+            className: "absolute top-0 left-0 w-6 h-6 cursor-nw-resize z-[100] group flex items-start justify-start p-1",
+            title: "Drag to resize",
+            children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "w-2.5 h-2.5 border-t-2 border-l-2 border-slate-300 dark:border-white/20 group-hover:border-slate-500 dark:group-hover:border-white/50 transition-colors rounded-tl-[2px]" })
           }
-        },
-        onKeyDown: handleKeyDown,
-        placeholder: ui.placeholder,
-        rows: 1,
-        disabled: isLoading,
-        className: "flex-1 bg-transparent text-slate-900 dark:text-white/90 placeholder-slate-400 dark:placeholder-white/30 text-sm resize-none outline-none py-1.5 px-2 max-h-32 leading-relaxed disabled:opacity-50",
-        style: { scrollbarWidth: "none" }
-      }
-    ), ui.enableVoiceInput !== false && /* @__PURE__ */ import_react14.default.createElement(
-      "button",
-      {
-        type: "button",
-        onClick: toggleListening,
-        disabled: isLoading,
-        className: `flex-shrink-0 w-9 h-9 rounded-xl flex items-center justify-center transition-all hover:scale-105 active:scale-95 disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:scale-100 disabled:active:scale-100 ${isListening ? "bg-rose-500 text-white animate-pulse shadow-md shadow-rose-500/20" : "text-slate-400 dark:text-white/40 hover:bg-slate-200 dark:hover:bg-white/10"}`,
-        title: isListening ? "Stop listening" : "Start voice input"
-      },
-      isListening ? /* @__PURE__ */ import_react14.default.createElement(import_lucide_react7.MicOff, { className: "w-4 h-4" }) : /* @__PURE__ */ import_react14.default.createElement(import_lucide_react7.Mic, { className: "w-4 h-4" })
-    ), ui.allowUpload !== false && /* @__PURE__ */ import_react14.default.createElement(
-      "button",
-      {
-        type: "button",
-        onClick: () => setIsUploadModalOpen(true),
-        className: "flex-shrink-0 w-9 h-9 rounded-xl flex items-center justify-center transition-all hover:scale-105 active:scale-95 text-slate-400 dark:text-white/40 hover:bg-slate-200 dark:hover:bg-white/10",
-        title: "Upload Document"
-      },
-      /* @__PURE__ */ import_react14.default.createElement(import_lucide_react7.Paperclip, { className: "w-4 h-4" })
-    ), /* @__PURE__ */ import_react14.default.createElement(
-      "button",
-      {
-        onClick: sendMessage,
-        disabled: !input.trim() || isLoading,
-        className: "flex-shrink-0 w-9 h-9 rounded-xl flex items-center justify-center transition-all disabled:opacity-30 disabled:cursor-not-allowed hover:scale-105 active:scale-95 shadow-md",
-        style: {
-          background: input.trim() && !isLoading ? `linear-gradient(135deg, ${ui.primaryColor}, ${ui.accentColor})` : "rgba(148, 163, 184, 0.2)"
-          // slate-400/20 for light mode disabled
-        }
-      },
-      /* @__PURE__ */ import_react14.default.createElement(import_lucide_react7.ArrowUp, { className: "w-4 h-4 text-white" })
-    )), /* @__PURE__ */ import_react14.default.createElement("p", { className: "text-center text-[10px] text-slate-400 dark:text-white/20 mt-2" }, "Press Enter to send \xB7 Shift+Enter for new line"))
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+          "div",
+          {
+            className: "flex items-center justify-between px-5 py-4 border-b border-slate-200 dark:border-white/10",
+            style: { background: `linear-gradient(135deg, ${ui.primaryColor}15, ${ui.accentColor}10)` },
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "flex items-center gap-3", children: [
+                ui.logoUrl ? (
+                  // eslint-disable-next-line @next/next/no-img-element
+                  /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("img", { src: ui.logoUrl, alt: "logo", className: "w-8 h-8 rounded-lg object-cover" })
+                ) : /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+                  "div",
+                  {
+                    className: `w-9 h-9 flex items-center justify-center shadow-md ${ui.borderRadius === "full" ? "rounded-full" : "rounded-xl"}`,
+                    style: { background: `linear-gradient(135deg, ${ui.primaryColor}, ${ui.accentColor})` },
+                    children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_lucide_react7.Bot, { className: "w-5 h-5 text-white" })
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("h2", { className: "text-slate-900 dark:text-white font-semibold text-sm leading-tight", children: ui.title }),
+                  ui.poweredBy && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("p", { className: "text-slate-500 dark:text-white/40 text-[11px] leading-tight", children: `Powered by ${ui.poweredBy}` })
+                ] })
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "flex items-center gap-1.5", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("span", { className: "flex items-center gap-1 text-[10px] text-emerald-500 dark:text-emerald-400 mr-2", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "w-1.5 h-1.5 rounded-full bg-emerald-500 dark:bg-emerald-400 animate-pulse" }),
+                  "Online"
+                ] }),
+                /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "flex items-center bg-slate-100/50 dark:bg-white/5 rounded-lg p-0.5 border border-slate-200/50 dark:border-white/5", children: [
+                  mounted && messages.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+                    "button",
+                    {
+                      onClick: clearHistory,
+                      title: "Clear conversation",
+                      className: "w-7 h-7 rounded-md flex items-center justify-center text-slate-400 hover:text-rose-500 dark:text-white/40 dark:hover:text-rose-400 hover:bg-white dark:hover:bg-white/10 transition-all cursor-pointer",
+                      children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_lucide_react7.Trash2, { className: "w-3.5 h-3.5" })
+                    }
+                  ),
+                  isResized && onResetResize && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+                    "button",
+                    {
+                      onClick: onResetResize,
+                      title: "Reset to default size",
+                      className: "w-7 h-7 rounded-md flex items-center justify-center text-slate-400 hover:text-blue-500 dark:text-white/40 dark:hover:text-blue-400 hover:bg-white dark:hover:bg-white/10 transition-all cursor-pointer",
+                      children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_lucide_react7.RotateCcw, { className: "w-3.5 h-3.5" })
+                    }
+                  ),
+                  onMaximize && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+                    "button",
+                    {
+                      onClick: onMaximize,
+                      title: isMaximized ? "Minimize" : "Maximize",
+                      className: "w-7 h-7 rounded-md flex items-center justify-center text-slate-400 hover:text-blue-500 dark:text-white/40 dark:hover:text-blue-400 hover:bg-white dark:hover:bg-white/10 transition-all cursor-pointer",
+                      children: isMaximized ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_lucide_react7.Minimize2, { className: "w-3.5 h-3.5" }) : /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_lucide_react7.Maximize2, { className: "w-3.5 h-3.5" })
+                    }
+                  ),
+                  showClose && onClose && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+                    "button",
+                    {
+                      onClick: onClose,
+                      title: "Close chat",
+                      className: "w-7 h-7 rounded-md flex items-center justify-center text-slate-400 hover:text-slate-600 dark:text-white/40 dark:hover:text-white/70 hover:bg-white dark:hover:bg-white/10 transition-all cursor-pointer",
+                      children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_lucide_react7.X, { className: "w-4 h-4" })
+                    }
+                  )
+                ] })
+              ] })
+            ]
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "flex-1 overflow-y-auto px-4 py-4 space-y-5 scrollbar-thin scrollbar-thumb-slate-200 dark:scrollbar-thumb-white/10 scrollbar-track-transparent min-h-0 bg-slate-50 dark:bg-transparent", children: [
+          !mounted || isEmpty ? (
+            /* Welcome state */
+            /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "h-full flex flex-col items-center justify-center text-center gap-4 px-6 py-12", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+                "div",
+                {
+                  className: `w-16 h-16 flex items-center justify-center shadow-lg ${ui.borderRadius === "full" ? "rounded-full" : "rounded-2xl"}`,
+                  style: { background: `linear-gradient(135deg, ${ui.primaryColor}, ${ui.accentColor})` },
+                  children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_lucide_react7.Sparkles, { className: "w-8 h-8 text-white" })
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("p", { className: "text-slate-800 dark:text-white/80 font-medium leading-relaxed", children: ui.welcomeMessage }),
+                /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("p", { className: "text-slate-500 dark:text-white/30 text-sm mt-2", children: "Ask a question to get started" })
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "flex flex-wrap gap-2 justify-center mt-2", children: CHAT_SUGGESTIONS.map(
+                (suggestion) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+                  "button",
+                  {
+                    onClick: () => {
+                      var _a2;
+                      setInput(suggestion);
+                      (_a2 = inputRef.current) == null ? void 0 : _a2.focus();
+                    },
+                    className: "px-3 py-1.5 rounded-full text-xs border border-slate-200 dark:border-white/10 text-slate-600 dark:text-white/50 hover:text-slate-900 dark:hover:text-white/80 hover:border-slate-300 dark:hover:border-white/20 hover:bg-slate-100 dark:hover:bg-white/5 transition-all",
+                    children: suggestion
+                  },
+                  suggestion
+                )
+              ) })
+            ] })
+          ) : messages.map((msg, index) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+            MessageBubble,
+            {
+              message: msg,
+              sources: msg.sources,
+              isStreaming: isLoading && index === messages.length - 1 && msg.role === "assistant",
+              primaryColor: ui.primaryColor,
+              accentColor: ui.accentColor,
+              onAddToCart,
+              viewportSize
+            },
+            msg.id
+          )),
+          isLoading && ((_a = messages[messages.length - 1]) == null ? void 0 : _a.role) !== "assistant" && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+            MessageBubble,
+            {
+              message: { id: "loading", role: "assistant", content: "", createdAt: (/* @__PURE__ */ new Date()).toISOString() },
+              isStreaming: true,
+              primaryColor: ui.primaryColor,
+              accentColor: ui.accentColor,
+              onAddToCart,
+              viewportSize
+            }
+          ),
+          error && /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "flex items-center gap-2 text-rose-500 dark:text-rose-400 text-sm bg-rose-50 dark:bg-rose-400/10 border border-rose-200 dark:border-rose-400/20 rounded-xl px-4 py-3", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_lucide_react7.TriangleAlert, { className: "w-4 h-4 flex-shrink-0" }),
+            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { children: error })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { ref: bottomRef })
+        ] }),
+        isUploadModalOpen && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "absolute inset-0 z-50 flex items-center justify-center p-4 bg-slate-900/50 backdrop-blur-sm rounded-inherit", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "relative w-full max-w-md bg-white dark:bg-[#0f0f1a] rounded-2xl shadow-2xl overflow-hidden animate-in zoom-in-95 duration-200", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+            "button",
+            {
+              onClick: () => setIsUploadModalOpen(false),
+              className: "absolute top-4 right-4 p-1.5 rounded-lg text-slate-400 hover:text-slate-600 hover:bg-slate-100 dark:hover:text-white/80 dark:hover:bg-white/10 transition-colors z-10",
+              children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_lucide_react7.X, { className: "w-5 h-5" })
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+            DocumentUpload,
+            {
+              namespace: projectId,
+              onUploadComplete: () => setIsUploadModalOpen(false)
+            }
+          )
+        ] }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: `px-4 pb-4 pt-2 border-t border-slate-200 dark:border-white/10 ${isGlass ? "bg-transparent" : "bg-white dark:bg-[#0f0f1a]"}`, children: [
+          (suggestions.length > 0 || isSuggesting) && !isLoading && /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "mb-3 flex flex-wrap gap-2 animate-in fade-in slide-in-from-bottom-2 duration-300", children: [
+            suggestions.map((suggestion) => /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+              "button",
+              {
+                onClick: () => {
+                  var _a2;
+                  setInput(suggestion);
+                  setSuggestions([]);
+                  (_a2 = inputRef.current) == null ? void 0 : _a2.focus();
+                },
+                className: "flex items-center gap-1.5 px-3 py-1.5 rounded-xl text-[11px] font-medium bg-white dark:bg-white/5 border border-slate-200 dark:border-white/10 text-slate-600 dark:text-white/60 hover:text-slate-900 dark:hover:text-white/90 hover:border-slate-300 dark:hover:border-white/20 transition-all shadow-sm cursor-pointer group",
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_lucide_react7.Sparkles, { className: "w-3 h-3 text-amber-400" }),
+                  suggestion
+                ]
+              },
+              suggestion
+            )),
+            isSuggesting && suggestions.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "flex items-center gap-1.5 px-3 py-1.5 rounded-xl text-[11px] font-medium text-slate-400 dark:text-white/30 animate-pulse", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_lucide_react7.Sparkles, { className: "w-3 h-3" }),
+              "Thinking..."
+            ] })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: `flex items-end gap-2 bg-slate-50 dark:bg-white/5 border border-slate-200 dark:border-white/10 p-2 focus-within:border-slate-300 dark:focus-within:border-white/20 transition-all ${ui.borderRadius === "full" ? "rounded-3xl" : "rounded-2xl"}`, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+              "textarea",
+              {
+                ref: inputRef,
+                value: input,
+                onChange: (e) => {
+                  const val = e.target.value;
+                  setInput(val);
+                  if (val.trim().length < 3) {
+                    setSuggestions([]);
+                  }
+                },
+                onKeyDown: handleKeyDown,
+                placeholder: ui.placeholder,
+                rows: 1,
+                disabled: isLoading,
+                className: "flex-1 bg-transparent text-slate-900 dark:text-white/90 placeholder-slate-400 dark:placeholder-white/30 text-sm resize-none outline-none py-1.5 px-2 max-h-32 leading-relaxed disabled:opacity-50",
+                style: { scrollbarWidth: "none" }
+              }
+            ),
+            ui.enableVoiceInput !== false && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+              "button",
+              {
+                type: "button",
+                onClick: toggleListening,
+                disabled: isLoading,
+                className: `flex-shrink-0 w-9 h-9 rounded-xl flex items-center justify-center transition-all hover:scale-105 active:scale-95 disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:scale-100 disabled:active:scale-100 ${isListening ? "bg-rose-500 text-white animate-pulse shadow-md shadow-rose-500/20" : "text-slate-400 dark:text-white/40 hover:bg-slate-200 dark:hover:bg-white/10"}`,
+                title: isListening ? "Stop listening" : "Start voice input",
+                children: isListening ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_lucide_react7.MicOff, { className: "w-4 h-4" }) : /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_lucide_react7.Mic, { className: "w-4 h-4" })
+              }
+            ),
+            ui.allowUpload !== false && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+              "button",
+              {
+                type: "button",
+                onClick: () => setIsUploadModalOpen(true),
+                className: "flex-shrink-0 w-9 h-9 rounded-xl flex items-center justify-center transition-all hover:scale-105 active:scale-95 text-slate-400 dark:text-white/40 hover:bg-slate-200 dark:hover:bg-white/10",
+                title: "Upload Document",
+                children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_lucide_react7.Paperclip, { className: "w-4 h-4" })
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+              "button",
+              {
+                onClick: sendMessage,
+                disabled: !input.trim() || isLoading,
+                className: "flex-shrink-0 w-9 h-9 rounded-xl flex items-center justify-center transition-all disabled:opacity-30 disabled:cursor-not-allowed hover:scale-105 active:scale-95 shadow-md",
+                style: {
+                  background: input.trim() && !isLoading ? `linear-gradient(135deg, ${ui.primaryColor}, ${ui.accentColor})` : "rgba(148, 163, 184, 0.2)"
+                  // slate-400/20 for light mode disabled
+                },
+                children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_lucide_react7.ArrowUp, { className: "w-4 h-4 text-white" })
+              }
+            )
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("p", { className: "text-center text-[10px] text-slate-400 dark:text-white/20 mt-2", children: "Press Enter to send \xB7 Shift+Enter for new line" })
+        ] })
+      ]
+    }
   );
 }
 
 // src/components/ChatWidget.tsx
+var import_jsx_runtime14 = require("react/jsx-runtime");
 var DEFAULT_DIMENSIONS = { width: 380, height: 600 };
 function ChatWidget({ position = "bottom-right", onAddToCart }) {
   const { ui } = useConfig();
-  const [isOpen, setIsOpen] = (0, import_react15.useState)(false);
-  const [hasUnread, setHasUnread] = (0, import_react15.useState)(false);
-  const [dimensions, setDimensions] = (0, import_react15.useState)(DEFAULT_DIMENSIONS);
-  const [isResizing, setIsResizing] = (0, import_react15.useState)(false);
-  const [isMaximized, setIsMaximized] = (0, import_react15.useState)(false);
-  const [prevDimensions, setPrevDimensions] = (0, import_react15.useState)(DEFAULT_DIMENSIONS);
+  const [isOpen, setIsOpen] = (0, import_react12.useState)(false);
+  const [hasUnread, setHasUnread] = (0, import_react12.useState)(false);
+  const [dimensions, setDimensions] = (0, import_react12.useState)(DEFAULT_DIMENSIONS);
+  const [isResizing, setIsResizing] = (0, import_react12.useState)(false);
+  const [isMaximized, setIsMaximized] = (0, import_react12.useState)(false);
+  const [prevDimensions, setPrevDimensions] = (0, import_react12.useState)(DEFAULT_DIMENSIONS);
   if (ui.showWidget === false) return null;
   const positionClass = position === "bottom-left" ? "bottom-6 left-6" : "bottom-6 right-6";
   const windowPositionClass = position === "bottom-left" ? "bottom-20 left-6" : "bottom-20 right-6";
   const handleOpen = () => {
-    console.log("ChatWidget: Opening...");
     setIsOpen(true);
     setHasUnread(false);
   };
@@ -2508,60 +2937,67 @@ function ChatWidget({ position = "bottom-right", onAddToCart }) {
     }
   };
   const isResized = dimensions.width !== DEFAULT_DIMENSIONS.width || dimensions.height !== DEFAULT_DIMENSIONS.height;
-  return /* @__PURE__ */ import_react15.default.createElement(import_react15.default.Fragment, null, /* @__PURE__ */ import_react15.default.createElement(
-    "div",
-    {
-      className: `fixed z-[9998] max-w-[calc(100vw-3rem)] ease-in-out ${windowPositionClass} ${isOpen ? "opacity-100 translate-y-0 pointer-events-auto" : "opacity-0 translate-y-4 pointer-events-none"} ${isResizing ? "" : "transition-all duration-300"}`,
-      style: {
-        width: `${dimensions.width}px`,
-        height: `${dimensions.height}px`,
-        maxHeight: "calc(100vh - 6rem)"
-      }
-    },
-    /* @__PURE__ */ import_react15.default.createElement(
-      ChatWindow,
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_jsx_runtime14.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
+      "div",
       {
-        className: "h-full relative z-10",
-        showClose: true,
-        onClose: () => setIsOpen(false),
-        onResizeStart: ui.allowResize !== false ? handleResizeStart : void 0,
-        onResetResize: ui.allowResize !== false ? handleResetResize : void 0,
-        isResized,
-        onMaximize: ui.allowResize !== false ? handleMaximize : void 0,
-        isMaximized,
-        onAddToCart
+        className: `fixed z-[9998] max-w-[calc(100vw-3rem)] ease-in-out ${windowPositionClass} ${isOpen ? "opacity-100 translate-y-0 pointer-events-auto" : "opacity-0 translate-y-4 pointer-events-none"} ${isResizing ? "" : "transition-all duration-300"}`,
+        style: {
+          width: `${dimensions.width}px`,
+          height: `${dimensions.height}px`,
+          maxHeight: "calc(100vh - 6rem)"
+        },
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+            ChatWindow,
+            {
+              className: "h-full relative z-10",
+              showClose: true,
+              onClose: () => setIsOpen(false),
+              onResizeStart: ui.allowResize !== false ? handleResizeStart : void 0,
+              onResetResize: ui.allowResize !== false ? handleResetResize : void 0,
+              isResized,
+              onMaximize: ui.allowResize !== false ? handleMaximize : void 0,
+              isMaximized,
+              onAddToCart
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+            "div",
+            {
+              className: `absolute -bottom-1.5 w-4 h-4 rotate-45 border-r border-b border-slate-200 dark:border-white/10 z-0 ${ui.visualStyle === "solid" ? "bg-white dark:bg-[#0f0f1a]" : "bg-white/90 dark:bg-[#0f0f1a]/90 backdrop-blur-xl"} ${position === "bottom-left" ? "left-5" : "right-5"}`
+            }
+          )
+        ]
       }
     ),
-    /* @__PURE__ */ import_react15.default.createElement(
-      "div",
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
+      "button",
       {
-        className: `absolute -bottom-1.5 w-4 h-4 rotate-45 border-r border-b border-slate-200 dark:border-white/10 z-0 ${ui.visualStyle === "solid" ? "bg-white dark:bg-[#0f0f1a]" : "bg-white/90 dark:bg-[#0f0f1a]/90 backdrop-blur-xl"} ${position === "bottom-left" ? "left-5" : "right-5"}`
+        onClick: isOpen ? () => setIsOpen(false) : handleOpen,
+        className: `fixed z-[9999] w-14 h-14 shadow-2xl flex items-center justify-center transition-all duration-300 cursor-pointer hover:scale-110 active:scale-95 ${ui.borderRadius === "full" ? "rounded-full" : "rounded-2xl"} ${positionClass}`,
+        style: { background: `linear-gradient(135deg, ${ui.primaryColor}, ${ui.accentColor})` },
+        "aria-label": "Open chat",
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+            "span",
+            {
+              className: "absolute inset-0 rounded-full animate-ping opacity-20",
+              style: { background: ui.primaryColor }
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+            "span",
+            {
+              className: `transition-transform duration-300 ${isOpen ? "rotate-90 scale-90" : "rotate-0 scale-100"}`,
+              children: isOpen ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_lucide_react8.X, { className: "w-6 h-6 text-white" }) : /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_lucide_react8.MessageSquare, { className: "w-6 h-6 text-white" })
+            }
+          ),
+          hasUnread && !isOpen && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "absolute top-0 right-0 w-4 h-4 bg-rose-500 rounded-full border-2 border-white flex items-center justify-center text-[9px] font-bold text-white", children: "1" })
+        ]
       }
     )
-  ), /* @__PURE__ */ import_react15.default.createElement(
-    "button",
-    {
-      onClick: isOpen ? () => setIsOpen(false) : handleOpen,
-      className: `fixed z-[9999] w-14 h-14 shadow-2xl flex items-center justify-center transition-all duration-300 cursor-pointer hover:scale-110 active:scale-95 ${ui.borderRadius === "full" ? "rounded-full" : "rounded-2xl"} ${positionClass}`,
-      style: { background: `linear-gradient(135deg, ${ui.primaryColor}, ${ui.accentColor})` },
-      "aria-label": "Open chat"
-    },
-    /* @__PURE__ */ import_react15.default.createElement(
-      "span",
-      {
-        className: "absolute inset-0 rounded-full animate-ping opacity-20",
-        style: { background: ui.primaryColor }
-      }
-    ),
-    /* @__PURE__ */ import_react15.default.createElement(
-      "span",
-      {
-        className: `transition-transform duration-300 ${isOpen ? "rotate-90 scale-90" : "rotate-0 scale-100"}`
-      },
-      isOpen ? /* @__PURE__ */ import_react15.default.createElement(import_lucide_react8.X, { className: "w-6 h-6 text-white" }) : /* @__PURE__ */ import_react15.default.createElement(import_lucide_react8.MessageSquare, { className: "w-6 h-6 text-white" })
-    ),
-    hasUnread && !isOpen && /* @__PURE__ */ import_react15.default.createElement("span", { className: "absolute top-0 right-0 w-4 h-4 bg-rose-500 rounded-full border-2 border-white flex items-center justify-center text-[9px] font-bold text-white" }, "1")
-  ));
+  ] });
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {