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

packages/ui/src/ChatBubble.tsx

@@ -14,14 +14,25 @@ import {
   RotateCcw,
   ExternalLink,
   BookOpen,
+  CornerDownRight,
 } from "lucide-react";
 import { cn } from "./lib/utils";
 
 interface ChatBubbleProps {
   message: ChatMessage;
-  onCitationClick?: (citation: Citation, index: number) => void;
+  // `allCitations` is THIS message's own citation list (`message.citations`)
+  // — found live 2026-08-07: the caller previously had no way to know which
+  // message a click came from, so it kept showing whatever citation array a
+  // LATER message had most recently loaded. Clicking [1] on an old answer
+  // (e.g. Omeprazol's mechanism) displayed a completely unrelated later
+  // drug's evidence (e.g. Kanamycin) in the source panel — a real, live-
+  // reported bug for a product whose entire value proposition is a
+  // verifiable citation trail.
+  onCitationClick?: (citation: Citation, index: number, allCitations: Citation[]) => void;
   activeCitationIndex?: number | null;
   onRetry?: () => void;
+  /** Fired when the user picks a quick-reply chip instead of typing — sends that text as the next turn. */
+  onQuickReply?: (text: string) => void;
   className?: string;
 }
 
@@ -30,6 +41,7 @@ export function ChatBubble({
   onCitationClick,
   activeCitationIndex,
   onRetry,
+  onQuickReply,
   className,
 }: ChatBubbleProps) {
   const [copied, setCopied] = useState(false);
@@ -51,83 +63,92 @@ export function ChatBubble({
     );
   }
 
+  // Citation markers must render INLINE within whatever block (paragraph/
+  // bullet/heading) they end the sentence of — never split out as a bare
+  // top-level element. Found live 2026-08-07: the old approach split the
+  // WHOLE content on `[n]` first and only then broke each piece into lines,
+  // so a citation sitting on its own source line (a common shape for a
+  // multi-band dosing answer, e.g. "...5,4 g/ngày\n[1]\n; cấp tính...") ended
+  // up as a bare `<button>` between two block-level `<p>`s — visually its
+  // own orphaned line, fragmenting a short list into a choppy one-clause-
+  // per-line mess instead of a readable paragraph or bullet list.
+  const renderInline = (text: string, keyPrefix: string, citations?: Citation[]) => {
+    const segments = text.split(/(\[\d+\])/g);
+    return segments.map((seg, i) => {
+      const match = seg.match(/^\[(\d+)\]$/);
+      if (!match) {
+        return <React.Fragment key={`${keyPrefix}-t-${i}`}>{formatBoldText(seg)}</React.Fragment>;
+      }
+      const citationIndex = parseInt(match[1], 10);
+      const citationObj = citations && citations[citationIndex - 1];
+      const isActive = activeCitationIndex === citationIndex;
+      return (
+        <button
+          key={`${keyPrefix}-c-${i}`}
+          id={`citation-marker-${citationIndex}`}
+          onClick={() => {
+            if (citationObj) {
+              onCitationClick?.(citationObj, citationIndex, citations ?? []);
+            }
+          }}
+          title={citationObj ? `${citationObj.drugName} (${citationObj.sectionType})` : `Trích dẫn [${citationIndex}]`}
+          className={cn(
+            "inline-flex items-center justify-center min-w-[1.25rem] h-5 px-1.5 mx-0.5 rounded-full text-[0.68rem] font-extrabold tracking-tight transition-all align-baseline cursor-pointer select-none",
+            isActive
+              ? "bg-accent-primary text-txt-inverse scale-110 shadow-md ring-2 ring-accent-glow glass-beam-glow"
+              : "bg-accent-soft text-accent-primary hover:bg-accent-primary hover:text-txt-inverse border border-border-subtle"
+          )}
+        >
+          {citationIndex}
+        </button>
+      );
+    });
+  };
+
   // Helper to parse citations [1], [2] in markdown content
   const renderStructuredContent = (content: string, citations?: Citation[]) => {
-    // Split content by citations like [1], [2], etc.
-    const parts = content.split(/(\[\d+\])/g);
-
-    return parts.map((part, i) => {
-      const match = part.match(/^\[(\d+)\]$/);
-      if (match) {
-        const citationIndex = parseInt(match[1], 10);
-        const citationObj = citations && citations[citationIndex - 1];
-        const isActive = activeCitationIndex === citationIndex;
+    const lines = content.split("\n");
+    return lines.map((line, lineIdx) => {
+      if (!line.trim()) return <br key={lineIdx} />;
 
+      // Heading 2 or 3
+      if (line.startsWith("### ") || line.startsWith("## ")) {
         return (
-          <button
-            key={`cite-${i}`}
-            id={`citation-marker-${citationIndex}`}
-            onClick={() => {
-              if (citationObj) {
-                onCitationClick?.(citationObj, citationIndex);
-              }
-            }}
-            title={citationObj ? `${citationObj.drugName} (${citationObj.sectionType})` : `Trích dẫn [${citationIndex}]`}
-            className={cn(
-              "inline-flex items-center justify-center min-w-[1.25rem] h-5 px-1.5 mx-0.5 rounded-full text-[0.68rem] font-extrabold tracking-tight transition-all align-baseline cursor-pointer select-none",
-              isActive
-                ? "bg-accent-primary text-txt-inverse scale-110 shadow-md ring-2 ring-accent-glow glass-beam-glow"
-                : "bg-accent-soft text-accent-primary hover:bg-accent-primary hover:text-txt-inverse border border-border-subtle"
-            )}
-          >
-            [{citationIndex}]
-          </button>
+          <h3 key={lineIdx} className="text-base font-extrabold text-txt-primary mt-3 mb-1.5 flex items-center gap-2">
+            <span className="w-1.5 h-4 rounded-full bg-accent-primary inline-block" />
+            {renderInline(line.replace(/^#+\s*/, ""), `h-${lineIdx}`, citations)}
+          </h3>
         );
       }
 
-      // Format markdown-like text lines
-      const lines = part.split("\n");
+      // Bullet points
+      if (line.trim().startsWith("- ") || line.trim().startsWith("* ")) {
+        return (
+          <li key={lineIdx} className="ml-4 list-disc text-txt-secondary mb-1">
+            {renderInline(line.trim().replace(/^[-*]\s*/, ""), `li-${lineIdx}`, citations)}
+          </li>
+        );
+      }
+
+      // Warning block / Note
+      if (line.includes("Chống chỉ định") || line.includes("Cảnh báo") || line.includes("Thận trọng")) {
+        return (
+          <div key={lineIdx} className="my-2 rounded-xl border border-status-warning/40 bg-status-warning-bg/60 p-3 text-xs leading-relaxed text-txt-primary flex items-start gap-2.5">
+            <AlertTriangle className="h-4 w-4 text-status-warning shrink-0 mt-0.5" />
+            <div>{renderInline(line, `w-${lineIdx}`, citations)}</div>
+          </div>
+        );
+      }
+
+      // The primary clinical answer text — the one thing on this whole card
+      // a clinician actually needs to read, so it carries more visual
+      // weight than the surrounding header/footer chrome (found live
+      // 2026-08-07: previously the same low-emphasis size/weight as
+      // everything else, easy to skim past).
       return (
-        <React.Fragment key={`text-${i}`}>
-          {lines.map((line, lineIdx) => {
-            if (!line.trim()) return <br key={lineIdx} />;
-
-            // Heading 2 or 3
-            if (line.startsWith("### ") || line.startsWith("## ")) {
-              return (
-                <h3 key={lineIdx} className="text-base font-extrabold text-txt-primary mt-3 mb-1.5 flex items-center gap-2">
-                  <span className="w-1.5 h-4 rounded-full bg-accent-primary inline-block" />
-                  {line.replace(/^#+\s*/, "")}
-                </h3>
-              );
-            }
-
-            // Bullet points
-            if (line.trim().startsWith("- ") || line.trim().startsWith("* ")) {
-              return (
-                <li key={lineIdx} className="ml-4 list-disc text-txt-secondary mb-1">
-                  {formatBoldText(line.trim().replace(/^[-*]\s*/, ""))}
-                </li>
-              );
-            }
-
-            // Warning block / Note
-            if (line.includes("Chống chỉ định") || line.includes("Cảnh báo") || line.includes("Thận trọng")) {
-              return (
-                <div key={lineIdx} className="my-2 rounded-xl border border-status-warning/40 bg-status-warning-bg/60 p-3 text-xs leading-relaxed text-txt-primary flex items-start gap-2.5">
-                  <AlertTriangle className="h-4 w-4 text-status-warning shrink-0 mt-0.5" />
-                  <div>{formatBoldText(line)}</div>
-                </div>
-              );
-            }
-
-            return (
-              <p key={lineIdx} className="mb-2 text-txt-primary text-sm leading-relaxed">
-                {formatBoldText(line)}
-              </p>
-            );
-          })}
-        </React.Fragment>
+        <p key={lineIdx} className="mb-2 text-txt-primary text-[0.95rem] font-medium leading-relaxed">
+          {renderInline(line, `p-${lineIdx}`, citations)}
+        </p>
       );
     });
   };
@@ -175,11 +196,21 @@ export function ChatBubble({
         </div>
 
         <div className="flex items-center gap-2">
-          {message.grounded !== false ? (
+          {message.decision === "answerable" && message.grounded !== false ? (
             <span className="inline-flex items-center gap-1 rounded-full border border-status-success/30 bg-status-success-bg px-2.5 py-0.5 text-[0.65rem] font-extrabold text-status-success">
               <ShieldCheck className="h-3 w-3" />
               ENTAILED & GROUNDED
             </span>
+          ) : message.decision === "verify_pdf" ? (
+            <span className="inline-flex items-center gap-1 rounded-full border border-status-warning/30 bg-status-warning-bg px-2.5 py-0.5 text-[0.65rem] font-extrabold text-status-warning">
+              <AlertTriangle className="h-3 w-3" />
+              CẦN ĐỐI CHIẾU PDF GỐC
+            </span>
+          ) : message.decision === "clarify" ? (
+            <span className="inline-flex items-center gap-1 rounded-full border border-border-accent/40 bg-accent-soft px-2.5 py-0.5 text-[0.65rem] font-extrabold text-accent-primary">
+              <Info className="h-3 w-3" />
+              CẦN LÀM RÕ CÂU HỎI
+            </span>
           ) : (
             <span className="inline-flex items-center gap-1 rounded-full border border-status-warning/30 bg-status-warning-bg px-2.5 py-0.5 text-[0.65rem] font-extrabold text-status-warning">
               <Info className="h-3 w-3" />
@@ -187,6 +218,33 @@ export function ChatBubble({
             </span>
           )}
 
+          {/* How the answer was produced from the retrieved evidence — only
+              meaningful for a real answerable turn (rag/answer.py's two
+              operating modes: LLM paraphrase vs. verbatim quote). A clarify
+              or verify_pdf turn is neither, so it gets no source-mode pill. */}
+          {message.decision === "answerable" && message.grounded !== false && message.generated !== undefined && (
+            <span
+              title={
+                message.generated
+                  ? "Câu trả lời do LLM diễn giải lại từ chuyên luận gốc, đã qua kiểm tra grounding + entailment."
+                  : "Trích dẫn nguyên văn từ chuyên luận gốc, không qua diễn giải của LLM."
+              }
+              className="inline-flex items-center gap-1 rounded-full border border-border-subtle bg-surface-elevated px-2.5 py-0.5 text-[0.65rem] font-bold text-txt-secondary"
+            >
+              {message.generated ? (
+                <>
+                  <Sparkles className="h-3 w-3 text-accent-primary" />
+                  AI diễn giải, đã kiểm chứng
+                </>
+              ) : (
+                <>
+                  <BookOpen className="h-3 w-3 text-accent-primary" />
+                  Trích dẫn nguyên văn
+                </>
+              )}
+            </span>
+          )}
+
           <time className="text-[0.68rem] text-txt-muted hidden sm:inline">
             {new Date(message.createdAt).toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" })}
           </time>
@@ -198,6 +256,23 @@ export function ChatBubble({
         {renderStructuredContent(message.content, message.citations)}
       </div>
 
+      {/* Quick-reply chips — only for a clarify turn the model gave a few
+          natural discrete answers to; free text always still works. */}
+      {message.quickReplies && message.quickReplies.length > 0 && (
+        <div className="px-4 pb-3 flex flex-wrap gap-2">
+          {message.quickReplies.map((reply, idx) => (
+            <button
+              key={idx}
+              onClick={() => onQuickReply?.(reply)}
+              className="inline-flex items-center gap-1.5 rounded-full border border-border-accent bg-accent-soft px-3 py-1.5 text-xs font-bold text-accent-primary hover:bg-accent-primary hover:text-txt-inverse transition-colors"
+            >
+              <CornerDownRight className="h-3 w-3" />
+              {reply}
+            </button>
+          ))}
+        </div>
+      )}
+
       {/* Disclaimer Section inside document */}
       {message.disclaimer && (
         <div className="mx-4 mb-3 rounded-xl border border-border-subtle bg-surface-elevated/50 p-2.5 text-[0.72rem] text-txt-muted flex items-start gap-2">