111 lines
2.8 KiB
JavaScript
111 lines
2.8 KiB
JavaScript
import { useState, useEffect } from 'react';
|
|
import { useNavigate, useOutletContext } from 'react-router-dom';
|
|
import { agentApi } from '../utils/api';
|
|
import AgentForm from '../components/AgentForm';
|
|
|
|
function CreateAgent() {
|
|
const navigate = useNavigate();
|
|
const { showToast } = useOutletContext();
|
|
const [loading, setLoading] = useState(false);
|
|
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',
|
|
});
|
|
|
|
// Fetch metadata on component mount
|
|
useEffect(() => {
|
|
const fetchMetadata = async () => {
|
|
try {
|
|
// Fetch metadata from the dedicated endpoint
|
|
const response = await agentApi.getAgentConfigMetadata();
|
|
if (response) {
|
|
setMetadata(response);
|
|
}
|
|
} catch (error) {
|
|
console.error('Error fetching metadata:', error);
|
|
// Continue without metadata, the form will use default fields
|
|
}
|
|
};
|
|
|
|
fetchMetadata();
|
|
}, []);
|
|
|
|
// Handle form submission
|
|
const handleSubmit = async (e) => {
|
|
e.preventDefault();
|
|
|
|
if (!formData.name.trim()) {
|
|
showToast('Agent name is required', 'error');
|
|
return;
|
|
}
|
|
|
|
setLoading(true);
|
|
|
|
try {
|
|
const response = await agentApi.createAgent(formData);
|
|
showToast(`Agent "${formData.name}" created successfully`, 'success');
|
|
navigate(`/settings/${formData.name}`);
|
|
} catch (err) {
|
|
showToast(`Error creating agent: ${err.message}`, 'error');
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className="create-agent-container">
|
|
<header className="page-header">
|
|
<h1>
|
|
<i className="fas fa-plus-circle"></i> Create New Agent
|
|
</h1>
|
|
</header>
|
|
|
|
<div className="create-agent-content">
|
|
<div className="section-box">
|
|
<h2>
|
|
<i className="fas fa-robot"></i> Agent Configuration
|
|
</h2>
|
|
|
|
<AgentForm
|
|
formData={formData}
|
|
setFormData={setFormData}
|
|
onSubmit={handleSubmit}
|
|
loading={loading}
|
|
submitButtonText="Create Agent"
|
|
isEdit={false}
|
|
metadata={metadata}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default CreateAgent;
|