| import { escapeHtml } from "../utils"; |
|
|
| export default function ChunkInspectorModal({ chunks, onClose }) { |
| const handleBackdropClick = (e) => { |
| if (e.target === e.currentTarget) onClose(); |
| }; |
|
|
| return ( |
| <div |
| className="fixed inset-0 z-50 bg-on-surface/40 backdrop-blur-sm flex items-center justify-center p-4 font-['Source_Serif_4']" |
| onClick={handleBackdropClick} |
| > |
| <div className="bg-surface-container/95 rounded-sm max-w-2xl w-full p-6 max-h-[85vh] flex flex-col gap-4 shadow-lg border border-primary-container/80 relative"> |
| <div className="flex items-center justify-between border-b border-outline-variant/40 pb-3"> |
| <h3 className="font-['Bodoni_Moda'] font-semibold text-lg text-primary flex items-center gap-2 tracking-wide"> |
| <span className="material-symbols-outlined text-xl"> |
| manage_search |
| </span> |
| <span>Retrieved ChromaDB Vector Chunks</span> |
| </h3> |
| <button |
| onClick={onClose} |
| className="text-on-surface-variant hover:text-primary transition-colors cursor-pointer" |
| aria-label="Close inspector" |
| > |
| <span className="material-symbols-outlined">close</span> |
| </button> |
| </div> |
| |
| <div className="flex-1 overflow-y-auto space-y-3 text-xs scrollbar-hide"> |
| {!chunks || chunks.length === 0 ? ( |
| <p className="text-on-surface-variant italic"> |
| No raw chunks available. |
| </p> |
| ) : ( |
| chunks.map((c, i) => ( |
| <div |
| key={i} |
| className="bg-surface-variant/70 p-3.5 rounded-sm border border-outline-variant/40 space-y-2" |
| > |
| <div className="flex items-center justify-between text-[11px] font-semibold text-primary"> |
| <span> |
| Chunk #{i + 1} —{" "} |
| {escapeHtml( |
| c.metadata?.source || |
| c.metadata?.filename || |
| "Unknown" |
| )} |
| </span> |
| <span className="bg-primary text-on-primary px-2 py-0.5 rounded-xs text-[10px] uppercase font-['Bodoni_Moda'] tracking-wider"> |
| Similarity: {(c.similarity * 100).toFixed(1)}% |
| </span> |
| </div> |
| <pre className="whitespace-pre-wrap font-mono text-[11px] text-on-surface bg-surface/90 p-3 rounded-xs border border-outline-variant/30 max-h-44 overflow-y-auto leading-relaxed"> |
| {escapeHtml(c.content)} |
| </pre> |
| </div> |
| )) |
| )} |
| </div> |
| </div> |
| </div> |
| ); |
| } |
|
|
|
|
