Chat client changes

- Form values shown correct in MessageHistory of Chat client
- Improements to CSS
- Move css en js to assets directory
- Introduce better Personal Contact Form & Professional Contact Form
- Start working on actual Selection Specialist

eveai_chat_client/static/assets/js/iconManager.js

@@ -0,0 +1,135 @@
+// static/js/iconManager.js
+
+/**
+ * Een eenvoudige standalone icon manager voor Material Symbols Outlined
+ * Deze kan direct worden gebruikt zonder Vue
+ */
+window.iconManager = {
+    loadedIcons: [],
+
+    /**
+     * Laadt een Material Symbols Outlined icoon als het nog niet is geladen
+     * @param {string} iconName - Naam van het icoon
+     * @param {Object} options - Opties voor het icoon (opsz, wght, FILL, GRAD)
+     */
+    loadIcon: function(iconName, options = {}) {
+        if (!iconName) return;
+
+        if (this.loadedIcons.includes(iconName)) {
+            return; // Icoon is al geladen
+        }
+
+        const defaultOptions = {
+            opsz: 24,
+            wght: 400,
+            FILL: 0,
+            GRAD: 0
+        };
+
+        const opts = { ...defaultOptions, ...options };
+
+        // Genereer unieke ID voor het stylesheet element
+        const styleId = `material-symbols-${iconName}`;
+
+        // Controleer of het stylesheet al bestaat
+        if (!document.getElementById(styleId)) {
+            const link = document.createElement('link');
+            link.id = styleId;
+            link.rel = 'stylesheet';
+            link.href = `https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@${opts.opsz},${opts.wght},${opts.FILL},${opts.GRAD}&icon_names=${iconName}`;
+            document.head.appendChild(link);
+            console.log(`Material Symbol geladen: ${iconName}`);
+
+            this.loadedIcons.push(iconName);
+        }
+    },
+
+    /**
+     * Laadt een set van Material Symbols Outlined iconen
+     * @param {Array} iconNames - Array met icoonnamen
+     * @param {Object} options - Opties voor de iconen
+     */
+    loadIcons: function(iconNames, options = {}) {
+        if (!iconNames || !Array.isArray(iconNames) || iconNames.length === 0) {
+            return;
+        }
+
+        // Filter alleen iconen die nog niet zijn geladen
+        const newIcons = iconNames.filter(icon => !this.loadedIcons.includes(icon));
+
+        if (newIcons.length === 0) {
+            return; // Alle iconen zijn al geladen
+        }
+
+        const defaultOptions = {
+            opsz: 24,
+            wght: 400,
+            FILL: 0,
+            GRAD: 0
+        };
+
+        const opts = { ...defaultOptions, ...options };
+
+        // Genereer unieke ID voor het stylesheet element
+        const styleId = `material-symbols-set-${newIcons.join('-')}`;
+
+        // Controleer of het stylesheet al bestaat
+        if (!document.getElementById(styleId)) {
+            const link = document.createElement('link');
+            link.id = styleId;
+            link.rel = 'stylesheet';
+            link.href = `https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@${opts.opsz},${opts.wght},${opts.FILL},${opts.GRAD}&icon_names=${newIcons.join(',')}`;
+            document.head.appendChild(link);
+            console.log(`Material Symbols geladen: ${newIcons.join(', ')}`);
+
+            // Voeg de nieuwe iconen toe aan de geladen lijst
+            this.loadedIcons.push(...newIcons);
+        }
+    }
+};
+
+// Functie om iconManager toe te voegen aan het DynamicForm component
+function initDynamicFormWithIcons() {
+    if (window.DynamicForm) {
+        const originalCreated = window.DynamicForm.created || function() {};
+
+        window.DynamicForm.created = function() {
+            // Roep de oorspronkelijke created methode aan als die bestond
+            originalCreated.call(this);
+
+            // Laad het icoon als het beschikbaar is
+            if (this.formData && this.formData.icon) {
+                window.iconManager.loadIcon(this.formData.icon);
+            }
+        };
+
+        // Voeg watcher toe voor formData.icon
+        if (!window.DynamicForm.watch) {
+            window.DynamicForm.watch = {};
+        }
+
+        window.DynamicForm.watch['formData.icon'] = {
+            handler: function(newIcon) {
+                if (newIcon) {
+                    window.iconManager.loadIcon(newIcon);
+                }
+            },
+            immediate: true
+        };
+
+        console.log('DynamicForm is uitgebreid met iconManager functionaliteit');
+    } else {
+        console.warn('DynamicForm component is niet beschikbaar. iconManager kan niet worden toegevoegd.');
+    }
+}
+
+// Probeer het DynamicForm component te initialiseren zodra het document geladen is
+document.addEventListener('DOMContentLoaded', function() {
+    // Wacht een korte tijd om er zeker van te zijn dat DynamicForm is geladen
+    setTimeout(initDynamicFormWithIcons, 100);
+});
+
+// Als DynamicForm al beschikbaar is, initialiseer direct
+if (window.DynamicForm) {
+    initDynamicFormWithIcons();
+}