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

package/src/stories/LiveChatWidget.stories.tsx

@@ -0,0 +1,461 @@
+/**
+ * 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"
+      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',
+    },
+    site: {
+      control: 'text',
+      description: 'Shopify 店铺 URL',
+    },
+    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',
+    cartId: 'gid://shopify/Cart/hWN7oFnMh7jKxbO1CYSzWVue?key=68f4cf2c4c772b9aed2fab2902e6dab3',
+    accessToken: '92301d516a0a38a0a483bc230e5bfaad',
+    title: 'eufy',
+  },
+}
+
+/**
+ * 自定义位置
+ *
+ * 使用自定义位置对象来控制气泡按钮的位置。
+ */
+export const CustomPosition: Story = {
+  args: {
+    position: { bottom: '1.5rem', left: '1.5rem' },
+  },
+}
+
+/**
+ * 自定义品牌样式
+ *
+ * 自定义 Logo 和欢迎消息。
+ */
+export const CustomBranding: Story = {
+  args: {
+    logoUrl: 'https://images.unsplash.com/photo-1599305445671-ac291c95aaa9?w=100&h=100&fit=crop',
+    welcomeMessage: '欢迎来到 Soundcore！我是您的专属 AI 助手 🎧',
+  },
+}
+
+/**
+ * 带快捷回复
+ *
+ * 在欢迎消息后显示快捷回复按钮。
+ */
+export const WithQuickReplies: Story = {
+  args: {
+    quickReplies: [
+      {
+        id: '1',
+        label: '查询价格',
+        value: '我想了解产品价格',
+        icon: '💰',
+      },
+      {
+        id: '2',
+        label: '查询物流',
+        value: '我想查询订单物流',
+        icon: '📦',
+      },
+      {
+        id: '3',
+        label: '售后服务',
+        value: '我需要售后帮助',
+        icon: '🔧',
+      },
+      {
+        id: '4',
+        label: '产品推荐',
+        value: '请推荐适合我的产品',
+        icon: '⭐',
+      },
+    ],
+  },
+}
+
+/**
+ * 自定义欢迎消息
+ *
+ * 自定义首次打开聊天窗口时的欢迎消息。
+ */
+export const CustomWelcomeMessage: Story = {
+  args: {
+    welcomeMessage: `
+👋 您好！欢迎来到 Soundcore 官方商城。
+
+我是您的 AI 购物助手，可以帮您：
+- 🔍 查找产品
+- 💰 比较价格
+- 📦 跟踪订单
+- 💬 解答疑问
+
+有什么我可以帮助您的吗？
+    `.trim(),
+  },
+}
+
+/**
+ * 事件回调
+ *
+ * 监听组件事件进行自定义处理。
+ */
+export const WithEventCallbacks: Story = {
+  args: {
+    title: '',
+    showNewSessionButton: false,
+
+    position: {
+      bottom: '24px',
+      right: '30px',
+    },
+
+    chatBubbleIcon: 'https://cdn.shopify.com/s/files/1/0504/7094/4954/files/Rectangle_400770314.png?v=1768894153',
+  },
+
+  render: args => (
+    <LiveChatWidget
+      {...args}
+      onOpen={() => {
+        console.log('[Story] Chat opened')
+      }}
+      onClose={() => {
+        console.log('[Story] Chat closed')
+      }}
+      onMessageSend={(message: string) => {
+        console.log('[Story] Message sent:', message)
+      }}
+      onError={(error: Error) => {
+        console.error('[Story] Error occurred:', error)
+      }}
+      onAddToCart={(product: any) => {
+        console.log('🛒 [Story] Add to Cart clicked!')
+        console.log('📦 Product Info:', {
+          id: product.shopifyId,
+          title: product.title,
+          price: product.price,
+          imageUrl: product.imageUrl,
+          productUrl: product.productUrl,
+        })
+        console.log('📋 Full Product Object:', product)
+
+        // 模拟添加到购物车成功
+        alert(`✅ "${product.title}" 已添加到购物车！\n\n价格: ${product.price.currency} ${product.price.amount}`)
+      }}
+      onCart={(cartId: string, checkoutUrl?: string) => {
+        console.log('🛒 [Story] Cart button clicked!')
+        console.log('📋 Cart ID:', cartId)
+        console.log('🔗 Checkout URL:', checkoutUrl)
+
+        // 模拟购物车按钮点击成功
+        alert(`购物车按钮被点击！\n\nCart ID: ${cartId}\nCheckout URL: ${checkoutUrl || '无'}`)
+      }}
+    />
+  ),
+}
+
+/**
+ * 自定义视频消息渲染器
+ *
+ * 扩展消息类型，添加视频消息支持。
+ */
+export const CustomVideoRenderer: Story = {
+  args: {
+    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}>
+                您的浏览器不支持视频播放
+              </video>
+              {videoContent.title && <p className="mt-2 text-sm text-gray-600">{videoContent.title}</p>}
+            </div>
+          )
+        },
+      } as MessageRenderer,
+    },
+  },
+}
+
+/**
+ * 自定义图片画廊渲染器
+ *
+ * 扩展消息类型，添加图片画廊支持。
+ */
+export const CustomImageGalleryRenderer: Story = {
+  args: {
+    customRenderers: {
+      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,
+    },
+  },
+}
+
+/**
+ * 移动端预览
+ *
+ * 在移动端尺寸下查看效果（全屏显示）。
+ */
+export const MobileView: Story = {
+  parameters: {
+    viewport: {
+      defaultViewport: 'mobile1',
+    },
+  },
+  args: {},
+}
+
+/**
+ * 平板端预览
+ *
+ * 在平板端尺寸下查看效果。
+ */
+export const TabletView: Story = {
+  parameters: {
+    viewport: {
+      defaultViewport: 'tablet',
+    },
+  },
+  args: {},
+}
+
+/**
+ * 默认位置展示
+ *
+ * 展示气泡按钮的默认位置（右下角）。
+ */
+export const DefaultPositionDemo: Story = {
+  render: () => (
+    <div className="relative h-screen w-full bg-gray-50">
+      <div className="absolute inset-0 flex items-center justify-center">
+        <p className="text-gray-500">页面内容区域</p>
+      </div>
+
+      {/* 演示默认位置 */}
+      <div className="absolute bottom-4 right-4 text-xs text-gray-400">默认位置 (右下角)</div>
+
+      <LiveChatWidget apiBaseUrl="https://beta-api-livechat.anker.com" site="www.eufy.com" />
+    </div>
+  ),
+}
+
+/**
+ * 产品对比消息
+ *
+ * 展示产品对比类型的消息渲染效果，包括价格、会员价、变体数量、折扣等多个维度的对比。
+ *
+ * 产品对比组件会以网格布局展示多个产品的基本信息，并在下方显示各维度的对比数据。
+ */
+export const ProductComparisonMessage: Story = {
+  render: args => (
+    <LiveChatWidget
+      {...args}
+      onAddToCart={(product: any) => {
+        console.log('🛒 [ProductComparison Story] Add to Cart clicked!')
+        console.log('📦 Product Info:', {
+          id: product.shopifyId,
+          title: product.title,
+          price: product.price,
+          imageUrl: product.imageUrl,
+          productUrl: product.productUrl,
+        })
+        console.log('📋 Full Product Object:', product)
+
+        // 模拟添加到购物车成功
+        alert(`✅ "${product.title}" 已添加到购物车！\n\n价格: ${product.price.currency} ${product.price.amount}`)
+      }}
+    />
+  ),
+  args: {
+    welcomeMessage: '以下是您关注的产品对比信息：',
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: `
+产品对比消息支持以下维度：
+
+- **价格对比**: 显示产品的价格区间和促销标签
+- **会员价对比**: 显示会员专享价格（如果可用）
+- **变体数量对比**: 显示产品的可选变体数量
+- **折扣对比**: 显示产品是否有折扣活动
+
+组件会自动处理从后端返回的产品对比数据，包括：
+- 产品基本信息（图片、标题、价格等）
+- 多维度对比数据（价格、会员价、变体、折扣）
+- 响应式布局（移动端可横向滚动）
+
+**测试 Add to Cart 功能：**
+- 点击产品对比卡片中的 "Add to Cart" 按钮
+- 查看控制台输出的产品信息
+- 会弹出确认提示框显示已添加到购物车
+        `,
+      },
+    },
+  },
+}
+
+/**
+ * FAQ 列表消息
+ *
+ * 展示常见问题列表，支持折叠/展开。
+ *
+ * FAQ 组件会显示搜索结果的常见问题，每个问题可以点击展开查看答案。
+ */
+export const FAQListMessage: Story = {
+  args: {
+    welcomeMessage: '以下是与您的问题相关的常见解答：',
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: `
+FAQ 列表消息支持：
+
+- **可折叠问题**: 点击问题标题展开/折叠答案
+- **Markdown 答案**: 答案支持 Markdown 格式，可显示富文本
+- **相关问题**: 展开答案后显示相关问题，点击可触发新搜索
+- **分类标记**: 根据问题分类显示（配送、退货、产品、支付、通用）
+- **搜索结果统计**: 显示找到的问题数量
+
+使用场景：
+- 用户询问常见问题时返回 FAQ 列表
+- 产品专属问题查询
+- 按分类查询 FAQ
+        `,
+      },
+    },
+  },
+}

package/src/styles/livechat.css

@@ -0,0 +1,263 @@
+/**
+ * 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: 56px;
+  --livechat-window-width: 390px;
+  --livechat-window-height: 600px;
+  --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 20px 25px -5px rgb(0 0 0 / 0.1);
+}
+
+/* 气泡按钮基础样式 */
+.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, 375px); /* 默认高度375px，可通过拖拽调整（最小375px，最大90vh） */
+    max-height: 90vh;
+    border-radius: 16px 16px 0 0; /* 上方圆角 */
+    box-shadow: 0 -4px 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: var(--livechat-window-height);
+    max-width: 90vw;
+    max-height: 90vh;
+    border-radius: var(--livechat-border-radius);
+    box-shadow: var(--livechat-shadow-xl);
+  }
+}
+
+/* 聊天窗口动画 */
+.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: #D5D5D8;
+  color: #1D1D1F;
+}
+
+/* Markdown 内容样式 */
+.livechat-markdown {
+  line-height: 1.6;
+}
+
+.livechat-markdown ul,
+.livechat-markdown ol {
+  margin-left: 1.5rem;
+  margin-bottom: 0.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: 600;
+}
+
+.livechat-markdown em {
+  font-style: italic;
+}