diff --git a/src/components/features/DialogAiStylize/DialogAiStylize.tsx b/src/components/features/DialogAiStylize/DialogAiStylize.tsx index 7bc2013973..a783eecd03 100644 --- a/src/components/features/DialogAiStylize/DialogAiStylize.tsx +++ b/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({ + ...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) => { - setState((curr) => ({ ...curr, ...newOptions })); - }, - [], - ); + const setStylizeOptions = useCallback((newOptions: Partial) => { + 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]); diff --git a/src/components/features/DialogAiStylize/SubPanelBasic/Prompts.tsx b/src/components/features/DialogAiStylize/SubPanelBasic/Prompts.tsx index 1dd605ce74..73f6a36f17 100644 --- a/src/components/features/DialogAiStylize/SubPanelBasic/Prompts.tsx +++ b/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, ) => { - onChangePositivePrompt(event.target.value); + onChangePositivePrompt(event.target.value, true); }; const onChangeNegativePromptHandler = ( event: ChangeEvent, ) => { - 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 ( diff --git a/src/components/features/DialogAiStylize/SubPanelBasic/SubPanelBaisc.tsx b/src/components/features/DialogAiStylize/SubPanelBasic/SubPanelBaisc.tsx index dd4ab67cb3..2af3793ac2 100644 --- a/src/components/features/DialogAiStylize/SubPanelBasic/SubPanelBaisc.tsx +++ b/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 ( diff --git a/src/components/ui/TextArea.tsx b/src/components/ui/TextArea.tsx index a66eb28f0c..753efdabd2 100644 --- a/src/components/ui/TextArea.tsx +++ b/src/components/ui/TextArea.tsx @@ -16,7 +16,7 @@ export interface TextareaInterface label?: string; resize?: ResizeType; } -export const Textarea = forwardRef( +export const Textarea = forwardRef( ( { className, label, resize = "vertical", id, ...rest }: TextareaInterface, ref,