{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "rag-pipeline-visualizer", "title": "Rag Pipeline Visualizer", "type": "registry:block", "files": [ { "path": "packages/registry-react/blocks/rag-pipeline-visualizer/RagPipelineVisualizer.tsx", "content": "'use client'\n\nimport * as React from 'react'\nimport {\n BookOpen,\n Bot,\n Check,\n ChevronRight,\n Code2,\n Copy,\n Cpu,\n Database,\n FileCode,\n Filter,\n Layers,\n Play,\n RefreshCw,\n Search,\n ShieldCheck,\n SlidersHorizontal,\n Sparkles,\n Terminal,\n ThumbsDown,\n ThumbsUp,\n Workflow,\n Zap,\n} from 'lucide-react'\nimport { Badge } from '@/components/ui/badge'\nimport { Button } from '@/components/ui/button'\nimport { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'\nimport { Input } from '@/components/ui/input'\nimport { Progress } from '@/components/ui/progress'\nimport { Separator } from '@/components/ui/separator'\nimport { Slider } from '@/components/ui/slider'\nimport { Switch } from '@/components/ui/switch'\nimport { cn } from '@/lib/utils'\n\nexport interface RagPipelineVisualizerProps {\n className?: string\n}\n\ninterface PipelineStage {\n id: number\n name: string\n subtitle: string\n latency: string\n durationMs: number\n status: 'completed' | 'active' | 'queued' | 'bypassed'\n icon: React.ElementType\n tag: string\n details: {\n description: string\n metrics: { label: string; value: string }[]\n codeOrData?: { title: string; content: string }\n }\n}\n\ninterface RetrievedChunk {\n id: string\n citationIndex: number\n relevanceScore: number\n rerankBoost: number\n cosineScore: number\n bm25Score: number\n documentPath: string\n namespace: string\n chunkOffset: string\n tokenCount: number\n updatedAgo: string\n title: string\n snippetPrefix: string\n highlightedText: string\n snippetSuffix: string\n fullSnippet: string\n}\n\nconst presetQueries = [\n 'How do I configure OKLCH color palettes in Tailwind v4 with UIPKGE?',\n 'Cross-Encoder vs Bi-Encoder reranker score calibration',\n 'HyDE prompt expansion for zero-shot semantic retrieval',\n 'Pinecone HNSW index tuning: efSearch & M parameter tradeoffs',\n]\n\nconst allChunks: RetrievedChunk[] = [\n {\n id: 'chunk-1',\n citationIndex: 1,\n relevanceScore: 0.942,\n rerankBoost: 0.142,\n cosineScore: 0.8,\n bm25Score: 0.785,\n documentPath: 'docs/styling/tailwind-v4-oklch.md',\n namespace: 'docs',\n chunkOffset: 'Chunk #3 · Lines 42–78',\n tokenCount: 384,\n updatedAgo: '2 hours ago',\n title: 'Tailwind v4 OKLCH Architecture & @theme Configuration',\n snippetPrefix: 'Tailwind CSS v4 introduces native CSS-first token configuration with ',\n highlightedText:\n '@theme inline and OKLCH color spaces. In contrast to RGB/HSL, OKLCH ensures perceptually uniform lightness across hues',\n snippetSuffix:\n ', preventing contrast degradation in dark mode variants while preserving single-source token truth.',\n fullSnippet:\n 'Tailwind CSS v4 introduces native CSS-first token configuration with `@theme inline` and OKLCH color spaces. In contrast to RGB/HSL, OKLCH ensures perceptually uniform lightness across hues, preventing contrast degradation in dark mode variants while preserving single-source token truth.',\n },\n {\n id: 'chunk-2',\n citationIndex: 2,\n relevanceScore: 0.887,\n rerankBoost: 0.095,\n cosineScore: 0.792,\n bm25Score: 0.71,\n documentPath: 'docs/tokens/color-derivation.md',\n namespace: 'docs',\n chunkOffset: 'Chunk #1 · Lines 1–36',\n tokenCount: 412,\n updatedAgo: '1 day ago',\n title: 'Color Tokens Derivation & Contrast Calibration',\n snippetPrefix: 'Deriving consistent dark-mode contrasts requires ',\n highlightedText:\n 'anchoring chroma and shifting lightness along the OKLCH L-axis. Use --color-primary: oklch(0.65 0.22 260) for vibrant interactive states',\n snippetSuffix:\n ' and calibrate border contrast with `--color-border: oklch(0.28 0.01 260)` for WCAG AA compliance across both frameworks.',\n fullSnippet:\n 'Deriving consistent dark-mode contrasts requires anchoring chroma and shifting lightness along the OKLCH L-axis. Use `--color-primary: oklch(0.65 0.22 260)` for vibrant interactive states and calibrate border contrast with `--color-border: oklch(0.28 0.01 260)` for WCAG AA compliance across both frameworks.',\n },\n {\n id: 'chunk-3',\n citationIndex: 3,\n relevanceScore: 0.824,\n rerankBoost: 0.048,\n cosineScore: 0.776,\n bm25Score: 0.65,\n documentPath: 'blog/2026/design-systems-monorepo.md',\n namespace: 'blog',\n chunkOffset: 'Chunk #5 · Lines 112–164',\n tokenCount: 526,\n updatedAgo: '3 days ago',\n title: 'Dual-Framework Component Registry Architecture',\n snippetPrefix: 'When architecting a dual-framework registry (Vue + React), ',\n highlightedText:\n 'shared design tokens must compile cleanly without runtime overhead. We leverage CSS custom properties to mirror CVA component variants',\n snippetSuffix: ' across both frameworks with zero extra runtime.',\n fullSnippet:\n 'When architecting a dual-framework registry (Vue + React), shared design tokens must compile cleanly without runtime overhead. We leverage modern CSS custom properties and PostCSS pipelines to mirror CVA component variants across both frameworks with zero extra runtime.',\n },\n]\n\nexport function RagPipelineVisualizer({ className }: RagPipelineVisualizerProps) {\n const [currentQuery, setCurrentQuery] = React.useState(\n 'How do I configure OKLCH color palettes in Tailwind v4 with UIPKGE?',\n )\n const [topK, setTopK] = React.useState(3)\n const [rerankerEnabled, setRerankerEnabled] = React.useState(true)\n const [selectedStageId, setSelectedStageId] = React.useState(3)\n const [isExecuting, setIsExecuting] = React.useState(false)\n const [copiedChunkId, setCopiedChunkId] = React.useState(null)\n const [copiedResponse, setCopiedResponse] = React.useState(false)\n const [copiedTrace, setCopiedTrace] = React.useState(false)\n const [activeCitationHover, setActiveCitationHover] = React.useState(null)\n const [showTraceJson, setShowTraceJson] = React.useState(false)\n const [userFeedback, setUserFeedback] = React.useState<'up' | 'down' | null>(null)\n\n const stages = React.useMemo(\n () => [\n {\n id: 1,\n name: '1. User Query & HyDE Expansion',\n subtitle: 'Query rewritten with hypothetical document embedding · 42ms',\n latency: '42ms',\n durationMs: 42,\n status: 'completed',\n icon: Sparkles,\n tag: 'Prompt Rewriting',\n details: {\n description:\n 'Generates a synthetic hypothetical answer using Claude 3.5 Haiku to bridge vocabulary mismatch between conversational queries and technical documentation.',\n metrics: [\n { label: 'Expansion Model', value: 'Claude 3.5 Haiku' },\n { label: 'Latency', value: '42ms' },\n { label: 'Prompt Tokens', value: '48 tokens' },\n { label: 'Hypothesis Length', value: '112 tokens' },\n ],\n codeOrData: {\n title: 'Generated Hypothetical Document (HyDE)',\n content:\n 'Tailwind CSS v4 defines color tokens using CSS variables inside `@theme inline` with `oklch(L C H)` functions. In dual-framework component registries like UIPKGE, OKLCH ensures uniform perceptual lightness across hue shifts in light and dark variants without breaking WCAG AA contrast.',\n },\n },\n },\n {\n id: 2,\n name: '2. Hybrid Dense + Sparse Search',\n subtitle: 'Dense Cosine + BM25 Lexical search across 480k chunks · 64ms',\n latency: '64ms',\n durationMs: 64,\n status: 'completed',\n icon: Database,\n tag: 'Reciprocal Rank Fusion',\n details: {\n description:\n 'Performs vector similarity search on 1536-dim embeddings combined with sparse BM25 keyword matching across 482,910 document chunks.',\n metrics: [\n { label: 'Vector Index', value: 'Pinecone Serverless (HNSW)' },\n { label: 'Dimension', value: '1536-dim (text-embedding-3-small)' },\n { label: 'Fusion Weight', value: 'α = 0.70 Dense + 0.30 Sparse' },\n { label: 'Candidate Pool', value: '20 Candidate Chunks' },\n ],\n codeOrData: {\n title: 'Dense Vector Projection (32-float slice)',\n content:\n '[-0.048, 0.135, 0.092, -0.018, 0.245, -0.110, 0.049, 0.174, -0.082, 0.001, 0.325, -0.059, 0.097, 0.191, -0.149, 0.068, -0.024, 0.212, 0.082, -0.094, 0.121, -0.037, 0.156, 0.031, -0.172, 0.099, 0.056, -0.078, 0.195, -0.013, 0.072, 0.141]',\n },\n },\n },\n {\n id: 3,\n name: '3. Cross-Encoder Reranker',\n subtitle: rerankerEnabled\n ? 'Cohere Rerank v3: re-scores Top 20 -> Top 3 · 28ms'\n : 'Bypassed (Using raw hybrid search ranking) · 0ms',\n latency: rerankerEnabled ? '28ms' : '0ms',\n durationMs: rerankerEnabled ? 28 : 0,\n status: rerankerEnabled ? 'completed' : 'bypassed',\n icon: Filter,\n tag: rerankerEnabled ? 'Cross-Attention Re-Scoring' : 'Bypassed',\n details: {\n description: rerankerEnabled\n ? 'Applies deep transformer cross-attention to score query-document pairs simultaneously, eliminating false-positive semantic matches.'\n : 'Reranker is currently bypassed. Chunks are ordered purely by initial hybrid reciprocal rank scores.',\n metrics: [\n { label: 'Model', value: 'cohere-rerank-v3.0-multilingual' },\n { label: 'Top-K Retained', value: `Top ${topK} of 20` },\n { label: 'Relevance Cutoff', value: '≥ 0.800 score' },\n { label: 'Max Rank Shift', value: '+3 positions (Chunk #3)' },\n ],\n codeOrData: {\n title: 'Reranker Score Calibration Delta',\n content:\n 'Chunk #1: 0.800 (Cosine) -> 0.942 (Rerank) [+0.142 boost]\\nChunk #2: 0.792 (Cosine) -> 0.887 (Rerank) [+0.095 boost]\\nChunk #3: 0.776 (Cosine) -> 0.824 (Rerank) [+0.048 boost]\\n17 candidates pruned below 0.800 relevance threshold',\n },\n },\n },\n {\n id: 4,\n name: '4. Context Window Assembly',\n subtitle: '1,248 tokens packed, 98% prompt density · 8ms',\n latency: '8ms',\n durationMs: 8,\n status: 'completed',\n icon: Layers,\n tag: 'Token Packaging',\n details: {\n description:\n 'Deduplicates overlapping chunk boundaries, injects citation boundary anchors `[1]`, `[2]`, `[3]`, and formats system directives for zero-hallucination grounding.',\n metrics: [\n { label: 'Window Budget', value: '1,248 / 8,192 tokens (15.2%)' },\n { label: 'Prompt Density', value: '98.4% relevance tokens' },\n { label: 'Chunks Packaged', value: `${Math.min(topK, 3)} chunks` },\n { label: 'Delimiter Format', value: '' },\n ],\n codeOrData: {\n title: 'Assembled Prompt Context Envelope',\n content:\n '\\nYou are a Lead Design Systems Architect. Synthesize answers strictly from provided context chunks.\\nAlways ground every technical claim with an inline citation key [1], [2], or [3].\\n\\n\\n\\n[1] doc: docs/styling/tailwind-v4-oklch.md (score: 0.942)\\n[2] doc: docs/tokens/color-derivation.md (score: 0.887)\\n[3] doc: blog/2026/design-systems-monorepo.md (score: 0.824)\\n',\n },\n },\n },\n {\n id: 5,\n name: '5. LLM Synthesis & Grounding',\n subtitle: 'Claude 3.5 Sonnet streaming generation · 820ms',\n latency: '820ms',\n durationMs: 820,\n status: 'completed',\n icon: Bot,\n tag: 'Streaming Synthesis',\n details: {\n description:\n 'Generates final structured markdown answer with streaming tokens, verifies every claim against citation sources, and produces grounded output.',\n metrics: [\n { label: 'Model', value: 'claude-3-5-sonnet-20241022' },\n { label: 'Time to First Token', value: '180ms' },\n { label: 'Generation Speed', value: '68.2 tokens/sec' },\n { label: 'Grounding Verification', value: '100% (3/3 facts grounded)' },\n ],\n codeOrData: {\n title: 'Telemetry & Cost Summary',\n content:\n 'Prompt Tokens: 1,248 ($0.00374)\\nCompletion Tokens: 214 ($0.00064)\\nTotal Cost: $0.00438\\nHallucination Detection: 0 violations detected',\n },\n },\n },\n ],\n [rerankerEnabled, topK],\n )\n\n const displayedChunks = React.useMemo(() => {\n const count = Math.min(Math.max(1, topK), allChunks.length)\n return allChunks.slice(0, count)\n }, [topK])\n\n const currentStage = stages.find((s) => s.id === selectedStageId) ?? stages[0]\n\n const totalPipelineLatency = React.useMemo(() => {\n const sum = stages.reduce((acc, s) => acc + s.durationMs, 0)\n return `${sum}ms`\n }, [stages])\n\n const traceJson = React.useMemo(() => {\n return JSON.stringify(\n {\n traceId: 'trc_rag_948201a4',\n pipeline: 'enterprise_knowledge_rag_v3',\n timestamp: new Date().toISOString(),\n query: currentQuery,\n config: {\n embeddingModel: 'text-embedding-3-small',\n dimensions: 1536,\n vectorDb: 'Pinecone Serverless',\n topK: topK,\n reranker: rerankerEnabled ? 'cohere-rerank-v3' : 'none',\n alphaFusion: 0.7,\n },\n stages: stages.map((s) => ({\n id: s.id,\n name: s.name,\n durationMs: s.durationMs,\n status: s.status,\n })),\n retrievedChunks: displayedChunks.map((c) => ({\n citation: c.citationIndex,\n docPath: c.documentPath,\n relevance: rerankerEnabled ? c.relevanceScore : c.cosineScore,\n rerankBoost: rerankerEnabled ? c.rerankBoost : 0,\n tokenCount: c.tokenCount,\n })),\n synthesis: {\n model: 'claude-3-5-sonnet-20241022',\n promptTokens: 1248,\n completionTokens: 214,\n groundedFactRatio: 1.0,\n latencyMs: 820,\n },\n },\n null,\n 2,\n )\n }, [currentQuery, topK, rerankerEnabled, stages, displayedChunks])\n\n const handleRunPipeline = () => {\n if (isExecuting) return\n setIsExecuting(true)\n setSelectedStageId(1)\n\n setTimeout(() => {\n setSelectedStageId(2)\n }, 200)\n\n setTimeout(() => {\n setSelectedStageId(3)\n }, 450)\n\n setTimeout(() => {\n setSelectedStageId(4)\n }, 700)\n\n setTimeout(() => {\n setSelectedStageId(5)\n setIsExecuting(false)\n }, 950)\n }\n\n const handleSelectPreset = (preset: string) => {\n setCurrentQuery(preset)\n handleRunPipeline()\n }\n\n const handleCopyChunk = (id: string, text: string) => {\n navigator.clipboard.writeText(text)\n setCopiedChunkId(id)\n setTimeout(() => {\n setCopiedChunkId(null)\n }, 2000)\n }\n\n const handleCopyResponse = (text: string) => {\n navigator.clipboard.writeText(text)\n setCopiedResponse(true)\n setTimeout(() => {\n setCopiedResponse(false)\n }, 2000)\n }\n\n const handleCopyTrace = () => {\n navigator.clipboard.writeText(traceJson)\n setCopiedTrace(true)\n setTimeout(() => {\n setCopiedTrace(false)\n }, 2000)\n }\n\n return (\n
\n {/* 1. Pipeline Header */}\n \n \n
\n
\n
\n
\n \n
\n

\n enterprise_knowledge_rag_v3\n

\n \n \n Pipeline Active\n \n \n p99 {totalPipelineLatency}\n \n
\n

\n Production Retrieval-Augmented Generation pipeline with HyDE query rewriting, hybrid reciprocal rank\n fusion, and cross-encoder validation.\n

\n
\n\n
\n setShowTraceJson(!showTraceJson)}\n >\n \n {showTraceJson ? 'Hide Trace' : 'Export Trace JSON'}\n \n \n
\n
\n\n {/* Pipeline Metadata Specs Bar */}\n
\n
\n \n \n Embedding: OpenAI text-embedding-3-small ·\n 1536-dim\n \n
\n
\n \n \n Vector DB: Pinecone Serverless · HNSW\n \n
\n
\n \n \n Index Space: 482,910 chunks · 4 namespaces\n \n
\n
\n \n \n Grounding: 100% strict context citation\n \n
\n
\n \n \n\n {/* Optional Trace JSON Drawer */}\n {showTraceJson && (\n \n \n
\n
\n \n OpenTelemetry Pipeline Execution Trace\n
\n \n
\n \n \n 
\n              {traceJson}\n
\n \n \n )}\n\n {/* 2. Query Input & Runtime Controls Bar */}\n \n \n
\n
\n \n Interactive Test Query\n \n Press Enter or click Test Query to simulate\n
\n\n
\n setCurrentQuery(e.target.value)}\n onKeyDown={(e) => {\n if (e.key === 'Enter') handleRunPipeline()\n }}\n className=\"pr-20 text-sm font-medium shadow-xs\"\n placeholder=\"Enter search prompt or technical query...\"\n prefixIcon={}\n />\n \n
\n
\n\n {/* Query Presets Chips */}\n
\n Presets:\n {presetQueries.map((preset) => (\n handleSelectPreset(preset)}\n >\n {preset}\n \n ))}\n
\n\n \n\n {/* Controls Toolbar: Top-K Slider + Reranker Switch + Metrics */}\n
\n {/* Top-K Slider */}\n
\n
\n
\n \n Top-K Chunks\n
\n \n Top {topK} Chunks\n \n
\n setTopK(val[0])}\n />\n
\n k=1\n k=2\n k=3\n
\n
\n\n {/* Reranker Toggle */}\n
\n
\n
\n
\n \n Cohere Rerank v3\n
\n

