NOSSLETTER.techLIVE
back to archive

chat windows: chat windows of the Agents window on parts, with drag and drop between parts

Language: TypeScript+26759 -1915feature
concepts demonstrated
TypeScript interfacesDrag and drop APIModular UI componentsAccessibility enhancements
The Issue & Context

Before this PR, chat windows did not exist as separate parts within the Agents window, preventing users from arranging chat sessions flexibly or dragging chat parts between different sections of the window.

Root Cause Analysis

The existing window and editor architecture lacked support for multiple content parts within a single window grid and did not implement drag-and-drop logic for rearranging these parts, particularly for chat sessions in the Agents window context.

Solution Strategy & Architectural Pattern

This change introduces a new chat window system under vs/workbench/contrib/chatWindow that uses a PartGrid layout to host chat parts alongside main parts within a window. It implements IChatWindowService and IChatWindowProvider interfaces to manage chat content, layout modes, and session persistence. Drag-and-drop support between parts is enabled via new dnd.ts logic. The Agents window is the sole provider activating these chat windows behind a feature flag. Additionally, platform-specific behaviors like double-click on the title bar were restored to align with OS conventions.

Key Takeaway for Contributors

Building complex UI with multiple independently movable parts requires designing a flexible container abstraction (like PartGrid) and explicit drag-and-drop coordination to maintain consistent state and accessibility across parts.