Checkpoint frontend UI/UX overhaul and ingestion embed benchmark work

apps/web/app/tra-cuu/page.tsx

@@ -1,28 +1,76 @@
 "use client";
 
 import { useState } from "react";
+import { BookOpen, Bookmark, FileText, Sparkles } from "lucide-react";
 import type { Citation } from "@duoc-thu/shared-types";
 import { ChatPanel } from "../_components/ChatPanel";
+import { cn } from "@duoc-thu/ui";
 
 export default function TraCuuPage() {
+  const [activePage, setActivePage] = useState<number | null>(null);
+  const [activeDrug, setActiveDrug] = useState<string | null>(null);
   const [pdfSrc, setPdfSrc] = useState("/api/pdf");
 
   function handleCitationClick(citation: Citation) {
-    const [page] = citation.sourcePageRange;
-    setPdfSrc(`/api/pdf#page=${page}`);
+    if (citation.sourcePageRange && citation.sourcePageRange[0]) {
+      const page = citation.sourcePageRange[0];
+      setActivePage(page);
+      setActiveDrug(citation.drugName);
+      setPdfSrc(`/api/pdf#page=${page}`);
+    }
   }
 
   return (
-    <div className="flex w-full max-w-7xl flex-col gap-4 lg:flex-row lg:items-stretch">
-      <div className="min-h-[32rem] flex-[1.2] overflow-hidden rounded-2xl border bg-card shadow-sm">
-        <iframe
-          key={pdfSrc}
-          src={pdfSrc}
-          title="Dược thư quốc gia Việt Nam 2018"
-          className="h-full min-h-[32rem] w-full"
+    <div className="flex flex-1 w-full h-[calc(100vh-6.5rem)] p-4 sm:p-6 overflow-hidden bg-app gap-4">
+      {/* PDF Document Reader Pane */}
+      <div className="flex flex-[1.3] flex-col overflow-hidden rounded-2xl border border-border-subtle bg-surface shadow-sm">
+        {/* Viewer Header */}
+        <div className="flex items-center justify-between border-b border-border-subtle bg-surface-elevated px-4 py-2.5">
+          <div className="flex items-center gap-2">
+            <BookOpen className="h-4 w-4 text-accent-primary" />
+            <span className="text-xs font-bold text-txt-primary">
+              Văn bản gốc: Dược thư quốc gia Việt Nam 2018 (PDF)
+            </span>
+          </div>
+
+          {activePage ? (
+            <div className="flex items-center gap-1.5 rounded-lg border border-border-accent bg-accent-soft px-2.5 py-1 text-xs font-bold text-accent-primary">
+              <Bookmark className="h-3.5 w-3.5" />
+              <span>
+                {activeDrug ? `${activeDrug} — ` : ""}Trang {activePage}
+              </span>
+            </div>
+          ) : (
+            <div className="flex items-center gap-1 text-xs text-txt-muted">
+              <FileText className="h-3.5 w-3.5" />
+              <span>1.668 trang PDF</span>
+            </div>
+          )}
+        </div>
+
+        {/* Embedded PDF Viewer */}
+        <div className="relative flex-1 bg-surface-elevated">
+          <iframe
+            key={pdfSrc}
+            src={pdfSrc}
+            title="Dược thư quốc gia Việt Nam 2018"
+            className="h-full w-full border-none"
+          />
+        </div>
+      </div>
+
+      {/* AI Assistant Chat Pane */}
+      <div className="flex flex-1 flex-col overflow-hidden">
+        <div className="mb-2 flex items-center gap-1.5 px-1 text-xs font-medium text-txt-muted">
+          <Sparkles className="h-3.5 w-3.5 text-accent-primary" />
+          <span>Bấm vào Trích Nguồn bên dưới để nhảy trực tiếp tới trang PDF tương ứng</span>
+        </div>
+        <ChatPanel
+          sessionId="tra-cuu-session"
+          className="flex-1 h-full"
+          onCitationClick={handleCitationClick}
         />
       </div>
-      <ChatPanel className="flex-1" onCitationClick={handleCitationClick} />
     </div>
   );
 }