od-support-chat 1.0.30 → 1.0.32

package/dist/components/chat/chat.mjs

@@ -30,7 +30,7 @@ import e from"./info.guest.mjs";import{useEffect as t,useRef as n,useState as r}
   overflow: hidden;
   z-index: 10000;
   animation: ${({displayChat:e})=>e?l:u} 0.3s ease-in-out forwards;
-`,f=i.div`
+`,ee=i.div`
   position: fixed;
   right: 0;
   bottom: 10%;
@@ -42,7 +42,7 @@ import e from"./info.guest.mjs";import{useEffect as t,useRef as n,useState as r}
   overflow: hidden;
   z-index: 10000;
   animation: ${({displayChat:e})=>e?u:l} 0.3s ease-in-out forwards;
-`,ee=i.div`
+`,te=i.div`
   position: absolute;
   top: 5;
   margin-left: 5px;
@@ -55,7 +55,7 @@ import e from"./info.guest.mjs";import{useEffect as t,useRef as n,useState as r}
   font-size: 14px;
   color:  rgb(78, 161, 211);
   padding: 5px;
-`,te=i.div`
+`,f=i.div`
     display: flex;
     flex-direction: column;
     align-items: flex-start;
@@ -63,7 +63,7 @@ import e from"./info.guest.mjs";import{useEffect as t,useRef as n,useState as r}
   font-weight: 600;
   font-size: 12px;
   color:  rgb(78, 161, 211);
-`,p=i.div`
+`,ne=i.div`
   position: absolute;
   top: 0;
   right: 0;
@@ -75,7 +75,7 @@ import e from"./info.guest.mjs";import{useEffect as t,useRef as n,useState as r}
   :hover {
     cursor: pointer;
   }
-`,m=i.div`
+`,re=i.div`
   position: absolute;
   text-align: center;
   align-items: center;
@@ -93,7 +93,7 @@ import e from"./info.guest.mjs";import{useEffect as t,useRef as n,useState as r}
   color:  white;
   padding: 5px;
     background-color: rgb(78, 161, 211);
-`,h=i.div`
+`,p=i.div`
   position: absolute;
   text-align: center;
   align-items: center;
@@ -110,7 +110,7 @@ import e from"./info.guest.mjs";import{useEffect as t,useRef as n,useState as r}
   color:  white;
   padding: 10px;
   background-color: rgb(78, 161, 211);
-`,ne=i.div`
+`,m=i.div`
   position: absolute;
   top: 80px;
   margin-left: 5px;
@@ -120,13 +120,13 @@ import e from"./info.guest.mjs";import{useEffect as t,useRef as n,useState as r}
   max-height: 83%;
   overflow-x: hidden;
   overflow-y: auto;
-`,re=i.div`
+`,h=i.div`
   display: flex;
   width: 100%;
   flex-direction: column;
   padding: 15px;
   color: #454552;
-`,ie=i.div`
+`,g=i.div`
   width: 100%;
   display: flex;
   flex-direction: column;
@@ -152,7 +152,7 @@ import e from"./info.guest.mjs";import{useEffect as t,useRef as n,useState as r}
     font-size: 12px;
     text-align: left;
   }
-`,g=i.div`
+`,_=i.div`
   width: 100%;
   display: flex;
   flex-direction: column;
@@ -179,7 +179,7 @@ import e from"./info.guest.mjs";import{useEffect as t,useRef as n,useState as r}
     text-align: left;
     background-color:  #f5f5f5;
   }
-`,_=i.div`
+`,v=i.div`
   position: absolute;
   display: flex;
   bottom: 10px;
@@ -189,7 +189,7 @@ import e from"./info.guest.mjs";import{useEffect as t,useRef as n,useState as r}
   align-items: center;
   width: 100%;
   gap: 5px;
-`,v=i.input`
+`,y=i.input`
   bottom: 0;
   width: 70%;
   height: 25px;
@@ -203,7 +203,7 @@ import e from"./info.guest.mjs";import{useEffect as t,useRef as n,useState as r}
   :focus {
     outline: none;
   }
-`,y=i.div`
+`,b=i.div`
   height: 25px;
   outline: none;
   border: none;
@@ -219,7 +219,7 @@ import e from"./info.guest.mjs";import{useEffect as t,useRef as n,useState as r}
   font-size: 1rem;
   font-weight: 500;
   cursor: pointer;
-`,b=i.div`
+`,x=i.div`
   position: absolute;
   top: 80px;
   margin-left: 25px;
@@ -227,7 +227,7 @@ import e from"./info.guest.mjs";import{useEffect as t,useRef as n,useState as r}
   height: 65%;
   width: 83%;
   margin-bottom: 25px;
-`,x=i.i`
+`,ie=i.i`
   width: 25px;
   font-size: calc(5px + 1vmin);
