Switch to `svelte-markdown`

package-lock.json

@@ -14,12 +14,13 @@
         "@tsconfig/svelte": "^3.0.0",
         "@types/marked": "^4.0.8",
         "bulma": "^0.9.4",
-        "marked": "^4.2.12",
         "postcss": "^8.4.21",
         "sass": "^1.58.3",
         "svelte": "^3.55.1",
         "svelte-check": "^3.0.4",
+        "svelte-highlight": "^7.2.0",
         "svelte-local-storage-store": "^0.4.0",
+        "svelte-markdown": "^0.2.3",
         "tslib": "^2.5.0",
         "typescript": "^4.9.3",
         "vite": "^4.1.0"
@@ -828,6 +829,15 @@
         "node": ">= 0.4.0"
       }
     },
+    "node_modules/highlight.js": {
+      "version": "11.7.0",
+      "resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-11.7.0.tgz",
+      "integrity": "sha512-1rRqesRFhMO/PRF+G86evnyJkCgaZFOI+Z6kdj15TA18funfoqJXvgPCLSf0SWq3SRfg1j3HlDs8o4s3EGq1oQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=12.0.0"
+      }
+    },
     "node_modules/immutable": {
       "version": "4.2.4",
       "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.2.4.tgz",
@@ -1438,6 +1448,15 @@
         "svelte": "^3.55.0"
       }
     },
+    "node_modules/svelte-highlight": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/svelte-highlight/-/svelte-highlight-7.2.0.tgz",
+      "integrity": "sha512-mOJltSmozHNuaIE4tglrOBQ9X/8sKoQMJfqm+YZUuHvzfAcefWtZVDFml2oUrEv8iehM79mdA9+0orhUWIrxWw==",
+      "dev": true,
+      "dependencies": {
+        "highlight.js": "11.7.0"
+      }
+    },
     "node_modules/svelte-hmr": {
       "version": "0.15.1",
       "resolved": "https://registry.npmjs.org/svelte-hmr/-/svelte-hmr-0.15.1.tgz",
@@ -1462,6 +1481,19 @@
         "svelte": "^3.48.0"
       }
     },
+    "node_modules/svelte-markdown": {
+      "version": "0.2.3",
+      "resolved": "https://registry.npmjs.org/svelte-markdown/-/svelte-markdown-0.2.3.tgz",
+      "integrity": "sha512-2h680NzTXnAD0CXhxe3GeHl6W+ayG4iKQRl+BIDRw+R0mUE0OiNxP1Vt8Rn+aWevB/LBiBIPCAwvL+0BkG057A==",
+      "dev": true,
+      "dependencies": {
+        "@types/marked": "^4.0.1",
+        "marked": "^4.0.10"
+      },
+      "peerDependencies": {
+        "svelte": "^3.0.0"
+      }
+    },
     "node_modules/svelte-preprocess": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/svelte-preprocess/-/svelte-preprocess-5.0.1.tgz",

package.json

@@ -17,12 +17,13 @@
     "@tsconfig/svelte": "^3.0.0",
     "@types/marked": "^4.0.8",
     "bulma": "^0.9.4",
-    "marked": "^4.2.12",
     "postcss": "^8.4.21",
     "sass": "^1.58.3",
     "svelte": "^3.55.1",
     "svelte-check": "^3.0.4",
+    "svelte-highlight": "^7.2.0",
     "svelte-local-storage-store": "^0.4.0",
+    "svelte-markdown": "^0.2.3",
     "tslib": "^2.5.0",
     "typescript": "^4.9.3",
     "vite": "^4.1.0"

src/lib/Chat.svelte

@@ -4,8 +4,8 @@
   import { apiKeyStorage, chatsStorage, addMessage, clearMessages } from "./Storage.svelte";
   import type { Response, Message } from "./Types.svelte";
 
-  import { marked } from "marked";
   import { afterUpdate, onMount } from "svelte";
+  import SvelteMarkdown from "svelte-markdown";
 
   export let chatId: number;
   let updating: boolean = false;
@@ -24,10 +24,11 @@
     input.focus();
   });
 
-  marked.setOptions({
+  // Marked options
+  const markedownOptions = {
     gfm: true,
     breaks: true,
-  });
+  };
 
   const send = async () => {
     // Compose the input message
@@ -159,17 +160,35 @@
         >
           ✏️
         </a>
-        {@html marked(message.content)}
+        <SvelteMarkdown
+          source={message.content}
+          options={markedownOptions}
+          renderers={{
+            /*code: Code*/
+          }}
+        />
       </div>
     </article>
   {:else if message.role === "system"}
     <article class="message is-danger">
-      <div class="message-body">{@html marked(message.content)}</div>
+      <SvelteMarkdown
+        source={message.content}
+        options={markedownOptions}
+        renderers={{
+          /*code: Code*/
+        }}
+      />
     </article>
   {:else}
     <article class="message is-success">
       <div class="message-body">
-        {@html marked(message.content)}
+        <SvelteMarkdown
+          source={message.content}
+          options={markedownOptions}
+          renderers={{
+            /*code: Code*/
+          }}
+        />
         {#if message.usage}
           <p class="is-size-7">
             This message was generated using <span class="has-text-weight-bold">{message.usage.total_tokens}</span>

src/lib/Code.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+  // Disabled for now - it blows up the size too much
+  import { HighlightAuto } from "svelte-highlight";
+  import style from "svelte-highlight/styles/edge-light";
+
+  export let type: "code";
+  export let raw: string;
+  export let codeBlockStyle: "indented" | undefined = undefined;
+  export let lang: string | undefined = undefined;
+  export let text: string;
+
+  // Disable warnings
+  type = "code";
+  raw;
+  codeBlockStyle;
+  lang;
+</script>
+
+<svelte:head>
+  {@html style}
+</svelte:head>
+
+<HighlightAuto code={text} />