From 14273b8a7061b9ebb84615363e7153e36637ec8a Mon Sep 17 00:00:00 2001
From: Josako <pieter.laroy@flow-it.net>
Date: Thu, 27 Nov 2025 11:32:46 +0100
Subject: [PATCH 1/2] - Full implementation of tab bar next to logo in mobile
 client - Customisation option in Tenant Make - Splitting all controls in the
 newly created tabs

---
 common/utils/chat_utils.py                    |   5 +-
 .../CHAT_CLIENT_CUSTOMISATION/1.0.0.yaml      |  15 +
 config/static-manifest/manifest.json          |   4 +-
 .../static/assets/vue-components/ChatApp.vue  | 281 +++++++++++++++---
 .../assets/vue-components/ChatInput.vue       |   1 +
 .../assets/vue-components/ChatMessage.vue     |  31 +-
 .../assets/vue-components/MobileHeader.vue    |  71 +----
 .../assets/vue-components/MobileTabBar.vue    | 113 +++++++
 .../vue-components/SideBarMobileSetup.vue     | 118 ++++++++
 eveai_chat_client/templates/base.html         |   5 +
 nginx/frontend_src/js/chat-client.js          |  85 +-----
 11 files changed, 524 insertions(+), 205 deletions(-)
 create mode 100644 eveai_chat_client/static/assets/vue-components/MobileTabBar.vue
 create mode 100644 eveai_chat_client/static/assets/vue-components/SideBarMobileSetup.vue

diff --git a/common/utils/chat_utils.py b/common/utils/chat_utils.py
index 2199445..f2a5354 100644
--- a/common/utils/chat_utils.py
+++ b/common/utils/chat_utils.py
@@ -36,7 +36,10 @@ def get_default_chat_customisation(tenant_customisation=None):
         'ai_message_text_color': '#212529',
         'human_message_background': '#212529',
         'human_message_text_color': '#ffffff',
-        'human_message_inactive_text_color': '#808080'
+        'human_message_inactive_text_color': '#808080',
+        'tab_background': '#0a0a0a',
+        'tab_icon_active_color': '#ffffff',
+        'tab_icon_inactive_color': '#f0f0f0',
     }
 
     # If no tenant customization is provided, return the defaults
diff --git a/config/customisations/globals/CHAT_CLIENT_CUSTOMISATION/1.0.0.yaml b/config/customisations/globals/CHAT_CLIENT_CUSTOMISATION/1.0.0.yaml
index 7723c07..701c668 100644
--- a/config/customisations/globals/CHAT_CLIENT_CUSTOMISATION/1.0.0.yaml
+++ b/config/customisations/globals/CHAT_CLIENT_CUSTOMISATION/1.0.0.yaml
@@ -87,6 +87,21 @@ configuration:
     description: "Human Message Inactive Text Color"
     type: "color"
     required: false
+  tab_background:
+    name: "Tab Background Color"
+    description: "Tab Background Color"
+    type: "color"
+    required: false
+  tab_icon_active_color:
+    name: "Tab Icon Active Color"
+    description: "Tab Icon Active Color"
+    type: "color"
+    required: false
+  tab_icon_inactive_color:
+    name: "Tab Icon Inactive Color"
+    description: "Tab Icon Inactive Color"
+    type: "color"
+    required: false
 metadata:
   author: "Josako"
   date_added: "2024-06-06"
diff --git a/config/static-manifest/manifest.json b/config/static-manifest/manifest.json
index f2145d6..188b548 100644
--- a/config/static-manifest/manifest.json
+++ b/config/static-manifest/manifest.json
@@ -1,6 +1,6 @@
 {
-  "dist/chat-client.js": "dist/chat-client.f8ee4d5a.js",
-  "dist/chat-client.css": "dist/chat-client.2fffefae.css",
+  "dist/chat-client.js": "dist/chat-client.e8905ecb.js",
+  "dist/chat-client.css": "dist/chat-client.d344ebba.css",
   "dist/main.js": "dist/main.6a617099.js",
   "dist/main.css": "dist/main.7182aac3.css"
 }
\ No newline at end of file
diff --git a/eveai_chat_client/static/assets/vue-components/ChatApp.vue b/eveai_chat_client/static/assets/vue-components/ChatApp.vue
index 6a4aa45..93d9a74 100644
--- a/eveai_chat_client/static/assets/vue-components/ChatApp.vue
+++ b/eveai_chat_client/static/assets/vue-components/ChatApp.vue
@@ -1,38 +1,106 @@
 active_text_color<template>
     <div class="chat-app-container">
-        <!-- Message History - takes available space -->
-        <message-history
-            :messages="displayMessages"
-            :is-typing="isTyping"
-            :is-submitting-form="isSubmittingForm"
-            :api-prefix="apiPrefix"
-            :auto-scroll="true"
-            @specialist-error="handleSpecialistError"
-            @specialist-complete="handleSpecialistComplete"
-            ref="messageHistory"
-            class="chat-messages-area"
-        ></message-history>
+        <!-- Desktop layout: huidige gedrag behouden -->
+        <div v-if="!isMobile" class="chat-desktop-layout">
+            <message-history
+                :messages="displayMessages"
+                :is-typing="isTyping"
+                :is-submitting-form="isSubmittingForm"
+                :api-prefix="apiPrefix"
+                :auto-scroll="true"
+                @specialist-error="handleSpecialistError"
+                @specialist-complete="handleSpecialistComplete"
+                ref="messageHistory"
+                class="chat-messages-area"
+            ></message-history>
 
