@streamoji/avatar-widget 0.5.1 → 0.5.2

package/README.md

@@ -23,7 +23,7 @@ import "@streamoji/avatar-widget/styles.css";
 function App() {
   return (
     <AvatarWidget
-      token="YOUR_ENCRYPTED_AGENT_TOKEN"
+      agentId="YOUR_AGENT_ID"
       onNavigationRequested={(url) => window.open(url, "_blank")}
     />
   );
@@ -41,8 +41,7 @@ function App() {
 
   return (
     <AvatarWidget
-      token="YOUR_ENCRYPTED_AGENT_TOKEN"
-      avatarGender="female"
+      agentId="YOUR_AGENT_ID"
       presetUserDetails={
         user
           ? { name: user.displayName, email: user.email, phone: user.phone }
@@ -77,7 +76,7 @@ For npm installs, the files are in `node_modules/@streamoji/avatar-widget/dist/`
 
 ```html
 <script>
-  StreamojiLeadsAvatarWidget.init({ token: "YOUR_ENCRYPTED_AGENT_TOKEN" });
+  StreamojiLeadsAvatarWidget.init({ agentId: "YOUR_AGENT_ID" });
 </script>
 ```
 
@@ -86,7 +85,7 @@ If you don’t add a container, the widget creates one fixed at the bottom-right
 ```html
 <div id="streamoji-leads-avatar-widget-root"></div>
 <script>
-  StreamojiLeadsAvatarWidget.init({ token: "YOUR_ENCRYPTED_AGENT_TOKEN" });
+  StreamojiLeadsAvatarWidget.init({ agentId: "YOUR_AGENT_ID" });
 </script>
 ```
 
@@ -96,13 +95,13 @@ Session UID generation uses the Web Crypto API and requires a [secure context](h
 
 | Option | Type | Description |
 |--------|------|-------------|
-| `token` | `string` | Encrypted agent token for chat/STT API. |
+| `agentId` | `string` | Agent ID; widget fetches config (and records visit) and uses it for chat/STT. |
 
 ## Props (React)
 
 | Prop | Type | Description |
 |------|------|-------------|
-| `token` | `string \| undefined` | Encrypted agent token for chat/STT API. Omit for default avatar only. |
+| `agentId` | `string` | Agent ID to fetch config and for chat/STT. |
 | `onNavigationRequested` | `(url: string) => void` | Called when the agent requests a link; if not provided, links open in a new tab. |
 | `avatarGender` | `"male" \| "female"` | Gender of the avatar for idle animations. Defaults to `"male"`. |
 | `presetUserDetails` | `UserDetails \| undefined` | Optional user details (name, email, phone) to identify logged-in users and skip lead capture. |

package/dist/avatar-widget.umd.js

@@ -4154,5 +4154,4 @@ void main() {
 
 `);Mn=Fn.pop()??"";for(const Jn of Fn){const mi=mn(Jn);mi&&Pn(mi.event,mi.data)}if(On){if(Mn.trim()){const Jn=mn(Mn.trim());Jn&&Pn(Jn.event,Jn.data)}L("Ready"),O(!1);break}}}catch(ut){console.error("Streaming Error:",ut),L("Failed"),O(!1)}},Qt=me.useCallback(async(Ue,ct)=>{const ut=`${Zh}/avatar_tts`;await Sn(ut,{user_query:Ue,llm_prompt:ct})},[]),Dt=me.useCallback(async(Ue,ct,ut,Tt)=>{const Mt=`${Zh}/avatar_ttsWithKnowledge`;await Sn(Mt,{user_query:Ue,llm_prompt:ct,knowledge:ut,history:Tt})},[]),$t=me.useRef(!1);me.useEffect(()=>{n&&!$t.current&&(n({avatarSpeak:Qt,avatarRespond:Dt}),$t.current=!0)},[n,Qt,Dt]);const Ut=async Ue=>{O(!0),L("Thinking..."),Ke.current="",ze.current="",St.current=!1,Qe(),Te.current=0,un(0);const ct=`${Zh}/agent/chat?token=${encodeURIComponent(y)}`;try{const ut=le();let Tt=sessionStorage.getItem("STREAMOJI_LEADS_SESSION_LEAD_ID");Tt||(GF("[CHAT] Session UID missing at send time! Generating emergency backup."),Tt="emergency-"+Math.random().toString(36).substring(7),sessionStorage.setItem("STREAMOJI_LEADS_SESSION_LEAD_ID",Tt));const Mt={history:ut,question:Ue,lead_id:Tt};ca("[CHAT] Sending payload:",Mt);const Pt=await fetch(ct,{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify(Mt),cache:"default"});if(Pt.status===429){try{const Jn=await Pt.json();ca("[CHAT] 429 agent at capacity:",Jn?.detail)}catch{}T(""),L("Busy"),O(!1);return}if(!Pt.ok)throw new Error("Agent request failed");const Mn=Pt.body;if(!Mn){L("Agent Failed"),O(!1);return}const On=Mn.getReader();Et.current=!1;const In=new TextDecoder;let Fn="";for(;;){const{done:Jn,value:mi}=await On.read();ca(`[SSE] Chunk received. done=${Jn}, length=${mi?.length||0}`),mi&&(Fn+=In.decode(mi,{stream:!0}));const Bi=Fn.split(`
 
-`);Fn=Bi.pop()??"";for(const Vi of Bi){ca(`[SSE] Processing block: ${Vi.slice(0,50)}...`);const Di=mn(Vi);Di&&(ca(`[SSE] Event: ${Di.event}`),Pn(Di.event,Di.data))}if(Jn){if(ca("[SSE] Stream finished"),Fn.trim()){const Vi=mn(Fn.trim());Vi&&Pn(Vi.event,Vi.data)}L("Ready"),O(!1),T("");break}}}catch(ut){console.error("Chat Error:",ut),L("Agent Failed"),O(!1)}},ei=M.trim(),Zi=EC(ei),Gn=Zi&&z?Zi.slice(0,Bt!=null&&Bt>0?Bt:0):"";me.useEffect(()=>{const Ue=Be.current;Ue!=="exiting"&&(Gn?(de(Gn),Ue==="hidden"&&st("entering")):(Ue==="visible"||Ue==="entering")&&st("exiting"))},[Gn,pt]);const Ni=me.useCallback(()=>{const Ue=Be.current;Ue==="entering"?st("visible"):Ue==="exiting"&&st("hidden")},[]);me.useLayoutEffect(()=>{const Ue=Rt.current;Ue&&(Ue.scrollTop=Ue.scrollHeight)},[qt]);const si=x==="female"?jF:WF;return _?Yt.jsxs("div",{className:"avatar-widget-container",children:[Yt.jsxs("div",{className:"avatar-input-area",children:[j!=="hidden"?Yt.jsx("div",{className:`avatar-thinking-tab${j==="exiting"?" avatar-thinking-tab--exiting":j==="entering"?" avatar-thinking-tab--entering":""}`,onAnimationEnd:ss,children:ie===bC?Yt.jsx("a",{href:"https://leads.streamoji.com",target:"_blank",rel:"noopener noreferrer",children:"Made by Streamoji Leads"}):ie}):null,Yt.jsx("div",{className:"avatar-input-container",children:Yt.jsx("div",{style:{display:"flex",alignItems:"center",width:"100%",height:"100%"},children:Pe?Yt.jsxs("div",{className:"avatar-input-recording",children:[Yt.jsx("button",{type:"button",className:"avatar-recording-cancel",onClick:Ct,title:"Cancel",children:Yt.jsxs("svg",{width:"18",height:"18",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2.5",strokeLinecap:"round",strokeLinejoin:"round",style:{display:"block"},children:[Yt.jsx("line",{x1:"18",y1:"6",x2:"6",y2:"18"}),Yt.jsx("line",{x1:"6",y1:"6",x2:"18",y2:"18"})]})}),Yt.jsxs("div",{style:{flex:1,height:"100%",position:"relative",display:"flex",alignItems:"center",minWidth:0},children:[Yt.jsx("div",{style:{flex:1,height:"100%"},children:Yt.jsx(gC,{analyser:te})}),Yt.jsxs("span",{style:{fontSize:"0.75rem",color:"#64748b",fontWeight:500,marginLeft:"4px",minWidth:"32px",textAlign:"right",fontVariantNumeric:"tabular-nums"},children:[Math.floor(rt/60),":",String(rt%60).padStart(2,"0")]})]}),Yt.jsx("button",{type:"button",className:"avatar-recording-confirm",onClick:lt,title:"Send",children:Yt.jsx("svg",{width:"18",height:"18",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2.5",strokeLinecap:"round",strokeLinejoin:"round",style:{display:"block"},children:Yt.jsx("polyline",{points:"20 6 9 17 4 12"})})})]}):z&&!kt?Yt.jsxs("div",{className:"avatar-input-speaking",children:[Yt.jsx("div",{style:{flex:1,height:"100%",display:"flex",alignItems:"center",paddingRight:"8px"},children:Yt.jsx(gC,{analyser:ht})}),Yt.jsx("button",{type:"button",className:"avatar-speaking-stop",onClick:()=>Qe(!0),title:"Stop",children:Yt.jsx("span",{className:"avatar-speaking-stop__icon","aria-hidden":!0})})]}):H?Yt.jsx("div",{style:{flex:1,height:"100%",display:"flex",alignItems:"center",justifyContent:"center"},children:Yt.jsx("div",{className:"avatar-input-loader"})}):Yt.jsxs("form",{onSubmit:zt,style:{flex:1,display:"flex",height:"100%",alignItems:"center"},children:[Yt.jsx("input",{id:"avatar-text-input",type:"text",value:R,onChange:Ue=>T(Ue.target.value),placeholder:B==="Busy"?"Assisting another user":W||"Ask me anything",disabled:H||B==="Busy",autoComplete:"off",style:{width:"100%",height:"100%"}}),B==="Busy"?Yt.jsx("button",{type:"button",className:"mic-button",disabled:!0,style:{backgroundColor:"#1e4a5e"},title:"Agent at capacity",children:Yt.jsx("svg",{width:"24",height:"24",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg","aria-hidden":"true",children:Yt.jsx("path",{d:"M4 2L20 2L12 10L4 2z M12 14L4 22L20 22L12 14z",fill:"white"})})}):R.trim()===""?Yt.jsx("button",{type:"button",className:"mic-button",onClick:ot,disabled:H,style:{backgroundColor:"#1e4a5e"},children:Yt.jsxs("svg",{width:"28",height:"28",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:[Yt.jsx("path",{d:"M12 14C13.66 14 15 12.66 15 11V5C15 3.34 13.66 2 12 2C10.34 2 9 3.34 9 5V11C9 12.66 10.34 14 12 14Z",fill:"white"}),Yt.jsx("path",{d:"M17 11C17 13.76 14.76 16 12 16C9.24 16 7 13.76 7 11H5C5 14.53 7.61 17.43 11 17.93V21H13V17.93C16.39 17.43 19 14.53 19 11H17Z",fill:"white"})]})}):Yt.jsx("button",{type:"submit",className:"mic-button",disabled:H,style:{backgroundColor:"#1e4a5e"},title:"Send",children:Yt.jsx("svg",{width:24,height:24,viewBox:"0 0 24 24",fill:"none","aria-hidden":"true",children:Yt.jsx("path",{d:"M19 12H5M19 12L14 17M19 12L14 7",stroke:"white",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"})})})]})})})]}),Yt.jsx("div",{className:"avatar-wrapper",children:Yt.jsxs("div",{className:"avatar-scene-wrapper",children:[pt!=="hidden"&&Yt.jsx("div",{className:`avatar-bubble${pt==="entering"?" avatar-bubble--entering":pt==="exiting"?" avatar-bubble--exiting":""}`,onAnimationEnd:Ni,children:Yt.jsx("div",{ref:Rt,className:`avatar-bubble__content${kt?" avatar-bubble__content--nudge":""}`,children:qt})}),Yt.jsx("div",{className:"avatar-canvas-layer",style:{width:F,height:F},children:Yt.jsxs(zO,{shadows:!0,camera:{position:[.2,1.4,3],fov:42},gl:{alpha:!0},dpr:1.8,style:{pointerEvents:"none",width:"100%",height:"100%"},children:[Yt.jsx(a4,{target:si}),Yt.jsx("ambientLight",{intensity:.7}),Yt.jsx("directionalLight",{position:[0,2,2],intensity:1}),Yt.jsx(aF,{preset:"city"}),Yt.jsx(me.Suspense,{fallback:null,children:b!==null&&Yt.jsx(s4,{avatarUrl:b,isPlayingRef:ve,visemeQueueRef:K,audioContextRef:se,responseAudioStartTimeRef:at,adjustments:KF,mood:mt,expression:xe,agentResponse:M,isSpeaking:z,nextStartTimeRef:ge,stopPlayback:Qe,setIsSpeaking:V,expressionUrl:tt,onExpressionFinished:fa,isNudgeResponse:kt,avatarGender:x})})]})})]})})]}):null},l4=({agentId:s,onNavigationRequested:e,presetUserDetails:t,onAvatarReady:n})=>Yt.jsx(o4,{agentId:s,onNavigationRequested:e,presetUserDetails:t,onAvatarReady:n}),TC="streamoji-leads-avatar-widget-root";function CC(s){const{token:e}=s;let t=document.getElementById(TC);if(!t){t=document.createElement("div"),t.id=TC,t.style.cssText="position:fixed;bottom:0;right:0;z-index:9999;pointer-events:none;";const i=document.createElement("div");i.style.cssText="pointer-events:auto;",t.appendChild(i),document.body.appendChild(t),t=i}CR.createRoot(t).render(wM.createElement(l4,{token:e||""}))}return window.StreamojiLeadsAvatarWidget={init:CC},Hy.init=CC,Object.defineProperty(Hy,Symbol.toStringTag,{value:"Module"}),Hy})({});
-//# sourceMappingURL=avatar-widget.umd.js.map
+`);Fn=Bi.pop()??"";for(const Vi of Bi){ca(`[SSE] Processing block: ${Vi.slice(0,50)}...`);const Di=mn(Vi);Di&&(ca(`[SSE] Event: ${Di.event}`),Pn(Di.event,Di.data))}if(Jn){if(ca("[SSE] Stream finished"),Fn.trim()){const Vi=mn(Fn.trim());Vi&&Pn(Vi.event,Vi.data)}L("Ready"),O(!1),T("");break}}}catch(ut){console.error("Chat Error:",ut),L("Agent Failed"),O(!1)}},ei=M.trim(),Zi=EC(ei),Gn=Zi&&z?Zi.slice(0,Bt!=null&&Bt>0?Bt:0):"";me.useEffect(()=>{const Ue=Be.current;Ue!=="exiting"&&(Gn?(de(Gn),Ue==="hidden"&&st("entering")):(Ue==="visible"||Ue==="entering")&&st("exiting"))},[Gn,pt]);const Ni=me.useCallback(()=>{const Ue=Be.current;Ue==="entering"?st("visible"):Ue==="exiting"&&st("hidden")},[]);me.useLayoutEffect(()=>{const Ue=Rt.current;Ue&&(Ue.scrollTop=Ue.scrollHeight)},[qt]);const si=x==="female"?jF:WF;return _?Yt.jsxs("div",{className:"avatar-widget-container",children:[Yt.jsxs("div",{className:"avatar-input-area",children:[j!=="hidden"?Yt.jsx("div",{className:`avatar-thinking-tab${j==="exiting"?" avatar-thinking-tab--exiting":j==="entering"?" avatar-thinking-tab--entering":""}`,onAnimationEnd:ss,children:ie===bC?Yt.jsx("a",{href:"https://leads.streamoji.com",target:"_blank",rel:"noopener noreferrer",children:"Made by Streamoji Leads"}):ie}):null,Yt.jsx("div",{className:"avatar-input-container",children:Yt.jsx("div",{style:{display:"flex",alignItems:"center",width:"100%",height:"100%"},children:Pe?Yt.jsxs("div",{className:"avatar-input-recording",children:[Yt.jsx("button",{type:"button",className:"avatar-recording-cancel",onClick:Ct,title:"Cancel",children:Yt.jsxs("svg",{width:"18",height:"18",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2.5",strokeLinecap:"round",strokeLinejoin:"round",style:{display:"block"},children:[Yt.jsx("line",{x1:"18",y1:"6",x2:"6",y2:"18"}),Yt.jsx("line",{x1:"6",y1:"6",x2:"18",y2:"18"})]})}),Yt.jsxs("div",{style:{flex:1,height:"100%",position:"relative",display:"flex",alignItems:"center",minWidth:0},children:[Yt.jsx("div",{style:{flex:1,height:"100%"},children:Yt.jsx(gC,{analyser:te})}),Yt.jsxs("span",{style:{fontSize:"0.75rem",color:"#64748b",fontWeight:500,marginLeft:"4px",minWidth:"32px",textAlign:"right",fontVariantNumeric:"tabular-nums"},children:[Math.floor(rt/60),":",String(rt%60).padStart(2,"0")]})]}),Yt.jsx("button",{type:"button",className:"avatar-recording-confirm",onClick:lt,title:"Send",children:Yt.jsx("svg",{width:"18",height:"18",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2.5",strokeLinecap:"round",strokeLinejoin:"round",style:{display:"block"},children:Yt.jsx("polyline",{points:"20 6 9 17 4 12"})})})]}):z&&!kt?Yt.jsxs("div",{className:"avatar-input-speaking",children:[Yt.jsx("div",{style:{flex:1,height:"100%",display:"flex",alignItems:"center",paddingRight:"8px"},children:Yt.jsx(gC,{analyser:ht})}),Yt.jsx("button",{type:"button",className:"avatar-speaking-stop",onClick:()=>Qe(!0),title:"Stop",children:Yt.jsx("span",{className:"avatar-speaking-stop__icon","aria-hidden":!0})})]}):H?Yt.jsx("div",{style:{flex:1,height:"100%",display:"flex",alignItems:"center",justifyContent:"center"},children:Yt.jsx("div",{className:"avatar-input-loader"})}):Yt.jsxs("form",{onSubmit:zt,style:{flex:1,display:"flex",height:"100%",alignItems:"center"},children:[Yt.jsx("input",{id:"avatar-text-input",type:"text",value:R,onChange:Ue=>T(Ue.target.value),placeholder:B==="Busy"?"Assisting another user":W||"Ask me anything",disabled:H||B==="Busy",autoComplete:"off",style:{width:"100%",height:"100%"}}),B==="Busy"?Yt.jsx("button",{type:"button",className:"mic-button",disabled:!0,style:{backgroundColor:"#1e4a5e"},title:"Agent at capacity",children:Yt.jsx("svg",{width:"24",height:"24",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg","aria-hidden":"true",children:Yt.jsx("path",{d:"M4 2L20 2L12 10L4 2z M12 14L4 22L20 22L12 14z",fill:"white"})})}):R.trim()===""?Yt.jsx("button",{type:"button",className:"mic-button",onClick:ot,disabled:H,style:{backgroundColor:"#1e4a5e"},children:Yt.jsxs("svg",{width:"28",height:"28",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:[Yt.jsx("path",{d:"M12 14C13.66 14 15 12.66 15 11V5C15 3.34 13.66 2 12 2C10.34 2 9 3.34 9 5V11C9 12.66 10.34 14 12 14Z",fill:"white"}),Yt.jsx("path",{d:"M17 11C17 13.76 14.76 16 12 16C9.24 16 7 13.76 7 11H5C5 14.53 7.61 17.43 11 17.93V21H13V17.93C16.39 17.43 19 14.53 19 11H17Z",fill:"white"})]})}):Yt.jsx("button",{type:"submit",className:"mic-button",disabled:H,style:{backgroundColor:"#1e4a5e"},title:"Send",children:Yt.jsx("svg",{width:24,height:24,viewBox:"0 0 24 24",fill:"none","aria-hidden":"true",children:Yt.jsx("path",{d:"M19 12H5M19 12L14 17M19 12L14 7",stroke:"white",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"})})})]})})})]}),Yt.jsx("div",{className:"avatar-wrapper",children:Yt.jsxs("div",{className:"avatar-scene-wrapper",children:[pt!=="hidden"&&Yt.jsx("div",{className:`avatar-bubble${pt==="entering"?" avatar-bubble--entering":pt==="exiting"?" avatar-bubble--exiting":""}`,onAnimationEnd:Ni,children:Yt.jsx("div",{ref:Rt,className:`avatar-bubble__content${kt?" avatar-bubble__content--nudge":""}`,children:qt})}),Yt.jsx("div",{className:"avatar-canvas-layer",style:{width:F,height:F},children:Yt.jsxs(zO,{shadows:!0,camera:{position:[.2,1.4,3],fov:42},gl:{alpha:!0},dpr:1.8,style:{pointerEvents:"none",width:"100%",height:"100%"},children:[Yt.jsx(a4,{target:si}),Yt.jsx("ambientLight",{intensity:.7}),Yt.jsx("directionalLight",{position:[0,2,2],intensity:1}),Yt.jsx(aF,{preset:"city"}),Yt.jsx(me.Suspense,{fallback:null,children:b!==null&&Yt.jsx(s4,{avatarUrl:b,isPlayingRef:ve,visemeQueueRef:K,audioContextRef:se,responseAudioStartTimeRef:at,adjustments:KF,mood:mt,expression:xe,agentResponse:M,isSpeaking:z,nextStartTimeRef:ge,stopPlayback:Qe,setIsSpeaking:V,expressionUrl:tt,onExpressionFinished:fa,isNudgeResponse:kt,avatarGender:x})})]})})]})})]}):null},l4=({agentId:s,onNavigationRequested:e,presetUserDetails:t,onAvatarReady:n})=>Yt.jsx(o4,{agentId:s,onNavigationRequested:e,presetUserDetails:t,onAvatarReady:n}),TC="streamoji-leads-avatar-widget-root";function CC(s){const{agentId:e}=s;let t=document.getElementById(TC);if(!t){t=document.createElement("div"),t.id=TC,t.style.cssText="position:fixed;bottom:0;right:0;z-index:9999;pointer-events:none;";const i=document.createElement("div");i.style.cssText="pointer-events:auto;",t.appendChild(i),document.body.appendChild(t),t=i}CR.createRoot(t).render(wM.createElement(l4,{agentId:e||""}))}return window.StreamojiLeadsAvatarWidget={init:CC},Hy.init=CC,Object.defineProperty(Hy,Symbol.toStringTag,{value:"Module"}),Hy})({});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@streamoji/avatar-widget",
-  "version": "0.5.1",
+  "version": "0.5.2",
   "description": "Plug-and-play React avatar widget for token-based AI conversations.",
   "type": "module",
   "main": "./dist/avatar-widget.cjs",