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

- Adaptation of the form message layout, in such a way that labels are shown on top of their values iso left, allowing a decent rendering on mobile devices

Browse Source 
- refactoring message-content CSS
This commit is contained in:
Josako
2025-09-22 22:24:46 +02:00
parent b6512b2d8c
commit 61ae9c3174
7 changed files with 164 additions and 86 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 {

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

@@ -218,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 */

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 */

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

@@ -383,8 +383,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,9 +421,18 @@ 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 */
@@ -448,12 +457,26 @@ export default {
/* 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 +635,65 @@ 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;
}
}
@media (max-width: 480px) {
.message-content {
max-width: 90%;
margin-left: 20px !important;
margin-right: 20px !important;
}
}
</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>