Readd submodules JS func to app.js since FastAPI cannot render modules script type. Refactored all js in wrapped section

static/js/app.js

@@ -1,10 +1,12 @@
 // Medical AI Assistant - Main Application JavaScript
-import { attachUIHandlers } from './ui/handlers.js';
-import { attachDoctorUI } from './ui/doctor.js';
-import { attachPatientUI } from './ui/patient.js';
-import { attachSettingsUI } from './ui/settings.js';
-import { attachSessionsUI } from './chat/sessions.js';
-import { attachMessagingUI } from './chat/messaging.js';
+
+// TEMPORARILY DISABLED SUBMODULES
+// import { attachUIHandlers } from './ui/handlers.js';
+// import { attachDoctorUI } from './ui/doctor.js';
+// import { attachPatientUI } from './ui/patient.js';
+// import { attachSettingsUI } from './ui/settings.js';
+// import { attachSessionsUI } from './chat/sessions.js';
+// import { attachMessagingUI } from './chat/messaging.js';
 
 class MedicalChatbotApp {
     constructor() {
@@ -20,14 +22,14 @@ class MedicalChatbotApp {
     }
 
     async init() {
-        // Attach shared UI helpers once
-        attachUIHandlers(this);
-        // Attach specialized UIs
-        attachDoctorUI(this);
-        attachPatientUI(this);
-        attachSettingsUI(this);
-        attachSessionsUI(this);
-        attachMessagingUI(this);
+        // // TEMPORARILY DISABLED SUBMODULES ATTACHMENT
+        // attachUIHandlers(this);
+        // // Attach specialized UIs
+        // attachDoctorUI(this);
+        // attachPatientUI(this);
+        // attachSettingsUI(this);
+        // attachSessionsUI(this);
+        // attachMessagingUI(this);
         this.setupEventListeners();
         this.loadUserPreferences();
         this.initializeUser();
@@ -45,6 +47,7 @@ class MedicalChatbotApp {
         // Bind patient handlers
         console.log('[DEBUG] Binding patient handlers');
         this.bindPatientHandlers();
+        this.setupPatientModal();
         // Apply saved theme immediately
         const prefs = JSON.parse(localStorage.getItem('medicalChatbotPreferences') || '{}');
         this.setTheme(prefs.theme || 'auto');
@@ -313,17 +316,13 @@ class MedicalChatbotApp {
 
     getWelcomeMessage() {
         return `👋 Welcome to Medical AI Assistant
-
 I'm here to help you with medical questions, diagnosis assistance, and healthcare information. I can:
-
 🔍 Answer medical questions and provide information
 📋 Help with symptom analysis and differential diagnosis
 💊 Provide medication and treatment information
 📚 Explain medical procedures and conditions
 ⚠️ Offer general health advice (not medical diagnosis)
-
 **Important:** This is for informational purposes only. Always consult with qualified healthcare professionals for medical advice.
-
 How can I assist you today?`;
     }
 
@@ -332,15 +331,6 @@ How can I assist you today?`;
         chatMessages.innerHTML = '';
     }
 
-    updateChatTitle() {
-        const titleElement = document.getElementById('chatTitle');
-        if (this.currentSession) {
-            titleElement.textContent = this.currentSession.title;
-        } else {
-            titleElement.textContent = 'Medical AI Assistant';
-        }
-    }
-
     showModal(modalId) {
         console.log('[DEBUG] showModal called with ID:', modalId);
         const modal = document.getElementById(modalId);
@@ -352,27 +342,6 @@ How can I assist you today?`;
         }
     }
 
-    hideModal(modalId) {
-        console.log('[DEBUG] hideModal called with ID:', modalId);
-        const modal = document.getElementById(modalId);
-        if (modal) {
-            modal.classList.remove('show');
-            console.log('[DEBUG] Modal hidden:', modalId);
-        } else {
-            console.error('[DEBUG] Modal not found:', modalId);
-        }
-    }
-
-    showUserModal() {
-        console.log('[DEBUG] showUserModal called');
-        this.showModal('userModal');
-    }
-
-    showSettingsModal() {
-        console.log('[DEBUG] showSettingsModal called');
-        this.showModal('settingsModal');
-    }
-
     saveSettings() {
         const theme = document.getElementById('themeSelect').value;
         const fontSize = document.getElementById('fontSize').value;
@@ -409,16 +378,107 @@ How can I assist you today?`;
         return Date.now().toString(36) + Math.random().toString(36).substr(2);
     }
 
+
+
 // ----------------------------------------------------------
 // Additional UI setup START
-// Including session.js and settings.js from ui/ and chat/
 // -----------------------------
 // Our submodules aren't lodaed on app.js, so we need to add them here
 // Perhaps this is FastAPI limitation, remove this when proper deploy this
 // On UI specific hosting site.
 // ----------------------------------------------------------  
 
-    // Additional methods that are called by the modules
+
+    // ================================================================================
+    // HANDLERS.JS FUNCTIONALITY
+    // ================================================================================
+    toggleSidebar() {
+        const sidebar = document.getElementById('sidebar');
+        console.log('[DEBUG] toggleSidebar called');
+        if (sidebar) {
+            const wasOpen = sidebar.classList.contains('show');
+            sidebar.classList.toggle('show');
+            const isNowOpen = sidebar.classList.contains('show');
+            console.log('[DEBUG] Sidebar toggled - was open:', wasOpen, 'now open:', isNowOpen);
+            } else {
+            console.error('[DEBUG] Sidebar element not found');
+        }
+    }
+
+    autoResizeTextarea(textarea) {
+        if (!textarea) return;
+        textarea.style.height = 'auto';
+        textarea.style.height = Math.min(textarea.scrollHeight, 120) + 'px';
+    }
+
+    exportChat() {
+        if (!this.currentSession || this.currentSession.messages.length === 0) {
+            alert('No chat to export.');
+            return;
+        }
+        const chatData = {
+            user: this.currentUser?.name || 'Unknown',
+            session: this.currentSession.title,
+            date: new Date().toISOString(),
+            messages: this.currentSession.messages
+        };
+        const blob = new Blob([JSON.stringify(chatData, null, 2)], { type: 'application/json' });
+        const url = URL.createObjectURL(blob);
+        const a = document.createElement('a');
+        a.href = url;
+        a.download = `medical-chat-${this.currentSession.title.replace(/[^a-z0-9]/gi, '-')}.json`;
+        document.body.appendChild(a);
+        a.click();
+        document.body.removeChild(a);
+        URL.revokeObjectURL(url);
+    }
+
+    clearChat() {
+        if (confirm('Are you sure you want to clear this chat? This action cannot be undone.')) {
+            this.clearChatMessages();
+            if (this.currentSession) {
+                this.currentSession.messages = [];
+                this.currentSession.title = 'New Chat';
+                this.updateChatTitle();
+            }
+        }
+    }
+
+    hideModal(modalId) {
+        console.log('[DEBUG] hideModal called with ID:', modalId);
+        const modal = document.getElementById(modalId);
+        if (modal) {
+            modal.classList.remove('show');
+            console.log('[DEBUG] Modal hidden:', modalId);
+            } else {
+            console.error('[DEBUG] Modal not found:', modalId);
+        }
+    }
+
+    showUserModal() {
+        this.populateDoctorSelect();
+        const sel = document.getElementById('profileNameSelect');
+        if (sel && sel.options.length === 0) {
+            const createOpt = document.createElement('option');
+            createOpt.value = '__create__';
+            createOpt.textContent = 'Create doctor user...';
+            sel.appendChild(createOpt);
+        }
+        if (sel && !sel.value) sel.value = this.currentUser?.name || '__create__';
+        document.getElementById('profileRole').value = this.currentUser.role;
+        document.getElementById('profileSpecialty').value = this.currentUser.specialty || '';
+        this.showModal('userModal');
+    }
+
+    showSettingsModal() {
+        console.log('[DEBUG] showSettingsModal called');
+        this.showModal('settingsModal');
+    }
+    
+
+    // ================================================================================
+    // SETTINGS.JS FUNCTIONALITY
+    // ================================================================================
     loadUserPreferences() {
         const prefs = JSON.parse(localStorage.getItem('medicalChatbotPreferences') || '{}');
         if (prefs.theme) this.setTheme(prefs.theme);
@@ -461,139 +521,180 @@ How can I assist you today?`;
         localStorage.setItem('medicalChatbotPreferences', JSON.stringify(preferences));
     }
 
+    showLoading(show) {
+        const overlay = document.getElementById('loadingOverlay');
+        if (overlay) {
+            if (show) {
+                overlay.classList.add('show');
+            } else {
+                overlay.classList.remove('show');
+            }
+        }
+        this.isLoading = show;
+    }
+
+
+    // ================================================================================
+    // SESSIONS.JS FUNCTIONALITY
+    // ================================================================================
     getChatSessions() {
-        const sessions = localStorage.getItem('medicalChatbotSessions');
+        const sessions = localStorage.getItem(`chatSessions_${this.currentUser.id}`);
         return sessions ? JSON.parse(sessions) : [];
     }
 
     saveCurrentSession() {
         if (!this.currentSession) return;
+        if (this.currentSession.source === 'backend') return; // do not persist backend sessions locally here
         const sessions = this.getChatSessions();
         const existingIndex = sessions.findIndex(s => s.id === this.currentSession.id);
         if (existingIndex >= 0) {
-            sessions[existingIndex] = this.currentSession;
+            sessions[existingIndex] = { ...this.currentSession };
         } else {
             sessions.unshift(this.currentSession);
         }
-        localStorage.setItem('medicalChatbotSessions', JSON.stringify(sessions));
+        localStorage.setItem(`chatSessions_${this.currentUser.id}`, JSON.stringify(sessions));
     }
 
     loadChatSessions() {
         const sessionsContainer = document.getElementById('chatSessions');
-        if (!sessionsContainer) return;
-
-        // Combine backend and local sessions
-        const allSessions = [...this.backendSessions, ...this.getChatSessions()];
-        
-        // Remove duplicates and sort by last activity
-        const uniqueSessions = allSessions.reduce((acc, session) => {
-            const existing = acc.find(s => s.id === session.id);
-            if (!existing) {
-                acc.push(session);
-            } else if (session.lastActivity > existing.lastActivity) {
-                const index = acc.indexOf(existing);
-                acc[index] = session;
-            }
-            return acc;
-        }, []);
-
-        uniqueSessions.sort((a, b) => new Date(b.lastActivity) - new Date(a.lastActivity));
-
         sessionsContainer.innerHTML = '';
-        uniqueSessions.forEach(session => {
+        const sessions = (this.backendSessions && this.backendSessions.length > 0) ? this.backendSessions : this.getChatSessions();
+        if (sessions.length === 0) {
+            sessionsContainer.innerHTML = '<div class="no-sessions">No chat sessions yet</div>';
+            return;
+        }
+        sessions.forEach(session => {
             const sessionElement = document.createElement('div');
-            sessionElement.className = 'chat-session';
-            if (this.currentSession && this.currentSession.id === session.id) {
-                sessionElement.classList.add('active');
-            }
-            
-            const timeAgo = this.formatTime(session.lastActivity);
+            sessionElement.className = `chat-session ${session.id === this.currentSession?.id ? 'active' : ''}`;
+            sessionElement.addEventListener('click', async () => {
+                if (session.source === 'backend') {
+                    this.currentSession = { ...session };
+                    await this.hydrateMessagesForSession(session.id);
+                } else {
+                    this.loadChatSession(session.id);
+                }
+            });
+            const time = this.formatTime(session.lastActivity);
             sessionElement.innerHTML = `
                 <div class="chat-session-row">
                     <div class="chat-session-meta">
                         <div class="chat-session-title">${session.title}</div>
-                        <div class="chat-session-time">${timeAgo}</div>
+                        <div class="chat-session-time">${time}</div>
                     </div>
                     <div class="chat-session-actions">
-                        <button class="chat-session-menu" onclick="event.stopPropagation(); this.nextElementSibling.classList.toggle('show')">
-                            <i class="fas fa-ellipsis-v"></i>
+                        <button class="chat-session-menu" title="Options" aria-label="Options" data-session-id="${session.id}">
+                            <i class="fas fa-ellipsis-vertical"></i>
                         </button>
-                        <div class="chat-session-menu-popover">
-                            <div class="chat-session-menu-item" onclick="window.medicalChatbot.renameChatSession('${session.id}')">
-                                <i class="fas fa-edit"></i> Rename
-                            </div>
-                            <div class="chat-session-menu-item" onclick="window.medicalChatbot.deleteChatSession('${session.id}')">
-                                <i class="fas fa-trash"></i> Delete
-                            </div>
-                        </div>
                     </div>
                 </div>
             `;
-            
-            sessionElement.addEventListener('click', () => {
-                this.loadChatSession(session.id);
-            });
-            
             sessionsContainer.appendChild(sessionElement);
+            const menuBtn = sessionElement.querySelector('.chat-session-menu');
+            if (session.source !== 'backend') {
+                menuBtn.addEventListener('click', (e) => {
+                    e.stopPropagation();
+                    this.showSessionMenu(e.currentTarget, session.id);
+                });
+            } else {
+                menuBtn.disabled = true;
+                menuBtn.style.opacity = 0.5;
+                menuBtn.title = 'Options available for local sessions only';
+            }
         });
     }
 
+    updateChatTitle() {
+        const titleElement = document.getElementById('chatTitle');
+        if (this.currentSession) {
+            titleElement.textContent = this.currentSession.title;
+        } else {
+            titleElement.textContent = 'Medical AI Assistant';
+        }
+    }
+
     loadChatSession(sessionId) {
-        const allSessions = [...this.backendSessions, ...this.getChatSessions()];
-        const session = allSessions.find(s => s.id === sessionId);
+        const sessions = this.getChatSessions();
+        const session = sessions.find(s => s.id === sessionId);
         if (!session) return;
-
         this.currentSession = session;
         this.clearChatMessages();
-        
-        if (session.source === 'backend') {
-            this.hydrateMessagesForSession(sessionId);
-        } else {
-            session.messages.forEach(m => this.displayMessage(m));
-        }
-        
+        session.messages.forEach(message => this.displayMessage(message));
         this.updateChatTitle();
         this.loadChatSessions();
     }
 
     renameChatSession(sessionId, newTitle) {
-        const allSessions = [...this.backendSessions, ...this.getChatSessions()];
-        const session = allSessions.find(s => s.id === sessionId);
-        if (session) {
-            session.title = newTitle;
-            if (session.source === 'backend') {
-                // Update backend session
-                this.updateBackendSession(sessionId, { title: newTitle });
-            } else {
-                // Update local session
-                this.saveCurrentSession();
-            }
-            this.loadChatSessions();
+        const sessions = this.getChatSessions();
+        const idx = sessions.findIndex(s => s.id === sessionId);
+        if (idx === -1) return;
+        sessions[idx] = { ...sessions[idx], title: newTitle };
+        localStorage.setItem(`chatSessions_${this.currentUser.id}`, JSON.stringify(sessions));
+        if (this.currentSession && this.currentSession.id === sessionId) {
+            this.currentSession.title = newTitle;
             this.updateChatTitle();
         }
+        this.loadChatSessions();
     }
 
     deleteChatSession(sessionId) {
-        if (confirm('Are you sure you want to delete this chat session?')) {
-            const allSessions = [...this.backendSessions, ...this.getChatSessions()];
-            const session = allSessions.find(s => s.id === sessionId);
-            
-            if (session && session.source === 'backend') {
-                // Delete from backend
-                this.deleteBackendSession(sessionId);
-            } else {
-                // Delete from local storage
-                const sessions = this.getChatSessions();
-                const filtered = sessions.filter(s => s.id !== sessionId);
-                localStorage.setItem('medicalChatbotSessions', JSON.stringify(filtered));
-            }
-            
-            if (this.currentSession && this.currentSession.id === sessionId) {
-                this.startNewChat();
+        const sessions = this.getChatSessions();
+        const index = sessions.findIndex(s => s.id === sessionId);
+        if (index === -1) return;
+        const confirmDelete = confirm('Delete this chat session? This cannot be undone.');
+        if (!confirmDelete) return;
+        sessions.splice(index, 1);
+        localStorage.setItem(`chatSessions_${this.currentUser.id}`, JSON.stringify(sessions));
+        if (this.currentSession && this.currentSession.id === sessionId) {
+            if (sessions.length > 0) {
+                this.currentSession = sessions[0];
+                this.clearChatMessages();
+                this.currentSession.messages.forEach(m => this.displayMessage(m));
+                this.updateChatTitle();
             } else {
-                this.loadChatSessions();
+                this.currentSession = null;
+                this.clearChatMessages();
+                this.updateChatTitle();
             }
         }
+        this.loadChatSessions();
+    }
+
+    showSessionMenu(anchorEl, sessionId) {
+        // Remove existing popover
+        document.querySelectorAll('.chat-session-menu-popover').forEach(p => p.remove());
+        const rect = anchorEl.getBoundingClientRect();
+        const pop = document.createElement('div');
+        pop.className = 'chat-session-menu-popover show';
+        pop.innerHTML = `
+            <div class="chat-session-menu-item" data-action="edit" data-session-id="${sessionId}"><i class="fas fa-pen"></i> Edit Name</div>
+            <div class="chat-session-menu-item" data-action="delete" data-session-id="${sessionId}"><i class="fas fa-trash"></i> Delete</div>
+        `;
+        document.body.appendChild(pop);
+        pop.style.top = `${rect.bottom + window.scrollY + 6}px`;
+        pop.style.left = `${rect.right + window.scrollX - pop.offsetWidth}px`;
+        const onDocClick = (ev) => {
+            if (!pop.contains(ev.target) && ev.target !== anchorEl) {
+                pop.remove();
+                document.removeEventListener('click', onDocClick);
+            }
+        };
+        setTimeout(() => document.addEventListener('click', onDocClick), 0);
+        pop.querySelectorAll('.chat-session-menu-item').forEach(item => {
+            item.addEventListener('click', (e) => {
+                const action = item.getAttribute('data-action');
+                const id = item.getAttribute('data-session-id');
+                if (action === 'delete') this.deleteChatSession(id);
+                else if (action === 'edit') {
+                    this._pendingEditSessionId = id;
+                    const sessions = this.getChatSessions();
+                    const s = sessions.find(x => x.id === id);
+                    const input = document.getElementById('editSessionTitleInput');
+                    if (input) input.value = s ? s.title : '';
+                    this.showModal('editTitleModal');
+                }
+                pop.remove();
+            });
+        });
     }
 
     updateBackendSession(sessionId, updates) {
@@ -606,36 +707,508 @@ How can I assist you today?`;
         console.log('Deleting backend session:', sessionId);
     }
 
-    showLoading(show) {
-        const overlay = document.getElementById('loadingOverlay');
-        if (overlay) {
-            if (show) {
-                overlay.classList.add('show');
+    updateCurrentSession() {
+        if (this.currentSession) {
+            this.currentSession.lastActivity = new Date().toISOString();
+            this.saveCurrentSession();
+        }
+    }
+
+
+    // ================================================================================
+    // DOCTOR.JS FUNCTIONALITY
+    // ================================================================================
+    loadDoctors() {
+        try {
+            const raw = localStorage.getItem('medicalChatbotDoctors');
+            const arr = raw ? JSON.parse(raw) : [];
+            const seen = new Set();
+            return arr.filter(x => x && x.name && !seen.has(x.name) && seen.add(x.name));
+        } catch { return []; }
+    }
+
+    saveDoctors() {
+        localStorage.setItem('medicalChatbotDoctors', JSON.stringify(this.doctors));
+    }
+
+    populateDoctorSelect() {
+        const sel = document.getElementById('profileNameSelect');
+        const newSec = document.getElementById('newDoctorSection');
+        if (!sel) return;
+        sel.innerHTML = '';
+        const createOpt = document.createElement('option');
+        createOpt.value = '__create__';
+        createOpt.textContent = 'Create doctor user...';
+        sel.appendChild(createOpt);
+        // Ensure no duplicates, include current doctor
+        const names = new Set(this.doctors.map(d => d.name));
+        if (this.currentUser?.name && !names.has(this.currentUser.name)) {
+            this.doctors.unshift({ name: this.currentUser.name });
+            names.add(this.currentUser.name);
+            this.saveDoctors();
+        }
+        this.doctors.forEach(d => {
+            const opt = document.createElement('option');
+            opt.value = d.name;
+            opt.textContent = d.name;
+            if (this.currentUser?.name === d.name) opt.selected = true;
+            sel.appendChild(opt);
+        });
+        sel.addEventListener('change', () => {
+            if (sel.value === '__create__') {
+                newSec.style.display = '';
+                const input = document.getElementById('newDoctorName');
+                if (input) input.value = '';
             } else {
-                overlay.classList.remove('show');
+                newSec.style.display = 'none';
+            }
+        });
+        const cancelBtn = document.getElementById('cancelNewDoctor');
+        const confirmBtn = document.getElementById('confirmNewDoctor');
+        if (cancelBtn) cancelBtn.onclick = () => { newSec.style.display = 'none'; sel.value = this.currentUser?.name || ''; };
+        if (confirmBtn) confirmBtn.onclick = () => {
+            const name = (document.getElementById('newDoctorName').value || '').trim();
+            if (!name) return;
+            if (!this.doctors.find(d => d.name === name)) {
+                this.doctors.unshift({ name });
+                this.saveDoctors();
+            }
+            this.populateDoctorSelect();
+            sel.value = name;
+            newSec.style.display = 'none';
+        };
+    }
+
+    saveUserProfile() {
+        const nameSel = document.getElementById('profileNameSelect');
+        const name = nameSel ? nameSel.value : '';
+        const role = document.getElementById('profileRole').value;
+        const specialty = document.getElementById('profileSpecialty').value.trim();
+
+        if (!name || name === '__create__') {
+            alert('Please select or create a doctor name.');
+            return;
+        }
+
+        if (!this.doctors.find(d => d.name === name)) {
+            this.doctors.unshift({ name });
+            this.saveDoctors();
+        }
+
+        this.currentUser.name = name;
+        this.currentUser.role = role;
+        this.currentUser.specialty = specialty;
+
+        this.saveUser();
+        this.updateUserDisplay();
+        this.hideModal('userModal');
+    }
+
+    // ================================================================================
+    // PATIENT.JS FUNCTIONALITY
+    // ================================================================================
+    loadSavedPatientId() {
+        const pid = localStorage.getItem('medicalChatbotPatientId');
+        if (pid && /^\d{8}$/.test(pid)) {
+            this.currentPatientId = pid;
+            const status = document.getElementById('patientStatus');
+            if (status) {
+                status.textContent = `Patient: ${pid}`;
+                status.style.color = 'var(--text-secondary)';
             }
+            const input = document.getElementById('patientIdInput');
+            if (input) input.value = pid;
         }
-        this.isLoading = show;
     }
 
-    updateCurrentSession() {
-        if (this.currentSession) {
-            this.currentSession.lastActivity = new Date().toISOString();
-            this.saveCurrentSession();
+    savePatientId() {
+        if (this.currentPatientId) localStorage.setItem('medicalChatbotPatientId', this.currentPatientId);
+        else localStorage.removeItem('medicalChatbotPatientId');
+    }
+
+    loadPatient = async function () {
+        console.log('[DEBUG] loadPatient called');
+        const input = document.getElementById('patientIdInput');
+        const status = document.getElementById('patientStatus');
+        const id = (input?.value || '').trim();
+        console.log('[DEBUG] Patient ID from input:', id);
+        if (!/^\d{8}$/.test(id)) {
+            console.log('[DEBUG] Invalid patient ID format');
+            if (status) { status.textContent = 'Invalid patient ID. Use 8 digits.'; status.style.color = 'var(--warning-color)'; }
+            return;
+        }
+        console.log('[DEBUG] Setting current patient ID:', id);
+        this.currentPatientId = id;
+        this.savePatientId();
+        if (status) { status.textContent = `Patient: ${id}`; status.style.color = 'var(--text-secondary)'; }
+        await this.fetchAndRenderPatientSessions();
+    }
+
+    fetchAndRenderPatientSessions = async function () {
+        if (!this.currentPatientId) return;
+        try {
+            const resp = await fetch(`/patients/${this.currentPatientId}/sessions`);
+            if (resp.ok) {
+                const data = await resp.json();
+                const sessions = Array.isArray(data.sessions) ? data.sessions : [];
+                this.backendSessions = sessions.map(s => ({
+                    id: s.session_id,
+                    title: s.title || 'New Chat',
+                    messages: [],
+                    createdAt: s.created_at || new Date().toISOString(),
+                    lastActivity: s.last_activity || new Date().toISOString(),
+                    source: 'backend'
+                }));
+                if (this.backendSessions.length > 0) {
+                    this.currentSession = this.backendSessions[0];
+                    await this.hydrateMessagesForSession(this.currentSession.id);
+                }
+            } else {
+                console.warn('Failed to fetch patient sessions', resp.status);
+                this.backendSessions = [];
+            }
+        } catch (e) {
+            console.error('Failed to load patient sessions', e);
+            this.backendSessions = [];
+        }
+        this.loadChatSessions();
+    }
+
+    hydrateMessagesForSession = async function (sessionId) {
+        try {
+            const resp = await fetch(`/sessions/${sessionId}/messages?limit=1000`);
+            if (!resp.ok) return;
+            const data = await resp.json();
+            const msgs = Array.isArray(data.messages) ? data.messages : [];
+            const normalized = msgs.map(m => ({
+                id: m._id || this.generateId(),
+                role: m.role,
+                content: m.content,
+                timestamp: m.timestamp
+            }));
+            if (this.currentSession && this.currentSession.id === sessionId) {
+                this.currentSession.messages = normalized;
+                this.clearChatMessages();
+                this.currentSession.messages.forEach(m => this.displayMessage(m));
+                this.updateChatTitle();
+            }
+        } catch (e) {
+            console.error('Failed to hydrate session messages', e);
+        }
+    }
+
+    bindPatientHandlers() {
+        console.log('[DEBUG] bindPatientHandlers called');
+        const loadBtn = document.getElementById('loadPatientBtn');
+        console.log('[DEBUG] Load button found:', !!loadBtn);
+        if (loadBtn) loadBtn.addEventListener('click', () => this.loadPatient());
+        const patientInput = document.getElementById('patientIdInput');
+        const suggestionsEl = document.getElementById('patientSuggestions');
+        console.log('[DEBUG] Patient input found:', !!patientInput);
+        console.log('[DEBUG] Suggestions element found:', !!suggestionsEl);
+        if (!patientInput) return;
+        let debounceTimer;
+        const hideSuggestions = () => { if (suggestionsEl) suggestionsEl.style.display = 'none'; };
+        const renderSuggestions = (items) => {
+            if (!suggestionsEl) return;
+            if (!items || items.length === 0) { hideSuggestions(); return; }
+            suggestionsEl.innerHTML = '';
+            items.forEach(p => {
+                const div = document.createElement('div');
+                div.className = 'patient-suggestion';
+                div.textContent = `${p.name || 'Unknown'} (${p.patient_id})`;
+                div.addEventListener('click', async () => {
+                    this.currentPatientId = p.patient_id;
+                    this.savePatientId();
+                    patientInput.value = p.patient_id;
+                    hideSuggestions();
+                    const status = document.getElementById('patientStatus');
+                    if (status) { status.textContent = `Patient: ${p.patient_id}`; status.style.color = 'var(--text-secondary)'; }
+                    await this.fetchAndRenderPatientSessions();
+                });
+                suggestionsEl.appendChild(div);
+            });
+            suggestionsEl.style.display = 'block';
+        };
+        patientInput.addEventListener('input', () => {
+            const q = patientInput.value.trim();
+            console.log('[DEBUG] Patient input changed:', q);
+            clearTimeout(debounceTimer);
+            if (!q) { hideSuggestions(); return; }
+            debounceTimer = setTimeout(async () => {
+                try {
+                    console.log('[DEBUG] Searching patients with query:', q);
+                    const resp = await fetch(`/patients/search?q=${encodeURIComponent(q)}&limit=8`, { headers: { 'Accept': 'application/json' } });
+                    console.log('[DEBUG] Search response status:', resp.status);
+                    if (resp.ok) {
+                        const data = await resp.json();
+                        console.log('[DEBUG] Search results:', data);
+                        renderSuggestions(data.results || []);
+                    } else {
+                        console.warn('Search request failed', resp.status);
+                    }
+                } catch (e) { 
+                    console.error('[DEBUG] Search error:', e);
+                }
+            }, 200);
+        });
+        patientInput.addEventListener('keydown', async (e) => {
+            if (e.key === 'Enter') {
+                const value = patientInput.value.trim();
+                console.log('[DEBUG] Patient input Enter pressed with value:', value);
+                if (/^\d{8}$/.test(value)) {
+                    console.log('[DEBUG] Loading patient with 8-digit ID');
+                    await this.loadPatient();
+                    hideSuggestions();
+                } else {
+                    console.log('[DEBUG] Searching for patient by name/partial ID');
+                    try {
+                        const resp = await fetch(`/patients/search?q=${encodeURIComponent(value)}&limit=1`);
+                        console.log('[DEBUG] Search response status:', resp.status);
+                        if (resp.ok) {
+                            const data = await resp.json();
+                            console.log('[DEBUG] Search results for Enter:', data);
+                            const first = (data.results || [])[0];
+                            if (first) {
+                                console.log('[DEBUG] Found patient, setting as current:', first);
+                                this.currentPatientId = first.patient_id;
+                                this.savePatientId();
+                                patientInput.value = first.patient_id;
+                                hideSuggestions();
+                                const status = document.getElementById('patientStatus');
+                                if (status) { status.textContent = `Patient: ${first.patient_id}`; status.style.color = 'var(--text-secondary)'; }
+                                await this.fetchAndRenderPatientSessions();
+                                return;
+                            }
+                        }
+                    } catch (e) {
+                        console.error('[DEBUG] Search error on Enter:', e);
+                    }
+                    const status = document.getElementById('patientStatus');
+                    if (status) { status.textContent = 'No matching patient found'; status.style.color = 'var(--warning-color)'; }
+                }
+            }
+        });
+        document.addEventListener('click', (ev) => {
+            if (!suggestionsEl) return;
+            if (!suggestionsEl.contains(ev.target) && ev.target !== patientInput) hideSuggestions();
+        });
+    }
+
+    // Patient modal functionality
+    setupPatientModal() {
+        const profileBtn = document.getElementById('patientMenuBtn');
+        const modal = document.getElementById('patientModal');
+        const closeBtn = document.getElementById('patientModalClose');
+        const logoutBtn = document.getElementById('patientLogoutBtn');
+        const createBtn = document.getElementById('patientCreateBtn');
+        
+        if (profileBtn && modal) {
+            profileBtn.addEventListener('click', async () => {
+                const pid = this?.currentPatientId;
+                if (pid) {
+                    try {
+                        const resp = await fetch(`/patients/${pid}`);
+                        if (resp.ok) {
+                            const p = await resp.json();
+                            const name = p.name || 'Unknown';
+                            const age = typeof p.age === 'number' ? p.age : '-';
+                            const sex = p.sex || '-';
+                            const meds = Array.isArray(p.medications) && p.medications.length > 0 ? p.medications.join(', ') : '-';
+                            document.getElementById('patientSummary').textContent = `${name} — ${sex}, ${age}`;
+                            document.getElementById('patientMedications').textContent = meds;
+                            document.getElementById('patientAssessment').textContent = p.past_assessment_summary || '-';
+                        }
+                    } catch (e) {
+                        console.error('Failed to load patient profile', e);
+                    }
+                }
+                modal.classList.add('show');
+            });
+        }
+        
+        if (closeBtn && modal) {
+            closeBtn.addEventListener('click', () => modal.classList.remove('show'));
+            modal.addEventListener('click', (e) => { if (e.target === modal) modal.classList.remove('show'); });
+        }
+        
+        if (logoutBtn) {
+            logoutBtn.addEventListener('click', () => {
+                if (confirm('Log out current patient?')) {
+                    this.currentPatientId = null;
+                    localStorage.removeItem('medicalChatbotPatientId');
+                    const status = document.getElementById('patientStatus');
+                    if (status) { status.textContent = 'No patient selected'; status.style.color = 'var(--text-secondary)'; }
+                    const input = document.getElementById('patientIdInput');
+                    if (input) input.value = '';
+                    modal.classList.remove('show');
+                }
+            });
+        }
+        
+        if (createBtn) createBtn.addEventListener('click', () => modal.classList.remove('show'));
+    }
+
+    // ================================================================================
+    // MESSAGING.JS FUNCTIONALITY
+    // ================================================================================
+    sendMessage = async function () {
+        const input = document.getElementById('chatInput');
+        const message = input.value.trim();
+        if (!message || this.isLoading) return;
+        if (!this.currentPatientId) {
+            const status = document.getElementById('patientStatus');
+            if (status) { status.textContent = 'Select a patient before chatting.'; status.style.color = 'var(--warning-color)'; }
+            return;
+        }
+        input.value = '';
+        this.autoResizeTextarea(input);
+        this.addMessage('user', message);
+        this.showLoading(true);
+        try {
+            const response = await this.callMedicalAPI(message);
+            this.addMessage('assistant', response);
+            this.updateCurrentSession();
+        } catch (error) {
+            console.error('Error sending message:', error);
+            let errorMessage = 'I apologize, but I encountered an error processing your request.';
+            if (error.message.includes('500')) errorMessage = 'The server encountered an internal error. Please try again in a moment.';
+            else if (error.message.includes('404')) errorMessage = 'The requested service was not found. Please check your connection.';
+            else if (error.message.includes('fetch')) errorMessage = 'Unable to connect to the server. Please check your internet connection.';
+            this.addMessage('assistant', errorMessage);
+        } finally {
+            this.showLoading(false);
+        }
+    }
+
+    callMedicalAPI = async function (message) {
+        try {
+            const response = await fetch('/chat', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({
+                user_id: this.currentUser.id,
+                    patient_id: this.currentPatientId,
+                    doctor_id: this.currentUser.id,
+                session_id: this.currentSession?.id || 'default',
+                message: message,
+                user_role: this.currentUser.role,
+                user_specialty: this.currentUser.specialty,
+                title: this.currentSession?.title || 'New Chat'
+            })
+            });
+            if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`);
+            const data = await response.json();
+            return data.response || 'I apologize, but I received an empty response. Please try again.';
+        } catch (error) {
+            console.error('API call failed:', error);
+            console.error('Error details:', {
+                message: error.message,
+                stack: error.stack,
+                user: this.currentUser,
+                session: this.currentSession,
+                patientId: this.currentPatientId
+            });
+            if (error.name === 'TypeError' && error.message.includes('fetch')) return this.generateMockResponse(message);
+            throw error;
+        }
+    }
+
+    generateMockResponse(message) {
+        const responses = [
+            "Based on your question about medical topics, I can provide general information. However, please remember that this is for educational purposes only and should not replace professional medical advice.",
+            "That's an interesting medical question. While I can offer some general insights, it's important to consult with healthcare professionals for personalized medical advice.",
+            "I understand your medical inquiry. For accurate diagnosis and treatment recommendations, please consult with qualified healthcare providers who can assess your specific situation.",
+            "Thank you for your medical question. I can provide educational information, but medical decisions should always be made in consultation with healthcare professionals.",
+            "I appreciate your interest in medical topics. Remember that medical information found online should be discussed with healthcare providers for proper evaluation."
+        ];
+        return responses[Math.floor(Math.random() * responses.length)];
+    }
+
+    addMessage(role, content) {
+        if (!this.currentSession) this.startNewChat();
+        const message = { id: this.generateId(), role, content, timestamp: new Date().toISOString() };
+        this.currentSession.messages.push(message);
+        this.displayMessage(message);
+        if (role === 'user' && this.currentSession.messages.length === 2) this.summariseAndSetTitle(content);
+    }
+
+    summariseAndSetTitle = async function (text) {
+        try {
+            const resp = await fetch('/summarise', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ text, max_words: 5 }) });
+            if (resp.ok) {
+                const data = await resp.json();
+                const title = (data.title || 'New Chat').trim();
+                this.currentSession.title = title;
+                this.updateCurrentSession();
+                this.updateChatTitle();
+                this.loadChatSessions();
+            } else {
+                const fallback = text.length > 50 ? text.substring(0, 50) + '...' : text;
+                this.currentSession.title = fallback;
+                this.updateCurrentSession();
+                this.updateChatTitle();
+                this.loadChatSessions();
+            }
+        } catch (e) {
+            const fallback = text.length > 50 ? text.substring(0, 50) + '...' : text;
+            this.currentSession.title = fallback;
+            this.updateCurrentSession();
+            this.updateChatTitle();
+            this.loadChatSessions();
         }
     }
+
+    displayMessage(message) {
+        const chatMessages = document.getElementById('chatMessages');
+        const messageElement = document.createElement('div');
+        messageElement.className = `message ${message.role}-message fade-in`;
+        messageElement.id = `message-${message.id}`;
+        const avatar = message.role === 'user' ? '<i class="fas fa-user"></i>' : '<i class="fas fa-robot"></i>';
+        const time = this.formatTime(message.timestamp);
+        messageElement.innerHTML = `
+            <div class="message-avatar">${avatar}</div>
+            <div class="message-content">
+                <div class="message-text">${this.formatMessageContent(message.content)}</div>
+                <div class="message-time">${time}</div>
+            </div>`;
+        chatMessages.appendChild(messageElement);
+        chatMessages.scrollTop = chatMessages.scrollHeight;
+        if (this.currentSession) this.currentSession.lastActivity = new Date().toISOString();
+    }
+
+    formatMessageContent(content) {
+        return content
+            .replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>')
+            .replace(/\*(.*?)\*/g, '<em>$1</em>')
+            .replace(/\n/g, '<br>')
+            .replace(/🔍/g, '<span style="color: var(--primary-color);">🔍</span>')
+            .replace(/📋/g, '<span style="color: var(--secondary-color);">📋</span>')
+            .replace(/💊/g, '<span style="color: var(--accent-color);">💊</span>')
+            .replace(/📚/g, '<span style="color: var(--success-color);">📚</span>')
+            .replace(/⚠️/g, '<span style="color: var(--warning-color);">⚠️</span>');
+    }
+
+    formatTime(timestamp) {
+        const date = new Date(timestamp);
+        const now = new Date();
+        const diff = now - date;
+        if (diff < 60000) return 'Just now';
+        if (diff < 3600000) { const minutes = Math.floor(diff / 60000); return `${minutes} minute${minutes > 1 ? 's' : ''} ago`; }
+        if (diff < 86400000) { const hours = Math.floor(diff / 3600000); return `${hours} hour${hours > 1 ? 's' : ''} ago`; }
+        return date.toLocaleDateString();
+    }
 }
+// ----------------------------------------------------------
+// Additional UI setup END
+// ----------------------------------------------------------  
+
 
 // Initialize the app when DOM is loaded
 document.addEventListener('DOMContentLoaded', () => {
     window.medicalChatbot = new MedicalChatbotApp();
 });
 
-
-// ----------------------------------------------------------
-// Additional UI setup END
-// ----------------------------------------------------------    
-
 // Handle system theme changes
 window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (e) => {
     const themeSelect = document.getElementById('themeSelect');
@@ -651,7 +1224,7 @@ window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (e)
         const toggle = document.getElementById('sidebarToggle');
         if (toggle && sidebar) {
             toggle.addEventListener('click', () => {
-                sidebar.classList.toggle('show');
+        sidebar.classList.toggle('show');
             });
         }
     });
@@ -675,4 +1248,20 @@ window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (e)
             }
         }
     });
