+
- {currentMessageLogs.data.map(message_data => (
+ {currentMessageLogs.data.map((message_data) => (
))}
diff --git a/src-ui/app/main_page/main_section/message_container/message_input_box/MessageInputBox.jsx b/src-ui/app/main_page/main_section/message_container/message_input_box/MessageInputBox.jsx
index 53bce2e5..e5725637 100644
--- a/src-ui/app/main_page/main_section/message_container/message_input_box/MessageInputBox.jsx
+++ b/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 { scrollToBottom } from "@utils";
+import { useMessageLogScroll } from "@logics_main";
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);
diff --git a/src-ui/logics/main/index.js b/src-ui/logics/main/index.js
index 9d142003..7cd492d6 100644
--- a/src-ui/logics/main/index.js
+++ b/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";
\ No newline at end of file
diff --git a/src-ui/logics/main/useMessageLogScroll.js b/src-ui/logics/main/useMessageLogScroll.js
new file mode 100644
index 00000000..425adcb0
--- /dev/null
+++ b/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,
+ };
+};
diff --git a/src-ui/utils.js b/src-ui/utils.js
index a2d38fc9..b7296f49 100644
--- a/src-ui/utils.js
+++ b/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);
From 4502f30b29d843516a8e8169a9907363c23e7a08 Mon Sep 17 00:00:00 2001
From: Sakamoto Shiina <68018796+ShiinaSakamoto@users.noreply.github.com>
Date: Fri, 3 Jan 2025 20:12:07 +0900
Subject: [PATCH 5/8] [bugfix] Main Page: Message Logs: Sent Message: Fix text
wrap that was not wrap and over flowed.
---
.../log_box/message_container/MessageContainer.module.scss | 3 +++
1 file changed, 3 insertions(+)
diff --git a/src-ui/app/main_page/main_section/message_container/log_box/message_container/MessageContainer.module.scss b/src-ui/app/main_page/main_section/message_container/log_box/message_container/MessageContainer.module.scss
index 2335042e..92254052 100644
--- a/src-ui/app/main_page/main_section/message_container/log_box/message_container/MessageContainer.module.scss
+++ b/src-ui/app/main_page/main_section/message_container/log_box/message_container/MessageContainer.module.scss
@@ -71,6 +71,7 @@
.message_box {
display: flex;
flex-direction: column;
+ width: 100%;
&.sent_message {
align-items: end;
text-align: end;
@@ -83,6 +84,8 @@
.message_main {
user-select: text;
font-size: 1.4em;
+ overflow-wrap: break-word;
+ max-width: 100%;
}
.message_second {
From b6b73b2d014fd7d3d314453649e18818e7a150e3 Mon Sep 17 00:00:00 2001
From: Sakamoto Shiina <68018796+ShiinaSakamoto@users.noreply.github.com>
Date: Fri, 3 Jan 2025 20:30:09 +0900
Subject: [PATCH 6/8] [Chore] Update Modal: Deny button. to be a little bit
darker.
---
.../modal_controller/update_modal/UpdateModal.module.scss | 8 ++++----
1 file changed, 4 insertions(+), 4 deletions(-)
diff --git a/src-ui/app/modal_controller/update_modal/UpdateModal.module.scss b/src-ui/app/modal_controller/update_modal/UpdateModal.module.scss
index a125bdca..57881896 100644
--- a/src-ui/app/modal_controller/update_modal/UpdateModal.module.scss
+++ b/src-ui/app/modal_controller/update_modal/UpdateModal.module.scss
@@ -90,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);
}
}
From 31fb57baad5f436c7c9187a2d0f6c65faecd5a21 Mon Sep 17 00:00:00 2001
From: Sakamoto Shiina <68018796+ShiinaSakamoto@users.noreply.github.com>
Date: Fri, 3 Jan 2025 20:59:06 +0900
Subject: [PATCH 7/8] [bugfix] Message Page: Message Logs: System Message: Fix
width and set to text center.
---
.../log_box/message_container/MessageContainer.module.scss | 3 ++-
1 file changed, 2 insertions(+), 1 deletion(-)
diff --git a/src-ui/app/main_page/main_section/message_container/log_box/message_container/MessageContainer.module.scss b/src-ui/app/main_page/main_section/message_container/log_box/message_container/MessageContainer.module.scss
index 92254052..ea82b297 100644
--- a/src-ui/app/main_page/main_section/message_container/log_box/message_container/MessageContainer.module.scss
+++ b/src-ui/app/main_page/main_section/message_container/log_box/message_container/MessageContainer.module.scss
@@ -71,12 +71,13 @@
.message_box {
display: flex;
flex-direction: column;
- width: 100%;
&.sent_message {
+ width: 100%;
align-items: end;
text-align: end;
}
&.received_message {
+ width: 100%;
align-items: start;
}
}
From abeeb69afb48bd5ff3fe2ee785ee7748f25aebf3 Mon Sep 17 00:00:00 2001
From: Sakamoto Shiina <68018796+ShiinaSakamoto@users.noreply.github.com>
Date: Fri, 3 Jan 2025 21:12:14 +0900
Subject: [PATCH 8/8] [Chore] About VRCT: Set the position to center.
---
.../setting_section/setting_box/about_vrct/AboutVrct.module.scss | 1 +
1 file changed, 1 insertion(+)
diff --git a/src-ui/app/config_page/setting_section/setting_box/about_vrct/AboutVrct.module.scss b/src-ui/app/config_page/setting_section/setting_box/about_vrct/AboutVrct.module.scss
index 741b2934..9c8dced1 100644
--- a/src-ui/app/config_page/setting_section/setting_box/about_vrct/AboutVrct.module.scss
+++ b/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;
}