store positive prompt textarea height in redux so it persists across refresh

Author: Mary Hipp

invokeai/frontend/web/src/features/parameters/components/Core/ParamPositivePrompt.tsx

@@ -14,7 +14,9 @@ import {
   selectStylePresetViewMode,
 } from 'features/stylePresets/store/stylePresetSlice';
 import { useRegisteredHotkeys } from 'features/system/components/HotkeysModal/useHotkeyData';
-import { memo, useCallback, useRef } from 'react';
+import { positivePromptBoxHeightChanged, selectPositivePromptBoxHeight } from 'features/ui/store/uiSlice';
+import { debounce } from 'lodash-es';
+import { memo, useCallback, useEffect, useRef } from 'react';
 import type { HotkeyCallback } from 'react-hotkeys-hook';
 import { useTranslation } from 'react-i18next';
 import { useListStylePresetsQuery } from 'services/api/endpoints/stylePresets';
@@ -25,6 +27,7 @@ export const ParamPositivePrompt = memo(() => {
   const baseModel = useAppSelector(selectBase);
   const viewMode = useAppSelector(selectStylePresetViewMode);
   const activeStylePresetId = useAppSelector(selectStylePresetActivePresetId);
+  const positivePromptBoxHeight = useAppSelector(selectPositivePromptBoxHeight);
 
   const { activeStylePreset } = useListStylePresetsQuery(undefined, {
     selectFromResult: ({ data }) => {
@@ -50,6 +53,45 @@ export const ParamPositivePrompt = memo(() => {
     onChange: handleChange,
   });
 
+  // Add debounced resize observer to detect height changes
+  useEffect(() => {
+    const textarea = textareaRef.current;
+    if (!textarea) {
+      return;
+    }
+
+    let currentHeight = textarea.offsetHeight;
+
+    const debouncedHeightUpdate = debounce((newHeight: number) => {
+      dispatch(positivePromptBoxHeightChanged(newHeight));
+    }, 150);
+
+    const resizeObserver = new ResizeObserver((entries) => {
+      for (const entry of entries) {
+        const newHeight = (entry.target as HTMLTextAreaElement).offsetHeight;
+        if (newHeight !== currentHeight) {
+          currentHeight = newHeight;
+          debouncedHeightUpdate(newHeight);
+        }
+      }
+    });
+
+    resizeObserver.observe(textarea);
+    return () => {
+      resizeObserver.disconnect();
+      debouncedHeightUpdate.cancel();
+    };
+  }, [dispatch]);
+
+  useEffect(() => {
+    const textarea = textareaRef.current;
+    if (!textarea) {
+      return;
+    }
+
+    textarea.style.height = `${positivePromptBoxHeight}px`;
+  }, [positivePromptBoxHeight]);
+
   const focus: HotkeyCallback = useCallback(
     (e) => {
       onFocus();
@@ -75,14 +117,14 @@ export const ParamPositivePrompt = memo(() => {
           ref={textareaRef}
           value={prompt}
           onChange={onChange}
-          minH={40}
           onKeyDown={onKeyDown}
           variant="darkFilled"
           borderTopWidth={24} // This prevents the prompt from being hidden behind the header
           paddingInlineEnd={10}
           paddingInlineStart={3}
           paddingTop={0}
           paddingBottom={3}
+          resize="vertical"
         />
         <PromptOverlayButtonWrapper>
           <AddPromptTriggerButton isOpen={isOpen} onOpen={onOpen} />

invokeai/frontend/web/src/features/ui/store/uiSlice.ts

@@ -16,6 +16,7 @@ const initialUIState: UIState = {
   accordions: {},
   expanders: {},
   shouldShowNotificationV2: true,
+  positivePromptBoxHeight: 40,
 };
 
 export const uiSlice = createSlice({
@@ -45,6 +46,9 @@ export const uiSlice = createSlice({
     shouldShowNotificationChanged: (state, action: PayloadAction<boolean>) => {
       state.shouldShowNotificationV2 = action.payload;
     },
+    positivePromptBoxHeightChanged: (state, action: PayloadAction<number>) => {
+      state.positivePromptBoxHeight = action.payload;
+    },
   },
   extraReducers(builder) {
     builder.addCase(workflowLoaded, (state) => {
@@ -64,6 +68,7 @@ export const {
   accordionStateChanged,
   expanderStateChanged,
   shouldShowNotificationChanged,
+  positivePromptBoxHeightChanged,
 } = uiSlice.actions;
 
 export const selectUiSlice = (state: RootState) => state.ui;
@@ -100,3 +105,5 @@ const TABS_WITH_RIGHT_PANEL: TabName[] = ['canvas', 'upscaling', 'workflows'] as
 export const RIGHT_PANEL_MIN_SIZE_PX = 390;
 export const $isRightPanelOpen = atom(true);
 export const selectWithRightPanel = createSelector(selectUiSlice, (ui) => TABS_WITH_RIGHT_PANEL.includes(ui.activeTab));
+
+export const selectPositivePromptBoxHeight = createSelector(selectUiSlice, (ui) => ui.positivePromptBoxHeight);

invokeai/frontend/web/src/features/ui/store/uiTypes.ts

@@ -34,4 +34,8 @@ export interface UIState {
    * Whether or not to show the user the open notification. Bump version to reset users who may have closed previous version.
    */
   shouldShowNotificationV2: boolean;
+  /**
+   * The height of the positive prompt box.
+   */
+  positivePromptBoxHeight: number;
 }