From 54e0eb5c7f11eba91a28373462002fc7337b8697 Mon Sep 17 00:00:00 2001
From: saga6569 <aristov6569@gmail.com>
Date: Mon, 23 Dec 2024 09:36:51 +0500
Subject: [PATCH] fix modals

---
 frontend/src/index.css                        |   8 +
 .../src/modals/FlowModal/CreateFlowModal.tsx  | 447 +++++++++++-------
 .../src/modals/LocalStorage/LocalStorage.tsx  | 168 ++++---
 frontend/src/modals/NodeModal/NodeModal.tsx   | 430 ++++++++++-------
 .../modals/ResponseModal/ResponseModal.tsx    | 422 ++++++++++-------
 5 files changed, 897 insertions(+), 578 deletions(-)

diff --git a/frontend/src/index.css b/frontend/src/index.css
index db0b6c25..9da4d240 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -396,4 +396,12 @@ table thead tr:nth-child(2) {
 
 .zoom-out {
   animation: zoom-out 0.2s ease-in forwards;
+}
+
+.pCustom {
+  padding: 0px !important;
+}
+
+.w-auto {
+  width: auto !important;
 }
\ No newline at end of file
diff --git a/frontend/src/modals/FlowModal/CreateFlowModal.tsx b/frontend/src/modals/FlowModal/CreateFlowModal.tsx
index b369c1fd..f6aa3c8f 100644
--- a/frontend/src/modals/FlowModal/CreateFlowModal.tsx
+++ b/frontend/src/modals/FlowModal/CreateFlowModal.tsx
@@ -1,183 +1,292 @@
 import {
-  Button,
-  Checkbox,
-  Input,
-  ModalBody,
-  ModalContent,
-  ModalFooter,
-  ModalHeader,
-  Select,
-  SelectItem,
-} from "@nextui-org/react"
-import { HelpCircle } from "lucide-react"
-import { useContext, useState } from "react"
-import ModalComponent from "../../components/ModalComponent"
-import { FLOW_COLORS } from "../../consts"
-import { flowContext } from "../../contexts/flowContext"
-import { NotificationsContext } from "../../contexts/notificationsContext"
-import { ModalType } from "../../types/ModalTypes"
-import { generateNewFlow, validateFlowName } from "../../utils"
+ Button,
+ Checkbox,
+ Input,
+ //  ModalBody,
+ ModalContent,
+ //  ModalFooter,
+ //  ModalHeader,
+ Select,
+ SelectItem,
+} from "@nextui-org/react";
+import { Modal, ModalBody, ModalFooter, ModalHeader } from "../ModalComponents";
+import { HelpCircle } from "lucide-react";
+import { useContext, useState } from "react";
+import ModalComponent from "../../components/ModalComponent";
+import { FLOW_COLORS } from "../../consts";
+import { flowContext } from "../../contexts/flowContext";
+import { NotificationsContext } from "../../contexts/notificationsContext";
+import { ModalType } from "../../types/ModalTypes";
+import { generateNewFlow, validateFlowName } from "../../utils";
 
 interface CreateFlowModalProps extends ModalType {}
 
 export type CreateFlowType = {
-  name: string
-  description: string
-  color: string
-  subflow: string
-}
+ name: string;
+ description: string;
+ color: string;
+ subflow: string;
+};
 
