@jidou-ai/chat-widget 1.0.0

package/.claude/settings.local.json

@@ -0,0 +1,28 @@
+{
+  "permissions": {
+    "allow": [
+      "mcp__heimin__heimin_task_get_details",
+      "mcp__heimin__heimin_page_get_details",
+      "Bash(npm install:*)",
+      "Bash(npm run typecheck:*)",
+      "Bash(npm run build:*)",
+      "Bash(gzip:*)",
+      "mcp__heimin__heimin_task_update",
+      "Bash(timeout 5 npm run dev:mock:*)",
+      "Bash(grep:*)",
+      "Bash(git init:*)",
+      "Bash(git remote add:*)",
+      "Bash(git -C /Users/shihyunshen/Projects/jidou/jidou-chat-widget status)",
+      "Bash(git -C /Users/shihyunshen/Projects/jidou/jidou-chat-widget log --oneline -5)",
+      "Bash(git -C /Users/shihyunshen/Projects/jidou/jidou-chat-widget add .gitignore README.md package.json package-lock.json tsconfig.json scripts/ src/)",
+      "Bash(git -C /Users/shihyunshen/Projects/jidou/jidou-chat-widget commit -m \"$\\(cat <<''EOF''\nInitial commit: Jidou Chat Widget\n\n- Lightweight, customizable chat widget for AI-powered customer support\n- Multiple display modes: floating, fullscreen, embedded\n- Internationalization: en, zh-TW, zh-CN, ja\n- Light/dark themes with customizable colors\n- WebSocket-based real-time messaging with auto-reconnect\n- Message persistence with local storage\n- Shadow DOM for style isolation\n\nCo-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>\nEOF\n\\)\")",
+      "Bash(git add:*)",
+      "Bash(git commit:*)",
+      "Bash(git push:*)",
+      "mcp__heimin__heimin_user_list_teams",
+      "mcp__heimin__heimin_team_list_projects",
+      "mcp__heimin__heimin_project_list_pages",
+      "mcp__heimin__heimin_project_list_tasks"
+    ]
+  }
+}

package/README.md

