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

🎛️ fix: Improve Frontend Practices for Audio Settings (#3624)

Browse source 
* 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 2024-08-13 02:42:49 -04:00 • committed by GitHub
parent 8cbb6ba166
commit 05696233a9
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
20 changed files with 436 additions and 367 deletions
Download patch file Download diff file Expand all files Collapse all files

59
client/src/components/ui/DropdownNoState.tsx
View file

@ -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>