- Min of meer werkende chat client new stule

nginx/frontend_src/js/chat-client.js

@@ -11,17 +11,12 @@ import '../../../eveai_chat_client/static/assets/css/language-selector.css';
 // Dependencies
 import { createApp, version } from 'vue';
 import { marked } from 'marked';
-import { FormField } from '../../../eveai_chat_client/static/assets/js/components/FormField.js';
+import { FormField } from '../../../../../../../../../Users/josako/Library/Application Support/JetBrains/PyCharm2025.1/scratches/old js files/FormField.js';
 
 // Vue en andere bibliotheken beschikbaar maken
 window.Vue = { createApp, version };
 window.marked = marked;
 
-// Debug: Check Vue build type
-console.log('🔍 [DEBUG] Vue object:', window.Vue);
-console.log('🔍 [DEBUG] Vue.createApp:', typeof window.Vue.createApp);
-console.log('🔍 [DEBUG] Vue.version:', window.Vue.version);
-
 // Support tools
 import '../../../eveai_chat_client/static/assets/js/iconManager.js';
 import '../../../eveai_chat_client/static/assets/js/translation.js';
@@ -35,7 +30,7 @@ console.log('Components loaded:', Object.keys(Components));
 
 // Import specifieke componenten
 import LanguageSelector from '../../../eveai_chat_client/static/assets/vue-components/LanguageSelector.vue';
