From 6eb2c9650644619204fb8e14e08d732382829d66 Mon Sep 17 00:00:00 2001
From: shenaowei <450702724@qq.com>
Date: Mon, 23 Feb 2026 15:42:55 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/agents/ChatDrawer.vue      | 861 ++++++++++++------
 1 file changed, 559 insertions(+), 302 deletions(-)

diff --git a/frontend/app/web-gold/src/components/agents/ChatDrawer.vue b/frontend/app/web-gold/src/components/agents/ChatDrawer.vue
index 3f2534b85e..0e9f9cf674 100644
--- a/frontend/app/web-gold/src/components/agents/ChatDrawer.vue
+++ b/frontend/app/web-gold/src/components/agents/ChatDrawer.vue
@@ -1,123 +1,158 @@
 <template>
   <teleport to="body">
-    <transition name="slide-drawer">
-      <div v-if="visible" class="chat-drawer-overlay" @click="handleOverlayClick">
+    <transition name="drawer-fade">
+      <div v-if="visible" class="chat-overlay" @click="handleOverlayClick">
         <div class="chat-drawer" :class="{ 'chat-drawer--visible': visible }" @click.stop>
-          <!-- 头部 -->
-          <div class="drawer-header">
-            <div class="header-info">
-              <div class="agent-avatar-small">
-                <img v-if="agent?.avatar" :src="agent?.avatar" :alt="agent?.name" />
-                <RobotOutlined v-else class="avatar-icon" />
+          <!-- Background Gradient Mesh -->
+          <div class="drawer-bg-gradient"></div>
+
+          <!-- Header -->
+          <header class="drawer-header">
+            <div class="header-content">
+              <div class="avatar-ring">
+                <div class="agent-avatar-small">
+                  <img v-if="agent?.avatar" :src="agent?.avatar" :alt="agent?.name" />
+                  <RobotOutlined v-else class="avatar-icon" />
+                </div>
+                <div class="status-dot"></div>
               </div>
-              <div class="header-text">
-                <h3 class="header-title">与「{{ agent?.name }}」对话中</h3>
-                <p class="header-subtitle">{{ agent?.categoryName }} • Pro模型已就绪</p>
+              <div class="header-info">
+                <h3 class="header-title">{{ agent?.name || '智能助手' }}</h3>
+                <div class="header-badges">
+                  <span class="badge-pill">{{ agent?.categoryName || '通用' }}</span>
+                  <span class="badge-pill badge-pro" v-if="modelMode === 'pro'">Pro Mode</span>
+                </div>
               </div>
             </div>
             <button class="close-btn" @click="handleClose">
               <CloseOutlined />
             </button>
-          </div>
+          </header>
 
-          <!-- 消息区域 -->
+          <!-- Messages Area -->
           <div class="drawer-messages" ref="messagesRef">
-            <div v-if="messages.length === 0" class="welcome-message">
-              <div class="agent-avatar-large">
-                <img v-if="agent?.avatar" :src="agent?.avatar" :alt="agent?.name" />
-                <RobotOutlined v-else class="avatar-icon-large" />
-              </div>
-              <p class="welcome-text">{{ agent?.description || '你好呀，有什么我可以帮你的吗？' }}</p>
-            </div>
-
-            <div
-              v-for="(msg, index) in messages"
-              :key="index"
-              class="message-item"
-              :class="`message-item--${msg.role}`"
-            >
-              <!-- 智能体消息 -->
-              <template v-if="msg.role === 'assistant'">
-                <div class="agent-avatar-small msg-avatar">
-                  <img v-if="agent?.avatar" :src="agent?.avatar" :alt="agent?.name" />
-                  <RobotOutlined v-else class="avatar-icon" />
+            <transition name="fade-up">
+              <div v-if="messages.length === 0" class="welcome-screen">
+                <div class="welcome-avatar-container">
+                  <div class="agent-avatar-large">
+                    <img v-if="agent?.avatar" :src="agent?.avatar" :alt="agent?.name" />
+                    <RobotOutlined v-else class="avatar-icon-large" />
+                  </div>
+                  <div class="avatar-glow"></div>
                 </div>
