LLMs: port the llm dropdown

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<OptimaBarControlMethods>,
-  llms: DLLM[],
-  chatLlmId: DLLMId | null,
+  llms: ReadonlyArray<DLLM>,
+  chatLlmId: undefined | DLLMId | null,
   setChatLlmId: (llmId: DLLMId | null) => void,
   placeholder?: string,
 }) {
@@ -194,16 +195,14 @@ function LLMDropdown(props: {
 
 
 export function useChatLLMDropdown(dropdownRef: React.Ref<OptimaBarControlMethods>) {
-  // 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(
-    () => <LLMDropdown dropdownRef={dropdownRef} llms={llms} chatLlmId={chatLLMId} setChatLlmId={llmsStoreActions().setChatLLMId} />,
-    [chatLLMId, dropdownRef, llms],
-  );
+  // external state
+  const llms = useAllLLMs();
+  const { domainModelId: chatLLMId, assignDomainModelId: setChatLLMId } = useDomainLLM('primaryChat', true, false);
+
+  const chatLLMDropdown = React.useMemo(() => {
+    return <LLMDropdown dropdownRef={dropdownRef} llms={llms} chatLlmId={chatLLMId} setChatLlmId={setChatLLMId} />;
+  }, [chatLLMId, dropdownRef, llms, setChatLLMId]);
 
   return { chatLLMId, chatLLMDropdown };
 }

src/common/layout/optima/bar/OptimaBarDropdown.tsx

@@ -119,7 +119,7 @@ export type OptimaBarControlMethods = {
 function OptimaBarDropdown<TValue extends string>(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<TValue extends string>(props: {
   return (
     <Select
       variant='plain'
-      value={props.value}
+      value={props.value ?? null /* remove 'undefined' as an option */}
       onChange={handleOnChange}
       placeholder={props.placeholder}
       listboxOpen={listboxOpen}

src/common/stores/llms/hooks/useAllLLMs.ts

@@ -0,0 +1,7 @@
+import type { DLLM } from '../llms.types';
+import { useModelsStore } from '../store-llms';
+
+
+export function useAllLLMs(): ReadonlyArray<DLLM> {
+  return useModelsStore(state => state.llms);
+}