move text area re-size to parent

Created getDraft(), saveDraft(), and removeDraft() helpers to
eliminate repeated typeof window !== "undefined" checks.

Benefits:
- DRY: Single source of truth for storage operations (4 call sites)
- Consistency: All storage operations follow same pattern
- Maintainability: Change error handling in one place
- SSR-safe: Handles server-side rendering automatically

web/src/app/chat/components/ChatPage.tsx

@@ -277,10 +277,6 @@ export function ChatPage({
     }
   }, [lastFailedFiles, setPopup, clearLastFailedFiles]);
 
-  const [message, setMessage] = useState(
-    searchParams?.get(SEARCH_PARAM_NAMES.USER_PROMPT) || ""
-  );
-
   const [projectPanelVisible, setProjectPanelVisible] = useState(true);
 
   const filterManager = useFilters();
@@ -310,7 +306,9 @@ export function ChatPage({
     setAboveHorizon(false);
   }, [existingChatSessionId]);
 
-  function handleInputResize() {
+  const autoScrollEnabled = user?.preferences?.auto_scroll ?? false;
+
+  const handleInputResize = useCallback(() => {
     setTimeout(() => {
       if (
         inputRef.current &&
@@ -344,23 +342,39 @@ export function ChatPage({
         previousHeight.current = newHeight;
       }
     }, 100);
-  }
-
-  const resetInputBar = useCallback(() => {
-    setMessage("");
-    setCurrentMessageFiles([]);
-    if (endPaddingRef.current) {
-      endPaddingRef.current.style.height = `95px`;
-    }
-  }, [setMessage, setCurrentMessageFiles]);
+  }, [autoScrollEnabled]);
 
   const debounceNumber = 100; // time for debouncing
 
   // handle re-sizing of the text area
   const textAreaRef = useRef<HTMLTextAreaElement>(null);
+
+  const resetInputBar = useCallback(() => {
+    setCurrentMessageFiles([]);
+    if (endPaddingRef.current) {
+      endPaddingRef.current.style.height = `95px`;
+    }
+    // Reset textarea height
+    if (textAreaRef.current) {
+      textAreaRef.current.value = "";
+      textAreaRef.current.style.height = "0px";
+      textAreaRef.current.style.height = `${Math.min(
+        textAreaRef.current.scrollHeight,
+        200 // MAX_INPUT_HEIGHT from ChatInputBar
+      )}px`;
+    }
+  }, [setCurrentMessageFiles]);
+
+  // ResizeObserver watches inputRef for height changes
   useEffect(() => {
-    handleInputResize();
-  }, [message]);
+    if (!inputRef.current) return;
+    const resizeObserver = new ResizeObserver(() => {
+      // RAF guard prevents "ResizeObserver loop limit exceeded"
+      requestAnimationFrame(() => handleInputResize());
+    });
+    resizeObserver.observe(inputRef.current);
+    return () => resizeObserver.disconnect();
+  }, [handleInputResize]);
 
   // Add refs needed by useChatSessionController
   const chatSessionIdRef = useRef<string | null>(existingChatSessionId);
@@ -515,8 +529,6 @@ export function ChatPage({
       onSubmit,
     });
 
