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

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

@@ -0,0 +1,136 @@
+/**
+ * LiveChat API 层
+ * 处理 SSE 流式通信和 HTTP 请求
+ * 基于 specs/livechat-widget/contracts/*.yaml
+ */
+
+import type { ChatStreamRequest, SSEEvent, NewSessionRequest, NewSessionResponse, ErrorResponse } from '../types'
+
+// ============================================================================
+// SSE 流式消息处理 (T006)
+// ============================================================================
+
+/**
+ * 发送消息并接收 SSE 流式响应
+ * @param apiBaseUrl API 基础 URL
+ * @param request 请求参数
+ * @param onEvent SSE 事件回调
+ */
+export async function sendMessage(
+  apiBaseUrl: string,
+  request: ChatStreamRequest,
+  onEvent: (event: SSEEvent) => void
+): Promise<void> {
+  const response = await fetch(`${apiBaseUrl}/api/chat/stream`, {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+      Accept: 'text/event-stream',
+    },
+    body: JSON.stringify(request),
+  })
+
+  if (!response.ok) {
+    throw new Error(`HTTP ${response.status}: ${response.statusText}`)
+  }
+
+  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 请求参数
+ * @returns 会话信息，可能包含历史消息
+ */
+export async function createNewSession(apiBaseUrl: string, request: NewSessionRequest): Promise<NewSessionResponse> {
+  const response = await fetch(`${apiBaseUrl}/api/chat/new-session`, {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    body: JSON.stringify(request),
+  })
+
+  if (!response.ok) {
+    const errorData: ErrorResponse = await response.json().catch(() => ({
+      success: false,
+      error: `HTTP ${response.status}: ${response.statusText}`,
+      code: 'HTTP_ERROR',
+    }))
+    throw new Error(errorData.error || 'Failed to create session')
+  }
+
+  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,151 @@
+/**
+ * 聊天窗口头部组件
+ * 显示标题、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 = 'AI 助手',
+  logoUrl,
+  onClose,
+  onNewSession,
+  showNewSessionButton = true,
+  className = '',
+}) => {
+  return (
+    <div
+      className={`flex items-center justify-between border-b border-[#DADCE0] bg-white px-4 py-3 ${className}`}
+      style={{ minHeight: '48px' }}
+    >
+      {/* 左侧：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="关闭聊天窗口"
+          >
+            <CloseIcon />
+          </button>
+        )}
+      </div>
+    </div>
+  )
+}

package/src/components/LiveChatWidget/components/ChatInput.tsx

@@ -0,0 +1,216 @@
+/**
+ * 聊天输入框组件
+ * 提供文本输入和发送按钮
+ * 基于 specs/livechat-widget/plan.md 的输入框设计
+ */
+
+import React, { useRef, useEffect } from 'react'
+
+export interface ChatInputProps {
+  /**
+   * 输入框当前值
+   */
+  value: string
+
+  /**
+   * 值变化回调
+   */
+  onChange: (value: string) => void
+
+  /**
+   * 发送消息回调
+   */
+  onSend: () => void
+
+  /**
+   * 占位符文本
+   * @default "输入消息..."
+   */
+  placeholder?: string
+
+  /**
+   * 是否禁用输入
+   * @default false
+   */
+  disabled?: boolean
+
+  /**
+   * 是否自动聚焦
+   * @default false
+   */
+  autoFocus?: boolean
+
+  /**
+   * 最大字符数
+   * @default 5000
+   */
+  maxLength?: number
+
+  /**
+   * 自定义样式类名
+   */
+  className?: string
+}
+
+/**
+ * 发送图标 (向上箭头)
+ */
+const SendIcon: React.FC = () => (
+  <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M10.2069 15.6997V4.69971" stroke="white" stroke-width="2" stroke-linecap="round" />
+    <path
+      d="M15.3995 8.50341L10.9506 4.05446C10.534 3.6379 9.85866 3.63791 9.4421 4.05446L5.00005 8.49651"
+      stroke="white"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+  </svg>
+)
+
+/**
+ * 聊天输入框组件
+ *
+ * 功能：
+ * - 多行文本输入（自动增长）
+ * - Enter 发送，Shift+Enter 换行
+ * - 字符数限制（5000）
+ * - 禁用状态（发送中）
+ * - 发送按钮（空内容时禁用）
+ *
+ * 样式：
+ * - 固定底部
+ * - 边框分隔上方内容
+ * - 自适应高度（1-5 行）
+ *
+ * @example
+ * ```tsx
+ * <ChatInput
+ *   value={inputValue}
+ *   onChange={setInputValue}
+ *   onSend={handleSend}
+ *   disabled={isStreaming}
+ * />
+ * ```
+ */
+export const ChatInput: React.FC<ChatInputProps> = ({
+  value,
+  onChange,
+  onSend,
+  placeholder = '',
+  disabled = false,
+  autoFocus = false,
+  maxLength = 5000,
+  className = '',
+}) => {
+  const textareaRef = useRef<HTMLTextAreaElement>(null)
+
+  /**
+   * 自动调整 textarea 高度
+   */
+  useEffect(() => {
+    const textarea = textareaRef.current
+    if (!textarea) return
+
+    // 重置高度以获取正确的 scrollHeight
+    textarea.style.height = 'auto'
+
+    // 设置高度，最大 5 行（约 120px）
+    const maxHeight = 120
+    const newHeight = Math.min(textarea.scrollHeight, maxHeight)
+    textarea.style.height = `${newHeight}px`
+  }, [value])
+
+  /**
+   * 处理键盘事件
+   * Enter 发送，Shift+Enter 换行
+   */
+  const handleKeyDown = (event: React.KeyboardEvent<HTMLTextAreaElement>) => {
+    if (event.key === 'Enter' && !event.shiftKey) {
+      event.preventDefault()
+      if (value.trim() && !disabled) {
+        onSend()
+      }
+    }
+  }
+
+  /**
+   * 处理输入变化
+   */
+  const handleChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {
+    const newValue = event.target.value
+
+    // 字符数限制
+    if (newValue.length <= maxLength) {
+      onChange(newValue)
+    }
+  }
+
+  /**
+   * 处理发送按钮点击
+   */
+  const handleSendClick = () => {
+    if (value.trim() && !disabled) {
+      onSend()
+    }
+  }
+
+  const canSend = value.trim().length > 0 && !disabled
+
+  return (
+    <div className={`flex items-end gap-2 bg-white px-4 py-3 ${className}`}>
+      {/* 输入框容器 - 带渐变边框 */}
+      <div
+        className="flex flex-1 items-center gap-2 rounded-2xl"
+        style={{
+          background: 'linear-gradient(to right, #7687F3, #7687F3, #4DA8F5, #A3DFCE)',
+          padding: '2px',
+        }}
+      >
+        {/* 内部白色背景 */}
+        <div className="flex flex-1 items-center gap-2 bg-white px-3 py-2" style={{ borderRadius: '14px' }}>
+          {/* 文本输入框 */}
+          <textarea
+            ref={textareaRef}
+            value={value}
+            onChange={handleChange}
+            onKeyDown={handleKeyDown}
+            placeholder={placeholder}
+            disabled={disabled}
+            autoFocus={autoFocus}
+            rows={1}
+            className="flex-1 resize-none bg-transparent text-sm text-gray-900 outline-none placeholder:text-gray-400 disabled:cursor-not-allowed disabled:opacity-50"
+            style={{
+              resize: 'none',
+            }}
+          />
+
+          {/* 字符数提示 (接近上限时显示) */}
+          {value.length > maxLength * 0.8 && (
+            <span className="text-xs text-gray-400">
+              {value.length}/{maxLength}
+            </span>
+          )}
+
+          {/* 发送按钮 */}
+          <button
+            type="button"
+            onClick={handleSendClick}
+            disabled={!canSend}
+            className={`shrink-0 rounded-full p-2 transition-all ${canSend ? ' active:scale-95' : 'cursor-not-allowed '}`}
+            style={
+              canSend
+                ? {
+                    background: 'linear-gradient(to bottom, #A3DFCE, #4DA8F5, #7687F3)',
+                  }
+                : { background: '#BEBEBE' }
+            }
+            aria-label="发送消息"
+          >
+            <SendIcon />
+          </button>
+        </div>
+      </div>
+    </div>
+  )
+}