import { useState, useEffect } from 'react'; import { useForm } from '@tanstack/react-form'; import { Recipe } from '../../recipe'; import { Geese } from '../icons/Geese'; import { X, Save, Play, Loader2 } from 'lucide-react'; import { Button } from '../ui/button'; import { RecipeFormFields } from './shared/RecipeFormFields'; import { RecipeFormData } from './shared/recipeFormSchema'; import { createRecipe } from '../../api/sdk.gen'; import { RecipeParameter } from './shared/recipeFormSchema'; import { toastError } from '../../toasts'; import { saveRecipe } from '../../recipe/recipe_management'; import { errorMessage } from '../../utils/conversionUtils'; import { defineMessages, useIntl } from '../../i18n'; const i18n = defineMessages({ title: { id: 'createRecipeFromSession.title', defaultMessage: 'Create Recipe from Session', }, subtitle: { id: 'createRecipeFromSession.subtitle', defaultMessage: 'Create a reusable recipe based on your current conversation.', }, analyzingTitle: { id: 'createRecipeFromSession.analyzingTitle', defaultMessage: 'Analyzing your conversation', }, stageReading: { id: 'createRecipeFromSession.stageReading', defaultMessage: 'Reading your conversation...', }, stageIdentifying: { id: 'createRecipeFromSession.stageIdentifying', defaultMessage: 'Identifying key patterns...', }, stageExtracting: { id: 'createRecipeFromSession.stageExtracting', defaultMessage: 'Extracting main topics...', }, stageGenerating: { id: 'createRecipeFromSession.stageGenerating', defaultMessage: 'Generating recipe structure...', }, stageFinalizing: { id: 'createRecipeFromSession.stageFinalizing', defaultMessage: 'Finalizing details...', }, stageComplete: { id: 'createRecipeFromSession.stageComplete', defaultMessage: 'Complete!', }, extractingInsights: { id: 'createRecipeFromSession.extractingInsights', defaultMessage: 'Extracting insights from your chat', }, cancel: { id: 'createRecipeFromSession.cancel', defaultMessage: 'Cancel', }, creating: { id: 'createRecipeFromSession.creating', defaultMessage: 'Creating...', }, createRecipe: { id: 'createRecipeFromSession.createRecipe', defaultMessage: 'Create Recipe', }, createAndRunRecipe: { id: 'createRecipeFromSession.createAndRunRecipe', defaultMessage: 'Create & Run Recipe', }, failedToCreateTitle: { id: 'createRecipeFromSession.failedToCreateTitle', defaultMessage: 'Failed to create recipe', }, failedToCreateDefaultMsg: { id: 'createRecipeFromSession.failedToCreateDefaultMsg', defaultMessage: 'An unexpected error occurred while creating the recipe. Please try again.', }, }); interface CreateRecipeFromSessionModalProps { isOpen: boolean; onClose: () => void; sessionId: string; onRecipeCreated?: (recipe: Recipe) => void; } export default function CreateRecipeFromSessionModal({ isOpen, onClose, sessionId, onRecipeCreated, }: CreateRecipeFromSessionModalProps) { const intl = useIntl(); const [isCreating, setIsCreating] = useState(false); const [isAnalyzing, setIsAnalyzing] = useState(false); const [analysisStage, setAnalysisStage] = useState(''); const [hasAnalyzed, setHasAnalyzed] = useState(false); // Initialize form with empty values for new recipe const form = useForm({ defaultValues: { title: '', description: '', instructions: '', prompt: '', activities: [] as string[], parameters: [] as RecipeParameter[], jsonSchema: '', subRecipes: [], recipeName: '', global: true, } as RecipeFormData, onSubmit: async ({ value }) => { await handleCreateRecipe(value); }, }); // Track form validity with state to make it reactive const [isFormValid, setIsFormValid] = useState(false); // Analyze messages and prefill form when modal opens useEffect(() => { if (isOpen && sessionId && !hasAnalyzed) { setIsAnalyzing(true); // Create a sequence of analysis stages for better UX const stages = [ intl.formatMessage(i18n.stageReading), intl.formatMessage(i18n.stageIdentifying), intl.formatMessage(i18n.stageExtracting), intl.formatMessage(i18n.stageGenerating), intl.formatMessage(i18n.stageFinalizing), ]; let currentStageIndex = 0; setAnalysisStage(stages[0]); // Update stage every 800ms const stageInterval = setInterval(() => { currentStageIndex = (currentStageIndex + 1) % stages.length; setAnalysisStage(stages[currentStageIndex]); }, 800); // Call the backend to analyze messages and create a recipe createRecipe({ body: { session_id: sessionId }, throwOnError: true, }) .then((response) => { clearInterval(stageInterval); setAnalysisStage(intl.formatMessage(i18n.stageComplete)); if (response.data?.recipe) { const recipe = response.data.recipe; // Prefill the form with the analyzed recipe information form.setFieldValue('title', recipe.title || ''); form.setFieldValue('description', recipe.description || ''); form.setFieldValue('instructions', recipe.instructions || ''); form.setFieldValue('activities', recipe.activities || []); form.setFieldValue('parameters', recipe.parameters || []); if (recipe.response?.json_schema) { form.setFieldValue( 'jsonSchema', JSON.stringify(recipe.response.json_schema, null, 2) ); } } else { console.error('No recipe in response:', response); } setHasAnalyzed(true); }) .catch((error) => { console.error('Failed to analyze messages:', error); setAnalysisStage('Analysis failed'); }) .finally(() => { clearInterval(stageInterval); setHasAnalyzed(true); setTimeout(() => { setIsAnalyzing(false); setAnalysisStage(''); }, 500); // Brief delay to show completion }); } }, [isOpen, sessionId, hasAnalyzed, form, intl]); // Reset analysis state when modal closes useEffect(() => { if (!isOpen) { setHasAnalyzed(false); setIsAnalyzing(false); setAnalysisStage(''); } }, [isOpen]); // Subscribe to form changes using the form's subscribe method useEffect(() => { const unsubscribe = form.store.subscribe(() => { const hasTitle = form.state.values.title?.trim(); const hasDescription = form.state.values.description?.trim(); const hasInstructions = form.state.values.instructions?.trim(); const valid = !!(hasTitle && hasDescription && hasInstructions); setIsFormValid(valid); }); // Initial validation check const hasTitle = form.state.values.title?.trim(); const hasDescription = form.state.values.description?.trim(); const hasInstructions = form.state.values.instructions?.trim(); const valid = !!(hasTitle && hasDescription && hasInstructions); setIsFormValid(valid); return unsubscribe; }, [form]); const handleCreateRecipe = async (formData: RecipeFormData, runAfterSave = false) => { if (!isFormValid) { return; } setIsCreating(true); try { const formattedSubRecipes = formData.subRecipes.length > 0 ? formData.subRecipes.map((subRecipe) => ({ name: subRecipe.name, path: subRecipe.path, description: subRecipe.description || undefined, values: subRecipe.values && Object.keys(subRecipe.values).length > 0 ? subRecipe.values : undefined, sequential_when_repeated: subRecipe.sequential_when_repeated, })) : undefined; const recipe: Recipe = { title: formData.title, description: formData.description, instructions: formData.instructions, prompt: formData.prompt || undefined, activities: formData.activities.filter((activity) => activity.trim() !== ''), parameters: formData.parameters.map((param) => ({ key: param.key, input_type: param.input_type || 'string', requirement: param.requirement, description: param.description, ...(param.requirement === 'optional' && param.default ? { default: param.default } : {}), ...(param.input_type === 'select' && param.options ? { options: param.options.filter((opt: string) => opt.trim() !== ''), } : {}), })), response: formData.jsonSchema && formData.jsonSchema.trim() ? { json_schema: JSON.parse(formData.jsonSchema), } : undefined, sub_recipes: formattedSubRecipes, }; const { id: recipeId } = await saveRecipe(recipe, null); onRecipeCreated?.(recipe); onClose(); if (runAfterSave) { window.electron.createChatWindow({ recipeId }); } } catch (error) { console.error('Failed to create recipe:', error); toastError({ title: intl.formatMessage(i18n.failedToCreateTitle), msg: errorMessage( error, intl.formatMessage(i18n.failedToCreateDefaultMsg) ), }); } finally { setIsCreating(false); } }; if (!isOpen) return null; return (

{/* Header */}

{intl.formatMessage(i18n.title)}

{intl.formatMessage(i18n.subtitle)}

{/* Content */}

{isAnalyzing ? (

{intl.formatMessage(i18n.analyzingTitle)}

{analysisStage}

{intl.formatMessage(i18n.extractingInsights)}

) : (

)}

{/* Footer */}

{!isAnalyzing && ( <> )}

); }