userflow.js-self-hosted 0.1.1016415 → 0.1.1016426
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/BuilderBar.js +1 -1
- package/ChecklistApp.js +1 -1
- package/ChecklistUI.js +1 -1
- package/EmbedApp.js +1 -1
- package/FlowApp.js +2 -2
- package/FlowChrome.js +2 -2
- package/LauncherApp.js +1 -1
- package/ResourceCenterAssistantChat.js +1 -1
- package/SmartFlowRecordingApp.js +2 -0
- package/builder-ui-frame.css +122 -0
- package/flow-condition-types.js +1 -1
- package/hash.txt +1 -1
- package/package.json +1 -1
- package/roots.js +1 -1
- package/stylesheets.js +1 -1
- package/ui.js +2 -2
- package/use-selector-element-monitoring.js +2 -2
- package/userflow.js +3 -3
- package/vendor.core-js.js +1 -1
- package/vendor.fortawesome.pro-light-svg-icons.js +1 -1
- package/vendor.uuid.js +1 -1
package/BuilderBar.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{R as e,r as t}from"./vendor.react.js";import{F as I}from"./Frame.js";import{S as v}from"./logomark.js";import{o as F}from"./vendor.obj-str.js";import{
|
|
1
|
+
import{R as e,r as t}from"./vendor.react.js";import{F as I}from"./Frame.js";import{S as v}from"./logomark.js";import{o as F}from"./vendor.obj-str.js";import{a as L,b as k}from"./vendor.fortawesome.pro-light-svg-icons.js";import{H as b}from"./userflow.js";import{a as B,D}from"./stylesheets.js";import{u as N}from"./use-window-resize.js";import"./vendor.core-js.js";(function(){try{var r=typeof window<"u"?window:typeof global<"u"?global:typeof self<"u"?self:{},n=new Error().stack;n&&(r._sentryDebugIds=r._sentryDebugIds||{},r._sentryDebugIds[n]="e686a895-8869-4a20-92c7-501b684a98a0",r._sentryDebugIdIdentifier="sentry-dbid-e686a895-8869-4a20-92c7-501b684a98a0")}catch{}})();const _=new URL("builder-ui-host.css",import.meta.url).href,H=new URL("builder-ui-frame.css",import.meta.url).href,p="builderBarPos",q=e.forwardRef(({onReadyChange:r,children:n,buttons:c},y)=>{const{loaded:h}=B(window,_),[E,S]=t.useState(!1),o=h&&E,u=t.useRef(!1);t.useEffect(()=>{o&&!u.current&&r&&(u.current=!0,r(!0))},[o,r]);const i=t.useRef(null),[s,g]=t.useState(null),[l,w]=t.useState(()=>b.getItem(p)==="top"?"top":"bottom"),R=t.useCallback(a=>{w(a),b.setItem(p,a)},[]),d=t.useRef(0),f=t.useCallback(()=>{const a=i.current;if(!a||!s||!o)return;const m=s.clientHeight;m!==d.current&&(d.current=m,a.style.setProperty("height",m+"px","important"))},[o,s]);return t.useLayoutEffect(()=>{f()}),N(f),t.useImperativeHandle(y,()=>({getFrame:()=>i.current,getRootEl:()=>s}),[s]),e.createElement(e.Fragment,null,e.createElement(I,{className:F({"userflowjs-builder-bar":!0,"userflowjs-builder-bar--top":l==="top"}),style:{visibility:o?void 0:"hidden",animation:o?void 0:"none"},elRef:i,stylesheet:H,onStylesheetsLoad:S,title:"Builder bar"},o&&e.createElement("div",{className:"root",ref:g},e.createElement("div",{className:"logomark"},e.createElement(v,null)),e.createElement("div",{className:"main"},n),e.createElement("div",{className:"buttons"},c,e.createElement("button",{key:l,className:"btn btn--square btn--plain-on-dark",onClick:()=>R(l==="top"?"bottom":"top")},e.createElement(D,{icon:l==="top"?L:k,size:20}))))))});export{q as B};
|
|
2
2
|
//# sourceMappingURL=BuilderBar.js.map
|
package/ChecklistApp.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{r as s,R as c}from"./vendor.react.js";import{
|
|
1
|
+
import{r as s,R as c}from"./vendor.react.js";import{N as b,L as R,q as F,m as B}from"./userflow.js";import{F as N,B as _}from"./FlowChrome.js";import{i as D,u as C}from"./client-context.js";import{f as P,w as j,C as U,S as A}from"./flow-host.styl.js";import{a as H,D as O,u as I}from"./stylesheets.js";import{F as Z}from"./Frame.js";import{o as z}from"./vendor.obj-str.js";import{z as W}from"./roots.js";import{o as X}from"./vendor.fortawesome.pro-regular-svg-icons.js";import"./vendor.core-js.js";import{u as M}from"./vendor.react-i18next.js";import{C as Y}from"./ChecklistUI.js";import"./vendor.object-assign.js";import"./vendor.phoenix.js";import"./vendor.uuid.js";import"./use-selector-element-monitoring.js";import"./flow-condition-types.js";import"./vendor.date-fns.js";import"./vendor.babel.runtime.js";import"./vendor.fortawesome.pro-solid-svg-icons.js";import"./use-window-resize.js";import"./logomark.js";import"./vendor.canvas-confetti.js";import"./vendor.i18next.js";import"./vendor.react-dom.js";import"./vendor.scheduler.js";(function(){try{var t=typeof window<"u"?window:typeof global<"u"?global:typeof self<"u"?self:{},e=new Error().stack;e&&(t._sentryDebugIds=t._sentryDebugIds||{},t._sentryDebugIds[e]="c23218c3-df54-4231-87ea-86b96087a8d4",t._sentryDebugIdIdentifier="sentry-dbid-c23218c3-df54-4231-87ea-86b96087a8d4")}catch{}})();const G=new URL("checklist-launcher-frame.css",import.meta.url).href,K=({position:t,theme:e,onClick:l,onVisibleChange:o,buttonRef:a,text:u,uncompletedCount:r})=>{const d=t||"absolute",{i18n:n}=M(),m=n.dir(),{loaded:i}=H(window,P,e),[h,k]=s.useState(!1),f=i&&h;s.useEffect(()=>{o&&o(f)},[o,f]);const w=s.useRef(null),L=s.useRef(0),[v,S]=s.useState(null);s.useLayoutEffect(()=>{const E=w.current;if(!E||!v)return;const y=v.clientWidth;y!==L.current&&(L.current=y,E.style.setProperty("width",W(y)+"px","important"),E.style.setProperty("height",e.checklistLauncherHeight+"px","important"))});const p=e.checklistLauncherPlacement,x=p===b.TOP_LEFT||p===b.TOP_RIGHT,g=p===b.TOP_LEFT||p===b.BOTTOM_LEFT,T={zIndex:d==="fixed"?e.checklistZIndex!=null?e.checklistZIndex:j(U):1,top:x?e.checklistLauncherY+"px":void 0,bottom:x?void 0:e.checklistLauncherY+"px",[m==="ltr"?"left":"right"]:g?e.checklistLauncherX+"px":void 0,[m==="ltr"?"right":"left"]:g?void 0:e.checklistLauncherX+"px",height:e.checklistLauncherHeight+"px",borderRadius:e.checklistLauncherBorderRadius+"px",position:f?void 0:"absolute",visibility:f?void 0:"hidden",animation:f?void 0:"none"};return c.createElement(Z,{elRef:w,testId:"checklist-launcher-app",className:z({"userflowjs-checklist-launcher":!0,[`userflowjs-checklist-launcher--position-${d}`]:!0}),style:T,stylesheet:G,theme:e,onStylesheetsLoad:k,title:"Checklist launcher"},c.createElement("button",{ref:a,className:"userflowjs-checklist-launcher-frame-root",onClick:l},c.createElement("div",{ref:S,className:"userflowjs-checklist-launcher-content"},c.createElement("div",{className:"userflowjs-checklist-launcher-text"},u||"Get Started"),c.createElement("div",{"data-testid":"checklist-launcher-uncompleted-count",className:"userflowjs-checklist-launcher-uncompleted-count"},r===0?c.createElement(O,{icon:X}):r,c.createElement("div",{className:"userflowjs-a11y-only"},"uncompleted tasks")))))},ge=({session:t,checklistExpanded:e})=>{const{version:l}=t,o=l.checklist,a=t.locale?t.locale.standardLocaleId:t.version.theme.languageId;s.useEffect(()=>{D.changeLanguage(a)},[a]);const[u,r]=s.useState(!1);return e?c.createElement(q,{session:t,initialAutoFocus:u,setInitialAutoFocus:r}):o.launcherEnabled?c.createElement(V,{session:t,initialAutoFocus:u,setInitialAutoFocus:r}):null},q=({session:t,initialAutoFocus:e,setInitialAutoFocus:l})=>{const o=C(),[a,u]=s.useState(null),{version:r}=t,d=r.checklist,n=I(r.theme),m=s.useMemo(()=>({...n,avatarType:R.NONE,bubblePlacement:n.checklistPlacement,bubbleX:n.checklistX,bubbleY:n.checklistY,bubbleWidth:n.checklistWidth}),[n]);return s.useEffect(()=>{const i=a?.ownerDocument.defaultView;if(!i)return;const h=k=>{k.key==="Escape"&&(l(!0),o.hideChecklist())};return i.addEventListener("keydown",h),()=>i.removeEventListener("keydown",h)},[a,l,o]),c.createElement(A,null,c.createElement(N,{company:t.flow.company,theme:m,position:"fixed",stepAppearance:F.BUBBLE,zIndex:n.checklistZIndex,autoHide3pEnabled:!0,backgroundImageUrl:d.backgroundAsset&&d.backgroundAsset.assetUrl,bubbleFrameRootRef:u},c.createElement("div",{role:"dialog","aria-label":"Checklist"},c.createElement(Y,{session:t,initialAutoFocus:e}),c.createElement(_,{draftMode:t.draftMode,minimize:i=>{l(i.detail===0),o.hideChecklist()}}))))},V=({session:t,initialAutoFocus:e,setInitialAutoFocus:l})=>{const o=C(),[a,u]=s.useState(!1),[r,d]=s.useState(null),{version:n}=t,m=n.checklist,i=I(n.theme);return s.useEffect(()=>{!a||!r||!e||r.focus()},[o,r,a,e]),c.createElement(K,{position:"fixed",theme:i,onClick:h=>{l(h.detail===0),o.showChecklist()},onVisibleChange:u,buttonRef:d,text:m.launcherText,uncompletedCount:B(t)})};export{ge as ChecklistApp,ge as default};
|
|
2
2
|
//# sourceMappingURL=ChecklistApp.js.map
|
package/ChecklistUI.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{R as e,r as l}from"./vendor.react.js";import{E as I,
|
|
1
|
+
import{R as e,r as l}from"./vendor.react.js";import{E as I,H as _}from"./userflow.js";import{u as v}from"./client-context.js";import"./vendor.core-js.js";import{u as T}from"./vendor.react-i18next.js";import{o as F}from"./vendor.obj-str.js";import{D as C}from"./stylesheets.js";import{c as P,d as L}from"./vendor.fortawesome.pro-solid-svg-icons.js";import{h as M,a as x,f as B,R as H}from"./use-selector-element-monitoring.js";import{g}from"./flow-condition-types.js";import{K as $,N as K}from"./vendor.fortawesome.pro-regular-svg-icons.js";(function(){try{var t=typeof window<"u"?window:typeof global<"u"?global:typeof self<"u"?self:{},s=new Error().stack;s&&(t._sentryDebugIds=t._sentryDebugIds||{},t._sentryDebugIds[s]="5c11cf44-a9d3-4e96-8472-c2dd1d22cfc0",t._sentryDebugIdIdentifier="sentry-dbid-5c11cf44-a9d3-4e96-8472-c2dd1d22cfc0")}catch{}})();const W=e.forwardRef(({elProps:t,onClick:s,onCheckmarkClick:n,completed:o,disabled:u,name:c,text:b,active:m,htmlAttributes:a,children:i},w)=>{const d=l.useRef(o);return e.createElement("button",{...t,ref:w,"data-testid":"bubble-task",tabIndex:s?0:-1,className:F({"userflowjs-bubble-task":!0,"userflowjs-bubble-task--completed":!!o,"userflowjs-bubble-task--just-completed":!d.current&&!!o,"userflowjs-bubble-task--disabled":!o&&!!u,"userflowjs-bubble-task--clickable":!!s,"userflowjs-bubble-task--active":!!m}),onClick:s,...a},e.createElement("div",{className:"userflowjs-bubble-task__checkmark",onClick:n},o&&e.createElement(C,{icon:P})),e.createElement("div",{className:"userflowjs-bubble-task__content"},e.createElement("div",{className:"userflowjs-bubble-task__name"},c),e.createElement("div",{className:"userflowjs-bubble-task__text"},b)),e.createElement("div",{className:"userflowjs-bubble-task__arrow"},!o&&e.createElement("div",{className:"userflowjs-rtl-mirrored"},e.createElement(C,{icon:L}))),i)}),z=({task:t,previousTasksCompleted:s})=>{const n=v(),{session:o}=S(),u=o.version.checklist,[c,b]=l.useState(()=>n.taskIsUnacked(t.cvid));l.useEffect(()=>{if(!c)return;const d=window.setTimeout(()=>b(!1),500);return()=>window.clearTimeout(d)},[c]);const m=o.taskCompletions.some(({taskCvid:d})=>d===t.cvid),a=!c&&m;l.useEffect(()=>{a&&n.ackCompletedTask(t.cvid)},[n,a,t.cvid]);const i=u.completeInOrder&&!s,w=i||t.actions.length===0&&a?void 0:()=>{n.send({kind:"ClickChecklistTask",sessionId:o.id,taskCvid:t.cvid},{batch:!0}),t.actions.length>0&&(a||!t.completesOnClick)&&n.hideChecklist(),M(n,o,t.actions)};return e.createElement(W,{onClick:w,name:e.createElement(x,{doc:t.name,lookupAttribute:g(o.data)}),text:e.createElement(x,{doc:t.text,lookupAttribute:g(o.data)}),completed:a,disabled:i})},G=({completedCount:t,taskCount:s})=>{const n=s===0?0:Math.min(100,Math.round(t/s*100));return e.createElement("div",{className:"userflowjs-bubble-checklist-progress"},e.createElement("div",{className:"userflowjs-bubble-checklist-progress-bg"},e.createElement("div",{className:"userflowjs-bubble-checklist-progress-text"},n,"%")),e.createElement("div",{className:"userflowjs-bubble-checklist-progress-fill",style:{width:`${n}%`}},e.createElement("div",{className:"userflowjs-bubble-checklist-progress-text"},n,"%")))},D=5e3,J=({active:t,onComplete:s})=>{const n=l.useRef(null);return l.useEffect(()=>{if(!t||!n.current)return;n.current.style.width="0%",n.current.offsetWidth,n.current.style.transition=`width ${D}ms linear`,n.current.style.width="100%";const o=setTimeout(s,D);return()=>clearTimeout(o)},[t,s]),e.createElement("div",{className:"userflowjs-bubble-progress--default userflowjs-bubble-progress-container--checklist"},t&&e.createElement("div",{className:"userflowjs-bubble-progress-background--checklist"}),e.createElement("div",{className:"userflowjs-bubble-progress__fill userflowjs-bubble-progress-fill--checklist",ref:n}))},Q=()=>{const{t}=T(),s=v(),n=S(),{session:o}=n,{version:u}=o,c=u.checklist,{dispatch:b}=U(),m=o.taskCompletions.length,a=c.tasks.length,i=m===a,w=l.useCallback(()=>{s.endFlow(o,{endReason:I.USER_CLOSED})},[s,o]);let d=!0,N=c.tasks,h=[],p=n.currentSectionName,y=!1;if(c.sectionsEnabled){let f=null;const k=Array.from(c.tasks).sort((r,E)=>r.sectionName.localeCompare(E.sectionName));for(const r of k)r.sectionName!==f&&(h.push(r.sectionName),f=r.sectionName);(!p||!h.includes(p))&&(p=h[0]),N=k.filter(r=>r.sectionName===p),y=N.some(r=>{const E=o.taskCompletions.some(({taskCvid:O})=>O===r.cvid);return r.blocksNextSection&&!E})}const j=p==null?-1:h.indexOf(p),R=f=>{const k=j+f;if(k>=0&&k<=h.length-1){const r=h[k];_.setItem("currentChecklistSectionName:"+o.id,r),b({kind:"setCurrentSection",sectionName:r})}};return e.createElement(e.Fragment,null,!B(c.content)&&e.createElement("div",{className:"userflowjs-bubble-content"},e.createElement(H,{doc:c.content,lookupAttribute:g(o.data)})),e.createElement(G,{completedCount:m,taskCount:a}),c.sectionsEnabled&&e.createElement("div",{className:"userflowjs-bubble-section-name"},p||"First section"),e.createElement("div",{className:"userflowjs-bubble-tasks"},N.map(f=>{const k=d;return o.taskCompletions.some(({taskCvid:E})=>E===f.cvid)||(d=!1),e.createElement(z,{key:f.id,task:f,previousTasksCompleted:k})})),c.sectionsEnabled&&e.createElement("div",{className:"userflowjs-bubble-section-buttons"},e.createElement("button",{className:"userflowjs-bubble-section-button",onClick:()=>R(-1),disabled:j<=0},e.createElement(C,{icon:$}),e.createElement("span",null,t("checklist.previousSection"))),e.createElement("button",{className:"userflowjs-bubble-section-button",onClick:()=>R(1),disabled:j>=h.length-1||y},e.createElement("span",null,t("checklist.nextSection")),e.createElement(C,{icon:K}))),e.createElement("div",{className:"userflowjs-bubble-dismiss-row userflowjs-bubble-dismiss-row--checklist"},u.closeDisabled?e.createElement("div",{className:"userflowjs-bubble-checklist-dismiss-button-placeholder"}):e.createElement("button",{className:F({"userflowjs-bubble-dismiss-button":!0,"userflowjs-bubble-dismiss-button--completed":i}),onClick:()=>i?w():b({kind:"showClose"})},t("checklistDismiss.button")),c.autoDismissEnabled&&e.createElement(J,{active:i,onComplete:w})))},V=()=>{const{t}=T(),s=v(),{dispatch:n}=U(),{session:o}=S();return e.createElement("div",{role:"alert"},e.createElement("div",{className:"userflowjs-bubble-content"},e.createElement("p",null,e.createElement("b",null,t("checklistDismiss.title")))),e.createElement("div",{className:"userflowjs-bubble-buttons"},e.createElement("button",{className:"userflowjs-bubble-button userflowjs-bubble-button--primary",onClick:()=>s.endFlow(o,{endReason:I.USER_CLOSED})},e.createElement("div",{className:"userflowjs-bubble-button-text",role:"presentation"},t("checklistDismiss.yes"))),e.createElement("button",{className:"userflowjs-bubble-button userflowjs-bubble-button--default",onClick:()=>n({kind:"showFlow"})},e.createElement("div",{className:"userflowjs-bubble-button-text",role:"presentation"},t("checklistDismiss.cancel")))))};function X(t){const s=t?.querySelector(".userflowjs-bubble-task--clickable:not(.userflowjs-bubble-task--completed)")||t?.querySelector(".userflowjs-bubble-task--clickable")||t?.querySelector('button:not([tabIndex="-1"])');s&&typeof s.focus=="function"&&s.focus()}const be=({session:t,initialAutoFocus:s})=>{const n=v(),o=l.useRef(null),[u,c]=l.useReducer(Z,void 0,()=>({...Y,session:t,currentSectionName:_.getItem("currentChecklistSectionName:"+t.id),autoFocusRequested:!!s})),{session:b,contentType:m}=u;l.useEffect(()=>{b!==t&&c({kind:"updateSession",session:t})},[b,t]);const a=l.useMemo(()=>({dispatch:c}),[c]);return l.useEffect(()=>{if(!u.autoFocusRequested)return;const i=o.current;i&&X(i),c({kind:"autoFocused"})},[n,u.autoFocusRequested]),e.createElement(A.Provider,{value:a},e.createElement(q.Provider,{value:u},e.createElement("div",{ref:o},m==="close"?e.createElement(V,null):e.createElement(Q,null))))},Y={contentType:"flow"};function Z(t,s){switch(s.kind){case"updateSession":return{...t,session:s.session};case"showFlow":return{...t,contentType:"flow",autoFocusRequested:!0};case"showClose":return{...t,contentType:"close",autoFocusRequested:!0};case"setCurrentSection":return{...t,currentSectionName:s.sectionName};case"autoFocused":return{...t,autoFocusRequested:!1}}}const A=l.createContext(null),q=l.createContext(null);function U(){return l.useContext(A)}function S(){return l.useContext(q)}export{be as C,X as f};
|
|
2
2
|
//# sourceMappingURL=ChecklistUI.js.map
|
package/EmbedApp.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{r as o,R as l}from"./vendor.react.js";import{
|
|
1
|
+
import{r as o,R as l}from"./vendor.react.js";import{O as m,E as K}from"./userflow.js";import{u as P,i as k}from"./client-context.js";import{o as M}from"./vendor.obj-str.js";import{u as U,a as Y,g as q,D as Z}from"./stylesheets.js";import{C as G}from"./vendor.fortawesome.pro-regular-svg-icons.js";import{u as J,S as Q,b as V}from"./use-selector-element-monitoring.js";import{w as X,f as ee}from"./flow-host.styl.js";import{r as te}from"./vendor.react-dom.js";import{F as re}from"./Frame.js";import{h as d}from"./roots.js";import{u as ne}from"./use-element-rect.js";import{C as oe}from"./ChecklistUI.js";import"./vendor.core-js.js";import"./vendor.object-assign.js";import"./vendor.phoenix.js";import"./vendor.uuid.js";import"./vendor.i18next.js";import"./vendor.babel.runtime.js";import"./vendor.react-i18next.js";import"./vendor.fortawesome.pro-solid-svg-icons.js";import"./flow-condition-types.js";import"./vendor.date-fns.js";import"./vendor.scheduler.js";import"./use-window-resize.js";(function(){try{var r=typeof window<"u"?window:typeof global<"u"?global:typeof self<"u"?self:{},a=new Error().stack;a&&(r._sentryDebugIds=r._sentryDebugIds||{},r._sentryDebugIds[a]="b4025ec3-876c-46f3-93d7-e7e6086d9943",r._sentryDebugIdIdentifier="sentry-dbid-b4025ec3-876c-46f3-93d7-e7e6086d9943")}catch{}})();const ke=({session:r,checklistSession:a})=>{const p=P(),{version:i}=r,t=i.embed,y=U(i.theme),L=r.locale?r.locale.standardLocaleId:r.version.theme.languageId,b=r.version.embed?.blocks||[],S=b.length===1&&b[0]?.type==="CHECKLIST";o.useEffect(()=>{k.changeLanguage(L)},[L]);const e=o.useRef(null);o.useLayoutEffect(()=>{e.current=document.createElement("div")},[]);const[N,v]=o.useState(!1),{loaded:D}=Y(window,ee,y),[F,I]=o.useState(!1),h=D&&F,[A,_]=o.useState(0),j=o.useCallback(()=>{I(!1),_(n=>n+1)},[]),E=![m.BODY_FIRST,m.BODY_LAST].includes(t.embedMode),[f,x]=o.useState(null),B=o.useCallback(({targetEl:n})=>{x(n)},[]),O=o.useCallback(()=>{E&&console.warn(`Userflow.js: Could not find embed element for banner "${r.flow.name||r.flow.id}"`),x(null)},[E,r.flow.name,r.flow.id]);J({selector:t.embedSelector,targetMoved:B,targetLost:O});const[T,$]=o.useState(!1),c=o.useCallback(()=>{const n=e.current;n&&n.parentElement&&(n.parentElement.removeChild(n),v(!1))},[e]),W=o.useCallback(()=>{r.kind==="embed"&&($(!0),p.endFlow(r,{endReason:K.USER_CLOSED}),c())},[c,r,p]);o.useLayoutEffect(()=>{try{if(S&&!a){c();return}if(!e.current?.parentElement){if(E&&!f){c();return}switch(t.embedMode){case m.BODY_FIRST:document.body.insertAdjacentElement("afterbegin",e.current);break;case m.BODY_LAST:document.body.insertAdjacentElement("beforeend",e.current);break;case m.ELEMENT_FIRST:f.insertAdjacentElement("afterbegin",e.current);break;case m.ELEMENT_LAST:f.insertAdjacentElement("beforeend",e.current);break;case m.ELEMENT_BEFORE:f.insertAdjacentElement("beforebegin",e.current);break;case m.ELEMENT_AFTER:f.insertAdjacentElement("afterend",e.current);break;default:document.body.insertAdjacentElement("afterbegin",e.current)}v(!0),j()}}catch(n){console.error("Error during element insertion:",n)}},[c,e,E,f,i.embed?.overlay,i.embed?.sticky,t.embedMode,j,a]);const g=n=>M({"userflowjs-embed":!0,[`userflowjs-embed--embed-mode-${t.embedMode}`]:!0,[`userflowjs-embed--animate-${String(t.animate)}`]:n&&t.animate});o.useLayoutEffect(()=>{e.current&&(e.current.className=g(!1))},[e,t.embedMode,t.animate]);const w=t.zIndex||X(0);o.useLayoutEffect(()=>{e.current&&(e.current.style.zIndex=w==null?"":String(w),e.current.style.position=h?"":"absolute",e.current.style.visibility=h?"":"hidden")},[e,w,h]);const{height:u,setEl:H}=ne();o.useLayoutEffect(()=>{e.current&&e.current.style.setProperty("--userflowjs-embed-height",u&&d(u+(t.marginTop||0)+(t.marginBottom||0))||"0px")},[e,u,t.marginTop,t.marginBottom]);const z=()=>{if(!r.version.embed?.blocks?.length)return null;const n=(s,C)=>l.createElement("div",{className:"userflowjs-embed-wrapper",key:C},l.createElement("div",{className:"userflowjs-bubble-toolbar"},r.draftMode&&l.createElement("div",{className:"userflowjs-bubble-draft"},"Preview"),!i.closeDisabled&&l.createElement("button",{"data-testid":"userflow-embed-dismiss",className:"userflowjs-bubble-toolbar-button",onClick:W,"aria-label":"Close embed"},l.createElement(Z,{icon:G}))),s);return b.map(s=>{switch(s.type){case"CHECKLIST":return a?n(l.createElement("div",{style:{...q(y),paddingTop:i.closeDisabled?"0px":"32px"},className:"userflowjs-embedded-checklist"},l.createElement(oe,{session:a})),s.id):null;default:return console.warn(`Unknown embed block type: ${s.type}`),null}})};return o.useLayoutEffect(()=>{const n=`userflow-${r.id}`;return e.current.id=n,()=>{T||document.getElementById(n)===e.current&&c()}},[e,r.id,c,T]),o.useLayoutEffect(()=>{const n=r.version.embed?.blocks?.length&&r.version.embed.blocks.some(s=>s.type==="CHECKLIST"?a:!1);u&&u>0&&n?(e.current.style.height=`${u}px`,e.current.className=g(t.animate)):(e.current.style.height="0px",e.current.className=g(!1))},[e,u,a,t.animate]),o.useEffect(()=>{if(!e.current)return;const n=new ResizeObserver(C=>{for(const R of C)R.contentRect&&!t.embedMode&&(e.current.style.height=`${R.contentRect.height}px`)}),s=e.current.querySelector("iframe");return s&&n.observe(s),()=>{n.disconnect()}},[e,t.embedMode]),!N||!b.length||S&&!a?null:te.createPortal(l.createElement(Q.Provider,{value:r},l.createElement(re,{key:A,className:"userflowjs-embed-frame",style:{maxWidth:t.maxWidth?d(t.maxWidth):"100%",width:"100%",height:r.version.embed?.blocks?.length?"100%":"auto",minHeight:0,marginTop:d(t.marginTop),marginRight:d(t.marginRight),marginBottom:d(t.marginBottom),marginLeft:d(t.marginLeft),borderRadius:d(t.borderRadius)},stylesheet:V,theme:y,onStylesheetsLoad:I,title:"Embedded Content"},l.createElement("div",{ref:H,className:M({"userflowjs-embed-root":!0,[`userflowjs-embed-root--content-layout-${t.contentLayout}`]:!0,"userflowjs-theme-root":!0,"userflowjs-embed-root-blocks":b.length>0}),dir:k.dir(),style:{width:"100%",maxWidth:t.maxContentWidth?d(t.maxContentWidth):"100%",margin:"0 auto"}},z()))),e.current)};export{ke as EmbedApp,ke as default};
|
|
2
2
|
//# sourceMappingURL=EmbedApp.js.map
|
package/FlowApp.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import{R as n,r as d}from"./vendor.react.js";import{E as B,P as ce,
|
|
1
|
+
import{R as n,r as d}from"./vendor.react.js";import{E as B,P as ce,I as F,q as k,V as P,J as ue,F as de,T as x,H as C,K as pe,L as fe,M as me,U as G}from"./userflow.js";import{l as be}from"./vendor.lodash.js";import"./vendor.core-js.js";import{u as _}from"./vendor.react-i18next.js";import{B as K,F as Ee}from"./FlowChrome.js";import{m as ge,d as X,R as we,i as he,g as ve,c as Te,u as Se,r as ye,e as W,h as ke,S as Me}from"./use-selector-element-monitoring.js";import{g as Q,i as Z}from"./flow-condition-types.js";import{u as D,i as Be}from"./client-context.js";import{z as Ie,e as Fe,r as De}from"./roots.js";import{a as J,S as Le}from"./flow-host.styl.js";import{b as Re}from"./vendor.fortawesome.pro-solid-svg-icons.js";import{D as Ne,u as Ce}from"./stylesheets.js";import{T as Ae}from"./Trigger.js";import"./vendor.object-assign.js";import"./vendor.phoenix.js";import"./vendor.uuid.js";import"./vendor.babel.runtime.js";import"./vendor.fortawesome.pro-regular-svg-icons.js";import"./Frame.js";import"./vendor.react-dom.js";import"./vendor.scheduler.js";import"./use-window-resize.js";import"./logomark.js";import"./vendor.obj-str.js";import"./vendor.canvas-confetti.js";import"./vendor.date-fns.js";import"./vendor.i18next.js";(function(){try{var e=typeof window<"u"?window:typeof global<"u"?global:typeof self<"u"?self:{},s=new Error().stack;s&&(e._sentryDebugIds=e._sentryDebugIds||{},e._sentryDebugIds[s]="eb5bfd54-4739-4872-aa81-e40719773367",e._sentryDebugIdIdentifier="sentry-dbid-eb5bfd54-4739-4872-aa81-e40719773367")}catch{}})();const Pe=()=>{const{t:e}=_(),s=D(),{dispatch:t,restart:o}=R(),{session:l,step:p}=M(),a="userflowjs-bubble-button userflowjs-bubble-button--default userflowjs-bubble-menu__item";return n.createElement("div",{role:"dialog","aria-modal":L(p)?"true":void 0,"aria-label":"Guide menu"},n.createElement("div",{className:"userflowjs-bubble-menu__title"},e("menu.title")),n.createElement("button",{className:a,onClick:()=>s.endFlow(l,{endReason:B.USER_CLOSED})},e("menu.close")),l.version.restartEnabled&&n.createElement("button",{className:a,onClick:o},e("menu.restart")),n.createElement("button",{className:a,onClick:()=>t({kind:"showFlow"})},e("menu.back")))},z=({progress:e,type:s,position:t,totalSteps:o})=>{const{t:l}=_(),p=d.useMemo(()=>parseFloat(e||"0"),[e]),a=d.useMemo(()=>({width:`${p*100}%`}),[p]),c=d.useMemo(()=>s===ce.DEFAULT?F.TOP:t,[s,t]),u=c===F.BOTTOM?"userflowjs-bubble-progress--bottom":"",m=d.useMemo(()=>`userflowjs-bubble-progress--${be.kebabCase(s||"DEFAULT").toLowerCase()} ${u}`,[s,u]),i=o||0,r=d.useMemo(()=>Math.min(Math.floor(p*i),i),[p,i]);return n.createElement(n.Fragment,null,(s==="CHAINED_ROUNDED"||s==="CHAINED_SQUARED"||s==="DOTTED")&&n.createElement("div",{className:m},Array.from({length:3}).map((E,b)=>n.createElement("div",{key:b,className:`userflowjs-bubble-progress-step ${b<Math.floor(p*3)?"userflowjs-bubble-progress-step_completed":""}`}))),s==="NARROW"&&n.createElement("div",{className:m},n.createElement("div",{className:"linear-progress-bar"},n.createElement("div",{className:"userflowjs-bubble-progress--narrow-fill",style:a}))),s==="NUMBERED"&&n.createElement("div",{className:m},n.createElement("span",{className:"numbered-progress"},l("of",{replace:{range:i,selected:r}}))),!["CHAINED_ROUNDED","CHAINED_SQUARED","DOTTED","NARROW","NUMBERED"].includes(s)&&n.createElement("div",{className:`${m} ${c===F.BOTTOM?"userflowjs-bubble-progress--bottom":""}`},n.createElement("div",{className:"userflowjs-bubble-progress__fill",style:a})))},xe=({theme:e})=>{const s=D(),{session:t,step:o,muted:l,shouldLabelDialog:p}=M(),{version:a}=t,{dispatch:c}=R(),u=a.steps[0],m=u&&u.id===o.id,i=m&&o.progress==="1",r=d.useMemo(()=>o.content&&ge(X(o.content),{buttons:o.buttons,questions:o.questions}),[o.content,o.buttons,o.questions]),E=a.steps.filter(T=>T.appearance!==k.HIDDEN),b=E.findIndex(T=>T.id===o.id),w=E.length,h=w>0?((b+1)/w).toString():"0";return n.createElement("div",{key:o.id,role:"alertdialog","aria-modal":L(o)?"true":void 0,"aria-label":p?"Guide":void 0},!i&&e.progressBarPosition==="TOP"&&e.progressBarEnabled&&n.createElement(z,{progress:h,type:e.progressBarType,position:o.appearance===k.MODAL?void 0:F.TOP,totalSteps:w}),n.createElement("div",{id:"userflowjs-bubble-content",className:"userflowjs-bubble-content","data-progress-position":e.progressBarPosition,"data-progress-type":e.progressBarType},n.createElement(we,{doc:r,lookupAttribute:Q(t.data),buttons:o.buttons,questions:o.questions})),n.createElement(K,{draftMode:t.draftMode,muted:l,toggleMuted:e.voiceType!==P.NONE?()=>c({kind:"toggleMuted"}):void 0,close:a.closeDisabled?void 0:()=>e.flowXButtonBehavior===ue.DISMISS||m?s.endFlow(t,{endReason:B.USER_CLOSED}):c({kind:"showMenu"})}),!i&&e.progressBarPosition==="BOTTOM"&&e.progressBarEnabled&&n.createElement(z,{progress:h,type:e.progressBarType,position:F.BOTTOM,totalSteps:w}))};function Oe(e,s){if(!e)return"";typeof e=="string"&&(e=X(e));const t=[],o=/[.!?;,]$/;function l(){const c=(t[t.length-1]||"").trim();c&&!c.match(o)&&t.push(".")}function p(c){if(he(c)){if(c.text&&!c.silent){const u=c.text.split(`
|
|
2
2
|
`);u.forEach((m,i)=>{t.push(m),i<u.length-1&&(l(),t.push(`
|
|
3
3
|
`))})}return}switch(c.type){case"attribute":{const u=ve(c,s);u&&t.push(u);break}default:a(c.children),["link"].includes(c.type)||(l(),t.push(`
|
|
4
4
|
|
|
5
|
-
`));break}}function a(c){c.forEach(u=>p(u))}return a(e.children),t.join("").trim().replace(new RegExp(" ","g")," ").replace(new RegExp("\b","g"),"")}const _e=({bubbleFrame:e,theme:s})=>{const t=F(),{dispatch:o}=L(),{muted:l,session:p,step:a}=M(),c=t.getAudio();d.useEffect(()=>{const r=()=>{o({kind:"speechPlaying"})},E=()=>{o({kind:"speechStopped"})};return c.addEventListener("playing",r),c.addEventListener("ended",E),c.addEventListener("pause",E),()=>{c.removeEventListener("playing",r),c.removeEventListener("ended",E),c.removeEventListener("pause",E),c.pause(),c.src="",o({kind:"speechStopped"})}},[o,c]),d.useEffect(()=>{if(t.audioReady)return;const r=e&&Ue(e)?e.contentWindow:null,E=()=>{window.removeEventListener("mousedown",b),r&&r.removeEventListener("mousedown",b)},b=()=>{E(),t.playAudio(null)};return window.addEventListener("mousedown",b),r&&r.addEventListener("mousedown",b),E},[e,t]);const u=d.useRef(p),m=d.useRef(s),i=d.useRef(a);return d.useEffect(()=>{u.current=p,m.current=s,i.current=a},[p,s,a]),d.useEffect(()=>{if(!t.audioReady||l){t.pauseAudio();return}let r=!1;return(async()=>{if(await new Promise(w=>setTimeout(w,1)),r)return;const b=await je(t,u.current,m.current,i.current);r||b&&t.playAudio(b)})(),()=>{r=!0}},[l,t,a.id,s.voiceType,s.syntheticVoice]),null};async function je(e,s,t,o){if(t.voiceType===P.SYNTHETIC&&typeof t.syntheticVoice=="string"&&o.content){e.ensureIdentified();const l=Q(s.data),p=Oe(o.content,l);return e.getStepSpeech(t.syntheticVoice,p)}else if(t.voiceType===P.MANUAL&&o.speechAsset)return o.speechAsset.assetUrl;return null}function Ue(e){return e.tagName==="IFRAME"}const qe="userflowjs-out-of-viewport-pointer--visible",Ve="userflowjs-out-of-viewport-pointer--visible-up",He="userflowjs-out-of-viewport-pointer--visible-down",We=n.forwardRef((e,s)=>{const t=J();return n.createElement("div",{ref:s,className:"userflowjs-out-of-viewport-pointer",style:{zIndex:t+2}},n.createElement(Ne,{icon:Le}))});function ze({subjectPosition:e,pointerRef:s,viewportClipRect:t}){const o=s.current;if(!o)return null;const l=o.getBoundingClientRect(),p=Ie(De());let a=e.direction,c,u;return a==null?null:(a==="down"&&t.bottom<l.height/2?a="up":a==="up"&&t.top>p&&(a="down"),c=e.left+e.width/2-l.width/2,u=a==="down"?t.bottom-l.height:t.top,{direction:a,left:c,top:u})}function Y(e,s){const t=e.current;t&&(t.classList.toggle(qe,s!=null),s&&(t.style.left=s.left+"px",t.style.top=s.top+"px",t.classList.toggle(Ve,s.direction==="up"),t.classList.toggle(He,s.direction==="down")))}const Ye="userflowjs-fixed-widget--visible",$e=({theme:e})=>{const{step:s}=M();return n.createElement(n.Fragment,null,s.beacons.map(t=>n.createElement(Ge,{key:t.id,beacon:t,theme:e})))},Ge=({beacon:e,theme:s})=>{const{session:t}=M(),o=J(),l=d.useRef(null),p=d.useRef(null),a=Te(e.hiddenCondition),c=d.useMemo(()=>Z(e.selector,t.data),[e.selector,t.data]),u=d.useCallback(({targetRect:i,clipEl:r,viewportClipRect:E})=>{const b=Xe({beacon:e,beaconRef:l,clipEl:r,viewportClipRect:E,targetRect:i,theme:s}),w=b&&ze({subjectPosition:b.pointerSubjectPosition,pointerRef:p,viewportClipRect:E});ye(()=>{$(l,b),Y(p,w)})},[e]),m=d.useCallback(()=>{$(l,null),Y(p,null)},[]);return Se({selector:a?null:c,targetMoved:u,targetLost:m}),n.createElement(n.Fragment,null,n.createElement("div",{ref:l,className:"userflowjs-beacon userflowjs-beacon--pulse userflowjs-beacon--for-flow userflowjs-fixed-widget",style:{zIndex:o+2}},n.createElement("div",{className:"userflowjs-beacon__ring"}),n.createElement("div",{className:"userflowjs-beacon__ring"})),n.createElement(We,{ref:p}))};function Xe({beacon:e,beaconRef:s,clipEl:t,viewportClipRect:o,targetRect:l,theme:p}){if(!s.current||l.width===0||l.height===0)return null;const c=p.beaconSize,u=p.beaconSize,m=Fe(t);let i=0,r=0;switch(e.placement){case"top-left":case"left":case"bottom-left":i=l.left;break;case"top":case"center":case"bottom":i=l.left+l.width/2;break;default:i=l.left+l.width;break}switch(e.placement){case"left":case"center":case"right":r=l.top+l.height/2;break;case"bottom-left":case"bottom":case"bottom-right":r=l.top+l.height;break;default:r=l.top;break}i-=c/2,r-=u/2,i+=e.offsetX,r+=e.offsetY,i=Math.max(i,m.left-(t===document.documentElement?0:t.scrollLeft)),r=Math.max(r,m.top-(t===document.documentElement?0:t.scrollTop));const E=i+c,b=r+u,w=Math.min(32,.5*u);let h;b<o.top+w?h="up":r>o.bottom-w?h="down":h=null;const T=h==null;return{top:r,right:E,bottom:b,left:i,width:c,height:u,pointerSubjectPosition:{direction:h,left:i,width:c},visible:T}}function $(e,s){const t=e.current;t&&(t.classList.toggle(Ye,s!=null),s&&(t.style.transform=`translate3d(${s.left}px, ${s.top}px, 0)`,t.style.visibility=s.visible?"visible":"hidden"))}const Ke=()=>{const{t:e}=_(),s=F(),{restart:t}=L(),{session:o,step:l}=M(),p=l.theme||o.version.theme,a=l.selector,c=!a||a.type===de.AUTO&&!a.autoData,u=()=>s.endFlow(o,{endReason:B.USER_CLOSED});return n.createElement(n.Fragment,null,n.createElement(X,{draftMode:o.draftMode,close:u}),o.draftMode&&c?n.createElement("div",{className:"userflowjs-bubble-content"},n.createElement("div",{className:"userflowjs-bubble-alert p-like"},n.createElement("span",{className:"userflowjs-bubble-alert__label"},"Preview-only tip"),"No tooltip target selected yet. Please go back to the Builder and select a tooltip target in ",n.createElement("b",null,"Step ",l.idx+1)," of"," ",n.createElement("b",null,o.flow.name),".")):o.draftMode&&p.tooltipMissingBehavior===x.END?n.createElement("div",{className:"userflowjs-bubble-content"},n.createElement("div",{className:"userflowjs-bubble-alert p-like"},n.createElement("p",null,n.createElement("span",{className:"userflowjs-bubble-alert__label"},"Preview-only tip"),"The tooltip target element in ",n.createElement("b",null,"Step ",l.idx+1)," of"," ",n.createElement("b",null,o.flow.name)," was not found within"," ",p.tooltipMissingToleranceSeconds," ",parseFloat(p.tooltipMissingToleranceSeconds)===1?"second":"seconds","."),n.createElement("p",null,"For regular users, the flow will auto-dismiss when this happens."),n.createElement("p",null,"If you are on the right page, then try reselecting the element in the Builder."),n.createElement("p",null,"Read more in our"," ",n.createElement("a",{href:"https://userflow.com/docs/trouble/element-not-found",target:"_blank",rel:"noopener noreferrer"},"Element not found guide"),"."))):n.createElement(n.Fragment,null,n.createElement("div",{className:"userflowjs-bubble-content"},o.draftMode&&n.createElement("div",{className:"userflowjs-bubble-alert p-like"},n.createElement("span",{className:"userflowjs-bubble-alert__label"},"Preview-only tip"),"The tooltip target element in ",n.createElement("b",null,"Step ",l.idx+1)," of"," ",n.createElement("b",null,o.flow.name)," was not found on the page. If you are on the right page, then try reselecting the element in the Builder."),n.createElement("p",null,n.createElement("b",null,e("tooltipTargetMissing.line1"))),n.createElement("p",null,e("tooltipTargetMissing.line2"))),n.createElement("div",{className:"userflowjs-bubble-buttons"},n.createElement(W,{appearance:"primary",onClick:t,text:e("menu.restart")}),n.createElement(W,{appearance:"default",onClick:u,text:e("menu.close")}))))},A="flowsMuted",Ft=({session:e,checklistSession:s,resourceCenterEmbedsChecklist:t})=>{const o=F(),[l,p]=d.useState(!1),[a,c]=d.useState(null),[u,m]=d.useReducer(Je,void 0,()=>{const f=e,g=O(f);return{...Ze,session:f,step:g,muted:!!C.getItem(A),autoFocusRequested:te(g)}}),{session:i,step:r,speechPlaying:E,contentType:b}=u,{version:w}=i,h=R(r);let T=0;r.questions.some(f=>f.type===pe.NPS)&&(T=420);const v=Ce(r.theme||w.theme),S=d.useMemo(()=>{let f=v.bubbleY;const g=s?.version.theme;return!t&&s&&g&&s.version.checklist?.launcherEnabled&&r.appearance===k.BUBBLE&&g.checklistLauncherPlacement===v.bubblePlacement&&(v.avatarType===fe.NONE||g.checklistLauncherX<v.bubbleX+v.avatarSize)&&(f=Math.max(v.bubbleY,g.checklistLauncherY+g.checklistLauncherHeight+v.bubbleY)),{...v,bubbleWidth:Math.max(v.bubbleWidth,T),bubbleY:f}},[t,s,r.appearance,v,T]);d.useEffect(()=>{i!==e&&m({kind:"updateSession",session:e});const f=g=>{g.session.id===i.id&&m({kind:"goToStep",stepId:g.step.id})};return o.on("gotostep",f),()=>{o.off("gotostep",f)}},[o,i,e]);const se=d.useMemo(()=>({dispatch:m,restart:()=>{o.goToStep(i,ee(i)),m({kind:"showFlow"})}}),[o,m,i]),re=d.useMemo(()=>r.selector&&Z(r.selector,i.data),[r.selector,i.data]),le=d.useCallback(()=>{ke(o,i,r.actions)},[o,i,r.actions]);d.useEffect(()=>{u.muted?C.setItem(A,"true"):C.removeItem(A)},[u.muted]);const j=i.locale?i.locale.standardLocaleId:S.languageId;d.useEffect(()=>{Be.changeLanguage(j)},[j]);const[U,ae]=d.useState(!1),ie=d.useCallback(f=>{ae(f),f&&o.send({kind:"ReportTooltipTargetMissing",sessionId:i.id,stepId:r.id}),f&&S.tooltipMissingBehavior===x.END&&!i.draftMode&&o.endFlow(i,{endReason:B.TOOLTIP_TARGET_MISSING})},[o,i,r.id,S.tooltipMissingBehavior]);return d.useEffect(()=>{if(!l||!u.autoFocusRequested)return;!o.originalActiveElement&&o.originalActiveElement!==a?.ownerDocument.defaultView?.frameElement&&(o.originalActiveElement=document.activeElement);let f=a?.querySelector('button:not([tabindex="-1"]):not(.userflowjs-bubble-toolbar-button), [tabindex]:not([tabindex="-1"]):not(.userflowjs-bubble-toolbar-button), input, textarea');if(f&&f.matches(".userflowjs-bubble-buttons button:not(.userflowjs-bubble-button--primary)")){const g=a?.querySelector(".userflowjs-bubble-buttons .userflowjs-bubble-button--primary");g&&(f=g)}f&&typeof f.focus=="function"&&f.focus({preventScroll:!0}),m({kind:"autoFocused"})},[o,a,l,u.autoFocusRequested]),d.useEffect(()=>{const f=a?.ownerDocument.defaultView;if(!f)return;const g=()=>{m({kind:"focusOut"}),delete o.originalActiveElement},y=()=>{m({kind:"focusIn"})};return window.addEventListener("focusin",g),f.addEventListener("focusin",y),()=>{window.removeEventListener("focusin",g),f.removeEventListener("focusin",y)}},[a,o]),d.useEffect(()=>{if(!h||!a)return;const f=a.ownerDocument.defaultView,g=f?f.document:document,y=I=>{if(I.key==="Escape"&&!w.closeDisabled)o.endFlow(i,{endReason:B.USER_CLOSED});else if(I.key==="Tab"){const N=a.querySelectorAll('button:not([tabindex="-1"]), [tabindex]:not([tabindex="-1"]), input, textarea'),q=N[0],V=N[N.length-1],H=g.activeElement;I.shiftKey?H===q&&(I.preventDefault(),V.focus()):H===V&&(I.preventDefault(),q.focus())}};return window.addEventListener("keydown",y),f?.addEventListener("keydown",y),()=>{window.removeEventListener("keydown",y),f?.removeEventListener("keydown",y)}},[h,o,i,a,w.closeDisabled]),d.useEffect(()=>{if(u.scrollToTopRequested){if(a?.ownerDocument.defaultView?.frameElement){const f=a?.ownerDocument.body;f&&(f.scrollTop=0)}m({kind:"scrolledToTop"})}},[u.scrollToTopRequested,a]),n.createElement(oe.Provider,{value:se},n.createElement(ne.Provider,{value:u},n.createElement(Me.Provider,{value:i},n.createElement(Re,null,n.createElement(Ee,{company:i.flow.company,theme:S,position:"fixed",stepKey:r.crossVersionId,stepAppearance:r.appearance,width:r.width,backgroundImageUrl:b==="flow"&&!U&&r.backgroundAsset?r.backgroundAsset.assetUrl:null,tooltipSelector:re,tooltipPlacement:r.tooltipPlacement,backdrop:r.backdrop,tooltipTargetBlocked:r.tooltipTargetBlocked,backdropPadding:r.backdropPadding,onTooltipTargetClick:le,onTooltipTargetMissingChange:ie,onModalBackdropClick:r.appearance===k.MODAL&&S.modalBackdropOnclick===me.DISMISS&&!w.closeDisabled?()=>o.endFlow(i,{endReason:B.USER_CLOSED}):void 0,speaking:E,minimizeOnAvatarClick:!0,autoHide3pEnabled:!0,onVisibleChange:p,bubbleFrameRootRef:c,confettiEnabled:r.confettiEnabled,rootChildren:f=>n.createElement(Qe,{...f,theme:S})},b==="menu"?n.createElement(Pe,null):U&&S.tooltipMissingBehavior!==x.BUBBLE?n.createElement(Ke,null):n.createElement(xe,{theme:S}))))))},Qe=({visible:e,bubbleFrame:s,theme:t})=>{const o=M(),{step:l}=o,p=o.session.currentStep&&o.session.currentStep.id,[a,c]=d.useState(!1),u=d.useRef(p);return d.useEffect(()=>{e?c(!0):u.current!==p&&c(!1),u.current=p},[p,e]),n.createElement(n.Fragment,null,(e||a)&&o.contentType==="flow"&&n.createElement(n.Fragment,null,n.createElement(_e,{bubbleFrame:s,theme:t}),n.createElement($e,{theme:t})),l.triggers.map(m=>n.createElement(Ae,{key:m.id,trigger:m})))},Ze={muted:!1,speechPlaying:!1,contentType:"flow",autoFocusRequested:!1,hasFocus:!1,scrollToTopRequested:!1,shouldLabelDialog:!0};function Je(e,s){switch(s.kind){case"updateSession":{let t;return s.session.id===e.session.id?t=s.session.version.steps.find(({crossVersionId:o})=>o===e.step.crossVersionId)||O(s.session):t=O(s.session),{...e,session:s.session,step:t}}case"goToStep":{const t=e.session.version.steps.find(o=>o.id===s.stepId);return t?{...e,step:t,contentType:"flow",autoFocusRequested:e.hasFocus||te(t),scrollToTopRequested:!0,shouldLabelDialog:!e.hasFocus}:e}case"toggleMuted":return{...e,muted:!e.muted};case"speechPlaying":return{...e,speechPlaying:!0};case"speechStopped":return{...e,speechPlaying:!1};case"showFlow":return{...e,contentType:"flow",autoFocusRequested:!0,scrollToTopRequested:!0};case"showMenu":return{...e,contentType:"menu",autoFocusRequested:!0,scrollToTopRequested:!0};case"autoFocused":return{...e,autoFocusRequested:!1};case"focusIn":return{...e,hasFocus:!0};case"focusOut":return{...e,hasFocus:!1};case"scrolledToTop":return{...e,scrollToTopRequested:!1}}}function O(e){const{currentStep:s}=e,{steps:t}=e.version;if(s){const o=t.find(({crossVersionId:l})=>l===s.crossVersionId);if(!o)throw new G("Session points to an unknown step: "+s.crossVersionId);return o}else return ee(e)}function ee(e){const s=e.version.steps[0];if(!s)throw new G("Session has no current step and its version has no start step");return s}function te(e){return R(e)}function R(e){return e.appearance===k.MODAL||e.appearance===k.BUBBLE&&e.backdrop||e.appearance===k.TOOLTIP&&e.tooltipTargetBlocked}const oe=d.createContext(null),ne=d.createContext(null);function L(){return d.useContext(oe)}function M(){return d.useContext(ne)}export{Ft as FlowApp,ne as FlowStateContext,Ft as default,Ze as initialFlowState,R as isStepModal,L as useFlowDispatch,M as useFlowState};
|
|
5
|
+
`));break}}function a(c){c.forEach(u=>p(u))}return a(e.children),t.join("").trim().replace(new RegExp(" ","g")," ").replace(new RegExp("\b","g"),"")}const _e=({bubbleFrame:e,theme:s})=>{const t=D(),{dispatch:o}=R(),{muted:l,session:p,step:a}=M(),c=t.getAudio();d.useEffect(()=>{const r=()=>{o({kind:"speechPlaying"})},E=()=>{o({kind:"speechStopped"})};return c.addEventListener("playing",r),c.addEventListener("ended",E),c.addEventListener("pause",E),()=>{c.removeEventListener("playing",r),c.removeEventListener("ended",E),c.removeEventListener("pause",E),c.pause(),c.src="",o({kind:"speechStopped"})}},[o,c]),d.useEffect(()=>{if(t.audioReady)return;const r=e&&Ue(e)?e.contentWindow:null,E=()=>{window.removeEventListener("mousedown",b),r&&r.removeEventListener("mousedown",b)},b=()=>{E(),t.playAudio(null)};return window.addEventListener("mousedown",b),r&&r.addEventListener("mousedown",b),E},[e,t]);const u=d.useRef(p),m=d.useRef(s),i=d.useRef(a);return d.useEffect(()=>{u.current=p,m.current=s,i.current=a},[p,s,a]),d.useEffect(()=>{if(!t.audioReady||l){t.pauseAudio();return}let r=!1;return(async()=>{if(await new Promise(w=>setTimeout(w,1)),r)return;const b=await je(t,u.current,m.current,i.current);r||b&&t.playAudio(b)})(),()=>{r=!0}},[l,t,a.id,s.voiceType,s.syntheticVoice]),null};async function je(e,s,t,o){if(t.voiceType===P.SYNTHETIC&&typeof t.syntheticVoice=="string"&&o.content){e.ensureIdentified();const l=Q(s.data),p=Oe(o.content,l);return e.getStepSpeech(t.syntheticVoice,p)}else if(t.voiceType===P.MANUAL&&o.speechAsset)return o.speechAsset.assetUrl;return null}function Ue(e){return e.tagName==="IFRAME"}const qe="userflowjs-out-of-viewport-pointer--visible",Ve="userflowjs-out-of-viewport-pointer--visible-up",He="userflowjs-out-of-viewport-pointer--visible-down",We=n.forwardRef((e,s)=>{const t=J();return n.createElement("div",{ref:s,className:"userflowjs-out-of-viewport-pointer",style:{zIndex:t+2}},n.createElement(Ne,{icon:Re}))});function ze({subjectPosition:e,pointerRef:s,viewportClipRect:t}){const o=s.current;if(!o)return null;const l=o.getBoundingClientRect(),p=Ie(Fe());let a=e.direction,c,u;return a==null?null:(a==="down"&&t.bottom<l.height/2?a="up":a==="up"&&t.top>p&&(a="down"),c=e.left+e.width/2-l.width/2,u=a==="down"?t.bottom-l.height:t.top,{direction:a,left:c,top:u})}function Y(e,s){const t=e.current;t&&(t.classList.toggle(qe,s!=null),s&&(t.style.left=s.left+"px",t.style.top=s.top+"px",t.classList.toggle(Ve,s.direction==="up"),t.classList.toggle(He,s.direction==="down")))}const Ye="userflowjs-fixed-widget--visible",$e=({theme:e})=>{const{step:s}=M();return n.createElement(n.Fragment,null,s.beacons.map(t=>n.createElement(Ge,{key:t.id,beacon:t,theme:e})))},Ge=({beacon:e,theme:s})=>{const{session:t}=M(),o=J(),l=d.useRef(null),p=d.useRef(null),a=Te(e.hiddenCondition),c=d.useMemo(()=>Z(e.selector,t.data),[e.selector,t.data]),u=d.useCallback(({targetRect:i,clipEl:r,viewportClipRect:E})=>{const b=Ke({beacon:e,beaconRef:l,clipEl:r,viewportClipRect:E,targetRect:i,theme:s}),w=b&&ze({subjectPosition:b.pointerSubjectPosition,pointerRef:p,viewportClipRect:E});ye(()=>{$(l,b),Y(p,w)})},[e]),m=d.useCallback(()=>{$(l,null),Y(p,null)},[]);return Se({selector:a?null:c,targetMoved:u,targetLost:m}),n.createElement(n.Fragment,null,n.createElement("div",{ref:l,className:"userflowjs-beacon userflowjs-beacon--pulse userflowjs-beacon--for-flow userflowjs-fixed-widget",style:{zIndex:o+2}},n.createElement("div",{className:"userflowjs-beacon__ring"}),n.createElement("div",{className:"userflowjs-beacon__ring"})),n.createElement(We,{ref:p}))};function Ke({beacon:e,beaconRef:s,clipEl:t,viewportClipRect:o,targetRect:l,theme:p}){if(!s.current||l.width===0||l.height===0)return null;const c=p.beaconSize,u=p.beaconSize,m=De(t);let i=0,r=0;switch(e.placement){case"top-left":case"left":case"bottom-left":i=l.left;break;case"top":case"center":case"bottom":i=l.left+l.width/2;break;default:i=l.left+l.width;break}switch(e.placement){case"left":case"center":case"right":r=l.top+l.height/2;break;case"bottom-left":case"bottom":case"bottom-right":r=l.top+l.height;break;default:r=l.top;break}i-=c/2,r-=u/2,i+=e.offsetX,r+=e.offsetY,i=Math.max(i,m.left-(t===document.documentElement?0:t.scrollLeft)),r=Math.max(r,m.top-(t===document.documentElement?0:t.scrollTop));const E=i+c,b=r+u,w=Math.min(32,.5*u);let h;b<o.top+w?h="up":r>o.bottom-w?h="down":h=null;const T=h==null;return{top:r,right:E,bottom:b,left:i,width:c,height:u,pointerSubjectPosition:{direction:h,left:i,width:c},visible:T}}function $(e,s){const t=e.current;t&&(t.classList.toggle(Ye,s!=null),s&&(t.style.transform=`translate3d(${s.left}px, ${s.top}px, 0)`,t.style.visibility=s.visible?"visible":"hidden"))}const Xe=()=>{const{t:e}=_(),s=D(),{restart:t}=R(),{session:o,step:l}=M(),p=l.theme||o.version.theme,a=l.selector,c=!a||a.type===de.AUTO&&!a.autoData,u=()=>s.endFlow(o,{endReason:B.USER_CLOSED});return n.createElement(n.Fragment,null,n.createElement(K,{draftMode:o.draftMode,close:u}),o.draftMode&&c?n.createElement("div",{className:"userflowjs-bubble-content"},n.createElement("div",{className:"userflowjs-bubble-alert p-like"},n.createElement("span",{className:"userflowjs-bubble-alert__label"},"Preview-only tip"),"No tooltip target selected yet. Please go back to the Builder and select a tooltip target in ",n.createElement("b",null,"Step ",l.idx+1)," of"," ",n.createElement("b",null,o.flow.name),".")):o.draftMode&&p.tooltipMissingBehavior===x.END?n.createElement("div",{className:"userflowjs-bubble-content"},n.createElement("div",{className:"userflowjs-bubble-alert p-like"},n.createElement("p",null,n.createElement("span",{className:"userflowjs-bubble-alert__label"},"Preview-only tip"),"The tooltip target element in ",n.createElement("b",null,"Step ",l.idx+1)," of"," ",n.createElement("b",null,o.flow.name)," was not found within"," ",p.tooltipMissingToleranceSeconds," ",parseFloat(p.tooltipMissingToleranceSeconds)===1?"second":"seconds","."),n.createElement("p",null,"For regular users, the flow will auto-dismiss when this happens."),n.createElement("p",null,"If you are on the right page, then try reselecting the element in the Builder."),n.createElement("p",null,"Read more in our"," ",n.createElement("a",{href:"https://userflow.com/docs/trouble/element-not-found",target:"_blank",rel:"noopener noreferrer"},"Element not found guide"),"."))):n.createElement(n.Fragment,null,n.createElement("div",{className:"userflowjs-bubble-content"},o.draftMode&&n.createElement("div",{className:"userflowjs-bubble-alert p-like"},n.createElement("span",{className:"userflowjs-bubble-alert__label"},"Preview-only tip"),"The tooltip target element in ",n.createElement("b",null,"Step ",l.idx+1)," of"," ",n.createElement("b",null,o.flow.name)," was not found on the page. If you are on the right page, then try reselecting the element in the Builder."),n.createElement("p",null,n.createElement("b",null,e("tooltipTargetMissing.line1"))),n.createElement("p",null,e("tooltipTargetMissing.line2"))),n.createElement("div",{className:"userflowjs-bubble-buttons"},n.createElement(W,{appearance:"primary",onClick:t,text:e("menu.restart")}),n.createElement(W,{appearance:"default",onClick:u,text:e("menu.close")}))))},A="flowsMuted",Dt=({session:e,checklistSession:s,resourceCenterEmbedsChecklist:t})=>{const o=D(),[l,p]=d.useState(!1),[a,c]=d.useState(null),[u,m]=d.useReducer(Je,void 0,()=>{const f=e,g=O(f);return{...Ze,session:f,step:g,muted:!!C.getItem(A),autoFocusRequested:te(g)}}),{session:i,step:r,speechPlaying:E,contentType:b}=u,{version:w}=i,h=L(r);let T=0;r.questions.some(f=>f.type===pe.NPS)&&(T=420);const v=Ce(r.theme||w.theme),S=d.useMemo(()=>{let f=v.bubbleY;const g=s?.version.theme;return!t&&s&&g&&s.version.checklist?.launcherEnabled&&r.appearance===k.BUBBLE&&g.checklistLauncherPlacement===v.bubblePlacement&&(v.avatarType===fe.NONE||g.checklistLauncherX<v.bubbleX+v.avatarSize)&&(f=Math.max(v.bubbleY,g.checklistLauncherY+g.checklistLauncherHeight+v.bubbleY)),{...v,bubbleWidth:Math.max(v.bubbleWidth,T),bubbleY:f}},[t,s,r.appearance,v,T]);d.useEffect(()=>{i!==e&&m({kind:"updateSession",session:e});const f=g=>{g.session.id===i.id&&m({kind:"goToStep",stepId:g.step.id})};return o.on("gotostep",f),()=>{o.off("gotostep",f)}},[o,i,e]);const se=d.useMemo(()=>({dispatch:m,restart:()=>{o.goToStep(i,ee(i)),m({kind:"showFlow"})}}),[o,m,i]),re=d.useMemo(()=>r.selector&&Z(r.selector,i.data),[r.selector,i.data]),le=d.useCallback(()=>{ke(o,i,r.actions)},[o,i,r.actions]);d.useEffect(()=>{u.muted?C.setItem(A,"true"):C.removeItem(A)},[u.muted]);const j=i.locale?i.locale.standardLocaleId:S.languageId;d.useEffect(()=>{Be.changeLanguage(j)},[j]);const[U,ae]=d.useState(!1),ie=d.useCallback(f=>{ae(f),f&&o.send({kind:"ReportTooltipTargetMissing",sessionId:i.id,stepId:r.id}),f&&S.tooltipMissingBehavior===x.END&&!i.draftMode&&o.endFlow(i,{endReason:B.TOOLTIP_TARGET_MISSING})},[o,i,r.id,S.tooltipMissingBehavior]);return d.useEffect(()=>{if(!l||!u.autoFocusRequested)return;!o.originalActiveElement&&o.originalActiveElement!==a?.ownerDocument.defaultView?.frameElement&&(o.originalActiveElement=document.activeElement);let f=a?.querySelector('button:not([tabindex="-1"]):not(.userflowjs-bubble-toolbar-button), [tabindex]:not([tabindex="-1"]):not(.userflowjs-bubble-toolbar-button), input, textarea');if(f&&f.matches(".userflowjs-bubble-buttons button:not(.userflowjs-bubble-button--primary)")){const g=a?.querySelector(".userflowjs-bubble-buttons .userflowjs-bubble-button--primary");g&&(f=g)}f&&typeof f.focus=="function"&&f.focus({preventScroll:!0}),m({kind:"autoFocused"})},[o,a,l,u.autoFocusRequested]),d.useEffect(()=>{const f=a?.ownerDocument.defaultView;if(!f)return;const g=()=>{m({kind:"focusOut"}),delete o.originalActiveElement},y=()=>{m({kind:"focusIn"})};return window.addEventListener("focusin",g),f.addEventListener("focusin",y),()=>{window.removeEventListener("focusin",g),f.removeEventListener("focusin",y)}},[a,o]),d.useEffect(()=>{if(!h||!a)return;const f=a.ownerDocument.defaultView,g=f?f.document:document,y=I=>{if(I.key==="Escape"&&!w.closeDisabled)o.endFlow(i,{endReason:B.USER_CLOSED});else if(I.key==="Tab"){const N=a.querySelectorAll('button:not([tabindex="-1"]), [tabindex]:not([tabindex="-1"]), input, textarea'),q=N[0],V=N[N.length-1],H=g.activeElement;I.shiftKey?H===q&&(I.preventDefault(),V.focus()):H===V&&(I.preventDefault(),q.focus())}};return window.addEventListener("keydown",y),f?.addEventListener("keydown",y),()=>{window.removeEventListener("keydown",y),f?.removeEventListener("keydown",y)}},[h,o,i,a,w.closeDisabled]),d.useEffect(()=>{if(u.scrollToTopRequested){if(a?.ownerDocument.defaultView?.frameElement){const f=a?.ownerDocument.body;f&&(f.scrollTop=0)}m({kind:"scrolledToTop"})}},[u.scrollToTopRequested,a]),n.createElement(oe.Provider,{value:se},n.createElement(ne.Provider,{value:u},n.createElement(Me.Provider,{value:i},n.createElement(Le,null,n.createElement(Ee,{company:i.flow.company,theme:S,position:"fixed",stepKey:r.crossVersionId,stepAppearance:r.appearance,width:r.width,backgroundImageUrl:b==="flow"&&!U&&r.backgroundAsset?r.backgroundAsset.assetUrl:null,tooltipSelector:re,tooltipPlacement:r.tooltipPlacement,backdrop:r.backdrop,tooltipTargetBlocked:r.tooltipTargetBlocked,backdropPadding:r.backdropPadding,onTooltipTargetClick:le,onTooltipTargetMissingChange:ie,onModalBackdropClick:r.appearance===k.MODAL&&S.modalBackdropOnclick===me.DISMISS&&!w.closeDisabled?()=>o.endFlow(i,{endReason:B.USER_CLOSED}):void 0,speaking:E,minimizeOnAvatarClick:!0,autoHide3pEnabled:!0,onVisibleChange:p,bubbleFrameRootRef:c,confettiEnabled:r.confettiEnabled,rootChildren:f=>n.createElement(Qe,{...f,theme:S})},b==="menu"?n.createElement(Pe,null):U&&S.tooltipMissingBehavior!==x.BUBBLE?n.createElement(Xe,null):n.createElement(xe,{theme:S}))))))},Qe=({visible:e,bubbleFrame:s,theme:t})=>{const o=M(),{step:l}=o,p=o.session.currentStep&&o.session.currentStep.id,[a,c]=d.useState(!1),u=d.useRef(p);return d.useEffect(()=>{e?c(!0):u.current!==p&&c(!1),u.current=p},[p,e]),n.createElement(n.Fragment,null,(e||a)&&o.contentType==="flow"&&n.createElement(n.Fragment,null,n.createElement(_e,{bubbleFrame:s,theme:t}),n.createElement($e,{theme:t})),l.triggers.map(m=>n.createElement(Ae,{key:m.id,trigger:m})))},Ze={muted:!1,speechPlaying:!1,contentType:"flow",autoFocusRequested:!1,hasFocus:!1,scrollToTopRequested:!1,shouldLabelDialog:!0};function Je(e,s){switch(s.kind){case"updateSession":{let t;return s.session.id===e.session.id?t=s.session.version.steps.find(({crossVersionId:o})=>o===e.step.crossVersionId)||O(s.session):t=O(s.session),{...e,session:s.session,step:t}}case"goToStep":{const t=e.session.version.steps.find(o=>o.id===s.stepId);return t?{...e,step:t,contentType:"flow",autoFocusRequested:e.hasFocus||te(t),scrollToTopRequested:!0,shouldLabelDialog:!e.hasFocus}:e}case"toggleMuted":return{...e,muted:!e.muted};case"speechPlaying":return{...e,speechPlaying:!0};case"speechStopped":return{...e,speechPlaying:!1};case"showFlow":return{...e,contentType:"flow",autoFocusRequested:!0,scrollToTopRequested:!0};case"showMenu":return{...e,contentType:"menu",autoFocusRequested:!0,scrollToTopRequested:!0};case"autoFocused":return{...e,autoFocusRequested:!1};case"focusIn":return{...e,hasFocus:!0};case"focusOut":return{...e,hasFocus:!1};case"scrolledToTop":return{...e,scrollToTopRequested:!1}}}function O(e){const{currentStep:s}=e,{steps:t}=e.version;if(s){const o=t.find(({crossVersionId:l})=>l===s.crossVersionId);if(!o)throw new G("Session points to an unknown step: "+s.crossVersionId);return o}else return ee(e)}function ee(e){const s=e.version.steps[0];if(!s)throw new G("Session has no current step and its version has no start step");return s}function te(e){return L(e)}function L(e){return e.appearance===k.MODAL||e.appearance===k.BUBBLE&&e.backdrop||e.appearance===k.TOOLTIP&&e.tooltipTargetBlocked}const oe=d.createContext(null),ne=d.createContext(null);function R(){return d.useContext(oe)}function M(){return d.useContext(ne)}export{Dt as FlowApp,ne as FlowStateContext,Dt as default,Ze as initialFlowState,L as isStepModal,R as useFlowDispatch,M as useFlowState};
|
|
6
6
|
//# sourceMappingURL=FlowApp.js.map
|
package/FlowChrome.js
CHANGED
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
import{S as
|
|
2
|
-
`,{type:r.type,autoData:mt,excludeText:r.excludeText,precision:r.precision,text:r.text,css:r.css})}jt(),i.tooltipTargetMissing=!0,Q.current()}},U)}Q.current()},[a,L,r,t.tooltipMissingToleranceSeconds]),de=l.useCallback(i=>{const U=A.current;jt(),U.tooltipTargetParams&&U.tooltipTargetParams.targetEl!==i.targetEl&&(U.tooltipPlacement=null),U.tooltipTargetParams=i,Y({forceUpdatePosition:!0})},[Y]);Re({selector:a===y.TOOLTIP&&r||null,targetMoved:de,targetLost:fe,onTargetClick:v});const be=l.useCallback(()=>Y({forceAppearanceLayout:!0}),[Y]);Pe(be),l.useEffect(()=>{if(!X||R||typeof ie!="function")return;let i;const U=new ie(()=>{i||(i=window.requestAnimationFrame(()=>{i=void 0,Q.current()}))});return U.observe(X,{childList:!0,attributes:!0,subtree:!0}),()=>{U.disconnect(),i&&window.cancelAnimationFrame(i)}},[X,R]);const{startConfetti:me}=Ae({stepType:a,theme:t,bubbleFrame:lt.current,isBubbleVisible:O,confettiDelay:400});l.useEffect(()=>{O&&ot&<.current&&me(!0)},[ot,s,O]),l.useLayoutEffect(()=>{Q.current()}),l.useLayoutEffect(()=>{V==="absolute"&&Y({forceAppearanceLayout:!0})},[V,T,E]);const bt=i=>{i.preventDefault(),i.stopPropagation()};return Fe(t,!!M&&j===y.BUBBLE),p.createElement("div",{ref:ft,"data-testid":"flow-chrome",className:"userflowjs-flow-chrome userflowjs-theme-root",style:ve(t),dir:nt},p.createElement("div",{className:"userflowjs-bubble",ref:ht,style:{zIndex:pt}},p.createElement("div",{className:zt({"userflowjs-bubble-outline":!0,[`userflowjs-bubble-outline--bubble-placement-${(t.bubblePlacement||"").toLowerCase().replace(/_/,"-")}`]:!0,"userflowjs-bubble-outline--minimizable":!!F,"userflowjs-bubble-outline--minimized":u})},p.createElement("div",{className:"userflowjs-bubble__frame-wrapper",..._},p.createElement(re,{className:"userflowjs-bubble__frame",elRef:lt,stylesheet:_e,theme:t,onStylesheetsLoad:Nt,noIframe:R,title:a.toLowerCase()},p.createElement("div",{className:"userflowjs-bubble-frame-root",ref:i=>{B&&B(i),_t(i)},style:w?{backgroundImage:`url("${encodeURI(w)}")`}:void 0},n,e.flowBranding&&!f&&p.createElement("div",{className:"userflowjs-bubble-made-with-userflow"},p.createElement("div",{className:"userflowjs-bubble-made-with-userflow__absolute"},p.createElement(at,{company:e},p.createElement(ke,null),p.createElement("div",null,"Made with Userflow"))))))),p.createElement("div",{ref:gt,className:"userflowjs-bubble__avatar-notch"})),p.createElement(re,{className:zt({"userflowjs-bubble__avatar":!0,"userflowjs-bubble__avatar--minimizable":!!F,"userflowjs-bubble__avatar--speaking":!!D}),elRef:Tt,stylesheet:De,theme:t,onStylesheetsLoad:St,noIframe:R,ariaHidden:!0,title:a.toLowerCase()},p.createElement("div",{className:zt({"userflowjs-avatar-frame-root":!0,"userflowjs-avatar-frame-root--minimizable":!!F}),onClick:F?()=>S(i=>!i):void 0},p.createElement(Ue,{theme:t}))),p.createElement("div",{ref:wt,className:"userflowjs-bubble__tooltip-notch"})),p.createElement("div",{ref:Et,className:"userflowjs-tooltip-backdrop",onMouseDown:bt,style:{zIndex:J,pointerEvents:z?void 0:"none"}}),p.createElement("div",{ref:Lt,className:"userflowjs-tooltip-block",onMouseDown:bt,style:{zIndex:J}}),p.createElement("div",{ref:yt,className:"userflowjs-tooltip-block",onMouseDown:bt,style:{zIndex:J}}),p.createElement("div",{ref:vt,className:"userflowjs-tooltip-block",onMouseDown:bt,style:{zIndex:J}}),p.createElement("div",{ref:Bt,className:"userflowjs-tooltip-block",onMouseDown:bt,style:{zIndex:J}}),p.createElement("div",{ref:Mt,className:"userflowjs-modal-backdrop",onMouseDown:bt,onClick:q,style:{zIndex:J}}),N&&N({visible:O,bubbleFrame:lt.current}))},Ue=({theme:e})=>{const t="https://js.userflow.com/cartoon-avatars-no-bg/";let o;return e.avatarType===ct.ASSET&&e.avatarAsset?o=e.avatarAsset.assetUrl:e.avatarType===ct.CARTOON&&e.avatarName?o=t+e.avatarName+".svg?3":e.avatarType===ct.URL&&e.avatarUrl?o=e.avatarUrl:o=t+"none.svg",p.createElement("img",{src:o,alt:""})},Ve=({company:e,children:t})=>p.createElement("a",{href:"https://userflow.com/?utm_source=made-with-userflow&utm_medium=link&utm_campaign=made-with-userflow-"+e.slug,target:"_blank",rel:"noopener noreferrer"},t);function We({layoutState:{appearance:e,theme:t,backdrop:o,tooltipTargetMissing:T},width:E,position:s,absoluteWidth:a,root:d,bubble:w,bubbleFrameRoot:r,avatar:L,avatarNotch:I,modalBackdrop:C,dir:z}){const tt=s==="absolute"?a||1024:ut(Ft()),{avatarSize:k,bubblePlacement:v}=t;let x=t.bubbleWidth,q=null,et=null,D=`userflowjs-bubble-frame-root userflowjs-bubble-frame-root--appearance-${e?.toLowerCase()}`,R="hidden",c=null,F=null,M=null,B=null,_="userflowjs-bubble__avatar-notch",N="hidden",n=null,f=null,ot=null,V=null,H="userflowjs-modal-backdrop";switch((e===y.MODAL||!T&&e===y.BUBBLE&&o)&&(H+=" userflowjs-modal-backdrop--visible"),e){case y.BUBBLE:if(t.avatarType!==ct.NONE){R="",N="",v===P.TOP_LEFT||v===P.TOP_CENTER||v===P.TOP_RIGHT?(q=k+It,c=0,n=-2*It,_+=" userflowjs-bubble__avatar-notch--top"):(et=k+It,M=0,ot=-2*It,_+=" userflowjs-bubble__avatar-notch--bottom");const at=v===P.TOP_LEFT||v===P.TOP_CENTER||v===P.BOTTOM_LEFT||v===P.BOTTOM_CENTER||v===P.CENTER;z==="ltr"&&at||z==="rtl"&&!at?(B=0,V=k,_+=" userflowjs-bubble__avatar-notch--left"):(F=0,f=k,_+=" userflowjs-bubble__avatar-notch--right")}break;case y.MODAL:x=t.modalWidth,t.avatarType!==ct.NONE&&(R="",B=`calc(50% - ${k/2}px)`,c=-k/2);break;case y.TOOLTIP:x=t.tooltipWidth;break}E!=null&&(x=E),x=Math.min(x,tt-2*Gt),d.classList.toggle("userflowjs-flow-chrome--position-absolute",s==="absolute"),d.classList.toggle("userflowjs-flow-chrome--position-relative",s==="relative"),d.classList.toggle("userflowjs-flow-chrome--position-fixed",s==="fixed"),d.classList.toggle("userflowjs-flow-chrome--appearance-modal",e===y.MODAL);const $=e!=null&&e!==y.HIDDEN;d.style.position="",d.style.top="",d.style.left="",d.style.visibility=$?"":"hidden",d.style.animation=$?"":"none",m(w,"width",ut(x)),m(w,"padding-top",q),m(w,"padding-bottom",et),r.className=D,m(L,"width",ut(t.avatarSize)),m(L,"height",ut(t.avatarSize)),L.style.visibility=R,m(L,"top",c),m(L,"right",F),m(L,"bottom",M),m(L,"left",B),I.className=_,I.style.visibility=N,m(I,"top",n),m(I,"right",f),m(I,"bottom",ot),m(I,"left",V),C.className=H}function ze({layoutState:e,animateIn:t,position:o,absoluteWidth:T,absoluteHeight:E,desiredTooltipPlacement:s,root:a,bubble:d,tooltipNotch:w,tooltipBackdrop:r,tooltipBlockTop:L,tooltipBlockRight:I,tooltipBlockBottom:C,tooltipBlockLeft:z,dir:tt}){const{appearance:k,theme:v,tooltipTargetParams:x,backdrop:q,backdropPadding:et}=e,{bubblePlacement:D}=v,R=Gt,c=v.tooltipNotchSize,F=10,{width:M,height:B}=d.getBoundingClientRect(),_=o==="absolute"?T||1024:ut(Ft()),N=o==="absolute"?E||768:ut(Yt());let n=0,f=0,ot="userflowjs-bubble__tooltip-notch",V="hidden",H=null,$=null,at=null,rt=null,pt="userflowjs-tooltip-backdrop",J=null,Rt=null,nt=null,ft=null,ht=null,lt=null,X=null,_t=null,gt="userflowjs-tooltip-block userflowjs-tooltip-block--top",Tt=null,wt=null,Et="userflowjs-tooltip-block userflowjs-tooltip-block--right",Lt=null,yt=null,vt="userflowjs-tooltip-block userflowjs-tooltip-block--bottom",Bt=null,Mt=null,Pt="userflowjs-tooltip-block userflowjs-tooltip-block--left",kt=null,Nt=null;switch(k){case y.BUBBLE:{D===P.TOP_LEFT||D===P.BOTTOM_LEFT?n=v.bubbleX:D===P.TOP_CENTER||D===P.CENTER||D===P.BOTTOM_CENTER?n=(_-M)/2:n=_-M-v.bubbleX,D===P.TOP_LEFT||D===P.TOP_CENTER||D===P.TOP_RIGHT?f=v.bubbleY:D===P.CENTER?f=(N-B)/2:f=N-B-v.bubbleY,tt==="rtl"&&(n=_-n-M),n=Math.max(0,Math.min(_-M,n)),f=Math.max(0,Math.min(N-B,f));break}case y.MODAL:{let h=R;v.avatarType!==ct.NONE&&(h+=v.avatarSize/2),n=R+(_-R*2-M)/2,f=h+(N-h-R-B)/2;break}case y.TOOLTIP:{let h;if(x){let{targetRect:u,viewportClipRect:S}=x;if(o==="absolute"){const O=a.offsetParent.getBoundingClientRect();S={top:0,right:_,bottom:N,left:0},u={top:u.top-O.top,right:u.right-O.left,bottom:u.bottom-O.top,left:u.left-O.left,width:u.width,height:u.height}}let A=0;if(q){const{paddingTop:O,paddingRight:dt,paddingBottom:Y,paddingLeft:Q}=$e(et);u={top:u.top-O,right:u.right+dt,bottom:u.bottom+Y,left:u.left-Q,width:u.width+Q+dt,height:u.height+O+Y},A=Math.min(O,dt,Y,Q)}const j=u,K=v.backdropHighlightType==Me.OUTSIDE?v.backdropHighlightSpread:0;if(q&&K&&(u={top:u.top-K,right:u.right+K,bottom:u.bottom+K,left:u.left-K,width:u.width+2*K,height:u.height+2*K}),h=Ye({targetRect:u,bubbleWidth:M,bubbleHeight:B,containerWidth:_,containerHeight:N,viewportClipRect:S,tooltipNotchSize:c,currentTooltipPlacement:e.tooltipPlacement,desiredTooltipPlacement:s}),h===b.BELOW||h===b.ABOVE?(n=u.left+u.width/2-M/2,n=Math.max(R,Math.min(_-M-R,n)),rt=Math.max(F,Math.min(M-F-c*2,u.left+u.width/2-c-n)),h===b.BELOW?H=-c*2:at=-c*2):h===b.RIGHT?(n=u.right+c,n=Math.max(n,S.left+c),n=Math.min(n,S.right+c),n=Math.max(n,c),n=Math.min(n,_-M)):(n=u.left-c-M,n=Math.max(n,S.left-M-c),n=Math.min(n,S.right-M-c),n=Math.max(n,0),n=Math.min(n,_-M-c)),h===b.LEFT||h===b.RIGHT?(f=u.top+u.height/2-B/2,f=Math.max(R,Math.min(N-B-R,f)),H=Math.max(F,Math.min(B-F-c*2,u.top+u.height/2-c-f)),h===b.LEFT?$=-c*2:rt=-c*2):h===b.BELOW?(f=u.bottom+c,f=Math.max(f,S.top+c),f=Math.min(f,S.bottom+c),f=Math.max(f,c),f=Math.min(f,N-B)):(f=u.top-c-B,f=Math.max(f,S.top-B-c),f=Math.min(f,S.bottom-B-c),f=Math.max(f,0),f=Math.min(f,N-B-c)),q){const O=window.getComputedStyle(x.targetEl);J=Math.max(0,j.top),Rt=Math.max(0,_-j.right),nt=Math.max(0,N-j.bottom),ft=Math.max(0,j.left),ht=Math.max(0,Dt(O.borderTopLeftRadius)+A),lt=Math.max(0,Dt(O.borderTopRightRadius)+A),X=Math.max(0,Dt(O.borderBottomRightRadius)+A),_t=Math.max(0,Dt(O.borderBottomLeftRadius)+A),Tt=Math.max(0,j.right),wt=Math.max(0,j.top),Lt=Math.max(0,j.right),yt=Math.max(0,j.bottom),Bt=Math.max(0,j.left),Mt=Math.max(0,j.bottom),kt=Math.max(0,j.left),Nt=Math.max(0,j.top)}}else h=s||b.BELOW,(h===b.BELOW||h===b.ABOVE)&&(rt=M/2-c,h===b.BELOW?H=-c*2:at=-c*2),(h===b.LEFT||h===b.RIGHT)&&(H=B/2-c,h===b.LEFT?$=-c*2:rt=-c*2);e.tooltipPlacement=h,ot+=` userflowjs-bubble__tooltip-notch--${h.toLowerCase()}`,V="",q&&(pt+=" userflowjs-tooltip-backdrop--visible",gt+=" userflowjs-tooltip-block--visible",Et+=" userflowjs-tooltip-block--visible",vt+=" userflowjs-tooltip-block--visible",Pt+=" userflowjs-tooltip-block--visible");break}}d.style.transition="";let Ht=n,St=f;if(t&&(d.style.opacity="0",k===y.TOOLTIP))switch(e.tooltipPlacement){case b.BELOW:f+=24;break;case b.ABOVE:f-=24;break;case b.RIGHT:n+=24;break;case b.LEFT:n-=24;break}if(o!=="relative"&&ue(d,n,f),w.className=ot,w.style.visibility=V,m(w,"top",H),m(w,"right",$),m(w,"bottom",at),m(w,"left",rt),r.className=pt,m(r,"top",J),m(r,"right",Rt),m(r,"bottom",nt),m(r,"left",ft),m(r,"border-top-left-radius",ht),m(r,"border-top-right-radius",lt),m(r,"border-bottom-right-radius",X),m(r,"border-bottom-left-radius",_t),L.className=gt,m(L,"width",Tt),m(L,"height",wt),I.className=Et,m(I,"left",Lt),m(I,"height",yt),C.className=vt,m(C,"left",Bt),m(C,"top",Mt),z.className=Pt,m(z,"width",kt),m(z,"top",Nt),t){d.offsetWidth;const h="opacity 250ms linear";k===y.TOOLTIP?d.style.transition=`${h}, transform 500ms cubic-bezier(0.25, 0.8, 0.5, 1)`:d.style.transition=h,d.style.opacity="1",o!=="relative"&&ue(d,Ht,St)}}function Ye({targetRect:e,bubbleWidth:t,bubbleHeight:o,containerWidth:T,containerHeight:E,viewportClipRect:s,tooltipNotchSize:a,currentTooltipPlacement:d,desiredTooltipPlacement:w}){if(e.bottom<=s.top)return o+a<=E-s.top?b.BELOW:b.ABOVE;if(e.top>=s.bottom)return o+a<=s.bottom?b.ABOVE:b.BELOW;if(e.right<=s.left)return t+a<=T-s.left?b.RIGHT:b.LEFT;if(e.left>=s.right)return t+a<=s.right?b.LEFT:b.RIGHT;const r=I=>{const C=e.left+e.width/2,z=C>=s.left&&C<=s.right,tt=e.top+e.height/2,k=tt>=s.top&&tt<=s.bottom;switch(I){case b.BELOW:return E-e.bottom>o+a&&z;case b.ABOVE:return e.top>o+a&&z;case b.RIGHT:return T-e.right>t+a&&k;case b.LEFT:return e.left>t+a&&k}};if(w&&r(w))return w;if(d&&r(d))return d;const L=[{placement:b.BELOW,dist:e.top},{placement:b.ABOVE,dist:E-e.bottom},{placement:b.RIGHT,dist:e.left},{placement:b.LEFT,dist:T-e.right}];L.sort((I,C)=>I.dist-C.dist);for(const{placement:I}of L)if(r(I))return I;return b.BELOW}function m(e,t,o){o==null?e.style.removeProperty(t):e.style.setProperty(t,typeof o=="number"?o+"px":o,"important")}function ue(e,t,o){t=Math.round(t),o=Math.round(o),e.style.transform=`translate3d(${t}px, ${o}px, 0px)`}function Ge(e){if(G.customScrollIntoView){G.customScrollIntoView(e);return}const{scrollPadding:t}=G;if(t&&je(e)===document.scrollingElement){const o=t.top||0,T=t.right||0,E=t.bottom||0,s=t.left||0;let a=0,d=0;const w=e.getBoundingClientRect(),r=Ft(),L=Yt();if(w.top<o?a=w.top-o:w.bottom>L-E&&(a=w.bottom-L+E),w.left<s?d=w.left-s:w.right>r-T&&(d=w.right-r+T),a!=0||d!=0){window.scrollBy({top:a,left:d,behavior:"smooth"});return}}try{e.scrollIntoView({behavior:"smooth",block:"nearest"})}catch(o){console.warn("Userflow.js: scrollIntoView error (falling back to no options).",o),e.scrollIntoView()}}function $e(e){if(!e||e==="0")return{paddingTop:0,paddingRight:0,paddingBottom:0,paddingLeft:0};const t=e.trim().split(" ");if(t.length===1){const o=it(t[0]);return{paddingTop:o,paddingRight:o,paddingBottom:o,paddingLeft:o}}else if(t.length===2){const o=it(t[0]),T=it(t[1]);return{paddingTop:o,paddingRight:T,paddingBottom:o,paddingLeft:T}}else return{paddingTop:it(t[0]),paddingRight:it(t[1]),paddingBottom:it(t[2]),paddingLeft:it(t[3])}}function it(e){const t=parseInt(e,10);return isNaN(t)?0:t}export{io as B,uo as F};
|
|
1
|
+
import{S as we,T as Ee,M as Le,C as ye}from"./vendor.fortawesome.pro-regular-svg-icons.js";import{R as p,r as l}from"./vendor.react.js";import{D as Dt,a as ve,g as Be}from"./stylesheets.js";import"./vendor.core-js.js";import{u as fe}from"./vendor.react-i18next.js";import{F as ne}from"./Frame.js";import{l as Y,q as y,L as ct,F as Me,N,a2 as Oe,a1 as b}from"./userflow.js";import{a as Ie,f as Re}from"./flow-host.styl.js";import{u as _e,b as Ne}from"./use-selector-element-monitoring.js";import{u as Pe}from"./use-window-resize.js";import{S as ke}from"./logomark.js";import{o as Yt}from"./vendor.obj-str.js";import{e as Gt,d as Ht,j as ut,t as je,l as ie,M as ue,q as Ft,u as Ce,p as xe}from"./roots.js";import{c as De}from"./vendor.canvas-confetti.js";(function(){try{var e=typeof window<"u"?window:typeof global<"u"?global:typeof self<"u"?self:{},t=new Error().stack;t&&(e._sentryDebugIds=e._sentryDebugIds||{},e._sentryDebugIds[t]="e00b0b9d-b463-4419-bf93-0d7d9ebed796",e._sentryDebugIdIdentifier="sentry-dbid-e00b0b9d-b463-4419-bf93-0d7d9ebed796")}catch{}})();const uo=({draftMode:e,muted:t,toggleMuted:o,close:g,minimize:L})=>{const{t:s}=fe();return p.createElement("div",{className:"userflowjs-bubble-toolbar"},e&&p.createElement("div",{className:"userflowjs-bubble-draft"},typeof e=="string"?e:"Preview"),o&&p.createElement("button",{className:"userflowjs-bubble-toolbar-button",onClick:o,"aria-label":t?"Unmute":"Mute"},t?p.createElement(Dt,{icon:we}):p.createElement(Dt,{icon:Ee})),L&&p.createElement("button",{"data-testid":"minimize-button",className:"userflowjs-bubble-toolbar-button",onClick:L,"aria-label":"Minimize checklist"},p.createElement(Dt,{icon:Le})),g&&p.createElement("button",{"data-testid":"close-button",className:"userflowjs-bubble-toolbar-button",onClick:g,"aria-label":s("menu.close")},p.createElement(Dt,{icon:ye})))},Fe=new URL("avatar-frame.css",import.meta.url).href;function He(e,t){const o=window.Intercom;l.useEffect(()=>{if(!(!t||!e.autoHideIntercom||typeof o!="function"||Y.autoHide3pDisabled)){try{o("update",{hide_default_launcher:!0})}catch(a){console.warn("Userflow.js: Error when hiding Intercom launcher",a)}return()=>{if(!Y.autoHide3pDisabled)try{o("update",{hide_default_launcher:!1})}catch(a){console.warn("Userflow.js: Error when unhiding Intercom launcher",a)}}}},[o,e.autoHideIntercom,t]);const g=window.$crisp;l.useEffect(()=>{if(!(!t||!e.autoHideCrisp||!g||Y.autoHide3pDisabled)){try{g.push(["do","chat:hide"])}catch(a){console.warn("Userflow.js: Error when hiding Crisp Chat",a)}return()=>{if(!Y.autoHide3pDisabled)try{g.push(["do","chat:show"])}catch(a){console.warn("Userflow.js: Error when unhiding Crisp Chat",a)}}}},[g,e.autoHideCrisp,t]);const L=window.HubSpotConversations;l.useEffect(()=>{if(!(!t||!e.autoHideHubspot||!L||Y.autoHide3pDisabled)){try{L.widget.remove()}catch(a){console.warn("Userflow.js: Error when hiding HubSpot Chat",a)}return()=>{if(!Y.autoHide3pDisabled)try{L.widget.load()}catch(a){console.warn("Userflow.js: Error when unhiding HubSpot Chat",a)}}}},[L,e.autoHideHubspot,t]);const s=window.drift;l.useEffect(()=>{if(!(!t||!e.autoHideDrift||!s||Y.autoHide3pDisabled)){try{s.api.widget.hide()}catch(a){console.warn("Userflow.js: Error when hiding Drift Chat",a)}return()=>{if(!Y.autoHide3pDisabled)try{s.api.widget.show()}catch(a){console.warn("Userflow.js: Error when unhiding Drift Chat",a)}}}},[s,e.autoHideDrift,t])}const Q={PARTICLE_COUNT:400,ANIMATION_DELAY:400,DEFAULT_SPREAD:360,DEFAULT_GRAVITY:1,DEFAULT_TICKS:100,DEFAULT_Z_INDEX:5,TOOLTIP_DECAY:.85,TOOLTIP_START_VELOCITY:30},Ae={particleCount:Q.PARTICLE_COUNT,spread:Q.DEFAULT_SPREAD,gravity:Q.DEFAULT_GRAVITY,ticks:Q.DEFAULT_TICKS,angle:90,zIndex:Q.DEFAULT_Z_INDEX,disableForReducedMotion:!0},Se=e=>{if(!e)return{x:.5,y:.5};const t=e.getBoundingClientRect();return{x:t.left>=0?(t.left+t.width/2)/window.innerWidth:.5,y:t.top>=0?(t.top+t.height/2)/window.innerHeight:.5}},Ue=({bubbleFrame:e,isBubbleVisible:t,theme:o,stepType:g,onAnimationComplete:L,confettiDelay:s,zIndex:a})=>{const[d,T]=l.useState(!1);return l.useEffect(()=>{if(!t||!d||!o.confettiColors||o.confettiColors.length===0)return;const u=setTimeout(()=>{try{const E=Se(e),v={...Ae,colors:o.confettiColors||void 0,origin:E,zIndex:a??Q.DEFAULT_Z_INDEX,...g===y.TOOLTIP&&{decay:Q.TOOLTIP_DECAY,startVelocity:Q.TOOLTIP_START_VELOCITY}};De(v)}catch(E){console.warn("Error launching confetti:",E)}finally{L?.(),T(!1)}},s||Q.ANIMATION_DELAY);return()=>clearTimeout(u)},[t,d,o.confettiColors,e,g,L,s,a]),{startConfetti:T}},Xt=16,Rt=20,co=({company:e,theme:t,position:o,absoluteWidth:g,absoluteHeight:L,stepKey:s,stepAppearance:a,width:d,backgroundImageUrl:T,tooltipSelector:u,allowMissingTooltipTarget:E,tooltipPlacement:v,backdrop:C,tooltipTargetBlocked:W,backdropPadding:tt,zIndex:P,onTooltipTargetClick:B,onTooltipTargetMissingChange:x,onModalBackdropClick:K,onVisibleChange:et,speaking:D,noIframe:R,MadeWithUserflow:c,minimizeOnAvatarClick:F,autoHide3pEnabled:O,bubbleFrameRootRef:M,frameWrapperHtmlAttributes:_,rootChildren:k,children:r,isModalAnnouncement:f,confettiEnabled:ot})=>{const U=o||"absolute",H=v||null,G=tt||"0",at=c||We,rt=Ie(),ft=U==="fixed"?P??rt+1:1,J=ft-1,_t=ft-2,{i18n:Nt}=fe(),nt=Nt.dir(),dt=l.useRef(null),ht=l.useRef(null),lt=l.useRef(null),[X,Pt]=l.useState(null),gt=l.useRef(null),Tt=l.useRef(null),wt=l.useRef(null),Et=l.useRef(null),Lt=l.useRef(null),yt=l.useRef(null),vt=l.useRef(null),Bt=l.useRef(null),Mt=l.useRef(null);l.useLayoutEffect(()=>{const i=dt.current.style;i.animation="none",i.visibility="hidden",i.position="absolute",i.top="-99999px",i.left="-99999px"},[]);const{loaded:kt}=ve(window,Re,t),[jt,At]=l.useState(!1),[St,w]=l.useState(!1),n=kt&&jt&&St;let[A,st]=l.useState(!1);a!==y.BUBBLE&&(F=!1,A=!1),l.useEffect(()=>{st(!1)},[s]);const I=l.useRef({appearance:null,width:null,theme:t,bubbleFrameHeight:0,backdrop:!1,backdropPadding:"0",prevTooltipTargetParams:null,tooltipTargetParams:null,desiredTooltipPlacement:null,tooltipPlacement:null,lastReportedTooltipTargetMissing:!1,tooltipTargetMissing:!1,tooltipTargetMissingTimeout:void 0,stepKeyScrolledIntoView:void 0,targetScrolledIntoView:null}),[$,j]=l.useState(null),Z=$!=null&&n;l.useEffect(()=>{et&&et(Z)},[et,Z]);const bt=l.useCallback(i=>{I.current.lastReportedTooltipTargetMissing!==i&&(I.current.lastReportedTooltipTargetMissing=i,x&&x(i))},[x]),z=l.useCallback(({forceAppearanceLayout:i,forceUpdatePosition:S}={})=>{const pt=dt.current,xt=ht.current,It=lt.current,Zt=Tt.current,qt=gt.current,Kt=wt.current,Jt=Et.current,Qt=Lt.current,te=yt.current,ee=vt.current,oe=Bt.current,ae=Mt.current;if(!pt||!xt||!It||!X||!Zt||!qt||!Kt||!Jt||!Qt||!te||!ee||!oe||!ae||!n)return;const h=I.current,{tooltipTargetParams:Ut}=h;xe();let V=a,le=!1;V===y.TOOLTIP&&!E&&!Ut&&(h.tooltipTargetMissing?(V=y.BUBBLE,le=!0):V=null);const se=V!==h.appearance,he=d!==h.width;if((i||se||he||t!==h.theme||C!=h.backdrop||G!=h.backdropPadding||H!==h.desiredTooltipPlacement)&&(h.appearance=V,h.width=d,h.theme=t,h.backdrop=C,h.backdropPadding=G,h.desiredTooltipPlacement=H,S=!0,ze({layoutState:h,width:d,position:U,absoluteWidth:g,root:pt,bubble:xt,bubbleFrameRoot:X,avatar:Zt,avatarNotch:qt,modalBackdrop:ae,dir:nt})),!R){const q=X.offsetHeight,Vt=Gt(),Wt=Ht()<800?0:Xt,ge=t.avatarType===ct.NONE?0:V===y.BUBBLE?Rt+t.avatarSize:V===y.MODAL?t.avatarSize/2:0,re=Vt-2*Wt-ge,zt=Math.min(q,re);if(V&&zt!==h.bubbleFrameHeight){if(h.bubbleFrameHeight=zt,m(It,"height",ut(zt)),je(It)&&It.contentDocument){const Te=It.contentDocument.documentElement;Te.style.overflowY=q<=re?"hidden":"scroll"}S=!0}}if(S&&V){let q=se;if(V===y.TOOLTIP){const Vt=h.tooltipTargetParams&&h.tooltipTargetParams.targetEl,Wt=h.prevTooltipTargetParams&&h.prevTooltipTargetParams.targetEl;Vt!==Wt&&(q=!0)}h.prevTooltipTargetParams=h.tooltipTargetParams,Ye({layoutState:h,animateIn:q,position:U,absoluteWidth:g,absoluteHeight:L,desiredTooltipPlacement:H,root:pt,bubble:xt,tooltipNotch:Kt,tooltipBackdrop:Jt,tooltipBlockTop:Qt,tooltipBlockRight:te,tooltipBlockBottom:ee,tooltipBlockLeft:oe,dir:nt})}if(V===y.TOOLTIP){const q=Ut&&Ut.targetEl;q&&h.stepKeyScrolledIntoView!==s&&h.targetScrolledIntoView!==q&&(h.stepKeyScrolledIntoView=s,h.targetScrolledIntoView=q,Xe(q))}else h.stepKeyScrolledIntoView=void 0,h.targetScrolledIntoView=null;bt(le),j(V)},[n,X,s,a,d,t,U,g,L,E,H,C,G,R,bt,nt]),Ot=l.useRef(z);Ot.current=z;const $t=l.useRef(!1);l.useEffect(()=>{const i=()=>{$t.current=!0};return window.addEventListener("pagehide",i),()=>window.removeEventListener("pagehide",i)},[]);const Ct=()=>{window.clearTimeout(I.current.tooltipTargetMissingTimeout),I.current.tooltipTargetMissingTimeout=void 0};l.useEffect(()=>Ct,[]);const de=l.useCallback(()=>{const i=I.current;if(i.tooltipTargetParams=null,E||(i.tooltipPlacement=null),a!==y.TOOLTIP){Ct(),i.tooltipTargetMissing=!1;return}if(!E&&!i.tooltipTargetMissingTimeout){i.tooltipTargetMissing=!1;const S=u&&!ie(u)&&u.type===Me.AUTO&&!u.autoData?1:parseFloat(t.tooltipMissingToleranceSeconds)*1e3;i.tooltipTargetMissingTimeout=window.setTimeout(()=>{if(!$t.current){if(u&&!ie(u)){let pt=u.autoData;if(u.autoData)try{pt=JSON.parse(u.autoData)}catch{}console.warn(`Userflow.js: Tooltip target not found on page.
|
|
2
|
+
`,{type:u.type,autoData:pt,excludeText:u.excludeText,precision:u.precision,text:u.text,css:u.css})}Ct(),i.tooltipTargetMissing=!0,Ot.current()}},S)}Ot.current()},[a,E,u,t.tooltipMissingToleranceSeconds]),be=l.useCallback(i=>{const S=I.current;Ct(),S.tooltipTargetParams&&S.tooltipTargetParams.targetEl!==i.targetEl&&(S.tooltipPlacement=null),S.tooltipTargetParams=i,z({forceUpdatePosition:!0})},[z]);_e({selector:a===y.TOOLTIP&&u||null,targetMoved:be,targetLost:de,onTargetClick:B});const me=l.useCallback(()=>z({forceAppearanceLayout:!0}),[z]);Pe(me),l.useEffect(()=>{if(!X||R||typeof ue!="function")return;let i;const S=new ue(()=>{i||(i=window.requestAnimationFrame(()=>{i=void 0,Ot.current()}))});return S.observe(X,{childList:!0,attributes:!0,subtree:!0}),()=>{S.disconnect(),i&&window.cancelAnimationFrame(i)}},[X,R]);const{startConfetti:pe}=Ue({stepType:a,theme:t,bubbleFrame:lt.current,isBubbleVisible:Z,confettiDelay:400,zIndex:_t});l.useEffect(()=>{Z&&ot&<.current&&pe(!0)},[ot,s,Z]),l.useLayoutEffect(()=>{Ot.current()}),l.useLayoutEffect(()=>{U==="absolute"&&z({forceAppearanceLayout:!0})},[U,g,L]);const mt=i=>{i.preventDefault(),i.stopPropagation()};return He(t,!!O&&$===y.BUBBLE),p.createElement("div",{ref:dt,"data-testid":"flow-chrome",className:"userflowjs-flow-chrome userflowjs-theme-root",style:Be(t),dir:nt},p.createElement("div",{className:"userflowjs-bubble",ref:ht,style:{zIndex:ft}},p.createElement("div",{className:Yt({"userflowjs-bubble-outline":!0,[`userflowjs-bubble-outline--bubble-placement-${(t.bubblePlacement||"").toLowerCase().replace(/_/,"-")}`]:!0,"userflowjs-bubble-outline--minimizable":!!F,"userflowjs-bubble-outline--minimized":A})},p.createElement("div",{className:"userflowjs-bubble__frame-wrapper",..._},p.createElement(ne,{className:"userflowjs-bubble__frame",elRef:lt,stylesheet:Ne,theme:t,onStylesheetsLoad:At,noIframe:R,title:a.toLowerCase()},p.createElement("div",{className:"userflowjs-bubble-frame-root",ref:i=>{M&&M(i),Pt(i)},style:T?{backgroundImage:`url("${encodeURI(T)}")`}:void 0},r,e.flowBranding&&!f&&p.createElement("div",{className:"userflowjs-bubble-made-with-userflow"},p.createElement("div",{className:"userflowjs-bubble-made-with-userflow__absolute"},p.createElement(at,{company:e},p.createElement(ke,null),p.createElement("div",null,"Made with Userflow"))))))),p.createElement("div",{ref:gt,className:"userflowjs-bubble__avatar-notch"})),p.createElement(ne,{className:Yt({"userflowjs-bubble__avatar":!0,"userflowjs-bubble__avatar--minimizable":!!F,"userflowjs-bubble__avatar--speaking":!!D}),elRef:Tt,stylesheet:Fe,theme:t,onStylesheetsLoad:w,noIframe:R,ariaHidden:!0,title:a.toLowerCase()},p.createElement("div",{className:Yt({"userflowjs-avatar-frame-root":!0,"userflowjs-avatar-frame-root--minimizable":!!F}),onClick:F?()=>st(i=>!i):void 0},p.createElement(Ve,{theme:t}))),p.createElement("div",{ref:wt,className:"userflowjs-bubble__tooltip-notch"})),p.createElement("div",{ref:Et,className:"userflowjs-tooltip-backdrop",onMouseDown:mt,style:{zIndex:J,pointerEvents:W?void 0:"none"}}),p.createElement("div",{ref:Lt,className:"userflowjs-tooltip-block",onMouseDown:mt,style:{zIndex:J}}),p.createElement("div",{ref:yt,className:"userflowjs-tooltip-block",onMouseDown:mt,style:{zIndex:J}}),p.createElement("div",{ref:vt,className:"userflowjs-tooltip-block",onMouseDown:mt,style:{zIndex:J}}),p.createElement("div",{ref:Bt,className:"userflowjs-tooltip-block",onMouseDown:mt,style:{zIndex:J}}),p.createElement("div",{ref:Mt,className:"userflowjs-modal-backdrop",onMouseDown:mt,onClick:K,style:{zIndex:J}}),k&&k({visible:Z,bubbleFrame:lt.current}))},Ve=({theme:e})=>{const t="https://js.userflow.com/cartoon-avatars-no-bg/";let o;return e.avatarType===ct.ASSET&&e.avatarAsset?o=e.avatarAsset.assetUrl:e.avatarType===ct.CARTOON&&e.avatarName?o=t+e.avatarName+".svg?3":e.avatarType===ct.URL&&e.avatarUrl?o=e.avatarUrl:o=t+"none.svg",p.createElement("img",{src:o,alt:""})},We=({company:e,children:t})=>p.createElement("a",{href:"https://userflow.com/?utm_source=made-with-userflow&utm_medium=link&utm_campaign=made-with-userflow-"+e.slug,target:"_blank",rel:"noopener noreferrer"},t);function ze({layoutState:{appearance:e,theme:t,backdrop:o,tooltipTargetMissing:g},width:L,position:s,absoluteWidth:a,root:d,bubble:T,bubbleFrameRoot:u,avatar:E,avatarNotch:v,modalBackdrop:C,dir:W}){const tt=s==="absolute"?a||1024:ut(Ht()),{avatarSize:P,bubblePlacement:B}=t;let x=t.bubbleWidth,K=null,et=null,D=`userflowjs-bubble-frame-root userflowjs-bubble-frame-root--appearance-${e?.toLowerCase()}`,R="hidden",c=null,F=null,O=null,M=null,_="userflowjs-bubble__avatar-notch",k="hidden",r=null,f=null,ot=null,U=null,H="userflowjs-modal-backdrop";switch((e===y.MODAL||!g&&e===y.BUBBLE&&o)&&(H+=" userflowjs-modal-backdrop--visible"),e){case y.BUBBLE:if(t.avatarType!==ct.NONE){R="",k="",B===N.TOP_LEFT||B===N.TOP_CENTER||B===N.TOP_RIGHT?(K=P+Rt,c=0,r=-2*Rt,_+=" userflowjs-bubble__avatar-notch--top"):(et=P+Rt,O=0,ot=-2*Rt,_+=" userflowjs-bubble__avatar-notch--bottom");const at=B===N.TOP_LEFT||B===N.TOP_CENTER||B===N.BOTTOM_LEFT||B===N.BOTTOM_CENTER||B===N.CENTER;W==="ltr"&&at||W==="rtl"&&!at?(M=0,U=P,_+=" userflowjs-bubble__avatar-notch--left"):(F=0,f=P,_+=" userflowjs-bubble__avatar-notch--right")}break;case y.MODAL:x=t.modalWidth,t.avatarType!==ct.NONE&&(R="",M=`calc(50% - ${P/2}px)`,c=-P/2);break;case y.TOOLTIP:x=t.tooltipWidth;break}L!=null&&(x=L),x=Math.min(x,tt-2*Xt),d.classList.toggle("userflowjs-flow-chrome--position-absolute",s==="absolute"),d.classList.toggle("userflowjs-flow-chrome--position-relative",s==="relative"),d.classList.toggle("userflowjs-flow-chrome--position-fixed",s==="fixed"),d.classList.toggle("userflowjs-flow-chrome--appearance-modal",e===y.MODAL);const G=e!=null&&e!==y.HIDDEN;d.style.position="",d.style.top="",d.style.left="",d.style.visibility=G?"":"hidden",d.style.animation=G?"":"none",m(T,"width",ut(x)),m(T,"padding-top",K),m(T,"padding-bottom",et),u.className=D,m(E,"width",ut(t.avatarSize)),m(E,"height",ut(t.avatarSize)),E.style.visibility=R,m(E,"top",c),m(E,"right",F),m(E,"bottom",O),m(E,"left",M),v.className=_,v.style.visibility=k,m(v,"top",r),m(v,"right",f),m(v,"bottom",ot),m(v,"left",U),C.className=H}function Ye({layoutState:e,animateIn:t,position:o,absoluteWidth:g,absoluteHeight:L,desiredTooltipPlacement:s,root:a,bubble:d,tooltipNotch:T,tooltipBackdrop:u,tooltipBlockTop:E,tooltipBlockRight:v,tooltipBlockBottom:C,tooltipBlockLeft:W,dir:tt}){const{appearance:P,theme:B,tooltipTargetParams:x,backdrop:K,backdropPadding:et}=e,{bubblePlacement:D}=B,R=Xt,c=B.tooltipNotchSize,F=10,{width:O,height:M}=d.getBoundingClientRect(),_=o==="absolute"?g||1024:ut(Ht()),k=o==="absolute"?L||768:ut(Gt());let r=0,f=0,ot="userflowjs-bubble__tooltip-notch",U="hidden",H=null,G=null,at=null,rt=null,ft="userflowjs-tooltip-backdrop",J=null,_t=null,Nt=null,nt=null,dt=null,ht=null,lt=null,X=null,Pt="userflowjs-tooltip-block userflowjs-tooltip-block--top",gt=null,Tt=null,wt="userflowjs-tooltip-block userflowjs-tooltip-block--right",Et=null,Lt=null,yt="userflowjs-tooltip-block userflowjs-tooltip-block--bottom",vt=null,Bt=null,Mt="userflowjs-tooltip-block userflowjs-tooltip-block--left",kt=null,jt=null;switch(P){case y.BUBBLE:{D===N.TOP_LEFT||D===N.BOTTOM_LEFT?r=B.bubbleX:D===N.TOP_CENTER||D===N.CENTER||D===N.BOTTOM_CENTER?r=(_-O)/2:r=_-O-B.bubbleX,D===N.TOP_LEFT||D===N.TOP_CENTER||D===N.TOP_RIGHT?f=B.bubbleY:D===N.CENTER?f=(k-M)/2:f=k-M-B.bubbleY,tt==="rtl"&&(r=_-r-O),r=Math.max(0,Math.min(_-O,r)),f=Math.max(0,Math.min(k-M,f));break}case y.MODAL:{let w=R;B.avatarType!==ct.NONE&&(w+=B.avatarSize/2),r=R+(_-R*2-O)/2,f=w+(k-w-R-M)/2;break}case y.TOOLTIP:{let w;if(x){let{targetRect:n,viewportClipRect:A}=x;if(o==="absolute"){const j=a.offsetParent.getBoundingClientRect();A={top:0,right:_,bottom:k,left:0},n={top:n.top-j.top,right:n.right-j.left,bottom:n.bottom-j.top,left:n.left-j.left,width:n.width,height:n.height}}let st=0;if(K){const{paddingTop:j,paddingRight:Z,paddingBottom:bt,paddingLeft:z}=$e(et);n={top:n.top-j,right:n.right+Z,bottom:n.bottom+bt,left:n.left-z,width:n.width+z+Z,height:n.height+j+bt},st=Math.min(j,Z,bt,z)}const I=n,$=B.backdropHighlightType==Oe.OUTSIDE?B.backdropHighlightSpread:0;if(K&&$&&(n={top:n.top-$,right:n.right+$,bottom:n.bottom+$,left:n.left-$,width:n.width+2*$,height:n.height+2*$}),w=Ge({targetRect:n,bubbleWidth:O,bubbleHeight:M,containerWidth:_,containerHeight:k,viewportClipRect:A,tooltipNotchSize:c,currentTooltipPlacement:e.tooltipPlacement,desiredTooltipPlacement:s}),w===b.BELOW||w===b.ABOVE?(r=n.left+n.width/2-O/2,r=Math.max(R,Math.min(_-O-R,r)),rt=Math.max(F,Math.min(O-F-c*2,n.left+n.width/2-c-r)),w===b.BELOW?H=-c*2:at=-c*2):w===b.RIGHT?(r=n.right+c,r=Math.max(r,A.left+c),r=Math.min(r,A.right+c),r=Math.max(r,c),r=Math.min(r,_-O)):(r=n.left-c-O,r=Math.max(r,A.left-O-c),r=Math.min(r,A.right-O-c),r=Math.max(r,0),r=Math.min(r,_-O-c)),w===b.LEFT||w===b.RIGHT?(f=n.top+n.height/2-M/2,f=Math.max(R,Math.min(k-M-R,f)),H=Math.max(F,Math.min(M-F-c*2,n.top+n.height/2-c-f)),w===b.LEFT?G=-c*2:rt=-c*2):w===b.BELOW?(f=n.bottom+c,f=Math.max(f,A.top+c),f=Math.min(f,A.bottom+c),f=Math.max(f,c),f=Math.min(f,k-M)):(f=n.top-c-M,f=Math.max(f,A.top-M-c),f=Math.min(f,A.bottom-M-c),f=Math.max(f,0),f=Math.min(f,k-M-c)),K){const j=window.getComputedStyle(x.targetEl);J=Math.max(0,I.top),_t=Math.max(0,_-I.right),Nt=Math.max(0,k-I.bottom),nt=Math.max(0,I.left),dt=Math.max(0,Ft(j.borderTopLeftRadius)+st),ht=Math.max(0,Ft(j.borderTopRightRadius)+st),lt=Math.max(0,Ft(j.borderBottomRightRadius)+st),X=Math.max(0,Ft(j.borderBottomLeftRadius)+st),gt=Math.max(0,I.right),Tt=Math.max(0,I.top),Et=Math.max(0,I.right),Lt=Math.max(0,I.bottom),vt=Math.max(0,I.left),Bt=Math.max(0,I.bottom),kt=Math.max(0,I.left),jt=Math.max(0,I.top)}}else w=s||b.BELOW,(w===b.BELOW||w===b.ABOVE)&&(rt=O/2-c,w===b.BELOW?H=-c*2:at=-c*2),(w===b.LEFT||w===b.RIGHT)&&(H=M/2-c,w===b.LEFT?G=-c*2:rt=-c*2);e.tooltipPlacement=w,ot+=` userflowjs-bubble__tooltip-notch--${w.toLowerCase()}`,U="",K&&(ft+=" userflowjs-tooltip-backdrop--visible",Pt+=" userflowjs-tooltip-block--visible",wt+=" userflowjs-tooltip-block--visible",yt+=" userflowjs-tooltip-block--visible",Mt+=" userflowjs-tooltip-block--visible");break}}d.style.transition="";let At=r,St=f;if(t&&(d.style.opacity="0",P===y.TOOLTIP))switch(e.tooltipPlacement){case b.BELOW:f+=24;break;case b.ABOVE:f-=24;break;case b.RIGHT:r+=24;break;case b.LEFT:r-=24;break}if(o!=="relative"&&ce(d,r,f),T.className=ot,T.style.visibility=U,m(T,"top",H),m(T,"right",G),m(T,"bottom",at),m(T,"left",rt),u.className=ft,m(u,"top",J),m(u,"right",_t),m(u,"bottom",Nt),m(u,"left",nt),m(u,"border-top-left-radius",dt),m(u,"border-top-right-radius",ht),m(u,"border-bottom-right-radius",lt),m(u,"border-bottom-left-radius",X),E.className=Pt,m(E,"width",gt),m(E,"height",Tt),v.className=wt,m(v,"left",Et),m(v,"height",Lt),C.className=yt,m(C,"left",vt),m(C,"top",Bt),W.className=Mt,m(W,"width",kt),m(W,"top",jt),t){d.offsetWidth;const w="opacity 250ms linear";P===y.TOOLTIP?d.style.transition=`${w}, transform 500ms cubic-bezier(0.25, 0.8, 0.5, 1)`:d.style.transition=w,d.style.opacity="1",o!=="relative"&&ce(d,At,St)}}function Ge({targetRect:e,bubbleWidth:t,bubbleHeight:o,containerWidth:g,containerHeight:L,viewportClipRect:s,tooltipNotchSize:a,currentTooltipPlacement:d,desiredTooltipPlacement:T}){if(e.bottom<=s.top)return o+a<=L-s.top?b.BELOW:b.ABOVE;if(e.top>=s.bottom)return o+a<=s.bottom?b.ABOVE:b.BELOW;if(e.right<=s.left)return t+a<=g-s.left?b.RIGHT:b.LEFT;if(e.left>=s.right)return t+a<=s.right?b.LEFT:b.RIGHT;const u=v=>{const C=e.left+e.width/2,W=C>=s.left&&C<=s.right,tt=e.top+e.height/2,P=tt>=s.top&&tt<=s.bottom;switch(v){case b.BELOW:return L-e.bottom>o+a&&W;case b.ABOVE:return e.top>o+a&&W;case b.RIGHT:return g-e.right>t+a&&P;case b.LEFT:return e.left>t+a&&P}};if(T&&u(T))return T;if(d&&u(d))return d;const E=[{placement:b.BELOW,dist:e.top},{placement:b.ABOVE,dist:L-e.bottom},{placement:b.RIGHT,dist:e.left},{placement:b.LEFT,dist:g-e.right}];E.sort((v,C)=>v.dist-C.dist);for(const{placement:v}of E)if(u(v))return v;return b.BELOW}function m(e,t,o){o==null?e.style.removeProperty(t):e.style.setProperty(t,typeof o=="number"?o+"px":o,"important")}function ce(e,t,o){t=Math.round(t),o=Math.round(o),e.style.transform=`translate3d(${t}px, ${o}px, 0px)`}function Xe(e){if(Y.customScrollIntoView){Y.customScrollIntoView(e);return}const{scrollPadding:t}=Y;if(t&&Ce(e)===document.scrollingElement){const o=t.top||0,g=t.right||0,L=t.bottom||0,s=t.left||0;let a=0,d=0;const T=e.getBoundingClientRect(),u=Ht(),E=Gt();if(T.top<o?a=T.top-o:T.bottom>E-L&&(a=T.bottom-E+L),T.left<s?d=T.left-s:T.right>u-g&&(d=T.right-u+g),a!=0||d!=0){window.scrollBy({top:a,left:d,behavior:"smooth"});return}}try{e.scrollIntoView({behavior:"smooth",block:"nearest"})}catch(o){console.warn("Userflow.js: scrollIntoView error (falling back to no options).",o),e.scrollIntoView()}}function $e(e){if(!e||e==="0")return{paddingTop:0,paddingRight:0,paddingBottom:0,paddingLeft:0};const t=e.trim().split(" ");if(t.length===1){const o=it(t[0]);return{paddingTop:o,paddingRight:o,paddingBottom:o,paddingLeft:o}}else if(t.length===2){const o=it(t[0]),g=it(t[1]);return{paddingTop:o,paddingRight:g,paddingBottom:o,paddingLeft:g}}else return{paddingTop:it(t[0]),paddingRight:it(t[1]),paddingBottom:it(t[2]),paddingLeft:it(t[3])}}function it(e){const t=parseInt(e,10);return isNaN(t)?0:t}export{uo as B,co as F};
|
|
3
3
|
//# sourceMappingURL=FlowChrome.js.map
|
package/LauncherApp.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{R as i,r as u}from"./vendor.react.js";import{
|
|
1
|
+
import{R as i,r as u}from"./vendor.react.js";import{Q as L,X as l,Y as a,q as te,Z as re,$ as p,a0 as K,a1 as N}from"./userflow.js";import{u as ne,m as oe,d as ae,S as ce,R as se,h as le,r as ie}from"./use-selector-element-monitoring.js";import{u as ue,i as de}from"./client-context.js";import{o as U}from"./vendor.obj-str.js";import{a as fe,b as he,g as Ee,D as Te,u as me}from"./stylesheets.js";import{w as pe,f as be,L as ge,S as Ce}from"./flow-host.styl.js";import"./vendor.core-js.js";import{F as Re,B as Le}from"./FlowChrome.js";import{g as we}from"./flow-condition-types.js";import{T as Ae}from"./Trigger.js";import{r as V}from"./roots.js";import"./vendor.object-assign.js";import"./vendor.phoenix.js";import"./vendor.uuid.js";import"./vendor.fortawesome.pro-solid-svg-icons.js";import"./vendor.react-i18next.js";import"./vendor.babel.runtime.js";import"./vendor.i18next.js";import"./vendor.fortawesome.pro-regular-svg-icons.js";import"./Frame.js";import"./vendor.react-dom.js";import"./vendor.scheduler.js";import"./use-window-resize.js";import"./logomark.js";import"./vendor.canvas-confetti.js";import"./vendor.date-fns.js";(function(){try{var t=typeof window<"u"?window:typeof global<"u"?global:typeof self<"u"?self:{},c=new Error().stack;c&&(t._sentryDebugIds=t._sentryDebugIds||{},t._sentryDebugIds[c]="d5b1f337-ba91-42a3-a20c-772f2b0859d8",t._sentryDebugIdIdentifier="sentry-dbid-d5b1f337-ba91-42a3-a20c-772f2b0859d8")}catch{}})();const ve=i.forwardRef(({appearance:t,icon:c,buttonText:d,theme:T,noAnimation:E,noFixed:w,onClick:e,onMouseEnter:s,onMouseLeave:o,noPointerEvents:n,zIndex:m},r)=>{const{loaded:C}=fe(window,be,T),k=T&&t===L.BUTTON?T:null,{loaded:H}=he(window,k),I={"userflowjs-launcher":!0,"userflowjs-launcher--activate-on-click":!!e,"userflowjs-fixed-widget":!w},f={ref:r,style:{...Ee(T),zIndex:m||pe(ge),pointerEvents:n?"none":void 0},onClick:e,onMouseEnter:s,onMouseLeave:o};if(!C||!H)return null;switch(t){case L.BEACON:return i.createElement("div",{className:U({...I,"userflowjs-beacon":!0,"userflowjs-beacon--pulse":!E,"userflowjs-beacon--pulse-still":!!E}),...f},i.createElement("div",{className:"userflowjs-beacon__ring"}),i.createElement("div",{className:"userflowjs-beacon__ring"}));case L.BUTTON:return i.createElement("div",{className:U({...I,"userflowjs-launcher--button":!0}),...f},d);case L.HIDDEN:return null;case L.ICON:return i.createElement("div",{className:U({...I,"userflowjs-launcher--icon":!0}),...f},i.createElement(Te,{icon:c||"solid/info-circle",size:T.launcherIconSize}))}}),Ie="userflowjs-fixed-widget--visible",nt=({session:t,active:c})=>{const d=ue(),{version:T}=t,E=t.id,w=t.flow.id,e=t.version.launcher,[s,o]=u.useState(null),n=me(T.theme),m=t.locale?t.locale.standardLocaleId:n.languageId;u.useEffect(()=>{de.changeLanguage(m)},[m]);const{activateOn:r}=e,C=e.activeWhileTooltipHover||e.buttons.length>0,k=e.hiddenWhileActive&&r!==l.LAUNCHER_HOVER,H=!c||!k,I=r===l.LAUNCHER_CLICK||r===l.TARGET_CLICK||r===l.LAUNCHER_TARGET_CLICK||C,f=u.useRef({}),A=u.useCallback(()=>{let h=null;const{targetEl:b,clipEl:g,viewportClipRect:F}=f.current,S=s;S&&(b&&g&&F&&(h=ke({targetEl:b,subjectEl:S,clipEl:g,viewportClipRect:F,position:e.targetPosition,subjectAnchor:e.appearance===L.BEACON?"center":"side"})),ie(()=>{Oe(S,h)}));let M;e.appearance===L.HIDDEN?M=!!b:M=!!h,M&&!f.current.seenTriggered&&!E&&(f.current.seenTriggered=!0,d.launcherSeen(w))},[s,e,d,E,w]);u.useLayoutEffect(()=>{A()},[A]);const _=u.useRef(!1),y=u.useRef(!1),P=u.useRef(!1),x=u.useRef(),W=()=>{_.current=!0,v()},z=()=>{_.current=!1,v()},Z=()=>{y.current=!0,v()},$=()=>{y.current=!1,v()},X=()=>{P.current=!0,v()},q=()=>{P.current=!1,v()},v=()=>{O();const h=250;x.current=window.setTimeout(()=>B.current(),h)},O=u.useCallback(()=>{window.clearTimeout(x.current)},[]),G=()=>{if(r===l.LAUNCHER_CLICK||r===l.TARGET_CLICK||r===l.LAUNCHER_TARGET_CLICK)return;const h=r===l.LAUNCHER_HOVER||r===l.LAUNCHER_TARGET_HOVER,b=r===l.TARGET_HOVER||r===l.LAUNCHER_TARGET_HOVER;_.current&&(!k||!c)&&h||y.current&&b||P.current&&C?D():R()},B=u.useRef(G);B.current=G;const D=()=>{c||(O(),e.tooltipEnabled?d.activateLauncher(t):(d.activateLauncher(t),d.deactivateLauncher(t)),le(d,t,e.actions))},R=u.useCallback(()=>{c&&(O(),d.deactivateLauncher(t))},[c,d,t,O]),j=()=>{c?R():D()},Q=u.useCallback(({targetEl:h,clipEl:b,viewportClipRect:g})=>{f.current.targetEl=h,f.current.clipEl=b,f.current.viewportClipRect=g,A()},[A]),Y=u.useCallback(()=>{f.current.targetEl=void 0,f.current.clipEl=void 0,A(),R()},[A,R]);ne({selector:e.targetSelector,targetMoved:Q,targetLost:Y,onTargetMouseEnter:Z,onTargetMouseLeave:$,onTargetClick:r===l.TARGET_CLICK||r===l.LAUNCHER_TARGET_CLICK?j:void 0}),u.useEffect(()=>{if(!c)return;const h=b=>{const g=b.target;s&&s.contains(g)||(r===l.TARGET_CLICK||r===l.LAUNCHER_TARGET_CLICK)&&f.current.targetEl&&f.current.targetEl.contains(g)||R()};return window.addEventListener("click",h,{capture:!0}),()=>window.removeEventListener("click",h,{capture:!0})},[c,r,s,R]);const J=Ne(e.tooltipPosition.side===a.AUTO?e.targetPosition:e.tooltipPosition),ee=u.useMemo(()=>e.content&&oe(ae(e.content),{buttons:e.buttons}),[e.content,e.buttons]);return i.createElement(ce.Provider,{value:t},H&&i.createElement(ve,{ref:o,appearance:e.appearance,icon:e.icon,buttonText:e.buttonText,theme:n,onClick:r===l.LAUNCHER_CLICK||r===l.LAUNCHER_TARGET_CLICK?j:void 0,onMouseEnter:W,onMouseLeave:z,noPointerEvents:r===l.TARGET_HOVER,zIndex:e.zIndex}),c&&i.createElement(Ce,null,i.createElement(Re,{company:t.flow.company,theme:n,position:"fixed",stepAppearance:te.TOOLTIP,width:e.tooltipWidth,tooltipSelector:e.tooltipAnchor===re.TARGET?f.current.targetEl:s,tooltipPlacement:J,frameWrapperHtmlAttributes:{onMouseEnter:X,onMouseLeave:q},rootChildren:()=>i.createElement(i.Fragment,null,e.triggers.map(h=>i.createElement(Ae,{key:h.id,trigger:h})))},i.createElement(Le,{draftMode:t.draftMode,close:I?R:void 0}),i.createElement("div",{className:"userflowjs-bubble-content"},i.createElement(se,{doc:ee,lookupAttribute:we(t.data),buttons:e.buttons})))))};function ke({targetEl:t,subjectEl:c,clipEl:d,viewportClipRect:T,position:E,subjectAnchor:w}){const e=V(t);if(e.width===0||e.height===0)return null;const s=c.getBoundingClientRect();let o=0,n=0,{side:m,align:r}=E;switch(m===a.AUTO&&(m=a.TOP,r=p.END),m){case a.TOP:n=e.top;break;case a.BOTTOM:n=e.bottom;break;case a.LEFT:o=e.left;break;case a.RIGHT:o=e.right;break}switch(m){case a.TOP:case a.BOTTOM:switch(r){case p.START:o=e.left;break;case p.CENTER:o=e.left+e.width/2;break;case p.END:o=e.right;break}break;case a.LEFT:case a.RIGHT:switch(r){case p.START:n=e.top;break;case p.CENTER:n=e.top+e.height/2;break;case p.END:n=e.bottom;break}break}switch(E.xUnit===K.PERCENT?o+=E.xOffset/100*e.width:o+=E.xOffset,E.yUnit===K.PERCENT?n+=E.yOffset/100*e.height:n+=E.yOffset,w){case"center":o-=s.width/2,n-=s.height/2;break;case"side":switch(m){case a.TOP:n-=s.height;break;case a.LEFT:o-=s.width;break}switch(m){case a.TOP:case a.BOTTOM:switch(r){case p.CENTER:o-=s.width/2;break;case p.END:o-=s.width;break}break;case a.LEFT:case a.RIGHT:switch(r){case p.CENTER:n-=s.height/2;break;case p.END:n-=s.height;break}break}}if(o+s.width<T.left||o>T.right||n+s.height<T.top||n>T.bottom)return null;const C=V(d);return o=Math.max(o,C.left-d.scrollLeft),n=Math.max(n,C.top-d.scrollTop),o=Math.round(o),n=Math.round(n),{left:o,top:n}}function Oe(t,c){t.classList.toggle(Ie,c!=null),c&&(t.style.transform=`translate3d(${c.left}px, ${c.top}px, 0)`)}function Ne(t){switch(t.side){case a.AUTO:return null;case a.TOP:return N.ABOVE;case a.BOTTOM:return N.BELOW;case a.LEFT:return N.LEFT;case a.RIGHT:return N.RIGHT}}export{nt as LauncherApp,nt as default};
|
|
2
2
|
//# sourceMappingURL=LauncherApp.js.map
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{r as u,R as n}from"./vendor.react.js";import{ab as _,ac as A,u as Y}from"./userflow.js";import{u as _e}from"./client-context.js";import{a5 as q,a6 as Q,a7 as ke,a8 as P,a9 as $,aa as V,ab as X,ac as Z}from"./vendor.fortawesome.pro-regular-svg-icons.js";import{p as we}from"./vendor.dompurify.js";import{m as Ie}from"./vendor.marked.js";import{o as y}from"./vendor.obj-str.js";import{A as Ce,d as Se,G as je}from"./ResourceCenterApp.js";import{f as ae,R as re}from"./use-selector-element-monitoring.js";import{D as W}from"./stylesheets.js";import{U as oe}from"./roots.js";import{r as ee}from"./vendor.react-dom.js";import"./vendor.core-js.js";import{g as Me}from"./flow-condition-types.js";import{u as ve}from"./vendor.react-i18next.js";import"./vendor.object-assign.js";import"./vendor.phoenix.js";import"./vendor.uuid.js";import"./vendor.i18next.js";import"./vendor.babel.runtime.js";import"./flow-host.styl.js";import"./Frame.js";import"./use-window-resize.js";import"./logomark.js";import"./ChecklistUI.js";import"./vendor.fortawesome.pro-solid-svg-icons.js";import"./FlowChrome.js";import"./vendor.canvas-confetti.js";import"./vendor.memoize-one.js";import"./vendor.bignumber.js.js";import"./use-element-rect.js";import"./vendor.scheduler.js";import"./vendor.date-fns.js";(function(){try{var t=typeof window<"u"?window:typeof global<"u"?global:typeof self<"u"?self:{},e=new Error().stack;e&&(t._sentryDebugIds=t._sentryDebugIds||{},t._sentryDebugIds[e]="edfc6b09-7552-419e-a429-c09887fdf100",t._sentryDebugIdIdentifier="sentry-dbid-edfc6b09-7552-419e-a429-c09887fdf100")}catch{}})();function Re(t){const e=Intl.Segmenter;return e?/(\p{Emoji_Presentation}|\p{Extended_Pictographic})(\p{Emoji_Modifier_Base}?\p{Emoji_Modifier}?|\uFE0F\u200D(\p{Emoji_Modifier_Base}\p{Emoji_Modifier}?\uFE0F\u200D)*\p{Emoji_Presentation}|\uFE0F\u200D\p{Extended_Pictographic})/u.test(t)&&[...new e().segment(t)].length===1:!1}const te=[];function Ne({assistant:t,lookupAttribute:e,initialConversationId:a,initialHistory:c,initialUserContent:m,onConversationIdChange:f,submitMessage:h,submitRating:l,submitFeedback:p,InsideMessage:r,onContactClick:g,contactButtonText:i}){const[o,d]=u.useState(null),[C,w]=u.useState(()=>c?c.map(s=>({...s,assistantHtml:x(B(s.assistantContent),!1)})):te),[D,M]=u.useState(""),S=u.useRef(null),k=u.useRef(null),E=u.useRef(!0),I=u.useRef(a||null),[ie,ue]=u.useState(I.current),H=u.useCallback(s=>{I.current=s,ue(s),f&&f(s)},[f]),T=u.useCallback(()=>{o?.focus({preventScroll:!0})},[o]);u.useEffect(()=>{T()},[T]),u.useLayoutEffect(()=>{const s=k.current;s&&(s.scrollTop=Math.ceil(s.scrollHeight-s.clientHeight))},[]);const K=u.useCallback(()=>{const s=k.current;s&&(E.current=!0,typeof s.scrollTo=="function"&&s.scrollTo({top:Math.ceil(s.scrollHeight-s.clientHeight),behavior:"smooth"}))},[]),G=u.useRef(0);u.useLayoutEffect(()=>{const s=k.current;s&&s.scrollHeight!==G.current&&(G.current=s.scrollHeight,E.current&&K())},[C,K]);const N=u.useCallback(()=>{S.current&&S.current()},[]);u.useEffect(()=>()=>{N()},[N]);const O=(s,R)=>{w(j=>j.map(v=>{if(s===v.id){const b=R(v);return{...v,...b}}else return v}))},L=s=>{w(R=>R.map((j,v)=>{if(v===R.length-1){const b=s(j);return{...j,...b}}else return j}))},U=u.useCallback(async s=>{if(s=s.trim(),s==="")return;N(),w(b=>[...b,{id:null,userContent:s,assistantContent:"",assistantFallbackContent:null,assistantHtml:x("","enter"),enterAnimation:!0,sources:[],completed:!1,rating:null,scaleRating:null,scaleMax:null,feedbackSubmitted:!1}]),M(""),K();let R=!1;const j=()=>{R=!0,S.current=null},v=h({conversationId:I.current,userContent:s,callback:b=>{if(R){console.log("Userflow.js AssistantChat got message after being done",b);return}switch(b.kind){case"conversation_created":H(b.conversationId);break;case"message_created":L(()=>({id:b.messageId,warning:b.warning}));break;case"assistant_content_delta":L(F=>{const ge=b.delta,J=F.assistantContent+ge,be=B(J),Ee=x(be);return{assistantContent:J,assistantHtml:Ee}});break;case"done":j(),L(F=>({assistantHtml:x(F.assistantContent,"exit"),assistantFallbackContent:b.fallbackContent,completed:!0,sources:b.sources}));break;case"error":j(),L(F=>({failed:!0,error:b.message,assistantHtml:x(B(F.assistantContent),!1)}));break;default:console.log("Userflow.js AssistantChat got unknown message",b)}}});S.current=()=>{j(),v.abort(),L(b=>({assistantHtml:x(B(b.assistantContent),!1)}))}},[N,K,h,H]),z=u.useRef(!1);u.useEffect(()=>{z.current||(z.current=!0,m&&U(m))},[U,m]);const fe=u.useCallback(()=>{N(),H(null),w(te),T()},[N,T,H]),[de,me]=u.useState(!0),he=u.useCallback(()=>{const s=k.current;s&&me(s.scrollTop===0)},[]),pe=u.useCallback(()=>{const s=k.current;s&&(E.current=Math.ceil(s.scrollHeight-s.clientHeight)==Math.ceil(s.scrollTop))},[]);return{assistant:t,lookupAttribute:e,history:C,setInput:d,contentElRef:k,scrolledToTop:de,userContent:D,setUserContent:M,onSubmitMessage:U,supportsFeedback:!!l&&!!p,onSubmitRating:s=>{if(l){switch(s.ratingMode){case _.LIKE:O(s.messageId,()=>({rating:s.rating}));break;case _.SCALE:O(s.messageId,()=>({scaleRating:s.scaleRating,scaleMax:s.scaleMax}));break;default:throw new oe(s)}l(s)}},onSubmitFeedback:s=>{p&&(O(s.messageId,()=>({feedbackSubmitted:!0})),p(s))},InsideMessage:r,onContactClick:g,contactButtonText:i,reset:fe,onContentScroll:he,onContentWheel:pe,conversationId:ie}}const xe=({assistant:t,lookupAttribute:e,history:a,setInput:c,contentElRef:m,scrolledToTop:f,userContent:h,setUserContent:l,onSubmitMessage:p,supportsFeedback:r,onSubmitRating:g,onSubmitFeedback:i,InsideMessage:o,onContactClick:d,contactButtonText:C,reset:w,onContentScroll:D,onContentWheel:M,conversationId:S})=>{const k=a.some(E=>E.completed||E.failed);return n.createElement("div",{className:"userflowjs-assistant-chat"},n.createElement("div",{className:y({"userflowjs-assistant-chat__header":!0,"userflowjs-assistant-chat__header--content-scrolled":!f})}),n.createElement("div",{className:y({"userflowjs-assistant-chat__header":!0,"userflowjs-assistant-chat__header--content-scrolled":!f})},n.createElement(n.Fragment,null,n.createElement("h2",{className:"userflowjs-assistant-chat__title"},t.title),n.createElement("button",{className:"userflowjs-bubble-button userflowjs-bubble-button--default",onClick:w},t.resetText))),n.createElement("div",{ref:m,className:"userflowjs-assistant-chat__content",onScroll:D,onWheel:M},!ae(t.intro)&&n.createElement("div",{className:"userflowjs-assistant-chat__intro"},n.createElement(re,{doc:t.intro,lookupAttribute:e})),a.map((E,I)=>n.createElement(Le,{key:I,assistant:t,message:E,supportsFeedback:r,onSubmitRating:g,onSubmitFeedback:i,InsideMessage:o,conversationId:S,isLast:I===a.length-1}))),n.createElement("div",{className:"userflowjs-assistant-chat__prompt"},n.createElement(Ce,{textareaRef:c,placeholder:(a.length===0?t.promptEmptyPlaceholder:t.promptNonemptyPlaceholder)||"",value:h,onChange:l,onSubmit:()=>p(h)})),k&&d&&n.createElement("div",{className:"userflowjs-assistant-chat__contact"},n.createElement("button",{className:"userflowjs-tertiary-button",onClick:()=>d()},C)))},Le=({assistant:t,message:e,supportsFeedback:a,onSubmitRating:c,onSubmitFeedback:m,InsideMessage:f,conversationId:h,isLast:l})=>{const p=!ae(e.assistantFallbackContent);return n.createElement("div",{className:"userflowjs-assistant-chat__message"},f&&n.createElement(f,{message:e}),n.createElement("div",{className:y({"userflowjs-assistant-chat__user-content":!0,"userflowjs-assistant-chat__user-content--enter":!!e.enterAnimation}),"data-assistant-conversation-id":h,"data-assistant-message-id":e.id},n.createElement("div",{style:{whiteSpace:"pre-wrap"}},e.userContent)),e.warning&&n.createElement("div",{className:"userflowjs-assistant-chat__error"},"Warning: ",e.warning),n.createElement("div",{className:"userflowjs-assistant-chat__assistant-content"},p&&n.createElement("div",null,n.createElement(re,{doc:e.assistantFallbackContent})),!p&&n.createElement("div",null,n.createElement(Ae,{html:e.assistantHtml})),e.error&&n.createElement("div",{className:"userflowjs-assistant-chat__error"},e.error)),e.sources&&e.sources.length>0&&n.createElement("div",{className:"userflowjs-assistant-chat__sources"},n.createElement("div",{className:"userflowjs-assistant-chat__sources-title"},t.sourcesText),e.sources.map((r,g)=>n.createElement("a",{key:g,className:"userflowjs-assistant-chat__source",href:Se(r.url),target:"_blank",rel:"noreferrer noopener"},r.title))),a&&e.completed&&e.id&&(t.ratingMode===_.LIKE||t.ratingMode===_.SCALE&&l)&&n.createElement(Fe,{assistant:t,message:e,onSubmitRating:c,onSubmitFeedback:m}))},Fe=({assistant:t,message:e,onSubmitRating:a,onSubmitFeedback:c})=>{const m=u.useRef(null),[f,h]=u.useState(""),l=i=>{const o=e.id;o&&(ee.flushSync(()=>{a({ratingMode:_.LIKE,messageId:o,rating:i})}),m.current?.focus({preventScroll:!0}))},p=i=>{const o=e.id;o&&(ee.flushSync(()=>{a({ratingMode:_.SCALE,messageId:o,scaleRating:i,scaleMax:t.scaleMax})}),m.current?.focus({preventScroll:!0}))},r=()=>{e.id&&(c({messageId:e.id,feedback:f.trim()}),h(""))},g=t.ratingMode===_.LIKE?n.createElement("button",{className:"userflowjs-assistant-chat__rating-option",disabled:!0},n.createElement(W,{icon:e.rating==A.DISLIKE?q:Q})):e.scaleRating&&e.scaleMax&&n.createElement("button",{className:y({"userflowjs-assistant-chat__rating-option":!0,"userflowjs-assistant-chat__rating-option--scale":!0}),disabled:!0},le(t,e.scaleRating,e.scaleMax));return n.createElement("div",{className:`userflowjs-assistant-chat__rating userflowjs-assistant-chat__rating--${t.ratingMode}`},t.ratingMode===_.SCALE&&n.createElement("div",{className:"userflowjs-assistant-chat__rating-question"},t.scaleQuestion),e.feedbackSubmitted?n.createElement("div",{className:"userflowjs-assistant-chat__rating-thanks"},g,n.createElement("div",{className:"userflowjs-assistant-chat__rating-thanks-message"},t.feedbackThanksText)):(t.ratingMode===_.LIKE?e.rating:e.scaleRating)?n.createElement(je,{textareaRef:m,className:"userflowjs-growing-textarea userflowjs-assistant-chat__feedback-textarea",mirrorClassName:"userflowjs-growing-textarea__mirror",textareaClassName:"userflowjs-textarea",placeholder:(t.ratingMode===_.LIKE?e.rating===A.LIKE?t.feedbackLikePlaceholder:t.feedbackDislikePlaceholder:t.scaleFeedbackPlaceholder)||"",value:f,onChange:h,onKeyDown:i=>{!i.shiftKey&&i.key==="Enter"&&(i.preventDefault(),r())}},g,n.createElement("button",{className:"userflowjs-assistant-chat__feedback-submit",onClick:()=>r()},n.createElement(W,{icon:ke}))):n.createElement("div",{className:"userflowjs-assistant-chat__rating-options"},t.ratingMode===_.LIKE?[A.LIKE,A.DISLIKE].map(i=>(!e.rating||e.rating===i)&&n.createElement("button",{key:i,className:"userflowjs-assistant-chat__rating-option",onClick:e.rating?void 0:()=>l(i),disabled:!!e.rating,"data-testid":`assistant-chat-rating-${i}`},n.createElement(W,{icon:i==A.DISLIKE?q:Q}))):ye(t).map(({value:i,label:o})=>n.createElement("button",{key:i,className:y({"userflowjs-assistant-chat__rating-option":!0,"userflowjs-assistant-chat__rating-option--large-scale":Re(o||"")}),onClick:e.scaleRating?void 0:()=>p(i),disabled:!!e.scaleRating,"data-testid":`assistant-chat-rating-${i}`},o))))};function B(t){let e=t;const a=f=>(f=f.replace(/\s*[*_`]*$/,""),f=f.replace(/(^|\n)\s*(\d+\.?|-|=)$/,""),f);e=a(e),e=e.replace(/\[([^\]\n]*)(\](\([^)\n]*)?)?$/,"$1"),e=a(e);const c=Array.from(e.matchAll(/\n( *)```/g));if(c.length%2===1){const f=c[c.length-1][1];e+=`
|
|
1
|
+
import{r as u,R as n}from"./vendor.react.js";import{ae as _,af as A,u as Y}from"./userflow.js";import{u as _e}from"./client-context.js";import{a5 as q,a6 as Q,a7 as ke,a8 as P,a9 as $,aa as V,ab as X,ac as Z}from"./vendor.fortawesome.pro-regular-svg-icons.js";import{p as we}from"./vendor.dompurify.js";import{m as Ie}from"./vendor.marked.js";import{o as y}from"./vendor.obj-str.js";import{A as Ce,d as Se,G as je}from"./ResourceCenterApp.js";import{f as ae,R as re}from"./use-selector-element-monitoring.js";import{D as W}from"./stylesheets.js";import{U as oe}from"./roots.js";import{r as ee}from"./vendor.react-dom.js";import"./vendor.core-js.js";import{g as Me}from"./flow-condition-types.js";import{u as ve}from"./vendor.react-i18next.js";import"./vendor.object-assign.js";import"./vendor.phoenix.js";import"./vendor.uuid.js";import"./vendor.i18next.js";import"./vendor.babel.runtime.js";import"./flow-host.styl.js";import"./Frame.js";import"./use-window-resize.js";import"./logomark.js";import"./ChecklistUI.js";import"./vendor.fortawesome.pro-solid-svg-icons.js";import"./FlowChrome.js";import"./vendor.canvas-confetti.js";import"./vendor.memoize-one.js";import"./vendor.bignumber.js.js";import"./use-element-rect.js";import"./vendor.scheduler.js";import"./vendor.date-fns.js";(function(){try{var t=typeof window<"u"?window:typeof global<"u"?global:typeof self<"u"?self:{},e=new Error().stack;e&&(t._sentryDebugIds=t._sentryDebugIds||{},t._sentryDebugIds[e]="b68ff1e6-c57a-4b60-901e-e2489fd8c476",t._sentryDebugIdIdentifier="sentry-dbid-b68ff1e6-c57a-4b60-901e-e2489fd8c476")}catch{}})();function Re(t){const e=Intl.Segmenter;return e?/(\p{Emoji_Presentation}|\p{Extended_Pictographic})(\p{Emoji_Modifier_Base}?\p{Emoji_Modifier}?|\uFE0F\u200D(\p{Emoji_Modifier_Base}\p{Emoji_Modifier}?\uFE0F\u200D)*\p{Emoji_Presentation}|\uFE0F\u200D\p{Extended_Pictographic})/u.test(t)&&[...new e().segment(t)].length===1:!1}const te=[];function Ne({assistant:t,lookupAttribute:e,initialConversationId:a,initialHistory:c,initialUserContent:m,onConversationIdChange:f,submitMessage:h,submitRating:l,submitFeedback:p,InsideMessage:r,onContactClick:g,contactButtonText:i}){const[o,d]=u.useState(null),[C,w]=u.useState(()=>c?c.map(s=>({...s,assistantHtml:x(B(s.assistantContent),!1)})):te),[D,M]=u.useState(""),S=u.useRef(null),k=u.useRef(null),E=u.useRef(!0),I=u.useRef(a||null),[ie,ue]=u.useState(I.current),H=u.useCallback(s=>{I.current=s,ue(s),f&&f(s)},[f]),T=u.useCallback(()=>{o?.focus({preventScroll:!0})},[o]);u.useEffect(()=>{T()},[T]),u.useLayoutEffect(()=>{const s=k.current;s&&(s.scrollTop=Math.ceil(s.scrollHeight-s.clientHeight))},[]);const K=u.useCallback(()=>{const s=k.current;s&&(E.current=!0,typeof s.scrollTo=="function"&&s.scrollTo({top:Math.ceil(s.scrollHeight-s.clientHeight),behavior:"smooth"}))},[]),G=u.useRef(0);u.useLayoutEffect(()=>{const s=k.current;s&&s.scrollHeight!==G.current&&(G.current=s.scrollHeight,E.current&&K())},[C,K]);const N=u.useCallback(()=>{S.current&&S.current()},[]);u.useEffect(()=>()=>{N()},[N]);const O=(s,R)=>{w(j=>j.map(v=>{if(s===v.id){const b=R(v);return{...v,...b}}else return v}))},L=s=>{w(R=>R.map((j,v)=>{if(v===R.length-1){const b=s(j);return{...j,...b}}else return j}))},U=u.useCallback(async s=>{if(s=s.trim(),s==="")return;N(),w(b=>[...b,{id:null,userContent:s,assistantContent:"",assistantFallbackContent:null,assistantHtml:x("","enter"),enterAnimation:!0,sources:[],completed:!1,rating:null,scaleRating:null,scaleMax:null,feedbackSubmitted:!1}]),M(""),K();let R=!1;const j=()=>{R=!0,S.current=null},v=h({conversationId:I.current,userContent:s,callback:b=>{if(R){console.log("Userflow.js AssistantChat got message after being done",b);return}switch(b.kind){case"conversation_created":H(b.conversationId);break;case"message_created":L(()=>({id:b.messageId,warning:b.warning}));break;case"assistant_content_delta":L(F=>{const ge=b.delta,J=F.assistantContent+ge,be=B(J),Ee=x(be);return{assistantContent:J,assistantHtml:Ee}});break;case"done":j(),L(F=>({assistantHtml:x(F.assistantContent,"exit"),assistantFallbackContent:b.fallbackContent,completed:!0,sources:b.sources}));break;case"error":j(),L(F=>({failed:!0,error:b.message,assistantHtml:x(B(F.assistantContent),!1)}));break;default:console.log("Userflow.js AssistantChat got unknown message",b)}}});S.current=()=>{j(),v.abort(),L(b=>({assistantHtml:x(B(b.assistantContent),!1)}))}},[N,K,h,H]),z=u.useRef(!1);u.useEffect(()=>{z.current||(z.current=!0,m&&U(m))},[U,m]);const fe=u.useCallback(()=>{N(),H(null),w(te),T()},[N,T,H]),[de,me]=u.useState(!0),he=u.useCallback(()=>{const s=k.current;s&&me(s.scrollTop===0)},[]),pe=u.useCallback(()=>{const s=k.current;s&&(E.current=Math.ceil(s.scrollHeight-s.clientHeight)==Math.ceil(s.scrollTop))},[]);return{assistant:t,lookupAttribute:e,history:C,setInput:d,contentElRef:k,scrolledToTop:de,userContent:D,setUserContent:M,onSubmitMessage:U,supportsFeedback:!!l&&!!p,onSubmitRating:s=>{if(l){switch(s.ratingMode){case _.LIKE:O(s.messageId,()=>({rating:s.rating}));break;case _.SCALE:O(s.messageId,()=>({scaleRating:s.scaleRating,scaleMax:s.scaleMax}));break;default:throw new oe(s)}l(s)}},onSubmitFeedback:s=>{p&&(O(s.messageId,()=>({feedbackSubmitted:!0})),p(s))},InsideMessage:r,onContactClick:g,contactButtonText:i,reset:fe,onContentScroll:he,onContentWheel:pe,conversationId:ie}}const xe=({assistant:t,lookupAttribute:e,history:a,setInput:c,contentElRef:m,scrolledToTop:f,userContent:h,setUserContent:l,onSubmitMessage:p,supportsFeedback:r,onSubmitRating:g,onSubmitFeedback:i,InsideMessage:o,onContactClick:d,contactButtonText:C,reset:w,onContentScroll:D,onContentWheel:M,conversationId:S})=>{const k=a.some(E=>E.completed||E.failed);return n.createElement("div",{className:"userflowjs-assistant-chat"},n.createElement("div",{className:y({"userflowjs-assistant-chat__header":!0,"userflowjs-assistant-chat__header--content-scrolled":!f})}),n.createElement("div",{className:y({"userflowjs-assistant-chat__header":!0,"userflowjs-assistant-chat__header--content-scrolled":!f})},n.createElement(n.Fragment,null,n.createElement("h2",{className:"userflowjs-assistant-chat__title"},t.title),n.createElement("button",{className:"userflowjs-bubble-button userflowjs-bubble-button--default",onClick:w},t.resetText))),n.createElement("div",{ref:m,className:"userflowjs-assistant-chat__content",onScroll:D,onWheel:M},!ae(t.intro)&&n.createElement("div",{className:"userflowjs-assistant-chat__intro"},n.createElement(re,{doc:t.intro,lookupAttribute:e})),a.map((E,I)=>n.createElement(Le,{key:I,assistant:t,message:E,supportsFeedback:r,onSubmitRating:g,onSubmitFeedback:i,InsideMessage:o,conversationId:S,isLast:I===a.length-1}))),n.createElement("div",{className:"userflowjs-assistant-chat__prompt"},n.createElement(Ce,{textareaRef:c,placeholder:(a.length===0?t.promptEmptyPlaceholder:t.promptNonemptyPlaceholder)||"",value:h,onChange:l,onSubmit:()=>p(h)})),k&&d&&n.createElement("div",{className:"userflowjs-assistant-chat__contact"},n.createElement("button",{className:"userflowjs-tertiary-button",onClick:()=>d()},C)))},Le=({assistant:t,message:e,supportsFeedback:a,onSubmitRating:c,onSubmitFeedback:m,InsideMessage:f,conversationId:h,isLast:l})=>{const p=!ae(e.assistantFallbackContent);return n.createElement("div",{className:"userflowjs-assistant-chat__message"},f&&n.createElement(f,{message:e}),n.createElement("div",{className:y({"userflowjs-assistant-chat__user-content":!0,"userflowjs-assistant-chat__user-content--enter":!!e.enterAnimation}),"data-assistant-conversation-id":h,"data-assistant-message-id":e.id},n.createElement("div",{style:{whiteSpace:"pre-wrap"}},e.userContent)),e.warning&&n.createElement("div",{className:"userflowjs-assistant-chat__error"},"Warning: ",e.warning),n.createElement("div",{className:"userflowjs-assistant-chat__assistant-content"},p&&n.createElement("div",null,n.createElement(re,{doc:e.assistantFallbackContent})),!p&&n.createElement("div",null,n.createElement(Ae,{html:e.assistantHtml})),e.error&&n.createElement("div",{className:"userflowjs-assistant-chat__error"},e.error)),e.sources&&e.sources.length>0&&n.createElement("div",{className:"userflowjs-assistant-chat__sources"},n.createElement("div",{className:"userflowjs-assistant-chat__sources-title"},t.sourcesText),e.sources.map((r,g)=>n.createElement("a",{key:g,className:"userflowjs-assistant-chat__source",href:Se(r.url),target:"_blank",rel:"noreferrer noopener"},r.title))),a&&e.completed&&e.id&&(t.ratingMode===_.LIKE||t.ratingMode===_.SCALE&&l)&&n.createElement(Fe,{assistant:t,message:e,onSubmitRating:c,onSubmitFeedback:m}))},Fe=({assistant:t,message:e,onSubmitRating:a,onSubmitFeedback:c})=>{const m=u.useRef(null),[f,h]=u.useState(""),l=i=>{const o=e.id;o&&(ee.flushSync(()=>{a({ratingMode:_.LIKE,messageId:o,rating:i})}),m.current?.focus({preventScroll:!0}))},p=i=>{const o=e.id;o&&(ee.flushSync(()=>{a({ratingMode:_.SCALE,messageId:o,scaleRating:i,scaleMax:t.scaleMax})}),m.current?.focus({preventScroll:!0}))},r=()=>{e.id&&(c({messageId:e.id,feedback:f.trim()}),h(""))},g=t.ratingMode===_.LIKE?n.createElement("button",{className:"userflowjs-assistant-chat__rating-option",disabled:!0},n.createElement(W,{icon:e.rating==A.DISLIKE?q:Q})):e.scaleRating&&e.scaleMax&&n.createElement("button",{className:y({"userflowjs-assistant-chat__rating-option":!0,"userflowjs-assistant-chat__rating-option--scale":!0}),disabled:!0},le(t,e.scaleRating,e.scaleMax));return n.createElement("div",{className:`userflowjs-assistant-chat__rating userflowjs-assistant-chat__rating--${t.ratingMode}`},t.ratingMode===_.SCALE&&n.createElement("div",{className:"userflowjs-assistant-chat__rating-question"},t.scaleQuestion),e.feedbackSubmitted?n.createElement("div",{className:"userflowjs-assistant-chat__rating-thanks"},g,n.createElement("div",{className:"userflowjs-assistant-chat__rating-thanks-message"},t.feedbackThanksText)):(t.ratingMode===_.LIKE?e.rating:e.scaleRating)?n.createElement(je,{textareaRef:m,className:"userflowjs-growing-textarea userflowjs-assistant-chat__feedback-textarea",mirrorClassName:"userflowjs-growing-textarea__mirror",textareaClassName:"userflowjs-textarea",placeholder:(t.ratingMode===_.LIKE?e.rating===A.LIKE?t.feedbackLikePlaceholder:t.feedbackDislikePlaceholder:t.scaleFeedbackPlaceholder)||"",value:f,onChange:h,onKeyDown:i=>{!i.shiftKey&&i.key==="Enter"&&(i.preventDefault(),r())}},g,n.createElement("button",{className:"userflowjs-assistant-chat__feedback-submit",onClick:()=>r()},n.createElement(W,{icon:ke}))):n.createElement("div",{className:"userflowjs-assistant-chat__rating-options"},t.ratingMode===_.LIKE?[A.LIKE,A.DISLIKE].map(i=>(!e.rating||e.rating===i)&&n.createElement("button",{key:i,className:"userflowjs-assistant-chat__rating-option",onClick:e.rating?void 0:()=>l(i),disabled:!!e.rating,"data-testid":`assistant-chat-rating-${i}`},n.createElement(W,{icon:i==A.DISLIKE?q:Q}))):ye(t).map(({value:i,label:o})=>n.createElement("button",{key:i,className:y({"userflowjs-assistant-chat__rating-option":!0,"userflowjs-assistant-chat__rating-option--large-scale":Re(o||"")}),onClick:e.scaleRating?void 0:()=>p(i),disabled:!!e.scaleRating,"data-testid":`assistant-chat-rating-${i}`},o))))};function B(t){let e=t;const a=f=>(f=f.replace(/\s*[*_`]*$/,""),f=f.replace(/(^|\n)\s*(\d+\.?|-|=)$/,""),f);e=a(e),e=e.replace(/\[([^\]\n]*)(\](\([^)\n]*)?)?$/,"$1"),e=a(e);const c=Array.from(e.matchAll(/\n( *)```/g));if(c.length%2===1){const f=c[c.length-1][1];e+=`
|
|
2
2
|
`+f+"```"}else{let f=0;for(let r=e.length-1;r>=0;r--)if(e[r]===`
|
|
3
3
|
`&&e[r-1]===`
|
|
4
4
|
`){f=r;break}const h=[];let l=!1;const p=r=>r==null||r.match(/\W/);for(let r=f;r<e.length;r++){const g=e[r],i=g+e[r+1],o=i+e[r+2];let d=null;!l&&o==="***"||!l&&o==="___"&&(p(e[r-1])||p(e[r+3]))?d=o:!l&&i==="**"||!l&&i==="__"&&(p(e[r-1])||p(e[r+2]))?d=i:(!l&&g==="*"||!l&&g==="_"&&(p(e[r-1])||p(e[r+1]))||g==="`")&&(d=g),d!=null&&(e.slice(f,r+d.length).match(/\[[^\]\n]*\]\([^)\n]*$/)||(h[h.length-1]===d?(d==="`"&&(l=!1),h.pop()):(d==="`"&&(l=!0),h.push(d))),r+=d.length-1)}e+=h.reverse().join("")}return e}function x(t,e){t=t.trim(),e!==!1&&(t=t.replace(/(\n *```)?$/," {{USERFLOWCHATBRAIN}}$1"));let a=we.sanitize(Ie.parse(t));if(e!==!1){let c="userflowjs-assistant-brain";e&&(c+=` userflowjs-assistant-brain--${e}`),a=a.replace("{{USERFLOWCHATBRAIN}}",`<span class="${c}"><span></span><span></span><span></span><span></span></span>`)}return a=a.replace(/<a href=/g,'<a target="_blank" rel="noopener noreferrer" href='),a}const Ae=({html:t})=>u.useMemo(()=>{if(!t)return null;const a=new DOMParser().parseFromString(t,"text/html");return ce(a.body)},[t]);function ce(t,e){if(t instanceof Element){if(t.tagName==="BODY")return n.createElement(n.Fragment,{key:e},se(t));{if(["script","style"].includes(t.tagName))return null;const a={key:e};for(const c of t.attributes){let m=c.name;m.startsWith("on")||(m==="class"&&(m="className"),a[m]=c.value)}return n.createElement(t.tagName.toLowerCase(),a,se(t))}}else return t instanceof Text?t.textContent:null}function se(t){const e=[];let a=0;for(const c of t.childNodes)e.push(ce(c,a)),a++;return e}function ye(t){let e=[];const a=t.scaleMax||5;for(let c=1;c<=a;c++)e.push({value:c,label:le(t,c,a)});return e}function le(t,e,a){if(t.scaleLabels)return t.scaleLabels[e-1]||e;{const c=ne[a]&&ne[a][e];return c?n.createElement(W,{icon:c,size:24}):e}}const ne={2:{1:P,2:$},3:{1:P,2:V,3:$},4:{1:X,2:P,3:$,4:Z},5:{1:X,2:P,3:V,4:$,5:Z}},gt=({block:t,session:e,assistantReply:a,initialUserContent:c,onContactClick:m,contactButtonText:f})=>{const h=t.assistantFlowId,l=_e(),{t:p}=ve(),r=p("assistant.generic_error"),g=p("assistant.disconnected_error"),i=Ne(u.useMemo(()=>({assistant:a.assistant,lookupAttribute:Me(e.data),initialConversationId:a.conversationId,initialHistory:a.history,initialUserContent:c,onConversationIdChange:o=>{const d="assistantConversationId:"+h;o?Y.setItem(d,o):Y.removeItem(d)},submitMessage:({conversationId:o,userContent:d,callback:C})=>{l.assistantMessageInProgress=!0;const w=l.nextRef();l.send({kind:"SubmitAssistantMessage",ref:w,assistantFlowId:h,conversationId:o,userContent:d},{handlesRejection:!0}).catch(E=>{C({kind:"error",message:E.humanMessage||r})});const M=()=>{l.assistantMessageInProgress=void 0,l.off("private:assistantMessageEvent",S),l.off("private:disconnect",k)},S=E=>{if(E.ref!==w)return;const{event:I}=E;C(I),(I.kind=="done"||I.kind=="error")&&M()},k=()=>{C({kind:"error",message:g}),M()};return l.on("private:assistantMessageEvent",S),l.on("private:disconnect",k),{abort:()=>{l.send({kind:"AbortAssistantMessage"}),M()}}},submitRating:o=>{switch(o.ratingMode){case _.LIKE:l.send({kind:"SubmitAssistantRating",messageId:o.messageId,rating:o.rating});break;case _.SCALE:l.send({kind:"SubmitAssistantScaleRating",messageId:o.messageId,scaleRating:o.scaleRating,scaleMax:o.scaleMax});break;default:throw new oe(o)}},submitFeedback:o=>{l.send({kind:"SubmitAssistantFeedback",messageId:o.messageId,feedback:o.feedback})},onContactClick:m,contactButtonText:f}),[a,h,l,c,e.data,m,f,r,g]));return n.createElement(n.Fragment,null,n.createElement(xe,{...i}))};export{gt as ResourceCenterAssistantChat};
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import{r as i,R as o}from"./vendor.react.js";import{u as W}from"./client-context.js";import{B as q}from"./BuilderBar.js";import"./vendor.core-js.js";import{v as L}from"./vendor.uuid.js";import{s as $,p as Z,a as G,j as V,f as J}from"./roots.js";import{z as E,D as Q,y as ee,G as te,H as re}from"./userflow.js";import{D as ne}from"./stylesheets.js";import{f as oe}from"./vendor.fortawesome.pro-light-svg-icons.js";import"./vendor.object-assign.js";import"./vendor.i18next.js";import"./vendor.babel.runtime.js";import"./vendor.react-i18next.js";import"./Frame.js";import"./vendor.react-dom.js";import"./vendor.scheduler.js";import"./logomark.js";import"./vendor.obj-str.js";import"./use-window-resize.js";import"./vendor.phoenix.js";import"./vendor.fortawesome.pro-regular-svg-icons.js";import"./vendor.fortawesome.pro-solid-svg-icons.js";import"./flow-condition-types.js";import"./vendor.date-fns.js";(function(){try{var r=typeof window<"u"?window:typeof global<"u"?global:typeof self<"u"?self:{},u=new Error().stack;u&&(r._sentryDebugIds=r._sentryDebugIds||{},r._sentryDebugIds[u]="54c4b1d9-f9f3-4823-9c7f-a633c1777175",r._sentryDebugIdIdentifier="sentry-dbid-54c4b1d9-f9f3-4823-9c7f-a633c1777175")}catch{}})();const O=r=>L();let _=O;function B(r){return _(r)}B.uuidv4=L;B.mock=r=>{_=r};B.unmock=()=>{_=O};const se=500,ce=500,ae=5e3,ie="builderBarPos",le=50,ue=500;function de(r){try{const u=r.tagName.toLowerCase(),v=["input","textarea","select"].includes(u)||r.getAttribute("contenteditable")==="true"?ee.INPUT:void 0,N=G(r,{elementType:v});if(!N)return null;const R=r.getBoundingClientRect(),S=x=>Math.round(x/V(1)),w={...N.selector,targetX1:S(R.left),targetY1:S(R.top),targetX2:S(R.right),targetY2:S(R.bottom),screenshotWidth:window.innerWidth,screenshotHeight:window.innerHeight};return w.autoData&&J(w)?.length===0?null:w}catch{return null}}const je=({state:r})=>{const u=W(),C=i.useRef(null),[v,N]=i.useState(!1),[R,S]=i.useState(0),[w,x]=i.useState(!1),t=i.useRef(null),b=i.useRef(new Map),f=i.useRef(new Map),y=i.useRef(),I=i.useRef(!1),s=i.useRef(null),m=i.useRef();i.useEffect(()=>{if(!v||!r.isRecording)return;t.current||(Z(),t.current={sessionId:r.sessionId,isRecording:!0,startUrl:r.startUrl,steps:[]},E({kind:"userflow:crxSendProxyMessage",direction:"targetToBuilder",message:{kind:"userflow:smartFlowRecording",isRecording:!0}}));const a=t.current.sessionId,d={capture:!0},T=document.getElementById("userflow-ui"),F=()=>{const e=re.getItem(ie)==="top"?"top":"bottom",c=C.current?.getRootEl()?.clientHeight||0;return{position:e,height:c}},D=async()=>{const{position:e,height:n}=F(),c=0,l=e==="top"?n:0,p=Math.round(window.innerWidth),g=Math.round(window.innerHeight)-n;try{const h=await new Promise((U,k)=>{const z=window.setTimeout(()=>{s.current=null,k(new Error("Screenshot timeout"))},ae);s.current={resolve:U,reject:k,timeoutId:z},E({kind:"userflow:crxScreenshot",x:c,y:l,width:p,height:g,devicePixelRatio:window.devicePixelRatio})});return h?.startsWith("data:image")?h:null}catch{return s.current=null,null}},M=(e,n)=>{if(!e.selector){console.warn("SmartFlowRecordingApp: Cannot send step without selector");return}if(f.current.has(e.stepId))return;const c=te(p=>p.kind==="userflow:smartFlowStepAcknowledgment"&&p.stepId===e.stepId?p:null).then(()=>{});f.current.set(e.stepId,c);const l={kind:"userflow:smartFlowStep",stepId:e.stepId,selectorData:e.selector,screenshotDataUrl:n,action:e.action,url:e.url};E({kind:"userflow:crxSendProxyMessage",direction:"targetToBuilder",message:l})},A=async(e,n,c)=>{if(!t.current?.isRecording)return;const l=e?de(e):null;if(e&&!l){console.warn("SmartFlowRecordingApp: Failed to generate selector for element");return}const g={stepId:B("smart-flow-step"),element:e,selector:l,action:n,url:c||window.location.href};t.current.steps.push(g);let h=null;g.element&&(h=await D()),M(g,h)},j=e=>{if(!t.current?.isRecording){console.debug("SmartFlowRecordingApp: Not recording, ignoring click");return}if(I.current||!e.isTrusted)return;let c=e.composedPath()[0];if(c&&c.nodeType===Node.TEXT_NODE&&(c=c.parentElement),!(c instanceof Element))return;const l=c;if(T&&T.contains(l))return;const p=window.location.href,g=Date.now(),h=$(l),U=b.current.get(h)||0;g-U<se||(b.current.set(h,g),e.preventDefault(),e.stopImmediatePropagation(),I.current=!0,A(l,"click",p).catch(k=>{console.error("Recording failed, dispatching fallback click:",{error:k.message,element:{tagName:l.tagName,id:l.id,className:l.className},coordinates:{x:e.clientX,y:e.clientY}})}).finally(()=>{I.current=!1;const k=new MouseEvent(e.type,{bubbles:e.bubbles,cancelable:e.cancelable,view:e.view,detail:e.detail,screenX:e.screenX,screenY:e.screenY,clientX:e.clientX,clientY:e.clientY,ctrlKey:e.ctrlKey,altKey:e.altKey,shiftKey:e.shiftKey,metaKey:e.metaKey,button:e.button,buttons:e.buttons,relatedTarget:e.relatedTarget});l.dispatchEvent(k)}))},P=e=>{if(!t.current?.isRecording)return;const n=e.target;if(!n||T&&T.contains(n))return;const c=window.location.href;y.current&&window.clearTimeout(y.current),y.current=window.setTimeout(()=>{A(n,"input",c)},ce)},X=Q(e=>{switch(e.kind){case"userflow:crxScreenshotResult":{s.current&&(window.clearTimeout(s.current.timeoutId),e.imageDataUrl&&e.imageDataUrl.startsWith("data:image")?s.current.resolve(e.imageDataUrl):s.current.reject(new Error("Invalid screenshot data from Chrome extension")),s.current=null);break}case"userflow:smartFlowStepAcknowledgment":{f.current.delete(e.stepId),S(e.stepCount);break}case"userflow:stepCountResponse":{const n=e;n.sessionId===t.current?.sessionId&&(S(n.stepCount),x(!0),m.current&&(window.clearInterval(m.current),m.current=void 0));break}case"userflow:smartFlowCancel":{const n=e.sessionId;t.current&&t.current.sessionId===n&&(t.current.isRecording=!1,f.current.clear(),t.current=null,b.current.clear(),I.current=!1,s.current&&(window.clearTimeout(s.current.timeoutId),s.current=null),u.setSessionStorageState(c=>({...c,activeApp:null,smartFlowRecording:null})));break}case"userflow:smartFlowStartOverAck":{const n=e.startUrl;n&&window.location.href!==n&&(window.location.href=n);break}}return!1});return(()=>{if(!a)return;const e={kind:"userflow:requestStepCount",sessionId:a};E({kind:"userflow:crxSendProxyMessage",direction:"targetToBuilder",message:e}),m.current&&window.clearInterval(m.current),m.current=window.setInterval(()=>{E({kind:"userflow:crxSendProxyMessage",direction:"targetToBuilder",message:e})},le),window.setTimeout(()=>{m.current&&(window.clearInterval(m.current),m.current=void 0)},ue)})(),w&&(document.addEventListener("click",j,d),document.addEventListener("input",P,d),document.addEventListener("change",P,d)),()=>{X(),document.removeEventListener("click",j,d),document.removeEventListener("input",P,d),document.removeEventListener("change",P,d),y.current&&(window.clearTimeout(y.current),y.current=void 0),m.current&&(window.clearInterval(m.current),m.current=void 0)}},[r.isRecording,r.sessionId,r.startUrl,v,w,u]);const Y=i.useCallback(async()=>{if(!t.current)return;const a=t.current.sessionId;if(t.current.isRecording=!1,f.current.size>0){const d=f.current.size,T=new Promise((D,M)=>setTimeout(()=>M(new Error(`Timeout waiting for ${d} pending step(s)`)),2e4)),F=Promise.allSettled(Array.from(f.current.values()));try{await Promise.race([F,T])}catch(D){throw console.error(`Failed to wait for ${d} pending step(s)`,D),new Error("Some steps were not acknowledged. Please try again.")}}f.current.clear(),t.current=null,b.current.clear(),I.current=!1,s.current&&(window.clearTimeout(s.current.timeoutId),s.current=null),E({kind:"userflow:crxSendProxyMessage",direction:"targetToBuilder",message:{kind:"userflow:smartFlowComplete",sessionId:a}}),u.setSessionStorageState(d=>({...d,activeApp:null,smartFlowRecording:null}))},[u]),H=i.useCallback(()=>{t.current&&(E({kind:"userflow:crxSendProxyMessage",direction:"targetToBuilder",message:{kind:"userflow:smartFlowStartOver"}}),t.current.isRecording=!1,f.current.clear(),t.current=null,b.current.clear(),I.current=!1,s.current&&(window.clearTimeout(s.current.timeoutId),s.current=null),u.setSessionStorageState(a=>({...a,activeApp:null,smartFlowRecording:null})))},[u]),K=i.useCallback(()=>{const a=t.current?.sessionId||null;t.current&&(t.current.isRecording=!1,f.current.clear(),t.current=null,b.current.clear(),I.current=!1,s.current&&(window.clearTimeout(s.current.timeoutId),s.current=null)),E({kind:"userflow:crxSendProxyMessage",direction:"targetToBuilder",message:{kind:"userflow:smartFlowCancel",sessionId:a}}),u.setSessionStorageState(d=>({...d,activeApp:null,smartFlowRecording:null}))},[u]);return o.createElement(q,{ref:C,onReadyChange:N,buttons:o.createElement(o.Fragment,null,o.createElement("button",{className:"btn btn--default",disabled:!w||R===0,onMouseDown:a=>{a.preventDefault(),a.stopPropagation(),Y()}},"Done"),o.createElement("button",{className:"btn btn--secondary-on-dark",onMouseDown:a=>{a.preventDefault(),a.stopPropagation(),K()}},"Cancel"))},o.createElement("div",{className:"userflowjs-smart-flow-layout"},o.createElement("div",{className:"userflowjs-smart-flow-title"},"Userflow Smart Flow Creation"),o.createElement("div",{className:"userflowjs-smart-flow-status-container"},o.createElement("div",{className:"userflowjs-smart-flow-status"},w?o.createElement("div",{className:"userflowjs-smart-flow-recording"},o.createElement("div",{className:"userflowjs-smart-flow-pulse-dot"}),o.createElement("div",{className:"userflowjs-smart-flow-text"},o.createElement("span",{className:"userflowjs-smart-flow-text--bold"},"Recording flow"),o.createElement("span",{className:"userflowjs-smart-flow-text--gray"},` ${R} steps recorded`))):o.createElement("div",{className:"userflowjs-smart-flow-recording"},o.createElement("div",{className:"userflowjs-smart-flow-pulse-dot"}),o.createElement("div",{className:"userflowjs-smart-flow-text"},o.createElement("span",{className:"userflowjs-smart-flow-text--bold"},"Initializing Recorder..."))),w&&o.createElement("button",{className:"userflowjs-smart-flow-start-over",onMouseDown:a=>{a.preventDefault(),a.stopPropagation(),H()}},o.createElement("span",null,"Start over"),o.createElement(ne,{icon:oe,size:12}))))))};export{je as SmartFlowRecordingApp,je as default};
|
|
2
|
+
//# sourceMappingURL=SmartFlowRecordingApp.js.map
|