reneco-advanced-input-module 0.0.22 → 0.0.24

package/dist/components/voice-input-module.js

@@ -4326,7 +4326,7 @@ const defineCustomElements = async (win, options) => {
 
 (function(){if("undefined"!==typeof window&&void 0!==window.Reflect&&void 0!==window.customElements){var a=HTMLElement;window.HTMLElement=function(){return Reflect.construct(a,[],this.constructor)};HTMLElement.prototype=a.prototype;HTMLElement.prototype.constructor=HTMLElement;Object.setPrototypeOf(HTMLElement,a);}})();
 
-const voiceInputModuleCss = ":host{display:block;font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif}.row-audio-area{display:flex;flex-direction:row;align-items:center;gap:8px;flex-wrap:wrap;justify-content:center}.voice-recorder-container{display:flex;flex-direction:column;align-items:center;gap:1rem;padding:1rem;border:1px solid #e5e7eb;border-radius:0.5rem;background:#ffffff;margin:0 auto}.voice-recorder-container-debug{display:flex;flex-direction:column;align-items:center;gap:1rem;padding:1rem;border:1px solid #e5e7eb;border-radius:0.5rem;background:#ffffff;margin:0 auto}.upload-record-container{display:inline-flex;cursor:pointer}.upload-record-button{display:flex;align-items:center;justify-content:center;transition:transform 0.2s ease, box-shadow 0.2s ease;user-select:none}.upload-record-button svg{width:100%;height:100%;transition:transform 0.2s ease}.upload-record-container:hover .upload-record-button svg{transform:scale(1.05)}.upload-record-button svg path{}.record-button{display:flex;align-items:center;justify-content:center;border:none;border-radius:50%;background:#ee4444;color:white;cursor:pointer;transition:all 0.2s ease;position:relative;overflow:hidden;flex-shrink:0}.record-button:hover:not(:disabled){background:#dd3333;transform:scale(1.05)}.record-button:disabled{opacity:0.6;cursor:not-allowed}.record-button.recording{background:#dd3333;animation:pulse 1.5s infinite}.record-button.processing{background:#3b82f6}@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(239, 68, 68, 0.7)}70%{box-shadow:0 0 0 10px rgba(239, 68, 68, 0)}100%{box-shadow:0 0 0 0 rgba(239, 68, 68, 0)}}.record-icon{width:24px;height:24px;fill:currentColor}.status-text{font-size:0.875rem;color:#6b7280;text-align:center;min-height:1.25rem}.status-text.error{color:#ee4444}.status-text.success{color:#10b981}.debug-panel{width:100%;margin-top:1rem;padding:1rem;background:#f9fafb;border:1px solid #e5e7eb;border-radius:0.375rem;font-family:'Monaco', 'Menlo', 'Ubuntu Mono', monospace;font-size:0.75rem}.debug-title{font-weight:600;margin-bottom:0.5rem;color:#374151}.debug-content{white-space:pre-wrap;word-break:break-word;color:#6b7280;max-height:200px;overflow-y:auto}.permissions-warning{padding:0.75rem;background:#fef3c7;border:1px solid #f59e0b;border-radius:0.375rem;color:#92400e;font-size:0.875rem;text-align:center}.form-preview{width:100%;margin-top:1rem;padding:1rem;background:#f8fafc;border:1px solid #e2e8f0;border-radius:0.375rem}.form-preview-title{font-weight:600;margin-bottom:0.5rem;color:#1e293b}.form-field{margin-bottom:0.5rem;font-size:0.875rem}.field-name{font-weight:500;color:#475569}.field-value{color:#64748b;margin-left:0.5rem}.field-value.filled{color:#059669;font-weight:500}.voice-filled-form{display:grid;grid-template-columns:repeat(auto-fit, minmax(250px, 1fr));gap:0.5rem;margin-top:1rem}.form-group{display:flex;flex-direction:column;gap:0.15rem}.form-group.full-width{grid-column:1 / -1}.form-header{grid-column:1 / -1;font-weight:600;font-size:1rem;color:#1e293b;margin-top:0.75rem;margin-bottom:0.25rem;padding-bottom:0.25rem;border-bottom:2px solid #e2e8f0}.form-label{font-weight:500;color:#374151;font-size:0.8rem}.required{color:#ee4444;margin-left:0.125rem}.form-input{padding:0.4rem;border:1px solid #d1d5db;border-radius:0.375rem;font-size:0.8rem;transition:border-color 0.2s ease}.form-input:focus{outline:none;border-color:#3b82f6;box-shadow:0 0 0 3px rgba(59, 130, 246, 0.1)}.form-checkbox{width:auto;padding:0;margin:0}select.form-input{background-color:white;cursor:pointer}input[type=\"date\"].form-input{cursor:pointer}.readonly-select{background:#f9fafb;border:1px solid #d1d5db;border-radius:0.375rem;padding:0.5rem}.select-placeholder{font-size:0.875rem;color:#6b7280;margin-bottom:0.5rem}.select-options-list{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:0.25rem;max-height:150px;overflow-y:auto}.select-option{background:#e5e7eb;padding:0.25rem 0.5rem;border-radius:0.25rem;font-size:0.875rem;color:#374151}.multiselect-container{display:grid;grid-template-columns:repeat(2, 1fr);gap:0.25rem;padding:0.5rem;border:1px solid #d1d5db;border-radius:0.375rem;background:white}.multiselect-option{display:flex;align-items:center;gap:0.5rem;padding:0.5rem;border-radius:0.25rem;cursor:pointer;transition:background 0.2s ease}.multiselect-option:hover{background:#f3f4f6}.multiselect-option input[type=\"checkbox\"]{width:18px;height:18px;cursor:pointer}.multiselect-option input[type=\"checkbox\"]:checked+.multiselect-label{font-weight:600;color:#059669}.multiselect-label{font-size:0.875rem;color:#374151;user-select:none}ocr-file-uploader{display:block;width:100% !important;height:100% !important;max-width:100% !important;max-height:100% !important}ocr-file-uploader *{max-width:100% !important;max-height:100% !important}";
+const voiceInputModuleCss = ":host{display:block;font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif}.row-audio-area{display:flex;flex-direction:row;align-items:center;gap:8px;flex-wrap:wrap;justify-content:center}.voice-recorder-container{display:flex;flex-direction:column;align-items:center;gap:1rem;padding:1rem;border:1px solid #e5e7eb;border-radius:0.5rem;background:#ffffff;margin:0 auto}.voice-recorder-container-debug{display:flex;flex-direction:column;align-items:center;gap:1rem;padding:1rem;border:1px solid #e5e7eb;border-radius:0.5rem;background:#ffffff;margin:0 auto}.upload-record-container{display:inline-flex;cursor:pointer}.upload-record-button{display:flex;align-items:center;justify-content:center;transition:transform 0.2s ease, box-shadow 0.2s ease;user-select:none}.upload-record-button svg{width:100%;height:100%;transition:transform 0.2s ease}.upload-record-container:hover .upload-record-button svg{transform:scale(1.05)}.upload-record-button svg path{}.record-button{display:flex;align-items:center;justify-content:center;border:none;border-radius:50%;background:#ee4444;color:white;cursor:pointer;transition:all 0.2s ease;position:relative;overflow:hidden;flex-shrink:0}.record-button:hover:not(:disabled){background:#dd3333;transform:scale(1.05)}.record-button:disabled{opacity:0.6;cursor:not-allowed}.record-button.recording{background:#dd3333;animation:pulse 1.5s infinite}.record-button.processing{background:#3b82f6}@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(239, 68, 68, 0.7)}70%{box-shadow:0 0 0 10px rgba(239, 68, 68, 0)}100%{box-shadow:0 0 0 0 rgba(239, 68, 68, 0)}}.record-icon{width:24px;height:24px;fill:currentColor}.status-text{font-size:0.875rem;color:#6b7280;text-align:center;min-height:1.25rem}.status-text.error{color:#ee4444}.status-text.success{color:#10b981}.debug-panel{width:100%;margin-top:1rem;padding:1rem;background:#f9fafb;border:1px solid #e5e7eb;border-radius:0.375rem;font-family:'Monaco', 'Menlo', 'Ubuntu Mono', monospace;font-size:0.75rem}.debug-title{font-weight:600;margin-bottom:0.5rem;color:#374151}.debug-content{white-space:pre-wrap;word-break:break-word;color:#6b7280;max-height:200px;overflow-y:auto}.permissions-warning{padding:0.75rem;background:#fef3c7;border:1px solid #f59e0b;border-radius:0.375rem;color:#92400e;font-size:0.875rem;text-align:center}.form-preview{width:100%;margin-top:1rem;padding:1rem;background:#f8fafc;border:1px solid #e2e8f0;border-radius:0.375rem}.form-preview-title{font-weight:600;margin-bottom:0.5rem;color:#1e293b}.form-field{margin-bottom:0.5rem;font-size:0.875rem}.field-name{font-weight:500;color:#475569}.field-value{color:#64748b;margin-left:0.5rem}.field-value.filled{color:#059669;font-weight:500}.voice-filled-form{display:grid;grid-template-columns:repeat(auto-fit, minmax(250px, 1fr));gap:0.5rem;margin-top:1rem}.form-group{display:flex;flex-direction:column;gap:0.15rem}.form-group.full-width{grid-column:1 / -1}.form-header{grid-column:1 / -1;font-weight:600;font-size:1rem;color:#1e293b;margin-top:0.75rem;margin-bottom:0.25rem;padding-bottom:0.25rem;border-bottom:2px solid #e2e8f0}.form-label{font-weight:500;color:#374151;font-size:0.8rem}.required{color:#ee4444;margin-left:0.125rem}.form-input{padding:0.4rem;border:1px solid #d1d5db;border-radius:0.375rem;font-size:0.8rem;transition:border-color 0.2s ease}.form-input:focus{outline:none;border-color:#3b82f6;box-shadow:0 0 0 3px rgba(59, 130, 246, 0.1)}.form-checkbox{width:auto;padding:0;margin:0}select.form-input{background-color:white;cursor:pointer}input[type=\"date\"].form-input{cursor:pointer}.readonly-select{background:#f9fafb;border:1px solid #d1d5db;border-radius:0.375rem;padding:0.5rem}.select-placeholder{font-size:0.875rem;color:#6b7280;margin-bottom:0.5rem}.select-options-list{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:0.25rem;max-height:150px;overflow-y:auto}.select-option{background:#e5e7eb;padding:0.25rem 0.5rem;border-radius:0.25rem;font-size:0.875rem;color:#374151}.multiselect-container{display:grid;grid-template-columns:repeat(2, 1fr);gap:0.25rem;padding:0.5rem;border:1px solid #d1d5db;border-radius:0.375rem;background:white}.multiselect-option{display:flex;align-items:center;gap:0.5rem;padding:0.5rem;border-radius:0.25rem;cursor:pointer;transition:background 0.2s ease}.multiselect-option:hover{background:#f3f4f6}.multiselect-option input[type=\"checkbox\"]{width:18px;height:18px;cursor:pointer}.multiselect-option input[type=\"checkbox\"]:checked+.multiselect-label{font-weight:600;color:#059669}.multiselect-label{font-size:0.875rem;color:#374151;user-select:none}@keyframes skeleton-shimmer{0%{background-position:-200% 0}100%{background-position:200% 0}}.skeleton-circle{border-radius:50%;flex-shrink:0;background:linear-gradient(\r\n    90deg,\r\n    #e2e8f0 25%,\r\n    #f8fafc 50%,\r\n    #e2e8f0 75%\r\n  );background-size:200% 100%;animation:skeleton-shimmer 1.5s ease-in-out infinite}.skeleton-status{height:14px;border-radius:7px;width:140px;background:linear-gradient(\r\n    90deg,\r\n    #e2e8f0 25%,\r\n    #f8fafc 50%,\r\n    #e2e8f0 75%\r\n  );background-size:200% 100%;animation:skeleton-shimmer 1.5s ease-in-out infinite;animation-delay:0.15s}ocr-file-uploader{display:block;width:100% !important;height:100% !important;max-width:100% !important;max-height:100% !important}ocr-file-uploader *{max-width:100% !important;max-height:100% !important}";
 
 // Initialize OCR
 defineCustomElements();
@@ -4365,10 +4365,12 @@ const VoiceFormRecorder = /*@__PURE__*/ proxyCustomElement(class VoiceFormRecord
         this.isRecording = false;
         this.isProcessing = false;
         this.hasError = false;
+        this.hasTransientError = false;
         this.transcription = '';
         this.filledData = null;
         this.debugInfo = {};
         this.isReadonlyMode = true; // Start in readonly preview mode
+        this.isInitializing = true;
         this.triggerAudioRecordUpload = () => {
             this.fileInputAudioRecord.click();
         };
@@ -4376,14 +4378,35 @@ const VoiceFormRecorder = /*@__PURE__*/ proxyCustomElement(class VoiceFormRecord
             const input = event.target;
             if (!input.files || input.files.length === 0)
                 return;
+            if (this.isProcessing || this.isRecording) {
+                input.value = '';
+                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();
     }
     componentWillLoad() {
         this.initializeServices();
     }
+    componentDidLoad() {
+        this.isInitializing = false;
+    }
     initializeServices() {
         var _a;
         // Parse theme
@@ -4437,6 +4460,7 @@ const VoiceFormRecorder = /*@__PURE__*/ proxyCustomElement(class VoiceFormRecord
                     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';
@@ -4457,6 +4481,91 @@ const VoiceFormRecorder = /*@__PURE__*/ proxyCustomElement(class VoiceFormRecord
                 } });
         }
     }
+    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;
@@ -4470,7 +4579,7 @@ const VoiceFormRecorder = /*@__PURE__*/ proxyCustomElement(class VoiceFormRecord
     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();
@@ -4483,8 +4592,8 @@ const VoiceFormRecorder = /*@__PURE__*/ proxyCustomElement(class VoiceFormRecord
             });
         }
         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,
