@retrivora-ai/rag-engine 1.5.3 → 1.5.5

package/src/components/MessageBubble.tsx

@@ -7,7 +7,7 @@ import remarkGfm from 'remark-gfm';
 import { MessageBubbleProps, Product } from '../types';
 import { SourceCard } from './SourceCard';
 import { ProductCarousel } from './ProductCarousel';
-import { DynamicChart, ChartConfig } from './DynamicChart';
+import { DynamicChart } from './DynamicChart';
 
 // ─── JSON sanitization ────────────────────────────────────────────────────────
 // Order matters: each step is a targeted fix, no step undoes a previous one.
@@ -123,6 +123,7 @@ function normaliseChild(children: React.ReactNode): React.ReactNode {
 interface TableConfig {
   type: 'table';
   title?: string;
+  description?: string;
   columns?: string[];   // preferred: explicit ordered column labels
   dataKeys?: string[];  // fallback column keys (may omit xAxisKey)
   xAxisKey?: string;    // row-label key to prepend when using dataKeys
@@ -210,72 +211,150 @@ function DataTable({ config }: { config: TableConfig }) {
   );
 }
 
-// ─── Chart / table code block dispatcher ─────────────────────────────────────
+// ─── Universal UI Dispatcher ────────────────────────────────────────────────
+// Handles charts, product carousels, and data tables via a single protocol.
 
-type ParsedConfig = ChartConfig | TableConfig;
+interface UIConfig {
+  view: 'chart' | 'carousel' | 'table';
+  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>[];
+}
 
-interface ChartBlockProps {
+function UIDispatcher({ rawContent, primaryColor, accentColor, isStreaming, onAddToCart }: {
   rawContent: string;
-  primaryColor: string;
-  accentColor: string;
+  primaryColor?: string;
+  accentColor?: string;
   isStreaming?: boolean;
-}
-
-function ChartBlock({ rawContent, primaryColor, accentColor, isStreaming }: ChartBlockProps) {
-  const result = React.useMemo<
-    { config: ParsedConfig } | { error: string } | { loading: true }
-  >(() => {
+  onAddToCart?: (product: Product) => void;
+}) {
+  const result = React.useMemo<{ config: UIConfig } | { error: string } | { loading: true }>(() => {
     if (isStreaming) return { loading: true };
-    if (!rawContent || rawContent === 'undefined') return { error: 'Empty visualization config.' };
     try {
       const clean = rawContent
         .replace(/^```[a-z]*\s*/i, '')
         .replace(/```\s*$/, '')
         .trim();
-      const config = JSON.parse(sanitizeJson(clean)) as ParsedConfig;
-      return { config };
+      const parsed = JSON.parse(sanitizeJson(clean));
+      const config = { ...parsed };
+      
+      // Smart Auto-Detection for legacy or simpler formats
+      if (!config.view) {
+        if (config.type === 'products' || Array.isArray(config.items)) {
+          config.view = 'carousel';
+          config.data = config.data || config.items || [];
+        } else if (['pie', 'bar', 'line'].includes(config.type) || ['pie', 'bar', 'line'].includes(config.chartType)) {
+          config.view = 'chart';
+          config.chartType = config.chartType || config.type || 'bar';
+          config.data = config.data || [];
+        } else {
+          config.view = 'table';
+          config.data = Array.isArray(config.data) ? config.data : (Array.isArray(config) ? config : []);
+        }
+      }
+
+      return { config: config as UIConfig };
     } catch (err) {
-      console.error('[ChartBlock] Parsing failed.\nError:', err);
       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 select-none">
-        <div className="w-6 h-6 border-2 border-indigo-500 border-t-transparent rounded-full animate-spin" />
-        <p className="text-xs text-slate-500 font-medium animate-pulse">Preparing data visualization…</p>
+      <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 (
-      <div className="p-4 bg-red-50 dark:bg-red-900/20 text-red-600 dark:text-red-400 rounded-lg text-sm border border-red-100 dark:border-red-900/30">
-        <p className="font-medium mb-1">Failed to render visualization</p>
-        <p className="opacity-70 text-xs">The generated configuration is invalid. Check the console for details.</p>
-      </div>
-    );
+    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;
-
-  // Route table type to dedicated renderer; everything else goes to DynamicChart
-  if (config.type === 'table') {
-    return <DataTable config={config as TableConfig} />;
+  const hasInsights = Array.isArray(config.insights) && config.insights.length > 0;
+  const hasDescription = typeof config.description === 'string' && config.description.trim().length > 0;
+
+  switch (config.view) {
+    case 'chart':
+      return (
+        <div className="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="text-xs font-semibold text-slate-500 mb-4 px-2">{config.title}</h4>}
+          {hasDescription && (
+            <p className="px-2 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}
+          />
+          {hasInsights && (
+            <div className="mt-4 flex flex-wrap gap-2 px-2">
+              {config.insights?.map((insight) => (
+                <span
+                  key={insight}
+                  className="rounded-full border border-emerald-200 bg-emerald-50 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"
+                >
+                  {insight}
+                </span>
+              ))}
+            </div>
+          )}
+        </div>
+      );
+    case 'carousel':
+      return (
+        <div className="my-4">
+          {config.title && <h4 className="mb-2 text-xs font-semibold text-slate-500">{config.title}</h4>}
+          {hasDescription && (
+            <p className="mb-3 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="my-4 p-4 bg-white dark:bg-slate-900 rounded-xl border border-slate-200 dark:border-white/10 shadow-sm overflow-auto max-h-[400px]">
+          {config.title && <h4 className="text-xs font-semibold text-slate-500 mb-2">{config.title}</h4>}
+          {hasDescription && (
+            <p className="mb-3 text-sm text-slate-500 dark:text-white/60">{config.description}</p>
+          )}
+          <DataTable config={{
+            type: 'table',
+            title: config.title,
+            description: config.description,
+            columns: config.columns,
+            dataKeys: config.dataKeys,
+            xAxisKey: config.xAxisKey,
+            data: config.data,
+          }} />
+        </div>
+      );
+    default:
+      return null;
   }
-
-  return (
-    <div className="my-4 p-4 bg-white dark:bg-slate-900 rounded-xl border border-slate-200 dark:border-white/10 shadow-sm">
-      <DynamicChart
-        config={config as ChartConfig}
-        primaryColor={primaryColor}
-        accentColor={accentColor}
-      />
-    </div>
-  );
 }
 
+
+
 // ─── Main component ───────────────────────────────────────────────────────────
 
 export function MessageBubble({
@@ -288,6 +367,10 @@ export function MessageBubble({
 }: MessageBubbleProps) {
   const isUser = message.role === 'user';
   const [showSources, setShowSources] = React.useState(false);
+  const hasStructuredProductBlock = React.useMemo(
+    () => /```(?:ui|json|chart)\s*[\s\S]*?"(?:view|type)"\s*:\s*"(?:carousel|products)"/i.test(message.content),
+    [message.content],
+  );
 
   // ── Products from sources ──────────────────────────────────────────────────
   const productsFromSources = React.useMemo<Product[]>(() => {
@@ -457,17 +540,33 @@ export function MessageBubble({
       }: React.HTMLAttributes<HTMLElement> & { inline?: boolean }) {
         const lang = /language-(\w+)/.exec(className ?? '')?.[1];
 
-        if (!inline && lang === 'chart') {
+        if (!inline && (lang === 'ui' || lang === 'chart')) {
           return (
-            <ChartBlock
+            <UIDispatcher
               rawContent={String(children ?? '').trim()}
               primaryColor={primaryColor}
               accentColor={accentColor}
               isStreaming={isStreaming}
+              onAddToCart={onAddToCart}
             />
           );
         }
 
+        if (!inline && lang === 'json') {
+          const content = String(children ?? '').trim();
+          if (content.includes('"type": "products"') || content.includes('"type":"products"')) {
+            return (
+              <UIDispatcher
+                rawContent={content}
+                primaryColor={primaryColor}
+                accentColor={accentColor}
+                isStreaming={isStreaming}
+                onAddToCart={onAddToCart}
+              />
+            );
+          }
+        }
+
         if (!inline && lang === 'table-loading') {
           return (
             <div className="my-5 p-6 bg-slate-50 dark:bg-white/5 rounded-xl border border-dashed border-slate-300 dark:border-white/10 flex items-center justify-center gap-3 select-none">
@@ -488,7 +587,7 @@ export function MessageBubble({
         );
       },
     }),
-    [primaryColor, accentColor, isStreaming],
+    [primaryColor, accentColor, isStreaming, onAddToCart],
   );
 
   // ── Render ─────────────────────────────────────────────────────────────────
@@ -536,7 +635,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}
@@ -569,4 +668,4 @@ export function MessageBubble({
       </div>
     </div>
   );
-}
+}

package/src/core/Pipeline.ts

@@ -101,15 +101,66 @@ export class Pipeline {
 
     // Augment system prompt with a Universal Visualization Protocol
     // We use a unique marker to ensure this is only injected once but is ALWAYS present.
-    const CHART_MARKER = '<!-- VIZ_PROTOCOL_V2 -->';
+    const CHART_MARKER = '<!-- UI_PROTOCOL_V5 -->';
     const chartInstruction = `\n\n${CHART_MARKER}
-### MANDATORY VISUALIZATION RULES:
-- If asked for statistics, distribution, or comparisons: You MUST use the \`\`\`chart block.
-- FORMAT: \`\`\`chart { "type": "pie" | "bar" | "line", "data": [ { "label": "X", "value": 10 } ] } \`\`\`
-- RULES:
-  1. ALWAYS include the \`\`\`chart and \`\`\` markers.
-  2. NEVER use text, tables, or ASCII art for charts.
-  3. Output ONLY the chart block. No Python, no text descriptions.`;
+### UNIVERSAL UI PROTOCOL
+When the user asks for a visual representation, comparison, distribution, breakdown, table, list, catalog, products, carousel, stock view, or category summary, you MUST include exactly one \`\`\`ui\`\`\` block.
+
+1. VIEW SELECTION
+   - Use "chart" for distributions, percentages, counts, comparisons, trends, or "show me in a chart".
+   - Use "carousel" for browseable product recommendations or when the user asks to see products/items/cards.
+   - Use "table" for tabular/raw detail, explicit table/list requests, or when there are many attributes to compare.
+
+2. REQUIRED JSON SHAPE
+   {
+     "view": "chart" | "carousel" | "table",
+     "title": "Short heading",
+     "description": "One sentence describing the view",
+     "chartType": "pie" | "bar" | "line",
+     "xAxisKey": "label",
+     "dataKeys": ["value"],
+     "columns": ["name", "category", "price", "stockStatus"],
+     "insights": ["Short takeaway 1", "Short takeaway 2"],
+     "data": []
+   }
+
+3. DATA RULES
+   - Build the UI payload from retrieved context only. Do not invent products, categories, or stock values.
+   - Aggregate raw product rows when the user asks for a chart.
+   - For charts, every row in "data" must be flat JSON with primitive values only.
+   - Prefer { "label": "...", "value": number } for pie charts.
+   - If stock information exists, preserve it in each row with fields like "inStock", "inStockCount", "outOfStockCount", or "stockStatus".
+   - If the user asks to highlight what is in stock, include those stock-related fields in the chart data and mention the pattern in "insights".
+   - For carousel rows, include product-friendly fields such as id, name, brand, price, image, link, category, stockStatus.
+   - For tables, keep "data" row-oriented and include "columns" when possible.
+
+4. FORMAT RULES
+   - Never use ASCII art, markdown tables as the primary answer, or text-only fake charts when a UI block is requested.
+   - Put any short natural-language explanation before or after the \`\`\`ui\`\`\` block, but keep it concise.
+   - Return valid JSON inside the \`\`\`ui\`\`\` block.
+
+5. EXAMPLE
+User: "provide me the distribution of products across categories and highlight which ones are in stock in a pie chart"
+Assistant:
+\`\`\`ui
+{
+  "view": "chart",
+  "title": "Product Distribution Across Categories",
+  "description": "Pie chart showing product count by category with stock signals preserved per slice.",
+  "chartType": "pie",
+  "xAxisKey": "label",
+  "dataKeys": ["value"],
+  "insights": [
+    "Beauty has the highest product count.",
+    "Electronics has the largest number of in-stock products."
+  ],
+  "data": [
+    { "label": "Beauty", "value": 12, "inStockCount": 9, "outOfStockCount": 3 },
+    { "label": "Electronics", "value": 8, "inStockCount": 7, "outOfStockCount": 1 },
+    { "label": "Home", "value": 5, "inStockCount": 2, "outOfStockCount": 3 }
+  ]
+}
+\`\`\``;
 
     if (!this.config.llm.systemPrompt?.includes(CHART_MARKER)) {
       this.config.llm.systemPrompt = (this.config.llm.systemPrompt || '') + chartInstruction;