add thinking message to UI

Build5Nines · Apr 28, 2024 · 456df02 · 456df02
1 parent c69492c
commit 456df02
Showing 1 changed file with 21 additions and 0 deletions.
diff --git a/app/nodejs/simple/static/index.html b/app/nodejs/simple/static/index.html
@@ -135,6 +135,24 @@ <h5><a href="https://build5nines.com" target="_blank"><img src="/images/build5ni
                 messageList.scrollTop(messageList[0].scrollHeight);  
             }
 
+            function addAIThinkingMessage() {  
+                const messageElement = $('<div class="message message-thinking"></div>');
+
+                messageElement.addClass(`message-ai}`);
+                messageElement.append(`<div class="message-role">AI</div>`);
+
+                var messageContentElement = $(`<div class="message-content">Thinking...</div>`);
+                messageElement.append(messageContentElement);
+
+                messageList.append(messageElement);
+
+                messageList.scrollTop(messageList[0].scrollHeight);  
+            }
+
+            function removeAIThinkingMessage() {
+                $('div.message-thinking').remove();
+            }
+
             function renderAzureOpenAIUsageInfo(raw) {
                 if (raw && raw.usage) {
                     var usageElement = $('<div/>').addClass('message-openai-usage');
@@ -185,6 +203,7 @@ <h5><a href="https://build5nines.com" target="_blank"><img src="/images/build5ni
             }
 
             function sendMessageToApi(message) {
+                addAIThinkingMessage();
                 fetch(`/${config_api_version}/chat`, {
                     method: 'POST',
                     headers: {
@@ -201,6 +220,8 @@ <h5><a href="https://build5nines.com" target="_blank"><img src="/images/build5ni
                         // error response returned
                         addMessage('Error', `${res.code}: ${res.message}`);
                     }
+                }).finally(() => {
+                    removeAIThinkingMessage();
                 }).catch(err => {
                     console.error(err);
                     addMessage('Error', 'Error occurred while sending message.');