chore: Update readme and link modal (#83)

* chore: Provide make cmd to init_with_cc * update readme.md * chore: add name input to the link modal * chore: some link refactoring and functions documentation * fix: run status button color mini-fix --------- Co-authored-by: MXerFix <[email protected]>
deeppavlov · Sep 2, 2024 · c573bd4 · c573bd4
1 parent 877ca34
commit c573bd4
Show file tree

Hide file tree

Showing 4 changed files with 51 additions and 16 deletions.
diff --git a/Makefile b/Makefile
@@ -151,6 +151,11 @@ init_proj: install_backend_env ## Initiates a new project using chatsky-ui
 	cd ${BACKEND_DIR} && poetry run chatsky.ui init --destination ../
 
 
+.PHONY: init_with_cc
+init_with_cc: ## Initiates a new project using cookiecutter
+	cookiecutter https://github.com/Ramimashkouk/df_d_template.git
+
+
 .PHONY: build_docs
 build_docs: install_backend_env ## Builds the docs
 	cd ${BACKEND_DIR} && \

diff --git a/README.md b/README.md
@@ -1,6 +1,6 @@
 # Quick Start
 ## System Requirements
-Ensure you have Python version 3.8 or higher installed.
+Ensure you have Python version 3.8.1 or higher installed.
 
 ## Installation
 To install the necessary package, run the following command:
@@ -13,7 +13,7 @@ You may add a `.env` file in the root directory and configure any of following e
 ```.env
 HOST=0.0.0.0
 PORT=8000
-CONF_RELOAD=True
+CONF_RELOAD=False
 LOG_LEVEL=info
 
 GRACEFUL_TERMINATION_TIMEOUT=2  # Waiting for process to stop
@@ -25,14 +25,19 @@ RUN_RUNNING_TIMEOUT=5
 ```
 
 ## Project Initiation
+💡 You are encouraged to run `chatsky.ui --help` to explore the available CLI options.
+
 Initialize your project by running:
 ```bash
 chatsky.ui init
 ```
 The `chatsky.ui init` command will start an interactive `cookiecutter` process to create a project based on a predefined template. The resulting project will be a simple example template that you can customize to suit your needs.
 
 ## Running Your Project
-To run your project, use the following command:
+To start your project, use the following command:
 ```bash
-chatsky.ui run_app --project-dir <PROJECT-SLUG>  # enter the slug you choose for your project with the help of the previous command
+chatsky.ui run_app --project-dir <PROJECT-SLUG>  # Replace <PROJECT-SLUG> with the slug you specified during initialization
 ```
+
+## Documentation
+You can refer to the [documentaion](https://deeppavlov.github.io/chatsky-ui/) to dig into the application code understanding.
diff --git a/frontend/src/components/header/BuildMenu.tsx b/frontend/src/components/header/BuildMenu.tsx
@@ -13,7 +13,7 @@ import { parseSearchParams } from "../../utils"
 const BuildMenu = () => {
   const { buildStart, buildPending } = useContext(buildContext)
   const { chat, setChat } = useContext(chatContext)
-  const { runStart, runPending, runStatus, runStop, run } = useContext(runContext)
+  const { runStart, runPending, runStatus, runStop, run, setRunStatus } = useContext(runContext)
   const [searchParams, setSearchParams] = useSearchParams()
 
   return (
@@ -38,6 +38,7 @@ const BuildMenu = () => {
           style={{}}
           onClick={async () => {
             if (runStatus !== "alive") {
+              setRunStatus(() => 'running')
               await buildStart({ wait_time: 1, end_status: "success" })
               await runStart({ end_status: "success", wait_time: 0 })
             } else if (runStatus === "alive" && run) {

diff --git a/frontend/src/components/nodes/LinkNode.tsx b/frontend/src/components/nodes/LinkNode.tsx
@@ -1,5 +1,6 @@
 import {
   Button,
+  Input,
   Modal,
   ModalBody,
   ModalContent,
@@ -34,16 +35,18 @@ const LinkNode = memo(({ data }: { data: LinkNodeDataType }) => {
   const { updateNodeData } = useReactFlow<AppNode, Edge>()
   const { onOpen, onClose, isOpen } = useDisclosure()
   const { flows, deleteNode } = useContext(flowContext)
+  const [name, setName] = useState(data.name ?? "")
   const [toFlow, setToFlow] = useState<FlowType>()
   const [toNode, setToNode] = useState<AppNode>()
   const [error, setError] = useState(false)
   const [isConfigured, setIsConfigured] = useState(data.transition.is_configured ?? false)
-  // const [r, setR] = useState(0)
   const { notification: n } = useContext(NotificationsContext)
-  // const { openPopUp } = useContext(PopUpContext)
 
+  /**
+   * This useEffect checks if link configured
+   */
   useEffect(() => {
-    if (data.transition.target_node) {
+    if (data.transition.is_configured) {
       const to_flow = flows.find((flow) =>
         flow.data.nodes.some((node) => node.data.id === data.transition.target_node)
       )
@@ -55,10 +58,10 @@ const LinkNode = memo(({ data }: { data: LinkNodeDataType }) => {
         setToNode(to_node)
       }
     }
-    if (!data.transition.target_node) {
+    if (!data.transition.is_configured) {
       onOpen()
     }
-  // eslint-disable-next-line react-hooks/exhaustive-deps
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [data.transition.target_node])
 
   const handleFlowSelectionChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
@@ -78,6 +81,9 @@ const LinkNode = memo(({ data }: { data: LinkNodeDataType }) => {
     [TO_FLOW?.data.nodes, data.transition.target_node]
   )
 
+  /**
+   * This useEffect checks the TO_FLOW and TO_NODE values is correct, and calls error if not
+   */
   useEffect(() => {
     if ((!TO_FLOW || !TO_NODE) && isConfigured) {
       setError(true)
@@ -89,9 +95,12 @@ const LinkNode = memo(({ data }: { data: LinkNodeDataType }) => {
     } else {
       setError(false)
     }
-  // eslint-disable-next-line react-hooks/exhaustive-deps
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [TO_FLOW, TO_NODE])
 
+  /**
+   * This function will delete current link if TO_FLOW and TO_NODE values wasn't defined
+   */
   const onDismiss = () => {
     setToFlow(TO_FLOW)
     setToNode(TO_NODE)
@@ -103,15 +112,19 @@ const LinkNode = memo(({ data }: { data: LinkNodeDataType }) => {
     }
   }
 
+  /**
+   * Link data save function
+   */
   const onSave = () => {
     if (toFlow && toNode) {
       updateNodeData(data.id, {
         ...data,
+        name: name,
         transition: {
           target_flow: toFlow.name,
           target_node: toNode.data.id,
-          is_configured: true
-        }
+          is_configured: true,
+        },
       })
       setIsConfigured(true)
       onClose()
@@ -122,7 +135,7 @@ const LinkNode = memo(({ data }: { data: LinkNodeDataType }) => {
     <>
       <div
         onDoubleClick={onOpen}
-        className={classNames(`default_node px-6 py-4`, error && "border-error",)}>
+        className={classNames(`default_node px-6 py-4`, error && "border-error")}>
         <div className=' w-full h-1/3 flex justify-between items-center bg-node rounded-node'>
           <Handle
             isConnectableEnd
@@ -146,7 +159,7 @@ const LinkNode = memo(({ data }: { data: LinkNodeDataType }) => {
             </PopoverTrigger>
             <PopoverContent>ID: {data.id}</PopoverContent>
           </Popover>
-          {((!toFlow || !toNode) && isConfigured) && (
+          {(!toFlow || !toNode) && isConfigured && (
             <Tooltip
               content='It looks like this node/flow is not defined. Please, re-create it!'
               radius='sm'>
@@ -163,7 +176,8 @@ const LinkNode = memo(({ data }: { data: LinkNodeDataType }) => {
         <div className='py-2.5 h-2/3 flex items-start justify-between'>
           <div className='flex items-center gap-2'>
             <Link2 strokeWidth={1.3} />
-            {TO_FLOW ? TO_FLOW.name : isConfigured ? "ERROR" : "<FLOW_NAME>"} / {TO_NODE ? TO_NODE.data.name : isConfigured ? "ERROR" : "<NODE_NAME>"}
+            {TO_FLOW ? TO_FLOW.name : isConfigured ? "ERROR" : "<FLOW_NAME>"} /{" "}
+            {TO_NODE ? TO_NODE.data.name : isConfigured ? "ERROR" : "<NODE_NAME>"}
           </div>
           <div></div>
         </div>
@@ -195,6 +209,16 @@ const LinkNode = memo(({ data }: { data: LinkNodeDataType }) => {
             </div>
           </ModalHeader>
           <ModalBody>
+            <div>
+              <Input
+                label='Name'
+                value={name}
+                onValueChange={setName}
+                radius='sm'
+                variant='bordered'
+                labelPlacement='outside'
+              />
+            </div>
             <Table>
               <TableHeader>
                 <TableColumn>