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

🎨 style: Header UI Transitions & Image Detail Panel (#7653)

Browse source 
* feat: Enhance DialogImage component with image size retrieval and details panel

* feat: Improve UI transitions and responsiveness in Header, DialogImage, Nav, and SearchBar components

* fix: Correct button icon toggle in DialogImage component
This commit is contained in:
Marco Beretta 2025-06-02 13:50:44 +02:00 • committed by GitHub
parent 37c94beeac
commit aca89091d9
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
7 changed files with 235 additions and 46 deletions
Download patch file Download diff file Expand all files Collapse all files

44
client/src/components/Chat/Header.tsx
View file

@ -37,20 +37,36 @@ export default function Header() {
<div className="sticky top-0 z-10 flex h-14 w-full items-center justify-between bg-white p-2 font-semibold text-text-primary dark:bg-gray-800">
<div className="hide-scrollbar flex w-full items-center justify-between gap-2 overflow-x-auto">
<div className="mx-1 flex items-center gap-2">
{!navVisible && <OpenSidebar setNavVisible={setNavVisible} />}
{!navVisible && <HeaderNewChat />}
{<ModelSelector startupConfig={startupConfig} />}
{interfaceConfig.presets === true && interfaceConfig.modelSelect && <PresetsMenu />}
{hasAccessToBookmarks === true && <BookmarkMenu />}
{hasAccessToMultiConvo === true && <AddMultiConvo />}
{isSmallScreen && (
<>
<ExportAndShareMenu
isSharedButtonEnabled={startupConfig?.sharedLinksEnabled ?? false}
/>
<TemporaryChat />
</>
)}
<div
className={`flex items-center gap-2 ${
!isSmallScreen ? 'transition-all duration-500 ease-in-out' : ''
} ${
!navVisible
? 'translate-x-0 opacity-100'
: 'pointer-events-none translate-x-[-100px] opacity-0'
}`}
>
<OpenSidebar setNavVisible={setNavVisible} />
<HeaderNewChat />
</div>
<div
className={`flex items-center gap-2 ${
!isSmallScreen ? 'transition-all duration-500 ease-in-out' : ''
} ${!navVisible ? 'translate-x-0' : 'translate-x-[-100px]'}`}
>
<ModelSelector startupConfig={startupConfig} />
{interfaceConfig.presets === true && interfaceConfig.modelSelect && <PresetsMenu />}
{hasAccessToBookmarks === true && <BookmarkMenu />}
{hasAccessToMultiConvo === true && <AddMultiConvo />}
{isSmallScreen && (
<>
<ExportAndShareMenu
isSharedButtonEnabled={startupConfig?.sharedLinksEnabled ?? false}
/>
<TemporaryChat />
</>
)}
</div>
</div>
{!isSmallScreen && (
<div className="flex items-center gap-2">