FEAT: NEW WORKFLOW ENGINE (#3160)

Co-authored-by: Joel <iamjoel007@gmail.com>
Co-authored-by: Yeuoly <admin@srmxy.cn>
Co-authored-by: JzoNg <jzongcode@gmail.com>
Co-authored-by: StyleZhang <jasonapring2015@outlook.com>
Co-authored-by: jyong <jyong@dify.ai>
Co-authored-by: nite-knite <nkCoding@gmail.com>
Co-authored-by: jyong <718720800@qq.com>

web/app/components/base/features/feature-choose/feature-group/index.tsx

@@ -0,0 +1,31 @@
+'use client'
+import type { FC } from 'react'
+import React from 'react'
+import GroupName from '@/app/components/app/configuration/base/group-name'
+
+export type IFeatureGroupProps = {
+  title: string
+  description?: string
+  children: React.ReactNode
+}
+
+const FeatureGroup: FC<IFeatureGroupProps> = ({
+  title,
+  description,
+  children,
+}) => {
+  return (
+    <div className='mb-6'>
+      <div className='mb-2'>
+        <GroupName name={title} />
+        {description && (
+          <div className='text-xs font-normal text-gray-500'>{description}</div>
+        )}
+      </div>
+      <div className='space-y-2'>
+        {children}
+      </div>
+    </div>
+  )
+}
+export default React.memo(FeatureGroup)

web/app/components/base/features/feature-choose/feature-item/index.tsx

@@ -0,0 +1,96 @@
+'use client'
+import type { FC } from 'react'
+import React, { useCallback } from 'react'
+import produce from 'immer'
+import cn from 'classnames'
+import s from './style.module.css'
+import Switch from '@/app/components/base/switch'
+import { FeatureEnum } from '@/app/components/base/features/types'
+import { useFeaturesStore } from '@/app/components/base/features/hooks'
+import { useModalContext } from '@/context/modal-context'
+
+export type IFeatureItemProps = {
+  icon: React.ReactNode
+  previewImgClassName?: string
+  title: string
+  description: string
+  value: boolean
+  onChange: (type: FeatureEnum, value: boolean) => void
+  type: FeatureEnum
+}
+
+const FeatureItem: FC<IFeatureItemProps> = ({
+  icon,
+  previewImgClassName,
+  title,
+  description,
+  value,
+  onChange,
+  type,
+}) => {
+  const featuresStore = useFeaturesStore()
+  const { setShowModerationSettingModal } = useModalContext()
+
+  const handleChange = useCallback((newValue: boolean) => {
+    const {
+      features,
+      setFeatures,
+    } = featuresStore!.getState()
+
+    if (newValue && !features.moderation?.type && type === FeatureEnum.moderation) {
+      setShowModerationSettingModal({
+        payload: {
+          enabled: true,
+          type: 'keywords',
+          config: {
+            keywords: '',
+            inputs_config: {
+              enabled: true,
+              preset_response: '',
+            },
+          },
+        },
+        onSaveCallback: (newModeration) => {
+          setFeatures(produce(features, (draft) => {
+            draft.moderation = newModeration
+          }))
+        },
+        onCancelCallback: () => {
+          setFeatures(produce(features, (draft) => {
+            draft.moderation = { enabled: false }
+          }))
+        },
+      })
+      return
+    }
+    onChange(type, newValue)
+  }, [type, onChange, featuresStore, setShowModerationSettingModal])
+
+  return (
+    <div className={cn(s.wrap, 'relative flex justify-between p-3 rounded-xl border border-transparent bg-gray-50 hover:border-gray-200  cursor-pointer')}>
+      <div className='flex space-x-3 mr-2'>
+        {/* icon */}
+        <div
+          className='shrink-0 flex items-center justify-center w-8 h-8 rounded-lg border border-gray-200 bg-white'
+          style={{
+            boxShadow: '0px 1px 2px rgba(16, 24, 40, 0.05)',
+          }}
+        >
+          {icon}
+        </div>
+        <div>
+          <div className='text-sm font-semibold text-gray-800'>{title}</div>
+          <div className='text-xs font-normal text-gray-500'>{description}</div>
+        </div>
+      </div>
+
+      <Switch onChange={handleChange} defaultValue={value} />
+      {
+        previewImgClassName && (
+          <div className={cn(s.preview, s[previewImgClassName])}>
+          </div>)
+      }
+    </div>
+  )
+}
+export default React.memo(FeatureItem)

web/app/components/base/features/feature-choose/feature-item/style.module.css

@@ -0,0 +1,39 @@
+.preview {
+  display: none;
+  position: absolute;
+  transform: translate(480px, -54px);
+  width: 280px;
+  height: 360px;
+  background: center center no-repeat;
+  background-size: contain;
+  border-radius: 8px;
+}
+
+.wrap:hover .preview {
+  display: block;
+}
+
+.openingStatementPreview {
+  background-image: url(./preview-imgs/opening-statement.png);
+}
+
+.suggestedQuestionsAfterAnswerPreview {
+  background-image: url(./preview-imgs/suggested-questions-after-answer.svg);
+}
+
+.moreLikeThisPreview {
+  background-image: url(./preview-imgs/more-like-this.svg);
+}
+
+.speechToTextPreview {
+  background-image: url(./preview-imgs/speech-to-text.svg);
+}
+
+.textToSpeechPreview {
+  @apply shadow-lg rounded-lg;
+  background-image: url(./preview-imgs/text-to-audio-preview-assistant@2x.png);
+}
+
+.citationPreview {
+  background-image: url(./preview-imgs/citation.svg);
+}

web/app/components/base/features/feature-choose/feature-modal.tsx

@@ -0,0 +1,147 @@
+'use client'
+import type { FC } from 'react'
+import React, { useCallback } from 'react'
+import produce from 'immer'
+import { useTranslation } from 'react-i18next'
+import {
+  useFeatures,
+  useFeaturesStore,
+} from '../hooks'
+import type { OnFeaturesChange } from '../types'
+import FeatureGroup from './feature-group'
+import FeatureItem from './feature-item'
+import Modal from '@/app/components/base/modal'
+import SuggestedQuestionsAfterAnswerIcon from '@/app/components/app/configuration/base/icons/suggested-questions-after-answer-icon'
+import { Microphone01, Speaker } from '@/app/components/base/icons/src/vender/solid/mediaAndDevices'
+import { Citations } from '@/app/components/base/icons/src/vender/solid/editor'
+import { FileSearch02 } from '@/app/components/base/icons/src/vender/solid/files'
+import { MessageHeartCircle } from '@/app/components/base/icons/src/vender/solid/communication'
+import { FeatureEnum } from '@/app/components/base/features/types'
+import { useDefaultModel } from '@/app/components/header/account-setting/model-provider-page/hooks'
+import { ModelTypeEnum } from '@/app/components/header/account-setting/model-provider-page/declarations'
+
+export type FeatureModalProps = {
+  onChange?: OnFeaturesChange
+}
+
+const FeatureModal: FC<FeatureModalProps> = ({
+  onChange,
+}) => {
+  const { t } = useTranslation()
+  const { data: speech2textDefaultModel } = useDefaultModel(ModelTypeEnum.speech2text)
+  const { data: text2speechDefaultModel } = useDefaultModel(ModelTypeEnum.tts)
+  const featuresStore = useFeaturesStore()
+  const setShowFeaturesModal = useFeatures(s => s.setShowFeaturesModal)
+  const features = useFeatures(s => s.features)
+
+  const handleCancelModal = useCallback(() => {
+    setShowFeaturesModal(false)
+  }, [setShowFeaturesModal])
+
+  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 (
+    <Modal
+      isShow
+      onClose={handleCancelModal}
+      className='w-[400px]'
+      title={t('appDebug.operation.addFeature')}
+      closable
+      overflowVisible
+    >
+      <div className='pt-5 pb-10'>
+        {/* Chat Feature */}
+        <FeatureGroup
+          title={t('appDebug.feature.groupChat.title')}
+          description={t('appDebug.feature.groupChat.description') as string}
+        >
+          <>
+            <FeatureItem
+              icon={<MessageHeartCircle className='w-4 h-4 text-[#DD2590]' />}
+              previewImgClassName='openingStatementPreview'
+              title={t('appDebug.feature.conversationOpener.title')}
+              description={t('appDebug.feature.conversationOpener.description')}
+              value={!!features.opening?.enabled}
+              onChange={handleChange}
+              type={FeatureEnum.opening}
+            />
+            <FeatureItem
+              icon={<SuggestedQuestionsAfterAnswerIcon />}
+              previewImgClassName='suggestedQuestionsAfterAnswerPreview'
+              title={t('appDebug.feature.suggestedQuestionsAfterAnswer.title')}
+              description={t('appDebug.feature.suggestedQuestionsAfterAnswer.description')}
+              value={!!features.suggested?.enabled}
+              onChange={handleChange}
+              type={FeatureEnum.suggested}
+            />
+            {
+              !!text2speechDefaultModel && (
+                <FeatureItem
+                  icon={<Speaker className='w-4 h-4 text-[#7839EE]' />}
+                  previewImgClassName='textToSpeechPreview'
+                  title={t('appDebug.feature.textToSpeech.title')}
+                  description={t('appDebug.feature.textToSpeech.description')}
+                  value={!!features.text2speech?.enabled}
+                  onChange={handleChange}
+                  type={FeatureEnum.text2speech}
+                />
+              )
+            }
+            {
+              !!speech2textDefaultModel && (
+                <FeatureItem
+                  icon={<Microphone01 className='w-4 h-4 text-[#7839EE]' />}
+                  previewImgClassName='speechToTextPreview'
+                  title={t('appDebug.feature.speechToText.title')}
+                  description={t('appDebug.feature.speechToText.description')}
+                  value={!!features.speech2text?.enabled}
+                  onChange={handleChange}
+                  type={FeatureEnum.speech2text}
+                />
+              )
+            }
+            <FeatureItem
+              icon={<Citations className='w-4 h-4 text-[#FD853A]' />}
+              previewImgClassName='citationPreview'
+              title={t('appDebug.feature.citation.title')}
+              description={t('appDebug.feature.citation.description')}
+              value={!!features.citation?.enabled}
+              onChange={handleChange}
+              type={FeatureEnum.citation}
+            />
+          </>
+        </FeatureGroup>
+
+        <FeatureGroup title={t('appDebug.feature.toolbox.title')}>
+          <>
+            <FeatureItem
+              icon={<FileSearch02 className='w-4 h-4 text-[#039855]' />}
+              previewImgClassName=''
+              title={t('appDebug.feature.moderation.title')}
+              description={t('appDebug.feature.moderation.description')}
+              value={!!features.moderation?.enabled}
+              onChange={handleChange}
+              type={FeatureEnum.moderation}
+            />
+          </>
+        </FeatureGroup>
+      </div>
+    </Modal>
+  )
+}
+export default React.memo(FeatureModal)

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

@@ -0,0 +1,41 @@
+'use client'
+import React from 'react'
+import { useTranslation } from 'react-i18next'
+import { useFeatures } from '../hooks'
+import type { OnFeaturesChange } from '../types'
+import FeatureModal from './feature-modal'
+import Button from '@/app/components/base/button'
+import { Plus } from '@/app/components/base/icons/src/vender/line/general'
+
+type ChooseFeatureProps = {
+  onChange?: OnFeaturesChange
+  disabled?: boolean
+}
+const ChooseFeature = ({
+  onChange,
+  disabled,
+}: ChooseFeatureProps) => {
+  const { t } = useTranslation()
+  const showFeaturesModal = useFeatures(s => s.showFeaturesModal)
+  const setShowFeaturesModal = useFeatures(s => s.setShowFeaturesModal)
+  return (
+    <>
+      <Button
+        className={`
+          px-3 py-0 h-8 rounded-lg border border-primary-100 bg-primary-25 shadow-xs text-xs font-semibold text-primary-600
+          ${disabled && 'cursor-not-allowed opacity-50'}
+        `}
+        onClick={() => !disabled && setShowFeaturesModal(true)}
+      >
+        <Plus className='mr-1 w-4 h-4' />
+        {t('appDebug.operation.addFeature')}
+      </Button>
+      {
+        showFeaturesModal && (
+          <FeatureModal onChange={onChange} />
+        )
+      }
+    </>
+  )
+}
+export default React.memo(ChooseFeature)