@retrivora-ai/rag-engine 1.9.7 → 1.9.9

package/src/components/MessageBubble.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import React from 'react';
-import { Bot, User, ChevronDown, ChevronRight, Activity, Copy, Check } from 'lucide-react';
+import { Bot, User, ChevronDown, ChevronRight, Activity, Copy, Check, ThumbsUp, ThumbsDown, Clock } from 'lucide-react';
 import ReactMarkdown from 'react-markdown';
 import { MessageBubbleProps, Product, UITransformationResponse } from '../types';
 import { SourceCard } from './SourceCard';
@@ -39,12 +39,111 @@ function normalizePlusSeparatedLists(raw: string): string {
 
 function stripLeakedAnswerWrappers(raw: string): string {
   return raw
-    .replace(/<prose\s+answer(?:\s+in\s+[^>]*)?>\s*([\s\S]*?)\s*<\/prose>/gi, '$1')
+    .replace(/<prose\s+answer(?:\s+in\s+[^>]*)?>[\s\S]*?<\/prose>/gi, '$1')
     .replace(/<\/?prose(?:\s+answer)?[^>]*>/gi, '')
     .replace(/\n{3,}/g, '\n\n')
     .trim();
 }
 
+function formatTime(isoString?: string): string {
+  if (!isoString) return '';
+  try {
+    const d = new Date(isoString);
+    return d.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
+  } catch {
+    return '';
+  }
+}
+
+// ─── Feedback Buttons ─────────────────────────────────────────────────────────
+
+interface FeedbackBarProps {
+  messageId: string;
+  onFeedback: (messageId: string, rating: 'thumbs_up' | 'thumbs_down') => void;
+  primaryColor: string;
+}
+
+function FeedbackBar({ messageId, onFeedback, primaryColor }: FeedbackBarProps) {
+  const [rating, setRating] = React.useState<'thumbs_up' | 'thumbs_down' | null>(null);
+  const [submitting, setSubmitting] = React.useState(false);
+
+  const handleRate = async (r: 'thumbs_up' | 'thumbs_down') => {
+    if (rating !== null || submitting) return;
+    setSubmitting(true);
+    setRating(r);
+    try {
+      await onFeedback(messageId, r);
+    } catch {
+      // Rating already set optimistically — keep it
+    } finally {
+      setSubmitting(false);
+    }
+  };
+
+  const isLocked = rating !== null;
+
+  return (
+    <div className="flex items-center gap-1">
+      {/* Divider */}
+      <span className="h-3 w-px bg-slate-200 dark:bg-white/10 mx-1" />
+
+      {/* Thumbs Up */}
+      <button
+        onClick={() => handleRate('thumbs_up')}
+        disabled={isLocked}
+        title={rating === 'thumbs_up' ? 'You liked this' : 'Good response'}
+        className={`group relative flex items-center justify-center w-6 h-6 rounded-lg transition-all duration-200 cursor-pointer border ${
+          rating === 'thumbs_up'
+            ? 'bg-emerald-50 dark:bg-emerald-500/10 border-emerald-200 dark:border-emerald-500/25 text-emerald-600 dark:text-emerald-400 scale-110'
+            : rating === 'thumbs_down'
+            ? 'opacity-30 border-transparent text-slate-300 dark:text-white/20 cursor-not-allowed'
+            : 'border-transparent text-slate-300 dark:text-white/20 hover:text-emerald-500 dark:hover:text-emerald-400 hover:bg-emerald-50 dark:hover:bg-emerald-500/10 hover:border-emerald-200 dark:hover:border-emerald-500/20 hover:scale-110'
+        }`}
+      >
+        <ThumbsUp className="w-3 h-3" />
+        {/* Tooltip */}
+        {!isLocked && (
+          <span className="absolute -top-8 left-1/2 -translate-x-1/2 px-2 py-1 text-[10px] font-medium bg-slate-800 dark:bg-slate-700 text-white rounded-lg opacity-0 group-hover:opacity-100 transition-opacity pointer-events-none whitespace-nowrap shadow-lg z-10">
+            Good response
+          </span>
+        )}
+      </button>
+
+      {/* Thumbs Down */}
+      <button
+        onClick={() => handleRate('thumbs_down')}
+        disabled={isLocked}
+        title={rating === 'thumbs_down' ? 'You disliked this' : 'Bad response'}
+        className={`group relative flex items-center justify-center w-6 h-6 rounded-lg transition-all duration-200 cursor-pointer border ${
+          rating === 'thumbs_down'
+            ? 'bg-rose-50 dark:bg-rose-500/10 border-rose-200 dark:border-rose-500/25 text-rose-600 dark:text-rose-400 scale-110'
+            : rating === 'thumbs_up'
+            ? 'opacity-30 border-transparent text-slate-300 dark:text-white/20 cursor-not-allowed'
+            : 'border-transparent text-slate-300 dark:text-white/20 hover:text-rose-500 dark:hover:text-rose-400 hover:bg-rose-50 dark:hover:bg-rose-500/10 hover:border-rose-200 dark:hover:border-rose-500/20 hover:scale-110'
+        }`}
+      >
+        <ThumbsDown className="w-3 h-3" />
+        {!isLocked && (
+          <span className="absolute -top-8 left-1/2 -translate-x-1/2 px-2 py-1 text-[10px] font-medium bg-slate-800 dark:bg-slate-700 text-white rounded-lg opacity-0 group-hover:opacity-100 transition-opacity pointer-events-none whitespace-nowrap shadow-lg z-10">
+            Bad response
+          </span>
+        )}
+      </button>
+
+      {/* Confirmation pill */}
+      {isLocked && (
+        <span className={`ml-1 text-[10px] font-semibold px-2 py-0.5 rounded-full border transition-all duration-300 ${
+          rating === 'thumbs_up'
+            ? 'text-emerald-600 dark:text-emerald-400 bg-emerald-50 dark:bg-emerald-500/10 border-emerald-200 dark:border-emerald-500/20'
+            : 'text-rose-600 dark:text-rose-400 bg-rose-50 dark:bg-rose-500/10 border-rose-200 dark:border-rose-500/20'
+        }`}>
+          {rating === 'thumbs_up' ? 'Helpful' : 'Not helpful'}
+        </span>
+      )}
+    </div>
+  );
+}
+
 // ─── Main component ───────────────────────────────────────────────────────────
 
 export function MessageBubble({
@@ -55,6 +154,7 @@ export function MessageBubble({
   accentColor = '#8b5cf6',
   onAddToCart,
   viewportSize = 'large',
+  onFeedback,
 }: MessageBubbleProps) {
   const isUser = message.role === 'user';
   const isCompact = viewportSize === 'compact';
@@ -85,7 +185,7 @@ export function MessageBubble({
       if (type && !['text', 'table'].includes(type)) return true;
     }
     if (structuredContent.payload) {
-      return /"?(?:view|type|chartType)"?\s*:\s*"?(?:chart|carousel|pie|bar|line|product_carousel)"?/i.test(structuredContent.payload);
+      return /\"?(?:view|type|chartType)\"?\s*:\s*\"?(?:chart|carousel|pie|bar|line|product_carousel)\"?/i.test(structuredContent.payload);
     }
     return false;
   }, [message.uiTransformation, structuredContent.payload]);
@@ -129,18 +229,10 @@ export function MessageBubble({
   const processedMarkdown = React.useMemo<string>(() => {
     let raw = structuredContent.payload ? structuredContent.text : (cleanContent || message.content);
 
-    // 0. Pre-sanitize: strip $ from non-monetary whole integers.
-    // Real prices always have a decimal (e.g. $257.00). A bare $168 or $9680811891595 is NOT a price.
     raw = raw.replace(/\$\s*(\d+)(?!\.\d)/g, '$1');
     raw = normalizePlusSeparatedLists(raw);
     raw = stripLeakedAnswerWrappers(raw);
-
-    // 0a. Strip bold (**...**) from inline field labels.
-    // The LLM wraps field names like **Stock** — 168 or **EAN** — 9680811891595 in bold.
-    // We want to strip the ** so it renders as plain text, not bold.
     raw = raw.replace(/\*\*([^*\n]+)\*\*(\s*[—\-–:]\s*)/g, '$1$2');
-
-    // 0b. Remove duplicate lines (LLM sometimes repeats fields like Stock, EAN twice)
     raw = raw
       .split('\n')
       .filter((line, idx, arr) => {
@@ -148,13 +240,12 @@ export function MessageBubble({
         return !trimmed || arr.findIndex(l => l.trim() === trimmed) === idx;
       })
       .join('\n');
+
     const hasStructuredUiBlock = Boolean(structuredContent.payload) || /```(?:ui|json|chart)\s*[\s\S]*?"(?:view|chartType|type|data|items|rows|products|results)"\s*:/i.test(raw);
 
-    // 1. Structural fixes
-    raw = raw.replace(/([^\n])\n\|/g, '$1\n\n|') // Ensure blank line before table
-      .replace(/(\|[^\n]*\|)\n\n+(?=\|)/g, '$1\n'); // Remove blank lines between rows
+    raw = raw.replace(/([^\n])\n\|/g, '$1\n\n|')
+      .replace(/(\|[^\n]*\|)\n\n+(?=\|)/g, '$1\n');
 
-    // 2. HEALING: Wrap naked JSON blocks
     if (!isStreaming) {
       raw = raw.replace(/(?:^|\n)\s*\{[\s\S]*\}\s*(?:\n|$)/g, (match) => {
         if (match.includes('```')) return match;
@@ -166,7 +257,6 @@ export function MessageBubble({
       });
     }
 
-    // 2b. Suppress duplicated markdown tables if a UI block is present
     if (hasStructuredUiBlock) {
       raw = stripStructuredUiLabels(stripMarkdownTables(raw))
         .replace(/\n{3,}/g, '\n\n')
@@ -182,18 +272,25 @@ export function MessageBubble({
     [primaryColor, accentColor, isStreaming, onAddToCart, viewportSize],
   );
 
+  const timeLabel = formatTime(message.createdAt);
+  const isCompleted = !isStreaming && message.content;
+
   // ── Render ─────────────────────────────────────────────────────────────────
   return (
     <div className={`flex ${isCompact ? 'gap-2' : 'gap-3'} ${isUser ? 'flex-row-reverse' : 'flex-row'} items-start`}>
       {/* Avatar */}
       <div
-        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'
-          }`}
+        className={`flex-shrink-0 ${isCompact ? 'w-7 h-7' : 'w-8 h-8'} rounded-full flex items-center justify-center shadow-md transition-all duration-300 ${
+          isUser
+            ? 'text-white'
+            : 'bg-gradient-to-br from-slate-100 to-slate-200 dark:from-white/10 dark:to-white/5 text-slate-600 dark:text-white/70 ring-1 ring-slate-200/80 dark:ring-white/10'
+        } ${isStreaming && !isUser ? 'ring-2 ring-offset-1 ring-offset-transparent animate-pulse' : ''}`}
         style={isUser ? { background: `linear-gradient(135deg, ${primaryColor}, ${accentColor})` } : {}}
       >
-        {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'}`} />}
+        {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 min-w-0 ${isCompact ? 'max-w-[94%]' : isMedium ? 'max-w-[92%]' : 'max-w-[90%]'} ${isUser ? 'items-end' : 'items-start'}`}>
@@ -208,28 +305,30 @@ export function MessageBubble({
 
         {/* Bubble */}
         <div
-          className={`relative group ${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'
-            }`}
+          className={`relative group ${isCompact ? 'px-3 py-2.5 text-[13px]' : 'px-4 py-3 text-sm'} rounded-2xl leading-relaxed transition-shadow duration-200 ${
+            isUser
+              ? 'text-white rounded-tr-sm shadow-md hover:shadow-lg'
+              : 'bg-white dark:bg-white/5 border border-slate-200/80 dark:border-white/10 text-slate-800 dark:text-white/90 rounded-tl-sm shadow-sm hover:shadow-md hover:border-slate-300/60 dark:hover:border-white/15'
+          }`}
           style={
             isUser ? { background: `linear-gradient(135deg, ${primaryColor}, ${accentColor})` } : {}
           }
         >
           {/* Floating Copy Button for completed assistant messages */}
-          {!isUser && !isStreaming && message.content && (
+          {!isUser && isCompleted && (
             <button
               onClick={handleCopy}
               className={`absolute top-2 right-2 p-1.5 rounded-lg border transition-all duration-200 cursor-pointer ${
                 copied
                   ? 'bg-emerald-500/10 border-emerald-500/20 text-emerald-500 dark:text-emerald-400'
-                  : 'bg-slate-500/5 hover:bg-slate-500/10 border-slate-200 dark:border-white/10 text-slate-400 dark:text-white/30 hover:text-slate-600 dark:hover:text-white/60'
+                  : 'bg-white/60 dark:bg-white/5 hover:bg-white dark:hover:bg-white/10 border-slate-200/60 dark:border-white/10 text-slate-300 dark:text-white/20 hover:text-slate-600 dark:hover:text-white/60 hover:border-slate-300 dark:hover:border-white/20'
               } opacity-0 group-hover:opacity-100 backdrop-blur-sm shadow-sm scale-95 group-hover:scale-100`}
-              title={copied ? "Copied!" : "Copy response"}
+              title={copied ? 'Copied!' : 'Copy response'}
             >
               {copied ? <Check className="w-3.5 h-3.5" /> : <Copy className="w-3.5 h-3.5" />}
             </button>
           )}
+
           {isStreaming && !message.content ? (
             <span className="flex items-center gap-1 py-1">
               <span className="w-1.5 h-1.5 rounded-full bg-slate-400 dark:bg-white/60 animate-bounce [animation-delay:0ms]" />
@@ -255,28 +354,20 @@ export function MessageBubble({
                 </ReactMarkdown>
               )}
 
-              {/* Fix: Always show streaming cursor when isStreaming is true */}
               {isStreaming && (
-                <span className="inline-flex items-center gap-1.5 ml-2 text-emerald-500 animate-pulse align-middle text-xs font-medium">
-                  <HourglassLoader
-                    size={18}
-                    primaryColor={primaryColor}
-                    accentColor={accentColor}
-                    glow={false} />
-                  Thinking...
-                </span>
+                <span 
+                  className="inline-block w-2.5 h-4 ml-1.5 animate-[pulse_1.2s_infinite] align-middle rounded-sm"
+                  style={{ backgroundColor: primaryColor }}
+                />
               )}
             </div>
           )}
         </div>
 
-        {/* Auto-generated visualization — show eagerly during streaming if sources are available */}
+        {/* Auto-generated visualization */}
         {(() => {
           if (isUser || structuredContent.payload) return null;
 
-          // During streaming: if we have sources but no uiTransformation yet,
-          // eagerly render a skeleton carousel for product queries so the user
-          // sees something immediately instead of waiting for the metadata frame.
           if (isStreaming && !message.uiTransformation && sources && sources.length > 0) {
             const hasProductSource = sources.some(s =>
               s.metadata && Object.keys(s.metadata).some(k =>
@@ -301,7 +392,7 @@ export function MessageBubble({
           if (!message.uiTransformation) return null;
           const ui = message.uiTransformation as UITransformationResponse;
           const textContent = (ui.data as { content?: string })?.content ?? '';
-          
+
           const isNegativeOrFallbackText =
             textContent.toLowerCase().includes('cannot answer') ||
             textContent.toLowerCase().includes('no relevant data') ||
@@ -315,7 +406,7 @@ export function MessageBubble({
              !['text', 'table'].includes(ui.type) ||
              (ui.type === 'text' && !hasRichUI && allProducts.length === 0 && textContent &&
               !processedMarkdown.toLowerCase().includes(textContent.trim().toLowerCase())));
-              
+
           if (!shouldShow) return null;
           return (
             <div className="w-full mt-3">
@@ -330,7 +421,6 @@ export function MessageBubble({
           );
         })()}
 
-
         {/* Product Carousel */}
         {!isUser && !hasRichUI && !shouldSuppressProductCarousel && allProducts.length > 0 && (
           <div className="w-full mt-1">
@@ -342,28 +432,50 @@ export function MessageBubble({
           </div>
         )}
 
-        {/* Footer actions: Sources and Trace */}
+        {/* Footer actions: Sources, Trace, Timestamp & Feedback */}
         {!isUser && (
-          <div className="flex items-center gap-4 mt-1 w-full flex-wrap">
+          <div className={`flex items-center gap-3 mt-1.5 w-full flex-wrap ${isCompact ? 'gap-2' : 'gap-3'}`}>
+            {/* Sources toggle */}
             {sources && sources.length > 0 && (
               <button
                 onClick={() => setShowSources(s => !s)}
-                className="text-[11px] text-indigo-400 hover:text-indigo-300 transition-colors flex items-center gap-1"
+                className="text-[11px] text-indigo-400 hover:text-indigo-300 dark:text-indigo-400/70 dark:hover:text-indigo-300 transition-colors flex items-center gap-1 font-medium"
               >
                 {showSources ? <ChevronDown className="w-3 h-3" /> : <ChevronRight className="w-3 h-3" />}
-                {sources.length} source{sources.length !== 1 ? 's' : ''} used
+                {sources.length} source{sources.length !== 1 ? 's' : ''}
               </button>
             )}
 
+            {/* Trace toggle */}
             {message.trace && (
               <button
                 onClick={() => setShowTrace(t => !t)}
-                className="text-[11px] text-emerald-500 hover:text-emerald-400 transition-colors flex items-center gap-1"
+                className="text-[11px] text-emerald-500/70 hover:text-emerald-400 dark:text-emerald-500/50 dark:hover:text-emerald-400 transition-colors flex items-center gap-1 font-medium"
               >
                 <Activity className="w-3 h-3" />
-                {showTrace ? 'Hide Trace' : 'Trace'}
+                {showTrace ? 'Hide trace' : 'Trace'}
               </button>
             )}
+
+            {/* Spacer */}
+            <div className="flex-1" />
+
+            {/* Timestamp */}
+            {timeLabel && isCompleted && (
+              <span className="flex items-center gap-1 text-[10px] text-slate-300 dark:text-white/20 font-medium select-none">
+                <Clock className="w-2.5 h-2.5" />
+                {timeLabel}
+              </span>
+            )}
+
+            {/* Feedback thumbs — only for completed, non-user messages with an ID */}
+            {isCompleted && onFeedback && message.id && (
+              <FeedbackBar
+                messageId={message.id}
+                onFeedback={onFeedback}
+                primaryColor={primaryColor}
+              />
+            )}
           </div>
         )}
 

package/src/components/constants.tsx

@@ -17,6 +17,8 @@ import {
   FileText,
   Puzzle,
   MessageSquare,
+  Cpu,
+  Cloud,
 } from 'lucide-react';
 import { ArchitectureCardProps, Snippet, PipelineStep, ProviderPill } from '../types';
 
@@ -51,6 +53,8 @@ export const AI_MODELS: ProviderPill[] = [
   { Icon: Sparkles, label: 'OpenAI' },
   { Icon: Bot, label: 'Anthropic' },
   { Icon: Brain, label: 'Gemini' },
+  { Icon: Cpu, label: 'Groq' },
+  { Icon: Cloud, label: 'Qwen' },
   { Icon: Code, label: 'Copilot' },
   { Icon: Terminal, label: 'LiteLLM' },
 ];
@@ -273,3 +277,227 @@ export const BORDER_RADIUS_MAP: Record<string, string> = {
   xl: 'rounded-xl',
   full: 'rounded-3xl',
 };
+
+export interface RagPatternStep {
+  label: string;
+  type: 'input' | 'process' | 'database' | 'model' | 'output';
+  color: string;
+}
+
+export interface RagPattern {
+  id: string;
+  name: string;
+  tagline: string;
+  description: string;
+  pros: string[];
+  cons: string[];
+  snippet: string;
+  color: string;
+  flowSteps: RagPatternStep[];
+}
+
+export const RAG_PATTERNS: RagPattern[] = [
+  {
+    id: 'naive',
+    name: 'Naive RAG',
+    tagline: 'Standard semantic search pipeline',
+    description: 'The foundation pattern: splits documents into text chunks, embeddings are stored in a vector database, and relevant context is fetched via direct query similarity to augment the model prompt.',
+    pros: ['Very low latency', 'Low resource cost', 'Simple implementation'],
+    cons: ['Struggles with complex multi-hop queries', 'No ranking optimization', 'Can return irrelevant context chunks'],
+    color: '#d97706', // Amber/Brown
+    snippet: `import { Retrivora } from '@retrivora-ai/rag-engine/server';
+
+const ai = new Retrivora({
+  projectId: 'naive-rag-demo',
+  vectorDatabase: {
+    provider: 'pinecone',
+    indexName: 'knowledge-base',
+  },
+  workflow: {
+    type: 'simple-rag'
+  }
+});`,
+    flowSteps: [
+      { label: 'Documents', type: 'input', color: 'bg-amber-100 text-amber-800 dark:bg-amber-950/40 dark:text-amber-300' },
+      { label: 'Chunking', type: 'process', color: 'bg-amber-50 text-amber-700 dark:bg-amber-900/20 dark:text-amber-400' },
+      { label: 'Embedding Model', type: 'model', color: 'bg-amber-100 text-amber-900 dark:bg-amber-800/30 dark:text-amber-200' },
+      { label: 'Vector Store', type: 'database', color: 'bg-amber-200 text-amber-950 dark:bg-amber-700/40 dark:text-amber-100' },
+      { label: 'Context Prompt', type: 'process', color: 'bg-amber-50 text-amber-700 dark:bg-amber-900/20 dark:text-amber-400' },
+      { label: 'LLM Generator', type: 'model', color: 'bg-indigo-100 text-indigo-900 dark:bg-indigo-800/30 dark:text-indigo-200' },
+    ]
+  },
+  {
+    id: 'retrieve-and-rerank',
+    name: 'Retrieve-and-rerank',
+    tagline: 'High-precision contextual relevance',
+    description: 'Enhances standard RAG by fetching a larger pool of vector candidates and feeding them through a cross-encoder Reranker model. The reranker scores context chunks dynamically relative to query intent, filtering noise.',
+    pros: ['Extremely high context precision', 'Better generation accuracy', 'Mitigates hallucination rates'],
+    cons: ['Adds slight latency bottleneck (~100-300ms)', 'Higher computational requirements'],
+    color: '#2563eb', // Blue
+    snippet: `import { Retrivora } from '@retrivora-ai/rag-engine/server';
+
+const ai = new Retrivora({
+  projectId: 'rerank-rag-demo',
+  vectorDatabase: {
+    provider: 'pinecone',
+    indexName: 'knowledge-base',
+  },
+  retrieval: {
+    strategy: 'contextual-compression',
+    useReranking: true, // Enables cross-encoder re-evaluation
+    topK: 5,
+  }
+});`,
+    flowSteps: [
+      { label: 'Query Input', type: 'input', color: 'bg-blue-100 text-blue-800 dark:bg-blue-950/40 dark:text-blue-300' },
+      { label: 'Vector Retrieval', type: 'database', color: 'bg-blue-200 text-blue-950 dark:bg-blue-700/40 dark:text-blue-100' },
+      { label: 'Reranker Model', type: 'model', color: 'bg-indigo-100 text-indigo-950 dark:bg-indigo-700/40 dark:text-indigo-100' },
+      { label: 'Filtered Context', type: 'process', color: 'bg-blue-50 text-blue-700 dark:bg-blue-900/20 dark:text-blue-400' },
+      { label: 'Generative Model', type: 'model', color: 'bg-violet-100 text-violet-900 dark:bg-violet-800/30 dark:text-violet-200' },
+    ]
+  },
+  {
+    id: 'multimodal',
+    name: 'Multimodal RAG',
+    tagline: 'Search and reason across text and media',
+    description: 'Ingests both unstructured text documents and visual/audio/structured assets. It queries multi-modal embeddings, feeding retrieved visuals and matched context fragments to multimodal LLMs (like Gemini or Claude) to support diagrams, tables, and media outputs.',
+    pros: ['Handles images, PDFs, charts, audio', 'Deeper context retrieval', 'Generates visual answers'],
+    cons: ['Multimodal embeddings are computationally expensive', 'Higher token payload sizes'],
+    color: '#7c3aed', // Purple
+    snippet: `import { Retrivora } from '@retrivora-ai/rag-engine/server';
+
+const ai = new Retrivora({
+  projectId: 'multimodal-rag-demo',
+  llm: {
+    provider: 'gemini',
+    model: 'gemini-2.5-flash', // Multimodal reasoning model
+  },
+  embedding: {
+    provider: 'gemini',
+    model: 'text-embedding-004',
+  },
+  workflow: {
+    type: 'multimodal-rag'
+  }
+});`,
+    flowSteps: [
+      { label: 'Multi-modal Docs', type: 'input', color: 'bg-purple-100 text-purple-800 dark:bg-purple-950/40 dark:text-purple-300' },
+      { label: 'Multi-modal Embed', type: 'model', color: 'bg-purple-50 text-purple-700 dark:bg-purple-900/20 dark:text-purple-400' },
+      { label: 'Vector Store', type: 'database', color: 'bg-purple-200 text-purple-950 dark:bg-purple-700/40 dark:text-purple-100' },
+      { label: 'Media Context', type: 'process', color: 'bg-purple-100 text-purple-950 dark:bg-purple-800/40 dark:text-purple-100' },
+      { label: 'Multimodal LLM', type: 'model', color: 'bg-violet-100 text-violet-900 dark:bg-violet-800/30 dark:text-violet-200' },
+    ]
+  },
+  {
+    id: 'graph',
+    name: 'Graph RAG',
+    tagline: 'Entity-relationship semantic reasoning',
+    description: 'Builds a knowledge graph structure from raw documents using an LLM extractor. Entity-to-entity and entity-to-document relationships are resolved, allowing queries to retrieve structured semantic contexts (nodes & relationships) to resolve structural, relational, and hierarchy-based questions.',
+    pros: ['Excellent for tracing connections', 'Resolves hierarchy and relationships', 'Grounded fact validation'],
+    cons: ['Heavy write-time pipeline ingestion cost', 'Requires graph database setup'],
+    color: '#059669', // Emerald
+    snippet: `import { Retrivora } from '@retrivora-ai/rag-engine/server';
+
+const ai = new Retrivora({
+  projectId: 'graph-rag-demo',
+  graphDb: {
+    provider: 'neo4j',
+    options: { uri: 'neo4j://localhost:7687' },
+  },
+  workflow: {
+    type: 'graph-rag'
+  }
+});`,
+    flowSteps: [
+      { label: 'Documents', type: 'input', color: 'bg-emerald-100 text-emerald-800 dark:bg-emerald-950/40 dark:text-emerald-300' },
+      { label: 'LLM Extractor', type: 'model', color: 'bg-emerald-50 text-emerald-700 dark:bg-emerald-900/20 dark:text-emerald-400' },
+      { label: 'Graph Database', type: 'database', color: 'bg-emerald-200 text-emerald-950 dark:bg-emerald-700/40 dark:text-emerald-100' },
+      { label: 'Relation Search', type: 'process', color: 'bg-emerald-100 text-emerald-950 dark:bg-emerald-800/40 dark:text-emerald-100' },
+      { label: 'LLM Reasoner', type: 'model', color: 'bg-indigo-100 text-indigo-900 dark:bg-indigo-800/30 dark:text-indigo-200' },
+    ]
+  },
+  {
+    id: 'hybrid',
+    name: 'Hybrid RAG',
+    tagline: 'Best of both worlds: Vector + Graph',
+    description: 'Queries both a vector database for semantic match proximity and a graph database for topological linkages. It joins vector search results and sub-graph entity contexts into a unified prompt, resolving complex interconnected schemas.',
+    pros: ['Unparalleled query coverage', 'Combines semantic proximity and graph relationships', 'Robust grounding'],
+    cons: ['Most complex RAG configuration', 'Double database query overhead'],
+    color: '#d97706', // Orange
+    snippet: `import { Retrivora } from '@retrivora-ai/rag-engine/server';
+
+const ai = new Retrivora({
+  projectId: 'hybrid-rag-demo',
+  vectorDatabase: { provider: 'mongodb', indexName: 'default' },
+  graphDb: { provider: 'neo4j', options: { uri: 'neo4j://...' } },
+  workflow: {
+    type: 'hybrid-rag'
+  }
+});`,
+    flowSteps: [
+      { label: 'Query', type: 'input', color: 'bg-amber-100 text-amber-800 dark:bg-amber-950/40 dark:text-amber-300' },
+      { label: 'Vector Store', type: 'database', color: 'bg-orange-100 text-orange-950 dark:bg-orange-700/40 dark:text-orange-100' },
+      { label: 'Graph Database', type: 'database', color: 'bg-emerald-100 text-emerald-950 dark:bg-emerald-700/40 dark:text-emerald-100' },
+      { label: 'Unified Context', type: 'process', color: 'bg-amber-50 text-amber-700 dark:bg-amber-900/20 dark:text-amber-400' },
+      { label: 'LLM Reasoner', type: 'model', color: 'bg-indigo-100 text-indigo-900 dark:bg-indigo-800/30 dark:text-indigo-200' },
+    ]
+  },
+  {
+    id: 'agentic-router',
+    name: 'Agentic RAG (Router)',
+    tagline: 'Dynamic intent-based query routing',
+    description: 'Uses an intelligent fast router agent to analyze the intent of the incoming query. The router dynamically decides whether to fetch data from the Vector DB, query a Graph DB, fallback to web search, or trigger external API tools.',
+    pros: ['Highly adaptive workflow', 'Saves tokens on simple queries', 'Automatically invokes external API tools'],
+    cons: ['Adds slight routing classification latency', 'Dependent on router accuracy'],
+    color: '#0891b2', // Cyan
+    snippet: `import { Retrivora } from '@retrivora-ai/rag-engine/server';
+
+const ai = new Retrivora({
+  projectId: 'agentic-router-demo',
+  workflow: {
+    type: 'agentic-router'
+  }
+});`,
+    flowSteps: [
+      { label: 'User Query', type: 'input', color: 'bg-cyan-100 text-cyan-800 dark:bg-cyan-950/40 dark:text-cyan-300' },
+      { label: 'Router Agent', type: 'model', color: 'bg-indigo-100 text-indigo-900 dark:bg-indigo-800/30 dark:text-indigo-200' },
+      { label: 'Vector / Graph / Tools', type: 'database', color: 'bg-cyan-200 text-cyan-950 dark:bg-cyan-700/40 dark:text-cyan-100' },
+      { label: 'Selected Context', type: 'process', color: 'bg-cyan-50 text-cyan-700 dark:bg-cyan-900/20 dark:text-cyan-400' },
+      { label: 'LLM Generator', type: 'model', color: 'bg-violet-100 text-violet-900 dark:bg-violet-800/30 dark:text-violet-200' },
+    ]
+  },
+  {
+    id: 'multi-agent',
+    name: 'Agent RAG (Multi-Agent)',
+    tagline: 'Collaborative swarm-based problem solving',
+    description: 'Deploys a supervisor agent that coordinates a group of specialized worker agents (e.g., search agent, tool executor agent, web crawler agent). Agents collaborate, pass information, check each other\'s facts, and compile a final answer.',
+    pros: ['Excellent for complex research tasks', 'Self-correcting query pipelines', 'Multi-step action sequences'],
+    cons: ['High latency (requires multiple LLM cycles)', 'Higher cost per query', 'Complex state synchronization'],
+    color: '#ec4899', // Pink
+    snippet: `import { Retrivora } from '@retrivora-ai/rag-engine/server';
+
+const ai = new Retrivora({
+  projectId: 'multi-agent-demo',
+  workflow: {
+    type: 'multi-agent'
+  },
+  mcpServers: [
+    {
+      name: 'search-engine',
+      transport: 'stdio',
+      command: 'npx',
+      args: ['-y', '@modelcontextprotocol/server-web-search']
+    }
+  ]
+});`,
+    flowSteps: [
+      { label: 'Goal Query', type: 'input', color: 'bg-pink-100 text-pink-800 dark:bg-pink-950/40 dark:text-pink-300' },
+      { label: 'Supervisor Agent', type: 'model', color: 'bg-pink-200 text-pink-950 dark:bg-pink-800/30 dark:text-pink-100' },
+      { label: 'Specialist Agents', type: 'model', color: 'bg-indigo-100 text-indigo-900 dark:bg-indigo-900/30 dark:text-indigo-200' },
+      { label: 'Tools / Vector DBs', type: 'database', color: 'bg-pink-200 text-pink-950 dark:bg-pink-700/40 dark:text-pink-100' },
+      { label: 'Consensus Context', type: 'process', color: 'bg-pink-50 text-pink-700 dark:bg-pink-900/20 dark:text-pink-400' },
+      { label: 'Final Output', type: 'output', color: 'bg-indigo-600 text-white shadow-sm' },
+    ]
+  }
+];
+