UX Improvement: Keyboard Shortcuts for Recent Messages (#804)

* added keyboard shortcuts to access old queries
khoj-ai · Jun 14, 2024 · 3571509 · 3571509
1 parent 2dcfb3c
commit 3571509
Show file tree

Hide file tree

Showing 2 changed files with 65 additions and 3 deletions.
diff --git a/src/khoj/database/migrations/0044_conversation_file_filters.py b/src/khoj/database/migrations/0044_conversation_file_filters.py
@@ -1,4 +1,4 @@
-# Generated by Django 4.2.10 on 2024-05-29 19:56
+# Generated by Django 4.2.11 on 2024-06-14 04:36
 
 from django.db import migrations, models
 

diff --git a/src/khoj/interface/web/chat.html b/src/khoj/interface/web/chat.html
@@ -541,6 +541,13 @@
             if (query.length === 0)
                 return;
 
+            // if the query is not empty then update userMessages array. keep the size of the array to 10
+            if (userMessages.length >= 10) {
+                userMessages.shift();
+            }
+            userMessages.push(query);
+            resetUserMessageIndex();
+
             // Add message by user to chat body
             renderMessage(query, "you");
             document.getElementById("chat-input").value = "";
@@ -1114,6 +1121,12 @@
             var query = document.getElementById("chat-input").value.trim();
             console.log(`Query: ${query}`);
 
+            if (userMessages.length >= 10) {
+                userMessages.shift();
+            }
+            userMessages.push(query);
+            resetUserMessageIndex();
+
             // Add message by user to chat body
             renderMessage(query, "you");
             document.getElementById("chat-input").value = "";
@@ -1155,7 +1168,8 @@
                 rawQuery: query,
             }
         }
-
+        var userMessages = [];
+        var userMessageIndex = -1;
         function loadChat() {
             let chatBody = document.getElementById("chat-body");
             chatBody.innerHTML = "";
@@ -1262,9 +1276,15 @@
                     }, {rootMargin: '0px 0px 0px 0px'});
 
                     const fullChatLog = response.chat || [];
+                    userMessages = [];
+                    userMessageIndex = 0;
                     fullChatLog.forEach((chat_log, index) => {
                         // Render the last 10 messages immediately
+                        // also cache user messages into array for shortcut access
                         if (chat_log.message != null) {
+                            if(chat_log.by !== "khoj") {
+                                userMessages.push(chat_log.message);
+                            }
                             let messageElement = renderMessageWithReference(
                                 chat_log.message,
                                 chat_log.by,
@@ -1284,6 +1304,7 @@
                         }
                         loadingScreen.style.height = chatBody.scrollHeight + 'px';
                     });
+                    userMessageIndex = userMessages.length;
 
                     // Scroll to bottom of chat-body element
                     chatBody.scrollTop = chatBody.scrollHeight;
@@ -2068,11 +2089,35 @@
                 console.error("Error loading file filters:", error);
             });
         }
+
+        function inputAutoFiller(key){
+            var chatInput = document.getElementById("chat-input");
+            console.log(key, userMessageIndex)
+            if (key === "up") {
+                if (userMessageIndex > 0) {
+                    userMessageIndex -= 1;
+                    chatInput.value = userMessages[userMessageIndex];
+                } else {
+                    userMessageIndex = -1;
+                    chatInput.value = "";
+                }
+            } else if (key === "down") {
+                if (userMessageIndex < userMessages.length - 1) {
+                    userMessageIndex += 1;
+                    chatInput.value = userMessages[userMessageIndex];
+                } else if (userMessageIndex === userMessages.length - 1) {
+                    userMessageIndex += 1;
+                    chatInput.value = "";
+                }
+            }
+        }
+        function resetUserMessageIndex(){
+            userMessageIndex = userMessages.length;
+        }
     </script>
     <body>
         <div id="khoj-empty-container" class="khoj-empty-container">
         </div>
-
         <!--Add Header Logo and Nav Pane-->
         {% import 'utils.html' as utils %}
         {{ utils.heading_pane(user_photo, username, is_active, has_documents) }}
@@ -2143,6 +2188,7 @@
                                     fileList.style.display = 'none';
                                     selectedFileList.style.display = 'block';
                                 }
+
                             });
 
                             fileInput.addEventListener('click', function(event) {
@@ -2199,6 +2245,22 @@
                             </svg>
                         </button>
                         <textarea id="chat-input" class="option" oninput="onChatInput()" onkeydown=incrementalChat(event) autofocus="autofocus" placeholder="Type / to see a list of commands"></textarea>
+                        <!-- Shortcut Handler for Accessing Old Messages -->
+                        <script>
+                            let chatInput = document.getElementById('chat-input');
+                            chatInput.addEventListener('keydown', function(event) {
+                                    if (event.key === 'ArrowUp') {
+                                        inputAutoFiller('up');
+                                    } else if (event.key === 'ArrowDown') {
+                                        inputAutoFiller('down');
+                                    }
+                                });
+                            document.addEventListener('click', function(event) {
+                                if (document.activeElement !== document.getElementById('chat-input')) {
+                                    resetUserMessageIndex();
+                                }
+                            });
+                        </script>
                         <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">