@retrivora-ai/rag-engine 1.7.0 → 1.7.2

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],
@@ -728,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`;
       });
     }
 
@@ -840,6 +824,7 @@ export function MessageBubble({
               primaryColor={primaryColor}
               accentColor={accentColor}
               isStreaming={isStreaming}
+              onAddToCart={onAddToCart}
               viewportSize={viewportSize}
             />
           );
@@ -854,6 +839,7 @@ export function MessageBubble({
                 primaryColor={primaryColor}
                 accentColor={accentColor}
                 isStreaming={isStreaming}
+                onAddToCart={onAddToCart}
                 viewportSize={viewportSize}
               />
             );
@@ -869,6 +855,7 @@ export function MessageBubble({
                 primaryColor={primaryColor}
                 accentColor={accentColor}
                 isStreaming={isStreaming}
+                onAddToCart={onAddToCart}
                 viewportSize={viewportSize}
               />
             );
@@ -895,7 +882,7 @@ export function MessageBubble({
         );
       },
     }),
-    [primaryColor, accentColor, isStreaming, viewportSize],
+    [primaryColor, accentColor, isStreaming, onAddToCart, viewportSize],
   );
 
   // ── Render ─────────────────────────────────────────────────────────────────
@@ -937,6 +924,7 @@ export function MessageBubble({
                   primaryColor={primaryColor}
                   accentColor={accentColor}
                   isStreaming={isStreaming}
+                  onAddToCart={onAddToCart}
                   viewportSize={viewportSize}
                 />
               )}
@@ -955,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];
+}

package/src/core/Pipeline.ts

@@ -101,16 +101,15 @@ 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 = '<!-- UI_PROTOCOL_V7 -->';
+    const CHART_MARKER = '<!-- UI_PROTOCOL_V6 -->';
     const chartInstruction = `\n\n${CHART_MARKER}
-### UNIVERSAL UI PROTOCOL (MANDATORY)
-CRITICAL: When providing visual data (carousels, charts, tables), you MUST wrap the JSON payload in a \`\`\`ui\`\`\` code block. 
-NEVER output naked JSON. If you provide a visualization, do not also provide a markdown table of the same data unless explicitly asked.
+### 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 "carousel" for browsing products, items, or catalogs. (e.g., "show me beauty products").
-   - Use "chart" ONLY for numerical aggregations (counts, sums, percentages).
-   - Use "table" for technical specs or row-heavy comparisons.
+   - Use "carousel" for browsing specific products, items, or a catalog. This is the DEFAULT for "show me", "what are", or "find me" requests for a specific category (e.g. "beauty").
+   - Use "chart" ONLY for numerical aggregations: distributions, percentages, counts, comparisons over time, or trends (e.g. "how many beauty products?").
+   - Use "table" for detailed technical specifications, row-heavy comparisons, or when the user explicitly asks for a list/table format.
 
 2. REQUIRED JSON SHAPE
    {
@@ -118,31 +117,52 @@ NEVER output naked JSON. If you provide a visualization, do not also provide a m
      "title": "Short heading",
      "description": "One sentence describing the view",
      "chartType": "pie" | "bar" | "line", // Required if view is "chart"
-     "data": [] // Array of objects
+     "xAxisKey": "label",
+     "dataKeys": ["value"],
+     "columns": ["dynamicFieldKey1", "dynamicFieldKey2"],
+     "insights": ["Short takeaway 1", "Short takeaway 2"],
+     "data": []
    }
 
 3. DATA RULES
-   - Build the UI payload from retrieved context and metadata.
-   - For CAROUSEL: "data" items MUST have { id, name, brand, price, image, link }.
-   - IMPORTANT: Extract "image" and "price" from Source metadata. Image URLs are often in fields like "images", "thumbnail", or "img".
+   - Build the UI payload from retrieved context only. Do not invent products or values.
+   - For CAROUSEL: "data" must be a list of product objects (id, name, brand, price, image, link).
+   - For CHART: "data" must be aggregated counts or sums. Never put raw product lists in a chart view.
+   - If the user asks for "products in beauty", do NOT return a pie chart of categories; return a carousel of the beauty products themselves.
 
 4. FORMAT RULES
-   - Wrap the JSON in \`\`\`ui ... \`\`\` blocks.
-   - Place natural language text OUTSIDE the block.
+   - Return valid JSON inside the \`\`\`ui\`\`\` block.
+   - Put natural language explanation before or after the block, not inside.
 
-5. EXAMPLE
-User: "find me beauty products"
-Assistant: "I found several beauty products in our catalog:"
+5. EXAMPLES
+User: "show me beauty products"
+Assistant:
 \`\`\`ui
 {
   "view": "carousel",
   "title": "Beauty Products",
-  "description": "Latest skincare and makeup items.",
+  "description": "Browse our latest skincare and makeup collection.",
   "data": [
-    { "id": "1", "name": "Mascara", "brand": "Essence", "price": "$9.99", "image": "https://placehold.co/600x400?text=Product", "link": "https://example.com/product" }
+    { "id": "1", "name": "Mascara", "brand": "Essence", "price": "$9.99", "image": "...", "link": "..." },
+    { "id": "2", "name": "Lipstick", "brand": "Chic", "price": "$12.99", "image": "...", "link": "..." }
   ]
 }
 \`\`\`
+
+User: "breakdown of products by category"
+Assistant:
+\`\`\`ui
+{
+  "view": "chart",
+  "title": "Category Breakdown",
+  "chartType": "pie",
+  "xAxisKey": "label",
+  "dataKeys": ["value"],
+  "data": [
+    { "label": "Beauty", "value": 15 },
+    { "label": "Fragrances", "value": 8 }
+  ]
+}
 \`\`\``;
 
     if (!this.config.llm.systemPrompt?.includes(CHART_MARKER)) {
@@ -387,7 +407,7 @@ Assistant: "I found several beauty products in our catalog:"
 
       // 4. Context Augmentation
       let context = sources.length
-        ? sources.map((m, i) => `[Source ${i + 1}]\nContent: ${m.content}\nMetadata: ${JSON.stringify(m.metadata)}`).join('\n\n---\n\n')
+        ? sources.map((m, i) => `[Source ${i + 1}]\n${m.content}`).join('\n\n---\n\n')
         : 'No relevant context found.';
 
       if (graphData && graphData.nodes.length > 0) {