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

<script setup lang="ts">
import { ref, nextTick, onMounted, onUnmounted } from 'vue'
import { useChat } from './chat/chat'
import ChatHeader from '@/components/chat/ChatHeader.vue'
import ChatMessage from '@/components/chat/ChatMessage.vue'
import ChatInput from '@/components/chat/ChatInput.vue'
import ChatSidebar from '@/components/chat/ChatSidebar.vue'
import ChatAgentSelector from '@/components/chat/ChatAgentSelector.vue'
import './chat/chat.css'

const {
  chatModels,
  selectedModel,
  showModelDropdown,
  chatAgents,
  selectedAgent,
  messages,
  chatSessions,
  currentSessionId,
  groupChats,
  showAgentSelector,
  selectMode,
  selectedAgents,
  groupChatName,
  inputMessage,
  isLoading,
  sidebarCollapsed,
  fetchModels,
  openAgentSelector,
  toggleAgentSelection,
  confirmAgentSelection,
  cancelAgentSelection,
  selectAgent,
  selectGroup,
  selectSession,
  newChat,
  clearMessages,
  toggleSidebar,
  createSession,
  saveMessage,
  deleteSession,
  init,
  cleanup,
} = useChat()

const messagesContainer = ref<HTMLElement | null>(null)

// Mock 流式响应（用于测试前端流式效果）
const mockStreamResponse = async (content: string, messageIndex: number) => {
  const chars = content.split('')
  for (let i = 0; i < chars.length; i++) {
    messages.value[messageIndex].content += chars[i]
    await nextTick()
    scrollToBottom()
    await new Promise(resolve => setTimeout(resolve, 15))
  }
  messages.value[messageIndex].isStreaming = false
  isLoading.value = false
}

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

// 切换模型下拉框
const toggleModelDropdown = () => {
  showModelDropdown.value = !showModelDropdown.value
}

// 选择模型
const handleSelectModel = (model: any) => {
  selectedModel.value = model
  showModelDropdown.value = false
}

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

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

  // 重置输入框高度
  nextTick(() => {
    const textarea = document.querySelector('.chat-input-textarea') as HTMLTextAreaElement
    if (textarea) {
      textarea.style.height = 'auto'
    }
  })

  // 如果没有会话，创建一个新会话
  if (!currentSessionId.value) {
    await createSession()
  }

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

  // 保存用户消息到后端
  await saveMessage('user', userContent)

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

  nextTick(() => scrollToBottom())

  isLoading.value = true

  try {
    const requestBody: any = {
      agent_id: String(selectedAgent.value?.id || 1),
      message: userContent,
    }

    if (selectedModel.value) {
      requestBody.model_id = selectedModel.value.id
    }

    // 传入 session_id
    if (currentSessionId.value) {
      requestBody.session_id = currentSessionId.value
    }

    const response = await fetch(`/api/agent/chat/stream`, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify(requestBody),
    })

    if (!response.ok) {
      throw new Error(`Request failed: ${response.status}`)
    }

    // 真正的流式处理：边读取边显示
    const reader = response.body.getReader()
    const decoder = new TextDecoder()
    let buffer = ''
    const aiMessageIndex = messages.value.length - 1

    while (true) {
      const { done, value } = await reader.read()
      if (done) break

      buffer += decoder.decode(value, { stream: true })

      const lines = buffer.split('\n')
      buffer = lines.pop() || ''

      for (const line of lines) {
        if (line.startsWith('data: ')) {
          const data = line.slice(6).trim()
          if (data && data !== '[DONE]') {
            // 直接累加内容并显示（真正的流式）
            messages.value[aiMessageIndex].content += data
            await nextTick()
            scrollToBottom()
          }
        }
      }
    }

    // 处理剩余buffer中的数据
    if (buffer.startsWith('data: ')) {
      const data = buffer.slice(6).trim()
      if (data && data !== '[DONE]') {
        messages.value[aiMessageIndex].content += data
      }
    }

    messages.value[aiMessageIndex].isStreaming = false
    isLoading.value = false
    scrollToBottom()

    // 保存 AI 消息到后端
    await saveMessage('assistant', messages.value[aiMessageIndex].content)
  } catch (error: any) {
    console.error('[Stream] 错误:', error)
    const errorIndex = messages.value.findIndex(m => m.isStreaming)
    if (errorIndex > -1) {
      messages.value[errorIndex].content = `Error: ${error.message || 'Failed to send message'}`
      messages.value[errorIndex].isStreaming = false
    }
    isLoading.value = false
  }
}

// 初始化
onMounted(() => {
  console.log('[Chat] Component mounted, calling init()')
  init()
})

onUnmounted(() => {
  cleanup()
})
</script>

<template>
  <div class="h-screen flex bg-[#09090b]">
    <!-- 主聊天区域 -->
    <div class="flex-1 flex flex-col bg-[#09090b]">
      <!-- 顶部栏 -->
      <ChatHeader
        :selected-agent="selectedAgent"
        :chat-models="chatModels"
        :selected-model="selectedModel"
        :show-model-dropdown="showModelDropdown"
        :sidebar-collapsed="sidebarCollapsed"
        @toggle-dropdown="toggleModelDropdown"
        @select-model="handleSelectModel"
        @toggle-sidebar="toggleSidebar"
        @clear-chat="clearMessages"
        @new-chat="newChat"
      />

      <!-- 消息区域 -->
      <div ref="messagesContainer" class="flex-1 overflow-y-auto py-4">
        <!-- 空状态欢迎提示 -->
        <div v-if="messages.length === 0" class="h-full flex items-center justify-center">
          <div class="text-center">
            <div class="text-5xl mb-4">{{ selectedAgent?.avatar || '🧠' }}</div>
            <h2 class="text-xl font-semibold text-white mb-2">和 {{ selectedAgent?.name || 'AI' }} 开始对话</h2>
            <p class="text-white/40 text-sm">发送消息开始聊天</p>
          </div>
        </div>
        <!-- 消息列表 -->
        <div v-else class="px-6">
          <ChatMessage
            v-for="message in messages"
            :key="message.id"
            :message="message"
            :selected-agent="selectedAgent"
          />
        </div>
      </div>

      <!-- 输入区域 -->
      <ChatInput
        v-model="inputMessage"
        :loading="isLoading"
        @send="sendMessage"
      />
    </div>

    <!-- 右侧边栏 -->
    <ChatSidebar
      :collapsed="sidebarCollapsed"
      :chat-agents="chatAgents"
      :selected-agent="selectedAgent"
      :chat-sessions="chatSessions"
      :group-chats="groupChats"
      @open-agent-selector="openAgentSelector"
      @select-agent="selectAgent"
      @select-session="selectSession"
      @select-group="selectGroup"
    />

    <!-- 智能体选择弹窗 -->
    <ChatAgentSelector
      :show="showAgentSelector"
      :select-mode="selectMode"
      :chat-agents="chatAgents"
      :selected-agents="selectedAgents"
      :group-chat-name="groupChatName"
      @close="cancelAgentSelection"
      @toggle-select="toggleAgentSelection"
      @confirm="confirmAgentSelection"
      @update:group-chat-name="groupChatName = $event"
    />
  </div>
</template>