Feat/web workflow improvements (#27981)

Co-authored-by: crazywoola <100913391+crazywoola@users.noreply.github.com>
Co-authored-by: johnny0120 <johnny0120@users.noreply.github.com>
Co-authored-by: gemini-code-assist[bot] <176961590+gemini-code-assist[bot]@users.noreply.github.com>
Co-authored-by: Wood <tuiskuwood@outlook.com>

web/app/components/workflow/nodes/_base/node.tsx

@@ -283,24 +283,15 @@ const BaseNode: FC<BaseNodeProps> = ({
             data.type === BlockEnum.Loop && data._loopIndex && LoopIndex
           }
           {
-            isLoading && (
-              <RiLoader2Line className='h-3.5 w-3.5 animate-spin text-text-accent' />
-            )
-          }
-          {
-            (!isLoading && (data._runningStatus === NodeRunningStatus.Succeeded || hasVarValue)) && (
-              <RiCheckboxCircleFill className='h-3.5 w-3.5 text-text-success' />
-            )
-          }
-          {
-            data._runningStatus === NodeRunningStatus.Failed && (
-              <RiErrorWarningFill className='h-3.5 w-3.5 text-text-destructive' />
-            )
-          }
-          {
-            data._runningStatus === NodeRunningStatus.Exception && (
-              <RiAlertFill className='h-3.5 w-3.5 text-text-warning-secondary' />
-            )
+            isLoading
+              ? <RiLoader2Line className='h-3.5 w-3.5 animate-spin text-text-accent' />
+              : data._runningStatus === NodeRunningStatus.Failed
+                ? <RiErrorWarningFill className='h-3.5 w-3.5 text-text-destructive' />
+                : data._runningStatus === NodeRunningStatus.Exception
+                  ? <RiAlertFill className='h-3.5 w-3.5 text-text-warning-secondary' />
+                  : (data._runningStatus === NodeRunningStatus.Succeeded || hasVarValue)
+                    ? <RiCheckboxCircleFill className='h-3.5 w-3.5 text-text-success' />
+                    : null
           }
         </div>
         {

web/app/components/workflow/nodes/if-else/utils.ts

@@ -81,6 +81,17 @@ export const getOperators = (type?: VarType, file?: { key: string }) => {
           ComparisonOperator.empty,
           ComparisonOperator.notEmpty,
         ]
+      case 'related_id':
+        return [
+          ComparisonOperator.is,
+          ComparisonOperator.isNot,
+          ComparisonOperator.contains,
+          ComparisonOperator.notContains,
+          ComparisonOperator.startWith,
+          ComparisonOperator.endWith,
+          ComparisonOperator.empty,
+          ComparisonOperator.notEmpty,
+        ]
     }
     return []
   }

web/app/components/workflow/nodes/question-classifier/components/class-list.tsx

@@ -11,6 +11,7 @@ import type { ValueSelector, Var } from '@/app/components/workflow/types'
 import { ReactSortable } from 'react-sortablejs'
 import { noop } from 'lodash-es'
 import cn from '@/utils/classnames'
+import { RiDraggable } from '@remixicon/react'
 import { ArrowDownRoundFill } from '@/app/components/base/icons/src/vender/solid/general'
 
 const i18nPrefix = 'workflow.nodes.questionClassifiers'
@@ -135,9 +136,13 @@ const ClassList: FC<Props> = ({
                     }}
                   >
                     <div>
+                      {canDrag && <RiDraggable className={cn(
+                        'handle absolute left-2 top-3 hidden h-3 w-3 cursor-pointer text-text-tertiary',
+                        'group-hover:block',
+                      )} />}
                       <Item
                         className={cn(canDrag && 'handle')}
-                        headerClassName={cn(canDrag && 'cursor-grab')}
+                        headerClassName={cn(canDrag && 'cursor-grab group-hover:pl-5')}
                         nodeId={nodeId}
                         key={list[index].id}
                         payload={item}

web/app/components/workflow/variable-inspect/right.tsx

@@ -168,7 +168,7 @@ const Right = ({
           </ActionButton>
         )}
         <div className='flex w-0 grow items-center gap-1'>
-          {currentNodeVar && (
+          {currentNodeVar?.var && (
             <>
               {
                 [VarInInspectType.environment, VarInInspectType.conversation, VarInInspectType.system].includes(currentNodeVar.nodeType as VarInInspectType) && (
@@ -264,14 +264,15 @@ const Right = ({
       </div>
       {/* content */}
       <div className='grow p-2'>
-        {!currentNodeVar && <Empty />}
+        {!currentNodeVar?.var && <Empty />}
         {isValueFetching && (
           <div className='flex h-full items-center justify-center'>
             <Loading />
           </div>
         )}
-        {currentNodeVar && !isValueFetching && (
+        {currentNodeVar?.var && !isValueFetching && (
           <ValueContent
+            key={`${currentNodeVar.nodeId}-${currentNodeVar.var.id}`}
             currentVar={currentNodeVar.var}
             handleValueChange={handleValueChange}
             isTruncated={!!isTruncated}

web/app/components/workflow/variable-inspect/trigger.tsx

@@ -95,7 +95,11 @@ const VariableInspectTrigger: FC = () => {
             className={cn('system-xs-medium flex h-6 cursor-pointer items-center rounded-md border-[0.5px] border-effects-highlight bg-components-actionbar-bg px-1 text-text-tertiary shadow-lg backdrop-blur-sm hover:bg-components-actionbar-bg-accent hover:text-text-accent',
               nodesReadOnly && 'cursor-not-allowed text-text-disabled hover:bg-transparent hover:text-text-disabled',
             )}
-            onClick={handleClearAll}
+            onClick={() => {
+              if (getNodesReadOnly())
+                return
+              handleClearAll()
+            }}
           >
             {t('workflow.debug.variableInspect.trigger.clear')}
           </div>