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

package/src/components/LiveChatWidget/components/ChatMessage.tsx

@@ -0,0 +1,182 @@
+/**
+ * 单条聊天消息组件
+ * 显示消息气泡、发送者、时间戳
+ * 基于 specs/livechat-widget/plan.md 的消息展示设计
+ */
+
+import React from 'react'
+import type { Message, MessageRenderer } from '../types'
+import { MessageContent } from './MessageContent'
+import { MessageRendererRegistry } from '../utils/messageRenderers'
+
+export interface ChatMessageProps {
+  /**
+   * 消息数据
+   */
+  message: Message
+
+  /**
+   * 自定义渲染器注册表
+   */
+  rendererRegistry?: MessageRendererRegistry
+
+  /**
+   * 默认渲染器
+   */
+  defaultRenderer?: MessageRenderer
+
+  /**
+   * 是否显示时间戳
+   * @default true
+   */
+  showTimestamp?: boolean
+
+  /**
+   * 自定义样式类名
+   */
+  className?: string
+
+  /**
+   * 商品添加到购物车回调
+   */
+  onAddToCart?: (product: any) => void
+}
+
+/**
+ * 格式化时间戳为可读格式
+ * @param timestamp Unix 时间戳（毫秒）
+ * @returns 格式化后的时间字符串 (如 "14:30")
+ */
+function formatTimestamp(timestamp: number): string {
+  const date = new Date(timestamp)
+  const hours = date.getHours().toString().padStart(2, '0')
+  const minutes = date.getMinutes().toString().padStart(2, '0')
+  return `${hours}:${minutes}`
+}
+
+/**
+ * 单条聊天消息组件
+ *
+ * 功能：
+ * - 显示消息气泡（用户 vs AI 助手不同样式）
+ * - 支持多个 content 块（一条消息可包含多种内容类型）
+ * - 显示时间戳
+ * - 系统消息居中显示
+ *
+ * 样式规则：
+ * - 用户消息：右对齐，灰色背景
+ * - AI 助手消息：左对齐，白色背景
+ * - 系统消息：居中，黄色背景
+ *
+ * @example
+ * ```tsx
+ * <ChatMessage
+ *   message={message}
+ *   rendererRegistry={customRegistry}
+ *   showTimestamp={true}
+ * />
+ * ```
+ */
+export const ChatMessage: React.FC<ChatMessageProps> = ({
+  message,
+  rendererRegistry,
+  defaultRenderer,
+  showTimestamp = true,
+  className = '',
+  onAddToCart,
+}) => {
+  const isUser = message.role === 'user'
+  const isAssistant = message.role === 'assistant'
+  const isSystem = message.role === 'system'
+  const isTool = message.role === 'tool'
+
+  // 系统消息特殊处理（居中显示）
+  if (isSystem) {
+    return (
+      <div className={`flex justify-center py-2 ${className}`}>
+        <div className="max-w-xs rounded-lg border border-yellow-200 bg-yellow-50 px-4 py-2">
+          {message.content.map((content, index) => (
+            <MessageContent
+              key={index}
+              content={content}
+              isUser={false}
+              isSystem={true}
+              rendererRegistry={rendererRegistry}
+              defaultRenderer={defaultRenderer}
+            />
+          ))}
+        </div>
+      </div>
+    )
+  }
+
+  // 工具消息（通常不显示，或显示为系统消息）
+  if (isTool) {
+    return null
+  }
+
+  // 分离内容类型：需要独立渲染的结构化内容
+  const structuredContentTypes = ['product_list', 'product_comparison', 'faq_list', 'promotion_list', 'cart']
+
+  // 将内容分为两组：气泡内容 和 独立内容
+  const bubbleContent = message.content.filter(c => !structuredContentTypes.includes(c.type))
+  const standaloneContent = message.content.filter(c => structuredContentTypes.includes(c.type))
+
+  // 用户/助手消息
+  return (
+    <div className={`flex ${isUser ? 'justify-end' : 'justify-start'} py-2 ${className}`}>
+      <div className="flex w-fit max-w-full flex-col gap-2">
+        {/* 消息气泡（仅包含文本和快捷回复等） */}
+        {bubbleContent.length > 0 && (
+          <div
+            className={`w-full min-w-0 overflow-hidden rounded-2xl px-4 py-2 ${isUser ? 'rounded-br-sm text-white' : 'rounded-bl-sm  text-[#1D1D1F]'}`}
+            style={{
+              backgroundColor: isUser ? '#005D8E' : '#F5F6F7',
+            }}
+          >
+            {/* 渲染气泡内的内容块 */}
+            <div className="flex w-full min-w-0 flex-col gap-2">
+              {bubbleContent.map((content, index) => (
+                <MessageContent
+                  key={index}
+                  content={content}
+                  isUser={isUser}
+                  isSystem={false}
+                  rendererRegistry={rendererRegistry}
+                  defaultRenderer={defaultRenderer}
+                  onAddToCart={onAddToCart}
+                />
+              ))}
+            </div>
+          </div>
+        )}
+
+        {/* 独立渲染的结构化内容（不在气泡内） */}
+        {standaloneContent.map((content, index) => (
+          <div key={`standalone-${index}`} className="w-full">
+            <MessageContent
+              content={content}
+              isUser={isUser}
+              isSystem={false}
+              rendererRegistry={rendererRegistry}
+              defaultRenderer={defaultRenderer}
+              onAddToCart={onAddToCart}
+            />
+          </div>
+        ))}
+
+        {/* 时间戳 */}
+        {showTimestamp && (
+          <span
+            className={`
+              px-2 text-xs text-gray-400
+              ${isUser ? 'text-right' : 'text-left'}
+            `}
+          >
+            {formatTimestamp(message.timestamp)}
+          </span>
+        )}
+      </div>
+    </div>
+  )
+}