-`,S=`/connecting_customer_support.gif`;var C,w,T;const E=`optimizetalk.com:8443`,D=i=>{let a=n(null),[l]=r(window.innerWidth<window.innerHeight&&window.innerWidth<=900),[u]=r(l?100:15),[D,O]=r([]),k=n(),[A,j]=r(!0),[M,N]=r(!1),[P,F]=r(!1),[ae,I]=r(null),[L,R]=r(null),[z,B]=r(),[V,H]=r(),[U,W]=r(!1),[G,K]=r(``),q=n(null),J=n(null),oe=()=>{let e=1e4,t=Math.floor(Math.random()*(9e4-e+1))+e;return console.log(`Random number: `+t),t},se=(e,t)=>{C=new WebSocket(`wss://`+E+`/signal`),C.onopen=function(){console.log(`Websocket connection established`),Z(),le(e,t),$({from:{userName:e,audio:!0,video:!0},type:`text`,data:`ping from `+e}),w=setInterval(()=>{$({from:{userName:e,audio:!0,video:!0},type:`text`,data:`ping from `+e})},45e3),X(e,t),console.log(`WebSocket connection opened to chat room `+G)}},ce=(e,t)=>{F(!0),I(t),console.log(`Params guestName:`+e+`, guestEmail:`+t);var n=L?e:`Guest-`+oe()+`: `+e;R(n),console.log(`Joining : `+n),se(n,t)};function Y(){console.log(`Close the socket`),C!=null&&(console.log(`Send 'leave' message to server for session `+z+` accessToken: `+V),$({from:{userName:L,sessionKey:z,audio:!0,video:!0},accessToken:V,type:`leave`,data:i.meetingLinkKey}),C.close())}function le(e,t){C.onmessage=function(n){let r=JSON.parse(n.data);switch(console.log(`Room received type: `+r.type),r.type){case`text`:console.log(`Text message from `+r.from.userName+` received: `+r.data);break;case`join_meeting`:console.log(`Main message `+r.data),r.data&&r.data===`busy`?(console.log(`Customer support is busy`),W(!0),T||ue(e,t)):r.data&&r.data===`valid`&&(clearInterval(T),console.log(`Session key `+r.referenceUsers[0].sessionKey),B(r.referenceUsers[0].sessionKey),console.log(`Session accessToken `+r.accessToken),H(r.accessToken),console.log(`Joined to room `+r.roomDetails.roomName),K(r.roomDetails.roomName));break;case`message`:console.log(`Chat message received from `+r.from.userName),console.log(`Chat message `+r.data),de(),O(e=>[...e,{sender:r.from.userName,msg:r.data}]),Q();break;case`session_expired`:console.log(`Chat session expired!`),F(!1),B(null),H(null),W(!1),Y();break;default:console.log(`Room ignoring message type `+r.type)}}}let ue=(e,t)=>{T=setInterval(()=>{console.log(`Trying to connect customer support team ...`),X(e,t)},1e4)},X=(e,t)=>{$({from:{userName:e,email:t,audio:!1,video:!1},type:`join_meeting`,roomDetails:{roomLinkKey:i.meetingLinkKey},data:i.customerSupportKey}),console.log(`Meeting join request sent for guest `+e+`, meetingLinkKey: `+i.meetingLinkKey+`, customerSupportKey: `+i.customerSupportKey)},de=()=>{J.current.play()};function Z(){C.addEventListener(`close`,e=>{console.log(`websocket connection closed: `,e),clearInterval(w)}),C.onerror=function(e){console.log(`Error: `+e)}}let Q=()=>{a.current?.scrollIntoView({behavior:`smooth`})},fe=e=>{if(e.key===`Enter`){let t=e.target.value;t&&(console.log(`Send 'message' message to server for session `+z+` accessToken: `+V),$({from:{userName:L,sessionKey:z,audio:!0,video:!0},accessToken:V,type:`message`,data:t}),console.log(`Chat message sent `+t),O(e=>[...e,{sender:L,msg:t}]),k.current.value=``)}},pe=()=>{let e=k.current.value;e&&(console.log(`Send 'message' message to server for session `+z+` accessToken: `+V),$({from:{userName:L,sessionKey:z,audio:!0,video:!0},accessToken:V,type:`message`,data:e}),console.log(`Chat message sent `+e),O(t=>[...t,{sender:L,msg:e}]),k.current.value=``,Q())};function $(e){let t=JSON.stringify(e);C.send(t)}function me(){Y(),j(!1),N(!0),B(null),H(null),W(!1)}function he(){C=new WebSocket(`wss://`+E+`/signal`),B(null),H(null),j(!0),N(!1),F(!1),W(!1),I(null),R(null),O([])}return t(()=>{Q()},[D,z]),c(`div`,{children:[!M&&c(d,{displayChat:A,maxWidth:u,children:[c(ee,{children:[s(te,{children:i.title}),s(p,{onClick:()=>me(),className:`text-gray-700`,children:s(`svg`,{width:`60%`,height:`60%`,viewBox:`0 0 24 24`,fill:`none`,xmlns:`http://www.w3.org/2000/svg`,children:s(`path`,{d:`M18 6L6 18M6 6L18 18`,stroke:`orange`,"stroke-width":`4`,"stroke-linecap":`round`,"stroke-linejoin":`round`})})})]}),!P&&!z&&!U&&s(e,{startGuestChat:ce,guestEmail:ae}),P&&!z&&!U&&s(o,{children:c(b,{children:[s(`div`,{className:`text-center mt-5`,children:`Please wait, connecting`}),c(`div`,{className:`flex flex-col items-center `,children:[s(`div`,{children:s(`img`,{className:`mt-1`,src:S,width:`80`})}),s(`div`,{className:`mt-5 text-center bottom-6 font-sm text-sky-400`,children:`contact us at`}),s(`div`,{className:`text-center bottom-0 font-sm text-sky-400`,children:i.supportEmail})]})]})}),P&&!z&&U&&s(o,{children:c(b,{children:[s(`div`,{className:`text-center text-sm`,children:`Our customer support team helping other customers, please wait.`}),s(`div`,{className:`text-center mt-5`,children:`connecting`}),c(`div`,{className:`flex flex-col items-center `,children:[s(`div`,{children:s(`img`,{className:`mt-1`,src:S,width:`80`})}),s(`div`,{className:`mt-5 text-center bottom-6 font-sm text-sky-400`,children:`contact us at`}),s(`div`,{className:`text-center bottom-0 font-sm text-sky-400`,children:i.supportEmail})]})]})}),P&&z&&c(`div`,{children:[s(m,{children:`Live Chat`}),s(ne,{children:c(re,{children:[D&&D.length==0&&c(`div`,{className:`ml-2 text-sm`,children:[` You are connected to our customer support team, `,i.welcomeMessage,` `]}),D&&D.length>0&&c(`div`,{children:[D&&D.map(({sender:e,msg:t},n)=>e===L?c(g,{children:[s(`strong`,{children:L}),s(`p`,{children:t})]},n):c(ie,{children:[s(`strong`,{children:e}),s(`p`,{children:t})]},n)),s(`div`,{style:{float:`left`,clear:`both`},ref:a})]})]})}),c(_,{children:[s(v,{ref:k,onKeyUp:fe,placeholder:`Enter your message`}),c(y,{onClick:pe,children:[s(x,{className:`fas fa-paper-plane`}),`Send`]})]})]}),s(`audio`,{ref:q,src:`/alert-sound.mp3`}),s(`audio`,{ref:J,src:`/ding-small.mp3`})]}),M&&s(f,{className:`cursor-pointer`,onClick:()=>he(),displayChat:A,maxWidth:u,children:c(h,{children:[s(`i`,{className:`bx bx-chat`}),`Live Chat`]})})]})};export{D as default};
+`,S=new URL(`./alert-sound.mp3`,import.meta.url).href,C=new URL(`./ding-small.mp3`,import.meta.url).href,w=new URL(`./connecting_customer_support.gif`,import.meta.url).href;var T,E,D;const O=`optimizetalk.com:8443`,k=i=>{let a=n(null),[l]=r(window.innerWidth<window.innerHeight&&window.innerWidth<=900),[u]=r(l?100:15),[k,A]=r([]),j=n(),[M,N]=r(!0),[P,F]=r(!1),[I,L]=r(!1),[R,z]=r(null),[B,V]=r(null),[H,U]=r(),[W,G]=r(),[K,q]=r(!1),[J,ae]=r(``),oe=n(null),Y=n(null),se=()=>{let e=1e4,t=Math.floor(Math.random()*(9e4-e+1))+e;return console.log(`Random number: `+t),t},ce=(e,t)=>{T=new WebSocket(`wss://`+O+`/signal`),T.onopen=function(){console.log(`Websocket connection established`),pe(),ue(e,t),$({from:{userName:e,audio:!0,video:!0},type:`text`,data:`ping from `+e}),E=setInterval(()=>{$({from:{userName:e,audio:!0,video:!0},type:`text`,data:`ping from `+e})},45e3),Z(e,t),console.log(`WebSocket connection opened to chat room `+J)}},le=(e,t)=>{L(!0),z(t),console.log(`Params guestName:`+e+`, guestEmail:`+t);var n=B?e:`Guest-`+se()+`: `+e;V(n),console.log(`Joining : `+n),ce(n,t)};function X(){console.log(`Close the socket`),T!=null&&(console.log(`Send 'leave' message to server for session `+H+` accessToken: `+W),$({from:{userName:B,sessionKey:H,audio:!0,video:!0},accessToken:W,type:`leave`,data:i.meetingLinkKey}),T.close())}function ue(e,t){T.onmessage=function(n){let r=JSON.parse(n.data);switch(console.log(`Room received type: `+r.type),r.type){case`text`:console.log(`Text message from `+r.from.userName+` received: `+r.data);break;case`join_meeting`:console.log(`Main message `+r.data),r.data&&r.data===`busy`?(console.log(`Customer support is busy`),q(!0),D||de(e,t)):r.data&&r.data===`valid`&&(clearInterval(D),console.log(`Session key `+r.referenceUsers[0].sessionKey),U(r.referenceUsers[0].sessionKey),console.log(`Session accessToken `+r.accessToken),G(r.accessToken),console.log(`Joined to room `+r.roomDetails.roomName),ae(r.roomDetails.roomName));break;case`message`:console.log(`Chat message received from `+r.from.userName),console.log(`Chat message `+r.data),fe(),A(e=>[...e,{sender:r.from.userName,msg:r.data}]),Q();break;case`session_expired`:console.log(`Chat session expired!`),L(!1),U(null),G(null),q(!1),X();break;default:console.log(`Room ignoring message type `+r.type)}}}let de=(e,t)=>{D=setInterval(()=>{console.log(`Trying to connect customer support team ...`),Z(e,t)},1e4)},Z=(e,t)=>{$({from:{userName:e,email:t,audio:!1,video:!1},type:`join_meeting`,roomDetails:{roomLinkKey:i.meetingLinkKey},data:i.customerSupportKey}),console.log(`Meeting join request sent for guest `+e+`, meetingLinkKey: `+i.meetingLinkKey+`, customerSupportKey: `+i.customerSupportKey)},fe=()=>{Y.current.play()};function pe(){T.addEventListener(`close`,e=>{console.log(`websocket connection closed: `,e),clearInterval(E)}),T.onerror=function(e){console.log(`Error: `+e)}}let Q=()=>{a.current?.scrollIntoView({behavior:`smooth`})},me=e=>{if(e.key===`Enter`){let t=e.target.value;t&&(console.log(`Send 'message' message to server for session `+H+` accessToken: `+W),$({from:{userName:B,sessionKey:H,audio:!0,video:!0},accessToken:W,type:`message`,data:t}),console.log(`Chat message sent `+t),A(e=>[...e,{sender:B,msg:t}]),j.current.value=``)}},he=()=>{let e=j.current.value;e&&(console.log(`Send 'message' message to server for session `+H+` accessToken: `+W),$({from:{userName:B,sessionKey:H,audio:!0,video:!0},accessToken:W,type:`message`,data:e}),console.log(`Chat message sent `+e),A(t=>[...t,{sender:B,msg:e}]),j.current.value=``,Q())};function $(e){let t=JSON.stringify(e);T.send(t)}function ge(){X(),N(!1),F(!0),U(null),G(null),q(!1)}function _e(){T=new WebSocket(`wss://`+O+`/signal`),U(null),G(null),N(!0),F(!1),L(!1),q(!1),z(null),V(null),A([])}return t(()=>{Q()},[k,H]),c(`div`,{children:[!P&&c(d,{displayChat:M,maxWidth:u,children:[c(te,{children:[s(f,{children:i.title}),s(ne,{onClick:()=>ge(),className:`text-gray-700`,children:s(`svg`,{width:`60%`,height:`60%`,viewBox:`0 0 24 24`,fill:`none`,xmlns:`http://www.w3.org/2000/svg`,children:s(`path`,{d:`M18 6L6 18M6 6L18 18`,stroke:`orange`,"stroke-width":`4`,"stroke-linecap":`round`,"stroke-linejoin":`round`})})})]}),!I&&!H&&!K&&s(e,{startGuestChat:le,guestEmail:R}),I&&!H&&!K&&s(o,{children:c(x,{children:[s(`div`,{className:`text-center mt-5`,children:`Please wait, connecting`}),c(`div`,{className:`flex flex-col items-center `,children:[s(`div`,{children:s(`img`,{className:`mt-1`,src:w,width:`80`})}),s(`div`,{className:`mt-5 text-center bottom-6 font-sm text-sky-400`,children:`contact us at`}),s(`div`,{className:`text-center bottom-0 font-sm text-sky-400`,children:i.supportEmail})]})]})}),I&&!H&&K&&s(o,{children:c(x,{children:[s(`div`,{className:`text-center text-sm`,children:`Our customer support team helping other customers, please wait.`}),s(`div`,{className:`text-center mt-5`,children:`connecting`}),c(`div`,{className:`flex flex-col items-center `,children:[s(`div`,{children:s(`img`,{className:`mt-1`,src:w,width:`80`})}),s(`div`,{className:`mt-5 text-center bottom-6 font-sm text-sky-400`,children:`contact us at`}),s(`div`,{className:`text-center bottom-0 font-sm text-sky-400`,children:i.supportEmail})]})]})}),I&&H&&c(`div`,{children:[s(re,{children:`Live Chat`}),s(m,{children:c(h,{children:[k&&k.length==0&&c(`div`,{className:`ml-2 text-sm`,children:[` You are connected to our customer support team, `,i.welcomeMessage,` `]}),k&&k.length>0&&c(`div`,{children:[k&&k.map(({sender:e,msg:t},n)=>e===B?c(_,{children:[s(`strong`,{children:B}),s(`p`,{children:t})]},n):c(g,{children:[s(`strong`,{children:e}),s(`p`,{children:t})]},n)),s(`div`,{style:{float:`left`,clear:`both`},ref:a})]})]})}),c(v,{children:[s(y,{ref:j,onKeyUp:me,placeholder:`Enter your message`}),c(b,{onClick:he,children:[s(ie,{className:`fas fa-paper-plane`}),`Send`]})]})]}),s(`audio`,{ref:oe,src:S}),s(`audio`,{ref:Y,src:C})]}),P&&s(ee,{className:`cursor-pointer`,onClick:()=>_e(),displayChat:M,maxWidth:u,children:c(p,{children:[s(`i`,{className:`bx bx-chat`}),`Live Chat`]})})]})};export{k as default};

