24 lines
1.1 KiB
TypeScript
24 lines
1.1 KiB
TypeScript
import { FC } from 'react';
|
|
import { observer } from 'mobx-react-lite';
|
|
import { Dropdown, Option, PresenceBadge } from '@fluentui/react-components';
|
|
import commonStore from '../stores/commonStore';
|
|
|
|
export const ConfigSelector: FC<{ size?: 'small' | 'medium' | 'large' }> = observer(({ size }) => {
|
|
return <Dropdown size={size} style={{ minWidth: 0 }} listbox={{ style: { minWidth: 'fit-content' } }}
|
|
value={commonStore.getCurrentModelConfig().name}
|
|
selectedOptions={[commonStore.currentModelConfigIndex.toString()]}
|
|
onOptionSelect={(_, data) => {
|
|
if (data.optionValue)
|
|
commonStore.setCurrentConfigIndex(Number(data.optionValue));
|
|
}}>
|
|
{commonStore.modelConfigs.map((config, index) =>
|
|
<Option key={index} value={index.toString()} text={config.name}>
|
|
<div className="flex justify-between grow">
|
|
{config.name}
|
|
{commonStore.modelSourceList.find(item => item.name === config.modelParameters.modelName)?.isComplete
|
|
&& <PresenceBadge status="available" />}
|
|
</div>
|
|
</Option>
|
|
)}
|
|
</Dropdown>;
|
|
}); |