import { useState, useEffect, useMemo } from 'react'; import { listSavedRecipes, convertToLocaleDateString } from '../../recipe/recipe_management'; import { FileText, Edit, Trash2, Play, Calendar, AlertCircle, Link, Clock, Terminal, ExternalLink, Share2, Copy, Download, } 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 { toastSuccess, toastError } from '../../toasts'; import { useEscapeKey } from '../../hooks/useEscapeKey'; import { deleteRecipe, RecipeManifest, startAgent, scheduleRecipe, setRecipeSlashCommand, recipeToYaml, } from '../../api'; import ImportRecipeForm, { ImportRecipeButton } from './ImportRecipeForm'; import CreateEditRecipeModal from './CreateEditRecipeModal'; import { generateDeepLink } from '../../recipe'; import { useNavigation } from '../../hooks/useNavigation'; import { CronPicker } from '../schedule/CronPicker'; import { Dialog, DialogContent, DialogHeader, DialogTitle } from '../ui/dialog'; import { SearchView } from '../conversation/SearchView'; import cronstrue from 'cronstrue'; import { getInitialWorkingDir } from '../../utils/workingDir'; import { trackRecipeDeleted, trackRecipeStarted, trackRecipeDeeplinkCopied, trackRecipeYamlCopied, trackRecipeExportedToFile, trackRecipeScheduled, trackRecipeSlashCommandSet, getErrorType, } from '../../utils/analytics'; import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, DropdownMenuSeparator, } from '../ui/dropdown-menu'; import { getSearchShortcutText } from '../../utils/keyboardShortcuts'; import { errorMessage } from '../../utils/conversionUtils'; import { AppEvents } from '../../constants/events'; import { defineMessages, useIntl } from '../../i18n'; const i18n = defineMessages({ deleteRecipeTitle: { id: 'recipesView.deleteRecipeTitle', defaultMessage: 'Delete Recipe', }, deleteRecipeConfirm: { id: 'recipesView.deleteRecipeConfirm', defaultMessage: 'Are you sure you want to delete "{title}"?', }, deleteRecipeDetail: { id: 'recipesView.deleteRecipeDetail', defaultMessage: 'Recipe file will be deleted.', }, recipeDeletedSuccess: { id: 'recipesView.recipeDeletedSuccess', defaultMessage: 'Recipe deleted successfully', }, deeplinkCopiedTitle: { id: 'recipesView.deeplinkCopiedTitle', defaultMessage: 'Deeplink copied', }, deeplinkCopiedMsg: { id: 'recipesView.deeplinkCopiedMsg', defaultMessage: 'Recipe deeplink has been copied to clipboard', }, copyFailedTitle: { id: 'recipesView.copyFailedTitle', defaultMessage: 'Copy failed', }, copyDeeplinkFailedMsg: { id: 'recipesView.copyDeeplinkFailedMsg', defaultMessage: 'Failed to copy deeplink to clipboard', }, yamlCopiedTitle: { id: 'recipesView.yamlCopiedTitle', defaultMessage: 'YAML copied', }, yamlCopiedMsg: { id: 'recipesView.yamlCopiedMsg', defaultMessage: 'Recipe YAML has been copied to clipboard', }, copyYamlFailedMsg: { id: 'recipesView.copyYamlFailedMsg', defaultMessage: 'Failed to copy recipe YAML to clipboard', }, exportRecipeDialogTitle: { id: 'recipesView.exportRecipeDialogTitle', defaultMessage: 'Export Recipe', }, yamlFiles: { id: 'recipesView.yamlFiles', defaultMessage: 'YAML Files', }, allFiles: { id: 'recipesView.allFiles', defaultMessage: 'All Files', }, recipeExportedTitle: { id: 'recipesView.recipeExportedTitle', defaultMessage: 'Recipe exported', }, recipeExportedMsg: { id: 'recipesView.recipeExportedMsg', defaultMessage: 'Recipe saved to {filePath}', }, exportFailedTitle: { id: 'recipesView.exportFailedTitle', defaultMessage: 'Export failed', }, exportFailedMsg: { id: 'recipesView.exportFailedMsg', defaultMessage: 'Failed to export recipe to file', }, scheduleSavedTitle: { id: 'recipesView.scheduleSavedTitle', defaultMessage: 'Schedule saved', }, scheduleSavedMsg: { id: 'recipesView.scheduleSavedMsg', defaultMessage: 'Recipe will run {schedule}', }, scheduleRemovedTitle: { id: 'recipesView.scheduleRemovedTitle', defaultMessage: 'Schedule removed', }, scheduleRemovedMsg: { id: 'recipesView.scheduleRemovedMsg', defaultMessage: 'Recipe will no longer run automatically', }, slashCommandSavedTitle: { id: 'recipesView.slashCommandSavedTitle', defaultMessage: 'Slash command saved', }, slashCommandSavedMsg: { id: 'recipesView.slashCommandSavedMsg', defaultMessage: 'Use /{command} to run this recipe', }, slashCommandRemovedTitle: { id: 'recipesView.slashCommandRemovedTitle', defaultMessage: 'Slash command removed', }, slashCommandRemovedMsg: { id: 'recipesView.slashCommandRemovedMsg', defaultMessage: 'Recipe slash command has been removed', }, runs: { id: 'recipesView.runs', defaultMessage: 'Runs {schedule}', }, editSlashCommand: { id: 'recipesView.editSlashCommand', defaultMessage: 'Edit slash command', }, addSlashCommand: { id: 'recipesView.addSlashCommand', defaultMessage: 'Add slash command', }, useRecipe: { id: 'recipesView.useRecipe', defaultMessage: 'Use recipe', }, openInNewWindow: { id: 'recipesView.openInNewWindow', defaultMessage: 'Open in new window', }, editRecipe: { id: 'recipesView.editRecipe', defaultMessage: 'Edit recipe', }, shareRecipe: { id: 'recipesView.shareRecipe', defaultMessage: 'Share recipe', }, copyDeeplink: { id: 'recipesView.copyDeeplink', defaultMessage: 'Copy Deeplink', }, copyYaml: { id: 'recipesView.copyYaml', defaultMessage: 'Copy YAML', }, exportToFile: { id: 'recipesView.exportToFile', defaultMessage: 'Export to File', }, editSchedule: { id: 'recipesView.editSchedule', defaultMessage: 'Edit schedule', }, addSchedule: { id: 'recipesView.addSchedule', defaultMessage: 'Add schedule', }, deleteRecipe: { id: 'recipesView.deleteRecipe', defaultMessage: 'Delete recipe', }, errorLoadingRecipes: { id: 'recipesView.errorLoadingRecipes', defaultMessage: 'Error Loading Recipes', }, tryAgain: { id: 'recipesView.tryAgain', defaultMessage: 'Try Again', }, noSavedRecipes: { id: 'recipesView.noSavedRecipes', defaultMessage: 'No saved recipes', }, noSavedRecipesDescription: { id: 'recipesView.noSavedRecipesDescription', defaultMessage: 'Recipe saved from chats will show up here.', }, noMatchingRecipes: { id: 'recipesView.noMatchingRecipes', defaultMessage: 'No matching recipes found', }, adjustSearchTerms: { id: 'recipesView.adjustSearchTerms', defaultMessage: 'Try adjusting your search terms', }, recipesTitle: { id: 'recipesView.recipesTitle', defaultMessage: 'Recipes', }, createRecipe: { id: 'recipesView.createRecipe', defaultMessage: 'Create Recipe', }, recipesDescription: { id: 'recipesView.recipesDescription', defaultMessage: 'View and manage your saved recipes to quickly start new sessions with predefined configurations. {shortcut} to search.', }, searchRecipesPlaceholder: { id: 'recipesView.searchRecipesPlaceholder', defaultMessage: 'Search recipes...', }, scheduleDialogTitle: { id: 'recipesView.scheduleDialogTitle', defaultMessage: '{action} Schedule', }, removeSchedule: { id: 'recipesView.removeSchedule', defaultMessage: 'Remove Schedule', }, cancel: { id: 'recipesView.cancel', defaultMessage: 'Cancel', }, save: { id: 'recipesView.save', defaultMessage: 'Save', }, slashCommandTitle: { id: 'recipesView.slashCommandTitle', defaultMessage: 'Slash Command', }, slashCommandDescription: { id: 'recipesView.slashCommandDescription', defaultMessage: 'Set a slash command to quickly run this recipe from any chat', }, slashCommandPlaceholder: { id: 'recipesView.slashCommandPlaceholder', defaultMessage: 'command-name', }, slashCommandUsageHint: { id: 'recipesView.slashCommandUsageHint', defaultMessage: 'Use /{command} in any chat to run this recipe', }, remove: { id: 'recipesView.remove', defaultMessage: 'Remove', }, }); export default function RecipesView() { const intl = useIntl(); const setView = useNavigation(); const [savedRecipes, setSavedRecipes] = useState([]); const [loading, setLoading] = useState(true); const [showSkeleton, setShowSkeleton] = useState(true); const [error, setError] = useState(null); const [selectedRecipe, setSelectedRecipe] = useState(null); const [showEditor, setShowEditor] = useState(false); const [showContent, setShowContent] = useState(false); const [showCreateDialog, setShowCreateDialog] = useState(false); const [showImportDialog, setShowImportDialog] = useState(false); const [showScheduleDialog, setShowScheduleDialog] = useState(false); const [scheduleRecipeManifest, setScheduleRecipeManifest] = useState(null); const [scheduleCron, setScheduleCron] = useState(''); const [showSlashCommandDialog, setShowSlashCommandDialog] = useState(false); const [slashCommandRecipeManifest, setSlashCommandRecipeManifest] = useState(null); const [slashCommand, setSlashCommand] = useState(''); const [scheduleValid, setScheduleIsValid] = useState(true); const [searchTerm, setSearchTerm] = useState(''); const filteredRecipes = useMemo(() => { if (!searchTerm) return savedRecipes; const searchLower = searchTerm.toLowerCase(); return savedRecipes.filter((recipeManifest) => { const { recipe, slash_command } = recipeManifest; const title = recipe.title?.toLowerCase() || ''; const description = recipe.description?.toLowerCase() || ''; const slashCmd = slash_command?.toLowerCase() || ''; return ( title.includes(searchLower) || description.includes(searchLower) || slashCmd.includes(searchLower) ); }); }, [savedRecipes, searchTerm]); useEffect(() => { loadSavedRecipes(); }, []); useEscapeKey(showEditor, () => setShowEditor(false)); useEffect(() => { if (!loading && showSkeleton) { const timer = setTimeout(() => { setShowSkeleton(false); setTimeout(() => { setShowContent(true); }, 50); }, 300); return () => clearTimeout(timer); } return () => void 0; }, [loading, showSkeleton]); const loadSavedRecipes = async () => { try { setLoading(true); setShowSkeleton(true); setShowContent(false); setError(null); const recipeManifestResponses = await listSavedRecipes(); setSavedRecipes(recipeManifestResponses); } catch (err) { setError(errorMessage(err, 'Failed to load recipes')); console.error('Failed to load saved recipes:', err); } finally { setLoading(false); } }; const handleStartRecipeChat = async (recipeId: string) => { try { const newAgent = await startAgent({ body: { working_dir: getInitialWorkingDir(), recipe_id: recipeId, }, throwOnError: true, }); const session = newAgent.data; trackRecipeStarted(true, undefined, false); window.dispatchEvent(new CustomEvent(AppEvents.SESSION_CREATED, { detail: { session } })); setView('pair', { disableAnimation: true, resumeSessionId: session.id, initialMessage: session.recipe?.prompt ? { msg: session.recipe.prompt, images: [] } : undefined, }); } catch (error) { console.error('Failed to load recipe:', error); const errorMsg = errorMessage(error, 'Failed to load recipe'); trackRecipeStarted(false, getErrorType(error), false); setError(errorMsg); } }; const handleStartRecipeChatInNewWindow = async (recipeId: string) => { try { window.electron.createChatWindow({ dir: getInitialWorkingDir(), viewType: 'pair', recipeId, }); trackRecipeStarted(true, undefined, true); } catch (error) { console.error('Failed to open recipe in new window:', error); trackRecipeStarted(false, getErrorType(error), true); } }; const handleDeleteRecipe = async (recipeManifest: RecipeManifest) => { const result = await window.electron.showMessageBox({ type: 'warning', buttons: [intl.formatMessage(i18n.cancel), 'Delete'], defaultId: 0, title: intl.formatMessage(i18n.deleteRecipeTitle), message: intl.formatMessage(i18n.deleteRecipeConfirm, { title: recipeManifest.recipe.title }), detail: intl.formatMessage(i18n.deleteRecipeDetail), }); if (result.response !== 1) { return; } try { await deleteRecipe({ body: { id: recipeManifest.id } }); trackRecipeDeleted(true); await loadSavedRecipes(); toastSuccess({ title: recipeManifest.recipe.title, msg: intl.formatMessage(i18n.recipeDeletedSuccess), }); } catch (err) { console.error('Failed to delete recipe:', err); const errorMsg = errorMessage(err, 'Failed to delete recipe'); trackRecipeDeleted(false, getErrorType(err)); setError(errorMsg); } }; const handleEditRecipe = async (recipeManifest: RecipeManifest) => { setSelectedRecipe(recipeManifest); setShowEditor(true); }; const handleEditorClose = (wasSaved?: boolean) => { setShowEditor(false); setSelectedRecipe(null); if (wasSaved) { loadSavedRecipes(); } }; const handleCopyDeeplink = async (recipeManifest: RecipeManifest) => { try { const deeplink = await generateDeepLink(recipeManifest.recipe); await navigator.clipboard.writeText(deeplink); trackRecipeDeeplinkCopied(true); toastSuccess({ title: intl.formatMessage(i18n.deeplinkCopiedTitle), msg: intl.formatMessage(i18n.deeplinkCopiedMsg), }); } catch (error) { console.error('Failed to copy deeplink:', error); trackRecipeDeeplinkCopied(false, getErrorType(error)); toastError({ title: intl.formatMessage(i18n.copyFailedTitle), msg: intl.formatMessage(i18n.copyDeeplinkFailedMsg), }); } }; const handleCopyYaml = async (recipeManifest: RecipeManifest) => { try { const response = await recipeToYaml({ body: { recipe: recipeManifest.recipe }, throwOnError: true, }); if (!response.data?.yaml) { throw new Error('No YAML data returned from API'); } await navigator.clipboard.writeText(response.data.yaml); trackRecipeYamlCopied(true); toastSuccess({ title: intl.formatMessage(i18n.yamlCopiedTitle), msg: intl.formatMessage(i18n.yamlCopiedMsg), }); } catch (error) { console.error('Failed to copy YAML:', error); trackRecipeYamlCopied(false, getErrorType(error)); toastError({ title: intl.formatMessage(i18n.copyFailedTitle), msg: intl.formatMessage(i18n.copyYamlFailedMsg), }); } }; const handleExportFile = async (recipeManifest: RecipeManifest) => { try { const response = await recipeToYaml({ body: { recipe: recipeManifest.recipe }, throwOnError: true, }); if (!response.data?.yaml) { throw new Error('No YAML data returned from API'); } const sanitizedTitle = (recipeManifest.recipe.title || 'recipe') .toLowerCase() .replace(/[^a-z0-9]+/g, '-') .replace(/^-|-$/g, ''); const filename = `${sanitizedTitle}.yaml`; const result = await window.electron.showSaveDialog({ title: intl.formatMessage(i18n.exportRecipeDialogTitle), defaultPath: filename, filters: [ { name: intl.formatMessage(i18n.yamlFiles), extensions: ['yaml', 'yml'] }, { name: intl.formatMessage(i18n.allFiles), extensions: ['*'] }, ], }); if (!result.canceled && result.filePath) { await window.electron.writeFile(result.filePath, response.data.yaml); trackRecipeExportedToFile(true); toastSuccess({ title: intl.formatMessage(i18n.recipeExportedTitle), msg: intl.formatMessage(i18n.recipeExportedMsg, { filePath: result.filePath }), }); } } catch (error) { console.error('Failed to export recipe:', error); trackRecipeExportedToFile(false, getErrorType(error)); toastError({ title: intl.formatMessage(i18n.exportFailedTitle), msg: intl.formatMessage(i18n.exportFailedMsg), }); } }; const handleOpenScheduleDialog = (recipeManifest: RecipeManifest) => { setScheduleRecipeManifest(recipeManifest); setScheduleCron(recipeManifest.schedule_cron || '0 0 14 * * *'); setShowScheduleDialog(true); }; const handleSaveSchedule = async () => { if (!scheduleRecipeManifest) return; const action = scheduleRecipeManifest.schedule_cron ? 'edit' : 'add'; try { await scheduleRecipe({ body: { id: scheduleRecipeManifest.id, cron_schedule: scheduleCron, }, }); trackRecipeScheduled(true, action); toastSuccess({ title: intl.formatMessage(i18n.scheduleSavedTitle), msg: intl.formatMessage(i18n.scheduleSavedMsg, { schedule: getReadableCron(scheduleCron) }), }); setShowScheduleDialog(false); setScheduleRecipeManifest(null); await loadSavedRecipes(); } catch (error) { console.error('Failed to save schedule:', error); const errorMsg = errorMessage(error, 'Failed to save schedule'); trackRecipeScheduled(false, action, getErrorType(error)); setError(errorMsg); } }; const handleRemoveSchedule = async () => { if (!scheduleRecipeManifest) return; try { await scheduleRecipe({ body: { id: scheduleRecipeManifest.id, cron_schedule: null, }, }); trackRecipeScheduled(true, 'remove'); toastSuccess({ title: intl.formatMessage(i18n.scheduleRemovedTitle), msg: intl.formatMessage(i18n.scheduleRemovedMsg), }); setShowScheduleDialog(false); setScheduleRecipeManifest(null); await loadSavedRecipes(); } catch (error) { console.error('Failed to remove schedule:', error); const errorMsg = errorMessage(error, 'Failed to remove schedule'); trackRecipeScheduled(false, 'remove', getErrorType(error)); setError(errorMsg); } }; const handleOpenSlashCommandDialog = (recipeManifest: RecipeManifest) => { setSlashCommandRecipeManifest(recipeManifest); setSlashCommand(recipeManifest.slash_command || ''); setShowSlashCommandDialog(true); }; const handleSaveSlashCommand = async () => { if (!slashCommandRecipeManifest) return; const action = slashCommand ? slashCommandRecipeManifest.slash_command ? 'edit' : 'add' : 'remove'; try { await setRecipeSlashCommand({ body: { id: slashCommandRecipeManifest.id, slash_command: slashCommand || null, }, }); trackRecipeSlashCommandSet(true, action); toastSuccess({ title: intl.formatMessage(i18n.slashCommandSavedTitle), msg: slashCommand ? intl.formatMessage(i18n.slashCommandSavedMsg, { command: slashCommand }) : intl.formatMessage(i18n.slashCommandRemovedMsg), }); setShowSlashCommandDialog(false); setSlashCommandRecipeManifest(null); await loadSavedRecipes(); } catch (error) { console.error('Failed to save slash command:', error); const errorMsg = errorMessage(error, 'Failed to save slash command'); trackRecipeSlashCommandSet(false, action, getErrorType(error)); setError(errorMsg); } }; const handleRemoveSlashCommand = async () => { if (!slashCommandRecipeManifest) return; try { await setRecipeSlashCommand({ body: { id: slashCommandRecipeManifest.id, slash_command: null, }, }); trackRecipeSlashCommandSet(true, 'remove'); toastSuccess({ title: intl.formatMessage(i18n.slashCommandRemovedTitle), msg: intl.formatMessage(i18n.slashCommandRemovedMsg), }); setShowSlashCommandDialog(false); setSlashCommandRecipeManifest(null); await loadSavedRecipes(); } catch (error) { console.error('Failed to remove slash command:', error); const errorMsg = errorMessage(error, 'Failed to remove slash command'); trackRecipeSlashCommandSet(false, 'remove', getErrorType(error)); setError(errorMsg); } }; const getReadableCron = (cron: string): string => { try { const cronWithoutSeconds = cron.split(' ').slice(1).join(' '); return cronstrue.toString(cronWithoutSeconds).toLowerCase(); } catch { return cron; } }; const RecipeItem = ({ recipeManifestResponse, recipeManifestResponse: { recipe, last_modified: lastModified, schedule_cron, slash_command }, }: { recipeManifestResponse: RecipeManifest; }) => (

{recipe.title}

{recipe.description}

{convertToLocaleDateString(lastModified)}

{(schedule_cron || slash_command) && (

{schedule_cron && (

{intl.formatMessage(i18n.runs, { schedule: getReadableCron(schedule_cron) })}

)} {slash_command && (

/{slash_command}

)}

e.stopPropagation()}> handleCopyDeeplink(recipeManifestResponse)}> {intl.formatMessage(i18n.copyDeeplink)} handleCopyYaml(recipeManifestResponse)}> {intl.formatMessage(i18n.copyYaml)} handleExportFile(recipeManifestResponse)}> {intl.formatMessage(i18n.exportToFile)}

); const RecipeSkeleton = () => (

); const renderContent = () => { if (loading || showSkeleton) { return (

); } if (error) { return (

{intl.formatMessage(i18n.errorLoadingRecipes)}

{error}

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

{intl.formatMessage(i18n.noSavedRecipes)}

{intl.formatMessage(i18n.noSavedRecipesDescription)}

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

{intl.formatMessage(i18n.noMatchingRecipes)}

{intl.formatMessage(i18n.adjustSearchTerms)}

); } return (

{filteredRecipes.map((recipeManifestResponse: RecipeManifest) => ( ))}

); }; return ( <>

{intl.formatMessage(i18n.recipesTitle)}

setShowImportDialog(true)} />

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

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

{renderContent()}

{showEditor && selectedRecipe && ( )} setShowImportDialog(false)} onSuccess={loadSavedRecipes} /> {showCreateDialog && ( { setShowCreateDialog(false); loadSavedRecipes(); }} isCreateMode={true} /> )} {showScheduleDialog && scheduleRecipeManifest && ( )} {showSlashCommandDialog && slashCommandRecipeManifest && ( )} ); }