-const CreateFlowModal = ({ isOpen, onClose, size = "3xl" }: CreateFlowModalProps) => {
-  const { flows, setFlows, saveFlows } = useContext(flowContext)
-  const { notification: n } = useContext(NotificationsContext)
-  const [flow, setFlow] = useState<CreateFlowType>({
+const CreateFlowModal = ({
+ isOpen,
+ onClose,
+ size = "3xl",
+}: CreateFlowModalProps) => {
+ const { flows, setFlows, saveFlows } = useContext(flowContext);
+ const { notification: n } = useContext(NotificationsContext);
+ const [flow, setFlow] = useState<CreateFlowType>({
+  name: "",
+  description: "",
+  color: "",
+  subflow: "Global",
+ });
+ const [isSubFlow, setIsSubFlow] = useState(false);
+
+ const onFlowChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+  setFlow({
+   ...flow,
+   [e.target.name]: e.target.value,
+  });
+ };
+
+ const onFlowSave = () => {
+  if (!validateFlowName(flow.name, flows)) {
+   return n.add({
+    title: "Warning!",
+    message: "Flow name is not valid.",
+    type: "warning",
+   });
+  }
+  if (flow.color && flow.subflow) {
+   const newFlow = generateNewFlow(flow);
+   setFlows([...flows, newFlow]);
+   saveFlows([...flows, newFlow]);
+   setFlow({
     name: "",
     description: "",
     color: "",
     subflow: "Global",
-  })
-  const [isSubFlow, setIsSubFlow] = useState(false)
-
-  const onFlowChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    setFlow({
-      ...flow,
-      [e.target.name]: e.target.value,
-    })
+   });
+   setIsSubFlow(false);
+   onClose();
+  } else {
+   n.add({
+    title: "Creating error!",
+    message: "Please fill all the fields correctly.",
+    type: "error",
+   });
   }
+ };
 
-  const onFlowSave = () => {
-    if (!validateFlowName(flow.name, flows)) {
-      return n.add({
-        title: "Warning!",
-        message: "Flow name is not valid.",
-        type: "warning",
-      })
-    }
-    if (flow.color && flow.subflow) {
-      const newFlow = generateNewFlow(flow)
-      setFlows([...flows, newFlow])
-      saveFlows([...flows, newFlow])
-      setFlow({
-        name: "",
-        description: "",
-        color: "",
-        subflow: "Global",
-      })
-      setIsSubFlow(false)
-      onClose()
-    } else {
-      n.add({
-        title: "Creating error!",
-        message: "Please fill all the fields correctly.",
-        type: "error",
-      })
-    }
-  }
+ return (
+  // <ModalComponent
+  //  className="bg-background min-h-[584px]"
+  //  motionProps={{
+  //   initial: { opacity: 0, scale: 0.95 },
+  //   animate: { opacity: 1, scale: 1 },
+  //  }}
+  //  isOpen={true}
+  //  onClose={onClose}
+  //  size={size}
+  // >
+  //  <ModalContent>
+  //   <ModalHeader>{"Create flow"}</ModalHeader>
+  //   <ModalBody >
+  //    <div className="grid gap-4">
+  //     <Input
+  //      data-testid="flow-name-input"
+  //      label="Name"
+  //      labelPlacement="outside"
+  //      placeholder="Enter flow's name here"
+  //      name="name"
+  //      onChange={onFlowChange}
+  //      value={flow.name}
+  //      min={2}
+  //     />
+  //     <Input
+  //      label="Description"
+  //      labelPlacement="outside"
+  //      placeholder="Enter flow's description here"
+  //      name="description"
+  //      onChange={onFlowChange}
+  //      value={flow.description}
+  //     />
+  //    </div>
+  //    <div>
+  //     <label className="text-sm font-medium mb-1 block"> Color </label>
+  //     <div className="flex items-center gap-2">
+  //      {FLOW_COLORS.map((color) => (
+  //       <button
+  //        data-testid={`flow-color-${color.replace("#", "")}`}
+  //        key={color}
+  //        onClick={() => setFlow({ ...flow, color })}
+  //        className="rounded-full w-8 h-8 transition-all"
+  //        style={{
+  //         backgroundColor: color,
+  //         border: flow.color === color ? "4px solid var(--foreground)" : "none",
+  //        }}
+  //       ></button>
+  //      ))}
+  //     </div>
+  //    </div>
+  //    <div className="grid gap-2">
+  //     <div className="flex items-center gap-2">
+  //      <label className="text-sm font-medium"> Subflow </label>
+  //      <Checkbox
+  //       onChange={() => setIsSubFlow(!isSubFlow)}
+  //       checked={isSubFlow}
+  //      />
+  //     </div>
+  //     <div
+  //      className="grid transition-all z-10"
+  //      style={{
+  //       gridTemplateRows: isSubFlow ? "1fr" : "0fr",
+  //      }}
+  //     >
+  //      <div className="min-h-0 overflow-hidden">
+  //       <Select
+  //        classNames={{
+  //         listboxWrapper: "max-h-48",
+  //         popoverContent: "bg-background",
+  //        }}
+  //        aria-label="Dependent from"
+  //        label="Dependent from"
+  //        labelPlacement="outside"
+  //        items={flows}
+  //        name="subflow"
+  //        onChange={(e) => {
+  //         if (e.target.value !== "") {
+  //          setFlow({ ...flow, subflow: e.target.value });
+  //         } else {
+  //          setFlow({ ...flow, subflow: "Global" });
+  //         }
+  //        }}
+  //        selectedKeys={[flow.subflow]}
+  //       >
+  //        {(flow) => <SelectItem key={flow.name}>{flow.name}</SelectItem>}
+  //       </Select>
+  //      </div>
+  //     </div>
+  //    </div>
+  //   </ModalBody>
+  //   <ModalFooter className="flex justify-between items-center">
+  //    <div className="flex items-center justify-start gap-2">
+  //     <Button isIconOnly className="rounded-full">
+  //      <HelpCircle />
+  //     </Button>
+  //    </div>
+  //    <div>
+  //     <Button
+  //      data-testid="flow-save-btn"
+  //      onClick={onFlowSave}
+  //      className="bg-foreground text-background"
+  //     >
+  //      Create flow
+  //     </Button>
+  //    </div>
+  //   </ModalFooter>
+  //  </ModalContent>
+  // </ModalComponent>
 
-  return (
-    <ModalComponent
-      className='bg-background min-h-[584px]'
-      motionProps={{ initial: { opacity: 0, scale: 0.95 }, animate: { opacity: 1, scale: 1 } }}
-      isOpen={isOpen}
-      onClose={onClose}
-      size={size}>
-      <ModalContent>
-        <ModalHeader>{"Create flow"}</ModalHeader>
-        <ModalBody>
-          <div className='grid gap-4'>
-            <Input
-              data-testid='flow-name-input'
-              label='Name'
-              labelPlacement='outside'
-              placeholder="Enter flow's name here"
-              name='name'
-              onChange={onFlowChange}
-              value={flow.name}
-              min={2}
-            />
-            <Input
-              label='Description'
-              labelPlacement='outside'
-              placeholder="Enter flow's description here"
-              name='description'
-              onChange={onFlowChange}
-              value={flow.description}
-            />
-          </div>
-          <div>
-            <label className='text-sm font-medium mb-1 block'> Color </label>
-            <div className='flex items-center gap-2'>
-              {FLOW_COLORS.map((color) => (
-                <button
-                  data-testid={`flow-color-${color.replace("#", "")}`}
-                  key={color}
-                  onClick={() => setFlow({ ...flow, color })}
-                  className='rounded-full w-8 h-8 transition-all'
-                  style={{
-                    backgroundColor: color,
-                    border: flow.color === color ? "4px solid var(--foreground)" : "none",
-                  }}></button>
-              ))}
-            </div>
-          </div>
-          <div className='grid gap-2'>
-            <div className='flex items-center gap-2'>
-              <label className='text-sm font-medium'> Subflow </label>
-              <Checkbox
-                onChange={() => setIsSubFlow(!isSubFlow)}
-                checked={isSubFlow}
-              />
-            </div>
-            <div
-              className='grid transition-all z-10'
-              style={{
-                gridTemplateRows: isSubFlow ? "1fr" : "0fr",
-              }}>
-              <div className='min-h-0 overflow-hidden'>
-                <Select
-                  classNames={{
-                    listboxWrapper: "max-h-48",
-                    popoverContent: "bg-background",
-                  }}
-                  aria-label='Dependent from'
-                  label='Dependent from'
-                  labelPlacement='outside'
-                  items={flows}
-                  name='subflow'
-                  onChange={(e) => {
-                    if (e.target.value !== "") {
-                      setFlow({ ...flow, subflow: e.target.value })
-                    } else {
-                      setFlow({ ...flow, subflow: "Global" })
-                    }
-                  }}
-                  selectedKeys={[flow.subflow]}>
-                  {(flow) => <SelectItem key={flow.name}>{flow.name}</SelectItem>}
-                </Select>
-              </div>
-            </div>
-          </div>
-        </ModalBody>
-        <ModalFooter className='flex justify-between items-center'>
-          <div className='flex items-center justify-start gap-2'>
-            <Button
-              isIconOnly
-              className='rounded-full'>
-              <HelpCircle />
-            </Button>
-          </div>
-          <div>
-            <Button
-              data-testid='flow-save-btn'
-              onClick={onFlowSave}
-              className='bg-foreground text-background'>
-              Create flow
-            </Button>
-          </div>
-        </ModalFooter>
-      </ModalContent>
-    </ModalComponent>
-  )
-}
+  <Modal
+   className="bg-background min-h-[584px]"
+   isOpen={isOpen}
+   onClose={onClose}
+   size={size}
+  >
+   <ModalHeader>{"Create flow"}</ModalHeader>
+   <ModalBody className={"flex flex-1 flex-col gap-3 py-2 min-h-[480px]"}>
+    <div className="grid gap-4">
+     <Input
+      data-testid="flow-name-input"
+      label="Name"
+      labelPlacement="outside"
+      placeholder="Enter flow's name here"
+      name="name"
+      onChange={onFlowChange}
+      value={flow.name}
+      min={2}
+     />
+     <Input
+      label="Description"
+      labelPlacement="outside"
+      placeholder="Enter flow's description here"
+      name="description"
+      onChange={onFlowChange}
+      value={flow.description}
+     />
+    </div>
+    <label className="text-sm font-medium mb-1 block"> Color </label>
+    <div className="flex items-center gap-2">
+     {FLOW_COLORS.map((color) => (
+      <button
+       data-testid={`flow-color-${color.replace("#", "")}`}
+       key={color}
+       onClick={() => setFlow({ ...flow, color })}
+       className="rounded-full w-8 h-8 transition-all"
+       style={{
+        backgroundColor: color,
+        border: flow.color === color ? "4px solid var(--foreground)" : "none",
+       }}
+      ></button>
+     ))}
+    </div>
+    <div className="grid gap-2">
+     <div className="flex items-center gap-2">
+      <label className="text-sm font-medium"> Subflow </label>
+      <Checkbox onChange={() => setIsSubFlow(!isSubFlow)} checked={isSubFlow} />
+     </div>
+     <div
+      className="grid transition-all z-10"
+      style={{
+       gridTemplateRows: isSubFlow ? "1fr" : "0fr",
+      }}
+     >
+      <div className="min-h-0 overflow-hidden">
+       <Select
+        classNames={{
+         listboxWrapper: "max-h-48",
+         popoverContent: "bg-background",
+        }}
+        aria-label="Dependent from"
+        label="Dependent from"
+        labelPlacement="outside"
+        items={flows}
+        name="subflow"
+        onChange={(e) => {
+         if (e.target.value !== "") {
+          setFlow({ ...flow, subflow: e.target.value });
+         } else {
+          setFlow({ ...flow, subflow: "Global" });
+         }
+        }}
+        selectedKeys={[flow.subflow]}
+       >
+        {(flow) => <SelectItem key={flow.name}>{flow.name}</SelectItem>}
+       </Select>
+      </div>
+     </div>
+    </div>
+   </ModalBody>
+   <ModalFooter className="flex-row flex justify-between items-center ">
+    <div className="flex items-center justify-start gap-2">
+     <Button isIconOnly className="rounded-full">
+      <HelpCircle />
+     </Button>
+    </div>
+    <div>
+     <Button
+      data-testid="flow-save-btn"
+      onClick={onFlowSave}
+      className="bg-foreground text-background"
+     >
+      Create flow
+     </Button>
+    </div>
+   </ModalFooter>
+  </Modal>
+ );
+};
 
