Fix ai-service Dockerfile: bake in drug_entities.json, override its path

packages/ui/src/CitationCard.tsx

@@ -2,7 +2,7 @@
 
 import React from "react";
 import type { Citation } from "@duoc-thu/shared-types";
-import { BookOpen, FileText, CheckCircle2, ChevronRight } from "lucide-react";
+import { BookOpen, FileText, ChevronRight, AlertTriangle, ExternalLink } from "lucide-react";
 import { cn } from "./lib/utils";
 
 interface CitationCardProps {
@@ -13,16 +13,31 @@ interface CitationCardProps {
   className?: string;
 }
 
+// Matches the real 19-field section_key enum the corpus is chunked on
+// (apps/ai-service/rag/understanding.py SECTION_KEY_HINTS) — the previous
+// map here used guessed keys (lieu_dung, tac_dung_phu, duoc_ly, qua_lieu,
+// bao_quan) that never matched a real chunk, so every citation silently
+// fell back to the raw slug instead of a readable label.
 const SECTION_LABELS: Record<string, string> = {
+  ten_chung_quoc_te: "Tên chung quốc tế",
+  ten_thuong_mai: "Tên thương mại",
+  ma_atc: "Mã ATC",
+  loai_thuoc: "Phân loại thuốc",
+  dang_thuoc_va_ham_luong: "Dạng thuốc & Hàm lượng",
+  duoc_ly_va_co_che_tac_dung: "Dược lý & Cơ chế tác dụng",
   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)",
+  than_trong: "Thận trọng",
+  thoi_ky_mang_thai: "Thời kỳ mang thai",
+  thoi_ky_cho_con_bu: "Thời kỳ cho con bú",
+  tac_dung_khong_mong_muon: "Tác dụng không mong muốn (ADR)",
+  huong_dan_xu_tri_adr: "Hướng dẫn xử trí ADR",
+  lieu_luong_va_cach_dung: "Liều lượng & Cách dùng",
   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",
+  qua_lieu_va_xu_tri: "Quá liều & Xử trí",
+  do_on_dinh_va_bao_quan: "Độ ổn định & Bảo quản",
+  tuong_ky: "Tương kỵ",
+  thong_tin_quy_che: "Thông tin quy chế",
 };
 
 export function CitationCard({
@@ -95,21 +110,43 @@ export function CitationCard({
         </span>
       </div>
 
-      {/* Snippet / Source Excerpt */}
+      {/* Snippet / Source Excerpt - the exact retrieved chunk text, verbatim */}
       {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>
+        <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 max-h-40 overflow-y-auto">
+          <span className="not-italic text-accent-primary font-bold mr-1">&ldquo;</span>
           {citation.snippet}
-          <span className="not-italic text-accent-primary font-bold ml-1">”</span>
+          <span className="not-italic text-accent-primary font-bold ml-1">&rdquo;</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>
+      {/* Quarantine notice - only rendered when the source pipeline actually
+          flagged this chunk (table/formula lifted out of prose), never a
+          generic boilerplate line for an ordinary citation. */}
+      {citation.isQuarantined && (
+        <div className="rounded-xl border border-status-warning/40 bg-status-warning-bg/50 p-2.5 text-[0.7rem] leading-snug text-txt-primary space-y-1.5">
+          <p className="m-0 flex items-start gap-1.5">
+            <AlertTriangle className="h-3.5 w-3.5 text-status-warning shrink-0 mt-0.5" />
+            <span>{citation.quarantineNotice}</span>
+          </p>
+          {citation.sourceCropUrl ? (
+            <img
+              src={citation.sourceCropUrl}
+              alt={`Ảnh chụp bảng/công thức trang in ${citation.sourcePageRange[0]}`}
+              className="w-full rounded-lg border border-border-subtle"
+            />
+          ) : (
+            <a
+              href={`/api/pdf#page=${(citation.quarantinePhysicalPage ?? citation.physicalPage) + 1}`}
+              target="_blank"
+              rel="noopener noreferrer"
+              onClick={(e) => e.stopPropagation()}
+              className="inline-flex items-center gap-1 rounded-lg bg-surface px-2 py-1 font-semibold text-accent-primary hover:underline"
+            >
+              <ExternalLink className="h-3 w-3" />
+              Mở trang PDF gốc để đối chiếu
+            </a>
+          )}
+        </div>
       )}
 
       <div className="flex items-center justify-end text-[0.65rem] font-medium text-accent-primary group-hover:translate-x-0.5 transition-transform">