fix: specail panel not show

web/app/components/workflow/nodes/_base/components/before-run-form/index.tsx

@@ -3,7 +3,6 @@ import type { FC } from 'react'
 import React, { useEffect } from 'react'
 import { useTranslation } from 'react-i18next'
 import {
-  RiCloseLine,
   RiLoader2Line,
 } from '@remixicon/react'
 import type { Props as FormProps } from './form'
@@ -20,8 +19,7 @@ import { getProcessedFiles } from '@/app/components/base/file-uploader/utils'
 import type { BlockEnum } from '@/app/components/workflow/types'
 import type { Emoji } from '@/app/components/tools/types'
 import type { SpecialResultPanelProps } from '@/app/components/workflow/run/special-result-panel'
-import SpecialResultPanel from '@/app/components/workflow/run/special-result-panel'
-// import { useWhyDidYouUpdate } from 'ahooks'
+import PanelWrap from './panel-wrap'
 const i18nPrefix = 'workflow.singleRun'
 
 export type BeforeRunFormProps = {
@@ -66,18 +64,14 @@ function formatValue(value: string | any, type: InputVarType) {
 }
 const BeforeRunForm: FC<BeforeRunFormProps> = ({
   nodeName,
-  nodeType,
-  toolIcon,
   onHide,
   onRun,
   onStop,
   runningStatus,
   result,
   forms,
-  showSpecialResultPanel,
   filteredExistVarForms,
   existVarValuesInForms,
-  ...restResultPanelParams
 }) => {
   const { t } = useTranslation()
 
@@ -160,67 +154,47 @@ const BeforeRunForm: FC<BeforeRunFormProps> = ({
     return null
 
   return (
-    <div className='absolute inset-0 z-10 rounded-2xl bg-background-overlay-alt'>
-      <div className='flex h-full flex-col rounded-2xl bg-components-panel-bg'>
-        <div className='flex h-8 shrink-0 items-center justify-between pl-4 pr-3 pt-3'>
-          <div className='truncate text-base font-semibold text-text-primary'>
-            {t(`${i18nPrefix}.testRun`)} {nodeName}
-          </div>
-          <div className='ml-2 shrink-0 cursor-pointer p-1' onClick={() => {
-            onHide()
-          }}>
-            <RiCloseLine className='h-4 w-4 text-text-tertiary ' />
-          </div>
-        </div>
-        {
-          showSpecialResultPanel && (
-            <div className='h-0 grow overflow-y-auto pb-4'>
-              <SpecialResultPanel {...restResultPanelParams} />
+    <PanelWrap
+      nodeName={nodeName}
+      onHide={onHide}
+    >
+      <div className='h-0 grow overflow-y-auto pb-4'>
+        <div className='mt-3 space-y-4 px-4'>
+          {filteredExistVarForms.map((form, index) => (
+            <div key={index}>
+              <Form
+                key={index}
+                className={cn(index < forms.length - 1 && 'mb-4')}
+                {...form}
+              />
+              {index < forms.length - 1 && <Split />}
             </div>
-          )
-        }
-        {
-          !showSpecialResultPanel && (
-            <div className='h-0 grow overflow-y-auto pb-4'>
-              <div className='mt-3 space-y-4 px-4'>
-                {filteredExistVarForms.map((form, index) => (
-                  <div key={index}>
-                    <Form
-                      key={index}
-                      className={cn(index < forms.length - 1 && 'mb-4')}
-                      {...form}
-                    />
-                    {index < forms.length - 1 && <Split />}
-                  </div>
-                ))}
-              </div>
-              <div className='mt-4 flex justify-between space-x-2 px-4' >
-                {isRunning && (
-                  <div
-                    className='cursor-pointer rounded-lg border border-divider-regular bg-components-button-secondary-bg p-2 shadow-xs'
-                    onClick={onStop}
-                  >
-                    <StopCircle className='h-4 w-4 text-text-tertiary' />
-                  </div>
-                )}
-                <Button disabled={!isFileLoaded || isRunning} variant='primary' className='w-0 grow space-x-2' onClick={handleRun}>
-                  {isRunning && <RiLoader2Line className='h-4 w-4 animate-spin' />}
-                  <div>{t(`${i18nPrefix}.${isRunning ? 'running' : 'startRun'}`)}</div>
-                </Button>
-              </div>
-              {isRunning && (
-                <ResultPanel status='running' showSteps={false} />
-              )}
-              {isFinished && (
-                <>
-                  {result}
-                </>
-              )}
+          ))}
+        </div>
+        <div className='mt-4 flex justify-between space-x-2 px-4' >
+          {isRunning && (
+            <div
+              className='cursor-pointer rounded-lg border border-divider-regular bg-components-button-secondary-bg p-2 shadow-xs'
+              onClick={onStop}
+            >
+              <StopCircle className='h-4 w-4 text-text-tertiary' />
             </div>
-          )
-        }
+          )}
+          <Button disabled={!isFileLoaded || isRunning} variant='primary' className='w-0 grow space-x-2' onClick={handleRun}>
+            {isRunning && <RiLoader2Line className='h-4 w-4 animate-spin' />}
+            <div>{t(`${i18nPrefix}.${isRunning ? 'running' : 'startRun'}`)}</div>
+          </Button>
+        </div>
+        {isRunning && (
+          <ResultPanel status='running' showSteps={false} />
+        )}
+        {isFinished && (
+          <>
+            {result}
+          </>
+        )}
       </div>
-    </div>
+    </PanelWrap>
   )
 }
 export default React.memo(BeforeRunForm)

web/app/components/workflow/nodes/_base/components/before-run-form/panel-wrap.tsx

@@ -0,0 +1,41 @@
+'use client'
+import type { FC } from 'react'
+import React from 'react'
+import { useTranslation } from 'react-i18next'
+import {
+  RiCloseLine,
+} from '@remixicon/react'
+
+const i18nPrefix = 'workflow.singleRun'
+
+export type Props = {
+  nodeName: string
+  onHide: () => void
+  children: React.ReactNode
+}
+
+const PanelWrap: FC<Props> = ({
+  nodeName,
+  onHide,
+  children,
+}) => {
+  const { t } = useTranslation()
+  return (
+    <div className='absolute inset-0 z-10 rounded-2xl bg-background-overlay-alt'>
+      <div className='flex h-full flex-col rounded-2xl bg-components-panel-bg'>
+        <div className='flex h-8 shrink-0 items-center justify-between pl-4 pr-3 pt-3'>
+          <div className='truncate text-base font-semibold text-text-primary'>
+            {t(`${i18nPrefix}.testRun`)} {nodeName}
+          </div>
+          <div className='ml-2 shrink-0 cursor-pointer p-1' onClick={() => {
+            onHide()
+          }}>
+            <RiCloseLine className='h-4 w-4 text-text-tertiary ' />
+          </div>
+        </div>
+        {children}
+      </div>
+    </div>
+  )
+}
+export default React.memo(PanelWrap)

web/app/components/workflow/nodes/_base/components/workflow-panel/index.tsx

@@ -54,6 +54,8 @@ import BeforeRunForm from '../before-run-form'
 import { debounce } from 'lodash-es'
 import { NODES_EXTRA_DATA } from '@/app/components/workflow/constants'
 import { useLogs } from '@/app/components/workflow/run/hooks'
+import PanelWrap from '../before-run-form/panel-wrap'
+import SpecialResultPanel from '@/app/components/workflow/run/special-result-panel'
 
 type BasePanelProps = {
   children: ReactNode
@@ -173,7 +175,32 @@ const BasePanel: FC<BasePanelProps> = ({
     return {}
   })()
 
-  if (isShowSingleRun || logParams.showSpecialResultPanel) {
+  if(logParams.showSpecialResultPanel) {
+    return (
+    <div className={cn(
+        'relative mr-1  h-full',
+      )}>
+        <div
+          ref={containerRef}
+          className={cn('flex h-full flex-col rounded-2xl border-[0.5px] border-components-panel-border bg-components-panel-bg shadow-lg', showSingleRunPanel ? 'overflow-hidden' : 'overflow-y-auto')}
+          style={{
+            width: `${nodePanelWidth}px`,
+          }}
+        >
+          <PanelWrap
+            nodeName={data.title}
+            onHide={hideSingleRun}
+          >
+            <div className='h-0 grow overflow-y-auto pb-4'>
+              <SpecialResultPanel {...passedLogParams} />
+            </div>
+          </PanelWrap>
+        </div>
+      </div>
+    )
+  }
+
+  if (isShowSingleRun) {
     return (
       <div className={cn(
         'relative mr-1  h-full',

web/app/components/workflow/nodes/_base/components/workflow-panel/last-run/use-last-run.ts

@@ -182,6 +182,10 @@ const useLastRun = <T>({
         if(!selector || selector.length === 0)
           return
         const [nodeId, varName] = selector.slice(0, 2)
+        if(nodeId === id) { // inner vars like loop vars
+          values[variable] = true
+          return
+        }
         const inspectVarValue = hasSetInspectVar(nodeId, varName, systemVars, conversationVars) // also detect system var , env and  conversation var
         if (inspectVarValue)
           values[variable] = true
@@ -204,6 +208,7 @@ const useLastRun = <T>({
   const getFilteredExistVarForms = (forms: FormProps[]) => {
     if (!forms || forms.length === 0)
       return []
+
     const existVarValuesInForms = getExistVarValuesInForms(forms)
 
     const res = forms.map((form, i) => {

web/app/components/workflow/nodes/loop/use-single-run-form-params.ts

@@ -7,6 +7,7 @@ import type { CaseItem, Condition, LoopNodeType } from './types'
 import { ValueType } from '@/app/components/workflow/types'
 
 type Params = {
+  id: string
   payload: LoopNodeType
   runInputData: Record<string, any>
   runResult: NodeTracing
@@ -16,6 +17,7 @@ type Params = {
 }
 
 const useSingleRunFormParams = ({
+  id,
   payload,
   runInputData,
   runResult,
@@ -138,7 +140,8 @@ const useSingleRunFormParams = ({
       if(loopVariable.value_type === ValueType.variable)
         vars.push(loopVariable.value)
     })
-    return vars
+    const hasFilterLoopVars = vars.filter(item => item[0] !== id)
+    return hasFilterLoopVars
   }
 
   return {

web/app/components/workflow/types.ts

@@ -200,7 +200,7 @@ export type InputVar = {
   options?: string[]
   value_selector?: ValueSelector
   getVarValueFromDependent?: boolean
-  hide: boolean
+  hide?: boolean
 } & Partial<UploadFileSetting>
 
 export type ModelConfig = {