feat: version tag (#14949)

web/app/components/app/app-publisher/index.tsx

@@ -5,9 +5,17 @@ import {
 } from 'react'
 import { useTranslation } from 'react-i18next'
 import dayjs from 'dayjs'
-import { RiArrowDownSLine, RiPlanetLine } from '@remixicon/react'
+import {
+  RiArrowDownSLine,
+  RiPlanetLine,
+  RiPlayCircleLine,
+  RiPlayList2Line,
+  RiTerminalBoxLine,
+} from '@remixicon/react'
+import { useKeyPress } from 'ahooks'
 import Toast from '../../base/toast'
 import type { ModelAndParameter } from '../configuration/debug/types'
+import { getKeyboardKeyCodeBySystem } from '../../workflow/utils'
 import SuggestedAction from './suggested-action'
 import PublishWithMultipleModel from './publish-with-multiple-model'
 import Button from '@/app/components/base/button'
@@ -20,13 +28,12 @@ import { fetchInstalledAppList } from '@/service/explore'
 import EmbeddedModal from '@/app/components/app/overview/embedded'
 import { useStore as useAppStore } from '@/app/components/app/store'
 import { useGetLanguage } from '@/context/i18n'
-import { PlayCircle } from '@/app/components/base/icons/src/vender/line/mediaAndDevices'
 import { CodeBrowser } from '@/app/components/base/icons/src/vender/line/development'
-import { LeftIndent02 } from '@/app/components/base/icons/src/vender/line/editor'
-import { FileText } from '@/app/components/base/icons/src/vender/line/files'
 import WorkflowToolConfigureButton from '@/app/components/tools/workflow-tool/configure-button'
 import type { InputVar } from '@/app/components/workflow/types'
 import { appDefaultIconBackground } from '@/config'
+import type { PublishWorkflowParams } from '@/types/workflow'
+import VersionInfoModal from './version-info-modal'
 
 export type AppPublisherProps = {
   disabled?: boolean
@@ -37,8 +44,7 @@ export type AppPublisherProps = {
   debugWithMultipleModel?: boolean
   multipleModelConfigs?: ModelAndParameter[]
   /** modelAndParameter is passed when debugWithMultipleModel is true */
-  onPublish?: (modelAndParameter?: ModelAndParameter) => Promise<any> | any
-  onRestore?: () => Promise<any> | any
+  onPublish?: (params?: any) => Promise<any> | any
   onToggle?: (state: boolean) => void
   crossAxisOffset?: number
   toolPublished?: boolean
@@ -46,6 +52,8 @@ export type AppPublisherProps = {
   onRefreshData?: () => void
 }
 
+const PUBLISH_SHORTCUT = ['⌘', '⇧', 'P']
+
 const AppPublisher = ({
   disabled = false,
   publishDisabled = false,
@@ -54,7 +62,6 @@ const AppPublisher = ({
   debugWithMultipleModel = false,
   multipleModelConfigs = [],
   onPublish,
-  onRestore,
   onToggle,
   crossAxisOffset = 0,
   toolPublished,
@@ -64,6 +71,7 @@ const AppPublisher = ({
   const { t } = useTranslation()
   const [published, setPublished] = useState(false)
   const [open, setOpen] = useState(false)
+  const [publishModalOpen, setPublishModalOpen] = useState(false)
   const appDetail = useAppStore(state => state.appDetail)
   const { app_base_url: appBaseURL = '', access_token: accessToken = '' } = appDetail?.site ?? {}
   const appMode = (appDetail?.mode !== 'completion' && appDetail?.mode !== 'workflow') ? 'chat' : appDetail.mode
@@ -74,24 +82,16 @@ const AppPublisher = ({
     return dayjs(time).locale(language === 'zh_Hans' ? 'zh-cn' : language.replace('_', '-')).fromNow()
   }, [language])
 
-  const handlePublish = async (modelAndParameter?: ModelAndParameter) => {
+  const handlePublish = async (params?: ModelAndParameter | PublishWorkflowParams) => {
     try {
-      await onPublish?.(modelAndParameter)
+      await onPublish?.(params)
       setPublished(true)
     }
-    catch (e) {
+    catch {
       setPublished(false)
     }
   }
 
-  const handleRestore = useCallback(async () => {
-    try {
-      await onRestore?.()
-      setOpen(false)
-    }
-    catch (e) { }
-  }, [onRestore])
-
   const handleTrigger = useCallback(() => {
     const state = !open
 
@@ -122,139 +122,178 @@ const AppPublisher = ({
 
   const [embeddingModalOpen, setEmbeddingModalOpen] = useState(false)
 
+  const openPublishModal = () => {
+    setOpen(false)
+    setPublishModalOpen(true)
+  }
+
+  const closePublishModal = () => {
+    setPublishModalOpen(false)
+  }
+
+  useKeyPress(`${getKeyboardKeyCodeBySystem('ctrl')}.shift.p`, (e) => {
+    e.preventDefault()
+    if (publishDisabled || published)
+      return
+    openPublishModal()
+  }
+  , { exactMatch: true, useCapture: true })
+
   return (
-    <PortalToFollowElem
-      open={open}
-      onOpenChange={setOpen}
-      placement='bottom-end'
-      offset={{
-        mainAxis: 4,
-        crossAxis: crossAxisOffset,
-      }}
-    >
-      <PortalToFollowElemTrigger onClick={handleTrigger}>
-        <Button
-          variant='primary'
-          className='pl-3 pr-2'
-          disabled={disabled}
-        >
-          {t('workflow.common.publish')}
-          <RiArrowDownSLine className='w-4 h-4 ml-0.5' />
-        </Button>
-      </PortalToFollowElemTrigger>
-      <PortalToFollowElemContent className='z-[11]'>
-        <div className='w-[336px] bg-components-panel-bg rounded-2xl border-[0.5px] border-components-panel-border shadow-xl'>
-          <div className='p-4 pt-3'>
-            <div className='flex items-center h-6 system-xs-medium-uppercase text-text-tertiary'>
-              {publishedAt ? t('workflow.common.latestPublished') : t('workflow.common.currentDraftUnpublished')}
-            </div>
-            {publishedAt
-              ? (
-                <div className='flex justify-between items-center h-[18px]'>
-                  <div className='flex items-center mt-[3px] mb-[3px] leading-[18px] text-[13px] font-medium text-text-secondary'>
+    <>
+      <PortalToFollowElem
+        open={open}
+        onOpenChange={setOpen}
+        placement='bottom-end'
+        offset={{
+          mainAxis: 4,
+          crossAxis: crossAxisOffset,
+        }}
+      >
+        <PortalToFollowElemTrigger onClick={handleTrigger}>
+          <Button
+            variant='primary'
+            className='p-2'
+            disabled={disabled}
+          >
+            {t('workflow.common.publish')}
+            <RiArrowDownSLine className='w-4 h-4 text-components-button-primary-text' />
+          </Button>
+        </PortalToFollowElemTrigger>
+        <PortalToFollowElemContent className='z-[11]'>
+          <div className='w-[320px] bg-components-panel-bg rounded-2xl border-[0.5px] border-components-panel-border shadow-xl shadow-shadow-shadow-5'>
+            <div className='p-4 pt-3'>
+              <div className='flex items-center h-6 system-xs-medium-uppercase text-text-tertiary'>
+                {publishedAt ? t('workflow.common.latestPublished') : t('workflow.common.currentDraftUnpublished')}
+              </div>
+              {publishedAt
+                ? (
+                  <div className='flex items-center system-sm-medium text-text-secondary'>
                     {t('workflow.common.publishedAt')} {formatTimeFromNow(publishedAt)}
                   </div>
+                )
+                : (
+                  <div className='flex items-center system-sm-medium text-text-secondary'>
+                    {t('workflow.common.autoSaved')} · {Boolean(draftUpdatedAt) && formatTimeFromNow(draftUpdatedAt!)}
+                  </div>
+                )}
+              {debugWithMultipleModel
+                ? (
+                  <PublishWithMultipleModel
+                    multipleModelConfigs={multipleModelConfigs}
+                    onSelect={item => handlePublish(item)}
+                  // textGenerationModelList={textGenerationModelList}
+                  />
+                )
+                : (
                   <Button
-                    variant='secondary-accent'
-                    size='small'
-                    onClick={handleRestore}
-                    disabled={published}
+                    variant='primary'
+                    className='w-full mt-3'
+                    onClick={openPublishModal}
+                    disabled={publishDisabled || published}
                   >
-                    {t('workflow.common.restore')}
+                    {
+                      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='w-4 h-4 text-text-primary-on-surface system-kbd rounded-[4px] bg-components-kbd-bg-white'>
+                                  {key}
+                                </span>
+                              ))}
+                            </div>
+                          </div>
+                        )
+                    }
                   </Button>
-                </div>
-              )
-              : (
-                <div className='flex items-center h-[18px] leading-[18px] text-[13px] font-medium text-text-secondary'>
-                  {t('workflow.common.autoSaved')} · {Boolean(draftUpdatedAt) && formatTimeFromNow(draftUpdatedAt!)}
-                </div>
-              )}
-            {debugWithMultipleModel
-              ? (
-                <PublishWithMultipleModel
-                  multipleModelConfigs={multipleModelConfigs}
-                  onSelect={item => handlePublish(item)}
-                // textGenerationModelList={textGenerationModelList}
-                />
-              )
-              : (
-                <Button
-                  variant='primary'
-                  className='w-full mt-3'
-                  onClick={() => handlePublish()}
-                  disabled={publishDisabled || published}
-                >
-                  {
-                    published
-                      ? t('workflow.common.published')
-                      : publishedAt ? t('workflow.common.update') : t('workflow.common.publish')
-                  }
-                </Button>
-              )
-            }
-          </div>
-          <div className='p-4 pt-3 border-t-[0.5px] border-divider-regular'>
-            <SuggestedAction disabled={!publishedAt} link={appURL} icon={<PlayCircle />}>{t('workflow.common.runApp')}</SuggestedAction>
-            {appDetail?.mode === 'workflow'
-              ? (
-                <SuggestedAction
-                  disabled={!publishedAt}
-                  link={`${appURL}${appURL.includes('?') ? '&' : '?'}mode=batch`}
-                  icon={<LeftIndent02 className='w-4 h-4' />}
-                >
-                  {t('workflow.common.batchRunApp')}
-                </SuggestedAction>
-              )
-              : (
-                <SuggestedAction
-                  onClick={() => {
-                    setEmbeddingModalOpen(true)
-                    handleTrigger()
-                  }}
-                  disabled={!publishedAt}
-                  icon={<CodeBrowser className='w-4 h-4' />}
-                >
-                  {t('workflow.common.embedIntoSite')}
-                </SuggestedAction>
-              )}
-            <SuggestedAction
-              onClick={() => {
-                publishedAt && handleOpenInExplore()
-              }}
-              disabled={!publishedAt}
-              icon={<RiPlanetLine className='w-4 h-4' />}
-            >
-              {t('workflow.common.openInExplore')}
-            </SuggestedAction>
-            <SuggestedAction disabled={!publishedAt} link='./develop' icon={<FileText className='w-4 h-4' />}>{t('workflow.common.accessAPIReference')}</SuggestedAction>
-            {appDetail?.mode === 'workflow' && (
-              <WorkflowToolConfigureButton
+                )
+              }
+            </div>
+            <div className='p-4 pt-3 border-t-[0.5px] border-t-divider-regular'>
+              <SuggestedAction
                 disabled={!publishedAt}
-                published={!!toolPublished}
-                detailNeedUpdate={!!toolPublished && published}
-                workflowAppId={appDetail?.id}
-                icon={{
-                  content: (appDetail.icon_type === 'image' ? '🤖' : appDetail?.icon) || '🤖',
-                  background: (appDetail.icon_type === 'image' ? appDefaultIconBackground : appDetail?.icon_background) || appDefaultIconBackground,
+                link={appURL}
+                icon={<RiPlayCircleLine className='w-4 h-4' />}
+              >
+                {t('workflow.common.runApp')}
+              </SuggestedAction>
+              {appDetail?.mode === 'workflow'
+                ? (
+                  <SuggestedAction
+                    disabled={!publishedAt}
+                    link={`${appURL}${appURL.includes('?') ? '&' : '?'}mode=batch`}
+                    icon={<RiPlayList2Line className='w-4 h-4' />}
+                  >
+                    {t('workflow.common.batchRunApp')}
+                  </SuggestedAction>
+                )
+                : (
+                  <SuggestedAction
+                    onClick={() => {
+                      setEmbeddingModalOpen(true)
+                      handleTrigger()
+                    }}
+                    disabled={!publishedAt}
+                    icon={<CodeBrowser className='w-4 h-4' />}
+                  >
+                    {t('workflow.common.embedIntoSite')}
+                  </SuggestedAction>
+                )}
+              <SuggestedAction
+                onClick={() => {
+                  publishedAt && handleOpenInExplore()
                 }}
-                name={appDetail?.name}
-                description={appDetail?.description}
-                inputs={inputs}
-                handlePublish={handlePublish}
-                onRefreshData={onRefreshData}
-              />
-            )}
+                disabled={!publishedAt}
+                icon={<RiPlanetLine className='w-4 h-4' />}
+              >
+                {t('workflow.common.openInExplore')}
+              </SuggestedAction>
+              <SuggestedAction
+                disabled={!publishedAt}
+                link='./develop'
+                icon={<RiTerminalBoxLine className='w-4 h-4' />}
+              >
+                {t('workflow.common.accessAPIReference')}
+              </SuggestedAction>
+              {appDetail?.mode === 'workflow' && (
+                <WorkflowToolConfigureButton
+                  disabled={!publishedAt}
+                  published={!!toolPublished}
+                  detailNeedUpdate={!!toolPublished && published}
+                  workflowAppId={appDetail?.id}
+                  icon={{
+                    content: (appDetail.icon_type === 'image' ? '🤖' : appDetail?.icon) || '🤖',
+                    background: (appDetail.icon_type === 'image' ? appDefaultIconBackground : appDetail?.icon_background) || appDefaultIconBackground,
+                  }}
+                  name={appDetail?.name}
+                  description={appDetail?.description}
+                  inputs={inputs}
+                  handlePublish={handlePublish}
+                  onRefreshData={onRefreshData}
+                />
+              )}
+            </div>
           </div>
-        </div>
-      </PortalToFollowElemContent>
-      <EmbeddedModal
-        siteInfo={appDetail?.site}
-        isShow={embeddingModalOpen}
-        onClose={() => setEmbeddingModalOpen(false)}
-        appBaseUrl={appBaseURL}
-        accessToken={accessToken}
-      />
-    </PortalToFollowElem >
+        </PortalToFollowElemContent>
+        <EmbeddedModal
+          siteInfo={appDetail?.site}
+          isShow={embeddingModalOpen}
+          onClose={() => setEmbeddingModalOpen(false)}
+          appBaseUrl={appBaseURL}
+          accessToken={accessToken}
+        />
+      </PortalToFollowElem >
+      {publishModalOpen && (
+        <VersionInfoModal
+          isOpen={publishModalOpen}
+          onClose={closePublishModal}
+          onPublish={handlePublish}
+        />
+      )}
+    </>
   )
 }
 

web/app/components/app/app-publisher/suggested-action.tsx

@@ -1,6 +1,6 @@
 import type { HTMLProps, PropsWithChildren } from 'react'
+import { RiArrowRightUpLine } from '@remixicon/react'
 import classNames from '@/utils/classnames'
-import { ArrowUpRight } from '@/app/components/base/icons/src/vender/line/arrows'
 
 export type SuggestedActionProps = PropsWithChildren<HTMLProps<HTMLAnchorElement> & {
   icon?: React.ReactNode
@@ -14,15 +14,15 @@ const SuggestedAction = ({ icon, link, disabled, children, className, ...props }
     target='_blank'
     rel='noreferrer'
     className={classNames(
-      'flex justify-start items-center gap-2 h-[34px] px-2.5 bg-background-section-burn rounded-lg transition-colors text-text-secondary [&:not(:first-child)]:mt-1',
-      disabled ? 'shadow-xs opacity-30 cursor-not-allowed' : 'hover:bg-state-accent-hover hover:text-text-accent cursor-pointer',
+      'flex justify-start items-center gap-2 py-2 px-2.5 bg-background-section-burn rounded-lg transition-colors [&:not(:first-child)]:mt-1',
+      disabled ? 'shadow-xs opacity-30 cursor-not-allowed' : 'text-text-secondary hover:bg-state-accent-hover hover:text-text-accent cursor-pointer',
       className,
     )}
     {...props}
   >
     <div className='relative w-4 h-4'>{icon}</div>
-    <div className='grow shrink basis-0 text-[13px] font-medium leading-[18px]'>{children}</div>
-    <ArrowUpRight />
+    <div className='grow shrink basis-0 system-sm-medium'>{children}</div>
+    <RiArrowRightUpLine className='w-3.5 h-3.5' />
   </a>
 )
 

web/app/components/app/app-publisher/version-info-modal.tsx

@@ -0,0 +1,112 @@
+import React, { type FC, useCallback, useState } from 'react'
+import Modal from '@/app/components/base/modal'
+import type { VersionHistory } from '@/types/workflow'
+import { useTranslation } from 'react-i18next'
+import { RiCloseLine } from '@remixicon/react'
+import Input from '../../base/input'
+import Textarea from '../../base/textarea'
+import Button from '../../base/button'
+import Toast from '@/app/components/base/toast'
+
+type VersionInfoModalProps = {
+  isOpen: boolean
+  versionInfo?: VersionHistory
+  onClose: () => void
+  onPublish: (params: { title: string; releaseNotes: string; id?: string }) => void
+}
+
+const TITLE_MAX_LENGTH = 15
+const RELEASE_NOTES_MAX_LENGTH = 100
+
+const VersionInfoModal: FC<VersionInfoModalProps> = ({
+  isOpen,
+  versionInfo,
+  onClose,
+  onPublish,
+}) => {
+  const { t } = useTranslation()
+  const [title, setTitle] = useState(versionInfo?.marked_name || '')
+  const [releaseNotes, setReleaseNotes] = useState(versionInfo?.marked_comment || '')
+  const [titleError, setTitleError] = useState(false)
+  const [releaseNotesError, setReleaseNotesError] = useState(false)
+
+  const handlePublish = () => {
+    if (title.length > TITLE_MAX_LENGTH) {
+      setTitleError(true)
+      Toast.notify({
+        type: 'error',
+        message: t('workflow.versionHistory.editField.titleLengthLimit', { limit: TITLE_MAX_LENGTH }),
+      })
+      return
+    }
+    else {
+      titleError && setTitleError(false)
+    }
+
+    if (releaseNotes.length > RELEASE_NOTES_MAX_LENGTH) {
+      setReleaseNotesError(true)
+      Toast.notify({
+        type: 'error',
+        message: t('workflow.versionHistory.editField.releaseNotesLengthLimit', { limit: RELEASE_NOTES_MAX_LENGTH }),
+      })
+      return
+    }
+    else {
+      releaseNotesError && setReleaseNotesError(false)
+    }
+
+    onPublish({ title, releaseNotes, id: versionInfo?.id })
+    onClose()
+  }
+
+  const handleTitleChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
+    setTitle(e.target.value)
+  }, [])
+
+  const handleDescriptionChange = useCallback((e: React.ChangeEvent<HTMLTextAreaElement>) => {
+    setReleaseNotes(e.target.value)
+  }, [])
+
+  return <Modal className='p-0' isShow={isOpen} onClose={onClose}>
+    <div className='relative w-full p-6 pb-4 pr-14'>
+      <div className='text-text-primary title-2xl-semi-bold first-letter:capitalize'>
+        {versionInfo?.marked_name ? t('workflow.versionHistory.editVersionInfo') : t('workflow.versionHistory.nameThisVersion')}
+      </div>
+      <div className='w-8 h-8 flex items-center justify-center p-1.5 absolute top-5 right-5 cursor-pointer' onClick={onClose}>
+        <RiCloseLine className='w-[18px] h-[18px] text-text-tertiary' />
+      </div>
+    </div>
+    <div className='flex flex-col gap-y-4 px-6 py-3'>
+      <div className='flex flex-col gap-y-1'>
+        <div className='flex items-center h-6 text-text-secondary system-sm-semibold'>
+          {t('workflow.versionHistory.editField.title')}
+        </div>
+        <Input
+          value={title}
+          placeholder={t('workflow.versionHistory.nameThisVersion')}
+          onChange={handleTitleChange}
+          destructive={titleError}
+        />
+      </div>
+      <div className='flex flex-col gap-y-1'>
+        <div className='flex items-center h-6 text-text-secondary system-sm-semibold'>
+          {t('workflow.versionHistory.editField.releaseNotes')}
+        </div>
+        <Textarea
+          value={releaseNotes}
+          placeholder={t('workflow.versionHistory.releaseNotesPlaceholder')}
+          onChange={handleDescriptionChange}
+          destructive={releaseNotesError}
+        />
+      </div>
+    </div>
+    <div className='flex justify-end p-6 pt-5'>
+      <div className='flex items-center gap-x-3'>
+        <Button onClick={onClose}>{t('common.operation.cancel')}</Button>
+        <Button variant='primary' onClick={handlePublish}>{t('workflow.common.publish')}</Button>
+      </div>
+    </div>
+  </Modal>
+}
+
+export default VersionInfoModal