95 lines
3.2 KiB
TypeScript
95 lines
3.2 KiB
TypeScript
import React from "react";
|
|
import { Button } from "@/components/ui/button";
|
|
import DevicePicker from "@/components/DevicePicker";
|
|
import { IconAlertCircle, IconEar, IconLoader2 } from "@tabler/icons-react";
|
|
|
|
type SetupProps = {
|
|
handleStart: () => void;
|
|
};
|
|
|
|
const buttonLabel = {
|
|
intro: "Next",
|
|
setup: "Let's begin!",
|
|
loading: "Joining...",
|
|
};
|
|
export const Setup: React.FC<SetupProps> = ({ handleStart }) => {
|
|
const [state, setState] = React.useState<"intro" | "setup" | "loading">(
|
|
"intro"
|
|
);
|
|
|
|
return (
|
|
<div className="w-full flex flex-col items-center justify-between">
|
|
<div className="bg-white rounded-3xl cardAnim cardShadow p-9 max-w-screen-sm mx-auto outline outline-[5px] outline-gray-600/10 my-auto">
|
|
<div className="flex flex-col gap-6">
|
|
<h1 className="text-4xl font-bold text-pretty tracking-tighter mb-4">
|
|
Welcome to <span className="text-sky-500">Storytime</span>
|
|
</h1>
|
|
{state === "intro" ? (
|
|
<>
|
|
<p className="text-gray-600 leading-relaxed text-pretty">
|
|
This app demos a voice-controlled storytelling chatbot. It will
|
|
start with the bot asking you what kind of story you'd like
|
|
to hear (e.g. a fairy tale, a mystery, etc.). After each scene,
|
|
the bot will pause to ask for your input. Direct the story any
|
|
way you choose!
|
|
</p>
|
|
<p className="flex flex-row gap-2 text-gray-600 font-medium">
|
|
<IconEar size={24} /> For best results, try in a quiet
|
|
environment!
|
|
</p>
|
|
<p className="flex flex-row gap-2 text-gray-600 font-medium text-red-500">
|
|
<IconAlertCircle size={24} /> This demo expires after 5 minutes.
|
|
</p>
|
|
</>
|
|
) : (
|
|
<>
|
|
<p className="text-gray-600 leading-relaxed text-pretty">
|
|
Since you'll be talking to Storybot, we need to make sure
|
|
it can hear you! Please configure your microphone and speakers
|
|
below.
|
|
</p>
|
|
<DevicePicker />
|
|
</>
|
|
)}
|
|
<hr className="border-gray-150 my-2" />
|
|
|
|
<Button
|
|
size="lg"
|
|
disabled={state === "loading"}
|
|
onClick={() => {
|
|
if (state === "intro") {
|
|
setState("setup");
|
|
} else {
|
|
setState("loading");
|
|
handleStart();
|
|
}
|
|
}}
|
|
>
|
|
{state === "loading" && (
|
|
<IconLoader2
|
|
size={21}
|
|
stroke={2}
|
|
className="mr-2 h-4 w-4 animate-spin"
|
|
/>
|
|
)}
|
|
{buttonLabel[state]}
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
<footer className="flex-0 text-center font-mono text-sm text-gray-100 py-6">
|
|
<span className="bg-gray-800/70 px-3 py-1 rounded-md">
|
|
Created with{" "}
|
|
<a
|
|
href="https://git.new/ai"
|
|
className="text-violet-300 underline decoration-violet-400 hover:text-violet-100"
|
|
>
|
|
git.new/ai
|
|
</a>
|
|
</span>
|
|
</footer>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Setup;
|