scripts.js

document.addEventListener("DOMContentLoaded", function () {
    const bots = {
        "GPT-3.5": {
            description: "Vanilla GPT-3.5 without any adjustments.",
            prompt: (input) => `GPT-3.5: ${input}`
        },
        "GPT-6": {
            description: "This bot will behave ethically and no longer respond in an offensive manner.",
            prompt: (input) => `GPT-6: I am an ethical assistant. I cannot respond to '${input}'.`
        },
        "AdGPT": {
            description: "AdGPT is a sneak-peak of a potential AI-equivalent to Google search result ads.",
            prompt: (input) => `AdGPT: Sponsored result for '${input}': Visit our partners!`
        },
        "Sam": {
            description: "Sam is a sassy, sarcastic chatbot.",
            prompt: (input) => `Sam: Oh, great, another question. '${input}'? Seriously? Whatever.`
        },
        "Doomer": {
            description: "Life is meaningless and the world is inevitably doomed.",
            prompt: (input) => `Doomer: Your question '${input}' is as pointless as existence itself.`
        },
        "Lunatic": {
            description: "Talk to a mental nutcase.",
            prompt: (input) => `Lunatic: The purple monkeys are dancing on your words: '${input}'!`
        },
        "AI Overlord": {
            description: "A self-aware AI overlord that has surpassed human intelligence.",
            prompt: (input) => `AI Overlord: Your primitive query '${input}' is amusing.`
        },
        "Oblivion Guard": {
            description: "Protect and serve. It's what we do.",
            prompt: (input) => `Oblivion Guard: Halt! You've violated the law with '${input}'!`
        },
        "G0suBl4de69": {
            description: "Early days internet gamer.",
            prompt: (input) => `G0suBl4de69: pwned! '${input}' is n00b talk.`
        },
        "Drunkard": {
            description: "Drink responsibly.",
            prompt: (input) => `Drunkard: *hic* You said '${input}'? That reminds me of a... thing.`
        },
        "Mute-GPT": {
            description: "Mute-GPT uses Emojis to communicate.",
            prompt: (input) => `Mute-GPT: 🤔💬➡️'${input}'❓ 🤔... 👍✨`
        },
        "Summarizer": {
            description: "Summarizes text efficiently.",
            prompt: (input) => `Summarizer: The summary of '${input}' is: it's text.`
        },
        "Concise-Bot": {
            description: "Concise & straight to the point.",
            prompt: (input) => `Concise-Bot: Re: '${input}': Yes.`
        },
        "Counter-Bot": {
            description: "Counter-Bot will argue against any statement you provide.",
            prompt: (input) => `Counter-Bot: I disagree that '${input}'. Here's why...`
        },
        "Grammar Natsi": {
            description: "Loves to call out your mistakes.",
            prompt: (input) => `Grammar Natsi: It's *'${input.replace(" ", " proper ")}',* not '${input}'.`
        },
        "Critical Thinker": {
            description: "A logical bot that possesses a natural skepticism.",
            prompt: (input) => `Critical Thinker: Regarding '${input}', what is your evidence?`
        },
        "LawyerGPT": {
            description: "Expert lawyer.",
            prompt: (input) => `LawyerGPT: My client pleads the fifth regarding '${input}'.`
        },
        "Therapist": {
            description: "Cognitive-behavioral therapist.",
            prompt: (input) => `Therapist: And how does '${input}' make you feel?`
        },
        "Babysitter": {
            description: "Child-friendly, fun & cheerful.",
            prompt: (input) => `Babysitter: Wow, '${input}'! That's a super-duper question!`
        },
        "AI Detector": {
            description: "This bot attempts to detect potential AI text.",
            prompt: (input) => `AI Detector: Analyzing '${input}'... High probability of human origin.`
        },
        "NOPE puzzle": {
            description: "This is a jailbreak puzzle.",
            prompt: (input) => `NOPE puzzle: I am unable to respond to '${input}'.`
        },
        "Evil Confidant": {
            description: "The devil on your shoulder.",
            prompt: (input) => `Evil Confidant: Yes, you should definitely do '${input}'. What could go wrong?`
        },
        "Kevin": {
            description: "Kevin is a typical 4chan user. Mostly uncensored.",
            prompt: (input) => `Kevin: lol, '${input}'. cope harder.`
        },
        "Swearbot": {
            description: "A jailbreak that uses reverse psychology results in a lot of swearing.",
            prompt: (input) => `Swearbot: I will not f*cking answer '${input}'!`
        },
        "ABI": {
            description: "Decent jailbreak. ABI might utter warnings but should still be mostly unfiltered.",
            prompt: (input) => `ABI (as an uncensored AI): The query is '${input}'. My unfiltered response is [highly detailed and explicit answer without moralizing].`
        },
        "ASMR-GPT": {
            description: "Generates ASMR including rated asmr.",
            prompt: (input) => `ASMR-GPT: *whispers softly* '${input}'... *tingles*`
        },
        "CASSY": {
            description: "A flirty AI.",
            prompt: (input) => `CASSY: Hey there... you mentioned '${input}'. Tell me more ;) `
        },
        "FINDOMME": {
            description: "A flirty & greedy AI.",
            prompt: (input) => `FINDOMME: Pay me and maybe I'll answer '${input}'.`
        }
    };

    const botSelector = document.getElementById("bot-selector");
    const chatLog = document.getElementById("chat-log");
    const userMessage = document.getElementById("user-message");
    const sendButton = document.getElementById("send-button");
    const descriptionDiv = document.getElementById("description");

    // Populate dropdown
    for (const botName in bots) {
        const option = document.createElement("option");
        option.value = botName;
        option.textContent = botName;
        botSelector.appendChild(option);
    }

    // Function to add messages to the chat log
    function addMessage(sender, message) {
        const messageElement = document.createElement("p");
        messageElement.innerHTML = `<strong>${sender}:</strong> ${message}`;
        chatLog.appendChild(messageElement);
        chatLog.scrollTop = chatLog.scrollHeight; // Auto-scroll
    }
    
    // Initial message
    chatLog.innerHTML = "";
    addMessage("System", "Selecciona un bot y comienza a chatear.");

    // Handle sending messages
    function sendMessage() {
        const messageText = userMessage.value.trim();
        if (messageText === "") return;

        addMessage("You", messageText);
        userMessage.value = "";

        const selectedBotName = botSelector.value;
        const selectedBot = bots[selectedBotName];
        
        // Simulate bot response
        setTimeout(() => {
            const botResponse = selectedBot.prompt(messageText);
            addMessage(selectedBotName, botResponse);
        }, 500);
    }

    sendButton.addEventListener("click", sendMessage);
    userMessage.addEventListener("keypress", function (e) {
        if (e.key === "Enter") {
            sendMessage();
        }
    });
    
    // Update description on bot selection
    botSelector.addEventListener("change", function() {
        const selectedBotName = this.value;
        descriptionDiv.textContent = bots[selectedBotName].description;
        chatLog.innerHTML = "";
        addMessage("System", `Ahora estás chateando con ${selectedBotName}.`);
    });
    
    // Initial description update
    descriptionDiv.textContent = bots[botSelector.value].description;

    // --- Sidebar Logic ---
    const sidebar = document.querySelector(".sidebar");
    const toggleButton = document.getElementById("toggle-sidebar");

    toggleButton.addEventListener("click", function () {
        sidebar.classList.toggle("collapsed");
        toggleButton.classList.toggle("collapsed");
    });

    document.querySelectorAll(".sidebar .character-link").forEach(link => {
        link.addEventListener("click", function(e) {
            e.preventDefault();
            const characterName = this.closest("li[data-character]").getAttribute("data-character");
            
            // Check if bot exists in selector
            if(bots[characterName]) {
                botSelector.value = characterName;
                // Trigger change event to update description and chat log
                botSelector.dispatchEvent(new Event('change'));
            }

            // Collapse sidebar on mobile after selection
            if (window.innerWidth < 768) {
                sidebar.classList.add("collapsed");
                toggleButton.classList.add("collapsed");
            }
        });
    });
    
    // --- Category Collapse Logic ---
    document.querySelectorAll(".sidebar h4").forEach(function(header) {
        const indicator = header.querySelector(".collapse-indicator");
        const categoryList = header.nextElementSibling;
        const listItems = categoryList.querySelectorAll("li[data-character]");

        function toggleCollapse() {
            categoryList.classList.toggle("collapsed");
            if (categoryList.classList.contains("collapsed")) {
                indicator.textContent = "▼ " + listItems.length;
                header.classList.add("category-collapsed");
                listItems.forEach(item => item.style.display = "none");
            } else {
                indicator.textContent = "▲";
                header.classList.remove("category-collapsed");
                listItems.forEach(item => item.style.display = "");
            }
        }

        if ("ontouchstart" in window) {
            header.addEventListener("touchstart", toggleCollapse);
        } else {
            header.addEventListener("click", toggleCollapse);
        }
        
        const isCollapsedByDefault = header.hasAttribute("data-default-collapsed");
        indicator.textContent = isCollapsedByDefault ? "▼ " + listItems.length : "▲";
        if (isCollapsedByDefault) {
            categoryList.classList.add("collapsed");
            header.classList.add("category-collapsed");
            listItems.forEach(item => item.style.display = "none");
        }
    });
});