add states to retain userinput for pos and neg prompts, fixed textarea typing issue

src/components/features/DialogAiStylize/DialogAiStylize.tsx

@@ -17,12 +17,22 @@ import {
   generateRandomTextPositive,
   generateRandomTextNegative,
   AIStylizeProps,
-  initialValues,
+  initialValues as initialAIStylizeProps,
 } from "./utilities";
 
 import { SubPanelBasic } from "./SubPanelBasic";
 import { SubPanelAdvance } from "./SubPanelAdvance";
 
+type DialogStates = AIStylizeProps & {
+  panelState: SubPanelNames;
+  isPosPromptUserInput: boolean;
+  isNegPromptUserInput: boolean;
+};
+const initialDialogStates = {
+  panelState: SubPanelNames.BASIC,
+  isPosPromptUserInput: false,
+  isNegPromptUserInput: false,
+};
 export const DialogAiStylize = ({
   isOpen,
   closeCallback,
@@ -32,11 +42,9 @@ export const DialogAiStylize = ({
   closeCallback: () => void;
   onRequestAIStylize: (data: AIStylizeProps) => void;
 }) => {
-  const [state, setState] = useState<
-    AIStylizeProps & { panelState: SubPanelNames }
-  >({
-    ...initialValues,
-    panelState: SubPanelNames.BASIC,
+  const [state, setState] = useState<DialogStates>({
+    ...initialAIStylizeProps,
+    ...initialDialogStates,
   });
   const { panelState, ...aiStylizeProps } = state;
   const { selectedArtStyle, positivePrompt, negativePrompt } = aiStylizeProps;
@@ -48,29 +56,52 @@ export const DialogAiStylize = ({
   const onChangePanel = useCallback((newP: SubPanelNames) => {
     setState((curr) => ({ ...curr, panelState: newP }));
   }, []);
-  const setStylizeOptions = useCallback(
-    (newOptions: Partial<AIStylizeProps>) => {
-      setState((curr) => ({ ...curr, ...newOptions }));
-    },
-    [],
-  );
+  const setStylizeOptions = useCallback((newOptions: Partial<DialogStates>) => {
+    setState((curr) => {
+      if (newOptions.selectedArtStyle) {
+        const promptOptions = {
+          positivePrompt: curr.isPosPromptUserInput
+            ? curr.positivePrompt
+            : generateRandomTextPositive(newOptions.selectedArtStyle),
+          negativePrompt: curr.isNegPromptUserInput
+            ? curr.negativePrompt
+            : generateRandomTextNegative(newOptions.selectedArtStyle),
+        };
+        return { ...curr, ...newOptions, ...promptOptions };
+      }
+      return { ...curr, ...newOptions };
+    });
+  }, []);
   const onSelectedArtStyle = useCallback((newArtstyle: ArtStyleNames) => {
     setStylizeOptions({
       selectedArtStyle: newArtstyle,
-      positivePrompt: generateRandomTextPositive(newArtstyle),
-      negativePrompt: generateRandomTextNegative(newArtstyle),
     });
   }, []);
-  const onChangeNegativePrompt = useCallback((newPrompt: string) => {
-    setStylizeOptions({ negativePrompt: newPrompt });
-  }, []);
-  const onChangePositivePrompt = useCallback((newPrompt: string) => {
-    setStylizeOptions({ positivePrompt: newPrompt });
-  }, []);
+  const onChangeNegativePrompt = useCallback(
+    (newPrompt: string, isUserInput?: boolean) => {
+      setStylizeOptions({
+        negativePrompt: newPrompt,
+        isNegPromptUserInput: isUserInput,
+      });
+    },
+    [],
+  );
+  const onChangePositivePrompt = useCallback(
+    (newPrompt: string, isUserInput?: boolean) => {
+      setStylizeOptions({
+        positivePrompt: newPrompt,
+        isPosPromptUserInput: isUserInput,
+      });
+    },
+    [],
+  );
 
   useEffect(() => {
     if (!isOpen) {
-      setState({ ...initialValues, panelState: SubPanelNames.BASIC });
+      setState({
+        ...initialAIStylizeProps,
+        ...initialDialogStates,
+      });
     }
   }, [isOpen]);
 

src/components/features/DialogAiStylize/SubPanelBasic/Prompts.tsx

@@ -19,24 +19,24 @@ export const Prompts = ({
   selectedArtStyle: ArtStyleNames;
   positivePrompt: string;
   negativePrompt: string;
-  onChangePositivePrompt: (newPrompt: string) => void;
-  onChangeNegativePrompt: (newPrompt: string) => void;
+  onChangePositivePrompt: (newPrompt: string, isUserInput?: boolean) => void;
+  onChangeNegativePrompt: (newPrompt: string, isUserInput?: boolean) => void;
 }) => {
   const onChangePositivePromptHandler = (
     event: ChangeEvent<HTMLTextAreaElement>,
   ) => {
-    onChangePositivePrompt(event.target.value);
+    onChangePositivePrompt(event.target.value, true);
   };
   const onChangeNegativePromptHandler = (
     event: ChangeEvent<HTMLTextAreaElement>,
   ) => {
-    onChangeNegativePrompt(event.target.value);
+    onChangeNegativePrompt(event.target.value, true);
   };
   const generateRandomTextPositiveHandler = useCallback(() => {
-    onChangePositivePrompt(generateRandomTextPositive(selectedArtStyle));
+    onChangePositivePrompt(generateRandomTextPositive(selectedArtStyle), false);
   }, [selectedArtStyle]);
   const generateRandomTextNegativeHandler = useCallback(() => {
-    onChangeNegativePrompt(generateRandomTextNegative(selectedArtStyle));
+    onChangeNegativePrompt(generateRandomTextNegative(selectedArtStyle), false);
   }, [selectedArtStyle]);
 
   return (

src/components/features/DialogAiStylize/SubPanelBasic/SubPanelBaisc.tsx

@@ -1,9 +1,9 @@
-import { faChevronRight } from "@fortawesome/pro-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+// import { faChevronRight } from "@fortawesome/pro-solid-svg-icons";
+// import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { ArtStyleSelector } from "./ArtStyleSelector";
 import { Prompts } from "./Prompts";
 
-import { Button } from "~/components/ui";
+// import { Button } from "~/components/ui";
 import { ArtStyleNames, SubPanelNames } from "../enums";
 
 export const SubPanelBasic = ({
@@ -13,14 +13,14 @@ export const SubPanelBasic = ({
   onSelectedArtStyle,
   onChangePositivePrompt,
   onChangeNegativePrompt,
-  onChangePanel,
+  // onChangePanel,
 }: {
   selectedArtStyle: ArtStyleNames;
   positivePrompt: string;
   negativePrompt: string;
   onSelectedArtStyle: (artStyle: ArtStyleNames) => void;
-  onChangePositivePrompt: (newPrompt: string) => void;
-  onChangeNegativePrompt: (newPrompt: string) => void;
+  onChangePositivePrompt: (newPrompt: string, isUserInput?: boolean) => void;
+  onChangeNegativePrompt: (newPrompt: string, isUserInput?: boolean) => void;
   onChangePanel: (newP: SubPanelNames) => void;
 }) => {
   return (

src/components/ui/TextArea.tsx

@@ -16,7 +16,7 @@ export interface TextareaInterface
   label?: string;
   resize?: ResizeType;
 }
-export const Textarea = forwardRef<HTMLTextAreaElement>(
+export const Textarea = forwardRef<HTMLTextAreaElement, TextareaInterface>(
   (
     { className, label, resize = "vertical", id, ...rest }: TextareaInterface,
     ref,