From fc3cae19860dba84f71bdc376d1dd841eeea85f2 Mon Sep 17 00:00:00 2001
From: Josako <pieter.laroy@flow-it.net>
Date: Wed, 23 Jul 2025 22:23:04 +0200
Subject: [PATCH] - Layout improvements for the Chat client - alignment of
 LanguageSelector

---
 common/utils/cache/translation_cache.py       |  4 +-
 .../static/assets/css/language-selector.css   | 49 -------------------
 .../assets/vue-components/ChatInput.vue       |  3 +-
 .../vue-components/LanguageSelector.vue       |  8 ++-
 nginx/frontend_src/js/chat-client.js          |  1 -
 5 files changed, 7 insertions(+), 58 deletions(-)

diff --git a/common/utils/cache/translation_cache.py b/common/utils/cache/translation_cache.py
index c2718f5..573f260 100644
--- a/common/utils/cache/translation_cache.py
+++ b/common/utils/cache/translation_cache.py
@@ -73,7 +73,7 @@ class TranslationCacheHandler(CacheHandler[TranslationCache]):
             'prompt_tokens': translation.prompt_tokens,
             'completion_tokens': translation.completion_tokens,
             'time_elapsed': 0,
-            'interaction_type': 'LLM'
+            'interaction_type': 'TRANSLATION-CACHE'
         }
         current_event.log_llm_metrics(metrics)
 
@@ -121,7 +121,7 @@ class TranslationCacheHandler(CacheHandler[TranslationCache]):
                     'prompt_tokens': existing_translation.prompt_tokens,
                     'completion_tokens': existing_translation.completion_tokens,
                     'time_elapsed': 0,
-                    'interaction_type': 'TRANSLATION'
+                    'interaction_type': 'TRANSLATION-DB'
                 }
                 current_event.log_llm_metrics(metrics)
                 db.session.commit()
diff --git a/eveai_chat_client/static/assets/css/language-selector.css b/eveai_chat_client/static/assets/css/language-selector.css
index 8776443..8b13789 100644
--- a/eveai_chat_client/static/assets/css/language-selector.css
+++ b/eveai_chat_client/static/assets/css/language-selector.css
@@ -1,50 +1 @@
-/* Styling voor de taalselector */
 
-.sidebar-language-section {
-    padding: 10px 15px;
-    margin-bottom: 15px;
-}
-
-#language-selector-container {
-    display: flex;
-    flex-direction: column;
-    padding: 10px;
-    background-color: rgba(255, 255, 255, 0.1);
-    border-radius: 5px;
-    margin: 10px 0;
-}
-
-#language-selector-container label {
-    margin-bottom: 5px;
-    color: var(--sidebar-color);
-    font-size: 0.9rem;
-    font-weight: 500;
-}
-
-.language-selector {
-    padding: 8px 12px;
-    border: 1px solid rgba(255, 255, 255, 0.2);
-    border-radius: 4px;
-    background-color: rgba(0, 0, 0, 0.2);
-    color: var(--sidebar-color);
-    font-size: 0.9rem;
-    cursor: pointer;
-    transition: all 0.2s ease;
-    width: 100%;
-}
-
-.language-selector:hover {
-    background-color: rgba(0, 0, 0, 0.3);
-}
-
-.language-selector:focus {
-    outline: none;
-    border-color: var(--primary-color);
-    box-shadow: 0 0 0 2px rgba(var(--primary-color-rgb), 0.3);
-}
-
-.language-selector option {
-    background-color: #2c3e50;
-    color: white;
-    padding: 8px;
-}
diff --git a/eveai_chat_client/static/assets/vue-components/ChatInput.vue b/eveai_chat_client/static/assets/vue-components/ChatInput.vue
index c322956..0b1a33b 100644
--- a/eveai_chat_client/static/assets/vue-components/ChatInput.vue
+++ b/eveai_chat_client/static/assets/vue-components/ChatInput.vue
@@ -453,7 +453,8 @@ export default {
     font-family: Arial, sans-serif;
     font-size: 14px;
     /* Transparante achtergrond in plaats van wit */
-    background-color: transparent;
+    background-color: var(--active-background-color);
+    color: var(--active-text-color);
     /* Box-sizing om padding correct te berekenen */
     box-sizing: border-box;
 }
diff --git a/eveai_chat_client/static/assets/vue-components/LanguageSelector.vue b/eveai_chat_client/static/assets/vue-components/LanguageSelector.vue
index 2777f87..7b2c08a 100644
--- a/eveai_chat_client/static/assets/vue-components/LanguageSelector.vue
+++ b/eveai_chat_client/static/assets/vue-components/LanguageSelector.vue
@@ -159,10 +159,9 @@ export default {
 #language-selector-container {
     display: flex;
     flex-direction: column;
-    padding: 10px;
+    padding: 15px;
     background-color: rgba(255, 255, 255, 0.1);
     border-radius: 5px;
-    margin: 10px 0;
 }
 
 #language-selector-container label {
@@ -173,7 +172,6 @@ export default {
 }
 
 .language-selector {
-    padding: 8px 12px;
     font-size: 0.9rem;
     cursor: pointer;
     transition: all 0.2s ease;
@@ -187,7 +185,7 @@ export default {
 .language-selector:focus {
     outline: none;
     border-color: var(--primary-color);
-    box-shadow: 0 0 0 2px rgba(var(--primary-color-rgb), 0.3);
+    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.3);
 }
 
 .language-selector option {
@@ -219,7 +217,7 @@ export default {
 .language-select:focus {
     outline: none;
     border-color: var(--primary-color);
-    box-shadow: 0 0 0 2px rgba(var(--primary-color-rgb), 0.3);
+    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.3);
 }
 
 .language-select option {
diff --git a/nginx/frontend_src/js/chat-client.js b/nginx/frontend_src/js/chat-client.js
index 357f809..02e8161 100644
--- a/nginx/frontend_src/js/chat-client.js
+++ b/nginx/frontend_src/js/chat-client.js
@@ -6,7 +6,6 @@ import '../../../eveai_chat_client/static/assets/css/chat-input.css';
 import '../../../eveai_chat_client/static/assets/css/chat-message.css';
 import '../../../eveai_chat_client/static/assets/css/form.css';
 import '../../../eveai_chat_client/static/assets/css/form-message.css';
-import '../../../eveai_chat_client/static/assets/css/language-selector.css';
 
 // Dependencies
 import { createApp, version } from 'vue';