@retrivora-ai/rag-engine 1.7.1 → 1.7.3

package/src/components/MessageBubble.tsx

@@ -32,8 +32,8 @@ function sanitizeJson(raw: string): string {
     },
   );
 
-  // 2. Strip JS-style single-line comments, but avoid URL protocols like https://
-  s = s.replace(/(^|[^\:])\/\/[^\n]*/g, '$1');
+  // 2. Strip JS-style single-line comments
+  s = s.replace(/\/\/[^\n]*/g, '');
 
   // 3. Quote bare (unquoted) object keys
   s = s.replace(/([{,]\s*)([A-Za-z_$][A-Za-z0-9_$]*)\s*:/g, '$1"$2":');
@@ -103,7 +103,7 @@ function extractLikelyJsonBlock(raw: string): string {
 }
 
 function looksLikeStructuredPayload(raw: string): boolean {
-  return /"?(view|chartType|type|data|items|rows|products|results|columns|xAxisKey)"?\s*:/.test(raw);
+  return /"?(view|chartType|type|data|items|rows|products|results)"?\s*:/.test(raw);
 }
 
 function stripMarkdownTables(raw: string): string {
@@ -204,23 +204,12 @@ function isLikelyUiOnlyMessage(text: string): boolean {
 // ─── Tiny helpers ─────────────────────────────────────────────────────────────
 
 function resolveImage(data: Record<string, unknown>): string | undefined {
-  const candidates = ['image', 'img', 'thumbnail', 'url', 'picture', 'link'];
-  for (const key of candidates) {
+  for (const key of ['image', 'img', 'thumbnail']) {
     const v = data[key];
-    if (typeof v === 'string' && v.startsWith('http')) return v;
-    if (v && typeof v === 'object' && !Array.isArray(v)) {
-      const subVal = (v as Record<string, unknown>).url || (v as Record<string, unknown>).link || (v as Record<string, unknown>).src;
-      if (typeof subVal === 'string' && subVal.startsWith('http')) return subVal;
-    }
+    if (typeof v === 'string' && v) return v;
   }
-  if (Array.isArray(data.images)) {
-    for (const item of data.images) {
-      if (typeof item === 'string' && item.startsWith('http')) return item;
-      if (item && typeof item === 'object') {
-        const url = item.url || item.link || item.src;
-        if (typeof url === 'string' && url.startsWith('http')) return url;
-      }
-    }
+  if (Array.isArray(data.images) && typeof data.images[0] === 'string') {
+    return data.images[0];
   }
   return undefined;
 }
@@ -436,21 +425,16 @@ function resolveStructuredRows(config: Partial<RawUIConfig> & Record<string, unk
   return [];
 }
 
-function UIDispatcher({ rawContent, primaryColor, accentColor, isStreaming, viewportSize = 'large' }: {
+function UIDispatcher({ rawContent, primaryColor, accentColor, isStreaming, onAddToCart, viewportSize = 'large' }: {
   rawContent: string;
   primaryColor?: string;
   accentColor?: string;
   isStreaming?: boolean;
+  onAddToCart?: (product: Product) => void;
   viewportSize?: ChatViewportSize;
 }) {
-  const result = React.useMemo<{ config: UIConfig } | { error: string } | { loading: true; silent?: boolean }>(() => {
-    if (isStreaming) {
-      const looksLikeCarousel = rawContent.includes('"view": "carousel"') || 
-                                rawContent.includes('"view":"carousel"') ||
-                                rawContent.includes('"type": "products"') ||
-                                rawContent.includes('"type":"products"');
-      return { loading: true, silent: looksLikeCarousel };
-    }
+  const result = React.useMemo<{ config: UIConfig } | { error: string } | { loading: true }>(() => {
+    if (isStreaming) return { loading: true };
     try {
       const clean = rawContent
         .replace(/^```[a-z]*\s*/i, '')
@@ -461,18 +445,18 @@ function UIDispatcher({ rawContent, primaryColor, accentColor, isStreaming, view
       const resolvedRows = resolveStructuredRows(config);
 
       // ─── Intent Healing & Auto-Detection ───────────────────────────────────
-      
-      const hasProductLikeData = resolvedRows.length > 0 && 
-        typeof resolvedRows[0] === 'object' && resolvedRows[0] !== null && 
+
+      const hasProductLikeData = resolvedRows.length > 0 &&
+        typeof resolvedRows[0] === 'object' && resolvedRows[0] !== null &&
         !Array.isArray(resolvedRows[0]) &&
-        (['price', 'brand', 'image', 'link', 'thumbnail'].some(key => key in resolvedRows[0]) || 
-         Object.keys(resolvedRows[0]).length >= 4);
+        (['price', 'brand', 'image', 'link', 'thumbnail'].some(key => key in resolvedRows[0]) ||
+          Object.keys(resolvedRows[0]).length >= 4);
 
-      const hasAggregationLikeData = resolvedRows.length > 0 && 
-        typeof resolvedRows[0] === 'object' && resolvedRows[0] !== null && 
+      const hasAggregationLikeData = resolvedRows.length > 0 &&
+        typeof resolvedRows[0] === 'object' && resolvedRows[0] !== null &&
         !Array.isArray(resolvedRows[0]) &&
-        (['value', 'count', 'total', 'percentage'].some(key => key in resolvedRows[0]) || 
-         (Object.keys(resolvedRows[0]).length <= 3 && Object.values(resolvedRows[0]).some(v => typeof v === 'number')));
+        (['value', 'count', 'total', 'percentage'].some(key => key in resolvedRows[0]) ||
+          (Object.keys(resolvedRows[0]).length <= 3 && Object.values(resolvedRows[0]).some(v => typeof v === 'number')));
 
       // 1. Healing: Override explicit view if it contradicts the data shape
       if (config.view === 'chart' && hasProductLikeData && !hasAggregationLikeData) {
@@ -492,8 +476,8 @@ function UIDispatcher({ rawContent, primaryColor, accentColor, isStreaming, view
           (typeof config.chartType === 'string' && ['pie', 'bar', 'line'].includes(config.chartType))
         ) {
           config.view = 'chart';
-          config.chartType = (config.chartType as 'pie' | 'bar' | 'line') || 
-                             (config.type as 'pie' | 'bar' | 'line') || 'bar';
+          config.chartType = (config.chartType as 'pie' | 'bar' | 'line') ||
+            (config.type as 'pie' | 'bar' | 'line') || 'bar';
         } else {
           config.view = 'table';
         }
@@ -511,7 +495,6 @@ function UIDispatcher({ rawContent, primaryColor, accentColor, isStreaming, view
   }, [rawContent, isStreaming]);
 
   if ('loading' in result) {
-    if (result.silent) return null;
     return (
       <div className="my-4 p-8 bg-slate-50 dark:bg-white/5 rounded-xl border border-dashed border-slate-300 dark:border-white/10 flex flex-col items-center justify-center gap-3 animate-pulse">
         <div className="w-5 h-5 border-2 border-indigo-500 border-t-transparent rounded-full animate-spin" />
@@ -564,14 +547,16 @@ function UIDispatcher({ rawContent, primaryColor, accentColor, isStreaming, view
         </div>
       );
     case 'carousel':
-      // We only render title/description here. The actual carousel is rendered separately 
-      // at the bottom of the MessageBubble to avoid being trapped in the streaming loading box.
       return (
         <div className="my-4">
           {config.title && <h4 className={`${isCompact ? 'mb-1.5 text-[11px]' : 'mb-2 text-xs'} font-semibold text-slate-500`}>{config.title}</h4>}
           {hasDescription && (
             <p className={`mb-3 ${isCompact ? 'text-xs' : 'text-sm'} text-slate-500 dark:text-white/60`}>{config.description}</p>
           )}
+          <ProductCarousel products={(config.data as unknown as Product[]).map(item => ({
+            ...item,
+            image: item.image ?? (typeof resolveImage === 'function' ? resolveImage(item as unknown as Record<string, unknown>) : undefined)
+          }))} primaryColor={primaryColor} onAddToCart={onAddToCart} />
         </div>
       );
     case 'table':
@@ -614,6 +599,11 @@ export function MessageBubble({
   const isCompact = viewportSize === 'compact';
   const isMedium = viewportSize === 'medium';
   const [showSources, setShowSources] = React.useState(false);
+  const hasStructuredProductBlock = React.useMemo(
+    () => /```(?:ui|json|chart)\s*[\s\S]*?"?(?:view|type|data|products)"?\s*:\s*"?(?:carousel|products|table)"?/i.test(message.content) ||
+      (/\{[\s\S]*?"?(?:view|type|data|products)"?\s*:\s*"?(?:carousel|products)"?[\s\S]*\}/i.test(message.content) && looksLikeStructuredPayload(message.content)),
+    [message.content],
+  );
   const structuredContent = React.useMemo(
     () => isUser ? { payload: null, text: message.content } : extractStructuredPayload(message.content),
     [isUser, message.content],
@@ -703,34 +693,20 @@ export function MessageBubble({
 
   // ── Merge & deduplicate products ───────────────────────────────────────────
   const allProducts = React.useMemo<Product[]>(() => {
-    const seen = new Set<string>();
-    const merged: Product[] = [];
-
-    // 1. Add products extracted from the LLM content (highest priority)
-    for (const p of productsFromContent) {
-      const id = String(p.id || p.name);
-      if (!seen.has(id)) {
-        seen.add(id);
-        merged.push(p);
-      }
-    }
+    if (productsFromContent.length > 0) return productsFromContent;
 
-    // 2. Add products from sources that were mentioned in the text
+    const seen = new Set<string>();
     const contentLower = message.content.toLowerCase();
-    for (const p of productsFromSources) {
-      const id = String(p.id || p.name);
-      if (seen.has(id)) continue;
-
-      const mentioned = contentLower.includes(p.name.toLowerCase()) ||
-                        (p.brand ? contentLower.includes(p.brand.toLowerCase()) : false);
-      
-      if (mentioned) {
-        seen.add(id);
-        merged.push(p);
-      }
-    }
 
-    return merged;
+    return productsFromSources.filter(p => {
+      const id = String(p.id ?? p.name);
+      if (seen.has(id)) return false;
+      const mentioned =
+        contentLower.includes(p.name.toLowerCase()) ||
+        (p.brand ? contentLower.includes(p.brand.toLowerCase()) : false);
+      if (mentioned) { seen.add(id); return true; }
+      return false;
+    });
   }, [productsFromSources, productsFromContent, message.content]);
 
   const processedMarkdown = React.useMemo(() => {
@@ -742,23 +718,17 @@ export function MessageBubble({
       .replace(/(\|[^\n]*\|)\n\n+(?=\|)/g, '$1\n'); // Remove blank lines between rows
 
     // 2. HEALING: Detect naked JSON charts/products and wrap them if markers are missing
-    // This handles models (like Llama 3.2) that often omit the ```ui markers.
-    if (!isStreaming && !hasStructuredUiBlock) {
+    // This handles models (like Llama 3.2) that often omit the ```chart markers.
+    if (!isStreaming) {
       // Look for objects that look like chart or product data
-      raw = raw.replace(/(?:^|\n)\s*(\{[\s\S]+?\})(?:\s*\n|$)/g, (match, body) => {
+      raw = raw.replace(/(?:^|\n)\s*\{[\s\S]*\}\s*(?:\n|$)/g, (match) => {
         // Only wrap if not already in a code block
         if (match.includes('```')) return match;
-        const trimmedBody = body.trim();
-        if (!looksLikeStructuredPayload(trimmedBody)) return match;
-        
-        const type = trimmedBody.includes('"view"') || 
-                     trimmedBody.includes('"chartType"') || 
-                     trimmedBody.includes('"type"') || 
-                     trimmedBody.includes('"xAxisKey"')
+        if (!looksLikeStructuredPayload(match)) return match;
+        const type = match.includes('"view"') || match.includes('"chartType"') || match.includes('"type": "pie"') || match.includes('"type":"pie"') || match.includes('"type": "bar"') || match.includes('"type":"bar"') || match.includes('"type": "line"') || match.includes('"type":"line"')
           ? 'ui'
           : 'json';
-          
-        return `\n\n\`\`\`${type}\n${trimmedBody}\n\`\`\`\n\n`;
+        return `\n\n\`\`\`${type}\n${match.trim()}\n\`\`\`\n\n`;
       });
     }
 
@@ -854,6 +824,7 @@ export function MessageBubble({
               primaryColor={primaryColor}
               accentColor={accentColor}
               isStreaming={isStreaming}
+              onAddToCart={onAddToCart}
               viewportSize={viewportSize}
             />
           );
@@ -868,6 +839,7 @@ export function MessageBubble({
                 primaryColor={primaryColor}
                 accentColor={accentColor}
                 isStreaming={isStreaming}
+                onAddToCart={onAddToCart}
                 viewportSize={viewportSize}
               />
             );
@@ -883,6 +855,7 @@ export function MessageBubble({
                 primaryColor={primaryColor}
                 accentColor={accentColor}
                 isStreaming={isStreaming}
+                onAddToCart={onAddToCart}
                 viewportSize={viewportSize}
               />
             );
@@ -909,7 +882,7 @@ export function MessageBubble({
         );
       },
     }),
-    [primaryColor, accentColor, isStreaming, viewportSize],
+    [primaryColor, accentColor, isStreaming, onAddToCart, viewportSize],
   );
 
   // ── Render ─────────────────────────────────────────────────────────────────
@@ -951,6 +924,7 @@ export function MessageBubble({
                   primaryColor={primaryColor}
                   accentColor={accentColor}
                   isStreaming={isStreaming}
+                  onAddToCart={onAddToCart}
                   viewportSize={viewportSize}
                 />
               )}
@@ -969,7 +943,7 @@ export function MessageBubble({
         </div>
 
         {/* Product Carousel */}
-        {!isUser && allProducts.length > 0 && (
+        {!isUser && !hasStructuredProductBlock && allProducts.length > 0 && (
           <div className="w-full mt-1">
             <ProductCarousel
               products={allProducts}

package/src/components/VisualizationRenderer.tsx

@@ -0,0 +1,341 @@
+'use client';
+
+import Image from 'next/image';
+import {
+  UITransformationResponse,
+  VisualizationType,
+  PieChartData,
+  BarChartData,
+  LineChartDataPoint,
+  TableData,
+  CarouselProduct,
+} from '@/utils/UITransformer';
+
+/**
+ * Props for the VisualizationRenderer component
+ */
+interface VisualizationRendererProps {
+  data: UITransformationResponse;
+  className?: string;
+}
+
+/**
+ * VisualizationRenderer — Renders UI transformations as React components
+ *
+ * Dynamically selects the appropriate visualization component based on the
+ * transformation type returned by UITransformer.
+ *
+ * @example
+ * const transformation = UITransformer.transform(query, results);
+ * return <VisualizationRenderer data={transformation} />;
+ */
+export function VisualizationRenderer({
+  data,
+  className = '',
+}: VisualizationRendererProps) {
+  if (!data) {
+    return (
+      <div className={`p-4 text-gray-500 ${className}`}>
+        No data available for visualization
+      </div>
+    );
+  }
+
+  return (
+    <div className={`space-y-4 ${className}`}>
+      <div className="space-y-2">
+        <h3 className="text-lg font-semibold text-gray-900 dark:text-white">
+          {data.title}
+        </h3>
+        {data.description && (
+          <p className="text-sm text-gray-600 dark:text-gray-400">
+            {data.description}
+          </p>
+        )}
+      </div>
+
+      {renderVisualization(data.type, data.data)}
+    </div>
+  );
+}
+
+/**
+ * Internal helper to render the appropriate visualization
+ */
+function renderVisualization(type: VisualizationType, data: unknown): React.ReactNode {
+  switch (type) {
+    case 'pie_chart':
+      return renderPieChart(data as PieChartData[]);
+    case 'bar_chart':
+      return renderBarChart(data as BarChartData[]);
+    case 'line_chart':
+      return renderLineChart(data as LineChartDataPoint[]);
+    case 'table':
+      return renderTable(data as TableData);
+    case 'product_carousel':
+      return renderProductCarousel(data as CarouselProduct[]);
+    case 'text':
+    default:
+      return renderText(data);
+  }
+}
+
+/**
+ * Render pie chart
+ */
+function renderPieChart(data: PieChartData[]): React.ReactNode {
+  if (!Array.isArray(data)) {
+    return <div className="text-red-500">Invalid pie chart data</div>;
+  }
+
+  return (
+    <div className="bg-white dark:bg-gray-800 p-4 rounded-lg shadow">
+      <div className="flex flex-wrap gap-2">
+        {data.map((item: PieChartData, idx: number) => (
+          <div
+            key={idx}
+            className="flex items-center gap-2 p-2 bg-gray-50 dark:bg-gray-700 rounded"
+          >
+            <div
+              className="w-3 h-3 rounded-full"
+              style={{ backgroundColor: generateColor(idx) }}
+            />
+            <span className="text-sm font-medium text-gray-700 dark:text-gray-300">
+              {item.label}: {item.value}
+            </span>
+            {item.inStock !== undefined && (
+              <span
+                className={`text-xs px-2 py-1 rounded ${
+                  item.inStock
+                    ? 'bg-green-100 text-green-800'
+                    : 'bg-red-100 text-red-800'
+                }`}
+              >
+                {item.inStock ? 'In Stock' : 'Out of Stock'}
+              </span>
+            )}
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+/**
+ * Render bar chart
+ */
+function renderBarChart(data: BarChartData[]): React.ReactNode {
+  if (!Array.isArray(data)) {
+    return <div className="text-red-500">Invalid bar chart data</div>;
+  }
+
+  return (
+    <div className="bg-white dark:bg-gray-800 p-4 rounded-lg shadow overflow-x-auto">
+      <div className="space-y-3">
+        {data.map((item: BarChartData, idx: number) => (
+          <div key={idx} className="space-y-1">
+            <div className="flex justify-between items-center">
+              <span className="text-sm font-medium text-gray-700 dark:text-gray-300">
+                {item.category}
+              </span>
+              <span className="text-sm text-gray-600 dark:text-gray-400">
+                {item.value}
+              </span>
+            </div>
+            <div className="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2">
+              <div
+                className="h-full rounded-full transition-all"
+                style={{
+                  width: `${(item.value / Math.max(...data.map((d: BarChartData) => d.value))) * 100}%`,
+                  backgroundColor: generateColor(idx),
+                }}
+              />
+            </div>
+            {item.inStock !== undefined && (
+              <span
+                className={`text-xs px-2 py-1 rounded inline-block ${
+                  item.inStock
+                    ? 'bg-green-100 text-green-800'
+                    : 'bg-red-100 text-red-800'
+                }`}
+              >
+                {item.inStock ? 'In Stock' : 'Out of Stock'}
+              </span>
+            )}
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+/**
+ * Render line chart (simplified text representation)
+ */
+function renderLineChart(data: LineChartDataPoint[]): React.ReactNode {
+  if (!Array.isArray(data)) {
+    return <div className="text-red-500">Invalid line chart data</div>;
+  }
+
+  return (
+    <div className="bg-white dark:bg-gray-800 p-4 rounded-lg shadow overflow-x-auto">
+      <div className="space-y-2">
+        {data.map((point: LineChartDataPoint, idx: number) => (
+          <div
+            key={idx}
+            className="flex justify-between items-center p-2 bg-gray-50 dark:bg-gray-700 rounded"
+          >
+            <span className="text-sm text-gray-600 dark:text-gray-400">
+              {point.label || point.timestamp}
+            </span>
+            <span className="text-sm font-semibold text-gray-900 dark:text-white">
+              {typeof point.value === 'number' ? point.value.toFixed(2) : point.value}
+            </span>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+/**
+ * Render table
+ */
+function renderTable(data: TableData): React.ReactNode {
+  if (!data.columns || !data.rows) {
+    return <div className="text-red-500">Invalid table data</div>;
+  }
+
+  return (
+    <div className="bg-white dark:bg-gray-800 rounded-lg shadow overflow-x-auto">
+      <table className="w-full text-sm">
+        <thead className="bg-gray-100 dark:bg-gray-700 border-b border-gray-200 dark:border-gray-600">
+          <tr>
+            {data.columns.map((col: string, idx: number) => (
+              <th
+                key={idx}
+                className="px-4 py-2 text-left font-semibold text-gray-900 dark:text-white"
+              >
+                {col}
+              </th>
+            ))}
+          </tr>
+        </thead>
+        <tbody className="divide-y divide-gray-200 dark:divide-gray-600">
+          {data.rows.map((row: (string | number | boolean)[], rowIdx: number) => (
+            <tr
+              key={rowIdx}
+              className="hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors"
+            >
+              {row.map((cell: string | number | boolean, cellIdx: number) => (
+                <td
+                  key={cellIdx}
+                  className="px-4 py-2 text-gray-700 dark:text-gray-300"
+                >
+                  {String(cell)}
+                </td>
+              ))}
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  );
+}
+
+/**
+ * Render product carousel
+ */
+function renderProductCarousel(data: CarouselProduct[]): React.ReactNode {
+  if (!Array.isArray(data)) {
+    return <div className="text-red-500">Invalid carousel data</div>;
+  }
+
+  return (
+    <div className="overflow-x-auto">
+      <div className="flex gap-4 pb-4">
+        {data.map((product: CarouselProduct) => (
+          <div
+            key={product.id}
+            className="flex-shrink-0 w-64 bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden hover:shadow-lg transition-shadow"
+          >
+            {product.image && (
+              <div className="relative w-full h-40 bg-gray-200">
+                <Image
+                  src={product.image}
+                  alt={product.name}
+                  fill
+                  className="object-cover"
+                  sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
+                />
+              </div>
+            )}
+            <div className="p-4 space-y-2">
+              <h4 className="font-semibold text-gray-900 dark:text-white line-clamp-2">
+                {product.name}
+              </h4>
+              {product.brand && (
+                <p className="text-xs text-gray-500 dark:text-gray-400">
+                  Brand: {product.brand}
+                </p>
+              )}
+              {product.price && (
+                <p className="text-lg font-bold text-gray-900 dark:text-white">
+                  ${typeof product.price === 'number' ? product.price.toFixed(2) : product.price}
+                </p>
+              )}
+              {product.description && (
+                <p className="text-sm text-gray-600 dark:text-gray-400 line-clamp-2">
+                  {product.description}
+                </p>
+              )}
+              <div className="flex gap-2 pt-2">
+                <span
+                  className={`text-xs px-2 py-1 rounded flex-1 text-center ${
+                    product.inStock
+                      ? 'bg-green-100 text-green-800'
+                      : 'bg-red-100 text-red-800'
+                  }`}
+                >
+                  {product.inStock ? 'In Stock' : 'Out of Stock'}
+                </span>
+              </div>
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+/**
+ * Render text
+ */
+function renderText(data: unknown): React.ReactNode {
+  const content = (data as { content?: string })?.content || String(data);
+
+  return (
+    <div className="bg-white dark:bg-gray-800 p-4 rounded-lg shadow prose dark:prose-invert max-w-none">
+      <p className="text-gray-700 dark:text-gray-300 whitespace-pre-wrap">
+        {content}
+      </p>
+    </div>
+  );
+}
+
+/**
+ * Utility to generate consistent colors for charts
+ */
+function generateColor(index: number): string {
+  const colors = [
+    '#3B82F6', // blue
+    '#10B981', // green
+    '#F59E0B', // amber
+    '#EF4444', // red
+    '#8B5CF6', // purple
+    '#EC4899', // pink
+    '#06B6D4', // cyan
+    '#F97316', // orange
+  ];
+  return colors[index % colors.length];
+}