155 lines
5.6 KiB
Markdown
155 lines
5.6 KiB
Markdown
# Clarification Quiz Fixes - Complete
|
|
|
|
## Issues Fixed
|
|
|
|
### 1. ✅ Generate After Clarification
|
|
**Problem**: Quiz answers weren't being passed to article generation, and `detectedLanguage` was missing.
|
|
|
|
**Fixed**:
|
|
- Added `detectedLanguage: detectedLanguage` to the API request in `submitAnswers()` (line 1083)
|
|
- Now language detection flows through properly from clarity check → quiz → generation
|
|
|
|
### 2. ✅ Loading Status
|
|
**Problem**: No proper loading state during clarification flow, and no timeout protection.
|
|
|
|
**Fixed**:
|
|
- Added 2-minute timeout detection (lines 1103-1114)
|
|
- Shows user-friendly timeout error message if AI hangs
|
|
- Properly clears timeout on completion/error
|
|
- `setIsLoading( true )` at start, `setIsLoading( false )` on completion/error
|
|
|
|
### 3. ✅ Separate Conversational and Timeline Messages
|
|
**Problem**: All messages were appearing as chat bubbles, including progress updates like "I'll write...".
|
|
|
|
**Fixed**:
|
|
- Applied the same progress detection logic from `sendMessage()` to `submitAnswers()`
|
|
- Progress updates (starting with "I'll", "Writing", "Now", "Creating", etc.) → Timeline entries with ✍️ icon
|
|
- Actual conversational content → Chat bubbles
|
|
- Removed "~~~ARTICLE~~~" markers properly
|
|
- Empty content after cleaning is skipped
|
|
|
|
**Added handlers** (lines 1147-1218):
|
|
```javascript
|
|
// Check if this looks like a progress update
|
|
const isProgressUpdate = /^(I'll|Writing|Now|Creating|Adding|Let me|I'll write)/i.test( cleanContent );
|
|
|
|
if ( isProgressUpdate ) {
|
|
// Add as timeline entry with ✍️ icon
|
|
} else {
|
|
// Add as chat bubble
|
|
}
|
|
```
|
|
|
|
### 4. ✅ Title Update Handling
|
|
**Problem**: Post title wasn't being updated after generation.
|
|
|
|
**Fixed**:
|
|
- Added `title_update` type handler (lines 1130-1131)
|
|
- Uses `dispatch( 'core/editor' ).editPost( { title: data.title } )`
|
|
- Same as working implementation in `sendMessage()`
|
|
|
|
### 5. ✅ Status Timeline Updates
|
|
**Problem**: Status updates weren't showing in timeline during generation.
|
|
|
|
**Fixed**:
|
|
- Added `status` type handler (lines 1132-1146)
|
|
- Updates timeline entry with current status, message, and icon
|
|
- Shows "Connecting to AI...", "Creating article outline...", "Writing content..." etc.
|
|
|
|
### 6. ✅ Error Handling
|
|
**Problem**: Errors were showing `alert()` instead of chat messages.
|
|
|
|
**Fixed**:
|
|
- Changed `alert()` to proper error chat bubbles (line 1089-1093)
|
|
- Errors now appear in the chat interface consistently
|
|
- Added error type handler with timeout cleanup (lines 1269-1276)
|
|
|
|
---
|
|
|
|
## Complete Flow Now Works
|
|
|
|
1. **User sends message** → Clarity check
|
|
2. **Clarity check detects language** → Stores in `detectedLanguage` state
|
|
3. **Quiz appears** (if needed) → User answers in detected language
|
|
4. **User clicks Continue** → `submitAnswers()` called
|
|
5. **Loading state activated** → Timeline shows "Generating article..."
|
|
6. **API called with**:
|
|
- `clarificationAnswers`: Quiz answers
|
|
- `detectedLanguage`: Detected from initial prompt
|
|
7. **Streaming responses**:
|
|
- `status` → Timeline updates (📋, ✍️ icons)
|
|
- `title_update` → Post title updated
|
|
- `conversational_stream` → Progress updates in timeline
|
|
- `conversational` → Actual chat content as bubbles
|
|
- `block` → Content inserted into editor
|
|
- `complete` → Timeline shows ✅ + completion message
|
|
8. **Timeout protection** → 2-minute timeout if AI hangs
|
|
9. **Error handling** → User-friendly error messages in chat
|
|
|
|
---
|
|
|
|
## Files Modified
|
|
|
|
**[assets/js/sidebar.js](assets/js/sidebar.js)**
|
|
- `submitAnswers()` function completely rewritten (lines 1046-1299)
|
|
- Added: `detectedLanguage` parameter
|
|
- Added: Timeout handling
|
|
- Added: Progress/timeline separation
|
|
- Added: Title update handling
|
|
- Added: Status updates
|
|
- Fixed: Error messages (no more alerts)
|
|
- Removed: Duplicate code causing syntax errors
|
|
|
|
---
|
|
|
|
## Testing Checklist
|
|
|
|
### Clarification Quiz Flow:
|
|
- [ ] Quiz appears for vague prompts
|
|
- [ ] Quiz questions in detected language (Indonesian/English)
|
|
- [ ] Answers captured correctly
|
|
- [ ] Continue button triggers generation
|
|
- [ ] Timeline shows "Generating article..." immediately
|
|
|
|
### Article Generation After Quiz:
|
|
- [ ] Quiz answers passed to backend
|
|
- [ ] Detected language passed to backend
|
|
- [ ] Plan generated in detected language
|
|
- [ ] Article content in detected language (no mixed language)
|
|
- [ ] Post title updated correctly
|
|
- [ ] Progress updates in timeline (not chat bubbles)
|
|
- [ ] Completion message as chat bubble
|
|
|
|
### Error Handling:
|
|
- [ ] Timeout shows error message after 2 minutes
|
|
- [ ] API errors show in chat (not alerts)
|
|
- [ ] Loading state cleared on error
|
|
- [ ] User can try again after error
|
|
|
|
### Visual Distinction:
|
|
- [ ] Timeline entries have icons (📝, ✍️, ✅, ❓)
|
|
- [ ] Progress updates: "Saya akan menulis..." → Timeline with ✍️
|
|
- [ ] Conversational: "Halo! Artikel selesai." → Chat bubble
|
|
- [ ] No "~~~ARTICLE~~~" markers visible
|
|
- [ ] Status updates update existing timeline entry
|
|
|
|
---
|
|
|
|
## Key Features Now Working
|
|
|
|
✅ **Language Detection Flow**: Clarity check → Store → Pass to generation → Enforce in AI
|
|
✅ **Quiz Integration**: Answers properly formatted and passed to backend
|
|
✅ **Visual Distinction**: Timeline vs Chat bubbles clearly separated
|
|
✅ **Progress Feedback**: User sees what's happening in real-time
|
|
✅ **Title Updates**: Post title automatically updated from generated plan
|
|
✅ **Timeout Protection**: 2-minute timeout prevents infinite hanging
|
|
✅ **Error Handling**: User-friendly errors in chat interface
|
|
✅ **Loading States**: Proper loading indication throughout flow
|
|
|
|
---
|
|
|
|
**Status**: ✅ All 4 issues fixed
|
|
**Files Modified**: 1 (assets/js/sidebar.js)
|
|
**Lines Changed**: ~250 lines in submitAnswers() function
|
|
**Testing**: Ready for user testing
|