dify

dify/web/app/components/base/features/context.tsx

@@ -0,0 +1,27 @@
+import {
+  createContext,
+  useRef,
+} from 'react'
+import type {
+  FeaturesState,
+  FeaturesStore,
+} from './store'
+import { createFeaturesStore } from './store'
+
+export const FeaturesContext = createContext<FeaturesStore | null>(null)
+
+type FeaturesProviderProps = {
+  children: React.ReactNode
+} & Partial<FeaturesState>
+export const FeaturesProvider = ({ children, ...props }: FeaturesProviderProps) => {
+  const storeRef = useRef<FeaturesStore | undefined>(undefined)
+
+  if (!storeRef.current)
+    storeRef.current = createFeaturesStore(props)
+
+  return (
+    <FeaturesContext.Provider value={storeRef.current}>
+      {children}
+    </FeaturesContext.Provider>
+  )
+}

dify/web/app/components/base/features/hooks.ts

@@ -0,0 +1,16 @@
+import { useContext } from 'react'
+import { useStore } from 'zustand'
+import { FeaturesContext } from './context'
+import type { FeatureStoreState } from './store'
+
+export function useFeatures<T>(selector: (state: FeatureStoreState) => T): T {
+  const store = useContext(FeaturesContext)
+  if (!store)
+    throw new Error('Missing FeaturesContext.Provider in the tree')
+
+  return useStore(store, selector)
+}
+
+export function useFeaturesStore() {
+  return useContext(FeaturesContext)
+}

dify/web/app/components/base/features/index.stories.tsx

@@ -0,0 +1,73 @@
+import type { Meta, StoryObj } from '@storybook/nextjs'
+import { useState } from 'react'
+import { FeaturesProvider } from '.'
+import NewFeaturePanel from './new-feature-panel'
+import type { Features } from './types'
+
+const DEFAULT_FEATURES: Features = {
+  moreLikeThis: { enabled: false },
+  opening: { enabled: false },
+  suggested: { enabled: false },
+  text2speech: { enabled: false },
+  speech2text: { enabled: false },
+  citation: { enabled: false },
+  moderation: { enabled: false },
+  file: { enabled: false },
+  annotationReply: { enabled: false },
+}
+
+const meta = {
+  title: 'Base/Other/FeaturesProvider',
+  component: FeaturesProvider,
+  parameters: {
+    layout: 'fullscreen',
+    docs: {
+      description: {
+        component: 'Zustand-backed provider used for feature toggles. Paired with `NewFeaturePanel` for workflow settings.',
+      },
+    },
+  },
+  tags: ['autodocs'],
+} satisfies Meta<typeof FeaturesProvider>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+const FeaturesDemo = () => {
+  const [show, setShow] = useState(true)
+  const [features, setFeatures] = useState<Features>(DEFAULT_FEATURES)
+
+  return (
+    <FeaturesProvider features={features}>
+      <div className="flex h-[520px] items-center justify-center bg-background-default-subtle">
+        <div className="rounded-xl border border-divider-subtle bg-components-panel-bg p-6 text-sm text-text-secondary shadow-inner">
+          <div className="mb-4 font-medium text-text-primary">Feature toggles preview</div>
+          <div className="flex gap-3">
+            <button
+              type="button"
+              className="rounded-md bg-primary-600 px-4 py-2 text-sm font-medium text-white shadow-sm hover:bg-primary-700"
+              onClick={() => setShow(true)}
+            >
+              Configure features
+            </button>
+          </div>
+        </div>
+      </div>
+
+      <NewFeaturePanel
+        show={show}
+        isChatMode
+        disabled={false}
+        onChange={next => setFeatures(prev => ({ ...prev, ...next }))}
+        onClose={() => setShow(false)}
+      />
+    </FeaturesProvider>
+  )
+}
+
+export const Playground: Story = {
+  render: () => <FeaturesDemo />,
+  args: {
+    children: null,
+  },
+}

dify/web/app/components/base/features/index.tsx

@@ -0,0 +1 @@
+export { FeaturesProvider } from './context'

dify/web/app/components/base/features/new-feature-panel/annotation-reply/annotation-ctrl-button.tsx

@@ -0,0 +1,79 @@
+'use client'
+import type { FC } from 'react'
+import React from 'react'
+import { useTranslation } from 'react-i18next'
+import {
+  RiEditLine,
+  RiFileEditLine,
+} from '@remixicon/react'
+import ActionButton from '@/app/components/base/action-button'
+import Tooltip from '@/app/components/base/tooltip'
+import { addAnnotation } from '@/service/annotation'
+import Toast from '@/app/components/base/toast'
+import { useProviderContext } from '@/context/provider-context'
+import { useModalContext } from '@/context/modal-context'
+
+type Props = {
+  appId: string
+  messageId?: string
+  cached: boolean
+  query: string
+  answer: string
+  onAdded: (annotationId: string, authorName: string) => void
+  onEdit: () => void
+}
+
+const AnnotationCtrlButton: FC<Props> = ({
+  cached,
+  query,
+  answer,
+  appId,
+  messageId,
+  onAdded,
+  onEdit,
+}) => {
+  const { t } = useTranslation()
+  const { plan, enableBilling } = useProviderContext()
+  const isAnnotationFull = (enableBilling && plan.usage.annotatedResponse >= plan.total.annotatedResponse)
+  const { setShowAnnotationFullModal } = useModalContext()
+  const handleAdd = async () => {
+    if (isAnnotationFull) {
+      setShowAnnotationFullModal()
+      return
+    }
+    const res: any = await addAnnotation(appId, {
+      message_id: messageId,
+      question: query,
+      answer,
+    })
+    Toast.notify({
+      message: t('common.api.actionSuccess') as string,
+      type: 'success',
+    })
+    onAdded(res.id, res.account?.name)
+  }
+
+  return (
+    <>
+      {cached && (
+        <Tooltip
+          popupContent={t('appDebug.feature.annotation.edit')}
+        >
+          <ActionButton onClick={onEdit}>
+            <RiEditLine className='h-4 w-4' />
+          </ActionButton>
+        </Tooltip>
+      )}
+      {!cached && answer && (
+        <Tooltip
+          popupContent={t('appDebug.feature.annotation.add')}
+        >
+          <ActionButton onClick={handleAdd}>
+            <RiFileEditLine className='h-4 w-4' />
+          </ActionButton>
+        </Tooltip>
+      )}
+    </>
+  )
+}
+export default React.memo(AnnotationCtrlButton)

dify/web/app/components/base/features/new-feature-panel/annotation-reply/config-param-modal.tsx

