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

- Ensuring good display of the eveai logo in the mobile version.

Browse Source
This commit is contained in:
Josako
2025-09-23 06:55:31 +02:00
parent 3b23be0ea4
commit 44e5dd5d02
1 changed files with 24 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,15 +1,15 @@
<template>
<div :class="getMessageClass()" :data-message-id="message.id">
<!-- EveAI Logo buiten de scroller, vast aan de bubble -->
<img
v-if="message.sender === 'ai'"
:src="staticUrl('/assets/img/eveai_logo.svg')"
alt="EveAI"
class="ai-message-logo"
/>
<!-- Normal text messages -->
<template v-if="message.type === 'text'">
<div class="message-content" style="width: 100%;" ref="messageContent">
<!-- EveAI Logo voor AI berichten - links boven, half buiten de bubbel -->
<img
v-if="message.sender === 'ai'"
:src="staticUrl('/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"
@@ -102,13 +102,6 @@
<!-- 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="staticUrl('/assets/img/eveai_logo.svg')"
alt="EveAI"
class="ai-message-logo"
/>
<div class="form-error">
{{ message.content }}
</div>
@@ -121,13 +114,6 @@
<!-- Other message types -->
<template v-else>
<div class="message-content" ref="messageContent">
<!-- EveAI Logo voor AI berichten - links boven, half buiten de bubbel -->
<img
v-if="message.sender === 'ai'"
:src="staticUrl('/assets/img/eveai_logo.svg')"
alt="EveAI"
class="ai-message-logo"
/>
<div class="message-text" v-html="formatMessage(message.content)"></div>
</div>
</template>
@@ -459,25 +445,23 @@ export default {
}
/* EveAI Logo styling voor AI berichten */
/* Position relative on the message container to anchor the logo (sibling of .message-content) */
.message.ai {
position: relative;
}
.ai-message-logo {
position: absolute;
top: -20px;
left: -20px;
left: -5px;
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 {
color: var(--human-message-text-color);
@@ -710,6 +694,18 @@ export default {
.message.bot .message-content {
margin-right: 40px;
}
/* Mobile: place logo inside bubble and prevent overlap with text */
.message.ai .ai-message-logo {
top: -12px;
left: 8px;
width: 24px;
height: 24px;
}
.message.ai .message-content {
/* Reserve space for the in-bubble logo */
padding-top: 1px; /* 24px logo + margins */
padding-left: 1px;
}
}
@media (max-width: 480px) {