Feat: Remove buttons from sideBar and create flow toolbar (run/share/api)

src/frontend/src/App.css

@@ -90,3 +90,11 @@ body {
 .jv-indent::-webkit-scrollbar-thumb:hover {
   background-color: #bbb !important;
 }
+
+.custom-hover {
+  transition: background-color 0.5s ease;
+}
+
+.custom-hover:hover {
+  background-color: rgba(99, 102, 241, 0.1); /* Medium indigo color with 20% opacity */
+}

src/frontend/src/CustomNodes/GenericNode/index.tsx

@@ -509,10 +509,10 @@ export default function GenericNode({
                       ) : !validationStatus ? (
                         <span className="flex">{STATUS_BUILD}</span>
                       ) : (
-                        <div className="max-h-100">
+                        <div className="max-h-100 p-2">
                           <div>
                             {lastRunTime && (
-                              <div className="justify-left flex text-muted-foreground">
+                              <div className="justify-left flex text-muted-foreground font-normal">
                                 <div>{RUN_TIMESTAMP_PREFIX}</div>
                                 <div className="ml-1 text-status-blue">
                                   {lastRunTime}
@@ -520,19 +520,19 @@ export default function GenericNode({
                               </div>
                             )}
                           </div>
-                          <div className="justify-left flex text-muted-foreground">
+                          <div className="justify-left flex text-muted-foreground font-normal">
                             <div>Duration:</div>
-                            <div className="ml-1 text-status-blue">
+                            <div className="ml-1 text-status-blue mb-3">
                               {validationStatus?.data.duration}
                             </div>
                           </div>
                           <hr />
-                          <span className="flex justify-center   text-muted-foreground ">
+                          <span className="flex justify-center   text-muted-foreground mt-2 mb-2 font-semibold">
                             Output
                           </span>
-                          <div className="max-h-96 overflow-auto custom-scroll">
+                          <div className="max-h-96 overflow-auto custom-scroll font-normal">
                             {validationString.split("\n").map((line, index) => (
-                              <div key={index}>{line}</div>
+                              <div className="font-normal" key={index}>{line}</div>
                             ))}
                           </div>
                         </div>

src/frontend/src/components/chatComponent/index.tsx

@@ -1,14 +1,26 @@
-import { useEffect, useRef, useState } from "react";
+import { useEffect, useMemo, useRef, useState } from "react";
 import useFlowStore from "../../stores/flowStore";
 import { ChatType } from "../../types/chat";
 import IOView from "../IOview";
 import ChatTrigger from "../ViewTriggers/chat";
+import { Transition } from "@headlessui/react";
+import ForwardedIconComponent from "../genericIconComponent";
+import { Separator } from "../ui/separator";
+import ShareModal from "../../modals/shareModal";
+import { useStoreStore } from "../../stores/storeStore";
+import useFlowsManagerStore from "../../stores/flowsManagerStore";
+import { classNames } from "../../utils/utils";
+import ApiModal from "../../modals/ApiModal";
 
 export default function Chat({ flow }: ChatType): JSX.Element {
   const [open, setOpen] = useState(false);
   const flowState = useFlowStore((state) => state.flowState);
   const nodes = useFlowStore((state) => state.nodes);
   const hasIO = useFlowStore((state) => state.hasIO);
+  const hasStore = useStoreStore((state) => state.hasStore);
+  const validApiKey = useStoreStore((state) => state.validApiKey);
+  const currentFlow = useFlowsManagerStore((state) => state.currentFlow);
+  const hasApiKey = useStoreStore((state) => state.hasApiKey);
 
   useEffect(() => {
     const handleKeyDown = (event: KeyboardEvent) => {
@@ -29,16 +41,100 @@ export default function Chat({ flow }: ChatType): JSX.Element {
 
   const prevNodesRef = useRef<any[] | undefined>();
 
+  const ModalMemo = useMemo(
+    () => (
+      <ShareModal
+        is_component={false}
+        component={currentFlow!}
+        disabled={!hasApiKey || !validApiKey || !hasStore}
+      >
+        <button
+          disabled={!hasApiKey || !validApiKey || !hasStore}
+          className={classNames(
+            "relative inline-flex w-full h-full items-center justify-center hover:bg-hover bg-muted hover:bg-background px-5 py-3 text-foreground transition-all duration-500 ease-in-out gap-[4px] text-sm font-semibold",
+            !hasApiKey || !validApiKey || !hasStore
+              ? "button-disable  cursor-default text-muted-foreground"
+              : ""
+          )}
+        >
+          <ForwardedIconComponent
+            name="Share3"
+            className={classNames(
+              "-m-0.5 -ml-1 h-6 w-6",
+              !hasApiKey || !validApiKey || !hasStore
+                ? "extra-side-bar-save-disable"
+                : ""
+            )}
+          />
+          Share
+        </button>
+      </ShareModal>
+    ),
+    [hasApiKey, validApiKey, currentFlow, hasStore]
+  );
+
   return (
     <>
-      <div className="flex flex-col">
+      <Transition
-        {/* <BuildTrigger open={open} flow={flow} /> */}
+      show={true}
-        {hasIO && (
+      appear={true}
+      enter="transition ease-out duration-300"
+      enterFrom="translate-y-96"
+      enterTo="translate-y-0"
+      leave="transition ease-in duration-300"
+      leaveFrom="translate-y-0"
+      leaveTo="translate-y-96"
+      >
+      <div
+        className={
+          "shadow-round-btn-shadow hover:shadow-round-btn-shadow message-button-position flex items-center justify-center rounded-sm bg-muted  shadow-md transition-all cursor-pointer gap-7 border"
+        }
+      >
+        <div className="flex">
+          <div className="flex gap-1 text-medium-indigo  rounded-sm transition-all w-full h-full">
+          {hasIO && (
           <IOView open={open} setOpen={setOpen}>
-            <ChatTrigger />
+            <div className="relative inline-flex w-full items-center justify-center   hover:bg-hover transition-all duration-500 ease-in-out px-5 py-3 text-medium-indigo ease-in-out gap-1 text-sm font-semibold">
+              <ForwardedIconComponent
+                name="Zap"
+                className={"message-button-icon h-5 w-5 transition-all"}
+              />
+              Run
+            </div>
           </IOView>
         )}
+          </div>
+          {hasIO && (
+            <div>
+              <Separator orientation="vertical" />
+            </div>
+          )}
+          <div className="flex items-center gap-2">
+            {currentFlow && currentFlow.data && (
+              <ApiModal flow={currentFlow}>
+                  <div className={classNames("relative inline-flex w-full items-center justify-center hover:bg-hover px-5 py-3 text-foreground transition-all duration-500 ease-in-out gap-1 text-sm font-semibold")}>
+                    <ForwardedIconComponent
+                      name="Code2"
+                      className={" h-5 w-5"}
+                    />
+                    API
+                  </div>
+              </ApiModal>
+            )}
+          </div>
+          {hasStore && validApiKey && (
+            <div>
+              <Separator orientation="vertical" />
+            </div>
+          )}
+          <div className="flex items-center gap-2">
+            {hasStore && validApiKey && (
+              <div className="side-bar-button">{ModalMemo}</div>
+            )}
+          </div>
+        </div>
       </div>
+    </Transition>
     </>
   );
 }

src/frontend/src/components/headerComponent/components/menuBar/index.tsx

@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useMemo, useState } from "react";
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -14,10 +14,13 @@ import FlowSettingsModal from "../../../../modals/flowSettingsModal";
 import useAlertStore from "../../../../stores/alertStore";
 import useFlowStore from "../../../../stores/flowStore";
 import useFlowsManagerStore from "../../../../stores/flowsManagerStore";
-import { cn } from "../../../../utils/utils";
+import { classNames, cn } from "../../../../utils/utils";
 import ShadTooltip from "../../../ShadTooltipComponent";
 import IconComponent from "../../../genericIconComponent";
 import { Button } from "../../../ui/button";
+import { UPLOAD_ERROR_ALERT } from "../../../../constants/alerts_constants";
+import ExportModal from "../../../../modals/exportModal";
+import { useStoreStore } from "../../../../stores/storeStore";
 
 export const MenuBar = ({
   removeFunction,
@@ -32,9 +35,27 @@ export const MenuBar = ({
   const saveLoading = useFlowsManagerStore((state) => state.saveLoading);
   const [openSettings, setOpenSettings] = useState(false);
   const n = useFlowStore((state) => state.nodes);
-
+  const uploadFlow = useFlowsManagerStore((state) => state.uploadFlow);
+  const hasApiKey = useStoreStore((state) => state.hasApiKey);
+  const validApiKey = useStoreStore((state) => state.validApiKey);
   const navigate = useNavigate();
   const isBuilding = useFlowStore((state) => state.isBuilding);
+  const [myOpen, mySetOpen] = useState<boolean>(false)
+
+  const ExportMemo = useMemo(
+    () => (
+      <ExportModal
+        myOpen={myOpen}
+        mySetOpen={mySetOpen}
+      >
+        <div className="flex items-center">
+          <IconComponent name="FileDown" className="header-menu-options" />
+          Export
+        </div>
+      </ExportModal>
+    ),
+    []
+  );
 
   function handleAddFlow() {
     try {
@@ -100,6 +121,30 @@ export const MenuBar = ({
               />
               Settings
             </DropdownMenuItem>
+            <DropdownMenuItem
+              className="cursor-pointer"
+              onClick={() => {
+                uploadFlow({ newProject: false, isComponent: false }).catch(
+                  (error) => {
+                    setErrorData({
+                      title: UPLOAD_ERROR_ALERT,
+                      list: [error],
+                    });
+                  }
+                );
+              }}
+            >
+              <IconComponent name="FileUp" className="header-menu-options " />
+              Import
+            </DropdownMenuItem>
+            {(!hasApiKey || !validApiKey) && (
+              <ExportModal>
+                <div className="relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors hover:bg-accent hover:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 cursor-pointer">
+                  <IconComponent name="FileDown" className="header-menu-options" />
+                  Export
+                </div>
+              </ExportModal>
+        )}
 
             <DropdownMenuItem
               onClick={() => {

src/frontend/src/modals/exportModal/index.tsx

@@ -16,7 +16,7 @@ import { downloadFlow, removeApiKeys } from "../../utils/reactflowUtils";
 import BaseModal from "../baseModal";
 
 const ExportModal = forwardRef(
-  (props: { children: ReactNode }, ref): JSX.Element => {
+  (props: { children: ReactNode, myOpen?: boolean, mySetOpen?: (open: boolean) => void }, ref): JSX.Element => {
     const version = useDarkStore((state) => state.version);
     const setNoticeData = useAlertStore((state) => state.setNoticeData);
     const [checked, setChecked] = useState(true);
@@ -29,6 +29,10 @@ const ExportModal = forwardRef(
     const [description, setDescription] = useState(currentFlow!.description);
     const [open, setOpen] = useState(false);
 
+    useEffect(() => {
+      console.log(open)
+    }, [open])
+
     return (
       <BaseModal size="smaller-h-full" open={open} setOpen={setOpen}>
         <BaseModal.Trigger asChild>{props.children}</BaseModal.Trigger>

src/frontend/src/pages/FlowPage/components/extraSidebarComponent/index.tsx

@@ -235,66 +235,6 @@ export default function ExtraSidebar(): JSX.Element {
 
   return (
     <div className="side-bar-arrangement">
-      <div className="side-bar-buttons-arrangement">
-        {hasStore && validApiKey && (
-          <ShadTooltip
-            content={
-              !hasApiKey || !validApiKey
-                ? "Please review your API key."
-                : "Share"
-            }
-            side="top"
-            styleClasses="cursor-default"
-          >
-            <div className="side-bar-button">{ModalMemo}</div>
-          </ShadTooltip>
-        )}
-        <div className="side-bar-button">
-          <ShadTooltip content="Import" side="top">
-            <button
-              className="extra-side-bar-buttons"
-              onClick={() => {
-                uploadFlow({ newProject: false, isComponent: false }).catch(
-                  (error) => {
-                    setErrorData({
-                      title: UPLOAD_ERROR_ALERT,
-                      list: [error],
-                    });
-                  }
-                );
-              }}
-            >
-              <IconComponent name="FileUp" className="side-bar-button-size " />
-            </button>
-          </ShadTooltip>
-        </div>
-        {(!hasApiKey || !validApiKey) && (
-          <ShadTooltip
-            content="Export"
-            side="top"
-            styleClasses="cursor-default"
-          >
-            <div className="side-bar-button">{ExportMemo}</div>
-          </ShadTooltip>
-        )}
-        <ShadTooltip content={"Code"} side="top">
-          <div className="side-bar-button">
-            {currentFlow && currentFlow.data && (
-              <ApiModal flow={currentFlow}>
-                <button className={"w-full "}>
-                  <div className={classNames("extra-side-bar-buttons")}>
-                    <IconComponent
-                      name="Code2"
-                      className={"side-bar-button-size"}
-                    />
-                  </div>
-                </button>
-              </ApiModal>
-            )}
-          </div>
-        </ShadTooltip>
-      </div>
-      <Separator />
       <div className="side-bar-search-div-placement">
         <Input
           onFocusCapture={() => handleBlur()}
@@ -318,7 +258,7 @@ export default function ExtraSidebar(): JSX.Element {
           />
         </div>
       </div>
-
+      <Separator />
       <div className="side-bar-components-div-arrangement">
         {Object.keys(dataFilter)
           .sort(sortKeys)

src/frontend/src/pages/FlowPage/components/extraSidebarComponent/sideBarDraggableComponent/index.tsx

@@ -43,6 +43,7 @@ export const SidebarDraggableComponent = forwardRef(
     const deleteComponent = useFlowsManagerStore(
       (state) => state.deleteComponent
     );
+    console.log(display_name)
     const version = useDarkStore((state) => state.version);
     const [cursorPos, setCursorPos] = useState({ x: 0, y: 0 });
     const popoverRef = useRef<HTMLDivElement>(null);

src/frontend/src/style/applies.css

@@ -114,7 +114,7 @@
     @apply pointer-events-none;
   }
   .extra-side-bar-buttons {
-    @apply relative inline-flex w-full items-center justify-center rounded-md bg-background px-2 py-2 text-foreground shadow-sm ring-1 ring-inset ring-input transition-all duration-500 ease-in-out;
+    @apply relative inline-flex w-full items-center justify-center rounded-md bg-background px-2 py-2 text-foreground transition-all duration-500 ease-in-out;
   }
   .extra-side-bar-buttons:hover {
     @apply hover:bg-muted;

src/frontend/src/style/index.css

@@ -50,6 +50,9 @@
 
     --component-icon: #d8598a;
     --flow-icon: #2f67d0;
+    --hover: #F2F4F5;
+
+    
 
     /* Colors that are shared in dark and light mode */
     --blur-shared: #151923de;
@@ -69,6 +72,7 @@
     --background: 224 35% 7.5%; /* hsl(224 40% 10%) */
     --foreground: 213 31% 80%; /* hsl(213 31% 91%) */
     --ice: #60A5FA;
+    --hover: #1A202E;
 
     --muted: 223 27% 11%; /* hsl(223 27% 11%) */
     --muted-foreground: 215.4 16.3% 56.9%; /* hsl(215 16% 56%) */

src/frontend/src/utils/styleUtils.ts

@@ -32,6 +32,7 @@ import {
   Cpu,
   Database,
   Delete,
+  Dot,
   Download,
   DownloadCloud,
   Edit,
@@ -475,4 +476,5 @@ export const nodeIconsLucide: iconsType = {
   Bot,
   Delete,
   Command,
+  Dot,
 };

src/frontend/tailwind.config.js

@@ -88,7 +88,7 @@ module.exports = {
         "chat-bot-icon": "var(--chat-bot-icon)",
         "chat-user-icon": "var(--chat-user-icon)",
         "ice": "var(--ice)",
-
+        hover: "var(--hover)",
         white: "var(--white)",
         border: "hsl(var(--border))",
         input: "hsl(var(--input))",