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: Refine SidePanel and Textarea Styling (#2209)

Browse source 
* experimental: use TextareaAutosize wrapper with useLayoutEffect to hopefully fix random textarea jankiness

* fix(Textarea): force a resize when placeholder text changes

* style(ScrollToBottom): update styling for scroll button

* style: memoize values and improve side panel toggle states

* refactor(SidePanel): more control for toggle states, new hide panel button, and improve toggle state logic

* chore: hide resizable panel handle on smaller screens
This commit is contained in:
Danny Avila 2024-03-26 04:19:51 -04:00 • committed by GitHub
parent cb62847838
commit 718572b7c8
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
9 changed files with 87 additions and 33 deletions
Download patch file Download diff file Expand all files Collapse all files

10
client/src/components/ui/TextareaAutosize.tsx Normal file
View file

@ -0,0 +1,10 @@
import { forwardRef, useLayoutEffect, useState } from 'react';
import ReactTextareaAutosize from 'react-textarea-autosize';
import type { TextareaAutosizeProps } from 'react-textarea-autosize';
export const TextareaAutosize = forwardRef<HTMLTextAreaElement, TextareaAutosizeProps>(
(props, ref) => {
const [, setIsRerendered] = useState(false);
useLayoutEffect(() => setIsRerendered(true), []);
return <ReactTextareaAutosize {...props} ref={ref} />;
},
);

1
client/src/components/ui/index.ts
View file

@ -18,6 +18,7 @@ export * from './Table';
export * from './Tabs';
export * from './Templates';
export * from './Textarea';
export * from './TextareaAutosize';
export * from './Tooltip';
export { default as Dropdown } from './Dropdown';
export { default as FileUpload } from './FileUpload';