@anker-in/campaign-ui 0.2.11-beta.40 → 0.2.11-beta.42

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

@@ -143,10 +143,19 @@ export const MessageList: React.FC<MessageListProps> = ({
   // 监听滚动事件，控制按钮显示
   useEffect(() => {
     const container = listRef.current
+    console.log('[MessageList] useEffect - container:', container)
     if (!container) return
 
     const handleScroll = () => {
-      setShowScrollButton(!isNearBottom())
+      const nearBottom = isNearBottom()
+      console.log('[MessageList] handleScroll:', {
+        scrollTop: container.scrollTop,
+        scrollHeight: container.scrollHeight,
+        clientHeight: container.clientHeight,
+        isNearBottom: nearBottom,
+        willShowButton: !nearBottom,
+      })
+      setShowScrollButton(!nearBottom)
     }
 
     // 初始检查
@@ -223,22 +232,7 @@ export const MessageList: React.FC<MessageListProps> = ({
       {/* 回到底部按钮 */}
       <button
         onClick={scrollToBottom}
-        className={`flex -translate-x-1/2 items-center justify-center ${showScrollButton ? '' : 'pointer-events-none'}`}
-        style={{
-          position: 'absolute',
-          bottom: '24px',
-          left: '50%',
-          zIndex: 10,
-          width: '40px',
-          height: '40px',
-          borderRadius: '50%',
-          backgroundColor: 'rgba(255, 255, 255, 0.95)',
-          boxShadow: '0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)',
-          transition: 'all 300ms ease-in-out',
-          opacity: showScrollButton ? 1 : 0,
-          cursor: 'pointer',
-          border: 'none',
-        }}
+        className={`livechat-scroll-to-bottom ${showScrollButton ? 'visible' : 'hidden'}`}
         aria-label="Scroll to bottom"
         aria-hidden={!showScrollButton}
       >

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

@@ -20,8 +20,8 @@ import { transformCartData } from '../utils/cartTransformers'
  * 处理缓冲区中的文本，检测完整的 {{product:xxx}} 占位符
  *
  * @param buffer 当前缓冲区内容（包含新接收的文本）
- * @param productMap shopifyId → Product 的映射表
- * @param rawProductMap shopifyId → raw backend product 的映射表
+ * @param productMap handle → Product 的映射表
+ * @param rawProductMap handle → raw backend product 的映射表
  * @param onAddToCart 添加到购物车回调
  * @param productCardRender 自定义产品卡片渲染函数
  * @returns { contents: 需要添加的内容数组, remainingBuffer: 剩余缓冲区内容 }
@@ -31,7 +31,7 @@ function parseStreamingText(
   productMap: Map<string, Product>,
   rawProductMap: Map<string, any>,
   onAddToCart?: (product: Product) => void,
-  productCardRender?: (product: any) => React.ReactNode
+  productCardRender?: (product: any, productHandle: string) => React.ReactNode
 ): { contents: MessageContent[]; remainingBuffer: string } {
   const contents: MessageContent[] = []
   const regex = /\{\{(?:product:)?([^}]+)\}\}/g
@@ -55,22 +55,24 @@ function parseStreamingText(
     const product = productMap.get(productId)
     const rawProduct = rawProductMap.get(productId)
 
+    // 无论是否找到产品数据，都渲染 product_card，应用层可通过 productHandle 查询产品
     if (product) {
       console.log('[useChatState] 🎯 实时检测到产品:', productId, '→', product.title)
-      contents.push({
-        type: 'product_card',
-        data: {
-          product: product,
-          rawProduct: rawProduct,
-          onAddToCart: onAddToCart,
-          productCardRender: productCardRender
-        }
-      } as ProductCardContent)
     } else {
-      // 产品未找到，隐藏产品占位符（不在前端展示）
-      console.warn('[useChatState] ⚠️ 实时解析未找到产品，已隐藏:', productId)
+      console.log('[useChatState] 📦 实时检测到产品占位符，产品数据待应用层查询:', productId)
     }
 
+    contents.push({
+      type: 'product_card',
+      data: {
+        product: product,
+        rawProduct: rawProduct,
+        productHandle: productId,
+        onAddToCart: onAddToCart,
+        productCardRender: productCardRender
+      }
+    } as ProductCardContent)
+
     lastIndex = regex.lastIndex
   }
 
@@ -102,18 +104,19 @@ function parseStreamingText(
 }
 
 /**
- * 解析文本中的 {{shopifyId}}，返回 [text, product_card, text, ...] 数组（用于历史消息重组）
+ * 解析文本中的 {{handle}}，返回 [text, product_card, text, ...] 数组（用于历史消息重组）
  *
- * @param text 包含 {{shopifyId}} 标记的文本
- * @param productMap shopifyId → Product 的映射表
+ * @param text 包含 {{handle}} 标记的文本
+ * @param productMap handle → Product 的映射表
+ * @param rawProductMap handle → raw backend product 的映射表
  * @param onAddToCart 添加到购物车回调
  * @param productCardRender 自定义产品卡片渲染函数
  * @returns MessageContent 数组
  *
  * @example
  * 输入：
- *   text: "我推荐以下产品：\n{{12345}}\n这款产品性价比很高。"
- *   productMap: Map { '12345' => Product {...} }
+ *   text: "我推荐以下产品：\n{{product-handle}}\n这款产品性价比很高。"
+ *   productMap: Map { 'product-handle' => Product {...} }
  * 输出：
  *   [
  *     { type: 'text', text: '我推荐以下产品：' },
@@ -126,7 +129,7 @@ function parseTextWithProductIds(
   productMap: Map<string, Product>,
   rawProductMap: Map<string, any>,
   onAddToCart?: (product: Product) => void,
-  productCardRender?: (product: any) => React.ReactNode
+  productCardRender?: (product: any, productHandle: string) => React.ReactNode
 ): MessageContent[] {
   const result: MessageContent[] = []
   // 修改正则表达式以匹配 {{product:ID}} 格式
@@ -149,25 +152,26 @@ function parseTextWithProductIds(
       } as TextContent)
     }
 
-    // 添加产品卡片
+    // 添加产品卡片（无论是否找到产品数据，都渲染 product_card）
     const product = productMap.get(productId)
     const rawProduct = rawProductMap.get(productId)
     if (product) {
       console.log(`[useChatState] ✅ 找到产品匹配: ${productId} → ${product.title}`)
-      result.push({
-        type: 'product_card',
-        data: {
-          product: product,
-          rawProduct: rawProduct,
-          onAddToCart: onAddToCart,
-          productCardRender: productCardRender,
-        },
-      } as ProductCardContent)
     } else {
-      // 找不到产品时，隐藏产品占位符（不在前端展示）
-      console.warn(`[useChatState] ❌ Product not found for ID: "${productId}"，已隐藏`)
+      console.log(`[useChatState] 📦 产品占位符，产品数据待应用层查询: ${productId}`)
     }
 
+    result.push({
+      type: 'product_card',
+      data: {
+        product: product,
+        rawProduct: rawProduct,
+        productHandle: productId,
+        onAddToCart: onAddToCart,
+        productCardRender: productCardRender,
+      },
+    } as ProductCardContent)
+
     lastIndex = regex.lastIndex
   }
 
@@ -184,16 +188,17 @@ function parseTextWithProductIds(
 }
 
 /**
- * 重组消息内容：解析文本中的 {{shopifyId}}，替换为产品卡片
+ * 重组消息内容：解析文本中的 {{handle}}，替换为产品卡片
  *
  * 处理逻辑：
  * 1. 遍历消息的所有 content blocks
- * 2. 对于 text 类型，解析其中的 {{shopifyId}} 并拆分为多个 content
+ * 2. 对于 text 类型，解析其中的 {{handle}} 并拆分为多个 content
  * 3. 跳过 product_list 类型（已经被拆分到文本中）
  * 4. 其他类型直接保留
  *
  * @param contents 原始消息内容数组
- * @param productMap shopifyId → Product 的映射表
+ * @param productMap handle → Product 的映射表
+ * @param rawProductMap handle → raw backend product 的映射表
  * @param onAddToCart 添加到购物车回调
  * @param productCardRender 自定义产品卡片渲染函数
  * @returns 重组后的消息内容数组
@@ -203,7 +208,7 @@ function reorganizeMessageContent(
   productMap: Map<string, Product>,
   rawProductMap: Map<string, any>,
   onAddToCart?: (product: Product) => void,
-  productCardRender?: (product: any) => React.ReactNode
+  productCardRender?: (product: any, productHandle: string) => React.ReactNode
 ): MessageContent[] {
   const result: MessageContent[] = []
 
@@ -229,7 +234,7 @@ function reorganizeMessageContent(
 
 /**
  * 处理单条消息的重组（用于历史消息加载）
- * 如果消息包含 product_list 和带有 {{}} 的文本，则进行重组
+ * 如果消息包含带有 {{}} 的文本，则进行重组
  *
  * @param message 原始消息
  * @param onAddToCart 添加到购物车回调
@@ -239,14 +244,8 @@ function reorganizeMessageContent(
 function maybeReorganizeHistoricalMessage(
   message: Message,
   onAddToCart?: (product: Product) => void,
-  productCardRender?: (product: any) => React.ReactNode
+  productCardRender?: (product: any, productHandle: string) => React.ReactNode
 ): Message {
-  // 检查消息是否包含 product_list
-  const hasProductList = message.content.some(c => c.type === 'product_list')
-  if (!hasProductList) {
-    return message // 没有 product_list，不需要重组
-  }
-
   // 检查消息是否包含带有 {{}} 的文本
   const hasPlaceholder = message.content.some(
     c => c.type === 'text' && /\{\{(?:product:)?[^}]+\}\}/.test((c as TextContent).text)
@@ -257,9 +256,9 @@ function maybeReorganizeHistoricalMessage(
 
   console.log('[useChatState] 检测到历史消息需要重组, 消息ID:', message.id)
 
-  // 构建产品映射
+  // 构建产品映射 (handle → Product)
   const productMap = new Map<string, Product>()
-  // 从 structured_content 中提取原始后端产品数据
+  // 从 structured_content 中提取原始后端产品数据 (handle → rawProduct)
   const rawProductMap = new Map<string, any>()
 
   // 优先从 structured_content 获取原始产品数据（如果存在）
@@ -267,22 +266,9 @@ function maybeReorganizeHistoricalMessage(
     message.structured_content.forEach(structuredContent => {
       if (structuredContent.type === 'product_list' && Array.isArray(structuredContent.data)) {
         structuredContent.data.forEach((rawProduct: any) => {
-          if (rawProduct && rawProduct.shopify_product_id) {
-            const shopifyId = rawProduct.shopify_product_id
-            // 1. 使用完整的 shopifyId 作为key
-            rawProductMap.set(shopifyId, rawProduct)
-
-            // 2. 同时提取数字部分作为key
-            const numericId = shopifyId.match(/\d+$/)?.[0]
-            if (numericId) {
-              rawProductMap.set(numericId, rawProduct)
-            }
-
-            console.log('[useChatState] 从 structured_content 提取原始产品数据:', {
-              fullId: shopifyId,
-              numericId,
-              title: rawProduct.title,
-            })
+          if (rawProduct && rawProduct.handle) {
+            rawProductMap.set(rawProduct.handle, rawProduct)
+            console.log('[useChatState] 从 structured_content 提取原始产品数据, handle:', rawProduct.handle)
           }
         })
       }
@@ -294,15 +280,8 @@ function maybeReorganizeHistoricalMessage(
     if (content.type === 'product_list') {
       const productListContent = content as ProductListContent
       productListContent.data.products.forEach(product => {
-        if (product && product.shopifyId) {
-          // 1. 使用完整的 shopifyId 作为key
-          productMap.set(product.shopifyId, product)
-
-          // 2. 同时提取数字部分作为key
-          const numericId = product.shopifyId.match(/\d+$/)?.[0]
-          if (numericId) {
-            productMap.set(numericId, product)
-          }
+        if (product && product.handle) {
+          productMap.set(product.handle, product)
         }
       })
     }
@@ -393,8 +372,10 @@ export interface UseChatStateOptions {
 
   /**
    * 自定义产品卡片渲染函数
+   * @param product 产品数据（如果在 product_list 中找到），否则为 undefined
+   * @param productHandle 文本占位符中的产品 ID，可用于应用层查询产品数据
    */
-  productCardRender?: (product: Product) => React.ReactNode
+  productCardRender?: (product: any, productHandle: string) => React.ReactNode
 }
 
 export interface UseChatStateReturn {
@@ -554,10 +535,10 @@ export function useChatState(options: UseChatStateOptions = {}): UseChatStateRet
   // 标记当前消息是否已触发 onTextMessage 回调（避免重复触发）
   const textMessageCallbackTriggeredRef = useRef<boolean>(false)
 
-  // 产品映射缓存 (shopifyId → Product)，用于实时解析占位符
+  // 产品映射缓存 (handle → Product)，用于实时解析占位符
   const productMapRef = useRef<Map<string, Product>>(new Map())
 
-  // 原始产品数据缓存 (shopifyId → raw backend product)，用于 productCardRender
+  // 原始产品数据缓存 (handle → raw backend product)，用于 productCardRender
   const rawProductMapRef = useRef<Map<string, any>>(new Map())
 
   // 文本缓冲区，用于存储未完成的文本（处理占位符跨越多个 delta 的情况）
@@ -798,40 +779,25 @@ export function useChatState(options: UseChatStateOptions = {}): UseChatStateRet
               onProductList?.()
 
               // 缓存原始后端产品数据（用于 productCardRender）
+              // 使用 handle 作为 key 进行匹配
               contentData.forEach((rawProduct: any) => {
-                if (rawProduct && rawProduct.shopify_product_id) {
-                  const shopifyId = rawProduct.shopify_product_id
-                  // 1. 使用完整的 shopifyId 作为key
-                  rawProductMapRef.current.set(shopifyId, rawProduct)
-
-                  // 2. 同时提取数字部分作为key
-                  const numericId = shopifyId.match(/\d+$/)?.[0]
-                  if (numericId) {
-                    rawProductMapRef.current.set(numericId, rawProduct)
-                  }
+                if (rawProduct && rawProduct.handle) {
+                  rawProductMapRef.current.set(rawProduct.handle, rawProduct)
+                  console.log('[useChatState] 缓存原始产品数据, handle:', rawProduct.handle)
                 }
               })
 
               // 使用统一的产品转换工具函数
               const transformedProducts = transformProducts(contentData, site)
 
-              // 建立产品映射缓存 (shopifyId → Product)
-              // 用于后续在 message_end 时解析文本中的 {{shopifyId}}
+              // 建立产品映射缓存 (handle → Product)
+              // 用于后续在 message_end 时解析文本中的 {{handle}}
               transformedProducts.forEach(product => {
-                if (product && product.shopifyId) {
-                  // 1. 使用完整的 shopifyId 作为key（如 "gid://shopify/Product/123"）
-                  productMapRef.current.set(product.shopifyId, product)
-
-                  // 2. 同时提取数字部分作为key（如 "123"），支持简写格式
-                  // 从 "gid://shopify/Product/123" 或 "123" 中提取纯数字
-                  const numericId = product.shopifyId.match(/\d+$/)?.[0]
-                  if (numericId) {
-                    productMapRef.current.set(numericId, product)
-                  }
+                if (product && product.handle) {
+                  productMapRef.current.set(product.handle, product)
 
                   console.log('[useChatState] 建立产品映射:', {
-                    fullId: product.shopifyId,
-                    numericId,
+                    handle: product.handle,
                     title: product.title,
                   })
                 }

package/src/components/LiveChatWidget/types.ts

@@ -86,10 +86,11 @@ export interface TextContent {
 export interface ProductCardContent {
   type: 'product_card'
   data: {
-    product: Product
+    product?: Product
     rawProduct?: any // Raw backend product data (for custom render)
+    productHandle: string // Product ID from placeholder {{product:ID}}, for app-level product lookup
     onAddToCart?: (product: Product) => void
-    productCardRender?: (product: any) => React.ReactNode
+    productCardRender?: (product: any, productHandle: string) => React.ReactNode
   }
 }
 
@@ -820,7 +821,6 @@ export interface LiveChatWidgetProps {
 
   /**
    * 欢迎消息
-   * @default "你好！我是 AI 助手，有什么可以帮助你的吗？"
    */
   welcomeMessage?: string
 
@@ -952,21 +952,28 @@ export interface LiveChatWidgetProps {
    * 自定义产品卡片渲染函数
    * 用于自定义渲染 product_card 类型的产品卡片
    * 当提供此函数时，将替代默认的产品卡片渲染逻辑
-   * @param product 原始后端产品数据（未经转换的数据）
+   * @param product 原始后端产品数据（未经转换的数据），如果在 product_list 中找不到则为 undefined
+   * @param productHandle 文本占位符中的产品 ID（如 {{product:ID}} 中的 ID），可用于应用层查询产品数据
    * @returns React 可渲染的内容
    * @example
    * ```tsx
    * <LiveChatWidget
-   *   productCardRender={(product) => (
-   *     <div>
-   *       <h3>{product.title}</h3>
-   *       <p>{product.price_range?.min}</p>
-   *     </div>
-   *   )}
+   *   productCardRender={(product, productHandle) => {
+   *     // product 可能为 undefined，此时可用 productHandle 查询产品
+   *     if (!product) {
+   *       return <ProductCardByHandle handle={productHandle} />
+   *     }
+   *     return (
+   *       <div>
+   *         <h3>{product.title}</h3>
+   *         <p>{product.price_range?.min}</p>
+   *       </div>
+   *     )
+   *   }}
    * />
    * ```
    */
-  productCardRender?: (product: any) => React.ReactNode
+  productCardRender?: (product: any, productHandle: string) => React.ReactNode
 
   /**
    * 输入框底部提示文本

package/src/components/index.ts

@@ -11,7 +11,8 @@ export {
 
 export * from './credits/index.js'
 
-export * from './registration/index'
+export * from './registration/index.js'
+
 
 
 // LiveChatWidget 导出