@chatcops /部件

可嵌入的AI聊天机器人小部件。零依赖，影子DOM隔离，~13KB压缩。

安装

脚本标签（最简单）

<script
  src="https://cdn.jsdelivr.net/npm/@chatcops/widget@1/dist/chatcops.min.js"
  data-api-url="https://your-api.com/chat"
  data-accent="#6366f1">
</script>

小部件自动初始化 data-* 属性 DOMContentLoaded.

npm

npm install @chatcops/widget

import ChatCops from '@chatcops/widget';

ChatCops.init({
  apiUrl: 'https://your-api.com/chat',
  theme: { accent: '#6366f1' },
});

模式

弹出(默认)

角落的浮动动作按钮（FAB）。单击它将打开一个聊天面板。

ChatCops.init({
  apiUrl: '/chat',
  mode: 'popup',                    // default
  theme: { position: 'bottom-right' }, // or 'bottom-left'
});

内联

直接在容器元素中呈现。没有FAB，就没有欢迎泡沫。

ChatCops.init({
  apiUrl: '/chat',
  mode: 'inline',
  container: '#chat-container',  // CSS selector or HTMLElement
});

配置

ChatCops.init({
  // Required
  apiUrl: 'https://your-api.com/chat',

  // Display mode
  mode: 'popup',                        // 'popup' | 'inline'
  container: '#chat',                   // required for inline mode

  // Theme
  theme: {
    accent: '#6366f1',                  // primary color
    textColor: '#ffffff',
    bgColor: '#0a0a0a',
    fontFamily: 'system-ui, sans-serif',
    borderRadius: '12px',
    tokens: {
      border: '#d0d4da',
      'panel-width': '440px',
    },
    position: 'bottom-right',           // 'bottom-right' | 'bottom-left'
  },

  // Branding
  branding: {
    name: 'Support Bot',
    avatar: 'https://example.com/avatar.png',
    subtitle: 'Online',
  },

  // Messages
  welcomeMessage: 'Hi! How can I help?',
  welcomeBubble: {
    text: 'Need help? Chat with us!',
    delay: 3000,                        // ms before showing
    showOnce: true,                     // once per browser ('local'), per tab ('session'), every load ('none')
  },
  placeholder: 'Type a message...',

  // Behavior
  persistence: 'local',                 // 'local' | 'session' | 'none', default: 'local'
  historyTtlDays: 30,                   // drop saved chats older than this
  maxMessages: 50,                      // max persisted messages
  pageContext: true,                     // send page URL/title to API
  autoOpen: 5000,                       // auto-open after ms (popup only)
  locale: 'en',
  privacyUrl: 'https://example.com/privacy', // link in header menu (https: or http:)

  // Callbacks
  onOpen: () => {},
  onClose: () => {},
  onMessage: (msg) => {},
  onError: (err) => {},
});

API

ChatCops.init(config)         // Initialize the widget
ChatCops.open()               // Open the chat panel (popup mode)
ChatCops.close()              // Close the chat panel
ChatCops.destroy()            // Remove widget and clean up
ChatCops.on(event, handler)   // Subscribe to events (returns unsubscribe function)
ChatCops.off(event, handler)  // Unsubscribe

事件: open， close， message， error， leadCaptured， preChatSubmit.

脚本标签属性

所有配置都可以通过 data-* 属性:

<script
  src="https://cdn.jsdelivr.net/npm/@chatcops/widget@1/dist/chatcops.min.js"
  data-api-url="/chat"
  data-mode="popup"
  data-accent="#6366f1"
  data-text-color="#ffffff"
  data-bg-color="#0a0a0a"
  data-font-family="system-ui"
  data-border-radius="12px"
  data-position="bottom-right"
  data-brand-name="Support Bot"
  data-brand-avatar="https://example.com/avatar.png"
  data-brand-subtitle="Online"
  data-welcome-message="Hi! How can I help?"
  data-welcome-bubble="Need help?"
  data-welcome-bubble-delay="3000"
  data-placeholder="Type here..."
  data-locale="en"
  data-auto-open="true"
  data-privacy-url="https://example.com/privacy">
</script>

功能

• DOM的影子 -完全隔离CSS/DOM，不与主机站点冲突
• 上交所流 -实时流响应通过服务器发送的事件
• 减价 -显示粗体、斜体、代码块、链接和列表
• 会话持久性 —localStorage表示历史记录，sessionStorage表示会话ID
• 主题 - CSS自定义属性，自动派生表面颜色 bgColor
• 移动响应 - 768px以下屏幕的全屏面板
• i18n -船舶在英语与自定义覆盖支持任何语言
• 可使用的 ARIA标签，语义HTML，键盘导航

许可证

麻省理工学院