From 28a602e01e9935a55822ca69eaad5fe0c2fdc0ae Mon Sep 17 00:00:00 2001
From: Sakamoto Shiina <68018796+ShiinaSakamoto@users.noreply.github.com>
Date: Sun, 8 Sep 2024 17:43:54 +0900
Subject: [PATCH] [Update] Config Page: Add Others Tab. Add section Auto Clear
 Message Box.

---
 .../setting_box/SettingBox.jsx                |  3 ++
 .../components/checkbox/Checkbox.jsx          | 22 ++++++--------
 .../components/checkbox/Checkbox.module.scss  |  9 +++++-
 .../setting_box/others/Others.jsx             | 30 +++++++++++++++++++
 src-ui/logics/useConfig.js                    | 19 ++++++++++++
 src-ui/logics/useReceiveRoutes.js             |  6 ++++
 src-ui/store.js                               |  8 +++++
 7 files changed, 83 insertions(+), 14 deletions(-)
 create mode 100644 src-ui/app/config_page/setting_section/setting_box/others/Others.jsx

diff --git a/src-ui/app/config_page/setting_section/setting_box/SettingBox.jsx b/src-ui/app/config_page/setting_section/setting_box/SettingBox.jsx
index a38b4f1e..90669da1 100644
--- a/src-ui/app/config_page/setting_section/setting_box/SettingBox.jsx
+++ b/src-ui/app/config_page/setting_section/setting_box/SettingBox.jsx
@@ -2,6 +2,7 @@ import { useSelectedConfigTabId } from "@store";
 
 import { Device } from "./device/Device";
 import { Appearance } from "./appearance/Appearance";
