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

style: Minor Beta UI fixes (#1197)

Browse source 
* 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
This commit is contained in:
Danny Avila 2023-11-17 08:00:42 -05:00 • committed by GitHub
parent c64970525b
commit 1ba8d4ffa9
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
18 changed files with 171 additions and 92 deletions
Download patch file Download diff file Expand all files Collapse all files

18
client/src/components/ui/MultiSelectPop.tsx
View file

@ -1,5 +1,5 @@
import React from 'react';
import { Wrench, ArrowRight } from 'lucide-react';
import { Wrench } from 'lucide-react';
import { Root, Trigger, Content, Portal } from '@radix-ui/react-popover';
import type { TPlugin } from 'librechat-data-provider';
import MenuItem from '~/components/Chat/Menus/UI/MenuItem';
@ -19,18 +19,15 @@ type SelectDropDownProps = {
optionValueKey?: string;
};
function SelectDropDownPop({
function MultiSelectPop({
title: _title = 'Plugins',
value,
// TODO: do we need disabled here?
disabled,
setSelected,
availableValues,
showAbove = false,
showLabel = true,
containerClassName,
isSelected,
className,
optionValueKey = 'value',
}: SelectDropDownProps) {
// const localize = useLocalize();
@ -46,8 +43,9 @@ function SelectDropDownPop({
<button
data-testid="select-dropdown-button"
className={cn(
'relative flex cursor-default flex-col rounded-md border border-black/10 bg-white py-2 pl-3 pr-10 text-left focus:outline-none focus:ring-0 focus:ring-offset-0 dark:border-white/20 dark:bg-gray-800 dark:bg-gray-800 sm:text-sm',
className ?? '',
'relative flex flex-col rounded-md border border-black/10 bg-white py-2 pl-3 pr-10 text-left focus:outline-none focus:ring-0 focus:ring-offset-0 dark:border-white/20 dark:bg-gray-800 dark:bg-gray-800 sm:text-sm',
'pointer-cursor font-normal',
'hover:bg-gray-50 radix-state-open:bg-gray-50 dark:hover:bg-black/10 dark:radix-state-open:bg-black/20',
)}
>
{' '}
@ -85,7 +83,7 @@ function SelectDropDownPop({
</span>
</span>
</span>
<span className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2">
<span className="absolute inset-y-0 right-0 flex items-center pr-2">
<svg
stroke="currentColor"
fill="none"
@ -107,7 +105,7 @@ function SelectDropDownPop({
<Portal>
<Content
side="bottom"
align="start"
align="center"
className="mt-2 max-h-60 min-w-full overflow-hidden overflow-y-auto rounded-lg border border-gray-100 bg-white shadow-lg dark:border-gray-700 dark:bg-gray-900 dark:text-white"
>
{availableValues.map((option) => {
@ -144,4 +142,4 @@ function SelectDropDownPop({
);
}
export default SelectDropDownPop;
export default MultiSelectPop;