fix(ui): add tooltip to model select

invokeai/frontend/web/src/features/parameters/components/MainModel/ParamMainModelSelect.tsx

@@ -1,15 +1,19 @@
-import { Combobox, FormControl, FormLabel } from '@invoke-ai/ui';
+import { Combobox, FormControl, FormLabel, Tooltip } from '@invoke-ai/ui';
 import { createMemoizedSelector } from 'app/store/createMemoizedSelector';
 import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
 import { useGroupedModelCombobox } from 'common/hooks/useGroupedModelCombobox';
 import { modelSelected } from 'features/parameters/store/actions';
 import { selectGenerationSlice } from 'features/parameters/store/generationSlice';
 import { pick } from 'lodash-es';
-import { memo, useCallback } from 'react';
+import { memo, useCallback, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { NON_REFINER_BASE_MODELS } from 'services/api/constants';
 import type { MainModelConfigEntity } from 'services/api/endpoints/models';
-import { useGetMainModelsQuery } from 'services/api/endpoints/models';
+import {
+  getModelId,
+  mainModelsAdapterSelectors,
+  useGetMainModelsQuery,
+} from 'services/api/endpoints/models';
 
 const selectModel = createMemoizedSelector(
   selectGenerationSlice,
@@ -21,6 +25,13 @@ const ParamMainModelSelect = () => {
   const { t } = useTranslation();
   const model = useAppSelector(selectModel);
   const { data, isLoading } = useGetMainModelsQuery(NON_REFINER_BASE_MODELS);
+  const tooltipLabel = useMemo(() => {
+    if (!data || !model) {
+      return;
+    }
+    return mainModelsAdapterSelectors.selectById(data, getModelId(model))
+      ?.description;
+  }, [data, model]);
   const _onChange = useCallback(
     (model: MainModelConfigEntity | null) => {
       if (!model) {
@@ -41,6 +52,7 @@ const ParamMainModelSelect = () => {
     });
 
   return (
+    <Tooltip label={tooltipLabel}>
       <FormControl isDisabled={!options.length} isInvalid={!options.length}>
         <FormLabel>{t('modelManager.model')}</FormLabel>
         <Combobox
@@ -51,6 +63,7 @@ const ParamMainModelSelect = () => {
           noOptionsMessage={noOptionsMessage}
         />
       </FormControl>
+    </Tooltip>
   );
 };