package/src/components/LiveChatWidget/components/ChatWindow.tsx

@@ -0,0 +1,304 @@
+/**
+ * 聊天窗口容器组件
+ * 包含头部、消息列表、输入框的完整聊天界面
+ * 基于 specs/livechat-widget/plan.md 的窗口设计
+ */
+
+import React, { useState, useRef, useEffect } from 'react'
+import type { Message, MessageRenderer } from '../types'
+import { ChatHeader } from './ChatHeader'
+import { MessageList } from './MessageList'
+import { ChatInput } from './ChatInput'
+import { MessageRendererRegistry } from '../utils/messageRenderers'
+
+export interface ChatWindowProps {
+  /**
+   * 消息列表
+   */
+  messages: Message[]
+
+  /**
+   * 输入框当前值
+   */
+  inputValue: string
+
+  /**
+   * 输入框值变化回调
+   */
+  onInputChange: (value: string) => void
+
+  /**
+   * 发送消息回调
+   */
+  onSend: () => void
+
+  /**
+   * 关闭窗口回调
+   */
+  onClose?: () => void
+
+  /**
+   * 新会话回调
+   */
+  onNewSession?: () => void
+
+  /**
+   * 头部标题
+   */
+  title?: string
+
+  /**
+   * Logo URL
+   */
+  logoUrl?: string
+
+  /**
+   * 是否正在发送消息
+   * @default false
+   */
+  isSending?: boolean
+
+  /**
+   * 是否正在加载历史消息
+   * @default false
+   */
+  isLoadingHistory?: boolean
+
+  /**
+   * 是否显示时间戳
+   * @default true
+   */
+  showTimestamp?: boolean
+
+  /**
+   * 是否自动滚动
+   * @default true
+   */
+  autoScroll?: boolean
+
+  /**
+   * 自定义渲染器注册表
+   */
+  rendererRegistry?: MessageRendererRegistry
+
+  /**
+   * 默认渲染器
+   */
+  defaultRenderer?: MessageRenderer
+
+  /**
+   * 输入框占位符
+   */
+  inputPlaceholder?: string
+
+  /**
+   * 自定义样式类名
+   */
+  className?: string
+
+  /**
+   * 商品添加到购物车回调
+   */
+  onAddToCart?: (product: any) => void
+
+  /**
+   * 是否显示新会话按钮
+   * @default true
+   */
+  showNewSessionButton?: boolean
+}
+
+/**
+ * 聊天窗口容器组件
+ *
+ * 功能：
+ * - 组合头部、消息列表、输入框
+ * - 响应式布局（移动端全屏，桌面端固定尺寸）
+ * - 动画进入/退出效果
+ *
+ * 布局结构：
+ * ```
+ * ┌─────────────────────┐
+ * │  ChatHeader         │ (固定顶部)
+ * ├─────────────────────┤
+ * │  MessageList        │ (可滚动区域)
+ * │  (flex-1)           │
+ * ├─────────────────────┤
+ * │  ChatInput          │ (固定底部)
+ * └─────────────────────┘
+ * ```
+ *
+ * 响应式设计：
+ * - 移动端 (< 768px): 全屏显示
+ * - 平板及以上 (>= 768px): 固定尺寸弹窗
+ *
+ * @example
+ * ```tsx
+ * <ChatWindow
+ *   messages={messages}
+ *   inputValue={inputValue}
+ *   onInputChange={setInputValue}
+ *   onSend={handleSend}
+ *   onClose={() => setIsOpen(false)}
+ *   onNewSession={handleNewSession}
+ *   isSending={isStreaming}
+ *   title="AI 助手"
+ *   logoUrl="/logo.png"
+ * />
+ * ```
+ */
+export const ChatWindow: React.FC<ChatWindowProps> = ({
+  messages,
+  inputValue,
+  onInputChange,
+  onSend,
+  onClose,
+  onNewSession,
+  title,
+  logoUrl,
+  isSending = false,
+  isLoadingHistory = false,
+  showTimestamp = true,
+  autoScroll = true,
+  rendererRegistry,
+  defaultRenderer,
+  inputPlaceholder,
+  className = '',
+  onAddToCart,
+  showNewSessionButton = true,
+}) => {
+  // 移动端高度调节状态（默认375px）
+  const [mobileHeight, setMobileHeight] = useState(375)
+  const [isDragging, setIsDragging] = useState(false)
+  const dragStartY = useRef(0)
+  const dragStartHeight = useRef(375)
+  const windowRef = useRef<HTMLDivElement>(null)
+
+  // 检测是否为移动端（初始化时立即检测）
+  const [isMobile, setIsMobile] = useState(() => {
+    if (typeof window !== 'undefined') {
+      return window.innerWidth < 768
+    }
+    return false
+  })
+
+  useEffect(() => {
+    const checkMobile = () => {
+      setIsMobile(window.innerWidth < 768)
+    }
+    window.addEventListener('resize', checkMobile)
+    return () => window.removeEventListener('resize', checkMobile)
+  }, [])
+
+  // 拖拽开始
+  const handleDragStart = (e: React.MouseEvent | React.TouchEvent) => {
+    if (!isMobile) return
+
+    setIsDragging(true)
+    const clientY = 'touches' in e ? e.touches[0].clientY : e.clientY
+    dragStartY.current = clientY
+    dragStartHeight.current = mobileHeight
+
+    // 阻止默认行为
+    e.preventDefault()
+  }
+
+  // 拖拽中
+  useEffect(() => {
+    if (!isDragging) return
+
+    const handleDragMove = (e: MouseEvent | TouchEvent) => {
+      const clientY = 'touches' in e ? e.touches[0].clientY : e.clientY
+      const deltaY = dragStartY.current - clientY // 向上拖动为正值
+      const newHeight = Math.max(375, Math.min(window.innerHeight * 0.9, dragStartHeight.current + deltaY))
+
+      setMobileHeight(newHeight)
+
+      // 更新CSS变量
+      if (windowRef.current) {
+        windowRef.current.style.setProperty('--livechat-mobile-height', `${newHeight}px`)
+      }
+    }
+
+    const handleDragEnd = () => {
+      setIsDragging(false)
+    }
+
+    document.addEventListener('mousemove', handleDragMove)
+    document.addEventListener('mouseup', handleDragEnd)
+    document.addEventListener('touchmove', handleDragMove, { passive: false })
+    document.addEventListener('touchend', handleDragEnd)
+
+    return () => {
+      document.removeEventListener('mousemove', handleDragMove)
+      document.removeEventListener('mouseup', handleDragEnd)
+      document.removeEventListener('touchmove', handleDragMove)
+      document.removeEventListener('touchend', handleDragEnd)
+    }
+  }, [isDragging])
+
+  return (
+    <div
+      ref={windowRef}
+      className={`livechat-window flex flex-col overflow-hidden bg-white ${className}`}
+      style={
+        {
+          borderRadius: '16px',
+          '--livechat-mobile-height': `${mobileHeight}px`,
+        } as React.CSSProperties
+      }
+    >
+      {/* 移动端拖拽手柄 */}
+      {isMobile && (
+        <div
+          className="flex cursor-ns-resize items-center justify-center"
+          style={{
+            touchAction: 'none',
+            backgroundColor: '#ffffff',
+            paddingTop: '8px',
+          }}
+          onMouseDown={handleDragStart}
+          onTouchStart={handleDragStart}
+        >
+          <div
+            style={{
+              width: '64px',
+              height: '6px',
+              borderRadius: '999px',
+              backgroundColor: '#DADCE0',
+            }}
+          />
+        </div>
+      )}
+
+      {/* 头部 */}
+      <ChatHeader
+        title={title}
+        logoUrl={logoUrl}
+        onClose={onClose}
+        onNewSession={onNewSession}
+        showNewSessionButton={showNewSessionButton}
+      />
+
+      {/* 消息列表（可滚动区域） */}
+      <MessageList
+        messages={messages}
+        rendererRegistry={rendererRegistry}
+        defaultRenderer={defaultRenderer}
+        showTimestamp={showTimestamp}
+        autoScroll={autoScroll}
+        isLoadingHistory={isLoadingHistory}
+        onAddToCart={onAddToCart}
+      />
+
+      {/* 输入框 */}
+      <ChatInput
+        value={inputValue}
+        onChange={onInputChange}
+        onSend={onSend}
+        placeholder={inputPlaceholder}
+        disabled={isSending}
+      />
+    </div>
+  )
+}

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

