user: New script.user.js:119 Uncaught SyntaxError: Unexpected token 'class' (at New script.user.js:119:33)
    at async Wt (injected.js:1:8803)
    at async injected.js:1:14574

code:

// ==UserScript==
// @name        New script
// @namespace   Violentmonkey Scripts
// @match       *://*/*
// @grant       none
// @version     1.0
// @author      -
// @description 14/10/2024, 20.20.31
// ==/UserScript==

// Create the main button
const button = document.createElement("button");
button.style.position = "fixed";
button.style.width = "100px";
button.style.height = "50px";
button.style.zIndex = "9999";
button.style.bottom = "10px";
button.style.right = "10px";
button.innerText = "Open GUI"; // Button text

// Create the GUI container
const guiContainer = document.createElement("div");
guiContainer.style.position = "fixed";
guiContainer.style.bottom = "70px"; // Position above the button
guiContainer.style.right = "10px"; // Align with the button
guiContainer.style.backgroundColor = "white";
guiContainer.style.border = "1px solid #ccc";
guiContainer.style.boxShadow = "0 4px 8px rgba(0, 0, 0, 0.2)";
guiContainer.style.padding = "0"; // Padding for the container
guiContainer.style.zIndex = "10000";
guiContainer.style.display = "none"; // Initially hidden

// Create a close (X) button
const closeButton = document.createElement("button");
closeButton.innerText = "X"; // Close button text
closeButton.style.position = "absolute";
closeButton.style.top = "10px";
closeButton.style.right = "10px";

// Append close button to the GUI container
guiContainer.appendChild(closeButton);

// Append the full HTML structure
guiContainer.innerHTML += `
<div class="container">
<h1>Ethos AI</h1>
<button id="new-conversation">New Conversation</button>
<div class="toggle-container">
<span>Internet:</span>
<label class="toggle-switch">
<input type="checkbox" id="web-toggle">
<span class="toggle-slider"></span>
</label>
</div>
<div id="model-selector">
<label for="model-dropdown">Select Model:</label>
<select id="model-dropdown">
<option value="gpt-o1-preview">gpt-o1-preview</option>
<option value="gpt-o1-mini">gpt-o1-mini</option>
<option value="gpt-4o" selected>gpt-4o</option>
<option value="gpt-4o-turbo">gpt-4o-turbo</option>
<option value="gpt-4o-mini">gpt-4o-mini</option>
</select>
</div>
<div id="chat-container"></div>
<input type="file" id="image-upload" accept="image/*">
<div id="input-container">
<textarea id="user-input" placeholder="Type your message..." rows="1"></textarea>
<button id="send-message">Send</button>
</div>
</div>
<script>
    const chat = document.getElementById('chat-container'),
        input = document.getElementById('user-input'),
        send = document.getElementById('send-message'),
        reset = document.getElementById('new-conversation'),
        webToggle = document.getElementById('web-toggle'),
        modelDropdown = document.getElementById('model-dropdown'),
        imageUpload = document.getElementById('image-upload');

    let id = null, typing = false;

    const setInput = (state) => { input.disabled = send.disabled = typing = state; };

    const convertImageToBase64 = (file) => {
        return new Promise((resolve, reject) => {
            const reader = new FileReader();
            reader.onloadend = () => {
                const base64data = reader.result.split(',')[1];
                resolve(base64data);
            };
            reader.onerror = reject;
            reader.readAsDataURL(file);
        });
    };

    const sendMsg = async (msg) => {
        if (typing) return;
        setInput(true);
        const selectedModel = modelDropdown.value;

        let imageB64 = null;
        if (imageUpload.files.length > 0) {
            const file = imageUpload.files[0];
            imageB64 = await convertImageToBase64(file);
        }

        const payload = {
            prompt: msg,
            model: selectedModel,
            cvid: id,
            web: webToggle.checked,
        };

        if (imageB64) {
            payload.image = imageB64;
        }

        chat.innerHTML += `<div class="message user-message">${msg}</div>`;
        chat.scrollTop = chat.scrollHeight;

        const aiMsg = document.createElement('div');
        aiMsg.className = 'message ai-message';
        aiMsg.innerHTML = '<div class="loading-indicator"><div class="loading-circle"></div>' +
            (webToggle.checked ? "Thinking and searching through the web." : "Thinking...") +
            '</div>';
        chat.appendChild(aiMsg);
        chat.scrollTop = chat.scrollHeight;

        try {
            const response = await fetch('https://kairo-api.kys.gay/api/gpt', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify(payload)
            });
            const data = await response.json();
            if (data.error) throw new Error(data.error);

            if (data.conversation_id) {
                id = data.conversation_id;
            }

            aiMsg.innerHTML = marked.parse(data.message);
        } catch (error) {
            aiMsg.innerHTML = 'Error: ' + error.message;
        } finally {
            setInput(false);
            chat.scrollTop = chat.scrollHeight;
        }
    };

    input.addEventListener('input', function() {
        this.style.height = 'auto';
        this.style.height = (this.scrollHeight) + 'px';
    });

    input.addEventListener('keydown', function(e) {
        if (e.key === 'Enter') {
            if (e.shiftKey) {
                return;
            } else {
                e.preventDefault();
                send.click();
            }
        }
    });

    send.addEventListener('click', () => {
        const msg = input.value.trim();
        if (msg) {
            sendMsg(msg);
            input.value = '';
            input.style.height = 'auto'; // Reset height
            imageUpload.value = '';
        }
    });

    reset.addEventListener('click', () => {
        chat.innerHTML = '';
        id = null;
        input.value = '';
        input.style.height = 'auto'; // Reset height
        imageUpload.value = '';
    });
</script>
`;

