From ccf0a5752d360191045532975eda44e9529aed2b Mon Sep 17 00:00:00 2001
From: jZonG <jzongcode@gmail.com>
Date: Fri, 18 Apr 2025 11:52:42 +0800
Subject: [PATCH] variable inspect button

---
 .../components/workflow/operator/index.tsx    |  2 +
 .../workflow/variable-inspect/trigger.tsx     | 53 +++++++++++++++++++
 2 files changed, 55 insertions(+)
 create mode 100644 web/app/components/workflow/variable-inspect/trigger.tsx

diff --git a/web/app/components/workflow/operator/index.tsx b/web/app/components/workflow/operator/index.tsx
index c762899902..702f94184b 100644
--- a/web/app/components/workflow/operator/index.tsx
+++ b/web/app/components/workflow/operator/index.tsx
@@ -2,6 +2,7 @@ import { memo, useEffect, useMemo, useRef } from 'react'
 import { MiniMap } from 'reactflow'
 import UndoRedo from '../header/undo-redo'
 import ZoomInOut from './zoom-in-out'
+import Trigger from '../variable-inspect/trigger'
 import { useStore } from '../store'
 
 export type OperatorProps = {
@@ -49,6 +50,7 @@ const Operator = ({ handleUndo, handleRedo }: OperatorProps) => {
     >
       <div className='flex justify-between px-1 pb-2'>
         <UndoRedo handleUndo={handleUndo} handleRedo={handleRedo} />
+        <Trigger />
         <div className='relative'>
           <MiniMap
             pannable
diff --git a/web/app/components/workflow/variable-inspect/trigger.tsx b/web/app/components/workflow/variable-inspect/trigger.tsx
new file mode 100644
index 0000000000..27a06d5f0f
--- /dev/null
+++ b/web/app/components/workflow/variable-inspect/trigger.tsx
@@ -0,0 +1,53 @@
+import type { FC } from 'react'
+import { RiLoader2Line, RiStopCircleFill } from '@remixicon/react'
+import Tooltip from '@/app/components/base/tooltip'
+import cn from '@/utils/classnames'
+
+const VariableInspectTrigger: FC = () => {
+  return (
+    <div className={cn('flex items-center gap-1')}>
+      {/* view button */}
+      <div
+        className='system-2xs-semibold-uppercase flex h-5 cursor-pointer items-center gap-1 rounded-md border-[0.5px] border-effects-highlight bg-components-actionbar-bg px-2 text-text-tertiary shadow-lg backdrop-blur-sm hover:bg-background-default-hover'
+        // onClick={() => {}}
+      >
+        Variable inspect
+      </div>
+      {/* caching button */}
+      <div
+        className='system-xs-medium flex h-6 cursor-pointer items-center gap-1 rounded-md border-[0.5px] border-effects-highlight bg-components-actionbar-bg px-2 text-text-accent shadow-lg backdrop-blur-sm hover:bg-components-actionbar-bg-accent'
+        // onClick={() => {}}
+      >
+        <RiLoader2Line className='h-4 w-4' />
+        <span className='text-text-accent'>Caching running status</span>
+      </div>
+      {/* stop button */}
+      <Tooltip
+        popupContent={'Stop run'}
+      >
+        <div
+          className='flex h-6 cursor-pointer items-center rounded-md border-[0.5px] border-effects-highlight bg-components-actionbar-bg px-1 shadow-lg backdrop-blur-sm hover:bg-components-actionbar-bg-accent'
+          // onClick={() => {}}
+        >
+          <RiStopCircleFill className='h-4 w-4 text-text-accent' />
+        </div>
+      </Tooltip>
+      {/* finish button */}
+      <div
+        className='system-xs-medium flex h-6 cursor-pointer items-center gap-1 rounded-md border-[0.5px] border-effects-highlight bg-components-actionbar-bg px-2 text-text-accent shadow-lg backdrop-blur-sm hover:bg-components-actionbar-bg-accent'
+        // onClick={() => {}}
+      >
+        View cached variables
+      </div>
+      {/* clear button */}
+      <div
+        className='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'
+        // onClick={() => {}}
+      >
+        Clear
+      </div>
+    </div>
+  )
+}
+
+export default VariableInspectTrigger