Merge branch 'ui' into develop

src-ui/app/_index_css/root.css

@@ -3,7 +3,7 @@
 
 :root {
     font-size: 62.5%;
-    color: #F2F2F2;
+    color: var(--dark_basic_text_color);
 }
 
 * {

src-ui/app/_index_css/variables.css

@@ -20,6 +20,10 @@
 
     --sent_400_color: #6197b4;
     --received_300_color: #a861b4;
+    --error_bc_color: #bb4448;
+    --error_bc_active_color: #9c3938;
+    --success_bc_color: #368777;
+    --waring_color: #cb944f;
 
     --dark_basic_text_color: #f2f2f2;
     --dark_100_color: #f5f7fb;
@@ -48,8 +52,11 @@
     --dark_975_color: #1a1b1d;
     --dark_1000_color: #151517;
 
-    --dark_825_color_cc: #434447cc;
     --dark_550_color_22: #94959922;
+    --dark_825_color_cc: #434447cc;
+    --dark_1000_color_66: #15151766;
+    --dark_1000_color_aa: #151517aa;
+    --dark_1000_color_dd: #151517dd;
 
 
     --title_bar_height: 2rem;

src-ui/app/config_page/setting_section/setting_box/_components/_atoms/_entry/_Entry.module.scss

@@ -16,7 +16,6 @@
     height: 100%;
     font-size: 1.4rem;
     resize: none;
-    color: var(--dark_basic_text_color);
     &.is_disabled {
         color: var(--dark_500_color);
         pointer-events: none;

src-ui/app/config_page/setting_section/setting_box/_components/deepl_auth_key/DeeplAuthKey.module.scss

@@ -22,11 +22,11 @@
     bottom: 0;
     left: 0;
     border-radius: 0.4rem;
-    background-color:  (#00000044);
+    background-color: var(--dark_1000_color_66);
     backdrop-filter: blur(4rem);
     border: solid 0.1rem var(--dark_700_color);
     &:hover {
-        background-color:  (#00000088);
+        background-color: var(--dark_1000_color_aa);
     }
     &:active {
         backdrop-filter: blur(1.4rem);
@@ -35,7 +35,6 @@
 
 .edit_button {
     padding: 0.8rem 1.2rem;
-    color: var(--dark_basic_text_color);
     height: 100%;
     width: 100%;
     font-size: 1.4rem;
@@ -62,7 +61,6 @@
 }
 
 .save_button_label {
-    color: var(--dark_basic_text_color);
     font-size: 1.4rem;
 }
 
@@ -91,7 +89,6 @@
 
 .open_webpage_text {
     font-size: 1.2rem;
-    color: var(--dark_basic_text_color);
 }
 
 .external_link_svg {

src-ui/app/config_page/setting_section/setting_box/_components/download_models/DownloadModels.jsx

@@ -1,12 +1,10 @@
-import { useState, useEffect } from "react";
 import { useTranslation } from "react-i18next";
-import clsx from "clsx";
 import CircularProgress from "@mui/material/CircularProgress";
 import styles from "./DownloadModels.module.scss";
 import {
     RadioButton,
-    // DownloadModels,
 } from "../index";
+
 export const DownloadModels = (props) => {
     const options = props.options.map(item => ({
         ...item,
@@ -25,25 +23,11 @@ export const DownloadModels = (props) => {
                 downloadStartFunction={props.downloadStartFunction}
             />
         </>
-        // <div className={styles.container}>
-        //     {props.models.map((option) => (
-        //         <ModelSelector key={option.model_id} option={option} {...props}/>
-        //     ))}
-        // </div>
     );
 };
 
 const ModelSelector = ({option, ...props}) => {
     const { t } = useTranslation();
-    const [circular_color, setCircularColor] = useState("");
-    const [circular_color_2, setCircularColor2] = useState("");
-    useEffect(() => {
-        const circular_color = getComputedStyle(document.documentElement).getPropertyValue("--dark_600_color");
-        setCircularColor(circular_color.trim());
-        const circular_color_2 = getComputedStyle(document.documentElement).getPropertyValue("--primary_300_color");
-        setCircularColor2(circular_color_2.trim());
-    }, []);
-
 
     const renderContent = () => {
         const circular_progress = Math.floor(option.progress / 10) * 10;
@@ -56,13 +40,13 @@ const ModelSelector = ({option, ...props}) => {
                             variant={(option.progress === 100) ? "indeterminate" : "determinate"}
                             value={circular_progress}
                             size="3rem"
-                            sx={{ color: circular_color_2 }}
+                            sx={{ color: "var(--primary_300_color)" }}
                         />
                         <p className={styles.progress_label}>{`${Math.round(option.progress)}%`}</p>
                     </>
                 );
             case option.is_pending:
-                return <CircularProgress size="3rem" sx={{ color: circular_color }}/>;
+                return <CircularProgress size="3rem" sx={{ color: "var(--dark_600_color)" }}/>;
             case !option.is_downloaded:
                 return (
                     <button

src-ui/app/config_page/setting_section/setting_box/_components/download_models/DownloadModels.module.scss

@@ -22,11 +22,9 @@
 }
 .download_button_label {
     font-size: 1.2rem;
-    color: var(--dark_basic_text_color);
 }
 
 .progress_label {
     position: absolute;
     font-size: 1rem;
-    color: var(--dark_basic_text_color);
 }

src-ui/app/config_page/setting_section/setting_box/_components/label_component/LabelComponent.module.scss

@@ -8,7 +8,6 @@
 .label {
     font-size: 1.6rem;
     font-weight: 400;
-    color: var(--dark_basic_text_color);
     white-space: nowrap;
     width: max-content;
 }

src-ui/app/config_page/setting_section/setting_box/_components/slider/Slider.jsx

@@ -31,13 +31,6 @@ export const Slider = (props) => {
                             backgroundColor: "var(--dark_800_color)",
                             padding: "0.6rem 1rem",
                             lineHeight: "1.15",
-                            // top: "-1.4rem",
-                            // "&::before": {
-                            //     left: "30%",
-                            //     width: "1rem",
-                            //     height: "1rem",
-                            //     clipPath: "polygon(50% 0, 100% 100%, 0 100%)",
-                            // },
                         },
                     },
                     "& .MuiSlider-markLabel": {

src-ui/app/config_page/setting_section/setting_box/_components/threshold_component/threshold_entry/ThresholdEntry.module.scss

@@ -16,7 +16,6 @@
     height: 100%;
     font-size: 1.4rem;
     resize: none;
-    color: var(--dark_basic_text_color);
     &.is_disable {
         color: var(--dark_500_color);
         pointer-events: none;

src-ui/app/config_page/setting_section/setting_box/_components/threshold_component/volume_check_button/VolumeCheckButton.module.scss

@@ -41,5 +41,4 @@
 
 .button_text {
     font-size: 1.2rem;
-    color: var(--dark_basic_text_color);
 }

src-ui/app/config_page/setting_section/setting_box/_components/word_filter/WordFilter.module.scss

@@ -32,7 +32,6 @@
 .item_text {
     font-size: 1.4rem;
     font-weight: 300;
-    color: var(--dark_basic_text_color);
     &.is_redoable {
         text-decoration: line-through;
     }
@@ -56,7 +55,7 @@
 
 .delete_svg {
     width: 2.4rem;
-    color: #bb4448;
+    color: var(--error_bc_color);
 }
 
 .redo_svg {
@@ -77,7 +76,6 @@
 .add_button {
     padding: 0.8rem 1.2rem;
     background-color: var(--primary_600_color);
-    color: var(--dark_basic_text_color);
     font-size: 1.4rem;
     border-radius: 0.4rem;
     text-align: center;

src-ui/app/config_page/setting_section/setting_box/about_vrct/AboutVrct.module.scss

@@ -3,6 +3,7 @@
     gap: 2.2rem;
     flex-direction: column;
     width: 72rem;
+    margin: auto;
     // background-color: gray;
 }
 

src-ui/app/config_page/setting_section/setting_box/device/Device.module.scss

@@ -61,7 +61,6 @@
 
 .device_label {
     font-size: 1.8rem;
-    color: var(--dark_basic_text_color);
 }
 
 .device_contents {
@@ -76,6 +75,8 @@
     display: flex;
     flex-direction: column;
     gap: 1.2rem;
+    justify-content: center;
+    align-items: center;
 }
 
 .device_dropdown_wrapper {
@@ -97,6 +98,7 @@
 
 .device_secondary_label {
     padding-left: 0.2rem;
+    padding-right: 0.4rem;
     font-size: 1.4rem;
     color: var(--dark_500_color);
     white-space: nowrap;

src-ui/app/config_page/setting_section/setting_box/vr/Vr.module.scss

@@ -39,7 +39,7 @@
         background-color: var(--dark_850_color);
     }
     &.is_selected .controller_switcher_label {
-        color: var(--dark_basic_text_color);
+        color: var(--dark_200_color);
     }
 }
 .controller_switcher_label {
@@ -92,7 +92,6 @@
     transform: translateX(10%) rotate(90deg);
 }
 .sample_text_button_label {
-    color: var(--dark_basic_text_color);
     position: absolute;
     left: 50%;
     top: 110%;
@@ -281,7 +280,6 @@
 }
 
 .restore_default_settings_button {
-    color: var(--dark_basic_text_color);
     font-size: 1.2rem;
     margin-top: 6rem;
     padding: 0.8rem;

src-ui/app/config_page/sidebar_section/SidebarSection.module.scss

@@ -22,7 +22,6 @@
     display: flex;
     justify-content: left;
     align-items: center;
-    color: var(--dark_basic_text_color);
     padding: 0.8rem 0 0.8rem 1rem;
     cursor: pointer;
     &:hover {

src-ui/app/main_page/MainPage.module.scss

@@ -25,40 +25,4 @@
     justify-content: space-between;
     background-color: var(--dark_888_color);
     position: relative;
-}
-
-.main_page_cover {
-    position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    background-color:  (#000000cc);
-    display: flex;
-    flex-direction: column;
-    gap: 2rem;
-    justify-content: center;
-    align-items: center;
-    backdrop-filter: blur(0.8rem);
-    color: var(--dark_basic_text_color);
-}
-
-.cover_message {
-    font-size: 2rem;
-    font-weight: 300;
-}
-
-.close_settings_window_button {
-    font-size: 1.6rem;
-    font-weight: 300;
-    padding: 1rem 1.4rem;
-    border-radius: 0.4rem;
-    background-color: var(--dark_888_color);
-    cursor: pointer;
-    &:hover {
-        background-color: var(--dark_825_color);
-    }
-    &:active {
-        background-color: var(--dark_925_color);
-    }
 }

src-ui/app/main_page/main_section/language_selector/LanguageSelector.module.scss

@@ -46,5 +46,4 @@
 
 .language_label {
     font-size: 1.4rem;
-    color: var(--dark_basic_text_color);
 }

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/log_box/message_container/MessageContainer.module.scss

@@ -72,18 +72,21 @@
     display: flex;
     flex-direction: column;
     &.sent_message {
+        width: 100%;
         align-items: end;
         text-align: end;
     }
     &.received_message {
+        width: 100%;
         align-items: start;
     }
 }
 
 .message_main {
-    color: var(--dark_basic_text_color);
     user-select: text;
     font-size: 1.4em;
+    overflow-wrap: break-word;
+    max-width: 100%;
 }
 
 .message_second {

src-ui/app/main_page/main_section/message_container/log_box/message_container/message_sub_menu_container/MessageSubMenuContainer.module.scss

@@ -30,7 +30,7 @@
 
 .tooltip_title {
     font-size: 1.2rem;
-    color: var(--dark_basic_text_color);
+    color: var(--dark_200_color);
 }
 
 .hold_progress_bar {

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);
@@ -69,7 +70,7 @@ export const MessageInputBox = () => {
             if (history_index > -1) {
                 const new_index = history_index - 1;
                 setHistoryIndex(new_index);
-                setInputValue(
+                updateMessageInputValue(
                     new_index >= 0
                         ? message_history[message_history.length - 1 - new_index]
                         : ""

src-ui/app/main_page/sidebar_section/language_settings/language_selector_open_button/LanguageSelectorOpenButton.module.scss

@@ -57,7 +57,6 @@
 
 .selected_language {
     font-size: 1.2rem;
-    color: var(--dark_basic_text_color);
 }
 
 .arrow_left_svg {
@@ -66,7 +65,6 @@
     margin: 0 0.2rem;
     transform: rotate(180deg);
     width: 1.6rem;
-    color: var(--dark_basic_text_color);
     &.reverse {
         transform: rotate(0deg);
     }

src-ui/app/main_page/sidebar_section/language_settings/language_swap_button/LanguageSwapButton.module.scss

@@ -31,6 +31,6 @@
     font-size: 1.2rem;
     color: var(--dark_500_color);
     &.is_hovered {
-        color: var(--dark_basic_text_color);
+        color: var(--dark_200_color);
     }
 }

src-ui/app/main_page/sidebar_section/language_settings/preset_tab_selector/PresetTabSelector.module.scss

@@ -21,7 +21,7 @@
     }
     &.is_selected {
         background-color: var(--dark_800_color);
-        color: var(--dark_basic_text_color);
+        color: var(--dark_200_color);
         cursor: default;
         pointer-events: none;
     }

src-ui/app/main_page/sidebar_section/language_settings/translator_selector_open_button/TranslatorSelectorOpenButton.module.scss

@@ -24,7 +24,6 @@
 
 .label {
     font-size: 1.2rem;
-    color: var(--dark_basic_text_color);
     white-space: nowrap;
 }
 
@@ -32,5 +31,5 @@
     margin-left: 0.2rem;
     padding-bottom: 0.2rem;
     width: 1.8rem;
-    color: #cb944f;
+    color: var(--waring_color);
 }

src-ui/app/main_page/sidebar_section/language_settings/translator_selector_open_button/translator_selector/TranslatorSelector.module.scss

@@ -3,8 +3,7 @@
     bottom: 100%;
     width: 100%;
     height: 26rem;
-    background-color:  (#000000dd);
+    background-color:  var(--dark_1000_color_dd);
-    // background-color:  (var(--dark_875_color) + 80);
     backdrop-filter: blur(0.1rem);
     display: flex;
     justify-content: center;
@@ -75,7 +74,7 @@ $box_size: 6.8rem;
     bottom: 0;
     width: 100%;
     height: 100%;
-    background-color:  (#22222233);
+    background-color: var(--dark_1000_color_66);
     display: flex;
     justify-content: center;
     align-items: start;
@@ -87,5 +86,4 @@ $box_size: 6.8rem;
     font-size: 1.4rem;
     text-align: center;
     text-wrap: balance;
-    color: var(--dark_basic_text_color);
 }

src-ui/app/main_page/sidebar_section/main_function_switch/MainFunctionSwitch.module.scss

@@ -35,11 +35,9 @@
     gap: 0.8rem;
 }
 
-$basic_label_color: var(--dark_basic_text_color);
 $pending_label_color: var(--dark_500_color);
 .switch_label {
     font-size: 1.4rem;
-    color: $basic_label_color;
     &.is_compact_mode {
         display: none;
     }
@@ -50,7 +48,6 @@ $pending_label_color: var(--dark_500_color);
 
 .switch_svg {
     width: 1.8rem;
-    color: $basic_label_color;
     &.is_pending {
         color: $pending_label_color;
     }

src-ui/app/modal_controller/update_modal/UpdateModal.module.scss

@@ -66,7 +66,6 @@
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
-    color: var(--dark_basic_text_color);
 }
 
 .accept_button {
@@ -91,19 +90,19 @@
             border-radius: 0.4rem;
         }
         &.is_latest_version_already {
-            background-color: var(--dark_800_color);
+            background-color: var(--dark_825_color);
             pointer-events: none;
         }
     }
 }
 
 .deny_button {
-    background-color: var(--dark_800_color);
+    background-color: var(--dark_825_color);
     &:hover {
-        background-color: var(--dark_700_color);
+        background-color: var(--dark_800_color);
     }
     &:active {
-        background-color: var(--dark_800_color);
+        background-color: var(--dark_850_color);
     }
 }
 
@@ -137,7 +136,6 @@
     gap: 0.6rem;
 }
 .version_desc_point {
-    background-color: var(--dark_basic_text_color);
     width: 0.3rem;
     border-radius: 50%;
     aspect-ratio: 1 / 1;
@@ -147,5 +145,4 @@
     max-width: 48rem;
     // text-align: center;
     font-weight: 300;
-    color: var(--dark_basic_text_color);
 }

src-ui/app/snackbar_controller/SnackbarController.module.scss

@@ -4,10 +4,10 @@
     padding: 2rem;
     color: #fff;
     &.is_success {
-        background-color: #368777;
+        background-color: var(--success_bc_color);
     }
     &.is_error {
-        background-color: #bb4448;
+        background-color: var(--error_bc_color);
     }
 }
 

src-ui/app/splash_component/SplashComponent.module.scss

@@ -22,13 +22,13 @@
             animation: appear .3s ease;
         }
         & .announcements_link_svg {
-            color: var(--dark_basic_text_color);
+            color: var(--dark_200_color);
         }
     }
     &:hover {
         background-color: var(--dark_825_color);
         & .announcements_label {
-            color: var(--dark_basic_text_color);
+            color: var(--dark_200_color);
         }
         & .announcements_link_svg {
             color: var(--primary_300_color);
@@ -79,14 +79,14 @@
     width: 68px;
     aspect-ratio: 1 / 1;
     &:hover {
-        background-color: #bb4448;
+        background-color: var(--error_bc_color);
         & .x_mark_svg {
             color: var(--dark_200_color);
             transform: rotate(45deg);
         }
     }
     &:active {
-        background-color: #9c3938;
+        background-color: var(--error_bc_active_color);
     }
     transition: all 0.1s ease;
 }

src-ui/app/window_title_bar/WindowTitleBar.module.scss

@@ -61,10 +61,10 @@
 }
 .close_button {
     &:hover {
-        background-color: #bb4448;
+        background-color: var(--error_bc_color);
     }
     &:active {
-        background-color: #9c3938;
+        background-color: var(--error_bc_active_color);
     }
 }
 

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);