@anker-in/campaign-ui 0.3.3 → 0.3.5

package/src/components/LiveChatWidget/api/chat.ts

@@ -0,0 +1,175 @@
+/**
+ * LiveChat API 层
+ * 处理 SSE 流式通信和 HTTP 请求
+ * 基于 specs/livechat-widget/contracts/*.yaml
+ */
+
+import type { ChatStreamRequest, SSEEvent, NewSessionRequest, NewSessionResponse, ErrorResponse } from '../types'
+import { fetcher } from '../utils/fetcher'
+
+/**
+ * Recaptcha 配置
+ */
+export interface RecaptchaConfig {
+  /**
+   * 是否启用 reCAPTCHA
+   */
+  needRecaptcha?: boolean
+  /**
+   * reCAPTCHA site key
+   */
+  recaptchaSitekey?: string
+  /**
+   * reCAPTCHA action 名称
+   */
+  recaptchaAction?: string
+}
+
+// ============================================================================
+// SSE 流式消息处理 (T006)
+// ============================================================================
+
+/**
+ * 发送消息并接收 SSE 流式响应
+ * @param apiBaseUrl API 基础 URL
+ * @param request 请求参数
+ * @param onEvent SSE 事件回调
+ * @param customHeaders 自定义请求头
+ * @param recaptchaConfig reCAPTCHA 配置
+ */
+export async function sendMessage(
+  apiBaseUrl: string,
+  request: ChatStreamRequest,
+  onEvent: (event: SSEEvent) => void,
+  customHeaders?: Record<string, string>,
+  recaptchaConfig?: RecaptchaConfig
+): Promise<void> {
+  // 使用 fetcher 处理 reCAPTCHA 和自定义 headers
+  const response = await fetcher({
+    url: `${apiBaseUrl}/api/chat/stream`,
+    method: 'POST',
+    headers: {
+      Accept: 'text/event-stream',
+      ...customHeaders,
+    },
+    body: request,
+    needRecaptcha: recaptchaConfig?.needRecaptcha,
+    recaptchaSitekey: recaptchaConfig?.recaptchaSitekey,
+    recaptchaAction: recaptchaConfig?.recaptchaAction || 'send_message',
+  })
+
+  if (!response.ok) {
+    const errorData = await response.json().catch(() => null)
+    const error = new Error(errorData?.message || `HTTP ${response.status}`) as Error & { type?: string }
+    error.type = errorData?.type
+    throw error
+  }
+
+  const reader = response.body?.getReader()
+  if (!reader) {
+    throw new Error('Response body is not readable')
+  }
+
+  const decoder = new TextDecoder()
+  let buffer = ''
+  let currentEvent: string | null = null
+
+  try {
+    while (true) {
+      const { done, value } = await reader.read()
+      if (done) break
+
+      // 解码并追加到缓冲区
+      buffer += decoder.decode(value, { stream: true })
+
+      // 按行分割
+      const lines = buffer.split('\n')
+
+      // 保留最后一个不完整的行
+      buffer = lines.pop() || ''
+
+      for (const line of lines) {
+        const trimmed = line.trim()
+
+        if (trimmed === '') {
+          // 空行表示事件边界，重置当前事件类型
+          currentEvent = null
+          continue
+        }
+
+        if (trimmed.startsWith('event:')) {
+          // 提取事件类型
+          currentEvent = trimmed.substring(6).trim()
+        } else if (trimmed.startsWith('data:')) {
+          // 提取数据并解析 JSON
+          const dataStr = trimmed.substring(5).trim()
+          try {
+            const data = JSON.parse(dataStr)
+            onEvent({
+              event: (currentEvent as any) || 'message',
+              data,
+            })
+          } catch (err) {
+            console.error('[LiveChat API] Failed to parse SSE data:', dataStr, err)
+            onEvent({
+              event: 'error',
+              data: {
+                message: 'Failed to parse SSE data',
+                code: 'PARSE_ERROR',
+              },
+            })
+          }
+        }
+      }
+    }
+  } catch (error) {
+    console.error('[LiveChat API] SSE stream error:', error)
+    throw error
+  } finally {
+    reader.releaseLock()
+  }
+}
+
+// ============================================================================
+// 创建/恢复会话 (T009)
+// ============================================================================
+
+/**
+ * 创建新会话或恢复现有会话
+ *
+ * 使用场景：
+ * 1. 创建新会话：不传 session_id，返回新的 sessionId
+ * 2. 恢复会话：传入 session_id，验证会话有效性并返回历史消息（resumed: true, messages: [...]）
+ *
+ * @param apiBaseUrl API 基础 URL
+ * @param request 请求参数
+ * @param customHeaders 自定义请求头
+ * @param recaptchaConfig reCAPTCHA 配置
+ * @returns 会话信息，可能包含历史消息
+ */
+export async function createNewSession(
+  apiBaseUrl: string,
+  request: NewSessionRequest,
+  customHeaders?: Record<string, string>,
+  recaptchaConfig?: RecaptchaConfig
+): Promise<NewSessionResponse> {
+  // 使用 fetcher 处理 reCAPTCHA 和自定义 headers
+  const response = await fetcher({
+    url: `${apiBaseUrl}/api/chat/new-session`,
+    method: 'POST',
+    headers: customHeaders,
+    body: request,
+    needRecaptcha: recaptchaConfig?.needRecaptcha,
+    recaptchaSitekey: recaptchaConfig?.recaptchaSitekey,
+    recaptchaAction: recaptchaConfig?.recaptchaAction || 'new_session',
+  })
+
+  if (!response.ok) {
+    const errorData = await response.json().catch(() => null)
+    const error = new Error(errorData?.message || `HTTP ${response.status}`) as Error & { type?: string }
+    error.type = errorData?.type
+    throw error
+  }
+
+  return response.json()
+}