-import { ChatApp } from '../../../eveai_chat_client/static/assets/js/ChatApp.js';
+import ChatApp from '../../../eveai_chat_client/static/assets/vue-components/ChatApp.vue';
 
 // Globale Vue error tracking
 window.addEventListener('error', function(event) {
@@ -44,8 +39,6 @@ window.addEventListener('error', function(event) {
 
 // Wacht tot DOM geladen is
 document.addEventListener('DOMContentLoaded', function() {
-  console.log('🔍 [DEBUG] DOM content loaded, initializing application...');
-
   // Controleer of chatConfig is ingesteld
   if (!window.chatConfig) {
     console.error('chatConfig is niet beschikbaar');
@@ -82,10 +75,7 @@ function fillSidebarExplanation() {
  * Initialiseert de language selector
  */
 function initializeLanguageSelector() {
-  console.log('🔍 [DEBUG] Start initializeLanguageSelector');
-
   const container = document.getElementById('language-selector-container');
-  console.log('🔍 [DEBUG] Container element:', container);
 
   if (!container) {
     console.error('#language-selector-container niet gevonden');
@@ -100,8 +90,6 @@ function initializeLanguageSelector() {
       allowedLanguages: window.chatConfig.allowedLanguages || ['nl', 'en', 'fr', 'de']
     };
 
-    console.log('🔍 [DEBUG] Props voor LanguageSelector:', JSON.stringify(props, null, 2));
-
     // Mount de component direct - BELANGRIJK: we gebruiken window.Vue als dat beschikbaar is
     // Dit is nodig voor compatibiliteit met oude code
     const app = window.Vue && typeof window.Vue.createApp === 'function' 
@@ -117,7 +105,6 @@ function initializeLanguageSelector() {
 
     // Mount de component 
     const mountedApp = app.mount(container);
-    console.log('🔍 [DEBUG] LanguageSelector successfully mounted with Vue template:', mountedApp);
 
     // Language change event listener
     document.addEventListener('vue:language-changed', function(event) {
@@ -138,8 +125,6 @@ function initializeLanguageSelector() {
       // Sla voorkeur op
       localStorage.setItem('preferredLanguage', newLanguage);
     });
-
-    console.log('🔍 [DEBUG] Language selector setup voltooid');
   } catch (error) {
     console.error('🚨 [CRITICAL ERROR] Bij initialiseren language selector:', error);
     console.error('Stack trace:', error.stack);
@@ -150,29 +135,15 @@ function initializeLanguageSelector() {
  * Initialiseert de chat app (Vue component)
  */
 function initializeChatApp() {
-  console.log('🔍 [DEBUG] Start initializeChatApp');
-
   const container = document.querySelector('.chat-container');
-  console.log('🔍 [DEBUG] Chat container element:', container);
-
   if (!container) {
-    console.error('.chat-container niet gevonden');
+    console.error('🚨 [CRITICAL ERROR] .chat-container niet gevonden');
     return;
   }
 
   try {
-    // Controleer of componenten beschikbaar zijn en log debug informatie
-    console.log('🔍 [DEBUG] ChatApp component beschikbaar:', ChatApp);
-    console.log('🔍 [DEBUG] Geïmporteerde componenten:', Object.keys(Components));
-    console.log('🔍 [DEBUG] MessageHistory component:', Components.MessageHistory);
-    console.log('🔍 [DEBUG] ChatInput component:', Components.ChatInput);
-
-    // Geen workarounds voor Popper nodig
-
-    // Components are now using pure Vue templates
-
     if (!ChatApp) {
-      throw new Error('ChatApp component niet gevonden');
+      throw new Error('🚨 [CRITICAL ERROR] ChatApp component niet gevonden');
     }
 
     // Extra verificatie dat alle sub-componenten beschikbaar zijn
@@ -192,16 +163,48 @@ function initializeChatApp() {
       allowedLanguages: window.chatConfig.allowedLanguages || ['nl', 'en', 'fr', 'de']
     };
 
-    console.log('🔍 [DEBUG] Alle componenten registreren voor ChatApp...');
-
-    console.log('🔍 [DEBUG] Props voor ChatApp:', JSON.stringify(props, null, 2));
-
     // Mount de component met alle nodige componenten
     const app = createApp(ChatApp, props);
 
+    // SSE verbinding configuratie - injecteren in ChatApp component
+    app.provide('sseConfig', {
+      maxRetries: 3,
+      retryDelay: 2000,
+      handleSseError: function(error, taskId) {
+        console.warn(`SSE verbinding voor task ${taskId} mislukt:`, error);
+        // Fallback naar polling als SSE faalt
+        return this.fallbackToPolling(taskId);
+      },
+      fallbackToPolling: function(taskId) {
+        console.log(`Fallback naar polling voor task ${taskId}`);
+        // Polling implementatie - elke 3 seconden status checken
+        const pollingInterval = setInterval(() => {
+          const endpoint = `${props.apiPrefix}/api/task_status/${taskId}`;
+          fetch(endpoint)
+            .then(response => {
+              if (!response.ok) throw new Error(`Task status endpoint error: ${response.status}`);
+              return response.json();
+            })
+            .then(data => {
+              // Dispatch event om dezelfde event interface als SSE te behouden
+              const mockEvent = new CustomEvent('message', {
+                detail: { data: JSON.stringify(data) }
+              });
+              document.dispatchEvent(new CustomEvent(`sse:${taskId}:message`, { detail: mockEvent }));
+
+              // Stop polling als taak klaar is
+              if (data.status === 'completed' || data.status === 'failed' || data.status === 'cancelled') {
+                clearInterval(pollingInterval);
+              }
+            })
+            .catch(err => console.error('Polling error:', err));
+        }, 3000);
+        return pollingInterval;
+      }
+    });
+
     // Registreer alle componenten globaal
     Object.entries(Components).forEach(([name, component]) => {
-      console.log(`🔍 [DEBUG] Registreer component globaal: ${name}`);
       app.component(name, component);
     });
 
@@ -212,25 +215,14 @@ function initializeChatApp() {
       console.error('Error Info:', info);
     };
 
-    // Log app object voor debugging
-    console.log('🔍 [DEBUG] ChatApp Vue app object:', app);
-    console.log('🔍 [DEBUG] App.mount functie:', typeof app.mount);
-
     // Mount de component
     const mountedApp = app.mount(container);
-    console.log('🔍 [DEBUG] ChatApp gemount, instance:', mountedApp);
-
     // Bewaar referentie globaal voor debugging
     window.__chatApp = mountedApp;
 
     // Bewaar een referentie naar de Vue instantie voor gebruik door andere componenten
     window.__vueApp = app;
-    console.log('🔍 [DEBUG] Vue app instance globaal beschikbaar als window.__vueApp');
 
-    // Log belangrijke methods van de gemounte component
-    console.log('🔍 [DEBUG] Belangrijke ChatApp methods beschikbaar:', {
-      initializeChat: typeof mountedApp.initializeChat === 'function'
-    });
   } catch (error) {
     console.error('🚨 [CRITICAL ERROR] Bij initialiseren chat app:', error);
     console.error('Stack trace:', error.stack);
@@ -240,4 +232,37 @@ function initializeChatApp() {
   }
 }
 
+/**
+ * Helper functie om Vue 3 element refs te verwerken
+ * Oplossing voor $el.querySelector problemen
+ */
+window.getElementFromRef = function(ref) {
+  if (!ref) return null;
+
+  // Vue 3 refs zijn reactieve objecten met een .value eigenschap
+  if (ref.value && ref.value instanceof HTMLElement) {
+    return ref.value;
+  }
+
+  // Directe HTML element refs
+  if (ref instanceof HTMLElement) {
+    return ref;
+  }
+
+  // Vue 3 component instance (geen $el meer in Vue 3)
+  if (ref.$el && ref.$el instanceof HTMLElement) {
+    return ref.$el;
+  }
+
+  // Voor template refs van Vue 3 mounted componenten
+  if (typeof ref === 'object' && ref !== null) {
+    const element = ref.el || ref.$el || ref.value;
+    if (element instanceof HTMLElement) {
+      return element;
+    }
+  }
+
+  return null;
+}
+
 console.log('Chat client modules geladen en gebundeld met moderne ES module structuur.');