Skip to content

Commit

Permalink
✨ Autogenerate agent names (#1356)
Browse files Browse the repository at this point in the history
  • Loading branch information
awtkns authored Nov 1, 2023
1 parent ff2ad06 commit b94b1ad
Show file tree
Hide file tree
Showing 12 changed files with 428 additions and 176 deletions.
315 changes: 295 additions & 20 deletions next/package-lock.json

Large diffs are not rendered by default.

1 change: 1 addition & 0 deletions next/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -49,6 +49,7 @@
"next-auth": "4.20.1",
"next-i18next": "^13.2.2",
"nextjs-google-analytics": "^2.3.3",
"openai": "^4.14.2",
"react": "18.2.0",
"react-dom": "18.2.0",
"react-i18next": "^12.3.1",
Expand Down
4 changes: 2 additions & 2 deletions next/public/locales/en/indexPage.json
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
"HEADING_DESCRIPTION": "Assemble, configure, and deploy autonomous AI Agents in your browser.",
"AGENT_NAME": "Name",
"LABEL_AGENT_GOAL": "Goal",
"PLACEHOLDER_AGENT_GOAL": "Make the world a better place",
"PLACEHOLDER_AGENT_GOAL": "What is the latest AI news?",
"BUTTON_DEPLOY_AGENT": "Deploy Agent",
"BUTTON_STOP_AGENT": "Stop Agent"
}
}
4 changes: 2 additions & 2 deletions next/src/components/Button.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -34,10 +34,10 @@ const Button = forwardRef((props: ButtonProps, ref: ForwardedRef<HTMLButtonEleme
type={props.type}
disabled={loading || props.disabled}
className={clsx(
"relative rounded-lg border-2 border-black/20 px-4 py-1 font-bold text-white transition-all sm:px-10 sm:py-3",
"relative rounded-lg border-2 border-black/20 px-4 py-1 font-bold text-white transition-all duration-300 sm:px-10 sm:py-3",
props.disabled && "cursor-not-allowed border-white/10 bg-slate-9 text-white",
props.disabled ||
"cursor-pointer bg-[#1E88E5]/70 text-white hover:bg-[#0084f7] hover:shadow-xl",
"cursor-pointer bg-[#1E88E5]/80 text-white hover:bg-[#0084f7] hover:shadow-lg",
props.disabled || props.enabledClassName,
props.className
)}
Expand Down
114 changes: 45 additions & 69 deletions next/src/components/Input.tsx
Original file line number Diff line number Diff line change
@@ -1,94 +1,70 @@
import clsx from "clsx";
import React from "react";
import type { ChangeEvent, KeyboardEvent, ReactNode, RefObject } from "react";

import Label from "./Label";
import type { toolTipProperties } from "../types";

type InputElement = HTMLInputElement | HTMLTextAreaElement;

interface InputProps {
small?: boolean; // Will lower padding and font size. Currently only works for the default input
left?: React.ReactNode;
left?: ReactNode;
value: string | number | undefined;
onChange: (
e: React.ChangeEvent<HTMLInputElement> | React.ChangeEvent<HTMLTextAreaElement>
) => void;
onChange: (e: ChangeEvent<InputElement>) => void;
placeholder?: string;
disabled?: boolean;
setValue?: (value: string) => void;
type?: string;
subType?: string;
attributes?: { [key: string]: string | number | string[] }; // attributes specific to input type
toolTipProperties?: toolTipProperties;
inputRef?: React.RefObject<HTMLInputElement>;
onKeyDown?: (
e: React.KeyboardEvent<HTMLInputElement> | React.KeyboardEvent<HTMLTextAreaElement>
) => void;
inputRef?: RefObject<InputElement>;
onKeyDown?: (e: KeyboardEvent<InputElement>) => void;
}

const Input = (props: InputProps) => {
const {
small,
placeholder,
left,
value,
type,
onChange,
setValue,
disabled,
attributes,
inputRef,
toolTipProperties,
onKeyDown,
} = props;
const [isHidden, setIsHidden] = React.useState(false);

const isTypeTextArea = () => {
return type === "textarea";
return props.type === "textarea";
};

let inputElement;

if (isTypeTextArea()) {
inputElement = (
<textarea
className={clsx(
"delay-50 h-15 w-full resize-none rounded-xl border-2 border-slate-7 bg-slate-1 p-2 text-sm tracking-wider text-slate-12 outline-none transition-all selection:bg-sky-300 placeholder:text-slate-8 hover:border-sky-200 focus:border-sky-400 sm:h-20 md:text-lg",
disabled && "cursor-not-allowed",
left && "md:rounded-l-none",
small && "text-sm sm:py-[0]"
)}
placeholder={placeholder}
value={value}
onChange={onChange}
disabled={disabled}
onKeyDown={onKeyDown}
{...attributes}
/>
);
} else {
inputElement = (
<input
className={clsx(
"w-full rounded-xl border-2 border-slate-7 bg-slate-1 p-2 py-1 text-sm tracking-wider text-slate-12 outline-none transition-all duration-200 selection:bg-sky-300 placeholder:text-slate-8 hover:border-sky-200 focus:border-sky-400 sm:py-3 md:text-lg",
disabled && "cursor-not-allowed",
left && "md:rounded-l-none",
small && "text-sm sm:py-[0]"
)}
ref={inputRef}
placeholder={placeholder}
type={type}
value={value}
onChange={onChange}
disabled={disabled}
onKeyDown={onKeyDown}
{...attributes}
/>
);
}

return (
<div className="items-left z-5 flex h-fit w-full flex-col rounded-xl text-lg text-slate-12 md:flex-row md:items-center">
{left && <Label left={left} type={type} toolTipProperties={toolTipProperties} />}
{inputElement}
{props.left && (
<Label left={props.left} type={props.type} toolTipProperties={props.toolTipProperties} />
)}
{isTypeTextArea() ? (
<textarea
className={clsx(
"delay-50 h-15 w-full resize-none rounded-xl border-2 border-slate-7 bg-slate-1 p-2 text-sm tracking-wider text-slate-12 outline-none transition-all selection:bg-sky-300 placeholder:text-slate-8 hover:border-sky-200 focus:border-sky-400 sm:h-20 md:text-lg",
props.disabled && "cursor-not-allowed",
props.left && "md:rounded-l-none",
props.small && "text-sm sm:py-[0]"
)}
ref={props.inputRef as RefObject<HTMLTextAreaElement>}
placeholder={props.placeholder}
value={props.value}
onChange={props.onChange}
disabled={props.disabled}
onKeyDown={props.onKeyDown}
{...props.attributes}
/>
) : (
<input
className={clsx(
"w-full rounded-xl border-2 border-slate-7 bg-slate-1 p-2 py-1 text-sm tracking-wider text-slate-12 outline-none transition-all duration-200 selection:bg-sky-300 placeholder:text-slate-8 hover:border-sky-200 focus:border-sky-400 sm:py-3 md:text-lg",
props.disabled && "cursor-not-allowed",
props.left && "md:rounded-l-none",
props.small && "text-sm sm:py-[0]"
)}
ref={props.inputRef as RefObject<HTMLInputElement>}
placeholder={props.placeholder}
type={props.type}
value={props.value}
onChange={props.onChange}
disabled={props.disabled}
onKeyDown={props.onKeyDown}
{...props.attributes}
/>
)}
</div>
);
};
Expand Down
2 changes: 1 addition & 1 deletion next/src/components/drawer/DrawerItemButton.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ export const DrawerItemButton = (props: DrawerItemProps) => {
)}
onClick={onClick}
>
<span className="text-sm font-medium">{text}</span>
<span className="line-clamp-1 text-left text-sm font-medium">{text}</span>
</button>
);
};
Expand Down
76 changes: 28 additions & 48 deletions next/src/components/index/landing.tsx
Original file line number Diff line number Diff line change
@@ -1,7 +1,8 @@
import { motion } from "framer-motion";
import { useTranslation } from "next-i18next";
import React from "react";
import { FaCog, FaPlay, FaRobot, FaStar } from "react-icons/fa";
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";
Expand All @@ -15,20 +16,16 @@ import Input from "../Input";
type LandingProps = {
messages: Message[];
disableStartAgent: boolean;
handlePlay: (name: string, goal: string) => void;
handleKeyPress: (
e: React.KeyboardEvent<HTMLInputElement> | React.KeyboardEvent<HTMLTextAreaElement>
) => void;
nameInput: string;
nameInputRef: React.RefObject<HTMLInputElement>;
setNameInput: (string) => void;
handlePlay: (goal: string) => 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] = React.useState(false);
const [showToolsDialog, setShowToolsDialog] = useState(false);

