pieter/eveAI
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'bugfix/Mobile_Chat_Client_Improvements' into develop

Browse Source
This commit is contained in:
Josako
2025-09-23 06:57:06 +02:00
parent ae36791ffe 44e5dd5d02
commit d097451d42
11 changed files with 302 additions and 168 deletions
Download Patch File Download Diff File Expand all files Collapse all files

58
eveai_chat_client/static/assets/css/chat-components.css
View File

@@ -155,18 +155,7 @@
}
/* Zorg dat de progress tracker goed wordt weergegeven in een lege message bubble */
.message-content:has(.message-text:empty) .message-progress {
margin-bottom: 0;
}
/* Verberg de message content container als er geen inhoud is en de verwerking bezig is */
.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;
}
/* moved to ChatMessage.vue scoped styles */
/* Focus binnen ChatInput voor toegankelijkheid */
.chat-input:focus-within {
@@ -208,33 +197,7 @@
justify-content: flex-start;
}
/* Message content wrapper - dit wordt de bubble */
.message-content {
max-width: 70%;
padding: 12px 16px;
border-radius: 18px;
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;
}
/* User message bubble styling */
.message.user .message-content {
background: var(--human-message-background);
color: var(--human-message-text-color);
border-bottom-right-radius: 4px;
}
/* AI/Bot message bubble styling */
.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;
}
/* moved to ChatMessage.vue scoped styles */
/* Message text content */
.message-text {
@@ -435,10 +398,7 @@
}
/* Hover effects voor message bubbles */
.message-content:hover {
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
/* moved to ChatMessage.vue scoped styles */
/* Bestaande animation en date-separator blijven hetzelfde */
@keyframes messageSlideIn {
@@ -483,11 +443,7 @@
padding: 0 15px;
}
.message-content {
max-width: 85%;
padding: 10px 14px;
font-size: 14px;
}
/* moved to ChatMessage.vue scoped styles */
.message.user .message-content {
margin-left: 40px;
@@ -504,11 +460,7 @@
padding: 0 10px;
}
.message-content {
max-width: 90%;
margin-left: 20px !important;
margin-right: 20px !important;
}
/* moved to ChatMessage.vue scoped styles */
}
/* Progress Tracker Styling */

6
eveai_chat_client/static/assets/css/chat-message.css
View File

