@kitn.ai/ui/dist/elements/voice-output.js

Framework-agnostic, Shadow-DOM web components for building AI chat interfaces — works in React, Vue, Angular, Svelte, or plain HTML. Authored in SolidJS.

import{s as A,g as k,h as z,l as m,p as q,i as D,c as o,S as w,n as x,a as E,b as F,t as p,f as G}from"./chunks/define-CNSKFZCd.js";import{c as b}from"./chunks/cn-CU7UAWzk.js";import{B as I}from"./chunks/button-DBDZebGr.js";import{T as N}from"./chunks/tooltip-Cft_Rxiw.js";var P=p('<svg width=16 height=16 viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=2 stroke-linecap=round stroke-linejoin=round><polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"></polygon><path d="M19.07 4.93a10 10 0 010 14.14M15.54 8.46a5 5 0 010 7.07">'),V=p('<svg width=14 height=14 viewBox="0 0 24 24"fill=currentColor><rect x=4 y=4 width=16 height=16 rx=2>'),W=p('<svg width=16 height=16 viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=2 class=animate-spin><path d="M21 12a9 9 0 11-6.219-8.56">'),_=p("<div>");function h(){return typeof window<"u"&&"speechSynthesis"in window}function $(e){var l;const[r]=A(e,["text","disabled","class"]),[a,t]=k(!1),[n,f]=k(!1);let i,u,d;const R=()=>!!e.onSynthesize||h(),v=()=>n()?"Synthesizing...":a()?"Stop":"Read aloud";function S(){u&&(URL.revokeObjectURL(u),u=void 0)}function C(){!h()||!r.text||(window.speechSynthesis.cancel(),d=new SpeechSynthesisUtterance(r.text),d.onend=()=>t(!1),d.onerror=()=>t(!1),t(!0),window.speechSynthesis.speak(d))}async function U(){var s;if(!(!e.onSynthesize||!r.text)){f(!0);try{const c=await e.onSynthesize(r.text);(s=e.onSynthesized)==null||s.call(e,c),S(),u=URL.createObjectURL(c),i??(i=new Audio),i.src=u,i.onended=()=>t(!1),i.onerror=()=>t(!1),t(!0),await i.play()}catch{t(!1)}finally{f(!1)}}}function g(){e.onSynthesize?U():C()}function y(){e.onSynthesize?i&&(i.pause(),i.currentTime=0):h()&&window.speechSynthesis.cancel(),t(!1)}function j(){e.onSynthesize?i?.pause():h()&&window.speechSynthesis.pause()}function B(){e.onSynthesize?i?.play():h()&&window.speechSynthesis.resume()}function L(){a()?y():g()}z(m(a,s=>{var c;(c=e.onSpeakingChange)==null||c.call(e,s)},{defer:!0})),z(m(()=>r.text,s=>{e.autoplay&&s&&g()},{defer:!0})),(l=e.controllerRef)==null||l.call(e,{speak:g,pause:j,resume:B,stop:y}),q(()=>{y(),S()});const M=()=>P(),O=()=>V(),T=()=>W();return(()=>{var s=_();return D(s,o(N,{get content(){return v()},get children(){return o(I,{part:"button",variant:"ghost",size:"icon-sm",get"aria-label"(){return v()},get"aria-pressed"(){return a()},onClick:L,get disabled(){return r.disabled||!R()||n()},get class(){return b("relative z-10 rounded-full transition-all duration-300")},get children(){return[o(w,{get when(){return n()},get children(){return o(T,{})}}),o(w,{get when(){return x(()=>!n())()&&a()},get children(){return o(O,{})}}),o(w,{get when(){return x(()=>!n())()&&!a()},get children(){return o(M,{})}})]}})}})),E(()=>F(s,b("relative inline-flex items-center justify-center",r.class))),s})()}G("kai-voice-output",{text:"",autoplay:!1,synthesize:void 0,disabled:!1},(e,{dispatch:l,flag:r,expose:a})=>{let t;return a({speak:()=>t?.speak(),pause:()=>t?.pause(),resume:()=>t?.resume(),stop:()=>t?.stop()}),o($,{get text(){return e.text??""},get autoplay(){return r("autoplay")},get disabled(){return r("disabled")},get onSynthesize(){return e.synthesize?n=>e.synthesize(n):void 0},onSpeakingChange:n=>l("kai-speaking-change",{speaking:n}),onSynthesized:n=>l("kai-synthesized",{blob:n}),controllerRef:n=>t=n})});