reneco-advanced-input-module 0.0.22 → 0.0.24

package/dist/collection/components/voice-input-module/voice-input-module.css

@@ -341,6 +341,40 @@ input[type="date"].form-input {
   user-select: none;
 }
 
+/* Skeleton loading state */
+@keyframes skeleton-shimmer {
+  0% { background-position: -200% 0; }
+  100% { background-position: 200% 0; }
+}
+
+.skeleton-circle {
+  border-radius: 50%;
+  flex-shrink: 0;
+  background: linear-gradient(
+    90deg,
+    #e2e8f0 25%,
+    #f8fafc 50%,
+    #e2e8f0 75%
+  );
+  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(
+    90deg,
+    #e2e8f0 25%,
+    #f8fafc 50%,
+    #e2e8f0 75%
+  );
+  background-size: 200% 100%;
+  animation: skeleton-shimmer 1.5s ease-in-out infinite;
+  animation-delay: 0.15s;
+}
+
 /* Force OCR component to respect size */
 ocr-file-uploader {
   display: block;

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

@@ -37,10 +37,12 @@ export class VoiceFormRecorder {
         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();
         };
@@ -48,14 +50,35 @@ export class VoiceFormRecorder {
             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
@@ -109,6 +132,7 @@ export class VoiceFormRecorder {
                     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';
@@ -129,6 +153,91 @@ export class VoiceFormRecorder {
                 } });
         }
     }
+    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;
@@ -142,7 +251,7 @@ export class VoiceFormRecorder {
     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();
@@ -155,8 +264,8 @@ export class VoiceFormRecorder {
             });
         }
         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,
@@ -166,40 +275,38 @@ export class VoiceFormRecorder {
     }
     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;
@@ -207,83 +314,102 @@ export class VoiceFormRecorder {
     }
     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) {
@@ -508,7 +634,7 @@ export class VoiceFormRecorder {
                 textColor: ocrStyle.textColor || '#ffffff'
             }
         };
-        const isDisabled = this.isProcessing || this.hasError;
+        const isDisabled = this.isProcessing || this.hasError || this.isRecording;
         return (h("div", { style: { width: size, height: size, flexShrink: '0', opacity: isDisabled ? '0.6' : '1', pointerEvents: isDisabled ? 'none' : 'auto' } }, h("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) {
@@ -563,7 +689,7 @@ export class VoiceFormRecorder {
             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',
@@ -592,13 +718,26 @@ export class VoiceFormRecorder {
         };
         return (h("button", { class: buttonClass, style: buttonStyle, onClick: () => this.handleRecordClick(), disabled: isDisabled, "aria-label": this.isRecording ? 'Stop recording' : 'Start recording' }, this.isProcessing ? (h("svg", { class: "record-icon", viewBox: "0 0 24 24" }, h("circle", { cx: "12", cy: "12", r: "3" }, h("animate", { attributeName: "r", values: "3;6;3", dur: "1s", repeatCount: "indefinite" }), h("animate", { attributeName: "opacity", values: "1;0.3;1", dur: "1s", repeatCount: "indefinite" })))) : this.isRecording ? (h("svg", { class: "record-icon", viewBox: "0 0 24 24" }, h("rect", { x: "6", y: "6", width: "12", height: "12", rx: "2" }))) : (h("svg", { class: "record-icon", viewBox: "0 0 24 24" }, h("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("div", null, h("div", { class: "voice-recorder-container" + (this.debug || this.renderForm ? "-debug" : ""), style: containerStyle }, h("div", { class: "row-audio-area" }, types.map(type => {
+            const size = getSize(type);
+            return h("div", { class: "skeleton-circle", style: { width: size, height: size } });
+        })), this.displayStatus && h("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("div", { class: statusClass }, this.statusMessage);
+        const statusStyle = this.getStatusStyle();
+        return h("div", { class: statusClass, style: statusStyle }, this.statusMessage);
     }
     renderFormPreview() {
         if (!this.parsedSchema)
@@ -770,9 +909,11 @@ export class VoiceFormRecorder {
         };
     }
     render() {
+        if (this.isInitializing) {
+            return this.renderLoadingSkeleton();
+        }
         const containerStyle = this.getContainerStyle();
-        const statusStyle = this.getStatusStyle();
-        return (h("div", { key: '8378e98f02e5b7482929d255c5ec12ff8c2731e4' }, h("div", { key: 'b8a0d873bd4e1b4c8936747c0919ac8c4c15301b', class: "voice-recorder-container" + (this.debug || this.renderForm ? "-debug" : ""), style: containerStyle }, h("div", { key: '86e7783e3686db378ee16aa91a640f33c3255923', class: "row-audio-area" }, this.renderRecordButton(), this.renderUploadRecordButton(), this.renderUploadButton()), this.displayStatus ? h("div", { class: "status-text", style: statusStyle }, this.statusMessage) : "", this.renderForm ? this.renderFormPreview() : "", this.debug ? this.renderDebugPanel() : "")));
+        return (h("div", null, h("div", { class: "voice-recorder-container" + (this.debug || this.renderForm ? "-debug" : ""), style: containerStyle }, h("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 is() { return "voice-input-module"; }
     static get encapsulation() { return "shadow"; }
@@ -1127,10 +1268,12 @@ export class VoiceFormRecorder {
             "isProcessing": {},
             "statusMessage": {},
             "hasError": {},
+            "hasTransientError": {},
             "transcription": {},
             "filledData": {},
             "debugInfo": {},
-            "isReadonlyMode": {}
+            "isReadonlyMode": {},
+            "isInitializing": {}
         };
     }
     static get events() {