1196 lines
31 KiB
Markdown
1196 lines
31 KiB
Markdown
# Context Management Implementation Plan
|
||
|
||
**Date:** January 25, 2026
|
||
**Version:** 0.1.3+ → 0.2.0
|
||
**Status:** 📋 APPROVED - READY FOR IMPLEMENTATION
|
||
|
||
---
|
||
|
||
## 📚 Approved Plans Summary
|
||
|
||
### **1. CONTEXT_FLOW_ANALYSIS.md**
|
||
|
||
**Key Findings:**
|
||
- ✅ Analyzed 12 distinct user interaction flows
|
||
- 🔴 Identified critical issues:
|
||
- Chat history NOT sent to Writing mode
|
||
- Writing mode notes ignored (don't update plan)
|
||
- Block refinement missing context
|
||
- Direct writing mode cannot execute (no plan)
|
||
- ✅ Mapped all context storage mechanisms
|
||
- ✅ Provided recommendations for fixes
|
||
|
||
**Critical Issues to Fix:**
|
||
|
||
| Issue | Severity | Impact |
|
||
|-------|----------|--------|
|
||
| Chat history not sent to Writing mode | 🔴 Critical | AI loses conversation context |
|
||
| Writing mode notes ignored | 🔴 Critical | User instructions silently ignored |
|
||
| Block refinement missing context | 🟡 Medium | AI doesn't understand original intent |
|
||
| Direct writing mode fails | 🟡 Medium | Confusing UX, no error handling |
|
||
|
||
---
|
||
|
||
### **2. AGENTIC_CONTEXT_STRATEGY.md**
|
||
|
||
**Key Solutions:**
|
||
- ✅ AI-powered context summarization (not hardcoded)
|
||
- ✅ AI-powered intent detection (language-agnostic)
|
||
- ✅ Cost-effective (~$0.0001 per summarization)
|
||
- ✅ Seamless agentic UX (proactive suggestions)
|
||
- ✅ Works in all languages (Indonesian, Arabic, Chinese, etc.)
|
||
|
||
**Core Philosophy:**
|
||
> "If AI is smart enough to write articles, it's smart enough to manage its own context."
|
||
|
||
**New Actions:**
|
||
|
||
| Action | Purpose | Cost | When |
|
||
|--------|---------|------|------|
|
||
| `summarize_context` | Condense chat history | $0.0001 | Before outline (if chat > 6 msgs) |
|
||
| `detect_intent` | Understand user's next step | $0.00002 | After each user message |
|
||
|
||
---
|
||
|
||
## 🎯 Implementation Goals
|
||
|
||
### **Primary Objectives**
|
||
|
||
1. **Fix Context Loss Issues**
|
||
- Send chat history to ALL endpoints
|
||
- Include context in block refinement
|
||
- Handle writing mode properly
|
||
|
||
2. **Implement Agentic Context Management**
|
||
- AI-powered summarization
|
||
- AI-powered intent detection
|
||
- Language-agnostic (no hardcoded keywords)
|
||
|
||
3. **Enhance User Experience**
|
||
- Proactive action suggestions
|
||
- Seamless mode transitions
|
||
- Transparent context operations
|
||
|
||
4. **Maintain Cost Efficiency**
|
||
- Total added cost: ~$0.34/month for 100 articles
|
||
- 76% token reduction vs full history
|
||
- Track all costs transparently
|
||
|
||
---
|
||
|
||
## 📋 Implementation Phases
|
||
|
||
### **Phase 1: Critical Fixes** (Priority: 🔴 HIGH)
|
||
|
||
**Goal:** Fix context loss issues identified in CONTEXT_FLOW_ANALYSIS.md
|
||
|
||
#### **1.1 Send Chat History Everywhere**
|
||
|
||
**Files to Modify:**
|
||
- `assets/js/sidebar.js`
|
||
|
||
**Changes:**
|
||
|
||
```javascript
|
||
// In ALL API request payloads, add chatHistory
|
||
const basePayload = {
|
||
messages: messages,
|
||
postId: postId,
|
||
chatHistory: messages.filter(m => m.role !== 'system'), // ✅ Add this
|
||
postConfig: postConfig,
|
||
type: agentMode
|
||
};
|
||
|
||
// Apply to:
|
||
// - handleExecuteArticle() → /execute-article
|
||
// - handleRefineBlock() → /refine-block
|
||
// - handleGenerateMeta() → /generate-meta
|
||
// - Any other endpoints that don't currently send chatHistory
|
||
```
|
||
|
||
**Backend Files to Modify:**
|
||
- `includes/class-gutenberg-sidebar.php`
|
||
|
||
**Changes:**
|
||
|
||
```php
|
||
// In handle_execute_article()
|
||
$chat_history = $params['chatHistory'] ?? array();
|
||
if (!empty($chat_history)) {
|
||
$chat_history_context = $this->build_chat_history_context($chat_history);
|
||
// Append to system prompt
|
||
}
|
||
|
||
// In handle_refine_block()
|
||
$chat_history = $params['chatHistory'] ?? array();
|
||
$plan = get_post_meta($post_id, '_wpaw_plan', true);
|
||
// Include both in refinement context
|
||
|
||
// In handle_generate_meta()
|
||
$chat_history = $params['chatHistory'] ?? array();
|
||
// Include for better meta description context
|
||
```
|
||
|
||
**Testing:**
|
||
- [ ] Test Chat → Writing mode (verify context preserved)
|
||
- [ ] Test block refinement (verify original intent understood)
|
||
- [ ] Test meta generation (verify context used)
|
||
|
||
**Estimated Time:** 2-3 hours
|
||
|
||
---
|
||
|
||
#### **1.2 Handle Writing Mode Properly**
|
||
|
||
**Problem:** User can switch to Writing mode without a plan, then cannot execute.
|
||
|
||
**Solution:** Show clear guidance and prevent confusion.
|
||
|
||
**Files to Modify:**
|
||
- `assets/js/sidebar.js`
|
||
|
||
**Changes:**
|
||
|
||
```javascript
|
||
// In renderWritingMode()
|
||
const renderWritingModeContent = () => {
|
||
if (!currentPlan) {
|
||
return (
|
||
<div className="writing-mode-empty">
|
||
<div className="empty-state">
|
||
<span className="icon">📝</span>
|
||
<h3>No Outline Yet</h3>
|
||
<p>Writing mode requires an outline to structure your article.</p>
|
||
<button
|
||
onClick={() => setAgentMode('planning')}
|
||
className="primary"
|
||
>
|
||
📝 Create Outline First
|
||
</button>
|
||
<p className="hint">
|
||
Or switch to <button onClick={() => setAgentMode('chat')} className="link">Chat mode</button> to discuss your ideas.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
// Normal writing mode UI...
|
||
};
|
||
|
||
// In handleExecuteArticle()
|
||
if (!currentPlan) {
|
||
showError('Please create an outline first. Switch to Planning mode.');
|
||
return;
|
||
}
|
||
```
|
||
|
||
**CSS to Add:**
|
||
- `assets/css/sidebar.css`
|
||
|
||
```css
|
||
.writing-mode-empty {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
min-height: 300px;
|
||
}
|
||
|
||
.empty-state {
|
||
text-align: center;
|
||
max-width: 400px;
|
||
padding: 2rem;
|
||
}
|
||
|
||
.empty-state .icon {
|
||
font-size: 3rem;
|
||
display: block;
|
||
margin-bottom: 1rem;
|
||
}
|
||
|
||
.empty-state h3 {
|
||
margin: 0 0 0.5rem 0;
|
||
font-size: 1.5rem;
|
||
}
|
||
|
||
.empty-state p {
|
||
color: #666;
|
||
margin: 0.5rem 0;
|
||
}
|
||
|
||
.empty-state .hint {
|
||
font-size: 0.9rem;
|
||
margin-top: 1rem;
|
||
}
|
||
```
|
||
|
||
**Testing:**
|
||
- [ ] Test switching to Writing mode without plan
|
||
- [ ] Verify clear guidance shown
|
||
- [ ] Test "Create Outline First" button
|
||
- [ ] Test switching back to Chat mode
|
||
|
||
**Estimated Time:** 1-2 hours
|
||
|
||
---
|
||
|
||
#### **1.3 Handle Writing Mode Notes**
|
||
|
||
**Problem:** User adds notes in Writing mode, but notes don't update the plan.
|
||
|
||
**Solution:** Either update plan or show clear warning.
|
||
|
||
**Recommended Approach:** Show warning (simpler, clearer UX)
|
||
|
||
**Files to Modify:**
|
||
- `assets/js/sidebar.js`
|
||
|
||
**Changes:**
|
||
|
||
```javascript
|
||
// In Writing mode, when user sends a message
|
||
const handleWritingModeMessage = async (userMessage) => {
|
||
// Show info message
|
||
addSystemMessage(
|
||
'💡 Note: To modify the outline, switch to Planning mode. ' +
|
||
'Writing mode messages are for discussion only.'
|
||
);
|
||
|
||
// Still send to chat endpoint for conversation
|
||
await sendChatMessage(userMessage);
|
||
};
|
||
|
||
// Add mode indicator in input area
|
||
const renderInputArea = () => {
|
||
return (
|
||
<div className="input-area">
|
||
{agentMode === 'writing' && currentPlan && (
|
||
<div className="mode-notice">
|
||
💬 Chat mode active. To modify outline, switch to Planning mode.
|
||
</div>
|
||
)}
|
||
<textarea {...} />
|
||
</div>
|
||
);
|
||
};
|
||
```
|
||
|
||
**Alternative Approach (Advanced):** Auto-update plan
|
||
- Detect if message is requesting plan changes
|
||
- Send to `/update-plan` endpoint
|
||
- Regenerate plan with modifications
|
||
- More complex, implement in Phase 3
|
||
|
||
**Testing:**
|
||
- [ ] Test adding notes in Writing mode
|
||
- [ ] Verify warning shown
|
||
- [ ] Verify notes don't silently fail
|
||
|
||
**Estimated Time:** 1 hour
|
||
|
||
---
|
||
|
||
### **Phase 2: Agentic Infrastructure** (Priority: 🟡 MEDIUM)
|
||
|
||
**Goal:** Implement AI-powered context management from AGENTIC_CONTEXT_STRATEGY.md
|
||
|
||
#### **2.1 Backend: Add Summarization Endpoint**
|
||
|
||
**Files to Modify:**
|
||
- `includes/class-gutenberg-sidebar.php`
|
||
|
||
**New Endpoint:**
|
||
|
||
```php
|
||
/**
|
||
* Register summarize-context endpoint.
|
||
*/
|
||
register_rest_route(
|
||
'wp-agentic-writer/v1',
|
||
'/summarize-context',
|
||
array(
|
||
'methods' => 'POST',
|
||
'callback' => array($this, 'handle_summarize_context'),
|
||
'permission_callback' => array($this, 'check_permissions'),
|
||
)
|
||
);
|
||
|
||
/**
|
||
* Handle context summarization request.
|
||
*
|
||
* @param WP_REST_Request $request REST request.
|
||
* @return WP_REST_Response|WP_Error Response.
|
||
*/
|
||
public function handle_summarize_context($request) {
|
||
$params = $request->get_json_params();
|
||
$chat_history = $params['chatHistory'] ?? array();
|
||
$post_id = $params['postId'] ?? 0;
|
||
|
||
// Short history doesn't need summarization
|
||
if (empty($chat_history) || count($chat_history) < 4) {
|
||
return new WP_REST_Response(
|
||
array(
|
||
'summary' => '',
|
||
'use_full_history' => true,
|
||
'cost' => 0,
|
||
),
|
||
200
|
||
);
|
||
}
|
||
|
||
// Build history text
|
||
$history_text = '';
|
||
foreach ($chat_history as $msg) {
|
||
$role = ucfirst($msg['role'] ?? 'Unknown');
|
||
$content = $msg['content'] ?? '';
|
||
$history_text .= "{$role}: {$content}\n\n";
|
||
}
|
||
|
||
// Build summarization prompt
|
||
$prompt = "Summarize this conversation into key points that capture the user's intent and requirements.
|
||
|
||
Focus on:
|
||
- Main topic
|
||
- Specific focus areas
|
||
- Rejected/excluded topics
|
||
- User preferences (tone, audience, etc.)
|
||
|
||
Keep the summary concise (max 200 words) but preserve critical context.
|
||
Write in the same language as the conversation.
|
||
|
||
Output format:
|
||
TOPIC: [main topic]
|
||
FOCUS: [what to include]
|
||
EXCLUDE: [what to avoid]
|
||
PREFERENCES: [any specific requirements]
|
||
|
||
Conversation:
|
||
{$history_text}";
|
||
|
||
// Call AI with cheap model
|
||
$provider = WP_Agentic_Writer_OpenRouter_Provider::get_instance();
|
||
$messages = array(
|
||
array(
|
||
'role' => 'user',
|
||
'content' => $prompt,
|
||
),
|
||
);
|
||
|
||
$response = $provider->chat($messages, array(), 'summarize');
|
||
|
||
if (is_wp_error($response)) {
|
||
return $response;
|
||
}
|
||
|
||
// Track cost
|
||
do_action(
|
||
'wp_aw_after_api_request',
|
||
$post_id,
|
||
$response['model'] ?? '',
|
||
'summarize_context',
|
||
$response['input_tokens'] ?? 0,
|
||
$response['output_tokens'] ?? 0,
|
||
$response['cost'] ?? 0
|
||
);
|
||
|
||
return new WP_REST_Response(
|
||
array(
|
||
'summary' => $response['content'] ?? '',
|
||
'use_full_history' => false,
|
||
'cost' => $response['cost'] ?? 0,
|
||
'tokens_saved' => count($chat_history) * 500 - ($response['output_tokens'] ?? 0),
|
||
),
|
||
200
|
||
);
|
||
}
|
||
```
|
||
|
||
**Testing:**
|
||
- [ ] Test with short history (< 4 messages) → returns use_full_history
|
||
- [ ] Test with long history (> 6 messages) → returns summary
|
||
- [ ] Test in multiple languages (English, Indonesian)
|
||
- [ ] Verify cost tracking
|
||
|
||
**Estimated Time:** 2-3 hours
|
||
|
||
---
|
||
|
||
#### **2.2 Backend: Add Intent Detection Endpoint**
|
||
|
||
**Files to Modify:**
|
||
- `includes/class-gutenberg-sidebar.php`
|
||
|
||
**New Endpoint:**
|
||
|
||
```php
|
||
/**
|
||
* Register detect-intent endpoint.
|
||
*/
|
||
register_rest_route(
|
||
'wp-agentic-writer/v1',
|
||
'/detect-intent',
|
||
array(
|
||
'methods' => 'POST',
|
||
'callback' => array($this, 'handle_detect_intent'),
|
||
'permission_callback' => array($this, 'check_permissions'),
|
||
)
|
||
);
|
||
|
||
/**
|
||
* Handle intent detection request.
|
||
*
|
||
* @param WP_REST_Request $request REST request.
|
||
* @return WP_REST_Response|WP_Error Response.
|
||
*/
|
||
public function handle_detect_intent($request) {
|
||
$params = $request->get_json_params();
|
||
$last_message = $params['lastMessage'] ?? '';
|
||
$has_plan = $params['hasPlan'] ?? false;
|
||
$current_mode = $params['currentMode'] ?? 'chat';
|
||
$post_id = $params['postId'] ?? 0;
|
||
|
||
if (empty($last_message)) {
|
||
return new WP_REST_Response(
|
||
array('intent' => 'continue_chat'),
|
||
200
|
||
);
|
||
}
|
||
|
||
// Build intent detection prompt
|
||
$prompt = "Based on the user's message, determine their intent. Choose ONE:
|
||
|
||
1. \"create_outline\" - User wants to create an article outline/structure
|
||
2. \"start_writing\" - User wants to write the full article
|
||
3. \"refine_content\" - User wants to improve existing content
|
||
4. \"continue_chat\" - User wants to continue discussing/exploring
|
||
5. \"clarify\" - User is asking questions or needs clarification
|
||
|
||
Consider:
|
||
- The user's explicit request
|
||
- Whether they have an outline already (has_plan: " . ($has_plan ? 'true' : 'false') . ")
|
||
- Current mode (current_mode: {$current_mode})
|
||
|
||
User's message: \"{$last_message}\"
|
||
|
||
Respond with ONLY the intent code (e.g., \"create_outline\"). No explanation.";
|
||
|
||
// Call AI with cheap model
|
||
$provider = WP_Agentic_Writer_OpenRouter_Provider::get_instance();
|
||
$messages = array(
|
||
array(
|
||
'role' => 'user',
|
||
'content' => $prompt,
|
||
),
|
||
);
|
||
|
||
$response = $provider->chat($messages, array(), 'intent_detection');
|
||
|
||
if (is_wp_error($response)) {
|
||
return $response;
|
||
}
|
||
|
||
// Track cost
|
||
do_action(
|
||
'wp_aw_after_api_request',
|
||
$post_id,
|
||
$response['model'] ?? '',
|
||
'detect_intent',
|
||
$response['input_tokens'] ?? 0,
|
||
$response['output_tokens'] ?? 0,
|
||
$response['cost'] ?? 0
|
||
);
|
||
|
||
// Clean up response
|
||
$intent = trim(strtolower($response['content'] ?? 'continue_chat'));
|
||
$intent = str_replace('"', '', $intent); // Remove quotes if present
|
||
|
||
// Validate intent
|
||
$valid_intents = array('create_outline', 'start_writing', 'refine_content', 'continue_chat', 'clarify');
|
||
if (!in_array($intent, $valid_intents)) {
|
||
$intent = 'continue_chat';
|
||
}
|
||
|
||
return new WP_REST_Response(
|
||
array(
|
||
'intent' => $intent,
|
||
'cost' => $response['cost'] ?? 0,
|
||
),
|
||
200
|
||
);
|
||
}
|
||
```
|
||
|
||
**Testing:**
|
||
- [ ] Test with "create outline" messages (various languages)
|
||
- [ ] Test with "write article" messages
|
||
- [ ] Test with questions/clarifications
|
||
- [ ] Verify correct intent returned
|
||
- [ ] Verify cost tracking
|
||
|
||
**Estimated Time:** 2-3 hours
|
||
|
||
---
|
||
|
||
#### **2.3 Backend: Update Cost Tracking**
|
||
|
||
**Files to Modify:**
|
||
- `includes/class-cost-tracker.php`
|
||
|
||
**Changes:**
|
||
|
||
```php
|
||
// Add new operation types
|
||
private function get_operation_label($operation) {
|
||
$labels = array(
|
||
'chat' => 'Chat',
|
||
'planning' => 'Planning',
|
||
'execution' => 'Article Writing',
|
||
'refinement' => 'Block Refinement',
|
||
'meta_description' => 'Meta Description',
|
||
'keyword_suggestion' => 'Keyword Suggestion',
|
||
'web_search' => 'Web Search',
|
||
'summarize_context' => 'Context Summarization', // ✅ New
|
||
'detect_intent' => 'Intent Detection', // ✅ New
|
||
);
|
||
|
||
return $labels[$operation] ?? ucfirst($operation);
|
||
}
|
||
```
|
||
|
||
**Testing:**
|
||
- [ ] Verify new operations tracked in cost table
|
||
- [ ] Verify cost breakdown shows summarization/intent costs
|
||
- [ ] Test cost report includes new operations
|
||
|
||
**Estimated Time:** 30 minutes
|
||
|
||
---
|
||
|
||
#### **2.4 Frontend: Implement Summarization**
|
||
|
||
**Files to Modify:**
|
||
- `assets/js/sidebar.js`
|
||
|
||
**New Functions:**
|
||
|
||
```javascript
|
||
/**
|
||
* Summarize chat history using AI.
|
||
*
|
||
* @param {Array} chatHistory - Full chat history.
|
||
* @returns {Promise<Object>} Summary result.
|
||
*/
|
||
const summarizeChatHistory = async (chatHistory) => {
|
||
try {
|
||
const response = await fetch('/wp-json/wp-agentic-writer/v1/summarize-context', {
|
||
method: 'POST',
|
||
headers: {
|
||
'Content-Type': 'application/json',
|
||
'X-WP-Nonce': wpAgenticWriter.nonce,
|
||
},
|
||
body: JSON.stringify({
|
||
chatHistory: chatHistory,
|
||
postId: postId,
|
||
}),
|
||
});
|
||
|
||
if (!response.ok) {
|
||
throw new Error('Failed to summarize context');
|
||
}
|
||
|
||
const data = await response.json();
|
||
return data;
|
||
} catch (error) {
|
||
console.error('Summarization error:', error);
|
||
return {
|
||
summary: '',
|
||
use_full_history: true,
|
||
cost: 0,
|
||
};
|
||
}
|
||
};
|
||
|
||
/**
|
||
* Build optimized context for API requests.
|
||
*
|
||
* @param {Array} messages - Current messages.
|
||
* @returns {Promise<Array>} Optimized context.
|
||
*/
|
||
const buildOptimizedContext = async (messages) => {
|
||
// Short history - use as is
|
||
if (messages.length <= 6) {
|
||
return messages;
|
||
}
|
||
|
||
// Show optimization status
|
||
setStatusMessage('⚡ Optimizing context...');
|
||
|
||
// Summarize
|
||
const { summary, use_full_history, cost, tokens_saved } = await summarizeChatHistory(messages);
|
||
|
||
if (use_full_history || !summary) {
|
||
return messages;
|
||
}
|
||
|
||
// Build optimized context: summary + last 2 messages
|
||
const optimizedContext = [
|
||
{
|
||
role: 'system',
|
||
content: `Context Summary:\n${summary}`,
|
||
},
|
||
...messages.slice(-2), // Keep last exchange verbatim
|
||
];
|
||
|
||
// Show success
|
||
console.log(`Context optimized. Tokens saved: ${tokens_saved}, Cost: $${cost.toFixed(6)}`);
|
||
|
||
return optimizedContext;
|
||
};
|
||
```
|
||
|
||
**Update Existing Functions:**
|
||
|
||
```javascript
|
||
// In handleCreateOutline()
|
||
const handleCreateOutline = async () => {
|
||
setIsLoading(true);
|
||
|
||
// Optimize context
|
||
const optimizedContext = await buildOptimizedContext(messages);
|
||
|
||
// Generate plan with optimized context
|
||
const payload = {
|
||
topic: extractTopic(messages),
|
||
chatHistory: optimizedContext, // ✅ Use optimized
|
||
postId: postId,
|
||
postConfig: postConfig,
|
||
stream: true,
|
||
};
|
||
|
||
// ... rest of function
|
||
};
|
||
```
|
||
|
||
**Testing:**
|
||
- [ ] Test with short history (≤ 6 messages) → no summarization
|
||
- [ ] Test with long history (> 6 messages) → summarization triggered
|
||
- [ ] Verify "Optimizing context..." message shown
|
||
- [ ] Verify outline quality maintained
|
||
|
||
**Estimated Time:** 2-3 hours
|
||
|
||
---
|
||
|
||
#### **2.5 Frontend: Implement Intent Detection**
|
||
|
||
**Files to Modify:**
|
||
- `assets/js/sidebar.js`
|
||
|
||
**New State:**
|
||
|
||
```javascript
|
||
const [detectedIntent, setDetectedIntent] = React.useState(null);
|
||
const [showContextualAction, setShowContextualAction] = React.useState(false);
|
||
```
|
||
|
||
**New Functions:**
|
||
|
||
```javascript
|
||
/**
|
||
* Detect user intent using AI.
|
||
*
|
||
* @param {string} lastMessage - User's last message.
|
||
* @returns {Promise<string>} Detected intent.
|
||
*/
|
||
const detectUserIntent = async (lastMessage) => {
|
||
try {
|
||
const response = await fetch('/wp-json/wp-agentic-writer/v1/detect-intent', {
|
||
method: 'POST',
|
||
headers: {
|
||
'Content-Type': 'application/json',
|
||
'X-WP-Nonce': wpAgenticWriter.nonce,
|
||
},
|
||
body: JSON.stringify({
|
||
lastMessage: lastMessage,
|
||
hasPlan: !!currentPlan,
|
||
currentMode: agentMode,
|
||
postId: postId,
|
||
}),
|
||
});
|
||
|
||
if (!response.ok) {
|
||
throw new Error('Failed to detect intent');
|
||
}
|
||
|
||
const data = await response.json();
|
||
return data.intent;
|
||
} catch (error) {
|
||
console.error('Intent detection error:', error);
|
||
return 'continue_chat';
|
||
}
|
||
};
|
||
|
||
/**
|
||
* Handle message sent - detect intent and show actions.
|
||
*/
|
||
const handleMessageSent = async (userMessage) => {
|
||
// Send to chat
|
||
await sendChatMessage(userMessage);
|
||
|
||
// Detect intent in background (only in chat mode)
|
||
if (agentMode === 'chat') {
|
||
const intent = await detectUserIntent(userMessage);
|
||
setDetectedIntent(intent);
|
||
setShowContextualAction(true);
|
||
}
|
||
};
|
||
```
|
||
|
||
**Render Contextual Actions:**
|
||
|
||
```javascript
|
||
/**
|
||
* Render contextual action based on detected intent.
|
||
*/
|
||
const renderContextualAction = () => {
|
||
if (!showContextualAction || !detectedIntent || agentMode !== 'chat') {
|
||
return null;
|
||
}
|
||
|
||
switch (detectedIntent) {
|
||
case 'create_outline':
|
||
return (
|
||
<div className="contextual-action">
|
||
<div className="action-content">
|
||
<span className="icon">💡</span>
|
||
<p>Ready to create an outline?</p>
|
||
</div>
|
||
<div className="action-buttons">
|
||
<button
|
||
onClick={handleCreateOutline}
|
||
className="primary"
|
||
>
|
||
📝 Create Outline
|
||
</button>
|
||
<button
|
||
onClick={() => setShowContextualAction(false)}
|
||
className="secondary"
|
||
>
|
||
💬 Continue Chatting
|
||
</button>
|
||
</div>
|
||
</div>
|
||
);
|
||
|
||
case 'start_writing':
|
||
if (!currentPlan) {
|
||
return (
|
||
<div className="contextual-action warning">
|
||
<div className="action-content">
|
||
<span className="icon">⚠️</span>
|
||
<p>You need an outline first</p>
|
||
</div>
|
||
<div className="action-buttons">
|
||
<button
|
||
onClick={handleCreateOutline}
|
||
className="primary"
|
||
>
|
||
📝 Create Outline First
|
||
</button>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
return (
|
||
<div className="contextual-action">
|
||
<div className="action-content">
|
||
<span className="icon">💡</span>
|
||
<p>Ready to write the article?</p>
|
||
</div>
|
||
<div className="action-buttons">
|
||
<button
|
||
onClick={handleStartWriting}
|
||
className="primary"
|
||
>
|
||
✍️ Start Writing
|
||
</button>
|
||
<button
|
||
onClick={() => setShowContextualAction(false)}
|
||
className="secondary"
|
||
>
|
||
💬 Continue Chatting
|
||
</button>
|
||
</div>
|
||
</div>
|
||
);
|
||
|
||
case 'refine_content':
|
||
return (
|
||
<div className="contextual-action info">
|
||
<div className="action-content">
|
||
<span className="icon">💡</span>
|
||
<p>Tip: Use @block to refine specific sections</p>
|
||
</div>
|
||
</div>
|
||
);
|
||
|
||
default:
|
||
return null;
|
||
}
|
||
};
|
||
|
||
// Add to main render
|
||
return (
|
||
<div className="sidebar-content">
|
||
{/* ... existing content ... */}
|
||
{renderContextualAction()}
|
||
{/* ... rest of content ... */}
|
||
</div>
|
||
);
|
||
```
|
||
|
||
**CSS to Add:**
|
||
|
||
```css
|
||
.contextual-action {
|
||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||
color: white;
|
||
padding: 1rem;
|
||
border-radius: 8px;
|
||
margin: 1rem 0;
|
||
animation: slideIn 0.3s ease-out;
|
||
}
|
||
|
||
.contextual-action.warning {
|
||
background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
|
||
}
|
||
|
||
.contextual-action.info {
|
||
background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
|
||
}
|
||
|
||
.contextual-action .action-content {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 0.75rem;
|
||
margin-bottom: 0.75rem;
|
||
}
|
||
|
||
.contextual-action .icon {
|
||
font-size: 1.5rem;
|
||
}
|
||
|
||
.contextual-action p {
|
||
margin: 0;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.contextual-action .action-buttons {
|
||
display: flex;
|
||
gap: 0.5rem;
|
||
}
|
||
|
||
.contextual-action button.primary {
|
||
background: white;
|
||
color: #667eea;
|
||
border: none;
|
||
padding: 0.5rem 1rem;
|
||
border-radius: 6px;
|
||
font-weight: 600;
|
||
cursor: pointer;
|
||
transition: transform 0.2s;
|
||
}
|
||
|
||
.contextual-action button.primary:hover {
|
||
transform: translateY(-2px);
|
||
}
|
||
|
||
.contextual-action button.secondary {
|
||
background: rgba(255, 255, 255, 0.2);
|
||
color: white;
|
||
border: 1px solid rgba(255, 255, 255, 0.3);
|
||
padding: 0.5rem 1rem;
|
||
border-radius: 6px;
|
||
cursor: pointer;
|
||
}
|
||
|
||
@keyframes slideIn {
|
||
from {
|
||
opacity: 0;
|
||
transform: translateY(-10px);
|
||
}
|
||
to {
|
||
opacity: 1;
|
||
transform: translateY(0);
|
||
}
|
||
}
|
||
```
|
||
|
||
**Testing:**
|
||
- [ ] Test intent detection after each message
|
||
- [ ] Verify correct action shown for each intent
|
||
- [ ] Test "Create Outline" button
|
||
- [ ] Test "Start Writing" button (with/without plan)
|
||
- [ ] Test in multiple languages
|
||
- [ ] Verify animations work
|
||
|
||
**Estimated Time:** 3-4 hours
|
||
|
||
---
|
||
|
||
### **Phase 3: UX Enhancements** (Priority: 🟢 LOW)
|
||
|
||
**Goal:** Polish user experience with additional features
|
||
|
||
#### **3.1 Context Indicator**
|
||
|
||
**Show context status to user:**
|
||
|
||
```javascript
|
||
const renderContextIndicator = () => {
|
||
const messageCount = messages.length;
|
||
const estimatedTokens = messageCount * 500; // Rough estimate
|
||
|
||
return (
|
||
<div className="context-indicator">
|
||
<span className="icon">💬</span>
|
||
<span className="count">{messageCount} messages</span>
|
||
<span className="tokens">~{estimatedTokens} tokens</span>
|
||
<button onClick={handleClearContext} className="clear-btn">
|
||
Clear context
|
||
</button>
|
||
</div>
|
||
);
|
||
};
|
||
```
|
||
|
||
**Estimated Time:** 1-2 hours
|
||
|
||
---
|
||
|
||
#### **3.2 Context Reset Command**
|
||
|
||
**Add `/reset` command:**
|
||
|
||
```javascript
|
||
const handleSendMessage = async () => {
|
||
const userMessage = input.trim();
|
||
|
||
// Check for reset command
|
||
if (userMessage === '/reset' || userMessage === '/clear') {
|
||
const confirmed = confirm('Clear all chat history and start fresh?');
|
||
if (confirmed) {
|
||
await clearChatHistory(postId);
|
||
setMessages([]);
|
||
addSystemMessage('✨ Context cleared. Starting fresh conversation.');
|
||
}
|
||
setInput('');
|
||
return;
|
||
}
|
||
|
||
// Normal message handling...
|
||
};
|
||
```
|
||
|
||
**Estimated Time:** 1 hour
|
||
|
||
---
|
||
|
||
#### **3.3 Settings: Context Mode**
|
||
|
||
**Add setting for context management:**
|
||
|
||
```php
|
||
// In class-settings.php
|
||
<div class="wpaw-field-row">
|
||
<div class="wpaw-field-label">
|
||
<?php esc_html_e('Chat Context Mode', 'wp-agentic-writer'); ?>
|
||
<small><?php esc_html_e('How to handle chat history', 'wp-agentic-writer'); ?></small>
|
||
</div>
|
||
<div class="wpaw-field-input">
|
||
<select name="wp_agentic_writer_settings[chat_context_mode]">
|
||
<option value="auto" <?php selected($chat_context_mode, 'auto'); ?>>
|
||
Auto (Smart Summarization) - Recommended
|
||
</option>
|
||
<option value="full" <?php selected($chat_context_mode, 'full'); ?>>
|
||
Full (All Messages) - Higher Cost
|
||
</option>
|
||
<option value="minimal" <?php selected($chat_context_mode, 'minimal'); ?>>
|
||
Minimal (Last 2 Only) - Lower Cost
|
||
</option>
|
||
</select>
|
||
<p class="description">
|
||
Auto mode: Summarizes old messages, keeps recent ones. Best balance of cost and quality.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
```
|
||
|
||
**Estimated Time:** 1-2 hours
|
||
|
||
---
|
||
|
||
## 📊 Implementation Summary
|
||
|
||
### **Total Estimated Time**
|
||
|
||
| Phase | Tasks | Time |
|
||
|-------|-------|------|
|
||
| **Phase 1: Critical Fixes** | 3 tasks | 4-6 hours |
|
||
| **Phase 2: Agentic Infrastructure** | 5 tasks | 12-16 hours |
|
||
| **Phase 3: UX Enhancements** | 3 tasks | 3-5 hours |
|
||
| **Testing & QA** | All features | 4-6 hours |
|
||
| **Documentation** | User guide updates | 2-3 hours |
|
||
| **TOTAL** | | **25-36 hours** |
|
||
|
||
### **Cost Impact**
|
||
|
||
| Component | Cost per Article | Frequency | Monthly (100 articles) |
|
||
|-----------|-----------------|-----------|------------------------|
|
||
| Intent detection | $0.00002 | 10× per article | $0.02 |
|
||
| Context summarization | $0.0001 | 1× per article | $0.01 |
|
||
| Planning (with summary) | $0.003 | 1× per article | $0.30 |
|
||
| **Total Added Cost** | | | **$0.33/month** |
|
||
|
||
**Benefit:** Better quality + Language support + Better UX
|
||
|
||
---
|
||
|
||
## ✅ Implementation Checklist
|
||
|
||
### **Phase 1: Critical Fixes** 🔴
|
||
|
||
**Backend:**
|
||
- [ ] Add chatHistory to handle_execute_article()
|
||
- [ ] Add chatHistory to handle_refine_block()
|
||
- [ ] Add chatHistory to handle_generate_meta()
|
||
- [ ] Build chat history context helper method
|
||
|
||
**Frontend:**
|
||
- [ ] Add chatHistory to all API payloads
|
||
- [ ] Add Writing mode empty state
|
||
- [ ] Add Writing mode guidance
|
||
- [ ] Add Writing mode notes warning
|
||
- [ ] Add CSS for empty states
|
||
|
||
**Testing:**
|
||
- [ ] Test Chat → Writing mode context
|
||
- [ ] Test block refinement context
|
||
- [ ] Test Writing mode without plan
|
||
- [ ] Test Writing mode notes
|
||
|
||
---
|
||
|
||
### **Phase 2: Agentic Infrastructure** 🟡
|
||
|
||
**Backend:**
|
||
- [ ] Add /summarize-context endpoint
|
||
- [ ] Add /detect-intent endpoint
|
||
- [ ] Update cost tracking for new operations
|
||
- [ ] Test endpoints in multiple languages
|
||
|
||
**Frontend:**
|
||
- [ ] Add summarizeChatHistory() function
|
||
- [ ] Add buildOptimizedContext() function
|
||
- [ ] Add detectUserIntent() function
|
||
- [ ] Add handleMessageSent() with intent detection
|
||
- [ ] Add renderContextualAction() component
|
||
- [ ] Add CSS for contextual actions
|
||
- [ ] Update handleCreateOutline() to use optimization
|
||
|
||
**Testing:**
|
||
- [ ] Test summarization (short/long history)
|
||
- [ ] Test intent detection (all intents)
|
||
- [ ] Test contextual actions display
|
||
- [ ] Test in English, Indonesian, Arabic
|
||
- [ ] Verify cost tracking
|
||
|
||
---
|
||
|
||
### **Phase 3: UX Enhancements** 🟢
|
||
|
||
**Frontend:**
|
||
- [ ] Add context indicator component
|
||
- [ ] Add /reset command
|
||
- [ ] Add context clear confirmation
|
||
|
||
**Backend:**
|
||
- [ ] Add chat_context_mode setting
|
||
- [ ] Add setting sanitization
|
||
- [ ] Add setting UI
|
||
|
||
**Testing:**
|
||
- [ ] Test context indicator
|
||
- [ ] Test /reset command
|
||
- [ ] Test context mode settings
|
||
|
||
---
|
||
|
||
## 🚀 Deployment Plan
|
||
|
||
### **Step 1: Phase 1 (Critical Fixes)**
|
||
- Deploy to staging
|
||
- Test all critical flows
|
||
- Fix any issues
|
||
- Deploy to production
|
||
|
||
### **Step 2: Phase 2 (Agentic Infrastructure)**
|
||
- Deploy to staging
|
||
- Test AI-powered features
|
||
- Monitor costs
|
||
- Verify multilingual support
|
||
- Deploy to production
|
||
|
||
### **Step 3: Phase 3 (UX Enhancements)**
|
||
- Deploy to staging
|
||
- Test UX improvements
|
||
- Gather user feedback
|
||
- Deploy to production
|
||
|
||
### **Step 4: Documentation**
|
||
- Update README
|
||
- Update user guide
|
||
- Add context management section
|
||
- Document new features
|
||
|
||
---
|
||
|
||
## 📈 Success Metrics
|
||
|
||
### **Technical Metrics**
|
||
- ✅ Chat history sent to 100% of endpoints
|
||
- ✅ Context summarization working in 5+ languages
|
||
- ✅ Intent detection accuracy > 80%
|
||
- ✅ Token reduction: 60-70%
|
||
- ✅ Cost increase: < $0.50/month per 100 articles
|
||
|
||
### **UX Metrics**
|
||
- ✅ Users can complete article without mode confusion
|
||
- ✅ Contextual actions shown at right time
|
||
- ✅ No silent failures (all errors shown)
|
||
- ✅ Smooth transitions between modes
|
||
|
||
### **Quality Metrics**
|
||
- ✅ AI responses maintain context
|
||
- ✅ Block refinements understand original intent
|
||
- ✅ Meta descriptions use article context
|
||
- ✅ Outlines reflect full conversation
|
||
|
||
---
|
||
|
||
## 🎯 Next Steps
|
||
|
||
1. **Review this plan** - Confirm approach and priorities
|
||
2. **Start Phase 1** - Fix critical context loss issues
|
||
3. **Test thoroughly** - Verify fixes work in all scenarios
|
||
4. **Deploy Phase 1** - Get critical fixes to production
|
||
5. **Begin Phase 2** - Implement agentic infrastructure
|
||
6. **Monitor costs** - Track actual cost impact
|
||
7. **Iterate** - Adjust based on real-world usage
|
||
|
||
---
|
||
|
||
**Status:** 📋 APPROVED - AWAITING IMPLEMENTATION START
|
||
**Priority:** Phase 1 (Critical Fixes) → Phase 2 (Agentic) → Phase 3 (UX)
|
||
**Timeline:** 3-5 weeks for full implementation
|