@joewinke/jatui 0.1.0

package/src/lib/components/VoicePlayer.svelte

@@ -0,0 +1,420 @@
+<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)
+  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">
+    <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 shadow-lg 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 shadow-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 shadow-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/src/lib/components/messaging/Avatar.svelte

@@ -0,0 +1,81 @@
+<!--
+  Simple Avatar Component for Messaging
+
+  Shows user avatar image with fallback to initials.
+  Used internally by messaging components.
+-->
+
+<script lang="ts">
+  interface Props {
+    name: string
+    avatarUrl?: string | null
+    size?: 'xs' | 'small' | 'medium' | 'large'
+    showStatus?: boolean
+    status?: 'online' | 'offline' | 'away' | 'busy'
+    class?: string
+  }
+
+  let {
+    name,
+    avatarUrl = null,
+    size = 'small',
+    showStatus = false,
+    status = 'offline',
+    class: className = '',
+  }: Props = $props()
+
+  const sizeClasses: Record<string, string> = {
+    xs: 'w-5 h-5 text-[10px]',
+    small: 'w-8 h-8 text-xs',
+    medium: 'w-10 h-10 text-sm',
+    large: 'w-12 h-12 text-base',
+  }
+
+  const statusDotSize: Record<string, string> = {
+    xs: 'w-1.5 h-1.5',
+    small: 'w-2 h-2',
+    medium: 'w-2.5 h-2.5',
+    large: 'w-3 h-3',
+  }
+
+  const statusColors: Record<string, string> = {
+    online: 'bg-success',
+    offline: 'bg-base-content/30',
+    away: 'bg-warning',
+    busy: 'bg-error',
+  }
+
+  function getInitials(fullName: string): string {
+    return fullName
+      .split(' ')
+      .map((part) => part[0])
+      .filter(Boolean)
+      .slice(0, 2)
+      .join('')
+      .toUpperCase()
+  }
+
+  const initials = $derived(getInitials(name))
+</script>
+
+<div class="relative inline-flex flex-shrink-0 {className}">
+  {#if avatarUrl}
+    <img
+      src={avatarUrl}
+      alt={name}
+      class="rounded-full object-cover {sizeClasses[size]}"
+    />
+  {:else}
+    <div
+      class="rounded-full bg-neutral text-neutral-content flex items-center justify-center font-medium {sizeClasses[size]}"
+    >
+      {initials}
+    </div>
+  {/if}
+
+  {#if showStatus}
+    <span
+      class="absolute bottom-0 right-0 rounded-full border-2 border-base-100 {statusDotSize[size]} {statusColors[status]}"
+    ></span>
+  {/if}
+</div>

package/src/lib/components/messaging/ChannelInfoModal.svelte

@@ -0,0 +1,163 @@
+<!--
+  ChannelInfoModal Component
+
+  Displays channel information and allows admins to edit channel details.
+  All updates via callbacks.
+-->
+
+<script lang="ts">
+  import type { Channel, ChannelCallbacks } from '../../types/messaging'
+
+  interface Props {
+    channel: Channel & { memberCount?: number; createdBy?: string; creatorName?: string }
+    currentUserRole: 'admin' | 'moderator' | 'member'
+    open: boolean
+    channelCallbacks?: ChannelCallbacks
+    onclose?: () => void
+    onchannelupdate?: (updatedChannel: Channel) => void
+    onchanneldelete?: (channelId: string) => void
+    onmanagemembers?: () => void
+  }
+
+  let {
+    channel,
+    currentUserRole,
+    open = false,
+    channelCallbacks,
+    onclose,
+    onchannelupdate,
+    onchanneldelete,
+    onmanagemembers,
+  }: Props = $props()
+
+  let isEditing = $state(false)
+  let editName = $state('')
+  let editDescription = $state('')
+  let saving = $state(false)
+  let showDeleteConfirm = $state(false)
+  let error = $state<string | null>(null)
+
+  const isAdmin = $derived(currentUserRole === 'admin')
+
+  function startEdit() {
+    editName = channel.name
+    editDescription = channel.description || ''
+    isEditing = true
+  }
+
+  async function saveEdit() {
+    if (!channelCallbacks || !editName.trim()) return
+    saving = true
+    error = null
+    try {
+      const updated = await channelCallbacks.updateChannel(channel.id, {
+        name: editName.trim(),
+        description: editDescription.trim() || undefined,
+      })
+      onchannelupdate?.(updated)
+      isEditing = false
+    } catch (err) {
+      error = err instanceof Error ? err.message : 'Failed to update channel'
+    } finally {
+      saving = false
+    }
+  }
+
+  async function handleDelete() {
+    if (!channelCallbacks) return
+    try {
+      await channelCallbacks.deleteChannel(channel.id)
+      onchanneldelete?.(channel.id)
+      onclose?.()
+    } catch (err) {
+      error = err instanceof Error ? err.message : 'Failed to delete channel'
+    }
+  }
+
+  function formatDate(dateString: string): string {
+    return new Date(dateString).toLocaleDateString('en-US', { month: 'long', day: 'numeric', year: 'numeric' })
+  }
+</script>
+
+{#if open}
+  <dialog class="modal modal-open">
+    <div class="modal-box max-w-md">
+      <div class="flex items-center justify-between mb-4">
+        <h3 class="font-bold text-lg">
+          {channel.emoji || '#'} {channel.name}
+        </h3>
+        <button class="btn btn-ghost btn-sm btn-circle" onclick={onclose}>✕</button>
+      </div>
+
+      {#if error}
+        <div class="alert alert-error mb-4"><span class="text-sm">{error}</span></div>
+      {/if}
+
+      {#if isEditing}
+        <div class="space-y-4">
+          <div>
+            <label class="label"><span class="label-text font-medium">Name</span></label>
+            <input type="text" bind:value={editName} class="input input-bordered w-full" maxlength="80" />
+          </div>
+          <div>
+            <label class="label"><span class="label-text font-medium">Description</span></label>
+            <textarea bind:value={editDescription} class="textarea textarea-bordered w-full" rows="3" maxlength="250"></textarea>
+          </div>
+          <div class="flex gap-2">
+            <button class="btn btn-primary btn-sm" onclick={saveEdit} disabled={saving || !editName.trim()}>
+              {#if saving}<span class="loading loading-spinner loading-xs"></span>{/if}
+              Save
+            </button>
+            <button class="btn btn-ghost btn-sm" onclick={() => (isEditing = false)}>Cancel</button>
+          </div>
+        </div>
+      {:else}
+        <div class="space-y-4">
+          <div>
+            <span class="text-xs text-base-content/50 uppercase tracking-wider">Type</span>
+            <p class="text-sm">{channel.type === 'private' ? '🔒 Private' : '# Public'}</p>
+          </div>
+
+          {#if channel.description}
+            <div>
+              <span class="text-xs text-base-content/50 uppercase tracking-wider">Description</span>
+              <p class="text-sm">{channel.description}</p>
+            </div>
+          {/if}
+
+          <div>
+            <span class="text-xs text-base-content/50 uppercase tracking-wider">Created</span>
+            <p class="text-sm">{formatDate(channel.createdAt)}{channel.creatorName ? ` by ${channel.creatorName}` : ''}</p>
+          </div>
+
+          <div class="flex flex-wrap gap-2">
+            {#if isAdmin}
+              <button class="btn btn-sm btn-ghost" onclick={startEdit}>✏ Edit</button>
+            {/if}
+            {#if onmanagemembers}
+              <button class="btn btn-sm btn-ghost" onclick={onmanagemembers}>👥 Members</button>
+            {/if}
+            {#if isAdmin}
+              {#if showDeleteConfirm}
+                <div class="flex items-center gap-2">
+                  <span class="text-sm text-error">Delete this channel?</span>
+                  <button class="btn btn-sm btn-error" onclick={handleDelete}>Confirm</button>
+                  <button class="btn btn-sm btn-ghost" onclick={() => (showDeleteConfirm = false)}>Cancel</button>
+                </div>
+              {:else}
+                <button class="btn btn-sm btn-ghost text-error" onclick={() => (showDeleteConfirm = true)}>🗑 Delete</button>
+              {/if}
+            {/if}
+          </div>
+        </div>
+      {/if}
+
+      <div class="modal-action">
+        <button class="btn btn-ghost" onclick={onclose}>Close</button>
+      </div>
+    </div>
+    <form method="dialog" class="modal-backdrop">
+      <button onclick={onclose}>close</button>
+    </form>
+  </dialog>
+{/if}