Cross-encoder contextual re-scoring

\n
\n \n
\n
\n \n {rerankerEnabled ? 'Active (+0.142 boost)' : 'Bypassed (Cosine only)'}\n \n
\n
\n\n {/* Pipeline Telemetry Overview */}\n
\n
\n Execution Latency\n {totalPipelineLatency} total\n
\n
\n
\n Dense + BM25\n 106ms\n
\n \n
\n
\n
\n LLM Synthesis\n 820ms (85%)\n
\n \n
\n
\n
\n \n \n\n {/* 3. Interactive RAG 5-Stage Architecture Flow */}\n
\n
\n
\n

\n RAG Pipeline Execution Graph\n

\n

\n Click any stage node to inspect low-level telemetry, prompt variables, and intermediate embeddings.\n

\n
\n \n 5 Connected Stages\n \n
\n\n {/* 5-Stage Connected Cards */}\n
\n {stages.map((stage) => {\n const Icon = stage.icon\n const isSelected = selectedStageId === stage.id\n return (\n setSelectedStageId(stage.id)}\n onKeyDown={(e) => {\n if (e.key === 'Enter' || e.key === ' ') {\n e.preventDefault()\n setSelectedStageId(stage.id)\n }\n }}\n >\n
\n
\n \n \n
\n \n {stage.latency}\n \n
\n\n
\n

{stage.name}

\n

{stage.subtitle}

\n
\n
\n\n
\n {stage.tag}\n \n
\n
\n )\n })}\n
\n\n {/* Stage Detail Drill-down Panel */}\n \n \n
\n
\n
\n {React.createElement(currentStage.icon, { className: 'size-4' })}\n
\n
\n \n {currentStage.name} — Inspector\n \n {currentStage.details.description}\n
\n
\n \n Stage {currentStage.id} of 5 · {currentStage.latency}\n \n
\n \n \n {/* Metrics Grid for Stage */}\n
\n {currentStage.details.metrics.map((metric) => (\n
\n

{metric.label}

\n

{metric.value}

\n
\n ))}\n
\n\n {/* Code or Data Artifact Preview */}\n {currentStage.details.codeOrData && (\n
\n
\n \n \n {currentStage.details.codeOrData.title}\n \n read-only buffer\n
\n 
\n                  {currentStage.details.codeOrData.content}\n
\n
\n )}\n \n \n \n\n {/* 4. Retrieved Context Chunks Inspector */}\n
\n
\n
\n

