stylizing chatbot interface

app.py

@@ -19,6 +19,52 @@ from text_generation import Client
 
 from utils import get_full_text, wrap_html_code
 
+STYLE = """
+
+// for the last chat message on user side
+.message.user.latest {
+    background-color: #F9FBE7;
+    border: none;
+    color: black;
+}
+
+// for the last chat message on bot side
+.message.bot.latest {
+    background-color: #CE93D8;
+    border: none;
+    color: black;
+}
+
+// when user hovers on the two answers
+// generated by a language model
+.message.bot.latest:hover {
+    box-shadow: 0 0 15px 0.5px #E1BEE7 !important;
+}
+
+// "done" class is injected when user has made
+//  decision between two candidate generated answers
+.message.bot.done {
+  animation: colorTransition 2s ease-in-out;
+}
+
+// fade out animation effect when user selects a choice
+@keyframes colorTransition {
+  0% {
+    background-color: var(--checkbox-background-color-selected);
+  }
+  100% {
+    background-color: var(--background-fill-secondary);
+  }
+}
+
+.button:active {
+  color: black;
+  border: none;
+  background-color: #CE93D8 !important;
+  box-shadow: 0 0 15px 0.5px #F3E5F5 !important;
+}
+"""
+
 HF_TOKEN = os.environ.get("HF_TOKEN", None)
 REPO_ID = "sheonhan/rm-test-data"
 API_URL = "https://api-inference.huggingface.co/models/HuggingFaceH4/starcoderbase-finetuned-oasst1"
@@ -134,7 +180,7 @@ def on_select(event: gr.SelectData, history):
     return history
 
 
-with gr.Blocks() as demo:
+with gr.Blocks(css=STYLE) as demo:
     chatbot = gr.Chatbot()
     user_message = gr.Textbox()
     clear = gr.Button("Clear")
@@ -144,9 +190,28 @@ with gr.Blocks() as demo:
         [user_message, chatbot],
         [user_message, chatbot],
         queue=False,
+    ).then(
+      None, None, None,
+      _js="""()=>{
+
+      let last_elem = document.querySelector("div.message.bot.done");
+      last_elem.classList.remove("done");
+}
+"""
     )
 
-    chatbot.select(on_select, chatbot, chatbot)
+    chatbot.select(
+        on_select, chatbot, chatbot
+    ).then(
+      None, None, None,
+      _js="""()=>{
+
+      let last_elem = document.querySelector("div.message.bot.latest");
+      last_elem.classList.remove("latest");
+      last_elem.classList.add("done");
+}
+"""
+    )
 
     clear.click(lambda: None, None, chatbot, queue=False)