dist/routes/widget.js

"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const express_1 = __importDefault(require("express"));
const database_1 = require("../db/database");
const router = express_1.default.Router();
// Get widget configuration
router.get('/config/:tenantId', async (req, res) => {
    try {
        const { tenantId } = req.params;
        // Get tenant info
        const tenant = await database_1.database.get('SELECT id, name, plan FROM tenants WHERE id = ?', [tenantId]);
        if (!tenant) {
            return res.status(404).json({ error: 'Tenant not found' });
        }
        // Get widget configuration
        const config = await database_1.database.get('SELECT config FROM widget_configs WHERE tenant_id = ?', [tenantId]);
        const defaultConfig = {
            theme: {
                primaryColor: '#6366f1',
                backgroundColor: '#ffffff',
                textColor: '#374151',
                borderRadius: '12px'
            },
            position: {
                bottom: '20px',
                right: '20px'
            },
            size: 'medium',
            welcome: {
                title: `Hi! I'm ${tenant.name}'s AI assistant`,
                message: 'How can I help you today?',
                showAvatar: true
            },
            features: {
                fileUpload: false,
                typing: true,
                ratings: true
            }
        };
        const widgetConfig = config ?
            { ...defaultConfig, ...JSON.parse(config.config) } :
            defaultConfig;
        res.json({
            tenantId,
            config: widgetConfig
        });
    }
    catch (error) {
        console.error('Get widget config error:', error);
        res.status(500).json({ error: 'Internal server error' });
    }
});
// Get widget script
router.get('/script/:tenantId', async (req, res) => {
    try {
        const { tenantId } = req.params;
        // Verify tenant exists
        const tenant = await database_1.database.get('SELECT id FROM tenants WHERE id = ?', [tenantId]);
        if (!tenant) {
            return res.status(404).json({ error: 'Tenant not found' });
        }
        const script = `
(function() {
  // MCP Chat Widget
  const TENANT_ID = '${tenantId}';
  const API_URL = '${process.env.FRONTEND_URL || 'http://localhost:3001'}/api';
  
  // Create widget container
  const widget = document.createElement('div');
  widget.id = 'mcp-chat-widget';
  widget.style.cssText = \`
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 350px;
    height: 500px;
    background: white;
    border-radius: 12px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
    z-index: 10000;
    display: none;
    flex-direction: column;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    border: 1px solid #e5e7eb;
  \`;

  // Create chat button
  const button = document.createElement('div');
  button.id = 'mcp-chat-button';
  button.style.cssText = \`
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    border-radius: 50%;
    cursor: pointer;
    z-index: 10001;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.4);
    transition: transform 0.2s ease;
  \`;
  
  button.innerHTML = \`
    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2">
      <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path>
    </svg>
  \`;

  button.onmouseover = () => button.style.transform = 'scale(1.05)';
  button.onmouseout = () => button.style.transform = 'scale(1)';

  // Widget header
  const header = document.createElement('div');
  header.style.cssText = \`
    padding: 16px;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    color: white;
    border-radius: 12px 12px 0 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
  \`;
  
  header.innerHTML = \`
    <div>
      <h3 style="margin: 0; font-size: 16px; font-weight: 600;">Chat Support</h3>
      <p style="margin: 4px 0 0 0; font-size: 12px; opacity: 0.9;">We're here to help!</p>
    </div>
    <button id="mcp-close-btn" style="background: none; border: none; color: white; font-size: 20px; cursor: pointer; padding: 4px;">×</button>
  \`;

  // Messages container
  const messages = document.createElement('div');
  messages.id = 'mcp-messages';
  messages.style.cssText = \`
    flex: 1;
    padding: 16px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
  \`;

  // Input container
  const inputContainer = document.createElement('div');
  inputContainer.style.cssText = \`
    padding: 16px;
    border-top: 1px solid #e5e7eb;
    display: flex;
    gap: 8px;
  \`;

  const input = document.createElement('input');
  input.type = 'text';
  input.placeholder = 'Type your message...';
  input.style.cssText = \`
    flex: 1;
    padding: 12px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    outline: none;
    font-size: 14px;
  \`;

  const sendBtn = document.createElement('button');
  sendBtn.textContent = 'Send';
  sendBtn.style.cssText = \`
    padding: 12px 16px;
    background: #6366f1;
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
  \`;

  // Assemble widget
  inputContainer.appendChild(input);
  inputContainer.appendChild(sendBtn);
  widget.appendChild(header);
  widget.appendChild(messages);
  widget.appendChild(inputContainer);

  // Add to page
  document.body.appendChild(button);
  document.body.appendChild(widget);

  // Session management
  let sessionToken = null;
  let isVisible = false;

  // Toggle widget
  function toggleWidget() {
    isVisible = !isVisible;
    widget.style.display = isVisible ? 'flex' : 'none';
    button.style.display = isVisible ? 'none' : 'flex';
    
    if (isVisible && !sessionToken) {
      initializeSession();
    }
  }

  // Initialize chat session
  async function initializeSession() {
    try {
      const response = await fetch(\`\${API_URL}/chat/sessions\`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          tenantId: TENANT_ID,
          domain: window.location.hostname,
          userAgent: navigator.userAgent
        })
      });
      
      const data = await response.json();
      sessionToken = data.sessionToken;
      
      // Add welcome message
      addMessage('ai', 'Hello! How can I help you today?');
    } catch (error) {
      console.error('Failed to initialize session:', error);
      addMessage('ai', 'Sorry, I\\'m having trouble connecting. Please try again later.');
    }
  }

  // Send message
  async function sendMessage(message) {
    if (!sessionToken || !message.trim()) return;

    addMessage('user', message);
    input.value = '';
    
    // Show typing indicator
    const typingEl = addMessage('ai', 'Typing...', true);
    
    try {
      const response = await fetch(\`\${API_URL}/chat/messages\`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          sessionToken,
          message,
          tenantId: TENANT_ID
        })
      });
      
      const data = await response.json();
      
      // Remove typing indicator
      typingEl.remove();
      
      // Add AI response
      addMessage('ai', data.response);
      
    } catch (error) {
      typingEl.remove();
      addMessage('ai', 'Sorry, I encountered an error. Please try again.');
    }
  }

  // Add message to chat
  function addMessage(sender, text, isTyping = false) {
    const messageEl = document.createElement('div');
    messageEl.style.cssText = \`
      max-width: 80%;
      padding: 12px 16px;
      border-radius: 18px;
      font-size: 14px;
      line-height: 1.4;
      \${sender === 'user' ? 
        'background: #6366f1; color: white; align-self: flex-end; margin-left: auto;' : 
        'background: #f3f4f6; color: #374151; align-self: flex-start;'
      }
      \${isTyping ? 'opacity: 0.7; font-style: italic;' : ''}
    \`;
    
    messageEl.textContent = text;
    messages.appendChild(messageEl);
    messages.scrollTop = messages.scrollHeight;
    
    return messageEl;
  }

  // Event listeners
  button.onclick = toggleWidget;
  header.querySelector('#mcp-close-btn').onclick = toggleWidget;
  sendBtn.onclick = () => sendMessage(input.value);
  input.onkeypress = (e) => {
    if (e.key === 'Enter') sendMessage(input.value);
  };

  console.log('MCP Chat Widget loaded successfully');
})();
`;
        res.setHeader('Content-Type', 'application/javascript');
        res.send(script);
    }
    catch (error) {
        console.error('Get widget script error:', error);
        res.status(500).json({ error: 'Internal server error' });
    }
});
exports.default = router;
//# sourceMappingURL=widget.js.map