From 491354280b6284598802148f24a8ad15580388e7 Mon Sep 17 00:00:00 2001 From: Richard Palethorpe Date: Mon, 31 Mar 2025 15:35:50 +0100 Subject: [PATCH] feat(ui): Add dynamic prompt config --- webui/react-ui/.vite/deps/_metadata.json | 8 +++++ webui/react-ui/.vite/deps/package.json | 3 ++ webui/react-ui/src/components/AgentForm.jsx | 29 ++++++++++++++++++ .../src/components/DynamicPromptForm.jsx | 30 +++++++++++++++++++ .../PromptsGoalsSection.jsx | 18 ++++++++++- webui/react-ui/src/pages/AgentSettings.jsx | 30 +------------------ webui/react-ui/src/utils/api.js | 5 +--- 7 files changed, 89 insertions(+), 34 deletions(-) create mode 100644 webui/react-ui/.vite/deps/_metadata.json create mode 100644 webui/react-ui/.vite/deps/package.json create mode 100644 webui/react-ui/src/components/DynamicPromptForm.jsx diff --git a/webui/react-ui/.vite/deps/_metadata.json b/webui/react-ui/.vite/deps/_metadata.json new file mode 100644 index 0000000..9e4c07d --- /dev/null +++ b/webui/react-ui/.vite/deps/_metadata.json @@ -0,0 +1,8 @@ +{ + "hash": "963a9163", + "configHash": "8fefd2cd", + "lockfileHash": "e3b0c442", + "browserHash": "748bcdc2", + "optimized": {}, + "chunks": {} +} \ No newline at end of file diff --git a/webui/react-ui/.vite/deps/package.json b/webui/react-ui/.vite/deps/package.json new file mode 100644 index 0000000..3dbc1ca --- /dev/null +++ b/webui/react-ui/.vite/deps/package.json @@ -0,0 +1,3 @@ +{ + "type": "module" +} diff --git a/webui/react-ui/src/components/AgentForm.jsx b/webui/react-ui/src/components/AgentForm.jsx index ac9afcf..ddc224f 100644 --- a/webui/react-ui/src/components/AgentForm.jsx +++ b/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 = () => { diff --git a/webui/react-ui/src/components/DynamicPromptForm.jsx b/webui/react-ui/src/components/DynamicPromptForm.jsx new file mode 100644 index 0000000..60d6a60 --- /dev/null +++ b/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 ( + + ); +} + +export default PromptForm; + diff --git a/webui/react-ui/src/components/agent-form-sections/PromptsGoalsSection.jsx b/webui/react-ui/src/components/agent-form-sections/PromptsGoalsSection.jsx index 655c19f..0ef6d8e 100644 --- a/webui/react-ui/src/components/agent-form-sections/PromptsGoalsSection.jsx +++ b/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_" /> + + ); }; diff --git a/webui/react-ui/src/pages/AgentSettings.jsx b/webui/react-ui/src/pages/AgentSettings.jsx index 44364e9..59f2d17 100644 --- a/webui/react-ui/src/pages/AgentSettings.jsx +++ b/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 { diff --git a/webui/react-ui/src/utils/api.js b/webui/react-ui/src/utils/api.js index d2da357..efb3ebf 100644 --- a/webui/react-ui/src/utils/api.js +++ b/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; }