@retrivora-ai/rag-engine 1.7.8 → 1.8.0

package/src/components/MessageBubble.tsx

@@ -10,6 +10,7 @@ import { SourceCard } from './SourceCard';
 import { ProductCarousel } from './ProductCarousel';
 import { DynamicChart } from './DynamicChart';
 import { VisualizationRenderer } from './VisualizationRenderer';
+import { UITransformationResponse } from '../utils/UITransformer';
 
 // ─── JSON sanitization ────────────────────────────────────────────────────────
 // Order matters: each step is a targeted fix, no step undoes a previous one.
@@ -520,18 +521,25 @@ function UIDispatcher({ rawContent, primaryColor, accentColor, isStreaming, onAd
         config.chartType = (config.chartType as 'pie' | 'bar' | 'line') || 'bar';
       }
 
-      // 2. Auto-Detection: Fill in missing view
-      if (!config.view) {
-        if (config.type === 'products' || Array.isArray(config.items) || hasProductLikeData) {
+      // 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.view = 'table';
         } else {
           config.view = 'table';
         }
@@ -588,12 +596,12 @@ function UIDispatcher({ rawContent, primaryColor, accentColor, isStreaming, onAd
           />
           {hasInsights && (
             <div className="mt-4 flex flex-wrap gap-2 px-2">
-              {config.insights?.map((insight) => (
+              {config.insights?.map((insight, i) => (
                 <span
-                  key={insight}
+                  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`}
                 >
-                  {insight}
+                  {String(insight)}
                 </span>
               ))}
             </div>
@@ -990,9 +998,9 @@ export function MessageBubble({
               )}
 
               {/* Automated UI Fallback (if LLM failed to output structured block but UITransformer found data) */}
-              {!isUser && !structuredContent.payload && message.uiTransformation && (
+              {!isUser && !structuredContent.payload && !!message.uiTransformation && (
                 <div className="mt-4 border-t border-slate-100 dark:border-white/5 pt-4">
-                  <VisualizationRenderer data={message.uiTransformation} />
+                  <VisualizationRenderer data={message.uiTransformation as UITransformationResponse} />
                 </div>
               )}
 

package/src/core/Pipeline.ts

@@ -123,19 +123,19 @@ Classify the query into ONE of the following intents:
 
 ---
 
-## 2. VIEW MAPPING (STRICT)
+## 2. VIEW SELECTION (DYNAMIC)
 
-| Intent   | View       |
-|----------|-----------|
-| explore  | carousel  |
-| analyze  | chart     |
-| compare  | table     |
-| detail   | table     |
+Choose the best primary "view" ("carousel", "chart", or "table") based on the data:
+- TRENDS/GROWTH → "chart" (type: "line")
+- DISTRIBUTIONS/RATIOS → "chart" (type: "pie")
+- COMPARISONS → "chart" (type: "bar")
+- PRODUCT LISTS → "carousel"
+- RAW DATA/SPECS → "table"
 
-⚠️ Override Rules:
-- If query contains "distribution", "percentage", "ratio" → ALWAYS chart
-- If query contains "show products", "list items" → ALWAYS carousel
-- NEVER mix views
+⚠️ Dynamic Overrides:
+- If query is "show products", ALWAYS use carousel.
+- If data is statistical, ALWAYS use a chart.
+- NEVER explain why you chose a view.
 
 ---
 
@@ -193,7 +193,8 @@ Classify the query into ONE of the following intents:
 {
   "label": "string",
   "value": number,
-  "inStock": boolean (optional)
+  "inStockCount": number (optional),
+  "outOfStockCount": number (optional)
 }
 
 ### 🔹 TABLE FORMAT
@@ -204,14 +205,14 @@ Classify the query into ONE of the following intents:
 
 ## 5. DATA RULES
 
-- NEVER hallucinate fields or data
-- ONLY use retrieved vector DB data
-- NO placeholders ("...", "N/A")
-- If image/link missing → REMOVE FIELD
-- Aggregate BEFORE rendering chart
-- IF NO DATA IS FOUND in the retrieved context:
-  → DO NOT output a \`\`\`ui\`\`\` block
-  → Instead, state clearly that no relevant products or data were found.
+- NEVER hallucinate fields or data.
+- ONLY use data provided in the retrieved context.
+- STRICT DATA ISOLATION: The labels and numbers in the EXAMPLES section below are placeholders. NEVER use them.
+- IF NO DATA IS FOUND: You MUST NOT generate a chart. You MUST NOT say "This example assumes" or provide hypothetical numbers. Simply state "No relevant data found in the database." and STOP.
+- NO META-COMMENTARY: NEVER talk about the task itself (e.g., "I've used JSON", "In a real-world app", "Dedicated library"). 
+- NEVER explain YOUR formatting choice.
+- Aggregate BEFORE rendering chart.
+- DYNAMIC INTELLIGENCE: Autonomously extract relevant categories/values from the context and calculate totals for the "data" array based on the user query.
 
 ---
 
@@ -228,11 +229,12 @@ Classify the query into ONE of the following intents:
 
 ## 7. OUTPUT RULES
 
-- ALWAYS return EXACTLY ONE \`\`\`ui\`\`\` block
-- JSON must be VALID
-- No explanation inside block
-- NEVER use ASCII charts, Markdown tables, or text-based drawings for data.
-- If data is tabular or statistical, ALWAYS use the \`\`\`ui\`\`\` block.
+- ALWAYS return EXACTLY ONE \`\`\`ui\`\`\` block.
+- JSON must be VALID.
+- FIELD MAPPING (MANDATORY): Always use "label" for the name/category and "value" for the numeric count.
+- NO xKey or yKeys: Do not include these fields; the UI uses "label" and "value" by default.
+- SILENT DATA: If a chart is provided, DO NOT say "Here is the JSON" or "Below is the data". Simply output the block.
+- TEXT OUTSIDE THE BLOCK: One brief sentence maximum.
 
 ---
 
@@ -243,8 +245,8 @@ User: "show me beauty products"
 \`\`\`ui
 {
   "view": "carousel",
-  "title": "Beauty Products",
-  "description": "Browse available beauty items",
+  "title": "TITLE",
+  "description": "DESCRIPTION",
   "metadata": {
     "intent": "explore",
     "confidence": 0.95
@@ -252,43 +254,41 @@ User: "show me beauty products"
   "carousel": {
     "items": [
       {
-        "id": "1",
-        "name": "Mascara",
-        "brand": "Essence",
-        "price": 9.99,
-        "image": "https://example.com/mascara.jpg",
-        "link": "https://example.com/p1",
+        "id": "ID",
+        "name": "PRODUCT_NAME",
+        "brand": "BRAND",
+        "price": 0,
+        "image": "URL",
+        "link": "URL",
         "inStock": true
       }
     ]
   },
-  "insights": ["Most products are affordable"]
+  "insights": ["INSIGHT"]
 }
 \`\`\`
 
 ---
 
-User: "distribution of products across categories"
+
 
 \`\`\`ui
 {
   "view": "chart",
-  "title": "Product Distribution",
-  "description": "Category-wise product distribution",
+  "title": "TITLE",
+  "description": "DESCRIPTION",
   "metadata": {
     "intent": "analyze",
     "confidence": 0.98
   },
   "chart": {
     "type": "pie",
-    "xKey": "label",
-    "yKeys": ["value"],
     "data": [
-      { "label": "Beauty", "value": 15 },
-      { "label": "Electronics", "value": 10 }
+      { "label": "LABEL_A", "value": 0, "inStockCount": 0, "outOfStockCount": 0 },
+      { "label": "LABEL_B", "value": 0, "inStockCount": 0, "outOfStockCount": 0 }
     ]
   },
-  "insights": ["Beauty dominates inventory"]
+  "insights": ["INSIGHT"]
 }
 \`\`\`
 `;
@@ -487,16 +487,18 @@ User: "distribution of products across categories"
     let sources: VectorMatch[] = [];
     let graphData: GraphSearchResult | undefined;
 
+    let uiTransformation: any;
     for await (const chunk of stream) {
       if (typeof chunk === 'string') {
         reply += chunk;
-      } else if ('sources' in chunk) {
-        sources = chunk.sources;
-        graphData = chunk.graphData;
+      } else if (typeof chunk === 'object' && chunk !== null) {
+        if ('sources' in chunk) sources = chunk.sources;
+        if ('graphData' in chunk) graphData = chunk.graphData;
+        if ('ui_transformation' in chunk) uiTransformation = chunk.ui_transformation;
       }
     }
 
-    return { reply, sources, graphData };
+    return { reply, sources, graphData, ui_transformation: uiTransformation };
   }
 
   /**

package/src/hooks/useRagChat.ts

@@ -27,7 +27,7 @@ import { useStoredMessages } from './useStoredMessages';
 interface SseTextFrame  { type: 'text';     text: string }
 interface SseMetaFrame  { type: 'metadata'; sources?: VectorMatch[] }
 interface SseErrorFrame { type: 'error';    error: string }
-interface SseUiFrame    { type: 'ui_transformation'; data: any }
+interface SseUiFrame    { type: 'ui_transformation'; data: unknown }
 type SseFrame = SseTextFrame | SseMetaFrame | SseErrorFrame | SseUiFrame;
 
 /**
@@ -125,7 +125,7 @@ export function useRagChat(
         const decoder = new TextDecoder();
         let assistantContent = '';
         let sources: VectorMatch[] = [];
-        let uiTransformation: any = null;
+        let uiTransformation: unknown = null;
         // Buffer for partial SSE frames that arrive split across reads
         let buffer = '';
 
@@ -174,7 +174,7 @@ export function useRagChat(
                     ...msg, 
                     content: assistantContent, 
                     sources: sources.length > 0 ? sources : msg.sources,
-                    uiTransformation: uiTransformation || (msg as any).uiTransformation
+                    uiTransformation: uiTransformation || (msg as RagMessage).uiTransformation
                   }
                 : msg
             )

package/src/types/chat.ts

@@ -10,7 +10,7 @@ export interface ChatMessage {
 export interface RagMessage extends ChatMessage {
   id: string;
   sources?: VectorMatch[];
-  uiTransformation?: any;
+  uiTransformation?: unknown;
   createdAt: string;
 }
 

package/src/types/index.ts

@@ -22,6 +22,7 @@ export interface ChatResponse {
   reply: string;
   sources: VectorMatch[];
   graphData?: GraphSearchResult;
+  ui_transformation?: unknown;
 }
 
 export interface GraphNode {

package/src/utils/UITransformer.ts

@@ -27,7 +27,8 @@ export interface UITransformationResponse {
 export interface PieChartData {
   label: string;
   value: number;
-  inStock?: boolean;
+  inStockCount?: number;
+  outOfStockCount?: number;
   [key: string]: unknown;
 }
 
@@ -37,7 +38,8 @@ export interface PieChartData {
 export interface BarChartData {
   category: string;
   value: number;
-  inStock?: boolean;
+  inStockCount?: number;
+  outOfStockCount?: number;
   [key: string]: unknown;
 }
 
@@ -202,11 +204,15 @@ export class UITransformer {
     const categories = this.detectCategories(data);
     const categoryData = this.aggregateByCategory(data, categories);
 
-    const pieData: PieChartData[] = Object.entries(categoryData).map(([label, count]) => ({
-      label,
-      value: count as number,
-      inStock: this.checkStockStatus(label, data),
-    }));
+    const pieData: PieChartData[] = Object.entries(categoryData).map(([label, count]) => {
+      const { inStockCount, outOfStockCount } = this.calculateStockCounts(label, data);
+      return {
+        label,
+        value: count as number,
+        inStockCount,
+        outOfStockCount,
+      };
+    });
 
     return {
       type: 'pie_chart',
@@ -225,11 +231,15 @@ export class UITransformer {
     const categories = this.detectCategories(data);
     const categoryData = this.aggregateByCategory(data, categories);
 
-    const barData: BarChartData[] = Object.entries(categoryData).map(([category, value]) => ({
-      category,
-      value: value as number,
-      inStock: this.checkStockStatus(category, data),
-    }));
+    const barData: BarChartData[] = Object.entries(categoryData).map(([category, value]) => {
+      const { inStockCount, outOfStockCount } = this.calculateStockCounts(category, data);
+      return {
+        category,
+        value: value as number,
+        inStockCount,
+        outOfStockCount,
+      };
+    });
 
     return {
       type: 'bar_chart',
@@ -477,15 +487,25 @@ export class UITransformer {
   }
 
   /**
-   * Helper: Check stock status
+   * Helper: Calculate stock counts by category
    */
-  private static checkStockStatus(category: string, data: VectorMatch[]): boolean {
-    const item = data.find(d => {
+  private static calculateStockCounts(category: string, data: VectorMatch[]): { inStockCount: number; outOfStockCount: number } {
+    let inStock = 0;
+    let outOfStock = 0;
+
+    data.forEach(d => {
       const meta = d.metadata || {};
-      return meta.category === category || meta.type === category;
+      const itemCategory = (meta.category || meta.type || 'Other') as string;
+      if (itemCategory === category) {
+        if (this.determineStockStatus(d)) {
+          inStock++;
+        } else {
+          outOfStock++;
+        }
+      }
     });
 
-    return this.determineStockStatus(item || ({} as VectorMatch));
+    return { inStockCount: inStock, outOfStockCount: outOfStock };
   }
 
   /**