Merge pull request #342 from kreneskyp/left_sidebar

Left sidebar
kreneskyp · Dec 10, 2023 · cc0a1f0 · cc0a1f0
2 parents d25f6f5 + 4b4f44d
commit cc0a1f0
Show file tree

Hide file tree

Showing 20 changed files with 264 additions and 218 deletions.
diff --git a/frontend/agents/AgentCardListButton.js b/frontend/agents/AgentCardListButton.js
@@ -1,14 +1,12 @@
 import React from "react";
-import { Box, IconButton, SimpleGrid } from "@chakra-ui/react";
+import { Box, SimpleGrid } from "@chakra-ui/react";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faAddressBook } from "@fortawesome/free-solid-svg-icons";
 
 import { ModalTrigger } from "components/Modal";
 import { usePaginatedAPI } from "utils/hooks/usePaginatedAPI";
-import {
-  useEditorColorMode,
-  useSideBarColorMode,
-} from "chains/editor/useColorMode";
+import { useEditorColorMode } from "chains/editor/useColorMode";
+import { MenuItem } from "site/MenuItem";
 
 const AgentCardList = ({ agents, Card }) => {
   const { scrollbar } = useEditorColorMode();
@@ -34,19 +32,16 @@ const AgentCardList = ({ agents, Card }) => {
 };
 
 export const AgentCardListButton = ({ Card }) => {
-  const style = useSideBarColorMode();
   const { page, load } = usePaginatedAPI("/api/agents/", {
     limit: 1000,
     load: false,
   });
 
   return (
     <ModalTrigger onOpen={load} title={"Agents"}>
-      <IconButton
-        icon={<FontAwesomeIcon icon={faAddressBook} />}
-        title={"add/remove assistants"}
-        {...style.button}
-      />
+      <MenuItem title={"Assistants"}>
+        <FontAwesomeIcon icon={faAddressBook} />
+      </MenuItem>
       <ModalTrigger.Content title="Manage Agents">
         <AgentCardList agents={page?.objects} Card={Card} />
       </ModalTrigger.Content>

diff --git a/frontend/agents/NewAgentButton.js b/frontend/agents/NewAgentButton.js
@@ -1,24 +1,18 @@
 import React from "react";
 import { Link } from "react-router-dom";
-import { IconButton } from "@chakra-ui/react";
-import { useColorMode } from "@chakra-ui/color-mode";
+import { Tooltip } from "@chakra-ui/react";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faDiagramProject } from "@fortawesome/free-solid-svg-icons";
+import { MenuItem } from "site/MenuItem";
 
 export const NewAgentButton = () => {
-  const { colorMode } = useColorMode();
-
   return (
-    <Link to="/chains/new">
-      <IconButton
-        width="100%"
-        border="1px solid"
-        borderColor={colorMode === "light" ? "gray.300" : "whiteAlpha.50"}
-        icon={<FontAwesomeIcon icon={faDiagramProject} />}
-        title={"New Agent or Chain"}
-      >
-        New Agent
-      </IconButton>
-    </Link>
+    <Tooltip label="New Agent" aria-label="New Agent">
+      <Link to="/chains/new">
+        <MenuItem title={"New Agent"}>
+          <FontAwesomeIcon icon={faDiagramProject} />
+        </MenuItem>
+      </Link>
+    </Tooltip>
   );
 };
diff --git a/frontend/chains/ChainCardListButton.js b/frontend/chains/ChainCardListButton.js
@@ -1,5 +1,5 @@
 import React from "react";
-import { Box, IconButton, SimpleGrid } from "@chakra-ui/react";
+import { Box, SimpleGrid } from "@chakra-ui/react";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faChain } from "@fortawesome/free-solid-svg-icons";
 
@@ -10,6 +10,7 @@ import {
   useSideBarColorMode,
 } from "chains/editor/useColorMode";
 import ChainCard from "chains/ChainCard";
+import { MenuItem } from "site/MenuItem";
 
 const ChainCardList = ({ chains, Card }) => {
   const { scrollbar } = useEditorColorMode();
@@ -40,11 +41,9 @@ export const ChainCardListButton = ({ Card }) => {
 
   return (
     <ModalTrigger onOpen={load} title={"Chains"}>
-      <IconButton
-        icon={<FontAwesomeIcon icon={faChain} />}
-        title={"Chains"}
-        {...style.button}
-      />
+      <MenuItem title="Chains">
+        <FontAwesomeIcon icon={faChain} />
+      </MenuItem>
       <ModalTrigger.Content title="Manage Chains">
         <ChainCardList chains={page?.objects} Card={ChainCard} />
       </ModalTrigger.Content>

diff --git a/frontend/chains/ChainEditorView.js b/frontend/chains/ChainEditorView.js
@@ -1,12 +1,6 @@
 import React, { useCallback, useEffect } from "react";
 import { useParams } from "react-router-dom";
-import {
-  HStack,
-  Spinner,
-  useDisclosure,
-  useToast,
-  VStack,
-} from "@chakra-ui/react";
+import { HStack, Spinner, useToast, VStack } from "@chakra-ui/react";
 import { ReactFlowProvider, useReactFlow } from "reactflow";
 
 import { Layout, LayoutContent, LayoutLeftPane } from "site/Layout";

diff --git a/frontend/chains/editor/NodeTypeSearch.js b/frontend/chains/editor/NodeTypeSearch.js
@@ -222,7 +222,7 @@ export const NodeTypeSearch = ({ initialFocusRef }) => {
       minWidth={170}
       overflowY={"hidden"}
       overflowX={"hidden"}
-      maxHeight={"calc(100vh - 170px)"}
+      maxHeight={"calc(100vh - 250px)"}
     >
       <Box px={3} pb={1}>
         <ComponentTypeMultiSelect

diff --git a/frontend/chains/editor/NodeTypeSearchButton.js b/frontend/chains/editor/NodeTypeSearchButton.js
@@ -1,7 +1,7 @@
 import React, { useContext, useEffect } from "react";
 import { NodeTypeSearch } from "chains/editor/NodeTypeSearch";
 import {
-  IconButton,
+  Box,
   Popover,
   PopoverArrow,
   PopoverCloseButton,
@@ -14,8 +14,9 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faSquarePlus } from "@fortawesome/free-solid-svg-icons";
 import { useColorMode } from "@chakra-ui/color-mode";
 import { SelectedNodeContext } from "chains/editor/contexts";
-import { ComponentTypeMultiSelect } from "chains/editor/ComponentTypeMultiSelect";
 import { NO_SCROLLBAR_CSS } from "site/css";
+import { MenuItem } from "site/MenuItem";
+import { useLeftSidebarContext } from "site/sidebar/context";
 
 export const NodeTypeSearchButton = () => {
   const { isOpen, onToggle, onClose, onOpen } = useDisclosure();
@@ -35,19 +36,12 @@ export const NodeTypeSearchButton = () => {
   }, [selectedConnector]);
 
   const { colorMode } = useColorMode();
-  const style =
-    colorMode === "light"
-      ? {
-          border: "1px solid",
-          borderColor: "gray.300",
-        }
-      : {
-          border: "1px solid",
-          borderColor: "whiteAlpha.50",
-        };
   const highlightColor = colorMode === "light" ? "blue.500" : "blue.400";
   const color = colorMode === "light" ? "gray.800" : "white";
 
+  const sideBar = useLeftSidebarContext();
+  const width = sideBar.size === "icons" ? "25px" : "110px";
+
   // HAX: Popover must be closedOnBlue=False to allow for connectors to
   //      switch without closing the popover. It proved very difficult to
   //      prevent onClose from detecting that a new connector was selected.
@@ -60,12 +54,15 @@ export const NodeTypeSearchButton = () => {
       initialFocusRef={initialFocusRef}
     >
       <PopoverTrigger>
-        <IconButton
-          icon={<FontAwesomeIcon size={"lg"} icon={faSquarePlus} />}
-          {...style}
+        <Box
           onClick={onToggle}
-          title={"Add components"}
-        />
+          width={width}
+          transition="width 0.3s ease-out, max-width 0.3s ease-out"
+        >
+          <MenuItem onClick={onToggle} title={"Add Node"}>
+            <FontAwesomeIcon size={"lg"} icon={faSquarePlus} />
+          </MenuItem>
+        </Box>
       </PopoverTrigger>
       <PopoverContent
         zIndex={99998}

diff --git a/frontend/chains/editor/useColorMode.js b/frontend/chains/editor/useColorMode.js
@@ -78,6 +78,10 @@ export const useEditorColorMode = () => {
       store: retrieval,
       default: isLight ? "gray.400" : "gray.700",
     },
+    indicator: {
+      success: isLight ? "green.600" : "green.400",
+      error: isLight ? "red.500" : "red.400",
+    },
     scrollbar: isLight
       ? {
           "&::-webkit-scrollbar": {
@@ -109,6 +113,13 @@ export const useEditorColorMode = () => {
             background: theme.colors.gray[500],
           },
         },
+    badge: isLight
+      ? {
+          color: "white",
+        }
+      : {
+          color: "gray.900",
+        },
     input: isLight
       ? {
           bg: "gray.50",

diff --git a/frontend/chat/buttons/ChatMembersButton.js b/frontend/chat/buttons/ChatMembersButton.js
@@ -1,71 +1,31 @@
 import React from "react";
-import {
-  IconButton,
-  Popover,
-  PopoverArrow,
-  PopoverCloseButton,
-  PopoverContent,
-  PopoverHeader,
-  PopoverTrigger,
-  useDisclosure,
-} from "@chakra-ui/react";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faUsers } from "@fortawesome/free-solid-svg-icons";
-import { useColorMode } from "@chakra-ui/color-mode";
 import SideBarAgentList from "chat/sidebar/SideBarAgentList";
+import { MenuItem } from "site/MenuItem";
+import {
+  LeftMenuPopover,
+  LeftSidebarPopupContent,
+  LeftSidebarPopupHeader,
+  LeftSidebarPopupIcon,
+} from "site/LeftMenuPopover";
 
 export const ChatMembersButton = ({ graph, onUpdateAgents, agentPage }) => {
-  const { isOpen, onToggle, onClose } = useDisclosure();
-
-  const { colorMode } = useColorMode();
-  const style =
-    colorMode === "light"
-      ? {
-          border: "1px solid",
-          borderColor: "gray.300",
-        }
-      : {
-          border: "1px solid",
-          borderColor: "whiteAlpha.50",
-        };
-  const highlightColor = colorMode === "light" ? "blue.500" : "blue.400";
-  const color = colorMode === "light" ? "gray.800" : "white";
-
   return (
-    <Popover
-      isOpen={isOpen}
-      onClose={onClose}
-      placement={"right-start"}
-      closeOnBlur={false}
-    >
-      <PopoverTrigger>
-        <IconButton
-          icon={<FontAwesomeIcon size={"lg"} icon={faUsers} />}
-          {...style}
-          onClick={onToggle}
-          title={"Chat members"}
-        />
-      </PopoverTrigger>
-      <PopoverContent
-        zIndex={99998}
-        pb={2}
-        boxShadow="0px 0px 10px 0px rgba(0,0,0,0.15)"
-      >
-        <PopoverHeader
-          borderBottom="2px solid"
-          borderColor={highlightColor}
-          color={color}
-        >
-          Assistants
-        </PopoverHeader>
-        <PopoverArrow />
-        <PopoverCloseButton />
+    <LeftMenuPopover>
+      <LeftSidebarPopupIcon>
+        <MenuItem title="Secrets">
+          <FontAwesomeIcon icon={faUsers} />
+        </MenuItem>
+      </LeftSidebarPopupIcon>
+      <LeftSidebarPopupHeader>Assistants</LeftSidebarPopupHeader>
+      <LeftSidebarPopupContent>
         <SideBarAgentList
           graph={graph}
           onUpdateAgents={onUpdateAgents}
           agentPage={agentPage}
         />
-      </PopoverContent>
-    </Popover>
+      </LeftSidebarPopupContent>
+    </LeftMenuPopover>
   );
 };
diff --git a/frontend/chat/buttons/NewChatButton.js b/frontend/chat/buttons/NewChatButton.js
@@ -1,14 +1,10 @@
-import { Button, Icon, IconButton } from "@chakra-ui/react";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faPlus } from "@fortawesome/free-solid-svg-icons";
 import React from "react";
 import useCreateChat from "chat/hooks/useCreateChat";
-import { useColorMode } from "@chakra-ui/color-mode";
 import PlusMessageIcon from "components/PlusMessageIcon";
+import { MenuItem } from "site/MenuItem";
 
 export const NewChatButton = () => {
   const { createChat } = useCreateChat();
-  const { colorMode } = useColorMode();
   const handleCreate = async () => {
     try {
       await createChat();
@@ -25,12 +21,8 @@ export const NewChatButton = () => {
   };
 
   return (
-    <IconButton
-      border="1px solid"
-      borderColor={colorMode === "light" ? "gray.300" : "whiteAlpha.50"}
-      icon={<PlusMessageIcon />}
-      title={"New Chat"}
-      onClick={handleCreate}
-    />
+    <MenuItem title={"New Chat"} onClick={handleCreate}>
+      <PlusMessageIcon />
+    </MenuItem>
   );
 };
diff --git a/frontend/components/ColorModeButton.js b/frontend/components/ColorModeButton.js
@@ -1,36 +1,18 @@
 import React from "react";
 import { useColorMode } from "@chakra-ui/color-mode";
-import { Button, IconButton } from "@chakra-ui/react";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faMoon } from "@fortawesome/free-solid-svg-icons";
 import { faSun } from "@fortawesome/free-regular-svg-icons";
+import { MenuItem } from "site/MenuItem";
 
 export const ColorModeButton = () => {
   const { colorMode, toggleColorMode } = useColorMode();
-  const style =
-    colorMode === "light"
-      ? {
-          text: "Dark Mode",
-          border: "1px solid",
-          borderColor: "gray.300",
-        }
-      : {
-          title: "Light Mode",
-          border: "1px solid",
-          borderColor: "whiteAlpha.50",
-        };
 
   const icon = colorMode === "light" ? faMoon : faSun;
   const title = colorMode === "light" ? "Dark Mode" : "Light Mode";
   return (
-    <header>
-      <IconButton
-        {...style}
-        icon={<FontAwesomeIcon icon={icon} />}
-        onClick={toggleColorMode}
-      >
-        Toggle {colorMode === "light" ? "Dark" : "Light"}
-      </IconButton>
-    </header>
+    <MenuItem title={title} onClick={toggleColorMode}>
+      <FontAwesomeIcon icon={icon} />
+    </MenuItem>
   );
 };
diff --git a/frontend/components/Modal.js b/frontend/components/Modal.js
@@ -10,6 +10,7 @@ import {
   ModalBody,
   ModalCloseButton,
 } from "@chakra-ui/react";
+import { MenuItem } from "site/MenuItem";
 
 export const ModalClose = React.createContext(null);
 
@@ -64,6 +65,7 @@ export const ModalTrigger = ({
 
   const button = React.Children.toArray(children).find(
     (child) =>
+      child.type === MenuItem ||
       child.type === ModalTriggerButton ||
       child.type === IconButton ||
       child.type === Button