// settings.js - Settings management and overlay functionality
(function() {
'use strict';
// --- Bind settings elements (overlay content exists after open) ---
function bindSettingsElements() {
window.els.model = document.getElementById('model');
window.els.maxTokens = document.getElementById('maxTokens');
window.els.temperature = document.getElementById('temperature');
window.els.forceTemperature = document.getElementById('forceTemperature');
window.els.system = document.getElementById('system');
window.els.includeArtifacts = document.getElementById('includeArtifacts');
window.els.jsonFormat = document.getElementById('jsonFormat');
window.els.clearChat = document.getElementById('clearChat');
// Code style tabs and prompts
window.els.tabDefault = document.getElementById('tabDefault');
window.els.tabFullCode = document.getElementById('tabFullCode');
window.els.tabSnippets = document.getElementById('tabSnippets');
window.els.tabChunked = document.getElementById('tabChunked');
window.els.fullCodePrompt = document.getElementById('fullCodePrompt');
window.els.snippetsPrompt = document.getElementById('snippetsPrompt');
window.els.chunkedPrompt = document.getElementById('chunkedPrompt');
}
function hydrateSettingsUI() {
bindSettingsElements();
window.els.model.value = window.chatState.settings.model;
window.els.maxTokens.value = window.chatState.settings.maxTokens;
document.getElementById('maxTokensVal').textContent = window.chatState.settings.maxTokens;
window.els.temperature.value = window.chatState.settings.temperature;
document.getElementById('tempVal').textContent = window.chatState.settings.temperature;
window.els.forceTemperature.checked = !!window.chatState.settings.forceTemperature;
window.els.includeArtifacts.checked = !!window.chatState.settings.includeArtifacts;
window.els.jsonFormat.checked = !!window.chatState.settings.jsonFormat;
window.els.system.value = window.chatState.settings.system || '';
window.els.fullCodePrompt.value = window.chatState.settings.fullCodePrompt || '';
window.els.snippetsPrompt.value = window.chatState.settings.snippetsPrompt || '';
window.els.chunkedPrompt.value = window.chatState.settings.chunkedPrompt || '';
// Set active tab
setActiveTab(window.chatState.settings.codeStyle || 'default');
}
function setActiveTab(tabName) {
// Reset all tabs with mobile-friendly classes
const baseClasses = 'mobile-tab-btn px-3 py-2 text-xs sm:text-xs border-b sm:border-b-0 sm:border-r border-zinc-300 dark:border-zinc-700 last:border-b-0 last:border-r-0';
const inactiveClasses = baseClasses + ' bg-zinc-100 dark:bg-zinc-800 hover:bg-zinc-200 dark:hover:bg-zinc-700';
const activeClasses = baseClasses + ' bg-indigo-600 text-white';
document.getElementById('tabDefault').className = inactiveClasses;
document.getElementById('tabFullCode').className = inactiveClasses;
document.getElementById('tabSnippets').className = inactiveClasses;
document.getElementById('tabChunked').className = inactiveClasses;
// Hide all content
document.getElementById('promptDefault').classList.add('hidden');
document.getElementById('promptFullCode').classList.add('hidden');
document.getElementById('promptSnippets').classList.add('hidden');
document.getElementById('promptChunked').classList.add('hidden');
// Set active tab and show content
if (tabName === 'fullCode') {
document.getElementById('tabFullCode').className = activeClasses;
document.getElementById('promptFullCode').classList.remove('hidden');
} else if (tabName === 'snippets') {
document.getElementById('tabSnippets').className = activeClasses;
document.getElementById('promptSnippets').classList.remove('hidden');
} else if (tabName === 'chunked') {
document.getElementById('tabChunked').className = activeClasses;
document.getElementById('promptChunked').classList.remove('hidden');
} else {
document.getElementById('tabDefault').className = activeClasses;
document.getElementById('promptDefault').classList.remove('hidden');
}
window.chatState.settings.codeStyle = tabName;
window.saveState(window.chatState);
}
function wireSettingsHandlers() {
window.els.maxTokens.addEventListener('input', () => {
document.getElementById('maxTokensVal').textContent = window.els.maxTokens.value;
window.chatState.settings.maxTokens = parseInt(window.els.maxTokens.value, 10);
window.saveState(window.chatState);
});
window.els.temperature.addEventListener('input', () => {
document.getElementById('tempVal').textContent = window.els.temperature.value;
window.chatState.settings.temperature = parseFloat(window.els.temperature.value);
window.saveState(window.chatState);
});
window.els.forceTemperature.addEventListener('change', () => {
window.chatState.settings.forceTemperature = window.els.forceTemperature.checked;
window.saveState(window.chatState);
});
window.els.includeArtifacts.addEventListener('change', () => {
window.chatState.settings.includeArtifacts = window.els.includeArtifacts.checked;
window.saveState(window.chatState);
});
window.els.jsonFormat.addEventListener('change', () => {
window.chatState.settings.jsonFormat = window.els.jsonFormat.checked;
window.saveState(window.chatState);
});
window.els.model.addEventListener('change', () => {
window.chatState.settings.model = window.els.model.value;
window.saveState(window.chatState);
});
window.els.system.addEventListener('input', () => {
window.chatState.settings.system = window.els.system.value;
window.saveState(window.chatState);
});
window.els.fullCodePrompt.addEventListener('input', () => {
window.chatState.settings.fullCodePrompt = window.els.fullCodePrompt.value;
window.saveState(window.chatState);
});
window.els.snippetsPrompt.addEventListener('input', () => {
window.chatState.settings.snippetsPrompt = window.els.snippetsPrompt.value;
window.saveState(window.chatState);
});
window.els.chunkedPrompt.addEventListener('input', () => {
window.chatState.settings.chunkedPrompt = window.els.chunkedPrompt.value;
window.saveState(window.chatState);
});
// Tab handlers
window.els.tabDefault.addEventListener('click', () => setActiveTab('default'));
window.els.tabFullCode.addEventListener('click', () => setActiveTab('fullCode'));
window.els.tabSnippets.addEventListener('click', () => setActiveTab('snippets'));
window.els.tabChunked.addEventListener('click', () => setActiveTab('chunked'));
window.els.clearChat.addEventListener('click', () => {
window.chatState.messages = [];
window.saveState(window.chatState);
window.renderTranscript();
window.els.status.textContent = 'Cleared local transcript.';
setTimeout(() => window.els.status.textContent = '', 1500);
closeSettings();
});
}
// --- Overlay behavior ---
function openSettings() {
window.els.overlay.classList.remove('hidden');
hydrateSettingsUI();
wireSettingsHandlers();
setTimeout(() => { try { window.els.model.focus(); } catch {} }, 0);
}
function closeSettings() {
window.els.overlay.classList.add('hidden');
}
// Event listeners
window.els.openSettings.addEventListener('click', openSettings);
document.getElementById('closeSettings').addEventListener('click', closeSettings);
window.els.overlayBackdrop.addEventListener('click', closeSettings);
// Keyboard shortcuts
window.addEventListener('keydown', (e) => {
if (e.key === 'Escape') {
closeSettings();
}
});
// Make functions globally available for other modules
window.openSettings = openSettings;
window.closeSettings = closeSettings;
window.setActiveTab = setActiveTab;
})();