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

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