Auto-collapses code blocks in Google AI Studio by interacting natively with Angular Material components.
A simple yet essential userscript to keep your interface clean and organized in Google AI Studio.
When interacting with the AI to write entire programs, refactor functions, or build complex scripts, responses often contain massive blocks of code. This clutters the chat, breaks your reading flow, and forces you to do endless scrolling just to read the AI's explanations or find previous messages in the conversation.
This script solves that problem by automatically collapsing all code blocks as soon as they appear on the screen. If you need to review, copy, or download the generated code, simply click the header to expand it back out.
Google AI Studio is a Single Page Application (SPA) built on Angular using Angular Material UI components. Trying to hide code blocks by injecting crude CSS styles (like display: none or hacking max-heights) often causes visual glitches or breaks constantly due to dynamic streaming (as the AI generates text token by token and re-renders the Virtual DOM).
Instead of fighting against the framework, this script works in harmony with it:
MutationObserver to detect the creation of new <mat-expansion-panel> components.As a result, Angular handles closing the block using its own internal logic and native animations, ensuring that the entire UI (including copy and download buttons) stays completely intact and functional, no matter how much code the AI streams in the background.