Commit
·
7ee3bea
1
Parent(s):
b6f6f18
typecheck fix
Browse files
app/components/chat/SendButton.client.tsx
CHANGED
@@ -3,25 +3,29 @@ import { AnimatePresence, cubicBezier, motion } from 'framer-motion';
|
|
3 |
interface SendButtonProps {
|
4 |
show: boolean;
|
5 |
isStreaming?: boolean;
|
|
|
6 |
onClick?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
|
7 |
onImagesSelected?: (images: File[]) => void;
|
8 |
}
|
9 |
|
10 |
const customEasingFn = cubicBezier(0.4, 0, 0.2, 1);
|
11 |
|
12 |
-
export const SendButton = ({ show, isStreaming, onClick }: SendButtonProps) => {
|
13 |
return (
|
14 |
<AnimatePresence>
|
15 |
{show ? (
|
16 |
<motion.button
|
17 |
-
className="absolute flex justify-center items-center top-[18px] right-[22px] p-1 bg-accent-500 hover:brightness-94 color-white rounded-md w-[34px] h-[34px] transition-theme"
|
18 |
transition={{ ease: customEasingFn, duration: 0.17 }}
|
19 |
initial={{ opacity: 0, y: 10 }}
|
20 |
animate={{ opacity: 1, y: 0 }}
|
21 |
exit={{ opacity: 0, y: 10 }}
|
|
|
22 |
onClick={(event) => {
|
23 |
event.preventDefault();
|
24 |
-
|
|
|
|
|
25 |
}}
|
26 |
>
|
27 |
<div className="text-lg">
|
|
|
3 |
interface SendButtonProps {
|
4 |
show: boolean;
|
5 |
isStreaming?: boolean;
|
6 |
+
disabled?: boolean;
|
7 |
onClick?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
|
8 |
onImagesSelected?: (images: File[]) => void;
|
9 |
}
|
10 |
|
11 |
const customEasingFn = cubicBezier(0.4, 0, 0.2, 1);
|
12 |
|
13 |
+
export const SendButton = ({ show, isStreaming, disabled, onClick }: SendButtonProps) => {
|
14 |
return (
|
15 |
<AnimatePresence>
|
16 |
{show ? (
|
17 |
<motion.button
|
18 |
+
className="absolute flex justify-center items-center top-[18px] right-[22px] p-1 bg-accent-500 hover:brightness-94 color-white rounded-md w-[34px] h-[34px] transition-theme disabled:opacity-50 disabled:cursor-not-allowed"
|
19 |
transition={{ ease: customEasingFn, duration: 0.17 }}
|
20 |
initial={{ opacity: 0, y: 10 }}
|
21 |
animate={{ opacity: 1, y: 0 }}
|
22 |
exit={{ opacity: 0, y: 10 }}
|
23 |
+
disabled={disabled}
|
24 |
onClick={(event) => {
|
25 |
event.preventDefault();
|
26 |
+
if (!disabled) {
|
27 |
+
onClick?.(event);
|
28 |
+
}
|
29 |
}}
|
30 |
>
|
31 |
<div className="text-lg">
|