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}