🐛 Fix homepage reloading

next/src/components/drawer/LeftSidebar.tsx

@@ -13,7 +13,7 @@ import LinkIconItem from "../sidebar/LinkIconItem";
 import LinkItem from "../sidebar/LinkItem";
 import { PAGE_LINKS, SOCIAL_LINKS } from "../sidebar/links";
 
-const LeftSidebar = ({ show, setShow }: DisplayProps) => {
+const LeftSidebar = ({ show, setShow, onReload }: DisplayProps & { onReload?: () => void }) => {
   const router = useRouter();
   const { session, signIn, signOut, status } = useAuth();
   const [t] = useTranslation("drawer");
@@ -95,6 +95,12 @@ const LeftSidebar = ({ show, setShow }: DisplayProps) => {
               href={link.href}
               badge={link.badge}
               onClick={() => {
+                console.log(router.pathname, link.href, link.forceRefresh);
+                if (router.pathname === link.href && link.forceRefresh) {
+                  onReload?.();
+                  return;
+                }
+
                 void router.push(link.href);
               }}
             >

next/src/components/index/landing.tsx

@@ -16,7 +16,7 @@ import Input from "../Input";
 type LandingProps = {
   messages: Message[];
   disableStartAgent: boolean;
-  handlePlay: (goal: string) => void;
+  handlePlay: () => void;
   handleKeyPress: (e: KeyboardEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
   goalInputRef: RefObject<HTMLInputElement>;
   goalInput: string;
@@ -69,7 +69,7 @@ const Landing = (props: LandingProps) => {
           disabled={agent != null}
           value={props.goalInput}
           onChange={(e) => props.setGoalInput(e.target.value)}
-          onKeyDown={(e) => props.handleKeyPress(e)}
+          onKeyDown={props.handleKeyPress}
           placeholder={`${t("PLACEHOLDER_AGENT_GOAL")}`}
           type="textarea"
         />
@@ -83,7 +83,7 @@ const Landing = (props: LandingProps) => {
             <FaCog />
           </Button>
           <Button
-            onClick={() => props.handlePlay(props.goalInput)}
+            onClick={props.handlePlay}
             className="border-0 bg-gradient-to-t from-[#02FCF1] to-[#A02BFE] subpixel-antialiased saturate-[75%] hover:saturate-100"
           >
             <FaPlay />

next/src/components/sidebar/LinkItem.tsx

@@ -6,6 +6,7 @@ import Badge from "../Badge";
 const LinkItem = (props: {
   title: string;
   children: ReactNode;
+  forceRefresh?: boolean;
   href?: string;
   badge?: { text: string; className?: string };
   onClick: () => void;

next/src/components/sidebar/links.tsx

@@ -15,6 +15,7 @@ import { FaXTwitter } from "react-icons/fa6";
 type LinkMetadata = {
   name: string;
   href: string;
+  forceRefresh?: boolean;
   icon: IconType;
   badge?: {
     text: string;
@@ -29,6 +30,7 @@ export const PAGE_LINKS: LinkMetadata[] = [
     href: "/",
     icon: FaHome,
     enabled: true,
+    forceRefresh: true,
   },
   {
     name: "Help",

next/src/layout/dashboard.tsx

@@ -15,6 +15,7 @@ type SidebarSettings = {
 type DashboardLayoutProps = {
   children: ReactNode;
   rightSidebar?: ReactNode;
+  onReload?: () => void;
 };
 
 const defaultState: SidebarSettings = {
@@ -45,7 +46,11 @@ const DashboardLayout = (props: DashboardLayoutProps) => {
       <AppHead />
       {/* Left sidebar */}
       {/* Mobile */}
-      <LeftSidebar show={leftSettings.mobile} setShow={setMobile(leftSettings, setLeftSettings)} />
+      <LeftSidebar
+        show={leftSettings.mobile}
+        setShow={setMobile(leftSettings, setLeftSettings)}
+        onReload={props.onReload}
+      />
       <div className={leftSettings.mobile ? "hidden" : "lg:hidden"}>
         <SidebarControlButton
           side="left"
@@ -58,6 +63,7 @@ const DashboardLayout = (props: DashboardLayoutProps) => {
         <LeftSidebar
           show={leftSettings.desktop}
           setShow={setDesktop(leftSettings, setLeftSettings)}
+          onReload={props.onReload}
         />
       </div>
       <div className={leftSettings.desktop ? "hidden" : "hidden lg:block"}>

next/src/pages/index.tsx

@@ -67,12 +67,12 @@ const Home: NextPage = () => {
 
   const handlePlay = (goal: string) => {
     if (agentLifecycle === "stopped") handleRestart();
-    else handleNewAgent("", goal.trim());
+    else handleNewAgent(goal.trim());
   };
 
-  const handleNewAgent = (name: string, goal: string) => {
+  const handleNewAgent = (goal: string) => {
     if (session === null) {
-      storeAgentDataInLocalStorage(name, goal);
+      storeAgentDataInLocalStorage("", goal);
       setShowSignInDialog(true);
       return;
     }
@@ -82,13 +82,12 @@ const Home: NextPage = () => {
       return;
     }
 
-    const model = new DefaultAgentRunModel(name.trim(), goal.trim());
+    const model = new DefaultAgentRunModel(goal.trim());
     const messageService = new MessageService(addMessage);
     const agentApi = new AgentApi({
       model_settings: toApiModelSettings(settings, session),
-      name: name,
       goal: goal,
-      session,
+      session: session,
       agentUtils: agentUtils,
     });
     const newAgent = new AutonomousAgent(
@@ -122,7 +121,7 @@ const Home: NextPage = () => {
         localStorage.removeItem("agentData");
       }
     }
-  }, [session]);
+  }, [session, setGoalInput, setNameInput]);
 
   const handleRestart = () => {
     resetAllMessageSlices();
@@ -138,7 +137,12 @@ const Home: NextPage = () => {
   };
 
   return (
-    <DashboardLayout>
+    <DashboardLayout
+      onReload={() => {
+        agent?.stopAgent();
+        handleRestart();
+      }}
+    >
       <HelpDialog />
 
       <SignInDialog show={showSignInDialog} setOpen={setShowSignInDialog} />
@@ -163,7 +167,7 @@ const Home: NextPage = () => {
             <Landing
               messages={messages}
               disableStartAgent={disableStartAgent}
-              handlePlay={handlePlay}
+              handlePlay={() => handlePlay(goalInput)}
               handleKeyPress={handleKeyPress}
               goalInputRef={goalInputRef}
               goalInput={goalInput}

next/src/services/agent/agent-api.ts

@@ -8,7 +8,6 @@ import type { RequestBody } from "../../utils/interfaces";
 import * as apiUtils from "../api-utils";
 
 type ApiProps = Pick<RequestBody, "model_settings" | "goal"> & {
-  name: string;
   session?: Session;
   agentUtils: AgentUtils;
 };

next/src/services/agent/agent-run-model.tsx

@@ -10,8 +10,6 @@ import type { Task, TaskStatus } from "../../types/task";
 export interface AgentRunModel {
   getId(): string;
 
-  getName(): string;
-
   getGoal(): string;
 
   getLifecycle(): AgentLifecycle;
@@ -30,26 +28,20 @@ export interface AgentRunModel {
 
   addTask(taskValue: string): void;
 }
- 
+
 export type AgentLifecycle = "offline" | "running" | "pausing" | "paused" | "stopped";
 
 export class DefaultAgentRunModel implements AgentRunModel {
-  id: string;
-  name: string;
-  goal: string;
-  tasks: string[];
-  completedTasks: string[];
+  private readonly id: string;
+  private readonly goal: string;
 
-  constructor(name: string, goal: string) {
+  constructor(goal: string) {
     this.id = v4().toString();
-    this.name = name;
     this.goal = goal;
-    this.tasks = [];
-    this.completedTasks = [];
   }
 
   getId = () => this.id;
-  getName = () => this.name;
+
   getGoal = () => this.goal;
   getLifecycle = (): AgentLifecycle => useAgentStore.getState().lifecycle;
   setLifecycle = (lifecycle: AgentLifecycle) => useAgentStore.getState().setLifecycle(lifecycle);