X-Agents/web/src/views/Chat.vue

<script setup lang="ts">
import { ref, nextTick } from 'vue'

interface ChatMessage {
  id: number
  role: 'user' | 'assistant'
  content: string
  timestamp: Date
  isStreaming?: boolean
}

interface Agent {
  id: number
  name: string
  avatar: string
  description: string
  accentColor: string
  gradient: string
  status: 'online' | 'offline'
}

interface ChatSession {
  id: number
  title: string
  agentId: number
  lastMessage: string
  timestamp: Date
}

// AI 助手配置
const chatAgents = ref<Agent[]>([
  { id: 1, name: 'Claude', avatar: '🧠', description: 'Anthropic AI', accentColor: '#f97316', gradient: 'from-orange-500/20 to-amber-500/20', status: 'online' },
  { id: 2, name: 'Gemini', avatar: '✨', description: 'Google DeepMind', accentColor: '#8b5cf6', gradient: 'from-violet-500/20 to-purple-500/20', status: 'online' },
  { id: 3, name: 'ChatGPT', avatar: '💬', description: 'OpenAI', accentColor: '#10b981', gradient: 'from-emerald-500/20 to-green-500/20', status: 'offline' },
  { id: 4, name: 'DeepSeek', avatar: '🔮', description: 'DeepSeek AI', accentColor: '#3b82f6', gradient: 'from-blue-500/20 to-cyan-500/20', status: 'online' },
  { id: 5, name: 'Kimi', avatar: '🌙', description: 'Moonshot AI', accentColor: '#ec4899', gradient: 'from-pink-500/20 to-rose-500/20', status: 'online' },
  { id: 6, name: '文心一言', avatar: '🐉', description: 'Baidu', accentColor: '#ef4444', gradient: 'from-red-500/20 to-orange-500/20', status: 'offline' },
  { id: 7, name: '通义千问', avatar: '☁️', description: 'Alibaba', accentColor: '#06b6d4', gradient: 'from-cyan-500/20 to-sky-500/20', status: 'online' },
])

// 当前选中的助手
const selectedAgent = ref<Agent | null>(chatAgents.value[0])

// 聊天消息
const messages = ref<ChatMessage[]>([
  { id: 1, role: 'assistant', content: '你好！我是 Claude，你的 AI 助手。有什么我可以帮助你的吗？', timestamp: new Date() },
])

// 模拟历史对话列表
const chatSessions = ref<ChatSession[]>([
  { id: 1, title: '关于 Python 学习的讨论', agentId: 1, lastMessage: '谢谢你！', timestamp: new Date(Date.now() - 3600000) },
  { id: 2, title: '代码调试帮助', agentId: 1, lastMessage: '让我看看这个问题...', timestamp: new Date(Date.now() - 7200000) },
  { id: 3, title: '数据分析咨询', agentId: 4, lastMessage: 'DeepSeek: 好的', timestamp: new Date(Date.now() - 86400000) },
])

// 侧边栏展开/收起状态
const sidebarCollapsed = ref(false)

// 输入内容
const inputMessage = ref('')
const isLoading = ref(false)
const messagesContainer = ref<HTMLElement | null>(null)

// 发送消息
const sendMessage = async () => {
  if (!inputMessage.value.trim() || isLoading.value) return

  const userContent = inputMessage.value.trim()
  inputMessage.value = ''

  const userMessage: ChatMessage = {
    id: Date.now(),
    role: 'user',
    content: userContent,
    timestamp: new Date()
  }
  messages.value.push(userMessage)

  const aiMessage: ChatMessage = {
    id: Date.now() + 1,
    role: 'assistant',
    content: '',
    timestamp: new Date(),
    isStreaming: true
  }
  messages.value.push(aiMessage)

  nextTick(() => scrollToBottom())

  isLoading.value = true
  const fullResponse = `我理解你发送了消息: "${userContent}"

作为 AI 助手，我可以帮助你：
• 回答各种问题
• 编写代码和调试
• 分析和处理数据
• 翻译和写作
• 头脑风暴和创意建议

请告诉我你需要什么帮助？`

  let currentIndex = 0
  const words = fullResponse.split('')

  const streamInterval = setInterval(() => {
    if (currentIndex < words.length) {
      aiMessage.content += words[currentIndex]
      currentIndex++
      nextTick(() => scrollToBottom())
    } else {
      clearInterval(streamInterval)
      aiMessage.isStreaming = false
      isLoading.value = false
    }
  }, 30)
}