+import { Others } from "./others/Others";
 import { AboutVrct } from "./about_vrct/AboutVrct";
 
 export const SettingBox = () => {
@@ -9,6 +10,8 @@ export const SettingBox = () => {
     switch (currentSelectedConfigTabId) {
         case "device":
             return <Device />;
+        case "others":
+            return <Others />;
         // case "appearance":
         //     return <Appearance />;
         // case "about_vrct":
diff --git a/src-ui/app/config_page/setting_section/setting_box/components/checkbox/Checkbox.jsx b/src-ui/app/config_page/setting_section/setting_box/components/checkbox/Checkbox.jsx
index 8a518eb6..c1916fc8 100644
--- a/src-ui/app/config_page/setting_section/setting_box/components/checkbox/Checkbox.jsx
+++ b/src-ui/app/config_page/setting_section/setting_box/components/checkbox/Checkbox.jsx
@@ -1,22 +1,18 @@
-import React, { useState } from 'react';
 import styles from "./Checkbox.module.scss";
 
 export const Checkbox = (props) => {
-    const [isChecked, setIsChecked] = useState(false);
-
-    const handleCheckboxChange = () => {
-        setIsChecked(!isChecked);
-    };
-
     return (
         <div className={styles.checkbox_container}>
             <label className={styles.checkbox_wrapper} htmlFor={props.checkbox_id}>
-                <input
-                    type="checkbox"
-                    id={props.checkbox_id}
-                    checked={isChecked}
-                    onChange={handleCheckboxChange}
-                />
+                {(props.state === "loading")
+                    ? <span className={styles.loader}></span>
+                    : <input
+                        type="checkbox"
+                        id={props.checkbox_id}
+                        checked={props.variable.data}
+                        onChange={props.toggleFunction}
+                    />
+                }
                 <span className={styles.cbx}>
                     <svg viewBox="0 0 12 12">
                         <polyline points="1 6.29411765 4.5 10 11 1"></polyline>
diff --git a/src-ui/app/config_page/setting_section/setting_box/components/checkbox/Checkbox.module.scss b/src-ui/app/config_page/setting_section/setting_box/components/checkbox/Checkbox.module.scss
index 4dc0ba83..a4364962 100644
--- a/src-ui/app/config_page/setting_section/setting_box/components/checkbox/Checkbox.module.scss
+++ b/src-ui/app/config_page/setting_section/setting_box/components/checkbox/Checkbox.module.scss
@@ -1,5 +1,7 @@
+@import "@scss_mixins";
+
 .checkbox_container {
-    width: 100%;
+    // width: 100%;
     height: 100%;
     display: flex;
     justify-content: end;
@@ -10,6 +12,7 @@
     display: inline-block;
     cursor: pointer;
     padding: 2rem;
+    position: relative;
     &:hover {
         & .cbx {
             border: var(--primary_600_color) solid 0.2rem;
@@ -51,3 +54,7 @@
     stroke-dashoffset: 0;
     transition: all 0.15s ease;
 }
+
+.loader {
+    @include loader(2rem, 0.2rem, right, -2rem);
+}
\ No newline at end of file
diff --git a/src-ui/app/config_page/setting_section/setting_box/others/Others.jsx b/src-ui/app/config_page/setting_section/setting_box/others/Others.jsx
new file mode 100644
index 00000000..4995e6e7
--- /dev/null
+++ b/src-ui/app/config_page/setting_section/setting_box/others/Others.jsx
@@ -0,0 +1,30 @@
+import { useTranslation } from "react-i18next";
+import { useSettingBox } from "../components/useSettingBox";
+// import {
+//     useEnableAutoClearMessageBox,
+// } from "@store";
+
+import { useConfig } from "@logics/useConfig";
+
+export const Others = () => {
+    const { t } = useTranslation();
+    const {
+        CheckboxContainer,
+        RadioButtonContainer,
+    } = useSettingBox();
+
+    const { currentEnableAutoClearMessageBox, toggleEnableAutoClearMessageBox } = useConfig();
+
+
+    return (
+        <>
+            <CheckboxContainer
+                label={t("config_page.auto_clear_the_message_box.label")}
+                variable={currentEnableAutoClearMessageBox}
+                toggleFunction={toggleEnableAutoClearMessageBox}
+            />
+
+            {/* <RadioButtonContainer label={t("config_page.send_message_button_type.label")} checkbox_id="checkbox_id_1"/> */}
+        </>
+    );
+};
\ No newline at end of file
diff --git a/src-ui/logics/useConfig.js b/src-ui/logics/useConfig.js
index fb7c54fc..f609bebb 100644
--- a/src-ui/logics/useConfig.js
+++ b/src-ui/logics/useConfig.js
@@ -6,6 +6,8 @@ import {
     useSelectedMicDevice,
     useSpeakerDeviceList,
     useSelectedSpeakerDevice,
+
+    useEnableAutoClearMessageBox,
 } from "@store";
 
 import { useStdoutToPython } from "./useStdoutToPython";
@@ -22,6 +24,7 @@ export const useConfig = () => {
     const { updateSelectedMicDevice } = useSelectedMicDevice();
     const { updateSpeakerDeviceList } = useSpeakerDeviceList();
     const { updateSelectedSpeakerDevice } = useSelectedSpeakerDevice();
+    const { currentEnableAutoClearMessageBox, updateEnableAutoClearMessageBox } = useEnableAutoClearMessageBox();
 
 
     const asyncPending = () => new Promise(() => {});
@@ -95,5 +98,21 @@ export const useConfig = () => {
         },
 
 
+
+        // Others
+        toggleEnableAutoClearMessageBox: () => {
+            updateEnableAutoClearMessageBox(asyncPending);
+            if (currentEnableAutoClearMessageBox.data) {
+                asyncStdoutToPython("/controller/callback_disable_auto_clear_chatbox");
+            } else {
+                asyncStdoutToPython("/controller/callback_enable_auto_clear_chatbox");
+            }
+        },
+        currentEnableAutoClearMessageBox: currentEnableAutoClearMessageBox,
+        updateEnableAutoClearMessageBox: (payload) => {
+            updateEnableAutoClearMessageBox(payload.data);
+        },
+
+
     };
 };
\ No newline at end of file
diff --git a/src-ui/logics/useReceiveRoutes.js b/src-ui/logics/useReceiveRoutes.js
index f624513d..ed751668 100644
--- a/src-ui/logics/useReceiveRoutes.js
+++ b/src-ui/logics/useReceiveRoutes.js
@@ -26,6 +26,8 @@ export const useReceiveRoutes = () => {
 
         updateSpeakerDeviceList,
         updateSelectedSpeakerDevice,
+
+        updateEnableAutoClearMessageBox,
     } = useConfig();
 
     const { updateVolumeVariable_Mic, updateVolumeVariable_Speaker } = useVolume();
@@ -56,6 +58,10 @@ export const useReceiveRoutes = () => {
         "/action/check_mic_threshold_energy": updateVolumeVariable_Mic,
         "/action/check_speaker_threshold_energy": updateVolumeVariable_Speaker,
 
+        "/controller/callback_enable_auto_clear_chatbox": updateEnableAutoClearMessageBox,
+        "/controller/callback_disable_auto_clear_chatbox": updateEnableAutoClearMessageBox,
+
+
 
         "/controller/callback_messagebox_send": updateSentMessageLog,
         "/action/transcription_send_mic_message": addSentMessageLog,
diff --git a/src-ui/store.js b/src-ui/store.js
index 0bafb5d0..e47e40df 100644
--- a/src-ui/store.js
+++ b/src-ui/store.js
@@ -152,6 +152,14 @@ export const { atomInstance: Atom_IsOpenedWordFilterList, useHook: useIsOpenedWo
 export const { atomInstance: Atom_WordFilterList, useHook: useWordFilterList } = createAtomWithHook(word_filter_list, "WordFilterList");
 
 
+
+// Others
+export const { atomInstance: Atom_EnableAutoClearMessageBox, useHook: useEnableAutoClearMessageBox } = createAsyncAtomWithHook(true, "EnableAutoClearMessageBox");
+
+
+
+
+
 export const { atomInstance: Atom_TranslatorListStatus, useHook: useTranslatorListStatus } = createAtomWithHook(translator_list, "TranslatorListStatus");
 export const { atomInstance: Atom_SelectedTranslatorIdStatus, useHook: useSelectedTranslatorIdStatus } = createAtomWithHook("CTranslate2", "SelectedTranslatorIdStatus");
 export const { atomInstance: Atom_IsOpenedTranslatorSelector, useHook: useIsOpenedTranslatorSelector } = createAtomWithHook(false, "IsOpenedTranslatorSelector");