@@ -15,11 +15,7 @@
margin-right: auto;
}
.message-content {
width: 100%;
font-family: Arial, sans-serif;
font-size: 14px;
}
/* moved to ChatMessage.vue scoped styles */
/* Tabel styling voor formulieren */
.form-result-table {

35
eveai_chat_client/static/assets/css/chat.css
View File

@@ -14,7 +14,8 @@
/* App container layout */
.app-container {
display: flex;
height: 100vh;
height: 100vh; /* fallback */
height: 100dvh; /* prefer dynamic viewport unit */
width: 100%;
}
@@ -80,9 +81,23 @@
.content-area {
flex: 1;
background: linear-gradient(135deg, var(--gradient-start-color), var(--gradient-end-color));
overflow-y: auto;
overflow-y: hidden;
display: flex;
flex-direction: column;
min-height: 0;
height: 100vh; /* fallback for desktop */
height: 100dvh; /* prefer dynamic viewport on desktop */
}
.chat-container {
display: flex;
flex-direction: column;
flex: 1;
min-height: 0; /* laat kinderen (ChatApp) krimpen */
}
html, body {
height: 100%;
}
body {
@@ -203,15 +218,7 @@ body {
/* .message-content wordt nu gedefinieerd in chat-components.css */
.user-message .message-content {
background-color: var(--message-user-bg);
color: var(--text-color);
}
.bot-message .message-content {
background-color: var(--message-bot-bg);
color: var(--text-color);
}
/* moved to ChatMessage.vue scoped styles */
/* .chat-input-container wordt nu gedefinieerd in chat-components.css */
@@ -273,10 +280,14 @@ body {
width: 100%;
}
:root { --mobile-header-height: 60px; } /* default/minimum */
/* Content area takes remaining space */
.content-area {
flex: 1;
height: calc(100vh - 60px); /* Subtract mobile header height */
height: calc(100vh - var(--mobile-header-height)); /* fallback */
height: calc(100dvh - var(--mobile-header-height)); /* prefer dynamic viewport */
min-height: 0;
}
}

4
eveai_chat_client/static/assets/css/form-message.css
View File

@@ -54,6 +54,4 @@
word-break: break-word;
}
.message-content {
max-width: 100%;
}
/* moved to ChatMessage.vue scoped styles */

11
eveai_chat_client/static/assets/vue-components/ChatApp.vue
View File

@@ -553,7 +553,8 @@ export default {
.chat-app-container {
display: flex;
flex-direction: column;
height: 100vh;
flex: 1;
/* height: 100%; avoided to let flex sizing control height */
width: 100%;
min-height: 0;
max-width: 1000px;
@@ -561,10 +562,12 @@ export default {
margin-right: auto;
padding: 20px;
box-sizing: border-box;
overflow: hidden;
}
.chat-messages-area {
flex: 1;
min-height: 0; /* ensure child can scroll */
overflow: hidden;
display: flex;
flex-direction: column;
@@ -585,10 +588,4 @@ export default {
flex: 0 0 auto;
}
/* Responsive adjustments */
@media (max-width: 768px) {
.chat-app-container {
height: 100vh;
}
}
</style>

52
eveai_chat_client/static/assets/vue-components/ChatInput.vue
View File

@@ -42,6 +42,7 @@
ref="messageInput"
v-model="localMessage"
@keydown="handleKeydown"
@focus="autoResize"
:placeholder="translatedPlaceholder"
rows="1"
:disabled="isLoading"
@@ -50,10 +51,6 @@
:class="{ 'over-limit': isOverLimit }"
></textarea>
<!-- Character counter -->
<div v-if="maxLength" class="character-counter" :class="{ 'over-limit': isOverLimit }">
{{ characterCount }}/{{ maxLength }}
</div>
</div>
<!-- Input actions -->
@@ -142,12 +139,8 @@ export default {
};
},
computed: {
characterCount() {
return this.localMessage.length;
},
isOverLimit() {
return this.characterCount > this.maxLength;
return this.localMessage.length > this.maxLength;
},
hasFormData() {
@@ -239,12 +232,15 @@ export default {
if (this.formData) {
console.log('FormData bij mount:', JSON.stringify(this.formData));
}
// Herbereken bij viewport-wijziging (bv. rotatie op mobiel)
window.addEventListener('resize', this.autoResize, { passive: true });
},
beforeUnmount() {
// Verwijder event listener bij unmount met de benoemde handler
if (this.languageChangeHandler) {
document.removeEventListener('language-changed', this.languageChangeHandler);
}
window.removeEventListener('resize', this.autoResize);
},
methods: {
handleLanguageChange(event) {
@@ -285,6 +281,8 @@ export default {
} finally {
// Reset de vertaling vlag
this.isTranslating = false;
// Herbereken hoogte na vertaling
this.$nextTick(this.autoResize);
}
},
@@ -465,9 +463,9 @@ export default {
.message-input {
width: 100%;
min-height: 40px;
padding: 10px 60px 10px 15px; /* Meer rechter padding voor character counter */
padding: 10px 15px 10px 15px; /* counter verwijderd -> rechter padding omlaag */
border: 1px solid #ddd;
border-radius: 20px;
border-radius: 10px;
resize: none;
outline: none;
transition: border-color 0.2s;
@@ -478,36 +476,18 @@ export default {
color: var(--human-message-text-color);
/* Box-sizing om padding correct te berekenen */
box-sizing: border-box;
/* Laat intern scrollen toe bij >120px, maar verberg scrollbar visueel */
overflow: auto;
-webkit-overflow-scrolling: touch; /* soepel scrollen op iOS */
scrollbar-width: none; /* Firefox: verberg scrollbar */
}
/* Character counter */
.character-counter {
position: absolute;
right: 15px;
bottom: 12px;
font-size: 12px;
color: var(--human-message-text-color);
opacity: 0.7;
pointer-events: none; /* Voorkom dat deze de textarea verstoort */
}
/* Character counter wordt rood bij overschrijding */
.character-counter.over-limit {
color: #ff4d4f;
font-weight: bold;
}
/* Verberg character counter op mobile */
@media (max-width: 768px) {
.character-counter {
/* WebKit/Chromium: scrollbar verbergen */
.message-input::-webkit-scrollbar {
display: none;
}
.message-input {
padding-right: 15px; /* Verminder van 60px naar 15px omdat counter weg is */
}
}
/* Input actions */
.input-actions {
display: flex;

187
eveai_chat_client/static/assets/vue-components/ChatMessage.vue
View File

@@ -1,15 +1,15 @@
<template>
<div :class="getMessageClass()" :data-message-id="message.id">
<!-- Normal text messages -->
<template v-if="message.type === 'text'">
<div class="message-content" style="width: 100%;">
<!-- EveAI Logo voor AI berichten - links boven, half buiten de bubbel -->
<!-- EveAI Logo buiten de scroller, vast aan de bubble -->
<img
v-if="message.sender === 'ai'"
:src="staticUrl('/assets/img/eveai_logo.svg')"
alt="EveAI"
class="ai-message-logo"
/>
<!-- Normal text messages -->
<template v-if="message.type === 'text'">
<div class="message-content" style="width: 100%;" ref="messageContent">
<!-- Voortgangstracker voor AI berichten met task_id - ALLEEN VOOR LAATSTE AI MESSAGE -->
<progress-tracker
v-if="message.sender === 'ai' && message.taskId && isLatestAiMessage"
@@ -102,13 +102,6 @@
<!-- Error messages -->
<template v-else-if="message.type === 'error'">
<div class="message-content error-content">
<!-- EveAI Logo voor AI berichten - links boven, half buiten de bubbel -->
<img
v-if="message.sender === 'ai'"
:src="staticUrl('/assets/img/eveai_logo.svg')"
alt="EveAI"
class="ai-message-logo"
/>
<div class="form-error">
{{ message.content }}
</div>
@@ -120,14 +113,7 @@
<!-- Other message types -->
<template v-else>
<div class="message-content">
<!-- EveAI Logo voor AI berichten - links boven, half buiten de bubbel -->
<img
v-if="message.sender === 'ai'"
:src="staticUrl('/assets/img/eveai_logo.svg')"
alt="EveAI"
class="ai-message-logo"
/>
<div class="message-content" ref="messageContent">
<div class="message-text" v-html="formatMessage(message.content)"></div>
</div>
</template>
@@ -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;
}
});
},
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; }
}
}
</style>

70
eveai_chat_client/static/assets/vue-components/DynamicForm.vue
View File

@@ -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;

11
eveai_chat_client/static/assets/vue-components/FormMessage.vue
View File

@@ -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);
}
</style>

4
eveai_chat_client/static/assets/vue-components/MessageHistory.vue
View File

@@ -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;

20
nginx/frontend_src/js/chat-client.js
View File

@@ -161,19 +161,37 @@ 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);