diff --git a/web/app/components/base/icons/assets/vender/solid/arrows/expand-04.svg b/web/app/components/base/icons/assets/vender/solid/arrows/expand-04.svg
new file mode 100644
index 0000000000..8afe25c1c8
--- /dev/null
+++ b/web/app/components/base/icons/assets/vender/solid/arrows/expand-04.svg
@@ -0,0 +1,5 @@
+<svg width="14" height="15" viewBox="0 0 14 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Icon">
+<path id="Icon_2" d="M11.6667 8.66667V10.3C11.6667 10.9534 11.6667 11.2801 11.5395 11.5297C11.4277 11.7492 11.2492 11.9277 11.0297 12.0395C10.7801 12.1667 10.4534 12.1667 9.8 12.1667H8.16667M5.83333 2.83333H4.2C3.54661 2.83333 3.21991 2.83333 2.97034 2.96049C2.75082 3.07234 2.57234 3.25082 2.46049 3.47034C2.33333 3.71991 2.33333 4.04661 2.33333 4.7V6.33333M8.75 5.75L12.25 2.25M12.25 2.25H8.75M12.25 2.25V5.75M5.25 9.25L1.75 12.75M1.75 12.75H5.25M1.75 12.75L1.75 9.25" stroke="#667085" stroke-width="1.25" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+</svg>
diff --git a/web/app/components/base/icons/src/vender/solid/arrows/Expand04.json b/web/app/components/base/icons/src/vender/solid/arrows/Expand04.json
new file mode 100644
index 0000000000..25bca84684
--- /dev/null
+++ b/web/app/components/base/icons/src/vender/solid/arrows/Expand04.json
@@ -0,0 +1,39 @@
+{
+	"icon": {
+		"type": "element",
+		"isRootNode": true,
+		"name": "svg",
+		"attributes": {
+			"width": "14",
+			"height": "15",
+			"viewBox": "0 0 14 15",
+			"fill": "none",
+			"xmlns": "http://www.w3.org/2000/svg"
+		},
+		"children": [
+			{
+				"type": "element",
+				"name": "g",
+				"attributes": {
+					"id": "Icon"
+				},
+				"children": [
+					{
+						"type": "element",
+						"name": "path",
+						"attributes": {
+							"id": "Icon_2",
+							"d": "M11.6667 8.66667V10.3C11.6667 10.9534 11.6667 11.2801 11.5395 11.5297C11.4277 11.7492 11.2492 11.9277 11.0297 12.0395C10.7801 12.1667 10.4534 12.1667 9.8 12.1667H8.16667M5.83333 2.83333H4.2C3.54661 2.83333 3.21991 2.83333 2.97034 2.96049C2.75082 3.07234 2.57234 3.25082 2.46049 3.47034C2.33333 3.71991 2.33333 4.04661 2.33333 4.7V6.33333M8.75 5.75L12.25 2.25M12.25 2.25H8.75M12.25 2.25V5.75M5.25 9.25L1.75 12.75M1.75 12.75H5.25M1.75 12.75L1.75 9.25",
+							"stroke": "currentColor",
+							"stroke-width": "1.25",
+							"stroke-linecap": "round",
+							"stroke-linejoin": "round"
+						},
+						"children": []
+					}
+				]
+			}
+		]
+	},
+	"name": "Expand04"
+}
\ No newline at end of file
diff --git a/web/app/components/base/icons/src/vender/solid/arrows/Expand04.tsx b/web/app/components/base/icons/src/vender/solid/arrows/Expand04.tsx
new file mode 100644
index 0000000000..964ed39489
--- /dev/null
+++ b/web/app/components/base/icons/src/vender/solid/arrows/Expand04.tsx
@@ -0,0 +1,16 @@
+// GENERATE BY script
+// DON NOT EDIT IT MANUALLY
+
+import * as React from 'react'
+import data from './Expand04.json'
+import IconBase from '@/app/components/base/icons/IconBase'
+import type { IconBaseProps, IconData } from '@/app/components/base/icons/IconBase'
+
+const Icon = React.forwardRef<React.MutableRefObject<SVGElement>, Omit<IconBaseProps, 'data'>>((
+  props,
+  ref,
+) => <IconBase {...props} ref={ref} data={data as IconData} />)
+
+Icon.displayName = 'Expand04'
+
+export default Icon
diff --git a/web/app/components/base/icons/src/vender/solid/arrows/index.ts b/web/app/components/base/icons/src/vender/solid/arrows/index.ts
index 468f0e52d9..b70b44c355 100644
--- a/web/app/components/base/icons/src/vender/solid/arrows/index.ts
+++ b/web/app/components/base/icons/src/vender/solid/arrows/index.ts
@@ -1,2 +1,3 @@
 export { default as ChevronDown } from './ChevronDown'
