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 007c3a67..f59d0341 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 @@ -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 { sendMessage } = useMessage(); + const [input_value, setInputValue] = useState(""); + 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,17 +80,18 @@ export const MessageInputBox = () => { className={styles.message_box_input_area} onChange={onChangeFunction} placeholder="Input Textfield" - value={inputValue} + value={input_value} onKeyDown={onKeyDownFunction} /> - { currentSendMessageButtonType.data !== "hide" && } + {currentSendMessageButtonType.data !== "hide" && ( + + )} ); }; - -const SendMessageButton = ({onSubmitFunction}) => { +const SendMessageButton = ({ onSubmitFunction }) => { return (