feat: 对接AI对话接口

src/views/home/agent/components/Item.vue

@@ -4,8 +4,13 @@
 			<div class="thumb">
 				<img :src="content.isUser ? userThumb : agentThumb" class="thumb-icon" />
 			</div>
-			<div class="message-context" v-show="!content.loading && !content.thinking && !content.streaming">
-				<div class="message-txt">{{ content.text }}</div>
+			<div
+				class="message-context"
+				v-show="!content.loading && !content.thinking && !content.streaming"
+			>
+				<div class="message-txt markdown-body">
+					<div v-html="formatMessage"></div>
+				</div>
 				<div class="operate flex" :class="{ 'is-user': content.isUser }">
 					<template v-if="content.isUser">
 						<SvgIcon name="copy" size="16" color="#000" @click.stop="handleCopyText" />
@@ -23,9 +28,7 @@
 				</div>
 			</div>
 			<div class="message-context" v-show="content.loading">
-				<div class="generating">
-					Generating...
-				</div>
+				<div class="generating">Generating...</div>
 			</div>
 			<div class="message-context" v-show="content.thinking">
 				<div class="thinking">
@@ -39,18 +42,23 @@
 				</div>
 			</div>
 			<div class="message-context" v-show="content.streaming">
-				<div class="message-txt">{{ content.text }}</div>
+				<div class="message-txt">
+					<div v-html="formatMessage"></div>
+				</div>
 			</div>
 		</div>
 	</div>
 </template>
 
 <script setup lang="ts">
-	import { ref, onMounted } from 'vue'
+	import { ref, onMounted, computed } from 'vue'
 	import { useI18n } from 'vue-i18n'
 	import gsap from 'gsap'
 	import userThumb from '@/assets/images/user-thumb.jpg'
 	import agentThumb from '@/assets/images/agent-thumb.jpg'
+	import markdownIt from 'markdown-it'
+
+	const md = new markdownIt()
 
 	const { t } = useI18n()
 
@@ -58,6 +66,21 @@
 		content: Object
 	}>()
 
+	const formatMessage = computed(() => {
+		// MARKDOWN.renderer.rules.link_open = (tokens, idx, options, env, self) => {
+		// 	const aIndex = tokens[idx].attrIndex('target')
+		// 	if (aIndex < 0) {
+		// 		tokens[idx].attrPush(['target', '_blank'])
+		// 	} else {
+		// 		tokens[idx].attrs[aIndex][1] = '_blank'
+		// 	}
+		// 	return self.renderToken(tokens, idx, options, env, self)
+		// }
+    const str = md.render(props.content.text)
+    console.log('str',str)
+		return str
+	})
+
 	const operateList = ref([
 		{
 			name: 'thumbUp',
@@ -111,12 +134,6 @@
 	const toggleThinkingCollapsed = () => {
 		props.content.thinkingCollapsed = !props.content.thinkingCollapsed
 	}
-
-	const playLoadingAnimate = () => {}
-
-	onMounted(() => {
-		// playLoadingAnimate()
-	})
 </script>
 
 <style lang="less" scoped>
@@ -129,7 +146,7 @@
 		font-size: 1.4rem;
 		.message-wrapper {
 			column-gap: 0.9rem;
-      // align-items: flex-start;
+			// align-items: flex-start;
 			&.is-user {
 				text-align: right;
 				flex-direction: row-reverse;
@@ -148,6 +165,10 @@
 					border-radius: 50%;
 				}
 			}
+      .message-context{
+        line-height: 2rem;
+        font-size: 1.4rem;
+      }
 		}
 		.operate {
 			margin-top: 1.3rem;
@@ -191,20 +212,4 @@
 			}
 		}
 	}
-
-	// @supports (-webkit-mask-image: url(#mask)) or (mask-image: url(#mask)) {
-	// 	.generating::after {
-	// 		content: '';
-	// 		position: absolute;
-	// 		top: 0;
-	// 		left: 0;
-	// 		width: 100%;
-	// 		height: 100%;
-	// 		background: url('path-to-noise-texture.png'); /* Replace with a noise texture image sized appropriately (e.g., small grain at 0.03 scale) */
-	// 		opacity: 1; /* 100% density */
-	// 		mix-blend-mode: color; /* Approximate duotone blending */
-	// 		-webkit-mask-image: -webkit-linear-gradient(#c05f20, #290d99);
-	// 		mask-image: linear-gradient(#c05f20, #290d99);
-	// 	}
-	// }
 </style>