Scaffold web frontend: mock-backed chat + PDF split-view, Tailwind/shadcn
This commit is contained in:
@@ -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ụ: “Liều dùng paracetamol cho người lớn?” hoặc “Chống chỉ
|
||||
định của amoxicillin là gì?”
|
||||
</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"
|
||||
}
|
||||
}
|
||||
Vendored
+5
@@ -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;
|
||||
+32
-1
@@ -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"]
|
||||
}
|
||||
Reference in New Issue
Block a user