@retrivora-ai/rag-engine 1.8.1 → 1.8.2

package/dist/index.mjs

@@ -1,3 +1,7 @@
+import {
+  addSynonyms,
+  resolveMetadataValue
+} from "./chunk-ICKRMZQK.mjs";
 import {
   mergeDefined
 } from "./chunk-YLTMFW4M.mjs";
@@ -8,15 +12,15 @@ import {
 } from "./chunk-X4TOT24V.mjs";
 
 // src/components/ChatWidget.tsx
-import React10, { useState as useState5 } from "react";
-import { MessageSquare, X as X2 } from "lucide-react";
+import React15, { useState as useState6 } from "react";
+import { MessageSquare, X as X3 } from "lucide-react";
 
 // src/components/ChatWindow.tsx
-import React9, { useState as useState4, useRef as useRef3, useEffect as useEffect4, useCallback as useCallback2 } from "react";
+import React14, { useState as useState5, useRef as useRef4, useEffect as useEffect4, useCallback as useCallback2 } from "react";
 import {
   Bot as Bot2,
   Trash2,
-  X,
+  X as X2,
   Sparkles,
   ArrowUp,
   TriangleAlert,
@@ -24,47 +28,256 @@ import {
   Maximize2,
   Minimize2,
   Mic,
-  MicOff
+  MicOff,
+  Paperclip
 } from "lucide-react";
 
+// src/components/DocumentUpload.tsx
+import React2, { useState, useRef } from "react";
+import { Upload, File, X, CheckCircle, AlertCircle, Loader2 } from "lucide-react";
+
+// src/components/ConfigProvider.tsx
+import React, { createContext, useContext } from "react";
+
+// 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 ConfigContext = 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__ */ React.createElement(ConfigContext.Provider, { value: merged }, children);
+}
+function useConfig() {
+  return useContext(ConfigContext);
+}
+
+// src/components/DocumentUpload.tsx
+function DocumentUpload({ namespace, onUploadComplete, className = "" }) {
+  var _a;
+  const { ui, embedding } = useConfig();
+  const [fileStates, setFileStates] = useState([]);
+  const [isDragging, setIsDragging] = useState(false);
+  const fileInputRef = 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] = 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__ */ React2.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__ */ React2.createElement("div", { className: "flex flex-col items-center justify-center text-center" }, /* @__PURE__ */ React2.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__ */ React2.createElement(Upload, { className: "w-6 h-6", style: { color: ui.primaryColor } })
+    ), /* @__PURE__ */ React2.createElement("h3", { className: "text-slate-900 dark:text-white font-semibold mb-1" }, "Upload Documents"), /* @__PURE__ */ React2.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__ */ React2.createElement(
+      "button",
+      {
+        onClick: () => {
+          var _a2;
+          return (_a2 = fileInputRef.current) == null ? void 0 : _a2.click();
+        },
+        disabled: isUploading,
+        className: "px-4 py-2 rounded-lg text-sm font-medium transition-all hover:scale-105 active:scale-95 disabled:opacity-50",
+        style: {
+          backgroundColor: `${ui.primaryColor}15`,
+          color: ui.primaryColor,
+          border: `1px solid ${ui.primaryColor}30`
+        }
+      },
+      "Select Files"
+    ), /* @__PURE__ */ React2.createElement(
+      "input",
+      {
+        ref: fileInputRef,
+        type: "file",
+        multiple: true,
+        onChange: onFileSelect,
+        className: "hidden",
+        accept: ".pdf,.docx,.txt,.md,.json,.csv"
+      }
+    ), /* @__PURE__ */ React2.createElement("div", { className: "mt-6 flex flex-col items-center gap-2 text-sm" }, /* @__PURE__ */ React2.createElement("label", { className: "text-slate-600 dark:text-white/60 font-medium" }, "Embedding Dimension"), isChangeable ? /* @__PURE__ */ React2.createElement(
+      "select",
+      {
+        value: dimension,
+        onChange: (e) => setDimension(Number(e.target.value)),
+        disabled: isUploading,
+        className: "px-3 py-1.5 rounded-lg bg-slate-50 dark:bg-white/5 border border-slate-200 dark:border-white/10 text-slate-800 dark:text-white/90 outline-none focus:border-emerald-500 transition-colors"
+      },
+      availableDimensions.map((dim) => /* @__PURE__ */ React2.createElement("option", { key: dim, value: dim, className: "bg-white dark:bg-slate-900" }, dim))
+    ) : /* @__PURE__ */ React2.createElement("div", { className: "px-3 py-1.5 rounded-lg bg-slate-100 dark:bg-white/10 border border-slate-200 dark:border-white/10 text-slate-500 dark:text-white/50 cursor-not-allowed text-xs" }, dimension, " (Fixed for ", currentModel, ")"))),
+    fileStates.length > 0 && /* @__PURE__ */ React2.createElement("div", { className: "mt-8 space-y-3" }, fileStates.map((state, i) => /* @__PURE__ */ React2.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__ */ React2.createElement("div", { className: "flex items-center gap-3 overflow-hidden" }, /* @__PURE__ */ React2.createElement("div", { className: "w-8 h-8 rounded-lg bg-white dark:bg-white/10 flex items-center justify-center shadow-sm" }, /* @__PURE__ */ React2.createElement(File, { className: "w-4 h-4 text-slate-400" })), /* @__PURE__ */ React2.createElement("div", { className: "truncate" }, /* @__PURE__ */ React2.createElement("p", { className: "text-xs font-medium text-slate-700 dark:text-white/80 truncate" }, state.file.name), /* @__PURE__ */ React2.createElement("p", { className: "text-[10px] text-slate-400" }, (state.file.size / 1024).toFixed(1), " KB"))),
+      /* @__PURE__ */ React2.createElement("div", { className: "flex items-center gap-2" }, state.status === "uploading" && /* @__PURE__ */ React2.createElement(Loader2, { className: "w-4 h-4 text-slate-400 animate-spin" }), state.status === "success" && /* @__PURE__ */ React2.createElement(CheckCircle, { className: "w-4 h-4 text-emerald-500" }), state.status === "error" && /* @__PURE__ */ React2.createElement("div", { title: state.error }, /* @__PURE__ */ React2.createElement(AlertCircle, { className: "w-4 h-4 text-rose-500" })), state.status !== "uploading" && /* @__PURE__ */ React2.createElement(
+        "button",
+        {
+          onClick: () => removeFile(i),
+          className: "p-1 rounded-md hover:bg-slate-200 dark:hover:bg-white/10 transition-colors"
+        },
+        /* @__PURE__ */ React2.createElement(X, { className: "w-3.5 h-3.5 text-slate-400" })
+      ))
+    )), hasIdle && !isUploading && /* @__PURE__ */ React2.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"
+    ))
+  );
+}
+
 // src/components/MessageBubble.tsx
-import React6 from "react";
-import { Bot, User, ChevronDown as ChevronDown2, ChevronRight as ChevronRight2 } from "lucide-react";
+import React12 from "react";
+import { Bot, User, ChevronDown as ChevronDown3, ChevronRight as ChevronRight3, Activity } from "lucide-react";
 import ReactMarkdown from "react-markdown";
 
 // src/components/SourceCard.tsx
-import React from "react";
+import React3 from "react";
 import { ChevronDown, ChevronUp } from "lucide-react";
 function SourceCard({ source, index }) {
   var _a, _b;
-  const [expanded, setExpanded] = React.useState(false);
+  const [expanded, setExpanded] = React3.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__ */ React.createElement(
+  return /* @__PURE__ */ React3.createElement(
     "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__ */ React.createElement("div", { className: "flex items-start justify-between gap-2" }, /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-2 min-w-0" }, /* @__PURE__ */ React.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__ */ React.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__ */ React.createElement("span", { className: `flex-shrink-0 text-xs font-semibold ${scoreColor} tabular-nums` }, scorePercent, "%")),
-    /* @__PURE__ */ React.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__ */ React.createElement("button", { className: "mt-1 text-[10px] text-indigo-400 hover:text-indigo-300 transition-colors flex items-center gap-0.5" }, expanded ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(ChevronUp, { className: "w-3 h-3" }), " Show less") : /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(ChevronDown, { className: "w-3 h-3" }), " Show more"))
+    /* @__PURE__ */ React3.createElement("div", { className: "flex items-start justify-between gap-2" }, /* @__PURE__ */ React3.createElement("div", { className: "flex items-center gap-2 min-w-0" }, /* @__PURE__ */ React3.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__ */ React3.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__ */ React3.createElement("span", { className: `flex-shrink-0 text-xs font-semibold ${scoreColor} tabular-nums` }, scorePercent, "%")),
+    /* @__PURE__ */ React3.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__ */ React3.createElement("button", { className: "mt-1 text-[10px] text-indigo-400 hover:text-indigo-300 transition-colors flex items-center gap-0.5" }, expanded ? /* @__PURE__ */ React3.createElement(React3.Fragment, null, /* @__PURE__ */ React3.createElement(ChevronUp, { className: "w-3 h-3" }), " Show less") : /* @__PURE__ */ React3.createElement(React3.Fragment, null, /* @__PURE__ */ React3.createElement(ChevronDown, { className: "w-3 h-3" }), " Show more"))
   );
 }
 
 // src/components/ProductCarousel.tsx
-import React3, { useRef, useState, useEffect } from "react";
+import React5, { useRef as useRef2, useState as useState2, useEffect } from "react";
 import { ChevronLeft, ChevronRight } from "lucide-react";
 
 // src/components/ProductCard.tsx
