-
-
+
-
-
{{ message.content }}
@@ -120,14 +113,7 @@
-
-
-
+
@@ -225,12 +211,35 @@ export default {
}
},
mounted() {
- // Component initialization if needed
+ // Reset initial scroll position to top for the inner bubble
+ this.$nextTick(() => {
+ const el = this.$refs.messageContent;
+ if (el && typeof el.scrollTop !== 'undefined') {
+ el.scrollTop = 0;
+ }
+ });
},
- beforeUnmount() {
+ watch: {
+ isActiveContext(newVal, oldVal) {
+ // When moving from active (input/sticky) to history, reset scroll to top
+ if (oldVal === true && newVal === false) {
+ this.$nextTick(() => {
+ const el = this.$refs.messageContent;
+ if (el && typeof el.scrollTop !== 'undefined') {
+ el.scrollTop = 0;
+ }
+ });
+ }
+ }
+ },
+ beforeUnmount() {
// Component cleanup if needed
},
computed: {
+ isActiveContext() {
+ // active if in input area or sticky area
+ return !!(this.isInInputArea || this.isInStickyArea);
+ },
hasFormData() {
return this.message.formData &&
((Array.isArray(this.message.formData.fields) && this.message.formData.fields.length > 0) ||
@@ -383,8 +392,8 @@ export default {
/* User messages with forms get fixed width of 90% */
.message.user.has-form {
- width: 90%;
- max-width: none;
+ width: auto; /* niet breder maken dan standaard */
+ max-width: 100%;
}
/* Styling for temporarily positioned AI messages */
@@ -421,39 +430,60 @@ export default {
padding: 12px;
}
.message-content {
- width: 100%;
font-family: Arial, sans-serif;
- font-size: 14px;
+ font-size: 12px;
+ max-width: 90%;
+ padding: 8px;
+ border-radius: 10px;
+ word-wrap: break-word;
+ position: relative;
+ box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+ transition: all 0.2s ease;
+ display: inline-block;
+ width: 100%;
+ box-sizing: border-box;
}
/* EveAI Logo styling voor AI berichten */
+/* Position relative on the message container to anchor the logo (sibling of .message-content) */
+.message.ai {
+ position: relative;
+}
.ai-message-logo {
position: absolute;
top: -20px;
- left: -20px;
+ left: -5px;
width: 36px;
height: 36px;
border-radius: 50%;
background-color: var(--ai-message-background);
- padding: 2px;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
z-index: 10;
pointer-events: none;
}
-/* Ensure message-content has relative positioning for logo positioning */
-.message.ai .message-content {
- position: relative;
-}
-
/* Formulier styling */
.form-display {
- margin: 15px 0;
color: var(--human-message-text-color);
- padding: 15px;
font-family: inherit;
}
+/* Neutraliseer dynamic-form look binnen message bubble voor user-form-values */
+.user-form-values .message-form .dynamic-form {
+ background: transparent;
+ box-shadow: none;
+ padding: 0;
+ max-width: 100%;
+ box-sizing: border-box;
+}
+.user-form-values .message-form .form-readonly,
+.user-form-values .message-form .form-field-readonly,
+.user-form-values .message-form .field-label,
+.user-form-values .message-form .field-value {
+ max-width: 90%;
+ box-sizing: border-box;
+}
+
/* Tabel styling voor formulieren */
.form-result-table {
width: 100%;
@@ -612,13 +642,100 @@ export default {
max-width: 95%;
}
- /* User messages with forms get fixed width of 95% on mobile */
+ /* User messages with forms: hou zelfde breedte als gewone tekst */
.message.user.has-form {
- width: 95%;
+ width: auto;
+ max-width: 100%;
}
.form-result-table td:first-child {
width: 40%;
}
}
+/* migrated from global css: message-content visuals */
+.message.user .message-content {
+ background: var(--human-message-background);
+ color: var(--human-message-text-color);
+ border-bottom-right-radius: 4px;
+}
+
+.message.ai .message-content,
+.message.bot .message-content {
+ background: var(--ai-message-background);
+ color: var(--ai-message-text-color);
+ border-bottom-left-radius: 4px;
+ margin-right: 60px;
+}
+
+/* Hover effects for message bubbles */
+.message-content:hover {
+ transform: translateY(-1px);
+ box-shadow: 0 4px 12px rgba(0,0,0,0.15);
+}
+
+/* Handle empty message content during processing */
+.message-content:has(.message-text:empty) .message-progress {
+ margin-bottom: 0;
+}
+.message-content:has(.message-text:empty):not(:has(.message-progress.completed)):not(:has(.message-progress.error)) {
+ background: transparent;
+ box-shadow: none;
+ border: none;
+ padding: 0;
+ margin: 0;
+}
+
+/* Mobile responsiveness moved from global */
+@media (max-width: 768px) {
+ .message.user .message-content {
+ margin-left: 40px;
+ }
+ .message.ai .message-content,
+ .message.bot .message-content {
+ margin-right: 40px;
+ }
+ /* Mobile: place logo inside bubble and prevent overlap with text */
+ .message.ai .ai-message-logo {
+ top: -12px;
+ left: 8px;
+ width: 24px;
+ height: 24px;
+ }
+ .message.ai .message-content {
+ /* Reserve space for the in-bubble logo */
+ padding-top: 1px; /* 24px logo + margins */
+ padding-left: 1px;
+ }
+}
+
+@media (max-width: 480px) {
+ .message-content {
+ max-width: 90%;
+ margin-left: 20px !important;
+ margin-right: 20px !important;
+ }
+}
+
+/* Mobile bubble height constraints and inner scroll containment */
+@media (max-width: 768px) {
+ /* Default/history: apply to all message bubbles */
+ .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 */
+ }
+ /* Active contexts (input area or sticky area): allow up to half viewport */
+ .message.input-area .message-content,
+ .message.sticky-area .message-content {
+ max-height: 50vh; /* fallback */
+ }
+}
+@supports (max-height: 1svh) {
+ @media (max-width: 768px) {
+ .message .message-content { max-height: 33svh; }
+ .message.input-area .message-content,
+ .message.sticky-area .message-content { max-height: 50svh; }
+ }
+}
\ No newline at end of file
diff --git a/eveai_chat_client/static/assets/vue-components/DynamicForm.vue b/eveai_chat_client/static/assets/vue-components/DynamicForm.vue
index a51cbd2..4b03516 100644
--- a/eveai_chat_client/static/assets/vue-components/DynamicForm.vue
+++ b/eveai_chat_client/static/assets/vue-components/DynamicForm.vue
@@ -547,6 +547,8 @@ export default {
border-radius: 8px;
padding: 15px;
box-shadow: 0 2px 15px rgba(0,0,0,0.1);
+ box-sizing: border-box;
+ max-width: 100%;
}
.form-header {
@@ -558,7 +560,9 @@ export default {
}
.dynamic-form.readonly .form-header {
- border-bottom: 1px solid #777;
+ border-bottom: none; /* alle borders weg in readonly */
+ padding-bottom: 0;
+ margin-bottom: 8px;
}
.form-icon {
@@ -722,34 +726,86 @@ export default {
/* Read-only form styling */
.form-readonly {
- padding: 10px 0;
+ padding: 8px 0; /* compacter binnen bubble */
+ box-sizing: border-box;
+ max-width: 100%;
}
.form-field-readonly {
display: flex;
- margin-bottom: 8px;
- padding-bottom: 8px;
+ align-items: flex-start;
+ gap: 8px;
+ margin-bottom: 6px; /* compacter */
+ padding-bottom: 6px;
+ line-height: 1.3; /* iets compacter */
+ box-sizing: border-box;
+ max-width: 100%;
}
.dynamic-form.readonly .form-field-readonly {
- border-bottom: 1px solid #777;
+ border-bottom: none; /* alle borders weg in readonly */
}
.field-label {
flex: 0 0 30%;
font-weight: 500;
- padding-right: 10px;
+ padding-right: 8px;
+ box-sizing: border-box;
+ max-width: 100%;
}
.field-value {
flex: 1;
- word-break: break-word;
+ overflow-wrap: anywhere; /* desktop: meerregelig zonder overflow */
+ box-sizing: border-box;
+ max-width: 100%;
}
.text-value {
white-space: pre-wrap;
}
+/* Responsive aanpassingen voor read-only binnen message bubbles */
+@media (min-width: 768px) {
+ /* Desktop en groter: geen ellipsis, laat tekst wrappen */
+ .dynamic-form.readonly .field-label,
+ .dynamic-form.readonly .field-value {
+ white-space: normal;
+ overflow: visible;
+ text-overflow: clip;
+ }
+}
+
+@media (max-width: 767.98px) {
+ /* Mobiel: label boven waarde, vet label, ellipsis op één regel */
+ .dynamic-form.readonly .form-field-readonly {
+ display: block;
+ border-bottom: none; /* alle borders weg in readonly */
+ }
+ .dynamic-form.readonly .field-label {
+ display: block;
+ font-weight: 600;
+ margin-bottom: 3px; /* kleine afstand tussen label en waarde */
+ padding-right: 0;
+ flex: none;
+ }
+ .dynamic-form.readonly .field-value {
+ display: block;
+ }
+ .dynamic-form.readonly .field-label,
+ .dynamic-form.readonly .field-value {
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ }
+ /* Specifieke override voor text-value die anders pre-wrap afdwingt */
+ .dynamic-form.readonly .field-value.text-value {
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ }
+}
+
/* Boolean icon styling */
.boolean-icon {
font-size: 20px;
diff --git a/eveai_chat_client/static/assets/vue-components/FormMessage.vue b/eveai_chat_client/static/assets/vue-components/FormMessage.vue
index 6db2ec9..a0432d1 100644
--- a/eveai_chat_client/static/assets/vue-components/FormMessage.vue
+++ b/eveai_chat_client/static/assets/vue-components/FormMessage.vue
@@ -220,7 +220,7 @@ export default {
}
.message-content {
- max-width: 100%;
+ max-width: 90%;
}
/* Responsive adjustments */
@@ -294,4 +294,13 @@ export default {
border-bottom: 2px solid #000;
}
}
+/* migrated from global css: message-content within form-message */
+.form-message .message-content {
+ max-width: 90%;
+ background: white;
+ border: 1px solid #e9ecef;
+ border-radius: 12px;
+ padding: 20px;
+ box-shadow: 0 4px 12px rgba(0,0,0,0.1);
+}
\ No newline at end of file
diff --git a/eveai_chat_client/static/assets/vue-components/MessageHistory.vue b/eveai_chat_client/static/assets/vue-components/MessageHistory.vue
index 1e3a19a..66b510a 100644
--- a/eveai_chat_client/static/assets/vue-components/MessageHistory.vue
+++ b/eveai_chat_client/static/assets/vue-components/MessageHistory.vue
@@ -331,9 +331,9 @@ export default {
display: flex;
flex-direction: column;
flex: 1;
- height: 100%;
+ /* height: 100%; avoid forcing parent height */
min-height: 0; /* Laat kinderen scrollen */
- padding: 20px;
+ padding: 16px; /* iets minder padding om ruimte te besparen */
box-sizing: border-box;
width: 100%;
max-width: 1000px;
diff --git a/nginx/frontend_src/js/chat-client.js b/nginx/frontend_src/js/chat-client.js
index 413305e..6917659 100644
--- a/nginx/frontend_src/js/chat-client.js
+++ b/nginx/frontend_src/js/chat-client.js
@@ -160,20 +160,38 @@ function initializeMobileHeader() {
};
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');
+ console.log('✅ MobileHeader component successfully mounted with LanguageProvider en dynamische headerhoogte');
return mountedApp;
} catch (error) {
console.error('🚨 [CRITICAL ERROR] Bij initialiseren mobile header:', error);