From ec3b837d00c6ec9ec7e5f4b4bf07f358f5c546fb Mon Sep 17 00:00:00 2001
From: Debanjum Singh Solanky <debanjum@gmail.com>
Date: Sat, 20 Jan 2024 21:28:20 +0530
Subject: [PATCH] Send audio message in 2-clicks on desktop to avoid holding
 down mic button

---
 src/interface/desktop/chat.html          | 8 ++++----
 src/interface/obsidian/src/chat_modal.ts | 8 ++++----
 src/khoj/interface/web/chat.html         | 8 ++++----
 3 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/src/interface/desktop/chat.html b/src/interface/desktop/chat.html
index 01fbbfdc..35605b64 100644
--- a/src/interface/desktop/chat.html
+++ b/src/interface/desktop/chat.html
@@ -749,14 +749,14 @@
             };
 
             // Toggle recording
-            if (!mediaRecorder || mediaRecorder.state === 'inactive') {
+            if (!mediaRecorder || mediaRecorder.state === 'inactive' || event.type === 'touchstart') {
                 navigator.mediaDevices
-                .getUserMedia({ audio: true })
+                ?.getUserMedia({ audio: true })
                 .then(handleRecording)
                 .catch((e) => {
                     flashStatusInChatInput("⛔️ Failed to access microphone");
                 });
-            } else if (mediaRecorder.state === 'recording') {
+            } else if (mediaRecorder.state === 'recording' || event.type === 'touchend' || event.type === 'touchcancel') {
                 mediaRecorder.stop();
                 mediaRecorder.stream.getTracks().forEach(track => track.stop());
                 mediaRecorder = null;
@@ -815,7 +815,7 @@
                 </button>
                 <textarea id="chat-input" class="option" oninput="onChatInput()" onkeydown=incrementalChat(event) autofocus="autofocus" placeholder="Message"></textarea>
                 <button id="speak-button" class="input-row-button"
-                        ontouchstart="speechToText(event)" ontouchend="speechToText(event)" onmousedown="speechToText(event)" onmouseup="speechToText(event)">
+                        ontouchstart="speechToText(event)" ontouchend="speechToText(event)" ontouchcancel="speechToText(event)" onmousedown="speechToText(event)">
                     <svg id="speak-button-img" class="input-row-button-img" alt="Transcribe" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                         <path d="M3.5 6.5A.5.5 0 0 1 4 7v1a4 4 0 0 0 8 0V7a.5.5 0 0 1 1 0v1a5 5 0 0 1-4.5 4.975V15h3a.5.5 0 0 1 0 1h-7a.5.5 0 0 1 0-1h3v-2.025A5 5 0 0 1 3 8V7a.5.5 0 0 1 .5-.5z"/>
                         <path d="M10 8a2 2 0 1 1-4 0V3a2 2 0 1 1 4 0v5zM8 0a3 3 0 0 0-3 3v5a3 3 0 0 0 6 0V3a3 3 0 0 0-3-3z"/>
diff --git a/src/interface/obsidian/src/chat_modal.ts b/src/interface/obsidian/src/chat_modal.ts
index dde29476..1b35f499 100644
--- a/src/interface/obsidian/src/chat_modal.ts
+++ b/src/interface/obsidian/src/chat_modal.ts
@@ -78,9 +78,9 @@ export class KhojChatModal extends Modal {
             },
         })
         transcribe.addEventListener('mousedown', async (event) => { await this.speechToText(event) });
-        transcribe.addEventListener('mouseup', async (event) => { await this.speechToText(event) });
         transcribe.addEventListener('touchstart', async (event) => { await this.speechToText(event) });
         transcribe.addEventListener('touchend', async (event) => { await this.speechToText(event) });
+        transcribe.addEventListener('touchcancel', async (event) => { await this.speechToText(event) });
         setIcon(transcribe, "mic");
 
         let send = inputRow.createEl("button", {
@@ -512,14 +512,14 @@ export class KhojChatModal extends Modal {
         };
 
         // Toggle recording
-        if (!this.mediaRecorder || this.mediaRecorder.state === 'inactive') {
+        if (!this.mediaRecorder || this.mediaRecorder.state === 'inactive' || event.type === 'touchstart') {
             navigator.mediaDevices
                 .getUserMedia({ audio: true })
-                .then(handleRecording)
+                ?.then(handleRecording)
                 .catch((e) => {
                     this.flashStatusInChatInput("⛔️ Failed to access microphone");
                 });
-        } else if (this.mediaRecorder.state === 'recording') {
+        } else if (this.mediaRecorder.state === 'recording' || event.type === 'touchend' || event.type === 'touchcancel') {
             this.mediaRecorder.stop();
             this.mediaRecorder.stream.getTracks().forEach(track => track.stop());
             this.mediaRecorder = undefined;
diff --git a/src/khoj/interface/web/chat.html b/src/khoj/interface/web/chat.html
index 306bb02f..19853be5 100644
--- a/src/khoj/interface/web/chat.html
+++ b/src/khoj/interface/web/chat.html
@@ -712,14 +712,14 @@ To get started, just start typing below. You can also type / to see a list of co
             };
 
             // Toggle recording
-            if (!mediaRecorder || mediaRecorder.state === 'inactive') {
+            if (!mediaRecorder || mediaRecorder.state === 'inactive' || event.type === 'touchstart') {
                 navigator.mediaDevices
-                .getUserMedia({ audio: true })
+                ?.getUserMedia({ audio: true })
                 .then(handleRecording)
                 .catch((e) => {
                     flashStatusInChatInput("⛔️ Failed to access microphone");
                 });
-            } else if (mediaRecorder.state === 'recording') {
+            } else if (mediaRecorder.state === 'recording' || event.type === 'touchend' || event.type === 'touchcancel') {
                 mediaRecorder.stop();
                 mediaRecorder.stream.getTracks().forEach(track => track.stop());
                 mediaRecorder = null;
@@ -770,7 +770,7 @@ To get started, just start typing below. You can also type / to see a list of co
                 </button>
                 <textarea id="chat-input" class="option" oninput="onChatInput()" onkeydown=incrementalChat(event) autofocus="autofocus" placeholder="Message"></textarea>
                 <button id="speak-button" class="input-row-button"
-                    ontouchstart="speechToText(event)" ontouchend="speechToText(event)" onmousedown="speechToText(event)" onmouseup="speechToText(event)">
+                    ontouchstart="speechToText(event)" ontouchend="speechToText(event)" ontouchcancel="speechToText(event)" onmousedown="speechToText(event)">
                     <svg id="speak-button-img" class="input-row-button-img" alt="Transcribe" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                         <path d="M3.5 6.5A.5.5 0 0 1 4 7v1a4 4 0 0 0 8 0V7a.5.5 0 0 1 1 0v1a5 5 0 0 1-4.5 4.975V15h3a.5.5 0 0 1 0 1h-7a.5.5 0 0 1 0-1h3v-2.025A5 5 0 0 1 3 8V7a.5.5 0 0 1 .5-.5z"/>
                         <path d="M10 8a2 2 0 1 1-4 0V3a2 2 0 1 1 4 0v5zM8 0a3 3 0 0 0-3 3v5a3 3 0 0 0 6 0V3a3 3 0 0 0-3-3z"/>