feat: Make Embedding Picker a mini toggle

invokeai/frontend/web/src/features/embedding/components/ParamEmbeddingCollapse.tsx

@@ -1,13 +1,18 @@
 import { Flex } from '@chakra-ui/react';
-import IAICollapse from 'common/components/IAICollapse';
+import { RootState } from 'app/store/store';
+import { useAppSelector } from 'app/store/storeHooks';
 import ParamEmbeddingSelect from './ParamEmbeddingSelect';
 
 export default function ParamEmbeddingCollapse() {
+  const shouldShowEmbeddingPicker = useAppSelector(
+    (state: RootState) => state.ui.shouldShowEmbeddingPicker
+  );
+
   return (
-    <IAICollapse label="Embeddings">
+    shouldShowEmbeddingPicker && (
       <Flex sx={{ flexDir: 'column', gap: 2 }}>
         <ParamEmbeddingSelect />
       </Flex>
-    </IAICollapse>
+    )
   );
 }

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

@@ -11,12 +11,15 @@ import {
 } from 'features/parameters/store/generationSlice';
 import { activeTabNameSelector } from 'features/ui/store/uiSelectors';
 
+import { userInvoked } from 'app/store/actions';
+import IAIIconButton from 'common/components/IAIIconButton';
+import IAITextarea from 'common/components/IAITextarea';
+import { useIsReadyToInvoke } from 'common/hooks/useIsReadyToInvoke';
+import { toggleEmbeddingPicker } from 'features/ui/store/uiSlice';
 import { isEqual } from 'lodash-es';
 import { useHotkeys } from 'react-hotkeys-hook';
 import { useTranslation } from 'react-i18next';
-import { userInvoked } from 'app/store/actions';
+import { BiCode } from 'react-icons/bi';
-import IAITextarea from 'common/components/IAITextarea';
-import { useIsReadyToInvoke } from 'common/hooks/useIsReadyToInvoke';
 
 const promptInputSelector = createSelector(
   [(state: RootState) => state.generation, activeTabNameSelector],
@@ -68,8 +71,21 @@ const ParamPositiveConditioning = () => {
     [dispatch, activeTabName, isReady]
   );
 
+  const shouldShowEmbeddingPicker = useAppSelector(
+    (state: RootState) => state.ui.shouldShowEmbeddingPicker
+  );
+
   return (
     <Box>
+      <IAIIconButton
+        size="xs"
+        aria-label="Toggle Embedding Picker"
+        tooltip="Toggle Embedding Picker"
+        icon={<BiCode />}
+        sx={{ position: 'absolute', top: 8, right: 2, zIndex: 2 }}
+        isChecked={shouldShowEmbeddingPicker}
+        onClick={() => dispatch(toggleEmbeddingPicker())}
+      ></IAIIconButton>
       <FormControl>
         <IAITextarea
           id="prompt"

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

@@ -17,9 +17,9 @@ const ImageToImageTabParameters = () => {
     <>
       <ParamPositiveConditioning />
       <ParamNegativeConditioning />
+      <ParamEmbeddingCollapse />
       <ProcessButtons />
       <ImageToImageTabCoreParameters />
-      <ParamEmbeddingCollapse />
       <ParamLoraCollapse />
       <ParamDynamicPromptsCollapse />
       <ParamControlNetCollapse />

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

@@ -18,9 +18,9 @@ const TextToImageTabParameters = () => {
     <>
       <ParamPositiveConditioning />
       <ParamNegativeConditioning />
+      <ParamEmbeddingCollapse />
       <ProcessButtons />
       <TextToImageTabCoreParameters />
-      <ParamEmbeddingCollapse />
       <ParamLoraCollapse />
       <ParamDynamicPromptsCollapse />
       <ParamControlNetCollapse />

invokeai/frontend/web/src/features/ui/components/tabs/UnifiedCanvas/UnifiedCanvasParameters.tsx

@@ -17,9 +17,9 @@ const UnifiedCanvasParameters = () => {
     <>
       <ParamPositiveConditioning />
       <ParamNegativeConditioning />
+      <ParamEmbeddingCollapse />
       <ProcessButtons />
       <UnifiedCanvasCoreParameters />
-      <ParamEmbeddingCollapse />
       <ParamLoraCollapse />
       <ParamDynamicPromptsCollapse />
       <ParamControlNetCollapse />

invokeai/frontend/web/src/features/ui/store/uiSlice.ts

@@ -1,10 +1,10 @@
 import type { PayloadAction } from '@reduxjs/toolkit';
 import { createSlice } from '@reduxjs/toolkit';
 import { initialImageChanged } from 'features/parameters/store/generationSlice';
+import { SchedulerParam } from 'features/parameters/store/parameterZodSchemas';
 import { setActiveTabReducer } from './extraReducers';
 import { InvokeTabName } from './tabMap';
 import { AddNewModelType, UIState } from './uiTypes';
-import { SchedulerParam } from 'features/parameters/store/parameterZodSchemas';
 
 export const initialUIState: UIState = {
   activeTab: 0,
@@ -19,6 +19,7 @@ export const initialUIState: UIState = {
   shouldShowGallery: true,
   shouldHidePreview: false,
   shouldShowProgressInViewer: true,
+  shouldShowEmbeddingPicker: false,
   favoriteSchedulers: [],
 };
 
@@ -96,6 +97,9 @@ export const uiSlice = createSlice({
     ) => {
       state.favoriteSchedulers = action.payload;
     },
+    toggleEmbeddingPicker: (state) => {
+      state.shouldShowEmbeddingPicker = !state.shouldShowEmbeddingPicker;
+    },
   },
   extraReducers(builder) {
     builder.addCase(initialImageChanged, (state) => {
@@ -122,6 +126,7 @@ export const {
   toggleGalleryPanel,
   setShouldShowProgressInViewer,
   favoriteSchedulersChanged,
+  toggleEmbeddingPicker,
 } = uiSlice.actions;
 
 export default uiSlice.reducer;

invokeai/frontend/web/src/features/ui/store/uiTypes.ts

@@ -27,5 +27,6 @@ export interface UIState {
   shouldPinGallery: boolean;
   shouldShowGallery: boolean;
   shouldShowProgressInViewer: boolean;
+  shouldShowEmbeddingPicker: boolean;
   favoriteSchedulers: SchedulerParam[];
 }