- Eerste stap in het opnieuw laten werken van de chat client...
This commit is contained in:
Josako
@@ -1,8 +1,5 @@
|
||||
// Chat Client JavaScript modules
|
||||
// Importeer alle chat client componenten
|
||||
|
||||
// CSS imports
|
||||
import '../css/chat-client.css';
|
||||
|
||||
import '../../../eveai_chat_client/static/assets/css/chat.css';
|
||||
import '../../../eveai_chat_client/static/assets/css/chat-components.css';
|
||||
import '../../../eveai_chat_client/static/assets/css/chat-input.css';
|
||||
@@ -11,29 +8,295 @@ import '../../../eveai_chat_client/static/assets/css/form.css';
|
||||
import '../../../eveai_chat_client/static/assets/css/form-message.css';
|
||||
import '../../../eveai_chat_client/static/assets/css/language-selector.css';
|
||||
|
||||
import { createApp } from 'vue';
|
||||
window.Vue = { createApp };
|
||||
|
||||
// Dependencies
|
||||
import { createApp, version } from 'vue';
|
||||
import { marked } from 'marked';
|
||||
import { FormField } from '../../../eveai_chat_client/static/assets/js/components/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);
|
||||
|
||||
|
||||
// Main chat application
|
||||
import '../../../eveai_chat_client/static/assets/js/chat-app.js';
|
||||
// Support tools
|
||||
import '../../../eveai_chat_client/static/assets/js/iconManager.js';
|
||||
import '../../../eveai_chat_client/static/assets/js/translation.js';
|
||||
|
||||
// Chat components
|
||||
import '../../../eveai_chat_client/static/assets/js/components/ChatInput.js';
|
||||
import '../../../eveai_chat_client/static/assets/js/components/ChatMessage.js';
|
||||
import '../../../eveai_chat_client/static/assets/js/components/DynamicForm.js';
|
||||
import '../../../eveai_chat_client/static/assets/js/components/FormField.js';
|
||||
import '../../../eveai_chat_client/static/assets/js/components/FormMessage.js';
|
||||
import '../../../eveai_chat_client/static/assets/js/components/LanguageSelector.js';
|
||||
import '../../../eveai_chat_client/static/assets/js/components/MaterialIconManager.js';
|
||||
import '../../../eveai_chat_client/static/assets/js/components/MessageHistory.js';
|
||||
import '../../../eveai_chat_client/static/assets/js/components/ProgressTracker.js';
|
||||
import '../../../eveai_chat_client/static/assets/js/components/TypingIndicator.js';
|
||||
// Gebruik barrel export voor componenten
|
||||
import * as Components from '../../../eveai_chat_client/static/assets/js/components/index.js';
|
||||
|
||||
console.log('Chat client modules geladen en gebundeld.');
|
||||
// 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 { ChatApp } from '../../../eveai_chat_client/static/assets/js/ChatApp.js';
|
||||
|
||||
// Globale Vue error tracking
|
||||
window.addEventListener('error', function(event) {
|
||||
console.error('🚨 [Global Error]', event.error);
|
||||
});
|
||||
|
||||
// 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');
|
||||
window.chatConfig = {};
|
||||
}
|
||||
|
||||
// Vul de sidebar explanation in
|
||||
fillSidebarExplanation();
|
||||
|
||||
// Initialiseer language selector
|
||||
initializeLanguageSelector();
|
||||
|
||||
// Initialiseer chat app (simpel)
|
||||
initializeChatApp();
|
||||
});
|
||||
|
||||
/**
|
||||
* Vul de sidebar explanation in
|
||||
*/
|
||||
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() {
|
||||
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');
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
// Maak props voor de component
|
||||
const props = {
|
||||
initialLanguage: window.chatConfig.language || 'nl',
|
||||
supportedLanguageDetails: window.chatConfig.supportedLanguageDetails || {},
|
||||
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'
|
||||
? window.Vue.createApp(LanguageSelector, props)
|
||||
: createApp(LanguageSelector, props);
|
||||
|
||||
// Registreer error handler
|
||||
app.config.errorHandler = (err, vm, info) => {
|
||||
console.error('🚨 [Vue Error]', err);
|
||||
console.error('Component:', vm);
|
||||
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);
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 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('🔍 [DEBUG] Language selector setup voltooid');
|
||||
} catch (error) {
|
||||
console.error('🚨 [CRITICAL ERROR] Bij initialiseren language selector:', error);
|
||||
console.error('Stack trace:', error.stack);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 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');
|
||||
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
|
||||
|
||||
// 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');
|
||||
|
||||
if (!ChatApp) {
|
||||
throw new Error('ChatApp component niet gevonden');
|
||||
}
|
||||
|
||||
// Extra verificatie dat alle sub-componenten beschikbaar zijn
|
||||
if (!Components.MessageHistory || !Components.ChatInput ||
|
||||
!Components.TypingIndicator || !Components.ChatMessage) {
|
||||
console.warn('⚠️ [WARN] Niet alle benodigde sub-componenten zijn geladen!');
|
||||
}
|
||||
|
||||
// Maak props voor de component
|
||||
const props = {
|
||||
apiPrefix: window.chatConfig.apiPrefix || '',
|
||||
conversationId: window.chatConfig.conversationId || 'default',
|
||||
userId: window.chatConfig.userId || null,
|
||||
userName: window.chatConfig.userName || '',
|
||||
initialLanguage: window.chatConfig.language || 'nl',
|
||||
supportedLanguageDetails: window.chatConfig.supportedLanguageDetails || {},
|
||||
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);
|
||||
|
||||
// Registreer alle componenten globaal
|
||||
Object.entries(Components).forEach(([name, component]) => {
|
||||
console.log(`🔍 [DEBUG] Registreer component globaal: ${name}`);
|
||||
app.component(name, component);
|
||||
});
|
||||
|
||||
// Registreer error handler
|
||||
app.config.errorHandler = (err, vm, info) => {
|
||||
console.error('🚨 [Vue Error in ChatApp]', err);
|
||||
console.error('Component:', vm);
|
||||
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:', {
|
||||
renderComponent: typeof mountedApp.renderComponent === 'function',
|
||||
initializeChat: typeof mountedApp.initializeChat === 'function'
|
||||
});
|
||||
} catch (error) {
|
||||
console.error('🚨 [CRITICAL ERROR] Bij initialiseren chat app:', error);
|
||||
console.error('Stack trace:', error.stack);
|
||||
|
||||
// Fallback naar placeholder
|
||||
container.innerHTML = '<div>Fout bij het initialiseren van de chat applicatie</div>';
|
||||
}
|
||||
}
|
||||
|
||||
console.log('Chat client modules geladen en gebundeld met moderne ES module structuur.');
|
||||
Reference in New Issue
Block a user