From 7941b12d50cda004c5b841b68a6c9bbd247768e5 Mon Sep 17 00:00:00 2001
From: Debanjum Singh Solanky <debanjum@gmail.com>
Date: Fri, 6 Sep 2024 12:32:15 -0700
Subject: [PATCH] Toggle speak, send buttons based on chat input text entered
 on Desktop

---
 src/interface/desktop/chat.html | 27 +++++++++++++++++++++------
 1 file changed, 21 insertions(+), 6 deletions(-)

diff --git a/src/interface/desktop/chat.html b/src/interface/desktop/chat.html
index 859e2c07..16119bcf 100644
--- a/src/interface/desktop/chat.html
+++ b/src/interface/desktop/chat.html
@@ -98,9 +98,9 @@
             autoResize();
             document.getElementById("chat-input").setAttribute("disabled", "disabled");
 
-            let chat_body = document.getElementById("chat-body");
+            let chatBody = document.getElementById("chat-body");
 
-            let conversationID = chat_body.dataset.conversationId;
+            let conversationID = chatBody.dataset.conversationId;
             let hostURL = await window.hostURLAPI.getURL();
             const khojToken = await window.tokenAPI.getToken();
             const headers = { 'Authorization': `Bearer ${khojToken}` };
@@ -109,14 +109,14 @@
                 let response = await fetch(`${hostURL}/api/chat/sessions`, { method: "POST", headers });
                 let data = await response.json();
                 conversationID = data.conversation_id;
-                chat_body.dataset.conversationId = conversationID;
+                chatBody.dataset.conversationId = conversationID;
                 await refreshChatSessionsPanel();
             }
 
             let newResponseEl = document.createElement("div");
             newResponseEl.classList.add("chat-message", "khoj");
             newResponseEl.attributes["data-meta"] = "🏮 Khoj at " + formatDate(new Date());
-            chat_body.appendChild(newResponseEl);
+            chatBody.appendChild(newResponseEl);
 
             let newResponseTextEl = document.createElement("div");
             newResponseTextEl.classList.add("chat-message-text", "khoj");
@@ -144,6 +144,9 @@
                 rawQuery: query,
                 isVoice: isVoice,
             }
+            // Reset toggle to show speak and hide send button
+            document.getElementById("speak-button").style.display = "block";
+            document.getElementById("send-button").style.display = "none";
 
             // Call Khoj chat API
             let chatApi = `${hostURL}/api/chat?q=${encodeURIComponent(query)}&conversation_id=${conversationID}&stream=true&client=desktop`;
@@ -218,6 +221,18 @@
                 chatInput.classList.remove("option-enabled");
             }
 
+            // Toggle visibility of speak and send buttons
+            let speakButton = document.getElementById("speak-button");
+            let sendButton = document.getElementById("send-button");
+
+            if (chatInput.value.trim().length > 0) {
+                speakButton.style.display = "none";
+                sendButton.style.display = "block";
+            } else {
+                speakButton.style.display = "block";
+                sendButton.style.display = "none";
+            }
+
             autoResize();
         }
 
@@ -853,7 +868,7 @@
                                 <path d="M5 6.5A1.5 1.5 0 0 1 6.5 5h3A1.5 1.5 0 0 1 11 6.5v3A1.5 1.5 0 0 1 9.5 11h-3A1.5 1.5 0 0 1 5 9.5v-3z"/>
                             </svg>
                         </button>
-                        <button id="send-button" class="input-row-button" alt="Send message">
+                        <button id="send-button" class="input-row-button" alt="Send message" style="display: none;">
                             <svg id="send-button-img" onclick="chat()" class="input-row-button-img" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                                 <path fill-rule="evenodd" d="M1 8a7 7 0 1 0 14 0A7 7 0 0 0 1 8zm15 0A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-7.5 3.5a.5.5 0 0 1-1 0V5.707L5.354 7.854a.5.5 0 1 1-.708-.708l3-3a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1-.708.708L8.5 5.707V11.5z"/>
                             </svg>
@@ -1069,7 +1084,7 @@
         }
         #input-row {
             display: grid;
-            grid-template-columns: auto 32px 40px;
+            grid-template-columns: auto 40px;
             grid-column-gap: 10px;
             grid-row-gap: 10px;
             background: #f9fafc;