update

docker-compose.yml

@@ -5,7 +5,7 @@ services:
     build:
       context: .
       dockerfile: Dockerfile
-    image: icrypto-web:1.0.12
+    image: icrypto-web:1.0.13
     container_name: icrypto-web
     ports:
       - '6000:80'

src/views/AIAgentView.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { ref, nextTick, computed, onMounted, watch } from 'vue'
 import { useUserStore } from '../stores/user'
+import { marked } from 'marked'
 
 // 定义Agent类型
 interface Agent {
@@ -293,6 +294,11 @@ const sendMessage = async () => {
     isLoading.value = false
   }
 }
+
+// 渲染Markdown内容
+const renderMarkdown = (content: string): string => {
+  return marked.parse(content) as string
+}
 </script>
 
 <template>
@@ -385,15 +391,21 @@ const sendMessage = async () => {
                   </div>
                 </div>
               </template>
-              <template v-else>
+              <template v-else-if="message.role === 'user'">
                 <p v-for="(line, i) in message.content.split('\n')" :key="i">
-                  {{
-                    line ||
-                    (message.role === 'assistant' && isLoading && index === chatHistory.length - 1
-                      ? '...'
-                      : line)
-                  }}
+                  {{ line }}
                 </p>
+              </template>
+              <template v-else>
+                <div v-if="message.tools && message.tools.length > 0" class="tools-list">
+                  <p v-for="(tool, toolIndex) in message.tools" :key="toolIndex">
+                    {{ toolIndex + 1 }}.已使用 {{ tool }}
+                  </p>
+                </div>
+                <div
+                  class="markdown-content"
+                  v-html="renderMarkdown(message.content.replace(/^\d+\.已使用.+\n/gm, ''))"
+                ></div>
                 <!-- 显示图片文件 -->
                 <div v-if="message.files && message.files.length > 0" class="message-files">
                   <template
@@ -810,6 +822,142 @@ const sendMessage = async () => {
   color: var(--color-text-secondary);
 }
 
+.tools-list {
+  margin-bottom: 0.8rem;
+  color: var(--color-text-secondary);
+  font-size: 0.9rem;
+  border-bottom: 1px solid var(--color-border);
+  padding-bottom: 0.8rem;
+}
+
+.tools-list p {
+  margin-bottom: 0.3rem;
+}
+
+.markdown-content {
+  line-height: 1.7;
+  overflow-wrap: break-word;
+  word-wrap: break-word;
+  word-break: break-word;
+}
+
+.markdown-content :deep(h1),
+.markdown-content :deep(h2),
+.markdown-content :deep(h3),
+.markdown-content :deep(h4) {
+  margin-top: 1.5rem;
+  margin-bottom: 1rem;
+  font-weight: 600;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+  padding-bottom: 0.3rem;
+}
+
+.markdown-content :deep(h1) {
+  font-size: 1.8rem;
+}
+
+.markdown-content :deep(h2) {
+  font-size: 1.5rem;
+}
+
+.markdown-content :deep(h3) {
+  font-size: 1.2rem;
+}
+
+.markdown-content :deep(p) {
+  margin-bottom: 1.2rem;
+}
+
+.markdown-content :deep(ul),
+.markdown-content :deep(ol) {
+  padding-left: 1.8rem;
+  margin-bottom: 1.2rem;
+}
+
+.markdown-content :deep(li) {
+  margin-bottom: 0.5rem;
+}
+
+.markdown-content :deep(code) {
+  background-color: rgba(255, 255, 255, 0.1);
+  padding: 0.2rem 0.4rem;
+  border-radius: 4px;
+  font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
+  color: #ff9955;
+}
+
+.markdown-content :deep(pre) {
+  background-color: rgba(0, 0, 0, 0.3);
+  padding: 1rem;
+  border-radius: 4px;
+  overflow-x: auto;
+  margin: 1rem 0;
+  border: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.markdown-content :deep(pre code) {
+  background-color: transparent;
+  padding: 0;
+  color: #dddddd;
+}
+
+.markdown-content :deep(blockquote) {
+  border-left: 4px solid #3355ff;
+  padding-left: 1rem;
+  margin-left: 0;
+  margin-right: 0;
+  font-style: italic;
+  color: rgba(255, 255, 255, 0.7);
+}
+
+.markdown-content :deep(table) {
+  width: 100%;
+  border-collapse: collapse;
+  margin: 1rem 0;
+  display: block;
+  overflow-x: auto;
+}
+
+.markdown-content :deep(table th),
+.markdown-content :deep(table td) {
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  padding: 0.5rem;
+  text-align: left;
+}
+
+.markdown-content :deep(table th) {
+  background-color: rgba(255, 255, 255, 0.1);
+}
+
+.markdown-content :deep(hr) {
+  border: none;
+  border-top: 1px solid rgba(255, 255, 255, 0.2);
+  margin: 1.5rem 0;
+}
+
+.markdown-content :deep(a) {
+  color: #66aaff;
+  text-decoration: none;
+}
+
+.markdown-content :deep(a:hover) {
+  text-decoration: underline;
+}
+
+.markdown-content :deep(img) {
+  max-width: 100%;
+  border-radius: 4px;
+  margin: 1rem 0;
+}
+
+.markdown-content :deep(strong) {
+  font-weight: 600;
+}
+
+.markdown-content :deep(em) {
+  font-style: italic;
+}
+
 @media (max-width: 768px) {
   .main-container {
     flex-direction: column;
@@ -859,6 +1007,22 @@ const sendMessage = async () => {
   .agent-description {
     display: none;
   }
+
+  .markdown-content :deep(h1) {
+    font-size: 1.5rem;
+  }
+
+  .markdown-content :deep(h2) {
+    font-size: 1.3rem;
+  }
+
+  .markdown-content :deep(h3) {
+    font-size: 1.1rem;
+  }
+
+  .markdown-content :deep(pre) {
+    padding: 0.8rem;
+  }
 }
 
 @media (max-width: 480px) {
@@ -883,5 +1047,38 @@ const sendMessage = async () => {
   .agent-name {
     font-size: 0.85rem;
   }
+
+  .markdown-content :deep(h1) {
+    font-size: 1.3rem;
+  }
+
+  .markdown-content :deep(h2) {
+    font-size: 1.2rem;
+  }
+
+  .markdown-content :deep(h3) {
+    font-size: 1rem;
+  }
+
+  .markdown-content :deep(p) {
+    font-size: 0.9rem;
+  }
+
+  .markdown-content :deep(ul),
+  .markdown-content :deep(ol) {
+    padding-left: 1.2rem;
+  }
+
+  .markdown-content :deep(li) {
+    font-size: 0.9rem;
+  }
+
+  .markdown-content :deep(pre) {
+    padding: 0.6rem;
+  }
+
+  .markdown-content :deep(code) {
+    font-size: 0.85rem;
+  }
 }
 </style>