feat: message format, pretty markdown

frontend/src/components/Message.vue

@@ -4,13 +4,17 @@ import { marked } from "marked";
 import * as backend from '../backend';
 marked.use({
   renderer: {
-    code (code, infostring, escaped) {
-      let langElem = infostring ? 
-        `<div class="language">${infostring}</div>` : "";
+    code ({lang, text}) {
+      let langElem = lang ? 
+        `<div class="code-lang">${lang}</div>` : "";
+
+      const div = document.createElement('div');
+      div.textContent = text;
+      const escaped = div.innerHTML;
 
       return `<div class="code">
         ${langElem}
-        <div class="content">${code}</div>
+        <div class="code-content">${escaped}</div>
       </div>`;
     }
   }
@@ -111,7 +115,7 @@ watch(() => [props.message.format, props.message.content], ([newFormat, newConte
     <template v-if="message.type == 'message' || message.type == null">
       <div v-if="message.sender != 'user'" class="sender">{{message.sender}}</div>
 
-      <div v-if="format == 'markdown'" v-html="marked.parse(message.content)" class="content"></div>
+      <div v-if="format == 'markdown'" v-html="marked.parse(message.content)" class="md-content" style="white-space: collapse;"></div>
       <div v-else class="content">{{content}}</div>
     </template>
 
@@ -189,14 +193,6 @@ watch(() => [props.message.format, props.message.content], ([newFormat, newConte
   margin-right: 2em;
 }
 
-.message .content {
-  white-space: preserve;
-}
-
-.message ul, .message ol {
-  white-space: normal;
-}
-
 .message .sender,
 .note .sender {
   font-weight: bold;
@@ -288,4 +284,38 @@ watch(() => [props.message.format, props.message.content], ([newFormat, newConte
   font-style: normal;
   font-weight: bold;
 }
+
+.md-content {
+  white-space: collapse;
+  width: fit-content;
+  max-width: 50em;
+  line-height: normal;
+  word-wrap: anywhere;
+}
+
+</style>
+
+<style>
+/* Code blocks are generated at runtime, these styles cannot be scoped */
+
+.code {
+  background-color: var(--color-surface-input);
+  border-radius: var(--border-radius);
+  margin: .5em 0;
+  padding: .5em;
+}
+
+.code-lang {
+  padding-bottom: .5em;
+  margin-top: -.5em;
+  font-weight: bold;
+  user-select: none;
+}
+
+.code-content {
+  white-space: pre;
+  font-family: monospace;
+  overflow-x: auto;
+  line-height: 1.6rem;
+}
 </style>