-        <!-- Chat Input - to the bottom -->
-        <chat-input
-            :current-message="currentMessage"
-            :is-loading="isLoading"
-            :max-length="2000"
-            :allow-file-upload="true"
-            :allow-voice-message="false"
-            :form-data="currentInputFormData"
-            :active-ai-message="activeAiMessage"
-            :api-prefix="apiPrefix"
-            @send-message="sendMessage"
-            @update-message="updateCurrentMessage"
-            @upload-file="handleFileUpload"
-            @record-voice="handleVoiceRecord"
-            @submit-form="submitFormFromInput"
-            @specialist-error="handleSpecialistError"
-            @specialist-complete="handleSpecialistComplete"
-            ref="chatInput"
-            class="chat-input-area"
-        ></chat-input>
+            <chat-input
+                :current-message="currentMessage"
+                :is-loading="isLoading"
+                :max-length="2000"
+                :allow-file-upload="true"
+                :allow-voice-message="false"
+                :form-data="currentInputFormData"
+                :active-ai-message="activeAiMessage"
+                :api-prefix="apiPrefix"
+                @send-message="sendMessage"
+                @update-message="updateCurrentMessage"
+                @upload-file="handleFileUpload"
+                @record-voice="handleVoiceRecord"
+                @submit-form="submitFormFromInput"
+                @specialist-error="handleSpecialistError"
+                @specialist-complete="handleSpecialistComplete"
+                ref="chatInput"
+                class="chat-input-area"
+            ></chat-input>
+        </div>
+
+        <!-- Mobiele layout met tabs in de header -->
+        <div v-else class="chat-mobile-layout">
+            <header class="chat-mobile-header">
+                <div class="chat-mobile-header-left">
+                    <SideBarLogo
+                        :logo-url="tenantLogoUrl"
+                        :make-name="tenantName"
+                    />
+                </div>
+                <div class="chat-mobile-header-right">
+                    <MobileTabBar
+                        v-model="activeTabId"
+                        :tabs="mobileTabs"
+                        placement="header"
+                    />
+                </div>
+            </header>
+
+            <div class="chat-mobile-content" :class="`tab-${activeTabId}`">
+                <message-history
+                    v-if="activeTabId === 'history'"
+                    :messages="displayMessages"
+                    :is-typing="isTyping"
+                    :is-submitting-form="isSubmittingForm"
+                    :api-prefix="apiPrefix"
+                    :auto-scroll="true"
+                    @specialist-error="handleSpecialistError"
+                    @specialist-complete="handleSpecialistComplete"
+                    ref="messageHistory"
+                    class="chat-messages-area"
+                ></message-history>
+
+                <chat-input
+                    v-else-if="activeTabId === 'chat'"
+                    :current-message="currentMessage"
+                    :is-loading="isLoading"
+                    :max-length="settings.maxMessageLength"
+                    :allow-file-upload="settings.allowFileUpload"
+                    :allow-voice-message="settings.allowVoiceMessage"
+                    :form-data="currentInputFormData"
+                    :active-ai-message="activeAiMessage"
+                    :api-prefix="apiPrefix"
+                    @send-message="sendMessage"
+                    @update-message="updateCurrentMessage"
+                    @upload-file="handleFileUpload"
+                    @record-voice="handleVoiceRecord"
+                    @submit-form="submitFormFromInput"
+                    @specialist-error="handleSpecialistError"
+                    @specialist-complete="handleSpecialistComplete"
+                    ref="chatInput"
+                    class="chat-input-area tab-chat-input"
+                ></chat-input>
+
+                <SideBarMobileSetup
+                    v-else-if="activeTabId === 'setup'"
+                    :tenant-make="{ name: tenantName, subtitle: tenantSubtitle }"
+                    :explanation-text="originalExplanation"
+                    :initial-language="currentLanguage"
+                    :current-language="currentLanguage"
+                    :supported-language-details="supportedLanguageDetails"
+                    :allowed-languages="allowedLanguages"
+                    :api-prefix="apiPrefix"
+                    @language-changed="handleLanguageChangedFromSetup"
+                />
+            </div>
+        </div>
 
         <!-- Content Modal - positioned at ChatApp level -->
         <content-modal
@@ -60,12 +128,16 @@ import ProgressTracker from './ProgressTracker.vue';
 import LanguageSelector from './LanguageSelector.vue';
 import ChatInput from './ChatInput.vue';
 import ContentModal from './ContentModal.vue';
+import SideBarLogo from './SideBarLogo.vue';
+import MobileTabBar from './MobileTabBar.vue';
+import SideBarMobileSetup from './SideBarMobileSetup.vue';
 
 // Import language provider
 import { createLanguageProvider, LANGUAGE_PROVIDER_KEY } from '../js/services/LanguageProvider.js';
 // Import content modal composable
 import { provideContentModal } from '../js/composables/useContentModal.js';
 import { provide } from 'vue';
