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

🪟 feat: Make Chat Header Transparent (#11122)

Browse source 
* feat: Make top bar transparent

* style(AddMultiConvo): update PlusCircle icon size for consistency

* refactor(Header): use semantic presentation token for header gradient

* style: update buttons background color to use presentation

---------

Co-authored-by: Marco Beretta <81851188+berry-13@users.noreply.github.com>
This commit is contained in:
Joel Hirzel 2025-12-29 16:47:34 +01:00 • committed by GitHub
parent d0835d5222
commit 29275cdc2a
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
7 changed files with 9 additions and 9 deletions
Download patch file Download diff file Expand all files Collapse all files

4
client/src/components/Chat/AddMultiConvo.tsx
View file

@ -40,9 +40,9 @@ function AddMultiConvo() {
aria-label={localize('com_ui_add_multi_conversation')}
onClick={clickHandler}
data-testid="add-multi-convo-button"
className="inline-flex size-10 flex-shrink-0 items-center justify-center rounded-xl border border-border-light bg-transparent text-text-primary transition-all ease-in-out hover:bg-surface-tertiary disabled:pointer-events-none disabled:opacity-50 radix-state-open:bg-surface-tertiary"
className="inline-flex size-10 flex-shrink-0 items-center justify-center rounded-xl border border-border-light bg-presentation text-text-primary transition-all ease-in-out hover:bg-surface-tertiary disabled:pointer-events-none disabled:opacity-50 radix-state-open:bg-surface-tertiary"
>
<PlusCircle size={16} aria-hidden="true" />
<PlusCircle className="icon-lg" aria-hidden="true" />
</TooltipAnchor>
);
}

2
client/src/components/Chat/ChatView.tsx
View file

@ -92,7 +92,7 @@ function ChatView({ index = 0 }: { index?: number }) {
<ChatContext.Provider value={chatHelpers}>
<AddedChatContext.Provider value={addedChatHelpers}>
<Presentation>
<div className="flex h-full w-full flex-col">
<div className="relative flex h-full w-full flex-col">
{!isLoading && <Header />}
<>
<div

2
client/src/components/Chat/ExportAndShareMenu.tsx
View file

@ -81,7 +81,7 @@ export default function ExportAndShareMenu({
<Ariakit.MenuButton
id="export-menu-button"
aria-label="Export options"
className="inline-flex size-10 flex-shrink-0 items-center justify-center rounded-xl border border-border-light bg-transparent text-text-primary transition-all ease-in-out hover:bg-surface-tertiary disabled:pointer-events-none disabled:opacity-50 radix-state-open:bg-surface-tertiary"
className="inline-flex size-10 flex-shrink-0 items-center justify-center rounded-xl border border-border-light bg-presentation text-text-primary transition-all ease-in-out hover:bg-surface-tertiary disabled:pointer-events-none disabled:opacity-50 radix-state-open:bg-surface-tertiary"
>
<Share2
className="icon-lg text-text-primary"

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

@ -38,7 +38,7 @@ export default function Header() {
const isSmallScreen = useMediaQuery('(max-width: 768px)');
return (
<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="via-presentation/70 md:from-presentation/80 md:via-presentation/50 2xl:from-presentation/0 absolute top-0 z-10 flex h-14 w-full items-center justify-between bg-gradient-to-b from-presentation to-transparent p-2 font-semibold text-text-primary 2xl:via-transparent">
<div className="hide-scrollbar flex w-full items-center justify-between gap-2 overflow-x-auto">
<div className="mx-1 flex items-center">
<AnimatePresence initial={false}>

2
client/src/components/Chat/Menus/BookmarkMenu.tsx
View file

@ -170,7 +170,7 @@ const BookmarkMenu: FC = () => {
id="bookmark-menu-button"
aria-label={localize('com_ui_bookmarks_add')}
className={cn(
'mt-text-sm flex size-10 flex-shrink-0 items-center justify-center gap-2 rounded-xl border border-border-light text-sm transition-colors duration-200 hover:bg-surface-hover',
'mt-text-sm flex size-10 flex-shrink-0 items-center justify-center gap-2 rounded-xl border border-border-light bg-presentation text-sm transition-colors duration-200 hover:bg-surface-hover',
isMenuOpen ? 'bg-surface-hover' : '',
)}
data-testid="bookmark-menu"

4
client/src/components/Chat/Menus/PresetsMenu.tsx
View file

@ -58,7 +58,7 @@ const PresetsMenu: FC = () => {
id="presets-button"
data-testid="presets-button"
aria-label={localize('com_endpoint_examples')}
className="rounded-xl p-2 duration-0 hover:bg-surface-active-alt max-md:hidden"
className="rounded-xl bg-presentation p-2 duration-0 hover:bg-surface-active-alt max-md:hidden"
// className="inline-flex size-10 flex-shrink-0 items-center justify-center rounded-xl border border-border-light bg-transparent text-text-primary transition-all ease-in-out hover:bg-surface-tertiary disabled:pointer-events-none disabled:opacity-50 radix-state-open:bg-surface-tertiary"
>
<BookCopy className="icon-lg" aria-hidden="true" />
@ -80,7 +80,7 @@ const PresetsMenu: FC = () => {
<Content
side="bottom"
align="center"
className="mt-2 max-h-[495px] overflow-x-hidden rounded-lg border border-border-light bg-surface-secondary text-text-primary shadow-lg md:min-w-[400px]"
className="mt-2 max-h-[495px] overflow-x-hidden rounded-lg border border-border-light bg-presentation text-text-primary shadow-lg md:min-w-[400px]"
>
<PresetItems
presets={presetsQuery.data}

2
client/src/components/Chat/Messages/MessagesView.tsx
View file

@ -48,7 +48,7 @@ function MessagesViewContent({
width: '100%',
}}
>
<div className="flex flex-col pb-9 dark:bg-transparent">
<div className="flex flex-col pb-9 pt-14 dark:bg-transparent">
{(_messagesTree && _messagesTree.length == 0) || _messagesTree === null ? (
<div
className={cn(