reneco-advanced-input-module 0.0.21 → 0.0.23

package/dist/cjs/voice-input-module.cjs.entry.js

@@ -2,69 +2,96 @@
 
 var index = require('./index-BTSzTkSZ.js');
 
+const TRANSCRIPTION_MODELS = {
+    openai: ['gpt-4o-transcribe', 'gpt-4o-mini-transcribe', 'whisper-1'],
+    mistral: ['voxtral-mini-latest', 'voxtral-mini-transcribe-realtime-latest'],
+};
+const COMPLETION_MODELS = {
+    openai: ['gpt-5', 'gpt-5-mini', 'gpt-5.5', 'gpt-4.1', 'gpt-4.1-mini', 'gpt-4o', 'gpt-4o-mini', 'o4-mini', 'gpt-5.2', 'gpt-5.3', 'gpt-5.4', 'gpt-5.4-mini', 'gpt-5.4-pro', 'gpt-5.4-nano'],
+    anthropic: ['claude-opus-4', 'claude-sonnet-4', 'claude-haiku-4', 'claude-3.7-sonnet', 'claude-3.5-sonnet', 'claude-opus-4.7', 'claude-opus-4.6', 'claude-opus-4.5', 'claude-sonnet-4.6', 'claude-sonnet-4.5'],
+    mistral: ['mistral-large-latest', 'mistral-medium-latest', 'mistral-small-latest', 'ministral', 'mistral-nemo'],
+};
+
 class AudioRecorderService {
     constructor() {
         this.mediaRecorder = null;
         this.audioChunks = [];
         this.stream = null;
+        this.audioContext = null;
+        this.scriptProcessor = null;
+        this.pcmChunks = [];
+        this.sampleRate = 16000;
     }
     async startRecording() {
-        try {
-            // Check if the API exists before calling
-            if (!navigator.mediaDevices || !navigator.mediaDevices.getUserMedia) {
-                console.error('Failed to start recording:', 'Microphone access is not supported in this browser or the page is not served over HTTPS/localhost.');
-                return; // Exit gracefully instead of throwing
-            }
-            this.stream = await navigator.mediaDevices.getUserMedia({
-                audio: {
-                    echoCancellation: true,
-                    noiseSuppression: true,
-                    autoGainControl: true
-                }
-            });
-            this.audioChunks = [];
-            this.mediaRecorder = new MediaRecorder(this.stream, {
-                mimeType: 'audio/webm;codecs=opus'
-            });
-            this.mediaRecorder.ondataavailable = (event) => {
-                if (event.data && event.data.size > 0) {
-                    this.audioChunks.push(event.data);
-                }
-            };
-            this.mediaRecorder.start(100); // Collect data every 100ms
-        }
-        catch (error) {
-            console.error('Failed to start recording:', error);
+        if (!navigator.mediaDevices || !navigator.mediaDevices.getUserMedia) {
+            throw new Error('Microphone access is not supported in this browser or the page is not served over HTTPS/localhost.');
         }
+        this.stream = await navigator.mediaDevices.getUserMedia({
+            audio: { echoCancellation: true, noiseSuppression: true, autoGainControl: true }
+        });
+        this.audioContext = new AudioContext({ sampleRate: this.sampleRate });
+        const source = this.audioContext.createMediaStreamSource(this.stream);
+        this.scriptProcessor = this.audioContext.createScriptProcessor(4096, 1, 1);
+        this.pcmChunks = [];
+        this.scriptProcessor.onaudioprocess = (e) => {
+            const input = e.inputBuffer.getChannelData(0);
+            this.pcmChunks.push(new Float32Array(input));
+        };
+        source.connect(this.scriptProcessor);
+        this.scriptProcessor.connect(this.audioContext.destination);
     }
     async stopRecording() {
-        return new Promise((resolve, reject) => {
-            if (!this.mediaRecorder) {
-                reject(new Error('No active recording found'));
-                return;
+        if (!this.audioContext || !this.scriptProcessor) {
+            throw new Error('No active recording found');
+        }
+        this.scriptProcessor.disconnect();
+        await this.audioContext.close();
+        const wavBlob = this.encodeWav(this.pcmChunks, this.sampleRate);
+        this.cleanup();
+        return wavBlob;
+    }
+    encodeWav(chunks, sampleRate) {
+        const totalSamples = chunks.reduce((acc, c) => acc + c.length, 0);
+        const buffer = new ArrayBuffer(44 + totalSamples * 2);
+        const view = new DataView(buffer);
+        const writeStr = (offset, str) => {
+            for (let i = 0; i < str.length; i++)
+                view.setUint8(offset + i, str.charCodeAt(i));
+        };
+        writeStr(0, 'RIFF');
+        view.setUint32(4, 36 + totalSamples * 2, true);
+        writeStr(8, 'WAVE');
+        writeStr(12, 'fmt ');
+        view.setUint32(16, 16, true); // PCM chunk size
+        view.setUint16(20, 1, true); // PCM format
+        view.setUint16(22, 1, true); // mono
+        view.setUint32(24, sampleRate, true);
+        view.setUint32(28, sampleRate * 2, true); // byte rate
+        view.setUint16(32, 2, true); // block align
+        view.setUint16(34, 16, true); // bits per sample
+        writeStr(36, 'data');
+        view.setUint32(40, totalSamples * 2, true);
+        let offset = 44;
+        for (const chunk of chunks) {
+            for (let i = 0; i < chunk.length; i++) {
+                const s = Math.max(-1, Math.min(1, chunk[i]));
+                view.setInt16(offset, s < 0 ? s * 0x8000 : s * 0x7FFF, true);
+                offset += 2;
             }
-            this.mediaRecorder.onstop = () => {
-                const audioBlob = new Blob(this.audioChunks, { type: 'audio/webm' });
-                this.cleanup();
-                resolve(audioBlob);
-            };
-            this.mediaRecorder.onerror = (event) => {
-                reject(new Error(`Recording error: ${event}`));
-            };
-            this.mediaRecorder.stop();
-        });
+        }
+        return new Blob([buffer], { type: 'audio/wav' });
     }
     isRecording() {
-        var _a;
-        return ((_a = this.mediaRecorder) === null || _a === void 0 ? void 0 : _a.state) === 'recording';
+        return this.scriptProcessor !== null;
     }
     cleanup() {
         if (this.stream) {
             this.stream.getTracks().forEach(track => track.stop());
             this.stream = null;
         }
-        this.mediaRecorder = null;
-        this.audioChunks = [];
+        this.audioContext = null;
+        this.scriptProcessor = null;
+        this.pcmChunks = [];
     }
 }
 
@@ -126,15 +153,49 @@ class WhisperSpeechToTextService {
         }
     }
 }
