feat: add configurable completion notification sound
This commit is contained in:
admin committed
commit
f39875dc21
1 file changed
+266
@@ -0,0 +1,266 @@
|
||||
import {
|
||||
Button,
|
||||
host,
|
||||
Popover,
|
||||
PopoverContent,
|
||||
PopoverTrigger,
|
||||
STATUSBAR_AREAS,
|
||||
Switch,
|
||||
Tip
|
||||
} from '@hermes/plugin-sdk'
|
||||
import { useState } from 'react'
|
||||
import { jsx, jsxs } from 'react/jsx-runtime'
|
||||
|
||||
const ID = 'completion-notification-sound'
|
||||
const STORAGE_VOLUME = 'volume'
|
||||
const STORAGE_ENABLED = 'enabled'
|
||||
const STORAGE_DURATION = 'duration'
|
||||
const DEFAULT_VOLUME = 0.35
|
||||
const MIN_VOLUME = 0
|
||||
const MAX_VOLUME = 1
|
||||
const DEFAULT_DURATION = 0.35
|
||||
const MIN_DURATION = 0.1
|
||||
const MAX_DURATION = 5
|
||||
const EVENT_DEDUPE_MS = 1200
|
||||
|
||||
let storage = null
|
||||
let audioContext = null
|
||||
let lastCompletionAt = 0
|
||||
let lastEventKey = ''
|
||||
let eventDisposer = null
|
||||
|
||||
function readVolume() {
|
||||
try {
|
||||
const value = Number(storage?.get(STORAGE_VOLUME, DEFAULT_VOLUME))
|
||||
return Number.isFinite(value) ? Math.max(MIN_VOLUME, Math.min(MAX_VOLUME, value)) : DEFAULT_VOLUME
|
||||
} catch {
|
||||
return DEFAULT_VOLUME
|
||||
}
|
||||
}
|
||||
|
||||
function readEnabled() {
|
||||
try {
|
||||
return storage?.get(STORAGE_ENABLED, true) !== false
|
||||
} catch {
|
||||
return true
|
||||
}
|
||||
}
|
||||
|
||||
function readDuration() {
|
||||
try {
|
||||
const value = Number(storage?.get(STORAGE_DURATION, DEFAULT_DURATION))
|
||||
return Number.isFinite(value) ? Math.max(MIN_DURATION, Math.min(MAX_DURATION, value)) : DEFAULT_DURATION
|
||||
} catch {
|
||||
return DEFAULT_DURATION
|
||||
}
|
||||
}
|
||||
|
||||
function getAudioContext() {
|
||||
if (typeof window === 'undefined') return null
|
||||
const AudioContextClass = window.AudioContext || window.webkitAudioContext
|
||||
if (!AudioContextClass) return null
|
||||
if (!audioContext || audioContext.state === 'closed') audioContext = new AudioContextClass()
|
||||
if (audioContext.state === 'suspended') void audioContext.resume().catch(() => {})
|
||||
return audioContext
|
||||
}
|
||||
|
||||
function playTone({ preview = false } = {}) {
|
||||
const ctx = getAudioContext()
|
||||
if (!ctx) return false
|
||||
const volume = readVolume()
|
||||
if (volume <= 0) return false
|
||||
|
||||
const now = ctx.currentTime
|
||||
const master = ctx.createGain()
|
||||
master.gain.setValueAtTime(Math.min(1, volume) * 0.14, now)
|
||||
master.connect(ctx.destination)
|
||||
|
||||
const duration = readDuration()
|
||||
const melody = [
|
||||
659.25, 783.99, 1046.5, 987.77,
|
||||
880, 783.99, 659.25, 523.25
|
||||
]
|
||||
const noteCount = Math.max(2, Math.min(melody.length, Math.round(2 + (duration - MIN_DURATION) * 1.35)))
|
||||
const interval = duration / noteCount
|
||||
const notes = melody.slice(0, noteCount).map((frequency, index) => ({
|
||||
frequency,
|
||||
start: index * interval,
|
||||
duration: Math.max(0.06, interval * 0.82)
|
||||
}))
|
||||
for (const note of notes) {
|
||||
const osc = ctx.createOscillator()
|
||||
const gain = ctx.createGain()
|
||||
osc.type = 'triangle'
|
||||
osc.frequency.setValueAtTime(note.frequency, now + note.start)
|
||||
gain.gain.setValueAtTime(0.0001, now + note.start)
|
||||
gain.gain.exponentialRampToValueAtTime(0.8, now + note.start + 0.018)
|
||||
gain.gain.exponentialRampToValueAtTime(0.0001, now + note.start + note.duration)
|
||||
osc.connect(gain)
|
||||
gain.connect(master)
|
||||
osc.start(now + note.start)
|
||||
osc.stop(now + note.start + note.duration + 0.025)
|
||||
}
|
||||
master.gain.setTargetAtTime(0.0001, now + duration + 0.08, 0.08)
|
||||
if (preview) void ctx.resume().catch(() => {})
|
||||
return true
|
||||
}
|
||||
|
||||
function SettingsPage({ onEnabledChange } = {}) {
|
||||
const volume = readVolume()
|
||||
const enabled = readEnabled()
|
||||
const volumePct = Math.round(volume * 100)
|
||||
const duration = readDuration()
|
||||
const durationLabel = duration.toFixed(1) + ' сек.'
|
||||
|
||||
const updateVolume = event => {
|
||||
const value = Number(event.currentTarget.value)
|
||||
const next = Number.isFinite(value) ? Math.max(MIN_VOLUME, Math.min(MAX_VOLUME, value)) : DEFAULT_VOLUME
|
||||
try { storage?.set(STORAGE_VOLUME, next) } catch { /* keep current session setting */ }
|
||||
const output = event.currentTarget.parentElement?.querySelector('[data-volume-value]')
|
||||
if (output) output.textContent = next + '%'
|
||||
}
|
||||
const updateDuration = event => {
|
||||
const value = Number(event.currentTarget.value)
|
||||
const next = Number.isFinite(value) ? Math.max(MIN_DURATION, Math.min(MAX_DURATION, value)) : DEFAULT_DURATION
|
||||
try { storage?.set(STORAGE_DURATION, next) } catch { /* keep current session setting */ }
|
||||
const output = event.currentTarget.parentElement?.querySelector('[data-duration-value]')
|
||||
if (output) output.textContent = next.toFixed(1) + ' сек.'
|
||||
}
|
||||
|
||||
const updateEnabled = event => {
|
||||
try { storage?.set(STORAGE_ENABLED, event.currentTarget.checked) } catch { /* keep current session setting */ }
|
||||
if (onEnabledChange) onEnabledChange(event.currentTarget.checked)
|
||||
}
|
||||
|
||||
return jsxs('div', {
|
||||
className: 'flex w-80 flex-col gap-4 p-4 text-sm',
|
||||
children: [
|
||||
jsxs('div', { children: [
|
||||
jsx('h2', { className: 'text-lg font-semibold text-(--ui-text-primary)', children: 'Звук завершения' }),
|
||||
jsx('p', { className: 'mt-1 text-(--ui-text-tertiary)', children: 'Свой сигнал при завершении ответа агента. Работает только в открытом Hermes Desktop.' })
|
||||
] }),
|
||||
jsxs('label', { className: 'flex items-center justify-between gap-4', children: [
|
||||
jsxs('span', { children: [
|
||||
jsx('span', { className: 'block font-medium text-(--ui-text-primary)', children: 'Воспроизводить звук' }),
|
||||
jsx('span', { className: 'text-(--ui-text-tertiary)', children: 'Включи, если отключил штатный Completion Sound.' })
|
||||
] }),
|
||||
jsx(Switch, {
|
||||
checked: enabled,
|
||||
onCheckedChange: checked => updateEnabled({ currentTarget: { checked } }),
|
||||
'aria-label': 'Воспроизводить звук завершения'
|
||||
})
|
||||
] }),
|
||||
jsxs('label', { className: 'flex flex-col gap-2', children: [
|
||||
jsxs('span', { className: 'flex items-center justify-between', children: [
|
||||
jsx('span', { className: 'font-medium text-(--ui-text-primary)', children: 'Громкость' }),
|
||||
jsx('span', { className: 'tabular-nums text-(--ui-text-secondary)', 'data-volume-value': true, children: volumePct + '%' })
|
||||
] }),
|
||||
jsx('input', { type: 'range', min: MIN_VOLUME, max: MAX_VOLUME, step: 0.01, defaultValue: volume, onInput: updateVolume, 'aria-label': 'Громкость звука завершения' }),
|
||||
jsx('span', { className: 'text-xs text-(--ui-text-quaternary)', children: '0–100%' })
|
||||
] }),
|
||||
jsxs('label', { className: 'flex flex-col gap-2', children: [
|
||||
jsxs('span', { className: 'flex items-center justify-between', children: [
|
||||
jsx('span', { className: 'font-medium text-(--ui-text-primary)', children: 'Длительность' }),
|
||||
jsx('span', { className: 'tabular-nums text-(--ui-text-secondary)', 'data-duration-value': true, children: durationLabel })
|
||||
] }),
|
||||
jsx('input', { type: 'range', min: MIN_DURATION, max: MAX_DURATION, step: 0.1, defaultValue: duration, onInput: updateDuration, 'aria-label': 'Длительность звука завершения' }),
|
||||
jsx('span', { className: 'text-xs text-(--ui-text-quaternary)', children: '0,1–5,0 сек.' })
|
||||
] }),
|
||||
jsx(Button, {
|
||||
type: 'button',
|
||||
size: 'sm',
|
||||
variant: 'outline',
|
||||
className: 'self-start',
|
||||
onClick: () => {
|
||||
if (!playTone({ preview: true })) host.notify({ kind: 'warning', message: 'Web Audio недоступен или громкость установлена на 0.' })
|
||||
},
|
||||
children: 'Прослушать'
|
||||
})
|
||||
]
|
||||
})
|
||||
}
|
||||
|
||||
function SoundStatusbar() {
|
||||
const [enabled, setEnabled] = useState(readEnabled())
|
||||
const icon = enabled
|
||||
? '♫'
|
||||
: jsx('span', {
|
||||
className: 'relative inline-flex h-4 w-4 items-center justify-center',
|
||||
children: [
|
||||
jsx('span', { children: '♫' }),
|
||||
jsx('span', {
|
||||
className: 'pointer-events-none absolute -left-0.5 -top-0.5 text-[1.25em] leading-none',
|
||||
style: { transform: 'rotate(-22deg)' },
|
||||
children: '╱'
|
||||
})
|
||||
]
|
||||
})
|
||||
const label = enabled ? 'Кастомный звук включён' : 'Кастомный звук выключен'
|
||||
|
||||
return jsx(Popover, {
|
||||
children: [
|
||||
jsx(Tip, {
|
||||
label: label,
|
||||
children: jsx(PopoverTrigger, {
|
||||
asChild: true,
|
||||
children: jsx('button', {
|
||||
type: 'button',
|
||||
'aria-label': label,
|
||||
className: 'inline-flex h-full items-center px-1.5 text-sm text-(--ui-text-tertiary) transition-colors hover:bg-(--chrome-action-hover) hover:text-foreground',
|
||||
onClick: () => {},
|
||||
children: icon
|
||||
})
|
||||
})
|
||||
}),
|
||||
jsx(PopoverContent, {
|
||||
align: 'end',
|
||||
side: 'top',
|
||||
className: 'w-auto p-0',
|
||||
children: jsx(SettingsPage, { onEnabledChange: setEnabled })
|
||||
})
|
||||
]
|
||||
})
|
||||
}
|
||||
|
||||
export default {
|
||||
id: ID,
|
||||
name: 'Completion Sound Volume',
|
||||
defaultEnabled: true,
|
||||
register(ctx) {
|
||||
storage = ctx.storage
|
||||
try {
|
||||
const savedVolume = Number(storage.get(STORAGE_VOLUME, DEFAULT_VOLUME))
|
||||
if (!Number.isFinite(savedVolume) || savedVolume < MIN_VOLUME || savedVolume > MAX_VOLUME) storage.set(STORAGE_VOLUME, DEFAULT_VOLUME)
|
||||
const savedDuration = Number(storage.get(STORAGE_DURATION, DEFAULT_DURATION))
|
||||
if (!Number.isFinite(savedDuration) || savedDuration < MIN_DURATION || savedDuration > MAX_DURATION) storage.set(STORAGE_DURATION, DEFAULT_DURATION)
|
||||
} catch { /* storage is optional; defaults remain usable */ }
|
||||
|
||||
eventDisposer = host.onEvent('message.complete', event => {
|
||||
if (!readEnabled()) return
|
||||
const payload = event?.payload && typeof event.payload === 'object' ? event.payload : {}
|
||||
const key = String(event?.session_id || payload.session_id || '') + ':' + String(payload.message_id || payload.id || '')
|
||||
const now = Date.now()
|
||||
if ((key !== ':' && key === lastEventKey) || now - lastCompletionAt < EVENT_DEDUPE_MS) return
|
||||
lastEventKey = key
|
||||
lastCompletionAt = now
|
||||
playTone()
|
||||
})
|
||||
|
||||
ctx.register({
|
||||
id: 'statusbar-settings',
|
||||
area: STATUSBAR_AREAS.right,
|
||||
order: 125,
|
||||
render: () => jsx(SoundStatusbar, {})
|
||||
})
|
||||
|
||||
ctx.onDispose(() => {
|
||||
if (eventDisposer) eventDisposer()
|
||||
eventDisposer = null
|
||||
storage = null
|
||||
if (audioContext && audioContext.state !== 'closed') void audioContext.close().catch(() => {})
|
||||
audioContext = null
|
||||
lastEventKey = ''
|
||||
lastCompletionAt = 0
|
||||
})
|
||||
}
|
||||
}
|
||||
Reference in new issue
Block a user