@retrivora-ai/rag-engine 1.5.2 → 1.5.4

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

@@ -2259,17 +2259,23 @@ var Pipeline = class {
   async initialize() {
     var _a, _b;
     if (this.initialised) return;
-    const CHART_MARKER = "<!-- VIZ_PROTOCOL_V2 -->";
+    const CHART_MARKER = "<!-- UI_PROTOCOL_V3 -->";
     const chartInstruction = `
 
 ${CHART_MARKER}
-### MANDATORY VISUALIZATION RULES:
-- If asked for statistics, distribution, or comparisons: You MUST use the \`\`\`chart block.
-- FORMAT: \`\`\`chart { "type": "pie" | "bar" | "line", "data": [ { "label": "X", "value": 10 } ] } \`\`\`
-- RULES:
-  1. ALWAYS include the \`\`\`chart and \`\`\` markers.
-  2. NEVER use text, tables, or ASCII art for charts.
-  3. Output ONLY the chart block. No Python, no text descriptions.`;
+### UNIVERSAL UI PROTOCOL:
+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:
+   {
+     "view": "chart" | "carousel" | "table",
+     "chartType": "pie" | "bar" | "line" (only for view: "chart"),
+     "data": [ ... objects ... ]
+   }
+3. RULES: Valid JSON only. Data must be FLAT. Never draw charts/tables with text. Choose ONLY the most useful view.`;
     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,17 +3822,23 @@ var Pipeline = class {
   async initialize() {
     var _a, _b;
     if (this.initialised) return;
-    const CHART_MARKER = "<!-- VIZ_PROTOCOL_V2 -->";
+    const CHART_MARKER = "<!-- UI_PROTOCOL_V3 -->";
     const chartInstruction = `
 
 ${CHART_MARKER}
-### MANDATORY VISUALIZATION RULES:
-- If asked for statistics, distribution, or comparisons: You MUST use the \`\`\`chart block.
-- FORMAT: \`\`\`chart { "type": "pie" | "bar" | "line", "data": [ { "label": "X", "value": 10 } ] } \`\`\`
-- RULES:
-  1. ALWAYS include the \`\`\`chart and \`\`\` markers.
-  2. NEVER use text, tables, or ASCII art for charts.
-  3. Output ONLY the chart block. No Python, no text descriptions.`;
+### UNIVERSAL UI PROTOCOL:
+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:
+   {
+     "view": "chart" | "carousel" | "table",
+     "chartType": "pie" | "bar" | "line" (only for view: "chart"),
+     "data": [ ... objects ... ]
+   }
+3. RULES: Valid JSON only. Data must be FLAT. Never draw charts/tables with text. Choose ONLY the most useful view.`;
     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-C4UPQX3E.mjs";
+} from "../chunk-BLLMNP77.mjs";
 import "../chunk-YLTMFW4M.mjs";
 import "../chunk-X4TOT24V.mjs";
 export {

package/dist/index.js

@@ -440,38 +440,63 @@ function DataTable({ config }) {
     ))
   ))))), /* @__PURE__ */ import_react5.default.createElement("div", { className: "px-4 py-2 bg-slate-50 dark:bg-white/5 border-t border-slate-100 dark:border-white/5" }, /* @__PURE__ */ import_react5.default.createElement("p", { className: "text-[11px] text-slate-400 dark:text-white/30" }, config.data.length, " row", config.data.length !== 1 ? "s" : "")));
 }
-function ChartBlock({ rawContent, primaryColor, accentColor, isStreaming }) {
+function UIDispatcher({ rawContent, primaryColor, accentColor, isStreaming }) {
   const result = import_react5.default.useMemo(() => {
     if (isStreaming) return { loading: true };
-    if (!rawContent || rawContent === "undefined") return { error: "Empty visualization config." };
     try {
-      const sanitized = sanitizeJson(rawContent);
-      const config2 = JSON.parse(sanitized);
+      const clean = rawContent.replace(/^```[a-z]*\s*/i, "").replace(/```\s*$/, "").trim();
+      const parsed = JSON.parse(sanitizeJson(clean));
+      const config2 = __spreadValues({}, parsed);
+      if (!config2.view) {
+        if (config2.type === "products" || Array.isArray(config2.items)) {
+          config2.view = "carousel";
+          config2.data = config2.data || config2.items || [];
+        } else if (["pie", "bar", "line"].includes(config2.type) || ["pie", "bar", "line"].includes(config2.chartType)) {
+          config2.view = "chart";
+          config2.chartType = config2.chartType || config2.type || "bar";
+          config2.data = config2.data || [];
+        } else {
+          config2.view = "table";
+          config2.data = Array.isArray(config2.data) ? config2.data : Array.isArray(config2) ? config2 : [];
+        }
+      }
       return { config: config2 };
     } catch (err) {
-      const sanitized = sanitizeJson(rawContent);
-      console.error("[ChartBlock] Parsing failed.\nError:", err, "\nSanitized:\n", sanitized);
       return { error: String(err) };
     }
   }, [rawContent, isStreaming]);
   if ("loading" in result) {
-    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 select-none" }, /* @__PURE__ */ import_react5.default.createElement("div", { className: "w-6 h-6 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 animate-pulse" }, "Preparing data visualization\u2026"));
+    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) {
-    return /* @__PURE__ */ import_react5.default.createElement("div", { className: "p-4 bg-red-50 dark:bg-red-900/20 text-red-600 dark:text-red-400 rounded-lg text-sm border border-red-100 dark:border-red-900/30" }, /* @__PURE__ */ import_react5.default.createElement("p", { className: "font-medium mb-1" }, "Failed to render visualization"), /* @__PURE__ */ import_react5.default.createElement("p", { className: "opacity-70 text-xs" }, "The generated configuration is invalid. Check the console for details."));
+    return /* @__PURE__ */ import_react5.default.createElement("pre", { className: "p-4 my-2 bg-slate-900 text-slate-100 rounded-lg text-[10px] overflow-auto max-h-40" }, /* @__PURE__ */ import_react5.default.createElement("code", null, rawContent));
   }
   const { config } = result;
-  if (config.type === "table") {
-    return /* @__PURE__ */ import_react5.default.createElement(DataTable, { config });
+  switch (config.view) {
+    case "chart":
+      return /* @__PURE__ */ import_react5.default.createElement("div", { className: "my-6 p-4 bg-white dark:bg-slate-900 rounded-2xl border border-slate-200 dark:border-white/10 shadow-sm overflow-hidden" }, config.title && /* @__PURE__ */ import_react5.default.createElement("h4", { className: "text-xs font-semibold text-slate-500 mb-4 px-2" }, config.title), /* @__PURE__ */ import_react5.default.createElement(
+        DynamicChart,
+        {
+          config: {
+            type: config.chartType || "bar",
+            data: config.data
+          },
+          primaryColor,
+          accentColor
+        }
+      ));
+    case "carousel":
+      return /* @__PURE__ */ import_react5.default.createElement("div", { className: "my-4" }, /* @__PURE__ */ import_react5.default.createElement(ProductCarousel, { products: config.data.map((item) => {
+        var _a;
+        return __spreadProps(__spreadValues({}, item), {
+          image: (_a = item.image) != null ? _a : typeof resolveImage === "function" ? resolveImage(item) : void 0
+        });
+      }) }));
+    case "table":
+      return /* @__PURE__ */ import_react5.default.createElement("div", { className: "my-4 p-4 bg-white dark:bg-slate-900 rounded-xl border border-slate-200 dark:border-white/10 shadow-sm overflow-auto max-h-[400px]" }, config.title && /* @__PURE__ */ import_react5.default.createElement("h4", { className: "text-xs font-semibold text-slate-500 mb-2" }, config.title), /* @__PURE__ */ import_react5.default.createElement(DataTable, { config: { type: "table", data: config.data } }));
+    default:
+      return null;
   }
-  return /* @__PURE__ */ import_react5.default.createElement("div", { className: "my-4 p-4 bg-white dark:bg-slate-900 rounded-xl border border-slate-200 dark:border-white/10 shadow-sm" }, /* @__PURE__ */ import_react5.default.createElement(
-    DynamicChart,
-    {
-      config,
-      primaryColor,
-      accentColor
-    }
-  ));
 }
 function MessageBubble({
   message,
@@ -646,9 +671,9 @@ ${match.trim()}
         ]);
         var _a;
         const lang = (_a = /language-(\w+)/.exec(className != null ? className : "")) == null ? void 0 : _a[1];
-        if (!inline && lang === "chart") {
+        if (!inline && (lang === "ui" || lang === "chart")) {
           return /* @__PURE__ */ import_react5.default.createElement(
-            ChartBlock,
+            UIDispatcher,
             {
               rawContent: String(children != null ? children : "").trim(),
               primaryColor,
@@ -657,6 +682,20 @@ ${match.trim()}
             }
           );
         }
+        if (!inline && lang === "json") {
+          const content = String(children != null ? children : "").trim();
+          if (content.includes('"type": "products"') || content.includes('"type":"products"')) {
+            return /* @__PURE__ */ import_react5.default.createElement(
+              UIDispatcher,
+              {
+                rawContent: content,
+                primaryColor,
+                accentColor,
+                isStreaming
+              }
+            );
+          }
+        }
         if (!inline && lang === "table-loading") {
           return /* @__PURE__ */ import_react5.default.createElement("div", { className: "my-5 p-6 bg-slate-50 dark:bg-white/5 rounded-xl border border-dashed border-slate-300 dark:border-white/10 flex items-center justify-center gap-3 select-none" }, /* @__PURE__ */ import_react5.default.createElement("div", { className: "w-4 h-4 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 animate-pulse" }, "Generating data table..."));
         }

package/dist/index.mjs

@@ -403,38 +403,63 @@ function DataTable({ config }) {
     ))
   ))))), /* @__PURE__ */ React5.createElement("div", { className: "px-4 py-2 bg-slate-50 dark:bg-white/5 border-t border-slate-100 dark:border-white/5" }, /* @__PURE__ */ React5.createElement("p", { className: "text-[11px] text-slate-400 dark:text-white/30" }, config.data.length, " row", config.data.length !== 1 ? "s" : "")));
 }
-function ChartBlock({ rawContent, primaryColor, accentColor, isStreaming }) {
+function UIDispatcher({ rawContent, primaryColor, accentColor, isStreaming }) {
   const result = React5.useMemo(() => {
     if (isStreaming) return { loading: true };
-    if (!rawContent || rawContent === "undefined") return { error: "Empty visualization config." };
     try {
-      const sanitized = sanitizeJson(rawContent);
-      const config2 = JSON.parse(sanitized);
+      const clean = rawContent.replace(/^```[a-z]*\s*/i, "").replace(/```\s*$/, "").trim();
+      const parsed = JSON.parse(sanitizeJson(clean));
+      const config2 = __spreadValues({}, parsed);
+      if (!config2.view) {
+        if (config2.type === "products" || Array.isArray(config2.items)) {
+          config2.view = "carousel";
+          config2.data = config2.data || config2.items || [];
+        } else if (["pie", "bar", "line"].includes(config2.type) || ["pie", "bar", "line"].includes(config2.chartType)) {
+          config2.view = "chart";
+          config2.chartType = config2.chartType || config2.type || "bar";
+          config2.data = config2.data || [];
+        } else {
+          config2.view = "table";
+          config2.data = Array.isArray(config2.data) ? config2.data : Array.isArray(config2) ? config2 : [];
+        }
+      }
       return { config: config2 };
     } catch (err) {
-      const sanitized = sanitizeJson(rawContent);
-      console.error("[ChartBlock] Parsing failed.\nError:", err, "\nSanitized:\n", sanitized);
       return { error: String(err) };
     }
   }, [rawContent, isStreaming]);
   if ("loading" in result) {
-    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 select-none" }, /* @__PURE__ */ React5.createElement("div", { className: "w-6 h-6 border-2 border-indigo-500 border-t-transparent rounded-full animate-spin" }), /* @__PURE__ */ React5.createElement("p", { className: "text-xs text-slate-500 font-medium animate-pulse" }, "Preparing data visualization\u2026"));
+    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) {
-    return /* @__PURE__ */ React5.createElement("div", { className: "p-4 bg-red-50 dark:bg-red-900/20 text-red-600 dark:text-red-400 rounded-lg text-sm border border-red-100 dark:border-red-900/30" }, /* @__PURE__ */ React5.createElement("p", { className: "font-medium mb-1" }, "Failed to render visualization"), /* @__PURE__ */ React5.createElement("p", { className: "opacity-70 text-xs" }, "The generated configuration is invalid. Check the console for details."));
+    return /* @__PURE__ */ React5.createElement("pre", { className: "p-4 my-2 bg-slate-900 text-slate-100 rounded-lg text-[10px] overflow-auto max-h-40" }, /* @__PURE__ */ React5.createElement("code", null, rawContent));
   }
   const { config } = result;
-  if (config.type === "table") {
-    return /* @__PURE__ */ React5.createElement(DataTable, { config });
+  switch (config.view) {
+    case "chart":
+      return /* @__PURE__ */ React5.createElement("div", { className: "my-6 p-4 bg-white dark:bg-slate-900 rounded-2xl border border-slate-200 dark:border-white/10 shadow-sm overflow-hidden" }, config.title && /* @__PURE__ */ React5.createElement("h4", { className: "text-xs font-semibold text-slate-500 mb-4 px-2" }, config.title), /* @__PURE__ */ React5.createElement(
+        DynamicChart,
+        {
+          config: {
+            type: config.chartType || "bar",
+            data: config.data
+          },
+          primaryColor,
+          accentColor
+        }
+      ));
+    case "carousel":
+      return /* @__PURE__ */ React5.createElement("div", { className: "my-4" }, /* @__PURE__ */ React5.createElement(ProductCarousel, { products: config.data.map((item) => {
+        var _a;
+        return __spreadProps(__spreadValues({}, item), {
+          image: (_a = item.image) != null ? _a : typeof resolveImage === "function" ? resolveImage(item) : void 0
+        });
+      }) }));
+    case "table":
+      return /* @__PURE__ */ React5.createElement("div", { className: "my-4 p-4 bg-white dark:bg-slate-900 rounded-xl border border-slate-200 dark:border-white/10 shadow-sm overflow-auto max-h-[400px]" }, config.title && /* @__PURE__ */ React5.createElement("h4", { className: "text-xs font-semibold text-slate-500 mb-2" }, config.title), /* @__PURE__ */ React5.createElement(DataTable, { config: { type: "table", data: config.data } }));
+    default:
+      return null;
   }
-  return /* @__PURE__ */ React5.createElement("div", { className: "my-4 p-4 bg-white dark:bg-slate-900 rounded-xl border border-slate-200 dark:border-white/10 shadow-sm" }, /* @__PURE__ */ React5.createElement(
-    DynamicChart,
-    {
-      config,
-      primaryColor,
-      accentColor
-    }
-  ));
 }
 function MessageBubble({
   message,
@@ -609,9 +634,9 @@ ${match.trim()}
         ]);
         var _a;
         const lang = (_a = /language-(\w+)/.exec(className != null ? className : "")) == null ? void 0 : _a[1];
-        if (!inline && lang === "chart") {
+        if (!inline && (lang === "ui" || lang === "chart")) {
           return /* @__PURE__ */ React5.createElement(
-            ChartBlock,
+            UIDispatcher,
             {
               rawContent: String(children != null ? children : "").trim(),
               primaryColor,
@@ -620,6 +645,20 @@ ${match.trim()}
             }
           );
         }
+        if (!inline && lang === "json") {
+          const content = String(children != null ? children : "").trim();
+          if (content.includes('"type": "products"') || content.includes('"type":"products"')) {
+            return /* @__PURE__ */ React5.createElement(
+              UIDispatcher,
+              {
+                rawContent: content,
+                primaryColor,
+                accentColor,
+                isStreaming
+              }
+            );
+          }
+        }
         if (!inline && lang === "table-loading") {
           return /* @__PURE__ */ React5.createElement("div", { className: "my-5 p-6 bg-slate-50 dark:bg-white/5 rounded-xl border border-dashed border-slate-300 dark:border-white/10 flex items-center justify-center gap-3 select-none" }, /* @__PURE__ */ React5.createElement("div", { className: "w-4 h-4 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 animate-pulse" }, "Generating data table..."));
         }

package/dist/server.js

@@ -3913,17 +3913,23 @@ var Pipeline = class {
   async initialize() {
     var _a, _b;
     if (this.initialised) return;
-    const CHART_MARKER = "<!-- VIZ_PROTOCOL_V2 -->";
+    const CHART_MARKER = "<!-- UI_PROTOCOL_V3 -->";
     const chartInstruction = `
 
 ${CHART_MARKER}
-### MANDATORY VISUALIZATION RULES:
-- If asked for statistics, distribution, or comparisons: You MUST use the \`\`\`chart block.
-- FORMAT: \`\`\`chart { "type": "pie" | "bar" | "line", "data": [ { "label": "X", "value": 10 } ] } \`\`\`
-- RULES:
-  1. ALWAYS include the \`\`\`chart and \`\`\` markers.
-  2. NEVER use text, tables, or ASCII art for charts.
-  3. Output ONLY the chart block. No Python, no text descriptions.`;
+### UNIVERSAL UI PROTOCOL:
+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:
+   {
+     "view": "chart" | "carousel" | "table",
+     "chartType": "pie" | "bar" | "line" (only for view: "chart"),
+     "data": [ ... objects ... ]
+   }
+3. RULES: Valid JSON only. Data must be FLAT. Never draw charts/tables with text. Choose ONLY the most useful view.`;
     if (!((_a = this.config.llm.systemPrompt) == null ? void 0 : _a.includes(CHART_MARKER))) {
       this.config.llm.systemPrompt = (this.config.llm.systemPrompt || "") + chartInstruction;
     }

package/dist/server.mjs

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@retrivora-ai/rag-engine",
-  "version": "1.5.2",
+  "version": "1.5.4",
   "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

@@ -7,7 +7,7 @@ import remarkGfm from 'remark-gfm';
 import { MessageBubbleProps, Product } from '../types';
 import { SourceCard } from './SourceCard';
 import { ProductCarousel } from './ProductCarousel';
-import { DynamicChart, ChartConfig } from './DynamicChart';
+import { DynamicChart } from './DynamicChart';
 
 // ─── JSON sanitization ────────────────────────────────────────────────────────
 // Order matters: each step is a targeted fix, no step undoes a previous one.
@@ -210,70 +210,108 @@ function DataTable({ config }: { config: TableConfig }) {
   );
 }
 
-// ─── Chart / table code block dispatcher ─────────────────────────────────────
+// ─── Universal UI Dispatcher ────────────────────────────────────────────────
+// Handles charts, product carousels, and data tables via a single protocol.
 
-type ParsedConfig = ChartConfig | TableConfig;
+interface UIConfig {
+  view: 'chart' | 'carousel' | 'table';
+  chartType?: 'pie' | 'bar' | 'line';
+  data: Record<string, unknown>[];
+  title?: string;
+  type?: string;
+  items?: Record<string, unknown>[];
+}
 
-interface ChartBlockProps {
+function UIDispatcher({ rawContent, primaryColor, accentColor, isStreaming }: {
   rawContent: string;
-  primaryColor: string;
-  accentColor: string;
+  primaryColor?: string;
+  accentColor?: string;
   isStreaming?: boolean;
-}
-
-function ChartBlock({ rawContent, primaryColor, accentColor, isStreaming }: ChartBlockProps) {
-  const result = React.useMemo<
-    { config: ParsedConfig } | { error: string } | { loading: true }
-  >(() => {
+}) {
+  const result = React.useMemo<{ config: UIConfig } | { error: string } | { loading: true }>(() => {
     if (isStreaming) return { loading: true };
-    if (!rawContent || rawContent === 'undefined') return { error: 'Empty visualization config.' };
     try {
-      const sanitized = sanitizeJson(rawContent);
-      const config = JSON.parse(sanitized) as ParsedConfig;
-      return { config };
+      const clean = rawContent
+        .replace(/^```[a-z]*\s*/i, '')
+        .replace(/```\s*$/, '')
+        .trim();
+      const parsed = JSON.parse(sanitizeJson(clean));
+      const config = { ...parsed };
+      
+      // Smart Auto-Detection for legacy or simpler formats
+      if (!config.view) {
+        if (config.type === 'products' || Array.isArray(config.items)) {
+          config.view = 'carousel';
+          config.data = config.data || config.items || [];
+        } else if (['pie', 'bar', 'line'].includes(config.type) || ['pie', 'bar', 'line'].includes(config.chartType)) {
+          config.view = 'chart';
+          config.chartType = config.chartType || config.type || 'bar';
+          config.data = config.data || [];
+        } else {
+          config.view = 'table';
+          config.data = Array.isArray(config.data) ? config.data : (Array.isArray(config) ? config : []);
+        }
+      }
+
+      return { config: config as UIConfig };
     } catch (err) {
-      const sanitized = sanitizeJson(rawContent);
-      console.error('[ChartBlock] Parsing failed.\nError:', err, '\nSanitized:\n', sanitized);
       return { error: String(err) };
     }
   }, [rawContent, isStreaming]);
 
   if ('loading' in result) {
     return (
-      <div className="my-4 p-8 bg-slate-50 dark:bg-white/5 rounded-xl border border-dashed border-slate-300 dark:border-white/10 flex flex-col items-center justify-center gap-3 select-none">
-        <div className="w-6 h-6 border-2 border-indigo-500 border-t-transparent rounded-full animate-spin" />
-        <p className="text-xs text-slate-500 font-medium animate-pulse">Preparing data visualization…</p>
+      <div className="my-4 p-8 bg-slate-50 dark:bg-white/5 rounded-xl border border-dashed border-slate-300 dark:border-white/10 flex flex-col items-center justify-center gap-3 animate-pulse">
+        <div className="w-5 h-5 border-2 border-indigo-500 border-t-transparent rounded-full animate-spin" />
+        <p className="text-xs text-slate-500 font-medium italic">Preparing view...</p>
       </div>
     );
   }
 
   if ('error' in result) {
-    return (
-      <div className="p-4 bg-red-50 dark:bg-red-900/20 text-red-600 dark:text-red-400 rounded-lg text-sm border border-red-100 dark:border-red-900/30">
-        <p className="font-medium mb-1">Failed to render visualization</p>
-        <p className="opacity-70 text-xs">The generated configuration is invalid. Check the console for details.</p>
-      </div>
-    );
+    return <pre className="p-4 my-2 bg-slate-900 text-slate-100 rounded-lg text-[10px] overflow-auto max-h-40"><code>{rawContent}</code></pre>;
   }
 
   const { config } = result;
 
-  // Route table type to dedicated renderer; everything else goes to DynamicChart
-  if (config.type === 'table') {
-    return <DataTable config={config as TableConfig} />;
+  switch (config.view) {
+    case 'chart':
+      return (
+        <div className="my-6 p-4 bg-white dark:bg-slate-900 rounded-2xl border border-slate-200 dark:border-white/10 shadow-sm overflow-hidden">
+          {config.title && <h4 className="text-xs font-semibold text-slate-500 mb-4 px-2">{config.title}</h4>}
+          <DynamicChart 
+            config={{ 
+              type: (config.chartType || 'bar') as 'bar' | 'line' | 'pie',
+              data: config.data as unknown as Record<string, string | number>[]
+            }}
+            primaryColor={primaryColor}
+            accentColor={accentColor}
+          />
+        </div>
+      );
+    case 'carousel':
+      return (
+        <div className="my-4">
+          <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)
+          }))} />
+        </div>
+      );
+    case 'table':
+      return (
+        <div className="my-4 p-4 bg-white dark:bg-slate-900 rounded-xl border border-slate-200 dark:border-white/10 shadow-sm overflow-auto max-h-[400px]">
+          {config.title && <h4 className="text-xs font-semibold text-slate-500 mb-2">{config.title}</h4>}
+          <DataTable config={{ type: 'table', data: config.data } as TableConfig} />
+        </div>
+      );
+    default:
+      return null;
   }
-
-  return (
-    <div className="my-4 p-4 bg-white dark:bg-slate-900 rounded-xl border border-slate-200 dark:border-white/10 shadow-sm">
-      <DynamicChart
-        config={config as ChartConfig}
-        primaryColor={primaryColor}
-        accentColor={accentColor}
-      />
-    </div>
-  );
 }
 
+
+
 // ─── Main component ───────────────────────────────────────────────────────────
 
 export function MessageBubble({
@@ -455,9 +493,9 @@ export function MessageBubble({
       }: React.HTMLAttributes<HTMLElement> & { inline?: boolean }) {
         const lang = /language-(\w+)/.exec(className ?? '')?.[1];
 
-        if (!inline && lang === 'chart') {
+        if (!inline && (lang === 'ui' || lang === 'chart')) {
           return (
-            <ChartBlock
+            <UIDispatcher
               rawContent={String(children ?? '').trim()}
               primaryColor={primaryColor}
               accentColor={accentColor}
@@ -466,6 +504,20 @@ export function MessageBubble({
           );
         }
 
+        if (!inline && lang === 'json') {
+          const content = String(children ?? '').trim();
+          if (content.includes('"type": "products"') || content.includes('"type":"products"')) {
+            return (
+              <UIDispatcher
+                rawContent={content}
+                primaryColor={primaryColor}
+                accentColor={accentColor}
+                isStreaming={isStreaming}
+              />
+            );
+          }
+        }
+
         if (!inline && lang === 'table-loading') {
           return (
             <div className="my-5 p-6 bg-slate-50 dark:bg-white/5 rounded-xl border border-dashed border-slate-300 dark:border-white/10 flex items-center justify-center gap-3 select-none">

package/src/core/Pipeline.ts

@@ -101,15 +101,21 @@ export class Pipeline {
 
     // Augment system prompt with a Universal Visualization Protocol
     // We use a unique marker to ensure this is only injected once but is ALWAYS present.
-    const CHART_MARKER = '<!-- VIZ_PROTOCOL_V2 -->';
+    const CHART_MARKER = '<!-- UI_PROTOCOL_V3 -->';
     const chartInstruction = `\n\n${CHART_MARKER}
-### MANDATORY VISUALIZATION RULES:
-- If asked for statistics, distribution, or comparisons: You MUST use the \`\`\`chart block.
-- FORMAT: \`\`\`chart { "type": "pie" | "bar" | "line", "data": [ { "label": "X", "value": 10 } ] } \`\`\`
-- RULES:
-  1. ALWAYS include the \`\`\`chart and \`\`\` markers.
-  2. NEVER use text, tables, or ASCII art for charts.
-  3. Output ONLY the chart block. No Python, no text descriptions.`;
+### UNIVERSAL UI PROTOCOL:
+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:
+   {
+     "view": "chart" | "carousel" | "table",
+     "chartType": "pie" | "bar" | "line" (only for view: "chart"),
+     "data": [ ... objects ... ]
+   }
+3. RULES: Valid JSON only. Data must be FLAT. Never draw charts/tables with text. Choose ONLY the most useful view.`;
 
     if (!this.config.llm.systemPrompt?.includes(CHART_MARKER)) {
       this.config.llm.systemPrompt = (this.config.llm.systemPrompt || '') + chartInstruction;