hermes-web/app/settings/tts/voices/page.tsx

"use client";

import axios from "axios";
import * as React from 'react';
import { Check, ChevronsUpDown } from "lucide-react"
import { useEffect, useState } from "react";
import { useSession } from "next-auth/react";
import { cn } from "@/lib/utils";
import { Skeleton } from "@/components/ui/skeleton";
import { Button } from "@/components/ui/button"
import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem } from "@/components/ui/command"
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover"
import { Label } from "@/components/ui/label";
import { Checkbox } from "@/components/ui/checkbox";
import voices from "@/data/tts";

const TTSVoiceFiltersPage = () => {
  const { data: session, status } = useSession();
  const [loading, setLoading] = useState<boolean>(true)

  const [open, setOpen] = useState(false)
  const [value, setValue] = useState(0)
  const [enabled, setEnabled] = useState(0)

  useEffect(() => {
    axios.get("/api/settings/tts/default")
      .then((voice) => {
        setValue(Number.parseInt(voice.data.value))
      })

    axios.get("/api/settings/tts")
      .then((d) => {
        const total = d.data.reduce((acc: number, item: {value: number, label: string, gender: string, language: string}) => acc |= 1 << (item.value - 1), 0)
        setEnabled(total)
      })
  }, [])

  const onDefaultChange = (voice: string) => {
    try {
      axios.post("/api/settings/tts/default", { voice })
        .then(d => {
          console.log(d)
        })
        .catch(e => console.error(e))
    } catch (error) {
      console.log("[TTS/DEFAULT]", error);
      return;
    }
  }

  const onEnabledChanged = (val: number) => {
    try {
      axios.post("/api/settings/tts", { voice: val })
        .then(d => {
          console.log(d)
        })
        .catch(e => console.error(e))
    } catch (error) {
      console.log("[TTS]", error);
      return;
    }
  }

  return ( 
    <div>
      <div className="text-2xl text-center pt-[50px]">TTS Voices</div>
      <div className="px-10 py-10 w-full h-full flex-grow">
        <div className="flex flex-row justify-evenly">
          <div>
            <div className="inline-block text-lg">Default Voice</div>
            <Label className="pl-[10px] inline-block">Voice used without any voice modifiers</Label>
          </div>
          <Popover open={open} onOpenChange={setOpen}>
            <PopoverTrigger asChild>
              <Button
                variant="outline"
                role="combobox"
                aria-expanded={open}
                className="w-[200px] justify-between">
                {value ? voices.find(v => Number.parseInt(v.value) == value)?.label : "Select voice..."}
                <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
              </Button>
            </PopoverTrigger>
            <PopoverContent className="w-[200px] p-0">
              <Command>
                <CommandInput placeholder="Search voice..." />
                <CommandEmpty>No voices found.</CommandEmpty>
                <CommandGroup>
                  {voices.map((voice) => (
                    <CommandItem
                      key={voice.value + "-" + voice.label}
                      value={voice.value}
                      onSelect={(currentValue) => {
                        setValue(Number.parseInt(currentValue))
                        onDefaultChange(voice.label)
                        setOpen(false)
                      }}
                    >
                      <Check
                        className={cn(
                          "mr-2 h-4 w-4",
                          value === Number.parseInt(voice.value) ? "opacity-100" : "opacity-0"
                        )}
                      />
                      {voice.label}
                    </CommandItem>
                  ))}
                </CommandGroup>
              </Command>
            </PopoverContent>
          </Popover>
        </div>

        <div className="w-full pt-[50px]">
          <p className="text-xl text-center justify-center">Voices Enabled</p>
          <div className="grid grid-cols-4 grid-flow-row gap-4 pt-[20px]">
            {voices.map((v, i) => (
              <div key={v.label + "-enabled"} className="h-[30px] row-span-1 col-span-1 align-middle flex items-center justify-center">
                <Checkbox onClick={() => {
                  const newVal = enabled ^ (1 << (Number.parseInt(v.value) - 1))
                  setEnabled(newVal)
                  onEnabledChanged(newVal)
                }}
                checked={(enabled & (1 << (Number.parseInt(v.value) - 1))) > 0} />
                <div className="pl-[5px]">{v.label}</div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
   );
}
 
export default TTSVoiceFiltersPage;