diff --git a/src/common/stores/store-ui.ts b/src/common/stores/store-ui.ts index ff6d67bcd..c80a6f312 100644 --- a/src/common/stores/store-ui.ts +++ b/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()( showPersonaFinder: false, setShowPersonaFinder: (showPersonaFinder: boolean) => set({ showPersonaFinder }), + showModelsHidden: false, + setShowModelsHidden: (showModelsHidden: boolean) => set({ showModelsHidden }), + composerQuickButton: 'beam', setComposerQuickButton: (composerQuickButton: 'off' | 'call' | 'beam') => set({ composerQuickButton }), diff --git a/src/modules/llms/models-modal/ModelsConfiguratorModal.tsx b/src/modules/llms/models-modal/ModelsConfiguratorModal.tsx index d5ba5aa65..bd761bab5 100644 --- a/src/modules/llms/models-modal/ModelsConfiguratorModal.tsx +++ b/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 ; if (!hasAnyServices) return ; + + // Show checkbox for filtering hidden models when we have LLMs + if (isTabSetup && hasLLMs) + return ( + + setShowModelsHidden(e.target.checked)} + sx={{ my: 'auto', fontSize: 'sm' }} + /> + + ); + return undefined; - // if (isMultiServices) { - // return ( - // 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 && ( Dialog) overflow: 'auto' - minHeight: '6rem', + minHeight: '8rem', overflowY: 'auto', // style (list variant=outlined) diff --git a/src/modules/llms/models-modal/ModelsList.tsx b/src/modules/llms/models-modal/ModelsList.tsx index 302f533ed..0021dbcde 100644 --- a/src/modules/llms/models-modal/ModelsList.tsx +++ b/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 ( {modelItems.length > 0 ? modelItems : ( - + Please complete the configuration and refresh the models list. {/**/}