@retrivora-ai/rag-engine 1.5.4 → 1.5.6

package/dist/{chunk-BLLMNP77.mjs → chunk-ID2Q4CF7.mjs}

@@ -2259,23 +2259,70 @@ var Pipeline = class {
   async initialize() {
     var _a, _b;
     if (this.initialised) return;
-    const CHART_MARKER = "<!-- UI_PROTOCOL_V3 -->";
+    const CHART_MARKER = "<!-- UI_PROTOCOL_V5 -->";
     const chartInstruction = `
 
 ${CHART_MARKER}
-### UNIVERSAL UI PROTOCOL:
-You have a specialized UI system. For any structured data (charts, product lists, or tables), you MUST use a single \`\`\`ui\`\`\` block.
-1. DECIDE the best "view" for the user's query:
-   - "chart": For statistics, distributions, or comparisons. (Requires "chartType": "pie" | "bar" | "line")
-   - "carousel": For browsing specific product items.
-   - "table": For detailed raw data comparisons.
-2. OUTPUT a \`\`\`ui\`\`\` block with this schema:
+### 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",
-     "chartType": "pie" | "bar" | "line" (only for view: "chart"),
-     "data": [ ... objects ... ]
+     "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. RULES: Valid JSON only. Data must be FLAT. Never draw charts/tables with text. Choose ONLY the most useful view.`;
+
+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.
+   - If the user explicitly asks for a pie chart, return "view": "chart" with "chartType": "pie", not a table fallback.
+   - Do not prefix the JSON with labels like "Table View", "Alternative", or explanatory text inside the code 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 (!((_a = this.config.llm.systemPrompt) == null ? void 0 : _a.includes(CHART_MARKER))) {
       this.config.llm.systemPrompt = (this.config.llm.systemPrompt || "") + chartInstruction;
     }

package/dist/handlers/index.js

@@ -3822,23 +3822,70 @@ var Pipeline = class {
   async initialize() {
     var _a, _b;
     if (this.initialised) return;
-    const CHART_MARKER = "<!-- UI_PROTOCOL_V3 -->";
+    const CHART_MARKER = "<!-- UI_PROTOCOL_V5 -->";
     const chartInstruction = `
 
 ${CHART_MARKER}
-### UNIVERSAL UI PROTOCOL:
-You have a specialized UI system. For any structured data (charts, product lists, or tables), you MUST use a single \`\`\`ui\`\`\` block.
-1. DECIDE the best "view" for the user's query:
-   - "chart": For statistics, distributions, or comparisons. (Requires "chartType": "pie" | "bar" | "line")
-   - "carousel": For browsing specific product items.
-   - "table": For detailed raw data comparisons.
-2. OUTPUT a \`\`\`ui\`\`\` block with this schema:
+### 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",
-     "chartType": "pie" | "bar" | "line" (only for view: "chart"),
-     "data": [ ... objects ... ]
+     "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. RULES: Valid JSON only. Data must be FLAT. Never draw charts/tables with text. Choose ONLY the most useful view.`;
+
+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.
+   - If the user explicitly asks for a pie chart, return "view": "chart" with "chartType": "pie", not a table fallback.
+   - Do not prefix the JSON with labels like "Table View", "Alternative", or explanatory text inside the code 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 (!((_a = this.config.llm.systemPrompt) == null ? void 0 : _a.includes(CHART_MARKER))) {
       this.config.llm.systemPrompt = (this.config.llm.systemPrompt || "") + chartInstruction;
     }

package/dist/handlers/index.mjs

@@ -9,7 +9,7 @@ import {
   sseFrame,
   sseMetaFrame,
   sseTextFrame
-} from "../chunk-BLLMNP77.mjs";
+} from "../chunk-ID2Q4CF7.mjs";
 import "../chunk-YLTMFW4M.mjs";
 import "../chunk-X4TOT24V.mjs";
 export {

package/dist/index.d.mts

@@ -3,6 +3,7 @@ import { P as Product, U as UIConfig, R as RagMessage, V as VectorMatch, a as Us
 export { C as ChatMessage, c as ChatOptions, d as ChatResponse, E as EmbeddingConfig, e as EmbeddingProvider, I as IngestDocument, L as LLMConfig, f as LLMProvider, g as RAGConfig, h as RagConfig, i as UpsertDocument, j as VectorDBConfig, k as VectorDBProvider } from './index-Cti1u0y1.mjs';
 export { C as Chunk, a as ChunkOptions, E as EmbedOptions, I as ILLMProvider } from './DocumentChunker-D1dg5iCi.mjs';
 
+type ChatViewportSize = 'compact' | 'medium' | 'large';
 interface ChatWindowProps {
     /** Additional className for the wrapper div */
     className?: string;
@@ -38,6 +39,7 @@ interface MessageBubbleProps {
     primaryColor: string;
     accentColor: string;
     onAddToCart?: (product: Product) => void;
+    viewportSize?: ChatViewportSize;
 }
 interface ProductCardProps {
     product: Product;
@@ -79,7 +81,7 @@ declare function ChatWindow({ className, style, onClose, showClose, onResizeStar
 
 declare function DocumentUpload({ namespace, onUploadComplete, className }: DocumentUploadProps): React.JSX.Element;
 
-declare function MessageBubble({ message, sources, isStreaming, primaryColor, accentColor, onAddToCart, }: MessageBubbleProps): React.JSX.Element;
+declare function MessageBubble({ message, sources, isStreaming, primaryColor, accentColor, onAddToCart, viewportSize, }: MessageBubbleProps): React.JSX.Element;
 
 declare function SourceCard({ source, index }: SourceCardProps): React.JSX.Element;
 

package/dist/index.d.ts

@@ -3,6 +3,7 @@ import { P as Product, U as UIConfig, R as RagMessage, V as VectorMatch, a as Us
 export { C as ChatMessage, c as ChatOptions, d as ChatResponse, E as EmbeddingConfig, e as EmbeddingProvider, I as IngestDocument, L as LLMConfig, f as LLMProvider, g as RAGConfig, h as RagConfig, i as UpsertDocument, j as VectorDBConfig, k as VectorDBProvider } from './index-Cti1u0y1.js';
 export { C as Chunk, a as ChunkOptions, E as EmbedOptions, I as ILLMProvider } from './DocumentChunker-BXOUMKoP.js';
 
+type ChatViewportSize = 'compact' | 'medium' | 'large';
 interface ChatWindowProps {
     /** Additional className for the wrapper div */
     className?: string;
@@ -38,6 +39,7 @@ interface MessageBubbleProps {
     primaryColor: string;
     accentColor: string;
     onAddToCart?: (product: Product) => void;
+    viewportSize?: ChatViewportSize;
 }
 interface ProductCardProps {
     product: Product;
@@ -79,7 +81,7 @@ declare function ChatWindow({ className, style, onClose, showClose, onResizeStar
 
 declare function DocumentUpload({ namespace, onUploadComplete, className }: DocumentUploadProps): React.JSX.Element;
 
-declare function MessageBubble({ message, sources, isStreaming, primaryColor, accentColor, onAddToCart, }: MessageBubbleProps): React.JSX.Element;
+declare function MessageBubble({ message, sources, isStreaming, primaryColor, accentColor, onAddToCart, viewportSize, }: MessageBubbleProps): React.JSX.Element;
 
 declare function SourceCard({ source, index }: SourceCardProps): React.JSX.Element;