feat(ui): IAICustomSelect v2, implement for scheduler & model

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

@@ -1,5 +1,6 @@
 import { RootState } from 'app/store/store';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
+import IAICustomSelect from 'common/components/IAICustomSelect';
 import IAISelect from 'common/components/IAISelect';
 import { setSampler } from 'features/parameters/store/generationSlice';
 import { activeTabNameSelector } from 'features/ui/store/uiSelectors';
@@ -23,21 +24,26 @@ const ParamSampler = () => {
   const { t } = useTranslation();
 
   const handleChange = useCallback(
-    (e: ChangeEvent<HTMLSelectElement>) => dispatch(setSampler(e.target.value)),
+    (v: string | null | undefined) => {
+      if (!v) {
+        return;
+      }
+      dispatch(setSampler(v));
+    },
     [dispatch]
   );
 
   return (
-    <IAISelect
+    <IAICustomSelect
       label={t('parameters.sampler')}
-      value={sampler}
-      onChange={handleChange}
-      validValues={
+      selectedItem={sampler}
+      setSelectedItem={handleChange}
+      items={
         ['img2img', 'unifiedCanvas'].includes(activeTabName)
           ? img2imgSchedulers
           : schedulers
       }
-      minWidth={36}
+      withCheckIcon
     />
   );
 };

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

@@ -0,0 +1,19 @@
+import { Box, Flex } from '@chakra-ui/react';
+import { memo } from 'react';
+import ParamSampler from './ParamSampler';
+import ModelSelect from 'features/system/components/ModelSelect';
+
+const ParamSchedulerAndModel = () => {
+  return (
+    <Flex gap={3} w="full">
+      <Box w="16rem">
+        <ParamSampler />
+      </Box>
+      <Box w="full">
+        <ModelSelect />
+      </Box>
+    </Flex>
+  );
+};
+
+export default memo(ParamSchedulerAndModel);

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

@@ -2,8 +2,9 @@ import type { PayloadAction } from '@reduxjs/toolkit';
 import { createSlice } from '@reduxjs/toolkit';
 import * as InvokeAI from 'app/types/invokeai';
 import promptToString from 'common/util/promptToString';
-import { clamp } from 'lodash-es';
+import { clamp, sample } from 'lodash-es';
 import { setAllParametersReducer } from './setAllParametersReducer';
+import { receivedModels } from 'services/thunks/model';
 
 export interface GenerationState {
   cfgScale: number;
@@ -236,6 +237,16 @@ export const generationSlice = createSlice({
       state.model = action.payload;
     },
   },
+  extraReducers: (builder) => {
+    builder.addCase(receivedModels.fulfilled, (state, action) => {
+      if (!state.model) {
+        const randomModel = sample(action.payload);
+        if (randomModel) {
+          state.model = randomModel.name;
+        }
+      }
+    });
+  },
 });
 
 export const {