@keyframelabs/elements 0.4.0 → 0.5.0

package/dist/index.js

@@ -1,30 +1,30 @@
-import { createClient as v } from "@keyframelabs/sdk";
-const u = 24e3;
-function w(s) {
+import { createClient as T } from "@keyframelabs/sdk";
+const h = 24e3;
+function _(s) {
   const e = atob(s), t = new Uint8Array(e.length);
   for (let i = 0; i < e.length; i++)
     t[i] = e.charCodeAt(i);
   return t;
 }
-function y(s) {
+function b(s) {
   let e = "";
   for (let t = 0; t < s.length; t++)
     e += String.fromCharCode(s[t]);
   return btoa(e);
 }
-function g(s, e, t) {
+function u(s, e, t) {
   if (e === t)
     return s;
-  const i = new Int16Array(s.buffer, s.byteOffset, s.length / 2), n = e / t, o = Math.floor(i.length / n), r = new Int16Array(o);
-  for (let l = 0; l < o; l++) {
-    const a = l * n, c = Math.floor(a), C = Math.min(c + 1, i.length - 1), m = a - c;
-    r[l] = Math.round(
-      i[c] * (1 - m) + i[C] * m
+  const i = new Int16Array(s.buffer, s.byteOffset, s.length / 2), n = e / t, o = Math.floor(i.length / n), c = new Int16Array(o);
+  for (let d = 0; d < o; d++) {
+    const w = d * n, p = Math.floor(w), O = Math.min(p + 1, i.length - 1), y = w - p;
+    c[d] = Math.round(
+      i[p] * (1 - y) + i[O] * y
     );
   }
-  return new Uint8Array(r.buffer);
+  return new Uint8Array(c.buffer);
 }
-function x() {
+function L() {
   const s = /* @__PURE__ */ new Map();
   return {
     on(e, t) {
@@ -41,7 +41,7 @@ function x() {
     }
   };
 }
-function E(s) {
+function A(s) {
   const e = new Int16Array(s.length);
   for (let t = 0; t < s.length; t++) {
     const i = Math.max(-1, Math.min(1, s[t]));
@@ -49,12 +49,49 @@ function E(s) {
   }
   return new Uint8Array(e.buffer);
 }
-const A = 16e3;
-class S {
+const I = "pcm-capture", P = `
+class PcmCaptureProcessor extends AudioWorkletProcessor {
+  constructor() {
+    super();
+    this._buf = new Float32Array(1024);
+    this._pos = 0;
+  }
+  process(inputs) {
+    const ch = inputs[0]?.[0];
+    if (!ch) return true;
+    let i = 0;
+    while (i < ch.length) {
+      const n = Math.min(this._buf.length - this._pos, ch.length - i);
+      this._buf.set(ch.subarray(i, i + n), this._pos);
+      this._pos += n;
+      i += n;
+      if (this._pos >= this._buf.length) {
+        this.port.postMessage(this._buf);
+        this._buf = new Float32Array(1024);
+        this._pos = 0;
+      }
+    }
+    return true;
+  }
+}
+registerProcessor('${I}', PcmCaptureProcessor);
+`;
+let g = null;
+async function x(s) {
+  return g || (g = URL.createObjectURL(
+    new Blob([P], { type: "application/javascript" })
+  )), await s.audioWorklet.addModule(g), new AudioWorkletNode(s, I, {
+    numberOfInputs: 1,
+    numberOfOutputs: 1,
+    channelCount: 1
+  });
+}
+const M = 16e3;
+class v {
   ws = null;
   _state = "idle";
-  events = x();
-  inputSampleRate = A;
+  events = L();
+  inputSampleRate = M;
   /** Current agent state */
   get state() {
     return this._state;
@@ -113,8 +150,8 @@ class S {
     this.events.emit("closed", { code: e, reason: t });
   }
 }
-const I = ["neutral", "angry", "sad", "happy"], T = "wss://api.elevenlabs.io/v1/convai/conversation";
-class M extends S {
+const N = ["neutral", "angry", "sad", "happy"], B = "wss://api.elevenlabs.io/v1/convai/conversation";
+class F extends v {
   agentName = "ElevenLabs";
   outputSampleRate = 24e3;
   // Default, updated from metadata
@@ -139,7 +176,7 @@ class M extends S {
       throw new Error("ElevenLabs agent ID or signed URL is required");
     e.inputSampleRate && (this.sourceInputSampleRate = e.inputSampleRate);
     let t;
-    return e.signedUrl ? t = e.signedUrl : (t = `${T}?agent_id=${e.agentId}`, e.apiKey && (t += `&xi-api-key=${e.apiKey}`)), new Promise((i, n) => {
+    return e.signedUrl ? t = e.signedUrl : (t = `${B}?agent_id=${e.agentId}`, e.apiKey && (t += `&xi-api-key=${e.apiKey}`)), new Promise((i, n) => {
       this.ws = new WebSocket(t), this.ws.onopen = () => {
         this.setState("listening"), i();
       }, this.ws.onerror = () => {
@@ -205,9 +242,9 @@ class M extends S {
     if (!t?.audio_base_64 || (t.event_id ?? 0) <= this.lastInterruptId)
       return;
     this._state !== "speaking" && (this.events.emit("turnStart", void 0), this.setState("speaking"));
-    let n = w(t.audio_base_64);
-    this.outputSampleRate !== u && (n = g(n, this.outputSampleRate, u)), this.events.emit("audio", n);
-    const o = n.length / 2 / u * 1e3;
+    let n = _(t.audio_base_64);
+    this.outputSampleRate !== h && (n = u(n, this.outputSampleRate, h)), this.events.emit("audio", n);
+    const o = n.length / 2 / h * 1e3;
     this.turnStartTime === 0 && (this.turnStartTime = Date.now()), this.accumulatedDurationMs += o, console.debug(
       `[ElevenLabs] audio chunk: ${n.length} bytes, +${o.toFixed(0)}ms, totalDuration=${this.accumulatedDurationMs.toFixed(0)}ms, agentResponse=${this.agentResponseReceived}`
     ), this.scheduleVirtualBufferCheck();
@@ -253,7 +290,7 @@ class M extends S {
     if (t) {
       if (t.tool_name === "set_emotion") {
         const i = t.parameters?.emotion?.toLowerCase();
-        i && I.includes(i) && this.events.emit("emotion", i);
+        i && N.includes(i) && this.events.emit("emotion", i);
       }
       this.ws && this.ws.readyState === WebSocket.OPEN && this.ws.send(JSON.stringify({
         type: "client_tool_result",
@@ -273,8 +310,8 @@ class M extends S {
     if (!this.ws || this.ws.readyState !== WebSocket.OPEN || !this.initialized)
       return;
     let t = e;
-    this.sourceInputSampleRate !== this.expectedInputSampleRate && (t = g(e, this.sourceInputSampleRate, this.expectedInputSampleRate)), this.ws.send(JSON.stringify({
-      user_audio_chunk: y(t)
+    this.sourceInputSampleRate !== this.expectedInputSampleRate && (t = u(e, this.sourceInputSampleRate, this.expectedInputSampleRate)), this.ws.send(JSON.stringify({
+      user_audio_chunk: b(t)
     }));
   }
   /**
@@ -307,7 +344,7 @@ class M extends S {
     this.initialized = !1, this.lastInterruptId = 0, this.resetTurnState(), super.close();
   }
 }
-const R = ["neutral", "angry", "sad", "happy"], O = "wss://api.openai.com/v1/realtime", N = "gpt-realtime", p = 24e3, B = {
+const D = ["neutral", "angry", "sad", "happy"], j = "wss://api.openai.com/v1/realtime", U = "gpt-realtime", m = 24e3, z = {
   type: "function",
   name: "set_emotion",
   description: "Set the emotional expression of the avatar. Call this on every turn to reflect the tone of your response.",
@@ -323,7 +360,7 @@ const R = ["neutral", "angry", "sad", "happy"], O = "wss://api.openai.com/v1/rea
     required: ["emotion"]
   }
 };
-class L extends S {
+class $ extends v {
   agentName = "OpenAIRealtime";
   connectResolve = null;
   connectReject = null;
@@ -341,20 +378,20 @@ class L extends S {
     if (!e.apiKey)
       throw new Error("OpenAI Realtime token is required");
     e.inputSampleRate && (this.sourceInputSampleRate = e.inputSampleRate);
-    const t = e.model ?? N;
+    const t = e.model ?? U;
     return this.initialSessionUpdate = this.buildSessionUpdate(e, t), new Promise((i, n) => {
       this.connectResolve = i, this.connectReject = n, this.connectTimeout = setTimeout(() => {
         this.rejectPendingConnect(new Error("Timed out waiting for OpenAI Realtime session setup")), this.close();
       }, 1e4), this.ws = new WebSocket(
-        `${O}?model=${encodeURIComponent(t)}`,
+        `${j}?model=${encodeURIComponent(t)}`,
         ["realtime", `openai-insecure-api-key.${e.apiKey}`]
       ), this.ws.onopen = () => {
       }, this.ws.onerror = () => {
         this.rejectPendingConnect(new Error("Failed to connect to OpenAI Realtime"));
       }, this.ws.onclose = (o) => {
         if (this.clearConnectTimeout(), this.connectReject) {
-          const r = o.reason ? `: ${o.reason}` : "";
-          this.rejectPendingConnect(new Error(`OpenAI Realtime closed before initialization (${o.code}${r})`));
+          const c = o.reason ? `: ${o.reason}` : "";
+          this.rejectPendingConnect(new Error(`OpenAI Realtime closed before initialization (${o.code}${c})`));
         }
         this.resetTurnState(), this.initialSessionUpdate = null, this.ws = null, this.setState("idle"), this.emitClosed(o.code, o.reason);
       }, this.ws.onmessage = (o) => {
@@ -385,7 +422,7 @@ class L extends S {
           }
           this.currentResponseHasAudio = !0, this.events.emit("turnStart", void 0), this.setState("speaking");
         }
-        this.events.emit("audio", w(t.delta));
+        this.events.emit("audio", _(t.delta));
         break;
       case "response.output_audio_transcript.delta":
         if (!t.delta)
@@ -424,9 +461,9 @@ class L extends S {
       return;
     }
     let t = e;
-    this.sourceInputSampleRate !== p && (t = g(e, this.sourceInputSampleRate, p)), this.ws.send(JSON.stringify({
+    this.sourceInputSampleRate !== m && (t = u(e, this.sourceInputSampleRate, m)), this.ws.send(JSON.stringify({
       type: "input_audio_buffer.append",
-      audio: y(t)
+      audio: b(t)
     }));
   }
   close() {
@@ -445,19 +482,19 @@ class L extends S {
           input: {
             format: {
               type: "audio/pcm",
-              rate: p
+              rate: m
             },
             turn_detection: i
           },
           output: {
             format: {
               type: "audio/pcm",
-              rate: u
+              rate: h
             },
             ...e.voice ? { voice: e.voice } : {}
           }
         },
-        tools: [B],
+        tools: [z],
         tool_choice: "auto"
       }
     };
@@ -470,7 +507,7 @@ class L extends S {
       this.currentResponseHasAudio && this.finishAudioTurn();
       return;
     }
-    const t = e.output.filter(D);
+    const t = e.output.filter(H);
     if (t.length > 0) {
       this.handleFunctionCalls(t);
       return;
@@ -503,7 +540,7 @@ class L extends S {
       return { error: `Unsupported function: ${e.name}` };
     try {
       const i = (e.arguments ? JSON.parse(e.arguments) : {}).emotion?.toLowerCase();
-      return i && R.includes(i) ? (this.events.emit("emotion", i), { result: "ok" }) : { error: "Invalid emotion" };
+      return i && D.includes(i) ? (this.events.emit("emotion", i), { result: "ok" }) : { error: "Invalid emotion" };
     } catch {
       return { error: "Invalid function arguments" };
     }
@@ -533,27 +570,150 @@ class L extends S {
     this.connectTimeout !== null && (clearTimeout(this.connectTimeout), this.connectTimeout = null);
   }
 }
-function D(s) {
+function H(s) {
   return s.type === "function_call";
 }
-const j = [
+const k = 16e3, W = 1e4, V = 1e4, K = ["neutral", "angry", "sad", "happy"];
+class J extends v {
+  agentName = "KflVoiceAgent";
+  connectResolve = null;
+  connectReject = null;
+  connectTimeout = null;
+  pingInterval = null;
+  sourceInputSampleRate = M;
+  turnEnded = !1;
+  async connect(e) {
+    if (this.ws)
+      throw new Error("Already connected");
+    if (!e.wsUrl)
+      throw new Error("KFL voice agent wsUrl is required");
+    return e.inputSampleRate && (this.sourceInputSampleRate = e.inputSampleRate), new Promise((t, i) => {
+      this.connectResolve = t, this.connectReject = i, this.connectTimeout = setTimeout(() => {
+        this.rejectPendingConnect(new Error("Timed out waiting for kfl-voice-agent session.ready")), this.close();
+      }, V), this.ws = new WebSocket(e.wsUrl), this.ws.onopen = () => {
+        this.startPings(e.pingIntervalMs);
+      }, this.ws.onerror = () => {
+        this.rejectPendingConnect(new Error("Failed to connect to kfl-voice-agent"));
+      }, this.ws.onclose = (n) => {
+        if (this.stopPings(), this.connectReject) {
+          const o = n.reason ? `: ${n.reason}` : "";
+          this.rejectPendingConnect(
+            new Error(`kfl-voice-agent closed before initialization (${n.code}${o})`)
+          );
+        }
+        this.ws = null, this.setState("idle"), this.emitClosed(n.code, n.reason);
+      }, this.ws.onmessage = (n) => {
+        this.handleMessage(n.data);
+      };
+    });
+  }
+  sendAudio(e) {
+    if (!this.ws || this.ws.readyState !== WebSocket.OPEN) {
+      console.warn("[KflVoiceAgent] Cannot send audio: not connected");
+      return;
+    }
+    let t = e;
+    this.sourceInputSampleRate !== k && (t = u(e, this.sourceInputSampleRate, k)), this.ws.send(JSON.stringify({
+      type: "input_audio_buffer.append",
+      audio: b(t)
+    }));
+  }
+  close() {
+    this.rejectPendingConnect(new Error("Connection closed")), this.clearConnectTimeout(), this.stopPings(), super.close();
+  }
+  handleParsedMessage(e) {
+    const t = e, i = t.type;
+    if (i)
+      switch (i) {
+        case "session.ready":
+          this.setState("listening"), this.resolvePendingConnect();
+          break;
+        case "session.pong":
+          break;
+        case "turn_start":
+          this.turnEnded = !1, this.events.emit("turnStart", void 0), this.setState("speaking");
+          break;
+        case "output_audio.chunk":
+          t.audio && this.events.emit("audio", _(t.audio));
+          break;
+        case "output_audio.done":
+          this.turnEnded || (this.turnEnded = !0, this.events.emit("turnEnd", void 0));
+          break;
+        case "playback_done":
+          this.turnEnded || (this.turnEnded = !0, this.events.emit("turnEnd", void 0)), this.setState("listening");
+          break;
+        case "interrupted":
+          this.turnEnded = !0, this.events.emit("interrupted", void 0), this.setState("listening");
+          break;
+        case "user_transcript":
+          t.text && this.events.emit("transcript", {
+            role: "user",
+            text: t.text,
+            isFinal: !0
+          });
+          break;
+        case "assistant_done":
+          t.text && this.events.emit("transcript", {
+            role: "assistant",
+            text: t.text,
+            isFinal: !0
+          });
+          break;
+        case "emotion":
+          t.emotion && K.includes(t.emotion) && this.events.emit("emotion", t.emotion);
+          break;
+        case "error": {
+          const n = t.message ?? "Unknown kfl-voice-agent error";
+          this.rejectPendingConnect(new Error(n)), console.error("[KflVoiceAgent] Server error:", t);
+          break;
+        }
+      }
+  }
+  startPings(e) {
+    this.stopPings();
+    const t = e ?? W;
+    this.pingInterval = setInterval(() => {
+      !this.ws || this.ws.readyState !== WebSocket.OPEN || this.ws.send(JSON.stringify({ type: "session.ping" }));
+    }, t);
+  }
+  stopPings() {
+    this.pingInterval && (clearInterval(this.pingInterval), this.pingInterval = null);
+  }
+  clearConnectTimeout() {
+    this.connectTimeout && (clearTimeout(this.connectTimeout), this.connectTimeout = null);
+  }
+  resolvePendingConnect() {
+    this.clearConnectTimeout();
+    const e = this.connectResolve;
+    this.connectResolve = null, this.connectReject = null, e?.();
+  }
+  rejectPendingConnect(e) {
+    this.clearConnectTimeout();
+    const t = this.connectReject;
+    this.connectResolve = null, this.connectReject = null, t?.(e);
+  }
+}
+const q = [
   { id: "elevenlabs", name: "ElevenLabs", description: "ElevenLabs Conversational AI" },
-  { id: "openai", name: "OpenAI Realtime", description: "OpenAI Realtime API" }
+  { id: "openai", name: "OpenAI Realtime", description: "OpenAI Realtime API" },
+  { id: "kfl", name: "KFL Voice Agent", description: "kfl-voice-agent WebSocket API" }
 ];
-function k(s) {
+function R(s) {
   switch (s) {
     case "elevenlabs":
-      return new M();
+      return new F();
     case "openai":
-      return new L();
+      return new $();
+    case "kfl":
+      return new J();
     default:
       throw new Error(`Unknown agent type: ${s}`);
   }
 }
-function X(s) {
-  return j.find((e) => e.id === s);
+function _e(s) {
+  return q.find((e) => e.id === s);
 }
-class F extends Error {
+class G extends Error {
   status;
   payload;
   url;
@@ -561,8 +721,8 @@ class F extends Error {
     super(e.message), this.name = "ApiError", this.status = e.status, this.payload = e.payload, this.url = e.url;
   }
 }
-const d = /* @__PURE__ */ new Set();
-class P {
+const r = /* @__PURE__ */ new Set();
+class Y {
   apiBaseUrl;
   publishableKey;
   callbacks;
@@ -606,31 +766,31 @@ class P {
   }
   /** Connect to the embed session */
   async connect() {
-    if (d.has(this.publishableKey)) {
+    if (r.has(this.publishableKey)) {
       console.log("[PersonaEmbed] Connection already in progress, skipping");
       return;
     }
-    d.add(this.publishableKey), this.mounted = !0, this.abortController = new AbortController(), this.setStatus("connecting");
+    r.add(this.publishableKey), this.mounted = !0, this.abortController = new AbortController(), this.setStatus("connecting");
     try {
       const e = await this.fetchSession(this.abortController.signal);
       if (!this.mounted) {
-        d.delete(this.publishableKey);
+        r.delete(this.publishableKey);
         return;
       }
       if (await this.initSession(e), await this.initMicrophone(), await this.connectAgent(e.voice_agent_details), !this.mounted) {
-        this.cleanup(), d.delete(this.publishableKey);
+        this.cleanup(), r.delete(this.publishableKey);
         return;
       }
       this.setStatus("connected");
     } catch (e) {
-      if (d.delete(this.publishableKey), e instanceof Error && e.name === "AbortError")
+      if (r.delete(this.publishableKey), e instanceof Error && e.name === "AbortError")
         return;
       console.error("[PersonaEmbed]", e), this.mounted && (this.setStatus("error"), this.callbacks.onError?.(e));
     }
   }
   /** Disconnect and cleanup */
   disconnect() {
-    this.mounted = !1, this.abortController?.abort(), this.abortController = null, d.delete(this.publishableKey), this.cleanup(), this.setStatus("disconnected");
+    this.mounted = !1, this.abortController?.abort(), this.abortController = null, r.delete(this.publishableKey), this.cleanup(), this.setStatus("disconnected");
   }
   /** Toggle microphone mute */
   toggleMute() {
@@ -655,7 +815,7 @@ class P {
         i = await t.json();
       } catch {
       }
-      throw new F({
+      throw new G({
         message: i?.message ?? "create_session failed",
         status: t.status,
         payload: i,
@@ -669,7 +829,7 @@ class P {
     return t.json();
   }
   async initSession(e) {
-    this.session = v({
+    this.session = T({
       serverUrl: e.session_details.server_url,
       participantToken: e.session_details.participant_token,
       agentIdentity: e.session_details.agent_identity,
@@ -681,7 +841,7 @@ class P {
         });
       },
       onStateChange: (t) => {
-        this.mounted && t === "disconnected" && (this.setStatus("disconnected"), this.callbacks.onDisconnect?.());
+        this.mounted && t === "disconnected" && (this.disconnect(), this.callbacks.onDisconnect?.());
       },
       onAgentStateChange: (t) => {
         this.mounted && this.setAgentState(t);
@@ -692,10 +852,10 @@ class P {
       onClose: () => {
         this.mounted && this.callbacks.onDisconnect?.();
       }
-    }), this.agent = k(e.voice_agent_details.type), this.agent.on("audio", (t) => this.session?.sendAudio(t)), this.agent.on("turnEnd", () => this.session?.endAudioTurn()), this.agent.on("interrupted", () => {
+    }), this.agent = R(e.voice_agent_details.type), this.agent.on("audio", (t) => this.session?.sendAudio(t)), this.agent.on("turnEnd", () => this.session?.endAudioTurn()), this.agent.on("interrupted", () => {
       this.session?.endAudioTurn(), this.session?.interrupt();
     }), this.agent.on("closed", () => {
-      this.mounted && this.callbacks.onDisconnect?.();
+      this.mounted && (this.disconnect(), this.callbacks.onDisconnect?.());
     }), this.agent.on("emotion", (t) => this.session?.setEmotion(t)), await this.session.connect();
   }
   async initMicrophone() {
@@ -703,9 +863,9 @@ class P {
       audio: { sampleRate: 16e3, echoCancellation: !0, noiseSuppression: !0 }
     }), this.audioContext = new AudioContext({ sampleRate: 16e3 });
     const e = this.audioContext.createMediaStreamSource(this.stream);
-    this.processor = this.audioContext.createScriptProcessor(4096, 1, 1), this.processor.onaudioprocess = (t) => {
+    this.processor = await x(this.audioContext), this.processor.port.onmessage = (t) => {
       if (!this._isMuted) {
-        const i = E(t.inputBuffer.getChannelData(0));
+        const i = A(t.data);
         this.agent?.sendAudio(i);
       }
     }, e.connect(this.processor), this.processor.connect(this.audioContext.destination);
@@ -713,24 +873,35 @@ class P {
   async connectAgent(e) {
     if (!this.agent) return;
     const t = { inputSampleRate: 16e3 };
-    e.type === "elevenlabs" ? await this.agent.connect({
-      ...t,
-      agentId: e.agent_id,
-      signedUrl: e.signed_url
-    }) : e.type === "openai" && await this.agent.connect({
-      ...t,
-      apiKey: e.token,
-      systemPrompt: e.system_prompt,
-      voice: e.voice,
-      turnDetection: e.turn_detection
-    });
+    if (e.type === "elevenlabs")
+      await this.agent.connect({
+        ...t,
+        agentId: e.agent_id,
+        signedUrl: e.signed_url
+      });
+    else if (e.type === "openai")
+      await this.agent.connect({
+        ...t,
+        apiKey: e.token,
+        systemPrompt: e.system_prompt,
+        voice: e.voice,
+        turnDetection: e.turn_detection
+      });
+    else if (e.type === "kfl") {
+      if (!e.signed_url)
+        throw new Error("KFL voice agent requires signed_url");
+      await this.agent.connect({
+        ...t,
+        wsUrl: e.signed_url
+      });
+    }
   }
   cleanup() {
     this.stream?.getTracks().forEach((e) => e.stop()), this.processor?.disconnect(), this.audioContext?.close(), this.agent?.close(), this.session?.close(), this.stream = null, this.processor = null, this.audioContext = null, this.agent = null, this.session = null;
   }
 }
-const h = /* @__PURE__ */ new Set();
-class Q {
+const l = /* @__PURE__ */ new Set();
+class be {
   voiceAgentDetails;
   sessionDetails;
   callbacks;
@@ -774,24 +945,24 @@ class Q {
   }
   /** Connect to the session */
   async connect() {
-    if (h.has(this.connectionId)) {
+    if (l.has(this.connectionId)) {
       console.log("[PersonaView] Connection already in progress, skipping");
       return;
     }
-    h.add(this.connectionId), this.mounted = !0, this.setStatus("connecting");
+    l.add(this.connectionId), this.mounted = !0, this.setStatus("connecting");
     try {
       if (await this.initSession(), await this.initMicrophone(), await this.connectAgent(), !this.mounted) {
-        this.cleanup(), h.delete(this.connectionId);
+        this.cleanup(), l.delete(this.connectionId);
         return;
       }
       this.setStatus("connected");
     } catch (e) {
-      h.delete(this.connectionId), console.error("[PersonaView]", e), this.mounted && (this.setStatus("error"), this.callbacks.onError?.(e));
+      l.delete(this.connectionId), console.error("[PersonaView]", e), this.mounted && (this.setStatus("error"), this.callbacks.onError?.(e));
     }
   }
   /** Disconnect and cleanup */
   disconnect() {
-    this.mounted = !1, h.delete(this.connectionId), this.cleanup(), this.setStatus("disconnected");
+    this.mounted = !1, l.delete(this.connectionId), this.cleanup(), this.setStatus("disconnected");
   }
   /** Toggle microphone mute */
   toggleMute() {
@@ -804,7 +975,7 @@ class Q {
     this._agentState !== e && (this._agentState = e, this.callbacks.onAgentStateChange?.(e));
   }
   async initSession() {
-    this.session = v({
+    this.session = T({
       serverUrl: this.sessionDetails.server_url,
       participantToken: this.sessionDetails.participant_token,
       agentIdentity: this.sessionDetails.agent_identity,
@@ -816,7 +987,7 @@ class Q {
         });
       },
       onStateChange: (e) => {
-        this.mounted && e === "disconnected" && (this.setStatus("disconnected"), this.callbacks.onDisconnect?.());
+        this.mounted && e === "disconnected" && (this.disconnect(), this.callbacks.onDisconnect?.());
       },
       onAgentStateChange: (e) => {
         this.mounted && this.setAgentState(e);
@@ -827,10 +998,10 @@ class Q {
       onClose: () => {
         this.mounted && this.callbacks.onDisconnect?.();
       }
-    }), this.agent = k(this.voiceAgentDetails.type), this.agent.on("audio", (e) => this.session?.sendAudio(e)), this.agent.on("turnEnd", () => this.session?.endAudioTurn()), this.agent.on("interrupted", () => {
+    }), this.agent = R(this.voiceAgentDetails.type), this.agent.on("audio", (e) => this.session?.sendAudio(e)), this.agent.on("turnEnd", () => this.session?.endAudioTurn()), this.agent.on("interrupted", () => {
       this.session?.endAudioTurn(), this.session?.interrupt();
     }), this.agent.on("closed", () => {
-      this.mounted && this.callbacks.onDisconnect?.();
+      this.mounted && (this.disconnect(), this.callbacks.onDisconnect?.());
     }), this.agent.on("emotion", (e) => this.session?.setEmotion(e)), await this.session.connect();
   }
   async initMicrophone() {
@@ -838,9 +1009,9 @@ class Q {
       audio: { sampleRate: 16e3, echoCancellation: !0, noiseSuppression: !0 }
     }), this.audioContext = new AudioContext({ sampleRate: 16e3 });
     const e = this.audioContext.createMediaStreamSource(this.stream);
-    this.processor = this.audioContext.createScriptProcessor(4096, 1, 1), this.processor.onaudioprocess = (t) => {
+    this.processor = await x(this.audioContext), this.processor.port.onmessage = (t) => {
       if (!this._isMuted) {
-        const i = E(t.inputBuffer.getChannelData(0));
+        const i = A(t.data);
         this.agent?.sendAudio(i);
       }
     }, e.connect(this.processor), this.processor.connect(this.audioContext.destination);
@@ -848,23 +1019,34 @@ class Q {
   async connectAgent() {
     if (!this.agent) return;
     const e = this.voiceAgentDetails, t = { inputSampleRate: 16e3 };
-    e.type === "elevenlabs" ? await this.agent.connect({
-      ...t,
-      agentId: e.agent_id,
-      signedUrl: e.signed_url
-    }) : e.type === "openai" && await this.agent.connect({
-      ...t,
-      apiKey: e.token,
-      systemPrompt: e.system_prompt,
-      voice: e.voice,
-      turnDetection: e.turn_detection
-    });
+    if (e.type === "elevenlabs")
+      await this.agent.connect({
+        ...t,
+        agentId: e.agent_id,
+        signedUrl: e.signed_url
+      });
+    else if (e.type === "openai")
+      await this.agent.connect({
+        ...t,
+        apiKey: e.token,
+        systemPrompt: e.system_prompt,
+        voice: e.voice,
+        turnDetection: e.turn_detection
+      });
+    else if (e.type === "kfl") {
+      if (!e.signed_url)
+        throw new Error("KFL voice agent requires signed_url");
+      await this.agent.connect({
+        ...t,
+        wsUrl: e.signed_url
+      });
+    }
   }
   cleanup() {
     this.stream?.getTracks().forEach((e) => e.stop()), this.processor?.disconnect(), this.audioContext?.close(), this.agent?.close(), this.session?.close(), this.stream = null, this.processor = null, this.audioContext = null, this.agent = null, this.session = null;
   }
 }
-const f = ["minimized", "active", "hidden"], U = ["bottom-right", "bottom-left", "top-right", "top-left"], z = [
+const f = ["minimized", "active", "hidden"], Z = ["bottom-right", "bottom-left", "top-right", "top-left"], X = [
   "publishable-key",
   "api-base-url",
   "initial-state",
@@ -881,14 +1063,15 @@ const f = ["minimized", "active", "hidden"], U = ["bottom-right", "bottom-left",
   "button-color",
   "button-color-opacity",
   "video-fit",
-  "preview-image"
-], b = "https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap";
-function $() {
-  if (document.querySelector(`link[href="${b}"]`)) return;
+  "preview-image",
+  "call-to-action"
+], E = "https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap";
+function Q() {
+  if (document.querySelector(`link[href="${E}"]`)) return;
   const s = document.createElement("link");
-  s.rel = "stylesheet", s.href = b, document.head.appendChild(s);
+  s.rel = "stylesheet", s.href = E, document.head.appendChild(s);
 }
-const H = `
+const ee = `
 :host {
   display: block;
   font-family: 'Noto Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
@@ -1143,16 +1326,33 @@ const H = `
   opacity: 1;
   transform: translateY(0);
 }
-`, V = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="23 7 16 12 23 17 23 7"/><rect x="1" y="5" width="15" height="14" rx="2" ry="2"/></svg>', K = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10.68 13.31a16 16 0 0 0 3.41 2.6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7 2 2 0 0 1 1.72 2v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.42 19.42 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91"/><line x1="23" y1="1" x2="1" y2="23"/></svg>', J = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="4 14 10 14 10 20"/><polyline points="20 10 14 10 14 4"/><line x1="14" y1="10" x2="21" y2="3"/><line x1="3" y1="21" x2="10" y2="14"/></svg>', W = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>', q = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="15 18 9 12 15 6"/></svg>', G = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 18 15 12 9 6"/></svg>', _ = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2a3 3 0 0 0-3 3v7a3 3 0 0 0 6 0V5a3 3 0 0 0-3-3Z"/><path d="M19 10v2a7 7 0 0 1-14 0v-2"/><line x1="12" x2="12" y1="19" y2="22"/></svg>', Y = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="2" x2="22" y1="2" y2="22"/><path d="M18.89 13.23A7.12 7.12 0 0 0 19 12v-2"/><path d="M5 10v2a7 7 0 0 0 12 5"/><path d="M15 9.34V5a3 3 0 0 0-5.68-1.33"/><path d="M9 9v3a3 3 0 0 0 5.12 2.12"/><line x1="12" x2="12" y1="19" y2="22"/></svg>';
-class ee extends HTMLElement {
+`, te = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="23 7 16 12 23 17 23 7"/><rect x="1" y="5" width="15" height="14" rx="2" ry="2"/></svg>', ie = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10.68 13.31a16 16 0 0 0 3.41 2.6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7 2 2 0 0 1 1.72 2v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.42 19.42 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91"/><line x1="23" y1="1" x2="1" y2="23"/></svg>', ne = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="4 14 10 14 10 20"/><polyline points="20 10 14 10 14 4"/><line x1="14" y1="10" x2="21" y2="3"/><line x1="3" y1="21" x2="10" y2="14"/></svg>', se = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>', oe = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="15 18 9 12 15 6"/></svg>', re = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 18 15 12 9 6"/></svg>', S = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2a3 3 0 0 0-3 3v7a3 3 0 0 0 6 0V5a3 3 0 0 0-3-3Z"/><path d="M19 10v2a7 7 0 0 1-14 0v-2"/><line x1="12" x2="12" y1="19" y2="22"/></svg>', ae = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="2" x2="22" y1="2" y2="22"/><path d="M18.89 13.23A7.12 7.12 0 0 0 19 12v-2"/><path d="M5 10v2a7 7 0 0 0 12 5"/><path d="M15 9.34V5a3 3 0 0 0-5.68-1.33"/><path d="M9 9v3a3 3 0 0 0 5.12 2.12"/><line x1="12" x2="12" y1="19" y2="22"/></svg>', le = "Join call", ce = 252, de = 377, he = 144, ue = 216, pe = "#676565", ge = 0.7, a = "16px", C = 40, me = `
+  <div class="kfl-widget">
+    <div class="kfl-widget-inner">
+      <img class="kfl-preview-img" alt="Persona preview" draggable="false" />
+      <div class="kfl-embed-container"></div>
+      <div class="kfl-spinner"><div class="kfl-spinner-ring"></div></div>
+      <div class="kfl-error-toast"></div>
+      <button type="button" class="kfl-join-btn"></button>
+      <div class="kfl-toolbar">
+        <button type="button" class="kfl-mic-btn"></button>
+        <button type="button" class="kfl-endcall-btn"></button>
+      </div>
+      <button type="button" class="kfl-toggle-btn"></button>
+    </div>
+    <button type="button" class="kfl-reveal-btn"></button>
+  </div>
+`;
+class ve extends HTMLElement {
   static get observedAttributes() {
-    return [...z];
+    return [...X];
   }
   shadow;
   embed = null;
   _widgetState = "minimized";
   _connected = !1;
   _connecting = !1;
+  _initialized = !1;
   widgetEl;
   innerEl;
   containerEl;
@@ -1166,25 +1366,43 @@ class ee extends HTMLElement {
   revealBtn;
   toolbarEl;
   micBtn;
+  _onJoinClick = (e) => {
+    e.stopPropagation(), this._handleJoinCall();
+  };
+  _onEndCallClick = () => this._handleEndCall();
+  _onMicClick = () => this._handleMicToggle();
+  _onToggleClick = (e) => {
+    e.stopPropagation(), this._handleToggle();
+  };
+  _onRevealClick = () => this._handleReveal();
+  _onInnerClick = (e) => this._handleInnerClick(e);
   constructor() {
     super(), this.shadow = this.attachShadow({ mode: "open" });
   }
   connectedCallback() {
-    $();
-    const e = document.createElement("style");
-    e.textContent = H, this.shadow.appendChild(e), this.widgetEl = document.createElement("div"), this.widgetEl.className = "kfl-widget", this.innerEl = document.createElement("div"), this.innerEl.className = "kfl-widget-inner", this.containerEl = document.createElement("div"), this.containerEl.className = "kfl-embed-container", this.previewImg = document.createElement("img"), this.previewImg.className = "kfl-preview-img", this.previewImg.alt = "Persona preview", this.previewImg.draggable = !1;
-    const t = this.getAttribute("preview-image");
-    t ? (this.previewImg.src = t, this.previewImg.style.display = "block") : this.previewImg.style.display = "none", this.spinnerEl = document.createElement("div"), this.spinnerEl.className = "kfl-spinner", this.spinnerEl.innerHTML = '<div class="kfl-spinner-ring"></div>', this.errorToast = document.createElement("div"), this.errorToast.className = "kfl-error-toast", this.joinBtn = document.createElement("button"), this.joinBtn.className = "kfl-join-btn", this.joinBtn.innerHTML = `${V} Join call`, this.joinBtn.addEventListener("click", () => this._handleJoinCall()), this.endCallBtn = document.createElement("button"), this.endCallBtn.className = "kfl-endcall-btn", this.endCallBtn.innerHTML = K, this.endCallBtn.addEventListener("click", () => this._handleEndCall()), this.micBtn = document.createElement("button"), this.micBtn.className = "kfl-mic-btn", this.micBtn.innerHTML = _, this.micBtn.addEventListener("click", () => this._handleMicToggle()), this.toolbarEl = document.createElement("div"), this.toolbarEl.className = "kfl-toolbar", this.toolbarEl.appendChild(this.micBtn), this.toolbarEl.appendChild(this.endCallBtn), this.toggleBtn = document.createElement("button"), this.toggleBtn.className = "kfl-toggle-btn", this.toggleBtn.addEventListener("click", () => this._handleToggle()), this.revealBtn = document.createElement("button"), this.revealBtn.className = "kfl-reveal-btn", this.revealBtn.addEventListener("click", () => this._handleReveal()), this.innerEl.appendChild(this.previewImg), this.innerEl.appendChild(this.containerEl), this.innerEl.appendChild(this.spinnerEl), this.innerEl.appendChild(this.errorToast), this.innerEl.appendChild(this.joinBtn), this.innerEl.appendChild(this.toolbarEl), this.innerEl.appendChild(this.toggleBtn), this.widgetEl.appendChild(this.innerEl), this.widgetEl.appendChild(this.revealBtn), this.shadow.appendChild(this.widgetEl);
-    const i = this.getAttribute("initial-state");
-    this._widgetState = i && f.includes(i) ? i : "minimized", this._applyState();
+    Q(), this._initialized || (this._initDom(), this._initialized = !0), this._widgetState = this._resolveInitialState(), this._applyState();
   }
   disconnectedCallback() {
-    this.errorTimer && clearTimeout(this.errorTimer), this.embed?.disconnect(), this.embed = null, this._connected = !1;
+    this.errorTimer && clearTimeout(this.errorTimer), this._disconnectSession(), this._setWidgetState("minimized", { emit: !1 });
   }
   attributeChangedCallback(e, t, i) {
-    this.widgetEl && (e === "preview-image" ? this.previewImg && (i ? (this.previewImg.src = i, this.previewImg.style.display = this._connected ? "none" : "block") : this.previewImg.style.display = "none") : e === "controlled-widget-state" && i ? (f.includes(i) && (this._widgetState = i), this._applyState()) : this._applyState());
+    if (this._initialized) {
+      if (e === "call-to-action") {
+        this._renderJoinLabel();
+        return;
+      }
+      if (e === "preview-image") {
+        this._applyPreviewImage(i);
+        return;
+      }
+      if (e === "controlled-widget-state") {
+        i && f.includes(i) ? this._setWidgetState(i, { emit: !1 }) : this._applyState();
+        return;
+      }
+      this._applyState();
+    }
   }
-  // --- Public API (LemonSlice-compatible) ---
+  // --- Public API ---
   async mute() {
     this.embed && (this.embed.audioElement.muted = !0);
   }
@@ -1198,7 +1416,7 @@ class ee extends HTMLElement {
     return this._connected;
   }
   async micOn() {
-    this._connected || (this._widgetState = "active", this._applyState(), await this._connect()), this.embed && this.embed.isMuted && this.embed.toggleMute(), this._updateMicIcon();
+    this._connected || (this._connecting = !0, this._setWidgetState("active", { emit: !1 }), await this._connect()), this.embed && this.embed.isMuted && this.embed.toggleMute(), this._updateMicIcon();
   }
   async micOff() {
     this.embed && !this.embed.isMuted && this.embed.toggleMute(), this._updateMicIcon();
@@ -1213,6 +1431,51 @@ class ee extends HTMLElement {
     console.warn("[kfl-embed] setEmotion requires direct session access (not yet exposed by PersonaEmbed)");
   }
   // --- Internals ---
+  _initDom() {
+    const e = document.createElement("style");
+    e.textContent = ee, this.shadow.appendChild(e);
+    const t = document.createElement("template");
+    t.innerHTML = me;
+    const i = t.content.cloneNode(!0);
+    this.widgetEl = this._requireElement(i, ".kfl-widget"), this.innerEl = this._requireElement(i, ".kfl-widget-inner"), this.containerEl = this._requireElement(i, ".kfl-embed-container"), this.previewImg = this._requireElement(i, ".kfl-preview-img"), this.spinnerEl = this._requireElement(i, ".kfl-spinner"), this.errorToast = this._requireElement(i, ".kfl-error-toast"), this.joinBtn = this._requireElement(i, ".kfl-join-btn"), this.toolbarEl = this._requireElement(i, ".kfl-toolbar"), this.micBtn = this._requireElement(i, ".kfl-mic-btn"), this.endCallBtn = this._requireElement(i, ".kfl-endcall-btn"), this.toggleBtn = this._requireElement(i, ".kfl-toggle-btn"), this.revealBtn = this._requireElement(i, ".kfl-reveal-btn"), this.endCallBtn.innerHTML = ie, this.micBtn.innerHTML = S, this._renderJoinLabel(), this._applyPreviewImage(this.getAttribute("preview-image")), this.joinBtn.addEventListener("click", this._onJoinClick), this.endCallBtn.addEventListener("click", this._onEndCallClick), this.micBtn.addEventListener("click", this._onMicClick), this.toggleBtn.addEventListener("click", this._onToggleClick), this.revealBtn.addEventListener("click", this._onRevealClick), this.innerEl.addEventListener("click", this._onInnerClick), this.shadow.appendChild(i);
+  }
+  _requireElement(e, t) {
+    const i = e.querySelector(t);
+    if (!i) throw new Error(`[kfl-embed] Missing template node: ${t}`);
+    return i;
+  }
+  _resolveInitialState() {
+    const e = this.getAttribute("controlled-widget-state");
+    if (e && f.includes(e))
+      return e;
+    const t = this.getAttribute("initial-state");
+    return t && f.includes(t) ? t : "minimized";
+  }
+  _renderJoinLabel() {
+    this.joinBtn.innerHTML = `${te} ${this.getAttribute("call-to-action") || le}`;
+  }
+  _applyPreviewImage(e) {
+    if (e) {
+      this.previewImg.src = e, this.previewImg.style.display = this._connected ? "none" : "block";
+      return;
+    }
+    this.previewImg.removeAttribute("src"), this.previewImg.style.display = "none";
+  }
+  _readRenderConfig() {
+    const e = this._widgetState === "minimized", t = this._widgetState === "hidden";
+    return {
+      hideUI: this.hasAttribute("hide-ui"),
+      isInline: this.hasAttribute("inline"),
+      showMin: this._shouldShowMinimizeButton(),
+      isMinimized: e,
+      isHidden: t,
+      isActive: this._widgetState === "active",
+      canExpandFromMinimized: e && this._hasLiveSession(),
+      corner: this._getCorner(),
+      buttonColor: this.getAttribute("button-color") || pe,
+      buttonOpacity: this._getAttrNum("button-color-opacity", ge)
+    };
+  }
   _getAttrNum(e, t) {
     const i = this.getAttribute(e);
     if (!i) return t;
@@ -1221,47 +1484,62 @@ class ee extends HTMLElement {
   }
   _getCorner() {
     const e = this.getAttribute("corner");
-    return e && U.includes(e) ? e : "bottom-right";
+    return e && Z.includes(e) ? e : "bottom-right";
   }
-  _applyLayout() {
+  _applyLayout(e) {
     if (!this.widgetEl) return;
-    const e = this.hasAttribute("inline"), t = this._getCorner(), i = this._widgetState === "active", n = this._widgetState === "hidden", o = 40, r = n ? o : i ? this._getAttrNum("active-width", 252) : this._getAttrNum("minimized-width", 144), l = n ? o : i ? this._getAttrNum("active-height", 377) : this._getAttrNum("minimized-height", 216);
-    if (this.widgetEl.style.width = `${r}px`, this.widgetEl.style.height = `${l}px`, e)
-      this.widgetEl.style.position = "relative", this.widgetEl.style.inset = "";
-    else {
-      this.widgetEl.style.position = "fixed", this.widgetEl.style.top = "", this.widgetEl.style.bottom = "", this.widgetEl.style.left = "", this.widgetEl.style.right = "";
-      const a = "16px";
-      t.includes("bottom") && (this.widgetEl.style.bottom = a), t.includes("top") && (this.widgetEl.style.top = a), t.includes("right") && (this.widgetEl.style.right = n ? "0" : a), t.includes("left") && (this.widgetEl.style.left = n ? "0" : a);
-    }
+    const t = e.isHidden ? C : e.isActive ? this._getAttrNum("active-width", ce) : this._getAttrNum("minimized-width", he), i = e.isHidden ? C : e.isActive ? this._getAttrNum("active-height", de) : this._getAttrNum("minimized-height", ue);
+    this.widgetEl.style.width = `${t}px`, this.widgetEl.style.height = `${i}px`, e.isInline ? (this.widgetEl.style.position = "relative", this.widgetEl.style.inset = "") : (this.widgetEl.style.position = "fixed", this.widgetEl.style.top = "", this.widgetEl.style.bottom = "", this.widgetEl.style.left = "", this.widgetEl.style.right = "", e.corner.includes("bottom") && (this.widgetEl.style.bottom = a), e.corner.includes("top") && (this.widgetEl.style.top = a), e.corner.includes("right") && (this.widgetEl.style.right = e.isHidden ? "0" : a), e.corner.includes("left") && (this.widgetEl.style.left = e.isHidden ? "0" : a));
   }
   _applyState() {
     if (!this.widgetEl) return;
-    const e = this.hasAttribute("hide-ui"), t = this._shouldShowMinimizeButton(), i = this._widgetState === "minimized", n = this._widgetState === "hidden";
-    this.widgetEl.classList.toggle("kfl-widget--hidden", n), this.joinBtn.style.display = this._connected || this._connecting || e || n ? "none" : "flex", this.toolbarEl.style.display = this._connected && !e && !i && !n ? "flex" : "none", this._updateMicIcon(), this.spinnerEl.classList.toggle("kfl-spinner--visible", this._connecting && !this._connected);
-    const o = this.getAttribute("button-color") || "#919191", r = this._getAttrNum("button-color-opacity", 0.3), l = Math.round(r * 255).toString(16).padStart(2, "0");
-    this.joinBtn.style.backgroundColor = `${o}${l}`, !e && i && t ? (this.toggleBtn.style.display = "flex", this.toggleBtn.innerHTML = W) : !e && !i && !n ? (this.toggleBtn.style.display = "flex", this.toggleBtn.innerHTML = J) : this.toggleBtn.style.display = "none";
-    const a = this._getCorner(), c = a.includes("right");
-    this.revealBtn.className = `kfl-reveal-btn ${c ? "kfl-reveal-btn--right" : "kfl-reveal-btn--left"}`, this.revealBtn.innerHTML = c ? q : G, n && (this.revealBtn.style.top = "", this.revealBtn.style.bottom = "", a.includes("bottom") ? this.revealBtn.style.bottom = "16px" : this.revealBtn.style.top = "16px"), this._applyLayout();
+    const e = this._readRenderConfig();
+    this.widgetEl.classList.toggle("kfl-widget--hidden", e.isHidden), this._renderJoinButton(e), this._renderToolbar(e), this._renderJoinButtonColor(e), this._renderToggleButton(e), this._renderRevealButton(e), this.innerEl.style.cursor = e.canExpandFromMinimized ? "pointer" : "", this.spinnerEl.classList.toggle("kfl-spinner--visible", this._connecting && !this._connected), this._updateMicIcon(), this._applyLayout(e);
+  }
+  _renderJoinButton(e) {
+    this.joinBtn.style.display = this._connected || this._connecting || e.isHidden ? "none" : "flex";
+  }
+  _renderToolbar(e) {
+    this.toolbarEl.style.display = this._connected && !e.hideUI && !e.isMinimized && !e.isHidden ? "flex" : "none";
+  }
+  _renderToggleButton(e) {
+    !e.hideUI && e.isMinimized && e.showMin && !e.isInline ? (this.toggleBtn.style.display = "flex", this.toggleBtn.innerHTML = se) : !e.hideUI && !e.isMinimized && !e.isHidden && this._connected ? (this.toggleBtn.style.display = "flex", this.toggleBtn.innerHTML = ne) : this.toggleBtn.style.display = "none";
+  }
+  _renderRevealButton(e) {
+    const t = e.corner.includes("right");
+    this.revealBtn.className = `kfl-reveal-btn ${t ? "kfl-reveal-btn--right" : "kfl-reveal-btn--left"}`, this.revealBtn.innerHTML = t ? oe : re, e.isHidden && (this.revealBtn.style.top = "", this.revealBtn.style.bottom = "", e.corner.includes("bottom") ? this.revealBtn.style.bottom = a : this.revealBtn.style.top = a);
+  }
+  _renderJoinButtonColor(e) {
+    const t = Math.max(0, Math.min(1, e.buttonOpacity)), i = Math.round(t * 255).toString(16).padStart(2, "0");
+    this.joinBtn.style.backgroundColor = `${e.buttonColor}${i}`;
   }
   _shouldShowMinimizeButton() {
     const e = this.getAttribute("controlled-show-minimize-button");
     return e !== null ? e !== "false" : this.getAttribute("show-minimize-button") !== "false";
   }
   _handleJoinCall() {
-    this._widgetState = "active", this._connecting = !0, this._applyState(), this._connect();
+    this._connecting = !0, this._setWidgetState("active", { emit: !1 }), this._connect();
   }
   _handleToggle() {
     if (this._widgetState === "minimized") {
       if (this.hasAttribute("inline")) return;
-      this._widgetState = "hidden", this.dispatchEvent(new CustomEvent("widgetstatechange", { detail: { state: "hidden" } }));
-    } else this._widgetState === "active" && (this.embed?.disconnect(), this._connected = !1, this._connecting = !1, this.embed = null, this._widgetState = "minimized", this.getAttribute("preview-image") && (this.previewImg.style.display = "block"), this.dispatchEvent(new CustomEvent("widgetstatechange", { detail: { state: "minimized" } })));
-    this._applyState();
+      this._hasLiveSession() && this._disconnectSession(), this._setWidgetState("hidden");
+    } else this._widgetState === "active" && this._setWidgetState("minimized");
+  }
+  _handleInnerClick(e) {
+    if (this._widgetState !== "minimized" || !this._hasLiveSession()) return;
+    const t = e.composedPath();
+    t.includes(this.joinBtn) || t.includes(this.toggleBtn) || this._setWidgetState("active");
   }
   _handleEndCall() {
-    this._widgetState === "active" && (this.embed?.disconnect(), this._connected = !1, this._connecting = !1, this.embed = null, this._widgetState = "minimized", this.getAttribute("preview-image") && (this.previewImg.style.display = "block"), this.dispatchEvent(new CustomEvent("widgetstatechange", { detail: { state: "minimized" } })), this._applyState());
+    this._widgetState === "active" && (this._disconnectSession(), this._setWidgetState("minimized"));
   }
   _handleReveal() {
-    this._widgetState = "minimized", this.dispatchEvent(new CustomEvent("widgetstatechange", { detail: { state: "minimized" } })), this._applyState();
+    this._setWidgetState("minimized");
+  }
+  _setWidgetState(e, t) {
+    const i = t?.emit ?? !0, n = this._widgetState !== e;
+    this._widgetState = e, n && i && this.dispatchEvent(new CustomEvent("widgetstatechange", { detail: { state: e } })), this._applyState();
   }
   _handleMicToggle() {
     this.embed && (this.embed.toggleMute(), this._updateMicIcon());
@@ -1269,15 +1547,21 @@ class ee extends HTMLElement {
   _updateMicIcon() {
     if (!this.micBtn) return;
     const e = this.embed ? this.embed.isMuted : !1;
-    this.micBtn.innerHTML = e ? Y : _;
+    this.micBtn.innerHTML = e ? ae : S;
   }
-  _resetToMinimized() {
+  _hasLiveSession() {
+    return this._connected || this._connecting || !!this.embed;
+  }
+  _disconnectSession() {
     try {
       this.embed?.disconnect();
     } catch (e) {
       console.warn("[kfl-embed] Disconnect error:", e);
     }
-    this._connected = !1, this._connecting = !1, this.embed = null, this.containerEl.innerHTML = "", this.containerEl.removeAttribute("style"), this._widgetState = "minimized", this.getAttribute("preview-image") && (this.previewImg.style.display = "block"), this._applyState();
+    this._connected = !1, this._connecting = !1, this.embed = null, this.containerEl.innerHTML = "", this.containerEl.removeAttribute("style"), this._applyPreviewImage(this.getAttribute("preview-image"));
+  }
+  _resetToMinimized() {
+    this._disconnectSession(), this._setWidgetState("minimized", { emit: !1 });
   }
   _showError(e) {
     this.errorTimer && clearTimeout(this.errorTimer), this.errorToast.textContent = e, this.errorToast.classList.add("kfl-error-toast--visible"), this.errorTimer = setTimeout(() => {
@@ -1294,7 +1578,7 @@ class ee extends HTMLElement {
     const t = this.getAttribute("api-base-url") || void 0, i = this.getAttribute("video-fit") || "cover";
     this.previewImg.style.display = "none";
     try {
-      this.embed = new P({
+      this.embed = new Y({
         container: this.containerEl,
         publishableKey: e,
         apiBaseUrl: t,
@@ -1318,20 +1602,21 @@ class ee extends HTMLElement {
   }
 }
 export {
-  j as AGENT_REGISTRY,
-  S as BaseAgent,
-  M as ElevenLabsAgent,
-  F as KeyframeApiError,
-  ee as KflEmbedElement,
-  L as OpenAIRealtimeAgent,
-  P as PersonaEmbed,
-  Q as PersonaView,
-  u as SAMPLE_RATE,
-  w as base64ToBytes,
-  y as bytesToBase64,
-  k as createAgent,
-  x as createEventEmitter,
-  E as floatTo16BitPCM,
-  X as getAgentInfo,
-  g as resamplePcm
+  q as AGENT_REGISTRY,
+  v as BaseAgent,
+  F as ElevenLabsAgent,
+  G as KeyframeApiError,
+  J as KflAgent,
+  ve as KflEmbedElement,
+  $ as OpenAIRealtimeAgent,
+  Y as PersonaEmbed,
+  be as PersonaView,
+  h as SAMPLE_RATE,
+  _ as base64ToBytes,
+  b as bytesToBase64,
+  R as createAgent,
+  L as createEventEmitter,
+  A as floatTo16BitPCM,
+  _e as getAgentInfo,
+  u as resamplePcm
 };