Rm submodule

audio.md

@@ -0,0 +1,188 @@
+# Audio Transcription Feature
+
+This document describes the audio transcription functionality integrated into the Medical AI Assistant.
+
+## Overview
+
+The audio transcription feature allows users to record voice input using their microphone and automatically transcribe it to text using NVIDIA's Riva API. The transcribed text is then inserted into the chat input field for editing before submission.
+
+## Features
+
+- **Voice Recording**: Click and hold the microphone button to record audio
+- **Real-time Feedback**: Visual indicators show recording and processing states
+- **Automatic Transcription**: Audio is automatically sent to NVIDIA Riva API for transcription
+- **Text Editing**: Transcribed text is inserted into the chat input for review and editing
+- **Error Handling**: Graceful error handling with user-friendly messages
+
+## Technical Implementation
+
+### Backend Components
+
+1. **Audio Transcription Service** (`src/services/audio_transcription.py`)
+   - Handles communication with NVIDIA Riva API
+   - Supports WAV, OPUS, and FLAC audio formats
+   - Includes audio format validation
+   - Provides both file and bytes-based transcription
+
+2. **Audio API Routes** (`src/api/routes/audio.py`)
+   - `/audio/transcribe` - POST endpoint for audio transcription
+   - `/audio/supported-formats` - GET endpoint for supported formats
+   - `/audio/health` - GET endpoint for service health check
+
+### Frontend Components
+
+1. **Audio Recorder** (`static/js/audio/recorder.js`)
+   - `AudioRecorder` class for handling audio recording
+   - `AudioRecordingUI` class for UI management
+   - MediaRecorder API integration
+   - Real-time visual feedback
+
+2. **CSS Styles** (`static/css/styles.css`)
+   - Recording state indicators
+   - Visual feedback for transcribed text
+   - Responsive design for mobile devices
+
+## API Configuration
+
+### NVIDIA Riva API Setup
+
+1. **API Keys**: Set environment variables for NVIDIA API keys:
+   ```bash
+   export NVIDIA_API_1="your_api_key_1"
+   export NVIDIA_API_2="your_api_key_2"
+   # ... up to NVIDIA_API_5
+   ```
+
+2. **Function ID**: The service uses the Whisper model function ID:
+   ```
+   b702f636-f60c-4a3d-a6f4-f3568c13bd7d
+   ```
+
+3. **Server Endpoint**: 
+   ```
+   grpc.nvcf.nvidia.com:443
+   ```
+
+### Supported Audio Formats
+
+- **WAV**: 16-bit, mono, 16kHz recommended
+- **OPUS**: WebM container with Opus codec
+- **FLAC**: Lossless compression
+
+## Usage
+
+### For Users
+
+1. **Start Recording**: Click and hold the microphone button
+2. **Speak**: Record your voice input (up to 30 seconds)
+3. **Stop Recording**: Release the button to stop recording
+4. **Review Text**: Transcribed text appears in the chat input
+5. **Edit if Needed**: Modify the text before sending
+6. **Send Message**: Submit the message as usual
+
+### For Developers
+
+1. **Install Dependencies**:
+   ```bash
+   pip install nvidia-riva-client
+   ```
+
+2. **Test the Service**:
+   ```bash
+   python test_audio_transcription.py
+   ```
+
+3. **Start the Server**:
+   ```bash
+   python start.py
+   ```
+
+## Browser Compatibility
+
+- **Chrome/Chromium**: Full support
+- **Firefox**: Full support
+- **Safari**: Full support (iOS 14.3+)
+- **Edge**: Full support
+
+## Security Considerations
+
+- **Microphone Access**: Requires user permission
+- **Audio Data**: Transmitted securely to NVIDIA API
+- **No Local Storage**: Audio data is not stored locally
+- **API Key Rotation**: Automatic key rotation for reliability
+
+## Troubleshooting
+
+### Common Issues
+
+1. **Microphone Access Denied**
+   - Ensure browser has microphone permissions
+   - Check browser settings for site permissions
+
+2. **Transcription Fails**
+   - Verify NVIDIA API keys are set correctly
+   - Check network connectivity
+   - Ensure audio format is supported
+
+3. **No Audio Detected**
+   - Check microphone is working
+   - Ensure audio levels are adequate
+   - Try speaking closer to the microphone
+
+### Debug Mode
+
+Enable debug logging by opening browser developer tools and checking the console for detailed error messages.
+
+## Future Enhancements
+
+- **Language Selection**: Support for multiple languages
+- **Real-time Transcription**: Live transcription during recording
+- **Audio Quality Settings**: Configurable audio parameters
+- **Offline Support**: Local transcription capabilities
+- **Voice Commands**: Special voice commands for UI control
+
+## API Reference
+
+### POST /audio/transcribe
+
+Transcribe an audio file to text.
+
+**Request:**
+- `file`: Audio file (multipart/form-data)
+- `language_code`: Language code (form data, default: "en")
+
+**Response:**
+```json
+{
+  "success": true,
+  "transcribed_text": "Hello, this is a test.",
+  "language_code": "en",
+  "file_name": "recording.webm"
+}
+```
+
+### GET /audio/supported-formats
+
+Get list of supported audio formats.
+
+**Response:**
+```json
+{
+  "supported_formats": [".wav", ".opus", ".flac"],
+  "description": "Supported audio formats for transcription"
+}
+```
+
+### GET /audio/health
+
+Check audio transcription service health.
+
+**Response:**
+```json
+{
+  "service": "audio_transcription",
+  "status": "available",
+  "nvidia_keys_available": true,
+  "supported_formats": [".wav", ".opus", ".flac"]
+}
+```

requirements.txt

@@ -45,6 +45,9 @@ pytest-asyncio==0.21.1
 black==23.11.0
 flake8==6.1.0
 
+# NVIDIA Riva client for speech-to-text
+nvidia-riva-client
+
 # Optional: GPU support for embeddings (uncomment if using CUDA)
 # torch==2.1.1+cu118 --index-url https://download.pytorch.org/whl/cu118
 # faiss-gpu==1.7.4

src/api/routes/audio.py

