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/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)