Spaces:
Runtime error
Runtime error
File size: 3,285 Bytes
cd6f98e |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 |
import { motion } from "framer-motion";
import { useTranslation } from "next-i18next";
import type { KeyboardEvent, RefObject } from "react";
import { useState } from "react";
import { FaCog, FaPlay, FaStar } from "react-icons/fa";
import { useAgentStore } from "../../stores";
import type { Message } from "../../types/message";
import AppTitle from "../AppTitle";
import Button from "../Button";
import ExampleAgents from "../console/ExampleAgents";
import { ToolsDialog } from "../dialog/ToolsDialog";
import Globe from "../Globe";
import Input from "../Input";
type LandingProps = {
messages: Message[];
disableStartAgent: boolean;
handlePlay: () => void;
handleKeyPress: (e: KeyboardEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
goalInputRef: RefObject<HTMLInputElement>;
goalInput: string;
setGoalInput: (string) => void;
setShowSignInDialog: (boolean) => void;
setAgentRun: (newName: string, newGoal: string) => void;
};
const Landing = (props: LandingProps) => {
const [showToolsDialog, setShowToolsDialog] = useState(false);
const { t } = useTranslation("indexPage");
const agent = useAgentStore.use.agent();
return (
<>
<ToolsDialog show={showToolsDialog} setOpen={setShowToolsDialog} />
<motion.div
initial={{ opacity: 0, y: -50 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.75, type: "easeInOut" }}
className="z-10"
>
<AppTitle />
</motion.div>
<div className="absolute left-0 right-0 m-auto grid place-items-center overflow-hidden opacity-40">
<Globe />
</div>
<motion.div
initial={{ opacity: 0, y: -50 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.75, delay: 1, type: "easeInOut" }}
className="z-10"
>
<ExampleAgents setAgentRun={props.setAgentRun} setShowSignIn={props.setShowSignInDialog} />
</motion.div>
<motion.div
initial={{ opacity: 0, y: 50 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.75, delay: 0.5, type: "easeInOut" }}
className="z-10 flex w-full flex-col gap-6"
>
<Input
inputRef={props.goalInputRef}
left={
<>
<FaStar />
<span className="ml-2">{`${t("LABEL_AGENT_GOAL")}`}</span>
</>
}
disabled={agent != null}
value={props.goalInput}
onChange={(e) => props.setGoalInput(e.target.value)}
onKeyDown={props.handleKeyPress}
placeholder={`${t("PLACEHOLDER_AGENT_GOAL")}`}
type="textarea"
/>
<div className="flex w-full flex-row items-center justify-center gap-3">
<Button
ping
onClick={() => setShowToolsDialog(true)}
className="h-full bg-gradient-to-t from-slate-9 to-slate-12 hover:shadow-depth-3"
>
<FaCog />
</Button>
<Button
onClick={props.handlePlay}
className="border-0 bg-gradient-to-t from-[#02FCF1] to-[#A02BFE] subpixel-antialiased saturate-[75%] hover:saturate-100"
>
<FaPlay />
</Button>
</div>
</motion.div>
</>
);
};
export default Landing;
|