✨ Support only attachments messages and markdown messages

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}`

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>