From 0a868ba37336549f8a14dc9a3067ae02f005bee4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Erik=20Bj=C3=A4reholt?= <erik@bjareho.lt>
Date: Tue, 8 Oct 2024 17:59:07 +0200
Subject: [PATCH] fix(webui): switch to marked over showdown, improved styling
 and misc fixes

---
 gptme/server/static/index.html | 16 +++++----
 gptme/server/static/main.js    | 59 ++++++++++++++++++----------------
 gptme/server/static/style.css  |  8 ++---
 3 files changed, 44 insertions(+), 39 deletions(-)

diff --git a/gptme/server/static/index.html b/gptme/server/static/index.html
index 37ead131..ece04b66 100644
--- a/gptme/server/static/index.html
+++ b/gptme/server/static/index.html
@@ -7,7 +7,9 @@
     <!-- Scripts -->
     <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.4/moment.min.js"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/showdown/2.1.0/showdown.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/marked/lib/marked.umd.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/marked-highlight/lib/index.umd.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.10.0/highlight.min.js" integrity="sha512-6yoqbrcLAHDWAdQmiRlHG4+m0g/CT/V9AGyxabG8j7Jk8j3r3K6due7oqpiRMZqcYe9WM2gPcaNNxnl2ux+3tA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
 
     <!-- Styles -->
     <script src="https://cdn.tailwindcss.com"></script>
@@ -43,7 +45,7 @@
       <div class="flex h-full">
 
         <!-- Sidebar -->
-        <div class="flex-none w-64 bg-white shadow-lg overflow-y-auto">
+        <div class="sidebar flex-none w-64 overflow-y-auto">
           <div class="px-3 py-4">
             <h1 class="text-3xl font-bold mb-6 text-gray-800">gptme</h1>
             <div class="mb-4">
@@ -60,8 +62,8 @@ <h1 class="text-3xl font-bold mb-6 text-gray-800">gptme</h1>
                      @click="selectConversation(conversation.name)">
                     <div class="font-medium text-blue-600">{{ conversation.name }}</div>
                     <div class="text-xs text-gray-500 mt-1">
-                      Messages: {{ conversation.messages }} |
-                      Modified: {{ fromNow(1000 * conversation.modified) }}
+                      {{ conversation.messages }} msgs |
+                      {{ fromNow(1000 * conversation.modified) }}
                     </div>
                   </a>
                 </li>
@@ -80,17 +82,17 @@ <h1 class="text-3xl font-bold mb-6 text-gray-800">gptme</h1>
         <!-- Main content -->
         <div class="flex-grow flex">
           <!-- Welcome message -->
-          <div v-if="!selectedConversation" class="bg-white shadow-lg rounded-lg p-8">
+          <div v-if="!selectedConversation" class="shadow-lg rounded-lg p-8">
             <h2 class="text-3xl font-bold mb-6 text-gray-700">Welcome to gptme</h2>
             <p class="text-lg text-gray-600">Select a conversation from the sidebar or create a new one to get started.</p>
           </div>
 
           <!-- Chat contents -->
           <div v-else class="chat flex flex-col w-full">
-            <div class="chat-header bg-white shadow-lg rounded-t-lg p-6">
+            <div class="chat-header rounded-t-lg p-4">
               <div class="flex flex-col md:flex-row justify-between items-start md:items-center">
                 <h1 class="text-2xl font-bold text-gray-800 mb-2 md:mb-0">{{ selectedConversation }}</h1>
-                <div class="text-sm text-gray-600 flex flex-col">
+                <div class="text-sm text-gray-400 flex flex-col">
                   <span class="mr-0 md:mr-4 mb-1 md:mb-0">Messages: {{ chatLog.length }}</span>
                   <span class="mr-0 md:mr-4 mb-1 md:mb-0">Modified: {{ fromNow(new Date(chatLog[chatLog.length - 1]?.timestamp)) }}</span>
                   <span>Created: {{ fromNow(new Date(chatLog[0]?.timestamp)) }}</span>
diff --git a/gptme/server/static/main.js b/gptme/server/static/main.js
index 691a4f17..d58a0b89 100644
--- a/gptme/server/static/main.js
+++ b/gptme/server/static/main.js
@@ -1,7 +1,23 @@
-import showdownHighlight from "https://cdn.jsdelivr.net/npm/showdown-highlight@3.1.0/+esm";
-
 const apiRoot = "/api/conversations";
 
+const markedHighlight = globalThis.markedHighlight.markedHighlight;
+const Marked = globalThis.marked.Marked;
+const hljs = globalThis.hljs;
+
+const marked = new Marked(
+  markedHighlight({
+    langPrefix: "hljs language-",
+    highlight(code, lang, info) {
+      // check if info has ext, if so, use that as lang
+      lang = info.split(".")[1] || lang;
+      console.log(info);
+      console.log(lang);
+      const language = hljs.getLanguage(lang) ? lang : "plaintext";
+      return hljs.highlight(code, { language }).value;
+    },
+  })
+);
+
 new Vue({
   el: "#app",
   data: {
@@ -227,33 +243,22 @@ new Vue({
       return moment(new Date(timestamp)).fromNow();
     },
     mdToHtml(md) {
-      const converter = new showdown.Converter({
-        extensions: [
-          showdownHighlight({ auto_detection: false }),
-          this.wrapCodeBlocksInDetails,
-        ],
-        pre: true,
-      });
-      return converter.makeHtml(md);
+      // TODO: Use DOMPurify.sanitize
+      let html = marked.parse(md);
+      html = this.wrapBlockInDetails(html);
+      return html;
     },
 
-    wrapCodeBlocksInDetails() {
-      return [
-        {
-          type: "output",
-          filter: function (text) {
-            const codeBlockRegex =
-              /<pre><code class="([^"]+)">([\s\S]*?)<\/code><\/pre>/g;
-            return text.replace(
-              codeBlockRegex,
-              function (match, classes, code) {
-                const langtag = classes.split(" ")[1] || "Code";
-                return `<details><summary>${langtag}</summary><pre><code class="${classes}">${code}</code></pre></details>`;
-              }
-            );
-          },
-        },
-      ];
+    wrapBlockInDetails(text) {
+      const codeBlockRegex =
+        /<pre><code class="([^"]+)">([\s\S]*?)<\/code><\/pre>/g;
+      return text.replace(codeBlockRegex, function (match, classes, code) {
+        const langtag = (classes.split(" ")[1] || "Code").replace(
+          "language-",
+          ""
+        );
+        return `<details><summary>${langtag}</summary><pre><code class="${classes}">${code}</code></pre></details>`;
+      });
     },
     changeSort(sortBy) {
       // if already sorted by this field, reverse the order
diff --git a/gptme/server/static/style.css b/gptme/server/static/style.css
index 0355f474..4aa2d862 100644
--- a/gptme/server/static/style.css
+++ b/gptme/server/static/style.css
@@ -22,7 +22,8 @@ body {
 
 .sidebar {
   background-color: var(--sidebar-bg);
-  border-right: 1px solid var(--border-color);
+  border-right: 2px solid var(--border-color);
+  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
 }
 
 .chat {
@@ -41,7 +42,7 @@ body {
   transition: all 0.3s ease;
   margin-bottom: 2rem;
   border-radius: 0.75rem;
-  background-color: var(--main-content-bg);
+  background-color: #fff;
   box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
   padding: 1.5rem;
   line-height: 1;
@@ -91,10 +92,7 @@ body {
 }
 
 .chat-msg code {
-  background-color: #1a202c;
-  color: white;
   border-radius: 0.375rem;
-  padding: 0.25rem 0.5rem;
   font-size: 0.875rem;
 }