Checkpoint frontend UI/UX overhaul and ingestion embed benchmark work

2026-08-06 17:21:21 +07:00
parent 1e8cbdb586
commit a4b8e1c4db
78 changed files with 6761 additions and 654 deletions
@@ -0,0 +1,102 @@
+"use client";
+
+import React from "react";
+import type { Citation } from "@duoc-thu/shared-types";
+import { CitationCard } from "@duoc-thu/ui";
+import { BookOpen, X, ShieldCheck, Layers, FileSearch } from "lucide-react";
+import { cn } from "@duoc-thu/ui";
+
+interface EvidencePanelProps {
+  citations: Citation[];
+  activeCitationIndex: number | null;
+  onSelectCitation: (citation: Citation, index: number) => void;
+  onClose?: () => void;
+  className?: string;
+}
+
+export function EvidencePanel({
+  citations,
+  activeCitationIndex,
+  onSelectCitation,
+  onClose,
+  className,
+}: EvidencePanelProps) {
+  return (
+    <aside
+      className={cn(
+        "flex flex-col border-l border-border-subtle bg-surface w-80 lg:w-96 shrink-0 h-full overflow-hidden transition-all z-20",
+        className
+      )}
+    >
+      {/* Evidence Header */}
+      <header className="p-4 border-b border-border-subtle flex items-center justify-between gap-2 bg-surface-elevated/80 backdrop-blur-md">
+        <div className="flex items-center gap-2">
+          <div className="flex h-8 w-8 items-center justify-center rounded-xl bg-accent-soft text-accent-primary">
+            <FileSearch className="h-4 w-4" />
+          </div>
+          <div>
+            <h3 className="m-0 text-xs font-bold text-txt-primary flex items-center gap-1.5">
+              <span>Bằng Chứng Dược Thư</span>
+              <span className="rounded-full bg-accent-primary px-2 py-0.5 text-[0.65rem] font-extrabold text-txt-inverse">
+                {citations.length}
+              </span>
+            </h3>
+            <p className="m-0 text-[0.68rem] text-txt-muted">
+              Căn cứ chính thức Dược thư QGVN 2018
+            </p>
+          </div>
+        </div>
+
+        {onClose && (
+          <button
+            onClick={onClose}
+            aria-label="Đóng thanh bằng chứng"
+            className="p-1.5 rounded-xl text-txt-muted hover:bg-surface-hover hover:text-txt-primary transition-colors"
+          >
+            <X className="h-4 w-4" />
+          </button>
+        )}
+      </header>
+
+      {/* Citations List */}
+      <div className="flex-1 overflow-y-auto p-4 space-y-3">
+        {citations.length === 0 ? (
+          <div className="flex flex-col items-center justify-center h-64 text-center p-6 text-txt-muted space-y-3">
+            <div className="flex h-12 w-12 items-center justify-center rounded-2xl bg-surface-elevated border border-border-subtle text-txt-muted">
+              <BookOpen className="h-6 w-6" />
+            </div>
+            <div>
+              <p className="text-xs font-semibold text-txt-primary">Chưa có trích dẫn nguồn</p>
+              <p className="text-[0.72rem] text-txt-muted mt-1 leading-relaxed">
+                Khi đặt câu hỏi tra cứu, các trích dẫn chuyên luận kèm số trang in Dược thư 2018 sẽ hiển thị tại đây.
+              </p>
+            </div>
+          </div>
+        ) : (
+          citations.map((citation, idx) => {
+            const citationIndex = idx + 1;
+            const isActive = activeCitationIndex === citationIndex;
+            return (
+              <CitationCard
+                key={idx}
+                citation={citation}
+                index={citationIndex}
+                isActive={isActive}
+                onSelect={() => onSelectCitation(citation, citationIndex)}
+              />
+            );
+          })
+        )}
+      </div>
+
+      {/* Footnote Metadata */}
+      <footer className="p-3 border-t border-border-subtle bg-surface-elevated/40 text-[0.68rem] text-txt-muted flex items-center justify-between">
+        <div className="flex items-center gap-1.5">
+          <ShieldCheck className="h-3.5 w-3.5 text-status-success" />
+          <span>Xác thực bởi Entailment Engine</span>
+        </div>
+        <span className="font-semibold text-txt-secondary">DTQGVN 2018</span>
+      </footer>
+    </aside>
+  );
+}