🐛 Fix rerender problem (#1143)

awtkns · web-flow · commit eccb538b00a6 · 2023-07-27T12:13:33.000-07:00
* 🐛 Fix rerender problem

* 🐛 Fix rerender problem

* 🐛 Fix layout rendering
diff --git a/next/src/components/drawer/Sidebar.tsx b/next/src/components/drawer/Sidebar.tsx
@@ -6,7 +6,7 @@ import { FaBars } from "react-icons/fa";
 
 export type DisplayProps = {
   show: boolean;
-  setShow: (boolean) => void;
+  setShow: (boolean: boolean) => void;
 };
 
 export type SidebarProps = DisplayProps & {
diff --git a/next/src/components/drawer/TaskSidebar.tsx b/next/src/components/drawer/TaskSidebar.tsx
@@ -5,9 +5,9 @@ import React from "react";
 import { FaBars, FaTimesCircle } from "react-icons/fa";
 import { v1 } from "uuid";
 
-import type { DisplayProps } from "./Sidebar";
 import Sidebar from "./Sidebar";
 import { useAgentStore } from "../../stores";
+import { useLayoutStore } from "../../stores/layoutStore";
 import { useTaskStore } from "../../stores/taskStore";
 import type { Task as TaskType } from "../../types/task";
 import { MESSAGE_TYPE_TASK, TASK_STATUS_STARTED } from "../../types/task";
@@ -16,14 +16,19 @@ import Input from "../Input";
 import FadeIn from "../motions/FadeIn";
 import { getMessageContainerStyle, getTaskStatusIcon } from "../utils/helpers";
 
-
-const TaskSidebar = ({ show, setShow }: DisplayProps) => {
+const TaskSidebar = () => {
   const [customTask, setCustomTask] = React.useState("");
   const agent = useAgentStore.use.agent();
   const tasks = useTaskStore.use.tasks();
   const addTask = useTaskStore.use.addTask();
   const [t] = useTranslation();
 
+  const { layout, setLayout } = useLayoutStore();
+
+  const setShow = (show: boolean) => {
+    setLayout({ showRightSidebar: show });
+  };
+
   const handleAddTask = () => {
     addTask({
       id: v1().toString(),
@@ -36,12 +41,12 @@ const TaskSidebar = ({ show, setShow }: DisplayProps) => {
   };
 
   return (
-    <Sidebar show={show} setShow={setShow} side="right">
+    <Sidebar show={layout.showRightSidebar} setShow={setShow} side="right">
       <div className="flex h-screen flex-col gap-2 text-white">
         <div className="flex flex-row items-center gap-1">
           <button
             className="neutral-button-primary rounded-md border-none transition-all"
-            onClick={() => setShow(!show)}
+            onClick={() => setShow(!layout.showRightSidebar)}
           >
             <FaBars size="15" className="z-20 m-2" />
           </button>
diff --git a/next/src/components/drawer/WorkflowSidebar.tsx b/next/src/components/drawer/WorkflowSidebar.tsx
@@ -1,9 +1,8 @@
 import clsx from "clsx";
-import React from "react";
+import React, { FC } from "react";
 import { FaBars } from "react-icons/fa";
 import type { Edge, Node } from "reactflow";
 
-import type { DisplayProps } from "./Sidebar";
 import Sidebar from "./Sidebar";
 import type { createNodeType, updateNodeType } from "../../hooks/useWorkflow";
 import { findParents } from "../../services/graph-utils";
@@ -12,6 +11,7 @@ import {
   getNodeBlockDefinitionFromNode,
   getNodeBlockDefinitions,
 } from "../../services/workflow/node-block-definitions";
+import { useLayoutStore } from "../../stores/layoutStore";
 import type { WorkflowEdge, WorkflowNode } from "../../types/workflow";
 import WorkflowSidebarInput from "../../ui/WorkflowSidebarInput";
 import PrimaryButton from "../PrimaryButton";
@@ -24,29 +24,21 @@ type WorkflowControls = {
   updateNode: updateNodeType;
 };
 
-type WorkflowSidebarProps = DisplayProps & {
-  controls: WorkflowControls;
-};
-
-// Wrapper HOC to curry the createNode function
-export const getWorkflowSidebar = (controls: WorkflowControls) => {
-  const WorkflowSidebarHOC = ({ show, setShow }: DisplayProps) => (
-    <WorkflowSidebar show={show} setShow={setShow} controls={controls} />
-  );
-  WorkflowSidebarHOC.displayName = "WorkflowSidebarHOC";
-  return WorkflowSidebarHOC;
-};
-
-const WorkflowSidebar = ({ show, setShow, controls }: WorkflowSidebarProps) => {
+const WorkflowSidebar: FC<WorkflowControls> = (controls) => {
   const [tab, setTab] = React.useState<"inspect" | "create">("inspect");
+  const { layout, setLayout } = useLayoutStore();
+
+  const setShow = (show: boolean) => {
+    setLayout({ showRightSidebar: show });
+  };
 
   return (
-    <Sidebar show={show} setShow={setShow} side="right">
+    <Sidebar show={layout.showRightSidebar} setShow={setShow} side="right">
       <div className="text-color-primary mx-2 flex h-screen flex-col gap-2">
         <div className="flex flex-row items-center gap-1">
           <button
             className="neutral-button-primary rounded-md border-none transition-all"
-            onClick={() => setShow(!show)}
+            onClick={() => setShow(!layout.showRightSidebar)}
           >
             <FaBars size="15" className="z-20 mr-2" />
           </button>
@@ -95,6 +87,7 @@ const InspectSection = ({ selectedNode, updateNode, nodes, edges }: InspectSecti
   const definition = getNodeBlockDefinitionFromNode(selectedNode);
 
   const handleValueChange = (name: string, value: string) => {
+    console.log("handleValueChange", name, value);
     const updatedNode = { ...selectedNode };
     updatedNode.data.block.input[name] = value;
     updateNode(updatedNode);
@@ -105,12 +98,10 @@ const InspectSection = ({ selectedNode, updateNode, nodes, edges }: InspectSecti
     if (definition == undefined) return [];
 
     const outputFields = definition.output_fields;
-    return outputFields.map((outputField) => {
-      return {
-        key: `{{${ancestorNode.id}.${outputField.name}}}`,
-        value: `${definition.type}.${outputField.name}`,
-      };
-    });
+    return outputFields.map((outputField) => ({
+      key: `{{${ancestorNode.id}.${outputField.name}}}`,
+      value: `${definition.type}.${outputField.name}`,
+    }));
   });
 
   const handleAutocompleteClick = (inputField: IOField, field: { key: string; value: string }) => {
diff --git a/next/src/layout/dashboard.tsx b/next/src/layout/dashboard.tsx
@@ -1,13 +1,12 @@
 import clsx from "clsx";
-import { useState } from "react";
 import type { ReactNode } from "react";
+import { useState } from "react";
 
 import AppHead from "../components/AppHead";
 import DottedGridBackground from "../components/DottedGridBackground";
 import LeftSidebar from "../components/drawer/LeftSidebar";
-import type { DisplayProps } from "../components/drawer/Sidebar";
 import { SidebarControlButton } from "../components/drawer/Sidebar";
-import { useTheme } from "../hooks/useTheme";
+import { useLayoutStore } from "../stores/layoutStore";
 
 type SidebarSettings = {
   mobile: boolean;
@@ -16,28 +15,31 @@ type SidebarSettings = {
 
 type DashboardLayoutProps = {
   children: ReactNode;
-  rightSidebar?: ({ show, setShow }: DisplayProps) => JSX.Element;
+  rightSidebar?: ReactNode;
 };
-const DashboardLayout = (props: DashboardLayoutProps) => {
-  const [leftSettings, setLeftSettings] = useState({ mobile: false, desktop: true });
-  const [rightSettings, setRightSettings] = useState({ mobile: false, desktop: true });
 
-  const setMobile =
-    (settings: SidebarSettings, setSettings: (SidebarSettings) => void) => (open: boolean) =>
-      setSettings({
-        mobile: open,
-        desktop: settings.desktop,
-      });
+const defaultState: SidebarSettings = {
+  mobile: false,
+  desktop: true,
+};
+
+const setMobile =
+  (settings: SidebarSettings, setSettings: (SidebarSettings) => void) => (open: boolean) =>
+    setSettings({
+      mobile: open,
+      desktop: settings.desktop,
+    });
 
-  const setDesktop =
-    (settings: SidebarSettings, setSettings: (SidebarSettings) => void) => (open: boolean) =>
-      setSettings({
-        mobile: settings.mobile,
-        desktop: open,
-      });
+const setDesktop =
+  (settings: SidebarSettings, setSettings: (SidebarSettings) => void) => (open: boolean) =>
+    setSettings({
+      mobile: settings.mobile,
+      desktop: open,
+    });
 
-  //add event listener to detect OS theme changes
-  useTheme();
+const DashboardLayout = (props: DashboardLayoutProps) => {
+  const [leftSettings, setLeftSettings] = useState(defaultState);
+  const { layout, setLayout } = useLayoutStore();
 
   return (
     <>
@@ -72,39 +74,20 @@ const DashboardLayout = (props: DashboardLayoutProps) => {
       {/* Mobile */}
       {props.rightSidebar && (
         <>
-          <props.rightSidebar
-            show={rightSettings.mobile}
-            setShow={setMobile(rightSettings, setRightSettings)}
+          <div className="lg:inset-y-0 lg:flex lg:w-64 lg:flex-col">{props.rightSidebar}</div>
+          <SidebarControlButton
+            side="right"
+            show={layout.showRightSidebar}
+            setShow={(show) => setLayout({ showRightSidebar: show })}
           />
-          <div className={rightSettings.mobile ? "hidden" : "lg:hidden"}>
-            <SidebarControlButton
-              side="right"
-              show={rightSettings.mobile}
-              setShow={setMobile(rightSettings, setRightSettings)}
-            />
-          </div>
-          {/* Desktop sidebar */}
-          <div className="hidden lg:visible lg:inset-y-0  lg:flex lg:w-64 lg:flex-col">
-            <props.rightSidebar
-              show={rightSettings.desktop}
-              setShow={setDesktop(rightSettings, setRightSettings)}
-            />
-          </div>
-          <div className={rightSettings.desktop ? "hidden" : "hidden lg:block"}>
-            <SidebarControlButton
-              side="right"
-              show={rightSettings.desktop}
-              setShow={setDesktop(rightSettings, setRightSettings)}
-            />
-          </div>
         </>
       )}
 
       <main
         className={clsx(
           "bg-gradient-to-b from-[#2B2B2B] to-[#1F1F1F] duration-300",
           leftSettings.desktop && "lg:pl-64",
-          props.rightSidebar && rightSettings.desktop && "lg:pr-64"
+          props.rightSidebar && layout.showRightSidebar && "lg:pr-64"
         )}
       >
         <DottedGridBackground className="min-w-screen min-h-screen">
diff --git a/next/src/pages/index.tsx b/next/src/pages/index.tsx
@@ -1,7 +1,6 @@
 import clsx from "clsx";
 import { AnimatePresence, motion } from "framer-motion";
 import { type GetStaticProps, type NextPage } from "next";
-import { useRouter } from "next/router";
 import { useTranslation } from "next-i18next";
 import { serverSideTranslations } from "next-i18next/serverSideTranslations";
 import React, { useEffect, useRef } from "react";
@@ -19,10 +18,16 @@ import Summarize from "../components/console/SummarizeButton";
 import HelpDialog from "../components/dialog/HelpDialog";
 import { SignInDialog } from "../components/dialog/SignInDialog";
 import { ToolsDialog } from "../components/dialog/ToolsDialog";
+import TaskSidebar from "../components/drawer/TaskSidebar";
 import Input from "../components/Input";
+import Expand from "../components/motions/expand";
 import FadeIn from "../components/motions/FadeIn";
 import { useAgent } from "../hooks/useAgent";
 import { useAuth } from "../hooks/useAuth";
+import { useSettings } from "../hooks/useSettings";
+import DashboardLayout from "../layout/dashboard";
+import { AgentApi } from "../services/agent/agent-api";
+import { DefaultAgentRunModel } from "../services/agent/agent-run-model";
 import AutonomousAgent from "../services/agent/autonomous-agent";
 import { MessageService } from "../services/agent/message-service";
 import {
@@ -32,24 +37,16 @@ import {
   useMessageStore,
 } from "../stores";
 import { useAgentInputStore } from "../stores/agentInputStore";
-import { languages } from "../utils/languages";
-import { isEmptyOrBlank } from "../utils/whitespace";
-
-import DashboardLayout from "../layout/dashboard";
-import Expand from "../components/motions/expand";
-import { useSettings } from "../hooks/useSettings";
-import { DefaultAgentRunModel } from "../services/agent/agent-run-model";
 import { resetAllTaskSlices, useTaskStore } from "../stores/taskStore";
-import { AgentApi } from "../services/agent/agent-api";
 import { toApiModelSettings } from "../utils/interfaces";
-import TaskSidebar from "../components/drawer/TaskSidebar";
+import { languages } from "../utils/languages";
+import { isEmptyOrBlank } from "../utils/whitespace";
 
 const Home: NextPage = () => {
   const { t } = useTranslation("indexPage");
   const addMessage = useMessageStore.use.addMessage();
   const messages = useMessageStore.use.messages();
   const tasks = useTaskStore.use.tasks();
-  const { query } = useRouter();
 
   const setAgent = useAgentStore.use.setAgent();
   const agentLifecycle = useAgentStore.use.lifecycle();
@@ -161,7 +158,7 @@ const Home: NextPage = () => {
   };
 
   return (
-    <DashboardLayout rightSidebar={TaskSidebar}>
+    <DashboardLayout rightSidebar={<TaskSidebar />}>
       <HelpDialog />
       <ToolsDialog show={showToolsDialog} close={() => setShowToolsDialog(false)} />
 
diff --git a/next/src/pages/workflow/[workflow].tsx b/next/src/pages/workflow/[workflow].tsx
@@ -5,7 +5,7 @@ import { serverSideTranslations } from "next-i18next/serverSideTranslations";
 import { FaSave } from "react-icons/fa";
 
 import nextI18NextConfig from "../../../next-i18next.config";
-import { getWorkflowSidebar } from "../../components/drawer/WorkflowSidebar";
+import WorkflowSidebar from "../../components/drawer/WorkflowSidebar";
 import PrimaryButton from "../../components/PrimaryButton";
 import FlowChart from "../../components/workflow/Flowchart";
 import { useAuth } from "../../hooks/useAuth";
@@ -21,16 +21,18 @@ const WorkflowPage: NextPage = () => {
   const { nodesModel, edgesModel, selectedNode, saveWorkflow, createNode, updateNode, members } =
     useWorkflow(query.workflow as string, session);
 
+  const rightSideBar = (
+    <WorkflowSidebar
+      createNode={createNode}
+      updateNode={updateNode}
+      selectedNode={selectedNode}
+      nodes={nodesModel[0]}
+      edges={edgesModel[0]}
+    />
+  );
+
   return (
-    <DashboardLayout
-      rightSidebar={getWorkflowSidebar({
-        createNode,
-        selectedNode,
-        updateNode,
-        nodes: nodesModel[0],
-        edges: edgesModel[0],
-      })}
-    >
+    <DashboardLayout rightSidebar={rightSideBar}>
       <FlowChart
         controls={true}
         nodesModel={nodesModel}
diff --git a/next/src/stores/layoutStore.ts b/next/src/stores/layoutStore.ts
@@ -0,0 +1,36 @@
+import type { StateCreator } from "zustand";
+import { create } from "zustand";
+
+import { createSelectors } from "./helpers";
+
+interface Layout {
+  showRightSidebar: boolean;
+}
+
+interface LayoutSlice {
+  layout: Layout;
+  setLayout: (layout: Layout) => void;
+}
+
+const initialState = {
+  layout: {
+    showRightSidebar: false,
+  },
+};
+
+const createLayoutSlice: StateCreator<LayoutSlice> = (set, get) => {
+  return {
+    ...initialState,
+    setLayout: (layout: Layout) => {
+      set(() => ({
+        layout,
+      }));
+    },
+  };
+};
+
+export const useLayoutStore = createSelectors(
+  create<LayoutSlice>()((...a) => ({
+    ...createLayoutSlice(...a),
+  }))
+);
diff --git a/next/src/ui/WorkflowSidebarInput.tsx b/next/src/ui/WorkflowSidebarInput.tsx
@@ -1,11 +1,11 @@
 import React from "react";
+import type { Node } from "reactflow";
 
 import Combo from "./combox";
 import Dropzone from "./dropzone";
 import InputWithSuggestions from "./InputWithSuggestions";
 import type { IOField } from "../services/workflow/node-block-definitions";
-import { WorkflowNode } from "../types/workflow";
-import { Node } from "reactflow";
+import type { WorkflowNode } from "../types/workflow";
 
 interface SidebarInputProps {
   inputField: IOField;