-                <div class="message-bubble message-bubble--assistant">
-                  <div v-if="msg.isPro" class="pro-tag">生成结果 (Pro版):</div>
-                  <div class="message-content" v-html="msg.content"></div>
-                  <div v-if="msg.actions" class="message-actions">
-                    <a-button size="small" @click="handleCopy(msg.content)">
-                      <template #icon><CopyOutlined /></template>
-                      复制文案
-                    </a-button>
-                    <a-button size="small" @click="handleRegenerate(index)">
-                      <template #icon><ReloadOutlined /></template>
-                      重新生成
-                    </a-button>
+                <h2 class="welcome-title">你好，我是 {{ agent?.name }}</h2>
+                <p class="welcome-desc">{{ agent?.description || '有什么我可以帮你的吗？' }}</p>
+                
+                <div class="suggestion-chips">
+                  <div class="chip" @click="inputText = '帮我写一份周报'; handleSend()">📝 帮我写一份周报</div>
+                  <div class="chip" @click="inputText = '解释一下量子纠缠'; handleSend()">🔬 解释一下量子纠缠</div>
+                  <div class="chip" @click="inputText = '制定一个健身计划'; handleSend()">💪 制定一个健身计划</div>
+                </div>
+              </div>
+            </transition>
+
+            <transition-group name="message-fade">
+              <div
+                v-for="(msg, index) in messages"
+                :key="index"
+                class="message-row"
+                :class="`message-row--${msg.role}`"
+              >
+                <!-- Assistant Avatar -->
+                <div v-if="msg.role === 'assistant'" class="message-avatar">
+                  <div class="agent-avatar-xs">
+                    <img v-if="agent?.avatar" :src="agent?.avatar" :alt="agent?.name" />
+                    <RobotOutlined v-else class="avatar-icon-xs" />
                   </div>
                 </div>
-              </template>
 
-              <!-- 用户消息 -->
-              <template v-else>
-                <div class="message-bubble message-bubble--user">
-                  {{ msg.content }}
+                <div class="message-bubble-container">
+                  <div class="message-bubble" :class="[`message-bubble--${msg.role}`, { 'bubble-pro': msg.isPro }]">
+                    <div v-if="msg.isPro && msg.role === 'assistant'" class="pro-indicator">
+                      <ThunderboltFilled /> Pro Model
+                    </div>
+                    <div class="message-content" v-html="msg.content"></div>
+                  </div>
+                  
+                  <!-- Actions -->
+                  <div v-if="msg.role === 'assistant' && msg.actions" class="message-actions">
+                    <button class="action-btn" @click="handleCopy(msg.content)" title="复制">
+                      <CopyOutlined />
+                    </button>
+                    <button class="action-btn" @click="handleRegenerate(index)" title="重新生成">
+                      <ReloadOutlined />
+                    </button>
+                  </div>
                 </div>
-                <div class="user-avatar msg-avatar">{{ userAvatar }}</div>
-              </template>
-            </div>
 
-            <!-- 加载中 -->
-            <div v-if="loading" class="message-item message-item--assistant">
-              <div class="agent-avatar-small msg-avatar">
-                <img v-if="agent?.avatar" :src="agent?.avatar" :alt="agent?.name" />
-                <RobotOutlined v-else class="avatar-icon" />
+                <!-- User Avatar -->
+                <div v-if="msg.role === 'user'" class="message-avatar">
+                  <div class="user-avatar">{{ userAvatar }}</div>
+                </div>
               </div>
-              <div class="message-bubble message-bubble--assistant">
-                <div class="typing-indicator">
-                  <span></span>
-                  <span></span>
-                  <span></span>
+            </transition-group>
+
+            <!-- Loading Indicator -->
+            <div v-if="loading" class="message-row message-row--assistant loading-row">
+              <div class="message-avatar">
+                <div class="agent-avatar-xs">
+                  <img v-if="agent?.avatar" :src="agent?.avatar" :alt="agent?.name" />
+                  <RobotOutlined v-else class="avatar-icon-xs" />
+                </div>
+              </div>
+              <div class="message-bubble message-bubble--assistant loading-bubble">
+                <div class="typing-dots">
+                  <span></span><span></span><span></span>
                 </div>
               </div>
             </div>
           </div>
 