@@ -0,0 +1,141 @@
+# api/routes/audio.py
+
+from fastapi import APIRouter, Depends, HTTPException, UploadFile, File, Form
+from fastapi.responses import JSONResponse
+
+from src.core.state import MedicalState, get_state
+from src.services.audio_transcription import (
+    transcribe_audio_bytes,
+    validate_audio_format,
+    get_supported_formats
+)
+from src.utils.logger import get_logger
+
+logger = get_logger("AUDIO_API", __name__)
+
+router = APIRouter(prefix="/audio", tags=["audio"])
+
+@router.post("/transcribe")
+async def transcribe_audio(
+    file: UploadFile = File(...),
+    language_code: str = Form(default="en"),
+    state: MedicalState = Depends(get_state)
+) -> JSONResponse:
+    """
+    Transcribe audio file to text using NVIDIA Riva API.
+    
+    Args:
+        file: Audio file (WAV, OPUS, or FLAC format)
+        language_code: Language code for transcription (default: 'en')
+        state: Application state
+        
+    Returns:
+        JSON response with transcribed text
+    """
+    try:
+        # Validate file type
+        if not file.content_type or not any(
+            file.content_type.startswith(f"audio/{fmt}") 
+            for fmt in ["wav", "opus", "flac"]
+        ):
+            # Also check file extension as fallback
+            file_extension = file.filename.split('.')[-1].lower() if file.filename else ""
+            if file_extension not in get_supported_formats():
+                raise HTTPException(
+                    status_code=400,
+                    detail=f"Unsupported audio format. Supported formats: {', '.join(get_supported_formats())}"
+                )
+        
+        # Read audio data
+        audio_bytes = await file.read()
+        
+        if len(audio_bytes) == 0:
+            raise HTTPException(status_code=400, detail="Empty audio file")
+            
+        # Validate audio format
+        if not validate_audio_format(audio_bytes):
+            raise HTTPException(
+                status_code=400,
+                detail="Invalid audio format. Please ensure the file is a valid WAV, OPUS, or FLAC file."
+            )
+        
+        # Transcribe audio
+        logger.info(f"Transcribing audio file: {file.filename} (language: {language_code})")
+        transcribed_text = await transcribe_audio_bytes(
+            audio_bytes, 
+            language_code, 
+            state.nvidia_rotator
+        )
+        
+        if transcribed_text is None:
+            raise HTTPException(
+                status_code=500,
+                detail="Transcription failed. Please try again or check your audio file."
+            )
+            
+        return JSONResponse(
+            status_code=200,
+            content={
+                "success": True,
+                "transcribed_text": transcribed_text,
+                "language_code": language_code,
+                "file_name": file.filename
+            }
+        )
+        
+    except HTTPException:
+        raise
+    except Exception as e:
+        logger.error(f"Audio transcription error: {e}")
+        raise HTTPException(
+            status_code=500,
+            detail="Internal server error during transcription"
+        )
+
+@router.get("/supported-formats")
+async def get_audio_formats() -> JSONResponse:
+    """
+    Get list of supported audio formats for transcription.
+    
+    Returns:
+        JSON response with supported formats
+    """
+    return JSONResponse(
+        status_code=200,
+        content={
+            "supported_formats": get_supported_formats(),
+            "description": "Supported audio formats for transcription"
+        }
+    )
+
+@router.get("/health")
+async def audio_health_check(state: MedicalState = Depends(get_state)) -> JSONResponse:
+    """
+    Check if audio transcription service is available.
+    
+    Returns:
+        JSON response with service status
+    """
+    try:
+        # Check if NVIDIA API keys are available
+        nvidia_keys_available = len([k for k in state.nvidia_rotator.keys if k]) > 0
+        
+        return JSONResponse(
+            status_code=200,
+            content={
+                "service": "audio_transcription",
+                "status": "available" if nvidia_keys_available else "unavailable",
+                "nvidia_keys_available": nvidia_keys_available,
+                "supported_formats": get_supported_formats()
+            }
+        )
+    except Exception as e:
+        logger.error(f"Audio health check error: {e}")
+        return JSONResponse(
+            status_code=500,
+            content={
+                "service": "audio_transcription",
+                "status": "error",
+                "error": str(e)
+            }
+        )

src/main.py

@@ -17,7 +17,7 @@ except ImportError:
 except Exception as e:
 	print(f"⚠️ Error loading .env file: {e}")
 
-from src.api.routes import chat, session, static, system, user
+from src.api.routes import audio, chat, session, static, system, user
 from src.core.state import MedicalState
 from src.utils.logger import get_logger
 
@@ -107,3 +107,4 @@ app.include_router(user.router)
 app.include_router(session.router)
 app.include_router(system.router)
 app.include_router(static.router)
+app.include_router(audio.router)

src/services/audio_transcription.py

