@anker-in/campaign-ui 0.2.11-beta.3 → 0.2.11-beta.31

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

@@ -0,0 +1,190 @@
+/**
+ * 单条聊天消息组件
+ * 显示消息气泡、发送者、时间戳
+ * 基于 specs/livechat-widget/plan.md 的消息展示设计
+ */
+
+import React from 'react'
+import type { Message, MessageRenderer } from '../types'
+import { MessageContent } from './MessageContent'
+import { MessageRendererRegistry } from '../utils/messageRenderers'
+import cn from 'classnames'
+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="">
+          {message.content.map((content, index) => (
+            <MessageContent
+              key={index}
+              content={content}
+              isUser={false}
+              isSystem={true}
+              rendererRegistry={rendererRegistry}
+              defaultRenderer={defaultRenderer}
+            />
+          ))}
+        </div>
+      </div>
+    )
+  }
+
+  // 工具消息（通常不显示，或显示为系统消息）
+  if (isTool) {
+    return null
+  }
+
+  // 分离内容类型：需要独立渲染的结构化内容
+  // 注意：product_card 不在此列表中，它会在气泡内渲染
+  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))
+  const isBubbleProductCard = bubbleContent.some(c => c.type === 'product_card')
+  // 用户/助手消息
+  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={cn(
+              'w-fit min-w-0 overflow-hidden rounded-2xl ',
+              isUser ? 'text-white' : 'text-[#1D1D1F]',
+              isBubbleProductCard ? 'p-4' : 'p-3'
+            )}
+            style={{
+              backgroundColor: isUser ? '#005D8E' : '#F5F6F7',
+            }}
+          >
+            {/* 按原始顺序渲染气泡内的所有内容（text 和 product_card 交替） */}
+            <div className={cn(
+              'flex w-full min-w-0 flex-col',
+              isBubbleProductCard ?'gap-0':'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,353 @@
+/**
+ * 聊天窗口容器组件
+ * 包含头部、消息列表、输入框的完整聊天界面
+ * 基于 specs/livechat-widget/plan.md 的窗口设计
+ */
+
+import React, { useState, useRef, useEffect, useCallback } 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,
+}) => {
+  // 常量：高度限制比例
+  const MIN_HEIGHT_RATIO = 0.4 // 最小40%
+  const MAX_HEIGHT_RATIO = 0.8 // 最大80%
+  const DEFAULT_HEIGHT = 680 // 默认680px
+
+  // 获取当前允许的高度范围
+  const getHeightConstraints = useCallback(() => {
+    if (typeof window === 'undefined') {
+      return { minHeight: DEFAULT_HEIGHT, maxHeight: DEFAULT_HEIGHT }
+    }
+    return {
+      minHeight: window.innerHeight * MIN_HEIGHT_RATIO,
+      maxHeight: window.innerHeight * MAX_HEIGHT_RATIO,
+    }
+  }, [MIN_HEIGHT_RATIO, MAX_HEIGHT_RATIO, DEFAULT_HEIGHT])
+
+  // 将高度限制在允许范围内
+  const clampHeight = useCallback(
+    (height: number) => {
+      const { minHeight, maxHeight } = getHeightConstraints()
+      return Math.max(minHeight, Math.min(maxHeight, height))
+    },
+    [getHeightConstraints]
+  )
+
+  // 计算初始高度：默认680px，但需要在30%-80%范围内
+  const getInitialHeight = () => {
+    if (typeof window === 'undefined') return DEFAULT_HEIGHT
+    return clampHeight(DEFAULT_HEIGHT)
+  }
+
+  // 移动端高度调节状态（默认680px或屏幕80%，取较小值）
+  const [mobileHeight, setMobileHeight] = useState(getInitialHeight)
+  const [isDragging, setIsDragging] = useState(false)
+  const dragStartY = useRef(0)
+  const dragStartHeight = useRef(getInitialHeight())
+  const windowRef = useRef<HTMLDivElement>(null)
+
+  // 更新高度并同步CSS变量
+  const updateHeight = useCallback(
+    (newHeight: number) => {
+      const clampedHeight = clampHeight(newHeight)
+      setMobileHeight(clampedHeight)
+      // 同步更新CSS变量，供 livechat.css 使用
+      if (windowRef.current) {
+        windowRef.current.style.setProperty('--livechat-mobile-height', `${clampedHeight}px`)
+      }
+      return clampedHeight
+    },
+    [clampHeight]
+  )
+
+  // 检测是否为移动端（初始化时立即检测）
+  const [isMobile, setIsMobile] = useState(() => {
+    if (typeof window !== 'undefined') {
+      return window.innerWidth < 768
+    }
+    return false
+  })
+
+  useEffect(() => {
+    const handleResize = () => {
+      const newIsMobile = window.innerWidth < 768
+      setIsMobile(newIsMobile)
+
+      // 如果是移动端，检查当前高度是否在允许范围内
+      if (newIsMobile) {
+        const clampedHeight = clampHeight(mobileHeight)
+        if (clampedHeight !== mobileHeight) {
+          updateHeight(clampedHeight)
+        }
+      }
+    }
+
+    window.addEventListener('resize', handleResize)
+    return () => window.removeEventListener('resize', handleResize)
+  }, [mobileHeight, clampHeight, updateHeight])
+
+  // 拖拽开始
+  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 = dragStartHeight.current + deltaY
+
+      updateHeight(newHeight)
+    }
+
+    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, updateHeight])
+
+  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 py-2"
+          style={{
+            touchAction: 'none',
+            backgroundColor: '#ffffff',
+          }}
+          onMouseDown={handleDragStart}
+          onTouchStart={handleDragStart}
+        >
+          <div
+            style={{
+              width: '48px',
+              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>
+  )
+}