@anker-in/campaign-ui 0.5.22 → 0.5.24

package/src/stories/LiveChatWidget.stories.tsx

@@ -1,317 +0,0 @@
-/**
- * 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_test1',
-    apiBaseUrl: 'https://beta-api-v2-livechat.anker.com',
-    site: 'beta.soundcore.com',
-    channelCode: 'dtc',
-    title: 'eufy AI Assistant',
-    cartId: 'gid://shopify/Cart/hWNAAJweS9IkeRKib4LRy9PY?key=ff1f9b24e74b3f11f5574539e7cbbb2f',
-    accessToken: '47b1aa2c0797043f9baba39388029d70',
-
-    // 自定义位置
-    position: { bottom: '24px', right: '30px' },
-
-    // 欢迎消息
-    welcomeMessage: '',
-
-    // 快捷回复
-    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/stories/chat.stories.tsx

@@ -1,41 +0,0 @@
-import React from 'react'
-import type { Meta, StoryObj } from '@storybook/react'
-import { Chat } from '../components/index'
-import '../styles/chat.css'
-
-type Story = StoryObj<typeof meta>
-
-// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
-const meta: Meta<typeof Chat> = {
-  // 同时定义了页面左侧菜单
-  title: 'Campaign/Chat',
-  component: Chat,
-  args: {
-    title: 'DTC Live Chat',
-    runtimeUrl: 'https://beta-api-livechat.anker.com',
-    shopifyDomain: 'soundcoreusa.myshopify.com',
-  },
-  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
-  tags: ['autodocs'],
-  // More on argTypes: https://storybook.js.org/docs/api/argtypes
-  decorators: [
-    Story => (
-      <div style={{ height: '700px' }}>
-        <Story />
-      </div>
-    ),
-  ],
-} satisfies Meta<typeof Chat>
-
-export default meta
-
-export const Default: Story = {
-  args: {
-    title: 'DTC Live Chat',
-    runtimeUrl: 'https://beta-api-livechat.anker.com',
-    shopifyDomain: 'soundcoreusa.myshopify.com',
-    userId: 'arno7',
-    showResponseButton: 'follow',
-    lang: { popupTip: 'Hi ! Welcome to soundcore Innovations live chat！', popupTipTimeout: [3000, 6000] },
-  },
-}