fix

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;
 }

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"
+                <button {% if not IsLogin or not HaveKey %}style="display: none;" {%endif%}
-                    onclick="clearTextArea()" id="clear-button" hx-post="/clearChat" hx-swap="outerHTML"
+                    class="button is-small to-reduce-opacity" onclick="clearTextArea()" id="clear-button"
-                    hx-target="#chat-container" title="Clear chat">
+                    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);
 

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">

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>

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"
+        <button class="button is-small {% if not AnyExists %} is-danger{% endif %} to-reduce-opacity"
-            aria-controls="dropdown-menu3" onclick="this.parentElement.parentElement.classList.toggle('is-active')">
+            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>

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>