// Full updated RecipeCard.tsx import React, { useState } from "react"; import toast from "react-hot-toast"; import Link from "@docusaurus/Link"; export type Recipe = { id: string; title: string; description: string; extensions: string[]; activities: string[]; recipeUrl: string; action?: string; author?: { contact?: string; }; persona?: string; parameters?: { key: string; requirement: string; value?: string }[]; }; export function RecipeCard({ recipe }: { recipe: Recipe }) { const authorHandle = recipe.author?.contact || null; const [showParamPrompt, setShowParamPrompt] = useState(false); const [paramValues, setParamValues] = useState>({}); const requiredParams = recipe.parameters?.filter((p) => p.requirement === "required") || []; const optionalParams = recipe.parameters?.filter((p) => p.requirement !== "required") || []; const hasRequiredParams = requiredParams.length > 0; const handleCopyCLI = () => { if (hasRequiredParams) { setParamValues({}); setShowParamPrompt(true); return; } const command = `goose run --recipe documentation/src/pages/recipes/data/recipes/${recipe.id}.yaml`; navigator.clipboard.writeText(command); toast.success("CLI command copied!"); }; const handleSubmitParams = () => { const filledParams = Object.entries(paramValues) .map(([key, val]) => `${key}=${val}`) .join(" "); const command = `goose run --recipe documentation/src/pages/recipes/data/recipes/${recipe.id}.yaml --params ${filledParams}`; navigator.clipboard.writeText(command); setShowParamPrompt(false); toast.success("CLI command copied with params!"); }; return (

{recipe.title}

{recipe.description}

{recipe.extensions.map((extObj, index) => { const name = typeof extObj === 'string' ? extObj : extObj.name; const cleanedLabel = name?.replace(/MCP/i, "").trim(); return ( {cleanedLabel} ); })} {recipe.activities?.filter(a => !a.startsWith('message:')).length > 0 && (

{recipe.activities.filter(a => !a.startsWith('message:')).map((activity, index) => ( {activity} ))}

)}

e.stopPropagation()} > Launch in goose Desktop →

Copies the CLI command to run this recipe

{authorHandle && ( e.stopPropagation()} >

@{authorHandle} )}

{showParamPrompt && (

Fill in parameters

{[...requiredParams, ...optionalParams].map((param) => (

{param.key} {param.requirement !== "required" && (optional)} setParamValues((prev) => ({ ...prev, [param.key]: e.target.value })) } className="w-full px-3 py-2 border border-zinc-300 dark:border-zinc-600 rounded bg-white dark:bg-zinc-700 text-zinc-900 dark:text-white" />

))}

)}

); }