mirror of
https://github.com/danny-avila/LibreChat.git
synced 2025-12-17 17:00:15 +01:00
f307488dd4
* refactor(useDebouncedInput): make object as input arg and accept setter
* refactor(ChatForm/Textarea): consolidate textarea/form logic to one component, use react-hook-form, programmatically click send button instead of passing submitMessage, forwardRef and memoize SendButton
* refactor(Textarea): use Controller field value to avoid manual update of ref
* chore: remove forms provider
* chore: memoize AttachFile
* refactor(ChatForm/SendButton): only re-render SendButton when there is text input
* chore: make iconURL bigger
* chore: optimize Root/Nav
* refactor(SendButton): memoize disabled prop based on text
* chore: memoize Nav and ChatForm
* chore: remove textarea ref text on submission
* feat(EditMessage): Make Esc exit the edit mode and dismiss changes when editing a message
* style(MenuItem): Display the ☑️ icon only on the selected model
51 lines
1.8 KiB
TypeScript
51 lines
1.8 KiB
TypeScript
import React, { forwardRef } from 'react';
|
|
import { useWatch } from 'react-hook-form';
|
|
import type { Control } from 'react-hook-form';
|
|
import { TooltipProvider, Tooltip, TooltipTrigger, TooltipContent } from '~/components/ui';
|
|
import { SendIcon } from '~/components/svg';
|
|
import { useLocalize } from '~/hooks';
|
|
import { cn } from '~/utils';
|
|
|
|
type SendButtonProps = {
|
|
disabled: boolean;
|
|
control: Control<{ text: string }>;
|
|
};
|
|
|
|
const SubmitButton = React.memo(
|
|
forwardRef((props: { disabled: boolean }, ref: React.ForwardedRef<HTMLButtonElement>) => {
|
|
const localize = useLocalize();
|
|
return (
|
|
<TooltipProvider delayDuration={250}>
|
|
<Tooltip>
|
|
<TooltipTrigger asChild>
|
|
<button
|
|
ref={ref}
|
|
disabled={props.disabled}
|
|
className={cn(
|
|
'absolute bottom-1.5 right-2 rounded-lg border border-black p-0.5 text-white transition-colors enabled:bg-black disabled:bg-black disabled:text-gray-400 disabled:opacity-10 dark:border-white dark:bg-white dark:disabled:bg-white md:bottom-3 md:right-3',
|
|
)}
|
|
data-testid="send-button"
|
|
type="submit"
|
|
>
|
|
<span className="" data-state="closed">
|
|
<SendIcon size={24} />
|
|
</span>
|
|
</button>
|
|
</TooltipTrigger>
|
|
<TooltipContent side="top" sideOffset={10}>
|
|
{localize('com_nav_send_message')}
|
|
</TooltipContent>
|
|
</Tooltip>
|
|
</TooltipProvider>
|
|
);
|
|
}),
|
|
);
|
|
|
|
const SendButton = React.memo(
|
|
forwardRef((props: SendButtonProps, ref: React.ForwardedRef<HTMLButtonElement>) => {
|
|
const data = useWatch({ control: props.control });
|
|
return <SubmitButton ref={ref} disabled={props.disabled || !data?.text} />;
|
|
}),
|
|
);
|
|
|
|
export default SendButton;
|