Keep showing steps
This commit is contained in:
Desktop
@@ -150,29 +150,90 @@ export default function ProgressModal({
|
||||
stepLogs = [],
|
||||
}: ProgressModalProps) {
|
||||
const hasAutoClosedRef = useRef(false);
|
||||
// Track which steps are visually completed (with delay)
|
||||
const [visuallyCompletedSteps, setVisuallyCompletedSteps] = React.useState<Set<string>>(new Set());
|
||||
const stepCompletionTimersRef = useRef<Map<string, NodeJS.Timeout>>(new Map());
|
||||
|
||||
// Auto-close on completion after 3 seconds
|
||||
// Get steps for this function
|
||||
const steps = getStepsForFunction(functionId, title);
|
||||
const currentPhase = getCurrentPhase(stepLogs, percentage);
|
||||
|
||||
// Track step completions with 2-second delay between each step
|
||||
useEffect(() => {
|
||||
if (!isOpen) {
|
||||
// Reset when modal closes
|
||||
setVisuallyCompletedSteps(new Set());
|
||||
stepCompletionTimersRef.current.forEach(timer => clearTimeout(timer));
|
||||
stepCompletionTimersRef.current.clear();
|
||||
return;
|
||||
}
|
||||
|
||||
const phaseOrder = ['INIT', 'PREP', 'AI_CALL', 'PARSE', 'SAVE', 'DONE'];
|
||||
|
||||
// Check each step in order
|
||||
steps.forEach((step, index) => {
|
||||
const stepPhase = step.phase;
|
||||
const stepIndex = phaseOrder.indexOf(stepPhase);
|
||||
const currentIndex = phaseOrder.indexOf(currentPhase);
|
||||
|
||||
// Check if step should be completed (we've moved past it or have log entry)
|
||||
const shouldBeCompleted = currentIndex > stepIndex ||
|
||||
stepLogs.some(log => log.stepName === stepPhase && log.status === 'success');
|
||||
|
||||
// If step should be completed but isn't visually completed yet
|
||||
if (shouldBeCompleted && !visuallyCompletedSteps.has(stepPhase)) {
|
||||
// Check if previous step is visually completed (or if this is the first step)
|
||||
const previousStep = index > 0 ? steps[index - 1] : null;
|
||||
const previousStepCompleted = !previousStep || visuallyCompletedSteps.has(previousStep.phase);
|
||||
|
||||
// Only schedule if previous step is completed (or this is first step)
|
||||
if (previousStepCompleted) {
|
||||
// Clear any existing timer for this step
|
||||
const existingTimer = stepCompletionTimersRef.current.get(stepPhase);
|
||||
if (existingTimer) {
|
||||
clearTimeout(existingTimer);
|
||||
}
|
||||
|
||||
// Calculate delay: 2 seconds after previous step visually completed (or 0 for first step)
|
||||
const delay = previousStep ? 2000 : 0;
|
||||
|
||||
// Schedule completion
|
||||
const timer = setTimeout(() => {
|
||||
setVisuallyCompletedSteps(prev => new Set([...prev, stepPhase]));
|
||||
stepCompletionTimersRef.current.delete(stepPhase);
|
||||
}, delay);
|
||||
|
||||
stepCompletionTimersRef.current.set(stepPhase, timer);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// Cleanup on unmount
|
||||
return () => {
|
||||
stepCompletionTimersRef.current.forEach(timer => clearTimeout(timer));
|
||||
stepCompletionTimersRef.current.clear();
|
||||
};
|
||||
}, [isOpen, currentPhase, stepLogs, steps, visuallyCompletedSteps]);
|
||||
|
||||
// Auto-close on completion after 5 seconds (increased to allow all steps to show)
|
||||
useEffect(() => {
|
||||
if (status === 'completed' && onClose && !hasAutoClosedRef.current) {
|
||||
hasAutoClosedRef.current = true;
|
||||
const timer = setTimeout(() => {
|
||||
onClose();
|
||||
}, 3000);
|
||||
}, 5000);
|
||||
return () => clearTimeout(timer);
|
||||
}
|
||||
if (status !== 'completed') {
|
||||
hasAutoClosedRef.current = false;
|
||||
}
|
||||
}, [status, onClose]);
|
||||
|
||||
// Get steps for this function
|
||||
const steps = getStepsForFunction(functionId, title);
|
||||
const currentPhase = getCurrentPhase(stepLogs, percentage);
|
||||
|
||||
// Build checklist items
|
||||
// Build checklist items with visual completion state
|
||||
const checklistItems = steps.map((step) => {
|
||||
const completed = isStepCompleted(step.phase, currentPhase, stepLogs);
|
||||
const inProgress = isStepInProgress(step.phase, currentPhase);
|
||||
const actuallyCompleted = isStepCompleted(step.phase, currentPhase, stepLogs);
|
||||
const visuallyCompleted = visuallyCompletedSteps.has(step.phase);
|
||||
const inProgress = isStepInProgress(step.phase, currentPhase) && !visuallyCompleted;
|
||||
|
||||
// Get user-friendly message from step logs if available
|
||||
const stepLog = stepLogs.find(log => log.stepName === step.phase);
|
||||
@@ -181,7 +242,7 @@ export default function ProgressModal({
|
||||
return {
|
||||
label: stepMessage,
|
||||
phase: step.phase,
|
||||
completed,
|
||||
completed: visuallyCompleted, // Use visual completion state
|
||||
inProgress,
|
||||
};
|
||||
});
|
||||
@@ -200,20 +261,22 @@ export default function ProgressModal({
|
||||
<div className="p-6 min-h-[200px]">
|
||||
{/* Header */}
|
||||
<div className="flex items-start gap-4 mb-6">
|
||||
{!showSuccess && (
|
||||
<div className="flex-shrink-0 mt-1">
|
||||
{status === 'error' ? (
|
||||
<svg className="w-6 h-6 text-error-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
|
||||
</svg>
|
||||
) : (
|
||||
<svg className="w-6 h-6 text-brand-500 animate-spin" fill="none" viewBox="0 0 24 24">
|
||||
<circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
|
||||
<path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" />
|
||||
</svg>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
<div className="flex-shrink-0 mt-1">
|
||||
{status === 'error' ? (
|
||||
<svg className="w-6 h-6 text-error-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
|
||||
</svg>
|
||||
) : showSuccess ? (
|
||||
<svg className="w-6 h-6 text-success-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
|
||||
</svg>
|
||||
) : (
|
||||
<svg className="w-6 h-6 text-brand-500 animate-spin" fill="none" viewBox="0 0 24 24">
|
||||
<circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
|
||||
<path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" />
|
||||
</svg>
|
||||
)}
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-1">
|
||||
{title}
|
||||
@@ -238,52 +301,50 @@ export default function ProgressModal({
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Checklist-style Progress Steps */}
|
||||
{!showSuccess && (
|
||||
<div className="mb-6 space-y-3">
|
||||
{checklistItems.map((item, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className={`flex items-center gap-3 p-3 rounded-lg border transition-all ${
|
||||
{/* Checklist-style Progress Steps - Always visible */}
|
||||
<div className="mb-6 space-y-3">
|
||||
{checklistItems.map((item, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className={`flex items-center gap-3 p-3 rounded-lg border transition-all ${
|
||||
item.completed
|
||||
? 'bg-green-50 dark:bg-green-900/20 border-green-200 dark:border-green-800'
|
||||
: item.inProgress
|
||||
? 'bg-blue-50 dark:bg-blue-900/20 border-blue-200 dark:border-blue-800'
|
||||
: 'bg-gray-50 dark:bg-gray-800 border-gray-200 dark:border-gray-700 opacity-60'
|
||||
}`}
|
||||
>
|
||||
{/* Icon */}
|
||||
<div className="flex-shrink-0">
|
||||
{item.completed ? (
|
||||
<svg className="w-5 h-5 text-green-600 dark:text-green-400" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clipRule="evenodd" />
|
||||
</svg>
|
||||
) : item.inProgress ? (
|
||||
<svg className="w-5 h-5 text-blue-600 dark:text-blue-400 animate-spin" fill="none" viewBox="0 0 24 24">
|
||||
<circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
|
||||
<path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" />
|
||||
</svg>
|
||||
) : (
|
||||
<div className="w-5 h-5 rounded-full border-2 border-gray-300 dark:border-gray-600" />
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Step Text */}
|
||||
<span
|
||||
className={`flex-1 text-sm font-medium ${
|
||||
item.completed
|
||||
? 'bg-green-50 dark:bg-green-900/20 border-green-200 dark:border-green-800'
|
||||
? 'text-green-800 dark:text-green-300'
|
||||
: item.inProgress
|
||||
? 'bg-blue-50 dark:bg-blue-900/20 border-blue-200 dark:border-blue-800'
|
||||
: 'bg-gray-50 dark:bg-gray-800 border-gray-200 dark:border-gray-700 opacity-60'
|
||||
? 'text-blue-800 dark:text-blue-300'
|
||||
: 'text-gray-500 dark:text-gray-400'
|
||||
}`}
|
||||
>
|
||||
{/* Icon */}
|
||||
<div className="flex-shrink-0">
|
||||
{item.completed ? (
|
||||
<svg className="w-5 h-5 text-green-600 dark:text-green-400" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clipRule="evenodd" />
|
||||
</svg>
|
||||
) : item.inProgress ? (
|
||||
<svg className="w-5 h-5 text-blue-600 dark:text-blue-400 animate-spin" fill="none" viewBox="0 0 24 24">
|
||||
<circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
|
||||
<path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" />
|
||||
</svg>
|
||||
) : (
|
||||
<div className="w-5 h-5 rounded-full border-2 border-gray-300 dark:border-gray-600" />
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Step Text */}
|
||||
<span
|
||||
className={`flex-1 text-sm font-medium ${
|
||||
item.completed
|
||||
? 'text-green-800 dark:text-green-300'
|
||||
: item.inProgress
|
||||
? 'text-blue-800 dark:text-blue-300'
|
||||
: 'text-gray-500 dark:text-gray-400'
|
||||
}`}
|
||||
>
|
||||
{item.label}
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
{item.label}
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Footer */}
|
||||
<div className="flex justify-end gap-3">
|
||||
|
||||
Reference in New Issue
Block a user