Merge pull request #198 from shridarpatil/feat/per-org-hold-music-ringback

feat: per-org hold music & ringback upload with auto-transcoding

Author: shridarpatil

cmd/whatomate/main.go

@@ -732,6 +732,7 @@ func setupRoutes(g *fastglue.Fastglue, app *handlers.App, lo logf.Logger, basePa
 	// Organization Settings
 	g.GET("/api/org/settings", app.GetOrganizationSettings)
 	g.PUT("/api/org/settings", app.UpdateOrganizationSettings)
+	g.POST("/api/org/audio", app.UploadOrgAudio)
 
 	// Organizations
 	g.GET("/api/organizations", app.ListOrganizations)

docker/Dockerfile

@@ -1,4 +1,17 @@
-# Build stage
+# Frontend build stage
+FROM node:22-alpine AS frontend-builder
+
+WORKDIR /app/frontend
+
+# Copy frontend dependency files first for caching
+COPY frontend/package.json frontend/package-lock.json ./
+RUN npm ci
+
+# Copy frontend source and build
+COPY frontend/ .
+RUN npm run build
+
+# Go build stage
 FROM golang:1.24.5-alpine AS builder
 
 WORKDIR /app
@@ -13,6 +26,9 @@ RUN go mod download
 # Copy source code
 COPY . .
 
+# Embed frontend build into Go binary
+COPY --from=frontend-builder /app/frontend/dist/ ./internal/frontend/dist/
+
 # Build the binary
 RUN CGO_ENABLED=0 GOOS=linux go build -a -installsuffix cgo -o whatomate ./cmd/whatomate
 
@@ -34,9 +50,9 @@ FROM debian:bookworm-slim
 
 WORKDIR /app
 
-# Install runtime dependencies (TTS: espeak-ng, opus-tools)
+# Install runtime dependencies (TTS: espeak-ng, opus-tools; transcoding: ffmpeg)
 RUN apt-get update && apt-get install -y --no-install-recommends \
-    ca-certificates tzdata espeak-ng opus-tools \
+    ca-certificates tzdata espeak-ng opus-tools ffmpeg \
     && rm -rf /var/lib/apt/lists/*
 
 # Copy binary from builder

docker/Dockerfile.goreleaser

@@ -19,9 +19,9 @@ FROM debian:bookworm-slim
 
 WORKDIR /app
 
-# Install runtime dependencies (TTS: espeak-ng, opus-tools)
+# Install runtime dependencies (TTS: espeak-ng, opus-tools; transcoding: ffmpeg)
 RUN apt-get update && apt-get install -y --no-install-recommends \
-    ca-certificates tzdata espeak-ng opus-tools \
+    ca-certificates tzdata espeak-ng opus-tools ffmpeg \
     && rm -rf /var/lib/apt/lists/*
 
 # Copy pre-built binary from GoReleaser

frontend/src/i18n/locales/en.json

@@ -530,7 +530,16 @@
     "maxCallDurationDesc": "Maximum allowed call duration before auto-disconnect",
     "transferTimeout": "Transfer Timeout (seconds)",
     "transferTimeoutDesc": "How long to wait for an agent to accept a transferred call",
-    "callingSaved": "Calling settings saved"
+    "callingSaved": "Calling settings saved",
+    "holdMusic": "Hold Music",
+    "holdMusicDesc": "Audio played to callers while on hold during transfers",
+    "ringbackTone": "Ringback Tone",
+    "ringbackToneDesc": "Audio played to agents while waiting for the remote party to answer",
+    "uploadAudio": "Upload",
+    "currentFile": "Current file",
+    "noFileUploaded": "Using default",
+    "audioUploaded": "Audio file uploaded successfully",
+    "audioUploadFailed": "Failed to upload audio file"
   },
   "users": {
     "title": "User Management",

frontend/src/services/api.ts

@@ -571,7 +571,16 @@ export const organizationService = {
     calling_enabled?: boolean
     max_call_duration?: number
     transfer_timeout_secs?: number
-  }) => api.put('/org/settings', data)
+    hold_music_file?: string
+    ringback_file?: string
+  }) => api.put('/org/settings', data),
+  uploadOrgAudio: (file: File, type: 'hold_music' | 'ringback') => {
+    const formData = new FormData()
+    formData.append('file', file)
+    return api.post(`/org/audio?type=${type}`, formData, {
+      headers: { 'Content-Type': 'multipart/form-data' }
+    })
+  }
 }
 
 // Organizations

frontend/src/views/settings/SettingsView.vue

@@ -12,7 +12,7 @@ import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@
 import { PageHeader } from '@/components/shared'
 import LanguageSwitcher from '@/components/LanguageSwitcher.vue'
 import { toast } from 'vue-sonner'
-import { Settings, Bell, Loader2, Globe, Phone } from 'lucide-vue-next'
+import { Settings, Bell, Loader2, Globe, Phone, Upload, Play, Music } from 'lucide-vue-next'
 import { usersService, organizationService } from '@/services/api'
 
 const { t } = useI18n()
@@ -39,9 +39,20 @@ const notificationSettings = ref({
 const callingSettings = ref({
   calling_enabled: false,
   max_call_duration: 300,
-  transfer_timeout_secs: 120
+  transfer_timeout_secs: 120,
+  hold_music_file: '',
+  ringback_file: ''
 })
 
+const isUploadingHoldMusic = ref(false)
+const isUploadingRingback = ref(false)
+const holdMusicInput = ref<HTMLInputElement | null>(null)
+const ringbackInput = ref<HTMLInputElement | null>(null)
+const holdMusicAudio = ref<HTMLAudioElement | null>(null)
+const ringbackAudio = ref<HTMLAudioElement | null>(null)
+const playingHoldMusic = ref(false)
+const playingRingback = ref(false)
+
 onMounted(async () => {
   try {
     const [orgResponse, userResponse] = await Promise.all([
@@ -61,7 +72,9 @@ onMounted(async () => {
       callingSettings.value = {
         calling_enabled: orgData.settings?.calling_enabled || false,
         max_call_duration: orgData.settings?.max_call_duration || 300,
-        transfer_timeout_secs: orgData.settings?.transfer_timeout_secs || 120
+        transfer_timeout_secs: orgData.settings?.transfer_timeout_secs || 120,
+        hold_music_file: orgData.settings?.hold_music_file || '',
+        ringback_file: orgData.settings?.ringback_file || ''
       }
     }
 
@@ -129,6 +142,52 @@ async function saveCallingSettings() {
     isSubmitting.value = false
   }
 }
+
+async function uploadAudio(type: 'hold_music' | 'ringback', event: Event) {
+  const input = event.target as HTMLInputElement
+  const file = input?.files?.[0]
+  if (!file) return
+
+  const isHold = type === 'hold_music'
+  if (isHold) isUploadingHoldMusic.value = true
+  else isUploadingRingback.value = true
+
+  try {
+    const response = await organizationService.uploadOrgAudio(file, type)
+    const data = response.data.data || response.data
+    if (isHold) callingSettings.value.hold_music_file = data.filename
+    else callingSettings.value.ringback_file = data.filename
+    toast.success(t('settings.audioUploaded'))
+  } catch (error) {
+    toast.error(t('settings.audioUploadFailed'))
+  } finally {
+    if (isHold) isUploadingHoldMusic.value = false
+    else isUploadingRingback.value = false
+    input.value = ''
+  }
+}
+
+function togglePlayAudio(type: 'hold_music' | 'ringback') {
+  const isHold = type === 'hold_music'
+  const filename = isHold ? callingSettings.value.hold_music_file : callingSettings.value.ringback_file
+  if (!filename) return
+
+  const audioRef = isHold ? holdMusicAudio : ringbackAudio
+  const playingRef = isHold ? playingHoldMusic : playingRingback
+
+  if (playingRef.value && audioRef.value) {
+    audioRef.value.pause()
+    audioRef.value.currentTime = 0
+    playingRef.value = false
+    return
+  }
+
+  const audio = new Audio(`/api/ivr-flows/audio/${filename}`)
+  audioRef.value = audio
+  playingRef.value = true
+  audio.play()
+  audio.onended = () => { playingRef.value = false }
+}
 </script>
 
 <template>
@@ -320,6 +379,73 @@ async function saveCallingSettings() {
                     <p class="text-xs text-white/40 light:text-gray-500">{{ $t('settings.transferTimeoutDesc') }}</p>
                   </div>
                 </div>
+                <Separator class="bg-white/[0.08] light:bg-gray-200" />
+                <!-- Hold Music Upload -->
+                <div class="space-y-3" :class="{ 'opacity-50 pointer-events-none': !callingSettings.calling_enabled }">
+                  <div>
+                    <Label class="text-white/70 light:text-gray-700 flex items-center gap-2">
+                      <Music class="h-4 w-4" />
+                      {{ $t('settings.holdMusic') }}
+                    </Label>
+                    <p class="text-xs text-white/40 light:text-gray-500 mt-1">{{ $t('settings.holdMusicDesc') }}</p>
+                  </div>
+                  <div class="flex items-center gap-3">
+                    <span class="text-sm text-white/50 light:text-gray-500">
+                      {{ callingSettings.hold_music_file ? `${$t('settings.currentFile')}: ${callingSettings.hold_music_file}` : $t('settings.noFileUploaded') }}
+                    </span>
+                    <Button
+                      v-if="callingSettings.hold_music_file"
+                      variant="ghost"
+                      size="sm"
+                      class="h-8 w-8 p-0 text-white/50 hover:text-white light:text-gray-500 light:hover:text-gray-900"
+                      @click="togglePlayAudio('hold_music')"
+                    >
+                      <Play class="h-4 w-4" />
+                    </Button>
+                  </div>
+                  <div class="flex items-center gap-2">
+                    <input ref="holdMusicInput" type="file" accept=".ogg,.opus,.mp3,.wav" class="hidden" @change="uploadAudio('hold_music', $event)" />
+                    <Button variant="outline" size="sm" class="bg-white/[0.04] border-white/[0.1] text-white/70 hover:bg-white/[0.08] hover:text-white light:bg-white light:border-gray-200 light:text-gray-700 light:hover:bg-gray-50" @click="holdMusicInput?.click()" :disabled="isUploadingHoldMusic">
+                      <Loader2 v-if="isUploadingHoldMusic" class="mr-2 h-4 w-4 animate-spin" />
+                      <Upload v-else class="mr-2 h-4 w-4" />
+                      {{ $t('settings.uploadAudio') }}
+                    </Button>
+                    <span class="text-xs text-white/30 light:text-gray-400">.ogg, .opus, .mp3, .wav (max 5MB)</span>
+                  </div>
+                </div>
+                <!-- Ringback Tone Upload -->
+                <div class="space-y-3" :class="{ 'opacity-50 pointer-events-none': !callingSettings.calling_enabled }">
+                  <div>
+                    <Label class="text-white/70 light:text-gray-700 flex items-center gap-2">
+                      <Phone class="h-4 w-4" />
+                      {{ $t('settings.ringbackTone') }}
+                    </Label>
+                    <p class="text-xs text-white/40 light:text-gray-500 mt-1">{{ $t('settings.ringbackToneDesc') }}</p>
+                  </div>
+                  <div class="flex items-center gap-3">
+                    <span class="text-sm text-white/50 light:text-gray-500">
+                      {{ callingSettings.ringback_file ? `${$t('settings.currentFile')}: ${callingSettings.ringback_file}` : $t('settings.noFileUploaded') }}
+                    </span>
+                    <Button
+                      v-if="callingSettings.ringback_file"
+                      variant="ghost"
+                      size="sm"
+                      class="h-8 w-8 p-0 text-white/50 hover:text-white light:text-gray-500 light:hover:text-gray-900"
+                      @click="togglePlayAudio('ringback')"
+                    >
+                      <Play class="h-4 w-4" />
+                    </Button>
+                  </div>
+                  <div class="flex items-center gap-2">
+                    <input ref="ringbackInput" type="file" accept=".ogg,.opus,.mp3,.wav" class="hidden" @change="uploadAudio('ringback', $event)" />
+                    <Button variant="outline" size="sm" class="bg-white/[0.04] border-white/[0.1] text-white/70 hover:bg-white/[0.08] hover:text-white light:bg-white light:border-gray-200 light:text-gray-700 light:hover:bg-gray-50" @click="ringbackInput?.click()" :disabled="isUploadingRingback">
+                      <Loader2 v-if="isUploadingRingback" class="mr-2 h-4 w-4 animate-spin" />
+                      <Upload v-else class="mr-2 h-4 w-4" />
+                      {{ $t('settings.uploadAudio') }}
+                    </Button>
+                    <span class="text-xs text-white/30 light:text-gray-400">.ogg, .opus, .mp3, .wav (max 5MB)</span>
+                  </div>
+                </div>
                 <div class="flex justify-end pt-4">
                   <Button variant="outline" size="sm" class="bg-white/[0.04] border-white/[0.1] text-white/70 hover:bg-white/[0.08] hover:text-white light:bg-white light:border-gray-200 light:text-gray-700 light:hover:bg-gray-50" @click="saveCallingSettings" :disabled="isSubmitting">
                     <Loader2 v-if="isSubmitting" class="mr-2 h-4 w-4 animate-spin" />

internal/calling/outgoing.go

@@ -330,6 +330,18 @@ func (m *Manager) HandleOutgoingCallWebhook(callID, event, sdpAnswer string) {
 		session.Status = models.CallStatusRinging
 		session.mu.Unlock()
 
+		// Start ringback tone on the agent's speaker while the remote phone rings
+		ringbackFile := m.getOrgRingback(session.OrganizationID)
+		if ringbackFile != "" {
+			session.mu.Lock()
+			if session.AgentAudioTrack != nil && session.RingbackPlayer == nil {
+				player := NewAudioPlayer(session.AgentAudioTrack)
+				session.RingbackPlayer = player
+				go func() { _ = player.PlayFileLoop(ringbackFile) }()
+			}
+			session.mu.Unlock()
+		}
+
 		m.db.Model(&models.CallLog{}).
 			Where("id = ?", session.CallLogID).
 			Update("status", models.CallStatusRinging)
@@ -342,7 +354,12 @@ func (m *Manager) HandleOutgoingCallWebhook(callID, event, sdpAnswer string) {
 		})
 
 	case "accepted", "in_call", "connect":
+		// Stop ringback tone
 		session.mu.Lock()
+		if session.RingbackPlayer != nil {
+			session.RingbackPlayer.Stop()
+			session.RingbackPlayer = nil
+		}
 		session.Status = models.CallStatusAnswered
 		session.mu.Unlock()
 

internal/calling/session.go

@@ -4,6 +4,7 @@ import (
 	"context"
 	"fmt"
 	"os"
+	"path/filepath"
 	"sync"
 	"time"
 
@@ -50,6 +51,9 @@ type CallSession struct {
 	TransferCancel    context.CancelFunc
 	BridgeStarted     chan struct{} // closed when bridge takes over caller track
 
+	// Ringback (outgoing calls)
+	RingbackPlayer *AudioPlayer
+
 	// Outgoing call fields
 	Direction      models.CallDirection
 	AgentID        uuid.UUID
@@ -230,6 +234,33 @@ func (m *Manager) getOrgTransferTimeout(orgID uuid.UUID) int {
 	return m.config.TransferTimeoutSecs
 }
 
+// getOrgHoldMusic returns the hold music file path for a session's organization,
+// falling back to the global config default.
+func (m *Manager) getOrgHoldMusic(orgID uuid.UUID) string {
+	var org models.Organization
+	if err := m.db.Where("id = ?", orgID).First(&org).Error; err == nil && org.Settings != nil {
+		if v, ok := org.Settings["hold_music_file"].(string); ok && v != "" {
+			return filepath.Join(m.config.AudioDir, v)
+		}
+	}
+	return filepath.Join(m.config.AudioDir, m.config.HoldMusicFile)
+}
+
+// getOrgRingback returns the ringback file path for a session's organization,
+// falling back to the global config default.
+func (m *Manager) getOrgRingback(orgID uuid.UUID) string {
+	var org models.Organization
+	if err := m.db.Where("id = ?", orgID).First(&org).Error; err == nil && org.Settings != nil {
+		if v, ok := org.Settings["ringback_file"].(string); ok && v != "" {
+			return filepath.Join(m.config.AudioDir, v)
+		}
+	}
+	if m.config.RingbackFile != "" {
+		return filepath.Join(m.config.AudioDir, m.config.RingbackFile)
+	}
+	return ""
+}
+
 // cleanupSession removes a session and releases WebRTC resources
 func (m *Manager) cleanupSession(callID string) {
 	m.mu.Lock()
@@ -253,6 +284,9 @@ func (m *Manager) cleanupSession(callID string) {
 	if session.HoldPlayer != nil {
 		session.HoldPlayer.Stop()
 	}
+	if session.RingbackPlayer != nil {
+		session.RingbackPlayer.Stop()
+	}
 	if session.IVRPlayer != nil {
 		session.IVRPlayer.Stop()
 	}

internal/calling/transfer.go

@@ -3,7 +3,6 @@ package calling
 import (
 	"context"
 	"fmt"
-	"path/filepath"
 	"time"
 
 	"github.com/google/uuid"
@@ -57,8 +56,8 @@ func (m *Manager) initiateTransfer(session *CallSession, waAccount string, teamT
 	session.TransferStatus = models.CallTransferStatusWaiting
 	session.mu.Unlock()
 
-	// Start hold music on the caller's audio track
-	holdFile := filepath.Join(m.config.AudioDir, m.config.HoldMusicFile)
+	// Start hold music on the caller's audio track (org-level override or global default)
+	holdFile := m.getOrgHoldMusic(session.OrganizationID)
 	player := NewAudioPlayer(session.AudioTrack)
 
 	session.mu.Lock()