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: 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;

25
client/src/components/ui/SelectDropDownPop.tsx
View file

@ -17,12 +17,6 @@ type SelectDropDownProps = {
showLabel?: boolean;
iconSide?: 'left' | 'right';
renderOption?: () => React.ReactNode;
containerClassName?: string;
currentValueClass?: string;
optionsListClass?: string;
optionsClass?: string;
subContainerClassName?: string;
className?: string;
};
function SelectDropDownPop({
@ -33,10 +27,6 @@ function SelectDropDownPop({
showAbove = false,
showLabel = true,
emptyTitle = false,
containerClassName,
currentValueClass,
subContainerClassName,
className,
}: SelectDropDownProps) {
const localize = useLocalize();
const transitionProps = { className: 'top-full mt-3' };
@ -54,14 +44,13 @@ function SelectDropDownPop({
return (
<Root>
<div className={cn('flex items-center justify-center gap-2 ', containerClassName ?? '')}>
<div className={cn('relative w-full', subContainerClassName ?? '')}>
<div className={'flex items-center justify-center gap-2 '}>
<div className={'relative w-full'}>
<Trigger asChild>
<button
data-testid="select-dropdown-button"
className={cn(
'relative flex w-full 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 sm:text-sm',
className ?? '',
'pointer-cursor 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 sm:text-sm',
'hover:bg-gray-50 radix-state-open:bg-gray-50 dark:hover:bg-black/10 dark:radix-state-open:bg-black/20',
)}
>
@ -69,12 +58,12 @@ function SelectDropDownPop({
{showLabel && (
<label className="block text-xs text-gray-700 dark:text-gray-500 ">{title}</label>
)}
<span className="inline-flex w-full truncate">
<span className="inline-flex w-full ">
<span
className={cn(
'flex h-6 items-center gap-1 truncate text-sm text-gray-900 dark:text-white',
'flex h-6 items-center gap-1 text-sm text-gray-900 dark:text-white',
!showLabel ? 'text-xs' : '',
currentValueClass ?? '',
'min-w-[75px] font-normal',
)}
>
{/* {!showLabel && !emptyTitle && (
@ -83,7 +72,7 @@ function SelectDropDownPop({
{typeof value !== 'string' && value ? value?.label ?? '' : value ?? ''}
</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"