@retrivora-ai/rag-engine 1.2.1 → 1.2.3

package/dist/index.js

@@ -22,6 +22,18 @@ var __spreadValues = (a, b) => {
   return a;
 };
 var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
 var __export = (target, all) => {
   for (var name in all)
     __defProp(target, name, { get: all[name], enumerable: true });
@@ -59,15 +71,15 @@ __export(index_exports, {
 module.exports = __toCommonJS(index_exports);
 
 // src/components/ChatWidget.tsx
-var import_react8 = __toESM(require("react"));
+var import_react9 = __toESM(require("react"));
 var import_lucide_react6 = require("lucide-react");
 
 // src/components/ChatWindow.tsx
-var import_react7 = __toESM(require("react"));
+var import_react8 = __toESM(require("react"));
 var import_lucide_react5 = require("lucide-react");
 
 // src/components/MessageBubble.tsx
-var import_react4 = __toESM(require("react"));
+var import_react5 = __toESM(require("react"));
 var import_lucide_react4 = require("lucide-react");
 var import_react_markdown = __toESM(require("react-markdown"));
 var import_remark_gfm = __toESM(require("remark-gfm"));
@@ -204,6 +216,71 @@ function ProductCarousel({ products, primaryColor = "#6366f1", onAddToCart }) {
   ));
 }
 
+// src/components/DynamicChart.tsx
+var import_react4 = __toESM(require("react"));
+var import_recharts = require("recharts");
+var DEFAULT_COLORS = ["#6366f1", "#10b981", "#f59e0b", "#ef4444", "#8b5cf6", "#ec4899"];
+function DynamicChart({ config, primaryColor = "#6366f1", accentColor = "#8b5cf6" }) {
+  const { type, data, xAxisKey = "name", dataKeys = [] } = config;
+  const colors = config.colors || [primaryColor, accentColor, ...DEFAULT_COLORS];
+  if (!data || data.length === 0) {
+    return /* @__PURE__ */ import_react4.default.createElement("div", { className: "p-4 text-sm text-slate-500" }, "No data available for chart.");
+  }
+  if (type === "pie") {
+    const pieDataKey = dataKeys[0] || Object.keys(data[0]).find((k) => k !== xAxisKey) || "value";
+    return /* @__PURE__ */ import_react4.default.createElement("div", { className: "w-full h-64 mt-4 mb-2 select-none" }, /* @__PURE__ */ import_react4.default.createElement(import_recharts.ResponsiveContainer, { width: "100%", height: "100%" }, /* @__PURE__ */ import_react4.default.createElement(import_recharts.PieChart, null, /* @__PURE__ */ import_react4.default.createElement(
+      import_recharts.Pie,
+      {
+        data,
+        dataKey: pieDataKey,
+        nameKey: xAxisKey,
+        cx: "50%",
+        cy: "50%",
+        outerRadius: 80,
+        label: ({ name, percent }) => `${name} ${((percent != null ? percent : 0) * 100).toFixed(0)}%`
+      },
+      data.map((entry, index) => /* @__PURE__ */ import_react4.default.createElement(import_recharts.Cell, { key: `cell-${index}`, fill: colors[index % colors.length] }))
+    ), /* @__PURE__ */ import_react4.default.createElement(
+      import_recharts.Tooltip,
+      {
+        contentStyle: { borderRadius: "8px", border: "none", boxShadow: "0 4px 6px -1px rgb(0 0 0 / 0.1)" }
+      }
+    ), /* @__PURE__ */ import_react4.default.createElement(import_recharts.Legend, null))));
+  }
+  return /* @__PURE__ */ import_react4.default.createElement("div", { className: "w-full h-64 mt-4 mb-2 select-none" }, /* @__PURE__ */ import_react4.default.createElement(import_recharts.ResponsiveContainer, { width: "100%", height: "100%" }, type === "bar" ? /* @__PURE__ */ import_react4.default.createElement(import_recharts.BarChart, { data, margin: { top: 10, right: 10, left: -20, bottom: 0 } }, /* @__PURE__ */ import_react4.default.createElement(import_recharts.CartesianGrid, { strokeDasharray: "3 3", vertical: false, stroke: "#e2e8f0" }), /* @__PURE__ */ import_react4.default.createElement(import_recharts.XAxis, { dataKey: xAxisKey, tick: { fontSize: 12, fill: "#64748b" }, tickLine: false, axisLine: { stroke: "#cbd5e1" } }), /* @__PURE__ */ import_react4.default.createElement(import_recharts.YAxis, { tick: { fontSize: 12, fill: "#64748b" }, tickLine: false, axisLine: false }), /* @__PURE__ */ import_react4.default.createElement(
+    import_recharts.Tooltip,
+    {
+      contentStyle: { borderRadius: "8px", border: "none", boxShadow: "0 4px 6px -1px rgb(0 0 0 / 0.1)" },
+      cursor: { fill: "#f1f5f9" }
+    }
+  ), /* @__PURE__ */ import_react4.default.createElement(import_recharts.Legend, { wrapperStyle: { fontSize: 12 } }), dataKeys.map((key, index) => /* @__PURE__ */ import_react4.default.createElement(
+    import_recharts.Bar,
+    {
+      key,
+      dataKey: key,
+      fill: colors[index % colors.length],
+      radius: [4, 4, 0, 0],
+      barSize: Math.max(20, 60 / data.length)
+    }
+  ))) : /* @__PURE__ */ import_react4.default.createElement(import_recharts.LineChart, { data, margin: { top: 10, right: 10, left: -20, bottom: 0 } }, /* @__PURE__ */ import_react4.default.createElement(import_recharts.CartesianGrid, { strokeDasharray: "3 3", vertical: false, stroke: "#e2e8f0" }), /* @__PURE__ */ import_react4.default.createElement(import_recharts.XAxis, { dataKey: xAxisKey, tick: { fontSize: 12, fill: "#64748b" }, tickLine: false, axisLine: { stroke: "#cbd5e1" } }), /* @__PURE__ */ import_react4.default.createElement(import_recharts.YAxis, { tick: { fontSize: 12, fill: "#64748b" }, tickLine: false, axisLine: false }), /* @__PURE__ */ import_react4.default.createElement(
+    import_recharts.Tooltip,
+    {
+      contentStyle: { borderRadius: "8px", border: "none", boxShadow: "0 4px 6px -1px rgb(0 0 0 / 0.1)" }
+    }
+  ), /* @__PURE__ */ import_react4.default.createElement(import_recharts.Legend, { wrapperStyle: { fontSize: 12 } }), dataKeys.map((key, index) => /* @__PURE__ */ import_react4.default.createElement(
+    import_recharts.Line,
+    {
+      key,
+      type: "monotone",
+      dataKey: key,
+      stroke: colors[index % colors.length],
+      strokeWidth: 3,
+      dot: { r: 4, strokeWidth: 2 },
+      activeDot: { r: 6 }
+    }
+  )))));
+}
+
 // src/components/MessageBubble.tsx
 function MessageBubble({
   message,
@@ -214,7 +291,7 @@ function MessageBubble({
   onAddToCart
 }) {
   const isUser = message.role === "user";
-  const [showSources, setShowSources] = import_react4.default.useState(false);
+  const [showSources, setShowSources] = import_react5.default.useState(false);
   const resolveImage = (data) => {
     if (!data) return void 0;
     const singleFields = ["image", "img", "thumbnail"];
@@ -227,7 +304,7 @@ function MessageBubble({
     }
     return void 0;
   };
-  const productsFromSources = import_react4.default.useMemo(() => {
+  const productsFromSources = import_react5.default.useMemo(() => {
     if (isUser || !sources) return [];
     return sources.filter((s) => {
       const m = s.metadata || {};
@@ -245,7 +322,7 @@ function MessageBubble({
       };
     });
   }, [sources, isUser]);
-  const { productsFromContent, cleanContent } = import_react4.default.useMemo(() => {
+  const { productsFromContent, cleanContent } = import_react5.default.useMemo(() => {
     if (isUser) return { productsFromContent: [], cleanContent: message.content };
     const jsonRegex = /```json\s*([\s\S]*?)\s*```/g;
     const products = [];
@@ -268,7 +345,7 @@ function MessageBubble({
     }
     return { productsFromContent: products, cleanContent: content.trim() };
   }, [message.content, isUser]);
-  const allProducts = import_react4.default.useMemo(() => {
+  const allProducts = import_react5.default.useMemo(() => {
     if (productsFromContent.length > 0) return productsFromContent;
     const uniqueProducts = [];
     const seenIds = /* @__PURE__ */ new Set();
@@ -286,43 +363,88 @@ function MessageBubble({
     return uniqueProducts;
   }, [productsFromSources, productsFromContent, message.content]);
   const hasProducts = allProducts.length > 0;
-  return /* @__PURE__ */ import_react4.default.createElement("div", { className: `flex gap-3 ${isUser ? "flex-row-reverse" : "flex-row"} items-start` }, /* @__PURE__ */ import_react4.default.createElement(
+  return /* @__PURE__ */ import_react5.default.createElement("div", { className: `flex gap-3 ${isUser ? "flex-row-reverse" : "flex-row"} items-start` }, /* @__PURE__ */ import_react5.default.createElement(
     "div",
     {
       className: `flex-shrink-0 w-8 h-8 rounded-full flex items-center justify-center shadow-lg ${isUser ? "text-white" : "bg-slate-100 dark:bg-white/10 text-slate-700 dark:text-white/80"}`,
       style: isUser ? { background: `linear-gradient(135deg, ${primaryColor}, ${accentColor})` } : {}
     },
-    isUser ? /* @__PURE__ */ import_react4.default.createElement(import_lucide_react4.User, { className: "w-4 h-4 text-white" }) : /* @__PURE__ */ import_react4.default.createElement(import_lucide_react4.Bot, { className: "w-4 h-4" })
-  ), /* @__PURE__ */ import_react4.default.createElement("div", { className: `flex flex-col gap-1 max-w-[90%] ${isUser ? "items-end" : "items-start"}` }, /* @__PURE__ */ import_react4.default.createElement(
+    isUser ? /* @__PURE__ */ import_react5.default.createElement(import_lucide_react4.User, { className: "w-4 h-4 text-white" }) : /* @__PURE__ */ import_react5.default.createElement(import_lucide_react4.Bot, { className: "w-4 h-4" })
+  ), /* @__PURE__ */ import_react5.default.createElement("div", { className: `flex flex-col gap-1 max-w-[90%] ${isUser ? "items-end" : "items-start"}` }, /* @__PURE__ */ import_react5.default.createElement(
     "div",
     {
       className: `relative px-4 py-3 rounded-2xl text-sm leading-relaxed shadow-sm dark:shadow-lg ${isUser ? "text-white rounded-tr-sm" : "bg-white dark:bg-white/5 border border-slate-200 dark:border-white/10 text-slate-800 dark:text-white/90 rounded-tl-sm"}`,
       style: isUser ? { background: `linear-gradient(135deg, ${primaryColor}, ${accentColor})` } : {}
     },
-    isStreaming && !message.content ? /* @__PURE__ */ import_react4.default.createElement("span", { className: "flex items-center gap-1 py-1" }, /* @__PURE__ */ import_react4.default.createElement("span", { className: "w-1.5 h-1.5 rounded-full bg-slate-400 dark:bg-white/60 animate-bounce [animation-delay:0ms]" }), /* @__PURE__ */ import_react4.default.createElement("span", { className: "w-1.5 h-1.5 rounded-full bg-slate-400 dark:bg-white/60 animate-bounce [animation-delay:150ms]" }), /* @__PURE__ */ import_react4.default.createElement("span", { className: "w-1.5 h-1.5 rounded-full bg-slate-400 dark:bg-white/60 animate-bounce [animation-delay:300ms]" })) : /* @__PURE__ */ import_react4.default.createElement("div", { className: `prose prose-sm max-w-none ${isUser ? "prose-invert" : "dark:prose-invert"}` }, /* @__PURE__ */ import_react4.default.createElement(import_react_markdown.default, { remarkPlugins: [import_remark_gfm.default] }, cleanContent || message.content), isStreaming && message.content && /* @__PURE__ */ import_react4.default.createElement("span", { className: "inline-block w-1.5 h-3.5 ml-1 bg-emerald-500 animate-pulse align-middle" }))
-  ), !isUser && hasProducts && /* @__PURE__ */ import_react4.default.createElement("div", { className: "w-full mt-1" }, /* @__PURE__ */ import_react4.default.createElement(
+    isStreaming && !message.content ? /* @__PURE__ */ import_react5.default.createElement("span", { className: "flex items-center gap-1 py-1" }, /* @__PURE__ */ import_react5.default.createElement("span", { className: "w-1.5 h-1.5 rounded-full bg-slate-400 dark:bg-white/60 animate-bounce [animation-delay:0ms]" }), /* @__PURE__ */ import_react5.default.createElement("span", { className: "w-1.5 h-1.5 rounded-full bg-slate-400 dark:bg-white/60 animate-bounce [animation-delay:150ms]" }), /* @__PURE__ */ import_react5.default.createElement("span", { className: "w-1.5 h-1.5 rounded-full bg-slate-400 dark:bg-white/60 animate-bounce [animation-delay:300ms]" })) : /* @__PURE__ */ import_react5.default.createElement("div", { className: `prose prose-sm max-w-none ${isUser ? "prose-invert" : "dark:prose-invert"}` }, /* @__PURE__ */ import_react5.default.createElement(
+      import_react_markdown.default,
+      {
+        remarkPlugins: [import_remark_gfm.default],
+        components: {
+          table: (_a) => {
+            var props = __objRest(_a, []);
+            return /* @__PURE__ */ import_react5.default.createElement("div", { className: "overflow-x-auto my-4 rounded-xl border border-slate-200 dark:border-white/10 shadow-sm" }, /* @__PURE__ */ import_react5.default.createElement("table", __spreadValues({ className: "w-full text-left border-collapse min-w-[400px]" }, props)));
+          },
+          thead: (_b) => {
+            var props = __objRest(_b, []);
+            return /* @__PURE__ */ import_react5.default.createElement("thead", __spreadValues({ className: "bg-slate-50 dark:bg-white/5 border-b border-slate-200 dark:border-white/10" }, props));
+          },
+          th: (_c) => {
+            var props = __objRest(_c, []);
+            return /* @__PURE__ */ import_react5.default.createElement("th", __spreadValues({ className: "p-3 font-semibold text-slate-700 dark:text-white/90 first:rounded-tl-xl last:rounded-tr-xl" }, props));
+          },
+          td: (_d) => {
+            var props = __objRest(_d, []);
+            return /* @__PURE__ */ import_react5.default.createElement("td", __spreadValues({ className: "p-3 border-b border-slate-100 dark:border-white/5 last:border-0 text-slate-600 dark:text-white/70" }, props));
+          },
+          code(_e) {
+            var _f = _e, { inline, className, children } = _f, props = __objRest(_f, ["inline", "className", "children"]);
+            const match = /language-(\w+)/.exec(className || "");
+            const isChart = match && match[1] === "chart";
+            if (!inline && isChart) {
+              try {
+                const config = JSON.parse(String(children).replace(/\n$/, ""));
+                return /* @__PURE__ */ import_react5.default.createElement("div", { className: "my-4 p-4 bg-white dark:bg-slate-900 rounded-xl border border-slate-200 dark:border-white/10 shadow-sm" }, /* @__PURE__ */ import_react5.default.createElement(
+                  DynamicChart,
+                  {
+                    config,
+                    primaryColor,
+                    accentColor
+                  }
+                ));
+              } catch (e) {
+                return /* @__PURE__ */ import_react5.default.createElement("div", { className: "p-4 bg-red-50 dark:bg-red-900/20 text-red-600 dark:text-red-400 rounded-lg text-sm" }, "Failed to render chart: Invalid configuration.");
+              }
+            }
+            return /* @__PURE__ */ import_react5.default.createElement("code", __spreadValues({ className }, props), children);
+          }
+        }
+      },
+      cleanContent || message.content
+    ), isStreaming && message.content && /* @__PURE__ */ import_react5.default.createElement("span", { className: "inline-block w-1.5 h-3.5 ml-1 bg-emerald-500 animate-pulse align-middle" }))
+  ), !isUser && hasProducts && /* @__PURE__ */ import_react5.default.createElement("div", { className: "w-full mt-1" }, /* @__PURE__ */ import_react5.default.createElement(
     ProductCarousel,
     {
       products: allProducts,
       primaryColor,
       onAddToCart
     }
-  )), !isUser && sources && sources.length > 0 && /* @__PURE__ */ import_react4.default.createElement("div", { className: "w-full" }, /* @__PURE__ */ import_react4.default.createElement(
+  )), !isUser && sources && sources.length > 0 && /* @__PURE__ */ import_react5.default.createElement("div", { className: "w-full" }, /* @__PURE__ */ import_react5.default.createElement(
     "button",
     {
       onClick: () => setShowSources((s) => !s),
       className: "text-[11px] text-indigo-400 hover:text-indigo-300 transition-colors flex items-center gap-1 mt-1"
     },
-    showSources ? /* @__PURE__ */ import_react4.default.createElement(import_lucide_react4.ChevronDown, { className: "w-3 h-3" }) : /* @__PURE__ */ import_react4.default.createElement(import_lucide_react4.ChevronRight, { className: "w-3 h-3" }),
+    showSources ? /* @__PURE__ */ import_react5.default.createElement(import_lucide_react4.ChevronDown, { className: "w-3 h-3" }) : /* @__PURE__ */ import_react5.default.createElement(import_lucide_react4.ChevronRight, { className: "w-3 h-3" }),
     sources.length,
     " source",
     sources.length !== 1 ? "s" : "",
     " used"
-  ), showSources && /* @__PURE__ */ import_react4.default.createElement("div", { className: "mt-2 flex flex-col gap-2" }, sources.map((src, i) => /* @__PURE__ */ import_react4.default.createElement(SourceCard, { key: src.id, source: src, index: i }))))));
+  ), showSources && /* @__PURE__ */ import_react5.default.createElement("div", { className: "mt-2 flex flex-col gap-2" }, sources.map((src, i) => /* @__PURE__ */ import_react5.default.createElement(SourceCard, { key: src.id, source: src, index: i }))))));
 }
 
 // src/components/ConfigProvider.tsx
-var import_react5 = __toESM(require("react"));
+var import_react6 = __toESM(require("react"));
 
 // src/utils/templateUtils.ts
 function mergeDefined(base, override) {
@@ -338,8 +460,8 @@ function mergeDefined(base, override) {
   return merged;
 }
 
-// src/components/ConfigProvider.tsx
-var defaultConfig = {
+// src/config/uiConstants.ts
+var DEFAULT_CONFIG = {
   projectId: "default",
   ui: {
     title: "AI Assistant",
@@ -355,29 +477,45 @@ var defaultConfig = {
     visualStyle: "glass",
     borderRadius: "xl",
     allowUpload: true,
-    allowResize: true
+    allowResize: true,
+    enableVoiceInput: true
   }
 };
-var ConfigContext = (0, import_react5.createContext)(defaultConfig);
+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 = (0, import_react6.createContext)(DEFAULT_CONFIG);
 function ConfigProvider({
   config,
   children
 }) {
   const merged = {
-    projectId: (config == null ? void 0 : config.projectId) || defaultConfig.projectId,
-    ui: mergeDefined(defaultConfig.ui, config == null ? void 0 : config.ui)
+    projectId: (config == null ? void 0 : config.projectId) || DEFAULT_CONFIG.projectId,
+    ui: mergeDefined(DEFAULT_CONFIG.ui, config == null ? void 0 : config.ui)
   };
-  return /* @__PURE__ */ import_react5.default.createElement(ConfigContext.Provider, { value: merged }, children);
+  return /* @__PURE__ */ import_react6.default.createElement(ConfigContext.Provider, { value: merged }, children);
 }
 function useConfig() {
-  return (0, import_react5.useContext)(ConfigContext);
+  return (0, import_react6.useContext)(ConfigContext);
 }
 
 // src/hooks/useRagChat.ts
-var import_react6 = require("react");
+var import_react7 = require("react");
 
 // src/hooks/useStoredMessages.ts
-var React6 = __toESM(require("react"));
+var React7 = __toESM(require("react"));
 function readStoredMessages(storageKey) {
   if (typeof window === "undefined") {
     return [];
@@ -394,8 +532,8 @@ function readStoredMessages(storageKey) {
   }
 }
 function useStoredMessages(storageKey, persist) {
-  const [messages, setMessages] = React6.useState(() => persist ? readStoredMessages(storageKey) : []);
-  React6.useEffect(() => {
+  const [messages, setMessages] = React7.useState(() => persist ? readStoredMessages(storageKey) : []);
+  React7.useEffect(() => {
     if (!persist || typeof window === "undefined") {
       return;
     }
@@ -435,14 +573,14 @@ function useRagChat(projectId, options = {}) {
   } = options;
   const storageKey = `rag_chat_${projectId}`;
   const [messages, setMessages] = useStoredMessages(storageKey, persist);
-  const [isLoading, setIsLoading] = (0, import_react6.useState)(false);
-  const [error, setError] = (0, import_react6.useState)(null);
-  const lastInputRef = (0, import_react6.useRef)("");
-  const messagesRef = (0, import_react6.useRef)(messages);
-  (0, import_react6.useEffect)(() => {
+  const [isLoading, setIsLoading] = (0, import_react7.useState)(false);
+  const [error, setError] = (0, import_react7.useState)(null);
+  const lastInputRef = (0, import_react7.useRef)("");
+  const messagesRef = (0, import_react7.useRef)(messages);
+  (0, import_react7.useEffect)(() => {
     messagesRef.current = messages;
   }, [messages]);
-  const sendMessage = (0, import_react6.useCallback)(
+  const sendMessage = (0, import_react7.useCallback)(
     async (text, opts) => {
       var _a, _b;
       const trimmed = text.trim();
@@ -539,12 +677,12 @@ function useRagChat(projectId, options = {}) {
     },
     [apiUrl, isLoading, namespace, onError, onReply, projectId, setMessages]
   );
-  const clear = (0, import_react6.useCallback)(() => {
+  const clear = (0, import_react7.useCallback)(() => {
     setMessages([]);
     setError(null);
     if (persist) localStorage.removeItem(storageKey);
   }, [persist, setMessages, storageKey]);
-  const retry = (0, import_react6.useCallback)(async () => {
+  const retry = (0, import_react7.useCallback)(async () => {
     if (lastInputRef.current) {
       const latestMessage = messagesRef.current[messagesRef.current.length - 1];
       await sendMessage(lastInputRef.current, {
@@ -563,21 +701,6 @@ function useRagChat(projectId, options = {}) {
   };
 }
 
-// src/config/uiConstants.ts
-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/ChatWindow.tsx
 function ChatWindow({
   className = "",
@@ -593,32 +716,88 @@ function ChatWindow({
 }) {
   var _a;
   const { ui, projectId } = useConfig();
-  const [input, setInput] = (0, import_react7.useState)("");
-  const [mounted, setMounted] = (0, import_react7.useState)(false);
-  const bottomRef = (0, import_react7.useRef)(null);
-  const inputRef = (0, import_react7.useRef)(null);
+  const [input, setInput] = (0, import_react8.useState)("");
+  const [mounted, setMounted] = (0, import_react8.useState)(false);
+  const bottomRef = (0, import_react8.useRef)(null);
+  const inputRef = (0, import_react8.useRef)(null);
   const { messages, send, clear, isLoading, error } = useRagChat(projectId, {
     namespace: projectId
   });
-  (0, import_react7.useEffect)(() => {
+  const [suggestions, setSuggestions] = (0, import_react8.useState)([]);
+  const [isSuggesting, setIsSuggesting] = (0, import_react8.useState)(false);
+  const [isListening, setIsListening] = (0, import_react8.useState)(false);
+  const recognitionRef = (0, import_react8.useRef)(null);
+  (0, import_react8.useEffect)(() => {
+    if (typeof window !== "undefined") {
+      const win = window;
+      const SpeechRecognition = win.SpeechRecognition || win.webkitSpeechRecognition;
+      if (SpeechRecognition) {
+        const recognition = new SpeechRecognition();
+        recognition.continuous = true;
+        recognition.interimResults = true;
+        recognition.onresult = (event) => {
+          let finalTranscript = "";
+          for (let i = event.resultIndex; i < event.results.length; ++i) {
+            if (event.results[i].isFinal) {
+              finalTranscript += event.results[i][0].transcript;
+            }
+          }
+          if (finalTranscript) {
+            setInput((prev) => (prev ? prev + " " : "") + finalTranscript.trim());
+          }
+        };
+        recognition.onerror = (event) => {
+          console.error("Speech recognition error:", event.error);
+          setIsListening(false);
+        };
+        recognition.onend = () => {
+          setIsListening(false);
+        };
+        recognitionRef.current = recognition;
+      }
+    }
+  }, []);
+  const toggleListening = () => {
+    if (!recognitionRef.current) {
+      alert("Speech recognition is not supported in your browser.");
+      return;
+    }
+    if (isListening) {
+      recognitionRef.current.stop();
+    } else {
+      try {
+        recognitionRef.current.start();
+        setIsListening(true);
+      } catch (err) {
+        console.error("Failed to start recognition:", err);
+      }
+    }
+  };
+  (0, import_react8.useEffect)(() => {
     setMounted(true);
   }, []);
-  (0, import_react7.useEffect)(() => {
+  (0, import_react8.useEffect)(() => {
     var _a2;
     if (messages.length > 0 || isLoading) {
       (_a2 = bottomRef.current) == null ? void 0 : _a2.scrollIntoView({ behavior: "smooth" });
     }
   }, [messages, isLoading]);
-  const sendMessage = (0, import_react7.useCallback)(async () => {
+  const sendMessage = (0, import_react8.useCallback)(async () => {
+    var _a2;
     const text = input.trim();
     if (!text || isLoading) return;
+    if (isListening) {
+      (_a2 = recognitionRef.current) == null ? void 0 : _a2.stop();
+    }
     setInput("");
+    setSuggestions([]);
+    setIsSuggesting(false);
     await send(text);
     window.setTimeout(() => {
-      var _a2;
-      return (_a2 = inputRef.current) == null ? void 0 : _a2.focus();
+      var _a3;
+      return (_a3 = inputRef.current) == null ? void 0 : _a3.focus();
     }, 50);
-  }, [input, isLoading, send]);
+  }, [input, isLoading, send, isListening]);
   const handleKeyDown = (e) => {
     if (e.key === "Enter" && !e.shiftKey) {
       e.preventDefault();
@@ -627,13 +806,13 @@ function ChatWindow({
   };
   const clearHistory = () => {
     clear();
+    setSuggestions([]);
+    setIsSuggesting(false);
   };
   const isEmpty = messages.length === 0;
   const currentRadius = BORDER_RADIUS_MAP[ui.borderRadius || "xl"];
   const isGlass = ui.visualStyle !== "solid";
-  const [suggestions, setSuggestions] = (0, import_react7.useState)([]);
-  const [isSuggesting, setIsSuggesting] = (0, import_react7.useState)(false);
-  (0, import_react7.useEffect)(() => {
+  (0, import_react8.useEffect)(() => {
     if (input.trim().length < 3) {
       return;
     }
@@ -657,83 +836,83 @@ function ChatWindow({
     }, 800);
     return () => clearTimeout(timer);
   }, [input, projectId]);
-  return /* @__PURE__ */ import_react7.default.createElement(
+  return /* @__PURE__ */ import_react8.default.createElement(
     "div",
     {
       className: `relative flex flex-col border border-slate-200 dark:border-white/10 shadow-2xl transition-all duration-300 ${currentRadius} ${isGlass ? "bg-white/90 dark:bg-[#0f0f1a]/90 backdrop-blur-xl" : "bg-white dark:bg-[#0f0f1a]"} ${className}`,
       style: __spreadValues({ "--primary": ui.primaryColor, "--accent": ui.accentColor }, style)
     },
-    onResizeStart && /* @__PURE__ */ import_react7.default.createElement(
+    onResizeStart && /* @__PURE__ */ import_react8.default.createElement(
       "div",
       {
         onMouseDown: onResizeStart,
         className: "absolute top-0 left-0 w-6 h-6 cursor-nw-resize z-[100] group flex items-start justify-start p-1",
         title: "Drag to resize"
       },
-      /* @__PURE__ */ import_react7.default.createElement("div", { className: "w-2.5 h-2.5 border-t-2 border-l-2 border-slate-300 dark:border-white/20 group-hover:border-slate-500 dark:group-hover:border-white/50 transition-colors rounded-tl-[2px]" })
+      /* @__PURE__ */ import_react8.default.createElement("div", { className: "w-2.5 h-2.5 border-t-2 border-l-2 border-slate-300 dark:border-white/20 group-hover:border-slate-500 dark:group-hover:border-white/50 transition-colors rounded-tl-[2px]" })
     ),
-    /* @__PURE__ */ import_react7.default.createElement(
+    /* @__PURE__ */ import_react8.default.createElement(
       "div",
       {
         className: "flex items-center justify-between px-5 py-4 border-b border-slate-200 dark:border-white/10",
         style: { background: `linear-gradient(135deg, ${ui.primaryColor}15, ${ui.accentColor}10)` }
       },
-      /* @__PURE__ */ import_react7.default.createElement("div", { className: "flex items-center gap-3" }, ui.logoUrl ? (
+      /* @__PURE__ */ import_react8.default.createElement("div", { className: "flex items-center gap-3" }, ui.logoUrl ? (
         // eslint-disable-next-line @next/next/no-img-element
-        /* @__PURE__ */ import_react7.default.createElement("img", { src: ui.logoUrl, alt: "logo", className: "w-8 h-8 rounded-lg object-cover" })
-      ) : /* @__PURE__ */ import_react7.default.createElement(
+        /* @__PURE__ */ import_react8.default.createElement("img", { src: ui.logoUrl, alt: "logo", className: "w-8 h-8 rounded-lg object-cover" })
+      ) : /* @__PURE__ */ import_react8.default.createElement(
         "div",
         {
           className: `w-9 h-9 flex items-center justify-center shadow-md ${ui.borderRadius === "full" ? "rounded-full" : "rounded-xl"}`,
           style: { background: `linear-gradient(135deg, ${ui.primaryColor}, ${ui.accentColor})` }
         },
-        /* @__PURE__ */ import_react7.default.createElement(import_lucide_react5.Bot, { className: "w-5 h-5 text-white" })
-      ), /* @__PURE__ */ import_react7.default.createElement("div", null, /* @__PURE__ */ import_react7.default.createElement("h2", { className: "text-slate-900 dark:text-white font-semibold text-sm leading-tight" }, ui.title), ui.poweredBy && /* @__PURE__ */ import_react7.default.createElement("p", { className: "text-slate-500 dark:text-white/40 text-[11px] leading-tight" }, `Powered by ${ui.poweredBy}`))),
-      /* @__PURE__ */ import_react7.default.createElement("div", { className: "flex items-center gap-1.5" }, /* @__PURE__ */ import_react7.default.createElement("span", { className: "flex items-center gap-1 text-[10px] text-emerald-500 dark:text-emerald-400 mr-2" }, /* @__PURE__ */ import_react7.default.createElement("span", { className: "w-1.5 h-1.5 rounded-full bg-emerald-500 dark:bg-emerald-400 animate-pulse" }), "Online"), /* @__PURE__ */ import_react7.default.createElement("div", { className: "flex items-center bg-slate-100/50 dark:bg-white/5 rounded-lg p-0.5 border border-slate-200/50 dark:border-white/5" }, mounted && messages.length > 0 && /* @__PURE__ */ import_react7.default.createElement(
+        /* @__PURE__ */ import_react8.default.createElement(import_lucide_react5.Bot, { className: "w-5 h-5 text-white" })
+      ), /* @__PURE__ */ import_react8.default.createElement("div", null, /* @__PURE__ */ import_react8.default.createElement("h2", { className: "text-slate-900 dark:text-white font-semibold text-sm leading-tight" }, ui.title), ui.poweredBy && /* @__PURE__ */ import_react8.default.createElement("p", { className: "text-slate-500 dark:text-white/40 text-[11px] leading-tight" }, `Powered by ${ui.poweredBy}`))),
+      /* @__PURE__ */ import_react8.default.createElement("div", { className: "flex items-center gap-1.5" }, /* @__PURE__ */ import_react8.default.createElement("span", { className: "flex items-center gap-1 text-[10px] text-emerald-500 dark:text-emerald-400 mr-2" }, /* @__PURE__ */ import_react8.default.createElement("span", { className: "w-1.5 h-1.5 rounded-full bg-emerald-500 dark:bg-emerald-400 animate-pulse" }), "Online"), /* @__PURE__ */ import_react8.default.createElement("div", { className: "flex items-center bg-slate-100/50 dark:bg-white/5 rounded-lg p-0.5 border border-slate-200/50 dark:border-white/5" }, mounted && messages.length > 0 && /* @__PURE__ */ import_react8.default.createElement(
         "button",
         {
           onClick: clearHistory,
           title: "Clear conversation",
           className: "w-7 h-7 rounded-md flex items-center justify-center text-slate-400 hover:text-rose-500 dark:text-white/40 dark:hover:text-rose-400 hover:bg-white dark:hover:bg-white/10 transition-all cursor-pointer"
         },
-        /* @__PURE__ */ import_react7.default.createElement(import_lucide_react5.Trash2, { className: "w-3.5 h-3.5" })
-      ), isResized && onResetResize && /* @__PURE__ */ import_react7.default.createElement(
+        /* @__PURE__ */ import_react8.default.createElement(import_lucide_react5.Trash2, { className: "w-3.5 h-3.5" })
+      ), isResized && onResetResize && /* @__PURE__ */ import_react8.default.createElement(
         "button",
         {
           onClick: onResetResize,
           title: "Reset to default size",
           className: "w-7 h-7 rounded-md flex items-center justify-center text-slate-400 hover:text-blue-500 dark:text-white/40 dark:hover:text-blue-400 hover:bg-white dark:hover:bg-white/10 transition-all cursor-pointer"
         },
-        /* @__PURE__ */ import_react7.default.createElement(import_lucide_react5.RotateCcw, { className: "w-3.5 h-3.5" })
-      ), onMaximize && /* @__PURE__ */ import_react7.default.createElement(
+        /* @__PURE__ */ import_react8.default.createElement(import_lucide_react5.RotateCcw, { className: "w-3.5 h-3.5" })
+      ), onMaximize && /* @__PURE__ */ import_react8.default.createElement(
         "button",
         {
           onClick: onMaximize,
           title: isMaximized ? "Minimize" : "Maximize",
           className: "w-7 h-7 rounded-md flex items-center justify-center text-slate-400 hover:text-blue-500 dark:text-white/40 dark:hover:text-blue-400 hover:bg-white dark:hover:bg-white/10 transition-all cursor-pointer"
         },
-        isMaximized ? /* @__PURE__ */ import_react7.default.createElement(import_lucide_react5.Minimize2, { className: "w-3.5 h-3.5" }) : /* @__PURE__ */ import_react7.default.createElement(import_lucide_react5.Maximize2, { className: "w-3.5 h-3.5" })
-      ), showClose && onClose && /* @__PURE__ */ import_react7.default.createElement(
+        isMaximized ? /* @__PURE__ */ import_react8.default.createElement(import_lucide_react5.Minimize2, { className: "w-3.5 h-3.5" }) : /* @__PURE__ */ import_react8.default.createElement(import_lucide_react5.Maximize2, { className: "w-3.5 h-3.5" })
+      ), showClose && onClose && /* @__PURE__ */ import_react8.default.createElement(
         "button",
         {
           onClick: onClose,
           title: "Close chat",
           className: "w-7 h-7 rounded-md flex items-center justify-center text-slate-400 hover:text-slate-600 dark:text-white/40 dark:hover:text-white/70 hover:bg-white dark:hover:bg-white/10 transition-all cursor-pointer"
         },
-        /* @__PURE__ */ import_react7.default.createElement(import_lucide_react5.X, { className: "w-4 h-4" })
+        /* @__PURE__ */ import_react8.default.createElement(import_lucide_react5.X, { className: "w-4 h-4" })
       )))
     ),
-    /* @__PURE__ */ import_react7.default.createElement("div", { className: "flex-1 overflow-y-auto px-4 py-4 space-y-5 scrollbar-thin scrollbar-thumb-slate-200 dark:scrollbar-thumb-white/10 scrollbar-track-transparent min-h-0 bg-slate-50 dark:bg-transparent" }, !mounted || isEmpty ? (
+    /* @__PURE__ */ import_react8.default.createElement("div", { className: "flex-1 overflow-y-auto px-4 py-4 space-y-5 scrollbar-thin scrollbar-thumb-slate-200 dark:scrollbar-thumb-white/10 scrollbar-track-transparent min-h-0 bg-slate-50 dark:bg-transparent" }, !mounted || isEmpty ? (
       /* Welcome state */
-      /* @__PURE__ */ import_react7.default.createElement("div", { className: "h-full flex flex-col items-center justify-center text-center gap-4 px-6 py-12" }, /* @__PURE__ */ import_react7.default.createElement(
+      /* @__PURE__ */ import_react8.default.createElement("div", { className: "h-full flex flex-col items-center justify-center text-center gap-4 px-6 py-12" }, /* @__PURE__ */ import_react8.default.createElement(
         "div",
         {
           className: `w-16 h-16 flex items-center justify-center shadow-lg ${ui.borderRadius === "full" ? "rounded-full" : "rounded-2xl"}`,
           style: { background: `linear-gradient(135deg, ${ui.primaryColor}, ${ui.accentColor})` }
         },
-        /* @__PURE__ */ import_react7.default.createElement(import_lucide_react5.Sparkles, { className: "w-8 h-8 text-white" })
-      ), /* @__PURE__ */ import_react7.default.createElement("div", null, /* @__PURE__ */ import_react7.default.createElement("p", { className: "text-slate-800 dark:text-white/80 font-medium leading-relaxed" }, ui.welcomeMessage), /* @__PURE__ */ import_react7.default.createElement("p", { className: "text-slate-500 dark:text-white/30 text-sm mt-2" }, "Ask a question to get started")), /* @__PURE__ */ import_react7.default.createElement("div", { className: "flex flex-wrap gap-2 justify-center mt-2" }, CHAT_SUGGESTIONS.map(
-        (suggestion) => /* @__PURE__ */ import_react7.default.createElement(
+        /* @__PURE__ */ import_react8.default.createElement(import_lucide_react5.Sparkles, { className: "w-8 h-8 text-white" })
+      ), /* @__PURE__ */ import_react8.default.createElement("div", null, /* @__PURE__ */ import_react8.default.createElement("p", { className: "text-slate-800 dark:text-white/80 font-medium leading-relaxed" }, ui.welcomeMessage), /* @__PURE__ */ import_react8.default.createElement("p", { className: "text-slate-500 dark:text-white/30 text-sm mt-2" }, "Ask a question to get started")), /* @__PURE__ */ import_react8.default.createElement("div", { className: "flex flex-wrap gap-2 justify-center mt-2" }, CHAT_SUGGESTIONS.map(
+        (suggestion) => /* @__PURE__ */ import_react8.default.createElement(
           "button",
           {
             key: suggestion,
@@ -747,7 +926,7 @@ function ChatWindow({
           suggestion
         )
       )))
-    ) : messages.map((msg, index) => /* @__PURE__ */ import_react7.default.createElement(
+    ) : messages.map((msg, index) => /* @__PURE__ */ import_react8.default.createElement(
       MessageBubble,
       {
         key: msg.id,
@@ -758,17 +937,17 @@ function ChatWindow({
         accentColor: ui.accentColor,
         onAddToCart
       }
-    )), isLoading && ((_a = messages[messages.length - 1]) == null ? void 0 : _a.role) !== "assistant" && /* @__PURE__ */ import_react7.default.createElement(
+    )), isLoading && ((_a = messages[messages.length - 1]) == null ? void 0 : _a.role) !== "assistant" && /* @__PURE__ */ import_react8.default.createElement(
       MessageBubble,
       {
-        message: { role: "assistant", content: "" },
+        message: { id: "loading", role: "assistant", content: "", createdAt: (/* @__PURE__ */ new Date()).toISOString() },
         isStreaming: true,
         primaryColor: ui.primaryColor,
         accentColor: ui.accentColor,
         onAddToCart
       }
-    ), error && /* @__PURE__ */ import_react7.default.createElement("div", { className: "flex items-center gap-2 text-rose-500 dark:text-rose-400 text-sm bg-rose-50 dark:bg-rose-400/10 border border-rose-200 dark:border-rose-400/20 rounded-xl px-4 py-3" }, /* @__PURE__ */ import_react7.default.createElement(import_lucide_react5.TriangleAlert, { className: "w-4 h-4 flex-shrink-0" }), /* @__PURE__ */ import_react7.default.createElement("span", null, error)), /* @__PURE__ */ import_react7.default.createElement("div", { ref: bottomRef })),
-    /* @__PURE__ */ import_react7.default.createElement("div", { className: `px-4 pb-4 pt-2 border-t border-slate-200 dark:border-white/10 ${isGlass ? "bg-transparent" : "bg-white dark:bg-[#0f0f1a]"}` }, (suggestions.length > 0 || isSuggesting) && !isLoading && /* @__PURE__ */ import_react7.default.createElement("div", { className: "mb-3 flex flex-wrap gap-2 animate-in fade-in slide-in-from-bottom-2 duration-300" }, suggestions.map((suggestion) => /* @__PURE__ */ import_react7.default.createElement(
+    ), error && /* @__PURE__ */ import_react8.default.createElement("div", { className: "flex items-center gap-2 text-rose-500 dark:text-rose-400 text-sm bg-rose-50 dark:bg-rose-400/10 border border-rose-200 dark:border-rose-400/20 rounded-xl px-4 py-3" }, /* @__PURE__ */ import_react8.default.createElement(import_lucide_react5.TriangleAlert, { className: "w-4 h-4 flex-shrink-0" }), /* @__PURE__ */ import_react8.default.createElement("span", null, error)), /* @__PURE__ */ import_react8.default.createElement("div", { ref: bottomRef })),
+    /* @__PURE__ */ import_react8.default.createElement("div", { className: `px-4 pb-4 pt-2 border-t border-slate-200 dark:border-white/10 ${isGlass ? "bg-transparent" : "bg-white dark:bg-[#0f0f1a]"}` }, (suggestions.length > 0 || isSuggesting) && !isLoading && /* @__PURE__ */ import_react8.default.createElement("div", { className: "mb-3 flex flex-wrap gap-2 animate-in fade-in slide-in-from-bottom-2 duration-300" }, suggestions.map((suggestion) => /* @__PURE__ */ import_react8.default.createElement(
       "button",
       {
         key: suggestion,
@@ -780,9 +959,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__ */ import_react7.default.createElement(import_lucide_react5.Sparkles, { className: "w-3 h-3 text-amber-400" }),
+      /* @__PURE__ */ import_react8.default.createElement(import_lucide_react5.Sparkles, { className: "w-3 h-3 text-amber-400" }),
       suggestion
-    )), isSuggesting && suggestions.length === 0 && /* @__PURE__ */ import_react7.default.createElement("div", { className: "flex items-center gap-1.5 px-3 py-1.5 rounded-xl text-[11px] font-medium text-slate-400 dark:text-white/30 animate-pulse" }, /* @__PURE__ */ import_react7.default.createElement(import_lucide_react5.Sparkles, { className: "w-3 h-3" }), "Thinking...")), /* @__PURE__ */ import_react7.default.createElement("div", { className: `flex items-end gap-2 bg-slate-50 dark:bg-white/5 border border-slate-200 dark:border-white/10 p-2 focus-within:border-slate-300 dark:focus-within:border-white/20 transition-all ${ui.borderRadius === "full" ? "rounded-3xl" : "rounded-2xl"}` }, /* @__PURE__ */ import_react7.default.createElement(
+    )), isSuggesting && suggestions.length === 0 && /* @__PURE__ */ import_react8.default.createElement("div", { className: "flex items-center gap-1.5 px-3 py-1.5 rounded-xl text-[11px] font-medium text-slate-400 dark:text-white/30 animate-pulse" }, /* @__PURE__ */ import_react8.default.createElement(import_lucide_react5.Sparkles, { className: "w-3 h-3" }), "Thinking...")), /* @__PURE__ */ import_react8.default.createElement("div", { className: `flex items-end gap-2 bg-slate-50 dark:bg-white/5 border border-slate-200 dark:border-white/10 p-2 focus-within:border-slate-300 dark:focus-within:border-white/20 transition-all ${ui.borderRadius === "full" ? "rounded-3xl" : "rounded-2xl"}` }, /* @__PURE__ */ import_react8.default.createElement(
       "textarea",
       {
         ref: inputRef,
@@ -801,7 +980,17 @@ 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" }
       }
-    ), /* @__PURE__ */ import_react7.default.createElement(
+    ), ui.enableVoiceInput !== false && /* @__PURE__ */ import_react8.default.createElement(
+      "button",
+      {
+        type: "button",
+        onClick: toggleListening,
+        disabled: isLoading,
+        className: `flex-shrink-0 w-9 h-9 rounded-xl flex items-center justify-center transition-all hover:scale-105 active:scale-95 disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:scale-100 disabled:active:scale-100 ${isListening ? "bg-rose-500 text-white animate-pulse shadow-md shadow-rose-500/20" : "text-slate-400 dark:text-white/40 hover:bg-slate-200 dark:hover:bg-white/10"}`,
+        title: isListening ? "Stop listening" : "Start voice input"
+      },
+      isListening ? /* @__PURE__ */ import_react8.default.createElement(import_lucide_react5.MicOff, { className: "w-4 h-4" }) : /* @__PURE__ */ import_react8.default.createElement(import_lucide_react5.Mic, { className: "w-4 h-4" })
+    ), /* @__PURE__ */ import_react8.default.createElement(
       "button",
       {
         onClick: sendMessage,
@@ -812,8 +1001,8 @@ function ChatWindow({
           // slate-400/20 for light mode disabled
         }
       },
-      /* @__PURE__ */ import_react7.default.createElement(import_lucide_react5.ArrowUp, { className: "w-4 h-4 text-white" })
-    )), /* @__PURE__ */ import_react7.default.createElement("p", { className: "text-center text-[10px] text-slate-400 dark:text-white/20 mt-2" }, "Press Enter to send \xB7 Shift+Enter for new line"))
+      /* @__PURE__ */ import_react8.default.createElement(import_lucide_react5.ArrowUp, { className: "w-4 h-4 text-white" })
+    )), /* @__PURE__ */ import_react8.default.createElement("p", { className: "text-center text-[10px] text-slate-400 dark:text-white/20 mt-2" }, "Press Enter to send \xB7 Shift+Enter for new line"))
   );
 }
 
@@ -821,12 +1010,12 @@ function ChatWindow({
 var DEFAULT_DIMENSIONS = { width: 380, height: 600 };
 function ChatWidget({ position = "bottom-right", onAddToCart }) {
   const { ui } = useConfig();
-  const [isOpen, setIsOpen] = (0, import_react8.useState)(false);
-  const [hasUnread, setHasUnread] = (0, import_react8.useState)(false);
-  const [dimensions, setDimensions] = (0, import_react8.useState)(DEFAULT_DIMENSIONS);
-  const [isResizing, setIsResizing] = (0, import_react8.useState)(false);
-  const [isMaximized, setIsMaximized] = (0, import_react8.useState)(false);
-  const [prevDimensions, setPrevDimensions] = (0, import_react8.useState)(DEFAULT_DIMENSIONS);
+  const [isOpen, setIsOpen] = (0, import_react9.useState)(false);
+  const [hasUnread, setHasUnread] = (0, import_react9.useState)(false);
+  const [dimensions, setDimensions] = (0, import_react9.useState)(DEFAULT_DIMENSIONS);
+  const [isResizing, setIsResizing] = (0, import_react9.useState)(false);
+  const [isMaximized, setIsMaximized] = (0, import_react9.useState)(false);
+  const [prevDimensions, setPrevDimensions] = (0, import_react9.useState)(DEFAULT_DIMENSIONS);
   if (ui.showWidget === false) return null;
   const positionClass = position === "bottom-left" ? "bottom-6 left-6" : "bottom-6 right-6";
   const windowPositionClass = position === "bottom-left" ? "bottom-20 left-6" : "bottom-20 right-6";
@@ -876,7 +1065,7 @@ function ChatWidget({ position = "bottom-right", onAddToCart }) {
     }
   };
   const isResized = dimensions.width !== DEFAULT_DIMENSIONS.width || dimensions.height !== DEFAULT_DIMENSIONS.height;
-  return /* @__PURE__ */ import_react8.default.createElement(import_react8.default.Fragment, null, /* @__PURE__ */ import_react8.default.createElement(
+  return /* @__PURE__ */ import_react9.default.createElement(import_react9.default.Fragment, null, /* @__PURE__ */ import_react9.default.createElement(
     "div",
     {
       className: `fixed z-[9998] max-w-[calc(100vw-3rem)] ease-in-out ${windowPositionClass} ${isOpen ? "opacity-100 translate-y-0 pointer-events-auto" : "opacity-0 translate-y-4 pointer-events-none"} ${isResizing ? "" : "transition-all duration-300"}`,
@@ -886,7 +1075,7 @@ function ChatWidget({ position = "bottom-right", onAddToCart }) {
         maxHeight: "calc(100vh - 6rem)"
       }
     },
-    /* @__PURE__ */ import_react8.default.createElement(
+    /* @__PURE__ */ import_react9.default.createElement(
       ChatWindow,
       {
         className: "h-full relative z-10",
@@ -900,13 +1089,13 @@ function ChatWidget({ position = "bottom-right", onAddToCart }) {
         onAddToCart
       }
     ),
-    /* @__PURE__ */ import_react8.default.createElement(
+    /* @__PURE__ */ import_react9.default.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__ */ import_react8.default.createElement(
+  ), /* @__PURE__ */ import_react9.default.createElement(
     "button",
     {
       onClick: isOpen ? () => setIsOpen(false) : handleOpen,
@@ -914,32 +1103,32 @@ function ChatWidget({ position = "bottom-right", onAddToCart }) {
       style: { background: `linear-gradient(135deg, ${ui.primaryColor}, ${ui.accentColor})` },
       "aria-label": "Open chat"
     },
-    /* @__PURE__ */ import_react8.default.createElement(
+    /* @__PURE__ */ import_react9.default.createElement(
       "span",
       {
         className: "absolute inset-0 rounded-full animate-ping opacity-20",
         style: { background: ui.primaryColor }
       }
     ),
-    /* @__PURE__ */ import_react8.default.createElement(
+    /* @__PURE__ */ import_react9.default.createElement(
       "span",
       {
         className: `transition-transform duration-300 ${isOpen ? "rotate-90 scale-90" : "rotate-0 scale-100"}`
       },
-      isOpen ? /* @__PURE__ */ import_react8.default.createElement(import_lucide_react6.X, { className: "w-6 h-6 text-white" }) : /* @__PURE__ */ import_react8.default.createElement(import_lucide_react6.MessageSquare, { className: "w-6 h-6 text-white" })
+      isOpen ? /* @__PURE__ */ import_react9.default.createElement(import_lucide_react6.X, { className: "w-6 h-6 text-white" }) : /* @__PURE__ */ import_react9.default.createElement(import_lucide_react6.MessageSquare, { className: "w-6 h-6 text-white" })
     ),
-    hasUnread && !isOpen && /* @__PURE__ */ import_react8.default.createElement("span", { className: "absolute top-0 right-0 w-4 h-4 bg-rose-500 rounded-full border-2 border-white flex items-center justify-center text-[9px] font-bold text-white" }, "1")
+    hasUnread && !isOpen && /* @__PURE__ */ import_react9.default.createElement("span", { className: "absolute top-0 right-0 w-4 h-4 bg-rose-500 rounded-full border-2 border-white flex items-center justify-center text-[9px] font-bold text-white" }, "1")
   ));
 }
 
 // src/components/DocumentUpload.tsx
-var import_react9 = __toESM(require("react"));
+var import_react10 = __toESM(require("react"));
 var import_lucide_react7 = require("lucide-react");
 function DocumentUpload({ namespace, onUploadComplete, className = "" }) {
   const { ui } = useConfig();
-  const [fileStates, setFileStates] = (0, import_react9.useState)([]);
-  const [isDragging, setIsDragging] = (0, import_react9.useState)(false);
-  const fileInputRef = (0, import_react9.useRef)(null);
+  const [fileStates, setFileStates] = (0, import_react10.useState)([]);
+  const [isDragging, setIsDragging] = (0, import_react10.useState)(false);
+  const fileInputRef = (0, import_react10.useRef)(null);
   const addFiles = (files) => {
     const newStates = files.map((file) => ({ file, status: "idle" }));
     setFileStates((prev) => [...prev, ...newStates]);
@@ -989,7 +1178,7 @@ function DocumentUpload({ namespace, onUploadComplete, className = "" }) {
   };
   const isUploading = fileStates.some((s) => s.status === "uploading");
   const hasIdle = fileStates.some((s) => s.status === "idle");
-  return /* @__PURE__ */ import_react9.default.createElement(
+  return /* @__PURE__ */ import_react10.default.createElement(
     "div",
     {
       className: `p-6 border-2 border-dashed transition-all duration-300 rounded-2xl ${isDragging ? "border-emerald-500 bg-emerald-50/50 dark:bg-emerald-500/5" : "border-slate-200 dark:border-white/10 bg-white dark:bg-white/5"} ${className}`,
@@ -997,14 +1186,14 @@ function DocumentUpload({ namespace, onUploadComplete, className = "" }) {
       onDragLeave,
       onDrop
     },
-    /* @__PURE__ */ import_react9.default.createElement("div", { className: "flex flex-col items-center justify-center text-center" }, /* @__PURE__ */ import_react9.default.createElement(
+    /* @__PURE__ */ import_react10.default.createElement("div", { className: "flex flex-col items-center justify-center text-center" }, /* @__PURE__ */ import_react10.default.createElement(
       "div",
       {
         className: "w-12 h-12 rounded-full flex items-center justify-center mb-4 shadow-sm",
         style: { background: `linear-gradient(135deg, ${ui.primaryColor}20, ${ui.accentColor}20)` }
       },
-      /* @__PURE__ */ import_react9.default.createElement(import_lucide_react7.Upload, { className: "w-6 h-6", style: { color: ui.primaryColor } })
-    ), /* @__PURE__ */ import_react9.default.createElement("h3", { className: "text-slate-900 dark:text-white font-semibold mb-1" }, "Upload Documents"), /* @__PURE__ */ import_react9.default.createElement("p", { className: "text-slate-500 dark:text-white/40 text-sm mb-6 max-w-xs" }, "Drag and drop PDF, DOCX, TXT, or JSON files to train your AI on your own data."), /* @__PURE__ */ import_react9.default.createElement(
+      /* @__PURE__ */ import_react10.default.createElement(import_lucide_react7.Upload, { className: "w-6 h-6", style: { color: ui.primaryColor } })
+    ), /* @__PURE__ */ import_react10.default.createElement("h3", { className: "text-slate-900 dark:text-white font-semibold mb-1" }, "Upload Documents"), /* @__PURE__ */ import_react10.default.createElement("p", { className: "text-slate-500 dark:text-white/40 text-sm mb-6 max-w-xs" }, "Drag and drop PDF, DOCX, TXT, or JSON files to train your AI on your own data."), /* @__PURE__ */ import_react10.default.createElement(
       "button",
       {
         onClick: () => {
@@ -1020,7 +1209,7 @@ function DocumentUpload({ namespace, onUploadComplete, className = "" }) {
         }
       },
       "Select Files"
-    ), /* @__PURE__ */ import_react9.default.createElement(
+    ), /* @__PURE__ */ import_react10.default.createElement(
       "input",
       {
         ref: fileInputRef,
@@ -1031,22 +1220,22 @@ function DocumentUpload({ namespace, onUploadComplete, className = "" }) {
         accept: ".pdf,.docx,.txt,.md,.json,.csv"
       }
     )),
-    fileStates.length > 0 && /* @__PURE__ */ import_react9.default.createElement("div", { className: "mt-8 space-y-3" }, fileStates.map((state, i) => /* @__PURE__ */ import_react9.default.createElement(
+    fileStates.length > 0 && /* @__PURE__ */ import_react10.default.createElement("div", { className: "mt-8 space-y-3" }, fileStates.map((state, i) => /* @__PURE__ */ import_react10.default.createElement(
       "div",
       {
         key: i,
         className: "flex items-center justify-between p-3 rounded-xl bg-slate-50 dark:bg-white/5 border border-slate-100 dark:border-white/10"
       },
-      /* @__PURE__ */ import_react9.default.createElement("div", { className: "flex items-center gap-3 overflow-hidden" }, /* @__PURE__ */ import_react9.default.createElement("div", { className: "w-8 h-8 rounded-lg bg-white dark:bg-white/10 flex items-center justify-center shadow-sm" }, /* @__PURE__ */ import_react9.default.createElement(import_lucide_react7.File, { className: "w-4 h-4 text-slate-400" })), /* @__PURE__ */ import_react9.default.createElement("div", { className: "truncate" }, /* @__PURE__ */ import_react9.default.createElement("p", { className: "text-xs font-medium text-slate-700 dark:text-white/80 truncate" }, state.file.name), /* @__PURE__ */ import_react9.default.createElement("p", { className: "text-[10px] text-slate-400" }, (state.file.size / 1024).toFixed(1), " KB"))),
-      /* @__PURE__ */ import_react9.default.createElement("div", { className: "flex items-center gap-2" }, state.status === "uploading" && /* @__PURE__ */ import_react9.default.createElement(import_lucide_react7.Loader2, { className: "w-4 h-4 text-slate-400 animate-spin" }), state.status === "success" && /* @__PURE__ */ import_react9.default.createElement(import_lucide_react7.CheckCircle, { className: "w-4 h-4 text-emerald-500" }), state.status === "error" && /* @__PURE__ */ import_react9.default.createElement("div", { title: state.error }, /* @__PURE__ */ import_react9.default.createElement(import_lucide_react7.AlertCircle, { className: "w-4 h-4 text-rose-500" })), state.status !== "uploading" && /* @__PURE__ */ import_react9.default.createElement(
+      /* @__PURE__ */ import_react10.default.createElement("div", { className: "flex items-center gap-3 overflow-hidden" }, /* @__PURE__ */ import_react10.default.createElement("div", { className: "w-8 h-8 rounded-lg bg-white dark:bg-white/10 flex items-center justify-center shadow-sm" }, /* @__PURE__ */ import_react10.default.createElement(import_lucide_react7.File, { className: "w-4 h-4 text-slate-400" })), /* @__PURE__ */ import_react10.default.createElement("div", { className: "truncate" }, /* @__PURE__ */ import_react10.default.createElement("p", { className: "text-xs font-medium text-slate-700 dark:text-white/80 truncate" }, state.file.name), /* @__PURE__ */ import_react10.default.createElement("p", { className: "text-[10px] text-slate-400" }, (state.file.size / 1024).toFixed(1), " KB"))),
+      /* @__PURE__ */ import_react10.default.createElement("div", { className: "flex items-center gap-2" }, state.status === "uploading" && /* @__PURE__ */ import_react10.default.createElement(import_lucide_react7.Loader2, { className: "w-4 h-4 text-slate-400 animate-spin" }), state.status === "success" && /* @__PURE__ */ import_react10.default.createElement(import_lucide_react7.CheckCircle, { className: "w-4 h-4 text-emerald-500" }), state.status === "error" && /* @__PURE__ */ import_react10.default.createElement("div", { title: state.error }, /* @__PURE__ */ import_react10.default.createElement(import_lucide_react7.AlertCircle, { className: "w-4 h-4 text-rose-500" })), state.status !== "uploading" && /* @__PURE__ */ import_react10.default.createElement(
         "button",
         {
           onClick: () => removeFile(i),
           className: "p-1 rounded-md hover:bg-slate-200 dark:hover:bg-white/10 transition-colors"
         },
-        /* @__PURE__ */ import_react9.default.createElement(import_lucide_react7.X, { className: "w-3.5 h-3.5 text-slate-400" })
+        /* @__PURE__ */ import_react10.default.createElement(import_lucide_react7.X, { className: "w-3.5 h-3.5 text-slate-400" })
       ))
-    )), hasIdle && !isUploading && /* @__PURE__ */ import_react9.default.createElement(
+    )), hasIdle && !isUploading && /* @__PURE__ */ import_react10.default.createElement(
       "button",
       {
         onClick: uploadFiles,