theo-agent-dashboard

useDraft.ts (3880B)

---

 import { useState, useEffect, useRef, useCallback } from "react";
 
 export const DRAFT_KEY_PREFIX = "theo-draft:";
 
 const DEBOUNCE_MS = 300;
 
 function storageKey(sessionId: string | null): string {
   return `${DRAFT_KEY_PREFIX}${sessionId ?? "new"}`;
 }
 
 /**
  * Read draft from localStorage. Returns empty string if none exists.
  */
 function readDraft(sessionId: string | null): string {
   try {
     return localStorage.getItem(storageKey(sessionId)) ?? "";
   } catch {
     return "";
   }
 }
 
 /**
  * Write draft to localStorage.
  */
 function writeDraft(sessionId: string | null, text: string): void {
   try {
     if (text) {
       localStorage.setItem(storageKey(sessionId), text);
     } else {
       localStorage.removeItem(storageKey(sessionId));
     }
   } catch {
     // localStorage full or unavailable — silently ignore
   }
 }
 
 /**
  * Remove draft from localStorage for a given session.
  */
 export function clearDraft(sessionId: string | null): void {
   try {
     localStorage.removeItem(storageKey(sessionId));
   } catch {
     // ignore
   }
 }
 
 /**
  * Migrate a draft from one key to another (e.g. "new" → session ID).
  * Removes the source key after copying.
  */
 export function migrateDraft(
   fromSessionId: string | null,
   toSessionId: string,
 ): void {
   const text = readDraft(fromSessionId);
   if (!text) return;
   writeDraft(toSessionId, text);
   clearDraft(fromSessionId);
 }
 
 /**
  * Hook that syncs a text draft to localStorage, keyed by session ID.
  *
  * - Returns `[text, setText]` where setText updates both React state and
  *   debounced localStorage writes.
  * - When sessionId changes, loads the draft for the new session.
  * - Uses a 300ms debounce to avoid thrashing storage on every keystroke.
  */
 export function useDraft(
   sessionId: string | null,
 ): [string, (text: string) => void, () => void] {
   const [text, setTextState] = useState(() => readDraft(sessionId));
   const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
   const sessionIdRef = useRef(sessionId);
   const justSentRef = useRef(false);
 
   // When sessionId changes, flush pending save and load new draft.
   // Skip if markSent() was just called — the user sent a message so
   // the draft is stale (migrateDraft may have copied it to the new key).
   useEffect(() => {
     if (sessionIdRef.current === sessionId) return;
 
     // Flush any pending save for the old session
     if (timerRef.current) {
       clearTimeout(timerRef.current);
       timerRef.current = null;
     }
 
     sessionIdRef.current = sessionId;
 
     if (justSentRef.current) {
       justSentRef.current = false;
       setTextState("");
       clearDraft(sessionId);
       return;
     }
 
     setTextState(readDraft(sessionId));
   }, [sessionId]);
 
   const setText = useCallback(
     (newText: string) => {
       setTextState(newText);
 
       if (timerRef.current) {
         clearTimeout(timerRef.current);
       }
 
       timerRef.current = setTimeout(() => {
         writeDraft(sessionIdRef.current, newText);
         timerRef.current = null;
       }, DEBOUNCE_MS);
     },
     [],
   );
 
   // Signal that a message was just sent — suppresses the next sessionId-change
   // draft restore so the cleared text doesn't reappear.
   const markSent = useCallback(() => {
     justSentRef.current = true;
     // Also clear the pending debounce timer so it doesn't re-save the old text
     if (timerRef.current) {
       clearTimeout(timerRef.current);
       timerRef.current = null;
     }
   }, []);
 
   // Flush on unmount
   useEffect(() => {
     return () => {
       if (timerRef.current) {
         clearTimeout(timerRef.current);
         // We can't reliably read the latest text state in a cleanup effect,
         // but the debounce timer would have already fired for any value
         // that was set >300ms ago. This is acceptable for drafts.
       }
     };
   }, []);
 
   return [text, setText, markSent];
 }