add publisher

web/app/components/rag-pipeline/components/rag-pipeline-header/index.tsx

@@ -2,6 +2,7 @@ import { useMemo } from 'react'
 import type { HeaderProps } from '@/app/components/workflow/header'
 import Header from '@/app/components/workflow/header'
 import InputFieldButton from './input-field-button'
+import Publisher from './publisher'
 
 const RagPipelineHeader = () => {
   const headerProps: HeaderProps = useMemo(() => {
@@ -9,6 +10,7 @@ const RagPipelineHeader = () => {
       normal: {
         components: {
           left: <InputFieldButton />,
+          middle: <Publisher />,
         },
       },
     }

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

@@ -0,0 +1,35 @@
+import { useTranslation } from 'react-i18next'
+import { RiArrowDownSLine } from '@remixicon/react'
+import Button from '@/app/components/base/button'
+import {
+  PortalToFollowElem,
+  PortalToFollowElemContent,
+  PortalToFollowElemTrigger,
+} from '@/app/components/base/portal-to-follow-elem'
+import Popup from './popup'
+
+const Publisher = () => {
+  const { t } = useTranslation()
+
+  return (
+    <PortalToFollowElem
+      placement='bottom-end'
+      offset={{
+        mainAxis: 4,
+        crossAxis: 40,
+      }}
+    >
+      <PortalToFollowElemTrigger>
+        <Button variant='primary'>
+          {t('workflow.common.publish')}
+          <RiArrowDownSLine className='h-4 w-4' />
+        </Button>
+      </PortalToFollowElemTrigger>
+      <PortalToFollowElemContent>
+        <Popup />
+      </PortalToFollowElemContent>
+    </PortalToFollowElem>
+  )
+}
+
+export default Publisher

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

@@ -0,0 +1,111 @@
+import {
+  useCallback,
+  useState,
+} from 'react'
+import {
+  RiArrowRightUpLine,
+  RiHammerLine,
+  RiPlayCircleLine,
+  RiTerminalBoxLine,
+} from '@remixicon/react'
+import { useTranslation } from 'react-i18next'
+import { useStore } from '@/app/components/workflow/store'
+import Button from '@/app/components/base/button'
+import { useFormatTimeFromNow } from '@/app/components/workflow/hooks'
+import Divider from '@/app/components/base/divider'
+
+const PUBLISH_SHORTCUT = ['⌘', '⇧', 'P']
+
+const Popup = () => {
+  const { t } = useTranslation()
+  const [published, setPublished] = useState(false)
+  const publishedAt = useStore(s => s.publishedAt)
+  const draftUpdatedAt = useStore(s => s.draftUpdatedAt)
+  const { formatTimeFromNow } = useFormatTimeFromNow()
+
+  const handlePublish = useCallback(async () => {
+    try {
+      setPublished(true)
+    }
+    catch {
+      setPublished(false)
+    }
+  }, [])
+
+  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='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')}
+        </div>
+        {
+          publishedAt
+            ? (
+              <div className='flex items-center justify-between'>
+                <div className='system-sm-medium flex items-center text-text-secondary'>
+                  {t('workflow.common.publishedAt')} {formatTimeFromNow(publishedAt)}
+                </div>
+              </div>
+            )
+            : (
+              <div className='system-sm-medium flex items-center text-text-secondary'>
+                {t('workflow.common.autoSaved')} · {Boolean(draftUpdatedAt) && formatTimeFromNow(draftUpdatedAt!)}
+              </div>
+            )
+        }
+        <Button
+          variant='primary'
+          className='mt-3 w-full'
+          onClick={() => handlePublish()}
+          disabled={published}
+        >
+          {
+            published
+              ? t('workflow.common.published')
+              : (
+                <div className='flex gap-1'>
+                  <span>{t('workflow.common.publishUpdate')}</span>
+                  <div className='flex gap-0.5'>
+                    {PUBLISH_SHORTCUT.map(key => (
+                      <span key={key} className='system-kbd h-4 w-4 rounded-[4px] bg-components-kbd-bg-white text-text-primary-on-surface'>
+                        {key}
+                      </span>
+                    ))}
+                  </div>
+                </div>
+              )
+          }
+        </Button>
+      </div>
+      <div className='border-t-[0.5px] border-t-divider-regular p-4 pt-3'>
+        <Button
+          className='w-full'
+        >
+          <div className='flex grow items-center'>
+            <RiPlayCircleLine className='mr-2 h-4 w-4' />
+            Go to add documents
+          </div>
+          <RiArrowRightUpLine className='ml-2 h-4 w-4 shrink-0' />
+        </Button>
+        <Button
+          className='w-full'
+        >
+          <div className='flex grow items-center'>
+            <RiTerminalBoxLine className='mr-2 h-4 w-4' />
+            Access API Reference
+          </div>
+          <RiArrowRightUpLine className='ml-2 h-4 w-4 shrink-0' />
+        </Button>
+        <Divider />
+        <Button
+          className='w-full'
+        >
+          <RiHammerLine className='mr-2 h-4 w-4' />
+          Publish as a Knowledge Pipeline
+        </Button>
+      </div>
+    </div>
+  )
+}
+
+export default Popup