Checkpoint frontend UI/UX overhaul and ingestion embed benchmark work

packages/ui/src/CitationCard.tsx

@@ -1,39 +1,121 @@
-import { FileText } from "lucide-react";
+"use client";
+
+import React from "react";
 import type { Citation } from "@duoc-thu/shared-types";
-import { badgeVariants } from "./primitives/badge";
+import { BookOpen, FileText, CheckCircle2, ChevronRight } from "lucide-react";
 import { cn } from "./lib/utils";
 
-export interface CitationCardProps {
+interface CitationCardProps {
   citation: Citation;
-  onClick?: () => void;
+  index: number;
+  isActive?: boolean;
+  onSelect?: () => void;
+  className?: string;
 }
 
-export function CitationCard({ citation, onClick }: CitationCardProps) {
-  const [fromPage, toPage] = citation.sourcePageRange;
-  const className = cn(
-    badgeVariants({ variant: "outline" }),
-    "mr-1.5 mt-1 border-primary/20 bg-primary/5 font-normal text-foreground",
-    onClick && "cursor-pointer transition-colors hover:bg-primary/10"
-  );
-  const content = (
-    <>
-      <FileText className="h-3.5 w-3.5 text-primary" aria-hidden="true" />
-      <span className="font-bold text-primary">{citation.drugName}</span>
-      <span className="text-muted-foreground">{citation.sectionType}</span>
-      <span className="text-muted-foreground">
-        tr. {fromPage}
-        {toPage !== fromPage ? `–${toPage}` : ""}
-      </span>
-    </>
-  );
+const SECTION_LABELS: Record<string, string> = {
+  chi_dinh: "Chỉ định",
+  chong_chi_dinh: "Chống chỉ định",
+  lieu_dung: "Liều lượng & Cách dùng",
+  tac_dung_phu: "Tác dụng không mong muốn (ADR)",
+  tuong_tac_thuoc: "Tương tác thuốc",
+  duoc_ly: "Dược lý & Cơ chế tác dụng",
+  than_trong: "Thận trọng khi dùng",
+  qua_lieu: "Quá liều & Xử trí",
+  bao_quan: "Bảo quản",
+};
 
-  if (onClick) {
-    return (
-      <button type="button" className={className} onClick={onClick}>
-        {content}
-      </button>
-    );
-  }
+export function CitationCard({
+  citation,
+  index,
+  isActive = false,
+  onSelect,
+  className,
+}: CitationCardProps) {
+  const sectionLabel = SECTION_LABELS[citation.sectionType] ?? citation.sectionType ?? "Chuyên luận";
+  const pageRangeText = citation.sourcePageRange
+    ? `Trang ${citation.sourcePageRange[0]}${
+        citation.sourcePageRange[1] && citation.sourcePageRange[1] !== citation.sourcePageRange[0]
+          ? `–${citation.sourcePageRange[1]}`
+          : ""
+      }`
+    : "Dược thư 2018";
 
-  return <div className={className}>{content}</div>;
+  return (
+    <div
+      onClick={onSelect}
+      id={`citation-card-${index}`}
+      tabIndex={0}
+      role="button"
+      onKeyDown={(e) => {
+        if (e.key === "Enter" || e.key === " ") {
+          e.preventDefault();
+          onSelect?.();
+        }
+      }}
+      className={cn(
+        "group relative flex flex-col gap-2 rounded-2xl border p-3.5 transition-all cursor-pointer select-none",
+        isActive
+          ? "bg-accent-soft/30 border-border-accent shadow-elevated glass-beam-glow ring-2 ring-accent-primary/20"
+          : "bg-surface border-border-subtle hover:border-border-active hover:bg-surface-elevated shadow-sm",
+        className
+      )}
+    >
+      {/* Header */}
+      <div className="flex items-center justify-between gap-2">
+        <div className="flex items-center gap-2 min-w-0">
+          <span
+            className={cn(
+              "flex h-5 w-5 shrink-0 items-center justify-center rounded-md text-[0.7rem] font-extrabold tracking-tight transition-colors",
+              isActive
+                ? "bg-accent-primary text-txt-inverse shadow-sm"
+                : "bg-surface-elevated text-txt-secondary border border-border-subtle group-hover:border-border-active"
+            )}
+          >
+            {index}
+          </span>
+          <h4 className="m-0 truncate text-xs font-bold text-txt-primary">
+            {citation.drugName || "Chuyên luận Dược thư"}
+          </h4>
+        </div>
+
+        <div className="flex items-center gap-1 shrink-0">
+          <span className="inline-flex items-center gap-1 rounded-full border border-border-subtle bg-surface-elevated px-2 py-0.5 text-[0.65rem] font-semibold text-txt-secondary">
+            <BookOpen className="h-2.5 w-2.5 text-accent-primary" />
+            {pageRangeText}
+          </span>
+        </div>
+      </div>
+
+      {/* Section Badge */}
+      <div className="flex items-center gap-1.5">
+        <span className="inline-flex items-center gap-1 rounded-md bg-accent-soft px-2 py-0.5 text-[0.68rem] font-semibold text-accent-primary">
+          <FileText className="h-3 w-3" />
+          {sectionLabel}
+        </span>
+      </div>
+
+      {/* Snippet / Source Excerpt */}
+      {citation.snippet && (
+        <div className="relative rounded-xl border border-border-subtle bg-surface-elevated/70 p-2.5 text-[0.75rem] leading-relaxed text-txt-secondary italic font-sans">
+          <span className="not-italic text-accent-primary font-bold mr-1">“</span>
+          {citation.snippet}
+          <span className="not-italic text-accent-primary font-bold ml-1">”</span>
+        </div>
+      )}
+
+      {/* Reason / Entailment Note */}
+      {citation.reason && (
+        <p className="m-0 text-[0.68rem] leading-snug text-txt-muted flex items-start gap-1">
+          <CheckCircle2 className="h-3 w-3 text-status-success shrink-0 mt-0.5" />
+          <span>{citation.reason}</span>
+        </p>
+      )}
+
+      <div className="flex items-center justify-end text-[0.65rem] font-medium text-accent-primary group-hover:translate-x-0.5 transition-transform">
+        <span>Xem trích dẫn đầy đủ</span>
+        <ChevronRight className="h-3 w-3 ml-0.5" />
+      </div>
+    </div>
+  );
 }