reneco-advanced-input-module 0.0.22 → 0.0.23

package/dist/cjs/loader.cjs.js

@@ -6,7 +6,7 @@ var appGlobals = require('./app-globals-V2Kpy_OQ.js');
 const defineCustomElements = async (win, options) => {
   if (typeof window === 'undefined') return undefined;
   await appGlobals.globalScripts();
-  return index.bootstrapLazy([["ocr-file-uploader.cjs",[[257,"ocr-file-uploader",{"batch":[4],"callback":[16],"jsonSchema":[1,"json-schema"],"theme":[1],"parsedTheme":[32]},null,{"theme":["parseTheme"]}]]],["voice-input-module.cjs",[[257,"voice-input-module",{"formJson":[1,"form-json"],"serviceConfig":[1,"service-config"],"apiKey":[1,"api-key"],"apiProxyUrl":[1,"api-proxy-url"],"transcriptionModel":[1,"transcription-model"],"completionModel":[1,"completion-model"],"transcriptionProvider":[1,"transcription-provider"],"completionProvider":[1,"completion-provider"],"context":[1],"classificationRootUrl":[1,"classification-root-url"],"language":[1],"inputTypes":[1,"input-types"],"theme":[1],"debug":[4],"renderForm":[4,"render-form"],"displayStatus":[4,"display-status"],"isRecording":[32],"isProcessing":[32],"statusMessage":[32],"hasError":[32],"transcription":[32],"filledData":[32],"debugInfo":[32],"isReadonlyMode":[32],"convertXmlToJson":[64],"convertJsonToXml":[64],"convertXmlToJsonLegacy":[64],"convertJsonToXmlLegacy":[64]},null,{"formJson":["initializeServices"],"serviceConfig":["initializeServices"],"theme":["initializeServices"],"transcriptionProvider":["initializeServices"],"completionProvider":["initializeServices"],"transcriptionModel":["initializeServices"],"completionModel":["initializeServices"]}]]]], options);
+  return index.bootstrapLazy([["ocr-file-uploader.cjs",[[257,"ocr-file-uploader",{"batch":[4],"callback":[16],"jsonSchema":[1,"json-schema"],"theme":[1],"parsedTheme":[32]},null,{"theme":["parseTheme"]}]]],["voice-input-module.cjs",[[257,"voice-input-module",{"formJson":[1,"form-json"],"serviceConfig":[1,"service-config"],"apiKey":[1,"api-key"],"apiProxyUrl":[1,"api-proxy-url"],"transcriptionModel":[1,"transcription-model"],"completionModel":[1,"completion-model"],"transcriptionProvider":[1,"transcription-provider"],"completionProvider":[1,"completion-provider"],"context":[1],"classificationRootUrl":[1,"classification-root-url"],"language":[1],"inputTypes":[1,"input-types"],"theme":[1],"debug":[4],"renderForm":[4,"render-form"],"displayStatus":[4,"display-status"],"isRecording":[32],"isProcessing":[32],"statusMessage":[32],"hasError":[32],"hasTransientError":[32],"transcription":[32],"filledData":[32],"debugInfo":[32],"isReadonlyMode":[32],"convertXmlToJson":[64],"convertJsonToXml":[64],"convertXmlToJsonLegacy":[64],"convertJsonToXmlLegacy":[64]},null,{"formJson":["initializeServices"],"serviceConfig":["initializeServices"],"theme":["initializeServices"],"transcriptionProvider":["initializeServices"],"completionProvider":["initializeServices"],"transcriptionModel":["initializeServices"],"completionModel":["initializeServices"]}]]]], options);
 };
 
 exports.setNonce = index.setNonce;

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

@@ -4364,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 = {};
@@ -4376,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();
     }
@@ -4436,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';
@@ -4456,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;
@@ -4469,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();
@@ -4482,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,
@@ -4493,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;
@@ -4534,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.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) {
@@ -4918,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)
@@ -5096,8 +5212,7 @@ const VoiceFormRecorder = class {
     }
     render() {
         const containerStyle = this.getContainerStyle();
-        const statusStyle = this.getStatusStyle();
-        return (index.h("div", { key: '8378e98f02e5b7482929d255c5ec12ff8c2731e4' }, index.h("div", { key: 'b8a0d873bd4e1b4c8936747c0919ac8c4c15301b', class: "voice-recorder-container" + (this.debug || this.renderForm ? "-debug" : ""), style: containerStyle }, index.h("div", { key: '86e7783e3686db378ee16aa91a640f33c3255923', 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"],