Andreas/LibreChat
1
0
Fork 0
mirror of https://github.com/danny-avila/LibreChat.git synced 2026-03-03 14:50:19 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions 3

🧩 feat: Standardize empty states, improve MCP icon upload accessibility, and refine UI layout (#11195)

Browse source 
* feat: Enhance accessibility and localization for empty states in prompts, bookmarks, and memories

* feat: Improve accessibility and layout for icon upload component

* fix: Update dialog content width for improved accessibility
This commit is contained in:
Marco Beretta 2026-01-05 19:46:35 +01:00 • committed by GitHub
parent ca58d70c44
commit 1544491737
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
8 changed files with 54 additions and 21 deletions
Download patch file Download diff file Expand all files Collapse all files

13
client/src/components/SidePanel/Agents/MCPIcon.tsx
View file

@ -27,11 +27,22 @@ export default function MCPIcon({ icon, onIconChange }: MCPIconProps) {
}
};
const handleKeyDown = (e: React.KeyboardEvent) => {
if (e.key === 'Enter' || e.key === ' ') {
e.preventDefault();
handleClick();
}
};
return (
<div className="flex items-center gap-4">
<div
role="button"
tabIndex={0}
onClick={handleClick}
className="bg-token-surface-secondary dark:bg-token-surface-tertiary border-token-border-medium flex h-16 w-16 shrink-0 cursor-pointer items-center justify-center rounded-xl border-2 border-dashed"
onKeyDown={handleKeyDown}
aria-label={localize('com_ui_upload_icon')}
className="bg-token-surface-secondary dark:bg-token-surface-tertiary border-token-border-medium flex h-16 w-16 shrink-0 cursor-pointer items-center justify-center rounded-xl border-2 border-dashed focus:outline-none focus-visible:ring-2 focus-visible:ring-border-heavy"
>
{previewUrl ? (
<img

21
client/src/components/SidePanel/Bookmarks/BookmarkEmptyState.tsx
View file

@ -9,13 +9,22 @@ export default function BookmarkEmptyState({ isFiltered = false }: BookmarkEmpty
const localize = useLocalize();
return (
<div className="flex flex-col items-center justify-center py-8 text-center">
<div className="mb-3 rounded-full bg-surface-secondary p-3">
<Bookmark className="size-6 text-text-tertiary" aria-hidden="true" />
<div className="flex flex-col items-center justify-center rounded-lg border border-border-light bg-transparent p-6 text-center">
<div className="mb-2 flex size-10 items-center justify-center rounded-full bg-surface-tertiary">
<Bookmark className="size-5 text-text-secondary" aria-hidden="true" />
</div>
<p className="text-sm text-text-secondary">
{isFiltered ? localize('com_ui_no_bookmarks_match') : localize('com_ui_no_bookmarks')}
</p>
{isFiltered ? (
<p className="text-sm text-text-secondary">{localize('com_ui_no_bookmarks_match')}</p>
) : (
<>
<p className="text-sm font-medium text-text-primary">
{localize('com_ui_no_bookmarks_title')}
</p>
<p className="mt-0.5 text-xs text-text-secondary">
{localize('com_ui_add_first_bookmark')}
</p>
</>
)}
</div>
);
}

2
client/src/components/SidePanel/MCPBuilder/MCPServerDialog/MCPServerForm.tsx
View file

@ -15,7 +15,7 @@ export default function MCPServerForm({ formHook }: MCPServerFormProps) {
return (
<FormProvider {...methods}>
<div className="max-h-[70vh] space-y-4 overflow-y-auto px-1 py-1">
<div className="space-y-4 px-1 py-1">
<BasicInfoSection />
<ConnectionSection />

4
client/src/components/SidePanel/MCPBuilder/MCPServerDialog/sections/BasicInfoSection.tsx
View file

@ -31,11 +31,11 @@ export default function BasicInfoSection() {
return (
<div className="space-y-3">
{/* Icon + Name row */}
<div className="flex items-start gap-4">
<div className="flex flex-col gap-4 sm:flex-row sm:items-start">
<div className="flex-shrink-0">
<MCPIcon icon={iconValue} onIconChange={handleIconChange} />
</div>
<div className="flex-1 space-y-1.5">
<div className="w-full space-y-1.5 sm:flex-1">
<Label htmlFor="title" className="text-sm font-medium">
{localize('com_ui_name')} <span className="text-text-secondary">*</span>
</Label>

2
client/src/components/SidePanel/Memories/MemoryEmptyState.tsx
View file

@ -9,7 +9,7 @@ export default function MemoryEmptyState({ isFiltered = false }: MemoryEmptyStat
const localize = useLocalize();
return (
<div className="flex flex-col items-center justify-center rounded-lg border border-border-light bg-surface-primary p-6 text-center">
<div className="flex flex-col items-center justify-center rounded-lg border border-border-light bg-transparent p-6 text-center">
<div className="mb-2 flex size-10 items-center justify-center rounded-full bg-surface-tertiary">
<Brain className="size-5 text-text-secondary" aria-hidden="true" />
</div>