Show generating response... during streaming and hide Getting Started with Agents Using Azure AI Foundry whenever assistant and user balloon shown that can happen during chat history loading.

Author: howieleung

src/api/static/ChatClient.js

@@ -12,6 +12,7 @@ class ChatClient {
 
         console.log("[ChatClient] Sending message:", message);
         this.ui.appendUserMessage(message);
+        document.getElementById("generating-message").style.display = "block";
 
         const postData = { message: message };
 
@@ -48,6 +49,7 @@ class ChatClient {
             this.handleMessages(response.body);
 
         } catch (error) {
+            document.getElementById("generating-message").style.display = "none";
             if (error.name === 'AbortError') {
                 console.log('[ChatClient] Fetch request aborted by user.');
             } else {
@@ -111,6 +113,7 @@ class ChatClient {
                                 messageDiv = this.ui.createAssistantMessageDiv();
                                 console.log("[ChatClient] Created new messageDiv for assistant.");
                             }
+                            document.getElementById("generating-message").style.display = "none";
                             this.ui.appendAssistantMessage(
                                 messageDiv,
                                 data.error.message || "An error occurred.",
@@ -142,6 +145,7 @@ class ChatClient {
                                 annotations = data.annotations;
                                 isStreaming = false;
                                 console.log("[ChatClient] Received completed message:", accumulatedContent);
+                                document.getElementById("generating-message").style.display = "none";
                             } else {
                                 accumulatedContent += data.content;
                                 console.log("[ChatClient] Received streaming chunk:", data.content);

src/api/static/ChatUI.js

@@ -33,6 +33,14 @@ class ChatUI {
         return content;
     } 
 
+    removePlaceholder() {
+        // Remove placeholder message if it exists
+        const placeholderWrapper = document.getElementById("placeholder-wrapper");
+        if (placeholderWrapper) {
+            placeholderWrapper.remove();
+        }            
+    }    
+
     addCitationClickListener() {
         document.addEventListener('click', (event) => {
             if (event.target.classList.contains('file-citation')) {
@@ -118,6 +126,9 @@ class ChatUI {
     }
 
     appendUserMessage(message) {
+        // Remove the placeholder message
+        this.removePlaceholder();
+
         const userTemplateClone = this.userTemplate.content.cloneNode(true);
         userTemplateClone.querySelector(".message-content").textContent = message;
         this.targetContainer.appendChild(userTemplateClone);
@@ -164,12 +175,15 @@ class ChatUI {
         }
     }
 
-    createAssistantMessageDiv() {
+    createAssistantMessageDiv() {        
         const assistantTemplateClone = this.assistantTemplate.content.cloneNode(true);
         if (!assistantTemplateClone) {
             console.error("Failed to clone assistant template.");
             return null;
         }
+
+        // Remove the placeholder message
+        this.removePlaceholder();
 
         // Append the clone to the target container
         this.targetContainer.appendChild(assistantTemplateClone);

src/api/static/main.js

@@ -12,16 +12,10 @@ function initChat() {
     const form = document.getElementById("chat-form");
     const messageInput = document.getElementById("message");
     const targetContainer = document.getElementById("messages");
-    const placeholderWrapper = document.getElementById("placeholder-wrapper");
 
     form.addEventListener("submit", async function(e) {
         e.preventDefault();
 
-        // Remove placeholder message if it exists
-        if (placeholderWrapper) {
-            placeholderWrapper.remove();
-        }
-
         await chatClient.sendMessage("/chat", messageInput.value.trim());
         messageInput.value = "";
     });

src/api/templates/index.html

@@ -52,6 +52,7 @@
                     </div>
                 </div>
 
+                <text id="generating-message" style="display:none">Generating response...</text>
                 <div id="chat-area" class="text-light px-4 py-2 rounded-top text-dark d-flex flex-column justify-content-center background-user">
                     <form id="chat-form" onsubmit="event.preventDefault();">
                         <div class="input-group">