Initial commit

dify_1.0.1/web/app/components/plugins/base/badges/icon-with-tooltip.tsx

@@ -0,0 +1,37 @@
+import React, { type FC } from 'react'
+import cn from '@/utils/classnames'
+import Tooltip from '@/app/components/base/tooltip'
+import { Theme } from '@/types/app'
+
+type IconWithTooltipProps = {
+  className?: string
+  popupContent?: string
+  theme: Theme
+  BadgeIconLight: React.ElementType
+  BadgeIconDark: React.ElementType
+}
+
+const IconWithTooltip: FC<IconWithTooltipProps> = ({
+  className,
+  theme,
+  popupContent,
+  BadgeIconLight,
+  BadgeIconDark,
+}) => {
+  const isDark = theme === Theme.dark
+  const iconClassName = cn('w-5 h-5', className)
+  const Icon = isDark ? BadgeIconDark : BadgeIconLight
+
+  return (
+    <Tooltip
+      popupClassName='p-1.5 border-[0.5px] border-[0.5px] border-components-panel-border bg-components-tooltip-bg text-text-secondary system-xs-medium'
+      popupContent={popupContent}
+    >
+      <div className='flex items-center justify-center shrink-0'>
+        <Icon className={iconClassName} />
+      </div>
+    </Tooltip>
+  )
+}
+
+export default React.memo(IconWithTooltip)

dify_1.0.1/web/app/components/plugins/base/badges/partner.tsx

@@ -0,0 +1,29 @@
+import type { FC } from 'react'
+import IconWithTooltip from './icon-with-tooltip'
+import PartnerDark from '@/app/components/base/icons/src/public/plugins/PartnerDark'
+import PartnerLight from '@/app/components/base/icons/src/public/plugins/PartnerLight'
+import useTheme from '@/hooks/use-theme'
+
+type PartnerProps = {
+  className?: string
+  text: string
+}
+
+const Partner: FC<PartnerProps> = ({
+  className,
+  text,
+}) => {
+  const { theme } = useTheme()
+
+  return (
+    <IconWithTooltip
+      className={className}
+      theme={theme}
+      BadgeIconLight={PartnerLight}
+      BadgeIconDark={PartnerDark}
+      popupContent={text}
+    />
+  )
+}
+
+export default Partner

dify_1.0.1/web/app/components/plugins/base/badges/verified.tsx

@@ -0,0 +1,29 @@
+import type { FC } from 'react'
+import IconWithTooltip from './icon-with-tooltip'
+import VerifiedDark from '@/app/components/base/icons/src/public/plugins/VerifiedDark'
+import VerifiedLight from '@/app/components/base/icons/src/public/plugins/VerifiedLight'
+import useTheme from '@/hooks/use-theme'
+
+type VerifiedProps = {
+  className?: string
+  text: string
+}
+
+const Verified: FC<VerifiedProps> = ({
+  className,
+  text,
+}) => {
+  const { theme } = useTheme()
+
+  return (
+    <IconWithTooltip
+      className={className}
+      theme={theme}
+      BadgeIconLight={VerifiedLight}
+      BadgeIconDark={VerifiedDark}
+      popupContent={text}
+    />
+  )
+}
+
+export default Verified

dify_1.0.1/web/app/components/plugins/base/key-value-item.tsx

@@ -0,0 +1,66 @@
+'use client'
+import type { FC } from 'react'
+import React, { useCallback, useEffect, useState } from 'react'
+import copy from 'copy-to-clipboard'
+import {
+  RiClipboardLine,
+} from '@remixicon/react'
+import { useTranslation } from 'react-i18next'
+import { ClipboardCheck } from '../../base/icons/src/vender/line/files'
+import Tooltip from '../../base/tooltip'
+import cn from '@/utils/classnames'
+import ActionButton from '@/app/components/base/action-button'
+
+type Props = {
+  label: string
+  labelWidthClassName?: string
+  value: string
+  maskedValue?: string
+  valueMaxWidthClassName?: string
+}
+
+const KeyValueItem: FC<Props> = ({
+  label,
+  labelWidthClassName = 'w-10',
+  value,
+  maskedValue,
+  valueMaxWidthClassName = 'max-w-[162px]',
+}) => {
+  const { t } = useTranslation()
+  const [isCopied, setIsCopied] = useState(false)
+  const handleCopy = useCallback(() => {
+    copy(value)
+    setIsCopied(true)
+  }, [value])
+
+  useEffect(() => {
+    if (isCopied) {
+      const timer = setTimeout(() => {
+        setIsCopied(false)
+      }, 2000)
+      return () => {
+        clearTimeout(timer)
+      }
+    }
+  }, [isCopied])
+
+  const CopyIcon = isCopied ? ClipboardCheck : RiClipboardLine
+
+  return (
+    <div className='flex items-center gap-1'>
+      <span className={cn('flex flex-col justify-center items-start text-text-tertiary system-xs-medium', labelWidthClassName)}>{label}</span>
+      <div className='flex justify-center items-center gap-0.5'>
+        <span className={cn(valueMaxWidthClassName, ' truncate system-xs-medium text-text-secondary')}>
+          {maskedValue || value}
+        </span>
+        <Tooltip popupContent={t(`common.operation.${isCopied ? 'copied' : 'copy'}`)} position='top'>
+          <ActionButton onClick={handleCopy}>
+            <CopyIcon className='shrink-0 w-3.5 h-3.5 text-text-tertiary' />
+          </ActionButton>
+        </Tooltip>
+      </div>
+    </div>
+  )
+}
+
+export default React.memo(KeyValueItem)

dify_1.0.1/web/app/components/plugins/card/base/card-icon.tsx

@@ -0,0 +1,66 @@
+import { RiCheckLine, RiCloseLine } from '@remixicon/react'
+import AppIcon from '@/app/components/base/app-icon'
+import cn from '@/utils/classnames'
+
+const iconSizeMap = {
+  xs: 'w-4 h-4 text-base',
+  tiny: 'w-6 h-6 text-base',
+  small: 'w-8 h-8',
+  medium: 'w-9 h-9',
+  large: 'w-10 h-10',
+}
+const Icon = ({
+  className,
+  src,
+  installed = false,
+  installFailed = false,
+  size = 'large',
+}: {
+  className?: string
+  src: string | {
+    content: string
+    background: string
+  }
+  installed?: boolean
+  installFailed?: boolean
+  size?: 'xs' | 'tiny' | 'small' | 'medium' | 'large'
+}) => {
+  const iconClassName = 'flex justify-center items-center gap-2 absolute bottom-[-4px] right-[-4px] w-[18px] h-[18px] rounded-full border-2 border-components-panel-bg'
+  if (typeof src === 'object') {
+    return (
+      <div className={cn('relative', className)}>
+        <AppIcon
+          size={size}
+          iconType={'emoji'}
+          icon={src.content}
+          background={src.background}
+          className='rounded-md'
+        />
+      </div>
+    )
+  }
+
+  return (
+    <div
+      className={cn('shrink-0 relative rounded-md bg-center bg-no-repeat bg-contain', iconSizeMap[size], className)}
+      style={{
+        backgroundImage: `url(${src})`,
+      }}
+    >
+      {
+        installed
+        && <div className={cn(iconClassName, 'bg-state-success-solid')}>
+          <RiCheckLine className='w-3 h-3 text-text-primary-on-surface' />
+        </div>
+      }
+      {
+        installFailed
+        && <div className={cn(iconClassName, 'bg-state-destructive-solid')}>
+          <RiCloseLine className='w-3 h-3 text-text-primary-on-surface' />
+        </div>
+      }
+    </div>
+  )
+}
+
+export default Icon

dify_1.0.1/web/app/components/plugins/card/base/corner-mark.tsx

@@ -0,0 +1,12 @@
+import { LeftCorner } from '../../../base/icons/src/vender/plugin'
+
+const CornerMark = ({ text }: { text: string }) => {
+  return (
+    <div className='absolute top-0 right-0 flex pl-[13px] '>
+      <LeftCorner className="text-background-section" />
+      <div className="h-5 leading-5 rounded-tr-xl pr-2 bg-background-section text-text-tertiary system-2xs-medium-uppercase">{text}</div>
+    </div>
+  )
+}
+
+export default CornerMark

dify_1.0.1/web/app/components/plugins/card/base/description.tsx

@@ -0,0 +1,31 @@
+import type { FC } from 'react'
+import React, { useMemo } from 'react'
+import cn from '@/utils/classnames'
+
+type Props = {
+  className?: string
+  text: string
+  descriptionLineRows: number
+}
+
+const Description: FC<Props> = ({
+  className,
+  text,
+  descriptionLineRows,
+}) => {
+  const lineClassName = useMemo(() => {
+    if (descriptionLineRows === 1)
+      return 'h-4 truncate'
+    else if (descriptionLineRows === 2)
+      return 'h-8 line-clamp-2'
+    else
+      return 'h-12 line-clamp-3'
+  }, [descriptionLineRows])
+  return (
+    <div className={cn('text-text-tertiary system-xs-regular', lineClassName, className)}>
+      {text}
+    </div>
+  )
+}
+
+export default Description

dify_1.0.1/web/app/components/plugins/card/base/download-count.tsx

@@ -0,0 +1,19 @@
+import { RiInstallLine } from '@remixicon/react'
+import { formatNumber } from '@/utils/format'
+
+type Props = {
+  downloadCount: number
+}
+
+const DownloadCount = ({
+  downloadCount,
+}: Props) => {
+  return (
+    <div className="flex items-center space-x-1 text-text-tertiary">
+      <RiInstallLine className="shrink-0 w-3 h-3" />
+      <div className="system-xs-regular">{formatNumber(downloadCount)}</div>
+    </div>
+  )
+}
+
+export default DownloadCount

dify_1.0.1/web/app/components/plugins/card/base/org-info.tsx

@@ -0,0 +1,30 @@
+import cn from '@/utils/classnames'
+type Props = {
+  className?: string
+  orgName?: string
+  packageName: string
+  packageNameClassName?: string
+}
+
+const OrgInfo = ({
+  className,
+  orgName,
+  packageName,
+  packageNameClassName,
+}: Props) => {
+  return (
+    <div className={cn('flex items-center h-4 space-x-0.5', className)}>
+      {orgName && (
+        <>
+          <span className='shrink-0 text-text-tertiary system-xs-regular'>{orgName}</span>
+          <span className='shrink-0 text-text-quaternary system-xs-regular'>/</span>
+        </>
+      )}
+      <span className={cn('shrink-0 w-0 grow truncate text-text-tertiary system-xs-regular', packageNameClassName)}>
+        {packageName}
+      </span>
+    </div>
+  )
+}
+
+export default OrgInfo

dify_1.0.1/web/app/components/plugins/card/base/placeholder.tsx

@@ -0,0 +1,51 @@
+import { Group } from '../../../base/icons/src/vender/other'
+import Title from './title'
+import { SkeletonContainer, SkeletonPoint, SkeletonRectangle, SkeletonRow } from '@/app/components/base/skeleton'
+import cn from '@/utils/classnames'
+
+type Props = {
+  wrapClassName: string
+  loadingFileName?: string
+}
+
+export const LoadingPlaceholder = ({ className }: { className?: string }) => (
+  <div className={cn('h-2 rounded-sm opacity-20 bg-text-quaternary', className)} />
+)
+
+const Placeholder = ({
+  wrapClassName,
+  loadingFileName,
+}: Props) => {
+  return (
+    <div className={wrapClassName}>
+      <SkeletonRow>
+        <div
+          className='flex w-10 h-10 p-1 justify-center items-center gap-2 rounded-[10px]
+              border-[0.5px] border-components-panel-border bg-background-default backdrop-blur-sm'>
+          <div className='flex w-5 h-5 justify-center items-center'>
+            <Group className='text-text-tertiary' />
+          </div>
+        </div>
+        <div className="grow">
+          <SkeletonContainer>
+            <div className="flex items-center h-5">
+              {loadingFileName ? (
+                <Title title={loadingFileName} />
+              ) : (
+                <SkeletonRectangle className="w-[260px]" />
+              )}
+            </div>
+            <SkeletonRow className="h-4">
+              <SkeletonRectangle className="w-[41px]" />
+              <SkeletonPoint />
+              <SkeletonRectangle className="w-[180px]" />
+            </SkeletonRow>
+          </SkeletonContainer>
+        </div>
+      </SkeletonRow>
+      <SkeletonRectangle className="mt-3 w-[420px]" />
+    </div>
+  )
+}
+
+export default Placeholder

dify_1.0.1/web/app/components/plugins/card/base/title.tsx

@@ -0,0 +1,13 @@
+const Title = ({
+  title,
+}: {
+  title: string
+}) => {
+  return (
+    <div className='truncate text-text-secondary system-md-semibold'>
+      {title}
+    </div>
+  )
+}
+
+export default Title

dify_1.0.1/web/app/components/plugins/card/card-more-info.tsx

@@ -0,0 +1,36 @@
+import DownloadCount from './base/download-count'
+
+type Props = {
+  downloadCount?: number
+  tags: string[]
+}
+
+const CardMoreInfo = ({
+  downloadCount,
+  tags,
+}: Props) => {
+  return (
+    <div className="flex items-center h-5">
+      {downloadCount !== undefined && <DownloadCount downloadCount={downloadCount} />}
+      {downloadCount !== undefined && tags && tags.length > 0 && <div className="mx-2 text-text-quaternary system-xs-regular">·</div>}
+      {tags && tags.length > 0 && (
+        <>
+          <div className="flex flex-wrap space-x-2 h-4 overflow-hidden">
+            {tags.map(tag => (
+              <div
+                key={tag}
+                className="flex space-x-1 system-xs-regular max-w-[120px] overflow-hidden"
+                title={`# ${tag}`}
+              >
+                <span className="text-text-quaternary">#</span>
+                <span className="truncate text-text-tertiary">{tag}</span>
+              </div>
+            ))}
+          </div>
+        </>
+      )}
+    </div>
+  )
+}
+
+export default CardMoreInfo

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

@@ -0,0 +1,97 @@
+'use client'
+import React from 'react'
+import type { Plugin } from '../types'
+import Icon from '../card/base/card-icon'
+import CornerMark from './base/corner-mark'
+import Title from './base/title'
+import OrgInfo from './base/org-info'
+import Description from './base/description'
+import Placeholder from './base/placeholder'
+import cn from '@/utils/classnames'
+import { useGetLanguage } from '@/context/i18n'
+import { getLanguage } from '@/i18n/language'
+import { useSingleCategories } from '../hooks'
+import { renderI18nObject } from '@/hooks/use-i18n'
+import { useMixedTranslation } from '@/app/components/plugins/marketplace/hooks'
+import Partner from '../base/badges/partner'
+import Verified from '../base/badges/verified'
+
+export type Props = {
+  className?: string
+  payload: Plugin
+  titleLeft?: React.ReactNode
+  installed?: boolean
+  installFailed?: boolean
+  hideCornerMark?: boolean
+  descriptionLineRows?: number
+  footer?: React.ReactNode
+  isLoading?: boolean
+  loadingFileName?: string
+  locale?: string
+}
+
+const Card = ({
+  className,
+  payload,
+  titleLeft,
+  installed,
+  installFailed,
+  hideCornerMark,
+  descriptionLineRows = 2,
+  footer,
+  isLoading = false,
+  loadingFileName,
+  locale: localeFromProps,
+}: Props) => {
+  const defaultLocale = useGetLanguage()
+  const locale = localeFromProps ? getLanguage(localeFromProps) : defaultLocale
+  const { t } = useMixedTranslation(localeFromProps)
+  const { categoriesMap } = useSingleCategories(t)
+  const { category, type, name, org, label, brief, icon, verified, badges = [] } = payload
+  const isBundle = !['plugin', 'model', 'tool', 'extension', 'agent-strategy'].includes(type)
+  const cornerMark = isBundle ? categoriesMap.bundle?.label : categoriesMap[category]?.label
+  const getLocalizedText = (obj: Record<string, string> | undefined) =>
+    obj ? renderI18nObject(obj, locale) : ''
+  const isPartner = badges.includes('partner')
+
+  const wrapClassName = cn('relative p-4 pb-3 border-[0.5px] border-components-panel-border bg-components-panel-on-panel-item-bg hover-bg-components-panel-on-panel-item-bg rounded-xl shadow-xs', className)
+  if (isLoading) {
+    return (
+      <Placeholder
+        wrapClassName={wrapClassName}
+        loadingFileName={loadingFileName!}
+      />
+    )
+  }
+
+  return (
+    <div className={wrapClassName}>
+      {!hideCornerMark && <CornerMark text={cornerMark} />}
+      {/* Header */}
+      <div className="flex">
+        <Icon src={icon} installed={installed} installFailed={installFailed} />
+        <div className="ml-3 w-0 grow">
+          <div className="flex items-center h-5">
+            <Title title={getLocalizedText(label)} />
+            {isPartner && <Partner className='w-4 h-4 ml-0.5' text={t('plugin.marketplace.partnerTip')} />}
+            {verified && <Verified className='w-4 h-4 ml-0.5' text={t('plugin.marketplace.verifiedTip')} />}
+            {titleLeft} {/* This can be version badge */}
+          </div>
+          <OrgInfo
+            className="mt-0.5"
+            orgName={org}
+            packageName={name}
+          />
+        </div>
+      </div>
+      <Description
+        className="mt-3"
+        text={getLocalizedText(brief)}
+        descriptionLineRows={descriptionLineRows}
+      />
+      {footer && <div>{footer}</div>}
+    </div>
+  )
+}
+
+export default React.memo(Card)

dify_1.0.1/web/app/components/plugins/constants.ts

@@ -0,0 +1,27 @@
+export const tagKeys = [
+  'agent',
+  'search',
+  'image',
+  'videos',
+  'weather',
+  'finance',
+  'design',
+  'travel',
+  'social',
+  'news',
+  'medical',
+  'productivity',
+  'education',
+  'business',
+  'entertainment',
+  'utilities',
+  'other',
+]
+
+export const categoryKeys = [
+  'model',
+  'tool',
+  'agent-strategy',
+  'extension',
+  'bundle',
+]

dify_1.0.1/web/app/components/plugins/hooks.ts

@@ -0,0 +1,94 @@
+import { useTranslation } from 'react-i18next'
+import type { TFunction } from 'i18next'
+import {
+  categoryKeys,
+  tagKeys,
+} from './constants'
+
+type Tag = {
+  name: string
+  label: string
+}
+
+export const useTags = (translateFromOut?: TFunction) => {
+  const { t: translation } = useTranslation()
+  const t = translateFromOut || translation
+
+  const tags = tagKeys.map((tag) => {
+    return {
+      name: tag,
+      label: t(`pluginTags.tags.${tag}`),
+    }
+  })
+
+  const tagsMap = tags.reduce((acc, tag) => {
+    acc[tag.name] = tag
+    return acc
+  }, {} as Record<string, Tag>)
+
+  return {
+    tags,
+    tagsMap,
+  }
+}
+
+type Category = {
+  name: string
+  label: string
+}
+
+export const useCategories = (translateFromOut?: TFunction) => {
+  const { t: translation } = useTranslation()
+  const t = translateFromOut || translation
+
+  const categories = categoryKeys.map((category) => {
+    if (category === 'agent-strategy') {
+      return {
+        name: 'agent-strategy',
+        label: t('plugin.category.agents'),
+      }
+    }
+    return {
+      name: category,
+      label: t(`plugin.category.${category}s`),
+    }
+  })
+
+  const categoriesMap = categories.reduce((acc, category) => {
+    acc[category.name] = category
+    return acc
+  }, {} as Record<string, Category>)
+
+  return {
+    categories,
+    categoriesMap,
+  }
+}
+
+export const useSingleCategories = (translateFromOut?: TFunction) => {
+  const { t: translation } = useTranslation()
+  const t = translateFromOut || translation
+
+  const categories = categoryKeys.map((category) => {
+    if (category === 'agent-strategy') {
+      return {
+        name: 'agent-strategy',
+        label: t('plugin.categorySingle.agent'),
+      }
+    }
+    return {
+      name: category,
+      label: t(`plugin.categorySingle.${category}`),
+    }
+  })
+
+  const categoriesMap = categories.reduce((acc, category) => {
+    acc[category.name] = category
+    return acc
+  }, {} as Record<string, Category>)
+
+  return {
+    categories,
+    categoriesMap,
+  }
+}

dify_1.0.1/web/app/components/plugins/install-plugin/base/check-task-status.ts

@@ -0,0 +1,63 @@
+import { checkTaskStatus as fetchCheckTaskStatus } from '@/service/plugins'
+import type { PluginStatus } from '../../types'
+import { TaskStatus } from '../../types'
+import { sleep } from '@/utils'
+
+const INTERVAL = 10 * 1000 // 10 seconds
+
+type Params = {
+  taskId: string
+  pluginUniqueIdentifier: string
+}
+
+function checkTaskStatus() {
+  let nextStatus = TaskStatus.running
+  let isStop = false
+
+  const doCheckStatus = async ({
+    taskId,
+    pluginUniqueIdentifier,
+  }: Params) => {
+    if (isStop) {
+      return {
+        status: TaskStatus.success,
+      }
+    }
+    const res = await fetchCheckTaskStatus(taskId)
+    const { plugins } = res.task
+    const plugin = plugins.find((p: PluginStatus) => p.plugin_unique_identifier === pluginUniqueIdentifier)
+    if (!plugin) {
+      nextStatus = TaskStatus.failed
+      return {
+        status: TaskStatus.failed,
+        error: 'Plugin package not found',
+      }
+    }
+    nextStatus = plugin.status
+    if (nextStatus === TaskStatus.running) {
+      await sleep(INTERVAL)
+      return await doCheckStatus({
+        taskId,
+        pluginUniqueIdentifier,
+      })
+    }
+    if (nextStatus === TaskStatus.failed) {
+      return {
+        status: TaskStatus.failed,
+        error: plugin.message,
+      }
+    }
+    return ({
+      status: TaskStatus.success,
+    })
+  }
+
+  return {
+    check: doCheckStatus,
+    stop: () => {
+      isStop = true
+    },
+  }
+}
+
+export default checkTaskStatus

dify_1.0.1/web/app/components/plugins/install-plugin/base/installed.tsx

@@ -0,0 +1,60 @@
+'use client'
+import type { FC } from 'react'
+import React from 'react'
+import { useTranslation } from 'react-i18next'
+import Card from '../../card'
+import Button from '@/app/components/base/button'
+import type { Plugin, PluginDeclaration, PluginManifestInMarket } from '../../types'
+import { pluginManifestInMarketToPluginProps, pluginManifestToCardPluginProps } from '../utils'
+import Badge, { BadgeState } from '@/app/components/base/badge/index'
+
+type Props = {
+  payload?: Plugin | PluginDeclaration | PluginManifestInMarket | null
+  isMarketPayload?: boolean
+  isFailed: boolean
+  errMsg?: string | null
+  onCancel: () => void
+}
+
+const Installed: FC<Props> = ({
+  payload,
+  isMarketPayload,
+  isFailed,
+  errMsg,
+  onCancel,
+}) => {
+  const { t } = useTranslation()
+
+  const handleClose = () => {
+    onCancel()
+  }
+  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>
+        {payload && (
+          <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={isMarketPayload ? pluginManifestInMarketToPluginProps(payload as PluginManifestInMarket) : pluginManifestToCardPluginProps(payload as PluginDeclaration)}
+              installed={!isFailed}
+              installFailed={isFailed}
+              titleLeft={<Badge className='mx-1' size="s" state={BadgeState.Default}>{(payload as PluginDeclaration).version || (payload as PluginManifestInMarket).latest_version}</Badge>}
+            />
+          </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={handleClose}
+        >
+          {t('common.operation.close')}
+        </Button>
+      </div>
+    </>
+  )
+}
+export default React.memo(Installed)

dify_1.0.1/web/app/components/plugins/install-plugin/base/loading-error.tsx

@@ -0,0 +1,45 @@
+'use client'
+import type { FC } from 'react'
+import React from 'react'
+import { Group } from '../../../base/icons/src/vender/other'
+import { LoadingPlaceholder } from '@/app/components/plugins/card/base/placeholder'
+import Checkbox from '@/app/components/base/checkbox'
+import { RiCloseLine } from '@remixicon/react'
+import { useTranslation } from 'react-i18next'
+
+const LoadingError: FC = () => {
+  const { t } = useTranslation()
+  return (
+    <div className='flex items-center space-x-2'>
+      <Checkbox
+        className='shrink-0'
+        checked={false}
+        disabled
+      />
+      <div className='grow relative p-4 pb-3 border-[0.5px] border-components-panel-border bg-components-panel-on-panel-item-bg hover-bg-components-panel-on-panel-item-bg rounded-xl shadow-xs'>
+        <div className="flex">
+          <div
+            className='relative flex w-10 h-10 p-1 justify-center items-center gap-2 rounded-[10px]
+              border-[0.5px] border-state-destructive-border bg-state-destructive-hover backdrop-blur-sm'>
+            <div className='flex w-5 h-5 justify-center items-center'>
+              <Group className='text-text-quaternary' />
+            </div>
+            <div className='absolute bottom-[-4px] right-[-4px] rounded-full border-[2px] border-components-panel-bg bg-state-destructive-solid'>
+              <RiCloseLine className='w-3 h-3 text-text-primary-on-surface' />
+            </div>
+          </div>
+          <div className="ml-3 grow">
+            <div className="flex items-center h-5 system-md-semibold text-text-destructive">
+              {t('plugin.installModal.pluginLoadError')}
+            </div>
+            <div className='mt-0.5 system-xs-regular text-text-tertiary'>
+              {t('plugin.installModal.pluginLoadErrorDesc')}
+            </div>
+          </div>
+        </div>
+        <LoadingPlaceholder className="mt-3 w-[420px]" />
+      </div>
+    </div>
+  )
+}
+export default React.memo(LoadingError)

dify_1.0.1/web/app/components/plugins/install-plugin/base/loading.tsx

@@ -0,0 +1,23 @@
+'use client'
+import React from 'react'
+import Placeholder from '../../card/base/placeholder'
+import Checkbox from '@/app/components/base/checkbox'
+
+const Loading = () => {
+  return (
+    <div className='flex items-center space-x-2'>
+      <Checkbox
+        className='shrink-0'
+        checked={false}
+        disabled
+      />
+      <div className='grow relative p-4 pb-3 border-[0.5px] border-components-panel-border bg-components-panel-on-panel-item-bg hover-bg-components-panel-on-panel-item-bg rounded-xl shadow-xs'>
+        <Placeholder
+          wrapClassName='w-full'
+        />
+      </div>
+    </div>
+  )
+}
+
+export default React.memo(Loading)

dify_1.0.1/web/app/components/plugins/install-plugin/base/use-get-icon.ts

@@ -0,0 +1,16 @@
+import { useCallback } from 'react'
+import { apiPrefix } from '@/config'
+import { useSelector } from '@/context/app-context'
+
+const useGetIcon = () => {
+  const currentWorkspace = useSelector(s => s.currentWorkspace)
+  const getIconUrl = useCallback((fileName: string) => {
+    return `${apiPrefix}/workspaces/current/plugin/icon?tenant_id=${currentWorkspace.id}&filename=${fileName}`
+  }, [currentWorkspace.id])
+
+  return {
+    getIconUrl,
+  }
+}
+
+export default useGetIcon

dify_1.0.1/web/app/components/plugins/install-plugin/base/version.tsx

@@ -0,0 +1,34 @@
+'use client'
+import type { FC } from 'react'
+import React from 'react'
+import Badge, { BadgeState } from '@/app/components/base/badge/index'
+import type { VersionProps } from '../../types'
+
+const Version: FC<VersionProps> = ({
+  hasInstalled,
+  installedVersion,
+  toInstallVersion,
+}) => {
+  return (
+    <>
+      {
+        !hasInstalled
+          ? (
+            <Badge className='mx-1' size="s" state={BadgeState.Default}>{toInstallVersion}</Badge>
+          )
+          : (
+            <>
+              <Badge className='mx-1' size="s" state={BadgeState.Warning}>
+                {`${installedVersion} -> ${toInstallVersion}`}
+              </Badge>
+              {/* <div className='flex px-0.5 justify-center items-center gap-0.5'>
+              <div className='text-text-warning system-xs-medium'>Used in 3 apps</div>
+              <RiInformation2Line className='w-4 h-4 text-text-tertiary' />
+            </div> */}
+            </>
+          )
+      }
+    </>
+  )
+}
+export default React.memo(Version)

dify_1.0.1/web/app/components/plugins/install-plugin/hooks.ts

@@ -0,0 +1,107 @@
+import Toast, { type IToastProps } from '@/app/components/base/toast'
+import { uploadGitHub } from '@/service/plugins'
+import { compareVersion, getLatestVersion } from '@/utils/semver'
+import type { GitHubRepoReleaseResponse } from '../types'
+import { GITHUB_ACCESS_TOKEN } from '@/config'
+
+const formatReleases = (releases: any) => {
+  return releases.map((release: any) => ({
+    tag_name: release.tag_name,
+    assets: release.assets.map((asset: any) => ({
+      browser_download_url: asset.browser_download_url,
+      name: asset.name,
+    })),
+  }))
+}
+
+export const useGitHubReleases = () => {
+  const fetchReleases = async (owner: string, repo: string) => {
+    try {
+      if (!GITHUB_ACCESS_TOKEN) {
+        // Fetch releases without authentication from client
+        const res = await fetch(`https://api.github.com/repos/${owner}/${repo}/releases`)
+        if (!res.ok) throw new Error('Failed to fetch repository releases')
+        const data = await res.json()
+        return formatReleases(data)
+      }
+      else {
+        // Fetch releases with authentication from server
+        const res = await fetch(`/repos/${owner}/${repo}/releases`)
+        const bodyJson = await res.json()
+        if (bodyJson.status !== 200) throw new Error(bodyJson.data.message)
+        return formatReleases(bodyJson.data)
+      }
+    }
+    catch (error) {
+      if (error instanceof Error) {
+        Toast.notify({
+          type: 'error',
+          message: error.message,
+        })
+      }
+      else {
+        Toast.notify({
+          type: 'error',
+          message: 'Failed to fetch repository releases',
+        })
+      }
+      return []
+    }
+  }
+
+  const checkForUpdates = (fetchedReleases: GitHubRepoReleaseResponse[], currentVersion: string) => {
+    let needUpdate = false
+    const toastProps: IToastProps = {
+      type: 'info',
+      message: 'No new version available',
+    }
+    if (fetchedReleases.length === 0) {
+      toastProps.type = 'error'
+      toastProps.message = 'Input releases is empty'
+      return { needUpdate, toastProps }
+    }
+    const versions = fetchedReleases.map(release => release.tag_name)
+    const latestVersion = getLatestVersion(versions)
+    try {
+      needUpdate = compareVersion(latestVersion, currentVersion) === 1
+      if (needUpdate)
+        toastProps.message = `New version available: ${latestVersion}`
+    }
+    catch {
+      needUpdate = false
+      toastProps.type = 'error'
+      toastProps.message = 'Fail to compare versions, please check the version format'
+    }
+    return { needUpdate, toastProps }
+  }
+
+  return { fetchReleases, checkForUpdates }
+}
+
+export const useGitHubUpload = () => {
+  const handleUpload = async (
+    repoUrl: string,
+    selectedVersion: string,
+    selectedPackage: string,
+    onSuccess?: (GitHubPackage: { manifest: any; unique_identifier: string }) => void,
+  ) => {
+    try {
+      const response = await uploadGitHub(repoUrl, selectedVersion, selectedPackage)
+      const GitHubPackage = {
+        manifest: response.manifest,
+        unique_identifier: response.unique_identifier,
+      }
+      if (onSuccess) onSuccess(GitHubPackage)
+      return GitHubPackage
+    }
+    catch (error) {
+      Toast.notify({
+        type: 'error',
+        message: 'Error uploading package',
+      })
+      throw error
+    }
+  }
+
+  return { handleUpload }
+}

dify_1.0.1/web/app/components/plugins/install-plugin/hooks/use-check-installed.tsx

@@ -0,0 +1,33 @@
+import { useCheckInstalled as useDoCheckInstalled } from '@/service/use-plugins'
+
+import { useMemo } from 'react'
+import type { VersionInfo } from '../../types'
+type Props = {
+  pluginIds: string[],
+  enabled: boolean
+}
+const useCheckInstalled = (props: Props) => {
+  const { data, isLoading, error } = useDoCheckInstalled(props)
+
+  const installedInfo = useMemo(() => {
+    if (!data)
+      return undefined
+
+    const res: Record<string, VersionInfo> = {}
+    data?.plugins.forEach((plugin) => {
+      res[plugin.plugin_id] = {
+        installedId: plugin.id,
+        installedVersion: plugin.declaration.version,
+        uniqueIdentifier: plugin.plugin_unique_identifier,
+      }
+    })
+    return res
+  }, [data])
+  return {
+    installedInfo,
+    isLoading,
+    error,
+  }
+}
+
+export default useCheckInstalled

dify_1.0.1/web/app/components/plugins/install-plugin/hooks/use-fold-anim-into.ts

@@ -0,0 +1,57 @@
+import { sleep } from '@/utils'
+
+const animTime = 750
+const modalClassName = 'install-modal'
+const COUNT_DOWN_TIME = 15000 // 15s
+
+function getElemCenter(elem: HTMLElement) {
+  const rect = elem.getBoundingClientRect()
+  return {
+    x: rect.left + rect.width / 2 + window.scrollX,
+    y: rect.top + rect.height / 2 + window.scrollY,
+  }
+}
+
+const useFoldAnimInto = (onClose: () => void) => {
+  let countDownRunId: number
+  const clearCountDown = () => {
+    clearTimeout(countDownRunId)
+  }
+  // modalElem fold into plugin install task btn
+  const foldIntoAnim = async () => {
+    clearCountDown()
+    const modalElem = document.querySelector(`.${modalClassName}`) as HTMLElement
+    const pluginTaskTriggerElem = document.getElementById('plugin-task-trigger') || document.querySelector('.plugins-nav-button')
+
+    if (!modalElem || !pluginTaskTriggerElem) {
+      onClose()
+      return
+    }
+
+    const modelCenter = getElemCenter(modalElem)
+    const modalElemRect = modalElem.getBoundingClientRect()
+    const pluginTaskTriggerCenter = getElemCenter(pluginTaskTriggerElem)
+    const xDiff = pluginTaskTriggerCenter.x - modelCenter.x
+    const yDiff = pluginTaskTriggerCenter.y - modelCenter.y
+    const scale = 1 / Math.max(modalElemRect.width, modalElemRect.height)
+    modalElem.style.transition = `all cubic-bezier(0.4, 0, 0.2, 1) ${animTime}ms`
+    modalElem.style.transform = `translate(${xDiff}px, ${yDiff}px) scale(${scale})`
+    await sleep(animTime)
+    onClose()
+  }
+
+  const countDownFoldIntoAnim = async () => {
+    countDownRunId = window.setTimeout(() => {
+      foldIntoAnim()
+    }, COUNT_DOWN_TIME)
+  }
+
+  return {
+    modalClassName,
+    foldIntoAnim,
+    clearCountDown,
+    countDownFoldIntoAnim,
+  }
+}
+
+export default useFoldAnimInto

dify_1.0.1/web/app/components/plugins/install-plugin/hooks/use-hide-logic.ts

@@ -0,0 +1,40 @@
+import { useCallback, useState } from 'react'
+import useFoldAnimInto from './use-fold-anim-into'
+
+const useHideLogic = (onClose: () => void) => {
+  const {
+    modalClassName,
+    foldIntoAnim: doFoldAnimInto,
+    clearCountDown,
+    countDownFoldIntoAnim,
+  } = useFoldAnimInto(onClose)
+
+  const [isInstalling, doSetIsInstalling] = useState(false)
+  const setIsInstalling = useCallback((isInstalling: boolean) => {
+    if (!isInstalling)
+      clearCountDown()
+    doSetIsInstalling(isInstalling)
+  }, [clearCountDown])
+
+  const foldAnimInto = useCallback(() => {
+    if (isInstalling) {
+      doFoldAnimInto()
+      return
+    }
+    onClose()
+  }, [doFoldAnimInto, isInstalling, onClose])
+
+  const handleStartToInstall = useCallback(() => {
+    setIsInstalling(true)
+    countDownFoldIntoAnim()
+  }, [countDownFoldIntoAnim, setIsInstalling])
+
+  return {
+    modalClassName,
+    foldAnimInto,
+    setIsInstalling,
+    handleStartToInstall,
+  }
+}
+
+export default useHideLogic

dify_1.0.1/web/app/components/plugins/install-plugin/hooks/use-refresh-plugin-list.tsx

@@ -0,0 +1,48 @@
+import { useModelList } from '@/app/components/header/account-setting/model-provider-page/hooks'
+import { ModelTypeEnum } from '@/app/components/header/account-setting/model-provider-page/declarations'
+import { useProviderContext } from '@/context/provider-context'
+import { useInvalidateInstalledPluginList } from '@/service/use-plugins'
+import { useInvalidateAllBuiltInTools, useInvalidateAllToolProviders } from '@/service/use-tools'
+import { useInvalidateStrategyProviders } from '@/service/use-strategy'
+import type { Plugin, PluginDeclaration, PluginManifestInMarket } from '../../types'
+import { PluginType } from '../../types'
+
+const useRefreshPluginList = () => {
+  const invalidateInstalledPluginList = useInvalidateInstalledPluginList()
+  const { mutate: refetchLLMModelList } = useModelList(ModelTypeEnum.textGeneration)
+  const { mutate: refetchEmbeddingModelList } = useModelList(ModelTypeEnum.textEmbedding)
+  const { mutate: refetchRerankModelList } = useModelList(ModelTypeEnum.rerank)
+  const { refreshModelProviders } = useProviderContext()
+
+  const invalidateAllToolProviders = useInvalidateAllToolProviders()
+  const invalidateAllBuiltInTools = useInvalidateAllBuiltInTools()
+
+  const invalidateStrategyProviders = useInvalidateStrategyProviders()
+  return {
+    refreshPluginList: (manifest?: PluginManifestInMarket | Plugin | PluginDeclaration | null, refreshAllType?: boolean) => {
+      // installed list
+      invalidateInstalledPluginList()
+
+      // tool page, tool select
+      if ((manifest && PluginType.tool.includes(manifest.category)) || refreshAllType) {
+        invalidateAllToolProviders()
+        invalidateAllBuiltInTools()
+        // TODO: update suggested tools. It's a function in hook useMarketplacePlugins,handleUpdatePlugins
+      }
+
+      // model select
+      if ((manifest && PluginType.model.includes(manifest.category)) || refreshAllType) {
+        refreshModelProviders()
+        refetchLLMModelList()
+        refetchEmbeddingModelList()
+        refetchRerankModelList()
+      }
+
+      // agent select
+      if ((manifest && PluginType.agent.includes(manifest.category)) || refreshAllType)
+        invalidateStrategyProviders()
+    },
+  }
+}
+
+export default useRefreshPluginList

dify_1.0.1/web/app/components/plugins/install-plugin/install-bundle/index.tsx

@@ -0,0 +1,75 @@
+'use client'
+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 ReadyToInstall from './ready-to-install'
+import { useTranslation } from 'react-i18next'
+import useHideLogic from '../hooks/use-hide-logic'
+import cn from '@/utils/classnames'
+
+const i18nPrefix = 'plugin.installModal'
+
+export enum InstallType {
+  fromLocal = 'fromLocal',
+  fromMarketplace = 'fromMarketplace',
+  fromDSL = 'fromDSL',
+}
+
+type Props = {
+  installType?: InstallType
+  fromDSLPayload: Dependency[]
+  // plugins?: PluginDeclaration[]
+  onClose: () => void
+}
+
+const InstallBundle: FC<Props> = ({
+  installType = InstallType.fromMarketplace,
+  fromDSLPayload,
+  onClose,
+}) => {
+  const { t } = useTranslation()
+  const [step, setStep] = useState<InstallStep>(installType === InstallType.fromMarketplace ? InstallStep.readyToInstall : InstallStep.uploading)
+
+  const {
+    modalClassName,
+    foldAnimInto,
+    setIsInstalling,
+    handleStartToInstall,
+  } = useHideLogic(onClose)
+
+  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])
+
+  return (
+    <Modal
+      isShow={true}
+      onClose={foldAnimInto}
+      className={cn(modalClassName, 'flex min-w-[560px] p-0 flex-col items-start rounded-2xl border-[0.5px] border-components-panel-border bg-components-panel-bg shadows-shadow-xl')}
+      closable
+    >
+      <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}
+        onStartToInstall={handleStartToInstall}
+        setIsInstalling={setIsInstalling}
+        allPlugins={fromDSLPayload}
+        onClose={onClose}
+      />
+    </Modal>
+  )
+}
+
+export default React.memo(InstallBundle)

