116 lines
4.2 KiB
JavaScript
116 lines
4.2 KiB
JavaScript
# frontend/static/js/profile.js
|
|
// Profile editor modal
|
|
let editingProfile = null;
|
|
|
|
function showProfileEditor(profile = null) {
|
|
editingProfile = profile;
|
|
const modal = document.createElement('div');
|
|
modal.className = 'modal active';
|
|
|
|
modal.innerHTML = `
|
|
<div class="modal-content">
|
|
<h2>${profile ? 'Edit Profile' : 'New Profile'}</h2>
|
|
<form id="profileForm" onsubmit="saveProfile(event)">
|
|
<div class="form-group">
|
|
<label for="profileId">Profile ID</label>
|
|
<input type="text" id="profileId" name="id"
|
|
value="${profile?.id || ''}"
|
|
${profile?.id === 'default' ? 'readonly' : ''}
|
|
required pattern="[a-zA-Z0-9_-]+"
|
|
title="Only letters, numbers, underscore and dash allowed">
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="profileName">Name</label>
|
|
<input type="text" id="profileName" name="name"
|
|
value="${profile?.name || ''}" required>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="workDir">Work Directory</label>
|
|
<input type="text" id="workDir" name="work_dir"
|
|
value="${profile?.work_dir || ''}" required>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="llmModel">LLM Model</label>
|
|
<select id="llmModel" name="llm_model">
|
|
<option value="gpt-4" ${profile?.llm_settings?.model === 'gpt-4' ? 'selected' : ''}>GPT-4</option>
|
|
<option value="gpt-3.5-turbo" ${profile?.llm_settings?.model === 'gpt-3.5-turbo' ? 'selected' : ''}>GPT-3.5 Turbo</option>
|
|
</select>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="apiKey">API Key</label>
|
|
<input type="password" id="apiKey" name="api_key"
|
|
value="${profile?.llm_settings?.api_key || ''}">
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="temperature">Temperature</label>
|
|
<input type="number" id="temperature" name="temperature"
|
|
value="${profile?.llm_settings?.temperature || 0.7}"
|
|
min="0" max="2" step="0.1">
|
|
</div>
|
|
<div class="button-group">
|
|
<button type="button" onclick="closeProfileEditor()">Cancel</button>
|
|
<button type="submit">Save</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
`;
|
|
|
|
document.body.appendChild(modal);
|
|
}
|
|
|
|
function closeProfileEditor() {
|
|
const modal = document.querySelector('.modal');
|
|
if (modal) {
|
|
modal.remove();
|
|
}
|
|
editingProfile = null;
|
|
}
|
|
|
|
async function saveProfile(event) {
|
|
event.preventDefault();
|
|
const form = event.target;
|
|
const formData = new FormData(form);
|
|
|
|
const profileData = {
|
|
id: formData.get('id'),
|
|
name: formData.get('name'),
|
|
work_dir: formData.get('work_dir'),
|
|
llm_settings: {
|
|
model: formData.get('llm_model'),
|
|
api_key: formData.get('api_key'),
|
|
temperature: parseFloat(formData.get('temperature'))
|
|
}
|
|
};
|
|
|
|
try {
|
|
if (editingProfile) {
|
|
await apiRequest(`/profiles/${editingProfile.id}`, {
|
|
method: 'PUT',
|
|
body: JSON.stringify(profileData)
|
|
});
|
|
} else {
|
|
await apiRequest('/profiles', {
|
|
method: 'POST',
|
|
body: JSON.stringify(profileData)
|
|
});
|
|
}
|
|
|
|
await loadProfiles();
|
|
closeProfileEditor();
|
|
showSuccess(`Profile ${editingProfile ? 'updated' : 'created'} successfully`);
|
|
} catch (error) {
|
|
showError(`Failed to ${editingProfile ? 'update' : 'create'} profile`);
|
|
}
|
|
}
|
|
|
|
function editProfile() {
|
|
if (!currentProfile) {
|
|
showError('No profile selected');
|
|
return;
|
|
}
|
|
showProfileEditor(currentProfile);
|
|
}
|
|
|
|
function newProfile() {
|
|
showProfileEditor();
|
|
} |