-export default CreateFlowModal
+export default CreateFlowModal;
diff --git a/frontend/src/modals/LocalStorage/LocalStorage.tsx b/frontend/src/modals/LocalStorage/LocalStorage.tsx
index 1756db10..c274f714 100644
--- a/frontend/src/modals/LocalStorage/LocalStorage.tsx
+++ b/frontend/src/modals/LocalStorage/LocalStorage.tsx
@@ -1,58 +1,116 @@
 import {
-  Modal,
-  ModalBody,
-  ModalContent,
-  ModalFooter,
-  ModalHeader,
-  Tab,
-  Tabs,
-} from "@nextui-org/react"
-import React from "react"
+ // Modal,
+ // ModalBody,
+ // ModalContent,
+ // ModalFooter,
+ // ModalHeader,
+ Tab,
+ Tabs,
+} from "@nextui-org/react";
+import { Modal, ModalBody, ModalFooter, ModalHeader } from "../ModalComponents";
+const LocalStorage = ({
+ isOpen,
+ onClose,
+}: {
+ isOpen: boolean;
+ onClose: () => void;
+}) => {
+ return (
+  // <Modal isOpen={true} onClose={onClose}>
+  //  <ModalContent className="min-w-[568px]">
+  //   <ModalHeader>Local Storage</ModalHeader>
+  //   <ModalBody>
+  //    <Tabs
+  //     key={"LocalStorageTabs"}
+  //     id="LocalStorageTabs"
+  //     size="sm"
+  //     className=""
+  //     classNames={{
+  //      cursor: "border border-foreground bg-background",
+  //      tab: "w-32 h-8",
+  //      panel: "",
+  //     }}
+  //    >
+  //     <Tab
+  //      key={"Components"}
+  //      title={<span className="flex items-center gap-2">Components</span>}
+  //     >
+  //      Coming soon...
+  //     </Tab>
+  //     <Tab
+  //      key={"Conditions"}
+  //      title={<span className="flex items-center gap-2">Conditions</span>}
+  //     >
+  //      Coming soon...
+  //     </Tab>
+  //     <Tab
+  //      key={"Slot snippets"}
+  //      title={<span className="flex items-center gap-2">Slot snippets</span>}
+  //     >
+  //      Coming soon...
+  //     </Tab>
+  //     <Tab
+  //      key={"Presets"}
+  //      title={<span className="flex items-center gap-2">Presets</span>}
+  //     >
+  //      Coming soon...
+  //     </Tab>
+  //    </Tabs>
+  //   </ModalBody>
+  //   <ModalFooter></ModalFooter>
+  //  </ModalContent>
+  // </Modal>
 
-const LocalStorage = ({ isOpen, onClose }: { isOpen: boolean; onClose: () => void }) => {
-  return (
-    <Modal
-      isOpen={isOpen}
-      onClose={onClose}>
-      <ModalContent className='min-w-[568px]'>
-        <ModalHeader>Local Storage</ModalHeader>
-        <ModalBody>
-          <Tabs
-            key={"LocalStorageTabs"}
-            id='LocalStorageTabs'
-            size='sm'
-            className=''
-            classNames={{
-              cursor: "border border-foreground bg-background",
-              tab: "w-32 h-8",
-              panel: "",
-            }}>
-            <Tab
-              key={"Components"}
-              title={<span className='flex items-center gap-2'>Components</span>}>
-              Coming soon...
-            </Tab>
-            <Tab
-              key={"Conditions"}
-              title={<span className='flex items-center gap-2'>Conditions</span>}>
-              Coming soon...
-            </Tab>
-            <Tab
-              key={"Slot snippets"}
-              title={<span className='flex items-center gap-2'>Slot snippets</span>}>
-              Coming soon...
-            </Tab>
-            <Tab
-              key={"Presets"}
-              title={<span className='flex items-center gap-2'>Presets</span>}>
-              Coming soon...
-            </Tab>
-          </Tabs>
-        </ModalBody>
-        <ModalFooter></ModalFooter>
-      </ModalContent>
-    </Modal>
-  )
-}
+  <Modal
+   className={"min-h-[208px] pCustom w-auto"}
+   isOpen={isOpen}
+   onClose={onClose}
+  >
+   <ModalHeader className="flex py-4 px-6 flex-initial text-large font-semibold">
+    Local Storage
+   </ModalHeader>
+   <ModalBody className="flex flex-1 flex-col gap-3 px-6 py-2">
+    <Tabs
+     key={"LocalStorageTabs"}
+     id="LocalStorageTabs"
+     size="sm"
+     classNames={{
+      cursor: "border border-foreground bg-background",
+      tab: "w-32 h-8",
+      panel: "",
+     }}
+    >
+     <Tab
+      key={"Components"}
+      title={<span className="flex items-center gap-2">Components</span>}
+     >
+      Coming soon...
+     </Tab>
+     <Tab
+      key={"Conditions"}
+      title={<span className="flex items-center gap-2">Conditions</span>}
+     >
+      Coming soon...
+     </Tab>
+     <Tab
+      key={"Slot snippets"}
+      title={<span className="flex items-center gap-2">Slot snippets</span>}
+     >
+      Coming soon...
+     </Tab>
+     <Tab
+      key={"Presets"}
+      title={<span className="flex items-center gap-2">Presets</span>}
+     >
+      Coming soon...
+     </Tab>
+    </Tabs>
+   </ModalBody>
+   <ModalFooter className={"flex flex-row gap-2 px-6 py-4 justify-end"}>
+    {""}
+   </ModalFooter>
+  </Modal>
+ );
+};
 
