Align conversation sessions side panel on Desktop app with Web app

- Move new conversation button to right of "Conversation" title - Reduce size of chat message loading ellipsis animation - Add loading animation for chat session
khoj-ai · Apr 10, 2024 · 7be0d47 · 7be0d47
1 parent fd9a14d
commit 7be0d47
Show file tree

Hide file tree

Showing 2 changed files with 85 additions and 34 deletions.
diff --git a/src/interface/desktop/chat.html b/src/interface/desktop/chat.html
@@ -672,6 +672,13 @@
                 chatHistoryUrl += `&conversation_id=${chatBody.dataset.conversationId}`;
             }
 
+            // Create loading screen and add it to chat-body
+            let loadingScreen = document.createElement('div');
+            loadingScreen.classList.add("loading-spinner");
+            let yellowOrb = document.createElement('div');
+            loadingScreen.appendChild(yellowOrb);
+            chatBody.appendChild(loadingScreen);
+
             fetch(`${hostURL}${chatHistoryUrl}`, { headers })
                 .then(response => response.json())
                 .then(data => {
@@ -705,11 +712,17 @@
                                 chat_log.intent?.type,
                                 chat_log.intent?.["inferred-queries"]);
                         }
+                        loadingScreen.style.height = chatBody.scrollHeight + 'px';
                     })
+
+                    // Add fade out animation to loading screen and remove it after the animation ends
                     let chatBodyWrapper = document.getElementById("chat-body-wrapper");
                     chatBodyWrapperHeight = chatBodyWrapper.clientHeight;
-
                     chatBody.style.height = chatBodyWrapperHeight;
+                    setTimeout(() => {
+                        loadingScreen.remove();
+                        chatBody.classList.remove("relative-position");
+                    }, 500);
                 })
                 .catch(err => {
                     // If the server returns a 500 error with detail, render a setup hint.
@@ -1100,9 +1113,10 @@
             <div id="side-panel-wrapper">
                 <div id="side-panel">
                     <div id="new-conversation">
-                        <button class="side-panel-button" id="new-conversation-button" onclick="createNewConversation()">
-                            New Topic
-                            <svg class="new-convo-button" viewBox="0 0 35 35" fill="#000000" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg">
+                       <div id="conversation-list-header" style="display: none;">Conversations</div>
+                       <button class="side-panel-button" id="new-conversation-button" onclick="createNewConversation()">
+                            New
+                            <svg class="new-convo-button" viewBox="0 0 40 40" fill="#000000" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg">
                                 <path d="M16 0c-8.836 0-16 7.163-16 16s7.163 16 16 16c8.837 0 16-7.163 16-16s-7.163-16-16-16zM16 30.032c-7.72 0-14-6.312-14-14.032s6.28-14 14-14 14 6.28 14 14-6.28 14.032-14 14.032zM23 15h-6v-6c0-0.552-0.448-1-1-1s-1 0.448-1 1v6h-6c-0.552 0-1 0.448-1 1s0.448 1 1 1h6v6c0 0.552 0.448 1 1 1s1-0.448 1-1v-6h6c0.552 0 1-0.448 1-1s-0.448-1-1-1z"></path>
                             </svg>
                         </button>
@@ -1416,8 +1430,6 @@
             transition: background 0.3s ease-in-out;
             border-radius: 5%;;
             font-family: var(--font-family);
-            padding: 8px;
-            font-size: large;
         }
 
         svg#side-panel-collapse {
@@ -1733,14 +1745,18 @@
         }
 
         div#new-conversation {
+            display: grid;
+            grid-auto-flow: column;
+            font-size: large;
             text-align: left;
             border-bottom: 1px solid var(--main-text-color);
-            margin-bottom: 8px;
+            margin: 8px 0;
         }
 
         button#new-conversation-button {
             display: inline-flex;
             align-items: center;
+            justify-self: end;
         }
 
         div.conversation-button {
@@ -1866,6 +1882,44 @@
             white-space: pre-wrap;
         }
 
+        .loading-spinner {
+            display: inline-block;
+            position: relative;
+            width: 80px;
+            height: 80px;
+        }
+        .loading-spinner div {
+            position: absolute;
+            border: 4px solid var(--primary-hover);
+            opacity: 1;
+            border-radius: 50%;
+            animation: lds-ripple 0.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
+        }
+        .loading-spinner div:nth-child(2) {
+            animation-delay: -0.5s;
+        }
+        @keyframes lds-ripple {
+            0% {
+                top: 36px;
+                left: 36px;
+                width: 0;
+                height: 0;
+                opacity: 1;
+                border-color: var(--primary-hover);
+            }
+            50% {
+                border-color: var(--flower);
+            }
+            100% {
+                top: 0px;
+                left: 0px;
+                width: 72px;
+                height: 72px;
+                opacity: 0;
+                border-color: var(--water);
+            }
+        }
+
         .lds-ellipsis {
             display: inline-block;
             position: relative;
@@ -1875,8 +1929,8 @@
         .lds-ellipsis div {
             position: absolute;
             top: 12px;
-            width: 12px;
-            height: 12px;
+            width: 8px;
+            height: 8px;
             border-radius: 50%;
             background: var(--main-text-color);
             animation-timing-function: cubic-bezier(0, 1, 1, 0);

diff --git a/src/khoj/interface/web/chat.html b/src/khoj/interface/web/chat.html
@@ -1130,7 +1130,6 @@
                         agentMetadataElement.style.display = "none";
                     }
 
-                    let chatBodyWrapper = document.getElementById("chat-body-wrapper");
                     const fullChatLog = response.chat || [];
 
                     fullChatLog.forEach(chat_log => {
@@ -1148,6 +1147,7 @@
                     });
 
                     // Add fade out animation to loading screen and remove it after the animation ends
+                    let chatBodyWrapper = document.getElementById("chat-body-wrapper");
                     chatBodyWrapperHeight = chatBodyWrapper.clientHeight;
                     chatBody.style.height = chatBodyWrapperHeight;
                     setTimeout(() => {
@@ -2443,18 +2443,37 @@
             width: 80px;
             height: 80px;
         }
-
         .loading-spinner div {
             position: absolute;
             border: 4px solid var(--primary-hover);
             opacity: 1;
             border-radius: 50%;
             animation: lds-ripple 0.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
         }
-
         .loading-spinner div:nth-child(2) {
             animation-delay: -0.5s;
         }
+        @keyframes lds-ripple {
+            0% {
+                top: 36px;
+                left: 36px;
+                width: 0;
+                height: 0;
+                opacity: 1;
+                border-color: var(--primary-hover);
+            }
+            50% {
+                border-color: var(--flower);
+            }
+            100% {
+                top: 0px;
+                left: 0px;
+                width: 72px;
+                height: 72px;
+                opacity: 0;
+                border-color: var(--water);
+            }
+        }
 
         #agent-metadata-content {
             display: grid;
@@ -2620,28 +2639,6 @@
         }
 
 
-        @keyframes lds-ripple {
-            0% {
-                top: 36px;
-                left: 36px;
-                width: 0;
-                height: 0;
-                opacity: 1;
-                border-color: var(--primary-hover);
-            }
-            50% {
-                border-color: var(--flower);
-            }
-            100% {
-                top: 0px;
-                left: 0px;
-                width: 72px;
-                height: 72px;
-                opacity: 0;
-                border-color: var(--water);
-            }
-        }
-
         .lds-ellipsis {
             display: inline-block;
             position: relative;