obi-sdk 0.18.6 → 0.18.7
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/dist/index.js +1 -1
- package/dist/obi-sdk.standalone.iife.js +1 -1
- package/package.json +2 -2
package/dist/index.js
CHANGED
|
@@ -59,4 +59,4 @@ a=extmap-allow-mixed`)!==-1){const r=i.sdp.split(`
|
|
|
59
59
|
50% { transform: translateX(344px); }
|
|
60
60
|
100% { transform: translateX(344px); }
|
|
61
61
|
}
|
|
62
|
-
`}),g("article",{style:t.skeletonContainer,role:"status","aria-label":"Loading content",children:[g("section",{style:t.headerSection,children:[g("div",{style:t.avatar,role:"img","aria-label":"Loading avatar",children:g("div",{style:t.shimmer})}),g("div",{style:t.textLines,children:[g("div",{style:t.textLine,role:"presentation","aria-label":"Loading text line 1",children:g("div",{style:t.shimmer})}),g("div",{style:t.textLine,role:"presentation","aria-label":"Loading text line 2",children:g("div",{style:t.shimmer})})]})]}),g("section",{style:t.contentSection,children:g("div",{style:t.contentBlock,role:"presentation","aria-label":"Loading card content",children:g("div",{style:t.shimmer})})})]})]})}function mU({}){const t={host:{display:"block"},shareContainer:{width:"480px",height:"240px",borderRadius:"12px",display:"grid",placeItems:"center",overflow:"hidden",position:"relative",backgroundColor:"var(--obi-color-tint)"},controlsRow:{zIndex:10,gridRowStart:1,gridColumnStart:1,display:"flex",alignSelf:"flex-start",marginTop:"36px",alignItems:"center",gap:"8px"},monitorIconContainer:{display:"flex",height:"40px",width:"40px",aspectRatio:"1",alignItems:"center",justifyContent:"center",gap:"8px",borderRadius:"2px",border:"1px solid #E4E4E7",background:"#F8FAFC",padding:"8px"},monitorIcon:{width:"24px",height:"24px",color:"#111827"},tabSelector:{display:"flex",width:"260px",height:"40px",padding:"4px",alignItems:"center",borderRadius:"2px",background:"#E4E4E7"},tabButton:e=>({display:"flex",flex:1,alignSelf:"stretch",alignItems:"center",justifyContent:"center",gap:"10px",borderRadius:"2px",padding:"6px 12px",border:"none",cursor:"pointer",fontFamily:"'Satoshi', sans-serif",fontSize:"14px",fontWeight:500,opacity:e?1:.4,background:e?"white":"#F8FAFC",boxShadow:e?"0 1px 2px 0 rgba(0, 0, 0, 0.05)":"none"}),skeletonContainer:{marginTop:"104px",gridColumnStart:1,gridRowStart:1,alignSelf:"center"}};return g("div",{style:t.host,children:g("div",{style:t.shareContainer,children:[g("div",{style:t.controlsRow,children:[g("div",{style:t.monitorIconContainer,children:g("svg",{style:t.monitorIcon,fill:"none",stroke:"currentColor",viewBox:"0 0 24 24",children:[g("rect",{width:"20",height:"14",x:"2",y:"3",rx:"2",ry:"2"}),g("line",{x1:"8",x2:"16",y1:"21",y2:"21"}),g("line",{x1:"12",x2:"12",y1:"17",y2:"21"})]})}),g("div",{style:t.tabSelector,children:[g("button",{style:t.tabButton(!1),children:"Tab"}),g("button",{style:t.tabButton(!0),children:"Window"})]})]}),g("div",{style:t.skeletonContainer,children:g(pU,{})})]})})}function BU({session:t,speakingState:e,onAction:A}){return g(Zt,{title:"Connect your screen",subtitle:"Watch for the prompt in your browser",agentName:t.agentName||"Obi",buttonText:"Share screen",speakingState:e,description:`${t.agentName||"Obi"} will guide you through ${t.appName||"the app"} by watching your screen.`,centerVisual:g(mU,{}),actionDisabled:!0,onAction:A})}function vU({spectrum:t}){return g("div",{style:{borderRadius:"15px",boxShadow:"0 0 20px 2px var(--obi-color-primary)",backgroundColor:"var(--obi-color-primary)",transform:"scale(1.6)"},children:g(ao,{isActive:!0,children:g(jh,{getBands:t})})})}function CU({session:t,speakingState:e,spectrum:A,onAction:n}){return g(Zt,{title:"Overview",subtitle:`${t.agentName||"Obi"} will start your tutorial in a moment`,agentName:t.agentName||"Obi",speakingState:e,description:`Get ready to explore ${t.appName||"the app"} with ${t.agentName||"Obi"}.`,centerVisual:g(vU,{spectrum:A}),actionDisabled:!0,onAction:n})}function wU({id:t,name:e,description:A,duration:n=10,order:i=0,selected:r=!1,onClick:s}){return g("div",{className:`course-container ${r?"selected":""}`,onClick:()=>{s==null||s({id:t,name:e,description:A,duration:n,order:i})},children:[g("div",{className:"header-row",children:[g("h2",{className:"course-title",children:e}),g("span",{className:"duration",children:["~",n," mins"]})]}),A&&g("p",{className:"course-description",children:A})]})}function bU({courses:t=[],selectedCourseId:e=null,loading:A=!1,error:n="",onCourseSelect:i}){const[r,s]=Z(""),a=l=>{const u=l.currentTarget;s(u.value)},o=l=>{i==null||i(l)};if(A)return g("div",{className:"loading",children:"Loading..."});if(n)return g("div",{className:"error",children:n});if(!t||t.length===0)return g("div",{className:"empty",children:"No courses available"});const c=t.filter(l=>l.name.toLowerCase().includes(r.toLowerCase())||(l.description||"").toLowerCase().includes(r.toLowerCase()));return g("div",{className:"tour-select",children:[g("div",{className:"controls",children:[g("div",{className:"tabs",children:g("button",{className:"tab active",children:"All"})}),g("div",{className:"filter",children:[g("svg",{width:"14",height:"14",viewBox:"0 0 14 14",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:g("path",{d:"M10.0417 8.75002H9.42087L9.20004 8.53502C9.96921 7.63585 10.4417 6.47502 10.4417 5.20835C10.4417 2.56085 8.32254 0.441681 5.67504 0.441681C3.02754 0.441681 0.908374 2.56085 0.908374 5.20835C0.908374 7.85585 3.02754 9.97502 5.67504 9.97502C6.94171 9.97502 8.10254 9.50252 9.00171 8.73335L9.22671 8.95418V9.57502L13.2167 13.5592L14.375 12.4008L10.0417 8.75002ZM5.67504 8.75002C3.72754 8.75002 2.15837 7.18085 2.15837 5.20835C2.15837 3.23585 3.72754 1.66668 5.67504 1.66668C7.62254 1.66668 9.19171 3.23585 9.19171 5.20835C9.19171 7.18085 7.62254 8.75002 5.67504 8.75002Z",fill:"#6B7280"})}),g("input",{type:"text",placeholder:"Search...",value:r,onInput:a})]})]}),g("div",{className:"course-grid",children:c.sort((l,u)=>(l.order||0)-(u.order||0)).map(l=>{const u=l.id===e;return g(wU,{id:l.id,name:l.name,description:l.description||"",duration:l.duration,order:l.order||0,selected:u,onClick:o},l.id)})})]})}function yU({open:t,courses:e=[],loading:A=!1,error:n="",agentName:i="Obi",onClose:r,onCourseSelect:s}){const[a,o]=Z(null),c=u=>{o(u)},l=()=>{a&&s&&s(a)};return g(Nh,{open:t,onClose:r,size:"large",children:g("div",{className:"tour-select-modal-container",children:[g("div",{className:"header",children:[g("div",{className:"icon",style:{color:"white"},children:g(sf,{})}),g("div",{className:"title-section",children:A?g(Pe,{children:[g("div",{className:"skeleton skeleton-title"}),g("div",{className:"skeleton skeleton-subtitle"})]}):g(Pe,{children:[g("h1",{children:["Give ",i," a try!"]}),g("p",{className:"subtitle",children:["Pick a tutorial, share your screen, and ",i," will take it from there."]})]})})]}),g("div",{className:"course-list-wrapper",children:g(bU,{courses:e,selectedCourseId:(a==null?void 0:a.id)||"",loading:A,error:n,onCourseSelect:c})}),g("div",{className:"footer",children:[g("button",{className:"obi-button footer-button",onClick:l,disabled:!a,children:[g("span",{children:"Get started"}),g("svg",{xmlns:"http://www.w3.org/2000/svg",width:"17",height:"16",viewBox:"0 0 17 16",fill:"none",children:g("path",{d:"M3.83325 8.00065H13.1666M13.1666 8.00065L8.49992 3.33398M13.1666 8.00065L8.49992 12.6673",stroke:a?"#FAFAFA":"#999","stroke-width":"1.33","stroke-linecap":"round","stroke-linejoin":"round"})})]}),g("p",{className:"footer-text",children:"Sessions are securely recorded for quality improvement purposes."})]})]})})}function UU({session:t,sessionState:e,speakingState:A,spectrum:n,onStart:i,onContinue:r,onShareMicrophone:s,onShareScreen:a}){function o(){e==="connecting"||e==="connected"||!e?i==null||i():e==="volume-check"||e==="mic-check"?r==null||r():e==="mic-share"?s==null||s():e==="screen-share"&&(a==null||a())}return no(()=>{switch(e){case null:case"connecting":case"connected":return g(uU,{session:t,speakingState:A,onAction:o});case"volume-check":return g(gU,{session:t,speakingState:A,onAction:o});case"mic-check":return g(CU,{session:t,speakingState:A,spectrum:n,onAction:o});case"mic-share":return g(hU,{session:t,speakingState:A,onAction:o});case"screen-share":return g(BU,{session:t,speakingState:A,onAction:o});case"navigate":return g(cU,{session:t,speakingState:A,onAction:o});default:return null}},[e,A,i,r,s,a])}function QU(t){const{session:e,sessionState:A,speakingState:n,spectrum:i,onClose:r,onStart:s,onContinue:a,onShareMicrophone:o,onShareScreen:c}=t,l=(t.open??!0)&&(!A||A==="connecting"||A==="connected"||A==="volume-check"||A==="mic-check"||A==="mic-share"||A==="screen-share"||A==="navigate");return g(aU,{open:l,onClose:r,children:()=>g(UU,{session:e,sessionState:A,speakingState:n,spectrum:i,onStart:s,onContinue:a,onShareMicrophone:o,onShareScreen:c})})}function EU(t){let e=t.replace(/[.+^${}()|[\]\\]/g,"\\$&").replace(/\*\*/g,"__DOUBLE_STAR__").replace(/\*/g,"[^/]*").replace(/__DOUBLE_STAR__/g,".*").replace(/\?/g,"[^/]");return new RegExp(`^${e}$`,"i")}function kU(t,e){if(!e||e.length===0)return!1;const A=t.replace(/^https?:\/\//,"").replace(/\/$/,"");return e.some(n=>{try{const i=EU(n);return i.test(A)||i.test(t)}catch(i){return console.warn(`Invalid URL pattern: ${n}`,i),!1}})}function lo(t){if(!t||t.length===0)return!1;const e=window.location.origin+window.location.pathname;return kU(e,t)}function SU(t){var B,b,U;const[e,A]=Z(!1),[n,i]=Z(!1),[r,s]=Z(null),a=TU(t.sdk,t.shadowHost,s);if(!a.client)return null;const o=FU((B=a.client.product)==null?void 0:B.widget_url_blacklist),c=a.client.session,l=!!c,u=l&&!e;let d;switch(c==null?void 0:c.speakingState){case"listening":d="user-speaking";break;case"speaking":d="agent-speaking";break;case"thinking":d="thinking";break;case"busy":d="busy";break}const h=c==null?void 0:c.isPaused,p=a.client.state==="ready"&&!o&&(a.client.selectedPlan||!((b=a.client.product)!=null&&b.widget_link_only_access)),f=u?100:62,m=()=>{var v,w,y,E,T,F;return{name:(v=a.client.selectedPlan)==null?void 0:v.name,description:(w=a.client.selectedPlan)==null?void 0:w.description,appName:(y=a.client.product)==null?void 0:y.name,appLogoUrl:((E=a.client.product)==null?void 0:E.logo_url)||"",url:(T=a.client.product)==null?void 0:T.url,agentName:((F=a.client.product)==null?void 0:F.agent_name)||"Obi"}};return g("div",{children:p&&g(Pe,{children:[g("div",{style:{position:"fixed",top:`calc(100vh - ${f}px)`,left:"50%",transform:"translateX(-50%)",width:"max-content"},children:g(iU,{inPlan:l,isActive:n?!1:void 0,defaultIsActive:!0,isPaused:h,messaging:(c==null?void 0:c.isMicShared)===!1?!0:void 0,speakingStatus:d,spectrum:()=>(c==null?void 0:c.audioSpectrum())||null,courseProgress:r,onOpen:()=>{A(!0)},onCancel:()=>{var v;(v=a.client.session)==null||v.stop()},onPause:()=>{var v,w;(w=(v=a.client.session)==null?void 0:v.pause)==null||w.call(v)},onUnpause:()=>{var v,w;(w=(v=a.client.session)==null?void 0:v.unpause)==null||w.call(v)},onMessagingChange:v=>{var w,y,E,T;v?(y=(w=a.client.session)==null?void 0:w.muteMicrophone)==null||y.call(w):(T=(E=a.client.session)==null?void 0:E.unmuteMicrophone)==null||T.call(E)},onMessage:v=>{a.say(v)}})}),e&&g(yU,{open:e,courses:a.client.plans.map(v=>({id:v.uuid,name:v.name,description:v.description||"",duration:v.duration||0})),loading:!1,agentName:((U=a.client.product)==null?void 0:U.agent_name)||"Obi",onCourseSelect:v=>{const w=a.client.plans.find(y=>y.uuid===v.id)||null;w&&(a.client.selectPlan(w),A(!1),i(!0))},onClose:v=>{v==="user-initiated"&&a.client.selectPlan(null),A(!1)}}),!!a.client.selectedPlan&&g(QU,{open:!0,session:m(),sessionState:(c==null?void 0:c.state)||null,speakingState:(c==null?void 0:c.speakingState)||null,spectrum:()=>(c==null?void 0:c.audioSpectrum())||null,onClose:v=>{v==="user-initiated"&&a.client.stopSession(),i(!1)},onStart:()=>{a.client.selectedPlanUuid&&a.startSession()},onContinue:()=>{c==null||c.continue()},onShareMicrophone:()=>{c==null||c.shareMicrophone()}})]})})}function TU(t,e,A){const[n,i]=Z(0),[r,s]=Z(null);return qe(()=>{t.client&&(t.client.session&&s(t.client.session),t.client.on("sessionStarted",a=>{s(a),i(o=>o+1)}),t.client.on("sessionStopped",()=>{s(null),i(a=>a+1)}),t.client.on("sessionShutdown",()=>{i(a=>a+1)}),t.client.on("sessionResumed",()=>{i(a=>a+1)}),t.client.on("stateChanged",()=>{var a;t.client.state==="ready"&&e.style.setProperty("--obi-color-primary",((a=t.client.product)==null?void 0:a.primary_color)||"#9500FF"),i(o=>o+1)}),t.client.on("planSelected",()=>{i(a=>a+1)}))},[t,t.client]),qe(()=>{if(!r)return;r.on("stateChanged",()=>{i(o=>o+1)}),r.on("speakingStateChanged",()=>{i(o=>o+1)}),r.on("paused",()=>{i(o=>o+1)}),r.on("unpaused",()=>{i(o=>o+1)});const a=o=>{A(o)};return r.on&&r.on("courseProgress",a),()=>{r.off&&r.off("courseProgress",a)}},[r]),t}function FU(t){const[e,A]=Z(()=>lo(t));return qe(()=>{A(lo(t))},[t]),qe(()=>{IU();const n=()=>{A(lo(t))};return window.addEventListener("locationchange",n),window.addEventListener("popstate",n),window.addEventListener("hashchange",n),()=>{window.removeEventListener("locationchange",n),window.removeEventListener("popstate",n),window.removeEventListener("hashchange",n)}},[t]),e}function IU(){const t=window;if(t.__obi_history_patched)return;const{pushState:e,replaceState:A}=window.history,n=i=>function(...r){const s=i.apply(this,r);return window.dispatchEvent(new Event("locationchange")),s};window.history.pushState=n(e),window.history.replaceState=n(A),t.__obi_history_patched=!0}function xU(t){if(document.querySelector("obi-widget")){console.debug("[obi] widget already mounted");return}_U();const e=document.createElement("div");e.id="host",e.style.position="fixed",e.style.zIndex="9999",document.body.appendChild(e);const A=e.attachShadow({mode:"open"}),n=document.createElement("div");n.id="obi-container",n.className="parentclass",A.appendChild(n);const i=new CSSStyleSheet;i.replaceSync(ky),A.adoptedStyleSheets=[i],Uy(g(SU,{sdk:t,shadowHost:e}),n),console.log("[obi-sdk] widget mounted")}function _U(){af("https://fonts.cdnfonts.com/css/satoshi"),af("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap")}function af(t){const e=document.createElement("link");e.href=t,e.rel="stylesheet",document.head.appendChild(e)}const of="49206C6F7665204F6269_session",cf="obi-url-params";class PU extends Sr{constructor(e){super(),this.client=null,this.isActive=!1,this.primaryColour="#9500FF",this.commandQueue=[],this._resumed=!1,this.dispatchCommand=(A,...n)=>{var i,r,s,a;if(!((r=(i=this.client)==null?void 0:i.isReady)!=null&&r.call(i))){this.commandQueue.push({type:A,args:n});return}switch(A){case"update":this.updateConfig(n[0]);break;case"endSession":(a=(s=this.client)==null?void 0:s.stopSession)==null||a.call(s);break;case"say":this.say(n[0]);break;default:console.warn("[obi] unknown command",{commandType:A,args:n})}},e&&this.createClient(e)}async createClient(e){if(this.client){this.client.appToken!==e&&console.warn("[obi] client already exists with different app token");return}console.debug("[obi] creating client");let A=null;const n=this.load();if(n){console.debug("[obi] attempting to load cached client");try{A=vr.deserialise(n,e,"sdk",{apiBaseUrl:"https://app.coragents.ai",captureScreen:this.captureScreen.bind(this)}),this._resumed=!0}catch(i){console.error("[obi] error loading cached client",i)}}A||(A=new vr(e,"sdk",{apiBaseUrl:"https://app.coragents.ai",captureScreen:this.captureScreen.bind(this)})),this.client=A,this.client.on("stateChanged",i=>{var r,s,a;i==="ready"&&this.updateConfig({isActive:(r=this.client)==null?void 0:r.showWidget,primaryColour:((a=(s=this.client)==null?void 0:s.product)==null?void 0:a.primary_color)||"#9500FF"})}),this.client.on("sessionStarted",()=>{this.save()}),this.client.on("sessionStopped",()=>{console.debug("[obi] removing client from local storage"),localStorage.removeItem("obi-client")}),this.client.on("sessionShutdown",i=>{i==="invalid-room"&&(console.debug("[obi] removing client from local storage"),localStorage.removeItem("obi-client"))}),this.client.session&&this.client.resumeSession(i=>{i.on("stateChanged",r=>{r!=="disconnecting"&&r!=="disconnected"&&r!=="error"&&r!=="connecting"&&this.save()}),i.on("paused",()=>{this.save()}),i.on("unpaused",()=>{this.save()})})}async initialise(e={}){const A=this.parsePassiveParams()||void 0;this.commandQueue=e.queuedCommands||[],this._resumed?(this._resumed=!1,this.dispatchCommandQueue()):this.client?(console.debug("[obi] client already exists, initialising"),this.client.initialise({planUuid:A}).then(()=>{this.emit("initialised"),this.dispatchCommandQueue()}).catch(n=>{console.error("[obi] error initialising client",n),this.emit("error",n)})):(console.debug("[obi] client does not exist, dispatching command queue"),this.dispatchCommandQueue())}updateConfig(e){this.updateAppToken(e.apiKey),this.updateActive(e.isActive),this.updatePrimaryColour(e.primaryColour),this.updateIdentity(e.user)}async updateAppToken(e){var A;e===void 0||e==((A=this.client)==null?void 0:A.appToken)||(console.debug("[obi] updating app token"),await this.createClient(e))}updateActive(e){e===void 0||e==this.isActive||(this.isActive=e)}updatePrimaryColour(e){e===void 0||e==this.primaryColour||(this.primaryColour=e)}updateIdentity(e){var A;e===void 0||e==((A=this.client)==null?void 0:A.identity)||this.client.initialise({identity:e||void 0}).catch(n=>{console.error("[obi] error updating identity",n),this.emit("error",n)})}async say(e){var A,n,i;await((i=(n=(A=this.client)==null?void 0:A.session)==null?void 0:n.say)==null?void 0:i.call(n,e))}async startSession(){await this.client.startSession(this.client.selectedPlan.uuid,e=>{e.on("stateChanged",A=>{A!=="disconnecting"&&A!=="disconnected"&&A!=="error"&&A!=="connecting"&&this.save()})})}dispatchCommandQueue(){const e=this.commandQueue;this.commandQueue=[],e.forEach(A=>{try{this.dispatchCommand(A.type,...A.args)}catch(n){console.error("[obi] error dispatching command",n)}})}parsePassiveParams(){let e={};e=JSON.parse(localStorage.getItem(cf)||"{}"),Object.keys(e).length===0&&new URLSearchParams(window.location.search).forEach((r,s)=>{e[s]=r});const A=e[of];if(!A)return null;const n=new URL(window.location.href);return n.searchParams.delete(of),window.history.replaceState({},"",n.toString()),localStorage.removeItem(cf),A}mountWidget(){xU(this),console.debug("[obi] widget mounted")}async captureScreen(){return(await Fv(document.documentElement,{useCORS:!0,allowTaint:!0,foreignObjectRendering:!0})).toDataURL("image/png")}save(){}load(){return localStorage.getItem("obi-client")}}async function lf(t){let e;try{e=window}catch{console.warn("[obi] no window object found"),e={}}return RU({appToken:t,window:e})}async function RU({appToken:t,window:e}){var i,r;if(e.obi){console.warn("[obi] obi object already found on window, skipping");return}t||(t=(i=e==null?void 0:e.obiWidgetConfig)==null?void 0:i.apiKey);let A;try{A=((r=e.ObiSDK)==null?void 0:r.q)||[]}catch{A=[]}const n=new PU(t);return e.ObiSDK=n.dispatchCommand,await n.initialise({queuedCommands:A}),e.obi=n,n.mountWidget(),n}document.readyState==="loading"?document.addEventListener("DOMContentLoaded",()=>{lf()}):lf()})();
|
|
62
|
+
`}),g("article",{style:t.skeletonContainer,role:"status","aria-label":"Loading content",children:[g("section",{style:t.headerSection,children:[g("div",{style:t.avatar,role:"img","aria-label":"Loading avatar",children:g("div",{style:t.shimmer})}),g("div",{style:t.textLines,children:[g("div",{style:t.textLine,role:"presentation","aria-label":"Loading text line 1",children:g("div",{style:t.shimmer})}),g("div",{style:t.textLine,role:"presentation","aria-label":"Loading text line 2",children:g("div",{style:t.shimmer})})]})]}),g("section",{style:t.contentSection,children:g("div",{style:t.contentBlock,role:"presentation","aria-label":"Loading card content",children:g("div",{style:t.shimmer})})})]})]})}function mU({}){const t={host:{display:"block"},shareContainer:{width:"480px",height:"240px",borderRadius:"12px",display:"grid",placeItems:"center",overflow:"hidden",position:"relative",backgroundColor:"var(--obi-color-tint)"},controlsRow:{zIndex:10,gridRowStart:1,gridColumnStart:1,display:"flex",alignSelf:"flex-start",marginTop:"36px",alignItems:"center",gap:"8px"},monitorIconContainer:{display:"flex",height:"40px",width:"40px",aspectRatio:"1",alignItems:"center",justifyContent:"center",gap:"8px",borderRadius:"2px",border:"1px solid #E4E4E7",background:"#F8FAFC",padding:"8px"},monitorIcon:{width:"24px",height:"24px",color:"#111827"},tabSelector:{display:"flex",width:"260px",height:"40px",padding:"4px",alignItems:"center",borderRadius:"2px",background:"#E4E4E7"},tabButton:e=>({display:"flex",flex:1,alignSelf:"stretch",alignItems:"center",justifyContent:"center",gap:"10px",borderRadius:"2px",padding:"6px 12px",border:"none",cursor:"pointer",fontFamily:"'Satoshi', sans-serif",fontSize:"14px",fontWeight:500,opacity:e?1:.4,background:e?"white":"#F8FAFC",boxShadow:e?"0 1px 2px 0 rgba(0, 0, 0, 0.05)":"none"}),skeletonContainer:{marginTop:"104px",gridColumnStart:1,gridRowStart:1,alignSelf:"center"}};return g("div",{style:t.host,children:g("div",{style:t.shareContainer,children:[g("div",{style:t.controlsRow,children:[g("div",{style:t.monitorIconContainer,children:g("svg",{style:t.monitorIcon,fill:"none",stroke:"currentColor",viewBox:"0 0 24 24",children:[g("rect",{width:"20",height:"14",x:"2",y:"3",rx:"2",ry:"2"}),g("line",{x1:"8",x2:"16",y1:"21",y2:"21"}),g("line",{x1:"12",x2:"12",y1:"17",y2:"21"})]})}),g("div",{style:t.tabSelector,children:[g("button",{style:t.tabButton(!1),children:"Tab"}),g("button",{style:t.tabButton(!0),children:"Window"})]})]}),g("div",{style:t.skeletonContainer,children:g(pU,{})})]})})}function BU({session:t,speakingState:e,onAction:A}){return g(Zt,{title:"Connect your screen",subtitle:"Watch for the prompt in your browser",agentName:t.agentName||"Obi",buttonText:"Share screen",speakingState:e,description:`${t.agentName||"Obi"} will guide you through ${t.appName||"the app"} by watching your screen.`,centerVisual:g(mU,{}),actionDisabled:!0,onAction:A})}function vU({spectrum:t}){return g("div",{style:{borderRadius:"15px",boxShadow:"0 0 20px 2px var(--obi-color-primary)",backgroundColor:"var(--obi-color-primary)",transform:"scale(1.6)"},children:g(ao,{isActive:!0,children:g(jh,{getBands:t})})})}function CU({session:t,speakingState:e,spectrum:A,onAction:n}){return g(Zt,{title:"Overview",subtitle:`${t.agentName||"Obi"} will start your tutorial in a moment`,agentName:t.agentName||"Obi",speakingState:e,description:`Get ready to explore ${t.appName||"the app"} with ${t.agentName||"Obi"}.`,centerVisual:g(vU,{spectrum:A}),actionDisabled:!0,onAction:n})}function wU({id:t,name:e,description:A,duration:n=10,order:i=0,selected:r=!1,onClick:s}){return g("div",{className:`course-container ${r?"selected":""}`,onClick:()=>{s==null||s({id:t,name:e,description:A,duration:n,order:i})},children:[g("div",{className:"header-row",children:[g("h2",{className:"course-title",children:e}),g("span",{className:"duration",children:["~",n," mins"]})]}),A&&g("p",{className:"course-description",children:A})]})}function bU({courses:t=[],selectedCourseId:e=null,loading:A=!1,error:n="",onCourseSelect:i}){const[r,s]=Z(""),a=l=>{const u=l.currentTarget;s(u.value)},o=l=>{i==null||i(l)};if(A)return g("div",{className:"loading",children:"Loading..."});if(n)return g("div",{className:"error",children:n});if(!t||t.length===0)return g("div",{className:"empty",children:"No courses available"});const c=t.filter(l=>l.name.toLowerCase().includes(r.toLowerCase())||(l.description||"").toLowerCase().includes(r.toLowerCase()));return g("div",{className:"tour-select",children:[g("div",{className:"controls",children:[g("div",{className:"tabs",children:g("button",{className:"tab active",children:"All"})}),g("div",{className:"filter",children:[g("svg",{width:"14",height:"14",viewBox:"0 0 14 14",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:g("path",{d:"M10.0417 8.75002H9.42087L9.20004 8.53502C9.96921 7.63585 10.4417 6.47502 10.4417 5.20835C10.4417 2.56085 8.32254 0.441681 5.67504 0.441681C3.02754 0.441681 0.908374 2.56085 0.908374 5.20835C0.908374 7.85585 3.02754 9.97502 5.67504 9.97502C6.94171 9.97502 8.10254 9.50252 9.00171 8.73335L9.22671 8.95418V9.57502L13.2167 13.5592L14.375 12.4008L10.0417 8.75002ZM5.67504 8.75002C3.72754 8.75002 2.15837 7.18085 2.15837 5.20835C2.15837 3.23585 3.72754 1.66668 5.67504 1.66668C7.62254 1.66668 9.19171 3.23585 9.19171 5.20835C9.19171 7.18085 7.62254 8.75002 5.67504 8.75002Z",fill:"#6B7280"})}),g("input",{type:"text",placeholder:"Search...",value:r,onInput:a})]})]}),g("div",{className:"course-grid",children:c.sort((l,u)=>(l.order||0)-(u.order||0)).map(l=>{const u=l.id===e;return g(wU,{id:l.id,name:l.name,description:l.description||"",duration:l.duration,order:l.order||0,selected:u,onClick:o},l.id)})})]})}function yU({open:t,courses:e=[],loading:A=!1,error:n="",agentName:i="Obi",onClose:r,onCourseSelect:s}){const[a,o]=Z(null),c=u=>{o(u)},l=()=>{a&&s&&s(a)};return g(Nh,{open:t,onClose:r,size:"large",children:g("div",{className:"tour-select-modal-container",children:[g("div",{className:"header",children:[g("div",{className:"icon",style:{color:"white"},children:g(sf,{})}),g("div",{className:"title-section",children:A?g(Pe,{children:[g("div",{className:"skeleton skeleton-title"}),g("div",{className:"skeleton skeleton-subtitle"})]}):g(Pe,{children:[g("h1",{children:["Give ",i," a try!"]}),g("p",{className:"subtitle",children:["Pick a tutorial, share your screen, and ",i," will take it from there."]})]})})]}),g("div",{className:"course-list-wrapper",children:g(bU,{courses:e,selectedCourseId:(a==null?void 0:a.id)||"",loading:A,error:n,onCourseSelect:c})}),g("div",{className:"footer",children:[g("button",{className:"obi-button footer-button",onClick:l,disabled:!a,children:[g("span",{children:"Get started"}),g("svg",{xmlns:"http://www.w3.org/2000/svg",width:"17",height:"16",viewBox:"0 0 17 16",fill:"none",children:g("path",{d:"M3.83325 8.00065H13.1666M13.1666 8.00065L8.49992 3.33398M13.1666 8.00065L8.49992 12.6673",stroke:a?"#FAFAFA":"#999","stroke-width":"1.33","stroke-linecap":"round","stroke-linejoin":"round"})})]}),g("p",{className:"footer-text",children:"Sessions are securely recorded for quality improvement purposes."})]})]})})}function UU({session:t,sessionState:e,speakingState:A,spectrum:n,onStart:i,onContinue:r,onShareMicrophone:s,onShareScreen:a}){function o(){e==="connecting"||e==="connected"||!e?i==null||i():e==="volume-check"||e==="mic-check"?r==null||r():e==="mic-share"?s==null||s():e==="screen-share"&&(a==null||a())}return no(()=>{switch(e){case null:case"connecting":case"connected":return g(uU,{session:t,speakingState:A,onAction:o});case"volume-check":return g(gU,{session:t,speakingState:A,onAction:o});case"mic-check":return g(CU,{session:t,speakingState:A,spectrum:n,onAction:o});case"mic-share":return g(hU,{session:t,speakingState:A,onAction:o});case"screen-share":return g(BU,{session:t,speakingState:A,onAction:o});case"navigate":return g(cU,{session:t,speakingState:A,onAction:o});default:return null}},[e,A,i,r,s,a])}function QU(t){const{session:e,sessionState:A,speakingState:n,spectrum:i,onClose:r,onStart:s,onContinue:a,onShareMicrophone:o,onShareScreen:c}=t,l=(t.open??!0)&&(!A||A==="connecting"||A==="connected"||A==="volume-check"||A==="mic-check"||A==="mic-share"||A==="screen-share"||A==="navigate");return g(aU,{open:l,onClose:r,children:()=>g(UU,{session:e,sessionState:A,speakingState:n,spectrum:i,onStart:s,onContinue:a,onShareMicrophone:o,onShareScreen:c})})}function EU(t){let e=t.replace(/[.+^${}()|[\]\\]/g,"\\$&").replace(/\*\*/g,"__DOUBLE_STAR__").replace(/\*/g,"[^/]*").replace(/__DOUBLE_STAR__/g,".*").replace(/\?/g,"[^/]");return new RegExp(`^${e}$`,"i")}function kU(t,e){if(!e||e.length===0)return!1;const A=t.replace(/^https?:\/\//,"").replace(/\/$/,"");return e.some(n=>{try{const i=EU(n);return i.test(A)||i.test(t)}catch(i){return console.warn(`Invalid URL pattern: ${n}`,i),!1}})}function lo(t){if(!t||t.length===0)return!1;const e=window.location.origin+window.location.pathname;return kU(e,t)}function SU(t){var B,b,U;const[e,A]=Z(!1),[n,i]=Z(!1),[r,s]=Z(null),a=TU(t.sdk,t.shadowHost,s);if(!a.client)return null;const o=FU((B=a.client.product)==null?void 0:B.widget_url_blacklist),c=a.client.session,l=!!c,u=l&&!e;let d;switch(c==null?void 0:c.speakingState){case"listening":d="user-speaking";break;case"speaking":d="agent-speaking";break;case"thinking":d="thinking";break;case"busy":d="busy";break}const h=c==null?void 0:c.isPaused,p=a.client.state==="ready"&&!o&&(a.client.selectedPlan||!((b=a.client.product)!=null&&b.widget_link_only_access)),f=u?100:62,m=()=>{var v,w,y,E,T,F;return{name:(v=a.client.selectedPlan)==null?void 0:v.name,description:(w=a.client.selectedPlan)==null?void 0:w.description,appName:(y=a.client.product)==null?void 0:y.name,appLogoUrl:((E=a.client.product)==null?void 0:E.logo_url)||"",url:(T=a.client.product)==null?void 0:T.url,agentName:((F=a.client.product)==null?void 0:F.agent_name)||"Obi"}};return g("div",{children:p&&g(Pe,{children:[g("div",{style:{position:"fixed",top:`calc(100vh - ${f}px)`,left:"50%",transform:"translateX(-50%)",width:"max-content"},children:g(iU,{inPlan:l,isActive:n?!1:void 0,defaultIsActive:!0,isPaused:h,messaging:(c==null?void 0:c.isMicShared)===!1?!0:void 0,speakingStatus:d,spectrum:()=>(c==null?void 0:c.audioSpectrum())||null,courseProgress:r,onOpen:()=>{A(!0)},onCancel:()=>{var v;(v=a.client.session)==null||v.stop()},onPause:()=>{var v,w;(w=(v=a.client.session)==null?void 0:v.pause)==null||w.call(v)},onUnpause:()=>{var v,w;(w=(v=a.client.session)==null?void 0:v.unpause)==null||w.call(v)},onMessagingChange:v=>{var w,y,E,T;v?(y=(w=a.client.session)==null?void 0:w.muteMicrophone)==null||y.call(w):(T=(E=a.client.session)==null?void 0:E.unmuteMicrophone)==null||T.call(E)},onMessage:v=>{a.say(v)}})}),e&&g(yU,{open:e,courses:a.client.plans.map(v=>({id:v.uuid,name:v.name,description:v.description||"",duration:v.duration||0})),loading:!1,agentName:((U=a.client.product)==null?void 0:U.agent_name)||"Obi",onCourseSelect:v=>{const w=a.client.plans.find(y=>y.uuid===v.id)||null;w&&(a.client.selectPlan(w),A(!1),i(!0))},onClose:v=>{v==="user-initiated"&&a.client.selectPlan(null),A(!1)}}),!!a.client.selectedPlan&&g(QU,{open:!0,session:m(),sessionState:(c==null?void 0:c.state)||null,speakingState:(c==null?void 0:c.speakingState)||null,spectrum:()=>(c==null?void 0:c.audioSpectrum())||null,onClose:v=>{v==="user-initiated"&&a.client.stopSession(),i(!1)},onStart:()=>{a.client.selectedPlanUuid&&a.startSession()},onContinue:()=>{c==null||c.continue()},onShareMicrophone:()=>{c==null||c.shareMicrophone()}})]})})}function TU(t,e,A){const[n,i]=Z(0),[r,s]=Z(null);return qe(()=>{t.client&&(t.client.session&&s(t.client.session),t.client.on("sessionStarted",a=>{s(a),i(o=>o+1)}),t.client.on("sessionStopped",()=>{s(null),i(a=>a+1)}),t.client.on("sessionShutdown",()=>{i(a=>a+1)}),t.client.on("sessionResumed",()=>{i(a=>a+1)}),t.client.on("stateChanged",()=>{var a;t.client.state==="ready"&&e.style.setProperty("--obi-color-primary",((a=t.client.product)==null?void 0:a.primary_color)||"#9500FF"),i(o=>o+1)}),t.client.on("planSelected",()=>{i(a=>a+1)}))},[t,t.client]),qe(()=>{if(!r)return;r.on("stateChanged",()=>{i(o=>o+1)}),r.on("speakingStateChanged",()=>{i(o=>o+1)}),r.on("paused",()=>{i(o=>o+1)}),r.on("unpaused",()=>{i(o=>o+1)});const a=o=>{A(o)};return r.on&&r.on("courseProgress",a),()=>{r.off&&r.off("courseProgress",a)}},[r]),t}function FU(t){const[e,A]=Z(()=>lo(t));return qe(()=>{A(lo(t))},[t]),qe(()=>{IU();const n=()=>{A(lo(t))};return window.addEventListener("locationchange",n),window.addEventListener("popstate",n),window.addEventListener("hashchange",n),()=>{window.removeEventListener("locationchange",n),window.removeEventListener("popstate",n),window.removeEventListener("hashchange",n)}},[t]),e}function IU(){const t=window;if(t.__obi_history_patched)return;const{pushState:e,replaceState:A}=window.history,n=i=>function(...r){const s=i.apply(this,r);return window.dispatchEvent(new Event("locationchange")),s};window.history.pushState=n(e),window.history.replaceState=n(A),t.__obi_history_patched=!0}function xU(t){if(document.querySelector("obi-widget")){console.debug("[obi] widget already mounted");return}_U();const e=document.createElement("div");e.id="host",e.style.position="fixed",e.style.zIndex="9999",document.body.appendChild(e);const A=e.attachShadow({mode:"open"}),n=document.createElement("div");n.id="obi-container",n.className="parentclass",A.appendChild(n);const i=new CSSStyleSheet;i.replaceSync(ky),A.adoptedStyleSheets=[i],Uy(g(SU,{sdk:t,shadowHost:e}),n),console.log("[obi-sdk] widget mounted")}function _U(){af("https://fonts.cdnfonts.com/css/satoshi"),af("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap")}function af(t){const e=document.createElement("link");e.href=t,e.rel="stylesheet",document.head.appendChild(e)}const of="49206C6F7665204F6269_session",cf="obi-url-params";class PU extends Sr{constructor(e){super(),this.client=null,this.isActive=!1,this.primaryColour="#9500FF",this.commandQueue=[],this._resumed=!1,this.dispatchCommand=(A,...n)=>{var i,r,s,a;if(!((r=(i=this.client)==null?void 0:i.isReady)!=null&&r.call(i))){this.commandQueue.push({type:A,args:n});return}switch(A){case"update":this.updateConfig(n[0]);break;case"endSession":(a=(s=this.client)==null?void 0:s.stopSession)==null||a.call(s);break;case"say":this.say(n[0]);break;default:console.warn("[obi] unknown command",{commandType:A,args:n})}},e&&this.createClient(e)}async createClient(e){if(this.client){this.client.appToken!==e&&console.warn("[obi] client already exists with different app token");return}console.debug("[obi] creating client");let A=null;const n=this.load();if(n){console.debug("[obi] attempting to load cached client");try{A=vr.deserialise(n,e,"sdk",{apiBaseUrl:"https://app.coragents.ai",captureScreen:this.captureScreen.bind(this)}),this._resumed=!0}catch(i){console.error("[obi] error loading cached client",i)}}A||(A=new vr(e,"sdk",{apiBaseUrl:"https://app.coragents.ai",captureScreen:this.captureScreen.bind(this)})),this.client=A,this.client.on("stateChanged",i=>{var r,s,a;i==="ready"&&this.updateConfig({isActive:(r=this.client)==null?void 0:r.showWidget,primaryColour:((a=(s=this.client)==null?void 0:s.product)==null?void 0:a.primary_color)||"#9500FF"})}),this.client.on("sessionStarted",()=>{this.save()}),this.client.on("sessionStopped",()=>{console.debug("[obi] removing client from local storage"),localStorage.removeItem("obi-client")}),this.client.on("sessionShutdown",i=>{i==="invalid-room"&&(console.debug("[obi] removing client from local storage"),localStorage.removeItem("obi-client"))}),this.client.session&&this.client.resumeSession(i=>{i.on("stateChanged",r=>{r!=="disconnecting"&&r!=="disconnected"&&r!=="error"&&r!=="connecting"&&this.save()}),i.on("paused",()=>{this.save()}),i.on("unpaused",()=>{this.save()})})}async initialise(e={}){const A=this.parsePassiveParams()||void 0;this.commandQueue=e.queuedCommands||[],this._resumed?(this._resumed=!1,this.dispatchCommandQueue()):this.client?(console.debug("[obi] client already exists, initialising"),this.client.initialise({planUuid:A}).then(()=>{this.emit("initialised"),this.dispatchCommandQueue()}).catch(n=>{console.error("[obi] error initialising client",n),this.emit("error",n)})):(console.debug("[obi] client does not exist, dispatching command queue"),this.dispatchCommandQueue())}updateConfig(e){this.updateAppToken(e.apiKey),this.updateActive(e.isActive),this.updatePrimaryColour(e.primaryColour),this.updateIdentity(e.user)}async updateAppToken(e){var A;e===void 0||e==((A=this.client)==null?void 0:A.appToken)||(console.debug("[obi] updating app token"),await this.createClient(e))}updateActive(e){e===void 0||e==this.isActive||(this.isActive=e)}updatePrimaryColour(e){e===void 0||e==this.primaryColour||(this.primaryColour=e)}updateIdentity(e){var A;e===void 0||e==((A=this.client)==null?void 0:A.identity)||this.client.initialise({identity:e||void 0}).catch(n=>{console.error("[obi] error updating identity",n),this.emit("error",n)})}async say(e){var A,n,i;await((i=(n=(A=this.client)==null?void 0:A.session)==null?void 0:n.say)==null?void 0:i.call(n,e))}async startSession(){await this.client.startSession(this.client.selectedPlan.uuid,e=>{e.on("stateChanged",A=>{A!=="disconnecting"&&A!=="disconnected"&&A!=="error"&&A!=="connecting"&&this.save()})})}dispatchCommandQueue(){const e=this.commandQueue;this.commandQueue=[],e.forEach(A=>{console.debug("[obi] dispatching command",A);try{this.dispatchCommand(A.type,...A.args||[])}catch(n){console.error("[obi] error dispatching command",n)}})}parsePassiveParams(){let e={};e=JSON.parse(localStorage.getItem(cf)||"{}"),Object.keys(e).length===0&&new URLSearchParams(window.location.search).forEach((r,s)=>{e[s]=r});const A=e[of];if(!A)return null;const n=new URL(window.location.href);return n.searchParams.delete(of),window.history.replaceState({},"",n.toString()),localStorage.removeItem(cf),A}mountWidget(){xU(this),console.debug("[obi] widget mounted")}async captureScreen(){return(await Fv(document.documentElement,{useCORS:!0,allowTaint:!0,foreignObjectRendering:!0})).toDataURL("image/png")}save(){}load(){return localStorage.getItem("obi-client")}}async function lf(t){let e;try{e=window}catch{console.warn("[obi] no window object found"),e={}}return RU({appToken:t,window:e})}async function RU({appToken:t,window:e}){var i,r;if(e.obi){console.warn("[obi] obi object already found on window, skipping");return}t||(t=(i=e==null?void 0:e.obiWidgetConfig)==null?void 0:i.apiKey);let A;try{A=((r=e.ObiSDK)==null?void 0:r.q)||[]}catch{A=[]}const n=new PU(t);return e.ObiSDK=n.dispatchCommand,await n.initialise({queuedCommands:A}),e.obi=n,n.mountWidget(),n}document.readyState==="loading"?document.addEventListener("DOMContentLoaded",()=>{lf()}):lf()})();
|
|
@@ -59,4 +59,4 @@ a=extmap-allow-mixed`)!==-1){const r=i.sdp.split(`
|
|
|
59
59
|
50% { transform: translateX(344px); }
|
|
60
60
|
100% { transform: translateX(344px); }
|
|
61
61
|
}
|
|
62
|
-
`}),g("article",{style:t.skeletonContainer,role:"status","aria-label":"Loading content",children:[g("section",{style:t.headerSection,children:[g("div",{style:t.avatar,role:"img","aria-label":"Loading avatar",children:g("div",{style:t.shimmer})}),g("div",{style:t.textLines,children:[g("div",{style:t.textLine,role:"presentation","aria-label":"Loading text line 1",children:g("div",{style:t.shimmer})}),g("div",{style:t.textLine,role:"presentation","aria-label":"Loading text line 2",children:g("div",{style:t.shimmer})})]})]}),g("section",{style:t.contentSection,children:g("div",{style:t.contentBlock,role:"presentation","aria-label":"Loading card content",children:g("div",{style:t.shimmer})})})]})]})}function mU({}){const t={host:{display:"block"},shareContainer:{width:"480px",height:"240px",borderRadius:"12px",display:"grid",placeItems:"center",overflow:"hidden",position:"relative",backgroundColor:"var(--obi-color-tint)"},controlsRow:{zIndex:10,gridRowStart:1,gridColumnStart:1,display:"flex",alignSelf:"flex-start",marginTop:"36px",alignItems:"center",gap:"8px"},monitorIconContainer:{display:"flex",height:"40px",width:"40px",aspectRatio:"1",alignItems:"center",justifyContent:"center",gap:"8px",borderRadius:"2px",border:"1px solid #E4E4E7",background:"#F8FAFC",padding:"8px"},monitorIcon:{width:"24px",height:"24px",color:"#111827"},tabSelector:{display:"flex",width:"260px",height:"40px",padding:"4px",alignItems:"center",borderRadius:"2px",background:"#E4E4E7"},tabButton:e=>({display:"flex",flex:1,alignSelf:"stretch",alignItems:"center",justifyContent:"center",gap:"10px",borderRadius:"2px",padding:"6px 12px",border:"none",cursor:"pointer",fontFamily:"'Satoshi', sans-serif",fontSize:"14px",fontWeight:500,opacity:e?1:.4,background:e?"white":"#F8FAFC",boxShadow:e?"0 1px 2px 0 rgba(0, 0, 0, 0.05)":"none"}),skeletonContainer:{marginTop:"104px",gridColumnStart:1,gridRowStart:1,alignSelf:"center"}};return g("div",{style:t.host,children:g("div",{style:t.shareContainer,children:[g("div",{style:t.controlsRow,children:[g("div",{style:t.monitorIconContainer,children:g("svg",{style:t.monitorIcon,fill:"none",stroke:"currentColor",viewBox:"0 0 24 24",children:[g("rect",{width:"20",height:"14",x:"2",y:"3",rx:"2",ry:"2"}),g("line",{x1:"8",x2:"16",y1:"21",y2:"21"}),g("line",{x1:"12",x2:"12",y1:"17",y2:"21"})]})}),g("div",{style:t.tabSelector,children:[g("button",{style:t.tabButton(!1),children:"Tab"}),g("button",{style:t.tabButton(!0),children:"Window"})]})]}),g("div",{style:t.skeletonContainer,children:g(pU,{})})]})})}function BU({session:t,speakingState:e,onAction:A}){return g(Zt,{title:"Connect your screen",subtitle:"Watch for the prompt in your browser",agentName:t.agentName||"Obi",buttonText:"Share screen",speakingState:e,description:`${t.agentName||"Obi"} will guide you through ${t.appName||"the app"} by watching your screen.`,centerVisual:g(mU,{}),actionDisabled:!0,onAction:A})}function vU({spectrum:t}){return g("div",{style:{borderRadius:"15px",boxShadow:"0 0 20px 2px var(--obi-color-primary)",backgroundColor:"var(--obi-color-primary)",transform:"scale(1.6)"},children:g(ao,{isActive:!0,children:g(jh,{getBands:t})})})}function CU({session:t,speakingState:e,spectrum:A,onAction:n}){return g(Zt,{title:"Overview",subtitle:`${t.agentName||"Obi"} will start your tutorial in a moment`,agentName:t.agentName||"Obi",speakingState:e,description:`Get ready to explore ${t.appName||"the app"} with ${t.agentName||"Obi"}.`,centerVisual:g(vU,{spectrum:A}),actionDisabled:!0,onAction:n})}function wU({id:t,name:e,description:A,duration:n=10,order:i=0,selected:r=!1,onClick:s}){return g("div",{className:`course-container ${r?"selected":""}`,onClick:()=>{s==null||s({id:t,name:e,description:A,duration:n,order:i})},children:[g("div",{className:"header-row",children:[g("h2",{className:"course-title",children:e}),g("span",{className:"duration",children:["~",n," mins"]})]}),A&&g("p",{className:"course-description",children:A})]})}function bU({courses:t=[],selectedCourseId:e=null,loading:A=!1,error:n="",onCourseSelect:i}){const[r,s]=Z(""),a=l=>{const u=l.currentTarget;s(u.value)},o=l=>{i==null||i(l)};if(A)return g("div",{className:"loading",children:"Loading..."});if(n)return g("div",{className:"error",children:n});if(!t||t.length===0)return g("div",{className:"empty",children:"No courses available"});const c=t.filter(l=>l.name.toLowerCase().includes(r.toLowerCase())||(l.description||"").toLowerCase().includes(r.toLowerCase()));return g("div",{className:"tour-select",children:[g("div",{className:"controls",children:[g("div",{className:"tabs",children:g("button",{className:"tab active",children:"All"})}),g("div",{className:"filter",children:[g("svg",{width:"14",height:"14",viewBox:"0 0 14 14",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:g("path",{d:"M10.0417 8.75002H9.42087L9.20004 8.53502C9.96921 7.63585 10.4417 6.47502 10.4417 5.20835C10.4417 2.56085 8.32254 0.441681 5.67504 0.441681C3.02754 0.441681 0.908374 2.56085 0.908374 5.20835C0.908374 7.85585 3.02754 9.97502 5.67504 9.97502C6.94171 9.97502 8.10254 9.50252 9.00171 8.73335L9.22671 8.95418V9.57502L13.2167 13.5592L14.375 12.4008L10.0417 8.75002ZM5.67504 8.75002C3.72754 8.75002 2.15837 7.18085 2.15837 5.20835C2.15837 3.23585 3.72754 1.66668 5.67504 1.66668C7.62254 1.66668 9.19171 3.23585 9.19171 5.20835C9.19171 7.18085 7.62254 8.75002 5.67504 8.75002Z",fill:"#6B7280"})}),g("input",{type:"text",placeholder:"Search...",value:r,onInput:a})]})]}),g("div",{className:"course-grid",children:c.sort((l,u)=>(l.order||0)-(u.order||0)).map(l=>{const u=l.id===e;return g(wU,{id:l.id,name:l.name,description:l.description||"",duration:l.duration,order:l.order||0,selected:u,onClick:o},l.id)})})]})}function yU({open:t,courses:e=[],loading:A=!1,error:n="",agentName:i="Obi",onClose:r,onCourseSelect:s}){const[a,o]=Z(null),c=u=>{o(u)},l=()=>{a&&s&&s(a)};return g(Nh,{open:t,onClose:r,size:"large",children:g("div",{className:"tour-select-modal-container",children:[g("div",{className:"header",children:[g("div",{className:"icon",style:{color:"white"},children:g(sf,{})}),g("div",{className:"title-section",children:A?g(Pe,{children:[g("div",{className:"skeleton skeleton-title"}),g("div",{className:"skeleton skeleton-subtitle"})]}):g(Pe,{children:[g("h1",{children:["Give ",i," a try!"]}),g("p",{className:"subtitle",children:["Pick a tutorial, share your screen, and ",i," will take it from there."]})]})})]}),g("div",{className:"course-list-wrapper",children:g(bU,{courses:e,selectedCourseId:(a==null?void 0:a.id)||"",loading:A,error:n,onCourseSelect:c})}),g("div",{className:"footer",children:[g("button",{className:"obi-button footer-button",onClick:l,disabled:!a,children:[g("span",{children:"Get started"}),g("svg",{xmlns:"http://www.w3.org/2000/svg",width:"17",height:"16",viewBox:"0 0 17 16",fill:"none",children:g("path",{d:"M3.83325 8.00065H13.1666M13.1666 8.00065L8.49992 3.33398M13.1666 8.00065L8.49992 12.6673",stroke:a?"#FAFAFA":"#999","stroke-width":"1.33","stroke-linecap":"round","stroke-linejoin":"round"})})]}),g("p",{className:"footer-text",children:"Sessions are securely recorded for quality improvement purposes."})]})]})})}function UU({session:t,sessionState:e,speakingState:A,spectrum:n,onStart:i,onContinue:r,onShareMicrophone:s,onShareScreen:a}){function o(){e==="connecting"||e==="connected"||!e?i==null||i():e==="volume-check"||e==="mic-check"?r==null||r():e==="mic-share"?s==null||s():e==="screen-share"&&(a==null||a())}return no(()=>{switch(e){case null:case"connecting":case"connected":return g(uU,{session:t,speakingState:A,onAction:o});case"volume-check":return g(gU,{session:t,speakingState:A,onAction:o});case"mic-check":return g(CU,{session:t,speakingState:A,spectrum:n,onAction:o});case"mic-share":return g(hU,{session:t,speakingState:A,onAction:o});case"screen-share":return g(BU,{session:t,speakingState:A,onAction:o});case"navigate":return g(cU,{session:t,speakingState:A,onAction:o});default:return null}},[e,A,i,r,s,a])}function QU(t){const{session:e,sessionState:A,speakingState:n,spectrum:i,onClose:r,onStart:s,onContinue:a,onShareMicrophone:o,onShareScreen:c}=t,l=(t.open??!0)&&(!A||A==="connecting"||A==="connected"||A==="volume-check"||A==="mic-check"||A==="mic-share"||A==="screen-share"||A==="navigate");return g(aU,{open:l,onClose:r,children:()=>g(UU,{session:e,sessionState:A,speakingState:n,spectrum:i,onStart:s,onContinue:a,onShareMicrophone:o,onShareScreen:c})})}function EU(t){let e=t.replace(/[.+^${}()|[\]\\]/g,"\\$&").replace(/\*\*/g,"__DOUBLE_STAR__").replace(/\*/g,"[^/]*").replace(/__DOUBLE_STAR__/g,".*").replace(/\?/g,"[^/]");return new RegExp(`^${e}$`,"i")}function kU(t,e){if(!e||e.length===0)return!1;const A=t.replace(/^https?:\/\//,"").replace(/\/$/,"");return e.some(n=>{try{const i=EU(n);return i.test(A)||i.test(t)}catch(i){return console.warn(`Invalid URL pattern: ${n}`,i),!1}})}function lo(t){if(!t||t.length===0)return!1;const e=window.location.origin+window.location.pathname;return kU(e,t)}function SU(t){var B,b,U;const[e,A]=Z(!1),[n,i]=Z(!1),[r,s]=Z(null),a=TU(t.sdk,t.shadowHost,s);if(!a.client)return null;const o=FU((B=a.client.product)==null?void 0:B.widget_url_blacklist),c=a.client.session,l=!!c,u=l&&!e;let d;switch(c==null?void 0:c.speakingState){case"listening":d="user-speaking";break;case"speaking":d="agent-speaking";break;case"thinking":d="thinking";break;case"busy":d="busy";break}const h=c==null?void 0:c.isPaused,p=a.client.state==="ready"&&!o&&(a.client.selectedPlan||!((b=a.client.product)!=null&&b.widget_link_only_access)),f=u?100:62,m=()=>{var v,w,y,E,T,F;return{name:(v=a.client.selectedPlan)==null?void 0:v.name,description:(w=a.client.selectedPlan)==null?void 0:w.description,appName:(y=a.client.product)==null?void 0:y.name,appLogoUrl:((E=a.client.product)==null?void 0:E.logo_url)||"",url:(T=a.client.product)==null?void 0:T.url,agentName:((F=a.client.product)==null?void 0:F.agent_name)||"Obi"}};return g("div",{children:p&&g(Pe,{children:[g("div",{style:{position:"fixed",top:`calc(100vh - ${f}px)`,left:"50%",transform:"translateX(-50%)",width:"max-content"},children:g(iU,{inPlan:l,isActive:n?!1:void 0,defaultIsActive:!0,isPaused:h,messaging:(c==null?void 0:c.isMicShared)===!1?!0:void 0,speakingStatus:d,spectrum:()=>(c==null?void 0:c.audioSpectrum())||null,courseProgress:r,onOpen:()=>{A(!0)},onCancel:()=>{var v;(v=a.client.session)==null||v.stop()},onPause:()=>{var v,w;(w=(v=a.client.session)==null?void 0:v.pause)==null||w.call(v)},onUnpause:()=>{var v,w;(w=(v=a.client.session)==null?void 0:v.unpause)==null||w.call(v)},onMessagingChange:v=>{var w,y,E,T;v?(y=(w=a.client.session)==null?void 0:w.muteMicrophone)==null||y.call(w):(T=(E=a.client.session)==null?void 0:E.unmuteMicrophone)==null||T.call(E)},onMessage:v=>{a.say(v)}})}),e&&g(yU,{open:e,courses:a.client.plans.map(v=>({id:v.uuid,name:v.name,description:v.description||"",duration:v.duration||0})),loading:!1,agentName:((U=a.client.product)==null?void 0:U.agent_name)||"Obi",onCourseSelect:v=>{const w=a.client.plans.find(y=>y.uuid===v.id)||null;w&&(a.client.selectPlan(w),A(!1),i(!0))},onClose:v=>{v==="user-initiated"&&a.client.selectPlan(null),A(!1)}}),!!a.client.selectedPlan&&g(QU,{open:!0,session:m(),sessionState:(c==null?void 0:c.state)||null,speakingState:(c==null?void 0:c.speakingState)||null,spectrum:()=>(c==null?void 0:c.audioSpectrum())||null,onClose:v=>{v==="user-initiated"&&a.client.stopSession(),i(!1)},onStart:()=>{a.client.selectedPlanUuid&&a.startSession()},onContinue:()=>{c==null||c.continue()},onShareMicrophone:()=>{c==null||c.shareMicrophone()}})]})})}function TU(t,e,A){const[n,i]=Z(0),[r,s]=Z(null);return qe(()=>{t.client&&(t.client.session&&s(t.client.session),t.client.on("sessionStarted",a=>{s(a),i(o=>o+1)}),t.client.on("sessionStopped",()=>{s(null),i(a=>a+1)}),t.client.on("sessionShutdown",()=>{i(a=>a+1)}),t.client.on("sessionResumed",()=>{i(a=>a+1)}),t.client.on("stateChanged",()=>{var a;t.client.state==="ready"&&e.style.setProperty("--obi-color-primary",((a=t.client.product)==null?void 0:a.primary_color)||"#9500FF"),i(o=>o+1)}),t.client.on("planSelected",()=>{i(a=>a+1)}))},[t,t.client]),qe(()=>{if(!r)return;r.on("stateChanged",()=>{i(o=>o+1)}),r.on("speakingStateChanged",()=>{i(o=>o+1)}),r.on("paused",()=>{i(o=>o+1)}),r.on("unpaused",()=>{i(o=>o+1)});const a=o=>{A(o)};return r.on&&r.on("courseProgress",a),()=>{r.off&&r.off("courseProgress",a)}},[r]),t}function FU(t){const[e,A]=Z(()=>lo(t));return qe(()=>{A(lo(t))},[t]),qe(()=>{IU();const n=()=>{A(lo(t))};return window.addEventListener("locationchange",n),window.addEventListener("popstate",n),window.addEventListener("hashchange",n),()=>{window.removeEventListener("locationchange",n),window.removeEventListener("popstate",n),window.removeEventListener("hashchange",n)}},[t]),e}function IU(){const t=window;if(t.__obi_history_patched)return;const{pushState:e,replaceState:A}=window.history,n=i=>function(...r){const s=i.apply(this,r);return window.dispatchEvent(new Event("locationchange")),s};window.history.pushState=n(e),window.history.replaceState=n(A),t.__obi_history_patched=!0}function xU(t){if(document.querySelector("obi-widget")){console.debug("[obi] widget already mounted");return}_U();const e=document.createElement("div");e.id="host",e.style.position="fixed",e.style.zIndex="9999",document.body.appendChild(e);const A=e.attachShadow({mode:"open"}),n=document.createElement("div");n.id="obi-container",n.className="parentclass",A.appendChild(n);const i=new CSSStyleSheet;i.replaceSync(ky),A.adoptedStyleSheets=[i],Uy(g(SU,{sdk:t,shadowHost:e}),n),console.log("[obi-sdk] widget mounted")}function _U(){af("https://fonts.cdnfonts.com/css/satoshi"),af("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap")}function af(t){const e=document.createElement("link");e.href=t,e.rel="stylesheet",document.head.appendChild(e)}const of="49206C6F7665204F6269_session",cf="obi-url-params";class PU extends Sr{constructor(e){super(),this.client=null,this.isActive=!1,this.primaryColour="#9500FF",this.commandQueue=[],this._resumed=!1,this.dispatchCommand=(A,...n)=>{var i,r,s,a;if(!((r=(i=this.client)==null?void 0:i.isReady)!=null&&r.call(i))){this.commandQueue.push({type:A,args:n});return}switch(A){case"update":this.updateConfig(n[0]);break;case"endSession":(a=(s=this.client)==null?void 0:s.stopSession)==null||a.call(s);break;case"say":this.say(n[0]);break;default:console.warn("[obi] unknown command",{commandType:A,args:n})}},e&&this.createClient(e)}async createClient(e){if(this.client){this.client.appToken!==e&&console.warn("[obi] client already exists with different app token");return}console.debug("[obi] creating client");let A=null;const n=this.load();if(n){console.debug("[obi] attempting to load cached client");try{A=vr.deserialise(n,e,"sdk",{apiBaseUrl:"https://app.coragents.ai",captureScreen:this.captureScreen.bind(this)}),this._resumed=!0}catch(i){console.error("[obi] error loading cached client",i)}}A||(A=new vr(e,"sdk",{apiBaseUrl:"https://app.coragents.ai",captureScreen:this.captureScreen.bind(this)})),this.client=A,this.client.on("stateChanged",i=>{var r,s,a;i==="ready"&&this.updateConfig({isActive:(r=this.client)==null?void 0:r.showWidget,primaryColour:((a=(s=this.client)==null?void 0:s.product)==null?void 0:a.primary_color)||"#9500FF"})}),this.client.on("sessionStarted",()=>{this.save()}),this.client.on("sessionStopped",()=>{console.debug("[obi] removing client from local storage"),localStorage.removeItem("obi-client")}),this.client.on("sessionShutdown",i=>{i==="invalid-room"&&(console.debug("[obi] removing client from local storage"),localStorage.removeItem("obi-client"))}),this.client.session&&this.client.resumeSession(i=>{i.on("stateChanged",r=>{r!=="disconnecting"&&r!=="disconnected"&&r!=="error"&&r!=="connecting"&&this.save()}),i.on("paused",()=>{this.save()}),i.on("unpaused",()=>{this.save()})})}async initialise(e={}){const A=this.parsePassiveParams()||void 0;this.commandQueue=e.queuedCommands||[],this._resumed?(this._resumed=!1,this.dispatchCommandQueue()):this.client?(console.debug("[obi] client already exists, initialising"),this.client.initialise({planUuid:A}).then(()=>{this.emit("initialised"),this.dispatchCommandQueue()}).catch(n=>{console.error("[obi] error initialising client",n),this.emit("error",n)})):(console.debug("[obi] client does not exist, dispatching command queue"),this.dispatchCommandQueue())}updateConfig(e){this.updateAppToken(e.apiKey),this.updateActive(e.isActive),this.updatePrimaryColour(e.primaryColour),this.updateIdentity(e.user)}async updateAppToken(e){var A;e===void 0||e==((A=this.client)==null?void 0:A.appToken)||(console.debug("[obi] updating app token"),await this.createClient(e))}updateActive(e){e===void 0||e==this.isActive||(this.isActive=e)}updatePrimaryColour(e){e===void 0||e==this.primaryColour||(this.primaryColour=e)}updateIdentity(e){var A;e===void 0||e==((A=this.client)==null?void 0:A.identity)||this.client.initialise({identity:e||void 0}).catch(n=>{console.error("[obi] error updating identity",n),this.emit("error",n)})}async say(e){var A,n,i;await((i=(n=(A=this.client)==null?void 0:A.session)==null?void 0:n.say)==null?void 0:i.call(n,e))}async startSession(){await this.client.startSession(this.client.selectedPlan.uuid,e=>{e.on("stateChanged",A=>{A!=="disconnecting"&&A!=="disconnected"&&A!=="error"&&A!=="connecting"&&this.save()})})}dispatchCommandQueue(){const e=this.commandQueue;this.commandQueue=[],e.forEach(A=>{try{this.dispatchCommand(A.type,...A.args)}catch(n){console.error("[obi] error dispatching command",n)}})}parsePassiveParams(){let e={};e=JSON.parse(localStorage.getItem(cf)||"{}"),Object.keys(e).length===0&&new URLSearchParams(window.location.search).forEach((r,s)=>{e[s]=r});const A=e[of];if(!A)return null;const n=new URL(window.location.href);return n.searchParams.delete(of),window.history.replaceState({},"",n.toString()),localStorage.removeItem(cf),A}mountWidget(){xU(this),console.debug("[obi] widget mounted")}async captureScreen(){return(await Fv(document.documentElement,{useCORS:!0,allowTaint:!0,foreignObjectRendering:!0})).toDataURL("image/png")}save(){}load(){return localStorage.getItem("obi-client")}}async function lf(t){let e;try{e=window}catch{console.warn("[obi] no window object found"),e={}}return RU({appToken:t,window:e})}async function RU({appToken:t,window:e}){var i,r;if(e.obi){console.warn("[obi] obi object already found on window, skipping");return}t||(t=(i=e==null?void 0:e.obiWidgetConfig)==null?void 0:i.apiKey);let A;try{A=((r=e.ObiSDK)==null?void 0:r.q)||[]}catch{A=[]}const n=new PU(t);return e.ObiSDK=n.dispatchCommand,await n.initialise({queuedCommands:A}),e.obi=n,n.mountWidget(),n}document.readyState==="loading"?document.addEventListener("DOMContentLoaded",()=>{lf()}):lf()})();
|
|
62
|
+
`}),g("article",{style:t.skeletonContainer,role:"status","aria-label":"Loading content",children:[g("section",{style:t.headerSection,children:[g("div",{style:t.avatar,role:"img","aria-label":"Loading avatar",children:g("div",{style:t.shimmer})}),g("div",{style:t.textLines,children:[g("div",{style:t.textLine,role:"presentation","aria-label":"Loading text line 1",children:g("div",{style:t.shimmer})}),g("div",{style:t.textLine,role:"presentation","aria-label":"Loading text line 2",children:g("div",{style:t.shimmer})})]})]}),g("section",{style:t.contentSection,children:g("div",{style:t.contentBlock,role:"presentation","aria-label":"Loading card content",children:g("div",{style:t.shimmer})})})]})]})}function mU({}){const t={host:{display:"block"},shareContainer:{width:"480px",height:"240px",borderRadius:"12px",display:"grid",placeItems:"center",overflow:"hidden",position:"relative",backgroundColor:"var(--obi-color-tint)"},controlsRow:{zIndex:10,gridRowStart:1,gridColumnStart:1,display:"flex",alignSelf:"flex-start",marginTop:"36px",alignItems:"center",gap:"8px"},monitorIconContainer:{display:"flex",height:"40px",width:"40px",aspectRatio:"1",alignItems:"center",justifyContent:"center",gap:"8px",borderRadius:"2px",border:"1px solid #E4E4E7",background:"#F8FAFC",padding:"8px"},monitorIcon:{width:"24px",height:"24px",color:"#111827"},tabSelector:{display:"flex",width:"260px",height:"40px",padding:"4px",alignItems:"center",borderRadius:"2px",background:"#E4E4E7"},tabButton:e=>({display:"flex",flex:1,alignSelf:"stretch",alignItems:"center",justifyContent:"center",gap:"10px",borderRadius:"2px",padding:"6px 12px",border:"none",cursor:"pointer",fontFamily:"'Satoshi', sans-serif",fontSize:"14px",fontWeight:500,opacity:e?1:.4,background:e?"white":"#F8FAFC",boxShadow:e?"0 1px 2px 0 rgba(0, 0, 0, 0.05)":"none"}),skeletonContainer:{marginTop:"104px",gridColumnStart:1,gridRowStart:1,alignSelf:"center"}};return g("div",{style:t.host,children:g("div",{style:t.shareContainer,children:[g("div",{style:t.controlsRow,children:[g("div",{style:t.monitorIconContainer,children:g("svg",{style:t.monitorIcon,fill:"none",stroke:"currentColor",viewBox:"0 0 24 24",children:[g("rect",{width:"20",height:"14",x:"2",y:"3",rx:"2",ry:"2"}),g("line",{x1:"8",x2:"16",y1:"21",y2:"21"}),g("line",{x1:"12",x2:"12",y1:"17",y2:"21"})]})}),g("div",{style:t.tabSelector,children:[g("button",{style:t.tabButton(!1),children:"Tab"}),g("button",{style:t.tabButton(!0),children:"Window"})]})]}),g("div",{style:t.skeletonContainer,children:g(pU,{})})]})})}function BU({session:t,speakingState:e,onAction:A}){return g(Zt,{title:"Connect your screen",subtitle:"Watch for the prompt in your browser",agentName:t.agentName||"Obi",buttonText:"Share screen",speakingState:e,description:`${t.agentName||"Obi"} will guide you through ${t.appName||"the app"} by watching your screen.`,centerVisual:g(mU,{}),actionDisabled:!0,onAction:A})}function vU({spectrum:t}){return g("div",{style:{borderRadius:"15px",boxShadow:"0 0 20px 2px var(--obi-color-primary)",backgroundColor:"var(--obi-color-primary)",transform:"scale(1.6)"},children:g(ao,{isActive:!0,children:g(jh,{getBands:t})})})}function CU({session:t,speakingState:e,spectrum:A,onAction:n}){return g(Zt,{title:"Overview",subtitle:`${t.agentName||"Obi"} will start your tutorial in a moment`,agentName:t.agentName||"Obi",speakingState:e,description:`Get ready to explore ${t.appName||"the app"} with ${t.agentName||"Obi"}.`,centerVisual:g(vU,{spectrum:A}),actionDisabled:!0,onAction:n})}function wU({id:t,name:e,description:A,duration:n=10,order:i=0,selected:r=!1,onClick:s}){return g("div",{className:`course-container ${r?"selected":""}`,onClick:()=>{s==null||s({id:t,name:e,description:A,duration:n,order:i})},children:[g("div",{className:"header-row",children:[g("h2",{className:"course-title",children:e}),g("span",{className:"duration",children:["~",n," mins"]})]}),A&&g("p",{className:"course-description",children:A})]})}function bU({courses:t=[],selectedCourseId:e=null,loading:A=!1,error:n="",onCourseSelect:i}){const[r,s]=Z(""),a=l=>{const u=l.currentTarget;s(u.value)},o=l=>{i==null||i(l)};if(A)return g("div",{className:"loading",children:"Loading..."});if(n)return g("div",{className:"error",children:n});if(!t||t.length===0)return g("div",{className:"empty",children:"No courses available"});const c=t.filter(l=>l.name.toLowerCase().includes(r.toLowerCase())||(l.description||"").toLowerCase().includes(r.toLowerCase()));return g("div",{className:"tour-select",children:[g("div",{className:"controls",children:[g("div",{className:"tabs",children:g("button",{className:"tab active",children:"All"})}),g("div",{className:"filter",children:[g("svg",{width:"14",height:"14",viewBox:"0 0 14 14",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:g("path",{d:"M10.0417 8.75002H9.42087L9.20004 8.53502C9.96921 7.63585 10.4417 6.47502 10.4417 5.20835C10.4417 2.56085 8.32254 0.441681 5.67504 0.441681C3.02754 0.441681 0.908374 2.56085 0.908374 5.20835C0.908374 7.85585 3.02754 9.97502 5.67504 9.97502C6.94171 9.97502 8.10254 9.50252 9.00171 8.73335L9.22671 8.95418V9.57502L13.2167 13.5592L14.375 12.4008L10.0417 8.75002ZM5.67504 8.75002C3.72754 8.75002 2.15837 7.18085 2.15837 5.20835C2.15837 3.23585 3.72754 1.66668 5.67504 1.66668C7.62254 1.66668 9.19171 3.23585 9.19171 5.20835C9.19171 7.18085 7.62254 8.75002 5.67504 8.75002Z",fill:"#6B7280"})}),g("input",{type:"text",placeholder:"Search...",value:r,onInput:a})]})]}),g("div",{className:"course-grid",children:c.sort((l,u)=>(l.order||0)-(u.order||0)).map(l=>{const u=l.id===e;return g(wU,{id:l.id,name:l.name,description:l.description||"",duration:l.duration,order:l.order||0,selected:u,onClick:o},l.id)})})]})}function yU({open:t,courses:e=[],loading:A=!1,error:n="",agentName:i="Obi",onClose:r,onCourseSelect:s}){const[a,o]=Z(null),c=u=>{o(u)},l=()=>{a&&s&&s(a)};return g(Nh,{open:t,onClose:r,size:"large",children:g("div",{className:"tour-select-modal-container",children:[g("div",{className:"header",children:[g("div",{className:"icon",style:{color:"white"},children:g(sf,{})}),g("div",{className:"title-section",children:A?g(Pe,{children:[g("div",{className:"skeleton skeleton-title"}),g("div",{className:"skeleton skeleton-subtitle"})]}):g(Pe,{children:[g("h1",{children:["Give ",i," a try!"]}),g("p",{className:"subtitle",children:["Pick a tutorial, share your screen, and ",i," will take it from there."]})]})})]}),g("div",{className:"course-list-wrapper",children:g(bU,{courses:e,selectedCourseId:(a==null?void 0:a.id)||"",loading:A,error:n,onCourseSelect:c})}),g("div",{className:"footer",children:[g("button",{className:"obi-button footer-button",onClick:l,disabled:!a,children:[g("span",{children:"Get started"}),g("svg",{xmlns:"http://www.w3.org/2000/svg",width:"17",height:"16",viewBox:"0 0 17 16",fill:"none",children:g("path",{d:"M3.83325 8.00065H13.1666M13.1666 8.00065L8.49992 3.33398M13.1666 8.00065L8.49992 12.6673",stroke:a?"#FAFAFA":"#999","stroke-width":"1.33","stroke-linecap":"round","stroke-linejoin":"round"})})]}),g("p",{className:"footer-text",children:"Sessions are securely recorded for quality improvement purposes."})]})]})})}function UU({session:t,sessionState:e,speakingState:A,spectrum:n,onStart:i,onContinue:r,onShareMicrophone:s,onShareScreen:a}){function o(){e==="connecting"||e==="connected"||!e?i==null||i():e==="volume-check"||e==="mic-check"?r==null||r():e==="mic-share"?s==null||s():e==="screen-share"&&(a==null||a())}return no(()=>{switch(e){case null:case"connecting":case"connected":return g(uU,{session:t,speakingState:A,onAction:o});case"volume-check":return g(gU,{session:t,speakingState:A,onAction:o});case"mic-check":return g(CU,{session:t,speakingState:A,spectrum:n,onAction:o});case"mic-share":return g(hU,{session:t,speakingState:A,onAction:o});case"screen-share":return g(BU,{session:t,speakingState:A,onAction:o});case"navigate":return g(cU,{session:t,speakingState:A,onAction:o});default:return null}},[e,A,i,r,s,a])}function QU(t){const{session:e,sessionState:A,speakingState:n,spectrum:i,onClose:r,onStart:s,onContinue:a,onShareMicrophone:o,onShareScreen:c}=t,l=(t.open??!0)&&(!A||A==="connecting"||A==="connected"||A==="volume-check"||A==="mic-check"||A==="mic-share"||A==="screen-share"||A==="navigate");return g(aU,{open:l,onClose:r,children:()=>g(UU,{session:e,sessionState:A,speakingState:n,spectrum:i,onStart:s,onContinue:a,onShareMicrophone:o,onShareScreen:c})})}function EU(t){let e=t.replace(/[.+^${}()|[\]\\]/g,"\\$&").replace(/\*\*/g,"__DOUBLE_STAR__").replace(/\*/g,"[^/]*").replace(/__DOUBLE_STAR__/g,".*").replace(/\?/g,"[^/]");return new RegExp(`^${e}$`,"i")}function kU(t,e){if(!e||e.length===0)return!1;const A=t.replace(/^https?:\/\//,"").replace(/\/$/,"");return e.some(n=>{try{const i=EU(n);return i.test(A)||i.test(t)}catch(i){return console.warn(`Invalid URL pattern: ${n}`,i),!1}})}function lo(t){if(!t||t.length===0)return!1;const e=window.location.origin+window.location.pathname;return kU(e,t)}function SU(t){var B,b,U;const[e,A]=Z(!1),[n,i]=Z(!1),[r,s]=Z(null),a=TU(t.sdk,t.shadowHost,s);if(!a.client)return null;const o=FU((B=a.client.product)==null?void 0:B.widget_url_blacklist),c=a.client.session,l=!!c,u=l&&!e;let d;switch(c==null?void 0:c.speakingState){case"listening":d="user-speaking";break;case"speaking":d="agent-speaking";break;case"thinking":d="thinking";break;case"busy":d="busy";break}const h=c==null?void 0:c.isPaused,p=a.client.state==="ready"&&!o&&(a.client.selectedPlan||!((b=a.client.product)!=null&&b.widget_link_only_access)),f=u?100:62,m=()=>{var v,w,y,E,T,F;return{name:(v=a.client.selectedPlan)==null?void 0:v.name,description:(w=a.client.selectedPlan)==null?void 0:w.description,appName:(y=a.client.product)==null?void 0:y.name,appLogoUrl:((E=a.client.product)==null?void 0:E.logo_url)||"",url:(T=a.client.product)==null?void 0:T.url,agentName:((F=a.client.product)==null?void 0:F.agent_name)||"Obi"}};return g("div",{children:p&&g(Pe,{children:[g("div",{style:{position:"fixed",top:`calc(100vh - ${f}px)`,left:"50%",transform:"translateX(-50%)",width:"max-content"},children:g(iU,{inPlan:l,isActive:n?!1:void 0,defaultIsActive:!0,isPaused:h,messaging:(c==null?void 0:c.isMicShared)===!1?!0:void 0,speakingStatus:d,spectrum:()=>(c==null?void 0:c.audioSpectrum())||null,courseProgress:r,onOpen:()=>{A(!0)},onCancel:()=>{var v;(v=a.client.session)==null||v.stop()},onPause:()=>{var v,w;(w=(v=a.client.session)==null?void 0:v.pause)==null||w.call(v)},onUnpause:()=>{var v,w;(w=(v=a.client.session)==null?void 0:v.unpause)==null||w.call(v)},onMessagingChange:v=>{var w,y,E,T;v?(y=(w=a.client.session)==null?void 0:w.muteMicrophone)==null||y.call(w):(T=(E=a.client.session)==null?void 0:E.unmuteMicrophone)==null||T.call(E)},onMessage:v=>{a.say(v)}})}),e&&g(yU,{open:e,courses:a.client.plans.map(v=>({id:v.uuid,name:v.name,description:v.description||"",duration:v.duration||0})),loading:!1,agentName:((U=a.client.product)==null?void 0:U.agent_name)||"Obi",onCourseSelect:v=>{const w=a.client.plans.find(y=>y.uuid===v.id)||null;w&&(a.client.selectPlan(w),A(!1),i(!0))},onClose:v=>{v==="user-initiated"&&a.client.selectPlan(null),A(!1)}}),!!a.client.selectedPlan&&g(QU,{open:!0,session:m(),sessionState:(c==null?void 0:c.state)||null,speakingState:(c==null?void 0:c.speakingState)||null,spectrum:()=>(c==null?void 0:c.audioSpectrum())||null,onClose:v=>{v==="user-initiated"&&a.client.stopSession(),i(!1)},onStart:()=>{a.client.selectedPlanUuid&&a.startSession()},onContinue:()=>{c==null||c.continue()},onShareMicrophone:()=>{c==null||c.shareMicrophone()}})]})})}function TU(t,e,A){const[n,i]=Z(0),[r,s]=Z(null);return qe(()=>{t.client&&(t.client.session&&s(t.client.session),t.client.on("sessionStarted",a=>{s(a),i(o=>o+1)}),t.client.on("sessionStopped",()=>{s(null),i(a=>a+1)}),t.client.on("sessionShutdown",()=>{i(a=>a+1)}),t.client.on("sessionResumed",()=>{i(a=>a+1)}),t.client.on("stateChanged",()=>{var a;t.client.state==="ready"&&e.style.setProperty("--obi-color-primary",((a=t.client.product)==null?void 0:a.primary_color)||"#9500FF"),i(o=>o+1)}),t.client.on("planSelected",()=>{i(a=>a+1)}))},[t,t.client]),qe(()=>{if(!r)return;r.on("stateChanged",()=>{i(o=>o+1)}),r.on("speakingStateChanged",()=>{i(o=>o+1)}),r.on("paused",()=>{i(o=>o+1)}),r.on("unpaused",()=>{i(o=>o+1)});const a=o=>{A(o)};return r.on&&r.on("courseProgress",a),()=>{r.off&&r.off("courseProgress",a)}},[r]),t}function FU(t){const[e,A]=Z(()=>lo(t));return qe(()=>{A(lo(t))},[t]),qe(()=>{IU();const n=()=>{A(lo(t))};return window.addEventListener("locationchange",n),window.addEventListener("popstate",n),window.addEventListener("hashchange",n),()=>{window.removeEventListener("locationchange",n),window.removeEventListener("popstate",n),window.removeEventListener("hashchange",n)}},[t]),e}function IU(){const t=window;if(t.__obi_history_patched)return;const{pushState:e,replaceState:A}=window.history,n=i=>function(...r){const s=i.apply(this,r);return window.dispatchEvent(new Event("locationchange")),s};window.history.pushState=n(e),window.history.replaceState=n(A),t.__obi_history_patched=!0}function xU(t){if(document.querySelector("obi-widget")){console.debug("[obi] widget already mounted");return}_U();const e=document.createElement("div");e.id="host",e.style.position="fixed",e.style.zIndex="9999",document.body.appendChild(e);const A=e.attachShadow({mode:"open"}),n=document.createElement("div");n.id="obi-container",n.className="parentclass",A.appendChild(n);const i=new CSSStyleSheet;i.replaceSync(ky),A.adoptedStyleSheets=[i],Uy(g(SU,{sdk:t,shadowHost:e}),n),console.log("[obi-sdk] widget mounted")}function _U(){af("https://fonts.cdnfonts.com/css/satoshi"),af("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap")}function af(t){const e=document.createElement("link");e.href=t,e.rel="stylesheet",document.head.appendChild(e)}const of="49206C6F7665204F6269_session",cf="obi-url-params";class PU extends Sr{constructor(e){super(),this.client=null,this.isActive=!1,this.primaryColour="#9500FF",this.commandQueue=[],this._resumed=!1,this.dispatchCommand=(A,...n)=>{var i,r,s,a;if(!((r=(i=this.client)==null?void 0:i.isReady)!=null&&r.call(i))){this.commandQueue.push({type:A,args:n});return}switch(A){case"update":this.updateConfig(n[0]);break;case"endSession":(a=(s=this.client)==null?void 0:s.stopSession)==null||a.call(s);break;case"say":this.say(n[0]);break;default:console.warn("[obi] unknown command",{commandType:A,args:n})}},e&&this.createClient(e)}async createClient(e){if(this.client){this.client.appToken!==e&&console.warn("[obi] client already exists with different app token");return}console.debug("[obi] creating client");let A=null;const n=this.load();if(n){console.debug("[obi] attempting to load cached client");try{A=vr.deserialise(n,e,"sdk",{apiBaseUrl:"https://app.coragents.ai",captureScreen:this.captureScreen.bind(this)}),this._resumed=!0}catch(i){console.error("[obi] error loading cached client",i)}}A||(A=new vr(e,"sdk",{apiBaseUrl:"https://app.coragents.ai",captureScreen:this.captureScreen.bind(this)})),this.client=A,this.client.on("stateChanged",i=>{var r,s,a;i==="ready"&&this.updateConfig({isActive:(r=this.client)==null?void 0:r.showWidget,primaryColour:((a=(s=this.client)==null?void 0:s.product)==null?void 0:a.primary_color)||"#9500FF"})}),this.client.on("sessionStarted",()=>{this.save()}),this.client.on("sessionStopped",()=>{console.debug("[obi] removing client from local storage"),localStorage.removeItem("obi-client")}),this.client.on("sessionShutdown",i=>{i==="invalid-room"&&(console.debug("[obi] removing client from local storage"),localStorage.removeItem("obi-client"))}),this.client.session&&this.client.resumeSession(i=>{i.on("stateChanged",r=>{r!=="disconnecting"&&r!=="disconnected"&&r!=="error"&&r!=="connecting"&&this.save()}),i.on("paused",()=>{this.save()}),i.on("unpaused",()=>{this.save()})})}async initialise(e={}){const A=this.parsePassiveParams()||void 0;this.commandQueue=e.queuedCommands||[],this._resumed?(this._resumed=!1,this.dispatchCommandQueue()):this.client?(console.debug("[obi] client already exists, initialising"),this.client.initialise({planUuid:A}).then(()=>{this.emit("initialised"),this.dispatchCommandQueue()}).catch(n=>{console.error("[obi] error initialising client",n),this.emit("error",n)})):(console.debug("[obi] client does not exist, dispatching command queue"),this.dispatchCommandQueue())}updateConfig(e){this.updateAppToken(e.apiKey),this.updateActive(e.isActive),this.updatePrimaryColour(e.primaryColour),this.updateIdentity(e.user)}async updateAppToken(e){var A;e===void 0||e==((A=this.client)==null?void 0:A.appToken)||(console.debug("[obi] updating app token"),await this.createClient(e))}updateActive(e){e===void 0||e==this.isActive||(this.isActive=e)}updatePrimaryColour(e){e===void 0||e==this.primaryColour||(this.primaryColour=e)}updateIdentity(e){var A;e===void 0||e==((A=this.client)==null?void 0:A.identity)||this.client.initialise({identity:e||void 0}).catch(n=>{console.error("[obi] error updating identity",n),this.emit("error",n)})}async say(e){var A,n,i;await((i=(n=(A=this.client)==null?void 0:A.session)==null?void 0:n.say)==null?void 0:i.call(n,e))}async startSession(){await this.client.startSession(this.client.selectedPlan.uuid,e=>{e.on("stateChanged",A=>{A!=="disconnecting"&&A!=="disconnected"&&A!=="error"&&A!=="connecting"&&this.save()})})}dispatchCommandQueue(){const e=this.commandQueue;this.commandQueue=[],e.forEach(A=>{console.debug("[obi] dispatching command",A);try{this.dispatchCommand(A.type,...A.args||[])}catch(n){console.error("[obi] error dispatching command",n)}})}parsePassiveParams(){let e={};e=JSON.parse(localStorage.getItem(cf)||"{}"),Object.keys(e).length===0&&new URLSearchParams(window.location.search).forEach((r,s)=>{e[s]=r});const A=e[of];if(!A)return null;const n=new URL(window.location.href);return n.searchParams.delete(of),window.history.replaceState({},"",n.toString()),localStorage.removeItem(cf),A}mountWidget(){xU(this),console.debug("[obi] widget mounted")}async captureScreen(){return(await Fv(document.documentElement,{useCORS:!0,allowTaint:!0,foreignObjectRendering:!0})).toDataURL("image/png")}save(){}load(){return localStorage.getItem("obi-client")}}async function lf(t){let e;try{e=window}catch{console.warn("[obi] no window object found"),e={}}return RU({appToken:t,window:e})}async function RU({appToken:t,window:e}){var i,r;if(e.obi){console.warn("[obi] obi object already found on window, skipping");return}t||(t=(i=e==null?void 0:e.obiWidgetConfig)==null?void 0:i.apiKey);let A;try{A=((r=e.ObiSDK)==null?void 0:r.q)||[]}catch{A=[]}const n=new PU(t);return e.ObiSDK=n.dispatchCommand,await n.initialise({queuedCommands:A}),e.obi=n,n.mountWidget(),n}document.readyState==="loading"?document.addEventListener("DOMContentLoaded",()=>{lf()}):lf()})();
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "obi-sdk",
|
|
3
|
-
"version": "0.18.
|
|
3
|
+
"version": "0.18.7",
|
|
4
4
|
"description": "JavaScript SDK for Obi",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "dist/obi-sdk.umd.js",
|
|
@@ -40,8 +40,8 @@
|
|
|
40
40
|
"preact": ">=10.0.0",
|
|
41
41
|
"ts-pattern": "^5.7.0",
|
|
42
42
|
"zod": "^3.22.0",
|
|
43
|
-
"@obi/obi-client": "0.7.0",
|
|
44
43
|
"@obi/obi-components": "0.1.0",
|
|
44
|
+
"@obi/obi-client": "0.7.0",
|
|
45
45
|
"@obi/utils": "0.2.0"
|
|
46
46
|
},
|
|
47
47
|
"devDependencies": {
|