From 63f94579c501d806e3a5aa4fcbb713ef705e9c07 Mon Sep 17 00:00:00 2001
From: Mary Hipp <maryhipp@Marys-MacBook-Air.local>
Date: Tue, 12 Sep 2023 16:10:43 -0400
Subject: [PATCH] add informational popover base component and sample

---
 .../components/IAIInformationalPopover.tsx    | 98 +++++++++++++++++++
 .../components/paramPositiveConditioning.tsx  | 16 +++
 .../Core/ParamPositiveConditioning.tsx        | 36 ++++---
 .../web/src/theme/components/button.ts        |  7 ++
 .../web/src/theme/components/popover.ts       | 21 ++++
 5 files changed, 166 insertions(+), 12 deletions(-)
 create mode 100644 invokeai/frontend/web/src/common/components/IAIInformationalPopover.tsx
 create mode 100644 invokeai/frontend/web/src/features/informationalPopovers/components/paramPositiveConditioning.tsx

diff --git a/invokeai/frontend/web/src/common/components/IAIInformationalPopover.tsx b/invokeai/frontend/web/src/common/components/IAIInformationalPopover.tsx
new file mode 100644
index 0000000000..7e58e7e532
--- /dev/null
+++ b/invokeai/frontend/web/src/common/components/IAIInformationalPopover.tsx
@@ -0,0 +1,98 @@
+import {
+  Button,
+  Popover,
+  PopoverTrigger,
+  PopoverContent,
+  PopoverArrow,
+  PopoverCloseButton,
+  PopoverHeader,
+  PopoverBody,
+  PopoverProps,
+  Flex,
+  Text,
+  Image,
+} from '@chakra-ui/react';
+import { ReactNode } from 'react';
+
+interface Props extends PopoverProps {
+  heading: string;
+  paragraph: string;
+  triggerComponent: ReactNode;
+  image?: string;
+  buttonLabel?: string;
+  buttonHref?: string;
+}
+
+function IAIInformationalPopover({
+  heading,
+  paragraph,
+  image,
+  buttonLabel,
+  buttonHref,
+  triggerComponent,
+}: Props) {
+  return (
+    <Popover
+      placement="top"
+      closeOnBlur={false}
+      trigger="hover"
+      variant="informational"
+    >
+      <PopoverTrigger>
+        <div>{triggerComponent}</div>
+      </PopoverTrigger>
+      <PopoverContent>
+        <PopoverArrow />
+        <PopoverCloseButton />
+
+        <PopoverBody>
+          <Flex
+            sx={{
+              gap: 3,
+              flexDirection: 'column',
+              width: '100%',
+            }}
+          >
+            {image && (
+              <Image
+                sx={{
+                  objectFit: 'contain',
+                  maxW: '100%',
+                  maxH: 'full',
+                  backgroundColor: 'white',
+                }}
+                src={image}
+                alt="Optional Image"
+              />
+            )}
+            <Flex
+              sx={{
+                gap: 3,
+                flexDirection: 'column',
+
+                p: 3,
+                pt: 0,
+              }}
+            >
+              <PopoverHeader>{heading}</PopoverHeader>
+              <Text sx={{ pl: 3, pr: 3 }}>{paragraph}</Text>
+              {buttonLabel && (
+                <Flex sx={{ pl: 3, pr: 3 }} justifyContent="flex-end">
+                  <Button
+                    onClick={() => window.open(buttonHref)}
+                    size="sm"
+                    variant="invokeAIOutline"
+                  >
+                    {buttonLabel}
+                  </Button>
+                </Flex>
+              )}
+            </Flex>
+          </Flex>
+        </PopoverBody>
+      </PopoverContent>
+    </Popover>
+  );
+}
+
+export default IAIInformationalPopover;
diff --git a/invokeai/frontend/web/src/features/informationalPopovers/components/paramPositiveConditioning.tsx b/invokeai/frontend/web/src/features/informationalPopovers/components/paramPositiveConditioning.tsx
new file mode 100644
index 0000000000..66c047fa26
--- /dev/null
+++ b/invokeai/frontend/web/src/features/informationalPopovers/components/paramPositiveConditioning.tsx
@@ -0,0 +1,16 @@
+import { PropsWithChildren } from 'react';
+import IAIInformationalPopover from '../../../common/components/IAIInformationalPopover';
+import InvokeAILogoImage from 'assets/images/logo.png';
+
+export const ParamPositiveConditioningPopover = (props: PropsWithChildren) => {
+  return (
+    <IAIInformationalPopover
+      heading="Prompt Box"
+      paragraph="This is where you enter your prompt"
+      buttonLabel="Learn more"
+      buttonHref="http://google.com"
+      image={InvokeAILogoImage}
+      triggerComponent={props.children}
+    />
+  );
+};
diff --git a/invokeai/frontend/web/src/features/parameters/components/Parameters/Core/ParamPositiveConditioning.tsx b/invokeai/frontend/web/src/features/parameters/components/Parameters/Core/ParamPositiveConditioning.tsx
index ca45da121f..a36fe687e5 100644
--- a/invokeai/frontend/web/src/features/parameters/components/Parameters/Core/ParamPositiveConditioning.tsx
+++ b/invokeai/frontend/web/src/features/parameters/components/Parameters/Core/ParamPositiveConditioning.tsx
@@ -1,4 +1,11 @@
-import { Box, FormControl, useDisclosure } from '@chakra-ui/react';
+import {
+  Box,
+  FormControl,
+  Text,
+  Tooltip,
+  useDisclosure,
+  Heading,
+} from '@chakra-ui/react';
 import { stateSelector } from 'app/store/store';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { ChangeEvent, KeyboardEvent, memo, useCallback, useRef } from 'react';
