// settings.js - CLEAN VERSION WITH ALL PROMPT LOGIC REMOVED
(function () {
console.log("[settings] Loading Clean Settings interface...");
// --- Model Configuration ---
const MODEL_CONFIG = {
'grok-code-fast-1': { provider: 'xai', name: 'Grok Code Fast 1', icon: 'Robot', color: '#8b5cf6' },
'deepseek-chat': { provider: 'deepseek', name: 'DeepSeek Chat', icon: 'Brain', color: '#3b82f6' },
'deepseek-reasoner': { provider: 'deepseek', name: 'DeepSeek Reasoner',icon: 'Brain', color: '#3b82f6' },
'gpt-4o': { provider: 'openai', name: 'GPT-4o', icon: 'Star', color: '#10b981' },
'gpt-4o-mini': { provider: 'openai', name: 'GPT-4o Mini', icon: 'Star', color: '#10b981' },
'grok-3': { provider: 'xai', name: 'Grok 3', icon: 'Robot', color: '#8b5cf6' },
'claude-sonnet-4-5': { provider: 'anthropic', name: 'Claude Sonnet 4.5', icon: 'Feather', color: '#fbbf24' },
'claude-haiku-4-5': { provider: 'anthropic', name: 'Claude Haiku 4.5', icon: 'Zap', color: '#38bdf8' },
'claude-opus-4-1': { provider: 'anthropic', name: 'Claude Opus 4.1', icon: 'Crown', color: '#ef4444' }
};
const API_ENDPOINT = 'api.php';
// --- Load settings from localStorage ---
let settings = {
defaultModel: localStorage.getItem('settings_defaultModel') || 'grok-code-fast-1',
maxTokens: parseInt(localStorage.getItem('settings_maxTokens')) || 2000,
temperature: parseFloat(localStorage.getItem('settings_temperature')) || 0.7,
responseMode: localStorage.getItem('settings_responseMode') || 'normal',
currentMode: localStorage.getItem('settings_currentMode') || 'chat' // STILL NEEDED for mode switching
};
// --- Save settings to localStorage ---
function saveSettings() {
localStorage.setItem('settings_defaultModel', settings.defaultModel);
localStorage.setItem('settings_maxTokens', settings.maxTokens);
localStorage.setItem('settings_temperature', settings.temperature);
localStorage.setItem('settings_responseMode', settings.responseMode);
localStorage.setItem('settings_currentMode', settings.currentMode);
console.log('[settings] Settings saved:', settings);
window.dispatchEvent(new CustomEvent('settingsUpdated', { detail: settings }));
}
// --- Settings UI (cleaned: prompts removed) ---
const settingsSlide = {
title: 'Settings',
html: `
<div style="height: 100%; overflow-y: auto; padding: 20px; background: #0a0a0a;">
<h2 style="color: #fff; font-size: 24px; margin-bottom: 24px; font-weight: 700;">Settings</h2>
<!-- AI Configuration Section -->
<div style="background: #1a1a1a; border: 2px solid #2a2a2a; border-radius: 8px; padding: 20px; margin-bottom: 20px;">
<h3 style="color: #fff; font-size: 18px; margin-bottom: 16px; font-weight: 600;">AI Configuration</h3>
<label style="display: block; color: #888; font-size: 13px; font-weight: 600; margin-bottom: 8px;">Default AI Model:</label>
<select id="settingsDefaultModel" style="width: 100%; padding: 10px 12px; background: #2a2a2a; border: 1px solid #3a3a3a; border-radius: 4px; color: #e0e0e0;">
${Object.keys(MODEL_CONFIG)
.map(key => `<option value="${key}">${MODEL_CONFIG[key].name}</option>`)
.join("")}
</select>
<div style="margin-top: 20px;">
<label style="color: #888; font-size: 13px; font-weight: 600;">Max Tokens: <span id="maxTokensValue">${settings.maxTokens}</span></label>
<input type="range" id="settingsMaxTokens" min="500" max="8000" step="100" value="${settings.maxTokens}" style="width: 100%;">
</div>
<div style="margin-top: 20px;">
<label style="color: #888; font-size: 13px; font-weight: 600;">Temperature: <span id="temperatureValue">${settings.temperature.toFixed(1)}</span></label>
<input type="range" id="settingsTemperature" min="0" max="2" step="0.1" value="${settings.temperature}" style="width: 100%;">
</div>
<button id="saveSettingsBtn" style="margin-top: 20px; width: 100%; padding: 12px; background: #16a34a; border-radius: 4px; color: #fff;">Save</button>
</div>
<!-- System Mode -->
<div style="background: #1a1a1a; border: 2px solid #2a2a2a; border-radius: 8px; padding: 20px;">
<h3 style="color: #fff; font-size: 18px; margin-bottom: 16px; font-weight: 600;">AI Mode</h3>
<label style="color: #888; font-size: 13px; margin-bottom: 8px; display: block;">Active Mode:</label>
<select id="settingsCurrentMode" style="width: 100%; padding: 10px 12px; background: #2a2a2a; border: 1px solid #3a3a3a; border-radius: 4px; color: #e0e0e0;">
<option value="chat">Chat</option>
<option value="snippets">Snippets</option>
<option value="fullcode">Full Code</option>
<option value="edit">Edit</option>
<option value="document">Document</option>
<option value="architecture">Architecture</option>
<option value="scopes">Scope Mode</option>
</select>
<div style="margin-top: 10px; color: #666; font-size: 11px; background: rgba(139,92,246,0.1); border: 1px solid #8b5cf6; padding: 8px; border-radius: 4px;">
This determines which system prompt file chat.js loads.
</div>
</div>
</div>
`,
onRender(el) {
console.log('[settings] Rendering clean settings interface');
const defaultModelSelect = el.querySelector('#settingsDefaultModel');
const maxTokensSlider = el.querySelector('#settingsMaxTokens');
const maxTokensValue = el.querySelector('#maxTokensValue');
const temperatureSlider = el.querySelector('#settingsTemperature');
const temperatureValue = el.querySelector('#temperatureValue');
const currentMode = el.querySelector('#settingsCurrentMode');
const saveBtn = el.querySelector('#saveSettingsBtn');
defaultModelSelect.value = settings.defaultModel;
currentMode.value = settings.currentMode;
maxTokensSlider.addEventListener('input', () => {
maxTokensValue.textContent = maxTokensSlider.value;
});
temperatureSlider.addEventListener('input', () => {
temperatureValue.textContent = parseFloat(temperatureSlider.value).toFixed(1);
});
saveBtn.addEventListener('click', () => {
settings.defaultModel = defaultModelSelect.value;
settings.maxTokens = parseInt(maxTokensSlider.value);
settings.temperature = parseFloat(temperatureSlider.value);
settings.currentMode = currentMode.value;
saveSettings();
saveBtn.textContent = 'Saved!';
setTimeout(() => { saveBtn.textContent = 'Save'; }, 1500);
});
}
};
// Expose Settings API
window.Settings = {
open: () => {
if (window.AppOverlay) window.AppOverlay.open([settingsSlide]);
},
slide: settingsSlide,
get: () => ({ ...settings }),
getModelConfig: (modelKey) => MODEL_CONFIG[modelKey],
getAllModels: () => MODEL_CONFIG,
getApiEndpoint: () => API_ENDPOINT
};
console.log('[settings] Clean settings loaded:', settings);
})();