-export default LocalStorage
+export default LocalStorage;
diff --git a/frontend/src/modals/NodeModal/NodeModal.tsx b/frontend/src/modals/NodeModal/NodeModal.tsx
index d21cf9b6..ba05856d 100644
--- a/frontend/src/modals/NodeModal/NodeModal.tsx
+++ b/frontend/src/modals/NodeModal/NodeModal.tsx
@@ -1,188 +1,272 @@
 import {
-  Button,
-  Input,
-  ModalBody,
-  ModalContent,
-  ModalFooter,
-  ModalHeader,
-  ModalProps,
-} from "@nextui-org/react"
-import { Edge, useReactFlow } from "@xyflow/react"
-import { HelpCircle, TrashIcon } from "lucide-react"
-import React, { useCallback, useContext, useEffect } from "react"
-import ModalComponent from "../../components/ModalComponent"
-import { flowContext } from "../../contexts/flowContext"
-import { undoRedoContext } from "../../contexts/undoRedoContext"
-import EditPenIcon from "../../icons/EditPenIcon"
-import { DefaultNodeDataType, DefaultNodeType } from "../../types/NodeTypes"
-import ConditionRow from "./components/ConditionRow"
+ Button,
+ Input,
+ //  ModalBody,
+ ModalContent,
+ //  ModalFooter,
+ //  ModalHeader,
+ ModalProps,
+} from "@nextui-org/react";
+import { Modal, ModalBody, ModalFooter, ModalHeader } from "../ModalComponents";
+import { Edge, useReactFlow } from "@xyflow/react";
+import { HelpCircle, TrashIcon } from "lucide-react";
+import React, { useCallback, useContext, useEffect } from "react";
+// import ModalComponent from "../../components/ModalComponent";
+import { flowContext } from "../../contexts/flowContext";
+import { undoRedoContext } from "../../contexts/undoRedoContext";
+import EditPenIcon from "../../icons/EditPenIcon";
+import { DefaultNodeDataType, DefaultNodeType } from "../../types/NodeTypes";
+import ConditionRow from "./components/ConditionRow";
 
 type NodeModalProps = {
-  data: DefaultNodeDataType
-  size?: ModalProps["size"]
-  isOpen: boolean
-  onClose: () => void
-  onResponseModalOpen: () => void
-  nodeDataState: DefaultNodeDataType
-  setNodeDataState: React.Dispatch<React.SetStateAction<DefaultNodeDataType>>
-}
+ data: DefaultNodeDataType;
+ size?: ModalProps["size"];
+ isOpen: boolean;
+ onClose: () => void;
+ onResponseModalOpen: () => void;
+ nodeDataState: DefaultNodeDataType;
+ setNodeDataState: React.Dispatch<React.SetStateAction<DefaultNodeDataType>>;
+};
 
 const NodeModal = ({
-  data,
-  isOpen,
-  onClose,
-  size = "3xl",
-  onResponseModalOpen,
-  nodeDataState,
-  setNodeDataState,
+ data,
+ isOpen,
+ onClose,
+ size = "3xl",
+ onResponseModalOpen,
+ nodeDataState,
+ setNodeDataState,
 }: NodeModalProps) => {
-  const { getNodes, setNodes, updateNodeData } = useReactFlow<DefaultNodeType, Edge>()
-  const { quietSaveFlows, validateNodeDeletion } = useContext(flowContext)
-  const { takeSnapshot } = useContext(undoRedoContext)
+ const { getNodes, setNodes, updateNodeData } = useReactFlow<
+  DefaultNodeType,
+  Edge
+ >();
+ const { quietSaveFlows, validateNodeDeletion } = useContext(flowContext);
+ const { takeSnapshot } = useContext(undoRedoContext);
 
-  useEffect(() => {
-    setNodeDataState(getNodes().find((node) => node.data.id === data.id)?.data ?? data)
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [isOpen])
+ useEffect(() => {
+  setNodeDataState(
+   getNodes().find((node) => node.data.id === data.id)?.data ?? data
+  );
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, [isOpen]);
 
-  const setDataStateValue = useCallback(
-    (e: React.ChangeEvent<HTMLInputElement>) => {
-      setNodeDataState({ ...nodeDataState, [e.target.name]: e.target.value })
-    },
-    [nodeDataState, setNodeDataState]
-  )
+ const setDataStateValue = useCallback(
+  (e: React.ChangeEvent<HTMLInputElement>) => {
+   setNodeDataState({ ...nodeDataState, [e.target.name]: e.target.value });
+  },
+  [nodeDataState, setNodeDataState]
+ );
 
-  const setTextResponseValue = (e: React.ChangeEvent<HTMLInputElement>) => {
-    setNodeDataState({
-      ...nodeDataState,
-      response: {
-        ...nodeDataState.response!,
-        type: "text",
-        data: [{ text: e.target.value, priority: 1 }],
-      },
-    })
-  }
+ const setTextResponseValue = (e: React.ChangeEvent<HTMLInputElement>) => {
+  setNodeDataState({
+   ...nodeDataState,
+   response: {
+    ...nodeDataState.response!,
+    type: "text",
+    data: [{ text: e.target.value, priority: 1 }],
+   },
+  });
+ };
 
-  const onNodeSave = () => {
-    takeSnapshot()
-    updateNodeData(data.id, { ...nodeDataState })
-    quietSaveFlows()
-    onClose()
-  }
+ const onNodeSave = () => {
+  takeSnapshot();
+  updateNodeData(data.id, { ...nodeDataState });
+  quietSaveFlows();
+  onClose();
+ };
 
-  const onNodeDelete = () => {
-    const is_deletion_valid = validateNodeDeletion({
-      data,
-      id: data.id,
-      position: { x: 0, y: 0 },
-      type: "default_node",
-    })
-    if (!is_deletion_valid) return -1
-    takeSnapshot()
-    const nodes = getNodes()
-    const new_nodes = nodes.filter((node) => node.data.id !== data.id)
-    setNodes(new_nodes)
-    quietSaveFlows()
-    onClose()
-  }
+ const onNodeDelete = () => {
+  const is_deletion_valid = validateNodeDeletion({
+   data,
+   id: data.id,
+   position: { x: 0, y: 0 },
+   type: "default_node",
+  });
+  if (!is_deletion_valid) return -1;
+  takeSnapshot();
+  const nodes = getNodes();
+  const new_nodes = nodes.filter((node) => node.data.id !== data.id);
+  setNodes(new_nodes);
+  quietSaveFlows();
+  onClose();
+ };
 
-  const deleteCondition = (id: string) => {
-    if (nodeDataState.conditions) {
-      setNodeDataState({
-        ...nodeDataState,
-        conditions: nodeDataState.conditions.filter((c) => c.id !== id),
-      })
-    }
+ const deleteCondition = (id: string) => {
+  if (nodeDataState.conditions) {
+   setNodeDataState({
+    ...nodeDataState,
+    conditions: nodeDataState.conditions.filter((c) => c.id !== id),
+   });
   }
+ };
+
+ return (
+  <>
+   {/* <ModalComponent
+    className="bg-background min-h-[584px]"
+    motionProps={{
+     initial: { opacity: 0, scale: 0.95 },
+     animate: { opacity: 1, scale: 1 },
+    }}
+    isOpen={true}
+    onClose={onClose}
+    size={size}
+   >
+    <ModalContent>
+     <ModalHeader>{"Edit node"}</ModalHeader>
+     <ModalBody>
+      <label></label>
+      <div className="grid gap-4">
+       <Input
+        label="Name"
+        labelPlacement="outside"
+        placeholder="Enter node's name here"
+        variant="bordered"
+        name="name"
+        value={nodeDataState.name}
+        onChange={setDataStateValue}
+       />
+       <span className="relative">
+        <Input
+         label="Response"
+         labelPlacement="outside"
+         placeholder="Enter node's response here"
+         name="response"
+         variant="bordered"
+         disabled
+         value={nodeDataState.response?.data[0].text ?? "No text response"}
+         onChange={setTextResponseValue}
+        />
+        <button
+         onClick={() => {
+          onResponseModalOpen();
+         }}
+         className="absolute right-3 top-9"
+        >
+         <EditPenIcon />
+        </button>
+       </span>
+      </div>
+      <div>
+       <p className="text-sm font-medium mb-2 mt-2"> Conditions (x) </p>
+       <div className="border border-border rounded-xl">
+        <div className="grid grid-cols-3 gap-4 px-4 py-2">
+         <div>NAME</div>
+         <div>PRIORITY</div>
+         <div>ACTIONS</div>
+        </div>
+        <div className="grid">
+         {nodeDataState.conditions?.map((cnd) => (
+          <ConditionRow
+           deleteConditionFn={deleteCondition}
+           key={cnd.id}
+           cnd={cnd}
+          />
+         ))}
+        </div>
+       </div>
+      </div>
+     </ModalBody>
+     <ModalFooter className="flex justify-between items-center">
+      <div className="flex items-center justify-start gap-2">
+       <Button isIconOnly className="rounded-full">
+        <HelpCircle />
+       </Button>
+       <Button onClick={onNodeDelete} className="hover:bg-red-500" isIconOnly>
+        <TrashIcon />
+       </Button>
+      </div>
+      <div>
+       <Button onClick={onNodeSave} className="bg-foreground text-background">
+        Save node
+       </Button>
+      </div>
+     </ModalFooter>
+    </ModalContent>
+   </ModalComponent> */}
+   <Modal
+    className="min-h-[584px] flex flex-col"
+    size={size}
+    isOpen={isOpen}
+    onClose={onClose}
+   >
+    <ModalHeader>{"Edit node"}</ModalHeader>
+    <ModalBody className={"flex flex-1 flex-col gap-3 py-2"}>
+     <label></label>
+     <div className="grid gap-4">
+      <Input
+       label="Name"
+       labelPlacement="outside"
+       placeholder="Enter node's name here"
+       variant="bordered"
+       name="name"
+       value={nodeDataState.name}
+       onChange={setDataStateValue}
+      />
+      <span className="relative">
+       <Input
+        label="Response"
+        labelPlacement="outside"
+        placeholder="Enter node's response here"
+        name="response"
+        variant="bordered"
+        disabled
+        value={nodeDataState.response?.data[0].text ?? "No text response"}
+        onChange={setTextResponseValue}
+       />
+       <button
+        onClick={() => {
+         onResponseModalOpen();
+        }}
+        className="absolute right-3 top-9"
+       >
+        <EditPenIcon />
+       </button>
+      </span>
+     </div>
+     <div>
+      <p className="text-sm font-medium mb-2 mt-2"> Conditions (x) </p>
+      <div className="border border-border rounded-xl">
+       <div className="grid grid-cols-3 gap-4 px-4 py-2">
+        <div>NAME</div>
+        <div>PRIORITY</div>
+        <div>ACTIONS</div>
+       </div>
+       <div className="grid">
+        {nodeDataState.conditions?.map((cnd) => (
+         <ConditionRow
+          deleteConditionFn={deleteCondition}
+          key={cnd.id}
+          cnd={cnd}
+         />
+        ))}
+       </div>
+      </div>
+     </div>
+    </ModalBody>
+    <ModalFooter className="flex justify-between items-center">
+     <div className="flex items-center justify-start gap-2">
+      <Button isIconOnly className="rounded-full">
+       <HelpCircle />
+      </Button>
+      <Button onClick={onNodeDelete} className="hover:bg-red-500" isIconOnly>
+       <TrashIcon />
+      </Button>
+     </div>
+     <div>
+      <Button onClick={onNodeSave} className="bg-foreground text-background">
+       Save node
+      </Button>
+     </div>
+    </ModalFooter>
+   </Modal>
+  </>
+ );
+};
 
-  return (
-    <>
-      <ModalComponent
-        className='bg-background min-h-[584px]'
-        motionProps={{ initial: { opacity: 0, scale: 0.95 }, animate: { opacity: 1, scale: 1 } }}
-        isOpen={isOpen}
-        onClose={onClose}
-        size={size}>
-        <ModalContent>
-          <ModalHeader>{"Edit node"}</ModalHeader>
-          <ModalBody>
-            <label></label>
-            <div className='grid gap-4'>
-              <Input
-                label='Name'
-                labelPlacement='outside'
-                placeholder="Enter node's name here"
-                variant='bordered'
-                name='name'
-                value={nodeDataState.name}
-                onChange={setDataStateValue}
-              />
-              <span className='relative'>
-                <Input
-                  label='Response'
-                  labelPlacement='outside'
-                  placeholder="Enter node's response here"
-                  name='response'
-                  variant='bordered'
-                  disabled
-                  value={nodeDataState.response?.data[0].text ?? "No text response"}
-                  onChange={setTextResponseValue}
-                />
-                <button
-                  onClick={() => {
-                    onResponseModalOpen()
-                  }}
-                  className='absolute right-3 top-9'>
-                  <EditPenIcon />
-                </button>
-              </span>
-            </div>
-            <div>
-              <p className='text-sm font-medium mb-2 mt-2'> Conditions (x) </p>
-              <div className='border border-border rounded-xl'>
-                <div className='grid grid-cols-3 gap-4 px-4 py-2'>
-                  <div>NAME</div>
-                  <div>PRIORITY</div>
-                  <div>ACTIONS</div>
-                </div>
-                <div className='grid'>
-                  {nodeDataState.conditions?.map((cnd) => (
-                    <ConditionRow
-                      deleteConditionFn={deleteCondition}
-                      key={cnd.id}
-                      cnd={cnd}
-                    />
-                  ))}
-                </div>
-              </div>
-            </div>
-          </ModalBody>
-          <ModalFooter className='flex justify-between items-center'>
-            <div className='flex items-center justify-start gap-2'>
-              <Button
-                isIconOnly
-                className='rounded-full'>
-                <HelpCircle />
-              </Button>
-              <Button
-                onClick={onNodeDelete}
-                className='hover:bg-red-500'
-                isIconOnly>
-                <TrashIcon />
-              </Button>
-            </div>
-            <div>
-              <Button
-                onClick={onNodeSave}
-                className='bg-foreground text-background'>
-                Save node
-              </Button>
-            </div>
-          </ModalFooter>
-        </ModalContent>
-      </ModalComponent>
-    </>
-  )
-}
+//flex py-4 px-6 flex-initial text-large font-semibold hedr
+// class="flex flex-1 flex-col gap-3 px-6 py-2"  body
+//flex-row gap-2 px-6 py-4 flex justify-between items-center futer
 
-export default NodeModal
+export default NodeModal;
diff --git a/frontend/src/modals/ResponseModal/ResponseModal.tsx b/frontend/src/modals/ResponseModal/ResponseModal.tsx
index d2ab7e99..e42f4613 100644
--- a/frontend/src/modals/ResponseModal/ResponseModal.tsx
+++ b/frontend/src/modals/ResponseModal/ResponseModal.tsx
@@ -1,193 +1,253 @@
 import {
-  Button,
-  Input,
-  ModalBody,
-  ModalContent,
-  ModalFooter,
-  ModalHeader,
-  ModalProps,
-  Tab,
-  Tabs,
-} from "@nextui-org/react"
-import { useReactFlow } from "@xyflow/react"
-import { useContext, useMemo, useState } from "react"
-import { useParams } from "react-router-dom"
-import ModalComponent from "../../components/ModalComponent"
-import { flowContext } from "../../contexts/flowContext"
-import { NotificationsContext } from "../../contexts/notificationsContext"
-import { DefaultNodeDataType } from "../../types/NodeTypes"
-import { responseType, responseTypeType } from "../../types/ResponseTypes"
-import PythonResponse from "./components/PythonResponse"
-import TextResponse from "./components/TextResponse"
-
-type ResponseModalTab = "Using LLM" | "Python code" | "Custom" | "Text"
+ Button,
+ Input,
+ ModalProps,
+ Tab,
+ Tabs,
+} from "@nextui-org/react";
+// import ModalComponent from "../../components/ModalComponent";
+import { useReactFlow } from "@xyflow/react";
+import { useContext, useMemo, useState } from "react";
+import { useParams } from "react-router-dom";
+import { flowContext } from "../../contexts/flowContext";
+import { NotificationsContext } from "../../contexts/notificationsContext";
+import { DefaultNodeDataType } from "../../types/NodeTypes";
+import { responseType, responseTypeType } from "../../types/ResponseTypes";
+import PythonResponse from "./components/PythonResponse";
+import TextResponse from "./components/TextResponse";
+import { Modal, ModalBody, ModalFooter, ModalHeader } from "../ModalComponents";
+type ResponseModalTab = "Using LLM" | "Python code" | "Custom" | "Text";
 
 type ResponseModalProps = {
-  data: DefaultNodeDataType
-  setData: React.Dispatch<React.SetStateAction<DefaultNodeDataType>>
-  response: responseType
-  size?: ModalProps["size"]
-  isOpen: boolean
-  onClose: () => void
-}
+ data: DefaultNodeDataType;
+ setData: React.Dispatch<React.SetStateAction<DefaultNodeDataType>>;
+ response: responseType;
+ size?: ModalProps["size"];
+ isOpen: boolean;
+ onClose: () => void;
+};
 
 const ResponseModal = ({
-  isOpen,
-  onClose,
-  data,
-  setData,
-  response,
-  size = "3xl",
+ isOpen,
+ onClose,
+ data,
+ setData,
+ response,
+ size = "3xl",
 }: ResponseModalProps) => {
-  const { getNode, setNodes, getNodes } = useReactFlow()
-  const { flows, quietSaveFlows } = useContext(flowContext)
-  const { flowId } = useParams()
-  const [selected, setSelected] = useState<responseTypeType>(response.type ?? "python")
-  // const [nodeDataState, setNodeDataState] = useState(data)
-  const [currentResponse, setCurrentResponse] = useState(response)
-  const setSelectedHandler = (key: responseTypeType) => {
-    setCurrentResponse({ ...currentResponse, type: key })
-    setSelected(key)
-  }
-  const { notification: n } = useContext(NotificationsContext)
+ const { getNode, setNodes, getNodes } = useReactFlow();
+ const { flows, quietSaveFlows } = useContext(flowContext);
+ const { flowId } = useParams();
+ const [selected, setSelected] = useState<responseTypeType>(
+  response.type ?? "python"
+ );
+ // const [nodeDataState, setNodeDataState] = useState(data)
+ const [currentResponse, setCurrentResponse] = useState(response);
+ const setSelectedHandler = (key: responseTypeType) => {
+  setCurrentResponse({ ...currentResponse, type: key });
+  setSelected(key);
+ };
+ const { notification: n } = useContext(NotificationsContext);
 
-  const tabItems: {
-    title: ResponseModalTab
-    value: responseTypeType
-  }[] = useMemo(
-    () => [
-      {
-        title: "Python code",
-        value: "python",
-      },
-      {
-        title: "Text",
-        value: "text",
-      },
-      {
-        title: "Using LLM",
-        value: "llm",
-      },
-    ],
-    []
-  )
+ const tabItems: {
+  title: ResponseModalTab;
+  value: responseTypeType;
+ }[] = useMemo(
+  () => [
+   {
+    title: "Python code",
+    value: "python",
+   },
+   {
+    title: "Text",
+    value: "text",
+   },
+   {
+    title: "Using LLM",
+    value: "llm",
+   },
+  ],
+  []
+ );
 
-  const bodyItems = useMemo(
-    () => ({
-      llm: <div>llm</div>,
-      python: (
-        <PythonResponse
-          response={currentResponse}
-          setData={setCurrentResponse}
-        />
-      ),
-      custom: <div>Custom</div>,
-      text: (
-        <TextResponse
-          response={currentResponse}
-          setData={setCurrentResponse}
-        />
-      ),
-    }),
-    [currentResponse]
-  )
+ const bodyItems = useMemo(
+  () => ({
+   llm: <div>llm</div>,
+   python: (
+    <PythonResponse response={currentResponse} setData={setCurrentResponse} />
+   ),
+   custom: <div>Custom</div>,
+   text: (
+    <TextResponse response={currentResponse} setData={setCurrentResponse} />
+   ),
+  }),
+  [currentResponse]
+ );
 
-  const saveResponse = () => {
-    if (!currentResponse.name) {
-      return n.add({
-        title: "Saving error!",
-        message: "Response name is required!",
-        type: "error",
-      })
-    }
-    if (flows.some((flow) => flow.data.nodes.some((node) => (node.type === "default_node" && node.data.response.name === currentResponse.name && node.id !== data.id)))) {
-      return n.add({
-        title: "Saving error!",
-        message: "Response name must be unique!",
-        type: "error",
-      })
-    } else {
-      const nodes = getNodes()
-      const node = getNode(data.id)
-      const currentFlow = flows.find((flow) => flow.name === flowId)
-      if (node && currentFlow) {
-        const new_node = {
-          ...node,
-          data: {
-            ...node.data,
-            response: currentResponse,
-          },
+ const saveResponse = () => {
+  if (!currentResponse.name) {
+   return n.add({
+    title: "Saving error!",
+    message: "Response name is required!",
+    type: "error",
+   });
+  }
+  if (
+   flows.some((flow) =>
+    flow.data.nodes.some(
+     (node) =>
+      node.type === "default_node" &&
+      node.data.response.name === currentResponse.name &&
+      node.id !== data.id
+    )
+   )
+  ) {
+   return n.add({
+    title: "Saving error!",
+    message: "Response name must be unique!",
+    type: "error",
+   });
+  } else {
+   const nodes = getNodes();
+   const node = getNode(data.id);
+   const currentFlow = flows.find((flow) => flow.name === flowId);
+   if (node && currentFlow) {
+    const new_node = {
+     ...node,
+     data: {
+      ...node.data,
+      response: currentResponse,
+     },
+    };
+    const new_nodes = nodes.map((node) =>
+     node.id === data.id ? new_node : node
+    );
+    setNodes(() => new_nodes);
+    setData({
+     ...data,
+     response: new_node.data.response,
+    });
+    // currentFlow.data.nodes = nodes.map((node) => (node.id === data.id ? new_node : node))
+    // updateFlow(currentFlow)
+    quietSaveFlows();
+    onClose();
+   }
+  }
+ };
+ return (
+  <Modal
+   className="min-h-[584px] flex flex-col"
+   size={size}
+   isOpen={isOpen}
+   onClose={onClose}
+  >
+   <ModalHeader className="flex items-center gap-2">Edit response</ModalHeader>
+   <ModalBody className={"flex flex-1 flex-col gap-3 py-2"}>
+    <label htmlFor="">
+     <Tabs
+      disabledKeys={["llm"]}
+      selectedKey={selected}
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-ignore
+      onSelectionChange={setSelectedHandler}
+      items={tabItems}
+      classNames={{
+       tabList: "w-full",
+       tab: "",
+       cursor: "border border-contrast-border",
+      }}
+      className="bg-background w-full max-w-full"
+     >
+      {(item) => (
+       <Tab
+        key={item.value}
+        title={item.title}
+        onClick={() =>
+         setCurrentResponse({ ...currentResponse, type: item.value })
         }
-        const new_nodes = nodes.map((node) => (node.id === data.id ? new_node : node))
-        setNodes(() => new_nodes)
-        setData({
-          ...data,
-          response: new_node.data.response
-        })
-        // currentFlow.data.nodes = nodes.map((node) => (node.id === data.id ? new_node : node))
-        // updateFlow(currentFlow)
-        quietSaveFlows()
-        onClose()
+       ></Tab>
+      )}
+     </Tabs>
+    </label>
+    <div>
+     <Input
+      label="Name"
+      variant="bordered"
+      labelPlacement="outside"
+      placeholder="Enter response's name here"
+      value={currentResponse.name}
+      isRequired
+      onChange={(e) =>
+       setCurrentResponse({ ...currentResponse, name: e.target.value })
       }
-    }
-  }
-
-  return (
-    <ModalComponent
-      className='min-h-[584px]'
-      size={size}
-      isOpen={isOpen}
-      onClose={onClose}>
-      <ModalContent>
-        <ModalHeader> Edit response </ModalHeader>
-        <ModalBody>
-          <label htmlFor=''>
-            <Tabs
-              disabledKeys={['llm']}
-              selectedKey={selected}
-              // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-              // @ts-ignore
-              onSelectionChange={setSelectedHandler}
-              items={tabItems}
-              classNames={{
-                tabList: "w-full",
-                tab: "",
-                cursor: "border border-contrast-border",
-              }}
-              className='bg-background w-full max-w-full'>
-              {(item) => (
-                <Tab
-                  key={item.value}
-                  title={item.title}
-                  onClick={() =>
-                    setCurrentResponse({ ...currentResponse, type: item.value })
-                  }></Tab>
-              )}
-            </Tabs>
-          </label>
-          <div>
-            <Input
-              label='Name'
-              variant='bordered'
-              labelPlacement='outside'
-              placeholder="Enter response's name here"
-              value={currentResponse.name}
-              isRequired
-              onChange={(e) => setCurrentResponse({ ...currentResponse, name: e.target.value })}
-            />
-          </div>
-          <div>{bodyItems[selected]}</div>
-        </ModalBody>
-        <ModalFooter>
-          <Button
-            onClick={saveResponse}
-            className='bg-foreground text-background'>
-            Save response
-          </Button>
-        </ModalFooter>
-      </ModalContent>
-    </ModalComponent>
-  )
-}
+     />
+    </div>
+    <div>{bodyItems[selected]}</div>
+   </ModalBody>
+   <ModalFooter>
+    <Button onClick={saveResponse} className="bg-foreground text-background">
+     Save response
+    </Button>
+   </ModalFooter>
+  </Modal>
+  // <ModalComponent
+  //  className="min-h-[584px]"
+  //  size={size}
+  //  isOpen={true}
+  //  onClose={onClose}
+  // >
+  //  <ModalContent>
+  //   <ModalHeader> Edit response </ModalHeader>
+  //   <ModalBody>
+  //    <label htmlFor="">
+  //     <Tabs
+  //      disabledKeys={["llm"]}
+  //      selectedKey={selected}
+  //      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  //      // @ts-ignore
+  //      onSelectionChange={setSelectedHandler}
+  //      items={tabItems}
+  //      classNames={{
+  //       tabList: "w-full",
+  //       tab: "",
+  //       cursor: "border border-contrast-border",
+  //      }}
+  //      className="bg-background w-full max-w-full"
+  //     >
+  //      {(item) => (
+  //       <Tab
+  //        key={item.value}
+  //        title={item.title}
+  //        onClick={() =>
+  //         setCurrentResponse({ ...currentResponse, type: item.value })
+  //        }
+  //       ></Tab>
+  //      )}
+  //     </Tabs>
+  //    </label>
+  //    <div>
+  //     <Input
+  //      label="Name"
+  //      variant="bordered"
+  //      labelPlacement="outside"
+  //      placeholder="Enter response's name here"
+  //      value={currentResponse.name}
+  //      isRequired
+  //      onChange={(e) =>
+  //       setCurrentResponse({ ...currentResponse, name: e.target.value })
+  //      }
+  //     />
+  //    </div>
+  //    <div>{bodyItems[selected]}</div>
+  //   </ModalBody>
+  //   <ModalFooter>
+  //    <Button onClick={saveResponse} className="bg-foreground text-background">
+  //     Save response
+  //    </Button>
+  //   </ModalFooter>
+  //  </ModalContent>
+  // </ModalComponent>
+ );
+};
 
-export default ResponseModal
+export default ResponseModal;