feat: optimize perf and fix composing type

Author: fu050409

src/bubble.tsx

@@ -272,9 +272,11 @@ export function BubbleList({
   const scrollContainer = useCallback((smooth?: boolean) => {
     if (pauseScroll.current) return;
 
-    containerRef.current?.scrollTo({
-      top: containerRef.current?.scrollHeight,
-      behavior: smooth === false ? "instant" : "smooth",
+    requestAnimationFrame(() => {
+      containerRef.current?.scrollTo({
+        top: containerRef.current?.scrollHeight,
+        behavior: smooth ? "smooth" : "instant",
+      });
     });
   }, []);
 

src/sender.tsx

@@ -157,13 +157,23 @@ export function Sender({
   }, [isSending, message, onSend, controller, input]);
   const handleKeyDown = useCallback(
     (event: React.KeyboardEvent<HTMLTextAreaElement>) => {
-      if (event.key === "Enter" && !event.shiftKey) {
+      if (
+        event.key === "Enter" &&
+        !event.shiftKey &&
+        !event.nativeEvent.isComposing
+      ) {
         event.preventDefault();
         handleSend();
       }
     },
     [handleSend],
   );
+  const handleChange = useCallback(
+    (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+      setMessage(e.target.value);
+    },
+    [],
+  );
 
   return (
     <div
@@ -179,7 +189,7 @@ export function Sender({
       <textarea
         ref={textareaRef}
         value={message}
-        onChange={(e) => setMessage(e.target.value)}
+        onChange={handleChange}
         onKeyDown={handleKeyDown}
         placeholder={placeholder}
         className="w-full pt-4 px-4 border-0 rounded-2xl resize-none focus:ring-0 focus:outline-none text-gray-700 placeholder-gray-400"