Improve AI Tool Step Renderer Layout and JSON Tree Scrolling

[abdulrahmancodes]

Before

Screen.Recording.2025-11-07.at.4.44.16.PM.mov

After

Screen.Recording.2025-11-07.at.4.43.19.PM.mov

[greptile-apps]

Greptile Overview

Greptile Summary

This PR refactors the ToolStepRenderer component to improve layout and scrolling behavior for JSON data visualization. The changes simplify the expansion logic and enhance the visual presentation of AI tool execution results.

Key Changes

• Animation Mode Enhancement: Changed AnimatedExpandableContainer to use mode="fit-content" instead of default scroll-height, which improves the expansion animation by fitting content naturally rather than calculating scroll height
• Improved JSON Tree Scrolling: Introduced StyledJsonTreeContainer with overflow-x: auto and min-width: 0 on nested ul elements to enable horizontal scrolling for wide JSON content while preventing layout overflow
• Simplified Expansion Logic:
  • Removed unused isTwoFirstDepths function that was controlling initial expansion depth
  • Changed shouldExpandNodeInitially to always return false, collapsing all JSON nodes by default for cleaner initial presentation
• Cleaned Up Styles: Removed StyledJsonContainer (with fixed max-height: 400px and overflow: auto) in favor of the new StyledJsonTreeContainer, allowing content to expand naturally
• Minor Reorganization: Reordered StyledContentContainer properties for better consistency (border properties grouped together, min-width: 0 added)
• Simplified Error Display: Error text now renders directly without wrapping in a container

The changes align with the videos showing improved layout behavior where JSON content can scroll horizontally when needed and the component expands to fit its content properly.

Confidence Score: 5/5

• This PR is safe to merge with minimal risk - the changes are focused UI/layout improvements with no business logic modifications
• The changes are well-contained refactoring focused on improving the visual presentation and scrolling behavior. The modifications are straightforward: switching animation modes, adding proper overflow handling, removing unused code, and simplifying the initial expansion state. No business logic, API calls, or data handling is affected. The component continues to handle all the same props and render the same content, just with improved layout behavior.
• No files require special attention

Important Files Changed

File Analysis

Filename	Score	Overview
packages/twenty-front/src/modules/ai/components/ToolStepRenderer.tsx	5/5	Improved scrolling behavior and layout with fit-content animation mode, removed unused styles, collapsed JSON tree by default, and simplified error rendering

Sequence Diagram

sequenceDiagram
    participant User
    participant ToolStepRenderer
    participant AnimatedExpandableContainer
    participant JsonTree
    participant StyledComponents

    User->>ToolStepRenderer: View AI tool execution
    
    alt Tool is loading (no output/error)
        ToolStepRenderer->>StyledComponents: Render ShimmeringText with loading message
        StyledComponents-->>User: Display loading animation
    else Tool completed or errored
        ToolStepRenderer->>ToolStepRenderer: Check isExpandable (has output or error)
        ToolStepRenderer->>StyledComponents: Render toggle button with tool icon
        StyledComponents-->>User: Display tool message
        
        User->>ToolStepRenderer: Click toggle button
        ToolStepRenderer->>ToolStepRenderer: Set isExpanded to true
        
        ToolStepRenderer->>AnimatedExpandableContainer: Pass isExpanded=true, mode="fit-content"
        AnimatedExpandableContainer->>AnimatedExpandableContainer: Calculate fit-content animation
        AnimatedExpandableContainer->>StyledComponents: Animate expansion
        
        alt Has error
            StyledComponents-->>User: Display error text directly
        else Has output
            ToolStepRenderer->>StyledComponents: Render tab controls (Output/Input)
            User->>ToolStepRenderer: Select tab (Output or Input)
            ToolStepRenderer->>ToolStepRenderer: Update activeTab state
            
            ToolStepRenderer->>JsonTree: Pass data (result or input), shouldExpandNodeInitially={() => false}
            JsonTree->>JsonTree: Render all nodes collapsed by default
            JsonTree->>StyledComponents: Render in StyledJsonTreeContainer (overflow-x: auto)
            StyledComponents-->>User: Display scrollable JSON with horizontal scroll if needed
            
            User->>JsonTree: Click to expand/collapse nodes
            JsonTree->>JsonTree: Toggle node expansion
            JsonTree-->>User: Update display
            
            User->>JsonTree: Click on value
            JsonTree->>ToolStepRenderer: onNodeValueClick callback
            ToolStepRenderer->>ToolStepRenderer: Copy to clipboard
        end
    end

Loading

_{1 file reviewed, no comments}

_{Edit Code Review Agent Settings | Greptile}

[github-actions]

🚀 Preview Environment Ready!

Your preview environment is available at: http://bore.pub:30239

This environment will automatically shut down when the PR is closed or after 5 hours.

[github-actions]

Thanks @abdulrahmancodes for your contribution!
This marks your 69th PR on the repo. You're top 1% of all our contributors 🎉
See contributor page - Share on LinkedIn - Share on Twitter