@anker-in/campaign-ui 0.4.6 → 0.4.8

package/src/components/LiveChatWidget/hooks/useChatState.ts

@@ -461,6 +461,12 @@ export interface UseChatStateReturn {
    */
   handleSSEEvent: (event: SSEEvent) => void
 
+  /**
+   * 开始新的 stream 会话，返回绑定了当前 streamId 的事件处理器。
+   * 调用此方法会使之前所有 stream 的事件处理器失效，防止并发 stream 污染共享 buffer。
+   */
+  startStream: () => (event: SSEEvent) => void
+
   /**
    * 保存会话 ID
    */
@@ -560,6 +566,9 @@ export function useChatState(options: UseChatStateOptions = {}): UseChatStateRet
   // 卡片缓存队列，用于存储需要延迟显示的卡片（在文本完成后显示）
   const pendingCardsRef = useRef<MessageContent[]>([])
 
+  // 当前活跃 stream 的唯一 ID，用于丢弃过期 stream 的事件，防止并发 stream 共享 buffer
+  const activeStreamIdRef = useRef<string | null>(null)
+
   /**
    * 打开聊天窗口
    */
@@ -641,21 +650,20 @@ export function useChatState(options: UseChatStateOptions = {}): UseChatStateRet
    * 根据事件类型进行不同的处理
    */
   const handleSSEEvent = useCallback(
-    (event: SSEEvent) => {
+    (event: SSEEvent, streamId?: string) => {
       const { event: eventType, data } = event
 
+      // 并发 stream 防护：除 message_start 外的所有事件必须匹配当前活跃 streamId
+      if (eventType !== 'message_start' && streamId !== activeStreamIdRef.current) {
+        return
+      }
+
       switch (eventType) {
         case 'message_start': {
-          // 开始接收新消息
           setIsStreaming(true)
 
-          // 重置文本消息回调标记
           textMessageCallbackTriggeredRef.current = false
-
-          // 重置文本缓冲区
           textBufferRef.current = ''
-
-          // 重置卡片缓存队列
           pendingCardsRef.current = []
 
           // T039: 保存 sessionId 和 userId（如果后端返回）
@@ -1088,6 +1096,17 @@ export function useChatState(options: UseChatStateOptions = {}): UseChatStateRet
   )
 
 
+  const startStream = useCallback((): ((event: SSEEvent) => void) => {
+    const streamId = `stream-${Date.now()}-${Math.random().toString(36).slice(2)}`
+    activeStreamIdRef.current = streamId
+    textBufferRef.current = ''
+    pendingCardsRef.current = []
+    productMapRef.current.clear()
+    rawProductMapRef.current.clear()
+    currentMessageRef.current = null
+    return (event: SSEEvent) => handleSSEEvent(event, streamId)
+  }, [handleSSEEvent])
+
   return {
     messages,
     isOpen,
@@ -1104,6 +1123,7 @@ export function useChatState(options: UseChatStateOptions = {}): UseChatStateRet
     setMessages,
     clearMessages,
     handleSSEEvent,
+    startStream,
     saveSession,
     clearSession,
   }

package/src/components/LiveChatWidget/utils/fetcher.ts

@@ -60,6 +60,8 @@ export interface FetcherOptions {
   recaptchaSitekey?: string
   recaptchaAction?: string
   recaptchaHeaderKey?: string
+  /** 外部传入的 AbortSignal，用于提前中止请求 */
+  signal?: AbortSignal
 }
 
 /**
@@ -76,8 +78,8 @@ export const fetcher = async ({
   recaptchaSitekey,
   recaptchaAction = '',
   recaptchaHeaderKey = 'X-Recaptcha-Token',
+  signal: externalSignal,
 }: FetcherOptions): Promise<Response> => {
-  // 获取 reCAPTCHA headers（如果需要）
   let recaptchaHeaders: Record<string, string> = {}
   if (needRecaptcha) {
     if (!recaptchaSitekey) {
@@ -87,14 +89,23 @@ export const fetcher = async ({
     }
   }
 
-  // 准备请求体
   const bodyData = body ? JSON.stringify(body) : undefined
 
+  // 合并外部 signal（用于手动中止）和超时 signal
   const controller = new AbortController()
   let timeoutTimer: NodeJS.Timeout | undefined
   if (timeout) {
     timeoutTimer = setTimeout(() => controller.abort(), timeout)
   }
+  // 如果外部 signal 已中止或在请求期间中止，同步到内部 controller
+  const onExternalAbort = () => controller.abort()
+  if (externalSignal) {
+    if (externalSignal.aborted) {
+      controller.abort()
+    } else {
+      externalSignal.addEventListener('abort', onExternalAbort, { once: true })
+    }
+  }
 
   try {
     const response = await fetch(url, {
@@ -119,6 +130,8 @@ export const fetcher = async ({
       clearTimeout(timeoutTimer)
     }
     throw error
+  } finally {
+    externalSignal?.removeEventListener('abort', onExternalAbort)
   }
 }