+import useChatViewport from '../js/composables/useChatViewport.js';
 
 export default {
     name: 'ChatApp',
@@ -77,7 +149,10 @@ export default {
         MessageHistory,
         ProgressTracker,
         ChatInput,
-        ContentModal
+        ContentModal,
+        SideBarLogo,
+        MobileTabBar,
+        SideBarMobileSetup
     },
     
     setup() {
@@ -90,13 +165,17 @@ export default {
         
         // Creëer en provide content modal
         const contentModal = provideContentModal();
-        
+
+        // Initialiseer viewport-/device-informatie via useChatViewport (VueUse)
+        const { isMobile } = useChatViewport();
+
         // Provide aan alle child components
         provide(LANGUAGE_PROVIDER_KEY, languageProvider);
         
         return {
             languageProvider,
-            contentModal
+            contentModal,
+            isMobile
         };
     },
 
@@ -111,6 +190,7 @@ export default {
         return {
             // Tenant info
             tenantName: tenantMake.name || 'EveAI',
+            tenantSubtitle: tenantMake.subtitle || '',
             tenantLogoUrl: tenantMake.logo_url || '',
 
             // Taal gerelateerde data
@@ -147,10 +227,13 @@ export default {
                 autoScroll: settings.autoScroll === true
             },
 
-            // UI state
-            isMobile: window.innerWidth <= 768,
+            // UI state (fallback flags voor oudere logica)
+            isMobileFallback: window.innerWidth <= 768,
             showSidebar: window.innerWidth > 768,
 
+            // Mobile tab state
+            activeTabId: 'chat',
+
             // Advanced features
             messageSearch: '',
             filteredMessages: [],
@@ -193,16 +276,57 @@ export default {
             return this.supportedLanguages.filter(lang => 
                 this.allowedLanguages.includes(lang.code)
             );
+        },
+
+        mobileTabs() {
+            return [
+                {
+                    id: 'chat',
+                    iconName: 'chat',
+                    label: 'Chat'
+                },
+                {
+                    id: 'history',
+                    iconName: 'history',
+                    label: 'Historiek'
+                },
+                {
+                    id: 'setup',
+                    iconName: 'settings',
+                    label: 'Setup'
+                }
+            ];
         }
     },
 
     mounted() {
         this.initializeChat();
         this.setupEventListeners();
+
+        // Stel initiale actieve tab in (optioneel via config)
+        const defaultTab = (window.chatConfig && window.chatConfig.defaultTab) || 'chat';
+        if (this.mobileTabs.find(t => t.id === defaultTab)) {
+            this.activeTabId = defaultTab;
+        }
+
+        // Luister naar globale events om tab te wisselen
+        this.globalTabListener = (event) => {
+            const tabId = event?.detail?.tabId;
+            if (!tabId) return;
+            if (this.mobileTabs.find(t => t.id === tabId)) {
+                this.activeTabId = tabId;
+            }
+        };
+
+        document.addEventListener('evie-chat-set-tab', this.globalTabListener);
     },
 
     beforeUnmount() {
         this.cleanup();
+
+        if (this.globalTabListener) {
+            document.removeEventListener('evie-chat-set-tab', this.globalTabListener);
+        }
     },
 
     methods: {
@@ -453,11 +577,13 @@ export default {
                 }
             });
 
-            // Window resize listener
-            window.addEventListener('resize', () => {
-                this.isMobile = window.innerWidth <= 768;
+            // Window resize listener voor fallback flags
+            this.handleResize = () => {
+                this.isMobileFallback = window.innerWidth <= 768;
                 this.showSidebar = window.innerWidth > 768;
-            });
+            };
+
+            window.addEventListener('resize', this.handleResize);
         },
 
         cleanup() {
@@ -516,6 +642,12 @@ export default {
             this.isLoading = false;
         },
 
+        handleLanguageChangedFromSetup(newLanguage) {
+            // Update lokale taalstate; verdere effecten worden opgepikt door
+            // bestaande global listener en LanguageProvider / chatConfig.
+            this.currentLanguage = newLanguage;
+        },
+
         // UI helpers
         scrollToBottom() {
             if (this.$refs.messageHistory) {
@@ -560,7 +692,7 @@ export default {
     display: flex;
     flex-direction: column;
     flex: 1;
-    /* height: 100%;  avoided to let flex sizing control height */
+    height: 100%;
     width: 100%;
     min-height: 0;
     max-width: 1000px;
@@ -571,6 +703,71 @@ export default {
     overflow: hidden;
 }
 
+.chat-mobile-layout {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    min-height: calc(var(--safe-vh, 1vh) * 100);
+}
+
+.chat-mobile-content {
+    flex: 1 1 auto;
+    min-height: 0;
+    overflow-y: auto;
+    display: flex;
+    flex-direction: column;
+}
+
+/* Mobiele header met logo links en tabs rechts */
+.chat-mobile-header {
+    position: sticky;
+    top: 0;
+    z-index: 10;
+    display: flex;
+    flex-direction: row;
+    align-items: stretch;
+    justify-content: space-between;
+    padding: 6px 8px;
+    background: var(--tab-background, #0a0a0a);
+}
+
+.chat-mobile-header-left {
+    flex: 0 0 auto;
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    min-width: 56px; /* Zorg dat logo altijd minstens vierkant kan tonen */
+    margin-right: 4px;
+}
+
+.chat-mobile-header-right {
+    flex: 1 1 auto;
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    overflow: hidden;
+}
+
+/* Specifieke layout voor de chat-tab: inputblok onderaan */
+.chat-mobile-content.tab-chat {
+    display: flex;
+    flex-direction: column;
+}
+
+.tab-chat-input {
+    margin-top: auto;
+    flex-shrink: 0;
+    /* Iets meer visuele marge boven de onderrand, maar nog steeds rekening houden met safe inset */
+    padding-bottom: calc(6px + var(--safe-bottom-inset, 0px));
+}
+
+@media (max-width: 768px) {
+    .chat-app-container {
+        /* Minder padding op mobiel zodat de tabbar binnen de viewport valt */
+        padding: 8px 8px 0 8px;
+    }
+}
+
 .chat-messages-area {
     flex: 1;
     min-height: 0; /* ensure child can scroll */
diff --git a/eveai_chat_client/static/assets/vue-components/ChatInput.vue b/eveai_chat_client/static/assets/vue-components/ChatInput.vue
index 79072fd..f22d08f 100644
--- a/eveai_chat_client/static/assets/vue-components/ChatInput.vue
+++ b/eveai_chat_client/static/assets/vue-components/ChatInput.vue
@@ -452,6 +452,7 @@ export default {
     transition: opacity 0.2s ease-in-out;
     margin-left: auto;
     margin-right: auto;
+    margin-bottom: 20px;
 }
 
 /* Input veld en knoppen */
diff --git a/eveai_chat_client/static/assets/vue-components/ChatMessage.vue b/eveai_chat_client/static/assets/vue-components/ChatMessage.vue
index fe58241..2c5e45c 100644
--- a/eveai_chat_client/static/assets/vue-components/ChatMessage.vue
+++ b/eveai_chat_client/static/assets/vue-components/ChatMessage.vue
@@ -784,21 +784,32 @@ export default {
     }
 }
 
-/* Bubble height constraints and inner scroll containment (apply on all viewports) */
+/* Bubble height constraints en inner scroll containment.
+   Fallback gebruikt klassieke vh-units; de @supports-blok hieronder
+   schakelt over naar SafeViewport via var(--safe-vh) wanneer mogelijk. */
 .message .message-content {
-    max-height: 33vh; /* fallback */
-    overflow-y: auto;
-    overscroll-behavior: contain; /* prevent scroll chaining to parent */
-    -webkit-overflow-scrolling: touch; /* iOS smooth inertia */
+	max-height: 33vh; /* fallback */
+	overflow-y: auto;
+	overscroll-behavior: contain; /* prevent scroll chaining to parent */
+	-webkit-overflow-scrolling: touch; /* iOS smooth inertia */
 }
-/* Active contexts (input area or sticky area): allow up to half viewport */
+
+/* Active contexts (input area of sticky area): mogen meer hoogte innemen */
 .message.input-area .message-content,
 .message.sticky-area .message-content {
-    max-height: 50vh; /* fallback */
+	max-height: 50vh; /* fallback */
 }
+
 @supports (max-height: 1svh) {
-    .message .message-content { max-height: 33svh; }
-    .message.input-area .message-content,
-    .message.sticky-area .message-content { max-height: 50svh; }
+	.message .message-content {
+		/* Gebruik veilige viewporthoogte die door useChatViewport gezet wordt */
+		max-height: calc(var(--safe-vh, 1vh) * 33);
+	}
+
+	.message.input-area .message-content,
+	.message.sticky-area .message-content {
+		/* In de input-/sticky-area mag de bubbel ruimer zijn */
+		max-height: calc(var(--safe-vh, 1vh) * 60);
+	}
 }
 </style>
\ No newline at end of file
diff --git a/eveai_chat_client/static/assets/vue-components/MobileHeader.vue b/eveai_chat_client/static/assets/vue-components/MobileHeader.vue
index 3a200ba..2f4a4a0 100644
--- a/eveai_chat_client/static/assets/vue-components/MobileHeader.vue
+++ b/eveai_chat_client/static/assets/vue-components/MobileHeader.vue
@@ -5,22 +5,11 @@
       :make-name="tenantMake.name"
       class="mobile-logo"
     />
-
-    <LanguageSelector
-      :initial-language="initialLanguage"
-      :current-language="currentLanguage"
-      :supported-language-details="supportedLanguageDetails"
-      :allowed-languages="allowedLanguages"
-      @language-changed="handleLanguageChange"
-      class="mobile-language-selector"
-    />
   </div>
 </template>
 
 <script setup>
-import { ref } from 'vue';
 import SideBarLogo from './SideBarLogo.vue';
-import LanguageSelector from './LanguageSelector.vue';
 
 const props = defineProps({
   tenantMake: {
@@ -49,45 +38,21 @@ const props = defineProps({
   }
 });
 
-const emit = defineEmits(['language-changed']);
-
-const currentLanguage = ref(props.initialLanguage);
-
-const handleLanguageChange = (newLanguage) => {
-  currentLanguage.value = newLanguage;
-
-  // Emit to parent
-  emit('language-changed', newLanguage);
-
-  // Global event for backward compatibility
-  const globalEvent = new CustomEvent('language-changed', {
-    detail: { language: newLanguage }
-  });
-  document.dispatchEvent(globalEvent);
-
-  // Update chatConfig
-  if (window.chatConfig) {
-    window.chatConfig.language = newLanguage;
-  }
-
-  // Save preference
-  localStorage.setItem('preferredLanguage', newLanguage);
-};
+// Mobile header toont enkel het logo; taalkeuze gebeurt via de Setup-tab.
 </script>
 
 <style scoped>
 .mobile-header {
   display: flex;
-  justify-content: space-between;
+  justify-content: flex-start;
   align-items: center;
-  flex-wrap: wrap;             /* allow wrapping to next line on narrow screens */
   padding: 10px 15px;
   background: var(--sidebar-background);
   color: var(--sidebar-color);
   border-bottom: 1px solid rgba(0,0,0,0.1);
   min-height: 60px;
-  max-width: 100%;            /* never exceed viewport width */
-  overflow: hidden;           /* clip any accidental overflow */
+  max-width: 100%;
+  overflow: hidden;
 }
 
 /* Mobile logo container - meer specifieke styling */
@@ -129,34 +94,6 @@ const handleLanguageChange = (newLanguage) => {
   justify-content: center !important;
 }
 
-/* Mobile language selector styling */
-.mobile-language-selector {
-  flex-shrink: 1;
-  min-width: 0;               /* allow selector area to shrink */
-}
-
-.mobile-language-selector :deep(.language-selector) {
-  margin: 0;
-}
-
-.mobile-language-selector :deep(label) {
-  display: none; /* Hide label in mobile header */
-}
-
-.mobile-language-selector :deep(.language-select) {
-  padding: 6px 10px;
-  font-size: 0.85rem;
-  min-width: 0;               /* allow the select to shrink */
-  max-width: 100%;            /* never exceed container width */
-  margin: 0;
-}
-
-/* Extra constraints on ultra-small screens */
-@media (max-width: 360px) {
-  .mobile-language-selector :deep(.language-select) {
-    max-width: 60vw;          /* avoid pushing beyond viewport */
-  }
-}
 
 /* Media queries voor responsiviteit */
 @media (max-width: 768px) {
diff --git a/eveai_chat_client/static/assets/vue-components/MobileTabBar.vue b/eveai_chat_client/static/assets/vue-components/MobileTabBar.vue
new file mode 100644
index 0000000..e000704
--- /dev/null
+++ b/eveai_chat_client/static/assets/vue-components/MobileTabBar.vue
@@ -0,0 +1,113 @@
+<template>
+  <nav
+    class="mobile-tab-bar"
+    :class="{ 'mobile-tab-bar--header': placement === 'header' }"
+  >
+    <button
+      v-for="tab in tabs"
+      :key="tab.id"
+      type="button"
+      class="tab-button"
+      :class="{ 'is-active': tab.id === modelValue }"
+      @click="$emit('update:modelValue', tab.id)"
+    >
+      <span class="material-symbols-outlined" :class="`icon-${tab.iconName}`">
+        {{ tab.iconName }}
+      </span>
+      <span v-if="showLabels" class="tab-label">{{ tab.label }}</span>
+    </button>
+  </nav>
+</template>
+
+<script setup>
+import { computed, watch } from 'vue';
+import { useIconManager } from '../js/composables/useIconManager.js';
+
+const props = defineProps({
+  tabs: {
+    type: Array,
+    default: () => []
+  },
+  modelValue: {
+    type: String,
+    default: ''
+  },
+  placement: {
+    type: String,
+    default: 'bottom' // 'bottom' | 'header'
+  },
+  showLabels: {
+    type: Boolean,
+    default: false
+  }
+});
+
+defineEmits(['update:modelValue']);
+
+const { loadIcons } = useIconManager();
+
+const iconNames = computed(() => props.tabs.map(t => t.iconName).filter(Boolean));
+
+watch(iconNames, (names) => {
+  if (names && names.length) {
+    loadIcons(names);
+  }
+}, { immediate: true });
+</script>
+
+<style scoped>
+.mobile-tab-bar {
+  display: flex;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: space-around;
+  padding: 6px 8px;
+  padding-bottom: calc(6px + var(--safe-bottom-inset, 0px));
+  border-top: 1px solid rgba(255, 255, 255, 0.08);
+  background: var(--tab-background, #0a0a0a);
+}
+
+.mobile-tab-bar--header {
+  /* In de header geen extra safe-area padding en geen border-top */
+  padding: 4px 4px;
+  padding-bottom: 4px;
+  border-top: none;
+}
+
+.tab-button {
+  flex: 1 1 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 4px 0;
+  border: none;
+  background: transparent;
+  color: var(--tab-icon-inactive-color, rgba(240, 240, 240, 0.7));
+  font-size: 11px;
+  cursor: pointer;
+}
+
+.tab-button .material-symbols-outlined {
+  font-size: 22px;
+  line-height: 1;
+}
+
+.tab-button.is-active {
+  color: var(--tab-icon-active-color, #ffffff);
+}
+
+.tab-button.is-active .material-symbols-outlined {
+  font-variation-settings:
+    'FILL' 1,
+    'wght' 500,
+    'GRAD' 0,
+    'opsz' 24;
+}
+
+@media (min-width: 769px) {
+  .mobile-tab-bar {
+    display: none;
+  }
+}
+</style>
diff --git a/eveai_chat_client/static/assets/vue-components/SideBarMobileSetup.vue b/eveai_chat_client/static/assets/vue-components/SideBarMobileSetup.vue
new file mode 100644
index 0000000..cbdecc2
--- /dev/null
+++ b/eveai_chat_client/static/assets/vue-components/SideBarMobileSetup.vue
@@ -0,0 +1,118 @@
+<template>
+  <div class="sidebar-mobile-setup">
+    <SideBarMakeName
+      :make-name="tenantMake.name"
+      :subtitle="tenantMake.subtitle"
+      class="setup-make-name"
+    />
+
+    <LanguageSelector
+      :initial-language="initialLanguage"
+      :current-language="currentLanguageInternal"
+      :supported-language-details="supportedLanguageDetails"
+      :allowed-languages="allowedLanguages"
+      @language-changed="handleLanguageChange"
+      class="setup-language-selector"
+    />
+
+    <SideBarExplanation
+      :original-text="explanationText"
+      :current-language="currentLanguageInternal"
+      :api-prefix="apiPrefix"
+      class="setup-explanation"
+    />
+  </div>
+</template>
+
+<script setup>
+import { ref, watch } from 'vue';
+import SideBarMakeName from './SideBarMakeName.vue';
+import LanguageSelector from './LanguageSelector.vue';
+import SideBarExplanation from './SideBarExplanation.vue';
+
+const props = defineProps({
+  tenantMake: {
+    type: Object,
+    default: () => ({
+      name: '',
+      subtitle: ''
+    })
+  },
+  explanationText: {
+    type: String,
+    default: ''
+  },
+  initialLanguage: {
+    type: String,
+    default: 'en'
+  },
+  currentLanguage: {
+    type: String,
+    default: 'en'
+  },
+  supportedLanguageDetails: {
+    type: Object,
+    default: () => ({})
+  },
+  allowedLanguages: {
+    type: Array,
+    default: () => ['nl', 'en', 'fr', 'de']
+  },
+  apiPrefix: {
+    type: String,
+    default: ''
+  }
+});
+
+const emit = defineEmits(['language-changed']);
+
+const currentLanguageInternal = ref(props.currentLanguage || props.initialLanguage);
+
+watch(
+  () => props.currentLanguage,
+  (newVal) => {
+    if (newVal && newVal !== currentLanguageInternal.value) {
+      currentLanguageInternal.value = newVal;
+    }
+  }
+);
+
+const handleLanguageChange = (newLanguage) => {
+  currentLanguageInternal.value = newLanguage;
+  emit('language-changed', newLanguage);
+};
+</script>
+
+<style scoped>
+.sidebar-mobile-setup {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  padding: 12px 8px 16px 8px;
+  gap: 8px;
+}
+
+.setup-make-name {
+  padding-bottom: 4px;
+}
+
+.setup-language-selector {
+  flex-shrink: 0;
+  border-radius: 12px;
+  background: var(--sidebar-background, rgba(255, 255, 255, 0.02));
+  padding: 8px;
+}
+
+.setup-explanation {
+  flex: 1 1 auto;
+  border-radius: 12px;
+  padding: 8px;
+  overflow-y: auto;
+}
+
+@media (min-width: 769px) {
+  .sidebar-mobile-setup {
+    display: none;
+  }
+}
+</style>
diff --git a/eveai_chat_client/templates/base.html b/eveai_chat_client/templates/base.html
index 427df33..c849823 100644
--- a/eveai_chat_client/templates/base.html
+++ b/eveai_chat_client/templates/base.html
@@ -44,6 +44,11 @@
             --human-message-background: {{ customisation.human_message_background|default('#ffffff') }};
             --human-message-text-color: {{ customisation.human_message_text_color|default('#212529') }};
 
+            /* Mobe Tab Bar Colors */
+            --tab-background: {{ customisation.tab_background|default('#0a0a0a') }};
+            --tab-icon-active-color: {{ customisation.tab_icon_active_color|default('#ffffff') }};
+            --tab-icon-inactive-color: {{ customisation.tab_icon_inactive_color|default('#f0f0f0') }};
+
         }
     </style>
 
diff --git a/nginx/frontend_src/js/chat-client.js b/nginx/frontend_src/js/chat-client.js
index 901911f..89bb79c 100644
--- a/nginx/frontend_src/js/chat-client.js
+++ b/nginx/frontend_src/js/chat-client.js
@@ -30,7 +30,6 @@ import LanguageSelector from '../../../eveai_chat_client/static/assets/vue-compo
 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';
@@ -51,9 +50,6 @@ document.addEventListener('DOMContentLoaded', function() {
   // Initialiseer sidebar (vervangt fillSidebarExplanation en initializeLanguageSelector)
   initializeSidebar();
 
-  // Initialiseer mobile header
-  initializeMobileHeader();
-
   // Initialiseer chat app (simpel)
   initializeChatApp();
 });
@@ -121,85 +117,8 @@ function initializeSidebar() {
   }
 }
 
-/**
- * Initialiseert de mobile header component
- */
-function initializeMobileHeader() {
-  const container = document.getElementById('mobile-header-container');
-  
-  if (!container) {
-    console.error('#mobile-header-container niet gevonden');
-    return;
-  }
-
-  try {
-    // Maak props voor de component
-    const props = {
-      tenantMake: {
-        name: window.chatConfig.tenantMake?.name || '',
-        logo_url: window.chatConfig.tenantMake?.logo_url || '',
-        subtitle: window.chatConfig.tenantMake?.subtitle || ''
-      },
-      initialLanguage: window.chatConfig.language || 'nl',
-      supportedLanguageDetails: window.chatConfig.supportedLanguageDetails || {},
-      allowedLanguages: window.chatConfig.allowedLanguages || ['nl', 'en', 'fr', 'de'],
-      apiPrefix: window.chatConfig.apiPrefix || ''
-    };
-
-    // Mount de component
-    const app = createApp(MobileHeader, props);
-    
-    // Create and provide LanguageProvider for mobile header components
-    const initialLanguage = window.chatConfig?.language || 'nl';
-    const apiPrefix = window.chatConfig?.apiPrefix || '';
-    const languageProvider = createLanguageProvider(initialLanguage, apiPrefix);
-    app.provide(LANGUAGE_PROVIDER_KEY, languageProvider);
-    
-    // Error handler
-    app.config.errorHandler = (err, vm, info) => {
-      console.error('🚨 [Vue Error in MobileHeader]', err);
-      console.error('Component:', vm);
-      console.error('Error Info:', info);
-    };
-
-    const mountedApp = app.mount(container);
-
-    // Dynamisch de headerhoogte doorgeven aan CSS
-    const updateHeaderHeightVar = () => {
-      const isMobile = window.matchMedia('(max-width: 768px)').matches;
-      if (!isMobile) {
-        document.documentElement.style.removeProperty('--mobile-header-height');
-        return;
-      }
-      const h = container.offsetHeight || 60; // fallback
-      document.documentElement.style.setProperty('--mobile-header-height', `${h}px`);
-    };
-
-    // Initieel instellen en bij gebeurtenissen herberekenen
-    requestAnimationFrame(updateHeaderHeightVar);
-    window.addEventListener('resize', updateHeaderHeightVar);
-
-    // Listen to language change events and update the mobile header's language provider
-    const languageChangeHandler = (event) => {
-      if (event.detail && event.detail.language) {
-        console.log('MobileHeader: Received language change event:', event.detail.language);
-        languageProvider.setLanguage(event.detail.language);
-        // taalwissel kan headerhoogte veranderen
-        requestAnimationFrame(updateHeaderHeightVar);
-      }
-    };
-    document.addEventListener('language-changed', languageChangeHandler);
-    
-    // Store the handler for cleanup if needed
-    mountedApp._languageChangeHandler = languageChangeHandler;
-    mountedApp._updateHeaderHeightVar = updateHeaderHeightVar;
-    
-    console.log('✅ MobileHeader component successfully mounted with LanguageProvider en dynamische headerhoogte');
-    return mountedApp;
-  } catch (error) {
-    console.error('🚨 [CRITICAL ERROR] Bij initialiseren mobile header:', error);
-  }
-}
+// initializeMobileHeader is verwijderd; de mobiele header wordt nu volledig
+// binnen ChatApp.vue beheerd.
 
 /**
  * Initialiseert de chat app (Vue component)

From b1d8c9a17d0cccdc09867f7ebd31110bf47e8dcb Mon Sep 17 00:00:00 2001
From: Josako <pieter.laroy@flow-it.net>
Date: Fri, 28 Nov 2025 10:04:31 +0100
Subject: [PATCH 2/2] - Small changes to allow for keyboard input, not finished

---
 config/static-manifest/manifest.json          |  4 +--
 eveai_chat_client/static/assets/css/chat.css  | 26 +++++++++++++++++--
 .../static/assets/vue-components/ChatApp.vue  | 24 +++++++++++------
 .../assets/vue-components/SafeViewport.vue    |  3 +++
 4 files changed, 45 insertions(+), 12 deletions(-)

diff --git a/config/static-manifest/manifest.json b/config/static-manifest/manifest.json
index 188b548..ba22821 100644
--- a/config/static-manifest/manifest.json
+++ b/config/static-manifest/manifest.json
@@ -1,6 +1,6 @@
 {
-  "dist/chat-client.js": "dist/chat-client.e8905ecb.js",
-  "dist/chat-client.css": "dist/chat-client.d344ebba.css",
+  "dist/chat-client.js": "dist/chat-client.5b709f8c.js",
+  "dist/chat-client.css": "dist/chat-client.cb306abb.css",
   "dist/main.js": "dist/main.6a617099.js",
   "dist/main.css": "dist/main.7182aac3.css"
 }
\ No newline at end of file
diff --git a/eveai_chat_client/static/assets/css/chat.css b/eveai_chat_client/static/assets/css/chat.css
index 6bb3633..d662fb7 100644
--- a/eveai_chat_client/static/assets/css/chat.css
+++ b/eveai_chat_client/static/assets/css/chat.css
@@ -21,7 +21,9 @@
 /* App container layout */
 .app-container {
     display: flex;
-    /* Use visual viewport variable when available */
+    /* Op desktop gebruiken we de veilige viewporthoogte direct; op mobiel
+       laten we html/body de hoogte bepalen en neemt de app-container
+       eenvoudig 100% daarvan in via de media query verderop. */
     min-height: 0;
     height: calc(var(--safe-vh, var(--vvh, 1vh)) * 100);
     width: 100%;
@@ -93,7 +95,7 @@
     display: flex;
     flex-direction: column;
     min-height: 0;
-    height: auto; /* prefer dynamic viewport on desktop */
+    height: auto; /* desktop: dynamische hoogte, op mobiel overschreven */
 }
 
 .chat-container {
@@ -103,6 +105,26 @@
     min-height: 0;        /* laat kinderen (ChatApp) krimpen */
 }
 
+/* Op mobiel sluiten we de volledige content-kolom strak aan op de veilige
+   viewporthoogte zodat alleen de chatcontent zelf kan scrollen en niet de
+   gehele pagina wanneer het toetsenbord opent. */
+@media (max-width: 768px) {
+    .app-container {
+        height: 100%;
+    }
+
+    .content-area {
+        height: 100%;
+        overflow: hidden;
+    }
+
+    .chat-container {
+        flex: 1 1 auto;
+        min-height: 0;
+        overflow: hidden;
+    }
+}
+
 html, body {
     height: calc(var(--safe-vh, var(--vvh, 1vh)) * 100);
     min-height: 0;
diff --git a/eveai_chat_client/static/assets/vue-components/ChatApp.vue b/eveai_chat_client/static/assets/vue-components/ChatApp.vue
index 93d9a74..deac7c4 100644
--- a/eveai_chat_client/static/assets/vue-components/ChatApp.vue
+++ b/eveai_chat_client/static/assets/vue-components/ChatApp.vue
@@ -1,7 +1,7 @@
 active_text_color<template>
     <div class="chat-app-container">
         <!-- Desktop layout: huidige gedrag behouden -->
-        <div v-if="!isMobile" class="chat-desktop-layout">
+        <div v-if="!isMobileFallback" class="chat-desktop-layout">
             <message-history
                 :messages="displayMessages"
                 :is-typing="isTyping"
@@ -137,7 +137,6 @@ import { createLanguageProvider, LANGUAGE_PROVIDER_KEY } from '../js/services/La
 // Import content modal composable
 import { provideContentModal } from '../js/composables/useContentModal.js';
 import { provide } from 'vue';
-import useChatViewport from '../js/composables/useChatViewport.js';
 
 export default {
     name: 'ChatApp',
@@ -166,16 +165,12 @@ export default {
         // Creëer en provide content modal
         const contentModal = provideContentModal();
 
-        // Initialiseer viewport-/device-informatie via useChatViewport (VueUse)
-        const { isMobile } = useChatViewport();
-
         // Provide aan alle child components
         provide(LANGUAGE_PROVIDER_KEY, languageProvider);
         
         return {
             languageProvider,
-            contentModal,
-            isMobile
+            contentModal
         };
     },
 
@@ -706,8 +701,13 @@ export default {
 .chat-mobile-layout {
     display: flex;
     flex-direction: column;
+    /* Binnen SafeViewport vertrouwen we op de hoogte van de bovenliggende
+       containers (html/body/app-container). Deze layout moet zich daaraan
+       aanpassen en niet opnieuw zelf een safe-vh berekening doen, om
+       dubbele afrondingsfouten en extra scrollruimte te vermijden. */
+    flex: 1 1 auto;
     height: 100%;
-    min-height: calc(var(--safe-vh, 1vh) * 100);
+    min-height: 0;
 }
 
 .chat-mobile-content {
@@ -761,6 +761,14 @@ export default {
     padding-bottom: calc(6px + var(--safe-bottom-inset, 0px));
 }
 
+/* Wanneer het toetsenbord open is (gedetecteerd door useChatViewport via
+   de body-klasse chat-keyboard-open), willen we geen extra grote
+   safe-bottom-inset meer onder de input. Dan sluiten we zo veel mogelijk
+   aan tegen de visuele viewport en houden we alleen een kleine vaste marge. */
+body.chat-keyboard-open .tab-chat-input {
+    padding-bottom: 6px;
+}
+
 @media (max-width: 768px) {
     .chat-app-container {
         /* Minder padding op mobiel zodat de tabbar binnen de viewport valt */
diff --git a/eveai_chat_client/static/assets/vue-components/SafeViewport.vue b/eveai_chat_client/static/assets/vue-components/SafeViewport.vue
index 79d63c2..e1b3513 100644
--- a/eveai_chat_client/static/assets/vue-components/SafeViewport.vue
+++ b/eveai_chat_client/static/assets/vue-components/SafeViewport.vue
@@ -24,5 +24,8 @@ useChatViewport();
   height: 100%;
   display: flex;
   flex-direction: column;
+  flex: 1 1 auto;
+  min-height: 0;
+  overflow: hidden;
 }
 </style>