Canvas agent integration + Additional component framework support#49
Merged
Conversation
Introduces a new 'Add External Context to Dio' command and supporting infrastructure for sending canvas context and user input to the AI chat. Updates the canvas panel to handle 'canvasAiChat' messages, formats context details, and triggers the new command. The webview and toolbar UI are updated with an 'Add to context' button and improved input handling, while types and context-building logic are added to support this feature.
Adds logic to persist and restore the last active canvas when the Roopik extension is activated. Implements state persistence in RoopikExtensionManager and introduces a new internal command 'roopik.core.getCanvas' for retrieving canvas information during restoration.
Introduces screenshot capture functionality when selecting elements in inspect mode and allows attaching screenshots to AI chat messages. Updates the webview, sandbox, and extension logic to support capturing, transmitting, and handling screenshots, including device metadata. Adds html2canvas as a dependency for image capture.
Introduces logic to append framework core dependencies (e.g., react, react-dom) as CDN URL parameters for non-core packages, preventing multiple instances of core libraries like React. Adds framework-aware dependency resolution and configures esbuild to use the correct JSX import source per framework, addressing issues with context and singleton runtime behavior.
Refactors framework detection to use a single source of truth in ComponentParser, including a new detectFrameworkFromFile helper. Updates detectors.ts to delegate detection to this helper, adds better handling for JSX/TSX files without explicit imports, and ensures 'unknown' frameworks are re-detected in esbuildTransformer. Adds debug logging for framework detection in componentService.
Enhanced regex patterns in componentParser.ts to detect framework imports with subpaths (e.g., 'preact/hooks', 'solid-js/web'). Updated esbuildTransformer.ts to treat 'preact/hooks' as a subpath, not a separate package, and adjusted the Preact runtime code to use 'h' for rendering components.
Added 'esbuild-plugin-solid' to the ESLint config and project dependencies to enable Solid.js support in the esbuild pipeline. Updated related Babel and esbuild dependencies to their latest versions for compatibility.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
This pull request introduces significant enhancements to the Roopik extension, focusing on improved AI context integration for the canvas, state persistence for user workflows, and better dependency management for component builds. The most important changes are grouped below.
AI Context Integration & Command Handling:
externalContextcommand to the Roopik extension. This enables external context (such as canvas state, selected components, and user input) to be sent directly to the AI chat interface, supporting both auto-send and draft modes. The command is registered, mapped, and invoked from both the canvas and chat panel. [1] [2] [3] [4]canvasAiChatmessage handling and thehandleCanvasAiChatmethod inCanvasPanel, which collects detailed canvas and component context, formats it, and forwards it to the AI chat via the new command. [1] [2]Component Context & Data Flow:
ComponentLoadInfoand related usages) to includefolderPathandentryFile, ensuring more complete context is available for AI and UI features. [1] [2] [3]State Persistence & User Experience:
RoopikExtensionManagerand is called during extension activation. [1] [2] [3] [4] [5] [6] [7]Component Build & Dependency Management: