feat(ui): Add dynamic prompt config

webui/react-ui/src/components/AgentForm.jsx

@@ -94,9 +94,10 @@ const AgentForm = ({
   };
   
   const handleAddDynamicPrompt = () => {
+    console.log('Adding dynamic prompt');
     setFormData({
       ...formData,
-      connectors: [
+      dynamicPrompts: [
         ...(formData.dynamicPrompts || []),
         { type: '', config: '{}' }
       ]
@@ -108,7 +109,7 @@ const AgentForm = ({
     updatedDynamicPrompts.splice(index, 1);
     setFormData({
       ...formData,
-      DynamicPrompts: updatedDynamicPrompts,
+      dynamicPrompts: updatedDynamicPrompts,
     });
   };
   
@@ -266,7 +267,15 @@ const AgentForm = ({
             </div>
 
             <div style={{ display: activeSection === 'prompts-section' ? 'block' : 'none' }}>
-              <PromptsGoalsSection formData={formData} handleInputChange={handleInputChange} isGroupForm={isGroupForm} metadata={metadata} />
+              <PromptsGoalsSection 
+                formData={formData} 
+                handleInputChange={handleInputChange} 
+                isGroupForm={isGroupForm} 
+                metadata={metadata}
+                onAddPrompt={handleAddDynamicPrompt}
+                onRemovePrompt={handleRemoveDynamicPrompt}
+                handleDynamicPromptChange={handleDynamicPromptChange}
+              />
             </div>
 
             <div style={{ display: activeSection === 'advanced-section' ? 'block' : 'none' }}>
@@ -309,7 +318,15 @@ const AgentForm = ({
             </div>
 
             <div style={{ display: activeSection === 'prompts-section' ? 'block' : 'none' }}>
-              <PromptsGoalsSection formData={formData} handleInputChange={handleInputChange} isGroupForm={isGroupForm} metadata={metadata} />
+              <PromptsGoalsSection 
+                formData={formData} 
+                handleInputChange={handleInputChange} 
+                isGroupForm={isGroupForm} 
+                metadata={metadata}
+                onAddPrompt={handleAddDynamicPrompt}
+                onRemovePrompt={handleRemoveDynamicPrompt}
+                handleDynamicPromptChange={handleDynamicPromptChange}
+              />
             </div>
 
             <div style={{ display: activeSection === 'advanced-section' ? 'block' : 'none' }}>

webui/react-ui/src/components/agent-form-sections/PromptsGoalsSection.jsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import FormFieldDefinition from '../common/FormFieldDefinition';
 import DynamicPromptForm from '../DynamicPromptForm';
+import DynamicPromptForm from '../DynamicPromptForm';
 
 /**
  * Prompts & Goals section of the agent form
@@ -17,7 +18,8 @@ const PromptsGoalsSection = ({
   isGroupForm, 
   metadata,
   onAddPrompt,
-  onRemovePrompt
+  onRemovePrompt,
+  handleDynamicPromptChange
 }) => {
   // Get fields based on metadata and form context
   const getFields = () => {
@@ -66,10 +68,10 @@ const PromptsGoalsSection = ({
       />
 
       <DynamicPromptForm
-        prompts={formData.prompts || []}
+        prompts={formData.dynamicPrompts || []}
         onAddPrompt={onAddPrompt}
         onRemovePrompt={onRemovePrompt}
-        onChange={handleInputChange}
+        onChange={handleDynamicPromptChange}
         fieldGroups={metadata?.dynamicPrompts || []}
       />
     </div>