@shvm/vani-client 0.0.2

package/dist/ui/index.js

@@ -0,0 +1,559 @@
+import { Maximize2, X, Settings, Minimize2, Save, Radio, Loader2, Volume2, AlertCircle, WifiOff, Mic, Square, Terminal, FileAudio, Speaker, Activity } from 'lucide-react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { lazy, useState, useEffect, Suspense, useRef, useMemo } from 'react';
+import { TTS_MODELS, TTS_MODEL_VOICES, LLM_MODELS, STT_MODELS } from '@shvm/vani-client/shared';
+import { useVoiceSession } from '@shvm/vani-client/headless';
+
+var __defProp = Object.defineProperty;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __esm = (fn, res) => function __init() {
+  return fn && (res = (0, fn[__getOwnPropNames(fn)[0]])(fn = 0)), res;
+};
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+function VoiceDebugSidebar({ isOpen, onClose, events }) {
+  if (!isOpen) return null;
+  return /* @__PURE__ */ jsxs("div", { className: "fixed inset-y-0 right-0 w-96 bg-zinc-900 border-l border-zinc-800 shadow-2xl flex flex-col z-50 animate-in slide-in-from-right duration-300", children: [
+    /* @__PURE__ */ jsxs("div", { className: "bg-zinc-950 px-4 py-3 border-b border-zinc-800 flex items-center justify-between shrink-0", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-zinc-100", children: [
+        /* @__PURE__ */ jsx(Terminal, { className: "w-4 h-4 text-zinc-400" }),
+        /* @__PURE__ */ jsx("span", { className: "font-mono text-sm font-semibold", children: "Debug Console" })
+      ] }),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          onClick: onClose,
+          className: "p-1 hover:bg-zinc-800 rounded-md text-zinc-400 hover:text-white transition-colors",
+          children: /* @__PURE__ */ jsx(X, { className: "w-4 h-4" })
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "flex-1 overflow-y-auto p-4 space-y-3 font-mono text-xs", children: [
+      events.length === 0 && /* @__PURE__ */ jsx("div", { className: "text-zinc-500 text-center py-8", children: "No events logged yet." }),
+      events.map((event) => /* @__PURE__ */ jsx(EventItem, { event }, event.id))
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "bg-zinc-950 px-4 py-2 border-t border-zinc-800 text-[10px] text-zinc-500 flex justify-between shrink-0", children: [
+      /* @__PURE__ */ jsxs("span", { children: [
+        events.length,
+        " events"
+      ] }),
+      /* @__PURE__ */ jsxs("span", { children: [
+        "Session ID: ",
+        events[0]?.id?.slice(0, 4) || "N/A"
+      ] })
+    ] })
+  ] });
+}
+function EventItem({ event }) {
+  const time = new Date(event.timestamp).toLocaleTimeString([], {
+    hour12: false,
+    hour: "2-digit",
+    minute: "2-digit",
+    second: "2-digit",
+    fractionalSecondDigits: 3
+  });
+  const getIcon = () => {
+    switch (event.type) {
+      case "state_change":
+        return /* @__PURE__ */ jsx(Activity, { className: "w-3 h-3 text-blue-400" });
+      case "socket_event":
+        return /* @__PURE__ */ jsx(Terminal, { className: "w-3 h-3 text-zinc-500" });
+      case "audio_input":
+        return /* @__PURE__ */ jsx(Mic, { className: "w-3 h-3 text-green-400" });
+      case "audio_output":
+        return /* @__PURE__ */ jsx(Speaker, { className: "w-3 h-3 text-purple-400" });
+      case "error":
+        return /* @__PURE__ */ jsx(AlertCircle, { className: "w-3 h-3 text-red-500" });
+      case "transcript":
+        return /* @__PURE__ */ jsx(FileAudio, { className: "w-3 h-3 text-yellow-400" });
+      default:
+        return /* @__PURE__ */ jsx(Terminal, { className: "w-3 h-3" });
+    }
+  };
+  const isAudio = event.type === "audio_input" || event.type === "audio_output";
+  return /* @__PURE__ */ jsxs("div", { className: "bg-zinc-800/50 rounded border border-zinc-800 p-2 flex gap-3 hover:bg-zinc-800 transition-colors group", children: [
+    /* @__PURE__ */ jsx("div", { className: "shrink-0 pt-0.5 opacity-70 group-hover:opacity-100", children: getIcon() }),
+    /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0 overflow-hidden", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between mb-0.5", children: [
+        /* @__PURE__ */ jsx("span", { className: "text-zinc-400 font-bold uppercase tracking-wider text-[10px]", children: event.type.replace("_", " ") }),
+        /* @__PURE__ */ jsx("span", { className: "text-zinc-600 text-[10px]", children: time })
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: "text-zinc-300 break-words whitespace-pre-wrap", children: renderDetails(event) }),
+      isAudio && event.blobUrl && /* @__PURE__ */ jsx("div", { className: "mt-2", children: /* @__PURE__ */ jsx(
+        "audio",
+        {
+          controls: true,
+          src: event.blobUrl,
+          className: "w-full h-6 rounded bg-transparent opacity-80 hover:opacity-100"
+        }
+      ) })
+    ] })
+  ] });
+}
+function renderDetails(event) {
+  if (event.type === "state_change") {
+    return /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-1.5", children: [
+      /* @__PURE__ */ jsx("span", { className: "text-zinc-500", children: event.details.from || "void" }),
+      /* @__PURE__ */ jsx("span", { className: "text-zinc-600", children: "\u2192" }),
+      /* @__PURE__ */ jsx("span", { className: `${getStateColor(event.details.to)} font-semibold`, children: event.details.to }),
+      /* @__PURE__ */ jsxs("span", { className: "text-zinc-600 ml-1 text-[10px]", children: [
+        "(",
+        event.details.source,
+        ")"
+      ] })
+    ] });
+  }
+  if (event.type === "transcript") {
+    return /* @__PURE__ */ jsxs("span", { children: [
+      /* @__PURE__ */ jsxs("span", { className: event.details.role === "user" ? "text-green-400" : "text-purple-400", children: [
+        event.details.role,
+        ":"
+      ] }),
+      " ",
+      event.details.text
+    ] });
+  }
+  return JSON.stringify(event.details, null, 0).replace(/[{}"]/g, "").replace(/:/g, ": ");
+}
+function getStateColor(state) {
+  switch (state) {
+    case "listening":
+      return "text-green-400";
+    case "processing":
+      return "text-yellow-400";
+    case "speaking":
+      return "text-blue-400";
+    case "idle":
+      return "text-zinc-400";
+    case "error":
+      return "text-red-400";
+    default:
+      return "text-zinc-300";
+  }
+}
+var init_VoiceDebugSidebar = __esm({
+  "src/ui/components/VoiceDebugSidebar.tsx"() {
+  }
+});
+function FullScreenMode({
+  status,
+  transcript,
+  history,
+  error,
+  connect,
+  cancel,
+  vadLoading,
+  onTogglePip,
+  config,
+  setConfig,
+  feedback
+}) {
+  const [isDebugOpen, setIsDebugOpen] = useState(false);
+  const [isSettingsOpen, setIsSettingsOpen] = useState(false);
+  const transcriptEndRef = useRef(null);
+  const [localConfig, setLocalConfig] = useState(config || {});
+  useEffect(() => {
+    if (config) setLocalConfig(config);
+  }, [config]);
+  useEffect(() => {
+    transcriptEndRef.current?.scrollIntoView?.({ behavior: "smooth" });
+  }, [transcript]);
+  const availableVoices = useMemo(() => {
+    const model = localConfig.tts?.model || TTS_MODELS[0];
+    return TTS_MODEL_VOICES[model] || [];
+  }, [localConfig.tts?.model]);
+  useEffect(() => {
+    if (localConfig.tts?.speaker && !availableVoices.includes(localConfig.tts.speaker)) {
+      setLocalConfig({
+        ...localConfig,
+        tts: { ...localConfig.tts, speaker: availableVoices[0] }
+      });
+    }
+  }, [availableVoices, localConfig]);
+  const handleSaveConfig = () => {
+    setConfig?.(localConfig);
+    setIsSettingsOpen(false);
+  };
+  const isListening = status === "listening";
+  const isThinking = status === "processing";
+  const isSpeaking = status === "speaking";
+  const isConnecting = status === "connecting";
+  const isDisconnected = status === "disconnected";
+  const isError = status === "error";
+  return /* @__PURE__ */ jsxs("div", { className: "fixed inset-0 min-h-screen bg-black text-zinc-100 flex flex-col items-center justify-center p-4 selection:bg-accent/20 overflow-hidden", children: [
+    /* @__PURE__ */ jsx("div", { className: "fixed inset-0 pointer-events-none", children: /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: `absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[60vh] h-[60vh] blur-[120px] rounded-full opacity-20 transition-all duration-700
+          ${isListening ? "bg-green-500 scale-125" : isThinking ? "bg-yellow-500 scale-110" : isSpeaking ? "bg-blue-600 scale-125" : isError ? "bg-red-600 scale-110" : isDisconnected ? "bg-zinc-800 scale-90" : "bg-zinc-800 scale-100"}`
+      }
+    ) }),
+    /* @__PURE__ */ jsxs("div", { className: "absolute top-4 right-4 z-50 flex gap-2", children: [
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          onClick: () => setIsSettingsOpen(true),
+          className: "p-2 rounded-full hover:bg-zinc-900 text-zinc-500 hover:text-zinc-300 transition-colors",
+          title: "Settings",
+          children: /* @__PURE__ */ jsx(Settings, { className: "w-5 h-5" })
+        }
+      ),
+      onTogglePip && /* @__PURE__ */ jsx(
+        "button",
+        {
+          onClick: onTogglePip,
+          className: "p-2 rounded-full hover:bg-zinc-900 text-zinc-500 hover:text-zinc-300 transition-colors",
+          title: "Enter Picture-in-Picture Mode",
+          children: /* @__PURE__ */ jsx(Minimize2, { className: "w-5 h-5" })
+        }
+      )
+    ] }),
+    isSettingsOpen && /* @__PURE__ */ jsx("div", { className: "fixed inset-0 z-[60] bg-black/80 backdrop-blur-sm flex items-center justify-center p-4", children: /* @__PURE__ */ jsxs("div", { className: "bg-zinc-900 border border-zinc-700 rounded-2xl w-full max-w-md p-6 shadow-2xl animate-in fade-in zoom-in-95 duration-200", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex justify-between items-center mb-6", children: [
+        /* @__PURE__ */ jsx("h2", { className: "text-xl font-semibold text-white", children: "Voice Settings" }),
+        /* @__PURE__ */ jsx("button", { onClick: () => setIsSettingsOpen(false), className: "text-zinc-500 hover:text-white", children: /* @__PURE__ */ jsx(X, { className: "w-5 h-5" }) })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+        /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx("label", { className: "block text-xs font-mono text-zinc-500 mb-1 uppercase", children: "LLM Model" }),
+          /* @__PURE__ */ jsx(
+            "select",
+            {
+              value: localConfig.llmModel || LLM_MODELS[0],
+              onChange: (e) => setLocalConfig({ ...localConfig, llmModel: e.target.value }),
+              className: "w-full bg-zinc-950 border border-zinc-800 rounded px-3 py-2 text-sm focus:border-blue-500 outline-none appearance-none",
+              children: LLM_MODELS.map((m) => /* @__PURE__ */ jsx("option", { value: m, children: m }, m))
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx("label", { className: "block text-xs font-mono text-zinc-500 mb-1 uppercase", children: "STT Model" }),
+          /* @__PURE__ */ jsx(
+            "select",
+            {
+              value: localConfig.sttModel || STT_MODELS[0],
+              onChange: (e) => setLocalConfig({ ...localConfig, sttModel: e.target.value }),
+              className: "w-full bg-zinc-950 border border-zinc-800 rounded px-3 py-2 text-sm focus:border-blue-500 outline-none appearance-none",
+              children: STT_MODELS.map((m) => /* @__PURE__ */ jsx("option", { value: m, children: m }, m))
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx("label", { className: "block text-xs font-mono text-zinc-500 mb-1 uppercase", children: "TTS Model" }),
+          /* @__PURE__ */ jsx(
+            "select",
+            {
+              value: localConfig.tts?.model || TTS_MODELS[0],
+              onChange: (e) => setLocalConfig({ ...localConfig, tts: { ...localConfig.tts, model: e.target.value } }),
+              className: "w-full bg-zinc-950 border border-zinc-800 rounded px-3 py-2 text-sm focus:border-blue-500 outline-none appearance-none",
+              children: TTS_MODELS.map((m) => /* @__PURE__ */ jsx("option", { value: m, children: m }, m))
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx("label", { className: "block text-xs font-mono text-zinc-500 mb-1 uppercase", children: "Voice" }),
+          /* @__PURE__ */ jsx(
+            "select",
+            {
+              value: localConfig.tts?.speaker || availableVoices[0],
+              onChange: (e) => setLocalConfig({ ...localConfig, tts: { ...localConfig.tts, speaker: e.target.value } }),
+              className: "w-full bg-zinc-950 border border-zinc-800 rounded px-3 py-2 text-sm focus:border-blue-500 outline-none appearance-none",
+              children: availableVoices.map((v) => /* @__PURE__ */ jsx("option", { value: v, children: v }, v))
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx("label", { className: "block text-xs font-mono text-zinc-500 mb-1 uppercase", children: "MCP Server Proxy URL" }),
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              type: "text",
+              placeholder: "https://shvm.in/mcp",
+              value: localConfig.mcpServer || "",
+              onChange: (e) => setLocalConfig({ ...localConfig, mcpServer: e.target.value }),
+              className: "w-full bg-zinc-950 border border-zinc-800 rounded px-3 py-2 text-sm focus:border-blue-500 outline-none"
+            }
+          )
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "mt-6 flex justify-end gap-2", children: [
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: () => setIsSettingsOpen(false),
+            className: "px-4 py-2 text-sm font-mono text-zinc-400 hover:text-white transition-colors",
+            children: "Cancel"
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          "button",
+          {
+            onClick: handleSaveConfig,
+            className: "px-4 py-2 text-sm font-mono bg-blue-600 hover:bg-blue-500 text-white rounded flex items-center gap-2 transition-colors",
+            children: [
+              /* @__PURE__ */ jsx(Save, { className: "w-4 h-4" }),
+              " Save"
+            ]
+          }
+        )
+      ] })
+    ] }) }),
+    feedback && /* @__PURE__ */ jsx("div", { className: "fixed top-4 left-1/2 -translate-x-1/2 z-[70]", children: /* @__PURE__ */ jsx("div", { className: "text-yellow-400 text-sm font-mono bg-yellow-900/20 px-3 py-1 rounded border border-yellow-900/50 animate-in fade-in slide-in-from-top-2 max-w-xs text-center break-words", children: feedback }) }),
+    isError && error && /* @__PURE__ */ jsx("div", { className: "fixed top-4 left-1/2 -translate-x-1/2 z-[70]", children: /* @__PURE__ */ jsx("div", { className: "text-red-400 text-sm font-mono bg-red-900/20 px-3 py-1 rounded border border-red-900/50 animate-in fade-in slide-in-from-top-2 max-w-xs text-center break-words", children: error }) }),
+    /* @__PURE__ */ jsxs("div", { className: "relative z-10 flex flex-col items-center gap-6", children: [
+      /* @__PURE__ */ jsxs("div", { className: "text-center", children: [
+        /* @__PURE__ */ jsx("h1", { className: "text-3xl md:text-4xl font-display font-semibold tracking-tight", children: isListening ? "Listening" : isThinking ? "Processing" : isSpeaking ? "Speaking" : isConnecting ? "Connecting" : isError ? "Error" : isDisconnected ? "Ready" : "Ready" }),
+        /* @__PURE__ */ jsx("div", { className: "mt-3 flex justify-center", children: /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: `h-1.5 rounded-full transition-all duration-500 ${isListening ? "w-16 bg-green-500" : isThinking ? "w-16 bg-yellow-500 animate-pulse" : isSpeaking ? "w-24 bg-blue-500" : isConnecting ? "w-8 bg-zinc-500 animate-pulse" : isError ? "w-16 bg-red-500 conversation-shake" : "w-2 bg-zinc-700"}`
+          }
+        ) })
+      ] }),
+      /* @__PURE__ */ jsxs(
+        "button",
+        {
+          disabled: isConnecting || isError || isDisconnected,
+          onClick: () => (isThinking || isSpeaking) && cancel(),
+          className: `group relative w-48 h-48 rounded-full flex items-center justify-center border-4 transition-all duration-300 outline-none
+            ${isListening ? "border-green-500/50 bg-green-500/10 scale-105 shadow-[0_0_40px_rgba(34,197,94,0.3)]" : isThinking ? "border-yellow-500/50 bg-yellow-500/10 shadow-[0_0_40px_rgba(234,179,8,0.3)] animate-pulse cursor-pointer hover:border-red-500/50 hover:bg-red-500/10" : isSpeaking ? "border-blue-500/50 bg-blue-500/10 shadow-[0_0_40px_rgba(59,130,246,0.3)] cursor-pointer hover:border-red-500/50 hover:bg-red-500/10" : isError ? "border-red-500/50 bg-red-500/10 hover:border-red-400 cursor-not-allowed" : isDisconnected ? "border-zinc-800/50 bg-black/50 cursor-not-allowed" : "border-zinc-800 bg-zinc-900 hover:border-zinc-700 hover:bg-zinc-800"}`,
+          children: [
+            isListening ? /* @__PURE__ */ jsx(Radio, { className: "w-16 h-16 text-green-500 animate-pulse" }) : isThinking ? /* @__PURE__ */ jsx(Loader2, { className: "w-16 h-16 text-yellow-500 animate-spin group-hover:hidden" }) : isSpeaking ? /* @__PURE__ */ jsx(Volume2, { className: "w-16 h-16 text-blue-500 animate-bounce group-hover:hidden" }) : isError ? /* @__PURE__ */ jsx(AlertCircle, { className: "w-16 h-16 text-red-500" }) : isDisconnected ? /* @__PURE__ */ jsx(WifiOff, { className: "w-16 h-16 text-zinc-600" }) : /* @__PURE__ */ jsx(Mic, { className: "w-16 h-16 text-zinc-500" }),
+            (isThinking || isSpeaking) && /* @__PURE__ */ jsx(Square, { className: "w-16 h-16 text-red-500 absolute hidden group-hover:block fill-current" })
+          ]
+        }
+      ),
+      isError || isDisconnected ? /* @__PURE__ */ jsx(
+        "button",
+        {
+          onClick: () => connect(),
+          className: "text-zinc-400 hover:text-white text-sm font-mono border border-zinc-700 px-4 py-2 rounded hover:bg-zinc-800 transition-colors",
+          children: isError ? "Retry Connection" : "Start Voice Session"
+        }
+      ) : isThinking || isSpeaking ? /* @__PURE__ */ jsxs(
+        "button",
+        {
+          onClick: cancel,
+          className: "text-zinc-400 hover:text-red-400 text-sm font-mono border border-zinc-700 px-4 py-2 rounded hover:bg-zinc-800 transition-colors flex items-center gap-2",
+          children: [
+            /* @__PURE__ */ jsx(Square, { className: "w-3 h-3 fill-current" }),
+            " Stop"
+          ]
+        }
+      ) : /* @__PURE__ */ jsx("p", { className: "text-zinc-500 text-sm font-mono text-center h-6", children: vadLoading ? "Loading voice activity detection\u2026" : "Just start talking" }),
+      /* @__PURE__ */ jsxs("div", { className: "w-full min-h-[150px] max-h-[30vh] overflow-y-auto space-y-4 mask-gradient-b flex flex-col pb-4 px-2 scrollbar-thin scrollbar-thumb-zinc-800 scrollbar-track-transparent", children: [
+        transcript && transcript.map((msg) => /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: `flex flex-col space-y-1 animate-in slide-in-from-bottom-2 fade-in duration-300 ${msg.role === "user" ? "items-end" : "items-start"}`,
+            children: [
+              /* @__PURE__ */ jsx("span", { className: "text-[10px] font-mono text-zinc-600 uppercase tracking-widest", children: msg.role }),
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: `px-4 py-2 rounded-2xl max-w-[90%] text-sm leading-relaxed shadow-lg break-words
+                ${msg.role === "user" ? "bg-zinc-800/80 text-zinc-200 rounded-tr-sm border border-zinc-700/50" : "bg-blue-900/20 text-blue-100 border border-blue-500/20 rounded-tl-sm backdrop-blur-sm"}`,
+                  children: msg.content
+                }
+              )
+            ]
+          },
+          msg.id
+        )),
+        /* @__PURE__ */ jsx("div", { ref: transcriptEndRef })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        onClick: () => setIsDebugOpen(!isDebugOpen),
+        className: `fixed bottom-4 right-4 p-2 rounded-full transition-all duration-300 z-50
+                    ${isDebugOpen ? "bg-zinc-800 text-white shadow-xl" : "bg-transparent text-zinc-700 hover:text-zinc-400 hover:bg-zinc-900"}`,
+        children: /* @__PURE__ */ jsx(Terminal, { className: "w-5 h-5" })
+      }
+    ),
+    isDebugOpen && /* @__PURE__ */ jsx("div", { className: "fixed inset-y-0 right-0 z-40", children: /* @__PURE__ */ jsx(VoiceDebugSidebar, { isOpen: isDebugOpen, onClose: () => setIsDebugOpen(false), events: history }) })
+  ] });
+}
+var init_FullScreenMode = __esm({
+  "src/ui/modes/FullScreenMode.tsx"() {
+    init_VoiceDebugSidebar();
+  }
+});
+function PipMode({ status, transcript, error, connect, cancel, onTogglePip }) {
+  const [isExpanded, setIsExpanded] = useState(true);
+  const isListening = status === "listening";
+  const isThinking = status === "processing";
+  const isSpeaking = status === "speaking";
+  const isDisconnected = status === "disconnected";
+  const isError = status === "error";
+  const getStatusColor = () => {
+    if (isListening) return "bg-green-500";
+    if (isThinking) return "bg-yellow-500";
+    if (isSpeaking) return "bg-blue-500";
+    if (isError) return "bg-red-500";
+    if (isDisconnected) return "bg-zinc-500";
+    return "bg-zinc-700";
+  };
+  const getStatusIcon = () => {
+    if (isListening) return /* @__PURE__ */ jsx(Radio, { className: "w-4 h-4 text-white animate-pulse" });
+    if (isThinking) return /* @__PURE__ */ jsx(Loader2, { className: "w-4 h-4 text-white animate-spin" });
+    if (isSpeaking) return /* @__PURE__ */ jsx(Volume2, { className: "w-4 h-4 text-white animate-bounce" });
+    if (isError) return /* @__PURE__ */ jsx(AlertCircle, { className: "w-4 h-4 text-white" });
+    if (isDisconnected) return /* @__PURE__ */ jsx(WifiOff, { className: "w-4 h-4 text-white" });
+    return /* @__PURE__ */ jsx(Mic, { className: "w-4 h-4 text-white" });
+  };
+  if (!isExpanded) {
+    return /* @__PURE__ */ jsx("div", { className: "fixed bottom-4 right-4 z-50 animate-in slide-in-from-bottom-4 fade-in duration-300", children: /* @__PURE__ */ jsx(
+      "button",
+      {
+        onClick: () => setIsExpanded(true),
+        className: `h-12 w-12 rounded-full shadow-lg flex items-center justify-center transition-all hover:scale-110 active:scale-95 ${getStatusColor()}`,
+        title: "Click to expand",
+        children: getStatusIcon()
+      }
+    ) });
+  }
+  return /* @__PURE__ */ jsxs("div", { className: "fixed bottom-4 right-4 z-50 w-80 bg-zinc-900/95 backdrop-blur-md border border-zinc-800 rounded-xl shadow-2xl flex flex-col overflow-hidden animate-in slide-in-from-bottom-2 fade-in duration-300", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between px-3 py-2 bg-zinc-950/50 border-b border-zinc-800", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsx("div", { className: `w-2 h-2 rounded-full ${getStatusColor()} ${isListening || isSpeaking ? "animate-pulse" : ""}` }),
+        /* @__PURE__ */ jsx("span", { className: "text-xs font-mono text-zinc-400 font-medium", children: isListening ? "Listening" : isThinking ? "Processing" : isSpeaking ? "Speaking" : "Idle" })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
+        onTogglePip && /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: onTogglePip,
+            className: "p-1.5 hover:bg-zinc-800 rounded text-zinc-500 hover:text-zinc-300 transition-colors",
+            title: "Maximize to Full Screen",
+            children: /* @__PURE__ */ jsx(Maximize2, { className: "w-3.5 h-3.5" })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: () => setIsExpanded(false),
+            className: "p-1.5 hover:bg-zinc-800 rounded text-zinc-500 hover:text-zinc-300 transition-colors",
+            title: "Minimize",
+            children: /* @__PURE__ */ jsx(X, { className: "w-3.5 h-3.5" })
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "p-4 flex flex-col gap-4 min-h-[120px]", children: [
+      /* @__PURE__ */ jsx("div", { className: "flex justify-center py-2", children: /* @__PURE__ */ jsx(
+        "button",
+        {
+          onClick: () => {
+            if (isDisconnected || isError) connect();
+            else if (isThinking || isSpeaking) cancel();
+          },
+          className: `w-16 h-16 rounded-full flex items-center justify-center transition-all duration-300
+                            ${isListening ? "bg-green-500/20 shadow-[0_0_20px_rgba(34,197,94,0.3)]" : isSpeaking ? "bg-blue-500/20 shadow-[0_0_20px_rgba(59,130,246,0.3)] hover:bg-red-500/20 hover:text-red-500 cursor-pointer" : "bg-zinc-800"}`,
+          title: isThinking || isSpeaking ? "Stop" : isError && error ? error : void 0,
+          children: getStatusIcon()
+        }
+      ) }),
+      /* @__PURE__ */ jsx("div", { className: "flex-1 space-y-2 max-h-[150px] overflow-y-auto noscrollbar mask-gradient-b", children: !transcript || transcript.length === 0 ? /* @__PURE__ */ jsx("div", { className: "text-center text-zinc-600 text-xs py-2 italic", children: isDisconnected ? "Disconnected" : "Conversation will appear here..." }) : transcript.slice(-2).map((msg) => /* @__PURE__ */ jsx("div", { className: `flex flex-col ${msg.role === "user" ? "items-end" : "items-start"}`, children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: `px-2 py-1.5 rounded-lg max-w-[90%] text-xs leading-relaxed
+                                    ${msg.role === "user" ? "bg-zinc-800 text-zinc-300" : "bg-blue-900/10 text-blue-100 border border-blue-500/10"}`,
+          children: msg.content
+        }
+      ) }, msg.id)) })
+    ] })
+  ] });
+}
+var init_PipMode = __esm({
+  "src/ui/modes/PipMode.tsx"() {
+  }
+});
+
+// src/ui/components/VaniClient.tsx
+var VaniClient_exports = {};
+__export(VaniClient_exports, {
+  default: () => VaniClient
+});
+function VaniClient({
+  onError,
+  onMessage,
+  initialTranscript,
+  defaultMode = "full",
+  mode: controlledMode,
+  onModeChange,
+  initialConfig,
+  serverUrl
+}) {
+  const [internalMode, setInternalMode] = useState(defaultMode);
+  const [config, setConfig] = useState(
+    initialConfig || {
+      sttModel: "@cf/openai/whisper-tiny-en",
+      llmModel: "@cf/meta/llama-3.1-8b-instruct",
+      tts: { model: "@cf/deepgram/aura-2-en", speaker: "luna" },
+      mcpServer: "https://shvm.in/mcp"
+    }
+  );
+  const [feedback, setFeedback] = useState(null);
+  const currentMode = controlledMode ?? internalMode;
+  const handleFeedback = (message) => {
+    setFeedback(message);
+    setTimeout(() => setFeedback(null), 3e3);
+  };
+  const session = useVoiceSession({
+    onError,
+    onMessage,
+    initialTranscript,
+    config,
+    onFeedback: handleFeedback,
+    serverUrl
+  });
+  const handleToggleMode = () => {
+    const newMode = currentMode === "full" ? "pip" : "full";
+    if (controlledMode === void 0) {
+      setInternalMode(newMode);
+    }
+    onModeChange?.(newMode);
+  };
+  return /* @__PURE__ */ jsx("div", { className: "vani-root", children: currentMode === "pip" ? /* @__PURE__ */ jsx(
+    PipMode,
+    {
+      ...session,
+      onTogglePip: handleToggleMode,
+      config,
+      setConfig,
+      feedback
+    }
+  ) : /* @__PURE__ */ jsx(
+    FullScreenMode,
+    {
+      ...session,
+      onTogglePip: handleToggleMode,
+      config,
+      setConfig,
+      feedback
+    }
+  ) });
+}
+var init_VaniClient = __esm({
+  "src/ui/components/VaniClient.tsx"() {
+    init_FullScreenMode();
+    init_PipMode();
+  }
+});
+var VaniClient2 = lazy(() => Promise.resolve().then(() => (init_VaniClient(), VaniClient_exports)));
+function Vani(props) {
+  const [mounted, setMounted] = useState(false);
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+  if (!mounted) return null;
+  return /* @__PURE__ */ jsx(Suspense, { fallback: null, children: /* @__PURE__ */ jsx(VaniClient2, { ...props }) });
+}
+
+export { Vani };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map