@livelayer/react 0.2.4 → 0.2.6
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/index.mjs +43 -41
- package/dist/styles.css +28 -2
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),t=require("react"),lt=require("@livelayer/sdk"),xe=require("livekit-client");class Ue extends t.Component{constructor(){super(...arguments),this.state={hasError:!1,error:null},this.reset=()=>{this.setState({hasError:!1,error:null})}}static getDerivedStateFromError(r){return{hasError:!0,error:r}}componentDidCatch(r,l){var a,s;(s=(a=this.props).onError)==null||s.call(a,r,l)}render(){var r;return this.state.hasError?this.props.fallback?this.props.fallback:e.jsxs("div",{className:"ll-error-boundary",role:"alert",children:[e.jsx("p",{className:"ll-error-boundary__title",children:"Widget crashed"}),e.jsx("p",{className:"ll-error-boundary__message",children:((r=this.state.error)==null?void 0:r.message)||"Something went wrong."}),e.jsx("button",{type:"button",className:"ll-error-boundary__retry",onClick:this.reset,children:"Reload widget"})]}):this.props.children}}function $e(n){const[r,l]=t.useState("idle"),[a,s]=t.useState("idle"),[c,d]=t.useState([]),[m,u]=t.useState(null),[x,p]=t.useState(null),[i,o]=t.useState(null),[k,b]=t.useState(!1),[j,N]=t.useState(null),C=t.useRef(null),M=t.useRef(n.onDataMessage);M.current=n.onDataMessage,t.useEffect(()=>{const y={onConnectionStateChange:v=>{l(v),v==="connected"&&N(null)},onAgentStateChange:s,onTranscript:v=>d([...v]),onAgentConfig:u,onAudioTrack:v=>o(v),onVideoTrack:v=>p(v),onVideoTrackRemoved:()=>p(null),onError:v=>N(v),onDataMessage:v=>{var E;(E=M.current)==null||E.call(M,v)},onResumabilityChange:b},_=new lt.LiveKitSession({agentId:n.agentId,baseUrl:n.baseUrl,apiKey:n.apiKey,sessionEndpoint:n.sessionEndpoint,sessionBody:n.sessionBody},y);return C.current=_,l("idle"),s("idle"),d([]),u(null),p(null),o(null),b(!1),N(null),()=>{var v;(v=_.destroy)==null||v.call(_),C.current=null}},[n.agentId,n.baseUrl,n.apiKey,n.sessionEndpoint,JSON.stringify(n.sessionBody??{})]);const R=t.useCallback(async()=>{const y=C.current;if(y)try{await y.connect()}catch(_){throw N(_ instanceof Error?_.message:String(_)),_}},[]),L=t.useCallback(()=>{const y=C.current;y&&y.disconnect()},[]),S=t.useCallback(()=>{var y;return((y=C.current)==null?void 0:y.getRoom())??null},[]);return{connectionState:r,agentState:a,transcript:c,agentConfig:m,videoElement:x,audioElement:i,canResume:k,error:j,connect:R,disconnect:L,getRoom:S,session:C.current}}function Oe(){const n=t.useRef(null),r=t.useRef(null),l=t.useRef(null),a=t.useRef(null),s=t.useRef(new Set),c=t.useRef(null),d=t.useCallback(()=>{const i=r.current;if(!i){a.current=null;return}(!c.current||c.current.length!==i.frequencyBinCount)&&(c.current=new Uint8Array(new ArrayBuffer(i.frequencyBinCount)));const o=c.current;i.getByteFrequencyData(o);let k=0;for(let j=0;j<o.length;j++)k+=o[j];const b=k/o.length/255;for(const j of s.current)try{j(b)}catch(N){console.error("[useAudioLevel] subscriber threw:",N)}a.current=requestAnimationFrame(d)},[]),m=t.useCallback(()=>{if(n.current||typeof window>"u"||typeof AudioContext>"u")return;const i=new AudioContext,o=i.createAnalyser();o.fftSize=64,o.connect(i.destination),n.current=i,r.current=o},[]),u=t.useCallback(i=>{if(m(),!(!n.current||!r.current)){if(l.current){try{l.current.disconnect()}catch{}l.current=null}try{const o=n.current.createMediaElementSource(i);o.connect(r.current),l.current=o}catch(o){console.warn("[useAudioLevel] createMediaElementSource failed:",o);return}a.current===null&&(a.current=requestAnimationFrame(d))}},[m,d]),x=t.useCallback(()=>{if(a.current!==null&&(cancelAnimationFrame(a.current),a.current=null),l.current){try{l.current.disconnect()}catch{}l.current=null}},[]),p=t.useCallback(i=>(s.current.add(i),()=>{s.current.delete(i)}),[]);return t.useEffect(()=>()=>{if(x(),r.current){try{r.current.disconnect()}catch{}r.current=null}if(n.current){try{n.current.close()}catch{}n.current=null}s.current.clear(),c.current=null},[x]),{attach:u,detach:x,subscribe:p}}function Ve(){const[n,r]=t.useState(!1),[l,a]=t.useState(null),s=t.useRef(null),c=t.useRef(null),d=t.useCallback(async p=>{if(s.current&&c.current){try{await c.current.localParticipant.unpublishTrack(s.current)}catch{}s.current.stop(),s.current=null}c.current=p,a(null);try{const i=await xe.createLocalAudioTrack({echoCancellation:!0,noiseSuppression:!0});await p.localParticipant.publishTrack(i),s.current=i,r(i.isMuted)}catch(i){const o=i instanceof Error&&i.name==="NotAllowedError"?"Enable your microphone to talk with the agent.":"Microphone unavailable. Check browser permissions and try again.";throw a(o),i}},[]),m=t.useCallback(()=>{const p=s.current;p&&(p.isMuted?(p.unmute(),r(!1)):(p.mute(),r(!0)))},[]),u=t.useCallback(()=>{const p=s.current,i=c.current;if(p&&i){try{i.localParticipant.unpublishTrack(p)}catch{}p.stop()}s.current=null,c.current=null,r(!1)},[]),x=t.useCallback(()=>a(null),[]);return{isMuted:n,micError:l,toggleMute:m,setupMic:d,teardownMic:u,clearError:x}}const at={resolution:{width:640,height:480,frameRate:24}};function We(){const[n,r]=t.useState(!1),[l,a]=t.useState(null),[s,c]=t.useState(null),[d,m]=t.useState(""),u=t.useRef(null),x=t.useRef(null),p=t.useCallback(C=>{u.current=C},[]),i=t.useCallback(()=>{const C=u.current,M=x.current;if(M&&C){const R=C.localParticipant.getTrackPublication(xe.Track.Source.Camera);if(R!=null&&R.track){try{C.localParticipant.unpublishTrack(R.track)}catch{}R.track.stop()}else M.stop()}x.current=null,c(null),r(!1)},[]),o=t.useCallback(async C=>{const M=u.current;if(M){a(null);try{const R={...at};C&&(R.deviceId=C);const L=await xe.createLocalVideoTrack(R);await M.localParticipant.publishTrack(L),x.current=L;const S=L.attach();c(S),r(!0),C&&m(C);try{M.localParticipant.publishData(new TextEncoder().encode(JSON.stringify({type:"user_camera_on"})),{reliable:!0})}catch{}}catch(R){const L=R instanceof Error&&R.name==="NotAllowedError"?"Enable your camera in the browser to share video.":"Camera unavailable. Check permissions and try again.";a(L)}}},[]),k=t.useCallback(async()=>{n?i():await o(d||void 0)},[n,d,i,o]),b=t.useCallback(async C=>{i(),await o(C)},[i,o]),j=t.useCallback(()=>{i(),u.current=null,a(null),m("")},[i]),N=t.useCallback(()=>a(null),[]);return t.useEffect(()=>()=>{x.current&&x.current.stop()},[]),{isEnabled:n,error:l,previewEl:s,activeDeviceId:d,toggle:k,switchDevice:b,attachRoom:p,teardown:j,clearError:N}}function Fe(){const[n,r]=t.useState(!1),[l,a]=t.useState(null),[s,c]=t.useState(null),d=t.useRef(null),m=t.useCallback(o=>{d.current=o},[]),u=t.useCallback(()=>c(null),[]),x=t.useCallback(async()=>{const o=d.current;if(o){if(n){try{await o.localParticipant.setScreenShareEnabled(!1)}catch{}u(),r(!1);return}a(null);try{await o.localParticipant.setScreenShareEnabled(!0);let k=0;const b=()=>{const j=o.localParticipant.getTrackPublication(xe.Track.Source.ScreenShare);if(j!=null&&j.track){const N=j.track.attach();c(N),r(!0);try{o.localParticipant.publishData(new TextEncoder().encode(JSON.stringify({type:"user_screen_share_on"})),{reliable:!0})}catch{}return}k++<10?setTimeout(b,100):r(!0)};b()}catch(k){const b=k instanceof Error?k.name:"";b!=="NotAllowedError"&&b!=="AbortError"&&a("Screen share unavailable. Try again."),r(!1)}}},[n,u]),p=t.useCallback(()=>{const o=d.current;if(o&&n)try{o.localParticipant.setScreenShareEnabled(!1)}catch{}u(),r(!1),a(null),d.current=null},[n,u]),i=t.useCallback(()=>a(null),[]);return{isEnabled:n,error:l,previewEl:s,toggle:x,attachRoom:m,teardown:p,clearError:i}}function Ke(){const[n,r]=t.useState([]),[l,a]=t.useState([]),s=t.useCallback(async()=>{if(!(typeof navigator>"u"||!navigator.mediaDevices))try{const c=await navigator.mediaDevices.enumerateDevices();r(c.filter(d=>d.kind==="audioinput")),a(c.filter(d=>d.kind==="videoinput"))}catch{}},[]);return t.useEffect(()=>{if(s(),typeof navigator>"u"||!navigator.mediaDevices)return;const c=()=>void s();return navigator.mediaDevices.addEventListener("devicechange",c),()=>navigator.mediaDevices.removeEventListener("devicechange",c)},[s]),{mics:n,cameras:l,refresh:s}}function qe(n,r,l=!1){const[a,s]=t.useState(null),[c,d]=t.useState(null),[m,u]=t.useState(!l&&!!n);return t.useEffect(()=>{if(l||!n){u(!1);return}const x=new AbortController,p=r||"https://app.livelayer.studio";return u(!0),d(null),fetch(`${p}/api/widget/agent/${encodeURIComponent(n)}`,{signal:x.signal}).then(async i=>{if(!i.ok){const o=await i.json().catch(()=>({}));throw new Error(o.error||`HTTP ${i.status}`)}return i.json()}).then(i=>{x.signal.aborted||(s(i),u(!1))}).catch(i=>{x.signal.aborted||(d(i instanceof Error?i.message:"Agent lookup failed"),u(!1))}),()=>x.abort()},[n,r,l]),{info:a,error:c,loading:m}}function it(n){if(typeof window>"u")return null;try{return window.localStorage.getItem(n)}catch{return null}}function ot(n,r){if(!(typeof window>"u"))try{window.localStorage.setItem(n,r)}catch{}}function Ge({value:n,defaultValue:r="expanded",onChange:l}={}){const a=n!==void 0,[s,c]=t.useState(r),d=a?n:s,m=t.useCallback(u=>{u!==d&&(a||c(u),l==null||l(u))},[d,a,l]);return[d,m]}const ct=["hidden","minimized","expanded"];function dt(n){return n&&ct.includes(n)?n:null}function Ye({value:n,defaultValue:r="expanded",onChange:l,persistKey:a="ll-widget",disablePersistence:s=!1}={}){const c=`${a}:display-mode`,d=t.useRef(!1),[m,u]=Ge({value:n,defaultValue:r,onChange:x=>{n===void 0&&!s&&ot(c,x),l==null||l(x)}});return t.useEffect(()=>{if(d.current||(d.current=!0,s||n!==void 0))return;const x=dt(it(c));x&&x!==m&&u(x)},[]),[m,u]}const ut=640;function He(n=ut){const[r,l]=t.useState(!1);return t.useEffect(()=>{if(n===!1){l(!1);return}if(typeof window>"u"||typeof window.matchMedia>"u")return;const a=`(max-width: ${n-1}px)`,s=window.matchMedia(a),c=()=>l(s.matches);return c(),typeof s.addEventListener=="function"?(s.addEventListener("change",c),()=>s.removeEventListener("change",c)):(s.addListener(c),()=>{s.removeListener(c)})},[n]),r}const Ie=({muted:n=!1,className:r})=>n?e.jsxs("svg",{className:r,fill:"none",viewBox:"0 0 24 24",stroke:"currentColor",strokeWidth:2,"aria-hidden":"true",children:[e.jsx("path",{strokeLinecap:"round",strokeLinejoin:"round",d:"M5.586 15H4a1 1 0 01-1-1v-4a1 1 0 011-1h1.586l4.707-4.707C10.923 3.663 12 4.109 12 5v14c0 .891-1.077 1.337-1.707.707L5.586 15z"}),e.jsx("path",{strokeLinecap:"round",strokeLinejoin:"round",d:"M17 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2"})]}):e.jsx("svg",{className:r,fill:"none",viewBox:"0 0 24 24",stroke:"currentColor",strokeWidth:2,"aria-hidden":"true",children:e.jsx("path",{strokeLinecap:"round",strokeLinejoin:"round",d:"M19 11a7 7 0 01-7 7m0 0a7 7 0 01-7-7m7 7v4m0 0H8m4 0h4M12 1a3 3 0 00-3 3v4a3 3 0 006 0V4a3 3 0 00-3-3z"})}),Ae=({className:n})=>e.jsx("svg",{className:n,fill:"none",viewBox:"0 0 24 24",stroke:"currentColor",strokeWidth:2,"aria-hidden":"true",children:e.jsx("path",{strokeLinecap:"round",strokeLinejoin:"round",d:"M4 8V4m0 0h4M4 4l5 5m11-1V4m0 0h-4m4 0l-5 5M4 16v4m0 0h4m-4 0l5-5m11 5l-5-5m5 5v-4m0 4h-4"})}),ft=({className:n})=>e.jsx("svg",{className:n,fill:"none",viewBox:"0 0 24 24",stroke:"currentColor",strokeWidth:2,"aria-hidden":"true",children:e.jsx("path",{strokeLinecap:"round",strokeLinejoin:"round",d:"M6 18L18 6M6 6l12 12"})}),ht={left:180,right:0,up:-90,down:90},pt=({direction:n="right",className:r})=>e.jsx("svg",{className:r,fill:"none",viewBox:"0 0 24 24",stroke:"currentColor",strokeWidth:2,style:{transform:`rotate(${ht[n]}deg)`},"aria-hidden":"true",children:e.jsx("path",{strokeLinecap:"round",strokeLinejoin:"round",d:"M9 6l6 6-6 6"})});function mt(n){return n==="top-left"||n==="bottom-left"?"left":"right"}const Je="ll-hidden-tab-center-y",xt=5,De=16;function gt(){if(typeof window>"u")return null;try{const n=window.localStorage.getItem(Je);if(!n)return null;const r=Number.parseFloat(n);return Number.isFinite(r)?r:null}catch{return null}}function Te(n){if(!(typeof window>"u"))try{window.localStorage.setItem(Je,String(n))}catch{}}const vt=({position:n,isMobile:r,isSpeaking:l,onExpand:a,label:s="Open widget"})=>{const c=mt(n),d=c==="right"?"left":"right",m=r?80:72,[u,x]=t.useState(null),[p,i]=t.useState(!1),o=t.useRef(null),k=t.useRef(!1),b=t.useCallback(y=>{if(typeof window>"u")return y;const _=m/2,v=De+_,E=window.innerHeight-De-_;return E<v?Math.max(v,y):Math.max(v,Math.min(E,y))},[m]);t.useEffect(()=>{const y=gt();x(b(y??window.innerHeight/2));const _=()=>{x(v=>v===null?null:b(v))};return window.addEventListener("resize",_),()=>window.removeEventListener("resize",_)},[b]);const j=t.useCallback(y=>{if(!(y.pointerType==="mouse"&&y.button!==0)&&u!==null){try{y.currentTarget.setPointerCapture(y.pointerId)}catch{}o.current={startClientY:y.clientY,startCenterY:u,moved:!1}}},[u]),N=t.useCallback(y=>{const _=o.current;if(!_)return;const v=y.clientY-_.startClientY;!_.moved&&Math.abs(v)>xt&&(_.moved=!0,i(!0)),_.moved&&x(b(_.startCenterY+v))},[b]),C=t.useCallback(y=>{const _=o.current;if(_){try{y.currentTarget.releasePointerCapture(y.pointerId)}catch{}o.current=null,_.moved&&(i(!1),k.current=!0,x(v=>(v!==null&&Te(v),v)))}},[]),M=t.useCallback(()=>{if(k.current){k.current=!1;return}a()},[a]),R=t.useCallback(y=>{if(y.key==="ArrowUp"||y.key==="ArrowDown"){y.preventDefault();const _=y.key==="ArrowUp"?-8:8;x(v=>{if(v===null)return v;const E=b(v+_);return Te(E),E})}},[b]),L=["ll-hidden",`ll-hidden--${c}`,r?"ll-hidden--mobile":"ll-hidden--desktop",l?"ll-hidden--speaking":null,p?"is-dragging":null].filter(Boolean).join(" "),S=u===null?void 0:{top:`${u-m/2}px`,transform:"none"};return e.jsx("button",{type:"button",className:L,onPointerDown:j,onPointerMove:N,onPointerUp:C,onPointerCancel:C,onClick:M,onKeyDown:R,"aria-label":s,"data-position":n,style:S,children:e.jsx(pt,{direction:d,className:"ll-hidden__chevron"})})},bt=({audioLevel:n,bars:r=20,maxHeight:l=20,minHeight:a=4,className:s,barClassName:c})=>{const d=t.useRef(null),m=t.useRef([]),u=t.useMemo(()=>{const p=(Math.sqrt(5)-1)/2;return Array.from({length:r},(i,o)=>.5+o*p%1*.5)},[r]);t.useEffect(()=>n.subscribe(i=>{for(let o=0;o<r;o++){const k=m.current[o];if(!k)continue;const b=Math.max(a,i*l*u[o]);k.style.height=`${b}px`}}),[n,r,l,a,u]);const x=["ll-waveform",s].filter(Boolean).join(" ");return e.jsx("div",{ref:d,className:x,"aria-hidden":"true",children:Array.from({length:r},(p,i)=>e.jsx("div",{ref:o=>{m.current[i]=o},className:["ll-waveform__bar",c].filter(Boolean).join(" "),style:{height:`${a}px`}},i))})},yt=({position:n,isMobile:r,agentName:l,avatarImageUrl:a,agentState:s,isMuted:c,audioLevel:d,onExpand:m,onToggleMute:u,onClose:x})=>r?e.jsx("div",{className:"ll-minimized ll-minimized--mobile",role:"region","aria-label":`${l} widget`,children:e.jsxs("button",{type:"button",className:"ll-minimized__surface",onClick:m,"aria-label":`Expand ${l} widget`,children:[a?e.jsx("img",{src:a,alt:l,className:"ll-minimized__avatar"}):e.jsx("div",{className:"ll-minimized__avatar ll-minimized__avatar--placeholder"}),e.jsx(bt,{audioLevel:d,bars:16,maxHeight:18,className:"ll-minimized__waveform"}),e.jsx("span",{className:"ll-minimized__name",children:l}),e.jsxs("div",{className:"ll-minimized__controls",children:[e.jsx("span",{className:"ll-minimized__btn",role:"button",tabIndex:0,onClick:p=>{p.stopPropagation(),u()},onKeyDown:p=>{(p.key==="Enter"||p.key===" ")&&(p.stopPropagation(),p.preventDefault(),u())},"aria-label":c?"Unmute microphone":"Mute microphone",children:e.jsx(Ie,{muted:c,className:"ll-minimized__icon"})}),e.jsx(Ae,{className:"ll-minimized__icon ll-minimized__icon--expand"})]})]})}):e.jsx("div",{className:"ll-minimized ll-minimized--desktop","data-position":n,role:"region","aria-label":`${l} widget`,children:e.jsxs("div",{className:"ll-minimized__surface",children:[a?e.jsx("img",{src:a,alt:l,className:"ll-minimized__avatar"}):e.jsx("div",{className:"ll-minimized__avatar ll-minimized__avatar--placeholder"}),e.jsxs("div",{className:"ll-minimized__meta",children:[e.jsx("span",{className:"ll-minimized__name",children:l}),e.jsx("span",{className:"ll-minimized__state",children:s==="speaking"?"Speaking":s==="thinking"?"Thinking":"Listening"})]}),e.jsxs("div",{className:"ll-minimized__controls",children:[e.jsx("button",{type:"button",className:"ll-minimized__btn",onClick:u,"aria-label":c?"Unmute microphone":"Mute microphone",children:e.jsx(Ie,{muted:c,className:"ll-minimized__icon"})}),e.jsx("button",{type:"button",className:"ll-minimized__btn",onClick:m,"aria-label":`Expand ${l} widget`,children:e.jsx(Ae,{className:"ll-minimized__icon"})}),e.jsx("button",{type:"button",className:"ll-minimized__btn ll-minimized__btn--close",onClick:x,"aria-label":"Close widget",children:e.jsx(ft,{className:"ll-minimized__icon"})})]})]})}),_t=({src:n,alt:r,preCannedPlaying:l=!1,className:a,style:s})=>{const[c,d]=t.useState(!1),m=t.useRef(n);if(t.useEffect(()=>{m.current!==n&&(m.current=n,d(!1))},[n]),!n)return null;const u={position:"absolute",inset:0,width:"100%",height:"100%",objectFit:"cover",objectPosition:"top",transition:"opacity 500ms ease, transform 500ms ease",transform:l?"scale(1.02)":"scale(1)",opacity:c?1:0,...s};return e.jsx("img",{src:n,alt:r,className:a,style:u,loading:"eager",fetchpriority:"high",onLoad:()=>d(!0)})},kt=({position:n,isMobile:r,agentName:l,avatarImageUrl:a,idleLoopUrl:s,greeting:c,branding:d,teamMembers:m,currentTeamMemberId:u,isSwitchingTeamMember:x,teamSwitcherOpen:p,onToggleTeamSwitcher:i,onSelectTeamMember:o,languageMenuOpen:k,onToggleLanguageMenu:b,connectionState:j,agentState:N,transcript:C,canResume:M,needsUserGesture:R,error:L,isMuted:S,micError:y,micDevices:_,isCameraEnabled:v,cameraPreviewEl:E,cameraDevices:G,activeCameraId:Q,isScreenShareEnabled:T,screenPreviewEl:z,isSpeakerMuted:$,allowCamera:Z,allowScreenShare:I,allowTyping:ge,avatarVideoContainerRef:ve,onConnect:fe,onDisconnect:ie,onRetry:be,onResumeAudio:ye,onToggleMute:Y,onToggleCamera:D,onSwitchCameraDevice:he,onToggleScreenShare:H,onToggleSpeaker:O,onSendMessage:J,onMinimize:ee,onClose:P,onClearMicError:V})=>{var pe;const B=C.length>0?C[C.length-1]:null,W=((m==null?void 0:m.length)??0)>1,te=j==="connecting"||j==="connected",F=j==="connected",oe=j==="idle"||j==="disconnected"||j==="error",ce=t.useRef(null),ne=t.useRef(null);t.useEffect(()=>{const h=ce.current;h&&(h.innerHTML="",E&&(E.style.width="100%",E.style.height="100%",E.style.objectFit="cover",E.style.transform="scaleX(-1)",h.appendChild(E)))},[E]),t.useEffect(()=>{const h=ne.current;h&&(h.innerHTML="",z&&(z.style.width="100%",z.style.height="100%",z.style.objectFit="contain",h.appendChild(z)))},[z]);const[K,re]=t.useState(!1),[se,q]=t.useState(!1);t.useEffect(()=>{if(!K&&!se&&!k&&!p)return;const h=()=>{re(!1),q(!1),k&&b(),p&&i()};return document.addEventListener("click",h),()=>document.removeEventListener("click",h)},[K,se,k,p,b,i]);const[le,ae]=t.useState(""),A=t.useCallback(h=>{h.preventDefault();const U=le.trim();U&&(J(U),ae(""))},[le,J]),f=d.productName||"Live Layer",de=F&&(B!=null&&B.text)?B.text:c||"",_e=["ll-expanded",r?"ll-expanded--mobile":"ll-expanded--desktop"].join(" ");return e.jsxs("div",{className:_e,"data-position":n,"data-state":F?"connected":te?"connecting":"idle",role:"dialog","aria-label":`${l} widget`,children:[e.jsxs("div",{className:"ll-expanded__bg",children:[a?e.jsx(_t,{src:a,alt:l,className:"ll-expanded__bg-img"}):e.jsx("div",{className:"ll-expanded__bg-fallback",children:e.jsx("span",{className:"ll-expanded__bg-initial",children:((pe=l==null?void 0:l.charAt(0))==null?void 0:pe.toUpperCase())||"A"})}),s&&!F&&e.jsx("video",{className:"ll-expanded__bg-idle",src:s,autoPlay:!0,loop:!0,muted:!0,playsInline:!0})]}),e.jsx("div",{ref:ve,className:"ll-expanded__video"}),j==="connecting"&&e.jsxs("div",{className:"ll-expanded__overlay ll-expanded__overlay--connecting",children:[e.jsx("div",{className:"ll-expanded__spinner"}),e.jsx("p",{className:"ll-expanded__overlay-text",children:x?"Switching...":"Connecting..."})]}),R&&F&&e.jsxs("button",{type:"button",className:"ll-expanded__overlay ll-expanded__overlay--gesture",onClick:ye,children:[e.jsx("svg",{width:"32",height:"32",viewBox:"0 0 24 24",fill:"currentColor","aria-hidden":!0,children:e.jsx("path",{d:"M3 9v6h4l5 5V4L7 9H3zm13.54.12a5 5 0 0 1 0 5.76l-1.41-1.41a3 3 0 0 0 0-2.94L16.54 9.12z"})}),e.jsx("p",{className:"ll-expanded__overlay-text",children:"Tap to enable audio"})]}),te?e.jsxs("div",{className:"ll-expanded__topbar",children:[e.jsxs("div",{className:"ll-expanded__topbar-left",children:[e.jsxs("div",{className:"ll-expanded__pill-wrap",children:[e.jsxs("button",{type:"button",className:"ll-hpill",onClick:h=>{W&&(h.stopPropagation(),i())},"aria-haspopup":W?"listbox":void 0,"aria-expanded":W?p:void 0,children:[e.jsx("span",{className:"ll-hpill__label",children:l}),W&&e.jsx(me,{})]}),W&&p&&e.jsx("div",{className:"ll-hmenu",onClick:h=>h.stopPropagation(),role:"listbox",children:m==null?void 0:m.map(h=>e.jsxs("button",{type:"button",className:`ll-hmenu__item ${h.id===u?"is-active":""}`,onClick:()=>o(h.id),role:"option","aria-selected":h.id===u,children:[h.avatarImageUrl&&e.jsx("img",{src:h.avatarImageUrl,alt:"",className:"ll-hmenu__avatar"}),e.jsx("span",{className:"ll-hmenu__name",children:h.name}),h.role&&e.jsx("span",{className:"ll-hmenu__role",children:h.role})]},h.id))})]}),e.jsxs("div",{className:"ll-expanded__pill-wrap",children:[e.jsxs("button",{type:"button",className:"ll-hpill",onClick:h=>{h.stopPropagation(),b()},"aria-haspopup":"listbox","aria-expanded":k,children:[e.jsx("span",{className:"ll-hpill__label",children:"English"}),e.jsx(me,{})]}),k&&e.jsx("div",{className:"ll-hmenu",onClick:h=>h.stopPropagation(),role:"listbox",children:e.jsx("button",{type:"button",className:"ll-hmenu__item is-active",role:"option","aria-selected":!0,children:e.jsx("span",{className:"ll-hmenu__name",children:"English"})})})]}),e.jsx("span",{className:`ll-expanded__state ll-expanded__state--${N}`,children:N})]}),e.jsxs("div",{className:"ll-expanded__header-actions",children:[e.jsx("button",{type:"button",className:"ll-hbtn",onClick:ee,"aria-label":"Minimize widget",title:"Minimize",children:e.jsx(Pe,{})}),e.jsx("button",{type:"button",className:"ll-hbtn ll-hbtn--danger",onClick:P,"aria-label":"End conversation",title:"End conversation",children:e.jsx(ze,{})})]})]}):e.jsxs("div",{className:"ll-expanded__header ll-expanded__header--idle",children:[e.jsx("span",{className:"ll-expanded__brand",children:f}),e.jsxs("div",{className:"ll-expanded__header-actions",children:[e.jsx("button",{type:"button",className:"ll-hbtn ll-hbtn--ghost",onClick:ee,"aria-label":"Minimize widget",children:e.jsx(Pe,{})}),e.jsx("button",{type:"button",className:"ll-hbtn ll-hbtn--danger",onClick:P,"aria-label":"Close widget",children:e.jsx(ze,{})})]})]}),oe&&e.jsxs("button",{type:"button",className:"ll-expanded__play",onClick:fe,"aria-label":M?"Resume session":"Start video call",children:[e.jsx("div",{className:"ll-expanded__play-circle",children:e.jsx("svg",{width:"22",height:"22",viewBox:"0 0 24 24",fill:"currentColor","aria-hidden":!0,children:e.jsx("polygon",{points:"6 3 20 12 6 21 6 3"})})}),e.jsx("span",{className:"ll-expanded__play-label",children:M?"Restart session":"Start video call"}),M&&e.jsx("span",{className:"ll-expanded__play-sublabel",children:"Pick up where you left off"})]}),e.jsxs("div",{className:`ll-expanded__pip ${te&&(v||T)?"is-visible":""}`,children:[e.jsx("div",{ref:ne,className:T?"ll-expanded__pip-host":"ll-expanded__pip-host is-hidden"}),e.jsx("div",{ref:ce,className:!T&&v?"ll-expanded__pip-host":"ll-expanded__pip-host is-hidden"})]}),te?e.jsxs("div",{className:"ll-expanded__bottom",children:[de&&e.jsx("div",{className:"ll-expanded__transcript",children:e.jsx("p",{className:"ll-expanded__transcript-text",children:de})}),e.jsxs("div",{className:"ll-toolbar",onClick:h=>h.stopPropagation(),children:[I&&e.jsx("button",{type:"button",className:`ll-tool ${T?"is-on":""}`,onClick:H,"aria-label":T?"Stop sharing screen":"Share screen",title:T?"Stop sharing":"Share screen",children:e.jsx(jt,{})}),Z&&e.jsxs("div",{className:"ll-tool-split",children:[e.jsx("button",{type:"button",className:`ll-tool ll-tool--left ${v?"is-on":""}`,onClick:D,"aria-label":v?"Turn off camera":"Turn on camera",title:v?"Stop camera":"Start camera",children:e.jsx(Ct,{})}),e.jsx("button",{type:"button",className:`ll-tool ll-tool--right ${v?"is-on":""}`,onClick:h=>{h.stopPropagation(),q(U=>!U),re(!1)},"aria-label":"Camera devices","aria-haspopup":"listbox","aria-expanded":se,children:e.jsx(me,{})}),se&&G.length>0&&e.jsx(Be,{label:"Camera",devices:G,activeId:Q,onPick:h=>{q(!1),he(h)}})]}),e.jsxs("div",{className:"ll-tool-split",children:[e.jsx("button",{type:"button",className:`ll-tool ll-tool--left ${S?"is-muted":""}`,onClick:Y,"aria-label":S?"Unmute microphone":"Mute microphone",title:S?"Unmute":"Mute",children:e.jsx(wt,{muted:S})}),e.jsx("button",{type:"button",className:`ll-tool ll-tool--right ${S?"is-muted":""}`,onClick:h=>{h.stopPropagation(),re(U=>!U),q(!1)},"aria-label":"Microphone devices","aria-haspopup":"listbox","aria-expanded":K,children:e.jsx(me,{})}),K&&_.length>0&&e.jsx(Be,{label:"Microphone",devices:_,activeId:"",onPick:()=>re(!1)})]}),e.jsx("button",{type:"button",className:`ll-tool ${$?"is-muted":""}`,onClick:O,"aria-label":$?"Unmute speaker":"Mute speaker",title:$?"Unmute speaker":"Mute speaker",children:e.jsx(St,{muted:$})})]}),ge&&e.jsxs("form",{className:"ll-message-input",onSubmit:A,children:[e.jsx("input",{type:"text",className:"ll-message-input__field",placeholder:"Message...",value:le,onChange:h=>ae(h.target.value),"aria-label":"Message the agent"}),le.trim()&&e.jsx("button",{type:"submit",className:"ll-message-input__send","aria-label":"Send message",children:e.jsx(Et,{})})]}),e.jsx("button",{type:"button",className:"ll-expanded__end",onClick:ie,children:"End conversation"})]}):c&&e.jsx("div",{className:"ll-expanded__bottom ll-expanded__bottom--idle",children:e.jsx("div",{className:"ll-expanded__transcript",children:e.jsx("p",{className:"ll-expanded__transcript-text",children:c})})}),(()=>{if(y&&j!=="error")return e.jsxs("div",{className:"ll-expanded__banner",role:"alert",children:[e.jsx("span",{children:y}),e.jsx("button",{type:"button",className:"ll-expanded__banner-x",onClick:V,"aria-label":"Dismiss",children:"×"})]});if(!L||j!=="error")return null;let h="Failed to connect",U="Try again";return L==="MIC_PERMISSION_DENIED"?h="Microphone blocked. Allow access to talk.":L==="MIC_NOT_FOUND"?h="No microphone found. Plug one in + retry.":L==="MIC_UNAVAILABLE"?h="Mic unavailable. Check other apps using it.":L==="AGENT_TIMEOUT"?h="Agent didn't pick up. Try again.":L==="CONNECT_FAILED"?h="Connection failed. Check your network.":L.length<80&&(h=L),e.jsxs("div",{className:"ll-expanded__banner ll-expanded__banner--error",role:"alert",children:[e.jsx("span",{children:h}),e.jsx("button",{type:"button",className:"ll-expanded__banner-retry",onClick:be,children:U})]})})()]})};function me(){return e.jsx("svg",{width:"12",height:"12",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round","aria-hidden":!0,children:e.jsx("polyline",{points:"6 9 12 15 18 9"})})}function ze(){return e.jsxs("svg",{width:"12",height:"12",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2.5",strokeLinecap:"round","aria-hidden":!0,children:[e.jsx("line",{x1:"18",y1:"6",x2:"6",y2:"18"}),e.jsx("line",{x1:"6",y1:"6",x2:"18",y2:"18"})]})}function Pe(){return e.jsx("svg",{width:"12",height:"12",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2.5",strokeLinecap:"round","aria-hidden":!0,children:e.jsx("line",{x1:"5",y1:"12",x2:"19",y2:"12"})})}function jt(){return e.jsxs("svg",{width:"16",height:"16",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round","aria-hidden":!0,children:[e.jsx("rect",{x:"2",y:"3",width:"20",height:"14",rx:"2"}),e.jsx("line",{x1:"8",y1:"21",x2:"16",y2:"21"}),e.jsx("line",{x1:"12",y1:"17",x2:"12",y2:"21"})]})}function Ct(){return e.jsxs("svg",{width:"16",height:"16",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round","aria-hidden":!0,children:[e.jsx("path",{d:"M23 7l-7 5 7 5V7z"}),e.jsx("rect",{x:"1",y:"5",width:"15",height:"14",rx:"2"})]})}function wt({muted:n}){return e.jsxs("svg",{width:"16",height:"16",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round","aria-hidden":!0,children:[e.jsx("path",{d:"M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z"}),e.jsx("path",{d:"M19 10v2a7 7 0 0 1-14 0v-2"}),e.jsx("line",{x1:"12",y1:"19",x2:"12",y2:"23"}),n&&e.jsx("line",{x1:"1",y1:"1",x2:"23",y2:"23"})]})}function St({muted:n}){return e.jsxs("svg",{width:"16",height:"16",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round","aria-hidden":!0,children:[e.jsx("polygon",{points:"11 5 6 9 2 9 2 15 6 15 11 19 11 5"}),n?e.jsx("line",{x1:"23",y1:"9",x2:"17",y2:"15"}):e.jsxs(e.Fragment,{children:[e.jsx("path",{d:"M19.07 4.93a10 10 0 0 1 0 14.14"}),e.jsx("path",{d:"M15.54 8.46a5 5 0 0 1 0 7.07"})]})]})}function Et(){return e.jsxs("svg",{width:"14",height:"14",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round","aria-hidden":!0,children:[e.jsx("line",{x1:"5",y1:"12",x2:"19",y2:"12"}),e.jsx("polyline",{points:"12 5 19 12 12 19"})]})}const Be=({label:n,devices:r,activeId:l,onPick:a})=>e.jsxs("div",{className:"ll-device-menu",onClick:s=>s.stopPropagation(),role:"listbox",children:[e.jsx("p",{className:"ll-device-menu__label",children:n}),r.map((s,c)=>{const d=l===s.deviceId;return e.jsxs("button",{type:"button",className:`ll-device-menu__item ${d?"is-active":""}`,onClick:()=>a(s.deviceId),role:"option","aria-selected":d,children:[d&&e.jsx("span",{className:"ll-device-menu__dot",children:"●"}),e.jsx("span",{className:"ll-device-menu__name",children:s.label||`${n} ${c+1}`})]},s.deviceId||c)})]}),Nt=new Set(["agent_state","avatar_stream_ready","avatar_active","avatar_idle","bot_ready","agent_error","idle_warning","idle_timeout"]);function Mt(n){var Se,Ee,Ne,Me,Re,Le;const{agentId:r,apiKey:l,baseUrl:a="https://app.livelayer.studio",sessionEndpoint:s,sessionBody:c,autoConnect:d=!1,displayMode:m,defaultDisplayMode:u="expanded",onDisplayModeChange:x,position:p="bottom-right",mobileBreakpoint:i=640,persistKey:o="ll-widget",disablePersistence:k=!1,teamMembers:b,currentTeamMemberId:j,onTeamMemberChange:N,idleLoopUrl:C,greeting:M,avatarImageUrl:R,agentName:L,branding:S={},allowCamera:y=!0,allowScreenShare:_=!0,allowTyping:v=!0,onConnect:E,onDisconnect:G,onTranscript:Q,onAgentState:T,onConnectionStateChange:z,onAgentEvent:$,onAgentCommand:Z,controlledSession:I,className:ge,style:ve,zIndex:fe=2147483647}=n,ie=j!==void 0,[be,ye]=t.useState(()=>{var g;return j??((g=b==null?void 0:b[0])==null?void 0:g.id)}),Y=ie?j:be,D=t.useMemo(()=>(b==null?void 0:b.find(g=>g.id===Y))??null,[b,Y]),he=(D==null?void 0:D.agentId)??r,[H,O]=Ye({value:m,defaultValue:u,onChange:x,persistKey:o,disablePersistence:k}),J=He(i),ee=Oe(),P=Ve(),V=We(),B=Fe(),W=Ke(),[te,F]=t.useState(!1),[oe,ce]=t.useState(!1),[ne,K]=t.useState(!1),[re,se]=t.useState(!1),[q,le]=t.useState(!1),ae=t.useCallback(g=>{const w=g;!w.type||typeof w.type!="string"||($==null||$({eventName:w.type,data:g}),Nt.has(w.type)||Z==null||Z(w))},[Z,$]),A=$e({agentId:I?"__controlled__":he,baseUrl:a,apiKey:l,sessionEndpoint:s,sessionBody:c,onDataMessage:I?void 0:ae});t.useEffect(()=>{if(I!=null&&I.subscribeToDataMessages)return I.subscribeToDataMessages(ae)},[I,ae]);const f=t.useMemo(()=>I?{connectionState:I.connectionState,agentState:I.agentState,transcript:I.transcript,videoElement:I.videoElement,audioElement:I.audioElement,canResume:I.canResume,error:I.error,agentConfig:null,connect:async()=>{await I.onConnect()},disconnect:()=>I.onDisconnect(),getRoom:A.getRoom,isControlled:!0}:{connectionState:A.connectionState,agentState:A.agentState,transcript:A.transcript,videoElement:A.videoElement,audioElement:A.audioElement,canResume:A.canResume,error:A.error,agentConfig:A.agentConfig,connect:A.connect,disconnect:A.disconnect,getRoom:A.getRoom,isControlled:!1},[I,A]),de=t.useRef(null);t.useEffect(()=>{const g=f.videoElement,w=de.current;if(!(!g||!w))return w.appendChild(g),()=>{g.parentNode===w&&w.removeChild(g)}},[f.videoElement]),t.useEffect(()=>{const g=f.audioElement;if(!g)return;ee.attach(g);const w=g.play();return w&&typeof w.catch=="function"&&w.catch(X=>{(X==null?void 0:X.name)==="NotAllowedError"&&F(!0)}),()=>{ee.detach()}},[f.audioElement]),t.useEffect(()=>{if(f.isControlled||f.connectionState!=="connected")return;const g=f.getRoom();if(g)return P.setupMic(g).catch(()=>{}),V.attachRoom(g),B.attachRoom(g),W.refresh(),()=>{P.teardownMic(),V.teardown(),B.teardown()}},[f.isControlled,f.connectionState]),t.useEffect(()=>{const g=f.audioElement;g&&(g.muted=q)},[f.audioElement,q]);const _e=t.useCallback(g=>{const w=f.getRoom();if(w)try{const X=new TextEncoder().encode(JSON.stringify({type:"user_message",text:g}));w.localParticipant.publishData(X,{reliable:!0})}catch{}},[f]),pe=t.useCallback(()=>{le(g=>!g)},[]);t.useEffect(()=>{z==null||z(f.connectionState),f.connectionState==="connected"?E==null||E():f.connectionState==="disconnected"&&(G==null||G())},[f.connectionState,E,G,z]),t.useEffect(()=>{Q==null||Q(f.transcript)},[f.transcript,Q]),t.useEffect(()=>{T==null||T(f.agentState)},[f.agentState,T]);const h=t.useRef(!1);t.useEffect(()=>{f.isControlled||!d||h.current||f.connectionState==="idle"&&(h.current=!0,f.connect())},[d,f.connectionState,f]);const U=t.useCallback(g=>{const w=b==null?void 0:b.find(X=>X.id===g);w&&(K(!1),g!==Y&&(ce(!0),f.disconnect(),ie||ye(g),N==null||N(w)))},[b,Y,f,ie,N]);t.useEffect(()=>{oe&&f.connectionState==="connected"&&ce(!1)},[f.connectionState,oe]),t.useEffect(()=>{if(!ne)return;const g=w=>{w.key==="Escape"&&K(!1)};return window.addEventListener("keydown",g),()=>window.removeEventListener("keydown",g)},[ne]);const Xe=!!R||!!(D!=null&&D.avatarImageUrl)||f.isControlled,ke=qe(he,a,Xe),je=(D==null?void 0:D.name)??L??((Se=f.agentConfig)==null?void 0:Se.name)??((Ee=ke.info)==null?void 0:Ee.name)??"Live Layer",Ce=(D==null?void 0:D.avatarImageUrl)??R??((Ne=f.agentConfig)==null?void 0:Ne.avatarImageUrl)??((Me=ke.info)==null?void 0:Me.avatarImageUrl)??null,Qe=C??((Re=f.agentConfig)==null?void 0:Re.idleLoopUrl)??((Le=ke.info)==null?void 0:Le.idleLoopUrl)??null,Ze=M??null,et=t.useCallback(()=>O("expanded"),[O]),tt=t.useCallback(()=>O("minimized"),[O]),we=t.useCallback(()=>{f.disconnect(),O("hidden")},[f,O]),nt=t.useCallback(()=>{const g=f.audioElement;g&&g.play().then(()=>F(!1)).catch(()=>{})},[f.audioElement]),rt=t.useCallback(()=>{F(!1),f.connect()},[f]),ue={...ve,zIndex:fe};S.primaryColor&&(ue["--ll-color-primary"]=S.primaryColor),S.accentColor&&(ue["--ll-color-accent"]=S.accentColor),S.backgroundColor&&(ue["--ll-color-bg"]=S.backgroundColor),S.textColor&&(ue["--ll-color-fg"]=S.textColor);const st=["ll-widget",`ll-widget--${H}`,`ll-widget--${J?"mobile":"desktop"}`,ge].filter(Boolean).join(" ");return e.jsxs("div",{className:st,style:ue,"data-display-mode":H,"data-position":p,children:[H==="hidden"&&e.jsx(vt,{position:p,isMobile:J,isSpeaking:f.agentState==="speaking",onExpand:()=>O("expanded"),label:`Open ${je} widget`}),H==="minimized"&&e.jsx(yt,{position:p,isMobile:J,agentName:je,avatarImageUrl:Ce,agentState:f.agentState,isMuted:P.isMuted,audioLevel:ee,onExpand:et,onToggleMute:P.toggleMute,onClose:we}),H==="expanded"&&e.jsx(kt,{position:p,isMobile:J,agentName:je,avatarImageUrl:Ce,idleLoopUrl:Qe,greeting:Ze,branding:S,teamMembers:b,currentTeamMemberId:Y,isSwitchingTeamMember:oe,teamSwitcherOpen:ne,onToggleTeamSwitcher:()=>K(g=>!g),onSelectTeamMember:U,connectionState:f.connectionState,agentState:f.agentState,transcript:f.transcript,isMuted:P.isMuted,micDevices:W.mics,isCameraEnabled:V.isEnabled,cameraPreviewEl:V.previewEl,cameraDevices:W.cameras,activeCameraId:V.activeDeviceId,isScreenShareEnabled:B.isEnabled,screenPreviewEl:B.previewEl,isSpeakerMuted:q,allowCamera:y,allowScreenShare:_,allowTyping:v,languageMenuOpen:re,onToggleLanguageMenu:()=>se(g=>!g),needsUserGesture:te,canResume:f.canResume,micError:P.micError,error:f.error,avatarVideoContainerRef:de,onConnect:()=>void f.connect(),onDisconnect:()=>f.disconnect(),onRetry:rt,onResumeAudio:nt,onToggleMute:P.toggleMute,onToggleCamera:()=>void V.toggle(),onSwitchCameraDevice:g=>void V.switchDevice(g),onToggleScreenShare:()=>void B.toggle(),onToggleSpeaker:pe,onSendMessage:_e,onMinimize:tt,onClose:we,onClearMicError:P.clearError})]})}function Rt(n){return e.jsx(Ue,{children:e.jsx(Mt,{...n})})}const Lt=({agentId:n,baseUrl:r,apiKey:l,mode:a,onAgentEvent:s,className:c,style:d})=>{const m=t.useRef(null),u=t.useRef(null),x=t.useRef(s);x.current=s;const p=t.useCallback(i=>{var k;const o=i.detail;(k=x.current)==null||k.call(x,o)},[]);return t.useEffect(()=>{const i=m.current;if(!i)return;const o=document.createElement("livelayer-widget");return o.setAttribute("agent-id",n),r&&o.setAttribute("base-url",r),l&&o.setAttribute("api-key",l),a&&o.setAttribute("mode",a),o.addEventListener("agent-event",p),i.appendChild(o),u.current=o,()=>{o.removeEventListener("agent-event",p),i.removeChild(o),u.current=null}},[n]),t.useEffect(()=>{u.current&&(a?u.current.setAttribute("mode",a):u.current.removeAttribute("mode"))},[a]),e.jsx("div",{ref:m,className:c,style:d})};function It(){const[n,r]=t.useState([]),l=t.useCallback(s=>{r(c=>{const d=c.findIndex(m=>m.id===s.id);if(d>=0){const m=c.slice();return m[d]=s,m}return[...c,s]})},[]),a=t.useCallback(()=>r([]),[]);return{entries:n,pushSegment:l,clear:a,latest:n.length>0?n[n.length-1]:null}}exports.AvatarWidget=Rt;exports.ErrorBoundary=Ue;exports.LiveLayerWidget=Lt;exports.useAgentInfo=qe;exports.useAudioLevel=Oe;exports.useCameraState=We;exports.useDisplayMode=Ge;exports.useDisplayModePersistence=Ye;exports.useIsMobile=He;exports.useLiveKitSession=$e;exports.useMediaDevices=Ke;exports.useMicrophoneState=Ve;exports.useScreenShareState=Fe;exports.useTranscript=It;
|
|
1
|
+
"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),t=require("react"),lt=require("@livelayer/sdk"),xe=require("livekit-client");class Ue extends t.Component{constructor(){super(...arguments),this.state={hasError:!1,error:null},this.reset=()=>{this.setState({hasError:!1,error:null})}}static getDerivedStateFromError(r){return{hasError:!0,error:r}}componentDidCatch(r,l){var a,s;(s=(a=this.props).onError)==null||s.call(a,r,l)}render(){var r;return this.state.hasError?this.props.fallback?this.props.fallback:e.jsxs("div",{className:"ll-error-boundary",role:"alert",children:[e.jsx("p",{className:"ll-error-boundary__title",children:"Widget crashed"}),e.jsx("p",{className:"ll-error-boundary__message",children:((r=this.state.error)==null?void 0:r.message)||"Something went wrong."}),e.jsx("button",{type:"button",className:"ll-error-boundary__retry",onClick:this.reset,children:"Reload widget"})]}):this.props.children}}function $e(n){const[r,l]=t.useState("idle"),[a,s]=t.useState("idle"),[c,d]=t.useState([]),[m,u]=t.useState(null),[x,p]=t.useState(null),[i,o]=t.useState(null),[k,b]=t.useState(!1),[j,N]=t.useState(null),C=t.useRef(null),M=t.useRef(n.onDataMessage);M.current=n.onDataMessage,t.useEffect(()=>{const y={onConnectionStateChange:v=>{l(v),v==="connected"&&N(null)},onAgentStateChange:s,onTranscript:v=>d([...v]),onAgentConfig:u,onAudioTrack:v=>o(v),onVideoTrack:v=>p(v),onVideoTrackRemoved:()=>p(null),onError:v=>N(v),onDataMessage:v=>{var E;(E=M.current)==null||E.call(M,v)},onResumabilityChange:b},_=new lt.LiveKitSession({agentId:n.agentId,baseUrl:n.baseUrl,apiKey:n.apiKey,sessionEndpoint:n.sessionEndpoint,sessionBody:n.sessionBody},y);return C.current=_,l("idle"),s("idle"),d([]),u(null),p(null),o(null),b(!1),N(null),()=>{var v;(v=_.destroy)==null||v.call(_),C.current=null}},[n.agentId,n.baseUrl,n.apiKey,n.sessionEndpoint,JSON.stringify(n.sessionBody??{})]);const L=t.useCallback(async()=>{const y=C.current;if(y)try{await y.connect()}catch(_){throw N(_ instanceof Error?_.message:String(_)),_}},[]),R=t.useCallback(()=>{const y=C.current;y&&y.disconnect()},[]),S=t.useCallback(()=>{var y;return((y=C.current)==null?void 0:y.getRoom())??null},[]);return{connectionState:r,agentState:a,transcript:c,agentConfig:m,videoElement:x,audioElement:i,canResume:k,error:j,connect:L,disconnect:R,getRoom:S,session:C.current}}function Oe(){const n=t.useRef(null),r=t.useRef(null),l=t.useRef(null),a=t.useRef(null),s=t.useRef(new Set),c=t.useRef(null),d=t.useCallback(()=>{const i=r.current;if(!i){a.current=null;return}(!c.current||c.current.length!==i.frequencyBinCount)&&(c.current=new Uint8Array(new ArrayBuffer(i.frequencyBinCount)));const o=c.current;i.getByteFrequencyData(o);let k=0;for(let j=0;j<o.length;j++)k+=o[j];const b=k/o.length/255;for(const j of s.current)try{j(b)}catch(N){console.error("[useAudioLevel] subscriber threw:",N)}a.current=requestAnimationFrame(d)},[]),m=t.useCallback(()=>{if(n.current||typeof window>"u"||typeof AudioContext>"u")return;const i=new AudioContext,o=i.createAnalyser();o.fftSize=64,o.connect(i.destination),n.current=i,r.current=o},[]),u=t.useCallback(i=>{if(m(),!(!n.current||!r.current)){if(l.current){try{l.current.disconnect()}catch{}l.current=null}try{const o=n.current.createMediaElementSource(i);o.connect(r.current),l.current=o}catch(o){console.warn("[useAudioLevel] createMediaElementSource failed:",o);return}a.current===null&&(a.current=requestAnimationFrame(d))}},[m,d]),x=t.useCallback(()=>{if(a.current!==null&&(cancelAnimationFrame(a.current),a.current=null),l.current){try{l.current.disconnect()}catch{}l.current=null}},[]),p=t.useCallback(i=>(s.current.add(i),()=>{s.current.delete(i)}),[]);return t.useEffect(()=>()=>{if(x(),r.current){try{r.current.disconnect()}catch{}r.current=null}if(n.current){try{n.current.close()}catch{}n.current=null}s.current.clear(),c.current=null},[x]),{attach:u,detach:x,subscribe:p}}function Ve(){const[n,r]=t.useState(!1),[l,a]=t.useState(null),s=t.useRef(null),c=t.useRef(null),d=t.useCallback(async p=>{if(s.current&&c.current){try{await c.current.localParticipant.unpublishTrack(s.current)}catch{}s.current.stop(),s.current=null}c.current=p,a(null);try{const i=await xe.createLocalAudioTrack({echoCancellation:!0,noiseSuppression:!0});await p.localParticipant.publishTrack(i),s.current=i,r(i.isMuted)}catch(i){const o=i instanceof Error&&i.name==="NotAllowedError"?"Enable your microphone to talk with the agent.":"Microphone unavailable. Check browser permissions and try again.";throw a(o),i}},[]),m=t.useCallback(()=>{const p=s.current;p&&(p.isMuted?(p.unmute(),r(!1)):(p.mute(),r(!0)))},[]),u=t.useCallback(()=>{const p=s.current,i=c.current;if(p&&i){try{i.localParticipant.unpublishTrack(p)}catch{}p.stop()}s.current=null,c.current=null,r(!1)},[]),x=t.useCallback(()=>a(null),[]);return{isMuted:n,micError:l,toggleMute:m,setupMic:d,teardownMic:u,clearError:x}}const at={resolution:{width:640,height:480,frameRate:24}};function We(){const[n,r]=t.useState(!1),[l,a]=t.useState(null),[s,c]=t.useState(null),[d,m]=t.useState(""),u=t.useRef(null),x=t.useRef(null),p=t.useCallback(C=>{u.current=C},[]),i=t.useCallback(()=>{const C=u.current,M=x.current;if(M&&C){const L=C.localParticipant.getTrackPublication(xe.Track.Source.Camera);if(L!=null&&L.track){try{C.localParticipant.unpublishTrack(L.track)}catch{}L.track.stop()}else M.stop()}x.current=null,c(null),r(!1)},[]),o=t.useCallback(async C=>{const M=u.current;if(M){a(null);try{const L={...at};C&&(L.deviceId=C);const R=await xe.createLocalVideoTrack(L);await M.localParticipant.publishTrack(R),x.current=R;const S=R.attach();c(S),r(!0),C&&m(C);try{M.localParticipant.publishData(new TextEncoder().encode(JSON.stringify({type:"user_camera_on"})),{reliable:!0})}catch{}}catch(L){const R=L instanceof Error&&L.name==="NotAllowedError"?"Enable your camera in the browser to share video.":"Camera unavailable. Check permissions and try again.";a(R)}}},[]),k=t.useCallback(async()=>{n?i():await o(d||void 0)},[n,d,i,o]),b=t.useCallback(async C=>{i(),await o(C)},[i,o]),j=t.useCallback(()=>{i(),u.current=null,a(null),m("")},[i]),N=t.useCallback(()=>a(null),[]);return t.useEffect(()=>()=>{x.current&&x.current.stop()},[]),{isEnabled:n,error:l,previewEl:s,activeDeviceId:d,toggle:k,switchDevice:b,attachRoom:p,teardown:j,clearError:N}}function Fe(){const[n,r]=t.useState(!1),[l,a]=t.useState(null),[s,c]=t.useState(null),d=t.useRef(null),m=t.useCallback(o=>{d.current=o},[]),u=t.useCallback(()=>c(null),[]),x=t.useCallback(async()=>{const o=d.current;if(o){if(n){try{await o.localParticipant.setScreenShareEnabled(!1)}catch{}u(),r(!1);return}a(null);try{await o.localParticipant.setScreenShareEnabled(!0);let k=0;const b=()=>{const j=o.localParticipant.getTrackPublication(xe.Track.Source.ScreenShare);if(j!=null&&j.track){const N=j.track.attach();c(N),r(!0);try{o.localParticipant.publishData(new TextEncoder().encode(JSON.stringify({type:"user_screen_share_on"})),{reliable:!0})}catch{}return}k++<10?setTimeout(b,100):r(!0)};b()}catch(k){const b=k instanceof Error?k.name:"";b!=="NotAllowedError"&&b!=="AbortError"&&a("Screen share unavailable. Try again."),r(!1)}}},[n,u]),p=t.useCallback(()=>{const o=d.current;if(o&&n)try{o.localParticipant.setScreenShareEnabled(!1)}catch{}u(),r(!1),a(null),d.current=null},[n,u]),i=t.useCallback(()=>a(null),[]);return{isEnabled:n,error:l,previewEl:s,toggle:x,attachRoom:m,teardown:p,clearError:i}}function Ke(){const[n,r]=t.useState([]),[l,a]=t.useState([]),s=t.useCallback(async()=>{if(!(typeof navigator>"u"||!navigator.mediaDevices))try{const c=await navigator.mediaDevices.enumerateDevices();r(c.filter(d=>d.kind==="audioinput")),a(c.filter(d=>d.kind==="videoinput"))}catch{}},[]);return t.useEffect(()=>{if(s(),typeof navigator>"u"||!navigator.mediaDevices)return;const c=()=>void s();return navigator.mediaDevices.addEventListener("devicechange",c),()=>navigator.mediaDevices.removeEventListener("devicechange",c)},[s]),{mics:n,cameras:l,refresh:s}}function qe(n,r,l=!1){const[a,s]=t.useState(null),[c,d]=t.useState(null),[m,u]=t.useState(!l&&!!n);return t.useEffect(()=>{if(l||!n){u(!1);return}const x=new AbortController,p=r||"https://app.livelayer.studio";return u(!0),d(null),fetch(`${p}/api/widget/agent/${encodeURIComponent(n)}`,{signal:x.signal}).then(async i=>{if(!i.ok){const o=await i.json().catch(()=>({}));throw new Error(o.error||`HTTP ${i.status}`)}return i.json()}).then(i=>{x.signal.aborted||(s(i),u(!1))}).catch(i=>{x.signal.aborted||(d(i instanceof Error?i.message:"Agent lookup failed"),u(!1))}),()=>x.abort()},[n,r,l]),{info:a,error:c,loading:m}}function it(n){if(typeof window>"u")return null;try{return window.localStorage.getItem(n)}catch{return null}}function ot(n,r){if(!(typeof window>"u"))try{window.localStorage.setItem(n,r)}catch{}}function Ge({value:n,defaultValue:r="expanded",onChange:l}={}){const a=n!==void 0,[s,c]=t.useState(r),d=a?n:s,m=t.useCallback(u=>{u!==d&&(a||c(u),l==null||l(u))},[d,a,l]);return[d,m]}const ct=["hidden","minimized","expanded"];function dt(n){return n&&ct.includes(n)?n:null}function Ye({value:n,defaultValue:r="expanded",onChange:l,persistKey:a="ll-widget",disablePersistence:s=!1}={}){const c=`${a}:display-mode`,d=t.useRef(!1),[m,u]=Ge({value:n,defaultValue:r,onChange:x=>{n===void 0&&!s&&ot(c,x),l==null||l(x)}});return t.useEffect(()=>{if(d.current||(d.current=!0,s||n!==void 0))return;const x=dt(it(c));x&&x!==m&&u(x)},[]),[m,u]}const ut=640;function He(n=ut){const[r,l]=t.useState(!1);return t.useEffect(()=>{if(n===!1){l(!1);return}if(typeof window>"u"||typeof window.matchMedia>"u")return;const a=`(max-width: ${n-1}px)`,s=window.matchMedia(a),c=()=>l(s.matches);return c(),typeof s.addEventListener=="function"?(s.addEventListener("change",c),()=>s.removeEventListener("change",c)):(s.addListener(c),()=>{s.removeListener(c)})},[n]),r}const Ie=({muted:n=!1,className:r})=>n?e.jsxs("svg",{className:r,fill:"none",viewBox:"0 0 24 24",stroke:"currentColor",strokeWidth:2,"aria-hidden":"true",children:[e.jsx("path",{strokeLinecap:"round",strokeLinejoin:"round",d:"M5.586 15H4a1 1 0 01-1-1v-4a1 1 0 011-1h1.586l4.707-4.707C10.923 3.663 12 4.109 12 5v14c0 .891-1.077 1.337-1.707.707L5.586 15z"}),e.jsx("path",{strokeLinecap:"round",strokeLinejoin:"round",d:"M17 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2"})]}):e.jsx("svg",{className:r,fill:"none",viewBox:"0 0 24 24",stroke:"currentColor",strokeWidth:2,"aria-hidden":"true",children:e.jsx("path",{strokeLinecap:"round",strokeLinejoin:"round",d:"M19 11a7 7 0 01-7 7m0 0a7 7 0 01-7-7m7 7v4m0 0H8m4 0h4M12 1a3 3 0 00-3 3v4a3 3 0 006 0V4a3 3 0 00-3-3z"})}),Ae=({className:n})=>e.jsx("svg",{className:n,fill:"none",viewBox:"0 0 24 24",stroke:"currentColor",strokeWidth:2,"aria-hidden":"true",children:e.jsx("path",{strokeLinecap:"round",strokeLinejoin:"round",d:"M4 8V4m0 0h4M4 4l5 5m11-1V4m0 0h-4m4 0l-5 5M4 16v4m0 0h4m-4 0l5-5m11 5l-5-5m5 5v-4m0 4h-4"})}),ft=({className:n})=>e.jsx("svg",{className:n,fill:"none",viewBox:"0 0 24 24",stroke:"currentColor",strokeWidth:2,"aria-hidden":"true",children:e.jsx("path",{strokeLinecap:"round",strokeLinejoin:"round",d:"M6 18L18 6M6 6l12 12"})}),ht={left:180,right:0,up:-90,down:90},pt=({direction:n="right",className:r})=>e.jsx("svg",{className:r,fill:"none",viewBox:"0 0 24 24",stroke:"currentColor",strokeWidth:2,style:{transform:`rotate(${ht[n]}deg)`},"aria-hidden":"true",children:e.jsx("path",{strokeLinecap:"round",strokeLinejoin:"round",d:"M9 6l6 6-6 6"})});function mt(n){return n==="top-left"||n==="bottom-left"?"left":"right"}const Je="ll-hidden-tab-center-y",xt=5,De=16;function gt(){if(typeof window>"u")return null;try{const n=window.localStorage.getItem(Je);if(!n)return null;const r=Number.parseFloat(n);return Number.isFinite(r)?r:null}catch{return null}}function Te(n){if(!(typeof window>"u"))try{window.localStorage.setItem(Je,String(n))}catch{}}const vt=({position:n,isMobile:r,isSpeaking:l,onExpand:a,label:s="Open widget"})=>{const c=mt(n),d=c==="right"?"left":"right",m=r?80:72,[u,x]=t.useState(null),[p,i]=t.useState(!1),o=t.useRef(null),k=t.useRef(!1),b=t.useCallback(y=>{if(typeof window>"u")return y;const _=m/2,v=De+_,E=window.innerHeight-De-_;return E<v?Math.max(v,y):Math.max(v,Math.min(E,y))},[m]);t.useEffect(()=>{const y=gt();x(b(y??window.innerHeight/2));const _=()=>{x(v=>v===null?null:b(v))};return window.addEventListener("resize",_),()=>window.removeEventListener("resize",_)},[b]);const j=t.useCallback(y=>{if(!(y.pointerType==="mouse"&&y.button!==0)&&u!==null){try{y.currentTarget.setPointerCapture(y.pointerId)}catch{}o.current={startClientY:y.clientY,startCenterY:u,moved:!1}}},[u]),N=t.useCallback(y=>{const _=o.current;if(!_)return;const v=y.clientY-_.startClientY;!_.moved&&Math.abs(v)>xt&&(_.moved=!0,i(!0)),_.moved&&x(b(_.startCenterY+v))},[b]),C=t.useCallback(y=>{const _=o.current;if(_){try{y.currentTarget.releasePointerCapture(y.pointerId)}catch{}o.current=null,_.moved&&(i(!1),k.current=!0,x(v=>(v!==null&&Te(v),v)))}},[]),M=t.useCallback(()=>{if(k.current){k.current=!1;return}a()},[a]),L=t.useCallback(y=>{if(y.key==="ArrowUp"||y.key==="ArrowDown"){y.preventDefault();const _=y.key==="ArrowUp"?-8:8;x(v=>{if(v===null)return v;const E=b(v+_);return Te(E),E})}},[b]),R=["ll-hidden",`ll-hidden--${c}`,r?"ll-hidden--mobile":"ll-hidden--desktop",l?"ll-hidden--speaking":null,p?"is-dragging":null].filter(Boolean).join(" "),S=u===null?void 0:{top:`${u-m/2}px`,transform:"none"};return e.jsx("button",{type:"button",className:R,onPointerDown:j,onPointerMove:N,onPointerUp:C,onPointerCancel:C,onClick:M,onKeyDown:L,"aria-label":s,"data-position":n,style:S,children:e.jsx(pt,{direction:d,className:"ll-hidden__chevron"})})},bt=({audioLevel:n,bars:r=20,maxHeight:l=20,minHeight:a=4,className:s,barClassName:c})=>{const d=t.useRef(null),m=t.useRef([]),u=t.useMemo(()=>{const p=(Math.sqrt(5)-1)/2;return Array.from({length:r},(i,o)=>.5+o*p%1*.5)},[r]);t.useEffect(()=>n.subscribe(i=>{for(let o=0;o<r;o++){const k=m.current[o];if(!k)continue;const b=Math.max(a,i*l*u[o]);k.style.height=`${b}px`}}),[n,r,l,a,u]);const x=["ll-waveform",s].filter(Boolean).join(" ");return e.jsx("div",{ref:d,className:x,"aria-hidden":"true",children:Array.from({length:r},(p,i)=>e.jsx("div",{ref:o=>{m.current[i]=o},className:["ll-waveform__bar",c].filter(Boolean).join(" "),style:{height:`${a}px`}},i))})},yt=({position:n,isMobile:r,agentName:l,avatarImageUrl:a,agentState:s,isMuted:c,audioLevel:d,onExpand:m,onToggleMute:u,onClose:x})=>r?e.jsx("div",{className:"ll-minimized ll-minimized--mobile",role:"region","aria-label":`${l} widget`,children:e.jsxs("button",{type:"button",className:"ll-minimized__surface",onClick:m,"aria-label":`Expand ${l} widget`,children:[a?e.jsx("img",{src:a,alt:l,className:"ll-minimized__avatar"}):e.jsx("div",{className:"ll-minimized__avatar ll-minimized__avatar--placeholder"}),e.jsx(bt,{audioLevel:d,bars:16,maxHeight:18,className:"ll-minimized__waveform"}),e.jsx("span",{className:"ll-minimized__name",children:l}),e.jsxs("div",{className:"ll-minimized__controls",children:[e.jsx("span",{className:"ll-minimized__btn",role:"button",tabIndex:0,onClick:p=>{p.stopPropagation(),u()},onKeyDown:p=>{(p.key==="Enter"||p.key===" ")&&(p.stopPropagation(),p.preventDefault(),u())},"aria-label":c?"Unmute microphone":"Mute microphone",children:e.jsx(Ie,{muted:c,className:"ll-minimized__icon"})}),e.jsx(Ae,{className:"ll-minimized__icon ll-minimized__icon--expand"})]})]})}):e.jsx("div",{className:"ll-minimized ll-minimized--desktop","data-position":n,role:"region","aria-label":`${l} widget`,children:e.jsxs("div",{className:"ll-minimized__surface",children:[a?e.jsx("img",{src:a,alt:l,className:"ll-minimized__avatar"}):e.jsx("div",{className:"ll-minimized__avatar ll-minimized__avatar--placeholder"}),e.jsxs("div",{className:"ll-minimized__meta",children:[e.jsx("span",{className:"ll-minimized__name",children:l}),e.jsx("span",{className:"ll-minimized__state",children:s==="speaking"?"Speaking":s==="thinking"?"Thinking":"Listening"})]}),e.jsxs("div",{className:"ll-minimized__controls",children:[e.jsx("button",{type:"button",className:"ll-minimized__btn",onClick:u,"aria-label":c?"Unmute microphone":"Mute microphone",children:e.jsx(Ie,{muted:c,className:"ll-minimized__icon"})}),e.jsx("button",{type:"button",className:"ll-minimized__btn",onClick:m,"aria-label":`Expand ${l} widget`,children:e.jsx(Ae,{className:"ll-minimized__icon"})}),e.jsx("button",{type:"button",className:"ll-minimized__btn ll-minimized__btn--close",onClick:x,"aria-label":"Close widget",children:e.jsx(ft,{className:"ll-minimized__icon"})})]})]})}),_t=({src:n,alt:r,preCannedPlaying:l=!1,className:a,style:s})=>{const[c,d]=t.useState(!1),m=t.useRef(n);if(t.useEffect(()=>{m.current!==n&&(m.current=n,d(!1))},[n]),!n)return null;const u={position:"absolute",inset:0,width:"100%",height:"100%",objectFit:"cover",objectPosition:"top",transition:"opacity 500ms ease, transform 500ms ease",transform:l?"scale(1.02)":"scale(1)",opacity:c?1:0,...s};return e.jsx("img",{src:n,alt:r,className:a,style:u,loading:"eager",fetchpriority:"high",onLoad:()=>d(!0)})},kt=({position:n,isMobile:r,agentName:l,avatarImageUrl:a,idleLoopUrl:s,greeting:c,branding:d,teamMembers:m,currentTeamMemberId:u,isSwitchingTeamMember:x,teamSwitcherOpen:p,onToggleTeamSwitcher:i,onSelectTeamMember:o,languageMenuOpen:k,onToggleLanguageMenu:b,connectionState:j,agentState:N,transcript:C,canResume:M,needsUserGesture:L,error:R,isMuted:S,micError:y,micDevices:_,isCameraEnabled:v,cameraPreviewEl:E,cameraDevices:G,activeCameraId:Q,isScreenShareEnabled:T,screenPreviewEl:z,isSpeakerMuted:$,allowCamera:Z,allowScreenShare:I,allowTyping:ge,avatarVideoContainerRef:ve,onConnect:fe,onDisconnect:ie,onRetry:be,onResumeAudio:ye,onToggleMute:Y,onToggleCamera:D,onSwitchCameraDevice:he,onToggleScreenShare:H,onToggleSpeaker:O,onSendMessage:J,onMinimize:ee,onClose:P,onClearMicError:V})=>{var pe;const B=C.length>0?C[C.length-1]:null,W=((m==null?void 0:m.length)??0)>1,te=j==="connecting"||j==="connected",F=j==="connected",oe=j==="idle"||j==="disconnected"||j==="error",ce=t.useRef(null),ne=t.useRef(null);t.useEffect(()=>{const h=ce.current;h&&(h.innerHTML="",E&&(E.style.width="100%",E.style.height="100%",E.style.objectFit="cover",E.style.transform="scaleX(-1)",h.appendChild(E)))},[E]),t.useEffect(()=>{const h=ne.current;h&&(h.innerHTML="",z&&(z.style.width="100%",z.style.height="100%",z.style.objectFit="contain",h.appendChild(z)))},[z]);const[K,re]=t.useState(!1),[se,q]=t.useState(!1);t.useEffect(()=>{if(!K&&!se&&!k&&!p)return;const h=()=>{re(!1),q(!1),k&&b(),p&&i()};return document.addEventListener("click",h),()=>document.removeEventListener("click",h)},[K,se,k,p,b,i]);const[le,ae]=t.useState(""),A=t.useCallback(h=>{h.preventDefault();const U=le.trim();U&&(J(U),ae(""))},[le,J]),f=d.productName||"Live Layer",de=F&&(B!=null&&B.text)?B.text:c||"",_e=["ll-expanded",r?"ll-expanded--mobile":"ll-expanded--desktop"].join(" ");return e.jsxs("div",{className:_e,"data-position":n,"data-state":F?"connected":te?"connecting":"idle",role:"dialog","aria-label":`${l} widget`,children:[e.jsxs("div",{className:"ll-expanded__bg",children:[a?e.jsx(_t,{src:a,alt:l,className:"ll-expanded__bg-img"}):e.jsx("div",{className:"ll-expanded__bg-fallback",children:e.jsx("span",{className:"ll-expanded__bg-initial",children:((pe=l==null?void 0:l.charAt(0))==null?void 0:pe.toUpperCase())||"A"})}),s&&!F&&e.jsx("video",{className:"ll-expanded__bg-idle",src:s,autoPlay:!0,loop:!0,muted:!0,playsInline:!0})]}),e.jsx("div",{ref:ve,className:"ll-expanded__video"}),j==="connecting"&&e.jsxs("div",{className:"ll-expanded__overlay ll-expanded__overlay--connecting",children:[e.jsx("div",{className:"ll-expanded__spinner"}),e.jsx("p",{className:"ll-expanded__overlay-text",children:x?"Switching...":"Connecting..."})]}),L&&F&&e.jsxs("button",{type:"button",className:"ll-expanded__overlay ll-expanded__overlay--gesture",onClick:ye,children:[e.jsx("svg",{width:"32",height:"32",viewBox:"0 0 24 24",fill:"currentColor","aria-hidden":!0,children:e.jsx("path",{d:"M3 9v6h4l5 5V4L7 9H3zm13.54.12a5 5 0 0 1 0 5.76l-1.41-1.41a3 3 0 0 0 0-2.94L16.54 9.12z"})}),e.jsx("p",{className:"ll-expanded__overlay-text",children:"Tap to enable audio"})]}),te?e.jsxs("div",{className:"ll-expanded__topbar",children:[e.jsxs("div",{className:"ll-expanded__topbar-left",children:[e.jsxs("div",{className:"ll-expanded__pill-wrap",children:[e.jsxs("button",{type:"button",className:"ll-hpill",onClick:h=>{W&&(h.stopPropagation(),i())},"aria-haspopup":W?"listbox":void 0,"aria-expanded":W?p:void 0,children:[e.jsx("span",{className:"ll-hpill__label",children:l}),W&&e.jsx(me,{})]}),W&&p&&e.jsx("div",{className:"ll-hmenu",onClick:h=>h.stopPropagation(),role:"listbox",children:m==null?void 0:m.map(h=>e.jsxs("button",{type:"button",className:`ll-hmenu__item ${h.id===u?"is-active":""}`,onClick:()=>o(h.id),role:"option","aria-selected":h.id===u,children:[h.avatarImageUrl&&e.jsx("img",{src:h.avatarImageUrl,alt:"",className:"ll-hmenu__avatar"}),e.jsx("span",{className:"ll-hmenu__name",children:h.name}),h.role&&e.jsx("span",{className:"ll-hmenu__role",children:h.role})]},h.id))})]}),e.jsxs("div",{className:"ll-expanded__pill-wrap",children:[e.jsxs("button",{type:"button",className:"ll-hpill ll-hpill--compact",onClick:h=>{h.stopPropagation(),b()},"aria-haspopup":"listbox","aria-expanded":k,"aria-label":"Language: English",title:"Language: English",children:[e.jsx("span",{className:"ll-hpill__label",children:"EN"}),e.jsx(me,{})]}),k&&e.jsx("div",{className:"ll-hmenu",onClick:h=>h.stopPropagation(),role:"listbox",children:e.jsx("button",{type:"button",className:"ll-hmenu__item is-active",role:"option","aria-selected":!0,children:e.jsx("span",{className:"ll-hmenu__name",children:"English"})})})]}),e.jsx("span",{className:`ll-expanded__state ll-expanded__state--${N}`,children:N})]}),e.jsxs("div",{className:"ll-expanded__header-actions",children:[e.jsx("button",{type:"button",className:"ll-hbtn",onClick:ee,"aria-label":"Minimize widget",title:"Minimize",children:e.jsx(Pe,{})}),e.jsx("button",{type:"button",className:"ll-hbtn ll-hbtn--danger",onClick:P,"aria-label":"End conversation",title:"End conversation",children:e.jsx(ze,{})})]})]}):e.jsxs("div",{className:"ll-expanded__header ll-expanded__header--idle",children:[e.jsx("span",{className:"ll-expanded__brand",children:f}),e.jsxs("div",{className:"ll-expanded__header-actions",children:[e.jsx("button",{type:"button",className:"ll-hbtn ll-hbtn--ghost",onClick:ee,"aria-label":"Minimize widget",children:e.jsx(Pe,{})}),e.jsx("button",{type:"button",className:"ll-hbtn ll-hbtn--danger",onClick:P,"aria-label":"Close widget",children:e.jsx(ze,{})})]})]}),oe&&e.jsxs("button",{type:"button",className:"ll-expanded__play",onClick:fe,"aria-label":M?"Resume session":"Start video call",children:[e.jsx("div",{className:"ll-expanded__play-circle",children:e.jsx("svg",{width:"22",height:"22",viewBox:"0 0 24 24",fill:"currentColor","aria-hidden":!0,children:e.jsx("polygon",{points:"6 3 20 12 6 21 6 3"})})}),e.jsx("span",{className:"ll-expanded__play-label",children:M?"Restart session":"Start video call"}),M&&e.jsx("span",{className:"ll-expanded__play-sublabel",children:"Pick up where you left off"})]}),e.jsxs("div",{className:`ll-expanded__pip ${te&&(v||T)?"is-visible":""}`,children:[e.jsx("div",{ref:ne,className:T?"ll-expanded__pip-host":"ll-expanded__pip-host is-hidden"}),e.jsx("div",{ref:ce,className:!T&&v?"ll-expanded__pip-host":"ll-expanded__pip-host is-hidden"})]}),te?e.jsxs("div",{className:"ll-expanded__bottom",children:[de&&e.jsx("div",{className:"ll-expanded__transcript",children:e.jsx("p",{className:"ll-expanded__transcript-text",children:de})}),e.jsxs("div",{className:"ll-toolbar",onClick:h=>h.stopPropagation(),children:[I&&e.jsx("button",{type:"button",className:`ll-tool ${T?"is-on":""}`,onClick:H,"aria-label":T?"Stop sharing screen":"Share screen",title:T?"Stop sharing":"Share screen",children:e.jsx(jt,{})}),Z&&e.jsxs("div",{className:"ll-tool-split",children:[e.jsx("button",{type:"button",className:`ll-tool ll-tool--left ${v?"is-on":""}`,onClick:D,"aria-label":v?"Turn off camera":"Turn on camera",title:v?"Stop camera":"Start camera",children:e.jsx(Ct,{})}),e.jsx("button",{type:"button",className:`ll-tool ll-tool--right ${v?"is-on":""}`,onClick:h=>{h.stopPropagation(),q(U=>!U),re(!1)},"aria-label":"Camera devices","aria-haspopup":"listbox","aria-expanded":se,children:e.jsx(me,{})}),se&&G.length>0&&e.jsx(Be,{label:"Camera",devices:G,activeId:Q,onPick:h=>{q(!1),he(h)}})]}),e.jsxs("div",{className:"ll-tool-split",children:[e.jsx("button",{type:"button",className:`ll-tool ll-tool--left ${S?"is-muted":""}`,onClick:Y,"aria-label":S?"Unmute microphone":"Mute microphone",title:S?"Unmute":"Mute",children:e.jsx(wt,{muted:S})}),e.jsx("button",{type:"button",className:`ll-tool ll-tool--right ${S?"is-muted":""}`,onClick:h=>{h.stopPropagation(),re(U=>!U),q(!1)},"aria-label":"Microphone devices","aria-haspopup":"listbox","aria-expanded":K,children:e.jsx(me,{})}),K&&_.length>0&&e.jsx(Be,{label:"Microphone",devices:_,activeId:"",onPick:()=>re(!1)})]}),e.jsx("button",{type:"button",className:`ll-tool ${$?"is-muted":""}`,onClick:O,"aria-label":$?"Unmute speaker":"Mute speaker",title:$?"Unmute speaker":"Mute speaker",children:e.jsx(St,{muted:$})})]}),ge&&e.jsxs("form",{className:"ll-message-input",onSubmit:A,children:[e.jsx("input",{type:"text",className:"ll-message-input__field",placeholder:"Message...",value:le,onChange:h=>ae(h.target.value),"aria-label":"Message the agent"}),le.trim()&&e.jsx("button",{type:"submit",className:"ll-message-input__send","aria-label":"Send message",children:e.jsx(Et,{})})]}),e.jsx("button",{type:"button",className:"ll-expanded__end",onClick:ie,children:"End conversation"})]}):c&&e.jsx("div",{className:"ll-expanded__bottom ll-expanded__bottom--idle",children:e.jsx("div",{className:"ll-expanded__transcript",children:e.jsx("p",{className:"ll-expanded__transcript-text",children:c})})}),(()=>{if(y&&j!=="error")return e.jsxs("div",{className:"ll-expanded__banner",role:"alert",children:[e.jsx("span",{children:y}),e.jsx("button",{type:"button",className:"ll-expanded__banner-x",onClick:V,"aria-label":"Dismiss",children:"×"})]});if(!R||j!=="error")return null;let h="Failed to connect",U="Try again";return R==="MIC_PERMISSION_DENIED"?h="Microphone blocked. Allow access to talk.":R==="MIC_NOT_FOUND"?h="No microphone found. Plug one in + retry.":R==="MIC_UNAVAILABLE"?h="Mic unavailable. Check other apps using it.":R==="AGENT_TIMEOUT"?h="Agent didn't pick up. Try again.":R==="CONNECT_FAILED"?h="Connection failed. Check your network.":R.length<80&&(h=R),e.jsxs("div",{className:"ll-expanded__banner ll-expanded__banner--error",role:"alert",children:[e.jsx("span",{children:h}),e.jsx("button",{type:"button",className:"ll-expanded__banner-retry",onClick:be,children:U})]})})()]})};function me(){return e.jsx("svg",{width:"12",height:"12",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round","aria-hidden":!0,children:e.jsx("polyline",{points:"6 9 12 15 18 9"})})}function ze(){return e.jsxs("svg",{width:"12",height:"12",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2.5",strokeLinecap:"round","aria-hidden":!0,children:[e.jsx("line",{x1:"18",y1:"6",x2:"6",y2:"18"}),e.jsx("line",{x1:"6",y1:"6",x2:"18",y2:"18"})]})}function Pe(){return e.jsx("svg",{width:"12",height:"12",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2.5",strokeLinecap:"round","aria-hidden":!0,children:e.jsx("line",{x1:"5",y1:"12",x2:"19",y2:"12"})})}function jt(){return e.jsxs("svg",{width:"16",height:"16",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round","aria-hidden":!0,children:[e.jsx("rect",{x:"2",y:"3",width:"20",height:"14",rx:"2"}),e.jsx("line",{x1:"8",y1:"21",x2:"16",y2:"21"}),e.jsx("line",{x1:"12",y1:"17",x2:"12",y2:"21"})]})}function Ct(){return e.jsxs("svg",{width:"16",height:"16",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round","aria-hidden":!0,children:[e.jsx("path",{d:"M23 7l-7 5 7 5V7z"}),e.jsx("rect",{x:"1",y:"5",width:"15",height:"14",rx:"2"})]})}function wt({muted:n}){return e.jsxs("svg",{width:"16",height:"16",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round","aria-hidden":!0,children:[e.jsx("path",{d:"M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z"}),e.jsx("path",{d:"M19 10v2a7 7 0 0 1-14 0v-2"}),e.jsx("line",{x1:"12",y1:"19",x2:"12",y2:"23"}),n&&e.jsx("line",{x1:"1",y1:"1",x2:"23",y2:"23"})]})}function St({muted:n}){return e.jsxs("svg",{width:"16",height:"16",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round","aria-hidden":!0,children:[e.jsx("polygon",{points:"11 5 6 9 2 9 2 15 6 15 11 19 11 5"}),n?e.jsx("line",{x1:"23",y1:"9",x2:"17",y2:"15"}):e.jsxs(e.Fragment,{children:[e.jsx("path",{d:"M19.07 4.93a10 10 0 0 1 0 14.14"}),e.jsx("path",{d:"M15.54 8.46a5 5 0 0 1 0 7.07"})]})]})}function Et(){return e.jsxs("svg",{width:"14",height:"14",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round","aria-hidden":!0,children:[e.jsx("line",{x1:"5",y1:"12",x2:"19",y2:"12"}),e.jsx("polyline",{points:"12 5 19 12 12 19"})]})}const Be=({label:n,devices:r,activeId:l,onPick:a})=>e.jsxs("div",{className:"ll-device-menu",onClick:s=>s.stopPropagation(),role:"listbox",children:[e.jsx("p",{className:"ll-device-menu__label",children:n}),r.map((s,c)=>{const d=l===s.deviceId;return e.jsxs("button",{type:"button",className:`ll-device-menu__item ${d?"is-active":""}`,onClick:()=>a(s.deviceId),role:"option","aria-selected":d,children:[d&&e.jsx("span",{className:"ll-device-menu__dot",children:"●"}),e.jsx("span",{className:"ll-device-menu__name",children:s.label||`${n} ${c+1}`})]},s.deviceId||c)})]}),Nt=new Set(["agent_state","avatar_stream_ready","avatar_active","avatar_idle","bot_ready","agent_error","idle_warning","idle_timeout"]);function Mt(n){var Se,Ee,Ne,Me,Le,Re;const{agentId:r,apiKey:l,baseUrl:a="https://app.livelayer.studio",sessionEndpoint:s,sessionBody:c,autoConnect:d=!1,displayMode:m,defaultDisplayMode:u="expanded",onDisplayModeChange:x,position:p="bottom-right",mobileBreakpoint:i=640,persistKey:o="ll-widget",disablePersistence:k=!1,teamMembers:b,currentTeamMemberId:j,onTeamMemberChange:N,idleLoopUrl:C,greeting:M,avatarImageUrl:L,agentName:R,branding:S={},allowCamera:y=!0,allowScreenShare:_=!0,allowTyping:v=!0,onConnect:E,onDisconnect:G,onTranscript:Q,onAgentState:T,onConnectionStateChange:z,onAgentEvent:$,onAgentCommand:Z,controlledSession:I,className:ge,style:ve,zIndex:fe=2147483647}=n,ie=j!==void 0,[be,ye]=t.useState(()=>{var g;return j??((g=b==null?void 0:b[0])==null?void 0:g.id)}),Y=ie?j:be,D=t.useMemo(()=>(b==null?void 0:b.find(g=>g.id===Y))??null,[b,Y]),he=(D==null?void 0:D.agentId)??r,[H,O]=Ye({value:m,defaultValue:u,onChange:x,persistKey:o,disablePersistence:k}),J=He(i),ee=Oe(),P=Ve(),V=We(),B=Fe(),W=Ke(),[te,F]=t.useState(!1),[oe,ce]=t.useState(!1),[ne,K]=t.useState(!1),[re,se]=t.useState(!1),[q,le]=t.useState(!1),ae=t.useCallback(g=>{const w=g;!w.type||typeof w.type!="string"||($==null||$({eventName:w.type,data:g}),Nt.has(w.type)||Z==null||Z(w))},[Z,$]),A=$e({agentId:I?"__controlled__":he,baseUrl:a,apiKey:l,sessionEndpoint:s,sessionBody:c,onDataMessage:I?void 0:ae});t.useEffect(()=>{if(I!=null&&I.subscribeToDataMessages)return I.subscribeToDataMessages(ae)},[I,ae]);const f=t.useMemo(()=>I?{connectionState:I.connectionState,agentState:I.agentState,transcript:I.transcript,videoElement:I.videoElement,audioElement:I.audioElement,canResume:I.canResume,error:I.error,agentConfig:null,connect:async()=>{await I.onConnect()},disconnect:()=>I.onDisconnect(),getRoom:A.getRoom,isControlled:!0}:{connectionState:A.connectionState,agentState:A.agentState,transcript:A.transcript,videoElement:A.videoElement,audioElement:A.audioElement,canResume:A.canResume,error:A.error,agentConfig:A.agentConfig,connect:A.connect,disconnect:A.disconnect,getRoom:A.getRoom,isControlled:!1},[I,A]),de=t.useRef(null);t.useEffect(()=>{const g=f.videoElement,w=de.current;if(!(!g||!w))return w.appendChild(g),()=>{g.parentNode===w&&w.removeChild(g)}},[f.videoElement]),t.useEffect(()=>{const g=f.audioElement;if(!g)return;ee.attach(g);const w=g.play();return w&&typeof w.catch=="function"&&w.catch(X=>{(X==null?void 0:X.name)==="NotAllowedError"&&F(!0)}),()=>{ee.detach()}},[f.audioElement]),t.useEffect(()=>{if(f.isControlled||f.connectionState!=="connected")return;const g=f.getRoom();if(g)return P.setupMic(g).catch(()=>{}),V.attachRoom(g),B.attachRoom(g),W.refresh(),()=>{P.teardownMic(),V.teardown(),B.teardown()}},[f.isControlled,f.connectionState]),t.useEffect(()=>{const g=f.audioElement;g&&(g.muted=q)},[f.audioElement,q]);const _e=t.useCallback(g=>{const w=f.getRoom();if(w)try{const X=new TextEncoder().encode(JSON.stringify({type:"user_message",text:g}));w.localParticipant.publishData(X,{reliable:!0})}catch{}},[f]),pe=t.useCallback(()=>{le(g=>!g)},[]);t.useEffect(()=>{z==null||z(f.connectionState),f.connectionState==="connected"?E==null||E():f.connectionState==="disconnected"&&(G==null||G())},[f.connectionState,E,G,z]),t.useEffect(()=>{Q==null||Q(f.transcript)},[f.transcript,Q]),t.useEffect(()=>{T==null||T(f.agentState)},[f.agentState,T]);const h=t.useRef(!1);t.useEffect(()=>{f.isControlled||!d||h.current||f.connectionState==="idle"&&(h.current=!0,f.connect())},[d,f.connectionState,f]);const U=t.useCallback(g=>{const w=b==null?void 0:b.find(X=>X.id===g);w&&(K(!1),g!==Y&&(ce(!0),f.disconnect(),ie||ye(g),N==null||N(w)))},[b,Y,f,ie,N]);t.useEffect(()=>{oe&&f.connectionState==="connected"&&ce(!1)},[f.connectionState,oe]),t.useEffect(()=>{if(!ne)return;const g=w=>{w.key==="Escape"&&K(!1)};return window.addEventListener("keydown",g),()=>window.removeEventListener("keydown",g)},[ne]);const Xe=!!L||!!(D!=null&&D.avatarImageUrl)||f.isControlled,ke=qe(he,a,Xe),je=(D==null?void 0:D.name)??R??((Se=f.agentConfig)==null?void 0:Se.name)??((Ee=ke.info)==null?void 0:Ee.name)??"Live Layer",Ce=(D==null?void 0:D.avatarImageUrl)??L??((Ne=f.agentConfig)==null?void 0:Ne.avatarImageUrl)??((Me=ke.info)==null?void 0:Me.avatarImageUrl)??null,Qe=C??((Le=f.agentConfig)==null?void 0:Le.idleLoopUrl)??((Re=ke.info)==null?void 0:Re.idleLoopUrl)??null,Ze=M??null,et=t.useCallback(()=>O("expanded"),[O]),tt=t.useCallback(()=>O("minimized"),[O]),we=t.useCallback(()=>{f.disconnect(),O("hidden")},[f,O]),nt=t.useCallback(()=>{const g=f.audioElement;g&&g.play().then(()=>F(!1)).catch(()=>{})},[f.audioElement]),rt=t.useCallback(()=>{F(!1),f.connect()},[f]),ue={...ve,zIndex:fe};S.primaryColor&&(ue["--ll-color-primary"]=S.primaryColor),S.accentColor&&(ue["--ll-color-accent"]=S.accentColor),S.backgroundColor&&(ue["--ll-color-bg"]=S.backgroundColor),S.textColor&&(ue["--ll-color-fg"]=S.textColor);const st=["ll-widget",`ll-widget--${H}`,`ll-widget--${J?"mobile":"desktop"}`,ge].filter(Boolean).join(" ");return e.jsxs("div",{className:st,style:ue,"data-display-mode":H,"data-position":p,children:[H==="hidden"&&e.jsx(vt,{position:p,isMobile:J,isSpeaking:f.agentState==="speaking",onExpand:()=>O("expanded"),label:`Open ${je} widget`}),H==="minimized"&&e.jsx(yt,{position:p,isMobile:J,agentName:je,avatarImageUrl:Ce,agentState:f.agentState,isMuted:P.isMuted,audioLevel:ee,onExpand:et,onToggleMute:P.toggleMute,onClose:we}),H==="expanded"&&e.jsx(kt,{position:p,isMobile:J,agentName:je,avatarImageUrl:Ce,idleLoopUrl:Qe,greeting:Ze,branding:S,teamMembers:b,currentTeamMemberId:Y,isSwitchingTeamMember:oe,teamSwitcherOpen:ne,onToggleTeamSwitcher:()=>K(g=>!g),onSelectTeamMember:U,connectionState:f.connectionState,agentState:f.agentState,transcript:f.transcript,isMuted:P.isMuted,micDevices:W.mics,isCameraEnabled:V.isEnabled,cameraPreviewEl:V.previewEl,cameraDevices:W.cameras,activeCameraId:V.activeDeviceId,isScreenShareEnabled:B.isEnabled,screenPreviewEl:B.previewEl,isSpeakerMuted:q,allowCamera:y,allowScreenShare:_,allowTyping:v,languageMenuOpen:re,onToggleLanguageMenu:()=>se(g=>!g),needsUserGesture:te,canResume:f.canResume,micError:P.micError,error:f.error,avatarVideoContainerRef:de,onConnect:()=>void f.connect(),onDisconnect:()=>f.disconnect(),onRetry:rt,onResumeAudio:nt,onToggleMute:P.toggleMute,onToggleCamera:()=>void V.toggle(),onSwitchCameraDevice:g=>void V.switchDevice(g),onToggleScreenShare:()=>void B.toggle(),onToggleSpeaker:pe,onSendMessage:_e,onMinimize:tt,onClose:we,onClearMicError:P.clearError})]})}function Lt(n){return e.jsx(Ue,{children:e.jsx(Mt,{...n})})}const Rt=({agentId:n,baseUrl:r,apiKey:l,mode:a,onAgentEvent:s,className:c,style:d})=>{const m=t.useRef(null),u=t.useRef(null),x=t.useRef(s);x.current=s;const p=t.useCallback(i=>{var k;const o=i.detail;(k=x.current)==null||k.call(x,o)},[]);return t.useEffect(()=>{const i=m.current;if(!i)return;const o=document.createElement("livelayer-widget");return o.setAttribute("agent-id",n),r&&o.setAttribute("base-url",r),l&&o.setAttribute("api-key",l),a&&o.setAttribute("mode",a),o.addEventListener("agent-event",p),i.appendChild(o),u.current=o,()=>{o.removeEventListener("agent-event",p),i.removeChild(o),u.current=null}},[n]),t.useEffect(()=>{u.current&&(a?u.current.setAttribute("mode",a):u.current.removeAttribute("mode"))},[a]),e.jsx("div",{ref:m,className:c,style:d})};function It(){const[n,r]=t.useState([]),l=t.useCallback(s=>{r(c=>{const d=c.findIndex(m=>m.id===s.id);if(d>=0){const m=c.slice();return m[d]=s,m}return[...c,s]})},[]),a=t.useCallback(()=>r([]),[]);return{entries:n,pushSegment:l,clear:a,latest:n.length>0?n[n.length-1]:null}}exports.AvatarWidget=Lt;exports.ErrorBoundary=Ue;exports.LiveLayerWidget=Rt;exports.useAgentInfo=qe;exports.useAudioLevel=Oe;exports.useCameraState=We;exports.useDisplayMode=Ge;exports.useDisplayModePersistence=Ye;exports.useIsMobile=He;exports.useLiveKitSession=$e;exports.useMediaDevices=Ke;exports.useMicrophoneState=Ve;exports.useScreenShareState=Fe;exports.useTranscript=It;
|
package/dist/index.mjs
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import { jsxs as _, jsx as e, Fragment as Ze } from "react/jsx-runtime";
|
|
3
|
-
import { Component as et, useState as k, useRef as
|
|
3
|
+
import { Component as et, useState as k, useRef as L, useEffect as S, useCallback as g, useMemo as Se } from "react";
|
|
4
4
|
import { LiveKitSession as tt } from "@livelayer/sdk";
|
|
5
5
|
import { createLocalAudioTrack as nt, Track as We, createLocalVideoTrack as rt } from "livekit-client";
|
|
6
6
|
class it extends et {
|
|
@@ -34,7 +34,7 @@ class it extends et {
|
|
|
34
34
|
}
|
|
35
35
|
}
|
|
36
36
|
function lt(t) {
|
|
37
|
-
const [n, i] = k("idle"), [l, r] = k("idle"), [s, c] = k([]), [m, d] = k(null), [f, p] = k(null), [o, a] = k(null), [C, b] = k(!1), [N, D] = k(null), E =
|
|
37
|
+
const [n, i] = k("idle"), [l, r] = k("idle"), [s, c] = k([]), [m, d] = k(null), [f, p] = k(null), [o, a] = k(null), [C, b] = k(!1), [N, D] = k(null), E = L(null), R = L(t.onDataMessage);
|
|
38
38
|
R.current = t.onDataMessage, S(() => {
|
|
39
39
|
const w = {
|
|
40
40
|
onConnectionStateChange: (y) => {
|
|
@@ -104,7 +104,7 @@ function lt(t) {
|
|
|
104
104
|
};
|
|
105
105
|
}
|
|
106
106
|
function ot() {
|
|
107
|
-
const t =
|
|
107
|
+
const t = L(null), n = L(null), i = L(null), l = L(null), r = L(/* @__PURE__ */ new Set()), s = L(null), c = g(() => {
|
|
108
108
|
const o = n.current;
|
|
109
109
|
if (!o) {
|
|
110
110
|
l.current = null;
|
|
@@ -180,7 +180,7 @@ function ot() {
|
|
|
180
180
|
}, [f]), { attach: d, detach: f, subscribe: p };
|
|
181
181
|
}
|
|
182
182
|
function at() {
|
|
183
|
-
const [t, n] = k(!1), [i, l] = k(null), r =
|
|
183
|
+
const [t, n] = k(!1), [i, l] = k(null), r = L(null), s = L(null), c = g(async (p) => {
|
|
184
184
|
if (r.current && s.current) {
|
|
185
185
|
try {
|
|
186
186
|
await s.current.localParticipant.unpublishTrack(r.current);
|
|
@@ -224,7 +224,7 @@ function at() {
|
|
|
224
224
|
}
|
|
225
225
|
const st = { resolution: { width: 640, height: 480, frameRate: 24 } };
|
|
226
226
|
function ct() {
|
|
227
|
-
const [t, n] = k(!1), [i, l] = k(null), [r, s] = k(null), [c, m] = k(""), d =
|
|
227
|
+
const [t, n] = k(!1), [i, l] = k(null), [r, s] = k(null), [c, m] = k(""), d = L(null), f = L(null), p = g((E) => {
|
|
228
228
|
d.current = E;
|
|
229
229
|
}, []), o = g(() => {
|
|
230
230
|
const E = d.current, R = f.current;
|
|
@@ -285,7 +285,7 @@ function ct() {
|
|
|
285
285
|
};
|
|
286
286
|
}
|
|
287
287
|
function dt() {
|
|
288
|
-
const [t, n] = k(!1), [i, l] = k(null), [r, s] = k(null), c =
|
|
288
|
+
const [t, n] = k(!1), [i, l] = k(null), [r, s] = k(null), c = L(null), m = g((a) => {
|
|
289
289
|
c.current = a;
|
|
290
290
|
}, []), d = g(() => s(null), []), f = g(async () => {
|
|
291
291
|
const a = c.current;
|
|
@@ -412,7 +412,7 @@ function yt({
|
|
|
412
412
|
persistKey: l = "ll-widget",
|
|
413
413
|
disablePersistence: r = !1
|
|
414
414
|
} = {}) {
|
|
415
|
-
const s = `${l}:display-mode`, c =
|
|
415
|
+
const s = `${l}:display-mode`, c = L(!1), [m, d] = ft({
|
|
416
416
|
value: t,
|
|
417
417
|
defaultValue: n,
|
|
418
418
|
onChange: (f) => {
|
|
@@ -563,7 +563,7 @@ const St = ({
|
|
|
563
563
|
onExpand: l,
|
|
564
564
|
label: r = "Open widget"
|
|
565
565
|
}) => {
|
|
566
|
-
const s = Ct(t), c = s === "right" ? "left" : "right", m = n ? 80 : 72, [d, f] = k(null), [p, o] = k(!1), a =
|
|
566
|
+
const s = Ct(t), c = s === "right" ? "left" : "right", m = n ? 80 : 72, [d, f] = k(null), [p, o] = k(!1), a = L(null), C = L(!1), b = g(
|
|
567
567
|
(w) => {
|
|
568
568
|
if (typeof window > "u") return w;
|
|
569
569
|
const x = m / 2, y = Ue + x, A = window.innerHeight - Ue - x;
|
|
@@ -657,7 +657,7 @@ const St = ({
|
|
|
657
657
|
children: /* @__PURE__ */ e(xt, { direction: c, className: "ll-hidden__chevron" })
|
|
658
658
|
}
|
|
659
659
|
);
|
|
660
|
-
},
|
|
660
|
+
}, Lt = ({
|
|
661
661
|
audioLevel: t,
|
|
662
662
|
bars: n = 20,
|
|
663
663
|
maxHeight: i = 20,
|
|
@@ -665,7 +665,7 @@ const St = ({
|
|
|
665
665
|
className: r,
|
|
666
666
|
barClassName: s
|
|
667
667
|
}) => {
|
|
668
|
-
const c =
|
|
668
|
+
const c = L(null), m = L([]), d = Se(() => {
|
|
669
669
|
const p = (Math.sqrt(5) - 1) / 2;
|
|
670
670
|
return Array.from({ length: n }, (o, a) => 0.5 + a * p % 1 * 0.5);
|
|
671
671
|
}, [n]);
|
|
@@ -689,7 +689,7 @@ const St = ({
|
|
|
689
689
|
},
|
|
690
690
|
o
|
|
691
691
|
)) });
|
|
692
|
-
},
|
|
692
|
+
}, Mt = ({
|
|
693
693
|
position: t,
|
|
694
694
|
isMobile: n,
|
|
695
695
|
agentName: i,
|
|
@@ -726,7 +726,7 @@ const St = ({
|
|
|
726
726
|
)
|
|
727
727
|
) : /* @__PURE__ */ e("div", { className: "ll-minimized__avatar ll-minimized__avatar--placeholder" }),
|
|
728
728
|
/* @__PURE__ */ e(
|
|
729
|
-
|
|
729
|
+
Lt,
|
|
730
730
|
{
|
|
731
731
|
audioLevel: c,
|
|
732
732
|
bars: 16,
|
|
@@ -822,7 +822,7 @@ const St = ({
|
|
|
822
822
|
className: l,
|
|
823
823
|
style: r
|
|
824
824
|
}) => {
|
|
825
|
-
const [s, c] = k(!1), m =
|
|
825
|
+
const [s, c] = k(!1), m = L(t);
|
|
826
826
|
if (S(() => {
|
|
827
827
|
m.current !== t && (m.current = t, c(!1));
|
|
828
828
|
}, [t]), !t) return null;
|
|
@@ -904,7 +904,7 @@ const St = ({
|
|
|
904
904
|
onClearMicError: K
|
|
905
905
|
}) => {
|
|
906
906
|
var ye;
|
|
907
|
-
const O = E.length > 0 ? E[E.length - 1] : null, Y = ((m == null ? void 0 : m.length) ?? 0) > 1, le = N === "connecting" || N === "connected", H = N === "connected", he = N === "idle" || N === "disconnected" || N === "error", pe =
|
|
907
|
+
const O = E.length > 0 ? E[E.length - 1] : null, Y = ((m == null ? void 0 : m.length) ?? 0) > 1, le = N === "connecting" || N === "connected", H = N === "connected", he = N === "idle" || N === "disconnected" || N === "error", pe = L(null), oe = L(null);
|
|
908
908
|
S(() => {
|
|
909
909
|
const h = pe.current;
|
|
910
910
|
h && (h.innerHTML = "", A && (A.style.width = "100%", A.style.height = "100%", A.style.objectFit = "cover", A.style.transform = "scaleX(-1)", h.appendChild(A)));
|
|
@@ -1041,14 +1041,16 @@ const St = ({
|
|
|
1041
1041
|
"button",
|
|
1042
1042
|
{
|
|
1043
1043
|
type: "button",
|
|
1044
|
-
className: "ll-hpill",
|
|
1044
|
+
className: "ll-hpill ll-hpill--compact",
|
|
1045
1045
|
onClick: (h) => {
|
|
1046
1046
|
h.stopPropagation(), b();
|
|
1047
1047
|
},
|
|
1048
1048
|
"aria-haspopup": "listbox",
|
|
1049
1049
|
"aria-expanded": C,
|
|
1050
|
+
"aria-label": "Language: English",
|
|
1051
|
+
title: "Language: English",
|
|
1050
1052
|
children: [
|
|
1051
|
-
/* @__PURE__ */ e("span", { className: "ll-hpill__label", children: "
|
|
1053
|
+
/* @__PURE__ */ e("span", { className: "ll-hpill__label", children: "EN" }),
|
|
1052
1054
|
/* @__PURE__ */ e(_e, {})
|
|
1053
1055
|
]
|
|
1054
1056
|
}
|
|
@@ -1475,8 +1477,8 @@ function Ut(t) {
|
|
|
1475
1477
|
disablePersistence: C
|
|
1476
1478
|
}), ee = bt(o), ie = ot(), V = at(), K = ct(), O = dt(), Y = ut(), [le, H] = k(!1), [he, pe] = k(!1), [oe, q] = k(!1), [ae, se] = k(!1), [J, ce] = k(!1), de = g(
|
|
1477
1479
|
(v) => {
|
|
1478
|
-
const
|
|
1479
|
-
!
|
|
1480
|
+
const M = v;
|
|
1481
|
+
!M.type || typeof M.type != "string" || (F == null || F({ eventName: M.type, data: v }), Bt.has(M.type) || re == null || re(M));
|
|
1480
1482
|
},
|
|
1481
1483
|
[re, F]
|
|
1482
1484
|
), B = lt({
|
|
@@ -1522,19 +1524,19 @@ function Ut(t) {
|
|
|
1522
1524
|
disconnect: B.disconnect,
|
|
1523
1525
|
getRoom: B.getRoom,
|
|
1524
1526
|
isControlled: !1
|
|
1525
|
-
}, [P, B]), me =
|
|
1527
|
+
}, [P, B]), me = L(null);
|
|
1526
1528
|
S(() => {
|
|
1527
|
-
const v = u.videoElement,
|
|
1528
|
-
if (!(!v || !
|
|
1529
|
-
return
|
|
1530
|
-
v.parentNode ===
|
|
1529
|
+
const v = u.videoElement, M = me.current;
|
|
1530
|
+
if (!(!v || !M))
|
|
1531
|
+
return M.appendChild(v), () => {
|
|
1532
|
+
v.parentNode === M && M.removeChild(v);
|
|
1531
1533
|
};
|
|
1532
1534
|
}, [u.videoElement]), S(() => {
|
|
1533
1535
|
const v = u.audioElement;
|
|
1534
1536
|
if (!v) return;
|
|
1535
1537
|
ie.attach(v);
|
|
1536
|
-
const
|
|
1537
|
-
return
|
|
1538
|
+
const M = v.play();
|
|
1539
|
+
return M && typeof M.catch == "function" && M.catch((te) => {
|
|
1538
1540
|
(te == null ? void 0 : te.name) === "NotAllowedError" && H(!0);
|
|
1539
1541
|
}), () => {
|
|
1540
1542
|
ie.detach();
|
|
@@ -1552,13 +1554,13 @@ function Ut(t) {
|
|
|
1552
1554
|
v && (v.muted = J);
|
|
1553
1555
|
}, [u.audioElement, J]);
|
|
1554
1556
|
const Ce = g((v) => {
|
|
1555
|
-
const
|
|
1556
|
-
if (
|
|
1557
|
+
const M = u.getRoom();
|
|
1558
|
+
if (M)
|
|
1557
1559
|
try {
|
|
1558
1560
|
const te = new TextEncoder().encode(
|
|
1559
1561
|
JSON.stringify({ type: "user_message", text: v })
|
|
1560
1562
|
);
|
|
1561
|
-
|
|
1563
|
+
M.localParticipant.publishData(te, { reliable: !0 });
|
|
1562
1564
|
} catch {
|
|
1563
1565
|
}
|
|
1564
1566
|
}, [u]), ye = g(() => {
|
|
@@ -1571,14 +1573,14 @@ function Ut(t) {
|
|
|
1571
1573
|
}, [u.transcript, ne]), S(() => {
|
|
1572
1574
|
$ == null || $(u.agentState);
|
|
1573
1575
|
}, [u.agentState, $]);
|
|
1574
|
-
const h =
|
|
1576
|
+
const h = L(!1);
|
|
1575
1577
|
S(() => {
|
|
1576
1578
|
u.isControlled || !c || h.current || u.connectionState === "idle" && (h.current = !0, u.connect());
|
|
1577
1579
|
}, [c, u.connectionState, u]);
|
|
1578
1580
|
const W = g(
|
|
1579
1581
|
(v) => {
|
|
1580
|
-
const
|
|
1581
|
-
|
|
1582
|
+
const M = b == null ? void 0 : b.find((te) => te.id === v);
|
|
1583
|
+
M && (q(!1), v !== Q && (pe(!0), u.disconnect(), ue || xe(v), D == null || D(M)));
|
|
1582
1584
|
},
|
|
1583
1585
|
[
|
|
1584
1586
|
b,
|
|
@@ -1592,15 +1594,15 @@ function Ut(t) {
|
|
|
1592
1594
|
he && u.connectionState === "connected" && pe(!1);
|
|
1593
1595
|
}, [u.connectionState, he]), S(() => {
|
|
1594
1596
|
if (!oe) return;
|
|
1595
|
-
const v = (
|
|
1596
|
-
|
|
1597
|
+
const v = (M) => {
|
|
1598
|
+
M.key === "Escape" && q(!1);
|
|
1597
1599
|
};
|
|
1598
1600
|
return window.addEventListener("keydown", v), () => window.removeEventListener("keydown", v);
|
|
1599
1601
|
}, [oe]);
|
|
1600
|
-
const Ge = !!T || !!(U != null && U.avatarImageUrl) || u.isControlled, Ne = ht(ve, l, Ge), Ee = (U == null ? void 0 : U.name) ?? z ?? ((Ie = u.agentConfig) == null ? void 0 : Ie.name) ?? ((Ae = Ne.info) == null ? void 0 : Ae.name) ?? "Live Layer",
|
|
1602
|
+
const Ge = !!T || !!(U != null && U.avatarImageUrl) || u.isControlled, Ne = ht(ve, l, Ge), Ee = (U == null ? void 0 : U.name) ?? z ?? ((Ie = u.agentConfig) == null ? void 0 : Ie.name) ?? ((Ae = Ne.info) == null ? void 0 : Ae.name) ?? "Live Layer", Le = (U == null ? void 0 : U.avatarImageUrl) ?? T ?? ((De = u.agentConfig) == null ? void 0 : De.avatarImageUrl) ?? ((Re = Ne.info) == null ? void 0 : Re.avatarImageUrl) ?? null, Ke = E ?? ((Te = u.agentConfig) == null ? void 0 : Te.idleLoopUrl) ?? ((ze = Ne.info) == null ? void 0 : ze.idleLoopUrl) ?? null, Ye = R ?? null, He = g(() => G("expanded"), [G]), qe = g(
|
|
1601
1603
|
() => G("minimized"),
|
|
1602
1604
|
[G]
|
|
1603
|
-
),
|
|
1605
|
+
), Me = g(() => {
|
|
1604
1606
|
u.disconnect(), G("hidden");
|
|
1605
1607
|
}, [u, G]), Je = g(() => {
|
|
1606
1608
|
const v = u.audioElement;
|
|
@@ -1638,18 +1640,18 @@ function Ut(t) {
|
|
|
1638
1640
|
}
|
|
1639
1641
|
),
|
|
1640
1642
|
Z === "minimized" && /* @__PURE__ */ e(
|
|
1641
|
-
|
|
1643
|
+
Mt,
|
|
1642
1644
|
{
|
|
1643
1645
|
position: p,
|
|
1644
1646
|
isMobile: ee,
|
|
1645
1647
|
agentName: Ee,
|
|
1646
|
-
avatarImageUrl:
|
|
1648
|
+
avatarImageUrl: Le,
|
|
1647
1649
|
agentState: u.agentState,
|
|
1648
1650
|
isMuted: V.isMuted,
|
|
1649
1651
|
audioLevel: ie,
|
|
1650
1652
|
onExpand: He,
|
|
1651
1653
|
onToggleMute: V.toggleMute,
|
|
1652
|
-
onClose:
|
|
1654
|
+
onClose: Me
|
|
1653
1655
|
}
|
|
1654
1656
|
),
|
|
1655
1657
|
Z === "expanded" && /* @__PURE__ */ e(
|
|
@@ -1658,7 +1660,7 @@ function Ut(t) {
|
|
|
1658
1660
|
position: p,
|
|
1659
1661
|
isMobile: ee,
|
|
1660
1662
|
agentName: Ee,
|
|
1661
|
-
avatarImageUrl:
|
|
1663
|
+
avatarImageUrl: Le,
|
|
1662
1664
|
idleLoopUrl: Ke,
|
|
1663
1665
|
greeting: Ye,
|
|
1664
1666
|
branding: I,
|
|
@@ -1701,7 +1703,7 @@ function Ut(t) {
|
|
|
1701
1703
|
onToggleSpeaker: ye,
|
|
1702
1704
|
onSendMessage: Ce,
|
|
1703
1705
|
onMinimize: qe,
|
|
1704
|
-
onClose:
|
|
1706
|
+
onClose: Me,
|
|
1705
1707
|
onClearMicError: V.clearError
|
|
1706
1708
|
}
|
|
1707
1709
|
)
|
|
@@ -1721,7 +1723,7 @@ const Gt = ({
|
|
|
1721
1723
|
className: s,
|
|
1722
1724
|
style: c
|
|
1723
1725
|
}) => {
|
|
1724
|
-
const m =
|
|
1726
|
+
const m = L(null), d = L(null), f = L(r);
|
|
1725
1727
|
f.current = r;
|
|
1726
1728
|
const p = g((o) => {
|
|
1727
1729
|
var C;
|
package/dist/styles.css
CHANGED
|
@@ -66,7 +66,14 @@
|
|
|
66
66
|
box-sizing: border-box;
|
|
67
67
|
}
|
|
68
68
|
|
|
69
|
-
|
|
69
|
+
/* Browser button reset, wrapped in :where() so it contributes zero
|
|
70
|
+
specificity. Without this, `.ll-widget button` would have specificity
|
|
71
|
+
(0,1,1) and stomp on every component class (.ll-hbtn, .ll-hpill,
|
|
72
|
+
.ll-tool, etc. — all 0,1,0), forcing every rule to be re-scoped under
|
|
73
|
+
`.ll-widget` to win. With :where() the reset becomes (0,1,0) and a
|
|
74
|
+
later class rule wins on source order, which is what consumers expect
|
|
75
|
+
when they read the CSS top-to-bottom. */
|
|
76
|
+
.ll-widget :where(button) {
|
|
70
77
|
font-family: inherit;
|
|
71
78
|
border: none;
|
|
72
79
|
background: none;
|
|
@@ -75,7 +82,7 @@
|
|
|
75
82
|
color: inherit;
|
|
76
83
|
}
|
|
77
84
|
|
|
78
|
-
.ll-widget button:disabled {
|
|
85
|
+
.ll-widget :where(button):disabled {
|
|
79
86
|
cursor: not-allowed;
|
|
80
87
|
}
|
|
81
88
|
|
|
@@ -617,6 +624,25 @@
|
|
|
617
624
|
background: rgba(0, 0, 0, 0.55);
|
|
618
625
|
}
|
|
619
626
|
|
|
627
|
+
/* Compact pill — used for short codes like "EN". Tightens horizontal
|
|
628
|
+
padding and slightly shrinks the type so it reads as an icon-style
|
|
629
|
+
chip next to the full-size agent name pill. */
|
|
630
|
+
.ll-hpill--compact {
|
|
631
|
+
height: 32px;
|
|
632
|
+
padding: 0 10px;
|
|
633
|
+
font-size: 12px;
|
|
634
|
+
font-weight: 600;
|
|
635
|
+
letter-spacing: 0.04em;
|
|
636
|
+
text-transform: uppercase;
|
|
637
|
+
gap: 4px;
|
|
638
|
+
}
|
|
639
|
+
|
|
640
|
+
.ll-hpill--compact > svg {
|
|
641
|
+
width: 12px;
|
|
642
|
+
height: 12px;
|
|
643
|
+
opacity: 0.75;
|
|
644
|
+
}
|
|
645
|
+
|
|
620
646
|
.ll-hpill__label {
|
|
621
647
|
/* No max-width — labels size to content. The header's flex container
|
|
622
648
|
handles overflow (wrap when crowded). Truncating "Dean Dijour" or
|
package/package.json
CHANGED