From b0054c775a2925be981a8137fd7af8217ff39a3d Mon Sep 17 00:00:00 2001 From: Marco Beretta <81851188+berry-13@users.noreply.github.com> Date: Sun, 8 Jun 2025 20:00:57 +0200 Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20refactor:=20Enhance=20UI=20Consi?= =?UTF-8?q?stency,=20Accessibility=20&=20Localization=20(#7788)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Bookmarks/DeleteBookmarkButton.tsx | 36 ++++----- .../Bookmarks/EditBookmarkButton.tsx | 34 ++++----- .../Chat/Messages/SiblingSwitch.tsx | 64 +++++++--------- .../SidePanel/Bookmarks/BookmarkTableRow.tsx | 10 ++- .../SidePanel/Memories/MemoryEditDialog.tsx | 2 +- .../SidePanel/Memories/MemoryViewer.tsx | 75 ++++++++----------- client/src/components/ui/OGDialogTemplate.tsx | 8 +- client/src/locales/en/translation.json | 2 +- 8 files changed, 104 insertions(+), 127 deletions(-) diff --git a/client/src/components/Bookmarks/DeleteBookmarkButton.tsx b/client/src/components/Bookmarks/DeleteBookmarkButton.tsx index e9dcf0e4d1..911659de74 100644 --- a/client/src/components/Bookmarks/DeleteBookmarkButton.tsx +++ b/client/src/components/Bookmarks/DeleteBookmarkButton.tsx @@ -1,11 +1,10 @@ import { useCallback, useState } from 'react'; import type { FC } from 'react'; -import { Label, OGDialog, OGDialogTrigger, TooltipAnchor } from '~/components/ui'; +import { Button, TrashIcon, Label, OGDialog, OGDialogTrigger, TooltipAnchor } from '~/components'; import { useDeleteConversationTagMutation } from '~/data-provider'; import OGDialogTemplate from '~/components/ui/OGDialogTemplate'; import { NotificationSeverity } from '~/common'; import { useToastContext } from '~/Providers'; -import { TrashIcon } from '~/components/svg'; import { useLocalize } from '~/hooks'; const DeleteBookmarkButton: FC<{ @@ -36,31 +35,26 @@ const DeleteBookmarkButton: FC<{ await deleteBookmarkMutation.mutateAsync(bookmark); }, [bookmark, deleteBookmarkMutation]); - const handleKeyDown = (event: React.KeyboardEvent) => { - if (event.key === 'Enter' || event.key === ' ') { - event.preventDefault(); - event.stopPropagation(); - setOpen(!open); - } - }; - return ( <> setOpen(!open)} - onKeyDown={handleKeyDown} - > - - + render={ + + } + /> ) => { - if (event.key === 'Enter' || event.key === ' ') { - setOpen(!open); - } - }; - return ( setOpen(!open)} - className="flex size-7 items-center justify-center rounded-lg transition-colors duration-200 hover:bg-surface-hover" - onKeyDown={handleKeyDown} - > - - + render={ + + } + /> ); diff --git a/client/src/components/Chat/Messages/SiblingSwitch.tsx b/client/src/components/Chat/Messages/SiblingSwitch.tsx index 378029c480..ba94a06a94 100644 --- a/client/src/components/Chat/Messages/SiblingSwitch.tsx +++ b/client/src/components/Chat/Messages/SiblingSwitch.tsx @@ -1,3 +1,4 @@ +import { ChevronLeft, ChevronRight } from 'lucide-react'; import type { TMessageProps } from '~/common'; import { cn } from '~/utils'; @@ -22,57 +23,46 @@ export default function SiblingSwitch({ setSiblingIdx && setSiblingIdx(siblingIdx + 1); }; + const buttonStyle = cn( + 'hover-button rounded-lg p-1.5 text-text-secondary-alt transition-colors duration-200', + 'hover:text-text-primary hover:bg-surface-hover', + 'md:group-hover:visible md:group-focus-within:visible md:group-[.final-completion]:visible', + 'focus-visible:ring-2 focus-visible:ring-black dark:focus-visible:ring-white focus-visible:outline-none', + ); + return siblingCount > 1 ? ( -
+
+ ) : null; } diff --git a/client/src/components/SidePanel/Bookmarks/BookmarkTableRow.tsx b/client/src/components/SidePanel/Bookmarks/BookmarkTableRow.tsx index ea7a039692..42fea897b3 100644 --- a/client/src/components/SidePanel/Bookmarks/BookmarkTableRow.tsx +++ b/client/src/components/SidePanel/Bookmarks/BookmarkTableRow.tsx @@ -30,6 +30,12 @@ const BookmarkTableRow: React.FC = ({ row, moveRow, posit mutation.mutate( { ...row, position: item.index }, { + onSuccess: () => { + showToast({ + message: localize('com_ui_bookmarks_update_success'), + severity: NotificationSeverity.SUCCESS, + }); + }, onError: () => { showToast({ message: localize('com_ui_bookmarks_update_error'), @@ -44,7 +50,9 @@ const BookmarkTableRow: React.FC = ({ row, moveRow, posit accept: 'bookmark', drop: handleDrop, hover(item: DragItem) { - if (!ref.current || item.index === position) {return;} + if (!ref.current || item.index === position) { + return; + } moveRow(item.index, position); item.index = position; }, diff --git a/client/src/components/SidePanel/Memories/MemoryEditDialog.tsx b/client/src/components/SidePanel/Memories/MemoryEditDialog.tsx index 60eedb02fa..db6a0ab68e 100644 --- a/client/src/components/SidePanel/Memories/MemoryEditDialog.tsx +++ b/client/src/components/SidePanel/Memories/MemoryEditDialog.tsx @@ -117,7 +117,7 @@ export default function MemoryEditDialog({
{memory.tokenCount.toLocaleString()} {memData?.tokenLimit && ` / ${memData.tokenLimit.toLocaleString()}`}{' '} - {localize('com_ui_tokens')} + {localize(memory.tokenCount === 1 ? 'com_ui_token' : 'com_ui_tokens')}
)} diff --git a/client/src/components/SidePanel/Memories/MemoryViewer.tsx b/client/src/components/SidePanel/Memories/MemoryViewer.tsx index 66f3fee8e6..7aa4c1a8aa 100644 --- a/client/src/components/SidePanel/Memories/MemoryViewer.tsx +++ b/client/src/components/SidePanel/Memories/MemoryViewer.tsx @@ -5,6 +5,9 @@ import { matchSorter } from 'match-sorter'; import { SystemRoles, PermissionTypes, Permissions } from 'librechat-data-provider'; import type { TUserMemory } from 'librechat-data-provider'; import { + Spinner, + EditIcon, + TrashIcon, Table, Input, Label, @@ -18,7 +21,7 @@ import { TableHeader, TooltipAnchor, OGDialogTrigger, -} from '~/components/ui'; +} from '~/components'; import { useGetUserQuery, useMemoriesQuery, @@ -27,10 +30,8 @@ import { } from '~/data-provider'; import { useLocalize, useAuthContext, useHasAccess } from '~/hooks'; import OGDialogTemplate from '~/components/ui/OGDialogTemplate'; -import { EditIcon, TrashIcon } from '~/components/svg'; import MemoryCreateDialog from './MemoryCreateDialog'; import MemoryEditDialog from './MemoryEditDialog'; -import Spinner from '~/components/svg/Spinner'; import { useToastContext } from '~/Providers'; import AdminSettings from './AdminSettings'; @@ -121,13 +122,6 @@ export default function MemoryViewer() { const [open, setOpen] = useState(false); const triggerRef = useRef(null); - const handleKeyDown = (event: React.KeyboardEvent) => { - if (event.key === 'Enter' || event.key === ' ') { - event.preventDefault(); - setOpen(!open); - } - }; - // Only show edit button if user has UPDATE permission if (!hasUpdateAccess) { return null; @@ -142,17 +136,18 @@ export default function MemoryViewer() { > setOpen(!open)} - className="flex size-7 items-center justify-center rounded-lg transition-colors duration-200 hover:bg-surface-hover" - onKeyDown={handleKeyDown} - > - - + description={localize('com_ui_edit_memory')} + render={ + + } + /> ); @@ -161,14 +156,6 @@ export default function MemoryViewer() { const DeleteMemoryButton = ({ memory }: { memory: TUserMemory }) => { const [open, setOpen] = useState(false); - const handleKeyDown = (event: React.KeyboardEvent) => { - if (event.key === 'Enter' || event.key === ' ') { - event.preventDefault(); - event.stopPropagation(); - setOpen(!open); - } - }; - if (!hasUpdateAccess) { return null; } @@ -196,20 +183,22 @@ export default function MemoryViewer() { setOpen(!open)} - onKeyDown={handleKeyDown} - > - {deletingKey === memory.key ? ( - - ) : ( - - )} - + description={localize('com_ui_delete_memory')} + render={ + + } + />
- {buttons != null ? buttons : null} {showCancelButton && ( - - {Cancel} + + )} + {buttons != null ? buttons : null} {selection ? (