File size: 1,745 Bytes
3b6afc0 |
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 |
import React, { useState } from 'react';
import { Button } from './Button.tsx';
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuLabel,
DropdownMenuRadioGroup,
DropdownMenuSeparator,
DropdownMenuTrigger,
DropdownMenuRadioItem,
} from './DropdownMenu.tsx';
import store from '~/store';
import { useRecoilValue } from 'recoil';
import { localize } from '~/localization/Translation';
const ModelSelect = ({ model, onChange, availableModels, ...props }) => {
const [menuOpen, setMenuOpen] = useState(false);
const lang = useRecoilValue(store.lang);
return (
<DropdownMenu open={menuOpen} onOpenChange={setMenuOpen}>
<DropdownMenuTrigger asChild>
<Button {...props}>
<span className="w-full text-center text-xs font-medium font-normal">
{localize(lang, 'com_ui_model')}: {model}
</span>
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent
className="w-56 dark:bg-gray-700"
onCloseAutoFocus={(event) => event.preventDefault()}
>
<DropdownMenuLabel className="dark:text-gray-300">
{localize(lang, 'com_ui_select_model')}
</DropdownMenuLabel>
<DropdownMenuSeparator />
<DropdownMenuRadioGroup value={model} onValueChange={onChange} className="overflow-y-auto">
{availableModels.map((model) => (
<DropdownMenuRadioItem
key={model}
value={model}
className="dark:font-semibold dark:text-gray-100 dark:hover:bg-gray-800"
>
{model}
</DropdownMenuRadioItem>
))}
</DropdownMenuRadioGroup>
</DropdownMenuContent>
</DropdownMenu>
);
};
export default ModelSelect;
|