feat: add select input support to the conversation opener (#24043)

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'
@@ -185,12 +186,25 @@ const OpeningSettingModal = ({
           <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>