@@ -4494,40 +4603,38 @@ const VoiceFormRecorder = /*@__PURE__*/ proxyCustomElement(class VoiceFormRecord
     }
     async processJsonForm(ocrData) {
         var _a, _b, _c;
+        if (this.isProcessing || this.isRecording)
+            return;
+        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;
@@ -4535,83 +4642,102 @@ const VoiceFormRecorder = /*@__PURE__*/ proxyCustomElement(class VoiceFormRecord
     }
     async processAudioContent(audioFile) {
         var _a, _b, _c;
-        this.updateDebugInfo('Audio Captured', {
-            size: audioFile.size,
-            type: audioFile.type
-        });
+        if (this.isProcessing || this.isRecording)
+            return;
+        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.wav', { type: 'audio/wav' });
-            this.processAudioContent(audioContent);
+            // 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) {
@@ -4834,7 +4960,7 @@ const VoiceFormRecorder = /*@__PURE__*/ proxyCustomElement(class VoiceFormRecord
                 textColor: ocrStyle.textColor || '#ffffff'
             }
         };
-        const isDisabled = this.isProcessing || this.hasError;
+        const isDisabled = this.isProcessing || this.hasError || this.isRecording;
         return (h$1("div", { style: { width: size, height: size, flexShrink: '0', opacity: isDisabled ? '0.6' : '1', pointerEvents: isDisabled ? 'none' : 'auto' } }, h$1("ocr-file-uploader", { batch: false, "json-schema": this.convertSchemaToOcrFormat(this.parsedSchema), callback: (data) => { this.processJsonForm(data); }, theme: JSON.stringify(ocrTheme), style: { width: '100%', height: '100%' } })));
     }
     convertSchemaToOcrFormat(schema) {
@@ -4889,7 +5015,7 @@ const VoiceFormRecorder = /*@__PURE__*/ proxyCustomElement(class VoiceFormRecord
             return;
         const audioStyle = ((_a = this.parsedTheme.buttons) === null || _a === void 0 ? void 0 : _a.audio) || {};
         const size = audioStyle.size || '50px';
-        const isDisabled = this.isProcessing || this.hasError;
+        const isDisabled = this.isProcessing || this.hasError || this.isRecording;
         const buttonStyle = {
             stroke: audioStyle.backgroundColor || '#3b82f6',
             fill: audioStyle.backgroundColor || '#3b82f6',
@@ -4918,13 +5044,26 @@ const VoiceFormRecorder = /*@__PURE__*/ proxyCustomElement(class VoiceFormRecord
         };
         return (h$1("button", { class: buttonClass, style: buttonStyle, onClick: () => this.handleRecordClick(), disabled: isDisabled, "aria-label": this.isRecording ? 'Stop recording' : 'Start recording' }, this.isProcessing ? (h$1("svg", { class: "record-icon", viewBox: "0 0 24 24" }, h$1("circle", { cx: "12", cy: "12", r: "3" }, h$1("animate", { attributeName: "r", values: "3;6;3", dur: "1s", repeatCount: "indefinite" }), h$1("animate", { attributeName: "opacity", values: "1;0.3;1", dur: "1s", repeatCount: "indefinite" })))) : this.isRecording ? (h$1("svg", { class: "record-icon", viewBox: "0 0 24 24" }, h$1("rect", { x: "6", y: "6", width: "12", height: "12", rx: "2" }))) : (h$1("svg", { class: "record-icon", viewBox: "0 0 24 24" }, h$1("circle", { cx: "12", cy: "12", r: "8" })))));
     }
+    renderLoadingSkeleton() {
+        var _a;
+        const types = this.parsedInputTypes.length > 0 ? this.parsedInputTypes : ['voice'];
+        const containerStyle = this.getContainerStyle();
+        const buttons = (((_a = this.parsedTheme) === null || _a === void 0 ? void 0 : _a.buttons) || {});
+        const getSize = (type) => { var _a, _b; return ((_a = buttons[type]) === null || _a === void 0 ? void 0 : _a.size) || ((_b = buttons.voice) === null || _b === void 0 ? void 0 : _b.size) || '50px'; };
+        return (h$1("div", null, h$1("div", { class: "voice-recorder-container" + (this.debug || this.renderForm ? "-debug" : ""), style: containerStyle }, h$1("div", { class: "row-audio-area" }, types.map(type => {
+            const size = getSize(type);
+            return h$1("div", { class: "skeleton-circle", style: { width: size, height: size } });
+        })), this.displayStatus && h$1("div", { class: "skeleton-status" }))));
+    }
     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 h$1("div", { class: statusClass }, this.statusMessage);
+        const statusStyle = this.getStatusStyle();
+        return h$1("div", { class: statusClass, style: statusStyle }, this.statusMessage);
     }
     renderFormPreview() {
         if (!this.parsedSchema)
@@ -5096,9 +5235,11 @@ const VoiceFormRecorder = /*@__PURE__*/ proxyCustomElement(class VoiceFormRecord
         };
     }
     render() {
+        if (this.isInitializing) {
+            return this.renderLoadingSkeleton();
+        }
         const containerStyle = this.getContainerStyle();
-        const statusStyle = this.getStatusStyle();
-        return (h$1("div", { key: '8378e98f02e5b7482929d255c5ec12ff8c2731e4' }, h$1("div", { key: 'b8a0d873bd4e1b4c8936747c0919ac8c4c15301b', class: "voice-recorder-container" + (this.debug || this.renderForm ? "-debug" : ""), style: containerStyle }, h$1("div", { key: '86e7783e3686db378ee16aa91a640f33c3255923', class: "row-audio-area" }, this.renderRecordButton(), this.renderUploadRecordButton(), this.renderUploadButton()), this.displayStatus ? h$1("div", { class: "status-text", style: statusStyle }, this.statusMessage) : "", this.renderForm ? this.renderFormPreview() : "", this.debug ? this.renderDebugPanel() : "")));
+        return (h$1("div", null, h$1("div", { class: "voice-recorder-container" + (this.debug || this.renderForm ? "-debug" : ""), style: containerStyle }, h$1("div", { 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"],
@@ -5131,10 +5272,12 @@ const VoiceFormRecorder = /*@__PURE__*/ proxyCustomElement(class VoiceFormRecord
         "isProcessing": [32],
         "statusMessage": [32],
         "hasError": [32],
+        "hasTransientError": [32],
         "transcription": [32],
         "filledData": [32],
         "debugInfo": [32],
         "isReadonlyMode": [32],
+        "isInitializing": [32],
         "convertXmlToJson": [64],
         "convertJsonToXml": [64],
         "convertXmlToJsonLegacy": [64],