Developers Digest
133 lines
4.0 KiB
Markdown
133 lines
4.0 KiB
Markdown
# UI Feedback Demonstration
|
|
|
|
This document demonstrates the new real-time feedback mechanism for package installation and command execution in the E2B sandbox UI.
|
|
|
|
## What's New
|
|
|
|
### 1. Real-time Package Installation Feedback
|
|
|
|
When packages are detected and installed from XML tags, users now see:
|
|
|
|
- 🔍 **Initial Analysis**: "Analyzing code and detecting dependencies..."
|
|
- 📦 **Package Detection**: "Step 1: Installing X packages..."
|
|
- **NPM Output**: Real-time npm install output with proper formatting
|
|
- Blue text for commands (`$ npm install react-router-dom`)
|
|
- Gray text for standard output
|
|
- Red text for errors
|
|
- ✅ **Success Messages**: Clear confirmation when packages are installed
|
|
|
|
### 2. File Creation Progress
|
|
|
|
- 📝 **File Creation Start**: "Creating X files..."
|
|
- **Individual File Updates**: Progress for each file being created/updated
|
|
- ✅ **Completion Status**: Visual confirmation for each file
|
|
|
|
### 3. Command Execution Feedback
|
|
|
|
When `<command>` tags are executed:
|
|
|
|
- ⚡ **Command Start**: Shows the command being executed
|
|
- **Real-time Output**: Displays stdout/stderr as it happens
|
|
- ✅/❌ **Exit Status**: Clear success/failure indicators
|
|
|
|
## Example Flow
|
|
|
|
Here's what users see when applying code with packages and commands:
|
|
|
|
```
|
|
🔍 Analyzing code and detecting dependencies...
|
|
📦 Starting code application...
|
|
Step 1: Installing 3 packages...
|
|
$ npm install react-router-dom
|
|
> added 3 packages in 2.3s
|
|
$ npm install axios
|
|
> added 1 package in 1.1s
|
|
$ npm install @heroicons/react
|
|
> added 1 package in 0.9s
|
|
✅ Successfully installed: react-router-dom, axios, @heroicons/react
|
|
|
|
Step 2: Creating 5 files...
|
|
📝 Creating 5 files...
|
|
|
|
Step 3: Executing 1 commands...
|
|
⚡ executing command: npm run dev
|
|
> app@0.0.0 dev
|
|
> vite
|
|
> VITE ready in 523ms
|
|
✅ Command completed successfully
|
|
```
|
|
|
|
## UI Components
|
|
|
|
### Chat Message Types
|
|
|
|
The UI now supports these message types with distinct styling:
|
|
|
|
1. **System Messages** (`bg-[#36322F] text-white text-sm`)
|
|
- General information and status updates
|
|
|
|
2. **Command Messages** (`bg-gray-100 text-gray-600 font-mono text-sm`)
|
|
- Input commands: Blue prefix (`$`)
|
|
- Output: Gray text
|
|
- Errors: Red text
|
|
- Success: Green text
|
|
|
|
3. **User Messages** (`bg-[#36322F] text-white`)
|
|
- User input and queries
|
|
|
|
4. **AI Messages** (`bg-secondary text-foreground`)
|
|
- AI responses
|
|
|
|
### Visual Indicators
|
|
|
|
- 🔍 Analyzing/Detection phase
|
|
- 📦 Package operations
|
|
- 📝 File operations
|
|
- ⚡ Command execution
|
|
- ✅ Success states
|
|
- ❌ Error states
|
|
- ⚠️ Warnings
|
|
|
|
## Implementation Details
|
|
|
|
### Streaming Response Format
|
|
|
|
The new `/api/apply-ai-code-stream` endpoint sends Server-Sent Events:
|
|
|
|
```typescript
|
|
data: {"type": "start", "message": "Starting code application...", "totalSteps": 3}
|
|
data: {"type": "step", "step": 1, "message": "Installing 3 packages..."}
|
|
data: {"type": "package-progress", "type": "output", "message": "added 3 packages"}
|
|
data: {"type": "file-progress", "current": 1, "total": 5, "fileName": "App.jsx"}
|
|
data: {"type": "command-output", "command": "npm run dev", "output": "VITE ready", "stream": "stdout"}
|
|
data: {"type": "complete", "results": {...}, "message": "Success"}
|
|
```
|
|
|
|
### Error Handling
|
|
|
|
Errors are displayed inline with context:
|
|
|
|
- Package installation failures
|
|
- File creation errors
|
|
- Command execution failures
|
|
|
|
Each error includes the specific operation that failed and helpful error messages.
|
|
|
|
## Benefits
|
|
|
|
1. **Transparency**: Users see exactly what's happening in real-time
|
|
2. **Debugging**: Easy to identify where issues occur
|
|
3. **Progress Tracking**: Clear indication of progress through multi-step operations
|
|
4. **Professional Feel**: Terminal-like output for technical operations
|
|
5. **Accessibility**: Color-coded output for quick scanning
|
|
|
|
## Usage
|
|
|
|
The feedback system automatically activates when:
|
|
|
|
1. Code with `<package>` or `<packages>` tags is applied
|
|
2. Files are created or updated
|
|
3. Commands from `<command>` tags are executed
|
|
4. Packages are auto-detected from import statements
|
|
|
|
No additional configuration is required - the UI automatically provides rich feedback for all operations. |