d2c10756ab
- Implement local backend AI provider with Ollama integration - Add Brave Search API integration for real-time search suggestions - Add image generation manager with multiple AI providers - Create hybrid provider system with local/cloud fallback - Add comprehensive settings UI with provider management - Implement Gutenberg sidebar with writing assistance controls - Add SEO schema generation for AI-generated content - Multiple provider support: OpenRouter, local backend, Codex
87 lines
2.3 KiB
Markdown
87 lines
2.3 KiB
Markdown
# Writing Mode Empty State UX Fix
|
|
|
|
**Date:** January 30, 2026
|
|
**Status:** Fixed
|
|
**Issue Type:** UX Improvement
|
|
|
|
---
|
|
|
|
## Problem Statement
|
|
|
|
When users opened the sidebar in Writing mode without an outline, they encountered confusing UX:
|
|
|
|
1. "No Outline Yet" message displayed
|
|
2. Chat input remained visible
|
|
3. Users thought they were stuck or could chat directly
|
|
4. Potential cost waste from sending messages that wouldn't work
|
|
|
|
### Root Cause
|
|
|
|
The empty state component was displayed correctly, but the chat input area was not conditionally hidden. This created mixed signals.
|
|
|
|
---
|
|
|
|
## Solution Implemented
|
|
|
|
### 1. Hide Chat Input When Empty State Shows
|
|
|
|
**File:** `assets/js/sidebar.js:5550-5553`
|
|
|
|
Added conditional rendering to hide context indicator and command input:
|
|
|
|
```javascript
|
|
// Hide when showing empty state
|
|
!shouldShowWritingEmptyState() && renderContextIndicator(),
|
|
!shouldShowWritingEmptyState() && wp.element.createElement('div', { className: 'wpaw-command-area'...
|
|
```
|
|
|
|
### 2. Improved Empty State Message
|
|
|
|
**File:** `assets/js/sidebar.js:4350-4380`
|
|
|
|
**Old:**
|
|
- Title: "No Outline Yet"
|
|
- Body: "Writing mode requires an outline to structure your article."
|
|
|
|
**New:**
|
|
- Title: "Create an Outline First"
|
|
- Body: "Before writing, you need to create an outline to structure your article. This ensures better content organization and prevents wasted costs."
|
|
- Tip: "Planning mode helps you brainstorm and structure your content before writing."
|
|
|
|
---
|
|
|
|
## Files Modified
|
|
|
|
1. `assets/js/sidebar.js`
|
|
- Line 5550-5553: Added conditional rendering for context indicator and input area
|
|
- Line 4350-4380: Updated empty state message and removed Chat mode suggestion
|
|
|
|
---
|
|
|
|
## Result
|
|
|
|
**Before:**
|
|
- Empty state message + visible chat input = confusion
|
|
- Users could type but messages wouldn't work
|
|
- Unclear what action to take
|
|
|
|
**After:**
|
|
- Empty state message only
|
|
- No chat input visible
|
|
- Clear single action: "Switch to Planning Mode"
|
|
- Explains why outline is needed
|
|
- Prevents wasted API calls
|
|
|
|
---
|
|
|
|
## Testing Checklist
|
|
|
|
- [ ] Open new post in Writing mode (no outline)
|
|
- [ ] Verify empty state shows
|
|
- [ ] Verify chat input is hidden
|
|
- [ ] Click "Switch to Planning Mode" button
|
|
- [ ] Verify mode switches to Planning
|
|
- [ ] Create outline
|
|
- [ ] Switch back to Writing mode
|
|
- [ ] Verify chat input now visible
|