[Perf/bugfix] Separate custom hooks and prevent re-render issues.

Config Page: Device Tab. threshold component. fix problem that the input component focused out when input something each time.
Set threshold data when started python.

src-ui/logics/configs/useEnableAutoClearMessageBox.js

@@ -0,0 +1,28 @@
+import { useEnableAutoClearMessageBox as useStoreEnableAutoClearMessageBox } from "@store";
+import { useStdoutToPython } from "@logics/useStdoutToPython";
+
+export const useEnableAutoClearMessageBox = () => {
+    const { asyncStdoutToPython } = useStdoutToPython();
+    const { currentEnableAutoClearMessageBox, updateEnableAutoClearMessageBox } = useStoreEnableAutoClearMessageBox();
+
+    const getEnableAutoClearMessageBox = () => {
+        updateEnableAutoClearMessageBox(() => new Promise(() => {}));
+        asyncStdoutToPython("/config/enable_auto_clear_message_box");
+    };
+
+    const toggleEnableAutoClearMessageBox = () => {
+        updateEnableAutoClearMessageBox(() => new Promise(() => {}));
+        if (currentEnableAutoClearMessageBox.data) {
+            asyncStdoutToPython("/controller/callback_disable_auto_clear_chatbox");
+        } else {
+            asyncStdoutToPython("/controller/callback_enable_auto_clear_chatbox");
+        }
+    };
+
+    return {
+        getEnableAutoClearMessageBox,
+        toggleEnableAutoClearMessageBox,
+        currentEnableAutoClearMessageBox,
+        updateEnableAutoClearMessageBox
+    };
+};

src-ui/logics/configs/useMicDeviceList.js

@@ -0,0 +1,14 @@
+import { useMicDeviceList as useStoreMicDeviceList } from "@store";
+import { useStdoutToPython } from "@logics/useStdoutToPython";
+
+export const useMicDeviceList = () => {
+    const { asyncStdoutToPython } = useStdoutToPython();
+    const { currentMicDeviceList, updateMicDeviceList } = useStoreMicDeviceList();
+
+    const getMicDeviceList = () => {
+        updateMicDeviceList(() => new Promise(() => {}));
+        asyncStdoutToPython("/controller/list_mic_device");
+    };
+
+    return { currentMicDeviceList, getMicDeviceList, updateMicDeviceList };
+};

src-ui/logics/configs/useMicHostList.js

@@ -0,0 +1,14 @@
+import { useMicHostList as useStoreMicHostList } from "@store";
+import { useStdoutToPython } from "@logics/useStdoutToPython";
+
+export const useMicHostList = () => {
+    const { asyncStdoutToPython } = useStdoutToPython();
+    const { currentMicHostList, updateMicHostList } = useStoreMicHostList();
+
+    const getMicHostList = () => {
+        updateMicHostList(() => new Promise(() => {}));
+        asyncStdoutToPython("/controller/list_mic_host");
+    };
+
+    return { currentMicHostList, getMicHostList, updateMicHostList };
+};

src-ui/logics/configs/useMicThreshold.js

@@ -0,0 +1,17 @@
+import { useMicThreshold as useStoreMicThreshold } from "@store";
+import { useStdoutToPython } from "@logics/useStdoutToPython";
+
+export const useMicThreshold = () => {
+    const { asyncStdoutToPython } = useStdoutToPython();
+    const { updateMicThreshold, currentMicThreshold } = useStoreMicThreshold();
+
+    const getMicThreshold = () => {
+        asyncStdoutToPython("/config/input_mic_energy_threshold");
+    };
+
+    const setMicThreshold = (mic_threshold) => {
+        asyncStdoutToPython("/controller/callback_set_mic_energy_threshold", mic_threshold);
+    };
+
+    return { getMicThreshold, setMicThreshold, currentMicThreshold, updateMicThreshold };
+};

src-ui/logics/configs/useSelectedMicDevice.js

@@ -0,0 +1,19 @@
+import { useSelectedMicDevice as useStoreSelectedMicDevice } from "@store";
+import { useStdoutToPython } from "@logics/useStdoutToPython";
+
+export const useSelectedMicDevice = () => {
+    const { asyncStdoutToPython } = useStdoutToPython();
+    const { currentSelectedMicDevice, updateSelectedMicDevice } = useStoreSelectedMicDevice();
+
+    const getSelectedMicDevice = () => {
+        updateSelectedMicDevice(() => new Promise(() => {}));
+        asyncStdoutToPython("/config/choice_mic_device");
+    };
+
+    const setSelectedMicDevice = (selected_mic_device) => {
+        updateSelectedMicDevice(() => new Promise(() => {}));
+        asyncStdoutToPython("/controller/callback_set_mic_device", selected_mic_device);
+    };
+
+    return { currentSelectedMicDevice, getSelectedMicDevice, updateSelectedMicDevice, setSelectedMicDevice };
+};

src-ui/logics/configs/useSelectedMicHost.js

