mirror of
https://github.com/danny-avila/LibreChat.git
synced 2025-12-20 18:30:15 +01:00
fix build client package
This commit is contained in:
Marco Beretta
parent
e042e1500f
commit
4f06c159be
22 changed files with 148 additions and 565 deletions
|
|
@ -2,7 +2,7 @@ import { RefObject } from 'react';
|
|||
import { FileSources, EModelEndpoint } from 'librechat-data-provider';
|
||||
import type { UseMutationResult } from '@tanstack/react-query';
|
||||
import type * as InputNumberPrimitive from 'rc-input-number';
|
||||
import type { SetterOrUpdater, RecoilState } from 'recoil';
|
||||
import type { PrimitiveAtom, WritableAtom } from 'jotai';
|
||||
import type { ColumnDef } from '@tanstack/react-table';
|
||||
import type * as t from 'librechat-data-provider';
|
||||
import type { LucideIcon } from 'lucide-react';
|
||||
|
|
@ -49,9 +49,9 @@ export type AudioChunk = {
|
|||
|
||||
export type BadgeItem = {
|
||||
id: string;
|
||||
icon: React.ComponentType<any>;
|
||||
icon: React.ComponentType<React.SVGProps<SVGSVGElement>>;
|
||||
label: string;
|
||||
atom: RecoilState<boolean>;
|
||||
atom: PrimitiveAtom<boolean> | WritableAtom<boolean, [boolean], void>;
|
||||
isAvailable: boolean;
|
||||
};
|
||||
|
||||
|
|
@ -147,7 +147,7 @@ export enum Panel {
|
|||
}
|
||||
|
||||
export type FileSetter =
|
||||
| SetterOrUpdater<Map<string, ExtendedFile>>
|
||||
| GenericSetter<Map<string, ExtendedFile>>
|
||||
| React.Dispatch<React.SetStateAction<Map<string, ExtendedFile>>>;
|
||||
|
||||
export type ActionAuthForm = {
|
||||
|
|
|
|||
|
|
@ -5,7 +5,11 @@ import type { ButtonHTMLAttributes } from 'react';
|
|||
import type { LucideIcon } from 'lucide-react';
|
||||
import { cn } from '~/utils';
|
||||
|
||||
interface BadgeProps extends ButtonHTMLAttributes<HTMLButtonElement> {
|
||||
interface BadgeProps
|
||||
extends Omit<
|
||||
ButtonHTMLAttributes<HTMLButtonElement>,
|
||||
'onAnimationStart' | 'onDragStart' | 'onDragEnd' | 'onDrag'
|
||||
> {
|
||||
icon?: LucideIcon;
|
||||
label: string;
|
||||
id?: string;
|
||||
|
|
@ -70,7 +74,7 @@ export default function Badge({
|
|||
}}
|
||||
whileTap={{ scale: isDragging ? 1.1 : isDisabled ? 1 : 0.97 }}
|
||||
transition={{ type: 'tween', duration: 0.1, ease: 'easeOut' }}
|
||||
{...props}
|
||||
{...(props as React.ComponentProps<typeof motion.button>)}
|
||||
>
|
||||
{Icon && <Icon className={cn('relative h-5 w-5 md:h-4 md:w-4', !label && 'mx-auto')} />}
|
||||
<span className="relative hidden md:inline">{label}</span>
|
||||
|
|
|
|||
|
|
@ -25,8 +25,7 @@ import {
|
|||
AnimatedSearchInput,
|
||||
Skeleton,
|
||||
} from './';
|
||||
import { TrashIcon, Spinner } from '~/svg';
|
||||
import { LocalizeFunction } from '~/common';
|
||||
import { TrashIcon, Spinner } from '~/svgs';
|
||||
import { useMediaQuery } from '~/hooks';
|
||||
import { cn } from '~/utils';
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +1,12 @@
|
|||
import React from 'react';
|
||||
import { useDelayedRender } from '~/hooks';
|
||||
|
||||
const DelayedRender = ({ delay, children }) => useDelayedRender(delay)(() => children);
|
||||
interface DelayedRenderProps {
|
||||
delay: number;
|
||||
children: React.ReactNode;
|
||||
}
|
||||
|
||||
const DelayedRender = ({ delay, children }: DelayedRenderProps) =>
|
||||
useDelayedRender(delay)(() => children);
|
||||
|
||||
export default DelayedRender;
|
||||
|
|
|
|||
|
|
@ -1,13 +1,12 @@
|
|||
import 'test/matchMedia.mock';
|
||||
import React from 'react';
|
||||
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';
|
||||
import { Provider } from 'jotai';
|
||||
|
||||
describe('DialogTemplate', () => {
|
||||
let mockSelectHandler;
|
||||
let mockSelectHandler: jest.Mock;
|
||||
|
||||
beforeEach(() => {
|
||||
mockSelectHandler = jest.fn();
|
||||
|
|
@ -15,7 +14,7 @@ describe('DialogTemplate', () => {
|
|||
|
||||
it('renders correctly with all props', () => {
|
||||
const { getByText } = render(
|
||||
<RecoilRoot>
|
||||
<Provider>
|
||||
<Dialog
|
||||
open
|
||||
data-testid="test-dialog"
|
||||
|
|
@ -32,7 +31,7 @@ describe('DialogTemplate', () => {
|
|||
selection={{ selectHandler: mockSelectHandler, selectText: 'Select' }}
|
||||
/>
|
||||
</Dialog>
|
||||
</RecoilRoot>,
|
||||
</Provider>,
|
||||
);
|
||||
|
||||
expect(getByText('Test Dialog')).toBeInTheDocument();
|
||||
|
|
@ -46,14 +45,14 @@ describe('DialogTemplate', () => {
|
|||
|
||||
it('renders correctly without optional props', () => {
|
||||
const { queryByText } = render(
|
||||
<RecoilRoot>
|
||||
<Provider>
|
||||
<Dialog
|
||||
open
|
||||
onOpenChange={() => {
|
||||
return;
|
||||
}}
|
||||
></Dialog>
|
||||
</RecoilRoot>,
|
||||
</Provider>,
|
||||
);
|
||||
|
||||
expect(queryByText('Test Dialog')).toBeNull();
|
||||
|
|
@ -67,7 +66,7 @@ describe('DialogTemplate', () => {
|
|||
|
||||
it('calls selectHandler when the select button is clicked', () => {
|
||||
const { getByText } = render(
|
||||
<RecoilRoot>
|
||||
<Provider>
|
||||
<Dialog
|
||||
open
|
||||
onOpenChange={() => {
|
||||
|
|
@ -79,7 +78,7 @@ describe('DialogTemplate', () => {
|
|||
selection={{ selectHandler: mockSelectHandler, selectText: 'Select' }}
|
||||
/>
|
||||
</Dialog>
|
||||
</RecoilRoot>,
|
||||
</Provider>,
|
||||
);
|
||||
|
||||
fireEvent.click(getByText('Select'));
|
||||
|
|
|
|||
|
|
@ -6,7 +6,6 @@ import {
|
|||
ListboxOptions,
|
||||
Transition,
|
||||
} from '@headlessui/react';
|
||||
import { AnchorPropsWithSelection } from '@headlessui/react/dist/internal/floating';
|
||||
import type { Option } from '~/common';
|
||||
import { cn } from '~/utils/';
|
||||
|
||||
|
|
@ -16,7 +15,6 @@ interface DropdownProps {
|
|||
onChange: (value: string | Option) => void;
|
||||
options: (string | Option)[];
|
||||
className?: string;
|
||||
anchor?: AnchorPropsWithSelection;
|
||||
sizeClasses?: string;
|
||||
testId?: string;
|
||||
}
|
||||
|
|
@ -31,7 +29,6 @@ const Dropdown: FC<DropdownProps> = ({
|
|||
onChange,
|
||||
options,
|
||||
className = '',
|
||||
anchor,
|
||||
sizeClasses,
|
||||
testId = 'dropdown-menu',
|
||||
}) => {
|
||||
|
|
@ -90,7 +87,6 @@ const Dropdown: FC<DropdownProps> = ({
|
|||
sizeClasses,
|
||||
className,
|
||||
)}
|
||||
anchor={anchor}
|
||||
aria-label="List of options"
|
||||
>
|
||||
{options.map((item, index) => (
|
||||
|
|
|
|||
|
|
@ -1,231 +0,0 @@
|
|||
import React, { useState, useRef } from 'react';
|
||||
import { Wrench, ArrowRight } from 'lucide-react';
|
||||
import {
|
||||
Listbox,
|
||||
ListboxButton,
|
||||
Label,
|
||||
ListboxOptions,
|
||||
ListboxOption,
|
||||
Transition,
|
||||
} from '@headlessui/react';
|
||||
import type { TPlugin } from 'librechat-data-provider';
|
||||
import { useMultiSearch } from './MultiSearch';
|
||||
import { useOnClickOutside } from '~/hooks';
|
||||
import { CheckMark } from '~/svgs';
|
||||
import { cn } from '~/utils/';
|
||||
|
||||
export type TMultiSelectDropDownProps = {
|
||||
title?: string;
|
||||
value: Array<{ icon?: string; name?: string; isButton?: boolean }>;
|
||||
disabled?: boolean;
|
||||
setSelected: (option: string) => void;
|
||||
availableValues: TPlugin[];
|
||||
showAbove?: boolean;
|
||||
showLabel?: boolean;
|
||||
containerClassName?: string;
|
||||
optionsClassName?: string;
|
||||
labelClassName?: string;
|
||||
isSelected: (value: string) => boolean;
|
||||
className?: string;
|
||||
searchPlaceholder?: string;
|
||||
optionValueKey?: string;
|
||||
};
|
||||
|
||||
function MultiSelectDropDown({
|
||||
title = 'Plugins',
|
||||
value,
|
||||
disabled,
|
||||
setSelected,
|
||||
availableValues,
|
||||
showAbove = false,
|
||||
showLabel = true,
|
||||
containerClassName,
|
||||
optionsClassName = '',
|
||||
labelClassName = '',
|
||||
isSelected,
|
||||
className,
|
||||
searchPlaceholder,
|
||||
optionValueKey = 'value',
|
||||
}: TMultiSelectDropDownProps) {
|
||||
const [isOpen, setIsOpen] = useState(false);
|
||||
const menuRef = useRef(null);
|
||||
const excludeIds = ['select-plugin', 'plugins-label', 'selected-plugins'];
|
||||
useOnClickOutside(menuRef, () => setIsOpen(false), excludeIds);
|
||||
|
||||
const handleSelect: (value: string) => void = (option) => {
|
||||
setSelected(option);
|
||||
setIsOpen(true);
|
||||
};
|
||||
|
||||
// input will appear near the top of the menu, allowing correct filtering of different model menu items. This will
|
||||
// reset once the component is unmounted (as per a normal search)
|
||||
const [filteredValues, searchRender] = useMultiSearch<TPlugin[]>({
|
||||
availableOptions: availableValues,
|
||||
placeholder: searchPlaceholder,
|
||||
getTextKeyOverride: (option) => (option.name || '').toUpperCase(),
|
||||
});
|
||||
|
||||
const hasSearchRender = Boolean(searchRender);
|
||||
const options = hasSearchRender ? filteredValues : availableValues;
|
||||
|
||||
const transitionProps = { className: 'top-full mt-3' };
|
||||
if (showAbove) {
|
||||
transitionProps.className = 'bottom-full mb-3';
|
||||
}
|
||||
const openProps = { open: isOpen };
|
||||
return (
|
||||
<div className={cn('flex items-center justify-center gap-2', containerClassName ?? '')}>
|
||||
<div className="relative w-full">
|
||||
{/* the function typing is correct but there's still an issue here */}
|
||||
{/* @ts-ignore */}
|
||||
<Listbox value={value} onChange={handleSelect} disabled={disabled}>
|
||||
{() => (
|
||||
<>
|
||||
<ListboxButton
|
||||
className={cn(
|
||||
'relative flex w-full cursor-default flex-col rounded-md border border-black/10 bg-white py-2 pl-3 pr-10 text-left focus:outline-none focus:ring-0 focus:ring-offset-0 dark:border-gray-600 dark:border-white/20 dark:bg-gray-800 sm:text-sm',
|
||||
className ?? '',
|
||||
)}
|
||||
id={excludeIds[0]}
|
||||
onClick={() => setIsOpen((prev) => !prev)}
|
||||
{...openProps}
|
||||
>
|
||||
{' '}
|
||||
{showLabel && (
|
||||
<Label
|
||||
className={cn('block text-xs text-gray-700 dark:text-gray-500', labelClassName)}
|
||||
id={excludeIds[1]}
|
||||
data-headlessui-state=""
|
||||
>
|
||||
{title}
|
||||
</Label>
|
||||
)}
|
||||
<span className="inline-flex w-full truncate" id={excludeIds[2]}>
|
||||
<span
|
||||
className={cn(
|
||||
'flex h-6 items-center gap-1 truncate text-sm text-gray-800 dark:text-white',
|
||||
!showLabel ? 'text-xs' : '',
|
||||
)}
|
||||
>
|
||||
{!showLabel && title.length > 0 && (
|
||||
<span className="text-xs text-gray-700 dark:text-gray-500">{title}:</span>
|
||||
)}
|
||||
<span className="flex h-6 items-center gap-1 truncate">
|
||||
<div className="flex gap-1">
|
||||
{value.map((v, i) => (
|
||||
<div
|
||||
key={i}
|
||||
className="relative"
|
||||
style={{ width: '16px', height: '16px' }}
|
||||
>
|
||||
{v.icon ? (
|
||||
<img
|
||||
src={v.icon}
|
||||
alt={`${v} logo`}
|
||||
className="h-full w-full rounded-sm bg-white"
|
||||
/>
|
||||
) : (
|
||||
<Wrench className="h-full w-full rounded-sm bg-white" />
|
||||
)}
|
||||
<div className="absolute inset-0 rounded-sm ring-1 ring-inset ring-black/10" />
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
<span className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2">
|
||||
<svg
|
||||
stroke="currentColor"
|
||||
fill="none"
|
||||
strokeWidth="2"
|
||||
viewBox="0 0 24 24"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
className="h-4 w-4 text-gray-400"
|
||||
height="1em"
|
||||
width="1em"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
style={showAbove ? { transform: 'scaleY(-1)' } : {}}
|
||||
>
|
||||
<polyline points="6 9 12 15 18 9"></polyline>
|
||||
</svg>
|
||||
</span>
|
||||
</ListboxButton>
|
||||
<Transition
|
||||
show={isOpen}
|
||||
as={React.Fragment}
|
||||
leave="transition ease-in duration-150"
|
||||
leaveFrom="opacity-100"
|
||||
leaveTo="opacity-0"
|
||||
{...transitionProps}
|
||||
>
|
||||
<ListboxOptions
|
||||
ref={menuRef}
|
||||
className={cn(
|
||||
'absolute z-50 mt-2 max-h-60 w-full overflow-auto rounded bg-white text-base text-xs ring-1 ring-black/10 focus:outline-none dark:bg-gray-800 dark:ring-white/20 dark:last:border-0 md:w-[100%]',
|
||||
optionsClassName,
|
||||
)}
|
||||
>
|
||||
{searchRender}
|
||||
{options.map((option, i: number) => {
|
||||
if (!option) {
|
||||
return null;
|
||||
}
|
||||
const selected = isSelected(option[optionValueKey]);
|
||||
return (
|
||||
<ListboxOption
|
||||
key={i}
|
||||
value={option[optionValueKey]}
|
||||
className="group relative flex h-[42px] cursor-pointer select-none items-center overflow-hidden border-b border-black/10 pl-3 pr-9 text-gray-800 last:border-0 hover:bg-gray-20 dark:border-white/20 dark:text-white dark:hover:bg-gray-700"
|
||||
>
|
||||
<span className="flex items-center gap-1.5 truncate">
|
||||
{!option.isButton && (
|
||||
<span className="h-6 w-6 shrink-0">
|
||||
<div className="relative" style={{ width: '100%', height: '100%' }}>
|
||||
{option.icon ? (
|
||||
<img
|
||||
src={option.icon}
|
||||
alt={`${option.name} logo`}
|
||||
className="h-full w-full rounded-sm bg-white"
|
||||
/>
|
||||
) : (
|
||||
<Wrench className="h-full w-full rounded-sm bg-white" />
|
||||
)}
|
||||
<div className="absolute inset-0 rounded-sm ring-1 ring-inset ring-black/10"></div>
|
||||
</div>
|
||||
</span>
|
||||
)}
|
||||
<span
|
||||
className={cn(
|
||||
'flex h-6 items-center gap-1 text-gray-800 dark:text-gray-200',
|
||||
selected ? 'font-semibold' : '',
|
||||
)}
|
||||
>
|
||||
{option.name}
|
||||
</span>
|
||||
{option.isButton && (
|
||||
<span className="absolute inset-y-0 right-0 flex items-center pr-3 text-gray-800 dark:text-gray-200">
|
||||
<ArrowRight />
|
||||
</span>
|
||||
)}
|
||||
{selected && !option.isButton && (
|
||||
<span className="absolute inset-y-0 right-0 flex items-center pr-3 text-gray-800 dark:text-gray-200">
|
||||
<CheckMark />
|
||||
</span>
|
||||
)}
|
||||
</span>
|
||||
</ListboxOption>
|
||||
);
|
||||
})}
|
||||
</ListboxOptions>
|
||||
</Transition>
|
||||
</>
|
||||
)}
|
||||
</Listbox>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default MultiSelectDropDown;
|
||||
|
|
@ -1,154 +0,0 @@
|
|||
import { Wrench } from 'lucide-react';
|
||||
import { Root, Trigger, Content, Portal } from '@radix-ui/react-popover';
|
||||
import type { TPlugin } from 'librechat-data-provider';
|
||||
import MenuItem from '~/components/Chat/Menus/UI/MenuItem';
|
||||
import { useMultiSearch } from './MultiSearch';
|
||||
import { cn } from '~/utils/';
|
||||
|
||||
type SelectDropDownProps = {
|
||||
title?: string;
|
||||
value: Array<{ icon?: string; name?: string; isButton?: boolean }>;
|
||||
disabled?: boolean;
|
||||
setSelected: (option: string) => void;
|
||||
availableValues: TPlugin[];
|
||||
showAbove?: boolean;
|
||||
showLabel?: boolean;
|
||||
containerClassName?: string;
|
||||
isSelected: (value: string) => boolean;
|
||||
className?: string;
|
||||
optionValueKey?: string;
|
||||
searchPlaceholder?: string;
|
||||
};
|
||||
|
||||
function MultiSelectPop({
|
||||
title: _title = 'Plugins',
|
||||
value,
|
||||
setSelected,
|
||||
availableValues,
|
||||
showAbove = false,
|
||||
showLabel = true,
|
||||
containerClassName,
|
||||
isSelected,
|
||||
optionValueKey = 'value',
|
||||
searchPlaceholder,
|
||||
}: SelectDropDownProps) {
|
||||
const title = _title;
|
||||
const excludeIds = ['select-plugin', 'plugins-label', 'selected-plugins'];
|
||||
|
||||
// Detemine if we should to convert this component into a searchable select
|
||||
const [filteredValues, searchRender] = useMultiSearch<TPlugin[]>({
|
||||
availableOptions: availableValues,
|
||||
placeholder: searchPlaceholder,
|
||||
getTextKeyOverride: (option) => (option.name || '').toUpperCase(),
|
||||
});
|
||||
const hasSearchRender = Boolean(searchRender);
|
||||
const options = hasSearchRender ? filteredValues : availableValues;
|
||||
|
||||
return (
|
||||
<Root>
|
||||
<div className={cn('flex items-center justify-center gap-2', containerClassName ?? '')}>
|
||||
<div className="relative">
|
||||
<Trigger asChild>
|
||||
<button
|
||||
data-testid="select-dropdown-button"
|
||||
className={cn(
|
||||
'relative flex flex-col rounded-md border border-black/10 bg-white py-2 pl-3 pr-10 text-left focus:outline-none focus:ring-0 focus:ring-offset-0 dark:border-gray-700 dark:bg-gray-800 dark:bg-gray-800 sm:text-sm',
|
||||
'pointer-cursor font-normal',
|
||||
'hover:bg-gray-50 radix-state-open:bg-gray-50 dark:hover:bg-gray-700 dark:radix-state-open:bg-gray-700',
|
||||
)}
|
||||
>
|
||||
{' '}
|
||||
{showLabel && (
|
||||
<label className="block text-xs text-gray-700 dark:text-gray-500 ">{title}</label>
|
||||
)}
|
||||
<span className="inline-flex" id={excludeIds[2]}>
|
||||
<span
|
||||
className={cn(
|
||||
'flex h-6 items-center gap-1 text-sm text-gray-800 dark:text-white',
|
||||
!showLabel ? 'text-xs' : '',
|
||||
)}
|
||||
>
|
||||
{/* {!showLabel && title.length > 0 && (
|
||||
<span className="text-xs text-gray-700 dark:text-gray-500">{title}:</span>
|
||||
)} */}
|
||||
<span className="flex items-center gap-1 ">
|
||||
<div className="flex gap-1">
|
||||
{value.length === 0 && 'None selected'}
|
||||
{value.map((v, i) => (
|
||||
<div key={i} className="relative">
|
||||
{v.icon ? (
|
||||
<img src={v.icon} alt={`${v} logo`} className="icon-lg rounded-sm" />
|
||||
) : (
|
||||
<Wrench className="icon-lg rounded-sm bg-white" />
|
||||
)}
|
||||
<div className="absolute inset-0 rounded-sm ring-1 ring-inset ring-black/10" />
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
<span className="absolute inset-y-0 right-0 flex items-center pr-2">
|
||||
<svg
|
||||
stroke="currentColor"
|
||||
fill="none"
|
||||
strokeWidth="2"
|
||||
viewBox="0 0 24 24"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
className="h-4 w-4 text-gray-400"
|
||||
height="1em"
|
||||
width="1em"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
style={showAbove ? { transform: 'scaleY(-1)' } : {}}
|
||||
>
|
||||
<polyline points="6 9 12 15 18 9"></polyline>
|
||||
</svg>
|
||||
</span>
|
||||
</button>
|
||||
</Trigger>
|
||||
<Portal>
|
||||
<Content
|
||||
side="bottom"
|
||||
align="center"
|
||||
className={cn(
|
||||
'mt-2 max-h-[52vh] min-w-full overflow-hidden overflow-y-auto rounded-lg border border-gray-200 bg-white shadow-lg dark:border-gray-700 dark:bg-gray-700 dark:text-white',
|
||||
hasSearchRender && 'relative',
|
||||
)}
|
||||
>
|
||||
{searchRender}
|
||||
{options.map((option) => {
|
||||
if (!option) {
|
||||
return null;
|
||||
}
|
||||
const selected = isSelected(option[optionValueKey]);
|
||||
return (
|
||||
<MenuItem
|
||||
key={`${option[optionValueKey]}`}
|
||||
title={option.name}
|
||||
value={option[optionValueKey]}
|
||||
selected={selected}
|
||||
onClick={() => setSelected(option.pluginKey)}
|
||||
icon={
|
||||
option.icon ? (
|
||||
<img
|
||||
src={option.icon}
|
||||
alt={`${option.name} logo`}
|
||||
className="icon-sm mr-1 rounded-sm bg-cover"
|
||||
/>
|
||||
) : (
|
||||
<Wrench className="icon-sm mr-1 rounded-sm bg-white bg-cover dark:bg-gray-800" />
|
||||
)
|
||||
}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
</Content>
|
||||
</Portal>
|
||||
</div>
|
||||
</div>
|
||||
</Root>
|
||||
);
|
||||
}
|
||||
|
||||
export default MultiSelectPop;
|
||||
|
|
@ -1,6 +1,36 @@
|
|||
import { useSprings, animated, SpringConfig } from '@react-spring/web';
|
||||
import { useEffect, useRef, useState } from 'react';
|
||||
|
||||
interface SegmenterOptions {
|
||||
granularity?: 'grapheme' | 'word' | 'sentence';
|
||||
localeMatcher?: 'lookup' | 'best fit';
|
||||
}
|
||||
|
||||
interface SegmentData {
|
||||
segment: string;
|
||||
index: number;
|
||||
input: string;
|
||||
isWordLike?: boolean;
|
||||
}
|
||||
|
||||
interface Segments {
|
||||
[Symbol.iterator](): IterableIterator<SegmentData>;
|
||||
}
|
||||
|
||||
interface IntlSegmenter {
|
||||
segment(input: string): Segments;
|
||||
}
|
||||
|
||||
interface IntlSegmenterConstructor {
|
||||
new (locales?: string | string[], options?: SegmenterOptions): IntlSegmenter;
|
||||
}
|
||||
|
||||
declare global {
|
||||
interface Intl {
|
||||
Segmenter: IntlSegmenterConstructor;
|
||||
}
|
||||
}
|
||||
|
||||
interface SplitTextProps {
|
||||
text?: string;
|
||||
className?: string;
|
||||
|
|
@ -16,12 +46,14 @@ interface SplitTextProps {
|
|||
}
|
||||
|
||||
const splitGraphemes = (text: string): string[] => {
|
||||
if (typeof Intl !== 'undefined' && Intl.Segmenter) {
|
||||
const segmenter = new Intl.Segmenter('en', { granularity: 'grapheme' });
|
||||
if (typeof Intl !== 'undefined' && 'Segmenter' in Intl) {
|
||||
const segmenter = new (Intl as typeof Intl & { Segmenter: IntlSegmenterConstructor }).Segmenter(
|
||||
'en',
|
||||
{ granularity: 'grapheme' },
|
||||
);
|
||||
const segments = segmenter.segment(text);
|
||||
return Array.from(segments).map((s) => s.segment);
|
||||
return Array.from(segments).map((s: SegmentData) => s.segment);
|
||||
} else {
|
||||
// Fallback for browsers without Intl.Segmenter
|
||||
return [...text];
|
||||
}
|
||||
};
|
||||
|
|
@ -45,23 +77,20 @@ const SplitText: React.FC<SplitTextProps> = ({
|
|||
const ref = useRef<HTMLParagraphElement>(null);
|
||||
const animatedCount = useRef(0);
|
||||
|
||||
const springs = useSprings(
|
||||
letters.length,
|
||||
letters.map((_, i) => ({
|
||||
from: animationFrom,
|
||||
to: inView
|
||||
? async (next: (props: any) => Promise<void>) => {
|
||||
await next(animationTo);
|
||||
animatedCount.current += 1;
|
||||
if (animatedCount.current === letters.length && onLetterAnimationComplete) {
|
||||
onLetterAnimationComplete();
|
||||
}
|
||||
const springs = useSprings(letters.length, (i) => ({
|
||||
from: animationFrom,
|
||||
to: inView
|
||||
? async (next) => {
|
||||
await next(animationTo);
|
||||
animatedCount.current += 1;
|
||||
if (animatedCount.current === letters.length && onLetterAnimationComplete) {
|
||||
onLetterAnimationComplete();
|
||||
}
|
||||
: animationFrom,
|
||||
delay: i * delay,
|
||||
config: { easing },
|
||||
})),
|
||||
);
|
||||
}
|
||||
: animationFrom,
|
||||
delay: i * delay,
|
||||
config: { easing },
|
||||
}));
|
||||
|
||||
useEffect(() => {
|
||||
const observer = new IntersectionObserver(
|
||||
|
|
|
|||
|
|
@ -1,111 +0,0 @@
|
|||
import { useMemo } from 'react';
|
||||
import type { TTermsOfService } from 'librechat-data-provider';
|
||||
import MarkdownLite from '~/components/Chat/Messages/Content/MarkdownLite';
|
||||
import DialogTemplate from '~/components/ui/DialogTemplate';
|
||||
import { useAcceptTermsMutation } from '~/data-provider';
|
||||
import { useToastContext } from '~/Providers';
|
||||
import { OGDialog } from './OriginalDialog';
|
||||
import { useLocalize } from '~/hooks';
|
||||
|
||||
const TermsAndConditionsModal = ({
|
||||
open,
|
||||
onOpenChange,
|
||||
onAccept,
|
||||
onDecline,
|
||||
title,
|
||||
modalContent,
|
||||
}: {
|
||||
open: boolean;
|
||||
onOpenChange: (isOpen: boolean) => void;
|
||||
onAccept: () => void;
|
||||
onDecline: () => void;
|
||||
title?: string;
|
||||
contentUrl?: string;
|
||||
modalContent?: TTermsOfService['modalContent'];
|
||||
}) => {
|
||||
const localize = useLocalize();
|
||||
const { showToast } = useToastContext();
|
||||
const acceptTermsMutation = useAcceptTermsMutation({
|
||||
onSuccess: () => {
|
||||
onAccept();
|
||||
onOpenChange(false);
|
||||
},
|
||||
onError: () => {
|
||||
showToast({ message: 'Failed to accept terms' });
|
||||
},
|
||||
});
|
||||
|
||||
const handleAccept = () => {
|
||||
acceptTermsMutation.mutate();
|
||||
};
|
||||
|
||||
const handleDecline = () => {
|
||||
onDecline();
|
||||
onOpenChange(false);
|
||||
};
|
||||
|
||||
const handleOpenChange = (isOpen: boolean) => {
|
||||
if (open && !isOpen) {
|
||||
return;
|
||||
}
|
||||
onOpenChange(isOpen);
|
||||
};
|
||||
|
||||
const content = useMemo(() => {
|
||||
if (typeof modalContent === 'string') {
|
||||
return modalContent;
|
||||
}
|
||||
|
||||
if (Array.isArray(modalContent)) {
|
||||
return modalContent.join('\n');
|
||||
}
|
||||
|
||||
return '';
|
||||
}, [modalContent]);
|
||||
|
||||
return (
|
||||
<OGDialog open={open} onOpenChange={handleOpenChange}>
|
||||
<DialogTemplate
|
||||
title={title ?? localize('com_ui_terms_and_conditions')}
|
||||
className="w-11/12 max-w-3xl sm:w-3/4 md:w-1/2 lg:w-2/5"
|
||||
showCloseButton={false}
|
||||
showCancelButton={false}
|
||||
main={
|
||||
<section
|
||||
// Motivation: This is a dialog, so its content should be focusable
|
||||
// eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
|
||||
tabIndex={0}
|
||||
className="max-h-[60vh] overflow-y-auto p-4"
|
||||
aria-label={localize('com_ui_terms_and_conditions')}
|
||||
>
|
||||
<div className="prose dark:prose-invert w-full max-w-none !text-text-primary">
|
||||
{content !== '' ? (
|
||||
<MarkdownLite content={content} />
|
||||
) : (
|
||||
<p>{localize('com_ui_no_terms_content')}</p>
|
||||
)}
|
||||
</div>
|
||||
</section>
|
||||
}
|
||||
buttons={
|
||||
<>
|
||||
<button
|
||||
onClick={handleDecline}
|
||||
className="inline-flex h-10 items-center justify-center rounded-lg border border-border-heavy bg-surface-secondary px-4 py-2 text-sm text-text-primary hover:bg-surface-active"
|
||||
>
|
||||
{localize('com_ui_decline')}
|
||||
</button>
|
||||
<button
|
||||
onClick={handleAccept}
|
||||
className="inline-flex h-10 items-center justify-center rounded-lg border border-border-heavy bg-surface-secondary px-4 py-2 text-sm text-text-primary hover:bg-green-500 hover:text-white focus:bg-green-500 focus:text-white dark:hover:bg-green-600 dark:focus:bg-green-600"
|
||||
>
|
||||
{localize('com_ui_accept')}
|
||||
</button>
|
||||
</>
|
||||
}
|
||||
/>
|
||||
</OGDialog>
|
||||
);
|
||||
};
|
||||
|
||||
export default TermsAndConditionsModal;
|
||||
|
|
@ -1,13 +1,13 @@
|
|||
import { useRecoilValue } from 'recoil';
|
||||
import { useAtomValue } from 'jotai';
|
||||
import { forwardRef, useLayoutEffect, useState } from 'react';
|
||||
import ReactTextareaAutosize from 'react-textarea-autosize';
|
||||
import type { TextareaAutosizeProps } from 'react-textarea-autosize';
|
||||
import store from '~/store';
|
||||
import { chatDirectionAtom } from '~/store';
|
||||
|
||||
export const TextareaAutosize = forwardRef<HTMLTextAreaElement, TextareaAutosizeProps>(
|
||||
(props, ref) => {
|
||||
const [, setIsRerendered] = useState(false);
|
||||
const chatDirection = useRecoilValue(store.chatDirection).toLowerCase();
|
||||
const chatDirection = useAtomValue(chatDirectionAtom).toLowerCase();
|
||||
useLayoutEffect(() => setIsRerendered(true), []);
|
||||
return <ReactTextareaAutosize dir={chatDirection} {...props} ref={ref} />;
|
||||
},
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import React, { useContext, useCallback, useEffect, useState } from 'react';
|
||||
import { useContext, useCallback, useEffect, useState } from 'react';
|
||||
import { Sun, Moon, Monitor } from 'lucide-react';
|
||||
import { ThemeContext } from '~/hooks';
|
||||
|
||||
|
|
@ -8,8 +8,10 @@ declare global {
|
|||
}
|
||||
}
|
||||
|
||||
type ThemeType = 'system' | 'dark' | 'light';
|
||||
|
||||
const Theme = ({ theme, onChange }: { theme: string; onChange: (value: string) => void }) => {
|
||||
const themeIcons = {
|
||||
const themeIcons: Record<ThemeType, JSX.Element> = {
|
||||
system: <Monitor />,
|
||||
dark: <Moon color="white" />,
|
||||
light: <Sun />,
|
||||
|
|
@ -45,7 +47,7 @@ const Theme = ({ theme, onChange }: { theme: string; onChange: (value: string) =
|
|||
}
|
||||
}}
|
||||
>
|
||||
{themeIcons[theme]}
|
||||
{themeIcons[theme as ThemeType]}
|
||||
</button>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -38,10 +38,7 @@ export { default as DropdownPopup } from './DropdownPopup';
|
|||
export { default as DelayedRender } from './DelayedRender';
|
||||
export { default as ThemeSelector } from './ThemeSelector';
|
||||
export { default as SelectDropDown } from './SelectDropDown';
|
||||
export { default as MultiSelectPop } from './MultiSelectPop';
|
||||
export { default as ModelParameters } from './ModelParameters';
|
||||
export { default as OGDialogTemplate } from './OGDialogTemplate';
|
||||
export { default as InputWithDropdown } from './InputWithDropDown';
|
||||
export { default as SelectDropDownPop } from '../../../../client/src/components/Input/ModelSelect/SelectDropDownPop';
|
||||
export { default as AnimatedSearchInput } from './AnimatedSearchInput';
|
||||
export { default as MultiSelectDropDown } from './MultiSelectDropDown';
|
||||
|
|
|
|||
|
|
@ -1,9 +1,9 @@
|
|||
//ThemeContext.js
|
||||
// source: https://plainenglish.io/blog/light-and-dark-mode-in-react-web-application-with-tailwind-css-89674496b942
|
||||
import { useSetRecoilState } from 'recoil';
|
||||
import { useSetAtom } from 'jotai';
|
||||
import React, { createContext, useState, useEffect } from 'react';
|
||||
import { getInitialTheme, applyFontSize } from '~/utils';
|
||||
import store from '~/store';
|
||||
import { fontSizeAtom } from '~/store';
|
||||
|
||||
type ProviderValue = {
|
||||
theme: string;
|
||||
|
|
@ -26,9 +26,15 @@ export const isDark = (theme: string): boolean => {
|
|||
|
||||
export const ThemeContext = createContext<ProviderValue>(defaultContextValue);
|
||||
|
||||
export const ThemeProvider = ({ initialTheme, children }) => {
|
||||
export const ThemeProvider = ({
|
||||
initialTheme,
|
||||
children,
|
||||
}: {
|
||||
initialTheme?: string;
|
||||
children: React.ReactNode;
|
||||
}) => {
|
||||
const [theme, setTheme] = useState(getInitialTheme);
|
||||
const setFontSize = useSetRecoilState(store.fontSize);
|
||||
const setFontSize = useSetAtom(fontSizeAtom);
|
||||
|
||||
const rawSetTheme = (rawTheme: string) => {
|
||||
const root = window.document.documentElement;
|
||||
|
|
|
|||
|
|
@ -1,14 +1,14 @@
|
|||
import { useEffect } from 'react';
|
||||
import { TOptions } from 'i18next';
|
||||
import { useRecoilValue } from 'recoil';
|
||||
import { useAtomValue } from 'jotai';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { resources } from '~/locales/i18n';
|
||||
import store from '~/store';
|
||||
import { langAtom } from '~/store';
|
||||
|
||||
export type TranslationKeys = keyof typeof resources.en.translation;
|
||||
|
||||
export default function useLocalize() {
|
||||
const lang = useRecoilValue(store.lang);
|
||||
const lang = useAtomValue(langAtom);
|
||||
const { t, i18n } = useTranslation();
|
||||
|
||||
useEffect(() => {
|
||||
|
|
|
|||
|
|
@ -1,11 +1,11 @@
|
|||
import { useRecoilState } from 'recoil';
|
||||
import { useAtom } from 'jotai';
|
||||
import { useRef, useEffect } from 'react';
|
||||
import type { TShowToast } from '~/common';
|
||||
import { NotificationSeverity } from '~/common';
|
||||
import store from '~/store';
|
||||
import { toastState, type ToastState } from '~/store';
|
||||
|
||||
export default function useToast(showDelay = 100) {
|
||||
const [toast, setToast] = useRecoilState(store.toastState);
|
||||
const [toast, setToast] = useAtom(toastState);
|
||||
const showTimerRef = useRef<number | null>(null);
|
||||
const hideTimerRef = useRef<number | null>(null);
|
||||
|
||||
|
|
@ -45,7 +45,7 @@ export default function useToast(showDelay = 100) {
|
|||
});
|
||||
// Hides the toast after the specified duration
|
||||
hideTimerRef.current = window.setTimeout(() => {
|
||||
setToast((prevToast) => ({ ...prevToast, open: false }));
|
||||
setToast((prevToast: ToastState) => ({ ...prevToast, open: false }));
|
||||
}, duration);
|
||||
}, showDelay);
|
||||
};
|
||||
|
|
|
|||
20
packages/client/src/store.ts
Normal file
20
packages/client/src/store.ts
Normal file
|
|
@ -0,0 +1,20 @@
|
|||
import { atom } from 'jotai';
|
||||
import { NotificationSeverity } from '~/common';
|
||||
|
||||
export const langAtom = atom<string>('en');
|
||||
export const chatDirectionAtom = atom<string>('ltr');
|
||||
export const fontSizeAtom = atom<string>('text-base');
|
||||
|
||||
export type ToastState = {
|
||||
open: boolean;
|
||||
message: string;
|
||||
severity: NotificationSeverity;
|
||||
showIcon: boolean;
|
||||
};
|
||||
|
||||
export const toastState = atom<ToastState>({
|
||||
open: false,
|
||||
message: '',
|
||||
severity: NotificationSeverity.SUCCESS,
|
||||
showIcon: true,
|
||||
});
|
||||
|
|
@ -1,6 +1,10 @@
|
|||
import { cn } from '~/utils/';
|
||||
|
||||
export default function ListeningIcon({ className }) {
|
||||
type ListeningIconProps = {
|
||||
className?: string;
|
||||
};
|
||||
|
||||
export default function ListeningIcon({ className }: ListeningIconProps) {
|
||||
return (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
|
|
|
|||
|
|
@ -1,6 +1,9 @@
|
|||
import React from 'react';
|
||||
type SaveIconProps = {
|
||||
size?: string | number;
|
||||
className?: string;
|
||||
};
|
||||
|
||||
export default function SaveIcon({ size = '1em', className }) {
|
||||
export default function SaveIcon({ size = '1em', className }: SaveIconProps) {
|
||||
return (
|
||||
<svg
|
||||
viewBox="64 64 896 896"
|
||||
|
|
|
|||
|
|
@ -1,6 +1,10 @@
|
|||
import { cn } from '~/utils/';
|
||||
|
||||
export default function SpeechIcon({ className }) {
|
||||
type SpeechIconProps = {
|
||||
className?: string;
|
||||
};
|
||||
|
||||
export default function SpeechIcon({ className }: SpeechIconProps) {
|
||||
return (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
|
|
|
|||
|
|
@ -1,6 +1,9 @@
|
|||
import React from 'react';
|
||||
type SwitchIconProps = {
|
||||
size?: string | number;
|
||||
className?: string;
|
||||
};
|
||||
|
||||
export default function SwitchIcon({ size = '1em', className }) {
|
||||
export default function SwitchIcon({ size = '1em', className }: SwitchIconProps) {
|
||||
return (
|
||||
<svg
|
||||
viewBox="64 64 896 896"
|
||||
|
|
|
|||
|
|
@ -19,6 +19,12 @@
|
|||
"~/*": ["./*"]
|
||||
}
|
||||
},
|
||||
"include": ["src/**/*", "../../client/src/components/Input/ModelSelect/SelectDropDownPop.tsx"],
|
||||
"include": [
|
||||
"src/**/*",
|
||||
"../../client/src/components/Input/ModelSelect/SelectDropDownPop.tsx",
|
||||
"../../client/src/components/UI-Components/TermsAndConditionsModal.tsx",
|
||||
"../../client/src/components/Input/ModelSelect/MultiSelectPop.tsx",
|
||||
"../../client/src/components/Input/ModelSelect/MultiSelectDropDown.tsx"
|
||||
],
|
||||
"exclude": ["dist", "node_modules"]
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue