337 lines
12 KiB
JavaScript
337 lines
12 KiB
JavaScript
import React, { useState, useEffect } from 'react';
|
|
import FeedbackWeighting from './FeedbackWeighting';
|
|
|
|
const PromptDisplay = () => {
|
|
const [prompts, setPrompts] = useState([]); // Changed to array to handle multiple prompts
|
|
const [loading, setLoading] = useState(true);
|
|
const [error, setError] = useState(null);
|
|
const [selectedIndex, setSelectedIndex] = useState(null);
|
|
const [viewMode, setViewMode] = useState('history'); // 'history' or 'drawn'
|
|
const [poolStats, setPoolStats] = useState({
|
|
total: 0,
|
|
target: 20,
|
|
sessions: 0,
|
|
needsRefill: true
|
|
});
|
|
const [showFeedbackWeighting, setShowFeedbackWeighting] = useState(false);
|
|
const [fillPoolLoading, setFillPoolLoading] = useState(false);
|
|
const [drawButtonDisabled, setDrawButtonDisabled] = useState(false);
|
|
|
|
useEffect(() => {
|
|
fetchMostRecentPrompt();
|
|
fetchPoolStats();
|
|
}, []);
|
|
|
|
const fetchMostRecentPrompt = async () => {
|
|
setLoading(true);
|
|
setError(null);
|
|
setDrawButtonDisabled(false); // Re-enable draw button when returning to history view
|
|
|
|
try {
|
|
// Try to fetch from actual API first
|
|
const response = await fetch('/api/v1/prompts/history');
|
|
if (response.ok) {
|
|
const data = await response.json();
|
|
// API returns array directly, not object with 'prompts' key
|
|
if (Array.isArray(data) && data.length > 0) {
|
|
// Get the most recent prompt (first in array, position 0)
|
|
// Show only one prompt from history
|
|
setPrompts([{ text: data[0].text, position: data[0].position }]);
|
|
setViewMode('history');
|
|
} else {
|
|
// No history yet, show placeholder
|
|
setPrompts([{ text: "No recent prompts in history. Draw some prompts to get started!", position: 0 }]);
|
|
}
|
|
} else {
|
|
// API not available, use mock data
|
|
setPrompts([{ text: "Write about a time when you felt completely at peace with yourself and the world around you. What were the circumstances that led to this feeling, and how did it change your perspective on life?", position: 0 }]);
|
|
}
|
|
} catch (err) {
|
|
console.error('Error fetching prompt:', err);
|
|
// Fallback to mock data
|
|
setPrompts([{ text: "Imagine you could have a conversation with your future self 10 years from now. What questions would you ask, and what advice do you think your future self would give you?", position: 0 }]);
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
const handleDrawPrompts = async () => {
|
|
setDrawButtonDisabled(true); // Disable the button when clicked
|
|
setLoading(true);
|
|
setError(null);
|
|
setSelectedIndex(null);
|
|
|
|
try {
|
|
// Draw 3 prompts from pool (Task 4)
|
|
const response = await fetch('/api/v1/prompts/draw?count=3');
|
|
if (response.ok) {
|
|
const data = await response.json();
|
|
// Draw API returns object with 'prompts' array
|
|
if (data.prompts && data.prompts.length > 0) {
|
|
// Show all drawn prompts
|
|
const drawnPrompts = data.prompts.map((text, index) => ({
|
|
text,
|
|
position: index
|
|
}));
|
|
setPrompts(drawnPrompts);
|
|
setViewMode('drawn');
|
|
} else {
|
|
setError('No prompts available in pool. Please fill the pool first.');
|
|
}
|
|
} else {
|
|
setError('Failed to draw prompts. Please try again.');
|
|
}
|
|
} catch (err) {
|
|
setError('Failed to draw prompts. Please try again.');
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
const handleAddToHistory = async (index) => {
|
|
if (index < 0 || index >= prompts.length) {
|
|
setError('Invalid prompt index');
|
|
return;
|
|
}
|
|
|
|
try {
|
|
const promptText = prompts[index].text;
|
|
|
|
// Send the prompt to the API to add to history
|
|
const response = await fetch('/api/v1/prompts/select', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
},
|
|
body: JSON.stringify({ prompt_text: promptText }),
|
|
});
|
|
|
|
if (response.ok) {
|
|
const data = await response.json();
|
|
// Mark as selected and show success
|
|
setSelectedIndex(index);
|
|
|
|
// Refresh the page to show the updated history and pool stats
|
|
// The default view shows the most recent prompt from history (position 0)
|
|
fetchMostRecentPrompt();
|
|
fetchPoolStats();
|
|
setDrawButtonDisabled(false); // Re-enable draw button after selection
|
|
} else {
|
|
const errorData = await response.json();
|
|
setError(`Failed to add prompt to history: ${errorData.detail || 'Unknown error'}`);
|
|
}
|
|
} catch (err) {
|
|
setError('Failed to add prompt to history');
|
|
}
|
|
};
|
|
|
|
const fetchPoolStats = async () => {
|
|
try {
|
|
const response = await fetch('/api/v1/prompts/stats');
|
|
if (response.ok) {
|
|
const data = await response.json();
|
|
setPoolStats({
|
|
total: data.total_prompts || 0,
|
|
target: data.target_pool_size || 20,
|
|
sessions: data.available_sessions || 0,
|
|
needsRefill: data.needs_refill || true
|
|
});
|
|
}
|
|
} catch (err) {
|
|
console.error('Error fetching pool stats:', err);
|
|
}
|
|
};
|
|
|
|
const handleFillPool = async () => {
|
|
// Start pool refill immediately (uses active words 6-11)
|
|
setFillPoolLoading(true);
|
|
setError(null);
|
|
|
|
try {
|
|
const response = await fetch('/api/v1/prompts/fill-pool', { method: 'POST' });
|
|
if (response.ok) {
|
|
const data = await response.json();
|
|
console.log('Pool refill started:', data);
|
|
|
|
// Pool refill started successfully, now show feedback weighting UI
|
|
setShowFeedbackWeighting(true);
|
|
} else {
|
|
const errorData = await response.json();
|
|
throw new Error(errorData.detail || `Failed to start pool refill: ${response.status}`);
|
|
}
|
|
} catch (err) {
|
|
console.error('Error starting pool refill:', err);
|
|
setError(`Failed to start pool refill: ${err.message}`);
|
|
} finally {
|
|
setFillPoolLoading(false);
|
|
}
|
|
};
|
|
|
|
const handleFeedbackComplete = async (feedbackData) => {
|
|
// After feedback is submitted, refresh the UI
|
|
setShowFeedbackWeighting(false);
|
|
|
|
// Refresh the prompt and pool stats
|
|
fetchMostRecentPrompt();
|
|
fetchPoolStats();
|
|
};
|
|
|
|
const handleFeedbackCancel = () => {
|
|
setShowFeedbackWeighting(false);
|
|
};
|
|
|
|
if (showFeedbackWeighting) {
|
|
return (
|
|
<FeedbackWeighting
|
|
onComplete={handleFeedbackComplete}
|
|
onCancel={handleFeedbackCancel}
|
|
/>
|
|
);
|
|
}
|
|
|
|
if (fillPoolLoading) {
|
|
return (
|
|
<div className="bg-white rounded-lg shadow-md p-6 mb-6">
|
|
<div className="flex items-center justify-center py-8">
|
|
<div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-500"></div>
|
|
<span className="ml-3 text-gray-600">Filling prompt pool...</span>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
if (error) {
|
|
return (
|
|
<div className="alert alert-error">
|
|
<i className="fas fa-exclamation-circle mr-2"></i>
|
|
{error}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div>
|
|
{prompts.length > 0 ? (
|
|
<>
|
|
<div className="mb-6">
|
|
<div className="grid grid-cols-1 gap-4">
|
|
{prompts.map((promptObj, index) => (
|
|
<div
|
|
key={index}
|
|
className={`prompt-card ${viewMode === 'drawn' ? 'cursor-pointer' : ''} ${selectedIndex === index ? 'selected' : ''}`}
|
|
onClick={viewMode === 'drawn' ? () => setSelectedIndex(index) : undefined}
|
|
>
|
|
<div className="flex items-start gap-3">
|
|
<div className={`flex-shrink-0 w-8 h-8 rounded-full flex items-center justify-center ${selectedIndex === index ? 'bg-green-100 text-green-600' : 'bg-blue-100 text-blue-600'}`}>
|
|
{selectedIndex === index ? (
|
|
<i className="fas fa-check"></i>
|
|
) : (
|
|
<span>{index + 1}</span>
|
|
)}
|
|
</div>
|
|
<div className="flex-grow">
|
|
<p className="prompt-text">{promptObj.text}</p>
|
|
<div className="prompt-meta">
|
|
<span>
|
|
<i className="fas fa-ruler-combined mr-1"></i>
|
|
{promptObj.text.length} characters
|
|
</span>
|
|
<span>
|
|
{viewMode === 'drawn' ? (
|
|
selectedIndex === index ? (
|
|
<span className="text-green-600">
|
|
<i className="fas fa-check-circle mr-1"></i>
|
|
Selected
|
|
</span>
|
|
) : (
|
|
<span className="text-gray-500">
|
|
Click to select
|
|
</span>
|
|
)
|
|
) : (
|
|
<span className="text-gray-600">
|
|
<i className="fas fa-history mr-1"></i>
|
|
Most recent from history
|
|
</span>
|
|
)}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex flex-col gap-4">
|
|
<div className="flex gap-2">
|
|
{viewMode === 'drawn' && (
|
|
<button
|
|
className="btn btn-success w-1/2"
|
|
onClick={() => handleAddToHistory(selectedIndex !== null ? selectedIndex : 0)}
|
|
disabled={selectedIndex === null}
|
|
>
|
|
<i className="fas fa-history"></i>
|
|
{selectedIndex !== null ? 'Use Selected Prompt' : 'Select a Prompt First'}
|
|
</button>
|
|
)}
|
|
<button
|
|
className={`btn btn-primary ${viewMode === 'drawn' ? 'w-1/2' : 'w-full'}`}
|
|
onClick={handleDrawPrompts}
|
|
disabled={drawButtonDisabled}
|
|
>
|
|
<i className="fas fa-dice"></i>
|
|
{viewMode === 'history' ? 'Draw 3 New Prompts' : 'Draw 3 More Prompts'}
|
|
</button>
|
|
</div>
|
|
|
|
<div className="">
|
|
<button className="btn btn-secondary w-full relative overflow-hidden" onClick={handleFillPool}>
|
|
<div className="absolute top-0 left-0 h-full bg-green-500 opacity-20 transition-all duration-300"
|
|
style={{ width: `${Math.min((poolStats.total / poolStats.target) * 100, 100)}%` }}>
|
|
</div>
|
|
<div className="relative z-10 flex items-center justify-center gap-2">
|
|
<i className="fas fa-sync"></i>
|
|
<span>Fill Prompt Pool ({poolStats.total}/{poolStats.target})</span>
|
|
</div>
|
|
</button>
|
|
<div className="text-xs text-gray-600 mt-1 text-center">
|
|
{Math.round((poolStats.total / poolStats.target) * 100)}% full
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="mt-6 text-sm text-gray-600">
|
|
<p>
|
|
<i className="fas fa-info-circle mr-1"></i>
|
|
<strong>
|
|
{viewMode === 'history' ? 'Most Recent Prompt from History' : `${prompts.length} Drawn Prompts`}:
|
|
</strong>
|
|
{viewMode === 'history'
|
|
? ' This is the latest prompt from your history. Using it helps the AI learn your preferences.'
|
|
: ' Select a prompt to use for journaling. The AI will learn from your selection.'}
|
|
</p>
|
|
<p className="mt-2">
|
|
<i className="fas fa-lightbulb mr-1"></i>
|
|
<strong>Tip:</strong> The prompt pool needs regular refilling. Check the stats panel
|
|
to see how full it is.
|
|
</p>
|
|
</div>
|
|
</>
|
|
) : (
|
|
<div className="text-center p-8">
|
|
<i className="fas fa-inbox fa-3x mb-4" style={{ color: 'var(--gray-color)' }}></i>
|
|
<h3>No Prompts Available</h3>
|
|
<p className="mb-4">There are no prompts in history or pool. Get started by filling the pool.</p>
|
|
<button className="btn btn-primary" onClick={handleFillPool}>
|
|
<i className="fas fa-plus"></i> Fill Prompt Pool
|
|
</button>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default PromptDisplay;
|
|
|