Slash Command Dropdown

1"use client";
2 
3import type React from "react";
4import { useEffect, useMemo, useRef } from "react";
5import {
6	Cancel01Icon,
7	HugeiconsIcon,
8	Tag01Icon,
9	ToolsIcon,
10} from "@/components/icons";
11 
12import { cn } from "@/lib/utils";
13import { formatToolName, getToolCategoryIcon } from "@/lib/utils/tool-icons";
14 
15export interface Tool {
16	/** Unique tool identifier */
17	name: string;
18	/** Category for grouping tools */
19	category: string;
20	/** Description shown below tool name */
21	description?: string;
22	/** Custom icon (defaults to category icon) */
23	icon?: React.ReactNode;
24}
25 
26export interface SlashCommandMatch {
27	tool: Tool;
28	score: number;
29}
30 
31interface SlashCommandDropdownProps {
32	/** List of tools to display */
33	matches: SlashCommandMatch[];
34	/** Currently selected tool index */
35	selectedIndex: number;
36	/** Callback when a tool is selected */
37	onSelect: (tool: SlashCommandMatch) => void;
38	/** Callback when dropdown is closed */
39	onClose: () => void;
40	/** Position config for the dropdown */
41	position: { top?: number; bottom?: number; left: number; width?: number };
42	/** Whether the dropdown is visible */
43	isVisible: boolean;
44	/** If opened via button (shows header) */
45	openedViaButton?: boolean;
46	/** Currently selected category filter */
47	selectedCategory?: string;
48	/** Available categories */
49	categories?: string[];
50	/** Callback when category changes */
51	onCategoryChange?: (category: string) => void;
52	/** Additional CSS classes */
53	className?: string;
54	/** Additional inline styles */
55	style?: React.CSSProperties;
56}
57 
58// Default icon size for consistency
59const ICON_SIZE = 20;
60const CATEGORY_ICON_SIZE = 16;
61 
62/**
63 * Get a default icon for a tool based on its category
64 * Always returns an icon - no tool should be without one
65 */
66const getDefaultToolIcon = (
67	tool: Tool,
68	size: number = ICON_SIZE,
69): React.ReactNode => {
70	// If tool has custom icon, use it
71	if (tool.icon) return tool.icon;
72 
73	// Try to get category icon
74	const categoryIcon = getToolCategoryIcon(tool.category, {
75		showBackground: false,
76		width: size,
77		height: size,
78	});
79 
80	// If category icon exists, use it
81	if (categoryIcon) return categoryIcon;
82 
83	return (
84		<HugeiconsIcon icon={ToolsIcon} size={size} className="text-zinc-400" />
85	);
86};
87 
88/**
89 * Get icon for a category tab
90 */
91const getCategoryTabIcon = (category: string): React.ReactNode => {
92	if (category === "all") {
93		return (
94			<HugeiconsIcon
95				icon={Tag01Icon}
96				size={CATEGORY_ICON_SIZE}
97				className="text-current"
98			/>
99		);
100	}
101 
102// … truncated