Enhance AIEngine and ProgressModal for improved user feedback
- Added user-friendly messages for input description, preparation, AI call, parsing, and saving phases in AIEngine. - Updated ProgressModal to display success messages and checklist-style progress steps based on function type. - Improved handling of step logs and current phase determination for better user experience during asynchronous tasks.
This commit is contained in:
Desktop
@@ -1,6 +1,5 @@
|
||||
import React, { useEffect, useRef } from 'react';
|
||||
import { Modal } from '../ui/modal';
|
||||
import { ProgressBar } from '../ui/progress';
|
||||
import Button from '../ui/button/Button';
|
||||
|
||||
export interface ProgressModalProps {
|
||||
@@ -29,11 +28,113 @@ export interface ProgressModalProps {
|
||||
}>; // Step logs for debugging
|
||||
}
|
||||
|
||||
// Generate modal instance ID (increments per modal instance)
|
||||
let modalInstanceCounter = 0;
|
||||
const getModalInstanceId = () => {
|
||||
modalInstanceCounter++;
|
||||
return `modal-${String(modalInstanceCounter).padStart(2, '0')}`;
|
||||
// Success messages per function
|
||||
const getSuccessMessage = (functionId?: string, title?: string): string => {
|
||||
const funcName = functionId?.toLowerCase() || title?.toLowerCase() || '';
|
||||
|
||||
if (funcName.includes('cluster')) {
|
||||
return 'Clustering complete — keywords grouped into meaningful clusters.';
|
||||
}
|
||||
if (funcName.includes('idea')) {
|
||||
return 'Content ideas and outlines created successfully.';
|
||||
}
|
||||
if (funcName.includes('content')) {
|
||||
return 'Article drafted successfully.';
|
||||
}
|
||||
if (funcName.includes('image')) {
|
||||
return 'Images created and saved successfully.';
|
||||
}
|
||||
return 'Task completed successfully.';
|
||||
};
|
||||
|
||||
// Get step definitions per function
|
||||
const getStepsForFunction = (functionId?: string, title?: string): Array<{phase: string, label: string}> => {
|
||||
const funcName = functionId?.toLowerCase() || title?.toLowerCase() || '';
|
||||
|
||||
if (funcName.includes('cluster')) {
|
||||
return [
|
||||
{ phase: 'INIT', label: 'Validating keywords' },
|
||||
{ phase: 'PREP', label: 'Loading keyword data' },
|
||||
{ phase: 'AI_CALL', label: 'Generating clusters' },
|
||||
{ phase: 'PARSE', label: 'Organizing clusters' },
|
||||
{ phase: 'SAVE', label: 'Saving clusters' },
|
||||
];
|
||||
}
|
||||
|
||||
if (funcName.includes('idea')) {
|
||||
return [
|
||||
{ phase: 'INIT', label: 'Validating clusters' },
|
||||
{ phase: 'PREP', label: 'Loading cluster data' },
|
||||
{ phase: 'AI_CALL', label: 'Generating blog ideas' },
|
||||
{ phase: 'PARSE', label: 'Structuring outlines' },
|
||||
{ phase: 'SAVE', label: 'Saving ideas' },
|
||||
];
|
||||
}
|
||||
|
||||
if (funcName.includes('content')) {
|
||||
return [
|
||||
{ phase: 'INIT', label: 'Validating task' },
|
||||
{ phase: 'PREP', label: 'Preparing content idea' },
|
||||
{ phase: 'AI_CALL', label: 'Writing article with AI' },
|
||||
{ phase: 'PARSE', label: 'Formatting content' },
|
||||
{ phase: 'SAVE', label: 'Saving article' },
|
||||
];
|
||||
}
|
||||
|
||||
if (funcName.includes('image')) {
|
||||
return [
|
||||
{ phase: 'INIT', label: 'Validating task' },
|
||||
{ phase: 'PREP', label: 'Extracting image prompts' },
|
||||
{ phase: 'AI_CALL', label: 'Creating images with AI' },
|
||||
{ phase: 'PARSE', label: 'Processing images' },
|
||||
{ phase: 'SAVE', label: 'Saving images' },
|
||||
];
|
||||
}
|
||||
|
||||
// Default fallback
|
||||
return [
|
||||
{ phase: 'INIT', label: 'Initializing...' },
|
||||
{ phase: 'PREP', label: 'Preparing...' },
|
||||
{ phase: 'AI_CALL', label: 'Processing with AI...' },
|
||||
{ phase: 'PARSE', label: 'Processing results...' },
|
||||
{ phase: 'SAVE', label: 'Saving results...' },
|
||||
];
|
||||
};
|
||||
|
||||
// Get current phase from step logs or percentage
|
||||
const getCurrentPhase = (stepLogs: any[], percentage: number): string => {
|
||||
if (stepLogs.length > 0) {
|
||||
const lastStep = stepLogs[stepLogs.length - 1];
|
||||
return lastStep.stepName || '';
|
||||
}
|
||||
|
||||
// Fallback to percentage
|
||||
if (percentage < 10) return 'INIT';
|
||||
if (percentage < 25) return 'PREP';
|
||||
if (percentage < 70) return 'AI_CALL';
|
||||
if (percentage < 85) return 'PARSE';
|
||||
if (percentage < 100) return 'SAVE';
|
||||
return 'DONE';
|
||||
};
|
||||
|
||||
// Check if step is completed
|
||||
const isStepCompleted = (stepPhase: string, currentPhase: string, stepLogs: any[]): boolean => {
|
||||
const phaseOrder = ['INIT', 'PREP', 'AI_CALL', 'PARSE', 'SAVE', 'DONE'];
|
||||
const stepIndex = phaseOrder.indexOf(stepPhase);
|
||||
const currentIndex = phaseOrder.indexOf(currentPhase);
|
||||
|
||||
// Step is completed if we've moved past it
|
||||
if (currentIndex > stepIndex) return true;
|
||||
|
||||
// Or if we have a log entry for it with success status
|
||||
return stepLogs.some(log =>
|
||||
log.stepName === stepPhase && log.status === 'success'
|
||||
);
|
||||
};
|
||||
|
||||
// Check if step is in progress
|
||||
const isStepInProgress = (stepPhase: string, currentPhase: string): boolean => {
|
||||
return stepPhase === currentPhase;
|
||||
};
|
||||
|
||||
export default function ProgressModal({
|
||||
@@ -42,110 +143,52 @@ export default function ProgressModal({
|
||||
percentage,
|
||||
status,
|
||||
message,
|
||||
details,
|
||||
onClose,
|
||||
onCancel,
|
||||
taskId,
|
||||
functionId,
|
||||
stepLogs = [],
|
||||
}: ProgressModalProps) {
|
||||
// Generate modal instance ID on first render
|
||||
const modalInstanceIdRef = React.useRef<string | null>(null);
|
||||
React.useEffect(() => {
|
||||
if (!modalInstanceIdRef.current) {
|
||||
modalInstanceIdRef.current = getModalInstanceId();
|
||||
}
|
||||
}, []);
|
||||
const hasAutoClosedRef = useRef(false);
|
||||
|
||||
const modalInstanceId = modalInstanceIdRef.current || 'modal-01';
|
||||
|
||||
// Build full function ID with modal instance
|
||||
const fullFunctionId = functionId ? `${functionId}-${modalInstanceId}` : null;
|
||||
// Auto-close on completion after 2 seconds
|
||||
// Don't auto-close on error - let user manually close to see error details
|
||||
const hasAutoClosedRef = React.useRef(false);
|
||||
// Auto-close on completion after 3 seconds
|
||||
useEffect(() => {
|
||||
if (status === 'completed' && onClose && !hasAutoClosedRef.current) {
|
||||
hasAutoClosedRef.current = true;
|
||||
const timer = setTimeout(() => {
|
||||
onClose();
|
||||
}, 2000);
|
||||
}, 3000);
|
||||
return () => clearTimeout(timer);
|
||||
}
|
||||
// Reset when status changes away from completed
|
||||
if (status !== 'completed') {
|
||||
hasAutoClosedRef.current = false;
|
||||
}
|
||||
// Don't auto-close on error - user should manually dismiss
|
||||
}, [status, onClose]);
|
||||
|
||||
// Determine color based on status
|
||||
const getProgressColor = (): 'primary' | 'success' | 'error' | 'warning' => {
|
||||
if (status === 'error') return 'error';
|
||||
if (status === 'completed') return 'success';
|
||||
if (status === 'processing') return 'primary';
|
||||
return 'primary';
|
||||
};
|
||||
// Get steps for this function
|
||||
const steps = getStepsForFunction(functionId, title);
|
||||
const currentPhase = getCurrentPhase(stepLogs, percentage);
|
||||
|
||||
// Build checklist items
|
||||
const checklistItems = steps.map((step) => {
|
||||
const completed = isStepCompleted(step.phase, currentPhase, stepLogs);
|
||||
const inProgress = isStepInProgress(step.phase, currentPhase);
|
||||
|
||||
// Get user-friendly message from step logs if available
|
||||
const stepLog = stepLogs.find(log => log.stepName === step.phase);
|
||||
const stepMessage = stepLog?.message || step.label;
|
||||
|
||||
return {
|
||||
label: stepMessage,
|
||||
phase: step.phase,
|
||||
completed,
|
||||
inProgress,
|
||||
};
|
||||
});
|
||||
|
||||
// Get status icon
|
||||
const getStatusIcon = () => {
|
||||
if (status === 'completed') {
|
||||
return (
|
||||
<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>
|
||||
);
|
||||
}
|
||||
if (status === 'error') {
|
||||
return (
|
||||
<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>
|
||||
);
|
||||
}
|
||||
// Processing/Pending - spinner
|
||||
return (
|
||||
<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>
|
||||
);
|
||||
};
|
||||
// Show success alert when completed
|
||||
const showSuccess = status === 'completed';
|
||||
const successMessage = getSuccessMessage(functionId, title);
|
||||
|
||||
return (
|
||||
<Modal
|
||||
@@ -157,71 +200,88 @@ export default function ProgressModal({
|
||||
<div className="p-6 min-h-[200px]">
|
||||
{/* Header */}
|
||||
<div className="flex items-start gap-4 mb-6">
|
||||
<div className="flex-shrink-0 mt-1">{getStatusIcon()}</div>
|
||||
{!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-1">
|
||||
<h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-1">
|
||||
{title}
|
||||
</h3>
|
||||
<p className="text-sm text-gray-600 dark:text-gray-400">{message}</p>
|
||||
{!showSuccess && (
|
||||
<p className="text-sm text-gray-600 dark:text-gray-400">{message}</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Progress Bar */}
|
||||
<div className="mb-6">
|
||||
<ProgressBar
|
||||
value={percentage}
|
||||
color={getProgressColor()}
|
||||
size="lg"
|
||||
showLabel={true}
|
||||
label={`${Math.round(percentage)}%`}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Function ID and Task ID (for debugging) */}
|
||||
{(fullFunctionId || taskId) && (
|
||||
<div className="mb-4 space-y-1 text-xs text-gray-400 dark:text-gray-600">
|
||||
{fullFunctionId && (
|
||||
<div>Function ID: {fullFunctionId}</div>
|
||||
)}
|
||||
{taskId && (
|
||||
<div>Task ID: {taskId}</div>
|
||||
)}
|
||||
{/* Success Alert (shown when completed) */}
|
||||
{showSuccess && (
|
||||
<div className="mb-6 p-4 rounded-lg bg-green-50 dark:bg-green-900/20 border border-green-200 dark:border-green-800">
|
||||
<div className="flex items-start gap-3">
|
||||
<svg className="w-5 h-5 text-green-600 dark:text-green-400 flex-shrink-0 mt-0.5" 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>
|
||||
<p className="text-sm font-medium text-green-800 dark:text-green-300">
|
||||
{successMessage}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Step Logs / Debug Logs */}
|
||||
{stepLogs.length > 0 && (
|
||||
<div className="mb-4 max-h-48 overflow-y-auto bg-gray-50 dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 p-3">
|
||||
<div className="flex items-center justify-between mb-2">
|
||||
<h4 className="text-xs font-semibold text-gray-700 dark:text-gray-300">
|
||||
Step Logs
|
||||
</h4>
|
||||
<span className="text-xs text-gray-500 dark:text-gray-400">
|
||||
{stepLogs.length} step{stepLogs.length !== 1 ? 's' : ''}
|
||||
</span>
|
||||
</div>
|
||||
<div className="space-y-1">
|
||||
{stepLogs.map((step, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className={`text-xs p-2 rounded border ${
|
||||
step.status === 'success'
|
||||
? 'bg-green-50 dark:bg-green-900/20 border-green-200 dark:border-green-800 text-green-800 dark:text-green-300'
|
||||
: step.status === 'error'
|
||||
? 'bg-red-50 dark:bg-red-900/20 border-red-200 dark:border-red-800 text-red-800 dark:text-red-300'
|
||||
: 'bg-blue-50 dark:bg-blue-900/20 border-blue-200 dark:border-blue-800 text-blue-800 dark:text-blue-300'
|
||||
{/* 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 ${
|
||||
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
|
||||
? 'text-green-800 dark:text-green-300'
|
||||
: item.inProgress
|
||||
? 'text-blue-800 dark:text-blue-300'
|
||||
: 'text-gray-500 dark:text-gray-400'
|
||||
}`}
|
||||
>
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="font-mono font-semibold">
|
||||
[{step.stepNumber}]
|
||||
</span>
|
||||
<span className="font-semibold">{step.stepName}:</span>
|
||||
<span>{step.message}</span>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
{item.label}
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
@@ -247,4 +307,3 @@ export default function ProgressModal({
|
||||
</Modal>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user