:gem: [Feature] MessageViewer: Messager with role and modle name, and button

apps/llm_mixer/js/chat_operator.js

@@ -25,8 +25,11 @@ export function get_selected_llm_model() {
     return available_models_select.val();
 }
 
-export function get_latest_message_viewer() {
-    return messagers_container.children().last();
+export function get_latest_message_content_displayer() {
+    return messager_list.messagers_container
+        .children()
+        .last()
+        .find(".content-displayer");
 }
 export function get_request_messages() {
     return messager_list.get_request_messages();
@@ -36,9 +39,9 @@ export function pop_messager(n = 2) {
     return messager_list.pop(n);
 }
 
-export function update_message(json_chunks, message_viewer = null) {
-    if (message_viewer === null) {
-        message_viewer = get_latest_message_viewer();
+export function update_message(json_chunks, content_displayer = null) {
+    if (content_displayer === null) {
+        content_displayer = get_latest_message_content_displayer();
     }
     json_chunks.forEach(function (item) {
         let choice = item.choices[0];
@@ -55,7 +58,7 @@ export function update_message(json_chunks, message_viewer = null) {
             console.log("[STOP]");
         }
         console.log(item);
-        message_viewer.append(content);
+        content_displayer.append(content);
     });
     return json_chunks;
 }

apps/llm_mixer/js/messager.js

@@ -1,4 +1,36 @@
-import { get_request_messages } from "./chat_operator.js";
+export class MessagerViewer {
+    constructor(message) {
+        this.message = message;
+        this.create_elements();
+    }
+    create_elements() {
+        this.container = $("<div>").addClass("row no-gutters message-viewer");
+        this.role_displayer = $("<div>").addClass("col-auto role-displayer");
+        if (this.message.role === "user") {
+            this.role_displayer.append("You");
+        } else {
+            this.role_displayer.append(this.message.model);
+        }
+        this.role_displayer.append(this.message.model);
+        this.content_displayer = $("<div>")
+            .addClass(
+                `col mb-2 p-2 content-displayer chat-${this.message.role}`
+            )
+            .append(this.message.content);
+        this.button = $("<button>").addClass(
+            "col-auto btn btn-primary regenerate-button"
+        );
+        if (this.message.role === "user") {
+            this.button.append("Edit");
+        } else {
+            this.button.append("Regenerate");
+        }
+        this.container
+            .append(this.role_displayer)
+            .append(this.content_displayer)
+            .append(this.button);
+    }
+}
 
 export class Messager {
     constructor(message) {
@@ -13,8 +45,8 @@ export class Messager {
         };
     }
     create_viewer() {
-        this.viewer = $("<div>").addClass(`chat-${this.message.role} mb-2 p-2`);
-        this.viewer.append(this.message.content);
+        let messager_viewer = new MessagerViewer(this.message);
+        this.viewer = messager_viewer.container;
     }
 }