feat(ui): new model picker combobox

invokeai/frontend/web/package.json

@@ -65,7 +65,7 @@
     "@xyflow/react": "^12.5.3",
     "async-mutex": "^0.5.0",
     "chakra-react-select": "^4.9.2",
-    "cmdk": "^1.0.0",
+    "cmdk": "^1.1.1",
     "compare-versions": "^6.1.1",
     "filesize": "^10.1.6",
     "fracturedjsonjs": "^4.0.2",
@@ -98,7 +98,7 @@
     "react-i18next": "^15.0.2",
     "react-icons": "^5.3.0",
     "react-redux": "9.1.2",
-    "react-resizable-panels": "^2.1.4",
+    "react-resizable-panels": "^2.1.7",
     "react-textarea-autosize": "^8.5.7",
     "react-use": "^17.5.1",
     "react-virtuoso": "^4.12.5",

invokeai/frontend/web/public/locales/en.json

@@ -118,6 +118,8 @@
         "error": "Error",
         "error_withCount_one": "{{count}} error",
         "error_withCount_other": "{{count}} errors",
+        "model_withCount_one": "{{count}} model",
+        "model_withCount_other": "{{count}} models",
         "file": "File",
         "folder": "Folder",
         "format": "format",
@@ -138,6 +140,8 @@
         "localSystem": "Local System",
         "learnMore": "Learn More",
         "modelManager": "Model Manager",
+        "noMatches": "No matches",
+        "noOptions": "No options",
         "nodes": "Workflows",
         "notInstalled": "Not $t(common.installed)",
         "openInNewTab": "Open in New Tab",
@@ -197,7 +201,9 @@
         "column": "Column",
         "value": "Value",
         "label": "Label",
-        "systemInformation": "System Information"
+        "systemInformation": "System Information",
+        "compact": "Compact",
+        "full": "Full"
     },
     "hrf": {
         "hrf": "High Resolution Fix",
@@ -768,6 +774,7 @@
         "description": "Description",
         "edit": "Edit",
         "fileSize": "File Size",
+        "filterModels": "Filter models",
         "fluxRedux": "FLUX Redux",
         "height": "Height",
         "huggingFace": "HuggingFace",
@@ -821,10 +828,12 @@
         "modelUpdated": "Model Updated",
         "modelUpdateFailed": "Model Update Failed",
         "name": "Name",
-        "noModelsInstalled": "No Models Installed",
+        "modelPickerFallbackNoModelsInstalled": "No models installed.",
+        "modelPickerFallbackNoModelsInstalled2": "Visit the <LinkComponent>Model Manager</LinkComponent> to install models.",
         "noModelsInstalledDesc1": "Install models with the",
         "noModelSelected": "No Model Selected",
-        "noMatchingModels": "No matching Models",
+        "noMatchingModels": "No matching models",
+        "noModelsInstalled": "No models installed",
         "none": "none",
         "path": "Path",
         "pathToConfig": "Path To Config",
@@ -871,7 +880,8 @@
         "installingXModels_one": "Installing {{count}} model",
         "installingXModels_other": "Installing {{count}} models",
         "skippingXDuplicates_one": ", skipping {{count}} duplicate",
-        "skippingXDuplicates_other": ", skipping {{count}} duplicates"
+        "skippingXDuplicates_other": ", skipping {{count}} duplicates",
+        "manageModels": "Manage Models"
     },
     "models": {
         "addLora": "Add LoRA",

invokeai/frontend/web/src/app/components/InvokeAIUI.tsx

@@ -12,6 +12,7 @@ import type { CustomStarUi } from 'app/store/nanostores/customStarUI';
 import { $customStarUI } from 'app/store/nanostores/customStarUI';
 import { $isDebugging } from 'app/store/nanostores/isDebugging';
 import { $logo } from 'app/store/nanostores/logo';
+import { $onClickGoToModelManager } from 'app/store/nanostores/onClickGoToModelManager';
 import { $openAPISchemaUrl } from 'app/store/nanostores/openAPISchemaUrl';
 import { $projectId, $projectName, $projectUrl } from 'app/store/nanostores/projectId';
 import { $queueId, DEFAULT_QUEUE_ID } from 'app/store/nanostores/queueId';
@@ -59,6 +60,10 @@ interface Props extends PropsWithChildren {
   workflowTagCategories?: WorkflowTagCategory[];
   workflowSortOptions?: WorkflowSortOption[];
   loggingOverrides?: LoggingOverrides;
+  /**
+   * If provided, overrides in-app navigation to the model manager
+   */
+  onClickGoToModelManager?: () => void;
 }
 
 const InvokeAIUI = ({
@@ -81,6 +86,7 @@ const InvokeAIUI = ({
   workflowTagCategories,
   workflowSortOptions,
   loggingOverrides,
+  onClickGoToModelManager,
 }: Props) => {
   useLayoutEffect(() => {
     /*
@@ -205,6 +211,16 @@ const InvokeAIUI = ({
     };
   }, [logo]);
 
+  useEffect(() => {
+    if (onClickGoToModelManager) {
+      $onClickGoToModelManager.set(onClickGoToModelManager);
+    }
+
+    return () => {
+      $onClickGoToModelManager.set(undefined);
+    };
+  }, [onClickGoToModelManager]);
+
   useEffect(() => {
     if (workflowCategories) {
       $workflowLibraryCategoriesOptions.set(workflowCategories);

invokeai/frontend/web/src/app/store/nanostores/onClickGoToModelManager.ts

@@ -0,0 +1,3 @@
+import { atom } from 'nanostores';
+
+export const $onClickGoToModelManager = atom<(() => void) | undefined>(undefined);

invokeai/frontend/web/src/common/components/OverlayScrollbars/ScrollableContent.tsx

@@ -7,7 +7,7 @@ import { getOverlayScrollbarsParams } from 'common/components/OverlayScrollbars/
 import type { OverlayScrollbarsComponentRef } from 'overlayscrollbars-react';
 import { OverlayScrollbarsComponent } from 'overlayscrollbars-react';
 import type { CSSProperties, PropsWithChildren } from 'react';
-import { memo, useEffect, useMemo, useState } from 'react';
+import { memo, useEffect, useMemo, useRef } from 'react';
 
 type Props = PropsWithChildren & {
   maxHeight?: ChakraProps['maxHeight'];
@@ -22,9 +22,9 @@ const ScrollableContent = ({ children, maxHeight, overflowX = 'hidden', overflow
     () => getOverlayScrollbarsParams({ overflowX, overflowY }).options,
     [overflowX, overflowY]
   );
-  const [os, osRef] = useState<OverlayScrollbarsComponentRef | null>(null);
+  const os = useRef<OverlayScrollbarsComponentRef>(null);
   useEffect(() => {
-    const osInstance = os?.osInstance();
+    const osInstance = os.current?.osInstance();
 
     if (!osInstance) {
       return;
@@ -46,7 +46,7 @@ const ScrollableContent = ({ children, maxHeight, overflowX = 'hidden', overflow
   return (
     <Flex w="full" h="full" maxHeight={maxHeight} position="relative">
       <Box position="absolute" top={0} left={0} right={0} bottom={0}>
-        <OverlayScrollbarsComponent ref={osRef} style={styles} options={overlayscrollbarsOptions}>
+        <OverlayScrollbarsComponent ref={os} style={styles} options={overlayscrollbarsOptions} defer>
           {children}
         </OverlayScrollbarsComponent>
       </Box>