Merge branch 'main' into DIAL-35-Setup-socket-for-server

Author: khanh1902

client/src/components/forms/condition.tsx

@@ -3,7 +3,9 @@ import {
   TCompareValue,
   useCompareValueSchema,
 } from '@/lib/schema/compare-value'
+import { isStringBoolean } from '@/utils'
 import { zodResolver } from '@hookform/resolvers/zod'
+import { useEffect } from 'react'
 import { useForm } from 'react-hook-form'
 import { useTranslation } from 'react-i18next'
 import {
@@ -16,6 +18,7 @@ import {
   Input,
   Select,
   SelectContent,
+  SelectGroup,
   SelectItem,
   SelectTrigger,
   SelectValue,
@@ -34,15 +37,31 @@ const ConditionForm = ({
 }: Props) => {
   const schema = useCompareValueSchema()
   const form = useForm<TCompareValue>({
-    defaultValues,
+    defaultValues: {
+      operator: defaultValues?.operator || '',
+      value: defaultValues?.value
+        ? JSON.stringify(defaultValues.value).replace(/"/g, '')
+        : '',
+    },
     resolver: zodResolver(schema),
   })
   const { t } = useTranslation(['forms', 'flowDetail'])
 
+  const watchOperator = form.watch('operator')
+
   const handleSubmit = form.handleSubmit((data) => {
-    onSubmit?.(data)
+    onSubmit?.({
+      ...data,
+      value: isStringBoolean(data.value) ? JSON.parse(data.value) : data.value,
+    })
   })
 
+  useEffect(() => {
+    if (watchOperator === 'exist' && !form.getValues('value')) {
+      form.reset({ value: 'true' })
+    }
+  }, [watchOperator, form])
+
   return (
     <Form {...form}>
       <form className='space-y-3' onSubmit={handleSubmit} id={id}>
@@ -56,44 +75,79 @@ const ConditionForm = ({
                 <Select
                   onValueChange={field.onChange}
                   defaultValue={field.value}
+                  value={field.value}
                 >
                   <FormControl>
                     <SelectTrigger>
                       <SelectValue placeholder={t('operator.placeholder')} />
                     </SelectTrigger>
                   </FormControl>
-                  <SelectContent>
-                    {CONDITIONAL_OPERATOR.map((c) => {
-                      return (
-                        <SelectItem key={c} value={c}>
-                          {
-                            // @ts-ignore
-                            t(`flowDetail:compare_types.${c}`)
-                          }
-                        </SelectItem>
-                      )
-                    })}
+                  <SelectContent className='max-h-72'>
+                    <SelectGroup>
+                      {CONDITIONAL_OPERATOR.map((c) => {
+                        return (
+                          <SelectItem key={c} value={c}>
+                            {
+                              // @ts-ignore
+                              t(`flowDetail:compare_types.${c}`)
+                            }
+                          </SelectItem>
+                        )
+                      })}
+                    </SelectGroup>
                   </SelectContent>
                 </Select>
                 <FormMessage />
               </FormItem>
             )}
           />
-          <FormField
-            name='value'
-            control={form.control}
-            render={({ field }) => {
-              return (
+          {watchOperator === 'exist' ? (
+            <FormField
+              name='value'
+              control={form.control}
+              render={({ field }) => (
                 <FormItem className='w-full'>
                   <FormLabel>{t('value.label')}</FormLabel>
-                  <FormControl>
-                    <Input {...field} placeholder={t('value.placeholder')} />
-                  </FormControl>
+                  <Select
+                    onValueChange={field.onChange}
+                    defaultValue={field.value}
+                  >
+                    <FormControl>
+                      <SelectTrigger className='capitalize'>
+                        <SelectValue placeholder={t('value.placeholder')} />
+                      </SelectTrigger>
+                    </FormControl>
+                    <SelectContent>
+                      {['true', 'false'].map((c) => {
+                        return (
+                          <SelectItem key={c} value={c} className='capitalize'>
+                            {c}
+                          </SelectItem>
+                        )
+                      })}
+                    </SelectContent>
+                  </Select>
                   <FormMessage />
                 </FormItem>
-              )
-            }}
-          />
+              )}
+            />
+          ) : (
+            <FormField
+              name='value'
+              control={form.control}
+              render={({ field }) => {
+                return (
+                  <FormItem className='w-full'>
+                    <FormLabel>{t('value.label')}</FormLabel>
+                    <FormControl>
+                      <Input {...field} placeholder={t('value.placeholder')} />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )
+              }}
+            />
+          )}
         </div>
       </form>
     </Form>

client/src/components/pages/flow-detail/flow-inside.tsx

@@ -34,6 +34,7 @@ export const FlowInside = () => {
     handleDoubleClickNode,
     handleDoubleClickEdge,
     flow,
+    handleNodesDelete,
   } = useFlowCtx()
   const { t } = useTranslation('common')
 
@@ -89,6 +90,7 @@ export const FlowInside = () => {
         onInit={handleInit}
         onNodeDoubleClick={handleDoubleClickNode}
         onEdgeDoubleClick={handleDoubleClickEdge}
+        onNodesDelete={handleNodesDelete}
       >
         <Background
           gap={24}

client/src/components/pages/flow-detail/flow-provider.tsx

@@ -18,6 +18,7 @@ import {
   NodeChange,
   NodeMouseHandler,
   OnConnect,
+  OnNodesDelete,
   ReactFlowInstance,
   addEdge,
   useEdgesState,
@@ -59,6 +60,7 @@ type FlowCtx = {
   setNodes: React.Dispatch<React.SetStateAction<Node<any>[]>>
   setEdges: React.Dispatch<React.SetStateAction<Edge<any>[]>>
   handleDeleteEdgeById: (id: string) => void
+  handleNodesDelete: OnNodesDelete
 }
 
 const FlowContext = createContext<FlowCtx | undefined>(undefined)
@@ -135,6 +137,8 @@ export const FlowProvider = ({ children, flow }: Props) => {
     selectedEdge,
     selectedNode,
     flows: nodes.map((node) => node.data),
+    nodes,
+    edges,
   })
 
   const [reactFlowInstance, setReactFlowInstance] = useState<ReactFlowInstance<
@@ -499,6 +503,8 @@ export const FlowProvider = ({ children, flow }: Props) => {
         (edge) => edge.target === connection.target,
       ).length
 
+      const targetNode = nodes.find((node) => node.id === connection.target)
+
       if (connection.source === connection.target) return false
 
       if (
@@ -526,6 +532,14 @@ export const FlowProvider = ({ children, flow }: Props) => {
         })
       }
 
+      if (
+        (targetNode?.data.action === EActionTypes.CHECK_VARIABLES ||
+          targetNode?.data.action === EActionTypes.PROMPT_AND_COLLECT) &&
+        sourcesFromHandleInState < 1
+      ) {
+        return true
+      }
+
       if (targetFromHandleInState === 1) return false
       if (sourcesFromHandleInState < 1) return true
 
@@ -584,6 +598,33 @@ export const FlowProvider = ({ children, flow }: Props) => {
     })
   }, [])
 
+  /**
+   * Finds a node in the given array of nodes that has the specified node as its next action.
+   * @param nodes - The array of nodes to search in.
+   * @param node - The node to find the next action for.
+   * @returns The node that has the specified node as its next action, or undefined if not found.
+   */
+  const findNodeIsNextAction = useCallback((nodes: Node[], node: Node<any>) => {
+    return nodes.find((nd) => {
+      return (
+        nd.data?.nextAction === node.id ||
+        nd.data?.nextActions?.some((na: any) => na.id === node.id)
+      )
+    })
+  }, [])
+
+  const findNodeContainNextAction = useCallback(
+    (nodes: Node[], node: Node<any>) => {
+      return nodes.find((nd) => {
+        return (
+          nd.data?.nextAction === node.id ||
+          nd.data?.nextActions?.some((na: any) => na.id === node.id)
+        )
+      })
+    },
+    [],
+  )
+
   /**
    * Retrieves the complete flows from the given nodes.
    * A complete flow is a sequence of nodes where each node has a next action or is a final node.
@@ -594,20 +635,6 @@ export const FlowProvider = ({ children, flow }: Props) => {
   const getCompleteFlows = useCallback(() => {
     let clonedNodes = _.cloneDeep(nodes)
 
-    /**
-     * Checks if a given node is the next action of any of the cloned nodes.
-     * @param node - The node to check.
-     * @returns True if the node is the next action of any cloned node, false otherwise.
-     */
-    const nodeIsNextAction = (node: Node<any>) => {
-      return clonedNodes.some((nd) => {
-        return (
-          nd.data?.nextAction === node.id ||
-          nd.data?.nextActions?.some((na: any) => na.id === node.id)
-        )
-      })
-    }
-
     /**
      * Checks if a node is to be removed.
      * @param node - The node to check.
@@ -622,7 +649,7 @@ export const FlowProvider = ({ children, flow }: Props) => {
       }
 
       if (
-        !nodeIsNextAction(node) &&
+        !findNodeIsNextAction(clonedNodes, node) &&
         (!node.data?.nextAction || !node.data?.nextActions)
       ) {
         return true
@@ -643,8 +670,59 @@ export const FlowProvider = ({ children, flow }: Props) => {
     }
 
     return clonedNodes.map((node) => node.data)
-  }, [nodes])
+  }, [findNodeIsNextAction, nodes])
+
+  /**
+   * Handles the deletion of nodes.
+   * @param nodeDels - The nodes to be deleted.
+   */
+  const handleNodesDelete: OnNodesDelete = useCallback(
+    (nodeDels) => {
+      const nodeToDelete = nodeDels[0]
 
+      // get node is have next action to remove this next action
+      const nodeIsHaveNextAction = findNodeIsNextAction(nodes, nodeToDelete)
+
+      if (!nodeIsHaveNextAction) {
+        return
+      }
+
+      // remove next action from node is have next action
+      if (nodeIsHaveNextAction?.data.nextAction) {
+        delete nodeIsHaveNextAction.data.nextAction
+      }
+
+      // remove next actions from node is have next action
+      if (nodeIsHaveNextAction?.data.nextActions) {
+        // remove next action from next actions
+        nodeIsHaveNextAction.data.nextActions =
+          nodeIsHaveNextAction.data.nextActions.filter(
+            (na: any) => na.id !== nodeToDelete.id,
+          )
+
+        // remove next actions if it empty
+        if (nodeIsHaveNextAction.data.nextActions.length === 0) {
+          delete nodeIsHaveNextAction.data.nextActions
+        }
+      }
+
+      setNodes((nodes) => {
+        return nodes.map((node) => {
+          if (node.id === nodeIsHaveNextAction.id) {
+            return nodeIsHaveNextAction
+          }
+
+          return node
+        })
+      })
+    },
+    [findNodeIsNextAction, nodes, setNodes],
+  )
+
+  /**
+   * Deletes an edge by its ID.
+   * @param id - The ID of the edge to delete.
+   */
   const handleDeleteEdgeById = useCallback(
     (id: string) => {
       const edge = getEdge(id)
@@ -727,6 +805,7 @@ export const FlowProvider = ({ children, flow }: Props) => {
         setNodes,
         setEdges,
         handleDeleteEdgeById,
+        handleNodesDelete,
       }}
     >
       {children}

client/src/components/pages/flow-detail/node-dialog/message.tsx

@@ -80,7 +80,7 @@ export const MessageDialogContent = () => {
   return (
     <div className='space-y-3'>
       <div className='space-y-2'>
-        <Label>{t('message_dialog.responses')}</Label>
+        <Label required>{t('message_dialog.responses')}</Label>
         <Select value={messageType} onValueChange={handleSelectChange}>
           <SelectTrigger>
             <SelectValue placeholder='Select a fruit' />
@@ -98,7 +98,7 @@ export const MessageDialogContent = () => {
       </div>
       {messageType !== EMessageTypes.LIST_BUTTON && (
         <div className='space-y-2'>
-          <Label>{t('message_dialog.forms.bot_response.label')}</Label>
+          <Label required>{t('message_dialog.forms.bot_response.label')}</Label>
           {messageType === EMessageTypes.TEXT && (
             <Input
               placeholder={t('message_dialog.forms.bot_response.placeholder')}