Spaces:
Running
Running
File size: 2,596 Bytes
67b042f |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 |
import { FinalStep } from '@/types/agent';
import React from 'react';
import { Card, CardContent, Box, Typography } from '@mui/material';
import CheckIcon from '@mui/icons-material/Check';
import CloseIcon from '@mui/icons-material/Close';
import { useAgentStore } from '@/stores/agentStore';
interface FinalStepCardProps {
finalStep: FinalStep;
isActive?: boolean;
}
export const FinalStepCard: React.FC<FinalStepCardProps> = ({ finalStep, isActive = false }) => {
const setSelectedStepIndex = useAgentStore((state) => state.setSelectedStepIndex);
const isSuccess = finalStep.type === 'success';
const handleClick = () => {
// Clicking on final step goes to live mode (null)
setSelectedStepIndex(null);
};
return (
<Card
elevation={0}
onClick={handleClick}
sx={{
backgroundColor: 'background.paper',
border: '1px solid',
borderColor: (theme) => `${isActive
? isSuccess ? theme.palette.success.main : theme.palette.error.main
: theme.palette.divider} !important`,
borderRadius: 1.5,
transition: 'all 0.2s ease',
cursor: 'pointer',
boxShadow: isActive
? (theme) => isSuccess
? `0 2px 8px ${theme.palette.mode === 'dark' ? 'rgba(102, 187, 106, 0.3)' : 'rgba(102, 187, 106, 0.2)'}`
: `0 2px 8px ${theme.palette.mode === 'dark' ? 'rgba(244, 67, 54, 0.3)' : 'rgba(244, 67, 54, 0.2)'}`
: 'none',
'&:hover': {
borderColor: (theme) => `${isSuccess ? theme.palette.success.main : theme.palette.error.main} !important`,
boxShadow: (theme) => isSuccess
? `0 2px 8px ${theme.palette.mode === 'dark' ? 'rgba(102, 187, 106, 0.2)' : 'rgba(102, 187, 106, 0.1)'}`
: `0 2px 8px ${theme.palette.mode === 'dark' ? 'rgba(244, 67, 54, 0.2)' : 'rgba(244, 67, 54, 0.1)'}`,
},
}}
>
<CardContent sx={{ p: 1.5, '&:last-child': { pb: 1.5 } }}>
{/* Header with icon */}
<Box sx={{ display: 'flex', alignItems: 'center', gap: 0.75 }}>
{isSuccess ? (
<CheckIcon sx={{ fontSize: 20, color: 'success.main' }} />
) : (
<CloseIcon sx={{ fontSize: 20, color: 'error.main' }} />
)}
<Typography
sx={{
fontSize: '0.85rem',
fontWeight: 700,
color: isSuccess ? 'success.main' : 'error.main',
}}
>
{isSuccess ? 'Task completed' : 'Task failed'}
</Typography>
</Box>
</CardContent>
</Card>
);
};
|