RAG Citation Inspector

1"use client";
2
3import * as React from "react";
4
5interface RagCitationsProps {
6  variant?: string;
7}
8
9export default function RagCitations({ variant = "Inspector" }: RagCitationsProps) {
10  const [selectedChunk, setSelectedChunk] = React.useState<string>("chunk-1");
11
12  const sources = [
13    {
14      id: "chunk-1",
15      title: "postgres_optimizer_manual_v16.pdf",
16      score: 0.942,
17      page: "Page 42, §4.3",
18      passage:
19        "When performing multi-column index scans with high correlation, ensure leading column has maximum cardinality to minimize heap page lookups.",
20      tokens: "128 tok",
21      vectorEngine: "Pinecone / text-embedding-3-large",
22    },
23    {
24      id: "chunk-2",
25      title: "architecture_decisions_record_2025.md",
26      score: 0.887,
27      page: "Line 104-128",
28      passage:
29        "ADR-041: Tenant partitioning enabled on org_id. Query planner automatically applies partition pruning for all scoped tenant operations.",
30      tokens: "94 tok",
31      vectorEngine: "pgvector / 1536-dim",
32    },
33    {
34      id: "chunk-3",
35      title: "datadog_p99_latency_report.json",
36      score: 0.814,
37      page: "Metric payload",
38      passage:
39        "p99 latency spiked to 410ms on /api/v1/analytics/cohorts due to sequential scan over 2.4M invoice line items.",
40      tokens: "68 tok",
41      vectorEngine: "Qdrant / HNSW",
42    },
43  ];
44
45  const current = sources.find((s) => s.id === selectedChunk) || sources[0];
46
47  return (
48    <div className="w-full max-w-110 overflow-hidden rounded-card bg-surface shadow-card border border-line">
49      {/* Header */}
50      <div className="primitive-card-bar flex items-center justify-between border-b border-line bg-surface/90 px-3.5 py-2.5">
51        <div className="flex items-center gap-2">
52          <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="var(--accent)" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round">
53            <path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20" />
54            <path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z" />
55          </svg>
56          <span className="font-display font-semibold text-[13.5px] text-ink">
57            RAG Citation Deep-Dive
58          </span>
59        </div>
60        <span className="font-mono text-[10.5px] text-accent">Cosine Top-K (3/140k)</span>
61      </div>
62
63      {/* Citations List */}
64      <div className="grid grid-cols-3 gap-1 border-b border-line bg-inset/40 p-1.5">
65        {sources.map((s, idx) => (
66          <button
67            key={s.id}
68            onClick={() => setSelectedChunk(s.id)}
69            className={`flex flex-col items-start p-2 rounded-[7px] text-left transition-all ${
70              selectedChunk === s.id
71                ? "bg-surface shadow-btn border border-line"
72                : "hover:bg-hover/60"
73            }`}
74          >
75            <div className="flex items-center justify-between w-full">
76              <span className="font-mono text-[10px] text-ink-3">Source #{idx + 1}</span>
77              <span className="font-mono text-[10.5px] font-bold text-accent">
78                {(s.score * 100).toFixed(1)}%
79              </span>
80            </div>
81            <p className="mt-1 font-mono text-[11px] text-ink truncate w-full">
82              {s.title}
83            </p>
84          </button>
85        ))}
86      </div>
87
88      {/* Selected Chunk Deep Dive */}
89      <div className="p-3.5 space-y-2.5">
90        <div className="flex items-center justify-between font-mono text-[11px] text-ink-3">
91          <span className="text-accent font-semibold">{current.title}</span>
92          <span>{current.page}</span>
93        </div>
94
95        <div className="rounded-control bg-inset/70 p-3 font-mono text-[12px] leading-relaxed text-ink border border-line/50">
96          &ldquo;{current.passage}&rdquo;
97        </div>
98
99        <div className="flex flex-wrap items-center justify-between gap-2 pt-1 font-mono text-[10.5px] text-ink-3">
100          <span>Embedding: {current.vectorEngine}</span>
101          <span>Size: {current.tokens}</span>
102        </div>
103      </div>
104
105      {/* Footer */}
106      <div className="flex items-center justify-between border-t border-line bg-inset/40 px-3.5 py-2 font-mono text-[11px] text-ink-3">
107        <span>Verified against Vector Index #prod-pg</span>
108        <button className="text-accent hover:underline">View Raw Vector JSON →</button>
109      </div>
110    </div>
111  );
112}
113