@retrivora-ai/rag-engine 1.8.1 → 1.8.3

package/src/components/ChatWindow.tsx

@@ -13,7 +13,9 @@ import {
   Minimize2,
   Mic,
   MicOff,
+  Paperclip,
 } from 'lucide-react';
+import { DocumentUpload } from './DocumentUpload';
 import { MessageBubble } from './MessageBubble';
 import { useConfig } from './ConfigProvider';
 import { useRagChat } from '../hooks/useRagChat';
@@ -77,6 +79,7 @@ export function ChatWindow({
   const [isSuggesting, setIsSuggesting] = useState(false);
 
   const [isListening, setIsListening] = useState(false);
+  const [isUploadModalOpen, setIsUploadModalOpen] = useState(false);
   const recognitionRef = useRef<ISpeechRecognition | null>(null);
 
   // Initialize SpeechRecognition
@@ -396,6 +399,24 @@ export function ChatWindow({
         <div ref={bottomRef} />
       </div>
 
+      {/* Upload Modal Overlay */}
+      {isUploadModalOpen && (
+        <div className="absolute inset-0 z-50 flex items-center justify-center p-4 bg-slate-900/50 backdrop-blur-sm rounded-inherit">
+          <div className="relative w-full max-w-md bg-white dark:bg-[#0f0f1a] rounded-2xl shadow-2xl overflow-hidden animate-in zoom-in-95 duration-200">
+            <button
+              onClick={() => setIsUploadModalOpen(false)}
+              className="absolute top-4 right-4 p-1.5 rounded-lg text-slate-400 hover:text-slate-600 hover:bg-slate-100 dark:hover:text-white/80 dark:hover:bg-white/10 transition-colors z-10"
+            >
+              <X className="w-5 h-5" />
+            </button>
+            <DocumentUpload 
+              namespace={projectId} 
+              onUploadComplete={() => setIsUploadModalOpen(false)} 
+            />
+          </div>
+        </div>
+      )}
+
       {/* ── Input ── */}
       <div className={`px-4 pb-4 pt-2 border-t border-slate-200 dark:border-white/10 ${isGlass ? 'bg-transparent' : 'bg-white dark:bg-[#0f0f1a]'}`}>
         
@@ -460,6 +481,17 @@ export function ChatWindow({
             </button>
           )}
 
+          {ui.allowUpload !== false && (
+            <button
+              type="button"
+              onClick={() => setIsUploadModalOpen(true)}
+              className="flex-shrink-0 w-9 h-9 rounded-xl flex items-center justify-center transition-all hover:scale-105 active:scale-95 text-slate-400 dark:text-white/40 hover:bg-slate-200 dark:hover:bg-white/10"
+              title="Upload Document"
+            >
+              <Paperclip className="w-4 h-4" />
+            </button>
+          )}
+
           <button
             onClick={sendMessage}
             disabled={!input.trim() || isLoading}

package/src/components/CodeViewer.tsx

@@ -0,0 +1,51 @@
+'use client';
+
+import React from 'react';
+import { Check, Copy } from 'lucide-react';
+import { Snippet } from '@/app/types';
+
+export function CodeViewer({ snippet }: { snippet: Snippet }) {
+  const [copied, setCopied] = React.useState(false);
+
+  const handleCopy = () => {
+    navigator.clipboard.writeText(snippet.code);
+    setCopied(true);
+    setTimeout(() => setCopied(false), 2000);
+  };
+
+  return (
+    <div className="flex flex-col h-full rounded-2xl border border-slate-200 dark:border-white/10 bg-slate-50 dark:bg-slate-900/50 shadow-lg overflow-hidden min-h-[440px]">
+      <div className="flex items-center justify-between px-5 py-3 border-b border-slate-200 dark:border-white/10 bg-white dark:bg-slate-900">
+        <div className="flex items-center gap-3">
+          <div className="flex gap-1.5">
+            <div className="w-2.5 h-2.5 rounded-full bg-red-500" />
+            <div className="w-2.5 h-2.5 rounded-full bg-yellow-500" />
+            <div className="w-2.5 h-2.5 rounded-full bg-green-500" />
+          </div>
+          <span className="text-[10px] font-mono text-slate-400 dark:text-white/30 uppercase tracking-widest ml-2">{snippet.language}</span>
+        </div>
+        <button
+          onClick={handleCopy}
+          className="flex items-center gap-2 text-[10px] font-bold text-slate-500 dark:text-white/40 hover:text-indigo-600 dark:hover:text-indigo-400 transition-all active:scale-95"
+        >
+          {copied ? (
+            <>
+              <Check size={14} className="text-emerald-500" />
+              <span className="text-emerald-500">Copied!</span>
+            </>
+          ) : (
+            <>
+              <Copy size={14} />
+              <span>Copy Code</span>
+            </>
+          )}
+        </button>
+      </div>
+      <div className="p-8 font-mono text-[12px] leading-relaxed overflow-auto custom-scrollbar flex-grow bg-[#0f172a] text-indigo-50">
+        <pre className="whitespace-pre">
+          <code>{snippet.code}</code>
+        </pre>
+      </div>
+    </div>
+  );
+}

package/src/components/ConfigProvider.tsx

@@ -22,6 +22,7 @@ export function ConfigProvider({
   const merged: ClientConfig = {
     projectId: config?.projectId || DEFAULT_CONFIG.projectId,
     ui: mergeDefined(DEFAULT_CONFIG.ui, config?.ui) as Required<UIConfig>,
+    embedding: config?.embedding,
   };
 
   return <ConfigContext.Provider value={merged}>{children}</ConfigContext.Provider>;

package/src/components/DocViewer.tsx

@@ -0,0 +1,37 @@
+'use client';
+
+import React from 'react';
+import { Snippet } from '@/app/types';
+import { SNIPPETS } from '@/app/constants';
+import { CodeViewer } from './CodeViewer';
+
+export function DocViewer({ activeSnippet, setActiveSnippet }: { activeSnippet: Snippet, setActiveSnippet: (s: Snippet) => void }) {
+  return (
+    <>
+      <div className="mb-6 flex flex-wrap gap-2 border-b border-slate-100 dark:border-white/5 pb-6">
+        {SNIPPETS.map((snippet) => (
+          <button
+            key={snippet.id}
+            onClick={() => setActiveSnippet(snippet)}
+            className={`px-5 py-2 rounded-xl text-[10px] font-bold uppercase tracking-wider transition-all border ${activeSnippet.id === snippet.id
+              ? 'bg-indigo-600 text-white border-indigo-600 shadow-lg shadow-indigo-200 dark:shadow-indigo-500/20 scale-105'
+              : 'bg-white dark:bg-white/5 border-slate-200 dark:border-white/10 text-slate-500 dark:text-white/40 hover:text-indigo-600 dark:hover:text-indigo-400 hover:border-indigo-300 dark:hover:border-white/20'
+              }`}
+          >
+            {snippet.title}
+          </button>
+        ))}
+      </div>
+
+      <div className="flex-grow flex flex-col gap-6 animate-in fade-in slide-in-from-bottom-2 duration-500">
+        <div className="max-w-2xl">
+          <h3 className="text-xl font-bold text-slate-900 dark:text-white mb-2">{activeSnippet.title}</h3>
+          <p className="text-sm text-slate-500 dark:text-white/40 leading-relaxed font-medium italic">
+            {activeSnippet.description}
+          </p>
+        </div>
+        <CodeViewer snippet={activeSnippet} />
+      </div>
+    </>
+  );
+}

package/src/components/DocumentUpload.tsx

@@ -13,11 +13,33 @@ interface FileState {
 }
 
 export function DocumentUpload({ namespace, onUploadComplete, className = '' }: DocumentUploadProps) {
-  const { ui } = useConfig();
+  const { ui, embedding } = useConfig();
   const [fileStates, setFileStates] = useState<FileState[]>([]);
   const [isDragging, setIsDragging] = useState(false);
   const fileInputRef = useRef<HTMLInputElement>(null);
 
+  const MULTI_DIMENSION_MODELS: Record<string, number[]> = {
+    'text-embedding-3-small': [512, 1536],
+    'text-embedding-3-large': [256, 1024, 3072],
+    'nomic-embed-text': [64, 128, 256, 512, 768]
+  };
+
+  const COMMON_DIMENSIONS = [64, 128, 256, 384, 512, 768, 1024, 1536, 3072];
+  const currentModel = embedding?.model || 'unknown';
+  const defaultDimension = embedding?.dimensions || 1536;
+  
+  // Provide specific dimensions for known models, otherwise provide common ones
+  let availableDimensions = Object.entries(MULTI_DIMENSION_MODELS).find(([k]) => currentModel.includes(k))?.[1];
+  if (!availableDimensions) {
+    availableDimensions = COMMON_DIMENSIONS.includes(defaultDimension) 
+      ? COMMON_DIMENSIONS 
+      : [...COMMON_DIMENSIONS, defaultDimension].sort((a, b) => a - b);
+  }
+  
+  const isChangeable = true; // Always allow the user to select the dimension
+
+  const [dimension, setDimension] = useState(defaultDimension);
+
   const addFiles = (files: File[]) => {
     const newStates = files.map(file => ({ file, status: 'idle' as const }));
     setFileStates(prev => [...prev, ...newStates]);
@@ -60,6 +82,7 @@ export function DocumentUpload({ namespace, onUploadComplete, className = '' }:
     const formData = new FormData();
     idleFiles.forEach(s => formData.append('files', s.file));
     if (namespace) formData.append('namespace', namespace);
+    formData.append('dimension', dimension.toString());
 
     try {
       const response = await fetch('/api/upload', {
@@ -125,6 +148,26 @@ export function DocumentUpload({ namespace, onUploadComplete, className = '' }:
           className="hidden" 
           accept=".pdf,.docx,.txt,.md,.json,.csv"
         />
+
+        <div className="mt-6 flex flex-col items-center gap-2 text-sm">
+          <label className="text-slate-600 dark:text-white/60 font-medium">Embedding Dimension</label>
+          {isChangeable ? (
+            <select
+              value={dimension}
+              onChange={(e) => setDimension(Number(e.target.value))}
+              disabled={isUploading}
+              className="px-3 py-1.5 rounded-lg bg-slate-50 dark:bg-white/5 border border-slate-200 dark:border-white/10 text-slate-800 dark:text-white/90 outline-none focus:border-emerald-500 transition-colors"
+            >
+              {availableDimensions.map(dim => (
+                <option key={dim} value={dim} className="bg-white dark:bg-slate-900">{dim}</option>
+              ))}
+            </select>
+          ) : (
+            <div className="px-3 py-1.5 rounded-lg bg-slate-100 dark:bg-white/10 border border-slate-200 dark:border-white/10 text-slate-500 dark:text-white/50 cursor-not-allowed text-xs">
+              {dimension} (Fixed for {currentModel})
+            </div>
+          )}
+        </div>
       </div>
 
       {fileStates.length > 0 && (

package/src/components/Documentation.tsx

@@ -0,0 +1,58 @@
+'use client';
+
+import React from 'react';
+import { FileText, Zap, Package, ExternalLink } from 'lucide-react';
+import { DocViewer } from '@/components/DocViewer';
+import { LANDING_PAGE_CONTENT, QUICK_START_STEPS, API_ENDPOINTS, SNIPPETS } from '@/app/constants';
+import { Snippet } from '@/app/types';
+
+export function Documentation() {
+  const [activeSnippet, setActiveSnippet] = React.useState<Snippet>(SNIPPETS[0]);
+
+  return (
+    <div className="mt-32 max-w-6xl mx-auto mb-24 relative">
+      <div className="text-center mb-16">
+        <h2 className="text-3xl font-bold text-slate-900 dark:text-white mb-4">{LANDING_PAGE_CONTENT.guide.title}</h2>
+        <p className="text-slate-600 dark:text-white/40 max-w-2xl mx-auto">{LANDING_PAGE_CONTENT.guide.subtitle}</p>
+      </div>
+      <div className="relative z-10 w-full grid gap-16 lg:grid-cols-[280px_1fr] items-start">
+        <aside className="flex flex-col gap-10">
+          <section>
+            <h2 className="mb-6 text-[10px] font-black text-slate-400 dark:text-white/30 uppercase tracking-[0.3em] flex items-center gap-3">
+              <FileText size={14} className="text-indigo-500" /> Quick Start
+            </h2>
+            <ol className="space-y-6">
+              {QUICK_START_STEPS.map((step, i) => (
+                <li key={i} className="group flex items-start gap-4">
+                  <span className="flex h-6 w-6 shrink-0 items-center justify-center rounded-lg bg-white dark:bg-white/5 text-slate-600 dark:text-white/40 font-mono text-[10px] border border-slate-200 dark:border-white/10 shadow-sm">{i + 1}</span>
+                  <span className="text-xs text-slate-500 dark:text-white/50 font-medium leading-relaxed pt-1">{step}</span>
+                </li>
+              ))}
+            </ol>
+          </section>
+          <section className="rounded-2xl border border-slate-200 dark:border-white/10 bg-white dark:bg-white/3 p-6 shadow-sm">
+            <h2 className="mb-6 text-[10px] font-black text-slate-400 dark:text-white/30 uppercase tracking-[0.3em] flex items-center gap-3">
+              <Zap size={14} className="text-indigo-500" /> API Endpoints
+            </h2>
+            <div className="grid gap-2.5">
+              {API_ENDPOINTS.map((slug) => (
+                <div key={slug} className="group flex items-center justify-between p-2 rounded-lg bg-slate-50 dark:bg-white/5 border border-slate-100 dark:border-white/5 hover:border-indigo-200 dark:hover:border-indigo-500/30">
+                  <span className="text-[10px] font-mono text-slate-500 dark:text-white/30 group-hover:text-indigo-600">/api/{slug}</span>
+                  <span className="text-[8px] font-bold text-indigo-600 dark:text-indigo-400 bg-indigo-50 dark:bg-indigo-500/10 px-1.5 py-0.5 rounded border border-indigo-100 dark:border-indigo-500/20">POST</span>
+                </div>
+              ))}
+            </div>
+          </section>
+        </aside>
+        <section className="flex flex-col h-full min-h-[560px]">
+          <DocViewer activeSnippet={activeSnippet} setActiveSnippet={setActiveSnippet} />
+        </section>
+      </div>
+      <div className="mt-16 text-center">
+        <a href="https://www.npmjs.com/package/@retrivora-ai/rag-engine" className="inline-flex items-center gap-3 px-8 py-4 rounded-2xl bg-slate-900 dark:bg-white text-white dark:text-slate-900 font-bold shadow-xl shadow-indigo-500/20">
+          <Package className="w-5 h-5" /> Get Started on NPM <ExternalLink className="w-4 h-4" />
+        </a>
+      </div>
+    </div>
+  );
+}

package/src/components/DynamicChart.tsx

@@ -20,18 +20,22 @@ interface DynamicChartProps {
   primaryColor?: string;
   accentColor?: string;
   viewportSize?: ChatViewportSize;
+  /** When true, renders a shimmer skeleton instead of the chart. */
+  isStreaming?: boolean;
 }
 
-const DEFAULT_COLORS = ['#6366f1', '#10b981', '#f59e0b', '#ef4444', '#8b5cf6', '#ec4899'];
+/** Shared palette — imported by VisualizationRenderer to avoid duplication. */
+export const CHART_COLORS = ['#6366f1', '#10b981', '#f59e0b', '#ef4444', '#8b5cf6', '#ec4899'];
 
 export function DynamicChart({
   config,
   primaryColor = '#6366f1',
   accentColor = '#8b5cf6',
   viewportSize = 'large',
+  isStreaming = false,
 }: DynamicChartProps) {
   const { type, data } = config;
-  const colors = config.colors || [primaryColor, accentColor, ...DEFAULT_COLORS];
+  const colors = config.colors || [primaryColor, accentColor, ...CHART_COLORS];
   const containerRef = React.useRef<HTMLDivElement>(null);
   const [containerWidth, setContainerWidth] = React.useState(0);
 
@@ -111,6 +115,27 @@ export function DynamicChart({
     });
   }, [data]);
 
+  if (isStreaming) {
+    const bars = type === 'pie' ? 6 : 5;
+    return (
+      <div className="w-full mt-4 mb-2 animate-pulse">
+        {type === 'pie' ? (
+          <div className="mx-auto w-40 h-40 rounded-full bg-slate-100 dark:bg-white/10" />
+        ) : (
+          <div className="flex items-end gap-2 h-32 px-2">
+            {Array.from({ length: bars }).map((_, i) => (
+              <div
+                key={i}
+                className="flex-1 rounded-t-md bg-slate-100 dark:bg-white/10"
+                style={{ height: `${40 + (i % 3) * 25}%` }}
+              />
+            ))}
+          </div>
+        )}
+      </div>
+    );
+  }
+
   if (!data || data.length === 0) {
     return <div className="p-4 text-sm text-slate-500">No data available for chart.</div>;
   }

package/src/components/Hero.tsx

@@ -0,0 +1,59 @@
+'use client';
+
+import React from 'react';
+import { useConfig } from '@/components/ConfigProvider';
+import { ChatWindow } from '@/components/ChatWindow';
+import { LANDING_PAGE_CONTENT, VECTOR_DATABASES, AI_MODELS } from '@/app/constants';
+
+export function Hero() {
+  const { ui } = useConfig();
+
+  return (
+    <div className="grid lg:grid-cols-2 gap-12 items-start">
+      <div className="flex flex-col gap-6 pt-4">
+        <div
+          className="inline-flex items-center gap-2 px-4 py-1.5 rounded-full text-xs font-medium border w-fit"
+          style={{ borderColor: `${ui.primaryColor}40`, color: ui.primaryColor, background: `${ui.primaryColor}10` }}
+        >
+          <span className="w-1.5 h-1.5 rounded-full animate-pulse" style={{ background: ui.primaryColor }} />
+          {LANDING_PAGE_CONTENT.hero.badge}
+        </div>
+        <h1 className="text-5xl md:text-7xl font-black text-slate-900 dark:text-white mb-6 tracking-tight">
+          {LANDING_PAGE_CONTENT.hero.title.split('for')[0]} <br />
+          <span className="text-transparent bg-clip-text" style={{ backgroundImage: `linear-gradient(to right, ${ui.primaryColor}, ${ui.accentColor})` }}>
+            for {LANDING_PAGE_CONTENT.hero.title.split('for')[1]}
+          </span>
+        </h1>
+        <p className="text-lg md:text-xl text-slate-600 dark:text-white/40 max-w-2xl leading-relaxed">
+          {LANDING_PAGE_CONTENT.hero.subtitle}
+        </p>
+        <div className="flex flex-col gap-4 mt-4">
+          <div className="flex flex-col gap-2">
+            <span className="text-[10px] font-black text-slate-400 dark:text-white/30 uppercase tracking-[0.2em] ml-1">Vector Ecosystem</span>
+            <div className="flex flex-wrap gap-2">
+              {VECTOR_DATABASES.map(({ Icon, label }) => (
+                <span key={label} className="flex items-center gap-1.5 px-3 py-1.5 rounded-lg bg-white dark:bg-white/5 border border-slate-200 dark:border-white/10 text-slate-600 dark:text-white/60 text-[11px] font-semibold hover:bg-slate-50 dark:hover:bg-white/8 transition-all shadow-sm group">
+                  <Icon className="w-3 h-3 transition-transform group-hover:scale-110" style={{ color: ui.primaryColor }} /> {label}
+                </span>
+              ))}
+            </div>
+          </div>
+
+          <div className="flex flex-col gap-2">
+            <span className="text-[10px] font-black text-slate-400 dark:text-white/30 uppercase tracking-[0.2em] ml-1">AI Model Garden</span>
+            <div className="flex flex-wrap gap-2">
+              {AI_MODELS.map(({ Icon, label }) => (
+                <span key={label} className="flex items-center gap-1.5 px-3 py-1.5 rounded-lg bg-white dark:bg-white/5 border border-slate-200 dark:border-white/10 text-slate-600 dark:text-white/60 text-[11px] font-semibold hover:bg-slate-50 dark:hover:bg-white/8 transition-all shadow-sm group">
+                  <Icon className="w-3 h-3 transition-transform group-hover:scale-110" style={{ color: ui.accentColor }} /> {label}
+                </span>
+              ))}
+            </div>
+          </div>
+        </div>
+      </div>
+      <div className="lg:sticky lg:top-6 h-[calc(100vh-3rem)] min-h-[500px] max-h-[800px]">
+        <ChatWindow className="w-full h-full" />
+      </div>
+    </div>
+  );
+}

package/src/components/HourglassLoader.tsx

@@ -0,0 +1,87 @@
+import React from 'react';
+
+interface HourglassLoaderProps {
+  size?: number;
+  primaryColor?: string;
+  accentColor?: string;
+  glow?: boolean;
+}
+
+const HourglassLoader: React.FC<HourglassLoaderProps> = ({
+  size = 16,
+  primaryColor = '#10b981',
+  glow = false,
+}) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 100 100"
+      preserveAspectRatio="xMidYMid"
+      style={{
+        width: size,
+        height: size,
+        background: 'transparent',
+        filter: glow ? `drop-shadow(0 0 4px ${primaryColor})` : 'none',
+      }}
+    >
+      <g>
+        {/* Rotation Animation */}
+        <animateTransform
+          attributeName="transform"
+          type="rotate"
+          calcMode="spline"
+          values="0 50 50; 0 50 50; 180 50 50"
+          keyTimes="0; 0.8; 1"
+          keySplines="0 0 1 1; 0.4 0 0.2 1"
+          dur="2s"
+          repeatCount="indefinite"
+        />
+
+        {/* Glass Outline */}
+        <path
+          d="M 25 15 L 75 15 L 75 20 L 55 50 L 75 80 L 75 85 L 25 85 L 25 80 L 45 50 L 25 20 Z"
+          fill="none"
+          stroke={primaryColor}
+          strokeWidth="5"
+          strokeLinejoin="round"
+          strokeLinecap="round"
+        />
+
+        {/* Top Sand */}
+        <path fill={primaryColor}>
+          <animate
+            attributeName="d"
+            values="M 30 20 L 70 20 L 50 50 L 50 50 Z; M 50 50 L 50 50 L 50 50 L 50 50 Z; M 50 50 L 50 50 L 50 50 L 50 50 Z"
+            keyTimes="0; 0.8; 1"
+            dur="2s"
+            repeatCount="indefinite"
+          />
+        </path>
+
+        {/* Bottom Sand */}
+        <path fill={primaryColor}>
+          <animate
+            attributeName="d"
+            values="M 30 80 L 70 80 L 70 80 L 30 80 Z; M 30 80 L 70 80 L 50 50 L 50 50 Z; M 30 80 L 70 80 L 50 50 L 50 50 Z"
+            keyTimes="0; 0.8; 1"
+            dur="2s"
+            repeatCount="indefinite"
+          />
+        </path>
+
+        {/* Falling Sand Stream */}
+        <line x1="50" y1="50" x2="50" y2="80" stroke={primaryColor} strokeWidth="3">
+          <animate
+            attributeName="opacity"
+            values="0; 1; 1; 0; 0"
+            keyTimes="0; 0.1; 0.7; 0.8; 1"
+            dur="2s"
+            repeatCount="indefinite"
+          />
+        </line>
+      </g>
+    </svg>
+  );
+};
+
+export default HourglassLoader;

package/src/components/Lifecycle.tsx

@@ -0,0 +1,37 @@
+'use client';
+
+import React from 'react';
+import { LANDING_PAGE_CONTENT, PIPELINE_STEPS } from '@/app/constants';
+
+export function Lifecycle() {
+  return (
+    <div className="mt-24 mb-12">
+      <h2 className="text-2xl font-bold text-slate-900 dark:text-white text-center mb-2">{LANDING_PAGE_CONTENT.lifecycle.title}</h2>
+      <div className="relative max-w-5xl mx-auto py-12">
+        <div className="absolute left-1/2 top-0 bottom-0 w-0.5 bg-slate-200 dark:bg-white/10 -translate-x-1/2 hidden md:block" />
+        <div className="space-y-12 md:space-y-0">
+          {PIPELINE_STEPS.map(({ step, Icon, title, desc, colors }, index) => {
+            const isLeft = index % 2 === 0;
+            return (
+              <div key={step} className={`relative flex flex-col md:flex-row items-center gap-8 ${isLeft ? 'md:flex-row' : 'md:flex-row-reverse'}`}>
+                <div className={`w-full md:w-1/2 relative flex ${isLeft ? 'justify-end' : 'justify-start'}`}>
+                  <div className="relative p-6 rounded-2xl border border-slate-200 dark:border-white/10 bg-white dark:bg-white/3 max-w-md text-left overflow-hidden group">
+                    <div className="absolute -right-2 -bottom-4 text-7xl font-bold opacity-[0.1] italic" style={{ color: colors.from }}>{step}</div>
+                    <h3 className="font-semibold text-slate-900 dark:text-white mb-2 text-lg flex items-center gap-2">
+                      <Icon className="w-5 h-5" style={{ color: colors.from }} /> {title}
+                    </h3>
+                    <p className="text-slate-600 dark:text-white/40 text-sm leading-relaxed">{desc}</p>
+                  </div>
+                </div>
+                <div className="relative z-10 w-12 h-12 rounded-2xl flex items-center justify-center shadow-xl border-4 border-slate-50 dark:border-[#080811]" style={{ background: `linear-gradient(135deg, ${colors.from}, ${colors.to})` }}>
+                  <Icon className="w-6 h-6 text-white" />
+                </div>
+                <div className="hidden md:block md:w-1/2" />
+              </div>
+            );
+          })}
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/components/MarkdownComponents.tsx

@@ -0,0 +1,143 @@
+import React from 'react';
+import { Components } from 'react-markdown';
+import { UIDispatcher } from './UIDispatcher';
+import { Product } from '../types';
+import { ChatViewportSize } from '../types/props';
+
+interface MarkdownComponentsProps {
+  primaryColor: string;
+  accentColor: string;
+  isStreaming: boolean;
+  onAddToCart?: (product: Product) => void;
+  viewportSize: ChatViewportSize;
+}
+
+export function createMarkdownComponents({
+  primaryColor,
+  accentColor,
+  isStreaming,
+  onAddToCart,
+  viewportSize,
+}: MarkdownComponentsProps): Components {
+  return {
+    p: ({ ...props }: React.HTMLAttributes<HTMLParagraphElement>) => (
+      <p className="whitespace-pre-line" {...props} />
+    ),
+    table: ({ ...props }: React.HTMLAttributes<HTMLTableElement>) => {
+      // Fix: intercept table rendering during streaming instead of using sentinel
+      if (isStreaming) {
+        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">
+            <div className="w-4 h-4 border-2 border-indigo-500 border-t-transparent rounded-full animate-spin" />
+            <p className="text-xs text-slate-500 font-medium italic animate-pulse">
+              Generating data table...
+            </p>
+          </div>
+        );
+      }
+
+      return (
+        <div className="not-prose overflow-hidden my-5 rounded-xl border border-slate-200 dark:border-white/10 shadow-sm bg-white dark:bg-slate-900/50">
+          <div className="overflow-x-auto">
+            <table
+              className="!table w-full text-left border-collapse min-w-[400px] text-sm"
+              {...props}
+            />
+          </div>
+        </div>
+      );
+    },
+    thead: ({ ...props }: React.HTMLAttributes<HTMLTableSectionElement>) => (
+      <thead
+        className="!table-header-group bg-slate-50 dark:bg-white/5 border-b border-slate-200 dark:border-white/10"
+        {...props}
+      />
+    ),
+    tbody: ({ ...props }: React.HTMLAttributes<HTMLTableSectionElement>) => (
+      <tbody className="!table-row-group divide-y divide-slate-100 dark:divide-white/5" {...props} />
+    ),
+    tr: ({ ...props }: React.HTMLAttributes<HTMLTableRowElement>) => (
+      <tr
+        className="!table-row hover:bg-slate-50/70 dark:hover:bg-white/5 transition-colors"
+        {...props}
+      />
+    ),
+    th: ({ children, ...props }: React.ThHTMLAttributes<HTMLTableCellElement>) => (
+      <th
+        className="!table-cell px-4 py-3 font-bold text-slate-700 dark:text-white/90 whitespace-nowrap text-[11px] uppercase tracking-wider text-left"
+        {...props}
+      >
+        {normaliseChild(children)}
+      </th>
+    ),
+    td: ({ children, ...props }: React.TdHTMLAttributes<HTMLTableCellElement>) => (
+      <td
+        className="!table-cell px-4 py-3 text-slate-600 dark:text-white/70 whitespace-nowrap text-sm"
+        {...props}
+      >
+        {normaliseChild(children)}
+      </td>
+    ),
+    code({
+      inline,
+      className,
+      children,
+      ...props
+    }: React.HTMLAttributes<HTMLElement> & { inline?: boolean }) {
+      const lang = /language-(\w+)/.exec(className ?? '')?.[1];
+
+      if (!inline && (lang === 'ui' || lang === 'chart' || lang === 'json')) {
+        const content = String(children ?? '').trim();
+        // Since we extract pure components, UIDispatcher handles these formats
+        return (
+          <UIDispatcher
+            rawContent={content}
+            primaryColor={primaryColor}
+            accentColor={accentColor}
+            isStreaming={isStreaming}
+            onAddToCart={onAddToCart}
+            viewportSize={viewportSize}
+          />
+        );
+      }
+
+      if (!inline) {
+        const content = String(children ?? '').trim();
+        // Fallback catch for json payload without lang block
+        if (content.startsWith('{') && content.endsWith('}')) {
+          return (
+            <UIDispatcher
+              rawContent={content}
+              primaryColor={primaryColor}
+              accentColor={accentColor}
+              isStreaming={isStreaming}
+              onAddToCart={onAddToCart}
+              viewportSize={viewportSize}
+            />
+          );
+        }
+      }
+
+      return (
+        <code className={className} {...props}>
+          {typeof children === 'string' || typeof children === 'number'
+            ? children
+            : JSON.stringify(children)}
+        </code>
+      );
+    },
+  };
+}
+
+/** Safely render table cell children that might be plain objects. */
+function normaliseChild(children: unknown): React.ReactNode {
+  if (
+    typeof children === 'object' &&
+    children !== null &&
+    !Array.isArray(children) &&
+    !React.isValidElement(children)
+  ) {
+    return JSON.stringify(children);
+  }
+  return children as React.ReactNode;
+}