diff --git a/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/annotations/page.tsx b/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/annotations/page.tsx
index 314b481699..0af2e945f3 100644
--- a/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/annotations/page.tsx
+++ b/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/annotations/page.tsx
@@ -1,6 +1,6 @@
 import React from 'react'
 import Main from '@/app/components/app/log-annotation'
-import { PageType } from '@/app/components/app/configuration/toolbox/annotation/type'
+import { PageType } from '@/app/components/base/features/new-feature-panel/annotation-reply/type'
 
 export type IProps = {
   params: { appId: string }
diff --git a/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/logs/page.tsx b/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/logs/page.tsx
index 47ba846be1..244a357616 100644
--- a/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/logs/page.tsx
+++ b/web/app/(commonLayout)/app/(appDetailLayout)/[appId]/logs/page.tsx
@@ -1,6 +1,6 @@
 import React from 'react'
 import Main from '@/app/components/app/log-annotation'
-import { PageType } from '@/app/components/app/configuration/toolbox/annotation/type'
+import { PageType } from '@/app/components/base/features/new-feature-panel/annotation-reply/type'
 
 const Logs = async () => {
   return (
diff --git a/web/app/components/app/annotation/index.tsx b/web/app/components/app/annotation/index.tsx
index 7025ba9a37..f19828d827 100644
--- a/web/app/components/app/annotation/index.tsx
+++ b/web/app/components/app/annotation/index.tsx
@@ -18,7 +18,7 @@ import Switch from '@/app/components/base/switch'
 import { addAnnotation, delAnnotation, fetchAnnotationConfig as doFetchAnnotationConfig, editAnnotation, fetchAnnotationList, queryAnnotationJobStatus, updateAnnotationScore, updateAnnotationStatus } from '@/service/annotation'
 import Loading from '@/app/components/base/loading'
 import { APP_PAGE_LIMIT } from '@/config'
-import ConfigParamModal from '@/app/components/app/configuration/toolbox/annotation/config-param-modal'
+import ConfigParamModal from '@/app/components/base/features/new-feature-panel/annotation-reply/config-param-modal'
 import type { AnnotationReplyConfig } from '@/models/debug'
 import { sleep } from '@/utils'
 import { useProviderContext } from '@/context/provider-context'
diff --git a/web/app/components/app/app-publisher/features-wrapper.tsx b/web/app/components/app/app-publisher/features-wrapper.tsx
index c5065126f9..d34cecf55f 100644
--- a/web/app/components/app/app-publisher/features-wrapper.tsx
+++ b/web/app/components/app/app-publisher/features-wrapper.tsx
@@ -1,25 +1,86 @@
-import React, { useCallback } from 'react'
+import React, { useCallback, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import produce from 'immer'
 import type { AppPublisherProps } from '@/app/components/app/app-publisher'
+import Confirm from '@/app/components/base/confirm'
 import AppPublisher from '@/app/components/app/app-publisher'
-import { useFeatures } from '@/app/components/base/features/hooks'
+import { useFeatures, useFeaturesStore } from '@/app/components/base/features/hooks'
 import type { ModelAndParameter } from '@/app/components/app/configuration/debug/types'
+import type { FileUpload } from '@/app/components/base/features/types'
+import { Resolution } from '@/types/app'
+import { FILE_EXTS } from '@/app/components/base/prompt-editor/constants'
+import { SupportUploadFileTypes } from '@/app/components/workflow/types'
 
 type Props = Omit<AppPublisherProps, 'onPublish'> & {
   onPublish?: (modelAndParameter?: ModelAndParameter, features?: any) => Promise<any> | any
+  publishedConfig?: any
+  resetAppConfig?: () => void
 }
 
 const FeaturesWrappedAppPublisher = (props: Props) => {
+  const { t } = useTranslation()
   const features = useFeatures(s => s.features)
+  const featuresStore = useFeaturesStore()
+  const [restoreConfirmOpen, setRestoreConfirmOpen] = useState(false)
+  const handleConfirm = useCallback(() => {
+    console.log('resetAppConfig')
+    props.resetAppConfig?.()
+    const {
+      features,
+      setFeatures,
+    } = featuresStore!.getState()
+    const newFeatures = produce(features, (draft) => {
+      draft.moreLikeThis = props.publishedConfig.modelConfig.more_like_this || { enabled: false }
+      draft.opening = {
+        enabled: !!props.publishedConfig.modelConfig.opening_statement,
+        opening_statement: props.publishedConfig.modelConfig.opening_statement || '',
+        suggested_questions: props.publishedConfig.modelConfig.suggested_questions || [],
+      }
+      draft.moderation = props.publishedConfig.modelConfig.sensitive_word_avoidance || { enabled: false }
+      draft.speech2text = props.publishedConfig.modelConfig.speech_to_text || { enabled: false }
+      draft.text2speech = props.publishedConfig.modelConfig.text_to_speech || { enabled: false }
+      draft.suggested = props.publishedConfig.modelConfig.suggested_questions_after_answer || { enabled: false }
+      draft.citation = props.publishedConfig.modelConfig.retriever_resource || { enabled: false }
+      draft.annotationReply = props.publishedConfig.modelConfig.annotation_reply || { enabled: false }
+      draft.file = {
+        image: {
+          detail: props.publishedConfig.modelConfig.file_upload?.image?.detail || Resolution.high,
+          enabled: !!props.publishedConfig.modelConfig.file_upload?.image?.enabled,
+          number_limits: props.publishedConfig.modelConfig.file_upload?.image?.number_limits || 3,
+          transfer_methods: props.publishedConfig.modelConfig.file_upload?.image?.transfer_methods || ['local_file', 'remote_url'],
+        },
+        enabled: !!(props.publishedConfig.modelConfig.file_upload?.enabled || props.publishedConfig.modelConfig.file_upload?.image?.enabled),
+        allowed_file_types: props.publishedConfig.modelConfig.file_upload?.allowed_file_types || [SupportUploadFileTypes.image],
+        allowed_file_extensions: props.publishedConfig.modelConfig.file_upload?.allowed_file_extensions || FILE_EXTS[SupportUploadFileTypes.image].map(ext => `.${ext}`),
+        allowed_file_upload_methods: props.publishedConfig.modelConfig.file_upload?.allowed_file_upload_methods || props.publishedConfig.modelConfig.file_upload?.image?.transfer_methods || ['local_file', 'remote_url'],
+        number_limits: props.publishedConfig.modelConfig.file_upload?.number_limits || props.publishedConfig.modelConfig.file_upload?.image?.number_limits || 3,
+      } as FileUpload
+    })
+    setFeatures(newFeatures)
+    setRestoreConfirmOpen(false)
+  }, [featuresStore, props])
 
   const handlePublish = useCallback((modelAndParameter?: ModelAndParameter) => {
     return props.onPublish?.(modelAndParameter, features)
   }, [features, props])
 
   return (
-    <AppPublisher {...{
-      ...props,
-      onPublish: handlePublish,
-    }}/>
+    <>
+      <AppPublisher {...{
+        ...props,
+        onPublish: handlePublish,
+        onRestore: () => setRestoreConfirmOpen(true),
+      }}/>
+      {restoreConfirmOpen && (
+        <Confirm
+          title={t('appDebug.resetConfig.title')}
+          content={t('appDebug.resetConfig.message')}
+          isShow={restoreConfirmOpen}
+          onConfirm={handleConfirm}
+          onCancel={() => setRestoreConfirmOpen(false)}
+        />
+      )}
+    </>
   )
 }
 
diff --git a/web/app/components/app/configuration/config/index.tsx b/web/app/components/app/configuration/config/index.tsx
index b569a42875..f7fd3cec80 100644
--- a/web/app/components/app/configuration/config/index.tsx
+++ b/web/app/components/app/configuration/config/index.tsx
@@ -7,7 +7,6 @@ import { useFormattingChangedDispatcher } from '../debug/hooks'
 import DatasetConfig from '../dataset-config'
 import HistoryPanel from '../config-prompt/conversation-histroy/history-panel'
 import ConfigVision from '../config-vision'
-import useAnnotationConfig from '../toolbox/annotation/use-annotation-config'
 import AgentTools from './agent/agent-tools'
 import ConfigContext from '@/context/debug-configuration'
 import ConfigPrompt from '@/app/components/app/configuration/config-prompt'
@@ -15,25 +14,18 @@ import ConfigVar from '@/app/components/app/configuration/config-var'
 import { type ModelConfig, type PromptVariable } from '@/models/debug'
 import type { AppType } from '@/types/app'
 import { ModelModeType } from '@/types/app'
-import ConfigParamModal from '@/app/components/app/configuration/toolbox/annotation/config-param-modal'
-import AnnotationFullModal from '@/app/components/billing/annotation-full/modal'
 
 const Config: FC = () => {
   const {
-    appId,
     mode,
     isAdvancedMode,
     modelModeType,
     isAgent,
-    // canReturnToSimpleMode,
-    // setPromptMode,
     hasSetBlockStatus,
     showHistoryModal,
     modelConfig,
     setModelConfig,
     setPrevPromptConfig,
-    annotationConfig,
-    setAnnotationConfig,
   } = useContext(ConfigContext)
   const isChatApp = ['advanced-chat', 'agent-chat', 'chat'].includes(mode)
   const formattingChangedDispatcher = useFormattingChangedDispatcher()
@@ -61,20 +53,6 @@ const Config: FC = () => {
     setModelConfig(newModelConfig)
   }
 
-  const {
-    handleEnableAnnotation,
-    // setScore,
-    // handleDisableAnnotation,
-    isShowAnnotationConfigInit,
-    setIsShowAnnotationConfigInit,
-    isShowAnnotationFullModal,
-    setIsShowAnnotationFullModal,
-  } = useAnnotationConfig({
-    appId,
-    annotationConfig,
-    setAnnotationConfig,
-  })
-
   return (
     <>
       <div
@@ -111,27 +89,6 @@ const Config: FC = () => {
             onShowEditModal={showHistoryModal}
           />
         )}
-
-        <ConfigParamModal
-          appId={appId}
-          isInit
-          isShow={isShowAnnotationConfigInit}
-          onHide={() => {
-            setIsShowAnnotationConfigInit(false)
-            // showChooseFeatureTrue()
-          }}
-          onSave={async (embeddingModel, score) => {
-            await handleEnableAnnotation(embeddingModel, score)
-            setIsShowAnnotationConfigInit(false)
-          }}
-          annotationConfig={annotationConfig}
-        />
-        {isShowAnnotationFullModal && (
-          <AnnotationFullModal
-            show={isShowAnnotationFullModal}
-            onHide={() => setIsShowAnnotationFullModal(false)}
-          />
-        )}
       </div>
     </>
   )
diff --git a/web/app/components/app/configuration/debug/debug-with-multiple-model/chat-item.tsx b/web/app/components/app/configuration/debug/debug-with-multiple-model/chat-item.tsx
index b56e08333f..35289b6be2 100644
--- a/web/app/components/app/configuration/debug/debug-with-multiple-model/chat-item.tsx
+++ b/web/app/components/app/configuration/debug/debug-with-multiple-model/chat-item.tsx
@@ -58,7 +58,7 @@ const ChatItem: FC<ChatItemProps> = ({
       file_upload: features.file,
       suggested_questions_after_answer: features.suggested,
       retriever_resource: features.citation,
-      // ##TODO## annotation_reply
+      annotation_reply: features.annotationReply,
     } as ChatConfig
   }, [configTemplate, features])
   const {
diff --git a/web/app/components/app/configuration/debug/debug-with-single-model/index.tsx b/web/app/components/app/configuration/debug/debug-with-single-model/index.tsx
index c9e83da1c3..b3fef73f5b 100644
--- a/web/app/components/app/configuration/debug/debug-with-single-model/index.tsx
+++ b/web/app/components/app/configuration/debug/debug-with-single-model/index.tsx
@@ -58,7 +58,7 @@ const DebugWithSingleModel = forwardRef<DebugWithSingleModelRefType, DebugWithSi
       file_upload: features.file,
       suggested_questions_after_answer: features.suggested,
       retriever_resource: features.citation,
-      // ##TODO## annotation_reply
+      annotation_reply: features.annotationReply,
     } as ChatConfig
   }, [configTemplate, features])
   const {
diff --git a/web/app/components/app/configuration/index.tsx b/web/app/components/app/configuration/index.tsx
index 7a5aa26a56..94f8c01985 100644
--- a/web/app/components/app/configuration/index.tsx
+++ b/web/app/components/app/configuration/index.tsx
@@ -284,7 +284,7 @@ const Configuration: FC = () => {
     setModelConfig(_publishedConfig.modelConfig)
     setCompletionParams(_publishedConfig.completionParams)
     setDataSets(modelConfig.dataSets || [])
-    // feature
+    // reset feature
     setIntroduction(modelConfig.opening_statement!)
     setMoreLikeThisConfig(modelConfig.more_like_this || {
       enabled: false,
@@ -446,6 +446,7 @@ const Configuration: FC = () => {
       text2speech: modelConfig.text_to_speech || { enabled: false },
       file: {
         image: {
+          detail: modelConfig.file_upload?.image?.detail || Resolution.high,
           enabled: !!modelConfig.file_upload?.image?.enabled,
           number_limits: modelConfig.file_upload?.image?.number_limits || 3,
           transfer_methods: modelConfig.file_upload?.image?.transfer_methods || ['local_file', 'remote_url'],
@@ -741,12 +742,6 @@ const Configuration: FC = () => {
     return true
   }
 
-  const [restoreConfirmOpen, setRestoreConfirmOpen] = useState(false)
-  const resetAppConfig = () => {
-    syncToPublishedConfig(publishedConfig!)
-    setRestoreConfirmOpen(false)
-  }
-
   const [showUseGPT4Confirm, setShowUseGPT4Confirm] = useState(false)
 
   const {
@@ -907,7 +902,8 @@ const Configuration: FC = () => {
                       debugWithMultipleModel,
                       multipleModelConfigs,
                       onPublish,
-                      onRestore: () => setRestoreConfirmOpen(true),
+                      publishedConfig: publishedConfig!,
+                      resetAppConfig: () => syncToPublishedConfig(publishedConfig!),
                     }} />
                   </div>
                 </div>
@@ -933,15 +929,6 @@ const Configuration: FC = () => {
               </div>}
             </div>
           </div>
-          {restoreConfirmOpen && (
-            <Confirm
-              title={t('appDebug.resetConfig.title')}
-              content={t('appDebug.resetConfig.message')}
-              isShow={restoreConfirmOpen}
-              onConfirm={resetAppConfig}
-              onCancel={() => setRestoreConfirmOpen(false)}
-            />
-          )}
           {showUseGPT4Confirm && (
             <Confirm
               title={t('appDebug.trailUseGPT4Info.title')}
diff --git a/web/app/components/app/log-annotation/index.tsx b/web/app/components/app/log-annotation/index.tsx
index e2e6c14090..37c87100ee 100644
--- a/web/app/components/app/log-annotation/index.tsx
+++ b/web/app/components/app/log-annotation/index.tsx
@@ -8,7 +8,7 @@ import Log from '@/app/components/app/log'
 import WorkflowLog from '@/app/components/app/workflow-log'
 import Annotation from '@/app/components/app/annotation'
 import Loading from '@/app/components/base/loading'
-import { PageType } from '@/app/components/app/configuration/toolbox/annotation/type'
+import { PageType } from '@/app/components/base/features/new-feature-panel/annotation-reply/type'
 import TabSlider from '@/app/components/base/tab-slider-plain'
 import { useStore as useAppStore } from '@/app/components/app/store'
 
diff --git a/web/app/components/app/text-generate/item/index.tsx b/web/app/components/app/text-generate/item/index.tsx
index 883eba97c4..64e0381608 100644
--- a/web/app/components/app/text-generate/item/index.tsx
+++ b/web/app/components/app/text-generate/item/index.tsx
@@ -23,7 +23,7 @@ import { Bookmark } from '@/app/components/base/icons/src/vender/line/general'
 import { Stars02 } from '@/app/components/base/icons/src/vender/line/weather'
 import { RefreshCcw01 } from '@/app/components/base/icons/src/vender/line/arrows'
 import { fetchTextGenerationMessge } from '@/service/debug'
-import AnnotationCtrlBtn from '@/app/components/app/configuration/toolbox/annotation/annotation-ctrl-btn'
+import AnnotationCtrlBtn from '@/app/components/base/features/new-feature-panel/annotation-reply/annotation-ctrl-btn'
 import EditReplyModal from '@/app/components/app/annotation/edit-annotation-modal'
 import { useStore as useAppStore } from '@/app/components/app/store'
 import WorkflowProcessItem from '@/app/components/base/chat/chat/answer/workflow-process'
diff --git a/web/app/components/base/chat/chat/answer/operation.tsx b/web/app/components/base/chat/chat/answer/operation.tsx
index f54e736826..ae592ef089 100644
--- a/web/app/components/base/chat/chat/answer/operation.tsx
+++ b/web/app/components/base/chat/chat/answer/operation.tsx
@@ -11,7 +11,7 @@ import cn from '@/utils/classnames'
 import CopyBtn from '@/app/components/base/copy-btn'
 import { MessageFast } from '@/app/components/base/icons/src/vender/solid/communication'
 import AudioBtn from '@/app/components/base/audio-btn'
-import AnnotationCtrlBtn from '@/app/components/app/configuration/toolbox/annotation/annotation-ctrl-btn'
+import AnnotationCtrlBtn from '@/app/components/base/features/new-feature-panel/annotation-reply/annotation-ctrl-btn'
 import EditReplyModal from '@/app/components/app/annotation/edit-annotation-modal'
 import {
   ThumbsDown,
diff --git a/web/app/components/app/configuration/toolbox/annotation/annotation-ctrl-btn/index.tsx b/web/app/components/base/features/new-feature-panel/annotation-reply/annotation-ctrl-btn/index.tsx
similarity index 100%
rename from web/app/components/app/configuration/toolbox/annotation/annotation-ctrl-btn/index.tsx
rename to web/app/components/base/features/new-feature-panel/annotation-reply/annotation-ctrl-btn/index.tsx
diff --git a/web/app/components/app/configuration/toolbox/annotation/config-param-modal.tsx b/web/app/components/base/features/new-feature-panel/annotation-reply/config-param-modal.tsx
similarity index 99%
rename from web/app/components/app/configuration/toolbox/annotation/config-param-modal.tsx
rename to web/app/components/base/features/new-feature-panel/annotation-reply/config-param-modal.tsx
index b660977d08..801f1348ee 100644
--- a/web/app/components/app/configuration/toolbox/annotation/config-param-modal.tsx
+++ b/web/app/components/base/features/new-feature-panel/annotation-reply/config-param-modal.tsx
@@ -2,7 +2,7 @@
 import type { FC } from 'react'
 import React, { useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import ScoreSlider from '../score-slider'
+import ScoreSlider from './score-slider'
 import { Item } from './config-param'
 import Modal from '@/app/components/base/modal'
 import Button from '@/app/components/base/button'
diff --git a/web/app/components/app/configuration/toolbox/annotation/config-param.tsx b/web/app/components/base/features/new-feature-panel/annotation-reply/config-param.tsx
similarity index 100%
rename from web/app/components/app/configuration/toolbox/annotation/config-param.tsx
rename to web/app/components/base/features/new-feature-panel/annotation-reply/config-param.tsx
diff --git a/web/app/components/base/features/new-feature-panel/annotation-reply/index.tsx b/web/app/components/base/features/new-feature-panel/annotation-reply/index.tsx
new file mode 100644
index 0000000000..f44aab5b9c
--- /dev/null
+++ b/web/app/components/base/features/new-feature-panel/annotation-reply/index.tsx
@@ -0,0 +1,152 @@
+import React, { useCallback, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { usePathname, useRouter } from 'next/navigation'
+import produce from 'immer'
+import { RiEqualizer2Line, RiExternalLinkLine } from '@remixicon/react'
+import { MessageFast } from '@/app/components/base/icons/src/vender/features'
+import FeatureCard from '@/app/components/base/features/new-feature-panel/feature-card'
+import Button from '@/app/components/base/button'
+import { useFeatures, useFeaturesStore } from '@/app/components/base/features/hooks'
+import type { OnFeaturesChange } from '@/app/components/base/features/types'
+import useAnnotationConfig from '@/app/components/base/features/new-feature-panel/annotation-reply/use-annotation-config'
+import ConfigParamModal from '@/app/components/base/features/new-feature-panel/annotation-reply/config-param-modal'
+import AnnotationFullModal from '@/app/components/billing/annotation-full/modal'
+import { ANNOTATION_DEFAULT } from '@/config'
+
+type Props = {
+  disabled?: boolean
+  onChange?: OnFeaturesChange
+}
+
+const AnnotationReply = ({
+  disabled,
+  onChange,
+}: Props) => {
+  const { t } = useTranslation()
+  const router = useRouter()
+  const pathname = usePathname()
+  const matched = pathname.match(/\/app\/([^/]+)/)
+  const appId = (matched?.length && matched[1]) ? matched[1] : ''
+  const featuresStore = useFeaturesStore()
+  const annotationReply = useFeatures(s => s.features.annotationReply)
+
+  const updateAnnotationReply = useCallback((newConfig: any) => {
+    const {
+      features,
+      setFeatures,
+    } = featuresStore!.getState()
+    const newFeatures = produce(features, (draft) => {
+      draft.annotationReply = newConfig
+    })
+    setFeatures(newFeatures)
+    if (onChange)
+      onChange(newFeatures)
+  }, [featuresStore, onChange])
+
+  const {
+    handleEnableAnnotation,
+    handleDisableAnnotation,
+    isShowAnnotationConfigInit,
+    setIsShowAnnotationConfigInit,
+    isShowAnnotationFullModal,
+    setIsShowAnnotationFullModal,
+  } = useAnnotationConfig({
+    appId,
+    annotationConfig: annotationReply as any || {
+      id: '',
+      enabled: false,
+      score_threshold: ANNOTATION_DEFAULT.score_threshold,
+      embedding_model: {
+        embedding_provider_name: '',
+        embedding_model_name: '',
+      },
+    },
+    setAnnotationConfig: updateAnnotationReply,
+  })
+
+  const handleSwitch = useCallback((enabled: boolean) => {
+    if (enabled)
+      setIsShowAnnotationConfigInit(true)
+    else
+      handleDisableAnnotation(annotationReply?.embedding_model as any)
+  }, [annotationReply?.embedding_model, handleDisableAnnotation, setIsShowAnnotationConfigInit])
+
+  const [isHovering, setIsHovering] = useState(false)
+
+  return (
+    <>
+      <FeatureCard
+        icon={
+          <div className='shrink-0 p-1 rounded-lg border-[0.5px] border-divider-subtle shadow-xs bg-util-colors-indigo-indigo-600'>
+            <MessageFast className='w-4 h-4 text-text-primary-on-surface' />
+          </div>
+        }
+        title={t('appDebug.feature.annotation.title')}
+        value={!!annotationReply?.enabled}
+        onChange={state => handleSwitch(state)}
+        onMouseEnter={() => setIsHovering(true)}
+        onMouseLeave={() => setIsHovering(false)}
+        disabled={disabled}
+      >
+        <>
+          {!annotationReply?.enabled && (
+            <div className='min-h-8 text-text-tertiary system-xs-regular line-clamp-2'>{t('appDebug.feature.annotation.description')}</div>
+          )}
+          {!!annotationReply?.enabled && (
+            <>
+              {!isHovering && (
+                <div className='pt-0.5 flex items-center gap-4'>
+                  <div className=''>
+                    <div className='mb-0.5 text-text-tertiary system-2xs-medium-uppercase'>{t('appDebug.feature.annotation.scoreThreshold.title')}</div>
+                    <div className='text-text-secondary system-xs-regular'>{annotationReply.score_threshold || '-'}</div>
+                  </div>
+                  <div className='w-px h-[27px] bg-divider-subtle rotate-12'></div>
+                  <div className=''>
+                    <div className='mb-0.5 text-text-tertiary system-2xs-medium-uppercase'>{t('common.modelProvider.embeddingModel.key')}</div>
+                    <div className='text-text-secondary system-xs-regular'>{annotationReply.embedding_model?.embedding_model_name}</div>
+                  </div>
+                </div>
+              )}
+              {isHovering && (
+                <div className='flex items-center justify-between'>
+                  <Button className='w-[178px]' onClick={() => setIsShowAnnotationConfigInit(true)} disabled={disabled}>
+                    <RiEqualizer2Line className='mr-1 w-4 h-4' />
+                    {t('common.operation.params')}
+                  </Button>
+                  <Button className='w-[178px]' onClick={() => {
+                    router.push(`/app/${appId}/annotations`)
+                  }}>
+                    <RiExternalLinkLine className='mr-1 w-4 h-4' />
+                    {t('appDebug.feature.annotation.cacheManagement')}
+                  </Button>
+                </div>
+              )}
+            </>
+          )}
+        </>
+      </FeatureCard>
+      <ConfigParamModal
+        appId={appId}
+        isInit
+        isShow={isShowAnnotationConfigInit}
+        onHide={() => {
+          setIsShowAnnotationConfigInit(false)
+          // showChooseFeatureTrue()
+        }}
+        onSave={async (embeddingModel, score) => {
+          await handleEnableAnnotation(embeddingModel, score)
+          setIsShowAnnotationConfigInit(false)
+        }}
+        annotationConfig={annotationReply as any}
+      />
+      {isShowAnnotationFullModal && (
+        <AnnotationFullModal
+          show={isShowAnnotationFullModal}
+          onHide={() => setIsShowAnnotationFullModal(false)}
+        />
+      )}
+    </>
+  )
+}
+
+export default AnnotationReply
diff --git a/web/app/components/app/configuration/toolbox/score-slider/base-slider/index.tsx b/web/app/components/base/features/new-feature-panel/annotation-reply/score-slider/base-slider/index.tsx
similarity index 100%
rename from web/app/components/app/configuration/toolbox/score-slider/base-slider/index.tsx
rename to web/app/components/base/features/new-feature-panel/annotation-reply/score-slider/base-slider/index.tsx
diff --git a/web/app/components/app/configuration/toolbox/score-slider/base-slider/style.module.css b/web/app/components/base/features/new-feature-panel/annotation-reply/score-slider/base-slider/style.module.css
similarity index 100%
rename from web/app/components/app/configuration/toolbox/score-slider/base-slider/style.module.css
rename to web/app/components/base/features/new-feature-panel/annotation-reply/score-slider/base-slider/style.module.css
diff --git a/web/app/components/app/configuration/toolbox/score-slider/index.tsx b/web/app/components/base/features/new-feature-panel/annotation-reply/score-slider/index.tsx
similarity index 90%
rename from web/app/components/app/configuration/toolbox/score-slider/index.tsx
rename to web/app/components/base/features/new-feature-panel/annotation-reply/score-slider/index.tsx
index 9826cbadcf..d68db9be73 100644
--- a/web/app/components/app/configuration/toolbox/score-slider/index.tsx
+++ b/web/app/components/base/features/new-feature-panel/annotation-reply/score-slider/index.tsx
@@ -2,7 +2,7 @@
 import type { FC } from 'react'
 import React from 'react'
 import { useTranslation } from 'react-i18next'
-import Slider from '@/app/components/app/configuration/toolbox/score-slider/base-slider'
+import Slider from '@/app/components/base/features/new-feature-panel/annotation-reply/score-slider/base-slider'
 
 type Props = {
   className?: string
diff --git a/web/app/components/app/configuration/toolbox/annotation/type.ts b/web/app/components/base/features/new-feature-panel/annotation-reply/type.ts
similarity index 100%
rename from web/app/components/app/configuration/toolbox/annotation/type.ts
rename to web/app/components/base/features/new-feature-panel/annotation-reply/type.ts
diff --git a/web/app/components/app/configuration/toolbox/annotation/use-annotation-config.ts b/web/app/components/base/features/new-feature-panel/annotation-reply/use-annotation-config.ts
similarity index 100%
rename from web/app/components/app/configuration/toolbox/annotation/use-annotation-config.ts
rename to web/app/components/base/features/new-feature-panel/annotation-reply/use-annotation-config.ts
diff --git a/web/app/components/base/features/new-feature-panel/feature-bar.tsx b/web/app/components/base/features/new-feature-panel/feature-bar.tsx
index 3c2d748975..92273c47ab 100644
--- a/web/app/components/base/features/new-feature-panel/feature-bar.tsx
+++ b/web/app/components/base/features/new-feature-panel/feature-bar.tsx
@@ -1,7 +1,7 @@
 import React, { useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { RiApps2AddLine, RiArrowRightLine, RiSparklingFill } from '@remixicon/react'
-import { Citations, ContentModeration, FolderUpload, LoveMessage, Microphone01, TextToAudio, VirtualAssistant } from '@/app/components/base/icons/src/vender/features'
+import { Citations, ContentModeration, FolderUpload, LoveMessage, MessageFast, Microphone01, TextToAudio, VirtualAssistant } from '@/app/components/base/icons/src/vender/features'
 import Button from '@/app/components/base/button'
 import Tooltip from '@/app/components/base/tooltip'
 import VoiceSettings from '@/app/components/base/features/new-feature-panel/text-to-speech/voice-settings'
@@ -118,7 +118,15 @@ const FeatureBar = ({
                 </div>
               </Tooltip>
             )}
-            {/* ##TODO## annotation_reply */}
+            {isChatMode && !!features.annotationReply?.enabled && (
+              <Tooltip
+                popupContent={t('appDebug.feature.annotation.title')}
+              >
+                <div className='shrink-0 p-1 rounded-lg border-[0.5px] border-divider-subtle shadow-xs bg-util-colors-indigo-indigo-600'>
+                  <MessageFast className='w-3.5 h-3.5 text-text-primary-on-surface' />
+                </div>
+              </Tooltip>
+            )}
           </div>
           <div className='grow text-text-tertiary body-xs-regular'>{t('appDebug.feature.bar.enableText')}</div>
           <Button className='shrink-0' variant='ghost-accent' size='small' onClick={() => onFeatureBarClick?.(true)}>
diff --git a/web/app/components/base/features/new-feature-panel/index.tsx b/web/app/components/base/features/new-feature-panel/index.tsx
index 86c2f26acc..a1b95e6d20 100644
--- a/web/app/components/base/features/new-feature-panel/index.tsx
+++ b/web/app/components/base/features/new-feature-panel/index.tsx
@@ -1,21 +1,10 @@
-import React, { useCallback } from 'react'
+import React from 'react'
 import { useTranslation } from 'react-i18next'
-import { usePathname, useRouter } from 'next/navigation'
-import produce from 'immer'
-import {
-  RiCloseLine,
-  RiEqualizer2Line,
-  RiExternalLinkLine,
-} from '@remixicon/react'
-import { MessageFast } from '@/app/components/base/icons/src/vender/features'
+import { RiCloseLine } from '@remixicon/react'
 import DialogWrapper from '@/app/components/base/features/new-feature-panel/dialog-wrapper'
-import { useFeatures, useFeaturesStore } from '@/app/components/base/features/hooks'
 import { useDefaultModel } from '@/app/components/header/account-setting/model-provider-page/hooks'
 import { ModelTypeEnum } from '@/app/components/header/account-setting/model-provider-page/declarations'
 import type { OnFeaturesChange } from '@/app/components/base/features/types'
-import { FeatureEnum } from '@/app/components/base/features/types'
-import Switch from '@/app/components/base/switch'
-import Button from '@/app/components/base/button'
 
 import MoreLikeThis from '@/app/components/base/features/new-feature-panel/more-like-this'
 import ConversationOpener from '@/app/components/base/features/new-feature-panel/conversation-opener'
@@ -25,11 +14,11 @@ import TextToSpeech from '@/app/components/base/features/new-feature-panel/text-
 import FileUpload from '@/app/components/base/features/new-feature-panel/file-upload'
 import FollowUp from '@/app/components/base/features/new-feature-panel/follow-up'
 import Citation from '@/app/components/base/features/new-feature-panel/citation'
+import AnnotationReply from '@/app/components/base/features/new-feature-panel/annotation-reply'
 import type { PromptVariable } from '@/models/debug'
 
 type Props = {
   show: boolean
-  showAnnotation?: boolean
   isChatMode: boolean
   disabled: boolean
   onChange?: OnFeaturesChange
@@ -41,7 +30,6 @@ type Props = {
 
 const NewFeaturePanel = ({
   show,
-  showAnnotation = false,
   isChatMode,
   disabled,
   onChange,
@@ -51,31 +39,8 @@ const NewFeaturePanel = ({
   onAutoAddPromptVariable,
 }: Props) => {
   const { t } = useTranslation()
-  const router = useRouter()
-  const pathname = usePathname()
-  const matched = pathname.match(/\/app\/([^/]+)/)
-  const appId = (matched?.length && matched[1]) ? matched[1] : ''
   const { data: speech2textDefaultModel } = useDefaultModel(ModelTypeEnum.speech2text)
   const { data: text2speechDefaultModel } = useDefaultModel(ModelTypeEnum.tts)
-  const features = useFeatures(s => s.features)
-  const featuresStore = useFeaturesStore()
-
-  const handleChange = useCallback((type: FeatureEnum, enabled: boolean) => {
-    const {
-      features,
-      setFeatures,
-    } = featuresStore!.getState()
-
-    const newFeatures = produce(features, (draft) => {
-      draft[type] = {
-        ...draft[type],
-        enabled,
-      }
-    })
-    setFeatures(newFeatures)
-    if (onChange)
-      onChange(newFeatures)
-  }, [featuresStore, onChange])
 
   return (
     <DialogWrapper
@@ -119,43 +84,8 @@ const NewFeaturePanel = ({
           {isChatMode && (
             <Citation disabled={disabled} onChange={onChange} />
           )}
-          {/* ##TODO## annotation_reply */}
-          {showAnnotation && (
-            <div className='group mb-1 p-3 border-t-[0.5px] border-l-[0.5px] border-effects-highlight rounded-xl bg-background-section-burn'>
-              <div className='mb-2 flex items-center gap-2'>
-                <div className='shrink-0 p-1 rounded-lg border-[0.5px] border-divider-subtle shadow-xs bg-util-colors-indigo-indigo-600'>
-                  <MessageFast className='w-4 h-4 text-text-primary-on-surface' />
-                </div>
-                <div className='grow flex items-center text-text-secondary system-sm-semibold'>
-                  {t('appDebug.feature.annotation.title')}
-                </div>
-                <Switch className='shrink-0' onChange={value => handleChange(FeatureEnum.text2speech, value)} defaultValue={!!features.text2speech?.enabled} />
-              </div>
-              <div className='min-h-8 text-text-tertiary system-xs-regular line-clamp-2'>{t('appDebug.feature.annotation.description')}</div>
-              <div className='group-hover:hidden pt-0.5 flex items-center gap-4'>
-                <div className=''>
-                  <div className='mb-0.5 text-text-tertiary system-2xs-medium-uppercase'>{t('appDebug.feature.annotation.scoreThreshold.title')}</div>
-                  {/* <div className='text-text-secondary system-xs-regular'>{languageInfo?.name || '-'}</div> */}
-                </div>
-                <div className='w-px h-[27px] bg-divider-subtle rotate-12'></div>
-                <div className=''>
-                  <div className='mb-0.5 text-text-tertiary system-2xs-medium-uppercase'>{t('common.modelProvider.embeddingModel.key')}</div>
-                  {/* <div className='text-text-secondary system-xs-regular'>{features.text2speech?.voice || '-'}</div> */}
-                </div>
-              </div>
-              <div className='hidden group-hover:flex items-center justify-between'>
-                <Button className='w-[178px]'>
-                  <RiEqualizer2Line className='mr-1 w-4 h-4' />
-                  {t('common.operation.params')}
-                </Button>
-                <Button className='w-[178px]' onClick={() => {
-                  router.push(`/app/${appId}/annotations`)
-                }}>
-                  <RiExternalLinkLine className='mr-1 w-4 h-4' />
-                  {t('appDebug.feature.annotation.cacheManagement')}
-                </Button>
-              </div>
-            </div>
+          {!inWorkflow && isChatMode && (
+            <AnnotationReply disabled={disabled} onChange={onChange} />
           )}
         </div>
       </div>
diff --git a/web/app/components/base/features/store.ts b/web/app/components/base/features/store.ts
index 7fb3c9848a..9c6e242ab5 100644
--- a/web/app/components/base/features/store.ts
+++ b/web/app/components/base/features/store.ts
@@ -46,6 +46,7 @@ export const createFeaturesStore = (initProps?: Partial<FeaturesState>) => {
       file: {
         image: {
           enabled: false,
+          detail: 'high',
           number_limits: 3,
           transfer_methods: [TransferMethod.local_file, TransferMethod.remote_url],
         },
diff --git a/web/app/components/base/features/types.ts b/web/app/components/base/features/types.ts
index 211ba96cd5..0b959c4aa4 100644
--- a/web/app/components/base/features/types.ts
+++ b/web/app/components/base/features/types.ts
@@ -30,6 +30,7 @@ export type SensitiveWordAvoidance = EnabledOrDisabled & {
 
 export type FileUpload = {
   image?: EnabledOrDisabled & {
+    detail?: 'high' | 'low'
     number_limits?: number
     transfer_methods?: TransferMethod[]
   }