The weeb for the next gen discord boat - Wamellow
wamellow.com
shi.gg
bot
discord
1import Link from "next/link";
2import { useParams } from "next/navigation";
3import { HiExternalLink, HiOutlineHand } from "react-icons/hi";
4
5import {
6 Accordion,
7 AccordionContent,
8 AccordionItem,
9 AccordionTrigger
10} from "./ui/accordion";
11import { Button } from "./ui/button";
12import { Anchor, Code } from "./ui/typography";
13
14export function TTSFaq() {
15 const params = useParams();
16
17 return (
18 <Accordion
19 type="single"
20 collapsible
21 className="lg:w-1/2"
22 defaultValue="1"
23 >
24 <AccordionItem value="1">
25 <AccordionTrigger>Introduction</AccordionTrigger>
26 <AccordionContent>
27 Users in a voice channel can send messages to this channel, and Wamellow will read them aloud in the voice channel. Please note that Wamellow can only be in one voice channel at a time.
28
29 <iframe
30 className="mt-4 aspect-video rounded-lg"
31 width="100%"
32 src="https://www.youtube.com/embed/NS5fZ1ltovE?si=uODiGspuNGKPRQKp"
33 title="Wamellow Text to Speech tutorial"
34 allow="autoplay; clipboard-write; encrypted-media; picture-in-picture; web-share"
35 />
36
37 <div className="flex gap-1.5 my-2">
38 <DocumentationLink />
39 <BlockWordsAndSlursButton guildId={params.guildId as string} />
40 </div>
41 </AccordionContent>
42 </AccordionItem>
43 <AccordionItem value="2">
44 <AccordionTrigger>Change Voice and Language</AccordionTrigger>
45 <AccordionContent className="space-y-3">
46 <p>
47 You can change your default voice <Anchor href="/profile/text-to-speech">in your personal settings</Anchor> or by running <Code>/tts set speaker</Code>.
48 </p>
49 <p>
50 If you only want to change the voice for a specific message, you can run <Code>/tts voice</Code> and provide the <Code>voice</Code> argument.
51 </p>
52 <p>
53 All available voices and languages are listed in the documentation. The language you choose will only affect messages you send.
54 </p>
55
56 <DocumentationLink />
57 </AccordionContent>
58 </AccordionItem>
59 </Accordion>
60 );
61}
62
63function DocumentationLink() {
64 return (
65 <Button
66 asChild
67 size="sm"
68 >
69 <Link
70 href="/docs/text-to-speech"
71 target="_blank"
72 >
73 Read the documentation
74 <HiExternalLink />
75 </Link>
76 </Button>
77 );
78}
79
80function BlockWordsAndSlursButton({ guildId }: { guildId: string; }) {
81 return (
82 <Button
83 asChild
84 size="sm"
85 >
86 {/* it causes weird state issues with the pill bar without target="_top */}
87 <Link
88 href={`/dashboard/${guildId}/moderation`}
89 target="_top"
90 >
91 <HiOutlineHand className="size-4" />
92 Block words and slurs
93 </Link>
94 </Button>
95 );
96}