Spaces:
Sleeping
Sleeping
File size: 2,405 Bytes
3786a3f d737dbb 3786a3f d737dbb 3786a3f d737dbb 3786a3f d737dbb 3786a3f d737dbb 3786a3f f14eb69 3786a3f f14eb69 3786a3f f14eb69 d737dbb f14eb69 3786a3f | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 | 'use client';
import { useState } from 'react';
import { Network, Type, Layers, ChevronDown } from 'lucide-react';
import { cn } from '@/lib/utils';
import ReactMarkdown from 'react-markdown';
interface SourceToggleProps {
method: string;
entityCount: number;
chunkCount: number;
context?: string;
}
export function SourceToggle({ method, entityCount, chunkCount, context }: SourceToggleProps) {
const [open, setOpen] = useState(false);
return (
<div className="border-t border-border bg-bg-surface px-4 py-2">
<div className="flex items-center justify-between">
<div className="flex items-center gap-3">
<span
className={cn(
'inline-flex items-center gap-1 rounded-full px-2.5 py-0.5 text-xs font-medium',
method === 'Graph' || method === 'GRAPH_ONLY'
? 'bg-accent-violet/15 text-accent-violet'
: method === 'Vector' || method === 'VECTOR_ONLY'
? 'bg-accent-indigo/15 text-accent-indigo'
: 'bg-accent-cyan/15 text-accent-cyan'
)}
>
{method} used
</span>
{entityCount > 0 && (
<span className="flex items-center gap-1 text-xs text-text-muted">
<Network className="h-3.5 w-3.5" /> {entityCount} entities
</span>
)}
{chunkCount > 0 && (
<span className="flex items-center gap-1 text-xs text-text-muted">
<Type className="h-3.5 w-3.5" /> {chunkCount} chunks
</span>
)}
</div>
{context && (
<button
onClick={() => setOpen((o) => !o)}
className="inline-flex items-center gap-1 text-xs text-text-secondary hover:text-text-primary"
>
<Layers className="h-3.5 w-3.5" /> Context Preview
<ChevronDown className={cn('h-3.5 w-3.5 transition-transform', open && 'rotate-180')} />
</button>
)}
</div>
{open && context && (
<div className="mt-2 max-h-[300px] overflow-y-auto rounded-md border border-border bg-bg-base p-3 text-xs text-text-secondary scrollbar-thin">
<div className="prose prose-invert max-w-none text-xs leading-relaxed text-text-secondary space-y-2">
<ReactMarkdown>{context}</ReactMarkdown>
</div>
</div>
)}
</div>
);
}
|