features

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

@@ -23,21 +23,15 @@ const FeaturePanel = ({
   annotationProps,
 }: FeaturePanelProps) => {
   const { t } = useTranslation()
-  const openingStatement = useFeatures(s => s.openingStatement)
-  const suggestedQuestionsAfterAnswer = useFeatures(s => s.suggestedQuestionsAfterAnswer)
-  const textToSpeech = useFeatures(s => s.textToSpeech)
-  const speechToText = useFeatures(s => s.speechToText)
-  const citation = useFeatures(s => s.citation)
-  const moderation = useFeatures(s => s.moderation)
-  const annotation = useFeatures(s => s.annotation)
+  const features = useFeatures(s => s.features)
 
   const showAdvanceFeature = useMemo(() => {
-    return openingStatement.enabled || suggestedQuestionsAfterAnswer.enabled || textToSpeech.enabled || speechToText.enabled || citation.enabled
-  }, [openingStatement, suggestedQuestionsAfterAnswer, textToSpeech, speechToText, citation])
+    return features.opening.enabled || features.suggested.enabled || features.speech2text.enabled || features.text2speech.enabled || features.citation.enabled
+  }, [features])
 
   const showToolFeature = useMemo(() => {
-    return moderation.enabled || annotation.enabled
-  }, [moderation, annotation])
+    return features.moderation.enabled || features.annotation.enabled
+  }, [features])
 
   return (
     <div className='space-y-3'>
@@ -55,27 +49,27 @@ const FeaturePanel = ({
             </div>
             <div className='py-2 space-y-2'>
               {
-                openingStatement.enabled && (
+                features.opening.enabled && (
                   <OpeningStatement {...openingStatementProps} />
                 )
               }
               {
-                suggestedQuestionsAfterAnswer.enabled && (
+                features.suggested.enabled && (
                   <SuggestedQuestionsAfterAnswer />
                 )
               }
               {
-                textToSpeech.enabled && (
+                features.text2speech.enabled && (
                   <TextToSpeech />
                 )
               }
               {
-                speechToText.enabled && (
+                features.speech2text.enabled && (
                   <SpeechToText />
                 )
               }
               {
-                citation.enabled && (
+                features.citation.enabled && (
                   <Citation />
                 )
               }
@@ -97,12 +91,12 @@ const FeaturePanel = ({
             </div>
             <div className='py-2 space-y-2'>
               {
-                moderation.enabled && (
+                features.moderation.enabled && (
                   <Moderation />
                 )
               }
               {
-                annotation.enabled && (
+                features.annotation.enabled && (
                   <Annotation {...annotationProps} />
                 )
               }

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

@@ -1,8 +1,12 @@
 import { memo } from 'react'
 import { useTranslation } from 'react-i18next'
 import useSWR from 'swr'
+import produce from 'immer'
 import { useContext } from 'use-context-selector'
-import { useFeatures } from '../../hooks'
+import {
+  useFeatures,
+  useFeaturesStore,
+} from '../../hooks'
 import { FileSearch02 } from '@/app/components/base/icons/src/vender/solid/files'
 import { Settings01 } from '@/app/components/base/icons/src/vender/line/general'
 import { useModalContext } from '@/context/modal-context'
@@ -13,8 +17,8 @@ const Moderation = () => {
   const { t } = useTranslation()
   const { setShowModerationSettingModal } = useModalContext()
   const { locale } = useContext(I18n)
-  const moderation = useFeatures(s => s.moderation)
-  const setModeration = useFeatures(s => s.setModeration)
+  const featuresStore = useFeaturesStore()
+  const moderation = useFeatures(s => s.features.moderation)
 
   const { data: codeBasedExtensionList } = useSWR(
     '/code-based-extension?module=moderation',
@@ -22,9 +26,17 @@ const Moderation = () => {
   )
 
   const handleOpenModerationSettingModal = () => {
+    const {
+      features,
+      setFeatures,
+    } = featuresStore!.getState()
     setShowModerationSettingModal({
-      payload: moderation,
-      onSaveCallback: setModeration,
+      payload: moderation as any,
+      onSaveCallback: (newModeration) => {
+        setFeatures(produce(features, (draft) => {
+          draft.moderation = newModeration
+        }))
+      },
     })
   }
 

web/app/components/base/features/feature-panel/opening-statement/index.tsx

@@ -7,7 +7,10 @@ import cn from 'classnames'
 import { useTranslation } from 'react-i18next'
 import { useBoolean } from 'ahooks'
 import { ReactSortable } from 'react-sortablejs'
-import { useFeatures } from '../../hooks'
+import {
+  useFeatures,
+  useFeaturesStore,
+} from '../../hooks'
 import Panel from '@/app/components/app/configuration/base/feature-panel'
 import Button from '@/app/components/base/button'
 import OperationBtn from '@/app/components/app/configuration/base/operation-btn'
@@ -35,8 +38,8 @@ const OpeningStatement: FC<OpeningStatementProps> = ({
   onAutoAddPromptVariable,
 }) => {
   const { t } = useTranslation()
-  const openingStatement = useFeatures(s => s.openingStatement)
-  const setOpeningStatement = useFeatures(s => s.setOpeningStatement)
+  const featureStore = useFeaturesStore()
+  const openingStatement = useFeatures(s => s.features.opening)
   const value = openingStatement.opening_statement || ''
   const suggestedQuestions = openingStatement.suggested_questions || []
   const [notIncludeKeys, setNotIncludeKeys] = useState<string[]>([])
@@ -103,23 +106,41 @@ const OpeningStatement: FC<OpeningStatementProps> = ({
       return
     }
     setBlur()
-    setOpeningStatement(produce(openingStatement, (draft) => {
-      draft.opening_statement = tempValue
-      draft.suggested_questions = tempSuggestedQuestions
+    const { getState } = featureStore!
+    const {
+      features,
+      setFeatures,
+    } = getState()
+
+    setFeatures(produce(features, (draft) => {
+      draft.opening.opening_statement = tempValue
+      draft.opening.suggested_questions = tempSuggestedQuestions
     }))
   }
 
   const cancelAutoAddVar = () => {
-    setOpeningStatement(produce(openingStatement, (draft) => {
-      draft.opening_statement = tempValue
+    const { getState } = featureStore!
+    const {
+      features,
+      setFeatures,
+    } = getState()
+
+    setFeatures(produce(features, (draft) => {
+      draft.opening.opening_statement = tempValue
     }))
     hideConfirmAddVar()
     setBlur()
   }
 
   const autoAddVar = () => {
-    setOpeningStatement(produce(openingStatement, (draft) => {
-      draft.opening_statement = tempValue
+    const { getState } = featureStore!
+    const {
+      features,
+      setFeatures,
+    } = getState()
+
+    setFeatures(produce(features, (draft) => {
+      draft.opening.opening_statement = tempValue
     }))
     onAutoAddPromptVariable([...notIncludeKeys.map(key => getNewVar(key, 'string'))])
     hideConfirmAddVar()

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

@@ -12,7 +12,7 @@ import AudioBtn from '@/app/components/base/audio-btn'
 
 const TextToSpeech: FC = () => {
   const { t } = useTranslation()
-  const textToSpeech = useFeatures(s => s.textToSpeech)
+  const textToSpeech = useFeatures(s => s.features.text2speech)
 
   const pathname = usePathname()
   const matched = pathname.match(/\/app\/([^/]+)/)