diff --git a/docker-compose.yml b/docker-compose.yml
index 201372f..964cb33 100644
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -5,7 +5,7 @@ services:
     build:
       context: .
       dockerfile: Dockerfile
-    image: tradus-web:1.3.26
+    image: tradus-web:1.3.27
     container_name: tradus-web
     ports:
       - '6000:80'
diff --git a/src/App.vue b/src/App.vue
index 76e44a2..1da9859 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -552,6 +552,23 @@ onUnmounted(() => {
             </svg>
             <span class="agent-name">分析历史</span>
           </RouterLink>
+          <RouterLink
+            to="/ai-agent"
+            class="agent-item"
+            @click="showMobileMenu = false"
+            v-if="isAuthenticated"
+          >
+            <svg
+              class="agent-icon"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="2"
+            >
+              <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path>
+            </svg>
+            <span class="agent-name">AI 交易智能体</span>
+          </RouterLink>
           <RouterLink to="/contact" class="agent-item" @click="showMobileMenu = false">
             <svg
               class="agent-icon"
diff --git a/src/router/index.ts b/src/router/index.ts
index 9df5bbe..5d2c19f 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -54,6 +54,15 @@ const router = createRouter({
         title: '分析历史记录',
       },
     },
+    {
+      path: '/ai-agent',
+      name: 'ai-agent',
+      component: () => import('../views/ChatAgentView.vue'),
+      meta: {
+        requiresAuth: true,
+        title: 'AI 交易智能体',
+      },
+    },
     {
       path: '/contact',
       name: 'contact',
diff --git a/src/views/ChatAgentView.vue b/src/views/ChatAgentView.vue
new file mode 100644
index 0000000..b6bdd6d
--- /dev/null
+++ b/src/views/ChatAgentView.vue
@@ -0,0 +1,1120 @@
+<script setup lang="ts">
+import { ref, nextTick, onMounted } from 'vue'
+import { http } from '../services/api'
+import { marked } from 'marked'
+
+// 配置marked选项
+onMounted(() => {
+  marked.setOptions({
+    breaks: true,
+    gfm: true, // GitHub风格Markdown，支持表格等扩展语法
+  })
+})
+
+// 消息类型定义
+interface Message {
+  id: string
+  type: 'user' | 'assistant'
+  content: string
+  timestamp: Date
+  isStreaming?: boolean
+}
+
+// 状态管理
+const messageInput = ref('')
+const messages = ref<Message[]>([])
+const isLoading = ref(false)
+const chatContainer = ref<HTMLElement | null>(null)
+
+// 根据环境选择API基础URL
+const apiBaseUrl =
+  import.meta.env.MODE === 'development' ? 'http://127.0.0.1:8000' : 'https://api.ibtc.work'
+
+// 滚动到底部
+const scrollToBottom = async () => {
+  await nextTick()
+  if (chatContainer.value) {
+    chatContainer.value.scrollTop = chatContainer.value.scrollHeight
+  }
+}
+
+// 生成唯一ID
+const generateId = () => {
+  return Date.now().toString(36) + Math.random().toString(36).substr(2)
+}
+
+// 处理回车键发送消息
+const handleKeydown = (event: KeyboardEvent) => {
+  if (event.key === 'Enter' && !event.shiftKey) {
+    event.preventDefault()
+    sendMessage()
+  }
+}
+
+// 发送消息
+const sendMessage = async () => {
+  const message = messageInput.value.trim()
+  if (!message || isLoading.value) return
+
+  // 添加用户消息
+  const userMessage: Message = {
+    id: generateId(),
+    type: 'user',
+    content: message,
+    timestamp: new Date(),
+  }
+  messages.value.push(userMessage)
+  messageInput.value = ''
+
+  // 创建助手消息占位符
+  const assistantMessage: Message = {
+    id: generateId(),
+    type: 'assistant',
+    content: '',
+    timestamp: new Date(),
+    isStreaming: true,
+  }
+  messages.value.push(assistantMessage)
+
+  isLoading.value = true
+  await scrollToBottom()
+
+  try {
+    const response = await http.post(`${apiBaseUrl}/analysis/chat-messages`, {
+      message: message,
+    })
+
+    console.log('响应状态:', response.status, response.ok) // 调试日志
+    console.log('响应头:', response.headers) // 调试日志
+
+    if (!response.ok) {
+      // 处理错误响应
+      try {
+        const errorData = await response.json()
+        assistantMessage.content = `错误: ${errorData.detail || '请求失败'}`
+      } catch {
+        assistantMessage.content = `错误: 请求失败，状态码: ${response.status}`
+      }
+      assistantMessage.isStreaming = false
+      return
+    }
+
+    const reader = response.body?.getReader()
+    if (!reader) {
+      throw new Error('无法获取响应流')
+    }
+
+    console.log('开始读取流式数据...') // 调试日志
+
+    const decoder = new TextDecoder()
+    let buffer = ''
+
+    while (true) {
+      const { done, value } = await reader.read()
+      if (done) break
+
+      const chunk = decoder.decode(value, { stream: true })
+      buffer += chunk
+
+      const lines = buffer.split('\n')
+      buffer = lines.pop() || ''
+
+      for (const line of lines) {
+        if (!line.trim() || !line.startsWith('data: ')) continue
+
+        try {
+          const jsonStr = line.slice(6)
+          console.log('接收到数据:', jsonStr) // 调试日志
+          const data = JSON.parse(jsonStr)
+          console.log('解析后的数据:', data) // 调试日志
+
+          switch (data.event) {
+            case 'workflow_started':
+              break
+            case 'node_started':
+              break
+            case 'node_finished':
+              break
+            case 'node_failed':
+              break
+
+            case 'text_chunk':
+              if (data.data && data.data.text) {
+                console.log('添加文本块:', data.data.text) // 调试日志
+                assistantMessage.content += data.data.text
+                // 强制触发响应式更新
+                messages.value = [...messages.value]
+                await nextTick()
+                await scrollToBottom()
+              }
+              break
+
+            case 'message':
+              // 处理新的消息格式
+              if (data.answer) {
+                console.log('添加消息内容:', data.answer) // 调试日志
+                assistantMessage.content += data.answer
+                // 强制触发响应式更新
+                messages.value = [...messages.value]
+                await nextTick()
+                await scrollToBottom()
+              }
+              break
+
+            case 'workflow_finished':
+              if (data.data && data.data.outputs && data.data.outputs.text) {
+                if (assistantMessage.content !== data.data.outputs.text) {
+                  assistantMessage.content = data.data.outputs.text
+                  await scrollToBottom()
+                }
+              }
+              assistantMessage.isStreaming = false
+              break
+
+            case 'error':
+              const errorMessage = data.error || '未知错误'
+              assistantMessage.content = `错误: ${errorMessage}`
+              assistantMessage.isStreaming = false
+              await scrollToBottom()
+              break
+
+            default:
+              console.log('未处理的事件类型:', data.event, data) // 调试日志
+              break
+          }
+        } catch (error) {
+          console.error('解析响应数据出错:', error, '原始数据:', line)
+          assistantMessage.content = '错误: 解析响应数据时出错，请稍后重试'
+          assistantMessage.isStreaming = false
+        }
+      }
+    }
+
+    // 确保消息状态正确设置
+    if (assistantMessage.isStreaming) {
+      assistantMessage.isStreaming = false
+    }
+  } catch (error) {
+    console.error('发送消息失败:', error)
+    assistantMessage.content = '错误: 发送消息失败，请稍后重试'
+    assistantMessage.isStreaming = false
+  } finally {
+    isLoading.value = false
+    await scrollToBottom()
+  }
+}
+
+// 复制消息内容
+const copyMessage = async (content: string) => {
+  try {
+    await navigator.clipboard.writeText(content)
+  } catch (error) {
+    console.error('复制失败:', error)
+  }
+}
+
+// 解析markdown内容
+const parseMarkdown = (content: string) => {
+  if (!content || content.startsWith('错误:')) {
+    return content
+  }
+
+  try {
+    // 对于可能不完整的内容，先进行一些预处理
+    const processedContent = content
+
+    // 如果内容以不完整的代码块开始，暂时不处理markdown
+    if (
+      processedContent.includes('```') &&
+      (processedContent.match(/```/g) || []).length % 2 !== 0
+    ) {
+      // 代码块未闭合，显示原始文本但保留换行
+      return processedContent.replace(/\n/g, '<br>')
+    }
+
+    // 处理markdown内容
+    let html = marked(processedContent) as string
+
+    // 将表格包装在div中以提供更好的滚动支持
+    html = html.replace(/<table>/g, '<div class="table-container"><table>')
+    html = html.replace(/<\/table>/g, '</table></div>')
+
+    return html
+  } catch (error) {
+    // 如果markdown解析失败（比如内容不完整），返回原始文本
+    console.warn('Markdown解析失败，返回原始文本:', error)
+    return content.replace(/\n/g, '<br>')
+  }
+}
+
+// 格式化时间
+const formatTime = (date: Date) => {
+  return date.toLocaleTimeString('zh-CN', {
+    hour: '2-digit',
+    minute: '2-digit',
+  })
+}
+</script>
+
+<template>
+  <div class="chat-agent-view">
+    <div class="chat-container">
+      <!-- 对话区域 -->
+      <div class="chat-messages" ref="chatContainer">
+        <!-- 欢迎消息 -->
+        <div v-if="messages.length === 0" class="welcome-message">
+          <div class="welcome-content">
+            <div class="welcome-icon">🤖</div>
+            <h3>欢迎使用AI 交易智能体</h3>
+            <p>您可以向我提问任何问题，我会尽力为您提供帮助</p>
+            <div class="example-questions">
+              <p class="example-title">试试这些问题：</p>
+              <button
+                class="example-question"
+                @click="messageInput = '分析一下：BTC'"
+                :disabled="isLoading"
+              >
+                分析一下：BTC
+              </button>
+              <button
+                class="example-question"
+                @click="messageInput = '分析一下：贵州茅台'"
+                :disabled="isLoading"
+              >
+                分析一下：贵州茅台
+              </button>
+              <button
+                class="example-question"
+                @click="messageInput = '分析一下：ETH'"
+                :disabled="isLoading"
+              >
+                分析一下：ETH
+              </button>
+            </div>
+          </div>
+        </div>
+
+        <!-- 消息列表 -->
+        <div v-for="message in messages" :key="message.id" class="message-wrapper">
+          <div
+            class="message"
+            :class="{
+              'user-message': message.type === 'user',
+              'assistant-message': message.type === 'assistant',
+            }"
+          >
+            <div class="message-avatar">
+              <div v-if="message.type === 'user'" class="user-avatar">用</div>
+              <div v-else class="assistant-avatar">
+                <svg viewBox="0 0 24 24" fill="currentColor" width="18" height="18">
+                  <path
+                    d="M12,2A2,2 0 0,1 14,4C14,4.74 13.6,5.39 13,5.73V7H14A7,7 0 0,1 21,14H22A1,1 0 0,1 23,15V18A1,1 0 0,1 22,19H21V20A2,2 0 0,1 19,22H5A2,2 0 0,1 3,20V19H2A1,1 0 0,1 1,18V15A1,1 0 0,1 2,14H3A7,7 0 0,1 10,7H11V5.73C10.4,5.39 10,4.74 10,4A2,2 0 0,1 12,2M7.5,13A2.5,2.5 0 0,0 5,15.5A2.5,2.5 0 0,0 7.5,18A2.5,2.5 0 0,0 10,15.5A2.5,2.5 0 0,0 7.5,13M16.5,13A2.5,2.5 0 0,0 14,15.5A2.5,2.5 0 0,0 16.5,18A2.5,2.5 0 0,0 19,15.5A2.5,2.5 0 0,0 16.5,13Z"
+                  />
+                </svg>
+              </div>
+            </div>
+            <div class="message-content">
+              <div class="message-header">
+                <span class="message-sender">{{
+                  message.type === 'user' ? '您' : 'AI 交易智能体'
+                }}</span>
+                <span class="message-time">{{ formatTime(message.timestamp) }}</span>
+              </div>
+              <div class="message-body">
+                <div
+                  v-if="message.type === 'user' || message.content.startsWith('错误:')"
+                  class="message-text"
+                  :class="{ 'error-message': message.content.startsWith('错误:') }"
+                >
+                  {{ message.content }}
+                </div>
+                <div
+                  v-else
+                  class="message-text markdown-content"
+                  v-html="parseMarkdown(message.content)"
+                ></div>
+                <div v-if="message.isStreaming" class="streaming-indicator">
+                  <div class="typing-dots">
+                    <span></span>
+                    <span></span>
+                    <span></span>
+                  </div>
+                </div>
+              </div>
+              <div class="message-actions">
+                <button
+                  class="action-btn copy-btn"
+                  @click="copyMessage(message.content)"
+                  :disabled="!message.content"
+                >
+                  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                    <rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>
+                    <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>
+                  </svg>
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- 输入区域 -->
+      <div class="chat-input">
+        <div class="input-container">
+          <textarea
+            v-model="messageInput"
+            class="message-input"
+            placeholder="输入您的问题，例如：分析一下：BTC"
+            @keydown="handleKeydown"
+            :disabled="isLoading"
+            rows="1"
+          ></textarea>
+          <button
+            class="send-button"
+            @click="sendMessage"
+            :disabled="isLoading || !messageInput.trim()"
+          >
+            <svg
+              v-if="!isLoading"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="2"
+            >
+              <line x1="22" y1="2" x2="11" y2="13"></line>
+              <polygon points="22,2 15,22 11,13 2,9"></polygon>
+            </svg>
+            <div v-else class="button-loader"></div>
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.chat-agent-view {
+  height: 100vh;
+  background-color: var(--color-bg-primary);
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.chat-container {
+  max-width: 1000px;
+  margin: 0 auto;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.chat-messages {
+  flex: 1;
+  overflow-y: auto;
+  padding: 2rem;
+  display: flex;
+  flex-direction: column;
+}
+
+.welcome-message {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100%;
+  text-align: center;
+}
+
+.welcome-content {
+  max-width: 500px;
+}
+
+.welcome-icon {
+  font-size: 3rem;
+  margin-bottom: 1rem;
+}
+
+.welcome-content h3 {
+  font-size: 1.5rem;
+  font-weight: 600;
+  color: var(--color-text-primary);
+  margin-bottom: 0.5rem;
+}
+
+.welcome-content p {
+  color: var(--color-text-secondary);
+  margin-bottom: 2rem;
+  line-height: 1.6;
+}
+
+.example-questions {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+  align-items: center;
+}
+
+.example-title {
+  font-size: 0.9rem;
+  color: var(--color-text-secondary);
+  margin-bottom: 0.5rem;
+}
+
+.example-question {
+  padding: 0.75rem 1.5rem;
+  border: 1px solid var(--color-border);
+  border-radius: var(--border-radius);
+  background: var(--color-bg-secondary);
+  color: var(--color-text-primary);
+  cursor: pointer;
+  transition: all 0.2s ease;
+  font-size: 0.9rem;
+  max-width: 300px;
+  text-align: center;
+}
+
+.example-question:hover:not(:disabled) {
+  border-color: var(--color-accent);
+  background: var(--color-accent);
+  color: white;
+}
+
+.example-question:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.message-wrapper {
+  width: 100%;
+  display: flex;
+  margin-bottom: 1.5rem;
+}
+
+.message {
+  display: flex;
+  gap: 1rem;
+  max-width: 80%;
+  width: fit-content;
+}
+
+.user-message {
+  flex-direction: row-reverse;
+  margin-left: auto;
+}
+
+.assistant-message {
+  margin-right: auto;
+}
+
+.message-avatar {
+  flex-shrink: 0;
+  width: 48px;
+  height: 48px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 1.2rem;
+  overflow: hidden;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+}
+
+.user-avatar {
+  background: linear-gradient(135deg, var(--color-accent), #667eea);
+  color: white;
+  font-weight: 600;
+  font-size: 1.1rem;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  box-shadow: 0 2px 12px rgba(59, 130, 246, 0.3);
+}
+
+.assistant-avatar {
+  background: linear-gradient(135deg, var(--color-bg-secondary), #f8fafc);
+  color: var(--color-text-primary);
+  border: 2px solid var(--color-border);
+  font-weight: 600;
+  font-size: 1.1rem;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+}
+
+.message-content {
+  flex: 1;
+  min-width: 80px;
+  max-width: none;
+  width: fit-content;
+}
+
+.user-message .message-content {
+  text-align: right;
+}
+
+.message-header {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  margin-bottom: 0.5rem;
+}
+
+.user-message .message-header {
+  justify-content: flex-end;
+}
+
+.message-sender {
+  font-size: 0.85rem;
+  font-weight: 500;
+  color: var(--color-text-primary);
+}
+
+.message-time {
+  font-size: 0.75rem;
+  color: var(--color-text-secondary);
+}
+
+.message-body {
+  background-color: var(--color-bg-secondary);
+  border-radius: var(--border-radius);
+  padding: 1rem;
+  position: relative;
+  width: fit-content;
+  min-width: 100px;
+  max-width: 600px;
+  word-wrap: break-word;
+}
+
+.user-message .message-body {
+  background-color: var(--color-accent);
+  color: white;
+}
+
+.message-text {
+  line-height: 1.6;
+  word-break: break-word;
+}
+
+.user-message .message-text {
+  color: white;
+}
+
+.error-message {
+  color: #ff3333 !important;
+  background-color: rgba(255, 51, 51, 0.1) !important;
+  border: 1px solid rgba(255, 51, 51, 0.2);
+}
+
+.streaming-indicator {
+  margin-top: 0.5rem;
+}
+
+.typing-dots {
+  display: flex;
+  gap: 0.25rem;
+  align-items: center;
+}
+
+.typing-dots span {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background-color: var(--color-text-secondary);
+  animation: typing 1.4s infinite ease-in-out;
+}
+
+.typing-dots span:nth-child(1) {
+  animation-delay: -0.32s;
+}
+
+.typing-dots span:nth-child(2) {
+  animation-delay: -0.16s;
+}
+
+@keyframes typing {
+  0%,
+  80%,
+  100% {
+    opacity: 0.3;
+    transform: scale(0.8);
+  }
+  40% {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+.message-actions {
+  display: flex;
+  justify-content: flex-end;
+  margin-top: 0.5rem;
+  gap: 0.5rem;
+}
+
+.user-message .message-actions {
+  justify-content: flex-start;
+}
+
+.action-btn {
+  padding: 0.25rem;
+  border: none;
+  background: transparent;
+  color: var(--color-text-secondary);
+  cursor: pointer;
+  border-radius: 4px;
+  transition: all 0.2s ease;
+  opacity: 0.6;
+}
+
+.action-btn:hover:not(:disabled) {
+  opacity: 1;
+  background-color: rgba(0, 0, 0, 0.1);
+}
+
+.action-btn:disabled {
+  opacity: 0.3;
+  cursor: not-allowed;
+}
+
+.action-btn svg {
+  width: 14px;
+  height: 14px;
+}
+
+.user-message .action-btn {
+  color: rgba(255, 255, 255, 0.8);
+}
+
+.user-message .action-btn:hover:not(:disabled) {
+  color: white;
+  background-color: rgba(255, 255, 255, 0.2);
+}
+
+.chat-input {
+  padding: 1rem;
+  background-color: transparent;
+  border-top: none;
+  flex-shrink: 0;
+}
+
+.input-container {
+  display: flex;
+  gap: 1rem;
+  align-items: center;
+  max-width: 100%;
+  background-color: var(--color-bg-primary);
+  border-radius: var(--border-radius);
+  padding: 0.5rem;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
+  border: 1px solid var(--color-border);
+}
+
+.message-input {
+  flex: 1;
+  /* height: 44px; */
+  max-height: 120px;
+  padding: 0 1rem;
+  border: none;
+  border-radius: var(--border-radius);
+  background-color: transparent;
+  color: var(--color-text-primary);
+  font-size: 0.95rem;
+  line-height: 1.5;
+  resize: none;
+  outline: none;
+  transition: all 0.2s ease;
+}
+
+.message-input:focus {
+  outline: none;
+}
+
+.input-container:focus-within {
+  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.15);
+  border-color: var(--color-accent);
+}
+
+.message-input:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+.send-button {
+  width: 44px;
+  height: 44px;
+  border: none;
+  border-radius: var(--border-radius);
+  background-color: var(--color-accent);
+  color: white;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.2s ease;
+  flex-shrink: 0;
+}
+
+.send-button:hover:not(:disabled) {
+  background-color: var(--color-accent-hover);
+}
+
+.send-button:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+.send-button svg {
+  width: 20px;
+  height: 20px;
+}
+
+.button-loader {
+  width: 16px;
+  height: 16px;
+  border: 2px solid rgba(255, 255, 255, 0.3);
+  border-top-color: white;
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
+}
+
+/* 响应式设计 */
+@media (max-width: 768px) {
+  .chat-messages {
+    padding: 1rem;
+  }
+
+  .chat-input {
+    padding: 0.75rem 1rem;
+  }
+
+  .input-container {
+    gap: 0.75rem;
+    padding: 0.375rem;
+    border-radius: 24px;
+    align-items: center;
+    display: flex;
+    flex-direction: row;
+  }
+
+  .message-input {
+    height: 36px !important;
+    padding: 0 0.75rem;
+    font-size: 0.9rem;
+    border-radius: 20px;
+    flex: 1;
+    min-width: 0;
+    box-sizing: border-box;
+    resize: none;
+    overflow: hidden;
+    line-height: 36px;
+  }
+
+  .send-button {
+    width: 36px;
+    height: 36px;
+    border-radius: 18px;
+    flex-shrink: 0;
+  }
+
+  .send-button svg {
+    width: 16px;
+    height: 16px;
+  }
+
+  .message {
+    gap: 0.75rem;
+    max-width: 90%;
+  }
+
+  .message-avatar {
+    width: 40px;
+    height: 40px;
+    font-size: 1.1rem;
+  }
+
+  .user-avatar {
+    font-size: 1rem;
+  }
+
+  .assistant-avatar {
+    font-size: 1rem;
+  }
+
+  .message-content {
+    min-width: 80px;
+  }
+
+  .message-body {
+    max-width: 400px;
+    min-width: 80px;
+  }
+
+  .title {
+    font-size: 1.25rem;
+  }
+
+  .description {
+    font-size: 0.85rem;
+  }
+
+  .welcome-icon {
+    font-size: 2.5rem;
+  }
+
+  .welcome-content h3 {
+    font-size: 1.25rem;
+  }
+
+  .example-question {
+    padding: 0.6rem 1.25rem;
+    font-size: 0.85rem;
+  }
+}
+
+@media (max-width: 480px) {
+  .chat-messages {
+    padding: 4.5rem 0.75rem 0rem 0.75rem;
+  }
+
+  .chat-input {
+    padding: 0.5rem 0.75rem;
+  }
+
+  .input-container {
+    gap: 0.5rem;
+    padding: 0.25rem;
+    border-radius: 20px;
+    align-items: center;
+    display: flex;
+    flex-direction: row;
+  }
+
+  .message-input {
+    height: 34px !important;
+    padding: 0 0.6rem;
+    font-size: 0.9rem;
+    border-radius: 16px;
+    flex: 1;
+    min-width: 0;
+    box-sizing: border-box;
+    resize: none;
+    overflow: hidden;
+    line-height: 34px;
+  }
+
+  .message-body {
+    padding: 0.75rem;
+  }
+
+  .send-button {
+    width: 34px;
+    height: 34px;
+    border-radius: 17px;
+    flex-shrink: 0;
+  }
+
+  .send-button svg {
+    width: 15px;
+    height: 15px;
+  }
+
+  .message-avatar {
+    width: 38px;
+    height: 38px;
+    font-size: 1rem;
+  }
+
+  .user-avatar {
+    font-size: 0.9rem;
+  }
+
+  .assistant-avatar {
+    font-size: 0.9rem;
+  }
+}
+</style>
+
+<style>
+/* Markdown 样式 - 继承自 UniversalAnalysisView */
+.chat-agent-view .markdown-content {
+  white-space: normal !important;
+}
+
+.chat-agent-view .markdown-content h1,
+.chat-agent-view .markdown-content h2,
+.chat-agent-view .markdown-content h3,
+.chat-agent-view .markdown-content h4,
+.chat-agent-view .markdown-content h5,
+.chat-agent-view .markdown-content h6 {
+  margin-top: 1rem;
+  margin-bottom: 0.75rem;
+  font-weight: 600;
+  line-height: 1.25;
+  color: var(--color-text-primary);
+  font-size: 1.1rem;
+}
+
+.chat-agent-view .markdown-content h1 {
+  border-bottom: 1px solid var(--color-border);
+  padding-bottom: 0.3em;
+}
+
+.chat-agent-view .markdown-content h2 {
+  border-bottom: 1px solid var(--color-border);
+  padding-bottom: 0.3em;
+}
+
+.chat-agent-view .markdown-content p {
+  margin-top: 0;
+  margin-bottom: 1rem;
+  line-height: 1.6;
+}
+
+.chat-agent-view .markdown-content ul,
+.chat-agent-view .markdown-content ol {
+  margin-top: 0;
+  margin-bottom: 1rem;
+  padding-left: 1.5rem;
+}
+
+.chat-agent-view .markdown-content li {
+  margin-bottom: 0.25rem;
+  line-height: 1.5;
+}
+
+.chat-agent-view .markdown-content li p {
+  margin-bottom: 0.5rem;
+}
+
+.chat-agent-view .markdown-content blockquote {
+  padding: 0.5rem 1rem;
+  color: var(--color-text-secondary);
+  border-left: 0.25rem solid var(--color-border);
+  margin: 0 0 1rem;
+}
+
+.chat-agent-view .markdown-content pre {
+  margin-top: 0;
+  margin-bottom: 1rem;
+  padding: 0.75rem;
+  overflow: auto;
+  font-size: 0.85rem;
+  line-height: 1.45;
+  background-color: rgba(0, 0, 0, 0.05);
+  border-radius: var(--border-radius);
+}
+
+.chat-agent-view .markdown-content code {
+  font-family:
+    SFMono-Regular,
+    Consolas,
+    Liberation Mono,
+    Menlo,
+    monospace;
+  font-size: 0.85rem;
+  padding: 0.2em 0.4em;
+  margin: 0;
+  background-color: rgba(0, 0, 0, 0.05);
+  border-radius: 3px;
+}
+
+.chat-agent-view .markdown-content pre code {
+  padding: 0;
+  background-color: transparent;
+}
+
+.chat-agent-view .markdown-content .table-container {
+  width: 100%;
+  overflow-x: auto;
+  margin-bottom: 1rem;
+}
+
+.chat-agent-view .markdown-content table {
+  width: 100%;
+  margin-top: 0;
+  margin-bottom: 0;
+  border-spacing: 0;
+  border-collapse: collapse;
+  border: 1px solid var(--color-border);
+  font-size: 0.9rem;
+}
+
+.chat-agent-view .markdown-content table th,
+.chat-agent-view .markdown-content table td {
+  padding: 0.5rem 0.75rem;
+  border: 1px solid var(--color-border);
+  text-align: left;
+  vertical-align: top;
+  word-break: break-word;
+}
+
+.chat-agent-view .markdown-content table th {
+  font-weight: 600;
+  background-color: var(--color-bg-secondary);
+}
+
+.chat-agent-view .markdown-content table tr:nth-child(2n) {
+  background-color: rgba(0, 0, 0, 0.02);
+}
+
+.chat-agent-view .markdown-content a {
+  color: var(--color-accent);
+  text-decoration: none;
+}
+
+.chat-agent-view .markdown-content a:hover {
+  text-decoration: underline;
+}
+
+.chat-agent-view .markdown-content img {
+  max-width: 100%;
+  height: auto;
+  display: block;
+  margin: 0.5rem auto;
+}
+
+.chat-agent-view .markdown-content hr {
+  height: 0.25em;
+  padding: 0;
+  margin: 1rem 0;
+  background-color: var(--color-border);
+  border: 0;
+}
+
+/* 用户消息中的markdown样式调整 */
+.user-message .markdown-content h1,
+.user-message .markdown-content h2,
+.user-message .markdown-content h3,
+.user-message .markdown-content h4,
+.user-message .markdown-content h5,
+.user-message .markdown-content h6 {
+  color: white;
+}
+
+.user-message .markdown-content a {
+  color: rgba(255, 255, 255, 0.9);
+}
+
+.user-message .markdown-content code {
+  background-color: rgba(255, 255, 255, 0.2);
+  color: white;
+}
+
+.user-message .markdown-content pre {
+  background-color: rgba(255, 255, 255, 0.1);
+}
+
+.user-message .markdown-content blockquote {
+  border-left-color: rgba(255, 255, 255, 0.3);
+  color: rgba(255, 255, 255, 0.9);
+}
+</style>