mirror of
https://github.com/danny-avila/LibreChat.git
synced 2025-12-19 09:50:15 +01:00
🎛️ fix: Improve Frontend Practices for Audio Settings (#3624)
* refactor: do not call await inside useCallbacks, rely on updates for dropdown * fix: remember last selected voice * refactor: Update Speech component to use TypeScript in useCallback * refactor: Update Dropdown component styles to match header theme
This commit is contained in:
Danny Avila
GitHub
parent
8cbb6ba166
commit
05696233a9
20 changed files with 436 additions and 367 deletions
|
|
@ -1,4 +1,4 @@
|
|||
import React, { FC, useContext, useState } from 'react';
|
||||
import React, { FC, useState } from 'react';
|
||||
import {
|
||||
Listbox,
|
||||
ListboxButton,
|
||||
|
|
@ -7,18 +7,14 @@ import {
|
|||
Transition,
|
||||
} from '@headlessui/react';
|
||||
import { AnchorPropsWithSelection } from '@headlessui/react/dist/internal/floating';
|
||||
import type { Option } from '~/common';
|
||||
import { cn } from '~/utils/';
|
||||
|
||||
type OptionType = {
|
||||
value: string;
|
||||
display?: string;
|
||||
};
|
||||
|
||||
interface DropdownProps {
|
||||
value: string;
|
||||
label?: string;
|
||||
onChange: (value: string) => void;
|
||||
options: (string | OptionType)[];
|
||||
options: string[] | Option[];
|
||||
className?: string;
|
||||
anchor?: AnchorPropsWithSelection;
|
||||
sizeClasses?: string;
|
||||
|
|
@ -50,8 +46,7 @@ const Dropdown: FC<DropdownProps> = ({
|
|||
<ListboxButton
|
||||
data-testid={testId}
|
||||
className={cn(
|
||||
'relative inline-flex items-center justify-between rounded-md border-gray-50 bg-white py-2 pl-3 pr-8 text-black transition-all duration-100 ease-in-out hover:bg-gray-100 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:hover:bg-gray-600 dark:focus:ring-white dark:focus:ring-offset-gray-700',
|
||||
'w-auto',
|
||||
'focus:ring-offset-ring-offset relative inline-flex w-auto items-center justify-between rounded-md border-border-light bg-header-primary py-2 pl-3 pr-8 text-text-primary transition-all duration-100 ease-in-out hover:bg-header-hover focus:ring-ring-primary',
|
||||
className,
|
||||
)}
|
||||
aria-label="Select an option"
|
||||
|
|
@ -59,8 +54,8 @@ const Dropdown: FC<DropdownProps> = ({
|
|||
<span className="block truncate">
|
||||
{label}
|
||||
{options
|
||||
.map((o) => (typeof o === 'string' ? { value: o, display: o } : o))
|
||||
.find((o) => o.value === selectedValue)?.display || selectedValue}
|
||||
.map((o) => (typeof o === 'string' ? { value: o, label: o } : o))
|
||||
.find((o) => o.value === selectedValue)?.label ?? selectedValue}
|
||||
</span>
|
||||
<span className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2">
|
||||
<svg
|
||||
|
|
@ -69,7 +64,7 @@ const Dropdown: FC<DropdownProps> = ({
|
|||
viewBox="0 0 24 24"
|
||||
strokeWidth="2"
|
||||
stroke="currentColor"
|
||||
className="h-4 w-5 rotate-0 transform text-black transition-transform duration-300 ease-in-out dark:text-gray-50"
|
||||
className="h-4 w-5 rotate-0 transform text-text-primary transition-transform duration-300 ease-in-out"
|
||||
>
|
||||
<polyline points="6 9 12 15 18 9"></polyline>
|
||||
</svg>
|
||||
|
|
@ -82,7 +77,7 @@ const Dropdown: FC<DropdownProps> = ({
|
|||
>
|
||||
<ListboxOptions
|
||||
className={cn(
|
||||
'absolute z-50 mt-1 flex flex-col items-start gap-1 overflow-auto rounded-lg border border-gray-300 bg-white bg-white p-1.5 text-gray-700 shadow-lg transition-opacity focus:outline-none dark:border-gray-600 dark:bg-gray-700 dark:text-white',
|
||||
'absolute z-50 mt-1 flex flex-col items-start gap-1 overflow-auto rounded-lg border border-border-medium bg-header-primary p-1.5 shadow-lg transition-opacity',
|
||||
sizeClasses,
|
||||
className,
|
||||
)}
|
||||
|
|
@ -93,15 +88,13 @@ const Dropdown: FC<DropdownProps> = ({
|
|||
<ListboxOption
|
||||
key={index}
|
||||
value={typeof item === 'string' ? item : item.value}
|
||||
className={cn(
|
||||
'relative cursor-pointer select-none rounded border-gray-300 bg-white py-2.5 pl-3 pr-3 text-sm text-gray-700 hover:bg-gray-100 dark:border-gray-300 dark:bg-gray-700 dark:text-white dark:hover:bg-gray-600',
|
||||
)}
|
||||
className="focus-visible:ring-offset ring-offset-ring-offset relative cursor-pointer select-none rounded border-border-light bg-header-primary py-2.5 pl-3 pr-3 text-sm text-text-secondary ring-ring-primary hover:bg-header-hover focus-visible:ring"
|
||||
style={{ width: '100%' }}
|
||||
data-theme={typeof item === 'string' ? item : (item as OptionType).value}
|
||||
data-theme={typeof item === 'string' ? item : (item as Option).value}
|
||||
>
|
||||
<div className="flex w-full items-center justify-between">
|
||||
<span className="block truncate">
|
||||
{typeof item === 'string' ? item : (item as OptionType).display}
|
||||
{typeof item === 'string' ? item : (item as Option).label}
|
||||
</span>
|
||||
{selectedValue === (typeof item === 'string' ? item : item.value) && (
|
||||
<span className="ml-auto pl-2">
|
||||
|
|
|
|||
|
|
@ -7,18 +7,14 @@ import {
|
|||
Transition,
|
||||
} from '@headlessui/react';
|
||||
import { AnchorPropsWithSelection } from '@headlessui/react/dist/internal/floating';
|
||||
import type { Option } from '~/common';
|
||||
import { cn } from '~/utils/';
|
||||
|
||||
type OptionType = {
|
||||
value: string;
|
||||
display?: string;
|
||||
};
|
||||
|
||||
interface DropdownProps {
|
||||
value: string | OptionType;
|
||||
value?: string | Option;
|
||||
label?: string;
|
||||
onChange: (value: string) => void | ((value: OptionType) => void);
|
||||
options: (string | OptionType)[];
|
||||
onChange: (value: string | Option) => void;
|
||||
options: (string | Option)[];
|
||||
className?: string;
|
||||
anchor?: AnchorPropsWithSelection;
|
||||
sizeClasses?: string;
|
||||
|
|
@ -35,19 +31,23 @@ const Dropdown: FC<DropdownProps> = ({
|
|||
sizeClasses,
|
||||
testId = 'dropdown-menu',
|
||||
}) => {
|
||||
const getValue = (option: string | OptionType): string =>
|
||||
typeof option === 'string' ? option : option.value;
|
||||
const getValue = (option?: string | Option) =>
|
||||
typeof option === 'string' ? option : option?.value;
|
||||
|
||||
const getDisplay = (option: string | OptionType): string =>
|
||||
typeof option === 'string' ? option : (option.display ?? '') || option.value;
|
||||
const getDisplay = (option?: string | Option) =>
|
||||
typeof option === 'string' ? option : option?.label ?? option?.value;
|
||||
|
||||
const selectedOption = options.find((option) => getValue(option) === getValue(value));
|
||||
const isEqual = (a: string | Option, b: string | Option): boolean => getValue(a) === getValue(b);
|
||||
|
||||
const displayValue = selectedOption != null ? getDisplay(selectedOption) : getDisplay(value);
|
||||
const selectedOption = options.find((option) => isEqual(option, value ?? '')) ?? value;
|
||||
|
||||
const handleChange = (newValue: string | Option) => {
|
||||
onChange(newValue);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className={cn('relative', className)}>
|
||||
<Listbox value={value} onChange={onChange}>
|
||||
<Listbox value={selectedOption} onChange={handleChange}>
|
||||
<div className={cn('relative', className)}>
|
||||
<ListboxButton
|
||||
data-testid={testId}
|
||||
|
|
@ -60,7 +60,7 @@ const Dropdown: FC<DropdownProps> = ({
|
|||
>
|
||||
<span className="block truncate">
|
||||
{label}
|
||||
{displayValue}
|
||||
{getDisplay(selectedOption)}
|
||||
</span>
|
||||
<span className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2">
|
||||
<svg
|
||||
|
|
@ -99,9 +99,30 @@ const Dropdown: FC<DropdownProps> = ({
|
|||
style={{ width: '100%' }}
|
||||
data-theme={getValue(item)}
|
||||
>
|
||||
<div className="flex w-full items-center justify-between">
|
||||
<span className="block truncate">{getDisplay(item)}</span>
|
||||
</div>
|
||||
{({ selected }) => (
|
||||
<div className="flex w-full items-center justify-between">
|
||||
<span className="block truncate">{getDisplay(item)}</span>
|
||||
{selected && (
|
||||
<span className="ml-auto pl-2">
|
||||
<svg
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
className="icon-md block group-hover:hidden"
|
||||
>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12ZM16.0755 7.93219C16.5272 8.25003 16.6356 8.87383 16.3178 9.32549L11.5678 16.0755C11.3931 16.3237 11.1152 16.4792 10.8123 16.4981C10.5093 16.517 10.2142 16.3973 10.0101 16.1727L7.51006 13.4227C7.13855 13.014 7.16867 12.3816 7.57733 12.0101C7.98598 11.6386 8.61843 11.6687 8.98994 12.0773L10.6504 13.9039L14.6822 8.17451C15 7.72284 15.6238 7.61436 16.0755 7.93219Z"
|
||||
fill="currentColor"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</ListboxOption>
|
||||
))}
|
||||
</ListboxOptions>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue