mirror of
https://github.com/danny-avila/LibreChat.git
synced 2025-12-16 16:30:15 +01:00
♿ fix: Address Accessibility Issues (#10260)
* chore: add i18n localization comment for AlwaysMakeProd component * feat: enhance accessibility by adding aria-label and aria-labelledby to Switch component * feat: add aria-labels for accessibility in Agent and Assistant avatar buttons * fix: add switch aria-labels for accessibility in various components * feat: add aria-labels and localization keys for accessibility in DataTable, DataTableColumnHeader, and OGDialogTemplate components * chore: refactor out nested ternary * feat: add aria-label to DataTable filter button for My Files modal * feat: add aria-labels for Buttons and localization strings * feat: add aria-labels to Checkboxes in Agent Builder * feat: enhance accessibility by adding aria-label and aria-labelledby to Checkbox component * feat: add aria-label to FileSearchCheckbox in Agent Builder * feat: add aria-label to Prompts text input area * feat: enhance accessibility by adding aria-label and aria-labelledby to TextAreaAutosize component * feat: remove improper role: "list" prop from List in Conversations.tsx to enhance accessibility and stop aria rules conflicting within react-virtualized component * feat: enhance accessibility by allowing tab navigation and adding ring highlights for conversation title editing accept/reject buttons * feat: add aria-label to Copy Link button in the conversation share modal * feat: add title to QR code svg in conversation share modal to describe the image content * feat: enhance accessibility by making Agent Avatar upload keyboard navigable and round out highlight border on focus * feat: enhance accessibility by adding aria attributes around alerting users with screen readers to invalid email address inputs in the Agent Builder * feat: add aria-labels to buttons in Advanced panel of Agent Builder * feat: enhance accessibility by making FileUpload and Clear All buttons in PresetItems keyboard navigable * feat: enchance accessiblity by indexing view and delete button aria-labels in shared links management modal to their specific chat titles * feat: add border highlighting on focus for AnimatedSearchInput * feat: add category description to aria-labels for prompts in ListCard * feat: add proper scoping to rows and columns in table headers * feat: add localized aria-labelling to EditTextPart's TextAreaAutosize component and base dynamic paramters panel components and their supporting translation keys * feat: add localized aria-labels and aria-labelledBy to Checkbox components without them * feat: add localized aria-labeledBy for endpoint settings Sliders * feat: add localized aria-labels for TextareaAutosize components * chore: remove unused i18n string * feat: add localized aria-label for BookmarkForm Checkbox * fix: add stopPropagation onKeyDown for Preview and Edit menu items in prompts that was causing the prompts to inadvertently be sent when triggered with keyboard navigation when Auto-send Prompts was toggled on * fix: switch TableCell to TableHead for title cells according to harvard issue #789 * fix: add more descriptive localization key for file filter button in DataTable * chore: remove self-explanatory code comment from RenameForm * fix: remove stray bg-yellow highlight that was left in during debugging * fix: add aria-label to model configurator panel back button * fix: undo incorrect hoist of tool name split for aria-label and span in MCPInput --------- Co-authored-by: Danny Avila <danny@librechat.ai>
This commit is contained in:
Dustin Healy
GitHub
parent
33d6b337bc
commit
0446d0e190
74 changed files with 427 additions and 131 deletions
|
|
@ -58,6 +58,7 @@ const LabelController: React.FC<LabelControllerProps> = ({
|
|||
checked={field.value}
|
||||
onCheckedChange={field.onChange}
|
||||
value={field.value.toString()}
|
||||
aria-label={label}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -129,7 +129,11 @@ const BookmarkForm = ({
|
|||
</div>
|
||||
|
||||
<div className="mt-4 grid w-full items-center gap-2">
|
||||
<Label htmlFor="bookmark-description" className="text-left text-sm font-medium">
|
||||
<Label
|
||||
id="bookmark-description-label"
|
||||
htmlFor="bookmark-description"
|
||||
className="text-left text-sm font-medium"
|
||||
>
|
||||
{localize('com_ui_bookmarks_description')}
|
||||
</Label>
|
||||
<TextareaAutosize
|
||||
|
|
@ -147,6 +151,7 @@ const BookmarkForm = ({
|
|||
className={cn(
|
||||
'flex h-10 max-h-[250px] min-h-[100px] w-full resize-none rounded-lg border border-input bg-transparent px-3 py-2 text-sm ring-offset-background focus-visible:outline-none',
|
||||
)}
|
||||
aria-labelledby="bookmark-description-label"
|
||||
/>
|
||||
</div>
|
||||
{conversationId != null && conversationId && (
|
||||
|
|
@ -161,6 +166,7 @@ const BookmarkForm = ({
|
|||
onCheckedChange={field.onChange}
|
||||
className="relative float-left mr-2 inline-flex h-4 w-4 cursor-pointer"
|
||||
value={field.value?.toString()}
|
||||
aria-label={localize('com_ui_bookmarks_add_to_conversation')}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -12,6 +12,7 @@ import {
|
|||
import {
|
||||
useTextarea,
|
||||
useAutoSave,
|
||||
useLocalize,
|
||||
useRequiresKey,
|
||||
useHandleKeyUp,
|
||||
useQueryParams,
|
||||
|
|
@ -38,6 +39,7 @@ const ChatForm = memo(({ index = 0 }: { index?: number }) => {
|
|||
const submitButtonRef = useRef<HTMLButtonElement>(null);
|
||||
const textAreaRef = useRef<HTMLTextAreaElement>(null);
|
||||
useFocusChatEffect(textAreaRef);
|
||||
const localize = useLocalize();
|
||||
|
||||
const [isCollapsed, setIsCollapsed] = useState(false);
|
||||
const [, setIsScrollable] = useState(false);
|
||||
|
|
@ -279,6 +281,7 @@ const ChatForm = memo(({ index = 0 }: { index?: number }) => {
|
|||
setIsTextAreaFocused(true);
|
||||
}}
|
||||
onBlur={setIsTextAreaFocused.bind(null, false)}
|
||||
aria-label={localize('com_ui_message_input')}
|
||||
onClick={handleFocusOrClick}
|
||||
style={{ height: 44, overflowY: 'auto' }}
|
||||
className={cn(
|
||||
|
|
|
|||
|
|
@ -62,17 +62,28 @@ const FileUpload: React.FC<FileUploadProps> = ({
|
|||
statusText = invalidText ?? localize('com_ui_upload_invalid');
|
||||
}
|
||||
|
||||
const handleClick = () => {
|
||||
const fileInput = document.getElementById(`file-upload-${id}`) as HTMLInputElement;
|
||||
if (fileInput) {
|
||||
fileInput.click();
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<label
|
||||
htmlFor={`file-upload-${id}`}
|
||||
className={cn(
|
||||
'mr-1 flex h-auto cursor-pointer items-center rounded bg-transparent px-2 py-1 text-xs font-normal transition-colors hover:bg-gray-100 hover:text-green-600 dark:bg-transparent dark:text-gray-300 dark:hover:bg-gray-700 dark:hover:text-green-500',
|
||||
statusColor,
|
||||
containerClassName,
|
||||
)}
|
||||
>
|
||||
<FileUp className="mr-1 flex w-[22px] items-center stroke-1" />
|
||||
<span className="flex text-xs">{statusText}</span>
|
||||
<>
|
||||
<button
|
||||
type="button"
|
||||
onClick={handleClick}
|
||||
className={cn(
|
||||
'mr-1 flex h-auto cursor-pointer items-center rounded bg-transparent px-2 py-1 text-xs font-normal transition-colors hover:bg-gray-100 hover:text-green-600 focus:ring-ring dark:bg-transparent dark:text-gray-300 dark:hover:bg-gray-700 dark:hover:text-green-500',
|
||||
statusColor,
|
||||
containerClassName,
|
||||
)}
|
||||
aria-label={statusText}
|
||||
>
|
||||
<FileUp className="mr-1 flex w-[22px] items-center stroke-1" aria-hidden="true" />
|
||||
<span className="flex text-xs">{statusText}</span>
|
||||
</button>
|
||||
<input
|
||||
id={`file-upload-${id}`}
|
||||
value=""
|
||||
|
|
@ -80,8 +91,9 @@ const FileUpload: React.FC<FileUploadProps> = ({
|
|||
className={cn('hidden', className)}
|
||||
accept=".json"
|
||||
onChange={handleFileChange}
|
||||
tabIndex={-1}
|
||||
/>
|
||||
</label>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -122,7 +122,11 @@ export default function DataTable<TData, TValue>({ columns, data }: DataTablePro
|
|||
/>
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button variant="outline" className={cn('min-w-[40px]', isSmallScreen && 'px-2 py-1')}>
|
||||
<Button
|
||||
variant="outline"
|
||||
aria-label={localize('com_files_filter_by')}
|
||||
className={cn('min-w-[40px]', isSmallScreen && 'px-2 py-1')}
|
||||
>
|
||||
<ListFilter className="size-3.5 sm:size-4" />
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
|
|
|
|||
|
|
@ -59,9 +59,10 @@ const PresetItems: FC<{
|
|||
</label>
|
||||
<Dialog>
|
||||
<DialogTrigger asChild>
|
||||
<label
|
||||
htmlFor="file-upload"
|
||||
className="mr-1 flex h-[32px] cursor-pointer items-center rounded bg-transparent px-2 py-1 text-xs font-medium text-gray-600 transition-colors hover:bg-gray-100 hover:text-red-700 dark:bg-transparent dark:text-gray-300 dark:hover:bg-gray-700 dark:hover:text-red-700"
|
||||
<button
|
||||
type="button"
|
||||
className="mr-1 flex h-[32px] cursor-pointer items-center rounded bg-transparent px-2 py-1 text-xs font-medium text-gray-600 transition-colors hover:bg-gray-100 hover:text-red-700 focus:ring-ring dark:bg-transparent dark:text-gray-300 dark:hover:bg-gray-700 dark:hover:text-red-700"
|
||||
aria-label={localize('com_ui_clear') + ' ' + localize('com_ui_all')}
|
||||
>
|
||||
<svg
|
||||
width="24"
|
||||
|
|
@ -70,11 +71,12 @@ const PresetItems: FC<{
|
|||
fill="currentColor"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
className="mr-1 flex w-[22px] items-center"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path d="M9.293 0H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V4.707A1 1 0 0 0 13.707 4L10 .293A1 1 0 0 0 9.293 0M9.5 3.5v-2l3 3h-2a1 1 0 0 1-1-1M6.854 7.146 8 8.293l1.146-1.147a.5.5 0 1 1 .708.708L8.707 9l1.147 1.146a.5.5 0 0 1-.708.708L8 9.707l-1.146 1.147a.5.5 0 0 1-.708-.708L7.293 9 6.146 7.854a.5.5 0 1 1 .708-.708"></path>
|
||||
</svg>
|
||||
{localize('com_ui_clear')} {localize('com_ui_all')}
|
||||
</label>
|
||||
</button>
|
||||
</DialogTrigger>
|
||||
<DialogTemplate
|
||||
showCloseButton={false}
|
||||
|
|
|
|||
|
|
@ -168,6 +168,7 @@ const EditMessage = ({
|
|||
'max-h-[65vh] pr-3 md:max-h-[75vh] md:pr-4',
|
||||
removeFocusRings,
|
||||
)}
|
||||
aria-label={localize('com_ui_message_input')}
|
||||
dir={isRTL ? 'rtl' : 'ltr'}
|
||||
/>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -170,6 +170,7 @@ const EditTextPart = ({
|
|||
'max-h-[65vh] pr-3 md:max-h-[75vh] md:pr-4',
|
||||
removeFocusRings,
|
||||
)}
|
||||
aria-label={localize('com_ui_editable_message')}
|
||||
dir={isRTL ? 'rtl' : 'ltr'}
|
||||
/>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -201,7 +201,6 @@ const Conversations: FC<ConversationsProps> = ({
|
|||
overscanRowCount={10}
|
||||
className="outline-none"
|
||||
style={{ outline: 'none' }}
|
||||
role="list"
|
||||
aria-label="Conversations"
|
||||
onRowsRendered={handleRowsRendered}
|
||||
tabIndex={-1}
|
||||
|
|
|
|||
|
|
@ -77,7 +77,13 @@ export default function ShareButton({
|
|||
<div className="relative items-center rounded-lg p-2">
|
||||
{showQR && (
|
||||
<div className="mb-4 flex flex-col items-center">
|
||||
<QRCodeSVG value={sharedLink} size={200} marginSize={2} className="rounded-2xl" />
|
||||
<QRCodeSVG
|
||||
value={sharedLink}
|
||||
size={200}
|
||||
marginSize={2}
|
||||
className="rounded-2xl"
|
||||
title={localize('com_ui_share_qr_code_description')}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
|
|
@ -87,6 +93,7 @@ export default function ShareButton({
|
|||
<Button
|
||||
size="sm"
|
||||
variant="outline"
|
||||
aria-label={localize('com_ui_copy_link')}
|
||||
onClick={() => {
|
||||
if (isCopying) {
|
||||
return;
|
||||
|
|
|
|||
|
|
@ -34,6 +34,8 @@ const RenameForm: React.FC<RenameFormProps> = ({
|
|||
case 'Enter':
|
||||
onSubmit(titleInput);
|
||||
break;
|
||||
case 'Tab':
|
||||
break;
|
||||
}
|
||||
};
|
||||
|
||||
|
|
@ -50,22 +52,23 @@ const RenameForm: React.FC<RenameFormProps> = ({
|
|||
value={titleInput}
|
||||
onChange={(e) => setTitleInput(e.target.value)}
|
||||
onKeyDown={handleKeyDown}
|
||||
onBlur={() => onSubmit(titleInput)}
|
||||
maxLength={100}
|
||||
aria-label={localize('com_ui_new_conversation_title')}
|
||||
/>
|
||||
<div className="flex gap-1" role="toolbar">
|
||||
<button
|
||||
onClick={() => onCancel()}
|
||||
className="p-1 hover:opacity-70 focus:outline-none focus:ring-2"
|
||||
className="rounded-md p-1 hover:opacity-70 focus:outline-none focus:ring-2 focus:ring-ring"
|
||||
aria-label={localize('com_ui_cancel')}
|
||||
type="button"
|
||||
>
|
||||
<X className="h-4 w-4" aria-hidden="true" />
|
||||
</button>
|
||||
<button
|
||||
onClick={() => onSubmit(titleInput)}
|
||||
className="p-1 hover:opacity-70 focus:outline-none focus:ring-2"
|
||||
className="rounded-md p-1 hover:opacity-70 focus:outline-none focus:ring-2 focus:ring-ring"
|
||||
aria-label={localize('com_ui_save')}
|
||||
type="button"
|
||||
>
|
||||
<Check className="h-4 w-4" aria-hidden="true" />
|
||||
</button>
|
||||
|
|
|
|||
|
|
@ -151,6 +151,7 @@ export default function Settings({
|
|||
min={0}
|
||||
step={0.01}
|
||||
className="flex h-4 w-full"
|
||||
aria-labelledby="temp-int"
|
||||
/>
|
||||
</HoverCardTrigger>
|
||||
<OptionHover endpoint={optionEndpoint ?? ''} type="temp" side={ESide.Left} />
|
||||
|
|
@ -160,7 +161,9 @@ export default function Settings({
|
|||
<div className="flex justify-between">
|
||||
<Label htmlFor="top-p-int" className="text-left text-sm font-medium">
|
||||
{localize('com_endpoint_top_p')}{' '}
|
||||
<small className="opacity-40">({localize('com_endpoint_default')}: 1)</small>
|
||||
<small className="opacity-40">
|
||||
({localize('com_endpoint_default_with_num', { 0: '1' })})
|
||||
</small>
|
||||
</Label>
|
||||
<InputNumber
|
||||
id="top-p-int"
|
||||
|
|
@ -189,6 +192,7 @@ export default function Settings({
|
|||
min={0}
|
||||
step={0.01}
|
||||
className="flex h-4 w-full"
|
||||
aria-labelledby="top-p-int"
|
||||
/>
|
||||
</HoverCardTrigger>
|
||||
<OptionHover endpoint={optionEndpoint ?? ''} type="topp" side={ESide.Left} />
|
||||
|
|
@ -199,7 +203,9 @@ export default function Settings({
|
|||
<div className="flex justify-between">
|
||||
<Label htmlFor="freq-penalty-int" className="text-left text-sm font-medium">
|
||||
{localize('com_endpoint_frequency_penalty')}{' '}
|
||||
<small className="opacity-40">({localize('com_endpoint_default')}: 0)</small>
|
||||
<small className="opacity-40">
|
||||
({localize('com_endpoint_default_with_num', { 0: '0' })})
|
||||
</small>
|
||||
</Label>
|
||||
<InputNumber
|
||||
id="freq-penalty-int"
|
||||
|
|
@ -228,6 +234,7 @@ export default function Settings({
|
|||
min={-2}
|
||||
step={0.01}
|
||||
className="flex h-4 w-full"
|
||||
aria-labelledby="freq-penalty-int"
|
||||
/>
|
||||
</HoverCardTrigger>
|
||||
<OptionHover endpoint={optionEndpoint ?? ''} type="freq" side={ESide.Left} />
|
||||
|
|
@ -238,7 +245,9 @@ export default function Settings({
|
|||
<div className="flex justify-between">
|
||||
<Label htmlFor="pres-penalty-int" className="text-left text-sm font-medium">
|
||||
{localize('com_endpoint_presence_penalty')}{' '}
|
||||
<small className="opacity-40">({localize('com_endpoint_default')}: 0)</small>
|
||||
<small className="opacity-40">
|
||||
({localize('com_endpoint_default_with_num', { 0: '0' })})
|
||||
</small>
|
||||
</Label>
|
||||
<InputNumber
|
||||
id="pres-penalty-int"
|
||||
|
|
@ -267,6 +276,7 @@ export default function Settings({
|
|||
min={-2}
|
||||
step={0.01}
|
||||
className="flex h-4 w-full"
|
||||
aria-labelledby="pres-penalty-int"
|
||||
/>
|
||||
</HoverCardTrigger>
|
||||
<OptionHover endpoint={optionEndpoint ?? ''} type="pres" side={ESide.Left} />
|
||||
|
|
@ -306,6 +316,7 @@ export default function Settings({
|
|||
onCheckedChange={(checked: boolean) => setResendFiles(checked)}
|
||||
disabled={readonly}
|
||||
className="flex"
|
||||
aria-label={localize('com_endpoint_plug_resend_files')}
|
||||
/>
|
||||
<OptionHover endpoint={optionEndpoint ?? ''} type="resend" side={ESide.Bottom} />
|
||||
</HoverCardTrigger>
|
||||
|
|
@ -323,6 +334,7 @@ export default function Settings({
|
|||
max={2}
|
||||
min={0}
|
||||
step={1}
|
||||
aria-label={localize('com_endpoint_plug_image_detail')}
|
||||
/>
|
||||
<OptionHover endpoint={optionEndpoint ?? ''} type="detail" side={ESide.Bottom} />
|
||||
</HoverCardTrigger>
|
||||
|
|
|
|||
|
|
@ -53,7 +53,9 @@ export default function Settings({ conversation, setOption, models, readonly }:
|
|||
<div className="flex justify-between">
|
||||
<Label htmlFor="temp-int" className="text-left text-sm font-medium">
|
||||
{localize('com_endpoint_temperature')}{' '}
|
||||
<small className="opacity-40">({localize('com_endpoint_default')}: 0)</small>
|
||||
<small className="opacity-40">
|
||||
({localize('com_endpoint_default_with_num', { 0: '0' })})
|
||||
</small>
|
||||
</Label>
|
||||
<InputNumber
|
||||
id="temp-int"
|
||||
|
|
@ -82,6 +84,7 @@ export default function Settings({ conversation, setOption, models, readonly }:
|
|||
min={0}
|
||||
step={0.01}
|
||||
className="flex h-4 w-full"
|
||||
aria-labelledby="temp-int"
|
||||
/>
|
||||
</HoverCardTrigger>
|
||||
<OptionHover endpoint={conversation.endpoint ?? ''} type="temp" side={ESide.Left} />
|
||||
|
|
@ -101,6 +104,7 @@ export default function Settings({ conversation, setOption, models, readonly }:
|
|||
onCheckedChange={onCheckedChangeAgent}
|
||||
disabled={readonly}
|
||||
className="ml-4 mt-2"
|
||||
aria-label={localize('com_endpoint_plug_use_functions')}
|
||||
/>
|
||||
</HoverCardTrigger>
|
||||
<OptionHover endpoint={conversation.endpoint ?? ''} type="func" side={ESide.Bottom} />
|
||||
|
|
@ -119,6 +123,7 @@ export default function Settings({ conversation, setOption, models, readonly }:
|
|||
onCheckedChange={onCheckedChangeSkip}
|
||||
disabled={readonly}
|
||||
className="ml-4 mt-2"
|
||||
aria-label={localize('com_endpoint_plug_skip_completion')}
|
||||
/>
|
||||
</HoverCardTrigger>
|
||||
<OptionHover endpoint={conversation.endpoint ?? ''} type="skip" side={ESide.Bottom} />
|
||||
|
|
|
|||
|
|
@ -171,6 +171,7 @@ export default function Settings({ conversation, setOption, models, readonly }:
|
|||
min={google.temperature.min}
|
||||
step={google.temperature.step}
|
||||
className="flex h-4 w-full"
|
||||
aria-labelledby="temp-int"
|
||||
/>
|
||||
</HoverCardTrigger>
|
||||
<OptionHover endpoint={conversation.endpoint ?? ''} type="temp" side={ESide.Left} />
|
||||
|
|
@ -211,6 +212,7 @@ export default function Settings({ conversation, setOption, models, readonly }:
|
|||
min={google.topP.min}
|
||||
step={google.topP.step}
|
||||
className="flex h-4 w-full"
|
||||
aria-labelledby="top-p-int"
|
||||
/>
|
||||
</HoverCardTrigger>
|
||||
<OptionHover endpoint={conversation.endpoint ?? ''} type="topp" side={ESide.Left} />
|
||||
|
|
@ -252,6 +254,7 @@ export default function Settings({ conversation, setOption, models, readonly }:
|
|||
min={google.topK.min}
|
||||
step={google.topK.step}
|
||||
className="flex h-4 w-full"
|
||||
aria-labelledby="top-k-int"
|
||||
/>
|
||||
</HoverCardTrigger>
|
||||
<OptionHover endpoint={conversation.endpoint ?? ''} type="topk" side={ESide.Left} />
|
||||
|
|
@ -296,6 +299,7 @@ export default function Settings({ conversation, setOption, models, readonly }:
|
|||
min={google.maxOutputTokens.min}
|
||||
step={google.maxOutputTokens.step}
|
||||
className="flex h-4 w-full"
|
||||
aria-labelledby="max-tokens-int"
|
||||
/>
|
||||
</HoverCardTrigger>
|
||||
<OptionHover
|
||||
|
|
|
|||
|
|
@ -256,6 +256,7 @@ export default function Settings({
|
|||
min={0}
|
||||
step={0.01}
|
||||
className="flex h-4 w-full"
|
||||
aria-labelledby="temp-int"
|
||||
/>
|
||||
</HoverCardTrigger>
|
||||
<OptionHover endpoint={conversation.endpoint ?? ''} type="temp" side={ESide.Left} />
|
||||
|
|
@ -296,6 +297,7 @@ export default function Settings({
|
|||
min={0}
|
||||
step={0.01}
|
||||
className="flex h-4 w-full"
|
||||
aria-labelledby="top-p-int"
|
||||
/>
|
||||
</HoverCardTrigger>
|
||||
<OptionHover endpoint={conversation.endpoint ?? ''} type="topp" side={ESide.Left} />
|
||||
|
|
@ -337,6 +339,7 @@ export default function Settings({
|
|||
min={-2}
|
||||
step={0.01}
|
||||
className="flex h-4 w-full"
|
||||
aria-labelledby="freq-penalty-int"
|
||||
/>
|
||||
</HoverCardTrigger>
|
||||
<OptionHover endpoint={conversation.endpoint ?? ''} type="freq" side={ESide.Left} />
|
||||
|
|
@ -378,6 +381,7 @@ export default function Settings({
|
|||
min={-2}
|
||||
step={0.01}
|
||||
className="flex h-4 w-full"
|
||||
aria-labelledby="pres-penalty-int"
|
||||
/>
|
||||
</HoverCardTrigger>
|
||||
<OptionHover endpoint={conversation.endpoint ?? ''} type="pres" side={ESide.Left} />
|
||||
|
|
|
|||
|
|
@ -124,13 +124,15 @@ export default function ExportModal({
|
|||
disabled={!exportOptionsSupport}
|
||||
checked={includeOptions}
|
||||
onCheckedChange={setIncludeOptions}
|
||||
aria-labelledby="includeOptions-label"
|
||||
/>
|
||||
<label
|
||||
id="includeOptions-label"
|
||||
htmlFor="includeOptions"
|
||||
className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70 dark:text-gray-50"
|
||||
>
|
||||
{exportOptionsSupport
|
||||
? localize('com_nav_enabled')
|
||||
? localize('com_nav_export_include_endpoint_options')
|
||||
: localize('com_nav_not_supported')}
|
||||
</label>
|
||||
</div>
|
||||
|
|
@ -146,13 +148,15 @@ export default function ExportModal({
|
|||
disabled={!exportBranchesSupport}
|
||||
checked={exportBranches}
|
||||
onCheckedChange={setExportBranches}
|
||||
aria-labelledby="exportBranches-label"
|
||||
/>
|
||||
<label
|
||||
id="exportBranches-label"
|
||||
htmlFor="exportBranches"
|
||||
className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70 dark:text-gray-50"
|
||||
>
|
||||
{exportBranchesSupport
|
||||
? localize('com_nav_enabled')
|
||||
? localize('com_nav_export_all_message_branches')
|
||||
: localize('com_nav_not_supported')}
|
||||
</label>
|
||||
</div>
|
||||
|
|
@ -163,8 +167,14 @@ export default function ExportModal({
|
|||
{localize('com_nav_export_recursive_or_sequential')}
|
||||
</Label>
|
||||
<div className="flex h-[40px] w-full items-center space-x-3">
|
||||
<Checkbox id="recursive" checked={recursive} onCheckedChange={setRecursive} />
|
||||
<Checkbox
|
||||
id="recursive"
|
||||
checked={recursive}
|
||||
onCheckedChange={setRecursive}
|
||||
aria-labelledby="recursive-label"
|
||||
/>
|
||||
<label
|
||||
id="recursive-label"
|
||||
htmlFor="recursive"
|
||||
className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70 dark:text-gray-50"
|
||||
>
|
||||
|
|
|
|||
|
|
@ -30,6 +30,7 @@ export default function SaveBadgesState({
|
|||
onCheckedChange={handleCheckedChange}
|
||||
className="ml-4"
|
||||
data-testid="saveBadgesState"
|
||||
aria-label={localize('com_nav_save_badges_state')}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -30,6 +30,7 @@ export default function SaveDraft({
|
|||
onCheckedChange={handleCheckedChange}
|
||||
className="ml-4"
|
||||
data-testid="showThinking"
|
||||
aria-label={localize('com_nav_show_thinking')}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -13,7 +13,6 @@ import {
|
|||
useMediaQuery,
|
||||
OGDialogHeader,
|
||||
OGDialogTitle,
|
||||
TooltipAnchor,
|
||||
DataTable,
|
||||
Spinner,
|
||||
Button,
|
||||
|
|
@ -246,37 +245,27 @@ export default function SharedLinks() {
|
|||
},
|
||||
cell: ({ row }) => (
|
||||
<div className="flex items-center gap-2">
|
||||
<TooltipAnchor
|
||||
description={localize('com_ui_view_source')}
|
||||
render={
|
||||
<Button
|
||||
variant="ghost"
|
||||
className="h-8 w-8 p-0 hover:bg-surface-hover"
|
||||
onClick={() => {
|
||||
window.open(`/c/${row.original.conversationId}`, '_blank');
|
||||
}}
|
||||
title={localize('com_ui_view_source')}
|
||||
>
|
||||
<MessageSquare className="size-4" />
|
||||
</Button>
|
||||
}
|
||||
/>
|
||||
<TooltipAnchor
|
||||
description={localize('com_ui_delete')}
|
||||
render={
|
||||
<Button
|
||||
variant="ghost"
|
||||
className="h-8 w-8 p-0 hover:bg-surface-hover"
|
||||
onClick={() => {
|
||||
setDeleteRow(row.original);
|
||||
setIsDeleteOpen(true);
|
||||
}}
|
||||
title={localize('com_ui_delete')}
|
||||
>
|
||||
<TrashIcon className="size-4" />
|
||||
</Button>
|
||||
}
|
||||
/>
|
||||
<Button
|
||||
variant="ghost"
|
||||
className="h-8 w-8 p-0 hover:bg-surface-hover"
|
||||
onClick={() => {
|
||||
window.open(`/c/${row.original.conversationId}`, '_blank');
|
||||
}}
|
||||
aria-label={`${localize('com_ui_view_source')} - ${row.original.title || localize('com_ui_untitled')}`}
|
||||
>
|
||||
<MessageSquare className="size-4" aria-hidden="true" />
|
||||
</Button>
|
||||
<Button
|
||||
variant="ghost"
|
||||
className="h-8 w-8 p-0 hover:bg-surface-hover"
|
||||
onClick={() => {
|
||||
setDeleteRow(row.original);
|
||||
setIsDeleteOpen(true);
|
||||
}}
|
||||
aria-label={`${localize('com_ui_delete')} - ${row.original.title || localize('com_ui_untitled')}`}
|
||||
>
|
||||
<TrashIcon className="size-4" aria-hidden="true" />
|
||||
</Button>
|
||||
</div>
|
||||
),
|
||||
},
|
||||
|
|
|
|||
|
|
@ -53,6 +53,7 @@ const LabelController: React.FC<LabelControllerProps> = ({
|
|||
}
|
||||
}}
|
||||
value={field.value.toString()}
|
||||
aria-label={label}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
|
|
@ -216,7 +217,12 @@ const AdminSettings = () => {
|
|||
))}
|
||||
</div>
|
||||
<div className="flex justify-end">
|
||||
<Button type="submit" disabled={isSubmitting || isLoading} variant="submit">
|
||||
<Button
|
||||
type="submit"
|
||||
disabled={isSubmitting || isLoading}
|
||||
variant="submit"
|
||||
aria-label={localize('com_ui_save')}
|
||||
>
|
||||
{localize('com_ui_save')}
|
||||
</Button>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -28,7 +28,7 @@ export default function AlwaysMakeProd({
|
|||
checked={alwaysMakeProd}
|
||||
onCheckedChange={handleCheckedChange}
|
||||
data-testid="alwaysMakeProd"
|
||||
aria-label="Always make prompt production"
|
||||
aria-label={localize('com_nav_always_make_prod')}
|
||||
/>
|
||||
<div>{localize('com_nav_always_make_prod')} </div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -30,7 +30,7 @@ export default function AutoSendPrompt({
|
|||
>
|
||||
<div> {localize('com_nav_auto_send_prompts')} </div>
|
||||
<Switch
|
||||
aria-label="toggle-auto-send-prompts"
|
||||
aria-label={localize('com_nav_auto_send_prompts')}
|
||||
id="autoSendPrompts"
|
||||
checked={autoSendPrompts}
|
||||
onCheckedChange={handleCheckedChange}
|
||||
|
|
|
|||
|
|
@ -102,6 +102,9 @@ function ChatGroupItem({
|
|||
e.stopPropagation();
|
||||
setPreviewDialogOpen(true);
|
||||
}}
|
||||
onKeyDown={(e) => {
|
||||
e.stopPropagation();
|
||||
}}
|
||||
className="w-full cursor-pointer rounded-lg text-text-primary hover:bg-surface-hover focus:bg-surface-hover disabled:cursor-not-allowed"
|
||||
>
|
||||
<TextSearch className="mr-2 h-4 w-4 text-text-primary" aria-hidden="true" />
|
||||
|
|
@ -116,6 +119,9 @@ function ChatGroupItem({
|
|||
e.stopPropagation();
|
||||
onEditClick(e);
|
||||
}}
|
||||
onKeyDown={(e) => {
|
||||
e.stopPropagation();
|
||||
}}
|
||||
>
|
||||
<EditIcon className="mr-2 h-4 w-4 text-text-primary" aria-hidden="true" />
|
||||
<span>{localize('com_ui_edit')}</span>
|
||||
|
|
|
|||
|
|
@ -151,6 +151,7 @@ const CreatePromptForm = ({
|
|||
className="w-full rounded border border-border-medium px-2 py-1 focus:outline-none dark:bg-transparent dark:text-gray-200"
|
||||
minRows={6}
|
||||
tabIndex={0}
|
||||
aria-label={localize('com_ui_prompt_input_field')}
|
||||
/>
|
||||
<div
|
||||
className={`mt-1 text-sm text-red-500 ${
|
||||
|
|
|
|||
|
|
@ -34,6 +34,7 @@ export default function List({
|
|||
variant="outline"
|
||||
className={`w-full bg-transparent ${isChatRoute ? '' : 'mx-2'}`}
|
||||
onClick={() => navigate('/d/prompts/new')}
|
||||
aria-label={localize('com_ui_create_prompt')}
|
||||
>
|
||||
<Plus className="size-4" aria-hidden />
|
||||
{localize('com_ui_create_prompt')}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
import React from 'react';
|
||||
import { Label } from '@librechat/client';
|
||||
import CategoryIcon from '~/components/Prompts/Groups/CategoryIcon';
|
||||
import { useLocalize } from '~/hooks';
|
||||
|
||||
export default function ListCard({
|
||||
category,
|
||||
|
|
@ -15,6 +16,7 @@ export default function ListCard({
|
|||
onClick?: React.MouseEventHandler<HTMLDivElement | HTMLButtonElement>;
|
||||
children?: React.ReactNode;
|
||||
}) {
|
||||
const localize = useLocalize();
|
||||
const handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement | HTMLButtonElement>) => {
|
||||
if (event.key === 'Enter' || event.key === ' ') {
|
||||
event.preventDefault();
|
||||
|
|
@ -31,7 +33,7 @@ export default function ListCard({
|
|||
tabIndex={0}
|
||||
aria-labelledby={`card-title-${name}`}
|
||||
aria-describedby={`card-snippet-${name}`}
|
||||
aria-label={`Card for ${name}`}
|
||||
aria-label={`${name} Prompt, ${category ? `${localize('com_ui_category')}: ${category}` : ''}`}
|
||||
>
|
||||
<div className="flex w-full justify-between gap-2">
|
||||
<div className="flex flex-row gap-2">
|
||||
|
|
|
|||
|
|
@ -17,6 +17,7 @@ export default function NoPromptGroup() {
|
|||
onClick={() => {
|
||||
navigate('/d/prompts');
|
||||
}}
|
||||
aria-label={localize('com_ui_back_to_prompts')}
|
||||
>
|
||||
{localize('com_ui_back_to_prompts')}
|
||||
</Button>
|
||||
|
|
|
|||
|
|
@ -193,6 +193,7 @@ export default function VariableForm({
|
|||
)}
|
||||
placeholder={field.config.variable}
|
||||
maxRows={8}
|
||||
aria-label={field.config.variable}
|
||||
/>
|
||||
);
|
||||
}}
|
||||
|
|
@ -201,7 +202,7 @@ export default function VariableForm({
|
|||
))}
|
||||
</div>
|
||||
<div className="flex justify-end">
|
||||
<Button type="submit" variant="submit">
|
||||
<Button type="submit" variant="submit" aria-label={localize('com_ui_submit')}>
|
||||
{localize('com_ui_submit')}
|
||||
</Button>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -118,6 +118,7 @@ const PromptEditor: React.FC<Props> = ({ name, isEditing, setIsEditing }) => {
|
|||
setIsEditing(false);
|
||||
}
|
||||
}}
|
||||
aria-label={localize('com_ui_prompt_input')}
|
||||
/>
|
||||
) : (
|
||||
<div
|
||||
|
|
|
|||
|
|
@ -370,7 +370,11 @@ export default function GenericGrantAccessDialog({
|
|||
<div className="flex gap-2">
|
||||
<PeoplePickerAdminSettings />
|
||||
<OGDialogClose asChild>
|
||||
<Button variant="outline" onClick={handleCancel}>
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={handleCancel}
|
||||
aria-label={localize('com_ui_cancel')}
|
||||
>
|
||||
{localize('com_ui_cancel')}
|
||||
</Button>
|
||||
</OGDialogClose>
|
||||
|
|
@ -382,6 +386,7 @@ export default function GenericGrantAccessDialog({
|
|||
(hasChanges && !hasAtLeastOneOwner)
|
||||
}
|
||||
className="min-w-[120px]"
|
||||
aria-label={localize('com_ui_save_changes')}
|
||||
>
|
||||
{updatePermissionsMutation.isLoading ? (
|
||||
<div className="flex items-center gap-2">
|
||||
|
|
|
|||
|
|
@ -60,6 +60,7 @@ const LabelController: React.FC<LabelControllerProps> = ({
|
|||
checked={field.value}
|
||||
onCheckedChange={field.onChange}
|
||||
value={field.value.toString()}
|
||||
aria-label={label}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
|
|
@ -158,6 +159,7 @@ const PeoplePickerAdminSettings = () => {
|
|||
<Button
|
||||
variant={'outline'}
|
||||
className="btn btn-neutral border-token-border-light relative gap-1 rounded-lg font-medium"
|
||||
aria-label={localize('com_ui_admin_settings')}
|
||||
>
|
||||
<ShieldEllipsis className="cursor-pointer" aria-hidden="true" />
|
||||
{localize('com_ui_admin_settings')}
|
||||
|
|
|
|||
|
|
@ -56,6 +56,7 @@ const LabelController: React.FC<LabelControllerProps> = ({
|
|||
checked={field.value}
|
||||
onCheckedChange={field.onChange}
|
||||
value={field.value.toString()}
|
||||
aria-label={label}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
|
|
@ -152,6 +153,7 @@ const AdminSettings = () => {
|
|||
size={'sm'}
|
||||
variant={'outline'}
|
||||
className="btn btn-neutral border-token-border-light relative h-9 w-full gap-1 rounded-lg font-medium"
|
||||
aria-label={localize('com_ui_admin_settings')}
|
||||
>
|
||||
<ShieldEllipsis className="cursor-pointer" aria-hidden="true" />
|
||||
{localize('com_ui_admin_settings')}
|
||||
|
|
|
|||
|
|
@ -17,6 +17,7 @@ const AdvancedButton: React.FC<AdvancedButtonProps> = ({ setActivePanel }) => {
|
|||
variant={'outline'}
|
||||
className="btn btn-neutral border-token-border-light relative h-9 w-full gap-1 rounded-lg font-medium"
|
||||
onClick={() => setActivePanel(Panel.advanced)}
|
||||
aria-label={localize('com_ui_advanced')}
|
||||
>
|
||||
<Settings2 className="h-4 w-4 cursor-pointer" aria-hidden="true" />
|
||||
{localize('com_ui_advanced')}
|
||||
|
|
|
|||
|
|
@ -31,6 +31,7 @@ export default function AdvancedPanel() {
|
|||
onClick={() => {
|
||||
setActivePanel(Panel.builder);
|
||||
}}
|
||||
aria-label={localize('com_ui_back_to_builder')}
|
||||
>
|
||||
<div className="advanced-panel-content flex w-full items-center justify-center gap-2">
|
||||
<ChevronLeft />
|
||||
|
|
|
|||
|
|
@ -146,6 +146,9 @@ const AgentChain: React.FC<AgentChainProps> = ({ field, currentAgentId }) => {
|
|||
<button
|
||||
className="rounded-xl p-1 transition hover:bg-surface-hover"
|
||||
onClick={() => removeAgentAt(idx)}
|
||||
aria-label={localize('com_ui_remove_agent_from_chain', {
|
||||
0: getAgentDetails(agentId)?.name || localize('com_ui_agent'),
|
||||
})}
|
||||
>
|
||||
<X size={18} className="text-text-secondary" />
|
||||
</button>
|
||||
|
|
|
|||
|
|
@ -186,7 +186,11 @@ function Avatar({
|
|||
<Popover.Root open={menuOpen} onOpenChange={setMenuOpen}>
|
||||
<div className="flex w-full items-center justify-center gap-4">
|
||||
<Popover.Trigger asChild>
|
||||
<button type="button" className="h-20 w-20">
|
||||
<button
|
||||
type="button"
|
||||
className="f h-20 w-20 focus:rounded-full focus:ring-2 focus:ring-ring"
|
||||
aria-label={localize('com_ui_upload_agent_avatar_label')}
|
||||
>
|
||||
{previewUrl ? <AgentAvatarRender url={previewUrl} progress={progress} /> : <NoImage />}
|
||||
</button>
|
||||
</Popover.Trigger>
|
||||
|
|
|
|||
|
|
@ -420,9 +420,16 @@ export default function AgentConfig({ createMutation }: Pick<AgentPanelProps, 'c
|
|||
type="text"
|
||||
placeholder={localize('com_ui_support_contact_name_placeholder')}
|
||||
aria-label="Support contact name"
|
||||
aria-invalid={error ? 'true' : 'false'}
|
||||
aria-describedby={error ? 'support-contact-name-error' : undefined}
|
||||
/>
|
||||
{error && (
|
||||
<span className="text-sm text-red-500 transition duration-300 ease-in-out">
|
||||
<span
|
||||
id="support-contact-name-error"
|
||||
className="text-sm text-red-500 transition duration-300 ease-in-out"
|
||||
role="alert"
|
||||
aria-live="polite"
|
||||
>
|
||||
{error.message}
|
||||
</span>
|
||||
)}
|
||||
|
|
@ -455,9 +462,16 @@ export default function AgentConfig({ createMutation }: Pick<AgentPanelProps, 'c
|
|||
type="email"
|
||||
placeholder={localize('com_ui_support_contact_email_placeholder')}
|
||||
aria-label="Support contact email"
|
||||
aria-invalid={error ? 'true' : 'false'}
|
||||
aria-describedby={error ? 'support-contact-email-error' : undefined}
|
||||
/>
|
||||
{error && (
|
||||
<span className="text-sm text-red-500 transition duration-300 ease-in-out">
|
||||
<span
|
||||
id="support-contact-email-error"
|
||||
className="text-sm text-red-500 transition duration-300 ease-in-out"
|
||||
role="alert"
|
||||
aria-live="polite"
|
||||
>
|
||||
{error.message}
|
||||
</span>
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -283,6 +283,13 @@ export default function AgentPanel() {
|
|||
setCurrentAgentId(undefined);
|
||||
}}
|
||||
disabled={agentQuery.isInitialLoading}
|
||||
aria-label={
|
||||
localize('com_ui_create') +
|
||||
' ' +
|
||||
localize('com_ui_new') +
|
||||
' ' +
|
||||
localize('com_ui_agent')
|
||||
}
|
||||
>
|
||||
<Plus className="mr-1 h-4 w-4" />
|
||||
{localize('com_ui_create') +
|
||||
|
|
|
|||
|
|
@ -117,6 +117,7 @@ function SwitchItem({
|
|||
className="ml-4"
|
||||
data-testid={id}
|
||||
disabled={disabled}
|
||||
aria-label={label}
|
||||
/>
|
||||
</div>
|
||||
</HoverCard>
|
||||
|
|
|
|||
|
|
@ -61,6 +61,7 @@ export default function Action({ authType = '', isToolAuthenticated = false }) {
|
|||
className="relative float-left mr-2 inline-flex h-4 w-4 cursor-pointer"
|
||||
value={field.value.toString()}
|
||||
disabled={runCodeIsEnabled ? false : !isToolAuthenticated}
|
||||
aria-label={localize('com_ui_run_code')}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
|
|
@ -81,7 +82,11 @@ export default function Action({ authType = '', isToolAuthenticated = false }) {
|
|||
</button>
|
||||
<div className="ml-2 flex gap-2">
|
||||
{isUserProvided && (isToolAuthenticated || runCodeIsEnabled) && (
|
||||
<button type="button" onClick={() => setIsDialogOpen(true)}>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setIsDialogOpen(true)}
|
||||
aria-label={localize('com_ui_add_api_key')}
|
||||
>
|
||||
<KeyRoundIcon className="h-5 w-5 text-text-primary" />
|
||||
</button>
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -104,6 +104,7 @@ export default function ApiKeyDialog({
|
|||
<Button
|
||||
onClick={onRevoke}
|
||||
className="bg-destructive text-white transition-all duration-200 hover:bg-destructive/80"
|
||||
aria-label={localize('com_ui_revoke')}
|
||||
>
|
||||
{localize('com_ui_revoke')}
|
||||
</Button>
|
||||
|
|
|
|||
|
|
@ -32,6 +32,7 @@ function FileSearchCheckbox() {
|
|||
onCheckedChange={field.onChange}
|
||||
className="relative float-left mr-2 inline-flex h-4 w-4 cursor-pointer"
|
||||
value={field.value.toString()}
|
||||
aria-label={localize('com_agents_enable_file_search')}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -104,15 +104,16 @@ export function AvatarMenu({
|
|||
className="flex min-w-[100px] max-w-xs flex-col rounded-xl border border-gray-400 bg-white shadow-lg dark:border-gray-700 dark:bg-gray-850 dark:text-white"
|
||||
sideOffset={5}
|
||||
>
|
||||
<div
|
||||
<button
|
||||
type="button"
|
||||
role="menuitem"
|
||||
className="group m-1.5 flex cursor-pointer gap-2 rounded-lg p-2.5 text-sm hover:bg-gray-100 focus:ring-0 radix-disabled:pointer-events-none radix-disabled:opacity-50 dark:hover:bg-gray-800 dark:hover:bg-white/5"
|
||||
tabIndex={-1}
|
||||
tabIndex={0}
|
||||
data-orientation="vertical"
|
||||
onClick={onItemClick}
|
||||
>
|
||||
{localize('com_ui_upload_image')}
|
||||
</div>
|
||||
</button>
|
||||
{/* <Popover.Close
|
||||
role="menuitem"
|
||||
className="group m-1.5 flex cursor-pointer gap-2 rounded p-2.5 text-sm hover:bg-black/5 focus:ring-0 radix-disabled:pointer-events-none radix-disabled:opacity-50 dark:hover:bg-white/5"
|
||||
|
|
|
|||
|
|
@ -210,10 +210,15 @@ export default function MCPInput({ mcp, agent_id, setMCP }: MCPInputProps) {
|
|||
control={control}
|
||||
rules={{ required: true }}
|
||||
render={({ field }) => (
|
||||
<Checkbox id="trust" checked={field.value} onCheckedChange={field.onChange} />
|
||||
<Checkbox
|
||||
id="trust-checkbox"
|
||||
checked={field.value}
|
||||
onCheckedChange={field.onChange}
|
||||
aria-labelledby="trust-label"
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
<Label htmlFor="trust" className="flex flex-col">
|
||||
<Label id="trust-label" htmlFor="trust-checkbox" className="flex flex-col">
|
||||
{localize('com_ui_trust_app')}
|
||||
<span className="text-xs text-text-secondary">
|
||||
{localize('com_agents_mcp_trust_subtext')}
|
||||
|
|
@ -269,6 +274,10 @@ export default function MCPInput({ mcp, agent_id, setMCP }: MCPInputProps) {
|
|||
checked={selectedTools.includes(tool)}
|
||||
onCheckedChange={() => handleToolToggle(tool)}
|
||||
className="relative float-left mr-2 inline-flex h-4 w-4 cursor-pointer"
|
||||
aria-label={tool
|
||||
.split('_')
|
||||
.map((word) => word.charAt(0).toUpperCase() + word.slice(1))
|
||||
.join(' ')}
|
||||
/>
|
||||
<span className="text-token-text-primary">
|
||||
{tool
|
||||
|
|
|
|||
|
|
@ -162,6 +162,12 @@ export default function MCPTool({ serverInfo }: { serverInfo?: MCPServerInfo })
|
|||
}
|
||||
}}
|
||||
tabIndex={isExpanded ? 0 : -1}
|
||||
aria-label={
|
||||
selectedTools.length === serverInfo.tools?.length &&
|
||||
selectedTools.length > 0
|
||||
? localize('com_ui_deselect_all')
|
||||
: localize('com_ui_select_all')
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
|
||||
|
|
@ -252,6 +258,7 @@ export default function MCPTool({ serverInfo }: { serverInfo?: MCPServerInfo })
|
|||
className={cn(
|
||||
'relative float-left mr-2 inline-flex h-4 w-4 cursor-pointer rounded border border-border-medium transition-[border-color] duration-200 hover:border-border-heavy focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 focus:ring-offset-background',
|
||||
)}
|
||||
aria-label={subTool.metadata.name}
|
||||
/>
|
||||
<span className="text-token-text-primary select-none">
|
||||
{subTool.metadata.name}
|
||||
|
|
|
|||
|
|
@ -102,6 +102,7 @@ export default function ModelPanel({
|
|||
onClick={() => {
|
||||
setActivePanel(Panel.builder);
|
||||
}}
|
||||
aria-label={localize('com_ui_back_to_builder')}
|
||||
>
|
||||
<div className="model-panel-content flex w-full items-center justify-center gap-2">
|
||||
<ChevronLeft />
|
||||
|
|
|
|||
|
|
@ -69,6 +69,7 @@ export default function Action({
|
|||
className="relative float-left mr-2 inline-flex h-4 w-4 cursor-pointer"
|
||||
value={field.value.toString()}
|
||||
disabled={webSearchIsEnabled ? false : !isToolAuthenticated}
|
||||
aria-label={localize('com_ui_web_search')}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -250,7 +250,11 @@ export default function ApiKeyDialog({
|
|||
}}
|
||||
buttons={
|
||||
isToolAuthenticated && (
|
||||
<Button onClick={onRevoke} className="bg-red-500 text-white hover:bg-red-600">
|
||||
<Button
|
||||
onClick={onRevoke}
|
||||
className="bg-red-500 text-white hover:bg-red-600"
|
||||
aria-label={localize('com_ui_revoke')}
|
||||
>
|
||||
{localize('com_ui_revoke')}
|
||||
</Button>
|
||||
)
|
||||
|
|
|
|||
|
|
@ -16,6 +16,7 @@ const VersionButton = ({ setActivePanel }: VersionButtonProps) => {
|
|||
variant={'outline'}
|
||||
className="btn btn-neutral border-token-border-light relative h-9 w-full gap-1 rounded-lg font-medium"
|
||||
onClick={() => setActivePanel(Panel.version)}
|
||||
aria-label={localize('com_ui_agent_version')}
|
||||
>
|
||||
<History className="h-4 w-4 cursor-pointer" aria-hidden="true" />
|
||||
{localize('com_ui_agent_version')}
|
||||
|
|
|
|||
|
|
@ -112,6 +112,7 @@ const BookmarkTable = () => {
|
|||
variant="outline"
|
||||
size="sm"
|
||||
className="w-full gap-2 text-sm"
|
||||
aria-label={localize('com_ui_bookmarks_new')}
|
||||
onClick={() => setOpen(!open)}
|
||||
>
|
||||
<BookmarkPlusIcon className="size-4" />
|
||||
|
|
|
|||
|
|
@ -213,7 +213,11 @@ function Avatar({
|
|||
<Popover.Root open={menuOpen} onOpenChange={setMenuOpen}>
|
||||
<div className="flex w-full items-center justify-center gap-4">
|
||||
<Popover.Trigger asChild>
|
||||
<button type="button" className="h-20 w-20">
|
||||
<button
|
||||
type="button"
|
||||
className="h-20 w-20"
|
||||
aria-label={localize('com_ui_upload_avatar_label')}
|
||||
>
|
||||
{previewUrl ? <AssistantAvatar url={previewUrl} progress={progress} /> : <NoImage />}
|
||||
</button>
|
||||
</Popover.Trigger>
|
||||
|
|
|
|||
|
|
@ -31,6 +31,7 @@ export default function Code({ version }: { version: number | string }) {
|
|||
onCheckedChange={field.onChange}
|
||||
className="relative float-left mr-2 inline-flex h-4 w-4 cursor-pointer"
|
||||
value={field.value.toString()}
|
||||
aria-labelledby={Capabilities.code_interpreter}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
|
|
@ -44,6 +45,7 @@ export default function Code({ version }: { version: number | string }) {
|
|||
}
|
||||
>
|
||||
<label
|
||||
id={Capabilities.code_interpreter}
|
||||
className="form-check-label text-token-text-primary w-full cursor-pointer"
|
||||
htmlFor={Capabilities.code_interpreter}
|
||||
>
|
||||
|
|
|
|||
|
|
@ -21,10 +21,12 @@ export default function ImageVision() {
|
|||
onCheckedChange={field.onChange}
|
||||
className="relative float-left mr-2 inline-flex h-4 w-4 cursor-pointer"
|
||||
value={field.value.toString()}
|
||||
aria-labelledby={Capabilities.image_vision}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
<label
|
||||
id={Capabilities.image_vision}
|
||||
className="form-check-label text-token-text-primary w-full cursor-pointer"
|
||||
htmlFor={Capabilities.image_vision}
|
||||
onClick={() =>
|
||||
|
|
|
|||
|
|
@ -60,11 +60,13 @@ export default function Retrieval({
|
|||
onCheckedChange={field.onChange}
|
||||
className="relative float-left mr-2 inline-flex h-4 w-4 cursor-pointer"
|
||||
value={field.value.toString()}
|
||||
aria-labelledby={Capabilities.retrieval}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
<div className="flex items-center space-x-2">
|
||||
<label
|
||||
id={Capabilities.retrieval}
|
||||
className={cn(
|
||||
'form-check-label text-token-text-primary w-full select-none',
|
||||
isDisabled ? 'cursor-no-drop opacity-50' : 'cursor-pointer',
|
||||
|
|
|
|||
|
|
@ -17,6 +17,7 @@ export const columns: ColumnDef<TFile | undefined>[] = [
|
|||
variant="ghost"
|
||||
className="hover:bg-surface-hover"
|
||||
onClick={() => column.toggleSorting(column.getIsSorted() === 'asc')}
|
||||
aria-label={localize('com_ui_name')}
|
||||
>
|
||||
{localize('com_ui_name')}
|
||||
<ArrowUpDown className="ml-2 h-4 w-4" />
|
||||
|
|
@ -40,6 +41,7 @@ export const columns: ColumnDef<TFile | undefined>[] = [
|
|||
variant="ghost"
|
||||
className="hover:bg-surface-hover"
|
||||
onClick={() => column.toggleSorting(column.getIsSorted() === 'asc')}
|
||||
aria-label={localize('com_ui_date')}
|
||||
>
|
||||
{localize('com_ui_date')}
|
||||
<ArrowUpDown className="ml-2 h-4 w-4" />
|
||||
|
|
|
|||
|
|
@ -127,7 +127,12 @@ function MCPPanelContent() {
|
|||
|
||||
return (
|
||||
<div className="h-auto max-w-full space-y-4 overflow-x-hidden py-2">
|
||||
<Button variant="outline" onClick={handleGoBackToList} size="sm">
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={handleGoBackToList}
|
||||
size="sm"
|
||||
aria-label={localize('com_ui_back')}
|
||||
>
|
||||
<ChevronLeft className="mr-1 h-4 w-4" />
|
||||
{localize('com_ui_back')}
|
||||
</Button>
|
||||
|
|
@ -166,6 +171,7 @@ function MCPPanelContent() {
|
|||
size="sm"
|
||||
variant="destructive"
|
||||
onClick={() => handleConfigRevoke(selectedServerNameForEditing)}
|
||||
aria-label={localize('com_ui_oauth_revoke')}
|
||||
>
|
||||
<Trash2 className="h-4 w-4" />
|
||||
{localize('com_ui_oauth_revoke')}
|
||||
|
|
@ -188,6 +194,7 @@ function MCPPanelContent() {
|
|||
variant="outline"
|
||||
className="flex-1 justify-start dark:hover:bg-gray-700"
|
||||
onClick={() => handleServerClickToEdit(server.serverName)}
|
||||
aria-label={localize('com_ui_edit') + ' ' + server.serverName}
|
||||
>
|
||||
<div className="flex items-center gap-2">
|
||||
<span>{server.serverName}</span>
|
||||
|
|
|
|||
|
|
@ -39,6 +39,7 @@ const LabelController: React.FC<LabelControllerProps> = ({ control, memoryPerm,
|
|||
checked={field.value}
|
||||
onCheckedChange={field.onChange}
|
||||
value={field.value.toString()}
|
||||
aria-label={label}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
|
|
@ -141,6 +142,7 @@ const AdminSettings = () => {
|
|||
size={'sm'}
|
||||
variant={'outline'}
|
||||
className="btn btn-neutral border-token-border-light relative h-9 w-full gap-1 rounded-lg font-medium"
|
||||
aria-label={localize('com_ui_admin_settings')}
|
||||
>
|
||||
<ShieldEllipsis className="cursor-pointer" aria-hidden="true" />
|
||||
{localize('com_ui_admin_settings')}
|
||||
|
|
|
|||
|
|
@ -147,6 +147,7 @@ export default function MemoryCreateDialog({
|
|||
onClick={handleSave}
|
||||
disabled={isLoading || !key.trim() || !value.trim()}
|
||||
className="text-white"
|
||||
aria-label={localize('com_ui_create_memory')}
|
||||
>
|
||||
{isLoading ? <Spinner className="size-4" /> : localize('com_ui_create')}
|
||||
</Button>
|
||||
|
|
|
|||
|
|
@ -192,6 +192,7 @@ export default function MemoryEditDialog({
|
|||
type="button"
|
||||
variant="submit"
|
||||
onClick={handleSave}
|
||||
aria-label={localize('com_ui_save')}
|
||||
disabled={isLoading || !key.trim() || !value.trim()}
|
||||
className="text-white"
|
||||
>
|
||||
|
|
|
|||
|
|
@ -305,7 +305,11 @@ export default function MemoryViewer() {
|
|||
<div className="flex w-full justify-end">
|
||||
<MemoryCreateDialog open={createDialogOpen} onOpenChange={setCreateDialogOpen}>
|
||||
<OGDialogTrigger asChild>
|
||||
<Button variant="outline" className="w-full bg-transparent">
|
||||
<Button
|
||||
variant="outline"
|
||||
className="w-full bg-transparent"
|
||||
aria-label={localize('com_ui_create_memory')}
|
||||
>
|
||||
<Plus className="size-4" aria-hidden />
|
||||
{localize('com_ui_create_memory')}
|
||||
</Button>
|
||||
|
|
|
|||
|
|
@ -76,6 +76,7 @@ function DynamicCheckbox({
|
|||
checked={selectedValue}
|
||||
onCheckedChange={handleCheckedChange}
|
||||
className="mt-[2px] focus:ring-opacity-20 dark:border-gray-500 dark:bg-gray-700 dark:text-gray-50 dark:focus:ring-gray-600 dark:focus:ring-opacity-50 dark:focus:ring-offset-0"
|
||||
aria-label={localize(label as TranslationKeys)}
|
||||
/>
|
||||
</div>
|
||||
</HoverCardTrigger>
|
||||
|
|
|
|||
|
|
@ -179,6 +179,7 @@ function DynamicSlider({
|
|||
min={range ? range.min : 0}
|
||||
step={range ? (range.step ?? 1) : 1}
|
||||
controls={false}
|
||||
aria-label={localize(label as TranslationKeys)}
|
||||
className={cn(
|
||||
defaultTextProps,
|
||||
cn(
|
||||
|
|
@ -192,6 +193,7 @@ function DynamicSlider({
|
|||
id={`${settingKey}-dynamic-setting-input`}
|
||||
disabled={readonly}
|
||||
value={getDisplayValue(selectedValue)}
|
||||
aria-label={localize(label as TranslationKeys)}
|
||||
onChange={() => ({})}
|
||||
className={cn(
|
||||
defaultTextProps,
|
||||
|
|
@ -214,6 +216,7 @@ function DynamicSlider({
|
|||
onValueChange={(value) => handleValueChange(value[0])}
|
||||
onDoubleClick={() => setInputValue(defaultValue as string | number)}
|
||||
max={max}
|
||||
aria-label={localize(label as TranslationKeys)}
|
||||
min={range ? range.min : 0}
|
||||
step={range ? (range.step ?? 1) : 1}
|
||||
className="flex h-4 w-full"
|
||||
|
|
|
|||
|
|
@ -67,6 +67,9 @@ function DynamicSwitch({
|
|||
onCheckedChange={handleCheckedChange}
|
||||
disabled={readonly}
|
||||
className="flex"
|
||||
aria-label={
|
||||
labelCode ? (localize(label as TranslationKeys) ?? label) : label || settingKey
|
||||
}
|
||||
/>
|
||||
</HoverCardTrigger>
|
||||
{description && (
|
||||
|
|
|
|||
|
|
@ -75,6 +75,7 @@ function DynamicTextarea({
|
|||
disabled={readonly}
|
||||
value={inputValue ?? ''}
|
||||
onChange={setInputValue}
|
||||
aria-label={localize(label as TranslationKeys)}
|
||||
placeholder={
|
||||
placeholderCode
|
||||
? (localize(placeholder as TranslationKeys) ?? placeholder)
|
||||
|
|
|
|||
|
|
@ -386,6 +386,7 @@
|
|||
"com_files_download_progress": "{{0}} of {{1}} files",
|
||||
"com_files_downloading": "Downloading Files",
|
||||
"com_files_filter": "Filter files...",
|
||||
"com_files_filter_by": "Filter files by...",
|
||||
"com_files_no_results": "No results.",
|
||||
"com_files_number_selected": "{{0}} of {{1}} items(s) selected",
|
||||
"com_files_preparing_download": "Preparing download...",
|
||||
|
|
@ -458,7 +459,6 @@
|
|||
"com_nav_delete_warning": "WARNING: This will permanently delete your account.",
|
||||
"com_nav_enable_cache_tts": "Enable cache TTS",
|
||||
"com_nav_enable_cloud_browser_voice": "Use cloud-based voices",
|
||||
"com_nav_enabled": "Enabled",
|
||||
"com_nav_engine": "Engine",
|
||||
"com_nav_enter_to_send": "Press Enter to send messages",
|
||||
"com_nav_export": "Export",
|
||||
|
|
@ -632,6 +632,7 @@
|
|||
"com_ui_action_button": "Action Button",
|
||||
"com_ui_active": "Active",
|
||||
"com_ui_add": "Add",
|
||||
"com_ui_add_api_key": "Add API Key",
|
||||
"com_ui_add_mcp": "Add MCP",
|
||||
"com_ui_add_mcp_server": "Add MCP Server",
|
||||
"com_ui_add_model_preset": "Add a model or preset for an additional response",
|
||||
|
|
@ -786,6 +787,7 @@
|
|||
"com_ui_copy_link": "Copy link",
|
||||
"com_ui_copy_to_clipboard": "Copy to clipboard",
|
||||
"com_ui_copy_url_to_clipboard": "Copy URL to clipboard",
|
||||
"com_ui_copy_stack_trace": "Copy stack trace",
|
||||
"com_ui_create": "Create",
|
||||
"com_ui_create_link": "Create link",
|
||||
"com_ui_create_memory": "Create Memory",
|
||||
|
|
@ -849,6 +851,7 @@
|
|||
"com_ui_download_backup": "Download Backup Codes",
|
||||
"com_ui_download_backup_tooltip": "Before you continue, download your backup codes. You will need them to regain access if you lose your authenticator device",
|
||||
"com_ui_download_error": "Error downloading file. The file may have been deleted.",
|
||||
"com_ui_download_error_logs": "Download error logs",
|
||||
"com_ui_drag_drop": "Drop any file here to add it to the conversation",
|
||||
"com_ui_dropdown_variables": "Dropdown variables:",
|
||||
"com_ui_dropdown_variables_info": "Create custom dropdown menus for your prompts: `{{variable_name:option1|option2|option3}}`",
|
||||
|
|
@ -856,6 +859,7 @@
|
|||
"com_ui_duplication_error": "There was an error duplicating the conversation",
|
||||
"com_ui_duplication_processing": "Duplicating conversation...",
|
||||
"com_ui_duplication_success": "Successfully duplicated conversation",
|
||||
"com_ui_editable_message": "Editable Message",
|
||||
"com_ui_edit": "Edit",
|
||||
"com_ui_edit_editing_image": "Editing image",
|
||||
"com_ui_edit_mcp_server": "Edit MCP Server",
|
||||
|
|
@ -1015,6 +1019,7 @@
|
|||
"com_ui_memory_updated_items": "Updated Memories",
|
||||
"com_ui_memory_would_exceed": "Cannot save - would exceed limit by {{tokens}} tokens. Delete existing memories to make space.",
|
||||
"com_ui_mention": "Mention an endpoint, assistant, or preset to quickly switch to it",
|
||||
"com_ui_message_input": "Message input",
|
||||
"com_ui_min_tags": "Cannot remove more values, a minimum of {{0}} are required.",
|
||||
"com_ui_minimal": "Minimal",
|
||||
"com_ui_misc": "Misc.",
|
||||
|
|
@ -1075,10 +1080,12 @@
|
|||
"com_ui_privacy_policy_url": "Privacy Policy URL",
|
||||
"com_ui_prompt": "Prompt",
|
||||
"com_ui_prompt_groups": "Prompt Groups List",
|
||||
"com_ui_prompt_input": "Prompt input",
|
||||
"com_ui_prompt_name": "Prompt Name",
|
||||
"com_ui_prompt_name_required": "Prompt Name is required",
|
||||
"com_ui_prompt_preview_not_shared": "The author has not allowed collaboration for this prompt.",
|
||||
"com_ui_prompt_text": "Text",
|
||||
"com_ui_prompt_input_field": "Prompt text input field",
|
||||
"com_ui_prompt_text_required": "Text is required",
|
||||
"com_ui_prompt_update_error": "There was an error updating the prompt",
|
||||
"com_ui_prompts": "Prompts",
|
||||
|
|
@ -1093,6 +1100,7 @@
|
|||
"com_ui_reference_saved_memories_description": "Allow the assistant to reference and use your saved memories when responding",
|
||||
"com_ui_refresh": "Refresh",
|
||||
"com_ui_refresh_link": "Refresh link",
|
||||
"com_ui_refresh_page": "Refresh page",
|
||||
"com_ui_regenerate": "Regenerate",
|
||||
"com_ui_regenerate_backup": "Regenerate Backup Codes",
|
||||
"com_ui_regenerating": "Regenerating...",
|
||||
|
|
@ -1234,6 +1242,7 @@
|
|||
"com_ui_update_mcp_success": "Successfully created or updated MCP",
|
||||
"com_ui_upload": "Upload",
|
||||
"com_ui_upload_agent_avatar": "Successfully updated agent avatar",
|
||||
"com_ui_upload_agent_avatar_label": "Upload agent avatar image",
|
||||
"com_ui_upload_avatar_label": "Upload avatar image",
|
||||
"com_ui_upload_code_files": "Upload for Code Interpreter",
|
||||
"com_ui_upload_delay": "Uploading \"{{0}}\" is taking more time than anticipated. Please wait while the file finishes indexing for retrieval.",
|
||||
|
|
@ -1299,5 +1308,8 @@
|
|||
"com_ui_zoom_in": "Zoom in",
|
||||
"com_ui_zoom_level": "Zoom level",
|
||||
"com_ui_zoom_out": "Zoom out",
|
||||
"com_ui_share_qr_code_description": "QR code for sharing this conversation link",
|
||||
"com_ui_back_to_builder": "Back to builder",
|
||||
"com_ui_remove_agent_from_chain": "Remove {{0}} from chain",
|
||||
"com_user_message": "You"
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
/* eslint-disable i18next/no-literal-string */
|
||||
import { Button } from '@librechat/client';
|
||||
import { useRouteError } from 'react-router-dom';
|
||||
import { useLocalize } from '~/hooks';
|
||||
import logger from '~/utils/logger';
|
||||
|
||||
interface UserAgentData {
|
||||
|
|
@ -71,6 +72,7 @@ const getBrowserInfo = async () => {
|
|||
};
|
||||
|
||||
export default function RouteErrorBoundary() {
|
||||
const localize = useLocalize();
|
||||
const typedError = useRouteError() as {
|
||||
message?: string;
|
||||
stack?: string;
|
||||
|
|
@ -164,6 +166,7 @@ export default function RouteErrorBoundary() {
|
|||
size="sm"
|
||||
onClick={handleCopyStack}
|
||||
className="ml-2 px-2 py-1 text-xs"
|
||||
aria-label={localize('com_ui_copy_stack_trace')}
|
||||
>
|
||||
Copy
|
||||
</Button>
|
||||
|
|
@ -210,11 +213,17 @@ export default function RouteErrorBoundary() {
|
|||
variant="submit"
|
||||
onClick={() => window.location.reload()}
|
||||
className="w-full sm:w-auto"
|
||||
aria-label={localize('com_ui_refresh_page')}
|
||||
>
|
||||
Refresh Page
|
||||
{localize('com_ui_refresh_page')}
|
||||
</Button>
|
||||
<Button variant="outline" onClick={handleDownloadLogs} className="w-full sm:w-auto">
|
||||
Download Error Logs
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={handleDownloadLogs}
|
||||
className="w-full sm:w-auto"
|
||||
aria-label={localize('com_ui_download_error_logs')}
|
||||
>
|
||||
{localize('com_ui_download_error_logs')}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -36,7 +36,7 @@ const AnimatedSearchInput = ({
|
|||
value={value}
|
||||
onChange={onChange}
|
||||
placeholder={placeholder}
|
||||
className={`peer relative z-20 w-full rounded-lg bg-surface-secondary px-10 py-2 outline-none ring-0 backdrop-blur-sm transition-all duration-500 ease-in-out placeholder:text-gray-400 focus:outline-none focus:ring-0`}
|
||||
className={`peer relative z-20 w-full rounded-lg bg-surface-secondary px-10 py-2 outline-none backdrop-blur-sm transition-all duration-500 ease-in-out placeholder:text-gray-400 focus:ring-ring`}
|
||||
/>
|
||||
|
||||
{/* Gradient overlay */}
|
||||
|
|
|
|||
|
|
@ -3,23 +3,39 @@ import { Check } from 'lucide-react';
|
|||
import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
|
||||
import { cn } from '~/utils';
|
||||
|
||||
const Checkbox = React.forwardRef<
|
||||
React.ElementRef<typeof CheckboxPrimitive.Root>,
|
||||
React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>
|
||||
>(({ className = '', ...props }, ref) => (
|
||||
<CheckboxPrimitive.Root
|
||||
ref={ref}
|
||||
className={cn(
|
||||
'peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground',
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
<CheckboxPrimitive.Indicator className={cn('flex items-center justify-center')}>
|
||||
<Check className="h-4 w-4" />
|
||||
</CheckboxPrimitive.Indicator>
|
||||
</CheckboxPrimitive.Root>
|
||||
));
|
||||
type BaseCheckboxProps = Omit<
|
||||
React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>,
|
||||
'aria-label' | 'aria-labelledby'
|
||||
> & {
|
||||
asChild?: boolean;
|
||||
};
|
||||
|
||||
export type CheckboxProps =
|
||||
| (BaseCheckboxProps & {
|
||||
'aria-label': string;
|
||||
'aria-labelledby'?: never;
|
||||
})
|
||||
| (BaseCheckboxProps & {
|
||||
'aria-labelledby': string;
|
||||
'aria-label'?: never;
|
||||
});
|
||||
|
||||
const Checkbox = React.forwardRef<React.ElementRef<typeof CheckboxPrimitive.Root>, CheckboxProps>(
|
||||
({ className = '', ...props }, ref) => (
|
||||
<CheckboxPrimitive.Root
|
||||
ref={ref}
|
||||
className={cn(
|
||||
'peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground',
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
<CheckboxPrimitive.Indicator className={cn('flex items-center justify-center')}>
|
||||
<Check className="h-4 w-4" />
|
||||
</CheckboxPrimitive.Indicator>
|
||||
</CheckboxPrimitive.Root>
|
||||
),
|
||||
);
|
||||
Checkbox.displayName = CheckboxPrimitive.Root.displayName;
|
||||
|
||||
export { Checkbox };
|
||||
|
|
|
|||
|
|
@ -15,8 +15,8 @@ import {
|
|||
import type { Table as TTable } from '@tanstack/react-table';
|
||||
import { Table, TableRow, TableBody, TableCell, TableHead, TableHeader } from './Table';
|
||||
import AnimatedSearchInput from './AnimatedSearchInput';
|
||||
import { useMediaQuery, useLocalize } from '~/hooks';
|
||||
import { TrashIcon, Spinner } from '~/svgs';
|
||||
import { useMediaQuery } from '~/hooks';
|
||||
import { Skeleton } from './Skeleton';
|
||||
import { Checkbox } from './Checkbox';
|
||||
import { Button } from './Button';
|
||||
|
|
@ -118,6 +118,24 @@ const TableRowComponent = <TData, TValue>({
|
|||
);
|
||||
}
|
||||
|
||||
if (cell.column.id === 'title') {
|
||||
return (
|
||||
<TableHead
|
||||
key={cell.id}
|
||||
className="w-0 max-w-0 px-2 py-1 align-middle text-xs transition-all duration-300 sm:px-4 sm:py-2 sm:text-sm"
|
||||
style={getColumnStyle(
|
||||
cell.column.columnDef as TableColumn<TData, TValue>,
|
||||
isSmallScreen,
|
||||
)}
|
||||
scope="row"
|
||||
>
|
||||
<div className="overflow-hidden text-ellipsis">
|
||||
{flexRender(cell.column.columnDef.cell, cell.getContext())}
|
||||
</div>
|
||||
</TableHead>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<TableCell
|
||||
key={cell.id}
|
||||
|
|
@ -156,11 +174,13 @@ const DeleteButton = memo(
|
|||
isDeleting,
|
||||
disabled,
|
||||
isSmallScreen,
|
||||
ariaLabel,
|
||||
}: {
|
||||
onDelete?: () => Promise<void>;
|
||||
isDeleting: boolean;
|
||||
disabled: boolean;
|
||||
isSmallScreen: boolean;
|
||||
ariaLabel: string;
|
||||
}) => {
|
||||
if (!onDelete) {
|
||||
return null;
|
||||
|
|
@ -171,6 +191,7 @@ const DeleteButton = memo(
|
|||
onClick={onDelete}
|
||||
disabled={disabled}
|
||||
className={cn('min-w-[40px] transition-all duration-200', isSmallScreen && 'px-2 py-1')}
|
||||
aria-label={ariaLabel}
|
||||
>
|
||||
{isDeleting ? (
|
||||
<Spinner className="size-4" />
|
||||
|
|
@ -202,6 +223,7 @@ export default function DataTable<TData, TValue>({
|
|||
isLoading,
|
||||
enableSearch = true,
|
||||
}: DataTableProps<TData, TValue>) {
|
||||
const localize = useLocalize();
|
||||
const isSmallScreen = useMediaQuery('(max-width: 768px)');
|
||||
const tableContainerRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
|
|
@ -359,6 +381,7 @@ export default function DataTable<TData, TValue>({
|
|||
isDeleting={isDeleting}
|
||||
disabled={!table.getFilteredSelectedRowModel().rows.length || isDeleting}
|
||||
isSmallScreen={isSmallScreen}
|
||||
ariaLabel={localize('com_ui_delete_selected_items')}
|
||||
/>
|
||||
)}
|
||||
{filterColumn !== undefined && table.getColumn(filterColumn) && enableSearch && (
|
||||
|
|
@ -400,6 +423,7 @@ export default function DataTable<TData, TValue>({
|
|||
? header.column.getToggleSortingHandler()
|
||||
: undefined
|
||||
}
|
||||
scope="col"
|
||||
>
|
||||
{header.isPlaceholder
|
||||
? null
|
||||
|
|
|
|||
|
|
@ -7,6 +7,7 @@ import {
|
|||
DropdownMenuSeparator,
|
||||
DropdownMenuTrigger,
|
||||
} from './DropdownMenu';
|
||||
import { useLocalize } from '~/hooks';
|
||||
import { Button } from './Button';
|
||||
import { cn } from '~/utils';
|
||||
|
||||
|
|
@ -20,6 +21,19 @@ export function DataTableColumnHeader<TData, TValue>({
|
|||
title,
|
||||
className = '',
|
||||
}: DataTableColumnHeaderProps<TData, TValue>) {
|
||||
const localize = useLocalize();
|
||||
|
||||
const getSortIcon = () => {
|
||||
const sortDirection = column.getIsSorted();
|
||||
if (sortDirection === 'desc') {
|
||||
return <ArrowDownIcon className="ml-2 h-4 w-4" />;
|
||||
}
|
||||
if (sortDirection === 'asc') {
|
||||
return <ArrowUpIcon className="ml-2 h-4 w-4" />;
|
||||
}
|
||||
return <CaretSortIcon className="ml-2 h-4 w-4" />;
|
||||
};
|
||||
|
||||
if (!column.getCanSort()) {
|
||||
return <div className={cn(className)}>{title}</div>;
|
||||
}
|
||||
|
|
@ -28,15 +42,14 @@ export function DataTableColumnHeader<TData, TValue>({
|
|||
<div className={cn('flex items-center space-x-2', className)}>
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button variant="ghost" size="sm" className="-ml-3 h-8 data-[state=open]:bg-accent">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="-ml-3 h-8 data-[state=open]:bg-accent"
|
||||
aria-label={localize('com_ui_filter_by', { title })}
|
||||
>
|
||||
<span>{title}</span>
|
||||
{column.getIsSorted() === 'desc' ? (
|
||||
<ArrowDownIcon className="ml-2 h-4 w-4" />
|
||||
) : column.getIsSorted() === 'asc' ? (
|
||||
<ArrowUpIcon className="ml-2 h-4 w-4" />
|
||||
) : (
|
||||
<CaretSortIcon className="ml-2 h-4 w-4" />
|
||||
)}
|
||||
{getSortIcon()}
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="start" className="z-[1001]">
|
||||
|
|
|
|||
|
|
@ -85,7 +85,9 @@ const OGDialogTemplate = forwardRef((props: DialogTemplateProps, ref: Ref<HTMLDi
|
|||
<div className="flex h-auto gap-3 max-sm:w-full max-sm:flex-col sm:flex-row">
|
||||
{showCancelButton && (
|
||||
<OGDialogClose asChild>
|
||||
<Button variant="outline">{localize('com_ui_cancel')}</Button>
|
||||
<Button variant="outline" aria-label={localize('com_ui_cancel')}>
|
||||
{localize('com_ui_cancel')}
|
||||
</Button>
|
||||
</OGDialogClose>
|
||||
)}
|
||||
{buttons != null ? buttons : null}
|
||||
|
|
|
|||
|
|
@ -2,25 +2,39 @@ import * as React from 'react';
|
|||
import * as SwitchPrimitives from '@radix-ui/react-switch';
|
||||
import { cn } from '~/utils';
|
||||
|
||||
const Switch = React.forwardRef<
|
||||
React.ElementRef<typeof SwitchPrimitives.Root>,
|
||||
React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<SwitchPrimitives.Root
|
||||
className={cn(
|
||||
'peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-switch-unchecked',
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
ref={ref}
|
||||
>
|
||||
<SwitchPrimitives.Thumb
|
||||
type BaseSwitchProps = Omit<
|
||||
React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>,
|
||||
'aria-label' | 'aria-labelledby'
|
||||
>;
|
||||
|
||||
type SwitchProps =
|
||||
| (BaseSwitchProps & {
|
||||
'aria-label': string;
|
||||
'aria-labelledby'?: never;
|
||||
})
|
||||
| (BaseSwitchProps & {
|
||||
'aria-labelledby': string;
|
||||
'aria-label'?: never;
|
||||
});
|
||||
|
||||
const Switch = React.forwardRef<React.ElementRef<typeof SwitchPrimitives.Root>, SwitchProps>(
|
||||
({ className, ...props }, ref) => (
|
||||
<SwitchPrimitives.Root
|
||||
className={cn(
|
||||
'pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0',
|
||||
'peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-switch-unchecked',
|
||||
className,
|
||||
)}
|
||||
/>
|
||||
</SwitchPrimitives.Root>
|
||||
));
|
||||
{...props}
|
||||
ref={ref}
|
||||
>
|
||||
<SwitchPrimitives.Thumb
|
||||
className={cn(
|
||||
'pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0',
|
||||
)}
|
||||
/>
|
||||
</SwitchPrimitives.Root>
|
||||
),
|
||||
);
|
||||
Switch.displayName = SwitchPrimitives.Root.displayName;
|
||||
|
||||
export { Switch };
|
||||
|
|
|
|||
|
|
@ -4,7 +4,19 @@ import ReactTextareaAutosize from 'react-textarea-autosize';
|
|||
import type { TextareaAutosizeProps } from 'react-textarea-autosize';
|
||||
import { chatDirectionAtom } from '~/store';
|
||||
|
||||
export const TextareaAutosize = forwardRef<HTMLTextAreaElement, TextareaAutosizeProps>(
|
||||
type BaseTextareaAutosizeProps = Omit<TextareaAutosizeProps, 'aria-label' | 'aria-labelledby'>;
|
||||
|
||||
export type TextareaAutosizePropsWithAria =
|
||||
| (BaseTextareaAutosizeProps & {
|
||||
'aria-label': string;
|
||||
'aria-labelledby'?: never;
|
||||
})
|
||||
| (BaseTextareaAutosizeProps & {
|
||||
'aria-labelledby': string;
|
||||
'aria-label'?: never;
|
||||
});
|
||||
|
||||
export const TextareaAutosize = forwardRef<HTMLTextAreaElement, TextareaAutosizePropsWithAria>(
|
||||
(props, ref) => {
|
||||
const [, setIsRerendered] = useState(false);
|
||||
const chatDirection = useAtomValue(chatDirectionAtom).toLowerCase();
|
||||
|
|
|
|||
|
|
@ -1,4 +1,7 @@
|
|||
{
|
||||
"com_ui_cancel": "Cancel",
|
||||
"com_ui_no_options": "No options available"
|
||||
"com_ui_no_options": "No options available",
|
||||
"com_ui_delete_selected_items": "Delete selected items",
|
||||
"com_ui_filter_by": "Filter by {{title}}",
|
||||
"com_ui_cancel_dialog": "Cancel dialog"
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue