refactor: repartition server-side and client-side code

app/.client/components/chat/SendButton.client.tsx

@@ -0,0 +1,43 @@
+import { AnimatePresence, cubicBezier, motion } from 'framer-motion';
+
+interface SendButtonProps {
+  show: boolean;
+  isStreaming?: boolean;
+  disabled?: boolean;
+  onClick?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
+  onImagesSelected?: (images: File[]) => void;
+}
+
+const customEasingFn = cubicBezier(0.4, 0, 0.2, 1);
+
+export const SendButton = ({ show, isStreaming, disabled, onClick }: SendButtonProps) => {
+  return (
+    <AnimatePresence>
+      {show ? (
+        <motion.button
+          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 transition-text-color transition-background transition-border disabled:opacity-50 disabled:cursor-not-allowed"
+          transition={{ ease: customEasingFn, duration: 0.17 }}
+          initial={{ opacity: 0, y: 10 }}
+          animate={{ opacity: 1, y: 0 }}
+          exit={{ opacity: 0, y: 10 }}
+          disabled={disabled}
+          onClick={(event) => {
+            event.preventDefault();
+
+            if (!disabled) {
+              onClick?.(event);
+            }
+          }}
+        >
+          <div className="text-lg">
+            {!isStreaming ? (
+              <div className="i-mingcute:arrow-right-line"></div>
+            ) : (
+              <div className="i-mingcute:stop-circle-line"></div>
+            )}
+          </div>
+        </motion.button>
+      ) : null}
+    </AnimatePresence>
+  );
+};