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

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

@@ -0,0 +1,207 @@
+/**
+ * 促销活动列表组件
+ * 显示当前进行中的促销活动信息
+ * 基于后端数据结构规范：promotion_list
+ */
+
+import React from 'react'
+import type { MessageRenderer } from '../../types'
+
+/**
+ * 促销活动数据结构
+ */
+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
+  }
+}
+
+/**
+ * 促销活动列表数据结构
+ */
+export interface PromotionListData {
+  found: boolean // 是否找到活动
+  count: number // 返回的活动数量
+  total?: number // 总活动数量（可选）
+  results: PromotionItem[] // 活动列表
+}
+
+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 } = data
+
+  // 空状态处理
+  if (!found || !results || results.length === 0) {
+    return (
+      <div className="rounded-lg border border-gray-200 bg-gray-50 p-4 text-center">
+        <p className="text-sm text-gray-500">暂无进行中的活动</p>
+      </div>
+    )
+  }
+
+  return (
+    <div className="space-y-3">
+      {results.map(promotion => (
+        <div
+          key={promotion.id}
+          className="overflow-hidden rounded-lg border border-gray-200 bg-white shadow-sm transition-shadow hover:shadow-md"
+        >
+          {/* Banner 图片 */}
+          {promotion.banner_url && (
+            <div className="aspect-[16/9] w-full overflow-hidden bg-gray-100">
+              <img
+                src={promotion.banner_url}
+                alt={promotion.title}
+                className="size-full object-cover object-center"
+                loading="lazy"
+              />
+            </div>
+          )}
+
+          {/* 活动信息 */}
+          <div className="p-4">
+            {/* 标题和副标题 */}
+            <div className="mb-2">
+              <h3 className="text-xl font-bold leading-[1.2] tracking-[-0.04em] text-gray-900">{promotion.title}</h3>
+              {promotion.subtitle && (
+                <p className="mt-1 text-sm font-bold leading-[1.4] tracking-[-0.02em] text-red-600">
+                  {promotion.subtitle}
+                </p>
+              )}
+            </div>
+
+            {/* 活动描述 */}
+            {/* {promotion.description && (
+              <p className="mb-3 text-sm leading-relaxed text-gray-600">{promotion.description}</p>
+            )} */}
+
+            {/* 活动元信息 */}
+            {/* <div className="mb-3 space-y-1 text-xs text-gray-500"> */}
+            {/* 活动时间 */}
+            {/* <div className="flex items-center gap-1">
+                <svg className="size-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth={2}
+                    d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
+                  />
+                </svg>
+                <span>
+                  {formatDate(promotion.time_range.start)}
+                  {promotion.time_range.end ? ` - ${formatDate(promotion.time_range.end)}` : ' - Ongoing'}
+                </span>
+              </div> */}
+
+            {/* 参与商品数量 */}
+            {/* {promotion.product_count !== undefined && promotion.product_count > 0 && (
+                <div className="flex items-center gap-1">
+                  <svg className="size-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                      strokeWidth={2}
+                      d="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z"
+                    />
+                  </svg>
+                  <span>{promotion.product_count} products</span>
+                </div>
+              )}
+            </div> */}
+
+            {/* 查看详情按钮 */}
+            {promotion.url && (
+              <a
+                href={promotion.url}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="inline-flex items-center gap-1 text-sm font-bold leading-[1.2] tracking-[-0.04em]"
+              >
+                Learn More
+                <svg className="size-4" 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 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"
+          >
+            {/* 图标（可选） */}
+            {reply.icon && <span className="text-base">{reply.icon}</span>}
+
+            {/* 标签 */}
+            <span>{reply.label}</span>
+          </button>
+        ))}
+      </div>
+    )
+  },
+})
+
+/**
+ * 默认快捷回复渲染器（无回调）
+ */
+export const QuickReplies: MessageRenderer = createQuickRepliesRenderer()

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

@@ -0,0 +1,89 @@
+/**
+ * 文本消息内容渲染器
+ * 支持 Markdown 格式
+ * 基于 specs/livechat-widget/plan.md 的文本消息设计
+ */
+
+import React from 'react'
+import ReactMarkdown from 'react-markdown'
+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-sm leading-relaxed">
+        <ReactMarkdown
+          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="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" />,
+            // 自定义标题样式
+            h1: ({ node, ...props }) => <h1 {...props} className="mb-2 text-lg font-bold" />,
+            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" />,
+            em: ({ node, ...props }) => <em {...props} className="italic" />,
+          }}
+        >
+          {textContent.text}
+        </ReactMarkdown>
+      </div>
+    )
+  },
+}

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

