diff --git a/web/app/components/app/app-publisher/features-wrapper.tsx b/web/app/components/app/app-publisher/features-wrapper.tsx index 409c390f4b..4b64558016 100644 --- a/web/app/components/app/app-publisher/features-wrapper.tsx +++ b/web/app/components/app/app-publisher/features-wrapper.tsx @@ -22,37 +22,39 @@ const FeaturesWrappedAppPublisher = (props: Props) => { const features = useFeatures(s => s.features) const featuresStore = useFeaturesStore() const [restoreConfirmOpen, setRestoreConfirmOpen] = useState(false) + const { more_like_this, opening_statement, suggested_questions, sensitive_word_avoidance, speech_to_text, text_to_speech, suggested_questions_after_answer, retriever_resource, annotation_reply, file_upload, resetAppConfig } = props.publishedConfig.modelConfig + const handleConfirm = useCallback(() => { - props.resetAppConfig?.() + resetAppConfig?.() const { features, setFeatures, } = featuresStore!.getState() const newFeatures = produce(features, (draft) => { - draft.moreLikeThis = props.publishedConfig.modelConfig.more_like_this || { enabled: false } + draft.moreLikeThis = more_like_this || { enabled: false } draft.opening = { - enabled: !!props.publishedConfig.modelConfig.opening_statement, - opening_statement: props.publishedConfig.modelConfig.opening_statement || '', - suggested_questions: props.publishedConfig.modelConfig.suggested_questions || [], + enabled: !!opening_statement, + opening_statement: opening_statement || '', + suggested_questions: suggested_questions || [], } - draft.moderation = props.publishedConfig.modelConfig.sensitive_word_avoidance || { enabled: false } - draft.speech2text = props.publishedConfig.modelConfig.speech_to_text || { enabled: false } - draft.text2speech = props.publishedConfig.modelConfig.text_to_speech || { enabled: false } - draft.suggested = props.publishedConfig.modelConfig.suggested_questions_after_answer || { enabled: false } - draft.citation = props.publishedConfig.modelConfig.retriever_resource || { enabled: false } - draft.annotationReply = props.publishedConfig.modelConfig.annotation_reply || { enabled: false } + draft.moderation = sensitive_word_avoidance || { enabled: false } + draft.speech2text = speech_to_text || { enabled: false } + draft.text2speech = text_to_speech || { enabled: false } + draft.suggested = suggested_questions_after_answer || { enabled: false } + draft.citation = retriever_resource || { enabled: false } + draft.annotationReply = annotation_reply || { enabled: false } draft.file = { image: { - detail: props.publishedConfig.modelConfig.file_upload?.image?.detail || Resolution.high, - enabled: !!props.publishedConfig.modelConfig.file_upload?.image?.enabled, - number_limits: props.publishedConfig.modelConfig.file_upload?.image?.number_limits || 3, - transfer_methods: props.publishedConfig.modelConfig.file_upload?.image?.transfer_methods || ['local_file', 'remote_url'], + detail: file_upload?.image?.detail || Resolution.high, + enabled: !!file_upload?.image?.enabled, + number_limits: file_upload?.image?.number_limits || 3, + transfer_methods: file_upload?.image?.transfer_methods || ['local_file', 'remote_url'], }, - enabled: !!(props.publishedConfig.modelConfig.file_upload?.enabled || props.publishedConfig.modelConfig.file_upload?.image?.enabled), - allowed_file_types: props.publishedConfig.modelConfig.file_upload?.allowed_file_types || [SupportUploadFileTypes.image], - allowed_file_extensions: props.publishedConfig.modelConfig.file_upload?.allowed_file_extensions || FILE_EXTS[SupportUploadFileTypes.image].map(ext => `.${ext}`), - allowed_file_upload_methods: props.publishedConfig.modelConfig.file_upload?.allowed_file_upload_methods || props.publishedConfig.modelConfig.file_upload?.image?.transfer_methods || ['local_file', 'remote_url'], - number_limits: props.publishedConfig.modelConfig.file_upload?.number_limits || props.publishedConfig.modelConfig.file_upload?.image?.number_limits || 3, + enabled: !!(file_upload?.enabled || file_upload?.image?.enabled), + allowed_file_types: file_upload?.allowed_file_types || [SupportUploadFileTypes.image], + allowed_file_extensions: file_upload?.allowed_file_extensions || FILE_EXTS[SupportUploadFileTypes.image].map(ext => `.${ext}`), + allowed_file_upload_methods: file_upload?.allowed_file_upload_methods || file_upload?.image?.transfer_methods || ['local_file', 'remote_url'], + number_limits: file_upload?.number_limits || file_upload?.image?.number_limits || 3, } as FileUpload }) setFeatures(newFeatures) @@ -69,7 +71,7 @@ const FeaturesWrappedAppPublisher = (props: Props) => { ...props, onPublish: handlePublish, onRestore: () => setRestoreConfirmOpen(true), - }}/> + }} /> {restoreConfirmOpen && ( = { + [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 ( + <> + +
+ {t(`app.accessControlDialog.accessItems.${label}`)} +
+ + ) +} export type AppPublisherProps = { disabled?: boolean @@ -86,26 +127,46 @@ const AppPublisher = ({ workflowToolAvailable = true, }: 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 !== 'completion' && appDetail?.mode !== 'workflow') ? 'chat' : appDetail.mode + + const appMode = (appDetail?.mode !== AppModeEnum.COMPLETION && appDetail?.mode !== AppModeEnum.WORKFLOW) ? AppModeEnum.CHAT : appDetail.mode const appURL = `${appBaseURL}${basePath}/${appMode}/${accessToken}` - const isChatApp = ['chat', 'agent-chat', 'completion'].includes(appDetail?.mode || '') + 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 nodes = useNodes() + const missingStartNode = !nodes.some(node => node.data.type === BlockEnum.Start) + + 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]) - const [showAppAccessControl, setShowAppAccessControl] = useState(false) - const [isAppAccessSet, setIsAppAccessSet] = useState(true) useEffect(() => { if (appDetail && appAccessSubjects) { if (appDetail.access_mode === AccessMode.SPECIFIC_GROUPS_MEMBERS && appAccessSubjects.groups?.length === 0 && appAccessSubjects.members?.length === 0) @@ -171,8 +232,6 @@ const AppPublisher = ({ }) }, [appDetail, setAppDetail]) - const [embeddingModalOpen, setEmbeddingModalOpen] = useState(false) - useKeyPress(`${getKeyboardKeyCodeBySystem('ctrl')}.shift.p`, (e) => { e.preventDefault() if (publishDisabled || published) @@ -280,32 +339,7 @@ const AppPublisher = ({ setShowAppAccessControl(true) }}>
- {appDetail?.access_mode === AccessMode.ORGANIZATION - && <> - -

{t('app.accessControlDialog.accessItems.organization')}

- - } - {appDetail?.access_mode === AccessMode.SPECIFIC_GROUPS_MEMBERS - && <> - -
- {t('app.accessControlDialog.accessItems.specific')} -
- - } - {appDetail?.access_mode === AccessMode.PUBLIC - && <> - -

{t('app.accessControlDialog.accessItems.anyone')}

- - } - {appDetail?.access_mode === AccessMode.EXTERNAL_MEMBERS - && <> - -

{t('app.accessControlDialog.accessItems.external')}

- - } +
{!isAppAccessSet &&

{t('app.publishApp.notSet')}

}
@@ -315,22 +349,22 @@ const AppPublisher = ({ {!isAppAccessSet &&

{t('app.publishApp.notSetDesc')}

}
}
- + } > {t('workflow.common.runApp')} - {appDetail?.mode === 'workflow' || appDetail?.mode === 'completion' + {appDetail?.mode === AppModeEnum.WORKFLOW || appDetail?.mode === AppModeEnum.COMPLETION ? ( - + } > @@ -350,26 +384,29 @@ const AppPublisher = ({ {t('workflow.common.embedIntoSite')} )} - + { if (publishedAt) handleOpenInExplore() }} - disabled={!publishedAt || (systemFeatures.webapp_auth.enabled && !userCanAccessApp?.result)} + disabled={disabledFunctionButton} icon={} > {t('workflow.common.openInExplore')} - } - > - {t('workflow.common.accessAPIReference')} - + + } + > + {t('workflow.common.accessAPIReference')} + + {appDetail?.mode === 'workflow' && (