[Update] Main Page: Message Input Box Ratio. Save the ratio when window is resized.

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

@@ -1,7 +1,7 @@
 import { useResizable } from "react-resizable-layout";
 import { useRef, useEffect, useState } from "react";
 import styles from "./MessageContainer.module.scss";
-
+import { appWindow } from "@tauri-apps/api/window"; // Tauriのwindow APIをインポート
 import { LogBox } from "./log_box/LogBox";
 import { MessageInputBox } from "./message_input_box/MessageInputBox";
 import { useMessageInputBoxRatio } from "@logics_main/useMessageInputBoxRatio";
@@ -50,9 +50,27 @@ export const MessageContainer = () => {
         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 ((ratio / 100) * total_height / 10) | 0; // 10px = 1rem
     };
 
+
+        // Tauriのwindow resizeイベントをリッスン
+        useEffect(() => {
+            let resizeTimeout;
+
+            // イベントのリスナーを設定
+            const unlisten = appWindow.onResized(() => {
+                clearTimeout(resizeTimeout);
+                resizeTimeout = setTimeout(() => {
+                    calculateMessageBoxRatioAndHeight(); // リサイズが終了した後に実行
+                }, 200); // ドラッグが終了したと見なすまでの遅延（200ms程度）
+            });
+
+            return () => {
+                unlisten.then((dispose) => dispose()); // イベントリスナーを解除
+            };
+        }, []);
+
     return (
         <div className={styles.container} ref={container_ref}>
             <div ref={log_box_ref} className={styles.log_box_resize_wrapper}>

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

@@ -37,5 +37,5 @@
 .message_box_resize_wrapper {
     height: 10rem;
     min-height: 3.8rem;
-    max-height: 80%;
+    max-height: 90%;
 }

src-ui/logics/main/useMessageInputBoxRatio.js

@@ -1,6 +1,6 @@
 import { useStore_MessageInputBoxRatio } from "@store";
 import { useStdoutToPython } from "@logics/useStdoutToPython";
-
+import { clampMinMax } from "@utils/clampMinMax";
 export const useMessageInputBoxRatio = () => {
     const { asyncStdoutToPython } = useStdoutToPython();
     const { currentMessageInputBoxRatio, updateMessageInputBoxRatio } = useStore_MessageInputBoxRatio();
@@ -10,7 +10,9 @@ export const useMessageInputBoxRatio = () => {
     };
 
     const setMessageInputBoxRatio = (ratio) => {
-        asyncStdoutToPython("/set/data/message_box_ratio", parseFloat(ratio.toFixed(2)));
+        const parsed = parseFloat(ratio.toFixed(2));
+        const valid_ratio = clampMinMax(parsed, 1, 99);
+        asyncStdoutToPython("/set/data/message_box_ratio", valid_ratio);
     };
 
     return {

src-ui/utils/clampMinMax.js

@@ -0,0 +1,8 @@
+export const clampMinMax = (value, min, max) => {
+    return Math.min(Math.max(value, min), max);
+};
+
+// console.log(clamp(5, 1, 10));  // 5 (範囲内)
+// console.log(clamp(-3, 0, 10)); // 0 (minより小さい)
+// console.log(clamp(15, 1, 10)); // 10 (maxより大きい)
+// console.log(clamp(7.5, 1, 10)); // 7.5 (範囲内、少数)