reneco-advanced-input-module 0.0.1

package/inject-env.js

@@ -0,0 +1,20 @@
+#!/usr/bin/env node
+
+// Script to inject environment variables into the client config
+const fs = require('fs');
+const path = require('path');
+
+const envConfigPath = path.join(__dirname, 'www', 'env-config.js');
+const apiKey = process.env.OPENAI_API_KEY;
+
+if (apiKey) {
+  const configContent = `// Environment configuration for client-side
+window.ENV_CONFIG = {
+  OPENAI_API_KEY: '${apiKey}'
+};`;
+  
+  fs.writeFileSync(envConfigPath, configContent);
+  console.log('Environment variables injected successfully');
+} else {
+  console.log('No OPENAI_API_KEY found in environment');
+}

package/package.json

@@ -0,0 +1,37 @@
+{
+  "name": "reneco-advanced-input-module",
+  "version": "0.0.1",
+  "description": "Component to input data into forms by voice",
+  "keywords": [],
+  "author": "Natural Solutions",
+  "license": "MIT",
+
+  "scripts": {
+    "build": "npm test && stencil build --docs",
+    "start": "node inject-env.js && stencil build --dev --watch --serve",
+    "inject": "node inject-env.js",
+    "test": "stencil test --spec --forceExit --passWithNoTests",
+    "test.watch": "stencil test --spec --e2e --watchAll",
+    "generate": "stencil generate",
+    "generate-doc": "npx stencil docs"
+  },
+  "dependencies": {
+    "@stencil/core": "^4.36.2",
+    "@stencil/router": "^1.0.1",
+    "@types/node": "^24.2.0",
+    "openai": "^5.11.0",
+    "typescript": "^5.9.2"
+  },
+  "devDependencies": {
+    "@types/jest": "^29.5.14",
+    "jest": "^29.7.0",
+    "jest-cli": "^29.7.0"
+  },
+
+  "main": "dist/index.cjs.js",
+  "module": "dist/custom-elements/index.js",
+  "es2015": "dist/esm/index.mjs",
+  "es2017": "dist/esm/index.mjs",
+  "collection": "dist/collection/collection-manifest.json",
+  "collection:main": "dist/collection/index.js"
+}

package/readme.md

