sitemana-widget-embed 0.1.25 → 0.1.26
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/widget.js +2 -2
- package/package.json +1 -1
package/dist/widget.js
CHANGED
|
@@ -3560,7 +3560,7 @@ Please report this to https://github.com/markedjs/marked.`,e){let n="<p>An error
|
|
|
3560
3560
|
--radius-4xl: calc(var(--radius) + 16px);
|
|
3561
3561
|
--spacing-header: 3rem;
|
|
3562
3562
|
}
|
|
3563
|
-
`,$tr=class extends HTMLElement{static observedAttributes=["agent-id","mode","variant","placement","avatar-
|
|
3563
|
+
`,$tr=class extends HTMLElement{static observedAttributes=["agent-id","mode","variant","placement","avatar-orb-color-1","avatar-orb-color-2","action-text","expand-text","loading-text","sending-text"];shadowRootRef;hostStyleElement;shadowStyleElement;mountElement;root;agentId="";mode="embed";variant=null;placement=null;appearanceAttributes={};open=!1;status="idle";sessionConfig=null;sessionState=null;messages=[];widgetTitle="Assistant";welcomeMessage=null;renewalCancel=null;errorMessage=null;bootstrapPromise=null;bootstrapVersion=0;sendVersion=0;confirmationVersion=0;bootstrapPhase="idle";constructor(){super(),this.shadowRootRef=this.attachShadow({mode:"open"}),this.hostStyleElement=document.createElement("style"),this.hostStyleElement.textContent=`
|
|
3564
3564
|
${Btr}
|
|
3565
3565
|
|
|
3566
3566
|
:host {
|
|
@@ -3573,4 +3573,4 @@ Please report this to https://github.com/markedjs/marked.`,e){let n="<p>An error
|
|
|
3573
3573
|
position: relative;
|
|
3574
3574
|
min-height: 720px;
|
|
3575
3575
|
}
|
|
3576
|
-
`,this.shadowStyleElement=document.createElement("style"),this.shadowStyleElement.textContent=hht()??"",this.mountElement=document.createElement("div"),this.mountElement.style.display="block",this.mountElement.style.width="100%",this.mountElement.style.height="100%",this.shadowRootRef.append(this.hostStyleElement,this.shadowStyleElement,this.mountElement),this.root=(0,vht.createRoot)(this.mountElement)}connectedCallback(){this.syncAttributes(),this.renderWidget(),this.agentId&&this.ensureBootstrap()}disconnectedCallback(){this.renewalCancel?.(),this.renewalCancel=null,this.bootstrapPromise=null,this.root.unmount()}attributeChangedCallback(e,t,r){this.syncAttributes(),e==="agent-id"&&t!==r&&this.clearAgentState(),this.renderWidget(),e==="agent-id"&&this.agentId&&this.ensureBootstrap()}syncAttributes(){this.agentId=this.getAttribute("agent-id")?.trim()??"",this.mode=ztr(this.getAttribute("mode")),this.variant=this.getAttribute("variant"),this.placement=this.getAttribute("placement"),this.appearanceAttributes=Ftr(this)}getResolvedPlacement(){return Rht(this.placement??this.sessionConfig?.widgetConfig.widgetPlacement??"bottom-right")}getResolvedVariant(){return Lht(this.variant??this.sessionConfig?.widgetConfig.widgetVariant??"chatbar")}getResolvedAppearance(){const e=this.sessionConfig?.widgetConfig.widgetAppearance??Aht;return{avatarImageUrl:
|
|
3576
|
+
`,this.shadowStyleElement=document.createElement("style"),this.shadowStyleElement.textContent=hht()??"",this.mountElement=document.createElement("div"),this.mountElement.style.display="block",this.mountElement.style.width="100%",this.mountElement.style.height="100%",this.shadowRootRef.append(this.hostStyleElement,this.shadowStyleElement,this.mountElement),this.root=(0,vht.createRoot)(this.mountElement)}connectedCallback(){this.syncAttributes(),this.renderWidget(),this.agentId&&this.ensureBootstrap()}disconnectedCallback(){this.renewalCancel?.(),this.renewalCancel=null,this.bootstrapPromise=null,this.root.unmount()}attributeChangedCallback(e,t,r){this.syncAttributes(),e==="agent-id"&&t!==r&&this.clearAgentState(),this.renderWidget(),e==="agent-id"&&this.agentId&&this.ensureBootstrap()}syncAttributes(){this.agentId=this.getAttribute("agent-id")?.trim()??"",this.mode=ztr(this.getAttribute("mode")),this.variant=this.getAttribute("variant"),this.placement=this.getAttribute("placement"),this.appearanceAttributes=Ftr(this)}getResolvedPlacement(){return Rht(this.placement??this.sessionConfig?.widgetConfig.widgetPlacement??"bottom-right")}getResolvedVariant(){return Lht(this.variant??this.sessionConfig?.widgetConfig.widgetVariant??"chatbar")}getResolvedAppearance(){const e=this.sessionConfig?.widgetConfig.widgetAppearance??Aht;return{avatarImageUrl:e.avatarImageUrl,avatarOrbColor1:this.appearanceAttributes.avatarOrbColor1?.trim()||e.avatarOrbColor1,avatarOrbColor2:this.appearanceAttributes.avatarOrbColor2?.trim()||e.avatarOrbColor2,actionText:this.appearanceAttributes.actionText?.trim()||e.actionText,expandText:this.appearanceAttributes.expandText?.trim()||e.expandText,loadingText:this.appearanceAttributes.loadingText?.trim()||e.loadingText,sendingText:this.appearanceAttributes.sendingText?.trim()||e.sendingText}}getWidgetTitle(){return this.sessionConfig?.widgetConfig.name??this.widgetTitle}getWelcomeMessage(){return this.sessionConfig?.widgetConfig.welcomeMessage??this.welcomeMessage}getSpotlights(){return this.sessionConfig?.widgetConfig.spotlightMessages??[]}clearAgentState(){this.sendVersion+=1,this.confirmationVersion+=1,this.bootstrapVersion+=1,this.bootstrapPhase="idle",this.renewalCancel?.(),this.renewalCancel=null,this.bootstrapPromise=null,this.sessionConfig=null,this.sessionState=null,this.messages=[],this.widgetTitle="Assistant",this.welcomeMessage=null,this.errorMessage=null,this.status="idle"}renderWidget(){if(this.bootstrapPhase!=="ready"||this.sessionConfig==null||this.sessionState==null){this.root.render(null);return}const e=this.getResolvedAppearance(),t=this.getResolvedPlacement(),r=this.getResolvedVariant(),n=this.status==="booting"||this.sessionState!=null&&!this.sessionState.conversationId?{label:kht,onClick:()=>{this.handleStartConversation()},disabled:this.status!=="ready"}:void 0;this.root.render(ze.createElement(ktr,{mode:this.mode,agentId:this.agentId,variant:r,placement:t,appearance:e,widgetTitle:this.getWidgetTitle(),welcomeMessage:this.getWelcomeMessage(),spotlights:this.getSpotlights(),open:this.open,status:this.status,messages:this.messages,errorMessage:this.errorMessage,emptyAction:n,onStopConversation:this.sessionState?.conversationId!=null?()=>{this.handleStopConversation()}:void 0,sendDisabled:this.status==="sending"||!this.sessionState?.conversationId,onOpenChange:i=>{this.handleOpenChange(i)},onSendMessage:i=>{this.sendMessage(i)},onConfirmationDecision:(i,a)=>{this.handleConfirmationDecision(i,a)},portalContainer:this.shadowRootRef}))}async ensureBootstrap(){if(this.bootstrapPromise)return this.bootstrapPromise;const e=++this.bootstrapVersion;return this.bootstrapPromise=(async()=>{if(!this.agentId){this.status="error",this.errorMessage="Missing agent id",this.renderWidget();return}this.bootstrapPhase="booting",this.status="booting",this.errorMessage=null,this.renderWidget();try{const t=await Dtr({agentId:this.agentId,pageUrl:window.location.href,referrer:document.referrer||void 0});if(e!==this.bootstrapVersion)return;this.sessionConfig={sessionId:t.session.sessionId,token:t.session.sessionToken,expiresAt:t.session.expiresAt,widgetConfig:t.widgetConfig},this.sessionState=t.session,this.messages=t.messages,this.widgetTitle=t.widgetConfig.name,this.welcomeMessage=t.widgetConfig.welcomeMessage,this.status="ready",this.bootstrapPhase="ready",this.renewalCancel?.(),this.renewalCancel=Ptr(t.session.expiresAt,async()=>{await this.ensureBootstrap()}),this.renderWidget()}catch(t){if(e!==this.bootstrapVersion)return;this.status="error",this.bootstrapPhase="blocked",this.errorMessage=t instanceof Error?t.message:"Failed to start widget",this.renderWidget()}})().finally(()=>{e===this.bootstrapVersion&&(this.bootstrapPromise=null)}),this.bootstrapPromise}async sendMessage(e){const t=e.trim();if(!t||!this.sessionState?.conversationId)return;const r=++this.sendVersion,n=`optimistic:${Date.now()}`,i={id:n,conversationId:this.sessionState.conversationId,role:"user",content:t,createdAt:new Date().toISOString()};this.status="sending",this.errorMessage=null,this.messages=[...this.messages,i],this.renderWidget();try{const a=await Itr({agentId:this.agentId,content:t});if(r!==this.sendVersion)return;this.sessionState=a.session;const s=ttr(a.assistantMessages.map(o=>({id:o.id,content:o.content,createdAt:o.createdAt})),{initialDelayMs:0,typingHoldMs:1260,interMessageDelayMs:1520,interMessageDelayJitterMs:100});for(const o of s){if(await new Promise(u=>window.setTimeout(u,o.delayMs)),r!==this.sendVersion)return;const l=o.message;this.messages=[...this.messages,{id:l.id,conversationId:a.conversationId,role:"assistant",content:l.content,createdAt:l.createdAt}],this.renderWidget()}r===this.sendVersion&&(this.status="ready",this.renderWidget())}catch(a){if(r!==this.sendVersion)return;this.messages=this.messages.filter(s=>s.id!==n),this.status="error",this.errorMessage=a instanceof Error?a.message:"Failed to send message",this.renderWidget()}}async handleOpenChange(e){this.open=e,this.renderWidget(),this.open&&(this.status==="idle"||!this.sessionState)&&await this.ensureBootstrap()}async handleStartConversation(){if(this.sessionState||await this.ensureBootstrap(),!!this.sessionState){this.status="booting",this.errorMessage=null,this.renderWidget();try{const e=await Mtr({agentId:this.agentId});this.sessionState=e.session,this.messages=e.messages,this.status="ready",this.renderWidget()}catch(e){this.status="error",this.errorMessage=e instanceof Error?e.message:"Failed to start conversation",this.renderWidget()}}}async handleStopConversation(){if(!this.sessionState?.conversationId)return;const e=crypto.randomUUID(),t=++this.confirmationVersion;this.status="sending",this.errorMessage=null,this.renderWidget();try{const r=await vot({agentId:this.agentId,confirmationId:e,prompt:TA});if(t!==this.confirmationVersion)return;this.sessionState=r.session,this.messages=[...this.messages,r.confirmationMessage],this.status="ready",this.renderWidget()}catch(r){if(t!==this.confirmationVersion)return;this.status="error",this.errorMessage=r instanceof Error?r.message:"Failed to stop conversation",this.renderWidget()}}async handleConfirmationDecision(e,t){if(!this.sessionState?.conversationId)return;const r=++this.confirmationVersion;this.status="sending",this.errorMessage=null,this.renderWidget();try{const n=await vot({agentId:this.agentId,confirmationId:e,decision:t?"accepted":"rejected"});if(r!==this.confirmationVersion)return;this.sessionState=n.session,this.messages=[...this.messages,n.confirmationMessage],this.renderWidget(),t?window.setTimeout(()=>{r===this.confirmationVersion&&this.handleReset()},0):(this.status="ready",this.renderWidget())}catch(n){if(r!==this.confirmationVersion)return;this.status="error",this.errorMessage=n instanceof Error?n.message:"Failed to update confirmation",this.renderWidget()}}handleReset=async()=>{this.sendVersion+=1,await Otr(this.agentId),this.clearAgentState(),this.open=!0,this.renderWidget(),await this.ensureBootstrap()}};function Ftr(e){const t=e.getAttribute("avatar-orb-color-1"),r=e.getAttribute("avatar-orb-color-2"),n=e.getAttribute("action-text"),i=e.getAttribute("expand-text"),a=e.getAttribute("loading-text"),s=e.getAttribute("sending-text");return{avatarOrbColor1:t?.trim()||void 0,avatarOrbColor2:r?.trim()||void 0,actionText:n?.trim()||void 0,expandText:i?.trim()||void 0,loadingText:a?.trim()||void 0,sendingText:s?.trim()||void 0}}function ztr(e){return e==="preview"?"preview":"embed"}function Utr(){customElements.get("sitemana-agent-widget")||customElements.define("sitemana-agent-widget",$tr)}uht(lht),Utr()})();
|