feat(db): mesh data model — meshes, members, invites, audit log
- pgSchema "mesh" with 4 tables isolating the peer mesh domain - Enums: visibility, transport, tier, role - audit_log is metadata-only (E2E encryption enforced at broker/client) - Cascade on mesh delete, soft-delete via archivedAt/revokedAt Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Alejandro Gutiérrez
66
apps/web/src/modules/tts/composer/hooks/use-audio.tsx
Normal file
66
apps/web/src/modules/tts/composer/hooks/use-audio.tsx
Normal file
@@ -0,0 +1,66 @@
|
||||
import { useEffect, useRef, useState } from "react";
|
||||
|
||||
export const useAudio = (url?: string) => {
|
||||
const audioRef = useRef<HTMLAudioElement | null>(null);
|
||||
const [playing, setPlaying] = useState(false);
|
||||
const [progress, setProgress] = useState(0);
|
||||
|
||||
useEffect(() => {
|
||||
if (!audioRef.current) {
|
||||
audioRef.current = new Audio(url);
|
||||
} else if (url) {
|
||||
audioRef.current.src = url;
|
||||
}
|
||||
}, [url]);
|
||||
|
||||
useEffect(() => {
|
||||
const audioElement = audioRef.current;
|
||||
if (!audioElement) return;
|
||||
|
||||
const handleTimeUpdate = () => {
|
||||
const currentProgress =
|
||||
(audioElement.currentTime / audioElement.duration) * 100;
|
||||
setProgress(currentProgress);
|
||||
};
|
||||
|
||||
const handleEnded = () => {
|
||||
setPlaying(false);
|
||||
setProgress(0);
|
||||
};
|
||||
|
||||
audioElement.addEventListener("timeupdate", handleTimeUpdate);
|
||||
audioElement.addEventListener("ended", handleEnded);
|
||||
|
||||
return () => {
|
||||
audioElement.removeEventListener("timeupdate", handleTimeUpdate);
|
||||
audioElement.removeEventListener("ended", handleEnded);
|
||||
};
|
||||
}, []);
|
||||
|
||||
const play = () => {
|
||||
if (audioRef.current) {
|
||||
void audioRef.current.play();
|
||||
setPlaying(true);
|
||||
}
|
||||
};
|
||||
|
||||
const pause = () => {
|
||||
if (audioRef.current) {
|
||||
audioRef.current.pause();
|
||||
setPlaying(false);
|
||||
}
|
||||
};
|
||||
|
||||
const scroll = (seconds: number) => {
|
||||
const audioElement = audioRef.current;
|
||||
if (!audioElement) return;
|
||||
|
||||
const newTime = Math.max(
|
||||
0,
|
||||
Math.min(audioElement.duration, audioElement.currentTime + seconds),
|
||||
);
|
||||
audioElement.currentTime = newTime;
|
||||
};
|
||||
|
||||
return { play, pause, playing, progress, scroll };
|
||||
};
|
||||
137
apps/web/src/modules/tts/composer/hooks/use-composer.tsx
Normal file
137
apps/web/src/modules/tts/composer/hooks/use-composer.tsx
Normal file
@@ -0,0 +1,137 @@
|
||||
"use client";
|
||||
|
||||
import { zodResolver } from "@hookform/resolvers/zod";
|
||||
import { useCallback, useEffect } from "react";
|
||||
import { useForm, useFormContext } from "react-hook-form";
|
||||
import { create } from "zustand";
|
||||
import { persist } from "zustand/middleware";
|
||||
|
||||
import { MODELS } from "@turbostarter/ai/tts/constants";
|
||||
import { ttsSchema } from "@turbostarter/ai/tts/schema";
|
||||
import { useDebounceCallback } from "@turbostarter/shared/hooks";
|
||||
|
||||
import { useTts } from "~/modules/tts/use-tts";
|
||||
|
||||
import type {
|
||||
TtsOptionsPayload,
|
||||
TtsPayload,
|
||||
} from "@turbostarter/ai/tts/schema";
|
||||
import type { Voice } from "@turbostarter/ai/tts/types";
|
||||
import type { WatchObserver } from "react-hook-form";
|
||||
|
||||
interface TtsComposerState {
|
||||
text: string;
|
||||
options: TtsOptionsPayload;
|
||||
setText: (text: string) => void;
|
||||
setOptions: (options: Partial<TtsOptionsPayload>) => void;
|
||||
reset: () => void;
|
||||
}
|
||||
|
||||
const DEFAULT_OPTIONS = {
|
||||
model: MODELS[0].id,
|
||||
voice: {
|
||||
id: "",
|
||||
speed: 1,
|
||||
stability: 0.5,
|
||||
similarity: 0.75,
|
||||
boost: false,
|
||||
},
|
||||
};
|
||||
|
||||
const useTtsComposerStore = create<TtsComposerState>()(
|
||||
persist(
|
||||
(set) => ({
|
||||
text: "",
|
||||
options: DEFAULT_OPTIONS,
|
||||
setText: (text) => set({ text }),
|
||||
setOptions: (options) =>
|
||||
set((state) => ({
|
||||
options: { ...state.options, ...options },
|
||||
})),
|
||||
reset: () =>
|
||||
set({
|
||||
text: "",
|
||||
options: DEFAULT_OPTIONS,
|
||||
}),
|
||||
}),
|
||||
{
|
||||
name: "tts-options",
|
||||
partialize: (state) => ({ options: state.options }),
|
||||
},
|
||||
),
|
||||
);
|
||||
|
||||
interface UseComposerProps {
|
||||
voices: Voice[];
|
||||
}
|
||||
|
||||
export const useComposer = ({ voices }: UseComposerProps) => {
|
||||
const { speak } = useTts();
|
||||
const { options, reset, setOptions, setText } = useTtsComposerStore();
|
||||
|
||||
const newForm = useForm({
|
||||
resolver: zodResolver(ttsSchema),
|
||||
defaultValues: {
|
||||
text: "",
|
||||
options,
|
||||
},
|
||||
});
|
||||
const contextForm = useFormContext<TtsPayload>();
|
||||
// eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
|
||||
const form = contextForm ?? newForm;
|
||||
|
||||
useEffect(() => {
|
||||
if (voices.length && !options.voice.id) {
|
||||
const newOptions = {
|
||||
...options,
|
||||
voice: {
|
||||
...options.voice,
|
||||
id: voices[0]?.id ?? "",
|
||||
},
|
||||
};
|
||||
setOptions(newOptions);
|
||||
form.setValue("options", newOptions);
|
||||
}
|
||||
}, [voices, options, setOptions, form]);
|
||||
|
||||
const sync: WatchObserver<TtsPayload> = useCallback(
|
||||
(values) => {
|
||||
setText(values.text ?? "");
|
||||
setOptions({
|
||||
...(values.options ?? DEFAULT_OPTIONS),
|
||||
voice: {
|
||||
...(values.options?.voice ?? DEFAULT_OPTIONS.voice),
|
||||
id: values.options?.voice?.id ?? "",
|
||||
},
|
||||
});
|
||||
},
|
||||
[setText, setOptions],
|
||||
);
|
||||
|
||||
const debouncedSync = useDebounceCallback(sync, 500);
|
||||
|
||||
useEffect(() => {
|
||||
const subscription = form.watch(debouncedSync);
|
||||
return () => subscription.unsubscribe();
|
||||
}, [form, debouncedSync]);
|
||||
|
||||
const onSubmit = (input: TtsPayload) => {
|
||||
form.resetField("text");
|
||||
speak.mutate(input);
|
||||
};
|
||||
|
||||
const resetVoiceSettings = () => {
|
||||
form.setValue("options.voice", {
|
||||
...DEFAULT_OPTIONS.voice,
|
||||
id: options.voice.id,
|
||||
});
|
||||
};
|
||||
|
||||
return {
|
||||
form,
|
||||
setText,
|
||||
onSubmit,
|
||||
reset,
|
||||
resetVoiceSettings,
|
||||
};
|
||||
};
|
||||
104
apps/web/src/modules/tts/composer/index.tsx
Normal file
104
apps/web/src/modules/tts/composer/index.tsx
Normal file
@@ -0,0 +1,104 @@
|
||||
"use client";
|
||||
|
||||
import { memo } from "react";
|
||||
|
||||
import { MODELS } from "@turbostarter/ai/tts/constants";
|
||||
import { useTranslation } from "@turbostarter/i18n";
|
||||
import { Button } from "@turbostarter/ui-web/button";
|
||||
import {
|
||||
Form,
|
||||
FormControl,
|
||||
FormField,
|
||||
FormItem,
|
||||
} from "@turbostarter/ui-web/form";
|
||||
import { Icons } from "@turbostarter/ui-web/icons";
|
||||
import { ScrollArea } from "@turbostarter/ui-web/scroll-area";
|
||||
|
||||
import { Composer } from "~/modules/common/ai/composer";
|
||||
import { ModelSelector } from "~/modules/common/ai/composer/model-selector";
|
||||
|
||||
import { useComposer } from "./hooks/use-composer";
|
||||
import { Settings } from "./settings";
|
||||
import { VoiceSelector } from "./voice-selector";
|
||||
|
||||
import type { UIVoice } from "~/modules/tts/utils/types";
|
||||
|
||||
interface TtsComposerProps {
|
||||
voices: UIVoice[];
|
||||
}
|
||||
|
||||
export const TtsComposer = memo<TtsComposerProps>(({ voices }) => {
|
||||
const { t } = useTranslation(["common", "ai"]);
|
||||
const { onSubmit, form, resetVoiceSettings } = useComposer({ voices });
|
||||
|
||||
return (
|
||||
<div className="h-full w-full overflow-hidden pt-12 md:pt-14">
|
||||
<Form {...form}>
|
||||
<Composer.Form
|
||||
onSubmit={form.handleSubmit(onSubmit)}
|
||||
className="flex h-full w-full flex-col"
|
||||
>
|
||||
<ScrollArea className="h-full min-h-0 w-full px-5">
|
||||
<VoiceSelector
|
||||
control={form.control}
|
||||
name="options.voice.id"
|
||||
options={voices}
|
||||
/>
|
||||
</ScrollArea>
|
||||
<div className="relative z-20 mx-auto w-full px-3 pb-3 shadow-[0_-72px_52px_-16px_var(--background)]">
|
||||
<Composer.Input className="mx-auto pb-12">
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="text"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormControl>
|
||||
<Composer.Textarea
|
||||
{...field}
|
||||
placeholder={t("tts.composer.placeholder")}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === "Enter" && !e.shiftKey) {
|
||||
e.preventDefault();
|
||||
|
||||
return form.handleSubmit(onSubmit)();
|
||||
}
|
||||
}}
|
||||
/>
|
||||
</FormControl>
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
<div className="absolute inset-x-0 bottom-0 flex w-full gap-1.5 overflow-hidden border-2 border-transparent p-2 @[480px]/input:p-3">
|
||||
<Settings
|
||||
control={form.control}
|
||||
path="options.voice"
|
||||
onReset={resetVoiceSettings}
|
||||
/>
|
||||
|
||||
<div className="ml-auto flex w-full items-center justify-end gap-1.5">
|
||||
<ModelSelector
|
||||
control={form.control}
|
||||
name="options.model"
|
||||
options={MODELS}
|
||||
/>
|
||||
|
||||
<Button
|
||||
className="shrink-0 rounded-full"
|
||||
disabled={!form.formState.isValid}
|
||||
size="icon"
|
||||
type="submit"
|
||||
>
|
||||
<Icons.AudioLines className="size-5" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</Composer.Input>
|
||||
</div>
|
||||
</Composer.Form>
|
||||
</Form>
|
||||
</div>
|
||||
);
|
||||
});
|
||||
|
||||
TtsComposer.displayName = "TtsComposer";
|
||||
243
apps/web/src/modules/tts/composer/settings.tsx
Normal file
243
apps/web/src/modules/tts/composer/settings.tsx
Normal file
@@ -0,0 +1,243 @@
|
||||
"use client";
|
||||
|
||||
import { useTranslation } from "@turbostarter/i18n";
|
||||
import { useBreakpoint } from "@turbostarter/ui-web";
|
||||
import { Button } from "@turbostarter/ui-web/button";
|
||||
import {
|
||||
Drawer,
|
||||
DrawerContent,
|
||||
DrawerTrigger,
|
||||
} from "@turbostarter/ui-web/drawer";
|
||||
import {
|
||||
FormControl,
|
||||
FormField,
|
||||
FormItem,
|
||||
FormLabel,
|
||||
} from "@turbostarter/ui-web/form";
|
||||
import { Icons } from "@turbostarter/ui-web/icons";
|
||||
import {
|
||||
Popover,
|
||||
PopoverContent,
|
||||
PopoverPortal,
|
||||
PopoverTrigger,
|
||||
} from "@turbostarter/ui-web/popover";
|
||||
import { Slider } from "@turbostarter/ui-web/slider";
|
||||
import { Switch } from "@turbostarter/ui-web/switch";
|
||||
import {
|
||||
Tooltip,
|
||||
TooltipContent,
|
||||
TooltipTrigger,
|
||||
} from "@turbostarter/ui-web/tooltip";
|
||||
|
||||
import type { Control, FieldValues, Path } from "react-hook-form";
|
||||
|
||||
const SettingLabel = ({
|
||||
title,
|
||||
description,
|
||||
}: {
|
||||
title: string;
|
||||
description: string;
|
||||
}) => {
|
||||
return (
|
||||
<Tooltip delayDuration={300}>
|
||||
<TooltipTrigger asChild>
|
||||
<FormLabel className="decoration-border hover:decoration-foreground w-fit cursor-pointer underline decoration-dashed underline-offset-2 transition-colors">
|
||||
{title}
|
||||
</FormLabel>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent side="top" sideOffset={4} className="max-w-sm">
|
||||
{description}
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
);
|
||||
};
|
||||
|
||||
interface SettingsProps<T extends FieldValues> {
|
||||
control: Control<T>;
|
||||
path: Path<T>;
|
||||
onReset: () => void;
|
||||
}
|
||||
|
||||
export const Settings = <T extends FieldValues>({
|
||||
control,
|
||||
path,
|
||||
onReset,
|
||||
}: SettingsProps<T>) => {
|
||||
const { t } = useTranslation(["common", "ai"]);
|
||||
const isDesktop = useBreakpoint("md");
|
||||
|
||||
const renderTrigger = () => (
|
||||
<Button
|
||||
variant="outline"
|
||||
size="icon"
|
||||
className="text-muted-foreground shrink-0 rounded-full"
|
||||
>
|
||||
<Icons.Settings className="size-4" />
|
||||
<span className="sr-only">{t("settings")}</span>
|
||||
</Button>
|
||||
);
|
||||
|
||||
const renderContent = () => (
|
||||
<div className="grid gap-5">
|
||||
<FormField
|
||||
control={control}
|
||||
name={`${path}.speed` as Path<T>}
|
||||
render={({ field }) => (
|
||||
<FormItem className="gap-1.5">
|
||||
<SettingLabel
|
||||
title={t("speed")}
|
||||
description={t("tts.composer.settings.voice.speed.description")}
|
||||
/>
|
||||
<div className="text-muted-foreground mt-1.5 flex items-center justify-between text-xs">
|
||||
<span>{t("slower")}</span>
|
||||
<span>{t("faster")}</span>
|
||||
</div>
|
||||
<FormControl>
|
||||
<div className="flex items-center gap-3">
|
||||
<Slider
|
||||
id="speed"
|
||||
min={0.7}
|
||||
max={1.2}
|
||||
step={0.01}
|
||||
value={[field.value]}
|
||||
onValueChange={(vals) => {
|
||||
field.onChange(vals[0]);
|
||||
}}
|
||||
className="flex-1"
|
||||
/>
|
||||
<span className="text-muted-foreground w-12 text-right text-sm tabular-nums">
|
||||
{/* eslint-disable-next-line i18next/no-literal-string */}
|
||||
{Number(field.value).toFixed(2)}x
|
||||
</span>
|
||||
</div>
|
||||
</FormControl>
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
<FormField
|
||||
control={control}
|
||||
name={`${path}.stability` as Path<T>}
|
||||
render={({ field }) => (
|
||||
<FormItem className="gap-1.5">
|
||||
<SettingLabel
|
||||
title={t("stability")}
|
||||
description={t(
|
||||
"tts.composer.settings.voice.stability.description",
|
||||
)}
|
||||
/>
|
||||
<div className="text-muted-foreground mt-1.5 flex items-center justify-between text-xs">
|
||||
<span>{t("moreVariable")}</span>
|
||||
<span>{t("moreStable")}</span>
|
||||
</div>
|
||||
<FormControl>
|
||||
<div className="flex items-center gap-3">
|
||||
<Slider
|
||||
id="stability"
|
||||
min={0}
|
||||
max={1}
|
||||
step={0.01}
|
||||
value={[field.value]}
|
||||
onValueChange={(vals) => {
|
||||
field.onChange(vals[0]);
|
||||
}}
|
||||
className="flex-1"
|
||||
/>
|
||||
<span className="text-muted-foreground w-12 text-right text-sm tabular-nums">
|
||||
{(field.value * 100).toFixed(0)}%
|
||||
</span>
|
||||
</div>
|
||||
</FormControl>
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
<FormField
|
||||
control={control}
|
||||
name={`${path}.similarity` as Path<T>}
|
||||
render={({ field }) => (
|
||||
<FormItem className="gap-1.5">
|
||||
<SettingLabel
|
||||
title={t("similarity")}
|
||||
description={t(
|
||||
"tts.composer.settings.voice.similarity.description",
|
||||
)}
|
||||
/>
|
||||
<div className="text-muted-foreground mt-1.5 flex items-center justify-between text-xs">
|
||||
<span>{t("low")}</span>
|
||||
<span>{t("high")}</span>
|
||||
</div>
|
||||
<FormControl>
|
||||
<div className="flex items-center gap-3">
|
||||
<Slider
|
||||
id="similarity"
|
||||
min={0}
|
||||
max={1}
|
||||
step={0.01}
|
||||
value={[field.value]}
|
||||
onValueChange={(vals) => {
|
||||
field.onChange(vals[0]);
|
||||
}}
|
||||
className="flex-1"
|
||||
/>
|
||||
<span className="text-muted-foreground w-12 text-right text-sm tabular-nums">
|
||||
{(field.value * 100).toFixed(0)}%
|
||||
</span>
|
||||
</div>
|
||||
</FormControl>
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
<div className="mt-1 flex items-center justify-between">
|
||||
<FormField
|
||||
control={control}
|
||||
name={`${path}.boost` as Path<T>}
|
||||
render={({ field }) => (
|
||||
<FormItem className="flex items-center gap-2.5 space-y-0">
|
||||
<FormControl>
|
||||
<Switch
|
||||
checked={field.value}
|
||||
onCheckedChange={field.onChange}
|
||||
/>
|
||||
</FormControl>
|
||||
<SettingLabel
|
||||
title={t("speakerBoost")}
|
||||
description={t(
|
||||
"tts.composer.settings.voice.speakerBoost.description",
|
||||
)}
|
||||
/>
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
<Button variant="outline" className="gap-2" onClick={onReset}>
|
||||
<Icons.Undo2 className="size-4" />
|
||||
{t("reset")}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
if (isDesktop) {
|
||||
return (
|
||||
<Popover>
|
||||
<PopoverTrigger asChild>{renderTrigger()}</PopoverTrigger>
|
||||
<PopoverPortal>
|
||||
<PopoverContent className="w-fit min-w-96 px-5">
|
||||
{renderContent()}
|
||||
</PopoverContent>
|
||||
</PopoverPortal>
|
||||
</Popover>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<Drawer>
|
||||
<DrawerTrigger asChild>{renderTrigger()}</DrawerTrigger>
|
||||
<DrawerContent className="gap-4 px-5 pb-6">
|
||||
{renderContent()}
|
||||
</DrawerContent>
|
||||
</Drawer>
|
||||
);
|
||||
};
|
||||
248
apps/web/src/modules/tts/composer/voice-selector.tsx
Normal file
248
apps/web/src/modules/tts/composer/voice-selector.tsx
Normal file
@@ -0,0 +1,248 @@
|
||||
"use client";
|
||||
|
||||
import { motion } from "motion/react";
|
||||
import { memo } from "react";
|
||||
|
||||
import { useTranslation } from "@turbostarter/i18n";
|
||||
import { cn } from "@turbostarter/ui";
|
||||
import {
|
||||
Avatar,
|
||||
AvatarFallback,
|
||||
AvatarImage,
|
||||
} from "@turbostarter/ui-web/avatar";
|
||||
import { Badge } from "@turbostarter/ui-web/badge";
|
||||
import { Button } from "@turbostarter/ui-web/button";
|
||||
import {
|
||||
Card,
|
||||
CardHeader,
|
||||
CardContent,
|
||||
CardTitle,
|
||||
CardDescription,
|
||||
CardFooter,
|
||||
} from "@turbostarter/ui-web/card";
|
||||
import { FormControl, FormField, FormItem } from "@turbostarter/ui-web/form";
|
||||
import { Icons } from "@turbostarter/ui-web/icons";
|
||||
import { Label } from "@turbostarter/ui-web/label";
|
||||
import { RadioGroup, RadioGroupItem } from "@turbostarter/ui-web/radio-group";
|
||||
import {
|
||||
Tooltip,
|
||||
TooltipContent,
|
||||
TooltipProvider,
|
||||
TooltipTrigger,
|
||||
} from "@turbostarter/ui-web/tooltip";
|
||||
|
||||
import { useAudio } from "./hooks/use-audio";
|
||||
|
||||
import type { UIVoice } from "../utils/types";
|
||||
import type { FieldValues, Path } from "react-hook-form";
|
||||
import type { Control } from "react-hook-form";
|
||||
|
||||
const Voice = ({ voice, selected }: { voice: UIVoice; selected: boolean }) => {
|
||||
const { t } = useTranslation("common");
|
||||
const { play, pause, playing, progress, scroll } = useAudio(voice.previewUrl);
|
||||
|
||||
return (
|
||||
<Card
|
||||
key={voice.id}
|
||||
className={cn(
|
||||
"dark:bg-background flex h-full flex-col overflow-hidden rounded-2xl transition-all",
|
||||
selected ? "border-primary" : "hover:border-input border",
|
||||
)}
|
||||
>
|
||||
<Label
|
||||
htmlFor={voice.id}
|
||||
className="flex grow cursor-pointer flex-col gap-0"
|
||||
>
|
||||
<CardHeader className="flex w-full flex-row items-center justify-between gap-3.5 px-5 pt-4 pb-3">
|
||||
<Avatar className="size-10">
|
||||
<AvatarFallback>{voice.name.charAt(0)}</AvatarFallback>
|
||||
<AvatarImage src={voice.avatar?.src} style={voice.avatar?.style} />
|
||||
</Avatar>
|
||||
|
||||
<div className="mr-auto min-w-0">
|
||||
<CardTitle className="truncate text-lg leading-tight">
|
||||
{voice.name}
|
||||
</CardTitle>
|
||||
<CardDescription className="truncate leading-tight capitalize">
|
||||
{voice.category}
|
||||
</CardDescription>
|
||||
</div>
|
||||
|
||||
<RadioGroupItem
|
||||
value={voice.id}
|
||||
id={voice.id}
|
||||
className="mt-0.5 self-start"
|
||||
/>
|
||||
</CardHeader>
|
||||
<CardContent className="flex w-full grow flex-col justify-between gap-3 pb-4">
|
||||
<div className="-ml-0.5 flex w-full flex-wrap gap-1.5">
|
||||
{voice.details.map((detail) => (
|
||||
<Badge
|
||||
variant="secondary"
|
||||
key={detail}
|
||||
className="font-normal lowercase"
|
||||
>
|
||||
{detail.replace(/_/g, " ")}
|
||||
</Badge>
|
||||
))}
|
||||
</div>
|
||||
<div className="text-muted-foreground flex items-center justify-between gap-3 text-xs">
|
||||
<div className="flex items-center gap-1.5">
|
||||
<Icons.TextSearch className="size-3.5" />
|
||||
<span>
|
||||
{new Date(voice.createdAt).toLocaleDateString("en-US", {
|
||||
year: "numeric",
|
||||
month: "long",
|
||||
day: "numeric",
|
||||
})}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="flex items-center gap-1.5">
|
||||
<Icons.UsersRound className="size-3.5" />
|
||||
<span>
|
||||
{new Intl.NumberFormat("en", {
|
||||
notation: "compact",
|
||||
compactDisplay: "short",
|
||||
minimumFractionDigits: 1,
|
||||
maximumFractionDigits: 1,
|
||||
}).format(voice.usage.cloned)}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-1.5">
|
||||
<Icons.AudioWaveform className="size-3.5" />
|
||||
|
||||
{new Intl.NumberFormat("en", {
|
||||
notation: "compact",
|
||||
compactDisplay: "short",
|
||||
minimumFractionDigits: 1,
|
||||
maximumFractionDigits: 1,
|
||||
}).format(voice.usage.character)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Label>
|
||||
|
||||
<CardFooter className="bg-muted/50 relative flex justify-center overflow-hidden border-t px-3 py-1">
|
||||
<div
|
||||
className="bg-muted absolute top-0 left-0 h-full w-full transition-all duration-300 ease-linear"
|
||||
style={{
|
||||
transform: `scaleX(${progress / 100})`,
|
||||
transformOrigin: "left",
|
||||
}}
|
||||
/>
|
||||
<div className="relative z-10 flex justify-center">
|
||||
<TooltipProvider>
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="text-muted-foreground size-8 rounded-full"
|
||||
onClick={() => scroll(-5)}
|
||||
>
|
||||
<Icons.Undo className="size-3.5" />
|
||||
</Button>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent side="bottom" className="text-xs">
|
||||
-{t("second", { count: 5 })}
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="text-muted-foreground size-8 rounded-full"
|
||||
onClick={() => {
|
||||
if (playing) {
|
||||
pause();
|
||||
} else {
|
||||
play();
|
||||
}
|
||||
}}
|
||||
>
|
||||
{playing ? (
|
||||
<Icons.Pause className="size-3.5" />
|
||||
) : (
|
||||
<Icons.Play className="size-3.5" />
|
||||
)}
|
||||
</Button>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent side="bottom" className="text-xs">
|
||||
{playing ? t("pause") : t("play")}
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="text-muted-foreground size-8 rounded-full"
|
||||
onClick={() => scroll(5)}
|
||||
>
|
||||
<Icons.Redo className="size-3.5" />
|
||||
</Button>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent side="bottom" className="text-xs">
|
||||
+{t("second", { count: 5 })}
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
</TooltipProvider>
|
||||
</div>
|
||||
</CardFooter>
|
||||
</Card>
|
||||
);
|
||||
};
|
||||
|
||||
interface VoiceSelectorProps<T extends FieldValues> {
|
||||
readonly control: Control<T>;
|
||||
readonly name: Path<T>;
|
||||
readonly options: UIVoice[];
|
||||
}
|
||||
|
||||
type VoiceSelectorComponent = <T extends FieldValues>(
|
||||
props: VoiceSelectorProps<T>,
|
||||
) => React.ReactNode;
|
||||
|
||||
export const VoiceSelector: VoiceSelectorComponent = memo(
|
||||
({ control, name, options }) => {
|
||||
return (
|
||||
<FormField
|
||||
control={control}
|
||||
name={name}
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormControl>
|
||||
<RadioGroup
|
||||
className="grid w-full min-w-0 grid-cols-[repeat(auto-fill,minmax(min(20rem,100%),1fr))] gap-4 pb-6"
|
||||
onValueChange={field.onChange}
|
||||
value={field.value}
|
||||
>
|
||||
{options.map((voice, index) => (
|
||||
<motion.div
|
||||
key={voice.id}
|
||||
initial={{ opacity: 0, filter: "blur(4px)" }}
|
||||
animate={{ opacity: 1, filter: "blur(0px)" }}
|
||||
transition={{ duration: 0.2, delay: index * 0.1 }}
|
||||
>
|
||||
<Voice
|
||||
key={voice.id}
|
||||
voice={voice}
|
||||
selected={field.value === voice.id}
|
||||
/>
|
||||
</motion.div>
|
||||
))}
|
||||
</RadioGroup>
|
||||
</FormControl>
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
);
|
||||
},
|
||||
);
|
||||
48
apps/web/src/modules/tts/index.tsx
Normal file
48
apps/web/src/modules/tts/index.tsx
Normal file
@@ -0,0 +1,48 @@
|
||||
"use client";
|
||||
|
||||
import { AnimatePresence, motion } from "motion/react";
|
||||
|
||||
import { TtsComposer } from "./composer";
|
||||
import { Speech } from "./speech";
|
||||
import { useTts } from "./use-tts";
|
||||
|
||||
import type { UIVoice } from "./utils/types";
|
||||
|
||||
interface TtsProps {
|
||||
readonly voices: UIVoice[];
|
||||
}
|
||||
|
||||
export function Tts({ voices }: TtsProps) {
|
||||
const { status, input } = useTts();
|
||||
|
||||
const voice = voices.find((voice) => voice.id === input?.options.voice.id);
|
||||
const showComposer = ["idle", "error"].includes(status) || !voice;
|
||||
|
||||
return (
|
||||
<AnimatePresence mode="wait">
|
||||
{showComposer ? (
|
||||
<motion.div
|
||||
key="composer"
|
||||
className="h-full w-full"
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
exit={{ opacity: 0 }}
|
||||
transition={{ duration: 0.3 }}
|
||||
>
|
||||
<TtsComposer voices={voices} />
|
||||
</motion.div>
|
||||
) : (
|
||||
<motion.div
|
||||
key="speech"
|
||||
className="h-full w-full"
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
exit={{ opacity: 0 }}
|
||||
transition={{ duration: 0.3 }}
|
||||
>
|
||||
<Speech voice={voice} />
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
);
|
||||
}
|
||||
198
apps/web/src/modules/tts/speech/avatar.tsx
Normal file
198
apps/web/src/modules/tts/speech/avatar.tsx
Normal file
@@ -0,0 +1,198 @@
|
||||
import { motion } from "motion/react";
|
||||
|
||||
import {
|
||||
Avatar,
|
||||
AvatarFallback,
|
||||
AvatarImage,
|
||||
} from "@turbostarter/ui-web/avatar";
|
||||
|
||||
import type {Variants} from "motion/react";
|
||||
import type { UIVoice } from "~/modules/tts/utils/types";
|
||||
|
||||
const avatarAnimationVariants: Variants = {
|
||||
playing: {
|
||||
scale: [1, 1.04, 0.97, 1.03, 0.98, 1.02, 1],
|
||||
rotate: [0, 1.8, -1.2, 2.5, -1.5, 0.8, 0],
|
||||
x: [0, 3, -2, 2, -3, 1, 0],
|
||||
y: [0, -3, 2, -4, 3, -1, 0],
|
||||
filter: [
|
||||
"brightness(1) contrast(1)",
|
||||
"brightness(1.08) contrast(1.04)",
|
||||
"brightness(0.98) contrast(0.99)",
|
||||
"brightness(1.06) contrast(1.03)",
|
||||
"brightness(0.97) contrast(0.98)",
|
||||
"brightness(1.04) contrast(1.02)",
|
||||
"brightness(1) contrast(1)",
|
||||
],
|
||||
transition: {
|
||||
duration: 5,
|
||||
repeat: Infinity,
|
||||
ease: "easeInOut" as const,
|
||||
filter: {
|
||||
duration: 5,
|
||||
repeat: Infinity,
|
||||
ease: "easeInOut" as const,
|
||||
},
|
||||
},
|
||||
},
|
||||
loading: {
|
||||
scale: [1, 1.02, 0.99, 1.01, 1],
|
||||
filter: [
|
||||
"brightness(0.9) contrast(0.95) grayscale(1)",
|
||||
"brightness(0.95) contrast(0.97) grayscale(1)",
|
||||
"brightness(0.88) contrast(0.94) grayscale(1)",
|
||||
"brightness(0.93) contrast(0.96) grayscale(1)",
|
||||
"brightness(0.9) contrast(0.95) grayscale(1)",
|
||||
],
|
||||
transition: {
|
||||
duration: 2,
|
||||
repeat: Infinity,
|
||||
ease: "easeInOut" as const,
|
||||
filter: {
|
||||
duration: 2,
|
||||
repeat: Infinity,
|
||||
ease: "easeInOut" as const,
|
||||
},
|
||||
},
|
||||
},
|
||||
idle: {
|
||||
scale: 1,
|
||||
rotate: 0,
|
||||
x: 0,
|
||||
y: 0,
|
||||
filter: "brightness(1) contrast(1) grayscale(0)",
|
||||
transition: {
|
||||
duration: 1,
|
||||
ease: "easeOut" as const,
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
const imageAnimationVariants: Variants = {
|
||||
playing: {
|
||||
scale: [1, 1.03, 0.98, 1.02, 1],
|
||||
rotate: [0, -0.5, 0.3, -0.2, 0],
|
||||
filter: [
|
||||
"saturate(1.1) brightness(1) grayscale(0)",
|
||||
"saturate(1.25) brightness(1.05) grayscale(0)",
|
||||
"saturate(1.15) brightness(0.98) grayscale(0)",
|
||||
"saturate(1.2) brightness(1.03) grayscale(0)",
|
||||
"saturate(1.1) brightness(1) grayscale(0)",
|
||||
],
|
||||
transition: {
|
||||
duration: 4,
|
||||
repeat: Infinity,
|
||||
ease: "easeInOut" as const,
|
||||
filter: {
|
||||
duration: 4,
|
||||
repeat: Infinity,
|
||||
ease: "easeInOut" as const,
|
||||
},
|
||||
},
|
||||
},
|
||||
loading: {
|
||||
scale: [1, 1.01, 0.99, 1],
|
||||
filter: [
|
||||
"saturate(0.8) brightness(0.9) grayscale(1)",
|
||||
"saturate(0.85) brightness(0.95) grayscale(1)",
|
||||
"saturate(0.8) brightness(0.88) grayscale(1)",
|
||||
"saturate(0.8) brightness(0.9) grayscale(1)",
|
||||
],
|
||||
transition: {
|
||||
duration: 1.5,
|
||||
repeat: Infinity,
|
||||
ease: "easeInOut" as const,
|
||||
filter: {
|
||||
duration: 1.5,
|
||||
repeat: Infinity,
|
||||
ease: "easeInOut" as const,
|
||||
},
|
||||
},
|
||||
},
|
||||
idle: {
|
||||
scale: 1,
|
||||
rotate: 0,
|
||||
filter: "saturate(1.1) grayscale(0)",
|
||||
transition: {
|
||||
duration: 1,
|
||||
ease: "easeOut" as const,
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
interface VoiceAvatarProps {
|
||||
readonly voice: UIVoice;
|
||||
readonly playing: boolean;
|
||||
readonly loading: boolean;
|
||||
}
|
||||
|
||||
export function VoiceAvatar({ voice, playing, loading }: VoiceAvatarProps) {
|
||||
const animationState = playing ? "playing" : loading ? "loading" : "idle";
|
||||
|
||||
return (
|
||||
<div className="relative flex grow items-center justify-center">
|
||||
<motion.div
|
||||
animate={animationState}
|
||||
initial="idle"
|
||||
variants={avatarAnimationVariants}
|
||||
className="relative z-10 flex h-full max-h-[min(50vw,18rem)] items-center justify-center"
|
||||
>
|
||||
<Avatar className="relative aspect-square h-full w-auto">
|
||||
<AvatarFallback>{voice.name.charAt(0)}</AvatarFallback>
|
||||
<motion.div
|
||||
animate={animationState}
|
||||
initial="idle"
|
||||
variants={imageAnimationVariants}
|
||||
style={{ width: "100%", height: "100%" }}
|
||||
>
|
||||
<AvatarImage src={voice.avatar?.src} style={voice.avatar?.style} />
|
||||
</motion.div>
|
||||
</Avatar>
|
||||
|
||||
{!loading && (
|
||||
<>
|
||||
<div className="absolute -inset-20 overflow-hidden rounded-full blur-3xl">
|
||||
<motion.div
|
||||
className="h-full w-full"
|
||||
style={{
|
||||
...voice.avatar?.style,
|
||||
background: `radial-gradient(circle, hsla(210,100%,55%,0) 0%, hsla(210,100%,55%,0.4) 40%, hsla(210,100%,55%,0.6) 70%, hsla(210,100%,55%,0.2) 100%)`,
|
||||
mixBlendMode: "soft-light",
|
||||
}}
|
||||
animate={{
|
||||
opacity: [0.5, 0.8, 0.6, 0.75, 0.5],
|
||||
scale: [0.75, 1.15, 0.95, 1.1, 0.75],
|
||||
}}
|
||||
transition={{
|
||||
duration: 6,
|
||||
repeat: Infinity,
|
||||
ease: "easeInOut",
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="absolute -inset-12 overflow-hidden rounded-full blur-xl">
|
||||
<motion.div
|
||||
className="h-full w-full"
|
||||
style={{
|
||||
...voice.avatar?.style,
|
||||
background: `radial-gradient(circle, transparent 10%, hsla(210,100%,55%)/0.5) 60%, hsla(210,100%,55%)/0.7) 80%, transparent 100%)`,
|
||||
}}
|
||||
animate={{
|
||||
opacity: [0.6, 0.9, 0.7, 0.85, 0.6],
|
||||
scale: [0.75, 1.05, 0.95, 1.02, 0.75],
|
||||
}}
|
||||
transition={{
|
||||
duration: 4.5,
|
||||
repeat: Infinity,
|
||||
ease: "easeInOut",
|
||||
delay: 0.5,
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</motion.div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
60
apps/web/src/modules/tts/speech/index.tsx
Normal file
60
apps/web/src/modules/tts/speech/index.tsx
Normal file
@@ -0,0 +1,60 @@
|
||||
"use client";
|
||||
|
||||
import { Button } from "@turbostarter/ui-web/button";
|
||||
import { Icons } from "@turbostarter/ui-web/icons";
|
||||
|
||||
import { useTts } from "../use-tts";
|
||||
|
||||
import { VoiceAvatar } from "./avatar";
|
||||
import { VoiceVisualizer } from "./voice-visualizer";
|
||||
|
||||
import type { UIVoice } from "~/modules/tts/utils/types";
|
||||
|
||||
interface SpeechProps {
|
||||
voice: UIVoice;
|
||||
}
|
||||
|
||||
export const Speech = ({ voice }: SpeechProps) => {
|
||||
const { status, reset, pause, play } = useTts();
|
||||
|
||||
return (
|
||||
<div className="flex h-full w-full flex-col items-center justify-center gap-4 px-5 py-12 md:py-14 @lg:gap-6">
|
||||
<VoiceAvatar
|
||||
voice={voice}
|
||||
playing={status === "playing"}
|
||||
loading={status === "loading"}
|
||||
/>
|
||||
|
||||
<h1 className="mt-8 mb-2 px-6 text-center text-3xl font-bold @lg:mt-12 @lg:text-4xl">
|
||||
{voice.name}
|
||||
</h1>
|
||||
<VoiceVisualizer
|
||||
playing={status === "playing"}
|
||||
loading={status === "loading"}
|
||||
/>
|
||||
|
||||
<div className="mt-16 flex items-center justify-center gap-2 @lg:gap-4">
|
||||
<Button
|
||||
variant="outline"
|
||||
className="size-16 @lg:size-20"
|
||||
disabled={status === "loading"}
|
||||
onClick={status === "playing" ? pause : play}
|
||||
>
|
||||
{status === "playing" ? (
|
||||
<Icons.Pause className="size-6 @lg:size-8" />
|
||||
) : (
|
||||
<Icons.Play className="size-6 @lg:size-8" />
|
||||
)}
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
variant="destructive"
|
||||
className="size-16 @lg:size-20"
|
||||
onClick={reset}
|
||||
>
|
||||
<Icons.X className="size-6 @lg:size-8" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
61
apps/web/src/modules/tts/speech/voice-visualizer.tsx
Normal file
61
apps/web/src/modules/tts/speech/voice-visualizer.tsx
Normal file
@@ -0,0 +1,61 @@
|
||||
"use client";
|
||||
|
||||
import { useState, useEffect } from "react";
|
||||
|
||||
import { cn } from "@turbostarter/ui";
|
||||
|
||||
interface VoiceVisualizerProps {
|
||||
readonly playing: boolean;
|
||||
readonly loading: boolean;
|
||||
readonly bars?: number;
|
||||
}
|
||||
|
||||
export function VoiceVisualizer({
|
||||
playing,
|
||||
loading,
|
||||
bars = 40,
|
||||
}: VoiceVisualizerProps) {
|
||||
const [time, setTime] = useState(0);
|
||||
const [isClient, setIsClient] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
setIsClient(true);
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
let intervalId: NodeJS.Timeout;
|
||||
|
||||
if (playing) {
|
||||
intervalId = setInterval(() => {
|
||||
setTime((t) => t + 1);
|
||||
}, 1000);
|
||||
} else {
|
||||
setTime(0);
|
||||
}
|
||||
|
||||
return () => clearInterval(intervalId);
|
||||
}, [playing, time]);
|
||||
|
||||
return (
|
||||
<div className="flex h-16 w-4/5 max-w-[45rem] shrink-0 items-center justify-center gap-0.5 @md:h-20 @md:gap-1 @lg:h-24 @lg:gap-1.5">
|
||||
{Array.from({ length: bars }).map((_, i) => (
|
||||
<div
|
||||
key={i}
|
||||
className={cn(
|
||||
"grow rounded-full transition-all [transition-duration:200ms]",
|
||||
playing ? "bg-foreground/65" : "bg-muted h-4/5",
|
||||
{
|
||||
"animate-pulse": playing || loading,
|
||||
},
|
||||
)}
|
||||
style={{
|
||||
...(isClient ? { animationDelay: `${i * 0.05}s` } : {}),
|
||||
...(playing || loading
|
||||
? { height: `${20 + Math.random() * 80}%` }
|
||||
: {}),
|
||||
}}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
104
apps/web/src/modules/tts/use-tts.tsx
Normal file
104
apps/web/src/modules/tts/use-tts.tsx
Normal file
@@ -0,0 +1,104 @@
|
||||
import { useMutation } from "@tanstack/react-query";
|
||||
import { create } from "zustand";
|
||||
|
||||
import { api } from "~/lib/api/client";
|
||||
import { useAIError } from "~/modules/common/hooks/use-ai-error";
|
||||
import { useCredits } from "~/modules/common/layout/credits";
|
||||
|
||||
import type { TtsPayload } from "@turbostarter/ai/tts/schema";
|
||||
|
||||
interface TtsState {
|
||||
status: "idle" | "loading" | "playing" | "paused" | "error";
|
||||
audio: HTMLAudioElement | null;
|
||||
input: TtsPayload | null;
|
||||
update: (state: Partial<TtsState>) => void;
|
||||
}
|
||||
|
||||
const useTtsStore = create<TtsState>()((set) => ({
|
||||
status: "idle",
|
||||
audio: null,
|
||||
input: null,
|
||||
update: (updates) =>
|
||||
set((state) => ({
|
||||
...state,
|
||||
...updates,
|
||||
})),
|
||||
}));
|
||||
|
||||
export const useTts = () => {
|
||||
const { onError } = useAIError();
|
||||
const { invalidate } = useCredits();
|
||||
const { update, status, audio, input } = useTtsStore();
|
||||
|
||||
const speak = useMutation({
|
||||
mutationFn: async (json: TtsPayload) => {
|
||||
if (!MediaSource.isTypeSupported("audio/mpeg")) {
|
||||
throw new Error("Unsupported MIME type or codec: audio/mpeg");
|
||||
}
|
||||
|
||||
const response: Response = await api.ai.tts.$post({
|
||||
json,
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error("Failed to speak!");
|
||||
}
|
||||
|
||||
const blob = await response.blob();
|
||||
const url = URL.createObjectURL(blob);
|
||||
|
||||
const audio = new Audio(
|
||||
/^(http|https|blob:|data:)/.test(url)
|
||||
? url
|
||||
: `data:audio/wav;base64,${url}`,
|
||||
);
|
||||
|
||||
audio.onended = () => {
|
||||
update({ status: "paused" });
|
||||
};
|
||||
|
||||
update({ audio });
|
||||
return audio;
|
||||
},
|
||||
onMutate: (input) => {
|
||||
update({ status: "loading", input });
|
||||
},
|
||||
onSuccess: (audio) => {
|
||||
update({ status: "playing" });
|
||||
void invalidate();
|
||||
void audio.play();
|
||||
},
|
||||
onError: (e) => {
|
||||
onError(e);
|
||||
update({ status: "error" });
|
||||
},
|
||||
});
|
||||
|
||||
const play = () => {
|
||||
if (audio) {
|
||||
void audio.play();
|
||||
update({ status: "playing" });
|
||||
}
|
||||
};
|
||||
|
||||
const pause = () => {
|
||||
if (audio) {
|
||||
audio.pause();
|
||||
update({ status: "paused" });
|
||||
}
|
||||
};
|
||||
|
||||
const reset = () => {
|
||||
update({ status: "idle", audio: null, input: null });
|
||||
};
|
||||
|
||||
return {
|
||||
status,
|
||||
audio,
|
||||
input,
|
||||
speak,
|
||||
play,
|
||||
pause,
|
||||
reset,
|
||||
};
|
||||
};
|
||||
8
apps/web/src/modules/tts/utils/types.ts
Normal file
8
apps/web/src/modules/tts/utils/types.ts
Normal file
@@ -0,0 +1,8 @@
|
||||
import type { Voice } from "@turbostarter/ai/tts/types";
|
||||
|
||||
export type UIVoice = Voice & {
|
||||
avatar?: {
|
||||
src: string;
|
||||
style?: React.CSSProperties;
|
||||
};
|
||||
};
|
||||
Reference in New Issue
Block a user