"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; 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, className, }: SidebarProps) { const [searchTerm, setSearchTerm] = useState(""); const [isCollapsed, setIsCollapsed] = useState(false); const [historyItems, setHistoryItems] = useState([]); // 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]); const filteredSessions = sessions.filter((s) => s.title.toLowerCase().includes(searchTerm.toLowerCase()) ); if (isCollapsed) { return ( ); } return ( ); }