From efed9c541e2095263b8aecf9e54ac220081c396e Mon Sep 17 00:00:00 2001
From: aaron <>
Date: Sun, 11 May 2025 11:28:42 +0800
Subject: [PATCH] update

---
 docker-compose.yml        |   2 +-
 src/views/AIAgentView.vue | 199 ++++++++++++++++++++++++--------------
 2 files changed, 128 insertions(+), 73 deletions(-)

diff --git a/docker-compose.yml b/docker-compose.yml
index 80efca1..060cbc4 100644
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -5,7 +5,7 @@ services:
     build:
       context: .
       dockerfile: Dockerfile
-    image: tradus-web:1.3
+    image: tradus-web:1.4
     container_name: tradus-web
     ports:
       - '6000:80'
diff --git a/src/views/AIAgentView.vue b/src/views/AIAgentView.vue
index 220e05b..6bacd4a 100644
--- a/src/views/AIAgentView.vue
+++ b/src/views/AIAgentView.vue
@@ -133,23 +133,49 @@ const scrollToBottom = async () => {
   }
 }
 
+// 添加打字机效果的状态
+const typingText = ref('')
+const isTyping = ref(false)
+const typingMessageIndex = ref(-1)
+
+// 打字机效果函数
+const typeMessage = async (message: string, messageIndex: number) => {
+  isTyping.value = true
+  typingMessageIndex.value = messageIndex
+  typingText.value = ''
+  chatHistory.value[messageIndex].content = ''
+
+  for (let i = 0; i < message.length; i++) {
+    typingText.value += message[i]
+    chatHistory.value[messageIndex].content = typingText.value
+    await new Promise((resolve) => setTimeout(resolve, 50))
+  }
+
+  isTyping.value = false
+  typingMessageIndex.value = -1
+  chatHistory.value[messageIndex].content = message
+  return message
+}
+
 // 添加初始问候语