const { t } = useTranslation("indexPage");
const agent = useAgentStore.use.agent();
Expand Down Expand Up @@ -59,53 +56,36 @@ const Landing = (props: LandingProps) => {
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-2"
className="z-10 flex w-full flex-col gap-6"
>
<div className="flex w-full flex-row items-end gap-2 md:items-center">
<Input
inputRef={props.nameInputRef}
left={
<>
<FaRobot />
<span className="ml-2">{`${t("AGENT_NAME")}`}</span>
</>
}
value={props.nameInput}
disabled={agent != null}
onChange={(e) => props.setNameInput(e.target.value)}
onKeyDown={(e) => props.handleKeyPress(e)}
placeholder="AgentGPT"
type="text"
/>
<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={(e) => props.handleKeyPress(e)}
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-amber-500 to-amber-600 transition-all hover:bg-gradient-to-t hover:from-amber-400 hover:to-amber-600"
className="h-full bg-gradient-to-t from-slate-9 to-slate-12 hover:shadow-depth-3"
>
<p className="mr-3">Tools</p>
<FaCog />
</Button>
</div>
<div className="flex w-full flex-row items-end gap-2 md:items-center">
<Input
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={(e) => props.handleKeyPress(e)}
placeholder={`${t("PLACEHOLDER_AGENT_GOAL")}`}
type="textarea"
/>
<Button
onClick={() => props.handlePlay(props.nameInput, props.goalInput)}
className="h-full"
onClick={() => props.handlePlay(props.goalInput)}
className="border-0 bg-gradient-to-t from-[#02FCF1] to-[#A02BFE] subpixel-antialiased saturate-[75%] hover:saturate-100"
>
<p className="mr-5">Play</p>
<FaPlay />
</Button>
</div>
Expand Down
17 changes: 1 addition & 16 deletions next/src/components/sidebar/links.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -9,9 +9,8 @@ import {
FaHome,
FaLinkedin,
FaQuestion,
FaWater,
} from "react-icons/fa";
import {FaXTwitter} from 'react-icons/fa6';
import { FaXTwitter } from "react-icons/fa6";

type LinkMetadata = {
name: string;
Expand All @@ -31,17 +30,6 @@ export const PAGE_LINKS: LinkMetadata[] = [
icon: FaHome,
enabled: true,
},
{
name: "Flows",
href: "/workflow",
icon: FaWater,
className: "transition-transform group-hover:scale-110",
enabled: (user) => !!user && user.organizations.length > 0,
badge: {
text: "Alpha",
className: "bg-gradient-to-tr from-purple-500 to-sky-600",
},
},
{
name: "Help",
href: "https://docs.reworkd.ai/",
Expand All @@ -55,9 +43,6 @@ export const PAGE_LINKS: LinkMetadata[] = [
icon: FaFileCode,
className: "transition-transform group-hover:scale-110",
enabled: true,
badge: {
text: "New",
},
},
{
name: "Settings",
Expand Down
3 changes: 3 additions & 0 deletions next/src/env/schema.mjs
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,8 @@ export const serverSchema = z.object({
// VERCEL_URL doesn't include `https` so it cant be validated as a URL
process.env.VERCEL ? z.string() : z.string().url()
),
OPENAI_API_KEY: z.string().min(1).trim().optional(),

GOOGLE_CLIENT_ID: z.string().min(1).trim().optional(),
GOOGLE_CLIENT_SECRET: z.string().min(1).trim().optional(),
GITHUB_CLIENT_ID: z.string().min(1).trim().optional(),
Expand All @@ -43,6 +45,7 @@ export const serverEnv = {
NODE_ENV: process.env.NODE_ENV,
NEXTAUTH_SECRET: process.env.NEXTAUTH_SECRET,
NEXTAUTH_URL: process.env.NEXTAUTH_URL,
OPENAI_API_KEY: process.env.OPENAI_API_KEY,

GOOGLE_CLIENT_ID: process.env.GOOGLE_CLIENT_ID,
GOOGLE_CLIENT_SECRET: process.env.GOOGLE_CLIENT_SECRET,
Expand Down
Loading

0 comments on commit b94b1ad

Please sign in to comment.