@retrivora-ai/rag-engine 1.1.9 → 1.2.0

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",

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",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@retrivora-ai/rag-engine",
-  "version": "1.1.9",
+  "version": "1.2.0",
   "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/components/MessageBubble.tsx

@@ -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>