+export { default as Expand04 } from './Expand04'
 export { default as HighPriority } from './HighPriority'
diff --git a/web/app/components/workflow/nodes/_base/components/prompt/editor.tsx b/web/app/components/workflow/nodes/_base/components/prompt/editor.tsx
new file mode 100644
index 0000000000..4651b4b27e
--- /dev/null
+++ b/web/app/components/workflow/nodes/_base/components/prompt/editor.tsx
@@ -0,0 +1,108 @@
+'use client'
+import type { FC } from 'react'
+import React, { useCallback } from 'react'
+import cn from 'classnames'
+import copy from 'copy-to-clipboard'
+import { useTranslation } from 'react-i18next'
+import PromptEditorHeightResizeWrap from '@/app/components/app/configuration/config-prompt/prompt-editor-height-resize-wrap'
+import PromptEditor from '@/app/components/base/prompt-editor'
+import { Clipboard, ClipboardCheck } from '@/app/components/base/icons/src/vender/line/files'
+import { Expand04 } from '@/app/components/base/icons/src/vender/solid/arrows'
+import s from '@/app/components/app/configuration/config-prompt/style.module.css'
+
+type Props = {
+  title: string
+  value: string
+  variables: string[]
+  onChange: (value: string) => void
+}
+
+const Editor: FC<Props> = ({
+  title,
+  value,
+  variables,
+  onChange,
+}) => {
+  const { t } = useTranslation()
+
+  const minHeight = 98
+  const [editorHeight, setEditorHeight] = React.useState(minHeight)
+  const [isCopied, setIsCopied] = React.useState(false)
+  const handleCopy = useCallback(() => {
+    copy(value)
+    setIsCopied(true)
+  }, [value])
+  const [isExpanded, setIsExpanded] = React.useState(false)
+  const toggleExpand = useCallback(() => {
+    setIsExpanded(!isExpanded)
+  }, [isExpanded])
+
+  return (
+    <div className={cn(s.gradientBorder, '!rounded-[9px] shadow-md')}>
+      <div className='rounded-lg bg-white'>
+        <div className='pt-1 pl-3 pr-1 flex justify-between h-6 items-center'>
+          <div className='leading-4 text-xs font-semibold text-gray-700 uppercase'>{title}</div>
+          <div className='flex items-center'>
+            <div className='leading-[18px] text-xs font-medium text-gray-500'>{value.length}</div>
+            <div className='w-px h-3 ml-2 mr-3 bg-gray-200'></div>
+            {!isCopied
+              ? (
+                <Clipboard className='mx-1 w-3.5 h-3.5 text-gray-500 cursor-pointer' onClick={handleCopy} />
+              )
+              : (
+                <ClipboardCheck className='mx-1 w-3.5 h-3.5 text-gray-500' />
+              )
+            }
+            <Expand04 className='ml-2 mr-2 w-3.5 h-3.5 text-gray-500 cursor-pointer' onClick={toggleExpand} />
+          </div>
+        </div>
+        <PromptEditorHeightResizeWrap
+          className='px-3 min-h-[102px] overflow-y-auto text-sm text-gray-700'
+          height={editorHeight}
+          minHeight={minHeight}
+          onHeightChange={setEditorHeight}
+          footer={(
+            <div className='pl-4 pb-2 flex'>
+              <div className="h-[18px] leading-[18px] px-1 rounded-md bg-gray-100 text-xs text-gray-500">{'{x} '}{t('workflow.nodes.common.insertVarTip')}</div>
+            </div>
+          )}
+        >
+          <PromptEditor
+            className='min-h-[84px]'
+            value={value}
+            contextBlock={{
+              show: true,
+              selectable: true,
+              datasets: [],
+              onAddContext: () => { },
+            }}
+            variableBlock={{
+              variables: variables.map(item => ({
+                name: item,
+                value: item,
+              })),
+              externalTools: [],
+              onAddExternalTool: () => { },
+            }}
+            historyBlock={{
+              show: true,
+              selectable: true,
+              history: {
+                user: 'user',
+                assistant: 'xxx',
+              },
+              onEditRole: () => { },
+            }}
+            queryBlock={{
+              show: true,
+              selectable: true,
+            }}
+            onChange={onChange}
+            onBlur={() => { }}
+          />
+        </PromptEditorHeightResizeWrap>
+      </div>
+    </div>
+  )
+}
+export default React.memo(Editor)
diff --git a/web/app/components/workflow/nodes/direct-answer/panel.tsx b/web/app/components/workflow/nodes/direct-answer/panel.tsx
index 6e401a9a4e..de80aad42f 100644
--- a/web/app/components/workflow/nodes/direct-answer/panel.tsx
+++ b/web/app/components/workflow/nodes/direct-answer/panel.tsx
@@ -1,8 +1,47 @@
 import type { FC } from 'react'
