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/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>