mirror of
https://github.com/danny-avila/LibreChat.git
synced 2026-01-16 15:35:31 +01:00
a5189052ec
* 🔧 refactor: Improve accessibility and styling in ChatGroupItem and FilterPrompts components * 🔧 fix: Add button type and keyboard accessibility to dropdown menu trigger in ChatGroupItem * 🔧 fix(757): Enhance accessibility by updating aria-labels and adding localization for prompt groups * 🔧 fix(618): Update version to 0.3.1 and enhance accessibility in InfoHoverCard component * 🔧 fix(618): Update aria-label in InfoHoverCard to use dynamic text prop for improved accessibility * 🔧 fix: Enhance accessibility by updating aria-labels and roles in Conversations components * 🔧 fix(620): Enhance accessibility by adding tabIndex to Tabs.Content components in ArtifactTabs, Settings, and Speech components * refactor: remove RevokeKeysButton component and update related components for accessibility - Deleted RevokeKeysButton component. - Updated SharedLinks and General components to use Label for accessibility. - Enhanced Personalization component with aria-labelledby and aria-describedby attributes. - Refactored ConversationModeSwitch to use ToggleSwitch for better state management. - Improved AutoSendTextSelector with local state management and accessibility attributes. - Replaced Switch components with ToggleSwitch in various Speech and TTS components for consistency. - Added aria-labelledby attributes to Dropdown components for better accessibility. - Updated translation.json to include new localization keys and improved existing ones. - Enhanced Slider component to support aria attributes for better accessibility. * 🔧 fix: Enhance user feedback for API key operations with success and error messages * 🔧 fix: Update aria-labels in Avatar component for improved localization and accessibility * 🔧 fix: Refactor handleFile and handleDrop functions for improved readability and maintainability
36 lines
1.2 KiB
TypeScript
36 lines
1.2 KiB
TypeScript
import { useState } from 'react';
|
|
import { CircleHelpIcon } from 'lucide-react';
|
|
import { HoverCard, HoverCardTrigger, HoverCardPortal, HoverCardContent } from './HoverCard';
|
|
import { ESide } from '~/common';
|
|
|
|
type InfoHoverCardProps = {
|
|
side?: ESide;
|
|
text: string;
|
|
};
|
|
|
|
const InfoHoverCard = ({ side, text }: InfoHoverCardProps) => {
|
|
const [isOpen, setIsOpen] = useState(false);
|
|
|
|
return (
|
|
<HoverCard openDelay={50} open={isOpen} onOpenChange={setIsOpen}>
|
|
<HoverCardTrigger
|
|
tabIndex={0}
|
|
className="inline-flex cursor-help items-center justify-center rounded-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring-primary focus-visible:ring-offset-2"
|
|
onFocus={() => setIsOpen(true)}
|
|
onBlur={() => setIsOpen(false)}
|
|
aria-label={text}
|
|
>
|
|
<CircleHelpIcon className="h-5 w-5 text-text-tertiary" aria-hidden="true" />
|
|
</HoverCardTrigger>
|
|
<HoverCardPortal>
|
|
<HoverCardContent side={side} className="z-[999] w-80">
|
|
<div className="space-y-2">
|
|
<span className="text-sm text-text-secondary">{text}</span>
|
|
</div>
|
|
</HoverCardContent>
|
|
</HoverCardPortal>
|
|
</HoverCard>
|
|
);
|
|
};
|
|
|
|
export default InfoHoverCard;
|