feat(ui): Add dynamic prompt config

webui/react-ui/.vite/deps/_metadata.json

@@ -0,0 +1,8 @@
+{
+  "hash": "963a9163",
+  "configHash": "8fefd2cd",
+  "lockfileHash": "e3b0c442",
+  "browserHash": "748bcdc2",
+  "optimized": {},
+  "chunks": {}
+}

webui/react-ui/.vite/deps/package.json

@@ -0,0 +1,3 @@
+{
+  "type": "module"
+}

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>
   );
 };

webui/react-ui/src/pages/AgentSettings.jsx

@@ -9,35 +9,7 @@ function AgentSettings() {
   const { showToast } = useOutletContext();
   const navigate = useNavigate();
   const [metadata, setMetadata] = useState(null);
-  const [formData, setFormData] = useState({
-    name: '',
-    description: '',
-    identity_guidance: '',
-    random_identity: false,
-    hud: false,
-    model: '',
-    multimodal_model: '',
-    api_url: '',
-    api_key: '',
-    local_rag_url: '',
-    local_rag_api_key: '',
-    enable_reasoning: false,
-    enable_kb: false,
-    kb_results: 3,
-    long_term_memory: false,
-    summary_long_term_memory: false,
-    connectors: [],
-    actions: [],
-    mcp_servers: [],
-    system_prompt: '',
-    user_prompt: '',
-    goals: '',
-    standalone_job: false,
-    standalone_job_interval: 60,
-    avatar: '',
-    avatar_seed: '',
-    avatar_style: 'default',
-  });
+  const [formData, setFormData] = useState({});
   
   // Use our custom agent hook
   const { 

webui/react-ui/src/utils/api.js

@@ -70,17 +70,14 @@ export const agentApi = {
       // Pass through connectors and actions field groups directly
       // Make sure to assign the correct metadata to each section
       if (metadata.Connectors) {
-        console.log("Original Connectors metadata:", metadata.Connectors);
         groupedMetadata.connectors = metadata.Connectors;
       }
       
       if (metadata.Actions) {
-        console.log("Original Actions metadata:", metadata.Actions);
         groupedMetadata.actions = metadata.Actions;
       }
+      groupedMetadata.dynamicPrompts = metadata.DynamicPrompts;
 
-      console.log("Processed metadata:", groupedMetadata);
-      
       return groupedMetadata;
     }