125 lines
No EOL
5.4 KiB
TypeScript
125 lines
No EOL
5.4 KiB
TypeScript
import React from "react";
|
|
import { motion, AnimatePresence } from "framer-motion";
|
|
import { WorkflowStatusDisplayProps } from "./dashboardChatAreaTypes";
|
|
import styles from './DashboardChatArea.module.css';
|
|
|
|
const WorkflowStatusDisplay: React.FC<WorkflowStatusDisplayProps> = ({
|
|
currentWorkflowId,
|
|
workflowStatus,
|
|
workflowCompleted,
|
|
onStartNewWorkflow,
|
|
handleRetry,
|
|
shouldShowRetryButton
|
|
}) => {
|
|
return (
|
|
<AnimatePresence>
|
|
{currentWorkflowId && shouldShowRetryButton() && (
|
|
<motion.div
|
|
className={styles.workflow_status}
|
|
initial={{ opacity: 0, scale: 0.8 }}
|
|
animate={{ opacity: 1, scale: 1 }}
|
|
exit={{ opacity: 0, scale: 0.8 }}
|
|
transition={{ duration: 0.3, ease: "easeOut" }}
|
|
>
|
|
<div className={styles.retry_container}>
|
|
<span className={styles.failed_message}>
|
|
Workflow failed.
|
|
</span>
|
|
<button
|
|
onClick={handleRetry}
|
|
className={styles.retry_button}
|
|
>
|
|
Nochmal versuchen
|
|
</button>
|
|
</div>
|
|
</motion.div>
|
|
)}
|
|
{currentWorkflowId && !workflowCompleted && !shouldShowRetryButton() && (
|
|
<motion.div
|
|
className={styles.workflow_status}
|
|
initial={{ opacity: 0, scale: 0.8 }}
|
|
animate={{ opacity: 1, scale: 1 }}
|
|
exit={{ opacity: 0, scale: 0.8 }}
|
|
transition={{ duration: 0.3, ease: "easeOut" }}
|
|
>
|
|
<div
|
|
className={styles.dots_container}
|
|
style={{ display: 'flex', alignItems: 'center', gap: '4px', height: '20px' }}
|
|
>
|
|
<motion.span
|
|
initial={{ opacity: 0, scale: 0 }}
|
|
animate={{
|
|
opacity: 1,
|
|
scale: 1,
|
|
y: [0, -7, 0]
|
|
}}
|
|
exit={{ opacity: 0, scale: 0 }}
|
|
transition={{
|
|
opacity: { duration: 0.4, ease: "easeOut" },
|
|
scale: { duration: 0.4, ease: "easeOut" },
|
|
y: {
|
|
duration: 1.2,
|
|
repeat: Infinity,
|
|
ease: "easeInOut",
|
|
times: [0, 0.5, 1],
|
|
delay: 0.2
|
|
}
|
|
}}
|
|
style={{ fontSize: '20px', display: 'inline-block' }}
|
|
>
|
|
•
|
|
</motion.span>
|
|
<motion.span
|
|
initial={{ opacity: 0, scale: 0 }}
|
|
animate={{
|
|
opacity: 1,
|
|
scale: 1,
|
|
y: [0, -7, 0]
|
|
}}
|
|
exit={{ opacity: 0, scale: 0 }}
|
|
transition={{
|
|
opacity: { duration: 0.4, ease: "easeOut", delay: 0.1 },
|
|
scale: { duration: 0.4, ease: "easeOut", delay: 0.1 },
|
|
y: {
|
|
duration: 1.2,
|
|
repeat: Infinity,
|
|
ease: "easeInOut",
|
|
times: [0, 0.5, 1],
|
|
delay: 0.4
|
|
}
|
|
}}
|
|
style={{ fontSize: '20px', display: 'inline-block' }}
|
|
>
|
|
•
|
|
</motion.span>
|
|
<motion.span
|
|
initial={{ opacity: 0, scale: 0 }}
|
|
animate={{
|
|
opacity: 1,
|
|
scale: 1,
|
|
y: [0, -7, 0]
|
|
}}
|
|
exit={{ opacity: 0, scale: 0 }}
|
|
transition={{
|
|
opacity: { duration: 0.4, ease: "easeOut", delay: 0.2 },
|
|
scale: { duration: 0.4, ease: "easeOut", delay: 0.2 },
|
|
y: {
|
|
duration: 1.2,
|
|
repeat: Infinity,
|
|
ease: "easeInOut",
|
|
times: [0, 0.5, 1],
|
|
delay: 0.6
|
|
}
|
|
}}
|
|
style={{ fontSize: '20px', display: 'inline-block' }}
|
|
>
|
|
•
|
|
</motion.span>
|
|
</div>
|
|
</motion.div>
|
|
)}
|
|
</AnimatePresence>
|
|
);
|
|
};
|
|
|
|
export default WorkflowStatusDisplay;
|