@@ -0,0 +1,198 @@
+/**
+ * 购物车卡片渲染器
+ * 显示购物车内容、价格汇总和结账按钮
+ * 基于后端返回的购物车数据结构
+ */
+
+import React from 'react'
+import type { MessageRenderer, CartContent, CartLine, CartAmount } from '../../types'
+import { CURRENCY_SYMBOLS } 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">
+        <div className="flex items-end justify-between gap-2">
+          {/* 左侧：标题、变体、数量 */}
+          <div className="flex-1">
+            <h4 className="line-clamp-2 text-base font-bold leading-[1.4] tracking-[-0.02em] text-[#080A0F]">
+              {product.title}
+            </h4>
+            {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-base font-bold leading-[1.4] tracking-[-0.02em] text-[#080A0F]">×{quantity}</p>
+          </div>
+
+          {/* 右侧：价格 */}
+          <div className="flex gap-1 text-right">
+            <div className="text-base font-bold leading-[1.4] tracking-[-0.02em] text-gray-900">
+              {formatAmount(cost.totalAmount)}
+            </div>
+            {hasDiscount && (
+              <div className="text-base 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
+}> = ({ total }) => {
+  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">Total</span>
+        <span className="text-base 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 } = data
+
+    // 处理购物车按钮点击
+    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 max-h-[400px] flex-col gap-4 overflow-y-auto p-3">
+          {lines.map(line => (
+            <CartLineItem key={line.id} line={line} />
+          ))}
+        </div>
+
+        {/* 价格汇总 */}
+        <CartSummary total={cost.totalAmount} />
+
+        {/* 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' }}
+            >
+              View More
+            </button>
+          </div>
+        )}
+      </div>
+    )
+  },
+}