import { useState, useEffect, useMemo, useCallback } from 'react'; import { Zap, AlertCircle, Plus } from 'lucide-react'; import { ScrollArea } from '../ui/scroll-area'; import { Card } from '../ui/card'; import { Button } from '../ui/button'; import { Skeleton } from '../ui/skeleton'; import { MainPanelLayout } from '../Layout/MainPanelLayout'; import { getSlashCommands } from '../../api'; import { errorMessage } from '../../utils/conversionUtils'; import { getInitialWorkingDir } from '../../utils/workingDir'; import { defineMessages, useIntl } from '../../i18n'; import { SearchView } from '../conversation/SearchView'; import { getSearchShortcutText } from '../../utils/keyboardShortcuts'; const i18n = defineMessages({ errorLoadingSkills: { id: 'skillsView.errorLoadingSkills', defaultMessage: 'Error Loading Skills', }, tryAgain: { id: 'skillsView.tryAgain', defaultMessage: 'Try Again', }, noSkillsInstalled: { id: 'skillsView.noSkillsInstalled', defaultMessage: 'No skills installed', }, noSkillsDescription: { id: 'skillsView.noSkillsDescription', defaultMessage: 'Skills are loaded from SKILL.md files in ~/.config/agents/skills/, .goose/skills/, or other supported directories.', }, noMatchingSkills: { id: 'skillsView.noMatchingSkills', defaultMessage: 'No matching skills found', }, adjustSearchTerms: { id: 'skillsView.adjustSearchTerms', defaultMessage: 'Try adjusting your search terms', }, skillsTitle: { id: 'skillsView.skillsTitle', defaultMessage: 'Skills', }, addSkill: { id: 'skillsView.addSkill', defaultMessage: 'Add Skill', }, skillsDescription: { id: 'skillsView.skillsDescription', defaultMessage: 'View installed skills that extend Goose capabilities. {shortcut} to search.', }, searchSkillsPlaceholder: { id: 'skillsView.searchSkillsPlaceholder', defaultMessage: 'Search skills...', }, comingSoon: { id: 'skillsView.comingSoon', defaultMessage: 'Coming soon', }, }); interface SkillEntry { name: string; description: string; } function SkillItem({ skill }: { skill: SkillEntry }) { return (

{skill.name}

{skill.description}

); } function SkillSkeleton() { return (

); } export default function SkillsView() { const intl = useIntl(); const [skills, setSkills] = useState([]); const [loading, setLoading] = useState(true); const [showSkeleton, setShowSkeleton] = useState(true); const [error, setError] = useState(null); const [showContent, setShowContent] = useState(false); const [searchTerm, setSearchTerm] = useState(''); const filteredSkills = useMemo(() => { if (!searchTerm) return skills; const searchLower = searchTerm.toLowerCase(); return skills.filter( (skill) => skill.name.toLowerCase().includes(searchLower) || skill.description.toLowerCase().includes(searchLower) ); }, [skills, searchTerm]); const loadSkills = useCallback(async () => { try { setLoading(true); setShowSkeleton(true); setShowContent(false); setError(null); const response = await getSlashCommands({ query: { working_dir: getInitialWorkingDir() }, throwOnError: true, }); const skillEntries: SkillEntry[] = (response.data?.commands ?? []) .filter((cmd) => cmd.command_type === 'Skill') .map((cmd) => ({ name: cmd.command, description: cmd.help, })); setSkills(skillEntries); } catch (err) { setError(errorMessage(err, 'Failed to load skills')); } finally { setLoading(false); } }, []); useEffect(() => { loadSkills(); }, [loadSkills]); useEffect(() => { if (!loading && showSkeleton) { const timer = setTimeout(() => { setShowSkeleton(false); setTimeout(() => setShowContent(true), 50); }, 300); return () => clearTimeout(timer); } return undefined; }, [loading, showSkeleton]); const renderContent = () => { if (loading || showSkeleton) { return (

); } if (error) { return (

{intl.formatMessage(i18n.errorLoadingSkills)}

{error}

); } if (skills.length === 0) { return (

{intl.formatMessage(i18n.noSkillsInstalled)}

{intl.formatMessage(i18n.noSkillsDescription)}

); } if (filteredSkills.length === 0 && searchTerm) { return (

{intl.formatMessage(i18n.noMatchingSkills)}

{intl.formatMessage(i18n.adjustSearchTerms)}

); } return (

{filteredSkills.map((skill) => ( ))}

); }; return (

{intl.formatMessage(i18n.skillsTitle)}

{intl.formatMessage(i18n.skillsDescription, { shortcut: getSearchShortcutText(), })}

setSearchTerm(term)} placeholder={intl.formatMessage(i18n.searchSkillsPlaceholder)} >

{renderContent()}

); }