mirror of
https://github.com/danny-avila/LibreChat.git
synced 2026-01-23 18:56:12 +01:00
1143f73f59
If you've got a screen reader that is reading out the whole page, each icon button (i.e., `<button><SVG></button>`) will have both the button's aria-label read out as well as the title from the SVG (which is usually just "image"). Since we are pretty good about setting aria-labels, we should instead use `aria-hidden="true"` on these images, since they are not useful to be read out. I don't consider this a comprehensive review of all icons in the app, but I knocked out all the low hanging fruit in this commit.
38 lines
1.2 KiB
TypeScript
38 lines
1.2 KiB
TypeScript
import React, { memo } from 'react';
|
|
import { TerminalSquareIcon } from 'lucide-react';
|
|
import { CheckboxButton } from '@librechat/client';
|
|
import { PermissionTypes, Permissions } from 'librechat-data-provider';
|
|
import { useLocalize, useHasAccess } from '~/hooks';
|
|
import { useBadgeRowContext } from '~/Providers';
|
|
|
|
function CodeInterpreter() {
|
|
const localize = useLocalize();
|
|
const { codeInterpreter, codeApiKeyForm } = useBadgeRowContext();
|
|
const { toggleState: runCode, debouncedChange, isPinned } = codeInterpreter;
|
|
const { badgeTriggerRef } = codeApiKeyForm;
|
|
|
|
const canRunCode = useHasAccess({
|
|
permissionType: PermissionTypes.RUN_CODE,
|
|
permission: Permissions.USE,
|
|
});
|
|
|
|
if (!canRunCode) {
|
|
return null;
|
|
}
|
|
|
|
return (
|
|
(runCode || isPinned) && (
|
|
<CheckboxButton
|
|
ref={badgeTriggerRef}
|
|
className="max-w-fit"
|
|
checked={runCode}
|
|
setValue={debouncedChange}
|
|
label={localize('com_assistants_code_interpreter')}
|
|
isCheckedClassName="border-purple-600/40 bg-purple-500/10 hover:bg-purple-700/10"
|
|
icon={<TerminalSquareIcon className="icon-md" aria-hidden="true" />}
|
|
/>
|
|
)
|
|
);
|
|
}
|
|
|
|
export default memo(CodeInterpreter);
|