@anker-in/campaign-ui 0.2.11-beta.30 → 0.2.11-beta.32

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

@@ -71,7 +71,7 @@ export const createQuickRepliesRenderer = (onReplyClick?: (reply: QuickReply) =>
             key={reply.id}
             type="button"
             onClick={() => handleClick(reply)}
-            className="livechat-quick-reply-button inline-flex font-bold items-center gap-1 rounded-[19px] px-3 py-[6px] text-sm leading-[140%] tracking-[-0.02em] transition-transform hover:scale-105 active:scale-95"
+            className="livechat-quick-reply-button inline-flex font-bold items-center gap-1 rounded-[19px] px-3 py-[6px] text-sm leading-[140%] tracking-[-0.02em] transition-transform"
           >
             {/* 图标（可选） */}
             {reply.icon && <span className="text-base">{reply.icon}</span>}

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

@@ -69,7 +69,7 @@ export const TextBlock: MessageRenderer = {
             // 自定义段落样式
             p: ({ node, ...props }) => <p {...props} className="last:mb-0" />,
             // 自定义列表样式
-            ul: ({ node, ...props }) => <ul {...props} className="mb-2 ml-4 list-disc" />,
+            ul: ({ node, ...props }) => <ul {...props} className="ml-4 list-disc" />,
             ol: ({ node, ...props }) => <ol {...props} className="mb-2 ml-4 list-decimal" />,
             li: ({ node, ...props }) => <li {...props} className="mb-1" />,
             // 自定义标题样式
@@ -77,7 +77,7 @@ export const TextBlock: MessageRenderer = {
             h2: ({ node, ...props }) => <h2 {...props} className="mb-2 text-base font-bold" />,
             h3: ({ node, ...props }) => <h3 {...props} className="mb-1 text-sm font-bold" />,
             // 自定义强调样式
-            strong: ({ node, ...props }) => <strong {...props} className="font-semibold" />,
+            strong: ({ node, ...props }) => <strong {...props} className="font-bold" />,
             em: ({ node, ...props }) => <em {...props} className="italic" />,
           }}
         >

package/src/components/LiveChatWidget/constants.ts

@@ -9,11 +9,18 @@ import type { CommonText } from './types'
  * 用于将货币代码转换为对应的符号
  */
 export const CURRENCY_SYMBOLS: Record<string, string> = {
-  USD: '$',
-  EUR: '€',
-  GBP: '£',
-  JPY: '¥',
-  CNY: '¥',
+    USD: "$",
+    CAD: "CA$",
+    GBP: "£",
+    EUR: "€",
+    AUD: "$",
+    SGD: "$",
+    NZD: "NZ$",
+    AED: "AED ",
+    VND: "₫",
+    TWD: "NT$",
+    PLN: "zł",
+    RON: "Lei"
 }
 
 /**

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

@@ -21,13 +21,17 @@ import { transformCartData } from '../utils/cartTransformers'
  *
  * @param buffer 当前缓冲区内容（包含新接收的文本）
  * @param productMap shopifyId → Product 的映射表
+ * @param rawProductMap shopifyId → raw backend product 的映射表
  * @param onAddToCart 添加到购物车回调
+ * @param productCardRender 自定义产品卡片渲染函数
  * @returns { contents: 需要添加的内容数组, remainingBuffer: 剩余缓冲区内容 }
  */
 function parseStreamingText(
   buffer: string,
   productMap: Map<string, Product>,
-  onAddToCart?: (product: Product) => void
+  rawProductMap: Map<string, any>,
+  onAddToCart?: (product: Product) => void,
+  productCardRender?: (product: any) => React.ReactNode
 ): { contents: MessageContent[]; remainingBuffer: string } {
   const contents: MessageContent[] = []
   const regex = /\{\{(?:product:)?([^}]+)\}\}/g
@@ -49,12 +53,18 @@ function parseStreamingText(
     // 提取产品 ID 并创建产品卡片
     const productId = match[1].trim()
     const product = productMap.get(productId)
+    const rawProduct = rawProductMap.get(productId)
 
     if (product) {
       console.log('[useChatState] 🎯 实时检测到产品:', productId, '→', product.title)
       contents.push({
         type: 'product_card',
-        data: { product: product, onAddToCart: onAddToCart }
+        data: {
+          product: product,
+          rawProduct: rawProduct,
+          onAddToCart: onAddToCart,
+          productCardRender: productCardRender
+        }
       } as ProductCardContent)
     } else {
       // 产品未找到，保留原始文本
@@ -98,6 +108,7 @@ function parseStreamingText(
  * @param text 包含 {{shopifyId}} 标记的文本
  * @param productMap shopifyId → Product 的映射表
  * @param onAddToCart 添加到购物车回调
+ * @param productCardRender 自定义产品卡片渲染函数
  * @returns MessageContent 数组
  *
  * @example
@@ -114,7 +125,9 @@ function parseStreamingText(
 function parseTextWithProductIds(
   text: string,
   productMap: Map<string, Product>,
-  onAddToCart?: (product: Product) => void
+  rawProductMap: Map<string, any>,
+  onAddToCart?: (product: Product) => void,
+  productCardRender?: (product: any) => React.ReactNode
 ): MessageContent[] {
   const result: MessageContent[] = []
   // 修改正则表达式以匹配 {{product:ID}} 格式
@@ -139,13 +152,16 @@ function parseTextWithProductIds(
 
     // 添加产品卡片
     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 {
@@ -187,12 +203,15 @@ function parseTextWithProductIds(
  * @param contents 原始消息内容数组
  * @param productMap shopifyId → Product 的映射表
  * @param onAddToCart 添加到购物车回调
+ * @param productCardRender 自定义产品卡片渲染函数
  * @returns 重组后的消息内容数组
  */
 function reorganizeMessageContent(
   contents: MessageContent[],
   productMap: Map<string, Product>,
-  onAddToCart?: (product: Product) => void
+  rawProductMap: Map<string, any>,
+  onAddToCart?: (product: Product) => void,
+  productCardRender?: (product: any) => React.ReactNode
 ): MessageContent[] {
   const result: MessageContent[] = []
 
@@ -200,7 +219,7 @@ function reorganizeMessageContent(
     // 只处理文本类型
     if (content.type === 'text') {
       const textContent = content as TextContent
-      const segments = parseTextWithProductIds(textContent.text, productMap, onAddToCart)
+      const segments = parseTextWithProductIds(textContent.text, productMap, rawProductMap, onAddToCart, productCardRender)
       result.push(...segments)
     }
     // 跳过 product_list（已经被拆分到文本中）
@@ -222,11 +241,13 @@ function reorganizeMessageContent(
  *
  * @param message 原始消息
  * @param onAddToCart 添加到购物车回调
+ * @param productCardRender 自定义产品卡片渲染函数
  * @returns 重组后的消息（如果需要重组），否则返回原消息
  */
 function maybeReorganizeHistoricalMessage(
   message: Message,
-  onAddToCart?: (product: Product) => void
+  onAddToCart?: (product: Product) => void,
+  productCardRender?: (product: any) => React.ReactNode
 ): Message {
   // 检查消息是否包含 product_list
   const hasProductList = message.content.some(c => c.type === 'product_list')
@@ -246,6 +267,37 @@ function maybeReorganizeHistoricalMessage(
 
   // 构建产品映射
   const productMap = new Map<string, Product>()
+  // 从 structured_content 中提取原始后端产品数据
+  const rawProductMap = new Map<string, any>()
+
+  // 优先从 structured_content 获取原始产品数据（如果存在）
+  if (message.structured_content) {
+    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,
+            })
+          }
+        })
+      }
+    })
+  }
+
+  // 构建转换后的产品映射（用于默认渲染）
   message.content.forEach(content => {
     if (content.type === 'product_list') {
       const productListContent = content as ProductListContent
@@ -265,7 +317,7 @@ function maybeReorganizeHistoricalMessage(
   })
 
   // 重组消息内容
-  const reorganizedContent = reorganizeMessageContent(message.content, productMap, onAddToCart)
+  const reorganizedContent = reorganizeMessageContent(message.content, productMap, rawProductMap, onAddToCart, productCardRender)
 
   // 返回新消息对象
   return {
@@ -346,6 +398,11 @@ export interface UseChatStateOptions {
    * 购物车按钮点击回调
    */
   onCart?: (cartId: string, checkoutUrl?: string) => void
+
+  /**
+   * 自定义产品卡片渲染函数
+   */
+  productCardRender?: (product: Product) => React.ReactNode
 }
 
 export interface UseChatStateReturn {
@@ -458,6 +515,7 @@ export function useChatState(options: UseChatStateOptions = {}): UseChatStateRet
     onPromotionList,
     onAddToCart,
     onCart,
+    productCardRender,
   } = options
 
   // 会话管理
@@ -507,9 +565,15 @@ export function useChatState(options: UseChatStateOptions = {}): UseChatStateRet
   // 产品映射缓存 (shopifyId → Product)，用于实时解析占位符
   const productMapRef = useRef<Map<string, Product>>(new Map())
 
+  // 原始产品数据缓存 (shopifyId → raw backend product)，用于 productCardRender
+  const rawProductMapRef = useRef<Map<string, any>>(new Map())
+
   // 文本缓冲区，用于存储未完成的文本（处理占位符跨越多个 delta 的情况）
   const textBufferRef = useRef<string>('')
 
+  // 超时定时器 ref，用于处理 3 分钟无响应的情况
+  const timeoutTimerRef = useRef<NodeJS.Timeout | null>(null)
+
   /**
    * 打开聊天窗口
    */
@@ -572,11 +636,11 @@ export function useChatState(options: UseChatStateOptions = {}): UseChatStateRet
       }
 
       // 对每条历史消息进行重组（如果需要）
-      const reorganizedMessages = validMessages.map(msg => maybeReorganizeHistoricalMessage(msg, onAddToCart))
+      const reorganizedMessages = validMessages.map(msg => maybeReorganizeHistoricalMessage(msg, onAddToCart, productCardRender))
 
       setMessagesState(reorganizedMessages)
     },
-    [onAddToCart]
+    [onAddToCart, productCardRender]
   )
 
   /**
@@ -655,6 +719,12 @@ export function useChatState(options: UseChatStateOptions = {}): UseChatStateRet
             const hasThinking = currentMessageRef.current.content.some(c => c.type === 'thinking')
             if (hasThinking) {
               currentMessageRef.current.content = currentMessageRef.current.content.filter(c => c.type !== 'thinking')
+
+              // 清除超时定时器（已收到内容，不再需要超时提示）
+              if (timeoutTimerRef.current) {
+                clearTimeout(timeoutTimerRef.current)
+                timeoutTimerRef.current = null
+              }
             }
 
             // 将新文本添加到缓冲区
@@ -664,7 +734,9 @@ export function useChatState(options: UseChatStateOptions = {}): UseChatStateRet
             const { contents, remainingBuffer } = parseStreamingText(
               textBufferRef.current,
               productMapRef.current,
-              onAddToCart
+              rawProductMapRef.current,
+              onAddToCart,
+              productCardRender
             )
 
             // 更新缓冲区为剩余内容
@@ -736,6 +808,21 @@ export function useChatState(options: UseChatStateOptions = {}): UseChatStateRet
               // 触发商品列表回调
               onProductList?.()
 
+              // 缓存原始后端产品数据（用于 productCardRender）
+              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)
+                  }
+                }
+              })
+
               // 使用统一的产品转换工具函数
               const transformedProducts = transformProducts(contentData, site)
 
@@ -908,6 +995,7 @@ export function useChatState(options: UseChatStateOptions = {}): UseChatStateRet
           // 清空缓冲区和产品映射
           textBufferRef.current = ''
           productMapRef.current.clear()
+          rawProductMapRef.current.clear()
           currentMessageRef.current = null
           break
         }
@@ -960,6 +1048,39 @@ export function useChatState(options: UseChatStateOptions = {}): UseChatStateRet
         case 'done': {
           // 流结束
           setIsStreaming(false)
+
+          // 检查当前消息是否还存在 thinking block
+          if (currentMessageRef.current) {
+            const hasThinking = currentMessageRef.current.content.some(c => c.type === 'thinking')
+
+            if (hasThinking) {
+              // 如果还存在 thinking block，设置 3 分钟超时
+              const currentMessage = currentMessageRef.current
+
+              timeoutTimerRef.current = setTimeout(() => {
+                setMessagesState(prev => {
+                  return prev.map(msg => {
+                    if (msg.id === currentMessage.id) {
+                      // 移除 thinking block，添加超时提示
+                      const contentWithoutThinking = msg.content.filter(c => c.type !== 'thinking')
+                      return {
+                        ...msg,
+                        content: [
+                          ...contentWithoutThinking,
+                          {
+                            type: 'text',
+                            text: 'Session timed out, please try again.',
+                          } as TextContent,
+                        ],
+                      }
+                    }
+                    return msg
+                  })
+                })
+              }, 3 * 60 * 1000) // 3 分钟
+            }
+          }
+
           currentMessageRef.current = null
           break
         }
@@ -986,6 +1107,16 @@ export function useChatState(options: UseChatStateOptions = {}): UseChatStateRet
     ]
   )
 
+  // 组件卸载时清理超时定时器
+  useEffect(() => {
+    return () => {
+      if (timeoutTimerRef.current) {
+        clearTimeout(timeoutTimerRef.current)
+        timeoutTimerRef.current = null
+      }
+    }
+  }, [])
+
   return {
     messages,
     isOpen,

package/src/components/LiveChatWidget/types.ts

@@ -43,6 +43,10 @@ export interface Message {
   content: MessageContent[]
   timestamp: number
   metadata?: MessageMetadata
+  structured_content?: Array<{
+    type: string
+    data: any
+  }>
 }
 
 // ============================================================================
@@ -83,7 +87,9 @@ export interface ProductCardContent {
   type: 'product_card'
   data: {
     product: Product
+    rawProduct?: any // Raw backend product data (for custom render)
     onAddToCart?: (product: Product) => void
+    productCardRender?: (product: any) => React.ReactNode
   }
 }
 
@@ -596,6 +602,7 @@ export interface StatusData {
 export interface ErrorData {
   message: string
   code?: string
+  type?: string
 }
 
 // ============================================================================
@@ -899,6 +906,26 @@ export interface LiveChatWidgetProps {
    * 用于自定义按钮文案
    */
   commonText?: CommonText
+
+  /**
+   * 自定义产品卡片渲染函数
+   * 用于自定义渲染 product_card 类型的产品卡片
+   * 当提供此函数时，将替代默认的产品卡片渲染逻辑
+   * @param product 原始后端产品数据（未经转换的数据）
+   * @returns React 可渲染的内容
+   * @example
+   * ```tsx
+   * <LiveChatWidget
+   *   productCardRender={(product) => (
+   *     <div>
+   *       <h3>{product.title}</h3>
+   *       <p>{product.price_range?.min}</p>
+   *     </div>
+   *   )}
+   * />
+   * ```
+   */
+  productCardRender?: (product: any) => React.ReactNode
 }
 
 export interface MessageRenderer {

package/src/stories/LiveChatWidget.stories.tsx

@@ -570,3 +570,185 @@ export const WithRecaptcha: Story = {
     },
   },
 }
+
+/**
+ * 自定义产品卡片渲染
+ *
+ * 演示如何使用 productCardRender 自定义产品卡片的渲染样式。
+ *
+ * 当后端返回产品占位符 {{product:xxx}} 时，会使用自定义渲染函数来展示产品卡片。
+ */
+export const CustomProductCardRender: Story = {
+  args: {
+    loginUserId: 'test_test',
+    apiBaseUrl: 'http://172.16.38.183:3003',
+    cartId: 'gid://shopify/Cart/hWN7wB3Pa12gh78d8hPOAUBI?key=0e73db1d3fb5ac21da19099c45033253',
+    accessToken: '47b1aa2c0797043f9baba39388029d70',
+    title: 'eufy',
+    site: 'beta.eufy.com',
+    channelCode: 'dtc',
+    welcomeMessage: '你好！我可以为你推荐产品，试试发送 "推荐产品" 来查看自定义产品卡片效果。',
+
+    // 自定义产品卡片渲染函数
+    // 注意：product 参数是原始后端数据（未经转换）
+    productCardRender: (product) => {
+      // 原始后端数据使用 snake_case 字段名
+      const imageUrl = product.featured_image || ''
+      const title = product.title || ''
+      const description = product.description || ''
+      const price = product.price_range?.min || product.variants?.[0]?.price || 0
+      const currency = product.price_range?.currency || product.variants?.[0]?.currency || 'USD'
+      const averageRating = product.average_rating
+
+      return (
+        <div
+          style={{
+            border: '2px solid #4CAF50',
+            borderRadius: '16px',
+            padding: '20px',
+            margin: '12px 0',
+            backgroundColor: '#f0f9ff',
+            boxShadow: '0 4px 12px rgba(76, 175, 80, 0.15)',
+            transition: 'transform 0.2s',
+          }}
+          onMouseEnter={(e) => {
+            e.currentTarget.style.transform = 'scale(1.02)'
+          }}
+          onMouseLeave={(e) => {
+            e.currentTarget.style.transform = 'scale(1)'
+          }}
+        >
+          <div style={{ display: 'flex', gap: '16px', alignItems: 'center' }}>
+            <div
+              style={{
+                width: '70px',
+                height: 'auto',
+                flexShrink: 0,
+                borderRadius: '12px',
+                overflow: 'hidden',
+                border: '2px solid #e0e0e0',
+              }}
+            >
+              <img
+                src={imageUrl}
+                alt={title}
+                style={{
+                  width: '100%',
+                  height: '100%',
+                  objectFit: 'cover',
+                }}
+              />
+            </div>
+
+            <div style={{ flex: 1 }}>
+              <h3
+                style={{
+                  margin: '0 0 8px 0',
+                  fontSize: '18px',
+                  fontWeight: 'bold',
+                  color: '#1a1a1a',
+                  lineHeight: '1.4',
+                }}
+              >
+                {title}
+              </h3>
+
+              {description && (
+                <p
+                  style={{
+                    margin: '0 0 12px 0',
+                    fontSize: '14px',
+                    color: '#666',
+                    lineHeight: '1.5',
+                    display: '-webkit-box',
+                    WebkitLineClamp: 2,
+                    WebkitBoxOrient: 'vertical',
+                    overflow: 'hidden',
+                  }}
+                >
+                  {description}
+                </p>
+              )}
+
+              <div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
+                <div
+                  style={{
+                    fontSize: '24px',
+                    fontWeight: 'bold',
+                    color: '#4CAF50',
+                  }}
+                >
+                  'test price'
+                </div>
+
+                {averageRating !== undefined && (
+                  <div
+                    style={{
+                      display: 'flex',
+                      alignItems: 'center',
+                      gap: '4px',
+                      fontSize: '14px',
+                      color: '#666',
+                    }}
+                  >
+                    <span style={{ color: '#FFB800' }}>⭐</span>
+                    <span>{averageRating.toFixed(1)}</span>
+                  </div>
+                )}
+
+                <button
+      
+                  style={{
+                    marginLeft: 'auto',
+                    padding: '8px 20px',
+                    backgroundColor: '#4CAF50',
+                    color: 'white',
+                    borderRadius: '8px',
+                    textDecoration: 'none',
+                    fontSize: '14px',
+                    fontWeight: 'bold',
+                    transition: 'background-color 0.2s',
+                  }}
+                   onClick={() => {
+                    console.log('View Details', product)
+                  }}
+                >
+                  View Details
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      )
+    },
+
+    onAddToCart: (product) => {
+      console.log('Add to cart:', product)
+      alert(`Added ${product.title} to cart!`)
+    },
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: `
+### 自定义产品卡片渲染
+
+使用 \`productCardRender\` 属性可以完全自定义产品卡片的展示样式。
+
+**功能说明：**
+
+- 当后端返回带有产品占位符 \`{{product:xxx}}\` 的文本流时，会使用自定义渲染函数
+- 自定义函数接收完整的产品对象作为参数
+- 返回 React 节点，可以是任何合法的 JSX
+- 如果不提供 \`productCardRender\`，则使用默认的产品卡片样式
+
+**测试步骤：**
+
+1. 打开聊天窗口
+2. 发送 "推荐产品" 或任何会触发产品推荐的消息
+3. 观察返回的产品卡片使用的是自定义样式（绿色边框、悬停放大效果）
+        `,
+      },
+    },
+  },
+}

package/src/styles/livechat.css

@@ -236,7 +236,6 @@
 .livechat-markdown ul,
 .livechat-markdown ol {
   margin-left: 1.5rem;
-  margin-bottom: 0.5rem;
 }
 
 .livechat-markdown li {
@@ -261,7 +260,7 @@
 }
 
 .livechat-markdown strong {
-  font-weight: 600;
+  font-weight: 700;
 }
 
 .livechat-markdown em {