// content.js
(() => {
    // Create floating chat container
    const createFloatingChat = () => {
      const container = document.createElement('div');
      container.innerHTML = `
        <div id="floating-chat" style="
          position: fixed;
          bottom: 20px;
          right: 20px;
          width: 400px;
          height: 600px;
          background: white;
          border-radius: 10px;
          box-shadow: 0 0 10px rgba(0,0,0,0.1);
          z-index: 10000;
          display: flex;
          flex-direction: column;
          overflow: hidden;
        ">
          <div id="chat-header" style="
            padding: 10px;
            background: #f5f5f5;
            cursor: move;
            display: flex;
            justify-content: space-between;
            align-items: center;
          ">
            <span>AI Chat Assistant</span>
            <div>
              <button id="minimize-chat" style="margin-right: 10px;">_</button>
              <button id="close-chat">×</button>
            </div>
          </div>
          <div id="chat-container" style="
            flex-grow: 1;
            overflow-y: auto;
            padding: 10px;
            background: white;
          "></div>
          <div id="input-container" style="
            padding: 10px;
            border-top: 1px solid #eee;
          ">
            <div style="display: flex; gap: 5px; margin-bottom: 5px;">
              <input type="text" id="message-input" placeholder="Type your message..." style="
                flex-grow: 1;
                padding: 5px;
                border: 1px solid #ddd;
                border-radius: 4px;
              ">
              <button id="send-button">Send</button>
            </div>
            <div style="display: flex; gap: 5px;">
              <button id="next-response">Next Response</button>
              <select id="translate-to">
                <option value="en">English</option>
                <option value="de">German</option>
                <option value="es">Spanish</option>
              </select>
              <button id="translate-button">Translate</button>
            </div>
          </div>
          <div id="model-info" style="
            padding: 5px;
            font-size: 12px;
            color: #666;
            background: #f5f5f5;
          "></div>
        </div>
      `;
      document.body.appendChild(container);
      
      // Make the chat draggable
      const chatWindow = document.getElementById('floating-chat');
      const header = document.getElementById('chat-header');
      let isDragging = false;
      let currentX;
      let currentY;
      let initialX;
      let initialY;
      let xOffset = 0;
      let yOffset = 0;
  
      header.addEventListener('mousedown', dragStart);
      document.addEventListener('mousemove', drag);
      document.addEventListener('mouseup', dragEnd);
  
      function dragStart(e) {
        initialX = e.clientX - xOffset;
        initialY = e.clientY - yOffset;
        if (e.target === header) {
          isDragging = true;
        }
      }
  
      function drag(e) {
        if (isDragging) {
          e.preventDefault();
          currentX = e.clientX - initialX;
          currentY = e.clientY - initialY;
          xOffset = currentX;
          yOffset = currentY;
          setTranslate(currentX, currentY, chatWindow);
        }
      }
  
      function setTranslate(xPos, yPos, el) {
        el.style.transform = `translate3d(${xPos}px, ${yPos}px, 0)`;
      }
  
      function dragEnd() {
        isDragging = false;
      }
  
      // Minimize/Maximize functionality
      let isMinimized = false;
      const chatContent = document.getElementById('chat-container');
      const inputContainer = document.getElementById('input-container');
      const modelInfo = document.getElementById('model-info');
      const minimizeBtn = document.getElementById('minimize-chat');
  
      minimizeBtn.addEventListener('click', () => {
        isMinimized = !isMinimized;
        chatContent.style.display = isMinimized ? 'none' : 'block';
        inputContainer.style.display = isMinimized ? 'none' : 'block';
        modelInfo.style.display = isMinimized ? 'none' : 'block';
        chatWindow.style.height = isMinimized ? '40px' : '600px';
        minimizeBtn.textContent = isMinimized ? '□' : '_';
      });
  
      // Close functionality
      document.getElementById('close-chat').addEventListener('click', () => {
        container.remove();
      });
  
      return container;
    };
  
    // Initialize chat functionality
    const initializeChat = () => {
      const container = createFloatingChat();
      
      let currentModelIndex = 0;
      let currentResponses = [];
      let currentLanguage = 'en';
  
      // Add message to chat
      function addMessage(text, isUser = false) {
        const chatContainer = document.getElementById('chat-container');
        const messageDiv = document.createElement('div');
        messageDiv.className = `message ${isUser ? 'user-message' : 'ai-message'}`;
        messageDiv.style.cssText = `
          margin-bottom: 10px;
          padding: 8px;
          border-radius: 5px;
          ${isUser ? 
            'background-color: #e3f2fd; margin-left: 20px;' : 
            'background-color: #f5f5f5; margin-right: 20px;'}
        `;
        messageDiv.textContent = text;
        chatContainer.appendChild(messageDiv);
        chatContainer.scrollTop = chatContainer.scrollHeight;
      }
  
      // Handle send message
      async function handleSend() {
        const input = document.getElementById('message-input');
        const text = input.value.trim();
        
        if (!text) return;
        
        addMessage(text, true);
        input.value = '';
        
        // Send message to background script for processing
        chrome.runtime.sendMessage({
          action: 'processMessage',
          text: text
        }, response => {
          if (response.error) {
            addMessage('Error: ' + response.error);
          } else {
            currentResponses = response.responses;
            currentLanguage = response.language;
            currentModelIndex = 0;
            addMessage(currentResponses[0]);
            updateModelInfo();
          }
        });
      }
  
      // Update model info display
      function updateModelInfo() {
        const modelInfo = document.getElementById('model-info');
        modelInfo.textContent = `Model ${currentModelIndex + 1}/3: Using ${currentLanguage} model`;
      }
  
      // Event listeners
      document.getElementById('send-button').addEventListener('click', handleSend);
      document.getElementById('message-input').addEventListener('keypress', (e) => {
        if (e.key === 'Enter') handleSend();
      });
  
      document.getElementById('next-response').addEventListener('click', () => {
        if (currentResponses.length === 0) return;
        
        currentModelIndex = (currentModelIndex + 1) % 3;
        const lastMessage = document.querySelector('.ai-message:last-child');
        if (lastMessage) {
          lastMessage.textContent = currentResponses[currentModelIndex];
        }
        updateModelInfo();
      });
  
      document.getElementById('translate-button').addEventListener('click', () => {
        const targetLang = document.getElementById('translate-to').value;
        const lastMessage = document.querySelector('.ai-message:last-child');
        
        if (!lastMessage) return;
        
        chrome.runtime.sendMessage({
          action: 'translate',
          text: lastMessage.textContent,
          targetLang: targetLang
        }, response => {
          if (response.error) {
            addMessage('Translation error: ' + response.error);
          } else {
            lastMessage.textContent = response.translatedText;
          }
        });
      });
    };
  
    // Initialize the chat when the content script loads
    initializeChat();
  })();

// background.js
const models = {
    en: [
      'facebook/blenderbot-400M-distill',
      'microsoft/DialoGPT-medium',
      'EleutherAI/gpt-neo-125M'
    ],
    de: [
      'deutsche-telekom/gbert-large',
      'bert-base-german-cased',
      'dbmdz/german-gpt2'
    ],
    es: [
      'dccuchile/bert-base-spanish-wwm-cased',
      'BSC-TeMU/roberta-base-bne',
      'bertin-project/bertin-roberta-base-spanish'
    ]
  };
  
  // Language detection function
  function detectLanguage(text) {
    const languages = {
      en: ['the', 'is', 'are', 'what', 'when', 'where'],
      de: ['der', 'die', 'das', 'ist', 'sind', 'wenn'],
      es: ['el', 'la', 'los', 'es', 'son', 'cuando']
    };
  
    text = text.toLowerCase();
    for (const [lang, words] of Object.entries(languages)) {
      if (words.some(word => text.includes(word))) {
        return lang;
      }
    }
    return 'en'; // Default to English
  }
  
  // Handle messages from content script
  chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
    if (request.action === 'processMessage') {
      const language = detectLanguage(request.text);
      
      // Make parallel requests to all models for the detected language
      Promise.all(models[language].map(model =>
        fetch('http://localhost:5000/chat', {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json'
          },
          body: JSON.stringify({
            text: request.text,
            model: model
          })
        })
        .then(response => response.json())
        .then(data => data.response)
        .catch(error => `Error: ${error.message}`)
      ))
      .then(responses => {
        sendResponse({
          responses: responses,
          language: language
        });
      })
      .catch(error => {
        sendResponse({
          error: error.message
        });
      });
      
      return true; // Required for async response
    }
    
    if (request.action === 'translate') {
      fetch('http://localhost:5000/translate', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json'
        },
        body: JSON.stringify({
          text: request.text,
          target_lang: request.targetLang
        })
      })
      .then(response => response.json())
      .then(data => {
        sendResponse({
          translatedText: data.translated_text
        });
      })
      .catch(error => {
        sendResponse({
          error: error.message
        });
      });
      
      return true; // Required for async response
    }
  });
  
  // Handle extension installation
  chrome.runtime.onInstalled.addListener(() => {
    console.log('Extension installed');
  });

// popup.html
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <style>
    body {
      width: 400px;
      height: 600px;
      padding: 10px;
      font-family: Arial, sans-serif;
    }
    #chat-container {
      height: 500px;
      overflow-y: auto;
      border: 1px solid #ccc;
      padding: 10px;
      margin-bottom: 10px;
    }
    .message {
      margin-bottom: 10px;
      padding: 8px;
      border-radius: 5px;
    }
    .user-message {
      background-color: #e3f2fd;
      margin-left: 20px;
    }
    .ai-message {
      background-color: #f5f5f5;
      margin-right: 20px;
    }
    #input-container {
      display: flex;
      gap: 5px;
    }
    #message-input {
      flex-grow: 1;
      padding: 5px;
    }
    .controls {
      display: flex;
      gap: 5px;
      margin-top: 5px;
    }
    button {
      padding: 5px 10px;
      cursor: pointer;
    }
    #model-info {
      font-size: 12px;
      color: #666;
      margin-top: 5px;
    }
    .loading {
      color: #666;
      font-style: italic;
    }
  </style>
