@anker-in/campaign-ui 0.3.2 → 0.3.4

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

@@ -0,0 +1,202 @@
+/**
+ * 购物车卡片渲染器
+ * 显示购物车内容、价格汇总和结账按钮
+ * 基于后端返回的购物车数据结构
+ */
+
+import React from 'react'
+import type { MessageRenderer, CartContent, CartLine, CartAmount } from '../../types'
+import { CURRENCY_SYMBOLS, DEFAULT_COMMON_TEXT } from '../../constants.js'
+
+/**
+ * 格式化金额
+ * @param amount 金额对象
+ * @returns 格式化后的金额字符串（如 "$99.99"）
+ */
+function formatAmount(amount: CartAmount): string {
+  const { amount: value, currencyCode } = amount
+
+  const symbol = CURRENCY_SYMBOLS[currencyCode] || currencyCode
+  const numValue = parseFloat(value)
+
+  return `${symbol}${numValue.toFixed(2)}`
+}
+
+/**
+ * 购物车商品行组件
+ */
+const CartLineItem: React.FC<{
+  line: CartLine
+}> = ({ line }) => {
+  const { quantity, merchandise, cost } = line
+  const { product, title: variantTitle, image } = merchandise
+
+  // 商品图片 URL
+  const imageUrl = image?.url || ''
+
+  // 判断是否有折扣（总价 < 原价）
+  const hasDiscount =
+    parseFloat(cost.totalAmount.amount) < parseFloat(cost.subtotalAmount.amount) &&
+    cost.totalAmount.currencyCode === cost.subtotalAmount.currencyCode
+
+  return (
+    <div className="flex gap-4">
+      {/* 商品图片 */}
+      <div className="shrink-0 overflow-hidden rounded-md" style={{ width: '72px', height: '72px' }}>
+        <img src={imageUrl} alt={product.title} className="size-full object-cover" loading="lazy" />
+      </div>
+
+      {/* 商品信息 */}
+      <div className="flex flex-1 flex-col">
+        <h4 className="line-clamp-2 text-sm tablet:text-[16px] font-bold leading-[1.4] tracking-[-0.02em] text-[#080A0F]">
+          {product.title}
+        </h4>
+        <div className="flex items-end justify-between gap-2">
+          {/* 左侧：标题、变体、数量 */}
+          <div className="flex-1">
+            {variantTitle && (
+              <p className="mt-0.5 text-sm font-bold leading-[1.4] tracking-[-0.02em] text-[#4A4C56]">{variantTitle}</p>
+            )}
+            <p className="mt-1 text-sm font-bold leading-[1.4] tracking-[-0.02em] text-[#080A0F]">×{quantity}</p>
+          </div>
+
+          {/* 右侧：价格 */}
+          <div className="flex gap-1 text-right">
+            <div className="tablet:text-[16px] text-sm font-bold leading-[1.4] tracking-[-0.02em] text-gray-900">
+              {formatAmount(cost.totalAmount)}
+            </div>
+            {hasDiscount && (
+              <div className="tablet:text-[16px] text-sm font-bold leading-[1.4] tracking-[-0.02em] text-[#4A4C56] line-through">
+                {formatAmount(cost.subtotalAmount)}
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+/**
+ * 价格汇总组件（简化版）
+ */
+const CartSummary: React.FC<{
+  total: CartAmount
+  totalText: string
+}> = ({ total, totalText }) => {
+  return (
+    <div className="border-t border-gray-200 p-4">
+      <div className="flex items-center justify-between">
+        <span className="text-base font-bold leading-[1.4] tracking-[-0.02em] text-gray-900">{totalText}</span>
+        <span className="text-base tablet:text-[18px] font-bold leading-[1.4] tracking-[-0.02em] text-gray-900">
+          {formatAmount(total)}
+        </span>
+      </div>
+    </div>
+  )
+}
+
+/**
+ * 购物车卡片渲染器
+ *
+ * 功能：
+ * - 显示购物车商品列表
+ * - 显示价格汇总（小计、折扣、总计）
+ * - 显示折扣码
+ * - 提供 Checkout 按钮
+ * - 空购物车状态
+ *
+ * 布局：
+ * ```
+ * ┌─────────────────────────────────┐
+ * │ 购物车 (3 件商品)               │
+ * ├─────────────────────────────────┤
+ * │ [图] 商品1                      │
+ * │     变体: Black                 │
+ * │     数量: 2      $199.98        │
+ * ├─────────────────────────────────┤
+ * │ [图] 商品2                      │
+ * │     变体: White                 │
+ * │     数量: 1      $99.99         │
+ * ├─────────────────────────────────┤
+ * │ 小计              $299.97       │
+ * │ 折扣 [SPRING20]   -$30.00       │
+ * │ 总计              $269.97       │
+ * ├─────────────────────────────────┤
+ * │        [Checkout 按钮]          │
+ * └─────────────────────────────────┘
+ * ```
+ *
+ * @example
+ * ```tsx
+ * const content: CartContent = {
+ *   type: 'cart',
+ *   data: {
+ *     isEmpty: false,
+ *     cartId: "gid://...",
+ *     totalQuantity: 3,
+ *     lines: [...],
+ *     cost: {...},
+ *     checkoutUrl: "https://..."
+ *   }
+ * }
+ * <CartCard.render(content, false, false) />
+ * ```
+ */
+export const CartCard: MessageRenderer = {
+  render: content => {
+    const cartContent = content as CartContent
+    const { data } = cartContent
+
+    if (!data) {
+      return null
+    }
+
+    const { isEmpty, lines, cost, checkoutUrl, onCart, cartId, commonText } = data
+
+    // 合并默认文案和自定义文案
+    const mergedText = { ...DEFAULT_COMMON_TEXT, ...commonText }
+
+    // 处理购物车按钮点击
+    const handleCart = () => {
+      if (onCart) {
+        onCart(cartId, checkoutUrl)
+      } else if (checkoutUrl) {
+        window.open(checkoutUrl, '_blank', 'noopener,noreferrer')
+      }
+    }
+
+    // 空购物车状态 - 不展示组件
+    if (isEmpty || !lines || lines.length === 0) {
+      return null
+    }
+
+    return (
+      <div className="w-full max-w-md overflow-hidden rounded-2xl shadow-sm" style={{ backgroundColor: '#F5F6F7' }}>
+        {/* 商品列表 */}
+        <div className="flex flex-col gap-6 overflow-y-auto p-4">
+          {lines.map(line => (
+            <CartLineItem key={line.id} line={line} />
+          ))}
+        </div>
+
+        {/* 价格汇总 */}
+        <CartSummary total={cost.totalAmount} totalText={mergedText.total} />
+
+        {/* Checkout 按钮 */}
+        {(checkoutUrl || onCart) && (
+          <div className="px-4 pb-4">
+            <button
+              type="button"
+              onClick={handleCart}
+              className="w-full rounded-full py-[10px] text-center text-sm font-bold leading-[1.4] tracking-[-0.02em] text-white"
+              style={{ backgroundColor: '#1D1D1F' }}
+            >
+              {mergedText.viewMore}
+            </button>
+          </div>
+        )}
+      </div>
+    )
+  },
+}

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

@@ -0,0 +1,75 @@
+/**
+ * 错误消息渲染器
+ * 显示错误提示信息
+ * 基于 specs/livechat-widget/plan.md 的错误处理设计
+ */
+
+import React from 'react'
+import type { MessageRenderer, ErrorContent } from '../../types'
+
+/**
+ * 错误消息渲染器
+ *
+ * 功能：
+ * - 显示错误消息
+ * - 红色背景警告样式
+ * - 可选错误代码
+ *
+ * 错误类型：
+ * - 网络错误
+ * - API 错误
+ * - 会话过期
+ * - 其他系统错误
+ *
+ * @example
+ * ```tsx
+ * const content: ErrorContent = {
+ *   type: 'error',
+ *   data: {
+ *     message: '网络连接失败，请重试',
+ *     code: 'NETWORK_ERROR'
+ *   }
+ * }
+ * <ErrorBlock.render(content, false, false) />
+ * ```
+ */
+export const ErrorBlock: MessageRenderer = {
+  render: (content, isUser, isSystem) => {
+    const errorContent = content as ErrorContent
+    const { message, code } = errorContent.data
+
+    if (!message) {
+      return null
+    }
+
+    return (
+      <div className="flex flex-col gap-1 rounded-lg border border-red-200 bg-red-50 px-3 py-2">
+        {/* 错误图标 + 消息 */}
+        <div className="flex items-start gap-2">
+          {/* 错误图标 */}
+          <svg
+            className="mt-0.5 size-5 shrink-0 text-red-600"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth="2"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          >
+            <circle cx="12" cy="12" r="10" />
+            <line x1="12" y1="8" x2="12" y2="12" />
+            <line x1="12" y1="16" x2="12.01" y2="16" />
+          </svg>
+
+          {/* 错误消息 */}
+          <div className="flex-1">
+            <p className="text-sm font-medium text-red-800">{message}</p>
+
+            {/* 错误代码（可选） */}
+            {code && <p className="mt-1 font-mono text-xs text-red-600">Error code: {code}</p>}
+          </div>
+        </div>
+      </div>
+    )
+  },
+}

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

@@ -0,0 +1,128 @@
+/**
+ * FAQ 列表组件
+ * 显示常见问题列表，支持折叠/展开
+ */
+
+import React, { useState } from 'react'
+import ReactMarkdown from 'react-markdown'
+import remarkGfm from 'remark-gfm'
+import type { FAQListContent, FAQItem, MessageRenderer, MessageContent } from '../../types'
+
+export interface FAQListProps {
+  content: FAQListContent
+  onQuestionClick?: (question: string) => void
+}
+
+/**
+ * FAQ 列表渲染器
+ * 用于注册到 MessageRendererRegistry
+ */
+export const FAQListRenderer: MessageRenderer = {
+  render: (content: MessageContent) => {
+    if (content.type !== 'faq_list') {
+      return null
+    }
+    return <FAQList content={content as FAQListContent} />
+  },
+}
+
+export const FAQList: React.FC<FAQListProps> = ({ content, onQuestionClick }) => {
+  const { found, count, total, results } = content.data
+  const [expandedIds, setExpandedIds] = useState<Set<string>>(new Set())
+
+  // 如果没有找到结果
+  if (!found || results.length === 0) {
+    return (
+      <div className="rounded-lg border border-gray-200 bg-white p-4">
+        <p className="text-sm text-gray-500">未找到相关问题</p>
+      </div>
+    )
+  }
+
+  // 切换展开/折叠
+  const toggleExpand = (id: string) => {
+    setExpandedIds(prev => {
+      const newSet = new Set(prev)
+      if (newSet.has(id)) {
+        newSet.delete(id)
+      } else {
+        newSet.add(id)
+      }
+      return newSet
+    })
+  }
+
+  // 处理相关问题点击
+  const handleRelatedQuestionClick = (question: string) => {
+    onQuestionClick?.(question)
+  }
+
+  return (
+    <div className="space-y-2">
+      {/* FAQ 列表 */}
+      <div className="space-y-2">
+        {results.map(item => {
+          const isExpanded = expandedIds.has(item.id)
+
+          return (
+            <div key={item.id} className="overflow-hidden rounded-2xl  bg-[#F5F6F7] transition-all">
+              {/* 问题标题 - 可点击展开/折叠 */}
+              <button
+                onClick={() => toggleExpand(item.id)}
+                className="flex w-full items-center justify-between gap-3 p-4 text-left transition-colors "
+              >
+                <div className="flex-1">
+                  <div className="flex items-center gap-2">
+                    <span className="text-base font-bold leading-[1.4] tracking-[-0.02em] text-[#080A0F]">
+                      {item.question}
+                    </span>
+                  </div>
+                </div>
+
+                {/* 展开/折叠图标 */}
+                <svg
+                  className={`size-5 shrink-0 text-[#080A0F] transition-transform ${isExpanded ? 'rotate-180' : ''}`}
+                  fill="none"
+                  viewBox="0 0 24 24"
+                  stroke="currentColor"
+                >
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
+                </svg>
+              </button>
+
+              {/* 答案内容 - 展开时显示 */}
+              {isExpanded && (
+                <div className=" bg-[#F5F6F7] px-4 py-3 pt-0">
+                  <div
+                    className="prose prose-sm max-w-none border-t border-gray-100  text-sm font-bold leading-[1.4] tracking-[-0.02em] text-[#4A4C56]"
+                    style={{ paddingTop: '12px' }}
+                  >
+                    <ReactMarkdown remarkPlugins={[remarkGfm]}>{item.answer}</ReactMarkdown>
+                  </div>
+
+                  {/* 相关问题 */}
+                  {item.relatedQuestions && item.relatedQuestions.length > 0 && (
+                    <div className="mt-4 border-t border-gray-200 pt-3">
+                      <p className="mb-2 text-xs font-medium text-gray-500">You may also want to know:</p>
+                      <div className="space-y-1">
+                        {item.relatedQuestions.map((q, idx) => (
+                          <button
+                            key={idx}
+                            onClick={() => handleRelatedQuestionClick(q)}
+                            className="block w-full text-left text-xs text-blue-600 hover:text-blue-700 hover:underline"
+                          >
+                            {q}
+                          </button>
+                        ))}
+                      </div>
+                    </div>
+                  )}
+                </div>
+              )}
+            </div>
+          )
+        })}
+      </div>
+    </div>
+  )
+}

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

@@ -0,0 +1,152 @@
+/**
+ * 政策说明渲染器
+ * 显示退货、保修等政策信息
+ * 基于 specs/livechat-widget/data-model.md 的政策数据模型
+ */
+
+import React, { useState } from 'react'
+import ReactMarkdown from 'react-markdown'
+import remarkGfm from 'remark-gfm'
+import type { MessageRenderer, PolicyContent } from '../../types'
+
+/**
+ * 政策说明渲染器
+ *
+ * 功能：
+ * - 显示政策标题和内容
+ * - 支持 Markdown 格式
+ * - 可折叠/展开（内容较长时）
+ *
+ * 政策类型：
+ * - 退货政策
+ * - 保修政策
+ * - 运费政策
+ * - 隐私政策
+ *
+ * 布局：
+ * ```
+ * ┌─────────────────────────┐
+ * │ 📋 政策标题            │
+ * ├─────────────────────────┤
+ * │ 政策内容...             │
+ * │ (支持 Markdown)         │
+ * │                         │
+ * │ [展开/收起]             │
+ * └─────────────────────────┘
+ * ```
+ *
+ * @example
+ * ```tsx
+ * const content: PolicyContent = {
+ *   type: 'policy',
+ *   data: {
+ *     title: '退货政策',
+ *     content: '我们提供 30 天无理由退货...'
+ *   }
+ * }
+ * <PolicyBlock.render(content, false, false) />
+ * ```
+ */
+export const PolicyBlock: MessageRenderer = {
+  render: (content, isUser, isSystem) => {
+    const policyContent = content as PolicyContent
+    const { title, content: policyText } = policyContent.data
+
+    if (!title || !policyText) {
+      return null
+    }
+
+    // 判断内容是否较长（超过 200 字符）
+    const isLongContent = policyText.length > 200
+
+    return <PolicyCard title={title} content={policyText} isLong={isLongContent} />
+  },
+}
+
+/**
+ * 政策卡片组件（支持折叠）
+ */
+const PolicyCard: React.FC<{
+  title: string
+  content: string
+  isLong: boolean
+}> = ({ title, content, isLong }) => {
+  const [isExpanded, setIsExpanded] = useState(!isLong)
+
+  const toggleExpand = () => {
+    setIsExpanded(prev => !prev)
+  }
+
+  return (
+    <div className="overflow-hidden rounded-lg border border-blue-200 bg-blue-50">
+      {/* 标题 */}
+      <div className="flex items-center gap-2 border-b border-blue-200 bg-blue-100 px-3 py-2">
+        <svg
+          width="18"
+          height="18"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth="2"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          className="shrink-0 text-blue-700"
+        >
+          <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" />
+          <polyline points="14 2 14 8 20 8" />
+          <line x1="16" y1="13" x2="8" y2="13" />
+          <line x1="16" y1="17" x2="8" y2="17" />
+          <polyline points="10 9 9 9 8 9" />
+        </svg>
+        <h3 className="text-sm font-semibold text-blue-900">{title}</h3>
+      </div>
+
+      {/* 内容 */}
+      <div className="px-3 py-2">
+        <div
+          className={`
+            text-sm leading-relaxed text-blue-900
+            ${!isExpanded && isLong ? 'line-clamp-3' : ''}
+          `}
+        >
+          <ReactMarkdown
+            remarkPlugins={[remarkGfm]}
+            components={{
+              p: ({ node, ...props }) => <p {...props} className="mb-2 last:mb-0" />,
+              ul: ({ node, ...props }) => <ul {...props} className="mb-2 ml-4 list-disc" />,
+              ol: ({ node, ...props }) => <ol {...props} className="mb-2 ml-4 list-decimal" />,
+              li: ({ node, ...props }) => <li {...props} className="mb-1" />,
+              strong: ({ node, ...props }) => <strong {...props} className="font-bold" />,
+            }}
+          >
+            {content}
+          </ReactMarkdown>
+        </div>
+
+        {/* 展开/收起按钮（仅长内容显示） */}
+        {isLong && (
+          <button
+            type="button"
+            onClick={toggleExpand}
+            className="mt-2 flex items-center gap-1 text-xs font-medium text-blue-700 hover:text-blue-800"
+          >
+            <span>{isExpanded ? '收起' : '展开'}</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>
+    </div>
+  )
+}