Improve Chat Input Pane Actions. Move to 1 Click Audio Chat on Mobile (#624)

## Major
### Move to single click audio chat UX on Obsidian, Desktop, Web clients
  New default UX has 1 long-press on mobile, 2-click on desktop to send transcribed audio message
  - New Audio Chat Flow
    1. Record audio while microphone button pressed
    2. Show auto-send 3s countdown timer UI for audio chat message
        Provide a visual cue around send button for how long before audio
        message is automatically sent to Khoj for response
    3. Auto-send msg in 3s unless stop send message button clicked
  - Why
    - Removes the previous default of 3 clicks required to send audio message
       The record > stop > send process to send audio messages was unclear and effortful
    - Still allows stopping message from being sent, to make correction to transcribed audio
    - Removes inadvertent long audio transcriptions if forget to press stop while recording

### Improve chat input pane actions & icons on Obsidian. Desktop, Web clients
- Use SVG icons in chat footer on web, desktop app
- Move delete icon to left of chat input. This makes it harder to inadvertently click it
- Add send button to chat input pane
- Color chat message send button to make it primary CTA
- Make chat footer shorter. Use no or round border on action buttons

## Minor
- Stop rendering empty starter questions element when no questions present
- Add round border, hover color to starter questions in web, desktop apps
- Fix auto resizing chat input box when transcribed text added
- Convert chat input into a text area in the Obsidian client

src/interface/desktop/chat.html

@@ -546,7 +546,7 @@
             const textarea = document.getElementById('chat-input');
             const scrollTop = textarea.scrollTop;
             textarea.style.height = '0';
-            const scrollHeight = textarea.scrollHeight;
+            const scrollHeight = textarea.scrollHeight + 8;  // +8 accounts for padding
             textarea.style.height = Math.min(scrollHeight, 200) + 'px';
             textarea.scrollTop = scrollTop;
             document.getElementById("chat-body").scrollTop = document.getElementById("chat-body").scrollHeight;
@@ -599,7 +599,7 @@
                 .then(response => response.json())
                 .then(data => {
                     // Render chat options, if any
-                    if (data) {
+                    if (data.length > 0) {
                         let questionStarterSuggestions = document.getElementById("question-starters");
                         for (let index in data) {
                             let questionStarter = data[index];
@@ -673,9 +673,14 @@
                 })
         }
 
+        let sendMessageTimeout;
         let mediaRecorder;
-        async function speechToText() {
+        async function speechToText(event) {
+            event.preventDefault();
             const speakButtonImg = document.getElementById('speak-button-img');
+            const stopRecordButtonImg = document.getElementById('stop-record-button-img');
+            const sendButtonImg = document.getElementById('send-button-img');
+            const stopSendButtonImg = document.getElementById('stop-send-button-img');
             const chatInput = document.getElementById('chat-input');
 
             const hostURL = await window.hostURLAPI.getURL();
@@ -689,7 +694,30 @@
 
                 fetch(url, { method: 'POST', body: formData, headers})
                     .then(response => response.ok ? response.json() : Promise.reject(response))
-                    .then(data => { chatInput.value += data.text; })
+                    .then(data => { chatInput.value += data.text.trimStart(); autoResize(); })
+                    .then(() => {
+                        // Don't auto-send empty messages
+                        if (chatInput.value.length === 0) return;
+
+                        // Send message after 3 seconds, unless stop send button is clicked
+                        sendButtonImg.style.display = 'none';
+                        stopSendButtonImg.style.display = 'initial';
+
+                        // Start the countdown timer UI
+                        document.getElementById('countdown-circle').style.animation = "countdown 3s linear 1 forwards";
+
+                        sendMessageTimeout = setTimeout(() => {
+                            // Revert to showing send-button and hide the stop-send-button
+                            sendButtonImg.style.display = 'initial';
+                            stopSendButtonImg.style.display = 'none';
+
+                            // Stop the countdown timer UI
+                            document.getElementById('countdown-circle').style.animation = "none";
+
+                            // Send message
+                            chat();
+                        }, 3000);
+                    })
                     .catch(err => {
                         if (err.status === 501) {
                           flashStatusInChatInput("⛔️ Configure speech-to-text model on server.")
@@ -716,27 +744,38 @@
                 });
 
                 mediaRecorder.start();
-                speakButtonImg.src = './assets/icons/stop-solid.svg';
+                speakButtonImg.style.display = 'none';
-                speakButtonImg.alt = 'Stop Transcription';
+                stopRecordButtonImg.style.display = 'initial';
             };
 
             // 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;
-                speakButtonImg.src = './assets/icons/microphone-solid.svg';
+                speakButtonImg.style.display = 'initial';
-                speakButtonImg.alt = 'Transcribe';
+                stopRecordButtonImg.style.display = 'none';
             }
         }
 
+        function cancelSendMessage() {
+            // Cancel the chat() call if the stop-send-button is clicked
+            clearTimeout(sendMessageTimeout);
+
+            // Revert to showing send-button and hide the stop-send-button
+            document.getElementById('stop-send-button-img').style.display = 'none';
+            document.getElementById('send-button-img').style.display = 'initial';
+
+            // Stop the countdown timer UI
+            document.getElementById('countdown-circle').style.animation = "none";
+        };
     </script>
     <body>
         <div id="khoj-empty-container" class="khoj-empty-container">
@@ -764,12 +803,36 @@
         <div id="chat-footer">
             <div id="chat-tooltip" style="display: none;"></div>
             <div id="input-row">
-                <textarea id="chat-input" class="option" oninput="onChatInput()" onkeydown=incrementalChat(event) autofocus="autofocus" placeholder="Type / to see a list of commands, or just type your questions and hit enter."></textarea>
+                <button id="clear-chat-button" class="input-row-button" onclick="clearConversationHistory()">
-                <button id="speak-button" class="input-row-button" onclick="speechToText()">
+                    <svg class="input-row-button-img" alt="Clear Chat History" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256">
-                    <img id="speak-button-img" class="input-row-button-img" src="./assets/icons/microphone-solid.svg" alt="Transcribe"></img>
+                        <rect width="128" height="128" fill="none"/>
+                        <line x1="216" y1="56" x2="40" y2="56" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="12"/>
+                        <line x1="104" y1="104" x2="104" y2="168" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="12"/>
+                        <line x1="152" y1="104" x2="152" y2="168" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="12"/>
+                        <path d="M200,56V208a8,8,0,0,1-8,8H64a8,8,0,0,1-8-8V56" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="12"/>
+                        <path d="M168,56V40a16,16,0,0,0-16-16H104A16,16,0,0,0,88,40V56" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="12"/>
+                    </svg>
                 </button>
-                <button id="clear-chat" class="input-row-button" onclick="clearConversationHistory()">
+                <textarea id="chat-input" class="option" oninput="onChatInput()" onkeydown=incrementalChat(event) autofocus="autofocus" placeholder="Message"></textarea>
-                    <img class="input-row-button-img" src="./assets/icons/trash-solid.svg" alt="Clear Chat History"></img>
+                <button id="speak-button" class="input-row-button"
+                        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"/>
+                    </svg>
+                    <svg id="stop-record-button-img" style="display: none" class="input-row-button-img" alt="Stop Transcribing" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
+                        <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>
+                        <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">
+                    <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>
+                    <svg id="stop-send-button-img" onclick="cancelSendMessage()" style="display: none" class="input-row-button-img" alt="Stop Message Send" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
+                        <circle id="countdown-circle" class="countdown-circle" cx="8" cy="8" r="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>
             </div>
         </div>
@@ -894,10 +957,11 @@
         }
         #input-row {
             display: grid;
-            grid-template-columns: auto 32px 32px;
+            grid-template-columns: 32px auto 32px 40px;
             grid-column-gap: 10px;
             grid-row-gap: 10px;
-            background: #f9fafc
+            background: #f9fafc;
+            align-items: center;
         }
         .option:hover {
             box-shadow: 0 0 11px #aaa;
@@ -905,12 +969,13 @@
         #chat-input {
             font-family: roboto, karma, segoe ui, sans-serif;
             font-size: small;
-            height: 54px;
+            height: 36px;
+            border-radius: 16px;
             resize: none;
             overflow-y: hidden;
             max-height: 200px;
             box-sizing: border-box;
-            padding: 15px;
+            padding: 7px 0 0 12px;
             line-height: 1.5em;
             margin: 0;
         }
@@ -919,15 +984,19 @@
         }
         .input-row-button {
             background: var(--background-color);
-            border: 1px solid var(--main-text-color);
+            border: none;
-            box-shadow: 0 0 11px #aaa;
+            box-shadow: none;
-            border-radius: 5px;
+            border-radius: 50%;
             font-size: 14px;
             font-weight: 300;
             padding: 0;
             line-height: 1.5em;
             cursor: pointer;
             transition: background 0.3s ease-in-out;
+            width: 40px;
+            height: 40px;
+            margin-top: -2px;
+            margin-left: -5px;
         }
         .input-row-button:hover {
             background: var(--primary-hover);
@@ -937,6 +1006,41 @@
         }
         .input-row-button-img {
             width: 24px;
+            height: 24px;
+        }
+        #send-button {
+            padding: 0;
+            position: relative;
+        }
+        #send-button-img {
+            width: 28px;
+            height: 28px;
+            background: var(--primary-hover);
+            border-radius: 50%;
+        }
+        #stop-send-button-img {
+            position: absolute;
+            top: 6px;
+            right: 6px;
+            width: 28px;
+            height: 28px;
+            transform: rotateY(-180deg) rotateZ(-90deg);
+        }
+        #countdown-circle {
+            stroke-dasharray: 44px;  /* The circumference of the circle with 7px radius */
+            stroke-dashoffset: 0px;
+            stroke-linecap: round;
+            stroke-width: 1px;
+            stroke: var(--main-text-color);
+            fill: none;
+        }
+        @keyframes countdown {
+            from {
+                stroke-dashoffset: 0px;
+            }
+            to {
+                stroke-dashoffset: -44px;  /* The circumference of the circle with 7px radius */
+            }
         }
 
         .option-enabled {
@@ -978,7 +1082,7 @@
             background: var(--background-color);
             color: var(--main-text-color);
             border: 1px solid var(--main-text-color);
-            border-radius: 5px;
+            border-radius: 16px;
             padding: 5px;
             font-size: 14px;
             font-weight: 300;
@@ -990,6 +1094,9 @@
             transition: max-height 0.3s ease-in-out;
             overflow: hidden;
         }
