feat: knowledge pipeline (#25360)

Signed-off-by: -LAN- <laipz8200@outlook.com>
Co-authored-by: twwu <twwu@dify.ai>
Co-authored-by: crazywoola <100913391+crazywoola@users.noreply.github.com>
Co-authored-by: jyong <718720800@qq.com>
Co-authored-by: Wu Tianwei <30284043+WTW0313@users.noreply.github.com>
Co-authored-by: QuantumGhost <obelisk.reg+git@gmail.com>
Co-authored-by: lyzno1 <yuanyouhuilyz@gmail.com>
Co-authored-by: quicksand <quicksandzn@gmail.com>
Co-authored-by: Jyong <76649700+JohnJyong@users.noreply.github.com>
Co-authored-by: lyzno1 <92089059+lyzno1@users.noreply.github.com>
Co-authored-by: zxhlyh <jasonapring2015@outlook.com>
Co-authored-by: Yongtao Huang <yongtaoh2022@gmail.com>
Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
Co-authored-by: Joel <iamjoel007@gmail.com>
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
Co-authored-by: nite-knite <nkCoding@gmail.com>
Co-authored-by: Hanqing Zhao <sherry9277@gmail.com>
Co-authored-by: gemini-code-assist[bot] <176961590+gemini-code-assist[bot]@users.noreply.github.com>
Co-authored-by: Harry <xh001x@hotmail.com>

web/app/components/billing/pricing/plans/self-hosted-plan-item/button.tsx

@@ -0,0 +1,55 @@
+import React, { useMemo } from 'react'
+import { SelfHostedPlan } from '../../../type'
+import { AwsMarketplaceDark, AwsMarketplaceLight } from '@/app/components/base/icons/src/public/billing'
+import { RiArrowRightLine } from '@remixicon/react'
+import cn from '@/utils/classnames'
+import { useTranslation } from 'react-i18next'
+import useTheme from '@/hooks/use-theme'
+import { Theme } from '@/types/app'
+
+const BUTTON_CLASSNAME = {
+  [SelfHostedPlan.community]: 'text-text-primary bg-components-button-tertiary-bg hover:bg-components-button-tertiary-bg-hover',
+  [SelfHostedPlan.premium]: 'text-background-default bg-saas-background-inverted hover:bg-saas-background-inverted-hover',
+  [SelfHostedPlan.enterprise]: 'text-text-primary-on-surface bg-saas-dify-blue-static hover:bg-saas-dify-blue-static-hover',
+}
+
+type ButtonProps = {
+  plan: SelfHostedPlan
+  handleGetPayUrl: () => void
+}
+
+const Button = ({
+  plan,
+  handleGetPayUrl,
+}: ButtonProps) => {
+  const { t } = useTranslation()
+  const { theme } = useTheme()
+  const i18nPrefix = `billing.plans.${plan}`
+  const isPremiumPlan = plan === SelfHostedPlan.premium
+  const AwsMarketplace = useMemo(() => {
+    return theme === Theme.light ? AwsMarketplaceLight : AwsMarketplaceDark
+  }, [theme])
+
+  return (
+    <button
+      className={cn(
+        'system-xl-semibold flex items-center gap-x-2 py-3 pl-5 pr-4',
+        BUTTON_CLASSNAME[plan],
+        isPremiumPlan && 'py-2',
+      )}
+      onClick={handleGetPayUrl}
+    >
+      <div className='flex grow items-center gap-x-2'>
+        <span>{t(`${i18nPrefix}.btnText`)}</span>
+        {isPremiumPlan && (
+          <span className='pb-px pt-[7px]'>
+            <AwsMarketplace className='h-6' />
+          </span>
+        )}
+      </div>
+      <RiArrowRightLine className='size-5 shrink-0' />
+    </button>
+  )
+}
+
+export default React.memo(Button)