mirror of
https://github.com/danny-avila/LibreChat.git
synced 2025-12-20 02:10:15 +01:00
🪟 fix+feat: General UI Enhancements (#2619)
* feat: Minor design changes to mimic OpenAI's latest login page * fix: Optimize ThemeSelector for mobile * fix: Use a svg for the logo for transperency in dark mode * feat: Update styles for Registration * feat: Update error colors for login & registration * fix: remove medium font * wip: Dropdown menu * feat: Update dropdown to match ChatGPT * feat: Improve rounding and padding * feat: Add UI Updates to RequestPasswordReset, PasswordRest and increase width for theme dropdown * fix: Modify the My Files modal's width to not touch the screen * feat: fix scrolling for dropdown, and make border width lighter * feat: Match popup menu design to OpenAI (p1/2) * fix+feat: fix dark mode, add user email, add lighter borders * fix: Add border color on focus of chat input. * feat: Move Export Conversation to a seperate button (testing) * fix: Properly center Login, Registration, Reset Password Flow * fix: Border colors on dark mode for settings modal * feat: Improve wording for settings menu * fix: Optimize settings modal for mobile and fix height for modal * feat: Optimize for desktop * fix: make TooltipTrigger asChild of button, improve settings mobile responsiveness * feat: Handle dropdowns properly TODO: Make height dynamic, fix dark mode colors * fix: input styles fix: make endpoint icon smaller * feat: Update UI to Match ChatGPT Style - Updated the dropdown styles to match the aesthetic of ChatGPT. - Decreased spacing within the conversation area for cleanliness. - Replaced the current archive icon with the ChatGPT's icon. * fix: fix colors for EditMenuButton & ArchiveButton for dark mode and light mode * fix: ui fixes * fix: Fix Conversation UI Bugs * fix: transparency of HoverToggle to make buttons not visible * fix: dark mode HoverToggle & compress menu item spacing * fix: responsiveness of export icon * fix: first mentionitem is set to always be highlighted * fix: improve hover state to text instead of bg * feat: Update icons to ChatGPT Style * fix: dark mode hover for PanelFileCell * fix: change navlinks z-index to 100 * fix: hover states for DataTable * feat: Move ExportButton to seperate component * chore: remove unused imports
This commit is contained in:
Anirudh
GitHub
parent
d73ea8e1f2
commit
8f20fb28e5
43 changed files with 716 additions and 469 deletions
|
|
@ -1,6 +1,6 @@
|
|||
import { useLocation } from 'react-router-dom';
|
||||
import { Fragment, useState, memo } from 'react';
|
||||
import { Download, FileText } from 'lucide-react';
|
||||
import { FileText } from 'lucide-react';
|
||||
import { Menu, Transition } from '@headlessui/react';
|
||||
import { useRecoilValue, useRecoilState } from 'recoil';
|
||||
import { useGetUserBalance, useGetStartupConfig } from 'librechat-data-provider/react-query';
|
||||
|
|
@ -8,7 +8,6 @@ import type { TConversation } from 'librechat-data-provider';
|
|||
import FilesView from '~/components/Chat/Input/Files/FilesView';
|
||||
import { useAuthContext } from '~/hooks/AuthContext';
|
||||
import useAvatar from '~/hooks/Messages/useAvatar';
|
||||
import { ExportModal } from './ExportConversation';
|
||||
import { LinkIcon, GearIcon } from '~/components';
|
||||
import { UserIcon } from '~/components/svg';
|
||||
import { useLocalize } from '~/hooks';
|
||||
|
|
@ -26,7 +25,6 @@ function NavLinks() {
|
|||
const balanceQuery = useGetUserBalance({
|
||||
enabled: !!isAuthenticated && startupConfig?.checkBalance,
|
||||
});
|
||||
const [showExports, setShowExports] = useState(false);
|
||||
const [showSettings, setShowSettings] = useState(false);
|
||||
const [showFiles, setShowFiles] = useRecoilState(store.showFiles);
|
||||
|
||||
|
|
@ -42,34 +40,15 @@ function NavLinks() {
|
|||
conversation = activeConvo;
|
||||
}
|
||||
|
||||
const exportable =
|
||||
conversation &&
|
||||
conversation.conversationId &&
|
||||
conversation.conversationId !== 'new' &&
|
||||
conversation.conversationId !== 'search';
|
||||
|
||||
const clickHandler = () => {
|
||||
if (exportable) {
|
||||
setShowExports(true);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<Menu as="div" className="group relative">
|
||||
{({ open }) => (
|
||||
<>
|
||||
{startupConfig?.checkBalance &&
|
||||
balanceQuery.data &&
|
||||
!isNaN(parseFloat(balanceQuery.data)) && (
|
||||
<div className="m-1 ml-3 whitespace-nowrap text-left text-sm text-black dark:text-gray-200">
|
||||
{`Balance: ${parseFloat(balanceQuery.data).toFixed(2)}`}
|
||||
</div>
|
||||
)}
|
||||
<Menu.Button
|
||||
className={cn(
|
||||
'group-ui-open:bg-gray-100 dark:group-ui-open:bg-gray-700 duration-350 mt-text-sm mb-1 flex h-11 w-full items-center gap-2 rounded-lg px-3 py-3 text-sm transition-colors hover:bg-gray-100 dark:hover:bg-gray-700',
|
||||
open ? 'bg-gray-100 dark:bg-gray-700' : '',
|
||||
'group-ui-open:bg-gray-100 dark:group-ui-open:bg-gray-700 duration-350 mt-text-sm flex h-auto w-full items-center gap-2 rounded-lg p-2 text-sm transition-colors hover:bg-gray-100 dark:hover:bg-gray-800',
|
||||
open ? 'bg-gray-100 dark:bg-gray-800' : '',
|
||||
)}
|
||||
data-testid="nav-user"
|
||||
>
|
||||
|
|
@ -93,7 +72,7 @@ function NavLinks() {
|
|||
</div>
|
||||
</div>
|
||||
<div
|
||||
className="mt-2 grow overflow-hidden text-ellipsis whitespace-nowrap text-left text-black dark:text-white"
|
||||
className="mt-2 grow overflow-hidden text-ellipsis whitespace-nowrap text-left text-black dark:text-gray-100"
|
||||
style={{ marginTop: '0', marginLeft: '0' }}
|
||||
>
|
||||
{user?.name || user?.username || localize('com_nav_user')}
|
||||
|
|
@ -109,24 +88,23 @@ function NavLinks() {
|
|||
leaveFrom="translate-y-0 opacity-100"
|
||||
leaveTo="translate-y-2 opacity-0"
|
||||
>
|
||||
<Menu.Items className="absolute bottom-full left-0 z-20 mb-1 mt-1 w-full translate-y-0 overflow-hidden rounded-lg bg-white py-1.5 opacity-100 outline-none dark:bg-gray-800">
|
||||
<Menu.Items className="absolute bottom-full left-0 z-[100] mb-1 mt-1 w-full translate-y-0 overflow-hidden rounded-lg border border-gray-300 bg-white p-1.5 opacity-100 shadow-lg outline-none dark:border-gray-600 dark:bg-gray-700">
|
||||
<div className="text-token-text-secondary ml-3 mr-2 py-2 text-sm" role="none">
|
||||
{user?.email || localize('com_nav_user')}
|
||||
</div>
|
||||
<div className="my-1.5 h-px bg-black/10 dark:bg-white/10" role="none" />
|
||||
{startupConfig?.checkBalance &&
|
||||
balanceQuery.data &&
|
||||
!isNaN(parseFloat(balanceQuery.data)) && (
|
||||
<>
|
||||
<div className="text-token-text-secondary ml-3 mr-2 py-2 text-sm">
|
||||
{`Balance: ${parseFloat(balanceQuery.data).toFixed(2)}`}
|
||||
</div>
|
||||
<div className="my-1.5 h-px bg-black/10 dark:bg-white/10" role="none" />
|
||||
</>
|
||||
)}
|
||||
<Menu.Item as="div">
|
||||
<NavLink
|
||||
className={cn(
|
||||
'flex w-full cursor-pointer items-center gap-3 rounded-none px-3 py-3 text-sm text-black transition-colors duration-200 hover:bg-gray-100 dark:text-white dark:hover:bg-gray-700',
|
||||
exportable
|
||||
? 'cursor-pointer text-black dark:text-white'
|
||||
: 'cursor-not-allowed text-black/50 dark:text-white/50',
|
||||
)}
|
||||
svg={() => <Download size={16} />}
|
||||
text={localize('com_nav_export_conversation')}
|
||||
clickHandler={clickHandler}
|
||||
/>
|
||||
</Menu.Item>
|
||||
<div className="my-1 h-px bg-black/20 dark:bg-white/20" role="none" />
|
||||
<Menu.Item as="div">
|
||||
<NavLink
|
||||
className="flex w-full cursor-pointer items-center gap-3 rounded-none px-3 py-3 text-sm text-black transition-colors duration-200 hover:bg-gray-100 dark:text-white dark:hover:bg-gray-700"
|
||||
svg={() => <FileText className="icon-md" />}
|
||||
text={localize('com_nav_my_files')}
|
||||
clickHandler={() => setShowFiles(true)}
|
||||
|
|
@ -135,7 +113,6 @@ function NavLinks() {
|
|||
{startupConfig?.helpAndFaqURL !== '/' && (
|
||||
<Menu.Item as="div">
|
||||
<NavLink
|
||||
className="flex w-full cursor-pointer items-center gap-3 rounded-none px-3 py-3 text-sm text-black transition-colors duration-200 hover:bg-gray-100 dark:text-white dark:hover:bg-gray-700"
|
||||
svg={() => <LinkIcon />}
|
||||
text={localize('com_nav_help_faq')}
|
||||
clickHandler={() => window.open(startupConfig?.helpAndFaqURL, '_blank')}
|
||||
|
|
@ -144,13 +121,12 @@ function NavLinks() {
|
|||
)}
|
||||
<Menu.Item as="div">
|
||||
<NavLink
|
||||
className="flex w-full cursor-pointer items-center gap-3 rounded-none px-3 py-3 text-sm text-black transition-colors duration-200 hover:bg-gray-100 dark:text-white dark:hover:bg-gray-700"
|
||||
svg={() => <GearIcon className="icon-md" />}
|
||||
text={localize('com_nav_settings')}
|
||||
clickHandler={() => setShowSettings(true)}
|
||||
/>
|
||||
</Menu.Item>
|
||||
<div className="my-1 h-px bg-black/20 bg-white/20" role="none" />
|
||||
<div className="my-1.5 h-px bg-black/10 dark:bg-white/10" role="none" />
|
||||
<Menu.Item as="div">
|
||||
<Logout />
|
||||
</Menu.Item>
|
||||
|
|
@ -159,9 +135,6 @@ function NavLinks() {
|
|||
</>
|
||||
)}
|
||||
</Menu>
|
||||
{showExports && (
|
||||
<ExportModal open={showExports} onOpenChange={setShowExports} conversation={conversation} />
|
||||
)}
|
||||
{showFiles && <FilesView open={showFiles} onOpenChange={setShowFiles} />}
|
||||
{showSettings && <Settings open={showSettings} onOpenChange={setShowSettings} />}
|
||||
</>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue