114 lines
5.0 KiB
JavaScript
114 lines
5.0 KiB
JavaScript
// Filename: frontend/js/pages/chat/chatSettings.js
|
|
|
|
export class ChatSettings {
|
|
constructor(elements) {
|
|
// [MODIFIED] Store the root elements passed from ChatPage
|
|
this.elements = {};
|
|
this.elements.root = elements; // Keep a reference to all elements
|
|
|
|
// [MODIFIED] Query for specific elements this class controls, relative to their panels
|
|
this._initScopedDOMElements();
|
|
|
|
// Initialize panel states to ensure they are collapsed on load
|
|
this.elements.quickSettingsPanel.style.gridTemplateRows = '0fr';
|
|
this.elements.sessionParamsPanel.style.gridTemplateRows = '0fr';
|
|
}
|
|
|
|
// [NEW] A dedicated method to find elements within their specific panels
|
|
_initScopedDOMElements() {
|
|
this.elements.quickSettingsPanel = this.elements.root.quickSettingsPanel;
|
|
this.elements.sessionParamsPanel = this.elements.root.sessionParamsPanel;
|
|
this.elements.toggleQuickSettingsBtn = this.elements.root.toggleQuickSettingsBtn;
|
|
this.elements.toggleSessionParamsBtn = this.elements.root.toggleSessionParamsBtn;
|
|
|
|
// Query elements within the quick settings panel
|
|
this.elements.btnGroups = this.elements.quickSettingsPanel.querySelectorAll('.btn-group');
|
|
this.elements.directRoutingOptions = this.elements.quickSettingsPanel.querySelector('#direct-routing-options');
|
|
|
|
// Query elements within the session params panel
|
|
this.elements.temperatureSlider = this.elements.sessionParamsPanel.querySelector('#temperature-slider');
|
|
this.elements.temperatureValue = this.elements.sessionParamsPanel.querySelector('#temperature-value');
|
|
this.elements.contextSlider = this.elements.sessionParamsPanel.querySelector('#context-slider');
|
|
this.elements.contextValue = this.elements.sessionParamsPanel.querySelector('#context-value');
|
|
}
|
|
|
|
init() {
|
|
if (!this.elements.toggleQuickSettingsBtn) {
|
|
console.warn("ChatSettings: Aborting initialization, required elements not found.");
|
|
return;
|
|
}
|
|
this._initPanelToggleListeners();
|
|
this._initButtonGroupListeners();
|
|
this._initSliderListeners();
|
|
}
|
|
|
|
_initPanelToggleListeners() {
|
|
this.elements.toggleQuickSettingsBtn.addEventListener('click', () =>
|
|
this._togglePanel(this.elements.quickSettingsPanel, this.elements.toggleQuickSettingsBtn)
|
|
);
|
|
this.elements.toggleSessionParamsBtn.addEventListener('click', () =>
|
|
this._togglePanel(this.elements.sessionParamsPanel, this.elements.toggleSessionParamsBtn)
|
|
);
|
|
}
|
|
|
|
_initButtonGroupListeners() {
|
|
// [FIXED] This logic is now guaranteed to work with the correctly scoped elements.
|
|
this.elements.btnGroups.forEach(group => {
|
|
group.addEventListener('click', (e) => {
|
|
const button = e.target.closest('.btn-group-item');
|
|
if (!button) return;
|
|
|
|
group.querySelectorAll('.btn-group-item').forEach(btn => btn.removeAttribute('data-active'));
|
|
button.setAttribute('data-active', 'true');
|
|
|
|
if (button.dataset.group === 'routing-mode') {
|
|
this._handleRoutingModeChange(button.dataset.value);
|
|
}
|
|
});
|
|
});
|
|
}
|
|
|
|
_initSliderListeners() {
|
|
// [FIXED] Add null checks for robustness, now that elements are queried scoped.
|
|
if (this.elements.temperatureSlider) {
|
|
this.elements.temperatureSlider.addEventListener('input', () => {
|
|
this.elements.temperatureValue.textContent = parseFloat(this.elements.temperatureSlider.value).toFixed(1);
|
|
});
|
|
}
|
|
if (this.elements.contextSlider) {
|
|
this.elements.contextSlider.addEventListener('input', () => {
|
|
this.elements.contextValue.textContent = `${this.elements.contextSlider.value}k`;
|
|
});
|
|
}
|
|
}
|
|
|
|
_handleRoutingModeChange(selectedValue) {
|
|
// [FIXED] This logic now correctly targets the scoped element.
|
|
if (this.elements.directRoutingOptions) {
|
|
if (selectedValue === 'direct') {
|
|
this.elements.directRoutingOptions.classList.remove('hidden');
|
|
} else {
|
|
this.elements.directRoutingOptions.classList.add('hidden');
|
|
}
|
|
}
|
|
}
|
|
|
|
_togglePanel(panel, button) {
|
|
const isExpanded = panel.hasAttribute('data-expanded');
|
|
|
|
this.elements.quickSettingsPanel.removeAttribute('data-expanded');
|
|
this.elements.sessionParamsPanel.removeAttribute('data-expanded');
|
|
this.elements.toggleQuickSettingsBtn.removeAttribute('data-active');
|
|
this.elements.toggleSessionParamsBtn.removeAttribute('data-active');
|
|
|
|
this.elements.quickSettingsPanel.style.gridTemplateRows = '0fr';
|
|
this.elements.sessionParamsPanel.style.gridTemplateRows = '0fr';
|
|
|
|
if (!isExpanded) {
|
|
panel.setAttribute('data-expanded', 'true');
|
|
button.setAttribute('data-active', 'true');
|
|
panel.style.gridTemplateRows = '1fr';
|
|
}
|
|
}
|
|
}
|