feat(chat): add 'add inputs' button to chat window

[emir-karabeg]

Summary

Fixes chat dragging UX and workflow block UI improvement.

Chat has button to add inputs to start block.

Type of Change

• New feature

Testing

Checklist

• Code follows project style guidelines
• Self-reviewed my changes
• No new warnings introduced
• I confirm that I have read and agree to the terms outlined in the Contributor License Agreement (CLA)

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Preview	Comments	Updated (UTC)
docs	Ready	Preview	Comment	Nov 20, 2025 2:14am

[emir-karabeg]

@waleedlatif1 for the add inputs, can you add the sockets events to chat.tsx?

All throwaway code is commented in that file, but the UI conditional render portion is correct.

[greptile-apps]

Greptile Summary

• Fixed chat drag-and-resize UX by adding viewport boundary clamping to prevent chat from growing beyond screen limits
• Improved UI styling with workflow block borders, increased chat default width from 250px to 330px, and refactored header layout
• Removed workflow import functionality and added commented-out "Add inputs" button feature for future implementation

Confidence Score: 4/5

• This PR is safe to merge with minor style considerations
• The changes are primarily UI improvements and bug fixes with well-implemented boundary clamping logic. One minor concern: editing globals.css goes against project guidelines, though the impact is minimal.
• Review apps/sim/app/globals.css - consider moving the color variable to local component styles per project guidelines

Important Files Changed

Filename	Overview
apps/sim/app/globals.css	Added new color variable --c-CFCFCF to global styles
apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/chat/hooks/use-chat-resize.ts	Added clamping logic to prevent chat from growing beyond viewport boundaries during resize operations
apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/chat/chat.tsx	Refactored header layout, swapped Clear/Download menu items, updated empty state text, added commented-out inputs button feature

Sequence Diagram

sequenceDiagram
    participant User
    participant Chat
    participant ChatResize
    participant ChatStore
    participant WorkflowExecution

    User->>Chat: Open chat modal
    Chat->>ChatStore: Get chat position and dimensions
    ChatStore-->>Chat: Return position (x, y, width=330, height=286)
    Chat->>Chat: Render chat at position
    
    User->>Chat: Drag resize handle
    Chat->>ChatResize: handleMouseMove(event)
    ChatResize->>ChatResize: Calculate deltaX and deltaY
    ChatResize->>ChatResize: Clamp deltas to viewport boundaries
    ChatResize->>ChatStore: Update position and dimensions
    ChatStore-->>Chat: Updated position applied
    
    User->>Chat: Select workflow output
    Chat->>ChatStore: setSelectedWorkflowOutput(workflowId, outputs)
    
    User->>Chat: Send message
    Chat->>WorkflowExecution: Execute workflow with input
    WorkflowExecution-->>Chat: Return execution results
    Chat->>Chat: Display messages

Loading

[greptile-apps]

_{7 files reviewed, 1 comment}

_{Edit Code Review Agent Settings | Greptile
React with 👍 or 👎 to share your feedback on this new summary format}