package/src/components/LiveChatWidget/components/ChatBubble.tsx

@@ -0,0 +1,152 @@
+/**
+ * 聊天悬浮按钮组件
+ * 显示在页面角落的气泡按钮，点击后打开聊天窗口
+ * 基于 specs/livechat-widget/plan.md 的气泡按钮设计
+ */
+
+import React from 'react'
+import type { BubblePosition } from '../types'
+
+export interface ChatBubbleProps {
+  /**
+   * 气泡按钮位置
+   * @default { bottom: "1.5rem", right: "1.5rem" }
+   */
+  position?: BubblePosition
+
+  /**
+   * 点击按钮的回调
+   */
+  onClick?: () => void
+
+  /**
+   * 自定义图标
+   */
+  icon?: React.ReactNode
+
+  /**
+   * 自定义图标图片 URL
+   * 如果提供，将使用图片替代默认的 SVG 图标
+   */
+  iconImageUrl?: string
+
+  /**
+   * 是否显示气泡
+   * @default true
+   */
+  visible?: boolean
+
+  /**
+   * 自定义样式类名
+   */
+  className?: string
+}
+
+/**
+ * 获取气泡按钮的位置样式
+ * 如果没有传入 position，使用默认位置（右下角）
+ */
+function getPositionStyles(position?: BubblePosition): React.CSSProperties {
+  // 默认位置：右下角
+  const defaultPosition: React.CSSProperties = {
+    bottom: '1.5rem',
+    right: '1.5rem',
+  }
+
+  // 如果传入了自定义位置，使用自定义位置
+  return position ? (position as React.CSSProperties) : defaultPosition
+}
+
+/**
+ * 默认聊天图标 (简单的消息气泡 SVG)
+ */
+const DefaultChatIcon: React.FC = () => (
+  <svg
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="2"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+  >
+    <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" />
+  </svg>
+)
+
+/**
+ * 聊天悬浮按钮组件
+ *
+ * 功能：
+ * - 可配置位置（预设或自定义）
+ * - 支持自定义图标（React 节点或图片 URL）
+ * - 悬停和点击动画效果
+ *
+ * 样式：
+ * - 使用 livechat.css 中定义的 CSS 变量
+ * - 悬停时放大 1.05 倍
+ * - 点击时缩小 0.95 倍
+ *
+ * @example
+ * ```tsx
+ * // 使用默认图标
+ * <ChatBubble onClick={() => setIsOpen(true)} />
+ *
+ * // 使用自定义位置
+ * <ChatBubble
+ *   position={{ bottom: "20px", right: "30px" }}
+ *   onClick={() => setIsOpen(true)}
+ * />
+ *
+ * // 使用图片作为图标
+ * <ChatBubble
+ *   iconImageUrl="https://example.com/icon.png"
+ *   onClick={() => setIsOpen(true)}
+ * />
+ * ```
+ */
+export const ChatBubble: React.FC<ChatBubbleProps> = ({
+  position,
+  onClick,
+  icon,
+  iconImageUrl,
+  visible = true,
+  className = '',
+}) => {
+  if (!visible) return null
+
+  const positionStyles = getPositionStyles(position)
+
+  // 渲染图标内容
+  const renderIcon = () => {
+    // 优先使用图片 URL
+    if (iconImageUrl) {
+      return (
+        <img src={iconImageUrl} alt="Chat" className="size-full object-cover" style={{ borderRadius: 'inherit' }} />
+      )
+    }
+    // 其次使用自定义图标
+    if (icon) {
+      return icon
+    }
+    // 最后使用默认图标
+    return <DefaultChatIcon />
+  }
+
+  return (
+    <button
+      type="button"
+      className={`livechat-bubble ${className}`}
+      style={{
+        ...positionStyles,
+        // 如果传入了图片，移除默认背景色
+        ...(iconImageUrl && { background: 'transparent' }),
+      }}
+      onClick={onClick}
+      aria-label="打开聊天窗口"
+    >
+      <div className="flex size-full items-center justify-center">{renderIcon()}</div>
+    </button>
+  )
+}

