diff --git a/web/app/components/base/prompt-editor/plugins/component-picker.tsx b/web/app/components/base/prompt-editor/plugins/component-picker.tsx
index 1e8ab2d8ee..0faa499bd4 100644
--- a/web/app/components/base/prompt-editor/plugins/component-picker.tsx
+++ b/web/app/components/base/prompt-editor/plugins/component-picker.tsx
@@ -229,6 +229,7 @@ const ComponentPicker: FC<ComponentPickerProps> = ({
               {
                 workflowVariableShow && !!workflowVariables?.length && (
                   <VarReferenceVars
+                    hideSearch
                     vars={workflowVariables}
                     onChange={handleSelectWorkflowVariable}
                   />
diff --git a/web/app/components/workflow/nodes/_base/components/variable/var-reference-vars.tsx b/web/app/components/workflow/nodes/_base/components/variable/var-reference-vars.tsx
index b646accc3c..b6129f23f8 100644
--- a/web/app/components/workflow/nodes/_base/components/variable/var-reference-vars.tsx
+++ b/web/app/components/workflow/nodes/_base/components/variable/var-reference-vars.tsx
@@ -184,12 +184,14 @@ const ObjectChildren: FC<ObjectChildrenProps> = ({
 }
 
 type Props = {
+  hideSearch?: boolean
   searchBoxClassName?: string
   vars: NodeOutPutVar[]
   onChange: (value: ValueSelector) => void
   itemWidth?: number
 }
 const VarReferenceVars: FC<Props> = ({
+  hideSearch,
   searchBoxClassName,
   vars,
   onChange,
@@ -214,29 +216,35 @@ const VarReferenceVars: FC<Props> = ({
   // max-h-[300px] overflow-y-auto todo: use portal to handle long list
   return (
     <>
-      <div
-        className={cn(searchBoxClassName, 'mb-2 mx-2 flex items-center px-2 rounded-lg bg-gray-100')}
-        onClick={e => e.stopPropagation()}
-      >
-        <SearchLg className='shrink-0 ml-[1px] mr-[5px] w-3.5 h-3.5 text-gray-400' />
-        <input
-          value={searchText}
-          className='grow px-0.5 py-[7px] text-[13px] text-gray-700 bg-transparent appearance-none outline-none caret-primary-600 placeholder:text-gray-400'
-          placeholder={t('workflow.common.searchVar') || ''}
-          onChange={e => setSearchText(e.target.value)}
-          autoFocus
-        />
-        {
-          searchText && (
-            <div
-              className='flex items-center justify-center ml-[5px] w-[18px] h-[18px] cursor-pointer'
-              onClick={() => setSearchText('')}
-            >
-              <XCircle className='w-[14px] h-[14px] text-gray-400' />
-            </div>
-          )
-        }
-      </div>
+      {
+        !hideSearch && (
+          <div
+            className={cn(searchBoxClassName, 'mb-2 mx-2 flex items-center px-2 rounded-lg bg-gray-100')}
+            onClick={e => e.stopPropagation()}
+          >
+
+            <SearchLg className='shrink-0 ml-[1px] mr-[5px] w-3.5 h-3.5 text-gray-400' />
+            <input
+              value={searchText}
+              className='grow px-0.5 py-[7px] text-[13px] text-gray-700 bg-transparent appearance-none outline-none caret-primary-600 placeholder:text-gray-400'
+              placeholder={t('workflow.common.searchVar') || ''}
+              onChange={e => setSearchText(e.target.value)}
+              autoFocus
+            />
+            {
+              searchText && (
+                <div
+                  className='flex items-center justify-center ml-[5px] w-[18px] h-[18px] cursor-pointer'
+                  onClick={() => setSearchText('')}
+                >
+                  <XCircle className='w-[14px] h-[14px] text-gray-400' />
+                </div>
+              )
+            }
+          </div>
+        )
+      }
+
       {filteredVars.length > 0
         ? <div>
 
diff --git a/web/app/components/workflow/nodes/answer/panel.tsx b/web/app/components/workflow/nodes/answer/panel.tsx
index 60ffa4e09d..b98bcfcaac 100644
--- a/web/app/components/workflow/nodes/answer/panel.tsx
+++ b/web/app/components/workflow/nodes/answer/panel.tsx
@@ -3,13 +3,9 @@ import React from 'react'
 import { useTranslation } from 'react-i18next'
 import useConfig from './use-config'
 import type { AnswerNodeType } from './types'
-import VarList from '@/app/components/workflow/nodes/_base/components/variable/var-list'
-import Field from '@/app/components/workflow/nodes/_base/components/field'
-import AddButton from '@/app/components/base/button/add-button'
-import Split from '@/app/components/workflow/nodes/_base/components/split'
 import Editor from '@/app/components/workflow/nodes/_base/components/prompt/editor'
 import type { NodePanelProps } from '@/app/components/workflow/types'
-
+import useAvailableVarList from '@/app/components/workflow/nodes/_base/hooks/use-available-var-list'
 const i18nPrefix = 'workflow.nodes.answer'
 
 const Panel: FC<NodePanelProps<AnswerNodeType>> = ({
@@ -21,29 +17,17 @@ const Panel: FC<NodePanelProps<AnswerNodeType>> = ({
   const {
     readOnly,
     inputs,
-    handleVarListChange,
-    handleAddVariable,
     handleAnswerChange,
     filterVar,
   } = useConfig(id, data)
 
+  const availableVarList = useAvailableVarList(id, {
+    onlyLeafNodeVar: false,
+    filterVar,
+  })
+
   return (
     <div className='mt-2 px-4 space-y-4'>
-      <Field
-        title={t(`${i18nPrefix}.outputVars`)}
-        operations={
-          !readOnly ? <AddButton onClick={handleAddVariable} /> : undefined
-        }
-      >
-        <VarList
-          nodeId={id}
-          readonly={readOnly}
-          list={inputs.variables}
-          onChange={handleVarListChange}
-          filterVar={filterVar}
-        />
-      </Field>
-      <Split />
       <Editor
         readOnly={readOnly}
         justVar
diff --git a/web/app/components/workflow/nodes/llm/components/config-prompt.tsx b/web/app/components/workflow/nodes/llm/components/config-prompt.tsx
index a928f3fe47..4b44bc185c 100644
--- a/web/app/components/workflow/nodes/llm/components/config-prompt.tsx
+++ b/web/app/components/workflow/nodes/llm/components/config-prompt.tsx
@@ -48,7 +48,6 @@ const ConfigPrompt: FC<Props> = ({
     onlyLeafNodeVar: false,
     filterVar,
   })
-  // console.log('availableVarList', availableVarList)
 
   const handleChatModePromptChange = useCallback((index: number) => {
     return (prompt: string) => {
@@ -172,6 +171,7 @@ const ConfigPrompt: FC<Props> = ({
               isChatApp={isChatApp}
               isShowContext={isShowContext}
               hasSetBlockStatus={hasSetBlockStatus}
+              nodesOutputVars={availableVarList}
             />
           </div>
         )}