Scaffold web frontend: mock-backed chat + PDF split-view, Tailwind/shadcn

2026-07-31 12:16:47 +07:00
parent b72d4bf9d9
commit 967b917001
43 changed files with 5192 additions and 7 deletions
@@ -0,0 +1,99 @@
+"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";
+
+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;
+  className?: string;
+}
+
+export function ChatPanel({ onCitationClick, className }: ChatPanelProps) {
+  const [messages, setMessages] = useState<ChatMessage[]>([]);
+  const [input, setInput] = useState("");
+  const [isSending, setIsSending] = useState(false);
+
+  async function handleSubmit(event: React.FormEvent) {
+    event.preventDefault();
+    const content = input.trim();
+    if (!content || isSending) return;
+
+    const userMessage: ChatMessage = {
+      id: `local-${messages.length}`,
+      role: "user",
+      content,
+      createdAt: new Date().toISOString(),
+    };
+    setMessages((prev) => [...prev, userMessage]);
+    setInput("");
+    setIsSending(true);
+    try {
+      const response = await sendChatMessage(content);
+      setMessages((prev) => [...prev, response.message]);
+    } finally {
+      setIsSending(false);
+    }
+  }
+
+  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>
+          </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>
+            )}
+          </div>
+        ))}
+        {isSending && <TypingIndicator />}
+      </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>
+  );
+}
@@ -0,0 +1,36 @@
+"use client";
+
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+import { cn } from "@duoc-thu/ui";
+
+const TABS = [
+  { href: "/", label: "Trò chuyện" },
+  { href: "/tra-cuu", label: "Tra cứu cùng PDF" },
+];
+
+export function NavTabs() {
+  const pathname = usePathname();
+
+  return (
+    <nav className="flex gap-1" aria-label="Chuyển chế độ">
+      {TABS.map((tab) => {
+        const isActive = pathname === tab.href;
+        return (
+          <Link
+            key={tab.href}
+            href={tab.href}
+            className={cn(
+              "rounded-full px-3.5 py-1.5 text-sm font-medium transition-colors",
+              isActive
+                ? "bg-white/20 text-primary-foreground"
+                : "text-primary-foreground/70 hover:bg-white/10 hover:text-primary-foreground"
+            )}
+          >
+            {tab.label}
+          </Link>
+        );
+      })}
+    </nav>
+  );
+}
@@ -0,0 +1,35 @@
+import { readFile } from "fs/promises";
+import path from "path";
+import { NextResponse } from "next/server";
+
+export const runtime = "nodejs";
+
+const PDF_PATH = path.join(
+  process.cwd(),
+  "..",
+  "..",
+  "ingestion",
+  "data",
+  "raw",
+  "duoc-thu-quoc-gia-viet-nam-2018.pdf"
+);
+
+export async function GET() {
+  try {
+    const file = await readFile(PDF_PATH);
+    return new NextResponse(file, {
+      headers: {
+        "Content-Type": "application/pdf",
+        "Content-Disposition": "inline",
+      },
+    });
+  } catch {
+    return NextResponse.json(
+      {
+        error:
+          "Không tìm thấy file PDF nguồn tại ingestion/data/raw/duoc-thu-quoc-gia-viet-nam-2018.pdf.",
+      },
+      { status: 404 }
+    );
+  }
+}
@@ -0,0 +1,41 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  :root {
+    --background: 40 30% 97%;
+    --foreground: 175 30% 12%;
+    --card: 0 0% 100%;
+    --card-foreground: 175 30% 12%;
+    --primary: 173 62% 40%;
+    --primary-foreground: 160 60% 98%;
+    --secondary: 165 30% 94%;
+    --secondary-foreground: 175 30% 12%;
+    --muted: 60 20% 95%;
+    --muted-foreground: 175 12% 42%;
+    --accent: 165 35% 92%;
+    --accent-foreground: 175 30% 12%;
+    --border: 60 15% 89%;
+    --input: 60 15% 89%;
+    --ring: 173 62% 40%;
+    --warning: 48 96% 89%;
+    --warning-foreground: 22 78% 26%;
+    --radius: 1rem;
+  }
+}
+
+@layer base {
+  * {
+    @apply border-border;
+  }
+
+  html {
+    font-size: 18px;
+  }
+
+  body {
+    @apply bg-background text-foreground;
+    line-height: 1.6;
+  }
+}
@@ -0,0 +1,36 @@
+import type { Metadata } from "next";
+import { DisclaimerBanner } from "@duoc-thu/ui";
+import { NavTabs } from "./_components/NavTabs";
+import "./globals.css";
+
+export const metadata: Metadata = {
+  title: "Dược Thư RAG",
+  description: "Chatbot tra cứu Dược thư quốc gia Việt Nam",
+};
+
+export default function RootLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <html lang="vi">
+      <body className="flex min-h-screen flex-col">
+        <DisclaimerBanner />
+        <header className="flex flex-wrap items-center gap-4 bg-gradient-to-r from-primary to-teal-900 px-6 py-4 text-primary-foreground shadow-sm">
+          <div className="flex items-center gap-3">
+            <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl bg-white/15">
+              <svg width="22" height="22" viewBox="0 0 24 24" fill="none" aria-hidden="true">
+                <path d="M12 3v18M3 12h18" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" />
+              </svg>
+            </div>
+            <div>
+              <p className="m-0 text-lg font-bold leading-tight">Dược Thư RAG</p>
+              <p className="m-0 text-sm leading-tight text-primary-foreground/85">
+                Tra cứu Dược thư quốc gia Việt Nam
+              </p>
+            </div>
+          </div>
+          <NavTabs />
+        </header>
+        <main className="flex flex-1 justify-center p-6">{children}</main>
+      </body>
+    </html>
+  );
+}
@@ -0,0 +1,5 @@
+import { ChatPanel } from "./_components/ChatPanel";
+
+export default function ChatPage() {
+  return <ChatPanel className="max-w-2xl" />;
+}
@@ -0,0 +1,28 @@
+"use client";
+
+import { useState } from "react";
+import type { Citation } from "@duoc-thu/shared-types";
+import { ChatPanel } from "../_components/ChatPanel";
+
+export default function TraCuuPage() {
+  const [pdfSrc, setPdfSrc] = useState("/api/pdf");
+
+  function handleCitationClick(citation: Citation) {
+    const [page] = citation.sourcePageRange;
+    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>
+      <ChatPanel className="flex-1" onCitationClick={handleCitationClick} />
+    </div>
+  );
+}