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

refactor(Action): make accessible

Browse source
This commit is contained in:
Danny Avila 2024-09-04 14:58:05 -04:00
parent 91d6cdab82
commit 8f3fe4aec3
No known key found for this signature in database
GPG key ID: 2DD9CC89B9B50364
1 changed files with 26 additions and 18 deletions
Download patch file Download diff file Expand all files Collapse all files

44
client/src/components/SidePanel/Builder/Action.tsx
View file

@ -1,32 +1,40 @@
import { useState } from 'react';
import type { Action } from 'librechat-data-provider';
import GearIcon from '~/components/svg/GearIcon';
import { cn } from '~/utils';
export default function Action({ action, onClick }: { action: Action; onClick: () => void }) {
const [isHovering, setIsHovering] = useState(false);
return (
<div>
<div
role="button"
tabIndex={0}
onClick={onClick}
onKeyDown={(e) => {
if (e.key === 'Enter' || e.key === ' ') {
onClick();
}
}}
className="flex w-full rounded-lg text-sm hover:cursor-pointer focus:outline-none focus:ring-2 focus:ring-text-primary"
onMouseEnter={() => setIsHovering(true)}
onMouseLeave={() => setIsHovering(false)}
aria-label={`Action for ${action.metadata.domain}`}
>
<div
onClick={onClick}
className="flex w-full rounded-lg text-sm hover:cursor-pointer"
onMouseEnter={() => setIsHovering(true)}
onMouseLeave={() => setIsHovering(false)}
className="h-9 grow overflow-hidden text-ellipsis whitespace-nowrap px-3 py-2"
style={{ wordBreak: 'break-all' }}
>
<div
className="h-9 grow whitespace-nowrap px-3 py-2"
style={{ textOverflow: 'ellipsis', wordBreak: 'break-all', overflow: 'hidden' }}
>
{action.metadata.domain}
</div>
{isHovering && (
<button
type="button"
className="transition-colors flex h-9 w-9 min-w-9 items-center justify-center rounded-lg duration-200 hover:bg-gray-200 dark:hover:bg-gray-700"
>
<GearIcon className="icon-sm" />
</button>
{action.metadata.domain}
</div>
<div
className={cn(
'flex h-9 w-9 min-w-9 items-center justify-center rounded-lg transition-colors duration-200 hover:bg-surface-tertiary focus:outline-none focus:ring-2 focus:ring-text-primary',
isHovering ? 'flex' : 'hidden',
)}
aria-label="Settings"
>
<GearIcon className="icon-sm" aria-hidden="true" />
</div>
</div>
);