Checkpoint frontend UI/UX overhaul and ingestion embed benchmark work
This commit is contained in:
@@ -0,0 +1,218 @@
|
||||
"use client";
|
||||
|
||||
import React, { useState } from "react";
|
||||
import {
|
||||
Plus,
|
||||
MessageSquare,
|
||||
Trash2,
|
||||
BookOpen,
|
||||
Pill,
|
||||
Search,
|
||||
ChevronLeft,
|
||||
ChevronRight,
|
||||
ShieldCheck,
|
||||
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;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
const QUICK_PROMPTS = [
|
||||
{ drug: "Paracetamol", label: "Liều dùng Paracetamol người lớn & trẻ em" },
|
||||
{ drug: "Amoxicillin", label: "Chống chỉ định & Thận trọng khi dùng Amoxicillin" },
|
||||
{ drug: "Metformin", label: "Liều lượng & Tương tác thuốc Metformin" },
|
||||
{ drug: "Aspirin", label: "Chỉ định & Tác dụng không mong muốn của Aspirin" },
|
||||
{ drug: "Ibuprofen", label: "Liều dùng Ibuprofen theo trọng lượng cơ thể" },
|
||||
];
|
||||
|
||||
export function Sidebar({
|
||||
currentSessionId,
|
||||
sessions,
|
||||
onSelectSession,
|
||||
onNewChat,
|
||||
onDeleteSession,
|
||||
onQuickQuery,
|
||||
className,
|
||||
}: SidebarProps) {
|
||||
const [searchTerm, setSearchTerm] = useState("");
|
||||
const [isCollapsed, setIsCollapsed] = useState(false);
|
||||
|
||||
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>
|
||||
);
|
||||
})
|
||||
)}
|
||||
|
||||
{/* 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.label)}
|
||||
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 justify-between">
|
||||
<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>
|
||||
<span className="font-semibold text-accent-primary">684 Chuyên luận</span>
|
||||
</div>
|
||||
</aside>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user