deepgram-voice

  on('ui.render', { component: 'AbovePrompt' }, async ($, e, next) => {
    if (e.props.hasSurvey) return next(e)
    const phase = await read($, earsPhase)
    const speaking = await read($, isSpeaking)
    if (!isStripShown({ isVoiceOn: await read($, isOn), isListening: phase !== 'off', isSpeaking: speaking })) return next(e)
    const { Box, Button, Text } = $.ui.resolve(e)
    const mic = micLabel(await read($, device))
    const offered = await read($, newMic)
    const silent = await read($, isSilent)
    const out = await read($, output)
    const known = modeFor(out, await read($, duplexByOutput))
    const chosen = known !== undefined
    const mode = known ?? 'speakers'
    const level = await read($, micLevel)
    const isEchoNotice = await read($, isEchoDetected)
    const viewNow = await read($, view)

    const choose = (picked: Duplex) => () => chooseDuplex($, picked)

    // The circle is the mic switch; the word next to it says what the mic is doing
    const [circle, word] =
      phase === 'off'
        ? ['○', 'MIC OFF']
        : phase === 'starting'
          ? ['○', 'STARTING MIC']
          : silent
          ? ['●', 'NO SOUND']
          : phase === 'hearing'
            ? ['◉', 'HEARING YOU']
            : phase === 'echo' && speaking
              ? ['◎', 'HEARING ITSELF']
              : ['●', 'LISTENING']

    // The second row only when something needs an answer
    const question = !chosen && phase !== 'off' ? (
      <Box>
        <Text>Is {out ? out.name : 'your sound output'} headphones or speakers? </Text>
        <Button key="pick-headphones" hotkey="h" label="Headphones" onPress={choose('headphones')} />
        <Text> </Text>
        <Button key="pick-speakers" hotkey="s" label="Speakers" onPress={choose('speakers')} />
      </Box>
    ) : isEchoNotice ? (
      <Box>
        <Text>Your mic hears the speakers, so it switched to speakers mode. </Text>
        <Button key="back-to-headphones" hotkey="h" label="I'm on headphones" onPress={choose('headphones')} />
        <Text> </Text>
        <Button key="ok-echo" hotkey="o" label="OK" onPress={() => update($, isEchoDetected, () => false)} />
      </Box>
    ) : offered ? (
      <Box>
        <Text>New mic plugged in: {offered} </Text>
        <Button key="use-new-mic" hotkey="u" label={`Use ${offered}`} onPress={() => chooseMic($, offered)} />
        <Text> </Text>
        <Button key="dismiss-new-mic" hotkey="x" label="Dismiss" onPress={() => update($, newMic, () => null)} />
      </Box>
    ) : null

    return (
      <Box flexDirection="column">
        <Box>
          <Button key="mic-toggle" plain label={circle} onPress={() => toggleListening($)} />
          {phase === 'off' ? (
            <Text dimColor> {word} </Text>
          ) : phase === 'starting' ? (
            <Text bold color="yellow"> {word} </Text>
          ) : phase === 'hearing' ? (
            <Text bold inverse color="green"> {word} </Text>
          ) : word === 'HEARING ITSELF' ? (
            <Text bold color="yellow"> {word} </Text>
          ) : (
            <Text bold color="green"> {word} </Text>
          )}
          <Text>{earsPad(word)}</Text>
          {/* the meter's slot stays when the mic is off, so nothing after it moves */}
          <Text dimColor>{phase === 'off' ? ' '.repeat(METER.length) : meter(level)} </Text>
          {speaking ? (
            <>
              <Text bold inverse color="cyan"> 🔊 SPEAKING </Text>
              <Text> </Text>
              <Button key="stop-voice" plain label="■ stop" onPress={() => stop($)} />
            </>
          ) : (
            // padded to the speaking slot's width, so the mic and output don't move when it talks
            <Text dimColor>{QUIET + quietPad()}</Text>
          )}
          <Text dimColor> · </Text>
          <Button key="mic-name" plain dimColor label={`🎙 ${mic}`} onPress={() => openPicker($)} />
          <Text dimColor> · </Text>
          <Button
            key="output-name"
            plain
            dimColor
            label={`${mode === 'speakers' ? '🔈' : '🎧'} ${out ? out.name : 'macOS output'}`}
            onPress={() => openPicker($)}
          />
          <Text dimColor> · </Text>
          <Button
            key="view-toggle"
            plain
            dimColor
            label={viewNow === 'clean' ? '▤ clean view' : '▦ full view'}
            onPress={() => chooseView($, viewNow === 'clean' ? 'normal' : 'clean')}
          />
        </Box>
        {question}
      </Box>
    )
  })

  on('ui.render', { component: 'Pane', requestId: PICKER }, async ($, e) => {
    const { Box, Button, Text } = $.ui.resolve(e)
    const listed = await read($, mics)
    const current = await read($, device)
    const out = await read($, output)
    const mode = modeFor(out, await read($, duplexByOutput)) ?? 'speakers'

    return (
      <Box flexDirection="column">
        {listed.length === 0 && <Text dimColor>No microphones found. Is one plugged in?</Text>}
        {listed.map((m, i) => (
          <Button
            key={`mic-${m.index}`}
            hotkey={i < 9 ? String(i + 1) : undefined}
            plain
            label={micRow(m, current)}
            onPress={() => chooseMic($, m.name)}
          />
        ))}
        <Button
          key="mic-default"
          hotkey="0"
          plain
          label={`System default${current === DEFAULT_MIC ? '  ✓ in use' : ''}`}
          onPress={() => chooseMic($, DEFAULT_MIC)}
        />
        <Text dimColor>Press a number, or Esc to close.</Text>
        <Text> </Text>
        <Text>Sound plays on: {out?.name ?? 'the macOS output'}</Text>
        <Text dimColor>{MODE_TEXT[mode]}</Text>
        <Button
          key="mode-toggle"
          hotkey="t"
          plain
          label={mode === 'headphones' ? 'Switch to speakers mode' : 'Switch to headphones mode'}
          onPress={async () => chooseDuplex($, (await effectiveMode($)) === 'headphones' ? 'speakers' : 'headphones')}
        />
        <Button
          key="open-sound-settings"
          hotkey="o"
          plain
          label="Change output (opens macOS Sound settings)"
          onPress={() => void $.process.run(['open', 'x-apple.systempreferences:com.apple.Sound-Settings.extension'])}
        />
      </Box>
    )
  })