dify_1.0.1/web/app/components/plugins/install-plugin/install-bundle/item/github-item.tsx

@@ -0,0 +1,62 @@
+'use client'
+import type { FC } from 'react'
+import React, { useEffect } from 'react'
+import type { GitHubItemAndMarketPlaceDependency, Plugin } from '../../../types'
+import { pluginManifestToCardPluginProps } from '../../utils'
+import { useUploadGitHub } from '@/service/use-plugins'
+import Loading from '../../base/loading'
+import LoadedItem from './loaded-item'
+import type { VersionProps } from '@/app/components/plugins/types'
+
+type Props = {
+  checked: boolean
+  onCheckedChange: (plugin: Plugin) => void
+  dependency: GitHubItemAndMarketPlaceDependency
+  versionInfo: VersionProps
+  onFetchedPayload: (payload: Plugin) => void
+  onFetchError: () => void
+}
+
+const Item: FC<Props> = ({
+  checked,
+  onCheckedChange,
+  dependency,
+  versionInfo,
+  onFetchedPayload,
+  onFetchError,
+}) => {
+  const info = dependency.value
+  const { data, error } = useUploadGitHub({
+    repo: info.repo!,
+    version: info.release! || info.version!,
+    package: info.packages! || info.package!,
+  })
+  const [payload, setPayload] = React.useState<Plugin | null>(null)
+  useEffect(() => {
+    if (data) {
+      const payload = {
+        ...pluginManifestToCardPluginProps(data.manifest),
+        plugin_id: data.unique_identifier,
+      }
+      onFetchedPayload(payload)
+      setPayload(payload)
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [data])
+  useEffect(() => {
+    if (error)
+      onFetchError()
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [error])
+  if (!payload) return <Loading />
+  return (
+    <LoadedItem
+      payload={payload}
+      versionInfo={versionInfo}
+      checked={checked}
+      onCheckedChange={onCheckedChange}
+    />
+  )
+}
+export default React.memo(Item)

dify_1.0.1/web/app/components/plugins/install-plugin/install-bundle/item/loaded-item.tsx

@@ -0,0 +1,51 @@
+'use client'
+import type { FC } from 'react'
+import React from 'react'
+import type { Plugin } from '../../../types'
+import Card from '../../../card'
+import Checkbox from '@/app/components/base/checkbox'
+import useGetIcon from '../../base/use-get-icon'
+import { MARKETPLACE_API_PREFIX } from '@/config'
+import Version from '../../base/version'
+import type { VersionProps } from '../../../types'
+
+type Props = {
+  checked: boolean
+  onCheckedChange: (plugin: Plugin) => void
+  payload: Plugin
+  isFromMarketPlace?: boolean
+  versionInfo: VersionProps
+}
+
+const LoadedItem: FC<Props> = ({
+  checked,
+  onCheckedChange,
+  payload,
+  isFromMarketPlace,
+  versionInfo: particleVersionInfo,
+}) => {
+  const { getIconUrl } = useGetIcon()
+  const versionInfo = {
+    ...particleVersionInfo,
+    toInstallVersion: payload.version,
+  }
+  return (
+    <div className='flex items-center space-x-2'>
+      <Checkbox
+        className='shrink-0'
+        checked={checked}
+        onCheck={() => onCheckedChange(payload)}
+      />
+      <Card
+        className='grow'
+        payload={{
+          ...payload,
+          icon: isFromMarketPlace ? `${MARKETPLACE_API_PREFIX}/plugins/${payload.org}/${payload.name}/icon` : getIconUrl(payload.icon),
+        }}
+        titleLeft={payload.version ? <Version {...versionInfo} /> : null}
+      />
+    </div>
+  )
+}
+
+export default React.memo(LoadedItem)

dify_1.0.1/web/app/components/plugins/install-plugin/install-bundle/item/marketplace-item.tsx

@@ -0,0 +1,36 @@
+'use client'
+import type { FC } from 'react'
+import React from 'react'
+import type { Plugin } from '../../../types'
+import Loading from '../../base/loading'
+import LoadedItem from './loaded-item'
+import type { VersionProps } from '@/app/components/plugins/types'
+
+type Props = {
+  checked: boolean
+  onCheckedChange: (plugin: Plugin) => void
+  payload?: Plugin
+  version: string
+  versionInfo: VersionProps
+}
+
+const MarketPlaceItem: FC<Props> = ({
+  checked,
+  onCheckedChange,
+  payload,
+  version,
+  versionInfo,
+}) => {
+  if (!payload) return <Loading />
+  return (
+    <LoadedItem
+      checked={checked}
+      onCheckedChange={onCheckedChange}
+      payload={{ ...payload, version }}
+      isFromMarketPlace
+      versionInfo={versionInfo}
+    />
+  )
+}
+
+export default React.memo(MarketPlaceItem)

dify_1.0.1/web/app/components/plugins/install-plugin/install-bundle/item/package-item.tsx

@@ -0,0 +1,41 @@
+'use client'
+import type { FC } from 'react'
+import React from 'react'
+import type { Plugin } from '../../../types'
+import type { PackageDependency } from '../../../types'
+import { pluginManifestToCardPluginProps } from '../../utils'
+import LoadedItem from './loaded-item'
+import LoadingError from '../../base/loading-error'
+import type { VersionProps } from '@/app/components/plugins/types'
+
+type Props = {
+  checked: boolean
+  onCheckedChange: (plugin: Plugin) => void
+  payload: PackageDependency
+  isFromMarketPlace?: boolean
+  versionInfo: VersionProps
+}
+
+const PackageItem: FC<Props> = ({
+  payload,
+  checked,
+  onCheckedChange,
+  isFromMarketPlace,
+  versionInfo,
+}) => {
+  if (!payload.value?.manifest)
+    return <LoadingError />
+
+  const plugin = pluginManifestToCardPluginProps(payload.value.manifest)
+  return (
+    <LoadedItem
+      payload={plugin}
+      checked={checked}
+      onCheckedChange={onCheckedChange}
+      isFromMarketPlace={isFromMarketPlace}
+      versionInfo={versionInfo}
+    />
+  )
+}
+
+export default React.memo(PackageItem)

dify_1.0.1/web/app/components/plugins/install-plugin/install-bundle/ready-to-install.tsx

@@ -0,0 +1,57 @@
+'use client'
+import type { FC } from 'react'
+import React, { useCallback, useState } from 'react'
+import { InstallStep } from '../../types'
+import Install from './steps/install'
+import Installed from './steps/installed'
+import type { Dependency, InstallStatusResponse, Plugin } from '../../types'
+
+type Props = {
+  step: InstallStep
+  onStepChange: (step: InstallStep) => void,
+  onStartToInstall: () => void
+  setIsInstalling: (isInstalling: boolean) => void
+  allPlugins: Dependency[]
+  onClose: () => void
+  isFromMarketPlace?: boolean
+}
+
+const ReadyToInstall: FC<Props> = ({
+  step,
+  onStepChange,
+  onStartToInstall,
+  setIsInstalling,
+  allPlugins,
+  onClose,
+  isFromMarketPlace,
+}) => {
+  const [installedPlugins, setInstalledPlugins] = useState<Plugin[]>([])
+  const [installStatus, setInstallStatus] = useState<InstallStatusResponse[]>([])
+  const handleInstalled = useCallback((plugins: Plugin[], installStatus: InstallStatusResponse[]) => {
+    setInstallStatus(installStatus)
+    setInstalledPlugins(plugins)
+    onStepChange(InstallStep.installed)
+    setIsInstalling(false)
+  }, [onStepChange, setIsInstalling])
+  return (
+    <>
+      {step === InstallStep.readyToInstall && (
+        <Install
+          allPlugins={allPlugins}
+          onCancel={onClose}
+          onStartToInstall={onStartToInstall}
+          onInstalled={handleInstalled}
+          isFromMarketPlace={isFromMarketPlace}
+        />
+      )}
+      {step === InstallStep.installed && (
+        <Installed
+          list={installedPlugins}
+          installStatus={installStatus}
+          onCancel={onClose}
+        />
+      )}
+    </>
+  )
+}
+export default React.memo(ReadyToInstall)

dify_1.0.1/web/app/components/plugins/install-plugin/install-bundle/steps/install-multi.tsx

@@ -0,0 +1,221 @@
+'use client'
+import type { FC } from 'react'
+import React, { useCallback, useEffect, useMemo, useState } from 'react'
+import type { Dependency, GitHubItemAndMarketPlaceDependency, PackageDependency, Plugin, VersionInfo } from '../../../types'
+import MarketplaceItem from '../item/marketplace-item'
+import GithubItem from '../item/github-item'
+import { useFetchPluginsInMarketPlaceByIds, useFetchPluginsInMarketPlaceByInfo } from '@/service/use-plugins'
+import useCheckInstalled from '@/app/components/plugins/install-plugin/hooks/use-check-installed'
+import produce from 'immer'
+import PackageItem from '../item/package-item'
+import LoadingError from '../../base/loading-error'
+
+type Props = {
+  allPlugins: Dependency[]
+  selectedPlugins: Plugin[]
+  onSelect: (plugin: Plugin, selectedIndex: number) => void
+  onLoadedAllPlugin: (installedInfo: Record<string, VersionInfo>) => void
+  isFromMarketPlace?: boolean
+}
+
+const InstallByDSLList: FC<Props> = ({
+  allPlugins,
+  selectedPlugins,
+  onSelect,
+  onLoadedAllPlugin,
+  isFromMarketPlace,
+}) => {
+  // DSL has id, to get plugin info to show more info
+  const { isLoading: isFetchingMarketplaceDataById, data: infoGetById, error: infoByIdError } = useFetchPluginsInMarketPlaceByIds(allPlugins.filter(d => d.type === 'marketplace').map(d => (d as GitHubItemAndMarketPlaceDependency).value.marketplace_plugin_unique_identifier!))
+  // has meta(org,name,version), to get id
+  const { isLoading: isFetchingDataByMeta, data: infoByMeta, error: infoByMetaError } = useFetchPluginsInMarketPlaceByInfo(allPlugins.filter(d => d.type === 'marketplace').map(d => (d as GitHubItemAndMarketPlaceDependency).value!))
+
+  const [plugins, doSetPlugins] = useState<(Plugin | undefined)[]>((() => {
+    const hasLocalPackage = allPlugins.some(d => d.type === 'package')
+    if (!hasLocalPackage)
+      return []
+
+    const _plugins = allPlugins.map((d) => {
+      if (d.type === 'package') {
+        return {
+          ...(d as any).value.manifest,
+          plugin_id: (d as any).value.unique_identifier,
+        }
+      }
+
+      return undefined
+    })
+    return _plugins
+  })())
+
+  const pluginsRef = React.useRef<(Plugin | undefined)[]>(plugins)
+
+  const setPlugins = useCallback((p: (Plugin | undefined)[]) => {
+    doSetPlugins(p)
+    pluginsRef.current = p
+  }, [])
+
+  const [errorIndexes, setErrorIndexes] = useState<number[]>([])
+
+  const handleGitHubPluginFetched = useCallback((index: number) => {
+    return (p: Plugin) => {
+      const nextPlugins = produce(pluginsRef.current, (draft) => {
+        draft[index] = p
+      })
+      setPlugins(nextPlugins)
+    }
+  }, [setPlugins])
+
+  const handleGitHubPluginFetchError = useCallback((index: number) => {
+    return () => {
+      setErrorIndexes([...errorIndexes, index])
+    }
+  }, [errorIndexes])
+
+  const marketPlaceInDSLIndex = useMemo(() => {
+    const res: number[] = []
+    allPlugins.forEach((d, index) => {
+      if (d.type === 'marketplace')
+        res.push(index)
+    })
+    return res
+  }, [allPlugins])
+
+  useEffect(() => {
+    if (!isFetchingMarketplaceDataById && infoGetById?.data.plugins) {
+      const payloads = infoGetById?.data.plugins
+      const failedIndex: number[] = []
+      const nextPlugins = produce(pluginsRef.current, (draft) => {
+        marketPlaceInDSLIndex.forEach((index, i) => {
+          if (payloads[i]) {
+            draft[index] = {
+              ...payloads[i],
+              version: payloads[i].version || payloads[i].latest_version,
+            }
+          }
+          else { failedIndex.push(index) }
+        })
+      })
+      setPlugins(nextPlugins)
+
+      if (failedIndex.length > 0)
+        setErrorIndexes([...errorIndexes, ...failedIndex])
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isFetchingMarketplaceDataById])
+
+  useEffect(() => {
+    if (!isFetchingDataByMeta && infoByMeta?.data.list) {
+      const payloads = infoByMeta?.data.list
+      const failedIndex: number[] = []
+      const nextPlugins = produce(pluginsRef.current, (draft) => {
+        marketPlaceInDSLIndex.forEach((index, i) => {
+          if (payloads[i]) {
+            const item = payloads[i]
+            draft[index] = {
+              ...item.plugin,
+              plugin_id: item.version.unique_identifier,
+            }
+          }
+          else {
+            failedIndex.push(index)
+          }
+        })
+      })
+      setPlugins(nextPlugins)
+      if (failedIndex.length > 0)
+        setErrorIndexes([...errorIndexes, ...failedIndex])
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isFetchingDataByMeta])
+
+  useEffect(() => {
+    // get info all failed
+    if (infoByMetaError || infoByIdError)
+      setErrorIndexes([...errorIndexes, ...marketPlaceInDSLIndex])
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [infoByMetaError, infoByIdError])
+
+  const isLoadedAllData = (plugins.filter(p => !!p).length + errorIndexes.length) === allPlugins.length
+
+  const { installedInfo } = useCheckInstalled({
+    pluginIds: plugins?.filter(p => !!p).map((d) => {
+      return `${d?.org || d?.author}/${d?.name}`
+    }) || [],
+    enabled: isLoadedAllData,
+  })
+
+  const getVersionInfo = useCallback((pluginId: string) => {
+    const pluginDetail = installedInfo?.[pluginId]
+    const hasInstalled = !!pluginDetail
+    return {
+      hasInstalled,
+      installedVersion: pluginDetail?.installedVersion,
+      toInstallVersion: '',
+    }
+  }, [installedInfo])
+
+  useEffect(() => {
+    if (isLoadedAllData && installedInfo)
+      onLoadedAllPlugin(installedInfo!)
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isLoadedAllData, installedInfo])
+
+  const handleSelect = useCallback((index: number) => {
+    return () => {
+      onSelect(plugins[index]!, index)
+    }
+  }, [onSelect, plugins])
+  return (
+    <>
+      {allPlugins.map((d, index) => {
+        if (errorIndexes.includes(index)) {
+          return (
+            <LoadingError key={index} />
+          )
+        }
+        const plugin = plugins[index]
+        if (d.type === 'github') {
+          return (<GithubItem
+            key={index}
+            checked={!!selectedPlugins.find(p => p.plugin_id === plugins[index]?.plugin_id)}
+            onCheckedChange={handleSelect(index)}
+            dependency={d as GitHubItemAndMarketPlaceDependency}
+            onFetchedPayload={handleGitHubPluginFetched(index)}
+            onFetchError={handleGitHubPluginFetchError(index)}
+            versionInfo={getVersionInfo(`${plugin?.org || plugin?.author}/${plugin?.name}`)}
+          />)
+        }
+
+        if (d.type === 'marketplace') {
+          return (
+            <MarketplaceItem
+              key={index}
+              checked={!!selectedPlugins.find(p => p.plugin_id === plugins[index]?.plugin_id)}
+              onCheckedChange={handleSelect(index)}
+              payload={plugin}
+              version={(d as GitHubItemAndMarketPlaceDependency).value.version! || plugin?.version || ''}
+              versionInfo={getVersionInfo(`${plugin?.org || plugin?.author}/${plugin?.name}`)}
+            />
+          )
+        }
+
+        // Local package
+        return (
+          <PackageItem
+            key={index}
+            checked={!!selectedPlugins.find(p => p.plugin_id === plugins[index]?.plugin_id)}
+            onCheckedChange={handleSelect(index)}
+            payload={d as PackageDependency}
+            isFromMarketPlace={isFromMarketPlace}
+            versionInfo={getVersionInfo(`${plugin?.org || plugin?.author}/${plugin?.name}`)}
+          />
+        )
+      })
+      }
+    </>
+  )
+}
+export default React.memo(InstallByDSLList)

dify_1.0.1/web/app/components/plugins/install-plugin/install-bundle/steps/install.tsx

@@ -0,0 +1,116 @@
+'use client'
+import type { FC } from 'react'
+import React, { useCallback, useState } from 'react'
+import type { Dependency, InstallStatusResponse, Plugin, VersionInfo } from '../../../types'
+import Button from '@/app/components/base/button'
+import { RiLoader2Line } from '@remixicon/react'
+import { useTranslation } from 'react-i18next'
+import InstallMulti from './install-multi'
+import { useInstallOrUpdate } from '@/service/use-plugins'
+import useRefreshPluginList from '../../hooks/use-refresh-plugin-list'
+const i18nPrefix = 'plugin.installModal'
+
+type Props = {
+  allPlugins: Dependency[]
+  onStartToInstall?: () => void
+  onInstalled: (plugins: Plugin[], installStatus: InstallStatusResponse[]) => void
+  onCancel: () => void
+  isFromMarketPlace?: boolean
+  isHideButton?: boolean
+}
+
+const Install: FC<Props> = ({
+  allPlugins,
+  onStartToInstall,
+  onInstalled,
+  onCancel,
+  isFromMarketPlace,
+  isHideButton,
+}) => {
+  const { t } = useTranslation()
+  const [selectedPlugins, setSelectedPlugins] = React.useState<Plugin[]>([])
+  const [selectedIndexes, setSelectedIndexes] = React.useState<number[]>([])
+  const selectedPluginsNum = selectedPlugins.length
+  const { refreshPluginList } = useRefreshPluginList()
+  const handleSelect = (plugin: Plugin, selectedIndex: number) => {
+    const isSelected = !!selectedPlugins.find(p => p.plugin_id === plugin.plugin_id)
+    let nextSelectedPlugins
+    if (isSelected)
+      nextSelectedPlugins = selectedPlugins.filter(p => p.plugin_id !== plugin.plugin_id)
+    else
+      nextSelectedPlugins = [...selectedPlugins, plugin]
+    setSelectedPlugins(nextSelectedPlugins)
+    const nextSelectedIndexes = isSelected ? selectedIndexes.filter(i => i !== selectedIndex) : [...selectedIndexes, selectedIndex]
+    setSelectedIndexes(nextSelectedIndexes)
+  }
+
+  const [canInstall, setCanInstall] = React.useState(false)
+  const [installedInfo, setInstalledInfo] = useState<Record<string, VersionInfo> | undefined>(undefined)
+
+  const handleLoadedAllPlugin = useCallback((installedInfo: Record<string, VersionInfo> | undefined) => {
+    setInstalledInfo(installedInfo)
+    setCanInstall(true)
+  }, [])
+
+  // Install from marketplace and github
+  const { mutate: installOrUpdate, isPending: isInstalling } = useInstallOrUpdate({
+    onSuccess: (res: InstallStatusResponse[]) => {
+      onInstalled(selectedPlugins, res.map((r, i) => {
+        return ({
+          ...r,
+          isFromMarketPlace: allPlugins[selectedIndexes[i]].type === 'marketplace',
+        })
+      }))
+      const hasInstallSuccess = res.some(r => r.success)
+      if (hasInstallSuccess)
+        refreshPluginList(undefined, true)
+    },
+  })
+  const handleInstall = () => {
+    onStartToInstall?.()
+    installOrUpdate({
+      payload: allPlugins.filter((_d, index) => selectedIndexes.includes(index)),
+      plugin: selectedPlugins,
+      installedInfo: installedInfo!,
+    })
+  }
+  return (
+    <>
+      <div className='flex flex-col px-6 py-3 justify-center items-start gap-4 self-stretch'>
+        <div className='text-text-secondary system-md-regular'>
+          <p>{t(`${i18nPrefix}.${selectedPluginsNum > 1 ? 'readyToInstallPackages' : 'readyToInstallPackage'}`, { num: selectedPluginsNum })}</p>
+        </div>
+        <div className='w-full p-2 rounded-2xl bg-background-section-burn space-y-1'>
+          <InstallMulti
+            allPlugins={allPlugins}
+            selectedPlugins={selectedPlugins}
+            onSelect={handleSelect}
+            onLoadedAllPlugin={handleLoadedAllPlugin}
+            isFromMarketPlace={isFromMarketPlace}
+          />
+        </div>
+      </div>
+      {/* Action Buttons */}
+      {!isHideButton && (
+        <div className='flex p-6 pt-5 justify-end items-center gap-2 self-stretch'>
+          {!canInstall && (
+            <Button variant='secondary' className='min-w-[72px]' onClick={onCancel}>
+              {t('common.operation.cancel')}
+            </Button>
+          )}
+          <Button
+            variant='primary'
+            className='min-w-[72px] flex space-x-0.5'
+            disabled={!canInstall || isInstalling || selectedPlugins.length === 0}
+            onClick={handleInstall}
+          >
+            {isInstalling && <RiLoader2Line className='w-4 h-4 animate-spin-slow' />}
+            <span>{t(`${i18nPrefix}.${isInstalling ? 'installing' : 'install'}`)}</span>
+          </Button>
+        </div>
+      )}
+
+    </>
+  )
+}
+export default React.memo(Install)

dify_1.0.1/web/app/components/plugins/install-plugin/install-bundle/steps/installed.tsx

@@ -0,0 +1,65 @@
+'use client'
+import type { FC } from 'react'
+import React from 'react'
+import type { InstallStatusResponse, 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'
+import { MARKETPLACE_API_PREFIX } from '@/config'
+
+type Props = {
+  list: Plugin[]
+  installStatus: InstallStatusResponse[]
+  onCancel: () => void
+  isHideButton?: boolean
+}
+
+const Installed: FC<Props> = ({
+  list,
+  installStatus,
+  onCancel,
+  isHideButton,
+}) => {
+  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: installStatus[index].isFromMarketPlace ? `${MARKETPLACE_API_PREFIX}/plugins/${plugin.org}/${plugin.name}/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 */}
+      {!isHideButton && (
+        <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)

dify_1.0.1/web/app/components/plugins/install-plugin/install-from-github/index.tsx

@@ -0,0 +1,235 @@
+'use client'
+
+import React, { useCallback, useState } from 'react'
+import Modal from '@/app/components/base/modal'
+import type { Item } from '@/app/components/base/select'
+import type { InstallState } from '@/app/components/plugins/types'
+import { useGitHubReleases } from '../hooks'
+import { convertRepoToUrl, parseGitHubUrl } from '../utils'
+import type { PluginDeclaration, UpdateFromGitHubPayload } from '../../types'
+import { InstallStepFromGitHub } from '../../types'
+import Toast from '@/app/components/base/toast'
+import SetURL from './steps/setURL'
+import SelectPackage from './steps/selectPackage'
+import Installed from '../base/installed'
+import Loaded from './steps/loaded'
+import useGetIcon from '@/app/components/plugins/install-plugin/base/use-get-icon'
+import { useTranslation } from 'react-i18next'
+import useRefreshPluginList from '../hooks/use-refresh-plugin-list'
+import cn from '@/utils/classnames'
+import useHideLogic from '../hooks/use-hide-logic'
+
+const i18nPrefix = 'plugin.installFromGitHub'
+
+type InstallFromGitHubProps = {
+  updatePayload?: UpdateFromGitHubPayload
+  onClose: () => void
+  onSuccess: () => void
+}
+
+const InstallFromGitHub: React.FC<InstallFromGitHubProps> = ({ updatePayload, onClose, onSuccess }) => {
+  const { t } = useTranslation()
+  const { getIconUrl } = useGetIcon()
+  const { fetchReleases } = useGitHubReleases()
+  const { refreshPluginList } = useRefreshPluginList()
+
+  const {
+    modalClassName,
+    foldAnimInto,
+    setIsInstalling,
+    handleStartToInstall,
+  } = useHideLogic(onClose)
+
+  const [state, setState] = useState<InstallState>({
+    step: updatePayload ? InstallStepFromGitHub.selectPackage : InstallStepFromGitHub.setUrl,
+    repoUrl: updatePayload?.originalPackageInfo?.repo
+      ? convertRepoToUrl(updatePayload.originalPackageInfo.repo)
+      : '',
+    selectedVersion: '',
+    selectedPackage: '',
+    releases: updatePayload ? updatePayload.originalPackageInfo.releases : [],
+  })
+  const [uniqueIdentifier, setUniqueIdentifier] = useState<string | null>(null)
+  const [manifest, setManifest] = useState<PluginDeclaration | null>(null)
+  const [errorMsg, setErrorMsg] = useState<string | null>(null)
+
+  const versions: Item[] = state.releases.map(release => ({
+    value: release.tag_name,
+    name: release.tag_name,
+  }))
+
+  const packages: Item[] = state.selectedVersion
+    ? (state.releases
+      .find(release => release.tag_name === state.selectedVersion)
+      ?.assets
+      .map(asset => ({
+        value: asset.name,
+        name: asset.name,
+      })) || [])
+    : []
+
+  const getTitle = useCallback(() => {
+    if (state.step === InstallStepFromGitHub.installed)
+      return t(`${i18nPrefix}.installedSuccessfully`)
+    if (state.step === InstallStepFromGitHub.installFailed)
+      return t(`${i18nPrefix}.installFailed`)
+
+    return updatePayload ? t(`${i18nPrefix}.updatePlugin`) : t(`${i18nPrefix}.installPlugin`)
+  }, [state.step, t, updatePayload])
+
+  const handleUrlSubmit = async () => {
+    const { isValid, owner, repo } = parseGitHubUrl(state.repoUrl)
+    if (!isValid || !owner || !repo) {
+      Toast.notify({
+        type: 'error',
+        message: t('plugin.error.inValidGitHubUrl'),
+      })
+      return
+    }
+    try {
+      const fetchedReleases = await fetchReleases(owner, repo)
+      if (fetchedReleases.length > 0) {
+        setState(prevState => ({
+          ...prevState,
+          releases: fetchedReleases,
+          step: InstallStepFromGitHub.selectPackage,
+        }))
+      }
+      else {
+        Toast.notify({
+          type: 'error',
+          message: t('plugin.error.noReleasesFound'),
+        })
+      }
+    }
+    catch (error) {
+      Toast.notify({
+        type: 'error',
+        message: t('plugin.error.fetchReleasesError'),
+      })
+    }
+  }
+
+  const handleError = (e: any, isInstall: boolean) => {
+    const message = e?.response?.message || t('plugin.installModal.installFailedDesc')
+    setErrorMsg(message)
+    setState(prevState => ({ ...prevState, step: isInstall ? InstallStepFromGitHub.installFailed : InstallStepFromGitHub.uploadFailed }))
+  }
+
+  const handleUploaded = async (GitHubPackage: any) => {
+    try {
+      const icon = await getIconUrl(GitHubPackage.manifest.icon)
+      setManifest({
+        ...GitHubPackage.manifest,
+        icon,
+      })
+      setUniqueIdentifier(GitHubPackage.uniqueIdentifier)
+      setState(prevState => ({ ...prevState, step: InstallStepFromGitHub.readyToInstall }))
+    }
+    catch (e) {
+      handleError(e, false)
+    }
+  }
+
+  const handleUploadFail = useCallback((errorMsg: string) => {
+    setErrorMsg(errorMsg)
+    setState(prevState => ({ ...prevState, step: InstallStepFromGitHub.uploadFailed }))
+  }, [])
+
+  const handleInstalled = useCallback((notRefresh?: boolean) => {
+    setState(prevState => ({ ...prevState, step: InstallStepFromGitHub.installed }))
+    if (!notRefresh)
+      refreshPluginList(manifest)
+    setIsInstalling(false)
+    onSuccess()
+  }, [manifest, onSuccess, refreshPluginList, setIsInstalling])
+
+  const handleFailed = useCallback((errorMsg?: string) => {
+    setState(prevState => ({ ...prevState, step: InstallStepFromGitHub.installFailed }))
+    setIsInstalling(false)
+    if (errorMsg)
+      setErrorMsg(errorMsg)
+  }, [setIsInstalling])
+
+  const handleBack = () => {
+    setState((prevState) => {
+      switch (prevState.step) {
+        case InstallStepFromGitHub.selectPackage:
+          return { ...prevState, step: InstallStepFromGitHub.setUrl }
+        case InstallStepFromGitHub.readyToInstall:
+          return { ...prevState, step: InstallStepFromGitHub.selectPackage }
+        default:
+          return prevState
+      }
+    })
+  }
+
+  return (
+    <Modal
+      isShow={true}
+      onClose={foldAnimInto}
+      className={cn(modalClassName, `flex min-w-[560px] p-0 flex-col items-start rounded-2xl border-[0.5px]
+        border-components-panel-border bg-components-panel-bg shadows-shadow-xl`)}
+      closable
+    >
+      <div className='flex pt-6 pl-6 pb-3 pr-14 items-start gap-2 self-stretch'>
+        <div className='flex flex-col items-start gap-1 grow'>
+          <div className='self-stretch text-text-primary title-2xl-semi-bold'>
+            {getTitle()}
+          </div>
+          <div className='self-stretch text-text-tertiary system-xs-regular'>
+            {!([InstallStepFromGitHub.uploadFailed, InstallStepFromGitHub.installed, InstallStepFromGitHub.installFailed].includes(state.step)) && t('plugin.installFromGitHub.installNote')}
+          </div>
+        </div>
+      </div>
+      {([InstallStepFromGitHub.uploadFailed, InstallStepFromGitHub.installed, InstallStepFromGitHub.installFailed].includes(state.step))
+        ? <Installed
+          payload={manifest}
+          isFailed={[InstallStepFromGitHub.uploadFailed, InstallStepFromGitHub.installFailed].includes(state.step)}
+          errMsg={errorMsg}
+          onCancel={onClose}
+        />
+        : <div className={`flex px-6 py-3 flex-col justify-center items-start self-stretch ${state.step === InstallStepFromGitHub.installed ? 'gap-2' : 'gap-4'}`}>
+          {state.step === InstallStepFromGitHub.setUrl && (
+            <SetURL
+              repoUrl={state.repoUrl}
+              onChange={value => setState(prevState => ({ ...prevState, repoUrl: value }))}
+              onNext={handleUrlSubmit}
+              onCancel={onClose}
+            />
+          )}
+          {state.step === InstallStepFromGitHub.selectPackage && (
+            <SelectPackage
+              updatePayload={updatePayload!}
+              repoUrl={state.repoUrl}
+              selectedVersion={state.selectedVersion}
+              versions={versions}
+              onSelectVersion={item => setState(prevState => ({ ...prevState, selectedVersion: item.value as string }))}
+              selectedPackage={state.selectedPackage}
+              packages={packages}
+              onSelectPackage={item => setState(prevState => ({ ...prevState, selectedPackage: item.value as string }))}
+              onUploaded={handleUploaded}
+              onFailed={handleUploadFail}
+              onBack={handleBack}
+            />
+          )}
+          {state.step === InstallStepFromGitHub.readyToInstall && (
+            <Loaded
+              updatePayload={updatePayload!}
+              uniqueIdentifier={uniqueIdentifier!}
+              payload={manifest as any}
+              repoUrl={state.repoUrl}
+              selectedVersion={state.selectedVersion}
+              selectedPackage={state.selectedPackage}
+              onBack={handleBack}
+              onStartToInstall={handleStartToInstall}
+              onInstalled={handleInstalled}
+              onFailed={handleFailed}
+            />
+          )}
+        </div>}
+    </Modal>
+  )
+}
+
+export default InstallFromGitHub

dify_1.0.1/web/app/components/plugins/install-plugin/install-from-github/steps/loaded.tsx

@@ -0,0 +1,180 @@
+'use client'
+
+import React, { useEffect } from 'react'
+import Button from '@/app/components/base/button'
+import { type Plugin, type PluginDeclaration, TaskStatus, type UpdateFromGitHubPayload } from '../../../types'
+import Card from '../../../card'
+import { pluginManifestToCardPluginProps } from '../../utils'
+import { useTranslation } from 'react-i18next'
+import { updateFromGitHub } from '@/service/plugins'
+import { useInstallPackageFromGitHub } from '@/service/use-plugins'
+import { RiLoader2Line } from '@remixicon/react'
+import { usePluginTaskList } from '@/service/use-plugins'
+import checkTaskStatus from '../../base/check-task-status'
+import useCheckInstalled from '@/app/components/plugins/install-plugin/hooks/use-check-installed'
+import { parseGitHubUrl } from '../../utils'
+import Version from '../../base/version'
+
+type LoadedProps = {
+  updatePayload: UpdateFromGitHubPayload
+  uniqueIdentifier: string
+  payload: PluginDeclaration | Plugin
+  repoUrl: string
+  selectedVersion: string
+  selectedPackage: string
+  onBack: () => void
+  onStartToInstall?: () => void
+  onInstalled: (notRefresh?: boolean) => void
+  onFailed: (message?: string) => void
+}
+
+const i18nPrefix = 'plugin.installModal'
+
+const Loaded: React.FC<LoadedProps> = ({
+  updatePayload,
+  uniqueIdentifier,
+  payload,
+  repoUrl,
+  selectedVersion,
+  selectedPackage,
+  onBack,
+  onStartToInstall,
+  onInstalled,
+  onFailed,
+}) => {
+  const { t } = useTranslation()
+  const toInstallVersion = payload.version
+  const pluginId = (payload as Plugin).plugin_id
+  const { installedInfo, isLoading } = useCheckInstalled({
+    pluginIds: [pluginId],
+    enabled: !!pluginId,
+  })
+  const installedInfoPayload = installedInfo?.[pluginId]
+  const installedVersion = installedInfoPayload?.installedVersion
+  const hasInstalled = !!installedVersion
+
+  const [isInstalling, setIsInstalling] = React.useState(false)
+  const { mutateAsync: installPackageFromGitHub } = useInstallPackageFromGitHub()
+  const { handleRefetch } = usePluginTaskList(payload.category)
+  const { check } = checkTaskStatus()
+
+  useEffect(() => {
+    if (hasInstalled && uniqueIdentifier === installedInfoPayload.uniqueIdentifier)
+      onInstalled()
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [hasInstalled])
+
+  const handleInstall = async () => {
+    if (isInstalling) return
+    setIsInstalling(true)
+    onStartToInstall?.()
+
+    try {
+      const { owner, repo } = parseGitHubUrl(repoUrl)
+      let taskId
+      let isInstalled
+      if (updatePayload) {
+        const { all_installed, task_id } = await updateFromGitHub(
+          `${owner}/${repo}`,
+          selectedVersion,
+          selectedPackage,
+          updatePayload.originalPackageInfo.id,
+          uniqueIdentifier,
+        )
+
+        taskId = task_id
+        isInstalled = all_installed
+      }
+      else {
+        if (hasInstalled) {
+          const {
+            all_installed,
+            task_id,
+          } = await updateFromGitHub(
+            `${owner}/${repo}`,
+            selectedVersion,
+            selectedPackage,
+            installedInfoPayload.uniqueIdentifier,
+            uniqueIdentifier,
+          )
+          taskId = task_id
+          isInstalled = all_installed
+        }
+        else {
+          const { all_installed, task_id } = await installPackageFromGitHub({
+            repoUrl: `${owner}/${repo}`,
+            selectedVersion,
+            selectedPackage,
+            uniqueIdentifier,
+          })
+
+          taskId = task_id
+          isInstalled = all_installed
+        }
+      }
+      if (isInstalled) {
+        onInstalled()
+        return
+      }
+
+      handleRefetch()
+
+      const { status, error } = await check({
+        taskId,
+        pluginUniqueIdentifier: uniqueIdentifier,
+      })
+      if (status === TaskStatus.failed) {
+        onFailed(error)
+        return
+      }
+      onInstalled(true)
+    }
+    catch (e) {
+      if (typeof e === 'string') {
+        onFailed(e)
+        return
+      }
+      onFailed()
+    }
+    finally {
+      setIsInstalling(false)
+    }
+  }
+
+  return (
+    <>
+      <div className='text-text-secondary system-md-regular'>
+        <p>{t(`${i18nPrefix}.readyToInstall`)}</p>
+      </div>
+      <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 as PluginDeclaration)}
+          titleLeft={!isLoading && <Version
+            hasInstalled={hasInstalled}
+            installedVersion={installedVersion}
+            toInstallVersion={toInstallVersion}
+          />}
+        />
+      </div>
+      <div className='flex justify-end items-center gap-2 self-stretch mt-4'>
+        {!isInstalling && (
+          <Button variant='secondary' className='min-w-[72px]' onClick={onBack}>
+            {t('plugin.installModal.back')}
+          </Button>
+        )}
+        <Button
+          variant='primary'
+          className='min-w-[72px] flex space-x-0.5'
+          onClick={handleInstall}
+          disabled={isInstalling || isLoading}
+        >
+          {isInstalling && <RiLoader2Line className='w-4 h-4 animate-spin-slow' />}
+          <span>{t(`${i18nPrefix}.${isInstalling ? 'installing' : 'install'}`)}</span>
+        </Button>
+      </div>
+    </>
+  )
+}
+
+export default Loaded

dify_1.0.1/web/app/components/plugins/install-plugin/install-from-github/steps/selectPackage.tsx

@@ -0,0 +1,125 @@
+'use client'
+
+import React from 'react'
+import type { Item } from '@/app/components/base/select'
+import { PortalSelect } from '@/app/components/base/select'
+import Button from '@/app/components/base/button'
+import type { PluginDeclaration, UpdateFromGitHubPayload } from '../../../types'
+import { useTranslation } from 'react-i18next'
+import { useGitHubUpload } from '../../hooks'
+
+const i18nPrefix = 'plugin.installFromGitHub'
+
+type SelectPackageProps = {
+  updatePayload: UpdateFromGitHubPayload
+  repoUrl: string
+  selectedVersion: string
+  versions: Item[]
+  onSelectVersion: (item: Item) => void
+  selectedPackage: string
+  packages: Item[]
+  onSelectPackage: (item: Item) => void
+  onUploaded: (result: {
+    uniqueIdentifier: string
+    manifest: PluginDeclaration
+  }) => void
+  onFailed: (errorMsg: string) => void
+  onBack: () => void
+}
+
+const SelectPackage: React.FC<SelectPackageProps> = ({
+  updatePayload,
+  repoUrl,
+  selectedVersion,
+  versions,
+  onSelectVersion,
+  selectedPackage,
+  packages,
+  onSelectPackage,
+  onUploaded,
+  onFailed,
+  onBack,
+}) => {
+  const { t } = useTranslation()
+  const isEdit = Boolean(updatePayload)
+  const [isUploading, setIsUploading] = React.useState(false)
+  const { handleUpload } = useGitHubUpload()
+
+  const handleUploadPackage = async () => {
+    if (isUploading) return
+    setIsUploading(true)
+    try {
+      const repo = repoUrl.replace('https://github.com/', '')
+      await handleUpload(repo, selectedVersion, selectedPackage, (GitHubPackage) => {
+        onUploaded({
+          uniqueIdentifier: GitHubPackage.unique_identifier,
+          manifest: GitHubPackage.manifest,
+        })
+      })
+    }
+    catch (e: any) {
+      if (e.response?.message)
+        onFailed(e.response?.message)
+      else
+        onFailed(t(`${i18nPrefix}.uploadFailed`))
+    }
+    finally {
+      setIsUploading(false)
+    }
+  }
+
+  return (
+    <>
+      <label
+        htmlFor='version'
+        className='flex flex-col justify-center items-start self-stretch text-text-secondary'
+      >
+        <span className='system-sm-semibold'>{t(`${i18nPrefix}.selectVersion`)}</span>
+      </label>
+      <PortalSelect
+        value={selectedVersion}
+        onSelect={onSelectVersion}
+        items={versions}
+        installedValue={updatePayload?.originalPackageInfo.version}
+        placeholder={t(`${i18nPrefix}.selectVersionPlaceholder`) || ''}
+        popupClassName='w-[512px] z-[1001]'
+      />
+      <label
+        htmlFor='package'
+        className='flex flex-col justify-center items-start self-stretch text-text-secondary'
+      >
+        <span className='system-sm-semibold'>{t(`${i18nPrefix}.selectPackage`)}</span>
+      </label>
+      <PortalSelect
+        value={selectedPackage}
+        onSelect={onSelectPackage}
+        items={packages}
+        readonly={!selectedVersion}
+        placeholder={t(`${i18nPrefix}.selectPackagePlaceholder`) || ''}
+        popupClassName='w-[512px] z-[1001]'
+      />
+      <div className='flex justify-end items-center gap-2 self-stretch mt-4'>
+        {!isEdit
+          && <Button
+            variant='secondary'
+            className='min-w-[72px]'
+            onClick={onBack}
+            disabled={isUploading}
+          >
+            {t('plugin.installModal.back')}
+          </Button>
+        }
+        <Button
+          variant='primary'
+          className='min-w-[72px]'
+          onClick={handleUploadPackage}
+          disabled={!selectedVersion || !selectedPackage || isUploading}
+        >
+          {t('plugin.installModal.next')}
+        </Button>
+      </div>
+    </>
+  )
+}
+
+export default SelectPackage

dify_1.0.1/web/app/components/plugins/install-plugin/install-from-github/steps/setURL.tsx

@@ -0,0 +1,56 @@
+'use client'
+
+import React from 'react'
+import Button from '@/app/components/base/button'
+import { useTranslation } from 'react-i18next'
+
+type SetURLProps = {
+  repoUrl: string
+  onChange: (value: string) => void
+  onNext: () => void
+  onCancel: () => void
+}
+
+const SetURL: React.FC<SetURLProps> = ({ repoUrl, onChange, onNext, onCancel }) => {
+  const { t } = useTranslation()
+  return (
+    <>
+      <label
+        htmlFor='repoUrl'
+        className='flex flex-col justify-center items-start self-stretch text-text-secondary'
+      >
+        <span className='system-sm-semibold'>{t('plugin.installFromGitHub.gitHubRepo')}</span>
+      </label>
+      <input
+        type='url'
+        id='repoUrl'
+        name='repoUrl'
+        value={repoUrl}
+        onChange={e => onChange(e.target.value)}
+        className='flex items-center self-stretch rounded-lg border border-components-input-border-active
+          bg-components-input-bg-active shadows-shadow-xs p-2 gap-[2px] flex-grow overflow-hidden
+          text-components-input-text-filled text-ellipsis system-sm-regular'
+        placeholder='Please enter GitHub repo URL'
+      />
+      <div className='flex justify-end items-center gap-2 self-stretch mt-4'>
+        <Button
+          variant='secondary'
+          className='min-w-[72px]'
+          onClick={onCancel}
+        >
+          {t('plugin.installModal.cancel')}
+        </Button>
+        <Button
+          variant='primary'
+          className='min-w-[72px]'
+          onClick={onNext}
+          disabled={!repoUrl.trim()}
+        >
+          {t('plugin.installModal.next')}
+        </Button>
+      </div>
+    </>
+  )
+}
+
+export default SetURL

dify_1.0.1/web/app/components/plugins/install-plugin/install-from-local-package/index.tsx

@@ -0,0 +1,133 @@
+'use client'
+
+import React, { useCallback, useState } from 'react'
+import Modal from '@/app/components/base/modal'
+import type { Dependency, PluginDeclaration } from '../../types'
+import { InstallStep } from '../../types'
+import Uploading from './steps/uploading'
+import { useTranslation } from 'react-i18next'
+import useGetIcon from '@/app/components/plugins/install-plugin/base/use-get-icon'
+import ReadyToInstallPackage from './ready-to-install'
+import ReadyToInstallBundle from '../install-bundle/ready-to-install'
+import useHideLogic from '../hooks/use-hide-logic'
+import cn from '@/utils/classnames'
+
+const i18nPrefix = 'plugin.installModal'
+
+type InstallFromLocalPackageProps = {
+  file: File
+  onSuccess: () => void
+  onClose: () => void
+}
+
+const InstallFromLocalPackage: React.FC<InstallFromLocalPackageProps> = ({
+  file,
+  onClose,
+}) => {
+  const { t } = useTranslation()
+  // uploading -> !uploadFailed -> readyToInstall -> installed/failed
+  const [step, setStep] = useState<InstallStep>(InstallStep.uploading)
+  const [uniqueIdentifier, setUniqueIdentifier] = useState<string | null>(null)
+  const [manifest, setManifest] = useState<PluginDeclaration | null>(null)
+  const [errorMsg, setErrorMsg] = useState<string | null>(null)
+  const isBundle = file.name.endsWith('.difybndl')
+  const [dependencies, setDependencies] = useState<Dependency[]>([])
+
+  const {
+    modalClassName,
+    foldAnimInto,
+    setIsInstalling,
+    handleStartToInstall,
+  } = useHideLogic(onClose)
+
+  const getTitle = useCallback(() => {
+    if (step === InstallStep.uploadFailed)
+      return t(`${i18nPrefix}.uploadFailed`)
+    if (isBundle && step === InstallStep.installed)
+      return t(`${i18nPrefix}.installComplete`)
+    if (step === InstallStep.installed)
+      return t(`${i18nPrefix}.installedSuccessfully`)
+    if (step === InstallStep.installFailed)
+      return t(`${i18nPrefix}.installFailed`)
+
+    return t(`${i18nPrefix}.installPlugin`)
+  }, [isBundle, step, t])
+
+  const { getIconUrl } = useGetIcon()
+
+  const handlePackageUploaded = useCallback(async (result: {
+    uniqueIdentifier: string
+    manifest: PluginDeclaration
+  }) => {
+    const {
+      manifest,
+      uniqueIdentifier,
+    } = result
+    const icon = await getIconUrl(manifest!.icon)
+    setUniqueIdentifier(uniqueIdentifier)
+    setManifest({
+      ...manifest,
+      icon,
+    })
+    setStep(InstallStep.readyToInstall)
+  }, [getIconUrl])
+
+  const handleBundleUploaded = useCallback((result: Dependency[]) => {
+    setDependencies(result)
+    setStep(InstallStep.readyToInstall)
+  }, [])
+
+  const handleUploadFail = useCallback((errorMsg: string) => {
+    setErrorMsg(errorMsg)
+    setStep(InstallStep.uploadFailed)
+  }, [])
+
+  return (
+    <Modal
+      isShow={true}
+      onClose={foldAnimInto}
+      className={cn(modalClassName, 'flex min-w-[560px] p-0 flex-col items-start rounded-2xl border-[0.5px] border-components-panel-border bg-components-panel-bg shadows-shadow-xl')}
+      closable
+    >
+      <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>
+      {step === InstallStep.uploading && (
+        <Uploading
+          isBundle={isBundle}
+          file={file}
+          onCancel={onClose}
+          onPackageUploaded={handlePackageUploaded}
+          onBundleUploaded={handleBundleUploaded}
+          onFailed={handleUploadFail}
+        />
+      )}
+      {isBundle ? (
+        <ReadyToInstallBundle
+          step={step}
+          onStepChange={setStep}
+          onStartToInstall={handleStartToInstall}
+          setIsInstalling={setIsInstalling}
+          onClose={onClose}
+          allPlugins={dependencies}
+        />
+      ) : (
+        <ReadyToInstallPackage
+          step={step}
+          onStepChange={setStep}
+          onStartToInstall={handleStartToInstall}
+          setIsInstalling={setIsInstalling}
+          onClose={onClose}
+          uniqueIdentifier={uniqueIdentifier}
+          manifest={manifest}
+          errorMsg={errorMsg}
+          onError={setErrorMsg}
+        />
+      )}
+    </Modal>
+  )
+}
+
+export default InstallFromLocalPackage

dify_1.0.1/web/app/components/plugins/install-plugin/install-from-local-package/ready-to-install.tsx

@@ -0,0 +1,76 @@
+'use client'
+import type { FC } from 'react'
+import React, { useCallback } from 'react'
+import type { PluginDeclaration } from '../../types'
+import { InstallStep } from '../../types'
+import Install from './steps/install'
+import Installed from '../base/installed'
+import useRefreshPluginList from '../hooks/use-refresh-plugin-list'
+
+type Props = {
+  step: InstallStep
+  onStepChange: (step: InstallStep) => void,
+  onStartToInstall: () => void
+  setIsInstalling: (isInstalling: boolean) => void
+  onClose: () => void
+  uniqueIdentifier: string | null,
+  manifest: PluginDeclaration | null,
+  errorMsg: string | null,
+  onError: (errorMsg: string) => void,
+}
+
+const ReadyToInstall: FC<Props> = ({
+  step,
+  onStepChange,
+  onStartToInstall,
+  setIsInstalling,
+  onClose,
+  uniqueIdentifier,
+  manifest,
+  errorMsg,
+  onError,
+}) => {
+  const { refreshPluginList } = useRefreshPluginList()
+
+  const handleInstalled = useCallback((notRefresh?: boolean) => {
+    onStepChange(InstallStep.installed)
+    if (!notRefresh)
+      refreshPluginList(manifest)
+    setIsInstalling(false)
+  }, [manifest, onStepChange, refreshPluginList, setIsInstalling])
+
+  const handleFailed = useCallback((errorMsg?: string) => {
+    onStepChange(InstallStep.installFailed)
+    setIsInstalling(false)
+    if (errorMsg)
+      onError(errorMsg)
+  }, [onError, onStepChange, setIsInstalling])
+
+  return (
+    <>
+      {
+        step === InstallStep.readyToInstall && (
+          <Install
+            uniqueIdentifier={uniqueIdentifier!}
+            payload={manifest!}
+            onCancel={onClose}
+            onInstalled={handleInstalled}
+            onFailed={handleFailed}
+            onStartToInstall={onStartToInstall}
+          />
+        )
+      }
+      {
+        ([InstallStep.uploadFailed, InstallStep.installed, InstallStep.installFailed].includes(step)) && (
+          <Installed
+            payload={manifest}
+            isFailed={[InstallStep.uploadFailed, InstallStep.installFailed].includes(step)}
+            errMsg={errorMsg}
+            onCancel={onClose}
+          />
+        )
+      }
+    </>
+  )
+}
+export default React.memo(ReadyToInstall)

dify_1.0.1/web/app/components/plugins/install-plugin/install-from-local-package/steps/install.tsx

@@ -0,0 +1,150 @@
+'use client'
+import type { FC } from 'react'
+import React, { useEffect } from 'react'
+import { type PluginDeclaration, TaskStatus } from '../../../types'
+import Card from '../../../card'
+import { pluginManifestToCardPluginProps } from '../../utils'
+import Button from '@/app/components/base/button'
+import { Trans, useTranslation } from 'react-i18next'
+import { RiLoader2Line } from '@remixicon/react'
+import checkTaskStatus from '../../base/check-task-status'
+import { useInstallPackageFromLocal, usePluginTaskList } from '@/service/use-plugins'
+import useCheckInstalled from '@/app/components/plugins/install-plugin/hooks/use-check-installed'
+import { uninstallPlugin } from '@/service/plugins'
+import Version from '../../base/version'
+
+const i18nPrefix = 'plugin.installModal'
+
+type Props = {
+  uniqueIdentifier: string
+  payload: PluginDeclaration
+  onCancel: () => void
+  onStartToInstall?: () => void
+  onInstalled: (notRefresh?: boolean) => void
+  onFailed: (message?: string) => void
+}
+
+const Installed: FC<Props> = ({
+  uniqueIdentifier,
+  payload,
+  onCancel,
+  onStartToInstall,
+  onInstalled,
+  onFailed,
+}) => {
+  const { t } = useTranslation()
+  const toInstallVersion = payload.version
+  const pluginId = `${payload.author}/${payload.name}`
+  const { installedInfo, isLoading } = useCheckInstalled({
+    pluginIds: [pluginId],
+    enabled: !!pluginId,
+  })
+  const installedInfoPayload = installedInfo?.[pluginId]
+  const installedVersion = installedInfoPayload?.installedVersion
+  const hasInstalled = !!installedVersion
+
+  useEffect(() => {
+    if (hasInstalled && uniqueIdentifier === installedInfoPayload.uniqueIdentifier)
+      onInstalled()
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [hasInstalled])
+
+  const [isInstalling, setIsInstalling] = React.useState(false)
+  const { mutateAsync: installPackageFromLocal } = useInstallPackageFromLocal()
+
+  const {
+    check,
+    stop,
+  } = checkTaskStatus()
+
+  const handleCancel = () => {
+    stop()
+    onCancel()
+  }
+
+  const { handleRefetch } = usePluginTaskList(payload.category)
+  const handleInstall = async () => {
+    if (isInstalling) return
+    setIsInstalling(true)
+    onStartToInstall?.()
+
+    try {
+      if (hasInstalled)
+        await uninstallPlugin(installedInfoPayload.installedId)
+
+      const {
+        all_installed,
+        task_id,
+      } = await installPackageFromLocal(uniqueIdentifier)
+      const taskId = task_id
+      const isInstalled = all_installed
+
+      if (isInstalled) {
+        onInstalled()
+        return
+      }
+      handleRefetch()
+      const { status, error } = await check({
+        taskId,
+        pluginUniqueIdentifier: uniqueIdentifier,
+      })
+      if (status === TaskStatus.failed) {
+        onFailed(error)
+        return
+      }
+      onInstalled(true)
+    }
+    catch (e) {
+      if (typeof e === 'string') {
+        onFailed(e)
+        return
+      }
+      onFailed()
+    }
+  }
+
+  return (
+    <>
+      <div className='flex flex-col px-6 py-3 justify-center items-start gap-4 self-stretch'>
+        <div className='text-text-secondary system-md-regular'>
+          <p>{t(`${i18nPrefix}.readyToInstall`)}</p>
+          <p>
+            <Trans
+              i18nKey={`${i18nPrefix}.fromTrustSource`}
+              components={{ trustSource: <span className='system-md-semibold' /> }}
+            />
+          </p>
+        </div>
+        <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)}
+            titleLeft={!isLoading && <Version
+              hasInstalled={hasInstalled}
+              installedVersion={installedVersion}
+              toInstallVersion={toInstallVersion}
+            />}
+          />
+        </div>
+      </div>
+      {/* Action Buttons */}
+      <div className='flex p-6 pt-5 justify-end items-center gap-2 self-stretch'>
+        {!isInstalling && (
+          <Button variant='secondary' className='min-w-[72px]' onClick={handleCancel}>
+            {t('common.operation.cancel')}
+          </Button>
+        )}
+        <Button
+          variant='primary'
+          className='min-w-[72px] flex space-x-0.5'
+          disabled={isInstalling || isLoading}
+          onClick={handleInstall}
+        >
+          {isInstalling && <RiLoader2Line className='w-4 h-4 animate-spin-slow' />}
+          <span>{t(`${i18nPrefix}.${isInstalling ? 'installing' : 'install'}`)}</span>
+        </Button>
+      </div>
+    </>
+  )
+}
+export default React.memo(Installed)

dify_1.0.1/web/app/components/plugins/install-plugin/install-from-local-package/steps/uploading.tsx

@@ -0,0 +1,99 @@
+'use client'
+import type { FC } from 'react'
+import React from 'react'
+import { RiLoader2Line } from '@remixicon/react'
+import Card from '../../../card'
+import type { Dependency, PluginDeclaration } from '../../../types'
+import Button from '@/app/components/base/button'
+import { useTranslation } from 'react-i18next'
+import { uploadFile } from '@/service/plugins'
+const i18nPrefix = 'plugin.installModal'
+
+type Props = {
+  isBundle: boolean
+  file: File
+  onCancel: () => void
+  onPackageUploaded: (result: {
+    uniqueIdentifier: string
+    manifest: PluginDeclaration
+  }) => void
+  onBundleUploaded: (result: Dependency[]) => void
+  onFailed: (errorMsg: string) => void
+}
+
+const Uploading: FC<Props> = ({
+  isBundle,
+  file,
+  onCancel,
+  onPackageUploaded,
+  onBundleUploaded,
+  onFailed,
+}) => {
+  const { t } = useTranslation()
+  const fileName = file.name
+  const handleUpload = async () => {
+    try {
+      await uploadFile(file, isBundle)
+    }
+    catch (e: any) {
+      if (e.response?.message) {
+        onFailed(e.response?.message)
+      }
+      else { // Why it would into this branch?
+        const res = e.response
+        if (isBundle) {
+          onBundleUploaded(res)
+          return
+        }
+        onPackageUploaded({
+          uniqueIdentifier: res.unique_identifier,
+          manifest: res.manifest,
+        })
+      }
+    }
+  }
+
+  React.useEffect(() => {
+    handleUpload()
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [])
+  return (
+    <>
+      <div className='flex flex-col px-6 py-3 justify-center items-start gap-4 self-stretch'>
+        <div className='flex items-center gap-1 self-stretch'>
+          <RiLoader2Line className='text-text-accent w-4 h-4 animate-spin-slow' />
+          <div className='text-text-secondary system-md-regular'>
+            {t(`${i18nPrefix}.uploadingPackage`, {
+              packageName: fileName,
+            })}
+          </div>
+        </div>
+        <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={{ name: fileName } as any}
+            isLoading
+            loadingFileName={fileName}
+            installed={false}
+          />
+        </div>
+      </div>
+
+      {/* Action Buttons */}
+      <div className='flex p-6 pt-5 justify-end items-center gap-2 self-stretch'>
+        <Button variant='secondary' className='min-w-[72px]' onClick={onCancel}>
+          {t('common.operation.cancel')}
+        </Button>
+        <Button
+          variant='primary'
+          className='min-w-[72px]'
+          disabled
+        >
+          {t(`${i18nPrefix}.install`)}
+        </Button>
+      </div>
+    </>
+  )
+}
+
+export default React.memo(Uploading)

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

@@ -0,0 +1,125 @@
+'use client'
+
+import React, { useCallback, useState } from 'react'
+import Modal from '@/app/components/base/modal'
+import type { Dependency, Plugin, PluginManifestInMarket } from '../../types'
+import { InstallStep } from '../../types'
+import Install from './steps/install'
+import Installed from '../base/installed'
+import { useTranslation } from 'react-i18next'
+import useRefreshPluginList from '../hooks/use-refresh-plugin-list'
+import ReadyToInstallBundle from '../install-bundle/ready-to-install'
+import cn from '@/utils/classnames'
+import useHideLogic from '../hooks/use-hide-logic'
+
+const i18nPrefix = 'plugin.installModal'
+
+type InstallFromMarketplaceProps = {
+  uniqueIdentifier: string
+  manifest: PluginManifestInMarket | Plugin
+  isBundle?: boolean
+  dependencies?: Dependency[]
+  onSuccess: () => void
+  onClose: () => void
+}
+
+const InstallFromMarketplace: React.FC<InstallFromMarketplaceProps> = ({
+  uniqueIdentifier,
+  manifest,
+  isBundle,
+  dependencies,
+  onSuccess,
+  onClose,
+}) => {
+  const { t } = useTranslation()
+  // readyToInstall -> check installed -> installed/failed
+  const [step, setStep] = useState<InstallStep>(InstallStep.readyToInstall)
+  const [errorMsg, setErrorMsg] = useState<string | null>(null)
+  const { refreshPluginList } = useRefreshPluginList()
+
+  const {
+    modalClassName,
+    foldAnimInto,
+    setIsInstalling,
+    handleStartToInstall,
+  } = useHideLogic(onClose)
+
+  const getTitle = useCallback(() => {
+    if (isBundle && step === InstallStep.installed)
+      return t(`${i18nPrefix}.installComplete`)
+    if (step === InstallStep.installed)
+      return t(`${i18nPrefix}.installedSuccessfully`)
+    if (step === InstallStep.installFailed)
+      return t(`${i18nPrefix}.installFailed`)
+    return t(`${i18nPrefix}.installPlugin`)
+  }, [isBundle, step, t])
+
+  const handleInstalled = useCallback((notRefresh?: boolean) => {
+    setStep(InstallStep.installed)
+    if (!notRefresh)
+      refreshPluginList(manifest)
+    setIsInstalling(false)
+  }, [manifest, refreshPluginList, setIsInstalling])
+
+  const handleFailed = useCallback((errorMsg?: string) => {
+    setStep(InstallStep.installFailed)
+    setIsInstalling(false)
+    if (errorMsg)
+      setErrorMsg(errorMsg)
+  }, [setIsInstalling])
+
+  return (
+    <Modal
+      isShow={true}
+      onClose={foldAnimInto}
+      wrapperClassName='z-[9999]'
+      className={cn(modalClassName, 'flex min-w-[560px] p-0 flex-col items-start rounded-2xl border-[0.5px] border-components-panel-border bg-components-panel-bg shadows-shadow-xl')}
+      closable
+    >
+      <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>
+      {
+        isBundle ? (
+          <ReadyToInstallBundle
+            step={step}
+            onStepChange={setStep}
+            onStartToInstall={handleStartToInstall}
+            setIsInstalling={setIsInstalling}
+            onClose={onClose}
+            allPlugins={dependencies!}
+            isFromMarketPlace
+          />
+        ) : (<>
+          {
+            step === InstallStep.readyToInstall && (
+              <Install
+                uniqueIdentifier={uniqueIdentifier}
+                payload={manifest!}
+                onCancel={onClose}
+                onInstalled={handleInstalled}
+                onFailed={handleFailed}
+                onStartToInstall={handleStartToInstall}
+              />
+            )}
+          {
+            [InstallStep.installed, InstallStep.installFailed].includes(step) && (
+              <Installed
+                payload={manifest!}
+                isMarketPayload
+                isFailed={step === InstallStep.installFailed}
+                errMsg={errorMsg}
+                onCancel={onSuccess}
+              />
+            )
+          }
+        </>
+        )
+      }
+    </Modal >
+  )
+}
+
+export default InstallFromMarketplace

dify_1.0.1/web/app/components/plugins/install-plugin/install-from-marketplace/steps/install.tsx

@@ -0,0 +1,158 @@
+'use client'
+import type { FC } from 'react'
+import React, { useEffect } from 'react'
+// import { RiInformation2Line } from '@remixicon/react'
+import { type Plugin, type PluginManifestInMarket, TaskStatus } from '../../../types'
+import Card from '../../../card'
+import { pluginManifestInMarketToPluginProps } from '../../utils'
+import Button from '@/app/components/base/button'
+import { useTranslation } from 'react-i18next'
+import { RiLoader2Line } from '@remixicon/react'
+import { useInstallPackageFromMarketPlace, useUpdatePackageFromMarketPlace } from '@/service/use-plugins'
+import checkTaskStatus from '../../base/check-task-status'
+import useCheckInstalled from '@/app/components/plugins/install-plugin/hooks/use-check-installed'
+import Version from '../../base/version'
+import { usePluginTaskList } from '@/service/use-plugins'
+
+const i18nPrefix = 'plugin.installModal'
+
+type Props = {
+  uniqueIdentifier: string
+  payload: PluginManifestInMarket | Plugin
+  onCancel: () => void
+  onStartToInstall?: () => void
+  onInstalled: (notRefresh?: boolean) => void
+  onFailed: (message?: string) => void
+}
+
+const Installed: FC<Props> = ({
+  uniqueIdentifier,
+  payload,
+  onCancel,
+  onStartToInstall,
+  onInstalled,
+  onFailed,
+}) => {
+  const { t } = useTranslation()
+  const toInstallVersion = payload.version || payload.latest_version
+  const pluginId = (payload as Plugin).plugin_id
+  const { installedInfo, isLoading } = useCheckInstalled({
+    pluginIds: [pluginId],
+    enabled: !!pluginId,
+  })
+  const installedInfoPayload = installedInfo?.[pluginId]
+  const installedVersion = installedInfoPayload?.installedVersion
+  const hasInstalled = !!installedVersion
+
+  const { mutateAsync: installPackageFromMarketPlace } = useInstallPackageFromMarketPlace()
+  const { mutateAsync: updatePackageFromMarketPlace } = useUpdatePackageFromMarketPlace()
+  const [isInstalling, setIsInstalling] = React.useState(false)
+  const {
+    check,
+    stop,
+  } = checkTaskStatus()
+  const { handleRefetch } = usePluginTaskList(payload.category)
+
+  useEffect(() => {
+    if (hasInstalled && uniqueIdentifier === installedInfoPayload.uniqueIdentifier)
+      onInstalled()
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [hasInstalled])
+
+  const handleCancel = () => {
+    stop()
+    onCancel()
+  }
+
+  const handleInstall = async () => {
+    if (isInstalling) return
+    onStartToInstall?.()
+    setIsInstalling(true)
+    try {
+      let taskId
+      let isInstalled
+      if (hasInstalled) {
+        const {
+          all_installed,
+          task_id,
+        } = await updatePackageFromMarketPlace({
+          original_plugin_unique_identifier: installedInfoPayload.uniqueIdentifier,
+          new_plugin_unique_identifier: uniqueIdentifier,
+        })
+        taskId = task_id
+        isInstalled = all_installed
+      }
+      else {
+        const {
+          all_installed,
+          task_id,
+        } = await installPackageFromMarketPlace(uniqueIdentifier)
+        taskId = task_id
+        isInstalled = all_installed
+      }
+
+      if (isInstalled) {
+        onInstalled()
+        return
+      }
+
+      handleRefetch()
+
+      const { status, error } = await check({
+        taskId,
+        pluginUniqueIdentifier: uniqueIdentifier,
+      })
+      if (status === TaskStatus.failed) {
+        onFailed(error)
+        return
+      }
+      onInstalled(true)
+    }
+    catch (e) {
+      if (typeof e === 'string') {
+        onFailed(e)
+        return
+      }
+      onFailed()
+    }
+  }
+
+  return (
+    <>
+      <div className='flex flex-col px-6 py-3 justify-center items-start gap-4 self-stretch'>
+        <div className='text-text-secondary system-md-regular'>
+          <p>{t(`${i18nPrefix}.readyToInstall`)}</p>
+        </div>
+        <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={pluginManifestInMarketToPluginProps(payload as PluginManifestInMarket)}
+            titleLeft={!isLoading && <Version
+              hasInstalled={hasInstalled}
+              installedVersion={installedVersion}
+              toInstallVersion={toInstallVersion}
+            />}
+          />
+        </div>
+      </div>
+      {/* Action Buttons */}
+      <div className='flex p-6 pt-5 justify-end items-center gap-2 self-stretch'>
+        {!isInstalling && (
+          <Button variant='secondary' className='min-w-[72px]' onClick={handleCancel}>
+            {t('common.operation.cancel')}
+          </Button>
+        )}
+        <Button
+          variant='primary'
+          className='min-w-[72px] flex space-x-0.5'
+          disabled={isInstalling || isLoading}
+          onClick={handleInstall}
+        >
+          {isInstalling && <RiLoader2Line className='w-4 h-4 animate-spin-slow' />}
+          <span>{t(`${i18nPrefix}.${isInstalling ? 'installing' : 'install'}`)}</span>
+        </Button>
+      </div>
+    </>
+  )
+}
+export default React.memo(Installed)

dify_1.0.1/web/app/components/plugins/install-plugin/utils.ts

@@ -0,0 +1,60 @@
+import type { Plugin, PluginDeclaration, PluginManifestInMarket } from '../types'
+import type { GitHubUrlInfo } from '@/app/components/plugins/types'
+
+export const pluginManifestToCardPluginProps = (pluginManifest: PluginDeclaration): Plugin => {
+  return {
+    plugin_id: pluginManifest.plugin_unique_identifier,
+    type: pluginManifest.category,
+    category: pluginManifest.category,
+    name: pluginManifest.name,
+    version: pluginManifest.version,
+    latest_version: '',
+    latest_package_identifier: '',
+    org: pluginManifest.author,
+    label: pluginManifest.label,
+    brief: pluginManifest.description,
+    icon: pluginManifest.icon,
+    verified: pluginManifest.verified,
+    introduction: '',
+    repository: '',
+    install_count: 0,
+    endpoint: {
+      settings: [],
+    },
+    tags: [],
+  }
+}
+
+export const pluginManifestInMarketToPluginProps = (pluginManifest: PluginManifestInMarket): Plugin => {
+  return {
+    plugin_id: pluginManifest.plugin_unique_identifier,
+    type: pluginManifest.category,
+    category: pluginManifest.category,
+    name: pluginManifest.name,
+    version: pluginManifest.latest_version,
+    latest_version: pluginManifest.latest_version,
+    latest_package_identifier: '',
+    org: pluginManifest.org,
+    label: pluginManifest.label,
+    brief: pluginManifest.brief,
+    icon: pluginManifest.icon,
+    verified: true,
+    introduction: pluginManifest.introduction,
+    repository: '',
+    install_count: 0,
+    endpoint: {
+      settings: [],
+    },
+    tags: [],
+    badges: pluginManifest.badges,
+  }
+}
+
+export const parseGitHubUrl = (url: string): GitHubUrlInfo => {
+  const match = url.match(/^https:\/\/github\.com\/([^\/]+)\/([^\/]+)\/?$/)
+  return match ? { isValid: true, owner: match[1], repo: match[2] } : { isValid: false }
+}
+
+export const convertRepoToUrl = (repo: string) => {
+  return repo ? `https://github.com/${repo}` : ''
+}

dify_1.0.1/web/app/components/plugins/marketplace/constants.ts

@@ -0,0 +1,4 @@
+export const DEFAULT_SORT = {
+  sortBy: 'install_count',
+  sortOrder: 'DESC',
+}

dify_1.0.1/web/app/components/plugins/marketplace/context.tsx

@@ -0,0 +1,316 @@
+'use client'
+
+import type {
+  ReactNode,
+} from 'react'
+import {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react'
+import {
+  createContext,
+  useContextSelector,
+} from 'use-context-selector'
+import { PLUGIN_TYPE_SEARCH_MAP } from './plugin-type-switch'
+import type { Plugin } from '../types'
+import {
+  getValidCategoryKeys,
+  getValidTagKeys,
+} from '../utils'
+import type {
+  MarketplaceCollection,
+  PluginsSort,
+  SearchParams,
+  SearchParamsFromCollection,
+} from './types'
+import { DEFAULT_SORT } from './constants'
+import {
+  useMarketplaceCollectionsAndPlugins,
+  useMarketplaceContainerScroll,
+  useMarketplacePlugins,
+} from './hooks'
+import {
+  getMarketplaceListCondition,
+  getMarketplaceListFilterType,
+} from './utils'
+import { useInstalledPluginList } from '@/service/use-plugins'
+
+export type MarketplaceContextValue = {
+  intersected: boolean
+  setIntersected: (intersected: boolean) => void
+  searchPluginText: string
+  handleSearchPluginTextChange: (text: string) => void
+  filterPluginTags: string[]
+  handleFilterPluginTagsChange: (tags: string[]) => void
+  activePluginType: string
+  handleActivePluginTypeChange: (type: string) => void
+  page: number
+  handlePageChange: (page: number) => void
+  plugins?: Plugin[]
+  pluginsTotal?: number
+  resetPlugins: () => void
+  sort: PluginsSort
+  handleSortChange: (sort: PluginsSort) => void
+  handleQueryPlugins: () => void
+  handleMoreClick: (searchParams: SearchParamsFromCollection) => void
+  marketplaceCollectionsFromClient?: MarketplaceCollection[]
+  setMarketplaceCollectionsFromClient: (collections: MarketplaceCollection[]) => void
+  marketplaceCollectionPluginsMapFromClient?: Record<string, Plugin[]>
+  setMarketplaceCollectionPluginsMapFromClient: (map: Record<string, Plugin[]>) => void
+  isLoading: boolean
+  isSuccessCollections: boolean
+}
+
+export const MarketplaceContext = createContext<MarketplaceContextValue>({
+  intersected: true,
+  setIntersected: () => {},
+  searchPluginText: '',
+  handleSearchPluginTextChange: () => {},
+  filterPluginTags: [],
+  handleFilterPluginTagsChange: () => {},
+  activePluginType: 'all',
+  handleActivePluginTypeChange: () => {},
+  page: 1,
+  handlePageChange: () => {},
+  plugins: undefined,
+  pluginsTotal: 0,
+  resetPlugins: () => {},
+  sort: DEFAULT_SORT,
+  handleSortChange: () => {},
+  handleQueryPlugins: () => {},
+  handleMoreClick: () => {},
+  marketplaceCollectionsFromClient: [],
+  setMarketplaceCollectionsFromClient: () => {},
+  marketplaceCollectionPluginsMapFromClient: {},
+  setMarketplaceCollectionPluginsMapFromClient: () => {},
+  isLoading: false,
+  isSuccessCollections: false,
+})
+
+type MarketplaceContextProviderProps = {
+  children: ReactNode
+  searchParams?: SearchParams
+  shouldExclude?: boolean
+  scrollContainerId?: string
+}
+
+export function useMarketplaceContext(selector: (value: MarketplaceContextValue) => any) {
+  return useContextSelector(MarketplaceContext, selector)
+}
+
+export const MarketplaceContextProvider = ({
+  children,
+  searchParams,
+  shouldExclude,
+  scrollContainerId,
+}: MarketplaceContextProviderProps) => {
+  const { data, isSuccess } = useInstalledPluginList(!shouldExclude)
+  const exclude = useMemo(() => {
+    if (shouldExclude)
+      return data?.plugins.map(plugin => plugin.plugin_id)
+  }, [data?.plugins, shouldExclude])
+  const queryFromSearchParams = searchParams?.q || ''
+  const tagsFromSearchParams = searchParams?.tags ? getValidTagKeys(searchParams.tags.split(',')) : []
+  const hasValidTags = !!tagsFromSearchParams.length
+  const hasValidCategory = getValidCategoryKeys(searchParams?.category)
+  const categoryFromSearchParams = hasValidCategory || PLUGIN_TYPE_SEARCH_MAP.all
+  const [intersected, setIntersected] = useState(true)
+  const [searchPluginText, setSearchPluginText] = useState(queryFromSearchParams)
+  const searchPluginTextRef = useRef(searchPluginText)
+  const [filterPluginTags, setFilterPluginTags] = useState<string[]>(tagsFromSearchParams)
+  const filterPluginTagsRef = useRef(filterPluginTags)
+  const [activePluginType, setActivePluginType] = useState(categoryFromSearchParams)
+  const activePluginTypeRef = useRef(activePluginType)
+  const [page, setPage] = useState(1)
+  const pageRef = useRef(page)
+  const [sort, setSort] = useState(DEFAULT_SORT)
+  const sortRef = useRef(sort)
+  const {
+    marketplaceCollections: marketplaceCollectionsFromClient,
+    setMarketplaceCollections: setMarketplaceCollectionsFromClient,
+    marketplaceCollectionPluginsMap: marketplaceCollectionPluginsMapFromClient,
+    setMarketplaceCollectionPluginsMap: setMarketplaceCollectionPluginsMapFromClient,
+    queryMarketplaceCollectionsAndPlugins,
+    isLoading,
+    isSuccess: isSuccessCollections,
+  } = useMarketplaceCollectionsAndPlugins()
+  const {
+    plugins,
+    total: pluginsTotal,
+    resetPlugins,
+    queryPlugins,
+    queryPluginsWithDebounced,
+    isLoading: isPluginsLoading,
+  } = useMarketplacePlugins()
+
+  useEffect(() => {
+    if (queryFromSearchParams || hasValidTags || hasValidCategory) {
+      queryPlugins({
+        query: queryFromSearchParams,
+        category: hasValidCategory,
+        tags: hasValidTags ? tagsFromSearchParams : [],
+        sortBy: sortRef.current.sortBy,
+        sortOrder: sortRef.current.sortOrder,
+        type: getMarketplaceListFilterType(activePluginTypeRef.current),
+        page: pageRef.current,
+      })
+      history.pushState({}, '', `/${searchParams?.language ? `?language=${searchParams?.language}` : ''}`)
+    }
+    else {
+      if (shouldExclude && isSuccess) {
+        queryMarketplaceCollectionsAndPlugins({
+          exclude,
+          type: getMarketplaceListFilterType(activePluginTypeRef.current),
+        })
+      }
+    }
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [queryPlugins, queryMarketplaceCollectionsAndPlugins, isSuccess, exclude])
+
+  const handleQueryMarketplaceCollectionsAndPlugins = useCallback(() => {
+    queryMarketplaceCollectionsAndPlugins({
+      category: activePluginTypeRef.current === PLUGIN_TYPE_SEARCH_MAP.all ? undefined : activePluginTypeRef.current,
+      condition: getMarketplaceListCondition(activePluginTypeRef.current),
+      exclude,
+      type: getMarketplaceListFilterType(activePluginTypeRef.current),
+    })
+    resetPlugins()
+  }, [exclude, queryMarketplaceCollectionsAndPlugins, resetPlugins])
+
+  const handleQueryPlugins = useCallback((debounced?: boolean) => {
+    if (debounced) {
+      queryPluginsWithDebounced({
+        query: searchPluginTextRef.current,
+        category: activePluginTypeRef.current === PLUGIN_TYPE_SEARCH_MAP.all ? undefined : activePluginTypeRef.current,
+        tags: filterPluginTagsRef.current,
+        sortBy: sortRef.current.sortBy,
+        sortOrder: sortRef.current.sortOrder,
+        exclude,
+        type: getMarketplaceListFilterType(activePluginTypeRef.current),
+        page: pageRef.current,
+      })
+    }
+    else {
+      queryPlugins({
+        query: searchPluginTextRef.current,
+        category: activePluginTypeRef.current === PLUGIN_TYPE_SEARCH_MAP.all ? undefined : activePluginTypeRef.current,
+        tags: filterPluginTagsRef.current,
+        sortBy: sortRef.current.sortBy,
+        sortOrder: sortRef.current.sortOrder,
+        exclude,
+        type: getMarketplaceListFilterType(activePluginTypeRef.current),
+        page: pageRef.current,
+      })
+    }
+  }, [exclude, queryPluginsWithDebounced, queryPlugins])
+
+  const handleQuery = useCallback((debounced?: boolean) => {
+    if (!searchPluginTextRef.current && !filterPluginTagsRef.current.length) {
+      handleQueryMarketplaceCollectionsAndPlugins()
+      return
+    }
+
+    handleQueryPlugins(debounced)
+  }, [handleQueryMarketplaceCollectionsAndPlugins, handleQueryPlugins])
+
+  const handleSearchPluginTextChange = useCallback((text: string) => {
+    setSearchPluginText(text)
+    searchPluginTextRef.current = text
+    setPage(1)
+    pageRef.current = 1
+
+    handleQuery(true)
+  }, [handleQuery])
+
+  const handleFilterPluginTagsChange = useCallback((tags: string[]) => {
+    setFilterPluginTags(tags)
+    filterPluginTagsRef.current = tags
+    setPage(1)
+    pageRef.current = 1
+
+    handleQuery()
+  }, [handleQuery])
+
+  const handleActivePluginTypeChange = useCallback((type: string) => {
+    setActivePluginType(type)
+    activePluginTypeRef.current = type
+    setPage(1)
+    pageRef.current = 1
+  }, [])
+
+  useEffect(() => {
+    handleQuery()
+  }, [activePluginType, handleQuery])
+
+  const handleSortChange = useCallback((sort: PluginsSort) => {
+    setSort(sort)
+    sortRef.current = sort
+    setPage(1)
+    pageRef.current = 1
+
+    handleQueryPlugins()
+  }, [handleQueryPlugins])
+
+  const handlePageChange = useCallback(() => {
+    if (pluginsTotal && plugins && pluginsTotal > plugins.length) {
+      setPage(pageRef.current + 1)
+      pageRef.current++
+
+      handleQueryPlugins()
+    }
+  }, [handleQueryPlugins, plugins, pluginsTotal])
+
+  const handleMoreClick = useCallback((searchParams: SearchParamsFromCollection) => {
+    setSearchPluginText(searchParams?.query || '')
+    searchPluginTextRef.current = searchParams?.query || ''
+    setSort({
+      sortBy: searchParams?.sort_by || DEFAULT_SORT.sortBy,
+      sortOrder: searchParams?.sort_order || DEFAULT_SORT.sortOrder,
+    })
+    sortRef.current = {
+      sortBy: searchParams?.sort_by || DEFAULT_SORT.sortBy,
+      sortOrder: searchParams?.sort_order || DEFAULT_SORT.sortOrder,
+    }
+    setPage(1)
+    pageRef.current = 1
+
+    handleQueryPlugins()
+  }, [handleQueryPlugins])
+
+  useMarketplaceContainerScroll(handlePageChange, scrollContainerId)
+
+  return (
+    <MarketplaceContext.Provider
+      value={{
+        intersected,
+        setIntersected,
+        searchPluginText,
+        handleSearchPluginTextChange,
+        filterPluginTags,
+        handleFilterPluginTagsChange,
+        activePluginType,
+        handleActivePluginTypeChange,
+        page,
+        handlePageChange,
+        plugins,
+        pluginsTotal,
+        resetPlugins,
+        sort,
+        handleSortChange,
+        handleQueryPlugins,
+        handleMoreClick,
+        marketplaceCollectionsFromClient,
+        setMarketplaceCollectionsFromClient,
+        marketplaceCollectionPluginsMapFromClient,
+        setMarketplaceCollectionPluginsMapFromClient,
+        isLoading: isLoading || isPluginsLoading,
+        isSuccessCollections,
+      }}
+    >
+      {children}
+    </MarketplaceContext.Provider>
+  )
+}

dify_1.0.1/web/app/components/plugins/marketplace/description/index.tsx

@@ -0,0 +1,71 @@
+import {
+  getLocaleOnServer,
+  useTranslation as translate,
+} from '@/i18n/server'
+
+type DescriptionProps = {
+  locale?: string
+}
+const Description = async ({
+  locale: localeFromProps,
+}: DescriptionProps) => {
+  const localeDefault = getLocaleOnServer()
+  const { t } = await translate(localeFromProps || localeDefault, 'plugin')
+  const { t: tCommon } = await translate(localeFromProps || localeDefault, 'common')
+  const isZhHans = localeFromProps === 'zh-Hans'
+
+  return (
+    <>
+      <h1 className='shrink-0 mb-2 text-center title-4xl-semi-bold text-text-primary'>
+        {t('marketplace.empower')}
+      </h1>
+      <h2 className='shrink-0 flex justify-center items-center text-center body-md-regular text-text-tertiary'>
+        {
+          isZhHans && (
+            <>
+              <span className='mr-1'>{tCommon('operation.in')}</span>
+              {t('marketplace.difyMarketplace')}
+              {t('marketplace.discover')}
+            </>
+          )
+        }
+        {
+          !isZhHans && (
+            <>
+              {t('marketplace.discover')}
+            </>
+          )
+        }
+        <span className="relative ml-1 body-md-medium text-text-secondary after:content-[''] after:absolute after:left-0 after:bottom-[1.5px] after:w-full after:h-2 after:bg-text-text-selected z-[1]">
+          <span className='relative z-[2] lowercase'>{t('category.models')}</span>
+        </span>
+        ,
+        <span className="relative ml-1 body-md-medium text-text-secondary after:content-[''] after:absolute after:left-0 after:bottom-[1.5px] after:w-full after:h-2 after:bg-text-text-selected z-[1]">
+          <span className='relative z-[2] lowercase'>{t('category.tools')}</span>
+        </span>
+        ,
+        <span className="relative ml-1 body-md-medium text-text-secondary after:content-[''] after:absolute after:left-0 after:bottom-[1.5px] after:w-full after:h-2 after:bg-text-text-selected z-[1]">
+          <span className='relative z-[2] lowercase'>{t('category.agents')}</span>
+        </span>
+        ,
+        <span className="relative ml-1 mr-1 body-md-medium text-text-secondary after:content-[''] after:absolute after:left-0 after:bottom-[1.5px] after:w-full after:h-2 after:bg-text-text-selected z-[1]">
+          <span className='relative z-[2] lowercase'>{t('category.extensions')}</span>
+        </span>
+        {t('marketplace.and')}
+        <span className="relative ml-1 mr-1 body-md-medium text-text-secondary after:content-[''] after:absolute after:left-0 after:bottom-[1.5px] after:w-full after:h-2 after:bg-text-text-selected z-[1]">
+          <span className='relative z-[2] lowercase'>{t('category.bundles')}</span>
+        </span>
+        {
+          !isZhHans && (
+            <>
+              <span className='mr-1'>{tCommon('operation.in')}</span>
+              {t('marketplace.difyMarketplace')}
+            </>
+          )
+        }
+      </h2>
+    </>
+  )
+}
+
+export default Description

dify_1.0.1/web/app/components/plugins/marketplace/empty/index.tsx

@@ -0,0 +1,63 @@
+'use client'
+import { Group } from '@/app/components/base/icons/src/vender/other'
+import Line from './line'
+import cn from '@/utils/classnames'
+import { useMixedTranslation } from '@/app/components/plugins/marketplace/hooks'
+
+type Props = {
+  text?: string
+  lightCard?: boolean
+  className?: string
+  locale?: string
+}
+
+const Empty = ({
+  text,
+  lightCard,
+  className,
+  locale,
+}: Props) => {
+  const { t } = useMixedTranslation(locale)
+
+  return (
+    <div
+      className={cn('grow relative h-0 flex flex-wrap p-2 overflow-hidden', className)}
+    >
+      {
+        Array.from({ length: 16 }).map((_, index) => (
+          <div
+            key={index}
+            className={cn(
+              'mr-3 mb-3  h-[144px] w-[calc((100%-36px)/4)] rounded-xl bg-background-section-burn',
+              index % 4 === 3 && 'mr-0',
+              index > 11 && 'mb-0',
+              lightCard && 'bg-background-default-lighter opacity-75',
+            )}
+          >
+          </div>
+        ))
+      }
+      {
+        !lightCard && (
+          <div
+            className='absolute inset-0 bg-marketplace-plugin-empty z-[1]'
+          ></div>
+        )
+      }
+      <div className='absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 z-[2] flex flex-col items-center'>
+        <div className='relative flex items-center justify-center mb-3 w-14 h-14 rounded-xl border border-dashed border-divider-deep bg-components-card-bg shadow-lg'>
+          <Group className='w-5 h-5' />
+          <Line className='absolute right-[-1px] top-1/2 -translate-y-1/2' />
+          <Line className='absolute left-[-1px] top-1/2 -translate-y-1/2' />
+          <Line className='absolute top-0 left-1/2 -translate-x-1/2 -translate-y-1/2 rotate-90' />
+          <Line className='absolute top-full left-1/2 -translate-x-1/2 -translate-y-1/2 rotate-90' />
+        </div>
+        <div className='text-center system-md-regular text-text-tertiary'>
+          {text || t('plugin.marketplace.noPluginFound')}
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default Empty

dify_1.0.1/web/app/components/plugins/marketplace/empty/line.tsx

@@ -0,0 +1,21 @@
+type LineProps = {
+  className?: string
+}
+const Line = ({
+  className,
+}: LineProps) => {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" width="2" height="241" viewBox="0 0 2 241" fill="none" className={className}>
+      <path d="M1 0.5L1 240.5" stroke="url(#paint0_linear_1989_74474)"/>
+      <defs>
+        <linearGradient id="paint0_linear_1989_74474" x1="-7.99584" y1="240.5" x2="-7.88094" y2="0.50004" gradientUnits="userSpaceOnUse">
+          <stop stopColor="white" stopOpacity="0.01"/>
+          <stop offset="0.503965" stopColor="#101828" stopOpacity="0.08"/>
+          <stop offset="1" stopColor="white" stopOpacity="0.01"/>
+        </linearGradient>
+      </defs>
+    </svg>
+  )
+}
+
+export default Line

dify_1.0.1/web/app/components/plugins/marketplace/hooks.ts

@@ -0,0 +1,176 @@
+import {
+  useCallback,
+  useEffect,
+  useState,
+} from 'react'
+import { useTranslation } from 'react-i18next'
+import { useDebounceFn } from 'ahooks'
+import type {
+  Plugin,
+} from '../types'
+import type {
+  CollectionsAndPluginsSearchParams,
+  MarketplaceCollection,
+  PluginsSearchParams,
+} from './types'
+import {
+  getFormattedPlugin,
+  getMarketplaceCollectionsAndPlugins,
+} from './utils'
+import i18n from '@/i18n/i18next-config'
+import {
+  useMutationPluginsFromMarketplace,
+} from '@/service/use-plugins'
+
+export const useMarketplaceCollectionsAndPlugins = () => {
+  const [isLoading, setIsLoading] = useState(false)
+  const [isSuccess, setIsSuccess] = useState(false)
+  const [marketplaceCollections, setMarketplaceCollections] = useState<MarketplaceCollection[]>()
+  const [marketplaceCollectionPluginsMap, setMarketplaceCollectionPluginsMap] = useState<Record<string, Plugin[]>>()
+
+  const queryMarketplaceCollectionsAndPlugins = useCallback(async (query?: CollectionsAndPluginsSearchParams) => {
+    try {
+      setIsLoading(true)
+      setIsSuccess(false)
+      const { marketplaceCollections, marketplaceCollectionPluginsMap } = await getMarketplaceCollectionsAndPlugins(query)
+      setIsLoading(false)
+      setIsSuccess(true)
+      setMarketplaceCollections(marketplaceCollections)
+      setMarketplaceCollectionPluginsMap(marketplaceCollectionPluginsMap)
+    }
+    // eslint-disable-next-line unused-imports/no-unused-vars
+    catch (e) {
+      setIsLoading(false)
+      setIsSuccess(false)
+    }
+  }, [])
+
+  return {
+    marketplaceCollections,
+    setMarketplaceCollections,
+    marketplaceCollectionPluginsMap,
+    setMarketplaceCollectionPluginsMap,
+    queryMarketplaceCollectionsAndPlugins,
+    isLoading,
+    isSuccess,
+  }
+}
+
+export const useMarketplacePlugins = () => {
+  const {
+    data,
+    mutateAsync,
+    reset,
+    isPending,
+  } = useMutationPluginsFromMarketplace()
+
+  const [prevPlugins, setPrevPlugins] = useState<Plugin[] | undefined>()
+  const resetPlugins = useCallback(() => {
+    reset()
+    setPrevPlugins(undefined)
+  }, [reset])
+  const handleUpdatePlugins = useCallback((pluginsSearchParams: PluginsSearchParams) => {
+    mutateAsync(pluginsSearchParams).then((res) => {
+      const currentPage = pluginsSearchParams.page || 1
+      const resPlugins = res.data.bundles || res.data.plugins
+      if (currentPage > 1) {
+        setPrevPlugins(prevPlugins => [...(prevPlugins || []), ...resPlugins.map((plugin) => {
+          return getFormattedPlugin(plugin)
+        })])
+      }
+      else {
+        setPrevPlugins(resPlugins.map((plugin) => {
+          return getFormattedPlugin(plugin)
+        }))
+      }
+    })
+  }, [mutateAsync])
+  const queryPlugins = useCallback((pluginsSearchParams: PluginsSearchParams) => {
+    handleUpdatePlugins(pluginsSearchParams)
+  }, [handleUpdatePlugins])
+
+  const { run: queryPluginsWithDebounced } = useDebounceFn((pluginsSearchParams: PluginsSearchParams) => {
+    handleUpdatePlugins(pluginsSearchParams)
+  }, {
+    wait: 500,
+  })
+
+  return {
+    plugins: prevPlugins,
+    total: data?.data?.total,
+    resetPlugins,
+    queryPlugins,
+    queryPluginsWithDebounced,
+    isLoading: isPending,
+  }
+}
+
+export const useMixedTranslation = (localeFromOuter?: string) => {
+  let t = useTranslation().t
+
+  if (localeFromOuter)
+    t = i18n.getFixedT(localeFromOuter)
+
+  return {
+    t,
+  }
+}
+
+export const useMarketplaceContainerScroll = (
+  callback: () => void,
+  scrollContainerId = 'marketplace-container',
+) => {
+  const container = document.getElementById(scrollContainerId)
+
+  const handleScroll = useCallback((e: Event) => {
+    const target = e.target as HTMLDivElement
+    const {
+      scrollTop,
+      scrollHeight,
+      clientHeight,
+    } = target
+    if (scrollTop + clientHeight >= scrollHeight - 5 && scrollTop > 0)
+      callback()
+  }, [callback])
+
+  useEffect(() => {
+    if (container)
+      container.addEventListener('scroll', handleScroll)
+
+    return () => {
+      if (container)
+        container.removeEventListener('scroll', handleScroll)
+    }
+  }, [container, handleScroll])
+}
+
+export const useSearchBoxAutoAnimate = (searchBoxAutoAnimate?: boolean) => {
+  const [searchBoxCanAnimate, setSearchBoxCanAnimate] = useState(true)
+
+  const handleSearchBoxCanAnimateChange = useCallback(() => {
+    if (!searchBoxAutoAnimate) {
+      const clientWidth = document.documentElement.clientWidth
+
+      if (clientWidth < 1400)
+        setSearchBoxCanAnimate(false)
+      else
+        setSearchBoxCanAnimate(true)
+    }
+  }, [searchBoxAutoAnimate])
+
+  useEffect(() => {
+    handleSearchBoxCanAnimateChange()
+  }, [handleSearchBoxCanAnimateChange])
+
+  useEffect(() => {
+    window.addEventListener('resize', handleSearchBoxCanAnimateChange)
+
+    return () => {
+      window.removeEventListener('resize', handleSearchBoxCanAnimateChange)
+    }
+  }, [handleSearchBoxCanAnimateChange])
+
+  return {
+    searchBoxCanAnimate,
+  }
+}

dify_1.0.1/web/app/components/plugins/marketplace/index.tsx

@@ -0,0 +1,68 @@
+import { MarketplaceContextProvider } from './context'
+import Description from './description'
+import IntersectionLine from './intersection-line'
+import SearchBoxWrapper from './search-box/search-box-wrapper'
+import PluginTypeSwitch from './plugin-type-switch'
+import ListWrapper from './list/list-wrapper'
+import type { SearchParams } from './types'
+import { getMarketplaceCollectionsAndPlugins } from './utils'
+import { TanstackQueryIniter } from '@/context/query-client'
+
+type MarketplaceProps = {
+  locale: string
+  searchBoxAutoAnimate?: boolean
+  showInstallButton?: boolean
+  shouldExclude?: boolean
+  searchParams?: SearchParams
+  pluginTypeSwitchClassName?: string
+  intersectionContainerId?: string
+  scrollContainerId?: string
+}
+const Marketplace = async ({
+  locale,
+  searchBoxAutoAnimate = true,
+  showInstallButton = true,
+  shouldExclude,
+  searchParams,
+  pluginTypeSwitchClassName,
+  intersectionContainerId,
+  scrollContainerId,
+}: MarketplaceProps) => {
+  let marketplaceCollections: any = []
+  let marketplaceCollectionPluginsMap = {}
+  if (!shouldExclude) {
+    const marketplaceCollectionsAndPluginsData = await getMarketplaceCollectionsAndPlugins()
+    marketplaceCollections = marketplaceCollectionsAndPluginsData.marketplaceCollections
+    marketplaceCollectionPluginsMap = marketplaceCollectionsAndPluginsData.marketplaceCollectionPluginsMap
+  }
+
+  return (
+    <TanstackQueryIniter>
+      <MarketplaceContextProvider
+        searchParams={searchParams}
+        shouldExclude={shouldExclude}
+        scrollContainerId={scrollContainerId}
+      >
+        <Description locale={locale} />
+        <IntersectionLine intersectionContainerId={intersectionContainerId} />
+        <SearchBoxWrapper
+          locale={locale}
+          searchBoxAutoAnimate={searchBoxAutoAnimate}
+        />
+        <PluginTypeSwitch
+          locale={locale}
+          className={pluginTypeSwitchClassName}
+          searchBoxAutoAnimate={searchBoxAutoAnimate}
+        />
+        <ListWrapper
+          locale={locale}
+          marketplaceCollections={marketplaceCollections}
+          marketplaceCollectionPluginsMap={marketplaceCollectionPluginsMap}
+          showInstallButton={showInstallButton}
+        />
+      </MarketplaceContextProvider>
+    </TanstackQueryIniter>
+  )
+}
+
+export default Marketplace

dify_1.0.1/web/app/components/plugins/marketplace/intersection-line/hooks.ts

@@ -0,0 +1,30 @@
+import { useEffect } from 'react'
+import { useMarketplaceContext } from '@/app/components/plugins/marketplace/context'
+
+export const useScrollIntersection = (
+  anchorRef: React.RefObject<HTMLDivElement>,
+  intersectionContainerId = 'marketplace-container',
+) => {
+  const intersected = useMarketplaceContext(v => v.intersected)
+  const setIntersected = useMarketplaceContext(v => v.setIntersected)
+
+  useEffect(() => {
+    const container = document.getElementById(intersectionContainerId)
+    let observer: IntersectionObserver | undefined
+    if (container && anchorRef.current) {
+      observer = new IntersectionObserver((entries) => {
+        const isIntersecting = entries[0].isIntersecting
+
+        if (isIntersecting && !intersected)
+          setIntersected(true)
+
+        if (!isIntersecting && intersected)
+          setIntersected(false)
+      }, {
+        root: container,
+      })
+      observer.observe(anchorRef.current)
+    }
+    return () => observer?.disconnect()
+  }, [anchorRef, intersected, setIntersected, intersectionContainerId])
+}

dify_1.0.1/web/app/components/plugins/marketplace/intersection-line/index.tsx

@@ -0,0 +1,21 @@
+'use client'
+
+import { useRef } from 'react'
+import { useScrollIntersection } from './hooks'
+
+type IntersectionLineProps = {
+  intersectionContainerId?: string
+}
+const IntersectionLine = ({
+  intersectionContainerId,
+}: IntersectionLineProps) => {
+  const ref = useRef<HTMLDivElement>(null)
+
+  useScrollIntersection(ref, intersectionContainerId)
+
+  return (
+    <div ref={ref} className='shrink-0 mb-4 h-[1px] bg-transparent'></div>
+  )
+}
+
+export default IntersectionLine

dify_1.0.1/web/app/components/plugins/marketplace/list/card-wrapper.tsx

@@ -0,0 +1,103 @@
+'use client'
+import { RiArrowRightUpLine } from '@remixicon/react'
+import { getPluginLinkInMarketplace } from '../utils'
+import Card from '@/app/components/plugins/card'
+import CardMoreInfo from '@/app/components/plugins/card/card-more-info'
+import type { Plugin } from '@/app/components/plugins/types'
+import Button from '@/app/components/base/button'
+import { useMixedTranslation } from '@/app/components/plugins/marketplace/hooks'
+import InstallFromMarketplace from '@/app/components/plugins/install-plugin/install-from-marketplace'
+import { useBoolean } from 'ahooks'
+import { useI18N } from '@/context/i18n'
+import { useTags } from '@/app/components/plugins/hooks'
+
+type CardWrapperProps = {
+  plugin: Plugin
+  showInstallButton?: boolean
+  locale?: string
+}
+const CardWrapper = ({
+  plugin,
+  showInstallButton,
+  locale,
+}: CardWrapperProps) => {
+  const { t } = useMixedTranslation(locale)
+  const [isShowInstallFromMarketplace, {
+    setTrue: showInstallFromMarketplace,
+    setFalse: hideInstallFromMarketplace,
+  }] = useBoolean(false)
+  const { locale: localeFromLocale } = useI18N()
+  const { tagsMap } = useTags(t)
+
+  if (showInstallButton) {
+    return (
+      <div
+        className='group relative rounded-xl cursor-pointer  hover:bg-components-panel-on-panel-item-bg-hover'
+      >
+        <Card
+          key={plugin.name}
+          payload={plugin}
+          locale={locale}
+          footer={
+            <CardMoreInfo
+              downloadCount={plugin.install_count}
+              tags={plugin.tags.map(tag => tagsMap[tag.name].label)}
+            />
+          }
+        />
+        {
+          showInstallButton && (
+            <div className='hidden absolute bottom-0 group-hover:flex items-center space-x-2 px-4 pt-8 pb-4 w-full bg-gradient-to-tr from-components-panel-on-panel-item-bg to-background-gradient-mask-transparent rounded-b-xl'>
+              <Button
+                variant='primary'
+                className='w-[calc(50%-4px)]'
+                onClick={showInstallFromMarketplace}
+              >
+                {t('plugin.detailPanel.operation.install')}
+              </Button>
+              <a href={`${getPluginLinkInMarketplace(plugin)}?language=${localeFromLocale}`} target='_blank' className='block flex-1 shrink-0 w-[calc(50%-4px)]'>
+                <Button
+                  className='w-full gap-0.5'
+                >
+                  {t('plugin.detailPanel.operation.detail')}
+                  <RiArrowRightUpLine className='ml-1 w-4 h-4' />
+                </Button>
+              </a>
+            </div>
+          )
+        }
+        {
+          isShowInstallFromMarketplace && (
+            <InstallFromMarketplace
+              manifest={plugin as any}
+              uniqueIdentifier={plugin.latest_package_identifier}
+              onClose={hideInstallFromMarketplace}
+              onSuccess={hideInstallFromMarketplace}
+            />
+          )
+        }
+      </div>
+    )
+  }
+
+  return (
+    <a
+      className='group inline-block relative rounded-xl cursor-pointer'
+      href={getPluginLinkInMarketplace(plugin)}
+    >
+      <Card
+        key={plugin.name}
+        payload={plugin}
+        locale={locale}
+        footer={
+          <CardMoreInfo
+            downloadCount={plugin.install_count}
+            tags={plugin.tags.map(tag => tagsMap[tag.name].label)}
+          />
+        }
+      />
+    </a>
+  )
+}
+
+export default CardWrapper

dify_1.0.1/web/app/components/plugins/marketplace/list/index.tsx

@@ -0,0 +1,79 @@
+'use client'
+import type { Plugin } from '../../types'
+import type { MarketplaceCollection } from '../types'
+import ListWithCollection from './list-with-collection'
+import CardWrapper from './card-wrapper'
+import Empty from '../empty'
+import cn from '@/utils/classnames'
+
+type ListProps = {
+  marketplaceCollections: MarketplaceCollection[]
+  marketplaceCollectionPluginsMap: Record<string, Plugin[]>
+  plugins?: Plugin[]
+  showInstallButton?: boolean
+  locale: string
+  cardContainerClassName?: string
+  cardRender?: (plugin: Plugin) => JSX.Element | null
+  onMoreClick?: () => void
+  emptyClassName?: string
+}
+const List = ({
+  marketplaceCollections,
+  marketplaceCollectionPluginsMap,
+  plugins,
+  showInstallButton,
+  locale,
+  cardContainerClassName,
+  cardRender,
+  onMoreClick,
+  emptyClassName,
+}: ListProps) => {
+  return (
+    <>
+      {
+        !plugins && (
+          <ListWithCollection
+            marketplaceCollections={marketplaceCollections}
+            marketplaceCollectionPluginsMap={marketplaceCollectionPluginsMap}
+            showInstallButton={showInstallButton}
+            locale={locale}
+            cardContainerClassName={cardContainerClassName}
+            cardRender={cardRender}
+            onMoreClick={onMoreClick}
+          />
+        )
+      }
+      {
+        plugins && !!plugins.length && (
+          <div className={cn(
+            'grid grid-cols-4 gap-3',
+            cardContainerClassName,
+          )}>
+            {
+              plugins.map((plugin) => {
+                if (cardRender)
+                  return cardRender(plugin)
+
+                return (
+                  <CardWrapper
+                    key={plugin.name}
+                    plugin={plugin}
+                    showInstallButton={showInstallButton}
+                    locale={locale}
+                  />
+                )
+              })
+            }
+          </div>
+        )
+      }
+      {
+        plugins && !plugins.length && (
+          <Empty className={emptyClassName} locale={locale} />
+        )
+      }
+    </>
+  )
+}
+
+export default List

dify_1.0.1/web/app/components/plugins/marketplace/list/list-with-collection.tsx

@@ -0,0 +1,84 @@
+'use client'
+
+import { RiArrowRightSLine } from '@remixicon/react'
+import type { MarketplaceCollection } from '../types'
+import CardWrapper from './card-wrapper'
+import type { Plugin } from '@/app/components/plugins/types'
+import { getLanguage } from '@/i18n/language'
+import cn from '@/utils/classnames'
+import type { SearchParamsFromCollection } from '@/app/components/plugins/marketplace/types'
+import { useMixedTranslation } from '@/app/components/plugins/marketplace/hooks'
+
+type ListWithCollectionProps = {
+  marketplaceCollections: MarketplaceCollection[]
+  marketplaceCollectionPluginsMap: Record<string, Plugin[]>
+  showInstallButton?: boolean
+  locale: string
+  cardContainerClassName?: string
+  cardRender?: (plugin: Plugin) => JSX.Element | null
+  onMoreClick?: (searchParams?: SearchParamsFromCollection) => void
+}
+const ListWithCollection = ({
+  marketplaceCollections,
+  marketplaceCollectionPluginsMap,
+  showInstallButton,
+  locale,
+  cardContainerClassName,
+  cardRender,
+  onMoreClick,
+}: ListWithCollectionProps) => {
+  const { t } = useMixedTranslation(locale)
+
+  return (
+    <>
+      {
+        marketplaceCollections.map(collection => (
+          <div
+            key={collection.name}
+            className='py-3'
+          >
+            <div className='flex justify-between items-end'>
+              <div>
+                <div className='title-xl-semi-bold text-text-primary'>{collection.label[getLanguage(locale)]}</div>
+                <div className='system-xs-regular text-text-tertiary'>{collection.description[getLanguage(locale)]}</div>
+              </div>
+              {
+                collection.searchable && onMoreClick && (
+                  <div
+                    className='flex items-center system-xs-medium text-text-accent cursor-pointer '
+                    onClick={() => onMoreClick?.(collection.search_params)}
+                  >
+                    {t('plugin.marketplace.viewMore')}
+                    <RiArrowRightSLine className='w-4 h-4' />
+                  </div>
+                )
+              }
+            </div>
+            <div className={cn(
+              'grid grid-cols-4 gap-3 mt-2',
+              cardContainerClassName,
+            )}>
+              {
+                marketplaceCollectionPluginsMap[collection.name].map((plugin) => {
+                  if (cardRender)
+                    return cardRender(plugin)
+
+                  return (
+                    <CardWrapper
+                      key={plugin.plugin_id}
+                      plugin={plugin}
+                      showInstallButton={showInstallButton}
+                      locale={locale}
+                    />
+                  )
+                })
+              }
+            </div>
+          </div>
+        ))
+      }
+    </>
+  )
+}
+
+export default ListWithCollection

dify_1.0.1/web/app/components/plugins/marketplace/list/list-wrapper.tsx

@@ -0,0 +1,73 @@
+'use client'
+import { useEffect } from 'react'
+import type { Plugin } from '../../types'
+import type { MarketplaceCollection } from '../types'
+import { useMarketplaceContext } from '../context'
+import List from './index'
+import SortDropdown from '../sort-dropdown'
+import Loading from '@/app/components/base/loading'
+import { useMixedTranslation } from '@/app/components/plugins/marketplace/hooks'
+
+type ListWrapperProps = {
+  marketplaceCollections: MarketplaceCollection[]
+  marketplaceCollectionPluginsMap: Record<string, Plugin[]>
+  showInstallButton?: boolean
+  locale: string
+}
+const ListWrapper = ({
+  marketplaceCollections,
+  marketplaceCollectionPluginsMap,
+  showInstallButton,
+  locale,
+}: ListWrapperProps) => {
+  const { t } = useMixedTranslation(locale)
+  const plugins = useMarketplaceContext(v => v.plugins)
+  const pluginsTotal = useMarketplaceContext(v => v.pluginsTotal)
+  const marketplaceCollectionsFromClient = useMarketplaceContext(v => v.marketplaceCollectionsFromClient)
+  const marketplaceCollectionPluginsMapFromClient = useMarketplaceContext(v => v.marketplaceCollectionPluginsMapFromClient)
+  const isLoading = useMarketplaceContext(v => v.isLoading)
+  const isSuccessCollections = useMarketplaceContext(v => v.isSuccessCollections)
+  const handleQueryPlugins = useMarketplaceContext(v => v.handleQueryPlugins)
+  const page = useMarketplaceContext(v => v.page)
+  const handleMoreClick = useMarketplaceContext(v => v.handleMoreClick)
+
+  useEffect(() => {
+    if (!marketplaceCollectionsFromClient?.length && isSuccessCollections)
+      handleQueryPlugins()
+  }, [handleQueryPlugins, marketplaceCollections, marketplaceCollectionsFromClient, isSuccessCollections])
+
+  return (
+    <div className='relative flex flex-col grow px-12 py-2 bg-background-default-subtle'>
+      {
+        plugins && (
+          <div className='flex items-center mb-4 pt-3'>
+            <div className='title-xl-semi-bold text-text-primary'>{t('plugin.marketplace.pluginsResult', { num: pluginsTotal })}</div>
+            <div className='mx-3 w-[1px] h-3.5 bg-divider-regular'></div>
+            <SortDropdown locale={locale} />
+          </div>
+        )
+      }
+      {
+        isLoading && page === 1 && (
+          <div className='absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2'>
+            <Loading />
+          </div>
+        )
+      }
+      {
+        (!isLoading || page > 1) && (
+          <List
+            marketplaceCollections={marketplaceCollectionsFromClient || marketplaceCollections}
+            marketplaceCollectionPluginsMap={marketplaceCollectionPluginsMapFromClient || marketplaceCollectionPluginsMap}
+            plugins={plugins}
+            showInstallButton={showInstallButton}
+            locale={locale}
+            onMoreClick={handleMoreClick}
+          />
+        )
+      }
+    </div>
+  )
+}
+
+export default ListWrapper

dify_1.0.1/web/app/components/plugins/marketplace/plugin-type-switch.tsx

@@ -0,0 +1,100 @@
+'use client'
+import {
+  RiArchive2Line,
+  RiBrain2Line,
+  RiHammerLine,
+  RiPuzzle2Line,
+  RiSpeakAiLine,
+} from '@remixicon/react'
+import { PluginType } from '../types'
+import { useMarketplaceContext } from './context'
+import {
+  useMixedTranslation,
+  useSearchBoxAutoAnimate,
+} from './hooks'
+import cn from '@/utils/classnames'
+
+export const PLUGIN_TYPE_SEARCH_MAP = {
+  all: 'all',
+  model: PluginType.model,
+  tool: PluginType.tool,
+  agent: PluginType.agent,
+  extension: PluginType.extension,
+  bundle: 'bundle',
+}
+type PluginTypeSwitchProps = {
+  locale?: string
+  className?: string
+  searchBoxAutoAnimate?: boolean
+}
+const PluginTypeSwitch = ({
+  locale,
+  className,
+  searchBoxAutoAnimate,
+}: PluginTypeSwitchProps) => {
+  const { t } = useMixedTranslation(locale)
+  const activePluginType = useMarketplaceContext(s => s.activePluginType)
+  const handleActivePluginTypeChange = useMarketplaceContext(s => s.handleActivePluginTypeChange)
+  const { searchBoxCanAnimate } = useSearchBoxAutoAnimate(searchBoxAutoAnimate)
+
+  const options = [
+    {
+      value: PLUGIN_TYPE_SEARCH_MAP.all,
+      text: t('plugin.category.all'),
+      icon: null,
+    },
+    {
+      value: PLUGIN_TYPE_SEARCH_MAP.model,
+      text: t('plugin.category.models'),
+      icon: <RiBrain2Line className='mr-1.5 w-4 h-4' />,
+    },
+    {
+      value: PLUGIN_TYPE_SEARCH_MAP.tool,
+      text: t('plugin.category.tools'),
+      icon: <RiHammerLine className='mr-1.5 w-4 h-4' />,
+    },
+    {
+      value: PLUGIN_TYPE_SEARCH_MAP.agent,
+      text: t('plugin.category.agents'),
+      icon: <RiSpeakAiLine className='mr-1.5 w-4 h-4' />,
+    },
+    {
+      value: PLUGIN_TYPE_SEARCH_MAP.extension,
+      text: t('plugin.category.extensions'),
+      icon: <RiPuzzle2Line className='mr-1.5 w-4 h-4' />,
+    },
+    {
+      value: PLUGIN_TYPE_SEARCH_MAP.bundle,
+      text: t('plugin.category.bundles'),
+      icon: <RiArchive2Line className='mr-1.5 w-4 h-4' />,
+    },
+  ]
+
+  return (
+    <div className={cn(
+      'shrink-0 flex items-center justify-center py-3 bg-background-body space-x-2',
+      searchBoxCanAnimate && 'sticky top-[56px] z-10',
+      className,
+    )}>
+      {
+        options.map(option => (
+          <div
+            key={option.value}
+            className={cn(
+              'flex items-center px-3 h-8 border border-transparent rounded-xl cursor-pointer hover:bg-state-base-hover hover:text-text-secondary system-md-medium text-text-tertiary',
+              activePluginType === option.value && 'border-components-main-nav-nav-button-border !bg-components-main-nav-nav-button-bg-active !text-components-main-nav-nav-button-text-active shadow-xs',
+            )}
+            onClick={() => {
+              handleActivePluginTypeChange(option.value)
+            }}
+          >
+            {option.icon}
+            {option.text}
+          </div>
+        ))
+      }
+    </div>
+  )
+}
+
+export default PluginTypeSwitch

dify_1.0.1/web/app/components/plugins/marketplace/search-box/index.tsx

@@ -0,0 +1,70 @@
+'use client'
+import { RiCloseLine } from '@remixicon/react'
+import TagsFilter from './tags-filter'
+import ActionButton from '@/app/components/base/action-button'
+import cn from '@/utils/classnames'
+
+type SearchBoxProps = {
+  search: string
+  onSearchChange: (search: string) => void
+  inputClassName?: string
+  tags: string[]
+  onTagsChange: (tags: string[]) => void
+  size?: 'small' | 'large'
+  placeholder?: string
+  locale?: string
+}
+const SearchBox = ({
+  search,
+  onSearchChange,
+  inputClassName,
+  tags,
+  onTagsChange,
+  size = 'small',
+  placeholder = '',
+  locale,
+}: SearchBoxProps) => {
+  return (
+    <div
+      className={cn(
+        'flex items-center z-[11]',
+        size === 'large' && 'p-1.5 bg-components-panel-bg-blur rounded-xl shadow-md border border-components-chat-input-border',
+        size === 'small' && 'p-0.5 bg-components-input-bg-normal rounded-lg',
+        inputClassName,
+      )}
+    >
+      <TagsFilter
+        tags={tags}
+        onTagsChange={onTagsChange}
+        size={size}
+        locale={locale}
+      />
+      <div className='mx-1 w-[1px] h-3.5 bg-divider-regular'></div>
+      <div className='relative grow flex items-center p-1 pl-2'>
+        <div className='flex items-center mr-2 w-full'>
+          <input
+            className={cn(
+              'grow block outline-none appearance-none body-md-medium text-text-secondary bg-transparent',
+            )}
+            value={search}
+            onChange={(e) => {
+              onSearchChange(e.target.value)
+            }}
+            placeholder={placeholder}
+          />
+          {
+            search && (
+              <div className='absolute right-2 top-1/2 -translate-y-1/2'>
+                <ActionButton onClick={() => onSearchChange('')}>
+                  <RiCloseLine className='w-4 h-4' />
+                </ActionButton>
+              </div>
+            )
+          }
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default SearchBox

dify_1.0.1/web/app/components/plugins/marketplace/search-box/search-box-wrapper.tsx

@@ -0,0 +1,45 @@
+'use client'
+
+import { useMarketplaceContext } from '../context'
+import {
+  useMixedTranslation,
+  useSearchBoxAutoAnimate,
+} from '../hooks'
+import SearchBox from './index'
+import cn from '@/utils/classnames'
+
+type SearchBoxWrapperProps = {
+  locale?: string
+  searchBoxAutoAnimate?: boolean
+}
+const SearchBoxWrapper = ({
+  locale,
+  searchBoxAutoAnimate,
+}: SearchBoxWrapperProps) => {
+  const { t } = useMixedTranslation(locale)
+  const intersected = useMarketplaceContext(v => v.intersected)
+  const searchPluginText = useMarketplaceContext(v => v.searchPluginText)
+  const handleSearchPluginTextChange = useMarketplaceContext(v => v.handleSearchPluginTextChange)
+  const filterPluginTags = useMarketplaceContext(v => v.filterPluginTags)
+  const handleFilterPluginTagsChange = useMarketplaceContext(v => v.handleFilterPluginTagsChange)
+  const { searchBoxCanAnimate } = useSearchBoxAutoAnimate(searchBoxAutoAnimate)
+
+  return (
+    <SearchBox
+      inputClassName={cn(
+        'mx-auto w-[640px] shrink-0 z-[0]',
+        searchBoxCanAnimate && 'sticky top-3 z-[11]',
+        !intersected && searchBoxCanAnimate && 'w-[508px] transition-[width] duration-300',
+      )}
+      search={searchPluginText}
+      onSearchChange={handleSearchPluginTextChange}
+      tags={filterPluginTags}
+      onTagsChange={handleFilterPluginTagsChange}
+      size='large'
+      locale={locale}
+      placeholder={t('plugin.searchPlugins')}
+    />
+  )
+}
+
+export default SearchBoxWrapper

dify_1.0.1/web/app/components/plugins/marketplace/search-box/tags-filter.tsx

@@ -0,0 +1,138 @@
+'use client'
+
+import { useState } from 'react'
+import {
+  RiArrowDownSLine,
+  RiCloseCircleFill,
+  RiFilter3Line,
+} from '@remixicon/react'
+import {
+  PortalToFollowElem,
+  PortalToFollowElemContent,
+  PortalToFollowElemTrigger,
+} from '@/app/components/base/portal-to-follow-elem'
+import Checkbox from '@/app/components/base/checkbox'
+import cn from '@/utils/classnames'
+import Input from '@/app/components/base/input'
+import { useTags } from '@/app/components/plugins/hooks'
+import { useMixedTranslation } from '@/app/components/plugins/marketplace/hooks'
+
+type TagsFilterProps = {
+  tags: string[]
+  onTagsChange: (tags: string[]) => void
+  size: 'small' | 'large'
+  locale?: string
+}
+const TagsFilter = ({
+  tags,
+  onTagsChange,
+  size,
+  locale,
+}: TagsFilterProps) => {
+  const { t } = useMixedTranslation(locale)
+  const [open, setOpen] = useState(false)
+  const [searchText, setSearchText] = useState('')
+  const { tags: options, tagsMap } = useTags(t)
+  const filteredOptions = options.filter(option => option.label.toLowerCase().includes(searchText.toLowerCase()))
+  const handleCheck = (id: string) => {
+    if (tags.includes(id))
+      onTagsChange(tags.filter((tag: string) => tag !== id))
+    else
+      onTagsChange([...tags, id])
+  }
+  const selectedTagsLength = tags.length
+
+  return (
+    <PortalToFollowElem
+      placement='bottom-start'
+      offset={{
+        mainAxis: 4,
+        crossAxis: -6,
+      }}
+      open={open}
+      onOpenChange={setOpen}
+    >
+      <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',
+          size === 'small' && 'pr-1.5 py-0.5 h-7 pl-1 ',
+          selectedTagsLength && 'text-text-secondary',
+          open && 'bg-state-base-hover',
+        )}>
+          <div className='p-0.5'>
+            <RiFilter3Line className='w-4 h-4' />
+          </div>
+          <div className={cn(
+            'flex items-center p-1 system-sm-medium',
+            size === 'large' && 'p-1',
+            size === 'small' && 'px-0.5 py-1',
+          )}>
+            {
+              !selectedTagsLength && t('pluginTags.allTags')
+            }
+            {
+              !!selectedTagsLength && tags.map(tag => tagsMap[tag].label).slice(0, 2).join(',')
+            }
+            {
+              selectedTagsLength > 2 && (
+                <div className='ml-1 system-xs-medium text-text-tertiary'>
+                  +{selectedTagsLength - 2}
+                </div>
+              )
+            }
+          </div>
+          {
+            !!selectedTagsLength && (
+              <RiCloseCircleFill
+                className='w-4 h-4 text-text-quaternary cursor-pointer'
+                onClick={() => onTagsChange([])}
+              />
+            )
+          }
+          {
+            !selectedTagsLength && (
+              <RiArrowDownSLine className='w-4 h-4' />
+            )
+          }
+        </div>
+      </PortalToFollowElemTrigger>
+      <PortalToFollowElemContent className='z-[1000]'>
+        <div className='w-[240px] border-[0.5px] border-components-panel-border bg-components-panel-bg-blur rounded-xl shadow-lg'>
+          <div className='p-2 pb-1'>
+            <Input
+              showLeftIcon
+              value={searchText}
+              onChange={e => setSearchText(e.target.value)}
+              placeholder={t('pluginTags.searchTags') || ''}
+            />
+          </div>
+          <div className='p-1 max-h-[448px] overflow-y-auto'>
+            {
+              filteredOptions.map(option => (
+                <div
+                  key={option.name}
+                  className='flex items-center px-2 py-1.5 h-7 rounded-lg cursor-pointer hover:bg-state-base-hover'
+                  onClick={() => handleCheck(option.name)}
+                >
+                  <Checkbox
+                    className='mr-1'
+                    checked={tags.includes(option.name)}
+                  />
+                  <div className='px-1 system-sm-medium text-text-secondary'>
+                    {option.label}
+                  </div>
+                </div>
+              ))
+            }
+          </div>
+        </div>
+      </PortalToFollowElemContent>
+    </PortalToFollowElem>
+  )
+}
+
+export default TagsFilter

dify_1.0.1/web/app/components/plugins/marketplace/sort-dropdown/index.tsx

@@ -0,0 +1,94 @@
+'use client'
+import { useState } from 'react'
+import {
+  RiArrowDownSLine,
+  RiCheckLine,
+} from '@remixicon/react'
+import { useMarketplaceContext } from '../context'
+import {
+  PortalToFollowElem,
+  PortalToFollowElemContent,
+  PortalToFollowElemTrigger,
+} from '@/app/components/base/portal-to-follow-elem'
+import { useMixedTranslation } from '@/app/components/plugins/marketplace/hooks'
+
+type SortDropdownProps = {
+  locale?: string
+}
+const SortDropdown = ({
+  locale,
+}: SortDropdownProps) => {
+  const { t } = useMixedTranslation(locale)
+  const options = [
+    {
+      value: 'install_count',
+      order: 'DESC',
+      text: t('plugin.marketplace.sortOption.mostPopular'),
+    },
+    {
+      value: 'version_updated_at',
+      order: 'DESC',
+      text: t('plugin.marketplace.sortOption.recentlyUpdated'),
+    },
+    {
+      value: 'created_at',
+      order: 'DESC',
+      text: t('plugin.marketplace.sortOption.newlyReleased'),
+    },
+    {
+      value: 'created_at',
+      order: 'ASC',
+      text: t('plugin.marketplace.sortOption.firstReleased'),
+    },
+  ]
+  const sort = useMarketplaceContext(v => v.sort)
+  const handleSortChange = useMarketplaceContext(v => v.handleSortChange)
+  const [open, setOpen] = useState(false)
+  const selectedOption = options.find(option => option.value === sort.sortBy && option.order === sort.sortOrder)!
+
+  return (
+    <PortalToFollowElem
+      placement='bottom-start'
+      offset={{
+        mainAxis: 4,
+        crossAxis: 0,
+      }}
+      open={open}
+      onOpenChange={setOpen}
+    >
+      <PortalToFollowElemTrigger onClick={() => setOpen(v => !v)}>
+        <div className='flex items-center px-2 pr-3 h-8 rounded-lg bg-state-base-hover-alt cursor-pointer'>
+          <span className='mr-1 system-sm-regular text-text-secondary'>
+            {t('plugin.marketplace.sortBy')}
+          </span>
+          <span className='mr-1 system-sm-medium text-text-primary'>
+            {selectedOption.text}
+          </span>
+          <RiArrowDownSLine className='w-4 h-4 text-text-tertiary' />
+        </div>
+      </PortalToFollowElemTrigger>
+      <PortalToFollowElemContent>
+        <div className='p-1 rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur backdrop-blur-sm shadow-lg'>
+          {
+            options.map(option => (
+              <div
+                key={`${option.value}-${option.order}`}
+                className='flex items-center justify-between px-3 pr-2 h-8 cursor-pointer system-md-regular text-text-primary rounded-lg hover:bg-components-panel-on-panel-item-bg-hover'
+                onClick={() => handleSortChange({ sortBy: option.value, sortOrder: option.order })}
+              >
+                {option.text}
+                {
+                  sort.sortBy === option.value && sort.sortOrder === option.order && (
+                    <RiCheckLine className='ml-2 w-4 h-4 text-text-accent' />
+                  )
+                }
+              </div>
+            ))
+          }
+        </div>
+      </PortalToFollowElemContent>
+    </PortalToFollowElem>
+  )
+}
+
+export default SortDropdown

dify_1.0.1/web/app/components/plugins/marketplace/types.ts

@@ -0,0 +1,59 @@
+import type { Plugin } from '../types'
+
+export type SearchParamsFromCollection = {
+  query?: string
+  sort_by?: string
+  sort_order?: string
+}
+
+export type MarketplaceCollection = {
+  name: string
+  label: Record<string, string>
+  description: Record<string, string>
+  rule: string
+  created_at: string
+  updated_at: string
+  searchable?: boolean
+  search_params?: SearchParamsFromCollection
+}
+
+export type MarketplaceCollectionsResponse = {
+  collections: MarketplaceCollection[]
+  total: number
+}
+
+export type MarketplaceCollectionPluginsResponse = {
+  plugins: Plugin[]
+  total: number
+}
+
+export type PluginsSearchParams = {
+  query: string
+  page?: number
+  pageSize?: number
+  sortBy?: string
+  sortOrder?: string
+  category?: string
+  tags?: string[]
+  exclude?: string[]
+  type?: 'plugin' | 'bundle'
+}
+
+export type PluginsSort = {
+  sortBy: string
+  sortOrder: string
+}
+
+export type CollectionsAndPluginsSearchParams = {
+  category?: string
+  condition?: string
+  exclude?: string[]
+  type?: 'plugin' | 'bundle'
+}
+
+export type SearchParams = {
+  language?: string
+  q?: string
+  tags?: string
+  category?: string
+}

dify_1.0.1/web/app/components/plugins/marketplace/utils.ts

@@ -0,0 +1,127 @@
+import { PLUGIN_TYPE_SEARCH_MAP } from './plugin-type-switch'
+import type { Plugin } from '@/app/components/plugins/types'
+import { PluginType } from '@/app/components/plugins/types'
+import type {
+  CollectionsAndPluginsSearchParams,
+  MarketplaceCollection,
+} from '@/app/components/plugins/marketplace/types'
+import {
+  MARKETPLACE_API_PREFIX,
+  MARKETPLACE_URL_PREFIX,
+} from '@/config'
+
+export const getPluginIconInMarketplace = (plugin: Plugin) => {
+  if (plugin.type === 'bundle')
+    return `${MARKETPLACE_API_PREFIX}/bundles/${plugin.org}/${plugin.name}/icon`
+  return `${MARKETPLACE_API_PREFIX}/plugins/${plugin.org}/${plugin.name}/icon`
+}
+
+export const getFormattedPlugin = (bundle: any) => {
+  if (bundle.type === 'bundle') {
+    return {
+      ...bundle,
+      icon: getPluginIconInMarketplace(bundle),
+      brief: bundle.description,
+      label: bundle.labels,
+    }
+  }
+  return {
+    ...bundle,
+    icon: getPluginIconInMarketplace(bundle),
+  }
+}
+
+export const getPluginLinkInMarketplace = (plugin: Plugin) => {
+  if (plugin.type === 'bundle')
+    return `${MARKETPLACE_URL_PREFIX}/bundles/${plugin.org}/${plugin.name}`
+  return `${MARKETPLACE_URL_PREFIX}/plugins/${plugin.org}/${plugin.name}`
+}
+
+export const getMarketplacePluginsByCollectionId = async (collectionId: string, query?: CollectionsAndPluginsSearchParams) => {
+  let plugins = [] as Plugin[]
+
+  try {
+    const url = `${MARKETPLACE_API_PREFIX}/collections/${collectionId}/plugins`
+    const marketplaceCollectionPluginsData = await globalThis.fetch(
+      url,
+      {
+        cache: 'no-store',
+        method: 'POST',
+        body: JSON.stringify({
+          category: query?.category,
+          exclude: query?.exclude,
+          type: query?.type,
+        }),
+      },
+    )
+    const marketplaceCollectionPluginsDataJson = await marketplaceCollectionPluginsData.json()
+    plugins = marketplaceCollectionPluginsDataJson.data.plugins.map((plugin: Plugin) => {
+      return getFormattedPlugin(plugin)
+    })
+  }
+  // eslint-disable-next-line unused-imports/no-unused-vars
+  catch (e) {
+    plugins = []
+  }
+
+  return plugins
+}
+
+export const getMarketplaceCollectionsAndPlugins = async (query?: CollectionsAndPluginsSearchParams) => {
+  let marketplaceCollections = [] as MarketplaceCollection[]
+  let marketplaceCollectionPluginsMap = {} as Record<string, Plugin[]>
+  try {
+    let marketplaceUrl = `${MARKETPLACE_API_PREFIX}/collections?page=1&page_size=100`
+    if (query?.condition)
+      marketplaceUrl += `&condition=${query.condition}`
+    if (query?.type)
+      marketplaceUrl += `&type=${query.type}`
+    const marketplaceCollectionsData = await globalThis.fetch(marketplaceUrl, { cache: 'no-store' })
+    const marketplaceCollectionsDataJson = await marketplaceCollectionsData.json()
+    marketplaceCollections = marketplaceCollectionsDataJson.data.collections
+    await Promise.all(marketplaceCollections.map(async (collection: MarketplaceCollection) => {
+      const plugins = await getMarketplacePluginsByCollectionId(collection.name, query)
+
+      marketplaceCollectionPluginsMap[collection.name] = plugins
+    }))
+  }
+  // eslint-disable-next-line unused-imports/no-unused-vars
+  catch (e) {
+    marketplaceCollections = []
+    marketplaceCollectionPluginsMap = {}
+  }
+
+  return {
+    marketplaceCollections,
+    marketplaceCollectionPluginsMap,
+  }
+}
+
+export const getMarketplaceListCondition = (pluginType: string) => {
+  if (pluginType === PluginType.tool)
+    return 'category=tool'
+
+  if (pluginType === PluginType.agent)
+    return 'category=agent-strategy'
+
+  if (pluginType === PluginType.model)
+    return 'category=model'
+
+  if (pluginType === PluginType.extension)
+    return 'category=endpoint'
+
+  if (pluginType === 'bundle')
+    return 'type=bundle'
+
+  return ''
+}
+
+export const getMarketplaceListFilterType = (category: string) => {
+  if (category === PLUGIN_TYPE_SEARCH_MAP.all)
+    return undefined
+
+  if (category === PLUGIN_TYPE_SEARCH_MAP.bundle)
+    return 'bundle'
+
+  return 'plugin'
+}

dify_1.0.1/web/app/components/plugins/permission-setting-modal/modal.tsx

@@ -0,0 +1,93 @@
+'use client'
+import type { FC } from 'react'
+import React, { useCallback, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import Modal from '@/app/components/base/modal'
+import OptionCard from '@/app/components/workflow/nodes/_base/components/option-card'
+import Button from '@/app/components/base/button'
+import type { Permissions } from '@/app/components/plugins/types'
+import { PermissionType } from '@/app/components/plugins/types'
+
+const i18nPrefix = 'plugin.privilege'
+type Props = {
+  payload: Permissions
+  onHide: () => void
+  onSave: (payload: Permissions) => void
+}
+
+const PluginSettingModal: FC<Props> = ({
+  payload,
+  onHide,
+  onSave,
+}) => {
+  const { t } = useTranslation()
+  const [tempPrivilege, setTempPrivilege] = useState<Permissions>(payload)
+  const handlePrivilegeChange = useCallback((key: string) => {
+    return (value: PermissionType) => {
+      setTempPrivilege({
+        ...tempPrivilege,
+        [key]: value,
+      })
+    }
+  }, [tempPrivilege])
+
+  const handleSave = useCallback(async () => {
+    await onSave(tempPrivilege)
+    onHide()
+  }, [onHide, onSave, tempPrivilege])
+
+  return (
+    <Modal
+      isShow
+      onClose={onHide}
+      closable
+      className='!p-0 w-[420px]'
+    >
+      <div className='flex flex-col items-start w-[420px] rounded-2xl border border-components-panel-border bg-components-panel-bg shadows-shadow-xl'>
+        <div className='flex pt-6 pb-3 pl-6 pr-14 items-start gap-2 self-stretch'>
+          <span className='self-stretch text-text-primary title-2xl-semi-bold'>{t(`${i18nPrefix}.title`)}</span>
+        </div>
+        <div className='flex px-6 py-3 flex-col justify-center items-start gap-4 self-stretch'>
+          {[
+            { title: t(`${i18nPrefix}.whoCanInstall`), key: 'install_permission', value: tempPrivilege.install_permission },
+            { title: t(`${i18nPrefix}.whoCanDebug`), key: 'debug_permission', value: tempPrivilege.debug_permission },
+          ].map(({ title, key, value }) => (
+            <div key={key} className='flex flex-col items-start gap-1 self-stretch'>
+              <div className='flex h-6 items-center gap-0.5'>
+                <span className='text-text-secondary system-sm-semibold'>{title}</span>
+              </div>
+              <div className='flex items-start gap-2 justify-between w-full'>
+                {[PermissionType.everyone, PermissionType.admin, PermissionType.noOne].map(option => (
+                  <OptionCard
+                    key={option}
+                    title={t(`${i18nPrefix}.${option}`)}
+                    onSelect={() => handlePrivilegeChange(key)(option)}
+                    selected={value === option}
+                    className="flex-1"
+                  />
+                ))}
+              </div>
+            </div>
+          ))}
+        </div>
+        <div className='flex h-[76px] p-6 pt-5 justify-end items-center gap-2 self-stretch'>
+          <Button
+            className='min-w-[72px]'
+            onClick={onHide}
+          >
+            {t('common.operation.cancel')}
+          </Button>
+          <Button
+            className='min-w-[72px]'
+            variant={'primary'}
+            onClick={handleSave}
+          >
+            {t('common.operation.save')}
+          </Button>
+        </div>
+      </div>
+    </Modal>
+  )
+}
+
+export default React.memo(PluginSettingModal)

dify_1.0.1/web/app/components/plugins/permission-setting-modal/style.module.css

@@ -0,0 +1,7 @@
+.textGradient {
+  background: linear-gradient(92deg, #2250F2 -29.55%, #0EBCF3 75.22%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+  text-fill-color: transparent;
+}

dify_1.0.1/web/app/components/plugins/plugin-detail-panel/action-list.tsx

@@ -0,0 +1,112 @@
+import React, { useMemo, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { useAppContext } from '@/context/app-context'
+import Button from '@/app/components/base/button'
+import Toast from '@/app/components/base/toast'
+import Indicator from '@/app/components/header/indicator'
+import ToolItem from '@/app/components/tools/provider/tool-item'
+import ConfigCredential from '@/app/components/tools/setting/build-in/config-credentials'
+import {
+  useAllToolProviders,
+  useBuiltinTools,
+  useInvalidateAllToolProviders,
+  useRemoveProviderCredentials,
+  useUpdateProviderCredentials,
+} from '@/service/use-tools'
+import type { PluginDetail } from '@/app/components/plugins/types'
+
+type Props = {
+  detail: PluginDetail
+}
+
+const ActionList = ({
+  detail,
+}: Props) => {
+  const { t } = useTranslation()
+  const { isCurrentWorkspaceManager } = useAppContext()
+  const providerBriefInfo = detail.declaration.tool.identity
+  const providerKey = `${detail.plugin_id}/${providerBriefInfo.name}`
+  const { data: collectionList = [] } = useAllToolProviders()
+  const invalidateAllToolProviders = useInvalidateAllToolProviders()
+  const provider = useMemo(() => {
+    return collectionList.find(collection => collection.name === providerKey)
+  }, [collectionList, providerKey])
+  const { data } = useBuiltinTools(providerKey)
+
+  const [showSettingAuth, setShowSettingAuth] = useState(false)
+
+  const handleCredentialSettingUpdate = () => {
+    invalidateAllToolProviders()
+    Toast.notify({
+      type: 'success',
+      message: t('common.api.actionSuccess'),
+    })
+    setShowSettingAuth(false)
+  }
+
+  const { mutate: updatePermission, isPending } = useUpdateProviderCredentials({
+    onSuccess: handleCredentialSettingUpdate,
+  })
+
+  const { mutate: removePermission } = useRemoveProviderCredentials({
+    onSuccess: handleCredentialSettingUpdate,
+  })
+
+  if (!data || !provider)
+    return null
+
+  return (
+    <div className='px-4 pt-2 pb-4'>
+      <div className='mb-1 py-1'>
+        <div className='mb-1 h-6 flex items-center justify-between text-text-secondary system-sm-semibold-uppercase'>
+          {t('plugin.detailPanel.actionNum', { num: data.length, action: data.length > 1 ? 'actions' : 'action' })}
+          {provider.is_team_authorization && provider.allow_delete && (
+            <Button
+              variant='secondary'
+              size='small'
+              onClick={() => setShowSettingAuth(true)}
+              disabled={!isCurrentWorkspaceManager}
+            >
+              <Indicator className='mr-2' color={'green'} />
+              {t('tools.auth.authorized')}
+            </Button>
+          )}
+        </div>
+        {!provider.is_team_authorization && provider.allow_delete && (
+          <Button
+            variant='primary'
+            className='w-full'
+            onClick={() => setShowSettingAuth(true)}
+            disabled={!isCurrentWorkspaceManager}
+          >{t('tools.auth.unauthorized')}</Button>
+        )}
+      </div>
+      <div className='flex flex-col gap-2'>
+        {data.map(tool => (
+          <ToolItem
+            key={`${detail.plugin_id}${tool.name}`}
+            disabled={false}
+            collection={provider}
+            tool={tool}
+            isBuiltIn={true}
+            isModel={false}
+          />
+        ))}
+      </div>
+      {showSettingAuth && (
+        <ConfigCredential
+          collection={provider}
+          onCancel={() => setShowSettingAuth(false)}
+          onSaved={async value => updatePermission({
+            providerName: provider.name,
+            credentials: value,
+          })}
+          onRemove={async () => removePermission(provider.name)}
+          isSaving={isPending}
+        />
+      )}
+    </div>
+  )
+}
+
+export default ActionList

dify_1.0.1/web/app/components/plugins/plugin-detail-panel/agent-strategy-list.tsx

@@ -0,0 +1,58 @@
+import React, { useMemo } from 'react'
+import { useTranslation } from 'react-i18next'
+import StrategyItem from '@/app/components/plugins/plugin-detail-panel/strategy-item'
+import {
+  useStrategyProviderDetail,
+} from '@/service/use-strategy'
+import type { PluginDetail } from '@/app/components/plugins/types'
+
+type Props = {
+  detail: PluginDetail
+}
+
+const AgentStrategyList = ({
+  detail,
+}: Props) => {
+  const { t } = useTranslation()
+  const providerBriefInfo = detail.declaration.agent_strategy.identity
+  const providerKey = `${detail.plugin_id}/${providerBriefInfo.name}`
+  const { data: strategyProviderDetail } = useStrategyProviderDetail(providerKey)
+
+  const providerDetail = useMemo(() => {
+    return {
+      ...strategyProviderDetail?.declaration.identity,
+      tenant_id: detail.tenant_id,
+    }
+  }, [detail.tenant_id, strategyProviderDetail?.declaration.identity])
+
+  const strategyList = useMemo(() => {
+    if (!strategyProviderDetail)
+      return []
+
+    return strategyProviderDetail.declaration.strategies
+  }, [strategyProviderDetail])
+
+  if (!strategyProviderDetail)
+    return null
+
+  return (
+    <div className='px-4 pt-2 pb-4'>
+      <div className='mb-1 py-1'>
+        <div className='mb-1 h-6 flex items-center justify-between text-text-secondary system-sm-semibold-uppercase'>
+          {t('plugin.detailPanel.strategyNum', { num: strategyList.length, strategy: strategyList.length > 1 ? 'strategies' : 'strategy' })}
+        </div>
+      </div>
+      <div className='flex flex-col gap-2'>
+        {strategyList.map(strategyDetail => (
+          <StrategyItem
+            key={`${strategyDetail.identity.provider}${strategyDetail.identity.name}`}
+            provider={providerDetail as any}
+            detail={strategyDetail}
+          />
+        ))}
+      </div>
+    </div>
+  )
+}
+
+export default AgentStrategyList

dify_1.0.1/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

dify_1.0.1/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 ? '' : 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

dify_1.0.1/web/app/components/plugins/plugin-detail-panel/app-selector/app-picker.tsx

@@ -0,0 +1,123 @@
+'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[]
+  scope: string
+  disabled: boolean
+  trigger: React.ReactNode
+  placement?: Placement
+  offset?: OffsetOptions
+  isShow: boolean
+  onShowChange: (isShow: boolean) => void
+  onSelect: (app: App) => void
+}
+
+const AppPicker: FC<Props> = ({
+  scope,
+  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)
+      .filter(app => scope === 'all'
+      || (scope === 'completion' && app.mode === 'completion')
+      || (scope === 'workflow' && app.mode === 'workflow')
+      || (scope === 'chat' && app.mode === 'advanced-chat')
+      || (scope === 'chat' && app.mode === 'agent-chat')
+      || (scope === 'chat' && app.mode === 'chat'))
+  }, [appList, scope, 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 backdrop-blur-sm 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)

dify_1.0.1/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

dify_1.0.1/web/app/components/plugins/plugin-detail-panel/app-selector/index.tsx

@@ -0,0 +1,143 @@
+'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[]
+  }
+  scope?: string
+  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,
+  scope,
+  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 backdrop-blur-sm 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}
+                scope={scope || 'all'}
+              />
+            </div>
+            {/* app inputs config panel */}
+            {currentAppInfo && (
+              <AppInputsPanel
+                value={formattedValue}
+                appDetail={currentAppInfo}
+                onFormChange={handleFormChange}
+              />
+            )}
+          </div>
+        </PortalToFollowElemContent>
+      </PortalToFollowElem>
+    </>
+  )
+}
+export default React.memo(AppSelector)

dify_1.0.1/web/app/components/plugins/plugin-detail-panel/detail-header.tsx

@@ -0,0 +1,310 @@
+import React, { useCallback, useMemo, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { useBoolean } from 'ahooks'
+import {
+  RiArrowLeftRightLine,
+  RiBugLine,
+  RiCloseLine,
+  RiHardDrive3Line,
+  RiVerifiedBadgeLine,
+} from '@remixicon/react'
+import type { PluginDetail } from '../types'
+import { PluginSource, PluginType } from '../types'
+import Description from '../card/base/description'
+import Icon from '../card/base/card-icon'
+import Title from '../card/base/title'
+import OrgInfo from '../card/base/org-info'
+import { useGitHubReleases } from '../install-plugin/hooks'
+import PluginVersionPicker from '@/app/components/plugins/update-plugin/plugin-version-picker'
+import UpdateFromMarketplace from '@/app/components/plugins/update-plugin/from-market-place'
+import OperationDropdown from '@/app/components/plugins/plugin-detail-panel/operation-dropdown'
+import PluginInfo from '@/app/components/plugins/plugin-page/plugin-info'
+import ActionButton from '@/app/components/base/action-button'
+import Button from '@/app/components/base/button'
+import Badge from '@/app/components/base/badge'
+import Confirm from '@/app/components/base/confirm'
+import Tooltip from '@/app/components/base/tooltip'
+import Toast from '@/app/components/base/toast'
+import { BoxSparkleFill } from '@/app/components/base/icons/src/vender/plugin'
+import { Github } from '@/app/components/base/icons/src/public/common'
+import { uninstallPlugin } from '@/service/plugins'
+import { useGetLanguage } from '@/context/i18n'
+import { useModalContext } from '@/context/modal-context'
+import { useProviderContext } from '@/context/provider-context'
+import { useInvalidateAllToolProviders } from '@/service/use-tools'
+import { API_PREFIX, MARKETPLACE_URL_PREFIX } from '@/config'
+import cn from '@/utils/classnames'
+
+const i18nPrefix = 'plugin.action'
+
+type Props = {
+  detail: PluginDetail
+  onHide: () => void
+  onUpdate: (isDelete?: boolean) => void
+}
+
+const DetailHeader = ({
+  detail,
+  onHide,
+  onUpdate,
+}: Props) => {
+  const { t } = useTranslation()
+  const locale = useGetLanguage()
+  const { checkForUpdates, fetchReleases } = useGitHubReleases()
+  const { setShowUpdatePluginModal } = useModalContext()
+  const { refreshModelProviders } = useProviderContext()
+  const invalidateAllToolProviders = useInvalidateAllToolProviders()
+
+  const {
+    installation_id,
+    source,
+    tenant_id,
+    version,
+    latest_unique_identifier,
+    latest_version,
+    meta,
+    plugin_id,
+  } = detail
+  const { author, category, name, label, description, icon, verified } = detail.declaration
+  const isFromGitHub = source === PluginSource.github
+  const isFromMarketplace = source === PluginSource.marketplace
+
+  const [isShow, setIsShow] = useState(false)
+  const [targetVersion, setTargetVersion] = useState({
+    version: latest_version,
+    unique_identifier: latest_unique_identifier,
+  })
+  const hasNewVersion = useMemo(() => {
+    if (isFromMarketplace)
+      return !!latest_version && latest_version !== version
+
+    return false
+  }, [isFromMarketplace, latest_version, version])
+
+  const detailUrl = useMemo(() => {
+    if (isFromGitHub)
+      return `https://github.com/${meta!.repo}`
+    if (isFromMarketplace)
+      return `${MARKETPLACE_URL_PREFIX}/plugins/${author}/${name}`
+    return ''
+  }, [author, isFromGitHub, isFromMarketplace, meta, name])
+
+  const [isShowUpdateModal, {
+    setTrue: showUpdateModal,
+    setFalse: hideUpdateModal,
+  }] = useBoolean(false)
+
+  const handleUpdate = async () => {
+    if (isFromMarketplace) {
+      showUpdateModal()
+      return
+    }
+
+    const owner = meta!.repo.split('/')[0] || author
+    const repo = meta!.repo.split('/')[1] || name
+    const fetchedReleases = await fetchReleases(owner, repo)
+    if (fetchedReleases.length === 0) return
+    const { needUpdate, toastProps } = checkForUpdates(fetchedReleases, meta!.version)
+    Toast.notify(toastProps)
+    if (needUpdate) {
+      setShowUpdatePluginModal({
+        onSaveCallback: () => {
+          onUpdate()
+        },
+        payload: {
+          type: PluginSource.github,
+          category: detail.declaration.category,
+          github: {
+            originalPackageInfo: {
+              id: detail.plugin_unique_identifier,
+              repo: meta!.repo,
+              version: meta!.version,
+              package: meta!.package,
+              releases: fetchedReleases,
+            },
+          },
+        },
+      })
+    }
+  }
+
+  const handleUpdatedFromMarketplace = () => {
+    onUpdate()
+    hideUpdateModal()
+  }
+
+  const [isShowPluginInfo, {
+    setTrue: showPluginInfo,
+    setFalse: hidePluginInfo,
+  }] = useBoolean(false)
+
+  const [isShowDeleteConfirm, {
+    setTrue: showDeleteConfirm,
+    setFalse: hideDeleteConfirm,
+  }] = useBoolean(false)
+
+  const [deleting, {
+    setTrue: showDeleting,
+    setFalse: hideDeleting,
+  }] = useBoolean(false)
+
+  const handleDelete = useCallback(async () => {
+    showDeleting()
+    const res = await uninstallPlugin(installation_id)
+    hideDeleting()
+    if (res.success) {
+      hideDeleteConfirm()
+      onUpdate(true)
+      if (PluginType.model.includes(category))
+        refreshModelProviders()
+      if (PluginType.tool.includes(category))
+        invalidateAllToolProviders()
+    }
+  }, [showDeleting, installation_id, hideDeleting, hideDeleteConfirm, onUpdate, category, refreshModelProviders, invalidateAllToolProviders])
+
+  // #plugin TODO# used in apps
+  // const usedInApps = 3
+
+  return (
+    <div className={cn('shrink-0 p-4 pb-3 border-b border-divider-subtle bg-components-panel-bg')}>
+      <div className="flex">
+        <div className='overflow-hidden border-components-panel-border-subtle border rounded-xl'>
+          <Icon src={`${API_PREFIX}/workspaces/current/plugin/icon?tenant_id=${tenant_id}&filename=${icon}`} />
+        </div>
+        <div className="ml-3 w-0 grow">
+          <div className="flex items-center h-5">
+            <Title title={label[locale]} />
+            {verified && <RiVerifiedBadgeLine className="shrink-0 ml-0.5 w-4 h-4 text-text-accent" />}
+            <PluginVersionPicker
+              disabled={!isFromMarketplace}
+              isShow={isShow}
+              onShowChange={setIsShow}
+              pluginID={plugin_id}
+              currentVersion={version}
+              onSelect={(state) => {
+                setTargetVersion(state)
+                handleUpdate()
+              }}
+              trigger={
+                <Badge
+                  className={cn(
+                    'mx-1',
+                    isShow && 'bg-state-base-hover',
+                    (isShow || isFromMarketplace) && 'hover:bg-state-base-hover',
+                  )}
+                  uppercase={false}
+                  text={
+                    <>
+                      <div>{isFromGitHub ? meta!.version : version}</div>
+                      {isFromMarketplace && <RiArrowLeftRightLine className='ml-1 w-3 h-3 text-text-tertiary' />}
+                    </>
+                  }
+                  hasRedCornerMark={hasNewVersion}
+                />
+              }
+            />
+            {(hasNewVersion || isFromGitHub) && (
+              <Button variant='secondary-accent' size='small' className='!h-5' onClick={() => {
+                if (isFromMarketplace) {
+                  setTargetVersion({
+                    version: latest_version,
+                    unique_identifier: latest_unique_identifier,
+                  })
+                }
+                handleUpdate()
+              }}>{t('plugin.detailPanel.operation.update')}</Button>
+            )}
+          </div>
+          <div className='mb-1 flex justify-between items-center h-4'>
+            <div className='mt-0.5 flex items-center'>
+              <OrgInfo
+                packageNameClassName='w-auto'
+                orgName={author}
+                packageName={name}
+              />
+              <div className='ml-1 mr-0.5 text-text-quaternary system-xs-regular'>·</div>
+              {detail.source === PluginSource.marketplace && (
+                <Tooltip popupContent={t('plugin.detailPanel.categoryTip.marketplace')} >
+                  <div><BoxSparkleFill className='w-3.5 h-3.5 text-text-tertiary hover:text-text-accent' /></div>
+                </Tooltip>
+              )}
+              {detail.source === PluginSource.github && (
+                <Tooltip popupContent={t('plugin.detailPanel.categoryTip.github')} >
+                  <div><Github className='w-3.5 h-3.5 text-text-secondary hover:text-text-primary' /></div>
+                </Tooltip>
+              )}
+              {detail.source === PluginSource.local && (
+                <Tooltip popupContent={t('plugin.detailPanel.categoryTip.local')} >
+                  <div><RiHardDrive3Line className='w-3.5 h-3.5 text-text-tertiary' /></div>
+                </Tooltip>
+              )}
+              {detail.source === PluginSource.debugging && (
+                <Tooltip popupContent={t('plugin.detailPanel.categoryTip.debugging')} >
+                  <div><RiBugLine className='w-3.5 h-3.5 text-text-tertiary hover:text-text-warning' /></div>
+                </Tooltip>
+              )}
+            </div>
+          </div>
+        </div>
+        <div className='flex gap-1'>
+          <OperationDropdown
+            source={detail.source}
+            onInfo={showPluginInfo}
+            onCheckVersion={handleUpdate}
+            onRemove={showDeleteConfirm}
+            detailUrl={detailUrl}
+          />
+          <ActionButton onClick={onHide}>
+            <RiCloseLine className='w-4 h-4' />
+          </ActionButton>
+        </div>
+      </div>
+      <Description className='mt-3' text={description[locale]} descriptionLineRows={2}></Description>
+      {isShowPluginInfo && (
+        <PluginInfo
+          repository={isFromGitHub ? meta?.repo : ''}
+          release={version}
+          packageName={meta?.package || ''}
+          onHide={hidePluginInfo}
+        />
+      )}
+      {isShowDeleteConfirm && (
+        <Confirm
+          isShow
+          title={t(`${i18nPrefix}.delete`)}
+          content={
+            <div>
+              {t(`${i18nPrefix}.deleteContentLeft`)}<span className='system-md-semibold'>{label[locale]}</span>{t(`${i18nPrefix}.deleteContentRight`)}<br />
+              {/* {usedInApps > 0 && t(`${i18nPrefix}.usedInApps`, { num: usedInApps })} */}
+            </div>
+          }
+          onCancel={hideDeleteConfirm}
+          onConfirm={handleDelete}
+          isLoading={deleting}
+          isDisabled={deleting}
+        />
+      )}
+      {
+        isShowUpdateModal && (
+          <UpdateFromMarketplace
+            payload={{
+              category: detail.declaration.category,
+              originalPackageInfo: {
+                id: detail.plugin_unique_identifier,
+                payload: detail.declaration,
+              },
+              targetPackageInfo: {
+                id: targetVersion.unique_identifier,
+                version: targetVersion.version,
+              },
+            }}
+            onCancel={hideUpdateModal}
+            onSave={handleUpdatedFromMarketplace}
+          />
+        )
+      }
+    </div>
+  )
+}
+
+export default DetailHeader

dify_1.0.1/web/app/components/plugins/plugin-detail-panel/endpoint-card.tsx

@@ -0,0 +1,219 @@
+import React, { useEffect, useMemo, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { useBoolean } from 'ahooks'
+import copy from 'copy-to-clipboard'
+import { RiClipboardLine, RiDeleteBinLine, RiEditLine, RiLoginCircleLine } from '@remixicon/react'
+import type { EndpointListItem } from '../types'
+import EndpointModal from './endpoint-modal'
+import { NAME_FIELD } from './utils'
+import { addDefaultValue, toolCredentialToFormSchemas } from '@/app/components/tools/utils/to-form-schema'
+import { ClipboardCheck } from '@/app/components/base/icons/src/vender/line/files'
+import ActionButton from '@/app/components/base/action-button'
+import Confirm from '@/app/components/base/confirm'
+import Indicator from '@/app/components/header/indicator'
+import Switch from '@/app/components/base/switch'
+import Toast from '@/app/components/base/toast'
+import Tooltip from '@/app/components/base/tooltip'
+import {
+  useDeleteEndpoint,
+  useDisableEndpoint,
+  useEnableEndpoint,
+  useUpdateEndpoint,
+} from '@/service/use-endpoints'
+
+type Props = {
+  data: EndpointListItem
+  handleChange: () => void
+}
+
+const EndpointCard = ({
+  data,
+  handleChange,
+}: Props) => {
+  const { t } = useTranslation()
+  const [active, setActive] = useState(data.enabled)
+  const endpointID = data.id
+
+  // switch
+  const [isShowDisableConfirm, {
+    setTrue: showDisableConfirm,
+    setFalse: hideDisableConfirm,
+  }] = useBoolean(false)
+  const { mutate: enableEndpoint } = useEnableEndpoint({
+    onSuccess: async () => {
+      await handleChange()
+    },
+    onError: () => {
+      Toast.notify({ type: 'error', message: t('common.actionMsg.modifiedUnsuccessfully') })
+      setActive(false)
+    },
+  })
+  const { mutate: disableEndpoint } = useDisableEndpoint({
+    onSuccess: async () => {
+      await handleChange()
+      hideDisableConfirm()
+    },
+    onError: () => {
+      Toast.notify({ type: 'error', message: t('common.actionMsg.modifiedUnsuccessfully') })
+      setActive(false)
+    },
+  })
+  const handleSwitch = (state: boolean) => {
+    if (state) {
+      setActive(true)
+      enableEndpoint(endpointID)
+    }
+    else {
+      setActive(false)
+      showDisableConfirm()
+    }
+  }
+
+  // delete
+  const [isShowDeleteConfirm, {
+    setTrue: showDeleteConfirm,
+    setFalse: hideDeleteConfirm,
+  }] = useBoolean(false)
+  const { mutate: deleteEndpoint } = useDeleteEndpoint({
+    onSuccess: async () => {
+      await handleChange()
+      hideDeleteConfirm()
+    },
+    onError: () => {
+      Toast.notify({ type: 'error', message: t('common.actionMsg.modifiedUnsuccessfully') })
+    },
+  })
+
+  // update
+  const [isShowEndpointModal, {
+    setTrue: showEndpointModalConfirm,
+    setFalse: hideEndpointModalConfirm,
+  }] = useBoolean(false)
+  const formSchemas = useMemo(() => {
+    return toolCredentialToFormSchemas([NAME_FIELD, ...data.declaration.settings])
+  }, [data.declaration.settings])
+  const formValue = useMemo(() => {
+    const formValue = {
+      name: data.name,
+      ...data.settings,
+    }
+    return addDefaultValue(formValue, formSchemas)
+  }, [data.name, data.settings, formSchemas])
+  const { mutate: updateEndpoint } = useUpdateEndpoint({
+    onSuccess: async () => {
+      await handleChange()
+      hideEndpointModalConfirm()
+    },
+    onError: () => {
+      Toast.notify({ type: 'error', message: t('common.actionMsg.modifiedUnsuccessfully') })
+    },
+  })
+  const handleUpdate = (state: any) => updateEndpoint({
+    endpointID,
+    state,
+  })
+
+  const [isCopied, setIsCopied] = useState(false)
+  const handleCopy = (value: string) => {
+    copy(value)
+    setIsCopied(true)
+  }
+
+  useEffect(() => {
+    if (isCopied) {
+      const timer = setTimeout(() => {
+        setIsCopied(false)
+      }, 2000)
+      return () => {
+        clearTimeout(timer)
+      }
+    }
+  }, [isCopied])
+
+  const CopyIcon = isCopied ? ClipboardCheck : RiClipboardLine
+
+  return (
+    <div className='p-0.5 bg-background-section-burn rounded-xl'>
+      <div className='group p-2.5 pl-3 bg-components-panel-on-panel-item-bg rounded-[10px] border-[0.5px] border-components-panel-border'>
+        <div className='flex items-center'>
+          <div className='grow mb-1 h-6 flex items-center gap-1 text-text-secondary system-md-semibold'>
+            <RiLoginCircleLine className='w-4 h-4' />
+            <div>{data.name}</div>
+          </div>
+          <div className='hidden group-hover:flex items-center'>
+            <ActionButton onClick={showEndpointModalConfirm}>
+              <RiEditLine className='w-4 h-4' />
+            </ActionButton>
+            <ActionButton onClick={showDeleteConfirm} className='hover:bg-state-destructive-hover text-text-tertiary hover:text-text-destructive'>
+              <RiDeleteBinLine className='w-4 h-4' />
+            </ActionButton>
+          </div>
+        </div>
+        {data.declaration.endpoints.map((endpoint, index) => (
+          <div key={index} className='h-6 flex items-center'>
+            <div className='shrink-0 w-12 text-text-tertiary system-xs-regular'>{endpoint.method}</div>
+            <div className='group/item grow flex items-center text-text-secondary system-xs-regular truncate'>
+              <div title={`${data.url}${endpoint.path}`} className='truncate'>{`${data.url}${endpoint.path}`}</div>
+              <Tooltip popupContent={t(`common.operation.${isCopied ? 'copied' : 'copy'}`)} position='top'>
+                <ActionButton className='hidden shrink-0 ml-2 group-hover/item:flex' onClick={() => handleCopy(`${data.url}${endpoint.path}`)}>
+                  <CopyIcon className='w-3.5 h-3.5 text-text-tertiary' />
+                </ActionButton>
+              </Tooltip>
+            </div>
+          </div>
+        ))}
+      </div>
+      <div className='p-2 pl-3 flex items-center justify-between'>
+        {active && (
+          <div className='flex items-center gap-1 system-xs-semibold-uppercase text-util-colors-green-green-600'>
+            <Indicator color='green' />
+            {t('plugin.detailPanel.serviceOk')}
+          </div>
+        )}
+        {!active && (
+          <div className='flex items-center gap-1 system-xs-semibold-uppercase text-text-tertiary'>
+            <Indicator color='gray' />
+            {t('plugin.detailPanel.disabled')}
+          </div>
+        )}
+        <Switch
+          className='ml-3'
+          defaultValue={active}
+          onChange={handleSwitch}
+          size='sm'
+        />
+      </div>
+      {isShowDisableConfirm && (
+        <Confirm
+          isShow
+          title={t('plugin.detailPanel.endpointDisableTip')}
+          content={<div>{t('plugin.detailPanel.endpointDisableContent', { name: data.name })}</div>}
+          onCancel={() => {
+            hideDisableConfirm()
+            setActive(true)
+          }}
+          onConfirm={() => disableEndpoint(endpointID)}
+        />
+      )}
+      {isShowDeleteConfirm && (
+        <Confirm
+          isShow
+          title={t('plugin.detailPanel.endpointDeleteTip')}
+          content={<div>{t('plugin.detailPanel.endpointDeleteContent', { name: data.name })}</div>}
+          onCancel={hideDeleteConfirm}
+          onConfirm={() => deleteEndpoint(endpointID)}
+        />
+      )}
+      {isShowEndpointModal && (
+        <EndpointModal
+          formSchemas={formSchemas}
+          defaultValues={formValue}
+          onCancel={hideEndpointModalConfirm}
+          onSaved={handleUpdate}
+        />
+      )}
+    </div>
+  )
+}
+
+export default EndpointCard

dify_1.0.1/web/app/components/plugins/plugin-detail-panel/endpoint-list.tsx

@@ -0,0 +1,122 @@
+import React, { useMemo } from 'react'
+import { useTranslation } from 'react-i18next'
+import { useContext } from 'use-context-selector'
+import { useBoolean } from 'ahooks'
+import {
+  RiAddLine,
+  RiApps2AddLine,
+  RiBookOpenLine,
+} from '@remixicon/react'
+import EndpointModal from './endpoint-modal'
+import EndpointCard from './endpoint-card'
+import { NAME_FIELD } from './utils'
+import { toolCredentialToFormSchemas } from '@/app/components/tools/utils/to-form-schema'
+import ActionButton from '@/app/components/base/action-button'
+import Tooltip from '@/app/components/base/tooltip'
+import Toast from '@/app/components/base/toast'
+import {
+  useCreateEndpoint,
+  useEndpointList,
+  useInvalidateEndpointList,
+} from '@/service/use-endpoints'
+import type { PluginDetail } from '@/app/components/plugins/types'
+import { LanguagesSupported } from '@/i18n/language'
+import I18n from '@/context/i18n'
+import cn from '@/utils/classnames'
+
+type Props = {
+  detail: PluginDetail
+}
+const EndpointList = ({ detail }: Props) => {
+  const { t } = useTranslation()
+  const { locale } = useContext(I18n)
+  const pluginUniqueID = detail.plugin_unique_identifier
+  const declaration = detail.declaration.endpoint
+  const showTopBorder = detail.declaration.tool
+  const { data } = useEndpointList(detail.plugin_id)
+  const invalidateEndpointList = useInvalidateEndpointList()
+
+  const [isShowEndpointModal, {
+    setTrue: showEndpointModal,
+    setFalse: hideEndpointModal,
+  }] = useBoolean(false)
+
+  const formSchemas = useMemo(() => {
+    return toolCredentialToFormSchemas([NAME_FIELD, ...declaration.settings])
+  }, [declaration.settings])
+
+  const { mutate: createEndpoint } = useCreateEndpoint({
+    onSuccess: async () => {
+      await invalidateEndpointList(detail.plugin_id)
+      hideEndpointModal()
+    },
+    onError: () => {
+      Toast.notify({ type: 'error', message: t('common.actionMsg.modifiedUnsuccessfully') })
+    },
+  })
+
+  const handleCreate = (state: any) => createEndpoint({
+    pluginUniqueID,
+    state,
+  })
+
+  if (!data)
+    return null
+
+  return (
+    <div className={cn('px-4 py-2 border-divider-subtle', showTopBorder && 'border-t')}>
+      <div className='mb-1 h-6 flex items-center justify-between text-text-secondary system-sm-semibold-uppercase'>
+        <div className='flex items-center gap-0.5'>
+          {t('plugin.detailPanel.endpoints')}
+          <Tooltip
+            position='right'
+            needsDelay
+            popupClassName='w-[240px] p-4 rounded-xl bg-components-panel-bg-blur border-[0.5px] border-components-panel-border'
+            popupContent={
+              <div className='flex flex-col gap-2'>
+                <div className='w-8 h-8 flex items-center justify-center bg-background-default-subtle rounded-lg border-[0.5px] border-components-panel-border-subtle'>
+                  <RiApps2AddLine className='w-4 h-4 text-text-tertiary' />
+                </div>
+                <div className='text-text-tertiary system-xs-regular'>{t('plugin.detailPanel.endpointsTip')}</div>
+                <a
+                  href={`https://docs.dify.ai/${locale === LanguagesSupported[1] ? 'v/zh-hans/' : ''}plugins/schema-definition/endpoint`}
+                  target='_blank'
+                  rel='noopener noreferrer'
+                >
+                  <div className='inline-flex items-center gap-1 text-text-accent system-xs-regular cursor-pointer'>
+                    <RiBookOpenLine className='w-3 h-3' />
+                    {t('plugin.detailPanel.endpointsDocLink')}
+                  </div>
+                </a>
+              </div>
+            }
+          />
+        </div>
+        <ActionButton onClick={showEndpointModal}>
+          <RiAddLine className='w-4 h-4' />
+        </ActionButton>
+      </div>
+      {data.endpoints.length === 0 && (
+        <div className='mb-1 p-3 flex justify-center rounded-[10px] bg-background-section text-text-tertiary system-xs-regular'>{t('plugin.detailPanel.endpointsEmpty')}</div>
+      )}
+      <div className='flex flex-col gap-2'>
+        {data.endpoints.map((item, index) => (
+          <EndpointCard
+            key={index}
+            data={item}
+            handleChange={() => invalidateEndpointList(detail.plugin_id)}
+          />
+        ))}
+      </div>
+      {isShowEndpointModal && (
+        <EndpointModal
+          formSchemas={formSchemas}
+          onCancel={hideEndpointModal}
+          onSaved={handleCreate}
+        />
+      )}
+    </div>
+  )
+}
+
+export default EndpointList

dify_1.0.1/web/app/components/plugins/plugin-detail-panel/endpoint-modal.tsx

@@ -0,0 +1,96 @@
+'use client'
+import type { FC } from 'react'
+import React from 'react'
+import { useTranslation } from 'react-i18next'
+import { RiArrowRightUpLine, RiCloseLine } from '@remixicon/react'
+import ActionButton from '@/app/components/base/action-button'
+import Button from '@/app/components/base/button'
+import Drawer from '@/app/components/base/drawer'
+import Form from '@/app/components/header/account-setting/model-provider-page/model-modal/Form'
+import Toast from '@/app/components/base/toast'
+import { useRenderI18nObject } from '@/hooks/use-i18n'
+import cn from '@/utils/classnames'
+
+type Props = {
+  formSchemas: any
+  defaultValues?: any
+  onCancel: () => void
+  onSaved: (value: Record<string, any>) => void
+}
+
+const EndpointModal: FC<Props> = ({
+  formSchemas,
+  defaultValues = {},
+  onCancel,
+  onSaved,
+}) => {
+  const getValueFromI18nObject = useRenderI18nObject()
+  const { t } = useTranslation()
+  const [tempCredential, setTempCredential] = React.useState<any>(defaultValues)
+
+  const handleSave = () => {
+    for (const field of formSchemas) {
+      if (field.required && !tempCredential[field.name]) {
+        Toast.notify({ type: 'error', message: t('common.errorMsg.fieldRequired', { field: getValueFromI18nObject(field.label) }) })
+        return
+      }
+    }
+    onSaved(tempCredential)
+  }
+
+  return (
+    <Drawer
+      isOpen
+      clickOutsideNotOpen={false}
+      onClose={onCancel}
+      footer={null}
+      mask
+      positionCenter={false}
+      panelClassname={cn('justify-start mt-[64px] mr-2 mb-2 !w-[420px] !max-w-[420px] !p-0 !bg-components-panel-bg rounded-2xl border-[0.5px] border-components-panel-border shadow-xl')}
+    >
+      <>
+        <div className='p-4 pb-2'>
+          <div className='flex items-center justify-between'>
+            <div className='text-text-primary system-xl-semibold'>{t('plugin.detailPanel.endpointModalTitle')}</div>
+            <ActionButton onClick={onCancel}>
+              <RiCloseLine className='w-4 h-4' />
+            </ActionButton>
+          </div>
+          <div className='mt-0.5 text-text-tertiary system-xs-regular'>{t('plugin.detailPanel.endpointModalDesc')}</div>
+        </div>
+        <div className='grow overflow-y-auto'>
+          <div className='px-4 py-2'>
+            <Form
+              value={tempCredential}
+              onChange={(v) => {
+                setTempCredential(v)
+              }}
+              formSchemas={formSchemas}
+              isEditMode={true}
+              showOnVariableMap={{}}
+              validating={false}
+              inputClassName='bg-components-input-bg-normal hover:bg-components-input-bg-hover'
+              fieldMoreInfo={item => item.url
+                ? (<a
+                  href={item.url}
+                  target='_blank' rel='noopener noreferrer'
+                  className='inline-flex items-center body-xs-regular text-text-accent-secondary'
+                >
+                  {t('tools.howToGet')}
+                  <RiArrowRightUpLine className='ml-1 w-3 h-3' />
+                </a>)
+                : null}
+            />
+          </div>
+          <div className={cn('p-4 pt-0 flex justify-end')} >
+            <div className='flex gap-2'>
+              <Button onClick={onCancel}>{t('common.operation.cancel')}</Button>
+              <Button variant='primary' onClick={handleSave}>{t('common.operation.save')}</Button>
+            </div>
+          </div>
+        </div>
+      </>
+    </Drawer>
+  )
+}
+export default React.memo(EndpointModal)

dify_1.0.1/web/app/components/plugins/plugin-detail-panel/index.tsx

@@ -0,0 +1,62 @@
+'use client'
+import React from 'react'
+import type { FC } from 'react'
+import DetailHeader from './detail-header'
+import EndpointList from './endpoint-list'
+import ActionList from './action-list'
+import ModelList from './model-list'
+import AgentStrategyList from './agent-strategy-list'
+import Drawer from '@/app/components/base/drawer'
+import type { PluginDetail } from '@/app/components/plugins/types'
+import cn from '@/utils/classnames'
+
+type Props = {
+  detail?: PluginDetail
+  onUpdate: () => void
+  onHide: () => void
+}
+
+const PluginDetailPanel: FC<Props> = ({
+  detail,
+  onUpdate,
+  onHide,
+}) => {
+  const handleUpdate = (isDelete = false) => {
+    if (isDelete)
+      onHide()
+    onUpdate()
+  }
+
+  if (!detail)
+    return null
+
+  return (
+    <Drawer
+      isOpen={!!detail}
+      clickOutsideNotOpen={false}
+      onClose={onHide}
+      footer={null}
+      mask={false}
+      positionCenter={false}
+      panelClassname={cn('justify-start mt-[64px] mr-2 mb-2 !w-[420px] !max-w-[420px] !p-0 !bg-components-panel-bg rounded-2xl border-[0.5px] border-components-panel-border shadow-xl')}
+    >
+      {detail && (
+        <>
+          <DetailHeader
+            detail={detail}
+            onHide={onHide}
+            onUpdate={handleUpdate}
+          />
+          <div className='grow overflow-y-auto'>
+            {!!detail.declaration.tool && <ActionList detail={detail} />}
+            {!!detail.declaration.agent_strategy && <AgentStrategyList detail={detail} />}
+            {!!detail.declaration.endpoint && <EndpointList detail={detail} />}
+            {!!detail.declaration.model && <ModelList detail={detail} />}
+          </div>
+        </>
+      )}
+    </Drawer>
+  )
+}
+
+export default PluginDetailPanel

dify_1.0.1/web/app/components/plugins/plugin-detail-panel/model-list.tsx

@@ -0,0 +1,46 @@
+import React from 'react'
+import { useTranslation } from 'react-i18next'
+import ModelIcon from '@/app/components/header/account-setting/model-provider-page/model-icon'
+import ModelName from '@/app/components/header/account-setting/model-provider-page/model-name'
+import { useModelProviderModelList } from '@/service/use-models'
+import type { PluginDetail } from '@/app/components/plugins/types'
+
+type Props = {
+  detail: PluginDetail
+}
+
+const ModelList = ({
+  detail,
+}: Props) => {
+  const { t } = useTranslation()
+  const { data: res } = useModelProviderModelList(`${detail.plugin_id}/${detail.declaration.model.provider}`)
+
+  if (!res)
+    return null
+
+  return (
+    <div className='px-4 py-2'>
+      <div className='mb-1 h-6 flex items-center text-text-secondary system-sm-semibold-uppercase'>{t('plugin.detailPanel.modelNum', { num: res.data.length })}</div>
+      <div className='flex flex-col'>
+        {res.data.map(model => (
+          <div key={model.model} className='h-6 py-1 flex items-center'>
+            <ModelIcon
+              className='shrink-0 mr-2'
+              provider={(model as any).provider}
+              modelName={model.model}
+            />
+            <ModelName
+              className='grow text-text-secondary system-md-regular'
+              modelItem={model}
+              showModelType
+              showMode
+              showContextSize
+            />
+          </div>
+        ))}
+      </div>
+    </div>
+  )
+}
+
+export default ModelList

dify_1.0.1/web/app/components/plugins/plugin-detail-panel/model-selector/index.tsx

@@ -0,0 +1,251 @@
+import type {
+  FC,
+  ReactNode,
+} from 'react'
+import { useMemo, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import type {
+  DefaultModel,
+  FormValue,
+} from '@/app/components/header/account-setting/model-provider-page/declarations'
+import { ModelStatusEnum, ModelTypeEnum } from '@/app/components/header/account-setting/model-provider-page/declarations'
+import ModelSelector from '@/app/components/header/account-setting/model-provider-page/model-selector'
+import {
+  useModelList,
+} from '@/app/components/header/account-setting/model-provider-page/hooks'
+import AgentModelTrigger from '@/app/components/header/account-setting/model-provider-page/model-parameter-modal/agent-model-trigger'
+import Trigger from '@/app/components/header/account-setting/model-provider-page/model-parameter-modal/trigger'
+import type { TriggerProps } from '@/app/components/header/account-setting/model-provider-page/model-parameter-modal/trigger'
+import {
+  PortalToFollowElem,
+  PortalToFollowElemContent,
+  PortalToFollowElemTrigger,
+} from '@/app/components/base/portal-to-follow-elem'
+import LLMParamsPanel from './llm-params-panel'
+import TTSParamsPanel from './tts-params-panel'
+import { useProviderContext } from '@/context/provider-context'
+import cn from '@/utils/classnames'
+
+export type ModelParameterModalProps = {
+  popupClassName?: string
+  portalToFollowElemContentClassName?: string
+  isAdvancedMode: boolean
+  value: any
+  setModel: (model: any) => void
+  renderTrigger?: (v: TriggerProps) => ReactNode
+  readonly?: boolean
+  isInWorkflow?: boolean
+  isAgentStrategy?: boolean
+  scope?: string
+}
+
+const ModelParameterModal: FC<ModelParameterModalProps> = ({
+  popupClassName,
+  portalToFollowElemContentClassName,
+  isAdvancedMode,
+  value,
+  setModel,
+  renderTrigger,
+  readonly,
+  isInWorkflow,
+  isAgentStrategy,
+  scope = ModelTypeEnum.textGeneration,
+}) => {
+  const { t } = useTranslation()
+  const { isAPIKeySet } = useProviderContext()
+  const [open, setOpen] = useState(false)
+  const scopeArray = scope.split('&')
+  const scopeFeatures = useMemo(() => {
+    if (scopeArray.includes('all'))
+      return []
+    return scopeArray.filter(item => ![
+      ModelTypeEnum.textGeneration,
+      ModelTypeEnum.textEmbedding,
+      ModelTypeEnum.rerank,
+      ModelTypeEnum.moderation,
+      ModelTypeEnum.speech2text,
+      ModelTypeEnum.tts,
+    ].includes(item as ModelTypeEnum))
+  }, [scopeArray])
+
+  const { data: textGenerationList } = useModelList(ModelTypeEnum.textGeneration)
+  const { data: textEmbeddingList } = useModelList(ModelTypeEnum.textEmbedding)
+  const { data: rerankList } = useModelList(ModelTypeEnum.rerank)
+  const { data: moderationList } = useModelList(ModelTypeEnum.moderation)
+  const { data: sttList } = useModelList(ModelTypeEnum.speech2text)
+  const { data: ttsList } = useModelList(ModelTypeEnum.tts)
+
+  const scopedModelList = useMemo(() => {
+    const resultList: any[] = []
+    if (scopeArray.includes('all')) {
+      return [
+        ...textGenerationList,
+        ...textEmbeddingList,
+        ...rerankList,
+        ...sttList,
+        ...ttsList,
+        ...moderationList,
+      ]
+    }
+    if (scopeArray.includes(ModelTypeEnum.textGeneration))
+      return textGenerationList
+    if (scopeArray.includes(ModelTypeEnum.textEmbedding))
+      return textEmbeddingList
+    if (scopeArray.includes(ModelTypeEnum.rerank))
+      return rerankList
+    if (scopeArray.includes(ModelTypeEnum.moderation))
+      return moderationList
+    if (scopeArray.includes(ModelTypeEnum.speech2text))
+      return sttList
+    if (scopeArray.includes(ModelTypeEnum.tts))
+      return ttsList
+    return resultList
+  }, [scopeArray, textGenerationList, textEmbeddingList, rerankList, sttList, ttsList, moderationList])
+
+  const { currentProvider, currentModel } = useMemo(() => {
+    const currentProvider = scopedModelList.find(item => item.provider === value?.provider)
+    const currentModel = currentProvider?.models.find((model: { model: string }) => model.model === value?.model)
+    return {
+      currentProvider,
+      currentModel,
+    }
+  }, [scopedModelList, value?.provider, value?.model])
+
+  const hasDeprecated = useMemo(() => {
+    return !currentProvider || !currentModel
+  }, [currentModel, currentProvider])
+  const modelDisabled = useMemo(() => {
+    return currentModel?.status !== ModelStatusEnum.active
+  }, [currentModel?.status])
+  const disabled = useMemo(() => {
+    return !isAPIKeySet || hasDeprecated || modelDisabled
+  }, [hasDeprecated, isAPIKeySet, modelDisabled])
+
+  const handleChangeModel = ({ provider, model }: DefaultModel) => {
+    const targetProvider = scopedModelList.find(modelItem => modelItem.provider === provider)
+    const targetModelItem = targetProvider?.models.find((modelItem: { model: string }) => modelItem.model === model)
+    const model_type = targetModelItem?.model_type as string
+    setModel({
+      provider,
+      model,
+      model_type,
+      ...(model_type === ModelTypeEnum.textGeneration ? {
+        mode: targetModelItem?.model_properties.mode as string,
+        completion_params: {},
+      } : {}),
+    })
+  }
+
+  const handleLLMParamsChange = (newParams: FormValue) => {
+    const newValue = {
+      ...(value?.completionParams || {}),
+      completion_params: newParams,
+    }
+    setModel({
+      ...value,
+      ...newValue,
+    })
+  }
+
+  const handleTTSParamsChange = (language: string, voice: string) => {
+    setModel({
+      ...value,
+      language,
+      voice,
+    })
+  }
+
+  return (
+    <PortalToFollowElem
+      open={open}
+      onOpenChange={setOpen}
+      placement={isInWorkflow ? 'left' : 'bottom-end'}
+      offset={4}
+    >
+      <div className='relative'>
+        <PortalToFollowElemTrigger
+          onClick={() => {
+            if (readonly)
+              return
+            setOpen(v => !v)
+          }}
+          className='block'
+        >
+          {
+            renderTrigger
+              ? renderTrigger({
+                open,
+                disabled,
+                modelDisabled,
+                hasDeprecated,
+                currentProvider,
+                currentModel,
+                providerName: value?.provider,
+                modelId: value?.model,
+              })
+              : (isAgentStrategy
+                ? <AgentModelTrigger
+                  disabled={disabled}
+                  hasDeprecated={hasDeprecated}
+                  currentProvider={currentProvider}
+                  currentModel={currentModel}
+                  providerName={value?.provider}
+                  modelId={value?.model}
+                  scope={scope}
+                />
+                : <Trigger
+                  disabled={disabled}
+                  isInWorkflow={isInWorkflow}
+                  modelDisabled={modelDisabled}
+                  hasDeprecated={hasDeprecated}
+                  currentProvider={currentProvider}
+                  currentModel={currentModel}
+                  providerName={value?.provider}
+                  modelId={value?.model}
+                />
+              )
+          }
+        </PortalToFollowElemTrigger>
+        <PortalToFollowElemContent className={cn('z-50', portalToFollowElemContentClassName)}>
+          <div className={cn(popupClassName, 'w-[389px] rounded-2xl border-[0.5px] border-components-panel-border bg-components-panel-bg shadow-lg')}>
+            <div className={cn('max-h-[420px] p-4 pt-3 overflow-y-auto')}>
+              <div className='relative'>
+                <div className={cn('mb-1 h-6 flex items-center text-text-secondary system-sm-semibold')}>
+                  {t('common.modelProvider.model').toLocaleUpperCase()}
+                </div>
+                <ModelSelector
+                  defaultModel={(value?.provider || value?.model) ? { provider: value?.provider, model: value?.model } : undefined}
+                  modelList={scopedModelList}
+                  scopeFeatures={scopeFeatures}
+                  onSelect={handleChangeModel}
+                />
+              </div>
+              {(currentModel?.model_type === ModelTypeEnum.textGeneration || currentModel?.model_type === ModelTypeEnum.tts) && (
+                <div className='my-3 h-[1px] bg-divider-subtle' />
+              )}
+              {currentModel?.model_type === ModelTypeEnum.textGeneration && (
+                <LLMParamsPanel
+                  provider={value?.provider}
+                  modelId={value?.model}
+                  completionParams={value?.completion_params || {}}
+                  onCompletionParamsChange={handleLLMParamsChange}
+                  isAdvancedMode={isAdvancedMode}
+                />
+              )}
+              {currentModel?.model_type === ModelTypeEnum.tts && (
+                <TTSParamsPanel
+                  currentModel={currentModel}
+                  language={value?.language}
+                  voice={value?.voice}
+                  onChange={handleTTSParamsChange}
+                />
+              )}
+            </div>
+          </div>
+        </PortalToFollowElemContent>
+      </div>
+    </PortalToFollowElem>
+  )
+}
+
+export default ModelParameterModal

dify_1.0.1/web/app/components/plugins/plugin-detail-panel/model-selector/llm-params-panel.tsx

@@ -0,0 +1,126 @@
+import React, { useMemo } from 'react'
+import useSWR from 'swr'
+import { useTranslation } from 'react-i18next'
+import PresetsParameter from '@/app/components/header/account-setting/model-provider-page/model-parameter-modal/presets-parameter'
+import ParameterItem from '@/app/components/header/account-setting/model-provider-page/model-parameter-modal/parameter-item'
+import Loading from '@/app/components/base/loading'
+import type {
+  FormValue,
+  ModelParameterRule,
+} from '@/app/components/header/account-setting/model-provider-page/declarations'
+import type { ParameterValue } from '@/app/components/header/account-setting/model-provider-page/model-parameter-modal/parameter-item'
+import { fetchModelParameterRules } from '@/service/common'
+import { TONE_LIST } from '@/config'
+import cn from '@/utils/classnames'
+
+const PROVIDER_WITH_PRESET_TONE = ['langgenius/openai/openai', 'langgenius/azure_openai/azure_openai']
+const stopParameterRule: ModelParameterRule = {
+  default: [],
+  help: {
+    en_US: 'Up to four sequences where the API will stop generating further tokens. The returned text will not contain the stop sequence.',
+    zh_Hans: '最多四个序列，API 将停止生成更多的 token。返回的文本将不包含停止序列。',
+  },
+  label: {
+    en_US: 'Stop sequences',
+    zh_Hans: '停止序列',
+  },
+  name: 'stop',
+  required: false,
+  type: 'tag',
+  tagPlaceholder: {
+    en_US: 'Enter sequence and press Tab',
+    zh_Hans: '输入序列并按 Tab 键',
+  },
+}
+
+type Props = {
+  isAdvancedMode: boolean
+  provider: string
+  modelId: string
+  completionParams: FormValue
+  onCompletionParamsChange: (newParams: FormValue) => void
+}
+
+const LLMParamsPanel = ({
+  isAdvancedMode,
+  provider,
+  modelId,
+  completionParams,
+  onCompletionParamsChange,
+}: Props) => {
+  const { t } = useTranslation()
+  const { data: parameterRulesData, isLoading } = useSWR(
+    (provider && modelId)
+      ? `/workspaces/current/model-providers/${provider}/models/parameter-rules?model=${modelId}`
+      : null, fetchModelParameterRules,
+  )
+
+  const parameterRules: ModelParameterRule[] = useMemo(() => {
+    return parameterRulesData?.data || []
+  }, [parameterRulesData])
+
+  const handleSelectPresetParameter = (toneId: number) => {
+    const tone = TONE_LIST.find(tone => tone.id === toneId)
+    if (tone) {
+      onCompletionParamsChange({
+        ...completionParams,
+        ...tone.config,
+      })
+    }
+  }
+  const handleParamChange = (key: string, value: ParameterValue) => {
+    onCompletionParamsChange({
+      ...completionParams,
+      [key]: value,
+    })
+  }
+  const handleSwitch = (key: string, value: boolean, assignValue: ParameterValue) => {
+    if (!value) {
+      const newCompletionParams = { ...completionParams }
+      delete newCompletionParams[key]
+
+      onCompletionParamsChange(newCompletionParams)
+    }
+    if (value) {
+      onCompletionParamsChange({
+        ...completionParams,
+        [key]: assignValue,
+      })
+    }
+  }
+
+  if (isLoading) {
+    return (
+      <div className='mt-5'><Loading /></div>
+    )
+  }
+
+  return (
+    <>
+      <div className='flex items-center justify-between mb-2'>
+        <div className={cn('h-6 flex items-center text-text-secondary system-sm-semibold')}>{t('common.modelProvider.parameters')}</div>
+        {
+          PROVIDER_WITH_PRESET_TONE.includes(provider) && (
+            <PresetsParameter onSelect={handleSelectPresetParameter} />
+          )
+        }
+      </div>
+      {!!parameterRules.length && (
+        [
+          ...parameterRules,
+          ...(isAdvancedMode ? [stopParameterRule] : []),
+        ].map(parameter => (
+          <ParameterItem
+            key={`${modelId}-${parameter.name}`}
+            parameterRule={parameter}
+            value={completionParams?.[parameter.name]}
+            onChange={v => handleParamChange(parameter.name, v)}
+            onSwitch={(checked, assignValue) => handleSwitch(parameter.name, checked, assignValue)}
+            isInWorkflow
+          />
+        )))}
+    </>
+  )
+}
+
+export default LLMParamsPanel

dify_1.0.1/web/app/components/plugins/plugin-detail-panel/model-selector/tts-params-panel.tsx

@@ -0,0 +1,67 @@
+import React, { useMemo } from 'react'
+import { useTranslation } from 'react-i18next'
+import { languages } from '@/i18n/language'
+import { PortalSelect } from '@/app/components/base/select'
+import cn from '@/utils/classnames'
+
+type Props = {
+  currentModel: any
+  language: string
+  voice: string
+  onChange: (language: string, voice: string) => void
+}
+
+const TTSParamsPanel = ({
+  currentModel,
+  language,
+  voice,
+  onChange,
+}: Props) => {
+  const { t } = useTranslation()
+  const voiceList = useMemo(() => {
+    if (!currentModel)
+      return []
+    return currentModel.model_properties.voices.map((item: { mode: any }) => ({
+      ...item,
+      value: item.mode,
+    }))
+  }, [currentModel])
+  const setLanguage = (language: string) => {
+    onChange(language, voice)
+  }
+  const setVoice = (voice: string) => {
+    onChange(language, voice)
+  }
+  return (
+    <>
+      <div className='mb-3'>
+        <div className='mb-1 py-1 flex items-center text-text-secondary system-sm-semibold'>
+          {t('appDebug.voice.voiceSettings.language')}
+        </div>
+        <PortalSelect
+          triggerClassName='h-8'
+          popupClassName={cn('z-[1000]')}
+          popupInnerClassName={cn('w-[354px]')}
+          value={language}
+          items={languages.filter(item => item.supported)}
+          onSelect={item => setLanguage(item.value as string)}
+        />
+      </div>
+      <div className='mb-3'>
+        <div className='mb-1 py-1 flex items-center text-text-secondary system-sm-semibold'>
+          {t('appDebug.voice.voiceSettings.voice')}
+        </div>
+        <PortalSelect
+          triggerClassName='h-8'
+          popupClassName={cn('z-[1000]')}
+          popupInnerClassName={cn('w-[354px]')}
+          value={voice}
+          items={voiceList}
+          onSelect={item => setVoice(item.value as string)}
+        />
+      </div>
+    </>
+  )
+}
+
+export default TTSParamsPanel

dify_1.0.1/web/app/components/plugins/plugin-detail-panel/multiple-tool-selector/index.tsx

@@ -0,0 +1,172 @@
+import React from 'react'
+import { useTranslation } from 'react-i18next'
+import {
+  RiAddLine,
+  RiArrowDropDownLine,
+  RiQuestionLine,
+} from '@remixicon/react'
+import ToolSelector from '@/app/components/plugins/plugin-detail-panel/tool-selector'
+import ActionButton from '@/app/components/base/action-button'
+import Tooltip from '@/app/components/base/tooltip'
+import Divider from '@/app/components/base/divider'
+import type { ToolValue } from '@/app/components/workflow/block-selector/types'
+import type { Node } from 'reactflow'
+import type { NodeOutPutVar } from '@/app/components/workflow/types'
+import cn from '@/utils/classnames'
+
+type Props = {
+  disabled?: boolean
+  value: ToolValue[]
+  label: string
+  required?: boolean
+  tooltip?: any
+  supportCollapse?: boolean
+  scope?: string
+  onChange: (value: ToolValue[]) => void
+  nodeOutputVars: NodeOutPutVar[],
+  availableNodes: Node[],
+  nodeId?: string
+}
+
+const MultipleToolSelector = ({
+  disabled,
+  value = [],
+  label,
+  required,
+  tooltip,
+  supportCollapse,
+  scope,
+  onChange,
+  nodeOutputVars,
+  availableNodes,
+  nodeId,
+}: Props) => {
+  const { t } = useTranslation()
+  const enabledCount = value.filter(item => item.enabled).length
+  // collapse control
+  const [collapse, setCollapse] = React.useState(false)
+  const handleCollapse = () => {
+    if (supportCollapse)
+      setCollapse(!collapse)
+  }
+
+  // add tool
+  const [open, setOpen] = React.useState(false)
+  const [panelShowState, setPanelShowState] = React.useState(true)
+  const handleAdd = (val: ToolValue) => {
+    const newValue = [...value, val]
+    // deduplication
+    const deduplication = newValue.reduce((acc, cur) => {
+      if (!acc.find(item => item.provider_name === cur.provider_name && item.tool_name === cur.tool_name))
+        acc.push(cur)
+      return acc
+    }, [] as ToolValue[])
+    // update value
+    onChange(deduplication)
+    setOpen(false)
+  }
+
+  // delete tool
+  const handleDelete = (index: number) => {
+    const newValue = [...value]
+    newValue.splice(index, 1)
+    onChange(newValue)
+  }
+
+  // configure tool
+  const handleConfigure = (val: ToolValue, index: number) => {
+    const newValue = [...value]
+    newValue[index] = val
+    onChange(newValue)
+  }
+
+  return (
+    <>
+      <div className='flex items-center mb-1'>
+        <div
+          className={cn('relative grow flex items-center gap-0.5', supportCollapse && 'cursor-pointer')}
+          onClick={handleCollapse}
+        >
+          <div className='h-6 flex items-center text-text-secondary system-sm-semibold-uppercase'>{label}</div>
+          {required && <div className='text-red-500'>*</div>}
+          {tooltip && (
+            <Tooltip
+              popupContent={tooltip}
+              needsDelay
+            >
+              <div><RiQuestionLine className='w-3.5 h-3.5 text-text-quaternary hover:text-text-tertiary' /></div>
+            </Tooltip>
+          )}
+          {supportCollapse && (
+            <div className='absolute -left-4 top-1'>
+              <RiArrowDropDownLine
+                className={cn(
+                  'w-4 h-4 text-text-tertiary',
+                  collapse && 'transform -rotate-90',
+                )}
+              />
+            </div>
+          )}
+        </div>
+        {value.length > 0 && (
+          <>
+            <div className='flex items-center gap-1 text-text-tertiary system-xs-medium'>
+              <span>{`${enabledCount}/${value.length}`}</span>
+              <span>{t('appDebug.agent.tools.enabled')}</span>
+            </div>
+            <Divider type='vertical' className='ml-3 mr-1 h-3' />
+          </>
+        )}
+        {!disabled && (
+          <ActionButton className='mx-1' onClick={() => {
+            setOpen(!open)
+            setPanelShowState(true)
+          }}>
+            <RiAddLine className='w-4 h-4' />
+          </ActionButton>
+        )}
+      </div>
+      {!collapse && (
+        <>
+          <ToolSelector
+            nodeId={nodeId}
+            nodeOutputVars={nodeOutputVars}
+            availableNodes={availableNodes}
+            scope={scope}
+            value={undefined}
+            selectedTools={value}
+            onSelect={handleAdd}
+            controlledState={open}
+            onControlledStateChange={setOpen}
+            trigger={
+              <div className=''></div>
+            }
+            panelShowState={panelShowState}
+            onPanelShowStateChange={setPanelShowState}
+
+          />
+          {value.length === 0 && (
+            <div className='p-3 flex justify-center rounded-[10px] bg-background-section text-text-tertiary system-xs-regular'>{t('plugin.detailPanel.toolSelector.empty')}</div>
+          )}
+          {value.length > 0 && value.map((item, index) => (
+            <div className='mb-1' key={index}>
+              <ToolSelector
+                nodeId={nodeId}
+                nodeOutputVars={nodeOutputVars}
+                availableNodes={availableNodes}
+                scope={scope}
+                value={item}
+                selectedTools={value}
+                onSelect={item => handleConfigure(item, index)}
+                onDelete={() => handleDelete(index)}
+                supportEnableSwitch
+              />
+            </div>
+          ))}
+        </>
+      )}
+    </>
+  )
+}
+
+export default MultipleToolSelector

dify_1.0.1/web/app/components/plugins/plugin-detail-panel/operation-dropdown.tsx

@@ -0,0 +1,101 @@
+'use client'
+import type { FC } from 'react'
+import React, { useCallback, useRef, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { PluginSource } from '../types'
+import { RiArrowRightUpLine, RiMoreFill } from '@remixicon/react'
+import ActionButton from '@/app/components/base/action-button'
+// import Button from '@/app/components/base/button'
+import {
+  PortalToFollowElem,
+  PortalToFollowElemContent,
+  PortalToFollowElemTrigger,
+} from '@/app/components/base/portal-to-follow-elem'
+import cn from '@/utils/classnames'
+
+type Props = {
+  source: PluginSource
+  onInfo: () => void
+  onCheckVersion: () => void
+  onRemove: () => void
+  detailUrl: string
+}
+
+const OperationDropdown: FC<Props> = ({
+  source,
+  detailUrl,
+  onInfo,
+  onCheckVersion,
+  onRemove,
+}) => {
+  const { t } = useTranslation()
+  const [open, doSetOpen] = useState(false)
+  const openRef = useRef(open)
+  const setOpen = useCallback((v: boolean) => {
+    doSetOpen(v)
+    openRef.current = v
+  }, [doSetOpen])
+
+  const handleTrigger = useCallback(() => {
+    setOpen(!openRef.current)
+  }, [setOpen])
+
+  return (
+    <PortalToFollowElem
+      open={open}
+      onOpenChange={setOpen}
+      placement='bottom-end'
+      offset={{
+        mainAxis: -12,
+        crossAxis: 36,
+      }}
+    >
+      <PortalToFollowElemTrigger onClick={handleTrigger}>
+        <div>
+          <ActionButton className={cn(open && 'bg-state-base-hover')}>
+            <RiMoreFill className='w-4 h-4' />
+          </ActionButton>
+        </div>
+      </PortalToFollowElemTrigger>
+      <PortalToFollowElemContent className='z-50'>
+        <div className='w-[160px] p-1 bg-components-panel-bg-blur rounded-xl border-[0.5px] border-components-panel-border shadow-lg'>
+          {source === PluginSource.github && (
+            <div
+              onClick={() => {
+                onInfo()
+                handleTrigger()
+              }}
+              className='px-3 py-1.5 rounded-lg text-text-secondary system-md-regular cursor-pointer hover:bg-state-base-hover'
+            >{t('plugin.detailPanel.operation.info')}</div>
+          )}
+          {source === PluginSource.github && (
+            <div
+              onClick={() => {
+                onCheckVersion()
+                handleTrigger()
+              }}
+              className='px-3 py-1.5 rounded-lg text-text-secondary system-md-regular cursor-pointer hover:bg-state-base-hover'
+            >{t('plugin.detailPanel.operation.checkUpdate')}</div>
+          )}
+          {(source === PluginSource.marketplace || source === PluginSource.github) && (
+            <a href={detailUrl} target='_blank' className='flex items-center px-3 py-1.5 rounded-lg text-text-secondary system-md-regular cursor-pointer hover:bg-state-base-hover'>
+              <span className='grow'>{t('plugin.detailPanel.operation.viewDetail')}</span>
+              <RiArrowRightUpLine className='shrink-0 w-3.5 h-3.5 text-text-tertiary' />
+            </a>
+          )}
+          {(source === PluginSource.marketplace || source === PluginSource.github) && (
+            <div className='my-1 h-px bg-divider-subtle'></div>
+          )}
+          <div
+            onClick={() => {
+              onRemove()
+              handleTrigger()
+            }}
+            className='px-3 py-1.5 rounded-lg text-text-secondary system-md-regular cursor-pointer hover:text-text-destructive hover:bg-state-destructive-hover'
+          >{t('plugin.detailPanel.operation.remove')}</div>
+        </div>
+      </PortalToFollowElemContent>
+    </PortalToFollowElem>
+  )
+}
+export default React.memo(OperationDropdown)

dify_1.0.1/web/app/components/plugins/plugin-detail-panel/strategy-detail.tsx

@@ -0,0 +1,164 @@
+'use client'
+import type { FC } from 'react'
+import React, { useMemo } from 'react'
+import { useTranslation } from 'react-i18next'
+import {
+  RiArrowLeftLine,
+  RiCloseLine,
+} from '@remixicon/react'
+import Drawer from '@/app/components/base/drawer'
+import ActionButton from '@/app/components/base/action-button'
+import Icon from '@/app/components/plugins/card/base/card-icon'
+import Description from '@/app/components/plugins/card/base/description'
+import Divider from '@/app/components/base/divider'
+import type {
+  StrategyDetail,
+} from '@/app/components/plugins/types'
+import type { Locale } from '@/i18n'
+import { useRenderI18nObject } from '@/hooks/use-i18n'
+import { API_PREFIX } from '@/config'
+import cn from '@/utils/classnames'
+
+type Props = {
+  provider: {
+    author: string
+    name: string
+    description: Record<Locale, string>
+    tenant_id: string
+    icon: string
+    label: Record<Locale, string>
+    tags: string[]
+  }
+  detail: StrategyDetail
+  onHide: () => void
+}
+
+const StrategyDetail: FC<Props> = ({
+  provider,
+  detail,
+  onHide,
+}) => {
+  const getValueFromI18nObject = useRenderI18nObject()
+  const { t } = useTranslation()
+
+  const outputSchema = useMemo(() => {
+    const res: any[] = []
+    if (!detail.output_schema)
+      return []
+    Object.keys(detail.output_schema.properties).forEach((outputKey) => {
+      const output = detail.output_schema.properties[outputKey]
+      res.push({
+        name: outputKey,
+        type: output.type === 'array'
+          ? `Array[${output.items?.type.slice(0, 1).toLocaleUpperCase()}${output.items?.type.slice(1)}]`
+          : `${output.type.slice(0, 1).toLocaleUpperCase()}${output.type.slice(1)}`,
+        description: output.description,
+      })
+    })
+    return res
+  }, [detail.output_schema])
+
+  const getType = (type: string) => {
+    if (type === 'number-input')
+      return t('tools.setBuiltInTools.number')
+    if (type === 'text-input')
+      return t('tools.setBuiltInTools.string')
+    if (type === 'file')
+      return t('tools.setBuiltInTools.file')
+    if (type === 'array[tools]')
+      return 'multiple-tool-select'
+    return type
+  }
+
+  return (
+    <Drawer
+      isOpen
+      clickOutsideNotOpen={false}
+      onClose={onHide}
+      footer={null}
+      mask={false}
+      positionCenter={false}
+      panelClassname={cn('justify-start mt-[64px] mr-2 mb-2 !w-[420px] !max-w-[420px] !p-0 !bg-components-panel-bg rounded-2xl border-[0.5px] border-components-panel-border shadow-xl')}
+    >
+      <>
+        {/* header */}
+        <div className='relative p-4 pb-3 border-b border-divider-subtle'>
+          <div className='absolute top-3 right-3'>
+            <ActionButton onClick={onHide}>
+              <RiCloseLine className='w-4 h-4' />
+            </ActionButton>
+          </div>
+          <div
+            className='mb-2 flex items-center gap-1 text-text-accent-secondary system-xs-semibold-uppercase cursor-pointer'
+            onClick={onHide}
+          >
+            <RiArrowLeftLine className='w-4 h-4' />
+            BACK
+          </div>
+          <div className='flex items-center gap-1'>
+            <Icon size='tiny' className='w-6 h-6' src={`${API_PREFIX}/workspaces/current/plugin/icon?tenant_id=${provider.tenant_id}&filename=${provider.icon}`} />
+            <div className=''>{getValueFromI18nObject(provider.label)}</div>
+          </div>
+          <div className='mt-1 text-text-primary system-md-semibold'>{getValueFromI18nObject(detail.identity.label)}</div>
+          <Description className='mt-3' text={getValueFromI18nObject(detail.description)} descriptionLineRows={2}></Description>
+        </div>
+        {/* form */}
+        <div className='h-full'>
+          <div className='flex flex-col h-full overflow-y-auto'>
+            <div className='p-4 pb-1 text-text-primary system-sm-semibold-uppercase'>{t('tools.setBuiltInTools.parameters')}</div>
+            <div className='px-4'>
+              {detail.parameters.length > 0 && (
+                <div className='py-2 space-y-1'>
+                  {detail.parameters.map((item: any, index) => (
+                    <div key={index} className='py-1'>
+                      <div className='flex items-center gap-2'>
+                        <div className='text-text-secondary code-sm-semibold'>{getValueFromI18nObject(item.label)}</div>
+                        <div className='text-text-tertiary system-xs-regular'>
+                          {getType(item.type)}
+                        </div>
+                        {item.required && (
+                          <div className='text-text-warning-secondary system-xs-medium'>{t('tools.setBuiltInTools.required')}</div>
+                        )}
+                      </div>
+                      {item.human_description && (
+                        <div className='mt-0.5 text-text-tertiary system-xs-regular'>
+                          {getValueFromI18nObject(item.human_description)}
+                        </div>
+                      )}
+                    </div>
+                  ))}
+                </div>
+              )}
+            </div>
+            {detail.output_schema && (
+              <>
+                <div className='px-4'>
+                  <Divider className="!mt-2" />
+                </div>
+                <div className='p-4 pb-1 text-text-primary system-sm-semibold-uppercase'>OUTPUT</div>
+                {outputSchema.length > 0 && (
+                  <div className='px-4 py-2 space-y-1'>
+                    {outputSchema.map((outputItem, index) => (
+                      <div key={index} className='py-1'>
+                        <div className='flex items-center gap-2'>
+                          <div className='text-text-secondary code-sm-semibold'>{outputItem.name}</div>
+                          <div className='text-text-tertiary system-xs-regular'>{outputItem.type}</div>
+                        </div>
+                        {outputItem.description && (
+                          <div className='mt-0.5 text-text-tertiary system-xs-regular'>
+                            {outputItem.description}
+                          </div>
+                        )}
+                      </div>
+                    ))}
+                  </div>
+                )}
+              </>
+            )}
+          </div>
+        </div>
+      </>
+    </Drawer>
+  )
+}
+export default StrategyDetail

dify_1.0.1/web/app/components/plugins/plugin-detail-panel/strategy-item.tsx

@@ -0,0 +1,50 @@
+'use client'
+import React, { useState } from 'react'
+import StrategyDetailPanel from './strategy-detail'
+import type {
+  StrategyDetail,
+} from '@/app/components/plugins/types'
+import type { Locale } from '@/i18n'
+import { useRenderI18nObject } from '@/hooks/use-i18n'
+import cn from '@/utils/classnames'
+
+type Props = {
+  provider: {
+    author: string
+    name: string
+    description: Record<Locale, string>
+    tenant_id: string
+    icon: string
+    label: Record<Locale, string>
+    tags: string[]
+  }
+  detail: StrategyDetail
+}
+
+const StrategyItem = ({
+  provider,
+  detail,
+}: Props) => {
+  const getValueFromI18nObject = useRenderI18nObject()
+  const [showDetail, setShowDetail] = useState(false)
+
+  return (
+    <>
+      <div
+        className={cn('mb-2 px-4 py-3 bg-components-panel-item-bg rounded-xl border-[0.5px] border-components-panel-border-subtle shadow-xs cursor-pointer hover:bg-components-panel-on-panel-item-bg-hover')}
+        onClick={() => setShowDetail(true)}
+      >
+        <div className='pb-0.5 text-text-secondary system-md-semibold'>{getValueFromI18nObject(detail.identity.label)}</div>
+        <div className='text-text-tertiary system-xs-regular line-clamp-2' title={getValueFromI18nObject(detail.description)}>{getValueFromI18nObject(detail.description)}</div>
+      </div>
+      {showDetail && (
+        <StrategyDetailPanel
+          provider={provider}
+          detail={detail}
+          onHide={() => setShowDetail(false)}
+        />
+      )}
+    </>
+  )
+}
+export default StrategyItem

dify_1.0.1/web/app/components/plugins/plugin-detail-panel/tool-selector/hooks.ts

@@ -0,0 +1,14 @@
+import {
+  usePluginManifestInfo,
+} from '@/service/use-plugins'
+
+export const usePluginInstalledCheck = (providerName = '') => {
+  const pluginID = providerName?.split('/').splice(0, 2).join('/')
+
+  const { data: manifest } = usePluginManifestInfo(pluginID)
+
+  return {
+    inMarketPlace: !!manifest,
+    manifest: manifest?.data.plugin,
+  }
+}

dify_1.0.1/web/app/components/plugins/plugin-detail-panel/tool-selector/index.tsx

@@ -0,0 +1,457 @@
+'use client'
+import type { FC } from 'react'
+import React, { useMemo, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import Link from 'next/link'
+import {
+  RiArrowLeftLine,
+  RiArrowRightUpLine,
+} from '@remixicon/react'
+import {
+  PortalToFollowElem,
+  PortalToFollowElemContent,
+  PortalToFollowElemTrigger,
+} from '@/app/components/base/portal-to-follow-elem'
+import ToolTrigger from '@/app/components/plugins/plugin-detail-panel/tool-selector/tool-trigger'
+import ToolItem from '@/app/components/plugins/plugin-detail-panel/tool-selector/tool-item'
+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/plugins/plugin-detail-panel/tool-selector/tool-credentials-form'
+import Toast from '@/app/components/base/toast'
+import Textarea from '@/app/components/base/textarea'
+import Divider from '@/app/components/base/divider'
+import TabSlider from '@/app/components/base/tab-slider-plain'
+import ReasoningConfigForm from '@/app/components/plugins/plugin-detail-panel/tool-selector/reasoning-config-form'
+import Form from '@/app/components/header/account-setting/model-provider-page/model-modal/Form'
+import { generateFormValue, getPlainValue, getStructureValue, toolParametersToFormSchemas } from '@/app/components/tools/utils/to-form-schema'
+
+import { useAppContext } from '@/context/app-context'
+import {
+  useAllBuiltInTools,
+  useAllCustomTools,
+  useAllWorkflowTools,
+  useInvalidateAllBuiltInTools,
+  useUpdateProviderCredentials,
+} from '@/service/use-tools'
+import { useInvalidateInstalledPluginList } from '@/service/use-plugins'
+import { usePluginInstalledCheck } from '@/app/components/plugins/plugin-detail-panel/tool-selector/hooks'
+import { CollectionType } from '@/app/components/tools/types'
+import type { ToolDefaultValue, ToolValue } from '@/app/components/workflow/block-selector/types'
+import type {
+  OffsetOptions,
+  Placement,
+} from '@floating-ui/react'
+import { MARKETPLACE_API_PREFIX } from '@/config'
+import type { Node } from 'reactflow'
+import type { NodeOutPutVar } from '@/app/components/workflow/types'
+import cn from '@/utils/classnames'
+
+type Props = {
+  disabled?: boolean
+  placement?: Placement
+  offset?: OffsetOptions
+  scope?: string
+  value?: ToolValue
+  selectedTools?: ToolValue[]
+  onSelect: (tool: {
+    provider_name: string
+    tool_name: string
+    tool_label: string
+    settings?: Record<string, any>
+    parameters?: Record<string, any>
+    extra?: Record<string, any>
+  }) => void
+  onDelete?: () => void
+  supportEnableSwitch?: boolean
+  supportAddCustomTool?: boolean
+  trigger?: React.ReactNode
+  controlledState?: boolean
+  onControlledStateChange?: (state: boolean) => void
+  panelShowState?: boolean
+  onPanelShowStateChange?: (state: boolean) => void
+  nodeOutputVars: NodeOutPutVar[],
+  availableNodes: Node[],
+  nodeId?: string,
+}
+const ToolSelector: FC<Props> = ({
+  value,
+  selectedTools,
+  disabled,
+  placement = 'left',
+  offset = 4,
+  onSelect,
+  onDelete,
+  scope,
+  supportEnableSwitch,
+  trigger,
+  controlledState,
+  onControlledStateChange,
+  panelShowState,
+  onPanelShowStateChange,
+  nodeOutputVars,
+  availableNodes,
+  nodeId = '',
+}) => {
+  const { t } = useTranslation()
+  const [isShow, onShowChange] = useState(false)
+  const handleTriggerClick = () => {
+    if (disabled) return
+    onShowChange(true)
+  }
+
+  const { data: buildInTools } = useAllBuiltInTools()
+  const { data: customTools } = useAllCustomTools()
+  const { data: workflowTools } = useAllWorkflowTools()
+  const invalidateAllBuiltinTools = useInvalidateAllBuiltInTools()
+  const invalidateInstalledPluginList = useInvalidateInstalledPluginList()
+
+  // plugin info check
+  const { inMarketPlace, manifest } = usePluginInstalledCheck(value?.provider_name)
+
+  const currentProvider = useMemo(() => {
+    const mergedTools = [...(buildInTools || []), ...(customTools || []), ...(workflowTools || [])]
+    return mergedTools.find((toolWithProvider) => {
+      return toolWithProvider.id === value?.provider_name
+    })
+  }, [value, buildInTools, customTools, workflowTools])
+
+  const [isShowChooseTool, setIsShowChooseTool] = useState(false)
+  const handleSelectTool = (tool: ToolDefaultValue) => {
+    const settingValues = generateFormValue(tool.params, toolParametersToFormSchemas(tool.paramSchemas.filter(param => param.form !== 'llm') as any))
+    const paramValues = generateFormValue(tool.params, toolParametersToFormSchemas(tool.paramSchemas.filter(param => param.form === 'llm') as any), true)
+    const toolValue = {
+      provider_name: tool.provider_id,
+      type: tool.provider_type,
+      tool_name: tool.tool_name,
+      tool_label: tool.tool_label,
+      settings: settingValues,
+      parameters: paramValues,
+      enabled: tool.is_team_authorization,
+      extra: {
+        description: '',
+      },
+      schemas: tool.paramSchemas,
+    }
+    onSelect(toolValue)
+    // setIsShowChooseTool(false)
+  }
+
+  const handleDescriptionChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+    onSelect({
+      ...value,
+      extra: {
+        ...value?.extra,
+        description: e.target.value || '',
+      },
+    } as any)
+  }
+
+  // tool settings & params
+  const currentToolSettings = useMemo(() => {
+    if (!currentProvider) return []
+    return currentProvider.tools.find(tool => tool.name === value?.tool_name)?.parameters.filter(param => param.form !== 'llm') || []
+  }, [currentProvider, value])
+  const currentToolParams = useMemo(() => {
+    if (!currentProvider) return []
+    return currentProvider.tools.find(tool => tool.name === value?.tool_name)?.parameters.filter(param => param.form === 'llm') || []
+  }, [currentProvider, value])
+  const [currType, setCurrType] = useState('settings')
+  const showTabSlider = currentToolSettings.length > 0 && currentToolParams.length > 0
+  const userSettingsOnly = currentToolSettings.length > 0 && !currentToolParams.length
+  const reasoningConfigOnly = currentToolParams.length > 0 && !currentToolSettings.length
+
+  const settingsFormSchemas = useMemo(() => toolParametersToFormSchemas(currentToolSettings), [currentToolSettings])
+  const paramsFormSchemas = useMemo(() => toolParametersToFormSchemas(currentToolParams), [currentToolParams])
+
+  const handleSettingsFormChange = (v: Record<string, any>) => {
+    const newValue = getStructureValue(v)
+
+    const toolValue = {
+      ...value,
+      settings: newValue,
+    }
+    onSelect(toolValue as any)
+  }
+  const handleParamsFormChange = (v: Record<string, any>) => {
+    const toolValue = {
+      ...value,
+      parameters: v,
+    }
+    onSelect(toolValue as any)
+  }
+
+  const handleEnabledChange = (state: boolean) => {
+    onSelect({
+      ...value,
+      enabled: state,
+    } as any)
+  }
+
+  // authorization
+  const { isCurrentWorkspaceManager } = useAppContext()
+  const [isShowSettingAuth, setShowSettingAuth] = useState(false)
+  const handleCredentialSettingUpdate = () => {
+    invalidateAllBuiltinTools()
+    Toast.notify({
+      type: 'success',
+      message: t('common.api.actionSuccess'),
+    })
+    setShowSettingAuth(false)
+    onShowChange(false)
+  }
+
+  const { mutate: updatePermission } = useUpdateProviderCredentials({
+    onSuccess: handleCredentialSettingUpdate,
+  })
+
+  // install from marketplace
+  const currentTool = useMemo(() => {
+    return currentProvider?.tools.find(tool => tool.name === value?.tool_name)
+  }, [currentProvider?.tools, value?.tool_name])
+  const manifestIcon = useMemo(() => {
+    if (!manifest)
+      return ''
+    return `${MARKETPLACE_API_PREFIX}/plugins/${(manifest as any).plugin_id}/icon`
+  }, [manifest])
+  const handleInstall = async () => {
+    invalidateAllBuiltinTools()
+    invalidateInstalledPluginList()
+  }
+
+  return (
+    <>
+      <PortalToFollowElem
+        placement={placement}
+        offset={offset}
+        open={trigger ? controlledState : isShow}
+        onOpenChange={trigger ? onControlledStateChange : onShowChange}
+      >
+        <PortalToFollowElemTrigger
+          className='w-full'
+          onClick={() => {
+            if (!currentProvider || !currentTool) return
+            handleTriggerClick()
+          }}
+        >
+          {trigger}
+          {!trigger && !value?.provider_name && (
+            <ToolTrigger
+              isConfigure
+              open={isShow}
+              value={value}
+              provider={currentProvider}
+            />
+          )}
+          {!trigger && value?.provider_name && (
+            <ToolItem
+              open={isShow}
+              icon={currentProvider?.icon || manifestIcon}
+              providerName={value.provider_name}
+              toolLabel={value.tool_label || value.tool_name}
+              showSwitch={supportEnableSwitch}
+              switchValue={value.enabled}
+              onSwitchChange={handleEnabledChange}
+              onDelete={onDelete}
+              noAuth={currentProvider && currentTool && !currentProvider.is_team_authorization}
+              onAuth={() => setShowSettingAuth(true)}
+              uninstalled={!currentProvider && inMarketPlace}
+              versionMismatch={currentProvider && inMarketPlace && !currentTool}
+              installInfo={manifest?.latest_package_identifier}
+              onInstall={() => handleInstall()}
+              isError={(!currentProvider || !currentTool) && !inMarketPlace}
+              errorTip={
+                <div className='space-y-1 max-w-[240px] text-xs'>
+                  <h3 className='text-text-primary font-semibold'>{currentTool ? t('plugin.detailPanel.toolSelector.uninstalledTitle') : t('plugin.detailPanel.toolSelector.unsupportedTitle')}</h3>
+                  <p className='text-text-secondary tracking-tight'>{currentTool ? t('plugin.detailPanel.toolSelector.uninstalledContent') : t('plugin.detailPanel.toolSelector.unsupportedContent')}</p>
+                  <p>
+                    <Link href={'/plugins'} className='text-text-accent tracking-tight'>{t('plugin.detailPanel.toolSelector.uninstalledLink')}</Link>
+                  </p>
+                </div>
+              }
+            />
+          )}
+        </PortalToFollowElemTrigger>
+        <PortalToFollowElemContent className='z-[1000]'>
+          <div className={cn('relative w-[361px] min-h-20 max-h-[642px] pb-4 rounded-xl backdrop-blur-sm bg-components-panel-bg-blur border-[0.5px] border-components-panel-border shadow-lg', !isShowSettingAuth && 'overflow-y-auto pb-2')}>
+            {!isShowSettingAuth && (
+              <>
+                <div className='px-4 pt-3.5 pb-1 text-text-primary system-xl-semibold'>{t('plugin.detailPanel.toolSelector.title')}</div>
+                {/* base form */}
+                <div className='px-4 py-2 flex flex-col gap-3'>
+                  <div className='flex flex-col gap-1'>
+                    <div className='h-6 flex items-center system-sm-semibold text-text-secondary'>{t('plugin.detailPanel.toolSelector.toolLabel')}</div>
+                    <ToolPicker
+                      panelClassName='w-[328px]'
+                      placement='bottom'
+                      offset={offset}
+                      trigger={
+                        <ToolTrigger
+                          open={panelShowState || isShowChooseTool}
+                          value={value}
+                          provider={currentProvider}
+                        />
+                      }
+                      isShow={panelShowState || isShowChooseTool}
+                      onShowChange={trigger ? onPanelShowStateChange as any : setIsShowChooseTool}
+                      disabled={false}
+                      supportAddCustomTool
+                      onSelect={handleSelectTool}
+                      scope={scope}
+                      selectedTools={selectedTools}
+                    />
+                  </div>
+                  <div className='flex flex-col gap-1'>
+                    <div className='h-6 flex items-center system-sm-semibold text-text-secondary'>{t('plugin.detailPanel.toolSelector.descriptionLabel')}</div>
+                    <Textarea
+                      className='resize-none'
+                      placeholder={t('plugin.detailPanel.toolSelector.descriptionPlaceholder')}
+                      value={value?.extra?.description || ''}
+                      onChange={handleDescriptionChange}
+                      disabled={!value?.provider_name}
+                    />
+                  </div>
+                </div>
+                {/* authorization */}
+                {currentProvider && currentProvider.type === CollectionType.builtIn && currentProvider.allow_delete && (
+                  <>
+                    <Divider className='my-1 w-full' />
+                    <div className='px-4 py-2'>
+                      {!currentProvider.is_team_authorization && (
+                        <Button
+                          variant='primary'
+                          className={cn('shrink-0 w-full')}
+                          onClick={() => setShowSettingAuth(true)}
+                          disabled={!isCurrentWorkspaceManager}
+                        >
+                          {t('tools.auth.unauthorized')}
+                        </Button>
+                      )}
+                      {currentProvider.is_team_authorization && (
+                        <Button
+                          variant='secondary'
+                          className={cn('shrink-0 w-full')}
+                          onClick={() => setShowSettingAuth(true)}
+                          disabled={!isCurrentWorkspaceManager}
+                        >
+                          <Indicator className='mr-2' color={'green'} />
+                          {t('tools.auth.authorized')}
+                        </Button>
+                      )}
+                    </div>
+                  </>
+                )}
+                {/* tool settings */}
+                {(currentToolSettings.length > 0 || currentToolParams.length > 0) && currentProvider?.is_team_authorization && (
+                  <>
+                    <Divider className='my-1 w-full' />
+                    {/* tabs */}
+                    {nodeId && showTabSlider && (
+                      <TabSlider
+                        className='shrink-0 mt-1 px-4'
+                        itemClassName='py-3'
+                        noBorderBottom
+                        smallItem
+                        value={currType}
+                        onChange={(value) => {
+                          setCurrType(value)
+                        }}
+                        options={[
+                          { value: 'settings', text: t('plugin.detailPanel.toolSelector.settings')! },
+                          { value: 'params', text: t('plugin.detailPanel.toolSelector.params')! },
+                        ]}
+                      />
+                    )}
+                    {nodeId && showTabSlider && currType === 'params' && (
+                      <div className='px-4 py-2'>
+                        <div className='text-text-tertiary system-xs-regular'>{t('plugin.detailPanel.toolSelector.paramsTip1')}</div>
+                        <div className='text-text-tertiary system-xs-regular'>{t('plugin.detailPanel.toolSelector.paramsTip2')}</div>
+                      </div>
+                    )}
+                    {/* user settings only */}
+                    {userSettingsOnly && (
+                      <div className='p-4 pb-1'>
+                        <div className='text-text-primary system-sm-semibold-uppercase'>{t('plugin.detailPanel.toolSelector.settings')}</div>
+                      </div>
+                    )}
+                    {/* reasoning config only */}
+                    {nodeId && reasoningConfigOnly && (
+                      <div className='mb-1 p-4 pb-1'>
+                        <div className='text-text-primary system-sm-semibold-uppercase'>{t('plugin.detailPanel.toolSelector.params')}</div>
+                        <div className='pb-1'>
+                          <div className='text-text-tertiary system-xs-regular'>{t('plugin.detailPanel.toolSelector.paramsTip1')}</div>
+                          <div className='text-text-tertiary system-xs-regular'>{t('plugin.detailPanel.toolSelector.paramsTip2')}</div>
+                        </div>
+                      </div>
+                    )}
+                    {/* user settings form */}
+                    {(currType === 'settings' || userSettingsOnly) && (
+                      <div className='px-4 py-2'>
+                        <Form
+                          value={getPlainValue(value?.settings || {})}
+                          onChange={handleSettingsFormChange}
+                          formSchemas={settingsFormSchemas as any}
+                          isEditMode={true}
+                          showOnVariableMap={{}}
+                          validating={false}
+                          inputClassName='bg-components-input-bg-normal hover:bg-components-input-bg-hover'
+                          fieldMoreInfo={item => item.url
+                            ? (<a
+                              href={item.url}
+                              target='_blank' rel='noopener noreferrer'
+                              className='inline-flex items-center text-xs text-text-accent'
+                            >
+                              {t('tools.howToGet')}
+                              <RiArrowRightUpLine className='ml-1 w-3 h-3' />
+                            </a>)
+                            : null}
+                        />
+                      </div>
+                    )}
+                    {/* reasoning config form */}
+                    {nodeId && (currType === 'params' || reasoningConfigOnly) && (
+                      <ReasoningConfigForm
+                        value={value?.parameters || {}}
+                        onChange={handleParamsFormChange}
+                        schemas={paramsFormSchemas as any}
+                        nodeOutputVars={nodeOutputVars}
+                        availableNodes={availableNodes}
+                        nodeId={nodeId}
+                      />
+                    )}
+                  </>
+                )}
+              </>
+            )}
+            {/* authorization panel */}
+            {isShowSettingAuth && currentProvider && (
+              <>
+                <div className='relative pt-3.5 flex flex-col gap-1'>
+                  <div className='absolute -top-2 left-2 w-[345px] pt-2 rounded-t-xl backdrop-blur-sm bg-components-panel-bg-blur border-[0.5px] border-components-panel-border'></div>
+                  <div
+                    className='px-3 h-6 flex items-center gap-1 text-text-accent-secondary system-xs-semibold-uppercase cursor-pointer'
+                    onClick={() => setShowSettingAuth(false)}
+                  >
+                    <RiArrowLeftLine className='w-4 h-4' />
+                    BACK
+                  </div>
+                  <div className='px-4 text-text-primary system-xl-semibold'>{t('tools.auth.setupModalTitle')}</div>
+                  <div className='px-4 text-text-tertiary system-xs-regular'>{t('tools.auth.setupModalTitleDescription')}</div>
+                </div>
+                <ToolCredentialForm
+                  collection={currentProvider}
+                  onCancel={() => setShowSettingAuth(false)}
+                  onSaved={async value => updatePermission({
+                    providerName: currentProvider.name,
+                    credentials: value,
+                  })}
+                />
+              </>
+            )}
+          </div>
+        </PortalToFollowElemContent>
+      </PortalToFollowElem>
+    </>
+  )
+}
+export default React.memo(ToolSelector)

dify_1.0.1/web/app/components/plugins/plugin-detail-panel/tool-selector/reasoning-config-form.tsx

@@ -0,0 +1,275 @@
+import { useCallback, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import produce from 'immer'
+import {
+  RiArrowRightUpLine,
+} from '@remixicon/react'
+import Tooltip from '@/app/components/base/tooltip'
+import Switch from '@/app/components/base/switch'
+import Input from '@/app/components/workflow/nodes/_base/components/input-support-select-var'
+import VarReferencePicker from '@/app/components/workflow/nodes/_base/components/variable/var-reference-picker'
+import AppSelector from '@/app/components/plugins/plugin-detail-panel/app-selector'
+import ModelParameterModal from '@/app/components/plugins/plugin-detail-panel/model-selector'
+import { useLanguage } from '@/app/components/header/account-setting/model-provider-page/hooks'
+import { FormTypeEnum } from '@/app/components/header/account-setting/model-provider-page/declarations'
+import type { Node } from 'reactflow'
+import type {
+  NodeOutPutVar,
+  ValueSelector,
+  Var,
+} from '@/app/components/workflow/types'
+import type { ToolVarInputs } from '@/app/components/workflow/nodes/tool/types'
+import { VarType as VarKindType } from '@/app/components/workflow/nodes/tool/types'
+import { VarType } from '@/app/components/workflow/types'
+import cn from '@/utils/classnames'
+
+type Props = {
+  value: Record<string, any>
+  onChange: (val: Record<string, any>) => void
+  schemas: any[]
+  nodeOutputVars: NodeOutPutVar[],
+  availableNodes: Node[],
+  nodeId: string
+}
+
+const ReasoningConfigForm: React.FC<Props> = ({
+  value,
+  onChange,
+  schemas,
+  nodeOutputVars,
+  availableNodes,
+  nodeId,
+}) => {
+  const { t } = useTranslation()
+  const language = useLanguage()
+  const handleAutomatic = (key: string, val: any) => {
+    onChange({
+      ...value,
+      [key]: {
+        value: val ? null : value[key]?.value,
+        auto: val ? 1 : 0,
+      },
+    })
+  }
+
+  const [inputsIsFocus, setInputsIsFocus] = useState<Record<string, boolean>>({})
+  const handleInputFocus = useCallback((variable: string) => {
+    return (value: boolean) => {
+      setInputsIsFocus((prev) => {
+        return {
+          ...prev,
+          [variable]: value,
+        }
+      })
+    }
+  }, [])
+  const handleNotMixedTypeChange = useCallback((variable: string) => {
+    return (varValue: ValueSelector | string, varKindType: VarKindType) => {
+      const newValue = produce(value, (draft: ToolVarInputs) => {
+        const target = draft[variable].value
+        if (target) {
+          target.type = varKindType
+          target.value = varValue
+        }
+        else {
+          draft[variable].value = {
+            type: varKindType,
+            value: varValue,
+          }
+        }
+      })
+      onChange(newValue)
+    }
+  }, [value, onChange])
+  const handleMixedTypeChange = useCallback((variable: string) => {
+    return (itemValue: string) => {
+      const newValue = produce(value, (draft: ToolVarInputs) => {
+        const target = draft[variable].value
+        if (target) {
+          target.value = itemValue
+        }
+        else {
+          draft[variable].value = {
+            type: VarKindType.mixed,
+            value: itemValue,
+          }
+        }
+      })
+      onChange(newValue)
+    }
+  }, [value, onChange])
+  const handleFileChange = useCallback((variable: string) => {
+    return (varValue: ValueSelector | string) => {
+      const newValue = produce(value, (draft: ToolVarInputs) => {
+        draft[variable].value = {
+          type: VarKindType.variable,
+          value: varValue,
+        }
+      })
+      onChange(newValue)
+    }
+  }, [value, onChange])
+  const handleAppChange = useCallback((variable: string) => {
+    return (app: {
+      app_id: string
+      inputs: Record<string, any>
+      files?: any[]
+    }) => {
+      const newValue = produce(value, (draft: ToolVarInputs) => {
+        draft[variable].value = app as any
+      })
+      onChange(newValue)
+    }
+  }, [onChange, value])
+  const handleModelChange = useCallback((variable: string) => {
+    return (model: any) => {
+      const newValue = produce(value, (draft: ToolVarInputs) => {
+        draft[variable].value = {
+          ...draft[variable].value,
+          ...model,
+        } as any
+      })
+      onChange(newValue)
+    }
+  }, [onChange, value])
+
+  const renderField = (schema: any) => {
+    const {
+      variable,
+      label,
+      required,
+      tooltip,
+      type,
+      scope,
+      url,
+    } = schema
+    const auto = value[variable]?.auto
+    const tooltipContent = (tooltip && (
+      <Tooltip
+        popupContent={<div className='w-[200px]'>
+          {tooltip[language] || tooltip.en_US}
+        </div>}
+        triggerClassName='ml-1 w-4 h-4'
+        asChild={false} />
+    ))
+    const varInput = value[variable].value
+    const isNumber = type === FormTypeEnum.textNumber
+    const isSelect = type === FormTypeEnum.select
+    const isFile = type === FormTypeEnum.file || type === FormTypeEnum.files
+    const isAppSelector = type === FormTypeEnum.appSelector
+    const isModelSelector = type === FormTypeEnum.modelSelector
+    // const isToolSelector = type === FormTypeEnum.toolSelector
+    const isString = !isNumber && !isSelect && !isFile && !isAppSelector && !isModelSelector
+    return (
+      <div key={variable} className='space-y-1'>
+        <div className='flex items-center justify-between py-2 system-sm-semibold text-text-secondary'>
+          <div className='flex items-center space-x-2'>
+            <span className={cn('text-text-secondary code-sm-semibold')}>{label[language] || label.en_US}</span>
+            {required && (
+              <span className='ml-1 text-red-500'>*</span>
+            )}
+            {tooltipContent}
+          </div>
+          <div className='flex items-center gap-1 px-2 py-1 rounded-[6px] border border-divider-subtle bg-background-default-lighter cursor-pointer hover:bg-state-base-hover' onClick={() => handleAutomatic(variable, !auto)}>
+            <span className='text-text-secondary system-xs-medium'>{t('plugin.detailPanel.toolSelector.auto')}</span>
+            <Switch
+              size='xs'
+              defaultValue={!!auto}
+              onChange={val => handleAutomatic(variable, val)}
+            />
+          </div>
+        </div>
+        {auto === 0 && (
+          <>
+            {isString && (
+              <Input
+                className={cn(inputsIsFocus[variable] ? 'shadow-xs bg-gray-50 border-gray-300' : 'bg-gray-100 border-gray-100', 'rounded-lg px-3 py-[6px] border')}
+                value={varInput?.value as string || ''}
+                onChange={handleMixedTypeChange(variable)}
+                nodesOutputVars={nodeOutputVars}
+                availableNodes={availableNodes}
+                onFocusChange={handleInputFocus(variable)}
+                placeholder={t('workflow.nodes.http.insertVarPlaceholder')!}
+                placeholderClassName='!leading-[21px]'
+              />
+            )}
+            {/* {isString && (
+              <VarReferencePicker
+                zIndex={1001}
+                readonly={false}
+                isShowNodeName
+                nodeId={nodeId}
+                value={varInput?.value || ''}
+                onChange={handleNotMixedTypeChange(variable)}
+                defaultVarKindType={VarKindType.variable}
+                filterVar={(varPayload: Var) => varPayload.type === VarType.number || varPayload.type === VarType.secret || varPayload.type === VarType.string}
+              />
+            )} */}
+            {(isNumber || isSelect) && (
+              <VarReferencePicker
+                zIndex={1001}
+                readonly={false}
+                isShowNodeName
+                nodeId={nodeId}
+                value={varInput?.type === VarKindType.constant ? (varInput?.value ?? '') : (varInput?.value ?? [])}
+                onChange={handleNotMixedTypeChange(variable)}
+                defaultVarKindType={varInput?.type || (isNumber ? VarKindType.constant : VarKindType.variable)}
+                isSupportConstantValue
+                filterVar={isNumber ? (varPayload: Var) => varPayload.type === schema._type : undefined}
+                availableVars={isSelect ? nodeOutputVars : undefined}
+                schema={schema}
+              />
+            )}
+            {isFile && (
+              <VarReferencePicker
+                zIndex={1001}
+                readonly={false}
+                isShowNodeName
+                nodeId={nodeId}
+                value={varInput?.value || []}
+                onChange={handleFileChange(variable)}
+                defaultVarKindType={VarKindType.variable}
+                filterVar={(varPayload: Var) => varPayload.type === VarType.file || varPayload.type === VarType.arrayFile}
+              />
+            )}
+            {isAppSelector && (
+              <AppSelector
+                disabled={false}
+                scope={scope || 'all'}
+                value={varInput as any}
+                onSelect={handleAppChange(variable)}
+              />
+            )}
+            {isModelSelector && (
+              <ModelParameterModal
+                popupClassName='!w-[387px]'
+                isAdvancedMode
+                isInWorkflow
+                value={varInput as any}
+                setModel={handleModelChange(variable)}
+                scope={scope}
+              />
+            )}
+          </>
+        )}
+        {url && (
+          <a
+            href={url}
+            target='_blank' rel='noopener noreferrer'
+            className='inline-flex items-center text-xs text-text-accent'
+          >
+            {t('tools.howToGet')}
+            <RiArrowRightUpLine className='ml-1 w-3 h-3' />
+          </a>
+        )}
+      </div>
+    )
+  }
+  return (
+    <div className='px-4 py-2 space-y-3'>
+      {schemas.map(schema => renderField(schema))}
+    </div>
+  )
+}
+
+export default ReasoningConfigForm

dify_1.0.1/web/app/components/plugins/plugin-detail-panel/tool-selector/tool-credentials-form.tsx

@@ -0,0 +1,97 @@
+'use client'
+import type { FC } from 'react'
+import React, { useEffect, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import {
+  RiArrowRightUpLine,
+} from '@remixicon/react'
+import { addDefaultValue, toolCredentialToFormSchemas } from '@/app/components/tools/utils/to-form-schema'
+import type { Collection } from '@/app/components/tools/types'
+import Button from '@/app/components/base/button'
+import Toast from '@/app/components/base/toast'
+import { fetchBuiltInToolCredential, fetchBuiltInToolCredentialSchema } from '@/service/tools'
+import Loading from '@/app/components/base/loading'
+import Form from '@/app/components/header/account-setting/model-provider-page/model-modal/Form'
+import { useRenderI18nObject } from '@/hooks/use-i18n'
+import cn from '@/utils/classnames'
+
+type Props = {
+  collection: Collection
+  onCancel: () => void
+  onSaved: (value: Record<string, any>) => void
+}
+
+const ToolCredentialForm: FC<Props> = ({
+  collection,
+  onCancel,
+  onSaved,
+}) => {
+  const getValueFromI18nObject = useRenderI18nObject()
+  const { t } = useTranslation()
+  const [credentialSchema, setCredentialSchema] = useState<any>(null)
+  const { name: collectionName } = collection
+  const [tempCredential, setTempCredential] = React.useState<any>({})
+  useEffect(() => {
+    fetchBuiltInToolCredentialSchema(collectionName).then(async (res) => {
+      const toolCredentialSchemas = toolCredentialToFormSchemas(res)
+      const credentialValue = await fetchBuiltInToolCredential(collectionName)
+      setTempCredential(credentialValue)
+      const defaultCredentials = addDefaultValue(credentialValue, toolCredentialSchemas)
+      setCredentialSchema(toolCredentialSchemas)
+      setTempCredential(defaultCredentials)
+    })
+  }, [])
+
+  const handleSave = () => {
+    for (const field of credentialSchema) {
+      if (field.required && !tempCredential[field.name]) {
+        Toast.notify({ type: 'error', message: t('common.errorMsg.fieldRequired', { field: getValueFromI18nObject(field.label) }) })
+        return
+      }
+    }
+    onSaved(tempCredential)
+  }
+
+  return (
+    <>
+      {!credentialSchema
+        ? <div className='pt-3'><Loading type='app' /></div>
+        : (
+          <>
+            <div className='px-4 max-h-[464px] overflow-y-auto'>
+              <Form
+                value={tempCredential}
+                onChange={(v) => {
+                  setTempCredential(v)
+                }}
+                formSchemas={credentialSchema}
+                isEditMode={true}
+                showOnVariableMap={{}}
+                validating={false}
+                inputClassName='bg-components-input-bg-normal hover:bg-components-input-bg-hover'
+                fieldMoreInfo={item => item.url
+                  ? (<a
+                    href={item.url}
+                    target='_blank' rel='noopener noreferrer'
+                    className='inline-flex items-center text-xs text-text-accent'
+                  >
+                    {t('tools.howToGet')}
+                    <RiArrowRightUpLine className='ml-1 w-3 h-3' />
+                  </a>)
+                  : null}
+              />
+            </div>
+            <div className={cn('mt-1 flex justify-end px-4')} >
+              <div className='flex space-x-2'>
+                <Button onClick={onCancel}>{t('common.operation.cancel')}</Button>
+                <Button variant='primary' onClick={handleSave}>{t('common.operation.save')}</Button>
+              </div>
+            </div>
+          </>
+        )
+      }
+
+    </>
+  )
+}
+export default React.memo(ToolCredentialForm)

dify_1.0.1/web/app/components/plugins/plugin-detail-panel/tool-selector/tool-item.tsx

@@ -0,0 +1,163 @@
+'use client'
+import React, { useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import {
+  RiDeleteBinLine,
+  RiEqualizer2Line,
+  RiErrorWarningFill,
+} from '@remixicon/react'
+import { Group } from '@/app/components/base/icons/src/vender/other'
+import AppIcon from '@/app/components/base/app-icon'
+import Switch from '@/app/components/base/switch'
+import Button from '@/app/components/base/button'
+import Indicator from '@/app/components/header/indicator'
+import ActionButton from '@/app/components/base/action-button'
+import Tooltip from '@/app/components/base/tooltip'
+import { ToolTipContent } from '@/app/components/base/tooltip/content'
+import { InstallPluginButton } from '@/app/components/workflow/nodes/_base/components/install-plugin-button'
+import { SwitchPluginVersion } from '@/app/components/workflow/nodes/_base/components/switch-plugin-version'
+import cn from '@/utils/classnames'
+
+type Props = {
+  icon?: any
+  providerName?: string
+  toolLabel?: string
+  showSwitch?: boolean
+  switchValue?: boolean
+  onSwitchChange?: (value: boolean) => void
+  onDelete?: () => void
+  noAuth?: boolean
+  onAuth?: () => void
+  isError?: boolean
+  errorTip?: any
+  uninstalled?: boolean
+  installInfo?: string
+  onInstall?: () => void
+  versionMismatch?: boolean
+  open: boolean
+}
+
+const ToolItem = ({
+  open,
+  icon,
+  providerName,
+  toolLabel,
+  showSwitch,
+  switchValue,
+  onSwitchChange,
+  onDelete,
+  noAuth,
+  onAuth,
+  uninstalled,
+  installInfo,
+  onInstall,
+  isError,
+  errorTip,
+  versionMismatch,
+}: Props) => {
+  const { t } = useTranslation()
+  const providerNameText = providerName?.split('/').pop()
+  const isTransparent = uninstalled || versionMismatch || isError
+  const [isDeleting, setIsDeleting] = useState(false)
+
+  return (
+    <div className={cn(
+      'group p-1.5 pr-2 flex items-center gap-1 bg-components-panel-on-panel-item-bg border-[0.5px] border-components-panel-border-subtle rounded-lg shadow-xs cursor-default hover:bg-components-panel-on-panel-item-bg-hover hover:shadow-sm',
+      open && 'bg-components-panel-on-panel-item-bg-hover shadow-sm',
+      isDeleting && 'hover:bg-state-destructive-hover border-state-destructive-border shadow-xs',
+    )}>
+      {icon && (
+        <div className={cn('shrink-0', isTransparent && 'opacity-50')}>
+          {typeof icon === 'string' && <div className='w-7 h-7 bg-cover bg-center border-[0.5px] border-components-panel-border-subtle bg-background-default-dodge rounded-lg' style={{ backgroundImage: `url(${icon})` }} />}
+          {typeof icon !== 'string' && <AppIcon className='w-7 h-7 border-[0.5px] border-components-panel-border-subtle bg-background-default-dodge rounded-lg' size='xs' icon={icon?.content} background={icon?.background} />}
+        </div>
+      )}
+      {!icon && (
+        <div className={cn(
+          'flex items-center justify-center w-7 h-7 rounded-md border-[0.5px] border-components-panel-border-subtle bg-background-default-subtle',
+        )}>
+          <div className='flex w-5 h-5 items-center justify-center opacity-35'>
+            <Group className='text-text-tertiary' />
+          </div>
+        </div>
+      )}
+      <div className={cn('pl-0.5 grow truncate', isTransparent && 'opacity-50')}>
+        <div className='text-text-tertiary system-2xs-medium-uppercase'>{providerNameText}</div>
+        <div className='text-text-secondary system-xs-medium'>{toolLabel}</div>
+      </div>
+      <div className='hidden group-hover:flex items-center gap-1'>
+        {!noAuth && !isError && !uninstalled && !versionMismatch && (
+          <ActionButton>
+            <RiEqualizer2Line className='w-4 h-4' />
+          </ActionButton>
+        )}
+        <div
+          className='p-1 rounded-md text-text-tertiary cursor-pointer hover:text-text-destructive'
+          onClick={(e) => {
+            e.stopPropagation()
+            onDelete?.()
+          }}
+          onMouseOver={() => setIsDeleting(true)}
+          onMouseLeave={() => setIsDeleting(false)}
+        >
+          <RiDeleteBinLine className='w-4 h-4' />
+        </div>
+      </div>
+      {!isError && !uninstalled && !noAuth && !versionMismatch && showSwitch && (
+        <div className='mr-1' onClick={e => e.stopPropagation()}>
+          <Switch
+            size='md'
+            defaultValue={switchValue}
+            onChange={onSwitchChange}
+          />
+        </div>
+      )}
+      {!isError && !uninstalled && !versionMismatch && noAuth && (
+        <Button variant='secondary' size='small' onClick={onAuth}>
+          {t('tools.notAuthorized')}
+          <Indicator className='ml-2' color='orange' />
+        </Button>
+      )}
+      {!isError && !uninstalled && versionMismatch && installInfo && (
+        <div onClick={e => e.stopPropagation()}>
+          <SwitchPluginVersion
+            className='-mt-1'
+            uniqueIdentifier={installInfo}
+            tooltip={
+              <ToolTipContent
+                title={t('plugin.detailPanel.toolSelector.unsupportedTitle')}
+              >
+                {`${t('plugin.detailPanel.toolSelector.unsupportedContent')} ${t('plugin.detailPanel.toolSelector.unsupportedContent2')}`}
+              </ToolTipContent>
+            }
+            onChange={() => {
+              onInstall?.()
+            }}
+          />
+        </div>
+      )}
+      {!isError && uninstalled && installInfo && (
+        <InstallPluginButton
+          onClick={e => e.stopPropagation()}
+          size={'small'}
+          uniqueIdentifier={installInfo}
+          onSuccess={() => {
+            onInstall?.()
+          }}
+        />
+      )}
+      {isError && (
+        <Tooltip
+          popupContent={errorTip}
+          needsDelay
+        >
+          <div>
+            <RiErrorWarningFill className='w-4 h-4 text-text-destructive' />
+          </div>
+        </Tooltip>
+      )}
+    </div>
+  )
+}
+
+export default ToolItem

dify_1.0.1/web/app/components/plugins/plugin-detail-panel/tool-selector/tool-trigger.tsx

@@ -0,0 +1,63 @@
+'use client'
+import React from 'react'
+import { useTranslation } from 'react-i18next'
+import {
+  RiArrowDownSLine,
+  RiEqualizer2Line,
+} from '@remixicon/react'
+import BlockIcon from '@/app/components/workflow/block-icon'
+import { BlockEnum } from '@/app/components/workflow/types'
+import type { ToolWithProvider } from '@/app/components/workflow/types'
+import cn from '@/utils/classnames'
+
+type Props = {
+  open: boolean
+  provider?: ToolWithProvider
+  value?: {
+    provider_name: string
+    tool_name: string
+  }
+  isConfigure?: boolean
+}
+
+const ToolTrigger = ({
+  open,
+  provider,
+  value,
+  isConfigure,
+}: 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',
+      value?.provider_name && 'pl-1.5 py-1.5',
+    )}>
+      {value?.provider_name && provider && (
+        <div className='shrink-0 mr-1 p-px rounded-lg bg-components-panel-bg border border-components-panel-border'>
+          <BlockIcon
+            className='!w-4 !h-4'
+            type={BlockEnum.Tool}
+            toolIcon={provider.icon}
+          />
+        </div>
+      )}
+      {value?.tool_name && (
+        <div className='grow system-sm-medium text-components-input-text-filled'>{value.tool_name}</div>
+      )}
+      {!value?.provider_name && (
+        <div className='grow text-components-input-text-placeholder system-sm-regular'>
+          {!isConfigure ? t('plugin.detailPanel.toolSelector.placeholder') : t('plugin.detailPanel.configureTool')}
+        </div>
+      )}
+      {isConfigure && (
+        <RiEqualizer2Line className={cn('shrink-0 ml-0.5 w-4 h-4 text-text-quaternary group-hover:text-text-secondary', open && 'text-text-secondary')} />
+      )}
+      {!isConfigure && (
+        <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 ToolTrigger

dify_1.0.1/web/app/components/plugins/plugin-detail-panel/utils.ts

@@ -0,0 +1,21 @@
+import { FormTypeEnum } from '@/app/components/header/account-setting/model-provider-page/declarations'
+
+export const NAME_FIELD = {
+  type: FormTypeEnum.textInput,
+  name: 'name',
+  label: {
+    en_US: 'Endpoint Name',
+    zh_Hans: '端点名称',
+    ja_JP: 'エンドポイント名',
+    pt_BR: 'Nome do ponto final',
+  },
+  placeholder: {
+    en_US: 'Endpoint Name',
+    zh_Hans: '端点名称',
+    ja_JP: 'エンドポイント名',
+    pt_BR: 'Nome do ponto final',
+  },
+  required: true,
+  default: '',
+  help: null,
+}

dify_1.0.1/web/app/components/plugins/plugin-item/action.tsx

@@ -0,0 +1,165 @@
+'use client'
+import type { FC } from 'react'
+import React, { useCallback } from 'react'
+import { type MetaData, PluginSource } from '../types'
+import { RiDeleteBinLine, RiInformation2Line, RiLoopLeftLine } from '@remixicon/react'
+import { useBoolean } from 'ahooks'
+import { useTranslation } from 'react-i18next'
+import PluginInfo from '../plugin-page/plugin-info'
+import ActionButton from '../../base/action-button'
+import Tooltip from '../../base/tooltip'
+import Confirm from '../../base/confirm'
+import { uninstallPlugin } from '@/service/plugins'
+import { useGitHubReleases } from '../install-plugin/hooks'
+import Toast from '@/app/components/base/toast'
+import { useModalContext } from '@/context/modal-context'
+import { useInvalidateInstalledPluginList } from '@/service/use-plugins'
+import type { PluginType } from '@/app/components/plugins/types'
+
+const i18nPrefix = 'plugin.action'
+
+type Props = {
+  author: string
+  installationId: string
+  pluginUniqueIdentifier: string
+  pluginName: string
+  category: PluginType
+  usedInApps: number
+  isShowFetchNewVersion: boolean
+  isShowInfo: boolean
+  isShowDelete: boolean
+  onDelete: () => void
+  meta?: MetaData
+}
+const Action: FC<Props> = ({
+  author,
+  installationId,
+  pluginUniqueIdentifier,
+  pluginName,
+  category,
+  isShowFetchNewVersion,
+  isShowInfo,
+  isShowDelete,
+  onDelete,
+  meta,
+}) => {
+  const { t } = useTranslation()
+  const [isShowPluginInfo, {
+    setTrue: showPluginInfo,
+    setFalse: hidePluginInfo,
+  }] = useBoolean(false)
+  const [deleting, {
+    setTrue: showDeleting,
+    setFalse: hideDeleting,
+  }] = useBoolean(false)
+  const { checkForUpdates, fetchReleases } = useGitHubReleases()
+  const { setShowUpdatePluginModal } = useModalContext()
+  const invalidateInstalledPluginList = useInvalidateInstalledPluginList()
+
+  const handleFetchNewVersion = async () => {
+    const owner = meta!.repo.split('/')[0] || author
+    const repo = meta!.repo.split('/')[1] || pluginName
+    const fetchedReleases = await fetchReleases(owner, repo)
+    if (fetchedReleases.length === 0) return
+    const { needUpdate, toastProps } = checkForUpdates(fetchedReleases, meta!.version)
+    Toast.notify(toastProps)
+    if (needUpdate) {
+      setShowUpdatePluginModal({
+        onSaveCallback: () => {
+          invalidateInstalledPluginList()
+        },
+        payload: {
+          type: PluginSource.github,
+          category,
+          github: {
+            originalPackageInfo: {
+              id: pluginUniqueIdentifier,
+              repo: meta!.repo,
+              version: meta!.version,
+              package: meta!.package,
+              releases: fetchedReleases,
+            },
+          },
+        },
+      })
+    }
+  }
+
+  const [isShowDeleteConfirm, {
+    setTrue: showDeleteConfirm,
+    setFalse: hideDeleteConfirm,
+  }] = useBoolean(false)
+
+  const handleDelete = useCallback(async () => {
+    showDeleting()
+    const res = await uninstallPlugin(installationId)
+    hideDeleting()
+    if (res.success) {
+      hideDeleteConfirm()
+      onDelete()
+    }
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [installationId, onDelete])
+  return (
+    <div className='flex space-x-1'>
+      {/* Only plugin installed from GitHub need to check if it's the new version  */}
+      {isShowFetchNewVersion
+        && (
+          <Tooltip popupContent={t(`${i18nPrefix}.checkForUpdates`)}>
+            <ActionButton onClick={handleFetchNewVersion}>
+              <RiLoopLeftLine className='w-4 h-4 text-text-tertiary' />
+            </ActionButton>
+          </Tooltip>
+        )
+      }
+      {
+        isShowInfo
+        && (
+          <Tooltip popupContent={t(`${i18nPrefix}.pluginInfo`)}>
+            <ActionButton onClick={showPluginInfo}>
+              <RiInformation2Line className='w-4 h-4 text-text-tertiary' />
+            </ActionButton>
+          </Tooltip>
+        )
+      }
+      {
+        isShowDelete
+        && (
+          <Tooltip popupContent={t(`${i18nPrefix}.delete`)}>
+            <ActionButton
+              className='hover:bg-state-destructive-hover text-text-tertiary hover:text-text-destructive'
+              onClick={showDeleteConfirm}
+            >
+              <RiDeleteBinLine className='w-4 h-4' />
+            </ActionButton>
+          </Tooltip>
+        )
+      }
+
+      {isShowPluginInfo && (
+        <PluginInfo
+          repository={meta!.repo}
+          release={meta!.version}
+          packageName={meta!.package}
+          onHide={hidePluginInfo}
+        />
+      )}
+      <Confirm
+        isShow={isShowDeleteConfirm}
+        title={t(`${i18nPrefix}.delete`)}
+        content={
+          <div>
+            {t(`${i18nPrefix}.deleteContentLeft`)}<span className='system-md-semibold'>{pluginName}</span>{t(`${i18nPrefix}.deleteContentRight`)}<br />
+            {/* // todo: add usedInApps */}
+            {/* {usedInApps > 0 && t(`${i18nPrefix}.usedInApps`, { num: usedInApps })} */}
+          </div>
+        }
+        onCancel={hideDeleteConfirm}
+        onConfirm={handleDelete}
+        isLoading={deleting}
+        isDisabled={deleting}
+      />
+    </div>
+  )
+}
+export default React.memo(Action)

dify_1.0.1/web/app/components/plugins/plugin-item/index.tsx

@@ -0,0 +1,177 @@
+'use client'
+import type { FC } from 'react'
+import React, { useMemo } from 'react'
+import {
+  RiArrowRightUpLine,
+  RiBugLine,
+  RiHardDrive3Line,
+  RiLoginCircleLine,
+  RiVerifiedBadgeLine,
+} from '@remixicon/react'
+import { useTranslation } from 'react-i18next'
+import { usePluginPageContext } from '../plugin-page/context'
+import { Github } from '../../base/icons/src/public/common'
+import Badge from '../../base/badge'
+import { type PluginDetail, PluginSource, PluginType } from '../types'
+import CornerMark from '../card/base/corner-mark'
+import Description from '../card/base/description'
+import OrgInfo from '../card/base/org-info'
+import Title from '../card/base/title'
+import Action from './action'
+import cn from '@/utils/classnames'
+import { API_PREFIX, MARKETPLACE_URL_PREFIX } from '@/config'
+import { useSingleCategories } from '../hooks'
+import { useRenderI18nObject } from '@/hooks/use-i18n'
+import useRefreshPluginList from '@/app/components/plugins/install-plugin/hooks/use-refresh-plugin-list'
+
+type Props = {
+  className?: string
+  plugin: PluginDetail
+}
+
+const PluginItem: FC<Props> = ({
+  className,
+  plugin,
+}) => {
+  const { t } = useTranslation()
+  const { categoriesMap } = useSingleCategories()
+  const currentPluginID = usePluginPageContext(v => v.currentPluginID)
+  const setCurrentPluginID = usePluginPageContext(v => v.setCurrentPluginID)
+  const { refreshPluginList } = useRefreshPluginList()
+
+  const {
+    source,
+    tenant_id,
+    installation_id,
+    plugin_unique_identifier,
+    endpoints_active,
+    meta,
+    plugin_id,
+  } = plugin
+  const { category, author, name, label, description, icon, verified } = plugin.declaration
+
+  const orgName = useMemo(() => {
+    return [PluginSource.github, PluginSource.marketplace].includes(source) ? author : ''
+  }, [source, author])
+
+  const handleDelete = () => {
+    refreshPluginList({ category } as any)
+  }
+  const getValueFromI18nObject = useRenderI18nObject()
+  const title = getValueFromI18nObject(label)
+  const descriptionText = getValueFromI18nObject(description)
+
+  return (
+    <div
+      className={cn(
+        'p-1 rounded-xl border-[1.5px] border-background-section-burn',
+        currentPluginID === plugin_id && 'border-components-option-card-option-selected-border',
+        source === PluginSource.debugging
+          ? 'bg-[repeating-linear-gradient(-45deg,rgba(16,24,40,0.04),rgba(16,24,40,0.04)_5px,rgba(0,0,0,0.02)_5px,rgba(0,0,0,0.02)_10px)]'
+          : 'bg-background-section-burn',
+      )}
+      onClick={() => {
+        setCurrentPluginID(plugin.plugin_id)
+      }}
+    >
+      <div className={cn('relative p-4 pb-3 border-[0.5px] border-components-panel-border bg-components-panel-on-panel-item-bg hover-bg-components-panel-on-panel-item-bg rounded-xl shadow-xs', className)}>
+        <CornerMark text={categoriesMap[category].label} />
+        {/* Header */}
+        <div className="flex">
+          <div className='flex items-center justify-center w-10 h-10 overflow-hidden border-components-panel-border-subtle border-[1px] rounded-xl'>
+            <img
+              className='w-full h-full'
+              src={`${API_PREFIX}/workspaces/current/plugin/icon?tenant_id=${tenant_id}&filename=${icon}`}
+              alt={`plugin-${plugin_unique_identifier}-logo`}
+            />
+          </div>
+          <div className="ml-3 w-0 grow">
+            <div className="flex items-center h-5">
+              <Title title={title} />
+              {verified && <RiVerifiedBadgeLine className="shrink-0 ml-0.5 w-4 h-4 text-text-accent" />}
+              <Badge className='shrink-0 ml-1' text={source === PluginSource.github ? plugin.meta!.version : plugin.version} />
+            </div>
+            <div className='flex items-center justify-between'>
+              <Description text={descriptionText} descriptionLineRows={1}></Description>
+              <div onClick={e => e.stopPropagation()}>
+                <Action
+                  pluginUniqueIdentifier={plugin_unique_identifier}
+                  installationId={installation_id}
+                  author={author}
+                  pluginName={name}
+                  usedInApps={5}
+                  isShowFetchNewVersion={source === PluginSource.github}
+                  isShowInfo={source === PluginSource.github}
+                  isShowDelete
+                  meta={meta}
+                  onDelete={handleDelete}
+                  category={category}
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div className='mt-1.5 mb-1 flex justify-between items-center h-4 px-4'>
+        <div className='flex items-center'>
+          <OrgInfo
+            className="mt-0.5"
+            orgName={orgName}
+            packageName={name}
+            packageNameClassName='w-auto max-w-[150px]'
+          />
+          {category === PluginType.extension && (
+            <>
+              <div className='mx-2 text-text-quaternary system-xs-regular'>·</div>
+              <div className='flex text-text-tertiary system-xs-regular space-x-1'>
+                <RiLoginCircleLine className='w-4 h-4' />
+                <span>{t('plugin.endpointsEnabled', { num: endpoints_active })}</span>
+              </div>
+            </>
+          )}
+        </div>
+
+        <div className='flex items-center'>
+          {source === PluginSource.github
+            && <>
+              <a href={`https://github.com/${meta!.repo}`} target='_blank' className='flex items-center gap-1'>
+                <div className='text-text-tertiary system-2xs-medium-uppercase'>{t('plugin.from')}</div>
+                <div className='flex items-center space-x-0.5 text-text-secondary'>
+                  <Github className='w-3 h-3' />
+                  <div className='system-2xs-semibold-uppercase'>GitHub</div>
+                  <RiArrowRightUpLine className='w-3 h-3' />
+                </div>
+              </a>
+            </>
+          }
+          {source === PluginSource.marketplace
+            && <>
+              <a href={`${MARKETPLACE_URL_PREFIX}/plugins/${author}/${name}`} target='_blank' className='flex items-center gap-0.5'>
+                <div className='text-text-tertiary system-2xs-medium-uppercase'>{t('plugin.from')} <span className='text-text-secondary'>marketplace</span></div>
+                <RiArrowRightUpLine className='w-3 h-3 text-text-tertiary' />
+              </a>
+            </>
+          }
+          {source === PluginSource.local
+            && <>
+              <div className='flex items-center gap-1'>
+                <RiHardDrive3Line className='text-text-tertiary w-3 h-3' />
+                <div className='text-text-tertiary system-2xs-medium-uppercase'>Local Plugin</div>
+              </div>
+            </>
+          }
+          {source === PluginSource.debugging
+            && <>
+              <div className='flex items-center gap-1'>
+                <RiBugLine className='w-3 h-3 text-text-warning' />
+                <div className='text-text-warning system-2xs-medium-uppercase'>Debugging Plugin</div>
+              </div>
+            </>
+          }
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default React.memo(PluginItem)

dify_1.0.1/web/app/components/plugins/plugin-mutation-model/index.tsx

@@ -0,0 +1,79 @@
+import type { FC, ReactNode } from 'react'
+import React, { memo } from 'react'
+import Card from '@/app/components/plugins/card'
+import Modal from '@/app/components/base/modal'
+import Button from '@/app/components/base/button'
+import type { Plugin } from '../types'
+import type { UseMutationResult } from '@tanstack/react-query'
+
+type Props = {
+  plugin: Plugin
+  onCancel: () => void
+  mutation: Pick<UseMutationResult, 'isSuccess' | 'isPending'>
+  mutate: () => void
+  confirmButtonText: ReactNode
+  cancelButtonText: ReactNode
+  modelTitle: ReactNode
+  description: ReactNode
+  cardTitleLeft: ReactNode
+  modalBottomLeft?: ReactNode
+}
+
+const PluginMutationModal: FC<Props> = ({
+  plugin,
+  onCancel,
+  mutation,
+  confirmButtonText,
+  cancelButtonText,
+  modelTitle,
+  description,
+  cardTitleLeft,
+  mutate,
+  modalBottomLeft,
+}: Props) => {
+  return (
+    <Modal
+      isShow={true}
+      onClose={onCancel}
+      className='min-w-[560px]'
+      closable
+      title={modelTitle}
+    >
+      <div className='mt-3 mb-2 text-text-secondary system-md-regular'>
+        {description}
+      </div>
+      <div className='flex p-2 items-start content-start gap-1 self-stretch flex-wrap rounded-2xl bg-background-section-burn'>
+        <Card
+          installed={mutation.isSuccess}
+          payload={plugin}
+          className='w-full'
+          titleLeft={cardTitleLeft}
+        />
+      </div>
+      <div className='flex pt-5 items-center gap-2 self-stretch'>
+        <div>
+          {modalBottomLeft}
+        </div>
+        <div className='ml-auto flex gap-2'>
+          {!mutation.isPending && (
+            <Button onClick={onCancel}>
+              {cancelButtonText}
+            </Button>
+          )}
+          <Button
+            variant='primary'
+            loading={mutation.isPending}
+            onClick={mutate}
+            disabled={mutation.isPending}
+          >
+            {confirmButtonText}
+          </Button>
+        </div>
+      </div>
+    </Modal>
+  )
+}
+
+PluginMutationModal.displayName = 'PluginMutationModal'
+
+export default memo(PluginMutationModal)

dify_1.0.1/web/app/components/plugins/plugin-page/context.tsx

@@ -0,0 +1,95 @@
+'use client'
+
+import type { ReactNode } from 'react'
+import {
+  useMemo,
+  useRef,
+  useState,
+} from 'react'
+import {
+  createContext,
+  useContextSelector,
+} from 'use-context-selector'
+import { useSelector as useAppContextSelector } from '@/context/app-context'
+import type { FilterState } from './filter-management'
+import { useTranslation } from 'react-i18next'
+import { useTabSearchParams } from '@/hooks/use-tab-searchparams'
+
+export type PluginPageContextValue = {
+  containerRef: React.RefObject<HTMLDivElement>
+  currentPluginID: string | undefined
+  setCurrentPluginID: (pluginID?: string) => void
+  filters: FilterState
+  setFilters: (filter: FilterState) => void
+  activeTab: string
+  setActiveTab: (tab: string) => void
+  options: Array<{ value: string, text: string }>
+}
+
+export const PluginPageContext = createContext<PluginPageContextValue>({
+  containerRef: { current: null },
+  currentPluginID: undefined,
+  setCurrentPluginID: () => { },
+  filters: {
+    categories: [],
+    tags: [],
+    searchQuery: '',
+  },
+  setFilters: () => { },
+  activeTab: '',
+  setActiveTab: () => { },
+  options: [],
+})
+
+type PluginPageContextProviderProps = {
+  children: ReactNode
+}
+
+export function usePluginPageContext(selector: (value: PluginPageContextValue) => any) {
+  return useContextSelector(PluginPageContext, selector)
+}
+
+export const PluginPageContextProvider = ({
+  children,
+}: PluginPageContextProviderProps) => {
+  const { t } = useTranslation()
+  const containerRef = useRef<HTMLDivElement>(null)
+  const [filters, setFilters] = useState<FilterState>({
+    categories: [],
+    tags: [],
+    searchQuery: '',
+  })
+  const [currentPluginID, setCurrentPluginID] = useState<string | undefined>()
+
+  const { enable_marketplace } = useAppContextSelector(s => s.systemFeatures)
+  const options = useMemo(() => {
+    return [
+      { value: 'plugins', text: t('common.menus.plugins') },
+      ...(
+        enable_marketplace
+          ? [{ value: 'discover', text: t('common.menus.exploreMarketplace') }]
+          : []
+      ),
+    ]
+  }, [t, enable_marketplace])
+  const [activeTab, setActiveTab] = useTabSearchParams({
+    defaultTab: options[0].value,
+  })
+
+  return (
+    <PluginPageContext.Provider
+      value={{
+        containerRef,
+        currentPluginID,
+        setCurrentPluginID,
+        filters,
+        setFilters,
+        activeTab,
+        setActiveTab,
+        options,
+      }}
+    >
+      {children}
+    </PluginPageContext.Provider>
+  )
+}

dify_1.0.1/web/app/components/plugins/plugin-page/debug-info.tsx

@@ -0,0 +1,63 @@
+'use client'
+import type { FC } from 'react'
+import React from 'react'
+import {
+  RiArrowRightUpLine,
+  RiBugLine,
+} from '@remixicon/react'
+import { useTranslation } from 'react-i18next'
+import KeyValueItem from '../base/key-value-item'
+import Tooltip from '@/app/components/base/tooltip'
+import Button from '@/app/components/base/button'
+import { useDebugKey } from '@/service/use-plugins'
+
+const i18nPrefix = 'plugin.debugInfo'
+
+const DebugInfo: FC = () => {
+  const { t } = useTranslation()
+  const { data: info, isLoading } = useDebugKey()
+
+  // info.key likes 4580bdb7-b878-471c-a8a4-bfd760263a53 mask the middle part using *.
+  const maskedKey = info?.key?.replace(/(.{8})(.*)(.{8})/, '$1********$3')
+
+  if (isLoading) return null
+
+  return (
+    <Tooltip
+      triggerMethod='click'
+      disabled={!info}
+      popupContent={
+        <>
+          <div className='flex items-center gap-1 self-stretch'>
+            <span className='flex flex-col justify-center items-start grow shrink-0 basis-0 text-text-secondary system-sm-semibold'>{t(`${i18nPrefix}.title`)}</span>
+            <a href='https://docs.dify.ai/plugins/quick-start/develop-plugins/debug-plugin' target='_blank' className='flex items-center gap-0.5 text-text-accent-light-mode-only cursor-pointer'>
+              <span className='system-xs-medium'>{t(`${i18nPrefix}.viewDocs`)}</span>
+              <RiArrowRightUpLine className='w-3 h-3' />
+            </a>
+          </div>
+          <div className='space-y-0.5'>
+            <KeyValueItem
+              label={'URL'}
+              value={`${info?.host}:${info?.port}`}
+            />
+            <KeyValueItem
+              label={'Key'}
+              value={info?.key || ''}
+              maskedValue={maskedKey}
+            />
+          </div>
+        </>
+      }
+      popupClassName='flex flex-col items-start w-[256px] px-4 py-3.5 gap-1 border border-components-panel-border
+        rounded-xl bg-components-tooltip-bg shadows-shadow-lg z-50'
+      asChild={false}
+      position='bottom'
+    >
+      <Button className='w-full h-full p-2 text-components-button-secondary-text'>
+        <RiBugLine className='w-4 h-4' />
+      </Button>
+    </Tooltip>
+  )
+}
+
+export default React.memo(DebugInfo)