[Refactor/bugfix] Main Page: Message Logs. Fix scroll animation, that is not using at this time though.

src-ui/app/main_page/main_section/message_container/log_box/LogBox.jsx

@@ -1,50 +1,26 @@
-import { useEffect, useLayoutEffect, useRef, useState } from "react";
+import React, { useRef, useLayoutEffect, useEffect } from "react";
 import styles from "./LogBox.module.scss";
-import { store } from "@store";
 import { MessageContainer } from "./message_container/MessageContainer";
-import { scrollToBottom } from "@utils";
 import { useMessage } from "@logics_common";
+import { useMessageLogScroll } from "@logics_main";
+import { store } from "@store";
 
 export const LogBox = () => {
     const { currentMessageLogs } = useMessage();
-    const log_container_ref = useRef(null);
+    const { scrollToBottom, isScrolling } = useMessageLogScroll();
-    const [is_scrolling, setIsScrolling] = useState(false);
+    const logContainerRef = useRef(null);
-
 
     useLayoutEffect(() => {
-        store.log_box_ref = log_container_ref;
+        store.log_box_ref = logContainerRef;
-        if (!is_scrolling) {
+        if (!isScrolling) {
-            scrollToBottom(store.log_box_ref);
+            scrollToBottom();
-            // scrollToBottom(store.log_box_ref, true); [Fix me]
         }
-    }, [currentMessageLogs.data]);
+    }, [currentMessageLogs.data, isScrolling]);
-
-    useEffect(() => {
-        const handleScroll = () => {
-            const element = log_container_ref.current;
-            if (!element) return;
-            const currentScrollTop = element.scrollTop;
-            const at_bottom = element.scrollHeight - currentScrollTop === element.clientHeight;
-
-            if (at_bottom) {
-                setIsScrolling(false);
-            } else {
-                setIsScrolling(true);
-            }
-        };
-
-        const element = log_container_ref.current;
-        element.addEventListener("scroll", handleScroll);
-
-        return () => {
-            element.removeEventListener("scroll", handleScroll);
-        };
-    }, []);
 
     return (
-        <div id="log_container" className={styles.container} ref={log_container_ref}>
+        <div id="log_container" className={styles.container} ref={logContainerRef}>
             <MessageLogUiSizeController />
-            {currentMessageLogs.data.map(message_data => (
+            {currentMessageLogs.data.map((message_data) => (
                 <MessageContainer key={message_data.id} {...message_data} />
             ))}
         </div>

src-ui/app/main_page/main_section/message_container/message_input_box/MessageInputBox.jsx

@@ -3,8 +3,7 @@ import styles from "./MessageInputBox.module.scss";
 import SendMessageSvg from "@images/send_message.svg?react";
 import { useMessage } from "@logics_common";
 import { useSendMessageButtonType, useEnableAutoClearMessageInputBox } from "@logics_configs";
-import { store } from "@store";
+import { useMessageLogScroll } from "@logics_main";
-import { scrollToBottom } from "@utils";
 
 export const MessageInputBox = () => {
     const [message_history, setMessageHistory] = useState([]);
@@ -21,6 +20,8 @@ export const MessageInputBox = () => {
     const { currentEnableAutoClearMessageInputBox } = useEnableAutoClearMessageInputBox();
     const { currentSendMessageButtonType } = useSendMessageButtonType();
 
+    const { scrollToBottom } = useMessageLogScroll();
+
     useEffect(() => {
         if (currentMessageLogs.data) {
             const sentMessages = currentMessageLogs.data
@@ -40,7 +41,7 @@ export const MessageInputBox = () => {
         if (currentEnableAutoClearMessageInputBox.data) updateMessageInputValue("");
 
         setTimeout(() => {
-            scrollToBottom(store.log_box_ref);
+            scrollToBottom();
         }, 10);
 
         setHistoryIndex(-1);

src-ui/logics/main/index.js

@@ -2,5 +2,6 @@ export { useIsVisibleResendButton } from "./useIsVisibleResendButton";
 export { useIsMainPageCompactMode } from "./useIsMainPageCompactMode";
 export { useLanguageSettings } from "./useLanguageSettings";
 export { useMainFunction } from "./useMainFunction";
+export { useMessageLogScroll } from "./useMessageLogScroll";
 export { useMessageInputBoxRatio } from "./useMessageInputBoxRatio";
 export { useSelectableLanguageList } from "./useSelectableLanguageList";

src-ui/logics/main/useMessageLogScroll.js

@@ -0,0 +1,85 @@
+import { useRef, useEffect, useCallback, useState } from "react";
+import { store } from "@store";
+
+export const useMessageLogScroll = () => {
+    const [isScrolling, setIsScrolling] = useState(false);
+    const isSmoothScrollingRef = useRef(false);
+    const animationFrameRef = useRef(null);
+
+    const cancelSmoothScroll = () => {
+        if (animationFrameRef.current) {
+            cancelAnimationFrame(animationFrameRef.current);
+            animationFrameRef.current = null;
+        }
+        isSmoothScrollingRef.current = false;
+    };
+
+    const scrollToBottom = useCallback((smooth = false) => {
+        const element = store.log_box_ref.current;
+        if (!element) return;
+
+        const scrollHeight = element.scrollHeight - element.clientHeight;
+
+        if (smooth) {
+            cancelSmoothScroll();
+            isSmoothScrollingRef.current = true;
+
+            const duration = 100;
+            const startTime = performance.now();
+            const initialScrollTop = element.scrollTop;
+
+            const scroll = (currentTime) => {
+                const elapsed = currentTime - startTime;
+                const progress = Math.min(elapsed / duration, 1);
+                const easeInOutQuad = (t) =>
+                    t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t;
+
+                element.scrollTop =
+                    initialScrollTop + (scrollHeight - initialScrollTop) * easeInOutQuad(progress);
+
+                if (progress < 1) {
+                    animationFrameRef.current = requestAnimationFrame(scroll);
+                } else {
+                    isSmoothScrollingRef.current = false;
+                }
+            };
+
+            animationFrameRef.current = requestAnimationFrame(scroll);
+        } else {
+            cancelSmoothScroll();
+            element.scrollTop = scrollHeight;
+
+        }
+    }, []);
+
+    useEffect(() => {
+        const handleScroll = () => {
+            if (isSmoothScrollingRef.current) return;
+
+            const element = store.log_box_ref.current;
+            if (!element) return;
+
+            const atBottom =
+                Math.abs(element.scrollHeight - element.scrollTop - element.clientHeight) < 5;
+
+            setIsScrolling(!atBottom);
+        };
+
+        const element = store.log_box_ref.current;
+        if (element) {
+            element.addEventListener("scroll", handleScroll);
+        }
+
+        return () => {
+            if (element) {
+                element.removeEventListener("scroll", handleScroll);
+            }
+            cancelSmoothScroll();
+        };
+    }, []);
+
+    return {
+        scrollToBottom,
+        isScrolling,
+    };
+};

src-ui/utils.js

@@ -31,34 +31,6 @@ export const randomIntMinMax = (min, max) => {
 	return int;
 };
 
-export const scrollToBottom = (ref, smooth = false) => {
-    const element = ref.current;
-    const scroll_height = element.scrollHeight - element.clientHeight;
-
-    if (smooth) {
-        const duration = 300; // スクロールにかける時間（ミリ秒）
-        const start_time = performance.now();
-        const scroll_top = element.scrollTop;
-
-        const scroll = (current_time) => {
-            const elapsed = current_time - start_time;
-            const progress = Math.min(elapsed / duration, 1);
-            const ease_in_out_quad = (t) => t < 0.5
-                ? 2 * t * t
-                : -1 + (4 - 2 * t) * t;
-            element.scrollTop = scroll_top + (scroll_height - scroll_top) * ease_in_out_quad(progress);
-
-            if (progress < 1) {
-                requestAnimationFrame(scroll);
-            }
-        };
-
-        requestAnimationFrame(scroll);
-    } else {
-        element.scrollTop = scroll_height;
-    }
-};
-
 export const updateLabelsById = (data_array, updates) => {
     return data_array.map(item => {
         const update = updates.find(update_item => update_item.id === item.id);