Update: Basic Functions of chat.html 75% maybe

2025-11-28 00:08:25 +08:00
parent 166437c0ac
commit 0839ec35a2
17 changed files with 3962 additions and 785 deletions
--- a/frontend/js/pages/chat/chatSettings.js
+++ b/frontend/js/pages/chat/chatSettings.js
@@ -0,0 +1,113 @@
+// 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';
+        }
+    }
+}