-          <!-- 底部输入区 -->
-          <div class="drawer-footer">
-            <div class="model-selector">
-              <span class="selector-label">选择模型模式：</span>
-              <div class="model-options">
-                <button
-                  class="model-option"
-                  :class="{ 'model-option--active': modelMode === 'standard' }"
-                  @click="modelMode = 'standard'"
+          <!-- Footer Input Area -->
+          <footer class="drawer-footer">
+            <div class="input-container">
+              <!-- Model Toggle -->
+              <div class="model-toggle-wrapper">
+                <div class="model-toggle">
+                  <div class="toggle-bg" :class="{ 'toggle-bg--pro': modelMode === 'pro' }"></div>
+                  <button 
+                    class="toggle-item" 
+                    :class="{ active: modelMode === 'standard' }"
+                    @click="modelMode = 'standard'"
+                  >
+                    标准版
+                  </button>
+                  <button 
+                    class="toggle-item" 
+                    :class="{ active: modelMode === 'pro' }"
+                    @click="modelMode = 'pro'"
+                  >
+                    <ThunderboltFilled class="toggle-icon" /> 深度版
+                  </button>
+                </div>
+                <span class="points-hint">{{ modelMode === 'pro' ? '-50 积分' : '-10 积分' }}</span>
+              </div>
+
+              <div class="textarea-wrapper">
+                <textarea
+                  v-model="inputText"
+                  class="chat-textarea"
+                  placeholder="输入你的问题..."
+                  rows="1"
+                  @keydown="handleKeyDown"
+                  ref="textareaRef"
+                ></textarea>
+                <button 
+                  class="send-fab" 
+                  :disabled="!inputText.trim() || loading" 
+                  @click="handleSend"
                 >
-                  标准版 (-10分)
-                </button>
-                <button
-                  class="model-option"
-                  :class="{ 'model-option--active': modelMode === 'pro' }"
-                  @click="modelMode = 'pro'"
-                >
-                  Pro 深度版 (-50分) <ThunderboltFilled class="pro-icon" />
+                  <SendOutlined />
                 </button>
               </div>
             </div>
-            <div class="input-wrapper">
-              <textarea
-                v-model="inputText"
-                class="chat-input"
-                placeholder="在这里输入你的需求，例如：帮我写一段关于..."
-                rows="3"
-                @keydown="handleKeyDown"
-              ></textarea>
-              <button class="send-btn" :disabled="!inputText.trim() || loading" @click="handleSend">
-                <SendOutlined />
-              </button>
-            </div>
-            <p class="input-tip">点击发送将扣除对应积分，内容仅供参考。</p>
-          </div>
+            <div class="footer-note">内容由 AI 生成，仅供参考</div>
+          </footer>
         </div>
       </div>
     </transition>
@@ -125,7 +160,7 @@
 </template>
 
 <script setup>