@@ -0,0 +1,276 @@
+# Jidou Chat Widget
+
+A lightweight, customizable chat widget for AI-powered customer support.
+
+## Features
+
+- **Multiple Display Modes**: Floating, fullscreen, and embedded
+- **Internationalization**: Supports English, Traditional Chinese (zh-TW), Simplified Chinese (zh-CN), and Japanese
+- **Theming**: Light/dark themes with customizable colors
+- **Real-time Communication**: WebSocket-based messaging with auto-reconnect
+- **Message Persistence**: Local storage for chat history
+- **Responsive Design**: Works on desktop and mobile
+- **Shadow DOM**: Isolated styles that won't conflict with host page
+
+## Installation
+
+### Via Script Tag
+
+```html
+<script>
+  window.JidouChatSettings = {
+    clientId: 'YOUR_CLIENT_ID',
+    // ... other options
+  };
+</script>
+<script src="https://cdn.jidou.ai/widget.js"></script>
+```
+
+### Via NPM
+
+```bash
+npm install @jidou-ai/chat-widget
+```
+
+```javascript
+import { Widget } from '@jidou-ai/chat-widget';
+
+const widget = new Widget({
+  clientId: 'YOUR_CLIENT_ID',
+  // ... other options
+});
+widget.init();
+```
+
+## Configuration
+
+```javascript
+window.JidouChatSettings = {
+  // Required
+  clientId: 'YOUR_CLIENT_ID',
+
+  // Display mode: 'floating' | 'fullscreen' | 'embedded'
+  displayMode: 'floating',
+
+  // Language: 'en' | 'zh-TW' | 'zh-CN' | 'ja' | 'auto'
+  language: 'auto',
+
+  // Theme: 'light' | 'dark'
+  theme: 'light',
+
+  // WebSocket URL (optional, uses default if not specified)
+  wsUrl: 'wss://chat.jidou.ai/ws',
+
+  // Custom colors
+  colors: {
+    primary: '#4F46E5',
+    background: '#FFFFFF',
+    text: '#1F2937',
+    botBubble: '#F3F4F6',
+    userBubble: '#4F46E5',
+  },
+
+  // Launcher configuration (floating mode only)
+  launcher: {
+    show: true,
+    position: 'bottom-right', // 'bottom-right' | 'bottom-left'
+    size: 'medium',           // 'small' | 'medium' | 'large'
+    shape: 'circle',          // 'circle' | 'rounded'
+    offsetX: 20,
+    offsetY: 20,
+    tooltip: {
+      show: true,
+      text: 'Need help?',
+    },
+  },
+
+  // Chat window configuration
+  chatWindow: {
+    width: 380,
+    height: 600,
+    borderRadius: 16,
+    header: {
+      title: 'AI Assistant',
+      subtitle: 'Online',
+      logo: {
+        show: true,
+        url: 'https://example.com/logo.png',
+        size: 40,
+      },
+    },
+    footer: {
+      input: {
+        placeholder: 'Type a message...',
+        maxLength: 1000,
+      },
+      branding: {
+        show: true,
+        text: 'Powered by Jidou',
+      },
+    },
+    welcomeScreen: {
+      quickReplies: {
+        items: [
+          { text: 'Getting Started', icon: '🚀' },
+          { text: 'Pricing', icon: '💰' },
+          { text: 'Support', icon: '🆘' },
+        ],
+      },
+    },
+  },
+
+  // Behavior configuration
+  behavior: {
+    autoOpen: {
+      enabled: false,
+      delay: 3000,
+    },
+    persistence: {
+      enabled: true,
+      duration: 7, // days
+    },
+  },
+
+  // Container for embedded mode
+  container: '#chat-container',
+
+  // Z-index
+  zIndex: 9999,
+
+  // Event hooks
+  hooks: {
+    onLoad: () => {},
+    onReady: () => {},
+    onOpen: () => {},
+    onClose: () => {},
+    onMessageSent: (message) => {},
+    onMessageReceived: (message) => {},
+    onConnectionStateChange: (state) => {},
+    onReconnect: (attempt) => {},
+    onError: (error) => {},
+  },
+};
+```
+
+## API
+
+The widget exposes a global `JidouChat` object with the following methods:
+
+```javascript
+// Open the chat window
+JidouChat.open();
+
+// Close the chat window
+JidouChat.close();
+
+// Toggle the chat window
+JidouChat.toggle();
+
+// Check if chat is open
+JidouChat.isOpen();
+
+// Send a message programmatically
+JidouChat.sendMessage('Hello!');
+
+// Change display mode
+JidouChat.setDisplayMode('fullscreen');
+JidouChat.setDisplayMode('floating');
+JidouChat.setDisplayMode('embedded', { container: '#my-container' });
+
+// Get current display mode
+JidouChat.getDisplayMode();
+
+// Get current state
+JidouChat.getState();
+
+// Subscribe to events
+JidouChat.on('onMessageReceived', (message) => {
+  console.log('New message:', message);
+});
+
+// Unsubscribe from events
+JidouChat.off('onMessageReceived', handler);
+
+// Destroy the widget
+JidouChat.destroy();
+```
+
+## Internationalization
+
+The widget automatically detects browser language when `language: 'auto'` is set. Supported languages:
+
+| Code | Language |
+|------|----------|
+| `en` | English |
+| `zh-TW` | Traditional Chinese |
+| `zh-CN` | Simplified Chinese |
+| `ja` | Japanese |
+
+Translated strings include:
+- Connection status (Connecting, Connected, Disconnected, etc.)
+- Chat window title
+- Input placeholder
+- Button labels (Close, Expand, Collapse)
+- Branding text
+
+## Development
+
+### Prerequisites
+
+- Node.js 18+
+- npm or yarn
+
+### Setup
+
+```bash
+# Install dependencies
+npm install
+
+# Start development server with mock WebSocket
+npm run dev
+
+# Build for production
+npm run build
+
+# Run tests
+npm test
+```
+
+### Project Structure
+
+```
+src/
+├── components/       # UI components
+│   ├── BaseComponent.ts
+│   ├── ChatWindow.ts
+│   ├── ConnectionStatus.ts
+│   ├── InputArea.ts
+│   ├── Launcher.ts
+│   ├── MessageList.ts
+│   ├── QuickReplies.ts
+│   └── icons.ts
+├── core/
+│   └── Widget.ts     # Main widget class
+├── i18n/             # Internationalization
+│   ├── index.ts
+│   └── translations.ts
+├── services/         # Business logic
+│   ├── ChatHistoryManager.ts
+│   ├── StateManager.ts
+│   └── WebSocketClient.ts
+├── styles/           # CSS styles
+├── types/            # TypeScript types
+├── utils/            # Utility functions
+└── index.ts          # Entry point
+```
+
+## Browser Support
+
+- Chrome (latest)
+- Firefox (latest)
+- Safari (latest)
+- Edge (latest)
+
+## License
+
+Copyright © Jidou AI. All rights reserved.

