add various actions for commercial purposes

invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/batchEnqueued.ts

@@ -8,6 +8,7 @@ import { queueApi } from 'services/api/endpoints/queue';
 import { theme, TOAST_OPTIONS } from 'theme/theme';
 
 import { startAppListening } from '..';
+import { batchEnqueued } from '../../../actions';
 
 const { toast } = createStandaloneToast({
   theme: theme,
@@ -19,6 +20,7 @@ export const addBatchEnqueuedListener = () => {
   startAppListening({
     matcher: queueApi.endpoints.enqueueBatch.matchFulfilled,
     effect: async (action) => {
+      console.log({ action })
       const response = action.payload;
       const arg = action.meta.arg.originalArgs;
       logger('queue').debug(

invokeai/frontend/web/src/app/store/middleware/listenerMiddleware/listeners/imageUploaded.ts

@@ -17,6 +17,7 @@ import { boardsApi } from 'services/api/endpoints/boards';
 import { imagesApi } from 'services/api/endpoints/images';
 
 import { startAppListening } from '..';
+import { imageUploaded } from '../../../../../features/gallery/store/actions';
 
 export const addImageUploadedFulfilledListener = () => {
   startAppListening({
@@ -40,6 +41,8 @@ export const addImageUploadedFulfilledListener = () => {
         return;
       }
 
+      dispatch(imageUploaded({ postUploadAction: postUploadAction?.type }))
+
       const DEFAULT_UPLOADED_TOAST: UseToastOptions = {
         title: t('toast.imageUploaded'),
         status: 'success',

invokeai/frontend/web/src/common/components/InvExpander/InvExpander.tsx

@@ -5,6 +5,8 @@ import type { InvExpanderProps } from 'common/components/InvExpander/types';
 import { InvText } from 'common/components/InvText/wrapper';
 import { t } from 'i18next';
 import { BiCollapseVertical, BiExpandVertical } from 'react-icons/bi';
+import { useAppDispatch } from '../../../app/store/storeHooks';
+import { useCallback } from 'react';
 
 const buttonStyles: SystemStyleObject = {
   color: 'base.400',
@@ -23,9 +25,15 @@ export const InvExpander = ({
   children,
   label = t('common.advancedOptions'),
   defaultIsOpen = false,
+  onClick,
 }: InvExpanderProps) => {
   const { isOpen, onToggle } = useDisclosure({ defaultIsOpen });
 
+  const onToggleExpander = useCallback(() => {
+    onClick && onClick(isOpen);
+    onToggle();
+  }, [onClick, onToggle, isOpen]);
+
   return (
     <Flex flexDir="column" w="full">
       <Flex
@@ -35,7 +43,7 @@ export const InvExpander = ({
         gap={3}
         py={4}
         px={2}
-        onClick={onToggle}
+        onClick={onToggleExpander}
         sx={buttonStyles}
       >
         <Divider w="unset" flexGrow={1} sx={buttonStyles} />

invokeai/frontend/web/src/common/components/InvExpander/types.ts

@@ -1,6 +1,8 @@
+import { ThunkAction } from '@reduxjs/toolkit';
 import type { PropsWithChildren } from 'react';
 
 export type InvExpanderProps = PropsWithChildren<{
   label?: string;
   defaultIsOpen?: boolean;
+  onClick?: (isOpen: boolean) => void
 }>;

invokeai/frontend/web/src/common/components/InvSingleAccordion/InvSingleAccordion.tsx

@@ -4,21 +4,35 @@ import {
   InvAccordionItem,
   InvAccordionPanel,
 } from 'common/components/InvAccordion/wrapper';
-import { memo } from 'react';
+import { memo, useCallback } from 'react';
 
 import type { InvSingleAccordionProps } from './types';
 
 export const InvSingleAccordion = memo((props: InvSingleAccordionProps) => {
+  const handleAccordionClick = useCallback(
+    (isExpanded: boolean) => {
+      props.onClick && props.onClick(isExpanded);
+    },
+    [props.onClick]
+  );
+
   return (
     <InvAccordion
       allowToggle
       defaultIndex={props.defaultIsOpen ? 0 : undefined}
     >
       <InvAccordionItem>
-        <InvAccordionButton badges={props.badges}>
+        {({ isExpanded }) => (
+          <>
+            <InvAccordionButton
+              badges={props.badges}
+              onClick={() => handleAccordionClick(isExpanded)}
+            >
               {props.label}
             </InvAccordionButton>
             <InvAccordionPanel>{props.children}</InvAccordionPanel>
+          </>
+        )}
       </InvAccordionItem>
     </InvAccordion>
   );

invokeai/frontend/web/src/common/components/InvSingleAccordion/types.ts

@@ -4,4 +4,5 @@ export type InvSingleAccordionProps = PropsWithChildren<{
   label: string;
   badges?: (string | number)[];
   defaultIsOpen?: boolean;
+  onClick?: (isOpen?: boolean) => void
 }>;

invokeai/frontend/web/src/features/gallery/components/Boards/BoardContextMenu.tsx

@@ -20,6 +20,7 @@ import { useBoardName } from 'services/api/hooks/useBoardName';
 import type { BoardDTO } from 'services/api/types';
 
 import GalleryBoardContextMenuItems from './GalleryBoardContextMenuItems';
+import { bulkDownloadRequested } from '../../store/actions';
 
 type Props = {
   board?: BoardDTO;
@@ -66,6 +67,8 @@ const BoardContextMenu = ({
         board_id: board_id,
       }).unwrap();
 
+      dispatch(bulkDownloadRequested({ type: 'board' }));
+
       dispatch(
         addToast({
           title: t('gallery.preparingDownload'),

invokeai/frontend/web/src/features/gallery/components/Boards/BoardsList/AddBoardButton.tsx

@@ -3,14 +3,19 @@ import { memo, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 import { PiPlusBold } from 'react-icons/pi';
 import { useCreateBoardMutation } from 'services/api/endpoints/boards';
+import { useAppDispatch } from '../../../../../app/store/storeHooks';
+import { boardCreated } from '../../../store/actions';
 
 const AddBoardButton = () => {
   const { t } = useTranslation();
   const [createBoard, { isLoading }] = useCreateBoardMutation();
+  const dispatch = useAppDispatch();
+
   const DEFAULT_BOARD_NAME = t('boards.myBoard');
-  const handleCreateBoard = useCallback(() => {
+  const handleCreateBoard = useCallback(async () => {
-    createBoard(DEFAULT_BOARD_NAME);
+    await createBoard(DEFAULT_BOARD_NAME).unwrap();
-  }, [createBoard, DEFAULT_BOARD_NAME]);
+    dispatch(boardCreated());
+  }, [createBoard, DEFAULT_BOARD_NAME, dispatch]);
 
   return (
     <InvIconButton

invokeai/frontend/web/src/features/gallery/components/ImageContextMenu/MultipleSelectionMenuItems.tsx

@@ -24,6 +24,7 @@ import {
   useStarImagesMutation,
   useUnstarImagesMutation,
 } from 'services/api/endpoints/images';
+import { bulkDownloadRequested } from '../../store/actions';
 
 const MultipleSelectionMenuItems = () => {
   const { t } = useTranslation();
@@ -61,6 +62,8 @@ const MultipleSelectionMenuItems = () => {
         image_names: selection.map((img) => img.image_name),
       }).unwrap();
 
+      dispatch(bulkDownloadRequested({ type: 'images' }));
+
       dispatch(
         addToast({
           title: t('gallery.preparingDownload'),

invokeai/frontend/web/src/features/gallery/store/actions.ts

@@ -15,3 +15,8 @@ export const requestedBoardImagesDeletion =
 export const sentImageToCanvas = createAction('gallery/sentImageToCanvas');
 
 export const sentImageToImg2Img = createAction('gallery/sentImageToImg2Img');
+
+export const imageUploaded = createAction<{ postUploadAction?: string }>('gallery/imageUploaded');
+export const boardCreated = createAction('gallery/boardCreated');
+
+export const bulkDownloadRequested = createAction<{ type: string }>('gallery/bulkDownloadRequested')

invokeai/frontend/web/src/features/parameters/components/Core/ParamPositivePrompt.tsx

@@ -12,6 +12,9 @@ import { memo, useCallback, useRef } from 'react';
 import type { HotkeyCallback } from 'react-hotkeys-hook';
 import { useHotkeys } from 'react-hotkeys-hook';
 import { useTranslation } from 'react-i18next';
+import { FaDice } from 'react-icons/fa';
+import { InvTooltip } from '../../../../common/components/InvTooltip/InvTooltip';
+import { InvIconButton } from '../../../../common/components/InvIconButton/InvIconButton';
 
 export const ParamPositivePrompt = memo(() => {
   const dispatch = useAppDispatch();
@@ -71,8 +74,18 @@ export const ParamPositivePrompt = memo(() => {
         />
         <PromptOverlayButtonWrapper>
           <AddEmbeddingButton isOpen={isOpen} onOpen={onOpen} />
-          {baseModel === 'sdxl' && <SDXLConcatButton />}
+          <SDXLConcatButton />
           <ShowDynamicPromptsPreviewButton />
+          <InvTooltip label={'Shuffle Prompt'}>
+            <InvIconButton
+              size="sm"
+              variant="promptOverlay"
+              // isDisabled={isOpen}
+              aria-label={t('dynamicPrompts.showDynamicPrompts')}
+              icon={<FaDice />}
+              // onClick={onOpen}
+            />
+          </InvTooltip>
         </PromptOverlayButtonWrapper>
       </Box>
     </EmbeddingPopover>

invokeai/frontend/web/src/features/parameters/store/actions.ts

@@ -8,3 +8,8 @@ export const initialImageSelected = createAction<ImageDTO | undefined>(
 export const modelSelected = createAction<MainModelField>(
   'generation/modelSelected'
 );
+
+export const imageAdvancedOptionsExpanded = createAction('parameters/imageAdvancedOptionsExpanded')
+export const generationAdvancedOptionsExpanded = createAction('parameters/generationAdvancedOptionsExpanded')
+
+export const advancedPanelExpanded = createAction('parameters/advancedPanelExpanded')

invokeai/frontend/web/src/features/settingsAccordions/AdvancedSettingsAccordion/AdvancedSettingsAccordion.tsx

@@ -1,6 +1,6 @@
 import { Flex } from '@chakra-ui/layout';
 import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
-import { useAppSelector } from 'app/store/storeHooks';
+import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { InvControlGroup } from 'common/components/InvControl/InvControlGroup';
 import type { InvLabelProps } from 'common/components/InvControl/types';
 import { InvSingleAccordion } from 'common/components/InvSingleAccordion/InvSingleAccordion';
@@ -11,8 +11,9 @@ import ParamSeamlessYAxis from 'features/parameters/components/Seamless/ParamSea
 import ParamVAEModelSelect from 'features/parameters/components/VAEModel/ParamVAEModelSelect';
 import ParamVAEPrecision from 'features/parameters/components/VAEModel/ParamVAEPrecision';
 import { selectGenerationSlice } from 'features/parameters/store/generationSlice';
-import { memo } from 'react';
+import { memo, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
+import { advancedPanelExpanded } from '../../parameters/store/actions';
 
 const labelProps: InvLabelProps = {
   minW: '9.2rem',
@@ -51,9 +52,20 @@ const selectBadges = createMemoizedSelector(
 export const AdvancedSettingsAccordion = memo(() => {
   const badges = useAppSelector(selectBadges);
   const { t } = useTranslation();
+  const dispatch = useAppDispatch();
+
+  const onAccordionClick = useCallback((isOpen?: boolean) => {
+    if (!isOpen) {
+      dispatch(advancedPanelExpanded());
+    }
+  }, []);
 
   return (
-    <InvSingleAccordion label={t('accordions.advanced.title')} badges={badges}>
+    <InvSingleAccordion
+      label={t('accordions.advanced.title')}
+      badges={badges}
+      onClick={onAccordionClick}
+    >
       <Flex gap={4} alignItems="center" p={4} flexDir="column">
         <Flex gap={4} w="full">
           <ParamVAEModelSelect />

invokeai/frontend/web/src/features/settingsAccordions/GenerationSettingsAccordion/GenerationSettingsAccordion.tsx

@@ -1,6 +1,6 @@
 import { Flex } from '@chakra-ui/layout';
 import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
-import { useAppSelector } from 'app/store/storeHooks';
+import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { InvControlGroup } from 'common/components/InvControl/InvControlGroup';
 import type { InvLabelProps } from 'common/components/InvControl/types';
 import { InvExpander } from 'common/components/InvExpander/InvExpander';
@@ -22,8 +22,9 @@ import ParamSteps from 'features/parameters/components/Core/ParamSteps';
 import ParamMainModelSelect from 'features/parameters/components/MainModel/ParamMainModelSelect';
 import { selectGenerationSlice } from 'features/parameters/store/generationSlice';
 import { size } from 'lodash-es';
-import { memo } from 'react';
+import { memo, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
+import { generationAdvancedOptionsExpanded } from '../../parameters/store/actions';
 
 const labelProps: InvLabelProps = {
   minW: '4rem',
@@ -47,6 +48,13 @@ const badgesSelector = createMemoizedSelector(
 export const GenerationSettingsAccordion = memo(() => {
   const { t } = useTranslation();
   const { loraTabBadges, accordionBadges } = useAppSelector(badgesSelector);
+  const dispatch = useAppDispatch();
+
+  const onToggleExpander = useCallback((isOpen?: boolean) => {
+    if (!isOpen) {
+      dispatch(generationAdvancedOptionsExpanded());
+    }
+  }, []);
 
   return (
     <InvSingleAccordion
@@ -67,7 +75,7 @@ export const GenerationSettingsAccordion = memo(() => {
               <ParamMainModelSelect />
               <SyncModelsIconButton />
             </Flex>
-            <InvExpander>
+            <InvExpander onClick={onToggleExpander}>
               <Flex gap={4} flexDir="column" pb={4}>
                 <InvControlGroup labelProps={labelProps}>
                   <ParamScheduler />

invokeai/frontend/web/src/features/settingsAccordions/ImageSettingsAccordion/ImageSettingsAccordion.tsx

@@ -1,6 +1,6 @@
 import { Flex } from '@chakra-ui/react';
 import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
-import { useAppSelector } from 'app/store/storeHooks';
+import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { InvControlGroup } from 'common/components/InvControl/InvControlGroup';
 import type { InvLabelProps } from 'common/components/InvControl/types';
 import { InvExpander } from 'common/components/InvExpander/InvExpander';
@@ -18,11 +18,12 @@ import { ParamSeedRandomize } from 'features/parameters/components/Seed/ParamSee
 import { ParamSeedShuffle } from 'features/parameters/components/Seed/ParamSeedShuffle';
 import { selectGenerationSlice } from 'features/parameters/store/generationSlice';
 import { activeTabNameSelector } from 'features/ui/store/uiSelectors';
-import { memo } from 'react';
+import { memo, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { ImageSizeCanvas } from './ImageSizeCanvas';
 import { ImageSizeLinear } from './ImageSizeLinear';
+import { imageAdvancedOptionsExpanded } from '../../parameters/store/actions';
 
 const selector = createMemoizedSelector(
   [
@@ -73,6 +74,13 @@ const scalingLabelProps: InvLabelProps = {
 export const ImageSettingsAccordion = memo(() => {
   const { t } = useTranslation();
   const { badges, activeTabName } = useAppSelector(selector);
+  const dispatch = useAppDispatch();
+
+  const onToggleExpander = useCallback((isOpen?: boolean) => {
+    if (!isOpen) {
+      dispatch(imageAdvancedOptionsExpanded());
+    }
+  }, []);
 
   return (
     <InvSingleAccordion
@@ -86,7 +94,7 @@ export const ImageSettingsAccordion = memo(() => {
         ) : (
           <ImageSizeLinear />
         )}
-        <InvExpander>
+        <InvExpander onClick={onToggleExpander}>
           <Flex gap={4} pb={4} flexDir="column">
             <Flex gap={4} alignItems="center">
               <ParamSeedNumberInput />