feat: npm command confirmation feature #1581
Open
+643
−78
Conversation
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
# NPM Command Confirmation Feature ## Summary of Changes We implemented a confirmation system for npm commands that: 1. Provides users with explicit "Yes, setup and start" or "No, skip for now" options 2. Properly executes npm commands in the WebContainer terminal when users choose to proceed 3. Gives feedback to users via chat messages and toast notifications ## Key Files Modified 1. **app/components/chat/MessageProcessor.tsx** (Created) - Processes pending messages for commands - Detects and executes npm installation and dev server startup commands - Provides visual confirmation of command execution 2. **app/lib/stores/workbench.ts** (Modified) - Added `pendingMessages` atom to store messages pending command execution - Added `registerArtifact` and `getArtifact` methods to manage artifacts - Modified `addCommandsMessage` to work with React hooks properly ## Technical Implementation Details 1. **Fixed React Hooks Issue** - Replaced direct hook calls with an atom-based approach using `pendingMessages` - Created a React component `MessageProcessor` to safely use hooks 2. **Command Execution** - Implemented special handling for "npm install" and "npm run dev" commands - Directly executes commands with the terminal interface instead of relying on empty action objects - Added proper sequencing of commands with delays to ensure stability 3. **User Feedback** - Added confirmation messages in the chat interface after actions complete - Added toast notifications for command progress and completion - Different confirmation messages based on whether setup was completed or skipped ## Key Benefits 1. **Improved User Experience** - Clear choices for users when setting up projects - Visual feedback for command execution process - Explicit confirmation of successful setup or choice to skip 2. **Increased Stability** - More reliable execution of npm commands - Graceful error handling with helpful error messages - Proper sequencing of commands with delays
Stijnus
added
the
feature
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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 PR is for #1396
NPM Command Confirmation Feature
Summary of Changes
We implemented a confirmation system for npm commands that:
Key Files Modified
app/components/chat/MessageProcessor.tsx (Created)
app/lib/stores/workbench.ts (Modified)
pendingMessagesatom to store messages pending command executionregisterArtifactandgetArtifactmethods to manage artifactsaddCommandsMessageto work with React hooks properlyTechnical Implementation Details
Fixed React Hooks Issue
pendingMessagesMessageProcessorto safely use hooksCommand Execution
User Feedback
Key Benefits
Improved User Experience
Increased Stability