</head>
<body>
  <div id="chat-container"></div>
  <div id="input-container">
    <input type="text" id="message-input" placeholder="Type your message...">
    <button id="send-button">Send</button>
  </div>
  <div class="controls">
    <button id="next-response">Next Response</button>
    <select id="translate-to">
      <option value="en">English</option>
      <option value="de">German</option>
      <option value="es">Spanish</option>
    </select>
    <button id="translate-button">Translate</button>
  </div>
  <div id="model-info"></div>
  <script src="popup.js"></script>
</body>
</html>

// popup.js
const models = {
    en: [
      'facebook/blenderbot-400M-distill',
      'microsoft/DialoGPT-medium',
      'EleutherAI/gpt-neo-125M'
    ],
    de: [
      'deutsche-telekom/gbert-large',
      'bert-base-german-cased',
      'dbmdz/german-gpt2'
    ],
    es: [
      'dccuchile/bert-base-spanish-wwm-cased',
      'BSC-TeMU/roberta-base-bne',
      'bertin-project/bertin-roberta-base-spanish'
    ]
  };
  
  let currentModelIndex = 0;
  let currentResponses = [];
  let currentLanguage = 'en';
  
  // Language detection function
  function detectLanguage(text) {
    // Simple language detection based on common words
    const languages = {
      en: ['the', 'is', 'are', 'what', 'when', 'where'],
      de: ['der', 'die', 'das', 'ist', 'sind', 'wenn'],
      es: ['el', 'la', 'los', 'es', 'son', 'cuando']
    };
  
    text = text.toLowerCase();
    for (const [lang, words] of Object.entries(languages)) {
      if (words.some(word => text.includes(word))) {
        return lang;
      }
    }
    return 'en'; // Default to English
  }
  
  async function translateText(text, targetLang) {
    const response = await fetch('http://localhost:5000/translate', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({
        text,
        target_lang: targetLang
      })
    });
    const data = await response.json();
    return data.translated_text;
  }
  
  async function getAIResponse(text, modelName) {
    try {
      const response = await fetch('http://localhost:5000/chat', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json'
        },
        body: JSON.stringify({
          text,
          model: modelName
        })
      });
      const data = await response.json();
      return data.response;
    } catch (error) {
      console.error('Error getting AI response:', error);
      return 'Error: Could not get response from the model.';
    }
  }
  
  function addMessage(text, isUser = false) {
    const chatContainer = document.getElementById('chat-container');
    const messageDiv = document.createElement('div');
    messageDiv.className = `message ${isUser ? 'user-message' : 'ai-message'}`;
    messageDiv.textContent = text;
    chatContainer.appendChild(messageDiv);
    chatContainer.scrollTop = chatContainer.scrollHeight;
  }
  
  async function handleSend() {
    const input = document.getElementById('message-input');
    const text = input.value.trim();
    
    if (!text) return;
    
    addMessage(text, true);
    input.value = '';
    
    const detectedLang = detectLanguage(text);
    currentLanguage = detectedLang;
    currentResponses = [];
    currentModelIndex = 0;
    
    document.getElementById('model-info').textContent = 'Loading responses...';
    
    // Get responses from all models for the detected language
    for (const model of models[detectedLang]) {
      const response = await getAIResponse(text, model);
      currentResponses.push(response);
    }
    
    addMessage(currentResponses[0]);
    document.getElementById('model-info').textContent = 
      `Model ${currentModelIndex + 1}/3: ${models[detectedLang][currentModelIndex]}`;
  }
  
  document.getElementById('send-button').addEventListener('click', handleSend);
  document.getElementById('message-input').addEventListener('keypress', (e) => {
    if (e.key === 'Enter') handleSend();
  });
  
  document.getElementById('next-response').addEventListener('click', () => {
    if (currentResponses.length === 0) return;
    
    currentModelIndex = (currentModelIndex + 1) % 3;
    const lastMessage = document.querySelector('.ai-message:last-child');
    if (lastMessage) {
      lastMessage.textContent = currentResponses[currentModelIndex];
    }
    
    document.getElementById('model-info').textContent = 
      `Model ${currentModelIndex + 1}/3: ${models[currentLanguage][currentModelIndex]}`;
  });
  
  document.getElementById('translate-button').addEventListener('click', async () => {
    const targetLang = document.getElementById('translate-to').value;
    const lastMessage = document.querySelector('.ai-message:last-child');
    
    if (!lastMessage) return;
    
    const originalText = lastMessage.textContent;
    lastMessage.textContent = 'Translating...';
    
    const translatedText = await translateText(originalText, targetLang);
    lastMessage.textContent = translatedText;
  });
  
Can you add more advanced features to my app without removing existing features. Just advance the existing ones and add new ones to make it robust and improve user experience. Also, I want the floating chat window to remain active until I close it manually. I want to be able to drag it from one corner to another. Inlcude advanced visual features as well to make it more appealing. DO NOT REMOVE EXISTING FEATURES OR METHODS. JUST ADVANCE EXISTING ONES AND ADD NEW ONES. Include a settings page and add more customization for the user.