@jidou-ai/chat-widget 1.0.0

package/scripts/mock-server.js

@@ -0,0 +1,436 @@
+/**
+ * Mock WebSocket Server for testing the chat widget
+ *
+ * This server simulates the chatAgent backend for local development.
+ * It echoes messages back with a simulated AI response.
+ */
+
+const http = require('http');
+const crypto = require('crypto');
+const { execFileSync } = require('child_process');
+const { WebSocketServer } = require('ws');
+const fs = require('fs');
+const path = require('path');
+
+const WS_PORT = 8080;
+const HTTP_PORT = 3000;
+
+// Store active sessions
+const sessions = new Map();
+
+// Create WebSocket server
+const wss = new WebSocketServer({ port: WS_PORT });
+
+console.log(`WebSocket server running on ws://localhost:${WS_PORT}`);
+
+wss.on('connection', (ws, req) => {
+  const url = new URL(req.url, `http://localhost:${WS_PORT}`);
+  const clientId = url.searchParams.get('clientId') || 'unknown';
+  const sessionId = url.searchParams.get('sessionId') || crypto.randomUUID();
+
+  console.log(`[WS] New connection: clientId=${clientId}, sessionId=${sessionId}`);
+
+  const isResumed = sessions.has(sessionId);
+  sessions.set(sessionId, { clientId, lastActive: Date.now() });
+
+  // Send connection acknowledgment
+  setTimeout(() => {
+    sendMessage(ws, {
+      type: 'connection:ack',
+      payload: {
+        sessionId,
+        isResumed,
+      },
+    });
+  }, 100);
+
+  ws.on('message', (data) => {
+    try {
+      const message = JSON.parse(data.toString());
+      console.log(`[WS] Received (${sessionId}):`, message.type);
+      handleMessage(ws, sessionId, message);
+    } catch (error) {
+      console.error('[WS] Error parsing message:', error);
+      sendMessage(ws, {
+        type: 'error',
+        payload: { code: 'PARSE_ERROR', message: 'Failed to parse message' },
+      });
+    }
+  });
+
+  ws.on('close', () => {
+    console.log(`[WS] Connection closed: ${sessionId}`);
+  });
+
+  ws.on('error', (error) => {
+    console.error(`[WS] Socket error:`, error.message);
+  });
+});
+
+function sendMessage(ws, message) {
+  if (ws.readyState === 1) { // WebSocket.OPEN
+    const data = JSON.stringify({ ...message, timestamp: Date.now() });
+    console.log(`[WS] Sending: ${message.type}`);
+    ws.send(data);
+  } else {
+    console.log(`[WS] Cannot send ${message.type}, ws.readyState=${ws.readyState}`);
+  }
+}
+
+function handleMessage(ws, sessionId, message) {
+  switch (message.type) {
+    case 'session:init':
+      sendMessage(ws, {
+        type: 'connection:ack',
+        payload: { sessionId, isResumed: false },
+      });
+      break;
+
+    case 'message:send':
+      handleUserMessage(ws, sessionId, message.payload);
+      break;
+
+    case 'typing:start':
+    case 'typing:stop':
+      // Could broadcast to other clients if needed
+      break;
+
+    case 'ping':
+      sendMessage(ws, { type: 'pong' });
+      break;
+
+    default:
+      console.log(`[WS] Unknown message type: ${message.type}`);
+  }
+}
+
+function handleUserMessage(ws, sessionId, payload) {
+  const userMessage = payload?.content || '';
+  console.log(`[WS] User message (${sessionId}): ${userMessage}`);
+
+  // Send typing indicator
+  sendMessage(ws, { type: 'bot:typing' });
+
+  // Simulate AI thinking time (1-2 seconds)
+  const thinkingTime = 1000 + Math.random() * 1000;
+
+  setTimeout(() => {
+    const response = generateMockResponse(userMessage);
+
+    sendMessage(ws, {
+      type: 'message:receive',
+      payload: {
+        id: `msg_${crypto.randomUUID().slice(0, 8)}`,
+        content: response,
+        role: 'assistant',
+      },
+    });
+  }, thinkingTime);
+}
+
+function generateMockResponse(userMessage) {
+  const lowerMessage = userMessage.toLowerCase();
+
+  if (lowerMessage.includes('hello') || lowerMessage.includes('hi') || lowerMessage.includes('你好')) {
+    return '你好！我是智導 AI 助理。有什麼我可以幫助你的嗎？';
+  }
+
+  if (lowerMessage.includes('help') || lowerMessage.includes('幫助')) {
+    return '我可以協助你：\n• 回答產品相關問題\n• 提供技術支援\n• 預約諮詢服務\n\n請問你需要哪方面的協助？';
+  }
+
+  if (lowerMessage.includes('price') || lowerMessage.includes('價格') || lowerMessage.includes('費用')) {
+    return '關於價格方案，我們提供：\n• 基本方案：免費\n• 專業方案：$99/月\n• 企業方案：客製報價\n\n需要我詳細介紹哪個方案嗎？';
+  }
+
+  if (lowerMessage.includes('bye') || lowerMessage.includes('再見') || lowerMessage.includes('謝謝')) {
+    return '謝謝你的詢問！如果還有其他問題，隨時歡迎回來。祝你有美好的一天！';
+  }
+
+  const responses = [
+    `收到你的訊息：「${userMessage}」\n\n這是一個測試回覆。在正式環境中，AI 會根據你的問題提供更詳細的回答。`,
+    `我理解你說的是：「${userMessage}」\n\n有什麼其他問題我可以幫助你的嗎？`,
+    `感謝你的詢問！關於「${userMessage}」，我會盡力為你解答。\n\n這是測試伺服器的模擬回覆。`,
+  ];
+
+  return responses[Math.floor(Math.random() * responses.length)];
+}
+
+// HTTP server for serving static files
+const httpServer = http.createServer((req, res) => {
+  let filePath = path.resolve(__dirname, '../dist', req.url === '/' ? 'index.html' : req.url.slice(1));
+
+  const ext = path.extname(filePath);
+  const contentTypes = {
+    '.html': 'text/html; charset=utf-8',
+    '.js': 'application/javascript; charset=utf-8',
+    '.css': 'text/css; charset=utf-8',
+    '.json': 'application/json; charset=utf-8',
+  };
+
+  fs.readFile(filePath, (err, content) => {
+    if (err) {
+      res.writeHead(404);
+      res.end('Not found');
+      return;
+    }
+    res.writeHead(200, { 'Content-Type': contentTypes[ext] || 'text/plain' });
+    res.end(content);
+  });
+});
+
+// Create test HTML page
+function createTestPage() {
+  const testHtml = `<!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:${WS_PORT}<br>
+        HTTP Server: http://localhost:${HTTP_PORT}
+      </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:${WS_PORT}',
+      colors: { primary: '#4F46E5' },
+      chatWindow: {
+        header: {
+          title: 'AI 助理',
+          subtitle: 'Online'
+        }
+      },
+      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>`;
+
+  const distDir = path.resolve(__dirname, '../dist');
+  if (!fs.existsSync(distDir)) {
+    fs.mkdirSync(distDir, { recursive: true });
+  }
+  fs.writeFileSync(path.join(distDir, 'index.html'), testHtml);
+}
+
+// Build widget before starting
+console.log('Building widget...');
+try {
+  execFileSync('npm', ['run', 'build'], {
+    cwd: path.resolve(__dirname, '..'),
+    stdio: 'inherit',
+  });
+} catch (error) {
+  console.error('Build failed, continuing anyway...');
+}
+
+createTestPage();
+
+// Start HTTP server
+httpServer.listen(HTTP_PORT, () => {
+  console.log(`HTTP server running on http://localhost:${HTTP_PORT}`);
+  console.log(`\nOpen http://localhost:${HTTP_PORT} in your browser to test the widget\n`);
+});

