Models: UI hide hidden by default

src/common/stores/store-ui.ts

@@ -45,6 +45,9 @@ interface UIPreferencesStore {
   showPersonaFinder: boolean;
   setShowPersonaFinder: (showPersonaFinder: boolean) => void;
 
+  showModelsHidden: boolean;
+  setShowModelsHidden: (showModelsHidden: boolean) => void;
+
   composerQuickButton: 'off' | 'call' | 'beam';
   setComposerQuickButton: (composerQuickButton: 'off' | 'call' | 'beam') => void;
 
@@ -106,6 +109,9 @@ export const useUIPreferencesStore = create<UIPreferencesStore>()(
       showPersonaFinder: false,
       setShowPersonaFinder: (showPersonaFinder: boolean) => set({ showPersonaFinder }),
 
+      showModelsHidden: false,
+      setShowModelsHidden: (showModelsHidden: boolean) => set({ showModelsHidden }),
+
       composerQuickButton: 'beam',
       setComposerQuickButton: (composerQuickButton: 'off' | 'call' | 'beam') => set({ composerQuickButton }),
 

src/modules/llms/models-modal/ModelsConfiguratorModal.tsx

@@ -1,13 +1,16 @@
 import * as React from 'react';
+import { useShallow } from 'zustand/react/shallow';
 
-import { Box, Button, Divider } from '@mui/joy';
+import { Box, Button, Checkbox, Divider } from '@mui/joy';
 
 import type { DModelsService } from '~/common/stores/llms/llms.service.types';
 import { AppBreadcrumbs } from '~/common/components/AppBreadcrumbs';
 import { GoodModal } from '~/common/components/modals/GoodModal';
+import { TooltipOutlined } from '~/common/components/TooltipOutlined';
 import { optimaActions } from '~/common/layout/optima/useOptima';
 import { useHasLLMs } from '~/common/stores/llms/llms.hooks';
 import { useIsMobile } from '~/common/components/useMatchMedia';
+import { useUIPreferencesStore } from '~/common/stores/store-ui';
 
 import { LLMVendorSetup } from '../components/LLMVendorSetup';
 import { ModelsList } from './ModelsList';
@@ -41,6 +44,7 @@ export function ModelsConfiguratorModal(props: {
   // external state
   const isMobile = useIsMobile();
   const hasLLMs = useHasLLMs();
+  const [showModelsHidden, setShowModelsHidden] = useUIPreferencesStore(useShallow((state) => [state.showModelsHidden, state.setShowModelsHidden]));
 
 
   // active service with fallback to the last added service
@@ -86,17 +90,25 @@ export function ModelsConfiguratorModal(props: {
     // return <Badge size='sm' badgeContent='14 Services' color='neutral' variant='outlined'><Button variant='outlined' color='neutral' onClick={handleShowAdvanced}>{isMobile ? 'Advanced' : 'Switch to Advanced'}</Button></Badge>;
     if (!hasAnyServices)
       return <Button variant='outlined' color='neutral' onClick={handleShowWizard} sx={{ backgroundColor: 'background.popup' }}>{isMobile ? 'Quick Setup' : 'Quick Setup'}</Button>;
+
+    // Show checkbox for filtering hidden models when we have LLMs
+    if (isTabSetup && hasLLMs)
+      return (
+        <TooltipOutlined title='Show hidden models - some may be experimental, deprecated, or just not recommended.' placement='top'>
+          <Checkbox
+            // size='sm'
+            color='neutral'
+            // variant='outlined'
+            label='Include Hidden'
+            checked={showModelsHidden}
+            onChange={(e) => setShowModelsHidden(e.target.checked)}
+            sx={{ my: 'auto', fontSize: 'sm' }}
+          />
+        </TooltipOutlined>
+      );
+
     return undefined;
-    // if (isMultiServices) {
-    //   return (
-    //     <Checkbox
-    //       label='All Services'
-    //       sx={{ my: 'auto' }}
-    //       checked={showAllServices} onChange={() => setShowAllServices(all => !all)}
-    //     />
-    //   );
-    // }
-  }, [handleShowAdvanced, handleShowWizard, hasAnyServices, isMobile, isTabWizard]);
+  }, [handleShowAdvanced, handleShowWizard, hasAnyServices, hasLLMs, isMobile, isTabSetup, isTabWizard, setShowModelsHidden, showModelsHidden]);
 
 
   return (
@@ -149,10 +161,11 @@ export function ModelsConfiguratorModal(props: {
       {isTabSetup && hasLLMs && (
         <ModelsList
           filterServiceId={showAllServices ? null : activeServiceId}
+          showHiddenModels={showModelsHidden}
           onOpenLLMOptions={optimaActions().openModelOptions}
           sx={{
             // works in tandem with the parent (GoodModal > Dialog) overflow: 'auto'
-            minHeight: '6rem',
+            minHeight: '8rem',
             overflowY: 'auto',
 
             // style (list variant=outlined)

src/modules/llms/models-modal/ModelsList.tsx

@@ -227,6 +227,7 @@ function ModelItem(props: {
 
 export function ModelsList(props: {
   filterServiceId: DModelsServiceId | null,
+  showHiddenModels: boolean,
   onOpenLLMOptions: (id: DLLMId) => void,
   sx?: SxProps,
 }) {
@@ -260,6 +261,10 @@ export function ModelsList(props: {
     const items: React.JSX.Element[] = [];
     for (const llm of llms) {
 
+      // skip hidden models if requested
+      if (!props.showHiddenModels && llm.hidden)
+        continue;
+
       // get the service label
       const serviceLabel = findModelsServiceOrNull(llm.sId)?.label ?? llm.sId;
 
@@ -295,13 +300,13 @@ export function ModelsList(props: {
     }
 
     return items;
-  }, [domainAssignments, handleModelClicked, handleModelSetHidden, handleModelSetStarred, isMobile, llms, props.filterServiceId]);
+  }, [domainAssignments, handleModelClicked, handleModelSetHidden, handleModelSetStarred, isMobile, llms, props.filterServiceId, props.showHiddenModels]);
 
   return (
     <List size={!isMobile ? undefined : 'sm'} variant='outlined' sx={props.sx}>
       {modelItems.length > 0 ? modelItems : (
         <ListItem sx={{ display: 'flex', flexDirection: 'column', gap: 0.5, flex: 1, justifyContent: 'center', alignItems: 'center' }}>
-          <Typography level='body-sm'>
+          <Typography level='body-sm' mx={2}>
             Please complete the configuration and refresh the models list.
           </Typography>
           {/*<Skeleton variant='rectangular' animation={false} height={24} width={160} />*/}