package/dist/components/chat/chatMobile.mjs

@@ -30,7 +30,7 @@ import e from"./info.guestMobile.mjs";import{useEffect as t,useRef as n,useState
   overflow: hidden;
   z-index: 10000;
   animation: ${({displayChat:e})=>e?l:u} 0.3s ease-in-out forwards;
-`,f=i.div`
+`,ee=i.div`
   position: fixed;
   right: 0;
   bottom: 2%;
@@ -42,7 +42,7 @@ import e from"./info.guestMobile.mjs";import{useEffect as t,useRef as n,useState
   overflow: hidden;
   z-index: 10000;
   animation: ${({displayChat:e})=>e?u:l} 0.3s ease-in-out forwards;
-`,ee=i.div`
+`,te=i.div`
   position: absolute;
   top: 5;
   margin-left: 5px;
@@ -55,7 +55,7 @@ import e from"./info.guestMobile.mjs";import{useEffect as t,useRef as n,useState
   font-size: 14px;
   color:  rgb(78, 161, 211);
   padding: 5px;
-`,te=i.div`
+`,f=i.div`
     display: flex;
     flex-direction: column;
     align-items: flex-start;
@@ -63,7 +63,7 @@ import e from"./info.guestMobile.mjs";import{useEffect as t,useRef as n,useState
   font-weight: 600;
   font-size: 12px;
   color:  rgb(78, 161, 211);
-`,p=i.div`
+`,ne=i.div`
   position: absolute;
   top: 0;
   right: 0;
@@ -75,7 +75,7 @@ import e from"./info.guestMobile.mjs";import{useEffect as t,useRef as n,useState
   :hover {
     cursor: pointer;
   }
-`,m=i.div`
+`,re=i.div`
   position: absolute;
   text-align: center;
   align-items: center;
@@ -93,7 +93,7 @@ import e from"./info.guestMobile.mjs";import{useEffect as t,useRef as n,useState
   color:  white;
   padding: 5px;
     background-color: rgb(78, 161, 211);
-`,h=i.div`
+`,p=i.div`
   position: absolute;
   text-align: center;
   align-items: center;
@@ -110,7 +110,7 @@ import e from"./info.guestMobile.mjs";import{useEffect as t,useRef as n,useState
   color:  white;
   padding: 10px;
   background-color: rgb(78, 161, 211);
-`,ne=i.div`
+`,m=i.div`
   position: absolute;
   top: 80px;
   margin-left: 5px;
@@ -120,13 +120,13 @@ import e from"./info.guestMobile.mjs";import{useEffect as t,useRef as n,useState
   max-height: 83%;
   overflow-x: hidden;
   overflow-y: auto;
-`,re=i.div`
+`,h=i.div`
   display: flex;
   width: 100%;
   flex-direction: column;
   padding: 15px;
   color: #454552;
-`,ie=i.div`
+`,g=i.div`
   width: 100%;
   display: flex;
   flex-direction: column;
@@ -152,7 +152,7 @@ import e from"./info.guestMobile.mjs";import{useEffect as t,useRef as n,useState
     font-size: 12px;
     text-align: left;
   }
-`,g=i.div`
+`,_=i.div`
   width: 100%;
   display: flex;
   flex-direction: column;
@@ -179,7 +179,7 @@ import e from"./info.guestMobile.mjs";import{useEffect as t,useRef as n,useState
     text-align: left;
     background-color:  #f5f5f5;
   }
-`,_=i.div`
+`,v=i.div`
   position: absolute;
   display: flex;
   bottom: 10px;
@@ -189,7 +189,7 @@ import e from"./info.guestMobile.mjs";import{useEffect as t,useRef as n,useState
   align-items: center;
   width: 100%;
   gap: 5px;
-`,v=i.input`
+`,y=i.input`
   bottom: 0;
   width: 70%;
   height: 25px;
@@ -203,7 +203,7 @@ import e from"./info.guestMobile.mjs";import{useEffect as t,useRef as n,useState
   :focus {
     outline: none;
   }
-`,y=i.div`
+`,b=i.div`
   height: 25px;
   outline: none;
   border: none;
@@ -219,7 +219,7 @@ import e from"./info.guestMobile.mjs";import{useEffect as t,useRef as n,useState
   font-size: 1rem;
   font-weight: 500;
   cursor: pointer;
-`,b=i.div`
+`,x=i.div`
   position: absolute;
   top: 80px;
   margin-left: 25px;
@@ -227,7 +227,7 @@ import e from"./info.guestMobile.mjs";import{useEffect as t,useRef as n,useState
   height: 65%;
   width: 83%;
   margin-bottom: 25px;
-`,x=i.i`
+`,ie=i.i`
   width: 25px;
   font-size: calc(5px + 1vmin);
-`,S=`/connecting_customer_support.gif`;var C,w,T;const E=`optimizetalk.com:8443`,D=i=>{let a=n(null),[l]=r(window.innerWidth<window.innerHeight&&window.innerWidth<=900),[u]=r(l?80:20),[D,O]=r([]),k=n(),[A,j]=r(!0),[M,N]=r(!1),[P,F]=r(!1),[ae,I]=r(null),[L,R]=r(null),[z,B]=r(),[V,H]=r(),[U,W]=r(!1),[G,K]=r(``),q=n(null),J=n(null),oe=()=>{let e=1e4,t=Math.floor(Math.random()*(9e4-e+1))+e;return console.log(`Random number: `+t),t},se=(e,t)=>{C=new WebSocket(`wss://`+E+`/signal`),C.onopen=function(){console.log(`Websocket connection established`),Z(),le(e,t),$({from:{userName:e,audio:!0,video:!0},type:`text`,data:`ping from `+e}),w=setInterval(()=>{$({from:{userName:e,audio:!0,video:!0},type:`text`,data:`ping from `+e})},45e3),X(e,t),console.log(`WebSocket connection opened to chat room `+G)}},ce=(e,t)=>{F(!0),I(t),console.log(`Params guestName:`+e+`, guestEmail:`+t);var n=L?e:`Guest-`+oe()+`: `+e;R(n),console.log(`Joining : `+n),se(n,t)};function Y(){console.log(`Close the socket`),C!=null&&(console.log(`Send 'leave' message to server for session `+z+` accessToken: `+V),$({from:{userName:L,sessionKey:z,audio:!0,video:!0},accessToken:V,type:`leave`,data:i.meetingLinkKey}),C.close())}function le(e,t){C.onmessage=function(n){let r=JSON.parse(n.data);switch(console.log(`Room received type: `+r.type),r.type){case`text`:console.log(`Text message from `+r.from.userName+` received: `+r.data);break;case`join_meeting`:console.log(`Main message `+r.data),r.data&&r.data===`busy`?(console.log(`Customer support is busy`),W(!0),T||ue(e,t)):r.data&&r.data===`valid`&&(clearInterval(T),console.log(`Session key `+r.referenceUsers[0].sessionKey),B(r.referenceUsers[0].sessionKey),console.log(`Session accessToken `+r.accessToken),H(r.accessToken),console.log(`Joined to room `+r.roomDetails.roomName),K(r.roomDetails.roomName));break;case`message`:console.log(`Chat message received from `+r.from.userName),console.log(`Chat message `+r.data),de(),O(e=>[...e,{sender:r.from.userName,msg:r.data}]),Q();break;case`session_expired`:console.log(`Chat session expired!`),F(!1),B(null),H(null),W(!1),Y();break;default:console.log(`Room ignoring message type `+r.type)}}}let ue=(e,t)=>{T=setInterval(()=>{console.log(`Trying to connect customer support team ...`),X(e,t)},1e4)},X=(e,t)=>{$({from:{userName:e,email:t,audio:!1,video:!1},type:`join_meeting`,roomDetails:{roomLinkKey:i.meetingLinkKey},data:i.customerSupportKey}),console.log(`Meeting join request sent for guest `+e+`, meetingLinkKey: `+i.meetingLinkKey+`, customerSupportKey: `+i.customerSupportKey)},de=()=>{J.current.play()};function Z(){C.addEventListener(`close`,e=>{console.log(`websocket connection closed: `,e),clearInterval(w)}),C.onerror=function(e){console.log(`Error: `+e)}}let Q=()=>{a.current?.scrollIntoView({behavior:`smooth`})},fe=e=>{if(e.key===`Enter`){let t=e.target.value;t&&(console.log(`Send 'message' message to server for session `+z+` accessToken: `+V),$({from:{userName:L,sessionKey:z,audio:!0,video:!0},accessToken:V,type:`message`,data:t}),console.log(`Chat message sent `+t),O(e=>[...e,{sender:L,msg:t}]),k.current.value=``)}},pe=()=>{let e=k.current.value;e&&(console.log(`Send 'message' message to server for session `+z+` accessToken: `+V),$({from:{userName:L,sessionKey:z,audio:!0,video:!0},accessToken:V,type:`message`,data:e}),console.log(`Chat message sent `+e),O(t=>[...t,{sender:L,msg:e}]),k.current.value=``,Q())};function $(e){let t=JSON.stringify(e);C.send(t)}function me(){Y(),j(!1),N(!0),B(null),H(null),W(!1)}function he(){C=new WebSocket(`wss://`+E+`/signal`),B(null),H(null),j(!0),N(!1),F(!1),W(!1),I(null),R(null),O([])}return t(()=>{Q()},[D,z]),c(`div`,{children:[!M&&c(d,{displayChat:A,maxWidth:u,children:[c(ee,{children:[s(te,{children:i.title}),s(p,{onClick:()=>me(),className:`text-gray-700`,children:s(`svg`,{width:`60%`,height:`60%`,viewBox:`0 0 24 24`,fill:`none`,xmlns:`http://www.w3.org/2000/svg`,children:s(`path`,{d:`M18 6L6 18M6 6L18 18`,stroke:`orange`,"stroke-width":`4`,"stroke-linecap":`round`,"stroke-linejoin":`round`})})})]}),!P&&!z&&!U&&s(e,{startGuestChat:ce,guestEmail:ae}),P&&!z&&!U&&s(o,{children:c(b,{children:[s(`div`,{className:`text-center mt-5`,children:`Please wait, connecting`}),c(`div`,{className:`flex flex-col items-center `,children:[s(`div`,{children:s(`img`,{className:`mt-5`,src:S,width:`80`})}),s(`div`,{className:`absolute text-center bottom-6 font-sx text-sky-400`,children:`contact us at`}),s(`div`,{className:`absolute text-center bottom-0 font-sx text-sky-400`,children:i.supportEmail})]})]})}),P&&!z&&U&&s(o,{children:c(b,{children:[s(`div`,{className:`text-center`,children:`Our customer support team helping other customers, please wait.`}),s(`div`,{className:`text-center mt-5`,children:`connecting`}),c(`div`,{className:`flex flex-col items-center `,children:[s(`div`,{children:s(`img`,{className:`mt-1`,src:S,width:`80`})}),s(`div`,{className:`mt-5 text-center bottom-6 font-sx text-sky-400`,children:`contact us at`}),s(`div`,{className:`text-center bottom-0 font-sx text-sky-400`,children:i.supportEmail})]})]})}),P&&z&&c(`div`,{children:[s(m,{children:`Live Chat`}),s(ne,{children:c(re,{children:[D&&D.length==0&&c(`div`,{className:`ml-2`,children:[` You are connected to our customer support team, `,i.welcomeMessage,` `]}),D&&D.length>0&&c(`div`,{children:[D&&D.map(({sender:e,msg:t},n)=>e===L?c(g,{children:[s(`strong`,{children:L}),s(`p`,{children:t})]},n):c(ie,{children:[s(`strong`,{children:e}),s(`p`,{children:t})]},n)),s(`div`,{style:{float:`left`,clear:`both`},ref:a})]})]})}),c(_,{children:[s(v,{ref:k,onKeyUp:fe,placeholder:`Enter your message`}),c(y,{onClick:pe,children:[s(x,{className:`fas fa-paper-plane`}),`Send`]})]})]}),s(`audio`,{ref:q,src:`/alert-sound.mp3`}),s(`audio`,{ref:J,src:`/ding-small.mp3`})]}),M&&s(f,{className:`cursor-pointer`,onClick:()=>he(),displayChat:A,maxWidth:u,children:s(h,{children:s(`i`,{className:`bx bx-chat`})})})]})};export{D as default};
+`,S=new URL(`./alert-sound.mp3`,import.meta.url).href,C=new URL(`./ding-small.mp3`,import.meta.url).href,w=new URL(`./connecting_customer_support.gif`,import.meta.url).href;var T,E,D;const O=`optimizetalk.com:8443`,k=i=>{let a=n(null),[l]=r(window.innerWidth<window.innerHeight&&window.innerWidth<=900),[u]=r(l?80:20),[k,A]=r([]),j=n(),[M,N]=r(!0),[P,F]=r(!1),[I,L]=r(!1),[R,z]=r(null),[B,V]=r(null),[H,U]=r(),[W,G]=r(),[K,q]=r(!1),[J,ae]=r(``),oe=n(null),Y=n(null),se=()=>{let e=1e4,t=Math.floor(Math.random()*(9e4-e+1))+e;return console.log(`Random number: `+t),t},ce=(e,t)=>{T=new WebSocket(`wss://`+O+`/signal`),T.onopen=function(){console.log(`Websocket connection established`),pe(),ue(e,t),$({from:{userName:e,audio:!0,video:!0},type:`text`,data:`ping from `+e}),E=setInterval(()=>{$({from:{userName:e,audio:!0,video:!0},type:`text`,data:`ping from `+e})},45e3),Z(e,t),console.log(`WebSocket connection opened to chat room `+J)}},le=(e,t)=>{L(!0),z(t),console.log(`Params guestName:`+e+`, guestEmail:`+t);var n=B?e:`Guest-`+se()+`: `+e;V(n),console.log(`Joining : `+n),ce(n,t)};function X(){console.log(`Close the socket`),T!=null&&(console.log(`Send 'leave' message to server for session `+H+` accessToken: `+W),$({from:{userName:B,sessionKey:H,audio:!0,video:!0},accessToken:W,type:`leave`,data:i.meetingLinkKey}),T.close())}function ue(e,t){T.onmessage=function(n){let r=JSON.parse(n.data);switch(console.log(`Room received type: `+r.type),r.type){case`text`:console.log(`Text message from `+r.from.userName+` received: `+r.data);break;case`join_meeting`:console.log(`Main message `+r.data),r.data&&r.data===`busy`?(console.log(`Customer support is busy`),q(!0),D||de(e,t)):r.data&&r.data===`valid`&&(clearInterval(D),console.log(`Session key `+r.referenceUsers[0].sessionKey),U(r.referenceUsers[0].sessionKey),console.log(`Session accessToken `+r.accessToken),G(r.accessToken),console.log(`Joined to room `+r.roomDetails.roomName),ae(r.roomDetails.roomName));break;case`message`:console.log(`Chat message received from `+r.from.userName),console.log(`Chat message `+r.data),fe(),A(e=>[...e,{sender:r.from.userName,msg:r.data}]),Q();break;case`session_expired`:console.log(`Chat session expired!`),L(!1),U(null),G(null),q(!1),X();break;default:console.log(`Room ignoring message type `+r.type)}}}let de=(e,t)=>{D=setInterval(()=>{console.log(`Trying to connect customer support team ...`),Z(e,t)},1e4)},Z=(e,t)=>{$({from:{userName:e,email:t,audio:!1,video:!1},type:`join_meeting`,roomDetails:{roomLinkKey:i.meetingLinkKey},data:i.customerSupportKey}),console.log(`Meeting join request sent for guest `+e+`, meetingLinkKey: `+i.meetingLinkKey+`, customerSupportKey: `+i.customerSupportKey)},fe=()=>{Y.current.play()};function pe(){T.addEventListener(`close`,e=>{console.log(`websocket connection closed: `,e),clearInterval(E)}),T.onerror=function(e){console.log(`Error: `+e)}}let Q=()=>{a.current?.scrollIntoView({behavior:`smooth`})},me=e=>{if(e.key===`Enter`){let t=e.target.value;t&&(console.log(`Send 'message' message to server for session `+H+` accessToken: `+W),$({from:{userName:B,sessionKey:H,audio:!0,video:!0},accessToken:W,type:`message`,data:t}),console.log(`Chat message sent `+t),A(e=>[...e,{sender:B,msg:t}]),j.current.value=``)}},he=()=>{let e=j.current.value;e&&(console.log(`Send 'message' message to server for session `+H+` accessToken: `+W),$({from:{userName:B,sessionKey:H,audio:!0,video:!0},accessToken:W,type:`message`,data:e}),console.log(`Chat message sent `+e),A(t=>[...t,{sender:B,msg:e}]),j.current.value=``,Q())};function $(e){let t=JSON.stringify(e);T.send(t)}function ge(){X(),N(!1),F(!0),U(null),G(null),q(!1)}function _e(){T=new WebSocket(`wss://`+O+`/signal`),U(null),G(null),N(!0),F(!1),L(!1),q(!1),z(null),V(null),A([])}return t(()=>{Q()},[k,H]),c(`div`,{children:[!P&&c(d,{displayChat:M,maxWidth:u,children:[c(te,{children:[s(f,{children:i.title}),s(ne,{onClick:()=>ge(),className:`text-gray-700`,children:s(`svg`,{width:`60%`,height:`60%`,viewBox:`0 0 24 24`,fill:`none`,xmlns:`http://www.w3.org/2000/svg`,children:s(`path`,{d:`M18 6L6 18M6 6L18 18`,stroke:`orange`,"stroke-width":`4`,"stroke-linecap":`round`,"stroke-linejoin":`round`})})})]}),!I&&!H&&!K&&s(e,{startGuestChat:le,guestEmail:R}),I&&!H&&!K&&s(o,{children:c(x,{children:[s(`div`,{className:`text-center mt-5`,children:`Please wait, connecting`}),c(`div`,{className:`flex flex-col items-center `,children:[s(`div`,{children:s(`img`,{className:`mt-5`,src:w,width:`80`})}),s(`div`,{className:`absolute text-center bottom-6 font-sx text-sky-400`,children:`contact us at`}),s(`div`,{className:`absolute text-center bottom-0 font-sx text-sky-400`,children:i.supportEmail})]})]})}),I&&!H&&K&&s(o,{children:c(x,{children:[s(`div`,{className:`text-center`,children:`Our customer support team helping other customers, please wait.`}),s(`div`,{className:`text-center mt-5`,children:`connecting`}),c(`div`,{className:`flex flex-col items-center `,children:[s(`div`,{children:s(`img`,{className:`mt-1`,src:w,width:`80`})}),s(`div`,{className:`mt-5 text-center bottom-6 font-sx text-sky-400`,children:`contact us at`}),s(`div`,{className:`text-center bottom-0 font-sx text-sky-400`,children:i.supportEmail})]})]})}),I&&H&&c(`div`,{children:[s(re,{children:`Live Chat`}),s(m,{children:c(h,{children:[k&&k.length==0&&c(`div`,{className:`ml-2`,children:[` You are connected to our customer support team, `,i.welcomeMessage,` `]}),k&&k.length>0&&c(`div`,{children:[k&&k.map(({sender:e,msg:t},n)=>e===B?c(_,{children:[s(`strong`,{children:B}),s(`p`,{children:t})]},n):c(g,{children:[s(`strong`,{children:e}),s(`p`,{children:t})]},n)),s(`div`,{style:{float:`left`,clear:`both`},ref:a})]})]})}),c(v,{children:[s(y,{ref:j,onKeyUp:me,placeholder:`Enter your message`}),c(b,{onClick:he,children:[s(ie,{className:`fas fa-paper-plane`}),`Send`]})]})]}),s(`audio`,{ref:oe,src:S}),s(`audio`,{ref:Y,src:C})]}),P&&s(ee,{className:`cursor-pointer`,onClick:()=>_e(),displayChat:M,maxWidth:u,children:s(p,{children:s(`i`,{className:`bx bx-chat`})})})]})};export{k as default};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "od-support-chat",
   "private": false,
-  "version": "1.0.30",
+  "version": "1.0.32",
   "type": "module",
   "types": "./dist/index.d.ts",
   "exports": {