@@ -0,0 +1,139 @@
+'use client'
+import type { FC } from 'react'
+import React, { useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import ScoreSlider from './score-slider'
+import { Item } from './config-param'
+import Modal from '@/app/components/base/modal'
+import Button from '@/app/components/base/button'
+import Toast from '@/app/components/base/toast'
+import type { AnnotationReplyConfig } from '@/models/debug'
+import { ANNOTATION_DEFAULT } from '@/config'
+import ModelSelector from '@/app/components/header/account-setting/model-provider-page/model-selector'
+import { useModelListAndDefaultModelAndCurrentProviderAndModel } from '@/app/components/header/account-setting/model-provider-page/hooks'
+import { ModelTypeEnum } from '@/app/components/header/account-setting/model-provider-page/declarations'
+
+type Props = {
+  appId: string
+  isShow: boolean
+  onHide: () => void
+  onSave: (embeddingModel: {
+    embedding_provider_name: string
+    embedding_model_name: string
+  }, score: number) => void
+  isInit?: boolean
+  annotationConfig: AnnotationReplyConfig
+}
+
+const ConfigParamModal: FC<Props> = ({
+  isShow,
+  onHide: doHide,
+  onSave,
+  isInit,
+  annotationConfig: oldAnnotationConfig,
+}) => {
+  const { t } = useTranslation()
+  const {
+    modelList: embeddingsModelList,
+    defaultModel: embeddingsDefaultModel,
+    currentModel: isEmbeddingsDefaultModelValid,
+  } = useModelListAndDefaultModelAndCurrentProviderAndModel(ModelTypeEnum.textEmbedding)
+  const [annotationConfig, setAnnotationConfig] = useState(oldAnnotationConfig)
+
+  const [isLoading, setLoading] = useState(false)
+  const [embeddingModel, setEmbeddingModel] = useState(oldAnnotationConfig.embedding_model
+    ? {
+      providerName: oldAnnotationConfig.embedding_model.embedding_provider_name,
+      modelName: oldAnnotationConfig.embedding_model.embedding_model_name,
+    }
+    : (embeddingsDefaultModel
+      ? {
+        providerName: embeddingsDefaultModel.provider.provider,
+        modelName: embeddingsDefaultModel.model,
+      }
+      : undefined))
+  const onHide = () => {
+    if (!isLoading)
+      doHide()
+  }
+
+  const handleSave = async () => {
+    if (!embeddingModel || !embeddingModel.modelName || (embeddingModel.modelName === embeddingsDefaultModel?.model && !isEmbeddingsDefaultModelValid)) {
+      Toast.notify({
+        message: t('common.modelProvider.embeddingModel.required'),
+        type: 'error',
+      })
+      return
+    }
+    setLoading(true)
+    await onSave({
+      embedding_provider_name: embeddingModel.providerName,
+      embedding_model_name: embeddingModel.modelName,
+    }, annotationConfig.score_threshold)
+    setLoading(false)
+  }
+
+  return (
+    <Modal
+      isShow={isShow}
+      onClose={onHide}
+      className='!mt-14 !w-[640px] !max-w-none !p-6'
+    >
+      <div className='title-2xl-semi-bold mb-2 text-text-primary'>
+        {t(`appAnnotation.initSetup.${isInit ? 'title' : 'configTitle'}`)}
+      </div>
+
+      <div className='mt-6 space-y-3'>
+        <Item
+          title={t('appDebug.feature.annotation.scoreThreshold.title')}
+          tooltip={t('appDebug.feature.annotation.scoreThreshold.description')}
+        >
+          <ScoreSlider
+            className='mt-1'
+            value={(annotationConfig.score_threshold || ANNOTATION_DEFAULT.score_threshold) * 100}
+            onChange={(val) => {
+              setAnnotationConfig({
+                ...annotationConfig,
+                score_threshold: val / 100,
+              })
+            }}
+          />
+        </Item>
+
+        <Item
+          title={t('common.modelProvider.embeddingModel.key')}
+          tooltip={t('appAnnotation.embeddingModelSwitchTip')}
+        >
+          <div className='pt-1'>
+            <ModelSelector
+              defaultModel={embeddingModel && {
+                provider: embeddingModel.providerName,
+                model: embeddingModel.modelName,
+              }}
+              modelList={embeddingsModelList}
+              onSelect={(val) => {
+                setEmbeddingModel({
+                  providerName: val.provider,
+                  modelName: val.model,
+                })
+              }}
+            />
+          </div>
+        </Item>
+      </div>
+
+      <div className='mt-6 flex justify-end gap-2'>
+        <Button onClick={onHide}>{t('common.operation.cancel')}</Button>
+        <Button
+          variant='primary'
+          onClick={handleSave}
+          loading={isLoading}
+        >
+          <div></div>
+          <div>{t(`appAnnotation.initSetup.${isInit ? 'confirmBtn' : 'configConfirmBtn'}`)}</div>
+        </Button >
+      </div >
+    </Modal >
+  )
+}
+export default React.memo(ConfigParamModal)

dify/web/app/components/base/features/new-feature-panel/annotation-reply/config-param.tsx

@@ -0,0 +1,24 @@
+'use client'
+import type { FC } from 'react'
+import React from 'react'
+import Tooltip from '@/app/components/base/tooltip'
+
+export const Item: FC<{ title: string; tooltip: string; children: React.JSX.Element }> = ({
+  title,
+  tooltip,
+  children,
+}) => {
+  return (
+    <div>
+      <div className='mb-1 flex items-center space-x-1'>
+        <div className='system-sm-semibold py-1 text-text-secondary'>{title}</div>
+        <Tooltip
+          popupContent={
+            <div className='system-sm-regular max-w-[200px] text-text-secondary'>{tooltip}</div>
+          }
+        />
+      </div>
+      <div>{children}</div>
+    </div>
+  )
+}

dify/web/app/components/base/features/new-feature-panel/annotation-reply/index.tsx

@@ -0,0 +1,153 @@
+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'
+import type { AnnotationReplyConfig } from '@/models/debug'
+
+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: AnnotationReplyConfig) => {
+    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 rounded-lg border-[0.5px] border-divider-subtle bg-util-colors-indigo-indigo-600 p-1 shadow-xs'>
+            <MessageFast className='h-4 w-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='system-xs-regular line-clamp-2 min-h-8 text-text-tertiary'>{t('appDebug.feature.annotation.description')}</div>
+          )}
+          {!!annotationReply?.enabled && (
+            <>
+              {!isHovering && (
+                <div className='flex items-center gap-4 pt-0.5'>
+                  <div className=''>
+                    <div className='system-2xs-medium-uppercase mb-0.5 text-text-tertiary'>{t('appDebug.feature.annotation.scoreThreshold.title')}</div>
+                    <div className='system-xs-regular text-text-secondary'>{annotationReply.score_threshold || '-'}</div>
+                  </div>
+                  <div className='h-[27px] w-px rotate-12 bg-divider-subtle'></div>
+                  <div className=''>
+                    <div className='system-2xs-medium-uppercase mb-0.5 text-text-tertiary'>{t('common.modelProvider.embeddingModel.key')}</div>
+                    <div className='system-xs-regular text-text-secondary'>{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 h-4 w-4' />
+                    {t('common.operation.params')}
+                  </Button>
+                  <Button className='w-[178px]' onClick={() => {
+                    router.push(`/app/${appId}/annotations`)
+                  }}>
+                    <RiExternalLinkLine className='mr-1 h-4 w-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

dify/web/app/components/base/features/new-feature-panel/annotation-reply/score-slider/base-slider/index.tsx

@@ -0,0 +1,38 @@
+import ReactSlider from 'react-slider'
+import s from './style.module.css'
+import cn from '@/utils/classnames'
+
+type ISliderProps = {
+  className?: string
+  value: number
+  max?: number
+  min?: number
+  step?: number
+  disabled?: boolean
+  onChange: (value: number) => void
+}
+
+const Slider: React.FC<ISliderProps> = ({ className, max, min, step, value, disabled, onChange }) => {
+  return <ReactSlider
+    disabled={disabled}
+    value={isNaN(value) ? 0 : value}
+    min={min || 0}
+    max={max || 100}
+    step={step || 1}
+    className={cn(className, s.slider)}
+    thumbClassName={cn(s['slider-thumb'], 'top-[-7px] h-[18px] w-2 cursor-pointer rounded-[36px] border !border-black/8 bg-white shadow-md')}
+    trackClassName={s['slider-track']}
+    onChange={onChange}
+    renderThumb={(props, state) => (
+      <div {...props}>
+        <div className='relative h-full w-full'>
+          <div className='system-sm-semibold absolute left-[50%] top-[-16px] translate-x-[-50%] text-text-primary'>
+            {(state.valueNow / 100).toFixed(2)}
+          </div>
+        </div>
+      </div>
+    )}
+  />
+}
+
+export default Slider

dify/web/app/components/base/features/new-feature-panel/annotation-reply/score-slider/base-slider/style.module.css

@@ -0,0 +1,20 @@
+.slider {
+    position: relative;
+}
+
+.slider.disabled {
+    opacity: 0.6;
+}
+
+.slider-thumb:focus {
+    outline: none;
+}
+
+.slider-track {
+    background-color: #528BFF;
+    height: 2px;
+}
+
+.slider-track-1 {
+    background-color: #E5E7EB;
+}

dify/web/app/components/base/features/new-feature-panel/annotation-reply/score-slider/index.tsx

@@ -0,0 +1,46 @@
+'use client'
+import type { FC } from 'react'
+import React from 'react'
+import { useTranslation } from 'react-i18next'
+import Slider from '@/app/components/base/features/new-feature-panel/annotation-reply/score-slider/base-slider'
+
+type Props = {
+  className?: string
+  value: number
+  onChange: (value: number) => void
+}
+
+const ScoreSlider: FC<Props> = ({
+  className,
+  value,
+  onChange,
+}) => {
+  const { t } = useTranslation()
+
+  return (
+    <div className={className}>
+      <div className='mt-[14px] h-px'>
+        <Slider
+          max={100}
+          min={80}
+          step={1}
+          value={value}
+          onChange={onChange}
+        />
+      </div>
+      <div className='system-xs-semibold-uppercase mt-[10px] flex items-center justify-between'>
+        <div className='flex space-x-1 text-util-colors-cyan-cyan-500'>
+          <div>0.8</div>
+          <div>·</div>
+          <div>{t('appDebug.feature.annotation.scoreThreshold.easyMatch')}</div>
+        </div>
+        <div className='flex space-x-1 text-util-colors-blue-blue-500'>
+          <div>1.0</div>
+          <div>·</div>
+          <div>{t('appDebug.feature.annotation.scoreThreshold.accurateMatch')}</div>
+        </div>
+      </div>
+    </div>
+  )
+}
+export default React.memo(ScoreSlider)

dify/web/app/components/base/features/new-feature-panel/annotation-reply/type.ts

@@ -0,0 +1,4 @@
+export enum PageType {
+  log = 'log',
+  annotation = 'annotation',
+}

dify/web/app/components/base/features/new-feature-panel/annotation-reply/use-annotation-config.ts

@@ -0,0 +1,89 @@
+import React, { useState } from 'react'
+import { produce } from 'immer'
+import type { AnnotationReplyConfig } from '@/models/debug'
+import { queryAnnotationJobStatus, updateAnnotationStatus } from '@/service/annotation'
+import type { EmbeddingModelConfig } from '@/app/components/app/annotation/type'
+import { AnnotationEnableStatus, JobStatus } from '@/app/components/app/annotation/type'
+import { sleep } from '@/utils'
+import { ANNOTATION_DEFAULT } from '@/config'
+import { useProviderContext } from '@/context/provider-context'
+
+type Params = {
+  appId: string
+  annotationConfig: AnnotationReplyConfig
+  setAnnotationConfig: (annotationConfig: AnnotationReplyConfig) => void
+}
+const useAnnotationConfig = ({
+  appId,
+  annotationConfig,
+  setAnnotationConfig,
+}: Params) => {
+  const { plan, enableBilling } = useProviderContext()
+  const isAnnotationFull = (enableBilling && plan.usage.annotatedResponse >= plan.total.annotatedResponse)
+  const [isShowAnnotationFullModal, setIsShowAnnotationFullModal] = useState(false)
+  const [isShowAnnotationConfigInit, doSetIsShowAnnotationConfigInit] = React.useState(false)
+  const setIsShowAnnotationConfigInit = (isShow: boolean) => {
+    if (isShow) {
+      if (isAnnotationFull) {
+        setIsShowAnnotationFullModal(true)
+        return
+      }
+    }
+    doSetIsShowAnnotationConfigInit(isShow)
+  }
+  const ensureJobCompleted = async (jobId: string, status: AnnotationEnableStatus) => {
+    let isCompleted = false
+    while (!isCompleted) {
+      const res: any = await queryAnnotationJobStatus(appId, status, jobId)
+      isCompleted = res.job_status === JobStatus.completed
+      if (isCompleted)
+        break
+
+      await sleep(2000)
+    }
+  }
+
+  const handleEnableAnnotation = async (embeddingModel: EmbeddingModelConfig, score?: number) => {
+    if (isAnnotationFull)
+      return
+
+    const { job_id: jobId }: any = await updateAnnotationStatus(appId, AnnotationEnableStatus.enable, embeddingModel, score)
+    await ensureJobCompleted(jobId, AnnotationEnableStatus.enable)
+    setAnnotationConfig(produce(annotationConfig, (draft: AnnotationReplyConfig) => {
+      draft.enabled = true
+      draft.embedding_model = embeddingModel
+      if (!draft.score_threshold)
+        draft.score_threshold = ANNOTATION_DEFAULT.score_threshold
+    }))
+  }
+
+  const setScore = (score: number, embeddingModel?: EmbeddingModelConfig) => {
+    setAnnotationConfig(produce(annotationConfig, (draft: AnnotationReplyConfig) => {
+      draft.score_threshold = score
+      if (embeddingModel)
+        draft.embedding_model = embeddingModel
+    }))
+  }
+
+  const handleDisableAnnotation = async (embeddingModel: EmbeddingModelConfig) => {
+    if (!annotationConfig.enabled)
+      return
+
+    await updateAnnotationStatus(appId, AnnotationEnableStatus.disable, embeddingModel)
+    setAnnotationConfig(produce(annotationConfig, (draft: AnnotationReplyConfig) => {
+      draft.enabled = false
+    }))
+  }
+
+  return {
+    handleEnableAnnotation,
+    handleDisableAnnotation,
+    isShowAnnotationConfigInit,
+    setIsShowAnnotationConfigInit,
+    isShowAnnotationFullModal,
+    setIsShowAnnotationFullModal,
+    setScore,
+  }
+}
+
+export default useAnnotationConfig

dify/web/app/components/base/features/new-feature-panel/citation.tsx

@@ -0,0 +1,56 @@
+import React, { useCallback } from 'react'
+import { useTranslation } from 'react-i18next'
+import { produce } from 'immer'
+import { Citations } from '@/app/components/base/icons/src/vender/features'
+import FeatureCard from '@/app/components/base/features/new-feature-panel/feature-card'
+import { useFeatures, useFeaturesStore } from '@/app/components/base/features/hooks'
+import type { OnFeaturesChange } from '@/app/components/base/features/types'
+import { FeatureEnum } from '@/app/components/base/features/types'
+
+type Props = {
+  disabled?: boolean
+  onChange?: OnFeaturesChange
+}
+
+const Citation = ({
+  disabled,
+  onChange,
+}: Props) => {
+  const { t } = useTranslation()
+  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 (
+    <FeatureCard
+      icon={
+        <div className='shrink-0 rounded-lg border-[0.5px] border-divider-subtle bg-util-colors-warning-warning-500 p-1 shadow-xs'>
+          <Citations className='h-4 w-4 text-text-primary-on-surface' />
+        </div>
+      }
+      title={t('appDebug.feature.citation.title')}
+      value={!!features.citation?.enabled}
+      description={t('appDebug.feature.citation.description')!}
+      onChange={state => handleChange(FeatureEnum.citation, state)}
+      disabled={disabled}
+    />
+  )
+}
+
+export default Citation

dify/web/app/components/base/features/new-feature-panel/conversation-opener/index.tsx

@@ -0,0 +1,119 @@
+import React, { useCallback, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { produce } from 'immer'
+import { RiEditLine } from '@remixicon/react'
+import { LoveMessage } 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 { FeatureEnum } from '@/app/components/base/features/types'
+import { useModalContext } from '@/context/modal-context'
+import type { PromptVariable } from '@/models/debug'
+import type { InputVar } from '@/app/components/workflow/types'
+
+type Props = {
+  disabled?: boolean
+  onChange?: OnFeaturesChange
+  promptVariables?: PromptVariable[]
+  workflowVariables?: InputVar[]
+  onAutoAddPromptVariable?: (variable: PromptVariable[]) => void
+}
+
+const ConversationOpener = ({
+  disabled,
+  onChange,
+  promptVariables,
+  workflowVariables,
+  onAutoAddPromptVariable,
+}: Props) => {
+  const { t } = useTranslation()
+  const { setShowOpeningModal } = useModalContext()
+  const opening = useFeatures(s => s.features.opening)
+  const featuresStore = useFeaturesStore()
+  const [isHovering, setIsHovering] = useState(false)
+  const handleOpenOpeningModal = useCallback(() => {
+    if (disabled)
+      return
+    const {
+      features,
+      setFeatures,
+    } = featuresStore!.getState()
+    setShowOpeningModal({
+      payload: {
+        ...opening,
+        promptVariables,
+        workflowVariables,
+        onAutoAddPromptVariable,
+      },
+      onSaveCallback: (newOpening) => {
+        const newFeatures = produce(features, (draft) => {
+          draft.opening = newOpening
+        })
+        setFeatures(newFeatures)
+        if (onChange)
+          onChange()
+      },
+      onCancelCallback: () => {
+        if (onChange)
+          onChange()
+      },
+    })
+  }, [disabled, featuresStore, onAutoAddPromptVariable, onChange, opening, promptVariables, setShowOpeningModal])
+
+  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()
+  }, [featuresStore, onChange])
+
+  return (
+    <FeatureCard
+      icon={
+        <div className='shrink-0 rounded-lg border-[0.5px] border-divider-subtle bg-util-colors-blue-light-blue-light-500 p-1 shadow-xs'>
+          <LoveMessage className='h-4 w-4 text-text-primary-on-surface' />
+        </div>
+      }
+      title={t('appDebug.feature.conversationOpener.title')}
+      value={!!opening?.enabled}
+      onChange={state => handleChange(FeatureEnum.opening, state)}
+      onMouseEnter={() => setIsHovering(true)}
+      onMouseLeave={() => setIsHovering(false)}
+      disabled={disabled}
+    >
+      <>
+        {!opening?.enabled && (
+          <div className='system-xs-regular line-clamp-2 min-h-8 text-text-tertiary'>{t('appDebug.feature.conversationOpener.description')}</div>
+        )}
+        {!!opening?.enabled && (
+          <>
+            {!isHovering && (
+              <div className='system-xs-regular line-clamp-2 min-h-8 text-text-tertiary'>
+                {opening.opening_statement || t('appDebug.openingStatement.placeholder')}
+              </div>
+            )}
+            {isHovering && (
+              <Button className='w-full' onClick={handleOpenOpeningModal} disabled={disabled}>
+                <RiEditLine className='mr-1 h-4 w-4' />
+                {t('appDebug.openingStatement.writeOpener')}
+              </Button>
+            )}
+          </>
+        )}
+      </>
+    </FeatureCard>
+  )
+}
+
+export default ConversationOpener

dify/web/app/components/base/features/new-feature-panel/conversation-opener/modal.tsx

@@ -0,0 +1,247 @@
+import React, { useCallback, useEffect, useMemo, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { useBoolean } from 'ahooks'
+import { produce } from 'immer'
+import { ReactSortable } from 'react-sortablejs'
+import { RiAddLine, RiAsterisk, RiCloseLine, RiDeleteBinLine, RiDraggable } from '@remixicon/react'
+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'
+import type { InputVar } from '@/app/components/workflow/types'
+import { getNewVar } from '@/utils/var'
+import cn from '@/utils/classnames'
+import { noop } from 'lodash-es'
+import { checkKeys } from '@/utils/var'
+
+type OpeningSettingModalProps = {
+  data: OpeningStatement
+  onSave: (newState: OpeningStatement) => void
+  onCancel: () => void
+  promptVariables?: PromptVariable[]
+  workflowVariables?: InputVar[]
+  onAutoAddPromptVariable?: (variable: PromptVariable[]) => void
+}
+
+const MAX_QUESTION_NUM = 10
+
+const OpeningSettingModal = ({
+  data,
+  onSave,
+  onCancel,
+  promptVariables = [],
+  workflowVariables = [],
+  onAutoAddPromptVariable,
+}: OpeningSettingModalProps) => {
+  const { t } = useTranslation()
+  const [tempValue, setTempValue] = useState(data?.opening_statement || '')
+  useEffect(() => {
+    setTempValue(data.opening_statement || '')
+  }, [data.opening_statement])
+  const [tempSuggestedQuestions, setTempSuggestedQuestions] = useState(data.suggested_questions || [])
+  const [isShowConfirmAddVar, { setTrue: showConfirmAddVar, setFalse: hideConfirmAddVar }] = useBoolean(false)
+  const [notIncludeKeys, setNotIncludeKeys] = useState<string[]>([])
+
+  const isSaveDisabled = useMemo(() => !tempValue.trim(), [tempValue])
+
+  const handleSave = useCallback((ignoreVariablesCheck?: boolean) => {
+    // Prevent saving if opening statement is empty
+    if (isSaveDisabled)
+      return
+
+    if (!ignoreVariablesCheck) {
+      const keys = getInputKeys(tempValue)?.filter((key) => {
+        const { isValid } = checkKeys([key], true)
+        return isValid
+      })
+      const promptKeys = promptVariables.map(item => item.key)
+      const workflowVariableKeys = workflowVariables.map(item => item.variable)
+      let notIncludeKeys: string[] = []
+
+      if (promptKeys.length === 0 && workflowVariables.length === 0) {
+        if (keys.length > 0)
+          notIncludeKeys = keys
+      }
+      else {
+        if (workflowVariables.length > 0)
+          notIncludeKeys = keys.filter(key => !workflowVariableKeys.includes(key))
+        else notIncludeKeys = keys.filter(key => !promptKeys.includes(key))
+      }
+
+      if (notIncludeKeys.length > 0) {
+        setNotIncludeKeys(notIncludeKeys)
+        showConfirmAddVar()
+        return
+      }
+    }
+    const newOpening = produce(data, (draft) => {
+      if (draft) {
+        draft.opening_statement = tempValue
+        draft.suggested_questions = tempSuggestedQuestions
+      }
+    })
+    onSave(newOpening)
+  }, [data, onSave, promptVariables, workflowVariables, showConfirmAddVar, tempSuggestedQuestions, tempValue, isSaveDisabled])
+
+  const cancelAutoAddVar = useCallback(() => {
+    hideConfirmAddVar()
+    handleSave(true)
+  }, [handleSave, hideConfirmAddVar])
+
+  const autoAddVar = useCallback(() => {
+    onAutoAddPromptVariable?.(notIncludeKeys.map(key => getNewVar(key, 'string')))
+    hideConfirmAddVar()
+    handleSave(true)
+  }, [handleSave, hideConfirmAddVar, notIncludeKeys, onAutoAddPromptVariable])
+
+  const [focusID, setFocusID] = useState<number | null>(null)
+  const [deletingID, setDeletingID] = useState<number | null>(null)
+
+  const renderQuestions = () => {
+    return (
+      <div>
+        <div className='flex items-center py-2'>
+          <div className='flex shrink-0 space-x-0.5 text-xs font-medium leading-[18px] text-text-tertiary'>
+            <div className='uppercase'>{t('appDebug.openingStatement.openingQuestion')}</div>
+            <div>·</div>
+            <div>{tempSuggestedQuestions.length}/{MAX_QUESTION_NUM}</div>
+          </div>
+          <Divider bgStyle='gradient' className='ml-3 h-px w-0 grow' />
+        </div>
+        <ReactSortable
+          className="space-y-1"
+          list={tempSuggestedQuestions.map((name, index) => {
+            return {
+              id: index,
+              name,
+            }
+          })}
+          setList={list => setTempSuggestedQuestions(list.map(item => item.name))}
+          handle='.handle'
+          ghostClass="opacity-50"
+          animation={150}
+        >
+          {tempSuggestedQuestions.map((question, index) => {
+            return (
+              <div
+                className={cn(
+                  'group relative flex items-center rounded-lg border border-components-panel-border-subtle bg-components-panel-on-panel-item-bg pl-2.5 hover:bg-components-panel-on-panel-item-bg-hover',
+                  focusID === index && 'border-components-input-border-active bg-components-input-bg-active hover:border-components-input-border-active hover:bg-components-input-bg-active',
+                  deletingID === index && 'border-components-input-border-destructive bg-state-destructive-hover hover:border-components-input-border-destructive hover:bg-state-destructive-hover',
+                )}
+                key={index}
+              >
+                <RiDraggable className='handle h-4 w-4 cursor-grab text-text-quaternary' />
+                <input
+                  type="input"
+                  value={question || ''}
+                  placeholder={t('appDebug.openingStatement.openingQuestionPlaceholder') as string}
+                  onChange={(e) => {
+                    const value = e.target.value
+                    setTempSuggestedQuestions(tempSuggestedQuestions.map((item, i) => {
+                      if (index === i)
+                        return value
+
+                      return item
+                    }))
+                  }}
+                  className={'h-9 w-full grow cursor-pointer overflow-x-auto rounded-lg border-0 bg-transparent pl-1.5 pr-8 text-sm leading-9 text-text-secondary focus:outline-none'}
+                  onFocus={() => setFocusID(index)}
+                  onBlur={() => setFocusID(null)}
+                />
+
+                <div
+                  className='absolute right-1.5 top-1/2 block translate-y-[-50%] cursor-pointer rounded-md p-1 text-text-tertiary hover:bg-state-destructive-hover hover:text-text-destructive'
+                  onClick={() => {
+                    setTempSuggestedQuestions(tempSuggestedQuestions.filter((_, i) => index !== i))
+                  }}
+                  onMouseEnter={() => setDeletingID(index)}
+                  onMouseLeave={() => setDeletingID(null)}
+                >
+                  <RiDeleteBinLine className='h-3.5 w-3.5' />
+                </div>
+              </div>
+            )
+          })}</ReactSortable>
+        {tempSuggestedQuestions.length < MAX_QUESTION_NUM && (
+          <div
+            onClick={() => { setTempSuggestedQuestions([...tempSuggestedQuestions, '']) }}
+            className='mt-1 flex h-9 cursor-pointer items-center gap-2 rounded-lg bg-components-button-tertiary-bg px-3  text-components-button-tertiary-text hover:bg-components-button-tertiary-bg-hover'>
+            <RiAddLine className='h-4 w-4' />
+            <div className='system-sm-medium text-[13px]'>{t('appDebug.variableConfig.addOption')}</div>
+          </div>
+        )}
+      </div>
+    )
+  }
+
+  return (
+    <Modal
+      isShow
+      onClose={noop}
+      className='!mt-14 !w-[640px] !max-w-none !bg-components-panel-bg-blur !p-6'
+    >
+      <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>
+      <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'>
+          <PromptEditor
+            value={tempValue}
+            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>
+      </div>
+      <div className='flex items-center justify-end'>
+        <Button
+          onClick={onCancel}
+          className='mr-2'
+        >
+          {t('common.operation.cancel')}
+        </Button>
+        <Button
+          variant='primary'
+          onClick={() => handleSave()}
+          disabled={isSaveDisabled}
+        >
+          {t('common.operation.save')}
+        </Button>
+      </div>
+      {isShowConfirmAddVar && (
+        <ConfirmAddVar
+          varNameArr={notIncludeKeys}
+          onConfirm={autoAddVar}
+          onCancel={cancelAutoAddVar}
+          onHide={hideConfirmAddVar}
+        />
+      )}
+    </Modal>
+  )
+}
+
+export default OpeningSettingModal

dify/web/app/components/base/features/new-feature-panel/dialog-wrapper.tsx

@@ -0,0 +1,55 @@
+import { Fragment, useCallback } from 'react'
+import type { ReactNode } from 'react'
+import { Dialog, DialogPanel, Transition, TransitionChild } from '@headlessui/react'
+import cn from '@/utils/classnames'
+
+type DialogProps = {
+  className?: string
+  children: ReactNode
+  show: boolean
+  onClose?: () => void
+  inWorkflow?: boolean
+}
+
+const DialogWrapper = ({
+  className,
+  children,
+  show,
+  onClose,
+  inWorkflow = true,
+}: DialogProps) => {
+  const close = useCallback(() => onClose?.(), [onClose])
+  return (
+    <Transition appear show={show} as={Fragment}>
+      <Dialog as="div" className="relative z-40" onClose={close}>
+        <TransitionChild>
+          <div className={cn(
+            'fixed inset-0 bg-black/25',
+            'data-[closed]:opacity-0',
+            'data-[enter]:opacity-100 data-[enter]:duration-300 data-[enter]:ease-out',
+            'data-[leave]:opacity-0 data-[leave]:duration-200 data-[leave]:ease-in',
+          )} />
+        </TransitionChild>
+
+        <div className="fixed inset-0">
+          <div className={cn('flex min-h-full flex-col items-end justify-center pb-2', inWorkflow ? 'pt-[112px]' : 'pr-2 pt-[64px]')}>
+            <TransitionChild>
+              <DialogPanel className={cn(
+                'relative flex h-0 w-[420px] grow flex-col overflow-hidden border-components-panel-border bg-components-panel-bg-alt p-0 text-left align-middle shadow-xl transition-all',
+                inWorkflow ? 'rounded-l-2xl border-b-[0.5px] border-l-[0.5px] border-t-[0.5px]' : 'rounded-2xl border-[0.5px]',
+                'data-[closed]:scale-95  data-[closed]:opacity-0',
+                'data-[enter]:scale-100 data-[enter]:opacity-100 data-[enter]:duration-300 data-[enter]:ease-out',
+                'data-[leave]:scale-95 data-[leave]:opacity-0 data-[leave]:duration-200 data-[leave]:ease-in',
+                className,
+              )}>
+                {children}
+              </DialogPanel>
+            </TransitionChild>
+          </div>
+        </div>
+      </Dialog>
+    </Transition >
+  )
+}
+
+export default DialogWrapper

dify/web/app/components/base/features/new-feature-panel/feature-bar.tsx

@@ -0,0 +1,145 @@
+import React, { useMemo, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { RiApps2AddLine, RiArrowRightLine, RiSparklingFill } from '@remixicon/react'
+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'
+import { useFeatures } from '@/app/components/base/features/hooks'
+import cn from '@/utils/classnames'
+
+type Props = {
+  isChatMode?: boolean
+  showFileUpload?: boolean
+  disabled?: boolean
+  onFeatureBarClick?: (state: boolean) => void
+}
+
+const FeatureBar = ({
+  isChatMode = true,
+  showFileUpload = true,
+  disabled,
+  onFeatureBarClick,
+}: Props) => {
+  const { t } = useTranslation()
+  const features = useFeatures(s => s.features)
+  const [modalOpen, setModalOpen] = useState(false)
+
+  const noFeatureEnabled = useMemo(() => {
+    // completion app citation is always true but not enabled for setting
+    const data = {
+      ...features,
+      citation: { enabled: isChatMode ? features.citation?.enabled : false },
+      file: showFileUpload ? features.file! : { enabled: false },
+    }
+    return !Object.values(data).some(f => f.enabled)
+  }, [features, isChatMode, showFileUpload])
+
+  return (
+    <div className='m-1 mt-0 -translate-y-2 rounded-b-[10px] border-b border-l border-r border-components-panel-border-subtle bg-util-colors-indigo-indigo-50 px-2.5 py-2 pt-4'>
+      {noFeatureEnabled && (
+        <div className='flex cursor-pointer items-end gap-1' onClick={() => onFeatureBarClick?.(true)}>
+          <RiApps2AddLine className='h-3.5 w-3.5 text-text-accent' />
+          <div className='body-xs-medium text-text-accent'>{t('appDebug.feature.bar.empty')}</div>
+          <RiArrowRightLine className='h-3.5 w-3.5 text-text-accent' />
+        </div>
+      )}
+      {!noFeatureEnabled && (
+        <div className='flex items-center gap-2'>
+          <div className='flex shrink-0 items-center gap-0.5'>
+            {!!features.moreLikeThis?.enabled && (
+              <Tooltip
+                popupContent={t('appDebug.feature.moreLikeThis.title')}
+              >
+                <div className='shrink-0 rounded-lg border-[0.5px] border-divider-subtle bg-util-colors-blue-light-blue-light-500 p-1 shadow-xs'>
+                  <RiSparklingFill className='h-3.5 w-3.5 text-text-primary-on-surface' />
+                </div>
+              </Tooltip>
+            )}
+            {!!features.opening?.enabled && (
+              <Tooltip
+                popupContent={t('appDebug.feature.conversationOpener.title')}
+              >
+                <div className='shrink-0 rounded-lg border-[0.5px] border-divider-subtle bg-util-colors-blue-light-blue-light-500 p-1 shadow-xs'>
+                  <LoveMessage className='h-3.5 w-3.5 text-text-primary-on-surface' />
+                </div>
+              </Tooltip>
+            )}
+            {!!features.moderation?.enabled && (
+              <Tooltip
+                popupContent={t('appDebug.feature.moderation.title')}
+              >
+                <div className='shrink-0 rounded-lg border-[0.5px] border-divider-subtle bg-text-success p-1 shadow-xs'>
+                  <ContentModeration className='h-3.5 w-3.5 text-text-primary-on-surface' />
+                </div>
+              </Tooltip>
+            )}
+            {!!features.speech2text?.enabled && (
+              <Tooltip
+                popupContent={t('appDebug.feature.speechToText.title')}
+              >
+                <div className='shrink-0 rounded-lg border-[0.5px] border-divider-subtle bg-util-colors-violet-violet-600 p-1 shadow-xs'>
+                  <Microphone01 className='h-3.5 w-3.5 text-text-primary-on-surface' />
+                </div>
+              </Tooltip>
+            )}
+            {!!features.text2speech?.enabled && (
+              <VoiceSettings placementLeft={false} open={modalOpen && !disabled} onOpen={setModalOpen}>
+                <Tooltip
+                  popupContent={t('appDebug.feature.textToSpeech.title')}
+                >
+                  <div className={cn('shrink-0 rounded-lg border-[0.5px] border-divider-subtle bg-util-colors-violet-violet-600 p-1 shadow-xs', !disabled && 'cursor-pointer')}>
+                    <TextToAudio className='h-3.5 w-3.5 text-text-primary-on-surface' />
+                  </div>
+                </Tooltip>
+              </VoiceSettings>
+            )}
+            {showFileUpload && !!features.file?.enabled && (
+              <Tooltip
+                popupContent={t('appDebug.feature.fileUpload.title')}
+              >
+                <div className='shrink-0 rounded-lg border-[0.5px] border-divider-subtle bg-util-colors-blue-blue-600 p-1 shadow-xs'>
+                  <FolderUpload className='h-3.5 w-3.5 text-text-primary-on-surface' />
+                </div>
+              </Tooltip>
+            )}
+            {!!features.suggested?.enabled && (
+              <Tooltip
+                popupContent={t('appDebug.feature.suggestedQuestionsAfterAnswer.title')}
+              >
+                <div className='shrink-0 rounded-lg border-[0.5px] border-divider-subtle bg-util-colors-blue-light-blue-light-500 p-1 shadow-xs'>
+                  <VirtualAssistant className='h-3.5 w-3.5 text-text-primary-on-surface' />
+                </div>
+              </Tooltip>
+            )}
+            {isChatMode && !!features.citation?.enabled && (
+              <Tooltip
+                popupContent={t('appDebug.feature.citation.title')}
+              >
+                <div className='shrink-0 rounded-lg border-[0.5px] border-divider-subtle bg-util-colors-warning-warning-500 p-1 shadow-xs'>
+                  <Citations className='h-4 w-4 text-text-primary-on-surface' />
+                </div>
+              </Tooltip>
+            )}
+            {isChatMode && !!features.annotationReply?.enabled && (
+              <Tooltip
+                popupContent={t('appDebug.feature.annotation.title')}
+              >
+                <div className='shrink-0 rounded-lg border-[0.5px] border-divider-subtle bg-util-colors-indigo-indigo-600 p-1 shadow-xs'>
+                  <MessageFast className='h-3.5 w-3.5 text-text-primary-on-surface' />
+                </div>
+              </Tooltip>
+            )}
+          </div>
+          <div className='body-xs-regular grow text-text-tertiary'>{t('appDebug.feature.bar.enableText')}</div>
+          <Button className='shrink-0' variant='ghost-accent' size='small' onClick={() => onFeatureBarClick?.(true)}>
+            <div className='mx-1'>{t('appDebug.feature.bar.manage')}</div>
+            <RiArrowRightLine className='h-3.5 w-3.5 text-text-accent' />
+          </Button>
+        </div>
+      )}
+    </div>
+  )
+}
+
+export default FeatureBar

dify/web/app/components/base/features/new-feature-panel/feature-card.tsx

@@ -0,0 +1,61 @@
+import React from 'react'
+import {
+  RiQuestionLine,
+} from '@remixicon/react'
+import Switch from '@/app/components/base/switch'
+import Tooltip from '@/app/components/base/tooltip'
+
+type Props = {
+  icon: any
+  title: any
+  tooltip?: any
+  value: any
+  description?: string
+  children?: React.ReactNode
+  disabled?: boolean
+  onChange?: (state: any) => void
+  onMouseEnter?: () => void
+  onMouseLeave?: () => void
+}
+
+const FeatureCard = ({
+  icon,
+  title,
+  tooltip,
+  value,
+  description,
+  children,
+  disabled,
+  onChange,
+  onMouseEnter,
+  onMouseLeave,
+}: Props) => {
+  return (
+    <div
+      className='mb-1 rounded-xl border-l-[0.5px] border-t-[0.5px] border-effects-highlight bg-background-section-burn p-3'
+      onMouseEnter={onMouseEnter}
+      onMouseLeave={onMouseLeave}
+    >
+      <div className='mb-2 flex items-center gap-2'>
+        {icon}
+        <div className='system-sm-semibold flex grow items-center text-text-secondary'>
+          {title}
+          {tooltip && (
+            <Tooltip
+              popupContent={tooltip}
+            >
+              <div className='ml-0.5 p-px'><RiQuestionLine className='h-3.5 w-3.5 text-text-quaternary' /></div>
+            </Tooltip>
+          )}
+        </div>
+        <Switch disabled={disabled} className='shrink-0' onChange={state => onChange?.(state)} defaultValue={value} />
+      </div>
+      {description && (
+        <div className='system-xs-regular line-clamp-2 min-h-8 text-text-tertiary'>{description}</div>
+      )}
+      {children}
+    </div>
+  )
+}
+
+export default FeatureCard

dify/web/app/components/base/features/new-feature-panel/file-upload/index.tsx

@@ -0,0 +1,105 @@
+import React, { useCallback, useMemo, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { produce } from 'immer'
+import { RiEqualizer2Line } from '@remixicon/react'
+import { FolderUpload } from '@/app/components/base/icons/src/vender/features'
+import FeatureCard from '@/app/components/base/features/new-feature-panel/feature-card'
+import SettingModal from '@/app/components/base/features/new-feature-panel/file-upload/setting-modal'
+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 { FeatureEnum } from '@/app/components/base/features/types'
+
+type Props = {
+  disabled: boolean
+  onChange?: OnFeaturesChange
+}
+
+const FileUpload = ({
+  disabled,
+  onChange,
+}: Props) => {
+  const { t } = useTranslation()
+  const file = useFeatures(s => s.features.file)
+  const featuresStore = useFeaturesStore()
+  const [modalOpen, setModalOpen] = useState(false)
+  const [isHovering, setIsHovering] = useState(false)
+
+  const supportedTypes = useMemo(() => {
+    return file?.allowed_file_types?.join(',') || '-'
+  }, [file?.allowed_file_types])
+
+  const handleChange = useCallback((type: FeatureEnum, enabled: boolean) => {
+    const {
+      features,
+      setFeatures,
+    } = featuresStore!.getState()
+
+    const newFeatures = produce(features, (draft) => {
+      draft[type] = {
+        ...draft[type],
+        enabled,
+        image: { enabled },
+      }
+    })
+    setFeatures(newFeatures)
+    if (onChange)
+      onChange()
+  }, [featuresStore, onChange])
+
+  return (
+    <FeatureCard
+      icon={
+        <div className='shrink-0 rounded-lg border-[0.5px] border-divider-subtle bg-util-colors-blue-blue-600 p-1 shadow-xs'>
+          <FolderUpload className='h-4 w-4 text-text-primary-on-surface' />
+        </div>
+      }
+      title={t('appDebug.feature.fileUpload.title')}
+      value={file?.enabled}
+      onChange={state => handleChange(FeatureEnum.file, state)}
+      onMouseEnter={() => setIsHovering(true)}
+      onMouseLeave={() => setIsHovering(false)}
+      disabled={disabled}
+    >
+      <>
+        {!file?.enabled && (
+          <div className='system-xs-regular line-clamp-2 min-h-8 text-text-tertiary'>{t('appDebug.feature.fileUpload.description')}</div>
+        )}
+        {file?.enabled && (
+          <>
+            {!isHovering && !modalOpen && (
+              <div className='flex items-center gap-4 pt-0.5'>
+                <div className=''>
+                  <div className='system-2xs-medium-uppercase mb-0.5 text-text-tertiary'>{t('appDebug.feature.fileUpload.supportedTypes')}</div>
+                  <div className='system-xs-regular text-text-secondary'>{supportedTypes}</div>
+                </div>
+                <div className='h-[27px] w-px rotate-12 bg-divider-subtle'></div>
+                <div className=''>
+                  <div className='system-2xs-medium-uppercase mb-0.5 text-text-tertiary'>{t('appDebug.feature.fileUpload.numberLimit')}</div>
+                  <div className='system-xs-regular text-text-secondary'>{file?.number_limits}</div>
+                </div>
+              </div>
+            )}
+            {(isHovering || modalOpen) && (
+              <SettingModal
+                open={modalOpen && !disabled}
+                onOpen={(v) => {
+                  setModalOpen(v)
+                  setIsHovering(v)
+                }}
+                onChange={onChange}
+              >
+                <Button className='w-full' disabled={disabled}>
+                  <RiEqualizer2Line className='mr-1 h-4 w-4' />
+                  {t('common.operation.settings')}
+                </Button>
+              </SettingModal>
+            )}
+          </>
+        )}
+      </>
+    </FeatureCard>
+  )
+}
+
+export default FileUpload

dify/web/app/components/base/features/new-feature-panel/file-upload/setting-content.tsx

@@ -0,0 +1,89 @@
+import React, { useCallback, useMemo, useState } from 'react'
+import { produce } from 'immer'
+import { useTranslation } from 'react-i18next'
+import { RiCloseLine } from '@remixicon/react'
+import FileUploadSetting from '@/app/components/workflow/nodes/_base/components/file-upload-setting'
+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 type { UploadFileSetting } from '@/app/components/workflow/types'
+import { SupportUploadFileTypes } from '@/app/components/workflow/types'
+import { FILE_EXTS } from '@/app/components/base/prompt-editor/constants'
+
+type SettingContentProps = {
+  imageUpload?: boolean
+  onClose: () => void
+  onChange?: OnFeaturesChange
+}
+const SettingContent = ({
+  imageUpload,
+  onClose,
+  onChange,
+}: SettingContentProps) => {
+  const { t } = useTranslation()
+  const featuresStore = useFeaturesStore()
+  const file = useFeatures(state => state.features.file)
+  const fileSettingPayload = useMemo(() => {
+    return {
+      allowed_file_upload_methods: file?.allowed_file_upload_methods || ['local_file', 'remote_url'],
+      allowed_file_types: file?.allowed_file_types || [SupportUploadFileTypes.image],
+      allowed_file_extensions: file?.allowed_file_extensions || FILE_EXTS[SupportUploadFileTypes.image],
+      max_length: file?.number_limits || 3,
+    } as UploadFileSetting
+  }, [file])
+  const [tempPayload, setTempPayload] = useState<UploadFileSetting>(fileSettingPayload)
+
+  const handleChange = useCallback(() => {
+    const {
+      features,
+      setFeatures,
+    } = featuresStore!.getState()
+
+    const newFeatures = produce(features, (draft) => {
+      draft.file = {
+        ...draft.file,
+        allowed_file_upload_methods: tempPayload.allowed_file_upload_methods,
+        number_limits: tempPayload.max_length,
+        allowed_file_types: tempPayload.allowed_file_types,
+        allowed_file_extensions: tempPayload.allowed_file_extensions,
+      }
+    })
+
+    setFeatures(newFeatures)
+    if (onChange)
+      onChange()
+  }, [featuresStore, onChange, tempPayload])
+
+  return (
+    <>
+      <div className='mb-4 flex items-center justify-between'>
+        <div className='system-xl-semibold text-text-primary'>{!imageUpload ? t('appDebug.feature.fileUpload.modalTitle') : t('appDebug.feature.imageUpload.modalTitle')}</div>
+        <div className='cursor-pointer p-1' onClick={onClose}><RiCloseLine className='h-4 w-4 text-text-tertiary'/></div>
+      </div>
+      <FileUploadSetting
+        isMultiple
+        inFeaturePanel
+        hideSupportFileType={imageUpload}
+        payload={tempPayload}
+        onChange={(p: UploadFileSetting) => setTempPayload(p)}
+      />
+      <div className='mt-4 flex items-center justify-end'>
+        <Button
+          onClick={onClose}
+          className='mr-2'
+        >
+          {t('common.operation.cancel')}
+        </Button>
+        <Button
+          variant='primary'
+          onClick={handleChange}
+          disabled={tempPayload.allowed_file_types.length === 0}
+        >
+          {t('common.operation.save')}
+        </Button>
+      </div>
+    </>
+  )
+}
+
+export default React.memo(SettingContent)

dify/web/app/components/base/features/new-feature-panel/file-upload/setting-modal.tsx

@@ -0,0 +1,53 @@
+'use client'
+import { memo } from 'react'
+import {
+  PortalToFollowElem,
+  PortalToFollowElemContent,
+  PortalToFollowElemTrigger,
+} from '@/app/components/base/portal-to-follow-elem'
+import SettingContent from '@/app/components/base/features/new-feature-panel/file-upload/setting-content'
+import type { OnFeaturesChange } from '@/app/components/base/features/types'
+
+type FileUploadSettingsProps = {
+  open: boolean
+  onOpen: (state: any) => void
+  onChange?: OnFeaturesChange
+  disabled?: boolean
+  children?: React.ReactNode
+  imageUpload?: boolean
+}
+const FileUploadSettings = ({
+  open,
+  onOpen,
+  onChange,
+  disabled,
+  children,
+  imageUpload,
+}: FileUploadSettingsProps) => {
+  return (
+    <PortalToFollowElem
+      open={open}
+      onOpenChange={onOpen}
+      placement='left'
+      offset={{
+        mainAxis: 32,
+      }}
+    >
+      <PortalToFollowElemTrigger className='flex' onClick={() => !disabled && onOpen((open: boolean) => !open)}>
+        {children}
+      </PortalToFollowElemTrigger>
+      <PortalToFollowElemContent style={{ zIndex: 50 }}>
+        <div className='max-h-[calc(100vh-20px)] w-[360px] overflow-y-auto rounded-2xl border-[0.5px] border-components-panel-border bg-components-panel-bg p-4 shadow-2xl'>
+          <SettingContent
+            imageUpload={imageUpload}
+            onClose={() => onOpen(false)}
+            onChange={(v) => {
+              onChange?.(v)
+              onOpen(false)
+            }} />
+        </div>
+      </PortalToFollowElemContent>
+    </PortalToFollowElem>
+  )
+}
+export default memo(FileUploadSettings)

dify/web/app/components/base/features/new-feature-panel/follow-up.tsx

@@ -0,0 +1,56 @@
+import React, { useCallback } from 'react'
+import { useTranslation } from 'react-i18next'
+import { produce } from 'immer'
+import { VirtualAssistant } from '@/app/components/base/icons/src/vender/features'
+import FeatureCard from '@/app/components/base/features/new-feature-panel/feature-card'
+import { useFeatures, useFeaturesStore } from '@/app/components/base/features/hooks'
+import type { OnFeaturesChange } from '@/app/components/base/features/types'
+import { FeatureEnum } from '@/app/components/base/features/types'
+
+type Props = {
+  disabled?: boolean
+  onChange?: OnFeaturesChange
+}
+
+const FollowUp = ({
+  disabled,
+  onChange,
+}: Props) => {
+  const { t } = useTranslation()
+  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 (
+    <FeatureCard
+      icon={
+        <div className='shrink-0 rounded-lg border-[0.5px] border-divider-subtle bg-util-colors-blue-light-blue-light-500 p-1 shadow-xs'>
+          <VirtualAssistant className='h-4 w-4 text-text-primary-on-surface' />
+        </div>
+      }
+      title={t('appDebug.feature.suggestedQuestionsAfterAnswer.title')}
+      value={!!features.suggested?.enabled}
+      description={t('appDebug.feature.suggestedQuestionsAfterAnswer.description')!}
+      onChange={state => handleChange(FeatureEnum.suggested, state)}
+      disabled={disabled}
+    />
+  )
+}
+
+export default FollowUp

dify/web/app/components/base/features/new-feature-panel/image-upload/index.tsx

@@ -0,0 +1,114 @@
+import React, { useCallback, useMemo, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { produce } from 'immer'
+import { RiEqualizer2Line, RiImage2Fill } from '@remixicon/react'
+import FeatureCard from '@/app/components/base/features/new-feature-panel/feature-card'
+import SettingModal from '@/app/components/base/features/new-feature-panel/file-upload/setting-modal'
+import Badge from '@/app/components/base/badge'
+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 { FeatureEnum } from '@/app/components/base/features/types'
+
+type Props = {
+  disabled: boolean
+  onChange?: OnFeaturesChange
+}
+
+const FileUpload = ({
+  disabled,
+  onChange,
+}: Props) => {
+  const { t } = useTranslation()
+  const file = useFeatures(s => s.features.file)
+  const featuresStore = useFeaturesStore()
+  const [modalOpen, setModalOpen] = useState(false)
+  const [isHovering, setIsHovering] = useState(false)
+
+  const supportedTypes = useMemo(() => {
+    return file?.allowed_file_types?.join(',') || '-'
+  }, [file?.allowed_file_types])
+
+  const handleChange = useCallback((type: FeatureEnum, enabled: boolean) => {
+    const {
+      features,
+      setFeatures,
+    } = featuresStore!.getState()
+
+    const newFeatures = produce(features, (draft) => {
+      draft[type] = {
+        ...draft[type],
+        enabled,
+        image: { enabled },
+      }
+    })
+    setFeatures(newFeatures)
+    if (onChange)
+      onChange()
+  }, [featuresStore, onChange])
+
+  return (
+    <FeatureCard
+      icon={
+        <div className='shrink-0 rounded-lg border-[0.5px] border-divider-subtle bg-util-colors-indigo-indigo-600 p-1 shadow-xs'>
+          <RiImage2Fill className='h-4 w-4 text-text-primary-on-surface' />
+        </div>
+      }
+      title={
+        <div className='flex items-center'>
+          {t('appDebug.feature.imageUpload.title')}
+          <Badge
+            text='LEGACY'
+            className='mx-1 shrink-0 border-text-accent-secondary text-text-accent-secondary'
+          />
+        </div>
+      }
+      value={file?.enabled}
+      onChange={state => handleChange(FeatureEnum.file, state)}
+      onMouseEnter={() => setIsHovering(true)}
+      onMouseLeave={() => setIsHovering(false)}
+      disabled={disabled}
+    >
+      <>
+        {!file?.enabled && (
+          <div className='system-xs-regular line-clamp-2 min-h-8 text-text-tertiary'>{t('appDebug.feature.imageUpload.description')}</div>
+        )}
+        {file?.enabled && (
+          <>
+            {!isHovering && !modalOpen && (
+              <div className='flex items-center gap-4 pt-0.5'>
+                <div className=''>
+                  <div className='system-2xs-medium-uppercase mb-0.5 text-text-tertiary'>{t('appDebug.feature.imageUpload.supportedTypes')}</div>
+                  <div className='system-xs-regular text-text-secondary'>{supportedTypes}</div>
+                </div>
+                <div className='h-[27px] w-px rotate-12 bg-divider-subtle'></div>
+                <div className=''>
+                  <div className='system-2xs-medium-uppercase mb-0.5 text-text-tertiary'>{t('appDebug.feature.imageUpload.numberLimit')}</div>
+                  <div className='system-xs-regular text-text-secondary'>{file?.number_limits}</div>
+                </div>
+              </div>
+            )}
+            {(isHovering || modalOpen) && (
+              <SettingModal
+                imageUpload
+                open={modalOpen && !disabled}
+                onOpen={(v) => {
+                  setModalOpen(v)
+                  setIsHovering(v)
+                }}
+                onChange={onChange}
+              >
+                <Button className='w-full' disabled={disabled}>
+                  <RiEqualizer2Line className='mr-1 h-4 w-4' />
+                  {t('common.operation.settings')}
+                </Button>
+              </SettingModal>
+            )}
+          </>
+        )}
+      </>
+    </FeatureCard>
+  )
+}
+
+export default FileUpload

dify/web/app/components/base/features/new-feature-panel/index.tsx

@@ -0,0 +1,124 @@
+import React from 'react'
+import { useTranslation } from 'react-i18next'
+import { RiCloseLine, RiInformation2Fill } from '@remixicon/react'
+import DialogWrapper from '@/app/components/base/features/new-feature-panel/dialog-wrapper'
+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 MoreLikeThis from '@/app/components/base/features/new-feature-panel/more-like-this'
+import ConversationOpener from '@/app/components/base/features/new-feature-panel/conversation-opener'
+import FollowUp from '@/app/components/base/features/new-feature-panel/follow-up'
+import SpeechToText from '@/app/components/base/features/new-feature-panel/speech-to-text'
+import TextToSpeech from '@/app/components/base/features/new-feature-panel/text-to-speech'
+import FileUpload from '@/app/components/base/features/new-feature-panel/file-upload'
+import Citation from '@/app/components/base/features/new-feature-panel/citation'
+import ImageUpload from '@/app/components/base/features/new-feature-panel/image-upload'
+import Moderation from '@/app/components/base/features/new-feature-panel/moderation'
+import AnnotationReply from '@/app/components/base/features/new-feature-panel/annotation-reply'
+import type { PromptVariable } from '@/models/debug'
+import type { InputVar } from '@/app/components/workflow/types'
+import { useDocLink } from '@/context/i18n'
+
+type Props = {
+  show: boolean
+  isChatMode: boolean
+  disabled: boolean
+  onChange?: OnFeaturesChange
+  onClose: () => void
+  inWorkflow?: boolean
+  showFileUpload?: boolean
+  promptVariables?: PromptVariable[]
+  workflowVariables?: InputVar[]
+  onAutoAddPromptVariable?: (variable: PromptVariable[]) => void
+}
+
+const NewFeaturePanel = ({
+  show,
+  isChatMode,
+  disabled,
+  onChange,
+  onClose,
+  inWorkflow = true,
+  showFileUpload = true,
+  promptVariables,
+  workflowVariables,
+  onAutoAddPromptVariable,
+}: Props) => {
+  const { t } = useTranslation()
+  const docLink = useDocLink()
+  const { data: speech2textDefaultModel } = useDefaultModel(ModelTypeEnum.speech2text)
+  const { data: text2speechDefaultModel } = useDefaultModel(ModelTypeEnum.tts)
+
+  return (
+    <DialogWrapper
+      show={show}
+      onClose={onClose}
+      inWorkflow={inWorkflow}
+    >
+      <div className='flex h-full grow flex-col'>
+        {/* header */}
+        <div className='flex shrink-0 justify-between p-4 pb-3'>
+          <div>
+            <div className='system-xl-semibold text-text-primary'>{t('workflow.common.features')}</div>
+            <div className='body-xs-regular text-text-tertiary'>{t('workflow.common.featuresDescription')}</div>
+          </div>
+          <div className='h-8 w-8 cursor-pointer p-2' onClick={onClose}><RiCloseLine className='h-4 w-4 text-text-tertiary'/></div>
+        </div>
+        {/* list */}
+        <div className='grow basis-0 overflow-y-auto px-4 pb-4'>
+          {showFileUpload && (
+            <div className='relative mb-1 rounded-xl border border-components-panel-border p-2 shadow-xs'>
+              <div className='absolute left-0 top-0 h-full w-full rounded-xl opacity-40' style={{ background: 'linear-gradient(92deg, rgba(11, 165, 236, 0.25) 18.12%, rgba(255, 255, 255, 0.00) 167.31%)' }}></div>
+              <div className='relative flex h-full w-full items-start'>
+                <div className='mr-0.5 shrink-0 p-0.5'>
+                  <RiInformation2Fill className='h-5 w-5 text-text-accent' />
+                </div>
+                <div className='system-xs-medium p-1 text-text-primary'>
+                  <span>{isChatMode ? t('workflow.common.fileUploadTip') : t('workflow.common.ImageUploadLegacyTip')}</span>
+                  <a
+                    className='text-text-accent'
+                    href={docLink('/guides/workflow/bulletin')}
+                    target='_blank' rel='noopener noreferrer'
+                  >{t('workflow.common.featuresDocLink')}</a>
+                </div>
+              </div>
+            </div>
+          )}
+          {!isChatMode && !inWorkflow && (
+            <MoreLikeThis disabled={disabled} onChange={onChange} />
+          )}
+          {isChatMode && (
+            <ConversationOpener
+              disabled={disabled}
+              onChange={onChange}
+              promptVariables={promptVariables}
+              workflowVariables={workflowVariables}
+              onAutoAddPromptVariable={onAutoAddPromptVariable}
+            />
+          )}
+          {isChatMode && (
+            <FollowUp disabled={disabled} onChange={onChange} />
+          )}
+          {text2speechDefaultModel && (isChatMode || !inWorkflow) && (
+            <TextToSpeech disabled={disabled} onChange={onChange} />
+          )}
+          {isChatMode && speech2textDefaultModel && (
+            <SpeechToText disabled={disabled} onChange={onChange} />
+          )}
+          {showFileUpload && isChatMode && <FileUpload disabled={disabled} onChange={onChange} />}
+          {showFileUpload && !isChatMode && <ImageUpload disabled={disabled} onChange={onChange} />}
+          {isChatMode && (
+            <Citation disabled={disabled} onChange={onChange} />
+          )}
+          {(isChatMode || !inWorkflow) && <Moderation disabled={disabled} onChange={onChange} />}
+          {!inWorkflow && isChatMode && (
+            <AnnotationReply disabled={disabled} onChange={onChange} />
+          )}
+        </div>
+      </div>
+    </DialogWrapper>
+  )
+}
+
+export default NewFeaturePanel

dify/web/app/components/base/features/new-feature-panel/moderation/form-generation.tsx

@@ -0,0 +1,80 @@
+import type { FC } from 'react'
+import { useContext } from 'use-context-selector'
+import type { CodeBasedExtensionForm } from '@/models/common'
+import I18n from '@/context/i18n'
+import { PortalSelect } from '@/app/components/base/select'
+import Textarea from '@/app/components/base/textarea'
+import type { ModerationConfig } from '@/models/debug'
+
+type FormGenerationProps = {
+  forms: CodeBasedExtensionForm[]
+  value: ModerationConfig['config']
+  onChange: (v: Record<string, string>) => void
+}
+const FormGeneration: FC<FormGenerationProps> = ({
+  forms,
+  value,
+  onChange,
+}) => {
+  const { locale } = useContext(I18n)
+
+  const handleFormChange = (type: string, v: string) => {
+    onChange({ ...value, [type]: v })
+  }
+
+  return (
+    <>
+      {
+        forms.map((form, index) => (
+          <div
+            key={index}
+            className='py-2'
+          >
+            <div className='flex h-9 items-center text-sm font-medium text-text-primary'>
+              {locale === 'zh-Hans' ? form.label['zh-Hans'] : form.label['en-US']}
+            </div>
+            {
+              form.type === 'text-input' && (
+                <input
+                  value={value?.[form.variable] || ''}
+                  className='block h-9 w-full appearance-none rounded-lg bg-components-input-bg-normal px-3 text-sm text-text-primary outline-none'
+                  placeholder={form.placeholder}
+                  onChange={e => handleFormChange(form.variable, e.target.value)}
+                />
+              )
+            }
+            {
+              form.type === 'paragraph' && (
+                <div className='relative'>
+                  <Textarea
+                    className='resize-none'
+                    value={value?.[form.variable] || ''}
+                    placeholder={form.placeholder}
+                    onChange={e => handleFormChange(form.variable, e.target.value)}
+                  />
+                </div>
+              )
+            }
+            {
+              form.type === 'select' && (
+                <PortalSelect
+                  value={value?.[form.variable]}
+                  items={form.options.map((option) => {
+                    return {
+                      name: option.label[locale === 'zh-Hans' ? 'zh-Hans' : 'en-US'],
+                      value: option.value,
+                    }
+                  })}
+                  onSelect={item => handleFormChange(form.variable, item.value as string)}
+                  popupClassName='w-[576px] !z-[102]'
+                />
+              )
+            }
+          </div>
+        ))
+      }
+    </>
+  )
+}
+
+export default FormGeneration

dify/web/app/components/base/features/new-feature-panel/moderation/index.tsx

@@ -0,0 +1,176 @@
+import React, { useCallback, useMemo, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import useSWR from 'swr'
+import { produce } from 'immer'
+import { useContext } from 'use-context-selector'
+import { RiEqualizer2Line } from '@remixicon/react'
+import { ContentModeration } 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 { FeatureEnum } from '@/app/components/base/features/types'
+import { fetchCodeBasedExtensionList } from '@/service/common'
+import { useModalContext } from '@/context/modal-context'
+import I18n from '@/context/i18n'
+
+type Props = {
+  disabled?: boolean
+  onChange?: OnFeaturesChange
+}
+
+const Moderation = ({
+  disabled,
+  onChange,
+}: Props) => {
+  const { t } = useTranslation()
+  const { setShowModerationSettingModal } = useModalContext()
+  const { locale } = useContext(I18n)
+  const featuresStore = useFeaturesStore()
+  const moderation = useFeatures(s => s.features.moderation)
+  const { data: codeBasedExtensionList } = useSWR(
+    '/code-based-extension?module=moderation',
+    fetchCodeBasedExtensionList,
+  )
+  const [isHovering, setIsHovering] = useState(false)
+
+  const handleOpenModerationSettingModal = () => {
+    if (disabled)
+      return
+
+    const {
+      features,
+      setFeatures,
+    } = featuresStore!.getState()
+    setShowModerationSettingModal({
+      payload: moderation as any,
+      onSaveCallback: (newModeration) => {
+        const newFeatures = produce(features, (draft) => {
+          draft.moderation = newModeration
+        })
+        setFeatures(newFeatures)
+        if (onChange)
+          onChange(newFeatures)
+      },
+      onCancelCallback: () => {
+        if (onChange)
+          onChange()
+      },
+    })
+  }
+
+  const handleChange = useCallback((type: FeatureEnum, enabled: boolean) => {
+    const {
+      features,
+      setFeatures,
+    } = featuresStore!.getState()
+
+    if (enabled && !features.moderation?.type && type === FeatureEnum.moderation) {
+      setShowModerationSettingModal({
+        payload: {
+          enabled: true,
+          type: 'keywords',
+          config: {
+            keywords: '',
+            inputs_config: {
+              enabled: true,
+              preset_response: '',
+            },
+          },
+        },
+        onSaveCallback: (newModeration) => {
+          const newFeatures = produce(features, (draft) => {
+            draft.moderation = newModeration
+          })
+          setFeatures(newFeatures)
+          if (onChange)
+            onChange(newFeatures)
+        },
+        onCancelCallback: () => {
+          const newFeatures = produce(features, (draft) => {
+            draft.moderation = { enabled: false }
+          })
+          setFeatures(newFeatures)
+          if (onChange)
+            onChange()
+        },
+      })
+    }
+
+    if (!enabled) {
+      const newFeatures = produce(features, (draft) => {
+        draft.moderation = { enabled: false }
+      })
+      setFeatures(newFeatures)
+      if (onChange)
+        onChange(newFeatures)
+    }
+  }, [featuresStore, onChange, setShowModerationSettingModal])
+
+  const providerContent = useMemo(() => {
+    if (moderation?.type === 'openai_moderation')
+      return t('appDebug.feature.moderation.modal.provider.openai')
+    else if (moderation?.type === 'keywords')
+      return t('appDebug.feature.moderation.modal.provider.keywords')
+    else if (moderation?.type === 'api')
+      return t('common.apiBasedExtension.selector.title')
+    else
+      return codeBasedExtensionList?.data.find(item => item.name === moderation?.type)?.label[locale] || '-'
+  }, [codeBasedExtensionList?.data, locale, moderation?.type, t])
+
+  const enableContent = useMemo(() => {
+    if (moderation?.config?.inputs_config?.enabled && moderation.config?.outputs_config?.enabled)
+      return t('appDebug.feature.moderation.allEnabled')
+    else if (moderation?.config?.inputs_config?.enabled)
+      return t('appDebug.feature.moderation.inputEnabled')
+    else if (moderation?.config?.outputs_config?.enabled)
+      return t('appDebug.feature.moderation.outputEnabled')
+  }, [moderation?.config?.inputs_config?.enabled, moderation?.config?.outputs_config?.enabled, t])
+
+  return (
+    <FeatureCard
+      icon={
+        <div className='shrink-0 rounded-lg border-[0.5px] border-divider-subtle bg-text-success p-1 shadow-xs'>
+          <ContentModeration className='h-4 w-4 text-text-primary-on-surface' />
+        </div>
+      }
+      title={t('appDebug.feature.moderation.title')}
+      value={!!moderation?.enabled}
+      onChange={state => handleChange(FeatureEnum.moderation, state)}
+      onMouseEnter={() => setIsHovering(true)}
+      onMouseLeave={() => setIsHovering(false)}
+      disabled={disabled}
+    >
+      <>
+        {!moderation?.enabled && (
+          <div className='system-xs-regular line-clamp-2 min-h-8 text-text-tertiary'>{t('appDebug.feature.moderation.description')}</div>
+        )}
+        {!!moderation?.enabled && (
+          <>
+            {!isHovering && (
+              <div className='flex items-center gap-4 pt-0.5'>
+                <div className=''>
+                  <div className='system-2xs-medium-uppercase mb-0.5 text-text-tertiary'>{t('appDebug.feature.moderation.modal.provider.title')}</div>
+                  <div className='system-xs-regular text-text-secondary'>{providerContent}</div>
+                </div>
+                <div className='h-[27px] w-px rotate-12 bg-divider-subtle'></div>
+                <div className=''>
+                  <div className='system-2xs-medium-uppercase mb-0.5 text-text-tertiary'>{t('appDebug.feature.moderation.contentEnableLabel')}</div>
+                  <div className='system-xs-regular text-text-secondary'>{enableContent}</div>
+                </div>
+              </div>
+            )}
+            {isHovering && (
+              <Button className='w-full' onClick={handleOpenModerationSettingModal} disabled={disabled}>
+                <RiEqualizer2Line className='mr-1 h-4 w-4' />
+                {t('common.operation.settings')}
+              </Button>
+            )}
+          </>
+        )}
+      </>
+    </FeatureCard>
+  )
+}
+
+export default Moderation

dify/web/app/components/base/features/new-feature-panel/moderation/moderation-content.tsx

@@ -0,0 +1,72 @@
+import type { FC } from 'react'
+import { useTranslation } from 'react-i18next'
+import Switch from '@/app/components/base/switch'
+import type { ModerationContentConfig } from '@/models/debug'
+
+type ModerationContentProps = {
+  title: string
+  info?: string
+  showPreset?: boolean
+  config: ModerationContentConfig
+  onConfigChange: (config: ModerationContentConfig) => void
+}
+const ModerationContent: FC<ModerationContentProps> = ({
+  title,
+  info,
+  showPreset = true,
+  config,
+  onConfigChange,
+}) => {
+  const { t } = useTranslation()
+
+  const handleConfigChange = (field: string, value: boolean | string) => {
+    if (field === 'preset_response' && typeof value === 'string')
+      value = value.slice(0, 100)
+    onConfigChange({ ...config, [field]: value })
+  }
+
+  return (
+    <div className='py-2'>
+      <div className='rounded-lg border border-components-panel-border bg-components-panel-bg'>
+        <div className='flex h-10 items-center justify-between rounded-lg px-3'>
+          <div className='shrink-0 text-sm font-medium text-text-primary'>{title}</div>
+          <div className='flex grow items-center justify-end'>
+            {
+              info && (
+                <div className='mr-2 truncate text-xs text-text-tertiary' title={info}>{info}</div>
+              )
+            }
+            <Switch
+              size='l'
+              defaultValue={config.enabled}
+              onChange={v => handleConfigChange('enabled', v)}
+            />
+          </div>
+        </div>
+        {
+          config.enabled && showPreset && (
+            <div className='rounded-lg bg-components-panel-bg px-3 pb-3 pt-1'>
+              <div className='flex h-8 items-center justify-between text-[13px] font-medium text-text-secondary'>
+                {t('appDebug.feature.moderation.modal.content.preset')}
+                <span className='text-xs font-normal text-text-tertiary'>{t('appDebug.feature.moderation.modal.content.supportMarkdown')}</span>
+              </div>
+              <div className='relative h-20 rounded-lg bg-components-input-bg-normal px-3 py-2'>
+                <textarea
+                  value={config.preset_response || ''}
+                  className='block h-full w-full resize-none appearance-none bg-transparent text-sm text-text-secondary outline-none'
+                  placeholder={t('appDebug.feature.moderation.modal.content.placeholder') || ''}
+                  onChange={e => handleConfigChange('preset_response', e.target.value)}
+                />
+                <div className='absolute bottom-2 right-2 flex h-5 items-center rounded-md bg-background-section px-1 text-xs font-medium text-text-quaternary'>
+                  <span>{(config.preset_response || '').length}</span>/<span className='text-text-tertiary'>100</span>
+                </div>
+              </div>
+            </div>
+          )
+        }
+      </div>
+    </div>
+  )
+}
+
+export default ModerationContent

dify/web/app/components/base/features/new-feature-panel/moderation/moderation-setting-modal.tsx

@@ -0,0 +1,383 @@
+import type { ChangeEvent, FC } from 'react'
+import { useState } from 'react'
+import useSWR from 'swr'
+import { useContext } from 'use-context-selector'
+import { useTranslation } from 'react-i18next'
+import { RiCloseLine } from '@remixicon/react'
+import ModerationContent from './moderation-content'
+import FormGeneration from './form-generation'
+import ApiBasedExtensionSelector from '@/app/components/header/account-setting/api-based-extension-page/selector'
+import Modal from '@/app/components/base/modal'
+import Button from '@/app/components/base/button'
+import Divider from '@/app/components/base/divider'
+import { BookOpen01 } from '@/app/components/base/icons/src/vender/line/education'
+import type { ModerationConfig, ModerationContentConfig } from '@/models/debug'
+import { useToastContext } from '@/app/components/base/toast'
+import {
+  fetchCodeBasedExtensionList,
+  fetchModelProviders,
+} from '@/service/common'
+import type { CodeBasedExtensionItem } from '@/models/common'
+import I18n from '@/context/i18n'
+import { LanguagesSupported } from '@/i18n-config/language'
+import { InfoCircle } from '@/app/components/base/icons/src/vender/line/general'
+import { useModalContext } from '@/context/modal-context'
+import { CustomConfigurationStatusEnum } from '@/app/components/header/account-setting/model-provider-page/declarations'
+import cn from '@/utils/classnames'
+import { noop } from 'lodash-es'
+import { useDocLink } from '@/context/i18n'
+import { ACCOUNT_SETTING_TAB } from '@/app/components/header/account-setting/constants'
+
+const systemTypes = ['openai_moderation', 'keywords', 'api']
+
+type Provider = {
+  key: string
+  name: string
+  form_schema?: CodeBasedExtensionItem['form_schema']
+}
+
+type ModerationSettingModalProps = {
+  data: ModerationConfig
+  onCancel: () => void
+  onSave: (moderationConfig: ModerationConfig) => void
+}
+
+const ModerationSettingModal: FC<ModerationSettingModalProps> = ({
+  data,
+  onCancel,
+  onSave,
+}) => {
+  const { t } = useTranslation()
+  const docLink = useDocLink()
+  const { notify } = useToastContext()
+  const { locale } = useContext(I18n)
+  const { data: modelProviders, isLoading, mutate } = useSWR('/workspaces/current/model-providers', fetchModelProviders)
+  const [localeData, setLocaleData] = useState<ModerationConfig>(data)
+  const { setShowAccountSettingModal } = useModalContext()
+  const handleOpenSettingsModal = () => {
+    setShowAccountSettingModal({
+      payload: ACCOUNT_SETTING_TAB.PROVIDER,
+      onCancelCallback: () => {
+        mutate()
+      },
+    })
+  }
+  const { data: codeBasedExtensionList } = useSWR(
+    '/code-based-extension?module=moderation',
+    fetchCodeBasedExtensionList,
+  )
+  const openaiProvider = modelProviders?.data.find(item => item.provider === 'langgenius/openai/openai')
+  const systemOpenaiProviderEnabled = openaiProvider?.system_configuration.enabled
+  const systemOpenaiProviderQuota = systemOpenaiProviderEnabled ? openaiProvider?.system_configuration.quota_configurations.find(item => item.quota_type === openaiProvider.system_configuration.current_quota_type) : undefined
+  const systemOpenaiProviderCanUse = systemOpenaiProviderQuota?.is_valid
+  const customOpenaiProvidersCanUse = openaiProvider?.custom_configuration.status === CustomConfigurationStatusEnum.active
+  const isOpenAIProviderConfigured = customOpenaiProvidersCanUse || systemOpenaiProviderCanUse
+  const providers: Provider[] = [
+    {
+      key: 'openai_moderation',
+      name: t('appDebug.feature.moderation.modal.provider.openai'),
+    },
+    {
+      key: 'keywords',
+      name: t('appDebug.feature.moderation.modal.provider.keywords'),
+    },
+    {
+      key: 'api',
+      name: t('common.apiBasedExtension.selector.title'),
+    },
+    ...(
+      codeBasedExtensionList
+        ? codeBasedExtensionList.data.map((item) => {
+          return {
+            key: item.name,
+            name: locale === 'zh-Hans' ? item.label['zh-Hans'] : item.label['en-US'],
+            form_schema: item.form_schema,
+          }
+        })
+        : []
+    ),
+  ]
+
+  const currentProvider = providers.find(provider => provider.key === localeData.type)
+
+  const handleDataTypeChange = (type: string) => {
+    let config: undefined | Record<string, any>
+    const currProvider = providers.find(provider => provider.key === type)
+
+    if (systemTypes.findIndex(t => t === type) < 0 && currProvider?.form_schema) {
+      config = currProvider?.form_schema.reduce((prev, next) => {
+        prev[next.variable] = next.default
+        return prev
+      }, {} as Record<string, any>)
+    }
+    setLocaleData({
+      ...localeData,
+      type,
+      config,
+    })
+  }
+
+  const handleDataKeywordsChange = (e: ChangeEvent<HTMLTextAreaElement>) => {
+    const value = e.target.value
+
+    const arr = value.split('\n').reduce((prev: string[], next: string) => {
+      if (next !== '')
+        prev.push(next.slice(0, 100))
+      if (next === '' && prev[prev.length - 1] !== '')
+        prev.push(next)
+
+      return prev
+    }, [])
+
+    setLocaleData({
+      ...localeData,
+      config: {
+        ...localeData.config,
+        keywords: arr.slice(0, 100).join('\n'),
+      },
+    })
+  }
+
+  const handleDataContentChange = (contentType: string, contentConfig: ModerationContentConfig) => {
+    setLocaleData({
+      ...localeData,
+      config: {
+        ...localeData.config,
+        [contentType]: contentConfig,
+      },
+    })
+  }
+
+  const handleDataApiBasedChange = (apiBasedExtensionId: string) => {
+    setLocaleData({
+      ...localeData,
+      config: {
+        ...localeData.config,
+        api_based_extension_id: apiBasedExtensionId,
+      },
+    })
+  }
+
+  const handleDataExtraChange = (extraValue: Record<string, string>) => {
+    setLocaleData({
+      ...localeData,
+      config: {
+        ...localeData.config,
+        ...extraValue,
+      },
+    })
+  }
+
+  const formatData = (originData: ModerationConfig) => {
+    const { enabled, type, config } = originData
+    const { inputs_config, outputs_config } = config!
+    const params: Record<string, string | undefined> = {}
+
+    if (type === 'keywords')
+      params.keywords = config?.keywords
+
+    if (type === 'api')
+      params.api_based_extension_id = config?.api_based_extension_id
+
+    if (systemTypes.findIndex(t => t === type) < 0 && currentProvider?.form_schema) {
+      currentProvider.form_schema.forEach((form) => {
+        params[form.variable] = config?.[form.variable]
+      })
+    }
+
+    return {
+      type,
+      enabled,
+      config: {
+        inputs_config: inputs_config || { enabled: false },
+        outputs_config: outputs_config || { enabled: false },
+        ...params,
+      },
+    }
+  }
+
+  const handleSave = () => {
+    if (localeData.type === 'openai_moderation' && !isOpenAIProviderConfigured)
+      return
+
+    if (!localeData.config?.inputs_config?.enabled && !localeData.config?.outputs_config?.enabled) {
+      notify({ type: 'error', message: t('appDebug.feature.moderation.modal.content.condition') })
+      return
+    }
+
+    if (localeData.type === 'keywords' && !localeData.config.keywords) {
+      notify({ type: 'error', message: t('appDebug.errorMessage.valueOfVarRequired', { key: locale !== LanguagesSupported[1] ? 'keywords' : '关键词' }) })
+      return
+    }
+
+    if (localeData.type === 'api' && !localeData.config.api_based_extension_id) {
+      notify({ type: 'error', message: t('appDebug.errorMessage.valueOfVarRequired', { key: locale !== LanguagesSupported[1] ? 'API Extension' : 'API 扩展' }) })
+      return
+    }
+
+    if (systemTypes.findIndex(t => t === localeData.type) < 0 && currentProvider?.form_schema) {
+      for (let i = 0; i < currentProvider.form_schema.length; i++) {
+        if (!localeData.config?.[currentProvider.form_schema[i].variable] && currentProvider.form_schema[i].required) {
+          notify({
+            type: 'error',
+            message: t('appDebug.errorMessage.valueOfVarRequired', { key: locale !== LanguagesSupported[1] ? currentProvider.form_schema[i].label['en-US'] : currentProvider.form_schema[i].label['zh-Hans'] }),
+          })
+          return
+        }
+      }
+    }
+
+    if (localeData.config.inputs_config?.enabled && !localeData.config.inputs_config.preset_response && localeData.type !== 'api') {
+      notify({ type: 'error', message: t('appDebug.feature.moderation.modal.content.errorMessage') })
+      return
+    }
+
+    if (localeData.config.outputs_config?.enabled && !localeData.config.outputs_config.preset_response && localeData.type !== 'api') {
+      notify({ type: 'error', message: t('appDebug.feature.moderation.modal.content.errorMessage') })
+      return
+    }
+
+    onSave(formatData(localeData))
+  }
+
+  return (
+    <Modal
+      isShow
+      onClose={noop}
+      className='!mt-14 !w-[600px] !max-w-none !p-6'
+    >
+      <div className='flex items-center justify-between'>
+        <div className='title-2xl-semi-bold text-text-primary'>{t('appDebug.feature.moderation.modal.title')}</div>
+        <div className='cursor-pointer p-1' onClick={onCancel}><RiCloseLine className='h-4 w-4 text-text-tertiary' /></div>
+      </div>
+      <div className='py-2'>
+        <div className='text-sm font-medium leading-9 text-text-primary'>
+          {t('appDebug.feature.moderation.modal.provider.title')}
+        </div>
+        <div className='grid grid-cols-3 gap-2.5'>
+          {
+            providers.map(provider => (
+              <div
+                key={provider.key}
+                className={cn(
+                  'system-sm-regular flex h-8 cursor-default items-center rounded-md border border-components-option-card-option-border bg-components-option-card-option-bg px-2 text-text-secondary',
+                  localeData.type !== provider.key && 'cursor-pointer hover:border-components-option-card-option-border-hover hover:bg-components-option-card-option-bg-hover hover:shadow-xs',
+                  localeData.type === provider.key && 'system-sm-medium border-[1.5px] border-components-option-card-option-selected-border bg-components-option-card-option-selected-bg shadow-xs',
+                  localeData.type === 'openai_moderation' && provider.key === 'openai_moderation' && !isOpenAIProviderConfigured && 'text-text-disabled',
+                )}
+                onClick={() => handleDataTypeChange(provider.key)}
+              >
+                <div className={cn(
+                  'mr-2 h-4 w-4 rounded-full border border-components-radio-border bg-components-radio-bg shadow-xs',
+                  localeData.type === provider.key && 'border-[5px] border-components-radio-border-checked',
+                )}></div>
+                {provider.name}
+              </div>
+            ))
+          }
+        </div>
+        {
+          !isLoading && !isOpenAIProviderConfigured && localeData.type === 'openai_moderation' && (
+            <div className='mt-2 flex items-center rounded-lg border border-[#FEF0C7] bg-[#FFFAEB] px-3 py-2'>
+              <InfoCircle className='mr-1 h-4 w-4 text-[#F79009]' />
+              <div className='flex items-center text-xs font-medium text-gray-700'>
+                {t('appDebug.feature.moderation.modal.openaiNotConfig.before')}
+                <span
+                  className='cursor-pointer text-primary-600'
+                  onClick={handleOpenSettingsModal}
+                >
+                  &nbsp;{t('common.settings.provider')}&nbsp;
+                </span>
+                {t('appDebug.feature.moderation.modal.openaiNotConfig.after')}
+              </div>
+            </div>
+          )
+        }
+      </div>
+      {
+        localeData.type === 'keywords' && (
+          <div className='py-2'>
+            <div className='mb-1 text-sm font-medium text-text-primary'>{t('appDebug.feature.moderation.modal.provider.keywords')}</div>
+            <div className='mb-2 text-xs text-text-tertiary'>{t('appDebug.feature.moderation.modal.keywords.tip')}</div>
+            <div className='relative h-[88px] rounded-lg bg-components-input-bg-normal px-3 py-2'>
+              <textarea
+                value={localeData.config?.keywords || ''}
+                onChange={handleDataKeywordsChange}
+                className='block h-full w-full resize-none appearance-none bg-transparent text-sm text-text-secondary outline-none'
+                placeholder={t('appDebug.feature.moderation.modal.keywords.placeholder') || ''}
+              />
+              <div className='absolute bottom-2 right-2 flex h-5 items-center rounded-md bg-background-section px-1 text-xs font-medium text-text-quaternary'>
+                <span>{(localeData.config?.keywords || '').split('\n').filter(Boolean).length}</span>/<span className='text-text-tertiary'>100 {t('appDebug.feature.moderation.modal.keywords.line')}</span>
+              </div>
+            </div>
+          </div>
+        )
+      }
+      {
+        localeData.type === 'api' && (
+          <div className='py-2'>
+            <div className='flex h-9 items-center justify-between'>
+              <div className='text-sm font-medium text-text-primary'>{t('common.apiBasedExtension.selector.title')}</div>
+              <a
+                href={docLink('/guides/extension/api-based-extension/README')}
+                target='_blank' rel='noopener noreferrer'
+                className='group flex items-center text-xs text-text-tertiary hover:text-primary-600'
+              >
+                <BookOpen01 className='mr-1 h-3 w-3 text-text-tertiary group-hover:text-primary-600' />
+                {t('common.apiBasedExtension.link')}
+              </a>
+            </div>
+            <ApiBasedExtensionSelector
+              value={localeData.config?.api_based_extension_id || ''}
+              onChange={handleDataApiBasedChange}
+            />
+          </div>
+        )
+      }
+      {
+        systemTypes.findIndex(t => t === localeData.type) < 0
+        && currentProvider?.form_schema
+        && (
+          <FormGeneration
+            forms={currentProvider?.form_schema}
+            value={localeData.config}
+            onChange={handleDataExtraChange}
+          />
+        )
+      }
+      <Divider bgStyle='gradient' className='my-3 h-px' />
+      <ModerationContent
+        title={t('appDebug.feature.moderation.modal.content.input') || ''}
+        config={localeData.config?.inputs_config || { enabled: false, preset_response: '' }}
+        onConfigChange={config => handleDataContentChange('inputs_config', config)}
+        info={(localeData.type === 'api' && t('appDebug.feature.moderation.modal.content.fromApi')) || ''}
+        showPreset={localeData.type !== 'api'}
+      />
+      <ModerationContent
+        title={t('appDebug.feature.moderation.modal.content.output') || ''}
+        config={localeData.config?.outputs_config || { enabled: false, preset_response: '' }}
+        onConfigChange={config => handleDataContentChange('outputs_config', config)}
+        info={(localeData.type === 'api' && t('appDebug.feature.moderation.modal.content.fromApi')) || ''}
+        showPreset={localeData.type !== 'api'}
+      />
+      <div className='mb-8 mt-1 text-xs font-medium text-text-tertiary'>{t('appDebug.feature.moderation.modal.content.condition')}</div>
+      <div className='flex items-center justify-end'>
+        <Button
+          onClick={onCancel}
+          className='mr-2'
+        >
+          {t('common.operation.cancel')}
+        </Button>
+        <Button
+          variant='primary'
+          onClick={handleSave}
+          disabled={localeData.type === 'openai_moderation' && !isOpenAIProviderConfigured}
+        >
+          {t('common.operation.save')}
+        </Button>
+      </div>
+    </Modal>
+  )
+}
+
+export default ModerationSettingModal

dify/web/app/components/base/features/new-feature-panel/more-like-this.tsx

@@ -0,0 +1,57 @@
+import React, { useCallback } from 'react'
+import { useTranslation } from 'react-i18next'
+import { produce } from 'immer'
+import { RiSparklingFill } from '@remixicon/react'
+import FeatureCard from '@/app/components/base/features/new-feature-panel/feature-card'
+import { useFeatures, useFeaturesStore } from '@/app/components/base/features/hooks'
+import type { OnFeaturesChange } from '@/app/components/base/features/types'
+import { FeatureEnum } from '@/app/components/base/features/types'
+
+type Props = {
+  disabled?: boolean
+  onChange?: OnFeaturesChange
+}
+
+const MoreLikeThis = ({
+  disabled,
+  onChange,
+}: Props) => {
+  const { t } = useTranslation()
+  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()
+  }, [featuresStore, onChange])
+
+  return (
+    <FeatureCard
+      icon={
+        <div className='shrink-0 rounded-lg border-[0.5px] border-divider-subtle bg-util-colors-blue-light-blue-light-500 p-1 shadow-xs'>
+          <RiSparklingFill className='h-4 w-4 text-text-primary-on-surface' />
+        </div>
+      }
+      title={t('appDebug.feature.moreLikeThis.title')}
+      tooltip={t('appDebug.feature.moreLikeThis.tip')}
+      value={!!features.moreLikeThis?.enabled}
+      description={t('appDebug.feature.moreLikeThis.description')!}
+      onChange={state => handleChange(FeatureEnum.moreLikeThis, state)}
+      disabled={disabled}
+    />
+  )
+}
+
+export default MoreLikeThis

dify/web/app/components/base/features/new-feature-panel/speech-to-text.tsx

@@ -0,0 +1,56 @@
+import React, { useCallback } from 'react'
+import { useTranslation } from 'react-i18next'
+import { produce } from 'immer'
+import { Microphone01 } from '@/app/components/base/icons/src/vender/features'
+import FeatureCard from '@/app/components/base/features/new-feature-panel/feature-card'
+import { useFeatures, useFeaturesStore } from '@/app/components/base/features/hooks'
+import type { OnFeaturesChange } from '@/app/components/base/features/types'
+import { FeatureEnum } from '@/app/components/base/features/types'
+
+type Props = {
+  disabled: boolean
+  onChange?: OnFeaturesChange
+}
+
+const SpeechToText = ({
+  disabled,
+  onChange,
+}: Props) => {
+  const { t } = useTranslation()
+  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()
+  }, [featuresStore, onChange])
+
+  return (
+    <FeatureCard
+      icon={
+        <div className='shrink-0 rounded-lg border-[0.5px] border-divider-subtle bg-util-colors-violet-violet-600 p-1 shadow-xs'>
+          <Microphone01 className='h-4 w-4 text-text-primary-on-surface' />
+        </div>
+      }
+      title={t('appDebug.feature.speechToText.title')}
+      value={!!features.speech2text?.enabled}
+      description={t('appDebug.feature.speechToText.description')!}
+      onChange={state => handleChange(FeatureEnum.speech2text, state)}
+      disabled={disabled}
+    />
+  )
+}
+
+export default SpeechToText

dify/web/app/components/base/features/new-feature-panel/text-to-speech/index.tsx

@@ -0,0 +1,102 @@
+import React, { useCallback, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { produce } from 'immer'
+import { RiEqualizer2Line } from '@remixicon/react'
+import { TextToAudio } 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 VoiceSettings from '@/app/components/base/features/new-feature-panel/text-to-speech/voice-settings'
+import { useFeatures, useFeaturesStore } from '@/app/components/base/features/hooks'
+import type { OnFeaturesChange } from '@/app/components/base/features/types'
+import { FeatureEnum } from '@/app/components/base/features/types'
+import { languages } from '@/i18n-config/language'
+import { TtsAutoPlay } from '@/types/app'
+
+type Props = {
+  disabled: boolean
+  onChange?: OnFeaturesChange
+}
+
+const TextToSpeech = ({
+  disabled,
+  onChange,
+}: Props) => {
+  const { t } = useTranslation()
+  const textToSpeech = useFeatures(s => s.features.text2speech) // .language .voice .autoPlay
+  const languageInfo = languages.find(i => i.value === textToSpeech?.language)
+  const [modalOpen, setModalOpen] = useState(false)
+  const [isHovering, setIsHovering] = useState(false)
+  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()
+  }, [featuresStore, onChange])
+
+  return (
+    <FeatureCard
+      icon={
+        <div className='shrink-0 rounded-lg border-[0.5px] border-divider-subtle bg-util-colors-violet-violet-600 p-1 shadow-xs'>
+          <TextToAudio className='h-4 w-4 text-text-primary-on-surface' />
+        </div>
+      }
+      title={t('appDebug.feature.textToSpeech.title')}
+      value={!!features.text2speech?.enabled}
+      onChange={state => handleChange(FeatureEnum.text2speech, state)}
+      onMouseEnter={() => setIsHovering(true)}
+      onMouseLeave={() => setIsHovering(false)}
+      disabled={disabled}
+    >
+      <>
+        {!features.text2speech?.enabled && (
+          <div className='system-xs-regular line-clamp-2 min-h-8 text-text-tertiary'>{t('appDebug.feature.textToSpeech.description')}</div>
+        )}
+        {!!features.text2speech?.enabled && (
+          <>
+            {!isHovering && !modalOpen && (
+              <div className='flex items-center gap-4 pt-0.5'>
+                <div className=''>
+                  <div className='system-2xs-medium-uppercase mb-0.5 text-text-tertiary'>{t('appDebug.voice.voiceSettings.language')}</div>
+                  <div className='system-xs-regular text-text-secondary'>{languageInfo?.name || '-'}</div>
+                </div>
+                <div className='h-[27px] w-px rotate-12 bg-divider-subtle'></div>
+                <div className=''>
+                  <div className='system-2xs-medium-uppercase mb-0.5 text-text-tertiary'>{t('appDebug.voice.voiceSettings.voice')}</div>
+                  <div className='system-xs-regular text-text-secondary'>{features.text2speech?.voice || t('appDebug.voice.defaultDisplay')}</div>
+                </div>
+                <div className='h-[27px] w-px rotate-12 bg-divider-subtle'></div>
+                <div className=''>
+                  <div className='system-2xs-medium-uppercase mb-0.5 text-text-tertiary'>{t('appDebug.voice.voiceSettings.autoPlay')}</div>
+                  <div className='system-xs-regular text-text-secondary'>{features.text2speech?.autoPlay === TtsAutoPlay.enabled ? t('appDebug.voice.voiceSettings.autoPlayEnabled') : t('appDebug.voice.voiceSettings.autoPlayDisabled')}</div>
+                </div>
+              </div>
+            )}
+            {(isHovering || modalOpen) && (
+              <VoiceSettings open={modalOpen && !disabled} onOpen={setModalOpen} onChange={onChange}>
+                <Button className='w-full' disabled={disabled}>
+                  <RiEqualizer2Line className='mr-1 h-4 w-4' />
+                  {t('appDebug.voice.voiceSettings.title')}
+                </Button>
+              </VoiceSettings>
+            )}
+          </>
+        )}
+      </>
+    </FeatureCard>
+  )
+}
+
+export default TextToSpeech

dify/web/app/components/base/features/new-feature-panel/text-to-speech/param-config-content.tsx

@@ -0,0 +1,240 @@
+'use client'
+import useSWR from 'swr'
+import { produce } from 'immer'
+import React, { Fragment } from 'react'
+import { usePathname } from 'next/navigation'
+import { useTranslation } from 'react-i18next'
+import { RiCloseLine } from '@remixicon/react'
+import { Listbox, ListboxButton, ListboxOption, ListboxOptions, Transition } from '@headlessui/react'
+import { CheckIcon, ChevronDownIcon } from '@heroicons/react/20/solid'
+import { useFeatures, useFeaturesStore } from '@/app/components/base/features/hooks'
+import type { Item } from '@/app/components/base/select'
+import { fetchAppVoices } from '@/service/apps'
+import Tooltip from '@/app/components/base/tooltip'
+import Switch from '@/app/components/base/switch'
+import AudioBtn from '@/app/components/base/audio-btn'
+import { languages } from '@/i18n-config/language'
+import { TtsAutoPlay } from '@/types/app'
+import type { OnFeaturesChange } from '@/app/components/base/features/types'
+import classNames from '@/utils/classnames'
+
+type VoiceParamConfigProps = {
+  onClose: () => void
+  onChange?: OnFeaturesChange
+}
+const VoiceParamConfig = ({
+  onClose,
+  onChange,
+}: VoiceParamConfigProps) => {
+  const { t } = useTranslation()
+  const pathname = usePathname()
+  const matched = pathname.match(/\/app\/([^/]+)/)
+  const appId = (matched?.length && matched[1]) ? matched[1] : ''
+  const text2speech = useFeatures(state => state.features.text2speech)
+  const featuresStore = useFeaturesStore()
+
+  let languageItem = languages.find(item => item.value === text2speech?.language)
+  if (languages && !languageItem)
+    languageItem = languages[0]
+  const localLanguagePlaceholder = languageItem?.name || t('common.placeholder.select')
+
+  const language = languageItem?.value
+  const voiceItems = useSWR({ appId, language }, fetchAppVoices).data
+  let voiceItem = voiceItems?.find(item => item.value === text2speech?.voice)
+  if (voiceItems && !voiceItem)
+    voiceItem = voiceItems[0]
+  const localVoicePlaceholder = voiceItem?.name || t('common.placeholder.select')
+
+  const handleChange = (value: Record<string, string>) => {
+    const {
+      features,
+      setFeatures,
+    } = featuresStore!.getState()
+
+    const newFeatures = produce(features, (draft) => {
+      draft.text2speech = {
+        ...draft.text2speech,
+        ...value,
+      }
+    })
+
+    setFeatures(newFeatures)
+    if (onChange)
+      onChange()
+  }
+
+  return (
+    <>
+      <div className='mb-4 flex items-center justify-between'>
+        <div className='system-xl-semibold text-text-primary'>{t('appDebug.voice.voiceSettings.title')}</div>
+        <div className='cursor-pointer p-1' onClick={onClose}><RiCloseLine className='h-4 w-4 text-text-tertiary' /></div>
+      </div>
+      <div className='mb-3'>
+        <div className='system-sm-semibold mb-1 flex items-center py-1 text-text-secondary'>
+          {t('appDebug.voice.voiceSettings.language')}
+          <Tooltip
+            popupContent={
+              <div className='w-[180px]'>
+                {t('appDebug.voice.voiceSettings.resolutionTooltip').split('\n').map(item => (
+                  <div key={item}>{item}
+                  </div>
+                ))}
+              </div>
+            }
+          />
+        </div>
+        <Listbox
+          value={languageItem}
+          onChange={(value: Item) => {
+            handleChange({
+              language: String(value.value),
+            })
+          }}
+        >
+          <div className='relative h-8'>
+            <ListboxButton
+              className={'h-full w-full cursor-pointer rounded-lg border-0 bg-components-input-bg-normal py-1.5 pl-3 pr-10 focus-visible:bg-state-base-hover focus-visible:outline-none group-hover:bg-state-base-hover sm:text-sm sm:leading-6'}>
+              <span className={classNames('block truncate text-left text-text-secondary', !languageItem?.name && 'text-text-tertiary')}>
+                {languageItem?.name ? t(`common.voice.language.${languageItem?.value.replace('-', '')}`) : localLanguagePlaceholder}
+              </span>
+              <span className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2">
+                <ChevronDownIcon
+                  className="h-4 w-4 text-text-tertiary"
+                  aria-hidden="true"
+                />
+              </span>
+            </ListboxButton>
+            <Transition
+              as={Fragment}
+              leave="transition ease-in duration-100"
+              leaveFrom="opacity-100"
+              leaveTo="opacity-0"
+            >
+
+              <ListboxOptions
+                className="absolute z-10 mt-1 max-h-60 w-full overflow-auto rounded-md border-[0.5px] border-components-panel-border bg-components-panel-bg px-1 py-1 text-base shadow-lg focus:outline-none sm:text-sm">
+                {languages.map((item: Item) => (
+                  <ListboxOption
+                    key={item.value}
+                    className={
+                      'relative cursor-pointer select-none rounded-lg py-2 pl-3 pr-9 text-text-secondary hover:bg-state-base-hover data-[active]:bg-state-base-active'
+                    }
+                    value={item}
+                    disabled={false}
+                  >
+                    {({ /* active, */ selected }) => (
+                      <>
+                        <span
+                          className={classNames('block', selected && 'font-normal')}>{t(`common.voice.language.${(item.value).toString().replace('-', '')}`)}</span>
+                        {(selected || item.value === text2speech?.language) && (
+                          <span
+                            className={classNames(
+                              'absolute inset-y-0 right-0 flex items-center pr-4 text-text-secondary',
+                            )}
+                          >
+                            <CheckIcon className="h-4 w-4" aria-hidden="true" />
+                          </span>
+                        )}
+                      </>
+                    )}
+                  </ListboxOption>
+                ))}
+              </ListboxOptions>
+            </Transition>
+          </div>
+        </Listbox>
+      </div>
+      <div className='mb-3'>
+        <div className='system-sm-semibold mb-1 py-1 text-text-secondary'>
+          {t('appDebug.voice.voiceSettings.voice')}
+        </div>
+        <div className='flex items-center gap-1'>
+          <Listbox
+            value={voiceItem ?? {}}
+            disabled={!languageItem}
+            onChange={(value: Item) => {
+              handleChange({
+                voice: String(value.value),
+              })
+            }}
+          >
+            <div className={'relative h-8 grow'}>
+              <ListboxButton
+                className={'h-full w-full cursor-pointer rounded-lg border-0 bg-components-input-bg-normal py-1.5 pl-3 pr-10 focus-visible:bg-state-base-hover focus-visible:outline-none group-hover:bg-state-base-hover sm:text-sm sm:leading-6'}>
+                <span
+                  className={classNames('block truncate text-left text-text-secondary', !voiceItem?.name && 'text-text-tertiary')}>{voiceItem?.name ?? localVoicePlaceholder}</span>
+                <span className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2">
+                  <ChevronDownIcon
+                    className="h-4 w-4 text-text-tertiary"
+                    aria-hidden="true"
+                  />
+                </span>
+              </ListboxButton>
+              <Transition
+                as={Fragment}
+                leave="transition ease-in duration-100"
+                leaveFrom="opacity-100"
+                leaveTo="opacity-0"
+              >
+
+                <ListboxOptions
+                  className="absolute z-10 mt-1 max-h-60 w-full overflow-auto rounded-md border-[0.5px] border-components-panel-border bg-components-panel-bg px-1 py-1 text-base shadow-lg focus:outline-none sm:text-sm">
+                  {voiceItems?.map((item: Item) => (
+                    <ListboxOption
+                      key={item.value}
+                      className={
+                        'relative cursor-pointer select-none rounded-lg py-2 pl-3 pr-9 text-text-secondary hover:bg-state-base-hover data-[active]:bg-state-base-active'
+                      }
+                      value={item}
+                      disabled={false}
+                    >
+                      {({ /* active, */ selected }) => (
+                        <>
+                          <span className={classNames('block', selected && 'font-normal')}>{item.name}</span>
+                          {(selected || item.value === text2speech?.voice) && (
+                            <span
+                              className={classNames(
+                                'absolute inset-y-0 right-0 flex items-center pr-4 text-text-secondary',
+                              )}
+                            >
+                              <CheckIcon className="h-4 w-4" aria-hidden="true" />
+                            </span>
+                          )}
+                        </>
+                      )}
+                    </ListboxOption>
+                  ))}
+                </ListboxOptions>
+              </Transition>
+            </div>
+          </Listbox>
+          {languageItem?.example && (
+            <div className='h-8 shrink-0 rounded-lg bg-components-button-tertiary-bg p-1'>
+              <AudioBtn
+                value={languageItem?.example}
+                isAudition
+                voice={text2speech?.voice}
+                noCache
+              />
+            </div>
+          )}
+        </div>
+      </div>
+      <div>
+        <div className='system-sm-semibold mb-1 py-1 text-text-secondary'>
+          {t('appDebug.voice.voiceSettings.autoPlay')}
+        </div>
+        <Switch className='shrink-0'
+          defaultValue={text2speech?.autoPlay === TtsAutoPlay.enabled}
+          onChange={(value: boolean) => {
+            handleChange({
+              autoPlay: value ? TtsAutoPlay.enabled : TtsAutoPlay.disabled,
+            })
+          }}
+        />
+      </div>
+    </>
+  )
+}
+
+export default React.memo(VoiceParamConfig)

dify/web/app/components/base/features/new-feature-panel/text-to-speech/voice-settings.tsx

@@ -0,0 +1,47 @@
+'use client'
+import { memo } from 'react'
+import {
+  PortalToFollowElem,
+  PortalToFollowElemContent,
+  PortalToFollowElemTrigger,
+} from '@/app/components/base/portal-to-follow-elem'
+import ParamConfigContent from '@/app/components/base/features/new-feature-panel/text-to-speech/param-config-content'
+import type { OnFeaturesChange } from '@/app/components/base/features/types'
+
+type VoiceSettingsProps = {
+  open: boolean
+  onOpen: (state: any) => void
+  onChange?: OnFeaturesChange
+  disabled?: boolean
+  children?: React.ReactNode
+  placementLeft?: boolean
+}
+const VoiceSettings = ({
+  open,
+  onOpen,
+  onChange,
+  disabled,
+  children,
+  placementLeft = true,
+}: VoiceSettingsProps) => {
+  return (
+    <PortalToFollowElem
+      open={open}
+      onOpenChange={onOpen}
+      placement={placementLeft ? 'left' : 'top'}
+      offset={{
+        mainAxis: placementLeft ? 32 : 4,
+      }}
+    >
+      <PortalToFollowElemTrigger className='flex' onClick={() => !disabled && onOpen((open: boolean) => !open)}>
+        {children}
+      </PortalToFollowElemTrigger>
+      <PortalToFollowElemContent style={{ zIndex: 50 }}>
+        <div className='w-[360px] rounded-2xl border-[0.5px] border-components-panel-border bg-components-panel-bg p-4 shadow-2xl'>
+          <ParamConfigContent onClose={() => onOpen(false)} onChange={onChange} />
+        </div>
+      </PortalToFollowElemContent>
+    </PortalToFollowElem>
+  )
+}
+export default memo(VoiceSettings)

dify/web/app/components/base/features/store.ts

@@ -0,0 +1,66 @@
+import { createStore } from 'zustand'
+import type { Features } from './types'
+import { Resolution, TransferMethod } from '@/types/app'
+
+export type FeaturesModal = {
+  showFeaturesModal: boolean
+  setShowFeaturesModal: (showFeaturesModal: boolean) => void
+}
+
+export type FeaturesState = {
+  features: Features
+}
+
+export type FeaturesAction = {
+  setFeatures: (features: Features) => void
+}
+
+export type FeatureStoreState = FeaturesState & FeaturesAction & FeaturesModal
+
+export type FeaturesStore = ReturnType<typeof createFeaturesStore>
+
+export const createFeaturesStore = (initProps?: Partial<FeaturesState>) => {
+  const DEFAULT_PROPS: FeaturesState = {
+    features: {
+      moreLikeThis: {
+        enabled: false,
+      },
+      opening: {
+        enabled: false,
+      },
+      suggested: {
+        enabled: false,
+      },
+      text2speech: {
+        enabled: false,
+      },
+      speech2text: {
+        enabled: false,
+      },
+      citation: {
+        enabled: false,
+      },
+      moderation: {
+        enabled: false,
+      },
+      file: {
+        image: {
+          enabled: false,
+          detail: Resolution.high,
+          number_limits: 3,
+          transfer_methods: [TransferMethod.local_file, TransferMethod.remote_url],
+        },
+      },
+      annotationReply: {
+        enabled: false,
+      },
+    },
+  }
+  return createStore<FeatureStoreState>()(set => ({
+    ...DEFAULT_PROPS,
+    ...initProps,
+    setFeatures: features => set(() => ({ features })),
+    showFeaturesModal: false,
+    setShowFeaturesModal: showFeaturesModal => set(() => ({ showFeaturesModal })),
+  }))
+}

dify/web/app/components/base/features/types.ts

@@ -0,0 +1,104 @@
+import type { Resolution, TransferMethod, TtsAutoPlay } from '@/types/app'
+import type { FileUploadConfigResponse } from '@/models/common'
+
+export type EnabledOrDisabled = {
+  enabled?: boolean
+}
+
+export type MoreLikeThis = EnabledOrDisabled
+
+export type OpeningStatement = EnabledOrDisabled & {
+  opening_statement?: string
+  suggested_questions?: string[]
+}
+
+export type SuggestedQuestionsAfterAnswer = EnabledOrDisabled
+
+export type TextToSpeech = EnabledOrDisabled & {
+  language?: string
+  voice?: string
+  autoPlay?: TtsAutoPlay
+}
+
+export type SpeechToText = EnabledOrDisabled
+
+export type RetrieverResource = EnabledOrDisabled
+
+export type SensitiveWordAvoidance = EnabledOrDisabled & {
+  type?: string
+  config?: any
+}
+
+export enum PreviewMode {
+  NewPage = 'new_page',
+  CurrentPage = 'current_page',
+}
+
+export type FileUpload = {
+  image?: EnabledOrDisabled & {
+    detail?: Resolution
+    number_limits?: number
+    transfer_methods?: TransferMethod[]
+  }
+  document?: EnabledOrDisabled & {
+    number_limits?: number
+    transfer_methods?: TransferMethod[]
+  }
+  audio?: EnabledOrDisabled & {
+    number_limits?: number
+    transfer_methods?: TransferMethod[]
+  }
+  video?: EnabledOrDisabled & {
+    number_limits?: number
+    transfer_methods?: TransferMethod[]
+  }
+  custom?: EnabledOrDisabled & {
+    number_limits?: number
+    transfer_methods?: TransferMethod[]
+  }
+  allowed_file_types?: string[]
+  allowed_file_extensions?: string[]
+  allowed_file_upload_methods?: TransferMethod[]
+  number_limits?: number
+  fileUploadConfig?: FileUploadConfigResponse
+  preview_config?: {
+    mode?: PreviewMode
+    file_type_list?: string[]
+  }
+} & EnabledOrDisabled
+
+export type AnnotationReplyConfig = {
+  enabled: boolean
+  id?: string
+  score_threshold?: number
+  embedding_model?: {
+    embedding_provider_name: string
+    embedding_model_name: string
+  }
+}
+
+export enum FeatureEnum {
+  moreLikeThis = 'moreLikeThis',
+  opening = 'opening',
+  suggested = 'suggested',
+  text2speech = 'text2speech',
+  speech2text = 'speech2text',
+  citation = 'citation',
+  moderation = 'moderation',
+  file = 'file',
+  annotationReply = 'annotationReply',
+}
+
+export type Features = {
+  [FeatureEnum.moreLikeThis]?: MoreLikeThis
+  [FeatureEnum.opening]?: OpeningStatement
+  [FeatureEnum.suggested]?: SuggestedQuestionsAfterAnswer
+  [FeatureEnum.text2speech]?: TextToSpeech
+  [FeatureEnum.speech2text]?: SpeechToText
+  [FeatureEnum.citation]?: RetrieverResource
+  [FeatureEnum.moderation]?: SensitiveWordAvoidance
+  [FeatureEnum.file]?: FileUpload
+  [FeatureEnum.annotationReply]?: AnnotationReplyConfig
+}
+
+export type OnFeaturesChange = (features?: Features) => void