:zap: [Enhance] Improve generating status display, and move regenerate button from assistant message to user

apps/llm_mixer/js/buttons_binder.js

@@ -56,10 +56,7 @@ export class ButtonsBinder {
         console.log("Send");
         let button_icon = button.find("i");
         button.attr("status", "stop").attr("title", "Stop");
-        button_icon
-            .removeClass()
-            .addClass("fa fa-circle-pause fa-fade")
-            .css("color", "orange");
+        button_icon.removeClass().addClass("fa fa-circle-pause fa-fade-fast");
         await this.post_user_input();
         await this.stop(button);
     }

apps/llm_mixer/js/chat_operator.js

@@ -32,26 +32,30 @@ export function get_latest_message_content_displayer() {
     return get_latest_messager_container().find(".content-displayer");
 }
 
+export function get_latest_user_messager() {
+    return $(".message-user").last();
+}
+
 export function start_latest_message_animation() {
-    return get_latest_messager_container()
+    get_latest_messager_container()
+        .find(".content-displayer")
+        .addClass("blinking");
+    get_latest_user_messager()
         .find(".button-group")
-        .find(".generate-button")
+        .find(".regenerate-button")
         .find("i")
-        .addClass("fa-spin-fast")
-        .css("color", "orange");
+        .addClass("fa-spin-fast");
 }
 
 export function stop_latest_message_animation() {
-    let generate_button = get_latest_messager_container()
+    get_latest_messager_container()
+        .find(".content-displayer")
+        .removeClass("blinking");
+    get_latest_user_messager()
         .find(".button-group")
-        .find(".generate-button");
-    let generate_button_icon = generate_button
+        .find(".regenerate-button")
         .find("i")
-        .removeClass("fa-spin-fast")
-        .css("color", "green");
-    generate_button
-        .removeClass("generate-button")
-        .addClass("regenerate-button");
+        .removeClass("fa-spin-fast");
 }
 
 export function get_request_messages() {

apps/llm_mixer/js/default.css

@@ -40,6 +40,12 @@
 
 .fa-spin-fast {
     animation: fa-spin 0.6s infinite linear;
+    color: orange;
+}
+
+.fa-fade-fast {
+    animation: fa-fade 1.5s infinite linear;
+    color: orange;
 }
 
 .message-viewer .edit-button,
@@ -53,3 +59,19 @@
 .message-viewer:hover .regenerate-button {
     display: inline-block;
 }
+
+@keyframes blink {
+    0% {
+        background-color: transparent;
+    }
+    50% {
+        background-color: antiquewhite;
+    }
+    100% {
+        background-color: transparent;
+    }
+}
+
+.blinking {
+    animation: blink 2s infinite;
+}

apps/llm_mixer/js/messager.js

@@ -4,9 +4,9 @@ export class MessagerViewer {
         this.create_elements();
     }
     create_elements() {
-        this.container = $("<div>").addClass(
-            "mt-2 row no-gutters message-viewer"
-        );
+        this.container = $("<div>")
+            .addClass("mt-2 row no-gutters message-viewer")
+            .addClass(`message-${this.message.role}`);
         this.create_role_displayer();
         this.create_content_displayer();
         this.create_button_group();
@@ -52,13 +52,13 @@ export class MessagerViewer {
         this.button_group.append(this.copy_button);
 
         if (this.message.role === "user") {
-        } else {
             this.regenerate_button = $("<button>")
                 .addClass("btn px-2")
-                .addClass("generate-button")
+                .addClass("regenerate-button")
                 .attr("title", "Regenerate")
-                .append($("<i>").addClass("fa fa-rotate fa-spin-fast"));
+                .append($("<i>").addClass("fa fa-rotate"));
             this.button_group.append(this.regenerate_button);
+        } else {
         }
     }
 }