@streamoji/avatar-widget 0.2.8 → 0.2.9

package/dist/avatar-widget.css

@@ -1 +1 @@
-.avatar-bubble:after{content:"";position:absolute;bottom:0;right:18%;width:29px;height:33px;background-image:url("data:image/svg+xml,%3Csvg width='29' height='33' viewBox='0 0 29 33' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.5%209C3.55459%207.42985%204.13875e-07%208%204.13875e-07%208L0.517701%20-9.50694e-06L28.5%200.995422L28.2689%207.49131C28.2689%207.49131%2023.754%207.83102%2022.2194%208.77706C20.6848%209.7231%2019.1146%2011.6685%2018.5794%2012.6501C18.0442%2013.6317%206.37564%2032.2286%206.37564%2032.2286C6.37564%2032.2286%207.46192%2015.7568%207.53302%2013.7581C7.60412%2011.7594%207.44541%2010.5702%205.5%209Z' fill='white'/%3E%3C/svg%3E");background-size:100% 100%;background-repeat:no-repeat;filter:drop-shadow(0 2px 2px rgba(0,0,0,.08));transform:translateY(78%) rotate(0)}.avatar-widget-container{position:fixed;bottom:0;right:0;z-index:1000;display:flex;flex-direction:column;align-items:flex-end;gap:1rem;width:280px}.avatar-bubble{z-index:10002;background:#fff;padding:1.25rem 1.5rem 1.5rem;min-height:3em;border-radius:24px;color:#1e293b;font-family:Inter,system-ui,-apple-system,sans-serif;font-size:1rem;font-weight:500;line-height:1.5;box-shadow:0 10px 25px -5px #0000001a,0 8px 10px -6px #0000001a;border:1px solid rgba(0,0,0,.05);position:absolute;top:64px;left:50%;transform:translate(-50%,-100%);max-width:min(320px,85vw);width:100%;pointer-events:none;-webkit-user-select:text;user-select:text;overflow:visible;word-break:break-word}.avatar-bubble:after{content:"";position:absolute;bottom:0;right:18%;width:29px;height:33px;background-image:url("data:image/svg+xml,%3Csvg width='29' height='33' viewBox='0 0 29 33' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.5%209C3.55459%207.42985%204.13875e-07%208%204.13875e-07%208L0.517701%20-9.50694e-06L28.5%200.995422L28.2689%207.49131C28.2689%207.49131%2023.754%207.83102%2022.2194%208.77706C20.6848%209.7231%2019.1146%2011.6685%2018.5794%2012.6501C18.0442%2013.6317%206.37564%2032.2286%206.37564%2032.2286C6.37564%2032.2286%207.46192%2015.7568%207.53302%2013.7581C7.60412%2011.7594%207.44541%2010.5702%205.5%209Z' fill='white'/%3E%3C/svg%3E");background-size:100% 100%;background-repeat:no-repeat;filter:drop-shadow(0 2px 2px rgba(0,0,0,.08));transform:translateY(78%) rotate(0)}.avatar-bubble__content{max-height:63px;overflow-y:auto;word-break:break-word;scrollbar-width:none;-ms-overflow-style:none}.avatar-bubble__content::-webkit-scrollbar{display:none}.avatar-bubble__content--nudge{max-height:160px!important}.avatar-bubble--entering{animation:avatarBubbleEnter .35s ease-out forwards}.avatar-bubble--exiting{animation:avatarBubbleExit .6s ease-in 2s forwards}@keyframes avatarBubbleEnter{0%{transform:translate(120%,-100%);opacity:0}to{transform:translate(-50%,-100%);opacity:1}}@keyframes avatarBubbleExit{0%{transform:translate(-50%,-100%);opacity:1}to{transform:translate(120%,-100%);opacity:0}}.avatar-wrapper{pointer-events:none;width:300px;height:400px;cursor:pointer;transition:transform .3s ease;z-index:1000}.avatar-wrapper:hover{transform:scale(1.05)}.avatar-circle-bg{width:100%;height:100%;border-radius:50%;border:2px solid white;background:linear-gradient(135deg,#008b8b,#38bdf8);box-shadow:0 4px 20px #0000004d;position:absolute;top:0;left:0;z-index:1}.avatar-circle-bg:before{content:"";position:absolute;inset:0;border-radius:50%;box-shadow:0 0 #ffffffb3;animation:pulse-white 2s infinite;z-index:-1}.avatar-scene-wrapper{z-index:2;pointer-events:none;overflow:visible}.avatar-scene-wrapper .avatar-canvas-layer{position:absolute;bottom:0;right:0;pointer-events:none!important;overflow:visible}.avatar-canvas-layer{width:400px;height:400px;z-index:2;pointer-events:none!important;overflow:visible}.avatar-canvas-layer canvas{pointer-events:none!important}@keyframes pulse-white{0%{transform:scale(.95);box-shadow:0 0 #ffffffb3}70%{transform:scale(1);box-shadow:0 0 0 10px #fff0}to{transform:scale(.95);box-shadow:0 0 #fff0}}@keyframes popIn{0%{opacity:0;transform:scale(.8) translateY(10px)}to{opacity:1;transform:scale(1) translateY(0)}}.avatar-input-area{position:absolute;bottom:4px;right:4px;z-index:10001;display:flex;flex-direction:column;align-items:flex-end;gap:6px}@keyframes thinkingTabPopUp{0%{transform:translateY(28px);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes thinkingTabPopDown{0%{transform:translateY(0);opacity:1}to{transform:translateY(28px);opacity:0}}.avatar-thinking-tab{background:#1e4a5e;color:#fff;font-size:.8rem;font-weight:500;padding:6px 14px;border-radius:12px 12px 0 0;font-family:Inter,system-ui,sans-serif;white-space:nowrap;box-shadow:0 2px 8px #0000001a;position:absolute;bottom:45px;left:25px}.avatar-thinking-tab--entering{animation:thinkingTabPopUp .25s ease-out forwards}.avatar-thinking-tab--exiting{animation:thinkingTabPopDown .25s ease-in forwards}.avatar-thinking-tab a{color:inherit;text-decoration:none}.avatar-thinking-tab a:hover{text-decoration:underline}.avatar-input-container{position:relative;bottom:auto;right:auto;z-index:10001;width:100%;min-width:280px;height:48px;min-height:48px;pointer-events:auto;display:flex;flex-direction:column;justify-content:center;align-items:stretch;overflow:hidden;background:#fff;border-radius:50px;padding:0 6px;box-shadow:0 2px 12px #00000014}.avatar-input-container>div:first-child{display:flex;align-items:center;width:100%;height:100%;min-height:0}.avatar-input-container .avatar-input-loader{height:30px;aspect-ratio:2.5;--_g: no-repeat radial-gradient(farthest-side, #1e4a5e 90%, #0000);background:var(--_g),var(--_g),var(--_g),var(--_g);background-size:20% 50%;animation:avatar-input-l44 1s infinite linear alternate}@keyframes avatar-input-l44{0%,5%{background-position:0% 50%,calc(1*100%/3) 50%,calc(2*100%/3) 50%,100% 50%}12.5%{background-position:0% 0,calc(1*100%/3) 50%,calc(2*100%/3) 50%,100% 50%}25%{background-position:0% 0,calc(1*100%/3) 0,calc(2*100%/3) 50%,100% 50%}37.5%{background-position:0% 100%,calc(1*100%/3) 0,calc(2*100%/3) 0,100% 50%}50%{background-position:0% 100%,calc(1*100%/3) 100%,calc(2*100%/3) 0,100% 0}62.5%{background-position:0% 50%,calc(1*100%/3) 100%,calc(2*100%/3) 100%,100% 0}75%{background-position:0% 50%,calc(1*100%/3) 50%,calc(2*100%/3) 100%,100% 100%}87.5%{background-position:0% 50%,calc(1*100%/3) 50%,calc(2*100%/3) 50%,100% 100%}95%,to{background-position:0% 50%,calc(1*100%/3) 50%,calc(2*100%/3) 50%,100% 50%}}.avatar-input-header{background:#1e4a5e;color:#fff;padding:6px 16px;width:fit-content;min-width:35%;margin-left:8%;border-radius:12px 12px 0 0;font-family:Inter,system-ui,sans-serif;font-size:11px;font-weight:500;letter-spacing:-.01em;text-align:center;white-space:nowrap}.avatar-input-body{background:#fff;padding:6px;border-radius:50px;display:flex;flex-direction:column}.avatar-input-body form{display:flex;align-items:center;width:100%}#avatar-text-input{background:transparent;border:none;color:#334155;font-size:.95rem;line-height:1.25;outline:none;padding:0 2px 0 12px;flex:1;min-width:0;font-family:Inter,system-ui,sans-serif}#avatar-text-input::placeholder{color:#94a3b8}.avatar-input-container .mic-button{background:#1e4a5e;color:#fff;border:none;width:38px;height:38px;border-radius:50%!important;display:flex;justify-content:center;align-items:center;cursor:pointer;transition:all .2s cubic-bezier(.4,0,.2,1);flex-shrink:0;margin-right:0;margin-left:8px}.avatar-input-container .mic-button:hover{background:#163a4a;transform:translateY(-1px)}.avatar-input-recording{flex:1;display:flex;align-items:center;width:100%;height:100%;min-height:36px;gap:8px}.avatar-input-recording .avatar-recording-cancel,.avatar-input-recording .avatar-recording-confirm{width:32px;height:32px;min-width:32px;min-height:32px;border-radius:50%;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;padding:0;line-height:0;align-self:center;box-sizing:border-box}.avatar-input-recording .avatar-recording-cancel{background:#cbd5e1;color:#fff}.avatar-input-recording .avatar-recording-confirm{background:#1e4a5e;color:#fff}.avatar-input-recording .avatar-recording-cancel:hover,.avatar-input-recording .avatar-recording-confirm:hover{opacity:.9}.avatar-input-speaking{flex:1;display:flex;align-items:center;width:100%;height:100%;min-height:36px;gap:8px}.avatar-input-speaking .avatar-speaking-stop{width:32px;height:32px;min-width:32px;min-height:32px;border-radius:50%;border:2px solid #7dd3fc;background:#1e4a5e;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;padding:0;line-height:0;align-self:center;box-sizing:border-box}.avatar-input-speaking .avatar-speaking-stop:hover{opacity:.9}.avatar-speaking-stop__icon{width:10px;height:10px;background:#cbd5e1;border-radius:2px;display:block}.avatar-status-text{font-size:.75rem;color:#64748b;text-align:center;padding-bottom:4px;font-family:Inter,sans-serif}@media(max-width:480px){.avatar-widget-container{width:100%;left:0;right:0;bottom:0;padding:0 max(16px,env(safe-area-inset-left));padding-right:max(16px,env(safe-area-inset-right));box-sizing:border-box;flex-direction:column-reverse;align-items:flex-end}.avatar-input-area{position:relative;width:100%}.avatar-input-container{width:100%;min-width:0;max-width:100%;right:auto;bottom:auto;filter:drop-shadow(0 5px 15px rgba(0,0,0,.2))}.avatar-wrapper{width:80px;height:80px;align-self:flex-end}.avatar-scene-wrapper{width:80px;height:80px}.avatar-canvas-layer{width:350px!important;height:350px!important;right:-28px!important}.avatar-bubble{left:16px;right:auto;top:40px;transform:translateY(-50%);max-width:calc(100vw - 120px);font-size:.85rem;padding:.6rem .85rem .75rem;border-radius:18px;height:90px;box-shadow:0 6px 22px -4px #00000021,0 2px 7px -2px #00000014}.avatar-bubble--entering{animation:avatarBubbleEnterMobile .35s ease-out forwards}.avatar-bubble--exiting{animation:avatarBubbleExitMobile .6s ease-in 2s forwards}@keyframes avatarBubbleEnterMobile{0%{transform:translate(-20px,-50%);opacity:0}to{transform:translateY(-50%);opacity:1}}@keyframes avatarBubbleExitMobile{0%{transform:translateY(-50%);opacity:1}to{transform:translate(-20px,-50%);opacity:0}}.avatar-bubble:after{left:auto;right:4px;bottom:50%;width:16px;height:18px;background-size:100% 100%;transform:translate(100%,50%) rotate(-90deg)}.avatar-input-header{padding:8px 12px;font-size:14px}}.speech-bubble{background:#fff;border-radius:40px 40px 0/40px 40px 0px;padding:16px 24px;color:#1e293b;font-family:Inter,system-ui,-apple-system,sans-serif;font-size:16px;font-weight:500;line-height:1.4;max-width:320px;width:max-content;box-shadow:0 10px 25px -5px #0000001a,0 8px 10px -6px #0000001a;pointer-events:none;-webkit-user-select:none;user-select:none;position:relative;text-align:center;z-index:10002;transform:translate(-50%,-100%);margin-bottom:20px}@keyframes bubbleFadeIn{0%{opacity:0;transform:translate(-50%) scale(.9)}to{opacity:1;transform:translate(-50%) scale(1)}}.thinking-dots{display:flex;justify-content:center;align-items:center;gap:4px;height:12px}.thinking-dots span{width:6px;height:6px;background-color:#94a3b8;border-radius:50%;display:inline-block;animation:thinking-dot-pulse 1.4s infinite ease-in-out both}.thinking-dots span:nth-child(1){animation-delay:-.32s}.thinking-dots span:nth-child(2){animation-delay:-.16s}@keyframes thinking-dot-pulse{0%,80%,to{transform:scale(0);opacity:.3}40%{transform:scale(1);opacity:1}}
+.avatar-widget-container{position:fixed;bottom:0;right:0;z-index:1000;display:flex;flex-direction:column;align-items:flex-end;gap:1rem;width:280px}.avatar-bubble{z-index:10002;background:#fff;padding:1.25rem 1.5rem 1.5rem;min-height:3em;border-radius:24px;color:#1e293b;font-family:Inter,system-ui,-apple-system,sans-serif;font-size:1rem;font-weight:500;line-height:1.5;box-shadow:0 10px 25px -5px #0000001a,0 8px 10px -6px #0000001a;border:1px solid rgba(0,0,0,.05);position:absolute;top:64px;left:50%;transform:translate(-50%,-100%);max-width:min(320px,85vw);width:100%;pointer-events:none;-webkit-user-select:text;user-select:text;overflow:visible;word-break:break-word}.avatar-bubble:after{content:"";position:absolute;bottom:0;right:18%;width:29px;height:33px;background-image:url("data:image/svg+xml,%3Csvg width='29' height='33' viewBox='0 0 29 33' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.5%209C3.55459%207.42985%204.13875e-07%208%204.13875e-07%208L0.517701%20-9.50694e-06L28.5%200.995422L28.2689%207.49131C28.2689%207.49131%2023.754%207.83102%2022.2194%208.77706C20.6848%209.7231%2019.1146%2011.6685%2018.5794%2012.6501C18.0442%2013.6317%206.37564%2032.2286%206.37564%2032.2286C6.37564%2032.2286%207.46192%2015.7568%207.53302%2013.7581C7.60412%2011.7594%207.44541%2010.5702%205.5%209Z' fill='white'/%3E%3C/svg%3E");background-size:100% 100%;background-repeat:no-repeat;filter:drop-shadow(0 2px 2px rgba(0,0,0,.08));transform:translateY(78%) rotate(0)}.avatar-bubble__content{max-height:63px;overflow-y:auto;word-break:break-word;scrollbar-width:none;-ms-overflow-style:none}.avatar-bubble__content::-webkit-scrollbar{display:none}.avatar-bubble__content--nudge{max-height:160px!important}.avatar-bubble--entering{animation:avatarBubbleEnter .35s ease-out forwards}.avatar-bubble--exiting{animation:avatarBubbleExit .6s ease-in 2s forwards}@keyframes avatarBubbleEnter{0%{transform:translate(120%,-100%);opacity:0}to{transform:translate(-50%,-100%);opacity:1}}@keyframes avatarBubbleExit{0%{transform:translate(-50%,-100%);opacity:1}to{transform:translate(120%,-100%);opacity:0}}.avatar-wrapper{pointer-events:none;width:300px;height:400px;cursor:pointer;transition:transform .3s ease;z-index:1000}.avatar-wrapper:hover{transform:scale(1.05)}.avatar-circle-bg{width:100%;height:100%;border-radius:50%;border:2px solid white;background:linear-gradient(135deg,#008b8b,#38bdf8);box-shadow:0 4px 20px #0000004d;position:absolute;top:0;left:0;z-index:1}.avatar-circle-bg:before{content:"";position:absolute;inset:0;border-radius:50%;box-shadow:0 0 #ffffffb3;animation:pulse-white 2s infinite;z-index:-1}.avatar-scene-wrapper{z-index:2;pointer-events:none;overflow:visible}.avatar-scene-wrapper .avatar-canvas-layer{position:absolute;bottom:0;right:0;pointer-events:none!important;overflow:visible}.avatar-canvas-layer{width:400px;height:400px;z-index:2;pointer-events:none!important;overflow:visible}.avatar-canvas-layer canvas{pointer-events:none!important}@keyframes pulse-white{0%{transform:scale(.95);box-shadow:0 0 #ffffffb3}70%{transform:scale(1);box-shadow:0 0 0 10px #fff0}to{transform:scale(.95);box-shadow:0 0 #fff0}}@keyframes popIn{0%{opacity:0;transform:scale(.8) translateY(10px)}to{opacity:1;transform:scale(1) translateY(0)}}.avatar-input-area{position:absolute;bottom:4px;right:4px;z-index:10001;display:flex;flex-direction:column;align-items:flex-end;gap:6px}@keyframes thinkingTabPopUp{0%{transform:translateY(28px);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes thinkingTabPopDown{0%{transform:translateY(0);opacity:1}to{transform:translateY(28px);opacity:0}}.avatar-thinking-tab{background:#1e4a5e;color:#fff;font-size:.8rem;font-weight:500;padding:6px 14px;border-radius:12px 12px 0 0;font-family:Inter,system-ui,sans-serif;white-space:nowrap;box-shadow:0 2px 8px #0000001a;position:absolute;bottom:45px;left:25px}.avatar-thinking-tab--entering{animation:thinkingTabPopUp .25s ease-out forwards}.avatar-thinking-tab--exiting{animation:thinkingTabPopDown .25s ease-in forwards}.avatar-thinking-tab a{color:inherit;text-decoration:none}.avatar-thinking-tab a:hover{text-decoration:underline}.avatar-input-container{position:relative;bottom:auto;right:auto;z-index:10001;width:100%;min-width:280px;height:48px;min-height:48px;pointer-events:auto;display:flex;flex-direction:column;justify-content:center;align-items:stretch;overflow:hidden;background:#fff;border-radius:50px;padding:0 6px;box-shadow:0 2px 12px #00000014}.avatar-input-container>div:first-child{display:flex;align-items:center;width:100%;height:100%;min-height:0}.avatar-input-container .avatar-input-loader{height:30px;aspect-ratio:2.5;--_g: no-repeat radial-gradient(farthest-side, #1e4a5e 90%, #0000);background:var(--_g),var(--_g),var(--_g),var(--_g);background-size:20% 50%;animation:avatar-input-l44 1s infinite linear alternate}@keyframes avatar-input-l44{0%,5%{background-position:0% 50%,calc(1*100%/3) 50%,calc(2*100%/3) 50%,100% 50%}12.5%{background-position:0% 0,calc(1*100%/3) 50%,calc(2*100%/3) 50%,100% 50%}25%{background-position:0% 0,calc(1*100%/3) 0,calc(2*100%/3) 50%,100% 50%}37.5%{background-position:0% 100%,calc(1*100%/3) 0,calc(2*100%/3) 0,100% 50%}50%{background-position:0% 100%,calc(1*100%/3) 100%,calc(2*100%/3) 0,100% 0}62.5%{background-position:0% 50%,calc(1*100%/3) 100%,calc(2*100%/3) 100%,100% 0}75%{background-position:0% 50%,calc(1*100%/3) 50%,calc(2*100%/3) 100%,100% 100%}87.5%{background-position:0% 50%,calc(1*100%/3) 50%,calc(2*100%/3) 50%,100% 100%}95%,to{background-position:0% 50%,calc(1*100%/3) 50%,calc(2*100%/3) 50%,100% 50%}}.avatar-input-header{background:#1e4a5e;color:#fff;padding:6px 16px;width:fit-content;min-width:35%;margin-left:8%;border-radius:12px 12px 0 0;font-family:Inter,system-ui,sans-serif;font-size:11px;font-weight:500;letter-spacing:-.01em;text-align:center;white-space:nowrap}.avatar-input-body{background:#fff;padding:6px;border-radius:50px;display:flex;flex-direction:column}.avatar-input-body form{display:flex;align-items:center;width:100%}#avatar-text-input{background:transparent;border:none;color:#334155;font-size:.95rem;line-height:1.25;outline:none;padding:0 2px 0 12px;flex:1;min-width:0;font-family:Inter,system-ui,sans-serif}#avatar-text-input::placeholder{color:#94a3b8}.avatar-input-container .mic-button{background:#1e4a5e;color:#fff;border:none;width:38px;height:38px;border-radius:50%!important;display:flex;justify-content:center;align-items:center;cursor:pointer;transition:all .2s cubic-bezier(.4,0,.2,1);flex-shrink:0;margin-right:0;margin-left:8px}.avatar-input-container .mic-button:hover{background:#163a4a;transform:translateY(-1px)}.avatar-input-recording{flex:1;display:flex;align-items:center;width:100%;height:100%;min-height:36px;gap:8px}.avatar-input-recording .avatar-recording-cancel,.avatar-input-recording .avatar-recording-confirm{width:32px;height:32px;min-width:32px;min-height:32px;border-radius:50%;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;padding:0;line-height:0;align-self:center;box-sizing:border-box}.avatar-input-recording .avatar-recording-cancel{background:#cbd5e1;color:#fff}.avatar-input-recording .avatar-recording-confirm{background:#1e4a5e;color:#fff}.avatar-input-recording .avatar-recording-cancel:hover,.avatar-input-recording .avatar-recording-confirm:hover{opacity:.9}.avatar-input-speaking{flex:1;display:flex;align-items:center;width:100%;height:100%;min-height:36px;gap:8px}.avatar-input-speaking .avatar-speaking-stop{width:32px;height:32px;min-width:32px;min-height:32px;border-radius:50%;border:2px solid #7dd3fc;background:#1e4a5e;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;padding:0;line-height:0;align-self:center;box-sizing:border-box}.avatar-input-speaking .avatar-speaking-stop:hover{opacity:.9}.avatar-speaking-stop__icon{width:10px;height:10px;background:#cbd5e1;border-radius:2px;display:block}.avatar-status-text{font-size:.75rem;color:#64748b;text-align:center;padding-bottom:4px;font-family:Inter,sans-serif}@media(max-width:480px){.avatar-widget-container{width:100%;left:0;right:0;bottom:0;padding:0 max(16px,env(safe-area-inset-left));padding-right:max(16px,env(safe-area-inset-right));box-sizing:border-box;flex-direction:column-reverse;align-items:flex-end}.avatar-input-area{position:relative;width:100%}.avatar-input-container{width:100%;min-width:0;max-width:100%;right:auto;bottom:auto;filter:drop-shadow(0 5px 15px rgba(0,0,0,.2))}.avatar-wrapper{width:80px;height:80px;align-self:flex-end}.avatar-scene-wrapper{width:80px;height:80px}.avatar-canvas-layer{width:350px!important;height:350px!important;right:-28px!important}.avatar-bubble{left:16px;right:auto;top:40px;transform:translateY(-50%);max-width:calc(100vw - 120px);font-size:.85rem;padding:.6rem .85rem .75rem;border-radius:18px;height:90px;box-shadow:0 6px 22px -4px #00000021,0 2px 7px -2px #00000014}.avatar-bubble--entering{animation:avatarBubbleEnterMobile .35s ease-out forwards}.avatar-bubble--exiting{animation:avatarBubbleExitMobile .6s ease-in 2s forwards}@keyframes avatarBubbleEnterMobile{0%{transform:translate(-20px,-50%);opacity:0}to{transform:translateY(-50%);opacity:1}}@keyframes avatarBubbleExitMobile{0%{transform:translateY(-50%);opacity:1}to{transform:translate(-20px,-50%);opacity:0}}.avatar-bubble:after{left:auto;right:4px;bottom:50%;width:16px;height:18px;background-size:100% 100%;transform:translate(100%,50%) rotate(-90deg)}.avatar-input-header{padding:8px 12px;font-size:14px}}.speech-bubble{background:#fff;border-radius:40px 40px 0/40px 40px 0px;padding:16px 24px;color:#1e293b;font-family:Inter,system-ui,-apple-system,sans-serif;font-size:16px;font-weight:500;line-height:1.4;max-width:320px;width:max-content;box-shadow:0 10px 25px -5px #0000001a,0 8px 10px -6px #0000001a;pointer-events:none;-webkit-user-select:none;user-select:none;position:relative;text-align:center;z-index:10002;transform:translate(-50%,-100%);margin-bottom:20px}@keyframes bubbleFadeIn{0%{opacity:0;transform:translate(-50%) scale(.9)}to{opacity:1;transform:translate(-50%) scale(1)}}.thinking-dots{display:flex;justify-content:center;align-items:center;gap:4px;height:12px}.thinking-dots span{width:6px;height:6px;background-color:#94a3b8;border-radius:50%;display:inline-block;animation:thinking-dot-pulse 1.4s infinite ease-in-out both}.thinking-dots span:nth-child(1){animation-delay:-.32s}.thinking-dots span:nth-child(2){animation-delay:-.16s}@keyframes thinking-dot-pulse{0%,80%,to{transform:scale(0);opacity:.3}40%{transform:scale(1);opacity:1}}

package/dist/avatar-widget.js

@@ -7,12 +7,12 @@ import { GLTFLoader as nn } from "three/examples/jsm/loaders/GLTFLoader.js";
 const ut = "https://ai.streamoji.com", V = (...f) => {
 }, rn = (...f) => {
 }, Et = ({ analyser: f }) => {
-  const T = a(null), w = a(null);
+  const T = a(null), b = a(null);
   return $(() => {
     const p = T.current;
     if (!p) return;
-    const b = p.getContext("2d", { alpha: !0 });
-    if (!b) return;
+    const _ = p.getContext("2d", { alpha: !0 });
+    if (!_) return;
     let O, H = null;
     f && (f.fftSize = 128, H = new Uint8Array(f.frequencyBinCount));
     const he = () => {
@@ -20,9 +20,9 @@ const ut = "https://ai.streamoji.com", V = (...f) => {
       const X = p.width, D = p.height;
       if (X === 0 || D === 0) return;
       const me = D / 2;
-      b.clearRect(0, 0, X, D), b.fillStyle = "#1e293b";
+      _.clearRect(0, 0, X, D), _.fillStyle = "#1e293b";
       const I = 2, k = I + 2, E = X * 0.95, U = Math.floor(E / k);
-      (!w.current || w.current.length !== U) && (w.current = new Float32Array(U).fill(2));
+      (!b.current || b.current.length !== U) && (b.current = new Float32Array(U).fill(2));
       const be = U * k, y = (X - be) / 2;
       f && H && f.getByteFrequencyData(H);
       const Ie = H ? H.length : 0, G = Math.floor(Ie * 0.7) / U, ce = new Float32Array(U);
@@ -40,10 +40,10 @@ const ut = "https://ai.streamoji.com", V = (...f) => {
         ce[M] = N;
       }
       for (let M = 0; M < U; M++) {
-        const B = U - 1 - M, j = Math.max(ce[M], ce[B]), N = w.current[M] + (j - w.current[M]) * 0.3;
-        w.current[M] = N;
+        const B = U - 1 - M, j = Math.max(ce[M], ce[B]), N = b.current[M] + (j - b.current[M]) * 0.3;
+        b.current[M] = N;
         const ne = y + M * k, P = me - N / 2;
-        b.beginPath(), b.roundRect ? b.roundRect(ne, P, I, N, 4) : b.fillRect(ne, P, I, N), b.fill();
+        _.beginPath(), _.roundRect ? _.roundRect(ne, P, I, N, 4) : _.fillRect(ne, P, I, N), _.fill();
       }
     };
     return he(), () => {
@@ -62,23 +62,23 @@ async function on(f) {
     "SHA-256",
     new TextEncoder().encode(f)
   );
-  return Array.from(new Uint8Array(T)).map((w) => w.toString(16).padStart(2, "0")).join("");
+  return Array.from(new Uint8Array(T)).map((b) => b.toString(16).padStart(2, "0")).join("");
 }
 function an(f) {
-  const [T, w] = g(null);
+  const [T, b] = g(null);
   return $(() => {
     if (!f) {
-      w(null);
+      b(null);
       return;
     }
     let p = !1;
-    return on(f).then((b) => {
+    return on(f).then((_) => {
       if (p) return;
-      const O = `${sn}/${b}.glb`;
+      const O = `${sn}/${_}.glb`;
       fetch(O, { method: "HEAD" }).then((H) => {
-        p || w(H.ok ? O : It);
+        p || b(H.ok ? O : It);
       }).catch(() => {
-        p || w(It);
+        p || b(It);
       });
     }), () => {
       p = !0;
@@ -488,28 +488,28 @@ function wn({ target: f }) {
     T.lookAt(...f);
   }, [T, f]), null;
 }
-function Q(f, T, w) {
+function Q(f, T, b) {
   if (!f || !f.morphTargetDictionary)
     return;
-  const p = f, b = p.morphTargetDictionary, O = p.morphTargetInfluences;
+  const p = f, _ = p.morphTargetDictionary, O = p.morphTargetInfluences;
   if (O)
-    for (const H in b)
-      H.toLowerCase() === T.toLowerCase() && (O[b[H]] = w);
+    for (const H in _)
+      H.toLowerCase() === T.toLowerCase() && (O[_[H]] = b);
 }
 function Ct(f, T = 0.97) {
   if (!f) return;
-  const w = f;
-  if (w.morphTargetInfluences)
-    for (let p = 0; p < w.morphTargetInfluences.length; p++)
-      w.morphTargetInfluences[p] *= T;
+  const b = f;
+  if (b.morphTargetInfluences)
+    for (let p = 0; p < b.morphTargetInfluences.length; p++)
+      b.morphTargetInfluences[p] *= T;
 }
 const vn = Zt(
   ({
     avatarUrl: f,
     isPlayingRef: T,
-    visemeQueueRef: w,
+    visemeQueueRef: b,
     audioContextRef: p,
-    responseAudioStartTimeRef: b,
+    responseAudioStartTimeRef: _,
     adjustments: O,
     mood: H,
     expression: he,
@@ -694,9 +694,9 @@ const vn = Zt(
         ), B.current.position.set(...O.position), B.current.scale.setScalar(O.scale), B.current.rotation.x = O.rotation[0], B.current.rotation.z = O.rotation[2];
       }
       if (T.current && p.current) {
-        const J = p.current.currentTime, He = (J - b.current) * 1e3 - -150;
-        for (let Le = 0; Le < w.current.length; Le++) {
-          const Y = w.current[Le];
+        const J = p.current.currentTime, He = (J - _.current) * 1e3 - -150;
+        for (let Le = 0; Le < b.current.length; Le++) {
+          const Y = b.current[Le];
           He >= Y.vtime && He < Y.vtime + Y.vduration && xe(Y.viseme, Y.weight ?? 1);
         }
         J > me.current + 0.5 && (I(), v(!1));
@@ -710,9 +710,9 @@ function yn(f) {
 const Sn = ({
   token: f,
   agentToken: T,
-  onNavigationRequested: w,
+  onNavigationRequested: b,
   avatarGender: p,
-  presetUserDetails: b
+  presetUserDetails: _
 } = {}) => {
   const O = f ?? T ?? "", H = an(O || void 0), [he, X] = g(""), [D, me] = g(""), [I, v] = g("Ready"), [k, E] = g(!1), [U, be] = g(!1), [y, Ie] = g([]), [Ne, G] = g(""), ce = a(null), [M, B] = g(
     () => typeof window < "u" ? window.matchMedia("(max-width: 480px)").matches : !1
@@ -798,12 +798,12 @@ const Sn = ({
     }
     if (e.navigation != null) {
       const n = String(e.navigation).trim();
-      n !== "" && (w ? w(n) : window.open(n, "_blank"));
+      n !== "" && (b ? b(n) : window.open(n, "_blank"));
     }
     const t = e.ask_for || e.lead_capture?.ask_for, i = t ? String(t).trim().toLowerCase() : "", o = i === "none" || i === "<none>";
     if (t && !o) {
       const n = i;
-      if (b && (n === "email" && b.email || n === "name" && b.name || n === "phone" && b.phone))
+      if (_ && (n === "email" && _.email || n === "name" && _.name || n === "phone" && _.phone))
         return;
       Ae(n || null), ke(n === "email" ? "Enter your email" : n === "name" ? "Enter your name" : n === "phone" ? "Enter your phone number" : "Chat with us");
     } else (o || e.ask_for === null || e.lead_capture && e.lead_capture.ask_for === null || e.ask_for === "none") && (Ae(null), Ze !== "Chat with us" && ke("Chat with us"));
@@ -846,7 +846,7 @@ const Sn = ({
       )) {
         const n = "secret", c = Math.floor(Date.now() / 1e3).toString();
         try {
-          const h = new TextEncoder(), _ = await crypto.subtle.importKey(
+          const h = new TextEncoder(), w = await crypto.subtle.importKey(
             "raw",
             h.encode(n),
             { name: "HMAC", hash: "SHA-256" },
@@ -854,14 +854,14 @@ const Sn = ({
             ["sign"]
           ), A = await crypto.subtle.sign(
             "HMAC",
-            _,
+            w,
             h.encode(c)
           ), L = Array.from(new Uint8Array(A)).map((W) => W.toString(16).padStart(2, "0")).join("");
           sessionStorage.setItem("STREAMOJI_LEADS_SESSION_LEAD_ID", L), V("[SESSION] New HMAC UID generated and saved:", L);
         } catch (h) {
           console.error("[SESSION] HMAC generation failed:", h);
-          const _ = Math.random().toString(36) + Date.now().toString();
-          sessionStorage.setItem("STREAMOJI_LEADS_SESSION_LEAD_ID", _);
+          const w = Math.random().toString(36) + Date.now().toString();
+          sessionStorage.setItem("STREAMOJI_LEADS_SESSION_LEAD_ID", w);
         }
       }
       const i = sessionStorage.getItem("STREAMOJI_LEADS_SESSION_MESSAGES");
@@ -872,7 +872,7 @@ const Sn = ({
         } catch {
           o = [];
         }
-      o.length === 0 && b && (b.name || b.email) ? (o = [{ role: "user", content: `PRESET_USER_DETAILS: Name is "${b.name || ""}" , Email is "${b.email || ""}"` }], sessionStorage.setItem(
+      o.length === 0 && _ && (_.name || _.email) ? (o = [{ role: "user", content: `PRESET_USER_DETAILS: Name is "${_.name || ""}" , Email is "${_.email || ""}"` }], sessionStorage.setItem(
         "STREAMOJI_LEADS_SESSION_MESSAGES",
         JSON.stringify(o)
       )) : i || sessionStorage.setItem(
@@ -880,7 +880,7 @@ const Sn = ({
         JSON.stringify([])
       );
     })();
-  }, [b]), $(() => {
+  }, [_]), $(() => {
     const e = () => {
       gt.current = Date.now(), Pe.current && (Pe.current = !1, We(!1), Ie([]), G(""), me(""), be(!1));
     };
@@ -969,10 +969,10 @@ const Sn = ({
           v("Recording too short. Hold or click longer."), E(!1);
           return;
         }
-        const _ = new Blob(qe.current, {
+        const w = new Blob(qe.current, {
           type: "audio/wav"
         });
-        await Jt(_);
+        await Jt(w);
       }, xt.current = Date.now(), c.start(100), it(!0), v("Listening...");
     } catch (e) {
       console.error("Error accessing microphone:", e), v("Mic Access Error");
@@ -991,11 +991,11 @@ const Sn = ({
       if (!i) return;
       const n = i.currentTime - o, c = Math.min(Math.max(0, n), t), h = D.trim().length;
       if (h <= 0) return;
-      const _ = Math.min(
+      const w = Math.min(
         Math.round(c / t * h),
         h
       );
-      s(_);
+      s(w);
     };
     return clearInterval(r.current ?? void 0), r.current = setInterval(e, 90), () => clearInterval(r.current ?? void 0);
   }, [U, D, xe.current]), $(() => {
@@ -1009,10 +1009,10 @@ const Sn = ({
     let c = 0;
     const h = (L) => {
       n.setUint16(c, L, !0), c += 2;
-    }, _ = (L) => {
+    }, w = (L) => {
       n.setUint32(c, L, !0), c += 4;
     };
-    _(1179011410), _(i - 8), _(1163280727), _(544501094), _(16), h(1), h(t), _(e.sampleRate), _(e.sampleRate * 2 * t), h(t * 2), h(16), _(1635017060), _(i - c - 4);
+    w(1179011410), w(i - 8), w(1163280727), w(544501094), w(16), h(1), h(t), w(e.sampleRate), w(e.sampleRate * 2 * t), h(t * 2), h(16), w(1635017060), w(i - c - 4);
     const A = [];
     for (let L = 0; L < t; L++) A.push(e.getChannelData(L));
     let R = 0;
@@ -1041,14 +1041,14 @@ const Sn = ({
         const c = window.atob(e), h = new Uint8Array(c.length);
         for (let F = 0; F < c.length; F++)
           h[F] = c.charCodeAt(F);
-        const _ = await n.decodeAudioData(h.buffer.slice(0));
-        xe.current += _.duration;
+        const w = await n.decodeAudioData(h.buffer.slice(0));
+        xe.current += w.duration;
         const A = n.currentTime;
         let R = Se.current;
         const L = !S.current;
-        R < A && (R = A + 0.1), Se.current = R + _.duration;
+        R < A && (R = A + 0.1), Se.current = R + w.duration;
         const W = n.createBufferSource();
-        W.buffer = _;
+        W.buffer = w;
         let q = kt;
         if ((!q || q.context !== n) && (q = n.createAnalyser(), q.fftSize = 64, q.connect(n.destination), Pt(q)), W.connect(q), le.current.push(W), u.current) {
           le.current = le.current.filter((F) => F !== W);
@@ -1105,9 +1105,9 @@ const Sn = ({
       c.readAsDataURL(n), c.onloadend = async () => {
         const h = c.result.split(",")[1];
         Ge(), X(""), pe.current = "", Ce.current = !1;
-        const _ = `${ut}/stt?token=${encodeURIComponent(
+        const w = `${ut}/stt?token=${encodeURIComponent(
           O
-        )}`, A = await fetch(_, {
+        )}`, A = await fetch(w, {
           method: "POST",
           headers: { "Content-Type": "application/json" },
           body: JSON.stringify({
@@ -1281,12 +1281,12 @@ const Sn = ({
         v("Agent Failed"), E(!1);
         return;
       }
-      const _ = h.getReader();
+      const w = h.getReader();
       u.current = !1;
       const A = new TextDecoder();
       let R = "";
       for (; ; ) {
-        const { done: L, value: W } = await _.read();
+        const { done: L, value: W } = await w.read();
         V(
           `[SSE] Chunk received. done=${L}, length=${W?.length || 0}`
         ), W && (R += A.decode(W, { stream: !0 }));
@@ -1656,12 +1656,16 @@ const Sn = ({
   ] });
 }, Tn = ({
   token: f,
-  onNavigationRequested: T
+  avatarGender: T,
+  onNavigationRequested: b,
+  presetUserDetails: p
 }) => /* @__PURE__ */ l(
   Sn,
   {
     token: f,
-    onNavigationRequested: T
+    onNavigationRequested: b,
+    avatarGender: T,
+    presetUserDetails: p
   }
 );
 export {