52:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 53:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 54:T25a3,"use client"; import type React from "react"; import { useEffect, useMemo, useRef } from "react"; import { Cancel01Icon, HugeiconsIcon, Tag01Icon, ToolsIcon, } from "@/components/icons"; import { cn } from "@/lib/utils"; import { formatToolName, getToolCategoryIcon } from "@/lib/utils/tool-icons"; export interface Tool { /** Unique tool identifier */ name: string; /** Category for grouping tools */ category: string; /** Description shown below tool name */ description?: string; /** Custom icon (defaults to category icon) */ icon?: React.ReactNode; } export interface SlashCommandMatch { tool: Tool; score: number; } interface SlashCommandDropdownProps { /** List of tools to display */ matches: SlashCommandMatch[]; /** Currently selected tool index */ selectedIndex: number; /** Callback when a tool is selected */ onSelect: (tool: SlashCommandMatch) => void; /** Callback when dropdown is closed */ onClose: () => void; /** Position config for the dropdown */ position: { top?: number; bottom?: number; left: number; width?: number }; /** Whether the dropdown is visible */ isVisible: boolean; /** If opened via button (shows header) */ openedViaButton?: boolean; /** Currently selected category filter */ selectedCategory?: string; /** Available categories */ categories?: string[]; /** Callback when category changes */ onCategoryChange?: (category: string) => void; /** Additional CSS classes */ className?: string; /** Additional inline styles */ style?: React.CSSProperties; } // Default icon size for consistency const ICON_SIZE = 20; const CATEGORY_ICON_SIZE = 16; const MONOCHROME_ICON_CATEGORIES = new Set(["github", "linear"]); /** * Get a default icon for a tool based on its category * Always returns an icon - no tool should be without one */ const getDefaultToolIcon = ( tool: Tool, size: number = ICON_SIZE, ): React.ReactNode => { // If tool has custom icon, use it if (tool.icon) return tool.icon; // Try to get category icon const categoryIcon = getToolCategoryIcon(tool.category, { showBackground: false, width: size, height: size, }); // If category icon exists, use it if (categoryIcon) return categoryIcon; return ( ); }; /** * Get icon for a category tab */ const getCategoryTabIcon = (category: string): React.ReactNode => { if (category === "all") { return ( ); } const icon = getToolCategoryIcon(category, { showBackground: false, width: CATEGORY_ICON_SIZE, height: CATEGORY_ICON_SIZE, }); // Fallback for categories without icons return ( icon || ( ) ); }; export const SlashCommandDropdown: React.FC = ({ matches, selectedIndex, onSelect, onClose, position, isVisible, openedViaButton = false, selectedCategory = "all", categories = [], onCategoryChange, className, style, }) => { const dropdownRef = useRef(null); const scrollContainerRef = useRef(null); // Focus the dropdown when it becomes visible (only when opened via button) useEffect(() => { if (isVisible && openedViaButton && dropdownRef.current) { requestAnimationFrame(() => { dropdownRef.current?.focus(); }); } }, [isVisible, openedViaButton]); // Get unique categories from matches if not provided const computedCategories = useMemo(() => { if (categories && categories.length > 0) { return categories; } const uniqueCategories = Array.from( new Set(matches.map((match) => match.tool.category)), ); return ["all", ...uniqueCategories.sort()]; }, [matches, categories]); // Filter matches based on selected category const filteredMatches = useMemo(() => { if (selectedCategory === "all") { return matches; } return matches.filter((match) => match.tool.category === selectedCategory); }, [matches, selectedCategory]); // Scroll to selected item when selectedIndex changes useEffect(() => { if (selectedIndex >= 0 && selectedIndex < filteredMatches.length) { const selectedElement = scrollContainerRef.current?.querySelector( `[data-index="${selectedIndex}"]`, ); if (selectedElement) { selectedElement.scrollIntoView({ behavior: "smooth", block: "nearest", }); } } }, [selectedIndex, filteredMatches.length]); if (!isVisible || matches.length === 0) return null; return (

{/* Header section - Only show when opened via button */} {openedViaButton && (

Browse Tools

)} {/* Category Tabs */} {computedCategories.length > 1 && (

{computedCategories.map((category) => ( ))}

)} {/* Tool List */}

