merge feat/plugins

web/app/components/workflow/index.tsx

@@ -72,7 +72,6 @@ import SyncingDataModal from './syncing-data-modal'
 import UpdateDSLModal from './update-dsl-modal'
 import DSLExportConfirmModal from './dsl-export-confirm-modal'
 import LimitTips from './limit-tips'
-import PluginDependency from './plugin-dependency'
 import {
   useStore,
   useWorkflowStore,
@@ -327,7 +326,6 @@ const Workflow: FC<WorkflowProps> = memo(({
           />
         )
       }
-      <PluginDependency />
       <LimitTips />
       <ReactFlow
         nodeTypes={nodeTypes}

web/app/components/workflow/nodes/_base/components/before-run-form/index.tsx

@@ -32,7 +32,7 @@ type BeforeRunFormProps = {
 
 function formatValue(value: string | any, type: InputVarType) {
   if (type === InputVarType.number)
-    return parseFloat(value)
+    return Number.parseFloat(value)
   if (type === InputVarType.json)
     return JSON.parse(value)
   if (type === InputVarType.contexts) {

web/app/components/workflow/nodes/_base/components/editor/code-editor/editor-support-vars.tsx

@@ -88,7 +88,7 @@ const CodeEditor: FC<Props> = ({
 
       const index = (() => {
         if (match)
-          return parseInt(match[1]!) + 1
+          return Number.parseInt(match[1]!) + 1
 
         return 1
       })()

web/app/components/workflow/nodes/code/panel.tsx

@@ -13,7 +13,7 @@ import Field from '@/app/components/workflow/nodes/_base/components/field'
 import Split from '@/app/components/workflow/nodes/_base/components/split'
 import CodeEditor from '@/app/components/workflow/nodes/_base/components/editor/code-editor'
 import TypeSelector from '@/app/components/workflow/nodes/_base/components/selector'
-import { type NodePanelProps } from '@/app/components/workflow/types'
+import type { NodePanelProps } from '@/app/components/workflow/types'
 import BeforeRunForm from '@/app/components/workflow/nodes/_base/components/before-run-form'
 import ResultPanel from '@/app/components/workflow/run/result-panel'
 const i18nPrefix = 'workflow.nodes.code'

web/app/components/workflow/plugin-dependency/index.tsx

@@ -1,23 +1,43 @@
-import { useCallback } from 'react'
+import {
+  useCallback,
+  useState,
+} from 'react'
+import { useTranslation } from 'react-i18next'
 import { useStore } from './store'
-import InstallBundle from '@/app/components/plugins/install-plugin/install-bundle'
+import ReadyToInstall from '@/app/components/plugins/install-plugin/install-bundle/ready-to-install'
+import { InstallStep } from '@/app/components/plugins/types'
 
+const i18nPrefix = 'plugin.installModal'
 const PluginDependency = () => {
   const dependencies = useStore(s => s.dependencies)
 
-  const handleCancelInstallBundle = useCallback(() => {
-    const { setDependencies } = useStore.getState()
-    setDependencies([])
-  }, [])
+  const [step, setStep] = useState<InstallStep>(InstallStep.readyToInstall)
+
+  const { t } = useTranslation()
+  const getTitle = useCallback(() => {
+    if (step === InstallStep.uploadFailed)
+      return t(`${i18nPrefix}.uploadFailed`)
+    if (step === InstallStep.installed)
+      return t(`${i18nPrefix}.installComplete`)
+
+    return t(`${i18nPrefix}.installPlugin`)
+  }, [step, t])
 
   if (!dependencies.length)
     return null
 
   return (
     <div>
-      <InstallBundle
-        fromDSLPayload={dependencies}
-        onClose={handleCancelInstallBundle}
+      <div className='flex pt-6 pl-6 pb-3 pr-14 items-start gap-2 self-stretch'>
+        <div className='self-stretch text-text-primary title-2xl-semi-bold'>
+          {getTitle()}
+        </div>
+      </div>
+      <ReadyToInstall
+        step={step}
+        onStepChange={setStep}
+        allPlugins={dependencies}
+        onClose={() => {}}
       />
     </div>
   )

web/app/components/workflow/update-dsl-modal.tsx

@@ -38,7 +38,8 @@ import { ToastContext } from '@/app/components/base/toast'
 import { useEventEmitterContextContext } from '@/context/event-emitter'
 import { useStore as useAppStore } from '@/app/components/app/store'
 import { FILE_EXTS } from '@/app/components/base/prompt-editor/constants'
-import { useMutationCheckDependenciesBeforeImportDSL } from '@/service/use-plugins'
+import { useStore as usePluginDependencyStore } from '@/app/components/workflow/plugin-dependency/store'
+import PluginDependency from '@/app/components/workflow/plugin-dependency'
 
 type UpdateDSLModalProps = {
   onCancel: () => void
@@ -58,7 +59,6 @@ const UpdateDSLModal = ({
   const [fileContent, setFileContent] = useState<string>()
   const [loading, setLoading] = useState(false)
   const { eventEmitter } = useEventEmitterContextContext()
-  const { mutateAsync, mutate } = useMutationCheckDependenciesBeforeImportDSL()
   const [show, setShow] = useState(true)
   const [showErrorModal, setShowErrorModal] = useState(false)
   const [versions, setVersions] = useState<{ importedVersion: string; systemVersion: string }>()
@@ -81,7 +81,7 @@ const UpdateDSLModal = ({
       setFileContent('')
   }
 
-  const handleWorkflowUpdate = async (app_id: string) => {
+  const handleWorkflowUpdate = useCallback(async (app_id: string) => {
     const {
       graph,
       features,
@@ -124,7 +124,7 @@ const UpdateDSLModal = ({
         hash,
       },
     } as any)
-  }
+  }, [eventEmitter])
 
   const isCreatingRef = useRef(false)
   const handleImport: MouseEventHandler = useCallback(async () => {
@@ -136,36 +136,42 @@ const UpdateDSLModal = ({
     try {
       if (appDetail && fileContent) {
         setLoading(true)
-        const {
-          graph,
-          features,
-          hash,
-        } = await updateWorkflowDraftFromDSL(appDetail.id, fileContent)
-        await mutateAsync({ dslString: fileContent })
-        const { nodes, edges, viewport } = graph
-        const newFeatures = {
-          file: {
-            image: {
-              enabled: !!features.file_upload?.image?.enabled,
-              number_limits: features.file_upload?.image?.number_limits || 3,
-              transfer_methods: features.file_upload?.image?.transfer_methods || ['local_file', 'remote_url'],
-            },
-            enabled: !!(features.file_upload?.enabled || features.file_upload?.image?.enabled),
-            allowed_file_types: features.file_upload?.allowed_file_types || [SupportUploadFileTypes.image],
-            allowed_file_extensions: features.file_upload?.allowed_file_extensions || FILE_EXTS[SupportUploadFileTypes.image].map(ext => `.${ext}`),
-            allowed_file_upload_methods: features.file_upload?.allowed_file_upload_methods || features.file_upload?.image?.transfer_methods || ['local_file', 'remote_url'],
-            number_limits: features.file_upload?.number_limits || features.file_upload?.image?.number_limits || 3,
-          },
-          opening: {
-            enabled: !!features.opening_statement,
-            opening_statement: features.opening_statement,
-            suggested_questions: features.suggested_questions,
-          },
-          suggested: features.suggested_questions_after_answer || { enabled: false },
-          speech2text: features.speech_to_text || { enabled: false },
-          text2speech: features.text_to_speech || { enabled: false },
-          citation: features.retriever_resource || { enabled: false },
-          moderation: features.sensitive_word_avoidance || { enabled: false },
+        const response = await importDSL({ mode: DSLImportMode.YAML_CONTENT, yaml_content: fileContent, app_id: appDetail.id })
+        const { id, status, app_id, imported_dsl_version, current_dsl_version, leaked_dependencies } = response
+        if (leaked_dependencies?.length) {
+          const { setDependencies } = usePluginDependencyStore.getState()
+          setDependencies(leaked_dependencies)
+        }
+        if (status === DSLImportStatus.COMPLETED || status === DSLImportStatus.COMPLETED_WITH_WARNINGS) {
+          if (!app_id) {
+            notify({ type: 'error', message: t('workflow.common.importFailure') })
+            return
+          }
+          handleWorkflowUpdate(app_id)
+          if (onImport)
+            onImport()
+          notify({
+            type: status === DSLImportStatus.COMPLETED ? 'success' : 'warning',
+            message: t(status === DSLImportStatus.COMPLETED ? 'workflow.common.importSuccess' : 'workflow.common.importWarning'),
+            children: status === DSLImportStatus.COMPLETED_WITH_WARNINGS && t('workflow.common.importWarningDetails'),
+          })
+          setLoading(false)
+          onCancel()
+        }
+        else if (status === DSLImportStatus.PENDING) {
+          setShow(false)
+          setTimeout(() => {
+            setShowErrorModal(true)
+          }, 300)
+          setVersions({
+            importedVersion: imported_dsl_version ?? '',
+            systemVersion: current_dsl_version ?? '',
+          })
+          setImportId(id)
+        }
+        else {
+          setLoading(false)
+          notify({ type: 'error', message: t('workflow.common.importFailure') })
         }
       }
     }
@@ -174,7 +180,7 @@ const UpdateDSLModal = ({
       notify({ type: 'error', message: t('workflow.common.importFailure') })
     }
     isCreatingRef.current = false
-  }, [currentFile, fileContent, onCancel, notify, t, eventEmitter, appDetail, onImport, mutateAsync])
+  }, [currentFile, fileContent, onCancel, notify, t, appDetail, onImport, handleWorkflowUpdate])
 
   const onUpdateDSLConfirm: MouseEventHandler = async () => {
     try {
@@ -222,12 +228,12 @@ const UpdateDSLModal = ({
             <RiCloseLine className='w-[18px] h-[18px] text-text-tertiary' />
           </div>
         </div>
-        <div className='flex relative p-2 mb-2 gap-0.5 flex-grow rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur shadow-xs overflow-hidden'>
+        <div className='flex relative p-2 mb-2 gap-0.5 grow rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur shadow-xs overflow-hidden'>
           <div className='absolute top-0 left-0 w-full h-full opacity-40 bg-[linear-gradient(92deg,rgba(247,144,9,0.25)_0%,rgba(255,255,255,0.00)_100%)]' />
           <div className='flex p-1 justify-center items-start'>
-            <RiAlertFill className='w-4 h-4 flex-shrink-0 text-text-warning-secondary' />
+            <RiAlertFill className='w-4 h-4 shrink-0 text-text-warning-secondary' />
           </div>
-          <div className='flex py-1 flex-col items-start gap-0.5 flex-grow'>
+          <div className='flex py-1 flex-col items-start gap-0.5 grow'>
             <div className='text-text-primary system-xs-medium whitespace-pre-line'>{t('workflow.common.importDSLTip')}</div>
             <div className='flex pt-1 pb-0.5 items-start gap-1 self-stretch'>
               <Button
@@ -275,7 +281,7 @@ const UpdateDSLModal = ({
       >
         <div className='flex pb-4 flex-col items-start gap-2 self-stretch'>
           <div className='text-text-primary title-2xl-semi-bold'>{t('app.newApp.appCreateDSLErrorTitle')}</div>
-          <div className='flex flex-grow flex-col text-text-secondary system-md-regular'>
+          <div className='flex grow flex-col text-text-secondary system-md-regular'>
             <div>{t('app.newApp.appCreateDSLErrorPart1')}</div>
             <div>{t('app.newApp.appCreateDSLErrorPart2')}</div>
             <br />
@@ -283,6 +289,7 @@ const UpdateDSLModal = ({
             <div>{t('app.newApp.appCreateDSLErrorPart4')}<span className='system-md-medium'>{versions?.systemVersion}</span></div>
           </div>
         </div>
+        <PluginDependency />
         <div className='flex pt-6 justify-end items-start gap-2 self-stretch'>
           <Button variant='secondary' onClick={() => setShowErrorModal(false)}>{t('app.newApp.Cancel')}</Button>
           <Button variant='primary' destructive onClick={onUpdateDSLConfirm}>{t('app.newApp.Confirm')}</Button>