Merge branch 'feature/store' into bug/undo-copy

src/frontend/src/components/ui/button.tsx

@@ -16,7 +16,7 @@ const buttonVariants = cva(
         primary:
           "border bg-background text-secondary-foreground hover:bg-background/80 dark:hover:bg-background/10 hover:shadow-sm",
         secondary:
-          "border border-muted bg-muted text-secondary-foreground hover:bg-secondary/80",
+          "border border-muted bg-muted text-muted-foreground hover:bg-secondary/80",
         ghost: "hover:bg-accent hover:text-accent-foreground",
         link: "underline-offset-4 hover:underline text-primary",
       },

src/frontend/src/contexts/flowsContext.tsx

@@ -308,7 +308,7 @@ export function FlowsProvider({ children }: { children: ReactNode }) {
         let text = await file.text();
         let fileData = JSON.parse(text);
         if (
-          (fileData.is_component === undefined && isComponent === true) ||
+          (!fileData.is_component && isComponent === true) ||
           (fileData.is_component !== undefined &&
             fileData.is_component !== isComponent)
         ) {
@@ -339,11 +339,10 @@ export function FlowsProvider({ children }: { children: ReactNode }) {
             let fileData: FlowType = await JSON.parse(text);
             console.log(isComponent, fileData);
 
-            if (fileData.is_component === undefined) {
-              reject("Your file doesn't have the is_component property.");
-            } else if (
-              fileData.is_component !== undefined &&
-              fileData.is_component !== isComponent
+            if (
+              (!fileData.is_component && isComponent === true) ||
+              (fileData.is_component !== undefined &&
+                fileData.is_component !== isComponent)
             ) {
               reject("You cannot upload a component as a flow or vice versa");
             } else {

src/frontend/src/icons/GradientSparkles/index.tsx

@@ -1,5 +1,6 @@
-import { InfinityIcon } from "lucide-react";
+import { InfinityIcon, Terminal, Code } from "lucide-react";
 import { forwardRef } from "react";
+import ForwardedIconComponent from "../../components/genericIconComponent";
 
 export const GradientInfinity = forwardRef<
   SVGSVGElement,
@@ -15,7 +16,52 @@ export const GradientInfinity = forwardRef<
           </linearGradient>
         </defs>
       </svg>
-      <InfinityIcon stroke="url(#grad1)" ref={ref} {...props} />
+      <Code stroke="url(#grad1)" ref={ref} {...props} />
     </>
   );
 });
+
+
+export const GradientSave = forwardRef<
+  SVGSVGElement,
+  React.PropsWithChildren<{}>
+>((props, ref) => {
+  return (
+    <>
+      <svg width="0" height="0" style={{ position: "absolute" }}>
+        <defs>
+          <linearGradient id="grad2" x1="0%" y1="0%" x2="100%" y2="0%">
+            <stop className="gradient-start" offset="0%" />
+            <stop className="gradient-end" offset="100%" />
+          </linearGradient>
+        </defs>
+      </svg>
+      <ForwardedIconComponent
+        name="Save"
+        stroke="url(#grad2)" 
+        ref={ref}
+        {...props}
+      />
+    </>
+  );
+});
+
+export const GradientGroup = (props) => {
+  return (
+    <>
+      <svg width="0" height="0" style={{ position: "absolute" }}>
+        <defs>
+          <linearGradient id="grad3" x1="0%" y1="0%" x2="100%" y2="0%">
+            <stop className="gradient-start" offset="0%" />
+            <stop className="gradient-end" offset="100%" />
+          </linearGradient>
+        </defs>
+      </svg>
+      <ForwardedIconComponent
+        name="Combine"
+        stroke="url(#grad3)"
+        {...props}
+      />
+    </>
+  );
+};

src/frontend/src/modals/ConfirmationModal/index.tsx

@@ -29,6 +29,7 @@ function ConfirmationModal({
   cancelText,
   confirmationText,
   children,
+  destructive = false,
   icon,
   data,
   index,
@@ -56,9 +57,9 @@ function ConfirmationModal({
   );
 
   return (
-    <BaseModal size={size ?? "x-small"} open={modalOpen} setOpen={setModalOpen}>
+    <BaseModal size={size} open={modalOpen} setOpen={setModalOpen}>
       <BaseModal.Trigger asChild={asChild}>{triggerChild}</BaseModal.Trigger>
-      <BaseModal.Header description={titleHeader}>
+      <BaseModal.Header description={titleHeader ?? null}>
         <span className="pr-2">{title}</span>
         <Icon
           name="icon"
@@ -67,7 +68,7 @@ function ConfirmationModal({
         />
       </BaseModal.Header>
       <BaseModal.Content>
-        {modalContentTitle != "" && (
+        {modalContentTitle && modalContentTitle != "" && (
           <>
             <strong>{modalContentTitle}</strong>
             <br></br>
@@ -78,7 +79,8 @@ function ConfirmationModal({
 
       <BaseModal.Footer>
         <Button
-          className="ml-3 mt-5"
+          className="ml-3"
+          variant={destructive ? "destructive" : "default"}
           onClick={() => {
             setModalOpen(false);
             onConfirm(index, data);
@@ -88,7 +90,7 @@ function ConfirmationModal({
         </Button>
 
         <Button
-          className="mt-5"
+          className=""
           variant="outline"
           onClick={() => {
             if (onCancel) onCancel();

src/frontend/src/modals/DeleteConfirmationModal/index.tsx

@@ -41,7 +41,7 @@ export default function DeleteConfirmationModal({
         </span>
         <DialogFooter>
           <DialogClose>
-            <Button className="mr-3">Cancel</Button>
+            <Button className="mr-3" variant="outline">Cancel</Button>
 
             <Button
               type="submit"

src/frontend/src/modals/baseModal/index.tsx

@@ -99,7 +99,7 @@ function BaseModal({
   switch (size) {
     case "x-small":
       minWidth = "min-w-[20vw]";
-      height = "h-[10vh]";
+      height = " ";
       break;
     case "smaller":
       minWidth = "min-w-[40vw]";
@@ -150,7 +150,7 @@ function BaseModal({
         <div className="truncate-doubleline word-break-break-word">
           {headerChild}
         </div>
-        <div className={`mt-2 flex flex-col ${height!} w-full `}>
+        <div className={`flex flex-col ${height!} w-full `}>
           {ContentChild}
         </div>
         {ContentFooter && (

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

@@ -1,6 +1,7 @@
 import { useEffect, useState } from "react";
 import { NodeToolbar } from "reactflow";
 import IconComponent from "../../../../components/genericIconComponent";
+import { GradientGroup } from "../../../../icons/GradientSparkles";
 export default function SelectionMenu({ onClick, nodes, isVisible }) {
   const [isOpen, setIsOpen] = useState(false);
   const [isTransitioning, setIsTransitioning] = useState(false);
@@ -37,15 +38,15 @@ export default function SelectionMenu({ onClick, nodes, isVisible }) {
       <div className="h-10 w-28 overflow-hidden">
         <div
           className={
-            "h-10 w-24 rounded-md border border-indigo-300 bg-white px-2.5 text-gray-700 shadow-inner transition-all duration-500 ease-in-out dark:bg-gray-800 dark:text-gray-300" +
-            (isTransitioning ? " translate-y-0" : " translate-y-10")
+            "h-10 w-24 rounded-md border border-indigo-300 bg-white px-2.5 text-gray-700 shadow-inner transition-all duration-400 ease-in-out dark:bg-gray-800 dark:text-gray-300" +
+            (isTransitioning ? " opacity-100" : " opacity-0 ")
           }
         >
           <button
             className="flex h-full w-full items-center justify-between text-sm hover:text-indigo-500"
             onClick={onClick}
           >
-            <IconComponent name="Group" className="w-6" />
+            <GradientGroup strokeWidth={1.5} size={22} className="text-primary" />
             Group
           </button>
         </div>

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

@@ -343,7 +343,11 @@ export default function ExtraSidebar(): JSX.Element {
               return -1;
             } else if (b.toLowerCase() === "saved_components") {
               return 1;
-            } else {
+            } else if (a.toLowerCase() === "custom_components") {
+              return -2
+            } else if (b.toLowerCase() === "custom_components") {
+              return 2
+            }else {
               return a.localeCompare(b);
             }
           })

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

@@ -277,11 +277,10 @@ export default function NodeToolbarComponent({
           <ConfirmationModal
             asChild
             open={showOverrideModal}
-            title={`Replace ${data.node?.display_name}`}
-            titleHeader={`Please, confirm your save actions`}
-            modalContentTitle="Attention!"
-            cancelText="New"
+            title={`Replace`}
+            cancelText="Create New"
             confirmationText="Replace"
+            size={"x-small"}
             icon={"SaveAll"}
             index={6}
             onConfirm={(index, user) => {
@@ -292,8 +291,7 @@ export default function NodeToolbarComponent({
           >
             <ConfirmationModal.Content>
               <span>
-                It seems {data.node?.display_name} already exists. Replacing it
-                will switch the current component. Proceed with replacement?
+                It seems {data.node?.display_name} already exists. Do you want to replace it with the current or create a new one?
               </span>
             </ConfirmationModal.Content>
             <ConfirmationModal.Trigger>

src/frontend/src/pages/MainPage/components/components/index.tsx

@@ -95,47 +95,49 @@ export default function ComponentsComponent({
     >
       <div className="flex h-full w-full flex-col justify-between">
         <div className="flex w-full flex-col gap-4">
-          <div className="grid w-full gap-4 md:grid-cols-2 lg:grid-cols-2">
-            {!isLoading || data?.length > 0 ? (
-              data?.map((item, idx) => (
-                <CollectionCardComponent
-                  onDelete={() => {
-                    removeFlow(item.id);
-                  }}
-                  key={idx}
-                  data={item}
-                  disabled={isLoading}
-                  button={
-                    !is_component ? (
-                      <Button
-                        variant="outline"
-                        size="sm"
-                        className="whitespace-nowrap "
-                        onClick={() => {
-                          navigate("/flow/" + item.id);
-                        }}
-                      >
-                        <IconComponent
-                          name="ExternalLink"
-                          className="main-page-nav-button"
-                        />
-                        Edit Flow
-                      </Button>
-                    ) : (
-                      <></>
-                    )
-                  }
-                />
-              ))
-            ) : !isLoading && data?.length === 0 ? (
-              <>You haven't created {name}s yet.</>
-            ) : (
-              <>
-                <SkeletonCardComponent />
-                <SkeletonCardComponent />
-              </>
-            )}
-          </div>
+          {!isLoading && data.length === 0 ? (
+            <div className="w-full text-center">You haven't created any {name}s yet.</div>
+          ) : (
+            <div className="grid w-full gap-4 md:grid-cols-2 lg:grid-cols-2">
+              {!isLoading || data?.length > 0 ? (
+                data?.map((item, idx) => (
+                  <CollectionCardComponent
+                    onDelete={() => {
+                      removeFlow(item.id);
+                    }}
+                    key={idx}
+                    data={item}
+                    disabled={isLoading}
+                    button={
+                      !is_component ? (
+                        <Button
+                          variant="outline"
+                          size="sm"
+                          className="whitespace-nowrap "
+                          onClick={() => {
+                            navigate("/flow/" + item.id);
+                          }}
+                        >
+                          <IconComponent
+                            name="ExternalLink"
+                            className="main-page-nav-button"
+                          />
+                          Edit Flow
+                        </Button>
+                      ) : (
+                        <></>
+                      )
+                    }
+                  />
+                ))
+              ) : (
+                <>
+                  <SkeletonCardComponent />
+                  <SkeletonCardComponent />
+                </>
+              )}
+            </div>
+          )}
         </div>
         {!isLoading && allData.length > 0 && (
           <div className="relative py-6">

src/frontend/src/types/components/index.ts

@@ -283,9 +283,10 @@ export type PaginatorComponentType = {
 export type ConfirmationModalType = {
   onCancel?: () => void;
   title: string;
-  titleHeader: string;
+  titleHeader?: string;
   asChild?: boolean;
-  modalContentTitle: string;
+  destructive?: boolean;
+  modalContentTitle?: string;
   cancelText: string;
   confirmationText: string;
   children: [

src/frontend/src/utils/styleUtils.ts

@@ -99,6 +99,8 @@ import {
   X,
   XCircle,
   Zap,
+  Combine,
+  TerminalIcon
 } from "lucide-react";
 import { FaApple, FaGithub } from "react-icons/fa";
 import { AWSIcon } from "../icons/AWS";
@@ -111,7 +113,7 @@ import { EvernoteIcon } from "../icons/Evernote";
 import { FBIcon } from "../icons/FacebookMessenger";
 import { GitBookIcon } from "../icons/GitBook";
 import { GoogleIcon } from "../icons/Google";
-import { GradientInfinity } from "../icons/GradientSparkles";
+import { GradientInfinity, GradientSave } from "../icons/GradientSparkles";
 import { HuggingFaceIcon } from "../icons/HuggingFace";
 import { IFixIcon } from "../icons/IFixIt";
 import { MetaIcon } from "../icons/Meta";
@@ -260,7 +262,7 @@ export const nodeIconsLucide: iconsType = {
   advanced: Laptop2,
   chat: MessageCircle,
   embeddings: Fingerprint,
-  saved_components: Save,
+  saved_components: GradientSave,
   documentloaders: Paperclip,
   vectorstores: Layers,
   toolkits: Hammer,
@@ -356,4 +358,6 @@ export const nodeIconsLucide: iconsType = {
   Link,
   ToyBrick,
   RefreshCcw,
+  Combine,
+  TerminalIcon,
 };