Add parameter replacement to activities in ui (#4617)

ui/desktop/src/components/BaseChat.tsx

@@ -210,6 +210,7 @@ function BaseChatContent({
     isGeneratingRecipe,
     isParameterModalOpen,
     setIsParameterModalOpen,
+    recipeParameters,
     handleParameterSubmit,
     handleAutoExecution,
     recipeError,
@@ -388,6 +389,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) */

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<string, string>;
 }
 
-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 && (
           <div className="mb-4 p-3 rounded-lg border animate-[fadein_500ms_ease-in_forwards]">
             <MarkdownContent
-              content={messagePill.replace(/^message:/i, '').trim()}
+              content={substituteParameters(
+                messagePill.replace(/^message:/i, '').trim(),
+                parameterValues
+              )}
               className="text-sm"
             />
           </div>
         )}
 
         <div className="flex flex-wrap gap-2 animate-[fadein_500ms_ease-in_forwards]">
-          {remainingPills.map((content, index) => (
+          {remainingPills.map((content, index) => {
-            <Card
+            const substitutedContent = substituteParameters(content, parameterValues);
-              key={index}
+            return (
-              onClick={() => append(content)}
+              <Card
-              title={content.length > 60 ? content : undefined}
+                key={index}
-              className="cursor-pointer px-3 py-1.5 text-sm hover:bg-bgSubtle transition-colors"
+                onClick={() => append(substitutedContent)}
-            >
+                title={substitutedContent.length > 60 ? substitutedContent : undefined}
-              {content.length > 60 ? content.slice(0, 60) + '...' : content}
+                className="cursor-pointer px-3 py-1.5 text-sm hover:bg-bgSubtle transition-colors"
-            </Card>
+              >
-          ))}
+                {substitutedContent.length > 60
+                  ? substitutedContent.slice(0, 60) + '...'
+                  : substitutedContent}
+              </Card>
+            );
+          })}
         </div>
       </div>
     );