pager-widget 1.0.11-alpha.7 → 1.0.11-alpha.8

package/dist/index.js

@@ -135,4 +135,4 @@
                                         }
                                     }
                                 `}),d.map(e=>tC("button",{className:`flex items-center gap-1.5 pl-2 pr-3 py-1.5 relative self-stretch w-full cursor-pointer 
-                                        hover:bg-slate-100 rounded-md overflow-hidden`,style:{backgroundColor:e.selected?"#f0f0f0":""},onClick:e.onClick,children:[tC("div",{className:"inline-flex items-center gap-2.5 flex-[0_0_auto]",children:e.icon}),tC("div",{className:"flex flex-col items-start justify-center gap-2 flex-1 self-stretch grow",children:tC("div",{className:"inline-flex flex-col items-start gap-1 flex-[0_0_auto]",children:tC("div",{className:"flex items-center gap-1 flex-[0_0_auto]",children:tC("div",{className:"w-fit whitespace-nowrap text-xs font-medium text-[#020618]",children:e.label})})})})]},e.id))]})]}),tC("button",{className:"inline-flex items-center p-1 hover:bg-slate-50 rounded-lg cursor-pointer",onClick:e,children:tC(ld,{className:"w-[18px] h-[18px]"})})]})]}),tC("div",{className:"flex flex-col h-[calc(100%-80px)] justify-between w-full",children:[tC("div",{className:"flex flex-col gap-4 h-full overflow-y-scroll w-full -mt-[12px] mb-[6px]",children:tC("div",{className:"flex flex-col gap-5 w-full",children:[void 0!=p?tC(u_,{event:p}):null,i.map((e,t)=>tC("div",{children:tC(D,{children:[console.log(e.type,"message type"),"received"===e.type?tC(D,{children:[console.log("message from new recentchat",e),tC(cK,{message:e.message,time:e.time,sendFeedback:function(){throw Error("Function not implemented.")},sendMessage:function(){throw Error("Function not implemented.")}})]}):tC("div",{className:"flex flex-col items-end px-5 animate-slide-in-right",children:tC("div",{className:"w-[300px] flex flex-col items-end gap-1",children:tC("div",{className:"flex flex-1 text-sm px-3.5 py-2.5 rounded-lg",style:{backgroundColor:n?.data?.secondary_color,color:n?.data?.user_message_text_color},children:tC(cV,{mdText:e.message.input??""})})})})]})},t))]})}),tC("div",{className:"flex flex-col items-start gap-2.5 bg-white",children:tC("div",{className:"flex flex-col items-center justify-center gap-8 w-full overflow-hidden border border-zinc-100",children:tC("div",{className:"flex items-center gap-2.5 px-4 py-2 w-full bg-white",children:tC("div",{className:"flex items-center justify-center gap-1.5 flex-1",children:tC("div",{className:"inline-flex flex-col items-start justify-center",children:tC("div",{className:"flex items-center w-full gap-1.5 pb-0.5",children:tC("span",{className:"font-text-xs-regular text-[#1d293d] text-xs tracking-[0px] leading-[18px] whitespace-nowrap",children:"Your conversation has ended"})})})})})})})]})]})},u_=({event:e})=>{let t=(e.submissionPayload?.lead_data?.fields??[]).reduce((e,t)=>(e[t.field_id]=t.value,e),{}),n=e?.form_data?.form_template,r=tH(),[i,a]=ep(!1);return tC("div",{className:"flex gap-2 items-start w-full rounded-lg overflow-hidden px-5",children:[tC("div",{className:"flex items-center gap-2 ",children:tC("div",{className:"flex items-start gap-[5px]",children:tC("div",{className:"flex w-[24px] h-[24px] items-center justify-center rounded-full",children:tC("img",{src:r?.data?.logo_url,className:"w-6 h-6 text-white"})})})}),tC("div",{className:"flex flex-col items-start gap-2 w-[90%]",children:tC("div",{className:"flex-col flex gap-2 items-baseline pt-0.5 w-full",children:[tC("div",{className:"font-inter text-sm font-medium text-[#020618]",children:r?.data?.name}),tC("div",{className:"relative mt-[-1.00px] text-sm text-[#020618] w-full",children:tC("div",{className:"py-2.5 px-3.5 flex w-full flex-col items-start gap-4 rounded-lg border border-zinc-200",children:[tC("div",{className:"py-0.5 pr-1 flex items-center gap-2 rounded-sm w-full justify-between",children:[tC("span",{className:"flex gap-1 items-center text-slate-950 text-sm font-regular leading-5",children:["Form submitted"," ",tC(lu,{className:"h-[18px] w-[18px] text-green-500"})]}),tC("span",{onClick:()=>a(!i),className:"cursor-pointer text-slate-500 hover:text-slate-700 transition-colors hover:bg-slate-100 rounded-full",children:i?tC(lS,{className:""}):tC(lk,{})})]}),i&&tC("div",{className:"flex flex-col items-start gap-4",children:n&&n.map((e,n)=>tC("div",{className:"flex flex-col items-start gap-1.5",children:[tC("span",{className:"text-slate-700 text-sm font-medium leading-5",children:e.dispaly_name?e.dispaly_name:e.name}),tC("span",{className:"text-slate-950 text-sm font-regular leading-5",children:t?.[e.field_id]})]},n))})]})})]})})]})};var uC=function(e){return e.HOME="home",e.CHAT="chat",e.RECENT_MESSAGE="recentMessage",e.RECENT_MESSAGE_LIST="recentMessageList",e.RECENT_MESSAGE_DETAIL="recentMessageDetail",e.NEW_RECENT_MESSAGE="newRecentMessage",e}({}),uk=({toggleWidget:e,widgetToggleState:t,widgetConfig:n})=>{let r=t4(),i=t3(),{connected:a}=ul(),o=tH(),{recentConversation:l}=t7(n.widget_id),s=ev(uT),c=null!=l?l.events.filter(e=>"received"===e.type||"sent"===e.type):[],[d,u]=ep(!1),[p,f]=ep(!1),[g,h]=ep(null),[m,w]=ep(0),x=5.6/10*m,[b,v]=ep(()=>"undefined"!=typeof window?window.innerHeight:820);if(eg(()=>{if(!g)return;let e=new ResizeObserver(e=>{for(let t of e)w(t.contentRect.height)});return e.observe(g),()=>e.disconnect()},[g]),function(e,t,n){console.log("useWidgetResize ::: hook mounted"),eg(()=>"OPEN"===t&&e&&window.parent!==window?(console.log("useWidgetResize ::: el",e,{widgetToggleState:t,isExpanded:n}),requestAnimationFrame(()=>{let{width:t,height:n}=e.getBoundingClientRect();console.log("useWidgetResize ::: measured",{width:t,height:n}),t>0&&n>0&&(console.log("useWidgetResize ::: posting",{width:Math.ceil(t),height:Math.ceil(n)}),window.parent.postMessage({type:"widgetResize",width:Math.ceil(t),height:Math.ceil(n)},"*"))}),()=>{console.log("useWidgetResize ::: collapsed"),window.parent.postMessage({type:"widgetResize",width:60,height:60},"*")}):void console.log("useWidgetResize ::: not open or no element, skipping",{widgetToggleState:t,isExpanded:n}),[e,t,n])}(g,t,r),eg(()=>{if("undefined"==typeof window)return;let e=()=>v(window.innerHeight);return e(),window.addEventListener("resize",e),()=>window.removeEventListener("resize",e)},[]),eg(()=>{t&&setTimeout(()=>{u(!0)},10)},[t]),eg(()=>{t&&setTimeout(()=>{f(!0)},400)},[t]),!a)return null;let y="flex w-full h-full flex-col overflow-hidden rounded-[22px] bg-white shadow-lg";return console.log(s,"<----initial message"),eg(()=>{t1.trigger.selectTab({tab:s?.initialUserMessage&&o.data?.widget_starter_flow_enabled?"chat":o.data?.open_homeby_default&&s?.initialUserMessage===null?"home":i})},[]),tC("div",{ref:h,className:`${r===tK.FULLSCREEN?"w-[calc(100vw-80px)]":""} flex absolute ${r!==tK.DEFAULT?"maximize-height":(()=>{switch(n?.widget_size){case"small":return"h-[58vh]";case"medium":default:return"h-[64vh]";case"large":return"h-[70vh]"}})()} overflow-hidden min-w-[400px] right-5 bottom-20 flex-col items-end gap-5 justify-center bg-white box-shadow-widget widget-expand-animation rounded-[22px] ${!p&&"chat-popup"} ${d&&"active"} pager-chat-window`,style:{...(()=>{switch(r){case tK.EXPANDED:return{width:"50vw"};case tK.DEFAULT:return{width:`${x}px`};case tK.FULLSCREEN:return{width:"95vw",maxWidth:"95vw"};default:return{width:"400px"}}})(),minHeight:`${Math.round(Math.min(698,Math.max(590,.9*b-40)))}px`},children:["chat"===i&&tC("div",{className:`${y} animate-slide-in-left-slow`,children:tC(up,{toggleWidget:e,isExpanded:r,recentConversation:c})}),"home"===i&&tC("div",{className:`${y} animate-slide-in-right-slow`,children:tC(lj,{toggleWidget:e,switchTab:i,isExpanded:r})}),"recentMessage"===i&&tC("div",{className:y,children:tC(ug,{toggleWidget:e,isExpanded:r})}),"recentMessageList"===i&&tC("div",{className:y,children:tC(ub,{toggleWidget:e,isExpanded:r,switchTab:i})}),"recentMessageDetail"===i&&tC("div",{className:y,children:tC(uv,{isExpanded:r})}),"newRecentMessage"===i&&tC(uy,{toggleWidget:e,isExpanded:r})]})};let uN=({widgetToggleState:e,toggleWidget:t,widgetConfig:n})=>{let r=tH();return console.log("DEBUG:: widget",r),tC(uo,{endpoint:n.endpoint,children:tC(D,{children:"OPEN"===e&&"INVALID_STATE"!==r.status?tC(uk,{toggleWidget:t,widgetToggleState:e,widgetConfig:n}):null})})},uS=la("x",[["path",{d:"M18 6 6 18",key:"1bl5f8"}],["path",{d:"m6 6 12 12",key:"d8bk6v"}]]),uE=({setUserInitialMessage:e,widgetToggleState:t,toggleWidget:n})=>{let r=tH(),{status:i}=r,[a,o]=tv.useState(!1),[l,s]=tv.useState(null),[c,d]=tv.useState(!0),[u,p]=tv.useState(t),{recentChatList:f}=uw();if("NOT_STARTED"===i||"WIDGET_LOADING"===i||"INVALID_STATE"===i)return null;function g(e){if(!e||"string"!=typeof e)return"rgba(0, 0, 0, 0.2)";3===(e=e.replace(/^#/,"")).length&&(e=e.split("").map(e=>e+e).join(""));let t=parseInt(e,16);return`rgba(${t>>16&255}, ${t>>8&255}, ${255&t}, 0.8)`}let h=ex(()=>r?.data?.launcher_logo_size,[r?.data?.launcher_logo_size]);console.log(h,"size");let m=(()=>{switch(h){case"S":return"w-[60px] h-[60px]";case"M":return"w-[80px] h-[80px]";case"L":default:return"w-[100px] h-[100px]";case"XL":return"w-[120px] h-[120px]";case"XXL":return"w-[140px] h-[140px]";case"XXXL":return"w-[160px] h-[160px]"}})(),w=r?.data?.launcher_logo_shape==="Square"?"rounded-xl":"rounded-full";return eg(()=>{"CLOSE"==t?setTimeout(()=>{p("CLOSE")},0):"OPEN"==t&&setTimeout(()=>{p("OPEN")},200)},[t,c]),tC(D,{children:tC("div",{className:"flex flex-col items-end gap-3",children:[c&&"CLOSE"==t&&!f&&r.data.widget_starter_flow_enabled&&!localStorage.getItem("CURRENT_CONVERSATION")&&tC("span",{className:`relative group flex flex-col gap-3 mr-4 ${"CLOSE"===u?"visible":""}`,children:[tC("button",{onMouseOver:()=>s(3),onMouseLeave:()=>s(null),style:{backgroundColor:r.data.use_brand_color?3===l?g(r.data.brand_color):r.data.brand_color:3===l?"#f0f0f0":"white"},className:"cursor-pointer floating-chip-hover relative flex items-center justify-start rounded-lg min-h-[36px] px-2.5 py-2.5 shadow-md transition-all duration-300 max-w-[280px]",children:tC("div",{className:"flex gap-1.5",children:[tC("img",{src:r?.data?.logo_url,alt:"",className:"w-[22px] h-[22px]"}),tC("div",{className:"flex flex-col gap-1.5 items-start",children:[tC("span",{style:{color:r.data.use_brand_color?"light"==lP(r.data.brand_color)?"#000000":"#FFFFFF":"#000000"},className:"text-xs font-semibold leading-[18px] text-start",children:r?.data?.name}),tC("div",{style:{color:r.data.use_brand_color?"light"==lP(r.data.brand_color)?"#000000":"#FFFFFF":"#000000"},className:"text-sm whitespace-pre-wrap font-regular leading-5 text-start",children:tC(cV,{mdText:r?.data?.widget_greeting})})]})]})}),tC("span",{onClick:()=>d(!1),style:{background:"#FFFFFF",color:"#000000",border:"1px solid #000000"},className:"absolute -top-3 -right-3 p-[3.5px] rounded-full shadow-md border hover:text-zinc-500 hover:border-zinc-500 transform transition-all duration-200 opacity-0 translate-y-1 group-hover:opacity-100 group-hover:translate-y-0 pointer-events-none group-hover:pointer-events-auto cursor-pointer hover:scale-105 active:scale-95",children:tC(uS,{className:"w-3 h-3 transition-transform"})}),tC("div",{className:"w-[280px] flex flex-wrap gap-3 justify-end",children:Array.isArray(r.data.starter_buttons)&&r.data.starter_buttons.map((t,i)=>tC("button",{onMouseOver:()=>s(i),onMouseLeave:()=>s(null),onClick:()=>{e(t),localStorage.setItem("Tab","Chat"),t1.trigger.selectTab({tab:tZ.CHAT}),n()},style:{backgroundColor:r.data.use_brand_color?l===i?g(r.data.brand_color):r.data.brand_color:l===i?"#f0f0f0":"white",color:r.data.use_brand_color?"light"==lP(r.data.brand_color)?"#000000":"#FFFFFF":"#000000"},className:"cursor-pointer floating-chip-hover flex items-center text-sm font-regular leading-5 rounded-[10px] min-h-max px-2.5 py-1.5 shadow-md transition-all duration-300 max-w-max w-max",children:t},i))})]}),tC("button",{onClick:n,onMouseEnter:()=>o(!0),onMouseLeave:()=>o(!1),style:{borderColor:r?.data?.brand_color},className:`relative overflow-hidden flex items-center justify-center cursor-pointer transition ${w} ${"OPEN"===t?"h-[58px] w-[58px]":m} mb-4 mr-4 active:scale-95 duration-200 transition-all`,children:["CLOSE"===u&&r?.data?.launcher_logo&&tC("div",{className:"absolute inset-0 bg-center bg-cover transition-all duration-200",style:{backgroundImage:`url(${r.data.launcher_logo})`}}),"OPEN"===u&&tC(D,{children:[tC("div",{className:"absolute inset-0 transition-all duration-200",style:{backgroundColor:a?g(r?.data?.brand_color):r?.data?.brand_color,opacity:+("OPEN"===t)}}),tC(ld,{style:{color:"light"==lP(r.data.brand_color)?"#000000":"#FFFFFF"},className:"w-8 h-8 relative z-10 transition-all duration-300"})]})]})]})})},uT=Z(null),uL=e=>{let t=tH(),[n,r]=ep(null);if(t?.data?.openby_default===void 0)return null;let[i,a]=function(e){let t=tU({context:{chatWindowStatus:e?"OPEN":"CLOSE"},on:{toggle:e=>({chatWindowStatus:"OPEN"===e.chatWindowStatus?"CLOSE":"OPEN"})}});return[tj(t,e=>e.context.chatWindowStatus),t.trigger.toggle]}(t.data.openby_default);return tC(D,{children:tC("div",{className:"fixed bottom-0 right-4 flex flex-col items-end space-y-2",children:[tC(uT.Provider,{value:{initialUserMessage:n,setInitialUserMessage:r},children:tC(uN,{widgetToggleState:i,toggleWidget:a,widgetConfig:e})}),tC(uE,{setUserInitialMessage:r,widgetToggleState:i,toggleWidget:a})]})})},uI=tP({context:{user_details:{SYS_FirstName:"sample",SYS_LastName:"B",SYS_UserEmail:"example@gmail.com",SYS_Location:"India",SYS_Timezone:"Asia/Kolkata",widget_chat_url:""}},on:{setUserDetails:(e,t)=>({user_details:{SYS_FirstName:t.userDetails?.SYS_FirstName??"sample",SYS_LastName:t.userDetails?.SYS_LastName??"B",SYS_UserEmail:t.userDetails?.SYS_UserEmail??"example@gmail.com",SYS_Location:t.userDetails?.SYS_Location??"India",SYS_Timezone:t.userDetails?.SYS_Timezone??"Asia/Kolkata",widget_chat_url:t.userDetails?.widget_chat_url??""}})}}),uO=(e,t=!1)=>{eg(()=>{uI.trigger.setUserDetails({...e}),t&&uI.inspect(e=>{console.log("USER INSPECTION::",e)})},[])},uA=e=>(t$({endpoint:e.endpoint,widget_id:e.widget_id},!0),console.log("window href",window.location.href),t2(!0),uO(e,!0),t1.send({type:"updateUserDetails",user_details:{SYS_FirstName:e.userDetails?.SYS_FirstName??"",SYS_UserEmail:e.userDetails?.SYS_UserEmail??"",SYS_LastName:e.userDetails?.SYS_LastName??"",SYS_Location:e.userDetails?.SYS_Location??"",SYS_Timezone:e.userDetails?.SYS_Timezone??"",widget_chat_url:window.location.href}}),tC("div",{className:"fixed bottom-0 right-4 pager-widget-root z-[99999999999999]",children:tC("div",{className:"pager-widget-root",children:tC(uL,{...e})})}));window.WAWidget={init:e=>{let t=document.getElementById(e.id);if(!t)return;let n=t.attachShadow({mode:"open"}),r=document.createElement("style");r.setAttribute("data-tailwind","true");let a=i(tN).replace("(((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b))))","(display: block)");console.log("widgetCss",i(tN),a),r.textContent=a,n.appendChild(r);let o=document.createElement("div");o.className="pager-widget",n.appendChild(o),tk.createRoot(o).render(tC(tv.StrictMode,{children:tC(uA,{...e})}))}}})();
+                                        hover:bg-slate-100 rounded-md overflow-hidden`,style:{backgroundColor:e.selected?"#f0f0f0":""},onClick:e.onClick,children:[tC("div",{className:"inline-flex items-center gap-2.5 flex-[0_0_auto]",children:e.icon}),tC("div",{className:"flex flex-col items-start justify-center gap-2 flex-1 self-stretch grow",children:tC("div",{className:"inline-flex flex-col items-start gap-1 flex-[0_0_auto]",children:tC("div",{className:"flex items-center gap-1 flex-[0_0_auto]",children:tC("div",{className:"w-fit whitespace-nowrap text-xs font-medium text-[#020618]",children:e.label})})})})]},e.id))]})]}),tC("button",{className:"inline-flex items-center p-1 hover:bg-slate-50 rounded-lg cursor-pointer",onClick:e,children:tC(ld,{className:"w-[18px] h-[18px]"})})]})]}),tC("div",{className:"flex flex-col h-[calc(100%-80px)] justify-between w-full",children:[tC("div",{className:"flex flex-col gap-4 h-full overflow-y-scroll w-full -mt-[12px] mb-[6px]",children:tC("div",{className:"flex flex-col gap-5 w-full",children:[void 0!=p?tC(u_,{event:p}):null,i.map((e,t)=>tC("div",{children:tC(D,{children:[console.log(e.type,"message type"),"received"===e.type?tC(D,{children:[console.log("message from new recentchat",e),tC(cK,{message:e.message,time:e.time,sendFeedback:function(){throw Error("Function not implemented.")},sendMessage:function(){throw Error("Function not implemented.")}})]}):tC("div",{className:"flex flex-col items-end px-5 animate-slide-in-right",children:tC("div",{className:"w-[300px] flex flex-col items-end gap-1",children:tC("div",{className:"flex flex-1 text-sm px-3.5 py-2.5 rounded-lg",style:{backgroundColor:n?.data?.secondary_color,color:n?.data?.user_message_text_color},children:tC(cV,{mdText:e.message.input??""})})})})]})},t))]})}),tC("div",{className:"flex flex-col items-start gap-2.5 bg-white",children:tC("div",{className:"flex flex-col items-center justify-center gap-8 w-full overflow-hidden border border-zinc-100",children:tC("div",{className:"flex items-center gap-2.5 px-4 py-2 w-full bg-white",children:tC("div",{className:"flex items-center justify-center gap-1.5 flex-1",children:tC("div",{className:"inline-flex flex-col items-start justify-center",children:tC("div",{className:"flex items-center w-full gap-1.5 pb-0.5",children:tC("span",{className:"font-text-xs-regular text-[#1d293d] text-xs tracking-[0px] leading-[18px] whitespace-nowrap",children:"Your conversation has ended"})})})})})})})]})]})},u_=({event:e})=>{let t=(e.submissionPayload?.lead_data?.fields??[]).reduce((e,t)=>(e[t.field_id]=t.value,e),{}),n=e?.form_data?.form_template,r=tH(),[i,a]=ep(!1);return tC("div",{className:"flex gap-2 items-start w-full rounded-lg overflow-hidden px-5",children:[tC("div",{className:"flex items-center gap-2 ",children:tC("div",{className:"flex items-start gap-[5px]",children:tC("div",{className:"flex w-[24px] h-[24px] items-center justify-center rounded-full",children:tC("img",{src:r?.data?.logo_url,className:"w-6 h-6 text-white"})})})}),tC("div",{className:"flex flex-col items-start gap-2 w-[90%]",children:tC("div",{className:"flex-col flex gap-2 items-baseline pt-0.5 w-full",children:[tC("div",{className:"font-inter text-sm font-medium text-[#020618]",children:r?.data?.name}),tC("div",{className:"relative mt-[-1.00px] text-sm text-[#020618] w-full",children:tC("div",{className:"py-2.5 px-3.5 flex w-full flex-col items-start gap-4 rounded-lg border border-zinc-200",children:[tC("div",{className:"py-0.5 pr-1 flex items-center gap-2 rounded-sm w-full justify-between",children:[tC("span",{className:"flex gap-1 items-center text-slate-950 text-sm font-regular leading-5",children:["Form submitted"," ",tC(lu,{className:"h-[18px] w-[18px] text-green-500"})]}),tC("span",{onClick:()=>a(!i),className:"cursor-pointer text-slate-500 hover:text-slate-700 transition-colors hover:bg-slate-100 rounded-full",children:i?tC(lS,{className:""}):tC(lk,{})})]}),i&&tC("div",{className:"flex flex-col items-start gap-4",children:n&&n.map((e,n)=>tC("div",{className:"flex flex-col items-start gap-1.5",children:[tC("span",{className:"text-slate-700 text-sm font-medium leading-5",children:e.dispaly_name?e.dispaly_name:e.name}),tC("span",{className:"text-slate-950 text-sm font-regular leading-5",children:t?.[e.field_id]})]},n))})]})})]})})]})};var uC=function(e){return e.HOME="home",e.CHAT="chat",e.RECENT_MESSAGE="recentMessage",e.RECENT_MESSAGE_LIST="recentMessageList",e.RECENT_MESSAGE_DETAIL="recentMessageDetail",e.NEW_RECENT_MESSAGE="newRecentMessage",e}({}),uk=({toggleWidget:e,widgetToggleState:t,widgetConfig:n})=>{let r=t4(),i=t3(),{connected:a}=ul(),o=tH(),{recentConversation:l}=t7(n.widget_id),s=ev(uT),c=null!=l?l.events.filter(e=>"received"===e.type||"sent"===e.type):[],[d,u]=ep(!1),[p,f]=ep(!1),[g,h]=ep(null),[m,w]=ep(0),x=5.6/10*m,[b,v]=ep(()=>"undefined"!=typeof window?window.innerHeight:820);if(eg(()=>{if(!g)return;let e=new ResizeObserver(e=>{for(let t of e)w(t.contentRect.height)});return e.observe(g),()=>e.disconnect()},[g]),function(e,t,n){console.log("useWidgetResize ::: hook mounted"),eg(()=>{if("OPEN"!==t||!e||window.parent===window)return void console.log("useWidgetResize ::: not open or no element, skipping",{widgetToggleState:t,isExpanded:n});console.log("useWidgetResize ::: el",e,{widgetToggleState:t,isExpanded:n});let r=null,i=0,a=new ResizeObserver(([e])=>{r||(r=requestAnimationFrame(()=>{r=null,i++;let{width:t,height:n}=e.contentRect;t>0&&n>0&&(console.log("useWidgetResize ::: posting",{width:Math.ceil(t),height:Math.ceil(n),fireCount:i}),window.parent.postMessage({type:"widgetResize",width:Math.ceil(t),height:Math.ceil(n)},"*")),i>=3&&(console.log("useWidgetResize ::: disconnecting after 3 fires"),a.disconnect())}))});return a.observe(e),console.log("useWidgetResize ::: observer attached"),()=>{console.log("useWidgetResize ::: cleaning up"),a.disconnect(),r&&cancelAnimationFrame(r),window.parent.postMessage({type:"widgetResize",width:60,height:60},"*")}},[e,t,n])}(g,t,r),eg(()=>{if("undefined"==typeof window)return;let e=()=>v(window.innerHeight);return e(),window.addEventListener("resize",e),()=>window.removeEventListener("resize",e)},[]),eg(()=>{t&&setTimeout(()=>{u(!0)},10)},[t]),eg(()=>{t&&setTimeout(()=>{f(!0)},400)},[t]),!a)return null;let y="flex w-full h-full flex-col overflow-hidden rounded-[22px] bg-white shadow-lg";return console.log(s,"<----initial message"),eg(()=>{t1.trigger.selectTab({tab:s?.initialUserMessage&&o.data?.widget_starter_flow_enabled?"chat":o.data?.open_homeby_default&&s?.initialUserMessage===null?"home":i})},[]),tC("div",{ref:h,className:`${r===tK.FULLSCREEN?"w-[calc(100vw-80px)]":""} flex absolute ${r!==tK.DEFAULT?"maximize-height":(()=>{switch(n?.widget_size){case"small":return"h-[58vh]";case"medium":default:return"h-[64vh]";case"large":return"h-[70vh]"}})()} overflow-hidden min-w-[400px] right-5 bottom-20 flex-col items-end gap-5 justify-center bg-white box-shadow-widget widget-expand-animation rounded-[22px] ${!p&&"chat-popup"} ${d&&"active"} pager-chat-window`,style:{...(()=>{switch(r){case tK.EXPANDED:return{width:"50vw"};case tK.DEFAULT:return{width:`${x}px`};case tK.FULLSCREEN:return{width:"95vw",maxWidth:"95vw"};default:return{width:"400px"}}})(),minHeight:`${Math.round(Math.min(698,Math.max(590,.9*b-40)))}px`},children:["chat"===i&&tC("div",{className:`${y} animate-slide-in-left-slow`,children:tC(up,{toggleWidget:e,isExpanded:r,recentConversation:c})}),"home"===i&&tC("div",{className:`${y} animate-slide-in-right-slow`,children:tC(lj,{toggleWidget:e,switchTab:i,isExpanded:r})}),"recentMessage"===i&&tC("div",{className:y,children:tC(ug,{toggleWidget:e,isExpanded:r})}),"recentMessageList"===i&&tC("div",{className:y,children:tC(ub,{toggleWidget:e,isExpanded:r,switchTab:i})}),"recentMessageDetail"===i&&tC("div",{className:y,children:tC(uv,{isExpanded:r})}),"newRecentMessage"===i&&tC(uy,{toggleWidget:e,isExpanded:r})]})};let uN=({widgetToggleState:e,toggleWidget:t,widgetConfig:n})=>{let r=tH();return console.log("DEBUG:: widget",r),tC(uo,{endpoint:n.endpoint,children:tC(D,{children:"OPEN"===e&&"INVALID_STATE"!==r.status?tC(uk,{toggleWidget:t,widgetToggleState:e,widgetConfig:n}):null})})},uS=la("x",[["path",{d:"M18 6 6 18",key:"1bl5f8"}],["path",{d:"m6 6 12 12",key:"d8bk6v"}]]),uE=({setUserInitialMessage:e,widgetToggleState:t,toggleWidget:n})=>{let r=tH(),{status:i}=r,[a,o]=tv.useState(!1),[l,s]=tv.useState(null),[c,d]=tv.useState(!0),[u,p]=tv.useState(t),{recentChatList:f}=uw();if("NOT_STARTED"===i||"WIDGET_LOADING"===i||"INVALID_STATE"===i)return null;function g(e){if(!e||"string"!=typeof e)return"rgba(0, 0, 0, 0.2)";3===(e=e.replace(/^#/,"")).length&&(e=e.split("").map(e=>e+e).join(""));let t=parseInt(e,16);return`rgba(${t>>16&255}, ${t>>8&255}, ${255&t}, 0.8)`}let h=ex(()=>r?.data?.launcher_logo_size,[r?.data?.launcher_logo_size]);console.log(h,"size");let m=(()=>{switch(h){case"S":return"w-[60px] h-[60px]";case"M":return"w-[80px] h-[80px]";case"L":default:return"w-[100px] h-[100px]";case"XL":return"w-[120px] h-[120px]";case"XXL":return"w-[140px] h-[140px]";case"XXXL":return"w-[160px] h-[160px]"}})(),w=r?.data?.launcher_logo_shape==="Square"?"rounded-xl":"rounded-full";return eg(()=>{"CLOSE"==t?setTimeout(()=>{p("CLOSE")},0):"OPEN"==t&&setTimeout(()=>{p("OPEN")},200)},[t,c]),tC(D,{children:tC("div",{className:"flex flex-col items-end gap-3",children:[c&&"CLOSE"==t&&!f&&r.data.widget_starter_flow_enabled&&!localStorage.getItem("CURRENT_CONVERSATION")&&tC("span",{className:`relative group flex flex-col gap-3 mr-4 ${"CLOSE"===u?"visible":""}`,children:[tC("button",{onMouseOver:()=>s(3),onMouseLeave:()=>s(null),style:{backgroundColor:r.data.use_brand_color?3===l?g(r.data.brand_color):r.data.brand_color:3===l?"#f0f0f0":"white"},className:"cursor-pointer floating-chip-hover relative flex items-center justify-start rounded-lg min-h-[36px] px-2.5 py-2.5 shadow-md transition-all duration-300 max-w-[280px]",children:tC("div",{className:"flex gap-1.5",children:[tC("img",{src:r?.data?.logo_url,alt:"",className:"w-[22px] h-[22px]"}),tC("div",{className:"flex flex-col gap-1.5 items-start",children:[tC("span",{style:{color:r.data.use_brand_color?"light"==lP(r.data.brand_color)?"#000000":"#FFFFFF":"#000000"},className:"text-xs font-semibold leading-[18px] text-start",children:r?.data?.name}),tC("div",{style:{color:r.data.use_brand_color?"light"==lP(r.data.brand_color)?"#000000":"#FFFFFF":"#000000"},className:"text-sm whitespace-pre-wrap font-regular leading-5 text-start",children:tC(cV,{mdText:r?.data?.widget_greeting})})]})]})}),tC("span",{onClick:()=>d(!1),style:{background:"#FFFFFF",color:"#000000",border:"1px solid #000000"},className:"absolute -top-3 -right-3 p-[3.5px] rounded-full shadow-md border hover:text-zinc-500 hover:border-zinc-500 transform transition-all duration-200 opacity-0 translate-y-1 group-hover:opacity-100 group-hover:translate-y-0 pointer-events-none group-hover:pointer-events-auto cursor-pointer hover:scale-105 active:scale-95",children:tC(uS,{className:"w-3 h-3 transition-transform"})}),tC("div",{className:"w-[280px] flex flex-wrap gap-3 justify-end",children:Array.isArray(r.data.starter_buttons)&&r.data.starter_buttons.map((t,i)=>tC("button",{onMouseOver:()=>s(i),onMouseLeave:()=>s(null),onClick:()=>{e(t),localStorage.setItem("Tab","Chat"),t1.trigger.selectTab({tab:tZ.CHAT}),n()},style:{backgroundColor:r.data.use_brand_color?l===i?g(r.data.brand_color):r.data.brand_color:l===i?"#f0f0f0":"white",color:r.data.use_brand_color?"light"==lP(r.data.brand_color)?"#000000":"#FFFFFF":"#000000"},className:"cursor-pointer floating-chip-hover flex items-center text-sm font-regular leading-5 rounded-[10px] min-h-max px-2.5 py-1.5 shadow-md transition-all duration-300 max-w-max w-max",children:t},i))})]}),tC("button",{onClick:n,onMouseEnter:()=>o(!0),onMouseLeave:()=>o(!1),style:{borderColor:r?.data?.brand_color},className:`relative overflow-hidden flex items-center justify-center cursor-pointer transition ${w} ${"OPEN"===t?"h-[58px] w-[58px]":m} mb-4 mr-4 active:scale-95 duration-200 transition-all`,children:["CLOSE"===u&&r?.data?.launcher_logo&&tC("div",{className:"absolute inset-0 bg-center bg-cover transition-all duration-200",style:{backgroundImage:`url(${r.data.launcher_logo})`}}),"OPEN"===u&&tC(D,{children:[tC("div",{className:"absolute inset-0 transition-all duration-200",style:{backgroundColor:a?g(r?.data?.brand_color):r?.data?.brand_color,opacity:+("OPEN"===t)}}),tC(ld,{style:{color:"light"==lP(r.data.brand_color)?"#000000":"#FFFFFF"},className:"w-8 h-8 relative z-10 transition-all duration-300"})]})]})]})})},uT=Z(null),uL=e=>{let t=tH(),[n,r]=ep(null);if(t?.data?.openby_default===void 0)return null;let[i,a]=function(e){let t=tU({context:{chatWindowStatus:e?"OPEN":"CLOSE"},on:{toggle:e=>({chatWindowStatus:"OPEN"===e.chatWindowStatus?"CLOSE":"OPEN"})}});return[tj(t,e=>e.context.chatWindowStatus),t.trigger.toggle]}(t.data.openby_default);return tC(D,{children:tC("div",{className:"fixed bottom-0 right-4 flex flex-col items-end space-y-2",children:[tC(uT.Provider,{value:{initialUserMessage:n,setInitialUserMessage:r},children:tC(uN,{widgetToggleState:i,toggleWidget:a,widgetConfig:e})}),tC(uE,{setUserInitialMessage:r,widgetToggleState:i,toggleWidget:a})]})})},uI=tP({context:{user_details:{SYS_FirstName:"sample",SYS_LastName:"B",SYS_UserEmail:"example@gmail.com",SYS_Location:"India",SYS_Timezone:"Asia/Kolkata",widget_chat_url:""}},on:{setUserDetails:(e,t)=>({user_details:{SYS_FirstName:t.userDetails?.SYS_FirstName??"sample",SYS_LastName:t.userDetails?.SYS_LastName??"B",SYS_UserEmail:t.userDetails?.SYS_UserEmail??"example@gmail.com",SYS_Location:t.userDetails?.SYS_Location??"India",SYS_Timezone:t.userDetails?.SYS_Timezone??"Asia/Kolkata",widget_chat_url:t.userDetails?.widget_chat_url??""}})}}),uO=(e,t=!1)=>{eg(()=>{uI.trigger.setUserDetails({...e}),t&&uI.inspect(e=>{console.log("USER INSPECTION::",e)})},[])},uA=e=>(t$({endpoint:e.endpoint,widget_id:e.widget_id},!0),console.log("window href",window.location.href),t2(!0),uO(e,!0),t1.send({type:"updateUserDetails",user_details:{SYS_FirstName:e.userDetails?.SYS_FirstName??"",SYS_UserEmail:e.userDetails?.SYS_UserEmail??"",SYS_LastName:e.userDetails?.SYS_LastName??"",SYS_Location:e.userDetails?.SYS_Location??"",SYS_Timezone:e.userDetails?.SYS_Timezone??"",widget_chat_url:window.location.href}}),tC("div",{className:"fixed bottom-0 right-4 pager-widget-root z-[99999999999999]",children:tC("div",{className:"pager-widget-root",children:tC(uL,{...e})})}));window.WAWidget={init:e=>{let t=document.getElementById(e.id);if(!t)return;let n=t.attachShadow({mode:"open"}),r=document.createElement("style");r.setAttribute("data-tailwind","true");let a=i(tN).replace("(((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b))))","(display: block)");console.log("widgetCss",i(tN),a),r.textContent=a,n.appendChild(r);let o=document.createElement("div");o.className="pager-widget",n.appendChild(o),tk.createRoot(o).render(tC(tv.StrictMode,{children:tC(uA,{...e})}))}}})();

package/package.json

@@ -89,6 +89,6 @@
         ],
         "mode": "all"
     },
-    "version": "1.0.11-alpha.7",
+    "version": "1.0.11-alpha.8",
     "name": "pager-widget"
 }

package/test-iframe-resize.html

@@ -42,7 +42,7 @@
   <div id="pager-widget-container"
        style="position:fixed;bottom:0;right:0;z-index:9999;min-height:60px;min-width:60px">
     <iframe id="pager-widget-iframe"
-      src="http://localhost:8000/embed/ae320291-260f-48fc-a069-68ab73858664?v=1.0.11-alpha.3&SYS_FirstName=John&SYS_UserEmail=john@example.com"
+      src="http://localhost:8000/embed/ae320291-260f-48fc-a069-68ab73858664?v=1.0.11-alpha.7&SYS_FirstName=John&SYS_UserEmail=john@example.com"
       style="position:absolute;width:100%;height:100%;border:none;background:transparent"
       title="Pager Widget">
     </iframe>
@@ -62,8 +62,8 @@
       window.addEventListener('message', function(event) {
          console.log(event.data, "from inside iframe");
         if (event.data && event.data.type === 'widgetResize') {
-          container.style.width = event.data.width + 'px';
-          container.style.height = event.data.height + 'px';
+          container.style.width = (Number(event.data.width) + 100) + 'px';
+          container.style.height = (Number(event.data.height) + 200) + 'px';
           debugSize.textContent = event.data.width + ' x ' + event.data.height;
           console.log('[widgetResize]', event.data.width, 'x', event.data.height);
         }