0x1998 - MANAGER
Düzenlenen Dosya: StatusMessage.jsx
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 <WorkflowToolCompleted label={label} />; } if (type === 'workflow-canceled') { return <WorkflowToolCanceled label={label} />; } if (!content) return null; return ( <div className={classNames('p-2 text-center text-xs italic text-gray-700', { 'status-animation': canAnimate, })} > {animate ? ( <AnimateChunks words={decodeEntities(content).split('')} delay={0.02} /> ) : ( decodeEntities(content) )} </div> ); }; export const WorkflowToolCompleted = ({ label }) => { return ( <div className="flex w-full items-start gap-2.5 p-2"> <div className="w-7 shrink-0" /> <div className="flex min-w-0 flex-1 flex-col gap-1"> <div className="flex items-center gap-2 rounded-lg border border-wp-alert-green bg-wp-alert-green/20 p-3 text-green-900"> <div className="h-6 w-6 leading-none"> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="size-6" > <title>{__('Success icon', 'extendify-local')}</title> <path strokeLinecap="round" strokeLinejoin="round" d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" /> </svg> </div> <div className="text-sm"> {decodeEntities(label) || __('Workflow completed successfully', 'extendify-local')} </div> </div> </div> </div> ); }; export const WorkflowToolCanceled = ({ label }) => { return ( <div className="flex w-full items-start gap-2.5 p-2"> <div className="w-7 shrink-0" /> <div className="flex min-w-0 flex-1 flex-col gap-1"> <div className="flex items-center gap-2 rounded-lg border border-gray-300 bg-gray-50 p-3 text-gray-700"> <div className="text-sm"> {decodeEntities(label) || __('Workflow was canceled', 'extendify-local')} </div> </div> </div> </div> ); };
geri dön