@anker-in/campaign-ui 0.3.3 → 0.3.5

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

@@ -0,0 +1,363 @@
+/**
+ * 聊天窗口容器组件
+ * 包含头部、消息列表、输入框的完整聊天界面
+ * 基于 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
+
+  /**
+   * 输入框底部提示文本
+   * 不传入则不显示
+   */
+  bottomTips?: string
+}
+
+/**
+ * 聊天窗口容器组件
+ *
+ * 功能：
+ * - 组合头部、消息列表、输入框
+ * - 响应式布局（移动端全屏，桌面端固定尺寸）
+ * - 动画进入/退出效果
+ *
+ * 布局结构：
+ * ```
+ * ┌─────────────────────┐
+ * │  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,
+  bottomTips,
+}) => {
+  // 常量：高度限制比例
+  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',
+          borderBottomLeftRadius: isMobile && '0px',
+          borderBottomRightRadius: isMobile && '0px',
+          '--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}
+        bottomTips={bottomTips}
+      />
+    </div>
+  )
+}

package/src/components/LiveChatWidget/components/ComplianceDialog.tsx

@@ -0,0 +1,216 @@
+/**
+ * 法规协议弹窗组件
+ * 在用户首次点击聊天气泡时显示，用户同意后才打开聊天窗口
+ */
+
+import React, { useState, useCallback } from 'react'
+import * as Dialog from '@radix-ui/react-dialog'
+import type { ComplianceDialogConfig } from '../types'
+
+export interface ComplianceDialogProps {
+  /**
+   * 是否打开弹窗
+   */
+  open: boolean
+
+  /**
+   * 弹窗配置
+   */
+  config: ComplianceDialogConfig
+
+  /**
+   * 用户点击同意按钮的回调
+   */
+  onAgree: () => void
+
+  /**
+   * 用户关闭弹窗的回调（点击遮罩或关闭按钮）
+   */
+  onClose: () => void
+}
+
+/**
+ * 法规协议弹窗组件
+ *
+ * 功能：
+ * - 显示法规协议内容
+ * - 必须勾选复选框才能点击同意按钮
+ * - 支持在文本中嵌入链接
+ * - 响应式设计，移动端友好
+ *
+ * @example
+ * ```tsx
+ * <ComplianceDialog
+ *   open={showCompliance}
+ *   config={{
+ *     title: "Hi! I'm your eufy AI assistant.",
+ *     content: "AI-generated responses can be inaccurate...",
+ *     checkboxText: "By starting to use \"Live Chat\", you agree to Anker's {link}.",
+ *     linkText: "LIVE CHAT PRIVACY NOTICE",
+ *     linkUrl: "https://www.anker.com/privacy",
+ *     agreeButtonText: "Agree"
+ *   }}
+ *   onAgree={() => setShowCompliance(false)}
+ *   onClose={() => setShowCompliance(false)}
+ * />
+ * ```
+ */
+export const ComplianceDialog: React.FC<ComplianceDialogProps> = ({
+  open,
+  config,
+  onAgree,
+  onClose,
+}) => {
+  const [isChecked, setIsChecked] = useState(true)
+
+  const handleAgree = useCallback(() => {
+    if (isChecked) {
+      onAgree()
+    }
+  }, [isChecked, onAgree])
+
+  const handleOpenChange = useCallback((open: boolean) => {
+    if (!open) {
+      onClose()
+    }
+  }, [onClose])
+
+  // 处理点击事件，防止点击链接时触发 checkbox
+  const handleCheckboxLabelClick = useCallback((e: React.MouseEvent) => {
+    // 如果点击的是链接，阻止冒泡
+    if ((e.target as HTMLElement).tagName === 'A') {
+      e.stopPropagation()
+    }
+  }, [])
+
+  return (
+    <Dialog.Root open={open} onOpenChange={handleOpenChange}>
+      <Dialog.Portal>
+        {/* 弹窗内容 - 无遮罩层（与聊天窗口一致） */}
+        <Dialog.Content
+          className="livechat-compliance-dialog"
+          onInteractOutside={(e) => e.preventDefault()}
+          onEscapeKeyDown={(e) => e.preventDefault()}
+        >
+          {/* Header - 包含关闭按钮（右上角） */}
+          <div className="flex items-center justify-end px-4 pt-4  pb-2 flex-shrink-0 max-md:px-6 max-sm:px-5">
+            <Dialog.Close asChild>
+              <button
+                type="button"
+                className="
+                  w-6 h-6
+                  flex items-center justify-center
+                  border-0 bg-transparent text-gray-500
+                   cursor-pointer
+                "
+                aria-label="关闭"
+              >
+                <svg
+                  width="20"
+                  height="20"
+                  className="text-[#3C3C3B]"
+                  viewBox="0 0 20 20"
+                  fill="none"
+                  stroke="currentColor"
+                  strokeWidth="2"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                >
+                  <line x1="15" y1="5" x2="5" y2="15" />
+                  <line x1="5" y1="5" x2="15" y2="15" />
+                </svg>
+              </button>
+            </Dialog.Close>
+          </div>
+
+          {/* Body - 可滚动内容区域 */}
+          <div className="flex-1 overflow-y-auto px-4 pb-4 max-md:px-6 max-md:pb-6 max-sm:px-5 max-sm:pb-5">
+            {/* 标题 */}
+            <Dialog.Title
+              className="
+                text-[18px] font-bold text-[#080A0F]
+                mb-1 leading-[1.4] tracking-tight
+              "
+            >
+              {config.title}
+            </Dialog.Title>
+
+            {/* 内容 */}
+            <div
+              className="
+                text-[16px] font-bold leading-[1.4] text-[#080A0F]
+                tracking-tight
+                mb-2
+              "
+              dangerouslySetInnerHTML={{ __html: config.content }}
+            />
+
+            {/* 勾选框 */}
+            <label
+              className="
+                flex items-center gap-2 mb-4
+                cursor-pointer select-none
+              "
+              onClick={handleCheckboxLabelClick}
+            >
+              <input
+                type="checkbox"
+                className="absolute opacity-0 w-0 h-0"
+                checked={isChecked}
+                onChange={e => setIsChecked(e.target.checked)}
+              />
+              <span
+                className={`
+                  flex-shrink-0 w-4 h-4 mt-0.5
+                  border-[1px] rounded-[2px] flex items-center justify-center
+                  transition-all duration-200 ease-in-out
+                  ${isChecked ? 'bg-[#080A0F] border-[#080A0F] text-white' : 'bg-white border-[#2A2C32]'}
+                `}
+              >
+                {isChecked && (
+                  <svg
+                    width="12"
+                    height="10"
+                    viewBox="0 0 12 10"
+                    fill="none"
+                    stroke="currentColor"
+                    strokeWidth="2"
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                  >
+                    <polyline points="1.5 5 4.5 8 10.5 2" />
+                  </svg>
+                )}
+              </span>
+              <span
+                className="
+                  flex-1 text-[14px] leading-[1.4] text-[#080A0F]
+                tracking-tight font-bold
+                  [&_a]:underline
+                "
+                dangerouslySetInnerHTML={{ __html: config.checkboxText }}
+              />
+            </label>
+
+            {/* 同意按钮 */}
+            <button
+              type="button"
+              className={`
+                w-full px-5 py-[10px]
+                border-0 rounded-[19px]
+                text-[14px] leading-[1.2] 
+                tracking-tighter font-bold
+                transition-all duration-200 ease-in-out text-white
+                ${isChecked ? 'bg-[#080A0F]  cursor-pointer ' : 'bg-[#767880] cursor-not-allowed'}
+              `}
+              onClick={handleAgree}
+              disabled={!isChecked}
+            >
+              {config.agreeButtonText || 'Agree'}
+            </button>
+          </div>
+        </Dialog.Content>
+      </Dialog.Portal>
+    </Dialog.Root>
+  )
+}