publish toast

web/app/components/rag-pipeline/components/publish-toast.tsx

@@ -0,0 +1,47 @@
+import {
+  memo,
+  useState,
+} from 'react'
+import { useTranslation } from 'react-i18next'
+import {
+  RiCloseLine,
+  RiInformation2Fill,
+} from '@remixicon/react'
+import { useStore } from '@/app/components/workflow/store'
+
+const PublishToast = () => {
+  const { t } = useTranslation()
+  const publishedAt = useStore(s => s.publishedAt)
+  const [hideToast, setHideToast] = useState(false)
+
+  if (publishedAt || hideToast)
+    return null
+
+  return (
+    <div className='absolute bottom-[45px] left-0 right-0 z-10 flex justify-center'>
+      <div
+        className='relative flex w-[420px] space-x-1 overflow-hidden rounded-xl border border-components-panel-border bg-components-panel-bg-blur p-3 shadow-lg'
+      >
+        <div className='pointer-events-none absolute inset-0 bg-gradient-to-r from-components-badge-status-light-normal-halo to-background-gradient-mask-transparent opacity-[0.4]'>
+        </div>
+        <div className='flex h-6 w-6 items-center justify-center'>
+          <RiInformation2Fill className='text-text-accent' />
+        </div>
+        <div className='p-1'>
+          <div className='system-sm-semibold mb-1 text-text-primary'>{t('pipeline.publishToast.title')}</div>
+          <div className='system-xs-regular text-text-secondary'>
+            {t('pipeline.publishToast.desc')}
+          </div>
+        </div>
+        <div
+          className='flex h-6 w-6 cursor-pointer items-center justify-center'
+          onClick={() => setHideToast(true)}
+        >
+          <RiCloseLine className='h-4 w-4 text-text-tertiary' />
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default memo(PublishToast)

web/app/components/rag-pipeline/components/rag-pipeline-children.tsx

@@ -16,6 +16,7 @@ import {
   usePanelInteractions,
 } from '@/app/components/workflow/hooks'
 import { useEventEmitterContextContext } from '@/context/event-emitter'
+import PublishToast from './publish-toast'
 
 const RagPipelineChildren = () => {
   const { eventEmitter } = useEventEmitterContextContext()
@@ -62,6 +63,7 @@ const RagPipelineChildren = () => {
       {
         showInputFieldDialog && (<InputField />)
       }
+      <PublishToast />
     </>
   )
 }

web/i18n/en-US/pipeline.ts

@@ -15,6 +15,10 @@ const translation = {
     create: 'Create user input field',
     manage: 'Manage',
   },
+  publishToast: {
+    title: 'This pipeline has not yet been published',
+    desc: 'When the pipeline is not published, you can modify the chunk structure in the knowledge base node, and the pipeline orchestration and changes will be automatically saved as a draft.',
+  },
 }
 
 export default translation

web/i18n/zh-Hans/pipeline.ts

@@ -15,6 +15,10 @@ const translation = {
     create: '创建用户输入字段',
     manage: '管理',
   },
+  publishToast: {
+    title: '此 Pipeline 尚未发布',
+    desc: '当 Pipeline 未发布时，您可以修改知识库节点中的分块结构，Pipeline 编排和更改将自动保存为草稿。',
+  },
 }
 
 export default translation