Spaces:
Sleeping
Sleeping
File size: 2,158 Bytes
af404c9 | 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 | "use client";
import { useState } from "react";
import { Source } from "@/types/chat";
interface SourceCardProps {
sources: Source[];
}
export default function SourceCard({ sources }: SourceCardProps) {
const [open, setOpen] = useState(false);
const relevant = sources.filter((s) => s.score > 0.3);
if (relevant.length === 0) return null;
return (
<div className="mt-3">
<button
onClick={() => setOpen((o) => !o)}
className="flex items-center gap-1.5 text-xs text-[#47C3A6] hover:text-[#8FD15E] transition-colors"
>
<svg width="12" height="12" viewBox="0 0 12 12" fill="currentColor">
<path d="M6 0L7.5 4.5H12L8.5 7.2L9.8 12L6 9.5L2.2 12L3.5 7.2L0 4.5H4.5L6 0Z" />
</svg>
<span>{relevant.length} source{relevant.length > 1 ? "s" : ""}</span>
<svg
width="10" height="10" viewBox="0 0 10 10" fill="currentColor"
className={`transition-transform duration-200 ${open ? "rotate-180" : ""}`}
>
<path d="M2 3.5L5 6.5L8 3.5" stroke="currentColor" strokeWidth="1.5" fill="none" strokeLinecap="round" />
</svg>
</button>
{open && (
<div className="mt-2 flex flex-col gap-1.5 animate-fade-in">
{relevant.map((source, i) => (
<div
key={i}
className="flex items-start gap-2 bg-[#F8FAFC] border border-[#E2E8F0] rounded px-3 py-2"
>
<div className="mt-0.5 w-1.5 h-1.5 rounded-full bg-gradient-to-br from-[#47C3A6] to-[#14B7CC] flex-shrink-0" />
<div className="min-w-0">
<p className="text-xs text-[#1A202C] font-medium truncate">
{source.document.split("/").pop()}
</p>
{source.section && (
<p className="text-xs text-[#94A3B8] mt-0.5 truncate">{source.section}</p>
)}
</div>
<span className="ml-auto text-xs text-[#47C3A6] flex-shrink-0 font-mono">
{Math.round(source.score * 100)}%
</span>
</div>
))}
</div>
)}
</div>
);
}
|