:zap: [Enhance] Replace some bootstrap styles with pure css, and improve color palettes

components/chat_operator.js

@@ -60,9 +60,7 @@ export function get_latest_assistant_messager() {
 }
 
 export function start_latest_message_animation() {
-    get_latest_assistant_messager()
-        .find(".content-displayer")
-        .addClass("inferring");
+    get_latest_assistant_messager().addClass("inferring");
     get_latest_assistant_messager()
         .find(".button-group")
         .find(".regenerate-button")
@@ -71,9 +69,7 @@ export function start_latest_message_animation() {
 }
 
 export function stop_latest_message_animation() {
-    get_latest_assistant_messager()
-        .find(".content-displayer")
-        .removeClass("inferring");
+    get_latest_assistant_messager().removeClass("inferring");
     get_latest_assistant_messager()
         .find(".button-group")
         .find(".regenerate-button")

components/messager.js

@@ -5,7 +5,7 @@ class MessagerViewer {
     }
     create_elements() {
         this.container = $("<div>")
-            .addClass("mt-2 row no-gutters message-viewer position-relative")
+            .addClass("row no-gutters message-viewer position-relative")
             .addClass(`message-${this.message.role}`);
         this.create_role_displayer();
         this.create_content_displayer();
@@ -17,11 +17,8 @@ class MessagerViewer {
     }
     create_role_displayer() {
         this.role_displayer = $("<div>")
-            .addClass("position-absolute px-2")
             .addClass("role-displayer")
-            .css("z-index", "1")
-            .css("padding", "auto")
-            .css("color", "red");
+            .css("z-index", "1");
         if (this.message.role === "user") {
             this.role_displayer.append("You");
         } else {
@@ -30,7 +27,6 @@ class MessagerViewer {
     }
     create_content_displayer() {
         this.content_displayer = $("<div>")
-            .addClass("col-12 px-2 pt-4")
             .addClass("content-displayer")
             .addClass(`chat-${this.message.role}`);
         this.content_displayer.text(this.message.content);

css/default.css

@@ -9,24 +9,45 @@
 }
 
 body {
-    background-image: linear-gradient(90deg, #cdd9fd, #cdd9fd);
+    background-image: linear-gradient(90deg, #eef3ff, #ecf1ff);
 }
 
-.content-displayer {
-    box-shadow: 4px 4px 8px 0px rgba(122, 122, 122, 0.2);
-    background-image: linear-gradient(90deg, #e3eaff, #d6e0fd);
+.message-user,
+.message-assistant {
+    box-shadow: 0px 0px 8px 0px rgba(122, 122, 122, 0.4);
     border-radius: 5px;
+    margin: 30px 0px 30px 0px;
+    padding: 5px 0px 5px 0px;
+    margin: 0px 0px 12px 0px;
+}
+
+.message-user {
+    background-image: linear-gradient(-45deg, #f6f8fe, #e9efff);
+}
+.message-user .role-displayer {
+    color: #1679db;
+}
+
+.message-assistant {
+    background-image: linear-gradient(-45deg, #f4f6fe, #ecedff);
+}
+.message-assistant .role-displayer {
+    color: #d03afe;
+}
+
+.inferring {
+    background-image: linear-gradient(-45deg, #f6f8fe, #fff5e5);
 }
 
 #user-interactions {
-    box-shadow: 4px 4px 8px 0px rgba(122, 122, 122, 0.2);
-    background-image: linear-gradient(30deg, #e3eaff, #d6e0fd);
+    box-shadow: 0px 2px 8px 0px rgba(122, 122, 122, 0.4);
+    background-image: linear-gradient(-45deg, #eef3ff, #e9efff);
     border-radius: 10px;
 }
 
 #chat-history-sidebar {
-    box-shadow: 4px 4px 8px 0px rgba(122, 122, 122, 0.2);
-    background-image: linear-gradient(90deg, #cdd9fd, #d6e0fd);
+    box-shadow: 0px 0px 8px 0px rgba(122, 122, 122, 0.4);
+    background-image: linear-gradient(-45deg, #eef3ff, #e9efff);
     border-width: 0px;
     opacity: 0.8;
 }
@@ -52,6 +73,7 @@ body {
 #chat-session-container {
     overflow-y: auto;
     overflow-x: hidden;
+    padding: 0px;
 }
 
 #user-input {
@@ -61,14 +83,14 @@ body {
 
 .chat-user {
     color: black;
-    border: lightgray 1px solid;
-    background-color: #eafaf1;
+    /* border: lightgray 1px solid; */
+    /* background-color: #eafaf1; */
     white-space: pre-wrap;
 }
 
 .chat-assistant {
     /* color: blue; */
-    border: lightgray 1px solid;
+    /* border: lightgray 1px solid; */
 }
 
 #available-models-select {
@@ -130,10 +152,6 @@ body {
     animation: blink 2s infinite;
 }
 
-.inferring {
-    background-color: rgba(255, 147, 40, 0.25);
-}
-
 .fa:hover {
     color: lightsalmon;
     transform: scale(1.25);

index.html

@@ -44,7 +44,7 @@
             </div>
         </div>
         <div id="chat-session-container" class="container">
-            <div id="messagers-container" class="container my-3 py-1"></div>
+            <div id="messagers-container" class="container mt-3 py-1"></div>
         </div>
         <div id="user-interactions" class="container fixed-bottom mb-3">
             <div id="endpoint-and-api-key-items">