feat: 消息展示的调整

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

@@ -1,10 +1,16 @@
 <template>
   <div class="max-w-[75%] flex flex-col">
     <slot name="header"></slot>
-    <div class="text-sm text-gray-700 flex flex-row">
+    <div v-if="!msg.messageContentList" class="flex flex-row text-sm text-gray-700">
       <div v-html="compiledMarkdown"></div>
       <ChatLoading v-if="msg.isLoading" />
     </div>
+
+    <div v-else class="flex flex-col p-2 mb-2 text-sm text-gray-700 bg-[#f7f9fc] rounded-md" 
+         v-for="(_, index) in msg.messageContentList" :key="index">
+      <div v-html="compiledAt(index)"></div>
+    </div>
+
     <slot name="footer"></slot>
   </div>
 </template>
@@ -23,6 +29,9 @@ interface Props {
 
 const { msg } = defineProps<Props>()
 const md = new MarkdownIt({
+  html: true,
+  linkify: true,
+  typographer: true,
   highlight: function (str: string, lang: string) {
     if (lang && hljs.getLanguage(lang)) {
       try {
@@ -33,6 +42,18 @@ const md = new MarkdownIt({
     return hljs.highlightAuto(str).value;
   }
 });
+
 const compiledMarkdown = computed(() => md.render(msg.messageContent))
 
+const compiledList = computed(() => {
+  return (msg.messageContentList || []).map((m: string) => md.render(m || ''))
+})
+
+const compiledAt = (index: number): string => {
+  const list: string[] = (compiledList as any).value || []
+  if (list[index]) return list[index]
+  const raw = msg?.messageContentList?.[index] || ''
+  return md.render(raw || '')
+}
+
 </script>