@retrivora-ai/rag-engine 1.1.4 → 1.1.6

package/src/components/MessageBubble.tsx

@@ -7,6 +7,8 @@ import remarkGfm from 'remark-gfm';
 import { ChatMessage } from '../llm/ILLMProvider';
 import { VectorMatch } from '../types';
 import { SourceCard } from './SourceCard';
+import { ProductCarousel } from './ProductCarousel';
+import { Product } from './ProductCard';
 
 interface MessageBubbleProps {
   message: ChatMessage;
@@ -26,6 +28,81 @@ export function MessageBubble({
   const isUser = message.role === 'user';
   const [showSources, setShowSources] = React.useState(false);
 
+  // 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;
+
+    // Only process if it looks like it might contain product data
+    if (content.includes('"type": "products"') || content.includes('"type":"products"')) {
+      const matches = Array.from(content.matchAll(jsonRegex));
+      for (const m of matches) {
+        try {
+          const data = JSON.parse(m[1]);
+          if (data.type === 'products' && Array.isArray(data.items)) {
+            const formattedItems = data.items.map((item: Record<string, unknown>) => ({
+              ...item,
+              image: (item.image as string) || resolveImage(item)
+            })) as Product[];
+            products.push(...formattedItems);
+            content = content.replace(m[0], '');
+          }
+        } catch {
+          // Skip invalid JSON
+        }
+      }
+    }
+
+    return { productsFromContent: products, cleanContent: content.trim() };
+  }, [message.content, isUser]);
+
+  const allProducts = [...productsFromSources, ...productsFromContent];
+  const hasProducts = allProducts.length > 0;
+
   return (
     <div className={`flex gap-3 ${isUser ? 'flex-row-reverse' : 'flex-row'} items-start`}>
       {/* Avatar */}
@@ -41,7 +118,7 @@ export function MessageBubble({
         }
       </div>
 
-      <div className={`flex flex-col gap-1 max-w-[75%] ${isUser ? 'items-end' : 'items-start'}`}>
+      <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 ${
@@ -64,8 +141,9 @@ export function MessageBubble({
           ) : (
             <div className={`prose prose-sm max-w-none ${isUser ? 'prose-invert' : 'dark:prose-invert'}`}>
               <ReactMarkdown remarkPlugins={[remarkGfm]}>
-                {message.content}
+                {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" />
               )}
@@ -73,6 +151,13 @@ export function MessageBubble({
           )}
         </div>
 
+        {/* Product Carousel (Outside the bubble) */}
+        {!isUser && hasProducts && (
+          <div className="w-full mt-1">
+            <ProductCarousel products={allProducts} primaryColor={primaryColor} />
+          </div>
+        )}
+
         {/* Sources toggle */}
         {!isUser && sources && sources.length > 0 && (
           <div className="w-full">

package/src/components/ProductCard.tsx

@@ -0,0 +1,90 @@
+'use client';
+
+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;
+}
+
+interface ProductCardProps {
+  product: Product;
+  primaryColor?: string;
+}
+
+export function ProductCard({ product, primaryColor = '#6366f1' }: ProductCardProps) {
+  return (
+    <div className="flex-shrink-0 w-full bg-white dark:bg-white/5 border border-slate-200 dark:border-white/10 rounded-xl overflow-hidden shadow-sm hover:shadow-md transition-all duration-300 group">
+      {/* Product Image */}
+      <div className="relative h-40 w-full bg-slate-100 dark:bg-white/5 flex items-center justify-center overflow-hidden">
+        {product.image ? (
+          <Image
+            src={product.image}
+            alt={product.name}
+            fill
+            unoptimized
+            className="object-cover group-hover:scale-105 transition-transform duration-500"
+          />
+        ) : (
+          <div className="text-slate-400 dark:text-white/20">
+            <ShoppingCart className="w-12 h-12" />
+          </div>
+        )}
+        
+        {/* Brand Badge */}
+        {product.brand && (
+          <div className="absolute top-2 left-2 px-2 py-1 bg-white/90 dark:bg-black/60 backdrop-blur-md rounded-md text-[10px] font-bold uppercase tracking-wider text-slate-700 dark:text-white/90 shadow-sm">
+            {product.brand}
+          </div>
+        )}
+      </div>
+
+      {/* Product Info */}
+      <div className="p-4 flex flex-col gap-2">
+        <div className="flex justify-between items-start gap-2">
+          <h3 className="text-sm font-semibold text-slate-800 dark:text-white/90 line-clamp-1">
+            {product.name}
+          </h3>
+          {product.price && (
+            <span className="text-sm font-bold" style={{ color: primaryColor }}>
+              {typeof product.price === 'number' ? `$${product.price}` : product.price}
+            </span>
+          )}
+        </div>
+        
+        {product.description && (
+          <p className="text-[11px] text-slate-500 dark:text-white/50 line-clamp-2 leading-relaxed">
+            {product.description}
+          </p>
+        )}
+
+        <div className="mt-2 flex gap-2">
+          <button
+            className="flex-1 py-2 px-3 rounded-lg text-[11px] font-medium text-white shadow-sm hover:opacity-90 transition-opacity flex items-center justify-center gap-1.5"
+            style={{ background: primaryColor }}
+          >
+            <ShoppingCart className="w-3 h-3" />
+            Add to Cart
+          </button>
+          {product.link && (
+            <a
+              href={product.link}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="p-2 rounded-lg bg-slate-100 dark:bg-white/10 text-slate-600 dark:text-white/70 hover:bg-slate-200 dark:hover:bg-white/20 transition-colors"
+            >
+              <ExternalLink className="w-3.5 h-3.5" />
+            </a>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/components/ProductCarousel.tsx

@@ -0,0 +1,69 @@
+'use client';
+
+import React, { useRef } from 'react';
+import { ChevronLeft, ChevronRight } from 'lucide-react';
+import { Product, ProductCard } from './ProductCard';
+
+interface ProductCarouselProps {
+  products: Product[];
+  primaryColor?: string;
+}
+
+export function ProductCarousel({ products, primaryColor = '#6366f1' }: ProductCarouselProps) {
+  const scrollRef = useRef<HTMLDivElement>(null);
+
+  const scroll = (direction: 'left' | 'right') => {
+    if (scrollRef.current) {
+      const firstCard = scrollRef.current.firstElementChild as HTMLElement;
+      if (firstCard) {
+        // Use actual rendered width + gap
+        const cardWidth = firstCard.offsetWidth + 16; 
+        const scrollAmount = direction === 'left' ? -cardWidth : cardWidth;
+        scrollRef.current.scrollBy({ left: scrollAmount, behavior: 'smooth' });
+      }
+    }
+  };
+
+  if (!products || products.length === 0) return null;
+
+  return (
+    <div className="relative w-full my-4 group/carousel">
+      {/* Scroll Buttons */}
+      <div className="absolute -left-4 top-1/2 -translate-y-1/2 z-20 opacity-100 md:opacity-0 md:group-hover/carousel:opacity-100 transition-opacity">
+        <button
+          onClick={(e) => { e.stopPropagation(); scroll('left'); }}
+          className="p-2 rounded-full bg-white dark:bg-slate-800 shadow-xl border border-slate-200 dark:border-white/10 text-slate-600 dark:text-white/80 hover:text-indigo-500 dark:hover:text-indigo-400 transition-all hover:scale-110 active:scale-95"
+          aria-label="Scroll left"
+        >
+          <ChevronLeft className="w-5 h-5" />
+        </button>
+      </div>
+
+      <div className="absolute -right-4 top-1/2 -translate-y-1/2 z-20 opacity-100 md:opacity-0 md:group-hover/carousel:opacity-100 transition-opacity">
+        <button
+          onClick={(e) => { e.stopPropagation(); scroll('right'); }}
+          className="p-2 rounded-full bg-white dark:bg-slate-800 shadow-xl border border-slate-200 dark:border-white/10 text-slate-600 dark:text-white/80 hover:text-indigo-500 dark:hover:text-indigo-400 transition-all hover:scale-110 active:scale-95"
+          aria-label="Scroll right"
+        >
+          <ChevronRight className="w-5 h-5" />
+        </button>
+      </div>
+
+      {/* Carousel Container */}
+      <div
+        ref={scrollRef}
+        className="flex gap-4 overflow-x-auto pb-4 px-1 scrollbar-hide snap-x snap-mandatory"
+        style={{ scrollbarWidth: 'none', msOverflowStyle: 'none' }}
+      >
+        {products.map((product) => (
+          <div 
+            key={product.id} 
+            className="snap-start flex-shrink-0 w-[85%] sm:w-[48%] md:w-[31%] min-w-[200px] max-w-[300px]"
+          >
+            <ProductCard product={product} primaryColor={primaryColor} />
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}