diff --git a/ui/desktop/src/components/BaseChat.tsx b/ui/desktop/src/components/BaseChat.tsx index aace7068a8f0..2f9e31987f33 100644 --- a/ui/desktop/src/components/BaseChat.tsx +++ b/ui/desktop/src/components/BaseChat.tsx @@ -209,6 +209,7 @@ function BaseChatContent({ isGeneratingRecipe, isParameterModalOpen, setIsParameterModalOpen, + recipeParameters, handleParameterSubmit, handleAutoExecution, recipeError, @@ -387,6 +388,7 @@ function BaseChatContent({ Array.isArray(recipeConfig.activities) ? recipeConfig.activities : null } title={recipeConfig.title} + parameterValues={recipeParameters || {}} /> ) : showPopularTopics ? ( /* Show PopularChatTopics when no real messages, no recipe, and showPopularTopics is true (Pair view) */ diff --git a/ui/desktop/src/components/recipes/RecipeActivities.tsx b/ui/desktop/src/components/recipes/RecipeActivities.tsx index 22873ba132c9..0c8db3a6efb7 100644 --- a/ui/desktop/src/components/recipes/RecipeActivities.tsx +++ b/ui/desktop/src/components/recipes/RecipeActivities.tsx @@ -2,6 +2,7 @@ import { Card } from '../ui/card'; import { gsap } from 'gsap'; import GooseLogo from '../GooseLogo'; import MarkdownContent from '../MarkdownContent'; +import { substituteParameters } from '../../utils/providerUtils'; // Register GSAP plugins gsap.registerPlugin(); @@ -10,9 +11,14 @@ interface RecipeActivitiesProps { append: (text: string) => void; activities: string[] | null; title?: string; + parameterValues?: Record; } -export default function RecipeActivities({ append, activities }: RecipeActivitiesProps) { +export default function RecipeActivities({ + append, + activities, + parameterValues = {}, +}: RecipeActivitiesProps) { const pills = activities || []; // Find any pill that starts with "message:" @@ -37,23 +43,31 @@ export default function RecipeActivities({ append, activities }: RecipeActivitie {messagePill && (
)}
- {remainingPills.map((content, index) => ( - append(content)} - title={content.length > 60 ? content : undefined} - className="cursor-pointer px-3 py-1.5 text-sm hover:bg-bgSubtle transition-colors" - > - {content.length > 60 ? content.slice(0, 60) + '...' : content} - - ))} + {remainingPills.map((content, index) => { + const substitutedContent = substituteParameters(content, parameterValues); + return ( + append(substitutedContent)} + title={substitutedContent.length > 60 ? substitutedContent : undefined} + className="cursor-pointer px-3 py-1.5 text-sm hover:bg-bgSubtle transition-colors" + > + {substitutedContent.length > 60 + ? substitutedContent.slice(0, 60) + '...' + : substitutedContent} + + ); + })}
);