98 lines
4.3 KiB
JavaScript
98 lines
4.3 KiB
JavaScript
// Chat Client JavaScript modules
|
|
// Modern gebundelde versie met ES modules
|
|
|
|
// CSS imports - zorg dat deze bestanden bestaan en correct worden gebundeld door Parcel
|
|
import '../css/chat-client.css';
|
|
// CSS imports uit eveai_chat_client
|
|
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';
|
|
import '../../../eveai_chat_client/static/assets/css/chat-message.css';
|
|
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';
|
|
|
|
// Dependencies
|
|
import { createApp } from 'vue';
|
|
import { marked } from 'marked';
|
|
|
|
// Maak fundamentele libraries globaal beschikbaar
|
|
window.Vue = { createApp };
|
|
window.marked = marked;
|
|
|
|
// Gebruik barrel export voor componenten
|
|
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));
|
|
|
|
// Main chat application - moet als laatste worden geladen
|
|
import ChatApp from '../../../eveai_chat_client/static/assets/vue-components/ChatApp.vue';
|
|
|
|
// Wacht tot het document volledig is geladen voordat we Vue initialiseren
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
console.log('Initializing Chat Application');
|
|
|
|
try {
|
|
// Mount SideBar component to sidebar-container
|
|
const sidebarContainer = document.getElementById('sidebar-container');
|
|
if (sidebarContainer && Components.SideBar) {
|
|
const sidebarApp = createApp(Components.SideBar, {
|
|
tenantMake: window.chatConfig?.tenantMake || { name: 'EveAI', logo_url: '' },
|
|
explanationText: window.chatConfig?.explanationText || '',
|
|
initialLanguage: window.chatConfig?.language || 'en',
|
|
supportedLanguageDetails: window.chatConfig?.supportedLanguageDetails || {},
|
|
allowedLanguages: window.chatConfig?.allowedLanguages || ['nl', 'en', 'fr', 'de'],
|
|
apiPrefix: window.chatConfig?.apiPrefix || ''
|
|
});
|
|
|
|
// Registreer componenten voor sidebar app
|
|
for (const [name, component] of Object.entries(Components)) {
|
|
sidebarApp.component(name, component);
|
|
}
|
|
|
|
sidebarApp.mount('#sidebar-container');
|
|
console.log('SideBar mounted successfully');
|
|
}
|
|
|
|
// Mount MobileHeader component to mobile-header-container
|
|
const mobileHeaderContainer = document.getElementById('mobile-header-container');
|
|
if (mobileHeaderContainer && Components.MobileHeader) {
|
|
const mobileHeaderApp = createApp(Components.MobileHeader, {
|
|
tenantMake: window.chatConfig?.tenantMake || { name: 'EveAI', logo_url: '' },
|
|
initialLanguage: window.chatConfig?.language || 'en',
|
|
supportedLanguageDetails: window.chatConfig?.supportedLanguageDetails || {},
|
|
allowedLanguages: window.chatConfig?.allowedLanguages || ['nl', 'en', 'fr', 'de'],
|
|
apiPrefix: window.chatConfig?.apiPrefix || ''
|
|
});
|
|
|
|
// Registreer componenten voor mobile header app
|
|
for (const [name, component] of Object.entries(Components)) {
|
|
mobileHeaderApp.component(name, component);
|
|
}
|
|
|
|
mobileHeaderApp.mount('#mobile-header-container');
|
|
console.log('MobileHeader mounted successfully');
|
|
}
|
|
|
|
// Mount ChatApp to the chat container
|
|
const chatContainer = document.querySelector('.chat-container');
|
|
if (chatContainer) {
|
|
const chatApp = createApp(ChatApp);
|
|
|
|
// Registreer alle componenten globaal voor chat app
|
|
for (const [name, component] of Object.entries(Components)) {
|
|
chatApp.component(name, component);
|
|
}
|
|
|
|
chatApp.mount('.chat-container');
|
|
console.log('ChatApp mounted successfully');
|
|
}
|
|
|
|
console.log('All Vue apps mounted successfully');
|
|
} catch (error) {
|
|
console.error('Error initializing Vue applications:', error);
|
|
}
|
|
});
|