| | |
| | | import { Fragment } from 'react' |
| | | import type { FC } from 'react' |
| | | import { Popover, PopoverButton, PopoverPanel, Transition } from '@headlessui/react' |
| | | import { Popover, Transition } from '@headlessui/react' |
| | | import { useTranslation } from 'react-i18next' |
| | | import { |
| | | RiCheckLine, |
| | |
| | | } from '@remixicon/react' |
| | | import { PreferredProviderTypeEnum } from '../declarations' |
| | | import Button from '@/app/components/base/button' |
| | | import cn from '@/utils/classnames' |
| | | |
| | | type SelectorProps = { |
| | | value?: string |
| | |
| | | |
| | | return ( |
| | | <Popover className='relative'> |
| | | <PopoverButton as='div'> |
| | | <Popover.Button> |
| | | { |
| | | ({ open }) => ( |
| | | <Button className={cn( |
| | | 'h-6 w-6 rounded-md px-0', |
| | | open && 'bg-components-button-secondary-bg-hover', |
| | | )}> |
| | | <RiMoreFill className='h-3 w-3' /> |
| | | <Button className={` |
| | | px-0 w-6 h-6 bg-white rounded-md |
| | | ${open && '!bg-gray-100'} |
| | | `}> |
| | | <RiMoreFill className='w-3 h-3 text-gray-700' /> |
| | | </Button> |
| | | ) |
| | | } |
| | | </PopoverButton> |
| | | </Popover.Button> |
| | | <Transition |
| | | as={Fragment} |
| | | leave='transition ease-in duration-100' |
| | | leaveFrom='opacity-100' |
| | | leaveTo='opacity-0' |
| | | > |
| | | <PopoverPanel className='absolute right-0 top-7 z-10 w-[144px] rounded-lg border-[0.5px] border-components-panel-border bg-components-panel-bg shadow-lg'> |
| | | <Popover.Panel className='absolute top-7 right-0 w-[144px] bg-white border-[0.5px] border-gray-200 rounded-lg shadow-lg z-10'> |
| | | <div className='p-1'> |
| | | <div className='px-3 pb-1 pt-2 text-sm font-medium text-text-secondary'>{t('common.modelProvider.card.priorityUse')}</div> |
| | | <div className='px-3 pt-2 pb-1 text-sm font-medium text-gray-700'>{t('common.modelProvider.card.priorityUse')}</div> |
| | | { |
| | | options.map(option => ( |
| | | <PopoverButton as={Fragment} key={option.key}> |
| | | <Popover.Button as={Fragment} key={option.key}> |
| | | <div |
| | | className='flex h-9 cursor-pointer items-center justify-between rounded-lg px-3 text-sm text-text-secondary hover:bg-components-panel-on-panel-item-bg-hover' |
| | | className='flex items-center justify-between px-3 h-9 text-sm text-gray-700 rounded-lg cursor-pointer hover:bg-gray-50' |
| | | onClick={() => onSelect(option.key)} |
| | | > |
| | | <div className='grow'>{option.text}</div> |
| | | {value === option.key && <RiCheckLine className='h-4 w-4 text-text-accent' />} |
| | | {value === option.key && <RiCheckLine className='w-4 h-4 text-primary-600' />} |
| | | </div> |
| | | </PopoverButton> |
| | | </Popover.Button> |
| | | )) |
| | | } |
| | | </div> |
| | | </PopoverPanel> |
| | | </Popover.Panel> |
| | | </Transition> |
| | | </Popover> |
| | | ) |