diff --git a/web/src/app/chat/input/ChatInputBar.tsx b/web/src/app/chat/input/ChatInputBar.tsx index 2c3d1598fa6..3ab25521461 100644 --- a/web/src/app/chat/input/ChatInputBar.tsx +++ b/web/src/app/chat/input/ChatInputBar.tsx @@ -854,27 +854,6 @@ export function ChatInputBar({ llmManager={llmManager} requiresImageGeneration={false} currentAssistant={selectedAssistant} - trigger={ - - } /> {retrievalEnabled && ( diff --git a/web/src/app/chat/input/LLMPopover.tsx b/web/src/app/chat/input/LLMPopover.tsx index 96cbb78ffab..f5e6df3947a 100644 --- a/web/src/app/chat/input/LLMPopover.tsx +++ b/web/src/app/chat/input/LLMPopover.tsx @@ -4,12 +4,8 @@ import { PopoverContent, PopoverTrigger, } from "@/components/ui/popover"; -import { getDisplayNameForModel } from "@/lib/hooks"; -import { - modelSupportsImageInput, - parseLlmDescriptor, - structureValue, -} from "@/lib/llm/utils"; +import { getDisplayNameForModel, LlmDescriptor } from "@/lib/hooks"; +import { modelSupportsImageInput } from "@/lib/llm/utils"; import { LLMProviderDescriptor } from "@/app/admin/configuration/llm/interfaces"; import { getProviderIcon } from "@/app/admin/configuration/llm/utils"; import { Persona } from "@/app/admin/assistants/interfaces"; @@ -50,70 +46,6 @@ export default function LLMPopover({ const [isOpen, setIsOpen] = useState(false); const { user } = useUser(); - // Memoize the options to prevent unnecessary recalculations - const { llmOptions, defaultProvider, defaultModelDisplayName } = - useMemo(() => { - const llmOptionsByProvider: { - [provider: string]: { - name: string; - value: string; - icon: React.FC<{ size?: number; className?: string }>; - }[]; - } = {}; - - const uniqueModelNames = new Set(); - - llmProviders.forEach((llmProvider) => { - if (!llmOptionsByProvider[llmProvider.provider]) { - llmOptionsByProvider[llmProvider.provider] = []; - } - - llmProvider.model_configurations.forEach((modelConfiguration) => { - if ( - !uniqueModelNames.has(modelConfiguration.name) && - modelConfiguration.is_visible - ) { - uniqueModelNames.add(modelConfiguration.name); - const options = llmOptionsByProvider[llmProvider.provider]; - if (options) { - options.push({ - name: modelConfiguration.name, - value: structureValue( - llmProvider.name, - llmProvider.provider, - modelConfiguration.name - ), - icon: getProviderIcon( - llmProvider.provider, - modelConfiguration.name - ), - }); - } - } - }); - }); - - const llmOptions = Object.entries(llmOptionsByProvider).flatMap( - ([provider, options]) => [...options] - ); - - const defaultProvider = llmProviders.find( - (llmProvider) => llmProvider.is_default_provider - ); - - const defaultModelName = defaultProvider?.default_model_name; - const defaultModelDisplayName = defaultModelName - ? getDisplayNameForModel(defaultModelName) - : null; - - return { - llmOptionsByProvider, - llmOptions, - defaultProvider, - defaultModelDisplayName, - }; - }, [llmProviders]); - const [localTemperature, setLocalTemperature] = useState( llmManager.temperature ?? 0.5 ); @@ -153,24 +85,38 @@ export default function LLMPopover({ minimize toggle flexPriority="stiff" - name={getDisplayNameForModel( - llmManager?.currentLlm.modelName || - defaultModelDisplayName || - "Models" - )} + name={getDisplayNameForModel(llmManager.currentLlm.modelName)} Icon={getProviderIcon( - llmManager?.currentLlm.provider || - defaultProvider?.provider || - "anthropic", - llmManager?.currentLlm.modelName || - defaultProvider?.default_model_name || - "claude-3-5-sonnet-20240620" + llmManager.currentLlm.provider, + llmManager.currentLlm.modelName )} tooltipContent="Switch models" /> ), - [defaultModelDisplayName, defaultProvider, llmManager?.currentLlm] + [llmManager.currentLlm] + ); + + const llmOptionsToChooseFrom = useMemo( + () => + llmProviders.flatMap((llmProvider) => + llmProvider.model_configurations + .filter( + (modelConfiguration) => + modelConfiguration.is_visible || + modelConfiguration.name === currentModelName + ) + .map((modelConfiguration) => ({ + name: llmProvider.name, + provider: llmProvider.provider, + modelName: modelConfiguration.name, + icon: getProviderIcon( + llmProvider.provider, + modelConfiguration.name + ), + })) + ), + [llmProviders] ); return ( @@ -181,61 +127,78 @@ export default function LLMPopover({ className="w-64 p-1 bg-background border border-background-200 rounded-md shadow-lg flex flex-col" >
- {llmOptions.map(({ name, icon, value }, index) => { - if ( - !requiresImageGeneration || - modelSupportsImageInput(llmProviders, name) - ) { - return ( - - ); + {llmOptionsToChooseFrom.map( + ({ modelName, provider, name, icon }, index) => { + if ( + !requiresImageGeneration || + modelSupportsImageInput(llmProviders, modelName, provider) + ) { + return ( + + ); + } + return null; } - return null; - })} + )}
{user?.preferences?.temperature_override_enabled && (
diff --git a/web/src/lib/hooks.ts b/web/src/lib/hooks.ts index ecfd8fea4a8..acc4833ddbf 100644 --- a/web/src/lib/hooks.ts +++ b/web/src/lib/hooks.ts @@ -13,11 +13,7 @@ import { errorHandlingFetcher } from "./fetcher"; import { useContext, useEffect, useMemo, useState } from "react"; import { DateRangePickerValue } from "@/components/dateRangeSelectors/AdminDateRangeSelector"; import { SourceMetadata } from "./search/interfaces"; -import { - parseLlmDescriptor, - findProviderForModel, - structureValue, -} from "./llm/utils"; +import { parseLlmDescriptor } from "./llm/utils"; import { ChatSession } from "@/app/chat/interfaces"; import { AllUsersResponse } from "./types"; import { Credential } from "./connectors/credentials"; @@ -503,7 +499,7 @@ export function useLlmManager( ); if (provider) { - return { ...model, provider: provider.name }; + return { ...model, provider: provider.provider }; } } return { name: "", provider: "", modelName: "" }; @@ -517,14 +513,7 @@ export function useLlmManager( // Manually set the LLM const updateCurrentLlm = (newLlm: LlmDescriptor) => { - const provider = - newLlm.provider || findProviderForModel(llmProviders, newLlm.modelName); - const structuredValue = structureValue( - newLlm.name, - provider, - newLlm.modelName - ); - setCurrentLlm(getValidLlmDescriptor(structuredValue)); + setCurrentLlm(newLlm); setUserHasManuallyOverriddenLLM(true); };