@opencx/widget-react 4.0.20 → 4.0.22

package/dist/index.cjs

@@ -14,7 +14,7 @@
         ${u.screens.welcome.width}, 
         ${u.screens.sessions.width}, 
         ${u.screens.chat.width}
-      )`)};return{theme:u,computed:j,cssVars:Xt({palette:u.palette,primary:u.primaryColor})}}function Xt({palette:t,primary:r}){const s=ht(t),o=Ye(r).toHsl(),n=Ye(r).isLight()?s[950]:s[50];return{"--opencx-primary":`${o.h} ${o.s*100}% ${o.l*100}%`,"--opencx-primary-foreground":n,"--opencx-background":s[100],"--opencx-foreground":s[950],"--opencx-destructive":"0 72.2% 50.6%","--opencx-destructive-foreground":s[50],"--opencx-accent":s[200],"--opencx-accent-foreground":"var(--opencx-foreground)","--opencx-secondary":s[200],"--opencx-secondary-foreground":"var(--opencx-foreground)","--opencx-muted":s[200],"--opencx-muted-foreground":s[500],"--opencx-input":s[300],"--opencx-border":s[300],"--opencx-ring":"var(--opencx-foreground)"}}function ht(t){const r={50:"0 0% 98%",100:"0 0% 96.1%",200:"0 0% 89.8%",300:"0 0% 83.1%",400:"0 0% 63.9%",500:"0 0% 45.1%",600:"0 0% 32.2%",700:"0 0% 25.1%",800:"0 0% 14.9%",900:"0 0% 9%",950:"0 0% 3.9%"},s={50:"60 9.1% 97.8%",100:"60 4.8% 95.9%",200:"20 5.9% 90%",300:"24 5.7% 82.9%",400:"24 5.4% 63.9%",500:"25 5.3% 44.7%",600:"33.3 5.5% 32.4%",700:"30 6.3% 25.1%",800:"12 6.5% 15.1%",900:"24 9.8% 10%",950:"20 14.3% 4.1%"},o={50:"0 0% 98%",100:"240 4.8% 95.9%",200:"240 5.9% 90%",300:"240 4.9% 83.9%",400:"240 5% 64.9%",500:"240 3.8% 46.1%",600:"240 5.2% 33.9%",700:"240 5.3% 26.1%",800:"240 3.7% 15.9%",900:"240 5.9% 10%",950:"240 10% 3.9%"},n={50:"210 40% 98%",100:"210 40% 96.1%",200:"214.3 31.8% 91.4%",300:"212.7 26.8% 83.9%",400:"215 20.2% 65.1%",500:"215.4 16.3% 46.9%",600:"215.3 19.3% 34.5%",700:"215.3 25% 26.7%",800:"217.2 32.6% 17.5%",900:"222.2 47.4% 11.2%",950:"222.2 84% 4.9%"};switch(t){case"neutral":return r;case"stone":return s;case"zinc":return o;case"slate":return n;default:return I.isExhaustive(t,ht.name),r}}function mt(){const{contentIframeRef:t}=l.useWidget(),{inline:r}=l.useConfig();return{setWidth:s=>{var o;(o=t==null?void 0:t.current)==null||o.style.setProperty("--opencx-widget-width",r?"100%":s)},setHeight:s=>{var o;(o=t==null?void 0:t.current)==null||o.style.setProperty("--opencx-widget-height",r?"100%":s)}}}function pe({width:t,height:r}){const{isSmallScreen:s}=R(),{setWidth:o,setHeight:n}=mt();h.useEffect(()=>{t&&o(t),r&&n(r)},[s,r,t,o,n])}const Ue=m.CircleDashedIcon;function U({name:t,className:r}){const s=(()=>{switch(t){case"Check":return m.CheckIcon;case"CheckCheck":return m.CheckCheckIcon;case"CircleCheck":return m.CircleCheckIcon;case"CircleCheckBig":return m.CircleCheckBigIcon;case"CircleX":return m.CircleXIcon;case"Expand":return m.ExpandIcon;case"Maximize":return m.MaximizeIcon;case"Maximize2":return m.Maximize2Icon;case"Minimize":return m.MinimizeIcon;case"Minimize2":return m.Minimize2Icon;case"Shrink":return m.ShrinkIcon;case"SquareCheck":return m.SquareCheckIcon;case"SquareCheckBig":return m.SquareCheckBigIcon;case"SquareX":return m.SquareXIcon;case"X":return m.XIcon;case void 0:return Ue;default:return I.isExhaustive(t,U.name),Ue}})();return e.jsx(s,{className:p("size-4",r)})}function he(){const{widgetCtx:{org:t}}=l.useWidget(),{routerState:{screen:r}}=l.useWidgetRouter(),{textContent:s}=l.useConfig();return(()=>{var n,i;switch(r){case"chat":return(n=s==null?void 0:s.chatScreen)==null?void 0:n.headerTitle;case"sessions":return(i=s==null?void 0:s.sessionsScreen)==null?void 0:i.headerTitle;case"welcome":return;default:I.isExhaustive(r,he.name);return}})()??t.name??"Chat"}function Ut(t){switch(t){case"chat":return w("chat/header");case"sessions":return w("sessions/header");case"welcome":return;default:I.isExhaustive(t,he.name);return}}function Vt(){const{router:t}=l.useConfig(),{routerState:{screen:r},toSessionsScreen:s}=l.useWidgetRouter();return r!=="chat"||t!=null&&t.chatScreenOnly?null:e.jsx(k,{variant:"ghost",size:"fit",className:"rounded-full",onClick:s,children:e.jsx(m.ChevronLeftIcon,{className:"size-4 rtl:-scale-100"})})}function Gt({button:t}){const{setIsOpen:r}=l.useWidgetTrigger(),{isSmallScreen:s}=R();if(s&&t.hideOnSmallScreen||!s&&t.hideOnLargeScreen)return null;const o=()=>{if(t.handleClick)return t.handleClick();r(!1)};return e.jsx(k,{variant:"ghost",size:"fit",className:"rounded-full",onClick:o,children:e.jsx(U,{name:t.icon})})}function ne({button:t}){const[r,s]=h.useState(!1),{routerState:{screen:o}}=l.useWidgetRouter(),{isSmallScreen:n}=R(),{theme:i}=q(),{setWidth:a,setHeight:d}=mt();if(o!=="chat"&&o!=="sessions")return null;const c=(()=>{switch(o){case"chat":return i.screens.chat.height;case"sessions":return i.screens.sessions.height;default:return I.isExhaustive(o,ne.name),i.screens.chat.height}})(),u=(()=>{switch(o){case"chat":return i.screens.chat.width;case"sessions":return i.screens.sessions.width;default:return I.isExhaustive(o,ne.name),i.screens.chat.width}})(),j=()=>{s(x=>{const g=!x;return d(g?"100vh":c),a(g?`max(40vw, ${u})`:u),g})};return n&&t.hideOnSmallScreen||!n&&t.hideOnLargeScreen?null:e.jsx(k,{variant:"ghost",size:"fit",className:"rounded-full",onClick:j,children:e.jsx(U,{name:t.icon||(r?t.shrinkIcon:t.expandIcon)})})}function ut({button:t}){var N,T;const{close:r}=ee(),{widgetCtx:s}=l.useWidget(),{setIsOpen:o}=l.useWidgetTrigger(),{resolveSession:n,sessionState:i}=l.useSessions(),{isSmallScreen:a}=R(),d=!i.session,c=((N=i.session)==null?void 0:N.isOpened)===!1,u=t.onResolved||"stay-in-chat",j=t.behaviorBeforeSessionCreation||"disabled",x=t.behaviorIfSessionIsResolved||"disabled",g=!!(i.isResolvingSession||d&&j==="disabled"||c&&x==="disabled"),C=async()=>{const{success:_,error:M}=await n();if(r(),!_)return console.error(M);switch(u){case"stay-in-chat":return;case"close-widget":o(!1);break;case"reset-chat":s.resetChat();break;case"reset-chat-and-close-widget":o(!1),s.resetChat();break;default:I.isExhaustive(u,ut.name);break}},v=()=>{if(d)switch(j){case"disabled":return;case"close-widget":o(!1);break;default:I.isExhaustive(j,v.name)}if(c)switch(x){case"disabled":return;case"close-widget":o(!1);break;case"reset-chat":s.resetChat();break;case"reset-chat-and-close-widget":o(!1),setTimeout(()=>{s.resetChat()},200);break;default:I.isExhaustive(x,v.name)}};return a&&t.hideOnSmallScreen||!a&&t.hideOnLargeScreen?null:((T=t.confirmation)==null?void 0:T.type)==="modal"&&!c&&!d?e.jsx(at,{trigger:e.jsx(k,{variant:"ghost",size:"fit",className:"rounded-full",disabled:g,children:e.jsx(U,{name:t.icon})}),children:e.jsxs(tt,{children:[e.jsx(st,{children:e.jsx(nt,{children:t.confirmation.title||"Close conversation"})}),e.jsx(rt,{children:e.jsx(it,{children:t.confirmation.description||"Are you sure you want to close this conversation?"})}),e.jsxs(ot,{children:[e.jsx(k,{variant:"secondary",onClick:r,disabled:i.isResolvingSession,children:t.confirmation.cancelButtonText||"No"}),e.jsx(k,{variant:"destructive",onClick:C,disabled:i.isResolvingSession,children:t.confirmation.confirmButtonText||"Yes"})]})]})}):e.jsx(k,{variant:"ghost",size:"fit",className:"rounded-full",onClick:c||d?v:C,disabled:g,children:e.jsx(U,{name:t.icon})})}function ie({button:t}){switch(t.functionality){case"close-widget":return e.jsx(Gt,{button:t});case"expand-shrink":return e.jsx(ne,{button:t});case"resolve-session":return e.jsx(ut,{button:t});default:return I.isExhaustive(t,ie.name),null}}const Kt={functionality:"close-widget",hideOnLargeScreen:!0,icon:"X"};function Qt(){const{routerState:{screen:t}}=l.useWidgetRouter(),{headerButtons:r}=l.useConfig(),s=t==="chat"?r==null?void 0:r.chatScreen:t==="sessions"?r==null?void 0:r.sessionsScreen:[];return!s||s.length===0?e.jsx(ie,{button:Kt}):e.jsx(e.Fragment,{children:s.map(o=>e.jsx(ie,{button:o},`${o.functionality}-${o.icon}`))})}function gt(){const{routerState:{screen:t}}=l.useWidgetRouter(),r=Ut(t),s=he();return e.jsx("header",{...r,className:"py-2 px-4 shrink-0",children:e.jsxs("div",{className:"flex items-center gap-2",children:[e.jsx(Vt,{}),e.jsx("div",{className:p("flex-1 h-8 flex items-center",t==="sessions"&&"ps-2"),children:e.jsx("h2",{className:"font-semibold",children:s})}),e.jsx(Qt,{})]})})}function wt({className:t}){return e.jsx(m.LoaderIcon,{className:p("size-4 animate-spin",t)})}function Zt(){const{messagesState:{isInitialFetchLoading:t}}=l.useMessages(),{isSmallScreen:r}=R(),{activeMode:s,Component:o}=l.useModes();return{isCanvasOpen:!t&&!r&&!!s&&!!o}}function Jt(){const{activeMode:t,Component:r}=l.useModes(),{sendMessage:s}=l.useMessages(),{createStateCheckpoint:o}=l.useSessions(),[n,i]=h.useState(!1),a=async d=>{try{i(!0),await s(d)}catch(c){console.error(c)}finally{i(!1)}};return!t||!r?null:e.jsx(r,{react:h,mode:t,createStateCheckpoint:o,sendMessage:a,isSendingMessage:n})}const P=h.forwardRef((t,r)=>{var s,o,n;return e.jsx(f,{...t,ref:r,className:p("overflow-hidden",t.className),overrides:{initial:{height:0,opacity:0,...(s=t.overrides)==null?void 0:s.initial},animate:{height:"auto",opacity:1,...(o=t.overrides)==null?void 0:o.animate},exit:{height:0,opacity:0,...(n=t.overrides)==null?void 0:n.exit}}})});P.displayName="MotionDiv__VerticalReveal";const es=[{label:"Terrible",value:1,emoji:"😡"},{label:"Poor",value:2,emoji:"😞"},{label:"Okay",value:3,emoji:"😐"},{label:"Good",value:4,emoji:"😊"},{label:"Great",value:5,emoji:"😍"}];function ts(){const{isSmallScreen:t}=R(),{submitCsat:r,isCsatRequested:s,isCsatSubmitted:o,submittedScore:n,submittedFeedback:i}=l.useCsat(),[a,d]=h.useState(null),[c,u]=h.useState(null),j=g=>{d(C=>C===g?null:g)},x=()=>{a&&r({score:a,feedback:c||void 0})};return!s&&!o?null:e.jsxs("div",{className:"w-1/2 min-w-80 max-w-96 mx-auto overflow-hidden",children:[e.jsx(y.AnimatePresence,{mode:"wait",children:s&&!a?e.jsx(P,{children:e.jsx("p",{className:"text-sm text-muted-foreground text-center pt-2",children:"How was your conversation?"})},"csat-requested-title"):o?e.jsx(P,{children:e.jsx("p",{className:"text-sm text-muted-foreground text-center pt-2",children:"You rated the conversation as"})},"csat-submitted-title"):null}),e.jsx("div",{className:p("flex gap-4 justify-between pt-2 px-2 pb-2","transition-all",o&&"gap-0 justify-center"),children:es.map(g=>e.jsx(k,{variant:g.value===a?"secondary":"ghost",size:"selfless",className:p("transition-all overflow-hidden","text-2xl size-8 rounded-full","opacity-35","hover:opacity-100",!a&&"opacity-100",g.value===a&&"opacity-100",o&&g.value!==n&&"opacity-0 size-0",o&&g.value===n&&"opacity-100 size-fit text-4xl"),onClick:s?()=>j(g.value):void 0,children:g.emoji},g.value))}),e.jsx(y.AnimatePresence,{mode:"wait",children:(a||n)&&e.jsx(P,{children:e.jsxs("div",{className:"pb-2 px-2 flex items-end",children:[e.jsx("textarea",{rows:3,className:p("transition-all","max-h-40 [field-sizing:content]","w-full resize-none","bg-transparent outline-none","placeholder:text-muted-foreground",t?"text-[16px]":"text-sm",o&&"text-center"),value:o?i||"":c||"",onChange:s?g=>u(g.target.value):void 0,readOnly:o,placeholder:s?"Tell us more... (optional)":void 0}),e.jsx(k,{size:"fit",onClick:x,disabled:!a,className:p("transition-all overflow-hidden","rounded-full size-8 flex items-center justify-center p-0",o&&"opacity-0 size-0"),children:e.jsx(m.ArrowUpIcon,{className:"size-4"})})]})},"feedback-box")}),e.jsx("div",{className:p("h-0 transition-[height]",o&&"h-4")})]})}function $(){const{dir:t}=l.useDocumentDir(),r=l.useConfig();return h.useMemo(()=>{const s=I.isSupportedLanguage(r.language)?r.language:"en";return{t:o=>I.getTranslation(o,s,r.translationOverrides),language:s,dir:s==="ar"?"rtl":"ltr",hostDocumentDir:t}},[r.language,t])}function me({suggestion:t,className:r,...s}){const{sendMessage:o}=l.useMessages(),n=()=>{const i=t.trim();i&&o({content:i})};return e.jsx(k,{...w("chat/suggested_reply_btn"),size:"sm",className:p("rounded-xl w-fit",r),...s,onClick:n,children:t})}function ss(){const{t}=$(),r=[t("i_need_more_help"),t("this_was_helpful")];return e.jsx("div",{...w("chat/might_solve_user_issue_suggested_replies_container"),className:"flex items-center gap-2 p-2 pb-0 flex-wrap",children:r.map(s=>e.jsx(me,{suggestion:s,className:"flex-1"},s))})}function Ve(){const{sessionState:t}=l.useSessions(),{chatFooterItems:r}=l.useConfig(),s=!!t.session&&!t.session.isOpened,o=!s;return e.jsx(y.AnimatePresence,{mode:"wait",children:r==null?void 0:r.map((n,i)=>n.showWhenSessionIsOpen===!1&&o||n.showWhenSessionIsResolved===!1&&s?null:e.jsx(P,{children:e.jsx("div",{className:"pb-2 text-center text-xs",children:e.jsx(ae,{children:n.message})})},`${n.message}-${i}`))})}function rs({file:{status:t,file:r,error:s},onCancel:o}){const[n,i]=h.useState(null);h.useEffect(()=>{if(!r.type.startsWith("image/"))return;const c=new FileReader;return c.onload=()=>i(c.result),c.onerror=()=>console.error("Error reading file"),c.readAsDataURL(r),()=>c.abort()},[r]);const a=()=>{switch(t){case"uploading":return e.jsx(m.Loader2,{className:"size-4 animate-spin"});case"error":return e.jsx(m.AlertCircle,{className:"size-4 text-destructive"});default:return null}},d=()=>{const c=r.type.split("/")[0];return c==="image"&&n?e.jsx("img",{src:typeof n=="string"?n:"",className:"object-cover bg-secondary size-full",alt:r.name}):c==="audio"?e.jsx(m.FileAudio2Icon,{}):c==="video"?e.jsx(m.FileVideo2Icon,{}):e.jsx(m.FileIcon,{})};return e.jsx(X,{side:"bottom",content:t==="error"?e.jsxs("span",{className:"text-destructive",children:["Failed to upload: ",s]}):r.name,children:e.jsxs("div",{className:p(t==="uploading"&&"opacity-50","group","size-12 border rounded-2xl overflow-hidden relative","flex items-center justify-center shrink-0"),children:[e.jsx("div",{className:"absolute inset-0 flex items-center justify-center",children:a()}),e.jsx("button",{type:"button",className:p("absolute bg-black/50 inset-0 size-full z-10 opacity-0","flex items-center justify-center","opacity-0 group-hover:opacity-100 transition"),onClick:o,children:e.jsx(m.XIcon,{className:"size-4 text-primary-foreground"})}),e.jsx(d,{})]})})}function os(){var D;const{isSmallScreen:t}=R(),r=h.useRef(null),{sendMessage:s}=l.useMessages(),{sessionState:o}=l.useSessions(),{t:n}=$(),[i,a]=h.useState(""),{allFiles:d,emptyTheFiles:c,handleCancelUpload:u,appendFiles:j,isUploading:x,successFiles:g}=l.useUploadFiles(),C=!!((D=o.session)!=null&&D.isHandedOff),{isAwaitingBotReply:v}=l.useIsAwaitingBotReply(),N=b=>{j(b)},T=!i.trim()&&g.length===0,_=async()=>{if(v||T)return;x&&console.info("please wait for the file(s) to upload");const b=i.trim();s({content:b,attachments:g.flatMap(z=>z.fileUrl?[{url:z.fileUrl,type:z.file.type,name:z.file.name,id:z.id,size:z.file.size}]:[])}),a(""),c()},{getRootProps:M,getInputProps:E,open:A}=Tt.useDropzone({onDrop:N,noClick:!0,onDropRejected(){console.error("unsupported file type, or the file is too large")},maxSize:5*1024*1024,accept:C?{"text/*":[".txt"],"image/*":[".png",".jpg",".jpeg",".gif"],"application/pdf":[".pdf"]}:{"image/png":[".png"],"image/jpeg":[".jpg",".jpeg"],"image/gif":[".gif"],"image/webp":[".webp"]}}),W=b=>{const z=b.clipboardData;z&&z.files.length>0&&N(Array.from(z.files))};return e.jsxs("div",{...w("chat/input_box/root"),className:"p-2 relative space-y-1",...M(),children:[e.jsx("input",{...E()}),e.jsxs("div",{...w("chat/input_box/inner_root"),className:p("transition-all","bg-white","relative rounded-3xl flex flex-col gap-2 p-2","hover:border-primary focus-within:border-primary"),children:[e.jsxs("div",{...w("chat/input_box/textarea_and_attachments_container"),className:"flex flex-col gap-2",children:[d.length>0&&e.jsx("div",{...w("chat/input_box/attachments_container"),className:"flex items-center gap-1",children:e.jsx(y.AnimatePresence,{mode:"popLayout",children:d.map(b=>e.jsx(f,{snapExit:!0,children:e.jsx(rs,{onCancel:()=>u(b.id),file:b})},b.id))})}),e.jsx("textarea",{...w("chat/input_box/textarea"),onPaste:W,ref:r,id:"chat-input",value:i,rows:3,className:p("max-h-16 [field-sizing:content]","w-full resize-none px-2",d.length===0&&"pt-1","bg-transparent outline-none","placeholder:text-muted-foreground",t?"text-[16px]":"text-sm"),onChange:b=>a(b.target.value),onKeyDown:async b=>{b.key==="Enter"&&!b.shiftKey&&(b.preventDefault(),_())},placeholder:n("write_a_message_placeholder")})]}),e.jsxs("div",{className:"gap-2 flex justify-between",children:[e.jsx(X,{side:"top",align:"start",content:"attach files, (maximum size 5mb)",children:e.jsx(k,{onClick:A,size:"fit",variant:"ghost",className:p("rounded-full size-8 flex items-center justify-center p-0 overflow-hidden"),children:e.jsx(y.AnimatePresence,{mode:"wait",children:C?e.jsx(f,{children:e.jsx(m.PaperclipIcon,{className:"size-4"})},"paper-clip"):e.jsx(f,{children:e.jsx(m.ImageIcon,{className:"size-4"})},"image-icon")})})}),e.jsx(X,{content:"send message",side:"top",align:"end",children:e.jsx(k,{size:"fit",onClick:_,disabled:v||x||T,className:"rounded-full size-8 flex items-center justify-center p-0",children:e.jsx(y.AnimatePresence,{mode:"wait",children:v||x?e.jsx(f,{snapExit:!0,children:e.jsx(m.CircleDashed,{className:"size-4 animate-spin animate-iteration-infinite"})},"loading"):e.jsx(f,{snapExit:!0,children:e.jsx(m.ArrowUpIcon,{className:"size-4"})},"send")})})})]})]})]})}function Ge(){const{widgetCtx:t}=l.useWidget(),{router:r}=l.useConfig(),{canCreateNewSession:s}=l.useSessions(),{toSessionsScreen:o}=l.useWidgetRouter(),{t:n}=$();return e.jsx(e.Fragment,{children:s||r!=null&&r.chatScreenOnly?e.jsx(k,{onClick:t.resetChat,className:"rounded-2xl w-full",children:n("new_conversation")}):e.jsx(k,{onClick:o,className:"rounded-2xl w-full",children:n("back_to_conversations")})})}function ns(){const{t}=$(),{isCsatRequested:r,isCsatSubmitted:s}=l.useCsat();return e.jsx("div",{className:"p-2",children:e.jsx("div",{className:"p-2 bg-muted rounded-3xl",children:e.jsx(y.AnimatePresence,{mode:"wait",children:r||s?e.jsxs(P,{children:[e.jsx(ts,{}),e.jsx(y.AnimatePresence,{mode:"wait",children:s&&e.jsx(P,{children:e.jsx(Ge,{})},"new-conv-or-back-to-convs-button")})]},"csat"):e.jsxs(P,{children:[e.jsxs("div",{className:"ps-2 flex items-center gap-1 pb-2",children:[e.jsx(m.CircleCheckIcon,{className:"size-4 text-emerald-600"}),e.jsx("h2",{className:"text-sm font-medium",children:t("your_issue_has_been_resolved")})]}),e.jsx(Ge,{})]},"session-closed")})})})}function is(){var a;const{initialQuestions:t,initialQuestionsPosition:r,thisWasHelpfulOrNot:s}=l.useConfig(),{sessionState:o}=l.useSessions(),{messagesState:n}=l.useMessages(),i=n.messages.length===0;return e.jsx("footer",{children:e.jsx(y.AnimatePresence,{mode:"wait",children:o.session&&!((a=o.session)!=null&&a.isOpened)?e.jsxs(P,{children:[e.jsx(ns,{}),e.jsx(Ve,{})]},"session-closed"):e.jsxs(P,{children:[n.lastAIResMightSolveUserIssue&&(s==null?void 0:s.enabled)!==!1&&e.jsx(ss,{}),i&&t&&r!=="below-initial-messages"&&e.jsx("div",{className:"flex items-center flex-row justify-end gap-2 flex-wrap px-2",children:t==null?void 0:t.map((d,c)=>e.jsx(me,{suggestion:d},`${d}-${c}`))}),e.jsx(os,{}),e.jsx(Ve,{})]},"chat-input")})})}function as({isFirstInGroup:t,isLastInGroup:r,isAloneInGroup:s,...o}){const{componentStore:n}=l.useWidget();if(o.type!=="AGENT"&&o.type!=="AI")return null;if(o.data.action){const a=n.getComponent(o.data.action.name);if(a)return e.jsx(a,{...o,id:o.id,isFirstInGroup:t,isLastInGroup:r,isAloneInGroup:s})}const i=n.getComponent(o.component);return i?e.jsx(i,{...o,id:o.id,isFirstInGroup:t,isLastInGroup:r,isAloneInGroup:s}):e.jsx(re,{...o,isFirstInGroup:t,isLastInGroup:r,isAloneInGroup:s})}function ft({messages:t,className:r,containerClassName:s}){var a,d;const{timestamps:o}=l.useConfig();if(!((a=o==null?void 0:o.perMessageGroup)!=null&&a.enabled))return null;const n=(d=t[t.length-1])==null?void 0:d.timestamp;if(!n)return null;const i=(()=>{try{return new Date(n).toLocaleTimeString([],{hour:"2-digit",minute:"2-digit",hour12:!0})}catch(c){return console.error(c),null}})();return i?e.jsx("div",{className:s,children:e.jsx("span",{className:p("text-xs text-muted-foreground",r),children:i})}):null}function ue({messages:t,agent:r,suggestedReplies:s}){return e.jsxs("div",{...w("chat/agent_msg_group/root"),className:p("flex items-end gap-2"),children:[e.jsx(X,{content:r==null?void 0:r.name,side:"right",align:"end",children:e.jsx(oe,{...w("chat/agent_msg_group/root/avatar"),agent:r,className:"hidden"})}),e.jsxs("div",{className:p("flex-1 flex flex-col gap-1"),children:[e.jsxs("div",{...w("chat/agent_msg_group/avatar_and_msgs/root"),className:p("flex items-end gap-2"),children:[e.jsx(X,{content:r==null?void 0:r.name,side:"right",align:"end",children:e.jsx(oe,{...w("chat/agent_msg_group/avatar_and_msgs/avatar"),agent:r})}),e.jsxs("div",{...w("chat/agent_msg_group/avatar_and_msgs/msgs"),className:p("flex-1 flex flex-col gap-1"),children:[t.map((o,n,i)=>e.jsx(as,{isFirstInGroup:n===0,isLastInGroup:n===i.length-1,isAloneInGroup:i.length===1,...o},o.id)),e.jsx(ft,{messages:t})]})]}),s&&s.length>0&&e.jsx("div",{...w("chat/agent_msg_group/suggestions"),className:p("flex flex-col gap-1 ps-8"),children:s==null?void 0:s.map((o,n)=>e.jsx(me,{suggestion:o},`${o}-${n}`))})]})]})}function xt(){const{widgetCtx:{org:t}}=l.useWidget(),{sessionState:{session:r}}=l.useSessions(),s=l.useConfig(),{messagesState:{messages:o}}=l.useMessages();return{props:{react:h,org:t,session:r,config:s,messages:o}}}function ls(){var s,o;const{props:t}=xt();if((s=t.session)!=null&&s.isOpened||!t.session)return null;const r=(o=t.config.specialComponents)==null?void 0:o.onSessionResolved;return r?e.jsx(r,{...t}):null}function cs({message:t,isFirstInGroup:r,isLastInGroup:s,isAloneInGroup:o}){var n;return e.jsxs("div",{...w("chat/user_msg/root"),className:"w-5/6 flex flex-col items-end gap-1",children:[t.attachments&&t.attachments.length>0&&e.jsx("div",{className:"w-full flex gap-1 flex-wrap justify-end",children:(n=t.attachments)==null?void 0:n.map(i=>e.jsx(lt,{attachment:i},i.id))}),t.content.length>0&&e.jsx("div",{...w("chat/user_msg/msg"),"data-first":r,"data-last":s,"data-alone":o,className:p("transition-all","w-fit py-3 px-4 rounded-3xl text-sm","bg-primary text-primary-foreground","break-words [word-break:break-word]","whitespace-pre-wrap",r&&!o&&"rounded-br-md",s&&!o&&"rounded-tr-md",!r&&!s&&!o&&"rounded-r-md"),children:t.content})]})}function ds({messages:t}){return e.jsxs("div",{...w("chat/user_msg_group/root"),className:p("group","flex flex-col gap-1 justify-end items-end"),children:[t.map((r,s,o)=>e.jsx(cs,{message:r,isFirstInGroup:s===0,isLastInGroup:s===o.length-1,isAloneInGroup:o.length===1},r.id)),e.jsx(ft,{messages:t,containerClassName:"ms-auto"})]})}function ps(t){const r=[];let s=null;return t.forEach(o=>{var n,i,a,d,c,u;(!s||((n=s[0])==null?void 0:n.type)!==o.type)&&(s=[],r.push(s)),((i=s[0])==null?void 0:i.type)==="AGENT"&&o.type==="AGENT"&&(((a=o.agent)==null?void 0:a.id)!==((d=s[0].agent)==null?void 0:d.id)||((c=o.agent)==null?void 0:c.name)!==((u=s[0].agent)==null?void 0:u.name))&&(s=[],r.push(s)),s.push(o)}),r}function hs(t){var r;return((r=t==null?void 0:t[0])==null?void 0:r.type)==="USER"}function ms(t){var r;return((r=t==null?void 0:t[0])==null?void 0:r.type)==="AI"}function us(t){var r;return((r=t==null?void 0:t[0])==null?void 0:r.type)==="AGENT"}function gs(){const{messagesState:{messages:t}}=l.useMessages(),{advancedInitialMessages:r=[],initialQuestionsPosition:s,initialQuestions:o,bot:n}=l.useConfig();return e.jsx(e.Fragment,{children:t.length===0&&r.length>0&&e.jsx(ue,{messages:r.map(({message:i},a)=>({component:"bot_message",data:{message:i},id:`${a}-${i}`,type:"AI",timestamp:null})),suggestedReplies:t.length===0&&s==="below-initial-messages"?o:void 0,agent:n?{...n,isAi:!0,id:null}:void 0})})}function ws(){const{messagesState:{messages:t}}=l.useMessages(),{chatBannerItems:r}=l.useConfig();return!(r!=null&&r.length)||t.length>0&&r.every(s=>!s.persistent)?null:e.jsx("div",{className:"w-full text-center text-xs",children:r.map(({message:s,persistent:o},n)=>t.length>0&&!o?null:e.jsx("div",{children:e.jsx(ae,{children:s})},`${s}-${n}`))})}function fs(){const{messagesState:{messages:t}}=l.useMessages(),r=l.useConfig(),{advancedInitialMessages:s=[],initialQuestions:o,initialQuestionsPosition:n}=r,i=(()=>{var a;return s.length?[]:t.length?[]:(a=r.initialMessages)!=null&&a.length?r.initialMessages:["Hello, how can I help you?"]})();return e.jsx(e.Fragment,{children:t.length===0&&i.length>0&&e.jsx(ue,{messages:i.map((a,d)=>({component:"bot_message",data:{message:a},id:`${d}-${a}`,type:"AI",timestamp:null})),suggestedReplies:n==="below-initial-messages"?o:void 0,agent:r.bot?{...r.bot,isAi:!0,id:null}:void 0})})}function xs(){var s;const{props:t}=xt(),r=(s=t.config.specialComponents)==null?void 0:s.chatBottomComponents;return r?e.jsx("div",{children:r.map(({key:o,component:n})=>e.jsx(n,{...t},o))}):null}function vs(){const{messagesState:{messages:t}}=l.useMessages(),{isAwaitingBotReply:r}=l.useIsAwaitingBotReply(),{componentStore:s}=l.useWidget(),o=l.useConfig(),n=h.useMemo(()=>ps(t),[t]),i=s.getComponent("loading"),a=h.useRef(null);function d(){setTimeout(()=>{const c=a.current;c&&(c.scrollTop=c.scrollHeight)},0)}return h.useEffect(()=>{d()},[t]),e.jsxs("div",{...w("chat/msgs/root"),ref:a,className:"max-h-full scroll-smooth relative flex-1 py-2 px-4 flex flex-col gap-2 overflow-auto",children:[e.jsx(ws,{}),e.jsx(gs,{}),e.jsx(fs,{}),n.map(c=>{var x,g,C;const u=(x=c==null?void 0:c[0])==null?void 0:x.type,j=(g=c[0])==null?void 0:g.id;if(!u||!j)return null;if(hs(c))return e.jsx(ds,{messages:c},j);if(ms(c)||us(c)){const v=(C=c[0])==null?void 0:C.agent;return e.jsx(ue,{messages:c,agent:v},j)}return null}),r&&i&&e.jsx(i,{agent:o.bot}),e.jsx(xs,{}),e.jsx(ls,{})]})}function bs(){const{messagesState:{isInitialFetchLoading:t}}=l.useMessages(),{sessionState:{session:r}}=l.useSessions(),{isCanvasOpen:s}=Zt(),{theme:o}=q();pe({width:s?o.screens.chat.withCanvas.width:o.screens.chat.width,height:s?o.screens.chat.withCanvas.height:o.screens.chat.height});const n=h.useRef((r==null?void 0:r.id)||"chat").current;return e.jsx("div",{...w("chat/root"),className:p("flex flex-col overflow-hidden"),style:{width:"100vw",maxWidth:"100vw",height:"100vh",maxHeight:"100vh"},children:e.jsxs("div",{className:"size-full justify-between flex flex-col",children:[e.jsx(gt,{}),e.jsx(y.AnimatePresence,{mode:"wait",children:t?e.jsx(f,{className:"flex flex-col items-center justify-center w-full flex-1",children:e.jsx(wt,{})},"loading"):e.jsxs(f,{className:"flex items-start h-full flex-1 overflow-auto",snapExit:!0,children:[e.jsxs("div",{...w("chat/main/root"),className:p("flex flex-col h-full overflow-auto transition-all",s?"w-2/5":"w-full"),style:{transitionTimingFunction:o.screens.chat.withCanvas.transitionTimingFunction,transitionDuration:o.screens.chat.withCanvas.transitionDuration},children:[e.jsx(vs,{}),e.jsx(is,{})]}),e.jsx("div",{...w("chat/canvas/root"),className:p("h-full overflow-auto transition-all",s?"w-3/5":"w-0"),style:{transitionTimingFunction:o.screens.chat.withCanvas.transitionTimingFunction,transitionDuration:o.screens.chat.withCanvas.transitionDuration},children:e.jsx(Jt,{})})]},n)})]})})}function ys({className:t,...r}){return e.jsx("div",{className:p("animate-pulse rounded-md bg-secondary",t),...r})}function js({className:t}){return e.jsx("svg",{width:"26",height:"32",viewBox:"0 0 26 32",fill:"none",xmlns:"http://www.w3.org/2000/svg",className:p("text-primary-foreground",t),children:e.jsx("path",{d:"M1.34103 25.6132H5.44245C5.74203 25.6228 6.02673 25.7462 6.23867 25.9582C6.45062 26.1703 6.5739 26.4551 6.58348 26.7548V30.8584C6.59305 31.1581 6.71634 31.443 6.92828 31.655C7.14023 31.8671 7.42492 31.9904 7.7245 32H18.2894C18.589 31.9904 18.8737 31.8671 19.0856 31.655C19.2976 31.443 19.4209 31.1581 19.4304 30.8584V26.7548C19.4401 26.4545 19.5638 26.1692 19.7765 25.957C19.9892 25.7449 20.2748 25.6219 20.5749 25.6132H24.659C24.9586 25.6036 25.2433 25.4803 25.4552 25.2682C25.6671 25.0562 25.7904 24.7713 25.8 24.4716V7.52839C25.7904 7.22865 25.6671 6.94381 25.4552 6.73176C25.2433 6.5197 24.9586 6.39635 24.659 6.38677H20.561C20.2603 6.37802 19.9742 6.25457 19.7614 6.04169C19.5487 5.82881 19.4253 5.54261 19.4165 5.24168V1.14161C19.4072 0.84419 19.2858 0.561291 19.0768 0.349589C18.8678 0.137887 18.5865 0.0130193 18.2894 0L7.7245 0C7.42492 0.00957792 7.14023 0.132929 6.92828 0.344983C6.71634 0.557036 6.59305 0.841878 6.58348 1.14161V5.24168C6.57477 5.54203 6.45187 5.82773 6.23983 6.04052C6.0278 6.25331 5.74262 6.37715 5.44245 6.38677H1.34103C1.04144 6.39635 0.756749 6.5197 0.544805 6.73176C0.332861 6.94381 0.209574 7.22865 0.200001 7.52839V24.4716C0.209574 24.7713 0.332861 25.0562 0.544805 25.2682C0.756749 25.4803 1.04144 25.6036 1.34103 25.6132ZM6.58348 24.4716V7.52839C6.59305 7.22865 6.71634 6.94381 6.92828 6.73176C7.14023 6.5197 7.42492 6.39635 7.7245 6.38677H18.2894C18.589 6.39635 18.8737 6.5197 19.0856 6.73176C19.2976 6.94381 19.4209 7.22865 19.4304 7.52839V24.4716C19.4209 24.7713 19.2976 25.0562 19.0856 25.2682C18.8737 25.4803 18.589 25.6036 18.2894 25.6132H7.7245C7.42492 25.6036 7.14023 25.4803 6.92828 25.2682C6.71634 25.0562 6.59305 24.7713 6.58348 24.4716Z",fill:"currentColor"})})}function vt({className:t}){const{token:r}=l.useConfig();return e.jsx("div",{className:p("flex items-center justify-center gap-2 p-2 pt-0",t),children:e.jsx(O,{children:e.jsxs("a",{href:`https://open.cx/?ref=${r}`,target:"_blank",rel:"noreferrer",className:p("text-[10px] flex items-center","text-muted-foreground/70 [&_svg]:text-muted-foreground/70","hover:text-primary [&_svg]:hover:text-primary"),children:[e.jsx("span",{children:"Powered by"}),e.jsx("span",{children:" "}),e.jsxs("span",{className:"flex items-center gap-[1px]",children:[e.jsx("span",{children:e.jsx(js,{className:"size-3 inline-block"})}),e.jsx("span",{className:"font-semibold",children:"open"})]})]})})})}function ks({children:t}){return e.jsx("p",{className:"ps-4 text-xs text-muted-foreground/75 uppercase font-semibold tracking-tight",children:t})}function Ke({session:t,className:r}){const{bot:s}=l.useConfig(),{toChatScreen:o}=l.useWidgetRouter(),n=t.assignee.kind==="human"?t.assignee.name||"Support Agent":(s==null?void 0:s.name)||"AI Support Agent",i=t.assignee.kind==="human"?t.assignee.avatarUrl||"":(s==null?void 0:s.avatar)||"";return e.jsxs(k,{variant:"ghost",size:"lg",className:p("rounded-full p-2 pe-4 flex text-start justify-between w-full whitespace-normal",r),onClick:()=>o(t.id),children:[e.jsxs("div",{className:"flex-1 flex gap-2 items-center",children:[e.jsx(y.AnimatePresence,{mode:"wait",children:e.jsx(f,{snapExit:!0,children:e.jsxs(le,{className:"size-10",children:[e.jsx(ce,{src:i,alt:"Agent Icon"}),e.jsx(de,{children:e.jsx(m.UserRoundIcon,{className:"size-4"})})]})})}),e.jsxs("div",{className:"flex-1",children:[e.jsx(y.AnimatePresence,{mode:"wait",children:e.jsx(f,{snapExit:!0,children:n},n)}),e.jsx(y.AnimatePresence,{mode:"wait",children:t.lastMessage?e.jsx(f,{snapExit:!0,children:e.jsx(ct,{remarkPlugins:[Qe],rehypePlugins:[Ze],className:"line-clamp-1 overflow-hidden text-ellipsis text-xs text-muted-foreground",children:t.lastMessage})},t.lastMessage||"content"):e.jsx(f,{className:"w-1/2",snapExit:!0,children:e.jsx(ys,{className:"h-4 w-full"})},"skeleton")})]})]}),e.jsx(m.ChevronRightIcon,{className:"size-4 text-muted-foreground shrink-0 rtl:-scale-100"})]})}function Cs(){const{t}=$(),{toChatScreen:r}=l.useWidgetRouter(),{sessionsState:{data:s,isInitialFetchLoading:o},openSessions:n,closedSessions:i,canCreateNewSession:a}=l.useSessions();return e.jsx("div",{className:"flex-1 flex flex-col overflow-scroll py-2 px-2",children:e.jsx(y.AnimatePresence,{mode:"wait",children:o?e.jsx(f,{className:"flex-1 flex items-center justify-center",children:e.jsx(wt,{})},"loading"):e.jsx(f,{className:"flex-1 flex flex-col gap-2 relative",children:s.length?e.jsxs(e.Fragment,{children:[e.jsxs(y.AnimatePresence,{children:[n.length>0&&e.jsx(f,{fadeIn:"up",delay:.2,className:"space-y-2",snapExit:!0,children:n.map(d=>e.jsx(Ke,{session:d},d.id))},"open-sessions"),i.length>0&&e.jsxs(f,{className:"space-y-2",delay:.2,snapExit:!0,children:[e.jsx(ks,{children:t("closed_conversations")}),i.map(d=>e.jsx(Ke,{session:d,className:"opacity-50 hover:opacity-100"},d.id))]},"closed-sessions")]}),a&&e.jsx("div",{className:"mt-auto w-full rounded-3xl sticky bottom-0 outline outline-8 outline-background bg-background",children:h.createElement(k,{...w("sessions/new_conversation_btn"),size:"lg",key:"new-session",className:"w-full",onClick:()=>r()},t("new_conversation"))})]}):e.jsxs("div",{className:"flex-1 flex flex-col gap-2 items-center",children:[e.jsx("div",{className:"flex-1 flex items-center justify-center",children:e.jsx("p",{className:"text-muted-foreground",children:t("no_conversations_yet")})}),h.createElement(k,{...w("sessions/new_conversation_btn"),size:"lg",key:"new-session",className:"w-full",onClick:()=>r()},t("new_conversation"))]})},"sessions")})})}function zs(){const{theme:t}=q();return pe({width:t.screens.sessions.width,height:t.screens.sessions.height}),e.jsx("div",{...w("sessions/root"),className:p("flex flex-col overflow-hidden bg-background"),style:{width:"100vw",maxWidth:"100vw",height:"100vh",maxHeight:"100vh"},children:e.jsxs("div",{className:"size-full flex flex-col",children:[e.jsx(gt,{}),e.jsx(Cs,{}),e.jsx(vt,{})]})})}const Q=L.forwardRef(({className:t,type:r,...s},o)=>{const{isSmallScreen:n}=R();return e.jsx(O,{ref:o,children:e.jsx("input",{type:r,className:p(n?"text-[16px]":"text-sm","flex w-full rounded-xl p-2 ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-primary-foreground placeholder:text-muted-foreground/75 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 transition","rounded-2xl px-4","border shadow-sm",t),...s})})});Q.displayName="Input";function Ss(){const{contentIframeRef:t}=l.useWidget(),{inline:r}=l.useConfig(),s=h.useRef(null);return h.useEffect(()=>{const o=t==null?void 0:t.current;if(o&&s.current){const n=s.current;let i;const a=new ResizeObserver(()=>{i=requestAnimationFrame(()=>{const d=n.offsetHeight;o.style.setProperty("--opencx-widget-height",r?"100%":`${d.toFixed(1)}px`)})});return a.observe(n),()=>{cancelAnimationFrame(i),a.unobserve(n)}}},[t,r]),{observedElementRef:s}}const Ns=se.z.object({name:se.z.string().min(2),email:se.z.string().email()});function _s(){var _,M,E,A,W,D,b,z;const{widgetCtx:{org:t}}=l.useWidget(),{setIsOpen:r}=l.useWidgetTrigger(),{createUnverifiedContact:s}=l.useContact(),{isSmallScreen:o}=R(),n=l.useConfig(),{theme:i}=q(),{t:a}=$(),{observedElementRef:d}=Ss();pe({height:void 0,width:i.screens.welcome.width});const[c,u]=h.useState(((_=n.prefillUserData)==null?void 0:_.name)||""),[j,x]=h.useState(((M=n.prefillUserData)==null?void 0:M.email)||""),g=(n.extraDataCollectionFields||[]).filter(S=>S!=="name"&&S!=="email"&&!!S),[C,v]=h.useState({}),[N,T]=Mt(async S=>{S.preventDefault();const F=Ns.safeParse({name:c,email:j});F.success&&await s({email:F.data.email,non_verified_name:F.data.name},Object.values(C).filter(Boolean).length?C:void 0)},[c,j,C]);return e.jsx("div",{style:{width:"100vw",maxWidth:"100vw",minHeight:i.screens.welcome.minHeight,height:"100vh",maxHeight:"100vh",overflowY:"auto"},children:e.jsxs("div",{ref:d,className:p("flex flex-col",o&&"h-full","bg-[radial-gradient(ellipse_at_top_left,hsl(var(--opencx-primary)),transparent),radial-gradient(ellipse_at_top_right,hsl(var(--opencx-primary)),transparent)]"),children:[e.jsxs("div",{className:p("flex-1 flex flex-col px-4 py-12 text-start space-y-4 relative z-10","text-primary-foreground"),children:[o&&e.jsx(f,{className:"absolute top-6 end-6",children:e.jsx(k,{size:"selfless",onClick:()=>r(!1),children:e.jsx(m.XIcon,{className:"size-4"})})}),e.jsx("div",{className:"flex items-center justify-between w-full mb-2",children:(E=n.assets)!=null&&E.organizationLogo?e.jsx("img",{src:(A=n.assets)==null?void 0:A.organizationLogo,alt:"Company Logo",className:"h-8 w-auto object-contain"}):e.jsx("h2",{className:"font-bold text-sm",children:t.name})}),e.jsxs("div",{className:"space-y-2",children:[e.jsx("h1",{className:"text-[1.75rem] font-semibold tracking-tight leading-none",children:((D=(W=n.textContent)==null?void 0:W.welcomeScreen)==null?void 0:D.title)||a("welcome_screen_title")}),e.jsx("p",{className:"text-sm",children:((z=(b=n.textContent)==null?void 0:b.welcomeScreen)==null?void 0:z.description)||a("welcome_screen_description")})]})]}),e.jsxs("div",{className:p("z-10 m-2 px-2 pt-2 bp-0 space-y-2","bg-[white]","border shadow","rounded-3xl"),children:[e.jsxs("form",{onSubmit:T,className:"space-y-2",children:[e.jsx(Q,{value:c,onChange:S=>u(S.target.value),required:!0,placeholder:a("your_name_placeholder"),name:"name"}),e.jsx(Q,{required:!0,value:j,onChange:S=>x(S.target.value),type:"email",placeholder:a("your_email_placeholder"),name:"email"}),g.map(S=>e.jsx(Q,{value:C[S],onChange:F=>v(G=>({...G,[S]:F.target.value})),placeholder:`${S} (${a("optional")})`},S)),e.jsxs(k,{disabled:N.loading,className:"w-full",size:"lg",children:[N.loading?a("start_chat_button_loading"):a("start_chat_button"),e.jsx(m.SendHorizontal,{className:"size-4 rtl:-scale-100"})]})]}),e.jsx(vt,{})]})]})})}function bt(){const{routerState:{screen:t}}=l.useWidgetRouter();return e.jsx("div",{className:"relative bg-background size-full",children:e.jsx(y.AnimatePresence,{mode:"wait",children:(()=>{switch(t){case"welcome":return e.jsx(f,{fadeIn:"right",className:"size-full",snapExit:!0,children:e.jsx(_s,{})},t);case"sessions":return e.jsx(f,{fadeIn:"right",className:"size-full",snapExit:!0,children:e.jsx(zs,{})},t);case"chat":return e.jsx(f,{fadeIn:"right",className:"size-full",snapExit:!0,children:e.jsx(bs,{})},t);default:return I.isExhaustive(t,bt.name),null}})()})})}const Is="4.0.20",Ts=`<!DOCTYPE html>
+      )`)};return{theme:u,computed:j,cssVars:Xt({palette:u.palette,primary:u.primaryColor})}}function Xt({palette:t,primary:r}){const s=ht(t),o=Ye(r).toHsl(),n=Ye(r).isLight()?s[950]:s[50];return{"--opencx-primary":`${o.h} ${o.s*100}% ${o.l*100}%`,"--opencx-primary-foreground":n,"--opencx-background":s[100],"--opencx-foreground":s[950],"--opencx-destructive":"0 72.2% 50.6%","--opencx-destructive-foreground":s[50],"--opencx-accent":s[200],"--opencx-accent-foreground":"var(--opencx-foreground)","--opencx-secondary":s[200],"--opencx-secondary-foreground":"var(--opencx-foreground)","--opencx-muted":s[200],"--opencx-muted-foreground":s[500],"--opencx-input":s[300],"--opencx-border":s[300],"--opencx-ring":"var(--opencx-foreground)"}}function ht(t){const r={50:"0 0% 98%",100:"0 0% 96.1%",200:"0 0% 89.8%",300:"0 0% 83.1%",400:"0 0% 63.9%",500:"0 0% 45.1%",600:"0 0% 32.2%",700:"0 0% 25.1%",800:"0 0% 14.9%",900:"0 0% 9%",950:"0 0% 3.9%"},s={50:"60 9.1% 97.8%",100:"60 4.8% 95.9%",200:"20 5.9% 90%",300:"24 5.7% 82.9%",400:"24 5.4% 63.9%",500:"25 5.3% 44.7%",600:"33.3 5.5% 32.4%",700:"30 6.3% 25.1%",800:"12 6.5% 15.1%",900:"24 9.8% 10%",950:"20 14.3% 4.1%"},o={50:"0 0% 98%",100:"240 4.8% 95.9%",200:"240 5.9% 90%",300:"240 4.9% 83.9%",400:"240 5% 64.9%",500:"240 3.8% 46.1%",600:"240 5.2% 33.9%",700:"240 5.3% 26.1%",800:"240 3.7% 15.9%",900:"240 5.9% 10%",950:"240 10% 3.9%"},n={50:"210 40% 98%",100:"210 40% 96.1%",200:"214.3 31.8% 91.4%",300:"212.7 26.8% 83.9%",400:"215 20.2% 65.1%",500:"215.4 16.3% 46.9%",600:"215.3 19.3% 34.5%",700:"215.3 25% 26.7%",800:"217.2 32.6% 17.5%",900:"222.2 47.4% 11.2%",950:"222.2 84% 4.9%"};switch(t){case"neutral":return r;case"stone":return s;case"zinc":return o;case"slate":return n;default:return I.isExhaustive(t,ht.name),r}}function mt(){const{contentIframeRef:t}=l.useWidget(),{inline:r}=l.useConfig();return{setWidth:s=>{var o;(o=t==null?void 0:t.current)==null||o.style.setProperty("--opencx-widget-width",r?"100%":s)},setHeight:s=>{var o;(o=t==null?void 0:t.current)==null||o.style.setProperty("--opencx-widget-height",r?"100%":s)}}}function pe({width:t,height:r}){const{isSmallScreen:s}=R(),{setWidth:o,setHeight:n}=mt();h.useEffect(()=>{t&&o(t),r&&n(r)},[s,r,t,o,n])}const Ue=m.CircleDashedIcon;function U({name:t,className:r}){const s=(()=>{switch(t){case"Check":return m.CheckIcon;case"CheckCheck":return m.CheckCheckIcon;case"CircleCheck":return m.CircleCheckIcon;case"CircleCheckBig":return m.CircleCheckBigIcon;case"CircleX":return m.CircleXIcon;case"Expand":return m.ExpandIcon;case"Maximize":return m.MaximizeIcon;case"Maximize2":return m.Maximize2Icon;case"Minimize":return m.MinimizeIcon;case"Minimize2":return m.Minimize2Icon;case"Shrink":return m.ShrinkIcon;case"SquareCheck":return m.SquareCheckIcon;case"SquareCheckBig":return m.SquareCheckBigIcon;case"SquareX":return m.SquareXIcon;case"X":return m.XIcon;case void 0:return Ue;default:return I.isExhaustive(t,U.name),Ue}})();return e.jsx(s,{className:p("size-4",r)})}function he(){const{widgetCtx:{org:t}}=l.useWidget(),{routerState:{screen:r}}=l.useWidgetRouter(),{textContent:s}=l.useConfig();return(()=>{var n,i;switch(r){case"chat":return(n=s==null?void 0:s.chatScreen)==null?void 0:n.headerTitle;case"sessions":return(i=s==null?void 0:s.sessionsScreen)==null?void 0:i.headerTitle;case"welcome":return;default:I.isExhaustive(r,he.name);return}})()??t.name??"Chat"}function Ut(t){switch(t){case"chat":return w("chat/header");case"sessions":return w("sessions/header");case"welcome":return;default:I.isExhaustive(t,he.name);return}}function Vt(){const{router:t}=l.useConfig(),{routerState:{screen:r},toSessionsScreen:s}=l.useWidgetRouter();return r!=="chat"||t!=null&&t.chatScreenOnly?null:e.jsx(k,{variant:"ghost",size:"fit",className:"rounded-full",onClick:s,children:e.jsx(m.ChevronLeftIcon,{className:"size-4 rtl:-scale-100"})})}function Gt({button:t}){const{setIsOpen:r}=l.useWidgetTrigger(),{isSmallScreen:s}=R();if(s&&t.hideOnSmallScreen||!s&&t.hideOnLargeScreen)return null;const o=()=>{if(t.handleClick)return t.handleClick();r(!1)};return e.jsx(k,{variant:"ghost",size:"fit",className:"rounded-full",onClick:o,children:e.jsx(U,{name:t.icon})})}function ne({button:t}){const[r,s]=h.useState(!1),{routerState:{screen:o}}=l.useWidgetRouter(),{isSmallScreen:n}=R(),{theme:i}=q(),{setWidth:a,setHeight:d}=mt();if(o!=="chat"&&o!=="sessions")return null;const c=(()=>{switch(o){case"chat":return i.screens.chat.height;case"sessions":return i.screens.sessions.height;default:return I.isExhaustive(o,ne.name),i.screens.chat.height}})(),u=(()=>{switch(o){case"chat":return i.screens.chat.width;case"sessions":return i.screens.sessions.width;default:return I.isExhaustive(o,ne.name),i.screens.chat.width}})(),j=()=>{s(x=>{const g=!x;return d(g?"100vh":c),a(g?`max(40vw, ${u})`:u),g})};return n&&t.hideOnSmallScreen||!n&&t.hideOnLargeScreen?null:e.jsx(k,{variant:"ghost",size:"fit",className:"rounded-full",onClick:j,children:e.jsx(U,{name:t.icon||(r?t.shrinkIcon:t.expandIcon)})})}function ut({button:t}){var N,T;const{close:r}=ee(),{widgetCtx:s}=l.useWidget(),{setIsOpen:o}=l.useWidgetTrigger(),{resolveSession:n,sessionState:i}=l.useSessions(),{isSmallScreen:a}=R(),d=!i.session,c=((N=i.session)==null?void 0:N.isOpened)===!1,u=t.onResolved||"stay-in-chat",j=t.behaviorBeforeSessionCreation||"disabled",x=t.behaviorIfSessionIsResolved||"disabled",g=!!(i.isResolvingSession||d&&j==="disabled"||c&&x==="disabled"),C=async()=>{const{success:_,error:M}=await n();if(r(),!_)return console.error(M);switch(u){case"stay-in-chat":return;case"close-widget":o(!1);break;case"reset-chat":s.resetChat();break;case"reset-chat-and-close-widget":o(!1),s.resetChat();break;default:I.isExhaustive(u,ut.name);break}},v=()=>{if(d)switch(j){case"disabled":return;case"close-widget":o(!1);break;default:I.isExhaustive(j,v.name)}if(c)switch(x){case"disabled":return;case"close-widget":o(!1);break;case"reset-chat":s.resetChat();break;case"reset-chat-and-close-widget":o(!1),setTimeout(()=>{s.resetChat()},200);break;default:I.isExhaustive(x,v.name)}};return a&&t.hideOnSmallScreen||!a&&t.hideOnLargeScreen?null:((T=t.confirmation)==null?void 0:T.type)==="modal"&&!c&&!d?e.jsx(at,{trigger:e.jsx(k,{variant:"ghost",size:"fit",className:"rounded-full",disabled:g,children:e.jsx(U,{name:t.icon})}),children:e.jsxs(tt,{children:[e.jsx(st,{children:e.jsx(nt,{children:t.confirmation.title||"Close conversation"})}),e.jsx(rt,{children:e.jsx(it,{children:t.confirmation.description||"Are you sure you want to close this conversation?"})}),e.jsxs(ot,{children:[e.jsx(k,{variant:"secondary",onClick:r,disabled:i.isResolvingSession,children:t.confirmation.cancelButtonText||"No"}),e.jsx(k,{variant:"destructive",onClick:C,disabled:i.isResolvingSession,children:t.confirmation.confirmButtonText||"Yes"})]})]})}):e.jsx(k,{variant:"ghost",size:"fit",className:"rounded-full",onClick:c||d?v:C,disabled:g,children:e.jsx(U,{name:t.icon})})}function ie({button:t}){switch(t.functionality){case"close-widget":return e.jsx(Gt,{button:t});case"expand-shrink":return e.jsx(ne,{button:t});case"resolve-session":return e.jsx(ut,{button:t});default:return I.isExhaustive(t,ie.name),null}}const Kt={functionality:"close-widget",hideOnLargeScreen:!0,icon:"X"};function Qt(){const{routerState:{screen:t}}=l.useWidgetRouter(),{headerButtons:r}=l.useConfig(),s=t==="chat"?r==null?void 0:r.chatScreen:t==="sessions"?r==null?void 0:r.sessionsScreen:[];return!s||s.length===0?e.jsx(ie,{button:Kt}):e.jsx(e.Fragment,{children:s.map(o=>e.jsx(ie,{button:o},`${o.functionality}-${o.icon}`))})}function gt(){const{routerState:{screen:t}}=l.useWidgetRouter(),r=Ut(t),s=he();return e.jsx("header",{...r,className:"py-2 px-4 shrink-0",children:e.jsxs("div",{className:"flex items-center gap-2",children:[e.jsx(Vt,{}),e.jsx("div",{className:p("flex-1 h-8 flex items-center",t==="sessions"&&"ps-2"),children:e.jsx("h2",{className:"font-semibold",children:s})}),e.jsx(Qt,{})]})})}function wt({className:t}){return e.jsx(m.LoaderIcon,{className:p("size-4 animate-spin",t)})}function Zt(){const{messagesState:{isInitialFetchLoading:t}}=l.useMessages(),{isSmallScreen:r}=R(),{activeMode:s,Component:o}=l.useModes();return{isCanvasOpen:!t&&!r&&!!s&&!!o}}function Jt(){const{activeMode:t,Component:r}=l.useModes(),{sendMessage:s}=l.useMessages(),{createStateCheckpoint:o}=l.useSessions(),[n,i]=h.useState(!1),a=async d=>{try{i(!0),await s(d)}catch(c){console.error(c)}finally{i(!1)}};return!t||!r?null:e.jsx(r,{react:h,mode:t,createStateCheckpoint:o,sendMessage:a,isSendingMessage:n})}const P=h.forwardRef((t,r)=>{var s,o,n;return e.jsx(f,{...t,ref:r,className:p("overflow-hidden",t.className),overrides:{initial:{height:0,opacity:0,...(s=t.overrides)==null?void 0:s.initial},animate:{height:"auto",opacity:1,...(o=t.overrides)==null?void 0:o.animate},exit:{height:0,opacity:0,...(n=t.overrides)==null?void 0:n.exit}}})});P.displayName="MotionDiv__VerticalReveal";const es=[{label:"Terrible",value:1,emoji:"😡"},{label:"Poor",value:2,emoji:"😞"},{label:"Okay",value:3,emoji:"😐"},{label:"Good",value:4,emoji:"😊"},{label:"Great",value:5,emoji:"😍"}];function ts(){const{isSmallScreen:t}=R(),{submitCsat:r,isCsatRequested:s,isCsatSubmitted:o,submittedScore:n,submittedFeedback:i}=l.useCsat(),[a,d]=h.useState(null),[c,u]=h.useState(null),j=g=>{d(C=>C===g?null:g)},x=()=>{a&&r({score:a,feedback:c||void 0})};return!s&&!o?null:e.jsxs("div",{className:"w-1/2 min-w-80 max-w-96 mx-auto overflow-hidden",children:[e.jsx(y.AnimatePresence,{mode:"wait",children:s&&!a?e.jsx(P,{children:e.jsx("p",{className:"text-sm text-muted-foreground text-center pt-2",children:"How was your conversation?"})},"csat-requested-title"):o?e.jsx(P,{children:e.jsx("p",{className:"text-sm text-muted-foreground text-center pt-2",children:"You rated the conversation as"})},"csat-submitted-title"):null}),e.jsx("div",{className:p("flex gap-4 justify-between pt-2 px-2 pb-2","transition-all",o&&"gap-0 justify-center"),children:es.map(g=>e.jsx(k,{variant:g.value===a?"secondary":"ghost",size:"selfless",className:p("transition-all overflow-hidden","text-2xl size-8 rounded-full","opacity-35","hover:opacity-100",!a&&"opacity-100",g.value===a&&"opacity-100",o&&g.value!==n&&"opacity-0 size-0",o&&g.value===n&&"opacity-100 size-fit text-4xl"),onClick:s?()=>j(g.value):void 0,children:g.emoji},g.value))}),e.jsx(y.AnimatePresence,{mode:"wait",children:(a||n)&&e.jsx(P,{children:e.jsxs("div",{className:"pb-2 px-2 flex items-end",children:[e.jsx("textarea",{rows:3,className:p("transition-all","max-h-40 [field-sizing:content]","w-full resize-none","bg-transparent outline-none","placeholder:text-muted-foreground",t?"text-[16px]":"text-sm",o&&"text-center"),value:o?i||"":c||"",onChange:s?g=>u(g.target.value):void 0,readOnly:o,placeholder:s?"Tell us more... (optional)":void 0}),e.jsx(k,{size:"fit",onClick:x,disabled:!a,className:p("transition-all overflow-hidden","rounded-full size-8 flex items-center justify-center p-0",o&&"opacity-0 size-0"),children:e.jsx(m.ArrowUpIcon,{className:"size-4"})})]})},"feedback-box")}),e.jsx("div",{className:p("h-0 transition-[height]",o&&"h-4")})]})}function $(){const{dir:t}=l.useDocumentDir(),r=l.useConfig();return h.useMemo(()=>{const s=I.isSupportedLanguage(r.language)?r.language:"en";return{t:o=>I.getTranslation(o,s,r.translationOverrides),language:s,dir:s==="ar"?"rtl":"ltr",hostDocumentDir:t}},[r.language,t])}function me({suggestion:t,className:r,...s}){const{sendMessage:o}=l.useMessages(),n=()=>{const i=t.trim();i&&o({content:i})};return e.jsx(k,{...w("chat/suggested_reply_btn"),size:"sm",className:p("rounded-xl w-fit",r),...s,onClick:n,children:t})}function ss(){const{t}=$(),r=[t("i_need_more_help"),t("this_was_helpful")];return e.jsx("div",{...w("chat/might_solve_user_issue_suggested_replies_container"),className:"flex items-center gap-2 p-2 pb-0 flex-wrap",children:r.map(s=>e.jsx(me,{suggestion:s,className:"flex-1"},s))})}function Ve(){const{sessionState:t}=l.useSessions(),{chatFooterItems:r}=l.useConfig(),s=!!t.session&&!t.session.isOpened,o=!s;return e.jsx(y.AnimatePresence,{mode:"wait",children:r==null?void 0:r.map((n,i)=>n.showWhenSessionIsOpen===!1&&o||n.showWhenSessionIsResolved===!1&&s?null:e.jsx(P,{children:e.jsx("div",{className:"pb-2 text-center text-xs",children:e.jsx(ae,{children:n.message})})},`${n.message}-${i}`))})}function rs({file:{status:t,file:r,error:s},onCancel:o}){const[n,i]=h.useState(null);h.useEffect(()=>{if(!r.type.startsWith("image/"))return;const c=new FileReader;return c.onload=()=>i(c.result),c.onerror=()=>console.error("Error reading file"),c.readAsDataURL(r),()=>c.abort()},[r]);const a=()=>{switch(t){case"uploading":return e.jsx(m.Loader2,{className:"size-4 animate-spin"});case"error":return e.jsx(m.AlertCircle,{className:"size-4 text-destructive"});default:return null}},d=()=>{const c=r.type.split("/")[0];return c==="image"&&n?e.jsx("img",{src:typeof n=="string"?n:"",className:"object-cover bg-secondary size-full",alt:r.name}):c==="audio"?e.jsx(m.FileAudio2Icon,{}):c==="video"?e.jsx(m.FileVideo2Icon,{}):e.jsx(m.FileIcon,{})};return e.jsx(X,{side:"bottom",content:t==="error"?e.jsxs("span",{className:"text-destructive",children:["Failed to upload: ",s]}):r.name,children:e.jsxs("div",{className:p(t==="uploading"&&"opacity-50","group","size-12 border rounded-2xl overflow-hidden relative","flex items-center justify-center shrink-0"),children:[e.jsx("div",{className:"absolute inset-0 flex items-center justify-center",children:a()}),e.jsx("button",{type:"button",className:p("absolute bg-black/50 inset-0 size-full z-10 opacity-0","flex items-center justify-center","opacity-0 group-hover:opacity-100 transition"),onClick:o,children:e.jsx(m.XIcon,{className:"size-4 text-primary-foreground"})}),e.jsx(d,{})]})})}function os(){var D;const{isSmallScreen:t}=R(),r=h.useRef(null),{sendMessage:s}=l.useMessages(),{sessionState:o}=l.useSessions(),{t:n}=$(),[i,a]=h.useState(""),{allFiles:d,emptyTheFiles:c,handleCancelUpload:u,appendFiles:j,isUploading:x,successFiles:g}=l.useUploadFiles(),C=!!((D=o.session)!=null&&D.isHandedOff),{isAwaitingBotReply:v}=l.useIsAwaitingBotReply(),N=b=>{j(b)},T=!i.trim()&&g.length===0,_=async()=>{if(v||T)return;x&&console.info("please wait for the file(s) to upload");const b=i.trim();s({content:b,attachments:g.flatMap(z=>z.fileUrl?[{url:z.fileUrl,type:z.file.type,name:z.file.name,id:z.id,size:z.file.size}]:[])}),a(""),c()},{getRootProps:M,getInputProps:E,open:A}=Tt.useDropzone({onDrop:N,noClick:!0,onDropRejected(){console.error("unsupported file type, or the file is too large")},maxSize:5*1024*1024,accept:C?{"text/*":[".txt"],"image/*":[".png",".jpg",".jpeg",".gif"],"application/pdf":[".pdf"]}:{"image/png":[".png"],"image/jpeg":[".jpg",".jpeg"],"image/gif":[".gif"],"image/webp":[".webp"]}}),W=b=>{const z=b.clipboardData;z&&z.files.length>0&&N(Array.from(z.files))};return e.jsxs("div",{...w("chat/input_box/root"),className:"p-2 relative space-y-1",...M(),children:[e.jsx("input",{...E()}),e.jsxs("div",{...w("chat/input_box/inner_root"),className:p("transition-all","bg-white","relative rounded-3xl flex flex-col gap-2 p-2","hover:border-primary focus-within:border-primary"),children:[e.jsxs("div",{...w("chat/input_box/textarea_and_attachments_container"),className:"flex flex-col gap-2",children:[d.length>0&&e.jsx("div",{...w("chat/input_box/attachments_container"),className:"flex items-center gap-1",children:e.jsx(y.AnimatePresence,{mode:"popLayout",children:d.map(b=>e.jsx(f,{snapExit:!0,children:e.jsx(rs,{onCancel:()=>u(b.id),file:b})},b.id))})}),e.jsx("textarea",{...w("chat/input_box/textarea"),onPaste:W,ref:r,id:"chat-input",value:i,rows:3,className:p("max-h-16 [field-sizing:content]","w-full resize-none px-2",d.length===0&&"pt-1","bg-transparent outline-none","placeholder:text-muted-foreground",t?"text-[16px]":"text-sm"),onChange:b=>a(b.target.value),onKeyDown:async b=>{b.key==="Enter"&&!b.shiftKey&&(b.preventDefault(),_())},placeholder:n("write_a_message_placeholder")})]}),e.jsxs("div",{className:"gap-2 flex justify-between",children:[e.jsx(X,{side:"top",align:"start",content:"attach files, (maximum size 5mb)",children:e.jsx(k,{onClick:A,size:"fit",variant:"ghost",className:p("rounded-full size-8 flex items-center justify-center p-0 overflow-hidden"),children:e.jsx(y.AnimatePresence,{mode:"wait",children:C?e.jsx(f,{children:e.jsx(m.PaperclipIcon,{className:"size-4"})},"paper-clip"):e.jsx(f,{children:e.jsx(m.ImageIcon,{className:"size-4"})},"image-icon")})})}),e.jsx(X,{content:"send message",side:"top",align:"end",children:e.jsx(k,{size:"fit",onClick:_,disabled:v||x||T,className:"rounded-full size-8 flex items-center justify-center p-0",children:e.jsx(y.AnimatePresence,{mode:"wait",children:v||x?e.jsx(f,{snapExit:!0,children:e.jsx(m.CircleDashed,{className:"size-4 animate-spin animate-iteration-infinite"})},"loading"):e.jsx(f,{snapExit:!0,children:e.jsx(m.ArrowUpIcon,{className:"size-4"})},"send")})})})]})]})]})}function Ge(){const{widgetCtx:t}=l.useWidget(),{router:r}=l.useConfig(),{canCreateNewSession:s}=l.useSessions(),{toSessionsScreen:o}=l.useWidgetRouter(),{t:n}=$();return e.jsx(e.Fragment,{children:s||r!=null&&r.chatScreenOnly?e.jsx(k,{onClick:t.resetChat,className:"rounded-2xl w-full",children:n("new_conversation")}):e.jsx(k,{onClick:o,className:"rounded-2xl w-full",children:n("back_to_conversations")})})}function ns(){const{t}=$(),{isCsatRequested:r,isCsatSubmitted:s}=l.useCsat();return e.jsx("div",{className:"p-2",children:e.jsx("div",{className:"p-2 bg-muted rounded-3xl",children:e.jsx(y.AnimatePresence,{mode:"wait",children:r||s?e.jsxs(P,{children:[e.jsx(ts,{}),e.jsx(y.AnimatePresence,{mode:"wait",children:s&&e.jsx(P,{children:e.jsx(Ge,{})},"new-conv-or-back-to-convs-button")})]},"csat"):e.jsxs(P,{children:[e.jsxs("div",{className:"ps-2 flex items-center gap-1 pb-2",children:[e.jsx(m.CircleCheckIcon,{className:"size-4 text-emerald-600"}),e.jsx("h2",{className:"text-sm font-medium",children:t("your_issue_has_been_resolved")})]}),e.jsx(Ge,{})]},"session-closed")})})})}function is(){var a;const{initialQuestions:t,initialQuestionsPosition:r,thisWasHelpfulOrNot:s}=l.useConfig(),{sessionState:o}=l.useSessions(),{messagesState:n}=l.useMessages(),i=n.messages.length===0;return e.jsx("footer",{children:e.jsx(y.AnimatePresence,{mode:"wait",children:o.session&&!((a=o.session)!=null&&a.isOpened)?e.jsxs(P,{children:[e.jsx(ns,{}),e.jsx(Ve,{})]},"session-closed"):e.jsxs(P,{children:[n.lastAIResMightSolveUserIssue&&(s==null?void 0:s.enabled)!==!1&&e.jsx(ss,{}),i&&t&&r!=="below-initial-messages"&&e.jsx("div",{className:"flex items-center flex-row justify-end gap-2 flex-wrap px-2",children:t==null?void 0:t.map((d,c)=>e.jsx(me,{suggestion:d},`${d}-${c}`))}),e.jsx(os,{}),e.jsx(Ve,{})]},"chat-input")})})}function as({isFirstInGroup:t,isLastInGroup:r,isAloneInGroup:s,...o}){const{componentStore:n}=l.useWidget();if(o.type!=="AGENT"&&o.type!=="AI")return null;if(o.data.action){const a=n.getComponent(o.data.action.name);if(a)return e.jsx(a,{...o,id:o.id,isFirstInGroup:t,isLastInGroup:r,isAloneInGroup:s})}const i=n.getComponent(o.component);return i?e.jsx(i,{...o,id:o.id,isFirstInGroup:t,isLastInGroup:r,isAloneInGroup:s}):e.jsx(re,{...o,isFirstInGroup:t,isLastInGroup:r,isAloneInGroup:s})}function ft({messages:t,className:r,containerClassName:s}){var a,d;const{timestamps:o}=l.useConfig();if(!((a=o==null?void 0:o.perMessageGroup)!=null&&a.enabled))return null;const n=(d=t[t.length-1])==null?void 0:d.timestamp;if(!n)return null;const i=(()=>{try{return new Date(n).toLocaleTimeString([],{hour:"2-digit",minute:"2-digit",hour12:!0})}catch(c){return console.error(c),null}})();return i?e.jsx("div",{className:s,children:e.jsx("span",{className:p("text-xs text-muted-foreground",r),children:i})}):null}function ue({messages:t,agent:r,suggestedReplies:s}){return e.jsxs("div",{...w("chat/agent_msg_group/root"),className:p("flex items-end gap-2"),children:[e.jsx(X,{content:r==null?void 0:r.name,side:"right",align:"end",children:e.jsx(oe,{...w("chat/agent_msg_group/root/avatar"),agent:r,className:"hidden"})}),e.jsxs("div",{className:p("flex-1 flex flex-col gap-1"),children:[e.jsxs("div",{...w("chat/agent_msg_group/avatar_and_msgs/root"),className:p("flex items-end gap-2"),children:[e.jsx(X,{content:r==null?void 0:r.name,side:"right",align:"end",children:e.jsx(oe,{...w("chat/agent_msg_group/avatar_and_msgs/avatar"),agent:r})}),e.jsxs("div",{...w("chat/agent_msg_group/avatar_and_msgs/msgs"),className:p("flex-1 flex flex-col gap-1"),children:[t.map((o,n,i)=>e.jsx(as,{isFirstInGroup:n===0,isLastInGroup:n===i.length-1,isAloneInGroup:i.length===1,...o},o.id)),e.jsx(ft,{messages:t})]})]}),s&&s.length>0&&e.jsx("div",{...w("chat/agent_msg_group/suggestions"),className:p("flex flex-col gap-1 ps-8"),children:s==null?void 0:s.map((o,n)=>e.jsx(me,{suggestion:o},`${o}-${n}`))})]})]})}function xt(){const{widgetCtx:{org:t}}=l.useWidget(),{sessionState:{session:r}}=l.useSessions(),s=l.useConfig(),{messagesState:{messages:o}}=l.useMessages();return{props:{react:h,org:t,session:r,config:s,messages:o}}}function ls(){var s,o;const{props:t}=xt();if((s=t.session)!=null&&s.isOpened||!t.session)return null;const r=(o=t.config.specialComponents)==null?void 0:o.onSessionResolved;return r?e.jsx(r,{...t}):null}function cs({message:t,isFirstInGroup:r,isLastInGroup:s,isAloneInGroup:o}){var n;return e.jsxs("div",{...w("chat/user_msg/root"),className:"w-5/6 flex flex-col items-end gap-1",children:[t.attachments&&t.attachments.length>0&&e.jsx("div",{className:"w-full flex gap-1 flex-wrap justify-end",children:(n=t.attachments)==null?void 0:n.map(i=>e.jsx(lt,{attachment:i},i.id))}),t.content.length>0&&e.jsx("div",{...w("chat/user_msg/msg"),"data-first":r,"data-last":s,"data-alone":o,className:p("transition-all","w-fit py-3 px-4 rounded-3xl text-sm","bg-primary text-primary-foreground","break-words [word-break:break-word]","whitespace-pre-wrap",r&&!o&&"rounded-br-md",s&&!o&&"rounded-tr-md",!r&&!s&&!o&&"rounded-r-md"),children:t.content})]})}function ds({messages:t}){return e.jsxs("div",{...w("chat/user_msg_group/root"),className:p("group","flex flex-col gap-1 justify-end items-end"),children:[t.map((r,s,o)=>e.jsx(cs,{message:r,isFirstInGroup:s===0,isLastInGroup:s===o.length-1,isAloneInGroup:o.length===1},r.id)),e.jsx(ft,{messages:t,containerClassName:"ms-auto"})]})}function ps(t){const r=[];let s=null;return t.forEach(o=>{var n,i,a,d,c,u;(!s||((n=s[0])==null?void 0:n.type)!==o.type)&&(s=[],r.push(s)),((i=s[0])==null?void 0:i.type)==="AGENT"&&o.type==="AGENT"&&(((a=o.agent)==null?void 0:a.id)!==((d=s[0].agent)==null?void 0:d.id)||((c=o.agent)==null?void 0:c.name)!==((u=s[0].agent)==null?void 0:u.name))&&(s=[],r.push(s)),s.push(o)}),r}function hs(t){var r;return((r=t==null?void 0:t[0])==null?void 0:r.type)==="USER"}function ms(t){var r;return((r=t==null?void 0:t[0])==null?void 0:r.type)==="AI"}function us(t){var r;return((r=t==null?void 0:t[0])==null?void 0:r.type)==="AGENT"}function gs(){const{messagesState:{messages:t}}=l.useMessages(),{advancedInitialMessages:r=[],initialQuestionsPosition:s,initialQuestions:o,bot:n}=l.useConfig();return e.jsx(e.Fragment,{children:t.length===0&&r.length>0&&e.jsx(ue,{messages:r.map(({message:i},a)=>({component:"bot_message",data:{message:i},id:`${a}-${i}`,type:"AI",timestamp:null})),suggestedReplies:t.length===0&&s==="below-initial-messages"?o:void 0,agent:n?{...n,isAi:!0,id:null}:void 0})})}function ws(){const{messagesState:{messages:t}}=l.useMessages(),{chatBannerItems:r}=l.useConfig();return!(r!=null&&r.length)||t.length>0&&r.every(s=>!s.persistent)?null:e.jsx("div",{className:"w-full text-center text-xs",children:r.map(({message:s,persistent:o},n)=>t.length>0&&!o?null:e.jsx("div",{children:e.jsx(ae,{children:s})},`${s}-${n}`))})}function fs(){const{messagesState:{messages:t}}=l.useMessages(),r=l.useConfig(),{advancedInitialMessages:s=[],initialQuestions:o,initialQuestionsPosition:n}=r,i=(()=>{var a;return s.length?[]:t.length?[]:(a=r.initialMessages)!=null&&a.length?r.initialMessages:["Hello, how can I help you?"]})();return e.jsx(e.Fragment,{children:t.length===0&&i.length>0&&e.jsx(ue,{messages:i.map((a,d)=>({component:"bot_message",data:{message:a},id:`${d}-${a}`,type:"AI",timestamp:null})),suggestedReplies:n==="below-initial-messages"?o:void 0,agent:r.bot?{...r.bot,isAi:!0,id:null}:void 0})})}function xs(){var s;const{props:t}=xt(),r=(s=t.config.specialComponents)==null?void 0:s.chatBottomComponents;return r?e.jsx("div",{children:r.map(({key:o,component:n})=>e.jsx(n,{...t},o))}):null}function vs(){const{messagesState:{messages:t}}=l.useMessages(),{isAwaitingBotReply:r}=l.useIsAwaitingBotReply(),{componentStore:s}=l.useWidget(),o=l.useConfig(),n=h.useMemo(()=>ps(t),[t]),i=s.getComponent("loading"),a=h.useRef(null);function d(){setTimeout(()=>{const c=a.current;c&&(c.scrollTop=c.scrollHeight)},0)}return h.useEffect(()=>{d()},[t]),e.jsxs("div",{...w("chat/msgs/root"),ref:a,className:"max-h-full scroll-smooth relative flex-1 py-2 px-4 flex flex-col gap-2 overflow-auto",children:[e.jsx(ws,{}),e.jsx(gs,{}),e.jsx(fs,{}),n.map(c=>{var x,g,C;const u=(x=c==null?void 0:c[0])==null?void 0:x.type,j=(g=c[0])==null?void 0:g.id;if(!u||!j)return null;if(hs(c))return e.jsx(ds,{messages:c},j);if(ms(c)||us(c)){const v=(C=c[0])==null?void 0:C.agent;return e.jsx(ue,{messages:c,agent:v},j)}return null}),r&&i&&e.jsx(i,{agent:o.bot}),e.jsx(xs,{}),e.jsx(ls,{})]})}function bs(){const{messagesState:{isInitialFetchLoading:t}}=l.useMessages(),{sessionState:{session:r}}=l.useSessions(),{isCanvasOpen:s}=Zt(),{theme:o}=q();pe({width:s?o.screens.chat.withCanvas.width:o.screens.chat.width,height:s?o.screens.chat.withCanvas.height:o.screens.chat.height});const n=h.useRef((r==null?void 0:r.id)||"chat").current;return e.jsx("div",{...w("chat/root"),className:p("flex flex-col overflow-hidden"),style:{width:"100vw",maxWidth:"100vw",height:"100vh",maxHeight:"100vh"},children:e.jsxs("div",{className:"size-full justify-between flex flex-col",children:[e.jsx(gt,{}),e.jsx(y.AnimatePresence,{mode:"wait",children:t?e.jsx(f,{className:"flex flex-col items-center justify-center w-full flex-1",children:e.jsx(wt,{})},"loading"):e.jsxs(f,{className:"flex items-start h-full flex-1 overflow-auto",snapExit:!0,children:[e.jsxs("div",{...w("chat/main/root"),className:p("flex flex-col h-full overflow-auto transition-all",s?"w-2/5":"w-full"),style:{transitionTimingFunction:o.screens.chat.withCanvas.transitionTimingFunction,transitionDuration:o.screens.chat.withCanvas.transitionDuration},children:[e.jsx(vs,{}),e.jsx(is,{})]}),e.jsx("div",{...w("chat/canvas/root"),className:p("h-full overflow-auto transition-all",s?"w-3/5":"w-0"),style:{transitionTimingFunction:o.screens.chat.withCanvas.transitionTimingFunction,transitionDuration:o.screens.chat.withCanvas.transitionDuration},children:e.jsx(Jt,{})})]},n)})]})})}function ys({className:t,...r}){return e.jsx("div",{className:p("animate-pulse rounded-md bg-secondary",t),...r})}function js({className:t}){return e.jsx("svg",{width:"26",height:"32",viewBox:"0 0 26 32",fill:"none",xmlns:"http://www.w3.org/2000/svg",className:p("text-primary-foreground",t),children:e.jsx("path",{d:"M1.34103 25.6132H5.44245C5.74203 25.6228 6.02673 25.7462 6.23867 25.9582C6.45062 26.1703 6.5739 26.4551 6.58348 26.7548V30.8584C6.59305 31.1581 6.71634 31.443 6.92828 31.655C7.14023 31.8671 7.42492 31.9904 7.7245 32H18.2894C18.589 31.9904 18.8737 31.8671 19.0856 31.655C19.2976 31.443 19.4209 31.1581 19.4304 30.8584V26.7548C19.4401 26.4545 19.5638 26.1692 19.7765 25.957C19.9892 25.7449 20.2748 25.6219 20.5749 25.6132H24.659C24.9586 25.6036 25.2433 25.4803 25.4552 25.2682C25.6671 25.0562 25.7904 24.7713 25.8 24.4716V7.52839C25.7904 7.22865 25.6671 6.94381 25.4552 6.73176C25.2433 6.5197 24.9586 6.39635 24.659 6.38677H20.561C20.2603 6.37802 19.9742 6.25457 19.7614 6.04169C19.5487 5.82881 19.4253 5.54261 19.4165 5.24168V1.14161C19.4072 0.84419 19.2858 0.561291 19.0768 0.349589C18.8678 0.137887 18.5865 0.0130193 18.2894 0L7.7245 0C7.42492 0.00957792 7.14023 0.132929 6.92828 0.344983C6.71634 0.557036 6.59305 0.841878 6.58348 1.14161V5.24168C6.57477 5.54203 6.45187 5.82773 6.23983 6.04052C6.0278 6.25331 5.74262 6.37715 5.44245 6.38677H1.34103C1.04144 6.39635 0.756749 6.5197 0.544805 6.73176C0.332861 6.94381 0.209574 7.22865 0.200001 7.52839V24.4716C0.209574 24.7713 0.332861 25.0562 0.544805 25.2682C0.756749 25.4803 1.04144 25.6036 1.34103 25.6132ZM6.58348 24.4716V7.52839C6.59305 7.22865 6.71634 6.94381 6.92828 6.73176C7.14023 6.5197 7.42492 6.39635 7.7245 6.38677H18.2894C18.589 6.39635 18.8737 6.5197 19.0856 6.73176C19.2976 6.94381 19.4209 7.22865 19.4304 7.52839V24.4716C19.4209 24.7713 19.2976 25.0562 19.0856 25.2682C18.8737 25.4803 18.589 25.6036 18.2894 25.6132H7.7245C7.42492 25.6036 7.14023 25.4803 6.92828 25.2682C6.71634 25.0562 6.59305 24.7713 6.58348 24.4716Z",fill:"currentColor"})})}function vt({className:t}){const{token:r}=l.useConfig();return e.jsx("div",{className:p("flex items-center justify-center gap-2 p-2 pt-0",t),children:e.jsx(O,{children:e.jsxs("a",{href:`https://open.cx/?ref=${r}`,target:"_blank",rel:"noreferrer",className:p("text-[10px] flex items-center","text-muted-foreground/70 [&_svg]:text-muted-foreground/70","hover:text-primary [&_svg]:hover:text-primary"),children:[e.jsx("span",{children:"Powered by"}),e.jsx("span",{children:" "}),e.jsxs("span",{className:"flex items-center gap-[1px]",children:[e.jsx("span",{children:e.jsx(js,{className:"size-3 inline-block"})}),e.jsx("span",{className:"font-semibold",children:"open"})]})]})})})}function ks({children:t}){return e.jsx("p",{className:"ps-4 text-xs text-muted-foreground/75 uppercase font-semibold tracking-tight",children:t})}function Ke({session:t,className:r}){const{bot:s}=l.useConfig(),{toChatScreen:o}=l.useWidgetRouter(),n=t.assignee.kind==="human"?t.assignee.name||"Support Agent":(s==null?void 0:s.name)||"AI Support Agent",i=t.assignee.kind==="human"?t.assignee.avatarUrl||"":(s==null?void 0:s.avatar)||"";return e.jsxs(k,{variant:"ghost",size:"lg",className:p("rounded-full p-2 pe-4 flex text-start justify-between w-full whitespace-normal",r),onClick:()=>o(t.id),children:[e.jsxs("div",{className:"flex-1 flex gap-2 items-center",children:[e.jsx(y.AnimatePresence,{mode:"wait",children:e.jsx(f,{snapExit:!0,children:e.jsxs(le,{className:"size-10",children:[e.jsx(ce,{src:i,alt:"Agent Icon"}),e.jsx(de,{children:e.jsx(m.UserRoundIcon,{className:"size-4"})})]})})}),e.jsxs("div",{className:"flex-1",children:[e.jsx(y.AnimatePresence,{mode:"wait",children:e.jsx(f,{snapExit:!0,children:n},n)}),e.jsx(y.AnimatePresence,{mode:"wait",children:t.lastMessage?e.jsx(f,{snapExit:!0,children:e.jsx(ct,{remarkPlugins:[Qe],rehypePlugins:[Ze],className:"line-clamp-1 overflow-hidden text-ellipsis text-xs text-muted-foreground",children:t.lastMessage})},t.lastMessage||"content"):e.jsx(f,{className:"w-1/2",snapExit:!0,children:e.jsx(ys,{className:"h-4 w-full"})},"skeleton")})]})]}),e.jsx(m.ChevronRightIcon,{className:"size-4 text-muted-foreground shrink-0 rtl:-scale-100"})]})}function Cs(){const{t}=$(),{toChatScreen:r}=l.useWidgetRouter(),{sessionsState:{data:s,isInitialFetchLoading:o},openSessions:n,closedSessions:i,canCreateNewSession:a}=l.useSessions();return e.jsx("div",{className:"flex-1 flex flex-col overflow-scroll py-2 px-2",children:e.jsx(y.AnimatePresence,{mode:"wait",children:o?e.jsx(f,{className:"flex-1 flex items-center justify-center",children:e.jsx(wt,{})},"loading"):e.jsx(f,{className:"flex-1 flex flex-col gap-2 relative",children:s.length?e.jsxs(e.Fragment,{children:[e.jsxs(y.AnimatePresence,{children:[n.length>0&&e.jsx(f,{fadeIn:"up",delay:.2,className:"space-y-2",snapExit:!0,children:n.map(d=>e.jsx(Ke,{session:d},d.id))},"open-sessions"),i.length>0&&e.jsxs(f,{className:"space-y-2",delay:.2,snapExit:!0,children:[e.jsx(ks,{children:t("closed_conversations")}),i.map(d=>e.jsx(Ke,{session:d,className:"opacity-50 hover:opacity-100"},d.id))]},"closed-sessions")]}),a&&e.jsx("div",{className:"mt-auto w-full rounded-3xl sticky bottom-0 outline outline-8 outline-background bg-background",children:h.createElement(k,{...w("sessions/new_conversation_btn"),size:"lg",key:"new-session",className:"w-full",onClick:()=>r()},t("new_conversation"))})]}):e.jsxs("div",{className:"flex-1 flex flex-col gap-2 items-center",children:[e.jsx("div",{className:"flex-1 flex items-center justify-center",children:e.jsx("p",{className:"text-muted-foreground",children:t("no_conversations_yet")})}),h.createElement(k,{...w("sessions/new_conversation_btn"),size:"lg",key:"new-session",className:"w-full",onClick:()=>r()},t("new_conversation"))]})},"sessions")})})}function zs(){const{theme:t}=q();return pe({width:t.screens.sessions.width,height:t.screens.sessions.height}),e.jsx("div",{...w("sessions/root"),className:p("flex flex-col overflow-hidden bg-background"),style:{width:"100vw",maxWidth:"100vw",height:"100vh",maxHeight:"100vh"},children:e.jsxs("div",{className:"size-full flex flex-col",children:[e.jsx(gt,{}),e.jsx(Cs,{}),e.jsx(vt,{})]})})}const Q=L.forwardRef(({className:t,type:r,...s},o)=>{const{isSmallScreen:n}=R();return e.jsx(O,{ref:o,children:e.jsx("input",{type:r,className:p(n?"text-[16px]":"text-sm","flex w-full rounded-xl p-2 ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-primary-foreground placeholder:text-muted-foreground/75 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 transition","rounded-2xl px-4","border shadow-sm",t),...s})})});Q.displayName="Input";function Ss(){const{contentIframeRef:t}=l.useWidget(),{inline:r}=l.useConfig(),s=h.useRef(null);return h.useEffect(()=>{const o=t==null?void 0:t.current;if(o&&s.current){const n=s.current;let i;const a=new ResizeObserver(()=>{i=requestAnimationFrame(()=>{const d=n.offsetHeight;o.style.setProperty("--opencx-widget-height",r?"100%":`${d.toFixed(1)}px`)})});return a.observe(n),()=>{cancelAnimationFrame(i),a.unobserve(n)}}},[t,r]),{observedElementRef:s}}const Ns=se.z.object({name:se.z.string().min(2),email:se.z.string().email()});function _s(){var _,M,E,A,W,D,b,z;const{widgetCtx:{org:t}}=l.useWidget(),{setIsOpen:r}=l.useWidgetTrigger(),{createUnverifiedContact:s}=l.useContact(),{isSmallScreen:o}=R(),n=l.useConfig(),{theme:i}=q(),{t:a}=$(),{observedElementRef:d}=Ss();pe({height:void 0,width:i.screens.welcome.width});const[c,u]=h.useState(((_=n.prefillUserData)==null?void 0:_.name)||""),[j,x]=h.useState(((M=n.prefillUserData)==null?void 0:M.email)||""),g=(n.extraDataCollectionFields||[]).filter(S=>S!=="name"&&S!=="email"&&!!S),[C,v]=h.useState({}),[N,T]=Mt(async S=>{S.preventDefault();const F=Ns.safeParse({name:c,email:j});F.success&&await s({email:F.data.email,non_verified_name:F.data.name},Object.values(C).filter(Boolean).length?C:void 0)},[c,j,C]);return e.jsx("div",{style:{width:"100vw",maxWidth:"100vw",minHeight:i.screens.welcome.minHeight,height:"100vh",maxHeight:"100vh",overflowY:"auto"},children:e.jsxs("div",{ref:d,className:p("flex flex-col",o&&"h-full","bg-[radial-gradient(ellipse_at_top_left,hsl(var(--opencx-primary)),transparent),radial-gradient(ellipse_at_top_right,hsl(var(--opencx-primary)),transparent)]"),children:[e.jsxs("div",{className:p("flex-1 flex flex-col px-4 py-12 text-start space-y-4 relative z-10","text-primary-foreground"),children:[o&&e.jsx(f,{className:"absolute top-6 end-6",children:e.jsx(k,{size:"selfless",onClick:()=>r(!1),children:e.jsx(m.XIcon,{className:"size-4"})})}),e.jsx("div",{className:"flex items-center justify-between w-full mb-2",children:(E=n.assets)!=null&&E.organizationLogo?e.jsx("img",{src:(A=n.assets)==null?void 0:A.organizationLogo,alt:"Company Logo",className:"h-8 w-auto object-contain"}):e.jsx("h2",{className:"font-bold text-sm",children:t.name})}),e.jsxs("div",{className:"space-y-2",children:[e.jsx("h1",{className:"text-[1.75rem] font-semibold tracking-tight leading-none",children:((D=(W=n.textContent)==null?void 0:W.welcomeScreen)==null?void 0:D.title)||a("welcome_screen_title")}),e.jsx("p",{className:"text-sm",children:((z=(b=n.textContent)==null?void 0:b.welcomeScreen)==null?void 0:z.description)||a("welcome_screen_description")})]})]}),e.jsxs("div",{className:p("z-10 m-2 px-2 pt-2 bp-0 space-y-2","bg-[white]","border shadow","rounded-3xl"),children:[e.jsxs("form",{onSubmit:T,className:"space-y-2",children:[e.jsx(Q,{value:c,onChange:S=>u(S.target.value),required:!0,placeholder:a("your_name_placeholder"),name:"name"}),e.jsx(Q,{required:!0,value:j,onChange:S=>x(S.target.value),type:"email",placeholder:a("your_email_placeholder"),name:"email"}),g.map(S=>e.jsx(Q,{value:C[S],onChange:F=>v(G=>({...G,[S]:F.target.value})),placeholder:`${S} (${a("optional")})`},S)),e.jsxs(k,{disabled:N.loading,className:"w-full",size:"lg",children:[N.loading?a("start_chat_button_loading"):a("start_chat_button"),e.jsx(m.SendHorizontal,{className:"size-4 rtl:-scale-100"})]})]}),e.jsx(vt,{})]})]})})}function bt(){const{routerState:{screen:t}}=l.useWidgetRouter();return e.jsx("div",{className:"relative bg-background size-full",children:e.jsx(y.AnimatePresence,{mode:"wait",children:(()=>{switch(t){case"welcome":return e.jsx(f,{fadeIn:"right",className:"size-full",snapExit:!0,children:e.jsx(_s,{})},t);case"sessions":return e.jsx(f,{fadeIn:"right",className:"size-full",snapExit:!0,children:e.jsx(zs,{})},t);case"chat":return e.jsx(f,{fadeIn:"right",className:"size-full",snapExit:!0,children:e.jsx(bs,{})},t);default:return I.isExhaustive(t,bt.name),null}})()})})}const Is="4.0.22",Ts=`<!DOCTYPE html>
 <html>
 <head>
 <style>

package/dist/index.js

@@ -2491,7 +2491,7 @@ function Wt() {
     }
   })() }) });
 }
-const Do = "4.0.20", Ro = `<!DOCTYPE html>
+const Do = "4.0.22", Ro = `<!DOCTYPE html>
 <html>
 <head>
 <style>

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@opencx/widget-react",
   "private": false,
-  "version": "4.0.20",
+  "version": "4.0.22",
   "type": "module",
   "repository": {
     "type": "git",
@@ -37,8 +37,8 @@
     "tailwind-merge": "^2.4.0",
     "tinycolor2": "^1.6.0",
     "zod": "^3.23.8",
-    "@opencx/widget-core": "4.0.20",
-    "@opencx/widget-react-headless": "4.0.20"
+    "@opencx/widget-react-headless": "4.0.22",
+    "@opencx/widget-core": "4.0.22"
   },
   "peerDependencies": {
     "@types/react": ">=18 <20",