From bbe6dbb2ca6d3783929991d4d853eefc684e2fde Mon Sep 17 00:00:00 2001
From: LittleSheep <littlesheep.code@hotmail.com>
Date: Sat, 6 Apr 2024 23:45:24 +0800
Subject: [PATCH] :sparkles: Support only attachments messages and markdown
 messages

---
 src/components/chat/ChatEditor.vue  |  2 +-
 src/components/chat/ChatMessage.vue | 19 ++++++++++++++++++-
 2 files changed, 19 insertions(+), 2 deletions(-)

diff --git a/src/components/chat/ChatEditor.vue b/src/components/chat/ChatEditor.vue
index 41bbf30..d19d541 100644
--- a/src/components/chat/ChatEditor.vue
+++ b/src/components/chat/ChatEditor.vue
@@ -135,7 +135,7 @@ const data = ref<any>({
 })
 
 async function sendMessage() {
-  if (!data.value.content) return
+  if (!data.value.content && !data.value.attachments) return
 
   const url = channels.related.messages.edit_to
     ? `/api/channels/${channels.current.alias}/messages/${channels.related.messages.edit_to?.id}`
diff --git a/src/components/chat/ChatMessage.vue b/src/components/chat/ChatMessage.vue
index 207b8e1..7e59e5c 100644
--- a/src/components/chat/ChatMessage.vue
+++ b/src/components/chat/ChatMessage.vue
@@ -24,7 +24,12 @@
           <span class="opacity-80">{{ createdAt }}</span>
           <span class="opacity-60 text-xs">#{{ props.item?.id }}</span>
         </div>
-        <div>{{ props.item?.content }}</div>
+
+        <div
+          v-if="props.item?.content"
+          class="prose prose-message max-w-none"
+          v-html="parseContent(props.item?.content ?? '')"
+        />
 
         <message-attachment
           v-if="props.item?.attachments && props.item?.attachments.length > 0"
@@ -52,8 +57,10 @@
 import { useChannels } from "@/stores/channels"
 import { useUserinfo } from "@/stores/userinfo"
 import { computed } from "vue"
+import { parse } from "marked"
 import dayjs from "dayjs"
 import relativeTime from "dayjs/plugin/relativeTime"
+import dompurify from "dompurify"
 import MessageAttachment from "@/components/chat/renderer/MessageAttachment.vue"
 
 const id = useUserinfo()
@@ -84,6 +91,10 @@ function deleteMessage() {
   channels.related.messages.delete_to.channel = channels.current
   channels.show.messages.delete = true
 }
+
+function parseContent(src: string): string {
+  return dompurify().sanitize(parse(src) as string)
+}
 </script>
 
 <style scoped>
@@ -106,3 +117,9 @@ function deleteMessage() {
   opacity: 100%;
 }
 </style>
+
+<style>
+.prose.prose-message p {
+  margin: 0 !important;
+}
+</style>