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

- Refinement of the chat client to have better visible clues for user vs chatbot messages

Browse Source 
- Introduction of interview_phase and normal phase in TRAICIE_SELECTION_SPECIALIST to make interaction with bot more human.
- More and random humanised messages to TRAICIE_SELECTION_SPECIALIST
This commit is contained in:
Josako
2025-08-02 16:36:41 +02:00
parent 998ddf4c03
commit 9a88582fff
50 changed files with 2064 additions and 384 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -3,6 +3,13 @@
<!-- 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 -->
<img
v-if="message.sender === 'ai'"
src="/static/assets/img/eveai_logo.svg"
alt="EveAI"
class="ai-message-logo"
/>
<!-- Voortgangstracker voor AI berichten met task_id - ALLEEN VOOR LAATSTE AI MESSAGE -->
<progress-tracker
v-if="message.sender === 'ai' && message.taskId && isLatestAiMessage"
@@ -95,6 +102,13 @@
<!-- 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="/static/assets/img/eveai_logo.svg"
alt="EveAI"
class="ai-message-logo"
/>
<div class="form-error">
{{ message.content }}
</div>
@@ -107,6 +121,13 @@
<!-- 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="/static/assets/img/eveai_logo.svg"
alt="EveAI"
class="ai-message-logo"
/>
<div class="message-text" v-html="formatMessage(message.content)"></div>
</div>
</template>
@@ -304,6 +325,11 @@ export default {
getMessageClass() {
let classes = `message ${this.message.sender}`;
// Add 'has-form' class for user messages with formulieren
if (this.message.sender === 'user' && this.hasMeaningfulFormValues(this.message)) {
classes += ' has-form';
}
// Add class for temporarily positioned AI messages
if (this.message.isTemporarilyAtBottom) {
classes += ' temporarily-at-bottom';
@@ -343,10 +369,16 @@ export default {
margin-right: auto;
}
/* User messages with forms get fixed width of 90% */
.message.user.has-form {
width: 90%;
max-width: none;
}
/* Styling for temporarily positioned AI messages */
.message.ai.temporarily-at-bottom {
background-color: var(--active-background-color);
color: var(--active-text-color);
background-color: var(--ai-message-background);
color: var(--ai-message-text-color);
opacity: 0.9;
border-radius: 8px;
padding: 8px;
@@ -355,24 +387,24 @@ export default {
/* 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);
background: var(--ai-message-background);
color: var(--ai-message-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);
background: var(--ai-message-background) !important;
color: var(--ai-message-text-color) !important;
border: 1px solid var(--ai-message-text-color);
border-radius: 8px;
padding: 12px;
}
/* Active styling for messages in input area */
.message.input-area .message-content {
background-color: var(--active-background-color);
color: var(--active-text-color);
background-color: var(--ai-message-background);
color: var(--ai-message-text-color);
border-radius: 8px;
padding: 12px;
}
@@ -382,10 +414,30 @@ export default {
font-size: 14px;
}
/* EveAI Logo styling voor AI berichten */
.ai-message-logo {
position: absolute;
top: -20px;
left: -20px;
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(--active-text-color);
color: var(--human-message-text-color);
padding: 15px;
font-family: inherit;
}
@@ -425,11 +477,11 @@ export default {
width: 100%;
padding: 6px;
border-radius: 4px;
border: 1px solid var(--active-text-color);
border: 1px solid var(--human-message-text-color);
font-family: Arial, sans-serif;
font-size: 14px;
background-color: var(--active-background-color);
color: var(--active-text-color);
background-color: var(--human-message-background);
color: var(--human-message-text-color);
}
.form-result-table textarea.form-textarea {
@@ -548,6 +600,11 @@ export default {
max-width: 95%;
}
/* User messages with forms get fixed width of 95% on mobile */
.message.user.has-form {
width: 95%;
}
.form-result-table td:first-child {
width: 40%;
}