From 096f001634a2b3a1dbcafde9eff14823fc4293da Mon Sep 17 00:00:00 2001
From: Mary Hipp <maryhipp@Marys-MacBook-Air.local>
Date: Mon, 12 Aug 2024 12:32:31 -0400
Subject: [PATCH] ui: add ability to copy template

---
 invokeai/frontend/web/public/locales/en.json  |  1 +
 .../components/Core/ParamNegativePrompt.tsx   |  6 +-
 .../components/Core/ParamPositivePrompt.tsx   |  6 +-
 .../components/Prompts/ViewModePrompt.tsx     |  2 +-
 .../components/StylePresetForm.tsx            |  7 +-
 .../components/StylePresetListItem.tsx        | 70 +++++++++++++------
 6 files changed, 64 insertions(+), 28 deletions(-)

diff --git a/invokeai/frontend/web/public/locales/en.json b/invokeai/frontend/web/public/locales/en.json
index 605c1260a4..beb895d045 100644
--- a/invokeai/frontend/web/public/locales/en.json
+++ b/invokeai/frontend/web/public/locales/en.json
@@ -1693,6 +1693,7 @@
         "active": "Active",
         "choosePromptTemplate": "Choose Prompt Template",
         "clearTemplateSelection": "Clear Template Selection",
+        "copyTemplate": "Copy Template",
         "createPromptTemplate": "Create Prompt Template",
         "defaultTemplates": "Default Templates",
         "deleteImage": "Delete Image",
