feat: refresh UI (#239)

Goal was to make app look more like a mobile app. Updated logo for messages, as discussed with Andy, followed the pattern seen in most support chat apps https://thepointsguy.global.ssl.fastly.net/us/originals/2020/06/IMG_9827.jpg https://www.wordstream.com/wp-content/uploads/2021/07/chatbots-customer-service.png <img width="498" alt="Screenshot 2024-02-27 at 12 11 21 AM" src="https://github.com/GoogleCloudPlatform/genai-databases-retrieval-app/assets/42976936/f8b08e94-b77a-4cf6-a8c1-981515d879d3"> Co-authored-by: Mahyar <mahyar@google.com> Co-authored-by: Yuan <45984206+Yuan325@users.noreply.github.com>
GoogleCloudPlatform · Mar 6, 2024 · df3fb5a · df3fb5a
1 parent 174d933
commit df3fb5a
Show file tree

Hide file tree

Showing 4 changed files with 62 additions and 19 deletions.
diff --git a/llm_demo/static/index.css b/llm_demo/static/index.css
@@ -26,7 +26,7 @@ body {
 
 .container {
     position: relative;
-    width: 70%;
+    width: 100%;
     margin: 0px auto;
     height: 100%;
     display: flex;
@@ -35,10 +35,17 @@ body {
 
 .chat-header {
     position: relative;
-    min-width: 650px;
-    font-size: 16px;
+    min-width: 600px;
+    font-size: 28px;
     font-weight: 500;
     text-align: center;
+    height: 45px;
+    background: #181a23;
+    color: white;
+    margin-bottom: 30px;
+    padding-top: 15px;
+    padding-left: 20px;
+    padding-right: 20px;
 }
 
 #g_id_onload,
@@ -48,12 +55,14 @@ body {
     right: 30px;
 }
 
+#menuButton {
+    float: left;
+    cursor: pointer;
+}
+
 #resetButton {
-    font-size: 28px;
+    float: right;
     cursor: pointer;
-    position: absolute;
-    top: 27px;
-    right: 0px;
 }
 
 #resetButton:hover {
@@ -65,6 +74,8 @@ body {
     flex-direction: column;
     overflow: hidden;
     height: 100%;
+    padding-left: 20px;
+    padding-right: 20px;
 }
 
 .chat-content {
@@ -79,6 +90,7 @@ div.chat-content>span {
 .chat-bar {
     position: relative;
     margin-top: auto;
+    margin-bottom: 15px;
     border: 1px solid #212A3E;
     border-radius: 10px;
     overflow: hidden;
@@ -98,37 +110,66 @@ div.chat-content>span {
 }
 
 .chat-bubble {
-    display: block;
-    padding: 50px;
+    display: inline-block;
     overflow-wrap: break-word;
+    clear: both;
+    margin-bottom: 10px;
+    width: 100%;
 }
 
 .chat-bubble p {
     margin: 0;
     padding: 0;
 }
 
-div.chat-wrapper div.chat-content span.ai {
+div.chat-wrapper div.chat-content div.ai span {
     position: relative;
     width: 70%;
     height: auto;
     display: inline-block;
     padding: 10px 12px;
-    background: #9BA4B5;
+    background: #efefef;
     color: #212A3E;
-    border-radius: 2px 15px 15px 15px;
+    border-radius: 10px;
 }
 
-div.chat-wrapper div.chat-content span.human {
+div.chat-wrapper div.chat-content div.human span {
     position: relative;
     float: right;
     width: 70%;
     height: auto;
     display: inline-block;
     padding: 10px 12px;
-    background: #212A3E;
+    background: #2a3ee5;
     color: #F1F6F9;
-    border-radius: 15px 2px 15px 15px;
+    border-radius: 10px;
+}
+
+div.chat-wrapper div.chat-content div.human .sender-icon {
+    display: none;
+}
+
+div.chat-wrapper div.chat-content div.ai .sender-icon {
+    border-radius: 50%;
+    width: 40px;
+    height: 40px;
+    overflow: hidden;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    float: left;
+    margin-right: 15px;
+}
+
+div.chat-wrapper div.chat-content div .sender-icon img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+}
+
+.send-icon {
+    margin-top:12px;
+    margin-right:12px;
 }
 
 *:focus {

diff --git a/llm_demo/static/index.js b/llm_demo/static/index.js
@@ -77,7 +77,9 @@ async function reset() {
 
 // Helper function to print to chatroom
 function log(name, msg) {
-    let message = `<span class="chat-bubble ${name}">${msg}</span>`;
+    let message = `<div class="chat-bubble ${name}">
+        <div class="sender-icon"><img src="static/logo.png"></div>
+        <span>${msg}</span></div>`;
     $('.chat-content').append(message);
     $('.chat-content').scrollTop($('.chat-content').prop("scrollHeight"));
 }
diff --git a/llm_demo/static/logo.png b/llm_demo/static/logo.png
diff --git a/llm_demo/templates/index.html b/llm_demo/templates/index.html
@@ -33,7 +33,7 @@
 </head>
 
 <body>
-    
+
     <div class="container">
         <div class="chat-header">
             <h1>Cymbal Air Customer Service Assistant</h1>
@@ -58,7 +58,7 @@ <h1>Cymbal Air Customer Service Assistant</h1>
                 {# Add Chat history #}
                 {% if messages %}
                     {% for message in messages %}
-                    <span class="chat-bubble {{ message["type"] }}">{{ message["data"]["content"] | safe }}</span>
+                    <div class="chat-bubble {{ message["type"] }}"><div class="sender-icon"><img src="static/logo.png"></div><span>{{ message["data"]["content"] | safe }}</span></div>
                     {% endfor %}
                 {% endif %}
             </div>
@@ -83,7 +83,7 @@ <h1>Cymbal Air Customer Service Assistant</h1>
 <script src="static/index.js"></script>
 <script>
   document.getElementById('g_id_onload').setAttribute('data-client_id', '{{ client_id }}');
-  var currentUrl = window.location.href; 
+  var currentUrl = window.location.href;
   var loginUri = currentUrl + 'login/google';
   document.getElementById('g_id_onload').setAttribute('data-login_uri', loginUri);
 </script>