reneco-advanced-input-module 0.0.1

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

@@ -0,0 +1,731 @@
+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() voiceOrOcr: 'voice'|'ocr'|'both' = undefined;
+  
+  @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');
+      }
+    } 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 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();
+      this.updateDebugInfo('Audio Captured', { 
+        size: audioBlob.size, 
+        type: audioBlob.type 
+      });
+
+      // Transcribe audio
+      this.statusMessage = (this.language == 'en' ? 'Transcribing speech...' : 'Transcription du texte ...');
+      const transcription = await this.speechToTextService.transcribe(audioBlob, 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
+      });
+
+    } 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 "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
+            );
+            
+            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 "ecoteka":
+        // console.log("TODO extractFilledData", filledData);
+        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 'ng':
+        const trimmed = { fields: [] };
+        schema.Children.forEach((child: any) => {
+          if (!child.System_Name || !child.Type) return;
+          
+          const fieldData: any = {
+            name: child.System_Name,
+            type: this.mapFieldType(child.Type)
+          };
+          
+          // Add options for classification/select fields
+          if (child.Type === 'InputClassification' && child.Children && child.Children.length > 0) {
+            fieldData.options = child.Children.map((option: any) => 
+              option.System_Name || option.Label || option.toString()
+            );
+          }
+          
+          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 "ecoteka":
+        // console.log("TODO trimSchemaForAI", schema)
+        break;
+      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'
+    };
+    
+    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 (!['ocr', 'both'].includes(this.voiceOrOcr))
+      return;
+    return(
+      <file-uploader
+        batch={false}
+        callback={(data) => {this.processJsonForm(data);}}
+      >
+      </file-uploader>
+    );
+  }
+
+  private renderRecordButton() {
+    if (!['voice', 'both', undefined].includes(this.voiceOrOcr))
+      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 "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 "ecoteka":
+        // console.log("TODO renderFormFields", this.parsedSchema);
+        break;
+      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>
+        ));
+    }
+    
+    return null;
+  }
+
+  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" : "")}>
+          {this.renderRecordButton()}
+          {this.displayStatus ? this.renderStatusMessage() : ""}
+          {this.renderUploadButton()}
+          {this.renderForm ? this.renderFormPreview() : ""}
+          {this.debug ? this.renderDebugPanel() : ""}
+        </div>
+      </div>
+    );
+  }
+}