@anker-in/campaign-ui 0.3.2 → 0.3.4

package/src/components/chat/markdown.tsx

@@ -5,7 +5,7 @@ import remarkMath from 'remark-math'
 
 const MemoizedReactMarkdown: FC<Options> = memo(
   ReactMarkdown,
-  (prevProps, nextProps) => prevProps.children === nextProps.children && prevProps.className === nextProps.className
+  (prevProps, nextProps) => prevProps.children === nextProps.children
 )
 
 type MarkdownProps = {

package/src/components/credits/creditsBanner/index.tsx

@@ -80,25 +80,25 @@ export function CreditsBanner({ copy, id }: { copy: CreditsBannerCopy; id?: stri
           ></div>
         )}
 
-        <Container className="l-tablet:h-auto !absolute inset-0 mx-auto grid h-full" asChild>
+        <Container className="l:h-auto !absolute inset-0 mx-auto grid h-full" asChild>
           <div className="grid grid-cols-12">
-            <div className="l-tablet:col-span-12 l-tablet:justify-start l-tablet:truncate l-tablet:pt-[32px] col-span-5 flex h-full flex-col justify-center text-[#1F2021]">
+            <div className="l:col-span-12 l:justify-start l:truncate l:pt-[32px] col-span-5 flex h-full flex-col justify-center text-[#1F2021]">
               <Heading
                 as="h1"
-                className="text-[48px] font-bold xl-xxl:text-[40px] l-tablet:text-[32px]"
+                className="text-[48px] font-bold xl-xxl:text-[40px] l:text-[32px]"
                 html={isLogin ? copy.login.title?.replace('$name', displayName || '') : copy.unLogin.title}
               ></Heading>
 
               <Text
                 size="3"
-                className="l-tablet:mt-[4px] l-xxl:text-[14px] mt-[16px]"
+                className="l:mt-[4px] l-xxl:text-[14px] mt-[16px]"
                 html={isLogin ? copy.login.description : copy.unLogin.description}
               ></Text>
 
               {!isLogin && (
                 <div
                   className={classNames(
-                    'mt-[32px] grid w-fit grid-flow-col gap-[12px] l-tablet:mt-[24px]',
+                    'mt-[32px] grid w-fit grid-flow-col gap-[12px] l:mt-[24px]',
                     isLogin && 'hidden'
                   )}
                 >

package/src/components/index.ts

@@ -12,3 +12,26 @@ export {
 export * from './credits/index.js'
 
 export * from './registration/index.js'
+
+
+
+// LiveChatWidget 导出
+export { LiveChatWidget } from './LiveChatWidget/index.js'
+export type {
+  LiveChatWidgetProps,
+  Message,
+  MessageContent,
+  MessageRole,
+  MessageContentType,
+  MessageMetadata,
+  MessageRenderer,
+  QuickReply,
+  ProductCardContent,
+  ProductListContent,
+  PolicyContent,
+  QuickRepliesContent,
+  ThinkingContent,
+  ErrorContent,
+  SSEEvent,
+  ChatStreamRequest,
+} from './LiveChatWidget/index.js'

package/src/stories/LiveChatWidget.stories.tsx

@@ -0,0 +1,322 @@
+/**
+ * LiveChatWidget Storybook Stories
+ * 展示 LiveChat 组件的各种使用场景和配置
+ */
+
+import type { Meta, StoryObj } from '@storybook/react'
+import { LiveChatWidget } from '../components/LiveChatWidget'
+import type { MessageRenderer, MessageContent } from '../components/LiveChatWidget'
+import '../styles/livechat.css'
+
+const meta: Meta<typeof LiveChatWidget> = {
+  title: 'Campaign/LiveChatWidget',
+  component: LiveChatWidget,
+  parameters: {
+    layout: 'fullscreen',
+    docs: {
+      story: {
+        inline: false,
+        iframeHeight: 500,
+      },
+      description: {
+        component: `
+# LiveChat 聊天组件
+
+可复用的气泡弹窗聊天组件，支持 SSE 流式消息、自定义渲染器和多种消息类型。
+
+## 功能特性
+
+- 🎈 **气泡弹窗**: 可自定义位置的悬浮气泡按钮
+- 💬 **流式消息**: 基于 SSE 的实时流式响应
+- 📦 **多种消息类型**: 文本、商品卡片、商品列表、政策、快捷回复等
+- 🎨 **可定制**: 支持自定义品牌颜色、Logo、渲染器
+- 📱 **响应式**: 移动端全屏，桌面端固定尺寸
+- 💾 **会话管理**: 自动管理 userId 和 sessionId
+- 🔒 **安全防护**: 内置 XSS 防护和输入验证
+
+## 基础用法
+
+\`\`\`tsx
+import { LiveChatWidget } from '@anker-in/campaign-ui'
+import '@anker-in/campaign-ui/livechat.css'
+
+function App() {
+  return (
+    <LiveChatWidget
+      apiBaseUrl="https://beta-api-livechat.anker.com"
+      site="www.eufy.com"
+      channel_code="web_homepage"
+      welcomeMessage="你好！我是 AI 助手"
+    />
+  )
+}
+\`\`\`
+
+## 自定义渲染器
+
+\`\`\`tsx
+const customRenderers = {
+  video: {
+    render: (content) => (
+      <video src={content.url} controls className="w-full rounded" />
+    )
+  }
+}
+
+<LiveChatWidget
+  apiBaseUrl="..."
+  site="..."
+  customRenderers={customRenderers}
+/>
+\`\`\`
+        `,
+      },
+    },
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    apiBaseUrl: {
+      control: 'text',
+      description: 'API 基础 URL',
+    },
+    headers: {
+      control: 'object',
+      description: '自定义请求头，将在所有 API 请求中添加',
+      table: {
+        defaultValue: { summary: 'undefined' },
+      },
+    },
+    recaptchaSitekey: {
+      control: 'text',
+      description: 'Google reCAPTCHA v3 site key，提供此参数将自动启用 reCAPTCHA v3 验证',
+      table: {
+        defaultValue: { summary: 'undefined' },
+      },
+    },
+    recaptchaAction: {
+      control: 'text',
+      description: 'reCAPTCHA action 名称，用于区分不同的验证场景',
+      table: {
+        defaultValue: { summary: '"activity"' },
+      },
+    },
+    site: {
+      control: 'text',
+      description: 'Shopify 店铺 URL',
+    },
+    channelCode: {
+      control: 'text',
+      description: '渠道编码，用于标识来源渠道',
+      table: {
+        defaultValue: { summary: 'undefined' },
+      },
+    },
+    welcomeMessage: {
+      control: 'text',
+      description: '欢迎消息',
+      table: {
+        defaultValue: { summary: '你好！我是 AI 助手，有什么可以帮助你的吗？' },
+      },
+    },
+    logoUrl: {
+      control: 'text',
+      description: 'Logo URL',
+    },
+    position: {
+      control: 'object',
+      description: '气泡按钮位置对象',
+      table: {
+        defaultValue: { summary: '{ bottom: "1.5rem", right: "1.5rem" }' },
+      },
+    },
+  },
+  args: {
+    apiBaseUrl: 'http://172.16.38.183:3003',
+    site: 'www.eufy.com',
+    loginUserId: 'test_test',
+    welcomeMessage: '你好！我是 AI 助手，有什么可以帮助你的吗？',
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof LiveChatWidget>
+
+/**
+ * 默认配置 - 展示所有功能
+ */
+export const Default: Story = {
+  args: {
+    // 基础配置
+    loginUserId: 'test_test',
+    apiBaseUrl: 'http://172.16.38.183:3003',
+    site: 'beta.eufy.com',
+    channelCode: 'dtc',
+    title: 'eufy AI Assistant',
+    cartId: 'gid://shopify/Cart/hWN7wB3Pa12gh78d8hPOAUBI?key=0e73db1d3fb5ac21da19099c45033253',
+    accessToken: '47b1aa2c0797043f9baba39388029d70',
+
+    // 自定义位置
+    position: { bottom: '24px', right: '30px' },
+
+    // 欢迎消息
+    welcomeMessage: `Welcome to eufy AI Assistant!
+
+I can help you with:
+- Product recommendations
+- Order tracking
+- FAQs and support
+
+How can I assist you today?`,
+
+    // 快捷回复
+    quickReplies: [
+      { id: '1', label: 'Product Info', value: 'Tell me about your products', icon: '📦' },
+      { id: '2', label: 'Track Order', value: 'I want to track my order', icon: '🚚' },
+      { id: '3', label: 'Support', value: 'I need help with my device', icon: '🔧' },
+      { id: '4', label: 'Recommendations', value: 'Recommend products for me', icon: '⭐' },
+    ],
+
+    // 法规协议弹窗
+    complianceConfig: {
+      title: "Hi! I'm your eufy AI assistant.",
+      content: "AI-generated responses can be inaccurate. Please verify important info. Do not input sensitive personal data.",
+      checkboxText: 'By starting to use "Live Chat", you agree to Anker\'s <a href="https://www.anker.com/pages/privacy-policy" target="_blank" rel="noopener noreferrer" style="text-decoration: underline;">LIVE CHAT PRIVACY NOTICE</a>.',
+      agreeButtonText: "Agree"
+    },
+
+    // reCAPTCHA 配置（取消注释以启用）
+    // recaptchaSitekey: '6LfS4J4pAAAAACX1e_WrxutmxxzCK7FU4WzVqL14',
+    recaptchaAction: 'livechat',
+
+    // 显示新会话按钮
+    showNewSessionButton: true,
+
+    // 自定义文案
+    commonText: {
+      learnMore: 'Learn More',
+      total: 'Total',
+    },
+
+    // 自定义消息渲染器
+    customRenderers: {
+      video: {
+        render: (content: MessageContent) => {
+          const videoContent = content as any
+          return (
+            <div className="w-full">
+              <video src={videoContent.url} controls className="w-full rounded-lg" poster={videoContent.poster}>
+                Your browser does not support video playback
+              </video>
+              {videoContent.title && <p className="mt-2 text-sm text-gray-600">{videoContent.title}</p>}
+            </div>
+          )
+        },
+      } as MessageRenderer,
+      image_gallery: {
+        render: (content: MessageContent) => {
+          const galleryContent = content as any
+          const images = galleryContent.images || []
+          return (
+            <div className="grid grid-cols-2 gap-2">
+              {images.map((image: any, index: number) => (
+                <div key={index} className="relative aspect-square">
+                  <img
+                    src={image.url}
+                    alt={image.alt || `Image ${index + 1}`}
+                    className="size-full rounded-lg object-cover"
+                  />
+                </div>
+              ))}
+            </div>
+          )
+        },
+      } as MessageRenderer,
+    },
+
+    // 自定义产品卡片渲染
+    productCardRender: (product, productHandle) => {
+      // product 可能为 undefined，此时可用 productHandle 查询
+      if (!product) {
+        return (
+          <div style={{ padding: '16px', border: '1px dashed #ccc', borderRadius: '8px', textAlign: 'center' }}>
+            <p>Product loading... (handle: {productHandle})</p>
+          </div>
+        )
+      }
+
+      const imageUrl = product?.featured_image || ''
+      const title = product?.title || ''
+      const description = product?.description || ''
+      const averageRating = product?.average_rating
+
+      return (
+        <div
+          style={{
+            border: '2px solid #4CAF50',
+            borderRadius: '16px',
+            padding: '16px',
+            margin: '12px 0',
+            backgroundColor: '#f0f9ff',
+            boxShadow: '0 4px 12px rgba(76, 175, 80, 0.15)',
+          }}
+        >
+          <div style={{ display: 'flex', gap: '12px', alignItems: 'center' }}>
+            {imageUrl && (
+              <img
+                src={imageUrl}
+                alt={title}
+                style={{ width: '60px', height: '60px', borderRadius: '8px', objectFit: 'cover' }}
+              />
+            )}
+            <div style={{ flex: 1 }}>
+              <h4 style={{ margin: '0 0 4px 0', fontSize: '16px', fontWeight: 'bold' }}>{title}</h4>
+              {description && (
+                <p style={{ margin: 0, fontSize: '12px', color: '#666', lineHeight: 1.4 }}>
+                  {description.slice(0, 80)}...
+                </p>
+              )}
+              {averageRating && (
+                <span style={{ fontSize: '12px', color: '#FFB800' }}>Rating: {averageRating.toFixed(1)}</span>
+              )}
+            </div>
+            <button
+              style={{
+                padding: '8px 16px',
+                backgroundColor: '#4CAF50',
+                color: 'white',
+                borderRadius: '8px',
+                border: 'none',
+                cursor: 'pointer',
+              }}
+              onClick={() => console.log('View product:', productHandle, product)}
+            >
+              View
+            </button>
+          </div>
+        </div>
+      )
+    },
+  },
+
+  render: args => (
+    <LiveChatWidget
+      {...args}
+      // 所有事件回调
+      onOpen={() => console.log('[LiveChat] Chat opened')}
+      onClose={() => console.log('[LiveChat] Chat closed')}
+      onMessageSend={(message: string) => console.log('[LiveChat] Message sent:', message)}
+      onError={(error: Error) => console.error('[LiveChat] Error:', error)}
+      onTextMessage={() => console.log('[LiveChat] AI text message received')}
+      onProductList={() => console.log('[LiveChat] Product list received')}
+      onPromotionList={() => console.log('[LiveChat] Promotion list received')}
+      onAddToCart={(product: any) => {
+        console.log('[LiveChat] Add to cart:', product)
+        alert(`Added "${product.title}" to cart!`)
+      }}
+      onCart={(cartId: string, checkoutUrl?: string) => {
+        console.log('[LiveChat] Cart clicked:', { cartId, checkoutUrl })
+        alert(`Cart ID: ${cartId}`)
+      }}
+    />
+  ),
+}

package/src/styles/livechat.css

@@ -0,0 +1,317 @@
+/**
+ * LiveChat Widget Styles
+ *
+ * 这个文件包含 LiveChat 组件的基础样式
+ * 使用 CSS 变量支持主题定制
+ */
+
+:root {
+  /* 品牌颜色 */
+  --livechat-primary: #005D8E;
+  --livechat-primary-hover: #005D8E;
+  --livechat-background: #ffffff;
+  --livechat-text: #111827;
+  --livechat-text-secondary: #6b7280;
+  --livechat-border: #e5e7eb;
+
+  /* 消息颜色 */
+  --livechat-user-message-bg: #f3f4f6;
+  --livechat-assistant-message-bg: #ffffff;
+  --livechat-thinking-bg: #fef3c7;
+  --livechat-error-bg: #fee2e2;
+
+  /* 尺寸 */
+  --livechat-bubble-size: 48px;
+  --livechat-window-width: 390px;
+  --livechat-window-height: 80%;
+  --livechat-border-radius: 1rem;
+
+  /* 阴影 */
+  --livechat-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+  --livechat-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1);
+  --livechat-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1);
+  --livechat-shadow-xl: 0 0 24px rgba(0, 0, 0, 0.15);
+}
+
+/* 气泡按钮基础样式 */
+.livechat-bubble {
+  position: fixed;
+  width: var(--livechat-bubble-size);
+  height: var(--livechat-bubble-size);
+  border-radius: 50%;
+  background: var(--livechat-primary);
+  color: white;
+  box-shadow: var(--livechat-shadow-xl);
+  transition: all 0.2s ease-in-out;
+  z-index: 9999;
+}
+
+.livechat-bubble:hover {
+  background: var(--livechat-primary-hover);
+  transform: scale(1.05);
+}
+
+.livechat-bubble:active {
+  transform: scale(0.95);
+}
+
+/* 移动端固定底部样式 */
+@media (max-width: 767px) {
+  .livechat-window {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    width: 100vw;
+    height: var(--livechat-mobile-height, 680px); /* 默认高度680px，可通过拖拽调整（最小30%，最大80%） */
+    max-height: 80%;
+    border-radius: 16px 16px 0 0; /* 上方圆角 */
+    box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
+  }
+}
+
+/* 平板及以上固定尺寸弹窗样式 */
+@media (min-width: 768px) {
+  .livechat-window {
+    position: fixed;
+    bottom: 1rem;
+    right: 1rem;
+    width: var(--livechat-window-width);
+    height: 70vh;
+    border-radius: var(--livechat-border-radius);
+    box-shadow: var(--livechat-shadow-xl);
+  }
+}
+
+/* 大屏幕固定高度 */
+@media (min-width: 1920px) {
+  .livechat-window {
+    height: 720px;
+  }
+}
+
+/* 聊天窗口动画 */
+.livechat-window-enter {
+  animation: livechat-slide-in 0.3s ease-out;
+}
+
+.livechat-window-exit {
+  animation: livechat-slide-out 0.3s ease-in;
+}
+
+@keyframes livechat-slide-in {
+  from {
+    opacity: 0;
+    transform: translateY(1rem);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes livechat-slide-out {
+  from {
+    opacity: 1;
+    transform: translateY(0);
+  }
+  to {
+    opacity: 0;
+    transform: translateY(1rem);
+  }
+}
+
+/* 消息列表滚动样式 */
+.livechat-message-list {
+  scrollbar-width: thin;
+  scrollbar-color: var(--livechat-border) transparent;
+}
+
+.livechat-message-list::-webkit-scrollbar {
+  width: 6px;
+}
+
+.livechat-message-list::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.livechat-message-list::-webkit-scrollbar-thumb {
+  background: var(--livechat-border);
+  border-radius: 3px;
+}
+
+.livechat-message-list::-webkit-scrollbar-thumb:hover {
+  background: var(--livechat-text-secondary);
+}
+
+/* 思考状态动画 */
+.livechat-thinking-dots {
+  display: inline-flex;
+  gap: 0.25rem;
+}
+
+.livechat-thinking-dots span {
+  width: 0.5rem;
+  height: 0.5rem;
+  border-radius: 50%;
+  animation: livechat-thinking 1.4s infinite ease-in-out;
+}
+
+.livechat-thinking-dots span:nth-child(1) {
+  animation-delay: -0.32s;
+}
+
+.livechat-thinking-dots span:nth-child(2) {
+  animation-delay: -0.16s;
+}
+
+@keyframes livechat-thinking {
+  0%, 80%, 100% {
+    transform: scale(0);
+    opacity: 0.5;
+  }
+  40% {
+    transform: scale(1);
+    opacity: 1;
+  }
+}
+
+/* 商品卡片基础样式 */
+.livechat-product-card {
+  border: 1px solid var(--livechat-border);
+  border-radius: 0.5rem;
+  overflow: hidden;
+  transition: all 0.2s ease-in-out;
+}
+
+.livechat-product-card:hover {
+  box-shadow: var(--livechat-shadow-md);
+  transform: translateY(-2px);
+}
+
+/* 产品列表横向滚动样式 */
+.livechat-product-scroll {
+  scrollbar-width: thin;
+  scrollbar-color: var(--livechat-border) transparent;
+}
+
+.livechat-product-scroll::-webkit-scrollbar {
+  height: 8px;
+}
+
+.livechat-product-scroll::-webkit-scrollbar-track {
+  background: var(--livechat-user-message-bg);
+  border-radius: 4px;
+}
+
+.livechat-product-scroll::-webkit-scrollbar-thumb {
+  background: var(--livechat-border);
+  border-radius: 4px;
+}
+
+.livechat-product-scroll::-webkit-scrollbar-thumb:hover {
+  background: var(--livechat-text-secondary);
+}
+
+/* 快捷回复按钮样式 */
+.livechat-quick-reply-button {
+  background-color: #EAEAEC;
+  color: #1D1D1F;
+  border: none;
+  border-radius: 19px;
+  transition: all 0.2s ease-in-out;
+}
+
+.livechat-quick-reply-button:hover {
+  background-color: #005D8E;
+  color: #ffffff;
+}
+
+/* Markdown 内容样式 */
+.livechat-markdown {
+  line-height: 1.4;
+  font-weight: 700;
+}
+
+.livechat-markdown ul,
+.livechat-markdown ol {
+  margin-left: 1.5rem;
+}
+
+.livechat-markdown li {
+  margin-bottom: 0.25rem;
+}
+
+.livechat-markdown a {
+  color: var(--livechat-primary);
+  text-decoration: underline;
+}
+
+.livechat-markdown a:hover {
+  color: var(--livechat-primary-hover);
+}
+
+.livechat-markdown code {
+  background: var(--livechat-user-message-bg);
+  padding: 0.125rem 0.25rem;
+  border-radius: 0.25rem;
+  font-family: ui-monospace, monospace;
+  font-size: 0.875em;
+}
+
+.livechat-markdown strong {
+  font-weight: 700;
+}
+
+.livechat-markdown em {
+  font-style: italic;
+}
+
+/* ============================================================================
+   法规协议弹窗样式（与聊天窗口保持一致）
+   ============================================================================ */
+
+/* 基础样式 */
+.livechat-compliance-dialog {
+  background: white;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  animation: livechat-slide-in 0.3s ease-out;
+}
+
+/* 移动端固定底部样式 */
+@media (max-width: 767px) {
+  .livechat-compliance-dialog {
+    position: fixed !important; /* 防止被覆盖 */
+    bottom: 0 !important;
+    left: 0 !important;
+    right: 0 !important;
+    width: 100vw;
+    max-height: 80%;
+    border-radius: 16px 16px 0 0; /* 上方圆角，与聊天窗口一致 */
+    box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
+    z-index: 9998;
+  }
+}
+
+/* 平板及以上固定尺寸弹窗样式 */
+@media (min-width: 768px) {
+  .livechat-compliance-dialog {
+    position: fixed !important; /* 防止被覆盖 */
+    bottom: 1rem !important;
+    right: 1rem !important;
+    width: var(--livechat-window-width); /* 390px，与聊天窗口一致 */
+    max-height: 70vh;
+    border-radius: var(--livechat-border-radius); /* 1rem */
+    box-shadow: var(--livechat-shadow-xl);
+    z-index: 9998;
+  }
+}
+
+/* 大屏幕适配 */
+@media (min-width: 1920px) {
+  .livechat-compliance-dialog {
+    max-height: 720px;
+  }
+}