LibreChat/client/src/components/Endpoints/EndpointSettings.tsx
Danny Avila 1ba8d4ffa9
style: Minor Beta UI fixes (#1197)
* style(Header): hide scrollbar but still allow side scroll/swipe/drag/touch

* feat: make menu buttons flexiblewith min-width, delete passed in classes, add pointer-cursor

* refactor: use conditional for visibility of plugins settings

* fix: make advanced settings popover appear over nav

* refactor(textarea): minor padding restyling, add max height

* style: make menuItem checkmark invisible instead of hidden so it takes up width space

* style: make presetsMenu trigger an icon button, remove max-width of presets except in mobile view

* style: improve advanced settings mobile styling

* feat: newchat and convo items toggle nav on small screens

* style: improve no presets view

* style: make sure toggle hover effect does not apply on smaller screens
2023-11-17 08:00:42 -05:00

50 lines
1.3 KiB
TypeScript

import { useRecoilValue } from 'recoil';
import type { TSettingsProps } from '~/common';
import { getSettings } from './Settings';
import { cn } from '~/utils';
import store from '~/store';
export default function Settings({
conversation,
setOption,
isPreset = false,
className = '',
isMultiChat = false,
}: TSettingsProps & { isMultiChat?: boolean }) {
const modelsConfig = useRecoilValue(store.modelsConfig);
if (!conversation?.endpoint) {
return null;
}
const { settings, multiViewSettings } = getSettings(isMultiChat);
const { endpoint } = conversation;
const models = modelsConfig?.[endpoint] ?? [];
const OptionComponent = settings[endpoint];
if (OptionComponent) {
return (
<div
className={cn('hide-scrollbar h-[500px] overflow-y-auto md:mb-2 md:h-[350px]', className)}
>
<OptionComponent
conversation={conversation}
setOption={setOption}
models={models}
isPreset={isPreset}
/>
</div>
);
}
const MultiViewComponent = multiViewSettings[endpoint];
if (!MultiViewComponent) {
return null;
}
return (
<div className={cn('hide-scrollbar h-[500px] overflow-y-auto md:mb-2 md:h-[350px]', className)}>
<MultiViewComponent conversation={conversation} models={models} isPreset={isPreset} />
</div>
);
}