Studio: fix composer reset after failed send (#7377)

* fix composer reset

* Studio: clear composer draft on send

* Studio: cancel the pending draft save when clearing on send

Author: NilayYadav

studio/frontend/src/components/assistant-ui/thread.tsx

@@ -1556,6 +1556,7 @@ const Composer: FC<{
   const draftThreadId = referenceThreadId;
   const draftKey = draftThreadId ? composerDraftKey(draftThreadId) : null;
   const lastDraftKeyRef = useRef(draftKey);
+  const draftSaveTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
   useEffect(() => {
     const draft = draftKey ? (readComposerDraft(draftKey) ?? "") : "";
     const composer = aui.composer();
@@ -1574,8 +1575,25 @@ const Composer: FC<{
       return;
     }
     const t = setTimeout(() => writeComposerDraft(draftKey, composerText), 300);
+    draftSaveTimerRef.current = t;
     return () => clearTimeout(t);
   }, [composerText, draftKey]);
+  // Without this the restore effect above puts the sent text back when the
+  // runtime rebinds on the first message.
+  const draftKeyRef = useRef(draftKey);
+  useEffect(() => {
+    draftKeyRef.current = draftKey;
+  }, [draftKey]);
+  const clearStoredDraft = useCallback(() => {
+    if (draftSaveTimerRef.current !== null) {
+      clearTimeout(draftSaveTimerRef.current);
+      draftSaveTimerRef.current = null;
+    }
+    const key = draftKeyRef.current;
+    if (key) {
+      writeComposerDraft(key, "");
+    }
+  }, []);
   // react-textarea-autosize re-measures only on value change or window resize,
   // not on the width swap from expanding, so it keeps the taller height and
   // leaves a stray blank row. Nudge a resize whenever input width changes.
@@ -1726,9 +1744,10 @@ const Composer: FC<{
     setPendingSend(false);
     dismissWaitToast();
     if (text.trim().length > 0 || attachments.length > 0) {
+      clearStoredDraft();
       aui.composer().send();
     }
-  }, [pendingSend, indexingActive, aui, dismissWaitToast]);
+  }, [pendingSend, indexingActive, aui, clearStoredDraft, dismissWaitToast]);
 
   // Drop any queued send + toast on unmount (e.g. thread switch).
   useEffect(
@@ -1771,6 +1790,7 @@ const Composer: FC<{
         flushResourcesSync(() => {
           aui.composer().setText("");
         });
+        clearStoredDraft();
         startPromptQueue(
           [queuedPrompt],
           createPromptQueueTarget(),
@@ -1804,6 +1824,7 @@ const Composer: FC<{
           closeOverlay();
           return;
         }
+        clearStoredDraft();
         setImageToolsEnabled(true);
         setPendingImageEditReference({
           threadId: overlay.threadId ?? referenceThreadId,
@@ -1821,11 +1842,15 @@ const Composer: FC<{
             );
         });
         closeOverlay();
+        return;
       }
+
+      clearStoredDraft();
     },
     [
       aui,
       canQueueCurrentPrompt,
+      clearStoredDraft,
       closeOverlay,
       composerText,
       createPromptQueueTarget,
@@ -1947,6 +1972,7 @@ const Composer: FC<{
                 flushResourcesSync(() => {
                   aui.composer().setText("");
                 });
+                clearStoredDraft();
                 startPromptQueue([queuedPrompt], createPromptQueueTarget(), true);
               }}
               onSendClick={interceptSend}