Merge pull request #93 from Azure-Samples/howie/css-and-refresh

Howie/css and refresh

Author: howieleung

docs/webapp_screenshot.png

@@ -180,7 +180,7 @@ async def history(
         raise HTTPException(status_code=400, detail=f"Error handling thread: {e}")
 
     thread_id = thread.id
-    messages = OpenAIPageableListOfThreadMessage()
+    agent_id = agent.id
 
     # Create a new message from the user's input.
     try:

src/api/routes.py

@@ -33,14 +33,33 @@ class ChatUI {
         return content;
     } 
 
-    removePlaceholder() {
-        // Remove placeholder message if it exists
+    showPlaceholder(show) {
+        // show/hide placeholder message if it exists
         const placeholderWrapper = document.getElementById("placeholder-wrapper");
         if (placeholderWrapper) {
-            placeholderWrapper.remove();
+            placeholderWrapper.style.display = show? "flex": "none";
         }            
     }    
 
+    clearChat() {
+        const placeholderWrapper = document.getElementById("placeholder-wrapper");
+        const targetContainer = document.getElementById("messages");
+        while (targetContainer.lastChild && targetContainer.lastChild != placeholderWrapper) {
+            targetContainer.removeChild(targetContainer.lastChild);
+        }
+        this.showPlaceholder(true)
+
+        this.deleteAllCookies();
+    }
+
+    deleteAllCookies() {
+        document.cookie.split(';').forEach(cookie => {
+            const eqPos = cookie.indexOf('=');
+            const name = eqPos > -1 ? cookie.substring(0, eqPos) : cookie;
+            document.cookie = name + '=;expires=Thu, 01 Jan 1970 00:00:00 GMT;path=/';
+        });
+    }
+
     addCitationClickListener() {
         document.addEventListener('click', (event) => {
             if (event.target.classList.contains('file-citation')) {
@@ -127,7 +146,7 @@ class ChatUI {
 
     appendUserMessage(message) {
         // Remove the placeholder message
-        this.removePlaceholder();
+        this.showPlaceholder(false);
 
         const userTemplateClone = this.userTemplate.content.cloneNode(true);
         userTemplateClone.querySelector(".message-content").textContent = message;
@@ -148,13 +167,12 @@ class ChatUI {
             const preprocessedContent = this.preprocessContent(accumulatedContent, annotations);
             // Convert the accumulated content to HTML using markdown-it
             let htmlContent = md.render(preprocessedContent);
-            const messageTextDiv = messageDiv.querySelector(".message-text");
-            if (!messageTextDiv) {
+            if (!messageDiv) {
                 throw new Error("Message content div not found in the template.");
             }
 
             // Set the innerHTML of the message text div to the HTML content
-            messageTextDiv.innerHTML = htmlContent;
+            messageDiv.innerHTML = htmlContent;
 
             // Use requestAnimationFrame to ensure the DOM has updated before scrolling
             // Only scroll if not streaming
@@ -169,9 +187,8 @@ class ChatUI {
     }
 
     clearAssistantMessage(messageDiv) {
-        const messageTextDiv = messageDiv.querySelector(".message-text");
-        if (messageTextDiv) {
-            messageTextDiv.innerHTML = '';
+        if (messageDiv) {
+            messageDiv.innerHTML = '';
         }
     }
 
@@ -183,7 +200,7 @@ class ChatUI {
         }
 
         // Remove the placeholder message
-        this.removePlaceholder();
+        this.showPlaceholder(false);
 
         // Append the clone to the target container
         this.targetContainer.appendChild(assistantTemplateClone);

src/api/static/ChatUI.js

@@ -27,4 +27,7 @@ function initChat() {
 
 document.addEventListener("DOMContentLoaded", initChat);
 
+window.chatUI = chatUI;
+window.chatClient = chatClient;
+
 await chatUI.loadChatHistory();

src/api/static/main.js

@@ -42,6 +42,14 @@ html, body {
     margin-bottom: 5px;
 }
 
+#messages .message-content p {
+    margin: 0;
+}
+
+.user .message-content {
+    background-color: #EBEFFF;
+}
+
 /* Ensure consistent font size and styling for message text */
 .message-text {
     font-size: 16px;
@@ -151,14 +159,9 @@ html, body {
 
 /* Background colors for user and assistant messages */
 .background-user {
-    background-color: #2372cc;
     color: white; /* Ensure text is readable on the background */
 }
 
-.background-assistant {
-    background-color: #2c8310;
-    color: white; /* Ensure text is readable on the background */
-}
 
 /* Styling for messages */
 .toast {
@@ -177,4 +180,8 @@ html, body {
 
 .toast-body {
     padding: 0.75rem;
+}
+
+.dark-border {
+    border-color: #373A3C;
 }

src/api/static/styles.css

@@ -56,9 +56,12 @@
                 <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">
-                            <i class="bi bi-body-text input-group-text" aria-hidden="true"></i>
-                            <input id="message" name="message" class="form-control form-control-sm" type="text" placeholder="Your Message" aria-label="Ask ChatGPT"></input>
-                            <button type="submit" class="btn btn-outline-light">
+                            <button class="btn btn-outline-dark" onclick="chatUI.clearChat()" aria-label="Start a new chat">
+                                <i class="bi bi-arrow-repeat" aria-hidden="true"></i>
+                            </button>                            
+                            <i class="bi bi-body-text input-group-text dark-border" aria-hidden="true"></i>
+                            <input id="message" name="message" class="form-control form-control-sm dark-border" type="text" placeholder="Your Message" aria-label="Ask ChatGPT"></input>
+                            <button type="submit" class="btn btn-outline-dark" style="border-left-width: 0" aria-label="Submit">
                                 Send <i class="bi bi-send-fill" aria-hidden="true"></i>
                             </button>
                         </div>
@@ -70,20 +73,16 @@
             <div class="col-6 d-flex flex-column h-100 p-3 bg-light border-left" id="document-viewer-section" style="display: none !important;"> <!-- Hidden and no space initially -->
                 <div class="d-flex justify-content-between align-items-center mb-2">
                     <h5 class="mb-0">Document Viewer</h5>
-                    <button id="close-button" class="btn btn-danger">Close</button>
+                    <button id="close-button" class="btn bi-x"></button>
                 </div>
                 <iframe id="document-viewer" class="flex-grow-1 border-0 rounded" style="background-color: white;"></iframe>
             </div>
         </div>
     </div>
 
     <template id="message-template-user">
-        <div class="toast-container position-static w-100 d-flex flex-column align-items-stretch">
+        <div class="toast-container position-static w-100 d-flex flex-column align-items-stretch user">
             <div class="toast fade show w-75 rounded-3 align-self-end">
-                <div class="toast-header text-light background-user">
-                    <i class="bi bi-person me-1" aria-hidden="true"></i>
-                    <strong class="me-auto text-capitalize">You</strong>
-                </div>
                 <div class="toast-body message-content"></div>
             </div>
         </div>
@@ -92,12 +91,7 @@ <h5 class="mb-0">Document Viewer</h5>
     <template id="message-template-assistant">
         <div class="toast-container position-static w-100 d-flex flex-column align-items-stretch">
             <div class="toast fade show w-75 rounded-3 align-self-start">
-                <div class="toast-header text-light background-assistant">
-                    <i class="bi bi-robot me-1" aria-hidden="true"></i>
-                    <strong class="me-auto text-capitalize">Assistant</strong>
-                </div>
                 <div class="toast-body message-content">
-                    <div class="message-text"></div>
                 </div>
             </div>
         </div>