- 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.

test_sidebar_components.js

@@ -0,0 +1,185 @@
+// Test script for SideBar Vue components
+// This can be run in the browser console when the chat client is loaded
+
+console.log('Testing SideBar Vue components...');
+
+// Test if all components are available
+function testComponentAvailability() {
+    console.log('🧪 Testing component availability...');
+    
+    // Check if Vue is available
+    if (!window.Vue || !window.Vue.createApp) {
+        console.error('❌ Vue is not available');
+        return false;
+    }
+    console.log('✅ Vue is available');
+    
+    // Check if chatConfig is available
+    if (!window.chatConfig) {
+        console.error('❌ window.chatConfig is not available');
+        return false;
+    }
+    console.log('✅ window.chatConfig is available');
+    
+    // Check if sidebar container exists
+    const container = document.getElementById('sidebar-container');
+    if (!container) {
+        console.error('❌ #sidebar-container not found in DOM');
+        return false;
+    }
+    console.log('✅ #sidebar-container found in DOM');
+    
+    return true;
+}
+
+// Test sidebar component props
+function testSidebarProps() {
+    console.log('🧪 Testing sidebar props...');
+    
+    const expectedProps = {
+        tenantMake: window.chatConfig.tenantMake || {},
+        explanationText: window.chatConfig.explanation || '',
+        initialLanguage: window.chatConfig.language || 'nl',
+        supportedLanguageDetails: window.chatConfig.supportedLanguageDetails || {},
+        allowedLanguages: window.chatConfig.allowedLanguages || ['nl', 'en', 'fr', 'de'],
+        apiPrefix: window.chatConfig.apiPrefix || ''
+    };
+    
+    console.log('📋 Expected props:', expectedProps);
+    
+    // Validate props
+    if (!expectedProps.tenantMake.name) {
+        console.warn('⚠️ tenantMake.name is empty');
+    }
+    
+    if (!expectedProps.explanationText) {
+        console.warn('⚠️ explanationText is empty');
+    }
+    
+    if (!expectedProps.supportedLanguageDetails || Object.keys(expectedProps.supportedLanguageDetails).length === 0) {
+        console.warn('⚠️ supportedLanguageDetails is empty, using defaults');
+    }
+    
+    console.log('✅ Props validation completed');
+    return expectedProps;
+}
+
+// Test if old sidebar elements are removed
+function testOldSidebarCleanup() {
+    console.log('🧪 Testing old sidebar cleanup...');
+    
+    const oldElements = [
+        'sidebar-explanation',
+        'language-selector-container'
+    ];
+    
+    let foundOldElements = false;
+    oldElements.forEach(id => {
+        const element = document.getElementById(id);
+        if (element) {
+            console.warn(`⚠️ Old element #${id} still exists in DOM`);
+            foundOldElements = true;
+        }
+    });
+    
+    if (!foundOldElements) {
+        console.log('✅ No old sidebar elements found - cleanup successful');
+    }
+    
+    return !foundOldElements;
+}
+
+// Test translation functionality
+async function testTranslationIntegration() {
+    console.log('🧪 Testing translation integration...');
+    
+    try {
+        // Test if translation API is accessible
+        const response = await fetch('/api/translate', {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+                'X-Requested-With': 'XMLHttpRequest'
+            },
+            credentials: 'same-origin',
+            body: JSON.stringify({
+                text: 'Test translation',
+                target_lang: 'nl',
+                context: 'sidebar_test'
+            })
+        });
+        
+        if (response.ok) {
+            const result = await response.json();
+            console.log('✅ Translation API is accessible:', result.success ? 'Success' : 'Failed');
+            return result.success;
+        } else {
+            console.warn('⚠️ Translation API returned error:', response.status);
+            return false;
+        }
+    } catch (error) {
+        console.warn('⚠️ Translation API test failed:', error.message);
+        return false;
+    }
+}
+
+// Run all tests
+async function runAllSidebarTests() {
+    console.log('🚀 Starting SideBar component tests...');
+    
+    console.log('\n1. Testing component availability...');
+    const availabilityTest = testComponentAvailability();
+    
+    console.log('\n2. Testing sidebar props...');
+    const props = testSidebarProps();
+    
+    console.log('\n3. Testing old sidebar cleanup...');
+    const cleanupTest = testOldSidebarCleanup();
+    
+    console.log('\n4. Testing translation integration...');
+    const translationTest = await testTranslationIntegration();
+    
+    console.log('\n📊 Test Results Summary:');
+    console.log(`Component Availability: ${availabilityTest ? '✅' : '❌'}`);
+    console.log(`Props Validation: ✅`);
+    console.log(`Old Sidebar Cleanup: ${cleanupTest ? '✅' : '⚠️'}`);
+    console.log(`Translation Integration: ${translationTest ? '✅' : '⚠️'}`);
+    
+    const allPassed = availabilityTest && cleanupTest && translationTest;
+    console.log(`\n🎯 Overall Status: ${allPassed ? '✅ All tests passed!' : '⚠️ Some tests need attention'}`);
+    
+    return {
+        availability: availabilityTest,
+        cleanup: cleanupTest,
+        translation: translationTest,
+        props: props,
+        overall: allPassed
+    };
+}
+
+// Export for manual testing
+if (typeof window !== 'undefined') {
+    window.testComponentAvailability = testComponentAvailability;
+    window.testSidebarProps = testSidebarProps;
+    window.testOldSidebarCleanup = testOldSidebarCleanup;
+    window.testTranslationIntegration = testTranslationIntegration;
+    window.runAllSidebarTests = runAllSidebarTests;
+    
+    console.log('SideBar test functions available:');
+    console.log('- testComponentAvailability()');
+    console.log('- testSidebarProps()');
+    console.log('- testOldSidebarCleanup()');
+    console.log('- testTranslationIntegration()');
+    console.log('- runAllSidebarTests()');
+}
+
+// Auto-run if in Node.js environment (for CI/CD)
+if (typeof module !== 'undefined' && module.exports) {
+    module.exports = {
+        testComponentAvailability,
+        testSidebarProps,
+        testOldSidebarCleanup,
+        testTranslationIntegration,
+        runAllSidebarTests
+    };
+}