@@ -458,17 +458,85 @@ async function createTaskWithLatestTemplateVersion(
458458} ) ;
459459}
460460
461- const PromptTextarea :FC < TextareaAutosizeProps > = ( props ) => {
461+ type PromptTextareaProps = TextareaAutosizeProps & {
462+ isSubmitting ?:boolean ;
463+ } ;
464+
465+ const PromptTextarea :FC < PromptTextareaProps > = ( {
466+ isSubmitting,
467+ ...props
468+ } ) => {
462469return (
463- < TextareaAutosize
464- { ...props }
465- required
466- id = "prompt"
467- name = "prompt"
468- placeholder = "Prompt your AI agent to start a task..."
469- className = { `border-0 px-3 py-2 resize-none w-full h-full bg-transparent rounded-lg
470- outline-none flex min-h-24 text-sm shadow-sm text-content-primary
471- placeholder:text-content-secondary md:text-sm${ props . readOnly ?"opacity-60 cursor-not-allowed" :"" } }
472- />
470+ < div className = "relative" >
471+ < TextareaAutosize
472+ { ...props }
473+ required
474+ id = "prompt"
475+ name = "prompt"
476+ placeholder = "Prompt your AI agent to start a task..."
477+ className = { `border-0 px-3 py-2 resize-none w-full h-full bg-transparent rounded-lg
478+ outline-none flex min-h-24 text-sm shadow-sm text-content-primary
479+ placeholder:text-content-secondary md:text-sm${ props . readOnly || isSubmitting ?"opacity-60 cursor-not-allowed" :"" } }
480+ />
481+ { isSubmitting && (
482+ < div className = "absolute inset-0 pointer-events-none overflow-hidden" >
483+ < div className = "caret-scanner" />
484+ </ div >
485+ ) }
486+ < style > { `
487+ @keyframes caretScan {
488+ 0%, 100% {
489+ left: 0%;
490+ top: 10%;
491+ }
492+ 10% {
493+ left: 70%;
494+ top: 10%;
495+ }
496+ 20% {
497+ left: 30%;
498+ top: 30%;
499+ }
500+ 30% {
501+ left: 90%;
502+ top: 20%;
503+ }
504+ 40% {
505+ left: 20%;
506+ top: 50%;
507+ }
508+ 50% {
509+ left: 80%;
510+ top: 60%;
511+ }
512+ 60% {
513+ left: 40%;
514+ top: 70%;
515+ }
516+ 70% {
517+ left: 60%;
518+ top: 40%;
519+ }
520+ 80% {
521+ left: 10%;
522+ top: 80%;
523+ }
524+ 90% {
525+ left: 50%;
526+ top: 90%;
527+ }
528+ }
529+
530+ .caret-scanner {
531+ position: absolute;
532+ width: 12px;
533+ height: 20px;
534+ background-color: rgba(99, 102, 241, 0.5);
535+ border: 1px solid rgb(99, 102, 241);
536+ animation: caretScan 3s ease-in-out infinite;
537+ border-radius: 2px;
538+ }
539+ ` } </ style >
540+ </ div >
473541) ;
474542} ;