Add the possibility to add voices to your favorites

apps/app/src/features/speech/components/inputs/NvSpeechEngineSelect.vue

@@ -1,28 +1,31 @@
 <template>
-  <NvSelect :options="options" v-bind="$attrs" />
+  <NvSelect :options="options" v-bind="$attrs"/>
 </template>
 <script lang="ts" setup>
 import { NvSelect } from '@packages/ui'
 import { computed } from 'vue'
 import { useSpeechEngineManager } from '@/modules/speech-engine-manager'
 import { orderBy } from 'lodash'
+import { groupOptions } from '@/utils/select'
+import { capitalize } from '@/utils/text'
 
 const { engines } = useSpeechEngineManager()
 const options = computed(() =>
-  orderBy(
+  groupOptions(orderBy(
     engines.value.map((engine) => {
       const disabled = engine.hasCredentials ? !engine.hasCredentials() : false
       return {
         disabled,
         label: engine.name,
         value: engine.id,
+        category: capitalize(engine.category),
         attrs: {
           title: disabled ? 'Requires credentials' : '',
         },
       }
     }),
     ['disabled', 'label'],
     ['asc', 'asc'],
-  ),
+  ), 'category'),
 )
 </script>

apps/app/src/modules/speech-engine-manager/types.ts

@@ -9,6 +9,7 @@ export type Payload = { [key: string]: any }
 export interface SpeechEngine {
   id: string
   name: string
+  category: 'cloud' | 'local' | 'other'
   getVoiceName: (voice: any) => string
   getSelectedVoice: () => any
   getCredentials: () => Credentials

apps/app/src/plugins/speech-engines/amazon-polly/NvVoiceSelect.vue

@@ -8,17 +8,34 @@
       ...$attrs,
     }"
     valueKey="Id"
-  />
+  >
+    <template #optionAfter="{ option, hover }">
+      <span v-show="(!option.children && hover) || favoriteVoiceIds.includes(option.id)">
+        <NvButton
+          :icon-name="favoriteVoiceIds.includes(option.id) ? 'times' : 'heart'"
+          :title="
+            favoriteVoiceIds.includes(option.id) ? 'Remove from favorites' : 'Add to favorites'
+          "
+          size="sm"
+          type="default"
+          @mousedown.prevent.stop="
+            setProperty('favoriteVoiceIds', xor(favoriteVoiceIds, [option.id]))
+          "
+        />
+      </span>
+    </template>
+  </NvSelect>
 </template>
 <script lang="ts" setup>
 import { computed, watch } from 'vue'
 import { useQueryClient } from 'vue-query'
 import { purify } from '@packages/toolbox'
-import { orderBy } from 'lodash'
-import { NvSelect } from '@packages/ui'
+import { orderBy, xor } from 'lodash'
+import { NvButton, NvSelect } from '@packages/ui'
 import { useSpeechStore } from '@/features/speech/store'
+import { groupOptions } from '@/utils/select'
 import { useListVoicesQuery } from './hooks'
-import { getVoiceName, LIST_VOICES_QUERY_KEY } from './shared'
+import { getVoiceCategory, getVoiceId, getVoiceName, LIST_VOICES_QUERY_KEY } from './shared'
 import { getProperty, setProperty } from './store'
 
 const queryClient = useQueryClient()
@@ -40,12 +57,32 @@ const { data, isFetching } = useListVoicesQuery(computedParams, {
   enabled: canFetch,
 })
 const voices = computed(() => orderBy(data.value || [], ['LanguageCode', 'Name']))
