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

- Layout improvements for the Chat client

Browse Source
This commit is contained in:
Josako
2025-07-23 16:02:11 +02:00
parent f16ed85e82
commit ccc1a2afb8
19 changed files with 472 additions and 277 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -30,7 +30,7 @@
min-height: 0; /* Belangrijk voor nested flexbox */
margin-bottom: 20px; /* Ruimte tussen messages en input */
border-radius: 15px;
background: rgba(255,255,255,0.1);
background: var(--history-background);
backdrop-filter: blur(10px);
box-shadow: 0 4px 20px rgba(0,0,0,0.1);
width: 100%;
@@ -94,7 +94,8 @@
align-items: flex-end;
gap: 12px;
padding: 20px;
background: white;
background: var(--active-background-color);
color: var(--active-text-color);
border-radius: 15px;
box-shadow: 0 2px 15px rgba(0,0,0,0.1);
border: 1px solid rgba(0,0,0,0.05);
@@ -105,32 +106,6 @@
position: relative;
}
.message-input {
width: 100%;
min-height: 45px;
max-height: 120px;
padding: 12px 18px;
border: 1px solid #ddd;
border-radius: 25px;
resize: none;
font-family: inherit;
font-size: 14px;
line-height: 1.4;
outline: none;
transition: all 0.2s ease;
box-sizing: border-box;
}
.message-input:focus {
border-color: var(--primary-color);
box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.1);
}
.message-input.over-limit {
border-color: #dc3545;
background-color: rgba(220, 53, 69, 0.05);
}
.input-actions {
display: flex;
@@ -143,8 +118,8 @@
height: 45px;
border: none;
border-radius: 50%;
background: var(--primary-color);
color: white;
background: var(--active-background-color);
color: var(--active-text-color);
cursor: pointer;
display: flex;
align-items: center;
@@ -155,7 +130,8 @@
}
.send-btn:hover:not(:disabled) {
background: var(--secondary-color);
background: var(--active-text-color);
color: var(--active-background-color);
transform: scale(1.05);
box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}
@@ -230,12 +206,6 @@
font-size: 16px;
}
.message-input {
font-size: 16px; /* Voorkomt zoom op iOS */
padding: 10px 15px;
min-height: 40px;
}
.chat-component-container {
max-width: 100%; /* Op mobiel volledige breedte gebruiken */
}
@@ -261,9 +231,6 @@
}
/* Loading states */
.chat-input.loading .message-input {
opacity: 0.7;
}
.chat-input.loading .action-btn {
animation: pulse 1.5s infinite;
@@ -376,16 +343,16 @@
/* User message bubble styling */
.message.user .message-content {
background: rgba(0, 0, 0, 0.1);
color: white;
background: var(--history-user-message-background);
color: var(--history-message-text-color);
border-bottom-right-radius: 4px;
}
/* AI/Bot message bubble styling */
.message.ai .message-content,
.message.bot .message-content {
background: rgba(255, 255, 255, 0.1);
color: #212529;
background: var(--history-ai-message-background);
color: var(--history-message-text-color);
border-bottom-left-radius: 4px;
margin-right: 60px;
}

33
eveai_chat_client/static/assets/css/chat-input.css
View File

@@ -22,27 +22,6 @@
position: relative;
}
.message-input {
width: 100%;
min-height: 40px;
padding: 10px 40px 10px 15px;
border: 1px solid #ddd;
border-radius: 20px;
resize: none;
outline: none;
transition: border-color 0.2s;
font-family: Arial, sans-serif;
font-size: 14px;
}
.message-input:focus {
border-color: #0084ff;
}
.message-input.over-limit {
border-color: #ff4d4f;
}
/* Character counter */
.character-counter {
position: absolute;
@@ -106,15 +85,3 @@
100% { transform: rotate(360deg); }
}
/* Formulier in chat input */
.dynamic-form-container {
margin-bottom: 10px;
border: 1px solid #ddd;
border-radius: 8px;
padding: 15px 15px 5px 15px;
position: relative;
background-color: #f9f9f9;
box-shadow: 0 2px 4px rgba(0,0,0,0.05);
font-family: Arial, sans-serif;
font-size: 14px;
}

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

