pieter/eveAI
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

- introductie van vue files - bijna werkende versie van eveai_chat_client.

Browse Source
This commit is contained in:
Josako
2025-07-18 20:32:55 +02:00
parent 11b1d548bd
commit b60600e9f6
77 changed files with 47785 additions and 970 deletions
Download Patch File Download Diff File Expand all files Collapse all files

71
nginx/frontend_src/js/chat-client.js
View File

@@ -27,14 +27,14 @@ 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/js/components/index.js';
import * as Components from '../../../eveai_chat_client/static/assets/vue-components/index.js';
// Maak Components globaal beschikbaar voor debugging
window.Components = Components;
console.log('Components loaded:', Object.keys(Components));
// Import specifieke componenten
import { LanguageSelector } from '../../../eveai_chat_client/static/assets/js/components/LanguageSelector.js';
import LanguageSelector from '../../../eveai_chat_client/static/assets/vue-components/LanguageSelector.vue';
import { ChatApp } from '../../../eveai_chat_client/static/assets/js/ChatApp.js';
// Globale Vue error tracking
@@ -115,63 +115,9 @@ function initializeLanguageSelector() {
console.error('Error Info:', info);
};
try {
// Mount de component
const mountedApp = app.mount(container);
console.log('🔍 [DEBUG] LanguageSelector instantie gemount:', mountedApp);
} catch (mountError) {
console.error('🚨 [ERROR] Fout bij mounten van LanguageSelector met Vue:', mountError);
console.log('🔍 [DEBUG] Probeer alternatieve direct DOM rendering...');
// Probeer de legacy renderComponent methode als Vue mounting mislukt
if (typeof LanguageSelector.renderComponent === 'function') {
console.log('🔍 [DEBUG] LanguageSelector.renderComponent gevonden, directe rendering uitvoeren');
try {
LanguageSelector.renderComponent(container, props);
console.log('🔍 [DEBUG] LanguageSelector direct gerenderd via renderComponent');
} catch (renderError) {
console.error('🚨 [ERROR] Ook alternatieve rendering gefaald:', renderError);
}
} else {
console.error('🚨 [ERROR] Geen renderComponent methode beschikbaar op LanguageSelector');
// Noodoplossing: Handmatige DOM manipulatie
container.innerHTML = `
<div class="language-selector">
<label for="language-select">Taal / Language:</label>
<div class="select-wrapper">
<select id="language-select" class="language-select">
<option value="nl" selected>🇳🇱 Nederlands</option>
<option value="en">🇬🇧 English</option>
</select>
</div>
</div>
`;
// Event listener voor de fallback oplossing
const selectElement = container.querySelector('#language-select');
if (selectElement) {
selectElement.addEventListener('change', (e) => {
const newLanguage = e.target.value;
console.log(`Taal gewijzigd naar ${newLanguage} (via fallback)`);
// 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);
});
}
}
}
// 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) {
@@ -223,11 +169,7 @@ function initializeChatApp() {
// Geen workarounds voor Popper nodig
// Controleer of renderComponent methoden beschikbaar zijn
console.log('🔍 [DEBUG] MessageHistory.renderComponent beschikbaar:',
typeof Components.MessageHistory.renderComponent === 'function');
console.log('🔍 [DEBUG] ChatInput.renderComponent beschikbaar:',
typeof Components.ChatInput.renderComponent === 'function');
// Components are now using pure Vue templates
if (!ChatApp) {
throw new Error('ChatApp component niet gevonden');
@@ -287,7 +229,6 @@ function initializeChatApp() {
// Log belangrijke methods van de gemounte component
console.log('🔍 [DEBUG] Belangrijke ChatApp methods beschikbaar:', {
renderComponent: typeof mountedApp.renderComponent === 'function',
initializeChat: typeof mountedApp.initializeChat === 'function'
});
} catch (error) {