dmed-voice-assistant 1.2.2 → 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

@@ -9,6 +9,9 @@ var _react = _interopRequireWildcard(require("react"));
 var _material = require("@mui/material");
 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; }
@@ -56,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',
@@ -73,12 +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)("");
+  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);
   };
@@ -118,34 +133,70 @@ const Recognition = _ref4 => {
   const handleLanguageChange = event => {
     setSelectedLanguage(event.target.value);
   };
-  const startRecording = () => {
-    if (recognitionRef.current) {
-      setResult([]);
-      setRecordTime(0);
-      const id = setInterval(async () => {
-        setRecordTime(prevCount => prevCount + 1);
-      }, 1000);
-      setIntervalId(id);
-      recognitionRef.current.start();
+  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
+          });
+          const audioContext = new (window.AudioContext || window.webkitAudioContext)();
+          const newRecorder = new _recorderJs.default(audioContext);
+          await newRecorder.init(stream);
+          mediaRecorderRef.current = newRecorder;
+        }
+        mediaRecorderRef.current.start();
+        setResult([]);
+        setRecordTime(0);
+        const id = setInterval(async () => {
+          setRecordTime(prevCount => prevCount + 1);
+        }, 1000);
+        setIntervalId(id);
+        recognitionRef.current.start();
+      }
+    } catch (error) {
+      console.error("Error starting recording:", error);
     }
   };
   const stopRecording = () => {
-    if (recognitionRef.current) {
+    if (recognitionRef.current && mediaRecorderRef.current) {
       recognitionRef.current.stop();
       clearInterval(intervalId);
-      let temp = [...historyList];
-      const newData = {
-        result,
-        date: new Date()
-      };
-      temp.push(newData);
-      setHistoryList(temp);
-      if (onNewRecognitionEvent) {
-        onNewRecognitionEvent(newData);
-      }
-      if (onRecognitionDataChange) {
-        onRecognitionDataChange(temp);
-      }
+      mediaRecorderRef.current.stop().then(async _ref5 => {
+        let {
+          blob
+        } = _ref5;
+        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);
+          }
+        }
+      });
     }
   };
   const startSpeechRecognition = () => {
@@ -154,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 => {
@@ -183,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 {
@@ -205,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: {
@@ -395,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);
@@ -935,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/dist/recorder.js

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.getVoiceFileName = exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _material = require("@mui/material");
 var _Grid = _interopRequireDefault(require("@mui/material/Grid2"));
@@ -15,7 +15,6 @@ var _recorderJs = _interopRequireDefault(require("recorder-js"));
 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; }
-const apiUrl = 'https://api.origintechx.dev/qa/v1/diagnose/voice';
 const getVoiceFileName = date => {
   const year = date.getFullYear(); // Get the full year (YYYY)
   const month = String(date.getMonth() + 1).padStart(2, '0'); // Get the month (MM), pad with leading zero if necessary
@@ -23,6 +22,7 @@ const getVoiceFileName = date => {
 
   return `Voice${year}${month}${day}.wav`;
 };
+exports.getVoiceFileName = getVoiceFileName;
 const getTimeValues = totalSeconds => {
   const hours = Math.floor(totalSeconds / 3600); // Get hours
   let minutes = Math.floor(totalSeconds % 3600 / 60); // Get minutes
@@ -63,7 +63,6 @@ const RecorderBox = _ref => {
   const [isRunning, setIsRunning] = (0, _react.useState)(false);
   const [intervalId, setIntervalId] = (0, _react.useState)(null);
   const [audioBlob, setAudioBlob] = (0, _react.useState)(null);
-  const [audioUrl, setAudioUrl] = (0, _react.useState)('');
   const [audioSize, setAudioSize] = (0, _react.useState)(0);
   const mediaRecorderRef = (0, _react.useRef)(null);
   const handleVoiceChange = event => {
@@ -104,8 +103,6 @@ const RecorderBox = _ref => {
           blob
         } = _ref2;
         setAudioBlob(blob);
-        setAudioUrl(URL.createObjectURL(blob));
-        console.log(blob);
         let temp = [...recordList];
         const newVoice = {
           audioURL: URL.createObjectURL(blob),

package/package.json

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