// Append close button to the GUI container
guiContainer.appendChild(closeButton);

// Append the GUI container to the body
document.body.appendChild(guiContainer);

// Button click event to open the GUI
button.addEventListener("click", () => {
  guiContainer.style.display = "block"; // Show the GUI
  // const bodyText = document.body.innerText; // Get all text from the body
  // const updatedText = bodyText.replace(/UJIAN/gi, "LATIHAN"); // Replace UJIAN with LATIHAN
  // console.log(updatedText); // Log the updated text to the console
});

// Close button event to hide the GUI
closeButton.addEventListener("click", () => {
  guiContainer.style.display = "none"; // Hide the GUI
});

// Append the main button to the body
document.body.appendChild(button); // Append the button to the body
PROMPT: user: New script.user.js:119 Uncaught SyntaxError: Unexpected token 'class' (at New script.user.js:119:33)
    at async Wt (injected.js:1:8803)
    at async injected.js:1:14574

code:

// ==UserScript==
// @name        New script
// @namespace   Violentmonkey Scripts
// @match       *://*/*
// @grant       none
// @version     1.0
// @author      -
// @description 14/10/2024, 20.20.31
// ==/UserScript==

// Create the main button
const button = document.createElement("button");
button.style.position = "fixed";
button.style.width = "100px";
button.style.height = "50px";
button.style.zIndex = "9999";
button.style.bottom = "10px";
button.style.right = "10px";
button.innerText = "Open GUI"; // Button text

// Create the GUI container
const guiContainer = document.createElement("div");
guiContainer.style.position = "fixed";
guiContainer.style.bottom = "70px"; // Position above the button
guiContainer.style.right = "10px"; // Align with the button
guiContainer.style.backgroundColor = "white";
guiContainer.style.border = "1px solid #ccc";
guiContainer.style.boxShadow = "0 4px 8px rgba(0, 0, 0, 0.2)";
guiContainer.style.padding = "0"; // Padding for the container
guiContainer.style.zIndex = "10000";
guiContainer.style.display = "none"; // Initially hidden

// Create a close (X) button
const closeButton = document.createElement("button");
closeButton.innerText = "X"; // Close button text
closeButton.style.position = "absolute";
closeButton.style.top = "10px";
closeButton.style.right = "10px";

// Append close button to the GUI container
guiContainer.appendChild(closeButton);

