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 85bc574bba..03a37bd264 100644
--- a/web/app/components/workflow/store/workflow/debug/mock-data.ts
+++ b/web/app/components/workflow/store/workflow/debug/mock-data.ts
@@ -26,6 +26,16 @@ export const conversationVars: VarInInspect[] = [
     value: 'conversation var value...',
     edited: false,
   },
+  {
+    id: 'con2',
+    type: VarInInspectType.conversation,
+    name: 'conversationVar 2',
+    description: '',
+    selector: ['conversation', 'var2'],
+    value_type: VarType.number,
+    value: 456,
+    edited: false,
+  },
 ]
 
 export const systemVars: VarInInspect[] = [
diff --git a/web/app/components/workflow/variable-inspect/group.tsx b/web/app/components/workflow/variable-inspect/group.tsx
index 67a06e331d..d24a94c31f 100644
--- a/web/app/components/workflow/variable-inspect/group.tsx
+++ b/web/app/components/workflow/variable-inspect/group.tsx
@@ -5,79 +5,76 @@ import {
   // RiErrorWarningFill,
   // RiLoader2Line,
 } from '@remixicon/react'
-import { useStore } from '../store'
 // import { BlockEnum } from '../types'
 // 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,
+  BubbleX,
   Env,
 } from '@/app/components/base/icons/src/vender/line/others'
-// import { Variable02 } from '@/app/components/base/icons/src/vender/solid/development'
-// import useCurrentVars from '../hooks/use-inspect-vars-crud'
+import { Variable02 } from '@/app/components/base/icons/src/vender/solid/development'
 import type { currentVarType } from './panel'
