| import { useState, useMemo } from 'react'; |
| import { OptionTypes } from 'librechat-data-provider'; |
| import type { DynamicSettingProps } from 'librechat-data-provider'; |
| import { Label, Switch, HoverCard, HoverCardTrigger } from '~/components/ui'; |
| import { useLocalize, useParameterEffects } from '~/hooks'; |
| import { useChatContext } from '~/Providers'; |
| import OptionHover from './OptionHover'; |
| import { ESide } from '~/common'; |
|
|
| function DynamicSwitch({ |
| label, |
| settingKey, |
| defaultValue, |
| description, |
| columnSpan, |
| setOption, |
| optionType, |
| readonly = false, |
| showDefault = true, |
| labelCode, |
| descriptionCode, |
| conversation, |
| }: DynamicSettingProps) { |
| const localize = useLocalize(); |
| const { preset } = useChatContext(); |
| const [inputValue, setInputValue] = useState<boolean>(!!(defaultValue as boolean | undefined)); |
| useParameterEffects({ |
| preset, |
| settingKey, |
| defaultValue, |
| conversation, |
| inputValue, |
| setInputValue, |
| preventDelayedUpdate: true, |
| }); |
|
|
| const selectedValue = useMemo(() => { |
| if (optionType === OptionTypes.Custom) { |
| |
| return inputValue; |
| } |
|
|
| return conversation?.[settingKey] ?? defaultValue; |
| }, [conversation, defaultValue, optionType, settingKey, inputValue]); |
|
|
| const handleCheckedChange = (checked: boolean) => { |
| if (optionType === OptionTypes.Custom) { |
| |
| setInputValue(checked); |
| return; |
| } |
| setOption(settingKey)(checked); |
| }; |
|
|
| return ( |
| <div |
| className={`flex flex-col items-center justify-start gap-6 ${ |
| columnSpan ? `col-span-${columnSpan}` : 'col-span-full' |
| }`} |
| > |
| <HoverCard openDelay={300}> |
| <HoverCardTrigger className="grid w-full items-center gap-2"> |
| <div className="flex justify-between"> |
| <Label |
| htmlFor={`${settingKey}-dynamic-switch`} |
| className="text-left text-sm font-medium" |
| > |
| {labelCode ? localize(label ?? '') || label : label ?? settingKey}{' '} |
| {showDefault && ( |
| <small className="opacity-40"> |
| ({localize('com_endpoint_default')}: {defaultValue ? 'com_ui_on' : 'com_ui_off'}) |
| </small> |
| )} |
| </Label> |
| </div> |
| <Switch |
| id={`${settingKey}-dynamic-switch`} |
| checked={selectedValue} |
| onCheckedChange={handleCheckedChange} |
| disabled={readonly} |
| className="flex" |
| /> |
| </HoverCardTrigger> |
| {description && ( |
| <OptionHover |
| description={descriptionCode ? localize(description) || description : description} |
| side={ESide.Left} |
| /> |
| )} |
| </HoverCard> |
| </div> |
| ); |
| } |
|
|
| export default DynamicSwitch; |
|
|