-  const autoScrollEnabled = user?.preferences?.auto_scroll ?? false;
-
   useScrollonStream({
     chatState: currentChatState,
     scrollableDivRef,
@@ -626,14 +638,17 @@ export function ChatPage({
     );
   }, []);
 
-  const handleChatInputSubmit = useCallback(() => {
-    onSubmit({
-      message: message,
-      currentMessageFiles: currentMessageFiles,
-      useAgentSearch: deepResearchEnabled,
-    });
-    setShowOnboarding(false);
-  }, [message, onSubmit, currentMessageFiles, deepResearchEnabled]);
+  const handleChatInputSubmit = useCallback(
+    (message: string) => {
+      onSubmit({
+        message: message,
+        currentMessageFiles: currentMessageFiles,
+        useAgentSearch: deepResearchEnabled,
+      });
+      setShowOnboarding(false);
+    },
+    [onSubmit, currentMessageFiles, deepResearchEnabled]
+  );
 
   // Memoized callbacks for DocumentResults
   const handleMobileDocumentSidebarClose = useCallback(() => {
@@ -919,11 +934,14 @@ export function ChatPage({
                           removeDocs={() => setSelectedDocuments([])}
                           retrievalEnabled={retrievalEnabled}
                           selectedDocuments={selectedDocuments}
-                          message={message}
-                          setMessage={setMessage}
+                          initialMessage={
+                            searchParams?.get(SEARCH_PARAM_NAMES.USER_PROMPT) ||
+                            ""
+                          }
                           stopGenerating={stopGenerating}
                           onSubmit={handleChatInputSubmit}
                           chatState={currentChatState}
+                          chatSessionId={existingChatSessionId}
                           currentSessionFileTokenCount={
                             existingChatSessionId
                               ? currentSessionFileTokenCount
@@ -934,6 +952,7 @@ export function ChatPage({
                           handleFileUpload={handleMessageSpecificFileUpload}
                           textAreaRef={textAreaRef}
                           setPresentingDocument={setPresentingDocument}
+                          resetInputBar={resetInputBar}
                           disabled={
                             llmProviders.length === 0 ||
                             (llmProviders.length === 0 &&

web/src/app/chat/components/input/ChatInputBar.tsx

@@ -41,6 +41,39 @@ import {
 
 const MAX_INPUT_HEIGHT = 200;
 
+// Draft storage helpers - SSR-safe sessionStorage operations
+function getDraft(key: string): string | null {
+  if (typeof window === "undefined") return null;
+  try {
+    return sessionStorage.getItem(key);
+  } catch (e) {
+    console.warn("Failed to load draft from sessionStorage:", e);
+    return null;
+  }
+}
+
+function saveDraft(key: string, value: string): void {
+  if (typeof window === "undefined") return;
+  try {
+    if (value.trim()) {
+      sessionStorage.setItem(key, value);
+    } else {
+      sessionStorage.removeItem(key);
+    }
+  } catch (e) {
+    console.warn("Failed to save draft to sessionStorage:", e);
+  }
+}
+
+function removeDraft(key: string): void {
+  if (typeof window === "undefined") return;
+  try {
+    sessionStorage.removeItem(key);
+  } catch (e) {
+    console.warn("Failed to remove draft from sessionStorage:", e);
+  }
+}
+
 export interface SourceChipProps {
   icon?: React.ReactNode;
   title: string;
@@ -83,12 +116,12 @@ export function SourceChip({
 export interface ChatInputBarProps {
   removeDocs: () => void;
   selectedDocuments: OnyxDocument[];
-  message: string;
-  setMessage: (message: string) => void;
+  initialMessage: string;
   stopGenerating: () => void;
-  onSubmit: () => void;
+  onSubmit: (message: string) => void;
   llmManager: LlmManager;
   chatState: ChatState;
+  chatSessionId: string | null;
   currentSessionFileTokenCount: number;
   availableContextTokens: number;
 
@@ -97,12 +130,13 @@ export interface ChatInputBarProps {
 
   toggleDocumentSidebar: () => void;
   handleFileUpload: (files: File[]) => void;
-  textAreaRef: React.RefObject<HTMLTextAreaElement>;
+  textAreaRef: React.MutableRefObject<HTMLTextAreaElement | null>;
   filterManager: FilterManager;
   retrievalEnabled: boolean;
   deepResearchEnabled: boolean;
   setPresentingDocument?: (document: MinimalOnyxDocument) => void;
   toggleDeepResearch: () => void;
+  resetInputBar: () => void;
   disabled: boolean;
 }
 
@@ -112,11 +146,11 @@ function ChatInputBarInner({
   toggleDocumentSidebar,
   filterManager,
   selectedDocuments,
-  message,
-  setMessage,
+  initialMessage,
   stopGenerating,
   onSubmit,
   chatState,
+  chatSessionId,
   currentSessionFileTokenCount,
   availableContextTokens,
   // assistants
@@ -128,13 +162,32 @@ function ChatInputBarInner({
   deepResearchEnabled,
   toggleDeepResearch,
   setPresentingDocument,
+  resetInputBar,
   disabled,
 }: ChatInputBarProps) {
   const { user } = useUser();
-
   const { forcedToolIds, setForcedToolIds } = useAgentsContext();
   const { currentMessageFiles, setCurrentMessageFiles } = useProjectsContext();
 
+  // Draft persistence: compute key based on chatSessionId
+  const draftKey = useMemo(
+    () => `chat-draft-${chatSessionId || "new"}`,
+    [chatSessionId]
+  );
+
+  // Local message state: initialize from URL param or saved draft
+  const [localMessage, setLocalMessage] = useState(() => {
+    if (initialMessage) {
+      return initialMessage;
+    }
+    return getDraft(draftKey) || "";
+  });
+
+  // Refs for tracking previous values across renders
+  const isInitialMount = React.useRef(true);
+  const prevChatState = React.useRef(chatState);
+  const prevDraftKey = React.useRef<string>("");
+
   const currentIndexingFiles = useMemo(() => {
     return currentMessageFiles.filter(
       (file) => file.status === UserFileStatus.PROCESSING
@@ -167,16 +220,6 @@ function ChatInputBarInner({
   );
 
   const combinedSettings = useContext(SettingsContext);
-  useEffect(() => {
-    const textarea = textAreaRef.current;
-    if (textarea) {
-      textarea.style.height = "0px"; // this is necessary in order to "reset" the scrollHeight
-      textarea.style.height = `${Math.min(
-        textarea.scrollHeight,
-        MAX_INPUT_HEIGHT
-      )}px`;
-    }
-  }, [message, textAreaRef]);
 
   const handlePaste = (event: React.ClipboardEvent) => {
     const items = event.clipboardData?.items;
@@ -225,7 +268,7 @@ function ChatInputBarInner({
 
   const updateInputPrompt = (prompt: InputPrompt) => {
     hidePrompts();
-    setMessage(`${prompt.content}`);
+    setLocalMessage(`${prompt.content}`);
   };
 
   const handlePromptInput = useCallback(
@@ -244,26 +287,90 @@ function ChatInputBarInner({
     [hidePrompts]
   );
 
+  // Helper to resize textarea based on content
+  const resizeTextarea = useCallback((textarea: HTMLTextAreaElement) => {
+    textarea.style.height = "0px";
+    textarea.style.height = `${Math.min(
+      textarea.scrollHeight,
+      MAX_INPUT_HEIGHT
+    )}px`;
+  }, []);
+
   const handleInputChange = useCallback(
     (event: React.ChangeEvent<HTMLTextAreaElement>) => {
       const text = event.target.value;
-      setMessage(text);
+      setLocalMessage(text);
       handlePromptInput(text);
+
+      saveDraft(draftKey, text);
+
+      if (textAreaRef.current) {
+        resizeTextarea(textAreaRef.current);
+      }
     },
-    [setMessage, handlePromptInput]
+    [handlePromptInput, textAreaRef, draftKey, resizeTextarea]
   );
 
+  // Callback ref to set initial textarea height on mount
+  const handleTextAreaRef = useCallback(
+    (element: HTMLTextAreaElement | null) => {
+      textAreaRef.current = element;
+      if (element) {
+        resizeTextarea(element);
+      }
+    },
+    [textAreaRef, resizeTextarea]
+  );
+
+  // Wrap onSubmit to clear draft immediately before submission
+  const handleSubmit = useCallback(
+    (message: string) => {
+      // Clear draft synchronously before onSubmit to prevent race condition
+      // (chatSessionId may update during submission, changing draftKey)
+      removeDraft(draftKey);
+      onSubmit(message);
+    },
+    [onSubmit, draftKey]
+  );
+
+  // Load draft when switching between chats
+  useEffect(() => {
+    if (isInitialMount.current) {
+      isInitialMount.current = false;
+      prevDraftKey.current = draftKey;
+      return;
+    }
+
+    const loadedDraft = getDraft(draftKey) || "";
+    setLocalMessage(loadedDraft);
+    prevDraftKey.current = draftKey;
+
+    // Resize textarea to match loaded content
+    if (textAreaRef.current) {
+      resizeTextarea(textAreaRef.current);
+    }
+  }, [draftKey, textAreaRef, resizeTextarea]);
+
+  // Effect: Clear input when transitioning away from input state
+  useEffect(() => {
+    if (prevChatState.current === "input" && chatState !== "input") {
+      setLocalMessage("");
+      resetInputBar(); // Handles both parent padding and textarea height
+    }
+    prevChatState.current = chatState;
+  }, [chatState, resetInputBar]);
+
   const startFilterSlash = useMemo(() => {
-    if (message !== undefined) {
-      const message_segments = message
-        .slice(message.lastIndexOf("/") + 1)
+    if (localMessage !== undefined) {
+      const message_segments = localMessage
+        .slice(localMessage.lastIndexOf("/") + 1)
         .split(/\s/);
       if (message_segments[0]) {
         return message_segments[0].toLowerCase();
       }
     }
     return "";
-  }, [message]);
+  }, [localMessage]);
 
   const [tabbingIconIndex, setTabbingIconIndex] = useState(0);
 
@@ -422,7 +529,7 @@ function ChatInputBarInner({
           onPaste={handlePaste}
           onKeyDownCapture={handleKeyDown}
           onChange={handleInputChange}
-          ref={textAreaRef}
+          ref={handleTextAreaRef}
           id="onyx-chat-input-textarea"
           className={cn(
             "w-full",
@@ -450,7 +557,7 @@ function ChatInputBarInner({
                 } help you today`
               : `How can ${selectedAssistant.name} help you today`
           }
-          value={message}
+          value={localMessage}
           onKeyDown={(event) => {
             if (
               event.key === "Enter" &&
@@ -459,8 +566,8 @@ function ChatInputBarInner({
               !(event.nativeEvent as any).isComposing
             ) {
               event.preventDefault();
-              if (message) {
-                onSubmit();
+              if (localMessage) {
+                handleSubmit(localMessage);
               }
             }
           }}
@@ -611,12 +718,12 @@ function ChatInputBarInner({
             <IconButton
               id="onyx-chat-input-send-button"
               icon={chatState === "input" ? SvgArrowUp : SvgStop}
-              disabled={chatState === "input" && !message}
+              disabled={chatState === "input" && !localMessage}
               onClick={() => {
                 if (chatState == "streaming") {
                   stopGenerating();
-                } else if (message) {
-                  onSubmit();
+                } else if (localMessage) {
+                  handleSubmit(localMessage);
                 }
               }}
             />