klbr/khoj
1
0
Fork 0
mirror of https://github.com/khoaliber/khoj.git synced 2026-03-02 21:19:12 +00:00
Code Issues Packages Projects Releases Wiki Activity

Toggle speak, send buttons based on chat input text entered on Desktop

Browse Source
This commit is contained in:
Debanjum Singh Solanky
2024-09-06 12:32:15 -07:00
parent b5f6550de2
commit 7941b12d50
1 changed files with 21 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
src/interface/desktop/chat.html
View File

@@ -98,9 +98,9 @@
autoResize(); autoResize();
document.getElementById("chat-input").setAttribute("disabled", "disabled"); 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(); let hostURL = await window.hostURLAPI.getURL();
const khojToken = await window.tokenAPI.getToken(); const khojToken = await window.tokenAPI.getToken();
const headers = { 'Authorization': `Bearer ${khojToken}` }; const headers = { 'Authorization': `Bearer ${khojToken}` };
@@ -109,14 +109,14 @@
let response = await fetch(`${hostURL}/api/chat/sessions`, { method: "POST", headers }); let response = await fetch(`${hostURL}/api/chat/sessions`, { method: "POST", headers });
let data = await response.json(); let data = await response.json();
conversationID = data.conversation_id; conversationID = data.conversation_id;
chat_body.dataset.conversationId = conversationID; chatBody.dataset.conversationId = conversationID;
await refreshChatSessionsPanel(); await refreshChatSessionsPanel();
} }
let newResponseEl = document.createElement("div"); let newResponseEl = document.createElement("div");
newResponseEl.classList.add("chat-message", "khoj"); newResponseEl.classList.add("chat-message", "khoj");
newResponseEl.attributes["data-meta"] = "🏮 Khoj at " + formatDate(new Date()); newResponseEl.attributes["data-meta"] = "🏮 Khoj at " + formatDate(new Date());
chat_body.appendChild(newResponseEl); chatBody.appendChild(newResponseEl);
let newResponseTextEl = document.createElement("div"); let newResponseTextEl = document.createElement("div");
newResponseTextEl.classList.add("chat-message-text", "khoj"); newResponseTextEl.classList.add("chat-message-text", "khoj");
@@ -144,6 +144,9 @@
rawQuery: query, rawQuery: query,
isVoice: isVoice, 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 // Call Khoj chat API
let chatApi = `${hostURL}/api/chat?q=${encodeURIComponent(query)}&conversation_id=${conversationID}&stream=true&client=desktop`; let chatApi = `${hostURL}/api/chat?q=${encodeURIComponent(query)}&conversation_id=${conversationID}&stream=true&client=desktop`;
@@ -218,6 +221,18 @@
chatInput.classList.remove("option-enabled"); 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(); 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"/> <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> </svg>
</button> </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"> <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"/> <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> </svg>
@@ -1069,7 +1084,7 @@
} }
#input-row { #input-row {
display: grid; display: grid;
grid-template-columns: auto 32px 40px; grid-template-columns: auto 40px;
grid-column-gap: 10px; grid-column-gap: 10px;
grid-row-gap: 10px; grid-row-gap: 10px;
background: #f9fafc; background: #f9fafc;