☰

T3 Chat Enhanced UI with Code Execution

Adds a zoomed-out preview scrollbar, code block list, download functionality, and code execution to T3 Chat

Author
marekmarek
Daily installs
0
Total installs
0
Ratings
0 0 0
Version
3.4
Created
2025-04-14
Updated
2025-04-14
Size
22.4 KB
License
MIT
Applies to

Usage Instructions Once installed, the script automatically enhances the T3 Chat interface. Below are detailed instructions for using each feature.

  1. Preview Scrollbar Location: A narrow vertical bar on the right side of the screen. Purpose: Provides a zoomed-out view of the entire chat log for quick navigation. Usage: Drag the Thumb: Click and drag the blue thumb (a small rectangle within the scrollbar) to scroll through the chat. Click the Scrollbar: Click anywhere on the scrollbar (outside the thumb) to jump to that relative position in the chat. Visual Feedback: The preview updates dynamically as the chat content changes, with code blocks highlighted in orange for visibility.
  2. Code Block List Location: A panel on the left side of the main chat area, titled "Code Blocks." Purpose: Organizes all code snippets from the chat for easy access. Usage: View Code Blocks: Code blocks are grouped by message source (Assistant or User) and numbered for reference. Navigate: Click on a code block entry to scroll to its location in the chat. The block will be highlighted briefly. Actions: Copy: Click the copy icon (a square with an overlapping rectangle) to copy the code to your clipboard. A checkmark confirms success. Download: Click the download icon (a downward arrow) to save the code as a file with an appropriate extension (e.g., .js for JavaScript). A checkmark confirms the action. Run: For supported languages (JavaScript and HTML), click the play icon (a triangle) to execute the code. See the "Code Execution" section below.
  3. Code Execution Supported Languages: JavaScript and HTML. Purpose: Allows testing and running code snippets directly from the chat. Usage: Run Button: Available in the code block list or directly on the code block in the chat (a small "Run" button in the top-right corner). Output Window: Results appear in a floating black window at the bottom-right of the screen. JavaScript: Displays console output (log, error, warn, info) and return values. Errors are shown in red. HTML: Renders the HTML content in a sandboxed iframe within the output window. Close: Click the "×" button to hide the output window. Safety Note: Code execution happens in the browser. Avoid running untrusted code, as it can access your browser environment (see "Security Considerations" below).
  4. Code Management Language Detection: The script automatically detects the programming language of each code block based on class names or labels. File Naming: When downloading, the script uses the first line of code (if it’s a comment or title) or a default name, appending the correct file extension (e.g., .py for Python). Clipboard: Copying preserves the exact code content, stripped of line numbers or extraneous formatting.