// 滚动到底部
const scrollToBottom = () => {
  if (messagesContainer.value) {
    messagesContainer.value.scrollTop = messagesContainer.value.scrollHeight
  }
}

// 复制消息
const copyMessage = (content: string) => {
  navigator.clipboard.writeText(content)
}

// 选择助手
const selectAgent = (agent: Agent) => {
  selectedAgent.value = agent
  messages.value = [
    { id: 1, role: 'assistant', content: `你好！我是 ${agent.name}。有什么我可以帮助你的吗？`, timestamp: new Date() }
  ]
}

// 选择历史对话
const selectSession = (session: ChatSession) => {
  const agent = chatAgents.value.find(a => a.id === session.agentId)
  if (agent) {
    selectedAgent.value = agent
  }
  messages.value = [
    { id: 1, role: 'assistant', content: `已加载会话：${session.title}`, timestamp: new Date() }
  ]
}

// 新建聊天
const newChat = () => {
  messages.value = [
    { id: 1, role: 'assistant', content: `你好！我是 ${selectedAgent.value?.name || 'Claude'}。有什么我可以帮助你的吗？`, timestamp: new Date() }
  ]
}

// 格式化时间
const formatTime = (date: Date) => {
  return date.toLocaleTimeString('zh-CN', { hour: '2-digit', minute: '2-digit' })
}

// 格式化相对时间
const formatRelativeTime = (date: Date) => {
  const now = new Date()
  const diff = now.getTime() - date.getTime()
  const hours = Math.floor(diff / 3600000)
  const days = Math.floor(diff / 86400000)

  if (hours < 1) return '刚刚'
  if (hours < 24) return `${hours}小时前`
  if (days < 7) return `${days}天前`
  return date.toLocaleDateString('zh-CN')
}

// 回车发送
const handleKeydown = (e: KeyboardEvent) => {
  if (e.key === 'Enter' && !e.shiftKey) {
    e.preventDefault()
    sendMessage()
  }
}

// 调整输入框高度
const autoResize = (e: Event) => {
  const target = e.target as HTMLTextAreaElement
  target.style.height = 'auto'
  target.style.height = Math.min(target.scrollHeight, 160) + 'px'
}

// 折叠侧边栏
const toggleSidebar = () => {
  sidebarCollapsed.value = !sidebarCollapsed.value
}
</script>

<style scoped>
::-webkit-scrollbar {
  width: 6px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.08);
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.15);
}

