From 92cb5801da5cbf886f86213ede4ce34d1881d093 Mon Sep 17 00:00:00 2001
From: Sakamoto Shiina <68018796+ShiinaSakamoto@users.noreply.github.com>
Date: Thu, 26 Dec 2024 15:35:41 +0900
Subject: [PATCH] [Update] Main Page: Message Logs. Add system message (Word
 Filter)

---
 src-python/webui_controller.py                |  2 +-
 .../message_container/MessageContainer.jsx    | 26 ++++++++++++-------
 .../MessageContainer.module.scss              | 24 +++++++++++++++++
 src-ui/logics/common/useMessage.js            | 17 ++++++++++--
 src-ui/logics/useReceiveRoutes.js             |  3 +++
 5 files changed, 60 insertions(+), 12 deletions(-)

diff --git a/src-python/webui_controller.py b/src-python/webui_controller.py
index a3aa90f3..b8b41e11 100644
--- a/src-python/webui_controller.py
+++ b/src-python/webui_controller.py
@@ -203,7 +203,7 @@ class Controller:
                 self.run(
                     200,
                     self.run_mapping["word_filter"],
-                    {"message":f"Detected by word filter:{message}"},
+                    {"message":f"Detected by word filter: {message}"},
                 )
                 return
             elif model.detectRepeatSendMessage(message):
diff --git a/src-ui/app/main_page/main_section/message_container/log_box/message_container/MessageContainer.jsx b/src-ui/app/main_page/main_section/message_container/log_box/message_container/MessageContainer.jsx
index be4e25d6..1298c8da 100644
--- a/src-ui/app/main_page/main_section/message_container/log_box/message_container/MessageContainer.jsx
+++ b/src-ui/app/main_page/main_section/message_container/log_box/message_container/MessageContainer.jsx
@@ -5,6 +5,7 @@ import styles from "./MessageContainer.module.scss";
 import { MessageSubMenuContainer } from "./message_sub_menu_container/MessageSubMenuContainer";
 import { useMessage } from "@logics_common";
 import { useIsVisibleResendButton } from "@logics_main";
+
 export const MessageContainer = ({ messages, status, category, created_at }) => {
     const { t } = useTranslation();
     const {
@@ -22,7 +23,6 @@ export const MessageContainer = ({ messages, status, category, created_at }) =>
         updateMessageInputValue(messages.original);
     };
 
-
     const handleMouseEnter = () => {
         if (!is_locked) {
             setIsHovered(true);
@@ -39,15 +39,20 @@ export const MessageContainer = ({ messages, status, category, created_at }) =>
         setIsLocked(true);
     };
 
-    const is_translated_exist = messages.translated.length >= 1;
+    const is_translated_exist = messages.translated?.length >= 1;
     const is_pending = status === "pending";
     const is_sent_message = category === "sent";
-    const category_text = is_sent_message ? t("main_page.message_log.sent") : t("main_page.message_log.received");
+    const is_system_message = category === "system";
+    const category_text = is_sent_message
+        ? t("main_page.message_log.sent")
+        : is_system_message
+        ? t("main_page.message_log.system")
+        : t("main_page.message_log.received");
 
     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,
+        [styles.received_message]: !is_sent_message && !is_system_message,
+        [styles.system_message]: is_system_message,
     });
 
     return (
@@ -63,10 +68,13 @@ export const MessageContainer = ({ messages, status, category, created_at }) =>
                     {is_sent_message && is_pending && <span className={styles.loader}></span>}
                 </div>
                 <div className={clsx(styles.message_box, message_type_class_name)}>
-                    {is_translated_exist
-                        ? <WithTranslatedMessages messages={messages} />
-                        : <p className={styles.message_main}>{messages.original}</p>
-                    }
+                    {is_system_message ? (
+                        <p className={styles.message_main_system}>{messages.message}</p>
+                    ) : is_translated_exist ? (
+                        <WithTranslatedMessages messages={messages} />
+                    ) : (
+                        <p className={styles.message_main}>{messages.original}</p>
+                    )}
                 </div>
             </div>
             {currentIsVisibleResendButton.data && is_sent_message && is_hovered ? (
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 90a266cb..966ed455 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
@@ -27,6 +27,11 @@
     &.received_message {
         align-items: start;
     }
+    &.system_message {
+        flex-direction: row;
+        align-items: center;
+        gap: 0.6rem;
+    }
 }
 
 .info_box {
@@ -84,4 +89,23 @@
     color: var(--dark_450_color);
     user-select: text;
     font-size: 1em;
+}
+
+
+.system_message {
+    justify-content: center;
+    text-align: center;
+
+    .category {
+        color: var(--primary_300_color);
+    }
+
+    .message_box {
+        align-items: center;
+    }
+
+    .message_main_system {
+        font-size: 1.2rem;
+        color: var(--dark_500_color);
+    }
 }
\ No newline at end of file
diff --git a/src-ui/logics/common/useMessage.js b/src-ui/logics/common/useMessage.js
index e04352b4..416555a6 100644
--- a/src-ui/logics/common/useMessage.js
+++ b/src-ui/logics/common/useMessage.js
@@ -30,6 +30,19 @@ export const useMessage = () => {
         });
     };
 
+    const addSystemMessageLog = (message) => {
+        const uuid = crypto.randomUUID();
+        const date = generateTimeData();
+
+        addMessageLogs({
+            id: uuid,
+            category: "system",
+            status: "system",
+            created_at: date,
+            messages: {message: message},
+        });
+    };
+
     const updateSentMessageLogById = (payload) => {
         updateMessageLogs(updateItemById(payload.id, payload.translation));
     };
@@ -52,6 +65,7 @@ export const useMessage = () => {
     return {
         currentMessageLogs,
         sendMessage,
+        addSystemMessageLog,
         updateSentMessageLogById,
         addSentMessageLog,
         addReceivedMessageLog,
@@ -67,7 +81,7 @@ export const useMessage = () => {
 const generateTimeData = () => {
     const data = new Date().toLocaleTimeString(
         "ja-JP",
-        {hour12: false, hour: "2-digit", minute: "2-digit"},
+        { hour12: false, hour: "2-digit", minute: "2-digit" },
     );
     return data;
 };
@@ -85,7 +99,6 @@ const generateMessageObject = (data, category) => {
     };
 };
 
-
 const updateItemById = (id, translated_data) => (current_items) => {
     return current_items.data.map(item => {
         if (item.id === id) {
diff --git a/src-ui/logics/useReceiveRoutes.js b/src-ui/logics/useReceiveRoutes.js
index 441ce250..d00edbed 100644
--- a/src-ui/logics/useReceiveRoutes.js
+++ b/src-ui/logics/useReceiveRoutes.js
@@ -93,6 +93,7 @@ export const useReceiveRoutes = () => {
     } = useLanguageSettings();
     const { updateSelectableLanguageList } = useSelectableLanguageList();
     const {
+        addSystemMessageLog,
         updateSentMessageLogById,
         addSentMessageLog,
         addReceivedMessageLog,
@@ -382,6 +383,8 @@ export const useReceiveRoutes = () => {
                 return updated_list;
             });
         },
+        "/run/word_filter": (payload) => addSystemMessageLog(payload.message),
+
 
         "/get/data/speaker_record_timeout": updateSpeakerRecordTimeout,
         "/set/data/speaker_record_timeout": updateSpeakerRecordTimeout,