@nethesis/phone-island/dist/components/TranscriptionView/TranscriptionView.js

NethVoice CTI Phone Island

"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../node_modules/tslib/tslib.es6.js"),t=require("react");require("../../node_modules/react-redux/es/index.js"),require("../../node_modules/@babel/runtime/helpers/defineProperty.js"),require("../../node_modules/@babel/runtime/helpers/objectWithoutProperties.js"),require("../../node_modules/@babel/runtime/helpers/typeof.js"),require("../../node_modules/html-parse-stringify/dist/html-parse-stringify.js"),require("../../node_modules/react-i18next/dist/es/context.js");var i=require("../../node_modules/react-i18next/dist/es/useTranslation.js");require("../../node_modules/@babel/runtime/helpers/slicedToArray.js");var r=require("../../utils/customHooks/useEventListener.js"),a=require("../../utils/genericFunctions/eventDispatch.js");require("../../store/index.js");var n=require("../../node_modules/@fortawesome/react-fontawesome/index.es.js"),s=require("../../node_modules/@fortawesome/free-solid-svg-icons/index.mjs.js"),l=require("../../node_modules/framer-motion/dist/es/components/AnimatePresence/index.mjs.js"),o=require("../../node_modules/framer-motion/dist/es/render/components/motion/proxy.mjs.js"),p=require("../../node_modules/react-redux/es/hooks/useSelector.js");function u(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var d=u(t),c={initial:{height:0,opacity:0},animate:{height:"360px",opacity:1},exit:{height:0,opacity:0},transition:{duration:.1,ease:"easeOut"}},m={borderBottomLeftRadius:"20px",borderBottomRightRadius:"20px",transformOrigin:"top",overflow:"hidden"},f=function(e){var i=e.text,r=e.isFinal,a=e.speed,n=void 0===a?50:a,s=t.useState(""),l=s[0],o=s[1];return t.useEffect((function(){if(!r){o("");var e=0,t=setInterval((function(){e<i.length?(o(i.slice(0,e+1)),e++):clearInterval(t)}),n);return function(){return clearInterval(t)}}o(i)}),[i,r,n]),d.default.createElement("div",{className:"pi-inline-flex pi-items-center pi-flex-wrap"},d.default.createElement("span",null,l))},g=t.memo((function(u){var g=u.isVisible,b=p.useSelector((function(e){return e.island})),y=b.actionsExpanded,x=b.view,v=p.useSelector((function(e){return e.currentUser})),h=p.useSelector((function(e){return e.currentCall.startTime})),_=i.useTranslation().t,k=t.useState([]),N=k[0],E=k[1],w=t.useState([]),j=w[0],q=w[1],A=t.useState(!1),F=A[0],S=A[1],I=t.useState(!1),M=I[0],T=I[1],D=t.useState(0),L=D[0],H=D[1],C=t.useRef(null),P=t.useRef(null),R=t.useRef(null),V=t.useState(!0),O=V[0],U=V[1],W=function(){R.current=null,E([]),q([]),S(!1),T(!1),H(0),U(!0)},z=function(e){var t,i,r,a;return!(!v||!e)&&((null===(r=null===(i=null===(t=v.endpoints)||void 0===t?void 0:t.mainextension)||void 0===i?void 0:i[0])||void 0===r?void 0:r.id)===e||!!(null===(a=v.endpoints)||void 0===a?void 0:a.extension)&&Object.values(v.endpoints.extension).some((function(t){return t.id===e||t.exten===e})))};t.useEffect((function(){var t=Math.max(0,N.length-100),i=N.slice(t),r=e.__spreadArray([],i,!0).sort((function(e,t){return e.timestamp-t.timestamp}));q(r)}),[N]);var B=function(t){var i,r=Number(t.timestamp)||0,a=Number.isFinite(Number(t.channel_index))?Number(t.channel_index):-1,n=Number.isFinite(Number(t.segment_start))?Number(t.segment_start):r,s=t.uniqueid&&a>=0?"".concat(t.uniqueid,"_").concat(a,"_").concat(n.toFixed(3)):"".concat(t.uniqueid,"_").concat(r),l=(i=Number(h),!Number.isFinite(i)||i<=0?null:Math.max(0,Math.floor(Date.now()/1e3)-i)),o=r;if(null!==l){if(null===R.current)R.current=l-r;else{var p=l-(r+R.current),u=Math.max(-2,Math.min(2,p));R.current+=.2*u}o=r+(R.current||0),o=Math.max(0,Math.min(l,o))}var d={id:s,timestamp:o,channelIndex:a,segmentStart:n,speaker:t.speaker_name||"Unknown",speakerNumber:t.speaker_number||"",counterpart:t.speaker_counterpart_name||"",counterpartNumber:t.speaker_counterpart_number||"",text:t.transcription||"",isFinal:t.is_final||!1};E((function(t){var i=function(e){for(var i=t.length-1;i>=0;i-=1)if(e(t[i]))return i;return-1},r=function(e){return d.channelIndex>=0&&e.channelIndex>=0?e.channelIndex===d.channelIndex:d.speakerNumber&&e.speakerNumber?e.speakerNumber===d.speakerNumber:e.speaker===d.speaker},a=t.findIndex((function(e){return e.id===s}));if(-1!==a)return t[a].isFinal&&!d.isFinal?e.__spreadArray(e.__spreadArray([],t,!0),[e.__assign(e.__assign({},d),{id:"".concat(d.id,"_").concat(Date.now())})],!1):((o=e.__spreadArray([],t,!0))[a]=d,o);if(d.isFinal){var n=i((function(e){return e.isFinal&&r(e)&&e.text.trim()===d.text.trim()&&Math.abs(e.timestamp-d.timestamp)<=1}));if(-1!==n)return(o=e.__spreadArray([],t,!0))[n]=e.__assign(e.__assign({},d),{id:t[n].id}),o;var l=i((function(e){return!e.isFinal&&r(e)}));return-1!==l?((o=e.__spreadArray([],t,!0))[l]=e.__assign(e.__assign({},d),{id:t[l].id}),o):e.__spreadArray(e.__spreadArray([],t,!0),[d],!1)}var o,p=i((function(e){return!e.isFinal&&r(e)}));return-1!==p?((o=e.__spreadArray([],t,!0))[p]=e.__assign(e.__assign({},d),{id:t[p].id}),o):e.__spreadArray(e.__spreadArray([],t,!0),[d],!1)}))},G=Math.max(0,N.length-L);t.useEffect((function(){0!==N.length&&(O&&P.current?setTimeout((function(){P.current&&(P.current.scrollTop=P.current.scrollHeight)}),100):M&&!O&&S(!0))}),[N]),t.useEffect((function(){g&&N.length>0&&(U(!0),T(!1),S(!1))}),[g]),r.useEventListener("phone-island-conversation-transcription",(function(e){B(e)})),r.useEventListener("phone-island-transcription-opened",(function(){W()})),r.useEventListener("phone-island-transcription-closed",(function(){W()}));var J="pi-absolute pi-w-full pi-bg-elevationL2 pi-flex pi-flex-col pi-text-iconWhite dark:pi-text-iconWhiteDark pi-left-0 -pi-z-10 pi-pointer-events-auto ".concat("settings"===x||y?"pi-top-[17rem]":"pi-top-[13rem]");return d.default.createElement(d.default.Fragment,null,d.default.createElement(l.AnimatePresence,null,g&&d.default.createElement(o.motion.div,e.__assign({className:J,style:m},c),d.default.createElement("div",{className:"pi-h-full pi-rounded-lg pi-overflow-hidden pi-bg-elevationL2 dark:pi-bg-elevationL2Dark pi-relative pi-flex pi-flex-col pi-border-2 pi-border-gray-100 dark:pi-border-gray-600 pi-shadow-lg"},d.default.createElement("div",{className:"pi-flex-1 pi-pt-4 pi-px-4 pi-mt-8"},d.default.createElement("div",{className:"pi-h-60 pi-bg-gray-100 dark:pi-bg-gray-800 pi-rounded-lg pi-border pi-border-gray-200 dark:pi-border-gray-700 pi-overflow-hidden pi-flex pi-flex-col"},d.default.createElement(l.AnimatePresence,null,F&&M&&d.default.createElement(o.motion.div,{initial:{opacity:0,y:-10,scale:.9},animate:{opacity:1,y:0,scale:1},exit:{opacity:0,y:-10,scale:.9},className:"pi-absolute pi-top-16 pi-left-0 pi-right-0 pi-flex pi-justify-center pi-z-20"},d.default.createElement("button",{onClick:function(){P.current&&(P.current.scrollTop=P.current.scrollHeight,S(!1),T(!1),U(!0),H(N.length))},className:"pi-bg-phoneIslandActive dark:pi-bg-phoneIslandActiveDark hover:pi-bg-gray-500 dark:hover:pi-bg-gray-50 focus:pi-ring-emerald-500 dark:focus:pi-ring-emerald-300 pi-text-primaryInvert dark:pi-text-primaryInvertDark pi-px-4 pi-py-2 pi-rounded-full pi-text-sm pi-shadow-lg pi-flex pi-items-center pi-gap-2 pi-transition-all pi-duration-200 pi-border pi-backdrop-blur-sm"},d.default.createElement(n.FontAwesomeIcon,{icon:s.faArrowDown,className:"pi-w-4 pi-h-4"}),_(G>1?"TranscriptionView.New messages":"TranscriptionView.New message")))),d.default.createElement("div",{ref:P,onScroll:function(){if(P.current){var e=function(){if(!P.current)return!0;var e=P.current,t=e.scrollTop;return e.scrollHeight-t<=e.clientHeight+10}(),t=P.current;t.scrollTop,t.scrollHeight,t.clientHeight,e?(S(!1),T(!1),U(!0),H(N.length)):(T(!0),U(!1))}},className:"pi-flex-1 pi-p-4 ".concat(j.length>0?"pi-overflow-y-auto pi-scrollbar-thin pi-scrollbar-thumb-gray-400 pi-scrollbar-thumb-rounded-full pi-scrollbar-thumb-opacity-50 pi-scrollbar-track-gray-200 dark:pi-scrollbar-track-gray-900 pi-scrollbar-track-rounded-full pi-scrollbar-track-opacity-25":"pi-overflow-hidden")},0===j.length?d.default.createElement((function(){return d.default.createElement("div",{className:"pi-space-y-2 pi-animate-pulse"},d.default.createElement("div",{className:"pi-h-4 pi-bg-gray-200 dark:pi-bg-gray-700 pi-rounded pi-w-2/5"}),d.default.createElement("div",{className:"pi-h-4 pi-bg-gray-200 dark:pi-bg-gray-700 pi-rounded pi-w-4/5"}),d.default.createElement("div",{className:"pi-h-4 pi-bg-gray-200 dark:pi-bg-gray-700 pi-rounded pi-w-2/5"}),d.default.createElement("div",{className:"pi-h-4 pi-bg-gray-200 dark:pi-bg-gray-700 pi-rounded pi-w-4/5"}))}),null):d.default.createElement("div",{className:"pi-space-y-4"},N.length>100&&d.default.createElement("div",{className:"pi-text-center pi-py-2 pi-text-xs pi-text-gray-500 dark:pi-text-gray-400 pi-border-b pi-border-gray-200 dark:pi-border-gray-700"},_("TranscriptionView.Showing messages",{visible:j.length,total:N.length})),j.map((function(e,t){return d.default.createElement(o.motion.div,{key:e.id,layout:!0,initial:{opacity:0,y:20},animate:{opacity:1,y:0},transition:{duration:.3,layout:{duration:.25}},className:"pi-mb-4"},d.default.createElement("div",{className:"pi-mb-2"},d.default.createElement("span",{className:"pi-font-medium pi-text-xs pi-text-secondaryNeutral dark:pi-text-secondaryNeutralDark"},z(e.speakerNumber)?_("Common.Me","Me"):e.speaker)),d.default.createElement("div",{className:"pi-relative pi-p-3 pi-rounded-lg pi-text-xs pi-font-regular ".concat(z(e.speakerNumber)?"pi-text-gray-800 dark:pi-text-gray-100 pi-bg-gray-200 dark:pi-bg-gray-600":"pi-text-indigo-800 dark:pi-text-indigo-100 pi-bg-indigo-100 dark:pi-bg-indigo-700")},d.default.createElement("div",{className:"pi-flex pi-items-start pi-justify-between pi-gap-3"},d.default.createElement("div",{className:"pi-flex-1"},d.default.createElement(f,{text:e.text,isFinal:e.isFinal,speed:30})),d.default.createElement("div",{className:"pi-flex-shrink-0 pi-mt-1 pi-text-xs pi-font-regular ".concat(z(e.speakerNumber)?"pi-text-gray-800 dark:pi-text-gray-100 pi-bg-gray-200 dark:pi-bg-gray-600":"pi-text-indigo-800 dark:pi-text-indigo-100 pi-bg-indigo-100 dark:pi-bg-indigo-700")},(i=e.timestamp,r=Math.floor(i/60),a=Math.floor(i%60),"".concat(r.toString().padStart(2,"0"),":").concat(a.toString().padStart(2,"0")))))),!e.isFinal&&""!==e.text.trim()&&d.default.createElement(o.motion.div,{initial:{opacity:0},animate:{opacity:1},exit:{opacity:0},className:"pi-mt-1 pi-ml-3 pi-flex pi-items-center pi-gap-1"},d.default.createElement("span",{className:"pi-text-xs pi-text-gray-400 dark:pi-text-gray-500 pi-italic"},_("TranscriptionView.Is speaking","")),d.default.createElement("div",{className:"pi-inline-flex pi-items-center pi-gap-1"},d.default.createElement(o.motion.div,{className:"pi-w-1 pi-h-1 pi-bg-gray-400 dark:pi-bg-gray-500 pi-rounded-full",animate:{opacity:[.3,1,.3]},transition:{duration:1.5,repeat:1/0,delay:0}}),d.default.createElement(o.motion.div,{className:"pi-w-1 pi-h-1 pi-bg-gray-400 dark:pi-bg-gray-500 pi-rounded-full",animate:{opacity:[.3,1,.3]},transition:{duration:1.5,repeat:1/0,delay:.2}}),d.default.createElement(o.motion.div,{className:"pi-w-1 pi-h-1 pi-bg-gray-400 dark:pi-bg-gray-500 pi-rounded-full",animate:{opacity:[.3,1,.3]},transition:{duration:1.5,repeat:1/0,delay:.4}}))));var i,r,a})),d.default.createElement("div",{ref:C,className:"pi-pb-4"}))))),d.default.createElement("div",{className:"pi-flex pi-items-center pi-justify-center pi-py-2"},d.default.createElement("button",{onClick:function(){return a.eventDispatch("phone-island-transcription-close",{})},className:"pi-bg-transparent dark:enabled:hover:pi-bg-gray-700/30 enabled:hover:pi-bg-gray-300/70 focus:pi-ring-offset-gray-200 dark:focus:pi-ring-gray-500 focus:pi-ring-gray-400 pi-text-secondaryNeutral pi-outline-none pi-border-transparent dark:pi-text-secondaryNeutralDark pi-h-12 pi-w-24 pi-rounded-fullpi-px-4 pi-py-2 pi-rounded-full pi-text-lg  pi-flex pi-items-center pi-gap-2 pi-transition-all pi-duration-200 pi-border pi-backdrop-blur-sm"},d.default.createElement(n.FontAwesomeIcon,{icon:s.faAngleUp,className:"pi-w-4 pi-h-4 pi-ml-1"}),_("Common.Close")))))))}));g.displayName="TranscriptionView",exports.default=g;
//# sourceMappingURL=TranscriptionView.js.map