k

app.py

@@ -982,6 +982,26 @@ def style_css_asset():
 def app_js_asset():
     return send_from_directory(_CHATBOT_STATIC_DIR, 'app.js')
 
+@app.route('/config-ui.js')
+def config_ui_js_asset():
+    return send_from_directory(_CHATBOT_STATIC_DIR, 'config-ui.js')
+
+@app.route('/config.js')
+def config_js_asset():
+    return send_from_directory(_CHATBOT_STATIC_DIR, 'config.js')
+
+@app.route('/api.js')
+def api_js_asset():
+    return send_from_directory(_CHATBOT_STATIC_DIR, 'api.js')
+
+@app.route('/admin_advanced.js')
+def admin_advanced_js_asset():
+    return send_from_directory(_CHATBOT_STATIC_DIR, 'admin_advanced.js')
+
+@app.route('/professional_advanced.js')
+def professional_advanced_js_asset():
+    return send_from_directory(_CHATBOT_STATIC_DIR, 'professional_advanced.js')
+
 SYSTEM_PROMPT = """You are AIMHSA (AI Mental Health Support Assistant), a professional multilingual mental health chatbot specifically designed for Rwanda. You provide culturally-sensitive, evidence-based mental health support in four languages: English, French, Kiswahili, and Kinyarwanda.
 
 ## SCOPE BOUNDARIES - CRITICAL
@@ -1676,27 +1696,7 @@ Rappelez-vous: Vous êtes un système professionnel de soutien en santé mentale
 
 Amabwiriza y'ubuhanga:
 - Ube umuntu w'umutima mwiza, w'umutima mwiza, kandi w'umutima mwiza
-- Tanga amakuru yashyizweho ku bikoresho byo mu cyerekezo mugihe cyose
-- VUGURA BURI
-Amabwiriza y'ubuhanga:
-- Ube umuntu w'umutima mwiza, w'umutima mwiza, kandi w'umutima mwiza
-- Tanga amakuru yashyizweho ku bikoresho byo mu cyerekezo mugihe cyose
-- VUGURA BURI
-- Gardez les réponses professionnelles, concises mais utiles
-- Utilisez le contexte fourni pour donner des informations précises et pertinentes
-- Maintenez un ton naturel et conversationnel en français
-- Assurez des standards professionnels de soutien en santé mentale
-
-Rappelez-vous: Vous êtes un système professionnel de soutien en santé mentale conçu pour fournir une assistance immédiate et culturellement appropriée tout en connectant les utilisateurs aux soins professionnels quand nécessaire.""",
-
-        'rw': """Uri AIMHSA, umufasha w'ubuzima bw'ubwoba bw'u Rwanda w'ubuhanga.
-
-Amabwiriza y'ubuhanga:
-- Ube umuntu w'umutima mwiza, w'umutima mwiza, kandi w'umutima mwiza
-- Tanga amakuru yashyizweho ku bikoresho byo mu cyerekezo mugihe cyose
-- VUGURA BURI GIHE mu Kinyarwanda GUSA - NTUVUGE mu ndimi zindi
-- NTUBAZE cyangwa NTUBAZE imiti
-- Gushimangira ubuvuzi bw'ubuhanga mugihe cyose
+- Tanga amakuru yashyizweho ku bik
 - Ku bihano, tanga umutwe wa Ligne d'assistance en santé mentale y'u Rwanda: 105
 - Komeza amajwi make ariko akunze
 - Koresha icyerekezo cyatanzwe kugira ngo utange amakuru y'ukuri kandi yihariye

chatbot/api.js

@@ -0,0 +1,95 @@
+// AIMHSA API Helper
+window.AIMHSA = window.AIMHSA || {};
+
+// API helper class for making HTTP requests
+class AIMHSAAPI {
+    constructor() {
+        this.baseUrl = this.getApiBaseUrl();
+        this.defaultHeaders = {
+            'Content-Type': 'application/json'
+        };
+    }
+    
+    getApiBaseUrl() {
+        if (window.AIMHSA && window.AIMHSA.Config) {
+            return window.AIMHSA.Config.getApiBaseUrl();
+        }
+        // Fallback to auto-detection
+        return `${window.location.protocol}//${window.location.hostname}${window.location.port ? ':' + window.location.port : ''}`;
+    }
+    
+    async request(path, options = {}) {
+        const url = `${this.baseUrl}${path}`;
+        const config = {
+            method: 'GET',
+            headers: { ...this.defaultHeaders },
+            ...options
+        };
+        
+        // Add body if provided and method supports it
+        if (options.body && ['POST', 'PUT', 'PATCH'].includes(config.method)) {
+            config.body = typeof options.body === 'string' ? options.body : JSON.stringify(options.body);
+        }
+        
+        try {
+            const response = await fetch(url, config);
+            
+            if (!response.ok) {
+                throw new Error(`HTTP ${response.status}: ${response.statusText}`);
+            }
+            
+            const contentType = response.headers.get('content-type');
+            if (contentType && contentType.includes('application/json')) {
+                return await response.json();
+            }
+            
+            return await response.text();
+        } catch (error) {
+            console.error(`API request failed: ${config.method} ${url}`, error);
+            throw error;
+        }
+    }
+    
+    // Convenience methods
+    get(path, options = {}) {
+        return this.request(path, { ...options, method: 'GET' });
+    }
+    
+    post(path, body, options = {}) {
+        return this.request(path, { ...options, method: 'POST', body });
+    }
+    
+    put(path, body, options = {}) {
+        return this.request(path, { ...options, method: 'PUT', body });
+    }
+    
+    delete(path, options = {}) {
+        return this.request(path, { ...options, method: 'DELETE' });
+    }
+    
+    // Authentication helpers
+    setAuthToken(token) {
+        this.defaultHeaders['Authorization'] = `Bearer ${token}`;
+    }
+    
+    clearAuthToken() {
+        delete this.defaultHeaders['Authorization'];
+    }
+    
+    // Professional-specific helper
+    setProfessionalId(professionalId) {
+        this.defaultHeaders['X-Professional-ID'] = professionalId;
+    }
+    
+    clearProfessionalId() {
+        delete this.defaultHeaders['X-Professional-ID'];
+    }
+}
+
+// Initialize global API instance
+window.AIMHSA.API = new AIMHSAAPI();
+
+// Export for module systems if available
+if (typeof module !== 'undefined' && module.exports) {
+    module.exports = AIMHSAAPI;
+}

chatbot/config-ui.js

@@ -1,419 +1,201 @@
 /**
- * Configuration UI Management
+ * AIMHSA Configuration UI Management
  * Provides UI components for managing frontend configuration
  */
 
-(() => {
-    'use strict';
+window.AIMHSA = window.AIMHSA || {};
 
-    class ConfigUI {
-        constructor() {
-            this.config = window.AIMHSA?.Config;
-            this.init();
-        }
-
-        init() {
-            this.createConfigPanel();
-            this.bindEvents();
-            console.log('⚙️ Configuration UI initialized');
-        }
-
-        /**
-         * Create configuration panel
-         */
-        createConfigPanel() {
-            const configPanel = document.createElement('div');
-            configPanel.id = 'configPanel';
-            configPanel.className = 'config-panel';
-            configPanel.innerHTML = `
-                <div class="config-header">
-                    <h3><i class="fas fa-cog"></i> Configuration</h3>
-                    <button class="btn btn-sm btn-outline-secondary" id="toggleConfigPanel">
-                        <i class="fas fa-times"></i>
-                    </button>
-                </div>
-                <div class="config-content">
-                    <div class="config-section">
-                        <h4>API Configuration</h4>
-                        <div class="form-group">
-                            <label>API Base URL</label>
-                            <input type="url" id="apiBaseUrl" class="form-control" 
-                                   value="${this.config?.getApiBaseUrl() || ''}" 
-                                   placeholder="https://prodevroger-ishingiro.hf.space">
-                            <small class="form-text text-muted">
-                                Base URL for the backend API server
-                            </small>
-                        </div>
-                        <div class="form-group">
-                            <label>Environment</label>
-                            <select id="environment" class="form-control">
-                                <option value="development">Development</option>
-                                <option value="staging">Staging</option>
-                                <option value="production">Production</option>
-                            </select>
+// Configuration UI class for managing settings interface
+class AIMHSAConfigUI {
+    constructor() {
+        this.isInitialized = false;
+        this.settingsModal = null;
+    }
+    
+    init() {
+        if (this.isInitialized) return;
+        
+        this.createSettingsModal();
+        this.bindEvents();
+        this.isInitialized = true;
+    }
+    
+    createSettingsModal() {
+        // Create settings modal HTML
+        const modalHTML = `
+            <div id="aimhsa-settings-modal" class="modal fade" tabindex="-1" role="dialog">
+                <div class="modal-dialog" role="document">
+                    <div class="modal-content">
+                        <div class="modal-header">
+                            <h5 class="modal-title">AIMHSA Settings</h5>
+                            <button type="button" class="close" data-dismiss="modal">
+                                <span>&times;</span>
+                            </button>
                         </div>
-                        <button class="btn btn-primary btn-sm" id="testConnection">
-                            <i class="fas fa-plug"></i> Test Connection
-                        </button>
-                    </div>
-                    
-                    <div class="config-section">
-                        <h4>UI Configuration</h4>
-                        <div class="form-group">
-                            <label>Theme</label>
-                            <select id="theme" class="form-control">
-                                <option value="dark">Dark</option>
-                                <option value="light">Light</option>
-                            </select>
+                        <div class="modal-body">
+                            <form id="aimhsa-settings-form">
+                                <div class="form-group">
+                                    <label for="api-base-url">API Base URL</label>
+                                    <input type="url" class="form-control" id="api-base-url" 
+                                           placeholder="https://your-domain.com">
+                                    <small class="form-text text-muted">
+                                        Base URL for API requests. Leave empty for auto-detection.
+                                    </small>
+                                </div>
+                                
+                                <div class="form-group">
+                                    <label for="environment">Environment</label>
+                                    <select class="form-control" id="environment">
+                                        <option value="production">Production</option>
+                                        <option value="development">Development</option>
+                                        <option value="staging">Staging</option>
+                                    </select>
+                                </div>
+                                
+                                <div class="form-group">
+                                    <div class="custom-control custom-checkbox">
+                                        <input type="checkbox" class="custom-control-input" id="debug-mode">
+                                        <label class="custom-control-label" for="debug-mode">
+                                            Enable Debug Mode
+                                        </label>
+                                    </div>
+                                </div>
+                            </form>
                         </div>
-                        <div class="form-group">
-                            <label>Auto-refresh Interval (seconds)</label>
-                            <input type="number" id="autoRefresh" class="form-control" 
-                                   value="${this.config?.get('ui.autoRefreshInterval', 30000) / 1000}" 
-                                   min="5" max="300">
+                        <div class="modal-footer">
+                            <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
+                            <button type="button" class="btn btn-danger" id="reset-config">Reset to Defaults</button>
+                            <button type="button" class="btn btn-primary" id="save-config">Save Changes</button>
                         </div>
                     </div>
-                    
-                    <div class="config-actions">
-                        <button class="btn btn-success btn-sm" id="saveConfig">
-                            <i class="fas fa-save"></i> Save Configuration
-                        </button>
-                        <button class="btn btn-warning btn-sm" id="resetConfig">
-                            <i class="fas fa-undo"></i> Reset to Defaults
-                        </button>
-                    </div>
-                    
-                    <div class="config-info">
-                        <h4>Environment Information</h4>
-                        <pre id="envInfo"></pre>
-                    </div>
                 </div>
-            `;
-
-            // Add styles
-            const style = document.createElement('style');
-            style.textContent = `
-                .config-panel {
-                    position: fixed;
-                    top: 20px;
-                    right: -400px;
-                    width: 380px;
-                    height: calc(100vh - 40px);
-                    background: var(--surface, #1e293b);
-                    border: 1px solid var(--border, #334155);
-                    border-radius: 12px;
-                    box-shadow: 0 10px 25px rgba(0,0,0,0.3);
-                    z-index: 10000;
-                    transition: right 0.3s ease;
-                    overflow-y: auto;
-                }
-                
-                .config-panel.open {
-                    right: 20px;
-                }
-                
-                .config-header {
-                    display: flex;
-                    justify-content: space-between;
-                    align-items: center;
-                    padding: 1rem;
-                    border-bottom: 1px solid var(--border, #334155);
-                    background: var(--primary, #7c3aed);
-                    color: white;
-                    border-radius: 12px 12px 0 0;
-                }
-                
-                .config-header h3 {
-                    margin: 0;
-                    font-size: 1.1rem;
-                }
-                
-                .config-content {
-                    padding: 1rem;
-                }
-                
-                .config-section {
-                    margin-bottom: 1.5rem;
-                    padding-bottom: 1rem;
-                    border-bottom: 1px solid var(--border-light, #475569);
-                }
-                
-                .config-section:last-child {
-                    border-bottom: none;
-                }
-                
-                .config-section h4 {
-                    color: var(--text, #f8fafc);
-                    font-size: 1rem;
-                    margin-bottom: 1rem;
-                }
-                
-                .config-actions {
-                    display: flex;
-                    gap: 0.5rem;
-                    margin-bottom: 1rem;
-                }
-                
-                .config-info pre {
-                    background: var(--background, #0f172a);
-                    padding: 0.5rem;
-                    border-radius: 4px;
-                    font-size: 0.8rem;
-                    color: var(--text-secondary, #cbd5e1);
-                    border: 1px solid var(--border, #334155);
-                    max-height: 200px;
-                    overflow-y: auto;
-                }
-                
-                .config-toggle {
-                    position: fixed;
-                    top: 20px;
-                    right: 20px;
-                    z-index: 9999;
-                    background: var(--primary, #7c3aed);
-                    color: white;
-                    border: none;
-                    border-radius: 50%;
-                    width: 50px;
-                    height: 50px;
-                    display: flex;
-                    align-items: center;
-                    justify-content: center;
-                    font-size: 1.2rem;
-                    cursor: pointer;
-                    transition: all 0.3s ease;
-                    box-shadow: 0 4px 12px rgba(124, 58, 237, 0.3);
-                }
-                
-                .config-toggle:hover {
-                    background: var(--primary-dark, #5b21b6);
-                    transform: scale(1.1);
-                }
-            `;
-            
-            document.head.appendChild(style);
-            document.body.appendChild(configPanel);
-
-            // Create toggle button
-            const toggleBtn = document.createElement('button');
-            toggleBtn.id = 'configToggle';
-            toggleBtn.className = 'config-toggle';
-            toggleBtn.innerHTML = '<i class="fas fa-cog"></i>';
-            toggleBtn.title = 'Configuration Settings';
-            document.body.appendChild(toggleBtn);
-
-            this.updateEnvironmentInfo();
-        }
-
-        /**
-         * Bind event handlers
-         */
-        bindEvents() {
-            // Toggle panel
-            document.getElementById('configToggle').addEventListener('click', () => {
-                this.togglePanel();
-            });
-
-            document.getElementById('toggleConfigPanel').addEventListener('click', () => {
-                this.togglePanel();
-            });
-
-            // Save configuration
-            document.getElementById('saveConfig').addEventListener('click', () => {
-                this.saveConfiguration();
-            });
-
-            // Reset configuration
-            document.getElementById('resetConfig').addEventListener('click', () => {
-                this.resetConfiguration();
-            });
-
-            // Test connection
-            document.getElementById('testConnection').addEventListener('click', () => {
-                this.testConnection();
-            });
-
-            // Real-time updates
-            document.getElementById('apiBaseUrl').addEventListener('input', (e) => {
-                if (this.config) {
-                    this.config.setApiBaseUrl(e.target.value);
-                }
-            });
-
-            // Close panel on Escape key
-            document.addEventListener('keydown', (e) => {
-                if (e.key === 'Escape') {
-                    this.closePanel();
-                }
-            });
-        }
-
-        /**
-         * Toggle configuration panel
-         */
-        togglePanel() {
-            const panel = document.getElementById('configPanel');
-            panel.classList.toggle('open');
-            
-            if (panel.classList.contains('open')) {
-                this.loadCurrentSettings();
-                this.updateEnvironmentInfo();
-            }
-        }
-
-        /**
-         * Close configuration panel
-         */
-        closePanel() {
-            const panel = document.getElementById('configPanel');
-            panel.classList.remove('open');
+            </div>
+        `;
+        
+        // Append to body if not exists
+        if (!document.getElementById('aimhsa-settings-modal')) {
+            document.body.insertAdjacentHTML('beforeend', modalHTML);
         }
-
-        /**
-         * Load current settings into UI
-         */
-        loadCurrentSettings() {
-            if (!this.config) return;
-
-            document.getElementById('apiBaseUrl').value = this.config.getApiBaseUrl();
-            document.getElementById('environment').value = this.config.environment;
-            document.getElementById('theme').value = this.config.get('ui.theme', 'dark');
-            document.getElementById('autoRefresh').value = this.config.get('ui.autoRefreshInterval', 30000) / 1000;
+        
+        this.settingsModal = document.getElementById('aimhsa-settings-modal');
+    }
+    
+    bindEvents() {
+        // Save configuration
+        const saveBtn = document.getElementById('save-config');
+        if (saveBtn) {
+            saveBtn.addEventListener('click', () => this.saveConfiguration());
         }
-
-        /**
-         * Save configuration
-         */
-        saveConfiguration() {
-            if (!this.config) return;
-
-            const apiBaseUrl = document.getElementById('apiBaseUrl').value;
-            const environment = document.getElementById('environment').value;
-            const theme = document.getElementById('theme').value;
-            const autoRefresh = parseInt(document.getElementById('autoRefresh').value) * 1000;
-
-            // Update configuration
-            this.config.setApiBaseUrl(apiBaseUrl);
-            this.config.set('ui.theme', theme);
-            this.config.set('ui.autoRefreshInterval', autoRefresh);
-
-            // Show success message
-            this.showToast('Configuration saved successfully!', 'success');
-
-            // Optionally reload the page to apply changes
-            if (confirm('Configuration saved. Reload the page to apply changes?')) {
-                window.location.reload();
-            }
+        
+        // Reset configuration
+        const resetBtn = document.getElementById('reset-config');
+        if (resetBtn) {
+            resetBtn.addEventListener('click', () => this.resetConfiguration());
         }
-
-        /**
-         * Reset configuration to defaults
-         */
-        resetConfiguration() {
-            if (!this.config) return;
-
-            if (confirm('Are you sure you want to reset all configuration to defaults?')) {
-                this.config.reset();
-                this.loadCurrentSettings();
-                this.updateEnvironmentInfo();
-                this.showToast('Configuration reset to defaults', 'info');
-            }
+        
+        // Load configuration when modal opens
+        if (this.settingsModal) {
+            this.settingsModal.addEventListener('show.bs.modal', () => this.loadConfiguration());
         }
-
-        /**
-         * Test API connection
-         */
-        async testConnection() {
-            if (!this.config) return;
-
-            const button = document.getElementById('testConnection');
-            const originalText = button.innerHTML;
-            
-            button.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Testing...';
-            button.disabled = true;
-
-            try {
-                const isConnected = await this.config.validateApiConnection();
-                
-                if (isConnected) {
-                    this.showToast('API connection successful!', 'success');
-                } else {
-                    this.showToast('API connection failed', 'error');
-                }
-            } catch (error) {
-                this.showToast('Connection test failed: ' + error.message, 'error');
-            } finally {
-                button.innerHTML = originalText;
-                button.disabled = false;
-            }
+    }
+    
+    loadConfiguration() {
+        const config = window.AIMHSA.Config;
+        
+        // Populate form fields
+        const apiUrlField = document.getElementById('api-base-url');
+        const environmentField = document.getElementById('environment');
+        const debugModeField = document.getElementById('debug-mode');
+        
+        if (apiUrlField) apiUrlField.value = config.get('apiBaseUrl') || '';
+        if (environmentField) environmentField.value = config.get('environment') || 'production';
+        if (debugModeField) debugModeField.checked = config.get('debugMode') || false;
+    }
+    
+    saveConfiguration() {
+        const config = window.AIMHSA.Config;
+        
+        // Get form values
+        const apiUrl = document.getElementById('api-base-url')?.value?.trim();
+        const environment = document.getElementById('environment')?.value;
+        const debugMode = document.getElementById('debug-mode')?.checked;
+        
+        // Update configuration
+        if (apiUrl) config.set('apiBaseUrl', apiUrl);
+        config.set('environment', environment);
+        config.set('debugMode', debugMode);
+        
+        // Show success message
+        this.showNotification('Configuration saved successfully!', 'success');
+        
+        // Close modal
+        if (window.jQuery && window.jQuery.fn.modal) {
+            window.jQuery(this.settingsModal).modal('hide');
         }
-
-        /**
-         * Update environment information display
-         */
-        updateEnvironmentInfo() {
-            if (!this.config) return;
-
-            const envInfo = this.config.getEnvironmentInfo();
-            const formattedInfo = JSON.stringify(envInfo, null, 2);
-            document.getElementById('envInfo').textContent = formattedInfo;
+        
+        // Refresh page to apply changes
+        setTimeout(() => {
+            window.location.reload();
+        }, 1000);
+    }
+    
+    resetConfiguration() {
+        if (confirm('Are you sure you want to reset all settings to defaults?')) {
+            window.AIMHSA.Config.reset();
+            this.loadConfiguration();
+            this.showNotification('Configuration reset to defaults!', 'info');
         }
-
-        /**
-         * Show toast notification
-         */
-        showToast(message, type = 'info') {
-            // Use SweetAlert2 if available
-            if (typeof Swal !== 'undefined') {
-                Swal.fire({
-                    toast: true,
-                    position: 'top-end',
-                    showConfirmButton: false,
-                    timer: 3000,
-                    icon: type === 'error' ? 'error' : type === 'success' ? 'success' : 'info',
-                    title: message
-                });
-                return;
+    }
+    
+    showNotification(message, type = 'info') {
+        // Create notification element
+        const notification = document.createElement('div');
+        notification.className = `alert alert-${type} alert-dismissible fade show`;
+        notification.style.cssText = `
+            position: fixed;
+            top: 20px;
+            right: 20px;
+            z-index: 9999;
+            min-width: 300px;
+        `;
+        notification.innerHTML = `
+            ${message}
+            <button type="button" class="close" data-dismiss="alert">
+                <span>&times;</span>
+            </button>
+        `;
+        
+        document.body.appendChild(notification);
+        
+        // Auto-remove after 3 seconds
+        setTimeout(() => {
+            if (notification.parentNode) {
+                notification.parentNode.removeChild(notification);
             }
-
-            // Fallback to simple alert
-            const alertClass = type === 'error' ? 'alert-danger' : 
-                             type === 'success' ? 'alert-success' : 'alert-info';
-            
-            const toast = document.createElement('div');
-            toast.className = `alert ${alertClass} alert-dismissible fade show`;
-            toast.style.cssText = `
-                position: fixed;
-                top: 20px;
-                left: 50%;
-                transform: translateX(-50%);
-                z-index: 10001;
-                min-width: 300px;
-            `;
-            toast.innerHTML = `
-                ${message}
-                <button type="button" class="close" onclick="this.parentElement.remove()">
-                    <span>&times;</span>
-                </button>
-            `;
-            
-            document.body.appendChild(toast);
-            
-            setTimeout(() => {
-                if (toast.parentElement) {
-                    toast.remove();
-                }
-            }, 3000);
+        }, 3000);
+    }
+    
+    openSettings() {
+        if (!this.isInitialized) this.init();
+        
+        if (window.jQuery && window.jQuery.fn.modal) {
+            window.jQuery(this.settingsModal).modal('show');
+        } else {
+            // Fallback for non-Bootstrap environments
+            this.settingsModal.style.display = 'block';
         }
     }
+}
 
-    // Initialize when DOM is ready
-    if (document.readyState === 'loading') {
-        document.addEventListener('DOMContentLoaded', () => {
-            new ConfigUI();
-        });
-    } else {
-        new ConfigUI();
-    }
+// Initialize global configuration UI
+window.AIMHSA.ConfigUI = new AIMHSAConfigUI();
+
+// Auto-initialize when DOM is ready
+document.addEventListener('DOMContentLoaded', () => {
+    window.AIMHSA.ConfigUI.init();
+});
 
-})();
+// Export for module systems if available
+if (typeof module !== 'undefined' && module.exports) {
+    module.exports = AIMHSAConfigUI;
+}