Spaces:
Sleeping
Sleeping
| import React, { useState, useEffect } from "react"; | |
| import { DocumentChunk } from "../contracts/tool_outputs.js"; | |
| import { FileText, Search, ExternalLink, RefreshCw } from "lucide-react"; | |
| import { useLanguage } from "../context/LanguageContext.js"; | |
| import { getBackendUrl } from "../utils/api.js"; | |
| const COUNTRIES = ["SAU", "ARE", "EGY", "USA", "DEU", "JPN", "BRA", "CHN"]; | |
| export const DocumentLibraryView: React.FC = () => { | |
| const { language, t } = useLanguage(); | |
| const isAr = language === "ar"; | |
| const [query, setQuery] = useState(isAr ? "الميزانية العامة والدين السيادي" : "sovereign debt budget"); | |
| const [debouncedQuery, setDebouncedQuery] = useState(query); | |
| const [selectedCountry, setSelectedCountry] = useState<string>("SAU"); | |
| const [alpha, setAlpha] = useState(0.6); | |
| const [documents, setDocuments] = useState<DocumentChunk[]>([]); | |
| const [loading, setLoading] = useState(false); | |
| const [error, setError] = useState(""); | |
| useEffect(() => { | |
| const id = setTimeout(() => setDebouncedQuery(query), 500); | |
| return () => clearTimeout(id); | |
| }, [query]); | |
| useEffect(() => { | |
| if (!debouncedQuery.trim()) return; | |
| const controller = new AbortController(); | |
| setLoading(true); | |
| setError(""); | |
| const params = new URLSearchParams({ query: debouncedQuery, alpha: String(alpha), country: selectedCountry }); | |
| fetch(`${getBackendUrl()}/api/rag/documents?${params}`, { signal: controller.signal }) | |
| .then(async (res) => { | |
| const json = await res.json().catch(() => ({})); | |
| if (!res.ok) throw new Error(json.error || `HTTP ${res.status}`); | |
| setDocuments(Array.isArray(json) ? json : []); | |
| }) | |
| .catch((err: Error) => { | |
| if (err.name !== "AbortError") setError(err.message); | |
| }) | |
| .finally(() => setLoading(false)); | |
| return () => controller.abort(); | |
| }, [debouncedQuery, selectedCountry, alpha]); | |
| return ( | |
| <div className="space-y-6 text-slate-100"> | |
| <div className="bg-slate-900 border border-slate-800 rounded-xl p-6 shadow-xl"> | |
| <div className="flex items-center gap-3 mb-4 border-b border-slate-800 pb-3"> | |
| <div className="w-8 h-8 rounded-lg bg-purple-500/20 text-purple-400 flex items-center justify-center shrink-0"> | |
| <FileText className="w-5 h-5" /> | |
| </div> | |
| <div> | |
| <h1 className="text-lg font-bold text-white font-display">{t.documents.title}</h1> | |
| <p className="text-xs text-slate-400">{t.documents.subtitle}</p> | |
| </div> | |
| </div> | |
| <div className="grid grid-cols-1 md:grid-cols-12 gap-4 mb-6 p-4 bg-slate-950/80 rounded-xl border border-slate-800"> | |
| <div className="md:col-span-6"> | |
| <label className="text-[10px] font-mono text-slate-400 block mb-1">{isAr ? "عبارة البحث" : "Search query"}</label> | |
| <div className="relative"> | |
| <Search className="w-4 h-4 text-slate-500 absolute start-3 top-2.5" /> | |
| <input | |
| type="text" | |
| value={query} | |
| maxLength={1000} | |
| onChange={(e) => setQuery(e.target.value)} | |
| placeholder={t.documents.searchPlaceholder} | |
| className="w-full bg-slate-900 border border-slate-800 rounded-lg ps-9 pe-3 py-1.5 text-xs text-slate-200 focus:outline-none focus:border-purple-500" | |
| /> | |
| </div> | |
| </div> | |
| <div className="md:col-span-3"> | |
| <label className="text-[10px] font-mono text-slate-400 block mb-1">{isAr ? "الدولة" : "Country"}</label> | |
| <select | |
| value={selectedCountry} | |
| onChange={(e) => setSelectedCountry(e.target.value)} | |
| className="w-full bg-slate-900 border border-slate-800 rounded-lg px-3 py-1.5 text-xs font-mono text-slate-200" | |
| > | |
| {COUNTRIES.map((c) => ( | |
| <option key={c} value={c}>{c}</option> | |
| ))} | |
| </select> | |
| </div> | |
| <div className="md:col-span-3 flex flex-col justify-center"> | |
| <div className="flex items-center justify-between text-[10px] font-mono text-slate-400 mb-1"> | |
| <span>{isAr ? "وزن العنوان مقابل النص" : "Title vs body weight"}</span> | |
| <span className="text-purple-300 font-bold">{alpha.toFixed(1)}</span> | |
| </div> | |
| <input | |
| type="range" | |
| min={0} | |
| max={1} | |
| step={0.1} | |
| value={alpha} | |
| onChange={(e) => setAlpha(parseFloat(e.target.value))} | |
| className="w-full accent-purple-400 cursor-pointer" | |
| /> | |
| </div> | |
| </div> | |
| {loading && ( | |
| <div className="flex items-center gap-2 text-xs font-mono text-slate-400 mb-3"> | |
| <RefreshCw className="w-3.5 h-3.5 animate-spin" /> {isAr ? "جارٍ البحث..." : "Searching..."} | |
| </div> | |
| )} | |
| {error && <div className="text-xs text-rose-400 mb-3">{error}</div>} | |
| {!loading && !error && documents.length === 0 && ( | |
| <div className="p-8 text-center text-xs text-slate-500 bg-slate-950/60 rounded-xl border border-slate-800">{t.documents.noDocsFound}</div> | |
| )} | |
| <div className="space-y-3"> | |
| {documents.map((doc) => ( | |
| <a | |
| key={doc.chunk_id} | |
| href={doc.url || undefined} | |
| target="_blank" | |
| rel="noopener noreferrer" | |
| className="block p-4 bg-slate-950/70 hover:bg-slate-800/60 border border-slate-800 hover:border-purple-500/50 rounded-xl transition-all group" | |
| > | |
| <div className="flex flex-wrap items-center justify-between gap-2 mb-2"> | |
| <div className="flex flex-wrap items-center gap-2"> | |
| <span className="px-2 py-0.5 bg-purple-950 text-purple-300 border border-purple-800/80 text-[10px] font-mono font-bold rounded"> | |
| [{doc.chunk_id}] | |
| </span> | |
| <span className="text-xs text-slate-400">{doc.source_authority}</span> | |
| <span className="text-[11px] font-mono text-slate-500"> | |
| {new Date(doc.publication_timestamp).toLocaleDateString(isAr ? "ar-SA" : "en-US")} | |
| </span> | |
| </div> | |
| <div className="text-xs font-mono text-purple-400 flex items-center gap-1"> | |
| <span>{isAr ? "الصلة" : "Relevance"}: {doc.score ?? 0}</span> | |
| {doc.url && <ExternalLink className="w-3 h-3" />} | |
| </div> | |
| </div> | |
| <h3 className="text-sm font-bold text-slate-200 group-hover:text-purple-300 transition-colors mb-1">{doc.title}</h3> | |
| <p className="text-xs text-slate-400 line-clamp-2 leading-relaxed">{doc.content}</p> | |
| </a> | |
| ))} | |
| </div> | |
| </div> | |
| </div> | |
| ); | |
| }; | |