feat(ui): Add dynamic prompt config

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

@@ -71,6 +71,7 @@ const AgentForm = ({
     });
   };
 
+
   // Handle adding a connector
   const handleAddConnector = () => {
     setFormData({
@@ -91,6 +92,34 @@ const AgentForm = ({
       connectors: updatedConnectors
     });
   };
+  
+  const handleAddDynamicPrompt = () => {
+    setFormData({
+      ...formData,
+      connectors: [
+        ...(formData.dynamicPrompts || []),
+        { type: '', config: '{}' }
+      ]
+    });
+  };
+
+  const handleRemoveDynamicPrompt = (index) => {
+    const updatedDynamicPrompts = [...formData.dynamicPrompts];
+    updatedDynamicPrompts.splice(index, 1);
+    setFormData({
+      ...formData,
+      DynamicPrompts: updatedDynamicPrompts,
+    });
+  };
+  
+  const handleDynamicPromptChange = (index, updatedPrompt) => {
+    const updatedPrompts = [...formData.dynamicPrompts];
+    updatedPrompts[index] = updatedPrompt;
+    setFormData({
+      ...formData,
+      dynamicPrompts: updatedPrompts
+    });
+  };
 
   // Handle adding an MCP server
   const handleAddMCPServer = () => {

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

@@ -0,0 +1,30 @@
+import React from 'react';
+import ConfigForm from './ConfigForm';
+
+/**
+ * PromptForm component
+ * Renders prompt configuration forms based on field group metadata
+ */
+function PromptForm({ 
+  prompts = [], 
+  onAddPrompt, 
+  onRemovePrompt, 
+  onChange,
+  fieldGroups = []
+}) {
+  return (
+    <ConfigForm
+      items={prompts}
+      fieldGroups={fieldGroups}
+      onChange={onChange}
+      onRemove={onRemovePrompt}
+      onAdd={onAddPrompt}
+      itemType="dynamic_prompt"
+      typeField="type"
+      addButtonText="Add Dynamic Prompt"
+    />
+  );
+}
+
+export default PromptForm;
+

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

@@ -1,5 +1,6 @@
 import React from 'react';
 import FormFieldDefinition from '../common/FormFieldDefinition';
+import DynamicPromptForm from '../DynamicPromptForm';
 
 /**
  * Prompts & Goals section of the agent form
@@ -10,7 +11,14 @@ import FormFieldDefinition from '../common/FormFieldDefinition';
  * @param {boolean} props.isGroupForm Whether the form is for a group
  * @param {Object} props.metadata Field metadata from the backend
  */
-const PromptsGoalsSection = ({ formData, handleInputChange, isGroupForm, metadata }) => {
+const PromptsGoalsSection = ({ 
+  formData, 
+  handleInputChange, 
+  isGroupForm, 
+  metadata,
+  onAddPrompt,
+  onRemovePrompt
+}) => {
   // Get fields based on metadata and form context
   const getFields = () => {
     if (!metadata?.PromptsGoalsSection) {
@@ -56,6 +64,14 @@ const PromptsGoalsSection = ({ formData, handleInputChange, isGroupForm, metadat
         onChange={handleFieldChange}
         idPrefix="prompts_"
       />
+
+      <DynamicPromptForm
+        prompts={formData.prompts || []}
+        onAddPrompt={onAddPrompt}
+        onRemovePrompt={onRemovePrompt}
+        onChange={handleInputChange}
+        fieldGroups={metadata?.dynamicPrompts || []}
+      />
     </div>
   );
 };