wemachatbotwidgetpackage/dist/esm/index.js

wema 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 l}from"react";import a from"axios";import{v4 as d}from"uuid";import c from"style-inject";import p from"typewriter-effect";const h="https://alat-cs-dev-app-infoapi-weurope.azurewebsites.net/api/v1.0",g=a.create({baseURL:h,headers:{Accept:"text/plain","Content-Type":"application/json"}}),u=o(void 0),m=({children:t})=>{const[n,o]=i(!1),[s,r]=i(!1),[l,a]=i(!1),[d,c]=i(1),[p,h]=i(""),[m,x]=i([{id:"",text:"",sender:"bot",timestamp:new Date,pending:!1,delivered:!0,error:!1,buttons:[]}]),[y,f]=i(!1),[w,b]=i(!1),[v,C]=i(""),[k,S]=i(""),[T,I]=i(""),[E,B]=i(!1),[R,j]=i(!1),L=e=>{D(e)},D=async e=>{const t=localStorage.getItem("conversationId"),n={id:"",text:e,sender:"user",timestamp:new Date,pending:!0,delivered:!1,error:!1,buttons:[]};x((e=>[...e,n]));const o={message:e};try{200===(await g.post(`Bot/user/${T}/conversations/${t}/SendMessage`,o,{headers:{BotToken:k}})).status&&(n.delivered=!0,n.pending=!1,await A())}catch(e){n.delivered=!1,n.pending=!1,n.error=!0,x((e=>[...e]))}},A=async()=>{const e=localStorage.getItem("conversationId"),t={id:"",text:"",sender:"bot",timestamp:new Date,pending:!0,delivered:!1,error:!1,buttons:[]};x((e=>[...e,t]));try{const t=await g.get(`Bot/user/${T}/conversations/${e}/GetMessages?waterMark=${p}`,{headers:{BotToken:k}});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})));x((t=>[...t.map(((e,n)=>n===t.length-2&&"user"===e.sender?{...e,pending:!1,delivered:!0}:{...e,buttonsVisible:!1})).slice(0,-1),...e])),h(t.data.waterMark)}}catch(e){x((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(u.Provider,{value:{showButtons:w,setShowButtons:b,showFullContent:l,setShowFullContent:a,fetchBotResponse:async()=>{if(n){const e={id:"",text:"",sender:"user",timestamp:new Date,pending:!0,delivered:!1,error:!1,buttons:[]};f(!0);const t={userMessage:"Hi",userMessageTimeStamp:new Date};try{const n=await g.post("/INFINIONInfo/chat",t);200===n.status&&(e.buttons=n.data.buttons,e.error=!1,e.text=n.data.botMessage,e.pending=!1,e.sender="bot",f(!1),x((t=>[...t,e])))}catch(t){console.error("Error fetching bot response:",t),e.delivered=!1,e.pending=!1,e.error=!0,e.sender="bot",e.text="Error sending message",x((t=>[...t,e]))}}},showChatBot:n,setShowChatBot:o,messages:m,setMessages:x,getMessage:A,botResponseIsLoading:y,setBotResponseIsLoading:f,sendMessage:D,handleButtonClick:L,renderSelectedOption:e=>{L(e)},tabNumber:d,setTabNumber:c,showDetailedResponse:s,setShowDetailedResponse:r,botConversationId:v,setBotConversationId:C,botToken:k,setBotToken:S,userId:T,setUserId:I,loading:E,setLoading:B,errorExist:R,setErrorExist:j,waterMark:p,setWaterMark:h},children:t})},x=()=>{const e=s(u);if(!e)throw new Error("useWemaContext must be used within a WemaContextProvider");return e};function y(){const{tabNumber:n,setTabNumber:o,showFullContent:s,setShowFullContent:l,showDetailedResponse:a,setShowDetailedResponse:c,setErrorExist:p,setLoading:u,setWaterMark:m,setMessages:y,getMessage:f,setBotToken:w,setUserId:b,userId:v}=x(),[C,k]=i(""),[S,T]=i(!1),I=d();r((()=>{const e=localStorage.getItem("userId");e?b(e):e||localStorage.setItem("userId",I)}),[]);return r((()=>{(async()=>{try{await g.get("/Bot/homelogo",{headers:{"Content-Type":"application/json"}}).then((e=>{k(e?.data.path)}))}catch(e){console.log(e)}})()}),[]),t("div",{style:{color:"#050505",width:"100%",borderBottom:1!==n?"#D9D9D9 solid 1px":"none",position:"relative"},children:[1===n?e("img",{src:"https://alatcsdevstoreweurope.blob.core.windows.net/public/homepagelogo.svg",alt:"wema logo",style:{width:"72px",height:"32px"}}):t("div",{children:[e("button",{onClick:()=>{s?l(!1):a?(l(!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:"chat-icon",style:{width:"20px",height:"20px"}})}),e("button",{onClick:async()=>{p(!1),u(!0);try{const e=await fetch(`${h}/Bot/user/${v}/token/startconversation`,{method:"GET"}),{token:t,conversationId:n}=await e.json();localStorage.setItem("conversationId",n),w(t),u(!1),T(!1),m(""),u(!1),y([]),f()}catch(e){p(!0),u(!1),console.log("the catch response",e)}},onMouseEnter:()=>T(!0),onMouseLeave:()=>T(!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"}})}),S&&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 f(){const{tabNumber:n,setTabNumber:o}=x();return e("div",{className:"theFont",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("img",1===n?{src:"https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRm4HpjvUVF5okdHbWURGVoylRUmaYeL7JZPA&s",alt:"home",style:{width:"20px",height:"20px"}}:{src:"https://www.clker.com/cliparts/Q/7/J/K/1/d/house-grey-md.png",alt:"home",style:{width:"20px",height:"20px"}}),e("p",{style:{color:1===n?"#A90836":"#050505"},children:"Home"})]}),t("button",{style:{display:"flex",flexDirection:"column",alignItems:"center",justifyContent:"center"},onClick:()=>o(2),children:[e("img",2===n?{src:"https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQgrfzViZydwCmDBUbMQLzU_wEQPSL83AEBNg&s",alt:"message",style:{width:"20px",height:"20px"}}:{src:"https://as1.ftcdn.net/v2/jpg/02/63/51/56/1000_F_263515657_GxaUp5s5uH0rqGRLQLomV3s0gWcm2mP8.jpg",alt:"message",style:{width:"20px",height:"20px"}}),e("p",{style:{color:2===n?"#A90836":"#050505"},children:"Messages"})]}),t("button",{style:{display:"flex",flexDirection:"column",alignItems:"center",justifyContent:"center"},onClick:()=>o(3),children:[e("img",3===n?{src:"https://www.kindpng.com/picc/m/71-719789_pink-question-mark-icon-pbj-management-logo-hd.png",alt:"faqs",style:{width:"20px",height:"20px"}}:{src:"https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSE-NtVDAVWrDuJTSwXDcLolM1rHbOGDY-Itpoz7qjLPg&s",alt:"faqs",style:{width:"20px",height:"20px"}}),e("p",{style:{color:3===n?"#A90836":"#050505"},children:"FAQs"})]})]})})}c("css_248z");const w=()=>{const{setTabNumber:n}=x(),[o,s]=i(""),[l,a]=i(""),[d,c]=i("");r((()=>{(async()=>{try{await g.get("/Home/welcomemessage",{headers:{"Content-Type":"application/json"}}).then((e=>{s(e?.data.title),a(e?.data.description)}))}catch(e){console.log(e)}})()}),[]),r((()=>{(async()=>{try{await g.get("/Home/homeimage",{headers:{"Content-Type":"application/json"}}).then((e=>{c(e?.data.path)}))}catch(e){console.log(e)}})()}),[]);return t("div",{className:"theFont",style:{color:"black",cursor:"pointer",padding:"0 24px",overflow:"hidden"},onClick:()=>n(2),children:[e("p",{style:{fontWeight:700,fontSize:"20px",margin:"0"},children:o}),e("p",{style:{fontSize:"14px",margin:"0"},children:l}),e("div",{style:{width:"100%",display:"flex",justifyContent:"center",marginTop:"6%"},children:e("img",{src:d,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("img",{src:"https://e7.pngegg.com/pngimages/841/271/png-clipart-computer-icons-send-miscellaneous-angle.png",alt:"chat with Wema",style:{position:"absolute",right:"4px",bottom:"24px",width:"20px",height:"20px"}})]})]})},b=({faq:n,questionsLenght:o,setTitleId:s,setSuggestionsExist:r})=>{const{setShowFullContent:l,showFullContent:a,setShowDetailedResponse:d}=x(),[c,p]=i(!1);return e("div",{style:{position:"relative"},children:!a&&e("div",{onClick:()=>{r(!1),d(!1),l(!0),s(n.id)},onMouseEnter:()=>p(!0),onMouseLeave:()=>p(!1),style:{cursor:"pointer"},children:t("div",{style:{borderBottom:"1px solid #EAECF0",paddingTop:"16px",paddingBottom:"16px",paddingRight:"50px",paddingLeft:"24px",backgroundColor:c?"#faf0f3":"transparent"},children:[e("p",{style:{fontWeight:"600",color:"#A90836"},children:n.name}),e("p",{style:{fontSize:"14px",color:"#101828",marginTop:"8px"},children:n.description}),e("img",{src:"https://cdn-icons-png.flaticon.com/256/12143/12143718.png",alt:"faq",style:{position:"absolute",top:"40%",right:"16px",width:"20px",height:"20px"}})]})})})},v=({response:n,setFaqId:o,setSuggestionsExist:i})=>{const{setShowFullContent:s,setShowDetailedResponse:r}=x();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="#faf0f3"},onMouseLeave:e=>{e.currentTarget.style.backgroundColor="transparent"},children:[e("p",{style:{fontWeight:"600",fontSize:"14px",color:"#101828"},children:n?.question}),e("img",{src:"https://cdn-icons-png.flaticon.com/256/12143/12143718.png",alt:"faq",style:{position:"absolute",top:"40%",right:"16px",width:"20px",height:"20px"}})]})};function C({answer:n}){const o=/\n(\d+\.\s|\*\s|-\s)/.test(n),i=n=>{const o=/([.!?])\s/,i=n?.split(/\*\*(.*?)\*\*/g);return i?.map(((n,i)=>{if(i%2==1)return e("strong",{style:{fontWeight:700},children:n},i);{const s=/\n\n/g,r=n.split(s);return r.map(((n,s)=>{const l=n.split(o),a=[];for(let n=0;n<l.length;n+=2)n+1<l.length?a.push(t("span",{children:[l[n],l[n+1]," "]},`${i}-${s}-${n}`)):a.push(t("span",{children:[l[n]," "]},`${i}-${s}-${n}`)),(n/2+1)%2==0&&n+2<l.length&&a.push(e("br",{},`br-${i}-${s}-${n}`));return s<r.length-1&&(a.push(e("br",{},`br-${i}-${s}-1`)),a.push(e("br",{},`br-${i}-${s}-2`))),a}))}}))},s=o?e("div",{children:n.split("\n").map(((n,o)=>{if(!/^(\d+\.\s|\*\s|-\s)/.test(n))return e("p",{style:{listStyleType:"none"},children:i(n)},o);{const s=n.match(/^(\d+\.\s|\*\s|-\s)(.*)/);if(s)return t("span",{style:{display:"block",marginBottom:"8px"},children:[e("strong",{children:s[1]})," ",i(s[2]),e("br",{})]},o)}}))}):e("p",{children:i(n)});return e("div",{children:s})}function k({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 S(){const{showChatBot:o,showFullContent:s,showDetailedResponse:a}=x(),[d,c]=i(""),[p,h]=i(!1),[u,m]=i(!1),[y,f]=i({loading:!1,result:[],count:0}),[w,S]=i({loading:!1,result:{}}),[T,I]=i(!1),[E,B]=i(),[R,j]=i(!1),[L,D]=i(""),[A,M]=i(""),[F,W]=i({loading:!1,result:[],otherInfo:""}),[N,z]=i({loading:!1,result:{}}),$=l(null),q=l(null);r((()=>{q.current&&(q.current.scrollTop=0)}),[a,s]),r((()=>{const e=e=>{$.current&&!$.current.contains(e.target)&&e.target.closest(".outside-div")&&j(!1)},t=e=>{"Escape"===e.key&&j(!1)};return document.addEventListener("click",e),document.addEventListener("keydown",t),()=>{document.removeEventListener("click",e),document.removeEventListener("keydown",t)}}),[]);const G=async()=>{I(!1);try{f({...y,loading:!0}),await g.get(`KnowledgeStore/title?searhQuery=${d}`,{headers:{"Content-Type":"application/json"}}).then((e=>{const t={...y,loading:!1,result:e.data.titles};f(t),j(!1),I(!1)}))}catch(e){f({...y,loading:!1}),console.log(e),I(!0)}},H=async()=>{I(!1);try{f({...y,loading:!0,count:0}),await g.get("/KnowledgeStore/title",{headers:{"Content-Type":"application/json"}}).then((e=>{const t={...y,loading:!1,result:e.data.titles,count:e.data.count};f(t),I(!1)}))}catch(e){f({...y,loading:!1}),I(!0),console.log(e)}};return r((()=>{d.length>=3?(G(),(async()=>{I(!1);try{f({...y,loading:!0}),await g.get(`KnowledgeStore/title/autocomplete?searhQuery=${d}`,{headers:{"Content-Type":"application/json"}}).then((e=>{B(e.data),I(!1)}))}catch(e){f({...y,loading:!1}),console.log(e),I(!0)}})()):H()}),[o,d]),r((()=>{E&&E?.length>=1&&j(!0)}),[E]),r((()=>{""!==L&&((async()=>{try{z({...N,loading:!0}),await g.get(`KnowledgeStore/title/${L}/FAQs/${A}`,{headers:{"Content-Type":"application/json"}}).then((e=>{const t={...N,loading:!1,result:e.data};z(t)}))}catch(e){z({...N,loading:!1})}})(),(async()=>{try{W({...F,loading:!0});const e=""===d?`/KnowledgeStore/title/${L}/FAQs`:`/KnowledgeStore/title/${L}/FAQs/?searhQuery=${d}`;await g.get(e,{headers:{"Content-Type":"application/json"}}).then((e=>{const t={...F,loading:!1,result:e.data.faQsResponses,otherInfo:e.data.information};W(t)}))}catch(e){W({...F,loading:!1})}})(),(async()=>{I(!1);try{S({...w,loading:!0}),await g.get(`KnowledgeStore/title/${L}`,{headers:{"Content-Type":"application/json"}}).then((e=>{const t={...w,loading:!1,result:e.data};S(t),I(!1)}))}catch(e){S({...w,loading:!1}),I(!0),console.log(e)}})())}),[A,d,L]),e(n,{children:t("div",{ref:q,style:{height:"100%",color:"black"},children:[!a&&t("div",{style:{position:"relative",padding:"0, 24px"},className:"relative px-[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:d,onChange:e=>{c(e.target.value)}}),e("button",{children:e("img",{src:"https://www.citypng.com/public/uploads/preview/download-black-search-icon-button-png-7017516949749341050xfl088.png",alt:"search",style:{position:"absolute",right:"36px",top:"12px",width:"20px",height:"20px"}})}),d.length>=3&&R?e("div",{ref:$,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:E?.map(((t,n)=>e("div",{onClick:()=>{c(t),j(!1),G()},style:{cursor:"pointer",paddingTop:"0.5rem",paddingBottom:"0.5rem",backgroundColor:u?"#fcf2f5":"transparent",fontWeight:500,borderRadius:"4px",paddingLeft:"0.75rem",paddingRight:"0.75rem",marginBottom:"0.25rem",display:"flex",justifyContent:"flex-start",alignItems:"flex-start",transitionDuration:"300ms"},children:e("p",{onMouseEnter:()=>m(!0),onMouseLeave:()=>m(!1),style:{cursor:"pointer",backgroundColor:u?"#fcf2f5":"white"},children:t},n)})))}):null]}),y.loading?e("div",{style:{width:"100%",fontSize:"34px",height:"40%",display:"flex",alignItems:"center",justifyContent:"center"},children:e("img",{src:"https://behalacollege.in/display_board/assets/images/ajax-spinner.gif",alt:"loading",className:"spinner-icon",style:{width:"60px",height:"60px"}})}):e("div",{children:T||y.result.length<1?t("div",{style:{height:"40vh",display:"flex",flexDirection:"column",alignItems:"center",justifyContent:"center",gap:"2px"},children:[e("button",{onClick:H,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"})]}):t("div",{style:{marginTop:"16px"},children:[!a&&!s&&t("p",{style:{fontSize:"16px",borderBottom:"1px solid #EAECF0",color:"#101828",padding:" 16px 0 16px 24px",marginTop:"16px"},children:[y.result.length," Collections"]}),t("div",{style:{paddingBottom:"30px"},children:[!s&&!a&&y.result.map(((t,n)=>e(b,{setSuggestionsExist:j,faq:t,setTitleId:D,searchedTitle:d,questionsLenght:y.count},n))),s&&!a&&t("div",{style:{borderBottom:"1px solid #EAECF0",cursor:"pointer",paddingTop:"16px",paddingBottom:"16px",paddingLeft:"24px",paddingRight:"50px",backgroundColor:p?"#faf0f3":"transparent"},onMouseEnter:()=>h(!0),onMouseLeave:()=>h(!1),children:[e("p",{style:{fontSize:"16px",fontWeight:"600"},children:w?.result?.name}),e(k,{answer:w?.result?.description}),t("button",{style:{fontSize:"14px",color:"#667085",fontWeight:"500",marginTop:"8px"},children:[F.result.length," questions"]})]}),s&&!a&&F.result.map((t=>e(v,{setSuggestionsExist:j,setFaqId:M,response:t},t.id))),a&&t("div",{style:{paddingLeft:"24px",paddingRight:"24px",marginTop:"16px"},children:[e("p",{style:{fontSize:"16px",fontWeight:"600",marginBottom:"8px"},children:N.result.question}),e(C,{answer:N.result.answer})]})]})]})})]})})}const T=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 I({message:n,handleResendFailedMessage:o,BotResponseLoading:i,setShowServices:s}){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:"#faf0f3",width:"auto",maxWidth:"90%",padding:"8px 16px",borderRadius:"6px",color:"#A90836",marginRight:"4px"},children:e("p",{children:n.text})})}),t("div",{style:{paddingLeft:"32px",display:"flex",gap:"8px",fontFamily:"Nunito, sans-serif",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:()=>o(n.text),children:"Retry"})]}),n.pending&&t("div",{style:{display:"flex",alignItems:"center",justifyContent:"center"},children:[e("p",{style:{color:"#A6A7A9",marginTop:"2px"},children:"Sending"}),e(p,{options:{strings:["..."],autoStart:!0,loop:!0,cursor:""}})]}),n.delivered&&e("p",{style:{color:"#A6A7A9",marginTop:"2px"},children:"Delivered"}),e("p",{style:{color:"#9a9a9a",marginTop:"2px"},children:T(n.timestamp)})]})]})}function E({message:o,BotResponseLoading:i}){const{renderSelectedOption:s,setShowButtons:l,showButtons:a,setMessages:d}=x();return r((()=>{o.buttons&&o.buttons.length>0&&l(!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",rowGap:"8px"},children:[e("img",{src:"https://alatcsdevstoreweurope.blob.core.windows.net/public/homepagelogo.svg",alt:"infinion",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(C,{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 #A90836",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="#A90836",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",fontFamily:"Nunito, sans-serif",fontSize:"12px",width:"100%",justifyContent:"flex-start"},children:e("p",{style:{color:"#9a9a9a"},children:"WemaBot"})})]}),o.error&&t("div",{style:{width:"100%",height:"auto"},children:[t("div",{style:{display:"flex",alignItems:"flex-end",marginTop:"16px"},children:[e("img",{src:"https://alatcsdevstoreweurope.blob.core.windows.net/public/homepagelogo.svg",alt:"infinion",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:e("p",{style:{color:"#9a9a9a"},children:"WemaBot"})})]}),(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),l(!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="#A90836",t.style.color="white"},onMouseOut:e=>{const t=e.target;t.style.backgroundColor="white",t.style.color="inherit"},children:t.title},n)))})]})}function B(){const{setMessages:n,messages:o,botResponseIsLoading:s,sendMessage:a,botToken:c,setBotToken:u,setUserId:m,userId:y,setErrorExist:f,errorExist:w,loading:b,setLoading:v,getMessage:C}=x(),k=l(null),[S,T]=i(""),[B,R]=i(!1),j=d();r((()=>{const e=localStorage.getItem("userId");e?m(e):e||localStorage.setItem("userId",j)}),[]),r((()=>{!c.length&&c.length<=1&&y&&R(!0)}),[c,y]),r((()=>{c.length>1||!y||(async()=>{f(!1),v(!0);try{const e=await fetch(`${h}/Bot/user/${y}/token/startconversation`,{method:"GET"}),{token:t,conversationId:n}=await e.json();localStorage.setItem("conversationId",n),u(t),v(!1),setTimeout((()=>L(t,n)),3e6),v(!1)}catch(e){f(!0),v(!1),console.log("the catch response",e)}})()}),[y,B,c.length]),r((()=>{const e=setInterval((()=>{n((e=>[...e]))}),6e4);return()=>clearInterval(e)}),[]);const L=async(e,t)=>{f(!1),v(!0);const n=localStorage.getItem("conversationId");try{const t={token:e,conversationId:n},o=await g.post("/Home/token/refresh",t,{headers:{"Content-Type":"application/json"}}),{token:i,conversationId:s,expires_in:r}=o.data;u(i),v(!1),setTimeout((()=>L(i,s)),3e6),v(!1)}catch(e){v(!1)}};r((()=>{k.current&&(k.current.scrollTop=k.current.scrollHeight)}),[o]);const D=()=>{""!==S.trim()&&(a(S),T(""))},A=e=>{a(e)};r((()=>{1===o.length&&c.length>1&&"bot"===o[0].sender&&C()}),[o.length,c.length]);const M=()=>e("div",{style:{width:"100%"},children:t("div",{style:{display:"flex",alignItems:"flex-end",marginTop:"16px"},children:[e("img",{src:"https://alatcsdevstoreweurope.blob.core.windows.net/public/homepagelogo.svg",alt:"Wema",style:{marginRight:"8px",width:"20px",height:"20px"}}),e("div",{style:{backgroundColor:"#EEEEEE",color:"#505050",width:"12%",padding:"8px 4px 8px 4px",borderRadius:"6px"},children:e(p,{options:{strings:["..."],autoStart:!0,loop:!0,cursor:""}})})]})});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",paddingBottom:"16px"},ref:k,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(I,{message:t,handleResendFailedMessage:A,BotResponseLoading:M}):e(E,{message:t,BotResponseLoading:M,botResponseIsLoading:s})},n))),"user"===o[0]?.sender&&o.map(((t,n)=>e("div",{children:"user"===t.sender?e(I,{message:t,handleResendFailedMessage:A,BotResponseLoading:M}):e(E,{message:t,BotResponseLoading:M,botResponseIsLoading:s})},n)))]})}),t("div",{style:{padding:"0 20px"},children:[e("textarea",{className:"custom-input",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:S,onChange:e=>{const{value:t}=e.target;T(t)},onKeyDown:e=>{const{key:t}=e;"Enter"===t&&""!==S.trim()&&(e.preventDefault(),D())}}),e("button",{type:"button",onClick:D,style:{position:"absolute",right:"24px",bottom:"28px",width:"24px",height:"24px"},children:e("img",{src:"https://e7.pngegg.com/pngimages/841/271/png-clipart-computer-icons-send-miscellaneous-angle.png",alt:"send",style:{marginRight:"8px",marginBottom:"-8px"}})})]})]}):b?e("div",{style:{width:"100%",fontSize:"34px",height:"80%",display:"flex",alignItems:"center",justifyContent:"center"},children:e("img",{src:"https://behalacollege.in/display_board/assets/images/ajax-spinner.gif",alt:"loading",style:{width:"60px",height:"60px"}})}):w?t("div",{style:{height:"40vh",display:"flex",flexDirection:"column",alignItems:"center",justifyContent:"center",gap:"8px"},children:[e("button",{onClick:()=>R(!B),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 R(){const{tabNumber:n}=x();return t("div",{style:{width:"100%",height:"100%",overflowX:"hidden",margin:"0",marginTop:"1rem",fontSize:"14px"},children:[1===n&&e(w,{}),2===n&&e(B,{}),3===n&&e(S,{})]})}function j(){const{tabNumber:n,setShowFullContent:o,setShowChatBot:s,showChatBot:a,setShowDetailedResponse:d}=x(),c=l(null),[p,h]=i(!0),[g,u]=i(""),[m,w]=i(!1);return r((()=>{const e=e=>{c.current&&!c.current.contains(e.target)&&e.target.closest(".outside-div")&&s(!1)},t=e=>{"Escape"===e.key&&s(!1)};return document.addEventListener("click",e),document.addEventListener("keydown",t),()=>{document.removeEventListener("click",e),document.removeEventListener("keydown",t)}}),[]),r((()=>{2!==n&&(d(!1),o(!1))}),[n]),r((()=>{(async()=>{try{const e=new URLSearchParams(window.location.search),t=Object.fromEntries(e.entries());w(!1),h(!0),u(""),"access_token"===t.secret?(s(!0),h(!1),u(""),w(!1)):t.secret?"access_token"!==t.secret&&(h(!1),w(!0),u("401")):(h(!1),w(!0),u("400"))}catch(e){console.error("Error:",e),h(!1),w(!0),u("401")}})()}),[]),t("div",{style:{width:"100vw"},className:"theFont chatbotContainer",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",padding:"3% 3%"},children:t("div",{ref:c,style:{width:"100vw",maxWidth:"470px",height:"80vh",border:"none",borderRadius:"16px",backgroundColor:"white",boxShadow:"0 4px 6px rgba(0, 0, 0, 0.1)",outline:"none"},children:[a&&t("div",{style:{width:"100%",height:"80vh"},children:[e("div",{style:{width:"100%",height:"10%",padding:"1.25rem 0"},children:e(y,{})}),e("div",{style:{width:"100%",height:2!==n?"75%":"90%",position:"relative",overflow:"hidden",paddingTop:"0.5rem"},children:e(R,{})}),2!==n&&e("div",{style:{width:"100%",height:"15%",display:"flex"},children:e(f,{})})]}),m&&t("div",{style:{width:"100%",height:"80vh",display:"flex",alignItems:"center",justifyContent:"center",flexDirection:"column"},children:[!p&&"400"===g&&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%"}}),!p&&"401"===g&&e("img",{src:"https://lh4.googleusercontent.com/proxy/RI9KRi5cyi5n92Msn-PCl5pxvwTAHYNfKhTCdmxag4aDkQOLAFBlt3xO9pTuGjDTfBU1PwjJSj034YCYSbpu4tENe2S6Q1dscLAkxo3ot0Ga_78yjvg_",alt:"401",style:{width:"auto",height:"auto",maxWidth:"100%",maxHeight:"100%"}}),p&&e("img",{src:"https://behalacollege.in/display_board/assets/images/ajax-spinner.gif",alt:"loading",style:{width:"60px",height:"60px"}}),e("p",{style:{color:"#A90836",fontSize:"14px",fontWeight:600,marginTop:"1rem"},children:"401"===g?"Unauthorized":"400"===g?"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{j as ChatBot,m as WemaContextProvider,x as useWemaContext};
//# sourceMappingURL=index.js.map