- Wrap client in @vueuse/core to abstract mobile client dimensions

nginx/frontend_src/js/chat-client.js

@@ -10,7 +10,6 @@ import '../../../eveai_chat_client/static/assets/css/form-message.css';
 // Dependencies
 import { createApp, version } from 'vue';
 import { marked } from 'marked';
-import { FormField } from '../../../../../../../../../Users/josako/Library/Application Support/JetBrains/PyCharm2025.1/scratches/old js files/FormField.js';
 
 // Import LanguageProvider for sidebar translation support
 import { createLanguageProvider, LANGUAGE_PROVIDER_KEY } from '../../../eveai_chat_client/static/assets/js/services/LanguageProvider.js';
@@ -29,9 +28,13 @@ 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 ChatRoot from '../../../eveai_chat_client/static/assets/vue-components/ChatRoot.vue';
 import SideBar from '../../../eveai_chat_client/static/assets/vue-components/SideBar.vue';
 import MobileHeader from '../../../eveai_chat_client/static/assets/vue-components/MobileHeader.vue';
 
+// VueUse-setup voor de chatclient (maakt composables beschikbaar via window.VueUse)
+import './vueuse-setup.js';
+
 // Globale Vue error tracking
 window.addEventListener('error', function(event) {
   console.error('🚨 [Global Error]', event.error);
@@ -230,8 +233,8 @@ function initializeChatApp() {
       allowedLanguages: window.chatConfig.allowedLanguages || ['nl', 'en', 'fr', 'de']
     };
 
-    // Mount de component met alle nodige componenten
-    const app = createApp(ChatApp, props);
+    // Mount de component via ChatRoot zodat SafeViewport de layout kan beheren
+    const app = createApp(ChatRoot, props);
 
     // SSE verbinding configuratie - injecteren in ChatApp component
     app.provide('sseConfig', {

nginx/frontend_src/js/vueuse-setup.js

@@ -0,0 +1,15 @@
+// vueuse-setup.js
+// Setup-module voor VueUse in de chat client.
+// - Importeert benodigde composables uit '@vueuse/core'
+// - Maakt ze beschikbaar via window.VueUse zodat static assets
+//   onder eveai_chat_client/static ze kunnen gebruiken zonder
+//   directe npm-imports.
+
+import { useEventListener, useWindowSize } from '@vueuse/core';
+
+if (typeof window !== 'undefined') {
+  window.VueUse = Object.assign({}, window.VueUse, {
+    useEventListener,
+    useWindowSize,
+  });
+}