CoolFace
Apppublic

legends810/testingnew

sourceHugging Faceupdated 1y agoView on Hugging Face
0likes
SendButton.client.tsx40 linesDownload Raw Back to chat
1import { AnimatePresence, cubicBezier, motion } from 'framer-motion';2 3interface 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 11const customEasingFn = cubicBezier(0.4, 0, 0.2, 1);12 13export const SendButton = ({ show, isStreaming, disabled, onClick }: SendButtonProps) => {14  return (15    <AnimatePresence>16      {show ? (17        <motion.button18          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 27            if (!disabled) {28              onClick?.(event);29            }30          }}31        >32          <div className="text-lg">33            {!isStreaming ? <div className="i-ph:arrow-right"></div> : <div className="i-ph:stop-circle-bold"></div>}34          </div>35        </motion.button>36      ) : null}37    </AnimatePresence>38  );39};40