@retrivora-ai/rag-engine 1.8.0 → 1.8.1

package/src/components/VisualizationRenderer.tsx

@@ -1,15 +1,89 @@
 'use client';
 
-import Image from 'next/image';
+import React from 'react';
 import {
-  UITransformationResponse,
-  VisualizationType,
-  PieChartData,
-  BarChartData,
-  LineChartDataPoint,
-  TableData,
-  CarouselProduct,
-} from '@/utils/UITransformer';
+  PieChart,
+  Pie,
+  Cell,
+  BarChart,
+  Bar,
+  LineChart,
+  Line,
+  XAxis,
+  YAxis,
+  CartesianGrid,
+  Tooltip,
+  Legend,
+  ResponsiveContainer,
+  RadarChart,
+  Radar,
+  PolarGrid,
+  PolarAngleAxis,
+  PolarRadiusAxis,
+} from 'recharts';
+import { ProductCarousel } from './ProductCarousel';
+import { Product, UITransformationResponse, VisualizationType, PieChartData, BarChartData, LineChartDataPoint, TableData, CarouselProduct } from '../types';
+
+// ─── Shared palette (mirrors DynamicChart.tsx) ───────────────────────────────
+
+const CHART_COLORS = [
+  '#6366f1', // indigo
+  '#10b981', // emerald
+  '#f59e0b', // amber
+  '#ef4444', // red
+  '#8b5cf6', // purple
+  '#ec4899', // pink
+  '#06b6d4', // cyan
+  '#f97316', // orange
+];
+
+function getColor(index: number): string {
+  return CHART_COLORS[index % CHART_COLORS.length];
+}
+
+// ─── Custom Tooltip ───────────────────────────────────────────────────────────
+
+interface TooltipPayloadItem {
+  name: string;
+  value: string | number;
+  color?: string;
+}
+
+function CustomTooltip({
+  active,
+  payload,
+  label,
+}: {
+  active?: boolean;
+  payload?: TooltipPayloadItem[];
+  label?: string;
+}) {
+  if (!active || !payload || payload.length === 0) return null;
+
+  return (
+    <div className="rounded-xl border border-slate-200 bg-white px-3 py-2 text-xs shadow-xl dark:border-white/10 dark:bg-slate-950">
+      {label && (
+        <p className="mb-2 font-semibold text-slate-800 dark:text-white/90">{label}</p>
+      )}
+      {payload.map((entry, i) => (
+        <div key={i} className="flex items-center justify-between gap-3 text-slate-600 dark:text-white/70">
+          <span className="flex items-center gap-1.5">
+            {entry.color && (
+              <span
+                className="inline-block w-2 h-2 rounded-full flex-shrink-0"
+                style={{ background: entry.color }}
+              />
+            )}
+            {entry.name}
+          </span>
+          <span className="font-medium text-slate-900 dark:text-white/90">{entry.value}</span>
+        </div>
+      ))}
+    </div>
+  );
+}
+
+// ─── Props ────────────────────────────────────────────────────────────────────
 
 /**
  * Props for the VisualizationRenderer component
@@ -17,21 +91,30 @@ import {
 interface VisualizationRendererProps {
   data: UITransformationResponse;
   className?: string;
+  primaryColor?: string;
+  onAddToCart?: (product: Product) => void;
 }
 
+// ─── Main component ───────────────────────────────────────────────────────────
+
 /**
- * VisualizationRenderer — Renders UI transformations as React components
+ * VisualizationRenderer — Renders UI transformations as React components.
  *
  * Dynamically selects the appropriate visualization component based on the
- * transformation type returned by UITransformer.
+ * transformation type returned by UITransformer. All charts are rendered via
+ * Recharts (chart.js has been removed).
+ *
+ * Supported types: bar_chart · line_chart · pie_chart · table · product_carousel · text
  *
  * @example
- * const transformation = UITransformer.transform(query, results);
+ * const transformation = await UITransformer.analyzeAndDecide(query, sources, llm);
  * return <VisualizationRenderer data={transformation} />;
  */
 export function VisualizationRenderer({
   data,
   className = '',
+  primaryColor,
+  onAddToCart,
 }: VisualizationRendererProps) {
   if (!data) {
     return (
@@ -43,299 +126,316 @@ export function VisualizationRenderer({
 
   return (
     <div className={`space-y-4 ${className}`}>
-      <div className="space-y-2">
-        <h3 className="text-lg font-semibold text-gray-900 dark:text-white">
+      <div className="space-y-1">
+        <h3 className="text-sm font-semibold text-slate-900 dark:text-white">
           {data.title}
         </h3>
-        {data.description && (
-          <p className="text-sm text-gray-600 dark:text-gray-400">
+        {data.description && data.description !== (data.data as { content?: string })?.content && (
+          <p className="text-xs text-slate-500 dark:text-slate-400">
             {data.description}
           </p>
         )}
       </div>
 
-      {renderVisualization(data.type, data.data)}
+      {renderVisualization(data.type, data.data, onAddToCart, primaryColor)}
     </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);
+// ─── Visualization dispatcher ─────────────────────────────────────────────────
+
+function renderVisualization(
+  type: VisualizationType,
+  data: unknown,
+  onAddToCart?: (product: Product) => void,
+  primaryColor?: string,
+): React.ReactNode {
+  try {
+    switch (type) {
+      case 'pie_chart':
+        return <PieChartView data={data as PieChartData[]} />;
+      case 'bar_chart':
+        return <BarChartView data={data as BarChartData[]} primaryColor={primaryColor} />;
+      case 'line_chart':
+        return <LineChartView data={data as LineChartDataPoint[]} primaryColor={primaryColor} />;
+      case 'radar_chart':
+        return <RadarChartView data={data as Record<string, unknown>[]} />;
+      case 'table':
+        return <TableView data={data as TableData} />;
+      case 'product_carousel':
+      case 'carousel':
+        return <CarouselView data={data as CarouselProduct[]} onAddToCart={onAddToCart} primaryColor={primaryColor} />;
+      case 'text':
+      default:
+        return <TextView data={data} />;
+    }
+  } catch (error) {
+    console.warn('[VisualizationRenderer] Rendering failed, falling back to text:', error);
+    return <TextView data={{ content: 'Unable to render the requested visualization.' }} />;
   }
 }
 
-/**
- * Render pie chart
- */
-function renderPieChart(data: PieChartData[]): React.ReactNode {
-  if (!Array.isArray(data)) {
-    return <div className="text-red-500">Invalid pie chart data</div>;
+// ─── Pie Chart ────────────────────────────────────────────────────────────────
+
+function PieChartView({ data }: { data: PieChartData[] }) {
+  if (!Array.isArray(data) || data.length === 0) {
+    return <div className="text-xs text-red-500">Invalid pie chart data</div>;
   }
 
+  // Recharts Pie uses flat key/value, so map to { name, value }
+  const chartData = data.map((item) => ({
+    name: item.label,
+    value: item.value,
+  }));
+
   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="bg-white dark:bg-slate-900 rounded-xl border border-slate-200 dark:border-white/10 p-4 shadow-sm">
+      <ResponsiveContainer width="100%" height={280}>
+        <PieChart>
+          <Pie
+            data={chartData}
+            dataKey="value"
+            nameKey="name"
+            cx="50%"
+            cy="50%"
+            outerRadius="68%"
+            label={false}
+            labelLine={false}
           >
-            <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>
+            {chartData.map((_entry, index) => (
+              <Cell key={`cell-${index}`} fill={getColor(index)} />
+            ))}
+          </Pie>
+          <Tooltip content={<CustomTooltip />} />
+          <Legend wrapperStyle={{ fontSize: 12 }} verticalAlign="bottom" />
+        </PieChart>
+      </ResponsiveContainer>
     </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>;
+// ─── Bar Chart ────────────────────────────────────────────────────────────────
+
+function BarChartView({ data, primaryColor }: { data: BarChartData[]; primaryColor?: string }) {
+  if (!Array.isArray(data) || data.length === 0) {
+    return <div className="text-xs text-red-500">Invalid bar chart data</div>;
   }
 
+  const chartData = data.map((item) => ({
+    category: item.category,
+    value: item.value,
+    ...(item.inStockCount !== undefined && { inStockCount: item.inStockCount }),
+    ...(item.outOfStockCount !== undefined && { outOfStockCount: item.outOfStockCount }),
+  }));
+
+  const barColor = primaryColor ?? getColor(0);
+  const hasStock = chartData.some((d) => 'inStockCount' in d);
+
   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 className="bg-white dark:bg-slate-900 rounded-xl border border-slate-200 dark:border-white/10 p-4 shadow-sm overflow-x-auto">
+      <ResponsiveContainer width="100%" height={260}>
+        <BarChart data={chartData} margin={{ top: 10, right: 10, left: -20, bottom: 0 }}>
+          <CartesianGrid strokeDasharray="3 3" vertical={false} stroke="#e2e8f0" />
+          <XAxis
+            dataKey="category"
+            tick={{ fontSize: 11, fill: '#64748b' }}
+            tickLine={false}
+            axisLine={{ stroke: '#cbd5e1' }}
+          />
+          <YAxis tick={{ fontSize: 11, fill: '#64748b' }} tickLine={false} axisLine={false} />
+          <Tooltip content={<CustomTooltip />} cursor={{ fill: '#f1f5f9' }} />
+          <Legend wrapperStyle={{ fontSize: 12 }} />
+          {hasStock ? (
+            <>
+              <Bar dataKey="inStockCount" name="In Stock" fill={getColor(1)} radius={[4, 4, 0, 0]} />
+              <Bar dataKey="outOfStockCount" name="Out of Stock" fill={getColor(3)} radius={[4, 4, 0, 0]} />
+            </>
+          ) : (
+            <Bar dataKey="value" name="Value" fill={barColor} radius={[4, 4, 0, 0]} />
+          )}
+        </BarChart>
+      </ResponsiveContainer>
     </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>;
+// ─── Line Chart ───────────────────────────────────────────────────────────────
+
+function LineChartView({ data, primaryColor }: { data: LineChartDataPoint[]; primaryColor?: string }) {
+  if (!Array.isArray(data) || data.length === 0) {
+    return <div className="text-xs text-red-500">Invalid line chart data</div>;
   }
 
+  const chartData = data.map((point) => ({
+    label: String(point.label ?? point.timestamp),
+    value: Number(point.value),
+  }));
+
+  const lineColor = primaryColor ?? getColor(0);
+
   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 className="bg-white dark:bg-slate-900 rounded-xl border border-slate-200 dark:border-white/10 p-4 shadow-sm overflow-x-auto">
+      <ResponsiveContainer width="100%" height={260}>
+        <LineChart data={chartData} margin={{ top: 10, right: 10, left: -20, bottom: 0 }}>
+          <CartesianGrid strokeDasharray="3 3" vertical={false} stroke="#e2e8f0" />
+          <XAxis
+            dataKey="label"
+            tick={{ fontSize: 11, fill: '#64748b' }}
+            tickLine={false}
+            axisLine={{ stroke: '#cbd5e1' }}
+          />
+          <YAxis tick={{ fontSize: 11, fill: '#64748b' }} tickLine={false} axisLine={false} />
+          <Tooltip content={<CustomTooltip />} />
+          <Line
+            type="monotone"
+            dataKey="value"
+            name="Value"
+            stroke={lineColor}
+            strokeWidth={2.5}
+            dot={{ r: 3.5, strokeWidth: 2, fill: lineColor }}
+            activeDot={{ r: 5 }}
+          />
+        </LineChart>
+      </ResponsiveContainer>
     </div>
   );
 }
 
-/**
- * Render table
- */
-function renderTable(data: TableData): React.ReactNode {
-  if (!data.columns || !data.rows) {
-    return <div className="text-red-500">Invalid table data</div>;
+// ─── Radar Chart ──────────────────────────────────────────────────────────────
+
+function RadarChartView({ data }: { data: Record<string, unknown>[] }) {
+  if (!Array.isArray(data) || data.length === 0) {
+    return <div className="text-xs text-red-500">Invalid radar chart data</div>;
   }
 
+  // Find all keys that are not 'attribute' to use as radar data keys (product names)
+  const productNames = Array.from(
+    new Set(data.flatMap((item) => Object.keys(item).filter((key) => key !== 'attribute')))
+  );
+
   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"
+    <div className="bg-white dark:bg-slate-900 rounded-xl border border-slate-200 dark:border-white/10 p-4 shadow-sm">
+      <ResponsiveContainer width="100%" height={300}>
+        <RadarChart cx="50%" cy="50%" outerRadius="80%" data={data}>
+          <PolarGrid stroke="#e2e8f0" />
+          <PolarAngleAxis dataKey="attribute" tick={{ fontSize: 11, fill: '#64748b' }} />
+          <PolarRadiusAxis tick={{ fontSize: 10, fill: '#64748b' }} />
+          {productNames.map((productName, index) => (
+            <Radar
+              key={productName}
+              name={productName}
+              dataKey={productName}
+              stroke={getColor(index)}
+              fill={getColor(index)}
+              fillOpacity={0.4}
+            />
+          ))}
+          <Tooltip content={<CustomTooltip />} />
+          <Legend wrapperStyle={{ fontSize: 12 }} />
+        </RadarChart>
+      </ResponsiveContainer>
+    </div>
+  );
+}
+
+// ─── Table ────────────────────────────────────────────────────────────────────
+
+function TableView({ data }: { data: TableData }) {
+  if (!data?.columns || !data?.rows) {
+    return <div className="text-xs text-red-500">Invalid table data</div>;
+  }
+
+  return (
+    <div className="bg-white dark:bg-slate-900 rounded-xl border border-slate-200 dark:border-white/10 shadow-sm overflow-hidden">
+      <div className="overflow-x-auto">
+        <table className="w-full text-sm border-collapse">
+          <thead className="bg-slate-50 dark:bg-white/5 border-b border-slate-200 dark:border-white/10">
+            <tr>
+              {data.columns.map((col: string, idx: number) => (
+                <th
+                  key={idx}
+                  className="px-4 py-3 text-left text-xs font-semibold text-slate-700 dark:text-white/90 whitespace-nowrap uppercase tracking-wider"
                 >
-                  {String(cell)}
-                </td>
+                  {col}
+                </th>
               ))}
             </tr>
-          ))}
-        </tbody>
-      </table>
+          </thead>
+          <tbody className="divide-y divide-slate-100 dark:divide-white/5">
+            {data.rows.map((row: (string | number | boolean)[], rowIdx: number) => (
+              <tr
+                key={rowIdx}
+                className="hover:bg-slate-50/60 dark:hover:bg-white/5 transition-colors"
+              >
+                {row.map((cell: string | number | boolean, cellIdx: number) => (
+                  <td
+                    key={cellIdx}
+                    className="px-4 py-3 text-slate-600 dark:text-white/70 text-sm"
+                  >
+                    {String(cell)}
+                  </td>
+                ))}
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+      <div className="px-4 py-2 bg-slate-50 dark:bg-white/5 border-t border-slate-100 dark:border-white/5">
+        <p className="text-[11px] text-slate-400 dark:text-white/30">
+          {data.rows.length} row{data.rows.length !== 1 ? 's' : ''}
+        </p>
+      </div>
     </div>
   );
 }
 
-/**
- * Render product carousel
- */
-function renderProductCarousel(data: CarouselProduct[]): React.ReactNode {
+// ─── Product Carousel ─────────────────────────────────────────────────────────
+
+function CarouselView({
+  data,
+  onAddToCart,
+  primaryColor,
+}: {
+  data: CarouselProduct[];
+  onAddToCart?: (product: Product) => void;
+  primaryColor?: string;
+}) {
   if (!Array.isArray(data)) {
-    return <div className="text-red-500">Invalid carousel data</div>;
+    return <div className="text-xs text-red-500">Invalid carousel data</div>;
   }
 
+  const products: Product[] = data.map((product) => ({
+    id: product.id,
+    name: product.name,
+    brand: product.brand,
+    price: product.price,
+    image: product.image,
+    link: typeof product.link === 'string' ? product.link : undefined,
+    description: product.description,
+    inStock: product.inStock,
+  }));
+
   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 className="w-full">
+      <ProductCarousel
+        products={products}
+        primaryColor={primaryColor ?? '#6366f1'}
+        onAddToCart={(p) => onAddToCart?.(p)}
+      />
     </div>
   );
 }
 
-/**
- * Render text
- */
-function renderText(data: unknown): React.ReactNode {
-  const content = (data as { content?: string })?.content || String(data);
+// ─── Text / Prose ─────────────────────────────────────────────────────────────
+
+function TextView({ data }: { data: unknown }) {
+  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">
+    <div className="bg-white dark:bg-slate-900 rounded-xl border border-slate-200 dark:border-white/10 p-4 shadow-sm">
+      <p className="text-sm text-slate-700 dark:text-slate-300 whitespace-pre-wrap leading-relaxed">
         {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];
-}