{filteredMatches.length === 0 ? (

No tools found

) : ( filteredMatches.map((match, index) => { const isSelected = index === selectedIndex; return ( ); }) )}

); }; 55:T214e,import type { IconSvgElement } from "@hugeicons/react"; import Image from "next/image"; import { Brain02Icon, CheckListIcon, AlarmClockIcon, ComputerProgramming01Icon, File02Icon, HugeiconsIcon, Image02Icon, InformationCircleIcon, Link01Icon, Notification03Icon, PackageOpenIcon, SourceCodeCircleIcon, SquareArrowUpRight02Icon, Target02Icon, ToolsIcon, } from "@/components/icons"; export interface IconProps { size?: number; width?: number; height?: number; strokeWidth?: number; className?: string; color?: string; } // Category-specific icons with colors export interface IconConfig { icon: IconSvgElement | string; bgColor: string; bgColorLight?: string; // Light mode background iconColor: string; isImage?: boolean; } /** * Normalize a category/integration name for icon lookup */ const normalizeCategoryName = (name: string): string => { if (!name) return "general"; return name .toLowerCase() .trim() .replace(/[\s-]+/g, "_") .replace(/_+/g, "_") .replace(/^_|_$/g, ""); }; // Alias mapping for backwards compatibility const iconAliases: Record = { calendar: "google_calendar", }; // Tool category icon configs - matches gaia repo pattern const iconConfigs: Record = { // Integration icons (use images) gmail: { icon: "/images/icons/gmail.svg", bgColor: "bg-zinc-700", bgColorLight: "bg-zinc-200", iconColor: "text-zinc-200", isImage: true, }, google_calendar: { icon: "/images/icons/googlecalendar.webp", bgColor: "bg-zinc-700", bgColorLight: "bg-zinc-200", iconColor: "text-zinc-200", isImage: true, }, github: { icon: "/images/icons/github.png", bgColor: "bg-zinc-700", bgColorLight: "bg-zinc-200", iconColor: "text-zinc-200", isImage: true, }, linear: { icon: "/images/icons/linear.svg", bgColor: "bg-zinc-700", bgColorLight: "bg-zinc-200", iconColor: "text-zinc-200", isImage: true, }, slack: { icon: "/images/icons/slack.svg", bgColor: "bg-zinc-700", bgColorLight: "bg-zinc-200", iconColor: "text-zinc-200", isImage: true, }, google_docs: { icon: "/images/icons/google_docs.webp", bgColor: "bg-zinc-700", bgColorLight: "bg-zinc-200", iconColor: "text-zinc-200", isImage: true, }, googlesheets: { icon: "/images/icons/googlesheets.webp", bgColor: "bg-zinc-700", bgColorLight: "bg-zinc-200", iconColor: "text-zinc-200", isImage: true, }, search: { icon: "/images/icons/google.svg", bgColor: "bg-zinc-700", bgColorLight: "bg-zinc-200", iconColor: "text-zinc-200", isImage: true, }, weather: { icon: "/images/icons/weather.webp", bgColor: "bg-zinc-700", bgColorLight: "bg-zinc-200", iconColor: "text-zinc-200", isImage: true, }, notion: { icon: "/images/icons/notion.webp", bgColor: "bg-zinc-700", bgColorLight: "bg-zinc-200", iconColor: "text-zinc-200", isImage: true, }, twitter: { icon: "/images/icons/twitter.webp", bgColor: "bg-zinc-700", bgColorLight: "bg-zinc-200", iconColor: "text-zinc-200", isImage: true, }, linkedin: { icon: "/images/icons/linkedin.svg", bgColor: "bg-zinc-700", bgColorLight: "bg-zinc-200", iconColor: "text-zinc-200", isImage: true, }, reddit: { icon: "/images/icons/reddit.svg", bgColor: "bg-zinc-700", bgColorLight: "bg-zinc-200", iconColor: "text-zinc-200", isImage: true, }, figma: { icon: "/images/icons/figma.svg", bgColor: "bg-zinc-800", bgColorLight: "bg-zinc-200", iconColor: "text-white", isImage: true, }, // Category icons (use HugeIcons components) todos: { icon: CheckListIcon, bgColor: "bg-emerald-500/20 backdrop-blur", bgColorLight: "bg-emerald-500/20", iconColor: "text-emerald-400", }, reminders: { icon: AlarmClockIcon, bgColor: "bg-sky-500/20 backdrop-blur", bgColorLight: "bg-sky-500/20", iconColor: "text-blue-400", }, documents: { icon: File02Icon, bgColor: "bg-orange-500/20 backdrop-blur", bgColorLight: "bg-orange-500/20", iconColor: "text-orange-400", }, development: { icon: SourceCodeCircleIcon, bgColor: "bg-sky-500/20 backdrop-blur", bgColorLight: "bg-sky-500/20", iconColor: "text-cyan-400", }, memory: { icon: Brain02Icon, bgColor: "bg-indigo-500/20 backdrop-blur", bgColorLight: "bg-indigo-500/20", iconColor: "text-indigo-400", }, creative: { icon: Image02Icon, bgColor: "bg-pink-500/20 backdrop-blur", bgColorLight: "bg-pink-500/20", iconColor: "text-pink-400", }, goal_tracking: { icon: Target02Icon, bgColor: "bg-emerald-500/20 backdrop-blur", bgColorLight: "bg-emerald-500/20", iconColor: "text-emerald-400", }, notifications: { icon: Notification03Icon, bgColor: "bg-yellow-500/20 backdrop-blur", bgColorLight: "bg-yellow-500/20", iconColor: "text-yellow-400", }, support: { icon: InformationCircleIcon, bgColor: "bg-sky-500/20 backdrop-blur", bgColorLight: "bg-sky-500/20", iconColor: "text-blue-400", }, general: { icon: InformationCircleIcon, bgColor: "bg-gray-500/20 backdrop-blur", bgColorLight: "bg-gray-500/20", iconColor: "text-gray-400", }, integrations: { icon: Link01Icon, bgColor: "bg-zinc-700", bgColorLight: "bg-zinc-200", iconColor: "text-zinc-200", }, // Agent tool call categories handoff: { icon: SquareArrowUpRight02Icon, bgColor: "bg-sky-500/20 backdrop-blur", bgColorLight: "bg-sky-500/20", iconColor: "text-sky-400", }, retrieve_tools: { icon: PackageOpenIcon, bgColor: "bg-indigo-500/20 backdrop-blur", bgColorLight: "bg-indigo-500/20", iconColor: "text-indigo-400", }, executor: { icon: ComputerProgramming01Icon, bgColor: "bg-teal-500/20 backdrop-blur", bgColorLight: "bg-teal-500/20", iconColor: "text-teal-400", }, unknown: { icon: ToolsIcon, bgColor: "bg-zinc-500/20 backdrop-blur", bgColorLight: "bg-zinc-500/20", iconColor: "text-zinc-400", }, }; /** * Get icon for a tool category with optional URL-based icon fallback. * Supports built-in categories and custom integration icons via iconUrl. */ export const getToolCategoryIcon = ( category: string, iconProps: Partial & { showBackground?: boolean } = {}, iconUrl?: string | null, ) => { const { showBackground = true, ...restProps } = iconProps; const defaultProps = { size: restProps.size || 16, width: restProps.width || 20, height: restProps.height || 20, strokeWidth: restProps.strokeWidth || 2, className: restProps.className, }; // Normalize const normalizedCategory = normalizeCategoryName(category); // Resolve aliases const aliasedCategory = iconAliases[normalizedCategory] || iconAliases[category] || normalizedCategory; const finalCategory = normalizeCategoryName(aliasedCategory); let config = iconConfigs[finalCategory]; // Fallback search if (!config) { const normalizedConfigs = Object.entries(iconConfigs); const matchingConfig = normalizedConfigs.find( ([key]) => normalizeCategoryName(key) === finalCategory, ); if (matchingConfig) { config = matchingConfig[1]; } } // If no predefined config found, try iconUrl fallback for custom integrations if (!config) { if (iconUrl) { const iconElement = ( {`${category}

); return showBackground ? (

{iconElement}

) : ( iconElement ); } return null; } // Render image or component icon const iconElement = config.isImage ? (

) : ( ); // Return with or without background based on showBackground prop // Using dark: prefix for proper light/dark mode support return showBackground ? (

{iconElement}

) : ( iconElement ); }; // Format tool names from snake_case to Title Case export const formatToolName = (name: string): string => { return name .split("_") .map((word) => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase()) .join(" "); }; 51:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[null,["$","$L52",null,{"namespace":"@gaia","registryDependencies":["icons"]}]]}],null]}],["$","$L53",null,{"files":[{"path":"registry/new-york/ui/slash-command-dropdown.tsx","content":"$54","type":"registry:ui"},{"path":"lib/utils/tool-icons.tsx","content":"$55","type":"registry:lib"}],"className":"h-[70svh] min-h-80"}]]}]