diff --git a/web/app/components/workflow/nodes/_base/components/next-step/add.tsx b/web/app/components/workflow/nodes/_base/components/next-step/add.tsx
index e99382bbc8..6691d0c2ed 100644
--- a/web/app/components/workflow/nodes/_base/components/next-step/add.tsx
+++ b/web/app/components/workflow/nodes/_base/components/next-step/add.tsx
@@ -56,10 +56,10 @@ const Add = ({
         {
           branchName && (
             <div
-              className='absolute left-1 right-1 -top-[7.5px] flex items-center px-0.5 h-3 bg-white text-[10px] text-gray-500 font-semibold rounded-[5px] truncate'
+              className='absolute left-1 right-1 -top-[7.5px] flex items-center h-3 text-[10px] text-gray-500 font-semibold'
               title={branchName.toLocaleUpperCase()}
             >
-              {branchName.toLocaleUpperCase()}
+              <div className='inline-block px-0.5 rounded-[5px] bg-white truncate'>{branchName.toLocaleUpperCase()}</div>
             </div>
           )
         }
diff --git a/web/app/components/workflow/nodes/_base/components/next-step/item.tsx b/web/app/components/workflow/nodes/_base/components/next-step/item.tsx
index e2d2f9e67e..e4e200e66e 100644
--- a/web/app/components/workflow/nodes/_base/components/next-step/item.tsx
+++ b/web/app/components/workflow/nodes/_base/components/next-step/item.tsx
@@ -64,10 +64,10 @@ const Item = ({
       {
         branchName && (
           <div
-            className='absolute left-1 right-1 -top-[7.5px] flex items-center px-0.5 h-3 bg-white text-[10px] text-gray-500 font-semibold rounded-[5px] truncate'
+            className='absolute left-1 right-1 -top-[7.5px] flex items-center h-3 text-[10px] text-gray-500 font-semibold'
             title={branchName.toLocaleUpperCase()}
           >
-            {branchName.toLocaleUpperCase()}
+            <div className='inline-block px-0.5 rounded-[5px] bg-white truncate'>{branchName.toLocaleUpperCase()}</div>
           </div>
         )
       }
diff --git a/web/app/components/workflow/panel/debug-and-preview/chat-wrapper.tsx b/web/app/components/workflow/panel/debug-and-preview/chat-wrapper.tsx
index de87839001..642ef10d09 100644
--- a/web/app/components/workflow/panel/debug-and-preview/chat-wrapper.tsx
+++ b/web/app/components/workflow/panel/debug-and-preview/chat-wrapper.tsx
@@ -5,8 +5,14 @@ import {
   useImperativeHandle,
   useMemo,
 } from 'react'
-import { useWorkflowStore } from '../../store'
+import { useNodes } from 'reactflow'
+import { BlockEnum } from '../../types'
+import {
+  useStore,
+  useWorkflowStore,
+} from '../../store'
 import { useWorkflowRun } from '../../hooks'
+import type { StartNodeType } from '../../nodes/start/types'
 import UserInput from './user-input'
 import { useChat } from './hooks'
 import type { ChatWrapperRefType } from './index'
@@ -20,9 +26,13 @@ import {
 import { useStore as useAppStore } from '@/app/components/app/store'
 
 const ChatWrapper = forwardRef<ChatWrapperRefType>((_, ref) => {
+  const nodes = useNodes<StartNodeType>()
+  const startNode = nodes.find(node => node.data.type === BlockEnum.Start)
+  const startVariables = startNode?.data.variables
   const appDetail = useAppStore(s => s.appDetail)
   const workflowStore = useWorkflowStore()
   const featuresStore = useFeaturesStore()
+  const inputs = useStore(s => s.inputs)
   const { handleStopRun } = useWorkflowRun()
   const features = featuresStore!.getState().features
 
@@ -49,6 +59,10 @@ const ChatWrapper = forwardRef<ChatWrapperRefType>((_, ref) => {
     handleRestart,
   } = useChat(
     config,
+    {
+      inputs,
+      promptVariables: (startVariables as any) || [],
+    },
     [],
     taskId => stopChatMessageResponding(appDetail!.id, taskId),
   )
@@ -90,7 +104,6 @@ const ChatWrapper = forwardRef<ChatWrapperRefType>((_, ref) => {
       onSend={doSend}
       onStopResponding={doStop}
       chatNode={<UserInput />}
-      allToolIcons={{}}
       suggestedQuestions={suggestedQuestions}
     />
   )
diff --git a/web/app/components/workflow/panel/debug-and-preview/hooks.ts b/web/app/components/workflow/panel/debug-and-preview/hooks.ts
index 023b4be6b3..25af4a2a66 100644
--- a/web/app/components/workflow/panel/debug-and-preview/hooks.ts
+++ b/web/app/components/workflow/panel/debug-and-preview/hooks.ts
@@ -7,10 +7,15 @@ import {
 import { useTranslation } from 'react-i18next'
 import { produce, setAutoFreeze } from 'immer'
 import { useWorkflowRun } from '../../hooks'
-import type { ChatItem } from '@/app/components/base/chat/types'
+import type {
+  ChatItem,
+  Inputs,
+  PromptVariable,
+} from '@/app/components/base/chat/types'
 import { useToastContext } from '@/app/components/base/toast'
 import { TransferMethod } from '@/types/app'
 import type { VisionFile } from '@/types/app'
+import { replaceStringWithValues } from '@/app/components/app/configuration/prompt-value-panel'
 
 type GetAbortController = (abortController: AbortController) => void
 type SendCallback = {
@@ -18,6 +23,10 @@ type SendCallback = {
 }
 export const useChat = (
   config: any,
+  promptVariablesConfig?: {
+    inputs: Inputs
+    promptVariables: PromptVariable[]
+  },
   prevChatList?: ChatItem[],
   stopChat?: (taskId: string) => void,
 ) => {
@@ -51,6 +60,34 @@ export const useChat = (
     isRespondingRef.current = isResponding
   }, [])
 
+  const getIntroduction = useCallback((str: string) => {
+    return replaceStringWithValues(str, promptVariablesConfig?.promptVariables || [], promptVariablesConfig?.inputs || {})
+  }, [promptVariablesConfig?.inputs, promptVariablesConfig?.promptVariables])
+  useEffect(() => {
+    if (config?.opening_statement) {
+      handleUpdateChatList(produce(chatListRef.current, (draft) => {
+        const index = draft.findIndex(item => item.isOpeningStatement)
+
+        if (index > -1) {
+          draft[index] = {
+            ...draft[index],
+            content: getIntroduction(config.opening_statement),
+            suggestedQuestions: config.suggested_questions,
+          }
+        }
+        else {
+          draft.unshift({
+            id: `${Date.now()}`,
+            content: getIntroduction(config.opening_statement),
+            isAnswer: true,
+            isOpeningStatement: true,
+            suggestedQuestions: config.suggested_questions,
+          })
+        }
+      }))
+    }
+  }, [config?.opening_statement, getIntroduction, config?.suggested_questions, handleUpdateChatList])
+
   const handleStop = useCallback(() => {
     hasStopResponded.current = true
     handleResponding(false)