zestchatbotwidgetpackage/dist/cjs/index.js

chatbot widget npm package

"use strict";var e=require("react/jsx-runtime"),t=require("react"),s=require("axios"),n=require("uuid"),o=require("style-inject"),i=require("@mui/icons-material/Home"),r=require("@mui/icons-material/Email"),a=require("@mui/icons-material/Help"),l=require("@mui/icons-material/Send"),d=require("@mui/icons-material/KeyboardArrowRight"),c=require("@mui/icons-material/Search"),p=require("@mui/icons-material/RotateRight");const h=e=>s.create({baseURL:e,headers:{Accept:"text/plain","Content-Type":"application/json"}}),g=t.createContext(void 0),x=()=>{const e=t.useContext(g);if(!e)throw new Error("useBotContext must be used within a BotContextProvider");return e};function u(){const{tabNumber:s,setTabNumber:o,showFullContent:i,setShowFullContent:r,showDetailedResponse:a,setShowDetailedResponse:l,setErrorExist:d,setLoading:c,setMessages:p,setWaterMark:g,getMessage:u,setUserSentAMsg:m,setIsLiveAgent:y,setUserHaveBeenDeactivated:f,botEndPoint:j}=x(),b=h(j),[w,v]=t.useState(""),{setBotToken:S,setUserId:C,userId:k}=x(),[B,E]=t.useState(!1),[I,T]=t.useState(!1),M=n.v4();t.useEffect((()=>{const e=localStorage.getItem("userId");e?C(e):e||localStorage.setItem("userId",M)}),[]);return t.useEffect((()=>{(async()=>{try{await b.get("/Home/homelogo",{headers:{"Content-Type":"application/json"}}).then((e=>{v(e?.data.path)}))}catch(e){}})()}),[]),e.jsxs("div",{style:{color:"#050505",width:"100%",borderBottom:1!==s?"#D9D9D9 solid 1px":"none",position:"relative"},children:[1===s?e.jsx("img",{src:w,alt:"chat-icon",style:{marginLeft:"1.25rem",width:"90px",height:"32px"}}):e.jsxs("div",{children:[e.jsx("button",{onClick:()=>{i?r(!1):a?(r(!0),l(!1)):o(1)},style:{position:"absolute",left:"1rem"},children:e.jsx("img",{src:"https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQfLAtcnpn58lAc5j2wF9DhArhkqnXecqLNkV5GHksa-w&s",alt:"back",style:{width:"20px",height:"20px"}})}),e.jsx("button",{disabled:I,onClick:async()=>{d(!1),c(!0),T(!0);try{m(!1),y(!1);const e=await fetch(`${j}/Bot/${k}/token/startconversation`,{method:"GET"}),{token:t,conversationId:s}=await e.json();localStorage.setItem("conversationId",s),S(t),c(!1),E(!1),g(""),T(!1),c(!1),p([]),u(),f(!1)}catch(e){d(!0),c(!1),T(!1)}},onMouseEnter:()=>E(!0),onMouseLeave:()=>E(!1),className:(2===s?"":"hidden")+" ",style:{position:"absolute",right:"1rem"},children:e.jsx("img",{src:"https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcToj21Ha4K1q-BULzDPCHuHLLvCtgs-YGDVd-m0s8UhTw&s",alt:"options",style:{width:"20px",height:"20px"}})}),B&&e.jsx("p",{style:{position:"absolute",top:"2px",right:"50px",padding:"0.5rem",backgroundColor:"#BABBC2",color:"white",borderRadius:"4px"},children:"clear chat"})]}),e.jsx("div",{style:{display:"flex",justifyContent:"center",alignItems:"center"},children:e.jsx("div",{children:2===s?e.jsx("p",{style:{fontWeight:700,color:"#17031D",fontSize:"18px",letterSpacing:"0.5px",marginBottom:"16px"},children:"Messages"}):3===s?e.jsx("div",{style:{width:"100%",textAlign:"center",display:"flex",justifyContent:"center"},children:e.jsx("p",{style:{fontWeight:700,color:"#17031D",fontSize:"18px",textAlign:"center",marginBottom:"16px"},children:"FAQs"})}):null})})]})}function m(){const{tabNumber:s,setTabNumber:n,botBrandColor:o}=x(),[l,d]=t.useState(!1);return e.jsxs("div",{style:{fontSize:"12px",fontWeight:"500",width:"100%",borderTop:"#D9D9D9 solid 2px",display:"flex",flexDirection:"column",alignItems:"center",justifyContent:"center",padding:"0 1.5rem",marginBottom:"16px"},children:[e.jsxs("div",{style:{display:"flex",width:"100%",justifyContent:"space-between"},children:[e.jsxs("button",{style:{display:"flex",flexDirection:"column",alignItems:"center",justifyContent:"center"},onClick:()=>n(1),children:[1===s?e.jsx(i,{style:{color:o,width:"15px",height:"15px"}}):e.jsx(i,{style:{color:"#050505",width:"15px",height:"15px"}}),e.jsx("p",{style:{color:1===s?o:"#050505",marginTop:"-4px"},children:"Home"})]}),e.jsxs("button",{style:{display:"flex",flexDirection:"column",alignItems:"center",justifyContent:"center"},onClick:()=>n(2),children:[2===s?e.jsx(r,{style:{color:o,width:"15px",height:"15px"}}):e.jsx(r,{style:{color:"#050505",width:"15px",height:"15px"}}),e.jsx("p",{style:{color:2===s?o:"#050505",marginTop:"-4px"},children:"Messages"})]}),e.jsxs("button",{style:{display:"flex",flexDirection:"column",alignItems:"center",justifyContent:"center"},onClick:()=>n(3),children:[3===s?e.jsx(a,{style:{color:o,width:"15px",height:"15px"}}):e.jsx(a,{style:{color:"#050505",width:"15px",height:"15px"}}),e.jsx("p",{style:{color:3===s?o:"#050505",marginTop:"-4px"},children:"FAQs"})]})]}),e.jsxs("div",{onMouseEnter:()=>d(!0),onMouseLeave:()=>d(!1),style:{display:"flex",alignItems:"center"},children:[e.jsx("p",{style:{color:"#606060",fontSize:"10px"},children:"Powered by"}),e.jsx("img",{src:l?"https://infinionstore001.blob.core.windows.net/customer-prod/newInfLogo.svg":"https://infinionstore001.blob.core.windows.net/customer-prod/newInfLogoBlack.svg",alt:"Infinion Technologies",style:{height:"22px",marginLeft:"4px"}})]})]})}o("css_248z");const y=()=>{const{setTabNumber:s,botEndPoint:n,botAssetsUrl:o}=x(),[i,r]=t.useState(""),[a,d]=t.useState(""),[c,p]=t.useState(""),g=h(n);t.useEffect((()=>{(async()=>{try{await g.get("/Home/welcomemessage",{headers:{"Content-Type":"application/json"}}).then((e=>{r(e?.data.title),d(e?.data.description)}))}catch(e){}})()}),[]),t.useEffect((()=>{(async()=>{try{await g.get("/Home/homeimage",{headers:{"Content-Type":"application/json"}}).then((e=>{p(e?.data.path)}))}catch(e){}})()}),[]);return e.jsxs("div",{style:{color:"black",cursor:"pointer",padding:"0 24px",overflow:"hidden"},onClick:()=>s(2),children:[e.jsx("p",{style:{fontWeight:700,fontSize:"20px",margin:"0"},children:i}),e.jsx("p",{style:{fontSize:"14px",margin:"0"},children:a}),e.jsx("div",{style:{width:"100%",display:"flex",justifyContent:"center",marginTop:"6%"},children:e.jsx("img",{src:`${o}/chatbothome.svg`,alt:"welcome",style:{width:"350px",height:"230px"}})}),e.jsxs("div",{style:{height:"70px",width:"calc(100% - 40px)",boxShadow:"0px 4px 8px rgba(0, 0, 0, 0.1)",outline:"none",fontSize:"14px",padding:"16px",position:"absolute",bottom:"8px",borderRadius:"8px",border:"1px solid #D9D9D9",backgroundColor:"#ffffff",whiteSpace:"normal"},children:[e.jsx("p",{style:{fontWeight:700},children:"Send us a message"}),e.jsx("p",{children:"We typically reply within 5 - 10 minutes"}),e.jsx(l,{style:{position:"absolute",right:"4px",bottom:"24px",width:"20px",height:"20px"}})]})]})},f=(e,t)=>{let s,n,o;if(e?.startsWith("#")){const t=parseInt(e.slice(1),16);s=t>>16&255,n=t>>8&255,o=255&t}else{if(!e?.startsWith("rgb"))throw new Error("Unsupported color format. Use hex (#) or rgb.");{const t=e.match(/\d+/g);if(!t)return e;s=parseInt(t[0]),n=parseInt(t[1]),o=parseInt(t[2])}}return s=Math.min(255,Math.floor(s+t/100*(255-s))),n=Math.min(255,Math.floor(n+t/100*(255-n))),o=Math.min(255,Math.floor(o+t/100*(255-o))),`rgb(${s}, ${n}, ${o})`},j=({faq:s,questionsLenght:n,setTitleId:o,setSuggestionsExist:i})=>{const{setShowFullContent:r,showFullContent:a,setShowDetailedResponse:l,botBrandColor:c}=x(),[p,h]=t.useState(!1);return e.jsx("div",{style:{position:"relative"},children:!a&&e.jsx("div",{onClick:()=>{i(!1),l(!1),r(!0),o(s.id)},onMouseEnter:()=>h(!0),onMouseLeave:()=>h(!1),style:{cursor:"pointer"},children:e.jsxs("div",{style:{borderBottom:"1px solid #EAECF0",paddingTop:"8px",paddingBottom:"8px",paddingRight:"50px",paddingLeft:"24px",backgroundColor:p?f(c,90):"transparent"},children:[e.jsx("p",{style:{fontWeight:"600",color:c},children:s.name}),e.jsx("p",{style:{fontSize:"14px",color:"#101828",marginTop:"8px"},children:s.description}),e.jsx(d,{fontSize:"small",style:{position:"absolute",top:"40%",right:"16px",width:"20px",height:"20px",color:c}})]})})})},b=({response:t,setFaqId:s,setSuggestionsExist:n})=>{const{setShowFullContent:o,setShowDetailedResponse:i,botBrandColor:r}=x();return e.jsxs("div",{onClick:()=>{s(t.id),n(!1),i(!0),o(!1)},style:{borderBottom:"1px solid #EAECF0",position:"relative",cursor:"pointer",paddingTop:"16px",paddingBottom:"16px",paddingLeft:"24px",paddingRight:"50px"},onMouseEnter:e=>{e.currentTarget.style.backgroundColor=f(r,90)},onMouseLeave:e=>{e.currentTarget.style.backgroundColor="transparent"},children:[e.jsx("p",{style:{fontWeight:"600",fontSize:"14px",color:"#101828"},children:t?.question}),e.jsx(d,{fontSize:"small",style:{position:"absolute",top:"40%",right:"16px",width:"20px",height:"20px",color:r}})]})};function w({answer:t}){const s=/\n(\d+\.\s|\*\s)/.test(t),n=t=>{const s=t?.split(/\*\*(.*?)\*\*/g);return s?.map(((t,s)=>s%2==1?e.jsx("strong",{style:{fontWeight:700},children:t},s):t))},o=s?e.jsx("div",{children:t?.split("\n")?.map(((t,s)=>{if(!/^(\d+\.\s|\*\s)/.test(t))return e.jsx("p",{style:{listStyleType:"none"},children:n(t)},s);{const o=t?.match(/^(\d+\.\s|\*\s)(.*)/);if(o)return e.jsxs("span",{children:[e.jsx("strong",{children:o[1]})," ",n(o[2]),e.jsx("br",{})]},s)}}))}):e.jsx("p",{children:n(t)});return e.jsx("div",{children:o})}function v({answer:t}){const s=/\n\d+\.\s/.test(t)?e.jsx("div",{children:t?.split("\n")?.map(((t,s)=>{if(/^\d+\.\s/.test(t)){const n=t?.split(". ");return e.jsxs("span",{className:"text-[14px] text-[#101828] mt-2 ",children:[e.jsx("strong",{children:n[0]}),". ",n[1],e.jsx("br",{})]},s)}return e.jsx("p",{className:"text-[14px] text-[#101828] mt-2 ",style:{listStyleType:"none"},children:t},s)}))}):e.jsx("p",{children:t});return e.jsx("div",{children:s})}function S(){const{showChatBot:s,showFullContent:n,showDetailedResponse:o,botEndPoint:i,botBrandColor:r}=x(),a=h(i),[l,d]=t.useState(""),[g,u]=t.useState(!1),[m,y]=t.useState({loading:!1,result:[],count:0}),[S,C]=t.useState({loading:!1,result:{}}),[k,B]=t.useState(!1),[E,I]=t.useState(),[T,M]=t.useState(!1),[R,D]=t.useState(!1),[L,A]=t.useState(!1),[F,z]=t.useState(""),[W,N]=t.useState(""),[$,q]=t.useState({loading:!1,result:[],otherInfo:""}),[H,U]=t.useState({loading:!1,result:{}}),P=t.useRef(null),K=t.useRef(null);t.useEffect((()=>{K.current&&(K.current.scrollTop=0)}),[o,n]),t.useEffect((()=>{const e=e=>{P.current&&!P.current.contains(e.target)&&e.target.closest(".outside-div")&&A(!1)},t=e=>{"Escape"===e.key&&(A(!1),M(!1))};return document.addEventListener("click",e),document.addEventListener("keydown",t),()=>{document.removeEventListener("click",e),document.removeEventListener("keydown",t)}}),[]);const Q=async()=>{B(!1);try{y({...m,loading:!0}),await a.get(`KnowledgeStore/title?searhQuery=${l}`,{headers:{"Content-Type":"application/json"}}).then((e=>{const t={...m,loading:!1,result:e.data.titles};y(t),A(!1),B(!1)}))}catch(e){y({...m,loading:!1}),B(!0)}},G=async()=>{B(!1);try{y({...m,loading:!0,count:0}),await a.get("/KnowledgeStore/title",{headers:{"Content-Type":"application/json"}}).then((e=>{const t={...m,loading:!1,result:e.data.titles,count:e.data.count};y(t),B(!1)}))}catch(e){y({...m,loading:!1}),B(!0)}};t.useEffect((()=>{l.length>=3?(Q(),(async()=>{B(!1);try{y({...m,loading:!0}),await a.get(`KnowledgeStore/title/autocomplete?searhQuery=${l}`,{headers:{"Content-Type":"application/json"}}).then((e=>{I(e.data),B(!1)}))}catch(e){y({...m,loading:!1}),B(!0)}})()):G()}),[s,l]),t.useEffect((()=>{E&&E?.length>=1&&A(!0)}),[E]),t.useEffect((()=>{""!==F&&((async()=>{try{U({...H,loading:!0}),await a.get(`KnowledgeStore/title/${F}/FAQs/${W}`,{headers:{"Content-Type":"application/json"}}).then((e=>{const t={...H,loading:!1,result:e.data};U(t)}))}catch(e){U({...H,loading:!1})}})(),(async()=>{try{q({...$,loading:!0});const e=""===l?`/KnowledgeStore/title/${F}/FAQs`:`/KnowledgeStore/title/${F}/FAQs/?searhQuery=${l}`;await a.get(e,{headers:{"Content-Type":"application/json"}}).then((e=>{const t={...$,loading:!1,result:e.data.faQsResponses,otherInfo:e.data.information};q(t)}))}catch(e){q({...$,loading:!1})}})(),(async()=>{B(!1);try{C({...S,loading:!0}),await a.get(`KnowledgeStore/title/${F}`,{headers:{"Content-Type":"application/json"}}).then((e=>{const t={...S,loading:!1,result:e.data};C(t),B(!1)}))}catch(e){C({...S,loading:!1}),B(!0)}})())}),[W,l,F]);return t.useEffect((()=>{const e=document.createElement("style");return e.innerHTML="\n    @keyframes spin {\n      from {\n        transform: rotate(0deg);\n      }\n      to {\n        transform: rotate(360deg);\n      }\n    }\n  ",document.head.appendChild(e),()=>{document.head.removeChild(e)}}),[]),e.jsx(e.Fragment,{children:e.jsxs("div",{ref:K,style:{height:"100%",color:"black"},children:[!o&&e.jsxs("div",{style:{position:"relative",padding:"0, 24px"},children:[e.jsx("input",{style:{width:"calc(100% - 48px)",borderRadius:"4px",margin:"2px 24px 0 24px",backgroundColor:"#F9FAFB",height:"45px",paddingLeft:"12px",paddingRight:"52px",outline:"none",borderWidth:"none"},placeholder:"Search for help",value:l,onChange:e=>{M(!0),d(e.target.value)}}),e.jsx("button",{children:e.jsx(c,{style:{position:"absolute",right:"36px",top:"12px",width:"20px",height:"20px"}})}),l.length>=3&&L&&R&&!m.loading||T||!$.loading||!H.loading?e.jsx("div",{ref:P,style:{width:"100%",backgroundColor:"white",boxShadow:"0px 4px 8px rgba(0, 0, 0, 0.1)",overflowY:"scroll",maxHeight:"200px",position:"absolute",top:"50px",gap:"2px",zIndex:"10",left:"0"},children:T&&E?.map(((t,s)=>e.jsx("div",{onClick:()=>{d(t),I([]),D(!1),d(t),A(!1),Q(),M(!1)},style:{display:"flex",flexDirection:"column",gap:"2px"},onMouseOver:e=>{e.target.style.backgroundColor=f(r,90)},onMouseOut:e=>{e.target.style.backgroundColor="white"},children:e.jsx("p",{style:{cursor:"pointer",paddingTop:"0.5rem",paddingBottom:"0.5rem",fontWeight:500,width:"100%",borderRadius:"4px",paddingLeft:"0.75rem",paddingRight:"0.75rem",marginBottom:"0.25rem",display:"flex",justifyContent:"flex-start",alignItems:"flex-start"},children:t},s)})))}):null]}),m.loading||$.loading||H.loading?e.jsx("div",{style:{width:"100%",fontSize:"34px",height:"40%",display:"flex",alignItems:"center",justifyContent:"center"},children:e.jsx(p,{style:{width:"60px",height:"60px",color:r,animation:"spin 2s linear infinite"}})}):e.jsx("div",{children:!k||m.loading||$.loading||H.loading?m.result.length<1&&!m.loading&&!$.loading&&!H.loading?e.jsx("div",{style:{height:"40vh",display:"flex",flexDirection:"column",alignItems:"center",justifyContent:"center",gap:"2px"},children:e.jsx("p",{style:{fontSize:"14px",color:"#667085"},children:"No result found"})}):e.jsxs("div",{style:{marginTop:"16px"},children:[!o&&!n&&e.jsxs("p",{style:{fontSize:"14px",borderBottom:"1px solid #EAECF0",color:"#101828",fontWeight:"600",padding:" 16px 0 16px 24px",marginTop:"16px"},children:[m.result.length," Collections"]}),e.jsxs("div",{style:{paddingBottom:"30px"},children:[!n&&!o&&m.result.map(((t,s)=>e.jsx(j,{setSuggestionsExist:A,faq:t,setTitleId:z,searchedTitle:l,questionsLenght:m.count},s))),n&&!o&&e.jsxs("div",{style:{borderBottom:"1px solid #EAECF0",cursor:"pointer",paddingTop:"16px",paddingBottom:"16px",paddingLeft:"24px",paddingRight:"50px",backgroundColor:g?f(r,90):"transparent"},onMouseEnter:()=>u(!0),onMouseLeave:()=>u(!1),children:[e.jsx("p",{style:{fontSize:"16px",fontWeight:"600"},children:S?.result?.name}),e.jsx(v,{answer:S?.result?.description}),e.jsxs("button",{style:{fontSize:"14px",color:"#667085",fontWeight:"500",marginTop:"8px"},children:[$.result.length," questions"]})]}),n&&!o&&$.result.map((t=>e.jsx(b,{setSuggestionsExist:A,setFaqId:N,response:t},t.id))),o&&e.jsxs("div",{style:{paddingLeft:"24px",paddingRight:"24px",marginTop:"16px"},children:[e.jsx("p",{style:{fontSize:"16px",fontWeight:"600",marginBottom:"8px"},children:H.result.question}),e.jsx(w,{answer:H.result.answer})]})]})]}):e.jsxs("div",{style:{height:"40vh",display:"flex",flexDirection:"column",alignItems:"center",justifyContent:"center",gap:"2px"},children:[e.jsx("button",{onClick:G,style:{width:"50px",height:"50px",backgroundColor:"#F9FAFB",borderRadius:"50%",display:"flex",alignItems:"center",justifyContent:"center"},children:e.jsx("img",{src:"https://e7.pngegg.com/pngimages/609/757/png-clipart-computer-icons-refresh-free-others-angle-text.png",alt:"search",style:{width:"20px",height:"20px"}})}),e.jsx("p",{style:{fontSize:"16px",color:"#101828",fontWeight:"600"},children:"Try again"}),e.jsx("p",{style:{fontSize:"14px",color:"#667085"},children:"No result found"})]})})]})})}const C=e=>{const t=new Date,s=Math.floor((t.getTime()-e.getTime())/1e3);if(s<60)return"just now";const n=Math.floor(s/60);if(n<60)return 1===n?"1 minute ago":`${n} minutes ago`;const o=Math.floor(n/60);if(o<24)return 1===o?"1 hour ago":`${o} hours ago`;const i=Math.floor(o/24);return 1===i?"1 day ago":`${i} days ago`};function k({message:t,handleResendFailedMessage:s,BotResponseLoading:n,setShowServices:o}){const{messages:i,setUserSentAMsg:r,botBrandColor:a}=x();return e.jsxs("div",{style:{width:"100%",height:"auto"},children:[e.jsx("div",{style:{width:"100%",display:"flex",justifyContent:"flex-end",marginTop:"16px"},children:e.jsx("span",{style:{backgroundColor:f(a,90),width:"auto",maxWidth:"90%",padding:"8px 16px",borderRadius:"6px",color:a,marginRight:"4px"},children:e.jsx("p",{children:t.text})})}),e.jsxs("div",{style:{paddingLeft:"32px",display:"flex",gap:"8px",fontSize:"12px",width:"100%",justifyContent:"flex-end"},children:[t.error&&e.jsxs("div",{style:{display:"flex",gap:"4px",justifyContent:"center",alignItems:"center"},children:[e.jsx("p",{style:{color:"#ff0000",marginTop:"2px"},children:"Send failed."}),e.jsx("button",{style:{color:"#00f",marginTop:"2px",textDecoration:"underline",cursor:"pointer"},onClick:()=>{r(!0),s(t.text),i.pop()},children:"Retry"})]}),t.pending&&e.jsx("div",{style:{display:"flex",alignItems:"center",justifyContent:"center"},children:e.jsx("p",{style:{color:"#A6A7A9",marginTop:"2px"},children:"Sending..."})}),t.delivered&&e.jsx("p",{style:{color:"#A6A7A9",marginTop:"2px"},children:"Delivered"}),e.jsx("p",{style:{color:"#9a9a9a",marginTop:"2px"},children:C(t.timestamp)})]})]})}function B({message:s,BotResponseLoading:n}){const{renderSelectedOption:o,setShowButtons:i,showButtons:r,setMessages:a,botBrandColor:l,botAssetsUrl:d,botBrandName:c}=x();return t.useEffect((()=>{s.buttons&&s.buttons.length>0&&i(!0)}),[s.buttons]),e.jsxs(e.Fragment,{children:[e.jsxs("div",{style:{width:"100%",height:"auto"},children:[s.delivered&&e.jsxs("div",{style:{width:"100%",height:"auto"},children:[e.jsxs("div",{style:{display:"flex",alignItems:"flex-end",marginTop:"16px"},children:[e.jsx("img",{src:`${d}/logo-icon.png`,alt:"logo",style:{marginRight:"8px",width:"20px",height:"20px"}}),e.jsxs("span",{style:{wordBreak:"break-word",overflowWrap:"break-word",backgroundColor:"#EEEEEE",width:"auto",maxWidth:"100%",padding:"8px 16px",borderRadius:"6px",color:"#505050"},children:[e.jsx(w,{answer:s.text}),e.jsx("div",{style:{width:"100%",display:"flex",flexDirection:"column",gap:"8px",marginTop:"8px"},children:s?.buttons?.map(((t,s)=>e.jsx("button",{style:{display:"imBack"===t.type?"none":"block",border:`1px solid ${l}`,width:"100%",fontWeight:"500",borderRadius:"8px",padding:"8px",transition:"background-color 0.3s, color 0.3s",cursor:"pointer"},type:"button",onClick:()=>{window.open(t.value,"_blank")},onMouseOver:e=>{const t=e.target;t.style.backgroundColor="#007BFF",t.style.color="white"},onMouseOut:e=>{const t=e.target;t.style.backgroundColor="white",t.style.color="inherit"},children:t.title},s)))})]})]}),e.jsx("div",{style:{paddingLeft:"32px",display:"flex",gap:"8px",fontSize:"12px",width:"100%",justifyContent:"flex-start"},children:e.jsxs("p",{style:{color:"#9a9a9a"},children:[c,"Bot"]})})]}),s.error&&e.jsxs("div",{style:{width:"100%",height:"auto"},children:[e.jsxs("div",{style:{display:"flex",alignItems:"flex-end",marginTop:"16px"},children:[e.jsx("img",{src:`${d}/logo-icon.png`,alt:"error",style:{marginRight:"8px",width:"20px",height:"20px"}}),e.jsx("span",{style:{backgroundColor:"#EEEEEE",width:"auto",maxWidth:"65%",padding:"8px 16px",borderRadius:"6px",color:"#505050"},children:e.jsx("p",{children:"Error from bot"})})]}),e.jsx("div",{style:{paddingLeft:"32px",display:"flex",gap:"8px",fontFamily:"Nunito, sans-serif",fontSize:"12px",width:"100%",justifyContent:"flex-start"},children:e.jsxs("p",{style:{color:"#9a9a9a"},children:[c,"Bot"]})})]}),(s.pending||!s.delivered)&&n()]}),s.buttonsVisible&&e.jsx("div",{style:{width:"100%",display:"flex",flexDirection:"column",gap:"8px",marginTop:"8px"},children:s?.buttons?.map(((t,n)=>e.jsx("button",{style:{display:"imBack"===t.type?"block":"none",border:"1px solid #efefef",width:"100%",fontWeight:"500",borderRadius:"8px",padding:"8px",transition:"background-color 0.3s, color 0.3s",cursor:"pointer"},type:"button",onClick:()=>{"imBack"===t.type?(o(t.value),i(!1),a((e=>e.map((e=>e===s?{...e,buttonsVisible:!1}:e))))):window.open(t.value,"_blank")},onMouseOver:e=>{const t=e.target;t.style.backgroundColor=l,t.style.color="white"},onMouseOut:e=>{const t=e.target;t.style.backgroundColor="white",t.style.color="inherit"},children:t.title},n)))})]})}function E(){const{setMessages:s,messages:o,botResponseIsLoading:i,sendMessage:r,botToken:a,setBotToken:d,setUserId:c,userId:g,setErrorExist:u,errorExist:m,loading:y,setLoading:f,getMessage:j,isLiveAgent:b,setUserSentAMsg:w,userSentAMsg:v,waterMark:S,shouldDeactivate:C,setShouldDeactivate:E,setUserHaveBeenDeactivated:I,userHaveBeenDeactivated:T,tabNumber:M,botEndPoint:R,botAssetsUrl:D,botBrandName:L,botBrandColor:A}=x(),F=h(R),z=t.useRef(null),[W,N]=t.useState(""),[$,q]=t.useState(!1),H=n.v4();t.useEffect((()=>{const e=localStorage.getItem("userId");e?c(e):e||localStorage.setItem("userId",H)}),[]),t.useEffect((()=>{const e=document.createElement("style");return e.innerHTML="\n    @keyframes spin {\n      from {\n        transform: rotate(0deg);\n      }\n      to {\n        transform: rotate(360deg);\n      }\n    }\n\n    @keyframes typing {\n      0%, 80%, 100% {\n        transform: scale(0);\n        opacity: 0.3;\n      }\n      40% {\n        transform: scale(1);\n        opacity: 1;\n      }\n    }\n  ",document.head.appendChild(e),()=>{document.head.removeChild(e)}}),[]),t.useEffect((()=>{!a.length&&a.length<=1&&g&&q(!0)}),[a,g]),t.useEffect((()=>{a.length>1||!g||(async()=>{u(!1),f(!0);try{const e=await fetch(`${R}/Bot/${g}/token/startconversation`,{method:"GET"}),{token:t,conversationId:s}=await e.json();localStorage.setItem("conversationId",s),d(t),f(!1),f(!1)}catch(e){u(!0),f(!1)}})()}),[g,$,a.length]),t.useEffect((()=>{const e=setInterval((()=>{s((e=>[...e]))}),6e4);return()=>clearInterval(e)}),[]),t.useEffect((()=>{let e;return b&&v&&(e=setInterval((async()=>{await j()}),5e3)),()=>{e&&clearInterval(e)}}),[b,v,S]),t.useEffect((()=>{const e=setInterval((()=>{U()}),3e6);return()=>clearInterval(e)}),[]);const U=async()=>{u(!1),f(!0);const e=localStorage.getItem("conversationId");try{const t={token:a,conversationId:e},s=await F.post("/Bot/token/refresh",t,{headers:{"Content-Type":"application/json"}}),{token:n,conversationId:o}=s.data;d(n),f(!1),f(!1)}catch(e){f(!1)}};t.useEffect((()=>{z.current&&(z.current.scrollTop=z.current.scrollHeight)}),[o]);const P=()=>{""!==W.trim()&&(r(W),N(""))},K=e=>{r(e)};t.useEffect((()=>{1===o.length&&a.length>1&&"bot"===o[0].sender&&j()}),[o.length,a.length]),t.useEffect((()=>{if(o?.length>=1){const t=o[o.length-1].timestamp,s=(e=t,(new Date).getTime()-e.getTime()>=54e4);E(s)}var e}),[o]);t.useEffect((()=>{C&&o?.length>=1&&!T&&(async()=>{const e=localStorage.getItem("conversationId");try{const t={userId:g,conversationId:e,BotToken:a},s=await F.post(`/Bot/${g}/conversations/${e}/InActiveNotification`,t,{headers:{BotToken:a}});200===s?.status&&(j(),I(!0)),E(!1)}catch(e){}})()}),[C,o,T]);const Q={width:"6px",height:"6px",backgroundColor:"#505050",borderRadius:"50%",animation:"typing 1.2s infinite"},G=()=>e.jsx("div",{style:{width:"100%"},children:e.jsxs("div",{style:{display:"flex",alignItems:"flex-end",marginTop:"16px"},children:[e.jsx("img",{src:`${D}/logo-icon.png`,alt:L,style:{marginRight:"8px",width:"20px",height:"20px"}}),e.jsxs("div",{style:{backgroundColor:"#EEEEEE",color:"#505050",width:"12%",padding:"0px 4px",height:"24px",borderRadius:"6px",display:"flex",justifyContent:"space-evenly",alignItems:"center"},children:[e.jsx("span",{style:Q}),e.jsx("span",{style:{...Q,animationDelay:"0.2s"}}),e.jsx("span",{style:{...Q,animationDelay:"0.4s"}})]})]})});return e.jsx("div",{style:{height:"100%"},children:a.length>1?e.jsxs("div",{style:{height:"calc(100% - 70px)",display:"flex",flexDirection:"column"},children:[e.jsx("div",{style:{flexGrow:1,padding:"0 20px",overflowY:"auto"},ref:z,children:e.jsxs("div",{style:{display:"flex",flexDirection:"column",justifyContent:"flex-end",minHeight:"100%"},children:["bot"===o[0]?.sender&&o.slice(1).map(((t,s)=>e.jsx("div",{children:"user"===t.sender?e.jsx(k,{message:t,handleResendFailedMessage:K,BotResponseLoading:G}):e.jsx(B,{message:t,BotResponseLoading:G,botResponseIsLoading:i})},s))),"user"===o[0]?.sender&&o.map(((t,s)=>e.jsx("div",{children:"user"===t.sender?e.jsx(k,{message:t,handleResendFailedMessage:K,BotResponseLoading:G}):e.jsx(B,{message:t,BotResponseLoading:G,botResponseIsLoading:i})},s)))]})}),e.jsxs("div",{style:{padding:"0 20px"},children:[e.jsx("textarea",{style:{height:"60px",display:"flex",justifyContent:"center",width:"90%",outline:"none",fontSize:"14px",paddingLeft:"12px",paddingRight:"24px",overflowY:"scroll",position:"absolute",right:"20px",bottom:"0",fontWeight:"500",whiteSpace:"normal",paddingTop:"16px",borderTop:"1px solid #e6e6e6",resize:"none"},placeholder:"Type your message",value:W,onChange:e=>{const{value:t}=e.target;N(t)},onKeyDown:e=>{const{key:t}=e;"Enter"===t&&""!==W.trim()&&(e.preventDefault(),w(!0),P())}}),e.jsx("button",{type:"button",onClick:P,style:{position:"absolute",right:"24px",bottom:"20px"},children:e.jsx(l,{style:{width:"24px"}})})]})]}):y?e.jsx("div",{style:{width:"100%",fontSize:"34px",height:"80%",display:"flex",alignItems:"center",justifyContent:"center"},children:e.jsx(p,{style:{width:"60px",height:"60px",color:A,animation:"spin 2s linear infinite"}})}):m?e.jsxs("div",{style:{height:"40vh",display:"flex",flexDirection:"column",alignItems:"center",justifyContent:"center",gap:"8px"},children:[e.jsx("button",{onClick:()=>q(!$),style:{width:"50px",height:"50px",backgroundColor:"#F9FAFB",borderRadius:"50%",display:"flex",alignItems:"center",justifyContent:"center"},children:e.jsx("img",{src:"https://e7.pngegg.com/pngimages/609/757/png-clipart-computer-icons-refresh-free-others-angle-text.png",alt:"search",style:{}})}),e.jsx("p",{style:{fontWeight:600,color:"#101828"},children:"Try again"})]}):null})}function I(){const{tabNumber:t}=x();return e.jsxs("div",{style:{width:"100%",height:"100%",overflowX:"hidden",margin:"0",marginTop:"1rem",fontSize:"14px"},children:[1===t&&e.jsx(y,{}),2===t&&e.jsx(E,{}),3===t&&e.jsx(S,{})]})}exports.BotContextProvider=({children:s,initialAccessToken:n,liveBotEndPoint:o,brandColor:i,assetsUrl:r,brandName:a})=>{const[l,d]=t.useState(!1),[c,p]=t.useState(!1),[x,u]=t.useState(!1),[m,y]=t.useState(!1),[f,j]=t.useState(1),[b,w]=t.useState(""),[v,S]=t.useState([{id:"",text:"",sender:"bot",timestamp:new Date,pending:!1,delivered:!0,error:!1,buttons:[]}]),[C,k]=t.useState(!1),[B,E]=t.useState(!1),[I,T]=t.useState(""),[M,R]=t.useState(""),[D,L]=t.useState(""),[A,F]=t.useState(!1),[z,W]=t.useState(!1),[N,$]=t.useState(!1),[q,H]=t.useState(!1),[U,P]=t.useState(!1),[K,Q]=t.useState(n||""),[G,O]=t.useState((()=>o||"")),[Y,_]=t.useState((()=>i||"#000000")),[V,X]=t.useState((()=>r||"")),[J,Z]=t.useState((()=>a||"")),ee=h(G),te=e=>{se(e)},se=async e=>{const t=localStorage.getItem("conversationId"),s={id:"",text:e,sender:"user",timestamp:new Date,pending:!0,delivered:!1,error:!1,buttons:[]};S((e=>[...e,s]));const n={message:e};try{const e=await ee.post(`Bot/${D}/conversations/${t}/SendMessage`,n,{headers:{BotToken:M}});200!==e.status&&502!==e.status&&504!==e.status||(s.delivered=!0,s.pending=!1,await ne(),p(!1),P(!1))}catch(e){!e.response||502!==e.response.status&&504!==e.response.status?(s.delivered=!1,s.pending=!1,s.error=!0):(s.delivered=!0,s.pending=!1,$(!0),await ne(),p(!1),P(!1)),S((e=>[...e]))}},ne=async()=>{const e=localStorage.getItem("conversationId"),t={id:"",text:"",sender:"bot",timestamp:new Date,pending:!0,delivered:!1,error:!1,buttons:[]};S((e=>[...e,t]));try{const t=await ee.get(`Bot/${D}/conversations/${e}/GetMessages?waterMark=${b}`,{headers:{BotToken:M}});if(200===t.status){const e=t.data.botMessages.map((e=>({text:e.text,sender:"bot",timestamp:new Date,pending:!1,delivered:!0,error:!1,buttons:e.buttons||[],buttonsVisible:!0})));S((t=>[...t.map(((e,s)=>s===t.length-2&&"user"===e.sender?{...e,pending:!1,delivered:!0}:{...e,buttonsVisible:!1})).slice(0,-1),...e])),w(t.data.waterMark),t?.data?.botMessages.length>0?$(t?.data?.isLiveAgent):$((e=>e))}}catch(e){S((e=>[...e.map(((t,s)=>s===e.length-2&&"user"===t.sender?{...t,pending:!1,delivered:!1,error:!0}:t)).slice(0,-1)]))}};return e.jsx(g.Provider,{value:{showButtons:B,setShowButtons:E,showFullContent:m,setShowFullContent:y,showChatBot:l,setShowChatBot:d,messages:v,setMessages:S,getMessage:ne,botResponseIsLoading:C,setBotResponseIsLoading:k,sendMessage:se,handleButtonClick:te,renderSelectedOption:e=>{te(e)},tabNumber:f,setTabNumber:j,showDetailedResponse:x,setShowDetailedResponse:u,botConversationId:I,setBotConversationId:T,botToken:M,setBotToken:R,userId:D,setUserId:L,loading:A,setLoading:F,errorExist:z,setErrorExist:W,waterMark:b,setWaterMark:w,isLiveAgent:N,setIsLiveAgent:$,userSentAMsg:q,setUserSentAMsg:H,shouldDeactivate:U,setShouldDeactivate:P,setUserHaveBeenDeactivated:p,userHaveBeenDeactivated:c,accessTokenString:K,setAccessTokenString:Q,botEndPoint:G,setBotEndPoint:O,botBrandColor:Y,setBotBrandColor:_,setBotAssetsUrl:X,botAssetsUrl:V,botBrandName:J,setBotBrandName:Z},children:s})},exports.ChatBot=function(){const{tabNumber:s,setShowFullContent:n,setShowChatBot:o,showChatBot:i,setShowDetailedResponse:r,accessTokenString:a,botBrandColor:l}=x(),d=t.useRef(null),[c,h]=t.useState(!0),[g,y]=t.useState(""),[f,j]=t.useState(!1);return t.useEffect((()=>{const e=document.createElement("link");return e.href="https://fonts.googleapis.com/css2?family=Mulish:ital,wght@0,200..1000;1,200..1000&display=swap",e.rel="stylesheet",document.head.appendChild(e),()=>{document.head.removeChild(e)}}),[]),t.useEffect((()=>{2!==s&&(r(!1),n(!1))}),[s]),t.useEffect((()=>{(async()=>{try{j(!1),h(!0),y(""),"access_token"===a?(o(!0),h(!1),y(""),j(!1)):a?"access_token"!==a&&(h(!1),j(!0),y("401")):(h(!1),j(!0),y("400"))}catch(e){h(!1),j(!0),y("401")}})()}),[]),t.useEffect((()=>{const e=document.createElement("style");return e.innerHTML="\n    @keyframes spin {\n      from {\n        transform: rotate(0deg);\n      }\n      to {\n        transform: rotate(360deg);\n      }\n    }\n  ",document.head.appendChild(e),()=>{document.head.removeChild(e)}}),[]),e.jsxs("div",{style:{fontFamily:"Mulish",width:"100vw"},className:"",children:[e.jsx("div",{style:{position:"fixed",top:0,right:0,bottom:0,left:0,display:"flex",justifyContent:"flex-end",backgroundColor:"rgba(0, 0, 0, 0.5)",zIndex:50,transitionDuration:"200ms"},children:e.jsxs("div",{ref:d,style:{width:"100vw",maxWidth:"400px",height:"80vh",border:"none",borderRadius:"16px",backgroundColor:"white",boxShadow:"0 4px 6px rgba(0, 0, 0, 0.1)",outline:"none"},children:[i&&e.jsxs("div",{style:{width:"100%",height:"80vh"},children:[e.jsx("div",{style:{width:"100%",height:"10%",padding:"1.25rem 0"},children:e.jsx(u,{})}),e.jsx("div",{style:{width:"100%",height:2!==s?"75%":"85%",position:"relative"},children:e.jsx(I,{})}),e.jsx("div",{style:{display:2!==s?"flex":"none",width:"100%",height:"15%"},children:e.jsx(m,{})})]}),f&&e.jsxs("div",{style:{width:"100%",height:"80vh",display:"flex",alignItems:"center",justifyContent:"center",flexDirection:"column"},children:[!c&&"400"===g&&e.jsx("img",{src:"https://media.istockphoto.com/id/1457314285/vector/400-four-hundred-icon-with-reflection-on-white-background.jpg?s=612x612&w=0&k=20&c=9XIeiARR8jPCx0UdcqNAzSe4slo050ix1yXpW1NyvGg=",alt:"400",style:{width:"auto",height:"auto",maxWidth:"100%",maxHeight:"100%"}}),!c&&"401"===g&&e.jsx("img",{src:"https://lh4.googleusercontent.com/proxy/RI9KRi5cyi5n92Msn-PCl5pxvwTAHYNfKhTCdmxag4aDkQOLAFBlt3xO9pTuGjDTfBU1PwjJSj034YCYSbpu4tENe2S6Q1dscLAkxo3ot0Ga_78yjvg_",alt:"401",style:{width:"auto",height:"auto",maxWidth:"100%",maxHeight:"100%"}}),c&&e.jsx(p,{style:{width:"60px",height:"60px",color:l,animation:"spin 2s linear infinite"}}),e.jsx("p",{style:{color:l,fontSize:"14px",fontWeight:600,marginTop:"1rem"},children:"401"===g?"Unauthorized":"400"===g?"Bad Request":""}),e.jsx("p",{children:"Contact Your Administrator"})]})]})}),e.jsx("div",{style:{opacity:0,transitionProperty:"opacity, transform",transitionTimingFunction:"ease-out",transitionDuration:"200ms",transform:"translateY(0)"}})]})},exports.useBotContext=x;
//# sourceMappingURL=index.js.map