@hoosei/voxweave-react/dist/cjs/index4.js

A customizable and interactive voice UI component for React applications

"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const o=require("react"),we=require("./index6.js"),g=require("./index8.js"),V=require("framer-motion"),ot=require("./index9.js"),Ce=require("./index10.js");;/* empty css        */const rt=require("./index11.js"),at=require("./index12.js"),it=require("./index13.js"),st=require("./index14.js"),lt=require("./index15.js"),ct=require("./index5.js"),ut=require("./index16.js"),e=require("react/jsx-runtime"),Ae=require("./index17.js"),Ne=require("./index18.js"),xt=require("./index19.js");function vt({animation:c,validatedSize:L,isListening:i,audioData:y,isVertical:q,agentAudioData:m,finalListeningColors:u,finalNotListeningColors:b,agentStatus:A,darkMode:S,containerStyle:h}){c||console.warn("No animation specified for Voxweave component. Using BlobAnimation as default.");const O=c||ut.default;return e.jsx(it.ThreeWrapper,{size:L,animation:O,isListening:i,audioData:y,isVertical:q,agentAudioData:m,listeningColors:u,notListeningColors:b,agentStatus:A,darkMode:S,containerPosition:h})}const Se="voxweave-privacy-consent",H=({message:c,isDev:L,onClose:i})=>e.jsx("div",{className:"vox:fixed vox:bottom-4 vox:left-4 vox:z-50",children:e.jsxs("div",{className:"vox:flex vox:items-start vox:gap-2 vox:p-3 vox:rounded-lg vox:bg-red-50 vox:text-red-900 vox:shadow-lg vox:border vox:border-red-100 vox:max-w-[365px]",children:[e.jsx(xt.default,{className:"vox:w-4 vox:h-4 vox:text-red-500 vox:mt-0.5"}),e.jsxs("div",{className:"vox:flex-1",children:[e.jsx("p",{className:"vox:text-sm vox:font-medium",children:c}),L&&e.jsx("p",{className:"vox:text-xs vox:mt-1 vox:text-red-600",children:"Check the console for more details"})]}),i&&e.jsx("button",{onClick:i,className:"vox:text-red-500 hover:vox:text-red-700 vox:mt-0.5",children:e.jsx(Ne.default,{className:"vox:w-4 vox:h-4"})})]})}),dt=["#4F46E5","#818CF8"],ft=["#6B7280","#9CA3AF"],gt=c=>{const{className:L,isListening:i=!1,agentStatus:y="idle",statusLabel:q,size:m=250,useAsButton:u=!1,showControls:b=!0,listeningColors:A,notListeningColors:S,theme:h="default",animation:O,darkMode:f=!1,hideCloseButton:je=!1,backgroundColor:E,disableBackground:I=!1,disableShadow:Le=!1,isVisible:B=!1,isAnimated:Y=!0,disableFixed:a=!1,isExpanded:p=!1,isCompact:Z=!1,privacyMode:_=!1,privacyPolicyUrl:Ee="#",companyName:ke="our service",languageMode:Re=!1,defaultLanguage:De="en",startCallLabel:U="Call",endCallLabel:M="End",onConsentAccept:Ve,onLanguageChange:qe,containerStyle:r="center",position:n="right",isVertical:w=!1,expandLabel:Be="Chat with AI"}=c,x=m!==void 0&&!(a===!0&&b===!1)&&(m<75||m>250)?(console.warn(`Voxweave: When disableFixed is not true or showControls is true, size must be between 75 and 250. Current values: disableFixed=${a}, showControls=${b}, size=${m}. Defaulting to ${m<75?75:250}.`),m<75?75:250):m||180,s=o.useRef(null),C=o.useRef(null),k=o.useRef(null),R=o.useRef(null),l=o.useRef(null),z=o.useRef(null),[P,J]=o.useState(!1),[Q,X]=o.useState(!0),[T,ee]=o.useState(null),[ze,te]=o.useState(!1),[Te,W]=o.useState(!1),[ne,$e]=o.useState(()=>typeof window>"u"||!_?!0:localStorage.getItem(Se)==="true"),[Fe,Oe]=o.useState(De),[G,oe]=o.useState(i),[re,ae]=o.useState(null),[ie,K]=o.useState(null),[,se]=o.useState(!1),Ie=o.useRef(null),[N,_e]=o.useState(!1),le=o.useRef(null),ce=250,ue=82,Ue=()=>x<=ce?"4rem":`${4*(ce/x)}rem`,Me=()=>{_e(!N)},xe=o.useCallback(async()=>{if(!R.current)try{const t=await navigator.mediaDevices.getUserMedia({audio:!0});if(R.current=t,s.current||(s.current=new(window.AudioContext||window.webkitAudioContext)),!s.current)return;const v=s.current.createMediaStreamSource(t);C.current=s.current.createAnalyser(),C.current.fftSize=256,v.connect(C.current),k.current=new Uint8Array(C.current.frequencyBinCount),ve()}catch(t){console.error("Error accessing microphone:",t),alert("Unable to access microphone. Please check your browser settings and try again.")}},[]),ve=o.useCallback(()=>{if(C.current&&k.current){const t=performance.now(),v=le.current||0;t-v>33&&(C.current.getByteFrequencyData(k.current),ae(new Uint8Array(k.current)),le.current=t)}z.current=requestAnimationFrame(ve)},[]),de=o.useCallback(()=>{if(!s.current)return;const t=s.current.createAnalyser();t.fftSize=256,l.current=s.current.createBufferSource();const v=s.current.createBuffer(1,s.current.sampleRate*3,s.current.sampleRate),d=v.getChannelData(0);for(let j=0;j<d.length;j++)d[j]=Math.random()*2-1;l.current.buffer=v,l.current.loop=!0,l.current.connect(t),l.current.start();const D=new Uint8Array(t.frequencyBinCount);let ye=0;const be=()=>{const j=performance.now();j-ye>33&&(t.getByteFrequencyData(D),K(new Uint8Array(D)),ye=j),requestAnimationFrame(be)};be()},[]),fe=o.useCallback(()=>{R.current&&(R.current.getTracks().forEach(t=>t.stop()),R.current=null),s.current&&(s.current.close(),s.current=null),l.current&&(l.current.stop(),l.current.disconnect(),l.current=null),z.current&&(cancelAnimationFrame(z.current),z.current=null),C.current=null,k.current=null,ae(null),K(null)},[]);o.useEffect(()=>{let t=!0;async function v(){try{const d=ct.getConfig(),D=await st.validateLicenseKey(d.licenseKey);t&&(J(D),D||ee("Voxweave widget is currently unavailable."),X(!1))}catch(d){console.error("License validation failed:",d),t&&(J(!1),ee("Unable to initialize the widget."),X(!1))}}return v(),()=>{t=!1}},[]),o.useEffect(()=>{oe(i),i?xe():fe()},[i,xe,fe]),o.useEffect(()=>{y==="speaking"?de():l.current&&(l.current.stop(),l.current.disconnect(),l.current=null,K(null))},[y,de]);const $=()=>{se(!1),setTimeout(()=>{c.onClose()},500)},F=()=>{se(!0),c.onStartCall()},ge=()=>c.onButtonClick(),me=o.useCallback(()=>{if(_&&!ne){W(!0);return}u?c.onButtonClick?.():G?$?.():F?.(),oe(!G)},[G,_,ne,u,F,$]),Pe=()=>{W(!1),$e(!0),localStorage.setItem(Se,"true"),Ve?.(),F()},We=()=>{W(!1)},he=()=>{"useAsButton"in c&&c.useAsButton&&ge?ge():me()},Ge=t=>{Oe(t),qe?.(t)},Ke=g.cn("vox:flex vox:items-center vox:gap-2 vox:rounded-2xl",a?"vox:relative":"vox:fixed",a?"":"vox:p-2",L,{"vox:bg-white":!f&&!E&&!I,"vox:bg-gray-900":f&&!E&&!I,"vox:shadow-lg":!Le,"vox:flex-row":r==="bottom","vox:flex-col":r==="center"||w,"vox:bottom-4":!a&&r==="bottom"&&(n==="left"||n==="right"),"vox:left-14":!a&&r==="bottom"&&n==="left","vox:right-14":!a&&r==="bottom"&&n==="right","vox:left-3":!a&&r!=="bottom"&&n==="left","vox:right-3":!a&&r!=="bottom"&&n==="right","vox:top-[5%] vox:-translate-y-[10%]":!a&&r!=="bottom"&&(n==="left"||n==="right")}),He=g.cn("vox:flex vox:items-center vox:transform-none",{"vox:flex-row":r==="bottom"&&w,"vox:flex-col":r==="center","vox:bottom-4":!a&&r==="bottom"&&(n==="left"||n==="right"),"vox:left-3":!a&&n?.includes("left")||!a&&n==="left","vox:right-3":!a&&n?.includes("right")||!a&&n==="right","vox:top-[38%] vox:-translate-y-[38%]":!a&&r!=="bottom"&&(n==="left"||n==="right")}),Ye={...E&&!I?{backgroundColor:E}:{},width:h==="minimal"?"auto":`${r==="bottom"?`calc(${x}px * 1.6)`:`${x}px`}`,height:h==="minimal"||w?void 0:"auto"},Ze={width:r!=="center"&&n==="right"||r==="center"&&n==="right"?void 0:`calc(${x}px * 2 ${r==="bottom"&&!p?"+ 3rem":""})`,height:h==="minimal"?void 0:r==="center"?`calc(${x}px * 1.15 + ${Ue()})`:`calc(${x}px * 2 + 2rem)`,minHeight:h==="minimal"?void 0:x},Je={marginTop:r==="center"?`${Z?ue-24:ue}px`:"1rem",position:"relative",zIndex:50},Qe=g.cn("vox:inline-flex vox:justify-center vox:grow vox:items-center vox:w-full vox:gap-1 vox:px-3! vox:py-2! vox:rounded-full! vox:w-full vox:text-xs vow-max-w-[320px] vox:transition vox:duration-300 vox:ease-in-out",{"vox:bg-black! vox:text-white! vox:border-b-4! vox:border-gray-700! vox:hover:bg-gray-700!":!f,"vox:bg-[#383838]! vox:border-b-4! vox:border-[#292929]! vox:hover:bg-[#292929]! vox:text-white!":f}),Xe=(()=>{const t=r==="center"&&(n==="left"||n==="right"),v=n==="left"?-1:1,d={type:"spring",stiffness:1300,damping:120,duration:1.5,mass:1.2};return t?{hidden:{x:`${100*v}%`,opacity:0,transition:d},visible:{x:0,opacity:1,transition:d}}:{hidden:{y:"100%",opacity:0,transition:d},visible:{y:0,opacity:1,transition:d}}})(),et=Array.isArray(A)&&A.length>=2?[A[0],A[1]]:dt,tt=Array.isArray(S)&&S.length>=2?[S[0],S[1]]:ft,nt=p?N:B;if(Q)return e.jsx("div",{className:"vox:sr-only",children:"Voxweave is loading..."});if(!P||T){const t=process.env.NODE_ENV==="development"||!1;return e.jsx(H,{message:T||"Widget unavailable",isDev:t})}const pe=process.env.NODE_ENV==="development"||!1;return e.jsx(at.ErrorBoundary,{FallbackComponent:({})=>e.jsx(H,{message:"Something went wrong",isDev:pe,onClose:()=>te(!1)}),children:e.jsxs(lt.ClientOnly,{children:[(!P||T)&&ze&&e.jsx(H,{message:T||"Voxweave widget unavailable",isDev:pe,onClose:()=>te(!1)}),e.jsxs(V.motion.div,{animate:!Y,id:"voxweave-primary-container",className:g.cn(He,a?"":"vox:fixed"),style:Ze,children:[e.jsx(V.motion.div,{className:g.cn(a?"vox:relative":"vox:fixed vox:overflow-hidden"," vox:relative"),initial:{height:h==="minimal"?void 0:`calc(${x}px  ${r==="bottom"?"/ 1.6":"* 2"})`},animate:{height:x},transition:{duration:.6,ease:[.4,0,.2,1]},children:nt&&e.jsxs(V.motion.div,{ref:Ie,className:g.cn(Ke,u&&"vox:cursor-pointer"),style:Ye,onClick:u?he:void 0,role:u?"button":"region","aria-label":u?"Open Voxweave":"Voxweave audio visualization",tabIndex:u?0:void 0,onKeyDown:t=>{u&&(t.key==="Enter"||t.key===" ")&&(t.preventDefault(),he())},initial:"hidden",animate:Y?"visible":!1,exit:"hidden",variants:Xe,children:[Re&&e.jsx(Ce.LanguageSelector,{value:Fe,onValueChange:Ge,languages:Ce.languages,className:"vox:mr-2",darkMode:f,backgroundColor:E}),h==="minimal"?h==="minimal"&&b&&e.jsx(rt.VoxweaveMinimal,{isListening:i,onStartCall:F,onClose:$,audioData:re,agentAudioData:ie,agentStatus:y,darkMode:f,startCallLabel:U,endCallLabel:M}):e.jsxs(e.Fragment,{children:[e.jsx(vt,{animation:O,validatedSize:x,isListening:i,audioData:re,isVertical:w,agentAudioData:ie,finalListeningColors:et,finalNotListeningColors:tt,agentStatus:y,darkMode:f,containerStyle:r}),b&&!u&&e.jsxs("div",{style:{width:p&&!w?x:"100%"},className:g.cn(w?"vox:px-1.5! vox:pb-1!":"","vox:relative vox:flex vox:flex-col vox:items-center vox:justify-start vox:z-10 vox:flex vox:w-full",{"vox:gap-2":r==="bottom"||w,"vox:gap-1":r==="center"}),children:[!Z&&e.jsx("div",{className:g.cn(f?"vox:text-white/90":"vox:text-black/90","vox:relative vox:z-10 vox:px-2! vox:pb-1! vox:text-sm vox:font-light vox:text-left"),children:i&&y==="speaking"?"Talk to interrupt":i&&y==="listening"?"Listening":`${q||"Need help?"}`}),e.jsxs(we.Button,{className:Qe,size:"sm",onClick:me,"aria-label":i?M:U,disabled:!P,children:[e.jsx(Ae.default,{className:"vox:w-3 vox:h-3","aria-hidden":"true"}),i?M:U]})]})]})]})}),e.jsx(V.AnimatePresence,{children:(!B&&p||B)&&!Q&&b&&!je&&!u&&e.jsx(V.motion.div,{initial:{opacity:0,x:n==="left"?-20:n==="right"?20:0,y:20},animate:{opacity:1,x:0,y:0},exit:{opacity:0,x:n==="left"?-20:n==="right"?20:0,y:20},transition:{duration:.3,ease:"easeInOut"},style:Je,className:g.cn("vox:relative vox:z-50",{"vox:self-start":r!=="center"&&n==="left"||r==="center","vox:self-end":r!=="center"&&(n==="left"||n==="right")}),children:e.jsxs(we.Button,{className:g.cn("vox:p-3! vox:rounded-full! vox:transition vox:duration-300 vox:ease-in-out",{"vox:bg-gray-900/90! vox:hover:bg-gray-300/80! vox:text-gray-800!":!f,"vox:bg-gray-900/90! vox:hover:bg-gray-900/80! vox:text-white!":f,"vox:flex vox:items-center vox:gap-1":p&&!N}),size:"icon",onClick:p?Me:$,"aria-label":p&&N?"Close Voxweave":"Expand Voxweave",children:[p&&N||B?e.jsx(Ne.default,{className:"vox:w-3 vox:h-3","aria-hidden":"true"}):e.jsx(Ae.default,{className:"vox:w-3 vox:h-3","aria-hidden":"true"})," ",p&&!N?e.jsx("span",{className:"vox:text-sm vox:font-light",children:Be}):null]})},"close-button")})]}),Te&&e.jsx(ot.PrivacyDialog,{onAccept:Pe,onCancel:We,privacyPolicyUrl:Ee,companyName:ke})]})})};exports.default=gt;
//# sourceMappingURL=index4.js.map