:gem: [Feature] Support table and footnote rendering

apps/llm_mixer/js/buttons_binder.js

@@ -4,6 +4,7 @@ import {
     stop_latest_message_animation,
     start_latest_message_animation,
     create_new_chat_session,
+    get_latest_message_content_displayer,
 } from "./chat_operator.js";
 
 export function bind_chat_buttons() {
@@ -79,6 +80,7 @@ class SendUserInputButtonBinder {
             .addClass("fa fa-paper-plane")
             .addClass("icon-success");
         hljs.highlightAll();
+        console.log(get_latest_message_content_displayer().data("raw_content"));
     }
 }
 

apps/llm_mixer/js/chat_operator.js

@@ -1,4 +1,5 @@
 import { Messager, MessagerList } from "./messager.js";
+import { transform_footnote } from "./stream_jsonizer.js";
 
 let messagers_container = $("#messagers-container");
 let available_models_select = $("#available-models-select");
@@ -7,6 +8,7 @@ let temperature_select = $("#temperature-select");
 let messager_list = new MessagerList(messagers_container);
 let chat_history = [messager_list];
 let md_to_html_converter = new showdown.Converter();
+md_to_html_converter.setFlavor("github");
 
 export function get_active_messager_list() {
     return chat_history[chat_history.length - 1];
@@ -103,10 +105,12 @@ export function update_message(json_chunks, content_displayer = null) {
                 content;
             content_displayer.html(
                 md_to_html_converter.makeHtml(
-                    content_displayer.attr("raw_text")
+                    transform_footnote(content_displayer.data("raw_content"))
                 )
             );
-            content_displayer.find("*").addClass("no-margin-bottom");
+            content_displayer
+                .find("table")
+                .addClass("table table-bordered table-hover");
         }
         if (finish_reason === "stop") {
             console.log("[STOP]");

apps/llm_mixer/js/default.css

@@ -60,6 +60,10 @@
     display: inline-block;
 }
 
+.message-viewer * {
+    margin-bottom: 0;
+}
+
 @keyframes blink {
     0% {
         background-color: transparent;
@@ -83,7 +87,3 @@
 .icon-success {
     color: green;
 }
-
-.no-margin-bottom {
-    margin-bottom: 0;
-}

apps/llm_mixer/js/stream_jsonizer.js

@@ -18,3 +18,9 @@ export function jsonize_stream_data(data) {
         });
     return json_chunks;
 }
+
+export function transform_footnote(text) {
+    return text
+        .replace(/\[\^(\d+)\^\]\[\d+\]/g, "[$1]")
+        .replace(/\[(\d+)\]:\s*(.*)\s*""/g, "[$1] $2 \n");
+}