diff --git a/web/app/components/base/features/new-feature-panel/conversation-opener/modal.tsx b/web/app/components/base/features/new-feature-panel/conversation-opener/modal.tsx
index 51e33c43d2..53db991e71 100644
--- a/web/app/components/base/features/new-feature-panel/conversation-opener/modal.tsx
+++ b/web/app/components/base/features/new-feature-panel/conversation-opener/modal.tsx
@@ -8,6 +8,7 @@ import Modal from '@/app/components/base/modal'
 import Button from '@/app/components/base/button'
 import Divider from '@/app/components/base/divider'
 import ConfirmAddVar from '@/app/components/app/configuration/config-prompt/confirm-add-var'
+import PromptEditor from '@/app/components/base/prompt-editor'
 import type { OpeningStatement } from '@/app/components/base/features/types'
 import { getInputKeys } from '@/app/components/base/block-input'
 import type { PromptVariable } from '@/models/debug'
@@ -101,7 +102,7 @@ const OpeningSettingModal = ({
             <div>·</div>
             <div>{tempSuggestedQuestions.length}/{MAX_QUESTION_NUM}</div>
           </div>
-          <Divider bgStyle='gradient' className='ml-3 h-px w-0 grow'/>
+          <Divider bgStyle='gradient' className='ml-3 h-px w-0 grow' />
         </div>
         <ReactSortable
           className="space-y-1"
@@ -178,19 +179,32 @@ const OpeningSettingModal = ({
     >
       <div className='mb-6 flex items-center justify-between'>
         <div className='title-2xl-semi-bold text-text-primary'>{t('appDebug.feature.conversationOpener.title')}</div>
-        <div className='cursor-pointer p-1' onClick={onCancel}><RiCloseLine className='h-4 w-4 text-text-tertiary'/></div>
+        <div className='cursor-pointer p-1' onClick={onCancel}><RiCloseLine className='h-4 w-4 text-text-tertiary' /></div>
       </div>
       <div className='mb-8 flex gap-2'>
         <div className='mt-1.5 h-8 w-8 shrink-0 rounded-lg border-components-panel-border bg-util-colors-orange-dark-orange-dark-500 p-1.5'>
           <RiAsterisk className='h-5 w-5 text-text-primary-on-surface' />
         </div>
         <div className='grow rounded-2xl border-t border-divider-subtle bg-chat-bubble-bg p-3 shadow-xs'>
-          <textarea
+          <PromptEditor
             value={tempValue}
-            rows={3}
-            onChange={e => setTempValue(e.target.value)}
-            className="system-md-regular w-full border-0 bg-transparent  px-0 text-text-secondary focus:outline-none"
+            onChange={setTempValue}
             placeholder={t('appDebug.openingStatement.placeholder') as string}
+            variableBlock={{
+              show: true,
+              variables: [
+                // Prompt variables
+                ...promptVariables.map(item => ({
+                  name: item.name || item.key,
+                  value: item.key,
+                })),
+                // Workflow variables
+                ...workflowVariables.map(item => ({
+                  name: item.variable,
+                  value: item.variable,
+                })),
+              ],
+            }}
           />
           {renderQuestions()}
         </div>