feat(effects): Searchable Voices in TTS Effect (#3000)

[phroggster]

Description of the Change

• Switch the Text-To-Speech effect to using a ui-select searchable element that allows for plain text-based filtering.
• Changed the effect description to include the text "TTS" for search optimization.

Applicable Issues

#3000

Testing

• Old effects displayed properly in edit.
• Old effects executed and ran properly.
• New effects serialized properly.
• Old effects serialized properly.
• Verified appropriate defaults.
• Verified default was searchable in the list.

Screenshots (before PR)

Default state of a new effect (expanded):

---

Screenshots (after PR)

Default state of a new effect (collapsed):

Default state of a new effect (expanded):

Searching:

Selected:

Searching for "default":

[ebiggz]

Much needed improvement - thanks for doing this!

I do have one ask:
A number of months back I created a genericized firebot wrapper component for <ui-select> to cut down on the boilerplate, called <firebot-searchable-select>. Could we update this PR to utilize that component instead? (I realize there are many places still using ui-select directly that I have yet to refactor that I assume you originally referenced, sorry about that).

The objects in the ttsVoice array are actually already in the correct shape for <firebot-searchable-select>, so I believe you should be able to just plop in:

<firebot-searchable-select
    ng-model="effect.voiceId"
    placeholder="Select or search for a voice…"
    items="ttsVoices"
 />

The component also supports an optional "description" property on items so you could additionally adjust the item for the default voice like so:

{
   id: "default",
   name: "Default",
   description: "The default voice set in Settings > TTS"
}

[ebiggz]

I am going to merge this in as-is and refactor to <firebot-searchable-select> along with the other instances that need it 👍🏻