feat: 将对话消息使用markdown 渲染

src/renderer/views/home/components/ChatRoleAI.vue

@@ -0,0 +1,31 @@
+<template>
+  <div class="text-sm text-gray-700" v-html="compiledMarkdown">
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ChatMessage } from '../model/ChatModel';
+import { computed } from 'vue'
+import MarkdownIt from 'markdown-it'
+import hljs from 'highlight.js'
+import 'highlight.js/styles/github.css'
+
+interface Props {
+  msg: ChatMessage
+}
+
+const { msg } = defineProps<Props>()
+const md = new MarkdownIt({
+  highlight: function (str: string, lang: string) {
+    if (lang && hljs.getLanguage(lang)) {
+      try {
+        return hljs.highlight(str, { language: lang, ignoreIllegals: true }).value;
+      } catch (__) { }
+    }
+    // 自动检测
+    return hljs.highlightAuto(str).value;
+  }
+});
+const compiledMarkdown = computed(() => md.render(msg.messageContent))
+
+</script>