@retrivora-ai/rag-engine 1.6.8 → 1.7.0

package/dist/{chunk-J7BCIPO2.mjs → chunk-OHXRQTQH.mjs}

@@ -2259,17 +2259,18 @@ var Pipeline = class {
   async initialize() {
     var _a, _b;
     if (this.initialised) return;
-    const CHART_MARKER = "<!-- UI_PROTOCOL_V6 -->";
+    const CHART_MARKER = "<!-- UI_PROTOCOL_V7 -->";
     const chartInstruction = `
 
 ${CHART_MARKER}
-### 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.
+### 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.
 
 1. VIEW SELECTION
-   - 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.
+   - 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.
 
 2. REQUIRED JSON SHAPE
    {
@@ -2277,52 +2278,31 @@ When the user asks for a visual representation, comparison, distribution, breakd
      "title": "Short heading",
      "description": "One sentence describing the view",
      "chartType": "pie" | "bar" | "line", // Required if view is "chart"
-     "xAxisKey": "label",
-     "dataKeys": ["value"],
-     "columns": ["dynamicFieldKey1", "dynamicFieldKey2"],
-     "insights": ["Short takeaway 1", "Short takeaway 2"],
-     "data": []
+     "data": [] // Array of objects
    }
 
 3. DATA RULES
-   - 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.
+   - 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".
 
 4. FORMAT RULES
-   - Return valid JSON inside the \`\`\`ui\`\`\` block.
-   - Put natural language explanation before or after the block, not inside.
+   - Wrap the JSON in \`\`\`ui ... \`\`\` blocks.
+   - Place natural language text OUTSIDE the block.
 
-5. EXAMPLES
-User: "show me beauty products"
-Assistant:
+5. EXAMPLE
+User: "find me beauty products"
+Assistant: "I found several beauty products in our catalog:"
 \`\`\`ui
 {
   "view": "carousel",
   "title": "Beauty Products",
-  "description": "Browse our latest skincare and makeup collection.",
+  "description": "Latest skincare and makeup items.",
   "data": [
-    { "id": "1", "name": "Mascara", "brand": "Essence", "price": "$9.99", "image": "...", "link": "..." },
-    { "id": "2", "name": "Lipstick", "brand": "Chic", "price": "$12.99", "image": "...", "link": "..." }
+    { "id": "1", "name": "Mascara", "brand": "Essence", "price": "$9.99", "image": "https://placehold.co/600x400?text=Product", "link": "https://example.com/product" }
   ]
 }
 \`\`\`
-
-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 (!((_a = this.config.llm.systemPrompt) == null ? void 0 : _a.includes(CHART_MARKER))) {
       this.config.llm.systemPrompt = (this.config.llm.systemPrompt || "") + chartInstruction;
@@ -2531,7 +2511,8 @@ Assistant:
           sources = sources.slice(0, topK);
         }
         let context = sources.length ? sources.map((m, i) => `[Source ${i + 1}]
-${m.content}`).join("\n\n---\n\n") : "No relevant context found.";
+Content: ${m.content}
+Metadata: ${JSON.stringify(m.metadata)}`).join("\n\n---\n\n") : "No relevant context found.";
         if (graphData && graphData.nodes.length > 0) {
           const graphContext = graphData.nodes.map(
             (n) => `Entity: ${n.label} (${n.id})${n.properties ? " - " + JSON.stringify(n.properties) : ""}`

package/dist/handlers/index.js

@@ -3822,17 +3822,18 @@ var Pipeline = class {
   async initialize() {
     var _a, _b;
     if (this.initialised) return;
-    const CHART_MARKER = "<!-- UI_PROTOCOL_V6 -->";
+    const CHART_MARKER = "<!-- UI_PROTOCOL_V7 -->";
     const chartInstruction = `
 
 ${CHART_MARKER}
-### 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.
+### 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.
 
 1. VIEW SELECTION
-   - 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.
+   - 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.
 
 2. REQUIRED JSON SHAPE
    {
@@ -3840,52 +3841,31 @@ When the user asks for a visual representation, comparison, distribution, breakd
      "title": "Short heading",
      "description": "One sentence describing the view",
      "chartType": "pie" | "bar" | "line", // Required if view is "chart"
-     "xAxisKey": "label",
-     "dataKeys": ["value"],
-     "columns": ["dynamicFieldKey1", "dynamicFieldKey2"],
-     "insights": ["Short takeaway 1", "Short takeaway 2"],
-     "data": []
+     "data": [] // Array of objects
    }
 
 3. DATA RULES
-   - 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.
+   - 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".
 
 4. FORMAT RULES
-   - Return valid JSON inside the \`\`\`ui\`\`\` block.
-   - Put natural language explanation before or after the block, not inside.
+   - Wrap the JSON in \`\`\`ui ... \`\`\` blocks.
+   - Place natural language text OUTSIDE the block.
 
-5. EXAMPLES
-User: "show me beauty products"
-Assistant:
+5. EXAMPLE
+User: "find me beauty products"
+Assistant: "I found several beauty products in our catalog:"
 \`\`\`ui
 {
   "view": "carousel",
   "title": "Beauty Products",
-  "description": "Browse our latest skincare and makeup collection.",
+  "description": "Latest skincare and makeup items.",
   "data": [
-    { "id": "1", "name": "Mascara", "brand": "Essence", "price": "$9.99", "image": "...", "link": "..." },
-    { "id": "2", "name": "Lipstick", "brand": "Chic", "price": "$12.99", "image": "...", "link": "..." }
+    { "id": "1", "name": "Mascara", "brand": "Essence", "price": "$9.99", "image": "https://placehold.co/600x400?text=Product", "link": "https://example.com/product" }
   ]
 }
 \`\`\`
-
-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 (!((_a = this.config.llm.systemPrompt) == null ? void 0 : _a.includes(CHART_MARKER))) {
       this.config.llm.systemPrompt = (this.config.llm.systemPrompt || "") + chartInstruction;
@@ -4094,7 +4074,8 @@ Assistant:
           sources = sources.slice(0, topK);
         }
         let context = sources.length ? sources.map((m, i) => `[Source ${i + 1}]
-${m.content}`).join("\n\n---\n\n") : "No relevant context found.";
+Content: ${m.content}
+Metadata: ${JSON.stringify(m.metadata)}`).join("\n\n---\n\n") : "No relevant context found.";
         if (graphData && graphData.nodes.length > 0) {
           const graphContext = graphData.nodes.map(
             (n) => `Entity: ${n.label} (${n.id})${n.properties ? " - " + JSON.stringify(n.properties) : ""}`

package/dist/handlers/index.mjs

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

package/dist/index.js

@@ -405,7 +405,7 @@ function sanitizeJson(raw) {
       return `: ${result}`;
     }
   );
-  s = s.replace(/\/\/[^\n]*/g, "");
+  s = s.replace(/(^|[^\:])\/\/[^\n]*/g, "$1");
   s = s.replace(/([{,]\s*)([A-Za-z_$][A-Za-z0-9_$]*)\s*:/g, '$1"$2":');
   s = s.replace(/'([^'\\]*(?:\\.[^'\\]*)*)'/g, '"$1"');
   s = s.replace(/,\s*([}\]])/g, "$1");
@@ -456,7 +456,7 @@ function extractLikelyJsonBlock(raw) {
   return trimmed.slice(Math.min(...starts));
 }
 function looksLikeStructuredPayload(raw) {
-  return /"?(view|chartType|type|data|items|rows|products|results)"?\s*:/.test(raw);
+  return /"?(view|chartType|type|data|items|rows|products|results|columns|xAxisKey)"?\s*:/.test(raw);
 }
 function stripMarkdownTables(raw) {
   return raw.replace(
@@ -535,12 +535,23 @@ function isLikelyUiOnlyMessage(text) {
   return trimmed.length === 0 || /^(chart data|table data|visualization|visual representation|product catalog|product recommendations|catalog summary)\s*:?\s*$/i.test(trimmed);
 }
 function resolveImage(data) {
-  for (const key of ["image", "img", "thumbnail"]) {
+  const candidates = ["image", "img", "thumbnail", "url", "picture", "link"];
+  for (const key of candidates) {
     const v = data[key];
-    if (typeof v === "string" && v) return v;
+    if (typeof v === "string" && v.startsWith("http")) return v;
+    if (v && typeof v === "object" && !Array.isArray(v)) {
+      const subVal = v.url || v.link || v.src;
+      if (typeof subVal === "string" && subVal.startsWith("http")) return subVal;
+    }
   }
-  if (Array.isArray(data.images) && typeof data.images[0] === "string") {
-    return data.images[0];
+  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;
+      }
+    }
   }
   return void 0;
 }
@@ -643,10 +654,13 @@ function resolveStructuredRows(config) {
   if (Array.isArray(config.results) && config.results.length > 0) return config.results;
   return [];
 }
-function UIDispatcher({ rawContent, primaryColor, accentColor, isStreaming, onAddToCart, viewportSize = "large" }) {
+function UIDispatcher({ rawContent, primaryColor, accentColor, isStreaming, viewportSize = "large" }) {
   var _a;
   const result = import_react5.default.useMemo(() => {
-    if (isStreaming) return { loading: true };
+    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 };
+    }
     try {
       const clean = rawContent.replace(/^```[a-z]*\s*/i, "").replace(/```\s*$/, "").trim();
       const parsed = JSON.parse(sanitizeJson(extractLikelyJsonBlock(clean)));
@@ -679,6 +693,7 @@ function UIDispatcher({ rawContent, primaryColor, accentColor, isStreaming, onAd
     }
   }, [rawContent, isStreaming]);
   if ("loading" in result) {
+    if (result.silent) return null;
     return /* @__PURE__ */ import_react5.default.createElement("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" }, /* @__PURE__ */ import_react5.default.createElement("div", { className: "w-5 h-5 border-2 border-indigo-500 border-t-transparent rounded-full animate-spin" }), /* @__PURE__ */ import_react5.default.createElement("p", { className: "text-xs text-slate-500 font-medium italic" }, "Preparing view..."));
   }
   if ("error" in result) {
@@ -713,12 +728,7 @@ function UIDispatcher({ rawContent, primaryColor, accentColor, isStreaming, onAd
         insight
       ))));
     case "carousel":
-      return /* @__PURE__ */ import_react5.default.createElement("div", { className: "my-4" }, config.title && /* @__PURE__ */ import_react5.default.createElement("h4", { className: `${isCompact ? "mb-1.5 text-[11px]" : "mb-2 text-xs"} font-semibold text-slate-500` }, config.title), hasDescription && /* @__PURE__ */ import_react5.default.createElement("p", { className: `mb-3 ${isCompact ? "text-xs" : "text-sm"} text-slate-500 dark:text-white/60` }, config.description), /* @__PURE__ */ import_react5.default.createElement(ProductCarousel, { products: config.data.map((item) => {
-        var _a2;
-        return __spreadProps(__spreadValues({}, item), {
-          image: (_a2 = item.image) != null ? _a2 : typeof resolveImage === "function" ? resolveImage(item) : void 0
-        });
-      }), primaryColor, onAddToCart }));
+      return /* @__PURE__ */ import_react5.default.createElement("div", { className: "my-4" }, config.title && /* @__PURE__ */ import_react5.default.createElement("h4", { className: `${isCompact ? "mb-1.5 text-[11px]" : "mb-2 text-xs"} font-semibold text-slate-500` }, config.title), hasDescription && /* @__PURE__ */ import_react5.default.createElement("p", { className: `mb-3 ${isCompact ? "text-xs" : "text-sm"} text-slate-500 dark:text-white/60` }, config.description));
     case "table":
       return /* @__PURE__ */ import_react5.default.createElement("div", { className: `${isCompact ? "my-3 p-3 max-h-[320px]" : "my-4 p-4 max-h-[400px]"} bg-white dark:bg-slate-900 rounded-xl border border-slate-200 dark:border-white/10 shadow-sm overflow-auto` }, config.title && /* @__PURE__ */ import_react5.default.createElement("h4", { className: `${isCompact ? "text-[11px]" : "text-xs"} font-semibold text-slate-500 mb-2` }, config.title), hasDescription && /* @__PURE__ */ import_react5.default.createElement("p", { className: `mb-3 ${isCompact ? "text-xs" : "text-sm"} text-slate-500 dark:text-white/60` }, config.description), /* @__PURE__ */ import_react5.default.createElement(DataTable, { config: {
         type: "table",
@@ -746,10 +756,6 @@ function MessageBubble({
   const isCompact = viewportSize === "compact";
   const isMedium = viewportSize === "medium";
   const [showSources, setShowSources] = import_react5.default.useState(false);
-  const hasStructuredProductBlock = import_react5.default.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 = import_react5.default.useMemo(
     () => isUser ? { payload: null, text: message.content } : extractStructuredPayload(message.content),
     [isUser, message.content]
@@ -841,15 +847,16 @@ function MessageBubble({
     let raw = structuredContent.payload ? structuredContent.text : cleanContent || message.content;
     const hasStructuredUiBlock = Boolean(structuredContent.payload) || /```(?:ui|json|chart)\s*[\s\S]*?"(?:view|chartType|type|data|items|rows|products|results)"\s*:/i.test(raw);
     raw = raw.replace(/([^\n])\n\|/g, "$1\n\n|").replace(/(\|[^\n]*\|)\n\n+(?=\|)/g, "$1\n");
-    if (!isStreaming) {
-      raw = raw.replace(/(?:^|\n)\s*\{[\s\S]*\}\s*(?:\n|$)/g, (match) => {
+    if (!isStreaming && !hasStructuredUiBlock) {
+      raw = raw.replace(/(?:^|\n)\s*(\{[\s\S]+?\})(?:\s*\n|$)/g, (match, body) => {
         if (match.includes("```")) return match;
-        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";
+        const trimmedBody = body.trim();
+        if (!looksLikeStructuredPayload(trimmedBody)) return match;
+        const type = trimmedBody.includes('"view"') || trimmedBody.includes('"chartType"') || trimmedBody.includes('"type"') || trimmedBody.includes('"xAxisKey"') ? "ui" : "json";
         return `
 
 \`\`\`${type}
-${match.trim()}
+${trimmedBody}
 \`\`\`
 
 `;
@@ -949,7 +956,6 @@ ${match.trim()}
               primaryColor,
               accentColor,
               isStreaming,
-              onAddToCart,
               viewportSize
             }
           );
@@ -964,7 +970,6 @@ ${match.trim()}
                 primaryColor,
                 accentColor,
                 isStreaming,
-                onAddToCart,
                 viewportSize
               }
             );
@@ -980,7 +985,6 @@ ${match.trim()}
                 primaryColor,
                 accentColor,
                 isStreaming,
-                onAddToCart,
                 viewportSize
               }
             );
@@ -992,7 +996,7 @@ ${match.trim()}
         return /* @__PURE__ */ import_react5.default.createElement("code", __spreadValues({ className }, props), typeof children === "string" || typeof children === "number" ? children : JSON.stringify(children));
       }
     }),
-    [primaryColor, accentColor, isStreaming, onAddToCart, viewportSize]
+    [primaryColor, accentColor, isStreaming, viewportSize]
   );
   return /* @__PURE__ */ import_react5.default.createElement("div", { className: `flex ${isCompact ? "gap-2" : "gap-3"} ${isUser ? "flex-row-reverse" : "flex-row"} items-start` }, /* @__PURE__ */ import_react5.default.createElement(
     "div",
@@ -1014,11 +1018,10 @@ ${match.trim()}
         primaryColor,
         accentColor,
         isStreaming,
-        onAddToCart,
         viewportSize
       }
     ), !shouldRenderStructuredOnly && /* @__PURE__ */ import_react5.default.createElement(import_react_markdown.default, { remarkPlugins: [import_remark_gfm.default], components: markdownComponents }, processedMarkdown), isStreaming && message.content && /* @__PURE__ */ import_react5.default.createElement("span", { className: "inline-block w-1.5 h-3.5 ml-1 bg-emerald-500 animate-pulse align-middle" }))
-  ), !isUser && !hasStructuredProductBlock && allProducts.length > 0 && /* @__PURE__ */ import_react5.default.createElement("div", { className: "w-full mt-1" }, /* @__PURE__ */ import_react5.default.createElement(
+  ), !isUser && allProducts.length > 0 && /* @__PURE__ */ import_react5.default.createElement("div", { className: "w-full mt-1" }, /* @__PURE__ */ import_react5.default.createElement(
     ProductCarousel,
     {
       products: allProducts,

package/dist/index.mjs

@@ -368,7 +368,7 @@ function sanitizeJson(raw) {
       return `: ${result}`;
     }
   );
-  s = s.replace(/\/\/[^\n]*/g, "");
+  s = s.replace(/(^|[^\:])\/\/[^\n]*/g, "$1");
   s = s.replace(/([{,]\s*)([A-Za-z_$][A-Za-z0-9_$]*)\s*:/g, '$1"$2":');
   s = s.replace(/'([^'\\]*(?:\\.[^'\\]*)*)'/g, '"$1"');
   s = s.replace(/,\s*([}\]])/g, "$1");
@@ -419,7 +419,7 @@ function extractLikelyJsonBlock(raw) {
   return trimmed.slice(Math.min(...starts));
 }
 function looksLikeStructuredPayload(raw) {
-  return /"?(view|chartType|type|data|items|rows|products|results)"?\s*:/.test(raw);
+  return /"?(view|chartType|type|data|items|rows|products|results|columns|xAxisKey)"?\s*:/.test(raw);
 }
 function stripMarkdownTables(raw) {
   return raw.replace(
@@ -498,12 +498,23 @@ function isLikelyUiOnlyMessage(text) {
   return trimmed.length === 0 || /^(chart data|table data|visualization|visual representation|product catalog|product recommendations|catalog summary)\s*:?\s*$/i.test(trimmed);
 }
 function resolveImage(data) {
-  for (const key of ["image", "img", "thumbnail"]) {
+  const candidates = ["image", "img", "thumbnail", "url", "picture", "link"];
+  for (const key of candidates) {
     const v = data[key];
-    if (typeof v === "string" && v) return v;
+    if (typeof v === "string" && v.startsWith("http")) return v;
+    if (v && typeof v === "object" && !Array.isArray(v)) {
+      const subVal = v.url || v.link || v.src;
+      if (typeof subVal === "string" && subVal.startsWith("http")) return subVal;
+    }
   }
-  if (Array.isArray(data.images) && typeof data.images[0] === "string") {
-    return data.images[0];
+  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;
+      }
+    }
   }
   return void 0;
 }
@@ -606,10 +617,13 @@ function resolveStructuredRows(config) {
   if (Array.isArray(config.results) && config.results.length > 0) return config.results;
   return [];
 }
-function UIDispatcher({ rawContent, primaryColor, accentColor, isStreaming, onAddToCart, viewportSize = "large" }) {
+function UIDispatcher({ rawContent, primaryColor, accentColor, isStreaming, viewportSize = "large" }) {
   var _a;
   const result = React5.useMemo(() => {
-    if (isStreaming) return { loading: true };
+    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 };
+    }
     try {
       const clean = rawContent.replace(/^```[a-z]*\s*/i, "").replace(/```\s*$/, "").trim();
       const parsed = JSON.parse(sanitizeJson(extractLikelyJsonBlock(clean)));
@@ -642,6 +656,7 @@ function UIDispatcher({ rawContent, primaryColor, accentColor, isStreaming, onAd
     }
   }, [rawContent, isStreaming]);
   if ("loading" in result) {
+    if (result.silent) return null;
     return /* @__PURE__ */ React5.createElement("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" }, /* @__PURE__ */ React5.createElement("div", { className: "w-5 h-5 border-2 border-indigo-500 border-t-transparent rounded-full animate-spin" }), /* @__PURE__ */ React5.createElement("p", { className: "text-xs text-slate-500 font-medium italic" }, "Preparing view..."));
   }
   if ("error" in result) {
@@ -676,12 +691,7 @@ function UIDispatcher({ rawContent, primaryColor, accentColor, isStreaming, onAd
         insight
       ))));
     case "carousel":
-      return /* @__PURE__ */ React5.createElement("div", { className: "my-4" }, config.title && /* @__PURE__ */ React5.createElement("h4", { className: `${isCompact ? "mb-1.5 text-[11px]" : "mb-2 text-xs"} font-semibold text-slate-500` }, config.title), hasDescription && /* @__PURE__ */ React5.createElement("p", { className: `mb-3 ${isCompact ? "text-xs" : "text-sm"} text-slate-500 dark:text-white/60` }, config.description), /* @__PURE__ */ React5.createElement(ProductCarousel, { products: config.data.map((item) => {
-        var _a2;
-        return __spreadProps(__spreadValues({}, item), {
-          image: (_a2 = item.image) != null ? _a2 : typeof resolveImage === "function" ? resolveImage(item) : void 0
-        });
-      }), primaryColor, onAddToCart }));
+      return /* @__PURE__ */ React5.createElement("div", { className: "my-4" }, config.title && /* @__PURE__ */ React5.createElement("h4", { className: `${isCompact ? "mb-1.5 text-[11px]" : "mb-2 text-xs"} font-semibold text-slate-500` }, config.title), hasDescription && /* @__PURE__ */ React5.createElement("p", { className: `mb-3 ${isCompact ? "text-xs" : "text-sm"} text-slate-500 dark:text-white/60` }, config.description));
     case "table":
       return /* @__PURE__ */ React5.createElement("div", { className: `${isCompact ? "my-3 p-3 max-h-[320px]" : "my-4 p-4 max-h-[400px]"} bg-white dark:bg-slate-900 rounded-xl border border-slate-200 dark:border-white/10 shadow-sm overflow-auto` }, config.title && /* @__PURE__ */ React5.createElement("h4", { className: `${isCompact ? "text-[11px]" : "text-xs"} font-semibold text-slate-500 mb-2` }, config.title), hasDescription && /* @__PURE__ */ React5.createElement("p", { className: `mb-3 ${isCompact ? "text-xs" : "text-sm"} text-slate-500 dark:text-white/60` }, config.description), /* @__PURE__ */ React5.createElement(DataTable, { config: {
         type: "table",
@@ -709,10 +719,6 @@ function MessageBubble({
   const isCompact = viewportSize === "compact";
   const isMedium = viewportSize === "medium";
   const [showSources, setShowSources] = React5.useState(false);
-  const hasStructuredProductBlock = React5.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 = React5.useMemo(
     () => isUser ? { payload: null, text: message.content } : extractStructuredPayload(message.content),
     [isUser, message.content]
@@ -804,15 +810,16 @@ function MessageBubble({
     let raw = structuredContent.payload ? structuredContent.text : cleanContent || message.content;
     const hasStructuredUiBlock = Boolean(structuredContent.payload) || /```(?:ui|json|chart)\s*[\s\S]*?"(?:view|chartType|type|data|items|rows|products|results)"\s*:/i.test(raw);
     raw = raw.replace(/([^\n])\n\|/g, "$1\n\n|").replace(/(\|[^\n]*\|)\n\n+(?=\|)/g, "$1\n");
-    if (!isStreaming) {
-      raw = raw.replace(/(?:^|\n)\s*\{[\s\S]*\}\s*(?:\n|$)/g, (match) => {
+    if (!isStreaming && !hasStructuredUiBlock) {
+      raw = raw.replace(/(?:^|\n)\s*(\{[\s\S]+?\})(?:\s*\n|$)/g, (match, body) => {
         if (match.includes("```")) return match;
-        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";
+        const trimmedBody = body.trim();
+        if (!looksLikeStructuredPayload(trimmedBody)) return match;
+        const type = trimmedBody.includes('"view"') || trimmedBody.includes('"chartType"') || trimmedBody.includes('"type"') || trimmedBody.includes('"xAxisKey"') ? "ui" : "json";
         return `
 
 \`\`\`${type}
-${match.trim()}
+${trimmedBody}
 \`\`\`
 
 `;
@@ -912,7 +919,6 @@ ${match.trim()}
               primaryColor,
               accentColor,
               isStreaming,
-              onAddToCart,
               viewportSize
             }
           );
@@ -927,7 +933,6 @@ ${match.trim()}
                 primaryColor,
                 accentColor,
                 isStreaming,
-                onAddToCart,
                 viewportSize
               }
             );
@@ -943,7 +948,6 @@ ${match.trim()}
                 primaryColor,
                 accentColor,
                 isStreaming,
-                onAddToCart,
                 viewportSize
               }
             );
@@ -955,7 +959,7 @@ ${match.trim()}
         return /* @__PURE__ */ React5.createElement("code", __spreadValues({ className }, props), typeof children === "string" || typeof children === "number" ? children : JSON.stringify(children));
       }
     }),
-    [primaryColor, accentColor, isStreaming, onAddToCart, viewportSize]
+    [primaryColor, accentColor, isStreaming, viewportSize]
   );
   return /* @__PURE__ */ React5.createElement("div", { className: `flex ${isCompact ? "gap-2" : "gap-3"} ${isUser ? "flex-row-reverse" : "flex-row"} items-start` }, /* @__PURE__ */ React5.createElement(
     "div",
@@ -977,11 +981,10 @@ ${match.trim()}
         primaryColor,
         accentColor,
         isStreaming,
-        onAddToCart,
         viewportSize
       }
     ), !shouldRenderStructuredOnly && /* @__PURE__ */ React5.createElement(ReactMarkdown, { remarkPlugins: [remarkGfm], components: markdownComponents }, processedMarkdown), isStreaming && message.content && /* @__PURE__ */ React5.createElement("span", { className: "inline-block w-1.5 h-3.5 ml-1 bg-emerald-500 animate-pulse align-middle" }))
-  ), !isUser && !hasStructuredProductBlock && allProducts.length > 0 && /* @__PURE__ */ React5.createElement("div", { className: "w-full mt-1" }, /* @__PURE__ */ React5.createElement(
+  ), !isUser && allProducts.length > 0 && /* @__PURE__ */ React5.createElement("div", { className: "w-full mt-1" }, /* @__PURE__ */ React5.createElement(
     ProductCarousel,
     {
       products: allProducts,

package/dist/server.js

@@ -3913,17 +3913,18 @@ var Pipeline = class {
   async initialize() {
     var _a, _b;
     if (this.initialised) return;
-    const CHART_MARKER = "<!-- UI_PROTOCOL_V6 -->";
+    const CHART_MARKER = "<!-- UI_PROTOCOL_V7 -->";
     const chartInstruction = `
 
 ${CHART_MARKER}
-### 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.
+### 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.
 
 1. VIEW SELECTION
-   - 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.
+   - 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.
 
 2. REQUIRED JSON SHAPE
    {
@@ -3931,52 +3932,31 @@ When the user asks for a visual representation, comparison, distribution, breakd
      "title": "Short heading",
      "description": "One sentence describing the view",
      "chartType": "pie" | "bar" | "line", // Required if view is "chart"
-     "xAxisKey": "label",
-     "dataKeys": ["value"],
-     "columns": ["dynamicFieldKey1", "dynamicFieldKey2"],
-     "insights": ["Short takeaway 1", "Short takeaway 2"],
-     "data": []
+     "data": [] // Array of objects
    }
 
 3. DATA RULES
-   - 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.
+   - 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".
 
 4. FORMAT RULES
-   - Return valid JSON inside the \`\`\`ui\`\`\` block.
-   - Put natural language explanation before or after the block, not inside.
+   - Wrap the JSON in \`\`\`ui ... \`\`\` blocks.
+   - Place natural language text OUTSIDE the block.
 
-5. EXAMPLES
-User: "show me beauty products"
-Assistant:
+5. EXAMPLE
+User: "find me beauty products"
+Assistant: "I found several beauty products in our catalog:"
 \`\`\`ui
 {
   "view": "carousel",
   "title": "Beauty Products",
-  "description": "Browse our latest skincare and makeup collection.",
+  "description": "Latest skincare and makeup items.",
   "data": [
-    { "id": "1", "name": "Mascara", "brand": "Essence", "price": "$9.99", "image": "...", "link": "..." },
-    { "id": "2", "name": "Lipstick", "brand": "Chic", "price": "$12.99", "image": "...", "link": "..." }
+    { "id": "1", "name": "Mascara", "brand": "Essence", "price": "$9.99", "image": "https://placehold.co/600x400?text=Product", "link": "https://example.com/product" }
   ]
 }
 \`\`\`
-
-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 (!((_a = this.config.llm.systemPrompt) == null ? void 0 : _a.includes(CHART_MARKER))) {
       this.config.llm.systemPrompt = (this.config.llm.systemPrompt || "") + chartInstruction;
@@ -4185,7 +4165,8 @@ Assistant:
           sources = sources.slice(0, topK);
         }
         let context = sources.length ? sources.map((m, i) => `[Source ${i + 1}]
-${m.content}`).join("\n\n---\n\n") : "No relevant context found.";
+Content: ${m.content}
+Metadata: ${JSON.stringify(m.metadata)}`).join("\n\n---\n\n") : "No relevant context found.";
         if (graphData && graphData.nodes.length > 0) {
           const graphContext = graphData.nodes.map(
             (n) => `Entity: ${n.label} (${n.id})${n.properties ? " - " + JSON.stringify(n.properties) : ""}`

package/dist/server.mjs

@@ -39,7 +39,7 @@ import {
   sseFrame,
   sseMetaFrame,
   sseTextFrame
-} from "./chunk-J7BCIPO2.mjs";
+} from "./chunk-OHXRQTQH.mjs";
 import "./chunk-YLTMFW4M.mjs";
 import {
   PineconeProvider

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@retrivora-ai/rag-engine",
-  "version": "1.6.8",
+  "version": "1.7.0",
   "description": "Retrivora AI is a plug-and-play AI engine for RAG chat experiences — generic vector DB + LLM provider, embeddable or standalone.",
   "author": "Abhinav Alkuchi",
   "license": "MIT",

package/src/components/MessageBubble.tsx

@@ -32,8 +32,8 @@ function sanitizeJson(raw: string): string {
     },
   );
 
-  // 2. Strip JS-style single-line comments
-  s = s.replace(/\/\/[^\n]*/g, '');
+  // 2. Strip JS-style single-line comments, but avoid URL protocols like https://
+  s = s.replace(/(^|[^\:])\/\/[^\n]*/g, '$1');
 
   // 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)"?\s*:/.test(raw);
+  return /"?(view|chartType|type|data|items|rows|products|results|columns|xAxisKey)"?\s*:/.test(raw);
 }
 
 function stripMarkdownTables(raw: string): string {
@@ -204,12 +204,23 @@ function isLikelyUiOnlyMessage(text: string): boolean {
 // ─── Tiny helpers ─────────────────────────────────────────────────────────────
 
 function resolveImage(data: Record<string, unknown>): string | undefined {
-  for (const key of ['image', 'img', 'thumbnail']) {
+  const candidates = ['image', 'img', 'thumbnail', 'url', 'picture', 'link'];
+  for (const key of candidates) {
     const v = data[key];
-    if (typeof v === 'string' && v) return v;
+    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 (Array.isArray(data.images) && typeof data.images[0] === 'string') {
-    return data.images[0];
+  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;
+      }
+    }
   }
   return undefined;
 }
@@ -425,16 +436,21 @@ function resolveStructuredRows(config: Partial<RawUIConfig> & Record<string, unk
   return [];
 }
 
-function UIDispatcher({ rawContent, primaryColor, accentColor, isStreaming, onAddToCart, viewportSize = 'large' }: {
+function UIDispatcher({ rawContent, primaryColor, accentColor, isStreaming, 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 }>(() => {
-    if (isStreaming) return { loading: true };
+  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 };
+    }
     try {
       const clean = rawContent
         .replace(/^```[a-z]*\s*/i, '')
@@ -495,6 +511,7 @@ function UIDispatcher({ rawContent, primaryColor, accentColor, isStreaming, onAd
   }, [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" />
@@ -547,16 +564,14 @@ function UIDispatcher({ rawContent, primaryColor, accentColor, isStreaming, onAd
         </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':
@@ -599,11 +614,6 @@ 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],
@@ -718,17 +728,23 @@ 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 ```chart markers.
-    if (!isStreaming) {
+    // This handles models (like Llama 3.2) that often omit the ```ui markers.
+    if (!isStreaming && !hasStructuredUiBlock) {
       // Look for objects that look like chart or product data
-      raw = raw.replace(/(?:^|\n)\s*\{[\s\S]*\}\s*(?:\n|$)/g, (match) => {
+      raw = raw.replace(/(?:^|\n)\s*(\{[\s\S]+?\})(?:\s*\n|$)/g, (match, body) => {
         // Only wrap if not already in a code block
         if (match.includes('```')) return match;
-        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"')
+        const trimmedBody = body.trim();
+        if (!looksLikeStructuredPayload(trimmedBody)) return match;
+        
+        const type = trimmedBody.includes('"view"') || 
+                     trimmedBody.includes('"chartType"') || 
+                     trimmedBody.includes('"type"') || 
+                     trimmedBody.includes('"xAxisKey"')
           ? 'ui'
           : 'json';
-        return `\n\n\`\`\`${type}\n${match.trim()}\n\`\`\`\n\n`;
+          
+        return `\n\n\`\`\`${type}\n${trimmedBody}\n\`\`\`\n\n`;
       });
     }
 
@@ -824,7 +840,6 @@ export function MessageBubble({
               primaryColor={primaryColor}
               accentColor={accentColor}
               isStreaming={isStreaming}
-              onAddToCart={onAddToCart}
               viewportSize={viewportSize}
             />
           );
@@ -839,7 +854,6 @@ export function MessageBubble({
                 primaryColor={primaryColor}
                 accentColor={accentColor}
                 isStreaming={isStreaming}
-                onAddToCart={onAddToCart}
                 viewportSize={viewportSize}
               />
             );
@@ -855,7 +869,6 @@ export function MessageBubble({
                 primaryColor={primaryColor}
                 accentColor={accentColor}
                 isStreaming={isStreaming}
-                onAddToCart={onAddToCart}
                 viewportSize={viewportSize}
               />
             );
@@ -882,7 +895,7 @@ export function MessageBubble({
         );
       },
     }),
-    [primaryColor, accentColor, isStreaming, onAddToCart, viewportSize],
+    [primaryColor, accentColor, isStreaming, viewportSize],
   );
 
   // ── Render ─────────────────────────────────────────────────────────────────
@@ -924,7 +937,6 @@ export function MessageBubble({
                   primaryColor={primaryColor}
                   accentColor={accentColor}
                   isStreaming={isStreaming}
-                  onAddToCart={onAddToCart}
                   viewportSize={viewportSize}
                 />
               )}
@@ -943,7 +955,7 @@ export function MessageBubble({
         </div>
 
         {/* Product Carousel */}
-        {!isUser && !hasStructuredProductBlock && allProducts.length > 0 && (
+        {!isUser && allProducts.length > 0 && (
           <div className="w-full mt-1">
             <ProductCarousel
               products={allProducts}

package/src/core/Pipeline.ts

@@ -101,15 +101,16 @@ 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_V6 -->';
+    const CHART_MARKER = '<!-- UI_PROTOCOL_V7 -->';
     const chartInstruction = `\n\n${CHART_MARKER}
-### 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.
+### 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.
 
 1. VIEW SELECTION
-   - 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.
+   - 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.
 
 2. REQUIRED JSON SHAPE
    {
@@ -117,52 +118,31 @@ When the user asks for a visual representation, comparison, distribution, breakd
      "title": "Short heading",
      "description": "One sentence describing the view",
      "chartType": "pie" | "bar" | "line", // Required if view is "chart"
-     "xAxisKey": "label",
-     "dataKeys": ["value"],
-     "columns": ["dynamicFieldKey1", "dynamicFieldKey2"],
-     "insights": ["Short takeaway 1", "Short takeaway 2"],
-     "data": []
+     "data": [] // Array of objects
    }
 
 3. DATA RULES
-   - 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.
+   - 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".
 
 4. FORMAT RULES
-   - Return valid JSON inside the \`\`\`ui\`\`\` block.
-   - Put natural language explanation before or after the block, not inside.
+   - Wrap the JSON in \`\`\`ui ... \`\`\` blocks.
+   - Place natural language text OUTSIDE the block.
 
-5. EXAMPLES
-User: "show me beauty products"
-Assistant:
+5. EXAMPLE
+User: "find me beauty products"
+Assistant: "I found several beauty products in our catalog:"
 \`\`\`ui
 {
   "view": "carousel",
   "title": "Beauty Products",
-  "description": "Browse our latest skincare and makeup collection.",
+  "description": "Latest skincare and makeup items.",
   "data": [
-    { "id": "1", "name": "Mascara", "brand": "Essence", "price": "$9.99", "image": "...", "link": "..." },
-    { "id": "2", "name": "Lipstick", "brand": "Chic", "price": "$12.99", "image": "...", "link": "..." }
+    { "id": "1", "name": "Mascara", "brand": "Essence", "price": "$9.99", "image": "https://placehold.co/600x400?text=Product", "link": "https://example.com/product" }
   ]
 }
 \`\`\`
-
-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)) {
@@ -407,7 +387,7 @@ Assistant:
 
       // 4. Context Augmentation
       let context = sources.length
-        ? sources.map((m, i) => `[Source ${i + 1}]\n${m.content}`).join('\n\n---\n\n')
+        ? sources.map((m, i) => `[Source ${i + 1}]\nContent: ${m.content}\nMetadata: ${JSON.stringify(m.metadata)}`).join('\n\n---\n\n')
         : 'No relevant context found.';
 
       if (graphData && graphData.nodes.length > 0) {