✨ Autogenerate agent names (#1356)

next/package.json

@@ -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",

next/public/locales/en/indexPage.json

@@ -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"
-}
+}

next/src/components/Button.tsx

@@ -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
       )}

next/src/components/Input.tsx

@@ -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>
   );
 };

next/src/components/drawer/DrawerItemButton.tsx

@@ -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>
   );
 };

next/src/components/index/landing.tsx

@@ -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";
@@ -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();
@@ -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>

next/src/components/sidebar/links.tsx

@@ -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;
@@ -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/",
@@ -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",

next/src/env/schema.mjs

@@ -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(),
@@ -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,