File size: 3,861 Bytes
f0743f4 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 | import React, { useMemo } from 'react';
import type { ModelSelectorProps } from '~/common';
import { ModelSelectorProvider, useModelSelectorContext } from './ModelSelectorContext';
import { ModelSelectorChatProvider } from './ModelSelectorChatContext';
import {
renderModelSpecs,
renderEndpoints,
renderSearchResults,
renderCustomGroups,
} from './components';
import { getSelectedIcon, getDisplayValue } from './utils';
import { CustomMenu as Menu } from './CustomMenu';
import DialogManager from './DialogManager';
import { useLocalize } from '~/hooks';
function ModelSelectorContent() {
const localize = useLocalize();
const {
// LibreChat
agentsMap,
modelSpecs,
mappedEndpoints,
endpointsConfig,
// State
searchValue,
searchResults,
selectedValues,
// Functions
setSearchValue,
setSelectedValues,
// Dialog
keyDialogOpen,
onOpenChange,
keyDialogEndpoint,
} = useModelSelectorContext();
const selectedIcon = useMemo(
() =>
getSelectedIcon({
mappedEndpoints: mappedEndpoints ?? [],
selectedValues,
modelSpecs,
endpointsConfig,
}),
[mappedEndpoints, selectedValues, modelSpecs, endpointsConfig],
);
const selectedDisplayValue = useMemo(
() =>
getDisplayValue({
localize,
agentsMap,
modelSpecs,
selectedValues,
mappedEndpoints,
}),
[localize, agentsMap, modelSpecs, selectedValues, mappedEndpoints],
);
const trigger = (
<button
className="my-1 flex h-10 w-full max-w-[70vw] items-center justify-center gap-2 rounded-xl border border-border-light bg-surface-secondary px-3 py-2 text-sm text-text-primary hover:bg-surface-tertiary"
aria-label={localize('com_ui_select_model')}
>
{selectedIcon && React.isValidElement(selectedIcon) && (
<div className="flex flex-shrink-0 items-center justify-center overflow-hidden">
{selectedIcon}
</div>
)}
<span className="flex-grow truncate text-left">{selectedDisplayValue}</span>
</button>
);
return (
<div className="relative flex w-full max-w-md flex-col items-center gap-2">
<Menu
values={selectedValues}
onValuesChange={(values: Record<string, any>) => {
setSelectedValues({
endpoint: values.endpoint || '',
model: values.model || '',
modelSpec: values.modelSpec || '',
});
}}
onSearch={(value) => setSearchValue(value)}
combobox={<input placeholder={localize('com_endpoint_search_models')} />}
trigger={trigger}
>
{searchResults ? (
renderSearchResults(searchResults, localize, searchValue)
) : (
<>
{/* Render ungrouped modelSpecs (no group field) */}
{renderModelSpecs(
modelSpecs?.filter((spec) => !spec.group) || [],
selectedValues.modelSpec || '',
)}
{/* Render endpoints (will include grouped specs matching endpoint names) */}
{renderEndpoints(mappedEndpoints ?? [])}
{/* Render custom groups (specs with group field not matching any endpoint) */}
{renderCustomGroups(modelSpecs || [], mappedEndpoints ?? [])}
</>
)}
</Menu>
<DialogManager
keyDialogOpen={keyDialogOpen}
onOpenChange={onOpenChange}
endpointsConfig={endpointsConfig || {}}
keyDialogEndpoint={keyDialogEndpoint || undefined}
/>
</div>
);
}
export default function ModelSelector({ startupConfig }: ModelSelectorProps) {
return (
<ModelSelectorChatProvider>
<ModelSelectorProvider startupConfig={startupConfig}>
<ModelSelectorContent />
</ModelSelectorProvider>
</ModelSelectorChatProvider>
);
}
|