Connect Your Custom Chat UI

<!-- 1. Include Socket.io Client in your website HTML -->
<script src="https://cdn.socket.io/4.7.5/socket.io.min.js"></script>

<script>
  (function() {
    const BACKEND_URL = "https://t10868f0sd4tlemfrh4oo82q.213.199.42.255.sslip.io";
    const AGENT_TOKEN = "YOUR_LB_AGENT_TOKEN_HERE"; // Get from Dashboard > AI Tokens

    let tenantId = null;
    let chatId = null;
    let socket = null;

    // 1. Fetch Agent Token Config & Connect WebSocket
    async function initLeadBridge() {
      try {
        const res = await fetch(`${BACKEND_URL}/api/widget/token/${AGENT_TOKEN}`);
        const config = await res.json();
        tenantId = config.tenantId;

        console.log(`Connected to Bot: ${config.botName} for ${config.businessName}`);
        
        // Connect Socket.io client
        socket = io(BACKEND_URL);

        // Listen for AI or Human Operator responses
        socket.on('new_message', (msg) => {
          if (msg.senderType === 'AI' || msg.senderType === 'WORKER') {
            displayMessageInUI(msg.senderType === 'AI' ? config.botName : 'Human Agent', msg.content, 'incoming');
          }
        });

        // Listen for real-time chat closure
        socket.on('chat_closed', (data) => {
          console.log("Chat Session Closed:", data);
        });
      } catch (err) {
        console.error("LeadBridge Init Error:", err);
      }
    }

    // 2. Register Lead & Create Chat Session
    window.startLeadBridgeSession = async function(name, email, phone) {
      const res = await fetch(`${BACKEND_URL}/api/leads`, {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          tenantId: tenantId,
          token: AGENT_TOKEN,
          name: name || "Website Visitor",
          email: email || "visitor@guest.com",
          phone: phone || "+000000000",
          sourceDomain: window.location.hostname
        })
      });

      const data = await res.json();
      chatId = data.chat.id;

      // Join chat WebSocket room
      socket.emit('join_chat', { chatId: chatId });
    };

    // 3. Send Message from User Input
    window.sendLeadBridgeMessage = function(text) {
      if (!text || !text.trim() || !chatId || !socket) return;

      displayMessageInUI("You", text, "outgoing");

      socket.emit('send_message', {
        chatId: chatId,
        tenantId: tenantId,
        senderType: "LEAD",
        content: text
      });
    };

    // 4. End / Close Chat Session
    window.closeLeadBridgeSession = function() {
      if (!chatId || !socket) return;

      socket.emit('close_chat', {
        chatId: chatId,
        tenantId: tenantId,
        closedBy: "Lead"
      });
    };

    function displayMessageInUI(sender, text, direction) {
      console.log(`[${sender}]: ${text}`);
      // TODO: Replace with your custom chat widget bubble DOM rendering
    }

    document.addEventListener('DOMContentLoaded', initLeadBridge);
  })();
</script>

You are tasked with connecting our pre-built custom Chat UI to our backend AI platform: LeadBridge IA.
Follow the exact specifications below:

1. PRODUCTION ENDPOINTS:
- Backend URL: https://t10868f0sd4tlemfrh4oo82q.213.199.42.255.sslip.io
- GET Agent Config: https://t10868f0sd4tlemfrh4oo82q.213.199.42.255.sslip.io/api/widget/token/{AGENT_TOKEN}
- POST Create Lead: https://t10868f0sd4tlemfrh4oo82q.213.199.42.255.sslip.io/api/leads
- POST Close Chat: https://t10868f0sd4tlemfrh4oo82q.213.199.42.255.sslip.io/api/chats/{chatId}/close

2. REAL-TIME WEBSOCKETS (Socket.io):
- Connect to https://t10868f0sd4tlemfrh4oo82q.213.199.42.255.sslip.io
- Emit 'join_chat': { chatId }
- Emit 'send_message': { chatId, tenantId, senderType: 'LEAD', content }
- Emit 'close_chat': { chatId, tenantId, closedBy: 'Lead' }
- Listen 'new_message': handle AI & Human Agent responses
- Listen 'chat_closed': handle session termination