@anker-in/campaign-ui 0.3.2 → 0.3.4

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

@@ -0,0 +1,293 @@
+/**
+ * 商品列表渲染器
+ * 显示多个商品的纵向列表，支持展开/收起
+ * 基于 specs/livechat-widget/data-model.md 的商品数据模型
+ */
+
+import React, { useState } from 'react'
+import type { MessageRenderer, ProductListContent, Product, CommonText } from '../../types'
+import { CURRENCY_SYMBOLS, 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)}`
+}
+
+/**
+ * 格式化折扣标签文本
+ * @param discount 折扣对象
+ * @param currency 货币代码
+ * @param offText "OFF" 文案
+ * @returns 格式化后的折扣文本（如 "$10 OFF" 或 "20% OFF"）
+ */
+function formatDiscountLabel(
+  discount: { discount_type?: string; discount_value?: string | number },
+  currency: string,
+  offText: string = DEFAULT_COMMON_TEXT.off
+): string {
+  if (!discount.discount_type || discount.discount_value === undefined) {
+    return ''
+  }
+
+  // 将 discount_value 转换为数字
+  const value =
+    typeof discount.discount_value === 'string' ? parseFloat(discount.discount_value) : discount.discount_value
+
+  if (isNaN(value)) {
+    return ''
+  }
+
+  if (discount.discount_type === 'percentage') {
+    return `${Math.round(value)}% ${offText}`
+  }
+
+  if (discount.discount_type === 'fixed_amount') {
+    const symbol = CURRENCY_SYMBOLS[currency] || currency
+    return `${symbol}${Math.round(value)} ${offText}`
+  }
+
+  return ''
+}
+
+/**
+ * 紧凑型商品卡片（用于纵向列表）
+ */
+const CompactProductCard: React.FC<{
+  product: Product
+  onAddToCart?: (product: Product) => void
+  addToCartText?: string
+  offText?: string
+}> = ({ product, onAddToCart, addToCartText = DEFAULT_COMMON_TEXT.addToCart, offText = DEFAULT_COMMON_TEXT.off }) => {
+  const { title, description, price, imageUrl, stockStatus, averageRating, variants } = product
+
+  const isOutOfStock = stockStatus === 'out_of_stock'
+
+  // 获取第一个变体的折扣信息
+  const firstVariant = variants?.[0]
+  const hasDiscount = firstVariant?.discount?.has_discount
+  const discountPrice = hasDiscount ? firstVariant?.discount?.discount_price : null
+  const discount = firstVariant?.discount
+
+  // 当前显示价格：有折扣时显示折扣价，否则显示原价
+  const currentPrice = discountPrice ? { amount: discountPrice, currency: price.currency } : price
+
+  // 格式化折扣标签
+  const discountLabel = discount && hasDiscount ? formatDiscountLabel(discount, price.currency, offText) : ''
+
+  const handleAddToCart = (e: React.MouseEvent) => {
+    e.preventDefault()
+    e.stopPropagation()
+    if (onAddToCart) {
+      onAddToCart(product)
+    }
+  }
+
+  return (
+    <div className="block w-full overflow-hidden rounded-2xl bg-[#F5F6F7] transition-shadow">
+      <div className="block">
+        <div className="flex gap-2 p-4">
+          {/* 商品图片 */}
+          <div className=" flex shrink-0 items-center overflow-hidden rounded-md " style={{ width: '40%' }}>
+            <img
+              src={imageUrl}
+              alt={title}
+              className={`h-auto w-full object-cover ${isOutOfStock ? 'opacity-50' : ''}`}
+              loading="lazy"
+            />
+          </div>
+
+          {/* 商品信息 */}
+          <div className="flex flex-1 flex-col justify-center">
+            {/* 折扣标签 */}
+            {discountLabel && (
+              <div
+                className="mb-1 w-fit rounded-full px-2 text-sm font-bold leading-none tracking-[-0.04em] text-white"
+                style={{ backgroundColor: '#005D8E', paddingTop: '6px', paddingBottom: '4px' }}
+              >
+                {discountLabel}
+              </div>
+            )}
+
+            {/* 标题 */}
+            <h4 className="line-clamp-2 text-base font-bold leading-[1.4] tracking-[-0.02em] text-[#080A0F]">
+              {title}
+            </h4>
+
+            {/* 描述（可选） */}
+            {description && (
+              <p className="line-clamp-2 text-sm font-bold leading-[1.4] tracking-[-0.02em] text-[#1D1D1F]">
+                {description}
+              </p>
+            )}
+
+            {/* 价格和评分 */}
+            <div className="mt-4 flex items-center gap-2">
+              <div className="flex items-center gap-1">
+                {/* 当前价格（有折扣时显示折扣价，否则显示原价） */}
+                <span className="text-base font-bold leading-[1.4] tracking-[-0.02em] text-[#1D1D1F]">
+                  {formatPrice(currentPrice)}
+                </span>
+                {/* 原价（划线价）- 仅在有折扣时显示 */}
+                {hasDiscount && (
+                  <span className="text-base font-bold leading-[1.4] tracking-[-0.02em] text-[#6D6D6F] line-through">
+                    {formatPrice(price)}
+                  </span>
+                )}
+              </div>
+              {/* 评分（可选） */}
+              {averageRating !== undefined && (
+                <div className="flex items-center gap-0.5 text-xs text-gray-600">
+                  <span className="text-yellow-500">⭐</span>
+                  <span>{averageRating.toFixed(1)}</span>
+                </div>
+              )}
+            </div>
+
+            {/* Add to Cart 按钮 - 在价格下方 */}
+            <button
+              type="button"
+              onClick={handleAddToCart}
+              className="mt-2 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' }}
+            >
+              {addToCartText}
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+/**
+ * 商品列表内部组件（支持展开/收起）
+ */
+const ProductListComponent: React.FC<{
+  products: Product[]
+  title?: string
+  onAddToCart?: (product: Product) => void
+  commonText?: CommonText
+}> = ({ products, title, onAddToCart, commonText }) => {
+  const [isExpanded, setIsExpanded] = useState(false)
+
+  // 合并默认文案和自定义文案
+  const mergedText = { ...DEFAULT_COMMON_TEXT, ...commonText }
+
+  // 过滤掉 null 或无效的产品
+  const validProducts = products.filter(p => p && p.shopifyId)
+
+  // 默认显示前3个产品
+  const INITIAL_DISPLAY_COUNT = 3
+  const hasMore = validProducts.length > INITIAL_DISPLAY_COUNT
+  const displayedProducts = isExpanded ? validProducts : validProducts.slice(0, INITIAL_DISPLAY_COUNT)
+
+  return (
+    <div className="flex w-full flex-col gap-2">
+      {/* 列表标题（可选） */}
+      {title && <h3 className="text-sm font-semibold text-gray-900">{title}</h3>}
+
+      {/* 纵向排列的商品列表 */}
+      <div className="flex flex-col gap-1.5">
+        {displayedProducts.map(product => {
+          if (!product || !product.shopifyId) return null
+          return (
+            <CompactProductCard
+              key={product.shopifyId}
+              product={product}
+              onAddToCart={onAddToCart}
+              addToCartText={mergedText.addToCart}
+              offText={mergedText.off}
+            />
+          )
+        })}
+      </div>
+
+      {/* Learn More 按钮 */}
+      {hasMore && (
+        <button
+          type="button"
+          onClick={() => setIsExpanded(!isExpanded)}
+          className="flex items-center justify-center gap-1.5  px-3 py-2 text-[14px] font-bold leading-[1.2] tracking-tighter text-[#080A0F]"
+        >
+          <span>{isExpanded ? mergedText.showLess : mergedText.learnMore}</span>
+          <svg
+            width="14"
+            height="14"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth="2"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            className={`transition-transform ${isExpanded ? 'rotate-180' : ''}`}
+          >
+            <polyline points="6 9 12 15 18 9" />
+          </svg>
+        </button>
+      )}
+    </div>
+  )
+}
+
+/**
+ * 商品列表渲染器
+ *
+ * 功能：
+ * - 纵向展示多个商品
+ * - 默认显示前3个产品
+ * - 支持展开/收起查看全部
+ * - 紧凑型卡片设计
+ * - 可选标题
+ *
+ * 布局：
+ * ```
+ * 标题（可选）
+ * ┌─────────────────┐
+ * │ [图] 商品标题   │
+ * │      $29.99     │
+ * └─────────────────┘
+ * ┌─────────────────┐
+ * │ [图] 商品标题   │
+ * │      $39.99     │
+ * └─────────────────┘
+ * ┌─────────────────┐
+ * │ [图] 商品标题   │
+ * │      $49.99     │
+ * └─────────────────┘
+ * [ Learn More ↓ ]
+ * ```
+ *
+ * @example
+ * ```tsx
+ * const content: ProductListContent = {
+ *   type: 'product_list',
+ *   data: {
+ *     title: '相关商品推荐',
+ *     products: [product1, product2, product3, product4, product5]
+ *   }
+ * }
+ * <ProductList.render(content, false, false) />
+ * ```
+ */
+export const ProductList: MessageRenderer = {
+  render: content => {
+    const productListContent = content as ProductListContent
+    const { products, title, onAddToCart, commonText } = productListContent.data
+
+    // 过滤掉 null 或无效的产品
+    const validProducts = products?.filter(p => p && p.shopifyId) || []
+
+    if (validProducts.length === 0) {
+      return null
+    }
+
+    return (
+      <ProductListComponent products={validProducts} title={title} onAddToCart={onAddToCart} commonText={commonText} />
+    )
+  },
+}

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

@@ -0,0 +1,170 @@
+/**
+ * 促销活动列表组件
+ * 显示当前进行中的促销活动信息
+ * 基于后端数据结构规范：promotion_list
+ */
+
+import React from 'react'
+import type { MessageRenderer, CommonText } from '../../types'
+import { DEFAULT_COMMON_TEXT } from '../../constants'
+
+/**
+ * 促销活动数据结构
+ */
+export interface PromotionItem {
+  id: string // 活动 ID
+  title: string // 活动标题
+  subtitle?: string // 副标题（如 "Up to 30% off"）
+  description?: string // 活动描述
+  banner_url?: string // Banner 图片 URL
+  url?: string // 活动详情页 URL
+  time_range: {
+    start: string // 开始时间 (ISO 8601)
+    end?: string | null // 结束时间，null 表示无结束日期
+    is_active: boolean // 是否当前活跃
+  }
+  priority?: number // 优先级（数字越大越靠前）
+  product_count?: number // 参与商品数量
+  metadata?: {
+    display_order?: number
+    target_audience?: string
+    highlight_color?: string
+    banner_url?:string
+  }
+}
+
+/**
+ * 促销活动列表数据结构
+ */
+export interface PromotionListData {
+  found: boolean // 是否找到活动
+  count: number // 返回的活动数量
+  total?: number // 总活动数量（可选）
+  results: PromotionItem[] // 活动列表
+  commonText?: CommonText // 通用文案配置
+}
+
+export interface PromotionListProps {
+  /**
+   * 促销活动列表数据
+   */
+  data: PromotionListData
+
+  /**
+   * 是否为用户消息
+   */
+  isUser?: boolean
+
+  /**
+   * 是否为系统消息
+   */
+  isSystem?: boolean
+}
+
+/**
+ * 格式化日期显示
+ */
+const formatDate = (dateStr: string): string => {
+  const date = new Date(dateStr)
+  return date.toLocaleDateString('en-US', {
+    year: 'numeric',
+    month: 'short',
+    day: 'numeric',
+  })
+}
+
+/**
+ * 促销活动列表组件
+ *
+ * 功能：
+ * - 显示当前进行中的促销活动
+ * - 支持活动 Banner 图片展示
+ * - 显示活动时间范围
+ * - 显示参与商品数量
+ * - 支持跳转到活动详情页
+ *
+ * @example
+ * ```tsx
+ * <PromotionList
+ *   data={{
+ *     found: true,
+ *     count: 2,
+ *     results: [...]
+ *   }}
+ * />
+ * ```
+ */
+export const PromotionList: React.FC<PromotionListProps> = ({ data, isUser = false, isSystem = false }) => {
+  const { found, results, commonText } = data
+
+  // 合并默认文案和自定义文案
+  const mergedText = { ...DEFAULT_COMMON_TEXT, ...commonText }
+
+  return (
+    <div className="space-y-3">
+      {results.map(promotion => {
+        const bannerUrl = promotion.banner_url ||promotion?.metadata?.banner_url
+
+        // 没有图片则不展示
+        if (!bannerUrl) {
+          return null
+        }
+
+        return (
+          <div key={promotion.id} className="relative overflow-hidden rounded-2xl bg-[#F5F6F7]">
+            {/* Banner 图片 */}
+            <div className="aspect-[16/9] w-full overflow-hidden bg-gray-100">
+              <img
+                src={bannerUrl}
+                alt={promotion.title}
+                className="size-full object-cover object-center"
+                loading="lazy"
+              />
+            </div>
+
+            {/* 活动信息 - 叠加在图片上 */}
+            <div
+              className="absolute inset-0 flex flex-col justify-end p-4 text-[#080A0F]"
+              style={{ color: promotion?.metadata?.highlight_color }}
+            >
+              <div className="mb-2">
+                <h3 className="text-xl font-bold leading-[1.2] tracking-[-0.04em]">{promotion.title}</h3>
+                {promotion.subtitle && (
+                  <p className="text-sm font-bold leading-[1.4] tracking-[-0.02em]">{promotion.subtitle}</p>
+                )}
+              </div>
+
+              {/* 查看详情按钮 */}
+              {promotion.url && (
+                <a
+                  href={promotion.url + '?ref=LiveChat'}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="inline-flex items-center gap-1 text-sm font-bold tracking-[-0.04em]"
+                >
+                  {mergedText.learnMore}
+                  <svg className="size-[18px]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
+                  </svg>
+                </a>
+              )}
+            </div>
+          </div>
+        )
+      })}
+    </div>
+  )
+}
+
+/**
+ * 创建促销活动列表渲染器
+ */
+export const PromotionListRenderer: MessageRenderer = {
+  render: (content, isUser, isSystem) => {
+    if (content.type !== 'promotion_list' || !content.data) {
+      return null
+    }
+
+    return <PromotionList data={content.data as PromotionListData} isUser={isUser} isSystem={isSystem} />
+  },
+}

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

@@ -0,0 +1,91 @@
+/**
+ * 快捷回复按钮渲染器
+ * 显示可点击的快捷回复选项
+ * 基于 specs/livechat-widget/data-model.md 的快捷回复数据模型
+ */
+
+import React from 'react'
+import type { MessageRenderer, QuickRepliesContent, QuickReply } from '../../types'
+
+export interface QuickRepliesProps {
+  /**
+   * 快捷回复点击回调
+   */
+  onReplyClick?: (reply: QuickReply) => void
+}
+
+/**
+ * 快捷回复按钮渲染器
+ *
+ * 功能：
+ * - 显示多个快捷回复按钮
+ * - 支持图标（可选）
+ * - 点击后发送对应的消息
+ *
+ * 使用场景：
+ * - 欢迎消息后的常见问题
+ * - 引导用户选择
+ * - 快速操作按钮
+ *
+ * 布局：
+ * ```
+ * ┌──────────┐ ┌──────────┐
+ * │ 🛒 查价格 │ │ 📦 查物流 │
+ * └──────────┘ └──────────┘
+ * ┌──────────┐ ┌──────────┐
+ * │ 📞 联系客服│ │ 💬 其他问题│
+ * └──────────┘ └──────────┘
+ * ```
+ *
+ * @example
+ * ```tsx
+ * const content: QuickRepliesContent = {
+ *   type: 'quick_replies',
+ *   data: {
+ *     replies: [
+ *       { id: '1', label: '查价格', value: '我想查询商品价格', icon: '🛒' },
+ *       { id: '2', label: '查物流', value: '我想查询物流信息', icon: '📦' }
+ *     ]
+ *   }
+ * }
+ * <QuickReplies.render(content, false, false) />
+ * ```
+ */
+export const createQuickRepliesRenderer = (onReplyClick?: (reply: QuickReply) => void): MessageRenderer => ({
+  render: (content, isUser, isSystem) => {
+    const quickRepliesContent = content as QuickRepliesContent
+    const { replies } = quickRepliesContent.data
+
+    if (!replies || replies.length === 0) {
+      return null
+    }
+
+    const handleClick = (reply: QuickReply) => {
+      onReplyClick?.(reply)
+    }
+
+    return (
+      <div className="flex flex-wrap gap-2">
+        {replies.map(reply => (
+          <button
+            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"
+          >
+            {/* 图标（可选） */}
+            {reply.icon && <span className="text-base">{reply.icon}</span>}
+
+            {/* 标签 */}
+            <span className='text-left'>{reply.label}</span>
+          </button>
+        ))}
+      </div>
+    )
+  },
+})
+
+/**
+ * 默认快捷回复渲染器（无回调）
+ */
+export const QuickReplies: MessageRenderer = createQuickRepliesRenderer()

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

@@ -0,0 +1,110 @@
+/**
+ * 文本消息内容渲染器
+ * 支持 Markdown 格式
+ * 基于 specs/livechat-widget/plan.md 的文本消息设计
+ */
+
+import React from 'react'
+import ReactMarkdown from 'react-markdown'
+import remarkGfm from 'remark-gfm'
+import type { MessageRenderer, TextContent } from '../../types'
+
+/**
+ * 文本消息渲染器
+ *
+ * 功能：
+ * - 支持 Markdown 语法（粗体、斜体、链接、列表等）
+ * - 安全渲染（React Markdown 自动防护 XSS）
+ * - 响应式文本样式
+ *
+ * Markdown 支持：
+ * - 粗体：**text** 或 __text__
+ * - 斜体：*text* 或 _text_
+ * - 链接：[text](url)
+ * - 列表：- item 或 1. item
+ * - 代码：`code` 或 ```code block```
+ *
+ * @example
+ * ```tsx
+ * const content: TextContent = {
+ *   type: 'text',
+ *   text: '您好！**这是粗体**，*这是斜体*。'
+ * }
+ * <TextBlock.render(content, false, false) />
+ * ```
+ */
+export const TextBlock: MessageRenderer = {
+  render: (content, isUser, isSystem) => {
+    const textContent = content as TextContent
+
+    if (!textContent.text) {
+      return null
+    }
+
+    return (
+      <div className="livechat-markdown text-base md:text-sm">
+        <ReactMarkdown
+          remarkPlugins={[remarkGfm]}
+          components={{
+            // 自定义链接样式
+            a: ({ node, ...props }) => (
+              <a
+                {...props}
+                className={`underline ${isUser ? 'text-blue-200 hover:text-blue-100' : 'text-blue-600 hover:text-blue-700'}`}
+                target="_blank"
+                rel="noopener noreferrer"
+              />
+            ),
+            // 自定义代码块样式
+            code: ({ node, ...props }: any) =>
+              props.inline ? (
+                <code
+                  {...props}
+                  className={`rounded px-1.5 py-0.5 font-mono text-xs ${isUser ? 'bg-[#004A6E] text-white' : 'bg-gray-200 text-gray-800'}`}
+                />
+              ) : (
+                <code
+                  {...props}
+                  className={`block overflow-x-auto rounded px-3 py-2 font-mono text-xs ${isUser ? 'bg-[#004A6E] text-white' : 'bg-gray-200 text-gray-800'}`}
+                />
+              ),
+            // 自定义段落样式
+            p: ({ node, ...props }) => <p {...props} className="last:mb-0" />,
+            // 自定义列表样式
+            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" />,
+            // 自定义标题样式
+            h1: ({ node, ...props }) => <h1 {...props} className="mb-2 font-bold" />,
+            h2: ({ node, ...props }) => <h2 {...props} className="mb-2 font-bold" />,
+            h3: ({ node, ...props }) => <h3 {...props} className="mb-1 font-bold" />,
+            // 自定义强调样式
+            strong: ({ node, ...props }) => <strong {...props} className="font-bold" />,
+            em: ({ node, ...props }) => <em {...props} className="italic" />,
+            // 表格样式
+            table: ({ node, ...props }) => (
+              <div className="my-2 overflow-x-auto">
+                <table {...props} className="min-w-full border-collapse border border-gray-300 text-base md:text-sm" />
+              </div>
+            ),
+            thead: ({ node, ...props }) => (
+              <thead {...props} className="bg-gray-100" />
+            ),
+            tbody: ({ node, ...props }) => <tbody {...props} />,
+            tr: ({ node, ...props }) => (
+              <tr {...props} className="border-b border-gray-300" />
+            ),
+            th: ({ node, ...props }) => (
+              <th {...props} className="border border-gray-300 px-3 py-2 text-left font-semibold" />
+            ),
+            td: ({ node, ...props }) => (
+              <td {...props} className="border border-gray-300 px-3 py-2" />
+            ),
+          }}
+        >
+          {textContent.text}
+        </ReactMarkdown>
+      </div>
+    )
+  },
+}