diff --git a/web/app/components/workflow/variable-inspect/right.tsx b/web/app/components/workflow/variable-inspect/right.tsx
index bf8b86bcc7..07f381d941 100644
--- a/web/app/components/workflow/variable-inspect/right.tsx
+++ b/web/app/components/workflow/variable-inspect/right.tsx
@@ -9,6 +9,7 @@ import { useStore } from '../store'
 import { BlockEnum } from '../types'
 import useCurrentVars from '../hooks/use-current-vars'
 import Empty from './empty'
+import ValueContent from './value-content'
 import ActionButton from '@/app/components/base/action-button'
 import Badge from '@/app/components/base/badge'
 import CopyFeedback from '@/app/components/base/copy-feedback'
@@ -32,6 +33,7 @@ export const currentVar = {
   // var_type: 'file',
   // var_type: 'array[file]',
   value: 'tuituitui',
+  edited: true,
 }
 
 type Props = {
@@ -90,15 +92,19 @@ const Right = ({ handleOpenMenu }: Props) => {
         <div className='flex shrink-0 items-center gap-1'>
           {current && (
             <>
-              <Badge>
-                <span className='ml-[2.5px] mr-[4.5px] h-[3px] w-[3px] rounded bg-text-accent-secondary'></span>
-                <span className='system-2xs-semibold-uupercase'>{t('workflow.debug.variableInspect.edited')}</span>
-              </Badge>
-              <Tooltip popupContent={t('workflow.debug.variableInspect.reset')}>
-                <ActionButton onClick={resetValue}>
-                  <RiArrowGoBackLine className='h-4 w-4' />
-                </ActionButton>
-              </Tooltip>
+              {current.edited && (
+                <Badge>
+                  <span className='ml-[2.5px] mr-[4.5px] h-[3px] w-[3px] rounded bg-text-accent-secondary'></span>
+                  <span className='system-2xs-semibold-uupercase'>{t('workflow.debug.variableInspect.edited')}</span>
+                </Badge>
+              )}
+              {current.edited && (
+                <Tooltip popupContent={t('workflow.debug.variableInspect.reset')}>
+                  <ActionButton onClick={resetValue}>
+                    <RiArrowGoBackLine className='h-4 w-4' />
+                  </ActionButton>
+                </Tooltip>
+              )}
               {(current.type !== 'environment' || current.var_type !== 'secret') && (
                 <CopyFeedback content={current.value ? JSON.stringify(current.value) : ''} />
               )}
@@ -112,6 +118,7 @@ const Right = ({ handleOpenMenu }: Props) => {
       {/* content */}
       <div className='grow p-2'>
         {!current && <Empty />}
+        {current && <ValueContent />}
       </div>
     </div>
   )
diff --git a/web/app/components/workflow/variable-inspect/value-content.tsx b/web/app/components/workflow/variable-inspect/value-content.tsx
new file mode 100644
index 0000000000..81115b1234
--- /dev/null
+++ b/web/app/components/workflow/variable-inspect/value-content.tsx
@@ -0,0 +1,75 @@
+import { useState } from 'react'
+// import { useTranslation } from 'react-i18next'
+import Textarea from '@/app/components/base/textarea'
+// import cn from '@/utils/classnames'
+
+export const currentVar = {
+  id: 'var-jfkldjjfkldaf-dfhekdfj',
+  type: 'node',
+  // type: 'conversation',
+  // type: 'environment',
+  name: 'out_put',
+  // var_type: 'string',
+  var_type: 'number',
+  // var_type: 'object',
+  // var_type: 'array[string]',
+  // var_type: 'array[number]',
+  // var_type: 'array[object]',
+  // var_type: 'file',
+  // var_type: 'array[file]',
+  // value: 'tuituitui',
+  value: 123,
+  edited: true,
+}
+
+const ValueContent = () => {
+  const current = currentVar
+  const [value, setValue] = useState<any>(current.value ? JSON.stringify(current.value) : '')
+
+  const handleValueChange = (value: string) => {
+    if (current.var_type === 'string')
+      setValue(value)
+
+    if (current.var_type === 'number') {
+      if (/^-?\d+(\.)?(\d+)?$/.test(value)) {
+        console.log(value)
+        setValue(value)
+      }
+      return
+    }
+    if (current.var_type === 'object') {
+      // TODO update object
+    }
+    if (current.var_type === 'array[string]') {
+      // TODO update array[string]
+    }
+    if (current.var_type === 'array[number]') {
+      // TODO update array[number]
+    }
+    if (current.var_type === 'array[object]') {
+      // TODO update array[object]
+    }
+    if (current.var_type === 'file') {
+      // TODO update file
+    }
+    if (current.var_type === 'array[file]') {
+      // TODO update array[file]
+    }
+  }
+
+  return (
+    <div className='flex h-full flex-col gap-3'>
+      {(current.var_type === 'secret' || current.var_type === 'string' || current.var_type === 'number') && (
+        <Textarea
+          readOnly={current.type === 'environment'}
+          disabled={current.type === 'environment'}
+          className='h-full grow'
+          value={value as any}
+          onChange={e => handleValueChange(e.target.value)}
+        />
+      )}
+    </div>
+  )
+}
+
+export default ValueContent