From 10add11ba226f25aef3cff87a891076c0aeed9cb Mon Sep 17 00:00:00 2001
From: Adrien <adrien.bouvais.pro@gmail.com>
Date: Sat, 25 May 2024 18:29:54 +0200
Subject: [PATCH] fix

---
 static/style.css                         |  3 +--
 views/chat.html                          | 20 +++++++++++++++++---
 views/partials/popover-conversation.html |  2 +-
 views/partials/popover-models.html       |  2 +-
 views/partials/popover-settings.html     |  5 +++--
 views/partials/popover-usage.html        |  2 +-
 6 files changed, 24 insertions(+), 10 deletions(-)

diff --git a/static/style.css b/static/style.css
index 9a7ef81..706e1e1 100644
--- a/static/style.css
+++ b/static/style.css
@@ -1,5 +1,5 @@
 body {
-    padding-bottom: 150px;
+    padding-bottom: 155px;
 }
 
 html {
@@ -73,7 +73,6 @@ html {
 
 #chat-input-textarea {
     width: 100%;
-    padding-right: 140px;
     /* Adjust this value based on the button and dropdown width */
     box-sizing: border-box;
 }
diff --git a/views/chat.html b/views/chat.html
index f90a5e9..c789346 100644
--- a/views/chat.html
+++ b/views/chat.html
@@ -12,9 +12,9 @@
                 <hx hx-get="/loadUsageKPI" hx-trigger="load" hx-swap="outerHTML" hx-target="this"></hx>
                 <hx hx-get="/loadConversationSelection" hx-trigger="load" hx-swap="outerHTML" hx-target="this"></hx>
                 <hx hx-get="/loadModelSelection" hx-trigger="load" hx-swap="outerHTML" hx-target="this"></hx>
-                <button {% if not IsLogin or not HaveKey %}style="display: none;" {%endif%} class="button is-small"
-                    onclick="clearTextArea()" id="clear-button" hx-post="/clearChat" hx-swap="outerHTML"
-                    hx-target="#chat-container" title="Clear chat">
+                <button {% if not IsLogin or not HaveKey %}style="display: none;" {%endif%}
+                    class="button is-small to-reduce-opacity" onclick="clearTextArea()" id="clear-button"
+                    hx-post="/clearChat" hx-swap="outerHTML" hx-target="#chat-container" title="Clear chat">
                     <span class="icon">
                         <i class="fa-solid fa-broom"></i>
                     </span>
@@ -39,6 +39,20 @@
 </div>
 
 <script>
+    document.getElementById('chat-input-textarea').addEventListener('focus', function () {
+        var buttons = document.getElementsByClassName('to-reduce-opacity');
+        for (var i = 0; i < buttons.length; i++) {
+            buttons[i].style.opacity = 0.2;
+        }
+    });
+
+    document.getElementById('chat-input-textarea').addEventListener('blur', function () {
+        var buttons = document.getElementsByClassName('to-reduce-opacity');
+        for (var i = 0; i < buttons.length; i++) {
+            buttons[i].style.opacity = 1;
+        }
+    });
+
     const textarea = document.querySelector('#chat-input-textarea');
     textarea.addEventListener('keydown', handleTextareaKeydown);
 
diff --git a/views/partials/popover-conversation.html b/views/partials/popover-conversation.html
index 0621247..3876657 100644
--- a/views/partials/popover-conversation.html
+++ b/views/partials/popover-conversation.html
@@ -1,6 +1,6 @@
 <div class="dropdown is-up is-right {% if IsActive %} is-active {% endif %}" id="conversation-dropdown">
     <div class="dropdown-trigger">
-        <button class="button is-small" aria-haspopup="true" aria-controls="dropdown-menu3"
+        <button class="button is-small to-reduce-opacity" aria-haspopup="true" aria-controls="dropdown-menu3"
             hx-get="/refreshConversationSelection" hx-target="#conversation-dropdown" hx-swap="outerHTML"
             hx-vals="js:{IsActive: document.getElementById('conversation-dropdown').classList.contains('is-active')}">
             <span class="icon">
diff --git a/views/partials/popover-models.html b/views/partials/popover-models.html
index d49c901..9c9e015 100644
--- a/views/partials/popover-models.html
+++ b/views/partials/popover-models.html
@@ -1,6 +1,6 @@
 <div class="dropdown is-up is-right" id="models-dropdown">
     <div class="dropdown-trigger">
-        <button class="button is-small" aria-haspopup="true" aria-controls="dropdown-menu3"
+        <button class="button is-small to-reduce-opacity" aria-haspopup="true" aria-controls="dropdown-menu3"
             onclick="this.parentElement.parentElement.classList.toggle('is-active')">
             <span class="icon"><i class="fa-solid fa-robot"></i></span>
         </button>
diff --git a/views/partials/popover-settings.html b/views/partials/popover-settings.html
index a36ca08..ed52d68 100644
--- a/views/partials/popover-settings.html
+++ b/views/partials/popover-settings.html
@@ -1,7 +1,8 @@
 <div class="dropdown is-up is-right" id="settings-dropdown">
     <div class="dropdown-trigger">
-        <button class="button is-small {% if not AnyExists %} is-danger{% endif %}" aria-haspopup="true"
-            aria-controls="dropdown-menu3" onclick="this.parentElement.parentElement.classList.toggle('is-active')">
+        <button class="button is-small {% if not AnyExists %} is-danger{% endif %} to-reduce-opacity"
+            aria-haspopup="true" aria-controls="dropdown-menu3"
+            onclick="this.parentElement.parentElement.classList.toggle('is-active')">
             <span class="icon"><i class="fa-solid fa-bars"></i></i></span>
         </button>
     </div>
diff --git a/views/partials/popover-usage.html b/views/partials/popover-usage.html
index 9a64640..2726166 100644
--- a/views/partials/popover-usage.html
+++ b/views/partials/popover-usage.html
@@ -1,6 +1,6 @@
 <div class="dropdown is-up is-right {% if IsActive %} is-active{% endif %}" id="usage-dropdown">
     <div class="dropdown-trigger">
-        <button class="button is-small" aria-haspopup="true" aria-controls="dropdown-menu3"
+        <button class="button is-small to-reduce-opacity" aria-haspopup="true" aria-controls="dropdown-menu3"
             onclick="this.parentElement.parentElement.classList.toggle('is-active')">
             <span class="icon"><i class="fa-regular fa-money-bill-1"></i></span>
         </button>