@retrivora-ai/rag-engine 1.8.1 → 1.8.3

package/dist/index.js

@@ -64,92 +64,391 @@ __export(index_exports, {
   ConfigProvider: () => ConfigProvider,
   DocumentUpload: () => DocumentUpload,
   MessageBubble: () => MessageBubble,
+  ObservabilityPanel: () => ObservabilityPanel,
   SourceCard: () => SourceCard,
+  addSynonyms: () => addSynonyms,
   useConfig: () => useConfig,
   useRagChat: () => useRagChat
 });
 module.exports = __toCommonJS(index_exports);
 
 // src/components/ChatWidget.tsx
-var import_react10 = __toESM(require("react"));
-var import_lucide_react6 = require("lucide-react");
+var import_react12 = require("react");
+var import_lucide_react8 = require("lucide-react");
 
 // src/components/ChatWindow.tsx
-var import_react9 = __toESM(require("react"));
-var import_lucide_react5 = require("lucide-react");
+var import_react11 = require("react");
+var import_lucide_react7 = require("lucide-react");
+
+// src/components/DocumentUpload.tsx
+var import_react2 = require("react");
+var import_lucide_react = require("lucide-react");
+
+// src/components/ConfigProvider.tsx
+var import_react = require("react");
+
+// src/utils/templateUtils.ts
+function mergeDefined(base, override) {
+  const merged = __spreadValues({}, base || {});
+  if (!override) {
+    return merged;
+  }
+  for (const [key, value] of Object.entries(override)) {
+    if (value !== void 0 && value !== null && value !== "") {
+      merged[key] = value;
+    }
+  }
+  return merged;
+}
+
+// src/config/uiConstants.ts
+var DEFAULT_CONFIG = {
+  projectId: "default",
+  ui: {
+    title: "AI Assistant",
+    subtitle: "Powered by RAG",
+    primaryColor: "#6366f1",
+    accentColor: "#8b5cf6",
+    logoUrl: "",
+    placeholder: "Ask me anything\u2026",
+    showSources: true,
+    welcomeMessage: "Hello! I'm your AI assistant. Ask me anything about your documents.",
+    showWidget: true,
+    poweredBy: "RAG",
+    visualStyle: "glass",
+    borderRadius: "xl",
+    allowUpload: true,
+    allowResize: true,
+    enableVoiceInput: true
+  }
+};
+var BORDER_RADIUS_MAP = {
+  none: "rounded-none",
+  sm: "rounded-sm",
+  md: "rounded-md",
+  lg: "rounded-lg",
+  xl: "rounded-xl",
+  full: "rounded-3xl"
+};
+var CHAT_SUGGESTIONS = [
+  "What can you help me with?",
+  "Summarise the key topics",
+  "Show me an example"
+];
+
+// src/components/ConfigProvider.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var ConfigContext = (0, import_react.createContext)(DEFAULT_CONFIG);
+function ConfigProvider({
+  config,
+  children
+}) {
+  const merged = {
+    projectId: (config == null ? void 0 : config.projectId) || DEFAULT_CONFIG.projectId,
+    ui: mergeDefined(DEFAULT_CONFIG.ui, config == null ? void 0 : config.ui),
+    embedding: config == null ? void 0 : config.embedding
+  };
+  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();
+  const [fileStates, setFileStates] = (0, import_react2.useState)([]);
+  const [isDragging, setIsDragging] = (0, import_react2.useState)(false);
+  const fileInputRef = (0, import_react2.useRef)(null);
+  const MULTI_DIMENSION_MODELS = {
+    "text-embedding-3-small": [512, 1536],
+    "text-embedding-3-large": [256, 1024, 3072],
+    "nomic-embed-text": [64, 128, 256, 512, 768]
+  };
+  const COMMON_DIMENSIONS = [64, 128, 256, 384, 512, 768, 1024, 1536, 3072];
+  const currentModel = (embedding == null ? void 0 : embedding.model) || "unknown";
+  const defaultDimension = (embedding == null ? void 0 : embedding.dimensions) || 1536;
+  let availableDimensions = (_a = Object.entries(MULTI_DIMENSION_MODELS).find(([k]) => currentModel.includes(k))) == null ? void 0 : _a[1];
+  if (!availableDimensions) {
+    availableDimensions = COMMON_DIMENSIONS.includes(defaultDimension) ? COMMON_DIMENSIONS : [...COMMON_DIMENSIONS, defaultDimension].sort((a, b) => a - b);
+  }
+  const isChangeable = true;
+  const [dimension, setDimension] = (0, import_react2.useState)(defaultDimension);
+  const addFiles = (files) => {
+    const newStates = files.map((file) => ({ file, status: "idle" }));
+    setFileStates((prev) => [...prev, ...newStates]);
+  };
+  const removeFile = (index) => {
+    setFileStates((prev) => prev.filter((_, i) => i !== index));
+  };
+  const onDragOver = (e) => {
+    e.preventDefault();
+    setIsDragging(true);
+  };
+  const onDragLeave = () => {
+    setIsDragging(false);
+  };
+  const onDrop = (e) => {
+    e.preventDefault();
+    setIsDragging(false);
+    if (e.dataTransfer.files) {
+      addFiles(Array.from(e.dataTransfer.files));
+    }
+  };
+  const onFileSelect = (e) => {
+    if (e.target.files) {
+      addFiles(Array.from(e.target.files));
+    }
+  };
+  const uploadFiles = async () => {
+    const idleFiles = fileStates.filter((s) => s.status === "idle");
+    if (idleFiles.length === 0) return;
+    setFileStates((prev) => prev.map((s) => s.status === "idle" ? __spreadProps(__spreadValues({}, s), { status: "uploading" }) : s));
+    const formData = new FormData();
+    idleFiles.forEach((s) => formData.append("files", s.file));
+    if (namespace) formData.append("namespace", namespace);
+    formData.append("dimension", dimension.toString());
+    try {
+      const response = await fetch("/api/upload", {
+        method: "POST",
+        body: formData
+      });
+      const result = await response.json();
+      if (!response.ok) throw new Error(result.error || "Upload failed");
+      setFileStates((prev) => prev.map((s) => s.status === "uploading" ? __spreadProps(__spreadValues({}, s), { status: "success" }) : s));
+      if (onUploadComplete) onUploadComplete(result);
+    } catch (err) {
+      const message = err instanceof Error ? err.message : "Upload failed";
+      setFileStates((prev) => prev.map((s) => s.status === "uploading" ? __spreadProps(__spreadValues({}, s), { status: "error", error: message }) : s));
+    }
+  };
+  const isUploading = fileStates.some((s) => s.status === "uploading");
+  const hasIdle = fileStates.some((s) => s.status === "idle");
+  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,
+      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_react6 = __toESM(require("react"));
-var import_lucide_react4 = require("lucide-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_react = __toESM(require("react"));
-var import_lucide_react = require("lucide-react");
+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_react.default.useState(false);
+  const [expanded, setExpanded] = import_react3.default.useState(false);
   const scorePercent = Math.round(source.score * 100);
   const scoreColor = source.score >= 0.8 ? "text-emerald-400" : source.score >= 0.6 ? "text-amber-400" : "text-rose-400";
   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_react.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_react.default.createElement("div", { className: "flex items-start justify-between gap-2" }, /* @__PURE__ */ import_react.default.createElement("div", { className: "flex items-center gap-2 min-w-0" }, /* @__PURE__ */ import_react.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_react.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_react.default.createElement("span", { className: `flex-shrink-0 text-xs font-semibold ${scoreColor} tabular-nums` }, scorePercent, "%")),
-    /* @__PURE__ */ import_react.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_react.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_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement(import_lucide_react.ChevronUp, { className: "w-3 h-3" }), " Show less") : /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement(import_lucide_react.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_react3 = __toESM(require("react"));
-var import_lucide_react3 = require("lucide-react");
+var import_react4 = require("react");
+var import_lucide_react4 = require("lucide-react");
 
 // src/components/ProductCard.tsx
-var import_react2 = __toESM(require("react"));
 var import_image = __toESM(require("next/image"));
-var import_lucide_react2 = require("lucide-react");
+var import_lucide_react3 = require("lucide-react");
+var import_jsx_runtime4 = require("react/jsx-runtime");
 function ProductCard({ product, primaryColor = "#6366f1", onAddToCart }) {
-  return /* @__PURE__ */ import_react2.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_react2.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_react2.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_react2.default.createElement("div", { className: "text-slate-400 dark:text-white/20" }, /* @__PURE__ */ import_react2.default.createElement(import_lucide_react2.ShoppingCart, { className: "w-12 h-12" })), product.brand && /* @__PURE__ */ import_react2.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_react2.default.createElement("div", { className: "p-4 flex flex-col gap-2" }, /* @__PURE__ */ import_react2.default.createElement("div", { className: "flex justify-between items-start gap-2" }, /* @__PURE__ */ import_react2.default.createElement("h3", { className: "text-sm font-semibold text-slate-800 dark:text-white/90 line-clamp-1" }, product.name), product.price && /* @__PURE__ */ import_react2.default.createElement("span", { className: "text-sm font-bold", style: { color: primaryColor } }, typeof product.price === "number" ? `$${product.price}` : product.price)), product.description && /* @__PURE__ */ import_react2.default.createElement("p", { className: "text-[11px] text-slate-500 dark:text-white/50 line-clamp-2 leading-relaxed" }, product.description), /* @__PURE__ */ import_react2.default.createElement("div", { className: "mt-2 flex gap-2" }, /* @__PURE__ */ import_react2.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_react2.default.createElement(import_lucide_react2.ShoppingCart, { className: "w-3 h-3" }),
-    "Add to Cart"
-  ), product.link && /* @__PURE__ */ import_react2.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_react2.default.createElement(import_lucide_react2.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_react3.useRef)(null);
-  const [canScroll, setCanScroll] = (0, import_react3.useState)(false);
-  (0, import_react3.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;
@@ -173,63 +472,74 @@ function ProductCarousel({ products, primaryColor = "#6366f1", onAddToCart }) {
   };
   if (!products || products.length === 0) return null;
   if (products.length === 1) {
-    return /* @__PURE__ */ import_react3.default.createElement("div", { className: "my-4 w-[min(88%,18rem)] min-w-0 max-w-full animate-fade-in-up" }, /* @__PURE__ */ import_react3.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_react3.default.createElement("div", { className: "relative w-full my-4 group/carousel animate-fade-in-up" }, canScroll && /* @__PURE__ */ import_react3.default.createElement(import_react3.default.Fragment, null, /* @__PURE__ */ import_react3.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_react3.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_react3.default.createElement(import_lucide_react3.ChevronLeft, { className: "w-5 h-5" })
-  )), /* @__PURE__ */ import_react3.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_react3.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_react3.default.createElement(import_lucide_react3.ChevronRight, { className: "w-5 h-5" })
-  ))), /* @__PURE__ */ import_react3.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_react3.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_react3.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_recharts2 = require("recharts");
+
 // src/components/DynamicChart.tsx
-var import_react4 = __toESM(require("react"));
+var import_react5 = __toESM(require("react"));
 var import_recharts = require("recharts");
-var DEFAULT_COLORS = ["#6366f1", "#10b981", "#f59e0b", "#ef4444", "#8b5cf6", "#ec4899"];
+var import_jsx_runtime6 = require("react/jsx-runtime");
+var CHART_COLORS = ["#6366f1", "#10b981", "#f59e0b", "#ef4444", "#8b5cf6", "#ec4899"];
 function DynamicChart({
   config,
   primaryColor = "#6366f1",
   accentColor = "#8b5cf6",
-  viewportSize = "large"
+  viewportSize = "large",
+  isStreaming = false
 }) {
   const { type, data } = config;
-  const colors = config.colors || [primaryColor, accentColor, ...DEFAULT_COLORS];
-  const containerRef = import_react4.default.useRef(null);
-  const [containerWidth, setContainerWidth] = import_react4.default.useState(0);
-  import_react4.default.useEffect(() => {
+  const colors = config.colors || [primaryColor, accentColor, ...CHART_COLORS];
+  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) => {
@@ -255,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_react4.default.useMemo(() => {
+  const sanitizedData = import_react5.default.useMemo(() => {
     if (!data) return [];
     return data.map((item) => {
       const newItem = {};
@@ -287,8 +597,19 @@ function DynamicChart({
       return newItem;
     });
   }, [data]);
+  if (isStreaming) {
+    const bars = type === "pie" ? 6 : 5;
+    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",
+      {
+        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_react4.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);
@@ -313,14 +634,20 @@ function DynamicChart({
   const renderTooltip = (row, label) => {
     var _a, _b;
     if (!row) return null;
-    return /* @__PURE__ */ import_react4.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_react4.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_react4.default.createElement("div", { key, className: "flex items-center justify-between gap-3 text-slate-600 dark:text-white/70" }, /* @__PURE__ */ import_react4.default.createElement("span", null, (_a2 = tooltipLabelMap[key]) != null ? _a2 : key), /* @__PURE__ */ import_react4.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;
@@ -331,65 +658,64 @@ function DynamicChart({
     return row;
   };
   if (type === "pie") {
-    return /* @__PURE__ */ import_react4.default.createElement("div", { ref: containerRef, className: "w-full min-w-0 mt-4 mb-2 select-none overflow-hidden" }, /* @__PURE__ */ import_react4.default.createElement("div", { className: "mx-auto w-full max-w-full aspect-square" }, /* @__PURE__ */ import_react4.default.createElement(import_recharts.ResponsiveContainer, { width: "100%", height: "100%" }, /* @__PURE__ */ import_react4.default.createElement(import_recharts.PieChart, null, /* @__PURE__ */ import_react4.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_react4.default.createElement(import_recharts.Cell, { key: `cell-${index}`, fill: colors[index % colors.length] }))
-    ), /* @__PURE__ */ import_react4.default.createElement(import_recharts.Tooltip, { content: (props) => renderTooltip(getTooltipRow(props.payload), typeof props.label === "string" ? props.label : void 0) }), showLegend && !isCompact && /* @__PURE__ */ import_react4.default.createElement(import_recharts.Legend, { wrapperStyle: { fontSize: 12 }, verticalAlign: "bottom" })))));
-  }
-  return /* @__PURE__ */ import_react4.default.createElement("div", { ref: containerRef, className: "w-full min-w-0 mt-4 mb-2 select-none overflow-hidden" }, /* @__PURE__ */ import_react4.default.createElement("div", { className: "w-full aspect-[4/3]" }, /* @__PURE__ */ import_react4.default.createElement(import_recharts.ResponsiveContainer, { width: "100%", height: "100%" }, type === "bar" ? /* @__PURE__ */ import_react4.default.createElement(import_recharts.BarChart, { data: sanitizedData, margin: chartMargin }, /* @__PURE__ */ import_react4.default.createElement(import_recharts.CartesianGrid, { strokeDasharray: "3 3", vertical: false, stroke: "#e2e8f0" }), /* @__PURE__ */ import_react4.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_react4.default.createElement(import_recharts.YAxis, { tick: axisTick, tickLine: false, axisLine: false }), /* @__PURE__ */ import_react4.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_react4.default.createElement(import_recharts.Legend, { wrapperStyle: { fontSize: isCompact ? 10 : 12 } }), finalDataKeys.map((key, index) => /* @__PURE__ */ import_react4.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_react4.default.createElement(import_recharts.LineChart, { data: sanitizedData, margin: chartMargin }, /* @__PURE__ */ import_react4.default.createElement(import_recharts.CartesianGrid, { strokeDasharray: "3 3", vertical: false, stroke: "#e2e8f0" }), /* @__PURE__ */ import_react4.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_react4.default.createElement(import_recharts.YAxis, { tick: axisTick, tickLine: false, axisLine: false }), /* @__PURE__ */ import_react4.default.createElement(import_recharts.Tooltip, { content: (props) => renderTooltip(getTooltipRow(props.payload), typeof props.label === "string" ? props.label : void 0) }), showLegend && /* @__PURE__ */ import_react4.default.createElement(import_recharts.Legend, { wrapperStyle: { fontSize: isCompact ? 10 : 12 } }), finalDataKeys.map((key, index) => /* @__PURE__ */ import_react4.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_react5 = __toESM(require("react"));
-var import_recharts2 = require("recharts");
-var CHART_COLORS = [
-  "#6366f1",
-  // indigo
-  "#10b981",
-  // emerald
-  "#f59e0b",
-  // amber
-  "#ef4444",
-  // red
-  "#8b5cf6",
-  // purple
-  "#ec4899",
-  // pink
-  "#06b6d4",
-  // cyan
-  "#f97316"
-  // orange
-];
+var import_jsx_runtime7 = require("react/jsx-runtime");
 function getColor(index) {
   return CHART_COLORS[index % CHART_COLORS.length];
 }
@@ -399,77 +725,112 @@ function CustomTooltip({
   label
 }) {
   if (!active || !payload || payload.length === 0) return null;
-  return /* @__PURE__ */ import_react5.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_react5.default.createElement("p", { className: "mb-2 font-semibold text-slate-800 dark:text-white/90" }, label), payload.map((entry, i) => /* @__PURE__ */ import_react5.default.createElement("div", { key: i, className: "flex items-center justify-between gap-3 text-slate-600 dark:text-white/70" }, /* @__PURE__ */ import_react5.default.createElement("span", { className: "flex items-center gap-1.5" }, entry.color && /* @__PURE__ */ import_react5.default.createElement(
-    "span",
-    {
-      className: "inline-block w-2 h-2 rounded-full flex-shrink-0",
-      style: { background: entry.color }
-    }
-  ), entry.name), /* @__PURE__ */ import_react5.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,
   className = "",
   primaryColor,
-  onAddToCart
+  onAddToCart,
+  isStreaming
 }) {
   var _a;
   if (!data) {
-    return /* @__PURE__ */ import_react5.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_react5.default.createElement("div", { className: `space-y-4 ${className}` }, /* @__PURE__ */ import_react5.default.createElement("div", { className: "space-y-1" }, /* @__PURE__ */ import_react5.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_react5.default.createElement("p", { className: "text-xs text-slate-500 dark:text-slate-400" }, data.description)), renderVisualization(data.type, data.data, onAddToCart, primaryColor));
+  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) {
+function renderVisualization(type, data, onAddToCart, primaryColor, isStreaming) {
   try {
     switch (type) {
       case "pie_chart":
-        return /* @__PURE__ */ import_react5.default.createElement(PieChartView, { data });
+        return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(PieChartView, { data, isStreaming });
       case "bar_chart":
-        return /* @__PURE__ */ import_react5.default.createElement(BarChartView, { data, primaryColor });
+        return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(BarChartView, { data, primaryColor, isStreaming });
       case "line_chart":
-        return /* @__PURE__ */ import_react5.default.createElement(LineChartView, { data, primaryColor });
+        return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(LineChartView, { data, primaryColor, isStreaming });
       case "radar_chart":
-        return /* @__PURE__ */ import_react5.default.createElement(RadarChartView, { data });
+        return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(RadarChartView, { data, isStreaming });
       case "table":
-        return /* @__PURE__ */ import_react5.default.createElement(TableView, { data });
+        return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(TableView, { data, isStreaming });
       case "product_carousel":
       case "carousel":
-        return /* @__PURE__ */ import_react5.default.createElement(CarouselView, { data, onAddToCart, primaryColor });
+        return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(CarouselView, { data, onAddToCart, primaryColor });
       case "text":
       default:
-        return /* @__PURE__ */ import_react5.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_react5.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__ */ (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__ */ (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__ */ (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 }) {
+function PieChartView({ data, isStreaming }) {
+  if (isStreaming) return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ChartSkeleton, { type: "pie" });
   if (!Array.isArray(data) || data.length === 0) {
-    return /* @__PURE__ */ import_react5.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_react5.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_react5.default.createElement(import_recharts2.ResponsiveContainer, { width: "100%", height: 280 }, /* @__PURE__ */ import_react5.default.createElement(import_recharts2.PieChart, null, /* @__PURE__ */ import_react5.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_react5.default.createElement(import_recharts2.Cell, { key: `cell-${index}`, fill: getColor(index) }))
-  ), /* @__PURE__ */ import_react5.default.createElement(import_recharts2.Tooltip, { content: /* @__PURE__ */ import_react5.default.createElement(CustomTooltip, null) }), /* @__PURE__ */ import_react5.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 }) {
+function BarChartView({ data, primaryColor, isStreaming }) {
+  if (isStreaming) return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ChartSkeleton, { type: "bar" });
   if (!Array.isArray(data) || data.length === 0) {
-    return /* @__PURE__ */ import_react5.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,
@@ -477,19 +838,30 @@ function BarChartView({ data, primaryColor }) {
   }, 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_react5.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_react5.default.createElement(import_recharts2.ResponsiveContainer, { width: "100%", height: 260 }, /* @__PURE__ */ import_react5.default.createElement(import_recharts2.BarChart, { data: chartData, margin: { top: 10, right: 10, left: -20, bottom: 0 } }, /* @__PURE__ */ import_react5.default.createElement(import_recharts2.CartesianGrid, { strokeDasharray: "3 3", vertical: false, stroke: "#e2e8f0" }), /* @__PURE__ */ import_react5.default.createElement(
-    import_recharts2.XAxis,
-    {
-      dataKey: "category",
-      tick: { fontSize: 11, fill: "#64748b" },
-      tickLine: false,
-      axisLine: { stroke: "#cbd5e1" }
-    }
-  ), /* @__PURE__ */ import_react5.default.createElement(import_recharts2.YAxis, { tick: { fontSize: 11, fill: "#64748b" }, tickLine: false, axisLine: false }), /* @__PURE__ */ import_react5.default.createElement(import_recharts2.Tooltip, { content: /* @__PURE__ */ import_react5.default.createElement(CustomTooltip, null), cursor: { fill: "#f1f5f9" } }), /* @__PURE__ */ import_react5.default.createElement(import_recharts2.Legend, { wrapperStyle: { fontSize: 12 } }), hasStock ? /* @__PURE__ */ import_react5.default.createElement(import_react5.default.Fragment, null, /* @__PURE__ */ import_react5.default.createElement(import_recharts2.Bar, { dataKey: "inStockCount", name: "In Stock", fill: getColor(1), radius: [4, 4, 0, 0] }), /* @__PURE__ */ import_react5.default.createElement(import_recharts2.Bar, { dataKey: "outOfStockCount", name: "Out of Stock", fill: getColor(3), radius: [4, 4, 0, 0] })) : /* @__PURE__ */ import_react5.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 }) {
+function LineChartView({ data, primaryColor, isStreaming }) {
+  if (isStreaming) return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ChartSkeleton, { type: "bar" });
   if (!Array.isArray(data) || data.length === 0) {
-    return /* @__PURE__ */ import_react5.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;
@@ -499,72 +871,97 @@ function LineChartView({ data, primaryColor }) {
     };
   });
   const lineColor = primaryColor != null ? primaryColor : getColor(0);
-  return /* @__PURE__ */ import_react5.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_react5.default.createElement(import_recharts2.ResponsiveContainer, { width: "100%", height: 260 }, /* @__PURE__ */ import_react5.default.createElement(import_recharts2.LineChart, { data: chartData, margin: { top: 10, right: 10, left: -20, bottom: 0 } }, /* @__PURE__ */ import_react5.default.createElement(import_recharts2.CartesianGrid, { strokeDasharray: "3 3", vertical: false, stroke: "#e2e8f0" }), /* @__PURE__ */ import_react5.default.createElement(
-    import_recharts2.XAxis,
-    {
-      dataKey: "label",
-      tick: { fontSize: 11, fill: "#64748b" },
-      tickLine: false,
-      axisLine: { stroke: "#cbd5e1" }
-    }
-  ), /* @__PURE__ */ import_react5.default.createElement(import_recharts2.YAxis, { tick: { fontSize: 11, fill: "#64748b" }, tickLine: false, axisLine: false }), /* @__PURE__ */ import_react5.default.createElement(import_recharts2.Tooltip, { content: /* @__PURE__ */ import_react5.default.createElement(CustomTooltip, null) }), /* @__PURE__ */ import_react5.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 }
-    }
-  ))));
-}
-function RadarChartView({ data }) {
-  if (!Array.isArray(data) || data.length === 0) {
-    return /* @__PURE__ */ import_react5.default.createElement("div", { className: "text-xs text-red-500" }, "Invalid radar chart data");
-  }
-  const productNames = Array.from(
+  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__ */ (0, import_jsx_runtime7.jsx)(ChartSkeleton, { type: "pie" });
+  if (!Array.isArray(data) || data.length === 0) {
+    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_react5.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_react5.default.createElement(import_recharts2.ResponsiveContainer, { width: "100%", height: 300 }, /* @__PURE__ */ import_react5.default.createElement(import_recharts2.RadarChart, { cx: "50%", cy: "50%", outerRadius: "80%", data }, /* @__PURE__ */ import_react5.default.createElement(import_recharts2.PolarGrid, { stroke: "#e2e8f0" }), /* @__PURE__ */ import_react5.default.createElement(import_recharts2.PolarAngleAxis, { dataKey: "attribute", tick: { fontSize: 11, fill: "#64748b" } }), /* @__PURE__ */ import_react5.default.createElement(import_recharts2.PolarRadiusAxis, { tick: { fontSize: 10, fill: "#64748b" } }), productNames.map((productName, index) => /* @__PURE__ */ import_react5.default.createElement(
-    import_recharts2.Radar,
-    {
-      key: productName,
-      name: productName,
-      dataKey: productName,
-      stroke: getColor(index),
-      fill: getColor(index),
-      fillOpacity: 0.4
-    }
-  )), /* @__PURE__ */ import_react5.default.createElement(import_recharts2.Tooltip, { content: /* @__PURE__ */ import_react5.default.createElement(CustomTooltip, null) }), /* @__PURE__ */ import_react5.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 }) {
+function TableView({ data, isStreaming }) {
+  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_react5.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_react5.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_react5.default.createElement("div", { className: "overflow-x-auto" }, /* @__PURE__ */ import_react5.default.createElement("table", { className: "w-full text-sm border-collapse" }, /* @__PURE__ */ import_react5.default.createElement("thead", { className: "bg-slate-50 dark:bg-white/5 border-b border-slate-200 dark:border-white/10" }, /* @__PURE__ */ import_react5.default.createElement("tr", null, data.columns.map((col, idx) => /* @__PURE__ */ import_react5.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_react5.default.createElement("tbody", { className: "divide-y divide-slate-100 dark:divide-white/5" }, data.rows.map((row, rowIdx) => /* @__PURE__ */ import_react5.default.createElement(
-    "tr",
-    {
-      key: rowIdx,
-      className: "hover:bg-slate-50/60 dark:hover:bg-white/5 transition-colors"
-    },
-    row.map((cell, cellIdx) => /* @__PURE__ */ import_react5.default.createElement(
-      "td",
-      {
-        key: cellIdx,
-        className: "px-4 py-3 text-slate-600 dark:text-white/70 text-sm"
-      },
-      String(cell)
-    ))
-  ))))), /* @__PURE__ */ import_react5.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_react5.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,
@@ -572,7 +969,7 @@ function CarouselView({
   primaryColor
 }) {
   if (!Array.isArray(data)) {
-    return /* @__PURE__ */ import_react5.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,
@@ -584,21 +981,498 @@ function CarouselView({
     description: product.description,
     inStock: product.inStock
   }));
-  return /* @__PURE__ */ import_react5.default.createElement("div", { className: "w-full" }, /* @__PURE__ */ import_react5.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_react5.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_react5.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/MessageBubble.tsx
+// src/components/ObservabilityPanel.tsx
+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`;
+}
+function fmtTokens(n) {
+  return n >= 1e3 ? `${(n / 1e3).toFixed(1)}k` : String(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__ */ (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__ */ (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: "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;
+  const bars = [
+    { label: "Embed", ms: latency.embedMs, color: "#6366f1" },
+    { label: "Retrieve", ms: latency.retrieveMs, color: "#10b981" },
+    ...latency.rerankMs != null ? [{ label: "Rerank", ms: latency.rerankMs, color: "#f59e0b" }] : [],
+    { label: "Generate", ms: latency.generateMs, color: "#8b5cf6" }
+  ];
+  const maxMs = Math.max(...bars.map((b) => b.ms), 1);
+  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__ */ (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__ */ (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__ */ (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__ */ (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_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_react6.default.useState(/* @__PURE__ */ new Set());
+  const toggle = (i) => setExpanded((prev) => {
+    const next = new Set(prev);
+    if (next.has(i)) {
+      next.delete(i);
+    } else {
+      next.add(i);
+    }
+    return next;
+  });
+  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__ */ (0, import_jsx_runtime8.jsxs)(
+      "div",
+      {
+        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) })
+            ] })
+          ] })
+        ]
+      },
+      String(chunk.id)
+    );
+  }) });
+}
+var TABS = [
+  { 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_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: "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__ */ (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_jsx_runtime9 = require("react/jsx-runtime");
+var HourglassLoader = ({
+  size = 16,
+  primaryColor = "#10b981",
+  glow = false
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: "0 0 100 100",
+      preserveAspectRatio: "xMidYMid",
+      style: {
+        width: size,
+        height: size,
+        background: "transparent",
+        filter: glow ? `drop-shadow(0 0 4px ${primaryColor})` : "none"
+      },
+      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;
+
+// src/utils/synonyms.ts
+var FIELD_SYNONYMS = {
+  name: ["product", "item", "title", "label", "heading", "subject", "product name", "item name"],
+  price: ["cost", "amount", "msrp", "price", "rate", "value", "price_usd"],
+  brand: ["manufacturer", "vendor", "make", "company", "brand_name", "supplier"],
+  image: [
+    "imageUrl",
+    "thumbnail",
+    "img",
+    "url",
+    "photo",
+    "picture",
+    "media",
+    "image_url",
+    "main_image",
+    "product_image",
+    "thumb"
+  ],
+  stock: [
+    "inventory",
+    "quantity",
+    "count",
+    "availability",
+    "stock_level",
+    "inStock",
+    "is_available",
+    "in stock",
+    "status"
+  ],
+  description: ["summary", "content", "body", "text", "info", "details"],
+  link: ["url", "href", "product_url", "page_url", "link"]
+};
+function addSynonyms(customSynonyms) {
+  for (const [key, aliases] of Object.entries(customSynonyms)) {
+    if (!FIELD_SYNONYMS[key]) {
+      FIELD_SYNONYMS[key] = [];
+    }
+    const existing = new Set(FIELD_SYNONYMS[key].map((s) => s.toLowerCase()));
+    for (const alias of aliases) {
+      if (!existing.has(alias.toLowerCase())) {
+        FIELD_SYNONYMS[key].push(alias);
+        existing.add(alias.toLowerCase());
+      }
+    }
+  }
+}
+function resolveMetadataValue(meta, uiKey) {
+  var _a;
+  const synonyms = (_a = FIELD_SYNONYMS[uiKey]) != null ? _a : [];
+  const keys = Object.keys(meta);
+  const systemKeys = ["namespace", "filename", "filesize", "filetype", "docid", "uploadedat", "dimension", "chunkindex"];
+  let match = keys.find((k) => k.toLowerCase() === uiKey.toLowerCase());
+  if (match !== void 0) return meta[match];
+  match = keys.find((k) => synonyms.map((s) => s.toLowerCase()).includes(k.toLowerCase()));
+  if (match !== void 0) return meta[match];
+  const isBlacklisted = (kl) => {
+    return systemKeys.includes(kl) || kl.startsWith("option1") || kl.startsWith("option2") || kl.startsWith("option3");
+  };
+  match = keys.find((k) => {
+    const kl = k.toLowerCase();
+    if (isBlacklisted(kl)) return false;
+    return kl.includes(uiKey.toLowerCase());
+  });
+  if (match !== void 0) return meta[match];
+  match = keys.find((k) => {
+    const kl = k.toLowerCase();
+    if (isBlacklisted(kl)) return false;
+    return synonyms.some((sk) => kl.includes(sk.toLowerCase()) || sk.toLowerCase().includes(kl));
+  });
+  return match !== void 0 ? meta[match] : void 0;
+}
+
+// src/utils/ProductExtractor.ts
 function sanitizeJson(raw) {
   let s = raw.trim();
   s = s.replace(
@@ -615,36 +1489,34 @@ function sanitizeJson(raw) {
   s = s.replace(/'([^'\\]*(?:\\.[^'\\]*)*)'/g, '"$1"');
   s = s.replace(/,\s*([}\]])/g, "$1");
   s = s.replace(/([{,])\s*""\s*(?=[,}])/g, "$1");
-  {
-    const stack = [];
-    let inString = false;
-    let escape = false;
-    for (const ch of s) {
-      if (escape) {
-        escape = false;
-        continue;
-      }
-      if (ch === "\\" && inString) {
-        escape = true;
-        continue;
-      }
-      if (ch === '"') {
-        inString = !inString;
-        continue;
-      }
-      if (inString) continue;
-      if (ch === "{" || ch === "[") {
-        stack.push(ch);
-      } else if (ch === "}") {
-        if (stack[stack.length - 1] === "{") stack.pop();
-      } else if (ch === "]") {
-        if (stack[stack.length - 1] === "[") stack.pop();
-      }
+  const stack = [];
+  let inString = false;
+  let escape = false;
+  for (const ch of s) {
+    if (escape) {
+      escape = false;
+      continue;
+    }
+    if (ch === "\\" && inString) {
+      escape = true;
+      continue;
     }
-    if (inString) s += '"';
-    for (let i = stack.length - 1; i >= 0; i--) {
-      s += stack[i] === "{" ? "}" : "]";
+    if (ch === '"') {
+      inString = !inString;
+      continue;
     }
+    if (inString) continue;
+    if (ch === "{" || ch === "[") {
+      stack.push(ch);
+    } else if (ch === "}") {
+      if (stack[stack.length - 1] === "{") stack.pop();
+    } else if (ch === "]") {
+      if (stack[stack.length - 1] === "[") stack.pop();
+    }
+  }
+  if (inString) s += '"';
+  for (let i = stack.length - 1; i >= 0; i--) {
+    s += stack[i] === "{" ? "}" : "]";
   }
   const lastClose = Math.max(s.lastIndexOf("}"), s.lastIndexOf("]"));
   if (lastClose !== -1 && lastClose < s.length - 1 && /\S/.test(s.slice(lastClose + 1))) {
@@ -745,10 +1617,6 @@ function extractStructuredPayload(raw) {
     text: stripStructuredUiLabels(raw).replace(/\n{3,}/g, "\n\n").trim()
   };
 }
-function isLikelyUiOnlyMessage(text) {
-  const trimmed = text.trim();
-  return trimmed.length === 0 || trimmed.length < 30 || /^(chart data|table data|visualization|visual representation|product catalog|product recommendations|catalog summary|availability|inventory status|details)\s*:?\s*$/i.test(trimmed);
-}
 function resolveImage(data) {
   const isPlaceholder = (val) => typeof val === "string" && (val === "..." || val === "" || val.toLowerCase() === "null" || val.toLowerCase() === "undefined");
   for (const key of ["image", "img", "thumbnail", "images", "product_image", "Image", "Thumbnail"]) {
@@ -758,92 +1626,140 @@ function resolveImage(data) {
   }
   return void 0;
 }
-function getMetadataValue(meta, keys) {
-  const searchKeys = keys.map((k) => k.toLowerCase());
-  const metaKeys = Object.keys(meta);
-  const foundKey = metaKeys.find((k) => searchKeys.includes(k.toLowerCase()));
-  if (foundKey) return meta[foundKey];
-  const partialKey = metaKeys.find((k) => {
-    const kLow = k.toLowerCase();
-    return searchKeys.some((sk) => kLow.includes(sk) || sk.includes(kLow));
-  });
-  return partialKey ? meta[partialKey] : void 0;
-}
-function normaliseChild(children) {
-  if (typeof children === "object" && children !== null && !Array.isArray(children) && !import_react6.default.isValidElement(children)) {
-    return JSON.stringify(children);
-  }
-  return children;
-}
-function normaliseFieldName(value) {
-  return value.toLowerCase().replace(/[^a-z0-9]/g, "");
-}
-function formatColumnLabel(value) {
-  return value.replace(/([a-z0-9])([A-Z])/g, "$1 $2").replace(/[_-]+/g, " ").replace(/\s+/g, " ").trim().replace(/\b\w/g, (char) => char.toUpperCase());
+function isLikelyUiOnlyMessage(text) {
+  const trimmed = text.trim();
+  return trimmed.length === 0 || trimmed.length < 30 || /^(chart data|table data|visualization|visual representation|product catalog|product recommendations|catalog summary|availability|inventory status|details)\s*:?\s*$/i.test(trimmed);
 }
-function DataTable({ config, viewportSize = "large" }) {
-  const isCompact = viewportSize === "compact";
-  const isMedium = viewportSize === "medium";
-  const columns = import_react6.default.useMemo(() => {
-    const rowKeys = Array.from(
-      new Set(
-        config.data.flatMap((row) => Object.keys(row))
-      )
+function extractProductsFromSources(sources, isUser) {
+  if (isUser || !sources) return [];
+  return sources.filter((s) => {
+    var _a;
+    const m = (_a = s.metadata) != null ? _a : {};
+    const keys = Object.keys(m).map((k) => k.toLowerCase());
+    const hasProductKey = keys.some(
+      (k) => ["price", "image", "img", "thumbnail", "images", "brand", "product", "sku", "category", "model", "cost"].includes(k)
     );
-    const findAccessor = (label) => {
-      const exact = rowKeys.find((key) => key === label);
-      if (exact) return exact;
-      const normalisedLabel = normaliseFieldName(label);
-      const normalisedMatch = rowKeys.find((key) => normaliseFieldName(key) === normalisedLabel);
-      if (normalisedMatch) return normalisedMatch;
-      return label;
+    const hasPricePattern = /\$\s*\d+/.test(s.content);
+    return hasProductKey || hasPricePattern || m.type === "product";
+  }).map((s) => {
+    var _a, _b;
+    const m = (_a = s.metadata) != null ? _a : {};
+    const name = resolveMetadataValue(m, "name");
+    const brand = resolveMetadataValue(m, "brand");
+    const price = resolveMetadataValue(m, "price");
+    const description = resolveMetadataValue(m, "description");
+    return {
+      id: s.id,
+      name: (_b = name != null ? name : s.content.split("\n")[0]) != null ? _b : "Unknown Product",
+      brand,
+      price,
+      image: resolveImage(m),
+      link: resolveMetadataValue(m, "link"),
+      description: description ? description : ""
+      //description ?? s.content,
     };
-    if (Array.isArray(config.columns) && config.columns.length) {
-      return config.columns.map((label) => ({
-        label: formatColumnLabel(label),
-        accessor: findAccessor(label)
-      }));
+  });
+}
+function extractProductsFromContent(content, payloadText, payloadCandidates, productsFromSources, isStreaming = false) {
+  var _a, _b;
+  const jsonRegex = /```(?:json|ui)?\s*([\s\S]*?)\s*```/g;
+  const products = [];
+  let cleanContent = payloadText;
+  for (const candidate of payloadCandidates) {
+    try {
+      const data = JSON.parse(sanitizeJson(candidate));
+      const itemSet = Array.isArray(data.data) ? data.data : Array.isArray(data.items) ? data.items : Array.isArray(data.products) ? data.products : null;
+      if ((data.type === "products" || data.view === "carousel" || data.view === "table" || Array.isArray(data.products)) && itemSet) {
+        products.push(
+          ...itemSet.map((item) => {
+            var _a2;
+            return __spreadProps(__spreadValues({}, item), {
+              image: (_a2 = item.image) != null ? _a2 : resolveImage(item)
+            });
+          })
+        );
+      }
+    } catch (e) {
+    }
+  }
+  if (cleanContent.includes('"type": "products"') || cleanContent.includes('"type":"products"')) {
+    for (const match of Array.from(cleanContent.matchAll(jsonRegex))) {
+      try {
+        const data = JSON.parse(sanitizeJson(match[1]));
+        if (data.type === "products" && Array.isArray(data.items)) {
+          products.push(
+            ...data.items.map((item) => {
+              var _a2;
+              return __spreadProps(__spreadValues({}, item), {
+                image: (_a2 = item.image) != null ? _a2 : resolveImage(item)
+              });
+            })
+          );
+          cleanContent = cleanContent.replace(match[0], "");
+        }
+      } catch (e) {
+      }
     }
-    if (Array.isArray(config.dataKeys) && config.dataKeys.length) {
-      const keys = config.xAxisKey && !config.dataKeys.includes(config.xAxisKey) ? [config.xAxisKey, ...config.dataKeys] : config.dataKeys;
-      return keys.map((key) => ({
-        label: formatColumnLabel(key),
-        accessor: findAccessor(key)
-      }));
+  }
+  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 (!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()) || "";
+      name = name.replace(/\s*\(?Price\s*$/i, "").replace(/[:\-–—]\s*$/g, "").trim();
+      name = name.replace(/^\*\*|\*\*$/g, "").replace(/^\*|\*$/g, "").trim();
+      let price = ((_b = match[2]) == null ? void 0 : _b.trim()) || "";
+      price = price.replace(/[,\s]+$/, "").trim();
+      if (name && price) {
+        const newProduct = {
+          id: `text-prod-${name}-${price}`,
+          name,
+          price: `$${price}`
+        };
+        const normName = normalize(name);
+        const sourceMatch = productsFromSources.find((s) => {
+          const sn = normalize(s.name);
+          return sn.includes(normName) || normName.includes(sn);
+        });
+        if (sourceMatch) {
+          newProduct.image = sourceMatch.image;
+          newProduct.brand = sourceMatch.brand;
+          newProduct.link = sourceMatch.link;
+          newProduct.description = sourceMatch.description;
+        }
+        products.push(newProduct);
+        cleanContent = cleanContent.replace(match[0], `
+**${name}** \u2014 $${price}`);
+      }
     }
-    return rowKeys.map((key) => ({ label: formatColumnLabel(key), accessor: key }));
-  }, [config]);
-  if (!config.data.length || !columns.length) {
-    return /* @__PURE__ */ import_react6.default.createElement("p", { className: "text-xs text-slate-400 italic my-2" }, "No data to display.");
+    cleanContent = cleanContent.replace(/\n{3,}/g, "\n\n").trim();
   }
-  const formatCell = (val) => {
-    if (val === null || val === void 0) return "\u2014";
-    if (typeof val === "boolean") return val ? "\u2713" : "\u2717";
-    return String(val);
-  };
-  return /* @__PURE__ */ import_react6.default.createElement("div", { className: "my-4 rounded-xl border border-slate-200 dark:border-white/10 shadow-sm overflow-hidden" }, config.title && /* @__PURE__ */ import_react6.default.createElement("div", { className: "px-4 py-2.5 bg-slate-50 dark:bg-white/5 border-b border-slate-200 dark:border-white/10" }, /* @__PURE__ */ import_react6.default.createElement("p", { className: "text-xs font-semibold text-slate-600 dark:text-white/70 uppercase tracking-wide" }, config.title)), /* @__PURE__ */ import_react6.default.createElement("div", { className: "overflow-x-auto" }, /* @__PURE__ */ import_react6.default.createElement("table", { className: `w-full text-left border-collapse ${isCompact ? "min-w-[240px] text-xs" : isMedium ? "min-w-[280px] text-[13px]" : "min-w-[320px] text-sm"}` }, /* @__PURE__ */ import_react6.default.createElement("thead", { className: "bg-slate-50 dark:bg-white/5 border-b border-slate-200 dark:border-white/10" }, /* @__PURE__ */ import_react6.default.createElement("tr", null, columns.map((column) => /* @__PURE__ */ import_react6.default.createElement(
-    "th",
-    {
-      key: column.label,
-      className: `${isCompact ? "px-2.5 py-2" : "px-4 py-3"} font-semibold text-slate-700 dark:text-white/90 whitespace-nowrap`
-    },
-    column.label
-  )))), /* @__PURE__ */ import_react6.default.createElement("tbody", null, config.data.map((row, ri) => /* @__PURE__ */ import_react6.default.createElement(
-    "tr",
-    {
-      key: ri,
-      className: "border-b border-slate-100 dark:border-white/5 last:border-0 hover:bg-slate-50/60 dark:hover:bg-white/5 transition-colors"
-    },
-    columns.map((column) => /* @__PURE__ */ import_react6.default.createElement(
-      "td",
-      {
-        key: column.label,
-        className: `${isCompact ? "px-2.5 py-2" : "px-4 py-3"} text-slate-600 dark:text-white/70 ${column.accessor.toLowerCase().includes("description") ? "whitespace-normal break-words" : "whitespace-nowrap"}`
-      },
-      formatCell(row[column.accessor])
-    ))
-  ))))), /* @__PURE__ */ import_react6.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_react6.default.createElement("p", { className: "text-[11px] text-slate-400 dark:text-white/30" }, config.data.length, " row", config.data.length !== 1 ? "s" : "")));
+  return { productsFromContent: products, cleanContent: cleanContent.trim() };
+}
+function deduplicateProducts(productsFromSources, productsFromContent, messageContent) {
+  if (productsFromContent.length > 0) return productsFromContent;
+  const seen = /* @__PURE__ */ new Set();
+  const contentLower = messageContent.toLowerCase();
+  return productsFromSources.filter((p) => {
+    var _a;
+    const id = String((_a = p.id) != null ? _a : p.name);
+    if (seen.has(id)) return false;
+    const mentioned = contentLower.includes(p.name.toLowerCase()) || (p.brand ? contentLower.includes(p.brand.toLowerCase()) : false);
+    if (mentioned) {
+      seen.add(id);
+      return true;
+    }
+    return false;
+  });
 }
+
+// src/components/MarkdownComponents.tsx
+var import_react8 = __toESM(require("react"));
+
+// src/components/UIDispatcher.tsx
+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 = {
@@ -911,8 +1827,7 @@ function resolveStructuredRows(config) {
 }
 function UIDispatcher({ rawContent, primaryColor, accentColor, isStreaming, onAddToCart, viewportSize = "large" }) {
   var _a;
-  const result = import_react6.default.useMemo(() => {
-    if (isStreaming) return { loading: true };
+  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)));
@@ -941,10 +1856,10 @@ function UIDispatcher({ rawContent, primaryColor, accentColor, isStreaming, onAd
         } else if (viewStr.includes("chart") || viewStr.includes("pie") || viewStr.includes("bar") || viewStr.includes("line") || hasAggregationLikeData || typeof config2.type === "string" && ["pie", "bar", "line"].includes(config2.type) || typeof config2.chartType === "string" && ["pie", "bar", "line"].includes(config2.chartType)) {
           config2.view = "chart";
           config2.chartType = config2.chartType || viewStr.replace("_chart", "") || config2.type || "bar";
-        } else if (viewStr.includes("table")) {
+        } else if (viewStr.includes("table") || config2.type === "table") {
           config2.view = "table";
         } else {
-          config2.view = "table";
+          config2.view = "none";
         }
       }
       const normalizedConfig = __spreadProps(__spreadValues({}, config2), {
@@ -952,14 +1867,18 @@ function UIDispatcher({ rawContent, primaryColor, accentColor, isStreaming, onAd
       });
       return { config: normalizedConfig };
     } catch (err) {
+      if (isStreaming) return { loading: true };
       return { error: String(err) };
     }
   }, [rawContent, isStreaming]);
   if ("loading" in result) {
-    return /* @__PURE__ */ import_react6.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_react6.default.createElement("div", { className: "w-5 h-5 border-2 border-indigo-500 border-t-transparent rounded-full animate-spin" }), /* @__PURE__ */ import_react6.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_react6.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_react6.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";
@@ -967,49 +1886,199 @@ function UIDispatcher({ rawContent, primaryColor, accentColor, isStreaming, onAd
   const hasDescription = typeof config.description === "string" && config.description.trim().length > 0;
   switch (config.view) {
     case "chart":
-      return /* @__PURE__ */ import_react6.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_react6.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_react6.default.createElement("p", { className: `px-2 ${isCompact ? "text-xs" : "text-sm"} text-slate-500 dark:text-white/60` }, config.description), /* @__PURE__ */ import_react6.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
-        }
-      ), hasInsights && /* @__PURE__ */ import_react6.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_react6.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_react6.default.createElement("div", { className: "my-4" }, config.title && /* @__PURE__ */ import_react6.default.createElement("h4", { className: `${isCompact ? "mb-1.5 text-[11px]" : "mb-2 text-xs"} font-semibold text-slate-500` }, config.title), hasDescription && /* @__PURE__ */ import_react6.default.createElement("p", { className: `mb-3 ${isCompact ? "text-xs" : "text-sm"} text-slate-500 dark:text-white/60` }, config.description), /* @__PURE__ */ import_react6.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_react6.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_react6.default.createElement("h4", { className: `${isCompact ? "text-[11px]" : "text-xs"} font-semibold text-slate-500 mb-2` }, config.title), hasDescription && /* @__PURE__ */ import_react6.default.createElement("p", { className: `mb-3 ${isCompact ? "text-xs" : "text-sm"} text-slate-500 dark:text-white/60` }, config.description), /* @__PURE__ */ import_react6.default.createElement(DataTable, { config: {
-        type: "table",
-        title: config.title,
-        description: config.description,
-        columns: config.columns,
-        dataKeys: config.dataKeys,
-        xAxisKey: config.xAxisKey,
-        data: config.data
-      }, viewportSize }));
+      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: {
+              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,
+  isStreaming,
+  onAddToCart,
+  viewportSize
+}) {
+  return {
+    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__ */ (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__ */ (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: (_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: (_d) => {
+      var props = __objRest(_d, []);
+      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: (_f) => {
+      var _g = _f, { children } = _g, props = __objRest(_g, ["children"]);
+      return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+        "th",
+        __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), {
+          children: normaliseChild(children)
+        })
+      );
+    },
+    td: (_h) => {
+      var _i = _h, { children } = _i, props = __objRest(_i, ["children"]);
+      return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+        "td",
+        __spreadProps(__spreadValues({
+          className: "!table-cell px-4 py-3 text-slate-600 dark:text-white/70 whitespace-nowrap text-sm"
+        }, props), {
+          children: normaliseChild(children)
+        })
+      );
+    },
+    code(_j) {
+      var _k = _j, {
+        inline,
+        className,
+        children
+      } = _k, props = __objRest(_k, [
+        "inline",
+        "className",
+        "children"
+      ]);
+      var _a;
+      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__ */ (0, import_jsx_runtime11.jsx)(
+          UIDispatcher,
+          {
+            rawContent: content,
+            primaryColor,
+            accentColor,
+            isStreaming,
+            onAddToCart,
+            viewportSize
+          }
+        );
+      }
+      if (!inline) {
+        const content = String(children != null ? children : "").trim();
+        if (content.startsWith("{") && content.endsWith("}")) {
+          return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+            UIDispatcher,
+            {
+              rawContent: content,
+              primaryColor,
+              accentColor,
+              isStreaming,
+              onAddToCart,
+              viewportSize
+            }
+          );
+        }
+      }
+      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_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,
@@ -1022,12 +2091,13 @@ function MessageBubble({
   const isUser = message.role === "user";
   const isCompact = viewportSize === "compact";
   const isMedium = viewportSize === "medium";
-  const [showSources, setShowSources] = import_react6.default.useState(false);
-  const structuredContent = import_react6.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_react6.default.useMemo(() => {
+  const hasRichUI = import_react9.default.useMemo(() => {
     if (message.uiTransformation) {
       const type = message.uiTransformation.type;
       if (type && !["text", "table"].includes(type)) return true;
@@ -1038,421 +2108,168 @@ function MessageBubble({
     return false;
   }, [message.uiTransformation, structuredContent.payload]);
   const shouldRenderStructuredOnly = !isUser && hasRichUI && isLikelyUiOnlyMessage(structuredContent.text);
-  const productsFromSources = import_react6.default.useMemo(() => {
-    if (isUser || !sources) return [];
-    return sources.filter((s) => {
-      var _a;
-      const m = (_a = s.metadata) != null ? _a : {};
-      const keys = Object.keys(m).map((k) => k.toLowerCase());
-      const hasProductKey = keys.some(
-        (k) => ["price", "image", "img", "thumbnail", "images", "brand", "product", "sku", "category", "model", "cost"].includes(k)
-      );
-      const hasPricePattern = /\$\s*\d+/.test(s.content);
-      return hasProductKey || hasPricePattern || m.type === "product";
-    }).map((s) => {
-      var _a, _b;
-      const m = (_a = s.metadata) != null ? _a : {};
-      const name = getMetadataValue(m, ["name", "product", "title", "label", "item"]);
-      const brand = getMetadataValue(m, ["brand", "manufacturer", "vendor", "make"]);
-      const price = getMetadataValue(m, ["price", "cost", "amount", "msrp", "rate"]);
-      return {
-        id: s.id,
-        name: (_b = name != null ? name : s.content.split("\n")[0]) != null ? _b : "Unknown Product",
-        brand,
-        price,
-        image: resolveImage(m),
-        link: getMetadataValue(m, ["link", "url", "product_url"]),
-        description: s.content
-      };
-    });
-  }, [sources, isUser]);
-  const { productsFromContent, cleanContent } = import_react6.default.useMemo(() => {
-    var _a, _b;
-    if (isUser) {
-      return { productsFromContent: [], cleanContent: message.content };
-    }
-    const jsonRegex = /```(?:json|ui)?\s*([\s\S]*?)\s*```/g;
-    const products = [];
-    let content = structuredContent.text;
-    const payloadCandidates = [structuredContent.payload, ...Array.from(content.matchAll(jsonRegex)).map((match) => match[1])].filter(Boolean);
-    for (const candidate of payloadCandidates) {
-      try {
-        const data = JSON.parse(sanitizeJson(candidate));
-        const itemSet = Array.isArray(data.data) ? data.data : Array.isArray(data.items) ? data.items : Array.isArray(data.products) ? data.products : null;
-        if ((data.type === "products" || data.view === "carousel" || data.view === "table" || Array.isArray(data.products)) && itemSet) {
-          products.push(
-            ...itemSet.map((item) => {
-              var _a2;
-              return __spreadProps(__spreadValues({}, item), {
-                image: (_a2 = item.image) != null ? _a2 : resolveImage(item)
-              });
-            })
-          );
-        }
-      } catch (e) {
-      }
-    }
-    if (content.includes('"type": "products"') || content.includes('"type":"products"')) {
-      for (const match of Array.from(content.matchAll(jsonRegex))) {
-        try {
-          const data = JSON.parse(sanitizeJson(match[1]));
-          if (data.type === "products" && Array.isArray(data.items)) {
-            products.push(
-              ...data.items.map((item) => {
-                var _a2;
-                return __spreadProps(__spreadValues({}, item), {
-                  image: (_a2 = item.image) != null ? _a2 : resolveImage(item)
-                });
-              })
-            );
-            content = content.replace(match[0], "");
-          }
-        } catch (e) {
-        }
-      }
-    }
-    const bulletRegex = /(?:[•*-]\s*)?([^•\n\-\$*–—\(]+?)(?:\s*\(?Price\s*[:\-–—]?\s*)?(?:\s*[:\-–—]\s*|\s+)\$?([\d,.]+)(?:\s*USD)?/gi;
-    const matches = Array.from(content.matchAll(bulletRegex));
-    if (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()) || "";
-        name = name.replace(/\s*\(?Price\s*$/i, "").replace(/[:\-–—]\s*$/g, "").trim();
-        let price = ((_b = match[2]) == null ? void 0 : _b.trim()) || "";
-        price = price.replace(/[,\s]+$/, "").trim();
-        if (name && price) {
-          const newProduct = {
-            id: `text-prod-${name}-${price}`,
-            name,
-            price: `$${price}`
-          };
-          const normName = normalize(name);
-          const sourceMatch = productsFromSources.find((s) => {
-            const sn = normalize(s.name);
-            return sn.includes(normName) || normName.includes(sn);
-          });
-          if (sourceMatch) {
-            newProduct.image = sourceMatch.image;
-            newProduct.brand = sourceMatch.brand;
-            newProduct.link = sourceMatch.link;
-            newProduct.description = sourceMatch.description;
-          }
-          products.push(newProduct);
-          content = content.replace(match[0], `
-**${name}** \u2014 $${price}`);
-        }
-      }
-      content = content.replace(/\n{3,}/g, "\n\n").trim();
-    }
-    return { productsFromContent: products, cleanContent: content.trim() };
-  }, [message.content, isUser, structuredContent, productsFromSources]);
-  const allProducts = import_react6.default.useMemo(() => {
-    if (productsFromContent.length > 0) return productsFromContent;
-    const seen = /* @__PURE__ */ new Set();
-    const contentLower = message.content.toLowerCase();
-    return productsFromSources.filter((p) => {
-      var _a;
-      const id = String((_a = p.id) != null ? _a : p.name);
-      if (seen.has(id)) return false;
-      const mentioned = contentLower.includes(p.name.toLowerCase()) || (p.brand ? contentLower.includes(p.brand.toLowerCase()) : false);
-      if (mentioned) {
-        seen.add(id);
-        return true;
-      }
-      return false;
-    });
-  }, [productsFromSources, productsFromContent, message.content]);
-  const processedMarkdown = import_react6.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");
-    if (!isStreaming) {
-      raw = raw.replace(/(?:^|\n)\s*\{[\s\S]*\}\s*(?:\n|$)/g, (match) => {
-        if (match.includes("```")) return match;
-        if (!looksLikeStructuredPayload(match)) return match;
-        const type = match.includes('"view"') || match.includes('"chartType"') || match.includes('"type": "pie"') || match.includes('"type":"pie"') || match.includes('"type": "bar"') || match.includes('"type":"bar"') || match.includes('"type": "line"') || match.includes('"type":"line"') ? "ui" : "json";
-        return `
-
-\`\`\`${type}
-${match.trim()}
-\`\`\`
-
-`;
-      });
-    }
-    if (hasStructuredUiBlock) {
-      raw = stripStructuredUiLabels(stripMarkdownTables(raw)).replace(/\n{3,}/g, "\n\n").trim();
-    }
-    if (isStreaming) {
-      raw = raw.replace(/((?:^|\n)\|.*)+/g, (match) => {
-        return `
-
-\`\`\`table-loading
-${match.trim()}
-\`\`\`
-
-`;
-      });
-    }
-    return raw;
-  }, [cleanContent, message.content, isStreaming, structuredContent]);
-  const markdownComponents = import_react6.default.useMemo(
-    () => ({
-      // Wrap in not-prose so Tailwind Typography resets don't clobber our styles.
-      // prose applies display:block and padding:0 to table/th/td — not-prose opts out.
-      table: (_a) => {
-        var props = __objRest(_a, []);
-        if (isStreaming) {
-          return /* @__PURE__ */ import_react6.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_react6.default.createElement("div", { className: "w-4 h-4 border-2 border-indigo-500 border-t-transparent rounded-full animate-spin" }), /* @__PURE__ */ import_react6.default.createElement("p", { className: "text-xs text-slate-500 font-medium italic animate-pulse" }, "Generating data table..."));
-        }
-        return /* @__PURE__ */ import_react6.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_react6.default.createElement("div", { className: "overflow-x-auto" }, /* @__PURE__ */ import_react6.default.createElement(
-          "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_react6.default.createElement(
-          "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_react6.default.createElement("tbody", __spreadValues({ className: "!table-row-group divide-y divide-slate-100 dark:divide-white/5" }, props));
-      },
-      tr: (_d) => {
-        var props = __objRest(_d, []);
-        return /* @__PURE__ */ import_react6.default.createElement(
-          "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_react6.default.createElement(
-          "th",
-          __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)
-        );
-      },
-      td: (_g) => {
-        var _h = _g, { children } = _h, props = __objRest(_h, ["children"]);
-        return /* @__PURE__ */ import_react6.default.createElement(
-          "td",
-          __spreadValues({
-            className: "!table-cell px-4 py-3 text-slate-600 dark:text-white/70 whitespace-nowrap text-sm"
-          }, props),
-          normaliseChild(children)
-        );
-      },
-      code(_i) {
-        var _j = _i, {
-          inline,
-          className,
-          children
-        } = _j, props = __objRest(_j, [
-          "inline",
-          "className",
-          "children"
-        ]);
-        var _a;
-        const lang = (_a = /language-(\w+)/.exec(className != null ? className : "")) == null ? void 0 : _a[1];
-        if (!inline && (lang === "ui" || lang === "chart")) {
-          return /* @__PURE__ */ import_react6.default.createElement(
-            UIDispatcher,
-            {
-              rawContent: String(children != null ? children : "").trim(),
-              primaryColor,
-              accentColor,
-              isStreaming,
-              onAddToCart,
-              viewportSize
-            }
-          );
-        }
-        if (!inline && lang === "json") {
-          const content = String(children != null ? children : "").trim();
-          if (looksLikeStructuredPayload(content)) {
-            return /* @__PURE__ */ import_react6.default.createElement(
-              UIDispatcher,
-              {
-                rawContent: content,
-                primaryColor,
-                accentColor,
-                isStreaming,
-                onAddToCart,
-                viewportSize
-              }
-            );
-          }
-        }
-        if (!inline) {
-          const content = String(children != null ? children : "").trim();
-          if (looksLikeStructuredPayload(content)) {
-            return /* @__PURE__ */ import_react6.default.createElement(
-              UIDispatcher,
-              {
-                rawContent: content,
-                primaryColor,
-                accentColor,
-                isStreaming,
-                onAddToCart,
-                viewportSize
-              }
-            );
-          }
-        }
-        if (!inline && lang === "table-loading") {
-          return /* @__PURE__ */ import_react6.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_react6.default.createElement("div", { className: "w-4 h-4 border-2 border-indigo-500 border-t-transparent rounded-full animate-spin" }), /* @__PURE__ */ import_react6.default.createElement("p", { className: "text-xs text-slate-500 font-medium italic animate-pulse" }, "Generating data table..."));
-        }
-        return /* @__PURE__ */ import_react6.default.createElement("code", __spreadValues({ className }, props), typeof children === "string" || typeof children === "number" ? children : JSON.stringify(children));
-      }
-    }),
-    [primaryColor, accentColor, isStreaming, onAddToCart, viewportSize]
-  );
-  return /* @__PURE__ */ import_react6.default.createElement("div", { className: `flex ${isCompact ? "gap-2" : "gap-3"} ${isUser ? "flex-row-reverse" : "flex-row"} items-start` }, /* @__PURE__ */ import_react6.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_react6.default.createElement(import_lucide_react4.User, { className: `${isCompact ? "w-3.5 h-3.5" : "w-4 h-4"} text-white` }) : /* @__PURE__ */ import_react6.default.createElement(import_lucide_react4.Bot, { className: `${isCompact ? "w-3.5 h-3.5" : "w-4 h-4"}` })
-  ), /* @__PURE__ */ import_react6.default.createElement("div", { className: `flex flex-col gap-1 ${isCompact ? "max-w-[94%]" : isMedium ? "max-w-[92%]" : "max-w-[90%]"} ${isUser ? "items-end" : "items-start"}` }, /* @__PURE__ */ import_react6.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_react6.default.createElement("span", { className: "flex items-center gap-1 py-1" }, /* @__PURE__ */ import_react6.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_react6.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_react6.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_react6.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_react6.default.createElement(
-      UIDispatcher,
-      {
-        rawContent: structuredContent.payload,
-        primaryColor,
-        accentColor,
-        isStreaming,
-        onAddToCart,
-        viewportSize
-      }
-    ), !shouldRenderStructuredOnly && /* @__PURE__ */ import_react6.default.createElement(import_react_markdown.default, { components: markdownComponents }, processedMarkdown), isStreaming && message.content && /* @__PURE__ */ import_react6.default.createElement("span", { className: "inline-block w-1.5 h-3.5 ml-1 bg-emerald-500 animate-pulse align-middle" }))
-  ), (() => {
-    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_react6.default.createElement("div", { className: "w-full mt-3" }, /* @__PURE__ */ import_react6.default.createElement(
-      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"
-      }
-    ));
-  })(), !isUser && !hasRichUI && allProducts.length > 0 && /* @__PURE__ */ import_react6.default.createElement("div", { className: "w-full mt-1" }, /* @__PURE__ */ import_react6.default.createElement(
-    ProductCarousel,
-    {
-      products: allProducts,
-      primaryColor,
-      onAddToCart
-    }
-  )), !isUser && sources && sources.length > 0 && /* @__PURE__ */ import_react6.default.createElement("div", { className: "w-full" }, /* @__PURE__ */ import_react6.default.createElement(
-    "button",
-    {
-      onClick: () => setShowSources((s) => !s),
-      className: "text-[11px] text-indigo-400 hover:text-indigo-300 transition-colors flex items-center gap-1 mt-1"
-    },
-    showSources ? /* @__PURE__ */ import_react6.default.createElement(import_lucide_react4.ChevronDown, { className: "w-3 h-3" }) : /* @__PURE__ */ import_react6.default.createElement(import_lucide_react4.ChevronRight, { className: "w-3 h-3" }),
-    sources.length,
-    " source",
-    sources.length !== 1 ? "s" : "",
-    " used"
-  ), showSources && /* @__PURE__ */ import_react6.default.createElement("div", { className: "mt-2 flex flex-col gap-2" }, sources.map((src, i) => /* @__PURE__ */ import_react6.default.createElement(SourceCard, { key: src.id, source: src, index: i }))))));
-}
-
-// src/components/ConfigProvider.tsx
-var import_react7 = __toESM(require("react"));
-
-// src/utils/templateUtils.ts
-function mergeDefined(base, override) {
-  const merged = __spreadValues({}, base || {});
-  if (!override) {
-    return merged;
-  }
-  for (const [key, value] of Object.entries(override)) {
-    if (value !== void 0 && value !== null && value !== "") {
-      merged[key] = value;
-    }
-  }
-  return merged;
-}
-
-// src/config/uiConstants.ts
-var DEFAULT_CONFIG = {
-  projectId: "default",
-  ui: {
-    title: "AI Assistant",
-    subtitle: "Powered by RAG",
-    primaryColor: "#6366f1",
-    accentColor: "#8b5cf6",
-    logoUrl: "",
-    placeholder: "Ask me anything\u2026",
-    showSources: true,
-    welcomeMessage: "Hello! I'm your AI assistant. Ask me anything about your documents.",
-    showWidget: true,
-    poweredBy: "RAG",
-    visualStyle: "glass",
-    borderRadius: "xl",
-    allowUpload: true,
-    allowResize: true,
-    enableVoiceInput: true
-  }
-};
-var BORDER_RADIUS_MAP = {
-  none: "rounded-none",
-  sm: "rounded-sm",
-  md: "rounded-md",
-  lg: "rounded-lg",
-  xl: "rounded-xl",
-  full: "rounded-3xl"
-};
-var CHAT_SUGGESTIONS = [
-  "What can you help me with?",
-  "Summarise the key topics",
-  "Show me an example"
-];
+  const productsFromSources = import_react9.default.useMemo(() => {
+    return extractProductsFromSources(sources, isUser);
+  }, [sources, isUser]);
+  const { productsFromContent, cleanContent } = import_react9.default.useMemo(() => {
+    if (isUser) {
+      return { productsFromContent: [], cleanContent: message.content };
+    }
+    const payloadCandidates = [
+      structuredContent.payload,
+      ...Array.from(structuredContent.text.matchAll(/```(?:json|ui)?\s*([\s\S]*?)\s*```/g)).map((m) => m[1])
+    ].filter(Boolean);
+    return extractProductsFromContent(
+      message.content,
+      structuredContent.text,
+      payloadCandidates,
+      productsFromSources,
+      isStreaming
+    );
+  }, [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_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");
+    if (!isStreaming) {
+      raw = raw.replace(/(?:^|\n)\s*\{[\s\S]*\}\s*(?:\n|$)/g, (match) => {
+        if (match.includes("```")) return match;
+        if (!looksLikeStructuredPayload(match)) return match;
+        const type = match.includes('"view"') || match.includes('"chartType"') || match.includes('"type": "pie"') || match.includes('"type":"pie"') || match.includes('"type": "bar"') || match.includes('"type":"bar"') || match.includes('"type": "line"') || match.includes('"type":"line"') ? "ui" : "json";
+        return `
 
-// src/components/ConfigProvider.tsx
-var ConfigContext = (0, import_react7.createContext)(DEFAULT_CONFIG);
-function ConfigProvider({
-  config,
-  children
-}) {
-  const merged = {
-    projectId: (config == null ? void 0 : config.projectId) || DEFAULT_CONFIG.projectId,
-    ui: mergeDefined(DEFAULT_CONFIG.ui, config == null ? void 0 : config.ui)
-  };
-  return /* @__PURE__ */ import_react7.default.createElement(ConfigContext.Provider, { value: merged }, children);
-}
-function useConfig() {
-  return (0, import_react7.useContext)(ConfigContext);
+\`\`\`${type}
+${match.trim()}
+\`\`\`
+
+`;
+      });
+    }
+    if (hasStructuredUiBlock) {
+      raw = stripStructuredUiLabels(stripMarkdownTables(raw)).replace(/\n{3,}/g, "\n\n").trim();
+    }
+    return raw;
+  }, [cleanContent, message.content, isStreaming, structuredContent]);
+  const markdownComponents = import_react9.default.useMemo(
+    () => createMarkdownComponents({ primaryColor, accentColor, isStreaming, onAddToCart, viewportSize }),
+    [primaryColor, accentColor, isStreaming, onAddToCart, viewportSize]
+  );
+  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",
+      {
+        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"}` })
+      }
+    ),
+    /* @__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_react8 = require("react");
+var import_react10 = require("react");
 
 // src/hooks/useStoredMessages.ts
-var React8 = __toESM(require("react"));
+var React10 = __toESM(require("react"));
 function readStoredMessages(storageKey) {
   if (typeof window === "undefined") {
     return [];
@@ -1469,8 +2286,8 @@ function readStoredMessages(storageKey) {
   }
 }
 function useStoredMessages(storageKey, persist) {
-  const [messages, setMessages] = React8.useState(() => persist ? readStoredMessages(storageKey) : []);
-  React8.useEffect(() => {
+  const [messages, setMessages] = React10.useState(() => persist ? readStoredMessages(storageKey) : []);
+  React10.useEffect(() => {
     if (!persist || typeof window === "undefined") {
       return;
     }
@@ -1510,14 +2327,14 @@ function useRagChat(projectId, options = {}) {
   } = options;
   const storageKey = `rag_chat_${projectId}`;
   const [messages, setMessages] = useStoredMessages(storageKey, persist);
-  const [isLoading, setIsLoading] = (0, import_react8.useState)(false);
-  const [error, setError] = (0, import_react8.useState)(null);
-  const lastInputRef = (0, import_react8.useRef)("");
-  const messagesRef = (0, import_react8.useRef)(messages);
-  (0, import_react8.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_react8.useCallback)(
+  const sendMessage = (0, import_react10.useCallback)(
     async (text, opts) => {
       var _a, _b;
       const trimmed = text.trim();
@@ -1557,6 +2374,7 @@ function useRagChat(projectId, options = {}) {
         let assistantContent = "";
         let sources = [];
         let uiTransformation = null;
+        let trace;
         let buffer = "";
         const assistantMessageId = `assistant_${Date.now()}`;
         setMessages((prev) => [
@@ -1583,6 +2401,8 @@ function useRagChat(projectId, options = {}) {
               sources = (_a = frame.sources) != null ? _a : [];
             } else if (frame.type === "ui_transformation") {
               uiTransformation = frame.data;
+            } else if (frame.type === "observability") {
+              trace = frame.data;
             } else if (frame.type === "error") {
               setError(frame.error || "Stream error");
             }
@@ -1601,17 +2421,22 @@ function useRagChat(projectId, options = {}) {
           for (const frame of parseSseChunk(buffer)) {
             if (frame.type === "text" && frame.text) assistantContent += frame.text;
             else if (frame.type === "metadata") sources = (_b = frame.sources) != null ? _b : [];
+            else if (frame.type === "observability") trace = frame.data;
           }
         }
-        const finalAssistantMessage = {
+        const finalMsg = {
           id: assistantMessageId,
           role: "assistant",
           content: assistantContent,
           sources: sources.length > 0 ? sources : void 0,
-          uiTransformation: uiTransformation || void 0,
+          uiTransformation: uiTransformation != null ? uiTransformation : void 0,
+          trace,
           createdAt: (/* @__PURE__ */ new Date()).toISOString()
         };
-        onReply == null ? void 0 : onReply(finalAssistantMessage);
+        setMessages(
+          (prev) => prev.map((msg) => msg.id === assistantMessageId ? finalMsg : msg)
+        );
+        onReply == null ? void 0 : onReply(finalMsg);
       } catch (err) {
         const msg = err instanceof Error ? err.message : "Something went wrong. Please try again.";
         setError(msg);
@@ -1622,12 +2447,12 @@ function useRagChat(projectId, options = {}) {
     },
     [apiUrl, isLoading, namespace, onError, onReply, projectId, setMessages]
   );
-  const clear = (0, import_react8.useCallback)(() => {
+  const clear = (0, import_react10.useCallback)(() => {
     setMessages([]);
     setError(null);
     if (persist) localStorage.removeItem(storageKey);
   }, [persist, setMessages, storageKey]);
-  const retry = (0, import_react8.useCallback)(async () => {
+  const retry = (0, import_react10.useCallback)(async () => {
     if (lastInputRef.current) {
       const latestMessage = messagesRef.current[messagesRef.current.length - 1];
       await sendMessage(lastInputRef.current, {
@@ -1647,6 +2472,7 @@ function useRagChat(projectId, options = {}) {
 }
 
 // src/components/ChatWindow.tsx
+var import_jsx_runtime13 = require("react/jsx-runtime");
 function ChatWindow({
   className = "",
   style,
@@ -1661,20 +2487,21 @@ function ChatWindow({
 }) {
   var _a;
   const { ui, projectId } = useConfig();
-  const [input, setInput] = (0, import_react9.useState)("");
-  const [mounted, setMounted] = (0, import_react9.useState)(false);
-  const [viewportSize, setViewportSize] = (0, import_react9.useState)("large");
-  const windowRef = (0, import_react9.useRef)(null);
-  const bottomRef = (0, import_react9.useRef)(null);
-  const inputRef = (0, import_react9.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_react9.useState)([]);
-  const [isSuggesting, setIsSuggesting] = (0, import_react9.useState)(false);
-  const [isListening, setIsListening] = (0, import_react9.useState)(false);
-  const recognitionRef = (0, import_react9.useRef)(null);
-  (0, import_react9.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;
@@ -1720,10 +2547,10 @@ function ChatWindow({
       }
     }
   };
-  (0, import_react9.useEffect)(() => {
+  (0, import_react11.useEffect)(() => {
     setMounted(true);
   }, []);
-  (0, import_react9.useEffect)(() => {
+  (0, import_react11.useEffect)(() => {
     const element = windowRef.current;
     if (!element || typeof ResizeObserver === "undefined") return;
     const resolveViewportSize = (width) => {
@@ -1739,13 +2566,13 @@ function ChatWindow({
     observer.observe(element);
     return () => observer.disconnect();
   }, []);
-  (0, import_react9.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_react9.useCallback)(async () => {
+  const sendMessage = (0, import_react11.useCallback)(async () => {
     var _a2;
     const text = input.trim();
     if (!text || isLoading) return;
@@ -1775,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_react9.useEffect)(() => {
+  (0, import_react11.useEffect)(() => {
     if (input.trim().length < 3) {
       return;
     }
@@ -1799,194 +2626,273 @@ function ChatWindow({
     }, 800);
     return () => clearTimeout(timer);
   }, [input, projectId]);
-  return /* @__PURE__ */ import_react9.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_react9.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_react9.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_react9.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_react9.default.createElement("div", { className: "flex items-center gap-3" }, ui.logoUrl ? (
-        // eslint-disable-next-line @next/next/no-img-element
-        /* @__PURE__ */ import_react9.default.createElement("img", { src: ui.logoUrl, alt: "logo", className: "w-8 h-8 rounded-lg object-cover" })
-      ) : /* @__PURE__ */ import_react9.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_react9.default.createElement(import_lucide_react5.Bot, { className: "w-5 h-5 text-white" })
-      ), /* @__PURE__ */ import_react9.default.createElement("div", null, /* @__PURE__ */ import_react9.default.createElement("h2", { className: "text-slate-900 dark:text-white font-semibold text-sm leading-tight" }, ui.title), ui.poweredBy && /* @__PURE__ */ import_react9.default.createElement("p", { className: "text-slate-500 dark:text-white/40 text-[11px] leading-tight" }, `Powered by ${ui.poweredBy}`))),
-      /* @__PURE__ */ import_react9.default.createElement("div", { className: "flex items-center gap-1.5" }, /* @__PURE__ */ import_react9.default.createElement("span", { className: "flex items-center gap-1 text-[10px] text-emerald-500 dark:text-emerald-400 mr-2" }, /* @__PURE__ */ import_react9.default.createElement("span", { className: "w-1.5 h-1.5 rounded-full bg-emerald-500 dark:bg-emerald-400 animate-pulse" }), "Online"), /* @__PURE__ */ import_react9.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_react9.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_react9.default.createElement(import_lucide_react5.Trash2, { className: "w-3.5 h-3.5" })
-      ), isResized && onResetResize && /* @__PURE__ */ import_react9.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_react9.default.createElement(import_lucide_react5.RotateCcw, { className: "w-3.5 h-3.5" })
-      ), onMaximize && /* @__PURE__ */ import_react9.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_react9.default.createElement(import_lucide_react5.Minimize2, { className: "w-3.5 h-3.5" }) : /* @__PURE__ */ import_react9.default.createElement(import_lucide_react5.Maximize2, { className: "w-3.5 h-3.5" })
-      ), showClose && onClose && /* @__PURE__ */ import_react9.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_react9.default.createElement(import_lucide_react5.X, { className: "w-4 h-4" })
-      )))
-    ),
-    /* @__PURE__ */ import_react9.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_react9.default.createElement("div", { className: "h-full flex flex-col items-center justify-center text-center gap-4 px-6 py-12" }, /* @__PURE__ */ import_react9.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_react9.default.createElement(import_lucide_react5.Sparkles, { className: "w-8 h-8 text-white" })
-      ), /* @__PURE__ */ import_react9.default.createElement("div", null, /* @__PURE__ */ import_react9.default.createElement("p", { className: "text-slate-800 dark:text-white/80 font-medium leading-relaxed" }, ui.welcomeMessage), /* @__PURE__ */ import_react9.default.createElement("p", { className: "text-slate-500 dark:text-white/30 text-sm mt-2" }, "Ask a question to get started")), /* @__PURE__ */ import_react9.default.createElement("div", { className: "flex flex-wrap gap-2 justify-center mt-2" }, CHAT_SUGGESTIONS.map(
-        (suggestion) => /* @__PURE__ */ import_react9.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_react9.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_react9.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_react9.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_react9.default.createElement(import_lucide_react5.TriangleAlert, { className: "w-4 h-4 flex-shrink-0" }), /* @__PURE__ */ import_react9.default.createElement("span", null, error)), /* @__PURE__ */ import_react9.default.createElement("div", { ref: bottomRef })),
-    /* @__PURE__ */ import_react9.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_react9.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_react9.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_react9.default.createElement(import_lucide_react5.Sparkles, { className: "w-3 h-3 text-amber-400" }),
-      suggestion
-    )), isSuggesting && suggestions.length === 0 && /* @__PURE__ */ import_react9.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_react9.default.createElement(import_lucide_react5.Sparkles, { className: "w-3 h-3" }), "Thinking...")), /* @__PURE__ */ import_react9.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_react9.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_react9.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_react9.default.createElement(import_lucide_react5.MicOff, { className: "w-4 h-4" }) : /* @__PURE__ */ import_react9.default.createElement(import_lucide_react5.Mic, { className: "w-4 h-4" })
-    ), /* @__PURE__ */ import_react9.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_react9.default.createElement(import_lucide_react5.ArrowUp, { className: "w-4 h-4 text-white" })
-    )), /* @__PURE__ */ import_react9.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_react10.useState)(false);
-  const [hasUnread, setHasUnread] = (0, import_react10.useState)(false);
-  const [dimensions, setDimensions] = (0, import_react10.useState)(DEFAULT_DIMENSIONS);
-  const [isResizing, setIsResizing] = (0, import_react10.useState)(false);
-  const [isMaximized, setIsMaximized] = (0, import_react10.useState)(false);
-  const [prevDimensions, setPrevDimensions] = (0, import_react10.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);
   };
@@ -2031,186 +2937,67 @@ function ChatWidget({ position = "bottom-right", onAddToCart }) {
     }
   };
   const isResized = dimensions.width !== DEFAULT_DIMENSIONS.width || dimensions.height !== DEFAULT_DIMENSIONS.height;
-  return /* @__PURE__ */ import_react10.default.createElement(import_react10.default.Fragment, null, /* @__PURE__ */ import_react10.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_react10.default.createElement(
-      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__ */ import_react10.default.createElement(
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_jsx_runtime14.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
       "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_react10.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_react10.default.createElement(
-      "span",
-      {
-        className: "absolute inset-0 rounded-full animate-ping opacity-20",
-        style: { background: ui.primaryColor }
+        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_react10.default.createElement(
-      "span",
-      {
-        className: `transition-transform duration-300 ${isOpen ? "rotate-90 scale-90" : "rotate-0 scale-100"}`
-      },
-      isOpen ? /* @__PURE__ */ import_react10.default.createElement(import_lucide_react6.X, { className: "w-6 h-6 text-white" }) : /* @__PURE__ */ import_react10.default.createElement(import_lucide_react6.MessageSquare, { className: "w-6 h-6 text-white" })
-    ),
-    hasUnread && !isOpen && /* @__PURE__ */ import_react10.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")
-  ));
-}
-
-// src/components/DocumentUpload.tsx
-var import_react11 = __toESM(require("react"));
-var import_lucide_react7 = require("lucide-react");
-function DocumentUpload({ namespace, onUploadComplete, className = "" }) {
-  const { ui } = useConfig();
-  const [fileStates, setFileStates] = (0, import_react11.useState)([]);
-  const [isDragging, setIsDragging] = (0, import_react11.useState)(false);
-  const fileInputRef = (0, import_react11.useRef)(null);
-  const addFiles = (files) => {
-    const newStates = files.map((file) => ({ file, status: "idle" }));
-    setFileStates((prev) => [...prev, ...newStates]);
-  };
-  const removeFile = (index) => {
-    setFileStates((prev) => prev.filter((_, i) => i !== index));
-  };
-  const onDragOver = (e) => {
-    e.preventDefault();
-    setIsDragging(true);
-  };
-  const onDragLeave = () => {
-    setIsDragging(false);
-  };
-  const onDrop = (e) => {
-    e.preventDefault();
-    setIsDragging(false);
-    if (e.dataTransfer.files) {
-      addFiles(Array.from(e.dataTransfer.files));
-    }
-  };
-  const onFileSelect = (e) => {
-    if (e.target.files) {
-      addFiles(Array.from(e.target.files));
-    }
-  };
-  const uploadFiles = async () => {
-    const idleFiles = fileStates.filter((s) => s.status === "idle");
-    if (idleFiles.length === 0) return;
-    setFileStates((prev) => prev.map((s) => s.status === "idle" ? __spreadProps(__spreadValues({}, s), { status: "uploading" }) : s));
-    const formData = new FormData();
-    idleFiles.forEach((s) => formData.append("files", s.file));
-    if (namespace) formData.append("namespace", namespace);
-    try {
-      const response = await fetch("/api/upload", {
-        method: "POST",
-        body: formData
-      });
-      const result = await response.json();
-      if (!response.ok) throw new Error(result.error || "Upload failed");
-      setFileStates((prev) => prev.map((s) => s.status === "uploading" ? __spreadProps(__spreadValues({}, s), { status: "success" }) : s));
-      if (onUploadComplete) onUploadComplete(result);
-    } catch (err) {
-      const message = err instanceof Error ? err.message : "Upload failed";
-      setFileStates((prev) => prev.map((s) => s.status === "uploading" ? __spreadProps(__spreadValues({}, s), { status: "error", error: message }) : s));
-    }
-  };
-  const isUploading = fileStates.some((s) => s.status === "uploading");
-  const hasIdle = fileStates.some((s) => s.status === "idle");
-  return /* @__PURE__ */ import_react11.default.createElement(
-    "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_react11.default.createElement("div", { className: "flex flex-col items-center justify-center text-center" }, /* @__PURE__ */ import_react11.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_react11.default.createElement(import_lucide_react7.Upload, { className: "w-6 h-6", style: { color: ui.primaryColor } })
-    ), /* @__PURE__ */ import_react11.default.createElement("h3", { className: "text-slate-900 dark:text-white font-semibold mb-1" }, "Upload Documents"), /* @__PURE__ */ import_react11.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_react11.default.createElement(
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
       "button",
       {
-        onClick: () => {
-          var _a;
-          return (_a = fileInputRef.current) == null ? void 0 : _a.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_react11.default.createElement(
-      "input",
-      {
-        ref: fileInputRef,
-        type: "file",
-        multiple: true,
-        onChange: onFileSelect,
-        className: "hidden",
-        accept: ".pdf,.docx,.txt,.md,.json,.csv"
+        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" })
+        ]
       }
-    )),
-    fileStates.length > 0 && /* @__PURE__ */ import_react11.default.createElement("div", { className: "mt-8 space-y-3" }, fileStates.map((state, i) => /* @__PURE__ */ import_react11.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_react11.default.createElement("div", { className: "flex items-center gap-3 overflow-hidden" }, /* @__PURE__ */ import_react11.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_react11.default.createElement(import_lucide_react7.File, { className: "w-4 h-4 text-slate-400" })), /* @__PURE__ */ import_react11.default.createElement("div", { className: "truncate" }, /* @__PURE__ */ import_react11.default.createElement("p", { className: "text-xs font-medium text-slate-700 dark:text-white/80 truncate" }, state.file.name), /* @__PURE__ */ import_react11.default.createElement("p", { className: "text-[10px] text-slate-400" }, (state.file.size / 1024).toFixed(1), " KB"))),
-      /* @__PURE__ */ import_react11.default.createElement("div", { className: "flex items-center gap-2" }, state.status === "uploading" && /* @__PURE__ */ import_react11.default.createElement(import_lucide_react7.Loader2, { className: "w-4 h-4 text-slate-400 animate-spin" }), state.status === "success" && /* @__PURE__ */ import_react11.default.createElement(import_lucide_react7.CheckCircle, { className: "w-4 h-4 text-emerald-500" }), state.status === "error" && /* @__PURE__ */ import_react11.default.createElement("div", { title: state.error }, /* @__PURE__ */ import_react11.default.createElement(import_lucide_react7.AlertCircle, { className: "w-4 h-4 text-rose-500" })), state.status !== "uploading" && /* @__PURE__ */ import_react11.default.createElement(
-        "button",
-        {
-          onClick: () => removeFile(i),
-          className: "p-1 rounded-md hover:bg-slate-200 dark:hover:bg-white/10 transition-colors"
-        },
-        /* @__PURE__ */ import_react11.default.createElement(import_lucide_react7.X, { className: "w-3.5 h-3.5 text-slate-400" })
-      ))
-    )), hasIdle && !isUploading && /* @__PURE__ */ import_react11.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"
-    ))
-  );
+    )
+  ] });
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
@@ -2219,7 +3006,9 @@ function DocumentUpload({ namespace, onUploadComplete, className = "" }) {
   ConfigProvider,
   DocumentUpload,
   MessageBubble,
+  ObservabilityPanel,
   SourceCard,
+  addSynonyms,
   useConfig,
   useRagChat
 });