mirror of https://github.com/langgenius/dify.git
506 lines
22 KiB
TypeScript
506 lines
22 KiB
TypeScript
import type { ModelAndParameter } from '../configuration/debug/types'
|
|
import type { InputVar, Variable } from '@/app/components/workflow/types'
|
|
import type { PublishWorkflowParams } from '@/types/workflow'
|
|
import {
|
|
RiArrowDownSLine,
|
|
RiArrowRightSLine,
|
|
RiBuildingLine,
|
|
RiGlobalLine,
|
|
RiLockLine,
|
|
RiPlanetLine,
|
|
RiPlayCircleLine,
|
|
RiPlayList2Line,
|
|
RiTerminalBoxLine,
|
|
RiVerifiedBadgeLine,
|
|
} from '@remixicon/react'
|
|
import { useKeyPress } from 'ahooks'
|
|
import {
|
|
memo,
|
|
useCallback,
|
|
useEffect,
|
|
useMemo,
|
|
useState,
|
|
} from 'react'
|
|
import { useTranslation } from 'react-i18next'
|
|
import EmbeddedModal from '@/app/components/app/overview/embedded'
|
|
import { useStore as useAppStore } from '@/app/components/app/store'
|
|
import { trackEvent } from '@/app/components/base/amplitude'
|
|
import Button from '@/app/components/base/button'
|
|
import { CodeBrowser } from '@/app/components/base/icons/src/vender/line/development'
|
|
import {
|
|
PortalToFollowElem,
|
|
PortalToFollowElemContent,
|
|
PortalToFollowElemTrigger,
|
|
} from '@/app/components/base/portal-to-follow-elem'
|
|
import UpgradeBtn from '@/app/components/billing/upgrade-btn'
|
|
import WorkflowToolConfigureButton from '@/app/components/tools/workflow-tool/configure-button'
|
|
import { appDefaultIconBackground } from '@/config'
|
|
import { useGlobalPublicStore } from '@/context/global-public-context'
|
|
import { useAsyncWindowOpen } from '@/hooks/use-async-window-open'
|
|
import { useFormatTimeFromNow } from '@/hooks/use-format-time-from-now'
|
|
import { AccessMode } from '@/models/access-control'
|
|
import { useAppWhiteListSubjects, useGetUserCanAccessApp } from '@/service/access-control'
|
|
import { fetchAppDetailDirect } from '@/service/apps'
|
|
import { fetchInstalledAppList } from '@/service/explore'
|
|
import { AppModeEnum } from '@/types/app'
|
|
import { basePath } from '@/utils/var'
|
|
import Divider from '../../base/divider'
|
|
import Loading from '../../base/loading'
|
|
import Toast from '../../base/toast'
|
|
import Tooltip from '../../base/tooltip'
|
|
import { getKeyboardKeyCodeBySystem, getKeyboardKeyNameBySystem } from '../../workflow/utils'
|
|
import AccessControl from '../app-access-control'
|
|
import PublishWithMultipleModel from './publish-with-multiple-model'
|
|
import SuggestedAction from './suggested-action'
|
|
|
|
const ACCESS_MODE_MAP: Record<AccessMode, { label: string, icon: React.ElementType }> = {
|
|
[AccessMode.ORGANIZATION]: {
|
|
label: 'organization',
|
|
icon: RiBuildingLine,
|
|
},
|
|
[AccessMode.SPECIFIC_GROUPS_MEMBERS]: {
|
|
label: 'specific',
|
|
icon: RiLockLine,
|
|
},
|
|
[AccessMode.PUBLIC]: {
|
|
label: 'anyone',
|
|
icon: RiGlobalLine,
|
|
},
|
|
[AccessMode.EXTERNAL_MEMBERS]: {
|
|
label: 'external',
|
|
icon: RiVerifiedBadgeLine,
|
|
},
|
|
}
|
|
|
|
const AccessModeDisplay: React.FC<{ mode?: AccessMode }> = ({ mode }) => {
|
|
const { t } = useTranslation()
|
|
|
|
if (!mode || !ACCESS_MODE_MAP[mode])
|
|
return null
|
|
|
|
const { icon: Icon, label } = ACCESS_MODE_MAP[mode]
|
|
|
|
return (
|
|
<>
|
|
<Icon className="h-4 w-4 shrink-0 text-text-secondary" />
|
|
<div className="grow truncate">
|
|
<span className="system-sm-medium text-text-secondary">{t(`app.accessControlDialog.accessItems.${label}` as any) as string}</span>
|
|
</div>
|
|
</>
|
|
)
|
|
}
|
|
|
|
export type AppPublisherProps = {
|
|
disabled?: boolean
|
|
publishDisabled?: boolean
|
|
publishedAt?: number
|
|
/** only needed in workflow / chatflow mode */
|
|
draftUpdatedAt?: number
|
|
debugWithMultipleModel?: boolean
|
|
multipleModelConfigs?: ModelAndParameter[]
|
|
/** modelAndParameter is passed when debugWithMultipleModel is true */
|
|
onPublish?: (params?: any) => Promise<any> | any
|
|
onRestore?: () => Promise<any> | any
|
|
onToggle?: (state: boolean) => void
|
|
crossAxisOffset?: number
|
|
toolPublished?: boolean
|
|
inputs?: InputVar[]
|
|
outputs?: Variable[]
|
|
onRefreshData?: () => void
|
|
workflowToolAvailable?: boolean
|
|
missingStartNode?: boolean
|
|
hasTriggerNode?: boolean // Whether workflow currently contains any trigger nodes (used to hide missing-start CTA when triggers exist).
|
|
startNodeLimitExceeded?: boolean
|
|
}
|
|
|
|
const PUBLISH_SHORTCUT = ['ctrl', '⇧', 'P']
|
|
|
|
const AppPublisher = ({
|
|
disabled = false,
|
|
publishDisabled = false,
|
|
publishedAt,
|
|
draftUpdatedAt,
|
|
debugWithMultipleModel = false,
|
|
multipleModelConfigs = [],
|
|
onPublish,
|
|
onRestore,
|
|
onToggle,
|
|
crossAxisOffset = 0,
|
|
toolPublished,
|
|
inputs,
|
|
outputs,
|
|
onRefreshData,
|
|
workflowToolAvailable = true,
|
|
missingStartNode = false,
|
|
hasTriggerNode = false,
|
|
startNodeLimitExceeded = false,
|
|
}: AppPublisherProps) => {
|
|
const { t } = useTranslation()
|
|
|
|
const [published, setPublished] = useState(false)
|
|
const [open, setOpen] = useState(false)
|
|
const [showAppAccessControl, setShowAppAccessControl] = useState(false)
|
|
const [isAppAccessSet, setIsAppAccessSet] = useState(true)
|
|
const [embeddingModalOpen, setEmbeddingModalOpen] = useState(false)
|
|
|
|
const appDetail = useAppStore(state => state.appDetail)
|
|
const setAppDetail = useAppStore(s => s.setAppDetail)
|
|
const systemFeatures = useGlobalPublicStore(s => s.systemFeatures)
|
|
const { formatTimeFromNow } = useFormatTimeFromNow()
|
|
const { app_base_url: appBaseURL = '', access_token: accessToken = '' } = appDetail?.site ?? {}
|
|
|
|
const appMode = (appDetail?.mode !== AppModeEnum.COMPLETION && appDetail?.mode !== AppModeEnum.WORKFLOW) ? AppModeEnum.CHAT : appDetail.mode
|
|
const appURL = `${appBaseURL}${basePath}/${appMode}/${accessToken}`
|
|
const isChatApp = [AppModeEnum.CHAT, AppModeEnum.AGENT_CHAT, AppModeEnum.COMPLETION].includes(appDetail?.mode || AppModeEnum.CHAT)
|
|
|
|
const { data: userCanAccessApp, isLoading: isGettingUserCanAccessApp, refetch } = useGetUserCanAccessApp({ appId: appDetail?.id, enabled: false })
|
|
const { data: appAccessSubjects, isLoading: isGettingAppWhiteListSubjects } = useAppWhiteListSubjects(appDetail?.id, open && systemFeatures.webapp_auth.enabled && appDetail?.access_mode === AccessMode.SPECIFIC_GROUPS_MEMBERS)
|
|
const openAsyncWindow = useAsyncWindowOpen()
|
|
|
|
const noAccessPermission = useMemo(() => systemFeatures.webapp_auth.enabled && appDetail && appDetail.access_mode !== AccessMode.EXTERNAL_MEMBERS && !userCanAccessApp?.result, [systemFeatures, appDetail, userCanAccessApp])
|
|
const disabledFunctionButton = useMemo(() => (!publishedAt || missingStartNode || noAccessPermission), [publishedAt, missingStartNode, noAccessPermission])
|
|
|
|
const disabledFunctionTooltip = useMemo(() => {
|
|
if (!publishedAt)
|
|
return t('app.notPublishedYet')
|
|
if (missingStartNode)
|
|
return t('app.noUserInputNode')
|
|
if (noAccessPermission)
|
|
return t('app.noAccessPermission')
|
|
}, [missingStartNode, noAccessPermission, publishedAt])
|
|
|
|
useEffect(() => {
|
|
if (systemFeatures.webapp_auth.enabled && open && appDetail)
|
|
refetch()
|
|
}, [open, appDetail, refetch, systemFeatures])
|
|
|
|
useEffect(() => {
|
|
if (appDetail && appAccessSubjects) {
|
|
if (appDetail.access_mode === AccessMode.SPECIFIC_GROUPS_MEMBERS && appAccessSubjects.groups?.length === 0 && appAccessSubjects.members?.length === 0)
|
|
setIsAppAccessSet(false)
|
|
else
|
|
setIsAppAccessSet(true)
|
|
}
|
|
else {
|
|
setIsAppAccessSet(true)
|
|
}
|
|
}, [appAccessSubjects, appDetail])
|
|
|
|
const handlePublish = useCallback(async (params?: ModelAndParameter | PublishWorkflowParams) => {
|
|
try {
|
|
await onPublish?.(params)
|
|
setPublished(true)
|
|
trackEvent('app_published_time', { action_mode: 'app', app_id: appDetail?.id, app_name: appDetail?.name })
|
|
}
|
|
catch {
|
|
setPublished(false)
|
|
}
|
|
}, [appDetail, onPublish])
|
|
|
|
const handleRestore = useCallback(async () => {
|
|
try {
|
|
await onRestore?.()
|
|
setOpen(false)
|
|
}
|
|
catch { }
|
|
}, [onRestore])
|
|
|
|
const handleTrigger = useCallback(() => {
|
|
const state = !open
|
|
|
|
if (disabled) {
|
|
setOpen(false)
|
|
return
|
|
}
|
|
|
|
onToggle?.(state)
|
|
setOpen(state)
|
|
|
|
if (state)
|
|
setPublished(false)
|
|
}, [disabled, onToggle, open])
|
|
|
|
const handleOpenInExplore = useCallback(async () => {
|
|
await openAsyncWindow(async () => {
|
|
if (!appDetail?.id)
|
|
throw new Error('App not found')
|
|
const { installed_apps }: any = await fetchInstalledAppList(appDetail?.id) || {}
|
|
if (installed_apps?.length > 0)
|
|
return `${basePath}/explore/installed/${installed_apps[0].id}`
|
|
throw new Error('No app found in Explore')
|
|
}, {
|
|
onError: (err) => {
|
|
Toast.notify({ type: 'error', message: `${err.message || err}` })
|
|
},
|
|
})
|
|
}, [appDetail?.id, openAsyncWindow])
|
|
|
|
const handleAccessControlUpdate = useCallback(async () => {
|
|
if (!appDetail)
|
|
return
|
|
try {
|
|
const res = await fetchAppDetailDirect({ url: '/apps', id: appDetail.id })
|
|
setAppDetail(res)
|
|
}
|
|
finally {
|
|
setShowAppAccessControl(false)
|
|
}
|
|
}, [appDetail, setAppDetail])
|
|
|
|
useKeyPress(`${getKeyboardKeyCodeBySystem('ctrl')}.shift.p`, (e) => {
|
|
e.preventDefault()
|
|
if (publishDisabled || published)
|
|
return
|
|
handlePublish()
|
|
}, { exactMatch: true, useCapture: true })
|
|
|
|
const hasPublishedVersion = !!publishedAt
|
|
const workflowToolDisabled = !hasPublishedVersion || !workflowToolAvailable
|
|
const workflowToolMessage = workflowToolDisabled ? t('workflow.common.workflowAsToolDisabledHint') : undefined
|
|
const showStartNodeLimitHint = Boolean(startNodeLimitExceeded)
|
|
const upgradeHighlightStyle = useMemo(() => ({
|
|
background: 'linear-gradient(97deg, var(--components-input-border-active-prompt-1, rgba(11, 165, 236, 0.95)) -3.64%, var(--components-input-border-active-prompt-2, rgba(21, 90, 239, 0.95)) 45.14%)',
|
|
WebkitBackgroundClip: 'text',
|
|
backgroundClip: 'text',
|
|
WebkitTextFillColor: 'transparent',
|
|
}), [])
|
|
|
|
return (
|
|
<>
|
|
<PortalToFollowElem
|
|
open={open}
|
|
onOpenChange={setOpen}
|
|
placement="bottom-end"
|
|
offset={{
|
|
mainAxis: 4,
|
|
crossAxis: crossAxisOffset,
|
|
}}
|
|
>
|
|
<PortalToFollowElemTrigger onClick={handleTrigger}>
|
|
<Button
|
|
variant="primary"
|
|
className="py-2 pl-3 pr-2"
|
|
disabled={disabled}
|
|
>
|
|
{t('workflow.common.publish')}
|
|
<RiArrowDownSLine className="h-4 w-4 text-components-button-primary-text" />
|
|
</Button>
|
|
</PortalToFollowElemTrigger>
|
|
<PortalToFollowElemContent className="z-[11]">
|
|
<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>
|
|
{isChatApp && (
|
|
<Button
|
|
variant="secondary-accent"
|
|
size="small"
|
|
onClick={handleRestore}
|
|
disabled={published}
|
|
>
|
|
{t('workflow.common.restore')}
|
|
</Button>
|
|
)}
|
|
</div>
|
|
)
|
|
: (
|
|
<div className="system-sm-medium flex items-center 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="mt-3 w-full"
|
|
onClick={() => handlePublish()}
|
|
disabled={publishDisabled || 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">
|
|
{getKeyboardKeyNameBySystem(key)}
|
|
</span>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
</Button>
|
|
{showStartNodeLimitHint && (
|
|
<div className="mt-3 flex flex-col items-stretch">
|
|
<p
|
|
className="text-sm font-semibold leading-5 text-transparent"
|
|
style={upgradeHighlightStyle}
|
|
>
|
|
<span className="block">{t('workflow.publishLimit.startNodeTitlePrefix')}</span>
|
|
<span className="block">{t('workflow.publishLimit.startNodeTitleSuffix')}</span>
|
|
</p>
|
|
<p className="mt-1 text-xs leading-4 text-text-secondary">
|
|
{t('workflow.publishLimit.startNodeDesc')}
|
|
</p>
|
|
<UpgradeBtn
|
|
isShort
|
|
className="mb-[12px] mt-[9px] h-[32px] w-[93px] self-start"
|
|
/>
|
|
</div>
|
|
)}
|
|
</>
|
|
)}
|
|
</div>
|
|
{(systemFeatures.webapp_auth.enabled && (isGettingUserCanAccessApp || isGettingAppWhiteListSubjects))
|
|
? <div className="py-2"><Loading /></div>
|
|
: (
|
|
<>
|
|
<Divider className="my-0" />
|
|
{systemFeatures.webapp_auth.enabled && (
|
|
<div className="p-4 pt-3">
|
|
<div className="flex h-6 items-center">
|
|
<p className="system-xs-medium text-text-tertiary">{t('app.publishApp.title')}</p>
|
|
</div>
|
|
<div
|
|
className="flex h-8 cursor-pointer items-center gap-x-0.5 rounded-lg bg-components-input-bg-normal py-1 pl-2.5 pr-2 hover:bg-primary-50 hover:text-text-accent"
|
|
onClick={() => {
|
|
setShowAppAccessControl(true)
|
|
}}
|
|
>
|
|
<div className="flex grow items-center gap-x-1.5 overflow-hidden pr-1">
|
|
<AccessModeDisplay mode={appDetail?.access_mode} />
|
|
</div>
|
|
{!isAppAccessSet && <p className="system-xs-regular shrink-0 text-text-tertiary">{t('app.publishApp.notSet')}</p>}
|
|
<div className="flex h-4 w-4 shrink-0 items-center justify-center">
|
|
<RiArrowRightSLine className="h-4 w-4 text-text-quaternary" />
|
|
</div>
|
|
</div>
|
|
{!isAppAccessSet && <p className="system-xs-regular mt-1 text-text-warning">{t('app.publishApp.notSetDesc')}</p>}
|
|
</div>
|
|
)}
|
|
{
|
|
// Hide run/batch run app buttons when there is a trigger node.
|
|
!hasTriggerNode && (
|
|
<div className="flex flex-col gap-y-1 border-t-[0.5px] border-t-divider-regular p-4 pt-3">
|
|
<Tooltip triggerClassName="flex" disabled={!disabledFunctionButton} popupContent={disabledFunctionTooltip} asChild={false}>
|
|
<SuggestedAction
|
|
className="flex-1"
|
|
disabled={disabledFunctionButton}
|
|
link={appURL}
|
|
icon={<RiPlayCircleLine className="h-4 w-4" />}
|
|
>
|
|
{t('workflow.common.runApp')}
|
|
</SuggestedAction>
|
|
</Tooltip>
|
|
{appDetail?.mode === AppModeEnum.WORKFLOW || appDetail?.mode === AppModeEnum.COMPLETION
|
|
? (
|
|
<Tooltip triggerClassName="flex" disabled={!disabledFunctionButton} popupContent={disabledFunctionTooltip} asChild={false}>
|
|
<SuggestedAction
|
|
className="flex-1"
|
|
disabled={disabledFunctionButton}
|
|
link={`${appURL}${appURL.includes('?') ? '&' : '?'}mode=batch`}
|
|
icon={<RiPlayList2Line className="h-4 w-4" />}
|
|
>
|
|
{t('workflow.common.batchRunApp')}
|
|
</SuggestedAction>
|
|
</Tooltip>
|
|
)
|
|
: (
|
|
<SuggestedAction
|
|
onClick={() => {
|
|
setEmbeddingModalOpen(true)
|
|
handleTrigger()
|
|
}}
|
|
disabled={!publishedAt}
|
|
icon={<CodeBrowser className="h-4 w-4" />}
|
|
>
|
|
{t('workflow.common.embedIntoSite')}
|
|
</SuggestedAction>
|
|
)}
|
|
<Tooltip triggerClassName="flex" disabled={!disabledFunctionButton} popupContent={disabledFunctionTooltip} asChild={false}>
|
|
<SuggestedAction
|
|
className="flex-1"
|
|
onClick={() => {
|
|
if (publishedAt)
|
|
handleOpenInExplore()
|
|
}}
|
|
disabled={disabledFunctionButton}
|
|
icon={<RiPlanetLine className="h-4 w-4" />}
|
|
>
|
|
{t('workflow.common.openInExplore')}
|
|
</SuggestedAction>
|
|
</Tooltip>
|
|
<Tooltip triggerClassName="flex" disabled={!!publishedAt && !missingStartNode} popupContent={!publishedAt ? t('app.notPublishedYet') : t('app.noUserInputNode')} asChild={false}>
|
|
<SuggestedAction
|
|
className="flex-1"
|
|
disabled={!publishedAt || missingStartNode}
|
|
link="./develop"
|
|
icon={<RiTerminalBoxLine className="h-4 w-4" />}
|
|
>
|
|
{t('workflow.common.accessAPIReference')}
|
|
</SuggestedAction>
|
|
</Tooltip>
|
|
{appDetail?.mode === AppModeEnum.WORKFLOW && (
|
|
<WorkflowToolConfigureButton
|
|
disabled={workflowToolDisabled}
|
|
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}
|
|
outputs={outputs}
|
|
handlePublish={handlePublish}
|
|
onRefreshData={onRefreshData}
|
|
disabledReason={workflowToolMessage}
|
|
/>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|
|
</>
|
|
)}
|
|
</div>
|
|
</PortalToFollowElemContent>
|
|
<EmbeddedModal
|
|
siteInfo={appDetail?.site}
|
|
isShow={embeddingModalOpen}
|
|
onClose={() => setEmbeddingModalOpen(false)}
|
|
appBaseUrl={appBaseURL}
|
|
accessToken={accessToken}
|
|
/>
|
|
{showAppAccessControl && <AccessControl app={appDetail!} onConfirm={handleAccessControlUpdate} onClose={() => { setShowAppAccessControl(false) }} />}
|
|
</PortalToFollowElem>
|
|
</>
|
|
)
|
|
}
|
|
|
|
export default memo(AppPublisher)
|