@retrivora-ai/rag-engine 1.8.0 → 1.8.2

package/src/components/UIDispatcher.tsx

@@ -0,0 +1,344 @@
+import React from 'react';
+import { Product } from '../types';
+import { ChatViewportSize } from '../types/props';
+import { DynamicChart } from './DynamicChart';
+import { ProductCarousel } from './ProductCarousel';
+import { VisualizationRenderer } from './VisualizationRenderer';
+import { extractLikelyJsonBlock, sanitizeJson, resolveImage } from '../utils/ProductExtractor';
+
+// ─── Universal UI Dispatcher ────────────────────────────────────────────────
+
+interface UIConfig {
+  view: 'chart' | 'carousel' | 'table' | 'none';
+  chartType?: 'pie' | 'bar' | 'line';
+  xAxisKey?: string;
+  dataKeys?: string[];
+  columns?: string[];
+  colors?: string[];
+  data: Record<string, unknown>[];
+  title?: string;
+  description?: string;
+  insights?: string[];
+  type?: string;
+  items?: Record<string, unknown>[];
+  rows?: Record<string, unknown>[];
+  products?: Record<string, unknown>[];
+  results?: Record<string, unknown>[];
+
+  // V7 Protocol Fields
+  carousel?: {
+    items: Record<string, unknown>[];
+  };
+  chart?: {
+    type: 'pie' | 'bar' | 'line';
+    xKey: string;
+    yKeys: string[];
+    data: Record<string, unknown>[];
+  };
+  table?: {
+    columns: string[];
+    rows?: Record<string, unknown>[];
+    data?: Record<string, unknown>[];
+  };
+}
+
+interface RawUIConfig extends Omit<UIConfig, 'data' | 'items' | 'rows' | 'products' | 'results' | 'carousel' | 'chart' | 'table'> {
+  data: Array<Record<string, unknown> | unknown[]>;
+  items?: Array<Record<string, unknown> | unknown[]>;
+  rows?: Array<Record<string, unknown> | unknown[]>;
+  products?: Array<Record<string, unknown> | unknown[]>;
+  results?: Array<Record<string, unknown> | unknown[]>;
+
+  // V7 Protocol Fields (Raw)
+  carousel?: {
+    items: Array<Record<string, unknown> | unknown[]>;
+  };
+  chart?: {
+    type: 'pie' | 'bar' | 'line';
+    xKey: string;
+    yKeys: string[];
+    data: Array<Record<string, unknown> | unknown[]>;
+  };
+  table?: {
+    columns: string[];
+    rows?: Array<Record<string, unknown> | unknown[]>;
+    data?: Array<Record<string, unknown> | unknown[]>;
+  };
+}
+
+function normalizeTabularRows(
+  rows: Array<Record<string, unknown> | unknown[]> | undefined,
+  columns?: string[],
+): Record<string, unknown>[] {
+  if (!Array.isArray(rows)) return [];
+
+  // Common synonyms for mapping natural language headers to technical keys
+  const SYNONYMS: Record<string, string[]> = {
+    name: ['product', 'item', 'title', 'label', 'heading', 'product name', 'item name'],
+    price: ['cost', 'amount', 'msrp', 'price', 'rate', 'value', 'price_usd'],
+    brand: ['manufacturer', 'vendor', 'make', 'company', 'brand_name', 'supplier'],
+    image: ['imageUrl', 'thumbnail', 'img', 'url', 'photo', 'picture', 'media'],
+    stock: ['inventory', 'quantity', 'count', 'availability', 'stock_level', 'in stock', 'status'],
+  };
+
+  return rows
+    .map((row) => {
+      if (Array.isArray(row)) {
+        const keys = Array.isArray(columns) && columns.length > 0
+          ? columns
+          : row.map((_, index) => `column_${index + 1}`);
+
+        return keys.reduce<Record<string, unknown>>((acc, key, index) => {
+          acc[key] = row[index];
+          return acc;
+        }, {});
+      }
+
+      if (row && typeof row === 'object') {
+        const result: Record<string, unknown> = { ...row };
+
+        // Self-Healing: If columns are provided, ensure the row has keys matching those columns
+        if (Array.isArray(columns)) {
+          columns.forEach(col => {
+            if (result[col] !== undefined) return; // Already matches
+
+            // Try to find a match among row keys
+            const rowKeys = Object.keys(row);
+            const colLower = col.toLowerCase().replace(/_/g, ' ');
+
+            // 1. Direct case-insensitive / space-to-underscore match
+            const foundKey = rowKeys.find(rk => {
+              const rkLower = rk.toLowerCase().replace(/_/g, ' ');
+              return rkLower === colLower || rkLower.includes(colLower) || colLower.includes(rkLower);
+            });
+
+            if (foundKey) {
+              result[col] = row[foundKey];
+              return;
+            }
+
+            // 2. Synonym match
+            for (const [target, aliases] of Object.entries(SYNONYMS)) {
+              const isMatch = target === colLower || aliases.some(a => colLower.includes(a) || a.includes(colLower));
+              if (isMatch) {
+                const mappedKey = rowKeys.find(rk => {
+                  const rkL = rk.toLowerCase();
+                  return rkL === target || aliases.some(a => rkL.includes(a) || a.includes(rkL));
+                });
+                if (mappedKey) {
+                  result[col] = row[mappedKey];
+                  break;
+                }
+              }
+            }
+          });
+        }
+
+        return result;
+      }
+
+      return { value: row };
+    })
+    .filter((row) => Object.keys(row).length > 0);
+}
+
+function resolveStructuredRows(config: Partial<RawUIConfig> & Record<string, unknown>) {
+  // V7 Nested Structures
+  if (config.carousel?.items && Array.isArray(config.carousel.items)) return config.carousel.items;
+  if (config.chart?.data && Array.isArray(config.chart.data)) return config.chart.data;
+  if (config.table?.rows && Array.isArray(config.table.rows)) return config.table.rows;
+  if (config.table?.data && Array.isArray(config.table.data)) return config.table.data;
+
+  // V6 Flat Structures
+  if (Array.isArray(config.data) && config.data.length > 0) return config.data;
+  if (Array.isArray(config.items) && config.items.length > 0) return config.items;
+  if (Array.isArray(config.products) && config.products.length > 0) return config.products;
+  if (Array.isArray(config.rows) && config.rows.length > 0) return config.rows;
+  if (Array.isArray(config.results) && config.results.length > 0) return config.results;
+  return [];
+}
+
+export 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 }>(() => {
+    try {
+      const clean = rawContent
+        .replace(/^```[a-z]*\s*/i, '')
+        .replace(/```\s*$/, '')
+        .trim();
+      const parsed = JSON.parse(sanitizeJson(extractLikelyJsonBlock(clean)));
+      const config = { ...parsed } as Partial<RawUIConfig> & Record<string, unknown>;
+
+      // V7 Field Mapping
+      if (config.chart) {
+        if (!config.chartType) config.chartType = config.chart.type;
+        if (!config.xAxisKey) config.xAxisKey = config.chart.xKey;
+        if (!config.dataKeys) config.dataKeys = config.chart.yKeys;
+      }
+      if (config.table) {
+        if (!config.columns) config.columns = config.table.columns;
+      }
+
+      const resolvedRows = resolveStructuredRows(config);
+
+      // ─── Intent Healing & Auto-Detection ───────────────────────────────────
+
+      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);
+
+      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')));
+
+      // 1. Healing: Override explicit view if it contradicts the data shape
+      if (config.view === 'chart' && hasProductLikeData && !hasAggregationLikeData) {
+        config.view = 'carousel';
+      } else if (config.view === 'carousel' && hasAggregationLikeData && !hasProductLikeData) {
+        config.view = 'chart';
+        config.chartType = (config.chartType as 'pie' | 'bar' | 'line') || 'bar';
+      }
+
+      // 2. Auto-Detection: Fill in missing or dynamic view
+      if (!config.view || ['pie', 'bar', 'line', 'pie_chart', 'bar_chart', 'line_chart'].includes(String(config.view))) {
+        const viewStr = String(config.view || '').toLowerCase();
+
+        if (viewStr.includes('carousel') || config.type === 'products' || Array.isArray(config.items) || hasProductLikeData) {
+          config.view = 'carousel';
+        } else if (
+          viewStr.includes('chart') ||
+          viewStr.includes('pie') || viewStr.includes('bar') || viewStr.includes('line') ||
+          hasAggregationLikeData ||
+          (typeof config.type === 'string' && ['pie', 'bar', 'line'].includes(config.type)) ||
+          (typeof config.chartType === 'string' && ['pie', 'bar', 'line'].includes(config.chartType))
+        ) {
+          config.view = 'chart';
+          config.chartType = (config.chartType as 'pie' | 'bar' | 'line') ||
+            (viewStr.replace('_chart', '') as 'pie' | 'bar' | 'line') ||
+            (config.type as 'pie' | 'bar' | 'line') || 'bar';
+        } else if (viewStr.includes('table') || config.type === 'table') {
+          config.view = 'table';
+        } else {
+          // Do not forcefully default to a table if it is not explicitly requested or strongly implied
+          config.view = 'none';
+        }
+      }
+
+      const normalizedConfig: UIConfig = {
+        ...(config as Omit<UIConfig, 'data'>),
+        data: normalizeTabularRows(resolvedRows, config.columns),
+      };
+
+      return { config: normalizedConfig };
+    } catch (err) {
+      if (isStreaming) return { loading: true };
+      return { error: String(err) };
+    }
+  }, [rawContent, isStreaming]);
+
+  if ('loading' in result) {
+    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" />
+        <p className="text-xs text-slate-500 font-medium italic">Preparing view...</p>
+      </div>
+    );
+  }
+
+  if ('error' in result) {
+    return <pre className="p-4 my-2 bg-slate-900 text-slate-100 rounded-lg text-[10px] overflow-auto max-h-40"><code>{rawContent}</code></pre>;
+  }
+
+  const { config } = result;
+  const isCompact = viewportSize === 'compact';
+  const hasInsights = Array.isArray(config.insights) && config.insights.length > 0;
+  const hasDescription = typeof config.description === 'string' && config.description.trim().length > 0;
+
+  console.log("🚀 ~ UIDispatcher ~ description:", config.description);
+  console.log("🚀 ~ UIDispatcher ~ hasDescription:", hasDescription);
+
+  switch (config.view) {
+    case 'chart':
+      return (
+        <div className={`${isCompact ? 'my-4 p-3' : 'my-6 p-4'} bg-white dark:bg-slate-900 rounded-2xl border border-slate-200 dark:border-white/10 shadow-sm overflow-hidden`}>
+          {config.title && <h4 className={`${isCompact ? 'text-[11px] mb-3' : 'text-xs mb-4'} font-semibold text-slate-500 px-2`}>{config.title}</h4>}
+          {hasDescription && (
+            <p className={`px-2 ${isCompact ? 'text-xs' : 'text-sm'} text-slate-500 dark:text-white/60`}>{config.description}</p>
+          )}
+          <DynamicChart
+            config={{
+              type: (config.chartType || 'bar') as 'bar' | 'line' | 'pie',
+              data: config.data as unknown as Record<string, string | number>[],
+              xAxisKey: config.xAxisKey,
+              dataKeys: config.dataKeys,
+              colors: config.colors,
+            }}
+            primaryColor={primaryColor}
+            accentColor={accentColor}
+            viewportSize={viewportSize}
+            isStreaming={isStreaming}
+          />
+          {hasInsights && (
+            <div className="mt-4 flex flex-wrap gap-2 px-2">
+              {config.insights?.map((insight, i) => (
+                <span
+                  key={`insight-${i}`}
+                  className={`rounded-full border border-emerald-200 bg-emerald-50 ${isCompact ? 'px-2.5 py-1 text-[10px]' : 'px-3 py-1 text-[11px]'} font-medium text-emerald-700 dark:border-emerald-500/20 dark:bg-emerald-500/10 dark:text-emerald-300`}
+                >
+                  {String(insight)}
+                </span>
+              ))}
+            </div>
+          )}
+        </div>
+      );
+    case 'carousel':
+      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':
+      return (
+        <div className={`${isCompact ? 'my-3 p-3 max-h-[320px]' : 'my-4 p-4 max-h-[400px]'} bg-white dark:bg-slate-900 rounded-xl border border-slate-200 dark:border-white/10 shadow-sm overflow-auto`}>
+          {config.title && <h4 className={`${isCompact ? 'text-[11px]' : 'text-xs'} font-semibold text-slate-500 mb-2`}>{config.title}</h4>}
+          {hasDescription && (
+            <p className={`mb-3 ${isCompact ? 'text-xs' : 'text-sm'} text-slate-500 dark:text-white/60`}>{config.description}</p>
+          )}
+          {/* Use VisualizationRenderer for Table data */}
+          <VisualizationRenderer
+            data={{
+              type: 'table',
+              title: config.title || '',
+              description: config.description,
+              data: {
+                columns: config.columns || Object.keys(config.data[0] || {}),
+                rows: config.data.map(row => Object.values(row)) as (string | number | boolean)[][]
+              }
+            }}
+            primaryColor={primaryColor}
+            isStreaming={isStreaming}
+          />
+        </div>
+      );
+    default:
+      return null;
+  }
+}