mirror of
https://github.com/danny-avila/LibreChat.git
synced 2025-12-19 18:00: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
|
|
@ -34,6 +34,7 @@ export default function Conversation({ conversation, retainView, toggleNav, isLa
|
|||
const inputRef = useRef<HTMLInputElement | null>(null);
|
||||
const [titleInput, setTitleInput] = useState(title);
|
||||
const [renaming, setRenaming] = useState(false);
|
||||
const [isPopoverActive, setIsPopoverActive] = useState(false);
|
||||
|
||||
const clickHandler = async (event: React.MouseEvent<HTMLAnchorElement>) => {
|
||||
if (event.button === 0 && event.ctrlKey) {
|
||||
|
|
@ -117,13 +118,17 @@ export default function Conversation({ conversation, retainView, toggleNav, isLa
|
|||
(isLatestConvo && currentConvoId === 'new' && activeConvos[0] && activeConvos[0] !== 'new');
|
||||
|
||||
return (
|
||||
<div className="hover:bg-token-sidebar-surface-secondary group relative rounded-lg active:opacity-90">
|
||||
<div
|
||||
className={cn(
|
||||
'hover:bg-token-sidebar-surface-secondary group relative rounded-lg active:opacity-90',
|
||||
)}
|
||||
>
|
||||
{renaming ? (
|
||||
<div className="absolute bottom-0 left-0 right-0 top-0 z-50 flex w-full items-center rounded-lg bg-gray-200 dark:bg-gray-700">
|
||||
<div className="absolute inset-0 z-50 flex w-full items-center rounded-lg bg-gray-200 p-1.5 dark:bg-gray-700">
|
||||
<input
|
||||
ref={inputRef}
|
||||
type="text"
|
||||
className="w-full border border-blue-500 bg-transparent p-0 text-sm leading-tight outline-none"
|
||||
className="w-full rounded border border-blue-500 bg-transparent p-0.5 text-sm leading-tight outline-none"
|
||||
value={titleInput}
|
||||
onChange={(e) => setTitleInput(e.target.value)}
|
||||
onBlur={onRename}
|
||||
|
|
@ -131,14 +136,18 @@ export default function Conversation({ conversation, retainView, toggleNav, isLa
|
|||
/>
|
||||
</div>
|
||||
) : (
|
||||
<HoverToggle isActiveConvo={isActiveConvo}>
|
||||
<HoverToggle
|
||||
isActiveConvo={isActiveConvo}
|
||||
isPopoverActive={isPopoverActive}
|
||||
setIsPopoverActive={setIsPopoverActive}
|
||||
>
|
||||
<EditMenuButton>
|
||||
<RenameButton
|
||||
renaming={renaming}
|
||||
onRename={onRename}
|
||||
renameHandler={renameHandler}
|
||||
appendLabel={true}
|
||||
className="group m-1.5 flex w-full cursor-pointer items-center gap-2 rounded p-2.5 text-sm hover:bg-gray-200 focus-visible:bg-gray-200 focus-visible:outline-0 radix-disabled:pointer-events-none radix-disabled:opacity-50 dark:hover:bg-gray-600 dark:focus-visible:bg-gray-600"
|
||||
className="mb-[3.5px]"
|
||||
/>
|
||||
<DeleteButton
|
||||
conversationId={conversationId}
|
||||
|
|
@ -146,7 +155,7 @@ export default function Conversation({ conversation, retainView, toggleNav, isLa
|
|||
renaming={renaming}
|
||||
title={title}
|
||||
appendLabel={true}
|
||||
className="group m-1.5 flex w-full cursor-pointer items-center gap-2 rounded p-2.5 text-sm hover:bg-gray-200 focus-visible:bg-gray-200 focus-visible:outline-0 radix-disabled:pointer-events-none radix-disabled:opacity-50 dark:hover:bg-gray-600 dark:focus-visible:bg-gray-600"
|
||||
className="mt-[3.5px]"
|
||||
/>
|
||||
</EditMenuButton>
|
||||
<ArchiveButton
|
||||
|
|
@ -162,7 +171,7 @@ export default function Conversation({ conversation, retainView, toggleNav, isLa
|
|||
data-testid="convo-item"
|
||||
onClick={clickHandler}
|
||||
className={cn(
|
||||
isActiveConvo
|
||||
isActiveConvo || isPopoverActive
|
||||
? 'group relative mt-2 flex cursor-pointer items-center gap-2 break-all rounded-lg rounded-lg bg-gray-200 px-2 py-2 active:opacity-50 dark:bg-gray-700'
|
||||
: 'group relative mt-2 flex grow cursor-pointer items-center gap-2 overflow-hidden whitespace-nowrap break-all rounded-lg rounded-lg px-2 py-2 hover:bg-gray-200 active:opacity-50 dark:hover:bg-gray-700',
|
||||
!isActiveConvo && !renaming ? 'peer-hover:bg-gray-200 dark:peer-hover:bg-gray-800' : '',
|
||||
|
|
|
|||
|
|
@ -16,6 +16,7 @@ import {
|
|||
import DialogTemplate from '~/components/ui/DialogTemplate';
|
||||
import { TrashIcon, CrossIcon } from '~/components/svg';
|
||||
import { useLocalize, useNewConvo } from '~/hooks';
|
||||
import { cn } from '~/utils';
|
||||
|
||||
export default function DeleteButton({
|
||||
conversationId,
|
||||
|
|
@ -72,7 +73,14 @@ export default function DeleteButton({
|
|||
return (
|
||||
<Dialog>
|
||||
<DialogTrigger asChild>
|
||||
<button className={className}>{renaming ? <CrossIcon /> : renderDeleteButton()}</button>
|
||||
<button
|
||||
className={cn(
|
||||
'group m-1.5 flex w-full cursor-pointer items-center gap-2 rounded p-2.5 text-sm hover:bg-gray-200 focus-visible:bg-gray-200 focus-visible:outline-0 radix-disabled:pointer-events-none radix-disabled:opacity-50 dark:hover:bg-gray-600 dark:focus-visible:bg-gray-600',
|
||||
className,
|
||||
)}
|
||||
>
|
||||
{renaming ? <CrossIcon /> : renderDeleteButton()}
|
||||
</button>
|
||||
</DialogTrigger>
|
||||
<DialogTemplate
|
||||
showCloseButton={false}
|
||||
|
|
|
|||
|
|
@ -46,7 +46,7 @@ const EditMenuButton: FC<EditMenuButtonProps> = ({ children }: EditMenuButtonPro
|
|||
align="start"
|
||||
className={cn(
|
||||
'popover radix-side-bottom:animate-slideUpAndFade radix-side-left:animate-slideRightAndFade radix-side-right:animate-slideLeftAndFade radix-side-top:animate-slideDownAndFade overflow-hidden rounded-lg shadow-lg',
|
||||
'border border-gray-200 bg-white dark:border-gray-700 dark:bg-gray-700 dark:text-white',
|
||||
'border border-gray-200 bg-white dark:border-gray-600 dark:bg-gray-700 dark:text-white',
|
||||
'flex min-w-[200px] max-w-xs flex-wrap',
|
||||
)}
|
||||
>
|
||||
|
|
|
|||
|
|
@ -5,11 +5,14 @@ import { cn } from '~/utils';
|
|||
const HoverToggle = ({
|
||||
children,
|
||||
isActiveConvo,
|
||||
isPopoverActive,
|
||||
setIsPopoverActive,
|
||||
}: {
|
||||
children: React.ReactNode;
|
||||
isActiveConvo: boolean;
|
||||
isPopoverActive: boolean;
|
||||
setIsPopoverActive: (isActive: boolean) => void;
|
||||
}) => {
|
||||
const [isPopoverActive, setIsPopoverActive] = useState(false);
|
||||
const setPopoverActive = (value: boolean) => setIsPopoverActive(value);
|
||||
return (
|
||||
<ToggleContext.Provider value={{ setPopoverActive }}>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
import type { MouseEvent, ReactElement } from 'react';
|
||||
import { EditIcon, CheckMark } from '~/components/svg';
|
||||
import { useLocalize } from '~/hooks';
|
||||
import { cn } from '~/utils';
|
||||
|
||||
interface RenameButtonProps {
|
||||
renaming: boolean;
|
||||
|
|
@ -21,7 +22,13 @@ export default function RenameButton({
|
|||
const handler = renaming ? onRename : renameHandler;
|
||||
|
||||
return (
|
||||
<button className={className} onClick={handler}>
|
||||
<button
|
||||
className={cn(
|
||||
'group m-1.5 flex w-full cursor-pointer items-center gap-2 rounded p-2.5 text-sm hover:bg-gray-200 focus-visible:bg-gray-200 focus-visible:outline-0 radix-disabled:pointer-events-none radix-disabled:opacity-50 dark:hover:bg-gray-600 dark:focus-visible:bg-gray-600',
|
||||
className,
|
||||
)}
|
||||
onClick={handler}
|
||||
>
|
||||
{renaming ? (
|
||||
<CheckMark />
|
||||
) : appendLabel ? (
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue