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

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 {