diff --git a/src/interface/desktop/chat.html b/src/interface/desktop/chat.html index b7d67eac..521d2e0c 100644 --- 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 @@
- @@ -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 index cbc65a9f..d56f6c9a 100644 --- a/src/khoj/interface/web/chat.html +++ b/src/khoj/interface/web/chat.html @@ -1130,7 +1130,6 @@ To get started, just start typing below. You can also type / to see a list of co agentMetadataElement.style.display = "none"; } - let chatBodyWrapper = document.getElementById("chat-body-wrapper"); const fullChatLog = response.chat || []; fullChatLog.forEach(chat_log => { @@ -1148,6 +1147,7 @@ To get started, just start typing below. You can also type / to see a list of co }); // 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,7 +2443,6 @@ To get started, just start typing below. You can also type / to see a list of co width: 80px; height: 80px; } - .loading-spinner div { position: absolute; border: 4px solid var(--primary-hover); @@ -2451,10 +2450,30 @@ To get started, just start typing below. You can also type / to see a list of co 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 @@ To get started, just start typing below. You can also type / to see a list of co } - @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;