[Update] Main Page: Message Logs. Add system message (Word Filter)

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 ? (

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);
+    }
 }

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) {

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,