373 lines
15 KiB
TypeScript
373 lines
15 KiB
TypeScript
"use client";
|
|
|
|
import { useEffect, useRef, useState } from "react";
|
|
import type { ChatMessage, Citation, MonographPickerState } from "@duoc-thu/shared-types";
|
|
import { ChatPanel } from "./_components/ChatPanel";
|
|
import { Sidebar, ChatSession } from "./_components/Sidebar";
|
|
import { EvidencePanel } from "./_components/EvidencePanel";
|
|
import { MessageSquare, FileSearch, Menu, X, Layers } from "lucide-react";
|
|
import { cn } from "@duoc-thu/ui";
|
|
|
|
function createSessionId() {
|
|
return `session-${crypto.randomUUID()}`;
|
|
}
|
|
|
|
// The session id is the key both `/api/history` (quick-rerun list) and
|
|
// `/api/transcript` (full replay) scope their reads by, so persisting it is
|
|
// a prerequisite for either surviving a refresh at all. The session LIST
|
|
// itself still lives only in this browser's localStorage — there is no
|
|
// auth yet to scope a server-side list by, so a different browser/device
|
|
// (or cleared storage) loses the sidebar entries even though the
|
|
// transcripts themselves are still in Postgres, keyed by the same id.
|
|
const SESSIONS_STORAGE_KEY = "dt_sessions";
|
|
const CURRENT_SESSION_STORAGE_KEY = "dt_current_session_id";
|
|
|
|
function loadStoredSessions(): ChatSession[] | null {
|
|
try {
|
|
const raw = localStorage.getItem(SESSIONS_STORAGE_KEY);
|
|
if (!raw) return null;
|
|
const parsed = JSON.parse(raw);
|
|
return Array.isArray(parsed) && parsed.length > 0 ? parsed : null;
|
|
} catch {
|
|
return null;
|
|
}
|
|
}
|
|
|
|
const DEFAULT_SESSION_TITLE = "Phiên tra cứu mới";
|
|
|
|
// Real usage testing 2026-08-20: a session's sidebar entry stayed
|
|
// "Phiên tra cứu mới" forever (every session, indistinguishable) and
|
|
// picking one loaded an empty chat with no way to continue it — the spec's
|
|
// "history is a re-run shortcut, not a replay" call turned out to read as
|
|
// broken, not minimal. `/api/transcript` now persists and replays the full
|
|
// turn (both question and answer), so a session title can be derived from
|
|
// its own first question instead of staying a placeholder forever.
|
|
function deriveTitle(text: string): string {
|
|
const trimmed = text.trim().replace(/\s+/g, " ");
|
|
return trimmed.length > 48 ? `${trimmed.slice(0, 48)}…` : trimmed;
|
|
}
|
|
|
|
export default function ChatPage() {
|
|
const [sessions, setSessions] = useState<ChatSession[]>([]);
|
|
const [currentSessionId, setCurrentSessionId] = useState<string>("");
|
|
const [messagesBySession, setMessagesBySession] = useState<Record<string, ChatMessage[]>>({});
|
|
const [queryOverride, setQueryOverride] = useState<{ text: string; token: number } | null>(null);
|
|
const [monographPicker, setMonographPicker] = useState<MonographPickerState | null>(null);
|
|
|
|
// Guards `hydrateSession` to one fetch per session per page load: without
|
|
// it, switching back and forth between two sessions would re-fetch (and
|
|
// briefly flash) every time, and a session with messages just sent this
|
|
// visit could get clobbered by a fetch racing behind it.
|
|
const hydratedSessionIdsRef = useRef<Set<string>>(new Set());
|
|
|
|
const hydrateSession = (id: string) => {
|
|
if (hydratedSessionIdsRef.current.has(id)) return;
|
|
hydratedSessionIdsRef.current.add(id);
|
|
fetch(`/api/transcript?conversation_id=${encodeURIComponent(id)}`)
|
|
.then((res) => (res.ok ? res.json() : { messages: [] }))
|
|
.then((data: { messages?: ChatMessage[] }) => {
|
|
const messages = Array.isArray(data.messages) ? data.messages : [];
|
|
if (messages.length === 0) return;
|
|
setMessagesBySession((prev) => ({ ...prev, [id]: messages }));
|
|
const firstUser = messages.find((m) => m.role === "user");
|
|
if (firstUser) {
|
|
setSessions((prev) =>
|
|
prev.map((s) =>
|
|
s.id === id && s.title === DEFAULT_SESSION_TITLE
|
|
? { ...s, title: deriveTitle(firstUser.content) }
|
|
: s
|
|
)
|
|
);
|
|
}
|
|
})
|
|
.catch(() => {
|
|
// Best-effort — the session just starts blank, same as before this
|
|
// feature existed, rather than blocking on a slow/down ai-service.
|
|
});
|
|
};
|
|
|
|
useEffect(() => {
|
|
const stored = loadStoredSessions();
|
|
if (stored) {
|
|
const storedCurrent = (() => {
|
|
try {
|
|
return localStorage.getItem(CURRENT_SESSION_STORAGE_KEY);
|
|
} catch {
|
|
return null;
|
|
}
|
|
})();
|
|
setSessions(stored);
|
|
setMessagesBySession(Object.fromEntries(stored.map((s) => [s.id, []])));
|
|
const resolvedId = stored.find((s) => s.id === storedCurrent)?.id ?? stored[0].id;
|
|
setCurrentSessionId(resolvedId);
|
|
hydrateSession(resolvedId);
|
|
return;
|
|
}
|
|
const id = createSessionId();
|
|
setSessions([{ id, title: DEFAULT_SESSION_TITLE, updatedAt: new Date().toISOString() }]);
|
|
setMessagesBySession({ [id]: [] });
|
|
setCurrentSessionId(id);
|
|
hydratedSessionIdsRef.current.add(id);
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
}, []);
|
|
|
|
// Persist whenever the session list / active session changes — covers
|
|
// new/deleted sessions and switching between them. Guarded on non-empty
|
|
// so the pre-mount-effect empty state never overwrites a real stored
|
|
// list with `[]`.
|
|
useEffect(() => {
|
|
if (sessions.length === 0) return;
|
|
try {
|
|
localStorage.setItem(SESSIONS_STORAGE_KEY, JSON.stringify(sessions));
|
|
} catch {
|
|
// Storage full or unavailable (e.g. private browsing) — the session
|
|
// list simply won't survive a refresh this time.
|
|
}
|
|
}, [sessions]);
|
|
|
|
useEffect(() => {
|
|
if (!currentSessionId) return;
|
|
try {
|
|
localStorage.setItem(CURRENT_SESSION_STORAGE_KEY, currentSessionId);
|
|
} catch {
|
|
// ignore — same fallback as above
|
|
}
|
|
}, [currentSessionId]);
|
|
|
|
// Citation & Evidence Panel State
|
|
const [citations, setCitations] = useState<Citation[]>([]);
|
|
const [activeCitationIndex, setActiveCitationIndex] = useState<number | null>(null);
|
|
|
|
// Responsive Drawer Toggles for Mobile/Tablet
|
|
const [showMobileSidebar, setShowMobileSidebar] = useState(false);
|
|
const [showMobileEvidence, setShowMobileEvidence] = useState(false);
|
|
const [showEvidenceDesktop, setShowEvidenceDesktop] = useState(true);
|
|
|
|
const handleNewChat = () => {
|
|
const newId = createSessionId();
|
|
const newSession: ChatSession = {
|
|
id: newId,
|
|
title: DEFAULT_SESSION_TITLE,
|
|
updatedAt: new Date().toISOString(),
|
|
};
|
|
setSessions((prev) => [newSession, ...prev]);
|
|
setMessagesBySession((prev) => ({ ...prev, [newId]: [] }));
|
|
setCurrentSessionId(newId);
|
|
// Nothing on the server yet for a brand-new session — skip the wasted
|
|
// round trip `hydrateSession` would otherwise make on first select.
|
|
hydratedSessionIdsRef.current.add(newId);
|
|
setQueryOverride(null);
|
|
setCitations([]);
|
|
setActiveCitationIndex(null);
|
|
setMonographPicker(null);
|
|
setShowMobileSidebar(false);
|
|
};
|
|
|
|
const handleSelectSession = (id: string) => {
|
|
setCurrentSessionId(id);
|
|
hydrateSession(id);
|
|
setQueryOverride(null);
|
|
setCitations([]);
|
|
setActiveCitationIndex(null);
|
|
setMonographPicker(null);
|
|
setShowMobileSidebar(false);
|
|
};
|
|
|
|
const handleDeleteSession = (id: string) => {
|
|
setSessions((prev) => prev.filter((s) => s.id !== id));
|
|
setMessagesBySession((prev) => {
|
|
const next = { ...prev };
|
|
delete next[id];
|
|
return next;
|
|
});
|
|
if (currentSessionId === id) {
|
|
const remaining = sessions.filter((s) => s.id !== id);
|
|
if (remaining.length > 0) {
|
|
setCurrentSessionId(remaining[0].id);
|
|
hydrateSession(remaining[0].id);
|
|
} else {
|
|
handleNewChat();
|
|
}
|
|
}
|
|
};
|
|
|
|
const handleQuickQuery = (query: string) => {
|
|
setQueryOverride({ text: query, token: Date.now() });
|
|
setShowMobileSidebar(false);
|
|
};
|
|
|
|
const currentMessages = messagesBySession[currentSessionId] ?? [];
|
|
const setCurrentMessages: React.Dispatch<React.SetStateAction<ChatMessage[]>> = (update) => {
|
|
const sessionId = currentSessionId;
|
|
setMessagesBySession((prev) => {
|
|
const existing = prev[sessionId] ?? [];
|
|
const next = typeof update === "function" ? update(existing) : update;
|
|
// Title the session off its own first question immediately, rather
|
|
// than leaving every session as the identical, indistinguishable
|
|
// placeholder until a later reload re-fetches the transcript.
|
|
if (existing.length === 0 && next.length > 0 && next[0].role === "user") {
|
|
const title = deriveTitle(next[0].content);
|
|
setSessions((prevSessions) =>
|
|
prevSessions.map((s) => (s.id === sessionId ? { ...s, title } : s))
|
|
);
|
|
}
|
|
return { ...prev, [sessionId]: next };
|
|
});
|
|
};
|
|
|
|
if (!currentSessionId) {
|
|
return <div className="flex flex-1 items-center justify-center text-sm text-txt-muted">Đang tạo phiên tra cứu an toàn...</div>;
|
|
}
|
|
|
|
const handleCitationClick = (citation: Citation, index: number, allCitations: Citation[]) => {
|
|
// Found live 2026-08-07: this used to only set the index into whatever
|
|
// `citations` array was last loaded (i.e. the MOST RECENT answer's), so
|
|
// clicking [1] on an older message showed a LATER message's unrelated
|
|
// drug in the evidence panel (reported live: clicking Omeprazol's own
|
|
// citation showed Kanamycin). The clicked message's own citation list
|
|
// must replace the panel's state, not just the index into a stale one.
|
|
setCitations(allCitations);
|
|
setActiveCitationIndex(index);
|
|
setMonographPicker(null);
|
|
setShowMobileEvidence(true);
|
|
};
|
|
|
|
const handleCitationsLoaded = (newCitations: Citation[]) => {
|
|
setCitations(newCitations);
|
|
// Deliberately NOT auto-activating citation 1 here (removed
|
|
// 2026-08-07): this used to fire the beam connector line + card
|
|
// highlight on every single answer, unprompted, and — since
|
|
// `CitationBeamOverlay` only recomputes its coordinates on window
|
|
// resize/scroll, not on the content reflow a just-arrived answer
|
|
// itself causes — the line frequently ended up pointing at stale
|
|
// positions, i.e. exactly the "dây trích dẫn dính lung tung" (messy
|
|
// citation wire) reported live. The beam/highlight now only appears
|
|
// when the user actually clicks a citation, at which point the
|
|
// coordinates are computed fresh.
|
|
};
|
|
|
|
const handleToggleSection = (sectionKey: string) => {
|
|
setMonographPicker((current) => {
|
|
if (!current) return current;
|
|
const selected = current.selectedSectionKeys.includes(sectionKey)
|
|
? current.selectedSectionKeys.filter((key) => key !== sectionKey)
|
|
: [...current.selectedSectionKeys, sectionKey];
|
|
return { ...current, selectedSectionKeys: selected };
|
|
});
|
|
};
|
|
|
|
return (
|
|
<div className="flex flex-1 w-full h-[calc(100vh-6.5rem)] overflow-hidden bg-app relative">
|
|
{/* Mobile Header Bar Controls */}
|
|
<div className="lg:hidden absolute top-2 left-3 right-3 z-30 flex items-center justify-between pointer-events-none">
|
|
<button
|
|
onClick={() => setShowMobileSidebar(true)}
|
|
aria-label="Mở danh mục phiên"
|
|
className="pointer-events-auto flex items-center gap-1.5 px-3 py-1.5 rounded-full border border-border-subtle bg-surface/90 text-txt-primary text-xs font-semibold shadow-elevated backdrop-blur-md"
|
|
>
|
|
<Menu className="w-4 h-4 text-accent-primary" />
|
|
<span>Lịch sử</span>
|
|
</button>
|
|
|
|
<button
|
|
onClick={() => setShowMobileEvidence(!showMobileEvidence)}
|
|
aria-label="Mở thanh bằng chứng"
|
|
className="pointer-events-auto flex items-center gap-1.5 px-3 py-1.5 rounded-full border border-border-subtle bg-surface/90 text-txt-primary text-xs font-semibold shadow-elevated backdrop-blur-md"
|
|
>
|
|
<FileSearch className="w-4 h-4 text-accent-primary" />
|
|
<span>Bằng chứng ({citations.length})</span>
|
|
</button>
|
|
</div>
|
|
|
|
{/* Desktop Region 1: Navigation / Session Sidebar */}
|
|
<Sidebar
|
|
currentSessionId={currentSessionId}
|
|
sessions={sessions}
|
|
onSelectSession={handleSelectSession}
|
|
onNewChat={handleNewChat}
|
|
onDeleteSession={handleDeleteSession}
|
|
onQuickQuery={handleQuickQuery}
|
|
historyRefreshKey={currentMessages.length}
|
|
className="hidden lg:flex"
|
|
/>
|
|
|
|
{/* Mobile Drawer Region 1 */}
|
|
{showMobileSidebar && (
|
|
<div className="fixed inset-0 z-50 flex lg:hidden">
|
|
<div
|
|
className="fixed inset-0 bg-bg-overlay backdrop-blur-sm"
|
|
onClick={() => setShowMobileSidebar(false)}
|
|
/>
|
|
<div className="relative flex flex-col w-4/5 max-w-sm h-full bg-surface z-10 shadow-elevated animate-slide-up">
|
|
<Sidebar
|
|
currentSessionId={currentSessionId}
|
|
sessions={sessions}
|
|
onSelectSession={handleSelectSession}
|
|
onNewChat={handleNewChat}
|
|
onDeleteSession={handleDeleteSession}
|
|
onQuickQuery={handleQuickQuery}
|
|
historyRefreshKey={currentMessages.length}
|
|
className="w-full h-full border-r-0"
|
|
/>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Desktop Region 2: Primary Answer Workspace */}
|
|
<main className="flex-1 flex justify-center overflow-hidden relative">
|
|
<ChatPanel
|
|
key={currentSessionId}
|
|
sessionId={currentSessionId}
|
|
messages={currentMessages}
|
|
onMessagesChange={setCurrentMessages}
|
|
initialQuery={queryOverride?.text}
|
|
initialQueryToken={queryOverride?.token}
|
|
onCitationClick={handleCitationClick}
|
|
onCitationsLoaded={handleCitationsLoaded}
|
|
activeCitationIndex={activeCitationIndex}
|
|
monographPicker={monographPicker}
|
|
onMonographChange={setMonographPicker}
|
|
onToggleSection={handleToggleSection}
|
|
className="w-full max-w-4xl h-full"
|
|
/>
|
|
</main>
|
|
|
|
{/* Desktop Region 3: Right Evidence & Source Inspector Panel */}
|
|
{showEvidenceDesktop && (
|
|
<EvidencePanel
|
|
citations={citations}
|
|
activeCitationIndex={activeCitationIndex}
|
|
onSelectCitation={(citation, index) => setActiveCitationIndex(index)}
|
|
monographPicker={monographPicker}
|
|
onToggleSection={handleToggleSection}
|
|
onClose={() => setShowEvidenceDesktop(false)}
|
|
className="hidden lg:flex"
|
|
/>
|
|
)}
|
|
|
|
{/* Mobile Sheet Region 3: Evidence Bottom Sheet / Drawer */}
|
|
{showMobileEvidence && (
|
|
<div className="fixed inset-0 z-50 flex flex-col justify-end lg:hidden">
|
|
<div
|
|
className="fixed inset-0 bg-bg-overlay backdrop-blur-sm"
|
|
onClick={() => setShowMobileEvidence(false)}
|
|
/>
|
|
<div className="relative flex flex-col w-full h-4/5 bg-surface rounded-t-3xl z-10 shadow-elevated overflow-hidden animate-slide-up">
|
|
<EvidencePanel
|
|
citations={citations}
|
|
activeCitationIndex={activeCitationIndex}
|
|
onSelectCitation={(citation, index) => {
|
|
setActiveCitationIndex(index);
|
|
}}
|
|
monographPicker={monographPicker}
|
|
onToggleSection={handleToggleSection}
|
|
onClose={() => setShowMobileEvidence(false)}
|
|
className="w-full h-full border-l-0"
|
|
/>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|