+import { useTranslation } from 'react-i18next'
+import useConfig from './use-config'
+import { mockData } from './mock'
+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'
+const i18nPrefix = 'workflow.nodes.directAnswer'
 
 const Panel: FC = () => {
+  const { t } = useTranslation()
+  const readOnly = false
+
+  const {
+    inputs,
+    handleVarListChange,
+    handleAddVariable,
+    handleAnswerChange,
+  } = useConfig(mockData)
+
   return (
-    <div>start panel inputs</div>
+    <div className='mt-2 px-4 space-y-4'>
+      <Field
+        title={t(`${i18nPrefix}.inputVars`)}
+        operations={
+          <AddButton onClick={handleAddVariable} />
+        }
+      >
+        <VarList
+          readonly={readOnly}
+          list={inputs.variables}
+          onChange={handleVarListChange}
+        />
+      </Field>
+      <Split />
+      <Editor
+        title={t(`${i18nPrefix}.answer`)}
+        value={inputs.answer}
+        onChange={handleAnswerChange}
+        variables={inputs.variables.map(item => item.variable)}
+      />
+    </div>
   )
 }
 
diff --git a/web/app/components/workflow/nodes/direct-answer/use-config.ts b/web/app/components/workflow/nodes/direct-answer/use-config.ts
new file mode 100644
index 0000000000..9b189e782c
--- /dev/null
+++ b/web/app/components/workflow/nodes/direct-answer/use-config.ts
@@ -0,0 +1,40 @@
+import { useCallback, useState } from 'react'
+import produce from 'immer'
+import type { Variable } from '../../types'
+import type { DirectAnswerNodeType } from './types'
+
+const useConfig = (initInputs: DirectAnswerNodeType) => {
+  const [inputs, setInputs] = useState<DirectAnswerNodeType>(initInputs)
+  // variables
+  const handleVarListChange = useCallback((newList: Variable[]) => {
+    const newInputs = produce(inputs, (draft) => {
+      draft.variables = newList
+    })
+    setInputs(newInputs)
+  }, [inputs, setInputs])
+
+  const handleAddVariable = useCallback(() => {
+    const newInputs = produce(inputs, (draft) => {
+      draft.variables.push({
+        variable: '',
+        value_selector: [],
+      })
+    })
+    setInputs(newInputs)
+  }, [inputs, setInputs])
+
+  const handleAnswerChange = useCallback((value: string) => {
+    const newInputs = produce(inputs, (draft) => {
+      draft.answer = value
+    })
+    setInputs(newInputs)
+  }, [inputs, setInputs])
+  return {
+    inputs,
+    handleVarListChange,
+    handleAddVariable,
+    handleAnswerChange,
+  }
+}
+
+export default useConfig
diff --git a/web/app/components/workflow/nodes/llm/panel.tsx b/web/app/components/workflow/nodes/llm/panel.tsx
index 7eaadbb449..d565ff8fa9 100644
--- a/web/app/components/workflow/nodes/llm/panel.tsx
+++ b/web/app/components/workflow/nodes/llm/panel.tsx
@@ -1,8 +1,8 @@
 import type { FC } from 'react'
 import { useTranslation } from 'react-i18next'
-import VarList from '../_base/components/variable/var-list'
 import useConfig from './use-config'
 import { mockData } from './mock'
+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'
diff --git a/web/i18n/lang/workflow.en.ts b/web/i18n/lang/workflow.en.ts
index 55ccd9272e..66df102eb5 100644
--- a/web/i18n/lang/workflow.en.ts
+++ b/web/i18n/lang/workflow.en.ts
@@ -2,6 +2,7 @@ const translation = {
   nodes: {
     common: {
       outputVars: 'Output Variables',
+      insertVarTip: 'Insert Variable',
     },
     directAnswer: {
       answer: 'Answer',
diff --git a/web/i18n/lang/workflow.zh.ts b/web/i18n/lang/workflow.zh.ts
index 283b24c5bf..69115ce64d 100644
--- a/web/i18n/lang/workflow.zh.ts
+++ b/web/i18n/lang/workflow.zh.ts
@@ -2,6 +2,7 @@ const translation = {
   nodes: {
     common: {
       outputVars: '输出变量',
+      insertVarTip: '插入变量',
     },
     directAnswer: {
       answer: '回复',