[Update] Main Page: Add feature that message history navigation with Shift + ArrowUp/Down.

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

@@ -1,24 +1,32 @@
-import { useState } from "react";
+import { useState, useEffect } from "react";
 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 {
-    useSendMessageButtonType,
-    useEnableAutoClearMessageInputBox,
-} from "@logics_configs";
 
 export const MessageInputBox = () => {
-    const [inputValue, setInputValue] = useState("");
+    const [input_value, setInputValue] = useState("");
-    const { sendMessage } = useMessage();
+    const [message_history, setMessageHistory] = useState([]);
+    const [history_index, setHistoryIndex] = useState(-1);
+    const { sendMessage, currentMessageLogs } = useMessage();
 
     const { currentEnableAutoClearMessageInputBox } = useEnableAutoClearMessageInputBox();
     const { currentSendMessageButtonType } = useSendMessageButtonType();
 
+    useEffect(() => {
+        if (currentMessageLogs.data) {
+            const sentMessages = currentMessageLogs.data
+                .filter(log => log.category === "sent")
+                .map(log => log.messages.original);
+            setMessageHistory(sentMessages);
+        }
+    }, [currentMessageLogs.data]);
+
     const onSubmitFunction = (e) => {
         e.preventDefault();
-        sendMessage(inputValue);
+        sendMessage(input_value);
 
         if (currentEnableAutoClearMessageInputBox.data) setInputValue("");
 
@@ -26,6 +34,7 @@ export const MessageInputBox = () => {
             scrollToBottom(store.log_box_ref);
         }, 10);
 
+        setHistoryIndex(-1);
     };
 
     const onChangeFunction = (e) => {
@@ -34,9 +43,34 @@ export const MessageInputBox = () => {
 
     const onKeyDownFunction = (e) => {
         if (currentSendMessageButtonType.data === "show_and_disable_enter_key") return;
-        if (e.keyCode == 13 && e.shiftKey == false) {
+
+        if (e.keyCode === 13 && !e.shiftKey) {
             onSubmitFunction(e);
         }
+
+        if (e.key === "ArrowUp" && e.shiftKey) {
+            e.preventDefault();
+
+            if (history_index + 1 < message_history.length) {
+                const new_index = history_index + 1;
+                setHistoryIndex(new_index);
+                setInputValue(message_history[message_history.length - 1 - new_index]);
+            }
+        }
+
+        if (e.key === "ArrowDown" && e.shiftKey) {
+            e.preventDefault();
+
+            if (history_index > -1) {
+                const new_index = history_index - 1;
+                setHistoryIndex(new_index);
+                setInputValue(
+                    new_index >= 0
+                        ? message_history[message_history.length - 1 - new_index]
+                        : ""
+                );
+            }
+        }
     };
 
     return (
@@ -46,16 +80,17 @@ export const MessageInputBox = () => {
                     className={styles.message_box_input_area}
                     onChange={onChangeFunction}
                     placeholder="Input Textfield"
-                    value={inputValue}
+                    value={input_value}
                     onKeyDown={onKeyDownFunction}
                 />
             </div>
-            { currentSendMessageButtonType.data !== "hide" && <SendMessageButton onSubmitFunction={onSubmitFunction}/> }
+            {currentSendMessageButtonType.data !== "hide" && (
+                <SendMessageButton onSubmitFunction={onSubmitFunction} />
+            )}
         </div>
     );
 };
 
-
 const SendMessageButton = ({ onSubmitFunction }) => {
     return (
         <button