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

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

15
client/src/components/Chat/Input/OptionsPopover.tsx
View file

@ -28,15 +28,22 @@ export default function OptionsPopover({
popoverRef,
() => closePopover(),
['dialog-template-content', 'shadcn-button', 'advanced-settings'],
(target) => {
const tagName = (target as Element)?.tagName;
(_target) => {
const target = _target as Element;
if (
target?.id === 'presets-button' ||
(target?.parentNode instanceof Element && target.parentNode.id === 'presets-button')
) {
return false;
}
const tagName = target?.tagName;
return tagName === 'path' || tagName === 'svg' || tagName === 'circle';
},
);
const localize = useLocalize();
const cardStyle =
'shadow-xl rounded-md min-w-[75px] font-normal bg-white border-black/10 border dark:bg-gray-700 text-black dark:text-white';
'shadow-xl rounded-md min-w-[75px] font-normal bg-white border-black/10 border dark:bg-gray-700 text-black dark:text-white ';
if (!visible) {
return null;
@ -45,7 +52,7 @@ export default function OptionsPopover({
return (
<Portal>
<Content sideOffset={8} align="start" ref={popoverRef} asChild>
<div className="z-0 flex w-full flex-col items-center md:px-4">
<div className="z-[70] flex w-screen flex-col items-center md:w-full md:px-4">
<div
className={cn(
cardStyle,

9
client/src/components/Chat/Input/Textarea.tsx
View file

@ -1,6 +1,7 @@
import TextareaAutosize from 'react-textarea-autosize';
import { supportsFiles } from '~/common';
import { useTextarea } from '~/hooks';
import { cn, removeFocusOutlines } from '~/utils';
export default function Textarea({ value, onChange, setText, submitMessage, endpoint }) {
const {
@ -14,8 +15,10 @@ export default function Textarea({ value, onChange, setText, submitMessage, endp
} = useTextarea({ setText, submitMessage });
const className = supportsFiles[endpoint]
? 'm-0 w-full resize-none border-0 bg-transparent py-3.5 pr-10 focus:ring-0 focus-visible:ring-0 dark:bg-transparent placeholder-black/50 dark:placeholder-white/50 pl-10 md:py-3.5 md:pr-12 md:pl-[55px]'
: 'm-0 w-full resize-none border-0 bg-transparent py-[10px] pr-10 focus:ring-0 focus-visible:ring-0 dark:bg-transparent md:py-4 md:pr-12 gizmo:md:py-3.5 gizmo:placeholder-black/50 gizmo:dark:placeholder-white/50 pl-3 md:pl-4';
? // ? 'm-0 w-full resize-none border-0 bg-transparent py-3.5 pr-10 focus:ring-0 focus-visible:ring-0 dark:bg-transparent placeholder-black/50 dark:placeholder-white/50 pl-10 md:py-3.5 md:pr-12 md:pl-[55px]'
// : 'm-0 w-full resize-none border-0 bg-transparent py-[10px] pr-10 focus:ring-0 focus-visible:ring-0 dark:bg-transparent md:py-4 md:pr-12 gizmo:md:py-3.5 gizmo:placeholder-black/50 gizmo:dark:placeholder-white/50 pl-3 md:pl-4';
'm-0 w-full resize-none border-0 bg-transparent py-3.5 pr-10 focus:ring-0 focus-visible:ring-0 dark:bg-transparent placeholder-black/50 dark:placeholder-white/50 pl-10 md:py-3.5 md:pr-12 md:pl-[55px]'
: 'm-0 w-full resize-none border-0 bg-transparent py-[10px] pr-10 focus:ring-0 focus-visible:ring-0 dark:bg-transparent md:py-3.5 md:pr-12 placeholder-black/50 dark:placeholder-white/50 pl-3 md:pl-4';
return (
<TextareaAutosize
@ -36,7 +39,7 @@ export default function Textarea({ value, onChange, setText, submitMessage, endp
placeholder={placeholder}
// className="m-0 w-full resize-none border-0 bg-transparent py-[10px] pr-10 focus:ring-0 focus-visible:ring-0 dark:bg-transparent md:py-4 md:pr-12 gizmo:md:py-3.5 gizmo:placeholder-black/50 gizmo:dark:placeholder-white/50 pl-12 gizmo:pl-10 md:pl-[46px] gizmo:md:pl-[55px]"
// className="gizmo:md:py-3.5 gizmo:placeholder-black/50 gizmo:dark:placeholder-white/50 gizmo:pl-10 gizmo:md:pl-[55px] m-0 h-auto max-h-52 w-full resize-none overflow-y-hidden border-0 bg-transparent py-[10px] pl-12 pr-10 focus:ring-0 focus-visible:ring-0 dark:bg-transparent md:py-4 md:pl-[46px] md:pr-12"
className={className}
className={cn(className, removeFocusOutlines, 'max-h-52')}
/>
);
}