add previewImage to combobox.

[Pfannkuchensack]

this works only with the pull request https://github.com/invoke-ai/ui-library/pull/20

Summary

Look at https://github.com/invoke-ai/InvokeAI/issues/6726

Related Issues / Discussions

https://github.com/invoke-ai/ui-library/pull/20

QA Instructions

Only if the combobox options have the new params the change will have a effect. so any combobox option without previewImage and withPreviewImage field behaves normal/unchanged

Merge Plan

No concerns

Checklist

• [ ] The PR has a short but descriptive title, suitable for a changelog
• [ ] Tests added / updated (if applicable)
• [ ] Documentation added / updated (if applicable)

[psychedelicious]

Actually the component already supports this with the icon prop. I can be any ReactNode:

diff --git a/invokeai/frontend/web/src/common/hooks/useGroupedModelCombobox.ts b/invokeai/frontend/web/src/common/hooks/useGroupedModelCombobox.ts
index 5b57fcd2b..4e3cb29d9 100644
--- a/invokeai/frontend/web/src/common/hooks/useGroupedModelCombobox.ts
+++ b/invokeai/frontend/web/src/common/hooks/useGroupedModelCombobox.ts
@@ -1,8 +1,10 @@
 import type { ComboboxOnChange, ComboboxOption } from '@invoke-ai/ui-library';
+import { Image } from '@invoke-ai/ui-library';
 import { useAppSelector } from 'app/store/storeHooks';
 import type { GroupBase } from 'chakra-react-select';
 import type { ModelIdentifierField } from 'features/nodes/types/common';
 import { groupBy, reduce } from 'lodash-es';
+import InvokeLogoWhite from 'public/assets/images/invoke-symbol-wht-lrg.svg';
 import { useCallback, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import type { AnyModelConfig } from 'services/api/types';
@@ -48,6 +50,7 @@ export const useGroupedModelCombobox = <T extends AnyModelConfig>(
             label: model.name,
             value: model.key,
             isDisabled: getIsDisabled ? getIsDisabled(model) : false,
+            icon: <Image src={model.cover_image ?? InvokeLogoWhite} w={8} h={8} minW={8} minH={8} flexShrink={0} />,
           })),
         });
         return acc;

(you'll need to change the file extension to end with .tsx to include JSX)

Maybe ui-library needs some changes to better style components passed as icon - maybe some vertically alignment - but we probably don't need to add any props to it.

Suggest making a component in this repo to show the model image or fallback icon, styled similarly to what is pictured in this PR. Then iterate on any styling in ui-library, using icon only.

[psychedelicious]

Thanks for your time on this @Pfannkuchensack , I have this on my TODO list. Closing this as I will take a different approach