-const addInitialGreeting = (agent: Agent) => {
-  chatHistory.value = [
-    {
-      role: 'assistant',
-      content:
-        agent.hello_prompt ||
-        '你好！我是AI Agent，可以回答你的任何关于Web3的问题。请告诉我你想了解什么？',
-      files: [],
-    },
-  ]
+const addInitialGreeting = async (agent: Agent) => {
+  const message: ChatMessage = {
+    role: 'assistant',
+    content: '',
+    files: [],
+  }
+  chatHistory.value = [message]
+
+  const greetingText =
+    agent.hello_prompt ||
+    '你好！我是AI Agent，可以回答你的任何关于Web3的问题。请告诉我你想了解什么？'
+  await typeMessage(greetingText, 0)
 }
 
 // 监听选中的Agent变化
 watch(selectedAgent, (newAgent) => {
-  if (newAgent) {
-    addInitialGreeting(newAgent)
+  if (newAgent && chatHistory.value.length === 0) {
+    addInitialGreeting(newAgent).catch(console.error)
   }
 })
 
@@ -186,18 +212,17 @@ const showConfirm = (title: string, message: string, callback: () => void) => {
 // 选择Agent
 const selectAgent = (agent: Agent) => {
   if (!selectedAgent.value || agent.id !== selectedAgent.value.id) {
-    // 切换到新的 Agent
-    showConfirm('切换 Agent', `是否开启新的 Agent：${agent.name}？`, () => {
-      selectedAgent.value = agent
-      clearConversationId(agent.id)
-      chatHistory.value = []
-      showConfirmDialog.value = false
-    })
+    // 直接切换到新的 Agent
+    selectedAgent.value = agent
+    clearConversationId(agent.id)
+    chatHistory.value = []
+    addInitialGreeting(agent).catch(console.error)
   } else {
-    // 点击当前 Agent
+    // 点击当前 Agent，显示确认框
     showConfirm('重新开始对话', '是否重新开启新会话？', () => {
       clearConversationId(agent.id)
       chatHistory.value = []
+      addInitialGreeting(agent).catch(console.error)
       showConfirmDialog.value = false
     })
   }
@@ -402,7 +427,13 @@ const getIconPath = (agent: Agent) => {
                       : 'ai-message',
                 ]"
               >
-                <div class="message-content">
+                <div
+                  class="message-content"
+                  :class="{
+                    typing:
+                      isTyping && typingMessageIndex === index && message.role === 'assistant',
+                  }"
+                >
                   <div v-html="renderMarkdown(message.content)"></div>
                 </div>
               </div>
@@ -451,9 +482,8 @@ const getIconPath = (agent: Agent) => {
     </div>
 
     <!-- 添加确认对话框 -->
-    <div v-if="showConfirmDialog" class="confirm-dialog">
-      <div class="confirm-dialog-content">
-        <h3>{{ confirmDialogTitle }}</h3>
+    <div v-if="showConfirmDialog" class="confirm-popup">
+      <div class="confirm-popup-content">
         <p>{{ confirmDialogMessage }}</p>
         <div class="confirm-actions">
           <button
@@ -683,10 +713,29 @@ const getIconPath = (agent: Agent) => {
   white-space: pre-wrap;
   box-sizing: border-box;
   background-clip: padding-box;
-  overflow: hidden;
   line-height: 1.4;
 }
 
+.message-content.typing :deep(.markdown-body) {
+  display: inline;
+}
+
+.message-content :deep(p) {
+  margin: 0;
+  line-height: 1.4;
+  display: inline;
+}
+
+.message-content :deep(p:not(:last-child)) {
+  display: block;
+  margin-bottom: 0.75em;
+}
+
+/* 确保markdown内容正确显示 */
+:deep(.markdown-body) {
+  display: inline;
+}
+
 .user-message .message-content {
   background-color: var(--color-accent);
   color: white;
@@ -1099,90 +1148,96 @@ const getIconPath = (agent: Agent) => {
 }
 
 /* 添加确认对话框样式 */
-.confirm-dialog {
+.confirm-popup {
   position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background-color: rgba(0, 0, 0, 0.5);
-  display: flex;
-  justify-content: center;
-  align-items: center;
+  top: 20px;
+  left: 50%;
+  transform: translateX(-50%);
   z-index: 1000;
-  backdrop-filter: blur(4px);
+  animation: slideDown 0.3s ease-out;
 }
 
-.confirm-dialog-content {
+.confirm-popup-content {
   background-color: #ffffff;
-  color: #000000;
-  padding: 2rem;
-  border-radius: var(--border-radius);
-  max-width: 400px;
-  width: calc(100% - 2rem);
-  margin: 1rem;
-  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
-  border: 1px solid #e5e7eb;
+  padding: 1rem 1.5rem;
+  border-radius: 8px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  min-width: 300px;
+  max-width: 90vw;
 }
 
-.confirm-dialog-content h3 {
-  font-size: 1.5rem;
-  margin-bottom: 1rem;
+.confirm-popup-content p {
+  margin: 0;
   color: #000000;
-}
-
-.confirm-dialog-content p {
-  color: #4b5563;
-  margin-bottom: 2rem;
-  line-height: 1.5;
+  font-size: 0.95rem;
+  flex: 1;
 }
 
 .confirm-actions {
   display: flex;
-  justify-content: center;
-  gap: 1rem;
+  gap: 0.5rem;
 }
 
 .confirm-actions button {
-  padding: 0.8rem 2rem;
-  border-radius: var(--border-radius);
+  padding: 0.4rem 0.8rem;
+  border-radius: 6px;
+  font-size: 0.9rem;
   font-weight: 500;
   cursor: pointer;
   transition: all 0.2s ease;
-  min-width: 100px;
+  border: none;
+  background: none;
 }
 
 .confirm-actions button:first-child {
-  background-color: var(--color-accent);
-  color: white;
-  border: none;
+  color: var(--color-accent);
 }
 
 .confirm-actions button:first-child:hover {
-  background-color: var(--color-accent-hover);
+  background-color: rgba(51, 85, 255, 0.1);
 }
 
 .confirm-actions button:last-child {
-  background-color: #f3f4f6;
-  color: #000000;
-  border: 1px solid #e5e7eb;
+  color: #666666;
 }
 
 .confirm-actions button:last-child:hover {
-  background-color: #e5e7eb;
+  background-color: #f3f4f6;
+}
+
+@keyframes slideDown {
+  from {
+    transform: translate(-50%, -100%);
+    opacity: 0;
+  }
+  to {
+    transform: translate(-50%, 0);
+    opacity: 1;
+  }
 }
 
 @media (max-width: 480px) {
-  .confirm-dialog-content {
-    padding: 1.5rem;
+  .confirm-popup {
+    top: 10px;
+    width: calc(100% - 20px);
   }
 
-  .confirm-dialog-content h3 {
-    font-size: 1.3rem;
+  .confirm-popup-content {
+    padding: 0.8rem 1rem;
+    min-width: auto;
   }
+}
 
-  .confirm-actions button {
-    padding: 0.6rem 1.5rem;
+@keyframes blink {
+  0%,
+  100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0;
   }
 }
 </style>