Merge branch 'dev' of https://github.com/logspace-ai/langflow into dev

src/frontend/src/components/EditFlowSettingsComponent/index.tsx

@@ -67,7 +67,7 @@ export const EditFlowSettings: React.FC<InputProps> = ({
           )}
         </div>
         <Input
-          className="nopan nodrag noundo nocopy mt-2 font-normal"
+          className="nopan nodelete nodrag noundo nocopy mt-2 font-normal"
           onChange={handleNameChange}
           type="text"
           name="name"
@@ -86,7 +86,7 @@ export const EditFlowSettings: React.FC<InputProps> = ({
           name="description"
           id="description"
           onChange={handleDescriptionChange}
-          value={description}
+          value={description!}
           placeholder="Flow description"
           className="mt-2 max-h-[100px] font-normal"
           rows={3}

src/frontend/src/components/skeletonCardComponent/index.tsx

@@ -5,11 +5,11 @@ export const SkeletonCardComponent = (): JSX.Element => {
     <div className="skeleton-card">
       <div className="skeleton-card-wrapper">
         <Skeleton className="h-8 w-8 rounded-full" />
-        <Skeleton className="h-4 w-[120px]" />
+        <Skeleton className="h-4 w-[40%]" />
       </div>
       <div className="skeleton-card-text">
-        <Skeleton className="h-3 w-[250px]" />
+        <Skeleton className="h-3 w-[90%]" />
-        <Skeleton className="h-3 w-[200px]" />
+        <Skeleton className="h-3 w-[80%]" />
       </div>
     </div>
   );

src/frontend/src/components/ui/dialog.tsx

@@ -8,12 +8,11 @@ const Dialog = DialogPrimitive.Root;
 const DialogTrigger = DialogPrimitive.Trigger;
 
 const DialogPortal = ({
-  className,
   children,
   ...props
 }: DialogPrimitive.DialogPortalProps) => (
-  <DialogPrimitive.Portal className={cn(className)} {...props}>
+  <DialogPrimitive.Portal {...props}>
-    <div className="nopan nodrag noundo nocopy fixed inset-0 z-50 flex items-start justify-center sm:items-center">
+    <div className="nopan nodelete nodrag noundo nocopy fixed inset-0 z-50 flex items-start justify-center sm:items-center">
       {children}
     </div>
   </DialogPrimitive.Portal>
@@ -27,7 +26,7 @@ const DialogOverlay = React.forwardRef<
   <DialogPrimitive.Overlay
     ref={ref}
     className={cn(
-      "nopan nodrag noundo nocopy fixed inset-0 bottom-0 left-0 right-0 top-0 z-50 overflow-auto bg-blur-shared backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      "nopan nodelete nodrag noundo nocopy fixed inset-0 bottom-0 left-0 right-0 top-0 z-50 overflow-auto bg-blur-shared backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
       className
     )}
     {...props}

src/frontend/src/components/ui/input.tsx

@@ -9,7 +9,10 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
     return (
       <input
         type={type}
-        className={cn("nopan nodrag noundo nocopy primary-input", className)}
+        className={cn(
+          "nopan nodelete nodrag noundo nocopy primary-input",
+          className
+        )}
         ref={ref}
         {...props}
       />

src/frontend/src/components/ui/rename-label.tsx

@@ -57,7 +57,7 @@ export default function RenameLabel(props) {
           ref={inputRef}
           onInput={resizeInput}
           className={cn(
-            "nopan nodrag noundo nocopy rounded-md bg-transparent px-2 outline-ring hover:outline focus:border-none focus:outline active:outline",
+            "nopan nodelete nodrag noundo nocopy rounded-md bg-transparent px-2 outline-ring hover:outline focus:border-none focus:outline active:outline",
             props.className
           )}
           onBlur={() => {

src/frontend/src/components/ui/textarea.tsx

@@ -8,7 +8,10 @@ const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
   ({ className, ...props }, ref) => {
     return (
       <textarea
-        className={cn("nopan nodrag noundo nocopy textarea-primary", className)}
+        className={cn(
+          "nopan nodelete nodrag noundo nocopy textarea-primary",
+          className
+        )}
         ref={ref}
         {...props}
       />

src/frontend/src/modals/dictAreaModal/index.tsx

@@ -26,55 +26,46 @@ export default function DictAreaModal({
     if (value) ref.current = value;
   }, [ref]);
 
-  //This code prevents delete Node and close modal when user press backspace key
-  const handleKeyDown = (event) => {
-    if (event.code === "Backspace") {
-      event.stopPropagation();
-    }
-  };
-
   return (
-    <div onKeyDown={handleKeyDown} className="h-full w-full">
+    <BaseModal size="medium-h-full" open={open} setOpen={setOpen}>
-      <BaseModal size="medium-h-full" open={open} setOpen={setOpen}>
+      <BaseModal.Trigger>{children}</BaseModal.Trigger>
-        <BaseModal.Trigger>{children}</BaseModal.Trigger>
+      <BaseModal.Header description={CODE_DICT_DIALOG_SUBTITLE}>
-        <BaseModal.Header description={CODE_DICT_DIALOG_SUBTITLE}>
+        <span className="pr-2">Edit Dictionary</span>
-          <span className="pr-2">Edit Dictionary</span>
+        <IconComponent
-          <IconComponent
+          name="BookMarked"
-            name="BookMarked"
+          className="h-6 w-6 pl-1 text-primary "
-            className="h-6 w-6 pl-1 text-primary "
+          aria-hidden="true"
-            aria-hidden="true"
+        />
+      </BaseModal.Header>
+      <BaseModal.Content>
+        <div className="flex h-full w-full flex-col transition-all ">
+          <JsonView
+            theme="vscode"
+            dark={true}
+            editable
+            enableClipboard
+            onEdit={(edit) => {
+              ref.current = edit["src"];
+            }}
+            onChange={(edit) => {
+              ref.current = edit["src"];
+            }}
+            src={ref.current}
           />
-        </BaseModal.Header>
+          <div className="flex h-fit w-full justify-end">
-        <BaseModal.Content>
+            <Button
-          <div className="nopan nodrag noundo nocopy flex h-full w-full flex-col transition-all ">
+              className="mt-3"
-            <JsonView
+              type="submit"
-              theme="vscode"
+              onClick={() => {
-              dark={true}
+                onChange(ref.current);
-              editable
+                setOpen(false);
-              enableClipboard
-              onEdit={(edit) => {
-                ref.current = edit["src"];
               }}
-              onChange={(edit) => {
+            >
-                ref.current = edit["src"];
+              Save
-              }}
+            </Button>
-              src={ref.current}
-            />
-            <div className="flex h-fit w-full justify-end">
-              <Button
-                className="mt-3"
-                type="submit"
-                onClick={() => {
-                  onChange(ref.current);
-                  setOpen(false);
-                }}
-              >
-                Save
-              </Button>
-            </div>
           </div>
-        </BaseModal.Content>
+        </div>
-      </BaseModal>
+      </BaseModal.Content>
-    </div>
+    </BaseModal>
   );
 }

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

@@ -70,6 +70,7 @@ export default function Page({
     setReactFlowInstance,
     templates,
     setFilterEdge,
+    deleteNode,
   } = useContext(typesContext);
   const reactFlowWrapper = useRef<HTMLDivElement>(null);
 
@@ -112,6 +113,18 @@ export default function Page({
           event.preventDefault();
         }
       }
+      if (!isWrappedWithClass(event, "nodelete")) {
+        console.log(event);
+        if (
+          (event.key === "Delete" || event.key === "Backspace") &&
+          lastSelection
+        ) {
+          event.preventDefault();
+          lastSelection.nodes.forEach((k) => {
+            deleteNode(k.id);
+          });
+        }
+      }
     };
     const handleMouseMove = (event) => {
       setPosition({ x: event.clientX, y: event.clientY });
@@ -450,8 +463,9 @@ export default function Page({
                   connectionLineComponent={ConnectionLineComponent}
                   onDragOver={onDragOver}
                   onDrop={onDrop}
-                  onNodesDelete={onDelete}
                   onSelectionChange={onSelectionChange}
+                  onNodesDelete={onDelete}
+                  deleteKeyCode={[]}
                   className="theme-attribution"
                   minZoom={0.01}
                   maxZoom={8}

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

@@ -205,7 +205,7 @@ export default function ExtraSidebar(): JSX.Element {
           name="search"
           id="search"
           placeholder="Search"
-          className="nopan nodrag noundo nocopy input-search"
+          className="nopan nodelete nodrag noundo nocopy input-search"
           onChange={(event) => {
             handleSearchInput(event.target.value);
             // Set search input state