- 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,
+  });
+}

nginx/package-lock.json

@@ -6,12 +6,13 @@
     "": {
       "dependencies": {
         "@popperjs/core": "^2.11.8",
+        "@vueuse/core": "^14.0.0",
         "animejs": "^4.0.2",
         "bootstrap": "^5.3.6",
         "datatables.net": "^2.3.1",
         "highlight.js": "^11.11.1",
         "jquery": "^3.7.1",
-        "marked": "^16.0.0",
+        "marked": "16.3.0",
         "nouislider": "^15.8.1",
         "parallax": "^0.0.0",
         "prismjs": "^1.30.0",
@@ -22,7 +23,6 @@
         "vue": "^3.5.17"
       },
       "devDependencies": {
-        "@parcel/reporter-bundle-analyzer": "^2.15.2",
         "@parcel/transformer-sass": "^2.15.2",
         "@parcel/transformer-vue": "^2.15.2",
         "parcel": "^2.15.2"
@@ -1360,26 +1360,6 @@
         "url": "https://opencollective.com/parcel"
       }
     },
-    "node_modules/@parcel/reporter-bundle-analyzer": {
-      "version": "2.16.0",
-      "resolved": "https://registry.npmjs.org/@parcel/reporter-bundle-analyzer/-/reporter-bundle-analyzer-2.16.0.tgz",
-      "integrity": "sha512-81EazkM7YjeFvzRRlKKV8kmLfLXfWlfLqlpC8jFRXthC43aZtdqMnzRgi9Q+6FIB7Ft3vnMXZPqRs4cn7+XgUg==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@parcel/plugin": "2.16.0",
-        "@parcel/utils": "2.16.0",
-        "nullthrows": "^1.1.1"
-      },
-      "engines": {
-        "node": ">= 16.0.0",
-        "parcel": "^2.16.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/parcel"
-      }
-    },
     "node_modules/@parcel/reporter-cli": {
       "version": "2.16.0",
       "resolved": "https://registry.npmjs.org/@parcel/reporter-cli/-/reporter-cli-2.16.0.tgz",
@@ -2722,6 +2702,12 @@
       "integrity": "sha512-dWHzHa2WqEXI/O1E9OjrocMTKJl2mSrEolh1Iomrv6U+JuNwaHXsXx9bLu5gG7BUWFIN0skIQJQ/L1rIex4X6w==",
       "license": "MIT"
     },
+    "node_modules/@types/web-bluetooth": {
+      "version": "0.0.21",
+      "resolved": "https://registry.npmjs.org/@types/web-bluetooth/-/web-bluetooth-0.0.21.tgz",
+      "integrity": "sha512-oIQLCGWtcFZy2JW77j9k8nHzAOpqMHLQejDA48XXMWH6tjCQHz5RCFz1bzsmROyL6PUm+LLnUiI4BCn221inxA==",
+      "license": "MIT"
+    },
     "node_modules/@vue/compiler-core": {
       "version": "3.5.21",
       "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.5.21.tgz",
@@ -2822,6 +2808,44 @@
       "integrity": "sha512-+2k1EQpnYuVuu3N7atWyG3/xoFWIVJZq4Mz8XNOdScFI0etES75fbny/oU4lKWk/577P1zmg0ioYvpGEDZ3DLw==",
       "license": "MIT"
     },
+    "node_modules/@vueuse/core": {
+      "version": "14.0.0",
+      "resolved": "https://registry.npmjs.org/@vueuse/core/-/core-14.0.0.tgz",
+      "integrity": "sha512-d6tKRWkZE8IQElX2aHBxXOMD478fHIYV+Dzm2y9Ag122ICBpNKtGICiXKOhWU3L1kKdttDD9dCMS4bGP3jhCTQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/web-bluetooth": "^0.0.21",
+        "@vueuse/metadata": "14.0.0",
+        "@vueuse/shared": "14.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "vue": "^3.5.0"
+      }
+    },
+    "node_modules/@vueuse/metadata": {
+      "version": "14.0.0",
+      "resolved": "https://registry.npmjs.org/@vueuse/metadata/-/metadata-14.0.0.tgz",
+      "integrity": "sha512-6yoGqbJcMldVCevkFiHDBTB1V5Hq+G/haPlGIuaFZHpXC0HADB0EN1ryQAAceiW+ryS3niUwvdFbGiqHqBrfVA==",
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
+    "node_modules/@vueuse/shared": {
+      "version": "14.0.0",
+      "resolved": "https://registry.npmjs.org/@vueuse/shared/-/shared-14.0.0.tgz",
+      "integrity": "sha512-mTCA0uczBgurRlwVaQHfG0Ja7UdGe4g9mwffiJmvLiTtp1G4AQyIjej6si/k8c8pUwTfVpNufck+23gXptPAkw==",
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "vue": "^3.5.0"
+      }
+    },
     "node_modules/acorn": {
       "version": "8.15.0",
       "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.15.0.tgz",

nginx/package.json

@@ -14,7 +14,8 @@
     "tabulator-tables": "^6.3.1",
     "typed.js": "^2.1.0",
     "vanilla-jsoneditor": "^3.5.0",
-    "vue": "^3.5.17"
+    "vue": "^3.5.17",
+    "@vueuse/core": "^14.0.0"
   },
   "devDependencies": {
     "@parcel/transformer-sass": "^2.15.2",