import { useState } from 'react'; import { ExtensionConfig } from '../../../api'; import { useConfig } from '../../ConfigContext'; import { Input } from '../../ui/input'; import { Switch } from '../../ui/switch'; import { formatExtensionName } from '../../settings/extensions/subcomponents/ExtensionList'; import { defineMessages, useIntl } from '../../../i18n'; const i18n = defineMessages({ label: { id: 'recipeExtensionSelector.label', defaultMessage: 'Extensions (Optional)', }, description: { id: 'recipeExtensionSelector.description', defaultMessage: 'Select which extensions should be available when running this recipe. Leave empty to use default extensions.', }, searchPlaceholder: { id: 'recipeExtensionSelector.searchPlaceholder', defaultMessage: 'Search extensions...', }, extensionsSelected: { id: 'recipeExtensionSelector.extensionsSelected', defaultMessage: '{count, plural, one {# extension} other {# extensions}} selected', }, noExtensionsFound: { id: 'recipeExtensionSelector.noExtensionsFound', defaultMessage: 'No extensions found', }, noExtensionsAvailable: { id: 'recipeExtensionSelector.noExtensionsAvailable', defaultMessage: 'No extensions available', }, }); interface RecipeExtensionSelectorProps { selectedExtensions: ExtensionConfig[]; onExtensionsChange: (extensions: ExtensionConfig[]) => void; } export const RecipeExtensionSelector = ({ selectedExtensions, onExtensionsChange, }: RecipeExtensionSelectorProps) => { const intl = useIntl(); const { extensionsList: allExtensions } = useConfig(); const [searchQuery, setSearchQuery] = useState(''); const selectedExtensionNames = new Set(selectedExtensions.map((ext) => ext.name)); const extensionMap = new Map(allExtensions.map((ext) => [ext.name, ext])); selectedExtensions.forEach((ext) => { if (!extensionMap.has(ext.name)) { extensionMap.set(ext.name, { ...ext, enabled: true }); } }); const displayExtensions = Array.from(extensionMap.values()); const handleToggle = (extensionConfig: ExtensionConfig) => { const isSelected = selectedExtensionNames.has(extensionConfig.name); if (isSelected) { onExtensionsChange(selectedExtensions.filter((ext) => ext.name !== extensionConfig.name)); } else { const { enabled: _enabled, ...cleanExtension } = extensionConfig as ExtensionConfig & { enabled?: boolean; }; onExtensionsChange([...selectedExtensions, cleanExtension]); } }; const filteredExtensions = displayExtensions.filter((ext) => { const query = searchQuery.toLowerCase(); return ( ext.name.toLowerCase().includes(query) || (ext.description && ext.description.toLowerCase().includes(query)) ); }); const sortedExtensions = [...filteredExtensions].sort((a, b) => { const aSelected = selectedExtensionNames.has(a.name); const bSelected = selectedExtensionNames.has(b.name); if (aSelected !== bSelected) return aSelected ? -1 : 1; return a.name.localeCompare(b.name); }); const activeCount = selectedExtensions.length; return (

{intl.formatMessage(i18n.label)}

{intl.formatMessage(i18n.description)}

setSearchQuery(e.target.value)} className="mb-3" />

{intl.formatMessage(i18n.extensionsSelected, { count: activeCount })}

{sortedExtensions.length === 0 ? (

{searchQuery ? intl.formatMessage(i18n.noExtensionsFound) : intl.formatMessage(i18n.noExtensionsAvailable)}

) : ( sortedExtensions.map((ext) => { const isSelected = selectedExtensionNames.has(ext.name); return (

handleToggle(ext)} onKeyDown={(event) => { if (event.key === 'Enter' || event.key === ' ') { event.preventDefault(); handleToggle(ext); } }} title={ext.description || ext.name} >

{formatExtensionName(ext.name)}

{ext.description && (

{ext.description}

)}

e.stopPropagation()} className="ml-4"> handleToggle(ext)} variant="mono" />

); }) )}

); };