@retrivora-ai/rag-engine 1.5.5 → 1.5.6

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 {
@@ -130,7 +142,9 @@ interface TableConfig {
   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) {
@@ -169,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>
@@ -191,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>
@@ -229,12 +243,45 @@ interface UIConfig {
   items?: Record<string, unknown>[];
 }
 
-function UIDispatcher({ rawContent, primaryColor, accentColor, isStreaming, onAddToCart }: {
+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 };
@@ -243,17 +290,26 @@ function UIDispatcher({ rawContent, primaryColor, accentColor, isStreaming, onAd
         .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';
@@ -261,7 +317,12 @@ function UIDispatcher({ rawContent, primaryColor, accentColor, isStreaming, onAd
         }
       }
 
-      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) };
     }
@@ -281,16 +342,17 @@ function UIDispatcher({ rawContent, primaryColor, accentColor, isStreaming, onAd
   }
 
   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 text-sm text-slate-500 dark:text-white/60">{config.description}</p>
+            <p className={`px-2 ${isCompact ? 'text-xs' : 'text-sm'} text-slate-500 dark:text-white/60`}>{config.description}</p>
           )}
           <DynamicChart 
             config={{ 
@@ -302,13 +364,14 @@ function UIDispatcher({ rawContent, primaryColor, accentColor, isStreaming, onAd
             }}
             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 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"
+                  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>
@@ -320,9 +383,9 @@ function UIDispatcher({ rawContent, primaryColor, accentColor, isStreaming, onAd
     case 'carousel':
       return (
         <div className="my-4">
-          {config.title && <h4 className="mb-2 text-xs font-semibold text-slate-500">{config.title}</h4>}
+          {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 text-sm text-slate-500 dark:text-white/60">{config.description}</p>
+            <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,
@@ -332,10 +395,10 @@ function UIDispatcher({ rawContent, primaryColor, accentColor, isStreaming, onAd
       );
     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>}
+        <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 text-sm text-slate-500 dark:text-white/60">{config.description}</p>
+            <p className={`mb-3 ${isCompact ? 'text-xs' : 'text-sm'} text-slate-500 dark:text-white/60`}>{config.description}</p>
           )}
           <DataTable config={{
             type: 'table',
@@ -345,7 +408,7 @@ function UIDispatcher({ rawContent, primaryColor, accentColor, isStreaming, onAd
             dataKeys: config.dataKeys,
             xAxisKey: config.xAxisKey,
             data: config.data,
-          }} />
+          }} viewportSize={viewportSize} />
         </div>
       );
     default:
@@ -364,8 +427,11 @@ 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),
@@ -548,6 +614,7 @@ export function MessageBubble({
               accentColor={accentColor}
               isStreaming={isStreaming}
               onAddToCart={onAddToCart}
+              viewportSize={viewportSize}
             />
           );
         }
@@ -562,6 +629,7 @@ export function MessageBubble({
                 accentColor={accentColor}
                 isStreaming={isStreaming}
                 onAddToCart={onAddToCart}
+                viewportSize={viewportSize}
               />
             );
           }
@@ -587,27 +655,27 @@ export function MessageBubble({
         );
       },
     }),
-    [primaryColor, accentColor, isStreaming, onAddToCart],
+    [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'
             }`}
@@ -622,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>

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

@@ -138,6 +138,8 @@ When the user asks for a visual representation, comparison, distribution, breakd
    - 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"

package/src/types/props.ts

@@ -3,6 +3,8 @@ import { Product, VectorMatch } from './index';
 import { RagMessage } from './chat';
 import { UIConfig } from '../config/RagConfig';
 
+export type ChatViewportSize = 'compact' | 'medium' | 'large';
+
 export interface ChatWindowProps {
   /** Additional className for the wrapper div */
   className?: string;
@@ -40,6 +42,7 @@ export interface MessageBubbleProps {
   primaryColor: string;
   accentColor: string;
   onAddToCart?: (product: Product) => void;
+  viewportSize?: ChatViewportSize;
 }
 
 export interface ProductCardProps {