-const options = computed(() =>
-  voices.value.map((voice) => ({
-    label: getVoiceName(voice),
-    value: voice,
-  })),
-)
+const getOptionFromVoice = (voice: any) => ({
+  id: getVoiceId(voice),
+  label: getVoiceName(voice),
+  value: voice,
+  category: getVoiceCategory(voice),
+})
+
+const options = computed(() => {
+  const localOptions = groupOptions(voices.value.map(getOptionFromVoice), 'category')
+  const favoriteVoiceIds = getProperty('favoriteVoiceIds')
+  if (favoriteVoiceIds) {
+    const favoriteVoices = voices.value.filter((voice: any) =>
+      favoriteVoiceIds.includes(getVoiceId(voice)),
+    )
+    if (favoriteVoices.length) {
+      localOptions.unshift({
+        label: 'Favorites',
+        children: favoriteVoices.map(getOptionFromVoice),
+      })
+    }
+  }
+  return localOptions
+})
+
+const favoriteVoiceIds = computed<string[]>(() => getProperty('favoriteVoiceIds'))
+
 watch(
   () => [getProperty('identityPoolId', true), getProperty('region')],
   () => canFetch.value && queryClient.refetchQueries(LIST_VOICES_QUERY_KEY),

apps/app/src/plugins/speech-engines/amazon-polly/register.ts

@@ -15,6 +15,7 @@ const getSelectedVoice = () => getProperty('selectedVoice')
 registerEngine({
   id: ENGINE_ID,
   name: ENGINE_NAME,
+  category: 'cloud',
   getSelectedVoice,
   getVoiceName,
   getCredentials,

apps/app/src/plugins/speech-engines/amazon-polly/shared.ts

@@ -2,3 +2,5 @@ export const ENGINE_ID = 'aptts' as const
 export const ENGINE_NAME = 'Amazon Polly' as const
 export const LIST_VOICES_QUERY_KEY = 'aptts-list-voices' as const
 export const getVoiceName = (voice: any) => `${voice.LanguageCode} ${voice.Name} - ${voice.Gender}`
+export const getVoiceId = (voice: any) => voice.Id
+export const getVoiceCategory = (voice: any) => voice.LanguageName

apps/app/src/plugins/speech-engines/amazon-polly/store.ts

@@ -12,5 +12,6 @@ export const { setProperty, getProperty } = definePluginStore(ENGINE_ID, {
     Name: 'Amy',
     SupportedEngines: ['neural', 'standard'],
   },
+  favoriteVoiceIds: [],
   useLocalCredentials: false,
 })

apps/app/src/plugins/speech-engines/animalese/NvVoiceSelect.vue

@@ -1,31 +1,69 @@
 <template>
   <NvSelect
-    v-loading="isFetching"
     :options="options"
     v-bind="{
       modelValue: getProperty('selectedVoice'),
       'onUpdate:modelValue': (value) => setProperty('selectedVoice', value),
       ...$attrs,
     }"
     valueKey="name"
-  />
+  >
+    <template #optionAfter="{ option, hover }">
+      <span v-show="(!option.children && hover) || favoriteVoiceIds.includes(option.id)">
+        <NvButton
+          :icon-name="favoriteVoiceIds.includes(option.id) ? 'times' : 'heart'"
+          :title="
+            favoriteVoiceIds.includes(option.id) ? 'Remove from favorites' : 'Add to favorites'
+          "
+          size="sm"
+          type="default"
+          @mousedown.prevent.stop="
+            setProperty('favoriteVoiceIds', xor(favoriteVoiceIds, [option.id]))
+          "
+        />
+      </span>
+    </template>
+  </NvSelect>
 </template>
 <script lang="ts" setup>
 import { computed } from 'vue'
-import { NvSelect } from '@packages/ui'
+import { NvButton, NvSelect } from '@packages/ui'
+import { xor } from 'lodash'
+import { groupOptions } from '@/utils/select'
 import { getProperty, setProperty } from './store'
-import { defaultVoice } from './shared'
+import { defaultVoice, getVoiceCategory, getVoiceId, getVoiceName } from './shared'
 
-const options = computed(() => [
+const voices = computed(() => [
   {
-    label: 'Custom', value: {
-      name: 'Custom',
-    }
+    ...defaultVoice,
   },
   {
-    label: 'Default', value: {
-      ...defaultVoice
-    }
+    name: 'Custom',
   },
 ])
+const getOptionFromVoice = (voice: any) => ({
+  id: getVoiceId(voice),
+  label: getVoiceName(voice),
+  value: voice,
+  category: getVoiceCategory(voice),
+})
+
+const options = computed(() => {
+  const localOptions = groupOptions(voices.value.map(getOptionFromVoice), 'category')
+  const favoriteVoiceIds = getProperty('favoriteVoiceIds')
+  if (favoriteVoiceIds) {
+    const favoriteVoices = voices.value.filter((voice: any) =>
+      favoriteVoiceIds.includes(getVoiceId(voice)),
+    )
+    if (favoriteVoices.length) {
+      localOptions.unshift({
+        label: 'Favorites',
+        children: favoriteVoices.map(getOptionFromVoice),
+      })
+    }
+  }
+  return localOptions
+})
+
+const favoriteVoiceIds = computed<string[]>(() => getProperty('favoriteVoiceIds'))
 </script>

apps/app/src/plugins/speech-engines/animalese/register.ts

@@ -38,6 +38,7 @@ const getSelectedVoice = () => {
 registerEngine({
   id: ENGINE_ID,
   name: ENGINE_NAME,
+  category: 'local',
   getSelectedVoice,
   getVoiceName,
   getCredentials() {

apps/app/src/plugins/speech-engines/animalese/shared.ts

@@ -1,7 +1,9 @@
 export const ENGINE_ID = 'animalesetts' as const
 export const ENGINE_NAME = 'Animalese' as const
 export const getVoiceName = (voice: any) => voice.name
+export const getVoiceId = (voice: any) => voice.name
 
+export const getVoiceCategory = (voice: any) => voice.category || 'General'
 export const defaultVoice = {
   name: 'Default',
   pitch: 1,

apps/app/src/plugins/speech-engines/animalese/store.ts

@@ -7,4 +7,5 @@ export const { setProperty, getProperty } = definePluginStore(ENGINE_ID, {
   },
   shortened: false,
   pitch: 1,
+  favoriteVoiceIds: [],
 })

apps/app/src/plugins/speech-engines/custom/NvVoiceSelect.vue

@@ -8,15 +8,34 @@
       ...$attrs,
     }"
     valueKey="name"
-  />
+  >
+    <template #optionAfter="{ option, hover }">
+      <span v-show="(!option.children && hover) || favoriteVoiceIds.includes(option.id)">
+        <NvButton
+          :icon-name="favoriteVoiceIds.includes(option.id) ? 'times' : 'heart'"
+          :title="
+            favoriteVoiceIds.includes(option.id) ? 'Remove from favorites' : 'Add to favorites'
+          "
+          size="sm"
+          type="default"
+          @mousedown.prevent.stop="
+            setProperty('favoriteVoiceIds', xor(favoriteVoiceIds, [option.id]))
+          "
+        />
+      </span>
+    </template>
+  </NvSelect>
 </template>
 <script lang="ts" setup>
 import { computed, watch } from 'vue'
 import { useQueryClient } from 'vue-query'
-import { NvSelect } from '@packages/ui'
+import { NvButton, NvSelect } from '@packages/ui'
+import { groupOptions } from '@/utils/select'
+import { xor } from 'lodash'
 import { purify } from '@packages/toolbox'
+import { getVoiceCategory, getVoiceId, getVoiceName, LIST_VOICES_QUERY_KEY } from './shared'
 import { useListVoicesQuery } from './hooks'
-import { getVoiceName, LIST_VOICES_QUERY_KEY } from './shared'
+
 import { getProperty, setProperty } from './store'
 
 const queryClient = useQueryClient()
@@ -31,12 +50,31 @@ const { data, isFetching } = useListVoicesQuery(computedParams, {
   enabled: canFetch,
 })
 const voices = computed(() => data.value || [])
-const options = computed(() => [
-  ...voices.value.map((voice: any) => ({
-    label: getVoiceName(voice),
-    value: voice,
-  })),
-])
+const getOptionFromVoice = (voice: any) => ({
+  id: getVoiceId(voice),
+  label: getVoiceName(voice),
+  value: voice,
+  category: getVoiceCategory(voice),
+})
+
+const options = computed(() => {
+  const localOptions = groupOptions(voices.value.map(getOptionFromVoice), 'category')
+  const favoriteVoiceIds = getProperty('favoriteVoiceIds')
+  if (favoriteVoiceIds) {
+    const favoriteVoices = voices.value.filter((voice: any) =>
+      favoriteVoiceIds.includes(getVoiceId(voice)),
+    )
+    if (favoriteVoices.length) {
+      localOptions.unshift({
+        label: 'Favorites',
+        children: favoriteVoices.map(getOptionFromVoice),
+      })
+    }
+  }
+  return localOptions
+})
+
+const favoriteVoiceIds = computed<string[]>(() => getProperty('favoriteVoiceIds'))
 watch(
   () => [canFetch.value, computedParams.value.credentials, computedParams.value.endpoint],
   () => canFetch.value && queryClient.refetchQueries(LIST_VOICES_QUERY_KEY),

apps/app/src/plugins/speech-engines/custom/register.ts

@@ -10,6 +10,7 @@ const getSelectedVoice = () => getProperty('selectedVoice')
 registerEngine({
   id: ENGINE_ID,
   name: ENGINE_NAME,
+  category: 'other',
   getSelectedVoice,
   getVoiceName,
   hasCredentials() {
@@ -33,7 +34,7 @@ registerEngine({
   synthesizeSpeech({ payload, credentials }) {
     const endpoint = getProperty('endpoint')
     return axios.post<Blob>(
-      `${endpoint.endsWith('/') ? endpoint.slice(0, -1) : endpoint}/synthesize-speech`,
+      `${ endpoint.endsWith('/') ? endpoint.slice(0, -1) : endpoint }/synthesize-speech`,
       {
         credentials,
         payload,

apps/app/src/plugins/speech-engines/custom/shared.ts

@@ -2,3 +2,5 @@ export const ENGINE_ID = 'customtts' as const
 export const ENGINE_NAME = 'Custom' as const
 export const LIST_VOICES_QUERY_KEY = 'customtts-list-voices' as const
 export const getVoiceName = (voice: any) => voice?.name || 'None'
+export const getVoiceId = (voice: any) => voice.name
+export const getVoiceCategory = (voice: any) => voice.category || 'General'

apps/app/src/plugins/speech-engines/custom/store.ts

@@ -5,4 +5,5 @@ export const { setProperty, getProperty } = definePluginStore(ENGINE_ID, {
   selectedVoice: null,
   endpoint: '',
   apiKey: '',
+  favoriteVoiceIds: [],
 })