vibrium-speak-sdk 1.0.0

package/dist/index.mjs

@@ -0,0 +1,1709 @@
+// src/components/FloatingMic.tsx
+import {
+  useEffect as useEffect3,
+  useState as useState4,
+  useMemo as useMemo4
+} from "react";
+import { Mic as Mic2 } from "lucide-react";
+
+// src/components/VoicePannel.tsx
+import {
+  useState,
+  useRef,
+  useEffect,
+  memo,
+  useMemo
+} from "react";
+import {
+  Mic,
+  X,
+  ChevronRight,
+  SendHorizontal,
+  Volume2,
+  VolumeX,
+  MicOff
+} from "lucide-react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function renderInline(text) {
+  const nodes = [];
+  let lastIndex = 0;
+  const boldRe = /\*\*(.+?)\*\*/g;
+  let m;
+  while ((m = boldRe.exec(text)) !== null) {
+    const idx = m.index;
+    if (idx > lastIndex) {
+      nodes.push(
+        text.slice(lastIndex, idx)
+      );
+    }
+    nodes.push(
+      /* @__PURE__ */ jsx("strong", { children: m[1] }, idx)
+    );
+    lastIndex = idx + m[0].length;
+  }
+  if (lastIndex < text.length) {
+    nodes.push(
+      text.slice(lastIndex)
+    );
+  }
+  return nodes;
+}
+function formatMessage(text) {
+  try {
+    const lines = text.split("\n");
+    const out = [];
+    let inList = [];
+    const flushList = (keyBase) => {
+      if (inList.length) {
+        out.push(
+          /* @__PURE__ */ jsx(
+            "ul",
+            {
+              className: "list-disc pl-5 ml-2 space-y-1",
+              children: inList.map(
+                (li, idx) => /* @__PURE__ */ jsx(
+                  "li",
+                  {
+                    className: "text-sm",
+                    children: li
+                  },
+                  keyBase + "-li-" + idx
+                )
+              )
+            },
+            keyBase + "-ul"
+          )
+        );
+      }
+      inList = [];
+    };
+    lines.forEach(
+      (rawLine, idx) => {
+        const line = rawLine.replace(/\r/g, "").trimEnd();
+        const hMatch = line.match(
+          /^\s*(#{1,3})\s*(.*)$/
+        );
+        if (hMatch) {
+          flushList("h" + idx);
+          const level = hMatch[1].length;
+          const content = hMatch[2];
+          const cls = "font-semibold";
+          if (level === 1) {
+            out.push(
+              /* @__PURE__ */ jsx(
+                "h1",
+                {
+                  className: "text-xl " + cls,
+                  children: renderInline(
+                    content
+                  )
+                },
+                "h1-" + idx
+              )
+            );
+          } else if (level === 2) {
+            out.push(
+              /* @__PURE__ */ jsx(
+                "h2",
+                {
+                  className: "text-lg " + cls,
+                  children: renderInline(
+                    content
+                  )
+                },
+                "h2-" + idx
+              )
+            );
+          } else {
+            out.push(
+              /* @__PURE__ */ jsx(
+                "h3",
+                {
+                  className: "text-base " + cls,
+                  children: renderInline(
+                    content
+                  )
+                },
+                "h3-" + idx
+              )
+            );
+          }
+          return;
+        }
+        const bMatch = line.match(
+          /^\s*([-\*\.]|\u2022)\s+(.*)$/
+        );
+        if (bMatch) {
+          inList.push(
+            /* @__PURE__ */ jsx(Fragment, { children: renderInline(
+              bMatch[2]
+            ) })
+          );
+          return;
+        }
+        if (line.trim() === "") {
+          flushList(
+            "empty-" + idx
+          );
+          out.push(
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: "my-2"
+              },
+              "br-" + idx
+            )
+          );
+          return;
+        }
+        flushList("p-" + idx);
+        out.push(
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: "text-sm leading-snug",
+              children: renderInline(line)
+            },
+            "p-" + idx
+          )
+        );
+      }
+    );
+    if (inList.length) {
+      out.push(
+        /* @__PURE__ */ jsx(
+          "ul",
+          {
+            className: "list-disc pl-5 ml-2 space-y-1",
+            children: inList.map(
+              (li, idx) => /* @__PURE__ */ jsx(
+                "li",
+                {
+                  className: "text-sm",
+                  children: li
+                },
+                "last-li-" + idx
+              )
+            )
+          },
+          "last-ul"
+        )
+      );
+    }
+    return out;
+  } catch {
+    return text;
+  }
+}
+var MessageBubble = memo(
+  ({
+    message
+  }) => {
+    const isUser = message.type === "user_voice" || message.type === "user_text";
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: `p-3 rounded-[16px] max-w-[85%] text-xs leading-relaxed ${isUser ? "bg-[#1a73e8] text-white self-end rounded-tr-sm shadow-md shadow-blue-500/10 border border-blue-500/10" : "bg-white text-gray-800 self-start rounded-tl-sm shadow-md shadow-slate-100 border border-slate-100"}`,
+        children: formatMessage(
+          String(
+            message.text || ""
+          )
+        )
+      }
+    );
+  }
+);
+MessageBubble.displayName = "MessageBubble";
+function VoicePanel({
+  enabled,
+  connectionState,
+  agentState = "idle",
+  messages,
+  participants = [],
+  onDisable,
+  textEnabled,
+  micMuted = false,
+  speakerMuted = false,
+  onMicMutedChange,
+  onSpeakerMutedChange,
+  onSendText
+}) {
+  const [input, setInput] = useState("");
+  const [minimized, setMinimized] = useState(false);
+  const containerRef = useRef(
+    null
+  );
+  const orderedMessages = useMemo(() => {
+    return [...messages].sort(
+      (a, b) => a.timestamp - b.timestamp
+    );
+  }, [messages]);
+  useEffect(() => {
+    const el = containerRef.current;
+    if (!el) return;
+    requestAnimationFrame(() => {
+      el.scrollTo({
+        top: el.scrollHeight,
+        behavior: "smooth"
+      });
+    });
+  }, [orderedMessages, minimized]);
+  const sendMessage = () => {
+    const text = input.trim();
+    if (!text || !onSendText) {
+      return;
+    }
+    console.log("[VoicePanel] sendMessage", text);
+    onSendText(text);
+    setInput("");
+  };
+  const handleMicClick = () => {
+    onMicMutedChange?.(
+      !micMuted
+    );
+  };
+  const handleSpeakerClick = () => {
+    onSpeakerMutedChange?.(
+      !speakerMuted
+    );
+  };
+  const handleKey = (e) => {
+    if (e.key === "Enter") {
+      e.preventDefault();
+      sendMessage();
+    }
+  };
+  const statusText = (() => {
+    if (micMuted && speakerMuted) {
+      return "Mic & Speaker muted";
+    }
+    if (micMuted) {
+      return "Mic muted";
+    }
+    if (speakerMuted) {
+      return "Speaker muted";
+    }
+    if (connectionState === "reconnecting") {
+      return "Reconnecting...";
+    }
+    if (connectionState === "connecting") {
+      return "Connecting...";
+    }
+    if (connectionState === "error") {
+      return "Connection error";
+    }
+    if (connectionState === "connected") {
+      switch (agentState) {
+        case "listening":
+          return "Listening...";
+        case "thinking":
+          return "Thinking...";
+        case "speaking":
+          return "Speaking...";
+        default:
+          return "Ready to help";
+      }
+    }
+    return "Disconnected";
+  })();
+  if (enabled && minimized) {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        onClick: () => setMinimized(
+          false
+        ),
+        className: "fixed right-6 bottom-6 z-[1100] cursor-pointer",
+        children: /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: `w-14 h-14 rounded-full flex items-center justify-center shadow-lg text-white ${connectionState === "connected" ? "bg-green-500 animate-pulse" : connectionState === "connecting" ? "bg-blue-500" : connectionState === "error" ? "bg-red-500" : "bg-blue-600"}`,
+            children: /* @__PURE__ */ jsx(Mic, { className: "h-4 w-4" })
+          }
+        )
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs("div", { className: "fixed bottom-24 right-6 w-80 bg-white shadow-xl rounded-[20px] flex flex-col z-[1100] border border-gray-100/80 overflow-hidden font-sans", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between p-4 bg-[#1a73e8] text-white", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+        /* @__PURE__ */ jsx("div", { className: "w-9 h-9 rounded-full bg-white/15 flex items-center justify-center relative shrink-0", children: /* @__PURE__ */ jsxs("div", { className: "relative flex items-center justify-center w-2.5 h-2.5", children: [
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: `w-2.5 h-2.5 rounded-full transition-colors duration-300 ${connectionState === "connected" ? "bg-[#fbbc05]" : connectionState === "connecting" || connectionState === "reconnecting" ? "bg-yellow-400 animate-pulse" : connectionState === "error" ? "bg-red-500" : "bg-gray-400"}`
+            }
+          ),
+          connectionState === "connected" && (agentState === "speaking" || agentState === "listening" || agentState === "thinking") && /* @__PURE__ */ jsx("span", { className: "absolute inline-flex h-4 w-4 rounded-full bg-[#fbbc05]/50 animate-ping" })
+        ] }) }),
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
+          /* @__PURE__ */ jsx("span", { className: "text-base font-semibold leading-tight", children: "Voice Assistant" }),
+          /* @__PURE__ */ jsx("p", { className: "text-[11px] text-white/80 mt-0.5 font-normal", children: statusText })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "flex gap-1.5", children: [
+        enabled && /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: () => setMinimized(true),
+            className: "bg-white/10 w-8 h-8 rounded-lg flex items-center justify-center hover:bg-white/20 transition-all duration-200 active:scale-95 cursor-pointer",
+            title: "Minimize",
+            children: /* @__PURE__ */ jsx(ChevronRight, { className: "rotate-90 h-4.5 w-4.5" })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: onDisable,
+            className: "bg-white/10 w-8 h-8 rounded-lg flex items-center justify-center hover:bg-white/20 transition-all duration-200 active:scale-95 cursor-pointer",
+            title: "Close",
+            children: /* @__PURE__ */ jsx(X, { className: "h-4.5 w-4.5" })
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-2 gap-2.5 p-3.5 bg-white border-b border-gray-100", children: [
+      /* @__PURE__ */ jsxs(
+        "div",
+        {
+          onClick: handleSpeakerClick,
+          className: `flex items-center gap-2.5 p-3 rounded-xl cursor-pointer transition-all duration-200 active:scale-[0.98] ${speakerMuted ? "bg-[#f1f3f4] hover:bg-[#e8eaed]" : "bg-[#e8f0fe] hover:bg-[#d2e3fc]"}`,
+          children: [
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: `w-10 h-10 rounded-lg flex items-center justify-center transition-colors shrink-0 ${speakerMuted ? "bg-[#e8eaed] text-gray-500" : "bg-[#1a73e8] text-white"}`,
+                children: speakerMuted ? /* @__PURE__ */ jsx(VolumeX, { className: "h-4.5 w-4.5" }) : /* @__PURE__ */ jsx(Volume2, { className: "h-4.5 w-4.5" })
+              }
+            ),
+            /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+              /* @__PURE__ */ jsx("p", { className: "text-xs font-semibold text-gray-800 truncate", children: "Speaker" }),
+              /* @__PURE__ */ jsx("p", { className: "text-[10px] text-gray-500 mt-0.5 truncate", children: speakerMuted ? "Disabled" : "Active" })
+            ] })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxs(
+        "div",
+        {
+          onClick: handleMicClick,
+          className: `flex items-center gap-2.5 p-3 rounded-xl cursor-pointer transition-all duration-200 active:scale-[0.98] ${micMuted ? "bg-[#f1f3f4] hover:bg-[#e8eaed]" : "bg-[#e8f0fe] hover:bg-[#d2e3fc]"}`,
+          children: [
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: `w-10 h-10 rounded-lg flex items-center justify-center transition-colors shrink-0 ${micMuted ? "bg-[#e8eaed] text-gray-500" : "bg-[#1a73e8] text-white"}`,
+                children: micMuted ? /* @__PURE__ */ jsx(MicOff, { className: "h-4.5 w-4.5" }) : /* @__PURE__ */ jsx(Mic, { className: "h-4.5 w-4.5" })
+              }
+            ),
+            /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+              /* @__PURE__ */ jsx("p", { className: "text-xs font-semibold text-gray-800 truncate", children: "Mic" }),
+              /* @__PURE__ */ jsx("p", { className: "text-[10px] text-gray-500 mt-0.5 truncate", children: micMuted ? "Disabled" : "Active" })
+            ] })
+          ]
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref: containerRef,
+        className: "flex-1 p-3.5 overflow-y-auto max-h-[300px] min-h-[240px] bg-[#f8f9fa] flex flex-col gap-3 scroll-smooth",
+        children: [
+          /* @__PURE__ */ jsx("div", { className: "flex justify-start", children: /* @__PURE__ */ jsxs("div", { className: "inline-flex items-center gap-1.5 px-3 py-1 rounded-full bg-white border border-gray-200/80 shadow-sm text-[10px] font-semibold text-slate-700", children: [
+            /* @__PURE__ */ jsx("span", { children: "\u{1F3A4}" }),
+            " Voice enabled"
+          ] }) }),
+          participants && participants.length > 0 && /* @__PURE__ */ jsxs("div", { className: "p-2.5 rounded-lg bg-blue-50/50 border border-blue-100/50 mb-2", children: [
+            /* @__PURE__ */ jsx("p", { className: "text-[10px] font-semibold text-blue-900 mb-0.5", children: "Participants:" }),
+            participants.map((p, i) => /* @__PURE__ */ jsxs("p", { className: "text-[10px] text-blue-800", children: [
+              "\u2022 ",
+              p
+            ] }, i))
+          ] }),
+          orderedMessages.map((m) => {
+            if (m.text === "__SESSION_END__") {
+              return /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  className: "p-3.5 rounded-xl max-w-[85%] text-xs text-amber-800 bg-amber-50 border border-amber-100 self-center text-center shadow-sm",
+                  children: [
+                    "Session ended.",
+                    /* @__PURE__ */ jsx("br", {}),
+                    /* @__PURE__ */ jsx(
+                      "button",
+                      {
+                        style: {
+                          color: "#1a73e8",
+                          textDecoration: "underline",
+                          cursor: "pointer",
+                          background: "none",
+                          border: "none",
+                          padding: 0,
+                          fontWeight: 600
+                        },
+                        className: "hover:text-blue-700 transition-colors mt-1",
+                        onClick: () => window.location.reload(),
+                        children: "Click here"
+                      }
+                    ),
+                    " ",
+                    "to start session again"
+                  ]
+                },
+                m.id
+              );
+            }
+            return /* @__PURE__ */ jsx(
+              MessageBubble,
+              {
+                message: m
+              },
+              m.id
+            );
+          })
+        ]
+      }
+    ),
+    textEnabled && /* @__PURE__ */ jsxs("div", { className: "p-3 bg-white flex gap-2.5 items-center border-t border-gray-100", children: [
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          value: input,
+          onChange: (e) => setInput(e.target.value),
+          onKeyDown: handleKey,
+          placeholder: "Type your message...",
+          className: "flex-1 px-3.5 py-2.5 text-xs bg-[#f1f3f4] border border-transparent rounded-full focus:outline-none focus:bg-white focus:border-gray-200 focus:ring-2 focus:ring-blue-100 text-gray-900 placeholder-gray-500 transition-all duration-200"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          onClick: sendMessage,
+          className: "w-10 h-10 rounded-xl bg-[#1a73e8] text-white flex items-center justify-center hover:bg-[#1557b0] transition-colors shadow-md shadow-blue-500/20 active:scale-95 shrink-0 cursor-pointer",
+          title: "Send message",
+          children: /* @__PURE__ */ jsx(SendHorizontal, { className: "h-4.5 w-4.5" })
+        }
+      )
+    ] })
+  ] });
+}
+
+// src/providers/LiveKitProvider.tsx
+import {
+  createContext,
+  useCallback as useCallback2,
+  useContext,
+  useEffect as useEffect2,
+  useMemo as useMemo3,
+  useRef as useRef3,
+  useState as useState3
+} from "react";
+import {
+  ConnectionState
+} from "livekit-client";
+
+// src/services/auth.service.ts
+async function getBearerToken({
+  customerId,
+  apiKey
+}) {
+  const response = await fetch(
+    `https://api.vibrium.ai/v1/customers/${customerId}/auth/token`,
+    {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+        Authorization: `Basic ${apiKey}`
+      }
+    }
+  );
+  if (!response.ok) {
+    const text = await response.text();
+    throw new Error(
+      `Auth failed: ${text}`
+    );
+  }
+  const json = await response.json();
+  const token = json?.token || json?.data?.token || json?.access_token;
+  if (!token) {
+    throw new Error(
+      "Missing bearer token"
+    );
+  }
+  return token;
+}
+
+// src/services/token.service.ts
+async function fetchSession(config) {
+  console.log("customerId", config.customerId);
+  console.log("apiKey", config.apiKey);
+  const bearerToken = await getBearerToken({
+    customerId: config.customerId,
+    apiKey: config.apiKey
+  });
+  const response = await fetch(
+    config.lambdaUrl,
+    {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+        Authorization: `Bearer ${bearerToken}`
+      },
+      body: JSON.stringify({
+        customer_id: config.customerId,
+        bot_id: config.botId,
+        mode: config.mode ?? "hybrid",
+        ...config.customParameters && {
+          user: config.customParameters.user
+        },
+        ...config.customParameters && {
+          context: config.customParameters.context
+        }
+      })
+    }
+  );
+  if (!response.ok) {
+    const text = await response.text();
+    throw new Error(
+      `Lambda failed: ${text}`
+    );
+  }
+  const json = await response.json();
+  return {
+    token: json.token || json.data?.token,
+    url: json.url || json.data?.url,
+    roomName: json.roomName || json.data?.room_name,
+    participantIdentity: json.participantIdentity || json.data?.participant_identity
+  };
+}
+
+// src/services/livekit.service.ts
+import {
+  ParticipantKind,
+  Room,
+  RoomEvent,
+  Track
+} from "livekit-client";
+
+// src/utils/audio.ts
+function attachAudioTrack(track, participantId, container) {
+  const element = track.attach();
+  element.id = `audio-${participantId}`;
+  element.autoplay = false;
+  element.playsInline = true;
+  container.appendChild(element);
+  return element;
+}
+function detachAudioTrack(track) {
+  track.detach().forEach((el) => el.remove());
+}
+
+// src/services/action-registry.ts
+var ActionRegistry = class {
+  handlers = /* @__PURE__ */ new Map();
+  /**
+   * Register handler
+   *
+   * Example:
+   *
+   * registry.register(
+   *   "evt_search_product",
+   *   handler
+   * );
+   */
+  register(eventId, handler) {
+    this.handlers.set(
+      eventId,
+      handler
+    );
+  }
+  /**
+   * Remove handler
+   */
+  unregister(eventId) {
+    return this.handlers.delete(
+      eventId
+    );
+  }
+  /**
+   * Resolve handler
+   *
+   * Resolution order:
+   *
+   * 1. Exact match
+   * 2. Wildcard (*)
+   */
+  resolve(eventId) {
+    return this.handlers.get(eventId) ?? this.handlers.get("*");
+  }
+  /**
+   * Check existence
+   */
+  has(eventId) {
+    return this.handlers.has(
+      eventId
+    );
+  }
+  /**
+   * Remove everything
+   */
+  clear() {
+    this.handlers.clear();
+  }
+  /**
+   * Registered event ids
+   */
+  getRegisteredEvents() {
+    return Array.from(
+      this.handlers.keys()
+    );
+  }
+  /**
+   * Count handlers
+   */
+  size() {
+    return this.handlers.size;
+  }
+};
+
+// src/services/livekit.service.ts
+var LiveKitService = class {
+  room = null;
+  audioContainer;
+  speakerMuted = true;
+  user;
+  context;
+  mode;
+  VOICE_ACTION_TOPIC = "vibrium.voice.action";
+  VOICE_ACTION_RESULT_TOPIC = "vibrium.voice.action.result";
+  VOICE_ACTION_TIMEOUT_MS = 3e4;
+  actionRegistry = new ActionRegistry();
+  actionListeners = /* @__PURE__ */ new Set();
+  /**
+   * --------------------------------------------------------------------------
+   * Event handlers
+   * --------------------------------------------------------------------------
+   */
+  onConnected;
+  onDisconnected;
+  onReconnecting;
+  onReconnected;
+  onMessage;
+  onAgentState;
+  onError;
+  onMicState;
+  onQuality;
+  onVoiceAction;
+  onVoiceActionResult;
+  registerEventHandler(eventId, handler) {
+    this.actionRegistry.register(
+      eventId,
+      handler
+    );
+  }
+  pendingActions = /* @__PURE__ */ new Map();
+  constructor(audioContainer, user, context, mode) {
+    this.audioContainer = audioContainer;
+    this.user = user;
+    this.context = context;
+    this.mode = mode;
+  }
+  addVoiceActionListener(listener) {
+    this.actionListeners.add(listener);
+    return () => {
+      this.actionListeners.delete(listener);
+    };
+  }
+  validateVoiceAction(event) {
+    if (!event || typeof event !== "object") {
+      throw new Error(
+        "Invalid event payload"
+      );
+    }
+    if (typeof event.request_id !== "string") {
+      throw new Error(
+        "Missing request_id"
+      );
+    }
+    if (typeof event.event_id !== "string") {
+      throw new Error(
+        "Missing event_id"
+      );
+    }
+  }
+  async handleVoiceAction(event) {
+    this.validateVoiceAction(event);
+    this.actionListeners.forEach(
+      (listener) => {
+        try {
+          listener(event);
+        } catch (e) {
+          console.error(e);
+        }
+      }
+    );
+    this.pendingActions.set(
+      event.request_id,
+      {
+        eventId: event.event_id,
+        startedAt: Date.now()
+      }
+    );
+    const handler = this.actionRegistry.resolve(event.event_id);
+    if (!handler) {
+      await this.publishActionResult({
+        request_id: event.request_id,
+        event_id: event.event_id,
+        status: "failure",
+        error: {
+          code: "handler_not_found",
+          message: "No registered handler"
+        }
+      });
+      return;
+    }
+    try {
+      const response = await Promise.race([
+        handler(event),
+        new Promise(
+          (_, reject) => setTimeout(
+            () => reject(new Error("Action timeout")),
+            this.VOICE_ACTION_TIMEOUT_MS
+          )
+        )
+      ]);
+      await this.publishActionResult({
+        request_id: event.request_id,
+        event_id: event.event_id,
+        ...response
+      });
+      this.pendingActions.delete(
+        event.request_id
+      );
+    } catch (error) {
+      await this.publishActionResult({
+        request_id: event.request_id,
+        event_id: event.event_id,
+        status: "failure",
+        error: {
+          code: "handler_error",
+          message: error?.message || "Handler failed"
+        }
+      });
+      this.pendingActions.delete(
+        event.request_id
+      );
+    }
+  }
+  /**
+   * --------------------------------------------------------------------------
+   * Connect
+   * --------------------------------------------------------------------------
+   */
+  async connect(url, token) {
+    const room = new Room({
+      adaptiveStream: true,
+      dynacast: true
+    });
+    this.room = room;
+    const registerTextStreamHandler = room.registerTextStreamHandler;
+    if (typeof registerTextStreamHandler === "function") {
+      registerTextStreamHandler.call(
+        room,
+        "lk.chat",
+        async (reader, participantInfo) => {
+          const text = await reader.readAll();
+          console.log(
+            "[TEXT_STREAM]",
+            participantInfo?.identity,
+            text
+          );
+          this.onMessage?.({
+            id: crypto.randomUUID(),
+            type: "assistant_text",
+            text,
+            final: true,
+            timestamp: Date.now()
+          });
+        }
+      );
+    }
+    room.on(RoomEvent.Connected, async () => {
+      this.onConnected?.();
+      try {
+        await room.startAudio();
+        if (this.user || this.context) {
+          await room.localParticipant.publishData(
+            new TextEncoder().encode(
+              JSON.stringify({
+                type: "session_init",
+                user: this.user,
+                context: this.context
+              })
+            ),
+            {
+              reliable: true,
+              topic: "session"
+            }
+          );
+        }
+        if (this.mode !== "chat") {
+          await room.localParticipant.setMicrophoneEnabled(
+            true
+          );
+        }
+        this.onMicState?.(true);
+      } catch (err) {
+        this.onError?.(
+          err?.message || "Failed to start audio"
+        );
+      }
+    });
+    room.on(RoomEvent.Disconnected, () => {
+      this.onDisconnected?.();
+    });
+    room.on(RoomEvent.Reconnecting, () => {
+      this.onReconnecting?.();
+    });
+    room.on(RoomEvent.Reconnected, () => {
+      this.onReconnected?.();
+    });
+    room.on(
+      RoomEvent.TrackSubscribed,
+      (track, _, participant) => {
+        console.log("Track subscribed:", participant.identity);
+        if (track.kind === Track.Kind.Audio) {
+          const audioElement = attachAudioTrack(
+            track,
+            participant.identity,
+            this.audioContainer
+          );
+          audioElement.muted = this.speakerMuted;
+          audioElement.volume = this.speakerMuted ? 0 : 1;
+          if (!this.speakerMuted) {
+            audioElement.play().catch(console.error);
+          }
+        }
+      }
+    );
+    room.on(
+      RoomEvent.TrackUnsubscribed,
+      (track) => {
+        if (track.kind === Track.Kind.Audio) {
+          detachAudioTrack(track);
+        }
+      }
+    );
+    room.on(
+      RoomEvent.ConnectionQualityChanged,
+      (quality, participant) => {
+        if (participant === room.localParticipant) {
+          this.onQuality?.(quality);
+        }
+      }
+    );
+    room.on(
+      RoomEvent.ParticipantConnected,
+      (participant) => {
+        if (participant.kind === ParticipantKind.AGENT) {
+          this.onAgentState?.(
+            "listening"
+          );
+        }
+      }
+    );
+    room.on(
+      RoomEvent.TranscriptionReceived,
+      (segments, participant) => {
+        for (const segment of segments) {
+          const isAgent = participant?.kind === ParticipantKind.AGENT;
+          this.onMessage?.({
+            id: segment.id,
+            type: isAgent ? "assistant_voice" : "user_voice",
+            text: segment.text,
+            final: segment.final,
+            timestamp: Date.now()
+          });
+        }
+      }
+    );
+    room.on(
+      RoomEvent.DataReceived,
+      (payload, participant, kind, topic) => {
+        try {
+          const decoded = JSON.parse(new TextDecoder().decode(payload));
+          console.log(
+            "[DATA_RECEIVED]",
+            {
+              topic,
+              participant: participant?.identity,
+              raw: decoded
+            }
+          );
+          if (topic === this.VOICE_ACTION_TOPIC) {
+            const event = decoded;
+            this.onVoiceAction?.(event);
+            this.handleVoiceAction(event);
+            return;
+          }
+          if (topic === this.VOICE_ACTION_RESULT_TOPIC) {
+            this.onVoiceActionResult?.(
+              decoded
+            );
+            return;
+          }
+          if (decoded.type === "agent_state") {
+            this.onAgentState?.(
+              decoded.state
+            );
+          }
+          if (decoded.type === "assistant_text") {
+            this.onMessage?.({
+              id: decoded.id,
+              type: "assistant_text",
+              text: decoded.text,
+              final: true,
+              timestamp: Date.now()
+            });
+          }
+        } catch (err) {
+          console.error(err);
+        }
+      }
+    );
+    await room.connect(url, token);
+  }
+  /**
+   * --------------------------------------------------------------------------
+   * Disconnect
+   * --------------------------------------------------------------------------
+   */
+  async disconnect() {
+    if (!this.room) return;
+    try {
+      await this.room.localParticipant.setMicrophoneEnabled(
+        false
+      );
+    } catch {
+    }
+    await this.room.disconnect();
+    this.room = null;
+  }
+  /**
+   * --------------------------------------------------------------------------
+   * Toggle microphone
+   * --------------------------------------------------------------------------
+   */
+  async toggleMic(enabled) {
+    if (!this.room) return;
+    await this.room.localParticipant.setMicrophoneEnabled(
+      enabled
+    );
+    this.onMicState?.(enabled);
+  }
+  setSpeakerMuted(muted) {
+    this.speakerMuted = muted;
+    const audioElements = this.audioContainer.querySelectorAll("audio");
+    audioElements.forEach((audio) => {
+      const el = audio;
+      el.muted = muted;
+      el.volume = muted ? 0 : 1;
+      if (!muted) {
+        el.play().catch(console.error);
+      }
+    });
+  }
+  /**
+   * --------------------------------------------------------------------------
+   * Send text message
+   * --------------------------------------------------------------------------
+   */
+  async sendText(text) {
+    if (!this.room) return;
+    console.log("[sendText] called:", text);
+    const lp = this.room.localParticipant;
+    try {
+      if (typeof lp.sendText === "function") {
+        await lp.sendText(text, {
+          topic: "lk.chat"
+        });
+        console.log(
+          "[sendText] sent via LiveKit TextStream"
+        );
+      } else {
+        await lp.publishData(
+          new TextEncoder().encode(
+            JSON.stringify({
+              message: text
+            })
+          ),
+          {
+            reliable: true,
+            topic: "lk.chat"
+          }
+        );
+        console.log(
+          "[sendText] sent via publishData fallback"
+        );
+      }
+      this.onMessage?.({
+        id: crypto.randomUUID(),
+        type: "user_text",
+        text,
+        final: true,
+        timestamp: Date.now()
+      });
+    } catch (err) {
+      console.error(
+        "[sendText] failed",
+        err
+      );
+    }
+  }
+  async publishActionResult(result) {
+    if (!this.room) return;
+    console.log(
+      "[publishActionResult] Sending result:",
+      JSON.stringify(result, null, 2)
+    );
+    await this.room.localParticipant.publishData(
+      new TextEncoder().encode(
+        JSON.stringify(result)
+      ),
+      {
+        reliable: true,
+        topic: this.VOICE_ACTION_RESULT_TOPIC
+      }
+    );
+  }
+};
+
+// src/hooks/useTranscriptSync.ts
+import { useCallback, useMemo as useMemo2, useRef as useRef2, useState as useState2 } from "react";
+function useTranscriptSync(options) {
+  const {
+    maxMessages = 500,
+    enableGrouping = true
+  } = options || {};
+  const [messages, setMessages] = useState2([]);
+  const messageMapRef = useRef2(/* @__PURE__ */ new Map());
+  const commitMessages = useCallback(() => {
+    const merged = Array.from(
+      messageMapRef.current.values()
+    ).sort((a, b) => a.timestamp - b.timestamp).slice(-maxMessages);
+    setMessages(merged);
+  }, [maxMessages]);
+  const mergeAdjacentPartials = useCallback(
+    (existing, incoming) => {
+      if (!enableGrouping) return incoming;
+      if (existing.type === incoming.type && !existing.final && !incoming.final) {
+        return {
+          ...existing,
+          text: incoming.text,
+          timestamp: incoming.timestamp
+        };
+      }
+      return incoming;
+    },
+    [enableGrouping]
+  );
+  const addTranscriptSegment = useCallback(
+    (segment, type) => {
+      const timestamp = segment.timestamp || Date.now();
+      const incomingMessage = {
+        id: segment.id,
+        type,
+        text: segment.text,
+        final: segment.final,
+        timestamp
+      };
+      const existing = messageMapRef.current.get(segment.id);
+      if (existing) {
+        const merged = mergeAdjacentPartials(
+          existing,
+          incomingMessage
+        );
+        if (existing.final) {
+          return;
+        }
+        messageMapRef.current.set(segment.id, {
+          ...merged,
+          final: segment.final
+        });
+        commitMessages();
+        return;
+      }
+      messageMapRef.current.set(
+        segment.id,
+        incomingMessage
+      );
+      commitMessages();
+    },
+    [commitMessages, mergeAdjacentPartials]
+  );
+  const addTextMessage = useCallback(
+    (text, type) => {
+      const id = crypto.randomUUID();
+      const message = {
+        id,
+        type,
+        text,
+        final: true,
+        timestamp: Date.now()
+      };
+      messageMapRef.current.set(id, message);
+      commitMessages();
+    },
+    [commitMessages]
+  );
+  const updateMessage = useCallback(
+    (id, text, final = true) => {
+      const existing = messageMapRef.current.get(id);
+      if (!existing) return;
+      messageMapRef.current.set(id, {
+        ...existing,
+        text,
+        final,
+        timestamp: Date.now()
+      });
+      commitMessages();
+    },
+    [commitMessages]
+  );
+  const removeMessage = useCallback(
+    (id) => {
+      messageMapRef.current.delete(id);
+      commitMessages();
+    },
+    [commitMessages]
+  );
+  const clearMessages = useCallback(() => {
+    messageMapRef.current.clear();
+    setMessages([]);
+  }, []);
+  const getLatestMessage = useCallback(() => {
+    if (!messages.length) return null;
+    return messages[messages.length - 1];
+  }, [messages]);
+  const hasPendingMessages = useMemo2(() => {
+    return messages.some((m) => !m.final);
+  }, [messages]);
+  return {
+    messages,
+    addTranscriptSegment,
+    addTextMessage,
+    updateMessage,
+    removeMessage,
+    clearMessages,
+    getLatestMessage,
+    hasPendingMessages
+  };
+}
+
+// src/providers/LiveKitProvider.tsx
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var VoiceAssistantContext = createContext(
+  null
+);
+function LiveKitProvider({
+  children,
+  config
+}) {
+  const audioContainerRef = useRef3(null);
+  const serviceRef = useRef3(null);
+  const [connectionState, setConnectionState] = useState3(
+    ConnectionState.Disconnected
+  );
+  const [connected, setConnected] = useState3(false);
+  const [connecting, setConnecting] = useState3(false);
+  const [reconnecting, setReconnecting] = useState3(false);
+  const [micEnabled, setMicEnabled] = useState3(false);
+  const [speakerEnabled, setSpeakerEnabled] = useState3(false);
+  const [agentState, setAgentState] = useState3("idle");
+  const [quality, setQuality] = useState3(
+    null
+  );
+  const [error, setError] = useState3(null);
+  const {
+    messages,
+    addTranscriptSegment,
+    addTextMessage,
+    clearMessages
+  } = useTranscriptSync({
+    maxMessages: 1e3,
+    enableGrouping: true
+  });
+  useEffect2(() => {
+    if (!audioContainerRef.current) return;
+    const service = new LiveKitService(
+      audioContainerRef.current,
+      config?.customParameters?.user,
+      config?.customParameters?.context,
+      config.mode
+    );
+    serviceRef.current = service;
+    const registerConfiguredHandlers = () => {
+      const handlers = config.actionHandlers;
+      if (!handlers) return;
+      Object.entries(handlers).forEach(
+        ([eventId, handler]) => {
+          service.registerEventHandler(
+            eventId,
+            handler
+          );
+        }
+      );
+    };
+    registerConfiguredHandlers();
+    service.onConnected = () => {
+      setConnected(true);
+      setConnecting(false);
+      setReconnecting(false);
+      setConnectionState(
+        ConnectionState.Connected
+      );
+      setSpeakerEnabled(false);
+      setError(null);
+    };
+    service.onDisconnected = () => {
+      setConnected(false);
+      setConnecting(false);
+      setReconnecting(false);
+      setMicEnabled(false);
+      setAgentState("idle");
+      setConnectionState(
+        ConnectionState.Disconnected
+      );
+    };
+    service.onReconnecting = () => {
+      setReconnecting(true);
+      setConnectionState(
+        ConnectionState.Reconnecting
+      );
+    };
+    service.onReconnected = () => {
+      setReconnecting(false);
+      setConnectionState(
+        ConnectionState.Connected
+      );
+    };
+    service.onMicState = (enabled) => {
+      setMicEnabled(enabled);
+    };
+    service.onAgentState = (state) => {
+      setAgentState(state);
+    };
+    service.onQuality = (q) => {
+      setQuality(q);
+    };
+    service.onError = (err) => {
+      console.error("LiveKit Error:", err);
+      setError(err);
+      setConnecting(false);
+      setConnected(false);
+    };
+    service.onMessage = (message) => {
+      if (message.type === "user_voice" || message.type === "assistant_voice") {
+        addTranscriptSegment(
+          {
+            id: message.id,
+            text: message.text,
+            final: message.final ?? false,
+            timestamp: message.timestamp
+          },
+          message.type
+        );
+        return;
+      }
+      addTextMessage(
+        message.text,
+        message.type
+      );
+    };
+    return () => {
+      void service.disconnect();
+      serviceRef.current = null;
+    };
+  }, [
+    addTranscriptSegment,
+    addTextMessage,
+    config.actionHandlers
+  ]);
+  useEffect2(() => {
+    const container = audioContainerRef.current;
+    if (!container) return;
+    const audioElements = container.querySelectorAll("audio");
+    audioElements.forEach((audio) => {
+      const element = audio;
+      element.muted = !speakerEnabled;
+      element.volume = speakerEnabled ? 1 : 0;
+    });
+  }, [speakerEnabled]);
+  const connect = useCallback2(async () => {
+    if (!serviceRef.current) return;
+    if (connected || connecting || reconnecting) {
+      return;
+    }
+    try {
+      setConnecting(true);
+      setError(null);
+      const session = await fetchSession(config);
+      await serviceRef.current.connect(
+        session.url,
+        session.token
+      );
+    } catch (err) {
+      console.error(err);
+      let userMessage = err?.message || "Failed to connect";
+      if (/permission|microphone|notallowed/i.test(
+        userMessage
+      )) {
+        userMessage = "Microphone access denied.";
+      }
+      if (/jwt|token|expired/i.test(userMessage)) {
+        userMessage = "Session expired. Please refresh.";
+      }
+      if (/network/i.test(userMessage)) {
+        userMessage = "Network connection failed.";
+      }
+      setError(userMessage);
+      setConnecting(false);
+      setConnected(false);
+    }
+  }, [
+    connected,
+    connecting,
+    reconnecting,
+    config
+  ]);
+  const disconnect = useCallback2(async () => {
+    try {
+      await serviceRef.current?.disconnect();
+      setConnected(false);
+      setConnecting(false);
+      setReconnecting(false);
+      setMicEnabled(false);
+      setAgentState("idle");
+      setConnectionState(
+        ConnectionState.Disconnected
+      );
+    } catch (err) {
+      console.error(err);
+    }
+  }, []);
+  const toggleMic = useCallback2(async () => {
+    try {
+      const next = !micEnabled;
+      await serviceRef.current?.toggleMic(
+        next
+      );
+      console.log("LIVEKIT MIC ENABLED:", next);
+      setMicEnabled(next);
+    } catch (err) {
+      console.error(err);
+      setError(
+        err?.message || "Failed to toggle microphone"
+      );
+    }
+  }, [micEnabled]);
+  const setSpeakerMuted = useCallback2(
+    (muted) => {
+      console.log("LIVEKIT SPEAKER MUTED:", muted);
+      serviceRef.current?.setSpeakerMuted(
+        muted
+      );
+      setSpeakerEnabled(!muted);
+    },
+    []
+  );
+  const sendText = useCallback2(
+    async (text) => {
+      if (!text.trim()) return;
+      try {
+        await serviceRef.current?.sendText(
+          text
+        );
+      } catch (err) {
+        console.error(err);
+        setError(
+          err?.message || "Failed to send message"
+        );
+      }
+    },
+    []
+  );
+  const resetConversation = useCallback2(() => {
+    clearMessages();
+  }, [clearMessages]);
+  const registerEventHandler = useCallback2(
+    (eventId, handler) => {
+      serviceRef.current?.registerEventHandler(
+        eventId,
+        handler
+      );
+    },
+    []
+  );
+  const onVoiceAction = useCallback2(
+    (callback) => {
+      return serviceRef.current?.addVoiceActionListener(
+        callback
+      ) || (() => {
+      });
+    },
+    []
+  );
+  const onVoiceActionResult = useCallback2(
+    (callback) => {
+      if (!serviceRef.current) {
+        return () => {
+        };
+      }
+      serviceRef.current.onVoiceActionResult = callback;
+      return () => {
+        if (serviceRef.current?.onVoiceActionResult === callback) {
+          serviceRef.current.onVoiceActionResult = void 0;
+        }
+      };
+    },
+    []
+  );
+  const value = useMemo3(
+    () => ({
+      connected,
+      connecting,
+      reconnecting,
+      micEnabled,
+      speakerEnabled,
+      messages,
+      agentState,
+      quality,
+      error,
+      connect,
+      disconnect,
+      toggleMic,
+      setSpeakerMuted,
+      sendText,
+      registerEventHandler,
+      onVoiceAction,
+      onVoiceActionResult,
+      connectionState,
+      clearConversation: resetConversation
+    }),
+    [
+      connected,
+      connecting,
+      reconnecting,
+      micEnabled,
+      speakerEnabled,
+      messages,
+      agentState,
+      quality,
+      error,
+      connect,
+      disconnect,
+      toggleMic,
+      setSpeakerMuted,
+      sendText,
+      registerEventHandler,
+      onVoiceAction,
+      onVoiceActionResult,
+      connectionState,
+      resetConversation
+    ]
+  );
+  return /* @__PURE__ */ jsxs2(
+    VoiceAssistantContext.Provider,
+    {
+      value,
+      children: [
+        children,
+        /* @__PURE__ */ jsx2(
+          "div",
+          {
+            ref: audioContainerRef,
+            style: {
+              position: "absolute",
+              width: 1,
+              height: 1,
+              overflow: "hidden",
+              opacity: 0,
+              pointerEvents: "none"
+            }
+          }
+        )
+      ]
+    }
+  );
+}
+function useVoiceAssistant() {
+  const context = useContext(
+    VoiceAssistantContext
+  );
+  if (!context) {
+    throw new Error(
+      "useVoiceAssistant must be used inside LiveKitProvider"
+    );
+  }
+  return context;
+}
+
+// src/components/FloatingMic.tsx
+import { Fragment as Fragment2, jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+function FloatingMicInner({
+  textEnabled = false
+}) {
+  const {
+    connected,
+    connecting,
+    reconnecting,
+    micEnabled,
+    messages,
+    agentState,
+    connect,
+    disconnect,
+    toggleMic,
+    setSpeakerMuted: setLiveKitSpeakerMuted,
+    sendText,
+    connectionState
+  } = useVoiceAssistant();
+  const [showVoicePanel, setShowVoicePanel] = useState4(false);
+  const [micMuted, setMicMuted] = useState4(false);
+  const [speakerMuted, setSpeakerMuted] = useState4(true);
+  useEffect3(() => {
+    const desired = !micMuted;
+    if (desired !== micEnabled) {
+      toggleMic();
+    }
+  }, [micMuted]);
+  useEffect3(() => {
+    setLiveKitSpeakerMuted(speakerMuted);
+  }, [
+    speakerMuted,
+    setLiveKitSpeakerMuted
+  ]);
+  const enableVoice = async () => {
+    if (connecting || connected) {
+      return;
+    }
+    try {
+      await connect();
+      setShowVoicePanel(
+        true
+      );
+    } catch (err) {
+      console.error(err);
+    }
+  };
+  const disableVoice = async () => {
+    await disconnect();
+    setShowVoicePanel(
+      false
+    );
+    setMicMuted(false);
+    setSpeakerMuted(true);
+  };
+  const toggleVoicePanel = () => {
+    if (!connected) {
+      enableVoice();
+      return;
+    }
+    setShowVoicePanel(
+      (prev) => !prev
+    );
+  };
+  const buttonState = useMemo4(() => {
+    if (reconnecting) {
+      return "reconnecting";
+    }
+    if (connecting) {
+      return "connecting";
+    }
+    if (connected) {
+      return "connected";
+    }
+    return "idle";
+  }, [
+    connected,
+    connecting,
+    reconnecting
+  ]);
+  const tooltip = (() => {
+    switch (buttonState) {
+      case "connecting":
+        return "Connecting...";
+      case "reconnecting":
+        return "Reconnecting...";
+      case "connected":
+        return "Voice connected";
+      default:
+        return "Click to enable voice";
+    }
+  })();
+  return /* @__PURE__ */ jsxs3(Fragment2, { children: [
+    /* @__PURE__ */ jsxs3(
+      "button",
+      {
+        onClick: toggleVoicePanel,
+        disabled: connecting,
+        className: "fixed bottom-6 right-6 z-[1000] w-14 h-14 rounded-full bg-gradient-to-br from-blue-500 to-blue-700 text-white flex items-center justify-center shadow-lg transition-all duration-300 hover:scale-110 disabled:opacity-50 disabled:cursor-not-allowed",
+        title: tooltip,
+        children: [
+          connected && agentState === "listening" && /* @__PURE__ */ jsx3("span", { className: "absolute -inset-2 rounded-full bg-green-500/25 animate-ping pointer-events-none" }),
+          connected && agentState === "speaking" && /* @__PURE__ */ jsx3("span", { className: "absolute -inset-2 rounded-full bg-blue-500/25 animate-ping pointer-events-none" }),
+          connected && agentState === "thinking" && /* @__PURE__ */ jsx3("span", { className: "absolute -inset-1 rounded-full bg-yellow-500/20 animate-pulse pointer-events-none" }),
+          showVoicePanel && /* @__PURE__ */ jsx3("span", { className: "absolute inset-0 rounded-full ring-4 ring-blue-500/35 transition-all duration-300 pointer-events-none" }),
+          /* @__PURE__ */ jsx3(Mic2, { className: `w-5 h-5 transition-transform duration-300 ${connected ? "scale-110" : ""}` })
+        ]
+      }
+    ),
+    showVoicePanel && /* @__PURE__ */ jsx3(
+      VoicePanel,
+      {
+        enabled: connected,
+        connectionState,
+        agentState,
+        messages,
+        participants: [],
+        onDisable: disableVoice,
+        textEnabled,
+        micMuted,
+        speakerMuted,
+        onMicMutedChange: setMicMuted,
+        onSpeakerMutedChange: setSpeakerMuted,
+        onSendText: sendText
+      }
+    )
+  ] });
+}
+function FloatingMic({
+  config,
+  textEnabled = false
+}) {
+  console.log("FloatingMic Config", config);
+  return /* @__PURE__ */ jsx3(
+    LiveKitProvider,
+    {
+      config: {
+        ...config
+      },
+      children: /* @__PURE__ */ jsx3(
+        FloatingMicInner,
+        {
+          textEnabled
+        }
+      )
+    }
+  );
+}
+
+// src/index.ts
+var index_default = FloatingMic;
+export {
+  FloatingMic,
+  LiveKitProvider,
+  VoicePanel,
+  index_default as default
+};
+//# sourceMappingURL=index.mjs.map