reneco-advanced-input-module 0.0.1-beta.1 → 0.0.1-beta.2

package/src/components/voice-input-module/voice-input-module.tsx

@@ -1,778 +0,0 @@
-import { Component, Prop, Event, EventEmitter, State, h, Watch, Method } from '@stencil/core';
-import { FormSchema, VoiceFormRecorderResult, FilledFormData, FormSchemaFieldsOnly, FormSchemaFieldsOnlyExtended } from '../../types/form-schema.types';
-import { ServiceProviderConfig } from '../../types/service-providers.types';
-import { AudioRecorderService } from '../../services/audio-recorder.service';
-import { SpeechToTextServiceFactory } from '../../services/speech-to-text.service';
-import { LLMServiceFactory } from '../../services/llm.service';
-import { SchemaConverter } from '../../utils/schema-converter';
-
-@Component({
-  tag: 'voice-input-module',
-  styleUrl: 'voice-input-module.css',
-  shadow: true,
-})
-export class VoiceFormRecorder {
-  @Prop() formJson: string = '{}';
-  @Prop() serviceConfig: string = '{}';
-  @Prop() apiKey: string;
-  @Prop() context: 'track'|'ng'|'ecoll-veto'|'ecoteka' = undefined;
-  @Prop() classificationRootUrl: string = 'http://localhost';
-  @Prop() language: 'fr'|'en' = 'en';
-  @Prop() inputTypes: ('voice' | 'ocr' | 'audio')[] = [];
-  
-  @Prop() debug: boolean = false;
-  @Prop() renderForm: boolean = false;
-  @Prop() displayStatus: boolean = false;
-  
-  @Event() formFilled: EventEmitter<VoiceFormRecorderResult>;
-  @Event() recordingStateChanged: EventEmitter<{ isRecording: boolean; state: string }>;
-
-  @State() isRecording: boolean = false;
-  @State() isProcessing: boolean = false;
-  @State() statusMessage: string;
-  @State() hasError: boolean = false;
-  @State() transcription: string = '';
-  @State() filledData: FilledFormData | null = null;
-  @State() debugInfo: any = {};
-  @State() isReadonlyMode: boolean = true; // Start in readonly preview mode
-
-  private audioRecorder: AudioRecorderService;
-  private speechToTextService: any;
-  private llmService: any;
-  private parsedSchema: any; // Support both simple FormSchema and complex nested schema
-  private parsedConfig: ServiceProviderConfig;
-
-  constructor() {
-    this.audioRecorder = new AudioRecorderService();
-  }
-
-  componentWillLoad() {
-    this.initializeServices();
-  }
-
-  @Watch('formJson')
-  @Watch('serviceConfig')
-  initializeServices() {
-    try {
-      if (!this.context){
-        this.hasError = true;
-        const errorMessage = (this.language == 'en' ? `Initialization error: context is '${this.context}'` : `Erreur d'initialisation: le contexte est '${this.context}'`);
-        this.statusMessage = errorMessage;
-        this.updateDebugInfo(errorMessage, { error: errorMessage });
-      }
-      else{
-        // Parse form schema
-        this.parsedSchema = JSON.parse(this.formJson || '{}');
-        
-        // Parse service configuration
-        this.parsedConfig = JSON.parse(this.serviceConfig || '{}');
-        
-        // Add API key to config if provided via prop
-        if (this.apiKey) {
-          this.parsedConfig = {
-            ...this.parsedConfig,
-            speechToText: { ...this.parsedConfig.speechToText, apiKey: this.apiKey },
-            llm: { ...this.parsedConfig.llm, apiKey: this.apiKey }
-          };
-        }
-        
-        // Initialize services
-        this.speechToTextService = SpeechToTextServiceFactory.create(this.parsedConfig);
-        this.llmService = LLMServiceFactory.create(this.parsedConfig);
-        
-        this.updateDebugInfo('Initialized', {
-          schema: this.parsedSchema,
-          config: this.parsedConfig
-        });
-        
-        this.hasError = false;
-        this.statusMessage = (this.language == 'en' ? 'Click to start recording' : 'Cliquer pour enregistrer');
-        if (this.inputTypes.length === 0){
-          this.inputTypes = ['voice'];
-        }
-      }
-    } catch (error) {
-      this.hasError = true;
-      this.statusMessage = (this.language == 'en' ? `Initialization error: ${error.message}` : `Erreur d'initialisation: ${error.message}`);
-      this.updateDebugInfo('Initialization Error', { error: error.message });
-    }
-  }
-
-  private updateDebugInfo(action: string, data: any) {
-    if (this.debug) {
-      this.debugInfo = {
-        ...this.debugInfo,
-        [action]: {
-          timestamp: new Date().toISOString(),
-          data
-        }
-      };
-    }
-  }
-
-  private async handleRecordClick() {
-    if (this.isProcessing) return;
-
-    if (this.isRecording) {
-      await this.stopRecordingAndProcess();
-    } else {
-      await this.startRecording();
-    }
-  }
-
-  private async startRecording() {
-    try {
-      this.hasError = false;
-      this.statusMessage = (this.language == 'en' ? 'Starting recording...' : `Enregistrement ...`);
-      this.updateDebugInfo('Start Recording Attempt', {});
-
-      await this.audioRecorder.startRecording();
-      
-      this.isRecording = true;
-      this.statusMessage = (this.language == 'en' ? 'Recording... Click to stop' : 'Enregistrement ... Cliquer pour stopper');
-      this.updateDebugInfo('Recording Started', {});
-      
-      this.recordingStateChanged.emit({ 
-        isRecording: true, 
-        state: 'recording' 
-      });
-    } catch (error) {
-      this.hasError = true;
-      this.statusMessage = (this.language == 'en' ? `Recording failed: ${error.message}` : `Echec de l'enregistrement : ${error.message}`);
-      this.updateDebugInfo('Recording Error', { error: error.message });
-      
-      this.formFilled.emit({
-        success: false,
-        error: error.message
-      });
-    }
-  }
-
-  private async processJsonForm(jsonForm: string){
-    console.log("processJsonForm", jsonForm);
-    try {
-      this.isProcessing = true;
-      this.statusMessage = (this.language == 'en' ? 'Processing json...' : `Traitement du json ...`);
-
-      // Fill form using LLM
-      this.statusMessage = (this.language == 'en' ? 'Filling form fields...' : 'Remplissage du formulaire ...');
-      const trimmedSchema = this.trimSchemaForAI(this.parsedSchema);
-      const filledSchema = await this.llmService.fillFormFromJson(jsonForm, trimmedSchema);
-      
-      // Extract filled data
-      this.filledData = this.extractFilledData(filledSchema);
-      this.updateDebugInfo('Form Filled', { 
-        filledSchema, 
-        extractedData: this.filledData 
-      });
-      
-      this.parsedSchema = this.filledData;
-
-      this.statusMessage = (this.language == 'en' ? 'Form completed!' : 'Formulaire remplis !');
-      this.hasError = false;
-
-      // Emit success event
-      this.formFilled.emit({
-        success: true,
-        data: this.filledData,
-        jsonForm: 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: jsonForm
-      });
-    } finally {
-      this.isProcessing = false;
-    }
-  }
-
-  private async processAudioContent(audioFile) {
-    this.updateDebugInfo('Audio Captured', { 
-      size: audioFile.size, 
-      type: audioFile.type 
-    });
-
-    // Transcribe audio
-    this.statusMessage = (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 });
-
-    if (!transcription.trim()) {
-      throw new Error('No speech detected in the recording');
-    }
-
-    // Fill form using LLM
-    this.statusMessage = (this.language == 'en' ? 'Filling form fields...' : 'Remplissage du formulaire ...');
-    const trimmedSchema = 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.parsedSchema = this.filledData;
-
-    this.statusMessage = (this.language == 'en' ? 'Form completed!' : 'Formulaire remplis !');
-    this.hasError = false;
-
-    // Emit success event
-    this.formFilled.emit({
-      success: true,
-      data: this.filledData,
-      transcription: transcription
-    });
-  }
-
-  private async stopRecordingAndProcess() {
-    try {
-      this.isRecording = false;
-      this.isProcessing = true;
-      this.statusMessage = (this.language == 'en' ? 'Processing audio...' : `Traitement de l'audio ...`);
-      this.updateDebugInfo('Stop Recording', {});
-
-      this.recordingStateChanged.emit({ 
-        isRecording: false, 
-        state: 'processing' 
-      });
-
-      // Stop recording and get audio blob
-      const audioBlob = await this.audioRecorder.stopRecording();
-      const audioContent = new File([audioBlob], 'audio.webm', { type: 'audio/webm' });
-      this.processAudioContent(audioContent);
-
-    } 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
-      });
-    } finally {
-      this.isProcessing = false;
-      this.recordingStateChanged.emit({ 
-        isRecording: false, 
-        state: 'idle' 
-      });
-    }
-  }
-
-  private extractFilledData(filledData: any): any {
-    // console.log("extractFilledData", filledData);
-    const updatedSchema = JSON.parse(JSON.stringify(this.parsedSchema));
-    switch(this.context){
-      case "ecoteka":
-        // console.log("TODO extractFilledData", filledData);
-      case "ng":      
-        if (filledData?.fields) {
-          // Map AI response back to original schema structure
-          filledData.fields.forEach((field: any) => {
-            const originalField = updatedSchema.Children.find((child: any) => 
-              child.System_Name === field.name || child.Settings?.Label === field.name
-            );
-            
-            if (originalField && field.value !== undefined && field.value !== null && field.value !== '') {
-              if (!originalField.Settings) originalField.Settings = {};
-              originalField.Settings.Default_Value = field.value;
-            }
-          });
-        }
-        
-        break;
-      case "ecoll-veto":
-        // console.log("TODO extractFilledData", filledData, updatedSchema);
-        if (filledData?.fields) {
-          // Map AI response back to original schema structure
-          filledData.fields.forEach((field: any) => {
-            let originalField = updatedSchema[0].items.find((child: any) => 
-              child.label === field.name
-            );
-            if (!originalField)
-               originalField = updatedSchema[1].items.find((child: any) =>
-                child.label === field.name
-              );
-            
-            if (originalField && field.value !== undefined && field.value !== null && field.value !== '') {
-              updatedSchema[2][originalField.name] = field.value;
-            }
-          });
-        }
-        break;
-      case "track":
-      default:
-        const data: FilledFormData = {};
-        
-        Object.entries(filledData.fields).forEach(([fieldID, field]: [string, any]) => {
-          if (field.default !== undefined && field.default !== null && field.default !== '') {
-            updatedSchema[fieldID] = field.default;
-          }
-          if (field.value !== undefined && field.value !== null && field.value !== '') {
-            for (const key in updatedSchema.fields) {
-              const schemaField = updatedSchema.fields[key];
-              if (schemaField.title === field.name) {
-                schemaField.value = field.value || field.default;
-                schemaField.default = field.value || field.default;
-                break; // stop after finding the first match
-              }
-            }
-          }
-        });
-
-        break;
-    }
-    
-    // console.log("extractFilledData result", updatedSchema);
-    return updatedSchema;
-  }
-
-  private trimSchemaForAI(schema: any): any {
-    // console.log("trimSchemaForAI", schema);
-    switch(this.context){
-      case "ecoteka":
-        // console.log("TODO trimSchemaForAI", schema)
-      case "ng":
-        const trimmed = { fields: [] };
-        schema.Children.forEach((child: any) => {
-          if (!child.System_Name || !child.Type) return;
-          
-          const fieldData: any = {
-            name: child.Label || child.Settings?.Label || child.System_Name,
-            type: this.mapFieldType(child.Type)
-          };
-          
-          // Add options for classification/select fields
-          const selectTypes = ['InputClassification', 'select']
-          if (selectTypes.includes(child.Type) && child.Children && child.Children.length > 0) {
-            fieldData.options = child.Children.map((option: any) => 
-              option.System_Name || option.Label || option.toString()
-            );
-          }
-
-          console.log("fieldData", fieldData);
-          
-          trimmed.fields.push(fieldData);
-        });
-        
-        // console.log("Schema apres transformation, contexte NG:", trimmed);
-        return trimmed;
-      case "ecoll-veto":
-        // console.log("TODO trimSchemaForAI", schema)
-        const mergedItemsSchema = (this.parsedSchema[0].items).concat(this.parsedSchema[1].items);
-
-        if (mergedItemsSchema) {
-          const trimmedSchema: FormSchema = {
-            title: 'Form Name',
-            description: 'Form Description',
-            schema: {}
-          };
-
-          Object.entries(mergedItemsSchema).forEach(([key, field]: [string, any]) => {
-            const fieldName = field.name;
-            const fieldType = this.mapFieldType(field.type) as any;
-            const fieldLabel = field.label || fieldName;
-            const isRequired = field.required || false;
-            const fieldValue = ''; //TODO
-            
-            trimmedSchema.schema[fieldName] = {
-              type: fieldType,
-              title: fieldLabel,
-              options: field.options,
-              readonly: field.readonly === true,
-              default: '',
-            };
-          });
-
-          // console.log("Schema apres transformation, contexte Track:", trimmedSchema);
-          return trimmedSchema;
-        }
-      case "track":
-      default:
-        // Handle simple schema format (backward compatibility)
-        if (schema?.schema ?? schema?.fields) {
-          const trimmedSchema: FormSchema = {
-            title: schema.title,
-            description: schema.description,
-            schema: {}
-          };
-
-          const finalSchema = schema?.schema ?? schema?.fields;
-
-          Object.entries(finalSchema).forEach(([fieldName, field]: [string, any]) => {
-            trimmedSchema.schema[fieldName] = {
-              type: field.type,
-              title: field.title,
-              options: field.options,
-              readonly: field.Enabled === false,
-              default: field.DefaultValue,
-              pattern: field.Mask,
-              min: field.ValidationMin,
-              max: field.ValidationMax
-            };
-          });
-
-        
-          // console.log("Schema apres transformation, contexte Track:", trimmedSchema);
-          return trimmedSchema;
-        }
-        break;
-    }
-    
-    return schema;
-  }
-
-  private mapFieldType(type: string): string {
-    const typeMapping = {
-      'InputAutocomplete': 'string',
-      'InputInteger': 'number',
-      'InputTextArea': 'string',
-      'InputDateTimePicker': 'datetime',
-      'InputDecimal': 'number',
-      'InputClassification': 'select',
-      'InputCheckbox': 'boolean',
-      'InputTextTranslation': 'string',
-      'thesaurus': 'string',
-      'position': 'string',
-      'text': 'string',
-      'textarea': 'string',
-      'number': 'number',
-      'date': 'date',
-      'datetime': 'datetime',
-      'select': 'select',
-      'checkbox': 'checkbox'
-    };
-    
-    return typeMapping[type] || 'string';
-  }
-
-  // Utility methods exposed as public API
-  @Method() public async convertXmlToJson(xmlForm: string): Promise<FormSchemaFieldsOnly> {
-    return SchemaConverter.convertXmlToJson(xmlForm, this.classificationRootUrl, this.language);
-  }
-
-  @Method() public async convertJsonToXml(jsonForm: FormSchemaFieldsOnlyExtended): Promise<string> {
-    return SchemaConverter.convertJsonToXml(jsonForm);
-  }
-
-  // Utility methods exposed as public API
-  @Method() public async convertXmlToJsonLegacy(xmlForm: string): Promise<FormSchema> {
-    return SchemaConverter.convertXmlToJsonLegacy(xmlForm);
-  }
-
-  @Method() public async convertJsonToXmlLegacy(jsonForm: FormSchema): Promise<string> {
-    return SchemaConverter.convertJsonToXmlLegacy(jsonForm);
-  }
-
-  private renderUploadButton() {
-    if (!this.inputTypes.includes('ocr'))
-      return;
-    return(
-      <ocr-file-uploader
-        batch={false}
-        callback={(data) => {this.processJsonForm(data);}}
-      >
-      </ocr-file-uploader>
-    );
-  }
-
-  private fileInputAudioRecord!: HTMLInputElement;
-
-  private triggerAudioRecordUpload = () => {
-      this.fileInputAudioRecord.click();
-  };
-
-  private handleAudioRecordChange = async (event: Event) => {
-    const input = event.target as HTMLInputElement;
-    if (!input.files || input.files.length === 0) return;
-
-    const file = input.files[0];
-
-    // Here you can handle the file upload to your API
-    console.log('Selected file:', file);
-
-    this.processAudioContent(file);
-  };
-
-  private renderUploadRecordButton() {
-    return (
-      <div class="upload-record-container" onClick={this.triggerAudioRecordUpload}>
-        <input
-            type="file"
-            ref={el => (this.fileInputAudioRecord = el!)}
-            onChange={this.handleAudioRecordChange}
-            style={{ display: 'none' }}
-        />
-        <div class='upload-record-button'>
-          <svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-            <path fill-rule="evenodd" clip-rule="evenodd" d="M12 2.75C6.89137 2.75 2.75 6.89137 2.75 12C2.75 17.1086 6.89137 21.25 12 21.25C12.6345 21.25 13.2534 21.1862 13.8508 21.065C14.2567 20.9826 14.6526 21.2448 14.735 21.6508C14.8174 22.0567 14.5551 22.4526 14.1492 22.535C13.4541 22.6761 12.7353 22.75 12 22.75C6.06294 22.75 1.25 17.9371 1.25 12C1.25 6.06294 6.06294 1.25 12 1.25C17.9371 1.25 22.75 6.06294 22.75 12C22.75 12.7353 22.6761 13.4541 22.535 14.1492C22.4526 14.5551 22.0567 14.8174 21.6508 14.735C21.2448 14.6526 20.9826 14.2567 21.065 13.8508C21.1862 13.2534 21.25 12.6345 21.25 12C21.25 6.89137 17.1086 2.75 12 2.75ZM12.7676 8.52584C12.7661 8.53409 12.7604 8.56729 12.7564 8.64336C12.7502 8.76101 12.75 8.91982 12.75 9.17082C12.75 9.27795 12.7501 9.33904 12.7518 9.38529C12.7528 9.41425 12.7542 9.42649 12.7546 9.42955C12.7662 9.48945 12.7993 9.54303 12.8477 9.58021C12.8502 9.58194 12.8606 9.58864 12.886 9.60252C12.9266 9.62468 12.9812 9.65209 13.0771 9.7L14.3938 10.3584C14.6183 10.4706 14.7604 10.5414 14.8684 10.5885C14.9382 10.6189 14.9705 10.6287 14.9785 10.631C15.0885 10.6405 15.1917 10.5767 15.2324 10.4742C15.2339 10.4659 15.2396 10.4327 15.2436 10.3566C15.2498 10.239 15.25 10.0802 15.25 9.82918C15.25 9.72205 15.2499 9.66096 15.2482 9.61471C15.2472 9.58575 15.2458 9.57351 15.2454 9.57045C15.2338 9.51055 15.2007 9.45697 15.1523 9.41979C15.1498 9.41805 15.1394 9.41136 15.114 9.39748C15.0734 9.37533 15.0188 9.34791 14.9229 9.3L13.6062 8.64164C13.3817 8.52939 13.2396 8.45859 13.1316 8.41151C13.0617 8.38107 13.0295 8.37131 13.0215 8.36896C12.9115 8.35945 12.8083 8.42327 12.7676 8.52584ZM12.75 11.2135L13.7396 11.7083C13.9425 11.8098 14.1204 11.8987 14.269 11.9635C14.4199 12.0293 14.5988 12.097 14.7972 12.1202C15.6037 12.2142 16.3689 11.7413 16.6454 10.978C16.7134 10.7901 16.7328 10.5998 16.7415 10.4355C16.75 10.2735 16.75 10.0747 16.75 9.8479V9.82918C16.75 9.81565 16.75 9.80205 16.75 9.78837C16.7503 9.62647 16.7505 9.45474 16.7188 9.28904C16.638 8.86674 16.4045 8.48898 16.0629 8.22783C15.9289 8.12535 15.7752 8.04877 15.6303 7.97658C15.618 7.97048 15.6059 7.96441 15.5938 7.95836L14.2603 7.29164C14.0575 7.19022 13.8796 7.10128 13.731 7.03647C13.5801 6.97071 13.4012 6.90297 13.2028 6.87982C12.3963 6.78575 11.6311 7.25868 11.3546 8.02203C11.2866 8.20986 11.2672 8.40019 11.2585 8.56454C11.2519 8.68919 11.2504 8.83571 11.2501 9L11.25 9.11944C11.25 9.13026 11.25 9.14115 11.25 9.1521V9.17082C11.25 9.18435 11.25 9.19795 11.25 9.21163C11.2499 9.23918 11.2499 9.26701 11.25 9.29505V12.5499C10.875 12.3581 10.4501 12.25 10 12.25C8.48122 12.25 7.25 13.4812 7.25 15C7.25 16.5188 8.48122 17.75 10 17.75C11.5188 17.75 12.75 16.5188 12.75 15V11.2135ZM11.25 15C11.25 14.3096 10.6904 13.75 10 13.75C9.30964 13.75 8.75 14.3096 8.75 15C8.75 15.6904 9.30964 16.25 10 16.25C10.6904 16.25 11.25 15.6904 11.25 15ZM17.4697 14.4697C17.7626 14.1768 18.2374 14.1768 18.5303 14.4697L21.0303 16.9697C21.3232 17.2626 21.3232 17.7374 21.0303 18.0303C20.7374 18.3232 20.2626 18.3232 19.9697 18.0303L18.75 16.8107V22C18.75 22.4142 18.4142 22.75 18 22.75C17.5858 22.75 17.25 22.4142 17.25 22V16.8107L16.0303 18.0303C15.7374 18.3232 15.2626 18.3232 14.9697 18.0303C14.6768 17.7374 14.6768 17.2626 14.9697 16.9697L17.4697 14.4697Z" />
-          </svg>
-        </div>
-      </div>
-    )
-  }
-
-  private renderRecordButton() {
-    if (!this.inputTypes.includes('voice'))
-      return;
-
-    const buttonClass = [
-      'record-button',
-      this.isRecording && 'recording',
-      this.isProcessing && 'processing'
-    ].filter(Boolean).join(' ');
-
-    const isDisabled = this.isProcessing || this.hasError;
-
-    return (
-      <button 
-        class={buttonClass}
-        onClick={() => this.handleRecordClick()}
-        disabled={isDisabled}
-        aria-label={this.isRecording ? 'Stop recording' : 'Start recording'}
-      >
-        {this.isProcessing ? (
-          <svg class="record-icon" viewBox="0 0 24 24">
-            <circle cx="12" cy="12" r="3">
-              <animate attributeName="r" values="3;6;3" dur="1s" repeatCount="indefinite" />
-              <animate attributeName="opacity" values="1;0.3;1" dur="1s" repeatCount="indefinite" />
-            </circle>
-          </svg>
-        ) : this.isRecording ? (
-          <svg class="record-icon" viewBox="0 0 24 24">
-            <rect x="6" y="6" width="12" height="12" rx="2" />
-          </svg>
-        ) : (
-          <svg class="record-icon" viewBox="0 0 24 24">
-            <circle cx="12" cy="12" r="8" />
-          </svg>
-        )}
-      </button>
-    );
-  }
-
-  private renderStatusMessage() {
-    const statusClass = [
-      'status-text',
-      this.hasError && 'error',
-      this.filledData && !this.hasError && 'success'
-    ].filter(Boolean).join(' ');
-
-    return <div class={statusClass}>{this.statusMessage}</div>;
-  }
-
-  private renderFormPreview() {
-    if (!this.parsedSchema) return null;
-
-    const isPreview = this.isReadonlyMode && !this.filledData;
-    const title = isPreview ? 'Form Preview (Voice input to fill)' : 'Voice-Filled Form:';
-    
-    return (
-      <div class="form-preview">
-        <div class="form-preview-title">{title}</div>
-        <form class="voice-filled-form">
-          {this.renderFormFields()}
-        </form>
-      </div>
-    );
-  }
-
-  private renderFormFields() {
-    // console.log("renderFormFields", this.parsedSchema);
-    if (!this.parsedSchema) return null;
-    
-    switch(this.context){
-      case "ecoteka":
-        // console.log("TODO renderFormFields", this.parsedSchema);
-      case "ng":
-        return this.parsedSchema.Children.map((child: any) => {
-          if (!child.System_Name || !child.Type) return null;
-          
-          const fieldName = child.System_Name;
-          const fieldType = this.mapFieldType(child.Type);
-          const fieldLabel = child.Settings?.Label || child.System_Name;
-          const isRequired = child.Required || false;
-          const fieldValue = child.Settings?.Default_Value;
-          
-          return (
-            <div class="form-group" key={fieldName}>
-              <label htmlFor={fieldName} class="form-label">
-                {fieldLabel}
-                {isRequired && <span class="required">*</span>}
-              </label>
-              {this.renderFormField(fieldName, {
-                type: fieldType,
-                title: fieldLabel,
-                required: isRequired,
-                options: child.Children?.map((option: any) => 
-                  option.System_Name || option.Label || option.toString()
-                )
-              }, fieldValue)}
-            </div>
-          );
-        }).filter(Boolean);
-      case "ecoll-veto":
-        // NOTE STEP 2
-        // console.log("TODO renderFormFields", this.parsedSchema);
-        const mergedItemsSchema = (this.parsedSchema[0].items).concat(this.parsedSchema[1].items);
-        return Object.entries(mergedItemsSchema).map(([key, field]: [string, any]) => {
-          
-          const fieldName = field.name;
-          field.type = this.mapFieldType(field.type);
-          const fieldLabel = field.label || fieldName;
-          const isRequired = field.required || false;
-          const fieldValue = this.parsedSchema[2][fieldName];
-
-          return (
-            <div class="form-group" key={fieldName}>
-              <label htmlFor={fieldName} class="form-label">
-                { fieldLabel }
-                {isRequired && <span class="required">*</span>}
-              </label>
-              {this.renderFormField(fieldName, field, (this.filledData?.[fieldName] ?? fieldValue))}
-            </div>
-          );
-        });
-      case "track":
-      default:
-        return Object.entries(this.parsedSchema.fields).map(([fieldName, field]: [string, any]) => (
-          <div class="form-group" key={fieldName}>
-            <label htmlFor={fieldName} class="form-label">
-              {field.title || fieldName}
-              {field.required && <span class="required">*</span>}
-            </label>
-            {this.renderFormField(fieldName, field, (this.filledData?.[fieldName] ?? field.value))}
-          </div>
-        ));
-    }
-  }
-
-  private renderFormField(fieldName: string, field: any, value: any) {
-    const isReadonly = this.isReadonlyMode && !this.filledData;
-    const commonProps = {
-      id: fieldName,
-      name: fieldName,
-      class: 'form-input',
-      required: field.required,
-      disabled: isReadonly
-    };
-
-    switch (field.type) {
-      case 'select':
-        if (isReadonly) {
-          // In readonly mode, show all options as a list instead of dropdown
-          return (
-            <div class="readonly-select">
-              <div class="select-placeholder">Available options:</div>
-              <ul class="select-options-list">
-                {field.options?.map(option => (
-                  <li class="select-option">{option}</li>
-                ))}
-              </ul>
-            </div>
-          );
-        }
-        return (
-          <select id={fieldName} name={fieldName} class="form-input" required={field.required}>
-            <option value="">-- Select --</option>
-            {field.options?.map(option => (
-              <option value={option} selected={value === option}>
-                {option}
-              </option>
-            ))}
-          </select>
-        );
-      
-      case 'boolean':
-        return (
-          <input 
-            {...commonProps}
-            type="checkbox" 
-            class="form-checkbox"
-            checked={value === true || value === 'true'}
-          />
-        );
-      
-      case 'number':
-        return (
-          <input 
-            {...commonProps}
-            type="number" 
-            min={field.min}
-            max={field.max}
-            step="any"
-            value={value || ''}
-          />
-        );
-      
-      case 'date':
-        return (
-          <input 
-            {...commonProps}
-            type='date'
-            value={value ? (([d, m, y]) => `${y}-${m}-${d}`)(value.split("/")) : ''}
-          />
-        );
-
-      case 'datetime':
-        return (
-          <input 
-            {...commonProps}
-            type='datetime-local'
-            value={value || ''}
-          />
-        );
-      
-      default: // string
-        return (
-          <input 
-            {...commonProps}
-            type="text" 
-            pattern={field.pattern}
-            placeholder={field.description}
-            value={value || ''}
-          />
-        );
-    }
-  }
-
-  private renderDebugPanel() {
-    if (!this.debug) return null;
-
-    return (
-      <div class="debug-panel">
-        <div class="debug-title">Debug Information:</div>
-        <div class="debug-content">
-          {JSON.stringify(this.debugInfo, null, 2)}
-        </div>
-      </div>
-    );
-  }
-
-  render() {
-    return (
-      <div>
-        <div class={"voice-recorder-container" + (this.debug || this.renderForm ? "-debug" : "")}>
-          <div class="row-audio-area">
-            {this.renderRecordButton()}
-            {this.renderUploadRecordButton()}
-          </div>
-          {this.displayStatus ? this.renderStatusMessage() : ""}
-          {this.renderUploadButton()}
-          {this.renderForm ? this.renderFormPreview() : ""}
-          {this.debug ? this.renderDebugPanel() : ""}
-        </div>
-      </div>
-    );
-  }
-}