Markdown message (half) support

frontend/src/components/Message.vue

@@ -0,0 +1,113 @@
+<script setup>
+import { marked } from "marked";
+marked.use({
+  renderer: {
+    code (code, infostring, escaped) {
+      let langElem = infostring ? 
+        `<div class="language">${infostring}</div>` : "";
+
+      return `<div class="code">
+        ${langElem}
+        <div class="content">${code}</div>
+      </div>`;
+    }
+  }
+});
+
+const props = defineProps({
+  message: {
+    type: Object,
+    required: true
+  }
+});
+
+function chatEntryClass(msg) {
+  if (msg.type == 'note') {
+    return ['note'];
+  } else if (msg.type == 'message') {
+    return ['message', msg.sender == 'user' ? 'sent' : 'received'];
+  } else if (msg.type == 'log') {
+    return ['message', 'log'];
+  } else {
+    return ['info'];
+  }
+}
+</script>
+
+<template>
+  <div :class="chatEntryClass(message)" @contextmenu.prevent="$emit('open-menu', message)">
+    <template v-if="message.type == 'message' || message.type == null">
+      <div v-if="message.sender != 'user'" class="sender">{{message.sender}}</div>
+
+      <div v-if="message.format == 'markdown'" v-html="marked.parse(message.content)" class="content"></div>
+      <div v-else class="content">{{message.content}}</div>
+    </template>
+
+    <template v-if="message.type == 'note'">
+      <div class="sender">{{message.sender}}</div>
+      <div class="content">{{message.content}}</div>
+    </template>
+
+    <template v-if="message.type == 'log'">
+      <div class="sender">Log ({{message.sender}})</div>
+      <div class="content">{{message.content}}</div>
+    </template>
+
+    <template v-if="message.type == 'thread-header'">
+      <div class="content">
+        Thread {{message.threadId}} ({{message.messageCount}} messages)
+        <a href="#" @click.prevent="$emit('toggleThread', message.threadId, !message.expanded)">{{message.expanded ? "Hide" : "Show"}}</a>
+      </div>
+    </template>
+  </div>
+</template>
+
+<style scoped>
+.info {
+  align-self: center;
+}
+
+.message {
+  width: fit-content;
+  max-width: 50em;
+  padding: 10px;
+  border-radius: 8px;
+  background-color: var(--color-background-soft);
+}
+
+.note {
+  width: fit-content;
+  padding: 10px;
+  background-color: var(--color-background-soft);
+  border: 1px solid var(--color-border);
+}
+
+.message.sent {
+  align-self: end;
+  margin-left: 2em;
+}
+.message.received {
+  margin-right: 2em;
+}
+
+.message .content {
+  white-space: preserve;
+  width: fit-content;
+}
+
+.message ul, .message ol {
+  white-space: normal;
+}
+
+.message .sender,
+.note .sender {
+  font-weight: bold;
+  font-size: 100%;
+  margin-top: -5px; /* half message padding */
+}
+
+.message.log .content {
+  font-family: monospace;
+  font-size: 80%;
+}
+</style>