Merge pull request #36 from Azure-Samples/m-hietala/ui_update

M-Hietala · web-flow · commit f4431fb525f6 · 2025-03-06T16:44:09.000-06:00
ui update
diff --git a/src/api/static/main.js b/src/api/static/main.js
@@ -9,12 +9,18 @@ function initChat() {
     const chatClient = new ChatClient(chatUI);
 
     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 = "";
     });
@@ -24,4 +30,4 @@ function initChat() {
     };
 }
 
-document.addEventListener("DOMContentLoaded", initChat);
+document.addEventListener("DOMContentLoaded", initChat);
diff --git a/src/api/templates/index.html b/src/api/templates/index.html
@@ -12,14 +12,44 @@
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootswatch@5.2.3/dist/cosmo/bootstrap.min.css"
         integrity="sha256-axRDISYf7Hht1KhcMnfDV2nq7hD/8Q9Rxa0YlW/o3NU=" crossorigin="anonymous">
     <link href="/static/styles.css" rel="stylesheet" type="text/css">
+    <style>
+        #messages {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            text-align: center;
+        }
+        #placeholder-wrapper {
+            display: flex;
+            flex-grow: 1;
+            justify-content: center;
+            align-items: center;
+            width: 100%;
+        }
+        #placeholder-message {
+            color: #6c757d;
+        }
+        .header {
+            font-size: 2em;
+            font-weight: bold;
+            margin-bottom: 10px;
+        }
+        .message-content {
+            text-align: left;
+        }
+    </style>
 </head>
 <body>
     <div class="container-fluid h-100 d-flex flex-row">
         <div class="row flex-grow-1 h-100">
             <!-- Chat Section -->
             <div class="col-full d-flex flex-column h-100" id="chat-container"> <!-- Full width initially -->
                 <div id="messages" class="px-4 pb-4 pt-2 flex-grow-1 overflow-y-auto align-items-stretch">
-                    <!-- Message content goes here -->
+                    <div id="placeholder-wrapper">
+                        <div id="placeholder-message" class="text-center text-muted my-3">
+                            <div class="header">Getting Started with Agents Using Azure AI Foundry</div>
+                            Type your message below. You can start casually with something fun like "Tell me a joke," or ask specifically about the Azure Search files, such as "What is Contoso Galaxy Innovations product?"                        </div>
+                    </div>
                 </div>
                 
                 <div id="chat-area" class="text-light px-4 py-2 rounded-top text-dark d-flex flex-column justify-content-center background-user">
@@ -76,4 +106,4 @@ <h5 class="mb-0">Document Viewer</h5>
     <script src="https://cdn.jsdelivr.net/npm/markdown-it/dist/markdown-it.min.js"></script>
     <script type="module" src="/static/main.js"></script>
 </body>
-</html>
+</html>
