@joewinke/jatui 0.1.22 → 0.1.24

package/src/lib/components/UserAvatar.svelte

@@ -1,72 +0,0 @@
-<!--
-  UserAvatar — shows a user's avatar image or initials fallback.
-  Generic component with no DB type coupling.
-  For use anywhere a user needs to be visually represented.
--->
-<script lang="ts">
-  interface Props {
-    name?: string | null
-    email?: string | null
-    avatarUrl?: string | null
-    size?: 'xs' | 'sm' | 'md' | 'lg'
-    tooltip?: boolean
-    class?: string
-  }
-
-  let {
-    name = null,
-    email = null,
-    avatarUrl = null,
-    size = 'sm',
-    tooltip = true,
-    class: className = '',
-  }: Props = $props()
-
-  const sizeClasses: Record<string, string> = {
-    xs: 'w-5 h-5 text-[9px]',
-    sm: 'w-7 h-7 text-xs',
-    md: 'w-9 h-9 text-sm',
-    lg: 'w-12 h-12 text-base',
-  }
-
-  const initials = $derived.by(() => {
-    const source = name || email || ''
-    if (!source) return '?'
-    // For email, use first char before @
-    const parts = source.includes('@')
-      ? [source.split('@')[0]]
-      : source.split(' ').filter(Boolean)
-    if (parts.length >= 2) return (parts[0][0] + parts[parts.length - 1][0]).toUpperCase()
-    return parts[0]?.charAt(0).toUpperCase() || '?'
-  })
-
-  const label = $derived(name || email || 'Unknown')
-
-  // Derive a consistent color per user from their name/email
-  const avatarBg = $derived.by(() => {
-    const source = name || email || ''
-    if (!source) return 'oklch(0.65 0.10 240)'
-    let hash = 0
-    for (let i = 0; i < source.length; i++) {
-      hash = source.charCodeAt(i) + ((hash << 5) - hash)
-    }
-    const hues = [30, 85, 145, 200, 240, 270, 310, 350]
-    const hue = hues[Math.abs(hash) % hues.length]
-    return `oklch(0.62 0.14 ${hue})`
-  })
-</script>
-
-<div
-  class="inline-flex shrink-0 {className}"
-  title={tooltip ? label : undefined}
->
-  <div class="rounded-full overflow-hidden {sizeClasses[size]}">
-    {#if avatarUrl}
-      <img src={avatarUrl} alt={label} class="w-full h-full object-cover" />
-    {:else}
-      <div class="w-full h-full flex items-center justify-center font-semibold text-white" style="background: {avatarBg}">
-        {initials}
-      </div>
-    {/if}
-  </div>
-</div>

package/src/lib/components/VariablePicker.svelte

@@ -1,170 +0,0 @@
-<script lang="ts">
-  /**
-   * VariablePicker — browse and insert template merge variables.
-   *
-   * Renders the available merge variables for a document template, grouped by
-   * context (client / org / financial / custom). Clicking a variable inserts
-   * its `{{name}}` token at the caret of a bound textarea/input and/or fires
-   * an `onInsert` callback.
-   *
-   * Source of `groups`: the JST server-side registry
-   * `getVarsForCategory(category, template.available_vars)` in
-   * `src/lib/server/template-vars.ts`. Compute it in a `+page.server.ts` load
-   * (the registry is server-only) and pass the result straight in.
-   *
-   * This is a self-contained panel (not a modal) so it can sit beside a
-   * template editor as a sidebar. Wrap it in your own Drawer/Modal if needed.
-   */
-
-  import type { TemplateVar, TemplateVarGroup } from "../types/templateVars"
-
-  interface Props {
-    /** Variable groups to show. From `getVarsForCategory(...)`. */
-    groups: TemplateVarGroup[]
-    /**
-     * Optional textarea/input to insert into. When set, clicking a variable
-     * splices `{{name}}` at the current caret, restores focus + caret after
-     * the token, and dispatches an `input` event so `bind:value` updates.
-     */
-    targetEl?: HTMLTextAreaElement | HTMLInputElement | null
-    /** Called with the inserted token (`{{name}}`) and the bare var name. */
-    onInsert?: (token: string, varName: string) => void
-    /** Show the filter box. Default true. */
-    searchable?: boolean
-    /** Denser layout for narrow sidebars. Default false. */
-    compact?: boolean
-    /** Panel heading. Default "Variables". */
-    title?: string
-    /** Shown when there are no groups/vars at all. */
-    emptyText?: string
-  }
-
-  let {
-    groups,
-    targetEl = null,
-    onInsert,
-    searchable = true,
-    compact = false,
-    title = "Variables",
-    emptyText = "No variables available for this template.",
-  }: Props = $props()
-
-  let query = $state("")
-
-  const totalVars = $derived(
-    groups.reduce((n, g) => n + g.vars.length, 0),
-  )
-
-  // Filter vars by name/label/description, dropping groups left empty.
-  const filteredGroups = $derived.by<TemplateVarGroup[]>(() => {
-    const q = query.trim().toLowerCase()
-    if (!q) return groups
-    const out: TemplateVarGroup[] = []
-    for (const g of groups) {
-      const vars = g.vars.filter(
-        (v) =>
-          v.name.toLowerCase().includes(q) ||
-          v.label.toLowerCase().includes(q) ||
-          (v.description?.toLowerCase().includes(q) ?? false),
-      )
-      if (vars.length > 0) out.push({ ...g, vars })
-    }
-    return out
-  })
-
-  function tokenFor(v: TemplateVar): string {
-    return `{{${v.name}}}`
-  }
-
-  function insert(v: TemplateVar) {
-    const token = tokenFor(v)
-
-    if (targetEl) {
-      const el = targetEl
-      const start = el.selectionStart ?? el.value.length
-      const end = el.selectionEnd ?? el.value.length
-      el.value = el.value.slice(0, start) + token + el.value.slice(end)
-      const caret = start + token.length
-      // Restore focus + caret after the inserted token.
-      el.focus()
-      el.setSelectionRange(caret, caret)
-      // Notify Svelte bindings / listeners.
-      el.dispatchEvent(new Event("input", { bubbles: true }))
-    }
-
-    onInsert?.(token, v.name)
-  }
-</script>
-
-<div
-  class="border-base-300 bg-base-100 flex flex-col rounded-box border"
-  class:text-sm={compact}
->
-  <div class="border-base-300 flex items-center justify-between border-b px-4 py-3">
-    <h3 class="font-semibold">{title}</h3>
-    {#if totalVars > 0}
-      <span class="badge badge-ghost badge-sm">{totalVars}</span>
-    {/if}
-  </div>
-
-  {#if searchable && totalVars > 0}
-    <div class="border-base-300 border-b p-3">
-      <input
-        type="text"
-        class="input input-bordered input-sm w-full"
-        placeholder="Filter variables…"
-        aria-label="Filter variables"
-        bind:value={query}
-      />
-    </div>
-  {/if}
-
-  <div class="flex-1 overflow-y-auto p-2" class:max-h-96={!compact}>
-    {#if totalVars === 0}
-      <p class="text-base-content/60 px-2 py-6 text-center text-sm">
-        {emptyText}
-      </p>
-    {:else if filteredGroups.length === 0}
-      <p class="text-base-content/60 px-2 py-6 text-center text-sm">
-        No variables match "{query}".
-      </p>
-    {:else}
-      {#each filteredGroups as group (group.id)}
-        <div class="mb-3 last:mb-0">
-          <div
-            class="text-base-content/45 px-2 pb-1 text-[0.8125rem] tracking-[0.005em]"
-          >
-            {group.label}
-          </div>
-          <div class="flex flex-col gap-0.5">
-            {#each group.vars as v (v.name)}
-              <button
-                type="button"
-                class="hover:bg-base-200 focus-visible:bg-base-200 group flex w-full flex-col items-start gap-0.5 rounded-md px-2 py-1.5 text-left transition-colors"
-                onclick={() => insert(v)}
-                title={`Insert ${tokenFor(v)}`}
-              >
-                <div class="flex w-full items-baseline gap-2">
-                  <span class="font-medium flex-1 min-w-0 truncate">{v.label}</span>
-                  <code
-                    class="text-base-content/60 group-hover:text-primary shrink-0 font-mono text-xs"
-                  >
-                    {tokenFor(v)}
-                  </code>
-                </div>
-                {#if v.description && !compact}
-                  <span class="text-base-content/45 text-[0.75rem]">
-                    {v.description}{#if v.example}
-                      <span class="text-base-content/45">
-                        — e.g. {v.example}</span
-                      >{/if}
-                  </span>
-                {/if}
-              </button>
-            {/each}
-          </div>
-        </div>
-      {/each}
-    {/if}
-  </div>
-</div>

package/src/lib/components/VoicePlayer.svelte

@@ -1,422 +0,0 @@
-<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}