merge

web/app/components/plugins/card/index.tsx

@@ -11,6 +11,7 @@ import Placeholder from './base/placeholder'
 import cn from '@/utils/classnames'
 import { useGetLanguage } from '@/context/i18n'
 import { getLanguage } from '@/i18n/language'
+import { useCategories } from '../hooks'
 
 export type Props = {
   className?: string
@@ -41,9 +42,9 @@ const Card = ({
 }: Props) => {
   const defaultLocale = useGetLanguage()
   const locale = localeFromProps ? getLanguage(localeFromProps) : defaultLocale
-
-  const { type, name, org, label, brief, icon, verified } = payload
-
+  const { categoriesMap } = useCategories()
+  const { type, category, name, org, label, brief, icon, verified } = payload
+  const cornerMark = type !== 'plugin' ? type : categoriesMap[category]?.label
   const getLocalizedText = (obj: Record<string, string> | undefined) =>
     obj?.[locale] || obj?.['en-US'] || obj?.en_US || ''
 
@@ -59,7 +60,7 @@ const Card = ({
 
   return (
     <div className={wrapClassName}>
-      {!hideCornerMark && <CornerMark text={type} />}
+      {!hideCornerMark && <CornerMark text={cornerMark} />}
       {/* Header */}
       <div className="flex">
         <Icon src={icon} installed={installed} installFailed={installFailed} />

web/app/components/plugins/install-plugin/install-from-marketplace/index.tsx

@@ -2,7 +2,7 @@
 
 import React, { useCallback, useState } from 'react'
 import Modal from '@/app/components/base/modal'
-import type { Plugin, PluginManifestInMarket } from '../../types'
+import type { Dependency, Plugin, PluginManifestInMarket } from '../../types'
 import { InstallStep, PluginType } from '../../types'
 import Install from './steps/install'
 import Installed from '../base/installed'
@@ -10,12 +10,15 @@ import { useTranslation } from 'react-i18next'
 import { useUpdateModelProviders } from '@/app/components/header/account-setting/model-provider-page/hooks'
 import { useInvalidateInstalledPluginList } from '@/service/use-plugins'
 import { useInvalidateAllToolProviders } from '@/service/use-tools'
+import ReadyToInstallBundle from '../install-bundle/ready-to-install'
 
 const i18nPrefix = 'plugin.installModal'
 
 type InstallFromMarketplaceProps = {
   uniqueIdentifier: string
   manifest: PluginManifestInMarket | Plugin
+  isBundle?: boolean
+  dependencies?: Dependency[]
   onSuccess: () => void
   onClose: () => void
 }
@@ -23,6 +26,8 @@ type InstallFromMarketplaceProps = {
 const InstallFromMarketplace: React.FC<InstallFromMarketplaceProps> = ({
   uniqueIdentifier,
   manifest,
+  isBundle,
+  dependencies,
   onSuccess,
   onClose,
 }) => {
@@ -83,7 +88,14 @@ const InstallFromMarketplace: React.FC<InstallFromMarketplaceProps> = ({
         )
       }
       {
-        ([InstallStep.installed, InstallStep.installFailed].includes(step)) && (
+        isBundle ? (
+          <ReadyToInstallBundle
+            step={step}
+            onStepChange={setStep}
+            onClose={onClose}
+            allPlugins={dependencies!}
+          />
+        ) : ([InstallStep.installed, InstallStep.installFailed].includes(step)) && (
           <Installed
             payload={manifest!}
             isMarketPayload

web/app/components/plugins/plugin-page/plugin-tasks/index.tsx

@@ -131,7 +131,7 @@ const PluginTasks = () => {
                   className='flex items-center p-1 pl-2 h-8 rounded-lg hover:bg-state-base-hover'
                 >
                   <div className='relative flex items-center justify-center mr-2 w-6 h-6 rounded-md border-[0.5px] border-components-panel-border-subtle bg-background-default-dodge'>
-                    <RiErrorWarningFill className='absolute -right-0.5 -bottom-0.5 w-3 h-3 text-text-destructive' />
+                    <RiErrorWarningFill className='absolute -right-0.5 -bottom-0.5 z-10 w-3 h-3 text-text-destructive' />
                     <CardIcon
                       size='tiny'
                       src={getIconUrl(errorPlugin.icon)}

web/app/components/plugins/types.ts

@@ -107,7 +107,7 @@ export type PluginDetail = {
 }
 
 export type Plugin = {
-  type: PluginType
+  type: 'plugin' | 'bundle'
   org: string
   name: string
   plugin_id: string

web/app/components/workflow/nodes/tool/components/input-var-list.tsx

@@ -46,9 +46,7 @@ const InputVarList: FC<Props> = ({
   const paramType = (type: string) => {
     if (type === FormTypeEnum.textNumber)
       return 'Number'
-    else if (type === FormTypeEnum.file)
-      return 'File'
-    else if (type === FormTypeEnum.files)
+    else if (type === FormTypeEnum.file || type === FormTypeEnum.files)
       return 'Files'
     else if (type === FormTypeEnum.select)
       return 'Options'
@@ -141,9 +139,8 @@ const InputVarList: FC<Props> = ({
           const varInput = value[variable]
           const isNumber = type === FormTypeEnum.textNumber
           const isSelect = type === FormTypeEnum.select
-          const isFile = type === FormTypeEnum.file
-          const isFileArray = type === FormTypeEnum.files
-          const isString = !isNumber && !isSelect && !isFile && !isFileArray
+          const isFile = type === FormTypeEnum.file || type === FormTypeEnum.files
+          const isString = !isNumber && !isSelect && !isFile
 
           return (
             <div key={variable} className='space-y-1'>
@@ -188,19 +185,7 @@ const InputVarList: FC<Props> = ({
                   onChange={handleFileChange(variable)}
                   onOpen={handleOpen(index)}
                   defaultVarKindType={VarKindType.variable}
-                  filterVar={(varPayload: Var) => varPayload.type === VarType.file}
-                />
-              )}
-              {isFileArray && (
-                <VarReferencePicker
-                  readonly={readOnly}
-                  isShowNodeName
-                  nodeId={nodeId}
-                  value={varInput?.value || []}
-                  onChange={handleFileChange(variable)}
-                  onOpen={handleOpen(index)}
-                  defaultVarKindType={VarKindType.variable}
-                  filterVar={(varPayload: Var) => varPayload.type === VarType.arrayFile}
+                  filterVar={(varPayload: Var) => varPayload.type === VarType.file || varPayload.type === VarType.arrayFile}
                 />
               )}
               {tooltip && <div className='text-text-tertiary body-xs-regular'>{tooltip[language] || tooltip.en_US}</div>}