+        button.question-starter:hover {
+            background: var(--primary-hover);
+        }
 
         code.chat-response {
             background: var(--primary-hover);
@@ -1106,7 +1213,7 @@
                 color: #f8fafc;
                 border-radius: 2px;
                 box-shadow: 1px 1px 4px 0 rgba(0, 0, 0, 0.4);
-                font-size small;
+                font-size: small;
                 padding: 2px 4px;
             }
         }
@@ -1126,6 +1233,9 @@
             img.text-to-image {
                 max-width: 100%;
             }
+            #clear-chat-button {
+                margin-left: 0;
+            }
         }
         @media only screen and (min-width: 600px) {
             body {

src/interface/obsidian/src/chat_modal.ts

@@ -17,17 +17,20 @@ export class KhojChatModal extends Modal {
         this.setting = setting;
 
         // Register Modal Keybindings to send user message
-        this.scope.register([], 'Enter', async () => {
+        this.scope.register([], 'Enter', async () => { await this.chat() });
-            // Get text in chat input elmenet
+    }
-            let input_el = <HTMLInputElement>this.contentEl.getElementsByClassName("khoj-chat-input")[0];
+
+    async chat() {
+        // Get text in chat input element
+        let input_el = <HTMLTextAreaElement>this.contentEl.getElementsByClassName("khoj-chat-input")[0];
 
         // Clear text after extracting message to send
-            let user_message = input_el.value;
+        let user_message = input_el.value.trim();
         input_el.value = "";
+        this.autoResize();
 
         // Get and render chat response to user message
         await this.getChatResponse(user_message);
-        });
     }
 
     async onOpen() {
@@ -42,13 +45,21 @@ export class KhojChatModal extends Modal {
 
         // Get chat history from Khoj backend
         let getChatHistorySucessfully = await this.getChatHistory(chatBodyEl);
-        let placeholderText = getChatHistorySucessfully ? "Chat with Khoj [Hit Enter to send message]" : "Configure Khoj to enable chat";
+        let placeholderText = getChatHistorySucessfully ? "Message" : "Configure Khoj to enable chat";
 
         // Add chat input field
         let inputRow = contentEl.createDiv("khoj-input-row");
-        let chatInput = inputRow.createEl("input", {
+        let clearChat = inputRow.createEl("button", {
+            text: "Clear History",
+            attr: {
+                class: "khoj-input-row-button clickable-icon",
+            },
+        })
+        clearChat.addEventListener('click', async (_) => { await this.clearConversationHistory() });
+        setIcon(clearChat, "trash");
+
+        let chatInput = inputRow.createEl("textarea", {
             attr: {
-                type: "text",
                 id: "khoj-chat-input",
                 autofocus: "autofocus",
                 placeholder: placeholderText,
@@ -56,25 +67,32 @@ export class KhojChatModal extends Modal {
                 disabled: !getChatHistorySucessfully ? "disabled" : null
             },
         })
+        chatInput.addEventListener('input', (_) => { this.onChatInput() });
+        chatInput.addEventListener('keydown', (event) => { this.incrementalChat(event) });
 
         let transcribe = inputRow.createEl("button", {
             text: "Transcribe",
             attr: {
                 id: "khoj-transcribe",
-                class: "khoj-transcribe khoj-input-row-button",
+                class: "khoj-transcribe khoj-input-row-button clickable-icon ",
             },
         })
-        transcribe.addEventListener('click', async (_) => { await this.speechToText() });
+        transcribe.addEventListener('mousedown', 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 clearChat = inputRow.createEl("button", {
+        let send = inputRow.createEl("button", {
-            text: "Clear History",
+            text: "Send",
             attr: {
-                class: "khoj-input-row-button",
+                id: "khoj-chat-send",
+                class: "khoj-chat-send khoj-input-row-button clickable-icon",
             },
         })
-        clearChat.addEventListener('click', async (_) => { await this.clearConversationHistory() });
+        setIcon(send, "arrow-up-circle");
-        setIcon(clearChat, "trash");
+        let sendImg = <SVGElement>send.getElementsByClassName("lucide-arrow-up-circle")[0]
+        sendImg.addEventListener('click', async (_) => { await this.chat() });
 
         // Scroll to bottom of modal, till the send message input box
         this.modalEl.scrollTop = this.modalEl.scrollHeight;
@@ -370,7 +388,7 @@ export class KhojChatModal extends Modal {
 
     flashStatusInChatInput(message: string) {
         // Get chat input element and original placeholder
-        let chatInput = <HTMLInputElement>this.contentEl.getElementsByClassName("khoj-chat-input")[0];
+        let chatInput = <HTMLTextAreaElement>this.contentEl.getElementsByClassName("khoj-chat-input")[0];
         let originalPlaceholder = chatInput.placeholder;
         // Set placeholder to message
         chatInput.placeholder = message;
@@ -405,10 +423,13 @@ export class KhojChatModal extends Modal {
         }
     }
 
+    sendMessageTimeout: NodeJS.Timeout | undefined;
     mediaRecorder: MediaRecorder | undefined;
-    async speechToText() {
+    async speechToText(event: MouseEvent | TouchEvent) {
+        event.preventDefault();
         const transcribeButton = <HTMLButtonElement>this.contentEl.getElementsByClassName("khoj-transcribe")[0];
-        const chatInput = <HTMLInputElement>this.contentEl.getElementsByClassName("khoj-chat-input")[0];
+        const chatInput = <HTMLTextAreaElement>this.contentEl.getElementsByClassName("khoj-chat-input")[0];
+        const sendButton = <HTMLButtonElement>this.modalEl.getElementsByClassName("khoj-chat-send")[0]
 
         const generateRequestBody = async (audioBlob: Blob, boundary_string: string) => {
             const boundary = `------${boundary_string}`;
@@ -439,7 +460,8 @@ export class KhojChatModal extends Modal {
             // Parse response from Khoj backend
             if (response.status === 200) {
                 console.log(response);
-                chatInput.value += response.json.text;
+                chatInput.value += response.json.text.trimStart();
+                this.autoResize();
             } else if (response.status === 501) {
                 throw new Error("⛔️ Configure speech-to-text model on server.");
             } else if (response.status === 422) {
@@ -447,6 +469,28 @@ export class KhojChatModal extends Modal {
             } else {
                 throw new Error("⛔️ Failed to transcribe audio.");
             }
+
+            // Don't auto-send empty messages
+            if (chatInput.value.length === 0) return;
+
+            // Show stop auto-send button. It stops auto-send when clicked
+            setIcon(sendButton, "stop-circle");
+            let stopSendButtonImg = <SVGElement>sendButton.getElementsByClassName("lucide-stop-circle")[0]
+            stopSendButtonImg.addEventListener('click', (_) => { this.cancelSendMessage() });
+
+            // Start the countdown timer UI
+            stopSendButtonImg.getElementsByTagName("circle")[0].style.animation = "countdown 3s linear 1 forwards";
+
+            // Auto send message after 3 seconds
+            this.sendMessageTimeout = setTimeout(() => {
+                // Stop the countdown timer UI
+                setIcon(sendButton, "arrow-up-circle")
+                let sendImg = <SVGElement>sendButton.getElementsByClassName("lucide-arrow-up-circle")[0]
+                sendImg.addEventListener('click', async (_) => { await this.chat() });
+
+                // Send message
+                this.chat();
+            }, 3000);
         };
 
         const handleRecording = (stream: MediaStream) => {
@@ -468,18 +512,53 @@ 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;
             setIcon(transcribeButton, "mic");
         }
     }
+
+    cancelSendMessage() {
+        // Cancel the auto-send chat message timer if the stop-send-button is clicked
+        clearTimeout(this.sendMessageTimeout);
+
+        // Revert to showing send-button and hide the stop-send-button
+        let sendButton = <HTMLButtonElement>this.modalEl.getElementsByClassName("khoj-chat-send")[0];
+        setIcon(sendButton, "arrow-up-circle");
+        let sendImg = <SVGElement>sendButton.getElementsByClassName("lucide-arrow-up-circle")[0]
+        sendImg.addEventListener('click', async (_) => { await this.chat() });
+    };
+
+    incrementalChat(event: KeyboardEvent) {
+        if (!event.shiftKey && event.key === 'Enter') {
+            event.preventDefault();
+            this.chat();
+        }
+    }
+
+    onChatInput() {
+        const chatInput = <HTMLTextAreaElement>this.contentEl.getElementsByClassName("khoj-chat-input")[0];
+        chatInput.value = chatInput.value.trimStart();
+
+        this.autoResize();
+    }
+
+    autoResize() {
+        const chatInput = <HTMLTextAreaElement>this.contentEl.getElementsByClassName("khoj-chat-input")[0];
+        const scrollTop = chatInput.scrollTop;
+        chatInput.style.height = '0';
+        const scrollHeight = chatInput.scrollHeight + 8;  // +8 accounts for padding
+        chatInput.style.height = Math.min(scrollHeight, 200) + 'px';
+        chatInput.scrollTop = scrollTop;
+        this.modalEl.scrollTop = this.modalEl.scrollHeight;
+    }
 }

src/interface/obsidian/styles.css

@@ -230,36 +230,58 @@ img {
 }
 .khoj-input-row {
     display: grid;
-    grid-template-columns: auto 32px 32px;
+    grid-template-columns: 32px auto 32px 32px;
     grid-column-gap: 10px;
     grid-row-gap: 10px;
     background: var(--background-primary);
+    margin: 0 0 0 -8px;
+    align-items: center;
 }
 #khoj-chat-input.option:hover {
     box-shadow: 0 0 11px var(--background-modifier-box-shadow);
 }
 #khoj-chat-input {
     font-size: var(--font-ui-medium);
-    padding: 25px 20px;
+    padding: 4px 0 0 12px;
+    border-radius: 16px;
+    height: 32px;
+    resize: none;
 }
 .khoj-input-row-button {
-    background: var(--background-primary);
+    border-radius: 50%;
-    border: none;
+    padding: 4px;
-    border-radius: 5px;
-    padding: 5px;
     --icon-size: var(--icon-size);
-    height: auto;
+    height: 32px;
-    font-size: 14px;
+    width: 32px;
-    font-weight: 300;
-    line-height: 1.5em;
-    cursor: pointer;
-    transition: background 0.3s ease-in-out;
 }
-.khoj-input-row-button:hover {
+
-    background: var(--background-modifier-hover);
+#khoj-chat-send {
+    padding: 0;
+    position: relative;
 }
-.khoj-input-row-button:active {
+#khoj-chat-send .lucide-arrow-up-circle {
-    background: var(--background-modifier-active);
+    background: var(--khoj-sun);
+    border-radius: 50%;
+    color: #222;
+}
+#khoj-chat-send .lucide-stop-circle {
+    transform: rotateY(-180deg) rotateZ(-90deg);
+}
+#khoj-chat-send .lucide-stop-circle circle {
+    stroke-dasharray: 62px;  /* The circumference of the circle with 7px radius */
+    stroke-dashoffset: 0px;
+    stroke-linecap: round;
+    stroke-width: 2px;
+    stroke: var(--main-text-color);
+    fill: none;
+}
+@keyframes countdown {
+    from {
+        stroke-dashoffset: 0px;
+    }
+    to {
+        stroke-dashoffset: -62px;  /* The circumference of the circle with 7px radius */
+    }
 }
 
 @media (pointer: coarse), (hover: none) {

src/khoj/interface/web/chat.html

@@ -528,7 +528,7 @@ To get started, just start typing below. You can also type / to see a list of co
             const textarea = document.getElementById('chat-input');
             const scrollTop = textarea.scrollTop;
             textarea.style.height = '0';
-            const scrollHeight = textarea.scrollHeight;
+            const scrollHeight = textarea.scrollHeight + 8;  // +8 accounts for padding
             textarea.style.height = Math.min(scrollHeight, 200) + 'px';
             textarea.scrollTop = scrollTop;
             document.getElementById("chat-body").scrollTop = document.getElementById("chat-body").scrollHeight;
@@ -581,7 +581,7 @@ To get started, just start typing below. You can also type / to see a list of co
                 .then(response => response.json())
                 .then(data => {
                     // Render chat options, if any
-                    if (data) {
+                    if (data.length > 0) {
                         let questionStarterSuggestions = document.getElementById("question-starters");
                         for (let index in data) {
                             let questionStarter = data[index];
@@ -639,9 +639,14 @@ To get started, just start typing below. You can also type / to see a list of co
                 });
         }
 
+        let sendMessageTimeout;
         let mediaRecorder;
-        function speechToText() {
+        function speechToText(event) {
+            event.preventDefault();
             const speakButtonImg = document.getElementById('speak-button-img');
+            const stopRecordButtonImg = document.getElementById('stop-record-button-img');
+            const sendButtonImg = document.getElementById('send-button-img');
+            const stopSendButtonImg = document.getElementById('stop-send-button-img');
             const chatInput = document.getElementById('chat-input');
 
             const sendToServer = (audioBlob) => {
@@ -650,7 +655,30 @@ To get started, just start typing below. You can also type / to see a list of co
 
                 fetch('/api/transcribe?client=web', { method: 'POST', body: formData })
                     .then(response => response.ok ? response.json() : Promise.reject(response))
-                    .then(data => { chatInput.value += data.text; })
+                    .then(data => { chatInput.value += data.text.trimStart(); autoResize(); })
+                    .then(() => {
+                        // Don't auto-send empty messages
+                        if (chatInput.value.length === 0) return;
+
+                        // Send message after 3 seconds, unless stop send button is clicked
+                        sendButtonImg.style.display = 'none';
+                        stopSendButtonImg.style.display = 'initial';
+
+                        // Start the countdown timer UI
+                        document.getElementById('countdown-circle').style.animation = "countdown 3s linear 1 forwards";
+
+                        sendMessageTimeout = setTimeout(() => {
+                            // Revert to showing send-button and hide the stop-send-button
+                            sendButtonImg.style.display = 'initial';
+                            stopSendButtonImg.style.display = 'none';
+
+                            // Stop the countdown timer UI
+                            document.getElementById('countdown-circle').style.animation = "none";
+
+                            // Send message
+                            chat();
+                        }, 3000);
+                    })
                     .catch(err => {
                         if (err.status === 501) {
                           flashStatusInChatInput("⛔️ Configure speech-to-text model on server.")
@@ -679,26 +707,38 @@ To get started, just start typing below. You can also type / to see a list of co
                 });
 
                 mediaRecorder.start();
-                speakButtonImg.src = '/static/assets/icons/stop-solid.svg';
+                speakButtonImg.style.display = 'none';
-                speakButtonImg.alt = 'Stop Transcription';
+                stopRecordButtonImg.style.display = 'initial';
             };
 
             // 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;
-                speakButtonImg.src = '/static/assets/icons/microphone-solid.svg';
+                speakButtonImg.style.display = 'initial';
-                speakButtonImg.alt = 'Transcribe';
+                stopRecordButtonImg.style.display = 'none';
             }
         }
+
+        function cancelSendMessage() {
+            // Cancel the chat() call if the stop-send-button is clicked
+            clearTimeout(sendMessageTimeout);
+
+            // Revert to showing send-button and hide the stop-send-button
+            document.getElementById('stop-send-button-img').style.display = 'none';
+            document.getElementById('send-button-img').style.display = 'initial';
+
+            // Stop the countdown timer UI
+            document.getElementById('countdown-circle').style.animation = "none";
+        };
     </script>
     <body>
         <div id="khoj-empty-container" class="khoj-empty-container">
@@ -718,12 +758,36 @@ To get started, just start typing below. You can also type / to see a list of co
         <div id="chat-footer">
             <div id="chat-tooltip" style="display: none;"></div>
             <div id="input-row">
-                <textarea id="chat-input" class="option" oninput="onChatInput()" onkeydown=incrementalChat(event) autofocus="autofocus" placeholder="Type / to see a list of commands, or just type your questions and hit enter."></textarea>
+                <button id="clear-chat-button" class="input-row-button" onclick="clearConversationHistory()">
-                <button id="speak-button" class="input-row-button" onclick="speechToText()">
+                    <svg class="input-row-button-img" alt="Clear Chat History" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256">
-                    <img id="speak-button-img" class="input-row-button-img" src="/static/assets/icons/microphone-solid.svg" alt="Transcribe"></img>
+                        <rect width="128" height="128" fill="none"/>
+                        <line x1="216" y1="56" x2="40" y2="56" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="12"/>
+                        <line x1="104" y1="104" x2="104" y2="168" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="12"/>
+                        <line x1="152" y1="104" x2="152" y2="168" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="12"/>
+                        <path d="M200,56V208a8,8,0,0,1-8,8H64a8,8,0,0,1-8-8V56" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="12"/>
+                        <path d="M168,56V40a16,16,0,0,0-16-16H104A16,16,0,0,0,88,40V56" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="12"/>
+                    </svg>
                 </button>
-                <button class="input-row-button" onclick="clearConversationHistory()">
+                <textarea id="chat-input" class="option" oninput="onChatInput()" onkeydown=incrementalChat(event) autofocus="autofocus" placeholder="Message"></textarea>
-                    <img class="input-row-button-img" src="/static/assets/icons/trash-solid.svg" alt="Clear Chat History"></img>
+                <button id="speak-button" class="input-row-button"
+                    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"/>
+                    </svg>
+                    <svg id="stop-record-button-img" style="display: none" class="input-row-button-img" alt="Stop Transcribing" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
+                        <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>
+                        <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">
+                    <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>
+                    <svg id="stop-send-button-img" onclick="cancelSendMessage()" style="display: none" class="input-row-button-img" alt="Stop Message Send" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
+                        <circle id="countdown-circle" class="countdown-circle" cx="8" cy="8" r="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>
             </div>
         </div>
@@ -803,6 +867,9 @@ To get started, just start typing below. You can also type / to see a list of co
             transition: max-height 0.3s ease-in-out;
             overflow: hidden;
         }
+        button.question-starter:hover {
+            background: var(--primary-hover);
+        }
 
         button.reference-button {
             background: var(--background-color);
@@ -963,10 +1030,11 @@ To get started, just start typing below. You can also type / to see a list of co
         }
         #input-row {
             display: grid;
-            grid-template-columns: auto 32px 32px;
+            grid-template-columns: 32px auto 32px 40px;
             grid-column-gap: 10px;
             grid-row-gap: 10px;
             background: var(--background-color);
+            align-items: center;
         }
         .option:hover {
             box-shadow: 0 0 11px #aaa;
@@ -974,12 +1042,13 @@ To get started, just start typing below. You can also type / to see a list of co
         #chat-input {
             font-family: roboto, karma, segoe ui, sans-serif;
             font-size: medium;
-            height: 54px;
+            height: 36px;
+            border-radius: 16px;
             resize: none;
             overflow-y: hidden;
             max-height: 200px;
             box-sizing: border-box;
-            padding: 15px;
+            padding: 4px 0 0 12px;
             line-height: 1.5em;
             margin: 0;
         }
@@ -988,15 +1057,18 @@ To get started, just start typing below. You can also type / to see a list of co
         }
         .input-row-button {
             background: var(--background-color);
-            border: 1px solid var(--main-text-color);
+            border: none;
-            box-shadow: 0 0 11px #aaa;
+            box-shadow: none;
-            border-radius: 5px;
+            border-radius: 50%;
-            padding: 0px;
             font-size: 14px;
             font-weight: 300;
             line-height: 1.5em;
             cursor: pointer;
             transition: background 0.3s ease-in-out;
+            width: 40px;
+            height: 40px;
+            margin-top: -2px;
+            margin-left: -5px;
         }
         .input-row-button:hover {
             background: var(--primary-hover);
@@ -1006,8 +1078,43 @@ To get started, just start typing below. You can also type / to see a list of co
         }
         .input-row-button-img {
             width: 24px;
+            height: 24px;
+        }
+        #send-button {
+            padding: 0;
+            position: relative;
+        }
+        #send-button-img {
+            width: 28px;
+            height: 28px;
+            background: var(--primary-hover);
+            border-radius: 50%;
         }
 
+        #stop-send-button-img {
+            position: absolute;
+            top: 6px;
+            right: 6px;
+            width: 28px;
+            height: 28px;
+            transform: rotateY(-180deg) rotateZ(-90deg);
+        }
+        #countdown-circle {
+            stroke-dasharray: 44px;  /* The circumference of the circle with 7px radius */
+            stroke-dashoffset: 0px;
+            stroke-linecap: round;
+            stroke-width: 1px;
+            stroke: var(--main-text-color);
+            fill: none;
+        }
+        @keyframes countdown {
+            from {
+                stroke-dashoffset: 0px;
+            }
+            to {
+                stroke-dashoffset: -44px;  /* The circumference of the circle with 7px radius */
+            }
+        }
 
         .option-enabled {
             box-shadow: 0 0 12px rgb(119, 156, 46);
@@ -1083,6 +1190,9 @@ To get started, just start typing below. You can also type / to see a list of co
             img.text-to-image {
                 max-width: 100%;
             }
+            #clear-chat-button {
+                margin-left: 0;
+            }
         }
         @media only screen and (min-width: 700px) {
             body {