From 0e2f78b3a6d16c091800b7415e0bb9104f2156b4 Mon Sep 17 00:00:00 2001
From: JzoNg <jzongcode@gmail.com>
Date: Thu, 29 Aug 2024 22:54:36 +0800
Subject: [PATCH] features in workflow

---
 .../base/chat/chat/chat-input-area/index.tsx  | 101 +++++++-------
 .../chat/chat/chat-input-area/operation.tsx   |   5 +-
 web/app/components/base/chat/chat/index.tsx   |   9 +-
 .../features/new-feature-panel/citation.tsx   |   3 +
 .../conversation-opener/index.tsx             |   3 +-
 .../new-feature-panel/feature-bar.tsx         | 127 ++++++++++++++++++
 .../new-feature-panel/feature-card.tsx        |   4 +-
 .../new-feature-panel/file-upload/index.tsx   |   7 +-
 .../features/new-feature-panel/follow-up.tsx  |   3 +
 .../base/features/new-feature-panel/index.tsx |  17 +--
 .../new-feature-panel/moderation/index.tsx    |   3 +-
 .../new-feature-panel/more-like-this.tsx      |   3 +
 .../new-feature-panel/speech-to-text.tsx      |   3 +
 .../text-to-speech/index.tsx                  |   7 +-
 .../text-to-speech/param-config-content.tsx   |   2 +-
 web/app/components/workflow/header/index.tsx  |  23 +---
 .../panel/debug-and-preview/chat-wrapper.tsx  |  11 +-
 web/i18n/en-US/app-debug.ts                   |   5 +
 web/i18n/zh-Hans/app-debug.ts                 |   5 +
 19 files changed, 250 insertions(+), 91 deletions(-)
 create mode 100644 web/app/components/base/features/new-feature-panel/feature-bar.tsx

diff --git a/web/app/components/base/chat/chat/chat-input-area/index.tsx b/web/app/components/base/chat/chat/chat-input-area/index.tsx
index c1df858d95..032b37b6aa 100644
--- a/web/app/components/base/chat/chat/chat-input-area/index.tsx
+++ b/web/app/components/base/chat/chat/chat-input-area/index.tsx
@@ -10,7 +10,6 @@ import Recorder from 'js-audio-recorder'
 import type {
   EnableType,
   OnSend,
-  VisionConfig,
 } from '../../types'
 import type { Theme } from '../../embedded-chatbot/theme/theme-context'
 import { useTextAreaHeight } from './hooks'
@@ -20,14 +19,22 @@ import { FileListFlexOperation } from '@/app/components/base/file-uploader'
 import { FileContextProvider } from '@/app/components/base/file-uploader/store'
 import VoiceInput from '@/app/components/base/voice-input'
 import { useToastContext } from '@/app/components/base/toast'