+class MistralSpeechToTextService {
+    constructor(config) {
+        this.useProxy = (config === null || config === void 0 ? void 0 : config.useProxy) || false;
+        this.proxyUrl = (config === null || config === void 0 ? void 0 : config.proxyUrl) || 'http://localhost:8492';
+        this.model = (config === null || config === void 0 ? void 0 : config.model) || 'voxtral-mini-latest';
+        this.apiKey = this.useProxy ? '' : ((config === null || config === void 0 ? void 0 : config.apiKey) || '');
+        if (!this.useProxy && !this.apiKey) {
+            throw new Error('Mistral API key is required for speech-to-text service');
+        }
+    }
+    async transcribe(audioContent, lang = 'en') {
+        var _a;
+        try {
+            const formData = new FormData();
+            formData.append('file', audioContent);
+            formData.append('model', this.model);
+            formData.append('language', lang);
+            const endpoint = this.useProxy ? `${this.proxyUrl}/transcribe-mistral` : 'https://api.mistral.ai/v1/audio/transcriptions';
+            const headers = {};
+            if (!this.useProxy) {
+                headers['Authorization'] = `Bearer ${this.apiKey}`;
+            }
+            const response = await fetch(endpoint, { method: 'POST', headers, body: formData });
+            if (!response.ok) {
+                const err = await response.json().catch(() => ({ error: 'Unknown error' }));
+                throw new Error(`Transcription failed: ${((_a = err.error) === null || _a === void 0 ? void 0 : _a.message) || response.statusText}`);
+            }
+            const result = await response.json();
+            return result.text || '';
+        }
+        catch (error) {
+            throw new Error(`Mistral speech-to-text failed: ${error.message}`);
+        }
+    }
+}
 class SpeechToTextServiceFactory {
     static create(config) {
         var _a;
-        const provider = ((_a = config.speechToText) === null || _a === void 0 ? void 0 : _a.provider) || 'whisper';
+        const provider = ((_a = config.speechToText) === null || _a === void 0 ? void 0 : _a.provider) || 'openai';
         switch (provider) {
-            case 'whisper':
-                return new WhisperSpeechToTextService(config.speechToText);
-            default:
-                throw new Error(`Unsupported speech-to-text provider: ${provider}`);
+            case 'openai': return new WhisperSpeechToTextService(config.speechToText);
+            case 'mistral': return new MistralSpeechToTextService(config.speechToText);
+            default: throw new Error(`Unsupported speech-to-text provider: ${provider}`);
         }
     }
 }
