diff --git a/web/app/components/base/features/feature-panel/index.tsx b/web/app/components/base/features/feature-panel/index.tsx
index b8836f8e8f..6d21f76a56 100644
--- a/web/app/components/base/features/feature-panel/index.tsx
+++ b/web/app/components/base/features/feature-panel/index.tsx
@@ -29,7 +29,7 @@ const FeaturePanel = ({
   }, [features])
 
   const showToolFeature = useMemo(() => {
-    return features.moderation.enabled || features.annotation.enabled
+    return features.moderation.enabled
   }, [features])
 
   return (
diff --git a/web/app/components/base/features/store.ts b/web/app/components/base/features/store.ts
index 0a17fb0f55..2e8517b6c0 100644
--- a/web/app/components/base/features/store.ts
+++ b/web/app/components/base/features/store.ts
@@ -39,9 +39,6 @@ export const createFeaturesStore = (initProps?: Partial<FeaturesState>) => {
       moderation: {
         enabled: false,
       },
-      annotation: {
-        enabled: false,
-      },
     },
   }
   return createStore<FeatureStoreState>()(set => ({
diff --git a/web/app/components/base/features/types.ts b/web/app/components/base/features/types.ts
index 987367974e..60f273fbb2 100644
--- a/web/app/components/base/features/types.ts
+++ b/web/app/components/base/features/types.ts
@@ -23,15 +23,6 @@ export type SensitiveWordAvoidance = EnabledOrDisabled & {
   config?: any
 }
 
-export type AnnotationReply = EnabledOrDisabled & {
-  id?: string
-  score_threshold?: number
-  embedding_model?: {
-    embedding_model_name: string
-    embedding_provider_name: string
-  }
-}
-
 export enum FeatureEnum {
   opening = 'opening',
   suggested = 'suggested',
@@ -39,7 +30,6 @@ export enum FeatureEnum {
   speech2text = 'speech2text',
   citation = 'citation',
   moderation = 'moderation',
-  annotation = 'annotation',
 }
 
 export type Features = {
@@ -49,7 +39,6 @@ export type Features = {
   [FeatureEnum.speech2text]: SpeechToText
   [FeatureEnum.citation]: RetrieverResource
   [FeatureEnum.moderation]: SensitiveWordAvoidance
-  [FeatureEnum.annotation]: AnnotationReply
 }
 
 export type OnFeaturesChange = (features: Features) => void
diff --git a/web/app/components/workflow/features.tsx b/web/app/components/workflow/features.tsx
index 8602bbdba5..eba26a70c3 100644
--- a/web/app/components/workflow/features.tsx
+++ b/web/app/components/workflow/features.tsx
@@ -41,10 +41,6 @@ const Features = () => {
           openingStatementProps={{
             onAutoAddPromptVariable: () => {},
           }}
-          annotationProps={{
-            onEmbeddingChange: () => {},
-            onScoreChange: () => {},
-          }}
         />
       </div>
     </div>
diff --git a/web/app/components/workflow/hooks.ts b/web/app/components/workflow/hooks.ts
index ef56e92b11..5d3fe70233 100644
--- a/web/app/components/workflow/hooks.ts
+++ b/web/app/components/workflow/hooks.ts
@@ -112,7 +112,6 @@ export const useWorkflow = () => {
             speech_to_text: features.speech2text,
             retriever_resource: features.citation,
             sensitive_word_avoidance: features.moderation,
-            annotation_reply: features.annotation,
           },
         },
       }).then((res) => {
@@ -156,7 +155,8 @@ export const useWorkflow = () => {
 
   const handleSetViewport = useCallback((viewPort: Viewport) => {
     reactFlow.setViewport(viewPort)
-  }, [reactFlow])
+    handleSyncWorkflowDraft()
+  }, [reactFlow, handleSyncWorkflowDraft])
 
   const handleNodeDragStart = useCallback<NodeDragHandler>(() => {
     const {
@@ -854,6 +854,7 @@ export const useWorkflow = () => {
 
 export const useWorkflowRun = () => {
   const store = useStoreApi()
+  const reactflow = useReactFlow()
 
   const run = useCallback((params: any, callback?: IOtherOptions) => {
     const {
@@ -890,10 +891,22 @@ export const useWorkflowRun = () => {
           useStore.setState({ runningStatus: data.status as WorkflowRunningStatus })
         },
         onNodeStarted: ({ data }) => {
-          const newNodes = produce(getNodes(), (draft) => {
-            const currentNode = draft.find(node => node.id === data.node_id)!
-
-            currentNode.data._runningStatus = NodeRunningStatus.Running
+          const nodes = getNodes()
+          const {
+            getViewport,
+            setViewport,
+          } = reactflow
+          const viewport = getViewport()
+          const currentNodeIndex = nodes.findIndex(node => node.id === data.node_id)
+          const position = nodes[currentNodeIndex].position
+          const zoom = 1
+          setViewport({
+            zoom,
+            x: 200 / viewport.zoom - position.x,
+            y: 200 / viewport.zoom - position.y,
+          })
+          const newNodes = produce(nodes, (draft) => {
+            draft[currentNodeIndex].data._runningStatus = NodeRunningStatus.Running
           })
           setNodes(newNodes)
         },
@@ -908,7 +921,7 @@ export const useWorkflowRun = () => {
         ...callback,
       },
     )
-  }, [store])
+  }, [store, reactflow])
 
   return run
 }
diff --git a/web/app/components/workflow/index.tsx b/web/app/components/workflow/index.tsx
index ff7e467b93..411f3376cf 100644
--- a/web/app/components/workflow/index.tsx
+++ b/web/app/components/workflow/index.tsx
@@ -249,7 +249,6 @@ const WorkflowWrap: FC<WorkflowProps> = ({
     text2speech: features.text_to_speech || { enabled: false },
     citation: features.retriever_resource || { enabled: false },
     moderation: features.sensitive_word_avoidance || { enabled: false },
-    annotation: features.annotation_reply || { enabled: false },
   }
 
   return (
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 628ca10135..0fb1ea973a 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
@@ -1,12 +1,14 @@
 import {
   memo,
   useCallback,
+  useMemo,
 } from 'react'
 import { useStore } from '../../store'
 import UserInput from './user-input'
 import { useChat } from './hooks'
 import Chat from '@/app/components/base/chat/chat'
 import type { OnSend } from '@/app/components/base/chat/types'
+import { useFeaturesStore } from '@/app/components/base/features/hooks'
 
 const ChatWrapper = () => {
   const {
@@ -17,6 +19,20 @@ const ChatWrapper = () => {
     suggestedQuestions,
     handleSend,
   } = useChat()
+  const featuresStore = useFeaturesStore()
+  const features = featuresStore!.getState().features
+
+  const config = useMemo(() => {
+    return {
+      opening_statement: features.opening.opening_statement,
+      suggested_questions: features.opening.suggested_questions,
+      suggested_questions_after_answer: features.suggested,
+      text_to_speech: features.text2speech,
+      speech_to_text: features.speech2text,
+      retriever_resource: features.citation,
+      sensitive_word_avoidance: features.moderation,
+    }
+  }, [features])
 
   const doSend = useCallback<OnSend>((query, files) => {
     handleSend({
@@ -29,6 +45,7 @@ const ChatWrapper = () => {
 
   return (
     <Chat
+      config={config as any}
       chatList={chatList}
       isResponding={isResponding}
       chatContainerclassName='px-4'