Checkpoint frontend UI/UX overhaul and ingestion embed benchmark work

apps/web/app/_components/ChatPanel.tsx

@@ -1,121 +1,343 @@
 "use client";
 
-import { useState } from "react";
-import { Pill, Send } from "lucide-react";
-import type { ChatMessage, Citation } from "@duoc-thu/shared-types";
-import { ChatBubble, CitationCard, Card, Input, Button, cn } from "@duoc-thu/ui";
-import { sendChatMessage } from "@duoc-thu/api-client";
+import React, { useState, useEffect, useRef } from "react";
+import type { ChatMessage, Citation, SendMessageResponse } from "@duoc-thu/shared-types";
+import { ChatBubble, CitationBeamOverlay, useTheme } from "@duoc-thu/ui";
+import { Composer } from "./Composer";
+import {
+  Sparkles,
+  Pill,
+  ShieldCheck,
+  BookOpen,
+  Activity,
+  Zap,
+  Info,
+  AlertCircle,
+  Stethoscope,
+} from "lucide-react";
+import { cn } from "@duoc-thu/ui";
 
-function TypingIndicator() {
-  return (
-    <div className="inline-flex items-center gap-1 px-4 py-3" aria-label="Đang soạn câu trả lời">
-      <span className="h-1.5 w-1.5 animate-bounce-dot rounded-full bg-muted-foreground/60" />
-      <span className="h-1.5 w-1.5 animate-bounce-dot rounded-full bg-muted-foreground/60 [animation-delay:0.15s]" />
-      <span className="h-1.5 w-1.5 animate-bounce-dot rounded-full bg-muted-foreground/60 [animation-delay:0.3s]" />
-    </div>
-  );
-}
-
-export interface ChatPanelProps {
-  onCitationClick?: (citation: Citation) => void;
+interface ChatPanelProps {
+  sessionId: string;
+  initialQuery?: string;
+  onCitationClick?: (citation: Citation, index: number) => void;
+  onCitationsLoaded?: (citations: Citation[]) => void;
+  activeCitationIndex?: number | null;
   className?: string;
 }
 
-const ERROR_MESSAGE =
-  "Hệ thống tạm thời không phản hồi. Vui lòng thử lại — nếu vẫn lỗi, có thể dịch vụ tra cứu đang tạm ngưng.";
+const STARTER_QUESTIONS = [
+  {
+    category: "Liều Dùng Lâm Sàng",
+    query: "Liều dùng Paracetamol người lớn và trẻ em theo cân nặng là bao nhiêu?",
+    icon: Pill,
+  },
+  {
+    category: "Chống Chỉ Định",
+    query: "Chống chỉ định tuyệt đối và tương đối của Amoxicillin là gì?",
+    icon: Stethoscope,
+  },
+  {
+    category: "Tương Tác Thuốc",
+    query: "Tương tác giữa Metformin và thuốc cản quang chứa iốt xử trí thế nào?",
+    icon: Activity,
+  },
+  {
+    category: "Thận Trọng & ADR",
+    query: "Thận trọng khi dùng Aspirin cho bệnh nhân có tiền sử loét dạ dày?",
+    icon: Zap,
+  },
+];
 
-export function ChatPanel({ onCitationClick, className }: ChatPanelProps) {
+export function ChatPanel({
+  sessionId,
+  initialQuery,
+  onCitationClick,
+  onCitationsLoaded,
+  activeCitationIndex = null,
+  className,
+}: ChatPanelProps) {
+  const { resolvedTheme } = useTheme();
   const [messages, setMessages] = useState<ChatMessage[]>([]);
-  const [input, setInput] = useState("");
-  const [isSending, setIsSending] = useState(false);
-  // One id per chat session, so follow-ups ("còn trẻ em thì sao?") resolve
-  // against the same conversation on the backend.
-  const [conversationId] = useState(() =>
-    typeof crypto !== "undefined" && crypto.randomUUID
-      ? crypto.randomUUID()
-      : `conv-${Date.now()}`
-  );
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const messagesEndRef = useRef<HTMLDivElement>(null);
+  const abortControllerRef = useRef<AbortController | null>(null);
 
-  async function handleSubmit(event: React.FormEvent) {
-    event.preventDefault();
-    const content = input.trim();
-    if (!content || isSending) return;
+  const scrollToBottom = () => {
+    messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
+  };
 
-    const userMessage: ChatMessage = {
-      id: `local-${messages.length}`,
+  useEffect(() => {
+    scrollToBottom();
+  }, [messages, isLoading]);
+
+  const handleSendMessage = async (userText: string) => {
+    if (!userText.trim() || isLoading) return;
+
+    setError(null);
+
+    const userMsg: ChatMessage = {
+      id: `user-${Date.now()}`,
       role: "user",
-      content,
+      content: userText,
       createdAt: new Date().toISOString(),
     };
-    setMessages((prev) => [...prev, userMessage]);
-    setInput("");
-    setIsSending(true);
+
+    setMessages((prev) => [...prev, userMsg]);
+    setIsLoading(true);
+
+    abortControllerRef.current = new AbortController();
+
     try {
-      const response = await sendChatMessage(content, conversationId);
-      setMessages((prev) => [...prev, response.message]);
-    } catch {
-      // Never leave the user staring at their own message with no reply: an
-      // error is surfaced as a labelled bubble, not swallowed silently.
-      setMessages((prev) => [
-        ...prev,
-        {
-          id: `error-${messages.length}`,
-          role: "assistant",
-          content: ERROR_MESSAGE,
-          createdAt: new Date().toISOString(),
-        },
-      ]);
+      const res = await fetch("/api/chat", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          content: userText,
+          conversationId: sessionId,
+        }),
+        signal: abortControllerRef.current.signal,
+      });
+
+      if (!res.ok) {
+        throw new Error(`Upstream returned status ${res.status}`);
+      }
+
+      const data: SendMessageResponse = await res.json();
+      const assistantMsg = data.message;
+
+      setMessages((prev) => [...prev, assistantMsg]);
+
+      if (assistantMsg.citations && assistantMsg.citations.length > 0) {
+        onCitationsLoaded?.(assistantMsg.citations);
+      }
+    } catch (err: any) {
+      if (err.name === "AbortError") {
+        return;
+      }
+      setError("Không thể kết nối đến máy chủ AI Service. Vui lòng kiểm tra lại dịch vụ backend.");
     } finally {
-      setIsSending(false);
+      setIsLoading(false);
+      abortControllerRef.current = null;
     }
-  }
+  };
+
+  const handleStop = () => {
+    if (abortControllerRef.current) {
+      abortControllerRef.current.abort();
+      setIsLoading(false);
+      abortControllerRef.current = null;
+    }
+  };
+
+  useEffect(() => {
+    if (initialQuery) {
+      handleSendMessage(initialQuery);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [initialQuery]);
+
+  // Empty state renderer per theme
+  const renderEmptyState = () => {
+    if (resolvedTheme === "light") {
+      return (
+        <div className="flex flex-col items-center justify-center min-h-[60vh] py-8 px-4 text-center max-w-3xl mx-auto space-y-6">
+          <div className="flex h-16 w-16 items-center justify-center rounded-3xl bg-accent-soft text-accent-primary shadow-sm border border-border-accent/30">
+            <Pill className="h-8 w-8" />
+          </div>
+
+          <div>
+            <span className="inline-flex items-center gap-1.5 rounded-full border border-border-accent/30 bg-accent-soft px-3 py-1 text-xs font-bold text-accent-primary mb-2">
+              <ShieldCheck className="w-3.5 h-3.5" />
+              Daylight Clinical Intelligence (DTQGVN 2018)
+            </span>
+            <h2 className="text-xl sm:text-2xl font-extrabold text-txt-primary tracking-tight">
+              Tra Cứu Dược Thư Quốc Gia Việt Nam
+            </h2>
+            <p className="text-xs sm:text-sm text-txt-secondary mt-1.5 leading-relaxed max-w-xl mx-auto">
+              Hệ thống AI y tế tra cứu chính xác theo 684 chuyên luận chính thức. Mọi thông tin đều được xác thực suy luận (Entailment Verification) kèm trích dẫn trang in PDF.
+            </p>
+          </div>
+
+          <div className="grid grid-cols-1 sm:grid-cols-2 gap-3 w-full text-left pt-2">
+            {STARTER_QUESTIONS.map((q, idx) => {
+              const Icon = q.icon;
+              return (
+                <button
+                  key={idx}
+                  onClick={() => handleSendMessage(q.query)}
+                  className="p-3.5 rounded-2xl border border-border-subtle bg-surface hover:bg-surface-elevated hover:border-border-accent transition-all text-xs flex flex-col gap-1.5 shadow-sm group"
+                >
+                  <div className="flex items-center justify-between">
+                    <span className="font-bold text-accent-primary flex items-center gap-1.5">
+                      <Icon className="w-3.5 h-3.5" />
+                      {q.category}
+                    </span>
+                    <Sparkles className="w-3.5 h-3.5 text-txt-muted opacity-0 group-hover:opacity-100 transition-opacity" />
+                  </div>
+                  <p className="text-txt-secondary line-clamp-2 m-0 font-normal leading-snug">
+                    {q.query}
+                  </p>
+                </button>
+              );
+            })}
+          </div>
+        </div>
+      );
+    }
+
+    if (resolvedTheme === "glass") {
+      return (
+        <div className="flex flex-col items-center justify-center min-h-[60vh] py-8 px-4 text-center max-w-3xl mx-auto space-y-6">
+          <div className="relative flex h-20 w-20 items-center justify-center rounded-3xl bg-accent-soft text-accent-primary shadow-elevated border border-border-accent glass-panel glass-beam-glow animate-pulse-glow">
+            <Sparkles className="h-10 w-10" />
+          </div>
+
+          <div>
+            <span className="inline-flex items-center gap-1.5 rounded-full border border-border-accent bg-accent-soft px-3 py-1 text-xs font-extrabold text-accent-primary mb-2 shadow-sm">
+              <Activity className="w-3.5 h-3.5 text-accent-primary" />
+              Heavy Glass Liquid Intelligence OS
+            </span>
+            <h2 className="text-2xl sm:text-3xl font-extrabold text-txt-primary tracking-tight">
+              Hệ Thống Trí Tuệ Y Tế Spatial
+            </h2>
+            <p className="text-xs sm:text-sm text-txt-secondary mt-1.5 leading-relaxed max-w-xl mx-auto">
+              Không gian tra cứu đa tầng kính với hiệu ứng Citation Beam liên kết trực tiếp khẳng định lâm sàng đến trang sách gốc Dược thư 2018.
+            </p>
+          </div>
+
+          <div className="grid grid-cols-1 sm:grid-cols-2 gap-3 w-full text-left pt-2">
+            {STARTER_QUESTIONS.map((q, idx) => {
+              const Icon = q.icon;
+              return (
+                <button
+                  key={idx}
+                  onClick={() => handleSendMessage(q.query)}
+                  className="p-4 rounded-2xl border border-border-subtle bg-surface/70 hover:bg-surface-elevated hover:border-border-accent transition-all text-xs flex flex-col gap-1.5 shadow-elevated glass-content-card group"
+                >
+                  <div className="flex items-center justify-between">
+                    <span className="font-bold text-accent-primary flex items-center gap-1.5">
+                      <Icon className="w-3.5 h-3.5 text-accent-primary" />
+                      {q.category}
+                    </span>
+                    <Sparkles className="w-3.5 h-3.5 text-accent-primary" />
+                  </div>
+                  <p className="text-txt-secondary line-clamp-2 m-0 font-normal leading-snug">
+                    {q.query}
+                  </p>
+                </button>
+              );
+            })}
+          </div>
+        </div>
+      );
+    }
+
+    // Default Dark mode
+    return (
+      <div className="flex flex-col items-center justify-center min-h-[60vh] py-8 px-4 text-center max-w-3xl mx-auto space-y-6">
+        <div className="flex h-16 w-16 items-center justify-center rounded-3xl bg-surface-elevated border border-border-subtle text-accent-primary shadow-elevated">
+          <BookOpen className="h-8 w-8" />
+        </div>
+
+        <div>
+          <span className="inline-flex items-center gap-1.5 rounded-full border border-border-subtle bg-surface-elevated px-3 py-1 text-xs font-bold text-accent-primary mb-2">
+            <ShieldCheck className="w-3.5 h-3.5" />
+            Night Laboratory Intelligence Workspace
+          </span>
+          <h2 className="text-xl sm:text-2xl font-extrabold text-txt-primary tracking-tight">
+            Trợ Lý Tra Cứu Dược Thư QGVN
+          </h2>
+          <p className="text-xs sm:text-sm text-txt-secondary mt-1.5 leading-relaxed max-w-xl mx-auto">
+            Hệ thống phân tích & tra cứu Dược thư Quốc gia Việt Nam 2018. Đặt câu hỏi lâm sàng để nhận phân tích có căn cứ trích dẫn chính xác.
+          </p>
+        </div>
+
+        <div className="grid grid-cols-1 sm:grid-cols-2 gap-3 w-full text-left pt-2">
+          {STARTER_QUESTIONS.map((q, idx) => {
+            const Icon = q.icon;
+            return (
+              <button
+                key={idx}
+                onClick={() => handleSendMessage(q.query)}
+                className="p-3.5 rounded-2xl border border-border-subtle bg-surface hover:bg-surface-elevated hover:border-border-accent transition-all text-xs flex flex-col gap-1.5 shadow-sm group"
+              >
+                <div className="flex items-center justify-between">
+                  <span className="font-bold text-accent-primary flex items-center gap-1.5">
+                    <Icon className="w-3.5 h-3.5" />
+                    {q.category}
+                  </span>
+                  <Zap className="w-3.5 h-3.5 text-txt-muted opacity-0 group-hover:opacity-100 transition-opacity" />
+                </div>
+                <p className="text-txt-secondary line-clamp-2 m-0 font-normal leading-snug">
+                  {q.query}
+                </p>
+              </button>
+            );
+          })}
+        </div>
+      </div>
+    );
+  };
 
   return (
-    <Card className={cn("flex w-full flex-col overflow-hidden", className)}>
-      <div className="flex min-h-[32rem] flex-1 flex-col gap-1 overflow-y-auto p-6">
-        {messages.length === 0 && (
-          <div className="m-auto max-w-sm text-center text-muted-foreground">
-            <Pill className="mx-auto mb-2 h-10 w-10 text-primary" aria-hidden="true" />
-            <p className="mb-1.5 text-lg font-semibold text-foreground">
-              Hỏi về bất kỳ loại thuốc nào
-            </p>
-            <p className="text-[0.95rem]">
-              Ví dụ: &ldquo;Liều dùng paracetamol cho người lớn?&rdquo; hoặc &ldquo;Chống chỉ
-              định của amoxicillin là gì?&rdquo;
-            </p>
+    <section className={cn("flex flex-col h-full overflow-hidden relative", className)}>
+      {/* Citation Beam Overlay for Signature Interaction */}
+      <CitationBeamOverlay activeCitationIndex={activeCitationIndex} />
+
+      {/* Messages Workspace List */}
+      <div className="flex-1 overflow-y-auto p-4 sm:p-6 space-y-4">
+        {messages.length === 0 ? (
+          renderEmptyState()
+        ) : (
+          messages.map((msg) => (
+            <ChatBubble
+              key={msg.id}
+              message={msg}
+              onCitationClick={(citation, idx) => onCitationClick?.(citation, idx)}
+              activeCitationIndex={activeCitationIndex}
+              onRetry={() => handleSendMessage(msg.content)}
+            />
+          ))
+        )}
+
+        {/* Loading Indicator */}
+        {isLoading && (
+          <div className="flex items-center gap-3 p-4 rounded-2xl border border-border-subtle bg-surface max-w-md animate-pulse">
+            <div className="flex h-8 w-8 items-center justify-center rounded-xl bg-accent-soft text-accent-primary">
+              <Pill className="h-4 w-4 animate-spin" />
+            </div>
+            <div>
+              <p className="text-xs font-bold text-txt-primary">Đang truy xuất Dược thư QGVN 2018...</p>
+              <p className="text-[0.68rem] text-txt-muted">Đang phân tích chuyên luận & xác thực Entailment</p>
+            </div>
           </div>
         )}
-        {messages.map((message) => (
-          <div key={message.id}>
-            <ChatBubble message={message} />
-            {message.citations && message.citations.length > 0 && (
-              <div className="mb-4 mt-1.5 flex flex-wrap">
-                {message.citations.map((citation) => (
-                  <CitationCard
-                    key={citation.drugName}
-                    citation={citation}
-                    onClick={onCitationClick ? () => onCitationClick(citation) : undefined}
-                  />
-                ))}
-              </div>
-            )}
+
+        {/* Error Notification */}
+        {error && (
+          <div className="flex items-center justify-between gap-2 p-3.5 rounded-2xl border border-status-danger/40 bg-status-danger-bg text-status-danger text-xs">
+            <div className="flex items-center gap-2">
+              <AlertCircle className="w-4 h-4 shrink-0" />
+              <span>{error}</span>
+            </div>
+            <button
+              onClick={() => setError(null)}
+              className="font-bold underline text-[0.7rem]"
+            >
+              Đóng
+            </button>
           </div>
-        ))}
-        {isSending && <TypingIndicator />}
+        )}
+
+        <div ref={messagesEndRef} />
       </div>
-      <form className="flex gap-2.5 border-t bg-muted/40 p-4" onSubmit={handleSubmit}>
-        <Input
-          value={input}
-          onChange={(event) => setInput(event.target.value)}
-          placeholder="Hỏi về một loại thuốc..."
-          disabled={isSending}
-          aria-label="Nhập câu hỏi"
-        />
-        <Button type="submit" disabled={isSending}>
-          <Send className="h-4 w-4" aria-hidden="true" />
-          {isSending ? "Đang gửi" : "Gửi"}
-        </Button>
-      </form>
-    </Card>
+
+      {/* Fixed Composer Bottom Bar */}
+      <div className="p-3 sm:p-4 border-t border-border-subtle bg-surface-elevated/60 backdrop-blur-md">
+        <Composer onSubmit={handleSendMessage} isLoading={isLoading} onStop={handleStop} />
+      </div>
+    </section>
   );
 }