☰

T3 Chat Enhanced UI with Code Execution

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

作者
marekmarek
日安装量
0
总安装量
0
评分
0 0 0
版本
3.4
创建于
2025-04-14
更新于
2025-04-14
大小
22.4 KB
许可证
MIT
适用于

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.