chore: Migrate to xyflow and apply multiple fixes (#79)

* migrate/feat: migration to xyflow + update delete function

* fix: home ui fixes & add info home header btn

* fix: fix flow clear bug & add chatsky info

* fix: add disableCopyPaste parameter

* fix: clear clg

* chore: add snapshot

frontend/package.json

@@ -39,6 +39,7 @@
     "@uiw/codemirror-theme-andromeda": "^4.21.25",
     "@uiw/codemirror-theme-noctis-lilac": "^4.21.25",
     "@uiw/react-codemirror": "^4.21.25",
+    "@xyflow/react": "^12.2.0",
     "axios": "^1.6.7",
     "babel-jest": "^29.7.0",
     "classnames": "^2.5.1",
@@ -60,7 +61,6 @@
     "react-router-dom": "^6.22.2",
     "react-test-renderer": "^18.3.1",
     "react-xarrows": "^2.0.2",
-    "reactflow": "^11.10.4",
     "ts-jest": "^29.1.2",
     "ts-node": "^10.9.2",
     "uuid": "^9.0.1",

frontend/src/App.tsx

@@ -1,6 +1,6 @@
 import { NextUIProvider } from "@nextui-org/react"
+import { ReactFlowProvider } from "@xyflow/react"
 import { RouterProvider, createBrowserRouter } from "react-router-dom"
-import { ReactFlowProvider } from "reactflow"
 import { Preloader } from "./UI/Preloader/Preloader"
 import ContextWrapper from "./contexts"
 import { UndoRedoProvider } from "./contexts/undoRedoContext"

frontend/src/UI/Preloader/preloader.css

@@ -1,5 +1,5 @@
 #preloader-wrapper {
-  background-color: hsl(var(--background));
+  background-color: var(--background);
   position: absolute;
   top: 0;
   left: 0;

frontend/src/api/index.ts

@@ -1,9 +1,7 @@
 import axios from "axios"
 import { DEV, VITE_BASE_API_URL } from "../env.consts"
 
-const clearUrlFromQueries = (url: string) => {}
 
-// const baseURL = VITE_BASE_API_URL ?? "http://localhost:8000/api/v1"
 const baseURL = DEV
   ? VITE_BASE_API_URL
   : window.location.protocol + "//" + window.location.host + "/api/v1"

frontend/src/components/ReactFlowCustom.tsx

@@ -0,0 +1,12 @@
+import { Edge, ReactFlow, ReactFlowProps } from '@xyflow/react'
+import { AppNode } from '../types/NodeTypes'
+
+const ReactFlowCustom = ({ ...props }: ReactFlowProps<AppNode, Edge>) => {
+  return (
+    <ReactFlow {...props}>
+      {props.children}
+    </ReactFlow>
+  )
+}
+
+export default ReactFlowCustom

frontend/src/components/chat/Chat.tsx

@@ -5,7 +5,7 @@ import { Paperclip, RefreshCcw, Send, Smile, X } from "lucide-react"
 import { memo, useContext, useEffect, useRef, useState } from "react"
 import { useSearchParams } from "react-router-dom"
 import { chatContext } from "../../contexts/chatContext"
-import { notificationsContext } from "../../contexts/notificationsContext"
+import { NotificationsContext } from "../../contexts/notificationsContext"
 import { runContext } from "../../contexts/runContext"
 import { workspaceContext } from "../../contexts/workspaceContext"
 import { DEV } from "../../env.consts"
@@ -19,7 +19,7 @@ const Chat = memo(() => {
   const [searchParams, setSearchParams] = useSearchParams()
   const ws = useRef<WebSocket | null>(null)
   const { setMouseOnPane } = useContext(workspaceContext)
-  const { notification: n } = useContext(notificationsContext)
+  const { notification: n } = useContext(NotificationsContext)
 
   const [isEmoji, setIsEmoji] = useState(false)
 
@@ -122,7 +122,7 @@ const Chat = memo(() => {
       const socket = new WebSocket(
         `ws://${DEV ? "localhost:8000" : window.location.host}/api/v1/bot/run/connect?run_id=${run.id}`
       )
-      socket.onopen = (e) => {
+      socket.onopen = () => {
         n.add({ message: "Chat was successfully connected!", title: "Success", type: "success" })
       }
       socket.onmessage = (event: MessageEvent) => {

frontend/src/components/edges/ButtonEdge/ButtonEdge.tsx

@@ -1,12 +1,12 @@
-import { X } from "lucide-react"
 import {
   BaseEdge,
   Edge,
   EdgeLabelRenderer,
   EdgeProps,
   getBezierPath,
   useReactFlow,
-} from "reactflow"
+} from "@xyflow/react"
+import { X } from "lucide-react"
 import "./buttonedge.css"
 
 export default function CustomEdge({
@@ -53,9 +53,9 @@ export default function CustomEdge({
           }}
           className='nodrag nopan'>
           <button
-            className='p-0.5 rounded-full bg-neutral-300 text-foreground flex items-center justify-center border-2 border-transparent transition-colors hover:border-background'
+            className='p-0.5 rounded-full bg-neutral-300 text-black flex items-center justify-center border-2 border-transparent transition-colors hover:border-background'
             onClick={onEdgeClick}>
-            <X className="w-4 h-4" />
+            <X className="w-4 h-4 stroke-neutral-800" />
           </button>
         </div>
       </EdgeLabelRenderer>

frontend/src/components/footbar/FootBar.tsx

@@ -5,11 +5,11 @@ import { Key, memo, useCallback, useContext, useState } from "react"
 import { Link, useSearchParams } from "react-router-dom"
 import { buildContext } from "../../contexts/buildContext"
 import { MetaContext } from "../../contexts/metaContext"
-import { notificationsContext } from "../../contexts/notificationsContext"
+import { NotificationsContext } from "../../contexts/notificationsContext"
 import { workspaceContext } from "../../contexts/workspaceContext"
-import { Logo } from "../../icons/Logo"
 import MonitorIcon from "../../icons/buildmenu/MonitorIcon"
 import LocalStorageIcon from "../../icons/footbar/LocalStorageIcon"
+import { Logo } from "../../icons/Logo"
 import LocalStorage from "../../modals/LocalStorage/LocalStorage"
 import { parseSearchParams } from "../../utils"
 import { NotificationsWindow } from "../notifications/NotificationsWindow"
@@ -26,7 +26,7 @@ const FootBar = memo(() => {
   const { logsPage, setLogsPage } = useContext(buildContext)
   const [searchParams, setSearchParams] = useSearchParams()
   const [isNotificationsOpen, setIsNotificationsOpen] = useState(false)
-  const { notifications } = useContext(notificationsContext)
+  const { notifications } = useContext(NotificationsContext)
 
   const onSelectionChange = useCallback(
     (key: Key) => {

frontend/src/components/header/BuildMenu.tsx

@@ -1,6 +1,6 @@
 import { Button, Spinner, Tooltip } from "@nextui-org/react"
 import classNames from "classnames"
-import { useContext, useState } from "react"
+import { useContext } from "react"
 import { useSearchParams } from "react-router-dom"
 import { buildContext } from "../../contexts/buildContext"
 import { chatContext } from "../../contexts/chatContext"
@@ -11,10 +11,9 @@ import StopIcon from "../../icons/buildmenu/StopIcon"
 import { parseSearchParams } from "../../utils"
 
 const BuildMenu = () => {
-  const { buildStart, buildPending, buildStatus, setLogsPage, logsPage } = useContext(buildContext)
+  const { buildStart, buildPending } = useContext(buildContext)
   const { chat, setChat } = useContext(chatContext)
   const { runStart, runPending, runStatus, runStop, run } = useContext(runContext)
-  const [showBuildMenu, setShowBuildMenu] = useState(false)
   const [searchParams, setSearchParams] = useSearchParams()
 
   return (
@@ -30,7 +29,9 @@ const BuildMenu = () => {
           className={classNames("transition-all duration-300", showBuildMenu && "rotate-180")}
         />
       </Button> */}
-      <Tooltip content='Start build and run script process' radius="sm">
+      <Tooltip
+        content='Start build and run script process'
+        radius='sm'>
         <Button
           data-testid='run-btn'
           isIconOnly
@@ -46,7 +47,9 @@ const BuildMenu = () => {
           isLoading={runPending || buildPending}
           spinner={
             <Spinner
-              color='danger'
+              color={
+                runStatus === "alive" ? "success" : runStatus === "running" ? "warning" : "danger"
+              }
               size='sm'
             />
           }
@@ -56,7 +59,9 @@ const BuildMenu = () => {
               ? "border-emerald-500"
               : runStatus === "stopped"
                 ? "border-border"
-                : "border-red-500"
+                : runStatus === "running"
+                  ? "border-amber-600"
+                  : "border-red-500"
           )}>
           {runStatus !== "alive" ? (
             <PlayIcon className='w-[18px] h-[18px]' />
@@ -102,7 +107,9 @@ const BuildMenu = () => {
           )}
         />
       </Button> */}
-      <Tooltip content="Open the chat window" radius="sm">
+      <Tooltip
+        content='Open the chat window'
+        radius='sm'>
         <Button
           data-testid='chat-btn'
           onClick={() => {

frontend/src/components/header/Header.tsx

@@ -1,5 +1,6 @@
-import { Button, Tooltip } from "@nextui-org/react"
+import { Button, Popover, PopoverContent, PopoverTrigger, Tooltip } from "@nextui-org/react"
 import classNames from "classnames"
+import { Github, InfoIcon } from "lucide-react"
 import { memo, useContext, useMemo } from "react"
 import { Link, useLocation } from "react-router-dom"
 import { flowContext } from "../../contexts/flowContext"
@@ -39,7 +40,7 @@ const Header = memo(() => {
           <Logo />
           <div className='flex items-end justify-start gap-1'>
             <span className='flex font-bold text-lg'>Chatsky UI</span>
-            <span className='flex font-semibold text-neutral-400 text-sm'>v {version}</span>
+            {/* <span className='flex font-semibold text-neutral-400 text-sm'>v {version}</span> */}
           </div>
         </Link>
       )}
@@ -95,13 +96,44 @@ const Header = memo(() => {
         )}
       </div>
       <div className='flex items-center justify-start gap-1'>
-        <BuildMenu />
-        {/* <Button
-          onClick={toggleTheme}
-          isIconOnly
-          className='header-service-btn'>
-          {theme === "light" ? <Sun /> : <Moon />}
-        </Button> */}
+        {location.pathname.includes("flow") && <BuildMenu />}
+        {location.pathname.includes("home") && (
+          <Popover
+            placement='left-end'
+            radius='sm'>
+            <PopoverTrigger>
+              <Button
+                className='border-[1px]'
+                variant='ghost'
+                radius='sm'
+                isIconOnly>
+                <InfoIcon />
+              </Button>
+            </PopoverTrigger>
+            <PopoverContent>
+              <h4 className='text-base flex items-center justify-center gap-2'>
+                <Logo className='w-4 h-4' />
+                Chatsky UI
+              </h4>
+              <div className='w-full mt-2 [&>p]:text-[12px] flex flex-col items-start justify-start '>
+                <p className='mb-1'>
+                  <strong className='text-[14px]'>Version:</strong> {version}
+                </p>
+                <a
+                  className='w-full flex items-center justify-center gap-1 rounded-lg border p-1 border-border transition-colors hover:border-node-selected'
+                  href='https://github.com/deeppavlov/chatsky-ui'>
+                  <Github className='w-4 h-4' />
+                  <p className='text-[12px]'>GitHub</p>
+                </a>
+                <a
+                  className='w-full flex items-center justify-center gap-1 rounded-lg border p-1 border-border transition-colors hover:border-node-selected mt-1 mb-1'
+                  href='https://deeppavlov.ai'>
+                  <p className='text-[12px]'>DeepPavlov.ai</p>
+                </a>
+              </div>
+            </PopoverContent>
+          </Popover>
+        )}
       </div>
     </div>
   )

frontend/src/components/header/components/NodeInstruments.tsx

@@ -1,30 +1,29 @@
 import { Button, Tooltip } from "@nextui-org/react"
+import { Edge, useReactFlow } from "@xyflow/react"
 import classNames from "classnames"
-import { useContext, useMemo } from "react"
-import { Node, useReactFlow } from "reactflow"
+import { useContext } from "react"
 import { flowContext } from "../../../contexts/flowContext"
 import { workspaceContext } from "../../../contexts/workspaceContext"
 import FallbackNodeIcon from "../../../icons/nodes/FallbackNodeIcon"
 import StartNodeIcon from "../../../icons/nodes/StartNodeIcon"
 import { FlowType } from "../../../types/FlowTypes"
-import { NodeDataType } from "../../../types/NodeTypes"
+import { AppNode } from "../../../types/NodeTypes"
 
 const NodeInstruments = ({ flow }: { flow: FlowType }) => {
-  const { setNodes } = useReactFlow()
+  const { setNodes } = useReactFlow<AppNode, Edge>()
   const { handleNodeFlags, selectedNode } = useContext(workspaceContext)
   const { deleteNode } = useContext(flowContext)
 
-  const selectedNodeData: Node<NodeDataType> | null =
+  const selectedNodeData: AppNode | null =
     flow?.data.nodes.find((node) => node.id === selectedNode) ?? null
 
-  const is_node_default = useMemo(() => selectedNodeData?.type === "default_node", [selectedNodeData])
-
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   const deleteSelectedNodeHandler = () => {
     setNodes((nds) => nds.filter((node) => node.id !== selectedNode))
     deleteNode(selectedNode)
   }
 
-  if (!is_node_default) return <></>
+  if (selectedNodeData?.type !== 'default_node') return <></>
 
   return (
     <div className='flex items-center gap-1'>

frontend/src/components/nodes/DefaultNode.tsx

@@ -1,9 +1,9 @@
 import { Button, useDisclosure } from "@nextui-org/react"
+import { Handle, Position } from "@xyflow/react"
+import "@xyflow/react/dist/style.css"
 import classNames from "classnames"
 import { PlusIcon } from "lucide-react"
 import { memo, useContext, useMemo, useState } from "react"
-import { Handle, Position } from "reactflow"
-import "reactflow/dist/style.css"
 import { workspaceContext } from "../../contexts/workspaceContext"
 import EditNodeIcon from "../../icons/nodes/EditNodeIcon"
 import FallbackNodeIcon from "../../icons/nodes/FallbackNodeIcon"
@@ -14,11 +14,11 @@ import "../../index.css"
 import ConditionModal from "../../modals/ConditionModal/ConditionModal"
 import NodeModal from "../../modals/NodeModal/NodeModal"
 import ResponseModal from "../../modals/ResponseModal/ResponseModal"
-import { NodeDataType } from "../../types/NodeTypes"
+import { DefaultNodeDataType } from "../../types/NodeTypes"
 import Condition from "./conditions/Condition"
 import Response from "./responses/Response"
 
-const DefaultNode = memo(({ data }: { data: NodeDataType }) => {
+const DefaultNode = memo(({ data }: { data: DefaultNodeDataType }) => {
   const {
     onOpen: onConditionOpen,
     onClose: onConditionClose,
@@ -27,7 +27,7 @@ const DefaultNode = memo(({ data }: { data: NodeDataType }) => {
 
   const { selectedNode } = useContext(workspaceContext)
 
-  const [nodeDataState, setNodeDataState] = useState<NodeDataType>(data)
+  const [nodeDataState, setNodeDataState] = useState<DefaultNodeDataType>(data)
 
   const { onOpen: onNodeOpen, onClose: onNodeClose, isOpen: isNodeOpen } = useDisclosure()
   const {
@@ -75,7 +75,7 @@ const DefaultNode = memo(({ data }: { data: NodeDataType }) => {
                   width: "0.7rem",
                   height: "0.7rem",
                   top: "1.875rem",
-                  left: "-0.335rem",
+                  left: "0rem",
                   zIndex: 10,
                 }}
               />
@@ -102,9 +102,9 @@ const DefaultNode = memo(({ data }: { data: NodeDataType }) => {
             />
           </div>
         </div>
-        <div className=' w-full flex flex-col items-center justify-center gap-2 p-2.5 '>
+        <div className='cursor-default w-full flex flex-col items-center justify-center gap-2 p-2.5 '>
           <div
-            className='w-full flex items-center justify-start border border-border rounded-lg py-2 px-2 mb-1'
+            className='cursor-pointer w-full flex items-center justify-start border border-border shadow rounded-lg py-2 px-2 mb-1 transition-colors hover:border-node-selected'
             onClick={onResponseOpen}>
             <Response data={data} />
           </div>