diff --git a/invokeai/frontend/web/src/features/sdxl/components/ParamSDXLNegativeStyleConditioning.tsx b/invokeai/frontend/web/src/features/sdxl/components/ParamSDXLNegativeStyleConditioning.tsx index e2d5c5b8e4d..e1533bc886c 100644 --- a/invokeai/frontend/web/src/features/sdxl/components/ParamSDXLNegativeStyleConditioning.tsx +++ b/invokeai/frontend/web/src/features/sdxl/components/ParamSDXLNegativeStyleConditioning.tsx @@ -13,15 +13,20 @@ import { useIsReadyToInvoke } from 'common/hooks/useIsReadyToInvoke'; import AddEmbeddingButton from 'features/embedding/components/AddEmbeddingButton'; import ParamEmbeddingPopover from 'features/embedding/components/ParamEmbeddingPopover'; import { useFeatureStatus } from 'features/system/hooks/useFeatureStatus'; +import { AnimatePresence } from 'framer-motion'; import { isEqual } from 'lodash-es'; import { flushSync } from 'react-dom'; import { setNegativeStylePromptSDXL } from '../store/sdxlSlice'; +import SDXLConcatLink from './SDXLConcatLink'; const promptInputSelector = createSelector( [stateSelector, activeTabNameSelector], ({ sdxl }, activeTabName) => { + const { negativeStylePrompt, shouldConcatSDXLStylePrompt } = sdxl; + return { - prompt: sdxl.negativeStylePrompt, + prompt: negativeStylePrompt, + shouldConcatSDXLStylePrompt, activeTabName, }; }, @@ -37,11 +42,13 @@ const promptInputSelector = createSelector( */ const ParamSDXLNegativeStyleConditioning = () => { const dispatch = useAppDispatch(); - const { prompt, activeTabName } = useAppSelector(promptInputSelector); const isReady = useIsReadyToInvoke(); const promptRef = useRef(null); const { isOpen, onClose, onOpen } = useDisclosure(); + const { prompt, activeTabName, shouldConcatSDXLStylePrompt } = + useAppSelector(promptInputSelector); + const handleChangePrompt = useCallback( (e: ChangeEvent) => { dispatch(setNegativeStylePromptSDXL(e.target.value)); @@ -111,6 +118,20 @@ const ParamSDXLNegativeStyleConditioning = () => { return ( + + {shouldConcatSDXLStylePrompt && ( + + + + )} + { + const { positiveStylePrompt, shouldConcatSDXLStylePrompt } = sdxl; + return { - prompt: sdxl.positiveStylePrompt, + prompt: positiveStylePrompt, + shouldConcatSDXLStylePrompt, activeTabName, }; }, @@ -37,11 +42,13 @@ const promptInputSelector = createSelector( */ const ParamSDXLPositiveStyleConditioning = () => { const dispatch = useAppDispatch(); - const { prompt, activeTabName } = useAppSelector(promptInputSelector); const isReady = useIsReadyToInvoke(); const promptRef = useRef(null); const { isOpen, onClose, onOpen } = useDisclosure(); + const { prompt, activeTabName, shouldConcatSDXLStylePrompt } = + useAppSelector(promptInputSelector); + const handleChangePrompt = useCallback( (e: ChangeEvent) => { dispatch(setPositiveStylePromptSDXL(e.target.value)); @@ -111,6 +118,20 @@ const ParamSDXLPositiveStyleConditioning = () => { return ( + + {shouldConcatSDXLStylePrompt && ( + + + + )} + state.ui.shouldPinParametersPanel - ); - - const shouldConcatSDXLStylePrompt = useAppSelector( - (state: RootState) => state.sdxl.shouldConcatSDXLStylePrompt - ); - return ( - - {shouldConcatSDXLStylePrompt && ( - - - - )} - - - {shouldConcatSDXLStylePrompt && ( - - - - )} - diff --git a/invokeai/frontend/web/src/features/sdxl/components/SDXLConcatLink.tsx b/invokeai/frontend/web/src/features/sdxl/components/SDXLConcatLink.tsx index d64daae70d5..e9825980816 100644 --- a/invokeai/frontend/web/src/features/sdxl/components/SDXLConcatLink.tsx +++ b/invokeai/frontend/web/src/features/sdxl/components/SDXLConcatLink.tsx @@ -18,14 +18,7 @@ const sharedConcatLinkStyle: CSSObject = { export default function SDXLConcatLink() { return ( - +