@anker-in/campaign-ui 0.3.2 → 0.3.4

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

@@ -0,0 +1,253 @@
+/**
+ * 聊天输入框组件
+ * 提供文本输入和发送按钮
+ * 基于 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
+
+  /**
+   * 底部提示文本
+   * 不传入则不显示
+   */
+  bottomTips?: 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,
+  bottomTips,
+  className = '',
+}) => {
+  const textareaRef = useRef<HTMLTextAreaElement>(null)
+  // 跟踪输入法状态（是否正在使用拼音输入等）
+  const isComposingRef = useRef(false)
+
+  /**
+   * 自动调整 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])
+
+  /**
+   * 处理输入法开始
+   */
+  const handleCompositionStart = () => {
+    isComposingRef.current = true
+  }
+
+  /**
+   * 处理输入法结束
+   */
+  const handleCompositionEnd = () => {
+    isComposingRef.current = false
+  }
+
+  /**
+   * 处理键盘事件
+   * Enter 发送，Shift+Enter 换行
+   * 注意：输入法激活时（如拼音输入中），回车键不应发送消息
+   */
+  const handleKeyDown = (event: React.KeyboardEvent<HTMLTextAreaElement>) => {
+    if (event.key === 'Enter' && !event.shiftKey) {
+      // 如果正在使用输入法（如拼音输入），则不发送消息
+      // 让输入法先完成字符选择
+      if (isComposingRef.current) {
+        return
+      }
+
+      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 flex-col gap-2 bg-white px-4 py-4 ${className}`}>
+      {/* 输入框容器 - 带渐变边框 */}
+      <div
+        className="flex 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}
+            onCompositionStart={handleCompositionStart}
+            onCompositionEnd={handleCompositionEnd}
+            placeholder={placeholder}
+            disabled={disabled}
+            autoFocus={autoFocus}
+            rows={1}
+            className="flex-1 resize-none bg-transparent font-bold 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="Send message"
+          >
+            <SendIcon />
+          </button>
+        </div>
+      </div>
+      {bottomTips && (
+        <p className="px-3 font-bold text-[12px] text-[#767880] tracking-tight leading-[1.4]">
+          {bottomTips}
+        </p>
+      )}
+    </div>
+  )
+}

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>
+  )
+}