♿️ fix: Accessibility, UI consistency, dialog & avatar refactors (#9975)

* 🔧 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

packages/client/src/components/Slider.tsx

@@ -2,37 +2,56 @@ import * as React from 'react';
 import * as SliderPrimitive from '@radix-ui/react-slider';
 import { cn } from '~/utils';
 
-const Slider = React.forwardRef<
-  React.ElementRef<typeof SliderPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root> & {
-    className?: string;
-    onDoubleClick?: () => void;
-  }
->(({ className, onDoubleClick, ...props }, ref) => (
-  <SliderPrimitive.Root
-    ref={ref}
-    {...props}
-    {...{
-      className: cn(
-        'relative flex w-full cursor-pointer touch-none select-none items-center',
-        className,
-      ),
+type SliderProps = React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root> & {
+  className?: string;
+  onDoubleClick?: () => void;
+  'aria-describedby'?: string;
+} & (
+    | { 'aria-label': string; 'aria-labelledby'?: never }
+    | { 'aria-labelledby': string; 'aria-label'?: never }
+    | { 'aria-label': string; 'aria-labelledby': string }
+  );
+
+const Slider = React.forwardRef<React.ElementRef<typeof SliderPrimitive.Root>, SliderProps>(
+  (
+    {
+      className,
       onDoubleClick,
-    }}
-  >
-    <SliderPrimitive.Track
-      {...{ className: 'relative h-2 w-full grow overflow-hidden rounded-full bg-secondary' }}
-    >
-      <SliderPrimitive.Range {...{ className: 'absolute h-full bg-primary' }} />
-    </SliderPrimitive.Track>
-    <SliderPrimitive.Thumb
+      'aria-labelledby': ariaLabelledBy,
+      'aria-label': ariaLabel,
+      'aria-describedby': ariaDescribedBy,
+      ...props
+    },
+    ref,
+  ) => (
+    <SliderPrimitive.Root
+      ref={ref}
+      {...props}
       {...{
-        className:
-          'block h-5 w-5 rounded-full border-2 border-primary bg-background ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
+        className: cn(
+          'relative flex w-full cursor-pointer touch-none select-none items-center',
+          className,
+        ),
+        onDoubleClick,
       }}
-    />
-  </SliderPrimitive.Root>
-));
+    >
+      <SliderPrimitive.Track
+        {...{ className: 'relative h-2 w-full grow overflow-hidden rounded-full bg-secondary' }}
+      >
+        <SliderPrimitive.Range {...{ className: 'absolute h-full bg-primary' }} />
+      </SliderPrimitive.Track>
+      <SliderPrimitive.Thumb
+        {...{
+          className:
+            'block h-5 w-5 rounded-full border-2 border-primary bg-background ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
+          'aria-labelledby': ariaLabelledBy,
+          'aria-label': ariaLabel,
+          'aria-describedby': ariaDescribedBy,
+        }}
+      />
+    </SliderPrimitive.Root>
+  ),
+);
 Slider.displayName = SliderPrimitive.Root.displayName;
 
 export { Slider };