- Mobile client changes.

nginx/frontend_src/js/chat-client.js

@@ -30,6 +30,7 @@ console.log('Components loaded:', Object.keys(Components));
 import LanguageSelector from '../../../eveai_chat_client/static/assets/vue-components/LanguageSelector.vue';
 import ChatApp from '../../../eveai_chat_client/static/assets/vue-components/ChatApp.vue';
 import SideBar from '../../../eveai_chat_client/static/assets/vue-components/SideBar.vue';
+import MobileHeader from '../../../eveai_chat_client/static/assets/vue-components/MobileHeader.vue';
 
 // Globale Vue error tracking
 window.addEventListener('error', function(event) {
@@ -47,6 +48,9 @@ document.addEventListener('DOMContentLoaded', function() {
   // Initialiseer sidebar (vervangt fillSidebarExplanation en initializeLanguageSelector)
   initializeSidebar();
 
+  // Initialiseer mobile header
+  initializeMobileHeader();
+
   // Initialiseer chat app (simpel)
   initializeChatApp();
 });
@@ -114,6 +118,68 @@ function initializeSidebar() {
   }
 }
 
+/**
+ * Initialiseert de mobile header component
+ */
+function initializeMobileHeader() {
+  const container = document.getElementById('mobile-header-container');
+  
+  if (!container) {
+    console.error('#mobile-header-container niet gevonden');
+    return;
+  }
+
+  try {
+    // Maak props voor de component
+    const props = {
+      tenantMake: {
+        name: window.chatConfig.tenantMake?.name || '',
+        logo_url: window.chatConfig.tenantMake?.logo_url || '',
+        subtitle: window.chatConfig.tenantMake?.subtitle || ''
+      },
+      initialLanguage: window.chatConfig.language || 'nl',
+      supportedLanguageDetails: window.chatConfig.supportedLanguageDetails || {},
+      allowedLanguages: window.chatConfig.allowedLanguages || ['nl', 'en', 'fr', 'de'],
+      apiPrefix: window.chatConfig.apiPrefix || ''
+    };
+
+    // Mount de component
+    const app = createApp(MobileHeader, props);
+    
+    // Create and provide LanguageProvider for mobile header components
+    const initialLanguage = window.chatConfig?.language || 'nl';
+    const apiPrefix = window.chatConfig?.apiPrefix || '';
+    const languageProvider = createLanguageProvider(initialLanguage, apiPrefix);
+    app.provide(LANGUAGE_PROVIDER_KEY, languageProvider);
+    
+    // Error handler
+    app.config.errorHandler = (err, vm, info) => {
+      console.error('🚨 [Vue Error in MobileHeader]', err);
+      console.error('Component:', vm);
+      console.error('Error Info:', info);
+    };
+
+    const mountedApp = app.mount(container);
+    
+    // Listen to language change events and update the mobile header's language provider
+    const languageChangeHandler = (event) => {
+      if (event.detail && event.detail.language) {
+        console.log('MobileHeader: Received language change event:', event.detail.language);
+        languageProvider.setLanguage(event.detail.language);
+      }
+    };
+    document.addEventListener('language-changed', languageChangeHandler);
+    
+    // Store the handler for cleanup if needed
+    mountedApp._languageChangeHandler = languageChangeHandler;
+    
+    console.log('✅ MobileHeader component successfully mounted with LanguageProvider');
+    return mountedApp;
+  } catch (error) {
+    console.error('🚨 [CRITICAL ERROR] Bij initialiseren mobile header:', error);
+  }
+}
+
 /**
  * Initialiseert de chat app (Vue component)
  */