\n Retrieved Context Chunks ({displayedChunks.length} Active Chunks)\n

\n

\n Ranked by cross-encoder relevance score. Keyword spans matching user intent are highlighted.\n

\n
\n
\n \n Fusion: Dense (70%) + Sparse (30%)\n \n
\n
\n\n
\n {displayedChunks.map((chunk) => (\n \n \n
\n
\n {/* Citation Badge Pill */}\n \n [{chunk.citationIndex}]\n \n\n {/* Relevancy Score Badge */}\n = 0.9\n ? 'border-success/30 bg-success/10 text-success'\n : chunk.relevanceScore >= 0.85\n ? 'border-success/30 bg-success/10 text-success'\n : 'border-info/30 bg-info/10 text-info',\n )}\n >\n Score: {rerankerEnabled ? chunk.relevanceScore.toFixed(3) : chunk.cosineScore.toFixed(3)}\n \n\n {/* Rerank Delta Badge */}\n {rerankerEnabled && (\n \n +{chunk.rerankBoost.toFixed(3)} boost (Rank #{chunk.citationIndex})\n \n )}\n\n {/* Document Path */}\n {chunk.documentPath}\n
\n\n {/* Metadata & Copy Action */}\n
\n \n handleCopyChunk(chunk.id, chunk.fullSnippet)}\n >\n {copiedChunkId === chunk.id ? (\n \n ) : (\n \n )}\n {copiedChunkId === chunk.id ? 'Copied' : 'Copy'}\n \n
\n
\n \n\n \n {/* Chunk Text with Highlighted Spans */}\n
\n {chunk.snippetPrefix}\n \n {chunk.highlightedText}\n \n {chunk.snippetSuffix}\n
\n\n {/* Scoring Breakdown Sub-bar */}\n
\n
\n \n Dense Cosine:{' '}\n {chunk.cosineScore.toFixed(3)}\n \n \n Sparse BM25:{' '}\n {chunk.bm25Score.toFixed(3)}\n \n {rerankerEnabled && (\n \n Cross-Encoder:{' '}\n {chunk.relevanceScore.toFixed(3)}\n \n )}\n
\n Updated {chunk.updatedAgo}\n
\n \n \n ))}\n
\n
\n\n {/* 5. Final Synthesized Output Card with Citations */}\n \n \n
\n
\n
\n \n
\n
\n Synthesized Grounded Response\n \n Generated via Claude 3.5 Sonnet streaming with verified inline citations.\n \n
\n
\n\n
\n \n \n 100% Grounded · 0 Hallucinations\n \n \n 820ms (TTFT 180ms)\n \n
\n
\n \n\n \n {/* Markdown Formatted Synthesized Body */}\n
\n

