Firefox-extension/popup.js

// Function to send user input to ChatGPT API and handle response
async function sendMessageToChatGPT(message) {
    try {
        // Make a POST request to ChatGPT API with user input
        const response = await fetch('https://api.openai.com/v1/chat/completions', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'Authorization': 'Bearer YOUR_OPENAI_API_KEY' // Replace with your OpenAI API key
            },
            body: JSON.stringify({
                model: 'text-davinci-002', // Sample model for demonstration
                messages: [{ role: 'user', content: message }]
            })
        });

        // Parse the response JSON
        const data = await response.json();

        // Extract the response message from the API response
        const chatGPTResponse = data.choices[0].message.content;

        // Return the response message
        return chatGPTResponse;
    } catch (error) {
        // Handle any errors that occur during the API request
        console.error('Error sending message to ChatGPT:', error);
        return 'Sorry, there was an error. Please try again later.';
    }
}

// Function to display conversation message
function displayMessage(role, content) {
    // Create message container
    const messageContainer = document.createElement('div');
    messageContainer.classList.add('message', role);

    // Create message text
    const messageText = document.createElement('span');
    messageText.textContent = content;

    // Create copy button
    const copyButton = document.createElement('button');
    copyButton.textContent = 'Copy';
    copyButton.classList.add('copy-button');

    // Add click event listener to copy button
    copyButton.addEventListener('click', function () {
        // Copy message content to clipboard
        navigator.clipboard.writeText(content)
            .then(() => {
                console.log('Content copied to clipboard:', content);
            })
            .catch((error) => {
                console.error('Failed to copy content to clipboard:', error);
            });
    });

    // Append elements to message container
    messageContainer.appendChild(messageText);
    messageContainer.appendChild(copyButton);

    // Append message container to conversation
    document.getElementById('conversation').appendChild(messageContainer);
}

// Event listener for submit button click
document.getElementById('submit').addEventListener('click', async function () {
    const userInput = document.getElementById('input').value.trim();
    if (userInput !== '') {
        // Display user's message
        displayMessage('user', userInput);
        
        // Send user input to ChatGPT API and get response
        const chatGPTResponse = await sendMessageToChatGPT(userInput);
        
        // Display ChatGPT's response
        displayMessage('chatgpt', chatGPTResponse);
    }
});