dmed-voice-assistant 1.2.3 → 1.2.4

package/dist/components/HistoryDropdownItem.js

@@ -0,0 +1,47 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _material = require("@mui/material");
+var _jsxRuntime = require("react/jsx-runtime");
+const HistoryDropdownItem = _ref => {
+  let {
+    data,
+    setDate,
+    handlePopoverClose
+  } = _ref;
+  const handleClick = () => {
+    setDate(data.date);
+    handlePopoverClose();
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
+    className: "flex items-center justify-between rounded-[5px] px-[10px] py-[3px] cursor-pointer",
+    sx: {
+      '&:hover': {
+        background: '#F6F6F6'
+      }
+    },
+    onClick: handleClick,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
+      className: "flex items-center space-x-1",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
+        className: "!font-bold !text-[14px]",
+        color: "#494A48",
+        children: data.count
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
+        className: "!font-400 !text-[12px]",
+        color: "#494A48",
+        children: "words"
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
+      className: "!font-400 !text-[14px]",
+      color: "#494A48",
+      children: data.date
+    })]
+  });
+};
+var _default = exports.default = HistoryDropdownItem;

package/dist/components/RecognitionListItem.js

@@ -20,7 +20,7 @@ const RecognitionListItem = _ref => {
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
           className: "!font-bold !text-[14px]",
           color: "#494A48",
-          children: data.result.length
+          children: data.voice_words?.split(",").length
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
           className: "!font-400 !text-[12px]",
           color: "#494A48",
@@ -29,7 +29,7 @@ const RecognitionListItem = _ref => {
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
         className: "px-[4px] !font-400 !text-[14px]",
         color: "#494A48",
-        children: data.date.toLocaleTimeString('en-US', {
+        children: new Date(data.created_at * 1000).toLocaleTimeString('en-US', {
           hour: '2-digit',
           minute: '2-digit',
           hour12: true
@@ -41,7 +41,7 @@ const RecognitionListItem = _ref => {
         maxWidth: "387px",
         overflow: "hidden"
       },
-      children: data.result.map((item, index) => {
+      children: data.voice_words?.split(",").map((item, index) => {
         return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
           className: "flex items-center",
           children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
@@ -51,7 +51,7 @@ const RecognitionListItem = _ref => {
               fontFamily: "Space Grotesk !important"
             },
             children: item
-          }), index !== data.result.length - 1 && /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
+          }), index !== data.voice_words?.split(",").length - 1 && /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
             className: "!font-400 !text-[16px]",
             color: "#494A4880",
             sx: {

package/dist/recognition.js

@@ -11,6 +11,7 @@ var _svgs = require("./components/svgs");
 var _RecognitionListItem = _interopRequireDefault(require("./components/RecognitionListItem"));
 var _recorderJs = _interopRequireDefault(require("recorder-js"));
 var _recorder = require("./recorder");
+var _HistoryDropdownItem = _interopRequireDefault(require("./components/HistoryDropdownItem"));
 var _jsxRuntime = require("react/jsx-runtime");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
@@ -58,6 +59,14 @@ const StyledTypography = (0, _material.styled)(_material.Typography)(_ref3 => {
     lineHeight: '15.59px'
   };
 });
+const formatDate = date => {
+  const day = date.getDate().toString().padStart(2, '0');
+  const month = date.toLocaleString('en-US', {
+    month: 'short'
+  });
+  const year = date.getFullYear();
+  return `${day}.${month}.${year}`;
+};
 const Recognition = _ref4 => {
   let {
     mode = 'recorder',
@@ -75,13 +84,16 @@ const Recognition = _ref4 => {
   const [selectedVoice, setSelectedVoice] = (0, _react.useState)("");
   const [voiceList, setVoiceList] = (0, _react.useState)([]);
   const languageList = ['Auto-Detect', 'English', 'Chinese (Simplified)'];
-  const [selectedLanguage, setSelectedLanguage] = (0, _react.useState)("en-US");
+  const [selectedLanguage, setSelectedLanguage] = (0, _react.useState)(0);
   const recognitionRef = (0, _react.useRef)(null);
   const mediaRecorderRef = (0, _react.useRef)(null);
   const [result, setResult] = (0, _react.useState)([]);
   const [historyList, setHistoryList] = (0, _react.useState)(recognitionHistoryList);
+  const [filterHistoryList, setFilterHistoryList] = (0, _react.useState)([]);
+  const [dropdownList, setDropdownList] = (0, _react.useState)([]);
   const [recordTime, setRecordTime] = (0, _react.useState)(0);
   const [intervalId, setIntervalId] = (0, _react.useState)(null);
+  const [selectedDate, setSelectedDate] = (0, _react.useState)(formatDate(new Date()));
   const handleClickOpen = () => {
     setOpen(true);
   };
@@ -124,6 +136,7 @@ const Recognition = _ref4 => {
   const startRecording = async () => {
     try {
       if (recognitionRef.current) {
+        recognitionRef.current.lang = selectedLanguage === 0 || selectedLanguage === 1 ? "en-US" : "zh-TW";
         if (!mediaRecorderRef.current) {
           const stream = await navigator.mediaDevices.getUserMedia({
             audio: true
@@ -154,22 +167,34 @@ const Recognition = _ref4 => {
         let {
           blob
         } = _ref5;
-        const audioBlob = blob;
-        let temp = [...historyList];
-        const newData = {
-          fileName: (0, _recorder.getVoiceFileName)(new Date()),
-          audioBlob,
-          result,
-          lang: selectedLanguage,
-          date: new Date()
-        };
-        temp.push(newData);
-        setHistoryList(temp);
-        if (onNewRecognitionEvent) {
-          onNewRecognitionEvent(newData);
-        }
-        if (onRecognitionDataChange) {
-          onRecognitionDataChange(temp);
+        if (result.length > 0) {
+          let temp = [...historyList];
+          const newData = {
+            created_at: Math.floor(new Date().getTime() / 1000),
+            file_name: (0, _recorder.getVoiceFileName)(new Date()),
+            link_id: "",
+            union_id: "",
+            voice_duration: "",
+            voice_file: URL.createObjectURL(blob),
+            voice_id: "",
+            voice_size: "",
+            voice_words: result.join(',')
+          };
+          temp.push(newData);
+          setHistoryList(temp);
+          setSelectedDate(formatDate(new Date()));
+          if (onNewRecognitionEvent) {
+            onNewRecognitionEvent({
+              fileName: (0, _recorder.getVoiceFileName)(new Date()),
+              audioBlob: blob,
+              result,
+              lang: selectedLanguage === 0 || selectedLanguage === 1 ? "en-US" : "zh-TW",
+              date: new Date()
+            });
+          }
+          if (onRecognitionDataChange) {
+            onRecognitionDataChange(temp);
+          }
         }
       });
     }
@@ -180,9 +205,9 @@ const Recognition = _ref4 => {
       const recognition = new SpeechRecognition();
       recognition.continuous = true;
       recognition.interimResults = true;
-      recognition.lang = 'en-US';
+      recognition.lang = selectedLanguage === 0 || selectedLanguage === 1 ? "en-US" : "zh-TW";
       recognition.onstart = () => {
-        console.log('Recording started');
+        console.log('Speech recognition started');
       };
       recognition.onresult = event => {
         setResult(prevTranscript => {
@@ -209,6 +234,15 @@ const Recognition = _ref4 => {
       console.error('Speech recognition not supported');
     }
   };
+  function formatDateTimestamp(timestamp) {
+    const date = new Date(timestamp * 1000);
+    const day = date.getDate().toString().padStart(2, '0');
+    const month = date.toLocaleString('en-US', {
+      month: 'short'
+    });
+    const year = date.getFullYear();
+    return `${day}.${month}.${year}`;
+  }
   (0, _react.useEffect)(() => {
     const fetchAudioInputDevices = async () => {
       try {
@@ -231,6 +265,40 @@ const Recognition = _ref4 => {
     startSpeechRecognition();
     fetchAudioInputDevices();
   }, []);
+  (0, _react.useEffect)(() => {
+    const groupedData = historyList.reduce((acc, item) => {
+      const date = formatDateTimestamp(item.created_at);
+      if (!acc[date]) {
+        acc[date] = [];
+      }
+      acc[date].push(item);
+      return acc;
+    }, {});
+    const dropdown = Object.keys(groupedData).map(date => {
+      const totalCount = groupedData[date].reduce((sum, item) => {
+        if (item.voice_words) {
+          sum += item.voice_words.split(',').length;
+        }
+        return sum;
+      }, 0);
+      return {
+        date: date,
+        count: totalCount
+      };
+    });
+    setDropdownList(dropdown);
+  }, [historyList]);
+  (0, _react.useEffect)(() => {
+    const groupedData = historyList.reduce((acc, item) => {
+      const date = formatDateTimestamp(item.created_at);
+      if (!acc[date]) {
+        acc[date] = [];
+      }
+      acc[date].push(item);
+      return acc;
+    }, {});
+    setFilterHistoryList(groupedData[selectedDate] ? groupedData[selectedDate] : []);
+  }, [selectedDate, historyList]);
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
     className: "bg-white rounded-[5px] p-[20px] w-[440px]",
     sx: {
@@ -421,14 +489,14 @@ const Recognition = _ref4 => {
               textTransform: "none"
             },
             onClick: handlePopoverOpen,
-            children: "02.July.2024"
+            children: selectedDate
           })]
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
           className: "flex flex-col scrollableBox mt-1",
           sx: {
             maxHeight: "160px"
           },
-          children: historyList.map((history, index) => {
+          children: filterHistoryList.map((history, index) => {
             return /*#__PURE__*/(0, _jsxRuntime.jsx)(_RecognitionListItem.default, {
               data: history
             }, index);
@@ -591,13 +659,13 @@ const Recognition = _ref4 => {
               }
             },
             children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.MenuItem, {
-              value: "en-US",
+              value: 0,
               children: "Auto-Detect"
             }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.MenuItem, {
-              value: "en-US",
+              value: 1,
               children: "English"
             }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.MenuItem, {
-              value: "zh-TW",
+              value: 2,
               children: "Chinese (Simplified)"
             })]
           })]
@@ -961,47 +1029,18 @@ const Recognition = _ref4 => {
             color: "#494A48B2",
             children: "Data"
           })
-        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
-          className: "flex items-center justify-between rounded-[5px] px-[10px] py-[3px] cursor-pointer",
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Box, {
+          className: "flex flex-col scrollableBox mt-1",
           sx: {
-            '&:hover': {
-              background: '#F6F6F6'
-            }
+            maxHeight: "110px"
           },
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
-            className: "flex items-center space-x-1",
-            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
-              className: "!font-bold !text-[14px]",
-              color: "#494A48",
-              children: "7"
-            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
-              className: "!font-400 !text-[12px]",
-              color: "#494A48",
-              children: "words"
-            })]
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
-            className: "!font-400 !text-[14px]",
-            color: "#494A48",
-            children: "02.July.2024"
-          })]
-        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
-          className: "flex items-center justify-between px-[10px] py-[3px]",
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_material.Box, {
-            className: "flex items-center space-x-1",
-            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
-              className: "!font-bold !text-[14px]",
-              color: "#494A48",
-              children: "7"
-            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
-              className: "!font-400 !text-[12px]",
-              color: "#494A48",
-              children: "words"
-            })]
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_material.Typography, {
-            className: "!font-400 !text-[14px]",
-            color: "#494A48",
-            children: "02.July.2024"
-          })]
+          children: dropdownList.map((dropdown, index) => {
+            return /*#__PURE__*/(0, _jsxRuntime.jsx)(_HistoryDropdownItem.default, {
+              data: dropdown,
+              setDate: setSelectedDate,
+              handlePopoverClose: handlePopoverClose
+            }, index);
+          })
         })]
       })
     })]

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dmed-voice-assistant",
-  "version": "1.2.3",
+  "version": "1.2.4",
   "main": "dist/index.js",
   "files": [
     "dist"