-import { ref, watch, nextTick } from 'vue'
+import { ref, watch, nextTick, onMounted } from 'vue'
 import {
   CloseOutlined,
   RobotOutlined,
@@ -156,13 +191,13 @@ const inputText = ref('')
 const loading = ref(false)
 const messages = ref([])
 const messagesRef = ref(null)
-const userAvatar = ref('王')
-const conversationId = ref(null) // 会话ID，用于连续对话
-const abortController = ref(null) // 用于取消请求
+const textareaRef = ref(null)
+const userAvatar = ref('我')
+const conversationId = ref(null)
+const abortController = ref(null)
 
 // 方法
 const handleClose = () => {
-  // 取消正在进行的请求
   if (abortController.value) {
     abortController.value.abort()
     abortController.value = null
@@ -174,6 +209,19 @@ const handleOverlayClick = () => {
   handleClose()
 }
 
+// 自动调整高度
+const adjustTextareaHeight = () => {
+  const el = textareaRef.value
+  if (el) {
+    el.style.height = 'auto'
+    el.style.height = Math.min(el.scrollHeight, 120) + 'px'
+  }
+}
+
+watch(inputText, () => {
+  nextTick(adjustTextareaHeight)
+})
+
 const handleSend = async () => {
   if (!inputText.value.trim() || loading.value) return
 
@@ -186,10 +234,12 @@ const handleSend = async () => {
   const question = inputText.value
   inputText.value = ''
   loading.value = true
+  
+  // 重置高度
+  if (textareaRef.value) textareaRef.value.style.height = 'auto'
 
   await scrollToBottom()
 
-  // 创建 AI 消息占位
   const assistantMessage = {
     role: 'assistant',
     content: '',
@@ -198,10 +248,8 @@ const handleSend = async () => {
   }
   messages.value.push(assistantMessage)
 
-  // 创建取消控制器
   abortController.value = new AbortController()
 
-  // 调用流式对话 API
   try {
     await sendChatStream({
       agentId: props.agent?.id,
@@ -211,22 +259,18 @@ const handleSend = async () => {
       ctrl: abortController.value,
       onMessage: (result) => {
         if (result.event === 'message' && result.content) {
-          // 追加消息内容
           assistantMessage.content += result.content
           scrollToBottom()
         } else if (result.event === 'done') {
-          // 对话完成
           conversationId.value = result.conversationId
           assistantMessage.actions = true
         } else if (result.event === 'error') {
-          // 错误处理
           message.error(result.errorMessage || '对话出错')
         }
       },
       onError: (error) => {
         console.error('发送消息失败:', error)
         message.error('发送消息失败，请重试')
-        // 移除失败的 AI 消息
         const lastMsg = messages.value[messages.value.length - 1]
         if (lastMsg?.role === 'assistant' && !lastMsg.content) {
           messages.value.pop()
@@ -245,11 +289,9 @@ const handleSend = async () => {
       modelMode: modelMode.value
     })
   } catch (error) {
-    // 用户取消不需要提示
     if (error.name !== 'AbortError') {
       console.error('发送消息失败:', error)
       message.error('发送消息失败，请重试')
-      // 移除失败的 AI 消息
       const lastMsg = messages.value[messages.value.length - 1]
       if (lastMsg?.role === 'assistant' && !lastMsg.content) {
         messages.value.pop()
@@ -269,14 +311,13 @@ const handleKeyDown = (e) => {
 
 const handleCopy = (content) => {
   navigator.clipboard.writeText(content)
-  message.success('已复制到剪贴板')
+  message.success('已复制')
 }
 
 const handleRegenerate = async (index) => {
-  // 重新生成：移除当前消息，重新发送上一条用户消息
   if (index > 0 && messages.value[index - 1]?.role === 'user') {
     const userMsg = messages.value[index - 1]
-    messages.value.splice(index - 1, 2) // 移除用户消息和 AI 回复
+    messages.value.splice(index - 1, 2)
     inputText.value = userMsg.content
     await handleSend()
   }
@@ -285,16 +326,18 @@ const handleRegenerate = async (index) => {
 const scrollToBottom = async () => {
   await nextTick()
   if (messagesRef.value) {
-    messagesRef.value.scrollTop = messagesRef.value.scrollHeight
+    messagesRef.value.scrollTo({
+      top: messagesRef.value.scrollHeight,
+      behavior: 'smooth'
+    })
   }
 }
 
-// 监听 visible 变化，重置状态
 watch(() => props.visible, (newVal) => {
   if (newVal) {
     messages.value = []
     inputText.value = ''
-    conversationId.value = null // 重置会话ID
+    conversationId.value = null
     abortController.value = null
     nextTick(() => scrollToBottom())
   }
@@ -302,10 +345,25 @@ watch(() => props.visible, (newVal) => {
 </script>
 
 <style scoped lang="less">
-.chat-drawer-overlay {
+// Variables
+@primary-color: #6366f1; // Indigo 500
+@primary-dark: #4f46e5; // Indigo 600
+@secondary-color: #8b5cf6; // Violet 500
+@bg-color: #f8fafc; // Slate 50
+@surface-color: #ffffff;
+@text-primary: #1e293b; // Slate 800
+@text-secondary: #64748b; // Slate 500
+@border-color: #e2e8f0; // Slate 200
+@shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+@shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+@shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+@shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
+
+.chat-overlay {
   position: fixed;
   inset: 0;
-  background: rgba(0, 0, 0, 0.3);
+  background: rgba(15, 23, 42, 0.4); // Slate 900 with opacity
+  backdrop-filter: blur(4px);
   z-index: 1000;
   display: flex;
   justify-content: flex-end;
@@ -314,13 +372,14 @@ watch(() => props.visible, (newVal) => {
 .chat-drawer {
   width: 500px;
   height: 100%;
-  background: #fff;
-  box-shadow: -4px 0 20px rgba(0, 0, 0, 0.15);
+  background: @bg-color;
+  box-shadow: @shadow-xl;
   display: flex;
   flex-direction: column;
-  border-left: 1px solid #E2E8F0;
+  position: relative;
   transform: translateX(100%);
-  transition: transform 0.3s ease;
+  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
+  overflow: hidden;
 
   @media (max-width: 576px) {
     width: 100%;
@@ -331,43 +390,54 @@ watch(() => props.visible, (newVal) => {
   }
 }
 
-.slide-drawer-enter-active,
-.slide-drawer-leave-active {
-  transition: opacity 0.3s ease;
+.drawer-bg-gradient {
+  position: absolute;
+  top: -20%;
+  right: -20%;
+  width: 600px;
+  height: 600px;
+  background: radial-gradient(circle, rgba(99, 102, 241, 0.08) 0%, rgba(255, 255, 255, 0) 70%);
+  pointer-events: none;
+  z-index: 0;
 }
 
-.slide-drawer-enter-from,
-.slide-drawer-leave-to {
-  opacity: 0;
-}
-
-// 头部
+// Header
 .drawer-header {
-  height: 64px;
-  border-bottom: 1px solid #F1F5F9;
+  height: 72px;
+  padding: 0 24px;
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: 0 24px;
-  background: #F8FAFC;
+  background: rgba(255, 255, 255, 0.8);
+  backdrop-filter: blur(12px);
+  border-bottom: 1px solid rgba(226, 232, 240, 0.6);
+  z-index: 10;
   flex-shrink: 0;
 }
 
-.header-info {
+.header-content {
   display: flex;
   align-items: center;
-  gap: 12px;
+  gap: 16px;
+}
+
+.avatar-ring {
+  position: relative;
+  padding: 2px;
+  border-radius: 50%;
+  background: linear-gradient(135deg, @primary-color, @secondary-color);
 }
 
 .agent-avatar-small {
-  width: 32px;
-  height: 32px;
+  width: 36px;
+  height: 36px;
   border-radius: 50%;
-  overflow: hidden;
-  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  background: @surface-color;
   display: flex;
   align-items: center;
   justify-content: center;
+  overflow: hidden;
+  border: 2px solid @surface-color;
 
   img {
     width: 100%;
@@ -376,342 +446,529 @@ watch(() => props.visible, (newVal) => {
   }
 }
 
-.avatar-icon {
-  font-size: 16px;
-  color: rgba(255, 255, 255, 0.8);
+.status-dot {
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  width: 10px;
+  height: 10px;
+  background: #22c55e; // Green 500
+  border: 2px solid @surface-color;
+  border-radius: 50%;
 }
 
-.header-text {
+.header-info {
   display: flex;
   flex-direction: column;
-  gap: 2px;
+  gap: 4px;
 }
 
 .header-title {
-  font-size: 14px;
-  font-weight: 600;
-  color: #1E293B;
+  font-size: 16px;
+  font-weight: 700;
+  color: @text-primary;
   margin: 0;
+  line-height: 1.2;
 }
 
-.header-subtitle {
+.header-badges {
+  display: flex;
+  gap: 6px;
+}
+
+.badge-pill {
   font-size: 10px;
-  color: #94A3B8;
-  margin: 0;
+  padding: 2px 8px;
+  background: #f1f5f9;
+  color: @text-secondary;
+  border-radius: 12px;
+  font-weight: 500;
+}
+
+.badge-pro {
+  background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
+  color: #b45309;
+  border: 1px solid #fde68a;
 }
 
 .close-btn {
   width: 32px;
   height: 32px;
-  border-radius: 8px;
+  border-radius: 50%;
   border: none;
   background: transparent;
-  color: #94A3B8;
+  color: @text-secondary;
   cursor: pointer;
+  transition: all 0.2s;
   display: flex;
   align-items: center;
   justify-content: center;
-  transition: all 0.2s ease;
 
   &:hover {
-    background: #E2E8F0;
-    color: #1E293B;
-  }
-
-  .anticon {
-    font-size: 16px;
+    background: #f1f5f9;
+    color: @text-primary;
+    transform: rotate(90deg);
   }
 }
 
-// 消息区域
+// Messages
 .drawer-messages {
   flex: 1;
   overflow-y: auto;
   padding: 24px;
   display: flex;
   flex-direction: column;
-  gap: 16px;
+  gap: 24px;
+  z-index: 1;
+  scroll-behavior: smooth;
 
   &::-webkit-scrollbar {
     width: 6px;
   }
-
   &::-webkit-scrollbar-thumb {
-    background: #CBD5E1;
+    background: #cbd5e1;
     border-radius: 3px;
   }
 }
 
-.welcome-message {
+// Welcome Screen
+.welcome-screen {
   display: flex;
   flex-direction: column;
   align-items: center;
+  justify-content: center;
+  padding: 40px 0;
   text-align: center;
-  padding: 40px 20px;
+  height: 100%;
+}
+
+.welcome-avatar-container {
+  position: relative;
+  margin-bottom: 24px;
 }
 
 .agent-avatar-large {
-  width: 64px;
-  height: 64px;
+  width: 80px;
+  height: 80px;
   border-radius: 50%;
-  overflow: hidden;
-  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  background: linear-gradient(135deg, @primary-color, @secondary-color);
   display: flex;
   align-items: center;
   justify-content: center;
-  margin-bottom: 16px;
+  position: relative;
+  z-index: 2;
+  box-shadow: @shadow-lg;
 
   img {
     width: 100%;
     height: 100%;
     object-fit: cover;
+    border-radius: 50%;
+    border: 3px solid @surface-color;
   }
 }
 
 .avatar-icon-large {
-  font-size: 32px;
-  color: rgba(255, 255, 255, 0.8);
+  font-size: 40px;
+  color: rgba(255, 255, 255, 0.9);
 }
 
-.welcome-text {
+.avatar-glow {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 120px;
+  height: 120px;
+  background: radial-gradient(circle, rgba(99, 102, 241, 0.2) 0%, rgba(255, 255, 255, 0) 70%);
+  border-radius: 50%;
+  animation: pulse 3s infinite;
+}
+
+.welcome-title {
+  font-size: 20px;
+  font-weight: 700;
+  color: @text-primary;
+  margin-bottom: 8px;
+}
+
+.welcome-desc {
   font-size: 14px;
-  color: #64748B;
-  max-width: 280px;
+  color: @text-secondary;
+  max-width: 300px;
   line-height: 1.6;
+  margin-bottom: 32px;
 }
 
-.message-item {
+.suggestion-chips {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: 10px;
+  max-width: 360px;
+}
+
+.chip {
+  padding: 8px 16px;
+  background: @surface-color;
+  border: 1px solid @border-color;
+  border-radius: 20px;
+  font-size: 12px;
+  color: @text-secondary;
+  cursor: pointer;
+  transition: all 0.2s;
+  box-shadow: @shadow-sm;
+
+  &:hover {
+    border-color: @primary-color;
+    color: @primary-color;
+    transform: translateY(-2px);
+    box-shadow: @shadow-md;
+  }
+}
+
+// Message Rows
+.message-row {
   display: flex;
   gap: 12px;
+  align-items: flex-start;
 
   &--user {
     flex-direction: row-reverse;
   }
 }
 
-.msg-avatar {
+.message-avatar {
   flex-shrink: 0;
+  margin-top: 4px;
+}
+
+.agent-avatar-xs {
+  width: 28px;
+  height: 28px;
+  border-radius: 50%;
+  background: linear-gradient(135deg, @primary-color, @secondary-color);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  
+  img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    border-radius: 50%;
+  }
+}
+
+.avatar-icon-xs {
+  font-size: 14px;
+  color: #fff;
 }
 
 .user-avatar {
-  width: 32px;
-  height: 32px;
+  width: 28px;
+  height: 28px;
   border-radius: 50%;
-  background: #4F46E5;
+  background: @text-primary;
   color: #fff;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 12px;
   font-weight: 600;
-  border: 2px solid #fff;
+}
+
+.message-bubble-container {
+  max-width: 85%;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  
+  .message-row--user & {
+    align-items: flex-end;
+  }
 }
 
 .message-bubble {
-  max-width: 80%;
   padding: 12px 16px;
   border-radius: 16px;
   font-size: 14px;
   line-height: 1.6;
+  position: relative;
+  word-break: break-word;
 
   &--assistant {
-    background: #F1F5F9;
-    color: #334155;
-    border-radius: 16px 16px 16px 4px;
+    background: @surface-color;
+    color: @text-primary;
+    border-radius: 4px 16px 16px 16px;
+    box-shadow: @shadow-sm;
+    border: 1px solid rgba(226, 232, 240, 0.8);
   }
 
   &--user {
-    background: linear-gradient(135deg, #3B82F6 0%, #2563EB 100%);
+    background: linear-gradient(135deg, @primary-color 0%, @secondary-color 100%);
     color: #fff;
-    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.25);
     border-radius: 16px 16px 4px 16px;
+    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.25);
   }
 }
 
-.pro-tag {
+.bubble-pro {
+  border: 1px solid rgba(245, 158, 11, 0.2);
+  background: linear-gradient(to bottom right, #fff, #fffbeb);
+}
+
+.pro-indicator {
   font-size: 10px;
-  font-weight: 600;
-  color: #92400E;
-  margin-bottom: 8px;
+  font-weight: 700;
+  color: #b45309;
+  margin-bottom: 6px;
+  display: flex;
+  align-items: center;
+  gap: 4px;
 }
 
 .message-content {
   white-space: pre-wrap;
+  
+  :deep(p) {
+    margin: 0 0 8px 0;
+    &:last-child { margin-bottom: 0; }
+  }
 }
 
 .message-actions {
   display: flex;
   gap: 8px;
-  margin-top: 12px;
+  margin-top: 6px;
+  opacity: 0;
+  transition: opacity 0.2s;
 
-  .ant-btn {
-    height: 24px;
-    padding: 0 8px;
-    font-size: 10px;
-    border-radius: 4px;
-  }
-}
-
-// 输入打字动画
-.typing-indicator {
-  display: flex;
-  gap: 4px;
-  padding: 8px 0;
-
-  span {
-    width: 8px;
-    height: 8px;
-    border-radius: 50%;
-    background: #94A3B8;
-    animation: typing 1.4s infinite;
-
-    &:nth-child(2) {
-      animation-delay: 0.2s;
-    }
-
-    &:nth-child(3) {
-      animation-delay: 0.4s;
-    }
-  }
-}
-
-@keyframes typing {
-  0%, 60%, 100% {
-    transform: translateY(0);
-    opacity: 0.4;
-  }
-  30% {
-    transform: translateY(-8px);
+  .message-row:hover & {
     opacity: 1;
   }
 }
 
-// 底部输入区
+.action-btn {
+  background: transparent;
+  border: none;
+  color: @text-secondary;
+  font-size: 12px;
+  cursor: pointer;
+  padding: 4px;
+  border-radius: 4px;
+  
+  &:hover {
+    background: #f1f5f9;
+    color: @primary-color;
+  }
+}
+
+// Loading
+.loading-bubble {
+  padding: 12px 20px;
+}
+
+.typing-dots {
+  display: flex;
+  gap: 4px;
+  
+  span {
+    width: 6px;
+    height: 6px;
+    background: @text-secondary;
+    border-radius: 50%;
+    animation: bounce 1.4s infinite ease-in-out both;
+    
+    &:nth-child(1) { animation-delay: -0.32s; }
+    &:nth-child(2) { animation-delay: -0.16s; }
+  }
+}
+
+// Footer
 .drawer-footer {
-  padding: 16px 20px;
-  border-top: 1px solid #E2E8F0;
-  background: #F8FAFC;
+  padding: 20px 24px;
+  background: rgba(255, 255, 255, 0.9);
+  backdrop-filter: blur(12px);
+  border-top: 1px solid rgba(226, 232, 240, 0.6);
+  z-index: 10;
   flex-shrink: 0;
 }
 
-.model-selector {
+.input-container {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.model-toggle-wrapper {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  margin-bottom: 12px;
-  padding: 0 4px;
 }
 
-.selector-label {
-  font-size: 12px;
-  font-weight: 600;
-  color: #64748B;
-}
-
-.model-options {
+.model-toggle {
+  position: relative;
   display: flex;
-  background: #E2E8F0;
-  border-radius: 8px;
-  padding: 2px;
-  gap: 2px;
+  background: #f1f5f9;
+  border-radius: 20px;
+  padding: 4px;
+  width: fit-content;
 }
 
-.model-option {
-  padding: 6px 12px;
-  border-radius: 6px;
-  font-size: 10px;
-  font-weight: 600;
-  color: #64748B;
+.toggle-bg {
+  position: absolute;
+  top: 4px;
+  left: 4px;
+  width: calc(50% - 4px);
+  height: calc(100% - 8px);
+  background: #fff;
+  border-radius: 16px;
+  box-shadow: @shadow-sm;
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  
+  &--pro {
+    transform: translateX(100%);
+    background: #fff;
+  }
+}
+
+.toggle-item {
+  position: relative;
+  z-index: 1;
+  padding: 4px 16px;
   border: none;
   background: transparent;
+  font-size: 12px;
+  font-weight: 600;
+  color: @text-secondary;
   cursor: pointer;
-  transition: all 0.2s ease;
+  transition: color 0.3s;
   display: flex;
   align-items: center;
   gap: 4px;
 
-  &:hover {
-    background: rgba(255, 255, 255, 0.5);
-  }
-
-  &--active {
-    background: #fff;
-    color: #7C3AED;
-    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
+  &.active {
+    color: @primary-color;
   }
 }
 
-.pro-icon {
-  font-size: 10px;
-  color: #EAB308;
+.toggle-icon {
+  color: #eab308;
 }
 
-.input-wrapper {
+.points-hint {
+  font-size: 11px;
+  color: @text-secondary;
+  background: #f8fafc;
+  padding: 2px 8px;
+  border-radius: 4px;
+  border: 1px solid @border-color;
+}
+
+.textarea-wrapper {
   position: relative;
+  background: @surface-color;
+  border-radius: 16px;
+  box-shadow: @shadow-sm;
+  border: 1px solid @border-color;
+  transition: all 0.2s;
+
+  &:focus-within {
+    border-color: @primary-color;
+    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
+  }
 }
 
-.chat-input {
+.chat-textarea {
   width: 100%;
-  padding: 14px 44px 14px 16px;
+  padding: 12px 48px 12px 16px;
   border: none;
-  border-radius: 12px;
-  font-size: 14px;
-  color: #1E293B;
-  background: #F8FAFC;
-  outline: none;
+  background: transparent;
   resize: none;
-  transition: all 0.2s ease;
+  outline: none;
   font-family: inherit;
-
+  font-size: 14px;
+  line-height: 1.5;
+  color: @text-primary;
+  max-height: 120px;
+  
   &::placeholder {
-    color: #94A3B8;
-  }
-
-  &:focus {
-    background: #fff;
-    box-shadow: 0 0 0 1px #E2E8F0;
-  }
-
-  &:hover {
-    background: #fff;
+    color: #94a3b8;
   }
 }
 
-.send-btn {
+.send-fab {
   position: absolute;
   right: 8px;
   bottom: 8px;
   width: 32px;
   height: 32px;
-  border-radius: 8px;
+  border-radius: 10px;
   border: none;
-  background: #7C3AED;
+  background: @primary-color;
   color: #fff;
   cursor: pointer;
   display: flex;
   align-items: center;
   justify-content: center;
-  transition: all 0.2s ease;
-
+  transition: all 0.2s;
+  
   &:hover:not(:disabled) {
-    background: #6D28D9;
-    box-shadow: 0 4px 12px rgba(124, 58, 237, 0.3);
+    background: @primary-dark;
+    transform: scale(1.05);
   }
-
+  
   &:disabled {
-    opacity: 0.5;
+    background: #cbd5e1;
     cursor: not-allowed;
   }
-
-  .anticon {
-    font-size: 12px;
-  }
 }
 
-.input-tip {
-  font-size: 10px;
-  color: #94A3B8;
+.footer-note {
   text-align: center;
-  margin: 8px 0 0 0;
+  font-size: 10px;
+  color: #cbd5e1;
+  margin-top: 8px;
+}
+
+// Animations
+@keyframes pulse {
+  0% { transform: translate(-50%, -50%) scale(0.95); opacity: 0.5; }
+  50% { transform: translate(-50%, -50%) scale(1.05); opacity: 0.2; }
+  100% { transform: translate(-50%, -50%) scale(0.95); opacity: 0.5; }
+}
+
+@keyframes bounce {
+  0%, 80%, 100% { transform: scale(0); }
+  40% { transform: scale(1); }
+}
+
+// Transitions
+.drawer-fade-enter-active,
+.drawer-fade-leave-active {
+  transition: opacity 0.3s ease;
+}
+.drawer-fade-enter-from,
+.drawer-fade-leave-to {
+  opacity: 0;
+}
+
+.fade-up-enter-active,
+.fade-up-leave-active {
+  transition: all 0.4s ease;
+}
+.fade-up-enter-from,
+.fade-up-leave-to {
+  opacity: 0;
+  transform: translateY(20px);
+}
+
+.message-fade-enter-active {
+  transition: all 0.4s ease;
+}
+.message-fade-enter-from {
+  opacity: 0;
+  transform: translateY(10px);
 }
 </style>