300 lines
11 KiB
TypeScript
300 lines
11 KiB
TypeScript
"use client";
|
|
|
|
import React, { useEffect, useState } from "react";
|
|
import {
|
|
Plus,
|
|
MessageSquare,
|
|
Trash2,
|
|
BookOpen,
|
|
Pill,
|
|
Search,
|
|
ChevronLeft,
|
|
ChevronRight,
|
|
ShieldCheck,
|
|
History,
|
|
Zap,
|
|
} from "lucide-react";
|
|
import { cn } from "@duoc-thu/ui";
|
|
|
|
export interface ChatSession {
|
|
id: string;
|
|
title: string;
|
|
updatedAt: string;
|
|
}
|
|
|
|
interface SidebarProps {
|
|
currentSessionId: string;
|
|
sessions: ChatSession[];
|
|
onSelectSession: (id: string) => void;
|
|
onNewChat: () => void;
|
|
onDeleteSession?: (id: string) => void;
|
|
onQuickQuery: (query: string) => void;
|
|
historyRefreshKey?: number;
|
|
className?: string;
|
|
}
|
|
|
|
const QUICK_PROMPTS = [
|
|
{
|
|
drug: "Levetiracetam",
|
|
label: "Chỉ định của Levetiracetam",
|
|
query: "Levetiracetam được chỉ định trong những trường hợp nào?",
|
|
},
|
|
{
|
|
drug: "Metformin",
|
|
label: "Chống chỉ định của Metformin",
|
|
query: "Chống chỉ định của Metformin là gì?",
|
|
},
|
|
{
|
|
drug: "Zolpidem",
|
|
label: "ADR Zolpidem theo tần suất",
|
|
query: "Tác dụng không mong muốn của Zolpidem là gì?",
|
|
},
|
|
{
|
|
drug: "Fluoxetin",
|
|
label: "Fluoxetin trong thời kỳ mang thai",
|
|
query: "Có thể dùng Fluoxetin trong thời kỳ mang thai không?",
|
|
},
|
|
{
|
|
drug: "Danazol",
|
|
label: "Tương tác thuốc của Danazol",
|
|
query: "Danazol có những tương tác thuốc nào?",
|
|
},
|
|
];
|
|
|
|
interface HistoryItem {
|
|
trace_id: string;
|
|
query: string;
|
|
decision: string;
|
|
}
|
|
|
|
export function Sidebar({
|
|
currentSessionId,
|
|
sessions,
|
|
onSelectSession,
|
|
onNewChat,
|
|
onDeleteSession,
|
|
onQuickQuery,
|
|
historyRefreshKey = 0,
|
|
className,
|
|
}: SidebarProps) {
|
|
const [searchTerm, setSearchTerm] = useState("");
|
|
const [isCollapsed, setIsCollapsed] = useState(false);
|
|
const [historyItems, setHistoryItems] = useState<HistoryItem[]>([]);
|
|
|
|
// Feature-List #25: past queries FOR THIS SESSION, most recent first —
|
|
// click one to re-run it (via `onQuickQuery`, same path the hardcoded
|
|
// quick-prompts below already use). Deliberately re-fetched whenever the
|
|
// active session changes, not lifted to page.tsx: `Composer.tsx`'s own
|
|
// autocomplete fetch already establishes the pattern of a component
|
|
// owning its own small read, rather than everything prop-drilled down.
|
|
useEffect(() => {
|
|
if (!currentSessionId) {
|
|
setHistoryItems([]);
|
|
return;
|
|
}
|
|
let cancelled = false;
|
|
fetch(`/api/history?conversation_id=${encodeURIComponent(currentSessionId)}`)
|
|
.then((res) => (res.ok ? res.json() : { items: [] }))
|
|
.then((data) => {
|
|
if (!cancelled) setHistoryItems(Array.isArray(data?.items) ? data.items : []);
|
|
})
|
|
.catch(() => {
|
|
if (!cancelled) setHistoryItems([]);
|
|
});
|
|
return () => {
|
|
cancelled = true;
|
|
};
|
|
}, [currentSessionId, historyRefreshKey]);
|
|
|
|
const filteredSessions = sessions.filter((s) =>
|
|
s.title.toLowerCase().includes(searchTerm.toLowerCase())
|
|
);
|
|
|
|
if (isCollapsed) {
|
|
return (
|
|
<aside className="flex flex-col items-center py-4 px-2 border-r border-border-subtle bg-surface w-14 shrink-0 transition-all z-20">
|
|
<button
|
|
onClick={() => setIsCollapsed(false)}
|
|
title="Mở rộng danh mục"
|
|
className="p-2 rounded-xl text-txt-muted hover:bg-surface-hover hover:text-txt-primary transition-colors mb-4"
|
|
>
|
|
<ChevronRight className="w-5 h-5" />
|
|
</button>
|
|
|
|
<button
|
|
onClick={onNewChat}
|
|
title="Cuộc trò chuyện mới"
|
|
className="flex h-10 w-10 items-center justify-center rounded-xl bg-accent-primary text-txt-inverse shadow-sm hover:bg-accent-hover transition-all mb-4"
|
|
>
|
|
<Plus className="w-5 h-5" />
|
|
</button>
|
|
|
|
<div className="flex-1 flex flex-col gap-2 w-full items-center overflow-y-auto">
|
|
{sessions.map((s) => (
|
|
<button
|
|
key={s.id}
|
|
onClick={() => onSelectSession(s.id)}
|
|
title={s.title}
|
|
className={cn(
|
|
"h-9 w-9 flex items-center justify-center rounded-xl transition-colors text-xs font-bold",
|
|
currentSessionId === s.id
|
|
? "bg-accent-soft text-accent-primary border border-border-accent"
|
|
: "text-txt-muted hover:bg-surface-hover hover:text-txt-primary"
|
|
)}
|
|
>
|
|
<MessageSquare className="w-4 h-4" />
|
|
</button>
|
|
))}
|
|
</div>
|
|
</aside>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<aside
|
|
className={cn(
|
|
"flex flex-col border-r border-border-subtle bg-surface w-72 shrink-0 transition-all z-20 h-full overflow-hidden",
|
|
className
|
|
)}
|
|
>
|
|
{/* Sidebar Header */}
|
|
<div className="p-3.5 border-b border-border-subtle flex items-center justify-between gap-2">
|
|
<button
|
|
onClick={onNewChat}
|
|
className="flex-1 flex items-center justify-center gap-2 px-3 py-2.5 rounded-xl bg-accent-primary text-txt-inverse font-semibold text-xs shadow-sm hover:bg-accent-hover transition-all"
|
|
>
|
|
<Plus className="w-4 h-4" />
|
|
<span>Tạo phiên tra cứu mới</span>
|
|
</button>
|
|
|
|
<button
|
|
onClick={() => setIsCollapsed(true)}
|
|
title="Thu gọn"
|
|
className="p-2 rounded-xl text-txt-muted hover:bg-surface-hover hover:text-txt-primary transition-colors"
|
|
>
|
|
<ChevronLeft className="w-4 h-4" />
|
|
</button>
|
|
</div>
|
|
|
|
{/* Search sessions */}
|
|
<div className="px-3.5 py-2.5 border-b border-border-subtle">
|
|
<div className="relative flex items-center">
|
|
<Search className="w-3.5 h-3.5 absolute left-3 text-txt-muted pointer-events-none" />
|
|
<input
|
|
type="text"
|
|
value={searchTerm}
|
|
onChange={(e) => setSearchTerm(e.target.value)}
|
|
placeholder="Tìm lịch sử tra cứu..."
|
|
className="w-full pl-8 pr-3 py-1.5 rounded-xl border border-border-subtle bg-surface-elevated text-txt-primary placeholder:text-txt-muted text-xs focus:outline-none focus:border-border-accent transition-colors"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Sessions List */}
|
|
<div className="flex-1 overflow-y-auto px-2 py-3 space-y-1">
|
|
<div className="px-2 pb-1.5 text-[0.68rem] font-bold tracking-wider text-txt-muted uppercase flex items-center justify-between">
|
|
<span>Phiên tra cứu gần đây</span>
|
|
<span className="font-semibold text-accent-primary">{filteredSessions.length}</span>
|
|
</div>
|
|
|
|
{filteredSessions.length === 0 ? (
|
|
<div className="px-3 py-6 text-center text-xs text-txt-muted italic">
|
|
Chưa có lịch sử tra cứu nào
|
|
</div>
|
|
) : (
|
|
filteredSessions.map((session) => {
|
|
const isActive = session.id === currentSessionId;
|
|
return (
|
|
<div
|
|
key={session.id}
|
|
onClick={() => onSelectSession(session.id)}
|
|
className={cn(
|
|
"group relative flex items-center justify-between gap-2 p-2.5 rounded-xl text-xs transition-all cursor-pointer select-none",
|
|
isActive
|
|
? "bg-accent-soft/40 text-accent-primary font-semibold border border-border-accent/40"
|
|
: "text-txt-secondary hover:bg-surface-hover hover:text-txt-primary"
|
|
)}
|
|
>
|
|
<div className="flex items-center gap-2 min-w-0">
|
|
<MessageSquare
|
|
className={cn("w-3.5 h-3.5 shrink-0", isActive ? "text-accent-primary" : "text-txt-muted")}
|
|
/>
|
|
<span className="truncate">{session.title}</span>
|
|
</div>
|
|
|
|
{onDeleteSession && (
|
|
<button
|
|
onClick={(e) => {
|
|
e.stopPropagation();
|
|
onDeleteSession(session.id);
|
|
}}
|
|
title="Xóa phiên này"
|
|
className="opacity-0 group-hover:opacity-100 p-1 text-txt-muted hover:text-status-danger transition-opacity"
|
|
>
|
|
<Trash2 className="w-3.5 h-3.5" />
|
|
</button>
|
|
)}
|
|
</div>
|
|
);
|
|
})
|
|
)}
|
|
|
|
{/* Query History — real past questions for this session (Feature-
|
|
List #25), click to re-run the same question. Empty when the
|
|
session has no persisted queries yet (a brand-new session, or
|
|
history backend unavailable) — the quick-prompt templates below
|
|
still work as a starting point either way. */}
|
|
{historyItems.length > 0 && (
|
|
<div className="pt-4 px-2 border-t border-border-subtle mt-4">
|
|
<div className="pb-2 text-[0.68rem] font-bold tracking-wider text-txt-muted uppercase flex items-center gap-1">
|
|
<History className="w-3 h-3 text-accent-primary" />
|
|
<span>Lịch sử câu hỏi</span>
|
|
</div>
|
|
<div className="space-y-1.5">
|
|
{historyItems.map((item) => (
|
|
<button
|
|
key={item.trace_id}
|
|
onClick={() => onQuickQuery(item.query)}
|
|
title={item.query}
|
|
className="w-full text-left p-2 rounded-xl bg-surface-elevated hover:bg-surface-hover border border-border-subtle text-txt-secondary hover:text-txt-primary text-[0.72rem] leading-snug transition-all flex items-center justify-between group"
|
|
>
|
|
<span className="truncate pr-1">{item.query}</span>
|
|
<History className="w-3 h-3 text-accent-primary shrink-0 opacity-70 group-hover:opacity-100" />
|
|
</button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Quick Prompts Section */}
|
|
<div className="pt-4 px-2 border-t border-border-subtle mt-4">
|
|
<div className="pb-2 text-[0.68rem] font-bold tracking-wider text-txt-muted uppercase flex items-center gap-1">
|
|
<Zap className="w-3 h-3 text-status-warning" />
|
|
<span>Mẫu tra cứu nhanh</span>
|
|
</div>
|
|
<div className="space-y-1.5">
|
|
{QUICK_PROMPTS.map((prompt, idx) => (
|
|
<button
|
|
key={idx}
|
|
onClick={() => onQuickQuery(prompt.query)}
|
|
className="w-full text-left p-2 rounded-xl bg-surface-elevated hover:bg-surface-hover border border-border-subtle text-txt-secondary hover:text-txt-primary text-[0.72rem] leading-snug transition-all flex items-center justify-between group"
|
|
>
|
|
<span className="truncate pr-1">{prompt.label}</span>
|
|
<Pill className="w-3 h-3 text-accent-primary shrink-0 opacity-70 group-hover:opacity-100" />
|
|
</button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* System Stats Footer */}
|
|
<div className="p-3 border-t border-border-subtle bg-surface-elevated/40 text-[0.68rem] text-txt-muted flex items-center">
|
|
<div className="flex items-center gap-1.5">
|
|
<BookOpen className="w-3.5 h-3.5 text-accent-primary" />
|
|
<span>Dược thư QGVN 2018</span>
|
|
</div>
|
|
</div>
|
|
</aside>
|
|
);
|
|
}
|