@retrivora-ai/rag-engine 1.5.4 → 1.5.6

package/src/components/DynamicChart.tsx

@@ -5,6 +5,7 @@ import {
   BarChart, Bar, LineChart, Line, PieChart, Pie, Cell,
   XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer
 } from 'recharts';
+import { ChatViewportSize } from '../types/props';
 
 export interface ChartConfig {
   type: 'bar' | 'line' | 'pie';
@@ -18,13 +19,28 @@ interface DynamicChartProps {
   config: ChartConfig;
   primaryColor?: string;
   accentColor?: string;
+  viewportSize?: ChatViewportSize;
 }
 
 const DEFAULT_COLORS = ['#6366f1', '#10b981', '#f59e0b', '#ef4444', '#8b5cf6', '#ec4899'];
 
-export function DynamicChart({ config, primaryColor = '#6366f1', accentColor = '#8b5cf6' }: DynamicChartProps) {
+export function DynamicChart({
+  config,
+  primaryColor = '#6366f1',
+  accentColor = '#8b5cf6',
+  viewportSize = 'large',
+}: DynamicChartProps) {
   const { type, data } = config;
   const colors = config.colors || [primaryColor, accentColor, ...DEFAULT_COLORS];
+  const isCompact = viewportSize === 'compact';
+  const isMedium = viewportSize === 'medium';
+  const chartHeightClass = isCompact ? 'h-56 min-h-[220px]' : isMedium ? 'h-64 min-h-[250px]' : 'h-72 min-h-[280px]';
+  const pieOuterRadius = isCompact ? 56 : isMedium ? 68 : 80;
+  const pieLabel = ({ name, percent }: { name?: string; percent?: number }) =>
+    isCompact
+      ? `${name}`
+      : `${name} ${((percent ?? 0) * 100).toFixed(0)}%`;
+  const axisTick = { fontSize: isCompact ? 10 : 12, fill: '#64748b' };
 
   // CRITICAL: Sanitize the data array to remove any non-primitive values (objects/arrays)
   // This prevents the "Objects are not valid as a React child" error in Tooltips/Legends
@@ -96,13 +112,87 @@ export function DynamicChart({ config, primaryColor = '#6366f1', accentColor = '
   // Final sanity check: ensure all keys are strings
   const finalXKey = String(resolvedXKey);
   const finalDataKeys = resolvedDataKeys.map(String).filter(k => k !== 'undefined');
+  const pieDataKey = finalDataKeys[0] || 'value';
+
+  const stockAwareColor = (entry: Record<string, string | number | null>, index: number) => {
+    const stockStatus = String(
+      entry.stockStatus ??
+      entry.status ??
+      entry.availability ??
+      '',
+    ).toLowerCase();
+    const inStockCount = typeof entry.inStockCount === 'number' ? entry.inStockCount : undefined;
+    const outOfStockCount = typeof entry.outOfStockCount === 'number' ? entry.outOfStockCount : undefined;
+    const inStockFlag = entry.inStock;
+
+    if (stockStatus.includes('in stock')) return '#10b981';
+    if (stockStatus.includes('out of stock')) return '#f97316';
+    if (typeof inStockFlag === 'string' && inStockFlag.toLowerCase() === 'true') return '#10b981';
+    if (inStockFlag === 1) return '#10b981';
+    if (inStockFlag === 0) return '#f97316';
+    if (typeof inStockCount === 'number' || typeof outOfStockCount === 'number') {
+      const inCount = inStockCount ?? 0;
+      const outCount = outOfStockCount ?? 0;
+      if (inCount > outCount) return '#10b981';
+      if (outCount > inCount) return '#f97316';
+    }
+
+    return colors[index % colors.length];
+  };
+
+  const tooltipLabelMap: Record<string, string> = {
+    value: 'Value',
+    count: 'Count',
+    inStock: 'In stock',
+    inStockCount: 'In stock',
+    outOfStockCount: 'Out of stock',
+    stockStatus: 'Stock status',
+    category: 'Category',
+    label: 'Label',
+    name: 'Name',
+  };
+
+  const renderTooltip = (
+    row: Record<string, string | number | null> | null,
+    label?: string,
+  ) => {
+    if (!row) return null;
+
+    return (
+      <div className="rounded-xl border border-slate-200 bg-white px-3 py-2 text-xs shadow-xl dark:border-white/10 dark:bg-slate-950">
+        <p className="mb-2 font-semibold text-slate-800 dark:text-white/90">
+          {String(row[finalXKey] ?? label ?? 'Details')}
+        </p>
+        {Object.entries(row).map(([key, value]) => {
+          if (value === null || value === undefined || key === finalXKey) return null;
+          if (typeof value === 'object') return null;
+
+          return (
+            <div key={key} className="flex items-center justify-between gap-3 text-slate-600 dark:text-white/70">
+              <span>{tooltipLabelMap[key] ?? key}</span>
+              <span className="font-medium text-slate-900 dark:text-white/90">{String(value)}</span>
+            </div>
+          );
+        })}
+      </div>
+    );
+  };
+
+  const getTooltipRow = (payload: unknown): Record<string, string | number | null> | null => {
+    if (!Array.isArray(payload) || payload.length === 0) return null;
+    const first = payload[0];
+    if (!first || typeof first !== 'object' || !('payload' in first)) return null;
+
+    const row = (first as { payload?: unknown }).payload;
+    if (!row || typeof row !== 'object' || Array.isArray(row)) return null;
+
+    return row as Record<string, string | number | null>;
+  };
 
   // Handle Pie Chart separately as it has a different structure
   if (type === 'pie') {
-    const pieDataKey = finalDataKeys[0] || 'value';
-    
     return (
-      <div className="w-full h-72 min-h-[280px] mt-4 mb-2 select-none overflow-hidden">
+      <div className={`w-full ${chartHeightClass} mt-4 mb-2 select-none overflow-hidden`}>
         <ResponsiveContainer width="99%" height="100%">
           <PieChart>
             <Pie
@@ -111,17 +201,15 @@ export function DynamicChart({ config, primaryColor = '#6366f1', accentColor = '
               nameKey={finalXKey}
               cx="50%"
               cy="50%"
-              outerRadius={80}
-              label={({ name, percent }) => `${name} ${((percent ?? 0) * 100).toFixed(0)}%`}
+              outerRadius={pieOuterRadius}
+              label={pieLabel}
             >
-              {data.map((entry, index) => (
-                <Cell key={`cell-${index}`} fill={colors[index % colors.length]} />
+              {sanitizedData.map((entry, index) => (
+                <Cell key={`cell-${index}`} fill={stockAwareColor(entry, index)} />
               ))}
             </Pie>
-            <Tooltip 
-              contentStyle={{ borderRadius: '8px', border: 'none', boxShadow: '0 4px 6px -1px rgb(0 0 0 / 0.1)' }}
-            />
-            <Legend />
+            <Tooltip content={(props) => renderTooltip(getTooltipRow(props.payload), typeof props.label === 'string' ? props.label : undefined)} />
+            <Legend wrapperStyle={{ fontSize: isCompact ? 10 : 12 }} />
           </PieChart>
         </ResponsiveContainer>
       </div>
@@ -130,46 +218,41 @@ export function DynamicChart({ config, primaryColor = '#6366f1', accentColor = '
 
   // Bar and Line charts
   return (
-    <div className="w-full h-72 min-h-[280px] mt-4 mb-2 select-none overflow-hidden">
+    <div className={`w-full ${chartHeightClass} mt-4 mb-2 select-none overflow-hidden`}>
       <ResponsiveContainer width="99%" height="100%">
         {type === 'bar' ? (
           <BarChart data={sanitizedData} margin={{ top: 10, right: 10, left: -20, bottom: 0 }}>
             <CartesianGrid strokeDasharray="3 3" vertical={false} stroke="#e2e8f0" />
-            <XAxis dataKey={finalXKey} tick={{ fontSize: 12, fill: '#64748b' }} tickLine={false} axisLine={{ stroke: '#cbd5e1' }} />
-            <YAxis tick={{ fontSize: 12, fill: '#64748b' }} tickLine={false} axisLine={false} />
-            <Tooltip 
-              contentStyle={{ borderRadius: '8px', border: 'none', boxShadow: '0 4px 6px -1px rgb(0 0 0 / 0.1)' }}
-              cursor={{ fill: '#f1f5f9' }}
-            />
-            <Legend wrapperStyle={{ fontSize: 12 }} />
+            <XAxis dataKey={finalXKey} tick={axisTick} tickLine={false} axisLine={{ stroke: '#cbd5e1' }} />
+            <YAxis tick={axisTick} tickLine={false} axisLine={false} />
+            <Tooltip content={(props) => renderTooltip(getTooltipRow(props.payload), typeof props.label === 'string' ? props.label : undefined)} cursor={{ fill: '#f1f5f9' }} />
+            <Legend wrapperStyle={{ fontSize: isCompact ? 10 : 12 }} />
             {finalDataKeys.map((key, index) => (
               <Bar 
                 key={key} 
                 dataKey={key} 
                 fill={colors[index % colors.length]} 
                 radius={[4, 4, 0, 0]}
-                barSize={Math.max(20, 60 / data.length)}
+                barSize={isCompact ? Math.max(14, 42 / data.length) : Math.max(20, 60 / data.length)}
               />
             ))}
           </BarChart>
         ) : (
           <LineChart data={sanitizedData} margin={{ top: 10, right: 10, left: -20, bottom: 0 }}>
             <CartesianGrid strokeDasharray="3 3" vertical={false} stroke="#e2e8f0" />
-            <XAxis dataKey={finalXKey} tick={{ fontSize: 12, fill: '#64748b' }} tickLine={false} axisLine={{ stroke: '#cbd5e1' }} />
-            <YAxis tick={{ fontSize: 12, fill: '#64748b' }} tickLine={false} axisLine={false} />
-            <Tooltip 
-              contentStyle={{ borderRadius: '8px', border: 'none', boxShadow: '0 4px 6px -1px rgb(0 0 0 / 0.1)' }}
-            />
-            <Legend wrapperStyle={{ fontSize: 12 }} />
+            <XAxis dataKey={finalXKey} tick={axisTick} tickLine={false} axisLine={{ stroke: '#cbd5e1' }} />
+            <YAxis tick={axisTick} tickLine={false} axisLine={false} />
+            <Tooltip content={(props) => renderTooltip(getTooltipRow(props.payload), typeof props.label === 'string' ? props.label : undefined)} />
+            <Legend wrapperStyle={{ fontSize: isCompact ? 10 : 12 }} />
             {finalDataKeys.map((key, index) => (
               <Line 
                 key={key} 
                 type="monotone" 
                 dataKey={key} 
                 stroke={colors[index % colors.length]} 
-                strokeWidth={3}
-                dot={{ r: 4, strokeWidth: 2 }}
-                activeDot={{ r: 6 }}
+                strokeWidth={isCompact ? 2 : 3}
+                dot={{ r: isCompact ? 3 : 4, strokeWidth: 2 }}
+                activeDot={{ r: isCompact ? 5 : 6 }}
               />
             ))}
           </LineChart>

package/src/components/MessageBubble.tsx

@@ -5,6 +5,7 @@ import { Bot, User, ChevronDown, ChevronRight } from 'lucide-react';
 import ReactMarkdown from 'react-markdown';
 import remarkGfm from 'remark-gfm';
 import { MessageBubbleProps, Product } from '../types';
+import { ChatViewportSize } from '../types/props';
 import { SourceCard } from './SourceCard';
 import { ProductCarousel } from './ProductCarousel';
 import { DynamicChart } from './DynamicChart';
@@ -90,6 +91,17 @@ function sanitizeJson(raw: string): string {
   return s;
 }
 
+function extractLikelyJsonBlock(raw: string): string {
+  const trimmed = raw.trim();
+  const objectStart = trimmed.indexOf('{');
+  const arrayStart = trimmed.indexOf('[');
+
+  const starts = [objectStart, arrayStart].filter((index) => index >= 0);
+  if (starts.length === 0) return trimmed;
+
+  return trimmed.slice(Math.min(...starts));
+}
+
 // ─── Tiny helpers ─────────────────────────────────────────────────────────────
 
 function resolveImage(data: Record<string, unknown>): string | undefined {
@@ -123,13 +135,16 @@ function normaliseChild(children: React.ReactNode): React.ReactNode {
 interface TableConfig {
   type: 'table';
   title?: string;
+  description?: string;
   columns?: string[];   // preferred: explicit ordered column labels
   dataKeys?: string[];  // fallback column keys (may omit xAxisKey)
   xAxisKey?: string;    // row-label key to prepend when using dataKeys
   data: Record<string, unknown>[];
 }
 
-function DataTable({ config }: { config: TableConfig }) {
+function DataTable({ config, viewportSize = 'large' }: { config: TableConfig; viewportSize?: ChatViewportSize }) {
+  const isCompact = viewportSize === 'compact';
+  const isMedium = viewportSize === 'medium';
   const keys = React.useMemo<string[]>(() => {
     // Priority 1: explicit columns list
     if (Array.isArray(config.columns) && config.columns.length) {
@@ -168,13 +183,13 @@ function DataTable({ config }: { config: TableConfig }) {
       )}
 
       <div className="overflow-x-auto">
-        <table className="w-full text-left border-collapse min-w-[320px] text-sm">
+        <table className={`w-full text-left border-collapse ${isCompact ? 'min-w-[240px] text-xs' : isMedium ? 'min-w-[280px] text-[13px]' : 'min-w-[320px] text-sm'}`}>
           <thead className="bg-slate-50 dark:bg-white/5 border-b border-slate-200 dark:border-white/10">
             <tr>
               {keys.map(k => (
                 <th
                   key={k}
-                  className="px-4 py-3 font-semibold text-slate-700 dark:text-white/90 whitespace-nowrap"
+                  className={`${isCompact ? 'px-2.5 py-2' : 'px-4 py-3'} font-semibold text-slate-700 dark:text-white/90 whitespace-nowrap`}
                 >
                   {k}
                 </th>
@@ -190,7 +205,7 @@ function DataTable({ config }: { config: TableConfig }) {
                 {keys.map(k => (
                   <td
                     key={k}
-                    className="px-4 py-3 text-slate-600 dark:text-white/70 whitespace-nowrap"
+                    className={`${isCompact ? 'px-2.5 py-2' : 'px-4 py-3'} text-slate-600 dark:text-white/70 whitespace-nowrap`}
                   >
                     {formatCell(row[k])}
                   </td>
@@ -216,17 +231,57 @@ function DataTable({ config }: { config: TableConfig }) {
 interface UIConfig {
   view: 'chart' | 'carousel' | 'table';
   chartType?: 'pie' | 'bar' | 'line';
+  xAxisKey?: string;
+  dataKeys?: string[];
+  columns?: string[];
+  colors?: string[];
   data: Record<string, unknown>[];
   title?: string;
+  description?: string;
+  insights?: string[];
   type?: string;
   items?: Record<string, unknown>[];
 }
 
-function UIDispatcher({ rawContent, primaryColor, accentColor, isStreaming }: {
+interface RawUIConfig extends Omit<UIConfig, 'data'> {
+  data: Array<Record<string, unknown> | unknown[]>;
+}
+
+function normalizeTabularRows(
+  rows: Array<Record<string, unknown> | unknown[]> | undefined,
+  columns?: string[],
+): Record<string, unknown>[] {
+  if (!Array.isArray(rows)) return [];
+
+  return rows
+    .map((row) => {
+      if (Array.isArray(row)) {
+        const keys = Array.isArray(columns) && columns.length > 0
+          ? columns
+          : row.map((_, index) => `column_${index + 1}`);
+
+        return keys.reduce<Record<string, unknown>>((acc, key, index) => {
+          acc[key] = row[index];
+          return acc;
+        }, {});
+      }
+
+      if (row && typeof row === 'object') {
+        return row as Record<string, unknown>;
+      }
+
+      return { value: row };
+    })
+    .filter((row) => Object.keys(row).length > 0);
+}
+
+function UIDispatcher({ rawContent, primaryColor, accentColor, isStreaming, onAddToCart, viewportSize = 'large' }: {
   rawContent: string;
   primaryColor?: string;
   accentColor?: string;
   isStreaming?: boolean;
+  onAddToCart?: (product: Product) => void;
+  viewportSize?: ChatViewportSize;
 }) {
   const result = React.useMemo<{ config: UIConfig } | { error: string } | { loading: true }>(() => {
     if (isStreaming) return { loading: true };
@@ -235,17 +290,26 @@ function UIDispatcher({ rawContent, primaryColor, accentColor, isStreaming }: {
         .replace(/^```[a-z]*\s*/i, '')
         .replace(/```\s*$/, '')
         .trim();
-      const parsed = JSON.parse(sanitizeJson(clean));
-      const config = { ...parsed };
+      const parsed = JSON.parse(sanitizeJson(extractLikelyJsonBlock(clean)));
+      const config = { ...parsed } as Partial<RawUIConfig> & Record<string, unknown>;
       
       // 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)) {
+        } else if (
+          (typeof config.type === 'string' && ['pie', 'bar', 'line'].includes(config.type)) ||
+          (typeof config.chartType === 'string' && ['pie', 'bar', 'line'].includes(config.chartType))
+        ) {
+          const resolvedChartType =
+            config.chartType === 'pie' || config.chartType === 'bar' || config.chartType === 'line'
+              ? config.chartType
+              : config.type === 'pie' || config.type === 'bar' || config.type === 'line'
+                ? config.type
+                : 'bar';
           config.view = 'chart';
-          config.chartType = config.chartType || config.type || 'bar';
+          config.chartType = resolvedChartType;
           config.data = config.data || [];
         } else {
           config.view = 'table';
@@ -253,7 +317,12 @@ function UIDispatcher({ rawContent, primaryColor, accentColor, isStreaming }: {
         }
       }
 
-      return { config: config as UIConfig };
+      const normalizedConfig: UIConfig = {
+        ...(config as Omit<UIConfig, 'data'>),
+        data: normalizeTabularRows(config.data, config.columns),
+      };
+
+      return { config: normalizedConfig };
     } catch (err) {
       return { error: String(err) };
     }
@@ -273,36 +342,73 @@ function UIDispatcher({ rawContent, primaryColor, accentColor, isStreaming }: {
   }
 
   const { config } = result;
+  const isCompact = viewportSize === 'compact';
+  const hasInsights = Array.isArray(config.insights) && config.insights.length > 0;
+  const hasDescription = typeof config.description === 'string' && config.description.trim().length > 0;
 
   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>}
+        <div className={`${isCompact ? 'my-4 p-3' : '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={`${isCompact ? 'text-[11px] mb-3' : 'text-xs mb-4'} font-semibold text-slate-500 px-2`}>{config.title}</h4>}
+          {hasDescription && (
+            <p className={`px-2 ${isCompact ? 'text-xs' : 'text-sm'} text-slate-500 dark:text-white/60`}>{config.description}</p>
+          )}
           <DynamicChart 
             config={{ 
               type: (config.chartType || 'bar') as 'bar' | 'line' | 'pie',
-              data: config.data as unknown as Record<string, string | number>[]
+              data: config.data as unknown as Record<string, string | number>[],
+              xAxisKey: config.xAxisKey,
+              dataKeys: config.dataKeys,
+              colors: config.colors,
             }}
             primaryColor={primaryColor}
             accentColor={accentColor}
+            viewportSize={viewportSize}
           />
+          {hasInsights && (
+            <div className="mt-4 flex flex-wrap gap-2 px-2">
+              {config.insights?.map((insight) => (
+                <span
+                  key={insight}
+                  className={`rounded-full border border-emerald-200 bg-emerald-50 ${isCompact ? 'px-2.5 py-1 text-[10px]' : 'px-3 py-1 text-[11px]'} font-medium text-emerald-700 dark:border-emerald-500/20 dark:bg-emerald-500/10 dark:text-emerald-300`}
+                >
+                  {insight}
+                </span>
+              ))}
+            </div>
+          )}
         </div>
       );
     case 'carousel':
       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':
       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 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 && <h4 className={`${isCompact ? 'text-[11px]' : 'text-xs'} font-semibold text-slate-500 mb-2`}>{config.title}</h4>}
+          {hasDescription && (
+            <p className={`mb-3 ${isCompact ? 'text-xs' : 'text-sm'} text-slate-500 dark:text-white/60`}>{config.description}</p>
+          )}
+          <DataTable config={{
+            type: 'table',
+            title: config.title,
+            description: config.description,
+            columns: config.columns,
+            dataKeys: config.dataKeys,
+            xAxisKey: config.xAxisKey,
+            data: config.data,
+          }} viewportSize={viewportSize} />
         </div>
       );
     default:
@@ -321,9 +427,16 @@ export function MessageBubble({
   primaryColor = '#6366f1',
   accentColor = '#8b5cf6',
   onAddToCart,
+  viewportSize = 'large',
 }: MessageBubbleProps) {
   const isUser = message.role === 'user';
+  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)"\s*:\s*"(?:carousel|products)"/i.test(message.content),
+    [message.content],
+  );
 
   // ── Products from sources ──────────────────────────────────────────────────
   const productsFromSources = React.useMemo<Product[]>(() => {
@@ -500,6 +613,8 @@ export function MessageBubble({
               primaryColor={primaryColor}
               accentColor={accentColor}
               isStreaming={isStreaming}
+              onAddToCart={onAddToCart}
+              viewportSize={viewportSize}
             />
           );
         }
@@ -513,6 +628,8 @@ export function MessageBubble({
                 primaryColor={primaryColor}
                 accentColor={accentColor}
                 isStreaming={isStreaming}
+                onAddToCart={onAddToCart}
+                viewportSize={viewportSize}
               />
             );
           }
@@ -538,27 +655,27 @@ export function MessageBubble({
         );
       },
     }),
-    [primaryColor, accentColor, isStreaming],
+    [primaryColor, accentColor, isStreaming, onAddToCart, viewportSize],
   );
 
   // ── Render ─────────────────────────────────────────────────────────────────
   return (
-    <div className={`flex gap-3 ${isUser ? 'flex-row-reverse' : 'flex-row'} items-start`}>
+    <div className={`flex ${isCompact ? 'gap-2' : 'gap-3'} ${isUser ? 'flex-row-reverse' : 'flex-row'} items-start`}>
       {/* Avatar */}
       <div
-        className={`flex-shrink-0 w-8 h-8 rounded-full flex items-center justify-center shadow-lg ${isUser
+        className={`flex-shrink-0 ${isCompact ? 'w-7 h-7' : 'w-8 h-8'} rounded-full flex items-center justify-center shadow-lg ${isUser
             ? 'text-white'
             : 'bg-slate-100 dark:bg-white/10 text-slate-700 dark:text-white/80'
           }`}
         style={isUser ? { background: `linear-gradient(135deg, ${primaryColor}, ${accentColor})` } : {}}
       >
-        {isUser ? <User className="w-4 h-4 text-white" /> : <Bot className="w-4 h-4" />}
+        {isUser ? <User className={`${isCompact ? 'w-3.5 h-3.5' : 'w-4 h-4'} text-white`} /> : <Bot className={`${isCompact ? 'w-3.5 h-3.5' : 'w-4 h-4'}`} />}
       </div>
 
-      <div className={`flex flex-col gap-1 max-w-[90%] ${isUser ? 'items-end' : 'items-start'}`}>
+      <div className={`flex flex-col gap-1 ${isCompact ? 'max-w-[94%]' : isMedium ? 'max-w-[92%]' : 'max-w-[90%]'} ${isUser ? 'items-end' : 'items-start'}`}>
         {/* Bubble */}
         <div
-          className={`relative px-4 py-3 rounded-2xl text-sm leading-relaxed shadow-sm dark:shadow-lg ${isUser
+          className={`relative ${isCompact ? 'px-3 py-2.5 text-[13px]' : 'px-4 py-3 text-sm'} rounded-2xl leading-relaxed shadow-sm dark:shadow-lg ${isUser
               ? 'text-white rounded-tr-sm'
               : 'bg-white dark:bg-white/5 border border-slate-200 dark:border-white/10 text-slate-800 dark:text-white/90 rounded-tl-sm'
             }`}
@@ -573,7 +690,7 @@ export function MessageBubble({
               <span className="w-1.5 h-1.5 rounded-full bg-slate-400 dark:bg-white/60 animate-bounce [animation-delay:300ms]" />
             </span>
           ) : (
-            <div className={`prose prose-sm max-w-none ${isUser ? 'prose-invert' : 'dark:prose-invert'}`}>
+            <div className={`prose ${isCompact ? 'prose-xs' : 'prose-sm'} max-w-none break-words ${isUser ? 'prose-invert' : 'dark:prose-invert'}`}>
               <ReactMarkdown remarkPlugins={[remarkGfm]} components={markdownComponents}>
                 {processedMarkdown}
               </ReactMarkdown>
@@ -586,7 +703,7 @@ export function MessageBubble({
         </div>
 
         {/* Product Carousel */}
-        {!isUser && allProducts.length > 0 && (
+        {!isUser && !hasStructuredProductBlock && allProducts.length > 0 && (
           <div className="w-full mt-1">
             <ProductCarousel
               products={allProducts}
@@ -619,4 +736,4 @@ export function MessageBubble({
       </div>
     </div>
   );
-}
+}

package/src/components/ProductCarousel.tsx

@@ -44,7 +44,7 @@ export function ProductCarousel({ products, primaryColor = '#6366f1', onAddToCar
   // Single product: No carousel needed
   if (products.length === 1) {
     return (
-      <div className="my-4 w-[85%] sm:w-[48%] md:w-[31%] min-w-[200px] max-w-[300px] animate-fade-in-up">
+      <div className="my-4 w-[min(88%,18rem)] min-w-0 max-w-full animate-fade-in-up">
         <ProductCard product={products[0]} primaryColor={primaryColor} onAddToCart={onAddToCart} />
       </div>
     );
@@ -86,7 +86,7 @@ export function ProductCarousel({ products, primaryColor = '#6366f1', onAddToCar
         {products.map((product) => (
           <div 
             key={product.id} 
-            className="snap-start flex-shrink-0 w-[85%] sm:w-[48%] md:w-[31%] min-w-[200px] max-w-[300px]"
+            className="snap-start flex-shrink-0 w-[min(88%,18rem)] min-w-[11rem] max-w-full"
           >
             <ProductCard product={product} primaryColor={primaryColor} onAddToCart={onAddToCart} />
           </div>

package/src/core/Pipeline.ts

@@ -101,21 +101,68 @@ 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_V3 -->';
+    const CHART_MARKER = '<!-- UI_PROTOCOL_V5 -->';
     const chartInstruction = `\n\n${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 (!this.config.llm.systemPrompt?.includes(CHART_MARKER)) {
       this.config.llm.systemPrompt = (this.config.llm.systemPrompt || '') + chartInstruction;