feat: add knowledge pipeline publishing feature and update billing context; refactor popup component for conditional rendering

web/app/components/billing/pricing/assets/cloud.tsx

@@ -9,7 +9,7 @@ const Cloud = ({
 
   return (
     <svg xmlns='http://www.w3.org/2000/svg' width='16' height='17' viewBox='0 0 16 17' fill='none'>
-      <g clip-path='url(#clip0_1_4630)'>
+      <g clipPath='url(#clip0_1_4630)'>
         <rect y='0.5' width='4' height='4' rx='2' fill={color} />
         <rect opacity='0.18' x='6' y='0.5' width='4' height='4' rx='2' fill='var(--color-text-quaternary)' />
         <rect x='12' y='0.5' width='4' height='4' rx='2' fill={color} />

web/app/components/billing/pricing/assets/self-hosted.tsx

@@ -9,7 +9,7 @@ const SelfHosted = ({
 
   return (
     <svg xmlns='http://www.w3.org/2000/svg' width='16' height='17' viewBox='0 0 16 17' fill='none'>
-      <g clip-path='url(#clip0_1_4644)'>
+      <g clipPath='url(#clip0_1_4644)'>
         <rect opacity='0.18' y='0.5' width='4' height='4' rx='2' fill='var(--color-text-quaternary)' />
         <rect x='6' y='0.5' width='4' height='4' rx='2' fill={color} />
         <rect opacity='0.18' x='12' y='0.5' width='4' height='4' rx='2' fill='var(--color-text-quaternary)' />

web/app/components/billing/type.ts

@@ -101,6 +101,9 @@ export type CurrentPlanInfoBackend = {
     limit: number
   },
   is_allow_transfer_workspace: boolean
+  knowledge_pipeline: {
+    publish_enabled: boolean
+  },
 }
 
 export type SubscriptionItem = {

web/app/components/rag-pipeline/components/rag-pipeline-header/publisher/popup.tsx

@@ -39,6 +39,11 @@ import Confirm from '@/app/components/base/confirm'
 import PublishAsKnowledgePipelineModal from '../../publish-as-knowledge-pipeline-modal'
 import type { IconInfo } from '@/models/datasets'
 import { useResetDatasetList } from '@/service/knowledge/use-dataset'
+import { useProviderContext } from '@/context/provider-context'
+import classNames from '@/utils/classnames'
+import PremiumBadge from '@/app/components/base/premium-badge'
+import { SparklesSoft } from '@/app/components/base/icons/src/public/common'
+import { useModalContextSelector } from '@/context/modal-context'
 
 const PUBLISH_SHORTCUT = ['ctrl', '⇧', 'P']
 
@@ -56,6 +61,9 @@ const Popup = () => {
   const { mutateAsync: publishWorkflow } = usePublishWorkflow()
   const { notify } = useToastContext()
   const workflowStore = useWorkflowStore()
+  const { isAllowPublishAsKnowledgePipeline } = useProviderContext()
+  const setShowPricingModal = useModalContextSelector(s => s.setShowPricingModal)
+
   const [confirmVisible, {
     setFalse: hideConfirm,
     setTrue: showConfirm,
@@ -158,8 +166,18 @@ const Popup = () => {
     t,
   ])
 
+  const handleClickPublishAsKnowledgePipeline = useCallback(() => {
+    if (!isAllowPublishAsKnowledgePipeline)
+      setShowPricingModal()
+    else
+      setShowPublishAsKnowledgePipelineModal()
+  }, [isAllowPublishAsKnowledgePipeline, setShowPublishAsKnowledgePipelineModal, setShowPricingModal])
+
   return (
-    <div className='w-[320px] rounded-2xl border-[0.5px] border-components-panel-border bg-components-panel-bg shadow-xl shadow-shadow-shadow-5'>
+    <div className={classNames(
+      'rounded-2xl border-[0.5px] border-components-panel-border bg-components-panel-bg shadow-xl shadow-shadow-shadow-5',
+      isAllowPublishAsKnowledgePipeline ? 'w-[320px] ' : 'w-[360px]',
+    )}>
       <div className='p-4 pt-3'>
         <div className='system-xs-medium-uppercase flex h-6 items-center text-text-tertiary'>
           {publishedAt ? t('workflow.common.latestPublished') : t('workflow.common.currentDraftUnpublished')}
@@ -233,12 +251,20 @@ const Popup = () => {
         <Button
           className='w-full hover:bg-state-accent-hover hover:text-text-accent'
           variant='tertiary'
-          onClick={setShowPublishAsKnowledgePipelineModal}
+          onClick={handleClickPublishAsKnowledgePipeline}
           disabled={!publishedAt || isPublishingAsCustomizedPipeline}
         >
-          <div className='flex grow items-center'>
+          <div className='flex grow items-center gap-x-2'>
-            <RiHammerLine className='mr-2 h-4 w-4' />
+            <RiHammerLine className='h-4 w-4' />
             {t('pipeline.common.publishAs')}
+            {!isAllowPublishAsKnowledgePipeline && (
+              <PremiumBadge className='cursor-pointer select-none' size='s' color='indigo'>
+                <SparklesSoft className='flex size-3 items-center text-components-premium-badge-indigo-text-stop-0' />
+                <span className='system-2xs-medium p-0.5'>
+                  {t('billing.upgradeBtn.encourageShort')}
+                </span>
+              </PremiumBadge>
+            )}
           </div>
         </Button>
       </div>

web/context/provider-context.tsx

@@ -57,6 +57,7 @@ type ProviderContextState = {
   },
   refreshLicenseLimit: () => void
   isAllowTransferWorkspace: boolean
+  isAllowPublishAsKnowledgePipeline: boolean
 }
 const ProviderContext = createContext<ProviderContextState>({
   modelProviders: [],
@@ -99,6 +100,7 @@ const ProviderContext = createContext<ProviderContextState>({
   },
   refreshLicenseLimit: noop,
   isAllowTransferWorkspace: false,
+  isAllowPublishAsKnowledgePipeline: false,
 })
 
 export const useProviderContext = () => useContext(ProviderContext)
@@ -137,6 +139,7 @@ export const ProviderContextProvider = ({
   const [isEducationWorkspace, setIsEducationWorkspace] = useState(false)
   const { data: isEducationAccount } = useEducationStatus(!enableEducationPlan)
   const [isAllowTransferWorkspace, setIsAllowTransferWorkspace] = useState(false)
+  const [isAllowPublishAsKnowledgePipeline, setIsAllowPublishAsKnowledgePipeline] = useState(false)
 
   const fetchPlan = async () => {
     try {
@@ -167,6 +170,8 @@ export const ProviderContextProvider = ({
         setLicenseLimit({ workspace_members: data.workspace_members })
       if (data.is_allow_transfer_workspace)
         setIsAllowTransferWorkspace(data.is_allow_transfer_workspace)
+      if (data.knowledge_pipeline?.publish_enabled)
+        setIsAllowPublishAsKnowledgePipeline(data.knowledge_pipeline?.publish_enabled)
     }
     catch (error) {
       console.error('Failed to fetch plan info:', error)
@@ -228,6 +233,7 @@ export const ProviderContextProvider = ({
       licenseLimit,
       refreshLicenseLimit: fetchPlan,
       isAllowTransferWorkspace,
+      isAllowPublishAsKnowledgePipeline,
     }}>
       {children}
     </ProviderContext.Provider>