diff --git a/src/apps/chat/components/layout-bar/useLLMDropdown.tsx b/src/apps/chat/components/layout-bar/useLLMDropdown.tsx index 7980f9553..168bfcc27 100644 --- a/src/apps/chat/components/layout-bar/useLLMDropdown.tsx +++ b/src/apps/chat/components/layout-bar/useLLMDropdown.tsx @@ -1,5 +1,4 @@ import * as React from 'react'; -import { useShallow } from 'zustand/react/shallow'; import { Box, IconButton, ListItemButton, ListItemDecorator } from '@mui/joy'; import BuildCircleIcon from '@mui/icons-material/BuildCircle'; @@ -13,15 +12,17 @@ import { DebouncedInputMemo } from '~/common/components/DebouncedInput'; import { GoodTooltip } from '~/common/components/GoodTooltip'; import { KeyStroke } from '~/common/components/KeyStroke'; import { OptimaBarControlMethods, OptimaBarDropdownMemo, OptimaDropdownItems } from '~/common/layout/optima/bar/OptimaBarDropdown'; -import { findModelsServiceOrNull, llmsStoreActions, useModelsStore } from '~/common/stores/llms/store-llms'; +import { findModelsServiceOrNull } from '~/common/stores/llms/store-llms'; import { isDeepEqual } from '~/common/util/hooks/useDeep'; import { optimaActions, optimaOpenModels } from '~/common/layout/optima/useOptima'; +import { useAllLLMs } from '~/common/stores/llms/hooks/useAllLLMs'; +import { useDomainLLM } from '~/common/stores/llms/hooks/useDomainLLM'; function LLMDropdown(props: { dropdownRef: React.Ref, - llms: DLLM[], - chatLlmId: DLLMId | null, + llms: ReadonlyArray, + chatLlmId: undefined | DLLMId | null, setChatLlmId: (llmId: DLLMId | null) => void, placeholder?: string, }) { @@ -194,16 +195,14 @@ function LLMDropdown(props: { export function useChatLLMDropdown(dropdownRef: React.Ref) { - // external state - const { llms, chatLLMId } = useModelsStore(useShallow(state => ({ - llms: state.llms, // NOTE: we don't need a deep comparison as we reference the same array - chatLLMId: state.chatLLMId, - }))); - const chatLLMDropdown = React.useMemo( - () => , - [chatLLMId, dropdownRef, llms], - ); + // external state + const llms = useAllLLMs(); + const { domainModelId: chatLLMId, assignDomainModelId: setChatLLMId } = useDomainLLM('primaryChat', true, false); + + const chatLLMDropdown = React.useMemo(() => { + return ; + }, [chatLLMId, dropdownRef, llms, setChatLLMId]); return { chatLLMId, chatLLMDropdown }; } diff --git a/src/common/layout/optima/bar/OptimaBarDropdown.tsx b/src/common/layout/optima/bar/OptimaBarDropdown.tsx index d2185a72c..1904aaef2 100644 --- a/src/common/layout/optima/bar/OptimaBarDropdown.tsx +++ b/src/common/layout/optima/bar/OptimaBarDropdown.tsx @@ -119,7 +119,7 @@ export type OptimaBarControlMethods = { function OptimaBarDropdown(props: { // required items: OptimaDropdownItems, - value: TValue | null, + value: undefined | TValue | null, // undefined means no value is present, null means 'no/unset/force-empty' value onChange: (value: TValue | null) => void, // optional activeEndDecorator?: React.JSX.Element, @@ -161,7 +161,7 @@ function OptimaBarDropdown(props: { return (