diff --git a/invokeai/frontend/web/src/features/parameters/components/Core/ParamNegativePrompt.tsx b/invokeai/frontend/web/src/features/parameters/components/Core/ParamNegativePrompt.tsx
index 035dc417a7..e1197b1840 100644
--- a/invokeai/frontend/web/src/features/parameters/components/Core/ParamNegativePrompt.tsx
+++ b/invokeai/frontend/web/src/features/parameters/components/Core/ParamNegativePrompt.tsx
@@ -43,9 +43,6 @@ export const ParamNegativePrompt = memo(() => {
   return (
     <PromptPopover isOpen={isOpen} onClose={onClose} onSelect={onSelect} width={textareaRef.current?.clientWidth}>
       <Box pos="relative" w="full">
-        {viewMode && (
-          <ViewModePrompt prompt={prompt} presetPrompt={activeStylePreset?.preset_data.negative_prompt || ''} />
-        )}
         <Textarea
           id="negativePrompt"
           name="negativePrompt"
@@ -61,6 +58,9 @@ export const ParamNegativePrompt = memo(() => {
         <PromptOverlayButtonWrapper>
           <AddPromptTriggerButton isOpen={isOpen} onOpen={onOpen} />
         </PromptOverlayButtonWrapper>
+        {viewMode && (
+          <ViewModePrompt prompt={prompt} presetPrompt={activeStylePreset?.preset_data.negative_prompt || ''} />
+        )}
       </Box>
     </PromptPopover>
   );
diff --git a/invokeai/frontend/web/src/features/parameters/components/Core/ParamPositivePrompt.tsx b/invokeai/frontend/web/src/features/parameters/components/Core/ParamPositivePrompt.tsx
index 3d9d12e549..fc8a2a54ce 100644
--- a/invokeai/frontend/web/src/features/parameters/components/Core/ParamPositivePrompt.tsx
+++ b/invokeai/frontend/web/src/features/parameters/components/Core/ParamPositivePrompt.tsx
@@ -58,9 +58,6 @@ export const ParamPositivePrompt = memo(() => {
   return (
     <PromptPopover isOpen={isOpen} onClose={onClose} onSelect={onSelect} width={textareaRef.current?.clientWidth}>
       <Box pos="relative">
-        {viewMode && (
-          <ViewModePrompt prompt={prompt} presetPrompt={activeStylePreset?.preset_data.positive_prompt || ''} />
-        )}
         <Textarea
           id="prompt"
           name="prompt"
@@ -78,6 +75,9 @@ export const ParamPositivePrompt = memo(() => {
           {baseModel === 'sdxl' && <SDXLConcatButton />}
           <ShowDynamicPromptsPreviewButton />
         </PromptOverlayButtonWrapper>
+        {viewMode && (
+          <ViewModePrompt prompt={prompt} presetPrompt={activeStylePreset?.preset_data.positive_prompt || ''} />
+        )}
       </Box>
     </PromptPopover>
   );
diff --git a/invokeai/frontend/web/src/features/parameters/components/Prompts/ViewModePrompt.tsx b/invokeai/frontend/web/src/features/parameters/components/Prompts/ViewModePrompt.tsx
index 1ef73c6b22..528f98ae75 100644
--- a/invokeai/frontend/web/src/features/parameters/components/Prompts/ViewModePrompt.tsx
+++ b/invokeai/frontend/web/src/features/parameters/components/Prompts/ViewModePrompt.tsx
@@ -19,7 +19,7 @@ export const ViewModePrompt = ({ presetPrompt, prompt }: { presetPrompt: string;
   }, [dispatch]);
 
   return (
-    <Box position="absolute" top={0} bottom={0} left={0} right={0} zIndex={1} layerStyle="second" borderRadius="base">
+    <Box position="absolute" top={0} bottom={0} left={0} right={0} layerStyle="second" borderRadius="base">
       <Flex flexDir="column" onClick={handleExitViewMode} justifyContent="space-between" h="full" padding="8px 10px">
         <Flex overflow="scroll">
           <Text fontSize="sm" lineHeight="1rem" w="full">
diff --git a/invokeai/frontend/web/src/features/stylePresets/components/StylePresetForm.tsx b/invokeai/frontend/web/src/features/stylePresets/components/StylePresetForm.tsx
index a66dff08da..74248ff77a 100644
--- a/invokeai/frontend/web/src/features/stylePresets/components/StylePresetForm.tsx
+++ b/invokeai/frontend/web/src/features/stylePresets/components/StylePresetForm.tsx
@@ -1,6 +1,10 @@
 import { Button, Flex, FormControl, FormLabel, Input, Text } from '@invoke-ai/ui-library';
 import { useAppDispatch } from 'app/store/storeHooks';
-import { isModalOpenChanged, updatingStylePresetIdChanged } from 'features/stylePresets/store/stylePresetModalSlice';
+import {
+  isModalOpenChanged,
+  prefilledFormDataChanged,
+  updatingStylePresetIdChanged,
+} from 'features/stylePresets/store/stylePresetModalSlice';
 import { toast } from 'features/toast/toast';
 import { useCallback } from 'react';
 import type { SubmitHandler } from 'react-hook-form';
@@ -65,6 +69,7 @@ export const StylePresetForm = ({
         });
       }
 
+      dispatch(prefilledFormDataChanged(null));
       dispatch(updatingStylePresetIdChanged(null));
       dispatch(isModalOpenChanged(false));
     },
diff --git a/invokeai/frontend/web/src/features/stylePresets/components/StylePresetListItem.tsx b/invokeai/frontend/web/src/features/stylePresets/components/StylePresetListItem.tsx
index 3506e8430d..fe41372f73 100644
--- a/invokeai/frontend/web/src/features/stylePresets/components/StylePresetListItem.tsx
+++ b/invokeai/frontend/web/src/features/stylePresets/components/StylePresetListItem.tsx
@@ -11,7 +11,7 @@ import { toast } from 'features/toast/toast';
 import type { MouseEvent } from 'react';
 import { useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
-import { PiPencilBold, PiTrashBold } from 'react-icons/pi';
+import { PiCopyBold, PiPencilBold, PiTrashBold } from 'react-icons/pi';
 import type { StylePresetRecordWithImage } from 'services/api/endpoints/stylePresets';
 import { useDeleteStylePresetMutation } from 'services/api/endpoints/stylePresets';
 
@@ -58,6 +58,27 @@ export const StylePresetListItem = ({ preset }: { preset: StylePresetRecordWithI
     [onOpen]
   );
 
+  const handleClickCopy = useCallback(
+    (e: MouseEvent<HTMLButtonElement>) => {
+      e.stopPropagation();
+      const { name, preset_data } = preset;
+      const { positive_prompt, negative_prompt } = preset_data;
+
+      dispatch(
+        prefilledFormDataChanged({
+          name: `${name} (${t('common.copy')})`,
+          positivePrompt: positive_prompt || '',
+          negativePrompt: negative_prompt || '',
+          imageUrl: preset.image,
+        })
+      );
+
+      dispatch(updatingStylePresetIdChanged(null));
+      dispatch(isModalOpenChanged(true));
+    },
+    [dispatch, preset, t]
+  );
+
   const handleDeletePreset = useCallback(async () => {
     try {
       await deleteStylePreset(preset.id);
@@ -106,25 +127,34 @@ export const StylePresetListItem = ({ preset }: { preset: StylePresetRecordWithI
               )}
             </Flex>
 
-            {preset.type !== 'default' && (
-              <Flex alignItems="center" gap={1}>
-                <IconButton
-                  size="sm"
-                  variant="ghost"
-                  aria-label={t('stylePresets.editTemplate')}
-                  onClick={handleClickEdit}
-                  icon={<PiPencilBold />}
-                />
-                <IconButton
-                  size="sm"
-                  variant="ghost"
-                  aria-label={t('stylePresets.deleteTemplate')}
-                  onClick={handleClickDelete}
-                  colorScheme="error"
-                  icon={<PiTrashBold />}
-                />
-              </Flex>
-            )}
+            <Flex alignItems="center" gap={1}>
+              <IconButton
+                size="sm"
+                variant="ghost"
+                aria-label={t('stylePresets.copyTemplate')}
+                onClick={handleClickCopy}
+                icon={<PiCopyBold />}
+              />
+              {preset.type !== 'default' && (
+                <>
+                  <IconButton
+                    size="sm"
+                    variant="ghost"
+                    aria-label={t('stylePresets.editTemplate')}
+                    onClick={handleClickEdit}
+                    icon={<PiPencilBold />}
+                  />
+                  <IconButton
+                    size="sm"
+                    variant="ghost"
+                    aria-label={t('stylePresets.deleteTemplate')}
+                    onClick={handleClickDelete}
+                    colorScheme="error"
+                    icon={<PiTrashBold />}
+                  />
+                </>
+              )}
+            </Flex>
           </Flex>
 
           <Flex flexDir="column" gap={1}>