@@ -0,0 +1,177 @@
+# services/audio_transcription.py
+
+import os
+import tempfile
+from typing import Optional
+
+from src.utils.logger import get_logger
+from src.utils.rotator import APIKeyRotator, robust_post_json
+
+logger = get_logger("AUDIO_TRANSCRIPTION", __name__)
+
+# NVIDIA Riva configuration
+RIVA_SERVER = "grpc.nvcf.nvidia.com:443"
+RIVA_FUNCTION_ID = "b702f636-f60c-4a3d-a6f4-f3568c13bd7d"
+
+async def transcribe_audio_file(
+    audio_file_path: str,
+    language_code: str = "en",
+    rotator: APIKeyRotator
+) -> Optional[str]:
+    """
+    Transcribe audio file using NVIDIA Riva API.
+    
+    Args:
+        audio_file_path: Path to the audio file (WAV, OPUS, or FLAC format)
+        language_code: Language code for transcription (e.g., 'en', 'fr', 'multi')
+        rotator: API key rotator for authentication
+        
+    Returns:
+        Transcribed text or None if transcription fails
+    """
+    try:
+        # Check if file exists
+        if not os.path.exists(audio_file_path):
+            logger.error(f"Audio file not found: {audio_file_path}")
+            return None
+            
+        # Get API key
+        api_key = rotator.get_key()
+        if not api_key:
+            logger.error("No NVIDIA API key available for transcription")
+            return None
+            
+        # Prepare the request
+        url = f"https://{RIVA_SERVER}/v1/speech/transcribe"
+        
+        headers = {
+            "Authorization": f"Bearer {api_key}",
+            "Content-Type": "application/octet-stream"
+        }
+        
+        # Read audio file
+        with open(audio_file_path, 'rb') as audio_file:
+            audio_data = audio_file.read()
+            
+        # Prepare metadata
+        metadata = {
+            "function-id": RIVA_FUNCTION_ID,
+            "language-code": language_code
+        }
+        
+        # Add metadata to headers
+        for key, value in metadata.items():
+            headers[f"x-{key}"] = value
+            
+        # Make the request
+        logger.info(f"Transcribing audio file: {audio_file_path} (language: {language_code})")
+        
+        # Use httpx for binary data upload
+        import httpx
+        
+        async with httpx.AsyncClient(timeout=60) as client:
+            response = await client.post(
+                url,
+                headers=headers,
+                content=audio_data
+            )
+            
+            if response.status_code in (401, 403, 429) or (500 <= response.status_code < 600):
+                logger.warning(f"HTTP {response.status_code} from Riva API. Rotating key and retrying...")
+                rotator.rotate()
+                # Retry with new key
+                api_key = rotator.get_key()
+                if api_key:
+                    headers["Authorization"] = f"Bearer {api_key}"
+                    response = await client.post(url, headers=headers, content=audio_data)
+                    
+            response.raise_for_status()
+            
+            # Parse response
+            result = response.json()
+            transcribed_text = result.get("transcript", "").strip()
+            
+            if transcribed_text:
+                logger.info(f"Successfully transcribed audio: {len(transcribed_text)} characters")
+                return transcribed_text
+            else:
+                logger.warning("Transcription returned empty result")
+                return None
+                
+    except Exception as e:
+        logger.error(f"Audio transcription failed: {e}")
+        return None
+
+async def transcribe_audio_bytes(
+    audio_bytes: bytes,
+    language_code: str = "en",
+    rotator: APIKeyRotator
+) -> Optional[str]:
+    """
+    Transcribe audio bytes using NVIDIA Riva API.
+    
+    Args:
+        audio_bytes: Audio data as bytes
+        language_code: Language code for transcription (e.g., 'en', 'fr', 'multi')
+        rotator: API key rotator for authentication
+        
+    Returns:
+        Transcribed text or None if transcription fails
+    """
+    try:
+        # Create temporary file
+        with tempfile.NamedTemporaryFile(suffix='.wav', delete=False) as temp_file:
+            temp_file.write(audio_bytes)
+            temp_file_path = temp_file.name
+            
+        try:
+            # Transcribe the temporary file
+            result = await transcribe_audio_file(temp_file_path, language_code, rotator)
+            return result
+        finally:
+            # Clean up temporary file
+            try:
+                os.unlink(temp_file_path)
+            except OSError:
+                pass
+                
+    except Exception as e:
+        logger.error(f"Audio bytes transcription failed: {e}")
+        return None
+
+def validate_audio_format(audio_bytes: bytes) -> bool:
+    """
+    Validate if the audio bytes are in a supported format.
+    
+    Args:
+        audio_bytes: Audio data as bytes
+        
+    Returns:
+        True if format is supported, False otherwise
+    """
+    # Check for common audio file signatures
+    if len(audio_bytes) < 12:
+        return False
+        
+    # WAV format check (RIFF header)
+    if audio_bytes[:4] == b'RIFF' and audio_bytes[8:12] == b'WAVE':
+        return True
+        
+    # OPUS format check (OggS header)
+    if audio_bytes[:4] == b'OggS':
+        return True
+        
+    # FLAC format check (fLaC header)
+    if audio_bytes[:4] == b'fLaC':
+        return True
+        
+    return False
+
+def get_supported_formats() -> list[str]:
+    """
+    Get list of supported audio formats.
+    
+    Returns:
+        List of supported format extensions
+    """
+    return ['.wav', '.opus', '.flac']

static/css/styles.css