-import React2 from "react";
+import React4 from "react";
 import Image from "next/image";
 import { ShoppingCart, ExternalLink } from "lucide-react";
 function ProductCard({ product, primaryColor = "#6366f1", onAddToCart }) {
-  return /* @__PURE__ */ React2.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__ */ React2.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__ */ React2.createElement(
+  return /* @__PURE__ */ React4.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__ */ React4.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__ */ React4.createElement(
     Image,
     {
       src: product.image,
@@ -73,16 +286,16 @@ function ProductCard({ product, primaryColor = "#6366f1", onAddToCart }) {
       unoptimized: true,
       className: "object-cover group-hover:scale-105 transition-transform duration-500"
     }
-  ) : /* @__PURE__ */ React2.createElement("div", { className: "text-slate-400 dark:text-white/20" }, /* @__PURE__ */ React2.createElement(ShoppingCart, { className: "w-12 h-12" })), product.brand && /* @__PURE__ */ React2.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__ */ React2.createElement("div", { className: "p-4 flex flex-col gap-2" }, /* @__PURE__ */ React2.createElement("div", { className: "flex justify-between items-start gap-2" }, /* @__PURE__ */ React2.createElement("h3", { className: "text-sm font-semibold text-slate-800 dark:text-white/90 line-clamp-1" }, product.name), product.price && /* @__PURE__ */ React2.createElement("span", { className: "text-sm font-bold", style: { color: primaryColor } }, typeof product.price === "number" ? `$${product.price}` : product.price)), product.description && /* @__PURE__ */ React2.createElement("p", { className: "text-[11px] text-slate-500 dark:text-white/50 line-clamp-2 leading-relaxed" }, product.description), /* @__PURE__ */ React2.createElement("div", { className: "mt-2 flex gap-2" }, /* @__PURE__ */ React2.createElement(
+  ) : /* @__PURE__ */ React4.createElement("div", { className: "text-slate-400 dark:text-white/20" }, /* @__PURE__ */ React4.createElement(ShoppingCart, { className: "w-12 h-12" })), product.brand && /* @__PURE__ */ React4.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__ */ React4.createElement("div", { className: "p-4 flex flex-col gap-2" }, /* @__PURE__ */ React4.createElement("div", { className: "flex justify-between items-start gap-2" }, /* @__PURE__ */ React4.createElement("h3", { className: "text-sm font-semibold text-slate-800 dark:text-white/90 line-clamp-1" }, product.name), product.price && /* @__PURE__ */ React4.createElement("span", { className: "text-sm font-bold", style: { color: primaryColor } }, typeof product.price === "number" ? `$${product.price}` : String(product.price).match(/^[\d.]/) ? `$${product.price}` : product.price)), product.description && /* @__PURE__ */ React4.createElement("p", { className: "text-[11px] text-slate-500 dark:text-white/50 line-clamp-2 leading-relaxed" }, product.description), /* @__PURE__ */ React4.createElement("div", { className: "mt-2 flex gap-2" }, /* @__PURE__ */ React4.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__ */ React2.createElement(ShoppingCart, { className: "w-3 h-3" }),
+    /* @__PURE__ */ React4.createElement(ShoppingCart, { className: "w-3 h-3" }),
     "Add to Cart"
-  ), product.link && /* @__PURE__ */ React2.createElement(
+  ), product.link && /* @__PURE__ */ React4.createElement(
     "a",
     {
       href: product.link,
@@ -90,14 +303,14 @@ function ProductCard({ product, primaryColor = "#6366f1", onAddToCart }) {
       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__ */ React2.createElement(ExternalLink, { className: "w-3.5 h-3.5" })
+    /* @__PURE__ */ React4.createElement(ExternalLink, { className: "w-3.5 h-3.5" })
   ))));
 }
 
 // src/components/ProductCarousel.tsx
 function ProductCarousel({ products, primaryColor = "#6366f1", onAddToCart }) {
-  const scrollRef = useRef(null);
-  const [canScroll, setCanScroll] = useState(false);
+  const scrollRef = useRef2(null);
+  const [canScroll, setCanScroll] = useState2(false);
   useEffect(() => {
     const checkScroll = () => {
       if (scrollRef.current) {
@@ -122,9 +335,9 @@ function ProductCarousel({ products, primaryColor = "#6366f1", onAddToCart }) {
   };
   if (!products || products.length === 0) return null;
   if (products.length === 1) {
-    return /* @__PURE__ */ React3.createElement("div", { className: "my-4 w-[min(88%,18rem)] min-w-0 max-w-full animate-fade-in-up" }, /* @__PURE__ */ React3.createElement(ProductCard, { product: products[0], primaryColor, onAddToCart }));
+    return /* @__PURE__ */ React5.createElement("div", { className: "my-4 w-[min(88%,18rem)] min-w-0 max-w-full animate-fade-in-up" }, /* @__PURE__ */ React5.createElement(ProductCard, { product: products[0], primaryColor, onAddToCart }));
   }
-  return /* @__PURE__ */ React3.createElement("div", { className: "relative w-full my-4 group/carousel animate-fade-in-up" }, canScroll && /* @__PURE__ */ React3.createElement(React3.Fragment, null, /* @__PURE__ */ React3.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__ */ React3.createElement(
+  return /* @__PURE__ */ React5.createElement("div", { className: "relative w-full my-4 group/carousel animate-fade-in-up" }, canScroll && /* @__PURE__ */ React5.createElement(React5.Fragment, null, /* @__PURE__ */ React5.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__ */ React5.createElement(
     "button",
     {
       onClick: (e) => {
@@ -134,8 +347,8 @@ function ProductCarousel({ products, primaryColor = "#6366f1", onAddToCart }) {
       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__ */ React3.createElement(ChevronLeft, { className: "w-5 h-5" })
-  )), /* @__PURE__ */ React3.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__ */ React3.createElement(
+    /* @__PURE__ */ React5.createElement(ChevronLeft, { className: "w-5 h-5" })
+  )), /* @__PURE__ */ React5.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__ */ React5.createElement(
     "button",
     {
       onClick: (e) => {
@@ -145,27 +358,50 @@ function ProductCarousel({ products, primaryColor = "#6366f1", onAddToCart }) {
       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__ */ React3.createElement(ChevronRight, { className: "w-5 h-5" })
-  ))), /* @__PURE__ */ React3.createElement(
+    /* @__PURE__ */ React5.createElement(ChevronRight, { className: "w-5 h-5" })
+  ))), /* @__PURE__ */ React5.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__ */ React3.createElement(
+    products.map((product) => /* @__PURE__ */ React5.createElement(
       "div",
       {
         key: product.id,
         className: "snap-start flex-shrink-0 w-[min(88%,18rem)] min-w-[11rem] max-w-full"
       },
-      /* @__PURE__ */ React3.createElement(ProductCard, { product, primaryColor, onAddToCart })
+      /* @__PURE__ */ React5.createElement(ProductCard, { product, primaryColor, onAddToCart })
     ))
   ));
 }
 
+// src/components/VisualizationRenderer.tsx
+import React7 from "react";
+import {
+  PieChart as PieChart2,
+  Pie as Pie2,
+  Cell as Cell2,
+  BarChart as BarChart2,
+  Bar as Bar2,
+  LineChart as LineChart2,
+  Line as Line2,
+  XAxis as XAxis2,
+  YAxis as YAxis2,
+  CartesianGrid as CartesianGrid2,
+  Tooltip as Tooltip2,
+  Legend as Legend2,
+  ResponsiveContainer as ResponsiveContainer2,
+  RadarChart,
+  Radar,
+  PolarGrid,
+  PolarAngleAxis,
+  PolarRadiusAxis
+} from "recharts";
+
 // src/components/DynamicChart.tsx
-import React4 from "react";
+import React6 from "react";
 import {
   BarChart,
   Bar,
@@ -181,18 +417,19 @@ import {
   Legend,
   ResponsiveContainer
 } from "recharts";
-var DEFAULT_COLORS = ["#6366f1", "#10b981", "#f59e0b", "#ef4444", "#8b5cf6", "#ec4899"];
+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 = React4.useRef(null);
-  const [containerWidth, setContainerWidth] = React4.useState(0);
-  React4.useEffect(() => {
+  const colors = config.colors || [primaryColor, accentColor, ...CHART_COLORS];
+  const containerRef = React6.useRef(null);
+  const [containerWidth, setContainerWidth] = React6.useState(0);
+  React6.useEffect(() => {
     const element = containerRef.current;
     if (!element || typeof ResizeObserver === "undefined") return;
     const updateWidth = (width) => {
@@ -218,7 +455,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 = React4.useMemo(() => {
+  const sanitizedData = React6.useMemo(() => {
     if (!data) return [];
     return data.map((item) => {
       const newItem = {};
@@ -250,8 +487,19 @@ function DynamicChart({
       return newItem;
     });
   }, [data]);
+  if (isStreaming) {
+    const bars = type === "pie" ? 6 : 5;
+    return /* @__PURE__ */ React6.createElement("div", { className: "w-full mt-4 mb-2 animate-pulse" }, type === "pie" ? /* @__PURE__ */ React6.createElement("div", { className: "mx-auto w-40 h-40 rounded-full bg-slate-100 dark:bg-white/10" }) : /* @__PURE__ */ React6.createElement("div", { className: "flex items-end gap-2 h-32 px-2" }, Array.from({ length: bars }).map((_, i) => /* @__PURE__ */ React6.createElement(
+      "div",
+      {
+        key: i,
+        className: "flex-1 rounded-t-md bg-slate-100 dark:bg-white/10",
+        style: { height: `${40 + i % 3 * 25}%` }
+      }
+    ))));
+  }
   if (!data || data.length === 0) {
-    return /* @__PURE__ */ React4.createElement("div", { className: "p-4 text-sm text-slate-500" }, "No data available for chart.");
+    return /* @__PURE__ */ React6.createElement("div", { className: "p-4 text-sm text-slate-500" }, "No data available for chart.");
   }
   const firstItem = sanitizedData[0];
   const allKeys = Object.keys(firstItem);
@@ -276,13 +524,13 @@ function DynamicChart({
   const renderTooltip = (row, label) => {
     var _a, _b;
     if (!row) return null;
-    return /* @__PURE__ */ React4.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__ */ React4.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]) => {
+    return /* @__PURE__ */ React6.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__ */ React6.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__ */ React4.createElement("div", { key, className: "flex items-center justify-between gap-3 text-slate-600 dark:text-white/70" }, /* @__PURE__ */ React4.createElement("span", null, (_a2 = tooltipLabelMap[key]) != null ? _a2 : key), /* @__PURE__ */ React4.createElement("span", { className: "font-medium text-slate-900 dark:text-white/90" }, String(value)));
+      return /* @__PURE__ */ React6.createElement("div", { key, className: "flex items-center justify-between gap-3 text-slate-600 dark:text-white/70" }, /* @__PURE__ */ React6.createElement("span", null, (_a2 = tooltipLabelMap[key]) != null ? _a2 : key), /* @__PURE__ */ React6.createElement("span", { className: "font-medium text-slate-900 dark:text-white/90" }, String(value)));
     }));
   };
   const getTooltipRow = (payload) => {
@@ -294,7 +542,7 @@ function DynamicChart({
     return row;
   };
   if (type === "pie") {
-    return /* @__PURE__ */ React4.createElement("div", { ref: containerRef, className: "w-full min-w-0 mt-4 mb-2 select-none overflow-hidden" }, /* @__PURE__ */ React4.createElement("div", { className: "mx-auto w-full max-w-full aspect-square" }, /* @__PURE__ */ React4.createElement(ResponsiveContainer, { width: "100%", height: "100%" }, /* @__PURE__ */ React4.createElement(PieChart, null, /* @__PURE__ */ React4.createElement(
+    return /* @__PURE__ */ React6.createElement("div", { ref: containerRef, className: "w-full min-w-0 mt-4 mb-2 select-none overflow-hidden" }, /* @__PURE__ */ React6.createElement("div", { className: "mx-auto w-full max-w-full aspect-square" }, /* @__PURE__ */ React6.createElement(ResponsiveContainer, { width: "100%", height: "100%" }, /* @__PURE__ */ React6.createElement(PieChart, null, /* @__PURE__ */ React6.createElement(
       Pie,
       {
         data: sanitizedData,
@@ -306,10 +554,10 @@ function DynamicChart({
         label: false,
         labelLine: false
       },
-      sanitizedData.map((_entry, index) => /* @__PURE__ */ React4.createElement(Cell, { key: `cell-${index}`, fill: colors[index % colors.length] }))
-    ), /* @__PURE__ */ React4.createElement(Tooltip, { content: (props) => renderTooltip(getTooltipRow(props.payload), typeof props.label === "string" ? props.label : void 0) }), showLegend && !isCompact && /* @__PURE__ */ React4.createElement(Legend, { wrapperStyle: { fontSize: 12 }, verticalAlign: "bottom" })))));
+      sanitizedData.map((_entry, index) => /* @__PURE__ */ React6.createElement(Cell, { key: `cell-${index}`, fill: colors[index % colors.length] }))
+    ), /* @__PURE__ */ React6.createElement(Tooltip, { content: (props) => renderTooltip(getTooltipRow(props.payload), typeof props.label === "string" ? props.label : void 0) }), showLegend && !isCompact && /* @__PURE__ */ React6.createElement(Legend, { wrapperStyle: { fontSize: 12 }, verticalAlign: "bottom" })))));
   }
-  return /* @__PURE__ */ React4.createElement("div", { ref: containerRef, className: "w-full min-w-0 mt-4 mb-2 select-none overflow-hidden" }, /* @__PURE__ */ React4.createElement("div", { className: "w-full aspect-[4/3]" }, /* @__PURE__ */ React4.createElement(ResponsiveContainer, { width: "100%", height: "100%" }, type === "bar" ? /* @__PURE__ */ React4.createElement(BarChart, { data: sanitizedData, margin: chartMargin }, /* @__PURE__ */ React4.createElement(CartesianGrid, { strokeDasharray: "3 3", vertical: false, stroke: "#e2e8f0" }), /* @__PURE__ */ React4.createElement(XAxis, { dataKey: finalXKey, tick: axisTick, tickFormatter: truncateAxisLabel, tickLine: false, axisLine: { stroke: "#cbd5e1" }, interval: 0, minTickGap: isTiny ? 2 : isCompact ? 6 : 12 }), /* @__PURE__ */ React4.createElement(YAxis, { tick: axisTick, tickLine: false, axisLine: false }), /* @__PURE__ */ React4.createElement(Tooltip, { content: (props) => renderTooltip(getTooltipRow(props.payload), typeof props.label === "string" ? props.label : void 0), cursor: { fill: "#f1f5f9" } }), showLegend && /* @__PURE__ */ React4.createElement(Legend, { wrapperStyle: { fontSize: isCompact ? 10 : 12 } }), finalDataKeys.map((key, index) => /* @__PURE__ */ React4.createElement(
+  return /* @__PURE__ */ React6.createElement("div", { ref: containerRef, className: "w-full min-w-0 mt-4 mb-2 select-none overflow-hidden" }, /* @__PURE__ */ React6.createElement("div", { className: "w-full aspect-[4/3]" }, /* @__PURE__ */ React6.createElement(ResponsiveContainer, { width: "100%", height: "100%" }, type === "bar" ? /* @__PURE__ */ React6.createElement(BarChart, { data: sanitizedData, margin: chartMargin }, /* @__PURE__ */ React6.createElement(CartesianGrid, { strokeDasharray: "3 3", vertical: false, stroke: "#e2e8f0" }), /* @__PURE__ */ React6.createElement(XAxis, { dataKey: finalXKey, tick: axisTick, tickFormatter: truncateAxisLabel, tickLine: false, axisLine: { stroke: "#cbd5e1" }, interval: 0, minTickGap: isTiny ? 2 : isCompact ? 6 : 12 }), /* @__PURE__ */ React6.createElement(YAxis, { tick: axisTick, tickLine: false, axisLine: false }), /* @__PURE__ */ React6.createElement(Tooltip, { content: (props) => renderTooltip(getTooltipRow(props.payload), typeof props.label === "string" ? props.label : void 0), cursor: { fill: "#f1f5f9" } }), showLegend && /* @__PURE__ */ React6.createElement(Legend, { wrapperStyle: { fontSize: isCompact ? 10 : 12 } }), finalDataKeys.map((key, index) => /* @__PURE__ */ React6.createElement(
     Bar,
     {
       key,
@@ -318,7 +566,7 @@ function DynamicChart({
       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__ */ React4.createElement(LineChart, { data: sanitizedData, margin: chartMargin }, /* @__PURE__ */ React4.createElement(CartesianGrid, { strokeDasharray: "3 3", vertical: false, stroke: "#e2e8f0" }), /* @__PURE__ */ React4.createElement(XAxis, { dataKey: finalXKey, tick: axisTick, tickFormatter: truncateAxisLabel, tickLine: false, axisLine: { stroke: "#cbd5e1" }, interval: 0, minTickGap: isTiny ? 2 : isCompact ? 6 : 12 }), /* @__PURE__ */ React4.createElement(YAxis, { tick: axisTick, tickLine: false, axisLine: false }), /* @__PURE__ */ React4.createElement(Tooltip, { content: (props) => renderTooltip(getTooltipRow(props.payload), typeof props.label === "string" ? props.label : void 0) }), showLegend && /* @__PURE__ */ React4.createElement(Legend, { wrapperStyle: { fontSize: isCompact ? 10 : 12 } }), finalDataKeys.map((key, index) => /* @__PURE__ */ React4.createElement(
+  ))) : /* @__PURE__ */ React6.createElement(LineChart, { data: sanitizedData, margin: chartMargin }, /* @__PURE__ */ React6.createElement(CartesianGrid, { strokeDasharray: "3 3", vertical: false, stroke: "#e2e8f0" }), /* @__PURE__ */ React6.createElement(XAxis, { dataKey: finalXKey, tick: axisTick, tickFormatter: truncateAxisLabel, tickLine: false, axisLine: { stroke: "#cbd5e1" }, interval: 0, minTickGap: isTiny ? 2 : isCompact ? 6 : 12 }), /* @__PURE__ */ React6.createElement(YAxis, { tick: axisTick, tickLine: false, axisLine: false }), /* @__PURE__ */ React6.createElement(Tooltip, { content: (props) => renderTooltip(getTooltipRow(props.payload), typeof props.label === "string" ? props.label : void 0) }), showLegend && /* @__PURE__ */ React6.createElement(Legend, { wrapperStyle: { fontSize: isCompact ? 10 : 12 } }), finalDataKeys.map((key, index) => /* @__PURE__ */ React6.createElement(
     Line,
     {
       key,
@@ -333,45 +581,6 @@ function DynamicChart({
 }
 
 // src/components/VisualizationRenderer.tsx
-import React5 from "react";
-import {
-  PieChart as PieChart2,
-  Pie as Pie2,
-  Cell as Cell2,
-  BarChart as BarChart2,
-  Bar as Bar2,
-  LineChart as LineChart2,
-  Line as Line2,
-  XAxis as XAxis2,
-  YAxis as YAxis2,
-  CartesianGrid as CartesianGrid2,
-  Tooltip as Tooltip2,
-  Legend as Legend2,
-  ResponsiveContainer as ResponsiveContainer2,
-  RadarChart,
-  Radar,
-  PolarGrid,
-  PolarAngleAxis,
-  PolarRadiusAxis
-} from "recharts";
-var CHART_COLORS = [
-  "#6366f1",
-  // indigo
-  "#10b981",
-  // emerald
-  "#f59e0b",
-  // amber
-  "#ef4444",
-  // red
-  "#8b5cf6",
-  // purple
-  "#ec4899",
-  // pink
-  "#06b6d4",
-  // cyan
-  "#f97316"
-  // orange
-];
 function getColor(index) {
   return CHART_COLORS[index % CHART_COLORS.length];
 }
@@ -381,60 +590,71 @@ function CustomTooltip({
   label
 }) {
   if (!active || !payload || payload.length === 0) return null;
-  return /* @__PURE__ */ React5.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__ */ React5.createElement("p", { className: "mb-2 font-semibold text-slate-800 dark:text-white/90" }, label), payload.map((entry, i) => /* @__PURE__ */ React5.createElement("div", { key: i, className: "flex items-center justify-between gap-3 text-slate-600 dark:text-white/70" }, /* @__PURE__ */ React5.createElement("span", { className: "flex items-center gap-1.5" }, entry.color && /* @__PURE__ */ React5.createElement(
+  return /* @__PURE__ */ React7.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__ */ React7.createElement("p", { className: "mb-2 font-semibold text-slate-800 dark:text-white/90" }, label), payload.map((entry, i) => /* @__PURE__ */ React7.createElement("div", { key: i, className: "flex items-center justify-between gap-3 text-slate-600 dark:text-white/70" }, /* @__PURE__ */ React7.createElement("span", { className: "flex items-center gap-1.5" }, entry.color && /* @__PURE__ */ React7.createElement(
     "span",
     {
       className: "inline-block w-2 h-2 rounded-full flex-shrink-0",
       style: { background: entry.color }
     }
-  ), entry.name), /* @__PURE__ */ React5.createElement("span", { className: "font-medium text-slate-900 dark:text-white/90" }, entry.value))));
+  ), entry.name), /* @__PURE__ */ React7.createElement("span", { className: "font-medium text-slate-900 dark:text-white/90" }, entry.value))));
 }
 function VisualizationRenderer({
   data,
   className = "",
   primaryColor,
-  onAddToCart
+  onAddToCart,
+  isStreaming
 }) {
   var _a;
   if (!data) {
-    return /* @__PURE__ */ React5.createElement("div", { className: `p-4 text-gray-500 ${className}` }, "No data available for visualization");
+    return /* @__PURE__ */ React7.createElement("div", { className: `p-4 text-gray-500 ${className}` }, "No data available for visualization");
   }
-  return /* @__PURE__ */ React5.createElement("div", { className: `space-y-4 ${className}` }, /* @__PURE__ */ React5.createElement("div", { className: "space-y-1" }, /* @__PURE__ */ React5.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__ */ React5.createElement("p", { className: "text-xs text-slate-500 dark:text-slate-400" }, data.description)), renderVisualization(data.type, data.data, onAddToCart, primaryColor));
+  return /* @__PURE__ */ React7.createElement("div", { className: `space-y-4 ${className}` }, /* @__PURE__ */ React7.createElement("div", { className: "space-y-1" }, /* @__PURE__ */ React7.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__ */ React7.createElement("p", { className: "text-xs text-slate-500 dark:text-slate-400" }, 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__ */ React5.createElement(PieChartView, { data });
+        return /* @__PURE__ */ React7.createElement(PieChartView, { data, isStreaming });
       case "bar_chart":
-        return /* @__PURE__ */ React5.createElement(BarChartView, { data, primaryColor });
+        return /* @__PURE__ */ React7.createElement(BarChartView, { data, primaryColor, isStreaming });
       case "line_chart":
-        return /* @__PURE__ */ React5.createElement(LineChartView, { data, primaryColor });
+        return /* @__PURE__ */ React7.createElement(LineChartView, { data, primaryColor, isStreaming });
       case "radar_chart":
-        return /* @__PURE__ */ React5.createElement(RadarChartView, { data });
+        return /* @__PURE__ */ React7.createElement(RadarChartView, { data, isStreaming });
       case "table":
-        return /* @__PURE__ */ React5.createElement(TableView, { data });
+        return /* @__PURE__ */ React7.createElement(TableView, { data, isStreaming });
       case "product_carousel":
       case "carousel":
-        return /* @__PURE__ */ React5.createElement(CarouselView, { data, onAddToCart, primaryColor });
+        return /* @__PURE__ */ React7.createElement(CarouselView, { data, onAddToCart, primaryColor });
       case "text":
       default:
-        return /* @__PURE__ */ React5.createElement(TextView, { data });
+        return /* @__PURE__ */ React7.createElement(TextView, { data });
     }
   } catch (error) {
     console.warn("[VisualizationRenderer] Rendering failed, falling back to text:", error);
-    return /* @__PURE__ */ React5.createElement(TextView, { data: { content: "Unable to render the requested visualization." } });
+    return /* @__PURE__ */ React7.createElement(TextView, { data: { content: "Unable to render the requested visualization." } });
+  }
+}
+function ChartSkeleton({ type }) {
+  if (type === "pie") {
+    return /* @__PURE__ */ React7.createElement("div", { className: "w-full mt-4 mb-2 animate-pulse" }, /* @__PURE__ */ React7.createElement("div", { className: "mx-auto w-40 h-40 rounded-full bg-slate-100 dark:bg-white/10" }));
   }
+  if (type === "table") {
+    return /* @__PURE__ */ React7.createElement("div", { className: "w-full mt-4 mb-2 animate-pulse space-y-2" }, /* @__PURE__ */ React7.createElement("div", { className: "h-8 bg-slate-100 dark:bg-white/10 rounded" }), /* @__PURE__ */ React7.createElement("div", { className: "h-8 bg-slate-100 dark:bg-white/10 rounded" }), /* @__PURE__ */ React7.createElement("div", { className: "h-8 bg-slate-100 dark:bg-white/10 rounded" }));
+  }
+  return /* @__PURE__ */ React7.createElement("div", { className: "w-full mt-4 mb-2 animate-pulse flex items-end gap-2 h-32 px-2" }, Array.from({ length: 5 }).map((_, i) => /* @__PURE__ */ React7.createElement("div", { key: i, className: "flex-1 rounded-t-md bg-slate-100 dark:bg-white/10", style: { height: `${40 + i % 3 * 25}%` } })));
 }
-function PieChartView({ data }) {
+function PieChartView({ data, isStreaming }) {
+  if (isStreaming) return /* @__PURE__ */ React7.createElement(ChartSkeleton, { type: "pie" });
   if (!Array.isArray(data) || data.length === 0) {
-    return /* @__PURE__ */ React5.createElement("div", { className: "text-xs text-red-500" }, "Invalid pie chart data");
+    return /* @__PURE__ */ React7.createElement("div", { className: "text-xs text-red-500" }, "Invalid pie chart data");
   }
   const chartData = data.map((item) => ({
     name: item.label,
     value: item.value
   }));
-  return /* @__PURE__ */ React5.createElement("div", { className: "bg-white dark:bg-slate-900 rounded-xl border border-slate-200 dark:border-white/10 p-4 shadow-sm" }, /* @__PURE__ */ React5.createElement(ResponsiveContainer2, { width: "100%", height: 280 }, /* @__PURE__ */ React5.createElement(PieChart2, null, /* @__PURE__ */ React5.createElement(
+  return /* @__PURE__ */ React7.createElement("div", { className: "bg-white dark:bg-slate-900 rounded-xl border border-slate-200 dark:border-white/10 p-4 shadow-sm" }, /* @__PURE__ */ React7.createElement(ResponsiveContainer2, { width: "100%", height: 280 }, /* @__PURE__ */ React7.createElement(PieChart2, null, /* @__PURE__ */ React7.createElement(
     Pie2,
     {
       data: chartData,
@@ -446,12 +666,13 @@ function PieChartView({ data }) {
       label: false,
       labelLine: false
     },
-    chartData.map((_entry, index) => /* @__PURE__ */ React5.createElement(Cell2, { key: `cell-${index}`, fill: getColor(index) }))
-  ), /* @__PURE__ */ React5.createElement(Tooltip2, { content: /* @__PURE__ */ React5.createElement(CustomTooltip, null) }), /* @__PURE__ */ React5.createElement(Legend2, { wrapperStyle: { fontSize: 12 }, verticalAlign: "bottom" }))));
+    chartData.map((_entry, index) => /* @__PURE__ */ React7.createElement(Cell2, { key: `cell-${index}`, fill: getColor(index) }))
+  ), /* @__PURE__ */ React7.createElement(Tooltip2, { content: /* @__PURE__ */ React7.createElement(CustomTooltip, null) }), /* @__PURE__ */ React7.createElement(Legend2, { wrapperStyle: { fontSize: 12 }, verticalAlign: "bottom" }))));
 }
-function BarChartView({ data, primaryColor }) {
+function BarChartView({ data, primaryColor, isStreaming }) {
+  if (isStreaming) return /* @__PURE__ */ React7.createElement(ChartSkeleton, { type: "bar" });
   if (!Array.isArray(data) || data.length === 0) {
-    return /* @__PURE__ */ React5.createElement("div", { className: "text-xs text-red-500" }, "Invalid bar chart data");
+    return /* @__PURE__ */ React7.createElement("div", { className: "text-xs text-red-500" }, "Invalid bar chart data");
   }
   const chartData = data.map((item) => __spreadValues(__spreadValues({
     category: item.category,
@@ -459,7 +680,7 @@ 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__ */ React5.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__ */ React5.createElement(ResponsiveContainer2, { width: "100%", height: 260 }, /* @__PURE__ */ React5.createElement(BarChart2, { data: chartData, margin: { top: 10, right: 10, left: -20, bottom: 0 } }, /* @__PURE__ */ React5.createElement(CartesianGrid2, { strokeDasharray: "3 3", vertical: false, stroke: "#e2e8f0" }), /* @__PURE__ */ React5.createElement(
+  return /* @__PURE__ */ React7.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__ */ React7.createElement(ResponsiveContainer2, { width: "100%", height: 260 }, /* @__PURE__ */ React7.createElement(BarChart2, { data: chartData, margin: { top: 10, right: 10, left: -20, bottom: 0 } }, /* @__PURE__ */ React7.createElement(CartesianGrid2, { strokeDasharray: "3 3", vertical: false, stroke: "#e2e8f0" }), /* @__PURE__ */ React7.createElement(
     XAxis2,
     {
       dataKey: "category",
@@ -467,11 +688,12 @@ function BarChartView({ data, primaryColor }) {
       tickLine: false,
       axisLine: { stroke: "#cbd5e1" }
     }
-  ), /* @__PURE__ */ React5.createElement(YAxis2, { tick: { fontSize: 11, fill: "#64748b" }, tickLine: false, axisLine: false }), /* @__PURE__ */ React5.createElement(Tooltip2, { content: /* @__PURE__ */ React5.createElement(CustomTooltip, null), cursor: { fill: "#f1f5f9" } }), /* @__PURE__ */ React5.createElement(Legend2, { wrapperStyle: { fontSize: 12 } }), hasStock ? /* @__PURE__ */ React5.createElement(React5.Fragment, null, /* @__PURE__ */ React5.createElement(Bar2, { dataKey: "inStockCount", name: "In Stock", fill: getColor(1), radius: [4, 4, 0, 0] }), /* @__PURE__ */ React5.createElement(Bar2, { dataKey: "outOfStockCount", name: "Out of Stock", fill: getColor(3), radius: [4, 4, 0, 0] })) : /* @__PURE__ */ React5.createElement(Bar2, { dataKey: "value", name: "Value", fill: barColor, radius: [4, 4, 0, 0] }))));
+  ), /* @__PURE__ */ React7.createElement(YAxis2, { tick: { fontSize: 11, fill: "#64748b" }, tickLine: false, axisLine: false }), /* @__PURE__ */ React7.createElement(Tooltip2, { content: /* @__PURE__ */ React7.createElement(CustomTooltip, null), cursor: { fill: "#f1f5f9" } }), /* @__PURE__ */ React7.createElement(Legend2, { wrapperStyle: { fontSize: 12 } }), hasStock ? /* @__PURE__ */ React7.createElement(React7.Fragment, null, /* @__PURE__ */ React7.createElement(Bar2, { dataKey: "inStockCount", name: "In Stock", fill: getColor(1), radius: [4, 4, 0, 0] }), /* @__PURE__ */ React7.createElement(Bar2, { dataKey: "outOfStockCount", name: "Out of Stock", fill: getColor(3), radius: [4, 4, 0, 0] })) : /* @__PURE__ */ React7.createElement(Bar2, { dataKey: "value", name: "Value", fill: barColor, radius: [4, 4, 0, 0] }))));
 }
-function LineChartView({ data, primaryColor }) {
+function LineChartView({ data, primaryColor, isStreaming }) {
+  if (isStreaming) return /* @__PURE__ */ React7.createElement(ChartSkeleton, { type: "bar" });
   if (!Array.isArray(data) || data.length === 0) {
-    return /* @__PURE__ */ React5.createElement("div", { className: "text-xs text-red-500" }, "Invalid line chart data");
+    return /* @__PURE__ */ React7.createElement("div", { className: "text-xs text-red-500" }, "Invalid line chart data");
   }
   const chartData = data.map((point) => {
     var _a;
@@ -481,7 +703,7 @@ function LineChartView({ data, primaryColor }) {
     };
   });
   const lineColor = primaryColor != null ? primaryColor : getColor(0);
-  return /* @__PURE__ */ React5.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__ */ React5.createElement(ResponsiveContainer2, { width: "100%", height: 260 }, /* @__PURE__ */ React5.createElement(LineChart2, { data: chartData, margin: { top: 10, right: 10, left: -20, bottom: 0 } }, /* @__PURE__ */ React5.createElement(CartesianGrid2, { strokeDasharray: "3 3", vertical: false, stroke: "#e2e8f0" }), /* @__PURE__ */ React5.createElement(
+  return /* @__PURE__ */ React7.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__ */ React7.createElement(ResponsiveContainer2, { width: "100%", height: 260 }, /* @__PURE__ */ React7.createElement(LineChart2, { data: chartData, margin: { top: 10, right: 10, left: -20, bottom: 0 } }, /* @__PURE__ */ React7.createElement(CartesianGrid2, { strokeDasharray: "3 3", vertical: false, stroke: "#e2e8f0" }), /* @__PURE__ */ React7.createElement(
     XAxis2,
     {
       dataKey: "label",
@@ -489,7 +711,7 @@ function LineChartView({ data, primaryColor }) {
       tickLine: false,
       axisLine: { stroke: "#cbd5e1" }
     }
-  ), /* @__PURE__ */ React5.createElement(YAxis2, { tick: { fontSize: 11, fill: "#64748b" }, tickLine: false, axisLine: false }), /* @__PURE__ */ React5.createElement(Tooltip2, { content: /* @__PURE__ */ React5.createElement(CustomTooltip, null) }), /* @__PURE__ */ React5.createElement(
+  ), /* @__PURE__ */ React7.createElement(YAxis2, { tick: { fontSize: 11, fill: "#64748b" }, tickLine: false, axisLine: false }), /* @__PURE__ */ React7.createElement(Tooltip2, { content: /* @__PURE__ */ React7.createElement(CustomTooltip, null) }), /* @__PURE__ */ React7.createElement(
     Line2,
     {
       type: "monotone",
@@ -502,14 +724,15 @@ function LineChartView({ data, primaryColor }) {
     }
   ))));
 }
-function RadarChartView({ data }) {
+function RadarChartView({ data, isStreaming }) {
+  if (isStreaming) return /* @__PURE__ */ React7.createElement(ChartSkeleton, { type: "pie" });
   if (!Array.isArray(data) || data.length === 0) {
-    return /* @__PURE__ */ React5.createElement("div", { className: "text-xs text-red-500" }, "Invalid radar chart data");
+    return /* @__PURE__ */ React7.createElement("div", { className: "text-xs text-red-500" }, "Invalid radar chart data");
   }
   const productNames = Array.from(
     new Set(data.flatMap((item) => Object.keys(item).filter((key) => key !== "attribute")))
   );
-  return /* @__PURE__ */ React5.createElement("div", { className: "bg-white dark:bg-slate-900 rounded-xl border border-slate-200 dark:border-white/10 p-4 shadow-sm" }, /* @__PURE__ */ React5.createElement(ResponsiveContainer2, { width: "100%", height: 300 }, /* @__PURE__ */ React5.createElement(RadarChart, { cx: "50%", cy: "50%", outerRadius: "80%", data }, /* @__PURE__ */ React5.createElement(PolarGrid, { stroke: "#e2e8f0" }), /* @__PURE__ */ React5.createElement(PolarAngleAxis, { dataKey: "attribute", tick: { fontSize: 11, fill: "#64748b" } }), /* @__PURE__ */ React5.createElement(PolarRadiusAxis, { tick: { fontSize: 10, fill: "#64748b" } }), productNames.map((productName, index) => /* @__PURE__ */ React5.createElement(
+  return /* @__PURE__ */ React7.createElement("div", { className: "bg-white dark:bg-slate-900 rounded-xl border border-slate-200 dark:border-white/10 p-4 shadow-sm" }, /* @__PURE__ */ React7.createElement(ResponsiveContainer2, { width: "100%", height: 300 }, /* @__PURE__ */ React7.createElement(RadarChart, { cx: "50%", cy: "50%", outerRadius: "80%", data }, /* @__PURE__ */ React7.createElement(PolarGrid, { stroke: "#e2e8f0" }), /* @__PURE__ */ React7.createElement(PolarAngleAxis, { dataKey: "attribute", tick: { fontSize: 11, fill: "#64748b" } }), /* @__PURE__ */ React7.createElement(PolarRadiusAxis, { tick: { fontSize: 10, fill: "#64748b" } }), productNames.map((productName, index) => /* @__PURE__ */ React7.createElement(
     Radar,
     {
       key: productName,
@@ -519,26 +742,27 @@ function RadarChartView({ data }) {
       fill: getColor(index),
       fillOpacity: 0.4
     }
-  )), /* @__PURE__ */ React5.createElement(Tooltip2, { content: /* @__PURE__ */ React5.createElement(CustomTooltip, null) }), /* @__PURE__ */ React5.createElement(Legend2, { wrapperStyle: { fontSize: 12 } }))));
+  )), /* @__PURE__ */ React7.createElement(Tooltip2, { content: /* @__PURE__ */ React7.createElement(CustomTooltip, null) }), /* @__PURE__ */ React7.createElement(Legend2, { wrapperStyle: { fontSize: 12 } }))));
 }
-function TableView({ data }) {
+function TableView({ data, isStreaming }) {
+  if (isStreaming) return /* @__PURE__ */ React7.createElement(ChartSkeleton, { type: "table" });
   if (!(data == null ? void 0 : data.columns) || !(data == null ? void 0 : data.rows)) {
-    return /* @__PURE__ */ React5.createElement("div", { className: "text-xs text-red-500" }, "Invalid table data");
+    return /* @__PURE__ */ React7.createElement("div", { className: "text-xs text-red-500" }, "Invalid table data");
   }
-  return /* @__PURE__ */ React5.createElement("div", { className: "bg-white dark:bg-slate-900 rounded-xl border border-slate-200 dark:border-white/10 shadow-sm overflow-hidden" }, /* @__PURE__ */ React5.createElement("div", { className: "overflow-x-auto" }, /* @__PURE__ */ React5.createElement("table", { className: "w-full text-sm border-collapse" }, /* @__PURE__ */ React5.createElement("thead", { className: "bg-slate-50 dark:bg-white/5 border-b border-slate-200 dark:border-white/10" }, /* @__PURE__ */ React5.createElement("tr", null, data.columns.map((col, idx) => /* @__PURE__ */ React5.createElement(
+  return /* @__PURE__ */ React7.createElement("div", { className: "bg-white dark:bg-slate-900 rounded-xl border border-slate-200 dark:border-white/10 shadow-sm overflow-hidden" }, /* @__PURE__ */ React7.createElement("div", { className: "overflow-x-auto" }, /* @__PURE__ */ React7.createElement("table", { className: "w-full text-sm border-collapse" }, /* @__PURE__ */ React7.createElement("thead", { className: "bg-slate-50 dark:bg-white/5 border-b border-slate-200 dark:border-white/10" }, /* @__PURE__ */ React7.createElement("tr", null, data.columns.map((col, idx) => /* @__PURE__ */ React7.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__ */ React5.createElement("tbody", { className: "divide-y divide-slate-100 dark:divide-white/5" }, data.rows.map((row, rowIdx) => /* @__PURE__ */ React5.createElement(
+  )))), /* @__PURE__ */ React7.createElement("tbody", { className: "divide-y divide-slate-100 dark:divide-white/5" }, data.rows.map((row, rowIdx) => /* @__PURE__ */ React7.createElement(
     "tr",
     {
       key: rowIdx,
       className: "hover:bg-slate-50/60 dark:hover:bg-white/5 transition-colors"
     },
-    row.map((cell, cellIdx) => /* @__PURE__ */ React5.createElement(
+    row.map((cell, cellIdx) => /* @__PURE__ */ React7.createElement(
       "td",
       {
         key: cellIdx,
@@ -546,7 +770,7 @@ function TableView({ data }) {
       },
       String(cell)
     ))
-  ))))), /* @__PURE__ */ React5.createElement("div", { className: "px-4 py-2 bg-slate-50 dark:bg-white/5 border-t border-slate-100 dark:border-white/5" }, /* @__PURE__ */ React5.createElement("p", { className: "text-[11px] text-slate-400 dark:text-white/30" }, data.rows.length, " row", data.rows.length !== 1 ? "s" : "")));
+  ))))), /* @__PURE__ */ React7.createElement("div", { className: "px-4 py-2 bg-slate-50 dark:bg-white/5 border-t border-slate-100 dark:border-white/5" }, /* @__PURE__ */ React7.createElement("p", { className: "text-[11px] text-slate-400 dark:text-white/30" }, data.rows.length, " row", data.rows.length !== 1 ? "s" : "")));
 }
 function CarouselView({
   data,
@@ -554,7 +778,7 @@ function CarouselView({
   primaryColor
 }) {
   if (!Array.isArray(data)) {
-    return /* @__PURE__ */ React5.createElement("div", { className: "text-xs text-red-500" }, "Invalid carousel data");
+    return /* @__PURE__ */ React7.createElement("div", { className: "text-xs text-red-500" }, "Invalid carousel data");
   }
   const products = data.map((product) => ({
     id: product.id,
@@ -566,7 +790,7 @@ function CarouselView({
     description: product.description,
     inStock: product.inStock
   }));
-  return /* @__PURE__ */ React5.createElement("div", { className: "w-full" }, /* @__PURE__ */ React5.createElement(
+  return /* @__PURE__ */ React7.createElement("div", { className: "w-full" }, /* @__PURE__ */ React7.createElement(
     ProductCarousel,
     {
       products,
@@ -577,10 +801,272 @@ function CarouselView({
 }
 function TextView({ data }) {
   const content = (data == null ? void 0 : data.content) || String(data != null ? data : "");
-  return /* @__PURE__ */ React5.createElement("div", { className: "bg-white dark:bg-slate-900 rounded-xl border border-slate-200 dark:border-white/10 p-4 shadow-sm" }, /* @__PURE__ */ React5.createElement("p", { className: "text-sm text-slate-700 dark:text-slate-300 whitespace-pre-wrap leading-relaxed" }, content));
+  return /* @__PURE__ */ React7.createElement("div", { className: "bg-white dark:bg-slate-900 rounded-xl border border-slate-200 dark:border-white/10 p-4 shadow-sm" }, /* @__PURE__ */ React7.createElement("p", { className: "text-sm text-slate-700 dark:text-slate-300 whitespace-pre-wrap leading-relaxed" }, content));
 }
 
-// src/components/MessageBubble.tsx
+// src/components/ObservabilityPanel.tsx
+import React8 from "react";
+import {
+  Clock,
+  Cpu,
+  Zap,
+  AlertTriangle,
+  FileText,
+  Layers,
+  ChevronDown as ChevronDown2,
+  ChevronRight as ChevronRight2,
+  CheckCircle as CheckCircle2,
+  AlertCircle as AlertCircle2
+} from "lucide-react";
+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__ */ React8.createElement("span", { className: `inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-[11px] font-semibold border ${color}` }, pct <= 20 ? /* @__PURE__ */ React8.createElement(CheckCircle2, { className: "w-3 h-3" }) : /* @__PURE__ */ React8.createElement(AlertCircle2, { className: "w-3 h-3" }), pct, "% hallucination risk");
+}
+function RetrievalTab({ trace }) {
+  return /* @__PURE__ */ React8.createElement("div", { className: "space-y-2" }, /* @__PURE__ */ React8.createElement("p", { className: "text-[11px] text-slate-500 dark:text-white/40" }, trace.chunks.length, " chunk", trace.chunks.length !== 1 ? "s" : "", " retrieved", trace.rewrittenQuery && /* @__PURE__ */ React8.createElement("span", { className: "ml-2 italic" }, "(query rewritten: ", /* @__PURE__ */ React8.createElement("em", { className: "text-indigo-500" }, trace.rewrittenQuery), ")")), /* @__PURE__ */ React8.createElement("div", { className: "space-y-1.5 max-h-56 overflow-y-auto pr-1 custom-scrollbar" }, trace.chunks.map((chunk, i) => /* @__PURE__ */ React8.createElement(
+    "div",
+    {
+      key: String(chunk.id),
+      className: "rounded-lg border border-slate-100 dark:border-white/8 bg-slate-50 dark:bg-white/3 p-2.5"
+    },
+    /* @__PURE__ */ React8.createElement("div", { className: "flex items-center justify-between mb-1" }, /* @__PURE__ */ React8.createElement("span", { className: "text-[10px] font-mono text-slate-400 dark:text-white/30" }, "[", i + 1, "] ", String(chunk.id).slice(0, 20)), /* @__PURE__ */ React8.createElement("span", { className: "text-[10px] font-semibold text-indigo-600 dark:text-indigo-400" }, "score: ", chunk.score.toFixed(3))),
+    /* @__PURE__ */ React8.createElement("div", { className: "h-1 rounded-full bg-slate-200 dark:bg-white/10 mb-2 overflow-hidden" }, /* @__PURE__ */ React8.createElement(
+      "div",
+      {
+        className: "h-full rounded-full bg-indigo-500 dark:bg-indigo-400 transition-all",
+        style: { width: `${Math.min(100, chunk.score * 100)}%` }
+      }
+    )),
+    /* @__PURE__ */ React8.createElement("p", { className: "text-[11px] text-slate-600 dark:text-white/60 line-clamp-2 leading-relaxed" }, chunk.content)
+  ))));
+}
+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__ */ React8.createElement("div", { className: "space-y-3" }, /* @__PURE__ */ React8.createElement("div", { className: "flex items-center justify-between" }, /* @__PURE__ */ React8.createElement("span", { className: "text-[11px] text-slate-500 dark:text-white/40" }, "Pipeline stages"), /* @__PURE__ */ React8.createElement("span", { className: "text-[11px] font-semibold text-slate-700 dark:text-white/70" }, "Total: ", fmtMs(latency.totalMs))), /* @__PURE__ */ React8.createElement("div", { className: "space-y-2" }, bars.map((bar) => /* @__PURE__ */ React8.createElement("div", { key: bar.label, className: "space-y-0.5" }, /* @__PURE__ */ React8.createElement("div", { className: "flex items-center justify-between" }, /* @__PURE__ */ React8.createElement("span", { className: "text-[11px] text-slate-600 dark:text-white/60" }, bar.label), /* @__PURE__ */ React8.createElement("span", { className: "text-[11px] font-mono text-slate-500 dark:text-white/40" }, fmtMs(bar.ms))), /* @__PURE__ */ React8.createElement("div", { className: "h-2 rounded-full bg-slate-100 dark:bg-white/8 overflow-hidden" }, /* @__PURE__ */ React8.createElement(
+    "div",
+    {
+      className: "h-full rounded-full transition-all duration-700",
+      style: {
+        width: `${bar.ms / maxMs * 100}%`,
+        background: bar.color,
+        opacity: 0.85
+      }
+    }
+  ))))));
+}
+function TokensTab({ trace }) {
+  const { tokens } = trace;
+  if (!tokens) {
+    return /* @__PURE__ */ React8.createElement("p", { className: "text-[11px] text-slate-400 dark:text-white/30 italic" }, "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__ */ React8.createElement("div", { className: "space-y-3" }, /* @__PURE__ */ React8.createElement("div", { className: "grid grid-cols-3 gap-2" }, stats.map((s) => /* @__PURE__ */ React8.createElement("div", { key: s.label, className: "rounded-lg border border-slate-100 dark:border-white/8 bg-slate-50 dark:bg-white/3 p-2.5 text-center" }, /* @__PURE__ */ React8.createElement("p", { className: `text-lg font-bold ${s.color}` }, s.value), /* @__PURE__ */ React8.createElement("p", { className: "text-[10px] text-slate-400 dark:text-white/30 mt-0.5" }, s.label)))), tokens.estimatedCostUsd != null && /* @__PURE__ */ React8.createElement("div", { className: "flex items-center justify-between rounded-lg border border-emerald-100 dark:border-emerald-500/20 bg-emerald-50 dark:bg-emerald-500/10 px-3 py-2" }, /* @__PURE__ */ React8.createElement("span", { className: "text-[11px] text-emerald-700 dark:text-emerald-400 font-medium" }, "Estimated Cost"), /* @__PURE__ */ React8.createElement("span", { className: "text-[11px] font-bold text-emerald-700 dark:text-emerald-400" }, "$", tokens.estimatedCostUsd < 1e-4 ? tokens.estimatedCostUsd.toExponential(2) : tokens.estimatedCostUsd.toFixed(5), " USD")), /* @__PURE__ */ React8.createElement("div", { className: "h-2 rounded-full overflow-hidden flex" }, /* @__PURE__ */ React8.createElement(
+    "div",
+    {
+      className: "h-full bg-indigo-500 dark:bg-indigo-400",
+      style: { width: `${tokens.promptTokens / tokens.totalTokens * 100}%` },
+      title: "Prompt tokens"
+    }
+  ), /* @__PURE__ */ React8.createElement(
+    "div",
+    {
+      className: "h-full bg-emerald-500 dark:bg-emerald-400",
+      style: { width: `${tokens.completionTokens / tokens.totalTokens * 100}%` },
+      title: "Completion tokens"
+    }
+  )), /* @__PURE__ */ React8.createElement("div", { className: "flex gap-3 text-[10px] text-slate-400 dark:text-white/30" }, /* @__PURE__ */ React8.createElement("span", { className: "flex items-center gap-1" }, /* @__PURE__ */ React8.createElement("span", { className: "inline-block w-2 h-2 rounded-full bg-indigo-500" }), " Prompt"), /* @__PURE__ */ React8.createElement("span", { className: "flex items-center gap-1" }, /* @__PURE__ */ React8.createElement("span", { className: "inline-block w-2 h-2 rounded-full bg-emerald-500" }), " Completion")));
+}
+function HallucinationTab({ trace }) {
+  if (trace.hallucinationScore == null) {
+    return /* @__PURE__ */ React8.createElement("p", { className: "text-[11px] text-slate-400 dark:text-white/30 italic" }, "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__ */ React8.createElement("div", { className: "space-y-3" }, /* @__PURE__ */ React8.createElement("div", { className: "flex items-center justify-between" }, /* @__PURE__ */ React8.createElement(ScoreBadge, { score }), /* @__PURE__ */ React8.createElement("span", { className: "text-[11px] font-mono text-slate-500 dark:text-white/40" }, pct, "/100")), /* @__PURE__ */ React8.createElement("div", { className: "h-3 rounded-full bg-slate-100 dark:bg-white/8 overflow-hidden" }, /* @__PURE__ */ React8.createElement(
+    "div",
+    {
+      className: "h-full rounded-full transition-all duration-700",
+      style: { width: `${pct}%`, background: barColor }
+    }
+  )), trace.hallucinationReason && /* @__PURE__ */ React8.createElement("div", { className: "rounded-lg border border-slate-100 dark:border-white/8 bg-slate-50 dark:bg-white/3 p-2.5" }, /* @__PURE__ */ React8.createElement("p", { className: "text-[11px] text-slate-500 dark:text-white/40 font-medium mb-0.5" }, "AI self-assessment"), /* @__PURE__ */ React8.createElement("p", { className: "text-[11px] text-slate-700 dark:text-white/70 leading-relaxed" }, trace.hallucinationReason)), /* @__PURE__ */ React8.createElement("div", { className: "flex gap-2 text-[10px] text-slate-400 dark:text-white/30" }, /* @__PURE__ */ React8.createElement("span", { className: "flex items-center gap-1" }, /* @__PURE__ */ React8.createElement("span", { className: "inline-block w-2 h-2 rounded-full bg-emerald-500" }), " 0\u201320%: Grounded"), /* @__PURE__ */ React8.createElement("span", { className: "flex items-center gap-1" }, /* @__PURE__ */ React8.createElement("span", { className: "inline-block w-2 h-2 rounded-full bg-amber-500" }), " 21\u201350%: Uncertain"), /* @__PURE__ */ React8.createElement("span", { className: "flex items-center gap-1" }, /* @__PURE__ */ React8.createElement("span", { className: "inline-block w-2 h-2 rounded-full bg-red-500" }), " 51\u2013100%: Risk")));
+}
+function PromptTab({ trace }) {
+  const [showSystem, setShowSystem] = React8.useState(false);
+  return /* @__PURE__ */ React8.createElement("div", { className: "space-y-3" }, /* @__PURE__ */ React8.createElement("div", null, /* @__PURE__ */ React8.createElement(
+    "button",
+    {
+      onClick: () => setShowSystem((s) => !s),
+      className: "flex items-center gap-1.5 text-[11px] font-semibold text-slate-600 dark:text-white/60 hover:text-slate-900 dark:hover:text-white/80 transition-colors mb-1.5"
+    },
+    showSystem ? /* @__PURE__ */ React8.createElement(ChevronDown2, { className: "w-3 h-3" }) : /* @__PURE__ */ React8.createElement(ChevronRight2, { className: "w-3 h-3" }),
+    "System Prompt"
+  ), showSystem && /* @__PURE__ */ React8.createElement("pre", { className: "text-[10px] font-mono text-slate-600 dark:text-white/60 bg-slate-900 dark:bg-black/30 rounded-lg p-3 overflow-auto max-h-40 whitespace-pre-wrap leading-relaxed" }, trace.systemPrompt || "(empty)")), /* @__PURE__ */ React8.createElement("div", null, /* @__PURE__ */ React8.createElement("p", { className: "text-[11px] font-semibold text-slate-600 dark:text-white/60 mb-1.5" }, "User Prompt"), /* @__PURE__ */ React8.createElement("pre", { className: "text-[10px] font-mono text-slate-600 dark:text-white/60 bg-slate-900 dark:bg-black/30 rounded-lg p-3 overflow-auto max-h-40 whitespace-pre-wrap leading-relaxed" }, trace.userPrompt)));
+}
+function ChunksTab({ trace }) {
+  const [expanded, setExpanded] = React8.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__ */ React8.createElement("div", { className: "space-y-1.5 max-h-64 overflow-y-auto pr-1 custom-scrollbar" }, trace.chunks.map((chunk, i) => {
+    const isOpen = expanded.has(i);
+    return /* @__PURE__ */ React8.createElement(
+      "div",
+      {
+        key: String(chunk.id),
+        className: "rounded-lg border border-slate-100 dark:border-white/8 bg-slate-50 dark:bg-white/3 overflow-hidden"
+      },
+      /* @__PURE__ */ React8.createElement(
+        "button",
+        {
+          onClick: () => toggle(i),
+          className: "w-full flex items-center justify-between px-3 py-2 text-left hover:bg-slate-100 dark:hover:bg-white/5 transition-colors"
+        },
+        /* @__PURE__ */ React8.createElement("div", { className: "flex items-center gap-2" }, isOpen ? /* @__PURE__ */ React8.createElement(ChevronDown2, { className: "w-3 h-3 text-slate-400" }) : /* @__PURE__ */ React8.createElement(ChevronRight2, { className: "w-3 h-3 text-slate-400" }), /* @__PURE__ */ React8.createElement("span", { className: "text-[11px] font-medium text-slate-700 dark:text-white/70" }, "Chunk ", i + 1), /* @__PURE__ */ React8.createElement("span", { className: "text-[10px] font-mono text-slate-400 dark:text-white/30" }, String(chunk.id).slice(0, 16))),
+        /* @__PURE__ */ React8.createElement("span", { className: "text-[10px] font-semibold text-indigo-600 dark:text-indigo-400" }, chunk.score.toFixed(3))
+      ),
+      isOpen && /* @__PURE__ */ React8.createElement("div", { className: "px-3 pb-3 space-y-2 border-t border-slate-100 dark:border-white/5 pt-2" }, /* @__PURE__ */ React8.createElement("div", null, /* @__PURE__ */ React8.createElement("p", { className: "text-[10px] text-slate-400 dark:text-white/30 font-semibold uppercase tracking-wider mb-1" }, "Content"), /* @__PURE__ */ React8.createElement("p", { className: "text-[11px] text-slate-600 dark:text-white/60 leading-relaxed whitespace-pre-wrap" }, chunk.content)), Object.keys(chunk.metadata).length > 0 && /* @__PURE__ */ React8.createElement("div", null, /* @__PURE__ */ React8.createElement("p", { className: "text-[10px] text-slate-400 dark:text-white/30 font-semibold uppercase tracking-wider mb-1" }, "Metadata"), /* @__PURE__ */ React8.createElement("pre", { className: "text-[10px] font-mono text-slate-500 dark:text-white/40 bg-slate-900 dark:bg-black/30 rounded-md p-2 overflow-auto max-h-24" }, JSON.stringify(chunk.metadata, null, 2))))
+    );
+  }));
+}
+var TABS = [
+  { id: "retrieval", label: "Retrieval", icon: /* @__PURE__ */ React8.createElement(Layers, { className: "w-3 h-3" }) },
+  { id: "latency", label: "Latency", icon: /* @__PURE__ */ React8.createElement(Clock, { className: "w-3 h-3" }) },
+  { id: "tokens", label: "Tokens", icon: /* @__PURE__ */ React8.createElement(Cpu, { className: "w-3 h-3" }) },
+  { id: "hallucination", label: "Grounding", icon: /* @__PURE__ */ React8.createElement(AlertTriangle, { className: "w-3 h-3" }) },
+  { id: "prompt", label: "Prompt", icon: /* @__PURE__ */ React8.createElement(FileText, { className: "w-3 h-3" }) },
+  { id: "chunks", label: "Chunks", icon: /* @__PURE__ */ React8.createElement(Zap, { className: "w-3 h-3" }) }
+];
+function ObservabilityPanel({ trace, primaryColor = "#6366f1" }) {
+  const [activeTab, setActiveTab] = React8.useState("retrieval");
+  return /* @__PURE__ */ React8.createElement("div", { className: "mt-2 w-full rounded-xl border border-slate-200 dark:border-white/8 bg-white dark:bg-slate-900/60 shadow-sm overflow-hidden text-[12px]" }, /* @__PURE__ */ React8.createElement(
+    "div",
+    {
+      className: "flex items-center gap-2 px-3 py-2 border-b border-slate-100 dark:border-white/8",
+      style: { background: `${primaryColor}08` }
+    },
+    /* @__PURE__ */ React8.createElement(
+      "span",
+      {
+        className: "inline-flex items-center gap-1 text-[10px] font-bold uppercase tracking-wider",
+        style: { color: primaryColor }
+      },
+      /* @__PURE__ */ React8.createElement(Zap, { className: "w-3 h-3" }),
+      "Observability Trace"
+    ),
+    /* @__PURE__ */ React8.createElement("span", { className: "text-[10px] text-slate-400 dark:text-white/30 ml-auto font-mono" }, trace.requestId)
+  ), /* @__PURE__ */ React8.createElement("div", { className: "flex border-b border-slate-100 dark:border-white/8 overflow-x-auto" }, TABS.map((tab) => /* @__PURE__ */ React8.createElement(
+    "button",
+    {
+      key: tab.id,
+      onClick: () => setActiveTab(tab.id),
+      className: `flex items-center gap-1.5 px-3 py-2 text-[10px] font-semibold whitespace-nowrap transition-colors border-b-2 ${activeTab === tab.id ? "border-b-2 text-indigo-600 dark:text-indigo-400" : "border-transparent text-slate-400 dark:text-white/30 hover:text-slate-600 dark:hover:text-white/60"}`,
+      style: activeTab === tab.id ? { borderBottomColor: primaryColor, color: primaryColor } : {}
+    },
+    tab.icon,
+    tab.label
+  ))), /* @__PURE__ */ React8.createElement("div", { className: "p-3" }, activeTab === "retrieval" && /* @__PURE__ */ React8.createElement(RetrievalTab, { trace }), activeTab === "latency" && /* @__PURE__ */ React8.createElement(LatencyTab, { trace }), activeTab === "tokens" && /* @__PURE__ */ React8.createElement(TokensTab, { trace }), activeTab === "hallucination" && /* @__PURE__ */ React8.createElement(HallucinationTab, { trace }), activeTab === "prompt" && /* @__PURE__ */ React8.createElement(PromptTab, { trace }), activeTab === "chunks" && /* @__PURE__ */ React8.createElement(ChunksTab, { trace })));
+}
+
+// src/components/HourglassLoader.tsx
+import React9 from "react";
+var HourglassLoader = ({
+  size = 16,
+  primaryColor = "#10b981",
+  glow = false
+}) => {
+  return /* @__PURE__ */ React9.createElement(
+    "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"
+      }
+    },
+    /* @__PURE__ */ React9.createElement("g", null, /* @__PURE__ */ React9.createElement(
+      "animateTransform",
+      {
+        attributeName: "transform",
+        type: "rotate",
+        calcMode: "spline",
+        values: "0 50 50; 0 50 50; 180 50 50",
+        keyTimes: "0; 0.8; 1",
+        keySplines: "0 0 1 1; 0.4 0 0.2 1",
+        dur: "2s",
+        repeatCount: "indefinite"
+      }
+    ), /* @__PURE__ */ React9.createElement(
+      "path",
+      {
+        d: "M 25 15 L 75 15 L 75 20 L 55 50 L 75 80 L 75 85 L 25 85 L 25 80 L 45 50 L 25 20 Z",
+        fill: "none",
+        stroke: primaryColor,
+        strokeWidth: "5",
+        strokeLinejoin: "round",
+        strokeLinecap: "round"
+      }
+    ), /* @__PURE__ */ React9.createElement("path", { fill: primaryColor }, /* @__PURE__ */ React9.createElement(
+      "animate",
+      {
+        attributeName: "d",
+        values: "M 30 20 L 70 20 L 50 50 L 50 50 Z; M 50 50 L 50 50 L 50 50 L 50 50 Z; M 50 50 L 50 50 L 50 50 L 50 50 Z",
+        keyTimes: "0; 0.8; 1",
+        dur: "2s",
+        repeatCount: "indefinite"
+      }
+    )), /* @__PURE__ */ React9.createElement("path", { fill: primaryColor }, /* @__PURE__ */ React9.createElement(
+      "animate",
+      {
+        attributeName: "d",
+        values: "M 30 80 L 70 80 L 70 80 L 30 80 Z; M 30 80 L 70 80 L 50 50 L 50 50 Z; M 30 80 L 70 80 L 50 50 L 50 50 Z",
+        keyTimes: "0; 0.8; 1",
+        dur: "2s",
+        repeatCount: "indefinite"
+      }
+    )), /* @__PURE__ */ React9.createElement("line", { x1: "50", y1: "50", x2: "50", y2: "80", stroke: primaryColor, strokeWidth: "3" }, /* @__PURE__ */ React9.createElement(
+      "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/ProductExtractor.ts
 function sanitizeJson(raw) {
   let s = raw.trim();
   s = s.replace(
@@ -597,36 +1083,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))) {
@@ -727,10 +1211,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"]) {
@@ -740,92 +1220,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) && !React6.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 = React6.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");
+    console.log("\u{1F680} ~ extractProductsFromSources ~ description:", s);
+    return {
+      id: s.id,
+      name: (_b = name != null ? name : s.content.split("\n")[0]) != null ? _b : "Unknown Product",
+      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) {
+  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 (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)
-      }));
+  }
+  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) {
+      }
     }
-    return rowKeys.map((key) => ({ label: formatColumnLabel(key), accessor: key }));
-  }, [config]);
-  if (!config.data.length || !columns.length) {
-    return /* @__PURE__ */ React6.createElement("p", { className: "text-xs text-slate-400 italic my-2" }, "No data to display.");
   }
-  const formatCell = (val) => {
-    if (val === null || val === void 0) return "\u2014";
-    if (typeof val === "boolean") return val ? "\u2713" : "\u2717";
-    return String(val);
-  };
-  return /* @__PURE__ */ React6.createElement("div", { className: "my-4 rounded-xl border border-slate-200 dark:border-white/10 shadow-sm overflow-hidden" }, config.title && /* @__PURE__ */ React6.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__ */ React6.createElement("p", { className: "text-xs font-semibold text-slate-600 dark:text-white/70 uppercase tracking-wide" }, config.title)), /* @__PURE__ */ React6.createElement("div", { className: "overflow-x-auto" }, /* @__PURE__ */ React6.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__ */ React6.createElement("thead", { className: "bg-slate-50 dark:bg-white/5 border-b border-slate-200 dark:border-white/10" }, /* @__PURE__ */ React6.createElement("tr", null, columns.map((column) => /* @__PURE__ */ React6.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__ */ React6.createElement("tbody", null, config.data.map((row, ri) => /* @__PURE__ */ React6.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__ */ React6.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__ */ React6.createElement("div", { className: "px-4 py-2 bg-slate-50 dark:bg-white/5 border-t border-slate-100 dark:border-white/5" }, /* @__PURE__ */ React6.createElement("p", { className: "text-[11px] text-slate-400 dark:text-white/30" }, config.data.length, " row", config.data.length !== 1 ? "s" : "")));
+  const bulletRegex = /^[ \t]*(?:[•*-]|\d+\.)\s+(?:\*\*)?([^\n\-\$–—\(]+?)(?:\*\*)?(?:\s*\(?Price\s*[:\-–—]?\s*)?(?:\s*[:\-–—]\s*|\s+)\$?([\d,.]+)(?:\s*USD)?/gim;
+  const matches = Array.from(cleanContent.matchAll(bulletRegex));
+  if (matches.length >= 2) {
+    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}`);
+      }
+    }
+    cleanContent = cleanContent.replace(/\n{3,}/g, "\n\n").trim();
+  }
+  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
+import React11 from "react";
+
+// src/components/UIDispatcher.tsx
+import React10 from "react";
 function normalizeTabularRows(rows, columns) {
   if (!Array.isArray(rows)) return [];
   const SYNONYMS = {
@@ -893,8 +1421,7 @@ function resolveStructuredRows(config) {
 }
 function UIDispatcher({ rawContent, primaryColor, accentColor, isStreaming, onAddToCart, viewportSize = "large" }) {
   var _a;
-  const result = React6.useMemo(() => {
-    if (isStreaming) return { loading: true };
+  const result = React10.useMemo(() => {
     try {
       const clean = rawContent.replace(/^```[a-z]*\s*/i, "").replace(/```\s*$/, "").trim();
       const parsed = JSON.parse(sanitizeJson(extractLikelyJsonBlock(clean)));
@@ -923,10 +1450,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), {
@@ -934,22 +1461,25 @@ 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__ */ React6.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__ */ React6.createElement("div", { className: "w-5 h-5 border-2 border-indigo-500 border-t-transparent rounded-full animate-spin" }), /* @__PURE__ */ React6.createElement("p", { className: "text-xs text-slate-500 font-medium italic" }, "Preparing view..."));
+    return /* @__PURE__ */ React10.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__ */ React10.createElement("div", { className: "w-5 h-5 border-2 border-indigo-500 border-t-transparent rounded-full animate-spin" }), /* @__PURE__ */ React10.createElement("p", { className: "text-xs text-slate-500 font-medium italic" }, "Preparing view..."));
   }
   if ("error" in result) {
-    return /* @__PURE__ */ React6.createElement("pre", { className: "p-4 my-2 bg-slate-900 text-slate-100 rounded-lg text-[10px] overflow-auto max-h-40" }, /* @__PURE__ */ React6.createElement("code", null, rawContent));
+    return /* @__PURE__ */ React10.createElement("pre", { className: "p-4 my-2 bg-slate-900 text-slate-100 rounded-lg text-[10px] overflow-auto max-h-40" }, /* @__PURE__ */ React10.createElement("code", null, rawContent));
   }
   const { config } = result;
   const isCompact = viewportSize === "compact";
   const hasInsights = Array.isArray(config.insights) && config.insights.length > 0;
   const hasDescription = typeof config.description === "string" && config.description.trim().length > 0;
+  console.log("\u{1F680} ~ UIDispatcher ~ description:", config.description);
+  console.log("\u{1F680} ~ UIDispatcher ~ hasDescription:", hasDescription);
   switch (config.view) {
     case "chart":
-      return /* @__PURE__ */ React6.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__ */ React6.createElement("h4", { className: `${isCompact ? "text-[11px] mb-3" : "text-xs mb-4"} font-semibold text-slate-500 px-2` }, config.title), hasDescription && /* @__PURE__ */ React6.createElement("p", { className: `px-2 ${isCompact ? "text-xs" : "text-sm"} text-slate-500 dark:text-white/60` }, config.description), /* @__PURE__ */ React6.createElement(
+      return /* @__PURE__ */ React10.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__ */ React10.createElement("h4", { className: `${isCompact ? "text-[11px] mb-3" : "text-xs mb-4"} font-semibold text-slate-500 px-2` }, config.title), hasDescription && /* @__PURE__ */ React10.createElement("p", { className: `px-2 ${isCompact ? "text-xs" : "text-sm"} text-slate-500 dark:text-white/60` }, config.description), /* @__PURE__ */ React10.createElement(
         DynamicChart,
         {
           config: {
@@ -961,9 +1491,10 @@ function UIDispatcher({ rawContent, primaryColor, accentColor, isStreaming, onAd
           },
           primaryColor,
           accentColor,
-          viewportSize
+          viewportSize,
+          isStreaming
         }
-      ), hasInsights && /* @__PURE__ */ React6.createElement("div", { className: "mt-4 flex flex-wrap gap-2 px-2" }, (_a = config.insights) == null ? void 0 : _a.map((insight, i) => /* @__PURE__ */ React6.createElement(
+      ), hasInsights && /* @__PURE__ */ React10.createElement("div", { className: "mt-4 flex flex-wrap gap-2 px-2" }, (_a = config.insights) == null ? void 0 : _a.map((insight, i) => /* @__PURE__ */ React10.createElement(
         "span",
         {
           key: `insight-${i}`,
@@ -972,26 +1503,151 @@ function UIDispatcher({ rawContent, primaryColor, accentColor, isStreaming, onAd
         String(insight)
       ))));
     case "carousel":
-      return /* @__PURE__ */ React6.createElement("div", { className: "my-4" }, config.title && /* @__PURE__ */ React6.createElement("h4", { className: `${isCompact ? "mb-1.5 text-[11px]" : "mb-2 text-xs"} font-semibold text-slate-500` }, config.title), hasDescription && /* @__PURE__ */ React6.createElement("p", { className: `mb-3 ${isCompact ? "text-xs" : "text-sm"} text-slate-500 dark:text-white/60` }, config.description), /* @__PURE__ */ React6.createElement(ProductCarousel, { products: config.data.map((item) => {
+      return /* @__PURE__ */ React10.createElement("div", { className: "my-4" }, config.title && /* @__PURE__ */ React10.createElement("h4", { className: `${isCompact ? "mb-1.5 text-[11px]" : "mb-2 text-xs"} font-semibold text-slate-500` }, config.title), hasDescription && /* @__PURE__ */ React10.createElement("p", { className: `mb-3 ${isCompact ? "text-xs" : "text-sm"} text-slate-500 dark:text-white/60` }, config.description), /* @__PURE__ */ React10.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 }));
     case "table":
-      return /* @__PURE__ */ React6.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__ */ React6.createElement("h4", { className: `${isCompact ? "text-[11px]" : "text-xs"} font-semibold text-slate-500 mb-2` }, config.title), hasDescription && /* @__PURE__ */ React6.createElement("p", { className: `mb-3 ${isCompact ? "text-xs" : "text-sm"} text-slate-500 dark:text-white/60` }, config.description), /* @__PURE__ */ React6.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__ */ React10.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__ */ React10.createElement("h4", { className: `${isCompact ? "text-[11px]" : "text-xs"} font-semibold text-slate-500 mb-2` }, config.title), hasDescription && /* @__PURE__ */ React10.createElement("p", { className: `mb-3 ${isCompact ? "text-xs" : "text-sm"} text-slate-500 dark:text-white/60` }, config.description), /* @__PURE__ */ React10.createElement(
+        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
+function createMarkdownComponents({
+  primaryColor,
+  accentColor,
+  isStreaming,
+  onAddToCart,
+  viewportSize
+}) {
+  return {
+    table: (_a) => {
+      var props = __objRest(_a, []);
+      if (isStreaming) {
+        return /* @__PURE__ */ React11.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__ */ React11.createElement("div", { className: "w-4 h-4 border-2 border-indigo-500 border-t-transparent rounded-full animate-spin" }), /* @__PURE__ */ React11.createElement("p", { className: "text-xs text-slate-500 font-medium italic animate-pulse" }, "Generating data table..."));
+      }
+      return /* @__PURE__ */ React11.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__ */ React11.createElement("div", { className: "overflow-x-auto" }, /* @__PURE__ */ React11.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__ */ React11.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__ */ React11.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__ */ React11.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__ */ React11.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__ */ React11.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" || lang === "json")) {
+        const content = String(children != null ? children : "").trim();
+        return /* @__PURE__ */ React11.createElement(
+          UIDispatcher,
+          {
+            rawContent: content,
+            primaryColor,
+            accentColor,
+            isStreaming,
+            onAddToCart,
+            viewportSize
+          }
+        );
+      }
+      if (!inline) {
+        const content = String(children != null ? children : "").trim();
+        if (content.startsWith("{") && content.endsWith("}")) {
+          return /* @__PURE__ */ React11.createElement(
+            UIDispatcher,
+            {
+              rawContent: content,
+              primaryColor,
+              accentColor,
+              isStreaming,
+              onAddToCart,
+              viewportSize
+            }
+          );
+        }
+      }
+      return /* @__PURE__ */ React11.createElement("code", __spreadValues({ className }, props), typeof children === "string" || typeof children === "number" ? children : JSON.stringify(children));
+    }
+  };
+}
+function normaliseChild(children) {
+  if (typeof children === "object" && children !== null && !Array.isArray(children) && !React11.isValidElement(children)) {
+    return JSON.stringify(children);
+  }
+  return children;
+}
+
+// src/components/MessageBubble.tsx
 function MessageBubble({
   message,
   sources,
@@ -1004,12 +1660,13 @@ function MessageBubble({
   const isUser = message.role === "user";
   const isCompact = viewportSize === "compact";
   const isMedium = viewportSize === "medium";
-  const [showSources, setShowSources] = React6.useState(false);
-  const structuredContent = React6.useMemo(
+  const [showSources, setShowSources] = React12.useState(false);
+  const [showTrace, setShowTrace] = React12.useState(false);
+  const structuredContent = React12.useMemo(
     () => isUser ? { payload: null, text: message.content } : extractStructuredPayload(message.content),
     [isUser, message.content]
   );
-  const hasRichUI = React6.useMemo(() => {
+  const hasRichUI = React12.useMemo(() => {
     if (message.uiTransformation) {
       const type = message.uiTransformation.type;
       if (type && !["text", "table"].includes(type)) return true;
@@ -1020,131 +1677,28 @@ function MessageBubble({
     return false;
   }, [message.uiTransformation, structuredContent.payload]);
   const shouldRenderStructuredOnly = !isUser && hasRichUI && isLikelyUiOnlyMessage(structuredContent.text);
-  const productsFromSources = React6.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
-      };
-    });
+  const productsFromSources = React12.useMemo(() => {
+    return extractProductsFromSources(sources, isUser);
   }, [sources, isUser]);
-  const { productsFromContent, cleanContent } = React6.useMemo(() => {
-    var _a, _b;
+  const { productsFromContent, cleanContent } = React12.useMemo(() => {
     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() };
+    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
+    );
   }, [message.content, isUser, structuredContent, productsFromSources]);
-  const allProducts = React6.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;
-    });
+  const allProducts = React12.useMemo(() => {
+    return deduplicateProducts(productsFromSources, productsFromContent, message.content);
   }, [productsFromSources, productsFromContent, message.content]);
-  const processedMarkdown = React6.useMemo(() => {
+  const processedMarkdown = React12.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");
@@ -1165,156 +1719,26 @@ ${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 = React6.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__ */ React6.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__ */ React6.createElement("div", { className: "w-4 h-4 border-2 border-indigo-500 border-t-transparent rounded-full animate-spin" }), /* @__PURE__ */ React6.createElement("p", { className: "text-xs text-slate-500 font-medium italic animate-pulse" }, "Generating data table..."));
-        }
-        return /* @__PURE__ */ React6.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__ */ React6.createElement("div", { className: "overflow-x-auto" }, /* @__PURE__ */ React6.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__ */ React6.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__ */ React6.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__ */ React6.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__ */ React6.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__ */ React6.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__ */ React6.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__ */ React6.createElement(
-              UIDispatcher,
-              {
-                rawContent: content,
-                primaryColor,
-                accentColor,
-                isStreaming,
-                onAddToCart,
-                viewportSize
-              }
-            );
-          }
-        }
-        if (!inline) {
-          const content = String(children != null ? children : "").trim();
-          if (looksLikeStructuredPayload(content)) {
-            return /* @__PURE__ */ React6.createElement(
-              UIDispatcher,
-              {
-                rawContent: content,
-                primaryColor,
-                accentColor,
-                isStreaming,
-                onAddToCart,
-                viewportSize
-              }
-            );
-          }
-        }
-        if (!inline && lang === "table-loading") {
-          return /* @__PURE__ */ React6.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__ */ React6.createElement("div", { className: "w-4 h-4 border-2 border-indigo-500 border-t-transparent rounded-full animate-spin" }), /* @__PURE__ */ React6.createElement("p", { className: "text-xs text-slate-500 font-medium italic animate-pulse" }, "Generating data table..."));
-        }
-        return /* @__PURE__ */ React6.createElement("code", __spreadValues({ className }, props), typeof children === "string" || typeof children === "number" ? children : JSON.stringify(children));
-      }
-    }),
+  const markdownComponents = React12.useMemo(
+    () => createMarkdownComponents({ primaryColor, accentColor, isStreaming, onAddToCart, viewportSize }),
     [primaryColor, accentColor, isStreaming, onAddToCart, viewportSize]
   );
-  return /* @__PURE__ */ React6.createElement("div", { className: `flex ${isCompact ? "gap-2" : "gap-3"} ${isUser ? "flex-row-reverse" : "flex-row"} items-start` }, /* @__PURE__ */ React6.createElement(
+  return /* @__PURE__ */ React12.createElement("div", { className: `flex ${isCompact ? "gap-2" : "gap-3"} ${isUser ? "flex-row-reverse" : "flex-row"} items-start` }, /* @__PURE__ */ React12.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__ */ React6.createElement(User, { className: `${isCompact ? "w-3.5 h-3.5" : "w-4 h-4"} text-white` }) : /* @__PURE__ */ React6.createElement(Bot, { className: `${isCompact ? "w-3.5 h-3.5" : "w-4 h-4"}` })
-  ), /* @__PURE__ */ React6.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__ */ React6.createElement(
+    isUser ? /* @__PURE__ */ React12.createElement(User, { className: `${isCompact ? "w-3.5 h-3.5" : "w-4 h-4"} text-white` }) : /* @__PURE__ */ React12.createElement(Bot, { className: `${isCompact ? "w-3.5 h-3.5" : "w-4 h-4"}` })
+  ), /* @__PURE__ */ React12.createElement("div", { className: `flex flex-col gap-1 min-w-0 ${isCompact ? "max-w-[94%]" : isMedium ? "max-w-[92%]" : "max-w-[90%]"} ${isUser ? "items-end" : "items-start"}` }, /* @__PURE__ */ React12.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__ */ React6.createElement("span", { className: "flex items-center gap-1 py-1" }, /* @__PURE__ */ React6.createElement("span", { className: "w-1.5 h-1.5 rounded-full bg-slate-400 dark:bg-white/60 animate-bounce [animation-delay:0ms]" }), /* @__PURE__ */ React6.createElement("span", { className: "w-1.5 h-1.5 rounded-full bg-slate-400 dark:bg-white/60 animate-bounce [animation-delay:150ms]" }), /* @__PURE__ */ React6.createElement("span", { className: "w-1.5 h-1.5 rounded-full bg-slate-400 dark:bg-white/60 animate-bounce [animation-delay:300ms]" })) : /* @__PURE__ */ React6.createElement("div", { className: `prose ${isCompact ? "prose-xs" : "prose-sm"} max-w-none break-words ${isUser ? "prose-invert" : "dark:prose-invert"}` }, !isUser && structuredContent.payload && /* @__PURE__ */ React6.createElement(
+    isStreaming && !message.content ? /* @__PURE__ */ React12.createElement("span", { className: "flex items-center gap-1 py-1" }, /* @__PURE__ */ React12.createElement("span", { className: "w-1.5 h-1.5 rounded-full bg-slate-400 dark:bg-white/60 animate-bounce [animation-delay:0ms]" }), /* @__PURE__ */ React12.createElement("span", { className: "w-1.5 h-1.5 rounded-full bg-slate-400 dark:bg-white/60 animate-bounce [animation-delay:150ms]" }), /* @__PURE__ */ React12.createElement("span", { className: "w-1.5 h-1.5 rounded-full bg-slate-400 dark:bg-white/60 animate-bounce [animation-delay:300ms]" })) : /* @__PURE__ */ React12.createElement("div", { className: `prose ${isCompact ? "prose-xs" : "prose-sm"} max-w-none break-words ${isUser ? "prose-invert" : "dark:prose-invert"}` }, !isUser && structuredContent.payload && /* @__PURE__ */ React12.createElement(
       UIDispatcher,
       {
         rawContent: structuredContent.payload,
@@ -1324,7 +1748,15 @@ ${match.trim()}
         onAddToCart,
         viewportSize
       }
-    ), !shouldRenderStructuredOnly && /* @__PURE__ */ React6.createElement(ReactMarkdown, { components: markdownComponents }, processedMarkdown), isStreaming && message.content && /* @__PURE__ */ React6.createElement("span", { className: "inline-block w-1.5 h-3.5 ml-1 bg-emerald-500 animate-pulse align-middle" }))
+    ), !shouldRenderStructuredOnly && /* @__PURE__ */ React12.createElement(ReactMarkdown, { components: markdownComponents }, processedMarkdown), isStreaming && /* @__PURE__ */ React12.createElement("span", { className: "inline-flex items-center gap-1.5 ml-2 text-emerald-500 animate-pulse align-middle text-xs font-medium" }, /* @__PURE__ */ React12.createElement(
+      HourglassLoader_default,
+      {
+        size: 18,
+        primaryColor,
+        accentColor,
+        glow: false
+      }
+    ), "Thinking..."))
   ), (() => {
     var _a, _b;
     if (isUser || structuredContent.payload || !message.uiTransformation) return null;
@@ -1332,95 +1764,50 @@ ${match.trim()}
     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__ */ React6.createElement("div", { className: "w-full mt-3" }, /* @__PURE__ */ React6.createElement(
+    return /* @__PURE__ */ React12.createElement("div", { className: "w-full mt-3" }, /* @__PURE__ */ React12.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"
+        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__ */ React6.createElement("div", { className: "w-full mt-1" }, /* @__PURE__ */ React6.createElement(
+  })(), !isUser && !hasRichUI && allProducts.length > 0 && /* @__PURE__ */ React12.createElement("div", { className: "w-full mt-1" }, /* @__PURE__ */ React12.createElement(
     ProductCarousel,
     {
       products: allProducts,
       primaryColor,
       onAddToCart
     }
-  )), !isUser && sources && sources.length > 0 && /* @__PURE__ */ React6.createElement("div", { className: "w-full" }, /* @__PURE__ */ React6.createElement(
+  )), !isUser && /* @__PURE__ */ React12.createElement("div", { className: "flex items-center gap-4 mt-1 w-full flex-wrap" }, sources && sources.length > 0 && /* @__PURE__ */ React12.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"
+      className: "text-[11px] text-indigo-400 hover:text-indigo-300 transition-colors flex items-center gap-1"
     },
-    showSources ? /* @__PURE__ */ React6.createElement(ChevronDown2, { className: "w-3 h-3" }) : /* @__PURE__ */ React6.createElement(ChevronRight2, { className: "w-3 h-3" }),
+    showSources ? /* @__PURE__ */ React12.createElement(ChevronDown3, { className: "w-3 h-3" }) : /* @__PURE__ */ React12.createElement(ChevronRight3, { className: "w-3 h-3" }),
     sources.length,
     " source",
     sources.length !== 1 ? "s" : "",
     " used"
-  ), showSources && /* @__PURE__ */ React6.createElement("div", { className: "mt-2 flex flex-col gap-2" }, sources.map((src, i) => /* @__PURE__ */ React6.createElement(SourceCard, { key: src.id, source: src, index: i }))))));
-}
-
-// src/components/ConfigProvider.tsx
-import React7, { createContext, useContext } from "react";
-
-// 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 ConfigContext = 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__ */ React7.createElement(ConfigContext.Provider, { value: merged }, children);
-}
-function useConfig() {
-  return useContext(ConfigContext);
+  ), message.trace && /* @__PURE__ */ React12.createElement(
+    "button",
+    {
+      onClick: () => setShowTrace((t) => !t),
+      className: "text-[11px] text-emerald-500 hover:text-emerald-400 transition-colors flex items-center gap-1"
+    },
+    /* @__PURE__ */ React12.createElement(Activity, { className: "w-3 h-3" }),
+    showTrace ? "Hide Trace" : "Trace"
+  )), /* @__PURE__ */ React12.createElement("div", { className: "w-full flex flex-col gap-2 min-w-0" }, showSources && sources && sources.length > 0 && /* @__PURE__ */ React12.createElement("div", { className: "mt-1 flex flex-col gap-2" }, sources.map((src, i) => /* @__PURE__ */ React12.createElement(SourceCard, { key: src.id, source: src, index: i }))), showTrace && message.trace && /* @__PURE__ */ React12.createElement(ObservabilityPanel, { trace: message.trace, primaryColor }))));
 }
 
 // src/hooks/useRagChat.ts
-import { useState as useState3, useCallback, useRef as useRef2, useEffect as useEffect3 } from "react";
+import { useState as useState4, useCallback, useRef as useRef3, useEffect as useEffect3 } from "react";
 
 // src/hooks/useStoredMessages.ts
-import * as React8 from "react";
+import * as React13 from "react";
 function readStoredMessages(storageKey) {
   if (typeof window === "undefined") {
     return [];
@@ -1437,8 +1824,8 @@ function readStoredMessages(storageKey) {
   }
 }
 function useStoredMessages(storageKey, persist) {
-  const [messages, setMessages] = React8.useState(() => persist ? readStoredMessages(storageKey) : []);
-  React8.useEffect(() => {
+  const [messages, setMessages] = React13.useState(() => persist ? readStoredMessages(storageKey) : []);
+  React13.useEffect(() => {
     if (!persist || typeof window === "undefined") {
       return;
     }
@@ -1478,10 +1865,10 @@ function useRagChat(projectId, options = {}) {
   } = options;
   const storageKey = `rag_chat_${projectId}`;
   const [messages, setMessages] = useStoredMessages(storageKey, persist);
-  const [isLoading, setIsLoading] = useState3(false);
-  const [error, setError] = useState3(null);
-  const lastInputRef = useRef2("");
-  const messagesRef = useRef2(messages);
+  const [isLoading, setIsLoading] = useState4(false);
+  const [error, setError] = useState4(null);
+  const lastInputRef = useRef3("");
+  const messagesRef = useRef3(messages);
   useEffect3(() => {
     messagesRef.current = messages;
   }, [messages]);
@@ -1525,6 +1912,7 @@ function useRagChat(projectId, options = {}) {
         let assistantContent = "";
         let sources = [];
         let uiTransformation = null;
+        let trace;
         let buffer = "";
         const assistantMessageId = `assistant_${Date.now()}`;
         setMessages((prev) => [
@@ -1551,6 +1939,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");
             }
@@ -1569,17 +1959,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);
@@ -1629,19 +2024,20 @@ function ChatWindow({
 }) {
   var _a;
   const { ui, projectId } = useConfig();
-  const [input, setInput] = useState4("");
-  const [mounted, setMounted] = useState4(false);
-  const [viewportSize, setViewportSize] = useState4("large");
-  const windowRef = useRef3(null);
-  const bottomRef = useRef3(null);
-  const inputRef = useRef3(null);
+  const [input, setInput] = useState5("");
+  const [mounted, setMounted] = useState5(false);
+  const [viewportSize, setViewportSize] = useState5("large");
+  const windowRef = useRef4(null);
+  const bottomRef = useRef4(null);
+  const inputRef = useRef4(null);
   const { messages, send, clear, isLoading, error } = useRagChat(projectId, {
     namespace: projectId
   });
-  const [suggestions, setSuggestions] = useState4([]);
-  const [isSuggesting, setIsSuggesting] = useState4(false);
-  const [isListening, setIsListening] = useState4(false);
-  const recognitionRef = useRef3(null);
+  const [suggestions, setSuggestions] = useState5([]);
+  const [isSuggesting, setIsSuggesting] = useState5(false);
+  const [isListening, setIsListening] = useState5(false);
+  const [isUploadModalOpen, setIsUploadModalOpen] = useState5(false);
+  const recognitionRef = useRef4(null);
   useEffect4(() => {
     if (typeof window !== "undefined") {
       const win = window;
@@ -1767,84 +2163,84 @@ function ChatWindow({
     }, 800);
     return () => clearTimeout(timer);
   }, [input, projectId]);
-  return /* @__PURE__ */ React9.createElement(
+  return /* @__PURE__ */ React14.createElement(
     "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__ */ React9.createElement(
+    onResizeStart && /* @__PURE__ */ React14.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__ */ React9.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__ */ React14.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__ */ React9.createElement(
+    /* @__PURE__ */ React14.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__ */ React9.createElement("div", { className: "flex items-center gap-3" }, ui.logoUrl ? (
+      /* @__PURE__ */ React14.createElement("div", { className: "flex items-center gap-3" }, ui.logoUrl ? (
         // eslint-disable-next-line @next/next/no-img-element
-        /* @__PURE__ */ React9.createElement("img", { src: ui.logoUrl, alt: "logo", className: "w-8 h-8 rounded-lg object-cover" })
-      ) : /* @__PURE__ */ React9.createElement(
+        /* @__PURE__ */ React14.createElement("img", { src: ui.logoUrl, alt: "logo", className: "w-8 h-8 rounded-lg object-cover" })
+      ) : /* @__PURE__ */ React14.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__ */ React9.createElement(Bot2, { className: "w-5 h-5 text-white" })
-      ), /* @__PURE__ */ React9.createElement("div", null, /* @__PURE__ */ React9.createElement("h2", { className: "text-slate-900 dark:text-white font-semibold text-sm leading-tight" }, ui.title), ui.poweredBy && /* @__PURE__ */ React9.createElement("p", { className: "text-slate-500 dark:text-white/40 text-[11px] leading-tight" }, `Powered by ${ui.poweredBy}`))),
-      /* @__PURE__ */ React9.createElement("div", { className: "flex items-center gap-1.5" }, /* @__PURE__ */ React9.createElement("span", { className: "flex items-center gap-1 text-[10px] text-emerald-500 dark:text-emerald-400 mr-2" }, /* @__PURE__ */ React9.createElement("span", { className: "w-1.5 h-1.5 rounded-full bg-emerald-500 dark:bg-emerald-400 animate-pulse" }), "Online"), /* @__PURE__ */ React9.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__ */ React9.createElement(
+        /* @__PURE__ */ React14.createElement(Bot2, { className: "w-5 h-5 text-white" })
+      ), /* @__PURE__ */ React14.createElement("div", null, /* @__PURE__ */ React14.createElement("h2", { className: "text-slate-900 dark:text-white font-semibold text-sm leading-tight" }, ui.title), ui.poweredBy && /* @__PURE__ */ React14.createElement("p", { className: "text-slate-500 dark:text-white/40 text-[11px] leading-tight" }, `Powered by ${ui.poweredBy}`))),
+      /* @__PURE__ */ React14.createElement("div", { className: "flex items-center gap-1.5" }, /* @__PURE__ */ React14.createElement("span", { className: "flex items-center gap-1 text-[10px] text-emerald-500 dark:text-emerald-400 mr-2" }, /* @__PURE__ */ React14.createElement("span", { className: "w-1.5 h-1.5 rounded-full bg-emerald-500 dark:bg-emerald-400 animate-pulse" }), "Online"), /* @__PURE__ */ React14.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__ */ React14.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__ */ React9.createElement(Trash2, { className: "w-3.5 h-3.5" })
-      ), isResized && onResetResize && /* @__PURE__ */ React9.createElement(
+        /* @__PURE__ */ React14.createElement(Trash2, { className: "w-3.5 h-3.5" })
+      ), isResized && onResetResize && /* @__PURE__ */ React14.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__ */ React9.createElement(RotateCcw, { className: "w-3.5 h-3.5" })
-      ), onMaximize && /* @__PURE__ */ React9.createElement(
+        /* @__PURE__ */ React14.createElement(RotateCcw, { className: "w-3.5 h-3.5" })
+      ), onMaximize && /* @__PURE__ */ React14.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__ */ React9.createElement(Minimize2, { className: "w-3.5 h-3.5" }) : /* @__PURE__ */ React9.createElement(Maximize2, { className: "w-3.5 h-3.5" })
-      ), showClose && onClose && /* @__PURE__ */ React9.createElement(
+        isMaximized ? /* @__PURE__ */ React14.createElement(Minimize2, { className: "w-3.5 h-3.5" }) : /* @__PURE__ */ React14.createElement(Maximize2, { className: "w-3.5 h-3.5" })
+      ), showClose && onClose && /* @__PURE__ */ React14.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__ */ React9.createElement(X, { className: "w-4 h-4" })
+        /* @__PURE__ */ React14.createElement(X2, { className: "w-4 h-4" })
       )))
     ),
-    /* @__PURE__ */ React9.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 ? (
+    /* @__PURE__ */ React14.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__ */ React9.createElement("div", { className: "h-full flex flex-col items-center justify-center text-center gap-4 px-6 py-12" }, /* @__PURE__ */ React9.createElement(
+      /* @__PURE__ */ React14.createElement("div", { className: "h-full flex flex-col items-center justify-center text-center gap-4 px-6 py-12" }, /* @__PURE__ */ React14.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__ */ React9.createElement(Sparkles, { className: "w-8 h-8 text-white" })
-      ), /* @__PURE__ */ React9.createElement("div", null, /* @__PURE__ */ React9.createElement("p", { className: "text-slate-800 dark:text-white/80 font-medium leading-relaxed" }, ui.welcomeMessage), /* @__PURE__ */ React9.createElement("p", { className: "text-slate-500 dark:text-white/30 text-sm mt-2" }, "Ask a question to get started")), /* @__PURE__ */ React9.createElement("div", { className: "flex flex-wrap gap-2 justify-center mt-2" }, CHAT_SUGGESTIONS.map(
-        (suggestion) => /* @__PURE__ */ React9.createElement(
+        /* @__PURE__ */ React14.createElement(Sparkles, { className: "w-8 h-8 text-white" })
+      ), /* @__PURE__ */ React14.createElement("div", null, /* @__PURE__ */ React14.createElement("p", { className: "text-slate-800 dark:text-white/80 font-medium leading-relaxed" }, ui.welcomeMessage), /* @__PURE__ */ React14.createElement("p", { className: "text-slate-500 dark:text-white/30 text-sm mt-2" }, "Ask a question to get started")), /* @__PURE__ */ React14.createElement("div", { className: "flex flex-wrap gap-2 justify-center mt-2" }, CHAT_SUGGESTIONS.map(
+        (suggestion) => /* @__PURE__ */ React14.createElement(
           "button",
           {
             key: suggestion,
@@ -1858,7 +2254,7 @@ function ChatWindow({
           suggestion
         )
       )))
-    ) : messages.map((msg, index) => /* @__PURE__ */ React9.createElement(
+    ) : messages.map((msg, index) => /* @__PURE__ */ React14.createElement(
       MessageBubble,
       {
         key: msg.id,
@@ -1870,7 +2266,7 @@ function ChatWindow({
         onAddToCart,
         viewportSize
       }
-    )), isLoading && ((_a = messages[messages.length - 1]) == null ? void 0 : _a.role) !== "assistant" && /* @__PURE__ */ React9.createElement(
+    )), isLoading && ((_a = messages[messages.length - 1]) == null ? void 0 : _a.role) !== "assistant" && /* @__PURE__ */ React14.createElement(
       MessageBubble,
       {
         message: { id: "loading", role: "assistant", content: "", createdAt: (/* @__PURE__ */ new Date()).toISOString() },
@@ -1880,8 +2276,22 @@ function ChatWindow({
         onAddToCart,
         viewportSize
       }
-    ), error && /* @__PURE__ */ React9.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__ */ React9.createElement(TriangleAlert, { className: "w-4 h-4 flex-shrink-0" }), /* @__PURE__ */ React9.createElement("span", null, error)), /* @__PURE__ */ React9.createElement("div", { ref: bottomRef })),
-    /* @__PURE__ */ React9.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__ */ React9.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__ */ React9.createElement(
+    ), error && /* @__PURE__ */ React14.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__ */ React14.createElement(TriangleAlert, { className: "w-4 h-4 flex-shrink-0" }), /* @__PURE__ */ React14.createElement("span", null, error)), /* @__PURE__ */ React14.createElement("div", { ref: bottomRef })),
+    isUploadModalOpen && /* @__PURE__ */ React14.createElement("div", { className: "absolute inset-0 z-50 flex items-center justify-center p-4 bg-slate-900/50 backdrop-blur-sm rounded-inherit" }, /* @__PURE__ */ React14.createElement("div", { className: "relative w-full max-w-md bg-white dark:bg-[#0f0f1a] rounded-2xl shadow-2xl overflow-hidden animate-in zoom-in-95 duration-200" }, /* @__PURE__ */ React14.createElement(
+      "button",
+      {
+        onClick: () => setIsUploadModalOpen(false),
+        className: "absolute top-4 right-4 p-1.5 rounded-lg text-slate-400 hover:text-slate-600 hover:bg-slate-100 dark:hover:text-white/80 dark:hover:bg-white/10 transition-colors z-10"
+      },
+      /* @__PURE__ */ React14.createElement(X2, { className: "w-5 h-5" })
+    ), /* @__PURE__ */ React14.createElement(
+      DocumentUpload,
+      {
+        namespace: projectId,
+        onUploadComplete: () => setIsUploadModalOpen(false)
+      }
+    ))),
+    /* @__PURE__ */ React14.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__ */ React14.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__ */ React14.createElement(
       "button",
       {
         key: suggestion,
@@ -1893,9 +2303,9 @@ function ChatWindow({
         },
         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__ */ React9.createElement(Sparkles, { className: "w-3 h-3 text-amber-400" }),
+      /* @__PURE__ */ React14.createElement(Sparkles, { className: "w-3 h-3 text-amber-400" }),
       suggestion
-    )), isSuggesting && suggestions.length === 0 && /* @__PURE__ */ React9.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__ */ React9.createElement(Sparkles, { className: "w-3 h-3" }), "Thinking...")), /* @__PURE__ */ React9.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__ */ React9.createElement(
+    )), isSuggesting && suggestions.length === 0 && /* @__PURE__ */ React14.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__ */ React14.createElement(Sparkles, { className: "w-3 h-3" }), "Thinking...")), /* @__PURE__ */ React14.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__ */ React14.createElement(
       "textarea",
       {
         ref: inputRef,
@@ -1914,7 +2324,7 @@ function ChatWindow({
         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__ */ React9.createElement(
+    ), ui.enableVoiceInput !== false && /* @__PURE__ */ React14.createElement(
       "button",
       {
         type: "button",
@@ -1923,8 +2333,17 @@ function ChatWindow({
         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__ */ React9.createElement(MicOff, { className: "w-4 h-4" }) : /* @__PURE__ */ React9.createElement(Mic, { className: "w-4 h-4" })
-    ), /* @__PURE__ */ React9.createElement(
+      isListening ? /* @__PURE__ */ React14.createElement(MicOff, { className: "w-4 h-4" }) : /* @__PURE__ */ React14.createElement(Mic, { className: "w-4 h-4" })
+    ), ui.allowUpload !== false && /* @__PURE__ */ React14.createElement(
+      "button",
+      {
+        type: "button",
+        onClick: () => setIsUploadModalOpen(true),
+        className: "flex-shrink-0 w-9 h-9 rounded-xl flex items-center justify-center transition-all hover:scale-105 active:scale-95 text-slate-400 dark:text-white/40 hover:bg-slate-200 dark:hover:bg-white/10",
+        title: "Upload Document"
+      },
+      /* @__PURE__ */ React14.createElement(Paperclip, { className: "w-4 h-4" })
+    ), /* @__PURE__ */ React14.createElement(
       "button",
       {
         onClick: sendMessage,
@@ -1935,8 +2354,8 @@ function ChatWindow({
           // slate-400/20 for light mode disabled
         }
       },
-      /* @__PURE__ */ React9.createElement(ArrowUp, { className: "w-4 h-4 text-white" })
-    )), /* @__PURE__ */ React9.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__ */ React14.createElement(ArrowUp, { className: "w-4 h-4 text-white" })
+    )), /* @__PURE__ */ React14.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"))
   );
 }
 
@@ -1944,12 +2363,12 @@ function ChatWindow({
 var DEFAULT_DIMENSIONS = { width: 380, height: 600 };
 function ChatWidget({ position = "bottom-right", onAddToCart }) {
   const { ui } = useConfig();
-  const [isOpen, setIsOpen] = useState5(false);
-  const [hasUnread, setHasUnread] = useState5(false);
-  const [dimensions, setDimensions] = useState5(DEFAULT_DIMENSIONS);
-  const [isResizing, setIsResizing] = useState5(false);
-  const [isMaximized, setIsMaximized] = useState5(false);
-  const [prevDimensions, setPrevDimensions] = useState5(DEFAULT_DIMENSIONS);
+  const [isOpen, setIsOpen] = useState6(false);
+  const [hasUnread, setHasUnread] = useState6(false);
+  const [dimensions, setDimensions] = useState6(DEFAULT_DIMENSIONS);
+  const [isResizing, setIsResizing] = useState6(false);
+  const [isMaximized, setIsMaximized] = useState6(false);
+  const [prevDimensions, setPrevDimensions] = useState6(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";
@@ -1999,7 +2418,7 @@ function ChatWidget({ position = "bottom-right", onAddToCart }) {
     }
   };
   const isResized = dimensions.width !== DEFAULT_DIMENSIONS.width || dimensions.height !== DEFAULT_DIMENSIONS.height;
-  return /* @__PURE__ */ React10.createElement(React10.Fragment, null, /* @__PURE__ */ React10.createElement(
+  return /* @__PURE__ */ React15.createElement(React15.Fragment, null, /* @__PURE__ */ React15.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"}`,
@@ -2009,7 +2428,7 @@ function ChatWidget({ position = "bottom-right", onAddToCart }) {
         maxHeight: "calc(100vh - 6rem)"
       }
     },
-    /* @__PURE__ */ React10.createElement(
+    /* @__PURE__ */ React15.createElement(
       ChatWindow,
       {
         className: "h-full relative z-10",
@@ -2023,13 +2442,13 @@ function ChatWidget({ position = "bottom-right", onAddToCart }) {
         onAddToCart
       }
     ),
-    /* @__PURE__ */ React10.createElement(
+    /* @__PURE__ */ React15.createElement(
       "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__ */ React10.createElement(
+  ), /* @__PURE__ */ React15.createElement(
     "button",
     {
       onClick: isOpen ? () => setIsOpen(false) : handleOpen,
@@ -2037,156 +2456,32 @@ function ChatWidget({ position = "bottom-right", onAddToCart }) {
       style: { background: `linear-gradient(135deg, ${ui.primaryColor}, ${ui.accentColor})` },
       "aria-label": "Open chat"
     },
-    /* @__PURE__ */ React10.createElement(
+    /* @__PURE__ */ React15.createElement(
       "span",
       {
         className: "absolute inset-0 rounded-full animate-ping opacity-20",
         style: { background: ui.primaryColor }
       }
     ),
-    /* @__PURE__ */ React10.createElement(
+    /* @__PURE__ */ React15.createElement(
       "span",
       {
         className: `transition-transform duration-300 ${isOpen ? "rotate-90 scale-90" : "rotate-0 scale-100"}`
       },
-      isOpen ? /* @__PURE__ */ React10.createElement(X2, { className: "w-6 h-6 text-white" }) : /* @__PURE__ */ React10.createElement(MessageSquare, { className: "w-6 h-6 text-white" })
+      isOpen ? /* @__PURE__ */ React15.createElement(X3, { className: "w-6 h-6 text-white" }) : /* @__PURE__ */ React15.createElement(MessageSquare, { className: "w-6 h-6 text-white" })
     ),
-    hasUnread && !isOpen && /* @__PURE__ */ React10.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")
+    hasUnread && !isOpen && /* @__PURE__ */ React15.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
-import React11, { useState as useState6, useRef as useRef4 } from "react";
-import { Upload, File, X as X3, CheckCircle, AlertCircle, Loader2 } from "lucide-react";
-function DocumentUpload({ namespace, onUploadComplete, className = "" }) {
-  const { ui } = useConfig();
-  const [fileStates, setFileStates] = useState6([]);
-  const [isDragging, setIsDragging] = useState6(false);
-  const fileInputRef = useRef4(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__ */ React11.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__ */ React11.createElement("div", { className: "flex flex-col items-center justify-center text-center" }, /* @__PURE__ */ React11.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__ */ React11.createElement(Upload, { className: "w-6 h-6", style: { color: ui.primaryColor } })
-    ), /* @__PURE__ */ React11.createElement("h3", { className: "text-slate-900 dark:text-white font-semibold mb-1" }, "Upload Documents"), /* @__PURE__ */ React11.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__ */ React11.createElement(
-      "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__ */ React11.createElement(
-      "input",
-      {
-        ref: fileInputRef,
-        type: "file",
-        multiple: true,
-        onChange: onFileSelect,
-        className: "hidden",
-        accept: ".pdf,.docx,.txt,.md,.json,.csv"
-      }
-    )),
-    fileStates.length > 0 && /* @__PURE__ */ React11.createElement("div", { className: "mt-8 space-y-3" }, fileStates.map((state, i) => /* @__PURE__ */ React11.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__ */ React11.createElement("div", { className: "flex items-center gap-3 overflow-hidden" }, /* @__PURE__ */ React11.createElement("div", { className: "w-8 h-8 rounded-lg bg-white dark:bg-white/10 flex items-center justify-center shadow-sm" }, /* @__PURE__ */ React11.createElement(File, { className: "w-4 h-4 text-slate-400" })), /* @__PURE__ */ React11.createElement("div", { className: "truncate" }, /* @__PURE__ */ React11.createElement("p", { className: "text-xs font-medium text-slate-700 dark:text-white/80 truncate" }, state.file.name), /* @__PURE__ */ React11.createElement("p", { className: "text-[10px] text-slate-400" }, (state.file.size / 1024).toFixed(1), " KB"))),
-      /* @__PURE__ */ React11.createElement("div", { className: "flex items-center gap-2" }, state.status === "uploading" && /* @__PURE__ */ React11.createElement(Loader2, { className: "w-4 h-4 text-slate-400 animate-spin" }), state.status === "success" && /* @__PURE__ */ React11.createElement(CheckCircle, { className: "w-4 h-4 text-emerald-500" }), state.status === "error" && /* @__PURE__ */ React11.createElement("div", { title: state.error }, /* @__PURE__ */ React11.createElement(AlertCircle, { className: "w-4 h-4 text-rose-500" })), state.status !== "uploading" && /* @__PURE__ */ React11.createElement(
-        "button",
-        {
-          onClick: () => removeFile(i),
-          className: "p-1 rounded-md hover:bg-slate-200 dark:hover:bg-white/10 transition-colors"
-        },
-        /* @__PURE__ */ React11.createElement(X3, { className: "w-3.5 h-3.5 text-slate-400" })
-      ))
-    )), hasIdle && !isUploading && /* @__PURE__ */ React11.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"
-    ))
-  );
-}
 export {
   ChatWidget,
   ChatWindow,
   ConfigProvider,
   DocumentUpload,
   MessageBubble,
+  ObservabilityPanel,
   SourceCard,
+  addSynonyms,
   useConfig,
   useRagChat
 };