Form in ChatInput are displayed correctly!

eveai_chat_client/static/css/chat-input.css

@@ -0,0 +1,11 @@
+/* Animation styles for ChatInput component */
+@keyframes spin {
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
+}
+
+/* Add more ChatInput-specific styles here */
+.loading-spinner {
+    display: inline-block;
+    animation: spin 1s linear infinite;
+}

eveai_chat_client/static/js/chat-app.js

@@ -567,7 +567,6 @@ export const ChatApp = {
                 :is-submitting-form="isSubmittingForm"
                 :api-prefix="apiPrefix"
                 :auto-scroll="true"
-                @submit-form="submitForm"
                 @specialist-error="handleSpecialistError"
                 @specialist-complete="handleSpecialistComplete"
                 ref="messageHistory"

eveai_chat_client/static/js/components/ChatInput.js

@@ -4,6 +4,19 @@
     // Anders moet je ervoor zorgen dat MaterialIconManager.js eerder wordt geladen
     // en iconManager beschikbaar is via window.iconManager
 
+    // Voeg stylesheet toe voor ChatInput-specifieke stijlen
+    const addStylesheet = () => {
+        if (!document.querySelector('link[href*="chat-input.css"]')) {
+            const link = document.createElement('link');
+            link.rel = 'stylesheet';
+            link.href = '/static/assets/css/chat-input.css';
+            document.head.appendChild(link);
+        }
+    };
+
+    // Laad de stylesheet
+    addStylesheet();
+
     export const ChatInput = {
     name: 'ChatInput',
     components: {
@@ -235,7 +248,10 @@
         },
 
         updateFormValues(newValues) {
-            this.formValues = { ...newValues };
+            // Controleer of er daadwerkelijk iets is veranderd om recursieve updates te voorkomen
+            if (JSON.stringify(newValues) !== JSON.stringify(this.formValues)) {
+                this.formValues = JSON.parse(JSON.stringify(newValues));
+            }
         }
     },
     template: `
@@ -260,13 +276,6 @@
                 <!-- Geen extra knoppen meer onder het formulier, alles gaat via de hoofdverzendknop -->
             </div>
 
-            <style>
-                @keyframes spin {
-                    0% { transform: rotate(0deg); }
-                    100% { transform: rotate(360deg); }
-                }
-            </style>
-
             <div class="chat-input">
                 <!-- Main input area -->
                 <div class="input-main">

eveai_chat_client/static/js/components/DynamicForm.js

@@ -65,13 +65,19 @@ export const DynamicForm = {
     watch: {
         formValues: {
             handler(newValues) {
-                this.localFormValues = { ...newValues };
+                // Gebruik een vlag om recursieve updates te voorkomen
+                if (JSON.stringify(newValues) !== JSON.stringify(this.localFormValues)) {
+                    this.localFormValues = JSON.parse(JSON.stringify(newValues));
+                }
             },
             deep: true
         },
         localFormValues: {
             handler(newValues) {
-                this.$emit('update:formValues', newValues);
+                // Gebruik een vlag om recursieve updates te voorkomen
+                if (JSON.stringify(newValues) !== JSON.stringify(this.formValues)) {
+                    this.$emit('update:formValues', JSON.parse(JSON.stringify(newValues)));
+                }
             },
             deep: true
         },

eveai_chat_client/static/js/components/FormField.js

@@ -30,8 +30,11 @@ export const FormField = {
                 return this.modelValue;
             },
             set(value) {
+                // Voorkom emit als de waarde niet is veranderd
+                if (JSON.stringify(value) !== JSON.stringify(this.modelValue)) {
                     this.$emit('update:modelValue', value);
                 }
+            }
         },
         fieldType() {
             // Map Python types naar HTML input types