@@ -497,6 +497,7 @@ body {
     border-radius: 12px;
     padding: var(--spacing-md);
     transition: border-color var(--transition-fast);
+    position: relative;
 }
 
 .input-wrapper:focus-within {
@@ -583,6 +584,109 @@ body {
     color: var(--text-primary);
 }
 
+/* Audio recording states */
+.microphone-btn.recording-ready {
+    color: var(--text-primary);
+}
+
+.microphone-btn.recording-active {
+    background-color: var(--error-color);
+    color: white;
+    animation: pulse 1s infinite;
+}
+
+.microphone-btn.recording-processing {
+    background-color: var(--warning-color);
+    color: white;
+    animation: spin 1s linear infinite;
+}
+
+@keyframes pulse {
+    0% { opacity: 1; }
+    50% { opacity: 0.7; }
+    100% { opacity: 1; }
+}
+
+@keyframes spin {
+    from { transform: rotate(0deg); }
+    to { transform: rotate(360deg); }
+}
+
+/* Recording indicator */
+.recording-indicator {
+    position: absolute;
+    top: -40px;
+    left: 50%;
+    transform: translateX(-50%);
+    background-color: var(--error-color);
+    color: white;
+    padding: 8px 16px;
+    border-radius: 20px;
+    font-size: 0.875rem;
+    font-weight: 500;
+    display: none;
+    z-index: 1000;
+    box-shadow: var(--shadow-md);
+}
+
+.recording-indicator i {
+    margin-right: 6px;
+    animation: pulse 1s infinite;
+}
+
+/* Audio messages */
+.audio-error-message,
+.audio-success-message {
+    position: absolute;
+    top: -40px;
+    left: 50%;
+    transform: translateX(-50%);
+    padding: 8px 16px;
+    border-radius: 20px;
+    font-size: 0.875rem;
+    font-weight: 500;
+    display: none;
+    z-index: 1000;
+    box-shadow: var(--shadow-md);
+}
+
+.audio-error-message {
+    background-color: var(--error-color);
+    color: white;
+}
+
+.audio-success-message {
+    background-color: var(--success-color);
+    color: white;
+}
+
+/* Transcribed text highlighting */
+.chat-input.transcribed {
+    border-color: var(--success-color);
+    background-color: rgba(34, 197, 94, 0.05);
+}
+
+.chat-input.transcribed::placeholder {
+    color: var(--success-color);
+}
+
+/* Audio recording button enhancements */
+.microphone-btn.recording-enabled {
+    position: relative;
+}
+
+.microphone-btn.recording-enabled::after {
+    content: '';
+    position: absolute;
+    top: -2px;
+    right: -2px;
+    width: 8px;
+    height: 8px;
+    background-color: var(--success-color);
+    border-radius: 50%;
+    border: 2px solid var(--bg-primary);
+}
+
 /* Modals */
 .modal {
     display: none;

static/js/app.js

@@ -8,6 +8,9 @@
 // import { attachSettingsUI } from './ui/settings.js';
 // import { attachSessionsUI } from './chat/sessions.js';
 // import { attachMessagingUI } from './chat/messaging.js';
+// Audio recording functionality will be incorporated below
+
+// Audio recording functionality will be incorporated below
 
 class MedicalChatbotApp {
     constructor() {
@@ -18,6 +21,7 @@ class MedicalChatbotApp {
         this.memory = new Map();  // In-memory storage for STM/demo
         this.isLoading = false;
         this.doctors = this.loadDoctors();
+        this.audioRecorder = null; // Audio recording UI
 
         this.init();
     }
@@ -53,6 +57,9 @@ class MedicalChatbotApp {
         const prefs = JSON.parse(localStorage.getItem('medicalChatbotPreferences') || '{}');
         this.setTheme(prefs.theme || 'auto');
         this.setupTheme();
+        
+        // Initialize audio recording
+        this.initializeAudioRecording();
     }
 
     setupEventListeners() {
@@ -1625,6 +1632,24 @@ How can I assist you today?`;
         if (createBtn) createBtn.addEventListener('click', () => modal.classList.remove('show'));
     }
 
+    // ================================================================================
+    // AUDIO RECORDING FUNCTIONALITY
+    // ================================================================================
+    async initializeAudioRecording() {
+        try {
+            this.audioRecorder = new AudioRecordingUI(this);
+            const success = await this.audioRecorder.initialize();
+            
+            if (success) {
+                console.log('[Audio] Audio recording initialized successfully');
+            } else {
+                console.warn('[Audio] Audio recording initialization failed');
+            }
+        } catch (error) {
+            console.error('[Audio] Failed to initialize audio recording:', error);
+        }
+    }
+
     // ================================================================================
     // MESSAGING.JS FUNCTIONALITY
     // ================================================================================

static/js/audio/recorder.js

@@ -0,0 +1,417 @@
+// audio/recorder.js
+// Audio recording and transcription functionality
+
+export class AudioRecorder {
+    constructor() {
+        this.mediaRecorder = null;
+        this.audioChunks = [];
+        this.isRecording = false;
+        this.audioContext = null;
+        this.audioStream = null;
+    }
+
+    async initialize() {
+        try {
+            // Request microphone access
+            this.audioStream = await navigator.mediaDevices.getUserMedia({
+                audio: {
+                    sampleRate: 16000, // 16kHz for better speech recognition
+                    channelCount: 1,   // Mono
+                    echoCancellation: true,
+                    noiseSuppression: true,
+                    autoGainControl: true
+                }
+            });
+
+            // Create MediaRecorder
+            this.mediaRecorder = new MediaRecorder(this.audioStream, {
+                mimeType: 'audio/webm;codecs=opus'
+            });
+
+            // Set up event handlers
+            this.mediaRecorder.ondataavailable = (event) => {
+                if (event.data.size > 0) {
+                    this.audioChunks.push(event.data);
+                }
+            };
+
+            this.mediaRecorder.onstop = () => {
+                this.processRecording();
+            };
+
+            return true;
+        } catch (error) {
+            console.error('Failed to initialize audio recorder:', error);
+            throw new Error('Microphone access denied or not available');
+        }
+    }
+
+    startRecording() {
+        if (!this.mediaRecorder || this.isRecording) {
+            return false;
+        }
+
+        try {
+            this.audioChunks = [];
+            this.mediaRecorder.start();
+            this.isRecording = true;
+            console.log('Audio recording started');
+            return true;
+        } catch (error) {
+            console.error('Failed to start recording:', error);
+            return false;
+        }
+    }
+
+    stopRecording() {
+        if (!this.mediaRecorder || !this.isRecording) {
+            return false;
+        }
+
+        try {
+            this.mediaRecorder.stop();
+            this.isRecording = false;
+            console.log('Audio recording stopped');
+            return true;
+        } catch (error) {
+            console.error('Failed to stop recording:', error);
+            return false;
+        }
+    }
+
+    async processRecording() {
+        if (this.audioChunks.length === 0) {
+            console.warn('No audio data recorded');
+            return null;
+        }
+
+        try {
+            // Create audio blob
+            const audioBlob = new Blob(this.audioChunks, { type: 'audio/webm' });
+            
+            // Convert to WAV format for better compatibility
+            const wavBlob = await this.convertToWav(audioBlob);
+            
+            // Transcribe audio
+            const transcribedText = await this.transcribeAudio(wavBlob);
+            
+            return transcribedText;
+        } catch (error) {
+            console.error('Failed to process recording:', error);
+            throw error;
+        }
+    }
+
+    async convertToWav(webmBlob) {
+        try {
+            // For now, we'll use the webm blob directly
+            // In a production environment, you might want to convert to WAV
+            // This requires additional libraries like lamejs or similar
+            return webmBlob;
+        } catch (error) {
+            console.error('Failed to convert to WAV:', error);
+            return webmBlob; // Fallback to original blob
+        }
+    }
+
+    async transcribeAudio(audioBlob) {
+        try {
+            const formData = new FormData();
+            formData.append('file', audioBlob, 'recording.webm');
+            formData.append('language_code', 'en');
+
+            const response = await fetch('/audio/transcribe', {
+                method: 'POST',
+                body: formData
+            });
+
+            if (!response.ok) {
+                const errorData = await response.json();
+                throw new Error(errorData.detail || 'Transcription failed');
+            }
+
+            const result = await response.json();
+            return result.transcribed_text;
+        } catch (error) {
+            console.error('Transcription failed:', error);
+            throw error;
+        }
+    }
+
+    cleanup() {
+        if (this.audioStream) {
+            this.audioStream.getTracks().forEach(track => track.stop());
+            this.audioStream = null;
+        }
+        
+        if (this.audioContext) {
+            this.audioContext.close();
+            this.audioContext = null;
+        }
+        
+        this.mediaRecorder = null;
+        this.audioChunks = [];
+        this.isRecording = false;
+    }
+
+    isAvailable() {
+        return !!(navigator.mediaDevices && navigator.mediaDevices.getUserMedia);
+    }
+}
+
+// Audio recording UI controller
+export class AudioRecordingUI {
+    constructor(app) {
+        this.app = app;
+        this.recorder = new AudioRecorder();
+        this.microphoneBtn = null;
+        this.isInitialized = false;
+        this.recordingTimeout = null;
+    }
+
+    async initialize() {
+        if (!this.recorder.isAvailable()) {
+            console.warn('Audio recording not supported in this browser');
+            return false;
+        }
+
+        try {
+            await this.recorder.initialize();
+            this.setupUI();
+            this.isInitialized = true;
+            return true;
+        } catch (error) {
+            console.error('Failed to initialize audio recording UI:', error);
+            this.showError('Microphone access denied. Please allow microphone access to use voice input.');
+            return false;
+        }
+    }
+
+    setupUI() {
+        this.microphoneBtn = document.getElementById('microphoneBtn');
+        if (!this.microphoneBtn) {
+            console.error('Microphone button not found');
+            return;
+        }
+
+        // Add recording state classes
+        this.microphoneBtn.classList.add('recording-enabled');
+        
+        // Set up event listeners
+        this.microphoneBtn.addEventListener('mousedown', (e) => this.startRecording(e));
+        this.microphoneBtn.addEventListener('mouseup', (e) => this.stopRecording(e));
+        this.microphoneBtn.addEventListener('mouseleave', (e) => this.stopRecording(e));
+        
+        // Touch events for mobile
+        this.microphoneBtn.addEventListener('touchstart', (e) => {
+            e.preventDefault();
+            this.startRecording(e);
+        });
+        this.microphoneBtn.addEventListener('touchend', (e) => {
+            e.preventDefault();
+            this.stopRecording(e);
+        });
+
+        // Update button appearance
+        this.updateButtonState('ready');
+    }
+
+    async startRecording(event) {
+        if (!this.isInitialized || this.recorder.isRecording) {
+            return;
+        }
+
+        event.preventDefault();
+        
+        try {
+            const success = this.recorder.startRecording();
+            if (success) {
+                this.updateButtonState('recording');
+                this.showRecordingIndicator();
+                
+                // Auto-stop after 30 seconds to prevent very long recordings
+                this.recordingTimeout = setTimeout(() => {
+                    this.stopRecording(event);
+                }, 30000);
+            }
+        } catch (error) {
+            console.error('Failed to start recording:', error);
+            this.showError('Failed to start recording. Please try again.');
+        }
+    }
+
+    async stopRecording(event) {
+        if (!this.isInitialized || !this.recorder.isRecording) {
+            return;
+        }
+
+        event.preventDefault();
+        
+        try {
+            const success = this.recorder.stopRecording();
+            if (success) {
+                this.updateButtonState('processing');
+                this.hideRecordingIndicator();
+                
+                if (this.recordingTimeout) {
+                    clearTimeout(this.recordingTimeout);
+                    this.recordingTimeout = null;
+                }
+
+                // Process the recording
+                const transcribedText = await this.recorder.processRecording();
+                
+                if (transcribedText) {
+                    this.insertTranscribedText(transcribedText);
+                    this.showSuccess('Audio transcribed successfully!');
+                } else {
+                    this.showError('No speech detected. Please try again.');
+                }
+                
+                this.updateButtonState('ready');
+            }
+        } catch (error) {
+            console.error('Failed to stop recording:', error);
+            this.showError('Transcription failed. Please try again.');
+            this.updateButtonState('ready');
+        }
+    }
+
+    insertTranscribedText(text) {
+        const chatInput = document.getElementById('chatInput');
+        if (!chatInput) {
+            console.error('Chat input not found');
+            return;
+        }
+
+        // Append transcribed text to existing content
+        const currentText = chatInput.value.trim();
+        const newText = currentText ? `${currentText} ${text}` : text;
+        
+        chatInput.value = newText;
+        
+        // Add visual feedback for transcribed text
+        chatInput.classList.add('transcribed');
+        
+        // Remove the highlighting after a few seconds
+        setTimeout(() => {
+            chatInput.classList.remove('transcribed');
+        }, 3000);
+        
+        // Trigger input event to update UI
+        chatInput.dispatchEvent(new Event('input', { bubbles: true }));
+        
+        // Focus the input
+        chatInput.focus();
+        
+        // Auto-resize if needed
+        if (this.app && this.app.autoResizeTextarea) {
+            this.app.autoResizeTextarea(chatInput);
+        }
+    }
+
+    updateButtonState(state) {
+        if (!this.microphoneBtn) return;
+
+        // Remove all state classes
+        this.microphoneBtn.classList.remove('recording-ready', 'recording-active', 'recording-processing');
+        
+        // Add appropriate state class
+        switch (state) {
+            case 'ready':
+                this.microphoneBtn.classList.add('recording-ready');
+                this.microphoneBtn.title = 'Hold to record voice input';
+                break;
+            case 'recording':
+                this.microphoneBtn.classList.add('recording-active');
+                this.microphoneBtn.title = 'Recording... Release to stop';
+                break;
+            case 'processing':
+                this.microphoneBtn.classList.add('recording-processing');
+                this.microphoneBtn.title = 'Processing audio...';
+                break;
+        }
+    }
+
+    showRecordingIndicator() {
+        // Create or update recording indicator
+        let indicator = document.getElementById('recordingIndicator');
+        if (!indicator) {
+            indicator = document.createElement('div');
+            indicator.id = 'recordingIndicator';
+            indicator.className = 'recording-indicator';
+            indicator.innerHTML = '<i class="fas fa-microphone"></i> Recording...';
+            
+            const chatInputContainer = document.querySelector('.chat-input-container');
+            if (chatInputContainer) {
+                chatInputContainer.appendChild(indicator);
+            }
+        }
+        
+        indicator.style.display = 'block';
+    }
+
+    hideRecordingIndicator() {
+        const indicator = document.getElementById('recordingIndicator');
+        if (indicator) {
+            indicator.style.display = 'none';
+        }
+    }
+
+    showError(message) {
+        // Create or update error message
+        let errorMsg = document.getElementById('audioError');
+        if (!errorMsg) {
+            errorMsg = document.createElement('div');
+            errorMsg.id = 'audioError';
+            errorMsg.className = 'audio-error-message';
+            
+            const chatInputContainer = document.querySelector('.chat-input-container');
+            if (chatInputContainer) {
+                chatInputContainer.appendChild(errorMsg);
+            }
+        }
+        
+        errorMsg.textContent = message;
+        errorMsg.style.display = 'block';
+        
+        // Hide after 5 seconds
+        setTimeout(() => {
+            errorMsg.style.display = 'none';
+        }, 5000);
+    }
+
+    showSuccess(message) {
+        // Create or update success message
+        let successMsg = document.getElementById('audioSuccess');
+        if (!successMsg) {
+            successMsg = document.createElement('div');
+            successMsg.id = 'audioSuccess';
+            successMsg.className = 'audio-success-message';
+            
+            const chatInputContainer = document.querySelector('.chat-input-container');
+            if (chatInputContainer) {
+                chatInputContainer.appendChild(successMsg);
+            }
+        }
+        
+        successMsg.textContent = message;
+        successMsg.style.display = 'block';
+        
+        // Hide after 3 seconds
+        setTimeout(() => {
+            successMsg.style.display = 'none';
+        }, 3000);
+    }
+
+    cleanup() {
+        if (this.recorder) {
+            this.recorder.cleanup();
+        }
+        
+        if (this.recordingTimeout) {
+            clearTimeout(this.recordingTimeout);
+            this.recordingTimeout = null;
+        }
+    }
+}

static/js/chat/messaging.js

@@ -1,162 +0,0 @@
-// chat/messaging.js
-// Send, API call, add/display message, summariseTitle, format content/time
-
-export function attachMessagingUI(app) {
-	app.sendMessage = async function () {
-		const input = document.getElementById('chatInput');
-		const message = input.value.trim();
-		if (!message || app.isLoading) return;
-		if (!app.currentPatientId) {
-			const status = document.getElementById('patientStatus');
-			if (status) { status.textContent = 'Select a patient before chatting.'; status.style.color = 'var(--warning-color)'; }
-			return;
-		}
-		input.value = '';
-		app.autoResizeTextarea(input);
-		app.addMessage('user', message);
-		app.showLoading(true);
-		try {
-			const response = await app.callMedicalAPI(message);
-			app.addMessage('assistant', response);
-			app.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.';
-			app.addMessage('assistant', errorMessage);
-		} finally {
-			app.showLoading(false);
-		}
-	};
-
-	app.callMedicalAPI = async function (message) {
-		try {
-			const response = await fetch('/chat', {
-				method: 'POST',
-				headers: { 'Content-Type': 'application/json' },
-				body: JSON.stringify({
-					user_id: app.currentUser.id,
-					patient_id: app.currentPatientId,
-					doctor_id: app.currentUser.id,
-					session_id: app.currentSession?.id || 'default',
-					message: message,
-					user_role: app.currentUser.role,
-					user_specialty: app.currentUser.specialty,
-					title: app.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: app.currentUser,
-				session: app.currentSession,
-				patientId: app.currentPatientId
-			});
-			if (error.name === 'TypeError' && error.message.includes('fetch')) return app.generateMockResponse(message);
-			throw error;
-		}
-	};
-
-	app.generateMockResponse = function (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)];
-	};
-
-	app.addMessage = function (role, content) {
-		if (!app.currentSession) app.startNewChat();
-		const message = { id: app.generateId(), role, content, timestamp: new Date().toISOString() };
-		app.currentSession.messages.push(message);
-		app.displayMessage(message);
-		if (role === 'user' && app.currentSession.messages.length === 2) app.summariseAndSetTitle(content);
-	};
-
-	app.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();
-				app.currentSession.title = title;
-				app.updateCurrentSession();
-				app.updateChatTitle();
-				app.loadChatSessions();
-			} else {
-				const fallback = text.length > 50 ? text.substring(0, 50) + '...' : text;
-				app.currentSession.title = fallback;
-				app.updateCurrentSession();
-				app.updateChatTitle();
-				app.loadChatSessions();
-			}
-		} catch (e) {
-			const fallback = text.length > 50 ? text.substring(0, 50) + '...' : text;
-			app.currentSession.title = fallback;
-			app.updateCurrentSession();
-			app.updateChatTitle();
-			app.loadChatSessions();
-		}
-	};
-
-	app.displayMessage = function (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 = app.formatTime(message.timestamp);
-		messageElement.innerHTML = `
-			<div class="message-avatar">${avatar}</div>
-			<div class="message-content">
-				<div class="message-text">${app.formatMessageContent(message.content)}</div>
-				<div class="message-time">${time}</div>
-			</div>`;
-		chatMessages.appendChild(messageElement);
-		chatMessages.scrollTop = chatMessages.scrollHeight;
-		if (app.currentSession) app.currentSession.lastActivity = new Date().toISOString();
-	};
-
-	app.formatMessageContent = function (content) {
-		return content
-			// Handle headers (1-6 # symbols)
-			.replace(/^#{1,6}\s+(.+)$/gm, (match, text, offset, string) => {
-				const level = match.match(/^#+/)[0].length;
-				return `<h${level}>${text}</h${level}>`;
-			})
-			// Handle bold text
-			.replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>')
-			// Handle italic text
-			.replace(/\*(.*?)\*/g, '<em>$1</em>')
-			// Handle line breaks
-			.replace(/\n/g, '<br>')
-			// Handle emojis with colors
-			.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>');
-	};
-
-	app.formatTime = function (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();
-	};
-}
-
-

static/js/chat/sessions.js

@@ -1,164 +0,0 @@
-// chat/sessions.js
-// Session sidebar rendering, context menu, rename/delete, local storage helpers
-
-export function attachSessionsUI(app) {
-	app.getChatSessions = function () {
-		const sessions = localStorage.getItem(`chatSessions_${app.currentUser.id}`);
-		return sessions ? JSON.parse(sessions) : [];
-	};
-
-	app.saveCurrentSession = function () {
-		if (!app.currentSession) return;
-		if (app.currentSession.source === 'backend') return; // do not persist backend sessions locally here
-		const sessions = app.getChatSessions();
-		const existingIndex = sessions.findIndex(s => s.id === app.currentSession.id);
-		if (existingIndex >= 0) sessions[existingIndex] = { ...app.currentSession };
-		else sessions.unshift(app.currentSession);
-		localStorage.setItem(`chatSessions_${app.currentUser.id}`, JSON.stringify(sessions));
-	};
-
-	app.updateCurrentSession = function () {
-		if (app.currentSession) {
-			app.currentSession.lastActivity = new Date().toISOString();
-			app.saveCurrentSession();
-		}
-	};
-
-	app.updateChatTitle = function () {
-		const titleElement = document.getElementById('chatTitle');
-		if (app.currentSession) titleElement.textContent = app.currentSession.title; else titleElement.textContent = 'Medical AI Assistant';
-	};
-
-	app.loadChatSession = function (sessionId) {
-		const sessions = app.getChatSessions();
-		const session = sessions.find(s => s.id === sessionId);
-		if (!session) return;
-		app.currentSession = session;
-		app.clearChatMessages();
-		session.messages.forEach(message => app.displayMessage(message));
-		app.updateChatTitle();
-		app.loadChatSessions();
-	};
-
-	app.deleteChatSession = function (sessionId) {
-		const sessions = app.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_${app.currentUser.id}`, JSON.stringify(sessions));
-		if (app.currentSession && app.currentSession.id === sessionId) {
-			if (sessions.length > 0) {
-				app.currentSession = sessions[0];
-				app.clearChatMessages();
-				app.currentSession.messages.forEach(m => app.displayMessage(m));
-				app.updateChatTitle();
-			} else {
-				app.currentSession = null;
-				app.clearChatMessages();
-				app.updateChatTitle();
-			}
-		}
-		app.loadChatSessions();
-	};
-
-	app.renameChatSession = function (sessionId, newTitle) {
-		const sessions = app.getChatSessions();
-		const idx = sessions.findIndex(s => s.id === sessionId);
-		if (idx === -1) return;
-		sessions[idx] = { ...sessions[idx], title: newTitle };
-		localStorage.setItem(`chatSessions_${app.currentUser.id}`, JSON.stringify(sessions));
-		if (app.currentSession && app.currentSession.id === sessionId) {
-			app.currentSession.title = newTitle;
-			app.updateChatTitle();
-		}
-		app.loadChatSessions();
-	};
-
-	app.showSessionMenu = function (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') app.deleteChatSession(id);
-				else if (action === 'edit') {
-					app._pendingEditSessionId = id;
-					const sessions = app.getChatSessions();
-					const s = sessions.find(x => x.id === id);
-					const input = document.getElementById('editSessionTitleInput');
-					if (input) input.value = s ? s.title : '';
-					app.showModal('editTitleModal');
-				}
-				pop.remove();
-			});
-		});
-	};
-
-	app.loadChatSessions = function () {
-		const sessionsContainer = document.getElementById('chatSessions');
-		sessionsContainer.innerHTML = '';
-		const sessions = (app.backendSessions && app.backendSessions.length > 0) ? app.backendSessions : app.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 ${session.id === app.currentSession?.id ? 'active' : ''}`;
-			sessionElement.addEventListener('click', async () => {
-				if (session.source === 'backend') {
-					app.currentSession = { ...session };
-					await app.hydrateMessagesForSession(session.id);
-				} else {
-					app.loadChatSession(session.id);
-				}
-			});
-			const time = app.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">${time}</div>
-					</div>
-					<div class="chat-session-actions">
-						<button class="chat-session-menu" title="Options" aria-label="Options" data-session-id="${session.id}">
-							<i class="fas fa-ellipsis-vertical"></i>
-						</button>
-					</div>
-				</div>
-			`;
-			sessionsContainer.appendChild(sessionElement);
-			const menuBtn = sessionElement.querySelector('.chat-session-menu');
-			if (session.source !== 'backend') {
-				menuBtn.addEventListener('click', (e) => {
-					e.stopPropagation();
-					app.showSessionMenu(e.currentTarget, session.id);
-				});
-			} else {
-				menuBtn.disabled = true;
-				menuBtn.style.opacity = 0.5;
-				menuBtn.title = 'Options available for local sessions only';
-			}
-		});
-	};
-}

