Desktop
@@ -1,458 +0,0 @@
|
||||
import React, { useEffect, useRef } from 'react';
|
||||
import { Modal } from '../ui/modal';
|
||||
import { ProgressBar } from '../ui/progress';
|
||||
import Button from '../ui/button/Button';
|
||||
|
||||
export interface AIProgressModalProps {
|
||||
isOpen: boolean;
|
||||
title: string;
|
||||
percentage: number; // 0-100
|
||||
status: 'pending' | 'processing' | 'completed' | 'error';
|
||||
message: string;
|
||||
details?: {
|
||||
current: number;
|
||||
total: number;
|
||||
completed: number;
|
||||
currentItem?: string;
|
||||
phase?: string;
|
||||
};
|
||||
onClose?: () => void;
|
||||
onCancel?: () => void;
|
||||
taskId?: string;
|
||||
functionId?: string; // AI function ID for tracking (e.g., "ai-cluster-01")
|
||||
stepLogs?: Array<{
|
||||
stepNumber: number;
|
||||
stepName: string;
|
||||
status: string;
|
||||
message: string;
|
||||
timestamp?: number;
|
||||
}>; // Step logs for debugging
|
||||
config?: {
|
||||
successTitle?: string;
|
||||
successMessage?: string;
|
||||
errorTitle?: string;
|
||||
errorMessage?: string;
|
||||
};
|
||||
}
|
||||
|
||||
// Generate modal instance ID (increments per modal instance)
|
||||
let modalInstanceCounter = 0;
|
||||
const getModalInstanceId = () => {
|
||||
modalInstanceCounter++;
|
||||
return `modal-${String(modalInstanceCounter).padStart(2, '0')}`;
|
||||
};
|
||||
|
||||
export default function AIProgressModal({
|
||||
isOpen,
|
||||
title,
|
||||
percentage,
|
||||
status,
|
||||
message,
|
||||
details,
|
||||
onClose,
|
||||
onCancel,
|
||||
taskId,
|
||||
functionId,
|
||||
stepLogs = [],
|
||||
config = {},
|
||||
}: AIProgressModalProps) {
|
||||
// Generate modal instance ID on first render
|
||||
const modalInstanceIdRef = React.useRef<string | null>(null);
|
||||
React.useEffect(() => {
|
||||
if (!modalInstanceIdRef.current) {
|
||||
modalInstanceIdRef.current = getModalInstanceId();
|
||||
}
|
||||
}, []);
|
||||
|
||||
const modalInstanceId = modalInstanceIdRef.current || 'modal-01';
|
||||
|
||||
// Build full function ID with modal instance
|
||||
const fullFunctionId = functionId ? `${functionId}-${modalInstanceId}` : null;
|
||||
|
||||
// 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';
|
||||
};
|
||||
|
||||
// Success icon (from AlertModal style)
|
||||
const SuccessIcon = () => (
|
||||
<div className="relative flex items-center justify-center w-24 h-24 mx-auto mb-6">
|
||||
{/* Light green flower-like outer shape with rounded petals */}
|
||||
<div
|
||||
className="absolute inset-0 bg-success-100 rounded-full"
|
||||
style={{
|
||||
clipPath: 'polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%)',
|
||||
width: '80px',
|
||||
height: '80px'
|
||||
}}
|
||||
/>
|
||||
{/* Dark green inner circle */}
|
||||
<div className="relative bg-success-600 rounded-full w-16 h-16 flex items-center justify-center shadow-lg">
|
||||
<svg
|
||||
className="w-8 h-8 text-white"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth={3}
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
d="M5 13l4 4L19 7"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
// Error icon
|
||||
const ErrorIcon = () => (
|
||||
<div className="relative flex items-center justify-center w-24 h-24 mx-auto mb-6">
|
||||
{/* Light red cloud-like background */}
|
||||
<div
|
||||
className="absolute inset-0 bg-error-100 rounded-full blur-2xl opacity-50"
|
||||
style={{
|
||||
width: '90px',
|
||||
height: '90px',
|
||||
transform: 'scale(1.1)'
|
||||
}}
|
||||
/>
|
||||
{/* Light red circle with red X */}
|
||||
<div className="relative bg-error-100 rounded-full w-16 h-16 flex items-center justify-center shadow-lg">
|
||||
<svg
|
||||
className="w-10 h-10 text-error-500"
|
||||
fill="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
d="M18.364 5.636a1 1 0 010 1.414L13.414 12l4.95 4.95a1 1 0 11-1.414 1.414L12 13.414l-4.95 4.95a1 1 0 01-1.414-1.414L10.586 12 5.636 7.05a1 1 0 011.414-1.414L12 10.586l4.95-4.95a1 1 0 011.414 0z"
|
||||
clipRule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
// Processing spinner
|
||||
const ProcessingIcon = () => (
|
||||
<div className="flex items-center justify-center w-16 h-16 mx-auto mb-6">
|
||||
<svg
|
||||
className="w-16 h-16 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>
|
||||
);
|
||||
|
||||
// Show completion screen with big success icon
|
||||
if (status === 'completed') {
|
||||
return (
|
||||
<Modal
|
||||
isOpen={isOpen}
|
||||
onClose={onClose || (() => {})}
|
||||
className="max-w-md"
|
||||
showCloseButton={true}
|
||||
>
|
||||
<div className="px-8 py-10 text-center">
|
||||
{/* Big Success Icon */}
|
||||
<SuccessIcon />
|
||||
|
||||
{/* Title */}
|
||||
<h2 className="text-2xl font-bold text-gray-800 dark:text-white mb-4">
|
||||
{config.successTitle || title || 'Task Completed!'}
|
||||
</h2>
|
||||
|
||||
{/* Message */}
|
||||
<p className="text-gray-600 dark:text-gray-400 mb-6 text-sm leading-relaxed">
|
||||
{config.successMessage || message}
|
||||
</p>
|
||||
|
||||
{/* Details if available */}
|
||||
{details && details.total > 0 && (
|
||||
<div className="mb-6 p-4 bg-gray-50 dark:bg-gray-800 rounded-lg">
|
||||
<div className="text-sm text-gray-600 dark:text-gray-400">
|
||||
<span className="font-semibold text-gray-900 dark:text-white">
|
||||
{details.completed || details.current}
|
||||
</span>
|
||||
{' / '}
|
||||
<span className="text-gray-500 dark:text-gray-400">
|
||||
{details.total}
|
||||
</span>
|
||||
{' items completed'}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Function ID and Task ID (for debugging) */}
|
||||
{(fullFunctionId || taskId) && (
|
||||
<div className="mb-6 space-y-1 text-xs text-gray-400 dark:text-gray-600">
|
||||
{fullFunctionId && <div>Function ID: {fullFunctionId}</div>}
|
||||
{taskId && <div>Task ID: {taskId}</div>}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Step Logs / Debug Logs */}
|
||||
{stepLogs.length > 0 && (
|
||||
<div className="mb-6 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'
|
||||
}`}
|
||||
>
|
||||
<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>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Close Button */}
|
||||
<div className="flex justify-center">
|
||||
<button
|
||||
onClick={onClose}
|
||||
className="px-6 py-3 rounded-lg font-medium text-sm transition-colors shadow-sm bg-success-500 hover:bg-success-600 text-white"
|
||||
>
|
||||
Close
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</Modal>
|
||||
);
|
||||
}
|
||||
|
||||
// Show error screen with big error icon
|
||||
if (status === 'error') {
|
||||
return (
|
||||
<Modal
|
||||
isOpen={isOpen}
|
||||
onClose={onClose || (() => {})}
|
||||
className="max-w-md"
|
||||
showCloseButton={true}
|
||||
>
|
||||
<div className="px-8 py-10 text-center">
|
||||
{/* Big Error Icon */}
|
||||
<ErrorIcon />
|
||||
|
||||
{/* Title */}
|
||||
<h2 className="text-2xl font-bold text-gray-800 dark:text-white mb-4">
|
||||
{config.errorTitle || 'Error Occurred'}
|
||||
</h2>
|
||||
|
||||
{/* Message */}
|
||||
<p className="text-gray-600 dark:text-gray-400 mb-6 text-sm leading-relaxed">
|
||||
{config.errorMessage || message}
|
||||
</p>
|
||||
|
||||
{/* Function ID and Task ID (for debugging) */}
|
||||
{(fullFunctionId || taskId) && (
|
||||
<div className="mb-6 space-y-1 text-xs text-gray-400 dark:text-gray-600">
|
||||
{fullFunctionId && <div>Function ID: {fullFunctionId}</div>}
|
||||
{taskId && <div>Task ID: {taskId}</div>}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Step Logs / Debug Logs */}
|
||||
{stepLogs.length > 0 && (
|
||||
<div className="mb-6 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'
|
||||
}`}
|
||||
>
|
||||
<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>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Close Button */}
|
||||
<div className="flex justify-center">
|
||||
<button
|
||||
onClick={onClose}
|
||||
className="px-6 py-3 rounded-lg font-medium text-sm transition-colors shadow-sm bg-error-500 hover:bg-error-600 text-white"
|
||||
>
|
||||
Close
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</Modal>
|
||||
);
|
||||
}
|
||||
|
||||
// Processing/Pending state - show progress modal
|
||||
return (
|
||||
<Modal
|
||||
isOpen={isOpen}
|
||||
onClose={onClose || (() => {})}
|
||||
className="max-w-lg"
|
||||
showCloseButton={false}
|
||||
>
|
||||
<div className="p-6 min-h-[300px]">
|
||||
{/* Header with Processing Icon */}
|
||||
<div className="flex flex-col items-center mb-6">
|
||||
<ProcessingIcon />
|
||||
<h3 className="text-xl font-semibold text-gray-900 dark:text-white mb-2 text-center">
|
||||
{title}
|
||||
</h3>
|
||||
<p className="text-sm text-gray-600 dark:text-gray-400 text-center">
|
||||
{message}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Progress Bar */}
|
||||
<div className="mb-6">
|
||||
<ProgressBar
|
||||
value={percentage}
|
||||
color={getProgressColor()}
|
||||
size="lg"
|
||||
showLabel={true}
|
||||
label={`${Math.round(percentage)}%`}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Details (current/total) */}
|
||||
{details && details.total > 0 && (
|
||||
<div className="mb-4 p-3 bg-gray-50 dark:bg-gray-800 rounded-lg">
|
||||
<div className="flex items-center justify-between text-sm">
|
||||
<span className="text-gray-600 dark:text-gray-400">
|
||||
Progress
|
||||
</span>
|
||||
<span className="font-semibold text-gray-900 dark:text-white">
|
||||
{details.current || details.completed || 0} / {details.total}
|
||||
</span>
|
||||
</div>
|
||||
{details.currentItem && (
|
||||
<div className="mt-2 text-xs text-gray-500 dark:text-gray-400 truncate">
|
||||
Current: {details.currentItem}
|
||||
</div>
|
||||
)}
|
||||
</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>
|
||||
)}
|
||||
</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'
|
||||
}`}
|
||||
>
|
||||
<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>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Footer */}
|
||||
<div className="flex justify-end gap-3">
|
||||
{onCancel && status !== 'completed' && status !== 'error' && (
|
||||
<Button
|
||||
variant="secondary"
|
||||
size="sm"
|
||||
onClick={onCancel}
|
||||
disabled={status === 'processing'}
|
||||
>
|
||||
Cancel
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</Modal>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user