Coze Panel Control

Coze Bot 预览面板UI修改器!
// ==UserScript==
// @name         Coze Panel Control
// @namespace    https://greasyfork.org/
// @version      v2024.7.0.3
// @license MIT
// @description  Coze Bot 预览面板UI修改器!
// @author       Youber
// @match        https://www.coze.com/space/*/bot/*
// @icon         https://www.google.com/s2/favicons?sz=64&domain=coze.com
// @grant        none
// ==/UserScript==

(function() {
    'use strict';
    // Create div container
    var flexContainer = document.createElement("div");

    // Set styles directly
    flexContainer.style.display = 'flex';
    flexContainer.style.position = 'fixed';
    flexContainer.style.top = '8px';
    flexContainer.style.left = '500px';
    flexContainer.style.width = 'fit-content';
    flexContainer.style.height = '40px';
    flexContainer.style.backgroundColor = '#4299e1'; // Example color value
    flexContainer.style.alignItems = 'end';
    flexContainer.style.zIndex = '2000';
    flexContainer.style.cursor = 'move'; // Cursor indicates element is movable

    // Variables to hold the drag status and position
    var isDragging = false;
    var dragOffsetX = 0;
    var dragOffsetY = 0;

    // Add the event listeners for the container
    flexContainer.addEventListener('mousedown', function (e) {
        // When user presses mouse button, we start dragging
        isDragging = true;
        // Calculate initial offset of the mouse from the element's top-left corner
        dragOffsetX = e.clientX - flexContainer.getBoundingClientRect().left;
        dragOffsetY = e.clientY - flexContainer.getBoundingClientRect().top;
        flexContainer.style.cursor = 'grabbing';

        // Prevent default drag behavior
        e.preventDefault();
    });

    document.addEventListener('mousemove', function (e) {
        // If dragging, then update the position of the element
        if (isDragging) {
            // Calculate the new position of the container
            var newX = e.clientX - dragOffsetX;
            var newY = e.clientY - dragOffsetY;

            // Get the boundaries of the viewport
            var screenWidth = window.innerWidth;
            var screenHeight = window.innerHeight;

            // Get the dimensions of the container
            var containerWidth = flexContainer.offsetWidth;
            var containerHeight = flexContainer.offsetHeight;

            // Set boundaries
            var minX = 0;
            var minY = 0;
            var maxX = screenWidth - containerWidth;
            var maxY = screenHeight - containerHeight;

            // Apply boundaries
            newX = Math.min(Math.max(newX, minX), maxX);
            newY = Math.min(Math.max(newY, minY), maxY);

            // Set the new position of the container
            flexContainer.style.left = newX + 'px';
            flexContainer.style.top = newY + 'px';
        }
    });

    document.addEventListener('mouseup', function () {
        // When user releases mouse button, we stop dragging
        isDragging = false;
        flexContainer.style.cursor = 'move';
    });

    // Create buttons
    var leftBtn = document.createElement("button");
    leftBtn.setAttribute("id", "left_btn");
    leftBtn.textContent = "Left";

    var centerBtn = document.createElement("button");
    centerBtn.setAttribute("id", "center_btn");
    centerBtn.textContent = "Center";

    var allBtn = document.createElement("button");
    allBtn.setAttribute("id", "all_btn");
    allBtn.textContent = "All";

    // Append buttons to the container
    flexContainer.appendChild(leftBtn);
    flexContainer.appendChild(centerBtn);
    flexContainer.appendChild(allBtn);

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

  leftBtn.addEventListener("click", function () {
    const controlPanel = document.querySelector(".arQAab07X2IRwAe6dqHV");
    controlPanel.style.gridTemplateColumns = "10fr 0fr"
    const chatPanel = document.querySelector(".UMf9npeM8cVkDi0CDqZ0");
    chatPanel.style.gridTemplateColumns = "6fr 14fr"
  });

  centerBtn.addEventListener("click", function () {
    const controlPanel = document.querySelector(".arQAab07X2IRwAe6dqHV");
    controlPanel.style.gridTemplateColumns = "0fr 10fr"
    const chatPanel = document.querySelector(".UMf9npeM8cVkDi0CDqZ0");
    chatPanel.style.gridTemplateColumns = "6fr 14fr"
  });

  allBtn.addEventListener("click", function () {
    const controlPanel = document.querySelector(".arQAab07X2IRwAe6dqHV");
    controlPanel.style.gridTemplateColumns = "13fr 13fr"

    const chatPanel = document.querySelector(".qrPNrOyVEBA326VHThBn");
    chatPanel.style.gridTemplateColumns = "26fr 14fr"
  });

    // Task 1
    function tryTask1() {
        let header;
        const checkLoop = setInterval(function () {
            header = document.querySelector(".arQAab07X2IRwAe6dqHV");
            if (header) {
                console.log("get header success");
                header.style.display = 'none';
                clearInterval(checkLoop);
            } else {
                console.log("try get header ...");
            }
        }, 500);
    }
     // Task 2
    function tryTask2() {
        let bottomLigher;
        const checkLoop = setInterval(function () {
            bottomLigher = document.querySelector(".qtV_UKcJKqgw6X0fPvI4");
            if (bottomLigher) {
                console.log("get bottomLigher success");
                 bottomLigher.remove()
                while(document.querySelector(".qtV_UKcJKqgw6X0fPvI4")) {
                    bottomLigher = document.querySelector(".qtV_UKcJKqgw6X0fPvI4");
                     bottomLigher.remove()
                    console.log("try remove bottom chat lighter");
                }
                console.log("remove success bottom chat lighter");
                clearInterval(checkLoop);
            } else {
                console.log("try get bottomLigher ...");
            }
        }, 500);
    }

    tryTask2();
    // Task 3
function tryTask3() {
    let logo;
    const checkLoop = setInterval(function () {
        logo = document.querySelector(".L2gqnVvONsWgOrkn3iNP");
        if (logo) {
            console.log("get logo success");
            logo.remove()
            while(document.querySelector(".L2gqnVvONsWgOrkn3iNP")) {
                logo = document.querySelector(".L2gqnVvONsWgOrkn3iNP");
                logo.remove()
                console.log("try remove logo");
            }
            console.log("remove success logo");
            clearInterval(checkLoop);
        } else {
            console.log("try get logo ...");
        }
    }, 500);
}
tryTask3();
    // tryTask1();
    // Your code here...
})();