77 lines
3.0 KiB
TypeScript
77 lines
3.0 KiB
TypeScript
"use client";
|
|
|
|
import { useState } from "react";
|
|
import { BookOpen, Bookmark, FileText, Sparkles } from "lucide-react";
|
|
import type { Citation } from "@duoc-thu/shared-types";
|
|
import { ChatPanel } from "../_components/ChatPanel";
|
|
import { cn } from "@duoc-thu/ui";
|
|
|
|
export default function TraCuuPage() {
|
|
const [activePage, setActivePage] = useState<number | null>(null);
|
|
const [activeDrug, setActiveDrug] = useState<string | null>(null);
|
|
const [pdfSrc, setPdfSrc] = useState("/api/pdf");
|
|
|
|
function handleCitationClick(citation: Citation) {
|
|
if (citation.sourcePageRange && citation.sourcePageRange[0]) {
|
|
const page = citation.sourcePageRange[0];
|
|
setActivePage(page);
|
|
setActiveDrug(citation.drugName);
|
|
setPdfSrc(`/api/pdf#page=${page}`);
|
|
}
|
|
}
|
|
|
|
return (
|
|
<div className="flex flex-1 w-full h-[calc(100vh-6.5rem)] p-4 sm:p-6 overflow-hidden bg-app gap-4">
|
|
{/* PDF Document Reader Pane */}
|
|
<div className="flex flex-[1.3] flex-col overflow-hidden rounded-2xl border border-border-subtle bg-surface shadow-sm">
|
|
{/* Viewer Header */}
|
|
<div className="flex items-center justify-between border-b border-border-subtle bg-surface-elevated px-4 py-2.5">
|
|
<div className="flex items-center gap-2">
|
|
<BookOpen className="h-4 w-4 text-accent-primary" />
|
|
<span className="text-xs font-bold text-txt-primary">
|
|
Văn bản gốc: Dược thư quốc gia Việt Nam 2018 (PDF)
|
|
</span>
|
|
</div>
|
|
|
|
{activePage ? (
|
|
<div className="flex items-center gap-1.5 rounded-lg border border-border-accent bg-accent-soft px-2.5 py-1 text-xs font-bold text-accent-primary">
|
|
<Bookmark className="h-3.5 w-3.5" />
|
|
<span>
|
|
{activeDrug ? `${activeDrug} — ` : ""}Trang {activePage}
|
|
</span>
|
|
</div>
|
|
) : (
|
|
<div className="flex items-center gap-1 text-xs text-txt-muted">
|
|
<FileText className="h-3.5 w-3.5" />
|
|
<span>1.668 trang PDF</span>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* Embedded PDF Viewer */}
|
|
<div className="relative flex-1 bg-surface-elevated">
|
|
<iframe
|
|
key={pdfSrc}
|
|
src={pdfSrc}
|
|
title="Dược thư quốc gia Việt Nam 2018"
|
|
className="h-full w-full border-none"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
{/* AI Assistant Chat Pane */}
|
|
<div className="flex flex-1 flex-col overflow-hidden">
|
|
<div className="mb-2 flex items-center gap-1.5 px-1 text-xs font-medium text-txt-muted">
|
|
<Sparkles className="h-3.5 w-3.5 text-accent-primary" />
|
|
<span>Bấm vào Trích Nguồn bên dưới để nhảy trực tiếp tới trang PDF tương ứng</span>
|
|
</div>
|
|
<ChatPanel
|
|
sessionId="tra-cuu-session"
|
|
className="flex-1 h-full"
|
|
onCitationClick={handleCitationClick}
|
|
/>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|