@anker-in/campaign-ui 0.2.11-beta.2 → 0.2.11-beta.21

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">错误代码: {code}</p>}
+          </div>
+        </div>
+      </div>
+    )
+  },
+}

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

@@ -0,0 +1,127 @@
+/**
+ * FAQ 列表组件
+ * 显示常见问题列表，支持折叠/展开
+ */
+
+import React, { useState } from 'react'
+import ReactMarkdown from 'react-markdown'
+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-sm 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>{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">您可能还想了解：</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,150 @@
+/**
+ * 政策说明渲染器
+ * 显示退货、保修等政策信息
+ * 基于 specs/livechat-widget/data-model.md 的政策数据模型
+ */
+
+import React, { useState } from 'react'
+import ReactMarkdown from 'react-markdown'
+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
+            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-semibold" />,
+            }}
+          >
+            {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>
+  )
+}

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

@@ -0,0 +1,139 @@
+/**
+ * 商品卡片渲染器
+ * 显示单个商品的详细信息
+ * 基于 specs/livechat-widget/data-model.md 的商品数据模型
+ */
+
+import React from 'react'
+import type { MessageRenderer, ProductCardContent, Product } from '../../types'
+import { CURRENCY_SYMBOLS } from '../../constants.js'
+
+/**
+ * 格式化价格
+ * @param price 价格对象
+ * @returns 格式化后的价格字符串 (如 "$29.99")
+ */
+function formatPrice(price: Product['price']): string {
+  const { amount, currency } = price
+
+  const symbol = CURRENCY_SYMBOLS[currency] || currency
+  const formattedAmount = amount.toFixed(2)
+
+  return `${symbol}${formattedAmount}`
+}
+
+/**
+ * 库存状态徽章
+ */
+const StockBadge: React.FC<{ status: Product['stockStatus'] }> = ({ status }) => {
+  const statusConfig = {
+    in_stock: { text: '有货', className: 'bg-green-100 text-green-800' },
+    low_stock: { text: '库存紧张', className: 'bg-yellow-100 text-yellow-800' },
+    out_of_stock: { text: '缺货', className: 'bg-red-100 text-red-800' },
+  }
+
+  const config = statusConfig[status]
+
+  return (
+    <span
+      className={`
+        inline-flex items-center rounded px-2 py-0.5 text-xs font-medium
+        ${config.className}
+      `}
+    >
+      {config.text}
+    </span>
+  )
+}
+
+/**
+ * 商品卡片渲染器
+ *
+ * 功能：
+ * - 显示商品图片、标题、价格
+ * - 显示库存状态
+ * - 可选：评分、评论数、热度
+ * - 点击跳转到商品页面
+ *
+ * 布局：
+ * ```
+ * ┌─────────────────────────┐
+ * │  [图片]                 │
+ * ├─────────────────────────┤
+ * │  商品标题               │
+ * │  $29.99  [有货]         │
+ * │  ⭐ 4.5 (120 评论)      │
+ * └─────────────────────────┘
+ * ```
+ *
+ * @example
+ * ```tsx
+ * const content: ProductCardContent = {
+ *   type: 'product_card',
+ *   data: {
+ *     product: {
+ *       shopifyId: '123',
+ *       handle: 'product-name',
+ *       title: 'Example Product',
+ *       price: { amount: 29.99, currency: 'USD' },
+ *       imageUrl: 'https://...',
+ *       productUrl: 'https://...',
+ *       stockStatus: 'in_stock',
+ *       averageRating: 4.5,
+ *       reviewCount: 120
+ *     }
+ *   }
+ * }
+ * <ProductCard.render(content, false, false) />
+ * ```
+ */
+export const ProductCard: MessageRenderer = {
+  render: (content, isUser, isSystem) => {
+    const productContent = content as ProductCardContent
+    const { product } = productContent.data
+
+    if (!product) {
+      return null
+    }
+
+    const { title, price, imageUrl, productUrl, stockStatus, averageRating, reviewCount, description } = product
+
+    return (
+      <a
+        href={productUrl}
+        target="_blank"
+        rel="noopener noreferrer"
+        className="livechat-product-card block max-w-sm overflow-hidden"
+      >
+        {/* 商品图片 */}
+        <div className="relative aspect-square w-full bg-gray-100">
+          <img src={imageUrl} alt={title} className="size-full object-cover" loading="lazy" />
+        </div>
+
+        {/* 商品信息 */}
+        <div className="flex flex-col gap-2 p-3">
+          {/* 标题 */}
+          <h3 className="line-clamp-2 text-sm font-medium text-gray-900">{title}</h3>
+
+          {/* 描述（可选） */}
+          {description && <p className="line-clamp-2 text-xs text-gray-600">{description}</p>}
+
+          {/* 价格 + 库存 */}
+          <div className="flex items-center justify-between">
+            <span className="text-lg font-bold text-gray-900">{formatPrice(price)}</span>
+            <StockBadge status={stockStatus} />
+          </div>
+
+          {/* 评分 + 评论数（可选） */}
+          {averageRating !== undefined && reviewCount !== undefined && (
+            <div className="flex items-center gap-1 text-xs text-gray-600">
+              <span className="text-yellow-500">⭐</span>
+              <span className="font-medium">{averageRating.toFixed(1)}</span>
+              <span>({reviewCount} 评论)</span>
+            </div>
+          )}
+        </div>
+      </a>
+    )
+  },
+}