feat: integrate MarkdownIt for rendering messages and update styles in message components

web/lib/im-message.ts

@@ -1,3 +1,5 @@
+import MarkdownIt from "markdown-it"
+
 export type MessageAssetPayload = {
   assetId: string
   filename?: string
@@ -6,6 +8,12 @@ export type MessageAssetPayload = {
   url?: string
 }
 
+const messageMarkdown = new MarkdownIt({
+  html: false,
+  linkify: true,
+  breaks: true,
+})
+
 export function parseMessageAssetPayload(payload?: string): MessageAssetPayload | null {
   if (!payload?.trim()) {
     return null
@@ -54,7 +62,7 @@ export function renderIMMessageHTML(message: {
     return `<p>${escapeHTML(message.content || "[附件]")}</p>`
   }
 
-  return `<p>${escapeHTML(message.content || "")}</p>`
+  return renderTextMessageHTML(message.content || "")
 }
 
 export function summarizeIMMessage(message: {
@@ -106,6 +114,14 @@ function extractTextFromHTML(html: string): string {
   return div.textContent || div.innerText || ""
 }
 
+function renderTextMessageHTML(content: string) {
+  const value = content.trim()
+  if (!value) {
+    return "<p></p>"
+  }
+  return messageMarkdown.render(value)
+}
+
 function escapeHTML(value: string) {
   return value
     .replaceAll("&", "&amp;")