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

- Start met Mobiele versie van de chat client.

Browse Source
This commit is contained in:
Josako
2025-08-02 17:27:20 +02:00
parent 9a88582fff
commit 4d6466038f
11 changed files with 827 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

79
frontend_src/js/chat-client.js
View File

@@ -21,48 +21,77 @@ window.Vue = { createApp };
window.marked = marked;
// 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));
// Main chat application - moet als laatste worden geladen
import { ChatApp } from '../../../eveai_chat_client/static/assets/js/ChatApp.js';
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');
// Check of #app element bestaat
const appElement = document.getElementById('app');
if (!appElement) {
console.error('DOM element #app not found. Cannot initialize Vue application.');
return;
}
console.log('DOM element #app exists:', appElement);
try {
// Maak de Vue applicatie aan
const app = createApp(ChatApp);
// Registreer alle componenten globaal
for (const [name, component] of Object.entries(Components)) {
app.component(name, component);
// 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');
}
// Voeg de IconManagerMixin toe voor alle componenten
app.mixin(IconManagerMixin);
// 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 de applicatie op #app
const mountedApp = app.mount('#app');
// 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);
}
// Bewaar een referentie naar de app voor debugging
window.__vueApp = app;
chatApp.mount('.chat-container');
console.log('ChatApp mounted successfully');
}
console.log('Vue app mounted successfully');
console.log('All Vue apps mounted successfully');
} catch (error) {
console.error('Error initializing Vue application:', error);
console.error('Error initializing Vue applications:', error);
}
});