merge

2024-11-15 16:13:40 +08:00 · 2024-11-15 16:13:40 +08:00 · 7fe16a9f9d
commit 7fe16a9f9d
parent 6da877c6a6 a6be3fdcd0
47 changed files with 937 additions and 101 deletions
--- a/web/app/(commonLayout)/plugins/test/card/page.tsx
+++ b/web/app/(commonLayout)/plugins/test/card/page.tsx
@ -6,35 +6,53 @@ import CardMoreInfo from '@/app/components/plugins/card/card-more-info'
 // import ProviderCard from '@/app/components/plugins/provider-card'
 import Badge from '@/app/components/base/badge'
 import InstallBundle from '@/app/components/plugins/install-plugin/install-bundle'
+import { useBoolean } from 'ahooks'

 const PluginList = () => {
  const pluginList = [toolNotion, extensionDallE, modelGPT4, customTool]
+  const [isShow, {
+    setFalse: hide,
+  }] = useBoolean(true)

  return (
    <div className='pb-3 bg-white'>
-      <InstallBundle onClose={() => { }} fromDSLPayload={[
-        {
-          type: 'marketplace',
-          value: {
-            plugin_unique_identifier: 'langgenius/google:0.0.2@dcb354c9d0fee60e6e9c9eb996e1e485bbef343ba8cd545c0cfb3ec80970f6f1',
-          },
-        },
-        {
-          type: 'github',
-          value: {
-            repo: 'YIXIAO0/test',
-            version: '1.11.5',
-            package: 'test.difypkg',
-            github_plugin_unique_identifier: 'yixiao0/test:0.0.1@3592166c87afcf944b4f13f27467a5c8f9e00bd349cb42033a072734a37431b4',
-          },
-        },
-        {
-          type: 'marketplace',
-          value: {
-            plugin_unique_identifier: 'langgenius/openai:0.0.1@f88fdb98d104466db16a425bfe3af8c1bcad45047a40fb802d98a989ac57a5a3',
-          },
-        },
-      ]} />
+      {isShow && (
+        <InstallBundle
+          onClose={hide}
+          fromDSLPayload={[
+            // {
+            //   type: 'marketplace',
+            //   value: {
+            //     plugin_unique_identifier: 'langgenius/google:0.0.2@dcb354c9d0fee60e6e9c9eb996e1e485bbef343ba8cd545c0cfb3ec80970f6f1',
+            //   },
+            // },
+            {
+              type: 'github',
+              value: {
+                repo: 'YIXIAO0/test',
+                version: '1.11.5',
+                package: 'test.difypkg',
+                github_plugin_unique_identifier: 'yixiao0/test:0.0.1@3592166c87afcf944b4f13f27467a5c8f9e00bd349cb42033a072734a37431b4',
+              },
+            },
+            {
+              type: 'github',
+              value: {
+                package: 'dify-test.difypkg',
+                repo: 'WTW0313/dify-test',
+                version: '0.0.5-beta.2',
+                github_plugin_unique_identifier: 'wtw0313/dify-test:0.0.1@1633daa043b47155d4228e2db7734245fd6d3e20ba812e5c02ce69fc1e3038f4',
+              },
+            },
+            {
+              type: 'marketplace',
+              value: {
+                plugin_unique_identifier: 'langgenius/openai:0.0.1@f88fdb98d104466db16a425bfe3af8c1bcad45047a40fb802d98a989ac57a5a3',
+              },
+            },
+          ]} />
+      )
+      }
      <div className='mx-3 '>
        {/* <h2 className='my-3'>Dify Plugin list</h2> */}
        {/* <div className='grid grid-cols-2 gap-3'>
--- a/web/app/components/app/configuration/dataset-config/params-config/config-content.tsx
+++ b/web/app/components/app/configuration/dataset-config/params-config/config-content.tsx
@ -25,7 +25,7 @@ import { useSelectedDatasetsMode } from '@/app/components/workflow/nodes/knowled
 import Switch from '@/app/components/base/switch'
 import Toast from '@/app/components/base/toast'

-interface Props {
+type Props = {
  datasetConfigs: DatasetConfigs
  onChange: (configs: DatasetConfigs, isRetrievalModeChange?: boolean) => void
  isInWorkflow?: boolean
--- a/web/app/components/app/configuration/dataset-config/params-config/index.tsx
+++ b/web/app/components/app/configuration/dataset-config/params-config/index.tsx
@ -139,11 +139,11 @@ const ParamsConfig = ({
            />

            <div className='mt-6 flex justify-end'>
-              <Button className='mr-2 flex-shrink-0' onClick={() => {
+              <Button className='mr-2 shrink-0' onClick={() => {
                setTempDataSetConfigs(datasetConfigs)
                setRerankSettingModalOpen(false)
              }}>{t('common.operation.cancel')}</Button>
-              <Button variant='primary' className='flex-shrink-0' onClick={handleSave} >{t('common.operation.save')}</Button>
+              <Button variant='primary' className='shrink-0' onClick={handleSave} >{t('common.operation.save')}</Button>
            </div>
          </Modal>
        )
--- a/web/app/components/app/configuration/index.tsx
+++ b/web/app/components/app/configuration/index.tsx
@ -72,6 +72,7 @@ import { SupportUploadFileTypes } from '@/app/components/workflow/types'
 import NewFeaturePanel from '@/app/components/base/features/new-feature-panel'
 import { fetchFileUploadConfig } from '@/service/common'
 import { correctProvider } from '@/utils'
+import PluginDependency from '@/app/components/workflow/plugin-dependency'

 type PublishConfig = {
  modelConfig: ModelConfig
@ -1038,6 +1039,7 @@ const Configuration: FC = () => {
              onAutoAddPromptVariable={handleAddPromptVariable}
            />
          )}
+          <PluginDependency />
        </>
      </FeaturesProvider>
    </ConfigContext.Provider>
--- a/web/app/components/app/create-from-dsl-modal/index.tsx
+++ b/web/app/components/app/create-from-dsl-modal/index.tsx
@ -80,24 +80,16 @@ const CreateFromDSLModal = ({ show, onSuccess, onClose, activeTab = CreateFromDS
      let app

      if (currentTab === CreateFromDSLModalTab.FROM_FILE) {
-        const leakedData = await mutateAsync({ dslString: fileContent })
-        if (leakedData?.leaked.length) {
-          isCreatingRef.current = false
-          return
-        }
        app = await importApp({
          data: fileContent || '',
        })
+        await mutateAsync({ dslString: fileContent })
      }
      if (currentTab === CreateFromDSLModalTab.FROM_URL) {
-        const leakedData = await mutateAsync({ url: dslUrlValue })
-        if (leakedData?.leaked.length) {
-          isCreatingRef.current = false
-          return
-        }
        app = await importAppFromUrl({
          url: dslUrlValue || '',
        })
+        await mutateAsync({ url: dslUrlValue })
      }
      if (onSuccess)
        onSuccess()
--- a/web/app/components/app/overview/settings/index.tsx
+++ b/web/app/components/app/overview/settings/index.tsx
@ -243,7 +243,7 @@ const SettingsModal: FC<ISettingsModalProps> = ({
        <div className='w-full mt-8'>
          <p className='system-xs-medium text-gray-500'>{t(`${prefixSettings}.workflow.title`)}</p>
          <div className='flex justify-between items-center'>
-            <div className='font-medium system-sm-semibold flex-grow text-gray-900'>{t(`${prefixSettings}.workflow.subTitle`)}</div>
+            <div className='font-medium system-sm-semibold grow text-gray-900'>{t(`${prefixSettings}.workflow.subTitle`)}</div>
            <Switch
              disabled={!(appInfo.mode === 'workflow' || appInfo.mode === 'advanced-chat')}
              defaultValue={inputInfo.show_workflow_steps}
@ -269,7 +269,7 @@ const SettingsModal: FC<ISettingsModalProps> = ({
        {systemFeatures.enable_web_sso_switch_component && <div className='w-full mt-8'>
          <p className='system-xs-medium text-gray-500'>{t(`${prefixSettings}.sso.label`)}</p>
          <div className='flex justify-between items-center'>
-            <div className='font-medium system-sm-semibold flex-grow text-gray-900'>{t(`${prefixSettings}.sso.title`)}</div>
+            <div className='font-medium system-sm-semibold grow text-gray-900'>{t(`${prefixSettings}.sso.title`)}</div>
            <Tooltip
              disabled={systemFeatures.sso_enforced_for_web}
              popupContent={
@ -284,8 +284,8 @@ const SettingsModal: FC<ISettingsModalProps> = ({
        </div>}
        {!isShowMore && <div className='w-full cursor-pointer mt-8' onClick={() => setIsShowMore(true)}>
          <div className='flex justify-between'>
-            <div className={`font-medium ${s.settingTitle} flex-grow text-gray-900`}>{t(`${prefixSettings}.more.entry`)}</div>
-            <div className='flex-shrink-0 w-4 h-4 text-gray-500'>
+            <div className={`font-medium ${s.settingTitle} grow text-gray-900`}>{t(`${prefixSettings}.more.entry`)}</div>
+            <div className='shrink-0 w-4 h-4 text-gray-500'>
              <ChevronRightIcon />
            </div>
          </div>
--- a/web/app/components/base/file-uploader/file-from-link-or-local/index.tsx
+++ b/web/app/components/base/file-uploader/file-from-link-or-local/index.tsx
@ -59,7 +59,7 @@ const FileFromLinkOrLocal = ({
      <PortalToFollowElemTrigger onClick={() => setOpen(v => !v)} asChild>
        {trigger(open)}
      </PortalToFollowElemTrigger>
-      <PortalToFollowElemContent className='z-10'>
+      <PortalToFollowElemContent className='z-[1001]'>
        <div className='p-3 w-[280px] bg-components-panel-bg-blur border-[0.5px] border-components-panel-border rounded-xl shadow-lg'>
          {
            showFromLink && (
--- a/web/app/components/header/account-setting/members-page/index.tsx
+++ b/web/app/components/header/account-setting/members-page/index.tsx
@ -48,7 +48,7 @@ const MembersPage = () => {
  return (
    <>
      <div className='flex flex-col'>
-        <div className='flex items-center mb-4 p-3 bg-gray-50 rounded-2xl'>
+        <div className='flex items-center mb-4 p-3 gap-1 bg-gray-50 rounded-2xl'>
          <LogoEmbeddedChatHeader className='!w-10 !h-10' />
          <div className='grow mx-2'>
            <div className='text-sm font-medium text-gray-900'>{currentWorkspace?.name}</div>
--- a/web/app/components/header/account-setting/model-provider-page/model-modal/Form.tsx
+++ b/web/app/components/header/account-setting/model-provider-page/model-modal/Form.tsx
@ -18,7 +18,8 @@ import { SimpleSelect } from '@/app/components/base/select'
 import Tooltip from '@/app/components/base/tooltip'
 import Radio from '@/app/components/base/radio'
 import ModelParameterModal from '@/app/components/header/account-setting/model-provider-page/model-parameter-modal'
-import ToolSelector from '@/app/components/tools/tool-selector'
+import ToolSelector from '@/app/components/plugins/plugin-detail-panel/tool-selector'
+import AppSelector from '@/app/components/plugins/plugin-detail-panel/app-selector'

 type FormProps = {
  className?: string
@ -347,7 +348,32 @@ const Form: FC<FormProps> = ({
    }

    if (formSchema.type === FormTypeEnum.appSelector) {
-      // TODO
+      const {
+        variable,
+        label,
+        required,
+      } = formSchema as (CredentialFormSchemaTextInput | CredentialFormSchemaSecretInput)
+
+      return (
+        <div key={variable} className={cn(itemClassName, 'py-3')}>
+          <div className={cn(fieldLabelClassName, 'flex items-center py-2 system-sm-semibold text-text-secondary')}>
+            {label[language] || label.en_US}
+            {
+              required && (
+                <span className='ml-1 text-red-500'>*</span>
+              )
+            }
+            {tooltipContent}
+          </div>
+          <AppSelector
+            disabled={readonly}
+            value={value[variable]}
+            onSelect={item => handleFormChange(variable, item as any)}
+          />
+          {fieldMoreInfo?.(formSchema)}
+          {validating && changeKey === variable && <ValidatingTip />}
+        </div>
+      )
    }
  }

--- a/web/app/components/header/index.tsx
+++ b/web/app/components/header/index.tsx
@ -76,7 +76,7 @@ const Header = () => {
                  <SparklesSoft className='flex items-center py-[1px] pl-[3px] w-3.5 h-3.5 text-components-premium-badge-indigo-text-stop-0' />
                  <div className='system-xs-medium'>
                    <span className='p-1'>
-                      {t('billing.upgradeBtn.encourage')}
+                      {t('billing.upgradeBtn.encourageShort')}
                    </span>
                  </div>
                </PremiumBadge>
@ -98,7 +98,7 @@ const Header = () => {
                <SparklesSoft className='flex items-center py-[1px] pl-[3px] w-3.5 h-3.5 text-components-premium-badge-indigo-text-stop-0' />
                <div className='system-xs-medium'>
                  <span className='p-1'>
-                    {t('billing.upgradeBtn.encourage')}
+                    {t('billing.upgradeBtn.encourageShort')}
                  </span>
                </div>
              </PremiumBadge>
--- a/web/app/components/plugins/install-plugin/install-bundle/index.tsx
+++ b/web/app/components/plugins/install-plugin/install-bundle/index.tsx
@ -3,8 +3,9 @@ import type { FC } from 'react'
 import Modal from '@/app/components/base/modal'
 import React, { useCallback, useState } from 'react'
 import { InstallStep } from '../../types'
-import type { Dependency } from '../../types'
+import type { Dependency, Plugin } from '../../types'
 import Install from './steps/install'
+import Installed from './steps/installed'
 import { useTranslation } from 'react-i18next'

 const i18nPrefix = 'plugin.installModal'
@ -29,7 +30,8 @@ const InstallBundle: FC<Props> = ({
 }) => {
  const { t } = useTranslation()
  const [step, setStep] = useState<InstallStep>(installType === InstallType.fromMarketplace ? InstallStep.readyToInstall : InstallStep.uploading)
-
+  const [installedPlugins, setInstalledPlugins] = useState<Plugin[]>([])
+  const [installStatus, setInstallStatus] = useState<{ success: boolean }[]>([])
  const getTitle = useCallback(() => {
    if (step === InstallStep.uploadFailed)
      return t(`${i18nPrefix}.uploadFailed`)
@ -41,6 +43,12 @@ const InstallBundle: FC<Props> = ({
    return t(`${i18nPrefix}.installPlugin`)
  }, [step, t])

+  const handleInstalled = useCallback((plugins: Plugin[], installStatus: { success: boolean }[]) => {
+    setInstallStatus(installStatus)
+    setInstalledPlugins(plugins)
+    setStep(InstallStep.installed)
+  }, [])
+
  return (
    <Modal
      isShow={true}
@ -57,6 +65,14 @@ const InstallBundle: FC<Props> = ({
        <Install
          fromDSLPayload={fromDSLPayload}
          onCancel={onClose}
+          onInstalled={handleInstalled}
+        />
+      )}
+      {step === InstallStep.installed && (
+        <Installed
+          list={installedPlugins}
+          installStatus={installStatus}
+          onCancel={onClose}
        />
      )}
    </Modal>
--- a/web/app/components/plugins/install-plugin/install-bundle/item/github-item.tsx
+++ b/web/app/components/plugins/install-plugin/install-bundle/item/github-item.tsx
@ -29,7 +29,10 @@ const Item: FC<Props> = ({
  const [payload, setPayload] = React.useState<Plugin | null>(null)
  useEffect(() => {
    if (data) {
-      const payload = pluginManifestToCardPluginProps(data.manifest)
+      const payload = {
+        ...pluginManifestToCardPluginProps(data.manifest),
+        plugin_id: data.unique_identifier,
+      }
      onFetchedPayload(payload)
      setPayload(payload)
    }
--- a/web/app/components/plugins/install-plugin/install-bundle/item/loaded-item.tsx
+++ b/web/app/components/plugins/install-plugin/install-bundle/item/loaded-item.tsx
@ -5,6 +5,7 @@ import type { Plugin } from '../../../types'
 import Card from '../../../card'
 import Checkbox from '@/app/components/base/checkbox'
 import Badge, { BadgeState } from '@/app/components/base/badge/index'
+import useGetIcon from '../../base/use-get-icon'

 type Props = {
  checked: boolean
@ -17,6 +18,7 @@ const LoadedItem: FC<Props> = ({
  onCheckedChange,
  payload,
 }) => {
+  const { getIconUrl } = useGetIcon()
  return (
    <div className='flex items-center space-x-2'>
      <Checkbox
@ -26,7 +28,10 @@ const LoadedItem: FC<Props> = ({
      />
      <Card
        className='grow'
-        payload={payload}
+        payload={{
+          ...payload,
+          icon: getIconUrl(payload.icon),
+        }}
        titleLeft={payload.version ? <Badge className='mx-1' size="s" state={BadgeState.Default}>{payload.version}</Badge> : null}
      />
    </div>
--- a/web/app/components/plugins/install-plugin/install-bundle/steps/install-by-dsl-list.tsx
+++ b/web/app/components/plugins/install-plugin/install-bundle/steps/install-by-dsl-list.tsx
@ -26,9 +26,12 @@ const InstallByDSLList: FC<Props> = ({
  const [plugins, setPlugins, getPlugins] = useGetState<Plugin[]>([])
  const handlePlugInFetched = useCallback((index: number) => {
    return (p: Plugin) => {
-      setPlugins(plugins.map((item, i) => i === index ? p : item))
+      const nextPlugins = produce(getPlugins(), (draft) => {
+        draft[index] = p
+      })
+      setPlugins(nextPlugins)
    }
-  }, [plugins])
+  }, [getPlugins, setPlugins])

  const marketPlaceInDSLIndex = useMemo(() => {
    const res: number[] = []
--- a/web/app/components/plugins/install-plugin/install-bundle/steps/install.tsx
+++ b/web/app/components/plugins/install-plugin/install-bundle/steps/install.tsx
@ -7,23 +7,25 @@ import { RiLoader2Line } from '@remixicon/react'
 import { useTranslation } from 'react-i18next'
 import InstallByDSLList from './install-by-dsl-list'
 import { useInstallFromMarketplaceAndGitHub } from '@/service/use-plugins'
-
+import { useInvalidateInstalledPluginList } from '@/service/use-plugins'
 const i18nPrefix = 'plugin.installModal'

 type Props = {
  fromDSLPayload: Dependency[]
+  onInstalled: (plugins: Plugin[], installStatus: { success: boolean }[]) => void
  onCancel: () => void
 }

 const Install: FC<Props> = ({
  fromDSLPayload,
+  onInstalled,
  onCancel,
 }) => {
  const { t } = useTranslation()
  const [selectedPlugins, setSelectedPlugins] = React.useState<Plugin[]>([])
  const [selectedIndexes, setSelectedIndexes] = React.useState<number[]>([])
  const selectedPluginsNum = selectedPlugins.length
-
+  const invalidateInstalledPluginList = useInvalidateInstalledPluginList()
  const handleSelect = (plugin: Plugin, selectedIndex: number) => {
    const isSelected = !!selectedPlugins.find(p => p.plugin_id === plugin.plugin_id)
    let nextSelectedPlugins
@ -35,18 +37,21 @@ const Install: FC<Props> = ({
    const nextSelectedIndexes = isSelected ? selectedIndexes.filter(i => i !== selectedIndex) : [...selectedIndexes, selectedIndex]
    setSelectedIndexes(nextSelectedIndexes)
  }
+
  const [canInstall, setCanInstall] = React.useState(false)
  const handleLoadedAllPlugin = useCallback(() => {
    setCanInstall(true)
-  }, [selectedPlugins, selectedIndexes])
+  }, [])

  // Install from marketplace and github
  const { mutate: installFromMarketplaceAndGitHub, isPending: isInstalling } = useInstallFromMarketplaceAndGitHub({
-    onSuccess: () => {
-      console.log('success!')
+    onSuccess: (res: { success: boolean }[]) => {
+      onInstalled(selectedPlugins, res)
+      const hasInstallSuccess = res.some(r => r.success)
+      if (hasInstallSuccess)
+        invalidateInstalledPluginList()
    },
  })
-  console.log(canInstall, !isInstalling, selectedPlugins.length === 0)
  const handleInstall = () => {
    installFromMarketplaceAndGitHub(fromDSLPayload.filter((_d, index) => selectedIndexes.includes(index)))
  }
--- a/web/app/components/plugins/install-plugin/install-bundle/steps/installed.tsx
+++ b/web/app/components/plugins/install-plugin/install-bundle/steps/installed.tsx
@ -0,0 +1,60 @@
+'use client'
+import type { FC } from 'react'
+import React from 'react'
+import type { Plugin } from '../../../types'
+import Card from '@/app/components/plugins/card'
+import Button from '@/app/components/base/button'
+import { useTranslation } from 'react-i18next'
+import Badge, { BadgeState } from '@/app/components/base/badge/index'
+import useGetIcon from '../../base/use-get-icon'
+
+type Props = {
+  list: Plugin[]
+  installStatus: { success: boolean }[]
+  onCancel: () => void
+}
+
+const Installed: FC<Props> = ({
+  list,
+  installStatus,
+  onCancel,
+}) => {
+  const { t } = useTranslation()
+  const { getIconUrl } = useGetIcon()
+  return (
+    <>
+      <div className='flex flex-col px-6 py-3 justify-center items-start gap-4 self-stretch'>
+        {/* <p className='text-text-secondary system-md-regular'>{(isFailed && errMsg) ? errMsg : t(`plugin.installModal.${isFailed ? 'installFailedDesc' : 'installedSuccessfullyDesc'}`)}</p> */}
+        <div className='flex p-2 items-start content-start gap-1 self-stretch flex-wrap rounded-2xl bg-background-section-burn space-y-1'>
+          {list.map((plugin, index) => {
+            return (
+              <Card
+                key={plugin.plugin_id}
+                className='w-full'
+                payload={{
+                  ...plugin,
+                  icon: getIconUrl(plugin.icon),
+                }}
+                installed={installStatus[index].success}
+                installFailed={!installStatus[index].success}
+                titleLeft={plugin.version ? <Badge className='mx-1' size="s" state={BadgeState.Default}>{plugin.version}</Badge> : null}
+              />
+            )
+          })}
+        </div>
+      </div>
+      {/* Action Buttons */}
+      <div className='flex p-6 pt-5 justify-end items-center gap-2 self-stretch'>
+        <Button
+          variant='primary'
+          className='min-w-[72px]'
+          onClick={onCancel}
+        >
+          {t('common.operation.close')}
+        </Button>
+      </div>
+    </>
+  )
+}
+
+export default React.memo(Installed)
--- a/web/app/components/plugins/install-plugin/install-from-github/steps/loaded.tsx
+++ b/web/app/components/plugins/install-plugin/install-from-github/steps/loaded.tsx
@ -2,7 +2,7 @@

 import React from 'react'
 import Button from '@/app/components/base/button'
