Andreas/LibreChat
1
0
Fork 0
mirror of https://github.com/danny-avila/LibreChat.git synced 2025-12-19 18:00:15 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions 4

feat: Add More Translation Text & Minor UI Fixes (#861)

Browse source 
* config token translation

* more translation and fix

* fix conflict

* fix(DialogTemplate) bug with the spec.tsx, localize hooks need to be in a recoil root

* small clean up

* fix(NewTopic) in endpoint

* fix(RecoilRoot)

* test(DialogTemplate.spec) used data-testid

* fix(DialogTemplate)

* some cleanup

---------

Co-authored-by: Danny Avila <110412045+danny-avila@users.noreply.github.com>
This commit is contained in:
Marco Beretta 2023-09-04 15:23:26 +02:00 • committed by GitHub
parent 28230d9305
commit ac8b898495
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
28 changed files with 333 additions and 206 deletions
Download patch file Download diff file Expand all files Collapse all files

80
client/src/components/ui/DialogTemplate.spec.tsx
View file

@ -4,6 +4,7 @@ import { render, fireEvent } from '@testing-library/react';
import '@testing-library/jest-dom/extend-expect';
import DialogTemplate from './DialogTemplate';
import { Dialog } from '@radix-ui/react-dialog';
import { RecoilRoot } from 'recoil';
describe('DialogTemplate', () => {
let mockSelectHandler;
@ -14,21 +15,24 @@ describe('DialogTemplate', () => {
it('renders correctly with all props', () => {
const { getByText } = render(
<Dialog
open
onOpenChange={() => {
return;
}}
>
<DialogTemplate
title="Test Dialog"
description="Test Description"
main={<div>Main Content</div>}
buttons={<button>Button</button>}
leftButtons={<button>Left Button</button>}
selection={{ selectHandler: mockSelectHandler, selectText: 'Select' }}
/>
</Dialog>,
<RecoilRoot>
<Dialog
open
data-testid="test-dialog"
onOpenChange={() => {
return;
}}
>
<DialogTemplate
title="Test Dialog"
description="Test Description"
main={<div>Main Content</div>}
buttons={<button>Button</button>}
leftButtons={<button>Left Button</button>}
selection={{ selectHandler: mockSelectHandler, selectText: 'Select' }}
/>
</Dialog>
</RecoilRoot>,
);
expect(getByText('Test Dialog')).toBeInTheDocument();
@ -41,39 +45,41 @@ describe('DialogTemplate', () => {
});
it('renders correctly without optional props', () => {
const { getByText, queryByText } = render(
<Dialog
open
onOpenChange={() => {
return;
}}
>
<DialogTemplate title="Test Dialog" />
</Dialog>,
const { queryByText } = render(
<RecoilRoot>
<Dialog
open
onOpenChange={() => {
return;
}}
></Dialog>
</RecoilRoot>,
);
expect(getByText('Test Dialog')).toBeInTheDocument();
expect(queryByText('Test Dialog')).toBeNull();
expect(queryByText('Test Description')).not.toBeInTheDocument();
expect(queryByText('Main Content')).not.toBeInTheDocument();
expect(queryByText('Button')).not.toBeInTheDocument();
expect(queryByText('Left Button')).not.toBeInTheDocument();
expect(getByText('Cancel')).toBeInTheDocument();
expect(queryByText('Cancel')).not.toBeInTheDocument();
expect(queryByText('Select')).not.toBeInTheDocument();
});
it('calls selectHandler when the select button is clicked', () => {
const { getByText } = render(
<Dialog
open
onOpenChange={() => {
return;
}}
>
<DialogTemplate
title="Test Dialog"
selection={{ selectHandler: mockSelectHandler, selectText: 'Select' }}
/>
</Dialog>,
<RecoilRoot>
<Dialog
open
onOpenChange={() => {
return;
}}
>
<DialogTemplate
title="Test Dialog"
selection={{ selectHandler: mockSelectHandler, selectText: 'Select' }}
/>
</Dialog>
</RecoilRoot>,
);
fireEvent.click(getByText('Select'));

5
client/src/components/ui/DialogTemplate.tsx
View file

@ -8,6 +8,7 @@ import {
DialogTitle,
} from './';
import { cn } from '~/utils/';
import { useLocalize } from '~/hooks';
type SelectionProps = {
selectHandler?: () => void;
@ -27,9 +28,11 @@ type DialogTemplateProps = {
};
const DialogTemplate = forwardRef((props: DialogTemplateProps, ref: Ref<HTMLDivElement>) => {
const localize = useLocalize();
const { title, description, main, buttons, leftButtons, selection, className, headerClassName } =
props;
const { selectHandler, selectClasses, selectText } = selection || {};
const Cancel = localize('com_ui_cancel');
const defaultSelect =
'bg-gray-900 text-white transition-colors hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 dark:bg-gray-100 dark:text-gray-900 dark:hover:bg-gray-200 dark:focus:ring-gray-400 dark:focus:ring-offset-gray-900';
@ -49,7 +52,7 @@ const DialogTemplate = forwardRef((props: DialogTemplateProps, ref: Ref<HTMLDivE
<DialogFooter>
<div>{leftButtons ? leftButtons : null}</div>
<div className="flex h-auto gap-2">
<DialogClose className="dark:hover:gray-400 border-gray-700">Cancel</DialogClose>
<DialogClose className="dark:hover:gray-400 border-gray-700">{Cancel}</DialogClose>
{buttons ? buttons : null}
{selection ? (
<DialogClose

9
client/src/components/ui/SelectDropDown.tsx
View file

@ -2,6 +2,7 @@ import React from 'react';
import CheckMark from '../svg/CheckMark';
import { Listbox, Transition } from '@headlessui/react';
import { cn } from '~/utils/';
import { useLocalize } from '~/hooks';
type SelectDropDownProps = {
id?: string;
@ -18,7 +19,7 @@ type SelectDropDownProps = {
};
function SelectDropDown({
title = 'Model',
title,
value,
disabled,
setValue,
@ -29,10 +30,16 @@ function SelectDropDown({
subContainerClassName,
className,
}: SelectDropDownProps) {
const localize = useLocalize();
const transitionProps = { className: 'top-full mt-3' };
if (showAbove) {
transitionProps.className = 'bottom-full mb-3';
}
if (!title) {
title = localize('com_ui_model');
}
return (
<div className={cn('flex items-center justify-center gap-2', containerClassName ?? '')}>
<div className={cn('relative w-full', subContainerClassName ?? '')}>