@@ -20,6 +27,9 @@ import { flushSync } from 'react-dom';
 import { useHotkeys } from 'react-hotkeys-hook';
 import { useTranslation } from 'react-i18next';
 import { useFeatureStatus } from '../../../../system/hooks/useFeatureStatus';
+import IAIInformationalPopover from '../../../../../common/components/IAIInformationalPopover';
+import InvokeAILogoImage from 'assets/images/logo.png';
+import { ParamPositiveConditioningPopover } from '../../../../informationalPopovers/components/paramPositiveConditioning';
 
 const promptInputSelector = createSelector(
   [stateSelector, activeTabNameSelector],
@@ -129,17 +139,19 @@ const ParamPositiveConditioning = () => {
           onClose={onClose}
           onSelect={handleSelectEmbedding}
         >
-          <IAITextarea
-            id="prompt"
-            name="prompt"
-            ref={promptRef}
-            value={prompt}
-            placeholder={t('parameters.positivePromptPlaceholder')}
-            onChange={handleChangePrompt}
-            onKeyDown={handleKeyDown}
-            resize="vertical"
-            minH={32}
-          />
+          <ParamPositiveConditioningPopover>
+            <IAITextarea
+              id="prompt"
+              name="prompt"
+              ref={promptRef}
+              value={prompt}
+              placeholder={t('parameters.positivePromptPlaceholder')}
+              onChange={handleChangePrompt}
+              onKeyDown={handleKeyDown}
+              resize="vertical"
+              minH={32}
+            />
+          </ParamPositiveConditioningPopover>
         </ParamEmbeddingPopover>
       </FormControl>
       {!isOpen && isEmbeddingEnabled && (
diff --git a/invokeai/frontend/web/src/theme/components/button.ts b/invokeai/frontend/web/src/theme/components/button.ts
index 056f3c145d..9d9b1cd5b0 100644
--- a/invokeai/frontend/web/src/theme/components/button.ts
+++ b/invokeai/frontend/web/src/theme/components/button.ts
@@ -92,6 +92,13 @@ const invokeAIOutline = defineStyle((props) => {
   return {
     border: '1px solid',
     borderColor: c === 'gray' ? borderColor : 'currentColor',
+    _hover: {
+      bg: mode(`${c}.500`, `${c}.500`)(props),
+      color: mode('white', `base.50`)(props),
+      svg: {
+        fill: mode('white', `base.50`)(props),
+      },
+    },
     '.chakra-button__group[data-attached][data-orientation=horizontal] > &:not(:last-of-type)':
       {
         marginEnd: '-1px',
diff --git a/invokeai/frontend/web/src/theme/components/popover.ts b/invokeai/frontend/web/src/theme/components/popover.ts
index a28e2bfbc4..55f69e9036 100644
--- a/invokeai/frontend/web/src/theme/components/popover.ts
+++ b/invokeai/frontend/web/src/theme/components/popover.ts
@@ -29,13 +29,34 @@ const invokeAIContent = defineStyle((props) => {
   };
 });
 
+const informationalContent = defineStyle((props) => {
+  return {
+    [$arrowBg.variable]: mode('colors.base.100', 'colors.base.600')(props),
+    [$popperBg.variable]: mode('colors.base.100', 'colors.base.600')(props),
+    [$arrowShadowColor.variable]: mode(
+      'colors.base.400',
+      'colors.base.400'
+    )(props),
+    p: 0,
+    bg: mode('base.100', 'base.600')(props),
+    border: 'none',
+    shadow: 'dark-lg',
+  };
+});
+
 const invokeAI = definePartsStyle((props) => ({
   content: invokeAIContent(props),
 }));
 
+const informational = definePartsStyle((props) => ({
+  content: informationalContent(props),
+  body: { padding: 0 },
+}));
+
 export const popoverTheme = defineMultiStyleConfig({
   variants: {
     invokeAI,
+    informational,
   },
   defaultProps: {
     variant: 'invokeAI',