package/src/components/LiveChatWidget/components/ChatHeader.tsx

@@ -0,0 +1,150 @@
+/**
+ * 聊天窗口头部组件
+ * 显示标题、Logo、关闭按钮和新会话按钮
+ * 基于 specs/livechat-widget/plan.md 的头部设计
+ */
+
+import React from 'react'
+
+export interface ChatHeaderProps {
+  /**
+   * 头部标题
+   */
+  title?: string
+
+  /**
+   * Logo URL
+   */
+  logoUrl?: string
+
+  /**
+   * 关闭按钮点击回调
+   */
+  onClose?: () => void
+
+  /**
+   * 新会话按钮点击回调
+   */
+  onNewSession?: () => void
+
+  /**
+   * 是否显示新会话按钮
+   * @default true
+   */
+  showNewSessionButton?: boolean
+
+  /**
+   * 自定义样式类名
+   */
+  className?: string
+}
+
+/**
+ * 默认关闭图标 (X)
+ */
+const CloseIcon: React.FC = () => (
+  <svg
+    width="20"
+    height="20"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="2"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+  >
+    <line x1="18" y1="6" x2="6" y2="18" />
+    <line x1="6" y1="6" x2="18" y2="18" />
+  </svg>
+)
+
+/**
+ * 新会话图标 (加号)
+ */
+const NewSessionIcon: React.FC = () => (
+  <svg
+    width="18"
+    height="18"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="2"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+  >
+    <line x1="12" y1="5" x2="12" y2="19" />
+    <line x1="5" y1="12" x2="19" y2="12" />
+  </svg>
+)
+
+/**
+ * 聊天窗口头部组件
+ *
+ * 功能：
+ * - 显示标题和 Logo
+ * - 关闭按钮（移动端隐藏，桌面端显示）
+ * - 新会话按钮（清空当前对话）
+ *
+ * 布局：
+ * - Logo (可选) + 标题 | 新会话按钮 + 关闭按钮
+ * - 固定高度 64px
+ * - 边框分隔下方内容
+ *
+ * @example
+ * ```tsx
+ * <ChatHeader
+ *   title="AI 助手"
+ *   logoUrl="/logo.png"
+ *   onClose={() => setIsOpen(false)}
+ *   onNewSession={() => createNewSession()}
+ * />
+ * ```
+ */
+export const ChatHeader: React.FC<ChatHeaderProps> = ({
+  title = '',
+  logoUrl,
+  onClose,
+  onNewSession,
+  showNewSessionButton = true,
+  className = '',
+}) => {
+  return (
+    <div
+      className={`flex items-center justify-between border-b border-[#DADCE0] bg-white px-4 pb-3 pt-0 tablet:pt-4 ${className}`}
+    >
+      {/* 左侧：Logo + 标题 */}
+      <div className="flex items-center gap-3">
+        {logoUrl && <img src={logoUrl} alt="Logo" className="size-8 rounded-full object-cover" />}
+        <h2 className="text-lg font-semibold text-gray-900">{title}</h2>
+      </div>
+
+      {/* 右侧：新会话按钮 + 关闭按钮 */}
+      <div className="flex items-center gap-2">
+        {/* 新会话按钮 */}
+        {showNewSessionButton && onNewSession && (
+          <button
+            type="button"
+            onClick={onNewSession}
+            className="rounded-lg p-2 text-gray-600"
+            aria-label="开始新会话"
+            title="开始新会话"
+          >
+            <NewSessionIcon />
+          </button>
+        )}
+
+        {/* 关闭按钮 */}
+        {onClose && (
+          <button
+            type="button"
+            onClick={onClose}
+            className="tablet:block  rounded-lg text-gray-600"
+            aria-label="Close chat"
+          >
+            <CloseIcon />
+          </button>
+        )}
+      </div>
+    </div>
+  )
+}