[Update] Main Page: Message Input Box Ratio. saveable the ratio.

src-ui/app/App.jsx

@@ -34,6 +34,7 @@ import { useUiLanguage } from "@logics_configs/useUiLanguage";
 import { useIsMainPageCompactMode } from "@logics_main/useIsMainPageCompactMode";
 import { useLanguageSettings } from "@logics_main/useLanguageSettings";
 import { useSelectableLanguageList } from "@logics_main/useSelectableLanguageList";
+import { useMessageInputBoxRatio } from "@logics_main/useMessageInputBoxRatio";
 
 const StartPythonFacadeComponent = () => {
     const { asyncStartPython } = useStartPython();
@@ -62,6 +63,7 @@ const StartPythonFacadeComponent = () => {
         getSelectedTranslationEngines,
     } = useLanguageSettings();
     const { getSelectableLanguageList } = useSelectableLanguageList();
+    const { getMessageInputBoxRatio } = useMessageInputBoxRatio();
 
 
     useEffect(() => {
@@ -70,6 +72,7 @@ const StartPythonFacadeComponent = () => {
             asyncStartPython().then((result) => {
                 getUiLanguage();
                 getIsMainPageCompactMode();
+                getMessageInputBoxRatio();
 
                 getSoftwareVersion();
 

src-ui/app/main_page/main_section/message_container/MessageContainer.jsx

@@ -1,33 +1,78 @@
 import { useResizable } from "react-resizable-layout";
-
+import { useRef, useEffect, useState } from "react";
 import styles from "./MessageContainer.module.scss";
 
 import { LogBox } from "./log_box/LogBox";
 import { MessageInputBox } from "./message_input_box/MessageInputBox";
+import { useMessageInputBoxRatio } from "@logics_main/useMessageInputBoxRatio";
 
 export const MessageContainer = () => {
+    const { currentMessageInputBoxRatio, setMessageInputBoxRatio } = useMessageInputBoxRatio();
+    const [message_box_height_in_rem, setMessageBoxHeightInRem] = useState(10);
+
+    const container_ref = useRef(null);
+    const log_box_ref = useRef(null);
+    const message_box_wrapper_ref = useRef(null);
+
+    const calculateMessageBoxRatioAndHeight = () => {
+        if (log_box_ref.current && message_box_wrapper_ref.current) {
+            const container_height = container_ref.current.offsetHeight;
+            const container_padding_bottom = parseFloat(window.getComputedStyle(container_ref.current).paddingBottom);
+            const total_height = container_height - container_padding_bottom;
+
+            const message_box_height = message_box_wrapper_ref.current.offsetHeight;
+            const message_box_ratio = (message_box_height / total_height) * 100;
+
+            setMessageInputBoxRatio(message_box_ratio);
+
+            const height_in_rem = convertRatioToRem(message_box_ratio);
+            setMessageBoxHeightInRem(height_in_rem);
+        }
+    };
+
     const { position, separatorProps } = useResizable({
         axis: "y",
-        reverse: true
+        reverse: true,
+        onResizeEnd: calculateMessageBoxRatioAndHeight,
     });
 
+    useEffect(() => {
+        setMessageBoxHeightInRem((position / 10) - 1.5);
+    }, [position]);
+
+
+    useEffect(() => {
+        setMessageBoxHeightInRem(convertRatioToRem(currentMessageInputBoxRatio.data));
+    }, [currentMessageInputBoxRatio.data]);
+
+    const convertRatioToRem = (ratio) => {
+        const container_height = container_ref.current.offsetHeight;
+        const container_padding_bottom = parseFloat(window.getComputedStyle(container_ref.current).paddingBottom);
+        const total_height = container_height - container_padding_bottom;
+
+        return (ratio / 100) * total_height / 10; // 10px = 1rem
+    };
+
     return (
-        <div className={styles.container}>
+        <div className={styles.container} ref={container_ref}>
+            <div ref={log_box_ref} className={styles.log_box_resize_wrapper}>
                 <LogBox />
-            <Separator
-                dir={"horizontal"}
-                {...separatorProps}
-            />
-            <div className={styles.message_box_resize_wrapper} style={ { height: `${(position / 10) - 1.5 }rem` } }>
+            </div>
+            <Separator {...separatorProps} onDragStart={calculateMessageBoxRatioAndHeight} />
+            <div
+                className={styles.message_box_resize_wrapper}
+                ref={message_box_wrapper_ref}
+                style={{ height: `${message_box_height_in_rem}rem` }}
+            >
                 <MessageInputBox />
             </div>
         </div>
     );
 };
 
-const Separator = ({ ...props }) => {
+const Separator = ({ onDragStart, ...props }) => {
     return (
-        <div tabIndex={0} className={styles.separator} {...props}>
+        <div tabIndex={0} className={styles.separator} {...props} onDragStart={onDragStart}>
             <span className={styles.separator_line}></span>
         </div>
     );

src-ui/app/main_page/main_section/message_container/MessageContainer.module.scss

@@ -6,6 +6,11 @@
     padding: 0 1.6rem 1rem 1.6rem;
 }
 
+.log_box_resize_wrapper {
+    flex: 1;
+    overflow: auto;
+}
+
 .separator {
     position: relative;
     width: 100%;

src-ui/logics/main/useMessageInputBoxRatio.js

@@ -0,0 +1,22 @@
+import { useStore_MessageInputBoxRatio } from "@store";
+import { useStdoutToPython } from "@logics/useStdoutToPython";
+
+export const useMessageInputBoxRatio = () => {
+    const { asyncStdoutToPython } = useStdoutToPython();
+    const { currentMessageInputBoxRatio, updateMessageInputBoxRatio } = useStore_MessageInputBoxRatio();
+
+    const getMessageInputBoxRatio = () => {
+        asyncStdoutToPython("/get/data/message_box_ratio");
+    };
+
+    const setMessageInputBoxRatio = (ratio) => {
+        asyncStdoutToPython("/set/data/message_box_ratio", parseFloat(ratio.toFixed(2)));
+    };
+
+    return {
+        currentMessageInputBoxRatio,
+        getMessageInputBoxRatio,
+        updateMessageInputBoxRatio,
+        setMessageInputBoxRatio,
+    };
+};

src-ui/logics/useReceiveRoutes.js

@@ -1,12 +1,15 @@
 import { translator_status } from "@data";
 
 import { arrayToObject } from "@utils/arrayToObject";
-import { useMainFunction } from "@logics_main/useMainFunction";
+
 import { useMessage } from "@logics_common/useMessage";
+import { useVolume } from "@logics_common/useVolume";
+
+import { useMainFunction } from "@logics_main/useMainFunction";
 import { useSelectableLanguageList } from "@logics_main/useSelectableLanguageList";
 import { useLanguageSettings } from "@logics_main/useLanguageSettings";
 import { useIsMainPageCompactMode } from "@logics_main/useIsMainPageCompactMode";
-import { useVolume } from "@logics_common/useVolume";
+import { useMessageInputBoxRatio } from "@logics_main/useMessageInputBoxRatio";
 
 
 import { useSoftwareVersion } from "@logics_configs/useSoftwareVersion";
@@ -67,6 +70,9 @@ export const useReceiveRoutes = () => {
         updateSpeakerThresholdCheckStatus,
     } = useVolume();
 
+    const { updateMessageInputBoxRatio } = useMessageInputBoxRatio();
+
+
     const routes = {
         // Main Page
         // Page Controls
@@ -118,6 +124,10 @@ export const useReceiveRoutes = () => {
         "/run/transcription_send_mic_message": addSentMessageLog,
         "/run/transcription_receive_speaker_message": addReceivedMessageLog,
 
+        // Message Box
+        "/get/data/message_box_ratio": updateMessageInputBoxRatio,
+        "/set/data/message_box_ratio": updateMessageInputBoxRatio,
+
 
         // Config Page
         // Common

src-ui/store.js

@@ -101,18 +101,15 @@ const createAtomWithHook = (initialValue, base_name, options) => {
 
 export const { atomInstance: Atom_SoftwareVersion, useHook: useStore_SoftwareVersion } = createAtomWithHook("-", "SoftwareVersion");
 
+// Main Page
+// Functions
 export const { atomInstance: Atom_TranslationStatus, useHook: useStore_TranslationStatus } = createAtomWithHook(false, "TranslationStatus", {is_state_ok: true});
 export const { atomInstance: Atom_TranscriptionSendStatus, useHook: useStore_TranscriptionSendStatus } = createAtomWithHook(false, "TranscriptionSendStatus", {is_state_ok: true});
 export const { atomInstance: Atom_TranscriptionReceiveStatus, useHook: useStore_TranscriptionReceiveStatus } = createAtomWithHook(false, "TranscriptionReceiveStatus", {is_state_ok: true});
 export const { atomInstance: Atom_ForegroundStatus, useHook: useStore_ForegroundStatus } = createAtomWithHook(false, "ForegroundStatus", {is_state_ok: true});
 
 export const { atomInstance: Atom_MessageLogs, useHook: useStore_MessageLogs } = createAtomWithHook(generateTestData(20), "MessageLogs");
-export const { atomInstance: Atom_IsMainPageCompactMode, useHook: useStore_IsMainPageCompactMode } = createAtomWithHook(false, "IsMainPageCompactMode");
 
-export const { atomInstance: Atom_IsOpenedLanguageSelector, useHook: useStore_IsOpenedLanguageSelector } = createAtomWithHook(
-    { your_language: false, target_language: false },
-    "IsOpenedLanguageSelector"
-);
 export const { atomInstance: Atom_SelectableLanguageList, useHook: useStore_SelectableLanguageList } = createAtomWithHook([], "SelectableLanguageList");
 
 export const { atomInstance: Atom_SelectedPresetTabNumber, useHook: useStore_SelectedPresetTabNumber } = createAtomWithHook("", "SelectedPresetTabNumber");
@@ -127,10 +124,21 @@ export const { atomInstance: Atom_SelectedTranslationEngines, useHook: useStore_
 
 export const { atomInstance: Atom_IsOpenedConfigPage, useHook: useStore_IsOpenedConfigPage } = createAtomWithHook(false, "IsOpenedConfigPage");
 export const { atomInstance: Atom_SelectedConfigTabId, useHook: useStore_SelectedConfigTabId } = createAtomWithHook("device", "SelectedConfigTabId");
-export const { atomInstance: Atom_IsOpenedDropdownMenu, useHook: useStore_IsOpenedDropdownMenu } = createAtomWithHook("", "IsOpenedDropdownMenu");
+
+// Designs
+export const { atomInstance: Atom_IsMainPageCompactMode, useHook: useStore_IsMainPageCompactMode } = createAtomWithHook(false, "IsMainPageCompactMode");
+export const { atomInstance: Atom_MessageInputBoxRatio, useHook: useStore_MessageInputBoxRatio } = createAtomWithHook(20, "MessageInputBoxRatio");
+export const { atomInstance: Atom_IsOpenedLanguageSelector, useHook: useStore_IsOpenedLanguageSelector } = createAtomWithHook(
+    { your_language: false, target_language: false },
+    "IsOpenedLanguageSelector"
+);
 
 
 // Config Page
+// Designs
+export const { atomInstance: Atom_IsOpenedDropdownMenu, useHook: useStore_IsOpenedDropdownMenu } = createAtomWithHook("", "IsOpenedDropdownMenu");
+
+// Device
 export const { atomInstance: Atom_EnableAutoMicSelect, useHook: useStore_EnableAutoMicSelect } = createAtomWithHook(true, "EnableAutoMicSelect");
 export const { atomInstance: Atom_EnableAutoSpeakerSelect, useHook: useStore_EnableAutoSpeakerSelect } = createAtomWithHook(true, "EnableAutoSpeakerSelect");