Spaces:
Sleeping
Sleeping
File size: 2,673 Bytes
fd52f31 |
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 72 73 74 75 76 77 78 79 |
import React, { useEffect, useState } from 'react';
import { createPortal } from 'react-dom';
import { FaCheckCircle, FaTimesCircle, FaInfoCircle, FaPodcast, FaMusic } from 'react-icons/fa';
import './WorkflowToast.css';
// The actual Toast component
const Toast = ({ message, type = 'success', onClose }) => {
const [visible, setVisible] = useState(false);
useEffect(() => {
// Add class to body to prevent scrollbar
document.body.classList.add('has-toast');
// Show toast immediately
setVisible(true);
// Hide toast after delay
const timer = setTimeout(() => {
setVisible(false);
// Delay actual removal from DOM to allow exit animation to complete
setTimeout(() => {
document.body.classList.remove('has-toast');
onClose();
}, 300);
}, 5000); // Extended duration for toast visibility
return () => {
clearTimeout(timer);
document.body.classList.remove('has-toast');
};
}, [onClose, message]);
const getIcon = () => {
// Check if message is related to podcast generation
const isPodcastMessage = message.toLowerCase().includes('podcast') ||
message.toLowerCase().includes('play') ||
message.toLowerCase().includes('listen');
switch (type) {
case 'success':
return isPodcastMessage ? <FaPodcast /> : <FaCheckCircle />;
case 'error':
return <FaTimesCircle />;
case 'info':
return <FaInfoCircle />;
case 'podcast':
return <FaMusic />;
default:
return <FaCheckCircle />;
}
};
// Determine if this is a podcast-related toast for special styling
const isPodcastToast = message.toLowerCase().includes('podcast') || type === 'podcast';
const toastClass = `workflow-toast ${type} ${isPodcastToast ? 'podcast-toast' : ''} ${visible ? 'visible' : ''}`;
return (
<div className={toastClass}>
<div className="workflow-toast-icon">
{getIcon()}
</div>
<div className="workflow-toast-message">{message}</div>
</div>
);
};
// Portal component to mount toasts in the toast container
const WorkflowToast = (props) => {
const container = document.getElementById('toast-container');
if (!container) {
// Fallback if the toast container doesn't exist
return <Toast {...props} />;
}
return createPortal(<Toast {...props} />, container);
};
export default WorkflowToast; |