package/src/components/BaseComponent.ts

@@ -0,0 +1,67 @@
+/**
+ * Base component class for all UI components
+ */
+
+export abstract class BaseComponent<T = unknown> {
+  protected element: HTMLElement;
+  protected options: T;
+
+  constructor(options: T) {
+    this.options = options;
+    this.element = this.render();
+  }
+
+  /**
+   * Render the component and return the root element
+   */
+  protected abstract render(): HTMLElement;
+
+  /**
+   * Get the root element
+   */
+  getElement(): HTMLElement {
+    return this.element;
+  }
+
+  /**
+   * Mount the component to a parent element
+   */
+  mount(parent: HTMLElement | ShadowRoot): void {
+    parent.appendChild(this.element);
+  }
+
+  /**
+   * Unmount the component from the DOM
+   */
+  unmount(): void {
+    if (this.element.parentNode) {
+      this.element.parentNode.removeChild(this.element);
+    }
+  }
+
+  /**
+   * Update component with new options
+   */
+  update(options: Partial<T>): void {
+    this.options = { ...this.options, ...options };
+    this.refresh();
+  }
+
+  /**
+   * Re-render the component
+   */
+  protected refresh(): void {
+    const newElement = this.render();
+    if (this.element.parentNode) {
+      this.element.parentNode.replaceChild(newElement, this.element);
+    }
+    this.element = newElement;
+  }
+
+  /**
+   * Cleanup resources
+   */
+  destroy(): void {
+    this.unmount();
+  }
+}