static/js/ui/doctor.js

@@ -1,124 +0,0 @@
-// ui/doctor.js
-// Doctor list load/save, dropdown populate, create-flow, show/save profile
-
-export function attachDoctorUI(app) {
-	// Model: list of doctors persisted in localStorage
-	app.loadDoctors = function () {
-		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 []; }
-	};
-
-	app.saveDoctors = function () {
-		localStorage.setItem('medicalChatbotDoctors', JSON.stringify(app.doctors));
-	};
-
-	app.populateDoctorSelect = function () {
-		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(app.doctors.map(d => d.name));
-		if (app.currentUser?.name && !names.has(app.currentUser.name)) {
-			app.doctors.unshift({ name: app.currentUser.name });
-			names.add(app.currentUser.name);
-			app.saveDoctors();
-		}
-		app.doctors.forEach(d => {
-			const opt = document.createElement('option');
-			opt.value = d.name;
-			opt.textContent = d.name;
-			if (app.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 {
-				newSec.style.display = 'none';
-			}
-		});
-		const cancelBtn = document.getElementById('cancelNewDoctor');
-		const confirmBtn = document.getElementById('confirmNewDoctor');
-		if (cancelBtn) cancelBtn.onclick = () => { newSec.style.display = 'none'; sel.value = app.currentUser?.name || ''; };
-		if (confirmBtn) confirmBtn.onclick = () => {
-			const name = (document.getElementById('newDoctorName').value || '').trim();
-			if (!name) return;
-			if (!app.doctors.find(d => d.name === name)) {
-				app.doctors.unshift({ name });
-				app.saveDoctors();
-			}
-			app.populateDoctorSelect();
-			sel.value = name;
-			newSec.style.display = 'none';
-		};
-	};
-
-	app.showUserModal = function () {
-		app.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 = app.currentUser?.name || '__create__';
-		document.getElementById('profileRole').value = app.currentUser.role;
-		document.getElementById('profileSpecialty').value = app.currentUser.specialty || '';
-		app.showModal('userModal');
-	};
-
-	app.saveUserProfile = function () {
-		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 (!app.doctors.find(d => d.name === name)) {
-			app.doctors.unshift({ name });
-			app.saveDoctors();
-		}
-
-		app.currentUser.name = name;
-		app.currentUser.role = role;
-		app.currentUser.specialty = specialty;
-
-		app.saveUser();
-		app.updateUserDisplay();
-		app.hideModal('userModal');
-	};
-
-	// Doctor modal open/close wiring
-	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/ui/handlers.js

@@ -1,68 +0,0 @@
-// ui/handlers.js
-// DOM wiring helpers: sidebar open/close, modal wiring, textarea autosize, export/clear
-
-export function attachUIHandlers(app) {
-	// Sidebar toggle implementation
-	app.toggleSidebar = function () {
-		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');
-		}
-	};
-
-	// Textarea autosize
-	app.autoResizeTextarea = function (textarea) {
-		if (!textarea) return;
-		textarea.style.height = 'auto';
-		textarea.style.height = Math.min(textarea.scrollHeight, 120) + 'px';
-	};
-
-	// Export current chat as JSON
-	app.exportChat = function () {
-		if (!app.currentSession || app.currentSession.messages.length === 0) {
-			alert('No chat to export.');
-			return;
-		}
-		const chatData = {
-			user: app.currentUser?.name || 'Unknown',
-			session: app.currentSession.title,
-			date: new Date().toISOString(),
-			messages: app.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-${app.currentSession.title.replace(/[^a-z0-9]/gi, '-')}.json`;
-		document.body.appendChild(a);
-		a.click();
-		document.body.removeChild(a);
-		URL.revokeObjectURL(url);
-	};
-
-	// Clear current chat
-	app.clearChat = function () {
-		if (confirm('Are you sure you want to clear this chat? This action cannot be undone.')) {
-			app.clearChatMessages();
-			if (app.currentSession) {
-				app.currentSession.messages = [];
-				app.currentSession.title = 'New Chat';
-				app.updateChatTitle();
-			}
-		}
-	};
-
-	// Generic modal helpers
-	app.showModal = function (modalId) {
-		document.getElementById(modalId)?.classList.add('show');
-	};
-	app.hideModal = function (modalId) {
-		document.getElementById(modalId)?.classList.remove('show');
-	};
-}

static/js/ui/patient.js

@@ -1,246 +0,0 @@
-// ui/patient.js
-// Patient selection, typeahead search, load/hydrate, patient modal wiring
-
-export function attachPatientUI(app) {
-	// State helpers
-	app.loadSavedPatientId = function () {
-		const pid = localStorage.getItem('medicalChatbotPatientId');
-		if (pid && /^\d{8}$/.test(pid)) {
-			app.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;
-		}
-	};
-
-	app.savePatientId = function () {
-		if (app.currentPatientId) localStorage.setItem('medicalChatbotPatientId', app.currentPatientId);
-		else localStorage.removeItem('medicalChatbotPatientId');
-	};
-
-	app.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);
-		app.currentPatientId = id;
-		app.savePatientId();
-		if (status) { status.textContent = `Patient: ${id}`; status.style.color = 'var(--text-secondary)'; }
-		await app.fetchAndRenderPatientSessions();
-	};
-
-	app.fetchAndRenderPatientSessions = async function () {
-		if (!app.currentPatientId) return;
-		try {
-			const resp = await fetch(`/patients/${app.currentPatientId}/sessions`);
-			if (resp.ok) {
-				const data = await resp.json();
-				const sessions = Array.isArray(data.sessions) ? data.sessions : [];
-				app.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 (app.backendSessions.length > 0) {
-					app.currentSession = app.backendSessions[0];
-					await app.hydrateMessagesForSession(app.currentSession.id);
-				}
-			} else {
-				console.warn('Failed to fetch patient sessions', resp.status);
-				app.backendSessions = [];
-			}
-		} catch (e) {
-			console.error('Failed to load patient sessions', e);
-			app.backendSessions = [];
-		}
-		app.loadChatSessions();
-	};
-
-	app.hydrateMessagesForSession = async function (sessionId) {
-		try {
-			const resp = await fetch(`/sessions/${sessionId}/messages?patient_id=${app.currentPatientId}&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 || app.generateId(),
-				role: m.role,
-				content: m.content,
-				timestamp: m.timestamp
-			}));
-			if (app.currentSession && app.currentSession.id === sessionId) {
-				app.currentSession.messages = normalized;
-				app.clearChatMessages();
-				app.currentSession.messages.forEach(m => app.displayMessage(m));
-				app.updateChatTitle();
-			}
-		} catch (e) {
-			console.error('Failed to hydrate session messages', e);
-		}
-	};
-
-	// Bind patient input + typeahead + load button
-	app.bindPatientHandlers = function () {
-		console.log('[DEBUG] bindPatientHandlers called');
-		const loadBtn = document.getElementById('loadPatientBtn');
-		console.log('[DEBUG] Load button found:', !!loadBtn);
-		if (loadBtn) loadBtn.addEventListener('click', () => app.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 () => {
-					app.currentPatientId = p.patient_id;
-					app.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 app.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 app.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);
-								app.currentPatientId = first.patient_id;
-								app.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 app.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 wiring
-	document.addEventListener('DOMContentLoaded', () => {
-		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 = app?.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?')) {
-					app.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'));
-	});
-}
-
-

static/js/ui/settings.js

@@ -1,74 +0,0 @@
-// ui/settings.js
-// Settings UI: theme/font preferences, showLoading overlay, settings modal wiring
-
-export function attachSettingsUI(app) {
-	app.loadUserPreferences = function () {
-		const preferences = localStorage.getItem('medicalChatbotPreferences');
-		if (preferences) {
-			const prefs = JSON.parse(preferences);
-			app.setTheme(prefs.theme || 'auto');
-			app.setFontSize(prefs.fontSize || 'medium');
-		}
-	};
-
-	app.setupTheme = function () {
-		if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
-			app.setTheme('auto');
-		}
-	};
-
-	app.setTheme = function (theme) {
-		const root = document.documentElement;
-		if (theme === 'auto') {
-			const isDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
-			root.setAttribute('data-theme', isDark ? 'dark' : 'light');
-		} else {
-			root.setAttribute('data-theme', theme);
-		}
-		const sel = document.getElementById('themeSelect');
-		if (sel) sel.value = theme;
-		app.savePreferences();
-	};
-
-	app.setFontSize = function (size) {
-		const root = document.documentElement;
-		root.style.fontSize = size === 'small' ? '14px' : size === 'large' ? '18px' : '16px';
-		app.savePreferences();
-	};
-
-	app.savePreferences = function () {
-		const preferences = {
-			theme: document.getElementById('themeSelect')?.value,
-			fontSize: document.getElementById('fontSize')?.value,
-			autoSave: document.getElementById('autoSave')?.checked,
-			notifications: document.getElementById('notifications')?.checked
-		};
-		localStorage.setItem('medicalChatbotPreferences', JSON.stringify(preferences));
-	};
-
-	app.showLoading = function (show) {
-		app.isLoading = show;
-		const overlay = document.getElementById('loadingOverlay');
-		const sendBtn = document.getElementById('sendBtn');
-		if (!overlay || !sendBtn) return;
-		if (show) {
-			overlay.classList.add('show');
-			sendBtn.disabled = true;
-		} else {
-			overlay.classList.remove('show');
-			sendBtn.disabled = false;
-		}
-	};
-
-	// Settings modal open/close wiring
-	document.addEventListener('DOMContentLoaded', () => {
-		const settingsBtn = document.getElementById('settingsBtn');
-		const modal = document.getElementById('settingsModal');
-		const closeBtn = document.getElementById('settingsModalClose');
-		const cancelBtn = document.getElementById('settingsModalCancel');
-		if (settingsBtn && modal) settingsBtn.addEventListener('click', () => modal.classList.add('show'));
-		if (closeBtn) closeBtn.addEventListener('click', () => modal.classList.remove('show'));
-		if (cancelBtn) cancelBtn.addEventListener('click', () => modal.classList.remove('show'));
-		if (modal) modal.addEventListener('click', (e) => { if (e.target === modal) modal.classList.remove('show'); });
-	});
-}