+import FeatureBar from '@/app/components/base/features/new-feature-panel/feature-bar'
+import type { FileUpload } from '@/app/components/base/features/types'
 
 type ChatInputAreaProps = {
-  visionConfig?: VisionConfig
+  showFeatureBar?: boolean
+  featureBarDisabled?: boolean
+  onFeatureBarClick?: (state: boolean) => void
+  visionConfig?: FileUpload
   speechToTextConfig?: EnableType
   onSend?: OnSend
   theme?: Theme | null
 }
 const ChatInputArea = ({
+  showFeatureBar,
+  featureBarDisabled,
+  onFeatureBarClick,
   visionConfig,
   speechToTextConfig = { enabled: true },
   onSend,
@@ -86,6 +93,7 @@ const ChatInputArea = ({
   const operation = (
     <Operation
       ref={holdSpaceRef}
+      visionConfig={visionConfig}
       speechToTextConfig={speechToTextConfig}
       onShowVoiceInput={handleShowVoiceInput}
       onSend={handleSend}
@@ -94,58 +102,61 @@ const ChatInputArea = ({
 
   return (
     <FileContextProvider>
-      <div
-        className={cn(
-          'py-[9px] bg-components-panel-bg-blur border border-components-chat-input-border rounded-xl shadow-md',
-        )}
-      >
-        <div className='relative px-[9px] max-h-[158px] overflow-x-hidden overflow-y-auto'>
-          <FileListFlexOperation />
-          <div
-            ref={wrapperRef}
-            className='flex items-center justify-between'
-          >
-            <div className='flex items-center relative grow w-full'>
-              <div
-                ref={textValueRef}
-                className='absolute w-auto h-auto p-1 leading-6 body-lg-regular pointer-events-none whitespace-pre invisible'
-              >
-                {query}
+      <>
+        <div
+          className={cn(
+            'relative py-[9px] bg-components-panel-bg-blur border border-components-chat-input-border rounded-xl shadow-md z-10',
+          )}
+        >
+          <div className='relative px-[9px] max-h-[158px] overflow-x-hidden overflow-y-auto'>
+            <FileListFlexOperation />
+            <div
+              ref={wrapperRef}
+              className='flex items-center justify-between'
+            >
+              <div className='flex items-center relative grow w-full'>
+                <div
+                  ref={textValueRef}
+                  className='absolute w-auto h-auto p-1 leading-6 body-lg-regular pointer-events-none whitespace-pre invisible'
+                >
+                  {query}
+                </div>
+                <Textarea
+                  ref={textareaRef}
+                  className='p-1 w-full leading-6 body-lg-regular text-text-tertiary outline-none'
+                  placeholder='Enter message...'
+                  autoSize={{ minRows: 1 }}
+                  onResize={handleTextareaResize}
+                  value={query}
+                  onChange={(e) => {
+                    setQuery(e.target.value)
+                    handleTextareaResize()
+                  }}
+                  onKeyUp={handleKeyUp}
+                  onKeyDown={handleKeyDown}
+                />
               </div>
-              <Textarea
-                ref={textareaRef}
-                className='p-1 w-full leading-6 body-lg-regular text-text-tertiary outline-none'
-                placeholder='Enter message...'
-                autoSize={{ minRows: 1 }}
-                onResize={handleTextareaResize}
-                value={query}
-                onChange={(e) => {
-                  setQuery(e.target.value)
-                  handleTextareaResize()
-                }}
-                onKeyUp={handleKeyUp}
-                onKeyDown={handleKeyDown}
-              />
+              {
+                !isMultipleLine && operation
+              }
             </div>
             {
-              !isMultipleLine && operation
+              showVoiceInput && (
+                <VoiceInput
+                  onCancel={() => setShowVoiceInput(false)}
+                  onConverted={text => setQuery(text)}
+                />
+              )
             }
           </div>
           {
-            showVoiceInput && (
-              <VoiceInput
-                onCancel={() => setShowVoiceInput(false)}
-                onConverted={text => setQuery(text)}
-              />
+            isMultipleLine && (
+              <div className='px-[9px]'>{operation}</div>
             )
           }
         </div>
-        {
-          isMultipleLine && (
-            <div className='px-[9px]'>{operation}</div>
-          )
-        }
-      </div>
+        {showFeatureBar && <FeatureBar disabled={featureBarDisabled} onFeatureBarClick={onFeatureBarClick} />}
+      </>
     </FileContextProvider>
   )
 }
diff --git a/web/app/components/base/chat/chat/chat-input-area/operation.tsx b/web/app/components/base/chat/chat/chat-input-area/operation.tsx
index 58246d034c..d1524f29ce 100644
--- a/web/app/components/base/chat/chat/chat-input-area/operation.tsx
+++ b/web/app/components/base/chat/chat/chat-input-area/operation.tsx
@@ -12,14 +12,17 @@ import type {
 import Button from '@/app/components/base/button'
 import ActionButton from '@/app/components/base/action-button'
 import { FileUploaderInChatInput } from '@/app/components/base/file-uploader'
+import type { FileUpload } from '@/app/components/base/features/types'
 import cn from '@/utils/classnames'
 
 type OperationProps = {
+  visionConfig?: FileUpload
   speechToTextConfig?: EnableType
   onShowVoiceInput?: () => void
   onSend: () => void
 }
 const Operation = forwardRef<HTMLDivElement, OperationProps>(({
+  visionConfig,
   speechToTextConfig,
   onShowVoiceInput,
   onSend,
@@ -35,7 +38,7 @@ const Operation = forwardRef<HTMLDivElement, OperationProps>(({
         ref={ref}
       >
         <div className='flex items-center space-x-1'>
-          <FileUploaderInChatInput />
+          {visionConfig?.enabled && <FileUploaderInChatInput />}
           {
             speechToTextConfig?.enabled && (
               <ActionButton
diff --git a/web/app/components/base/chat/chat/index.tsx b/web/app/components/base/chat/chat/index.tsx
index fa3f5680f2..32a462f1a4 100644
--- a/web/app/components/base/chat/chat/index.tsx
+++ b/web/app/components/base/chat/chat/index.tsx
@@ -61,6 +61,8 @@ export type ChatProps = {
   hideProcessDetail?: boolean
   hideLogModal?: boolean
   themeBuilder?: ThemeBuilder
+  showFeatureBar?: boolean
+  onFeatureBarClick?: (state: boolean) => void
 }
 
 const Chat: FC<ChatProps> = ({
@@ -89,6 +91,8 @@ const Chat: FC<ChatProps> = ({
   hideProcessDetail,
   hideLogModal,
   themeBuilder,
+  showFeatureBar,
+  onFeatureBarClick,
 }) => {
   const { t } = useTranslation()
   const { currentLogItem, setCurrentLogItem, showPromptLogModal, setShowPromptLogModal, showAgentLogModal, setShowAgentLogModal } = useAppStore(useShallow(state => ({
@@ -272,7 +276,10 @@ const Chat: FC<ChatProps> = ({
             {
               !noChatInput && (
                 <ChatInputArea
-                  visionConfig={config?.file_upload?.image}
+                  showFeatureBar={showFeatureBar}
+                  featureBarDisabled={isResponding}
+                  onFeatureBarClick={onFeatureBarClick}
+                  visionConfig={config?.file_upload}
                   speechToTextConfig={config?.speech_to_text}
                   onSend={onSend}
                   theme={themeBuilder?.theme}
diff --git a/web/app/components/base/features/new-feature-panel/citation.tsx b/web/app/components/base/features/new-feature-panel/citation.tsx
index 8177fc4543..a0b702e9f9 100644
--- a/web/app/components/base/features/new-feature-panel/citation.tsx
+++ b/web/app/components/base/features/new-feature-panel/citation.tsx
@@ -8,10 +8,12 @@ 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()
@@ -46,6 +48,7 @@ const Citation = ({
       value={!!features.citation?.enabled}
       description={t('appDebug.feature.citation.description')!}
       onChange={state => handleChange(FeatureEnum.citation, state)}
+      disabled={disabled}
     />
   )
 }
diff --git a/web/app/components/base/features/new-feature-panel/conversation-opener/index.tsx b/web/app/components/base/features/new-feature-panel/conversation-opener/index.tsx
index b84836cf55..f9e2d5b213 100644
--- a/web/app/components/base/features/new-feature-panel/conversation-opener/index.tsx
+++ b/web/app/components/base/features/new-feature-panel/conversation-opener/index.tsx
@@ -77,6 +77,7 @@ const ConversationOpener = ({
       onChange={state => handleChange(FeatureEnum.opening, state)}
       onMouseEnter={() => setIsHovering(true)}
       onMouseLeave={() => setIsHovering(false)}
+      disabled={disabled}
     >
       <>
         {!opening?.enabled && (
@@ -90,7 +91,7 @@ const ConversationOpener = ({
               </div>
             )}
             {isHovering && (
-              <Button className='w-full' onClick={handleOpenOpeningModal}>
+              <Button className='w-full' onClick={handleOpenOpeningModal} disabled={disabled}>
                 <RiEditLine className='mr-1 w-4 h-4' />
                 {t('appDebug.openingStatement.writeOpener')}
               </Button>
diff --git a/web/app/components/base/features/new-feature-panel/feature-bar.tsx b/web/app/components/base/features/new-feature-panel/feature-bar.tsx
new file mode 100644
index 0000000000..5b1dfddaf1
--- /dev/null
+++ b/web/app/components/base/features/new-feature-panel/feature-bar.tsx
@@ -0,0 +1,127 @@
+import React, { useMemo, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { RiApps2AddLine, RiArrowRightLine, RiSparklingFill } from '@remixicon/react'
+import { Citations, ContentModeration, FolderUpload, LoveMessage, Microphone01, TextToAudio, VirtualAssistant } from '@/app/components/base/icons/src/vender/features'
+import 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 = {
+  disabled?: boolean
+  onFeatureBarClick?: (state: boolean) => void
+}
+
+const FeatureBar = ({
+  disabled,
+  onFeatureBarClick,
+}: Props) => {
+  const { t } = useTranslation()
+  const features = useFeatures(s => s.features)
+  const [modalOpen, setModalOpen] = useState(false)
+
+  const noFeatureEnabled = useMemo(() => {
+    return !Object.values(features).some(f => f.enabled)
+  }, [features])
+
+  return (
+    <div className='-translate-y-2 m-1 mt-0 px-2.5 py-2 pt-4 bg-util-colors-indigo-indigo-50 rounded-b-[10px] border-l border-b border-r border-components-panel-border-subtle'>
+      {noFeatureEnabled && (
+        <div className='flex items-end gap-1 cursor-pointer' onClick={() => onFeatureBarClick?.(true)}>
+          <RiApps2AddLine className='w-3.5 h-3.5 text-text-accent' />
+          <div className='text-text-accent body-xs-medium'>{t('appDebug.feature.bar.empty')}</div>
+          <RiArrowRightLine className='w-3.5 h-3.5 text-text-accent' />
+        </div>
+      )}
+      {!noFeatureEnabled && (
+        <div className='flex items-center gap-2'>
+          <div className='shrink-0 flex items-center gap-0.5'>
+            {!!features.moreLikeThis?.enabled && (
+              <Tooltip
+                popupContent={t('appDebug.feature.moreLikeThis.title')}
+              >
+                <div className='shrink-0 p-1 rounded-lg border-[0.5px] border-divider-subtle shadow-xs bg-util-colors-blue-light-blue-light-500'>
+                  <RiSparklingFill className='w-3.5 h-3.5 text-text-primary-on-surface' />
+                </div>
+              </Tooltip>
+            )}
+            {!!features.opening?.enabled && (
+              <Tooltip
+                popupContent={t('appDebug.feature.conversationOpener.title')}
+              >
+                <div className='shrink-0 p-1 rounded-lg border-[0.5px] border-divider-subtle shadow-xs bg-util-colors-blue-light-blue-light-500'>
+                  <LoveMessage className='w-3.5 h-3.5 text-text-primary-on-surface' />
+                </div>
+              </Tooltip>
+            )}
+            {!!features.moderation?.enabled && (
+              <Tooltip
+                popupContent={t('appDebug.feature.moderation.title')}
+              >
+                <div className='shrink-0 p-1 rounded-lg border-[0.5px] border-divider-subtle shadow-xs bg-text-success'>
+                  <ContentModeration className='w-3.5 h-3.5 text-text-primary-on-surface' />
+                </div>
+              </Tooltip>
+            )}
+            {!!features.speech2text?.enabled && (
+              <Tooltip
+                popupContent={t('appDebug.feature.speechToText.title')}
+              >
+                <div className='shrink-0 p-1 rounded-lg border-[0.5px] border-divider-subtle shadow-xs bg-util-colors-violet-violet-600'>
+                  <Microphone01 className='w-3.5 h-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 p-1 rounded-lg border-[0.5px] border-divider-subtle shadow-xs bg-util-colors-violet-violet-600', !disabled && 'cursor-pointer')}>
+                    <TextToAudio className='w-3.5 h-3.5 text-text-primary-on-surface' />
+                  </div>
+                </Tooltip>
+              </VoiceSettings>
+            )}
+            {!!features.file?.enabled && (
+              <Tooltip
+                popupContent={t('appDebug.feature.fileUpload.title')}
+              >
+                <div className='shrink-0 p-1 rounded-lg border-[0.5px] border-divider-subtle shadow-xs bg-util-colors-blue-blue-600'>
+                  <FolderUpload className='w-3.5 h-3.5 text-text-primary-on-surface' />
+                </div>
+              </Tooltip>
+            )}
+            {!!features.suggested?.enabled && (
+              <Tooltip
+                popupContent={t('appDebug.feature.suggestedQuestionsAfterAnswer.title')}
+              >
+                <div className='shrink-0 p-1 rounded-lg border-[0.5px] border-divider-subtle shadow-xs bg-util-colors-blue-light-blue-light-500'>
+                  <VirtualAssistant className='w-3.5 h-3.5 text-text-primary-on-surface' />
+                </div>
+              </Tooltip>
+            )}
+            {!!features.citation?.enabled && (
+              <Tooltip
+                popupContent={t('appDebug.feature.citation.title')}
+              >
+                <div className='shrink-0 p-1 rounded-lg border-[0.5px] border-divider-subtle shadow-xs bg-util-colors-warning-warning-500'>
+                  <Citations className='w-4 h-4 text-text-primary-on-surface' />
+                </div>
+              </Tooltip>
+            )}
+            {/* annotation reply ##TODO## */}
+          </div>
+          <div className='grow text-text-tertiary body-xs-regular'>{t('appDebug.feature.bar.enableText')}</div>
+          <Button className='shrink-0' variant='ghost-accent' size='small' onClick={() => onFeatureBarClick?.(true)}>
+            <div className='mx-1'>{t('appDebug.feature.bar.manage')}</div>
+            <RiArrowRightLine className='w-3.5 h-3.5 text-text-accent' />
+          </Button>
+        </div>
+      )}
+    </div>
+  )
+}
+
+export default FeatureBar
diff --git a/web/app/components/base/features/new-feature-panel/feature-card.tsx b/web/app/components/base/features/new-feature-panel/feature-card.tsx
index bc53af75b9..341a693ce0 100644
--- a/web/app/components/base/features/new-feature-panel/feature-card.tsx
+++ b/web/app/components/base/features/new-feature-panel/feature-card.tsx
@@ -25,7 +25,7 @@ const FeatureCard = ({
   value,
   description,
   children,
-  // disabled,
+  disabled,
   onChange,
   onMouseEnter,
   onMouseLeave,
@@ -48,7 +48,7 @@ const FeatureCard = ({
             </Tooltip>
           )}
         </div>
-        <Switch className='shrink-0' onChange={state => onChange?.(state)} defaultValue={value} />
+        <Switch disabled={disabled} className='shrink-0' onChange={state => onChange?.(state)} defaultValue={value} />
       </div>
       {description && (
         <div className='min-h-8 text-text-tertiary system-xs-regular line-clamp-2'>{description}</div>
diff --git a/web/app/components/base/features/new-feature-panel/file-upload/index.tsx b/web/app/components/base/features/new-feature-panel/file-upload/index.tsx
index 369f6b2c61..505e7cc809 100644
--- a/web/app/components/base/features/new-feature-panel/file-upload/index.tsx
+++ b/web/app/components/base/features/new-feature-panel/file-upload/index.tsx
@@ -11,10 +11,12 @@ 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()
@@ -57,6 +59,7 @@ const FileUpload = ({
       onChange={state => handleChange(FeatureEnum.file, state)}
       onMouseEnter={() => setIsHovering(true)}
       onMouseLeave={() => setIsHovering(false)}
+      disabled={disabled}
     >
       <>
         {!file?.enabled && (
@@ -79,14 +82,14 @@ const FileUpload = ({
             )}
             {(isHovering || modalOpen) && (
               <SettingModal
-                open={modalOpen}
+                open={modalOpen && !disabled}
                 onOpen={(v) => {
                   setModalOpen(v)
                   setIsHovering(v)
                 }}
                 onChange={onChange}
               >
-                <Button className='w-full'>
+                <Button className='w-full' disabled={disabled}>
                   <RiEqualizer2Line className='mr-1 w-4 h-4' />
                   {t('common.operation.settings')}
                 </Button>
diff --git a/web/app/components/base/features/new-feature-panel/follow-up.tsx b/web/app/components/base/features/new-feature-panel/follow-up.tsx
index a6965a8783..f4377ce77c 100644
--- a/web/app/components/base/features/new-feature-panel/follow-up.tsx
+++ b/web/app/components/base/features/new-feature-panel/follow-up.tsx
@@ -8,10 +8,12 @@ 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()
@@ -46,6 +48,7 @@ const FollowUp = ({
       value={!!features.suggested?.enabled}
       description={t('appDebug.feature.suggestedQuestionsAfterAnswer.description')!}
       onChange={state => handleChange(FeatureEnum.suggested, state)}
+      disabled={disabled}
     />
   )
 }
diff --git a/web/app/components/base/features/new-feature-panel/index.tsx b/web/app/components/base/features/new-feature-panel/index.tsx
index e6d766250a..2388668a6c 100644
--- a/web/app/components/base/features/new-feature-panel/index.tsx
+++ b/web/app/components/base/features/new-feature-panel/index.tsx
@@ -39,6 +39,7 @@ const NewFeaturePanel = ({
   show,
   showAnnotation = false,
   isChatMode,
+  disabled,
   onChange,
   onClose,
 }: Props) => {
@@ -86,24 +87,24 @@ const NewFeaturePanel = ({
         {/* list */}
         <div className='grow overflow-y-auto px-4 pb-4'>
           {!isChatMode && (
-            <MoreLikeThis onChange={onChange} />
+            <MoreLikeThis disabled={disabled} onChange={onChange} />
           )}
           {isChatMode && (
-            <ConversationOpener onChange={onChange} />
+            <ConversationOpener disabled={disabled} onChange={onChange} />
           )}
-          <Moderation onChange={onChange} />
+          <Moderation disabled={disabled} onChange={onChange} />
           {isChatMode && speech2textDefaultModel && (
-            <SpeechToText onChange={onChange} />
+            <SpeechToText disabled={disabled} onChange={onChange} />
           )}
           {text2speechDefaultModel && (
-            <TextToSpeech onChange={onChange} />
+            <TextToSpeech disabled={disabled} onChange={onChange} />
           )}
-          <FileUpload onChange={onChange} />
+          <FileUpload disabled={disabled} onChange={onChange} />
           {isChatMode && (
-            <FollowUp onChange={onChange} />
+            <FollowUp disabled={disabled} onChange={onChange} />
           )}
           {isChatMode && (
-            <Citation onChange={onChange} />
+            <Citation disabled={disabled} onChange={onChange} />
           )}
           {/* annotation reply ##TODO## */}
           {showAnnotation && (
diff --git a/web/app/components/base/features/new-feature-panel/moderation/index.tsx b/web/app/components/base/features/new-feature-panel/moderation/index.tsx
index 172dba8d0f..476d5a7a96 100644
--- a/web/app/components/base/features/new-feature-panel/moderation/index.tsx
+++ b/web/app/components/base/features/new-feature-panel/moderation/index.tsx
@@ -139,6 +139,7 @@ const Moderation = ({
       onChange={state => handleChange(FeatureEnum.moderation, state)}
       onMouseEnter={() => setIsHovering(true)}
       onMouseLeave={() => setIsHovering(false)}
+      disabled={disabled}
     >
       <>
         {!moderation?.enabled && (
@@ -160,7 +161,7 @@ const Moderation = ({
               </div>
             )}
             {isHovering && (
-              <Button className='w-full' onClick={handleOpenModerationSettingModal}>
+              <Button className='w-full' onClick={handleOpenModerationSettingModal} disabled={disabled}>
                 <RiEqualizer2Line className='mr-1 w-4 h-4' />
                 {t('common.operation.settings')}
               </Button>
diff --git a/web/app/components/base/features/new-feature-panel/more-like-this.tsx b/web/app/components/base/features/new-feature-panel/more-like-this.tsx
index ad7a433c29..59fd806493 100644
--- a/web/app/components/base/features/new-feature-panel/more-like-this.tsx
+++ b/web/app/components/base/features/new-feature-panel/more-like-this.tsx
@@ -8,10 +8,12 @@ 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()
@@ -47,6 +49,7 @@ const MoreLikeThis = ({
       value={!!features.moreLikeThis?.enabled}
       description={t('appDebug.feature.moreLikeThis.description')!}
       onChange={state => handleChange(FeatureEnum.moreLikeThis, state)}
+      disabled={disabled}
     />
   )
 }
diff --git a/web/app/components/base/features/new-feature-panel/speech-to-text.tsx b/web/app/components/base/features/new-feature-panel/speech-to-text.tsx
index ee2a065243..7a490bcdcc 100644
--- a/web/app/components/base/features/new-feature-panel/speech-to-text.tsx
+++ b/web/app/components/base/features/new-feature-panel/speech-to-text.tsx
@@ -8,10 +8,12 @@ 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()
@@ -46,6 +48,7 @@ const SpeechToText = ({
       value={!!features.speech2text?.enabled}
       description={t('appDebug.feature.speechToText.description')!}
       onChange={state => handleChange(FeatureEnum.speech2text, state)}
+      disabled={disabled}
     />
   )
 }
diff --git a/web/app/components/base/features/new-feature-panel/text-to-speech/index.tsx b/web/app/components/base/features/new-feature-panel/text-to-speech/index.tsx
index 9f101a3ab0..efbd51dd4e 100644
--- a/web/app/components/base/features/new-feature-panel/text-to-speech/index.tsx
+++ b/web/app/components/base/features/new-feature-panel/text-to-speech/index.tsx
@@ -13,10 +13,12 @@ import { languages } from '@/i18n/language'
 import { TtsAutoPlay } from '@/types/app'
 
 type Props = {
+  disabled: boolean
   onChange?: OnFeaturesChange
 }
 
 const TextToSpeech = ({
+  disabled,
   onChange,
 }: Props) => {
   const { t } = useTranslation()
@@ -56,6 +58,7 @@ const TextToSpeech = ({
       onChange={state => handleChange(FeatureEnum.text2speech, state)}
       onMouseEnter={() => setIsHovering(true)}
       onMouseLeave={() => setIsHovering(false)}
+      disabled={disabled}
     >
       <>
         {!features.text2speech?.enabled && (
@@ -82,8 +85,8 @@ const TextToSpeech = ({
               </div>
             )}
             {(isHovering || modalOpen) && (
-              <VoiceSettings open={modalOpen} onOpen={setModalOpen} onChange={onChange}>
-                <Button className='w-full'>
+              <VoiceSettings open={modalOpen && !disabled} onOpen={setModalOpen} onChange={onChange}>
+                <Button className='w-full' disabled={disabled}>
                   <RiEqualizer2Line className='mr-1 w-4 h-4' />
                   {t('appDebug.voice.voiceSettings.title')}
                 </Button>
diff --git a/web/app/components/base/features/new-feature-panel/text-to-speech/param-config-content.tsx b/web/app/components/base/features/new-feature-panel/text-to-speech/param-config-content.tsx
index bd279b5cf3..47d47b7514 100644
--- a/web/app/components/base/features/new-feature-panel/text-to-speech/param-config-content.tsx
+++ b/web/app/components/base/features/new-feature-panel/text-to-speech/param-config-content.tsx
@@ -65,7 +65,7 @@ const VoiceParamConfig = ({
 
   return (
     <>
-      <div className='mb-4 flex items-center'>
+      <div className='mb-4 flex items-center justify-between'>
         <div className='text-text-primary system-xl-semibold'>{t('appDebug.voice.voiceSettings.title')}</div>
         <div className='p-1 cursor-pointer' onClick={onClose}><RiCloseLine className='w-4 h-4 text-text-tertiary'/></div>
       </div>
diff --git a/web/app/components/workflow/header/index.tsx b/web/app/components/workflow/header/index.tsx
index 010d9ca1cd..6649e29421 100644
--- a/web/app/components/workflow/header/index.tsx
+++ b/web/app/components/workflow/header/index.tsx
@@ -4,7 +4,6 @@ import {
   useCallback,
   useMemo,
 } from 'react'
-import { RiApps2AddLine } from '@remixicon/react'
 import { useNodes } from 'reactflow'
 import { useTranslation } from 'react-i18next'
 import { useContext } from 'use-context-selector'
@@ -47,7 +46,7 @@ const Header: FC = () => {
   const appSidebarExpand = useAppStore(s => s.appSidebarExpand)
   const appID = appDetail?.id
   const isChatMode = useIsChatMode()
-  const { nodesReadOnly, getNodesReadOnly } = useNodesReadOnly()
+  const { nodesReadOnly } = useNodesReadOnly()
   const publishedAt = useStore(s => s.publishedAt)
   const draftUpdatedAt = useStore(s => s.draftUpdatedAt)
   const toolPublished = useStore(s => s.toolPublished)
@@ -86,17 +85,6 @@ const Header: FC = () => {
     viewHistory,
   } = useWorkflowMode()
 
-  const handleShowFeatures = useCallback(() => {
-    const {
-      showFeaturesPanel,
-      isRestoring,
-      setShowFeaturesPanel,
-    } = workflowStore.getState()
-    if (getNodesReadOnly() && !isRestoring)
-      return
-    setShowFeaturesPanel(!showFeaturesPanel)
-  }, [workflowStore, getNodesReadOnly])
-
   const handleCancelRestore = useCallback(() => {
     handleLoadBackupDraft()
     workflowStore.setState({ isRestoring: false })
@@ -173,10 +161,6 @@ const Header: FC = () => {
             <EnvButton disabled={nodesReadOnly} />
             <div className='w-[1px] h-3.5 bg-gray-200'></div>
             <RunAndHistory />
-            <Button className='text-components-button-secondary-text' onClick={handleShowFeatures}>
-              <RiApps2AddLine className='w-4 h-4 mr-1 text-components-button-secondary-text' />
-              {t('workflow.common.features')}
-            </Button>
             <AppPublisher
               {...{
                 publishedAt,
@@ -213,11 +197,6 @@ const Header: FC = () => {
       {
         restoring && (
           <div className='flex items-center'>
-            <Button className='text-components-button-secondary-text' onClick={handleShowFeatures}>
-              <RiApps2AddLine className='w-4 h-4 mr-1 text-components-button-secondary-text' />
-              {t('workflow.common.features')}
-            </Button>
-            <div className='mx-2 w-[1px] h-3.5 bg-gray-200'></div>
             <Button
               className='mr-2'
               onClick={handleCancelRestore}
diff --git a/web/app/components/workflow/panel/debug-and-preview/chat-wrapper.tsx b/web/app/components/workflow/panel/debug-and-preview/chat-wrapper.tsx
index 4655940037..255633608d 100644
--- a/web/app/components/workflow/panel/debug-and-preview/chat-wrapper.tsx
+++ b/web/app/components/workflow/panel/debug-and-preview/chat-wrapper.tsx
@@ -19,7 +19,7 @@ import { useChat } from './hooks'
 import type { ChatWrapperRefType } from './index'
 import Chat from '@/app/components/base/chat/chat'
 import type { OnSend } from '@/app/components/base/chat/types'
-import { useFeaturesStore } from '@/app/components/base/features/hooks'
+import { useFeatures } from '@/app/components/base/features/hooks'
 import {
   fetchSuggestedQuestions,
   stopChatMessageResponding,
@@ -38,10 +38,8 @@ const ChatWrapper = forwardRef<ChatWrapperRefType, ChatWrapperProps>(({ showConv
   const startVariables = startNode?.data.variables
   const appDetail = useAppStore(s => s.appDetail)
   const workflowStore = useWorkflowStore()
-  const featuresStore = useFeaturesStore()
   const inputs = useStore(s => s.inputs)
-  const features = featuresStore!.getState().features
-
+  const features = useFeatures(s => s.features)
   const config = useMemo(() => {
     return {
       opening_statement: features.opening?.opening_statement || '',
@@ -54,6 +52,7 @@ const ChatWrapper = forwardRef<ChatWrapperRefType, ChatWrapperProps>(({ showConv
       file_upload: features.file,
     }
   }, [features])
+  const setShowFeaturesPanel = useStore(s => s.setShowFeaturesPanel)
 
   const {
     conversationId,
@@ -105,7 +104,9 @@ const ChatWrapper = forwardRef<ChatWrapperRefType, ChatWrapperProps>(({ showConv
         chatContainerClassName='px-3'
         chatContainerInnerClassName='pt-6'
         chatFooterClassName='px-4 rounded-bl-2xl'
-        chatFooterInnerClassName='pb-4'
+        chatFooterInnerClassName='pb-2'
+        showFeatureBar
+        onFeatureBarClick={setShowFeaturesPanel}
         onSend={doSend}
         onStopResponding={handleStop}
         chatNode={(
diff --git a/web/i18n/en-US/app-debug.ts b/web/i18n/en-US/app-debug.ts
index 1c4ce2a97d..05ca8a6bd9 100644
--- a/web/i18n/en-US/app-debug.ts
+++ b/web/i18n/en-US/app-debug.ts
@@ -206,6 +206,11 @@ const translation = {
       numberLimit: 'Max uploads',
       modalTitle: 'File Upload Setting',
     },
+    bar: {
+      empty: 'Enable feature to enhance web app user experience',
+      enableText: 'Features Enabled',
+      manage: 'Manage',
+    },
   },
   generate: {
     title: 'Prompt Generator',
diff --git a/web/i18n/zh-Hans/app-debug.ts b/web/i18n/zh-Hans/app-debug.ts
index 003c2c9318..3a1051910d 100644
--- a/web/i18n/zh-Hans/app-debug.ts
+++ b/web/i18n/zh-Hans/app-debug.ts
@@ -206,6 +206,11 @@ const translation = {
       numberLimit: '最大上传数',
       modalTitle: '文件上传设置',
     },
+    bar: {
+      empty: '开启功能增强 webapp 用户体验',
+      enableText: '功能已开启',
+      manage: '管理',
+    },
   },
   generate: {
     title: '提示词生成器',