About the code snippets in Google AI Studio

Google AI Studio
, , , ,
1

I need to know how to choose to collapse the code snippets by default in the chat of Google AI Studio so you can expand them as you want, if you want.

It’s quite painful when Gemini give you some code for multiple files plus explanation and you have to scroll back to the top of the conversation to read the whole thing.

2

For anyone having trouble with code snippets always opened in Google AI Studio, i wrote a simple tampermonkey script :

  • When you open the conv, it automatically close current loaded open snippets
  • then it deactive itself, letting you interacte as you want with your conv
  • A new “Collapse code” button appears just at the right of the chat field. You can just clic for closing all code snippets.

It’s easy and simple, you can modify it as you want :

Code :

// ==UserScript==
// @name         Google AI Studio - Auto-collapse Code Blocks + Manual Control (v2.1)
// @namespace    http://tampermonkey.net/
// @version      2.1
// @description  Collapse code blocks on load, then allow manual opening + add button to collapse manually
// @match        https://aistudio.google.com/*
// @grant        Kfay
// ==/UserScript==

(function() {
    'use strict';

    let autoMode = true;

    function collapseAll() {
        const openButtons = document.querySelectorAll(
            'ms-code-block button[data-test-id="expand-icon-button"] span'
        );
        let collapsed = 0;

        openButtons.forEach(span => {
            if (span.textContent.trim() === "expand_less") {
                const btn = span.closest('button');
                if (btn) {
                    btn.click();
                    collapsed++;
                }
            }
        });

        return collapsed;
    }

    function stopAutoMode() {
        autoMode = false;
        observer.disconnect();
        console.log("[AI Studio Collapse] Auto mode disabled; manual mode enabled.");
    }

    const observer = new MutationObserver(() => {
        if (!autoMode) return;
        const changed = collapseAll();
        if (changed === 0) stopAutoMode();
    });

    observer.observe(document.body, { childList: true, subtree: true });

    setTimeout(() => {
        const changed = collapseAll();
        if (changed === 0) stopAutoMode();
    }, 1200);


    // --- BOUTON FLOTTANT REPOSITIONNÉ ---
    const btn = document.createElement("button");
    btn.innerText = "▼ Collapse code";

    Object.assign(btn.style, {
        position: "fixed",
        bottom: "25px",
        right: "30%",
        transform: "translateX(50%)",
        zIndex: 99999,
        padding: "10px 14px",
        background: "#333",
        color: "#fff",
        border: "none",
        borderRadius: "6px",
        cursor: "pointer",
        boxShadow: "0 2px 8px rgba(0,0,0,0.3)",
        fontSize: "13px",
        opacity: "1",
        transition: "opacity 0.2s ease"
    });

    btn.addEventListener("mouseover", () => btn.style.opacity = "0.85");
    btn.addEventListener("mouseout", () => btn.style.opacity = "1");

    btn.addEventListener("click", () => {
        autoMode = false;
        collapseAll();
    });

    document.body.appendChild(btn);

})();