@@ -0,0 +1,19 @@
+import { useSelectedMicHost as useStoreSelectedMicHost } from "@store";
+import { useStdoutToPython } from "@logics/useStdoutToPython";
+
+export const useSelectedMicHost = () => {
+    const { asyncStdoutToPython } = useStdoutToPython();
+    const { currentSelectedMicHost, updateSelectedMicHost } = useStoreSelectedMicHost();
+
+    const getSelectedMicHost = () => {
+        updateSelectedMicHost(() => new Promise(() => {}));
+        asyncStdoutToPython("/config/choice_mic_host");
+    };
+
+    const setSelectedMicHost = (selected_mic_host) => {
+        updateSelectedMicHost(() => new Promise(() => {}));
+        asyncStdoutToPython("/controller/callback_set_mic_host", selected_mic_host);
+    };
+
+    return { currentSelectedMicHost, getSelectedMicHost, updateSelectedMicHost, setSelectedMicHost };
+};

src-ui/logics/configs/useSelectedSpeakerDevice.js

@@ -0,0 +1,19 @@
+import { useSelectedSpeakerDevice as useStoreSelectedSpeakerDevice } from "@store";
+import { useStdoutToPython } from "@logics/useStdoutToPython";
+
+export const useSelectedSpeakerDevice = () => {
+    const { asyncStdoutToPython } = useStdoutToPython();
+    const { currentSelectedSpeakerDevice, updateSelectedSpeakerDevice } = useStoreSelectedSpeakerDevice();
+
+    const getSelectedSpeakerDevice = () => {
+        updateSelectedSpeakerDevice(() => new Promise(() => {}));
+        asyncStdoutToPython("/config/choice_speaker_device");
+    };
+
+    const setSelectedSpeakerDevice = (selected_speaker_device) => {
+        updateSelectedSpeakerDevice(() => new Promise(() => {}));
+        asyncStdoutToPython("/controller/callback_set_speaker_device", selected_speaker_device);
+    };
+
+    return { currentSelectedSpeakerDevice, getSelectedSpeakerDevice, updateSelectedSpeakerDevice, setSelectedSpeakerDevice };
+};

src-ui/logics/configs/useSendMessageButtonType.js

@@ -0,0 +1,24 @@
+import { useSendMessageButtonType as useStoreSendMessageButtonType } from "@store";
+import { useStdoutToPython } from "@logics/useStdoutToPython";
+
+export const useSendMessageButtonType = () => {
+    const { asyncStdoutToPython } = useStdoutToPython();
+    const { currentSendMessageButtonType, updateSendMessageButtonType } = useStoreSendMessageButtonType();
+
+    const getSendMessageButtonType = () => {
+        updateSendMessageButtonType(() => new Promise(() => {}));
+        asyncStdoutToPython("/config/send_message_button_type");
+    };
+
+    const setSendMessageButtonType = (selected_type) => {
+        updateSendMessageButtonType(() => new Promise(() => {}));
+        asyncStdoutToPython("/controller/callback_set_send_message_button_type", selected_type);
+    };
+
+    return {
+        getSendMessageButtonType,
+        setSendMessageButtonType,
+        currentSendMessageButtonType,
+        updateSendMessageButtonType
+    };
+};

src-ui/logics/configs/useSoftwareVersion.js

@@ -0,0 +1,14 @@
+import { useSoftwareVersion as useStoreSoftwareVersion } from "@store";
+import { useStdoutToPython } from "@logics/useStdoutToPython";
+
+export const useSoftwareVersion = () => {
+    const { asyncStdoutToPython } = useStdoutToPython();
+    const { currentSoftwareVersion, updateSoftwareVersion } = useStoreSoftwareVersion();
+
+    const getSoftwareVersion = () => {
+        updateSoftwareVersion(() => new Promise(() => {}));
+        asyncStdoutToPython("/config/version");
+    };
+
+    return { currentSoftwareVersion, getSoftwareVersion, updateSoftwareVersion };
+};

src-ui/logics/configs/useSpeakerDeviceList.js

@@ -0,0 +1,14 @@
+import { useSpeakerDeviceList as useStoreSpeakerDeviceList } from "@store";
+import { useStdoutToPython } from "@logics/useStdoutToPython";
+
+export const useSpeakerDeviceList = () => {
+    const { asyncStdoutToPython } = useStdoutToPython();
+    const { currentSpeakerDeviceList, updateSpeakerDeviceList } = useStoreSpeakerDeviceList();
+
+    const getSpeakerDeviceList = () => {
+        updateSpeakerDeviceList(() => new Promise(() => {}));
+        asyncStdoutToPython("/controller/list_speaker_device");
+    };
+
+    return { currentSpeakerDeviceList, getSpeakerDeviceList, updateSpeakerDeviceList };
+};

src-ui/logics/configs/useSpeakerThreshold.js

@@ -0,0 +1,17 @@
+import { useSpeakerThreshold as useStoreSpeakerThreshold } from "@store";
+import { useStdoutToPython } from "@logics/useStdoutToPython";
+
+export const useSpeakerThreshold = () => {
+    const { asyncStdoutToPython } = useStdoutToPython();
+    const { updateSpeakerThreshold, currentSpeakerThreshold } = useStoreSpeakerThreshold();
+
+    const getSpeakerThreshold = () => {
+        asyncStdoutToPython("/config/input_speaker_energy_threshold");
+    };
+
+    const setSpeakerThreshold = (speaker_threshold) => {
+        asyncStdoutToPython("/controller/callback_set_speaker_energy_threshold", speaker_threshold);
+    };
+
+    return { getSpeakerThreshold, setSpeakerThreshold, currentSpeakerThreshold, updateSpeakerThreshold };
+};