Andreas/LibreChat
1
0
Fork 0
mirror of https://github.com/danny-avila/LibreChat.git synced 2026-01-02 08:38:51 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions 3

🛗 fix: Address Accessibility Issues - Axe Rating: Serious (#10521)

Browse source 
* feat: add light/dark differentiation on text color for login footer links for more accessible contrast in light mode

* feat: add darker color focus ring on ThemeSelector in light mode for more accessible contrast

* feat: increase contrast on text color for rendered error messages in light and dark mode so that they pass the 4.5:1 accessibility contrast threshold against their backgrounds

* feat: add more accessible color vars to style.css for better contrast against light/dark backgrounds

* feat: un-nest DropdownMenu from ListCard and make them siblings instead for better accessibility

* feat: tweak --border-heavy in light mode so that it uses --gray-410 rather than --gray-400 so that the contrast ratio threshold is hit for accessibility

* feat: switch email and password input border to border-heavy for more accessible contrast on Login page

* fix: add proper focus ring for Action menu button in Prompts Sidenav

* fix: align light and dark focus rings with surrounding elements on preview/edit menu dropdown button in Prompt Card

* fix: remove aria-hidden on parent div with focusable child element according to accessibility guidelines

* fix: add missing aria-readonly false property that should have been in previous accessibility PR

* feat: add horizontal padding on rowRenderer's CellMeasurer div so that focus ring on rows doesnt clip behind virtualized table borders side-to-side

(still need to figure out vertical clipping on final row / a better solution to be able to get overflows to work properly within the virtualized table)

* feat: remove render prop override so that Share and Delete Buttons in Conversation dropdown can be pressed with Enter keystroke

* fix: undo additional colors and changes to --surface-hover

the initial changes came from a misunderstanding of contrast threshold requirements for hover effect accessibility

* feat: better layout for non-nested prompt card / action menu combination

* fix: add proper focus restoration behavior for Preview modal on close

* fix: undo change to --border-heavy in light mode

* fix: set borders for login input boxes back to light

* feat: add announcement for state change when link copied to clipboard in conversation share modal

* feat: add announcement to Refresh Link button

* feat: add announcement for archiving chats

* feat: make date sections in conversation history list <h2> rather than generic <div> for improved screen reader support

* feat: ensure Share Link modal is accessible at high zoom percentage and low viewport width / height requirements by adding max height and overflow attributes to allow scrolling

* feat: bold toast text so that it hits font size accessibility threshold (above 14 px when bolded - change makes text 16 px bold) so that the more disruptive contrast change of the toast background color is no longer necessary.

The background color would need to achieve a 4.5:1 contrast ratio, which would significantly affect the established aesthetic of the current toast system if achieved.

* fix: do not render side nav when it is hidden to avoid keyboard navigation with screen reader

* fix: add side nav button state change announcements and don't render components that were previosuly reachable via keyboard navigation while in the side nav

* feat: add tooltip anchor for Model Select

* fix: only hide the model selector, export, and temp chat buttons when in mobile view and the sidenav is expanded

* feat: add aria-haspopup support for MenuItems and add aria-haspopup: 'dialog' for Share and Delete buttons in ConvoOptions

* feat: add label for DataTable search so that it does not rely on placeholder attribute for function identification

* feat: make X buttons on dialogs 24x24px to achieve AA compliance

* feat: add announcements for the search bar for model selector

* feat: persistent label for DataTable

* feat: make filter files text contrast compliant

* feat: add non-color visual indicator to AudioRecorder listening state

* feat: add aria-expanded attribute to tool call dropdown for screen reader

* feat: add high contrast and rounded outlines for focus indicators on Run Code and Copy Code buttons for code blocks

* fix: change Button to anchor tag in Shared Links component when linking to original conversation

* fix: allow overflow in datatable cells so that focus indicators dont get cut off

* feat: round out focus outline for link name in SharedLinks modal

* feat: add aria-controls and aria-haspopup: "dialog" to SharedLinks delete button and modal

* feat: add aria-controls for dropdown menu items on ConvoOptions for share and delete modals

* feat: add trigger ref to 2FA button and modal in settings menu so focus returns to button on modal close

* feat: add refs so that open sidebar and close sidebar buttons transfer focus to one another

* chore: formatting

* feat: make sure settings modal is accessible at 200% zoom for screen size 1366x768 viewport

* feat: round out focus outline for link names in archived chats modal

* feat: add result announcements for screen reader in DataTable search

* feat: simplify layout for checkbox / api key components for better accessibility

* feat: return focus to chat input on prompt variables modal close

* feat: add persistent labels to TextareaAutosize Inputs in Variable form

* feat: tighten max width so side scrolling not necessary at 400% zoom for VariableForm modal

* feat: add persistent labels to prompt management page

* feat: announce results found for search bars in prompts page and improve them in datatable

* feat: de-nest DashGroupItem buttons in Prompts page to allow better navigation and comply with accessibility standard

* feat: add heading for new prompt creation page for screen readers

* feat: remove non-compliant description truncation for small screen sizes by making labels static on small enough viewport width

* feat: add mobile view sidebar for prompts page

* feat: add bolded text on select for AdvancedSwitch so that there is a visual indicator of selection and it does not rely solely on color as an indication of state

* feat: add persistent labels to ModelSelector search inputs

* feat: align aria-label with visual label for speech recognition users

* feat: make MemoryCreateDialog accessible at 400% zoom (introduce max viewport height attr and make scrollable)

* feat: add persistent label to Filter input for DataTable in file attach sidebar menu

* feat: add persistent label for bookmark filter input in bookmarks sidebar menu

* feat: add alert for screen readers for invalid inputs when editting bookmarks

* feat: bold font in BookmarkForm error readout to pass contrast compliance thresholds for 14pt text

* feat: align aria-label with visual label for BookmarkForm Ttile input

* feat: add 400% zoom support for ALL modals utilizing OriginalDialog to prevent clipping

* feat: remove state change on aria label and give consistent labelling for button, offload state change notification to the announcement div and make more assertive

* feat: add aria-labels which convey that the buttons are sortable (divergence from visual text because iconography is used to signify sort functionality)

* feat: add supplemental visuals to indicate link is clickable other than color in SharedLinks

* feat: increase saturation to hit contrast threshold minimums on Link color in SharedLinks

* feat: stop DataTable from disappearing at 400% zoom in SharedLinks

* feat: increase contrast to hit contrast threshold minimums on Animated Search Input visual indicators

* feat: add aria-label for AnimatedSearchInput (doesn't require explicit labelling because of Search icon)

* fix: stop long example variable declaration from clipping at high zoom in variables info

* feat: add aria-label to bettter describe sort button functionality for vision impaired users

* chore: remove unused translation key

* chore: address ESLint comments

* fix: modify test to account for new alert on theme toggle switch for login page

* chore: interpolate translation key
This commit is contained in:
Dustin Healy 2025-11-26 06:12:04 -08:00 • committed by Danny Avila
parent 74ef178203
commit 998838262f
No known key found for this signature in database
GPG key ID: BF31EEB2C5CA0956
62 changed files with 935 additions and 414 deletions
Download patch file Download diff file Expand all files Collapse all files

8
client/src/components/Prompts/AdvancedSwitch.tsx
View file

@ -32,9 +32,9 @@ const AdvancedSwitch = () => {
}}
aria-pressed={mode === PromptsEditorMode.SIMPLE}
aria-label={localize('com_ui_simple')}
className={`relative z-10 flex-1 rounded-xl px-3 py-2 text-sm font-medium transition-all duration-300 md:px-6 ${
className={`relative z-10 flex-1 rounded-xl px-3 py-2 text-sm transition-all duration-300 md:px-6 ${
mode === PromptsEditorMode.SIMPLE
? 'text-text-primary'
? 'font-bold text-text-primary'
: 'text-text-secondary hover:text-text-primary'
}`}
>
@ -47,9 +47,9 @@ const AdvancedSwitch = () => {
onClick={() => setMode(PromptsEditorMode.ADVANCED)}
aria-pressed={mode === PromptsEditorMode.ADVANCED}
aria-label={localize('com_ui_advanced')}
className={`relative z-10 flex-1 rounded-xl px-3 py-2 text-sm font-medium transition-all duration-300 md:px-6 ${
className={`relative z-10 flex-1 rounded-xl px-3 py-2 text-sm transition-all duration-300 md:px-6 ${
mode === PromptsEditorMode.ADVANCED
? 'text-text-primary'
? 'font-bold text-text-primary'
: 'text-text-secondary hover:text-text-primary'
}`}
>

42
client/src/components/Prompts/Command.tsx
View file

@ -45,21 +45,37 @@ const Command = ({
return (
<div className="rounded-xl border border-border-light shadow-md">
<h3 className="flex h-10 items-center gap-1 pl-4 text-sm text-text-secondary">
<SquareSlash className="icon-sm" aria-hidden="true" />
<Input
type="text"
tabIndex={tabIndex}
disabled={disabled}
placeholder={localize('com_ui_command_placeholder')}
value={command}
onChange={handleInputChange}
className="border-none"
/>
<label
htmlFor="prompt-command"
className="block px-4 pt-2 text-sm text-text-secondary md:hidden"
>
{localize('com_ui_command_placeholder')}
</label>
<div className="relative flex h-10 items-center gap-1 pl-4 pr-2 text-sm text-text-secondary">
<SquareSlash className="icon-sm shrink-0" aria-hidden="true" />
<div className="relative min-w-0 flex-1">
<Input
type="text"
id="prompt-command"
tabIndex={tabIndex}
disabled={disabled}
placeholder=" "
value={command}
onChange={handleInputChange}
className="peer w-full border-none pr-14"
aria-label={localize('com_ui_command_placeholder')}
/>
<label
htmlFor="prompt-command"
className="pointer-events-none absolute left-0 top-0.5 hidden max-w-[calc(100%-3.5rem)] origin-[0] translate-y-2 scale-100 rounded bg-white px-1 text-sm text-text-secondary transition-transform duration-200 peer-placeholder-shown:translate-y-2 peer-placeholder-shown:scale-100 peer-focus:-translate-y-3 peer-focus:scale-75 peer-focus:text-text-primary peer-[:not(:placeholder-shown)]:-translate-y-3 peer-[:not(:placeholder-shown)]:scale-75 dark:bg-gray-850 md:block"
>
{localize('com_ui_command_placeholder')}
</label>
</div>
{disabled !== true && (
<span className="mr-4 w-10 text-xs text-text-secondary md:text-sm">{`${charCount}/${Constants.COMMANDS_MAX_LENGTH}`}</span>
<span className="absolute right-2 shrink-0 text-xs text-text-secondary md:text-sm">{`${charCount}/${Constants.COMMANDS_MAX_LENGTH}`}</span>
)}
</h3>
</div>
</div>
);
};

42
client/src/components/Prompts/Description.tsx
View file

@ -42,21 +42,37 @@ const Description = ({
return (
<div className="rounded-xl border border-border-light shadow-md">
<h3 className="flex h-10 items-center gap-1 pl-4 text-sm text-text-secondary">
<Info className="icon-sm" aria-hidden="true" />
<Input
type="text"
tabIndex={tabIndex}
disabled={disabled}
placeholder={localize('com_ui_description_placeholder')}
value={description}
onChange={handleInputChange}
className="border-none"
/>
<label
htmlFor="prompt-description"
className="block px-4 pt-2 text-sm text-text-secondary md:hidden"
>
{localize('com_ui_description_placeholder')}
</label>
<div className="relative flex h-10 items-center gap-1 pl-4 pr-2 text-sm text-text-secondary">
<Info className="icon-sm shrink-0" aria-hidden="true" />
<div className="relative min-w-0 flex-1">
<Input
type="text"
id="prompt-description"
tabIndex={tabIndex}
disabled={disabled}
placeholder=" "
value={description}
onChange={handleInputChange}
className="peer w-full border-none pr-14"
aria-label={localize('com_ui_description_placeholder')}
/>
<label
htmlFor="prompt-description"
className="pointer-events-none absolute left-0 top-0.5 hidden max-w-[calc(100%-3.5rem)] origin-[0] translate-y-2 scale-100 rounded bg-white px-1 text-sm text-text-secondary transition-transform duration-200 peer-placeholder-shown:translate-y-2 peer-placeholder-shown:scale-100 peer-focus:-translate-y-3 peer-focus:scale-75 peer-focus:text-text-primary peer-[:not(:placeholder-shown)]:-translate-y-3 peer-[:not(:placeholder-shown)]:scale-75 dark:bg-gray-850 md:block"
>
{localize('com_ui_description_placeholder')}
</label>
</div>
{!disabled && (
<span className="mr-4 w-10 text-xs text-text-secondary md:text-sm">{`${charCount}/${MAX_LENGTH}`}</span>
<span className="absolute right-2 shrink-0 text-xs text-text-secondary md:text-sm">{`${charCount}/${MAX_LENGTH}`}</span>
)}
</h3>
</div>
</div>
);
};

52
client/src/components/Prompts/Groups/ChatGroupItem.tsx
View file

@ -1,4 +1,4 @@
import { useState, useMemo, memo } from 'react';
import { useState, useMemo, memo, useRef } from 'react';
import { Menu as MenuIcon, Edit as EditIcon, EarthIcon, TextSearch } from 'lucide-react';
import {
DropdownMenu,
@ -37,6 +37,8 @@ function ChatGroupItem({
const { hasPermission } = useResourcePermissions('promptGroup', group._id || '');
const canEdit = hasPermission(PermissionBits.EDIT);
const triggerButtonRef = useRef<HTMLButtonElement | null>(null);
const onCardClick: React.MouseEventHandler<HTMLButtonElement> = () => {
const text = group.productionPrompt?.prompt;
if (!text?.trim()) {
@ -53,23 +55,28 @@ function ChatGroupItem({
return (
<>
<ListCard
name={group.name}
category={group.category ?? ''}
onClick={onCardClick}
snippet={
typeof group.oneliner === 'string' && group.oneliner.length > 0
? group.oneliner
: (group.productionPrompt?.prompt ?? '')
}
>
<div className="flex flex-row items-center gap-2">
{groupIsGlobal === true && (
<EarthIcon className="icon-md text-green-400" aria-label="Global prompt group" />
)}
<div className="relative my-2 items-stretch justify-between rounded-xl border border-border-light shadow-sm transition-all duration-300 ease-in-out hover:bg-surface-tertiary hover:shadow-lg">
<ListCard
name={group.name}
category={group.category ?? ''}
onClick={onCardClick}
snippet={
typeof group.oneliner === 'string' && group.oneliner.length > 0
? group.oneliner
: (group.productionPrompt?.prompt ?? '')
}
>
<div className="flex flex-row items-center gap-2">
{groupIsGlobal === true && (
<EarthIcon className="icon-md text-green-400" aria-label="Global prompt group" />
)}
</div>
</ListCard>
<div className="absolute right-0 top-0 mr-1 mt-2.5 items-start pl-2">
<DropdownMenu modal={false}>
<DropdownMenuTrigger asChild>
<button
ref={triggerButtonRef}
id={`prompt-actions-${group._id}`}
type="button"
aria-label={localize('com_ui_sr_actions_menu', { name: group.name })}
@ -81,7 +88,7 @@ function ChatGroupItem({
e.stopPropagation();
}
}}
className="z-50 inline-flex h-8 w-8 items-center justify-center rounded-lg border border-border-medium bg-transparent p-0 text-sm font-medium transition-all duration-300 ease-in-out hover:border-border-heavy hover:bg-surface-hover focus:border-border-heavy focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50"
className="z-50 mr-2 inline-flex h-8 w-8 items-center justify-center rounded-lg border border-border-medium bg-transparent p-0 text-sm font-medium transition-all duration-300 ease-in-out hover:border-border-heavy hover:bg-surface-hover focus:border-border-heavy focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50"
>
<MenuIcon className="icon-md text-text-secondary" aria-hidden="true" />
</button>
@ -127,8 +134,17 @@ function ChatGroupItem({
</DropdownMenuContent>
</DropdownMenu>
</div>
</ListCard>
<PreviewPrompt group={group} open={isPreviewDialogOpen} onOpenChange={setPreviewDialogOpen} />
</div>
<PreviewPrompt
group={group}
open={isPreviewDialogOpen}
onOpenChange={setPreviewDialogOpen}
onCloseAutoFocus={() => {
requestAnimationFrame(() => {
triggerButtonRef.current?.focus({ preventScroll: true });
});
}}
/>
<VariableDialog
open={isVariableDialogOpen}
onClose={() => setVariableDialogOpen(false)}

15
client/src/components/Prompts/Groups/CreatePromptForm.tsx
View file

@ -104,6 +104,7 @@ const CreatePromptForm = ({
return (
<FormProvider {...methods}>
<form onSubmit={handleSubmit(onSubmit)} className="w-full px-4 py-2">
<h1 className="sr-only">{localize('com_ui_create_prompt_page')}</h1>
<div className="mb-1 flex flex-col items-center justify-between font-bold sm:text-xl md:mb-0 md:text-2xl">
<div className="flex w-full flex-col items-center justify-between sm:flex-row">
<Controller
@ -111,14 +112,22 @@ const CreatePromptForm = ({
control={control}
rules={{ required: localize('com_ui_prompt_name_required') }}
render={({ field }) => (
<div className="mb-1 flex items-center md:mb-0">
<div className="relative mb-1 flex flex-col md:mb-0">
<Input
{...field}
id="prompt-name"
type="text"
className="mr-2 w-full border border-border-medium p-2 text-2xl text-text-primary placeholder:text-text-tertiary dark:placeholder:text-text-secondary"
placeholder={`${localize('com_ui_prompt_name')}*`}
className="peer mr-2 w-full border border-border-medium p-2 text-2xl text-text-primary"
placeholder=" "
tabIndex={0}
aria-label={localize('com_ui_prompt_name')}
/>
<label
htmlFor="prompt-name"
className="pointer-events-none absolute -top-1 left-3 origin-[0] translate-y-3 scale-100 rounded bg-white px-1 text-base text-text-secondary transition-transform duration-200 peer-placeholder-shown:translate-y-3 peer-placeholder-shown:scale-100 peer-focus:-translate-y-2 peer-focus:scale-75 peer-focus:text-text-primary peer-[:not(:placeholder-shown)]:-translate-y-2 peer-[:not(:placeholder-shown)]:scale-75 dark:bg-gray-850"
>
{localize('com_ui_prompt_name')}*
</label>
<div
className={cn(
'mt-1 w-56 text-sm text-red-500',

193
client/src/components/Prompts/Groups/DashGroupItem.tsx
View file

@ -1,11 +1,11 @@
import { memo, useState, useRef, useMemo, useCallback, KeyboardEvent } from 'react';
import { EarthIcon, Pen } from 'lucide-react';
import { useNavigate, useParams } from 'react-router-dom';
import { Trans } from 'react-i18next';
import { PermissionBits, type TPromptGroup } from 'librechat-data-provider';
import {
Input,
Label,
Button,
OGDialog,
OGDialogTrigger,
OGDialogTemplate,
@ -62,8 +62,8 @@ function DashGroupItemComponent({ group, instanceProjectId }: DashGroupItemProps
}, [group._id, nameInputValue, updateGroup]);
const handleKeyDown = useCallback(
(e: KeyboardEvent<HTMLDivElement>) => {
if (e.key === 'Enter') {
(e: KeyboardEvent<HTMLButtonElement>) => {
if (e.key === 'Enter' || e.key === ' ') {
e.preventDefault();
navigate(`/d/prompts/${group._id}`, { replace: true });
}
@ -82,16 +82,26 @@ function DashGroupItemComponent({ group, instanceProjectId }: DashGroupItemProps
return (
<div
className={cn(
'mx-2 my-2 flex cursor-pointer rounded-lg border border-border-light bg-surface-primary p-3 shadow-sm transition-all duration-300 ease-in-out hover:bg-surface-secondary',
'relative mx-2 my-2 rounded-lg border border-border-light bg-surface-primary shadow-sm transition-all duration-300 ease-in-out hover:bg-surface-secondary',
params.promptId === group._id && 'bg-surface-hover',
)}
onClick={handleContainerClick}
onKeyDown={handleKeyDown}
role="button"
tabIndex={0}
aria-label={`${group.name} Prompt, ${localize('com_ui_category')}: ${group.category ?? ''}`}
>
<div className="flex w-full items-center justify-between">
<button
type="button"
className="flex w-full cursor-pointer items-center justify-between rounded-lg p-3 text-left"
onClick={handleContainerClick}
onKeyDown={handleKeyDown}
aria-label={
group.category
? localize('com_ui_prompt_group_button', {
name: group.name,
category: group.category,
})
: localize('com_ui_prompt_group_button_no_category', {
name: group.name,
})
}
>
<div className="flex items-center gap-2 truncate pr-2">
<CategoryIcon category={group.category ?? ''} className="icon-lg" aria-hidden="true" />
@ -107,80 +117,97 @@ function DashGroupItemComponent({ group, instanceProjectId }: DashGroupItemProps
aria-label={localize('com_ui_global_group')}
/>
)}
{canEdit && (
<OGDialog>
<OGDialogTrigger asChild>
<Button
variant="ghost"
onClick={(e) => e.stopPropagation()}
className="h-8 w-8 p-0 hover:bg-surface-hover"
aria-label={localize('com_ui_rename_prompt_name', { name: group.name })}
>
<Pen className="icon-sm text-text-primary" aria-hidden="true" />
</Button>
</OGDialogTrigger>
<OGDialogTemplate
showCloseButton={false}
title={localize('com_ui_rename_prompt')}
className="w-11/12 max-w-lg"
main={
<div className="flex w-full flex-col items-center gap-2">
<div className="grid w-full items-center gap-2">
<Input
value={nameInputValue}
onChange={(e) => setNameInputValue(e.target.value)}
className="w-full"
aria-label={localize('com_ui_rename_prompt_name', { name: group.name })}
/>
</div>
</div>
}
selection={{
selectHandler: handleSaveRename,
selectClasses:
'bg-surface-submit hover:bg-surface-submit-hover text-white disabled:hover:bg-surface-submit',
selectText: localize('com_ui_save'),
isLoading,
}}
/>
</OGDialog>
)}
{canDelete && (
<OGDialog>
<OGDialogTrigger asChild>
<Button
variant="ghost"
className="h-8 w-8 p-0 hover:bg-surface-hover"
onClick={(e) => e.stopPropagation()}
aria-label={localize('com_ui_delete_prompt_name', { name: group.name })}
>
<TrashIcon className="icon-sm text-text-primary" aria-hidden="true" />
</Button>
</OGDialogTrigger>
<OGDialogTemplate
showCloseButton={false}
title={localize('com_ui_delete_prompt')}
className="w-11/12 max-w-lg"
main={
<div className="flex w-full flex-col items-center gap-2">
<div className="grid w-full items-center gap-2">
<Label htmlFor="confirm-delete" className="text-left text-sm font-medium">
{localize('com_ui_delete_confirm')} <strong>{group.name}</strong>
</Label>
</div>
</div>
}
selection={{
selectHandler: triggerDelete,
selectClasses:
'bg-red-600 dark:bg-red-600 hover:bg-red-700 dark:hover:bg-red-800 text-white',
selectText: localize('com_ui_delete'),
}}
/>
</OGDialog>
)}
</div>
</button>
<div className="absolute right-0 top-0 mr-1 mt-2.5 flex items-start gap-1 pl-2">
{canEdit && (
<OGDialog>
<OGDialogTrigger asChild>
<button
type="button"
onClick={(e) => e.stopPropagation()}
onKeyDown={(e) => {
if (e.key === 'Enter' || e.key === ' ') {
e.stopPropagation();
}
}}
className="inline-flex h-8 w-8 items-center justify-center rounded-lg border border-border-medium bg-transparent p-0 text-sm font-medium transition-all duration-300 ease-in-out hover:border-border-heavy hover:bg-surface-hover focus:border-border-heavy focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50"
aria-label={localize('com_ui_rename_prompt_name', { name: group.name })}
>
<Pen className="icon-sm text-text-primary" aria-hidden="true" />
</button>
</OGDialogTrigger>
<OGDialogTemplate
showCloseButton={false}
title={localize('com_ui_rename_prompt')}
className="w-11/12 max-w-lg"
main={
<div className="flex w-full flex-col items-center gap-2">
<div className="grid w-full items-center gap-2">
<Input
value={nameInputValue}
onChange={(e) => setNameInputValue(e.target.value)}
className="w-full"
aria-label={localize('com_ui_rename_prompt_name', { name: group.name })}
/>
</div>
</div>
}
selection={{
selectHandler: handleSaveRename,
selectClasses:
'bg-surface-submit hover:bg-surface-submit-hover text-white disabled:hover:bg-surface-submit',
selectText: localize('com_ui_save'),
isLoading,
}}
/>
</OGDialog>
)}
{canDelete && (
<OGDialog>
<OGDialogTrigger asChild>
<button
type="button"
onClick={(e) => e.stopPropagation()}
onKeyDown={(e) => {
if (e.key === 'Enter' || e.key === ' ') {
e.stopPropagation();
}
}}
className="inline-flex h-8 w-8 items-center justify-center rounded-lg border border-border-medium bg-transparent p-0 text-sm font-medium transition-all duration-300 ease-in-out hover:border-border-heavy hover:bg-surface-hover focus:border-border-heavy focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50"
aria-label={localize('com_ui_delete_prompt_name', { name: group.name })}
>
<TrashIcon className="icon-sm text-text-primary" aria-hidden="true" />
</button>
</OGDialogTrigger>
<OGDialogTemplate
showCloseButton={false}
title={localize('com_ui_delete_prompt')}
className="w-11/12 max-w-lg"
main={
<div className="flex w-full flex-col items-center gap-2">
<div className="grid w-full items-center gap-2">
<Label htmlFor="confirm-delete" className="text-left text-sm font-medium">
<Trans
i18nKey="com_ui_delete_confirm_strong"
values={{ title: group.name }}
components={{ strong: <strong /> }}
/>
</Label>
</div>
</div>
}
selection={{
selectHandler: triggerDelete,
selectClasses:
'bg-red-600 dark:bg-red-600 hover:bg-red-700 dark:hover:bg-red-800 text-white',
selectText: localize('com_ui_delete'),
}}
/>
</OGDialog>
)}
</div>
</div>
);

30
client/src/components/Prompts/Groups/FilterPrompts.tsx
View file

@ -4,6 +4,7 @@ import { ListFilter, User, Share2 } from 'lucide-react';
import { SystemCategories } from 'librechat-data-provider';
import { Dropdown, AnimatedSearchInput } from '@librechat/client';
import type { Option } from '~/common';
import type { TranslationKeys } from '~/hooks';
import { useLocalize, useCategories } from '~/hooks';
import { usePromptGroupsContext } from '~/Providers';
import { cn } from '~/utils';
@ -11,11 +12,12 @@ import store from '~/store';
export default function FilterPrompts({ className = '' }: { className?: string }) {
const localize = useLocalize();
const { name, setName, hasAccess } = usePromptGroupsContext();
const { name, setName, hasAccess, promptGroups } = usePromptGroupsContext();
const { categories } = useCategories({ className: 'h-4 w-4', hasAccess });
const [displayName, setDisplayName] = useState(name || '');
const [isSearching, setIsSearching] = useState(false);
const [categoryFilter, setCategory] = useRecoilState(store.promptsCategory);
const [searchResultsAnnouncement, setSearchResultsAnnouncement] = useState('');
const filterOptions = useMemo(() => {
const baseOptions: Option[] = [
@ -81,8 +83,34 @@ export default function FilterPrompts({ className = '' }: { className?: string }
return () => clearTimeout(timeout);
}, [displayName, setName]);
useEffect(() => {
if (!displayName.trim() || isSearching) {
setSearchResultsAnnouncement('');
return;
}
const resultCount = promptGroups?.length ?? 0;
const announcement =
resultCount === 1
? localize('com_ui_result_found' as TranslationKeys, {
count: resultCount,
})
: localize('com_ui_results_found' as TranslationKeys, {
count: resultCount,
});
const timeout = setTimeout(() => {
setSearchResultsAnnouncement(announcement);
}, 300);
return () => clearTimeout(timeout);
}, [promptGroups?.length, displayName, isSearching, localize]);
return (
<div className={cn('flex w-full gap-2 text-text-primary', className)}>
<div aria-live="polite" className="sr-only">
{searchResultsAnnouncement}
</div>
<Dropdown
value={categoryFilter || SystemCategories.ALL}
onChange={onSelect}

48
client/src/components/Prompts/Groups/GroupSidePanel.tsx
View file

@ -1,23 +1,26 @@
import { useMemo } from 'react';
import { useLocation } from 'react-router-dom';
import { useMediaQuery } from '@librechat/client';
import { Button, Sidebar, TooltipAnchor } from '@librechat/client';
import ManagePrompts from '~/components/Prompts/ManagePrompts';
import { usePromptGroupsContext } from '~/Providers';
import List from '~/components/Prompts/Groups/List';
import PanelNavigation from './PanelNavigation';
import { useLocalize } from '~/hooks';
import { cn } from '~/utils';
export default function GroupSidePanel({
children,
isDetailView,
className = '',
closePanelRef,
onClose,
}: {
children?: React.ReactNode;
isDetailView?: boolean;
className?: string;
closePanelRef?: React.RefObject<HTMLButtonElement>;
onClose?: () => void;
}) {
const location = useLocation();
const isSmallerScreen = useMediaQuery('(max-width: 1024px)');
const localize = useLocalize();
const isChatRoute = useMemo(() => location.pathname?.startsWith('/c/'), [location.pathname]);
const { promptGroups, groupsQuery, nextPage, prevPage, hasNextPage, hasPreviousPage } =
@ -25,15 +28,42 @@ export default function GroupSidePanel({
return (
<div
id="prompts-panel"
className={cn(
'flex h-full w-full flex-col gap-2 md:mr-2 md:w-auto md:min-w-72 lg:w-1/4 xl:w-1/4',
isDetailView === true && isSmallerScreen ? 'hidden' : '',
'flex h-full w-full flex-col md:mr-2 md:w-auto md:min-w-72 lg:w-1/4 xl:w-1/4',
className,
)}
>
{children}
<div className={cn('flex-grow overflow-y-auto', isChatRoute ? '' : 'px-2 md:px-0')}>
<List groups={promptGroups} isChatRoute={isChatRoute} isLoading={!!groupsQuery.isLoading} />
{onClose && (
<div className="flex items-center justify-between px-2 py-[2px] md:py-2">
<TooltipAnchor
description={localize('com_nav_close_sidebar')}
render={
<Button
ref={closePanelRef}
size="icon"
variant="outline"
data-testid="close-prompts-panel-button"
aria-label={localize('com_nav_close_sidebar')}
aria-expanded={true}
className="rounded-full border-none bg-transparent p-2 hover:bg-surface-hover md:rounded-xl"
onClick={onClose}
>
<Sidebar />
</Button>
}
/>
</div>
)}
<div className="flex flex-1 flex-col gap-2 overflow-y-auto">
{children}
<div className={cn('relative flex h-full flex-col', isChatRoute ? '' : 'px-2 md:px-0')}>
<List
groups={promptGroups}
isChatRoute={isChatRoute}
isLoading={!!groupsQuery.isLoading}
/>
</div>
</div>
<div className={cn(isChatRoute ? '' : 'px-2 pb-3 pt-2 md:px-0')}>
<PanelNavigation

2
client/src/components/Prompts/Groups/ListCard.tsx
View file

@ -28,7 +28,7 @@ export default function ListCard({
<div
onClick={onClick}
onKeyDown={handleKeyDown}
className="relative my-2 flex w-full cursor-pointer flex-col gap-2 rounded-xl border border-border-light px-3 pb-4 pt-3 text-start align-top text-[15px] shadow-sm transition-all duration-300 ease-in-out hover:bg-surface-tertiary hover:shadow-lg"
className="relative flex w-full cursor-pointer flex-col gap-2 rounded-xl px-3 pb-4 pt-3 text-start align-top text-[15px]"
role="button"
tabIndex={0}
aria-labelledby={`card-title-${name}`}

42
client/src/components/Prompts/Groups/VariableForm.tsx
View file

@ -140,7 +140,7 @@ export default function VariableForm({
return (
<div className="mx-auto p-1 md:container">
<form onSubmit={handleSubmit(onSubmit)} className="space-y-4">
<div className="mb-6 max-h-screen max-w-[90vw] overflow-auto rounded-md bg-surface-tertiary p-4 text-text-secondary dark:bg-surface-primary sm:max-w-full md:max-h-96">
<div className="mb-6 max-h-screen max-w-[80vw] overflow-auto rounded-md bg-surface-tertiary p-4 text-text-secondary dark:bg-surface-primary sm:max-w-full md:max-h-96">
<ReactMarkdown
/** @ts-ignore */
remarkPlugins={[supersub, remarkGfm, [remarkMath, { singleDollarTextMath: false }]]}
@ -159,7 +159,7 @@ export default function VariableForm({
</div>
<div className="space-y-4">
{fields.map((field, index) => (
<div key={field.id} className="flex flex-col space-y-2">
<div key={field.id} className="relative flex flex-col space-y-2">
<Controller
name={`fields.${index}.value`}
control={control}
@ -171,7 +171,7 @@ export default function VariableForm({
placeholder={field.config.variable}
className={cn(
defaultTextProps,
'rounded px-3 py-2 focus:bg-surface-tertiary',
'mb-1 rounded px-3 py-2 focus:bg-surface-tertiary',
)}
value={value}
onChange={onChange}
@ -181,20 +181,28 @@ export default function VariableForm({
}
return (
<TextareaAutosize
ref={ref}
value={value}
onChange={onChange}
onBlur={onBlur}
id={`fields.${index}.value`}
className={cn(
defaultTextProps,
'rounded px-3 py-2 focus:bg-surface-tertiary',
)}
placeholder={field.config.variable}
maxRows={8}
aria-label={field.config.variable}
/>
<>
<TextareaAutosize
ref={ref}
value={value}
onChange={onChange}
onBlur={onBlur}
id={`fields.${index}.value`}
className={cn(
defaultTextProps,
'peer rounded px-3 py-2 focus:bg-surface-tertiary',
)}
placeholder=""
maxRows={8}
aria-label={field.config.variable}
/>
<label
htmlFor={`fields.${index}.value`}
className="absolute left-3 top-0 text-sm text-text-secondary transition-all duration-200 peer-focus:-top-6 peer-focus:left-1 peer-focus:text-xs peer-focus:text-text-primary peer-[:not(:placeholder-shown)]:-top-6 peer-[:not(:placeholder-shown)]:left-1 peer-[:not(:placeholder-shown)]:text-xs"
>
{field.config.variable}
</label>
</>
);
}}
/>

7
client/src/components/Prompts/PreviewPrompt.tsx
View file

@ -6,14 +6,19 @@ const PreviewPrompt = ({
group,
open,
onOpenChange,
onCloseAutoFocus,
}: {
group: TPromptGroup;
open: boolean;
onOpenChange: (open: boolean) => void;
onCloseAutoFocus?: () => void;
}) => {
return (
<OGDialog open={open} onOpenChange={onOpenChange}>
<OGDialogContent className="max-h-[90vh] w-11/12 max-w-full overflow-y-auto md:max-w-[60vw]">
<OGDialogContent
className="max-h-[90vh] w-11/12 max-w-full overflow-y-auto md:max-w-[60vw]"
onCloseAutoFocus={onCloseAutoFocus}
>
<div>
<PromptDetails group={group} />
</div>

2
client/src/components/Prompts/PromptVariables.tsx
View file

@ -74,7 +74,7 @@ const PromptVariables = ({
<span className="text-sm font-medium text-text-primary">
{localize('com_ui_dropdown_variables')}
</span>
<span className="text-sm text-text-secondary">
<span className="break-words text-sm text-text-secondary">
<ReactMarkdown components={components} className="markdown prose dark:prose-invert">
{localize('com_ui_dropdown_variables_info')}
</ReactMarkdown>

72
client/src/components/Prompts/PromptsView.tsx
View file

@ -1,17 +1,24 @@
import { useMemo, useEffect } from 'react';
import { useMemo, useEffect, useState, useCallback, useRef } from 'react';
import { Outlet, useParams, useNavigate } from 'react-router-dom';
import { PermissionTypes, Permissions } from 'librechat-data-provider';
import FilterPrompts from '~/components/Prompts/Groups/FilterPrompts';
import DashBreadcrumb from '~/routes/Layouts/DashBreadcrumb';
import GroupSidePanel from './Groups/GroupSidePanel';
import { useHasAccess, useLocalize } from '~/hooks';
import { PromptGroupsProvider } from '~/Providers';
import { useHasAccess } from '~/hooks';
import { useMediaQuery } from '@librechat/client';
import { cn } from '~/utils';
export default function PromptsView() {
const params = useParams();
const navigate = useNavigate();
const isDetailView = useMemo(() => !!(params.promptId || params['*'] === 'new'), [params]);
const isSmallerScreen = useMediaQuery('(max-width: 768px)');
const [panelVisible, setPanelVisible] = useState(!isSmallerScreen);
const openPanelRef = useRef<HTMLButtonElement>(null);
const closePanelRef = useRef<HTMLButtonElement>(null);
const localize = useLocalize();
const hasAccess = useHasAccess({
permissionType: PermissionTypes.PROMPTS,
permission: Permissions.USE,
@ -29,6 +36,26 @@ export default function PromptsView() {
};
}, [hasAccess, navigate]);
const togglePanel = useCallback(() => {
setPanelVisible((prev) => {
const newValue = !prev;
requestAnimationFrame(() => {
if (newValue) {
closePanelRef?.current?.focus();
} else {
openPanelRef?.current?.focus();
}
});
return newValue;
});
}, []);
useEffect(() => {
if (isSmallerScreen && isDetailView) {
setPanelVisible(false);
}
}, [isSmallerScreen, isDetailView]);
if (!hasAccess) {
return null;
}
@ -36,13 +63,42 @@ export default function PromptsView() {
return (
<PromptGroupsProvider>
<div className="flex h-screen w-full flex-col bg-surface-primary p-0 lg:p-2">
<DashBreadcrumb />
<div className="flex w-full flex-grow flex-row divide-x overflow-hidden dark:divide-gray-600">
<GroupSidePanel isDetailView={isDetailView}>
<div className="mt-1 flex flex-row items-center justify-between px-2 md:px-2">
<FilterPrompts />
<DashBreadcrumb
showToggle={isSmallerScreen && isDetailView}
onToggle={togglePanel}
openPanelRef={openPanelRef}
/>
<div className="flex w-full flex-grow flex-row overflow-hidden">
{isSmallerScreen && panelVisible && isDetailView && (
<div
className="fixed inset-0 z-40 bg-black/50 transition-opacity"
onClick={togglePanel}
role="button"
tabIndex={0}
aria-label={localize('com_nav_toggle_sidebar')}
/>
)}
{(!isSmallerScreen || !isDetailView || panelVisible) && (
<div
className={cn(
'transition-transform duration-300 ease-in-out',
isSmallerScreen && isDetailView
? 'fixed left-0 top-0 z-50 h-full w-[320px] bg-surface-primary'
: 'flex',
)}
>
<GroupSidePanel
closePanelRef={closePanelRef}
onClose={isSmallerScreen && isDetailView ? togglePanel : undefined}
>
<div className="mt-1 flex flex-row items-center justify-between px-2 md:px-2">
<FilterPrompts />
</div>
</GroupSidePanel>
</div>
</GroupSidePanel>
)}
<div
className={cn(
'scrollbar-gutter-stable w-full overflow-y-auto lg:w-3/4 xl:w-3/4',