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

'use client'
import type { FC } from 'react'
import type { Plugin, PluginDeclaration, PluginManifestInMarket } from '../../types'
import { Button } from '@langgenius/dify-ui/button'
import * as React from 'react'
import { Trans, useTranslation } from 'react-i18next'
import Badge, { BadgeState } from '@/app/components/base/badge/index'
import { buildIntegrationPath } from '@/app/components/integrations/routes'
import Link from '@/next/link'
import Card from '../../card'
import { PluginCategoryEnum } from '../../types'
import { pluginManifestInMarketToPluginProps, pluginManifestToCardPluginProps } from '../utils'

type Props = Readonly<{
  payload?: Plugin | PluginDeclaration | PluginManifestInMarket | null
  isMarketPayload?: boolean
  isFailed: boolean
  errMsg?: string | null
  installContextCategory?: PluginCategoryEnum
  onCancel: () => void
}>

type CategoryTarget = {
  labelKey: 'menus.tools' | 'settings.agentStrategy' | 'settings.dataSource' | 'settings.extension' | 'settings.provider' | 'settings.trigger'
  path: string
}

const categoryTargetMap: Partial<Record<PluginCategoryEnum, CategoryTarget>> = {
  [PluginCategoryEnum.model]: {
    labelKey: 'settings.provider',
    path: buildIntegrationPath('provider'),
  },
  [PluginCategoryEnum.tool]: {
    labelKey: 'menus.tools',
    path: buildIntegrationPath('builtin'),
  },
  [PluginCategoryEnum.datasource]: {
    labelKey: 'settings.dataSource',
    path: buildIntegrationPath('data-source'),
  },
  [PluginCategoryEnum.trigger]: {
    labelKey: 'settings.trigger',
    path: buildIntegrationPath('trigger'),
  },
  [PluginCategoryEnum.agent]: {
    labelKey: 'settings.agentStrategy',
    path: buildIntegrationPath('agent-strategy'),
  },
  [PluginCategoryEnum.extension]: {
    labelKey: 'settings.extension',
    path: buildIntegrationPath('extension'),
  },
}

const Installed: FC<Props> = ({
  payload,
  isMarketPayload,
  isFailed,
  errMsg,
  installContextCategory,
  onCancel,
}) => {
  const { t } = useTranslation('plugin')
  const installedCategory = payload?.category
  const categoryTarget = !isFailed && installContextCategory && installedCategory !== installContextCategory
    ? categoryTargetMap[installedCategory as PluginCategoryEnum]
    : undefined
  const categoryName = categoryTarget ? t(categoryTarget.labelKey, { ns: 'common' }) : ''

  const handleClose = () => {
    onCancel()
  }
  return (
    <>
      <div className="flex flex-col items-start justify-center gap-2 self-stretch px-6 py-3">
        <p className="system-md-regular text-text-secondary">
          {(isFailed && errMsg)
            ? errMsg
            : categoryTarget
              ? (
                  <Trans
                    t={t}
                    i18nKey="installModal.installedSuccessfullyWithPageDesc"
                    ns="plugin"
                    components={{
                      categoryName: <span className="system-sm-semibold text-text-secondary" />,
                    }}
                    values={{ categoryName }}
                  />
                )
              : t(`installModal.${isFailed ? 'installFailedDesc' : 'installedSuccessfullyDesc'}`, { ns: 'plugin' })}
        </p>
        {payload && (
          <div className="flex flex-wrap content-start items-start gap-1 self-stretch rounded-2xl bg-background-section-burn p-2">
            <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>}
              compact
            />
          </div>
        )}
      </div>
      {/* Action Buttons */}
      <div className="flex items-center justify-end gap-2 self-stretch p-6 pt-5">
        <Button
          variant="primary"
          className="min-w-[72px]"
          render={categoryTarget ? <Link href={categoryTarget.path} /> : undefined}
          onClick={handleClose}
        >
          {categoryTarget
            ? (
                <>
                  <span>{t('installModal.viewDetails', { ns: 'plugin' })}</span>
                  <span className="i-ri-arrow-right-up-line size-4 shrink-0" aria-hidden="true" />
                </>
              )
            : t('operation.close', { ns: 'common' })}
        </Button>
      </div>
    </>
  )
}
export default React.memo(Installed)