- Start met Mobiele versie van de chat client.

eveai_chat_client/static/assets/css/chat.css

@@ -18,6 +18,16 @@
     width: 100%;
 }
 
+/* Mobile header container - hidden on desktop */
+#mobile-header-container {
+    display: none;
+}
+
+/* Desktop layout - default */
+#sidebar-container {
+    display: block;
+}
+
 /* Sidebar styling */
 .sidebar {
     width: 300px;
@@ -254,4 +264,29 @@ body {
 
 /* .btn-primary wordt nu gedefinieerd in chat-components.css */
 
+/* Mobile responsive layout */
+@media (max-width: 768px) {
+    /* Switch to vertical layout */
+    .app-container {
+        flex-direction: column;
+    }
+    
+    /* Hide desktop sidebar on mobile */
+    #sidebar-container {
+        display: none;
+    }
+    
+    /* Show mobile header on mobile */
+    #mobile-header-container {
+        display: block;
+        width: 100%;
+    }
+    
+    /* Content area takes remaining space */
+    .content-area {
+        flex: 1;
+        height: calc(100vh - 60px); /* Subtract mobile header height */
+    }
+}
+
 /* Responsieve design regels worden nu gedefinieerd in chat-components.css */

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

@@ -225,4 +225,22 @@ export default {
     color: white;
     padding: 8px;
 }
+
+/* Mobile-specific styling when used in mobile header */
+@media (max-width: 768px) {
+  .language-selector {
+    margin: 0;
+  }
+  
+  .language-selector label {
+    display: none; /* Hide label in mobile header */
+  }
+  
+  .language-select {
+    padding: 6px 10px;
+    font-size: 0.85rem;
+    min-width: 120px;
+    margin: 0;
+  }
+}
 </style>

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

@@ -0,0 +1,146 @@
+<!-- MobileHeader.vue -->
+<template>
+  <div class="mobile-header">
+    <SideBarLogo 
+      :logo-url="tenantMake.logo_url"
+      :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: {
+    type: Object,
+    default: () => ({
+      name: '',
+      logo_url: '',
+      subtitle: ''
+    })
+  },
+  initialLanguage: {
+    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 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);
+};
+</script>
+
+<style scoped>
+.mobile-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 10px 15px;
+  background: var(--sidebar-background);
+  color: var(--sidebar-color);
+  border-bottom: 1px solid rgba(0,0,0,0.1);
+  min-height: 60px;
+}
+
+/* Mobile logo styling - compact version */
+.mobile-header :deep(.mobile-logo) {
+  flex-shrink: 0;
+}
+
+.mobile-header :deep(.mobile-logo .sidebar-logo) {
+  padding: 0;
+  margin-right: 15px;
+}
+
+.mobile-header :deep(.mobile-logo .logo-image) {
+  max-height: 40px;
+  max-width: 120px;
+}
+
+.mobile-header :deep(.mobile-logo .logo-placeholder) {
+  width: 40px;
+  height: 40px;
+  font-size: 1rem;
+}
+
+/* Mobile language selector styling - compact horizontal version */
+.mobile-header :deep(.mobile-language-selector) {
+  flex-shrink: 0;
+  min-width: 140px;
+}
+
+.mobile-header :deep(.mobile-language-selector .language-selector) {
+  margin: 0;
+}
+
+.mobile-header :deep(.mobile-language-selector label) {
+  display: none; /* Hide label in mobile header */
+}
+
+.mobile-header :deep(.mobile-language-selector .language-select) {
+  padding: 6px 10px;
+  font-size: 0.85rem;
+  min-width: 120px;
+  margin: 0;
+}
+
+/* Show mobile header on mobile */
+@media (max-width: 768px) {
+  .mobile-header {
+    display: flex;
+  }
+}
+
+/* Hide mobile header on desktop */
+@media (min-width: 769px) {
+  .mobile-header {
+    display: none;
+  }
+}
+</style>

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

@@ -69,4 +69,22 @@ const handleImageError = () => {
   font-weight: bold;
   font-size: 1.2rem;
 }
+
+/* Mobile-specific styling when used in mobile header */
+@media (max-width: 768px) {
+  .sidebar-logo {
+    padding: 5px 0; /* Reduce padding for mobile header */
+  }
+  
+  .logo-image {
+    max-height: 40px; /* Smaller logo for mobile header */
+    max-width: 120px;
+  }
+  
+  .logo-placeholder {
+    width: 40px;
+    height: 40px;
+    font-size: 1rem;
+  }
+}
 </style>

eveai_chat_client/static/assets/vue-components/index.js

@@ -10,6 +10,8 @@ export { default as ProgressTracker } from './ProgressTracker.vue';
 export { default as DynamicForm } from './DynamicForm.vue';
 export { default as FormField } from './FormField.vue';
 export { default as FormMessage } from './FormMessage.vue';
+export { default as SideBar } from './SideBar.vue';
+export { default as MobileHeader } from './MobileHeader.vue';
 
 // Log successful loading
 console.log('Vue components loaded successfully from barrel export');

eveai_chat_client/templates/base.html

@@ -48,7 +48,10 @@
 </head>
 <body>
     <div id="app" class="app-container" data-vue-app="true">
-        <!-- Left sidebar - Vue component container -->
+        <!-- Mobile header - Vue component container (hidden on desktop) -->
+        <div id="mobile-header-container"></div>
+        
+        <!-- Left sidebar - Vue component container (hidden on mobile) -->
         <div id="sidebar-container"></div>
 
         <!-- Right content area - contains the chat client -->