@@ -0,0 +1,53 @@
+/**
+ * 思考状态消息渲染器
+ * 显示 AI 助手正在思考的动画
+ * 基于 specs/livechat-widget/plan.md 的思考状态设计
+ */
+
+import React from 'react'
+import type { MessageRenderer, ThinkingContent } from '../../types'
+
+/**
+ * 思考状态渲染器
+ *
+ * 功能：
+ * - 显示"正在思考..."动画
+ * - 三个跳动的圆点
+ * - 黄色背景提示
+ *
+ * 动画效果：
+ * - 使用 CSS 动画（livechat.css 中定义）
+ * - 三个圆点依次跳动
+ * - 循环播放
+ *
+ * @example
+ * ```tsx
+ * const content: ThinkingContent = {
+ *   type: 'thinking',
+ *   data: {
+ *     status: '正在查询商品信息...'
+ *   }
+ * }
+ * <ThinkingBlock.render(content, false, false) />
+ * ```
+ */
+export const ThinkingBlock: MessageRenderer = {
+  render: (content, isUser, isSystem) => {
+    const thinkingContent = content as ThinkingContent
+    const status = thinkingContent.data.status || ''
+
+    return (
+      <div className="flex items-center gap-2 py-1">
+        {/* 思考动画 - 三个跳动的点 */}
+        <div className="livechat-thinking-dots flex gap-1">
+          <span className="size-2 rounded-full" style={{ backgroundColor: 'rgba(0, 93, 142, 1)' }} />
+          <span className="size-2 rounded-full" style={{ backgroundColor: 'rgba(0, 93, 142, 0.6)' }} />
+          <span className="size-2 rounded-full" style={{ backgroundColor: 'rgba(0, 93, 142, 0.2)' }} />
+        </div>
+
+        {/* 状态文本（可选） */}
+        {/* {status && <span className="text-sm text-gray-500">{status}</span>} */}
+      </div>
+    )
+  },
+}

package/src/components/LiveChatWidget/components/MessageContent/index.ts

@@ -0,0 +1,16 @@
+/**
+ * 消息内容渲染器统一导出
+ */
+
+export { MessageContent } from '../MessageContent'
+export { TextBlock } from './TextBlock'
+export { ProductCard } from './ProductCard'
+export { ProductList } from './ProductList'
+export { ProductComparison, ProductComparisonRenderer } from './ProductComparison'
+export { PolicyBlock } from './PolicyBlock'
+export { QuickReplies, createQuickRepliesRenderer } from './QuickReplies'
+export { ThinkingBlock } from './ThinkingBlock'
+export { ErrorBlock } from './ErrorBlock'
+export { FAQList, FAQListRenderer } from './FAQList.js'
+export { PromotionList, PromotionListRenderer } from './PromotionList.js'
+export { CartCard } from './CartCard.js'

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

@@ -0,0 +1,110 @@
+/**
+ * 消息内容容器组件
+ * 根据消息内容类型分发到对应的渲染器
+ * 基于 specs/livechat-widget/plan.md 的消息内容渲染设计
+ */
+
+import React from 'react'
+import type { MessageContent as MessageContentType, MessageRenderer } from '../types'
+import { MessageRendererRegistry } from '../utils/messageRenderers'
+
+export interface MessageContentProps {
+  /**
+   * 消息内容
+   */
+  content: MessageContentType
+
+  /**
+   * 是否为用户消息
+   */
+  isUser: boolean
+
+  /**
+   * 是否为系统消息
+   */
+  isSystem: boolean
+
+  /**
+   * 自定义渲染器注册表
+   */
+  rendererRegistry?: MessageRendererRegistry
+
+  /**
+   * 默认渲染器（当找不到对应渲染器时使用）
+   */
+  defaultRenderer?: MessageRenderer
+
+  /**
+   * 自定义样式类名
+   */
+  className?: string
+
+  /**
+   * 商品添加到购物车回调
+   */
+  onAddToCart?: (product: any) => void
+}
+
+/**
+ * 默认渲染器 - 显示未知类型提示
+ */
+const defaultFallbackRenderer: MessageRenderer = {
+  render: content => <div className="text-sm italic text-gray-500">未知消息类型: {content.type}</div>,
+}
+
+/**
+ * 消息内容容器组件
+ *
+ * 功能：
+ * - 根据 content.type 分发到对应的渲染器
+ * - 支持自定义渲染器注册表
+ * - 提供默认兜底渲染器
+ *
+ * 渲染流程：
+ * 1. 检查自定义渲染器注册表是否有对应类型
+ * 2. 如果有，使用自定义渲染器
+ * 3. 如果没有，使用默认渲染器
+ * 4. 如果默认渲染器也没有，显示未知类型提示
+ *
+ * @example
+ * ```tsx
+ * <MessageContent
+ *   content={content}
+ *   isUser={message.role === 'user'}
+ *   isSystem={message.role === 'system'}
+ *   rendererRegistry={customRegistry}
+ * />
+ * ```
+ */
+export const MessageContent: React.FC<MessageContentProps> = ({
+  content,
+  isUser,
+  isSystem,
+  rendererRegistry,
+  defaultRenderer,
+  className = '',
+  onAddToCart,
+}) => {
+  // 动态注入 onAddToCart 到 product_list 类型的内容中
+  let processedContent = content
+  if (content.type === 'product_list' && onAddToCart) {
+    processedContent = {
+      ...content,
+      data: {
+        ...(content as any).data,
+        onAddToCart,
+      },
+    }
+  }
+
+  // 尝试从注册表获取渲染器
+  const customRenderer = rendererRegistry?.get(processedContent.type)
+
+  // 确定最终使用的渲染器
+  const renderer = customRenderer || defaultRenderer || defaultFallbackRenderer
+
+  // 渲染内容
+  const rendered = renderer.render(processedContent, isUser, isSystem)
+
+  return <div className={className}>{rendered}</div>
+}