@anker-in/campaign-ui 0.3.5 → 0.3.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@anker-in/campaign-ui",
-  "version": "0.3.5",
+  "version": "0.3.6",
   "description": "Campaign UI components and utilities for Anker projects",
   "main": "./dist/cjs/index.js",
   "module": "./dist/esm/index.js",

package/src/components/LiveChatWidget/LiveChatWidget.tsx

@@ -23,6 +23,7 @@ import { useChatState } from './hooks/useChatState'
 import { useChatAPI } from './hooks/useChatAPI'
 import { MessageRendererRegistry } from './utils/messageRenderers'
 import { sanitizeInput } from './utils/validation'
+import { saveUserId } from './utils/userId'
 import { transformProducts } from './utils/productTransformers.js'
 import { transformCartData } from './utils/cartTransformers.js'
 import Cookies from 'js-cookie'
@@ -175,6 +176,7 @@ export const LiveChatWidget: React.FC<LiveChatWidgetProps> = ({
     openChat,
     closeChat,
     setInputValue,
+    setUserId,
     addMessage,
     setMessages,
     clearMessages,
@@ -232,6 +234,9 @@ export const LiveChatWidget: React.FC<LiveChatWidgetProps> = ({
     return registry
   }, [customRenderers])
 
+  // 标记是否已经初始化过会话，防止重复调用
+  const sessionInitializedRef = React.useRef(false)
+
   /**
    * T043: 打开聊天窗口时初始化会话
    * 使用 API v2.0.0 的统一接口：
@@ -239,7 +244,18 @@ export const LiveChatWidget: React.FC<LiveChatWidgetProps> = ({
    * - 如果有 sessionId，恢复会话并加载历史消息
    */
   useEffect(() => {
-    if (!isOpen || !userId) return
+    // 窗口关闭时重置初始化标记
+    if (!isOpen) {
+      sessionInitializedRef.current = false
+      return
+    }
+
+    // userId 为 undefined 表示尚未初始化，等待初始化完成
+    if (userId === undefined) return
+
+    // 如果已经初始化过，不再重复调用
+    if (sessionInitializedRef.current) return
+    sessionInitializedRef.current = true
 
     const currentSessionId = sessionId
 
@@ -372,7 +388,8 @@ export const LiveChatWidget: React.FC<LiveChatWidgetProps> = ({
    * 创建新会话
    */
   const handleCreateNewSession = useCallback(async () => {
-    if (!userId) return
+    // userId 为 undefined 表示尚未初始化，等待初始化完成
+    if (userId === undefined) return
 
     // 如果用户没有配置欢迎语，显示 loading 状态
     if (!welcomeMessage) {
@@ -381,16 +398,23 @@ export const LiveChatWidget: React.FC<LiveChatWidgetProps> = ({
 
     try {
       const response = await createSession({
-        user_id: userId,
+        user_id: userId ?? '',
         site: site,
         channel_code: channelCode,
         real_user_id: loginUserId,
+        page_url: typeof window !== 'undefined' ? window.location.href : undefined,
       })
 
       if (response.success) {
         // 保存新会话 ID
         saveSession(response.sessionId)
 
+        // 保存后端返回的 userId（如果有）
+        if (response.userId) {
+          saveUserId(response.userId)
+          setUserId(response.userId)
+        }
+
         // 清空消息列表
         clearMessages()
 
@@ -488,16 +512,23 @@ export const LiveChatWidget: React.FC<LiveChatWidgetProps> = ({
 
       try {
         const response = await createSession({
-          user_id: userId,
+          user_id: userId ?? '',
           session_id: existingSessionId,
           site: site,
           channel_code: channelCode,
           real_user_id: loginUserId,
+          page_url: typeof window !== 'undefined' ? window.location.href : undefined,
         })
 
         if (response.success && response.resumed) {
           // 会话恢复成功
 
+          // 保存后端返回的 userId（如果有）
+          if (response.userId) {
+            saveUserId(response.userId)
+            setUserId(response.userId)
+          }
+
           // 准备欢迎消息（无论是否有历史消息都需要）
           const messageText = response.welcomeMessage || welcomeMessage
           const welcomeContent: MessageContent[] = messageText ? [{ type: 'text', text: messageText }] : []
@@ -683,10 +714,11 @@ export const LiveChatWidget: React.FC<LiveChatWidgetProps> = ({
         if (!currentSessionId) {
           // 没有会话，创建新会话
           const response = await createSession({
-            user_id: userId,
+            user_id: userId ?? '',
             site: site,
             channel_code: channelCode,
             real_user_id: loginUserId,
+            page_url: typeof window !== 'undefined' ? window.location.href : undefined,
           })
           if (response.success) {
             currentSessionId = response.sessionId
@@ -699,7 +731,7 @@ export const LiveChatWidget: React.FC<LiveChatWidgetProps> = ({
         // 构建请求参数（session_id 现在是必填的）
         const requestPayload: ChatStreamRequest = {
           message: sanitized,
-          user_id: userId,
+          user_id: userId ?? '',
           session_id: currentSessionId,
           context: {
             cartId: cartId,
@@ -730,10 +762,11 @@ export const LiveChatWidget: React.FC<LiveChatWidgetProps> = ({
 
           // 创建新会话
           const response = await createSession({
-            user_id: userId,
+            user_id: userId ?? '',
             site: site,
             channel_code: channelCode,
             real_user_id: loginUserId,
+            page_url: typeof window !== 'undefined' ? window.location.href : undefined,
           })
 
           if (response.success) {

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

@@ -6,7 +6,7 @@
 
 import { useState, useCallback, useRef, useEffect } from 'react'
 import type { Message, MessageContent, SSEEvent, StatusData, ErrorData, MessageStartData, BackendCartData, Product, TextContent, ProductCardContent, ProductListContent } from '../types'
-import { getUserId } from '../utils/userId'
+import { getUserId, saveUserId } from '../utils/userId'
 import { useSession } from './useSession'
 import { transformProducts } from '../utils/productTransformers'
 import { transformCartData } from '../utils/cartTransformers'
@@ -391,9 +391,9 @@ export interface UseChatStateReturn {
   isOpen: boolean
 
   /**
-   * 用户 ID
+   * 用户 ID（undefined 表示尚未初始化，空字符串表示由后端生成）
    */
-  userId: string
+  userId: string | undefined
 
   /**
    * 会话 ID
@@ -430,6 +430,11 @@ export interface UseChatStateReturn {
    */
   setInputValue: (value: string) => void
 
+  /**
+   * 设置用户 ID（用于保存后端返回的 userId）
+   */
+  setUserId: (id: string) => void
+
   /**
    * 添加消息到列表
    */
@@ -495,8 +500,8 @@ export function useChatState(options: UseChatStateOptions = {}): UseChatStateRet
   // 会话管理
   const { sessionId, saveSession, clearSession } = useSession()
 
-  // 用户 ID (初始化时异步生成)
-  const [userId, setUserId] = useState<string>('')
+  // 用户 ID (初始化时异步生成，undefined 表示尚未初始化)
+  const [userId, setUserId] = useState<string | undefined>(undefined)
 
   // 初始化 userId
   useEffect(() => {
@@ -646,11 +651,16 @@ export function useChatState(options: UseChatStateOptions = {}): UseChatStateRet
           // 重置卡片缓存队列
           pendingCardsRef.current = []
 
-          // T039: 保存 sessionId（如果后端返回）
-          const messageStartData = data as MessageStartData
+          // T039: 保存 sessionId 和 userId（如果后端返回）
+          const messageStartData = data as MessageStartData & { userId?: string }
           if (messageStartData.sessionId && messageStartData.sessionId !== sessionId) {
             saveSession(messageStartData.sessionId)
           }
+          // 保存后端返回的 userId（如果有）
+          if (messageStartData.userId) {
+            saveUserId(messageStartData.userId)
+            setUserId(messageStartData.userId)
+          }
 
           // 检查最后一条消息是否是 thinking 消息（用户发送消息时已添加）
           setMessagesState(prev => {
@@ -1081,6 +1091,7 @@ export function useChatState(options: UseChatStateOptions = {}): UseChatStateRet
     closeChat,
     toggleChat,
     setInputValue,
+    setUserId,
     addMessage,
     setMessages,
     clearMessages,

package/src/components/LiveChatWidget/index.tsx

@@ -44,7 +44,7 @@ export { useSession } from './hooks/useSession'
 
 // 导出工具类
 export { MessageRendererRegistry } from './utils/messageRenderers'
-export { getUserId } from './utils/userId'
+export { getUserId, saveUserId, clearUserId } from './utils/userId'
 export { sanitizeInput, isValidUrl, isValidUUID, isValidMessageContent, escapeHtml } from './utils/validation'
 
 // 导出消息渲染器（供自定义使用）

package/src/components/LiveChatWidget/types.ts

@@ -637,11 +637,13 @@ export interface NewSessionRequest {
   site?: string
   channel_code?: string
   real_user_id?: string
+  page_url?: string
 }
 
 export interface NewSessionResponse {
   success: boolean
   sessionId: string
+  userId?: string // 后端生成的 userId（当请求的 user_id 为空时返回）
   message: string
   resumed?: boolean
   messages?: Message[]

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

@@ -5,14 +5,14 @@
  * 策略：
  * 1. 优先从 localStorage 读取
  * 2. 尝试获取 Google Analytics ID (GAID)
- * 3. 兜底：时间戳 + 随机数哈希
+ * 3. 返回空字符串，由后端生成
  */
 
 const STORAGE_KEY = 'livechat_user_id'
 
 /**
  * 获取用户唯一标识符（异步版本）
- * @returns userId (GAID 或哈希值)
+ * @returns userId (GAID 或空字符串，空字符串由后端生成)
  */
 export async function getUserId(): Promise<string> {
   // 1. 尝试从 localStorage 读取
@@ -30,21 +30,17 @@ export async function getUserId(): Promise<string> {
     return gaid
   }
 
-  // 3. 兜底：使用 SHA-256 生成哈希
-  try {
-    const fallback = await generateHashedUserId()
-    if (typeof window !== 'undefined') {
-      localStorage.setItem(STORAGE_KEY, fallback)
-    }
-    return fallback
-  } catch (error) {
-    // 如果 SHA-256 失败，使用同步兜底方案
-    console.warn('[LiveChat userId] SHA-256 failed, using sync fallback:', error)
-    const fallback = generateHashedUserIdSync()
-    if (typeof window !== 'undefined') {
-      localStorage.setItem(STORAGE_KEY, fallback)
-    }
-    return fallback
+  // 3. 返回空字符串，由后端生成
+  return ''
+}
+
+/**
+ * 保存后端返回的 userId 到 localStorage
+ * @param id 后端生成的 userId
+ */
+export function saveUserId(id: string): void {
+  if (id && typeof window !== 'undefined') {
+    localStorage.setItem(STORAGE_KEY, id)
   }
 }
 
@@ -85,51 +81,6 @@ function getGAID(): string | null {
   }
 }
 
-/**
- * 生成哈希用户 ID（兜底方案）
- * @returns 格式为 user-{hash} 的用户 ID，hash 由 timestamp + random 通过 SHA-256 生成
- */
-async function generateHashedUserId(): Promise<string> {
-  const timestamp = Date.now()
-  const random = Math.random().toString(36).substring(2, 15) // 生成随机字符串
-
-  // 将 timestamp 和 random 组合成字符串
-  const rawString = `${timestamp}${random}`
-
-  // 使用 Web Crypto API 生成 SHA-256 哈希
-  const encoder = new TextEncoder()
-  const data = encoder.encode(rawString)
-  const hashBuffer = await crypto.subtle.digest('SHA-256', data)
-
-  // 将 ArrayBuffer 转换为 16 进制字符串
-  const hashArray = Array.from(new Uint8Array(hashBuffer))
-  const hashHex = hashArray.map(b => b.toString(16).padStart(2, '0')).join('')
-
-  // 取前 16 位作为用户 ID（保持简洁）
-  return `user-${hashHex.substring(0, 16)}`
-}
-
-/**
- * 同步版本的哈希用户 ID 生成（兜底的兜底）
- * 当 Web Crypto API 不可用时使用
- */
-function generateHashedUserIdSync(): string {
-  const timestamp = Date.now()
-  const random = Math.random().toString(36).substring(2, 15)
-  const rawString = `${timestamp}${random}`
-
-  // 使用简单的哈希算法作为兜底
-  let hash = 0
-  for (let i = 0; i < rawString.length; i++) {
-    const char = rawString.charCodeAt(i)
-    hash = (hash << 5) - hash + char
-    hash = hash & hash
-  }
-
-  const hashString = Math.abs(hash).toString(16).padStart(8, '0')
-  return `user-${hashString}`
-}
-
 /**
  * 清除保存的 userId（用于测试或重置）
  */

package/src/stories/LiveChatWidget.stories.tsx

@@ -148,7 +148,7 @@ export const Default: Story = {
   args: {
     // 基础配置
     loginUserId: 'test_test1',
-    apiBaseUrl: 'http://172.16.38.183:3003',
+    apiBaseUrl: 'https://beta-api-v2-livechat.anker.com',
     site: 'beta.eufy.com',
     channelCode: 'dtc',
     title: 'eufy AI Assistant',