Merge branch 'feature/store' of github.com:logspace-ai/langflow into feature/store

src/frontend/src/modals/shareModal/index.tsx

@@ -15,6 +15,7 @@ import { FlowType } from "../../types/flow";
 import { removeApiKeys } from "../../utils/reactflowUtils";
 import { getTagsIds } from "../../utils/storeUtils";
 import BaseModal from "../baseModal";
+import { StoreContext } from "../../contexts/storeContext";
 
 export default function ShareModal({
   component,
@@ -22,14 +23,17 @@ export default function ShareModal({
   children,
   open,
   setOpen,
+  disabled
 }: {
   children?: ReactNode;
   is_component: boolean;
   component: FlowType;
   open?: boolean;
   setOpen?: (open: boolean) => void;
+  disabled?: boolean;
 }): JSX.Element {
   const { version, addFlow } = useContext(FlowsContext);
+  const {hasApiKey} = useContext(StoreContext)
   const { setSuccessData, setErrorData } = useContext(alertContext);
   const [checked, setChecked] = useState(true);
   const [name, setName] = useState(component?.name ?? "");
@@ -46,10 +50,12 @@ export default function ShareModal({
 
   useEffect(() => {
     if (open || internalOpen) {
-      handleGetTags();
-      handleGetNames();
+      if(hasApiKey){
+        handleGetTags();
+        handleGetNames();
+      }
     }
-  }, [open, internalOpen]);
+  }, [open, internalOpen,hasApiKey]);
 
   function handleGetTags() {
     setLoadingTags(true);
@@ -113,7 +119,7 @@ export default function ShareModal({
   return (
     <BaseModal
       size="smaller-h-full"
-      open={open ?? internalOpen}
+      open={(!disabled && open) ?? internalOpen}
       setOpen={setOpen ?? internalSetOpen}
     >
       <BaseModal.Trigger>{children ? children : <></>}</BaseModal.Trigger>

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

@@ -322,9 +322,9 @@ export default function Page({
         );
 
         // Calculate the position where the node should be created
-        const position = reactFlowInstance!.project({
-          x: event.clientX - reactflowBounds!.left,
-          y: event.clientY - reactflowBounds!.top,
+        const position = reactFlowInstance!.screenToFlowPosition({
+          x: event.clientX,
+          y: event.clientY
         });
 
         // Generate a unique node ID

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

@@ -23,12 +23,14 @@ import {
 } from "../../../../utils/utils";
 import DisclosureComponent from "../DisclosureComponent";
 import SidebarDraggableComponent from "./sideBarDraggableComponent";
+import { StoreContext } from "../../../../contexts/storeContext";
 
 export default function ExtraSidebar(): JSX.Element {
   const { data, templates, getFilterEdge, setFilterEdge, reactFlowInstance } =
     useContext(typesContext);
   const { flows, tabId, uploadFlow, tabsState, saveFlow, isBuilt, version } =
     useContext(FlowsContext);
+  const {hasApiKey} = useContext(StoreContext)
   const { setErrorData } = useContext(alertContext);
   const [dataFilter, setFilterData] = useState(data);
   const [search, setSearch] = useState("");
@@ -48,6 +50,8 @@ export default function ExtraSidebar(): JSX.Element {
     event.dataTransfer.setData("nodedata", JSON.stringify(data));
   }
 
+  
+
   // Handle showing components after use search input
   function handleSearchInput(e: string) {
     if (e === "") {
@@ -180,7 +184,7 @@ export default function ExtraSidebar(): JSX.Element {
 
   const ModalMemo = useMemo(
     () => (
-      <ShareModal is_component={false} component={flow!}>
+      <ShareModal is_component={false} component={flow!} disabled={!hasApiKey}>
         <ShadTooltip content="Share" side="top">
           <div className={classNames("extra-side-bar-buttons")}>
             <IconComponent name="Share2" className="side-bar-button-size" />
@@ -188,16 +192,16 @@ export default function ExtraSidebar(): JSX.Element {
         </ShadTooltip>
       </ShareModal>
     ),
-    []
+    [hasApiKey]
   );
 
   const ExportMemo = useMemo(
     () => (
       <ExportModal>
         <ShadTooltip content="Export" side="top">
-          <div className={classNames("extra-side-bar-buttons")}>
+          <button disabled={!hasApiKey} className={classNames("extra-side-bar-buttons")}>
             <IconComponent name="FileDown" className="side-bar-button-size" />
-          </div>
+          </button>
         </ShadTooltip>
       </ExportModal>
     ),
@@ -305,7 +309,15 @@ export default function ExtraSidebar(): JSX.Element {
 
       <div className="side-bar-components-div-arrangement">
         {Object.keys(dataFilter)
-          .sort()
+          .sort((a, b) => {
+            if (a.toLowerCase() === "saved_components") {
+              return -1;
+            } else if (b.toLowerCase() === "saved_components") {
+              return 1;
+            } else {
+              return a.localeCompare(b);
+            }
+          })
           .map((SBSectionName: keyof APIObjectType, index) =>
             Object.keys(dataFilter[SBSectionName]).length > 0 ? (
               <DisclosureComponent

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

@@ -93,11 +93,11 @@ export default function SidebarDraggableComponent({
           >
             <span className="side-bar-components-text">{display_name}</span>
             <div>
-              <SelectTrigger>
-                <IconComponent
+            <IconComponent
                   name="Menu"
                   className="side-bar-components-icon "
                 />
+              <SelectTrigger>
               </SelectTrigger>
               <SelectContent>
                 <SelectItem value={"download"}>

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

@@ -21,6 +21,7 @@ import {
   updateFlowPosition,
 } from "../../../../utils/reactflowUtils";
 import { classNames } from "../../../../utils/utils";
+import { StoreContext } from "../../../../contexts/storeContext";
 
 export default function NodeToolbarComponent({
   data,
@@ -50,6 +51,7 @@ export default function NodeToolbarComponent({
   );
   const updateNodeInternals = useUpdateNodeInternals();
   const { getNodeId } = useContext(FlowsContext);
+  const {hasApiKey} = useContext(StoreContext)
 
   function canMinimize() {
     let countHandles: number = 0;
@@ -87,7 +89,7 @@ export default function NodeToolbarComponent({
         downloadNode(createFlowComponent(cloneDeep(data), version));
         break;
       case "Share":
-        setShowconfirmShare(true);
+        if(hasApiKey) setShowconfirmShare(true);
         break;
       case "SaveAll":
         saveComponent(cloneDeep(data));
@@ -211,7 +213,7 @@ export default function NodeToolbarComponent({
                   Save{" "}
                 </div>{" "}
               </SelectItem>
-              <SelectItem value={"Share"}>
+              {hasApiKey && <SelectItem value={"Share"}>
                 <div className="flex">
                   <IconComponent
                     name="Share2"
@@ -219,7 +221,7 @@ export default function NodeToolbarComponent({
                   />{" "}
                   Share{" "}
                 </div>{" "}
-              </SelectItem>
+              </SelectItem>}
               <SelectItem value={"Download"}>
                 <div className="flex">
                   <IconComponent