\n To configure OKLCH color palettes in Tailwind CSS v4 with UIPKGE:\n

\n\n
    \n
  1. \n Define Theme Tokens in CSS: Use{' '}\n @theme inline{' '}\n in your root stylesheet to declare single-source-of-truth OKLCH variables\n setActiveCitationHover(1)}\n onMouseLeave={() => setActiveCitationHover(null)}\n >\n [1]\n \n . Unlike legacy RGB/HSL, OKLCH ensures perceptually uniform lightness across hue shifts\n setActiveCitationHover(1)}\n onMouseLeave={() => setActiveCitationHover(null)}\n >\n [1]\n \n .\n
    2. \n\n
  2. \n Calibrate Dark Mode Contrasts: Anchor chroma and shift lightness along the OKLCH L-axis\n (e.g.,{' '}\n \n --color-primary: oklch(0.65 0.22 260)\n {' '}\n and{' '}\n \n --color-border: oklch(0.28 0.01 260)\n \n ) to maintain WCAG AA compliance across both light and dark modes\n setActiveCitationHover(2)}\n onMouseLeave={() => setActiveCitationHover(null)}\n >\n [2]\n \n .\n
    3. \n\n
  3. \n Maintain Dual-Framework CVA Parity: Wire CSS tokens directly through Class Variance\n Authority (cva()) variants so\n that both Vue and React registry components share identical token namespaces with zero runtime bundle\n overhead\n setActiveCitationHover(3)}\n onMouseLeave={() => setActiveCitationHover(null)}\n >\n [3]\n \n .\n
    4. \n
