From b9d7f495ad0dd9455f3fabc169608065d3199799 Mon Sep 17 00:00:00 2001
From: dzq <dzq@ys.com>
Date: Fri, 19 Dec 2025 18:02:31 +0800
Subject: [PATCH] =?UTF-8?q?feat(llm-chat):=20=E5=AE=9E=E7=8E=B0=E6=B5=81?=
 =?UTF-8?q?=E5=BC=8FAPI=E5=93=8D=E5=BA=94=E5=92=8C=E6=89=93=E5=AD=97?=
 =?UTF-8?q?=E6=9C=BA=E6=95=88=E6=9E=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

添加流式API调用功能，替换原有的模拟响应。实现以下功能：
1. 使用SSE连接处理AI响应
2. 添加打字机效果逐字显示AI回复
3. 增加错误处理和连接管理
4. 移除未使用的Vant组件声明
---
 src/pages/llm-chat/index.vue | 132 +++++++++++++++++++++++++++++++----
 src/types/components.d.ts    |   2 -
 2 files changed, 117 insertions(+), 17 deletions(-)

diff --git a/src/pages/llm-chat/index.vue b/src/pages/llm-chat/index.vue
index 67760ed..0415763 100644
--- a/src/pages/llm-chat/index.vue
+++ b/src/pages/llm-chat/index.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { ChatMessage } from '@/types/chat'
 import { useScroll } from '@vueuse/core'
-import { isDark, toggleDark } from '@/composables/dark'
+import { streamApi } from '@/api/agent'
 
 
 // Sample chat data for demonstration
@@ -12,6 +12,11 @@ const inputText = ref('')
 const isLoading = ref(false)
 const messagesContainer = ref<HTMLElement>()
 
+// 流式响应相关状态
+const currentAiMessage = ref<ChatMessage | null>(null)
+const isStreaming = ref(false)
+const streamController = ref<AbortController | null>(null)
+
 const { arrivedState } = useScroll(messagesContainer, {
   offset: { bottom: 100 },
 })
@@ -29,7 +34,7 @@ function handleSend(text: string) {
   if (!text.trim())
     return
 
-  // Add user message
+  // 添加用户消息
   const userMessage: ChatMessage = {
     id: Date.now(),
     content: text,
@@ -39,24 +44,121 @@ function handleSend(text: string) {
   }
   messages.value.push(userMessage)
 
-  // Clear input
+  // 创建 AI 消息占位符
+  const aiMessage: ChatMessage = {
+    id: Date.now() + 1,
+    content: '',
+    sender: 'ai',
+    timestamp: new Date(),
+    status: 'sending',
+  }
+  messages.value.push(aiMessage)
+  currentAiMessage.value = aiMessage
+
+  // 清空输入
   inputText.value = ''
 
-  // Simulate AI response after delay
+  // 设置加载状态
   isLoading.value = true
-  setTimeout(() => {
-    userMessage.status = 'sent'
+  isStreaming.value = true
 
-    const aiMessage: ChatMessage = {
-      id: Date.now() + 1,
-      content: `I received your message: "${text}". This is a simulated response.`,
-      sender: 'ai',
-      timestamp: new Date(),
-      status: 'sent',
+  // 创建 AbortController（虽然用户不需要中止功能，但保留以备后用）
+  const controller = new AbortController()
+  streamController.value = controller
+
+  // 调用流式 API
+  streamApi(
+    text,
+    {
+      onopen(response) {
+        console.log('SSE 连接已建立:', response)
+      },
+      onmessage(data) {
+        try {
+          const parsed = JSON.parse(data) as { text: string }
+          if (parsed.text) {
+            // 打字机效果：逐字符追加
+            typewriterEffect(parsed.text)
+          }
+        } catch (error) {
+          console.error('解析 SSE 数据失败:', error)
+        }
+      },
+      onclose() {
+        console.log('SSE 连接已关闭')
+        completeMessage()
+      },
+      onerror(error) {
+        console.error('SSE 连接错误:', error)
+        handleStreamError(error)
+      }
+    },
+    { signal: controller.signal }
+  )
+}
+
+// 打字机效果：逐字符显示
+function typewriterEffect(text: string) {
+  if (!currentAiMessage.value)
+    return
+
+  const duration = 100 // 每个字符间隔（毫秒）
+  const fullText = currentAiMessage.value.content + text
+
+  function updateChar(index: number) {
+    if (!currentAiMessage.value)
+      return
+
+    if (index < fullText.length) {
+      currentAiMessage.value.content = fullText.slice(0, index + 1)
+      // 触发 Vue 响应式更新
+      const messageIndex = messages.value.findIndex(m => m.id === currentAiMessage.value?.id)
+      if (messageIndex !== -1) {
+        messages.value[messageIndex] = { ...currentAiMessage.value }
+      }
+
+      setTimeout(() => updateChar(index + 1), duration)
     }
-    messages.value.push(aiMessage)
-    isLoading.value = false
-  }, 1000)
+  }
+
+  updateChar(currentAiMessage.value.content.length)
+}
+
+// 完成消息处理
+function completeMessage() {
+  if (currentAiMessage.value) {
+    currentAiMessage.value.status = 'sent'
+    const messageIndex = messages.value.findIndex(m => m.id === currentAiMessage.value?.id)
+    if (messageIndex !== -1) {
+      messages.value[messageIndex] = { ...currentAiMessage.value }
+    }
+  }
+
+  cleanupStream()
+}
+
+// 处理流式错误
+function handleStreamError(error: Error) {
+  if (currentAiMessage.value) {
+    currentAiMessage.value.status = 'error'
+    currentAiMessage.value.content += ' (连接错误)'
+    const messageIndex = messages.value.findIndex(m => m.id === currentAiMessage.value?.id)
+    if (messageIndex !== -1) {
+      messages.value[messageIndex] = { ...currentAiMessage.value }
+    }
+  }
+
+  // 显示错误提示（可集成 vant 的 Toast 组件）
+  console.error('AI 响应错误:', error)
+  cleanupStream()
+}
+
+// 清理流式连接
+function cleanupStream() {
+  isLoading.value = false
+  isStreaming.value = false
+  streamController.value = null
+  currentAiMessage.value = null
 }
 
 function handleKeydown(e: KeyboardEvent) {
diff --git a/src/types/components.d.ts b/src/types/components.d.ts
index a455196..b4ec70e 100644
--- a/src/types/components.d.ts
+++ b/src/types/components.d.ts
@@ -30,8 +30,6 @@ declare module 'vue' {
     VanImage: typeof import('vant/es')['Image']
     VanList: typeof import('vant/es')['List']
     VanNavBar: typeof import('vant/es')['NavBar']
-    VanPicker: typeof import('vant/es')['Picker']
-    VanPopup: typeof import('vant/es')['Popup']
     VanSpace: typeof import('vant/es')['Space']
     VanStepper: typeof import('vant/es')['Stepper']
     VanSwitch: typeof import('vant/es')['Switch']