diff --git a/web/app/components/workflow/hooks/use-inspect-vars-crud.ts b/web/app/components/workflow/hooks/use-inspect-vars-crud.ts
index f2bd945c70..10b6924ae6 100644
--- a/web/app/components/workflow/hooks/use-inspect-vars-crud.ts
+++ b/web/app/components/workflow/hooks/use-inspect-vars-crud.ts
@@ -79,7 +79,6 @@ const useInspectVarsCrud = () => {
 
   const editInspectVarValue = useCallback(async (nodeId: string, varId: string, value: any) => {
     await doEditInspectorVar({
-      nodeId,
       varId,
       value,
     })
@@ -101,7 +100,6 @@ const useInspectVarsCrud = () => {
 
   const renameInspectVarName = async (nodeId: string, varId: string, selector: ValueSelector) => {
     await doEditInspectorVar({
-      nodeId,
       varId,
       name: selector[1],
     })
diff --git a/web/app/components/workflow/store/workflow/debug/mock-data.ts b/web/app/components/workflow/store/workflow/debug/mock-data.ts
index 03a37bd264..41a55f3624 100644
--- a/web/app/components/workflow/store/workflow/debug/mock-data.ts
+++ b/web/app/components/workflow/store/workflow/debug/mock-data.ts
@@ -49,4 +49,14 @@ export const systemVars: VarInInspect[] = [
     value: 'Hello robot!',
     edited: false,
   },
+  {
+    id: 'sys2',
+    type: VarInInspectType.system,
+    name: 'user_id',
+    description: '',
+    selector: ['sys', 'user_id'],
+    value_type: VarType.string,
+    value: 'djflakjerlkjdlksfjslakjsdfl',
+    edited: false,
+  },
 ]
diff --git a/web/app/components/workflow/variable-inspect/left.tsx b/web/app/components/workflow/variable-inspect/left.tsx
index e0be722a88..2fec6b1b01 100644
--- a/web/app/components/workflow/variable-inspect/left.tsx
+++ b/web/app/components/workflow/variable-inspect/left.tsx
@@ -11,7 +11,6 @@ import Button from '@/app/components/base/button'
 // import ActionButton from '@/app/components/base/action-button'
 // import Tooltip from '@/app/components/base/tooltip'
 import BlockIcon from '@/app/components/workflow/block-icon'
-import { BubbleX } from '@/app/components/base/icons/src/vender/line/others'
 import { Variable02 } from '@/app/components/base/icons/src/vender/solid/development'
 import Group from './group'
 import useCurrentVars from '../hooks/use-inspect-vars-crud'
@@ -39,6 +38,8 @@ const Left = ({
     deleteAllInspectorVars,
   } = useCurrentVars()
 
+  const showDivider = environmentVariables.length > 0 || conversationVars.length > 0 || systemVars.length > 0
+
   // TODO node selection
   const selectedNode = 3 < 4
 
@@ -69,34 +70,21 @@ const Left = ({
             handleSelect={handleVarSelect}
           />
         )}
-        {/* group CHAT VAR */}
-        <div className='p-0.5'>
-          {/* node item */}
-          <div className='flex h-6 items-center gap-0.5'>
-            <RiArrowRightSLine className='h-3 w-3 rotate-90 text-text-tertiary' />
-            <div className='flex grow cursor-pointer items-center gap-1'>
-              <div className='system-xs-medium-uppercase truncate text-text-tertiary'>{t('workflow.chatVariable.panelTitle')}</div>
-            </div>
-          </div>
-          {/* var item list */}
-          <div className='px-0.5'>
-            <div className={cn('relative flex cursor-pointer items-center gap-1 rounded-md px-3 py-1 hover:bg-state-base-hover')}>
-              <BubbleX className='h-4 w-4 shrink-0 text-util-colors-teal-teal-700' />
-              <div className='system-sm-medium grow truncate text-text-secondary'>chat_history</div>
-              <div className='system-xs-regular shrink-0 text-text-tertiary'>array</div>
-            </div>
-            <div className={cn('relative flex cursor-pointer items-center gap-1 rounded-md px-3 py-1 hover:bg-state-base-hover')}>
-              {selectedNode && <span className='absolute left-1.5 top-[10.5px] h-[3px] w-[3px] rounded-full bg-text-accent-secondary'></span>}
-              <BubbleX className='h-4 w-4 shrink-0 text-util-colors-teal-teal-700' />
-              <div className='system-sm-medium grow truncate text-text-secondary'>custom_chat_history</div>
-              <div className='system-xs-regular shrink-0 text-text-tertiary'>array</div>
-            </div>
-          </div>
-        </div>
+        {/* group SYSTEM VAR */}
+        {conversationVars.length > 0 && (
+          <Group
+            varType={VarInInspectType.system}
+            varList={systemVars}
+            currentVar={currentNodeVar}
+            handleSelect={handleVarSelect}
+          />
+        )}
         {/* divider */}
-        <div className='px-4 py-1'>
-          <div className='h-px bg-divider-subtle'></div>
-        </div>
+        {showDivider && (
+          <div className='px-4 py-1'>
+            <div className='h-px bg-divider-subtle'></div>
+          </div>
+        )}
         {/* group nodes */}
         <div className='p-0.5'>
           {/* node item */}
diff --git a/web/app/components/workflow/variable-inspect/right.tsx b/web/app/components/workflow/variable-inspect/right.tsx
index cb87a3c92d..22a6eefcd6 100644
--- a/web/app/components/workflow/variable-inspect/right.tsx
+++ b/web/app/components/workflow/variable-inspect/right.tsx
@@ -36,8 +36,14 @@ const Right = ({
 
   const {
     resetToLastRunVar,
+    editInspectVarValue,
   } = useCurrentVars()
 
+  const handleValueChange = (varId: string, value: any) => {
+    if (!currentNodeVar) return
+    editInspectVarValue(currentNodeVar.nodeId, varId, value)
+  }
+
   const resetValue = () => {
     if (!currentNodeVar) return
     resetToLastRunVar(currentNodeVar.nodeId, currentNodeVar.var.name)
@@ -109,7 +115,7 @@ const Right = ({
       {/* content */}
       <div className='grow p-2'>
         {!currentNodeVar && <Empty />}
-        {currentNodeVar && <ValueContent currentVar={currentNodeVar.var} />}
+        {currentNodeVar && <ValueContent currentVar={currentNodeVar.var} handleValueChange={handleValueChange} />}
       </div>
     </div>
   )
diff --git a/web/app/components/workflow/variable-inspect/value-content.tsx b/web/app/components/workflow/variable-inspect/value-content.tsx
index 4a00b5479e..418fe97627 100644
--- a/web/app/components/workflow/variable-inspect/value-content.tsx
+++ b/web/app/components/workflow/variable-inspect/value-content.tsx
@@ -1,6 +1,5 @@
 import { useEffect, useRef, useState } from 'react'
-// import { useTranslation } from 'react-i18next'
-import { debounce } from 'lodash-es'
+import { useDebounceFn } from 'ahooks'
 import Textarea from '@/app/components/base/textarea'
 import SchemaEditor from '@/app/components/workflow/nodes/llm/components/json-schema-config-modal/schema-editor'
 import { FileUploaderInAttachmentWrapper } from '@/app/components/base/file-uploader'
@@ -23,38 +22,14 @@ import type { VarInInspect } from '@/types/workflow'
 import { VarInInspectType } from '@/types/workflow'
 import cn from '@/utils/classnames'
 
-export const MOCK_DATA = {
-  id: 'var-jfkldjjfkldaf-dfhekdfj',
-  type: 'node',
-  // type: 'conversation',
-  // type: 'environment',
-  name: 'out_put',
-  // value_type: 'string',
-  // value_type: 'number',
-  // value_type: 'object',
-  // value_type: 'array[string]',
-  // value_type: 'array[number]',
-  // value_type: 'array[object]',
-  // value_type: 'file',
-  value_type: 'array[file]',
-  // value: 'tuituitui',
-  // value: ['aaa', 'bbb', 'ccc'],
-  // value: {
-  //   abc: '123',
-  //   def: 456,
-  //   fff: true,
-  // },
-  value: [],
-  edited: true,
-}
-
 type Props = {
   currentVar: VarInInspect
+  handleValueChange: (varId: string, value: any) => void
 }
 
 const ValueContent = ({
-  // currentVar = MOCK_DATA as any, // TODO remove this line
   currentVar,
+  handleValueChange,
 }: Props) => {
   const contentContainerRef = useRef<HTMLDivElement>(null)
   const errorMessageRef = useRef<HTMLDivElement>(null)
@@ -62,6 +37,7 @@ const ValueContent = ({
   const showTextEditor = currentVar.value_type === 'secret' || currentVar.value_type === 'string' || currentVar.value_type === 'number'
   const showJSONEditor = currentVar.value_type === 'object' || currentVar.value_type === 'array[string]' || currentVar.value_type === 'array[number]' || currentVar.value_type === 'array[object]'
   const showFileEditor = currentVar.value_type === 'file' || currentVar.value_type === 'array[file]'
+  const textEditorDisabled = currentVar.type === VarInInspectType.environment || (currentVar.type === VarInInspectType.system && currentVar.name !== 'query')
 
   const [value, setValue] = useState<any>()
   const [jsonSchema, setJsonSchema] = useState()
@@ -77,8 +53,11 @@ const ValueContent = ({
       : [],
   )
 
+  const { run: debounceValueChange } = useDebounceFn(handleValueChange, { wait: 500 })
+
   // update default value when id changed
   useEffect(() => {
+    console.log('currentVar', currentVar)
     if (showTextEditor) {
       if (!currentVar.value)
         return setValue('')
@@ -107,7 +86,7 @@ const ValueContent = ({
       if (/^-?\d+(\.)?(\d+)?$/.test(value))
         setValue(value)
     }
-    // TODO call api of value update
+    debounceValueChange(currentVar.id, value)
   }
 
   const jsonValueValidate = (value: string, type: string) => {
@@ -152,21 +131,26 @@ const ValueContent = ({
     if (jsonValueValidate(value, currentVar.value_type)) {
       const parsed = JSON.parse(value)
       setJsonSchema(parsed)
-      // TODO call api of value update
+      debounceValueChange(currentVar.id, parsed)
     }
   }
 
-  const handleFileChange = (value: any) => {
-    console.log('value', value)
+  const fileValueValidate = (fileList: any[]) => {
+    if (fileList.every(file => file.upload_file_id))
+      return true
+    return false
+  }
+
+  const handleFileChange = (value: any[]) => {
     setFileValue(value)
-    // TODO check every file upload progress
+    // check every file upload progress
     // invoke update api after every file uploaded
-    if (currentVar.value_type === 'file') {
-      // TODO call api of value update
-    }
-    if (currentVar.value_type === 'array[file]') {
-      // TODO call api of value update
-    }
+    if (!fileValueValidate(value))
+      return
+    if (currentVar.value_type === 'file')
+      debounceValueChange(currentVar.id, value[0])
+    if (currentVar.value_type === 'array[file]')
+      debounceValueChange(currentVar.id, value)
   }
 
   // get editor height
@@ -194,8 +178,8 @@ const ValueContent = ({
       <div className={cn('grow')} style={{ height: `${editorHeight}px` }}>
         {showTextEditor && (
           <Textarea
-            readOnly={currentVar.type === VarInInspectType.environment}
-            disabled={currentVar.type === VarInInspectType.environment}
+            readOnly={textEditorDisabled}
+            disabled={textEditorDisabled}
             className='h-full'
             value={value as any}
             onChange={e => handleTextChange(e.target.value)}
@@ -206,7 +190,7 @@ const ValueContent = ({
             className='overflow-y-auto'
             hideTopMenu
             schema={json}
-            onUpdate={debounce(handleEditorChange)}
+            onUpdate={handleEditorChange}
           />
         )}
         {showFileEditor && (
diff --git a/web/service/use-workflow.ts b/web/service/use-workflow.ts
index ecdd247972..92287d4824 100644
--- a/web/service/use-workflow.ts
+++ b/web/service/use-workflow.ts
@@ -169,7 +169,7 @@ export const useSysVarValues = (appId: string) => {
       return Promise.resolve(systemVars.map((item) => {
         return {
           ...item,
-          value: `${item.value}${index++}`,
+          value: item.value_type === 'string' ? `${item.value}${index++}` : item.value,
         }
       }))
     },
@@ -212,7 +212,6 @@ export const useEditInspectorVar = (appId: string) => {
   return useMutation({
     mutationKey: [NAME_SPACE, 'edit inspector var', appId],
     mutationFn: async (params: {
-      nodeId: string
       varId: string
       name?: string
       value?: any