feat: Unify Promp Area Styling

invokeai/frontend/web/src/features/parameters/components/Parameters/Core/ParamPositiveConditioning.tsx

@@ -148,7 +148,7 @@ const ParamPositiveConditioning = () => {
         <Box
           sx={{
             position: 'absolute',
-            top: shouldPinParametersPanel ? 6 : 0,
+            top: shouldPinParametersPanel ? 5 : 0,
             insetInlineEnd: 0,
           }}
         >

invokeai/frontend/web/src/features/parameters/components/Parameters/Prompt/ParamPromptArea.tsx

@@ -0,0 +1,17 @@
+import { Flex } from '@chakra-ui/react';
+import ParamNegativeConditioning from 'features/parameters/components/Parameters/Core/ParamNegativeConditioning';
+import ParamPositiveConditioning from 'features/parameters/components/Parameters/Core/ParamPositiveConditioning';
+
+export default function ParamPromptArea() {
+  return (
+    <Flex
+      sx={{
+        flexDirection: 'column',
+        gap: 2,
+      }}
+    >
+      <ParamPositiveConditioning />
+      <ParamNegativeConditioning />
+    </Flex>
+  );
+}

invokeai/frontend/web/src/features/sdxl/components/ParamSDXLConcatButton.tsx

@@ -0,0 +1,43 @@
+import { RootState } from 'app/store/store';
+import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
+import IAIIconButton from 'common/components/IAIIconButton';
+import { FaLink } from 'react-icons/fa';
+import { setShouldConcatSDXLStylePrompt } from '../store/sdxlSlice';
+
+export default function ParamSDXLConcatButton() {
+  const shouldConcatSDXLStylePrompt = useAppSelector(
+    (state: RootState) => state.sdxl.shouldConcatSDXLStylePrompt
+  );
+
+  const shouldPinParametersPanel = useAppSelector(
+    (state: RootState) => state.ui.shouldPinParametersPanel
+  );
+
+  const dispatch = useAppDispatch();
+
+  const handleShouldConcatPromptChange = () => {
+    dispatch(setShouldConcatSDXLStylePrompt(!shouldConcatSDXLStylePrompt));
+  };
+
+  return (
+    <IAIIconButton
+      aria-label="Concat"
+      tooltip="Concatenates Basic Prompt with Style (Recommended)"
+      variant="outline"
+      isChecked={shouldConcatSDXLStylePrompt}
+      onClick={handleShouldConcatPromptChange}
+      icon={<FaLink />}
+      size="xs"
+      sx={{
+        position: 'absolute',
+        insetInlineEnd: 1,
+        top: shouldPinParametersPanel ? 12 : 20,
+        border: 'none',
+        color: shouldConcatSDXLStylePrompt ? 'accent.500' : 'base.500',
+        _hover: {
+          bg: 'none',
+        },
+      }}
+    ></IAIIconButton>
+  );
+}

invokeai/frontend/web/src/features/sdxl/components/ParamSDXLPromptArea.tsx

@@ -0,0 +1,61 @@
+import { Box, Flex } from '@chakra-ui/react';
+import { RootState } from 'app/store/store';
+import { useAppSelector } from 'app/store/storeHooks';
+import ParamNegativeConditioning from 'features/parameters/components/Parameters/Core/ParamNegativeConditioning';
+import ParamPositiveConditioning from 'features/parameters/components/Parameters/Core/ParamPositiveConditioning';
+import { AnimatePresence } from 'framer-motion';
+import ParamSDXLConcatButton from './ParamSDXLConcatButton';
+import ParamSDXLNegativeStyleConditioning from './ParamSDXLNegativeStyleConditioning';
+import ParamSDXLPositiveStyleConditioning from './ParamSDXLPositiveStyleConditioning';
+import SDXLConcatLink from './SDXLConcatLink';
+
+export default function ParamSDXLPromptArea() {
+  const shouldPinParametersPanel = useAppSelector(
+    (state: RootState) => state.ui.shouldPinParametersPanel
+  );
+
+  const shouldConcatSDXLStylePrompt = useAppSelector(
+    (state: RootState) => state.sdxl.shouldConcatSDXLStylePrompt
+  );
+
+  return (
+    <Flex
+      sx={{
+        flexDirection: 'column',
+        gap: 2,
+      }}
+    >
+      <AnimatePresence>
+        {shouldConcatSDXLStylePrompt && (
+          <Box
+            sx={{
+              position: 'absolute',
+              w: 'full',
+              top: shouldPinParametersPanel ? '119px' : '175px',
+            }}
+          >
+            <SDXLConcatLink />
+          </Box>
+        )}
+      </AnimatePresence>
+      <AnimatePresence>
+        {shouldConcatSDXLStylePrompt && (
+          <Box
+            sx={{
+              position: 'absolute',
+              w: 'full',
+              top: shouldPinParametersPanel ? '263px' : '319px',
+            }}
+          >
+            <SDXLConcatLink />
+          </Box>
+        )}
+      </AnimatePresence>
+      <ParamPositiveConditioning />
+      <ParamSDXLConcatButton />
+      <ParamSDXLPositiveStyleConditioning />
+      <ParamNegativeConditioning />
+      <ParamSDXLNegativeStyleConditioning />
+    </Flex>
+  );
+}

invokeai/frontend/web/src/features/sdxl/components/SDXLConcatLink.tsx

@@ -0,0 +1,109 @@
+import { Box, Flex } from '@chakra-ui/react';
+import { CSSObject } from '@emotion/react';
+import { motion } from 'framer-motion';
+import { FaLink } from 'react-icons/fa';
+
+const sharedConcatLinkStyle: CSSObject = {
+  position: 'absolute',
+  bg: 'none',
+  w: 'full',
+  minH: 2,
+  borderRadius: 0,
+  borderLeft: 'none',
+  borderRight: 'none',
+  zIndex: 2,
+  maskImage:
+    'radial-gradient(circle at center, black, black 65%, black 30%, black 15%, transparent)',
+};
+
+export default function SDXLConcatLink() {
+  return (
+    <Flex
+      sx={{
+        h: 0.5,
+        placeContent: 'center',
+        gap: 2,
+        flexDirection: 'column',
+      }}
+    >
+      <Box
+        as={motion.div}
+        initial={{
+          scaleX: 0,
+          borderWidth: 0,
+          display: 'none',
+        }}
+        animate={{
+          display: ['block', 'block', 'block', 'none'],
+          scaleX: [0, 0.25, 0.5, 1],
+          borderWidth: [0, 3, 3, 0],
+          transition: { duration: 0.37, times: [0, 0.25, 0.5, 1] },
+        }}
+        sx={{
+          top: '1px',
+          borderTop: 'none',
+          borderColor: 'base.400',
+          zIndex: 2,
+          ...sharedConcatLinkStyle,
+          _dark: {
+            borderColor: 'accent.500',
+          },
+        }}
+      />
+      <Box
+        as={motion.div}
+        initial={{
+          opacity: 0,
+          scale: 0,
+        }}
+        animate={{
+          opacity: [0, 1, 1, 1],
+          scale: [0, 0.75, 1.5, 1],
+          transition: { duration: 0.42, times: [0, 0.25, 0.5, 1] },
+        }}
+        exit={{
+          opacity: 0,
+          scale: 0,
+        }}
+        sx={{
+          zIndex: 3,
+          position: 'absolute',
+          left: '48%',
+          top: '3px',
+          p: 1,
+          borderRadius: 4,
+          bg: 'accent.400',
+          color: 'base.50',
+          _dark: {
+            bg: 'accent.500',
+          },
+        }}
+      >
+        <FaLink size={12} />
+      </Box>
+      <Box
+        as={motion.div}
+        initial={{
+          scaleX: 0,
+          borderWidth: 0,
+          display: 'none',
+        }}
+        animate={{
+          display: ['block', 'block', 'block', 'none'],
+          scaleX: [0, 0.25, 0.5, 1],
+          borderWidth: [0, 3, 3, 0],
+          transition: { duration: 0.37, times: [0, 0.25, 0.5, 1] },
+        }}
+        sx={{
+          top: '17px',
+          borderBottom: 'none',
+          borderColor: 'base.400',
+          ...sharedConcatLinkStyle,
+          _dark: {
+            borderColor: 'accent.500',
+          },
+        }}
+      />
+    </Flex>
+  );
+}

invokeai/frontend/web/src/features/sdxl/components/SDXLImageToImageTabParameters.tsx

@@ -1,34 +1,14 @@
-import { Flex } from '@chakra-ui/react';
 import ParamDynamicPromptsCollapse from 'features/dynamicPrompts/components/ParamDynamicPromptsCollapse';
-import ParamNegativeConditioning from 'features/parameters/components/Parameters/Core/ParamNegativeConditioning';
-import ParamPositiveConditioning from 'features/parameters/components/Parameters/Core/ParamPositiveConditioning';
 import ParamNoiseCollapse from 'features/parameters/components/Parameters/Noise/ParamNoiseCollapse';
 import ProcessButtons from 'features/parameters/components/ProcessButtons/ProcessButtons';
-import ParamSDXLConcatPrompt from './ParamSDXLConcatPrompt';
-import ParamSDXLNegativeStyleConditioning from './ParamSDXLNegativeStyleConditioning';
-import ParamSDXLPositiveStyleConditioning from './ParamSDXLPositiveStyleConditioning';
+import ParamSDXLPromptArea from './ParamSDXLPromptArea';
 import ParamSDXLRefinerCollapse from './ParamSDXLRefinerCollapse';
 import SDXLImageToImageTabCoreParameters from './SDXLImageToImageTabCoreParameters';
 
 const SDXLImageToImageTabParameters = () => {
   return (
     <>
-      <Flex
-        sx={{
-          flexDirection: 'column',
-          gap: 2,
-          p: 2,
-          borderRadius: 4,
-          bg: 'base.100',
-          _dark: { bg: 'base.850' },
-        }}
-      >
-        <ParamPositiveConditioning />
-        <ParamSDXLPositiveStyleConditioning />
-        <ParamNegativeConditioning />
-        <ParamSDXLNegativeStyleConditioning />
-        <ParamSDXLConcatPrompt />
-      </Flex>
+      <ParamSDXLPromptArea />
       <ProcessButtons />
       <SDXLImageToImageTabCoreParameters />
       <ParamSDXLRefinerCollapse />

invokeai/frontend/web/src/features/sdxl/components/SDXLTextToImageTabParameters.tsx

@@ -1,34 +1,14 @@
-import { Flex } from '@chakra-ui/react';
 import ParamDynamicPromptsCollapse from 'features/dynamicPrompts/components/ParamDynamicPromptsCollapse';
-import ParamNegativeConditioning from 'features/parameters/components/Parameters/Core/ParamNegativeConditioning';
-import ParamPositiveConditioning from 'features/parameters/components/Parameters/Core/ParamPositiveConditioning';
 import ParamNoiseCollapse from 'features/parameters/components/Parameters/Noise/ParamNoiseCollapse';
 import ProcessButtons from 'features/parameters/components/ProcessButtons/ProcessButtons';
 import TextToImageTabCoreParameters from 'features/ui/components/tabs/TextToImage/TextToImageTabCoreParameters';
-import ParamSDXLConcatPrompt from './ParamSDXLConcatPrompt';
-import ParamSDXLNegativeStyleConditioning from './ParamSDXLNegativeStyleConditioning';
-import ParamSDXLPositiveStyleConditioning from './ParamSDXLPositiveStyleConditioning';
+import ParamSDXLPromptArea from './ParamSDXLPromptArea';
 import ParamSDXLRefinerCollapse from './ParamSDXLRefinerCollapse';
 
 const SDXLTextToImageTabParameters = () => {
   return (
     <>
-      <Flex
-        sx={{
-          flexDirection: 'column',
-          gap: 2,
-          p: 2,
-          borderRadius: 4,
-          bg: 'base.100',
-          _dark: { bg: 'base.850' },
-        }}
-      >
-        <ParamPositiveConditioning />
-        <ParamSDXLPositiveStyleConditioning />
-        <ParamNegativeConditioning />
-        <ParamSDXLNegativeStyleConditioning />
-        <ParamSDXLConcatPrompt />
-      </Flex>
+      <ParamSDXLPromptArea />
       <ProcessButtons />
       <TextToImageTabCoreParameters />
       <ParamSDXLRefinerCollapse />

invokeai/frontend/web/src/features/ui/components/tabs/ImageToImage/ImageToImageTabParameters.tsx

@@ -2,20 +2,18 @@ import ParamDynamicPromptsCollapse from 'features/dynamicPrompts/components/Para
 import ParamLoraCollapse from 'features/lora/components/ParamLoraCollapse';
 import ParamAdvancedCollapse from 'features/parameters/components/Parameters/Advanced/ParamAdvancedCollapse';
 import ParamControlNetCollapse from 'features/parameters/components/Parameters/ControlNet/ParamControlNetCollapse';
-import ParamNegativeConditioning from 'features/parameters/components/Parameters/Core/ParamNegativeConditioning';
-import ParamPositiveConditioning from 'features/parameters/components/Parameters/Core/ParamPositiveConditioning';
 import ParamNoiseCollapse from 'features/parameters/components/Parameters/Noise/ParamNoiseCollapse';
 import ParamSeamlessCollapse from 'features/parameters/components/Parameters/Seamless/ParamSeamlessCollapse';
 import ParamSymmetryCollapse from 'features/parameters/components/Parameters/Symmetry/ParamSymmetryCollapse';
 // import ParamVariationCollapse from 'features/parameters/components/Parameters/Variations/ParamVariationCollapse';
+import ParamPromptArea from 'features/parameters/components/Parameters/Prompt/ParamPromptArea';
 import ProcessButtons from 'features/parameters/components/ProcessButtons/ProcessButtons';
 import ImageToImageTabCoreParameters from './ImageToImageTabCoreParameters';
 
 const ImageToImageTabParameters = () => {
   return (
     <>
-      <ParamPositiveConditioning />
-      <ParamNegativeConditioning />
+      <ParamPromptArea />
       <ProcessButtons />
       <ImageToImageTabCoreParameters />
       <ParamControlNetCollapse />

invokeai/frontend/web/src/features/ui/components/tabs/TextToImage/TextToImageTabParameters.tsx

@@ -2,20 +2,18 @@ import ParamDynamicPromptsCollapse from 'features/dynamicPrompts/components/Para
 import ParamLoraCollapse from 'features/lora/components/ParamLoraCollapse';
 import ParamAdvancedCollapse from 'features/parameters/components/Parameters/Advanced/ParamAdvancedCollapse';
 import ParamControlNetCollapse from 'features/parameters/components/Parameters/ControlNet/ParamControlNetCollapse';
-import ParamNegativeConditioning from 'features/parameters/components/Parameters/Core/ParamNegativeConditioning';
-import ParamPositiveConditioning from 'features/parameters/components/Parameters/Core/ParamPositiveConditioning';
 import ParamNoiseCollapse from 'features/parameters/components/Parameters/Noise/ParamNoiseCollapse';
 import ParamSeamlessCollapse from 'features/parameters/components/Parameters/Seamless/ParamSeamlessCollapse';
 import ParamSymmetryCollapse from 'features/parameters/components/Parameters/Symmetry/ParamSymmetryCollapse';
 // import ParamVariationCollapse from 'features/parameters/components/Parameters/Variations/ParamVariationCollapse';
 import ProcessButtons from 'features/parameters/components/ProcessButtons/ProcessButtons';
+import ParamPromptArea from '../../../../parameters/components/Parameters/Prompt/ParamPromptArea';
 import TextToImageTabCoreParameters from './TextToImageTabCoreParameters';
 
 const TextToImageTabParameters = () => {
   return (
     <>
-      <ParamPositiveConditioning />
-      <ParamNegativeConditioning />
+      <ParamPromptArea />
       <ProcessButtons />
       <TextToImageTabCoreParameters />
       <ParamControlNetCollapse />