-import type { PluginDeclaration, UpdateFromGitHubPayload } from '../../../types'
+import type { PluginDeclaration, PluginType, UpdateFromGitHubPayload } from '../../../types'
 import Card from '../../../card'
 import Badge, { BadgeState } from '@/app/components/base/badge/index'
 import { pluginManifestToCardPluginProps } from '../../utils'
@ -13,6 +13,7 @@ import { RiLoader2Line } from '@remixicon/react'
 import { usePluginTaskList } from '@/service/use-plugins'
 import checkTaskStatus from '../../base/check-task-status'
 import { parseGitHubUrl } from '../../utils'
+import { useCategories } from '../../../hooks'

 type LoadedProps = {
  updatePayload: UpdateFromGitHubPayload
@ -40,6 +41,7 @@ const Loaded: React.FC<LoadedProps> = ({
  onFailed,
 }) => {
  const { t } = useTranslation()
+  const { categoriesMap } = useCategories()
  const [isInstalling, setIsInstalling] = React.useState(false)
  const { mutateAsync: installPackageFromGitHub } = useInstallPackageFromGitHub()
  const { handleRefetch } = usePluginTaskList()
@ -115,7 +117,7 @@ const Loaded: React.FC<LoadedProps> = ({
      <div className='flex p-2 items-start content-start gap-1 self-stretch flex-wrap rounded-2xl bg-background-section-burn'>
        <Card
          className='w-full'
-          payload={pluginManifestToCardPluginProps(payload)}
+          payload={{ ...pluginManifestToCardPluginProps(payload), type: categoriesMap[payload.category].label as PluginType }}
          titleLeft={<Badge className='mx-1' size="s" state={BadgeState.Default}>{payload.version}</Badge>}
        />
      </div>
--- a/web/app/components/plugins/marketplace/search-box/tags-filter.tsx
+++ b/web/app/components/plugins/marketplace/search-box/tags-filter.tsx
@ -52,7 +52,10 @@ const TagsFilter = ({
      open={open}
      onOpenChange={setOpen}
    >
-      <PortalToFollowElemTrigger onClick={() => setOpen(v => !v)}>
+      <PortalToFollowElemTrigger
+        className='shrink-0'
+        onClick={() => setOpen(v => !v)}
+      >
        <div className={cn(
          'flex items-center text-text-tertiary rounded-lg hover:bg-state-base-hover cursor-pointer',
          size === 'large' && 'px-2 py-1 h-8',
--- a/web/app/components/plugins/plugin-detail-panel/app-selector/app-inputs-form.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/app-selector/app-inputs-form.tsx
@ -0,0 +1,125 @@
+import { useCallback } from 'react'
+import { useTranslation } from 'react-i18next'
+import Input from '@/app/components/base/input'
+import Textarea from '@/app/components/base/textarea'
+import { PortalSelect } from '@/app/components/base/select'
+import { InputVarType } from '@/app/components/workflow/types'
+import { FileUploaderInAttachmentWrapper } from '@/app/components/base/file-uploader'
+
+type Props = {
+  inputsForms: any[]
+  inputs: Record<string, any>
+  inputsRef: any
+  onFormChange: (value: Record<string, any>) => void
+}
+const AppInputsForm = ({
+  inputsForms,
+  inputs,
+  inputsRef,
+  onFormChange,
+}: Props) => {
+  const { t } = useTranslation()
+
+  const handleFormChange = useCallback((variable: string, value: any) => {
+    onFormChange({
+      ...inputsRef.current,
+      [variable]: value,
+    })
+  }, [onFormChange, inputsRef])
+
+  const renderField = (form: any) => {
+    const {
+      label,
+      variable,
+      options,
+    } = form
+    if (form.type === InputVarType.textInput) {
+      return (
+        <Input
+          value={inputs[variable] || ''}
+          onChange={e => handleFormChange(variable, e.target.value)}
+          placeholder={label}
+        />
+      )
+    }
+    if (form.type === InputVarType.number) {
+      return (
+        <Input
+          type="number"
+          value={inputs[variable] || ''}
+          onChange={e => handleFormChange(variable, e.target.value)}
+          placeholder={label}
+        />
+      )
+    }
+    if (form.type === InputVarType.paragraph) {
+      return (
+        <Textarea
+          value={inputs[variable] || ''}
+          onChange={e => handleFormChange(variable, e.target.value)}
+          placeholder={label}
+        />
+      )
+    }
+    if (form.type === InputVarType.select) {
+      return (
+        <PortalSelect
+          popupClassName="w-[356px] z-[1050]"
+          value={inputs[variable] || ''}
+          items={options.map((option: string) => ({ value: option, name: option }))}
+          onSelect={item => handleFormChange(variable, item.value as string)}
+          placeholder={label}
+        />
+      )
+    }
+    if (form.type === InputVarType.singleFile) {
+      return (
+        <FileUploaderInAttachmentWrapper
+          value={inputs[variable] ? [inputs[variable]] : []}
+          onChange={files => handleFormChange(variable, files[0])}
+          fileConfig={{
+            allowed_file_types: form.allowed_file_types,
+            allowed_file_extensions: form.allowed_file_extensions,
+            allowed_file_upload_methods: form.allowed_file_upload_methods,
+            number_limits: 1,
+            fileUploadConfig: (form as any).fileUploadConfig,
+          }}
+        />
+      )
+    }
+    if (form.type === InputVarType.multiFiles) {
+      return (
+        <FileUploaderInAttachmentWrapper
+          value={inputs[variable]}
+          onChange={files => handleFormChange(variable, files)}
+          fileConfig={{
+            allowed_file_types: form.allowed_file_types,
+            allowed_file_extensions: form.allowed_file_extensions,
+            allowed_file_upload_methods: form.allowed_file_upload_methods,
+            number_limits: form.max_length,
+            fileUploadConfig: (form as any).fileUploadConfig,
+          }}
+        />
+      )
+    }
+  }
+
+  if (!inputsForms.length)
+    return null
+
+  return (
+    <div className='px-4 py-2 flex flex-col gap-4'>
+      {inputsForms.map(form => (
+        <div key={form.variable}>
+          <div className='h-6 mb-1 flex items-center gap-1 text-text-secondary system-sm-semibold'>
+            <div className='truncate'>{form.label}</div>
+            {!form.required && <span className='text-text-tertiary system-xs-regular'>{t('workflow.panel.optional')}</span>}
+          </div>
+          {renderField(form)}
+        </div>
+      ))}
+    </div>
+  )
+}
+
+export default AppInputsForm
--- a/web/app/components/plugins/plugin-detail-panel/app-selector/app-inputs-panel.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/app-selector/app-inputs-panel.tsx
@ -0,0 +1,180 @@
+'use client'
+import React, { useMemo, useRef } from 'react'
+import { useTranslation } from 'react-i18next'
+import Loading from '@/app/components/base/loading'
+import AppInputsForm from '@/app/components/plugins/plugin-detail-panel/app-selector/app-inputs-form'
+import { useAppDetail } from '@/service/use-apps'
+import { useAppWorkflow } from '@/service/use-workflow'
+import { useFileUploadConfig } from '@/service/use-common'
+import { Resolution } from '@/types/app'
+import { FILE_EXTS } from '@/app/components/base/prompt-editor/constants'
+import type { App } from '@/types/app'
+import type { FileUpload } from '@/app/components/base/features/types'
+import { BlockEnum, InputVarType, SupportUploadFileTypes } from '@/app/components/workflow/types'
+
+import cn from '@/utils/classnames'
+
+type Props = {
+  value?: {
+    app_id: string
+    inputs: Record<string, any>
+  }
+  appDetail: App
+  onFormChange: (value: Record<string, any>) => void
+}
+
+const AppInputsPanel = ({
+  value,
+  appDetail,
+  onFormChange,
+}: Props) => {
+  const { t } = useTranslation()
+  const inputsRef = useRef<any>(value?.inputs || {})
+  const isBasicApp = appDetail.mode !== 'advanced-chat' && appDetail.mode !== 'workflow'
+  const { data: fileUploadConfig } = useFileUploadConfig()
+  const { data: currentApp, isFetching: isAppLoading } = useAppDetail(appDetail.id)
+  const { data: currentWorkflow, isFetching: isWorkflowLoading } = useAppWorkflow(isBasicApp ? 'empty' : appDetail.id)
+  const isLoading = isAppLoading || isWorkflowLoading
+
+  const basicAppFileConfig = useMemo(() => {
+    let fileConfig: FileUpload
+    if (isBasicApp)
+      fileConfig = currentApp?.model_config?.file_upload as FileUpload
+    else
+      fileConfig = currentWorkflow?.features?.file_upload as FileUpload
+    return {
+      image: {
+        detail: fileConfig?.image?.detail || Resolution.high,
+        enabled: !!fileConfig?.image?.enabled,
+        number_limits: fileConfig?.image?.number_limits || 3,
+        transfer_methods: fileConfig?.image?.transfer_methods || ['local_file', 'remote_url'],
+      },
+      enabled: !!(fileConfig?.enabled || fileConfig?.image?.enabled),
+      allowed_file_types: fileConfig?.allowed_file_types || [SupportUploadFileTypes.image],
+      allowed_file_extensions: fileConfig?.allowed_file_extensions || [...FILE_EXTS[SupportUploadFileTypes.image]].map(ext => `.${ext}`),
+      allowed_file_upload_methods: fileConfig?.allowed_file_upload_methods || fileConfig?.image?.transfer_methods || ['local_file', 'remote_url'],
+      number_limits: fileConfig?.number_limits || fileConfig?.image?.number_limits || 3,
+    }
+  }, [currentApp?.model_config?.file_upload, currentWorkflow?.features?.file_upload, isBasicApp])
+
+  const inputFormSchema = useMemo(() => {
+    if (!currentApp)
+      return []
+    let inputFormSchema = []
+    if (isBasicApp) {
+      inputFormSchema = currentApp.model_config.user_input_form.filter((item: any) => !item.external_data_tool).map((item: any) => {
+        if (item.paragraph) {
+          return {
+            ...item.paragraph,
+            type: 'paragraph',
+            required: false,
+          }
+        }
+        if (item.number) {
+          return {
+            ...item.number,
+            type: 'number',
+            required: false,
+          }
+        }
+        if (item.select) {
+          return {
+            ...item.select,
+            type: 'select',
+            required: false,
+          }
+        }
+
+        if (item['file-list']) {
+          return {
+            ...item['file-list'],
+            type: 'file-list',
+            required: false,
+            fileUploadConfig,
+          }
+        }
+
+        if (item.file) {
+          return {
+            ...item.file,
+            type: 'file',
+            required: false,
+            fileUploadConfig,
+          }
+        }
+
+        return {
+          ...item['text-input'],
+          type: 'text-input',
+          required: false,
+        }
+      })
+    }
+    else {
+      const startNode = currentWorkflow?.graph.nodes.find(node => node.data.type === BlockEnum.Start) as any
+      inputFormSchema = startNode?.data.variables.map((variable: any) => {
+        if (variable.type === InputVarType.multiFiles) {
+          return {
+            ...variable,
+            required: false,
+            fileUploadConfig,
+          }
+        }
+
+        if (variable.type === InputVarType.singleFile) {
+          return {
+            ...variable,
+            required: false,
+            fileUploadConfig,
+          }
+        }
+        return {
+          ...variable,
+          required: false,
+        }
+      })
+    }
+    if ((currentApp.mode === 'completion' || currentApp.mode === 'workflow') && basicAppFileConfig.enabled) {
+      inputFormSchema.push({
+        label: 'Image Upload',
+        variable: '#image#',
+        type: InputVarType.singleFile,
+        required: false,
+        ...basicAppFileConfig,
+        fileUploadConfig,
+      })
+    }
+    return inputFormSchema
+  }, [basicAppFileConfig, currentApp, currentWorkflow, fileUploadConfig, isBasicApp])
+
+  const handleFormChange = (value: Record<string, any>) => {
+    inputsRef.current = value
+    onFormChange(value)
+  }
+
+  return (
+    <div className={cn('max-h-[240px] flex flex-col pb-4 rounded-b-2xl border-t border-divider-subtle')}>
+      {isLoading && <div className='pt-3'><Loading type='app' /></div>}
+      {!isLoading && (
+        <div className='shrink-0 mt-3 mb-2 px-4 h-6 flex items-center system-sm-semibold text-text-secondary'>{t('app.appSelector.params')}</div>
+      )}
+      {!isLoading && !inputFormSchema.length && (
+        <div className='h-16 flex flex-col justify-center items-center'>
+          <div className='text-text-tertiary system-sm-regular'>{t('app.appSelector.noParams')}</div>
+        </div>
+      )}
+      {!isLoading && !!inputFormSchema.length && (
+        <div className='grow overflow-y-auto'>
+          <AppInputsForm
+            inputs={value?.inputs || {}}
+            inputsRef={inputsRef}
+            inputsForms={inputFormSchema}
+            onFormChange={handleFormChange}
+          />
+        </div>
+      )}
+    </div>
+  )
+}
+
+export default AppInputsPanel
--- a/web/app/components/plugins/plugin-detail-panel/app-selector/app-picker.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/app-selector/app-picker.tsx
@ -0,0 +1,113 @@
+'use client'
+import type { FC } from 'react'
+import React, { useMemo } from 'react'
+import { useState } from 'react'
+import {
+  PortalToFollowElem,
+  PortalToFollowElemContent,
+  PortalToFollowElemTrigger,
+} from '@/app/components/base/portal-to-follow-elem'
+import type {
+  OffsetOptions,
+  Placement,
+} from '@floating-ui/react'
+import Input from '@/app/components/base/input'
+import AppIcon from '@/app/components/base/app-icon'
+import type { App } from '@/types/app'
+
+type Props = {
+  appList: App[]
+  disabled: boolean
+  trigger: React.ReactNode
+  placement?: Placement
+  offset?: OffsetOptions
+  isShow: boolean
+  onShowChange: (isShow: boolean) => void
+  onSelect: (app: App) => void
+}
+
+const AppPicker: FC<Props> = ({
+  appList,
+  disabled,
+  trigger,
+  placement = 'right-start',
+  offset = 0,
+  isShow,
+  onShowChange,
+  onSelect,
+}) => {
+  const [searchText, setSearchText] = useState('')
+  const filteredAppList = useMemo(() => {
+    return (appList || []).filter(app => app.name.toLowerCase().includes(searchText.toLowerCase())).filter(app => (app.mode !== 'advanced-chat' && app.mode !== 'workflow') || !!app.workflow)
+  }, [appList, searchText])
+  const getAppType = (app: App) => {
+    switch (app.mode) {
+      case 'advanced-chat':
+        return 'chatflow'
+      case 'agent-chat':
+        return 'agent'
+      case 'chat':
+        return 'chat'
+      case 'completion':
+        return 'completion'
+      case 'workflow':
+        return 'workflow'
+    }
+  }
+
+  const handleTriggerClick = () => {
+    if (disabled) return
+    onShowChange(true)
+  }
+
+  return (
+    <PortalToFollowElem
+      placement={placement}
+      offset={offset}
+      open={isShow}
+      onOpenChange={onShowChange}
+    >
+      <PortalToFollowElemTrigger
+        onClick={handleTriggerClick}
+      >
+        {trigger}
+      </PortalToFollowElemTrigger>
+
+      <PortalToFollowElemContent className='z-[1000]'>
+        <div className="relative w-[356px] min-h-20 rounded-xl bg-components-panel-bg-blur border-[0.5px] border-components-panel-border shadow-lg">
+          <div className='p-2 pb-1'>
+            <Input
+              showLeftIcon
+              showClearIcon
+              value={searchText}
+              onChange={e => setSearchText(e.target.value)}
+              onClear={() => setSearchText('')}
+            />
+          </div>
+          <div className='p-1'>
+            {filteredAppList.map(app => (
+              <div
+                key={app.id}
+                className='flex items-center gap-3 py-1 pl-2 pr-3 rounded-lg hover:bg-state-base-hover cursor-pointer'
+                onClick={() => onSelect(app)}
+              >
+                <AppIcon
+                  className='shrink-0'
+                  size='xs'
+                  iconType={app.icon_type}
+                  icon={app.icon}
+                  background={app.icon_background}
+                  imageUrl={app.icon_url}
+                />
+                <div title={app.name} className='grow system-sm-medium text-components-input-text-filled'>{app.name}</div>
+                <div className='shrink-0 text-text-tertiary system-2xs-medium-uppercase'>{getAppType(app)}</div>
+              </div>
+            ))}
+          </div>
+        </div>
+      </PortalToFollowElemContent>
+    </PortalToFollowElem>
+  )
+}
+
+export default React.memo(AppPicker)
--- a/web/app/components/plugins/plugin-detail-panel/app-selector/app-trigger.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/app-selector/app-trigger.tsx
@ -0,0 +1,48 @@
+'use client'
+import React from 'react'
+import { useTranslation } from 'react-i18next'
+import {
+  RiArrowDownSLine,
+} from '@remixicon/react'
+import AppIcon from '@/app/components/base/app-icon'
+import type { App } from '@/types/app'
+import cn from '@/utils/classnames'
+
+type Props = {
+  open: boolean
+  appDetail?: App
+}
+
+const AppTrigger = ({
+  open,
+  appDetail,
+}: Props) => {
+  const { t } = useTranslation()
+  return (
+    <div className={cn(
+      'group flex items-center p-2 pl-3 bg-components-input-bg-normal rounded-lg cursor-pointer hover:bg-state-base-hover-alt',
+      open && 'bg-state-base-hover-alt',
+      appDetail && 'pl-1.5 py-1.5',
+    )}>
+      {appDetail && (
+        <AppIcon
+          className='mr-2'
+          size='xs'
+          iconType={appDetail.icon_type}
+          icon={appDetail.icon}
+          background={appDetail.icon_background}
+          imageUrl={appDetail.icon_url}
+        />
+      )}
+      {appDetail && (
+        <div title={appDetail.name} className='grow system-sm-medium text-components-input-text-filled'>{appDetail.name}</div>
+      )}
+      {!appDetail && (
+        <div className='grow text-components-input-text-placeholder system-sm-regular truncate'>{t('app.appSelector.placeholder')}</div>
+      )}
+      <RiArrowDownSLine className={cn('shrink-0 ml-0.5 w-4 h-4 text-text-quaternary group-hover:text-text-secondary', open && 'text-text-secondary')} />
+    </div>
+  )
+}
+
+export default AppTrigger
--- a/web/app/components/plugins/plugin-detail-panel/app-selector/index.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/app-selector/index.tsx
@ -0,0 +1,139 @@
+'use client'
+import type { FC } from 'react'
+import React, { useMemo, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import {
+  PortalToFollowElem,
+  PortalToFollowElemContent,
+  PortalToFollowElemTrigger,
+} from '@/app/components/base/portal-to-follow-elem'
+import AppTrigger from '@/app/components/plugins/plugin-detail-panel/app-selector/app-trigger'
+import AppPicker from '@/app/components/plugins/plugin-detail-panel/app-selector/app-picker'
+import AppInputsPanel from '@/app/components/plugins/plugin-detail-panel/app-selector/app-inputs-panel'
+import { useAppFullList } from '@/service/use-apps'
+import type { App } from '@/types/app'
+import type {
+  OffsetOptions,
+  Placement,
+} from '@floating-ui/react'
+
+type Props = {
+  value?: {
+    app_id: string
+    inputs: Record<string, any>
+    files?: any[]
+  }
+  disabled?: boolean
+  placement?: Placement
+  offset?: OffsetOptions
+  onSelect: (app: {
+    app_id: string
+    inputs: Record<string, any>
+    files?: any[]
+  }) => void
+  supportAddCustomTool?: boolean
+}
+const AppSelector: FC<Props> = ({
+  value,
+  disabled,
+  placement = 'bottom',
+  offset = 4,
+  onSelect,
+}) => {
+  const { t } = useTranslation()
+  const [isShow, onShowChange] = useState(false)
+  const handleTriggerClick = () => {
+    if (disabled) return
+    onShowChange(true)
+  }
+
+  const { data: appList } = useAppFullList()
+  const currentAppInfo = useMemo(() => {
+    if (!appList?.data || !value)
+      return undefined
+    return appList.data.find(app => app.id === value.app_id)
+  }, [appList?.data, value])
+  const [isShowChooseApp, setIsShowChooseApp] = useState(false)
+  const handleSelectApp = (app: App) => {
+    const clearValue = app.id !== value?.app_id
+    const appValue = {
+      app_id: app.id,
+      inputs: clearValue ? {} : value?.inputs || {},
+      files: clearValue ? [] : value?.files || [],
+    }
+    onSelect(appValue)
+    setIsShowChooseApp(false)
+  }
+  const handleFormChange = (inputs: Record<string, any>) => {
+    const newFiles = inputs['#image#']
+    delete inputs['#image#']
+    const newValue = {
+      app_id: value?.app_id || '',
+      inputs,
+      files: newFiles ? [newFiles] : value?.files || [],
+    }
+    onSelect(newValue)
+  }
+
+  const formattedValue = useMemo(() => {
+    return {
+      app_id: value?.app_id || '',
+      inputs: {
+        ...value?.inputs,
+        ...(value?.files?.length ? { '#image#': value.files[0] } : {}),
+      },
+    }
+  }, [value])
+
+  return (
+    <>
+      <PortalToFollowElem
+        placement={placement}
+        offset={offset}
+        open={isShow}
+        onOpenChange={onShowChange}
+      >
+        <PortalToFollowElemTrigger
+          className='w-full'
+          onClick={handleTriggerClick}
+        >
+          <AppTrigger
+            open={isShow}
+            appDetail={currentAppInfo}
+          />
+        </PortalToFollowElemTrigger>
+        <PortalToFollowElemContent className='z-[1000]'>
+          <div className="relative w-[389px] min-h-20 rounded-xl bg-components-panel-bg-blur border-[0.5px] border-components-panel-border shadow-lg">
+            <div className='px-4 py-3 flex flex-col gap-1'>
+              <div className='h-6 flex items-center system-sm-semibold text-text-secondary'>{t('app.appSelector.label')}</div>
+              <AppPicker
+                placement='bottom'
+                offset={offset}
+                trigger={
+                  <AppTrigger
+                    open={isShowChooseApp}
+                    appDetail={currentAppInfo}
+                  />
+                }
+                isShow={isShowChooseApp}
+                onShowChange={setIsShowChooseApp}
+                disabled={false}
+                appList={appList?.data || []}
+                onSelect={handleSelectApp}
+              />
+            </div>
+            {/* app inputs config panel */}
+            {currentAppInfo && (
+              <AppInputsPanel
+                value={formattedValue}
+                appDetail={currentAppInfo}
+                onFormChange={handleFormChange}
+              />
+            )}
+          </div>
+        </PortalToFollowElemContent>
+      </PortalToFollowElem>
+    </>
+  )
+}
+export default React.memo(AppSelector)
--- a/web/app/components/plugins/plugin-detail-panel/endpoint-modal.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/endpoint-modal.tsx
@ -69,7 +69,7 @@ const EndpointModal: FC<Props> = ({
              isEditMode={true}
              showOnVariableMap={{}}
              validating={false}
-              inputClassName='bg-components-input-bg-normal hover:bg-state-base-hover-alt'
+              inputClassName='bg-components-input-bg-normal hover:bg-components-input-bg-hover'
              fieldMoreInfo={item => item.url
                ? (<a
                  href={item.url}
--- a/web/app/components/plugins/plugin-detail-panel/tool-selector/index.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/tool-selector/index.tsx
@ -7,11 +7,11 @@ import {
  PortalToFollowElemContent,
  PortalToFollowElemTrigger,
 } from '@/app/components/base/portal-to-follow-elem'
-import ToolTrigger from '@/app/components/tools/tool-selector/tool-trigger'
+import ToolTrigger from '@/app/components/plugins/plugin-detail-panel/tool-selector/tool-trigger'
 import ToolPicker from '@/app/components/workflow/block-selector/tool-picker'
 import Button from '@/app/components/base/button'
 import Indicator from '@/app/components/header/indicator'
-import ToolCredentialForm from '@/app/components/tools/tool-selector/tool-credentials-form'
+import ToolCredentialForm from '@/app/components/plugins/plugin-detail-panel/tool-selector/tool-credentials-form'
 import Toast from '@/app/components/base/toast'

 import { useAppContext } from '@/context/app-context'
--- a/web/app/components/plugins/plugin-detail-panel/tool-selector/tool-credentials-form.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/tool-selector/tool-credentials-form.tsx
@ -67,7 +67,7 @@ const ToolCredentialForm: FC<Props> = ({
              isEditMode={true}
              showOnVariableMap={{}}
              validating={false}
-              inputClassName='bg-components-input-bg-normal hover:bg-state-base-hover-alt'
+              inputClassName='bg-components-input-bg-normal hover:bg-components-input-bg-hover'
              fieldMoreInfo={item => item.url
                ? (<a
                  href={item.url}
--- a/web/app/components/plugins/plugin-detail-panel/tool-selector/tool-trigger.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/tool-selector/tool-trigger.tsx
@ -40,7 +40,7 @@ const ToolTrigger = ({
        </div>
      )}
      {value && (
-        <div className='grow system-sm-regular text-components-input-text-filled'>{value.tool_name}</div>
+        <div className='grow system-sm-medium text-components-input-text-filled'>{value.tool_name}</div>
      )}
      {!value && (
        <div className='grow text-components-input-text-placeholder system-sm-regular'>{t('tools.toolSelector.placeholder')}</div>
--- a/web/app/components/plugins/plugin-page/plugin-tasks/hooks.ts
+++ b/web/app/components/plugins/plugin-page/plugin-tasks/hooks.ts
@ -11,7 +11,7 @@ export const usePluginTaskStatus = () => {
    pluginTasks,
  } = usePluginTaskList()
  const { mutate } = useMutationClearTaskPlugin()
-  const allPlugins = pluginTasks.map(task => task.plugins.map((plugin) => {
+  const allPlugins = pluginTasks.filter(task => task.status !== TaskStatus.success).map(task => task.plugins.map((plugin) => {
    return {
      ...plugin,
      taskId: task.id,
--- a/web/app/components/plugins/plugin-page/plugin-tasks/index.tsx
+++ b/web/app/components/plugins/plugin-page/plugin-tasks/index.tsx
@ -34,11 +34,14 @@ const PluginTasks = () => {
    handleClearErrorPlugin,
  } = usePluginTaskStatus()
  const { getIconUrl } = useGetIcon()
+  const runningPluginsLength = runningPlugins.length
+  const errorPluginsLength = errorPlugins.length
+  const successPluginsLength = successPlugins.length

-  const isInstalling = runningPlugins.length > 0 && errorPlugins.length === 0 && successPlugins.length === 0
-  const isInstallingWithError = errorPlugins.length > 0 && errorPlugins.length < totalPluginsLength
-  const isSuccess = successPlugins.length === totalPluginsLength && totalPluginsLength > 0
-  const isFailed = errorPlugins.length === totalPluginsLength && totalPluginsLength > 0
+  const isInstalling = runningPluginsLength > 0 && errorPluginsLength === 0
+  const isInstallingWithError = runningPluginsLength > 0 && errorPluginsLength > 0
+  const isSuccess = successPluginsLength === totalPluginsLength && totalPluginsLength > 0
+  const isFailed = runningPluginsLength === 0 && (errorPluginsLength + successPluginsLength) === totalPluginsLength && totalPluginsLength > 0

  const tip = useMemo(() => {
    if (isInstalling)
@ -51,6 +54,9 @@ const PluginTasks = () => {
      return t('plugin.task.installError', { errorLength: errorPlugins.length })
  }, [isInstalling, isInstallingWithError, isFailed, errorPlugins, runningPlugins, totalPluginsLength, t])

+  if (!totalPluginsLength)
+    return null
+
  return (
    <div className='flex items-center'>
      <PortalToFollowElem
@ -72,7 +78,7 @@ const PluginTasks = () => {
            <div
              className={cn(
                'relative flex items-center justify-center w-8 h-8 rounded-lg border-[0.5px] border-components-button-secondary-border bg-components-button-secondary-bg shadow-xs hover:bg-components-button-secondary-bg-hover',
-                (isInstallingWithError || isFailed) && 'border-components-button-destructive-secondary-border-hover bg-state-destructive-hover hover:bg-state-destructive-hover-alt',
+                (isInstallingWithError || isFailed) && 'border-components-button-destructive-secondary-border-hover bg-state-destructive-hover hover:bg-state-destructive-hover-alt cursor-pointer',
              )}
            >
              <RiInstallLine
@ -115,7 +121,9 @@ const PluginTasks = () => {
        </PortalToFollowElemTrigger>
        <PortalToFollowElemContent className='z-10'>
          <div className='p-1 pb-2 w-[320px] rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur shadow-lg'>
-            <div className='flex items-center px-2 pt-1 h-7 system-sm-semibold-uppercase'>{t('plugin.task.installedError')}</div>
+            <div className='flex items-center px-2 pt-1 h-7 system-sm-semibold-uppercase'>
+              {t('plugin.task.installedError', { errorLength: errorPlugins.length })}
+            </div>
            {
              errorPlugins.map(errorPlugin => (
                <div
--- a/web/app/components/share/text-generation/index.tsx
+++ b/web/app/components/share/text-generation/index.tsx
@ -133,8 +133,10 @@ const TextGeneration: FC<IMainProps> = ({
  const handleSend = () => {
    setIsCallBatchAPI(false)
    setControlSend(Date.now())
+
    // eslint-disable-next-line ts/no-use-before-define
    setAllTaskList([]) // clear batch task running status
+
    // eslint-disable-next-line ts/no-use-before-define
    showResSidebar()
  }
--- a/web/app/components/workflow/block-selector/all-tools.tsx
+++ b/web/app/components/workflow/block-selector/all-tools.tsx
@ -43,16 +43,14 @@ const AllTools = ({
  supportAddCustomTool,
  onShowAddCustomCollectionModal,
 }: AllToolsProps) => {
-  const tabs = useToolTabs()
  const language = useGetLanguage()
+  const tabs = useToolTabs()
  const [activeTab, setActiveTab] = useState(ToolTypeEnum.All)
  const [activeView, setActiveView] = useState<ViewType>(ViewType.flat)
-
+  const hasFilter = searchText || tags.length > 0
  const isMatchingKeywords = (text: string, keywords: string) => {
    return text.toLowerCase().includes(keywords.toLowerCase())
  }
-
-  const hasFilter = searchText || tags.length > 0
  const tools = useMemo(() => {
    let mergedTools: ToolWithProvider[] = []
    if (activeTab === ToolTypeEnum.All)
--- a/web/app/components/workflow/plugin-dependency/index.tsx
+++ b/web/app/components/workflow/plugin-dependency/index.tsx
@ -1,13 +1,25 @@
+import { useCallback } from 'react'
 import { useStore } from './store'
+import InstallBundle from '@/app/components/plugins/install-plugin/install-bundle'

 const PluginDependency = () => {
  const dependencies = useStore(s => s.dependencies)

+  const handleCancelInstallBundle = useCallback(() => {
+    const { setDependencies } = useStore.getState()
+    setDependencies([])
+  }, [])
+
  if (!dependencies.length)
    return null

  return (
-    <div>a</div>
+    <div>
+      <InstallBundle
+        fromDSLPayload={dependencies}
+        onClose={handleCancelInstallBundle}
+      />
+    </div>
  )
 }

--- a/web/app/components/workflow/run/iteration-result-panel.tsx
+++ b/web/app/components/workflow/run/iteration-result-panel.tsx
@ -104,17 +104,17 @@ const IterationResultPanel: FC<Props> = ({
              onClick={() => toggleIteration(index)}
            >
              <div className={cn('flex items-center gap-2 flex-grow')}>
-                <div className='flex items-center justify-center w-4 h-4 rounded-[5px] border-divider-subtle bg-util-colors-cyan-cyan-500 flex-shrink-0'>
+                <div className='flex items-center justify-center w-4 h-4 rounded-[5px] border-divider-subtle bg-util-colors-cyan-cyan-500 shrink-0'>
                  <Iteration className='w-3 h-3 text-text-primary-on-surface' />
                </div>
-                <span className='system-sm-semibold-uppercase text-text-primary flex-grow'>
+                <span className='system-sm-semibold-uppercase text-text-primary grow'>
                  {t(`${i18nPrefix}.iteration`)} {index + 1}
                </span>
                {iterationStatusShow(index, iteration, iterDurationMap)}
              </div>
            </div>
            {expandedIterations[index] && <div
-              className="flex-grow h-px bg-divider-subtle"
+              className="grow h-px bg-divider-subtle"
            ></div>}
            <div className={cn(
              'overflow-hidden transition-all duration-200',
--- a/web/app/components/workflow/run/node.tsx
+++ b/web/app/components/workflow/run/node.tsx
@ -144,7 +144,7 @@ const NodePanel: FC<Props> = ({
                  className='flex items-center w-full self-stretch gap-2 px-3 py-2 bg-components-button-tertiary-bg-hover hover:bg-components-button-tertiary-bg-hover rounded-lg cursor-pointer border-none'
                  onClick={handleOnShowIterationDetail}
                >
-                  <Iteration className='w-4 h-4 text-components-button-tertiary-text flex-shrink-0' />
+                  <Iteration className='w-4 h-4 text-components-button-tertiary-text shrink-0' />
                  <div className='flex-1 text-left system-sm-medium text-components-button-tertiary-text'>{t('workflow.nodes.iteration.iteration', { count: getCount(nodeInfo.details?.length, nodeInfo.metadata?.iterator_length) })}{getErrorCount(nodeInfo.details) > 0 && (
                    <>
                      {t('workflow.nodes.iteration.comma')}
@ -153,12 +153,12 @@ const NodePanel: FC<Props> = ({
                  )}</div>
                  {justShowIterationNavArrow
                    ? (
-                      <RiArrowRightSLine className='w-4 h-4 text-components-button-tertiary-text flex-shrink-0' />
+                      <RiArrowRightSLine className='w-4 h-4 text-components-button-tertiary-text shrink-0' />
                    )
                    : (
                      <div className='flex items-center space-x-1 text-[#155EEF]'>
                        <div className='text-[13px] font-normal '>{t('workflow.common.viewDetailInTracingPanel')}</div>
-                        <RiArrowRightSLine className='w-4 h-4 text-components-button-tertiary-text flex-shrink-0' />
+                        <RiArrowRightSLine className='w-4 h-4 text-components-button-tertiary-text shrink-0' />
                      </div>
                    )}
                </Button>
--- a/web/app/components/workflow/run/tracing-panel.tsx
+++ b/web/app/components/workflow/run/tracing-panel.tsx
@ -57,7 +57,7 @@ function buildLogTree(nodes: NodeTracing[], t: (key: string) => string): Tracing
    levelCounts[levelKey]++

    const parentTitle = parentId ? parallelStacks[parentId]?.parallelTitle : ''
-    const levelNumber = parentTitle ? parseInt(parentTitle.split('-')[1]) + 1 : 1
+    const levelNumber = parentTitle ? Number.parseInt(parentTitle.split('-')[1]) + 1 : 1
    const letter = parallelChildCounts[levelKey]?.size > 1 ? String.fromCharCode(64 + levelCounts[levelKey]) : ''
    return `${t('workflow.common.parallel')}-${levelNumber}${letter}`
  }
@ -65,7 +65,7 @@ function buildLogTree(nodes: NodeTracing[], t: (key: string) => string): Tracing
  const getBranchTitle = (parentId: string | null, branchNum: number): string => {
    const levelKey = parentId || 'root'
    const parentTitle = parentId ? parallelStacks[parentId]?.parallelTitle : ''
-    const levelNumber = parentTitle ? parseInt(parentTitle.split('-')[1]) + 1 : 1
+    const levelNumber = parentTitle ? Number.parseInt(parentTitle.split('-')[1]) + 1 : 1
    const letter = parallelChildCounts[levelKey]?.size > 1 ? String.fromCharCode(64 + levelCounts[levelKey]) : ''
    const branchLetter = String.fromCharCode(64 + branchNum)
    return `${t('workflow.common.branch')}-${levelNumber}${letter}-${branchLetter}`
@ -227,7 +227,7 @@ const TracingPanel: FC<TracingPanelProps> = ({
              <span>{node.parallelTitle}</span>
            </div>
            <div
-              className="mx-2 flex-grow h-px bg-divider-subtle"
+              className="mx-2 grow h-px bg-divider-subtle"
              style={{ background: 'linear-gradient(to right, rgba(16, 24, 40, 0.08), rgba(255, 255, 255, 0)' }}
            ></div>
          </div>
--- a/web/app/components/workflow/update-dsl-modal.tsx
+++ b/web/app/components/workflow/update-dsl-modal.tsx
@ -77,17 +77,13 @@ const UpdateDSLModal = ({
      return
    try {
      if (appDetail && fileContent) {
-        const leakedData = await mutateAsync({ dslString: fileContent })
-        if (leakedData?.leaked.length) {
-          isCreatingRef.current = false
-          return
-        }
        setLoading(true)
        const {
          graph,
          features,
          hash,
        } = await updateWorkflowDraftFromDSL(appDetail.id, fileContent)
+        await mutateAsync({ dslString: fileContent })
        const { nodes, edges, viewport } = graph
        const newFeatures = {
          file: {
--- a/web/i18n/en-US/app.ts
+++ b/web/i18n/en-US/app.ts
@ -133,6 +133,12 @@ const translation = {
      removeConfirmContent: 'The current configuration is in use, removing it will turn off the Tracing feature.',
    },
  },
+  appSelector: {
+    label: 'APP',
+    placeholder: 'Select an app...',
+    params: 'APP PARAMETERS',
+    noParams: 'No parameters needed',
+  },
 }

 export default translation
--- a/web/i18n/sl-SI/plugin-tags.ts
+++ b/web/i18n/sl-SI/plugin-tags.ts
--- a/web/i18n/sl-SI/plugin.ts
+++ b/web/i18n/sl-SI/plugin.ts
--- a/web/i18n/zh-Hans/app.ts
+++ b/web/i18n/zh-Hans/app.ts
@ -132,6 +132,12 @@ const translation = {
      removeConfirmContent: '当前配置正在使用中，删除它将关闭追踪功能。',
    },
  },
+  appSelector: {
+    label: '应用',
+    placeholder: '选择一个应用',
+    params: '应用参数',
+    noParams: '无需参数',
+  },
 }

 export default translation
--- a/web/i18n/zh-Hans/common.ts
+++ b/web/i18n/zh-Hans/common.ts
@ -127,7 +127,7 @@ const translation = {
    explore: '探索',
    apps: '工作室',
    plugins: '插件',
-    exploreMarketplace: '探索市场',
+    exploreMarketplace: '探索 Marketplace',
    pluginsTips: '集成第三方插件或创建与 ChatGPT 兼容的 AI 插件。',
    datasets: '知识库',
    datasetsTips: '即将到来: 上传自己的长文本数据，或通过 Webhook 集成自己的数据源',
--- a/web/i18n/zh-Hans/plugin.ts
+++ b/web/i18n/zh-Hans/plugin.ts
@ -22,15 +22,15 @@ const translation = {
    noInstalled: '无已安装的插件',
    notFound: '未找到插件',
    source: {
-      marketplace: '从市场安装',
-      github: '从GitHub安装',
-      local: '从本地文件安装',
+      marketplace: '从 Marketplace 安装',
+      github: '从 GitHub 安装',
+      local: '本地插件',
    },
  },
  source: {
-    marketplace: '市场',
+    marketplace: 'Marketplace',
    github: 'GitHub',
-    local: '本地文件',
+    local: '本地插件',
  },
  detailPanel: {
    categoryTip: {
--- a/web/service/use-apps.ts
+++ b/web/service/use-apps.ts
@ -0,0 +1,27 @@
+import { get } from './base'
+import type { App } from '@/types/app'
+import type { AppListResponse } from '@/models/app'
+import { useInvalid } from './use-base'
+import { useQuery } from '@tanstack/react-query'
+
+const NAME_SPACE = 'apps'
+
+// TODO paging for list
+const useAppFullListKey = [NAME_SPACE, 'full-list']
+export const useAppFullList = () => {
+  return useQuery<AppListResponse>({
+    queryKey: useAppFullListKey,
+    queryFn: () => get<AppListResponse>('/apps', { params: { page: 1, limit: 100 } }),
+  })
+}
+
+export const useInvalidateAppFullList = () => {
+  return useInvalid(useAppFullListKey)
+}
+
+export const useAppDetail = (appID: string) => {
+  return useQuery<App>({
+    queryKey: [NAME_SPACE, 'detail', appID],
+    queryFn: () => get<App>(`/apps/${appID}`),
+  })
+}
--- a/web/service/use-common.ts
+++ b/web/service/use-common.ts
@ -0,0 +1,14 @@
+import { get } from './base'
+import type {
+  FileUploadConfigResponse,
+} from '@/models/common'
+import { useQuery } from '@tanstack/react-query'
+
+const NAME_SPACE = 'common'
+
+export const useFileUploadConfig = () => {
+  return useQuery<FileUploadConfigResponse>({
+    queryKey: [NAME_SPACE, 'file-upload-config'],
+    queryFn: () => get<FileUploadConfigResponse>('/files/upload'),
+  })
+}
--- a/web/service/use-plugins.ts
+++ b/web/service/use-plugins.ts
@ -9,6 +9,7 @@ import type {
  PluginsFromMarketplaceResponse,
  uploadGitHubResponse,
 } from '@/app/components/plugins/types'
+import { TaskStatus } from '@/app/components/plugins/types'
 import type {
  PluginsSearchParams,
 } from '@/app/components/plugins/marketplace/types'
@ -97,7 +98,7 @@ export const useUploadGitHub = (payload: {
 export const useInstallFromMarketplaceAndGitHub = ({
  onSuccess,
 }: {
-  onSuccess?: () => void
+  onSuccess?: (res: { success: boolean }[]) => void
 }) => {
  return useMutation({
    mutationFn: (payload: Dependency[]) => {
@ -121,6 +122,7 @@ export const useInstallFromMarketplaceAndGitHub = ({
          })
          return ({ success: true })
        }
+        // eslint-disable-next-line unused-imports/no-unused-vars
        catch (e) {
          return Promise.resolve({ success: false })
        }
@ -216,14 +218,14 @@ export const usePluginTaskList = () => {
    queryKey: usePluginTaskListKey,
    queryFn: async () => {
      const currentData = await get<{ tasks: PluginTask[] }>('/workspaces/current/plugin/tasks?page=1&page_size=100')
-      const taskDone = currentData.tasks.every(task => task.total_plugins === task.completed_plugins)
+      const taskDone = currentData.tasks.every(task => task.status === TaskStatus.success)

      if (taskDone)
        setEnabled(false)

      return currentData
    },
-    // refetchInterval: 5000,
+    refetchInterval: 5000,
    enabled,
  })
  const handleRefetch = useCallback(() => {
--- a/web/service/use-workflow.ts
+++ b/web/service/use-workflow.ts
@ -0,0 +1,18 @@
+import { get } from './base'
+import type {
+  FetchWorkflowDraftResponse,
+} from '@/types/workflow'
+import { useQuery } from '@tanstack/react-query'
+
+const NAME_SPACE = 'workflow'
+
+export const useAppWorkflow = (appID: string) => {
+  return useQuery<FetchWorkflowDraftResponse>({
+    queryKey: [NAME_SPACE, 'publish', appID],
+    queryFn: () => {
+      if (appID === 'empty')
+        return Promise.resolve({} as unknown as FetchWorkflowDraftResponse)
+      return get<FetchWorkflowDraftResponse>(`/apps/${appID}/workflows/publish`)
+    },
+  })
+}
--- a/web/types/app.ts
+++ b/web/types/app.ts
@ -351,6 +351,13 @@ export type App = {
  /** api site url */
  api_base_url: string
  tags: Tag[]
+  workflow?: {
+    id: string
+    created_at: number
+    created_by?: string
+    updated_at: number
+    updated_by?: string
+  }
 }

 export type AppSSO = {