diff --git a/src-ui/app/_index_css/variables.css b/src-ui/app/_index_css/variables.css index 7d9f52f9..652f1cd7 100644 --- a/src-ui/app/_index_css/variables.css +++ b/src-ui/app/_index_css/variables.css @@ -8,6 +8,7 @@ --primary_400_color: #48a495; --primary_450_color: #429c8c; --primary_500_color: #3b9483; + --primary_550_color: #398E7D; --primary_600_color: #368777; --primary_650_color: #347f6f; --primary_700_color: #317767; diff --git a/src-ui/app/config_page/setting_section/setting_box/appearance/Appearance.jsx b/src-ui/app/config_page/setting_section/setting_box/appearance/Appearance.jsx index 0425981b..2755cce9 100644 --- a/src-ui/app/config_page/setting_section/setting_box/appearance/Appearance.jsx +++ b/src-ui/app/config_page/setting_section/setting_box/appearance/Appearance.jsx @@ -91,7 +91,7 @@ const UiScalingContainer = () => { }; -const MessageLogUiScalingContainer = () => { +export const MessageLogUiScalingContainer = () => { const { t } = useTranslation(); const { currentMessageLogUiScaling, setMessageLogUiScaling } = useMessageLogUiScaling(); const [ui_message_log_ui_scaling, setUiMessageLogUiScaling] = useState(currentMessageLogUiScaling.data); diff --git a/src-ui/app/config_page/setting_section/setting_box/index.js b/src-ui/app/config_page/setting_section/setting_box/index.js index 5c19a095..10521c96 100644 --- a/src-ui/app/config_page/setting_section/setting_box/index.js +++ b/src-ui/app/config_page/setting_section/setting_box/index.js @@ -1,5 +1,5 @@ export { Device } from "./device/Device"; -export { Appearance } from "./appearance/Appearance"; +export { Appearance, MessageLogUiScalingContainer } from "./appearance/Appearance"; export { Translation } from "./translation/Translation"; export { Transcription } from "./transcription/Transcription"; export { Others, VrcMicMuteSyncContainer } from "./others/Others"; diff --git a/src-ui/app/main_page/main_section/message_container/MessageContainer.jsx b/src-ui/app/main_page/main_section/message_container/MessageContainer.jsx index 492afc8a..cad18079 100644 --- a/src-ui/app/main_page/main_section/message_container/MessageContainer.jsx +++ b/src-ui/app/main_page/main_section/message_container/MessageContainer.jsx @@ -3,15 +3,19 @@ import { useRef, useEffect, useState } from "react"; import styles from "./MessageContainer.module.scss"; import { appWindow } from "@tauri-apps/api/window"; import { LogBox } from "./log_box/LogBox"; +import { MessageLogSettingsContainer } from "./message_log_settings_container/MessageLogSettingsContainer"; import { MessageInputBox } from "./message_input_box/MessageInputBox"; import { useMessageInputBoxRatio } from "@logics_main"; import { useUiScaling } from "@logics_configs"; +import { useStore_IsAppliedInitMessageBoxHeight } from "@store"; export const MessageContainer = () => { const { currentMessageInputBoxRatio, asyncSetMessageInputBoxRatio } = useMessageInputBoxRatio(); const { currentUiScaling } = useUiScaling(); + const [is_hovered, setIsHovered] = useState(false); const [message_box_height_in_rem, setMessageBoxHeightInRem] = useState(10); const FONT_SIZE_STANDARD = 10 * currentUiScaling.data / 100; // 10px = 1rem + const { currentIsAppliedInitMessageBoxHeight, updateIsAppliedInitMessageBoxHeight } = useStore_IsAppliedInitMessageBoxHeight(); const container_ref = useRef(null); const log_box_ref = useRef(null); @@ -22,8 +26,13 @@ export const MessageContainer = () => { if (minimized === true) return; // don't save while the window is minimized. setMessageBoxHeightInRem(data); }; - const calculateMessageBoxRatioAndHeight = () => { + if (!currentIsAppliedInitMessageBoxHeight.data) { + asyncSetMessageInputBoxRatio(currentMessageInputBoxRatio.data); + asyncSetMessageBoxHeightInRem(convertRatioToRem(currentMessageInputBoxRatio.data)); + return; + } + 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); @@ -33,9 +42,7 @@ export const MessageContainer = () => { const message_box_ratio = (message_box_height / total_height) * 100; asyncSetMessageInputBoxRatio(message_box_ratio); - - const height_in_rem = convertRatioToRem(message_box_ratio); - asyncSetMessageBoxHeightInRem(height_in_rem); + asyncSetMessageBoxHeightInRem(convertRatioToRem(message_box_ratio)); } }; @@ -64,28 +71,34 @@ export const MessageContainer = () => { return ((ratio / 100) * total_height / FONT_SIZE_STANDARD); }; + useEffect(() => { + let resizeTimeout; - // Tauriのwindow resizeイベントをリッスン - useEffect(() => { - let resizeTimeout; + const unlisten = appWindow.onResized(() => { + clearTimeout(resizeTimeout); + resizeTimeout = setTimeout(() => { + calculateMessageBoxRatioAndHeight(); + }, 200); + }); - // イベントのリスナーを設定 - const unlisten = appWindow.onResized(() => { - clearTimeout(resizeTimeout); - resizeTimeout = setTimeout(() => { - calculateMessageBoxRatioAndHeight(); // リサイズが終了した後に実行 - }, 200); // ドラッグが終了したと見なすまでの遅延（200ms程度） - }); + return () => { + unlisten.then((dispose) => dispose()); + }; + }, []); - return () => { - unlisten.then((dispose) => dispose()); // イベントリスナーを解除 - }; - }, []); + useEffect(() => { + updateIsAppliedInitMessageBoxHeight(true); + }, []); return (
-
+
setIsHovered(true)} + onMouseLeave={() => setIsHovered(false)} + > +
{ const { t } = useTranslation(); + const { + sendMessage, + updateMessageInputValue, + } = useMessage(); + const { currentIsVisibleResendButton } = useIsVisibleResendButton(); + const [is_hovered, setIsHovered] = useState(false); + const [is_locked, setIsLocked] = useState(false); + + const resendFunction = () => { + sendMessage(messages.original); + }; + const editFunction = () => { + updateMessageInputValue(messages.original); + }; + + + const handleMouseEnter = () => { + if (!is_locked) { + setIsHovered(true); + } + }; + + const handleMouseLeave = () => { + setIsHovered(false); + setIsLocked(false); + }; + + const lockHoverState = () => { + setIsHovered(false); + setIsLocked(true); + }; const is_translated_exist = messages.translated.length >= 1; const is_pending = status === "pending"; @@ -12,22 +46,36 @@ export const MessageContainer = ({ messages, status, category, created_at }) => const message_type_class_name = clsx({ [styles.sent_message]: is_sent_message, + [styles.is_shown_resend_button]: currentIsVisibleResendButton.data, [styles.received_message]: !is_sent_message, }); return ( -
-
-

{created_at}

-

{category_text}

- {is_sent_message && is_pending && } -
-
- {is_translated_exist - ? - :

{messages.original}

- } +
+
+
+

{created_at}

+

{category_text}

+ {is_sent_message && is_pending && } +
+
+ {is_translated_exist + ? + :

{messages.original}

+ } +
+ {currentIsVisibleResendButton.data && is_sent_message && is_hovered ? ( + + ) : null}
); }; diff --git a/src-ui/app/main_page/main_section/message_container/log_box/message_container/MessageContainer.module.scss b/src-ui/app/main_page/main_section/message_container/log_box/message_container/MessageContainer.module.scss index 6ac8ecee..90a266cb 100644 --- a/src-ui/app/main_page/main_section/message_container/log_box/message_container/MessageContainer.module.scss +++ b/src-ui/app/main_page/main_section/message_container/log_box/message_container/MessageContainer.module.scss @@ -1,12 +1,26 @@ @import "@scss_mixins"; +// ******************* ******************* +// ******************* Express in "em" not "rem" ******************* +// ******************* ******************* .container { - margin-bottom: 1em; + width: 100%; + display: flex; + user-select: text; + gap: 0.6rem; + &.sent_message.is_shown_resend_button:hover { + background-color: var(--dark_950_color); + } +} + +.message_wrapper { + display: flex; width: 100%; flex-direction: column; - display: flex; justify-content: center; + align-items: end; user-select: text; + padding: 0.6em 0; &.sent_message { align-items: end; } diff --git a/src-ui/app/main_page/main_section/message_container/log_box/message_container/message_sub_menu_container/MessageSubMenuContainer.jsx b/src-ui/app/main_page/main_section/message_container/log_box/message_container/message_sub_menu_container/MessageSubMenuContainer.jsx new file mode 100644 index 00000000..3b9fe829 --- /dev/null +++ b/src-ui/app/main_page/main_section/message_container/log_box/message_container/message_sub_menu_container/MessageSubMenuContainer.jsx @@ -0,0 +1,71 @@ +import React, { useState, useRef } from "react"; +import Tooltip, { tooltipClasses } from '@mui/material/Tooltip'; +import styles from "./MessageSubMenuContainer.module.scss"; +import SendMessageSvg from "@images/send_message.svg?react"; +import RefreshSvg from "@images/refresh_2.svg?react"; + +export const MessageSubMenuContainer = (props) => { + const [is_holding, setIsHolding] = useState(false); + const progressRef = useRef(null); + const holdTimeout = useRef(null); + + const startHold = () => { + setIsHolding(true); + if (progressRef.current) { + progressRef.current.style.transition = "width 500ms linear"; + progressRef.current.style.width = "100%"; + } + holdTimeout.current = setTimeout(() => { + props.resendFunction(); + props.setIsHovered(false); + }, 500); + }; + + const cancelHold = () => { + setIsHolding(false); + if (progressRef.current) { + progressRef.current.style.transition = "none"; + progressRef.current.style.width = "0%"; + } + clearTimeout(holdTimeout.current); + }; + + const onClickFunction = () => { + props.editFunction(); + + }; + + const offset = { + popper: { + sx: { + [`&.${tooltipClasses.popper}[data-popper-placement*="top"] .${tooltipClasses.tooltip}`]: { marginBottom: "0.2em" }, + } + } + }; + + return ( +
+ } + placement="top" + slotProps={offset} + > + + +
+ ); +}; + +const Title_p = () => { + return

Press and hold to send

; +}; diff --git a/src-ui/app/main_page/main_section/message_container/log_box/message_container/message_sub_menu_container/MessageSubMenuContainer.module.scss b/src-ui/app/main_page/main_section/message_container/log_box/message_container/message_sub_menu_container/MessageSubMenuContainer.module.scss new file mode 100644 index 00000000..30b436b1 --- /dev/null +++ b/src-ui/app/main_page/main_section/message_container/log_box/message_container/message_sub_menu_container/MessageSubMenuContainer.module.scss @@ -0,0 +1,45 @@ +// ******************* ******************* +// ******************* Express in "em" not "rem" ******************* +// ******************* ******************* +.container { +} +.resend_button { + background-color: var(--dark_825_color); + position: relative; + height: 100%; + width: 3.8em; +} + +.send_message_svg { + position: absolute; + top: 58%; + left: 50%; + transform: translate(-50%, -50%); + width: 2.2em; + color: var(--dark_400_color); +} +.refresh_svg { + position: absolute; + top: 36%; + left: 42%; + transform: translate(-50%, -50%); + width: 1.8em; + color: var(--sent_400_color); + filter: drop-shadow(0.2em 0.2em 0 var(--dark_825_color)); +} + +.tooltip_title { + font-size: 1.2rem; + color: var(--dark_basic_text_color); +} + +.hold_progress_bar { + position: absolute; + top: 10%; + left: 50%; + transform: translate(-50%, -50%); + width: 0%; + height: 0.4em; + background-color: var(--sent_400_color); + transition: none; +} \ No newline at end of file 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..80c5cc83 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,42 +1,83 @@ -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 [message_history, setMessageHistory] = useState([]); + const [history_index, setHistoryIndex] = useState(-1); + const { + sendMessage, + currentMessageLogs, + currentMessageInputValue, + updateMessageInputValue, + } = 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); - if (currentEnableAutoClearMessageInputBox.data) setInputValue(""); + if (!currentMessageInputValue.data.trim()) return updateMessageInputValue(""); + + sendMessage(currentMessageInputValue.data); + + if (currentEnableAutoClearMessageInputBox.data) updateMessageInputValue(""); setTimeout(() => { scrollToBottom(store.log_box_ref); }, 10); + setHistoryIndex(-1); }; const onChangeFunction = (e) => { - setInputValue(e.currentTarget.value); + updateMessageInputValue(e.currentTarget.value); }; 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); + updateMessageInputValue(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 +87,18 @@ export const MessageInputBox = () => { className={styles.message_box_input_area} onChange={onChangeFunction} placeholder="Input Textfield" - value={inputValue} + value={currentMessageInputValue.data} onKeyDown={onKeyDownFunction} />
- { currentSendMessageButtonType.data !== "hide" && } + {currentSendMessageButtonType.data !== "hide" && ( + + )}
); }; - -const SendMessageButton = ({onSubmitFunction}) => { +const SendMessageButton = ({ onSubmitFunction }) => { return ( diff --git a/src-ui/app/modal_controller/ModalController.jsx b/src-ui/app/modal_controller/ModalController.jsx index 762f9fb6..24009a74 100644 --- a/src-ui/app/modal_controller/ModalController.jsx +++ b/src-ui/app/modal_controller/ModalController.jsx @@ -1,6 +1,7 @@ import styles from "./ModalController.module.scss"; import { useStore_OpenedQuickSetting } from "@store"; import { Vr, VrcMicMuteSyncContainer } from "@setting_box"; +import { UpdateModal } from "./update_modal/UpdateModal"; export const ModalController = () => { const { currentOpenedQuickSetting, updateOpenedQuickSetting } = useStore_OpenedQuickSetting(); if (currentOpenedQuickSetting.data === "") return null; @@ -22,6 +23,8 @@ const QuickSettingsController = () => { return ; case "vrc_mic_mute_sync": return ; + case "update_software": + return ; default: return null; } diff --git a/src-ui/app/modal_controller/update_modal/UpdateModal.jsx b/src-ui/app/modal_controller/update_modal/UpdateModal.jsx new file mode 100644 index 00000000..e158a65f --- /dev/null +++ b/src-ui/app/modal_controller/update_modal/UpdateModal.jsx @@ -0,0 +1,20 @@ +import styles from "./UpdateModal.module.scss"; +import { useTranslation } from "react-i18next"; +import { useStore_OpenedQuickSetting } from "@store"; +import { useUpdateSoftware } from "@logics_common"; + +export const UpdateModal = () => { + const { t } = useTranslation(); + const { updateOpenedQuickSetting } = useStore_OpenedQuickSetting(); + const { updateSoftware } = useUpdateSoftware(); + + return ( +
+

{t("main_page.confirmation_message.update_software")}

+
+ + +
+
+ ); +}; \ No newline at end of file diff --git a/src-ui/app/modal_controller/update_modal/UpdateModal.module.scss b/src-ui/app/modal_controller/update_modal/UpdateModal.module.scss new file mode 100644 index 00000000..99d69293 --- /dev/null +++ b/src-ui/app/modal_controller/update_modal/UpdateModal.module.scss @@ -0,0 +1,55 @@ +.container { + width: 100%; + height: 100%; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + gap: 2.4rem; +} + +.label { + font-size: 2rem; + max-width: 48rem; + text-align: center; + color: var(--dark_basic_text_color); +} +.button_wrapper { + display: flex; + width: 100%; + max-width: 48rem; + justify-content: space-between; +} +.deny_button, .accept_button { + font-size: 1.6rem; + padding: 1rem; + min-width: 10rem; + flex: 1; + max-width: 20rem; + text-align: center; + border-radius: 0.4rem; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + color: var(--dark_basic_text_color); +} + +.accept_button { + background-color: var(--primary_550_color); + &:hover { + background-color: var(--primary_450_color); + } + &:active { + background-color: var(--primary_600_color); + } +} + +.deny_button { + background-color: var(--dark_750_color); + &:hover { + background-color: var(--dark_700_color); + } + &:active { + background-color: var(--dark_800_color); + } +} diff --git a/src-ui/assets/refresh_2.svg b/src-ui/assets/refresh_2.svg new file mode 100644 index 00000000..e6fb5367 --- /dev/null +++ b/src-ui/assets/refresh_2.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src-ui/common_components/checkbox/Checkbox.jsx b/src-ui/common_components/checkbox/Checkbox.jsx new file mode 100644 index 00000000..ac291f65 --- /dev/null +++ b/src-ui/common_components/checkbox/Checkbox.jsx @@ -0,0 +1,49 @@ +import styles from "./Checkbox.module.scss"; + +export const Checkbox = ({ + checkboxId, + variable, + toggleFunction, + state = "idle", + size = "2.8rem", + color = "var(--primary_600_color)", + borderWidth = "0.2rem", + padding = "2rem", +}) => { + + return ( +
+ +
+ ); +}; diff --git a/src-ui/common_components/checkbox/Checkbox.module.scss b/src-ui/common_components/checkbox/Checkbox.module.scss new file mode 100644 index 00000000..4b536841 --- /dev/null +++ b/src-ui/common_components/checkbox/Checkbox.module.scss @@ -0,0 +1,60 @@ +@import "@scss_mixins"; + +.checkbox_container { + height: 100%; + display: flex; + justify-content: end; + align-items: center; +} + +.checkbox_wrapper { + display: inline-block; + cursor: pointer; + padding: var(--checkbox-padding, 2rem); + position: relative; + + &:hover { + & .cbx { + border: var(--checkbox-color, var(--primary_600_color)) solid var(--checkbox-border-width, 0.2rem); + } + } +} + +.checkbox_wrapper .cbx { + display: block; + width: var(--checkbox-size, 2.8rem); + height: var(--checkbox-size, 2.8rem); + border-radius: 0.4rem; + border: var(--dark_700_color) solid var(--checkbox-border-width, 0.2rem); + transition: all 0.15s ease; + padding: calc(var(--checkbox-size, 2.8rem) / 7); +} + +.checkbox_wrapper .cbx svg { + fill: none; + stroke-linecap: round; + stroke-linejoin: round; + stroke: var(--dark_basic_text_color); + stroke-width: calc(var(--checkbox-border-width, 0.2rem) / 2); + stroke-dasharray: 1.7rem; + stroke-dashoffset: 1.7rem; +} + +.checkbox_wrapper input[type="checkbox"] { + display: none; + visibility: hidden; +} + +.checkbox_wrapper input[type="checkbox"]:checked + .cbx { + background-color: var(--checkbox-color, var(--primary_600_color)); + border: none; +} + +.checkbox_wrapper input[type="checkbox"]:checked + .cbx svg { + stroke-dashoffset: 0; + transition: all 0.15s ease; +} + +.loader { + @include loader(2rem, 0.2rem, right, -2rem); +} diff --git a/src-ui/common_components/index.js b/src-ui/common_components/index.js new file mode 100644 index 00000000..244dff53 --- /dev/null +++ b/src-ui/common_components/index.js @@ -0,0 +1 @@ +export { Checkbox } from "./checkbox/Checkbox"; \ No newline at end of file diff --git a/src-ui/logics/common/index.js b/src-ui/logics/common/index.js index de903104..692b65df 100644 --- a/src-ui/logics/common/index.js +++ b/src-ui/logics/common/index.js @@ -5,4 +5,5 @@ export { useIsOpenedConfigPage } from "./useIsOpenedConfigPage"; export { useIsSoftwareUpdateAvailable } from "./useIsSoftwareUpdateAvailable"; export { useOpenFolder } from "./useOpenFolder"; export { useMessage } from "./useMessage"; +export { useUpdateSoftware } from "./useUpdateSoftware"; export { useVolume } from "./useVolume"; \ No newline at end of file diff --git a/src-ui/logics/common/useMessage.js b/src-ui/logics/common/useMessage.js index 944c40b7..a951da58 100644 --- a/src-ui/logics/common/useMessage.js +++ b/src-ui/logics/common/useMessage.js @@ -1,11 +1,13 @@ import { useStore_MessageLogs, + useStore_MessageInputValue, } from "@store"; import { useStdoutToPython } from "@logics/useStdoutToPython"; export const useMessage = () => { const { currentMessageLogs, addMessageLogs, updateMessageLogs } = useStore_MessageLogs(); + const { currentMessageInputValue, updateMessageInputValue } = useStore_MessageInputValue(); const { asyncStdoutToPython } = useStdoutToPython(); const sendMessage = (message) => { @@ -46,6 +48,9 @@ export const useMessage = () => { updateSentMessageLogById, addSentMessageLog, addReceivedMessageLog, + + currentMessageInputValue, + updateMessageInputValue, }; }; diff --git a/src-ui/logics/common/useUpdateSoftware.js b/src-ui/logics/common/useUpdateSoftware.js new file mode 100644 index 00000000..c033b878 --- /dev/null +++ b/src-ui/logics/common/useUpdateSoftware.js @@ -0,0 +1,12 @@ +import { useStdoutToPython } from "@logics/useStdoutToPython"; + +export const useUpdateSoftware = () => { + const { asyncStdoutToPython } = useStdoutToPython(); + const updateSoftware = () => { + asyncStdoutToPython("/run/update_software"); + }; + + return { + updateSoftware, + }; +}; \ No newline at end of file diff --git a/src-ui/logics/main/index.js b/src-ui/logics/main/index.js index a86b3484..9d142003 100644 --- a/src-ui/logics/main/index.js +++ b/src-ui/logics/main/index.js @@ -1,3 +1,4 @@ +export { useIsVisibleResendButton } from "./useIsVisibleResendButton"; export { useIsMainPageCompactMode } from "./useIsMainPageCompactMode"; export { useLanguageSettings } from "./useLanguageSettings"; export { useMainFunction } from "./useMainFunction"; diff --git a/src-ui/logics/main/useIsVisibleResendButton.js b/src-ui/logics/main/useIsVisibleResendButton.js new file mode 100644 index 00000000..c479af0b --- /dev/null +++ b/src-ui/logics/main/useIsVisibleResendButton.js @@ -0,0 +1,15 @@ +import { useStore_IsVisibleResendButton } from "@store"; + +export const useIsVisibleResendButton = () => { + const { currentIsVisibleResendButton, updateIsVisibleResendButton } = useStore_IsVisibleResendButton(); + + const toggleIsVisibleResendButton = () => { + updateIsVisibleResendButton(!currentIsVisibleResendButton.data); + }; + + return { + currentIsVisibleResendButton, + toggleIsVisibleResendButton, + updateIsVisibleResendButton, + }; +}; \ No newline at end of file diff --git a/src-ui/store.js b/src-ui/store.js index 4a426d0c..7ddf8418 100644 --- a/src-ui/store.js +++ b/src-ui/store.js @@ -17,6 +17,7 @@ export const store = { backend_subprocess: null, config_page: null, log_box_ref: null, + is_applied_init_message_box_height: false, }; const generatePropertyNames = (base_name) => ({ @@ -120,6 +121,9 @@ export const { atomInstance: Atom_TranscriptionReceiveStatus, useHook: useStore_ 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_MessageInputValue, useHook: useStore_MessageInputValue } = createAtomWithHook("", "MessageInputValue"); +export const { atomInstance: Atom_IsVisibleResendButton, useHook: useStore_IsVisibleResendButton } = createAtomWithHook(false, "IsVisibleResendButton"); +export const { atomInstance: Atom_IsAppliedInitMessageBoxHeight, useHook: useStore_IsAppliedInitMessageBoxHeight } = createAtomWithHook(false, "IsAppliedInitMessageBoxHeight"); export const { atomInstance: Atom_SelectableLanguageList, useHook: useStore_SelectableLanguageList } = createAtomWithHook([], "SelectableLanguageList"); diff --git a/vite.config.js b/vite.config.js index a2b46140..04151cd9 100644 --- a/vite.config.js +++ b/vite.config.js @@ -46,6 +46,7 @@ export default defineConfig(async () => ({ "@logics_configs": path.resolve(__dirname, "src-ui/logics/configs"), "@setting_box": path.resolve(__dirname, "src-ui/app/config_page/setting_section/setting_box/index.js"), + "@common_components": path.resolve(__dirname, "src-ui/common_components/index.js"), }, },