+import { VarInInspectType } from '@/types/workflow'
+import type { VarInInspect } from '@/types/workflow'
 import cn from '@/utils/classnames'
 
 type Props = {
-  isEnv?: boolean
-  isChatVar?: boolean
-  isSystem?: boolean
   currentVar?: currentVarType
+  varType: VarInInspectType
+  varList: VarInInspect[]
   handleSelect: (state: any) => void
 }
 
 const Group = ({
-  isEnv,
-  isChatVar,
-  isSystem,
   currentVar,
+  varType,
+  varList,
   handleSelect,
 }: Props) => {
   const { t } = useTranslation()
-
-  const environmentVariables = useStore(s => s.environmentVariables)
-  // const {
-  //   conversationVars,
-  //   systemVars,
-  //   nodesWithInspectVars,
-  // } = useCurrentVars()
-
   const [isCollapsed, setIsCollapsed] = useState(false)
 
+  const isEnv = varType === VarInInspectType.environment
+  const isChatVar = varType === VarInInspectType.conversation
+  const isSystem = varType === VarInInspectType.system
+
   const handleSelectVar = (varItem: any, type?: string) => {
-    if (type === 'env') {
+    if (type === VarInInspectType.environment) {
       handleSelect({
         nodeId: 'env',
         nodeTitle: 'env',
-        nodeType: 'env',
+        nodeType: VarInInspectType.environment,
         var: {
           ...varItem,
-          type: 'env',
+          type: VarInInspectType.environment,
           ...(varItem.value_type === 'secret' ? { value: '******************' } : {}),
         },
       })
       return
     }
-    if (type === 'chat') {
+    if (type === VarInInspectType.conversation) {
       handleSelect({
         nodeId: 'conversation',
         nodeTitle: 'conversation',
-        nodeType: 'conversation',
+        nodeType: VarInInspectType.conversation,
         var: {
           ...varItem,
-          type: 'conversation',
+          type: VarInInspectType.conversation,
         },
       })
       return
     }
-    if (type === 'system') {
+    if (type === VarInInspectType.system) {
       handleSelect({
         nodeId: 'sys',
         nodeTitle: 'sys',
-        nodeType: 'sys',
-        var: varItem,
+        nodeType: VarInInspectType.system,
+        var: {
+          ...varItem,
+          type: VarInInspectType.system,
+        },
       })
       return
     }
@@ -105,18 +102,20 @@ const Group = ({
       {/* var item list */}
       {!isCollapsed && (
         <div className='px-0.5'>
-          {environmentVariables.length > 0 && environmentVariables.map(env => (
+          {varList.length > 0 && varList.map(varItem => (
             <div
-              key={env.id}
+              key={varItem.id}
               className={cn(
                 'relative flex cursor-pointer items-center gap-1 rounded-md px-3 py-1 hover:bg-state-base-hover',
-                env.id === currentVar?.var.id && 'bg-state-base-hover-alt hover:bg-state-base-hover-alt',
+                varItem.id === currentVar?.var.id && 'bg-state-base-hover-alt hover:bg-state-base-hover-alt',
               )}
-              onClick={() => handleSelectVar(env, 'env')}
+              onClick={() => handleSelectVar(varItem, varType)}
             >
-              <Env className='h-4 w-4 shrink-0 text-util-colors-violet-violet-600' />
-              <div className='system-sm-medium grow truncate text-text-secondary'>{env.name}</div>
-              <div className='system-xs-regular shrink-0 text-text-tertiary'>{env.value_type}</div>
+              {isEnv && <Env className='h-4 w-4 shrink-0 text-util-colors-violet-violet-600' />}
+              {isChatVar && <BubbleX className='h-4 w-4 shrink-0 text-util-colors-teal-teal-700' />}
+              {isSystem && <Variable02 className='h-4 w-4 shrink-0 text-text-accent' />}
+              <div className='system-sm-medium grow truncate text-text-secondary'>{varItem.name}</div>
+              <div className='system-xs-regular shrink-0 text-text-tertiary'>{varItem.value_type}</div>
             </div>
           ))}
         </div>
diff --git a/web/app/components/workflow/variable-inspect/left.tsx b/web/app/components/workflow/variable-inspect/left.tsx
index 045a1e859b..e0be722a88 100644
--- a/web/app/components/workflow/variable-inspect/left.tsx
+++ b/web/app/components/workflow/variable-inspect/left.tsx
@@ -16,6 +16,8 @@ import { Variable02 } from '@/app/components/base/icons/src/vender/solid/develop
 import Group from './group'
 import useCurrentVars from '../hooks/use-inspect-vars-crud'
 import type { currentVarType } from './panel'
+import type { VarInInspect } from '@/types/workflow'
+import { VarInInspectType } from '@/types/workflow'
 import cn from '@/utils/classnames'
 
 type Props = {
@@ -52,7 +54,17 @@ const Left = ({
         {/* group ENV */}
         {environmentVariables.length > 0 && (
           <Group
-            isEnv
+            varType={VarInInspectType.environment}
+            varList={environmentVariables as VarInInspect[]}
+            currentVar={currentNodeVar}
+            handleSelect={handleVarSelect}
+          />
+        )}
+        {/* group CHAT VAR */}
+        {conversationVars.length > 0 && (
+          <Group
+            varType={VarInInspectType.conversation}
+            varList={conversationVars}
             currentVar={currentNodeVar}
             handleSelect={handleVarSelect}
           />
diff --git a/web/app/components/workflow/variable-inspect/right.tsx b/web/app/components/workflow/variable-inspect/right.tsx
index 58e59bbee5..cb87a3c92d 100644
--- a/web/app/components/workflow/variable-inspect/right.tsx
+++ b/web/app/components/workflow/variable-inspect/right.tsx
@@ -16,7 +16,9 @@ import CopyFeedback from '@/app/components/base/copy-feedback'
 import Tooltip from '@/app/components/base/tooltip'
 import BlockIcon from '@/app/components/workflow/block-icon'
 import { BubbleX, Env } from '@/app/components/base/icons/src/vender/line/others'
+import { Variable02 } from '@/app/components/base/icons/src/vender/solid/development'
 import type { currentVarType } from './panel'
+import { VarInInspectType } from '@/types/workflow'
 import cn from '@/utils/classnames'
 
 type Props = {
@@ -53,13 +55,16 @@ const Right = ({
         <div className='flex w-0 grow items-center gap-1'>
           {currentNodeVar && (
             <>
-              {currentNodeVar.nodeType === 'env' && (
+              {currentNodeVar.nodeType === VarInInspectType.environment && (
                 <Env className='h-4 w-4 shrink-0 text-util-colors-violet-violet-600' />
               )}
-              {currentNodeVar.nodeType === 'conversation' && (
+              {currentNodeVar.nodeType === VarInInspectType.conversation && (
                 <BubbleX className='h-4 w-4 shrink-0 text-util-colors-teal-teal-700' />
               )}
-              {currentNodeVar.nodeType !== 'env' && currentNodeVar.nodeType !== 'conversation' && currentNodeVar.nodeType !== 'sys' && (
+              {currentNodeVar.nodeType === VarInInspectType.system && (
+                <Variable02 className='h-4 w-4 shrink-0 text-text-accent' />
+              )}
+              {currentNodeVar.nodeType !== VarInInspectType.environment && currentNodeVar.nodeType !== VarInInspectType.conversation && currentNodeVar.nodeType !== VarInInspectType.system && (
                 <>
                   <BlockIcon
                     className='shrink-0'
diff --git a/web/app/components/workflow/variable-inspect/value-content.tsx b/web/app/components/workflow/variable-inspect/value-content.tsx
index 132d299c82..4a00b5479e 100644
--- a/web/app/components/workflow/variable-inspect/value-content.tsx
+++ b/web/app/components/workflow/variable-inspect/value-content.tsx
@@ -198,7 +198,7 @@ const ValueContent = ({
             disabled={currentVar.type === VarInInspectType.environment}
             className='h-full'
             value={value as any}
-            onChange={debounce(e => handleTextChange(e.target.value))}
+            onChange={e => handleTextChange(e.target.value)}
           />
         )}
         {showJSONEditor && (
diff --git a/web/service/use-workflow.ts b/web/service/use-workflow.ts
index e1ec169e7f..ecdd247972 100644
--- a/web/service/use-workflow.ts
+++ b/web/service/use-workflow.ts
@@ -147,7 +147,7 @@ export const useConversationVarValues = (appId: string) => {
       return Promise.resolve(conversationVars.map((item) => {
         return {
           ...item,
-          value: `${item.value}${index++}`,
+          value: item.value_type === 'string' ? `${item.value}${index++}` : item.value,
         }
       }))
     },