- iconManager MaterialIconManager.js zijn nu 'unified' in 1 component, en samen met translation utilities omgezet naar een meer moderne Vue composable

- De sidebar is nu eveneens omgezet naar een Vue component.

nginx/frontend_src/js/chat-client.js

@@ -17,10 +17,6 @@ import { FormField } from '../../../../../../../../../Users/josako/Library/Appli
 window.Vue = { createApp, version };
 window.marked = marked;
 
-// Support tools
-import '../../../eveai_chat_client/static/assets/js/iconManager.js';
-import '../../../eveai_chat_client/static/assets/js/translation.js';
-
 // Gebruik barrel export voor componenten
 import * as Components from '../../../eveai_chat_client/static/assets/vue-components/index.js';
 
@@ -31,6 +27,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/vue-components/ChatApp.vue';
+import SideBar from '../../../eveai_chat_client/static/assets/vue-components/SideBar.vue';
 
 // Globale Vue error tracking
 window.addEventListener('error', function(event) {
@@ -45,89 +42,55 @@ document.addEventListener('DOMContentLoaded', function() {
     window.chatConfig = {};
   }
 
-  // Vul de sidebar explanation in
-  fillSidebarExplanation();
-
-  // Initialiseer language selector
-  initializeLanguageSelector();
+  // Initialiseer sidebar (vervangt fillSidebarExplanation en initializeLanguageSelector)
+  initializeSidebar();
 
   // Initialiseer chat app (simpel)
   initializeChatApp();
 });
 
 /**
- * Vul de sidebar explanation in
+ * Initialiseert de sidebar component
  */
-function fillSidebarExplanation() {
-  const sidebarElement = document.getElementById('sidebar-explanation');
-  if (sidebarElement && window.chatConfig.explanation) {
-    if (typeof window.marked === 'function') {
-      sidebarElement.innerHTML = window.marked(window.chatConfig.explanation);
-    } else if (window.marked && typeof window.marked.parse === 'function') {
-      sidebarElement.innerHTML = window.marked.parse(window.chatConfig.explanation.replace(/\[\[(.*?)\]\]/g, '<strong>$1</strong>'));
-    } else {
-      sidebarElement.innerHTML = window.chatConfig.explanation;
-    }
-  }
-}
-
-/**
- * Initialiseert de language selector
- */
-function initializeLanguageSelector() {
-  const container = document.getElementById('language-selector-container');
-
+function initializeSidebar() {
+  const container = document.getElementById('sidebar-container');
+  
   if (!container) {
-    console.error('#language-selector-container niet gevonden');
+    console.error('#sidebar-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 || ''
+      },
+      explanationText: window.chatConfig.explanation || '',
       initialLanguage: window.chatConfig.language || 'nl',
       supportedLanguageDetails: window.chatConfig.supportedLanguageDetails || {},
-      allowedLanguages: window.chatConfig.allowedLanguages || ['nl', 'en', 'fr', 'de']
+      allowedLanguages: window.chatConfig.allowedLanguages || ['nl', 'en', 'fr', 'de'],
+      apiPrefix: window.chatConfig.apiPrefix || ''
     };
 
-    // 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' 
-        ? window.Vue.createApp(LanguageSelector, props)
-        : createApp(LanguageSelector, props);
-
-    // Registreer error handler
+    // Mount de component
+    const app = createApp(SideBar, props);
+    
+    // Error handler
     app.config.errorHandler = (err, vm, info) => {
-      console.error('🚨 [Vue Error]', err);
+      console.error('🚨 [Vue Error in Sidebar]', err);
       console.error('Component:', vm);
       console.error('Error Info:', info);
     };
 
-    // Mount de component 
     const mountedApp = app.mount(container);
-
-    // Language change event listener
-    document.addEventListener('vue:language-changed', function(event) {
-      const newLanguage = event.detail.language;
-      console.log(`Taal gewijzigd naar ${newLanguage}`);
-
-      // Update chatConfig
-      if (window.chatConfig) {
-        window.chatConfig.language = newLanguage;
-      }
-
-      // Stuur event voor andere componenten
-      const globalEvent = new CustomEvent('language-changed', {
-        detail: { language: newLanguage }
-      });
-      document.dispatchEvent(globalEvent);
-
-      // Sla voorkeur op
-      localStorage.setItem('preferredLanguage', newLanguage);
-    });
+    
+    console.log('✅ Sidebar component successfully mounted');
+    return mountedApp;
   } catch (error) {
-    console.error('🚨 [CRITICAL ERROR] Bij initialiseren language selector:', error);
-    console.error('Stack trace:', error.stack);
+    console.error('🚨 [CRITICAL ERROR] Bij initialiseren sidebar:', error);
   }
 }