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

eveai_chat_client/static/assets/vue-components/ChatRoot.vue

@@ -1,13 +1,50 @@
 <template>
+  <!--
+    ChatRoot
+    --------
+    Root-component voor de chatclient. Deze component zorgt ervoor dat er
+    altijd precies één SafeViewport-wrapper is rond de gekozen Shell
+    (DesktopChatShell, MobileChatShell, ...).
+
+    De daadwerkelijke shell-component en zijn props worden vanuit
+    chat-client.js doorgegeven via de props shellComponent en shellProps.
+  -->
   <SafeViewport>
-    <ChatApp />
+    <component :is="shellComponent" v-bind="shellProps" />
   </SafeViewport>
 </template>
 
 <script setup>
-// ChatRoot.vue
-// Kleine root-component die de ChatApp binnen de SafeViewport wrapper rendert.
-
-import ChatApp from './ChatApp.vue';
+import { computed } from 'vue';
 import SafeViewport from './SafeViewport.vue';
+import DesktopChatShell from './DesktopChatShell.vue';
+import MobileChatShell from './MobileChatShell.vue';
+
+const props = defineProps({
+  shellComponent: {
+    type: [Object, Function, String],
+    default: null
+  },
+  shellProps: {
+    type: Object,
+    default: () => ({})
+  }
+});
+
+// Fallbacks voor het geval chat-client.js geen shellComponent meegeeft.
+const resolvedShellComponent = computed(() => {
+  if (props.shellComponent) {
+    return props.shellComponent;
+  }
+
+  // Eenvoudige fallback: gebruik DesktopShell op brede schermen,
+  // MobileShell op smalle schermen.
+  if (typeof window !== 'undefined' && window.innerWidth <= 768) {
+    return MobileChatShell;
+  }
+  return DesktopChatShell;
+});
+
+const shellComponent = resolvedShellComponent;
+const shellProps = props.shellProps;
 </script>