bot.js

(function() {
  // Inject CSS
  const style = document.createElement('style');
  style.innerHTML = `
    .chatbot-launcher {
      position: fixed;
      bottom: 20px;
      right: 20px;
      background: #007bff;
      color: white;
      border-radius: 50%;
      width: 60px;
      height: 60px;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 28px;
      cursor: pointer;
      box-shadow: 0 8px 20px rgba(0,0,0,0.2);
      z-index: 9999;
    }

    .chatbot-box {
      position: fixed;
      bottom: 90px;
      right: 20px;
      width: 350px;
      max-height: 500px;
      background: white;
      border-radius: 10px;
      box-shadow: 0 8px 25px rgba(0,0,0,0.15);
      overflow: hidden;
      display: none;
      flex-direction: column;
      z-index: 9999;
    }

    .chatbot-header {
      background: #007bff;
      color: white;
      padding: 10px;
      text-align: center;
      font-weight: bold;
    }

    .chatbot-body {
      flex: 1;
      padding: 10px;
      overflow-y: auto;
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    .chatbot-footer {
      display: flex;
      padding: 10px;
      border-top: 1px solid #ddd;
    }

    .chatbot-footer input {
      flex: 1;
      padding: 8px;
      border-radius: 20px;
      border: 1px solid #ccc;
      outline: none;
    }

    .chatbot-footer button {
      background: #007bff;
      color: white;
      border: none;
      padding: 8px 12px;
      border-radius: 20px;
      margin-left: 8px;
      cursor: pointer;
    }

    .message {
      padding: 10px 14px;
      border-radius: 18px;
      max-width: 80%;
      animation: fadeIn 0.3s ease;
    }

    .user {
      align-self: flex-end;
      background: #daf0ff;
      text-align: right;
    }

    .bot {
      align-self: flex-start;
      background: #f1f4f9;
    }

    .typing-indicator {
      display: flex;
      align-items: center;
      gap: 4px;
      height: 20px;
      padding: 10px 16px;
      border-radius: 20px;
      background: #f1f4f9;
      align-self: flex-start;
    }

    .typing-indicator span {
      width: 6px;
      height: 6px;
      background-color: #555;
      border-radius: 50%;
      display: inline-block;
      animation: typing 1s infinite;
    }

    .typing-indicator span:nth-child(2) { animation-delay: 0.2s; }
    .typing-indicator span:nth-child(3) { animation-delay: 0.4s; }

    @keyframes typing {
      0%, 80%, 100% { transform: translateY(0); }
      40% { transform: translateY(-6px); }
    }

    @keyframes fadeIn {
      from { opacity: 0; transform: translateY(10px); }
      to { opacity: 1; transform: translateY(0); }
    }

    @media (max-width: 420px) {
      .chatbot-box {
        width: 90%;
        right: 5%;
      }
    }
  `;
  document.head.appendChild(style);

  // Chatbot HTML
  const launcher = document.createElement('div');
  launcher.className = 'chatbot-launcher';
  launcher.innerHTML = '💬';

  const box = document.createElement('div');
  box.className = 'chatbot-box';
  box.innerHTML = `
    <div class="chatbot-header">Smart Chatbot</div>
    <div class="chatbot-body" id="cb-chat"></div>
    <div class="chatbot-footer">
      <input type="text" id="cb-input" placeholder="Ask something..." />
      <button onclick="window.cbSend()">Send</button>
    </div>
  `;

  document.body.appendChild(launcher);
  document.body.appendChild(box);

  launcher.onclick = () => {
    box.style.display = box.style.display === 'flex' ? 'none' : 'flex';
  };

  // Chat logic
  const chatbox = box.querySelector('#cb-chat');
  const input = box.querySelector('#cb-input');

  const faq = [
    { question: "What is data rate?", answer: "Data rate refers to how much data is transmitted over a network per second, usually measured in bps (bits per second)." },
    { question: "How does data rate affect performance?", answer: "Higher data rates generally allow faster downloads, better streaming, and smoother communication." },
    { question: "What is the unit of data rate?", answer: "Data rate is measured in bps (bits per second), with units like kbps, Mbps, Gbps." }
  ];

  function appendMessage(sender, text) {
    const div = document.createElement('div');
    div.className = 'message ' + sender;
    div.textContent = text;
    chatbox.appendChild(div);
    chatbox.scrollTop = chatbox.scrollHeight;
  }

  function showTyping() {
    const typing = document.createElement('div');
    typing.className = 'typing-indicator';
    typing.innerHTML = '<span></span><span></span><span></span>';
    chatbox.appendChild(typing);
    chatbox.scrollTop = chatbox.scrollHeight;
    return typing;
  }

  function stringSimilarity(str1, str2) {
    const longer = str1.length > str2.length ? str1 : str2;
    const shorter = str1.length > str2.length ? str2 : str1;
    const same = longer.length === 0 ? 1.0 : (longer.length - editDistance(longer, shorter)) / longer.length;
    return same;
  }

  function editDistance(a, b) {
    const matrix = [];
    for (let i = 0; i <= b.length; i++) matrix[i] = [i];
    for (let j = 0; j <= a.length; j++) matrix[0][j] = j;
    for (let i = 1; i <= b.length; i++) {
      for (let j = 1; j <= a.length; j++) {
        if (b.charAt(i - 1) === a.charAt(j - 1)) {
          matrix[i][j] = matrix[i - 1][j - 1];
        } else {
          matrix[i][j] = Math.min(
            matrix[i - 1][j - 1] + 1,
            matrix[i][j - 1] + 1,
            matrix[i - 1][j] + 1
          );
        }
      }
    }
    return matrix[b.length][a.length];
  }

  window.cbSend = function() {
    const q = input.value.trim();
    if (!q) return;
    appendMessage('user', q);
    input.value = '';

    const typing = showTyping();
    setTimeout(() => {
      chatbox.removeChild(typing);
      const reply = findAnswer(q);
      appendMessage('bot', reply);
    }, 1500);
  }

  input.addEventListener('keydown', e => {
    if (e.key === 'Enter') window.cbSend();
  });

  function findAnswer(userInput) {
    userInput = userInput.toLowerCase();
    let best = null;
    let score = 0;
    faq.forEach(f => {
      const s = stringSimilarity(userInput, f.question.toLowerCase());
      if (s > score) {
        score = s;
        best = f.answer;
      }
    });
    return score >= 0.5 ? best : "Sorry, I cannot assist you with that.";
  }
})();