Merge branch 'ui' into for_webui

src-ui/logics/useConfig.js

@@ -13,7 +13,7 @@ export const useConfig = () => {
 
     return {
         getSoftwareVersion: () => {
-            asyncStdoutToPython({endpoint: "/config/version"});
+            asyncStdoutToPython("/config/version");
         },
         updateSoftwareVersion: (payload) => {
             updateSoftwareVersion(payload.data);

src-ui/logics/useMainFunction.js

@@ -35,12 +35,12 @@ export const useMainFunction = () => {
     const asyncPending = () => new Promise(() => {});
     return {
         toggleTranslation: () => {
-            if (currentTranslationStatus.data) {
-                asyncStdoutToPython({endpoint: "/controller/callback_disable_translation"});
-            } else {
-                asyncStdoutToPython({endpoint: "/controller/callback_enable_translation"});
-            }
             asyncUpdateTranslationStatus(asyncPending);
+            if (currentTranslationStatus.data) {
+                asyncStdoutToPython("/controller/callback_disable_translation");
+            } else {
+                asyncStdoutToPython("/controller/callback_enable_translation");
+            }
         },
         currentTranslationStatus: currentTranslationStatus,
         updateTranslationStatus: (payload) => {
@@ -48,12 +48,12 @@ export const useMainFunction = () => {
         },
 
         toggleTranscriptionSend: () => {
-            if (currentTranscriptionSendStatus.data) {
-                asyncStdoutToPython({endpoint: "/controller/callback_disable_transcription_send"});
-            } else {
-                asyncStdoutToPython({endpoint: "/controller/callback_enable_transcription_send"});
-            }
             asyncUpdateTranscriptionSendStatus(asyncPending);
+            if (currentTranscriptionSendStatus.data) {
+                asyncStdoutToPython("/controller/callback_disable_transcription_send");
+            } else {
+                asyncStdoutToPython("/controller/callback_enable_transcription_send");
+            }
         },
         currentTranscriptionSendStatus: currentTranscriptionSendStatus,
         updateTranscriptionSendStatus: (payload) => {
@@ -61,12 +61,12 @@ export const useMainFunction = () => {
         },
 
         toggleTranscriptionReceive: () => {
-            if (currentTranscriptionReceiveStatus.data) {
-                asyncStdoutToPython({endpoint: "/controller/callback_disable_transcription_receive"});
-            } else {
-                asyncStdoutToPython({endpoint: "/controller/callback_enable_transcription_receive"});
-            }
             asyncUpdateTranscriptionReceiveStatus(asyncPending);
+            if (currentTranscriptionReceiveStatus.data) {
+                asyncStdoutToPython("/controller/callback_disable_transcription_receive");
+            } else {
+                asyncStdoutToPython("/controller/callback_enable_transcription_receive");
+            }
         },
         currentTranscriptionReceiveStatus: currentTranscriptionReceiveStatus,
         updateTranscriptionReceiveStatus: (payload) => {

src-ui/logics/useMessage.js

@@ -12,16 +12,12 @@ export const useMessage = () => {
         sendMessage: (message) => {
             asyncStdoutToPython({id: "send_message", data: message});
             const uuid = crypto.randomUUID();
-            const date = new Date().toLocaleTimeString(
-                "ja-JP",
-                {hour12: false, hour: "2-digit", minute:"2-digit"},
-            );
 
             addMessageLogsStatus({
                 id: uuid,
                 category: "sent",
                 status: "pending",
-                created_at: date,
+                created_at: generateTimeData(),
                 messages: {
                     original: message,
                     translated: [
@@ -43,13 +39,37 @@ export const useMessage = () => {
             }, 3000);
         },
         currentMessageLogsStatus: currentMessageLogsStatus,
+
+        addSentMessageLog: (payload) => {
+            const data = payload.data;
+            const message_object = generateMessageObject(data, "sent");
+            addMessageLogsStatus(message_object);
+        },
+        addReceivedMessageLog: (payload) => {
+            const data = payload.data;
+            const message_object = generateMessageObject(data, "received");
+            addMessageLogsStatus(message_object);
+        },
     };
 };
 
-// const asyncTestFunction = (...args) => {
-//     return new Promise((resolve) => {
-//         setTimeout(() => {
-//             resolve(...args);
-//         }, 3000);
-//     });
-// };
+const generateTimeData = () => {
+    const data = new Date().toLocaleTimeString(
+        "ja-JP",
+        {hour12: false, hour: "2-digit", minute: "2-digit"},
+    );
+    return data;
+};
+
+const generateMessageObject = (data, category) => {
+    return {
+        id: crypto.randomUUID(),
+        created_at: generateTimeData(),
+        category: category,
+        status: "ok",
+        messages: {
+            original: data.message,
+            translated: [],
+        },
+    };
+};

src-ui/logics/useReceiveRoutes.js

@@ -1,5 +1,6 @@
 import { useMainFunction } from "./useMainFunction";
 import { useConfig } from "./useConfig";
+import { useMessage } from "./useMessage";
 
 export const useReceiveRoutes = () => {
     const {
@@ -8,6 +9,8 @@ export const useReceiveRoutes = () => {
         updateTranscriptionReceiveStatus,
     } = useMainFunction();
 
+    const { addSentMessageLog, addReceivedMessageLog } = useMessage();
+
     const {
         updateSoftwareVersion,
     } = useConfig();
@@ -21,6 +24,9 @@ export const useReceiveRoutes = () => {
         "/controller/callback_disable_transcription_receive": updateTranscriptionReceiveStatus,
 
         "/config/version": updateSoftwareVersion,
+
+        "/action/transcription_send_mic_message": addSentMessageLog,
+        "/action/transcription_receive_speaker_message": addReceivedMessageLog
     };
 
     const receiveRoutes = (parsed_data) => {

src-ui/logics/useStdoutToPython.js

@@ -1,11 +1,14 @@
 import { store } from "@store";
 
 export const useStdoutToPython = () => {
-    const asyncStdoutToPython = async (value) => {
+    const asyncStdoutToPython = async (path, value) => {
+        let send_object = { endpoint: path };
+        if (value) send_object.data = value;
+
         // send to python
         const backend_subprocess = store.backend_subprocess;
         if (backend_subprocess) {
-            await backend_subprocess.write(JSON.stringify(value) + "\n").then(() => {
+            await backend_subprocess.write(JSON.stringify(send_object) + "\n").then(() => {
             }).catch((err) => {
                 console.log(err);
             });