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

🪄 style: Improved Input Collapse UI (#10659)

Browse source 
* feat: shift collapse chevron inside ChatForm input area

* feat: add soft gradient on bottom of collapsed text input so there isn't a hard cut off when text overflows

* feat: add better scroll bar behavior for main chat input

* fix: smooth out purple gradient for temporary chats

* feat: better colors for gradient

* feat: use blur instead of colors

* chore: address copilot comments
This commit is contained in:
Dustin Healy 2025-11-25 14:02:52 -08:00 • committed by GitHub
parent 30df16f5b5
commit 8b7af65265
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 63 additions and 30 deletions
Download patch file Download diff file Expand all files Collapse all files

73
client/src/components/Chat/Input/ChatForm.tsx
View file

@ -260,37 +260,50 @@ const ChatForm = memo(({ index = 0 }: { index?: number }) => {
<FileFormChat conversation={conversation} />
{endpoint && (
<div className={cn('flex', isRTL ? 'flex-row-reverse' : 'flex-row')}>
<TextareaAutosize
{...registerProps}
ref={(e) => {
ref(e);
(textAreaRef as React.MutableRefObject<HTMLTextAreaElement | null>).current = e;
}}
disabled={disableInputs || isNotAppendable}
onPaste={handlePaste}
onKeyDown={handleKeyDown}
onKeyUp={handleKeyUp}
onCompositionStart={handleCompositionStart}
onCompositionEnd={handleCompositionEnd}
id={mainTextareaId}
tabIndex={0}
data-testid="text-input"
rows={1}
onFocus={() => {
handleFocusOrClick();
setIsTextAreaFocused(true);
}}
onBlur={setIsTextAreaFocused.bind(null, false)}
aria-label={localize('com_ui_message_input')}
onClick={handleFocusOrClick}
style={{ height: 44, overflowY: 'auto' }}
className={cn(
baseClasses,
removeFocusRings,
'transition-[max-height] duration-200 disabled:cursor-not-allowed',
<div className="relative flex-1">
<TextareaAutosize
{...registerProps}
ref={(e) => {
ref(e);
(textAreaRef as React.MutableRefObject<HTMLTextAreaElement | null>).current =
e;
}}
disabled={disableInputs || isNotAppendable}
onPaste={handlePaste}
onKeyDown={handleKeyDown}
onKeyUp={handleKeyUp}
onCompositionStart={handleCompositionStart}
onCompositionEnd={handleCompositionEnd}
id={mainTextareaId}
tabIndex={0}
data-testid="text-input"
rows={1}
onFocus={() => {
handleFocusOrClick();
setIsTextAreaFocused(true);
}}
onBlur={setIsTextAreaFocused.bind(null, false)}
aria-label={localize('com_ui_message_input')}
onClick={handleFocusOrClick}
style={{ height: 44, overflowY: 'auto' }}
className={cn(
baseClasses,
removeFocusRings,
'scrollbar-hover transition-[max-height] duration-200 disabled:cursor-not-allowed',
)}
/>
{isCollapsed && (
<div
className="pointer-events-none absolute bottom-0 left-0 right-0 h-10 transition-all duration-200"
style={{
backdropFilter: 'blur(2px)',
WebkitMaskImage: 'linear-gradient(to top, black 15%, transparent 75%)',
maskImage: 'linear-gradient(to top, black 15%, transparent 75%)',
}}
/>
)}
/>
<div className="flex flex-col items-start justify-start pt-1.5">
</div>
<div className="flex flex-col items-start justify-start pr-2.5 pt-1.5">
<CollapseChat
isCollapsed={isCollapsed}
isScrollable={isMoreThanThreeRows}

20
client/src/style.css
View file

@ -1487,6 +1487,26 @@ button {
background-color: transparent;
}
/* Show scrollbar only on hover */
.scrollbar-hover {
scrollbar-width: thin;
scrollbar-color: transparent transparent;
}
.scrollbar-hover:hover {
scrollbar-color: var(--border-medium) transparent;
}
.scrollbar-hover::-webkit-scrollbar-thumb {
background-color: transparent;
transition: background-color 0.3s ease 0.5s;
}
.scrollbar-hover:hover::-webkit-scrollbar-thumb {
background-color: var(--border-medium);
transition-delay: 0s;
}
body,
html {
height: 100%;