@retrivora-ai/rag-engine 1.1.9 → 1.2.1

package/dist/index.js

@@ -227,6 +227,24 @@ function MessageBubble({
     }
     return void 0;
   };
+  const productsFromSources = import_react4.default.useMemo(() => {
+    if (isUser || !sources) return [];
+    return sources.filter((s) => {
+      const m = s.metadata || {};
+      return m.price || m.image || m.img || m.thumbnail || m.images || m.brand || m.type === "product";
+    }).map((s) => {
+      const m = s.metadata || {};
+      return {
+        id: s.id,
+        name: m.name || m.title || s.content.split("\n")[0] || "Unknown Product",
+        brand: m.brand,
+        price: m.price,
+        image: resolveImage(m),
+        link: m.link,
+        description: s.content
+      };
+    });
+  }, [sources, isUser]);
   const { productsFromContent, cleanContent } = import_react4.default.useMemo(() => {
     if (isUser) return { productsFromContent: [], cleanContent: message.content };
     const jsonRegex = /```json\s*([\s\S]*?)\s*```/g;
@@ -250,7 +268,23 @@ function MessageBubble({
     }
     return { productsFromContent: products, cleanContent: content.trim() };
   }, [message.content, isUser]);
-  const allProducts = productsFromContent;
+  const allProducts = import_react4.default.useMemo(() => {
+    if (productsFromContent.length > 0) return productsFromContent;
+    const uniqueProducts = [];
+    const seenIds = /* @__PURE__ */ new Set();
+    const contentLower = message.content.toLowerCase();
+    for (const p of productsFromSources) {
+      const identifier = p.id || p.name;
+      if (seenIds.has(identifier)) continue;
+      const nameMatch = contentLower.includes(p.name.toLowerCase());
+      const brandMatch = p.brand ? contentLower.includes(p.brand.toLowerCase()) : false;
+      if (nameMatch || brandMatch) {
+        seenIds.add(identifier);
+        uniqueProducts.push(p);
+      }
+    }
+    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(
     "div",
@@ -597,6 +631,32 @@ function ChatWindow({
   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)(() => {
+    if (input.trim().length < 3) {
+      return;
+    }
+    const timer = setTimeout(async () => {
+      setIsSuggesting(true);
+      try {
+        const response = await fetch("/api/suggestions", {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({ query: input, namespace: projectId })
+        });
+        const data = await response.json();
+        if (data.suggestions) {
+          setSuggestions(data.suggestions);
+        }
+      } catch (err) {
+        console.error("Failed to fetch suggestions:", err);
+      } finally {
+        setIsSuggesting(false);
+      }
+    }, 800);
+    return () => clearTimeout(timer);
+  }, [input, projectId]);
   return /* @__PURE__ */ import_react7.default.createElement(
     "div",
     {
@@ -708,12 +768,32 @@ function ChatWindow({
         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]"}` }, /* @__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(
+    /* @__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(
+      "button",
+      {
+        key: suggestion,
+        onClick: () => {
+          var _a2;
+          setInput(suggestion);
+          setSuggestions([]);
+          (_a2 = inputRef.current) == null ? void 0 : _a2.focus();
+        },
+        className: "flex items-center gap-1.5 px-3 py-1.5 rounded-xl text-[11px] font-medium bg-white dark:bg-white/5 border border-slate-200 dark:border-white/10 text-slate-600 dark:text-white/60 hover:text-slate-900 dark:hover:text-white/90 hover:border-slate-300 dark:hover:border-white/20 transition-all shadow-sm cursor-pointer group"
+      },
+      /* @__PURE__ */ import_react7.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(
       "textarea",
       {
         ref: inputRef,
         value: input,
-        onChange: (e) => setInput(e.target.value),
+        onChange: (e) => {
+          const val = e.target.value;
+          setInput(val);
+          if (val.trim().length < 3) {
+            setSuggestions([]);
+          }
+        },
         onKeyDown: handleKeyDown,
         placeholder: ui.placeholder,
         rows: 1,

package/dist/index.mjs

@@ -185,6 +185,24 @@ function MessageBubble({
     }
     return void 0;
   };
+  const productsFromSources = React4.useMemo(() => {
+    if (isUser || !sources) return [];
+    return sources.filter((s) => {
+      const m = s.metadata || {};
+      return m.price || m.image || m.img || m.thumbnail || m.images || m.brand || m.type === "product";
+    }).map((s) => {
+      const m = s.metadata || {};
+      return {
+        id: s.id,
+        name: m.name || m.title || s.content.split("\n")[0] || "Unknown Product",
+        brand: m.brand,
+        price: m.price,
+        image: resolveImage(m),
+        link: m.link,
+        description: s.content
+      };
+    });
+  }, [sources, isUser]);
   const { productsFromContent, cleanContent } = React4.useMemo(() => {
     if (isUser) return { productsFromContent: [], cleanContent: message.content };
     const jsonRegex = /```json\s*([\s\S]*?)\s*```/g;
@@ -208,7 +226,23 @@ function MessageBubble({
     }
     return { productsFromContent: products, cleanContent: content.trim() };
   }, [message.content, isUser]);
-  const allProducts = productsFromContent;
+  const allProducts = React4.useMemo(() => {
+    if (productsFromContent.length > 0) return productsFromContent;
+    const uniqueProducts = [];
+    const seenIds = /* @__PURE__ */ new Set();
+    const contentLower = message.content.toLowerCase();
+    for (const p of productsFromSources) {
+      const identifier = p.id || p.name;
+      if (seenIds.has(identifier)) continue;
+      const nameMatch = contentLower.includes(p.name.toLowerCase());
+      const brandMatch = p.brand ? contentLower.includes(p.brand.toLowerCase()) : false;
+      if (nameMatch || brandMatch) {
+        seenIds.add(identifier);
+        uniqueProducts.push(p);
+      }
+    }
+    return uniqueProducts;
+  }, [productsFromSources, productsFromContent, message.content]);
   const hasProducts = allProducts.length > 0;
   return /* @__PURE__ */ React4.createElement("div", { className: `flex gap-3 ${isUser ? "flex-row-reverse" : "flex-row"} items-start` }, /* @__PURE__ */ React4.createElement(
     "div",
@@ -539,6 +573,32 @@ function ChatWindow({
   const isEmpty = messages.length === 0;
   const currentRadius = BORDER_RADIUS_MAP[ui.borderRadius || "xl"];
   const isGlass = ui.visualStyle !== "solid";
+  const [suggestions, setSuggestions] = useState4([]);
+  const [isSuggesting, setIsSuggesting] = useState4(false);
+  useEffect4(() => {
+    if (input.trim().length < 3) {
+      return;
+    }
+    const timer = setTimeout(async () => {
+      setIsSuggesting(true);
+      try {
+        const response = await fetch("/api/suggestions", {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({ query: input, namespace: projectId })
+        });
+        const data = await response.json();
+        if (data.suggestions) {
+          setSuggestions(data.suggestions);
+        }
+      } catch (err) {
+        console.error("Failed to fetch suggestions:", err);
+      } finally {
+        setIsSuggesting(false);
+      }
+    }, 800);
+    return () => clearTimeout(timer);
+  }, [input, projectId]);
   return /* @__PURE__ */ React7.createElement(
     "div",
     {
@@ -650,12 +710,32 @@ function ChatWindow({
         onAddToCart
       }
     ), error && /* @__PURE__ */ React7.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__ */ React7.createElement(TriangleAlert, { className: "w-4 h-4 flex-shrink-0" }), /* @__PURE__ */ React7.createElement("span", null, error)), /* @__PURE__ */ React7.createElement("div", { ref: bottomRef })),
-    /* @__PURE__ */ React7.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]"}` }, /* @__PURE__ */ React7.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__ */ React7.createElement(
+    /* @__PURE__ */ React7.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__ */ React7.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__ */ React7.createElement(
+      "button",
+      {
+        key: suggestion,
+        onClick: () => {
+          var _a2;
+          setInput(suggestion);
+          setSuggestions([]);
+          (_a2 = inputRef.current) == null ? void 0 : _a2.focus();
+        },
+        className: "flex items-center gap-1.5 px-3 py-1.5 rounded-xl text-[11px] font-medium bg-white dark:bg-white/5 border border-slate-200 dark:border-white/10 text-slate-600 dark:text-white/60 hover:text-slate-900 dark:hover:text-white/90 hover:border-slate-300 dark:hover:border-white/20 transition-all shadow-sm cursor-pointer group"
+      },
+      /* @__PURE__ */ React7.createElement(Sparkles, { className: "w-3 h-3 text-amber-400" }),
+      suggestion
+    )), isSuggesting && suggestions.length === 0 && /* @__PURE__ */ React7.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__ */ React7.createElement(Sparkles, { className: "w-3 h-3" }), "Thinking...")), /* @__PURE__ */ React7.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__ */ React7.createElement(
       "textarea",
       {
         ref: inputRef,
         value: input,
-        onChange: (e) => setInput(e.target.value),
+        onChange: (e) => {
+          const val = e.target.value;
+          setInput(val);
+          if (val.trim().length < 3) {
+            setSuggestions([]);
+          }
+        },
         onKeyDown: handleKeyDown,
         placeholder: ui.placeholder,
         rows: 1,

package/dist/server.d.mts

@@ -1,7 +1,7 @@
-import { i as VectorDBConfig, L as LLMConfig, c as EmbeddingConfig, g as RagConfig, e as IngestDocument, C as ChatMessage, b as ChatResponse, k as RetrievalResult, h as UpsertDocument, V as VectorMatch, G as GraphDBConfig, l as GraphNode, m as Edge, n as GraphSearchResult, I as ILLMProvider, j as VectorDBProvider, f as LLMProvider, d as EmbeddingProvider, R as RAGConfig, U as UIConfig, a as ChatOptions, E as EmbedOptions } from './RagConfig-FyMB_UG6.mjs';
+import { i as VectorDBConfig, L as LLMConfig, c as EmbeddingConfig, g as RagConfig, e as IngestDocument, C as ChatMessage, b as ChatResponse, k as RetrievalResult, h as UpsertDocument, V as VectorMatch, G as GraphDBConfig, l as GraphNode, m as Edge, n as GraphSearchResult, I as ILLMProvider, j as VectorDBProvider, f as LLMProvider, d as EmbeddingProvider, R as RAGConfig, U as UIConfig, a as ChatOptions, E as EmbedOptions } from './RagConfig-BOLOz0_O.mjs';
 export { C as Chunk, a as ChunkOptions, D as DocumentChunker } from './DocumentChunker-Dh9TvmGG.mjs';
-import { H as HealthCheckResult, I as IProviderValidator, a as IProviderHealthChecker } from './index-D-lfcqlL.mjs';
-export { C as ConfigValidator, V as ValidationError, b as VectorPlugin, c as createChatHandler, d as createHealthHandler, e as createIngestHandler, f as createStreamHandler, g as createUploadHandler, s as sseErrorFrame, h as sseFrame, i as sseMetaFrame, j as sseTextFrame } from './index-D-lfcqlL.mjs';
+import { H as HealthCheckResult, I as IProviderValidator, a as IProviderHealthChecker } from './index-64BDupW3.mjs';
+export { C as ConfigValidator, V as ValidationError, b as VectorPlugin, c as createChatHandler, d as createHealthHandler, e as createIngestHandler, f as createStreamHandler, g as createUploadHandler, s as sseErrorFrame, h as sseFrame, i as sseMetaFrame, j as sseTextFrame } from './index-64BDupW3.mjs';
 import 'next/server';
 
 /**
@@ -166,6 +166,10 @@ declare class Pipeline {
      * Rewrite the user query for better retrieval performance.
      */
     private rewriteQuery;
+    /**
+     * Generate 3-5 short, relevant questions based on the vector database content.
+     */
+    getSuggestions(query: string, namespace?: string): Promise<string[]>;
 }
 
 /**

package/dist/server.d.ts

@@ -1,7 +1,7 @@
-import { i as VectorDBConfig, L as LLMConfig, c as EmbeddingConfig, g as RagConfig, e as IngestDocument, C as ChatMessage, b as ChatResponse, k as RetrievalResult, h as UpsertDocument, V as VectorMatch, G as GraphDBConfig, l as GraphNode, m as Edge, n as GraphSearchResult, I as ILLMProvider, j as VectorDBProvider, f as LLMProvider, d as EmbeddingProvider, R as RAGConfig, U as UIConfig, a as ChatOptions, E as EmbedOptions } from './RagConfig-FyMB_UG6.js';
+import { i as VectorDBConfig, L as LLMConfig, c as EmbeddingConfig, g as RagConfig, e as IngestDocument, C as ChatMessage, b as ChatResponse, k as RetrievalResult, h as UpsertDocument, V as VectorMatch, G as GraphDBConfig, l as GraphNode, m as Edge, n as GraphSearchResult, I as ILLMProvider, j as VectorDBProvider, f as LLMProvider, d as EmbeddingProvider, R as RAGConfig, U as UIConfig, a as ChatOptions, E as EmbedOptions } from './RagConfig-BOLOz0_O.js';
 export { C as Chunk, a as ChunkOptions, D as DocumentChunker } from './DocumentChunker-Dh9TvmGG.js';
-import { H as HealthCheckResult, I as IProviderValidator, a as IProviderHealthChecker } from './index-CYgr00ot.js';
-export { C as ConfigValidator, V as ValidationError, b as VectorPlugin, c as createChatHandler, d as createHealthHandler, e as createIngestHandler, f as createStreamHandler, g as createUploadHandler, s as sseErrorFrame, h as sseFrame, i as sseMetaFrame, j as sseTextFrame } from './index-CYgr00ot.js';
+import { H as HealthCheckResult, I as IProviderValidator, a as IProviderHealthChecker } from './index-DbtE8wLM.js';
+export { C as ConfigValidator, V as ValidationError, b as VectorPlugin, c as createChatHandler, d as createHealthHandler, e as createIngestHandler, f as createStreamHandler, g as createUploadHandler, s as sseErrorFrame, h as sseFrame, i as sseMetaFrame, j as sseTextFrame } from './index-DbtE8wLM.js';
 import 'next/server';
 
 /**
@@ -166,6 +166,10 @@ declare class Pipeline {
      * Rewrite the user query for better retrieval performance.
      */
     private rewriteQuery;
+    /**
+     * Generate 3-5 short, relevant questions based on the vector database content.
+     */
+    getSuggestions(query: string, namespace?: string): Promise<string[]>;
 }
 
 /**

package/dist/server.js

@@ -4177,6 +4177,50 @@ Optimized Search Query:`;
     );
     return rewrite.trim() || question;
   }
+  /**
+   * Generate 3-5 short, relevant questions based on the vector database content.
+   */
+  async getSuggestions(query, namespace) {
+    if (!query || query.trim().length < 3) {
+      return [];
+    }
+    await this.initialize();
+    const ns = namespace != null ? namespace : this.config.projectId;
+    try {
+      const { sources } = await this.retrieve(query, { namespace: ns, topK: 3 });
+      if (sources.length === 0) {
+        return [];
+      }
+      const context = sources.map((s) => s.content).join("\n\n---\n\n");
+      const prompt = `
+Based on the following snippets from a document, what are 3 short, relevant questions a user might ask? 
+Focus on questions that can be answered by the context.
+Keep each question under 10 words and make them very specific to the content.
+Return ONLY a JSON array of strings like ["Question 1", "Question 2", "Question 3"].
+
+Context:
+${context}
+
+Suggestions:`;
+      const response = await this.llmProvider.chat(
+        [
+          { role: "system", content: "You are a helpful assistant that generates search suggestions." },
+          { role: "user", content: prompt }
+        ],
+        ""
+      );
+      const match = response.match(/\[[\s\S]*\]/);
+      if (match) {
+        const suggestions = JSON.parse(match[0]);
+        if (Array.isArray(suggestions)) {
+          return suggestions.map((s) => String(s)).slice(0, 3);
+        }
+      }
+    } catch (error) {
+      console.error("[Pipeline] Failed to generate suggestions:", error);
+    }
+    return [];
+  }
 };
 
 // src/core/ProviderHealthCheck.ts
@@ -4331,6 +4375,13 @@ var VectorPlugin = class {
     await this.validationPromise;
     return this.pipeline.ingest(documents, namespace);
   }
+  /**
+   * Get auto-suggestions based on a query prefix.
+   */
+  async getSuggestions(query, namespace) {
+    await this.validationPromise;
+    return this.pipeline.getSuggestions(query, namespace);
+  }
 };
 
 // src/config/ConfigBuilder.ts

package/dist/server.mjs

@@ -39,7 +39,7 @@ import {
   sseFrame,
   sseMetaFrame,
   sseTextFrame
-} from "./chunk-OCDCJUNE.mjs";
+} from "./chunk-GCPPRD2G.mjs";
 import "./chunk-YLTMFW4M.mjs";
 import {
   PineconeProvider

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@retrivora-ai/rag-engine",
-  "version": "1.1.9",
+  "version": "1.2.1",
   "description": "Retrivora AI is a plug-and-play AI engine for RAG chat experiences — generic vector DB + LLM provider, embeddable or standalone.",
   "author": "Abhinav Alkuchi",
   "license": "MIT",

package/src/app/api/suggestions/route.ts

@@ -0,0 +1,4 @@
+import { createSuggestionsHandler } from '@/handlers';
+import { getRagConfig } from '@/config/serverConfig';
+
+export const POST = createSuggestionsHandler(getRagConfig());

package/src/components/ChatWidget.tsx

@@ -4,12 +4,13 @@ import React, { useState } from 'react';
 import { MessageSquare, X } from 'lucide-react';
 import { ChatWindow } from './ChatWindow';
 import { useConfig } from './ConfigProvider';
+import { Product } from '../types';
 
 interface ChatWidgetProps {
   /** Position of the floating button. Defaults to bottom-right. */
   position?: 'bottom-right' | 'bottom-left';
   /** Called when the user clicks 'Add to Cart' on a product */
-  onAddToCart?: (product: any) => void;
+  onAddToCart?: (product: Product) => void;
 }
 
 const DEFAULT_DIMENSIONS = { width: 380, height: 600 };

package/src/components/ChatWindow.tsx

@@ -16,6 +16,7 @@ import { MessageBubble } from './MessageBubble';
 import { useConfig } from './ConfigProvider';
 import { useRagChat } from '../hooks/useRagChat';
 import { BORDER_RADIUS_MAP, CHAT_SUGGESTIONS } from '../config/uiConstants';
+import { Product } from '../types';
 
 interface ChatWindowProps {
   /** Additional className for the wrapper div */
@@ -37,7 +38,7 @@ interface ChatWindowProps {
   /** Whether the window is currently maximized */
   isMaximized?: boolean;
   /** Called when the user clicks 'Add to Cart' on a product */
-  onAddToCart?: (product: any) => void;
+  onAddToCart?: (product: Product) => void;
 }
 
 export function ChatWindow({ 
@@ -97,6 +98,37 @@ export function ChatWindow({
     const currentRadius = BORDER_RADIUS_MAP[ui.borderRadius || 'xl'];
   const isGlass = ui.visualStyle !== 'solid';
 
+  const [suggestions, setSuggestions] = useState<string[]>([]);
+  const [isSuggesting, setIsSuggesting] = useState(false);
+
+  // Auto-suggestions fetcher (debounced)
+  useEffect(() => {
+    if (input.trim().length < 3) {
+      return;
+    }
+
+    const timer = setTimeout(async () => {
+      setIsSuggesting(true);
+      try {
+        const response = await fetch('/api/suggestions', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ query: input, namespace: projectId }),
+        });
+        const data = await response.json();
+        if (data.suggestions) {
+          setSuggestions(data.suggestions);
+        }
+      } catch (err) {
+        console.error('Failed to fetch suggestions:', err);
+      } finally {
+        setIsSuggesting(false);
+      }
+    }, 800); // 800ms debounce to save costs/latency
+
+    return () => clearTimeout(timer);
+  }, [input, projectId]);
+
   return (
     <div
       className={`relative flex flex-col border border-slate-200 dark:border-white/10 shadow-2xl transition-all duration-300 ${currentRadius} ${
@@ -265,11 +297,44 @@ export function ChatWindow({
 
       {/* ── Input ── */}
       <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]'}`}>
+        
+        {/* Dynamic Suggestions */}
+        {(suggestions.length > 0 || isSuggesting) && !isLoading && (
+          <div className="mb-3 flex flex-wrap gap-2 animate-in fade-in slide-in-from-bottom-2 duration-300">
+            {suggestions.map((suggestion) => (
+              <button
+                key={suggestion}
+                onClick={() => {
+                  setInput(suggestion);
+                  setSuggestions([]);
+                  inputRef.current?.focus();
+                }}
+                className="flex items-center gap-1.5 px-3 py-1.5 rounded-xl text-[11px] font-medium bg-white dark:bg-white/5 border border-slate-200 dark:border-white/10 text-slate-600 dark:text-white/60 hover:text-slate-900 dark:hover:text-white/90 hover:border-slate-300 dark:hover:border-white/20 transition-all shadow-sm cursor-pointer group"
+              >
+                <Sparkles className="w-3 h-3 text-amber-400" />
+                {suggestion}
+              </button>
+            ))}
+            {isSuggesting && suggestions.length === 0 && (
+              <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">
+                <Sparkles className="w-3 h-3" />
+                Thinking...
+              </div>
+            )}
+          </div>
+        )}
+
         <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'}`}>
           <textarea
             ref={inputRef}
             value={input}
-            onChange={(e) => setInput(e.target.value)}
+            onChange={(e) => {
+              const val = e.target.value;
+              setInput(val);
+              if (val.trim().length < 3) {
+                setSuggestions([]);
+              }
+            }}
             onKeyDown={handleKeyDown}
             placeholder={ui.placeholder}
             rows={1}

package/src/components/MessageBubble.tsx

@@ -8,7 +8,7 @@ import { ChatMessage } from '../llm/ILLMProvider';
 import { VectorMatch } from '../types';
 import { SourceCard } from './SourceCard';
 import { ProductCarousel } from './ProductCarousel';
-import { Product } from './ProductCard';
+import { Product } from '../types';
 
 interface MessageBubbleProps {
   message: ChatMessage;
@@ -33,26 +33,48 @@ export function MessageBubble({
   // Helper to extract image from metadata or object
   const resolveImage = (data: Record<string, unknown>): string | undefined => {
     if (!data) return undefined;
-    
+
     // Check single string fields
     const singleFields = ['image', 'img', 'thumbnail'];
     for (const field of singleFields) {
       const val = data[field];
       if (typeof val === 'string' && val) return val;
     }
-    
+
     // Check images array
     if (Array.isArray(data.images) && data.images.length > 0) {
       if (typeof data.images[0] === 'string') return data.images[0];
     }
-    
+
     return undefined;
   };
 
+  // Extract products from sources
+  const productsFromSources = React.useMemo(() => {
+    if (isUser || !sources) return [];
+    return sources
+      .filter(s => {
+        const m = s.metadata || {};
+        return m.price || m.image || m.img || m.thumbnail || m.images || m.brand || m.type === 'product';
+      })
+      .map(s => {
+        const m = (s.metadata || {}) as Record<string, unknown>;
+        return {
+          id: s.id,
+          name: (m.name || m.title || s.content.split('\n')[0] || 'Unknown Product') as string,
+          brand: m.brand as string,
+          price: m.price as string | number,
+          image: resolveImage(m),
+          link: m.link as string,
+          description: s.content
+        };
+      });
+  }, [sources, isUser]);
+
   // Extract products from content (structured JSON)
   const { productsFromContent, cleanContent } = React.useMemo(() => {
     if (isUser) return { productsFromContent: [], cleanContent: message.content };
-    
+
     const jsonRegex = /```json\s*([\s\S]*?)\s*```/g;
     const products: Product[] = [];
     let content = message.content;
@@ -80,19 +102,41 @@ export function MessageBubble({
     return { productsFromContent: products, cleanContent: content.trim() };
   }, [message.content, isUser]);
 
-  const allProducts = productsFromContent;
+  const allProducts = React.useMemo(() => {
+    // If the LLM explicitly provided products in a structured format, only show those.
+    if (productsFromContent.length > 0) return productsFromContent;
+
+    // Fallback: Show unique products from sources, but ONLY if they are mentioned in the message text.
+    // This aligns the carousel with what the assistant is actually "displaying" in its response.
+    const uniqueProducts: Product[] = [];
+    const seenIds = new Set();
+    const contentLower = message.content.toLowerCase();
 
+    for (const p of productsFromSources) {
+      const identifier = p.id || p.name;
+      if (seenIds.has(identifier)) continue;
+
+      // Check if the product name or brand is mentioned in the assistant's text
+      const nameMatch = contentLower.includes(p.name.toLowerCase());
+      const brandMatch = p.brand ? contentLower.includes(p.brand.toLowerCase()) : false;
+
+      if (nameMatch || brandMatch) {
+        seenIds.add(identifier);
+        uniqueProducts.push(p);
+      }
+    }
+
+    return uniqueProducts;
+  }, [productsFromSources, productsFromContent, message.content]);
 
-  // Only surface product cards if the LLM explicitly provided them via structured JSON
   const hasProducts = allProducts.length > 0;
 
   return (
     <div className={`flex gap-3 ${isUser ? 'flex-row-reverse' : 'flex-row'} items-start`}>
       {/* Avatar */}
       <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'
-        }`}
+        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
@@ -104,11 +148,10 @@ export function MessageBubble({
       <div className={`flex flex-col gap-1 max-w-[90%] ${isUser ? 'items-end' : 'items-start'}`}>
         {/* Bubble */}
         <div
-          className={`relative px-4 py-3 rounded-2xl text-sm leading-relaxed shadow-sm dark:shadow-lg ${
-            isUser
+          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})` }
@@ -126,7 +169,7 @@ export function MessageBubble({
               <ReactMarkdown remarkPlugins={[remarkGfm]}>
                 {cleanContent || message.content}
               </ReactMarkdown>
-              
+
               {isStreaming && message.content && (
                 <span className="inline-block w-1.5 h-3.5 ml-1 bg-emerald-500 animate-pulse align-middle" />
               )}
@@ -137,9 +180,9 @@ export function MessageBubble({
         {/* Product Carousel (Outside the bubble) */}
         {!isUser && hasProducts && (
           <div className="w-full mt-1">
-            <ProductCarousel 
-              products={allProducts} 
-              primaryColor={primaryColor} 
+            <ProductCarousel
+              products={allProducts}
+              primaryColor={primaryColor}
               onAddToCart={onAddToCart}
             />
           </div>

package/src/components/ProductCard.tsx

@@ -4,15 +4,7 @@ import React from 'react';
 import Image from 'next/image';
 import { ShoppingCart, ExternalLink } from 'lucide-react';
 
-export interface Product {
-  id: string | number;
-  name: string;
-  brand?: string;
-  price?: string | number;
-  image?: string;
-  link?: string;
-  description?: string;
-}
+import { Product } from '../types';
 
 interface ProductCardProps {
   product: Product;

package/src/components/ProductCarousel.tsx

@@ -2,7 +2,8 @@
 
 import React, { useRef, useState, useEffect } from 'react';
 import { ChevronLeft, ChevronRight } from 'lucide-react';
-import { Product, ProductCard } from './ProductCard';
+import { ProductCard } from './ProductCard';
+import { Product } from '../types';
 
 interface ProductCarouselProps {
   products: Product[];