import { AnimateChunks } from '@agent/components/messages/AnimateChunks'; import { useEffect, useMemo, useState } from '@wordpress/element'; import { decodeEntities } from '@wordpress/html-entities'; import { __ } from '@wordpress/i18n'; import classNames from 'classnames'; export const StatusMessage = ({ status, animate }) => { const { type, label } = status.details; const [content, setContent] = useState(); const [loopIndex, setLoopIndex] = useState(0); const statusContent = useMemo( () => ({ 'calling-agent': __('Thinking...', 'extendify-local'), 'agent-working': [ __('Working on it...', 'extendify-local'), __('Interpreting message...', 'extendify-local'), __('Formulating a response...', 'extendify-local'), __('Reviewing logic...', 'extendify-local'), ], 'workflow-tool-processing': __('Processing...', 'extendify-local'), 'tool-started': label || __('Gathering data...', 'extendify-local'), 'tool-completed': label || __('Analyzing...', 'extendify-local'), 'tool-canceled': label || __('Canceled', 'extendify-local'), 'workflow-canceled': label || __('Canceled', 'extendify-local'), 'credits-exhausted': __('Usage limit reached', 'extendify-local'), 'credits-restored': __('Usage limit restored', 'extendify-local'), }), [label], ); const canAnimate = [ 'calling-agent', 'agent-working', 'tool-started', ].includes(type); useEffect(() => { if (!Array.isArray(statusContent[type])) { setContent(statusContent[type]); return; } setContent(statusContent[type][loopIndex]); const timer = setTimeout(() => { setContent(null); setLoopIndex((prevIndex) => (prevIndex + 1) % statusContent[type].length); }, 5000); return () => { // we need to clear the content and make sure it hide the status correctly. setContent(null); clearTimeout(timer); }; }, [type, statusContent, content, loopIndex]); if (type === 'workflow-tool-completed') { return ; } if (type === 'workflow-canceled') { return ; } if (!content) return null; return (
{animate ? ( ) : ( decodeEntities(content) )}
); }; export const WorkflowToolCompleted = ({ label }) => { return (
{__('Success icon', 'extendify-local')}
{decodeEntities(label) || __('Workflow completed successfully', 'extendify-local')}
); }; export const WorkflowToolCanceled = ({ label }) => { return (
{decodeEntities(label) || __('Workflow was canceled', 'extendify-local')}
); };