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

- Introduction of Shells for Mobile client and Desktop client. Extensible with additional shells in the future

Browse Source
This commit is contained in:
Josako
2025-12-01 14:07:16 +01:00
parent 5a5d6b03af
commit 9b86a220b1
8 changed files with 1049 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -27,8 +27,10 @@ console.log('Components loaded:', Object.keys(Components));
// Import specifieke componenten
import LanguageSelector from '../../../eveai_chat_client/static/assets/vue-components/LanguageSelector.vue';
import ChatApp from '../../../eveai_chat_client/static/assets/vue-components/ChatApp.vue';
// import ChatApp from '../../../eveai_chat_client/static/assets/vue-components/ChatApp.vue';
import ChatRoot from '../../../eveai_chat_client/static/assets/vue-components/ChatRoot.vue';
import DesktopChatShell from '../../../eveai_chat_client/static/assets/vue-components/DesktopChatShell.vue';
import MobileChatShell from '../../../eveai_chat_client/static/assets/vue-components/MobileChatShell.vue';
import SideBar from '../../../eveai_chat_client/static/assets/vue-components/SideBar.vue';
// VueUse-setup voor de chatclient (maakt composables beschikbaar via window.VueUse)
@@ -131,27 +133,43 @@ function initializeChatApp() {
}
try {
if (!ChatApp) {
throw new Error('🚨 [CRITICAL 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 = {
// Maak props voor de shells / CoreChatApp
const baseProps = {
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']
allowedLanguages: window.chatConfig.allowedLanguages || ['nl', 'en', 'fr', 'de'],
tenantName: (window.chatConfig.tenantMake && window.chatConfig.tenantMake.name) || 'EveAI',
tenantSubtitle: (window.chatConfig.tenantMake && window.chatConfig.tenantMake.subtitle) || '',
tenantLogoUrl: (window.chatConfig.tenantMake && window.chatConfig.tenantMake.logo_url) || '',
explanationText: window.chatConfig.explanation || '',
settings: window.chatConfig.settings || {}
};
// Bepaal shell-type: expliciete config heeft voorrang, anders breakpoint
const layoutMode = window.chatConfig.layoutMode || 'auto';
const isMobileBreakpoint = window.innerWidth <= 768;
let ShellComponent;
if (layoutMode === 'desktop') {
ShellComponent = DesktopChatShell;
} else if (layoutMode === 'mobile') {
ShellComponent = MobileChatShell;
} else {
ShellComponent = isMobileBreakpoint ? MobileChatShell : DesktopChatShell;
}
const props = { shellComponent: ShellComponent, shellProps: baseProps };
// Mount de component via ChatRoot zodat SafeViewport de layout kan beheren
const app = createApp(ChatRoot, props);