@@ -326,7 +387,8 @@ class OpenAILLMService {
                     `${field.readonly ? ', readonly' : ''}` +
                     `${field.default !== undefined && field.default !== null && field.default !== '' ? ', default=' + field.default : ''}` +
                     `${field.min && field.min !== "" ? ', min=' + field.min : ''}` +
-                    `${field.max && field.max !== "" ? ', max=' + field.max : ''}`;
+                    `${field.max && field.max !== "" ? ', max=' + field.max : ''}` +
+                    `${field.pattern && field.pattern !== "" ? ', pattern=' + field.pattern : ''}`;
                 if (field.options && field.options.length > 0) {
                     if (field.options.length < 50) {
                         description += `) - options: ${field.options.join(', ')}`;
@@ -348,7 +410,8 @@ class OpenAILLMService {
                 `${field.readonly ? ', readonly' : ''}` +
                 `${field.default !== undefined && field.default !== null && field.default !== '' ? ', default=' + field.default : ''}` +
                 `${field.min && field.min !== "" ? ', min=' + field.min : ''}` +
-                `${field.max && field.max !== "" ? ', max=' + field.max : ''}`;
+                `${field.max && field.max !== "" ? ', max=' + field.max : ''}` +
+                `${field.pattern && field.pattern !== "" ? ', pattern=' + field.pattern : ''}`;
             if (field.options && field.options.length > 0) {
                 if (field.options.length < 50) {
                     description += `) - options: ${field.options.join(', ')}`;
@@ -492,12 +555,14 @@ class OpenAILLMService {
           7. Only include fields where relevant information is found
           8. The current GMT datetime is ${new Date().toGMTString()}
           9. Respect the constraints written between parenthesis for readonly status (readonly fields MUST NOT be filled with values), min and max values, whatever the transcription says
+          9b. CRITICAL - DATE/DATETIME OUT OF RANGE: For date and datetime fields with min and/or max constraints, if the value from the transcription falls outside the allowed range, leave the field EMPTY. NEVER clamp, adjust, or substitute a boundary date - either the date is valid and within range, or the field is left empty
           10. IMPORTANT: Fields marked as "readonly" are presentation elements (headers, labels) that provide context but MUST NOT receive values
           11. CRITICAL - DUPLICATE FIELDS: When you see multiple fields with the same name but different IDs (e.g., "ID:field1 | Event date" and "ID:field2 | Event date"), these are DIFFERENT fields in DIFFERENT sections. The user may explicitly say which section they are filling (e.g., "for the first/second sub-form"). Listen VERY CAREFULLY to these contextual clues. Use the readonly headers to understand which section each field belongs to. If the user says "for the clinical sign, the event date is X", you must fill the Event date field that comes AFTER the "MC Clinical sign" header, NOT the first Event date you see
           12. Use readonly fields as contextual hints to understand form structure and field grouping, but never fill them
-          13. CRITICAL: For select fields, options like "No", "Non", "Non applicable", "Inconnu", "Unknown", "N/A" are VALID VALUES that can be selected. When the user says these words, treat them as legitimate option choices, NOT always as negations or refusals to answer. HOWEVER, for non-select fields (string, number, date, etc.), if the user says "I don't know", "unknown", "not known", "inconnu", "je ne sais pas", this usually means they have NO VALUE to provide, unless explicitely precised - leave the field empty, do NOT fill it with the literal text "unknown" or "I don't know"
+          13. CRITICAL - UNKNOWN/NO/N-A VALUES: The interpretation of words like "Unknown", "Inconnu", "No", "Non", "N/A", "Non applicable" depends ENTIRELY on whether the field has those words as explicit options. Rule: if the user says "field X is Unknown" (or any similar phrasing) AND "Unknown" (or a close variant) exists in the options list for that field, then SELECT that option - it is a valid value. If the user says such words for a field that does NOT have them as options (string, number, date, etc.), then it means the user has no value to provide - leave the field empty, do NOT fill it with the literal text
           14. CRITICAL: Each field has a unique ID shown as "ID:xxx" at the start of its description. You MUST include this exact ID in your response for each field you fill. The ID is the ONLY way to distinguish between fields with the same name
           15. CRITICAL - DEFAULT VALUES: Some fields have default values shown as "default=xxx". If the user does NOT mention a specific value for that field in the transcription, you MUST return the default value. Default values should be preserved unless explicitly overridden by the user
+          16. CRITICAL - PATTERN VALIDATION: Some fields have a regex pattern shown as "pattern=xxx". The value you extract MUST match this pattern exactly. If the transcription is too ambiguous to produce a value that matches the pattern, leave the field EMPTY
 
           Respond with JSON in this exact format: {"fields": [{"id": "field_id", "name": "field_name", "value": "extracted_value"}]}`;
                 let userPrompt = `
@@ -566,10 +631,12 @@ class OpenAILLMService {
         8. Return the same schema structure with 'default' values filled
         9. The current GMT datetime is ${new Date().toGMTString()}
         10. Respect the constraints written between parenthesis for readonly status (readonly fields MUST NOT be filled with values), min and max values, whatever the transcription says
+        10b. CRITICAL - DATE/DATETIME OUT OF RANGE: For date and datetime fields with min and/or max constraints, if the value from the transcription falls outside the allowed range, leave the field EMPTY. NEVER clamp, adjust, or substitute a boundary date - either the date is valid and within range, or the field is left empty
         11. IMPORTANT: Fields marked as "readonly" are presentation elements (headers, labels) that provide context but MUST NOT receive values
         12. CRITICAL - DUPLICATE FIELDS: When you see multiple fields with the same name but different IDs (e.g., "ID:field1 | Event date" and "ID:field2 | Event date"), these are DIFFERENT fields in DIFFERENT sections. The user will explicitly say which section they are filling (e.g., "for the first/second sub-form", "in the anamnesis section", "for the clinical sign"). Listen VERY CAREFULLY to these contextual clues. Use the readonly headers to understand which section each field belongs to. If the user says "for the clinical sign, the event date is X", you must fill the Event date field that comes AFTER the "MC Clinical sign" header, NOT the first Event date you see
         13. Use readonly fields as contextual hints to understand form structure and field grouping, but never fill them
-        14. CRITICAL: For select fields, options like "No", "Non", "Non applicable", "Inconnu", "Unknown", "N/A" are VALID VALUES that can be selected. When the user says these words, treat them as legitimate option choices, NOT always as negations or refusals to answer. HOWEVER, for non-select fields (string, number, date, etc.), if the user says "I don't know", "unknown", "not known", "inconnu", "je ne sais pas", this usually means they have NO VALUE to provide, unless explicitely precised - leave the field empty, do NOT fill it with the literal text "unknown" or "I don't know"
+        14. CRITICAL - UNKNOWN/NO/N-A VALUES: The interpretation of words like "Unknown", "Inconnu", "No", "Non", "N/A", "Non applicable" depends ENTIRELY on whether the field has those words as explicit options. Rule: if the user says "field X is Unknown" (or any similar phrasing) AND "Unknown" (or a close variant) exists in the options list for that field, then SELECT that option - it is a valid value. If the user says such words for a field that does NOT have them as options (string, number, date, etc.), then it means the user has no value to provide - leave the field empty, do NOT fill it with the literal text
+        15. CRITICAL - PATTERN VALIDATION: Some fields have a regex pattern shown as "pattern=xxx". The value you extract MUST match this pattern exactly. If the transcription is too ambiguous to produce a value that matches the pattern, leave the field EMPTY
 
         Respond with JSON in this exact format: {"schema": {...}}`;
             let userPrompt = `
@@ -633,15 +700,138 @@ class OpenAILLMService {
         }
     }
 }
+class AnthropicLLMService {
+    constructor(config) {
+        this.useProxy = (config === null || config === void 0 ? void 0 : config.useProxy) || false;
+        this.proxyUrl = (config === null || config === void 0 ? void 0 : config.proxyUrl) || 'http://localhost:8492';
+        this.model = (config === null || config === void 0 ? void 0 : config.model) || 'claude-sonnet-4.5';
+        this.apiKey = this.useProxy ? '' : ((config === null || config === void 0 ? void 0 : config.apiKey) || '');
+        if (!this.useProxy && !this.apiKey) {
+            throw new Error('Anthropic API key is required');
+        }
+    }
+    async fillFormFromTranscription(transcription, schema) {
+        return this.fillForm(transcription, schema);
+    }
+    async fillFormFromJson(json, schema) {
+        return this.fillForm(json, schema);
+    }
+    async fillForm(data, schema) {
+        var _a;
+        const endpoint = this.useProxy ? `${this.proxyUrl}/complete-anthropic` : 'https://api.anthropic.com/v1/messages';
+        const headers = { 'Content-Type': 'application/json' };
+        if (!this.useProxy) {
+            headers['x-api-key'] = this.apiKey;
+            headers['anthropic-version'] = '2023-06-01';
+        }
+        const finalSchema = (schema === null || schema === void 0 ? void 0 : schema.fields) || (schema === null || schema === void 0 ? void 0 : schema.schema) || schema;
+        const systemPrompt = this.buildSystemPrompt();
+        const userPrompt = `Data: "${data}"
+
+Form fields:
+${JSON.stringify(finalSchema, null, 2)}
+
+Respond with JSON: {"fields": [{"id": "field_id", "name": "field_name", "value": "extracted_value"}]}`;
+        const body = this.useProxy
+            ? { model: this.model, messages: [{ role: 'user', content: userPrompt }], system: systemPrompt }
+            : { model: this.model, max_tokens: 4096, system: systemPrompt, messages: [{ role: 'user', content: userPrompt }] };
+        const response = await fetch(endpoint, { method: 'POST', headers, body: JSON.stringify(body) });
+        if (!response.ok) {
+            const err = await response.json().catch(() => ({ error: 'Unknown error' }));
+            throw new Error(`Anthropic API failed: ${((_a = err.error) === null || _a === void 0 ? void 0 : _a.message) || response.statusText}`);
+        }
+        const result = await response.json();
+        const content = this.useProxy ? result.choices[0].message.content : result.content[0].text;
+        return JSON.parse(content);
+    }
+    buildSystemPrompt() {
+        return `You are an expert form-filling assistant. Extract values from the input data and fill form fields.
+Rules:
+1. Only extract values that can be confidently determined
+2. Respect field types (string, number, datetime, boolean, select)
+3. For datetime fields, use ISO format (YYYY-MM-DDTHH:MM)
+4. For date fields, use DD/MM/YYYY format
+5. For select fields, use exact option values from the provided choices
+6. Leave fields empty if no relevant information is found
+7. Fields marked readonly MUST NOT receive values
+8. DATE/DATETIME OUT OF RANGE: if a date falls outside min/max constraints, leave the field EMPTY
+9. PATTERN VALIDATION: if a field has a pattern, the value MUST match it exactly, otherwise leave empty
+10. UNKNOWN VALUES: if the user says "Unknown" and it exists as an option, select it; otherwise leave empty
+Respond ONLY with valid JSON.`;
+    }
+}
+class MistralLLMService {
+    constructor(config) {
+        this.useProxy = (config === null || config === void 0 ? void 0 : config.useProxy) || false;
+        this.proxyUrl = (config === null || config === void 0 ? void 0 : config.proxyUrl) || 'http://localhost:8492';
+        this.model = (config === null || config === void 0 ? void 0 : config.model) || 'mistral-medium-latest';
+        this.apiKey = this.useProxy ? '' : ((config === null || config === void 0 ? void 0 : config.apiKey) || '');
+        if (!this.useProxy && !this.apiKey) {
+            throw new Error('Mistral API key is required');
+        }
+    }
+    async fillFormFromTranscription(transcription, schema) {
+        return this.fillForm(transcription, schema);
+    }
+    async fillFormFromJson(json, schema) {
+        return this.fillForm(json, schema);
+    }
+    async fillForm(data, schema) {
+        var _a;
+        const endpoint = this.useProxy ? `${this.proxyUrl}/complete-mistral` : 'https://api.mistral.ai/v1/chat/completions';
+        const headers = { 'Content-Type': 'application/json' };
+        if (!this.useProxy) {
+            headers['Authorization'] = `Bearer ${this.apiKey}`;
+        }
+        const finalSchema = (schema === null || schema === void 0 ? void 0 : schema.fields) || (schema === null || schema === void 0 ? void 0 : schema.schema) || schema;
+        const systemPrompt = this.buildSystemPrompt();
+        const userPrompt = `Data: "${data}"
+
+Form fields:
+${JSON.stringify(finalSchema, null, 2)}
+
+Respond with JSON: {"fields": [{"id": "field_id", "name": "field_name", "value": "extracted_value"}]}`;
+        const response = await fetch(endpoint, {
+            method: 'POST',
+            headers,
+            body: JSON.stringify({
+                model: this.model,
+                messages: [{ role: 'system', content: systemPrompt }, { role: 'user', content: userPrompt }],
+                response_format: { type: 'json_object' },
+            }),
+        });
+        if (!response.ok) {
+            const err = await response.json().catch(() => ({ error: 'Unknown error' }));
+            throw new Error(`Mistral API failed: ${((_a = err.error) === null || _a === void 0 ? void 0 : _a.message) || response.statusText}`);
+        }
+        const result = await response.json();
+        return JSON.parse(result.choices[0].message.content);
+    }
+    buildSystemPrompt() {
+        return `You are an expert form-filling assistant. Extract values from the input data and fill form fields.
+Rules:
+1. Only extract values that can be confidently determined
+2. Respect field types (string, number, datetime, boolean, select)
+3. For datetime fields, use ISO format (YYYY-MM-DDTHH:MM)
+4. For date fields, use DD/MM/YYYY format
+5. For select fields, use exact option values from the provided choices
+6. Leave fields empty if no relevant information is found
+7. Fields marked readonly MUST NOT receive values
+8. DATE/DATETIME OUT OF RANGE: if a date falls outside min/max constraints, leave the field EMPTY
+9. PATTERN VALIDATION: if a field has a pattern, the value MUST match it exactly, otherwise leave empty
+10. UNKNOWN VALUES: if the user says "Unknown" and it exists as an option, select it; otherwise leave empty
+Respond ONLY with valid JSON.`;
+    }
+}
 class LLMServiceFactory {
     static create(config) {
         var _a;
         const provider = ((_a = config.llm) === null || _a === void 0 ? void 0 : _a.provider) || 'openai';
         switch (provider) {
-            case 'openai':
-                return new OpenAILLMService(config.llm);
-            default:
-                throw new Error(`Unsupported LLM provider: ${provider}`);
+            case 'openai': return new OpenAILLMService(config.llm);
+            case 'anthropic': return new AnthropicLLMService(config.llm);
+            case 'mistral': return new MistralLLMService(config.llm);
+            default: throw new Error(`Unsupported LLM provider: ${provider}`);
         }
     }
 }
@@ -4161,6 +4351,8 @@ const VoiceFormRecorder = class {
         this.apiProxyUrl = 'http://localhost:8492';
         this.transcriptionModel = 'gpt-4o-transcribe';
         this.completionModel = 'gpt-5-mini';
+        this.transcriptionProvider = 'openai';
+        this.completionProvider = 'openai';
         this.context = undefined;
         this.classificationRootUrl = 'http://localhost';
         this.language = 'en';
@@ -4172,6 +4364,7 @@ const VoiceFormRecorder = class {
         this.isRecording = false;
         this.isProcessing = false;
         this.hasError = false;
+        this.hasTransientError = false;
         this.transcription = '';
         this.filledData = null;
         this.debugInfo = {};
@@ -4184,7 +4377,21 @@ const VoiceFormRecorder = class {
             if (!input.files || input.files.length === 0)
                 return;
             const file = input.files[0];
-            this.processAudioContent(file);
+            const isEn = this.language === 'en';
+            // Validate file type
+            const validAudioTypes = /^audio\//;
+            const validAudioExtensions = /\.(mp3|wav|webm|m4a|ogg|flac|aac|opus)$/i;
+            if (!validAudioTypes.test(file.type) && !validAudioExtensions.test(file.name)) {
+                this.hasTransientError = true;
+                this.statusMessage = isEn
+                    ? `Invalid file type: "${file.name}". Please select an audio file.`
+                    : `Type de fichier invalide : "${file.name}". Veuillez sélectionner un fichier audio.`;
+                input.value = '';
+                return;
+            }
+            // Reset the input so the same file can be re-selected after an error
+            input.value = '';
+            await this.processAudioContent(file);
         };
         this.audioRecorder = new AudioRecorderService();
     }
@@ -4208,17 +4415,33 @@ const VoiceFormRecorder = class {
                 this.updateDebugInfo(errorMessage, { error: errorMessage });
             }
             else {
+                // Validate transcription provider/model
+                const allowedTranscriptionModels = TRANSCRIPTION_MODELS[this.transcriptionProvider];
+                if (!allowedTranscriptionModels) {
+                    throw new Error(`Unsupported transcription provider: '${this.transcriptionProvider}'. Allowed: openai, mistral`);
+                }
+                if (!allowedTranscriptionModels.includes(this.transcriptionModel)) {
+                    throw new Error(`Model '${this.transcriptionModel}' is not allowed for transcription provider '${this.transcriptionProvider}'. Allowed: ${allowedTranscriptionModels.join(', ')}`);
+                }
+                // Validate completion provider/model
+                const allowedCompletionModels = COMPLETION_MODELS[this.completionProvider];
+                if (!allowedCompletionModels) {
+                    throw new Error(`Unsupported completion provider: '${this.completionProvider}'. Allowed: openai, anthropic, mistral`);
+                }
+                if (!allowedCompletionModels.includes(this.completionModel)) {
+                    throw new Error(`Model '${this.completionModel}' is not allowed for completion provider '${this.completionProvider}'. Allowed: ${allowedCompletionModels.join(', ')}`);
+                }
                 // Parse form schema
                 this.parsedSchema = JSON.parse(this.formJson || '{}');
                 // Parse service configuration
                 this.parsedConfig = JSON.parse(this.serviceConfig || '{}');
                 // Add API key to config if provided via prop
                 if (this.apiKey) {
-                    this.parsedConfig = Object.assign(Object.assign({}, this.parsedConfig), { speechToText: Object.assign(Object.assign({}, this.parsedConfig.speechToText), { apiKey: this.apiKey, model: this.transcriptionModel }), llm: Object.assign(Object.assign({}, this.parsedConfig.llm), { apiKey: this.apiKey, model: this.completionModel }) });
+                    this.parsedConfig = Object.assign(Object.assign({}, this.parsedConfig), { speechToText: Object.assign(Object.assign({}, this.parsedConfig.speechToText), { provider: this.transcriptionProvider, apiKey: this.apiKey, model: this.transcriptionModel }), llm: Object.assign(Object.assign({}, this.parsedConfig.llm), { provider: this.completionProvider, apiKey: this.apiKey, model: this.completionModel }) });
                 }
                 else {
                     // Use proxy API if no API key provided
-                    this.parsedConfig = Object.assign(Object.assign({}, this.parsedConfig), { speechToText: Object.assign(Object.assign({}, this.parsedConfig.speechToText), { useProxy: true, proxyUrl: this.apiProxyUrl, model: this.transcriptionModel }), llm: Object.assign(Object.assign({}, this.parsedConfig.llm), { useProxy: true, proxyUrl: this.apiProxyUrl, model: this.completionModel }) });
+                    this.parsedConfig = Object.assign(Object.assign({}, this.parsedConfig), { speechToText: Object.assign(Object.assign({}, this.parsedConfig.speechToText), { provider: this.transcriptionProvider, useProxy: true, proxyUrl: this.apiProxyUrl, model: this.transcriptionModel }), llm: Object.assign(Object.assign({}, this.parsedConfig.llm), { provider: this.completionProvider, useProxy: true, proxyUrl: this.apiProxyUrl, model: this.completionModel }) });
                 }
                 // Initialize services
                 this.speechToTextService = SpeechToTextServiceFactory.create(this.parsedConfig);
@@ -4228,6 +4451,7 @@ const VoiceFormRecorder = class {
                     config: this.parsedConfig
                 });
                 this.hasError = false;
+                this.hasTransientError = false;
                 this.statusMessage = ((_a = this.parsedTheme.texts) === null || _a === void 0 ? void 0 : _a.idle) || (this.language == 'en' ? 'Select an input method' : 'Sélectionner une méthode de saisie');
                 if (this.parsedInputTypes.length === 0) {
                     this.inputTypes = 'voice';
@@ -4248,6 +4472,91 @@ const VoiceFormRecorder = class {
                 } });
         }
     }
+    getMicErrorMessage(error) {
+        var _a, _b;
+        const isEn = this.language === 'en';
+        const errorName = error.name || '';
+        if (errorName === 'NotAllowedError' || errorName === 'PermissionDeniedError') {
+            return isEn
+                ? 'Microphone access denied. Allow microphone access in your browser settings and try again.'
+                : "Accès au microphone refusé. Autorisez l'accès au microphone dans les paramètres du navigateur et réessayez.";
+        }
+        if (errorName === 'NotFoundError' || errorName === 'DevicesNotFoundError') {
+            return isEn
+                ? 'No microphone found. Please connect a microphone and try again.'
+                : 'Aucun microphone trouvé. Connectez un microphone et réessayez.';
+        }
+        if (errorName === 'NotReadableError' || errorName === 'TrackStartError') {
+            return isEn
+                ? 'Microphone is busy or unavailable. Close other apps using the microphone and try again.'
+                : 'Le microphone est occupé ou indisponible. Fermez les autres applications utilisant le microphone et réessayez.';
+        }
+        if (errorName === 'AbortError') {
+            return isEn
+                ? 'Microphone access was interrupted. Please try again.'
+                : "L'accès au microphone a été interrompu. Veuillez réessayer.";
+        }
+        if (errorName === 'OverconstrainedError') {
+            return isEn
+                ? 'Microphone does not support the required audio settings.'
+                : 'Le microphone ne supporte pas les paramètres audio requis.';
+        }
+        if (((_a = error.message) === null || _a === void 0 ? void 0 : _a.includes('HTTPS')) || ((_b = error.message) === null || _b === void 0 ? void 0 : _b.includes('not supported'))) {
+            return isEn
+                ? 'Microphone access requires HTTPS or localhost.'
+                : "L'accès au microphone nécessite HTTPS ou localhost.";
+        }
+        return isEn ? `Microphone error: ${error.message}` : `Erreur microphone : ${error.message}`;
+    }
+    getReadableErrorMessage(error, phase) {
+        const isEn = this.language === 'en';
+        const msg = error.message || '';
+        if (/401|unauthorized|invalid.{0,20}(api )?key|authentication failed/i.test(msg)) {
+            return isEn
+                ? 'Authentication failed: invalid API key. Check your configuration.'
+                : "Échec d'authentification : clé API invalide. Vérifiez votre configuration.";
+        }
+        if (/403|forbidden/i.test(msg)) {
+            return isEn
+                ? 'Access denied: check your API permissions.'
+                : 'Accès refusé : vérifiez vos permissions API.';
+        }
+        if (/429|rate.{0,10}limit|too many requests/i.test(msg)) {
+            return isEn
+                ? 'Rate limit exceeded. Please wait a moment and try again.'
+                : 'Limite de requêtes dépassée. Veuillez attendre quelques secondes et réessayer.';
+        }
+        if (/404|not found/i.test(msg)) {
+            return isEn
+                ? 'API endpoint not found. Check your proxy URL configuration.'
+                : "Endpoint API introuvable. Vérifiez l'URL de votre proxy.";
+        }
+        if (/5\d\d|server error|internal server|bad gateway|service unavailable/i.test(msg)) {
+            return isEn
+                ? 'Server error. Please try again in a moment.'
+                : 'Erreur serveur. Veuillez réessayer dans un instant.';
+        }
+        if (/network|failed to fetch|err_connection|connection refused/i.test(msg)) {
+            return isEn
+                ? 'Network error: check your connection and proxy server.'
+                : 'Erreur réseau : vérifiez votre connexion et le serveur proxy.';
+        }
+        if (/json|parse error|unexpected token|invalid response/i.test(msg)) {
+            return isEn
+                ? 'Unexpected response from AI service. Please try again.'
+                : 'Réponse inattendue du service IA. Veuillez réessayer.';
+        }
+        if (phase === 'transcription') {
+            return isEn ? `Transcription failed: ${msg}` : `Échec de la transcription : ${msg}`;
+        }
+        if (phase === 'llm') {
+            return isEn ? `Form filling failed: ${msg}` : `Échec du remplissage du formulaire : ${msg}`;
+        }
+        if (phase === 'ocr') {
+            return isEn ? `OCR processing failed: ${msg}` : `Échec du traitement OCR : ${msg}`;
+        }
+        return isEn ? `Processing error: ${msg}` : `Erreur de traitement : ${msg}`;
+    }
     async handleRecordClick() {
         if (this.isProcessing)
             return;
@@ -4261,7 +4570,7 @@ const VoiceFormRecorder = class {
     async startRecording() {
         var _a;
         try {
-            this.hasError = false;
+            this.hasTransientError = false;
             this.statusMessage = (this.language == 'en' ? 'Starting recording...' : `Enregistrement ...`);
             this.updateDebugInfo('Start Recording Attempt', {});
             await this.audioRecorder.startRecording();
@@ -4274,8 +4583,8 @@ const VoiceFormRecorder = class {
             });
         }
         catch (error) {
-            this.hasError = true;
-            this.statusMessage = (this.language == 'en' ? `Recording failed: ${error.message}` : `Echec de l'enregistrement : ${error.message}`);
+            this.hasTransientError = true;
+            this.statusMessage = this.getMicErrorMessage(error);
             this.updateDebugInfo('Recording Error', { error: error.message });
             this.formFilled.emit({
                 success: false,
@@ -4285,40 +4594,36 @@ const VoiceFormRecorder = class {
     }
     async processJsonForm(ocrData) {
         var _a, _b, _c;
+        this.isProcessing = true;
+        this.hasTransientError = false;
+        this.statusMessage = ((_a = this.parsedTheme.texts) === null || _a === void 0 ? void 0 : _a.processing) || (this.language == 'en' ? 'Processing document...' : 'Traitement du document ...');
         try {
-            this.isProcessing = true;
-            this.statusMessage = ((_a = this.parsedTheme.texts) === null || _a === void 0 ? void 0 : _a.processing) || (this.language == 'en' ? 'Processing json...' : `Traitement du json ...`);
-            // Extract content from OCR format
             const extractedData = (ocrData === null || ocrData === void 0 ? void 0 : ocrData.content) || ocrData;
             const jsonForm = JSON.stringify(extractedData);
-            // Fill form using LLM
+            if (!extractedData) {
+                throw Object.assign(new Error('OCR returned no data'), { phase: 'ocr' });
+            }
             this.statusMessage = ((_b = this.parsedTheme.texts) === null || _b === void 0 ? void 0 : _b.filling) || (this.language == 'en' ? 'Filling form fields...' : 'Remplissage du formulaire ...');
             const trimmedSchema = await this.trimSchemaForAI(this.parsedSchema);
-            const filledSchema = await this.llmService.fillFormFromJson(jsonForm, trimmedSchema);
-            // Extract filled data
+            let filledSchema;
+            try {
+                filledSchema = await this.llmService.fillFormFromJson(jsonForm, trimmedSchema);
+            }
+            catch (llmError) {
+                throw Object.assign(new Error(llmError.message), { phase: 'llm' });
+            }
             this.filledData = this.extractFilledData(filledSchema);
-            this.updateDebugInfo('Form Filled', {
-                filledSchema,
-                extractedData: this.filledData
-            });
+            this.updateDebugInfo('Form Filled', { filledSchema, extractedData: this.filledData });
             this.parsedSchema = this.filledData;
-            this.statusMessage = ((_c = this.parsedTheme.texts) === null || _c === void 0 ? void 0 : _c.completed) || (this.language == 'en' ? 'Form completed!' : 'Formulaire remplis !');
-            this.hasError = false;
-            // Emit success event
-            this.formFilled.emit({
-                success: true,
-                data: this.filledData,
-                jsonForm: jsonForm
-            });
+            this.statusMessage = ((_c = this.parsedTheme.texts) === null || _c === void 0 ? void 0 : _c.completed) || (this.language == 'en' ? 'Form completed!' : 'Formulaire rempli !');
+            this.formFilled.emit({ success: true, data: this.filledData, jsonForm });
         }
         catch (error) {
-            this.hasError = true;
-            this.statusMessage = (this.language == 'en' ? `Processing failed: ${error.message}` : `Erreur de traitement : ${error.message}`);
-            this.formFilled.emit({
-                success: false,
-                error: error.message,
-                jsonForm: JSON.stringify(ocrData)
-            });
+            console.error('OCR processing error:', error);
+            this.hasTransientError = true;
+            this.statusMessage = this.getReadableErrorMessage(error, error.phase || 'llm');
+            this.updateDebugInfo('OCR Processing Error', { phase: error.phase, error: error.message });
+            this.formFilled.emit({ success: false, error: error.message, jsonForm: JSON.stringify(ocrData) });
         }
         finally {
             this.isProcessing = false;
@@ -4326,83 +4631,100 @@ const VoiceFormRecorder = class {
     }
     async processAudioContent(audioFile) {
         var _a, _b, _c;
-        this.updateDebugInfo('Audio Captured', {
-            size: audioFile.size,
-            type: audioFile.type
-        });
+        this.isProcessing = true;
+        this.hasTransientError = false;
+        this.updateDebugInfo('Audio Captured', { size: audioFile.size, type: audioFile.type });
         try {
-            // Transcribe audio
-            this.statusMessage = ((_a = this.parsedTheme.texts) === null || _a === void 0 ? void 0 : _a.transcribing) || (this.language == 'en' ? 'Transcribing speech...' : 'Transcription du texte ...');
-            const transcription = await this.speechToTextService.transcribe(audioFile, this.language);
-            this.transcription = transcription;
-            this.updateDebugInfo('Transcription Complete', { transcription });
+            // Validate audio file before sending to API
+            const MAX_AUDIO_SIZE = 25 * 1024 * 1024; // 25MB (API limit)
+            if (audioFile.size <= 44) { // WAV header alone is 44 bytes; effectively empty
+                this.hasTransientError = true;
+                this.statusMessage = this.language == 'en'
+                    ? 'Recording is empty or too short. Please try again.'
+                    : "L'enregistrement est vide ou trop court. Veuillez réessayer.";
+                this.formFilled.emit({ success: false, error: 'Empty or too short audio' });
+                return;
+            }
+            if (audioFile.size > MAX_AUDIO_SIZE) {
+                this.hasTransientError = true;
+                this.statusMessage = this.language == 'en'
+                    ? `File too large (${Math.round(audioFile.size / 1024 / 1024)}MB). Maximum is 25MB.`
+                    : `Fichier trop volumineux (${Math.round(audioFile.size / 1024 / 1024)}Mo). Maximum : 25Mo.`;
+                this.formFilled.emit({ success: false, error: 'Audio file too large' });
+                return;
+            }
+            // Step 1: Transcription
+            let transcription;
+            try {
+                this.statusMessage = ((_a = this.parsedTheme.texts) === null || _a === void 0 ? void 0 : _a.transcribing) || (this.language == 'en' ? 'Transcribing speech...' : 'Transcription du texte ...');
+                transcription = await this.speechToTextService.transcribe(audioFile, this.language);
+                this.transcription = transcription;
+                this.updateDebugInfo('Transcription Complete', { transcription });
+            }
+            catch (transcriptionError) {
+                throw Object.assign(new Error(transcriptionError.message), { phase: 'transcription' });
+            }
             if (!transcription.trim()) {
-                throw new Error('No speech detected in the recording');
+                this.hasTransientError = true;
+                this.statusMessage = this.language == 'en'
+                    ? 'No speech detected. Please speak clearly and try again.'
+                    : 'Aucune parole détectée. Parlez clairement et réessayez.';
+                this.formFilled.emit({ success: false, error: 'No speech detected', transcription: '' });
+                return;
+            }
+            // Step 2: LLM form filling
+            let filledSchema;
+            try {
+                this.statusMessage = ((_b = this.parsedTheme.texts) === null || _b === void 0 ? void 0 : _b.filling) || (this.language == 'en' ? 'Filling form fields...' : 'Remplissage du formulaire ...');
+                const trimmedSchema = await this.trimSchemaForAI(this.parsedSchema);
+                filledSchema = await this.llmService.fillFormFromTranscription(transcription, trimmedSchema);
+            }
+            catch (llmError) {
+                throw Object.assign(new Error(llmError.message), { phase: 'llm' });
             }
-            // Fill form using LLM
-            this.statusMessage = ((_b = this.parsedTheme.texts) === null || _b === void 0 ? void 0 : _b.filling) || (this.language == 'en' ? 'Filling form fields...' : 'Remplissage du formulaire ...');
-            const trimmedSchema = await this.trimSchemaForAI(this.parsedSchema);
-            const filledSchema = await this.llmService.fillFormFromTranscription(transcription, trimmedSchema);
-            // Extract filled data
             this.filledData = this.extractFilledData(filledSchema);
-            this.updateDebugInfo('Form Filled', {
-                filledSchema,
-                extractedData: this.filledData
-            });
+            this.updateDebugInfo('Form Filled', { filledSchema, extractedData: this.filledData });
             this.parsedSchema = this.filledData;
-            this.statusMessage = ((_c = this.parsedTheme.texts) === null || _c === void 0 ? void 0 : _c.completed) || (this.language == 'en' ? 'Form completed!' : 'Formulaire remplis !');
-            this.hasError = false;
-            // Emit success event
-            this.formFilled.emit({
-                success: true,
-                data: this.filledData,
-                transcription: transcription
-            });
+            this.statusMessage = ((_c = this.parsedTheme.texts) === null || _c === void 0 ? void 0 : _c.completed) || (this.language == 'en' ? 'Form completed!' : 'Formulaire rempli !');
+            this.formFilled.emit({ success: true, data: this.filledData, transcription });
         }
         catch (error) {
-            console.error('Transcription error:', error);
-            this.hasError = true;
-            this.statusMessage = (this.language == 'en' ? 'Audio processing failed.' : 'Échec du traitement audio.');
-            this.updateDebugInfo('Transcription Error', { error: error.message });
-            this.formFilled.emit({
-                success: false,
-                error: error.message,
-                transcription: this.transcription
-            });
+            console.error('Audio processing error:', error);
+            this.hasTransientError = true;
+            this.statusMessage = this.getReadableErrorMessage(error, error.phase || 'audio-upload');
+            this.updateDebugInfo('Audio Processing Error', { phase: error.phase, error: error.message });
+            this.formFilled.emit({ success: false, error: error.message, transcription: this.transcription });
+        }
+        finally {
+            this.isProcessing = false;
         }
     }
     async stopRecordingAndProcess() {
         var _a;
+        this.isRecording = false;
+        this.isProcessing = true;
+        this.hasTransientError = false;
+        this.statusMessage = ((_a = this.parsedTheme.texts) === null || _a === void 0 ? void 0 : _a.processing) || (this.language == 'en' ? 'Processing audio...' : `Traitement de l'audio ...`);
+        this.updateDebugInfo('Stop Recording', {});
+        this.recordingStateChanged.emit({ isRecording: false, state: 'processing' });
         try {
-            this.isRecording = false;
-            this.isProcessing = true;
-            this.statusMessage = ((_a = this.parsedTheme.texts) === null || _a === void 0 ? void 0 : _a.processing) || (this.language == 'en' ? 'Processing audio...' : `Traitement de l'audio ...`);
-            this.updateDebugInfo('Stop Recording', {});
-            this.recordingStateChanged.emit({
-                isRecording: false,
-                state: 'processing'
-            });
-            // Stop recording and get audio blob
             const audioBlob = await this.audioRecorder.stopRecording();
-            const audioContent = new File([audioBlob], 'audio.webm', { type: 'audio/webm' });
-            this.processAudioContent(audioContent);
+            const audioContent = new File([audioBlob], 'audio.wav', { type: 'audio/wav' });
+            // processAudioContent manages isProcessing itself; await ensures we don't return early
+            await this.processAudioContent(audioContent);
         }
         catch (error) {
-            this.hasError = true;
-            this.statusMessage = (this.language == 'en' ? `Processing failed: ${error.message}` : `Erreur de traitement : ${error.message}`);
-            this.updateDebugInfo('Processing Error', { error: error.message });
-            this.formFilled.emit({
-                success: false,
-                error: error.message,
-                transcription: this.transcription
-            });
+            // Only reached if audioRecorder.stopRecording() itself throws
+            this.hasTransientError = true;
+            this.isProcessing = false;
+            this.statusMessage = (this.language == 'en'
+                ? `Failed to stop recording: ${error.message}`
+                : `Impossible d'arrêter l'enregistrement : ${error.message}`);
+            this.updateDebugInfo('Stop Recording Error', { error: error.message });
+            this.formFilled.emit({ success: false, error: error.message, transcription: this.transcription });
         }
         finally {
-            this.isProcessing = false;
-            this.recordingStateChanged.emit({
-                isRecording: false,
-                state: 'idle'
-            });
+            this.recordingStateChanged.emit({ isRecording: false, state: 'idle' });
         }
     }
     extractFilledData(filledData) {
@@ -4710,12 +5032,14 @@ const VoiceFormRecorder = class {
         return (index.h("button", { class: buttonClass, style: buttonStyle, onClick: () => this.handleRecordClick(), disabled: isDisabled, "aria-label": this.isRecording ? 'Stop recording' : 'Start recording' }, this.isProcessing ? (index.h("svg", { class: "record-icon", viewBox: "0 0 24 24" }, index.h("circle", { cx: "12", cy: "12", r: "3" }, index.h("animate", { attributeName: "r", values: "3;6;3", dur: "1s", repeatCount: "indefinite" }), index.h("animate", { attributeName: "opacity", values: "1;0.3;1", dur: "1s", repeatCount: "indefinite" })))) : this.isRecording ? (index.h("svg", { class: "record-icon", viewBox: "0 0 24 24" }, index.h("rect", { x: "6", y: "6", width: "12", height: "12", rx: "2" }))) : (index.h("svg", { class: "record-icon", viewBox: "0 0 24 24" }, index.h("circle", { cx: "12", cy: "12", r: "8" })))));
     }
     renderStatusMessage() {
+        const hasAnyError = this.hasError || this.hasTransientError;
         const statusClass = [
             'status-text',
-            this.hasError && 'error',
-            this.filledData && !this.hasError && 'success'
+            hasAnyError && 'error',
+            this.filledData && !hasAnyError && 'success'
         ].filter(Boolean).join(' ');
-        return index.h("div", { class: statusClass }, this.statusMessage);
+        const statusStyle = this.getStatusStyle();
+        return index.h("div", { class: statusClass, style: statusStyle }, this.statusMessage);
     }
     renderFormPreview() {
         if (!this.parsedSchema)
@@ -4888,13 +5212,16 @@ const VoiceFormRecorder = class {
     }
     render() {
         const containerStyle = this.getContainerStyle();
-        const statusStyle = this.getStatusStyle();
-        return (index.h("div", { key: '8503450dbd4de2cb91172bd2bdbdf16a0c4cdce0' }, index.h("div", { key: '8b3f553574a64754312f68f2abe0d64f57c56d3e', class: "voice-recorder-container" + (this.debug || this.renderForm ? "-debug" : ""), style: containerStyle }, index.h("div", { key: '3d08a37d611bc91dbe11c065c633f0d36c8b362e', class: "row-audio-area" }, this.renderRecordButton(), this.renderUploadRecordButton(), this.renderUploadButton()), this.displayStatus ? index.h("div", { class: "status-text", style: statusStyle }, this.statusMessage) : "", this.renderForm ? this.renderFormPreview() : "", this.debug ? this.renderDebugPanel() : "")));
+        return (index.h("div", { key: 'd2eb6b74840a57809920b3dbba3fd7dfbeef8531' }, index.h("div", { key: 'e66e1d4fc23176f9024ca20413535440a8be3ce8', class: "voice-recorder-container" + (this.debug || this.renderForm ? "-debug" : ""), style: containerStyle }, index.h("div", { key: '57dd7b882771d1f0bd56a97bfd0a06ffee09428e', class: "row-audio-area" }, this.renderRecordButton(), this.renderUploadRecordButton(), this.renderUploadButton()), this.displayStatus ? this.renderStatusMessage() : "", this.renderForm ? this.renderFormPreview() : "", this.debug ? this.renderDebugPanel() : "")));
     }
     static get watchers() { return {
         "formJson": ["initializeServices"],
         "serviceConfig": ["initializeServices"],
-        "theme": ["initializeServices"]
+        "theme": ["initializeServices"],
+        "transcriptionProvider": ["initializeServices"],
+        "completionProvider": ["initializeServices"],
+        "transcriptionModel": ["initializeServices"],
+        "completionModel": ["initializeServices"]
     }; }
 };
 VoiceFormRecorder.style = voiceInputModuleCss;