@@ -0,0 +1,111 @@
+[![Built With Stencil](https://img.shields.io/badge/-Built%20With%20Stencil-16161d.svg?logo=data%3Aimage%2Fsvg%2Bxml%3Bbase64%2CPD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE5LjIuMSwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHZpZXdCb3g9IjAgMCA1MTIgNTEyIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA1MTIgNTEyOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI%2BCjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI%2BCgkuc3Qwe2ZpbGw6I0ZGRkZGRjt9Cjwvc3R5bGU%2BCjxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik00MjQuNywzNzMuOWMwLDM3LjYtNTUuMSw2OC42LTkyLjcsNjguNkgxODAuNGMtMzcuOSwwLTkyLjctMzAuNy05Mi43LTY4LjZ2LTMuNmgzMzYuOVYzNzMuOXoiLz4KPHBhdGggY2xhc3M9InN0MCIgZD0iTTQyNC43LDI5Mi4xSDE4MC40Yy0zNy42LDAtOTIuNy0zMS05Mi43LTY4LjZ2LTMuNkgzMzJjMzcuNiwwLDkyLjcsMzEsOTIuNyw2OC42VjI5Mi4xeiIvPgo8cGF0aCBjbGFzcz0ic3QwIiBkPSJNNDI0LjcsMTQxLjdIODcuN3YtMy42YzAtMzcuNiw1NC44LTY4LjYsOTIuNy02OC42SDMzMmMzNy45LDAsOTIuNywzMC43LDkyLjcsNjguNlYxNDEuN3oiLz4KPC9zdmc%2BCg%3D%3D&colorA=16161d&style=flat-square)](https://stenciljs.com)
+
+# Stencil Component Starter
+
+> This is a starter project for building a standalone Web Components using Stencil.
+
+Stencil is a compiler for building fast web apps using Web Components.
+
+Stencil combines the best concepts of the most popular frontend frameworks into a compile-time rather than runtime tool. Stencil takes TypeScript, JSX, a tiny virtual DOM layer, efficient one-way data binding, an asynchronous rendering pipeline (similar to React Fiber), and lazy-loading out of the box, and generates 100% standards-based Web Components that run in any browser supporting the Custom Elements specification.
+
+Stencil components are just Web Components, so they work in any major framework or with no framework at all.
+
+## Getting Started
+
+To start building a new web component using Stencil, clone this repo to a new directory:
+
+```bash
+git clone https://github.com/stenciljs/component-starter.git my-component
+cd my-component
+git remote rm origin
+```
+
+and run:
+
+```bash
+npm install
+npm start
+```
+
+To build the component for production, run:
+
+```bash
+npm run build
+```
+
+To run the unit tests for the components, run:
+
+```bash
+npm test
+```
+
+Need help? Check out our docs [here](https://stenciljs.com/docs/my-first-component).
+
+## Naming Components
+
+When creating new component tags, we recommend _not_ using `stencil` in the component name (ex: `<stencil-datepicker>`). This is because the generated component has little to nothing to do with Stencil; it's just a web component!
+
+Instead, use a prefix that fits your company or any name for a group of related components. For example, all of the [Ionic-generated](https://ionicframework.com/) web components use the prefix `ion`.
+
+## Using this component
+
+There are two strategies we recommend for using web components built with Stencil.
+
+The first step for all two of these strategies is to [publish to NPM](https://docs.npmjs.com/getting-started/publishing-npm-packages).
+
+You can read more about these different approaches in the [Stencil docs](https://stenciljs.com/docs/publishing).
+
+### Lazy Loading
+
+If your Stencil project is built with the [`dist`](https://stenciljs.com/docs/distribution) output target, you can import a small bootstrap script that registers all components and allows you to load individual component scripts lazily.
+
+For example, given your Stencil project namespace is called `my-design-system`, to use `my-component` on any website, inject this into your HTML:
+
+```html
+<script type="module" src="https://unpkg.com/my-design-system"></script>
+<!--
+To avoid unpkg.com redirects to the actual file, you can also directly import:
+https://unpkg.com/foobar-design-system@0.0.1/dist/foobar-design-system/foobar-design-system.esm.js
+-->
+<my-component first="Stencil" middle="'Don't call me a framework'" last="JS"></my-component>
+```
+
+This will only load the necessary scripts needed to render `<my-component />`. Once more components of this package are used, they will automatically be loaded lazily.
+
+You can also import the script as part of your `node_modules` in your applications entry file:
+
+```tsx
+import 'foobar-design-system/dist/foobar-design-system/foobar-design-system.esm.js';
+```
+
+Check out this [Live Demo](https://stackblitz.com/edit/vitejs-vite-y6v26a?file=src%2Fmain.tsx).
+
+### Standalone
+
+If you are using a Stencil component library with `dist-custom-elements`, we recommend importing Stencil components individually in those files where they are needed.
+
+To export Stencil components as standalone components make sure you have the [`dist-custom-elements`](https://stenciljs.com/docs/custom-elements) output target defined in your `stencil.config.ts`.
+
+For example, given you'd like to use `<my-component />` as part of a React component, you can import the component directly via:
+
+```tsx
+import 'foobar-design-system/my-component';
+
+function App() {
+  return (
+    <>
+      <div>
+        <my-component
+          first="Stencil"
+          middle="'Don't call me a framework'"
+          last="JS"
+        ></my-component>
+      </div>
+    </>
+  );
+}
+
+export default App;
+```
+
+Check out this [Live Demo](https://stackblitz.com/edit/vitejs-vite-b6zuds?file=src%2FApp.tsx).

package/src/components/file-uploader/file-uploader.css

@@ -0,0 +1,26 @@
+
+.upload-container {
+  display: inline-block;
+  cursor: pointer;
+  width: 50px;
+  height: 50px;
+}
+
+.upload-button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: transform 0.2s ease, box-shadow 0.2s ease;
+  user-select: none;
+}
+
+.upload-button svg {
+  width: 50px;
+  height: 50px;
+  stroke: #44ee44;
+}
+
+.upload-button:hover svg{
+  transform: scale(1.05);
+  stroke: #33dd33;
+}

package/src/components/file-uploader/file-uploader.tsx

@@ -0,0 +1,100 @@
+import { Component, h, Prop } from '@stencil/core';
+
+@Component({
+    tag: 'file-uploader',
+    styleUrl: 'file-uploader.css',
+    shadow: true
+})
+export class FileUploader {
+    @Prop() batch: boolean = false;
+    @Prop() callback: Function;
+
+    private fileInput!: HTMLInputElement;
+
+    private triggerUpload = () => {
+        this.fileInput.click();
+    };
+
+    private handleFileChange = 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);
+
+        const formData = new FormData();
+        formData.append('file', file);
+
+        if (this.batch) {
+            try {
+                const response = await fetch('http://127.0.0.1:5001/api/convert-to-xml', {
+                    method: 'POST',
+                    body: formData
+                });
+
+                if (!response.ok) {
+                    console.error("There has been an error!:", response);
+                    throw new Error(`HTTP error! status: ${response.status}`);
+                }
+                // get the file as a blob
+                const blob = await response.blob();
+                // create a download link
+                const url = window.URL.createObjectURL(blob);
+                const a = document.createElement('a');
+                a.href = url;
+                a.download = 'result-'+Date.now().toString()+'.xlsx';  // filename
+                document.body.appendChild(a);
+                a.click();
+                a.remove();
+                window.URL.revokeObjectURL(url);
+            } catch (err) {
+                console.error(err);
+                alert('Error uploading file');
+            }
+        }
+        else {
+            try {
+                const response = await fetch('http://127.0.0.1:5001/api/convert-to-json', {
+                    method: 'POST',
+                    body: formData
+                });
+
+                if (!response.ok) {
+                    console.error("There has been an error!:", response);
+                    throw new Error(`HTTP error! status: ${response.status}`);
+                }
+                const data = await response.json();
+                console.log('Upload successful:', data);
+                
+                if (this.callback && data[0] && data[0].content){
+                    this.callback(data[0].content);
+                }
+            } catch (err) {
+                console.error(err);
+                alert('Error uploading file');
+            }
+        }
+        
+    };
+
+    render() {
+        return (
+        <div class="upload-container" onClick={this.triggerUpload}>
+            <input
+                type="file"
+                ref={el => (this.fileInput = el!)}
+                onChange={this.handleFileChange}
+                style={{ display: 'none' }}
+            />
+            <div class="upload-button">
+                <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M13.5 3H12H8C6.34315 3 5 4.34315 5 6V18C5 19.6569 6.34315 21 8 21H12M13.5 3L19 8.625M13.5 3V7.625C13.5 8.17728 13.9477 8.625 14.5 8.625H19M19 8.625V11.8125" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+                <path d="M17.5 21L17.5 15M17.5 15L20 17.5M17.5 15L15 17.5" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+                </svg>
+            </div>
+        </div>
+        );
+    }
+}

package/src/components/file-uploader/readme.md

@@ -0,0 +1,31 @@
+# file-uploader
+
+
+
+<!-- Auto Generated Below -->
+
+
+## Properties
+
+| Property   | Attribute  | Description | Type       | Default     |
+| ---------- | ---------- | ----------- | ---------- | ----------- |
+| `batch`    | `batch`    |             | `boolean`  | `false`     |
+| `callback` | `callback` |             | `Function` | `undefined` |
+
+
+## Dependencies
+
+### Used by
+
+ - [voice-input-module](../voice-input-module)
+
+### Graph
+```mermaid
+graph TD;
+  voice-input-module --> file-uploader
+  style file-uploader fill:#f9f,stroke:#333,stroke-width:4px
+```
+
+----------------------------------------------
+
+*Built with [StencilJS](https://stenciljs.com/)*

package/src/components/voice-input-module/readme.md

@@ -0,0 +1,114 @@
+# voice-input-module
+
+
+
+<!-- Auto Generated Below -->
+
+
+## Properties
+
+| Property                | Attribute                 | Description | Type                                           | Default              |
+| ----------------------- | ------------------------- | ----------- | ---------------------------------------------- | -------------------- |
+| `apiKey`                | `api-key`                 |             | `string`                                       | `undefined`          |
+| `classificationRootUrl` | `classification-root-url` |             | `string`                                       | `'http://localhost'` |
+| `context`               | `context`                 |             | `"ecoll-veto" \| "ecoteka" \| "ng" \| "track"` | `undefined`          |
+| `debug`                 | `debug`                   |             | `boolean`                                      | `false`              |
+| `displayStatus`         | `display-status`          |             | `boolean`                                      | `false`              |
+| `formJson`              | `form-json`               |             | `string`                                       | `'{}'`               |
+| `language`              | `language`                |             | `"en" \| "fr"`                                 | `'en'`               |
+| `renderForm`            | `render-form`             |             | `boolean`                                      | `false`              |
+| `serviceConfig`         | `service-config`          |             | `string`                                       | `'{}'`               |
+| `voiceOrOcr`            | `voice-or-ocr`            |             | `"both" \| "ocr" \| "voice"`                   | `undefined`          |
+
+
+## Events
+
+| Event                   | Description | Type                                                    |
+| ----------------------- | ----------- | ------------------------------------------------------- |
+| `formFilled`            |             | `CustomEvent<VoiceFormRecorderResult>`                  |
+| `recordingStateChanged` |             | `CustomEvent<{ isRecording: boolean; state: string; }>` |
+
+
+## Methods
+
+### `convertJsonToXml(jsonForm: FormSchemaFieldsOnlyExtended) => Promise<string>`
+
+
+
+#### Parameters
+
+| Name       | Type                           | Description |
+| ---------- | ------------------------------ | ----------- |
+| `jsonForm` | `FormSchemaFieldsOnlyExtended` |             |
+
+#### Returns
+
+Type: `Promise<string>`
+
+
+
+### `convertJsonToXmlLegacy(jsonForm: FormSchema) => Promise<string>`
+
+
+
+#### Parameters
+
+| Name       | Type         | Description |
+| ---------- | ------------ | ----------- |
+| `jsonForm` | `FormSchema` |             |
+
+#### Returns
+
+Type: `Promise<string>`
+
+
+
+### `convertXmlToJson(xmlForm: string) => Promise<FormSchemaFieldsOnly>`
+
+
+
+#### Parameters
+
+| Name      | Type     | Description |
+| --------- | -------- | ----------- |
+| `xmlForm` | `string` |             |
+
+#### Returns
+
+Type: `Promise<FormSchemaFieldsOnly>`
+
+
+
+### `convertXmlToJsonLegacy(xmlForm: string) => Promise<FormSchema>`
+
+
+
+#### Parameters
+
+| Name      | Type     | Description |
+| --------- | -------- | ----------- |
+| `xmlForm` | `string` |             |
+
+#### Returns
+
+Type: `Promise<FormSchema>`
+
+
+
+
+## Dependencies
+
+### Depends on
+
+- [file-uploader](../file-uploader)
+
+### Graph
+```mermaid
+graph TD;
+  voice-input-module --> file-uploader
+  style voice-input-module fill:#f9f,stroke:#333,stroke-width:4px
+```
+
+----------------------------------------------
+
+*Built with [StencilJS](https://stenciljs.com/)*

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

@@ -0,0 +1,251 @@
+:host {
+  display: block;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+}
+
+.voice-recorder-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 1rem;
+  padding: 1rem;
+  border: 1px solid #e5e7eb;
+  border-radius: 0.5rem;
+  background: #ffffff;
+  max-width: 100px;
+  margin: 0 auto;
+}
+
+.voice-recorder-container-debug {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 1rem;
+  padding: 1rem;
+  border: 1px solid #e5e7eb;
+  border-radius: 0.5rem;
+  background: #ffffff;
+  max-width: 800px;
+  margin: 0 auto;
+}
+
+.record-button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 50px;
+  height: 50px;
+  border: none;
+  border-radius: 50%;
+  background: #ee4444;
+  color: white;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  position: relative;
+  overflow: hidden;
+}
+
+.record-button:hover:not(:disabled) {
+  background: #dd3333;
+  transform: scale(1.05);
+}
+
+.record-button:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+.record-button.recording {
+  background: #dd3333;
+  animation: pulse 1.5s infinite;
+}
+
+.record-button.processing {
+  background: #3b82f6;
+}
+
+@keyframes pulse {
+  0% {
+    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7);
+  }
+  70% {
+    box-shadow: 0 0 0 10px rgba(239, 68, 68, 0);
+  }
+  100% {
+    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0);
+  }
+}
+
+.record-icon {
+  width: 24px;
+  height: 24px;
+  fill: currentColor;
+}
+
+.status-text {
+  font-size: 0.875rem;
+  color: #6b7280;
+  text-align: center;
+  min-height: 1.25rem;
+}
+
+.status-text.error {
+  color: #ee4444;
+}
+
+.status-text.success {
+  color: #10b981;
+}
+
+.debug-panel {
+  width: 100%;
+  margin-top: 1rem;
+  padding: 1rem;
+  background: #f9fafb;
+  border: 1px solid #e5e7eb;
+  border-radius: 0.375rem;
+  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
+  font-size: 0.75rem;
+}
+
+.debug-title {
+  font-weight: 600;
+  margin-bottom: 0.5rem;
+  color: #374151;
+}
+
+.debug-content {
+  white-space: pre-wrap;
+  word-break: break-word;
+  color: #6b7280;
+  max-height: 200px;
+  overflow-y: auto;
+}
+
+.permissions-warning {
+  padding: 0.75rem;
+  background: #fef3c7;
+  border: 1px solid #f59e0b;
+  border-radius: 0.375rem;
+  color: #92400e;
+  font-size: 0.875rem;
+  text-align: center;
+}
+
+.form-preview {
+  width: 100%;
+  margin-top: 1rem;
+  padding: 1rem;
+  background: #f8fafc;
+  border: 1px solid #e2e8f0;
+  border-radius: 0.375rem;
+}
+
+.form-preview-title {
+  font-weight: 600;
+  margin-bottom: 0.5rem;
+  color: #1e293b;
+}
+
+.form-field {
+  margin-bottom: 0.5rem;
+  font-size: 0.875rem;
+}
+
+.field-name {
+  font-weight: 500;
+  color: #475569;
+}
+
+.field-value {
+  color: #64748b;
+  margin-left: 0.5rem;
+}
+
+.field-value.filled {
+  color: #059669;
+  font-weight: 500;
+}
+
+.voice-filled-form {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  margin-top: 1rem;
+}
+
+.form-group {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+}
+
+.form-label {
+  font-weight: 500;
+  color: #374151;
+  font-size: 0.875rem;
+}
+
+.required {
+  color: #ee4444;
+  margin-left: 0.125rem;
+}
+
+.form-input {
+  padding: 0.5rem;
+  border: 1px solid #d1d5db;
+  border-radius: 0.375rem;
+  font-size: 0.875rem;
+  transition: border-color 0.2s ease;
+}
+
+.form-input:focus {
+  outline: none;
+  border-color: #3b82f6;
+  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
+}
+
+.form-checkbox {
+  width: auto;
+  padding: 0;
+  margin: 0;
+}
+
+select.form-input {
+  background-color: white;
+  cursor: pointer;
+}
+
+input[type="date"].form-input {
+  cursor: pointer;
+}
+
+.readonly-select {
+  background: #f9fafb;
+  border: 1px solid #d1d5db;
+  border-radius: 0.375rem;
+  padding: 0.5rem;
+}
+
+.select-placeholder {
+  font-size: 0.875rem;
+  color: #6b7280;
+  margin-bottom: 0.5rem;
+}
+
+.select-options-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.25rem;
+}
+
+.select-option {
+  background: #e5e7eb;
+  padding: 0.25rem 0.5rem;
+  border-radius: 0.25rem;
+  font-size: 0.875rem;
+  color: #374151;
+}