@@ -21,16 +21,6 @@
font-size: 14px;
}
/* Formulier styling */
.form-display {
margin: 15px 0;
border-radius: 8px;
background-color: rgba(245, 245, 245, 0.7);
padding: 15px;
border: 1px solid #e0e0e0;
font-family: inherit;
}
/* Tabel styling voor formulieren */
.form-result-table {
width: 100%;

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

@@ -1,33 +1,3 @@
/* Styling voor formulier in berichten */
.message .form-display {
margin-bottom: 12px;
border-radius: 8px;
background-color: rgba(245, 245, 245, 0.7);
padding: 12px;
border: 1px solid #e0e0e0;
}
.message.user .form-display {
background-color: rgba(255, 255, 255, 0.1);
}
.message.ai .form-display {
background-color: rgba(245, 245, 250, 0.7);
}
/* Styling voor formulieren in berichten */
.form-display {
margin-bottom: 10px;
border-radius: 8px;
padding: 12px;
background-color: rgba(0, 0, 0, 0.03);
border: 1px solid rgba(0, 0, 0, 0.1);
}
.user-form-values {
background-color: rgba(0, 123, 255, 0.05);
}
/* Speciale styling voor read-only formulieren in user messages */
.user-form .form-field {
margin-bottom: 6px !important;
@@ -35,7 +5,6 @@
.user-form .field-label {
font-weight: 500 !important;
color: #555 !important;
padding: 2px 0 !important;
}
@@ -69,7 +38,6 @@
.form-readonly .field-label {
font-weight: 500;
color: #555;
}
.form-readonly .field-value {

30
eveai_chat_client/static/assets/css/form.css
View File

@@ -1,11 +1,4 @@
/* Dynamisch formulier stijlen */
.dynamic-form-container {
margin-bottom: 15px;
border: 1px solid #e0e0e0;
border-radius: 8px;
overflow: hidden;
background-color: #f9f9f9;
}
.dynamic-form {
padding: 15px;
@@ -19,22 +12,6 @@
border-bottom: 1px solid #e0e0e0;
}
.form-icon {
margin-right: 10px;
width: 24px;
height: 24px;
display: flex;
align-items: center;
justify-content: center;
color: #555;
}
.form-title {
font-size: 1.2rem;
font-weight: 600;
color: #333;
}
.form-fields {
display: grid;
grid-template-columns: 1fr;
@@ -152,13 +129,6 @@
border-bottom: 1px solid #eee;
}
.field-label {
flex: 0 0 30%;
font-weight: 500;
color: #555;
padding-right: 10px;
}
.field-value {
flex: 1;
word-break: break-word;

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

@@ -1,4 +1,4 @@
<template>
active_text_color<template>
<div class="chat-app-container">
<!-- Message History - takes available space -->
<message-history

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

@@ -389,7 +389,8 @@ export default {
.chat-input-container {
width: 100%;
padding: 10px;
background-color: #fff;
background-color: var(--active-background-color);
color: var(--active-text-color);
border-top: 1px solid #e0e0e0;
font-family: Arial, sans-serif;
font-size: 14px;
@@ -405,12 +406,14 @@ export default {
.input-main {
flex: 1;
position: relative;
/* Zorg ervoor dat er ruimte is voor de verzendknop */
margin-right: 0;
}
.message-input {
width: 100%;
min-height: 40px;
padding: 10px 40px 10px 15px;
padding: 10px 60px 10px 15px; /* Meer rechter padding voor character counter */
border: 1px solid #ddd;
border-radius: 20px;
resize: none;
@@ -418,27 +421,26 @@ export default {
transition: border-color 0.2s;
font-family: Arial, sans-serif;
font-size: 14px;
}
.message-input:focus {
border-color: #0084ff;
}
.message-input.over-limit {
border-color: #ff4d4f;
/* Transparante achtergrond in plaats van wit */
background-color: transparent;
/* Box-sizing om padding correct te berekenen */
box-sizing: border-box;
}
/* Character counter */
.character-counter {
position: absolute;
right: 10px;
bottom: 10px;
right: 15px;
bottom: 12px;
font-size: 12px;
color: #999;
pointer-events: none; /* Voorkom dat deze de textarea verstoort */
}
/* Character counter wordt rood bij overschrijding */
.character-counter.over-limit {
color: #ff4d4f;
font-weight: bold;
}
/* Input actions */
@@ -446,6 +448,7 @@ export default {
display: flex;
align-items: center;
gap: 8px;
flex-shrink: 0; /* Voorkom dat de knop krimpt */
}
/* Verzendknop */
@@ -455,29 +458,36 @@ export default {
justify-content: center;
width: 40px;
height: 40px;
background-color: #0084ff;
color: white;
border: none;
background-color: var(--active-background-color);
color: var(--active-text-color);
border: 1px solid var(--active-text-color);
border-radius: 50%;
cursor: pointer;
transition: background-color 0.2s;
flex-shrink: 0; /* Voorkom dat de knop krimpt */
}
.send-btn:hover {
background-color: #0077e6;
background-color: var(--active-text-color);
color: var(--active-background-color);
}
.send-btn:disabled {
background-color: #ccc;
color: #666;
border-color: #ccc;
cursor: not-allowed;
}
.send-btn.form-mode {
background-color: #4caf50;
background-color: var(--active-background-color);
color: var(--active-text-color);
border-color: var(--active-text-color);
}
.send-btn.form-mode:hover {
background-color: #43a047;
background-color: var(--active-text-color);
color: var(--active-background-color);
}
/* Loading spinner */
@@ -490,17 +500,4 @@ export default {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
/* Formulier in chat input */
.dynamic-form-container {
margin-bottom: 10px;
border: 1px solid #ddd;
border-radius: 8px;
padding: 15px 15px 5px 15px;
position: relative;
background-color: #f9f9f9;
box-shadow: 0 2px 4px rgba(0,0,0,0.05);
font-family: Arial, sans-serif;
font-size: 14px;
}
</style>
</style>

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

@@ -3,9 +3,9 @@
<!-- Normal text messages -->
<template v-if="message.type === 'text'">
<div class="message-content" style="width: 100%;">
<!-- Voortgangstracker voor AI berichten met task_id - NU BINNEN DE BUBBLE -->
<!-- Voortgangstracker voor AI berichten met task_id - ALLEEN VOOR LAATSTE AI MESSAGE -->
<progress-tracker
v-if="message.sender === 'ai' && message.taskId"
v-if="message.sender === 'ai' && message.taskId && isLatestAiMessage"
:task-id="message.taskId"
:api-prefix="apiPrefix"
:is-latest-ai-message="isLatestAiMessage"
@@ -13,7 +13,6 @@
@specialist-complete="handleSpecialistComplete"
@specialist-error="handleSpecialistError"
></progress-tracker>
<!-- Form data display if available (alleen in user messages) -->
<div v-if="hasMeaningfulFormValues(message)" class="form-display user-form-values">
<dynamic-form
@@ -171,7 +170,10 @@ export default {
type: Boolean,
default: false
}
},
},
isInStickyArea: {
type: Boolean,
default: false },
emits: ['image-loaded', 'retry-message', 'specialist-complete', 'specialist-error'],
data() {
return {
@@ -304,6 +306,10 @@ export default {
classes += ' temporarily-at-bottom';
}
// Add class for messages in sticky area
if (this.isInStickyArea) {
classes += " sticky-area";
}
return classes;
}
}
@@ -330,8 +336,9 @@ export default {
/* Styling for temporarily positioned AI messages */
.message.ai.temporarily-at-bottom {
background-color: #f8f9fa;
border-left: 3px solid #007bff;
background-color: var(--active-background-color);
color: var(--active-text-color);
border-left: 3px solid var(--active-text-color);
opacity: 0.9;
border-radius: 8px;
padding: 8px;
@@ -339,6 +346,21 @@ export default {
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
/* Styling for messages in sticky area - override history colors with active colors */
.message.sticky-area .message-content {
background: var(--active-background-color);
color: var(--active-text-color);
}
/* Override message bubble colors for sticky area */
.message.sticky-area.user .message-content,
.message.sticky-area.ai .message-content {
background: var(--active-background-color) !important;
color: var(--active-text-color) !important;
border: 1px solid var(--active-text-color);
border-radius: 8px;
padding: 12px;
}
.message-content {
width: 100%;
font-family: Arial, sans-serif;
@@ -348,10 +370,8 @@ export default {
/* Formulier styling */
.form-display {
margin: 15px 0;
border-radius: 8px;
background-color: rgba(245, 245, 245, 0.7);
color: var(--active-text-color);
padding: 15px;
border: 1px solid #e0e0e0;
font-family: inherit;
}
@@ -390,10 +410,11 @@ export default {
width: 100%;
padding: 6px;
border-radius: 4px;
border: 1px solid #ddd;
border: 1px solid var(--active-text-color);
font-family: Arial, sans-serif;
font-size: 14px;
background-color: white;
background-color: var(--active-background-color);
color: var(--active-text-color);
}
.form-result-table textarea.form-textarea {

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

@@ -1,6 +1,6 @@
<template>
<div class="dynamic-form-container">
<div class="dynamic-form">
<div class="dynamic-form" :class="{ 'readonly': readOnly, 'edit': !readOnly }">
<!-- Form header with icon and title -->
<div v-if="formData.title || formData.name || formData.icon" class="form-header">
<div v-if="formData.icon" class="form-icon">
@@ -292,10 +292,7 @@ export default {
/* Dynamisch formulier stijlen */
.dynamic-form-container {
margin-bottom: 15px;
border: 1px solid #e0e0e0;
border-radius: 8px;
overflow: hidden;
background-color: #f9f9f9;
}
.dynamic-form {
@@ -307,7 +304,11 @@ export default {
align-items: center;
margin-bottom: 15px;
padding-bottom: 10px;
border-bottom: 1px solid #e0e0e0;
border-bottom: 1px solid var(--active-text-color);
}
.dynamic-form.readonly .form-header {
border-bottom: 1px solid var(--history-message-text-color);
}
.form-icon {
@@ -317,13 +318,21 @@ export default {
display: flex;
align-items: center;
justify-content: center;
color: #555;
color: var(--active-text-color);
}
.dynamic-form.readonly .form-icon {
color: var(--history-message-text-color);
}
.form-title {
font-size: 1.2rem;
font-weight: 600;
color: #333;
color: var(--active-text-color);
}
.dynamic-form.readonly .form-title {
color: var(--history-message-text-color);
}
.form-fields {
@@ -472,21 +481,31 @@ export default {
display: flex;
margin-bottom: 8px;
padding-bottom: 8px;
border-bottom: 1px solid #eee;
}
.dynamic-form.readonly .form-field-readonly {
border-bottom: 1px solid var(--history-message-text-color);
}
.field-label {
flex: 0 0 30%;
font-weight: 500;
color: #555;
padding-right: 10px;
}
.dynamic-form.readonly .field-label {
color: var(--history-message-text-color);
}
.field-value {
flex: 1;
word-break: break-word;
}
.dynamic-form.readonly .field-value {
color: var(--history-message-text-color);
}
.text-value {
white-space: pre-wrap;
}

3
eveai_chat_client/static/assets/vue-components/FormField.vue
View File

@@ -11,7 +11,7 @@
<!-- Container voor input velden -->
<div style="width: 100%;">
<!-- Context informatie indien aanwezig -->
<div v-if="field.context" class="field-context" style="margin-bottom: 8px; color: #666; background-color: #f8f9fa; padding: 8px; border-radius: 4px;">
<div v-if="field.context" class="field-context">
{{ field.context }}
</div>
@@ -381,7 +381,6 @@ export default {
margin-bottom: 8px;
font-size: 0.9rem;
color: #666;
background-color: #f8f9fa;
padding: 8px;
border-radius: 4px;
text-align: left;

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

@@ -160,19 +160,6 @@ export default {
background-color: rgba(245, 245, 250, 0.7);
}
/* Algemene form display styling */
.form-display {
margin-bottom: 10px;
border-radius: 8px;
padding: 12px;
background-color: rgba(0, 0, 0, 0.03);
border: 1px solid rgba(0, 0, 0, 0.1);
}
.user-form-values {
background-color: rgba(0, 123, 255, 0.05);
}
/* Speciale styling voor read-only formulieren in user messages */
.user-form .form-field {
margin-bottom: 6px !important;

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

@@ -42,7 +42,7 @@
:is-submitting-form="isSubmittingForm"
:api-prefix="apiPrefix"
:is-latest-ai-message="isLatestAiMessage(stickyAiMessage)"
@image-loaded="handleImageLoaded"
:is-in-sticky-area="true" @image-loaded="handleImageLoaded"
@specialist-complete="$emit('specialist-complete', $event)"
@specialist-error="$emit('specialist-error', $event)"
></chat-message>
@@ -296,7 +296,8 @@ export default {
flex-shrink: 0;
max-height: 30%; /* Takes max 30% of available space */
border-top: 1px solid #e0e0e0;
background-color: #f8f9fa;
background-color: var(--active-background-color);
color: var(--active-text-color);
padding: 10px;
overflow-y: auto;
box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.1);

6
eveai_chat_client/static/assets/vue-components/SideBarExplanation.vue
View File

@@ -76,14 +76,14 @@ watch(() => props.originalText, () => {
}
.explanation-loading {
color: var(--sidebar-color);
color: var(--markdown-text-color);
font-style: italic;
text-align: center;
padding: 20px;
}
.explanation-content {
color: var(--sidebar-color);
color: var(--markdown-text-color);
font-size: 0.9rem;
line-height: 1.5;
}
@@ -91,7 +91,7 @@ watch(() => props.originalText, () => {
.explanation-content :deep(h1),
.explanation-content :deep(h2),
.explanation-content :deep(h3) {
color: var(--sidebar-color);
color: var(--markdown-text-color);
margin-top: 1rem;
margin-bottom: 0.5rem;
}

23
eveai_chat_client/templates/base.html
View File

@@ -10,16 +10,31 @@
<!-- Custom theme colors from tenant settings -->
<style>
:root {
--primary-color: {{ customisation.primary_color|default('#007bff') }};
--secondary-color: {{ customisation.secondary_color|default('#6c757d') }};
--background-color: {{ customisation.background_color|default('#ffffff') }};
--text-color: {{ customisation.text_color|default('#212529') }};
/* Legacy support - keeping for backward compatibility */
--primary-color: {{ customisation.active_background_color|default('#ffffff') }};
--secondary-color: {{ customisation.active_text_color|default('#212529') }};
/* Sidebar customisation */
--sidebar-color: {{ customisation.sidebar_color|default('#f8f9fa') }};
--sidebar-background: {{ customisation.sidebar_background|default('#2c3e50') }};
/* Gradient customisation */
--gradient-start-color: {{ customisation.gradient_start_color|default('#f5f7fa') }};
--gradient-end-color: {{ customisation.gradient_end_color|default('#c3cfe2') }};
/* Markdown customisation */
--markdown-background-color: {{ customisation.markdown_background_color|default('transparent') }};
--markdown-text-color: {{ customisation.markdown_text_color|default('#ffffff') }};
/* Active elements customisation */
--active-background-color: {{ customisation.active_background_color|default('#ffffff') }};
--active-text-color: {{ customisation.active_text_color|default('#212529') }};
/* History customisation with alpha-based color manipulation */
--history-background: {{ customisation.history_background|default(10)|adjust_color_alpha }};
--history-user-message-background: {{ customisation.history_user_message_background|default(-10)|adjust_color_alpha }};
--history-ai-message-background: {{ customisation.history_ai_message_background|default(0)|adjust_color_alpha }};
--history-message-text-color: {{ customisation.history_message_text_color|default('#212529') }};
}
</style>