"use client"; import { useState } from "react"; import { ChevronDown, ChevronRight, Book, Search } from "lucide-react"; import { Input } from "@/components/ui/input"; import { ScrollArea } from "@/components/ui/scroll-area"; import { cn } from "@/lib/utils"; import { API_DOCS, type ApiItem } from "@/data/api-docs"; interface ApiDocsSidebarProps { selectedItem: ApiItem | null; onSelectItem: (item: ApiItem | null) => void; } export function ApiDocsSidebar({ selectedItem, onSelectItem }: ApiDocsSidebarProps) { const [expandedSections, setExpandedSections] = useState>(new Set(["Builder", "PromptBuilder Methods"])); const [searchQuery, setSearchQuery] = useState(""); const toggleSection = (name: string) => { setExpandedSections(prev => { const next = new Set(prev); if (next.has(name)) { next.delete(name); } else { next.add(name); } return next; }); }; const getTypeColor = (type: ApiItem["type"]) => { switch (type) { case "function": return "text-blue-500 dark:text-blue-400"; case "class": return "text-yellow-500 dark:text-yellow-400"; case "interface": return "text-green-500 dark:text-green-400"; case "type": return "text-purple-500 dark:text-purple-400"; case "const": return "text-orange-500 dark:text-orange-400"; default: return "text-muted-foreground"; } }; const getTypeLabel = (type: ApiItem["type"]) => { switch (type) { case "function": return "fn"; case "class": return "class"; case "interface": return "interface"; case "type": return "type"; case "const": return "const"; default: return type; } }; // Filter sections and items based on search query const filteredDocs = searchQuery.trim() ? API_DOCS.map(section => ({ ...section, items: section.items.filter(item => item.name.toLowerCase().includes(searchQuery.toLowerCase()) || item.description?.toLowerCase().includes(searchQuery.toLowerCase()) || item.signature?.toLowerCase().includes(searchQuery.toLowerCase()) ) })).filter(section => section.items.length > 0) : API_DOCS; // When searching, expand all sections with matches const effectiveExpandedSections = searchQuery.trim() ? new Set(filteredDocs.map(s => s.name)) : expandedSections; return (

API Docs

setSearchQuery(e.target.value)} className="h-7 pl-7 text-sm" />

{filteredDocs.length === 0 ? (

No results found

) : ( filteredDocs.map((section) => (

{effectiveExpandedSections.has(section.name) && (

{section.items.map((item) => ( ))}

)}

)) )}

); }