// Append the full HTML structure
guiContainer.innerHTML += `
<div class="container">
<h1>Ethos AI</h1>
<button id="new-conversation">New Conversation</button>
<div class="toggle-container">
<span>Internet:</span>
<label class="toggle-switch">
<input type="checkbox" id="web-toggle">
<span class="toggle-slider"></span>
</label>
</div>
<div id="model-selector">
<label for="model-dropdown">Select Model:</label>
<select id="model-dropdown">
<option value="gpt-o1-preview">gpt-o1-preview</option>
<option value="gpt-o1-mini">gpt-o1-mini</option>
<option value="gpt-4o" selected>gpt-4o</option>
<option value="gpt-4o-turbo">gpt-4o-turbo</option>
<option value="gpt-4o-mini">gpt-4o-mini</option>
</select>
</div>
<div id="chat-container"></div>
<input type="file" id="image-upload" accept="image/*">
<div id="input-container">
<textarea id="user-input" placeholder="Type your message..." rows="1"></textarea>
<button id="send-message">Send</button>
</div>
</div>
<script>
    const chat = document.getElementById('chat-container'),
        input = document.getElementById('user-input'),
        send = document.getElementById('send-message'),
        reset = document.getElementById('new-conversation'),
        webToggle = document.getElementById('web-toggle'),
        modelDropdown = document.getElementById('model-dropdown'),
        imageUpload = document.getElementById('image-upload');

    let id = null, typing = false;

    const setInput = (state) => { input.disabled = send.disabled = typing = state; };

    const convertImageToBase64 = (file) => {
        return new Promise((resolve, reject) => {
            const reader = new FileReader();
            reader.onloadend = () => {
                const base64data = reader.result.split(',')[1];
                resolve(base64data);
            };
            reader.onerror = reject;
            reader.readAsDataURL(file);
        });
    };

    const sendMsg = async (msg) => {
        if (typing) return;
        setInput(true);
        const selectedModel = modelDropdown.value;

        let imageB64 = null;
        if (imageUpload.files.length > 0) {
            const file = imageUpload.files[0];
            imageB64 = await convertImageToBase64(file);
        }

        const payload = {
            prompt: msg,
            model: selectedModel,
            cvid: id,
            web: webToggle.checked,
        };

        if (imageB64) {
            payload.image = imageB64;
        }

        chat.innerHTML += `<div class="message user-message">${msg}</div>`;
        chat.scrollTop = chat.scrollHeight;

        const aiMsg = document.createElement('div');
        aiMsg.className = 'message ai-message';
        aiMsg.innerHTML = '<div class="loading-indicator"><div class="loading-circle"></div>' +
            (webToggle.checked ? "Thinking and searching through the web." : "Thinking...") +
            '</div>';
        chat.appendChild(aiMsg);
        chat.scrollTop = chat.scrollHeight;

        try {
            const response = await fetch('https://kairo-api.kys.gay/api/gpt', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify(payload)
            });
            const data = await response.json();
            if (data.error) throw new Error(data.error);

            if (data.conversation_id) {
                id = data.conversation_id;
            }

            aiMsg.innerHTML = marked.parse(data.message);
        } catch (error) {
            aiMsg.innerHTML = 'Error: ' + error.message;
        } finally {
            setInput(false);
            chat.scrollTop = chat.scrollHeight;
        }
    };

    input.addEventListener('input', function() {
        this.style.height = 'auto';
        this.style.height = (this.scrollHeight) + 'px';
    });

    input.addEventListener('keydown', function(e) {
        if (e.key === 'Enter') {
            if (e.shiftKey) {
                return;
            } else {
                e.preventDefault();
                send.click();
            }
        }
    });

    send.addEventListener('click', () => {
        const msg = input.value.trim();
        if (msg) {
            sendMsg(msg);
            input.value = '';
            input.style.height = 'auto'; // Reset height
            imageUpload.value = '';
        }
    });

    reset.addEventListener('click', () => {
        chat.innerHTML = '';
        id = null;
        input.value = '';
        input.style.height = 'auto'; // Reset height
        imageUpload.value = '';
    });
</script>
`;

// Append close button to the GUI container
guiContainer.appendChild(closeButton);

// Append the GUI container to the body
document.body.appendChild(guiContainer);

// Button click event to open the GUI
button.addEventListener("click", () => {
  guiContainer.style.display = "block"; // Show the GUI
  // const bodyText = document.body.innerText; // Get all text from the body
  // const updatedText = bodyText.replace(/UJIAN/gi, "LATIHAN"); // Replace UJIAN with LATIHAN
  // console.log(updatedText); // Log the updated text to the console
});

// Close button event to hide the GUI
closeButton.addEventListener("click", () => {
  guiContainer.style.display = "none"; // Hide the GUI
});

// Append the main button to the body
document.body.appendChild(button); // Append the button to the body