\n\n {/* Streaming cursor pulse */}\n
\n \n Generation Complete · 214 tokens streamed\n
\n
\n\n {/* Citation Footnotes Bar */}\n
\n \n \n Referenced Citations (Hover citation to locate chunk):\n \n
\n {displayedChunks.map((chunk) => (\n setActiveCitationHover(chunk.citationIndex)}\n onMouseLeave={() => setActiveCitationHover(null)}\n >\n \n [{chunk.citationIndex}] {chunk.documentPath.split('/').pop()}\n \n {chunk.relevanceScore.toFixed(3)}\n
\n ))}\n
\n \n\n {/* Telemetry Footer & Action Buttons */}\n
\n
\n \n Input: 1,248 tok\n \n \n Output: 214 tok\n \n \n Cost: $0.00438\n \n \n Grounding: 99.4%\n \n
\n\n
\n
\n setUserFeedback(userFeedback === 'up' ? null : 'up')}\n >\n \n \n \n setUserFeedback(userFeedback === 'down' ? null : 'down')}\n >\n \n \n
\n\n \n\n \n handleCopyResponse(\n 'To configure OKLCH color palettes in Tailwind CSS v4 with UIPKGE: 1. Define Theme Tokens in CSS (@theme inline)... 2. Calibrate Dark Mode Contrasts... 3. Maintain Dual-Framework CVA Parity...',\n )\n }\n >\n {copiedResponse ? : }\n {copiedResponse ? 'Copied' : 'Copy Answer'}\n \n
\n
\n \n \n \n )\n}\n\nexport default RagPipelineVisualizer\n", "type": "registry:block", "target": "~/components/blocks/RagPipelineVisualizer.tsx" } ], "dependencies": [ "lucide-react" ], "devDependencies": [], "registryDependencies": [ "https://uipkge.dev/r/react/badge.json", "https://uipkge.dev/r/react/button.json", "https://uipkge.dev/r/react/card.json", "https://uipkge.dev/r/react/input.json", "https://uipkge.dev/r/react/progress.json", "https://uipkge.dev/r/react/separator.json", "https://uipkge.dev/r/react/slider.json", "https://uipkge.dev/r/react/switch.json" ], "description": "LlamaIndex and LangChain style Retrieval-Augmented Generation (RAG) pipeline debugger and chunk retrieval inspector. Features 5-stage interactive DAG flow, HyDE expansion preview, hybrid dense/sparse search telemetry, cross-encoder reranking, and grounded response synthesis.", "categories": [ "ai", "dashboard", "database", "app" ] }