@keyframes messageSlideIn {
  from {
    opacity: 0;
    transform: translateY(16px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.message-enter {
  animation: messageSlideIn 0.4s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

.cursor-blink {
  animation: blink 1s step-end infinite;
}

@keyframes pulse-glow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(249, 115, 22, 0.4); }
  50% { box-shadow: 0 0 20px 4px rgba(249, 115, 22, 0.2); }
}

.agent-glow {
  animation: pulse-glow 2s ease-in-out infinite;
}
</style>

<template>
  <div class="h-screen flex bg-[#09090b]">
    <!-- 主聊天区域 -->
    <div class="flex-1 flex flex-col bg-[#09090b]">
      <!-- 顶部栏 -->
      <div class="h-16 px-4 flex items-center justify-between border-b border-white/[0.06] bg-[#0c0c0f]/80 backdrop-blur-xl">
        <!-- 左侧：当前AI信息 -->
        <div class="flex items-center gap-3">
          <div v-if="selectedAgent" class="flex items-center gap-3">
            <div
              class="w-9 h-9 rounded-xl flex items-center justify-center text-lg shadow-lg"
              :style="{ backgroundColor: selectedAgent.accentColor + '15', color: selectedAgent.accentColor }"
            >
              {{ selectedAgent.avatar }}
            </div>
            <div>
              <div class="text-sm font-semibold text-white tracking-wide">{{ selectedAgent?.name || 'Chat' }}</div>
              <div class="text-[11px] flex items-center gap-1.5">
                <span class="w-1.5 h-1.5 rounded-full bg-emerald-400 animate-pulse"></span>
                <span class="text-white/40">Online</span>
              </div>
            </div>
          </div>
        </div>

        <!-- 中间：空白 -->
        <div class="flex-1"></div>

        <!-- 右侧：折叠按钮 -->
        <div class="flex items-center">
          <button
            @click="toggleSidebar"
            class="p-2.5 rounded-xl hover:bg-white/[0.06] text-white/35 hover:text-white/80 transition-all duration-200"
            :title="sidebarCollapsed ? '展开侧边栏' : '收起侧边栏'"
          >
            <svg class="w-[18px] h-[18px] transition-transform duration-300" :class="sidebarCollapsed ? '' : 'rotate-180'" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M4 6h16M4 12h16M4 18h16"></path>
            </svg>
          </button>
        </div>
      </div>

      <!-- 消息区域 -->
      <div ref="messagesContainer" class="flex-1 overflow-y-auto py-4">
        <div class="px-6">
          <div
            v-for="message in messages"
            :key="message.id"
            class="message-enter flex items-start mb-4"
            :class="message.role === 'user' ? 'flex-row-reverse' : ''"
          >
            <!-- 头像 -->
            <div
              class="w-9 h-9 rounded-full flex-shrink-0 flex items-center justify-center mx-3 mt-1"
              :class="message.role === 'user' ? 'bg-gradient-to-br from-orange-500 to-amber-600' : ''"
              :style="message.role === 'assistant' && selectedAgent ? {
                backgroundColor: selectedAgent.accentColor + '25',
                color: selectedAgent.accentColor
              } : {}"
            >
              <span v-if="message.role === 'user'" class="text-white text-sm">👤</span>
              <span v-else class="text-lg">{{ selectedAgent?.avatar || '🧠' }}</span>
            </div>

            <!-- 气泡和时间戳容器 -->
            <div :class="message.role === 'user' ? 'mr-3 ml-auto' : 'ml-3'">
              <!-- 消息气泡 -->
              <div
                class="px-4 py-2.5 rounded-xl text-[14px] leading-6"
                :class="message.role === 'user'
                  ? 'bg-gradient-to-br from-orange-500 to-orange-600 text-white rounded-tr-sm'
                  : 'bg-[#2a2a35] text-white/90 rounded-tl-sm max-w-[80%]'"
              >
                {{ message.content }}
                <span v-if="message.isStreaming" class="inline-block w-0.5 h-4 ml-0.5 bg-orange-300 cursor-blink align-middle"></span>
              </div>
              <!-- 时间戳 -->
              <div
                class="text-[11px] text-white/30 mt-1"
                :class="message.role === 'user' ? 'text-right' : ''"
              >
                {{ formatTime(message.timestamp) }}
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 输入区域 -->
      <div class="p-5 border-t border-white/[0.06] bg-[#0c0c0f]/60 backdrop-blur-xl">
        <div class="max-w-3xl mx-auto">
          <div class="relative bg-[#12121a] rounded-2xl border border-white/[0.08] focus-within:border-orange-500/40 focus-within:shadow-[0_0_30px_rgba(249,115,22,0.08)] transition-all duration-300">
            <!-- 附件按钮 -->
            <button class="absolute left-4 top-1/2 -translate-y-1/2 text-white/25 hover:text-orange-400 transition-colors p-1">
              <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M15.172 7l-6.586 6.586a2 2 0 102.828 2.828l6.414-6.586a4 4 0 00-5.656-5.656l-6.415 6.585a6 6 0 108.486 8.486L20.5 13"></path>
              </svg>
            </button>

            <!-- 输入框 -->
            <textarea
              v-model="inputMessage"
              @keydown="handleKeydown"
              @input="autoResize"
              placeholder="发送消息..."
              rows="1"
              class="w-full bg-transparent text-white placeholder-white/25 py-4 pl-12 pr-28 resize-none focus:outline-none text-[15px]"
            ></textarea>

            <!-- 发送按钮 -->
            <button
              @click="sendMessage"
              :disabled="!inputMessage.trim() || isLoading"
              class="absolute right-2 top-1/2 -translate-y-1/2 w-9 h-9 rounded-lg flex items-center justify-center transition-all duration-200 disabled:opacity-30 disabled:cursor-not-allowed"
              :class="inputMessage.trim() && !isLoading
                ? 'bg-orange-500 hover:bg-orange-400 shadow-lg shadow-orange-500/30 active:scale-90'
                : 'bg-white/10'"
            >
              <svg v-if="!isLoading" class="w-4 h-4 text-white" viewBox="0 0 24 24" fill="currentColor">
                <path d="M2.01 21L23 12 2.01 3 2 10l15 2-15 2z"/>
              </svg>
              <svg v-else class="w-4 h-4 text-white animate-spin" fill="none" viewBox="0 0 24 24">
                <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
              </svg>
            </button>
          </div>

          <!-- 提示 -->
          <div class="text-center mt-3">
            <span class="text-[10px] text-white/20 tracking-wide">AI 可能会产生错误信息，请核实重要内容</span>
          </div>
        </div>
      </div>
    </div>

    <!-- 右侧边栏：AI Hub -->
    <div
      class="flex-shrink-0 border-l border-white/[0.06] bg-[#0c0c0f] transition-all duration-300 ease-in-out overflow-hidden"
      :class="sidebarCollapsed ? 'w-0 opacity-0' : 'w-72 opacity-100'"
    >
      <div class="w-72 h-full flex flex-col">
        <!-- 侧边栏头部 -->
        <div class="p-4 border-b border-white/[0.06]">
          <div class="flex items-center gap-2 text-white font-semibold">
            <svg class="w-5 h-5 text-orange-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z"></path>
            </svg>
            <span>AI Hub</span>
          </div>
        </div>

        <!-- 新建对话按钮 -->
        <div class="p-3">
          <button
            @click="newChat"
            class="w-full flex items-center gap-2 px-3 py-2.5 bg-orange-500 hover:bg-orange-400 rounded-lg text-white text-sm font-medium transition-all duration-200"
          >
            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"></path>
            </svg>
            <span>新建对话</span>
          </button>
        </div>

        <!-- AI 助手选择 -->
        <div class="px-3 pb-3">
          <div class="text-xs text-white/40 uppercase tracking-wider mb-2 px-1">选择 AI 助手</div>
          <div class="space-y-1">
            <button
              v-for="agent in chatAgents"
              :key="agent.id"
              @click="selectAgent(agent)"
              class="w-full flex items-center gap-2 px-3 py-2 rounded-lg transition-all duration-200"
              :class="selectedAgent?.id === agent.id
                ? 'bg-orange-500/15 text-orange-400'
                : 'text-white/60 hover:bg-white/5 hover:text-white'"
            >
              <span class="text-base">{{ agent.avatar }}</span>
              <span class="text-sm truncate">{{ agent.name }}</span>
              <span
                v-if="agent.status === 'online'"
                class="w-1.5 h-1.5 rounded-full bg-emerald-400 ml-auto"
              ></span>
            </button>
          </div>
        </div>

        <!-- 历史对话列表 -->
        <div class="flex-1 overflow-y-auto px-3 pb-3">
          <div class="text-xs text-white/40 uppercase tracking-wider mb-2 px-1">最近对话</div>
          <div class="space-y-1">
            <button
              v-for="session in chatSessions"
              :key="session.id"
              @click="selectSession(session)"
              class="w-full text-left px-3 py-2.5 rounded-lg hover:bg-white/5 transition-all duration-200 group"
            >
              <div class="flex items-center gap-2">
                <svg class="w-4 h-4 text-white/30 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z"></path>
                </svg>
                <span class="text-sm text-white/70 group-hover:text-white truncate">{{ session.title }}</span>
              </div>
              <div class="text-xs text-white/30 mt-1 pl-6">{{ formatRelativeTime(session.timestamp) }}</div>
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>