@anker-in/campaign-ui 0.4.5 → 0.4.7

package/src/components/LiveChatWidget/components/MessageContent/ProductComparison.tsx

@@ -6,7 +6,7 @@
 
 import React, { useState } from 'react'
 import type { Product, MessageRenderer, CommonText } from '../../types'
-import { DEFAULT_COMMON_TEXT, CURRENCY_SYMBOLS } from '../../constants'
+import { DEFAULT_COMMON_TEXT, formatCurrency } from '../../constants'
 
 /**
  * 对比维度数据结构
@@ -65,10 +65,10 @@ export interface ProductComparisonProps {
 
 /**
  * 格式化价格显示
+ * 根据货币类型自动决定符号位置（前置或后置）
  */
 const formatPrice = (amount: number, currency: string = 'USD'): string => {
-  const symbol = CURRENCY_SYMBOLS[currency] || currency
-  return `${symbol}${amount}`
+  return formatCurrency(amount, currency)
 }
 
 /**
@@ -298,7 +298,7 @@ export const ProductComparison: React.FC<ProductComparisonProps> = ({ data, onAd
 
               {/* 价格展示（带划线价） */}
               <div className="mb-4 flex flex-col items-center gap-1">
-                <div className="flex items-center gap-2">
+                <div className="flex items-center gap-2 justify-center flex-wrap">
                   {/* 当前价格（折扣价或原价） */}
                   <span className="text-base font-bold leading-[1.2] tracking-[-0.02em] text-[#1D1D1F]">
                     {formatPrice(currentPrice, priceInfo?.currency || product.price.currency)}
@@ -317,7 +317,7 @@ export const ProductComparison: React.FC<ProductComparisonProps> = ({ data, onAd
                 <button
                   type="button"
                   onClick={handleAddToCart}
-                  className="livechat-btn-primary mb-3 w-fit rounded-full px-[20px] py-[10px] text-center text-sm font-bold leading-[1.2] tracking-[-0.04em] text-white"
+                  className="livechat-btn-primary mb-3 mt-auto w-fit rounded-full px-[20px] py-[10px] text-center text-sm font-bold leading-[1.2] tracking-[-0.04em] text-white"
                   style={{ backgroundColor: '#1D1D1F' }}
                 >
                   {mergedText.addToCart}

package/src/components/LiveChatWidget/components/MessageContent/ProductList.tsx

@@ -6,16 +6,14 @@
 
 import React, { useState } from 'react'
 import type { MessageRenderer, ProductListContent, Product, CommonText } from '../../types'
-import { CURRENCY_SYMBOLS, DEFAULT_COMMON_TEXT } from '../../constants.js'
+import { formatCurrency, DEFAULT_COMMON_TEXT } from '../../constants.js'
 
 /**
  * 格式化价格
  */
 function formatPrice(price: Product['price']): string {
   const { amount, currency } = price
-
-  const symbol = CURRENCY_SYMBOLS[currency] || currency
-  return `${symbol}${amount.toFixed(2)}`
+  return formatCurrency(amount, currency)
 }
 
 /**
@@ -47,8 +45,7 @@ function formatDiscountLabel(
   }
 
   if (discount.discount_type === 'fixed_amount') {
-    const symbol = CURRENCY_SYMBOLS[currency] || currency
-    return `${symbol}${Math.round(value)} ${offText}`
+    return `${formatCurrency(Math.round(value), currency)} ${offText}`
   }
 
   return ''

package/src/components/LiveChatWidget/components/MessageList.tsx

@@ -124,6 +124,8 @@ export const MessageList: React.FC<MessageListProps> = ({
   }, [])
   const [showScrollButton, setShowScrollButton] = useState(false)
 
+  const [showEmpty, setShowEmpty] = useState(false)
+
   // 检查是否接近底部
   const isNearBottom = useCallback(
     (threshold = 100) => {
@@ -187,17 +189,31 @@ export const MessageList: React.FC<MessageListProps> = ({
     return () => clearTimeout(timeoutId)
   }, [messages, autoScroll, listElement])
 
-  // 空状态 + 加载中
+  useEffect(() => {
+    if (!isLoadingHistory && messages.length === 0) {
+      const timer = setTimeout(() => setShowEmpty(true), 150)
+      return () => clearTimeout(timer)
+    } else {
+      setShowEmpty(false)
+    }
+  }, [isLoadingHistory, messages.length])
+
+  if (isLoadingHistory) {
+    return (
+      <div className={`flex flex-1 items-center justify-center overflow-hidden ${className}`}>
+        <LoadingIndicator />
+      </div>
+    )
+  }
+
   if (messages.length === 0) {
-    if (isLoadingHistory) {
-      // 加载中，显示 loading
+    if (!showEmpty) {
       return (
         <div className={`flex flex-1 items-center justify-center overflow-hidden ${className}`}>
           <LoadingIndicator />
         </div>
       )
     }
-    // 空状态
     return (
       <div className={`flex-1 overflow-hidden ${className}`}>{emptyPlaceholder || <DefaultEmptyPlaceholder />}</div>
     )

package/src/components/LiveChatWidget/constants.ts

@@ -23,6 +23,15 @@ export const CURRENCY_SYMBOLS: Record<string, string> = {
     RON: "Lei"
 }
 
+const SUFFIX_CURRENCIES = new Set(["VND", "RON", "PLN"])
+
+export function formatCurrency(amount: number | string, currency: string = 'USD'): string {
+  const symbol = CURRENCY_SYMBOLS[currency] || currency
+  const value = typeof amount === 'string' ? parseFloat(amount) : amount
+  const formatted = Number.isInteger(value) ? String(value) : value.toFixed(2)
+  return SUFFIX_CURRENCIES.has(currency) ? `${formatted} ${symbol}` : `${symbol}${formatted}`
+}
+
 /**
  * 默认文案配置
  */

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

@@ -82,17 +82,16 @@ export function useChatAPI(options: UseChatAPIOptions): UseChatAPIReturn {
    */
   const sendMessageStream = useCallback(
     async (request: ChatStreamRequest, onEvent: (event: SSEEvent) => void) => {
-      // 如果正在发送，先中断之前的请求
       if (abortControllerRef.current) {
         abortControllerRef.current.abort()
       }
 
-      // 创建新的 AbortController
       abortControllerRef.current = new AbortController()
       isSendingRef.current = true
+      const { signal } = abortControllerRef.current
 
       try {
-        await sendMessage(apiBaseUrl, request, onEvent, headers, recaptchaConfig)
+        await sendMessage(apiBaseUrl, request, onEvent, headers, recaptchaConfig, signal)
       } catch (error) {
         // 忽略手动中断的错误
         if (error instanceof Error && error.name === 'AbortError') {

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)
   }
 }