dify/web/app/components/plugins/readme-panel/content.tsx

'use client'

import type { ReactNode } from 'react'
import type { PluginDetail } from '../types'
import { useTranslation } from 'react-i18next'
import Loading from '@/app/components/base/loading'
import { Markdown } from '@/app/components/base/markdown'
import { useLanguage } from '@/app/components/header/account-setting/model-provider-page/hooks'
import { usePluginReadme } from '@/service/use-plugins'
import DetailHeader from '../plugin-detail-panel/detail-header'

type ReadmePanelContentProps = {
  detail: PluginDetail
  title: ReactNode
  closeButton: ReactNode
}

export function ReadmePanelContent({ detail, title, closeButton }: ReadmePanelContentProps) {
  const { t } = useTranslation()
  const language = useLanguage()
  const pluginUniqueIdentifier = detail.plugin_unique_identifier || ''

  const {
    data: readmeData,
    isLoading,
    error,
  } = usePluginReadme({
    plugin_unique_identifier: pluginUniqueIdentifier,
    language: language === 'zh-Hans' ? undefined : language,
  })

  let readmeContent: ReactNode
  if (isLoading) {
    readmeContent = (
      <div className="flex h-40 items-center justify-center">
        <Loading type="area" />
      </div>
    )
  } else if (error) {
    readmeContent = (
      <div className="py-8 text-center text-text-tertiary">
        <p>{t(($) => $['readmeInfo.failedToFetch'], { ns: 'plugin' })}</p>
      </div>
    )
  } else if (readmeData?.readme) {
    readmeContent = (
      <Markdown
        content={readmeData.readme}
        pluginInfo={{ pluginUniqueIdentifier, pluginId: detail.plugin_id }}
      />
    )
  } else {
    readmeContent = (
      <div className="py-8 text-center text-text-tertiary">
        <p>{t(($) => $['readmeInfo.noReadmeAvailable'], { ns: 'plugin' })}</p>
      </div>
    )
  }

  return (
    <div className="flex size-full min-h-0 flex-col overflow-hidden">
      <div className="shrink-0 rounded-t-xl bg-background-body p-4">
        <div className="mb-3 flex items-center justify-between gap-3">
          <div className="flex min-w-0 items-center gap-1">
            <span
              aria-hidden="true"
              className="i-ri-book-read-line size-3 shrink-0 text-text-tertiary"
            />
            {title}
          </div>
          {closeButton}
        </div>
        <DetailHeader detail={detail} isReadmeView={true} />
      </div>

      <div className="min-h-0 flex-1 overflow-y-auto overscroll-contain px-4 py-3">
        {readmeContent}
      </div>
    </div>
  )
}