Spaces:
Build error
Build error
File size: 4,144 Bytes
d83e271 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 |
# 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. |