avatars

  on('ui.render', { component: 'Pane', requestId: MENU }, async ($, e) => {
    const { Box, Text, Button, Select } = $.ui.resolve(e)
    const mode = await modeOf($)
    const isOn = await isEnabled($)
    const model = await modelOf($)
    const voice = await voiceOf($, mode)
    const voices = await read($, libraryVoices)
    const note = await read($, menuNote)
    const hasKey = (await apiKey($)) !== undefined
    const scenarios = [...modes.values()].flatMap(m => Object.entries(m.scenarios ?? {}).map(([key, s]) => ({ key, title: `${m.title}: ${s.title}` })))
    const act = (work: () => Promise<string>) => () => {
      void work().then(text => update($, menuNote, () => text)).catch(err => update($, menuNote, () => String(err)))
    }

    const voiceOptions = [
      ...(mode?.voice ? [{ value: mode.voice, label: `${mode.title} default` }] : []),
      ...(voices ?? []).filter(v => v.id !== mode?.voice).map(v => ({ value: v.id, label: v.name })),
    ]
    if (voice && !voiceOptions.some(o => o.value === voice)) voiceOptions.unshift({ value: voice, label: voice })

    return (
      <Box flexDirection="column" gap={1}>
        <Box flexDirection="column">
          <Text>
            Spoken replies: <Text bold>{isOn ? 'on' : 'off'}</Text>
            {'   '}API key: {hasKey ? <Text color="green">set</Text> : <Text color="red">missing</Text>}
          </Text>
          {!hasKey && <Text dimColor>Set it with /plugin (Avatars, configure), or export ELEVENLABS_API_KEY and restart.</Text>}
        </Box>
        <Box flexDirection="column">
          <Select
            key="mode"
            label="Mode  "
            autoFocus
            value={mode?.name ?? 'off'}
            options={[...[...modes.values()].map(m => ({ value: m.name, label: m.title })), { value: 'off', label: 'Off' }]}
            onSelect={value => act(() => setMode($, value))()}
          />
          {mode && <Text dimColor>{mode.description}</Text>}
        </Box>
        {mode && !mode.call && voiceOptions.length > 0 && (
          <Select key="voice" label="Voice " value={voice} options={voiceOptions} onSelect={value => act(() => setVoice($, value))()} />
        )}
        {mode && !mode.call && voices === null && hasKey && (
          <Button key="load-voices" dimColor onPress={() => void refreshLibrary($)}>
            Load my ElevenLabs voices
          </Button>
        )}
        <Select
          key="model"
          label="Model "
          value={model}
          options={[...new Set([model, ...MODELS])].map(m => ({ value: m, label: `${m}${hasTags(m) ? ' (audio tags)' : ''}` }))}
          onSelect={value => act(() => setModel($, value))()}
        />
        {scenarios.length > 0 && (
          <Select
            key="scenario"
            label="Scenario "
            value=""
            options={[{ value: '', label: 'Pick one to play' }, ...scenarios.map(s => ({ value: s.key, label: s.title }))]}
            onSelect={value => value && act(() => playScenario($, value))()}
          />
        )}
        <Box flexDirection="row" gap={1} flexWrap="wrap">
          <Button key="test" hotkey="t" variant="primary" onPress={act(() => playDemo($, ''))}>Test</Button>
          <Button key="replay" hotkey="r" onPress={act(async () => {
            const last = await read($, lastSaid)
            if (!last) return 'Nothing spoken yet.'
            background($, say($, last))
            return 'Replaying.'
          })}>Replay</Button>
          <Button key="stop" hotkey="s" onPress={act(async () => (await stop(), 'Stopped.'))}>Stop</Button>
          <Button key="toggle" hotkey="o" onPress={act(() => setEnabled($, !isOn))}>{isOn ? 'Turn off' : 'Turn on'}</Button>
          <Button key="default" hotkey="d" onPress={act(() => saveDefaults($))}>Save as default</Button>
          <Button key="doctor" hotkey="c" onPress={act(() => doctor($))}>Check setup</Button>
          <Button key="close" role="dismiss" onPress={() => void $.ui.close({ id: MENU })}>Close</Button>
        </Box>
        {note !== '' && <Text>{note}</Text>}
        <Text dimColor>New modes: ask Claude to create one (the create-mode skill), or see {userModesDir}.</Text>
      </Box>
    )
  })