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,3 @@
+{
+  "extends": "next/core-web-vitals"
+}
@@ -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>
+  );
+}
@@ -0,0 +1,18 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "default",
+  "rsc": true,
+  "tsx": true,
+  "tailwind": {
+    "config": "tailwind.config.ts",
+    "css": "app/globals.css",
+    "baseColor": "slate",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "aliases": {
+    "components": "../../packages/ui/src/primitives",
+    "utils": "../../packages/ui/src/lib/utils",
+    "ui": "../../packages/ui/src/primitives"
+  }
+}
@@ -0,0 +1,5 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/app/building-your-application/configuring/typescript for more information.
@@ -0,0 +1,6 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  transpilePackages: ["@duoc-thu/shared-types", "@duoc-thu/ui", "@duoc-thu/api-client"],
+};
+
+module.exports = nextConfig;
@@ -1,5 +1,36 @@
 {
  "name": "@duoc-thu/web",
  "private": true,
-  "version": "0.0.0"
+  "version": "0.0.0",
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint"
+  },
+  "dependencies": {
+    "@duoc-thu/api-client": "workspace:*",
+    "@duoc-thu/shared-types": "workspace:*",
+    "@duoc-thu/ui": "workspace:*",
+    "@radix-ui/react-slot": "^1.1.0",
+    "class-variance-authority": "^0.7.0",
+    "clsx": "^2.1.1",
+    "lucide-react": "^0.400.0",
+    "next": "^14.2.0",
+    "react": "^18.3.0",
+    "react-dom": "^18.3.0",
+    "tailwind-merge": "^2.4.0"
+  },
+  "devDependencies": {
+    "@types/node": "^20.14.0",
+    "@types/react": "^18.3.0",
+    "@types/react-dom": "^18.3.0",
+    "autoprefixer": "^10.4.19",
+    "eslint": "^8.57.0",
+    "eslint-config-next": "^14.2.0",
+    "postcss": "^8.4.39",
+    "tailwindcss": "^3.4.4",
+    "tailwindcss-animate": "^1.0.7",
+    "typescript": "^5.5.0"
+  }
 }
@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};
@@ -0,0 +1,65 @@
+import type { Config } from "tailwindcss";
+
+const config: Config = {
+  darkMode: ["class"],
+  content: [
+    "./app/**/*.{ts,tsx}",
+    "../../packages/ui/src/**/*.{ts,tsx}",
+  ],
+  theme: {
+    container: {
+      center: true,
+      padding: "1.5rem",
+    },
+    extend: {
+      colors: {
+        border: "hsl(var(--border))",
+        input: "hsl(var(--input))",
+        ring: "hsl(var(--ring))",
+        background: "hsl(var(--background))",
+        foreground: "hsl(var(--foreground))",
+        primary: {
+          DEFAULT: "hsl(var(--primary))",
+          foreground: "hsl(var(--primary-foreground))",
+        },
+        secondary: {
+          DEFAULT: "hsl(var(--secondary))",
+          foreground: "hsl(var(--secondary-foreground))",
+        },
+        muted: {
+          DEFAULT: "hsl(var(--muted))",
+          foreground: "hsl(var(--muted-foreground))",
+        },
+        accent: {
+          DEFAULT: "hsl(var(--accent))",
+          foreground: "hsl(var(--accent-foreground))",
+        },
+        card: {
+          DEFAULT: "hsl(var(--card))",
+          foreground: "hsl(var(--card-foreground))",
+        },
+        warning: {
+          DEFAULT: "hsl(var(--warning))",
+          foreground: "hsl(var(--warning-foreground))",
+        },
+      },
+      borderRadius: {
+        lg: "var(--radius)",
+        md: "calc(var(--radius) - 2px)",
+        sm: "calc(var(--radius) - 4px)",
+      },
+      keyframes: {
+        "bounce-dot": {
+          "0%, 60%, 100%": { transform: "translateY(0)", opacity: "0.5" },
+          "30%": { transform: "translateY(-0.25rem)", opacity: "1" },
+        },
+      },
+      animation: {
+        "bounce-dot": "bounce-dot 1.2s infinite ease-in-out",
+      },
+    },
+  },
+  plugins: [require("tailwindcss-animate")],
+};
+
+export default config;
@@ -0,0 +1,20 @@
+{
+  "compilerOptions": {
+    "target": "ES2017",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true,
+    "plugins": [{ "name": "next" }]
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "exclude": ["node_modules"]
+}