zestchatbotwidgetpackage/dist/esm/index.js

chatbot widget npm package

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