@anker-in/campaign-ui 0.2.11-beta.34 → 0.2.11-beta.35

package/src/components/LiveChatWidget/components/ComplianceDialog.tsx

@@ -0,0 +1,229 @@
+/**
+ * 法规协议弹窗组件
+ * 在用户首次点击聊天气泡时显示，用户同意后才打开聊天窗口
+ */
+
+import React, { useState, useCallback } from 'react'
+import * as Dialog from '@radix-ui/react-dialog'
+import type { ComplianceDialogConfig } from '../types'
+
+export interface ComplianceDialogProps {
+  /**
+   * 是否打开弹窗
+   */
+  open: boolean
+
+  /**
+   * 弹窗配置
+   */
+  config: ComplianceDialogConfig
+
+  /**
+   * 用户点击同意按钮的回调
+   */
+  onAgree: () => void
+
+  /**
+   * 用户关闭弹窗的回调（点击遮罩或关闭按钮）
+   */
+  onClose: () => void
+}
+
+/**
+ * 法规协议弹窗组件
+ *
+ * 功能：
+ * - 显示法规协议内容
+ * - 必须勾选复选框才能点击同意按钮
+ * - 支持在文本中嵌入链接
+ * - 响应式设计，移动端友好
+ *
+ * @example
+ * ```tsx
+ * <ComplianceDialog
+ *   open={showCompliance}
+ *   config={{
+ *     title: "Hi! I'm your eufy AI assistant.",
+ *     content: "AI-generated responses can be inaccurate...",
+ *     checkboxText: "By starting to use \"Live Chat\", you agree to Anker's {link}.",
+ *     linkText: "LIVE CHAT PRIVACY NOTICE",
+ *     linkUrl: "https://www.anker.com/privacy",
+ *     agreeButtonText: "Agree"
+ *   }}
+ *   onAgree={() => setShowCompliance(false)}
+ *   onClose={() => setShowCompliance(false)}
+ * />
+ * ```
+ */
+export const ComplianceDialog: React.FC<ComplianceDialogProps> = ({
+  open,
+  config,
+  onAgree,
+  onClose,
+}) => {
+  const [isChecked, setIsChecked] = useState(false)
+
+  const handleAgree = useCallback(() => {
+    if (isChecked) {
+      onAgree()
+      // 重置勾选状态，以便下次打开时重新勾选
+      setIsChecked(false)
+    }
+  }, [isChecked, onAgree])
+
+  const handleOpenChange = useCallback((open: boolean) => {
+    if (!open) {
+      onClose()
+      // 重置勾选状态
+      setIsChecked(false)
+    }
+  }, [onClose])
+
+  // 处理点击事件，防止点击链接时触发 checkbox
+  const handleCheckboxLabelClick = useCallback((e: React.MouseEvent) => {
+    // 如果点击的是链接，阻止冒泡
+    if ((e.target as HTMLElement).tagName === 'A') {
+      e.stopPropagation()
+    }
+  }, [])
+
+  return (
+    <Dialog.Root open={open} onOpenChange={handleOpenChange}>
+      <Dialog.Portal>
+        {/* 遮罩层 - 隐藏 */}
+        <Dialog.Overlay className="hidden" />
+
+        {/* 弹窗内容 */}
+        <Dialog.Content
+          className="
+            fixed z-[9998] bg-white overflow-hidden flex flex-col
+            animate-in slide-in-from-bottom-4 fade-in duration-300
+            max-md:bottom-0 max-md:left-0 max-md:right-0 max-md:w-screen max-md:max-h-[80%]
+            max-md:rounded-t-2xl max-md:shadow-[0_-4px_20px_rgba(0,0,0,0.15)]
+            md:bottom-4 md:right-4 md:w-[390px] md:max-h-[70vh]
+            md:rounded-2xl md:shadow-xl
+            2xl:max-h-[720px]
+          "
+        >
+          {/* Header - 包含关闭按钮（右上角） */}
+          <div className="flex items-center justify-end px-4 pt-4  pb-2 flex-shrink-0 max-md:px-6 max-sm:px-5">
+            <Dialog.Close asChild>
+              <button
+                type="button"
+                className="
+                  w-6 h-6
+                  flex items-center justify-center
+                  border-0 bg-transparent text-gray-500
+                   cursor-pointer
+                "
+                aria-label="关闭"
+              >
+                <svg
+                  width="20"
+                  height="20"
+                  className="text-[#3C3C3B]"
+                  viewBox="0 0 20 20"
+                  fill="none"
+                  stroke="currentColor"
+                  strokeWidth="2"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                >
+                  <line x1="15" y1="5" x2="5" y2="15" />
+                  <line x1="5" y1="5" x2="15" y2="15" />
+                </svg>
+              </button>
+            </Dialog.Close>
+          </div>
+
+          {/* Body - 可滚动内容区域 */}
+          <div className="flex-1 overflow-y-auto px-4 pb-4 max-md:px-6 max-md:pb-6 max-sm:px-5 max-sm:pb-5">
+            {/* 标题 */}
+            <Dialog.Title
+              className="
+                text-[18px] font-bold text-[#080A0F]
+                mb-1 leading-[1.4] tracking-tight
+              "
+            >
+              {config.title}
+            </Dialog.Title>
+
+            {/* 内容 */}
+            <div
+              className="
+                text-[16px] font-bold leading-[1.4] text-[#080A0F]
+                tracking-tight
+                mb-2
+              "
+              dangerouslySetInnerHTML={{ __html: config.content }}
+            />
+
+            {/* 勾选框 */}
+            <label
+              className="
+                flex items-center gap-2 mb-4
+                cursor-pointer select-none
+              "
+              onClick={handleCheckboxLabelClick}
+            >
+              <input
+                type="checkbox"
+                className="absolute opacity-0 w-0 h-0"
+                checked={isChecked}
+                onChange={e => setIsChecked(e.target.checked)}
+              />
+              <span
+                className={`
+                  flex-shrink-0 w-4 h-4 mt-0.5
+                  border-[1px] rounded-[2px] flex items-center justify-center
+                  transition-all duration-200 ease-in-out
+                  ${isChecked ? 'bg-[#080A0F] border-[#080A0F] text-white' : 'bg-white border-[#2A2C32]'}
+                `}
+              >
+                {isChecked && (
+                  <svg
+                    width="12"
+                    height="10"
+                    viewBox="0 0 12 10"
+                    fill="none"
+                    stroke="currentColor"
+                    strokeWidth="2"
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                  >
+                    <polyline points="1.5 5 4.5 8 10.5 2" />
+                  </svg>
+                )}
+              </span>
+              <span
+                className="
+                  flex-1 text-[14px] leading-[1.4] text-[#080A0F]
+                tracking-tight font-bold
+                  [&_a]:underline
+                "
+                dangerouslySetInnerHTML={{ __html: config.checkboxText }}
+              />
+            </label>
+
+            {/* 同意按钮 */}
+            <button
+              type="button"
+              className={`
+                w-full px-5 py-[10px]
+                border-0 rounded-[19px]
+                text-[14px] leading-[1.2] 
+                tracking-tighter font-bold
+                transition-all duration-200 ease-in-out text-white
+                ${isChecked ? 'bg-[#080A0F]  cursor-pointer ' : 'bg-[#767880] cursor-not-allowed'}
+              `}
+              onClick={handleAgree}
+              disabled={!isChecked}
+            >
+              {config.agreeButtonText || 'Agree'}
+            </button>
+          </div>
+        </Dialog.Content>
+      </Dialog.Portal>
+    </Dialog.Root>
+  )
+}

package/src/components/LiveChatWidget/index.tsx

@@ -34,6 +34,7 @@ export type {
   CartDiscountCode,
   SSEEvent,
   ChatStreamRequest,
+  ComplianceDialogConfig,
 } from './types'
 
 // 导出 Hook (供高级用户自定义使用)

package/src/components/LiveChatWidget/types.ts

@@ -702,6 +702,47 @@ export interface CommonText {
   total?: string
 }
 
+// ============================================================================
+// Compliance Dialog Types (法规协议弹窗)
+// ============================================================================
+
+/**
+ * 法规协议弹窗配置
+ */
+export interface ComplianceDialogConfig {
+  /**
+   * 弹窗标题
+   * @example "Hi! I'm your eufy AI assistant."
+   */
+  title: string
+
+  /**
+   * 弹窗内容文本（支持 HTML）
+   * @example "AI-generated responses can be inaccurate. Please verify important info. Do not input sensitive personal data"
+   */
+  content: string
+
+  /**
+   * 勾选框文本（支持完整 HTML，包括链接）
+   * 可以直接包含 <a> 标签等 HTML 元素
+   * @example "By starting to use \"Live Chat\", you agree to Anker's <a href=\"https://www.anker.com/privacy\" target=\"_blank\">LIVE CHAT PRIVACY NOTICE</a>."
+   */
+  checkboxText: string
+
+  /**
+   * 同意按钮文本
+   * @default "Agree"
+   */
+  agreeButtonText?: string
+
+  /**
+   * Cookie 名称，用于记录用户同意状态
+   * Cookie 有效期为 365 天
+   * @default "livechat_compliance_agreed"
+   */
+  cookieName?: string
+}
+
 // ============================================================================
 // Component Props Types (组件 Props)
 // ============================================================================
@@ -932,6 +973,13 @@ export interface LiveChatWidgetProps {
    * @default "The above content is provided by AI, for reference."
    */
   bottomTips?: string
+
+  /**
+   * 法规协议弹窗配置
+   * 提供此参数将在用户首次点击聊天气泡时显示法规协议弹窗
+   * 用户同意后才会打开聊天窗口
+   */
+  complianceConfig?: ComplianceDialogConfig
 }
 
 export interface MessageRenderer {

package/src/stories/LiveChatWidget.stories.tsx

@@ -574,6 +574,137 @@ export const WithRecaptcha: Story = {
   },
 }
 
+/**
+ * 法规协议弹窗
+ *
+ * 演示如何配置法规协议弹窗，在用户首次点击聊天气泡时显示。
+ *
+ * 用户必须同意协议后才能打开聊天窗口。
+ */
+export const WithComplianceDialog: Story = {
+  args: {
+    loginUserId: 'test_test',
+    apiBaseUrl: 'http://172.16.38.183:3003',
+    site: 'beta.eufy.com',
+    channelCode: 'dtc',
+    title: 'eufy AI Assistant',
+
+    // 法规协议弹窗配置
+    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"
+    },
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: `
+### 法规协议弹窗功能
+
+使用 \`complianceConfig\` 属性可以在用户首次点击聊天气泡时显示法规协议弹窗。
+
+**功能特性：**
+
+- ✅ 用户必须勾选复选框才能点击"同意"按钮
+- ✅ 支持在勾选框文本中嵌入链接（使用 \`{link}\` 占位符）
+- ✅ 支持 HTML 格式的内容文本
+- ✅ 同意后自动打开聊天窗口
+- ✅ 关闭弹窗不会打开聊天窗口
+- ✅ 同意后再次点击气泡直接打开聊天（无需重复同意）
+- ✅ 响应式设计，移动端友好
+- ✅ **与聊天窗口位置一致**（右下角或底部固定）
+- ✅ **无遮罩层设计**，不遮挡页面内容
+
+**测试步骤：**
+
+1. 点击聊天气泡按钮
+2. 查看弹出的法规协议弹窗
+3. 尝试不勾选复选框时点击"Agree"按钮（按钮应该是禁用状态）
+4. 勾选复选框后点击"Agree"
+5. 观察弹窗关闭并自动打开聊天窗口
+6. 关闭聊天窗口后再次点击气泡（应该直接打开聊天，不再显示法规弹窗）
+
+**配置项说明：**
+
+\`\`\`typescript
+complianceConfig: {
+  title: string                // 弹窗标题
+  content: string              // 内容文本（支持 HTML）
+  checkboxText: string         // 勾选框文本（支持完整 HTML，包括 <a> 标签）
+  agreeButtonText?: string     // 同意按钮文案（默认 "Agree"）
+}
+\`\`\`
+
+**示例：**
+
+\`\`\`tsx
+checkboxText: 'By starting to use "Live Chat", you agree to <a href="https://example.com/privacy" target="_blank">PRIVACY NOTICE</a>.'
+\`\`\`
+
+**样式定制：**
+
+所有样式通过 CSS 类名暴露，可以全局覆盖：
+
+\`\`\`css
+.livechat-compliance-content { /* 弹窗主体 */ }
+.livechat-compliance-title { /* 标题 */ }
+.livechat-compliance-text { /* 内容文本 */ }
+.livechat-compliance-checkbox { /* 复选框 */ }
+.livechat-compliance-link { /* 链接 */ }
+.livechat-compliance-button { /* 同意按钮 */ }
+\`\`\`
+        `,
+      },
+    },
+  },
+}
+
+/**
+ * 法规协议弹窗 - 无链接版本
+ *
+ * 演示不包含链接的简化版法规协议弹窗。
+ */
+export const WithComplianceDialogNoLink: Story = {
+  args: {
+    loginUserId: 'test_test',
+    apiBaseUrl: 'http://172.16.38.183:3003',
+    site: 'beta.eufy.com',
+    channelCode: 'dtc',
+    title: 'AI Assistant',
+
+    // 简化版法规协议（不包含链接）
+    complianceConfig: {
+      title: "Welcome to AI Chat Support",
+      content: "By using this service, you agree to our terms of service and privacy policy. AI responses may contain errors. Please verify important information.",
+      checkboxText: "I have read and agree to the terms and conditions",
+      agreeButtonText: "Continue"
+    },
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: `
+### 简化版法规协议弹窗
+
+如果不需要在勾选框中显示链接，可以省略 \`linkText\` 和 \`linkUrl\` 属性。
+
+这个版本适用于：
+- 简单的用户协议确认
+- 免责声明
+- 服务条款同意
+
+**与完整版的区别：**
+- 不包含可点击的链接
+- 勾选框文本为纯文本
+- 配置更简单
+        `,
+      },
+    },
+  },
+}
+
 /**
  * 自定义产品卡片渲染
  *