@joewinke/jatui 0.1.25 → 0.1.26

package/dist/components/VoicePlayer.svelte

@@ -0,0 +1,422 @@
+<script lang="ts">
+  /**
+   * VoicePlayer — TTS playback widget with voice selection, volume, speed, and provider switching.
+   *
+   * Requires backend endpoints:
+   *   - voicesUrl (GET) — returns { voices: [{ voice_id, name, labels?, preview_url? }] }
+   *   - ttsUrl (POST) — accepts { text, voiceId, provider, speed } and returns audio/mpeg blob
+   */
+
+  let {
+    text,
+    voiceId,
+    voiceName,
+    onVoiceChange,
+    expandDirection = "left",
+    autoPlay = false,
+    onPlaybackComplete,
+    onError,
+    // External control
+    messageId,
+    onRegisterController,
+    onStateChange,
+    // API configuration
+    voicesUrl = "/api/voices",
+    ttsUrl = "/api/tts",
+  } = $props<{
+    text?: string
+    voiceId?: string
+    voiceName?: string
+    onVoiceChange?: (voiceId: string, voiceName: string, provider: string) => void
+    expandDirection?: "left" | "right"
+    autoPlay?: boolean
+    onPlaybackComplete?: () => void
+    onError?: (message: string) => void
+    messageId?: string
+    onRegisterController?: (messageId: string, controller: any) => void
+    onStateChange?: (playing: boolean, loading: boolean) => void
+    voicesUrl?: string
+    ttsUrl?: string
+  }>()
+
+  let audioEl = $state<HTMLAudioElement | null>(null)
+  let isPlaying = $state(false)
+  let isPaused = $state(false)
+  let isLoadingAudio = $state(false)
+  let audioUrl = $state<string | null>(null)
+
+  let showControls = $state(false)
+  let showSettings = $state(false)
+
+  let provider = $state<"openai" | "elevenlabs">("openai")
+
+  let voices = $state<any[]>([])
+  let voicesLoading = $state(false)
+  let showVoices = $state(false)
+  // svelte-ignore state_referenced_locally
+  let selectedVoiceId = $state<string | undefined>(voiceId || "alloy")
+
+  let speed = $state(1.0)
+
+  let autoPlayAttempted = $state(false)
+  let manuallyPaused = $state(false)
+
+  const controller = {
+    play: () => playTextAudio(),
+    pause: () => pauseTextAudio(),
+    isPlaying: () => isPlaying,
+    isLoading: () => isLoadingAudio
+  }
+
+  function reportError(msg: string) {
+    if (onError) onError(msg)
+    else console.error(msg)
+  }
+
+  $effect(() => {
+    if (voiceId && voiceId !== selectedVoiceId) {
+      selectedVoiceId = voiceId
+    }
+  })
+
+  async function fetchVoices() {
+    voicesLoading = true
+    try {
+      const res = await fetch(`${voicesUrl}?provider=${provider}`)
+      if (!res.ok) throw new Error("Failed to fetch voices")
+      const data = await res.json()
+      voices = data.voices || []
+    } catch (e: any) {
+      reportError("Failed to load voices: " + (e.message || e))
+    } finally {
+      voicesLoading = false
+    }
+  }
+
+  function switchProvider(newProvider: "openai" | "elevenlabs") {
+    provider = newProvider
+    selectedVoiceId = newProvider === "openai" ? "alloy" : undefined
+    if (voices.length === 0 || provider !== newProvider) {
+      fetchVoices()
+    }
+    showSettings = false
+  }
+
+  async function playTextAudio() {
+    try {
+      manuallyPaused = false
+
+      if (audioEl && isPaused) {
+        audioEl.play()
+        isPlaying = true
+        isPaused = false
+        onStateChange?.(true, false)
+        return
+      }
+      if (isPlaying || isLoadingAudio) return
+
+      if (!text || !text.trim()) {
+        reportError("No text to play")
+        return
+      }
+
+      if (audioEl) {
+        audioEl.pause()
+        audioEl = null
+        audioUrl && URL.revokeObjectURL(audioUrl)
+        audioUrl = null
+      }
+
+      isLoadingAudio = true
+      onStateChange?.(false, true)
+
+      const res = await fetch(ttsUrl, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ text, voiceId: selectedVoiceId, provider, speed }),
+      })
+
+      if (!res.ok) {
+        isLoadingAudio = false
+        onStateChange?.(false, false)
+        const err = await res.json().catch(() => ({}))
+        reportError("TTS error: " + (err.error || res.statusText))
+        return
+      }
+
+      const audioData = await res.arrayBuffer()
+      audioUrl = URL.createObjectURL(new Blob([audioData], { type: "audio/mpeg" }))
+      audioEl = new Audio(audioUrl)
+
+      audioEl.onended = () => {
+        isPlaying = false
+        isPaused = false
+        isLoadingAudio = false
+        onStateChange?.(false, false)
+        audioEl = null
+        audioUrl && URL.revokeObjectURL(audioUrl)
+        audioUrl = null
+        onPlaybackComplete?.()
+      }
+      audioEl.onpause = () => {
+        if (audioEl && !audioEl.ended) {
+          isPlaying = false
+          isPaused = true
+          onStateChange?.(false, false)
+        }
+      }
+      audioEl.onplay = () => {
+        isPlaying = true
+        isPaused = false
+        isLoadingAudio = false
+        onStateChange?.(true, false)
+      }
+
+      await audioEl.play()
+    } catch (e: any) {
+      reportError("Failed to play audio: " + (e.message || e))
+      isPlaying = false
+      isPaused = false
+      isLoadingAudio = false
+      onStateChange?.(false, false)
+      audioEl = null
+      if (audioUrl) {
+        URL.revokeObjectURL(audioUrl)
+        audioUrl = null
+      }
+    }
+  }
+
+  function pauseTextAudio() {
+    if (audioEl && isPlaying) {
+      manuallyPaused = true
+      audioEl.pause()
+    }
+  }
+
+  function toggleVoices() {
+    showVoices = !showVoices
+    if (showVoices && voices.length === 0 && !voicesLoading) {
+      fetchVoices()
+    }
+  }
+
+  function toggleSettings() {
+    showSettings = !showSettings
+  }
+
+  function selectVoice(id: string, name: string) {
+    selectedVoiceId = id
+    showVoices = false
+    if (onVoiceChange) onVoiceChange(id, name, provider)
+  }
+
+  $effect(() => {
+    if (messageId && onRegisterController && autoPlay) {
+      onRegisterController(messageId, controller)
+    }
+  })
+
+  $effect(() => {
+    if (text) {
+      autoPlayAttempted = false
+      manuallyPaused = false
+    }
+  })
+
+  $effect(() => {
+    if (autoPlay && text?.trim() && !isPlaying && !isLoadingAudio && !autoPlayAttempted && !manuallyPaused) {
+      autoPlayAttempted = true
+      setTimeout(() => playTextAudio(), 100)
+    }
+  })
+</script>
+
+{#if text && text.trim()}
+  <div class="flex items-center gap-1 justify-end">
+    <!-- svelte-ignore a11y_no_static_element_interactions -->
+    <div
+      class="relative"
+      onmouseenter={() => (showControls = true)}
+      onmouseleave={() => (showControls = false)}
+      onfocus={() => (showControls = true)}
+      onblur={() => (showControls = false)}
+    >
+      {#if !showControls}
+        <button
+          class="badge badge-ghost p-2 rounded-full flex items-center justify-center"
+          aria-label="Audio controls"
+          onclick={() => (showControls = !showControls)}
+          style="min-width: 32px; min-height: 32px;"
+        >
+          <!-- Volume2 icon -->
+          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"/><path d="M15.54 8.46a5 5 0 0 1 0 7.07"/><path d="M19.07 4.93a10 10 0 0 1 0 14.14"/></svg>
+        </button>
+      {/if}
+      {#if showControls}
+        <div
+          class="absolute flex items-center gap-2 bg-base-200 border border-base-300 rounded-full z-50 transition-all {expandDirection === 'right' ? 'right-0' : 'left-0'}"
+          style="min-width: 180px;"
+        >
+          <!-- Play/Pause -->
+          <button
+            class="btn btn-xs btn-ghost flex items-center justify-center"
+            title={isLoadingAudio ? "Loading audio" : isPlaying && !isPaused ? "Pause" : isPaused ? "Resume" : "Play audio"}
+            aria-label={isLoadingAudio ? "Loading audio" : isPlaying && !isPaused ? "Pause" : isPaused ? "Resume" : "Play audio"}
+            onclick={isLoadingAudio ? undefined : isPlaying && !isPaused ? pauseTextAudio : playTextAudio}
+            disabled={isLoadingAudio}
+            tabindex="-1"
+            style="min-width: 28px; min-height: 28px;"
+          >
+            {#if isLoadingAudio}
+              <span class="loading loading-dots loading-xs"></span>
+            {:else if isPlaying && !isPaused}
+              <!-- PauseCircle -->
+              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="10" x2="10" y1="15" y2="9"/><line x1="14" x2="14" y1="15" y2="9"/></svg>
+            {:else}
+              <!-- PlayCircle -->
+              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><polygon points="10 8 16 12 10 16 10 8"/></svg>
+            {/if}
+          </button>
+
+          <!-- Volume slider -->
+          <input
+            type="range"
+            min="0"
+            max="1"
+            step="0.01"
+            value={audioEl ? audioEl.volume : 1}
+            oninput={(e) => {
+              const target = e.target as HTMLInputElement
+              if (audioEl && target) audioEl.volume = +target.value
+            }}
+            aria-label="Volume"
+            class="range range-xs w-16"
+            tabindex="-1"
+            style="min-width: 48px;"
+          />
+
+          <!-- Settings -->
+          <button
+            class="btn btn-xs btn-ghost flex items-center justify-center"
+            title="TTS Settings"
+            aria-label="TTS Settings"
+            onclick={(e) => { e.stopPropagation(); toggleSettings() }}
+            tabindex="-1"
+            style="min-width: 28px; min-height: 28px;"
+          >
+            <!-- Settings icon -->
+            <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z"/><circle cx="12" cy="12" r="3"/></svg>
+          </button>
+
+          <!-- Voice Dropdown -->
+          <div class="relative">
+            <button
+              class="btn btn-xs btn-ghost flex items-center justify-between border border-base-300 rounded-full px-2 py-1 bg-base-200 hover:bg-base-300 transition-colors w-24"
+              title="Select voice"
+              aria-label="Select voice"
+              onclick={toggleVoices}
+              disabled={voicesLoading}
+              style="min-width: 64px;"
+              tabindex="-1"
+            >
+              <span class="text-xs font-semibold truncate">
+                {voicesLoading ? "..." : voiceName ? voiceName : "Voice"}
+              </span>
+              <span class="flex-1"></span>
+              <!-- ChevronDown -->
+              <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="opacity-70"><path d="m6 9 6 6 6-6"/></svg>
+            </button>
+
+            <!-- Settings panel -->
+            {#if showSettings}
+              <div
+                class="absolute right-0 top-full z-50 bg-base-200 border border-base-300 rounded-lg p-3 w-64"
+                style="margin-top: 0.25rem;"
+              >
+                <div class="mb-3">
+                  <h3 class="font-semibold mb-2">TTS Provider</h3>
+                  <div class="flex gap-2">
+                    <button class={`btn btn-xs ${provider === "openai" ? "btn-primary" : "btn-ghost"}`} onclick={() => switchProvider("openai")}>OpenAI</button>
+                    <button class={`btn btn-xs ${provider === "elevenlabs" ? "btn-primary" : "btn-ghost"}`} onclick={() => switchProvider("elevenlabs")}>ElevenLabs</button>
+                  </div>
+                </div>
+
+                {#if provider === "openai"}
+                  <div>
+                    <h3 class="font-semibold mb-1">Speed</h3>
+                    <div class="flex items-center gap-2">
+                      <input
+                        type="range"
+                        min="0.25"
+                        max="4.0"
+                        step="0.05"
+                        value={speed}
+                        oninput={(e) => { speed = +(e.target as HTMLInputElement).value }}
+                        class="range range-xs flex-1"
+                      />
+                      <span class="text-xs w-8 text-right">{speed.toFixed(2)}x</span>
+                    </div>
+                  </div>
+                {/if}
+              </div>
+            {/if}
+
+            <!-- Voice selection dropdown -->
+            {#if showVoices}
+              <div
+                class="absolute right-0 top-full z-50 bg-base-200 border border-base-300 rounded-lg p-2 max-h-64 overflow-y-auto w-64"
+                style="margin-top: 0.25rem;"
+              >
+                {#if voicesLoading}
+                  <div class="flex items-center gap-2 p-2">
+                    <span class="loading loading-dots loading-xs"></span>
+                    <span>Loading voices...</span>
+                  </div>
+                {:else if voices.length === 0}
+                  <div class="p-2 text-xs text-base-content/60">No voices found</div>
+                {:else}
+                  <ul>
+                    {#each voices as voice}
+                      <button
+                        class="w-full text-left p-2 hover:bg-base-300 rounded-lg cursor-pointer transition-colors"
+                        onclick={() => selectVoice(voice.voice_id, voice.name)}
+                      >
+                        <div class="mb-1">
+                          <span class="font-semibold text-base-content truncate block">{voice.name}</span>
+                          {#if voice.labels}
+                            <span class="text-xs text-base-content/70 truncate block">
+                              {[voice.labels.accent, voice.labels.gender, voice.labels.age, voice.labels.description, voice.labels.use_case]
+                                .filter(Boolean)
+                                .map((s) => s.charAt(0).toUpperCase() + s.slice(1))
+                                .join(", ")}
+                            </span>
+                          {/if}
+                        </div>
+                        <div class="flex items-center gap-1">
+                          {#if voice.preview_url}
+                            <audio
+                              src={voice.preview_url}
+                              controls
+                              style="height:1.5em;"
+                              preload="none"
+                              onclick={(e) => e.stopPropagation()}
+                              aria-label="Preview {voice.name} voice"
+                            ></audio>
+                          {/if}
+                          {#if selectedVoiceId === voice.voice_id}
+                            <span class="badge badge-primary badge-xs ml-2">Selected</span>
+                          {/if}
+                        </div>
+                      </button>
+                    {/each}
+                  </ul>
+                {/if}
+              </div>
+            {/if}
+          </div>
+        </div>
+      {/if}
+    </div>
+  </div>
+{/if}

package/dist/components/VoicePlayer.svelte.d.ts

@@ -0,0 +1,18 @@
+type $$ComponentProps = {
+    text?: string;
+    voiceId?: string;
+    voiceName?: string;
+    onVoiceChange?: (voiceId: string, voiceName: string, provider: string) => void;
+    expandDirection?: "left" | "right";
+    autoPlay?: boolean;
+    onPlaybackComplete?: () => void;
+    onError?: (message: string) => void;
+    messageId?: string;
+    onRegisterController?: (messageId: string, controller: any) => void;
+    onStateChange?: (playing: boolean, loading: boolean) => void;
+    voicesUrl?: string;
+    ttsUrl?: string;
+};
+declare const VoicePlayer: import("svelte").Component<$$ComponentProps, {}, "">;
+type VoicePlayer = ReturnType<typeof VoicePlayer>;
+export default VoicePlayer;