-})();
+})();
+
+// Doctor modal open/close wiring (from doctor.js)
+document.addEventListener('DOMContentLoaded', () => {
+    const doctorCard = document.getElementById('userProfile');
+    const userModal = document.getElementById('userModal');
+    const closeBtn = document.getElementById('userModalClose');
+    const cancelBtn = document.getElementById('userModalCancel');
+    if (doctorCard && userModal) {
+        doctorCard.addEventListener('click', () => userModal.classList.add('show'));
+    }
+    if (closeBtn) closeBtn.addEventListener('click', () => userModal.classList.remove('show'));
+    if (cancelBtn) cancelBtn.addEventListener('click', () => userModal.classList.remove('show'));
+    if (userModal) {
+        userModal.addEventListener('click', (e) => { if (e.target === userModal) userModal.classList.remove('show'); });
+    }
+});

static/js/chat/sessions.js

@@ -161,6 +161,4 @@ export function attachSessionsUI(app) {
 			}
 		});
 	};
-}
-
-
+}

static/js/ui/handlers.js

@@ -65,6 +65,4 @@ export function attachUIHandlers(app) {
 	app.hideModal = function (modalId) {
 		document.getElementById(modalId)?.classList.remove('show');
 	};
-}
-
-
+}

static/js/ui/settings.js

@@ -71,6 +71,4 @@ export function attachSettingsUI(app) {
 		if (cancelBtn) cancelBtn.addEventListener('click', () => modal.classList.remove('show'));
 		if (modal) modal.addEventListener('click', (e) => { if (e.target === modal) modal.classList.remove('show'); });
 	});
-}
-
-
+}