Andreas/LibreChat
1
0
Fork 0
mirror of https://github.com/danny-avila/LibreChat.git synced 2025-12-19 18:00:15 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions 4

style: mobile optimizations, use fixed dialogs, and prevent auto-scroll for presets (#534)

Browse source 
* style(client): adjust height and add overflow to EditPresetDialog, AgentSettings, and Settings components
style(client): adjust size and add overflow to NewConversationMenu and PresetItems components
style(ui): add overflow to DialogContent component

* style(Settings.jsx): change height of settings component to md:h-[350px] h-[490px]
This commit is contained in:
Danny Avila 2023-06-18 11:24:22 -04:00 • committed by GitHub
parent 4f47da8f0d
commit ac537b96f6
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
10 changed files with 14 additions and 16 deletions
Download patch file Download diff file Expand all files Collapse all files

2
client/src/components/Endpoints/BingAI/Settings.jsx
View file

@ -43,7 +43,7 @@ function Settings(props) {
}, [debouncedContext]); }, [debouncedContext]);
return ( return (
<div className="max-h-[350px] overflow-y-auto"> <div className="md:h-[350px] h-[490px] overflow-y-auto">
<div className="grid gap-6 sm:grid-cols-2"> <div className="grid gap-6 sm:grid-cols-2">
<div className="col-span-1 flex flex-col items-center justify-start gap-6"> <div className="col-span-1 flex flex-col items-center justify-start gap-6">
<div className="grid w-full items-center gap-2"> <div className="grid w-full items-center gap-2">

4
client/src/components/Endpoints/EditPresetDialog.jsx
View file

@ -168,9 +168,9 @@ const EditPresetDialog = ({ open, onOpenChange, preset: _preset, title }) => {
<Dialog open={open} onOpenChange={onOpenChange}> <Dialog open={open} onOpenChange={onOpenChange}>
<DialogTemplate <DialogTemplate
title={`${title || 'Edit Preset'} - ${preset?.title}`} title={`${title || 'Edit Preset'} - ${preset?.title}`}
className="max-w-full sm:max-w-4xl" className="max-w-full sm:max-w-4xl h-[675px] "
main={ main={
<div className="flex w-full flex-col items-center gap-2"> <div className="flex w-full flex-col items-center gap-2 md:h-[475px]">
<div className="grid w-full gap-6 sm:grid-cols-2"> <div className="grid w-full gap-6 sm:grid-cols-2">
<div className="col-span-1 flex flex-col items-start justify-start gap-2"> <div className="col-span-1 flex flex-col items-start justify-start gap-2">
<Label htmlFor="chatGptLabel" className="text-left text-sm font-medium"> <Label htmlFor="chatGptLabel" className="text-left text-sm font-medium">

6
client/src/components/Endpoints/Google/Settings.jsx
View file

@ -27,10 +27,8 @@ function Settings(props) {
topP, topP,
topK, topK,
maxOutputTokens, maxOutputTokens,
setOption, setOption
edit = false
} = props; } = props;
const maxHeight = edit ? 'max-h-[305px]' : 'max-h-[350px]';
const endpointsConfig = useRecoilValue(store.endpointsConfig); const endpointsConfig = useRecoilValue(store.endpointsConfig);
const setModel = setOption('model'); const setModel = setOption('model');
@ -46,7 +44,7 @@ function Settings(props) {
const codeChat = model.startsWith('codechat-'); const codeChat = model.startsWith('codechat-');
return ( return (
<div className={`${maxHeight} min-h-[200px] overflow-y-auto`}> <div className={`md:h-[350px] h-[490px] overflow-y-auto`}>
<div className="grid gap-6 sm:grid-cols-2"> <div className="grid gap-6 sm:grid-cols-2">
<div className="col-span-1 flex flex-col items-center justify-start gap-6"> <div className="col-span-1 flex flex-col items-center justify-start gap-6">
<div className="grid w-full items-center gap-2"> <div className="grid w-full items-center gap-2">

2
client/src/components/Endpoints/OpenAI/Settings.jsx
View file

@ -43,7 +43,7 @@ function Settings(props) {
const models = endpointsConfig?.[endpoint]?.['availableModels'] || []; const models = endpointsConfig?.[endpoint]?.['availableModels'] || [];
return ( return (
<div className="max-h-[350px] overflow-y-auto"> <div className="md:h-[350px] h-[490px] overflow-y-auto">
<div className="grid gap-6 sm:grid-cols-2"> <div className="grid gap-6 sm:grid-cols-2">
<div className="col-span-1 flex flex-col items-center justify-start gap-6"> <div className="col-span-1 flex flex-col items-center justify-start gap-6">
<div className="grid w-full items-center gap-2"> <div className="grid w-full items-center gap-2">

2
client/src/components/Endpoints/Plugins/AgentSettings.jsx
View file

@ -46,7 +46,7 @@ function Settings(props) {
const models = endpointsConfig?.[endpoint]?.['availableModels'] || []; const models = endpointsConfig?.[endpoint]?.['availableModels'] || [];
return ( return (
<div className="max-h-[350px] min-h-[305px] overflow-y-auto"> <div className="md:h-[350px] h-[490px] overflow-y-auto">
<div className="grid gap-6 sm:grid-cols-2"> <div className="grid gap-6 sm:grid-cols-2">
<div className="col-span-1 flex flex-col items-center justify-start gap-6"> <div className="col-span-1 flex flex-col items-center justify-start gap-6">
<div className="grid w-full items-center gap-2"> <div className="grid w-full items-center gap-2">

2
client/src/components/Endpoints/Plugins/Settings.jsx
View file

@ -47,7 +47,7 @@ function Settings(props) {
const models = endpointsConfig?.[endpoint]?.['availableModels'] || []; const models = endpointsConfig?.[endpoint]?.['availableModels'] || [];
return ( return (
<div className="max-h-[350px] min-h-[305px] overflow-y-auto"> <div className="md:h-[350px] h-[490px] overflow-y-auto">
<div className="grid gap-6 sm:grid-cols-2"> <div className="grid gap-6 sm:grid-cols-2">
<div className="col-span-1 flex flex-col items-center justify-start gap-6"> <div className="col-span-1 flex flex-col items-center justify-start gap-6">
<div className="grid w-full items-center gap-2"> <div className="grid w-full items-center gap-2">

4
client/src/components/Input/NewConversationMenu/PresetItem.jsx
View file

@ -50,8 +50,8 @@ export default function PresetItem({ preset = {}, value, onChangePreset, onDelet
className="group dark:font-semibold dark:text-gray-100 dark:hover:bg-gray-800" className="group dark:font-semibold dark:text-gray-100 dark:hover:bg-gray-800"
> >
{icon} {icon}
{preset?.title} <small className="text-[11px]">{preset?.title}</small>
<small className="ml-2">({getPresetTitle()})</small> <small className="ml-2 text-[10px]">({getPresetTitle()})</small>
<div className="flex w-4 flex-1" /> <div className="flex w-4 flex-1" />
<button <button
className="invisible m-0 mr-1 rounded-md p-2 text-gray-400 hover:text-gray-700 group-hover:visible dark:text-gray-400 dark:hover:text-gray-200 " className="invisible m-0 mr-1 rounded-md p-2 text-gray-400 hover:text-gray-700 group-hover:visible dark:text-gray-400 dark:hover:text-gray-200 "

2
client/src/components/Input/NewConversationMenu/PresetItems.jsx
View file

@ -6,7 +6,7 @@ export default function PresetItems({ presets, onSelect, onChangePreset, onDelet
<> <>
{presets.map((preset) => ( {presets.map((preset) => (
<PresetItem <PresetItem
key={preset?.presetId} key={preset?.presetId ?? Math.random()}
value={preset} value={preset}
onSelect={onSelect} onSelect={onSelect}
onChangePreset={onChangePreset} onChangePreset={onChangePreset}

4
client/src/components/Input/NewConversationMenu/index.jsx
View file

@ -153,7 +153,7 @@ export default function NewConversationMenu() {
</Button> </Button>
</DropdownMenuTrigger> </DropdownMenuTrigger>
<DropdownMenuContent <DropdownMenuContent
className="min-w-[300px] dark:bg-gray-900 z-[100]" className="w-96 dark:bg-gray-900 z-[100]"
onCloseAutoFocus={(event) => event.preventDefault()} onCloseAutoFocus={(event) => event.preventDefault()}
> >
<DropdownMenuLabel <DropdownMenuLabel
@ -217,7 +217,7 @@ export default function NewConversationMenu() {
<DropdownMenuSeparator /> <DropdownMenuSeparator />
<DropdownMenuRadioGroup <DropdownMenuRadioGroup
onValueChange={onSelectPreset} onValueChange={onSelectPreset}
className={cn('overflow-y-auto', showEndpoints ? 'max-h-[180px]' : 'max-h-[315px]')} className={cn('overflow-y-auto overflow-x-hidden', showEndpoints ? 'max-h-[210px]' : 'max-h-[315px]')}
> >
{showPresets && {showPresets &&
(presets.length ? ( (presets.length ? (

2
client/src/components/ui/Dialog.tsx
View file

@ -42,7 +42,7 @@ const DialogContent = React.forwardRef<
<DialogPrimitive.Content <DialogPrimitive.Content
ref={ref} ref={ref}
className={cn( className={cn(
'animate-in data-[state=open]:fade-in-90 data-[state=open]:slide-in-from-bottom-10 sm:zoom-in-90 data-[state=open]:sm:slide-in-from-bottom-0 fixed z-[999] grid w-full gap-4 rounded-b-lg bg-white pb-6 sm:rounded-lg md:w-[680px]', 'animate-in data-[state=open]:fade-in-90 data-[state=open]:slide-in-from-bottom-10 sm:zoom-in-90 data-[state=open]:sm:slide-in-from-bottom-0 fixed z-[999] grid w-full gap-4 rounded-b-lg bg-white pb-6 sm:rounded-lg md:w-[680px] overflow-y-auto',
'dark:bg-slate-900', 'dark:bg-slate-900',
className className
)} )}