package/dist/index.html

@@ -0,0 +1,236 @@
+<!DOCTYPE html>
+<html lang="zh-TW">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Jidou Chat Widget - Test</title>
+  <style>
+    * { box-sizing: border-box; }
+    body {
+      font-family: system-ui, -apple-system, sans-serif;
+      margin: 0;
+      padding: 40px;
+      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+      min-height: 100vh;
+    }
+    .container { max-width: 800px; margin: 0 auto; }
+    h1 { color: white; margin-bottom: 8px; }
+    .subtitle { color: rgba(255,255,255,0.8); margin-bottom: 32px; }
+    .card {
+      background: white;
+      border-radius: 12px;
+      padding: 24px;
+      margin-bottom: 24px;
+      box-shadow: 0 4px 20px rgba(0,0,0,0.15);
+    }
+    h2 { margin-top: 0; color: #333; font-size: 18px; }
+    .controls { display: flex; flex-wrap: wrap; gap: 8px; }
+    button {
+      padding: 10px 20px;
+      border: none;
+      border-radius: 8px;
+      background: #4F46E5;
+      color: white;
+      cursor: pointer;
+      font-size: 14px;
+      font-weight: 500;
+      transition: all 0.2s;
+    }
+    button:hover { background: #4338CA; transform: translateY(-1px); }
+    button.secondary { background: #E5E7EB; color: #374151; }
+    button.secondary:hover { background: #D1D5DB; }
+    .log {
+      margin-top: 16px;
+      padding: 16px;
+      background: #1a1a2e;
+      color: #0f0;
+      font-family: 'Monaco', 'Consolas', monospace;
+      font-size: 12px;
+      border-radius: 8px;
+      max-height: 200px;
+      overflow-y: auto;
+    }
+    .log-entry { margin: 4px 0; padding: 4px 0; border-bottom: 1px solid rgba(255,255,255,0.1); }
+    .log-time { color: #888; }
+    .log-event { color: #4FC3F7; }
+    .log-data { color: #81C784; }
+    #embed-container {
+      width: 100%;
+      height: 500px;
+      border: 2px dashed #ccc;
+      border-radius: 12px;
+      display: none;
+      background: #f9fafb;
+      margin-top: 16px;
+    }
+    .status {
+      display: inline-flex;
+      align-items: center;
+      gap: 6px;
+      padding: 6px 12px;
+      background: #f3f4f6;
+      border-radius: 20px;
+      font-size: 13px;
+      margin-bottom: 16px;
+    }
+    .status-dot {
+      width: 8px;
+      height: 8px;
+      border-radius: 50%;
+      background: #9CA3AF;
+    }
+    .status-dot.connected { background: #22C55E; }
+    .status-dot.connecting { background: #F59E0B; animation: pulse 1s infinite; }
+    .status-dot.failed { background: #EF4444; }
+    @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }
+    .info {
+      background: #EFF6FF;
+      border: 1px solid #BFDBFE;
+      border-radius: 8px;
+      padding: 16px;
+      margin-bottom: 16px;
+      color: #1E40AF;
+      font-size: 14px;
+    }
+  </style>
+</head>
+<body>
+  <div class="container">
+    <h1>Jidou Chat Widget</h1>
+    <p class="subtitle">Test Environment with Mock Server</p>
+
+    <div class="card">
+      <h2>Connection Status</h2>
+      <div class="status">
+        <span class="status-dot" id="status-dot"></span>
+        <span id="status-text">Disconnected</span>
+      </div>
+      <div class="info">
+        Mock WebSocket Server: ws://localhost:8080<br>
+        HTTP Server: http://localhost:3000
+      </div>
+    </div>
+
+    <div class="card">
+      <h2>Widget Controls</h2>
+      <div class="controls">
+        <button onclick="JidouChat.open()">Open Chat</button>
+        <button onclick="JidouChat.close()">Close Chat</button>
+        <button onclick="JidouChat.toggle()">Toggle</button>
+        <button class="secondary" onclick="JidouChat.sendMessage('Hello!')">Send "Hello!"</button>
+        <button class="secondary" onclick="JidouChat.sendMessage('價格是多少?')">Ask Price</button>
+      </div>
+    </div>
+
+    <div class="card">
+      <h2>Display Mode</h2>
+      <div class="controls">
+        <button onclick="switchMode('floating')">Floating</button>
+        <button onclick="switchMode('fullscreen')">Fullscreen</button>
+        <button onclick="switchMode('embedded')">Embedded</button>
+      </div>
+      <div id="embed-container"></div>
+    </div>
+
+    <div class="card">
+      <h2>Event Log</h2>
+      <div class="log" id="log"></div>
+    </div>
+  </div>
+
+  <script src="/widget.js"></script>
+  <script>
+    function log(event, data) {
+      var el = document.getElementById('log');
+      var entry = document.createElement('div');
+      entry.className = 'log-entry';
+
+      var time = document.createElement('span');
+      time.className = 'log-time';
+      time.textContent = new Date().toISOString().slice(11, 19) + ' ';
+      entry.appendChild(time);
+
+      var eventSpan = document.createElement('span');
+      eventSpan.className = 'log-event';
+      eventSpan.textContent = event;
+      entry.appendChild(eventSpan);
+
+      if (data !== undefined) {
+        var dataSpan = document.createElement('span');
+        dataSpan.className = 'log-data';
+        dataSpan.textContent = ' ' + (typeof data === 'object' ? JSON.stringify(data) : data);
+        entry.appendChild(dataSpan);
+      }
+
+      el.insertBefore(entry, el.firstChild);
+    }
+
+    function updateStatus(state) {
+      var dot = document.getElementById('status-dot');
+      var text = document.getElementById('status-text');
+      dot.className = 'status-dot';
+      if (state === 'connected') {
+        dot.classList.add('connected');
+        text.textContent = 'Connected';
+      } else if (state === 'connecting' || state === 'reconnecting') {
+        dot.classList.add('connecting');
+        text.textContent = state === 'reconnecting' ? 'Reconnecting...' : 'Connecting...';
+      } else if (state === 'failed') {
+        dot.classList.add('failed');
+        text.textContent = 'Connection Failed';
+      } else {
+        text.textContent = 'Disconnected';
+      }
+    }
+
+    window.JidouChatSettings = {
+      clientId: 'test-client',
+      displayMode: 'floating',
+      theme: 'light',
+      wsUrl: 'ws://localhost:8080',
+      colors: { primary: '#4F46E5' },
+      chatWindow: {
+        header: {
+          title: 'AI 助理',
+          subtitle: 'Online'
+        },
+        welcomeScreen: {
+          quickReplies: {
+            items: [
+              { text: '什麼是 Jidou AI？', icon: '🤖' },
+              { text: '價格方案', icon: '💰' },
+              { text: '聯絡我們', icon: '📧' },
+            ]
+          }
+        }
+      },
+      hooks: {
+        onLoad: function() { log('onLoad'); },
+        onReady: function() { log('onReady'); },
+        onOpen: function() { log('onOpen'); },
+        onClose: function() { log('onClose'); },
+        onMessageSent: function(msg) { log('onMessageSent', msg); },
+        onMessageReceived: function(msg) { log('onMessageReceived', msg); },
+        onConnectionStateChange: function(state) {
+          log('onConnectionStateChange', state);
+          updateStatus(state);
+        },
+        onReconnect: function(attempt) { log('onReconnect', 'Attempt ' + attempt); },
+        onError: function(err) { log('onError', err.message); }
+      }
+    };
+
+    function switchMode(mode) {
+      var container = document.getElementById('embed-container');
+      if (mode === 'embedded') {
+        container.style.display = 'block';
+        JidouChat.setDisplayMode('embedded', { container: '#embed-container' });
+      } else {
+        container.style.display = 'none';
+        JidouChat.setDisplayMode(mode);
+      }
+      log('switchMode', mode);
+    }
+  </script>
+</body>
+</html>